/* =========================================================

   CAMPUS EVENT MANAGEMENT SYSTEM

   FULL MAIN STYLESHEET

   File: assets/css/style.css

========================================================= */





/* =========================================================

   1. GLOBAL RESET

========================================================= */



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

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

    background: #07111f;

    color: #ffffff;

    min-height: 100vh;

    overflow-x: hidden;

}



body.popup-open {

    overflow: hidden;

}



main {

    min-height: 70vh;

}



a {

    color: inherit;

}





/* =========================================================

   2. ANIMATED BACKGROUND

========================================================= */



.animated-background {

    position: fixed;

    inset: 0;

    z-index: -1;

    overflow: hidden;



    background:

        radial-gradient(

            circle at top left,

            #162b4d 0%,

            #07111f 45%,

            #050b14 100%

        );

}



.blob {

    position: absolute;

    border-radius: 50%;

    filter: blur(10px);

    opacity: 0.22;

    pointer-events: none;

}



.blob1 {

    width: 300px;

    height: 300px;

    background: #6c63ff;



    top: 10%;

    left: 5%;



    animation:

        moveOne

        14s

        infinite

        alternate

        ease-in-out;

}



.blob2 {

    width: 400px;

    height: 400px;

    background: #00d4ff;



    right: -100px;

    top: 20%;



    animation:

        moveTwo

        18s

        infinite

        alternate

        ease-in-out;

}



.blob3 {

    width: 250px;

    height: 250px;

    background: #9b5cff;



    bottom: 5%;

    left: 35%;



    animation:

        moveThree

        16s

        infinite

        alternate

        ease-in-out;

}



.blob4 {

    width: 180px;

    height: 180px;

    background: #00ffc8;



    bottom: 15%;

    right: 15%;



    animation:

        moveOne

        12s

        infinite

        alternate-reverse

        ease-in-out;

}





/* =========================================================

   3. BACKGROUND ANIMATIONS

========================================================= */



@keyframes moveOne {

    from {

        transform:

            translate(0, 0)

            rotate(0deg);

    }



    to {

        transform:

            translate(120px, 80px)

            rotate(30deg);

    }

}



@keyframes moveTwo {

    from {

        transform:

            translate(0, 0)

            scale(1);

    }



    to {

        transform:

            translate(-150px, 100px)

            scale(1.2);

    }

}



@keyframes moveThree {

    from {

        transform:

            translate(0, 0);

    }



    to {

        transform:

            translate(-100px, -120px);

    }

}





/* =========================================================

   4. NAVIGATION BAR

========================================================= */



.navbar {

    width: 100%;

    min-height: 75px;



    display: flex;

    align-items: center;

    justify-content: space-between;



    gap: 25px;



    padding: 15px 7%;



    background:

        rgba(

            7,

            17,

            31,

            0.82

        );



    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);



    border-bottom:

        1px solid

        rgba(

            255,

            255,

            255,

            0.08

        );



    position: sticky;

    top: 0;



    z-index: 1000;



    transition:

        background 0.3s ease,

        box-shadow 0.3s ease;

}





/* =========================================================

   5. LOGO

========================================================= */



.logo {

    color: #ffffff;

    font-size: 25px;

    font-weight: 700;



    text-decoration: none;



    white-space: nowrap;



    letter-spacing: -0.5px;

}



.logo span {

    color: #8178ff;

}





/* =========================================================

   6. NAVIGATION LINKS

========================================================= */



.nav-links {

    display: flex;

    align-items: center;

    justify-content: flex-end;



    flex-wrap: wrap;



    gap: 20px;

}



.nav-links a {

    color: #d7dceb;

    text-decoration: none;



    font-size: 15px;



    transition:

        color 0.3s ease,

        transform 0.3s ease;

}



.nav-links a:hover {

    color: #ffffff;

    transform: translateY(-2px);

}



.student-name {

    color: #9ba8c7;

    font-size: 14px;

}





/* =========================================================

   7. NAVIGATION BUTTONS

========================================================= */



.btn-signup,

.btn-admin,

.btn-outline {

    display: inline-block;



    padding: 10px 17px;



    border-radius: 9px;



    text-decoration: none;



    transition:

        transform 0.3s ease,

        box-shadow 0.3s ease,

        background 0.3s ease;

}



.btn-signup {

    background: #6c63ff;

    color: #ffffff !important;

}



.btn-signup:hover {

    background: #7d75ff;



    transform: translateY(-2px);



    box-shadow:

        0 8px 25px

        rgba(

            108,

            99,

            255,

            0.30

        );

}



.btn-admin {

    background:

        linear-gradient(

            135deg,

            #795cff,

            #5742db

        );



    color: #ffffff !important;

    font-weight: 600;

}



.btn-admin:hover {

    transform: translateY(-2px);



    box-shadow:

        0 8px 25px

        rgba(

            108,

            99,

            255,

            0.35

        );

}



.btn-outline {

    border: 1px solid #6c63ff;

    color: #ffffff !important;

}



.btn-outline:hover {

    background:

        rgba(

            108,

            99,

            255,

            0.15

        );

}





/* =========================================================

   8. HERO SECTION

========================================================= */



.hero {

    min-height: 83vh;



    display: flex;

    align-items: center;

    justify-content: center;



    text-align: center;



    padding: 80px 20px;

}



.hero-content {

    width: 100%;

    max-width: 850px;

}





/* =========================================================

   9. BADGE

========================================================= */



.badge {

    display: inline-block;



    padding: 8px 18px;



    border:

        1px solid

        rgba(

            108,

            99,

            255,

            0.5

        );



    background:

        rgba(

            108,

            99,

            255,

            0.1

        );



    border-radius: 50px;



    color: #bbb6ff;



    font-size: 13px;

    font-weight: 600;



    letter-spacing: 0.5px;



    margin-bottom: 25px;

}





/* =========================================================

   10. HERO TITLE

========================================================= */



.hero h1 {

    font-size:

        clamp(

            45px,

            7vw,

            80px

        );



    line-height: 1.05;



    margin-bottom: 25px;



    letter-spacing: -2px;

}





/* =========================================================

   11. GRADIENT TEXT

========================================================= */



.gradient-text {

    display: inline-block;



    background:

        linear-gradient(

            90deg,

            #8279ff,

            #55dfff

        );



    background-clip: text;

    -webkit-background-clip: text;



    color: transparent;

    -webkit-text-fill-color: transparent;

}



.hero p {

    color: #aab4c9;

    font-size: 19px;



    line-height: 1.8;



    max-width: 680px;



    margin: 0 auto;

}





/* =========================================================

   12. HERO BUTTONS

========================================================= */



.hero-buttons {

    margin-top: 35px;



    display: flex;

    justify-content: center;

    align-items: center;



    flex-wrap: wrap;



    gap: 15px;

}





/* =========================================================

   13. MAIN BUTTONS

========================================================= */



.primary-btn,

.secondary-btn {

    display: inline-block;



    padding: 13px 22px;



    border-radius: 10px;



    text-decoration: none;



    font-size: 15px;



    cursor: pointer;



    transition:

        transform 0.3s ease,

        box-shadow 0.3s ease,

        background 0.3s ease,

        border-color 0.3s ease;

}



.primary-btn {

    background:

        linear-gradient(

            135deg,

            #6c63ff,

            #554ce0

        );



    color: #ffffff;



    border: 1px solid transparent;

}



.primary-btn:hover {

    transform: translateY(-3px);



    box-shadow:

        0 10px 30px

        rgba(

            108,

            99,

            255,

            0.30

        );

}



.secondary-btn {

    color: #ffffff;



    border:

        1px solid

        rgba(

            255,

            255,

            255,

            0.20

        );



    background:

        rgba(

            255,

            255,

            255,

            0.05

        );

}



.secondary-btn:hover {

    transform: translateY(-3px);



    background:

        rgba(

            255,

            255,

            255,

            0.10

        );



    border-color:

        rgba(

            255,

            255,

            255,

            0.35

        );

}





/* =========================================================

   14. GENERAL CONTAINER

========================================================= */



.container {

    width:

        min(

            1100px,

            90%

        );



    margin: 0 auto;

}



.section {

    padding: 80px 0;

}



.section-title {

    font-size:

        clamp(

            30px,

            5vw,

            40px

        );



    margin-bottom: 10px;

}



.section-subtitle {

    color: #9aa7bd;



    line-height: 1.7;



    margin-bottom: 35px;



    max-width: 750px;

}





/* =========================================================

   15. EVENT GRID

========================================================= */



.event-grid {

    display: grid;



    grid-template-columns:

        repeat(

            auto-fit,

            minmax(

                270px,

                1fr

            )

        );



    gap: 25px;

}





/* =========================================================

   16. EVENT CARD

========================================================= */



.event-card {

    position: relative;



    background:

        rgba(

            255,

            255,

            255,

            0.06

        );



    border:

        1px solid

        rgba(

            255,

            255,

            255,

            0.09

        );



    border-radius: 18px;



    padding: 25px;



    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);



    transition:

        transform 0.3s ease,

        border-color 0.3s ease,

        box-shadow 0.3s ease;

}



.event-card:hover {

    transform: translateY(-8px);



    border-color:

        rgba(

            108,

            99,

            255,

            0.6

        );



    box-shadow:

        0 15px 40px

        rgba(

            0,

            0,

            0,

            0.20

        );

}



.event-card h3 {

    font-size: 21px;

    margin-bottom: 15px;



    color: #ffffff;

}



.event-card p {

    color: #aeb8ca;



    margin-bottom: 10px;



    line-height: 1.6;

}





/* =========================================================

   17. FORMS

========================================================= */



.form-container {

    width:

        min(

            500px,

            90%

        );



    margin: 70px auto;



    padding: 35px;



    background:

        rgba(

            255,

            255,

            255,

            0.06

        );



    border:

        1px solid

        rgba(

            255,

            255,

            255,

            0.10

        );



    border-radius: 20px;



    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);



    box-shadow:

        0 25px 70px

        rgba(

            0,

            0,

            0,

            0.20

        );

}



.form-container h2 {

    font-size: 30px;

    margin-bottom: 10px;

}



.form-description {

    color: #9ba7ba;



    line-height: 1.6;



    margin-bottom: 30px;

}





/* =========================================================

   18. FORM GROUP

========================================================= */



.form-group {

    margin-bottom: 20px;

}



.form-group label {

    display: block;



    margin-bottom: 8px;



    color: #dce2ed;



    font-size: 14px;

    font-weight: 600;

}





/* =========================================================

   19. FORM INPUTS

========================================================= */



.form-group input,

.form-group textarea,

.form-group select {

    width: 100%;



    padding: 13px 14px;



    background:

        rgba(

            255,

            255,

            255,

            0.07

        );



    border:

        1px solid

        rgba(

            255,

            255,

            255,

            0.12

        );



    border-radius: 8px;



    color: #ffffff;



    font-family: inherit;

    font-size: 15px;



    outline: none;



    transition:

        border-color 0.3s ease,

        background 0.3s ease,

        box-shadow 0.3s ease;

}



.form-group textarea {

    resize: vertical;

    min-height: 120px;

}



.form-group input::placeholder,

.form-group textarea::placeholder {

    color: #718096;

}



.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus {

    border-color: #6c63ff;



    background:

        rgba(

            255,

            255,

            255,

            0.09

        );



    box-shadow:

        0 0 0 3px

        rgba(

            108,

            99,

            255,

            0.12

        );

}



.form-group select option {

    background: #101b2d;

    color: #ffffff;

}



.form-group input[type="date"],

.form-group input[type="time"] {

    color-scheme: dark;

}





/* =========================================================

   20. PASSWORD SHOW / HIDE

========================================================= */



.password-wrapper {

    position: relative;

    width: 100%;

}



.form-group .password-wrapper input {

    width: 100%;

    padding-right: 55px;

}



.password-toggle {

    position: absolute;



    top: 50%;

    right: 10px;



    transform: translateY(-50%);



    width: 40px;

    height: 40px;



    display: flex;

    align-items: center;

    justify-content: center;



    background: transparent;



    border: none;

    border-radius: 8px;



    color: #ffffff;



    font-size: 18px;



    cursor: pointer;



    transition:

        background 0.3s ease,

        transform 0.2s ease;

}



.password-toggle:hover {

    background:

        rgba(

            255,

            255,

            255,

            0.08

        );



    transform:

        translateY(-50%)

        scale(1.05);

}



.password-toggle:focus {

    outline:

        2px solid

        rgba(

            108,

            99,

            255,

            0.5

        );



    outline-offset: 1px;

}





/* =========================================================

   21. FORM BUTTON

========================================================= */



.form-btn {

    width: 100%;



    border: none;



    padding: 14px;



    border-radius: 9px;



    background:

        linear-gradient(

            135deg,

            #6c63ff,

            #554ce0

        );



    color: #ffffff;



    font-size: 16px;

    font-weight: 600;



    cursor: pointer;



    transition:

        transform 0.3s ease,

        box-shadow 0.3s ease,

        opacity 0.3s ease;

}



.form-btn:hover {

    transform: translateY(-2px);



    box-shadow:

        0 10px 30px

        rgba(

            108,

            99,

            255,

            0.30

        );

}



.form-btn:active {

    transform: translateY(0);

}



.form-btn:disabled {

    opacity: 0.6;

    cursor: not-allowed;



    transform: none;

}





/* =========================================================

   22. FORM LINKS

========================================================= */



.form-container a:not(.primary-btn):not(.secondary-btn) {

    color: #938cff;



    text-decoration: none;



    transition:

        color 0.3s ease;

}



.form-container a:not(.primary-btn):not(.secondary-btn):hover {

    color: #b2adff;

    text-decoration: underline;

}





/* =========================================================

   23. AUTH FOOTER

========================================================= */



.auth-footer {

    margin-top: 25px;



    padding-top: 20px;



    border-top:

        1px solid

        rgba(

            255,

            255,

            255,

            0.08

        );



    text-align: center;



    color: #9ba7ba;



    font-size: 14px;

}



.auth-footer p {

    line-height: 1.6;

}



.auth-footer a {

    color: #938cff !important;

    font-weight: 600;



    text-decoration: none;

}



.auth-footer a:hover {

    color: #b2adff !important;

    text-decoration: underline;

}





/* =========================================================

   24. BACK HOME

========================================================= */



.back-home {

    margin-top: 20px;

    text-align: center;

}



.back-home a {

    color: #9ba7ba !important;



    text-decoration: none;



    font-size: 14px;



    transition:

        color 0.3s ease;

}



.back-home a:hover {

    color: #ffffff !important;

    text-decoration: none !important;

}





/* =========================================================

   25. ERROR MESSAGE

========================================================= */



.error-message {

    padding: 13px 15px;



    margin-bottom: 20px;



    background:

        rgba(

            255,

            70,

            70,

            0.12

        );



    border:

        1px solid

        rgba(

            255,

            70,

            70,

            0.40

        );



    border-radius: 8px;



    color: #ff9999;



    line-height: 1.5;



    transition: opacity 0.5s ease;

}





/* =========================================================

   26. SUCCESS MESSAGE

========================================================= */



.success-message {

    padding: 13px 15px;



    margin-bottom: 20px;



    background:

        rgba(

            50,

            220,

            150,

            0.12

        );



    border:

        1px solid

        rgba(

            50,

            220,

            150,

            0.40

        );



    border-radius: 8px;



    color: #8fffc9;



    line-height: 1.5;



    transition: opacity 0.5s ease;

}





/* =========================================================

   27. ADMIN WRAPPER

========================================================= */



.admin-wrapper {

    width:

        min(

            1150px,

            92%

        );



    margin: 50px auto;

}



.admin-top {

    display: flex;



    justify-content: space-between;

    align-items: center;



    gap: 20px;



    margin-bottom: 40px;

}



.admin-top p {

    color: #938cff;



    font-size: 13px;

    font-weight: bold;



    letter-spacing: 1.5px;



    margin-bottom: 8px;

}



.admin-top h1 {

    font-size:

        clamp(

            30px,

            5vw,

            42px

        );

}





/* =========================================================

   28. ADMIN DASHBOARD

========================================================= */



.dashboard-grid {

    display: grid;



    grid-template-columns:

        repeat(

            auto-fit,

            minmax(

                220px,

                1fr

            )

        );



    gap: 20px;

}



.dashboard-card {

    padding: 30px;



    background:

        rgba(

            255,

            255,

            255,

            0.06

        );



    border:

        1px solid

        rgba(

            255,

            255,

            255,

            0.10

        );



    border-radius: 16px;



    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);



    transition:

        transform 0.3s ease,

        border-color 0.3s ease,

        box-shadow 0.3s ease;

}



.dashboard-card:hover {

    transform: translateY(-5px);



    border-color:

        rgba(

            108,

            99,

            255,

            0.50

        );



    box-shadow:

        0 15px 40px

        rgba(

            0,

            0,

            0,

            0.18

        );

}



.dashboard-card p {

    color: #9ba7ba;

}



.dashboard-card h2 {

    font-size: 40px;



    margin-top: 10px;



    color: #ffffff;

}



.admin-menu {

    margin-top: 35px;



    display: flex;

    flex-wrap: wrap;



    gap: 15px;

}





/* =========================================================

   29. TABLE WRAPPER

========================================================= */



.table-wrapper {

    width: 100%;



    overflow-x: auto;



    border-radius: 15px;



    border:

        1px solid

        rgba(

            255,

            255,

            255,

            0.08

        );

}





/* =========================================================

   30. REGISTRATION TABLE

========================================================= */



.registration-table {

    width: 100%;

    min-width: 900px;



    border-collapse: collapse;



    background:

        rgba(

            255,

            255,

            255,

            0.05

        );



    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

}



.registration-table th,

.registration-table td {

    padding: 15px;



    text-align: left;



    border-bottom:

        1px solid

        rgba(

            255,

            255,

            255,

            0.08

        );

}



.registration-table th {

    background:

        rgba(

            108,

            99,

            255,

            0.18

        );



    color: #ffffff;



    font-size: 14px;

}



.registration-table td {

    color: #c3cada;



    font-size: 14px;

}



.registration-table tbody tr {

    transition:

        background 0.3s ease;

}



.registration-table tbody tr:hover {

    background:

        rgba(

            255,

            255,

            255,

            0.04

        );

}





/* =========================================================

   31. STATUS BADGE

========================================================= */



.status {

    display: inline-block;



    padding: 6px 11px;



    background:

        rgba(

            50,

            220,

            150,

            0.12

        );



    border:

        1px solid

        rgba(

            50,

            220,

            150,

            0.25

        );



    color: #8fffc9;



    border-radius: 20px;



    font-size: 12px;

    font-weight: 600;

}





/* =========================================================

   32. DELETE LINK

========================================================= */



.delete-link:hover {

    color: #ffaaaa;



    border-color:

        rgba(

            255,

            80,

            80,

            0.5

        );



    background:

        rgba(

            255,

            80,

            80,

            0.10

        );

}





/* =========================================================

   33. FOOTER

========================================================= */



.footer {

    padding: 40px 7%;



    border-top:

        1px solid

        rgba(

            255,

            255,

            255,

            0.08

        );



    background:

        rgba(

            7,

            17,

            31,

            0.80

        );



    color: #929eb4;



    display: flex;

    justify-content: space-between;

    align-items: flex-start;



    gap: 30px;



    line-height: 1.6;

}



.footer h3 {

    color: #ffffff;

    margin-bottom: 8px;

}





/* =========================================================

   34. CUSTOM POPUP OVERLAY

========================================================= */



.custom-popup-overlay {

    position: fixed;



    inset: 0;



    z-index: 99999;



    display: flex;

    align-items: center;

    justify-content: center;



    padding: 20px;



    background:

        rgba(

            2,

            7,

            15,

            0.78

        );



    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);



    opacity: 0;



    visibility: hidden;



    pointer-events: none;



    transition:

        opacity 0.3s ease,

        visibility 0.3s ease;

}



.custom-popup-overlay.popup-show {

    opacity: 1;



    visibility: visible;



    pointer-events: auto;

}





/* =========================================================

   35. CUSTOM POPUP BOX

========================================================= */



.custom-popup {

    position: relative;



    width:

        min(

            440px,

            100%

        );



    padding:

        42px

        35px

        32px;



    text-align: center;



    background:

        linear-gradient(

            145deg,

            rgba(

                25,

                35,

                58,

                0.98

            ),

            rgba(

                10,

                19,

                34,

                0.99

            )

        );



    border:

        1px solid

        rgba(

            255,

            255,

            255,

            0.12

        );



    border-radius: 24px;



    box-shadow:

        0 30px 100px

        rgba(

            0,

            0,

            0,

            0.55

        );



    overflow: hidden;



    transform:

        translateY(25px)

        scale(0.92);



    opacity: 0;



    transition:

        transform

        0.35s

        cubic-bezier(

            0.16,

            1,

            0.3,

            1

        ),

        opacity

        0.3s

        ease;

}





/* Purple glow inside popup */



.custom-popup::before {

    content: "";



    position: absolute;



    width: 220px;

    height: 220px;



    top: -140px;

    left: 50%;



    transform:

        translateX(-50%);



    border-radius: 50%;



    background: #6c63ff;



    filter: blur(80px);



    opacity: 0.22;



    pointer-events: none;

}



.custom-popup-overlay.popup-show

.custom-popup {

    transform:

        translateY(0)

        scale(1);



    opacity: 1;

}





/* =========================================================

   36. POPUP CLOSE BUTTON

========================================================= */



.popup-close {

    position: absolute;



    top: 15px;

    right: 16px;



    width: 35px;

    height: 35px;



    display: flex;

    align-items: center;

    justify-content: center;



    border: none;



    border-radius: 50%;



    background:

        rgba(

            255,

            255,

            255,

            0.06

        );



    color: #8e9aaf;



    font-size: 24px;



    line-height: 1;



    cursor: pointer;



    z-index: 5;



    transition:

        color 0.25s ease,

        background 0.25s ease,

        transform 0.25s ease;

}



.popup-close:hover {

    color: #ffffff;



    background:

        rgba(

            255,

            255,

            255,

            0.12

        );



    transform: rotate(90deg);

}





/* =========================================================

   37. POPUP ICON

========================================================= */



.popup-icon {

    position: relative;

    z-index: 1;



    width: 72px;

    height: 72px;



    margin:

        0

        auto

        22px;



    display: flex;

    align-items: center;

    justify-content: center;



    border-radius: 50%;



    font-size: 32px;

    font-weight: bold;



    background:

        rgba(

            108,

            99,

            255,

            0.12

        );



    border:

        1px solid

        rgba(

            108,

            99,

            255,

            0.35

        );



    color: #9d97ff;



    box-shadow:

        0 0 35px

        rgba(

            108,

            99,

            255,

            0.18

        );

}





/* =========================================================

   38. POPUP TITLE

========================================================= */



.custom-popup h2 {

    position: relative;



    z-index: 1;



    color: #ffffff;



    font-size: 25px;



    margin-bottom: 12px;

}





/* =========================================================

   39. POPUP MESSAGE

========================================================= */



.custom-popup p {

    position: relative;



    z-index: 1;



    color: #9faabd;



    font-size: 15px;



    line-height: 1.7;



    max-width: 350px;



    margin: 0 auto;

}





/* =========================================================

   40. POPUP ACTIONS

========================================================= */



.popup-actions {

    position: relative;



    z-index: 1;



    display: flex;



    justify-content: center;

    align-items: center;



    gap: 12px;



    margin-top: 30px;

}





/* =========================================================

   41. POPUP BUTTONS

========================================================= */



.popup-btn {

    min-width: 120px;



    padding: 12px 20px;



    border: none;



    border-radius: 10px;



    font-family: inherit;



    font-size: 14px;

    font-weight: 600;



    cursor: pointer;



    transition:

        transform 0.25s ease,

        box-shadow 0.25s ease,

        background 0.25s ease;

}



.popup-cancel-btn {

    color: #d5dbe7;



    background:

        rgba(

            255,

            255,

            255,

            0.07

        );



    border:

        1px solid

        rgba(

            255,

            255,

            255,

            0.10

        );

}



.popup-cancel-btn:hover {

    background:

        rgba(

            255,

            255,

            255,

            0.12

        );



    transform: translateY(-2px);

}



.popup-confirm-btn {

    color: #ffffff;



    background:

        linear-gradient(

            135deg,

            #756dff,

            #584de0

        );



    box-shadow:

        0 8px 25px

        rgba(

            108,

            99,

            255,

            0.25

        );

}



.popup-confirm-btn:hover {

    transform: translateY(-2px);



    box-shadow:

        0 12px 30px

        rgba(

            108,

            99,

            255,

            0.38

        );

}





/* =========================================================

   42. SUCCESS POPUP

========================================================= */



.popup-success .popup-icon {

    color: #70f5ba;



    background:

        rgba(

            50,

            220,

            150,

            0.12

        );



    border-color:

        rgba(

            50,

            220,

            150,

            0.35

        );



    box-shadow:

        0 0 35px

        rgba(

            50,

            220,

            150,

            0.15

        );

}



.popup-success .popup-confirm-btn {

    background:

        linear-gradient(

            135deg,

            #22c98a,

            #159969

        );



    box-shadow:

        0 8px 25px

        rgba(

            34,

            201,

            138,

            0.20

        );

}





/* =========================================================

   43. ERROR POPUP

========================================================= */



.popup-error .popup-icon {

    color: #ff8d9b;



    background:

        rgba(

            255,

            75,

            95,

            0.12

        );



    border-color:

        rgba(

            255,

            75,

            95,

            0.35

        );



    box-shadow:

        0 0 35px

        rgba(

            255,

            75,

            95,

            0.15

        );

}



.popup-error .popup-confirm-btn {

    background:

        linear-gradient(

            135deg,

            #ff5b70,

            #d83d53

        );



    box-shadow:

        0 8px 25px

        rgba(

            255,

            75,

            95,

            0.20

        );

}





/* =========================================================

   44. WARNING POPUP

========================================================= */



.popup-warning .popup-icon {

    color: #ffd37a;



    background:

        rgba(

            255,

            185,

            75,

            0.12

        );



    border-color:

        rgba(

            255,

            185,

            75,

            0.35

        );



    box-shadow:

        0 0 35px

        rgba(

            255,

            185,

            75,

            0.15

        );

}



.popup-warning .popup-confirm-btn {

    background:

        linear-gradient(

            135deg,

            #f0ad4e,

            #d58a25

        );



    box-shadow:

        0 8px 25px

        rgba(

            240,

            173,

            78,

            0.20

        );

}





/* =========================================================

   45. DANGER POPUP

========================================================= */



.popup-danger .popup-icon {

    color: #ff8592;



    background:

        rgba(

            255,

            70,

            90,

            0.12

        );



    border-color:

        rgba(

            255,

            70,

            90,

            0.35

        );



    box-shadow:

        0 0 35px

        rgba(

            255,

            70,

            90,

            0.16

        );

}



.popup-danger .popup-confirm-btn {

    background:

        linear-gradient(

            135deg,

            #ff5268,

            #d9364e

        );



    box-shadow:

        0 8px 25px

        rgba(

            255,

            70,

            90,

            0.20

        );

}





/* =========================================================

   46. INFO POPUP

========================================================= */



.popup-info .popup-icon {

    color: #72dfff;



    background:

        rgba(

            85,

            223,

            255,

            0.10

        );



    border-color:

        rgba(

            85,

            223,

            255,

            0.30

        );



    box-shadow:

        0 0 35px

        rgba(

            85,

            223,

            255,

            0.13

        );

}



.popup-info .popup-confirm-btn {

    background:

        linear-gradient(

            135deg,

            #35bde3,

            #3578d4

        );



    box-shadow:

        0 8px 25px

        rgba(

            53,

            189,

            227,

            0.20

        );

}





/* =========================================================

   47. SCROLLBAR

========================================================= */



::-webkit-scrollbar {

    width: 10px;

}



::-webkit-scrollbar-track {

    background: #07111f;

}



::-webkit-scrollbar-thumb {

    background: #383b68;



    border-radius: 20px;

}



::-webkit-scrollbar-thumb:hover {

    background: #5650a4;

}





/* =========================================================

   48. TEXT SELECTION

========================================================= */



::selection {

    background: #6c63ff;

    color: #ffffff;

}





/* =========================================================

   49. RESPONSIVE - TABLET

========================================================= */



@media (max-width: 900px) {



    .navbar {

        flex-direction: column;



        justify-content: center;



        gap: 15px;



        padding: 18px 5%;

    }



    .nav-links {

        width: 100%;



        justify-content: center;



        gap: 14px;

    }



    .hero {

        min-height: 75vh;



        padding: 70px 20px;

    }



    .hero h1 {

        letter-spacing: -1px;

    }



    .admin-top {

        flex-direction: column;



        align-items: flex-start;

    }



    .footer {

        flex-direction: column;

    }

}





/* =========================================================

   50. RESPONSIVE - MOBILE

========================================================= */



@media (max-width: 600px) {



    .navbar {

        position: relative;



        padding: 15px 20px;

    }



    .logo {

        font-size: 23px;

    }



    .nav-links {

        gap: 10px;

    }



    .nav-links a {

        font-size: 13px;

    }



    .btn-signup,

    .btn-admin,

    .btn-outline {

        padding: 8px 12px;

    }





    /* HERO */



    .hero {

        min-height: 70vh;



        padding: 60px 18px;

    }



    .hero h1 {

        font-size: 42px;



        line-height: 1.1;

    }



    .hero p {

        font-size: 16px;

    }



    .hero-buttons {

        flex-direction: column;



        align-items: stretch;



        width: 100%;

    }



    .hero-buttons .primary-btn,

    .hero-buttons .secondary-btn {

        width: 100%;



        text-align: center;

    }





    /* GENERAL */



    .section {

        padding: 55px 0;

    }



    .container {

        width: 92%;

    }





    /* EVENTS */



    .event-grid {

        grid-template-columns: 1fr;

    }



    .event-card {

        padding: 20px;

    }





    /* FORMS */



    .form-container {

        width: 92%;



        margin: 40px auto;



        padding: 25px;

    }



    .form-container h2 {

        font-size: 26px;

    }



    .primary-btn,

    .secondary-btn {

        padding: 11px 16px;

    }





    /* PASSWORD */



    .password-toggle {

        right: 8px;



        width: 36px;

        height: 36px;



        font-size: 17px;

    }





    /* ADMIN */



    .admin-wrapper {

        width: 92%;



        margin: 35px auto;

    }



    .dashboard-grid {

        grid-template-columns: 1fr;

    }



    .admin-menu {

        flex-direction: column;

    }



    .admin-menu .primary-btn,

    .admin-menu .secondary-btn {

        text-align: center;

    }





    /* FOOTER */



    .footer {

        padding: 30px 5%;

    }





    /* POPUP */



    .custom-popup {

        padding:

            38px

            22px

            25px;



        border-radius: 20px;

    }



    .popup-icon {

        width: 64px;

        height: 64px;



        font-size: 28px;

    }



    .custom-popup h2 {

        font-size: 22px;

    }



    .custom-popup p {

        font-size: 14px;

    }



    .popup-actions {

        flex-direction: column-reverse;

    }



    .popup-btn {

        width: 100%;

    }





    /* SMALLER BACKGROUND BLOBS */



    .blob1 {

        width: 200px;

        height: 200px;

    }



    .blob2 {

        width: 250px;

        height: 250px;

    }



    .blob3 {

        width: 180px;

        height: 180px;

    }



    .blob4 {

        width: 130px;

        height: 130px;

    }

}





/* =========================================================

   51. REDUCED MOTION ACCESSIBILITY

========================================================= */



@media (prefers-reduced-motion: reduce) {



    html {

        scroll-behavior: auto;

    }



    .blob {

        animation: none;

    }



    *,

    *::before,

    *::after {

        transition-duration: 0.01ms !important;

    }

}





/* =========================================================

   52. REGISTER EVENT CONFIRMATION POPUP

========================================================= */



.register-popup-overlay {

    position: fixed;

    inset: 0;

    z-index: 100001;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background: rgba(3, 8, 20, 0.80);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

}



.register-popup-overlay.active {

    display: flex;

}



.register-popup-box {

    width: 100%;

    max-width: 430px;

    padding: 38px 30px;

    border-radius: 24px;

    border: 1px solid rgba(160, 145, 255, 0.30);

    background: linear-gradient(145deg, #202b4b, #111a30);

    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.55);

    text-align: center;

    animation: registerPopupIn 0.3s ease;

}



.register-popup-icon {

    width: 68px;

    height: 68px;

    margin: 0 auto 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(108, 99, 255, 0.18);

    border: 1px solid rgba(108, 99, 255, 0.40);

    color: #c3baff;

    font-size: 32px;

    font-weight: bold;

}



.register-popup-box h2 {

    color: #ffffff;

    font-size: 25px;

    margin-bottom: 13px;

}



.register-popup-box p {

    color: #b8c3d9;

    font-size: 15px;

    line-height: 1.7;

    margin-bottom: 28px;

}



.register-popup-actions {

    display: flex;

    gap: 12px;

    justify-content: center;

}



.register-popup-actions button {

    flex: 1;

    padding: 14px 16px;

    border-radius: 12px;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: transform 0.25s ease, filter 0.25s ease;

}



.register-popup-cancel {

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

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

    color: #ffffff;

}



.register-popup-confirm {

    background: linear-gradient(135deg, #756dff, #584de0);

    border: 1px solid transparent;

    color: #ffffff;

}



.register-popup-actions button:hover {

    transform: translateY(-2px);

    filter: brightness(1.1);

}



.register-popup-actions button:focus-visible {

    outline: 3px solid #b9b2ff;

    outline-offset: 3px;

}



@keyframes registerPopupIn {

    from {

        opacity: 0;

        transform: translateY(18px) scale(0.95);

    }



    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



@media (max-width: 480px) {

    .register-popup-box {

        padding: 30px 20px;

    }



    .register-popup-actions {

        flex-direction: column;

    }

}



@media (prefers-reduced-motion: reduce) {

    .register-popup-box {

        animation: none;

    }

}

/* =========================================================
   53. CONTACT PAGE - ORIGINAL STYLES FROM CONTACT.PHP
========================================================= */
.contact-wrap {

    width: min(1050px, 92%);

    margin: 50px auto 80px;

    min-height: 55vh;

}



.contact-heading {

    text-align: center;

    margin-bottom: 35px;

}



.contact-heading h1 {

    color: #fff;

    font-size: 36px;

    margin: 12px 0;

}



.contact-heading p {

    color: #b7c2d7;

}



.contact-panel {

    background: linear-gradient(

        145deg,

        rgba(31, 40, 70, .95),

        rgba(14, 22, 42, .96)

    );

    border: 1px solid rgba(170, 150, 255, .2);

    border-radius: 22px;

    padding: 30px;

    margin-bottom: 30px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .18);

}



.contact-panel h2 {

    color: #fff;

    margin-bottom: 20px;

}



.contact-field {

    margin-bottom: 20px;

}



.contact-field label {

    display: block;

    color: #e6e8ff;

    font-weight: 600;

    margin-bottom: 9px;

}



.contact-field input,

.contact-field textarea {

    display: block;

    width: 100%;

    padding: 14px 16px;

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

    border: 1px solid rgba(255,255,255,.15);

    border-radius: 12px;

    color: #fff;

    font: inherit;

    box-sizing: border-box;

}



.contact-field textarea {

    min-height: 150px;

    resize: vertical;

}



.contact-field input:focus,

.contact-field textarea:focus {

    outline: 2px solid #9484ff;

}



.contact-submit {

    background: linear-gradient(135deg, #8d73ff, #6552dc);

    border: 0;

    color: white;

    border-radius: 12px;

    padding: 14px 24px;

    font-weight: 700;

    cursor: pointer;

}



.contact-alert {

    padding: 15px 18px;

    border-radius: 12px;

    margin-bottom: 20px;

}



.contact-success {

    background: rgba(40, 200, 135, .12);

    color: #85e9bd;

}



.contact-error {

    background: rgba(255, 75, 95, .12);

    color: #ffb1bd;

}



.contact-message {

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 16px;

    padding: 22px;

    margin-top: 15px;

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

}



.contact-message h3 {

    color: #fff;

    margin-bottom: 8px;

}



.contact-meta {

    color: #aebbd4;

    font-size: 13px;

    margin-bottom: 15px;

}



.contact-text {

    color: #dce3f1;

    line-height: 1.8;

    overflow-wrap: anywhere;

}



.contact-reply {

    margin-top: 20px;

    padding: 18px;

    border-left: 3px solid #a18aff;

    background: rgba(150,120,255,.1);

    border-radius: 10px;

}



.contact-reply strong {

    display: block;

    color: #c4b6ff;

    margin-bottom: 8px;

}



.contact-pending {

    color: #ffd78b;

    margin-top: 14px;

}



@media (max-width: 600px) {

    .contact-panel {

        padding: 20px;

    }

}

/* =========================================================
   54. ADMIN DASHBOARD MESSAGE NOTIFICATION
========================================================= */
.message-notification { display: inline-block; padding: 5px 10px; margin-left: 8px; border-radius: 20px; background: rgba(255,85,110,.18); color: #ff9aaa; font-size: 12px; font-weight: bold; }
.pending-message-card { border: 1px solid rgba(255,170,85,.3); }
.pending-message-card h2 { color: #ffd78b; }

/* =========================================================
   55. ADMIN STUDENT MESSAGES PAGE
========================================================= */
.admin-msg-wrap { width: min(1100px,94%); margin: 45px auto 80px; min-height: 65vh; }
.admin-msg-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 30px; }
.admin-msg-header h1 { color: #fff; }
.admin-msg-back { display: inline-block; color: #d8cfff; text-decoration: none; border: 1px solid rgba(255,255,255,.2); padding: 12px 18px; border-radius: 12px; }
.admin-msg-back:hover { background: rgba(255,255,255,.07); }
.admin-msg-card { padding: 26px; border-radius: 20px; background: linear-gradient(145deg,rgba(31,40,70,.96),rgba(14,22,42,.96)); border: 1px solid rgba(170,150,255,.2); margin-bottom: 22px; }
.admin-msg-card h2 { color: #fff; margin-bottom: 12px; }
.admin-msg-info { color: #b7c2d7; font-size: 14px; line-height: 1.9; margin-bottom: 20px; }
.admin-msg-body { color: #e0e6f3; line-height: 1.8; padding: 18px; background: rgba(255,255,255,.04); border-radius: 12px; overflow-wrap: anywhere; }
.admin-msg-reply { margin-top: 20px; }
.admin-msg-reply label { color: #fff; font-weight: 600; display: block; margin-bottom: 10px; }
.admin-msg-reply textarea { display: block; width: 100%; min-height: 130px; padding: 15px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; color: #fff; font: inherit; resize: vertical; }
.admin-msg-reply textarea:focus { outline: 2px solid #9484ff; }
.admin-msg-button { background: linear-gradient(135deg,#8d73ff,#6552dc); color: #fff; padding: 13px 23px; border: 0; border-radius: 11px; margin-top: 12px; cursor: pointer; font-weight: 700; }
.admin-msg-button:hover { filter: brightness(1.1); }
.admin-msg-status { display: inline-block; padding: 7px 13px; border-radius: 30px; background: rgba(255,195,85,.12); color: #ffd78b; margin-bottom: 15px; }
.admin-msg-status.replied { background: rgba(50,220,150,.12); color: #83e6b9; }
.admin-msg-alert { padding: 16px; background: rgba(50,220,150,.1); color: #83e6b9; border-radius: 12px; margin-bottom: 20px; }
.admin-msg-old-reply { padding: 16px; border-left: 3px solid #a18aff; background: rgba(150,120,255,.1); border-radius: 10px; margin-top: 20px; color: #e0e6f3; overflow-wrap: anywhere; }
.admin-msg-old-reply p { margin-top: 10px; line-height: 1.8; }

/* =========================================================
   56. CONTACT & MESSAGES RESPONSIVE
========================================================= */
@media (max-width: 600px) {
    .admin-msg-wrap { margin: 30px auto 60px; }
    .admin-msg-card { padding: 20px; }
    .admin-msg-header h1 { font-size: 29px; }
    .admin-msg-button { width: 100%; }
}

/* Contact form consistency fixes */
.contact-wrap .contact-panel { width: 100%; }
.contact-wrap .contact-field input,
.contact-wrap .contact-field textarea { width: 100%; box-sizing: border-box; }
.contact-wrap .contact-submit { display: inline-block; font: inherit; font-weight: 700; }
@media (max-width: 600px) { .contact-wrap .contact-submit { width: 100%; } }