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

            body {
				font-weight: bold;
                min-height: 100vh;
                padding: 5px;
                background: #e4e7daf5;
            }

            .container {
                max-width: 1200px;
                margin: 0 auto;
                background: #e4e7daf5;
                border-radius: 10px;
                box-shadow: 0 5% 10% rgba(0,0,0,0.1);
                overflow: hidden;
            }

            header {
                background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
                color: white;
                padding: 30px;
                text-align: center;
            }

            header h1 {
                font-size: 2.5em;
                margin-bottom: 10px;
            }

            .nav-tabs {
                display: flex;
                background: #34495e;
                padding: 0;
            }
			  
           
            
            .nav-tab {
                color: white;
                cursor: pointer;
                border: none;
                background: none;
                transition: background 0.3s;
            }

            .nav-tab:hover {
                background: #415a77;
            }

            .nav-tab.active {
                background: rgba(0,0,0,0.5);
                font-weight: bold;
            }

            .form-group {
                margin-bottom: 20px;
            }

            label {
                display: block;
                margin-bottom: 8px;
                font-weight: bold;
                color: #2c3e50;
            }

            input, select, textarea {
                width: 100%;
                padding: 12px;
                border: 2px solid #bdc3c7;
                border-radius: 8px;
                font-size: 16px;
            }

            button {
                background: #3498db;
                color: white;
                padding: 15px 30px;
                border: none;
                border-radius: 8px;
                cursor: pointer;
                font-size: 16px;
                transition: background 0.3s;
            }

            button:hover {
                background: #2980b9;
            }

            .study-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 20px;
                margin-top: 20px;
            }

            .study-card {
                background: #f8f9fa;
                border: 2px solid #e9ecef;
                border-radius: 10px;
                padding: 20px;
                transition: transform 0.3s;
            }

            .conversation-container {
                width: 100%;
                margin: 5% auto;
                overflow: hidden;
                padding: 5%;
                background-color: hwb(0 87% 11%);
                border: 1px solid #645c5c;
                border-radius: 5%;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            }

            .message {
				display: grid;
                gap: 2px;
                margin-top: 20px;
                width: fit-content;
                border-radius: 5%;
                transition: transform 0.3s;
                border: 2px solid #1316ca;
            }

            .chat-card {
                margin-right: auto;
                margin-left: 0;
                box-shadow: 0 12px 28px rgba(0,0,0,0.45), 0 3px 6px rgba(0,0,0,0.25);
                background: linear-gradient(135deg, green 0%, gold 50%);
                padding: 2%;
                text-align: left;  
                max-width: 90%;  
                overflow-wrap: break-word;
                word-break: break-word;
                max-width: 90%; 
            }

            .mychat-card {
                margin-left: auto;
                background: linear-gradient(135deg, gold 0%, green 100%);             
                margin-right: 0;
                padding: 2%;
                text-align: left;
                box-shadow: 0 12px 28px rgba(0,0,0,0.45), 0 3px 6px rgba(0,0,0,0.25);
                overflow-wrap: break-word;
                word-break: break-word;
                max-width: 90%;
                hyphens: auto;
            }

            .chat-card:hover {
                transform: translateY(-5px);
                border-color: #3498db;
            }

            .mychat-card:hover {
                transform: translateY(-5px);
                border-color: #3498db;
            }

            .study-card:hover {
                transform: translateY(-5px);
                border-color: #3498db;
            }

            .progress-bar {
                background: #ecf0f1;
                border-radius: 10px;
                height: 20px;
                margin: 10px 0;
                overflow: hidden;
            }

            .progress-fill {
                background: #2ecc71;
                height: 100%;
                transition: width 0.3s;
            }

            .reminder {
                background: #fff3cd;
                border: 1px solid #ffeaa7;
                border-radius: 8px;
                padding: 15px;
                margin: 10px 0;
            }

            .stats-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 20px;
                margin: 20px 0;
            }

           

            .message-box {
                width: 80%;
            }

            .stat-card {
                background: white;
                border-radius: 10px;
                padding: 20px;
                text-align: center;
                box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            }

            .stat-number {
                font-size: 2em;
                font-weight: bold;
                color: #3498db;
            }

            @media (max-width: 768px) {
                .nav-tabs {
                    flex-direction: column;
                }
                
                .study-grid {
                    grid-template-columns: 1fr;
                }
            }

            .chart {
                width: 100%;
                height: 50%;
                object-fit: cover;
            }
            /* MODIFIED: .profile-container */
			.loading-Net {  
				
				width: 30px;
				height: 30px;
				border-radius: 50%;
				border: 5px solid #1e06f7;
				border-top: 5px solid #f3f3f3;	
			}


			.rotate {
				animation: rotate 1s linear infinite;
			}

			@keyframes rotate {
				0% {
					transform: rotate(0deg);
				}
				50% {
					transform: rotate(180deg) scale(1.2);
				}
				100% {
					transform: rotate(360deg) scale(1);
				}
			}

            .loading {
                animation:spin 1s ease-in;
                position: relative;
				left: 50%;
                top: 50%;
                transform: translateX(-50%);
                width: 50vw;
                height: 50vw;
                border-radius: 50%;
                overflow: hidden;
                object-fit: cover;
            
            }

            @keyframes spin {
                0% {
					transform: translateX(-50%) rotateY(360deg);
				}
                25% {
					transform: translateX(-50%) rotateY(180deg);
				}
				50% {
					transform: translateX(-50%) rotate(360deg);
				}
                75% {
					transform: translateX(-50%) rotateY(180deg);
				}
				100% {
					transform: translateX(-50%) rotateY(360deg);
				}
            }

            .table-container {
                width: 100%;
				overflow-x: auto; 
				display: flex;
				flex-direction: column;
				scroll-behavior: smooth; 
            }
            th {text-align: center; background-color: #5a7d9a; color: white;padding: 12px 15px; border: 1px solid #ddd;}
            tr:nth-child(even) {background-color: #f8f9fa;}
            ul {padding-left: 20px; margin: 10px 0;}
            li {margin-bottom: 8px; line-height: 1.5;}
            table {width: 100%; border-collapse: collapse; margin: 20px 0;background-color: #fff;}
            td {padding: 12px 15px; text-align: left; border: 1px solid #ddd;}

            /* Style the menu container */
            .menu-container {
            position: fixed;
            margin: 10px;
            }
			
			
			/* --- CSS for the Water Flowing AND Fade Out Effect --- */

			/* 1. Define the combined wave motion and fade-out */
			@keyframes waveMotionAndFade {
				/* Initial state: visible, at baseline */
				0% {
					transform: translateY(0);
					opacity: 2;
				}
				
				/* Peak of the wave (first half of the animation) */
				25% { 
					transform: translateY(-10px); 
					opacity: 1;
				}
				
				/* Return to baseline (mid-animation, before fade starts) */
				50% { 
					transform: translateY(0); 
					opacity: 1.5;
				}
				
				/* Start of fade-out (e.g., last 20% of the animation duration) */
				80% { 
					transform: translateY(-5px); /* Optional: slight final dip */
					opacity: 0.5;
				}
				
				/* Final state: fully faded out, slightly moved (or at baseline) */
				100% { 
					transform: translateY(0);
					opacity: 0; 
					/* Important: The element will remain at opacity: 0 due to animation-fill-mode: forwards */
				}
			}

			/* 2. Style the individual letter element with the new animation */
			.wavy-letter {
				display: inline-block;
				font-size: 24px;
				font-weight: bold;
				color: #0077b6; /* Water-like color */
				
				animation-name: waveMotionAndFade;
				animation-duration: 4s;        /* Total time for wave AND fade-out (e.g., 4 seconds) */
				animation-iteration-count: 4; /* CRITICAL: Run only once */
				animation-timing-function: ease-in-out;
				animation-fill-mode: forwards; /* CRITICAL: Element stays in its final state (opacity: 0) */
				
				/* animation-delay is applied via inline 'style' from JS */
			}

			/* 3. Optional: Style the container */
			#quoteDisplay {
				text-align: center;
				padding: 20px;
				/* You might want to adjust its height or overflow if it contains faded elements */
			}
           


            /* Hamburger button */
            .menu-btn {
            font-size: 24px;
            position: fixed;
            cursor: pointer;
            background: none;
            border: none;
            color: #3498db;
            }

            /* Slide-in menu */
            .menu {
            position: fixed;
            top: 0;
            left: -250px; /* hidden off-screen */
            width: 250px;
            height: 100%;
            background-color: rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            padding-top: 60px;
            transition: left 0.3s ease; /* animation */
            }

            .menu a {
            padding: 15px;
            text-decoration: none;
            font-weight: bold;
            color: #3498db;
            z-index: 100;
            border-bottom: 1px solid #555;
            }

            .menu a:hover {
            background-color: #555;
            }

            /* Active state (visible) */
            .menu.active {
            left: 0;
            }

            /* Overlay background when menu is open */
            .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            }

            .overlay.active {
            display: block;
            }

            /* Desktop view: show menu normally */
            @media (min-width: 600px) {
            .menu {
                position: static;
                width: auto;
                height: auto;
                flex-direction: row;
                padding: 0;
                left: 0;
                transition: none;
            }
            .menu a {
                border: none;
            }
            .menu-btn {
                display: none;
            }
            .overlay {
                display: none !important;
            }
            }
        
			
			


    

            .login-container {
                background: white;
                border-radius: 20px;
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
                width: 100%;
                max-width: auto;
                min-height: 100vh;
                max-height: auto;
                overflow: hidden;
                display: none;
            }

            .header {
                background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
                color: white;
                padding: 30px;
                text-align: center;
            }

            .header h1 {
                font-size: 2rem;
                margin-bottom: 10px;
            }

            .header p {
                opacity: 0.9;
                font-size: 1rem;
            }

            .login-form {
                padding: 30px;
            }

            .form-group {
                margin-bottom: 20px;
            }

            .form-group label {
                display: block;
                margin-bottom: 8px;
                font-weight: 600;
                color: #2c3e50;
            }

            .form-group input {
                width: 100%;
                padding: 12px 15px;
                border: 2px solid #e1e8ed;
                border-radius: 10px;
                font-size: 1rem;
                transition: all 0.3s ease;
            }

            .form-group input:focus {
                outline: none;
                border-color: #3498db;
                box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
            }

            .login-btn {
                width: 100%;
                background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
                color: white;
                border: none;
                padding: 15px;
                border-radius: 10px;
                font-size: 1.1rem;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .login-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            }

            .login-btn:active {
                transform: translateY(0);
            }

            .divider {
                text-align: center;
                margin: 25px 0;
                position: relative;
                color: #7f8c8d;
            }

            .divider::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                height: 1px;
                background: #e1e8ed;
                z-index: 1;
            }

            .divider span {
                background: #27ae60;
                padding: 0 15px;
                position: relative;
                z-index: 2;
                color: #e74c3c;
            }    
            .error-message {
                bottom: 40%;
                background: #e74c3c;
                color: white;
                align-items: center;
                display: none;
                text-align: center;
                font-size: 0.85rem;  /* smaller text */   
                border-collapse: collapse;
                position: fixed;   
                border: none;
                padding: 15px;
                border-radius: 10px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                margin:15% auto;
                padding:15px;
                left: 5%;
                width: 90%;
                height: fit-content;
            }

            .success-message {
				left: 5%;
                bottom: 40%;
                background: skyblue;
                color: white;
                align-items: center;
                display: none;
                text-align: center;
                font-size: 0.85rem;  /* smaller text */   
                border-collapse: collapse;
                position: fixed;   
                border: none;
                padding: 15px;
                border-radius: 10px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                margin:15% auto;
                padding:15px;
                width: 90%;
                height: fit-content;
            }

            .msg {
                text-emphasis-position: 10px;
                display: none;
                position: fixed;
                z-index: 100;
                top: 0;
                left: 0;
                width: 100%;  
                height: 100%;
                background: rgba(0,0,0,0.5);
            }

            .footer {
                position: absolute;
                bottom: 0;
                text-align: center;
                margin-top: 20px;
                color: #7f8c8d;
                font-size: 0.9rem;
            }

            @media (max-width: 480px) {
                .login-container {
                    max-width: 100%;
                }
                
                .header {
                    padding: 25px 20px;
                }
                
                .login-form {
                    padding: 25px 20px;
                }
            }          
            
            .tab-content {
                background: #e4e7daf5;
                border-radius: 20px;
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
                width: 100%;
                max-width: auto;
                min-height: 100vh;
                max-height: auto;
                overflow: hidden;
                display: none;
                padding: 10px;
            }

            .tab-content.active {
                display: block;
            }

            .login-container.active {
                display: block;
            }
                label, h4 {
                display: block;
                margin-bottom: 8px;
                font-weight: bold;
                color: #2c3e50;
            }

            input, select, textarea {
                width: 100%;
                padding: 12px;
                border: 2px solid #bdc3c7;
                border-radius: 8px;
                font-size: 16px;
            }

             .send {
                
                background-color: #0077b6;
                padding: 5px;
                border-radius: 20%;
                
               
            }
            
            iframe {
			  flex: 1;
			  width: 100%;
			  border: none;
			  display: none; 
			  height: 100%; 
			}

            /* Step 2: make table behave fluidly */
            .table-container table {
            width: 100%;           /* match container width */
            border-collapse: collapse;      /* ensures columns don’t squish too much */
            }

            /* Step 3: optional — make it readable on phones */
            @media (max-width: 600px) {
            .table-container th, #table-container td {
                font-size: 0.85rem;      /* smaller padding */
            }
            }

            
			  * { box-sizing: border-box; }
			  html,body { height:100%; margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: #f5f5ea; }
			  .chat-container {
				height: 85vh;
				overflow-y: auto; 
				padding: 10px;
				display: flex;
				flex-direction: column; 
				scroll-behavior: smooth; 
			    padding-bottom: 15vh;
			  }
			  .chat-body { position: relative; min-height:0; }

			  /* Centered fixed footer card (mimics your Tailwind classes) */
			  .chat-body > .fixed-card {
				position: fixed;
				left: 50%;
				bottom: 14px;
				transform: translateX(-50%);
				z-index: 9999;
				width: min(920px, 96%);     /* responsive width */
				max-width: 920px;
				padding: 10px;
				pointer-events: auto;
			  }

			  /* The dark rounded card */
			  .chat-body .card {
				background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
				border: 1px solid #3c3c3e;
				border-radius: 28px;
				box-shadow: 0 12px 28px rgba(0,0,0,0.45), 0 3px 6px rgba(0,0,0,0.25);
				display:flex;
				align-items:flex-end;
				padding: 10px;
				gap: 10px;
			  }

			  /* Left action area */
			  .chat-body .actions-left {
				display:flex;
				align-items:center;
				gap:8px;
			  }
			  #mode-button {
				background: transparent;
				border: none;
				padding:8px;
				border-radius:999px;
				color:white;
				cursor: pointer;
				display:flex;
				align-items:center;
				justify-content:center;
			  }
			  #mode-button:active { transform: scale(.98); }

			  /* dropdown */
			  #mode-dropdown {
				position:absolute;
				bottom: calc(100% + 8px);
				left: 12px;
				width: 180px;
				background:#343436;
				color:white;
				border-radius:10px;
				padding:8px;
				box-shadow: 0 8px 20px rgba(0,0,0,0.45);
				display:none;
				font-size:14px;
			  }
			  #mode-dropdown .title { font-weight:bold; margin-bottom:6px; border-bottom:1px solid #444; padding-bottom:6px; }

			  /* Textarea area (flex-grow) */
			  .chat-body .input-wrap {
				flex:1 1 auto;
				min-height:40px;
				max-height:240px;
				display:flex;
				align-items:flex-end;
			  }
			  .textprompt {
				width:100%;
				min-height:40px;
				max-height:240px;
				resize:none;
				border:0;
				outline:0;
				padding:10px 12px;
				background:transparent;
				color:#fff;
				font-size:16px;
				line-height:20px;
			  }
			  .textprompt::placeholder { color: #7e7e7e; }

			  /* Right icons block */
			  .chat-body .actions-right {
				display:flex;
				align-items:flex-end;
				gap:8px;
			  }
			  #mode-display-compact {
				display:none; /* keep hidden on small screens per your original */
				color:#b0b0b0;
				background:transparent;
				padding:6px 8px;
				border-radius:8px;
				font-size:13px;
			  }

			  .send-button {
				background:#343436;
				border:0;
				padding:8px;
				border-radius:999px;
				color:#7e7e7e;
				cursor:pointer;
				display:flex;
				align-items:center;
				justify-content:center;
			  }
			  .send-button:disabled { opacity:0.45; cursor:not-allowed; }

			  /* Microphone / other icons style (if added) */
			  .icon-btn { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; }

			  /* Slight responsiveness */
			  @media (min-width:640px) {
				#mode-display-compact { display:inline-block; }
			  }