/* Global Theme Variables - Matching Login & Payment Pages */
        :root {
            /* Text colors */
            --text-color-1: black;
            --text-color-2: #5c5c5c;
            --lighter-text: #666666;
            --blue-text: blue;
            --green-text: green;
            --link-color: #3b82f6;
            --orange-text: darkorange;
            --red-text: red;
            
            /* Bg colors */
            --bg-color-1: #ebebeb;
            --bg-color-2: #ffffff;
            --input-bg: #c9d5ff;
            --navlinks-bg-color: linear-gradient(135deg, #72afc7 0%, #d8d8d8 50%, #d8aeb2 100%);
            --tooltip-bg: linear-gradient(135deg, #72afc7 0%, #d8d8d8 50%, #d8aeb2 100%);
            --navpop-bg: linear-gradient(135deg, #72afc7 0%, #d8d8d8 50%, #d8aeb2 100%);

            --warning-info-bg: linear-gradient(135deg, #ffebee, #ffcdd2);
            --warning-info-text: red;
            --warning-info-border: red;

            --success-info-text: #155724;
            --success-info-bg: #d4edda;

            /* Box shadows */
            --topnavbar-shadow: 0 2px 9px rgba(0, 0, 0, 0.7);
            --bottomnavbar-shadow: 0 0px 9px rgba(0, 0, 0, 0.7);
            --cards-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;

            /* App Design and Themes colors */
            --app-theme-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            --app-theme-hover-bg: linear-gradient(135deg, rgba(65, 198, 254, 0.1), rgba(255, 107, 43, 0.1));
            --selected-tags-bg: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            --selected-tags-color: white;
            --webkit-bg: linear-gradient(135deg, #e63946, #dc2f02);
            --webkit-hover: linear-gradient(135deg, #e63946, #dc2f02);

            --blue-gradient: linear-gradient(69.2deg, rgba(77,143,251,1) 35.3%, rgba(202,51,255,1) 100.3%);
            --green-gradient: linear-gradient(75.1deg, rgba(34,126,34,1) 6%, rgba(99,226,17,1) 84.3%);
            --red-gradient: radial-gradient(circle farthest-corner at 10% 20%, rgba(214,40,40,1) 0%, rgba(255,195,0,1) 90%);
            --orange-gradient: linear-gradient(67.2deg, rgba(250,143,78,1) -0.5%, rgba(247,171,94,1) 38.3%, rgba(240,228,99,1) 98.5%);

            /* App Design */
            --navbar-color: linear-gradient(98.7deg, rgba(6,238,243,1) 10.6%, rgba(34,126,209,1) 72.2%, rgba(35,44,51,1) 122.5%, rgba(35,44,51,1) 122.5%);
            --bottombar-color: linear-gradient(135deg, #72afc7 0%, #d8d8d8 50%, #d8aeb2 100%);
            --webkit-radius: 10px;
            --pop-ups-radius: 20px;
            --inputs-radius: 25px;
            --cards-bg: lightgrey;

            /* Borders */
            --border-bottom: lightgrey;
            --tooltip-border: black;
            --tooltip-arrow: black;
            --btns-border: rgba(0, 0, 0, 0.2);
            --btns-border-hover: #F56040;
            --cancel-btns-border: rgba(0, 0, 0, 0.2);
            --cancel-btns-border-hover: red;
            --inputs-border: rgba(0, 0, 0, 0.2);
            --inputs-focus-border: #ff6b6b;
            --selected-tags-border: rgba(0, 0, 0, 0.2);
            --selected-tags-border-hover: #F56040;
            --green-border: green;

            /* Buttons */
            --button-theme-gradient: linear-gradient(to left, #8a2387, #e94057, #f27121);
            --orange-btn-bg: linear-gradient(89.9deg, rgba(255,244,26,1) 8.7%, rgba(243,131,0,1) 81.9%);
            --orange-btn-color: black;
            --green-btn-bg: linear-gradient(75.1deg, rgba(34,126,34,1) 6%, rgba(99,226,17,1) 84.3%);
            --btn-padding: ;
            --btn-border-radius: ;
            --cancel-btns-bg: linear-gradient(to right, #009fff, #ec2f4b);
            --cancel-btns-bg-hover: linear-gradient(to right, #009fff, #ec2f4b);
            --cancel-btns-color: red;
            --icon-btns-size: 36px;
            --icon-btns-border: 8px;

            /* Icons */
            --icon-size: 20px;
        }

        body.active {
            /* Text colors */
            --text-color-1: white;
            --text-color-2: white;
            --lighter-text: #CCCCCC;
            --blue-text: skyblue;
            --green-text: lime;
            --link-color: #3b82f6;
            --orange-text: orange;
            --red-text: red;
            
            /* Bg colors */
            --bg-color-1: #1E1E1E;
            --bg-color-2: #2D2D2D;
            --navlinks-bg-color: linear-gradient(135deg, #242424 0%, #4a90a0 50%, #ab6367 100%);
            --input-bg: #242424;
            --tooltip-bg: linear-gradient(135deg, #242424 0%, #4a90a0 50%, #ab6367 100%);
            --navpop-bg: linear-gradient(135deg, #242424 0%, #4a90a0 50%, #ab6367 100%);

            --warning-info-bg: linear-gradient(135deg, #2d1517, #3d1f23);
            --warning-info-text: #ef9a9a;
            --warning-info-border: red;

            --success-info-text: #155724;
            --success-info-bg: #d4edda;

            /* Box shadows */
            --topnavbar-shadow: 0 2px 9px rgba(0, 0, 0, 0.7);
            --bottomnavbar-shadow: 0 0px 9px rgba(0, 0, 0, 0.7);
            --cards-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;

            /* App Design and Themes colors */
            --app-theme-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            --app-theme-hover-bg: linear-gradient(135deg, rgba(65, 198, 254, 0.1), rgba(255, 107, 43, 0.1));
            --selected-tags-bg: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            --selected-tags-color: white;
            --webkit-bg: linear-gradient(135deg, #e63946, #dc2f02);
            --webkit-hover: linear-gradient(135deg, #e63946, #dc2f02);

            --blue-gradient: linear-gradient(69.2deg, rgba(77,143,251,1) 35.3%, rgba(202,51,255,1) 100.3%);
            --green-gradient: linear-gradient(75.1deg, rgba(34,126,34,1) 6%, rgba(99,226,17,1) 84.3%);
            --red-gradient: radial-gradient(circle farthest-corner at 10% 20%, rgba(214,40,40,1) 0%, rgba(255,195,0,1) 90%);
            --orange-gradient: linear-gradient(67.2deg, rgba(250,143,78,1) -0.5%, rgba(247,171,94,1) 38.3%, rgba(240,228,99,1) 98.5%);

            /* App Design */
            --navbar-color: linear-gradient(98.7deg, rgba(6,238,243,1) 10.6%, rgba(34,126,209,1) 72.2%, rgba(35,44,51,1) 122.5%, rgba(35,44,51,1) 122.5%);
            --bottombar-color: linear-gradient(135deg, #72afc7 0%, #d8d8d8 50%, #d8aeb2 100%);
            --webkit-radius: 10px;
            --pop-ups-radius: 20px;
            --inputs-radius: 25px;
            --cards-bg: lightgrey;

            /* Borders */
            --border-bottom: grey;
            --tooltip-border: black;
            --tooltip-arrow: black;
            --btns-border: rgba(255, 255, 255, 0.15);
            --btns-border-hover: #F56040;
            --cancel-btns-border: rgba(255, 255, 255, 0.15);
            --cancel-btns-border-hover: red;
            --inputs-border: rgba(255, 255, 255, 0.15);
            --inputs-focus-border: #ff6b6b;
            --selected-tags-border: rgba(255, 255, 255, 0.15);
            --selected-tags-border-hover: #F56040;
            --green-border: green;

            /* Buttons */
            --button-theme-gradient: linear-gradient(to left, #8a2387, #e94057, #f27121);
            --orange-btn-bg: linear-gradient(89.9deg, rgba(255,244,26,1) 8.7%, rgba(243,131,0,1) 81.9%);
            --orange-btn-color: black;
            --green-btn-bg: linear-gradient(75.1deg, rgba(34,126,34,1) 6%, rgba(99,226,17,1) 84.3%);
            --btn-padding: ;
            --btn-border-radius: ;
            --cancel-btns-bg: linear-gradient(to right, #009fff, #ec2f4b);
            --cancel-btns-bg-hover: linear-gradient(to right, #009fff, #ec2f4b);
            --cancel-btns-color: red;
            --icon-btns-size: 36px;
            --icon-btns-border: 8px;

            /* Icons */
            --icon-size: 20px;
        }

        /* Base Styles - Matching Login & Payment Pages */
        * {
            font-family: "Inter", sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            text-decoration: none;
            transition: all .2s linear;
        }

        body {
            background-color: var(--bg-color-1);
            min-height: 100vh;
        }
        
         .logo {
            display: flex;
            align-items: center;
            margin-left: 5px;
        }

        .logo img {
            height: 50px;
            width: auto;
        }

        /* Header - Matching Login & Payment Pages */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-image: var(--navbar-color);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 50px;
            box-shadow: var(--topnavbar-shadow);
        }

        .header .logo {
            font-weight: bolder;
            font-size: 1.9rem;
            margin-left: 5px;
            color: white;
        }

        .header .logo a {
            display: flex;
            align-items: center;
            height: 100%;
        }

        .header .logo .logo-img {
            height: 40px;
            width: auto;
            object-fit: contain;
            transition: transform 0.2s ease;
        }

        .header .logo .logo-img:hover {
            transform: scale(1.05);
        }

        .header .icons {
            margin-right: .4rem;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .header .icons i {
            height: 2.4rem;
            width: 2.4rem;
            line-height: 2.2rem;
            font-size: 1.5rem;
            font-weight: bold;
            background: var(--bg-color-1);
            color: var(--text-color-1);
            cursor: pointer;
            text-align: center;
            border-radius: .6rem;
            margin-right: 3px;
            border: 1px solid var(--btns-border);
        }

        .header .icons i:hover {
            color: #fff;
            background: orange;
            border: 1px solid var(--btns-border-hover);
        }