/* ====== ROOT VARIABLES FOR THEMES ====== */  
        :root {  
            /* Theme 1: Professional Blue (Default) */  
            --theme1-primary: #2563eb;  
            --theme1-secondary: #1e40af;  
            --theme1-accent: #3b82f6;  
            --theme1-bg: #ffffff;  
            --theme1-text: #1f2937;  
            --theme1-gradient: linear-gradient(135deg, #2563eb, #1e40af);  
            --theme1-font: 'Inter', sans-serif;  
            --theme1-shadow: 0 10px 25px rgba(37, 99, 235, 0.15);  
              
            /* Theme 2: Creative Purple */  
            --theme2-primary: #8b5cf6;  
            --theme2-secondary: #7c3aed;  
            --theme2-accent: #a78bfa;  
            --theme2-bg: #fafafa;  
            --theme2-text: #374151;  
            --theme2-gradient: linear-gradient(135deg, #8b5cf6, #7c3aed);  
            --theme2-font: 'Poppins', sans-serif;  
            --theme2-shadow: 0 10px 25px rgba(139, 92, 246, 0.15);  
              
            /* Theme 3: Modern Green */  
            --theme3-primary: #10b981;  
            --theme3-secondary: #059669;  
            --theme3-accent: #34d399;  
            --theme3-bg: #f9fafb;  
            --theme3-text: #1f2937;  
            --theme3-gradient: linear-gradient(135deg, #10b981, #059669);  
            --theme3-font: 'Montserrat', sans-serif;  
            --theme3-shadow: 0 10px 25px rgba(16, 185, 129, 0.15);  
              
            /* Theme 4: Elegant Red */  
            --theme4-primary: #ef4444;  
            --theme4-secondary: #dc2626;  
            --theme4-accent: #f87171;  
            --theme4-bg: #fef2f2;  
            --theme4-text: #451a1a;  
            --theme4-gradient: linear-gradient(135deg, #ef4444, #dc2626);  
            --theme4-font: 'Roboto', sans-serif;  
            --theme4-shadow: 0 10px 25px rgba(239, 68, 68, 0.15);  
              
            /* Theme 5: Sunset Orange */  
            --theme5-primary: #f97316;  
            --theme5-secondary: #ea580c;  
            --theme5-accent: #fb923c;  
            --theme5-bg: #fff7ed;  
            --theme5-text: #431407;  
            --theme5-gradient: linear-gradient(135deg, #f97316, #ea580c);  
            --theme5-font: 'Nunito', sans-serif;  
            --theme5-shadow: 0 10px 25px rgba(249, 115, 22, 0.15);  
              
            /* Theme 6: Royal Pink */  
            --theme6-primary: #ec4899;  
            --theme6-secondary: #db2777;  
            --theme6-accent: #f472b6;  
            --theme6-bg: #fdf2f8;  
            --theme6-text: #500724;  
            --theme6-gradient: linear-gradient(135deg, #ec4899, #db2777);  
            --theme6-font: 'Open Sans', sans-serif;  
            --theme6-shadow: 0 10px 25px rgba(236, 72, 153, 0.15);  
              
            /* Theme 7: Cyber Teal */  
            --theme7-primary: #06b6d4;  
            --theme7-secondary: #0891b2;  
            --theme7-accent: #22d3ee;  
            --theme7-bg: #ecfeff;  
            --theme7-text: #164e63;  
            --theme7-gradient: linear-gradient(135deg, #06b6d4, #0891b2);  
            --theme7-font: 'Raleway', sans-serif;  
            --theme7-shadow: 0 10px 25px rgba(6, 182, 212, 0.15);  
              
            /* Font Variables */  
            --current-font: 'Inter', sans-serif;  
            --h1-size: 2.5rem;  
            --h2-size: 2rem;  
            --h3-size: 1.5rem;  
            --p-size: 1rem;  
        }  
          
        /* ====== DEFAULT THEME ====== */  
        body {  
            --primary-color: var(--theme1-primary);  
            --secondary-color: var(--theme1-secondary);  
            --accent-color: var(--theme1-accent);  
            --bg-color: var(--theme1-bg);  
            --text-color: var(--theme1-text);  
            --gradient: var(--theme1-gradient);  
            --font-family: var(--current-font);  
            --theme-shadow: var(--theme1-shadow);  
              
            font-family: var(--font-family);  
            background-color: var(--bg-color);  
            color: var(--text-color);  
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);  
        }  
          
        /* Theme Classes */  
        body.theme-2 {  
            --primary-color: var(--theme2-primary);  
            --secondary-color: var(--theme2-secondary);  
            --accent-color: var(--theme2-accent);  
            --bg-color: var(--theme2-bg);  
            --text-color: var(--theme2-text);  
            --gradient: var(--theme2-gradient);  
            --theme-shadow: var(--theme2-shadow);  
        }  
          
        body.theme-3 {  
            --primary-color: var(--theme3-primary);  
            --secondary-color: var(--theme3-secondary);  
            --accent-color: var(--theme3-accent);  
            --bg-color: var(--theme3-bg);  
            --text-color: var(--theme3-text);  
            --gradient: var(--theme3-gradient);  
            --theme-shadow: var(--theme3-shadow);  
        }  
          
        body.theme-4 {  
            --primary-color: var(--theme4-primary);  
            --secondary-color: var(--theme4-secondary);  
            --accent-color: var(--theme4-accent);  
            --bg-color: var(--theme4-bg);  
            --text-color: var(--theme4-text);  
            --gradient: var(--theme4-gradient);  
            --theme-shadow: var(--theme4-shadow);  
        }  
          
        body.theme-5 {  
            --primary-color: var(--theme5-primary);  
            --secondary-color: var(--theme5-secondary);  
            --accent-color: var(--theme5-accent);  
            --bg-color: var(--theme5-bg);  
            --text-color: var(--theme5-text);  
            --gradient: var(--theme5-gradient);  
            --theme-shadow: var(--theme5-shadow);  
        }  
          
        body.theme-6 {  
            --primary-color: var(--theme6-primary);  
            --secondary-color: var(--theme6-secondary);  
            --accent-color: var(--theme6-accent);  
            --bg-color: var(--theme6-bg);  
            --text-color: var(--theme6-text);  
            --gradient: var(--theme6-gradient);  
            --theme-shadow: var(--theme6-shadow);  
        }  
          
        body.theme-7 {  
            --primary-color: var(--theme7-primary);  
            --secondary-color: var(--theme7-secondary);  
            --accent-color: var(--theme7-accent);  
            --bg-color: var(--theme7-bg);  
            --text-color: var(--theme7-text);  
            --gradient: var(--theme7-gradient);  
            --theme-shadow: var(--theme7-shadow);  
        }  
          
        /* ====== CUSTOM CONTROLS STYLES ====== */  
        .custom-controls {  
            position: fixed;  
            top: 100px;  
            right: 20px;  
            z-index: 10000;  
            background: var(--gradient);  
            border-radius: 15px;  
            padding: 15px;  
            box-shadow: var(--theme-shadow);  
            min-width: 250px;  
            transition: all 0.3s ease;  
            backdrop-filter: blur(10px);  
            border: 2px solid rgba(255,255,255,0.2);  
        }  
          
        .controls-header {  
            display: flex;  
            justify-content: space-between;  
            align-items: center;  
            margin-bottom: 15px;  
            color: white;  
        }  
          
        .controls-header h4 {  
            margin: 0;  
            display: flex;  
            align-items: center;  
            gap: 10px;  
            font-size: 1rem;  
        }  
          
        .close-controls {  
            background: rgba(255,255,255,0.2);  
            border: none;  
            color: white;  
            width: 30px;  
            height: 30px;  
            border-radius: 50%;  
            cursor: pointer;  
            display: flex;  
            align-items: center;  
            justify-content: center;  
            transition: all 0.3s ease;  
        }  
          
        .close-controls:hover {  
            background: rgba(255,255,255,0.3);  
            transform: rotate(90deg);  
        }  
          
        .control-section {  
            margin-bottom: 20px;  
            background: rgba(255,255,255,0.1);  
            padding: 15px;  
            border-radius: 10px;  
            backdrop-filter: blur(5px);  
        }  
          
        .control-section h5 {  
            color: white;  
            margin: 0 0 10px 0;  
            font-size: 0.9rem;  
            display: flex;  
            align-items: center;  
            gap: 8px;  
        }  

         .green{
             color: #405d27;
         } 
        .theme-colors {  
            display: grid;  
            grid-template-columns: repeat(4, 1fr);  
            gap: 8px;  
            margin-top: 10px;  
        }  
          
        .theme-color {  
            width: 25px;  
            height: 25px;  
            border-radius: 50%;  
            cursor: pointer;  
            border: 2px solid transparent;  
            transition: all 0.3s ease;  
        }  
          
        .theme-color:hover {  
            transform: scale(1.2);  
        }  
          
        .theme-color.active {  
            border-color: white;  
            box-shadow: 0 0 0 3px var(--text-color);  
        }  
          
        .font-selector {  
            width: 100%;  
            padding: 8px 12px;  
            border-radius: 8px;  
            border: 2px solid rgba(255,255,255,0.3);  
            background: rgba(255,255,255,0.2);  
            color: white;  
            font-weight: 500;  
            cursor: pointer;  
            margin-top: 10px;  
        }  
          
        .font-selector option {  
            background: var(--primary-color);  
            color: white;  
        }  
          
        .font-size-controls {  
            display: flex;  
            flex-direction: column;  
            gap: 10px;  
            margin-top: 10px;  
        }  
          
        .size-control {  
            display: flex;  
            align-items: center;  
            gap: 10px;  
            color: white;  
        }  
          
        .size-control label {  
            font-size: 0.85rem;  
            min-width: 40px;  
        }  
          
        .size-slider {  
            flex: 1;  
            height: 6px;  
            -webkit-appearance: none;  
            appearance: none;  
            background: rgba(255,255,255,0.2);  
            border-radius: 3px;  
            outline: none;  
        }  
          
        .size-slider::-webkit-slider-thumb {  
            -webkit-appearance: none;  
            appearance: none;  
            width: 18px;  
            height: 18px;  
            border-radius: 50%;  
            background: white;  
            cursor: pointer;  
            border: 2px solid var(--primary-color);  
        }  
          
        .size-value {  
            min-width: 30px;  
            text-align: center;  
            font-size: 0.8rem;  
            background: rgba(255,255,255,0.2);  
            padding: 2px 6px;  
            border-radius: 4px;  
        }  
          
        .reset-btn {  
            width: 100%;  
            padding: 10px;  
            background: rgba(255,255,255,0.2);  
            border: 2px solid rgba(255,255,255,0.3);  
            color: white;  
            border-radius: 8px;  
            cursor: pointer;  
            font-weight: 600;  
            margin-top: 10px;  
            transition: all 0.3s ease;  
            display: flex;  
            align-items: center;  
            justify-content: center;  
            gap: 8px;  
        }  
          
        .reset-btn:hover {  
            background: rgba(255,255,255,0.3);  
            transform: translateY(-2px);  
        }  
          
        .controls-toggle {  
            position: fixed;  
            top: 100px;  
            right: 20px;  
            z-index: 9999;  
            background: var(--gradient);  
            border: none;  
            width: 50px;  
            height: 50px;  
            border-radius: 50%;  
            color: white;  
            cursor: pointer;  
            display: flex;  
            align-items: center;  
            justify-content: center;  
            font-size: 20px;  
            box-shadow: var(--theme-shadow);  
            transition: all 0.3s ease;  
        }  
          
        .controls-toggle:hover {  
            transform: scale(1.1) rotate(15deg);  
        }  
          
        /* ====== AI CHATBOX FIXED STYLES ====== */  
        .ai-chatbox {  
            background: var(--gradient);  
            border-radius: 20px;  
            padding: 25px;  
            margin: 40px auto;  
            max-width: 1000px;  
            color: white;  
            box-shadow: var(--theme-shadow);  
            position: relative;  
            overflow: hidden;  
            animation: fadeInUp 0.6s ease;  
        }  
          
        @keyframes fadeInUp {  
            from {  
                opacity: 0;  
                transform: translateY(30px);  
            }  
            to {  
                opacity: 1;  
                transform: translateY(0);  
            }  
        }  
          
        .chatbox-header {  
            display: flex;  
            justify-content: space-between;  
            align-items: center;  
            margin-bottom: 20px;  
            padding-bottom: 15px;  
            border-bottom: 2px solid rgba(255,255,255,0.2);  
        }  
          
        .chatbox-header h3 {  
            display: flex;  
            align-items: center;  
            gap: 10px;  
            font-size: 1.5rem;  
            margin: 0;  
            color: white;  
        }  
          
        .api-selector {  
            background: rgba(255,255,255,0.2);  
            border: 2px solid rgba(255,255,255,0.3);  
            color: white;  
            padding: 8px 15px;  
            border-radius: 10px;  
            font-weight: 500;  
            backdrop-filter: blur(10px);  
            cursor: pointer;  
            transition: all 0.3s ease;  
        }  
          
        .api-selector:hover {  
            background: rgba(255,255,255,0.3);  
            transform: translateY(-2px);  
        }  
          
        .api-selector option {  
            background: var(--primary-color);  
            color: white;  
        }  
          
        .chat-messages {  
            height: 300px;  
            overflow-y: auto;  
            padding: 15px;  
            background: rgba(255,255,255,0.1);  
            border-radius: 15px;  
            margin-bottom: 20px;  
            backdrop-filter: blur(10px);  
            display: flex;  
            flex-direction: column;  
            gap: 15px;  
        }  
          
        .message {  
            padding: 12px 18px;  
            border-radius: 15px;  
            max-width: 80%;  
            animation: messageSlide 0.3s ease;  
            color: white;  
        }  
          
        @keyframes messageSlide {  
            from {  
                opacity: 0;  
                transform: translateX(-10px);  
            }  
            to {  
                opacity: 1;  
                transform: translateX(0);  
            }  
        }  
          
        .user-message {  
            background: rgba(255,255,255,0.2);  
            align-self: flex-end;  
            border-bottom-right-radius: 5px;  
        }  
          
        .bot-message {  
            background: rgba(0,0,0,0.2);  
            align-self: flex-start;  
            border-bottom-left-radius: 5px;  
        }  
          
        .chat-input-container {  
            display: flex;  
            gap: 10px;  
        }  
          
        .chat-input {  
            flex: 1;  
            padding: 15px 20px;  
            border: none;  
            border-radius: 15px;  
            background: rgba(255,255,255,0.2);  
            color: white;  
            font-size: 16px;  
            backdrop-filter: blur(10px);  
            transition: all 0.3s ease;  
        }  
          
        .chat-input:focus {  
            outline: none;  
            background: rgba(255,255,255,0.3);  
            box-shadow: 0 0 0 3px rgba(255,255,255,0.2);  
        }  
          
        .chat-input::placeholder {  
            color: rgba(255,255,255,0.7);  
        }  
          
        .send-btn {  
            background: white;  
            color: var(--primary-color);  
            border: none;  
            width: 55px;  
            border-radius: 15px;  
            cursor: pointer;  
            font-size: 20px;  
            transition: all 0.3s ease;  
            display: flex;  
            align-items: center;  
            justify-content: center;  
        }  
          
        .send-btn:hover {  
            transform: translateY(-3px);  
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);  
        }  
          
        .typing-indicator {  
            display: none;  
            padding: 10px 15px;  
            background: rgba(0,0,0,0.2);  
            border-radius: 15px;  
            align-self: flex-start;  
            margin-bottom: 10px;  
            color: white;  
        }  
          
        .typing-indicator span {  
            height: 8px;  
            width: 8px;  
            background: white;  
            border-radius: 50%;  
            display: inline-block;  
            margin: 0 2px;  
            animation: typing 1.4s infinite;  
        }  
          
        .typing-indicator span:nth-child(2) {  
            animation-delay: 0.2s;  
        }  
          
        .typing-indicator span:nth-child(3) {  
            animation-delay: 0.4s;  
        }  
          
        @keyframes typing {  
            0%, 60%, 100% {  
                transform: translateY(0);  
            }  
            30% {  
                transform: translateY(-10px);  
            }  
        }  
          
        /* ====== LOGIN/SIGNUP MODAL ====== */  
        .auth-modal {  
            display: none;  
            position: fixed;  
            top: 0;  
            left: 0;  
            width: 100%;  
            height: 100%;  
            background: rgba(0,0,0,0.8);  
            z-index: 10001;  
            justify-content: center;  
            align-items: center;  
            backdrop-filter: blur(10px);  
        }  
          
        .auth-modal.active {  
            display: flex;  
            animation: fadeIn 0.3s ease;  
        }  
          
        @keyframes fadeIn {  
            from { opacity: 0; }  
            to { opacity: 1; }  
        }  
          
        .auth-container {  
            background: white;  
            border-radius: 20px;  
            width: 90%;  
            max-width: 400px;  
            overflow: hidden;  
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);  
            animation: slideUp 0.5s ease;  
        }  
          
        @keyframes slideUp {  
            from {  
                opacity: 0;  
                transform: translateY(50px);  
            }  
            to {  
                opacity: 1;  
                transform: translateY(0);  
            }  
        }  
          
        .auth-tabs {  
            display: flex;  
            background: var(--gradient);  
        }  
          
        .auth-tab {  
            flex: 1;  
            padding: 15px;  
            text-align: center;  
            color: white;  
            cursor: pointer;  
            font-weight: 600;  
            transition: all 0.3s ease;  
            border-bottom: 3px solid transparent;  
        }  
          
        .auth-tab.active {  
            background: rgba(255,255,255,0.2);  
            border-bottom: 3px solid white;  
        }  
          
        .auth-form {  
            padding: 30px;  
            display: none;  
        }  
          
        .auth-form.active {  
            display: block;  
        }  
          
        .auth-form h3 {  
            margin-top: 0;  
            color: var(--text-color);  
            text-align: center;  
        }  
          
        .form-group {  
            margin-bottom: 20px;  
        }  
          
        .form-group label {  
            display: block;  
            margin-bottom: 8px;  
            color: var(--text-color);  
            font-weight: 500;  
        }  
          
        .form-group input {  
            width: 100%;  
            padding: 12px 15px;  
            border: 2px solid #e5e7eb;  
            border-radius: 10px;  
            font-size: 16px;  
            transition: all 0.3s ease;  
            color: var(--text-color);  
        }  
          
        .form-group input:focus {  
            outline: none;  
            border-color: var(--primary-color);  
            box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);  
        }  
          
        .auth-btn {  
            width: 100%;  
            padding: 14px;  
            background: var(--gradient);  
            color: white;  
            border: none;  
            border-radius: 10px;  
            font-size: 16px;  
            font-weight: 600;  
            cursor: pointer;  
            transition: all 0.3s ease;  
            margin-top: 10px;  
        }  
          
        .auth-btn:hover {  
            transform: translateY(-3px);  
            box-shadow: var(--theme-shadow);  
        }  
          
        .google-auth-btn {  
            background: #4285F4;  
            color: white;  
            border: none;  
            border-radius: 10px;  
            padding: 14px;  
            font-size: 16px;  
            font-weight: 600;  
            cursor: pointer;  
            width: 100%;  
            margin-top: 10px;  
            display: flex;  
            align-items: center;  
            justify-content: center;  
            gap: 10px;  
            transition: all 0.3s ease;  
        }  
          
        .google-auth-btn:hover {  
            background: #357ae8;  
            transform: translateY(-3px);  
            box-shadow: 0 10px 20px rgba(66, 133, 244, 0.3);  
        }  
          
        .close-auth {  
            position: absolute;  
            top: 15px;  
            right: 15px;  
            background: none;  
            border: none;  
            color: white;  
            font-size: 24px;  
            cursor: pointer;  
            z-index: 2;  
        }  
          
        .auth-error {  
            color: #ef4444;  
            font-size: 14px;  
            margin-top: 10px;  
            text-align: center;  
            display: none;  
            padding: 10px;  
            border-radius: 5px;  
            background: #fef2f2;  
        }  
          
        .auth-success {  
            color: #10b981;  
            font-size: 14px;  
            margin-top: 10px;  
            text-align: center;  
            display: none;  
            padding: 10px;  
            border-radius: 5px;  
            background: #ecfdf5;  
        }  
          
        .password-reset-link {  
            text-align: center;  
            margin-top: 15px;  
        }  
          
        .password-reset-link a {  
            color: var(--primary-color);  
            text-decoration: none;  
            font-size: 14px;  
            cursor: pointer;  
        }  
          
        .password-reset-link a:hover {  
            text-decoration: underline;  
        }  
          
        /* ====== FONT APPLICATIONS ====== */  
        h1, .hero-title {  
            font-family: var(--current-font) !important;  
            font-size: var(--h1-size) !important;  
        }  
          
        h2, .section-title {  
            font-family: var(--current-font) !important;  
            font-size: var(--h2-size) !important;  
        }  
          
        h3, .category-title, .step-title, .faq-question {  
            font-family: var(--current-font) !important;  
            font-size: var(--h3-size) !important;  
        }  
          
        p, .hero-subtitle, .card-description, .step-description {  
            font-family: var(--current-font) !important;  
            font-size: var(--p-size) !important;  
        }  
          
        /* ====== RESPONSIVE FIXES ====== */  
        @media (max-width: 768px) {  
            .custom-controls {  
                top: 80px;  
                right: 10px;  
                left: 10px;  
                min-width: auto;  
                width: calc(100% - 20px);  
            }  
              
            .controls-toggle {  
                top: 80px;  
                right: 10px;  
                width: 45px;  
                height: 45px;  
                font-size: 18px;  
            }  
              
            .ai-chatbox {  
                margin: 20px 15px;  
                padding: 20px;  
            }  
              
            .chat-messages {  
                height: 250px;  
            }  
              
            .chatbox-header {  
                flex-direction: column;  
                gap: 15px;  
                align-items: flex-start;  
            }  
              
            .api-selector {  
                width: 100%;  
            }  
              
            :root {  
                --h1-size: 2rem;  
                --h2-size: 1.6rem;  
                --h3-size: 1.3rem;  
                --p-size: 0.9rem;  
            }  
        }  
          
        @media (max-width: 480px) {  
            .theme-colors {  
                grid-template-columns: repeat(3, 1fr);  
            }  
              
            .controls-toggle {  
                top: 70px;  
            }  
              
            .custom-controls {  
                top: 70px;  
            }  
              
            :root {  
                --h1-size: 1.8rem;  
                --h2-size: 1.4rem;  
                --h3-size: 1.2rem;  
                --p-size: 0.85rem;  
            }  
        }  
          
        /* ====== NEW RATING SECTION STYLES ====== */  
        .rating-section {  
            padding: 80px 20px;  
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);  
            border-radius: 20px;  
            margin: 60px auto;  
            max-width: 1200px;  
        }  
          
        .rating-container {  
            max-width: 1000px;  
            margin: 0 auto;  
        }  
          
        .average-rating {  
            text-align: center;  
            margin-bottom: 50px;  
            background: white;  
            padding: 40px;  
            border-radius: 20px;  
            box-shadow: var(--theme-shadow);  
        }  
          
        .average-rating .stars {  
            font-size: 2.5rem;  
            color: #ffc107;  
            margin-bottom: 20px;  
        }  
          
        .rating-value {  
            font-size: 3.5rem;  
            font-weight: 800;  
            color: var(--text-color);  
            margin-bottom: 10px;  
        }  
          
        .rating-count {  
            font-size: 1.1rem;  
            color: #666;  
            margin-bottom: 30px;  
        }  
          
        .rating-bars {  
            max-width: 400px;  
            margin: 30px auto;  
        }  
          
        .rating-bar {  
            display: flex;  
            align-items: center;  
            margin-bottom: 15px;  
        }  
          
        .rating-bar-label {  
            min-width: 60px;  
            font-weight: 600;  
            color: var(--text-color);  
        }  
          
        .rating-bar-bg {  
            flex: 1;  
            height: 10px;  
            background: #e5e7eb;  
            border-radius: 5px;  
            margin: 0 15px;  
            overflow: hidden;  
        }  
          
        .rating-bar-fill {  
            height: 100%;  
            background: var(--gradient);  
            border-radius: 5px;  
            width: 0;  
            transition: width 1.5s ease;  
        }  
          
        .rating-bar-percent {  
            min-width: 40px;  
            font-weight: 600;  
            color: var(--text-color);  
        }  
          
        .ratings-grid {  
            display: grid;  
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  
            gap: 30px;  
        }  
          
        .rating-card {  
            background: white;  
            padding: 30px;  
            border-radius: 15px;  
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);  
            transition: transform 0.3s ease;  
        }  
          
        .rating-card:hover {  
            transform: translateY(-10px);  
        }  
          
        .rating-stars {  
            color: #ffc107;  
            margin-bottom: 20px;  
        }  
          
        .rating-text {  
            font-size: 1rem;  
            line-height: 1.6;  
            color: #555;  
            margin-bottom: 20px;  
            font-style: italic;  
        }  
          
        .rating-author {  
            font-weight: 600;  
            color: var(--text-color);  
            display: flex;  
            align-items: center;  
            gap: 10px;  
        }  
          
        .rating-date {  
            font-size: 0.9rem;  
            color: #888;  
        }  
          
        /* ====== NAVBAR SEARCH STYLES ====== */  
        .nav-search {  
            position: relative;  
            margin-right: 15px;  
        }  
          
        .search-toggle {  
            background: none;  
            border: none;  
            color: var(--text-color);  
            font-size: 1.2rem;  
            cursor: pointer;  
            padding: 10px;  
            border-radius: 50%;  
            transition: all 0.3s ease;  
            display: flex;  
            align-items: center;  
            justify-content: center;  
        }  
          
        .search-toggle:hover {  
            background: rgba(var(--primary-color-rgb), 0.1);  
            color: var(--primary-color);  
        }  
          
        .search-container {  
            position: absolute;  
            top: 100%;  
            right: 0;  
            background: white;  
            border-radius: 10px;  
            box-shadow: 0 20px 50px rgba(0,0,0,0.2);  
            padding: 15px;  
            display: none;  
            align-items: center;  
            gap: 10px;  
            min-width: 300px;  
            z-index: 1000;  
            margin-top: 10px;  
        }  
          
        .search-container.active {  
            display: flex;  
        }  
          
        .search-input {  
            flex: 1;  
            border: 2px solid #e5e7eb;  
            border-radius: 8px;  
            padding: 12px 15px;  
            font-size: 1rem;  
            transition: all 0.3s ease;  
        }  
          
        .search-input:focus {  
            outline: none;  
            border-color: var(--primary-color);  
        }  
          
        .search-close {  
            background: none;  
            border: none;  
            color: #666;  
            cursor: pointer;  
            font-size: 1.2rem;  
            padding: 5px;  
            border-radius: 50%;  
            transition: all 0.3s ease;  
        }  
          
        .search-close:hover {  
            background: #f3f4f6;  
            color: #111;  
        }  
          
        .search-results {  
            position: absolute;  
            top: 100%;  
            left: 0;  
            right: 0;  
            background: white;  
            border-radius: 10px;  
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);  
            max-height: 400px;  
            overflow-y: auto;  
            display: none;  
            margin-top: 5px;  
            z-index: 999;  
        }  
          
        .search-results.active {  
            display: block;  
        }  
          
        .search-result-item {  
            padding: 15px;  
            border-bottom: 1px solid #e5e7eb;  
            cursor: pointer;  
            transition: all 0.3s ease;  
            text-decoration: none;  
            display: block;  
            color: var(--text-color);  
        }  
          
        .search-result-item:hover {  
            background: #f9fafb;  
        }  
          
        .search-result-title {  
            font-weight: 600;  
            color: var(--text-color);  
            margin-bottom: 5px;  
        }  
          
        .search-result-desc {  
            font-size: 0.9rem;  
            color: #666;  
        }  
          
        .no-results {  
            padding: 20px;  
            text-align: center;  
            color: #888;  
        }  
          
        @media (max-width: 768px) {  
            .nav-search {  
                order: -1;  
                flex: 1;  
                margin: 0 10px;  
            }  
              
            .search-container {  
                position: fixed;  
                top: 70px;  
                left: 10px;  
                right: 10px;  
                min-width: auto;  
            }  
              
            .search-results {  
                position: fixed;  
                top: 130px;  
                left: 10px;  
                right: 10px;  
            }  
        }  
          
        /* ====== USER DROPDOWN STYLES ====== */  
        .user-profile-dropdown {  
            position: relative;  
        }  
          
        .user-avatar {  
            width: 40px;  
            height: 40px;  
            background: var(--gradient);  
            color: white;  
            border-radius: 50%;  
            display: flex;  
            align-items: center;  
            justify-content: center;  
            font-weight: 600;  
            cursor: pointer;  
            transition: all 0.3s ease;  
            font-size: 18px;  
        }  
          
        .user-avatar:hover {  
            transform: scale(1.1);  
        }  
          
        .dropdown-menu {  
            position: absolute;  
            top: 100%;  
            right: 0;  
            background: white;  
            border-radius: 10px;  
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);  
            min-width: 250px;  
            display: none;  
            margin-top: 10px;  
            z-index: 1000;  
            padding: 10px 0;  
        }  
          
        .dropdown-menu.show {  
            display: block;  
        }  
          
        .dropdown-header {  
            padding: 20px;  
            border-bottom: 1px solid #e5e7eb;  
            text-align: center;  
        }  
          
        .dropdown-item {  
            display: flex;  
            align-items: center;  
            gap: 10px;  
            padding: 15px 20px;  
            color: var(--text-color);  
            text-decoration: none;  
            transition: all 0.3s ease;  
            border-bottom: 1px solid #f3f4f6;  
            background: none;  
            border: none;  
            width: 100%;  
            text-align: left;  
            font-size: 16px;  
            cursor: pointer;  
        }  
          
        .dropdown-item:hover {  
            background: #f9fafb;  
            color: var(--primary-color);  
        }  
          
        .dropdown-item:last-child {  
            border-bottom: none;  
        }  
          
        /* ====== WELCOME TOAST ====== */  
        .welcome-toast {  
            position: fixed;  
            top: 100px;  
            right: 20px;  
            background: var(--gradient);  
            color: white;  
            padding: 15px 20px;  
            border-radius: 10px;  
            box-shadow: var(--theme-shadow);  
            z-index: 10000;  
            display: flex;  
            align-items: center;  
            gap: 10px;  
            animation: slideInRight 0.5s ease;  
            max-width: 300px;  
        }  
          
        @keyframes slideInRight {  
            from {  
                opacity: 0;  
                transform: translateX(100px);  
            }  
            to {  
                opacity: 1;  
                transform: translateX(0);  
            }  
        }  
          
        /* ====== UPDATE EXISTING COMPONENTS ====== */  
        .btn-primary {  
            background: var(--gradient);  
            color: white;  
            border: none;  
            transition: all 0.3s ease;  
        }  
          
        .btn-primary:hover {  
            transform: translateY(-3px);  
            box-shadow: var(--theme-shadow);  
        }  
          
        .tool-card {  
            background: var(--bg-color);  
            border: 2px solid rgba(var(--primary-color-rgb), 0.1);  
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);  
        }  
          
        .tool-card:hover {  
            transform: translateY(-10px);  
            box-shadow: var(--theme-shadow);  
        }  
          
        .text-gradient {  
            background: var(--gradient);  
            -webkit-background-clip: text;  
            background-clip: text;  
            color: transparent;  
            display: inline-block;  
        }  
          
        /* Add RGB values for colors */  
        :root {  
            --theme1-primary-rgb: 37, 99, 235;  
            --theme2-primary-rgb: 139, 92, 246;  
            --theme3-primary-rgb: 16, 185, 129;  
            --theme4-primary-rgb: 239, 68, 68;  
            --theme5-primary-rgb: 249, 115, 22;  
            --theme6-primary-rgb: 236, 72, 153;  
            --theme7-primary-rgb: 6, 182, 212;  
            --primary-color-rgb: var(--theme1-primary-rgb);  
        }  
          
        body.theme-2 { --primary-color-rgb: var(--theme2-primary-rgb); }  
        body.theme-3 { --primary-color-rgb: var(--theme3-primary-rgb); }  
        body.theme-4 { --primary-color-rgb: var(--theme4-primary-rgb); }  
        body.theme-5 { --primary-color-rgb: var(--theme5-primary-rgb); }  
        body.theme-6 { --primary-color-rgb: var(--theme6-primary-rgb); }  
        body.theme-7 { --primary-color-rgb: var(--theme7-primary-rgb); }  

        /* Mobile User Info Styles */
        .mobile-user-info {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 20px;
            border-bottom: 1px solid #e5e7eb;
            margin-bottom: 10px;
        }
        
        .mobile-user-avatar {
            width: 50px;
            height: 50px;
            background: var(--gradient);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 20px;
        }
        
        .mobile-user-details h4 {
            margin: 0 0 5px 0;
            color: var(--text-color);
        }
        
        .mobile-user-details p {
            margin: 0;
            color: #666;
            font-size: 14px;
        }
        
        .mobile-nav-link.premium {
            color: #f59e0b;
        }
        
        .mobile-nav-divider {
            height: 1px;
            background: #e5e7eb;
            margin: 10px 0;
        }
        
        .mobile-nav-login, .mobile-nav-logout {
            background: none;
            border: none;
            width: 100%;
            text-align: left;
            cursor: pointer;
        }
        
        /* Desktop User State */
        .desktop-user-state {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .user-greeting {
            font-weight: 500;
            color: var(--text-color);
        }