/* === CSS Variables & Theming === */
        :root {
            --bg-grad: linear-gradient(135deg, #0f172a, #1e293b);
            --panel-bg: rgba(30, 41, 59, 0.7);
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --accent: #3b82f6;
            --accent-hover: #2563eb;
            --correct: #22c55e;
            --mistake: #ef4444;
            --active-char: #eab308;
            --key-bg: #334155;
            --key-text: #f8fafc;
            --border: rgba(255, 255, 255, 0.1);
            --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
        }

        [data-theme="light"] {
            --bg-grad: linear-gradient(135deg, #f1f5f9, #e2e8f0);
            --panel-bg: rgba(255, 255, 255, 0.8);
            --text-main: #0f172a;
            --text-muted: #64748b;
            --accent: #2563eb;
            --accent-hover: #1d4ed8;
            --key-bg: #cbd5e1;
            --key-text: #0f172a;
            --border: rgba(0, 0, 0, 0.1);
            --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
        }

        /* ========================================== */
        /* SMOOTH CLOUD LOADING ANIMATION             */
        /* ========================================== */
        .cloud-loader {
            border: 4px solid rgba(139, 92, 246, 0.1); /* Faint background ring */
            border-top: 4px solid var(--accent); /* Spinning color */
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px auto;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .loading-container {
            width: 100%;
            text-align: center;
            grid-column: 1 / -1; /* Ensures it spans the whole grid */
            padding: 40px 20px;
            color: var(--text-muted);
            font-weight: bold;
        }

        /* === Global Styles === */
        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', 'Mukta Malar', 'Latha', sans-serif; }
        body { background: var(--bg-grad); color: var(--text-main); height: 100vh; overflow: hidden; transition: background 0.3s; }
        button { cursor: pointer; border: none; border-radius: 8px; font-weight: 600; transition: all 0.2s; }
        input { font-size: 1.1rem; padding: 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--key-bg); color: var(--text-main); outline: none; }
        
        /* Glassmorphism Panels */
        .glass-panel { background: var(--panel-bg); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }

        /* === Top Navigation === */
        .top-nav { display: flex; justify-content: space-between; align-items: center; padding: 10px 30px; height: 60px; } /* Slightly increased height to accommodate new buttons */
        
        .nav-logo { font-size: 1.5rem; font-weight: bold; color: var(--accent); }
        .nav-controls { display: flex; gap: 10px; flex-wrap: wrap; }
        
        /* Updated icon-btn to fit text */
        .icon-btn { 
            background: var(--key-bg); 
            color: var(--text-main); 
            padding: 8px 16px; /* Added padding instead of fixed width/height */
            border-radius: 20px; /* Pill shape */
            display: flex; 
            align-items: center; 
            justify-content: center; 
            gap: 6px; /* Space between icon and text */
            font-size: 0.95rem; 
        }
        .icon-btn:hover { background: var(--accent); color: white; }
            

        /* === Screens === */
        .screen { display: none; padding: 10px 10px; width: 100%; max-width: 100%; margin: 0 auto; flex-direction: column; align-items: center; justify-content: flex-start; height: calc(100vh - 50px); overflow-y: auto; }
        .screen.active { display: flex; }
        
        #screen3 { max-width: 100%; justify-content: center; overflow-y: hidden; }

        /* Screen 1: Name Popup */
        #screen1 { justify-content: center; }
        #screen1 .glass-panel { padding: 40px; text-align: center; width: 100%; max-width: 400px; }
        #screen1 input { width: 100%; margin: 20px 0; }
        .primary-btn { background: var(--accent); color: white; padding: 12px 24px; font-size: 1.1rem; width: 100%; }
        .primary-btn:hover { background: var(--accent-hover); }

        /* Screen 2: Level Selection */
        .level-container { width: 100%; max-width: 95%; margin-top: 20px; }
        .lang-tabs { display: flex; gap: 10px; margin-bottom: 20px; justify-content: center; }
        .tab-btn { padding: 10px 20px; background: var(--key-bg); color: var(--text-main); opacity: 0.7; }
        .tab-btn.active { background: var(--accent); color: white; opacity: 1; }
        .level-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
        .level-card { padding: 20px; text-align: center; cursor: pointer; border-radius: 10px; transition: transform 0.2s; }
        .level-card:hover { transform: translateY(-5px); border-color: var(--accent); }

        /* Screen 3: Typing Engine */
        .stats-bar { display: flex; justify-content: space-around; width: 100%; padding: 5px 10px; margin-bottom: 5px; flex-wrap: wrap; gap: 10px; }
        .stat-box { text-align: center; font-size: 0.9rem; }
        .stat-val { font-size: 1.2rem; font-weight: bold; color: var(--accent); }
        
        /* Auto-scrolling Fixed Typing Area */
        .typing-area { 
            width: 100%; 
            font-size: 1.8rem; 
            line-height: 1.8; 
            padding: 10px 20px; 
            height: 310px; 
            overflow-y: hidden; 
            scroll-behavior: smooth; 
            text-align: left; 
            word-wrap: break-word; 
            user-select: none; 
            position: relative; 
            margin-bottom: 5px; 
        }
        .char { color: var(--text-muted); transition: color 0.1s; }
        .char.correct { color: var(--correct); }
        .char.incorrect { color: var(--mistake); background: rgba(239, 68, 68, 0.2); border-radius: 4px; }
        .char.active { border-bottom: 3px solid var(--active-char); color: var(--text-main); }
        
        /* Hidden input */
        #hidden-input { position: absolute; opacity: 0; pointer-events: none; }

        .controls { display: flex; gap: 10px; margin-bottom: 5px; } 
        .controls button { padding: 6px 18px; background: var(--key-bg); color: var(--text-main); font-size: 1rem; }
        .controls button#startBtn { background: var(--accent); color: white; }
        
        /* === Virtual Keyboard === */
        .keyboard { display: flex; flex-direction: column; gap: 4px; align-items: center; margin-bottom: 5px; width: 100%; padding: 0; }
        .key-row { display: flex; gap: 4px; justify-content: center; }

                
        /* Optimized Key Sizes */
        .key { width: 80px; height: 44px; background: var(--key-bg); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--border); transition: all 0.1s; box-shadow: 0 2px 4px rgba(0,0,0,0.2); position: relative; }
        
        .key .en { position: absolute; top: 2px; left: 4px; font-size: 0.95rem; color: var(--text-muted); }
        .key .shift-ta { position: absolute; top: 2px; right: 4px; font-size: 0.75rem; color: #ef4444; font-weight: bold; }
        .key .ta { font-size: 1.05rem; font-weight: bold; margin-top: 6px; } 

        .key.space { width: 350px; }
        .key.highlight-next { background: var(--active-char); color: #000; border-color: #fff; transform: scale(1.05); box-shadow: 0 0 15px rgba(234, 179, 8, 0.6); z-index: 10; }
        .key.highlight-next .en { color: rgba(0,0,0,0.6); }
        
        /* SVG Hands */
        .hands-container { display: flex; justify-content: center; gap: 40px; height: 95px; width: 100%; margin-top: 0; }
        .hand-svg { height: 100%; max-width: 200px; fill: var(--key-bg); stroke: var(--border); stroke-width: 2; transition: fill 0.2s; }
        .finger { transition: fill 0.2s; }
        .finger.highlight { fill: var(--active-char) !important; }

        /* Screen 4: Result */
        #screen4 { justify-content: center; }
        #screen4 .glass-panel { width: 100%; max-width: 600px; padding: 40px; text-align: center; }
        .result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0; text-align: left; }
        .result-item { padding: 15px; background: var(--key-bg); border-radius: 8px; }

        /* ========================================== */
        /* CHICLET KEYBOARD STAGGER ALIGNMENT (FIXED) */
        /* ========================================== */

        /* Desktop layout (84px total key width) */
        .keyboard .key-row:nth-child(1) {
            transform: translateX(0);      /* Number row stays put */
        }
        .keyboard .key-row:nth-child(2) {
            transform: translateX(126px);  /* Shifts 'Q' exactly between '1' and '2' (1.5 keys right) */
        }
        .keyboard .key-row:nth-child(3) {
            transform: translateX(63px);   /* Shifts 'A' slightly right of 'Q' (0.75 keys right) */
        }
        .keyboard .key-row:nth-child(4) {
            transform: translateX(63px);   /* Shifts 'Z' halfway under 'A' and 'S' (0.75 keys right) */
        }

        /* Mobile layout (31px total key width) */
        @media (max-width: 768px) {
            .keyboard .key-row:nth-child(2) {
                transform: translateX(46.5px);
            }
            .keyboard .key-row:nth-child(3) {
                transform: translateX(23.25px);
            }
            .keyboard .key-row:nth-child(4) {
                transform: translateX(23.25px);
            }
        }

        
        /* Responsive */
        @media (max-width: 768px) {
            #screen3 { max-width: 100%; }
            .typing-area { font-size: 1.3rem; height: 80px; padding: 10px; }
            .keyboard { gap: 3px; }
            .key-row { gap: 3px; }
            .key { width: 28px; height: 38px; border-radius: 4px; }
            .key .ta { font-size: 0.75rem; margin-top: 4px; }
            .key .en { font-size: 0.5rem; top: 2px; left: 2px; }
            .key .shift-ta { font-size: 0.5rem; top: 2px; right: 2px; }
            .key.space { width: 180px; }
            .hands-container { height: 60px; gap: 10px; }
            .stats-bar { flex-direction: row; font-size: 0.8rem; }
            .stat-val { font-size: 1rem; }
            .controls { margin-bottom: 5px; }
        }

        /* === Authentication Panel (Screen 1) === */
        .auth-panel {
            width: 100%;
            max-width: 400px;
            padding: 30px !important;
            text-align: center;
        }

        .auth-tabs {
            display: flex;
            margin-bottom: 25px;
            border-bottom: 2px solid var(--border);
        }

        .auth-tabs .tab-btn {
            flex: 1;
            padding: 12px;
            background: none;
            color: var(--text-muted);
            border-radius: 8px 8px 0 0;
            font-size: 1.1rem;
        }

        .auth-tabs .tab-btn.active {
            color: var(--accent);
            border-bottom: 3px solid var(--accent);
            margin-bottom: -2px;
        }

        .auth-form {
            display: none;
            flex-direction: column;
            gap: 15px;
        }

        .auth-form.active {
            display: flex;
        }

        .auth-form input {
            width: 100%;
        }

        .error-msg {
            color: var(--mistake);
            font-size: 0.9rem;
            min-height: 20px;
        }

        .success-msg {
            color: var(--correct);
            font-size: 0.9rem;
            min-height: 20px;
        }

        /* ========================================== */
        /* PASSWORD SHOW/HIDE BUTTON                  */
        /* ========================================== */
        .password-wrapper {
            position: relative;
            width: 100%;
        }

        .password-wrapper input {
            width: 100%;
            padding-right: 40px; /* Creates space so text doesn't overlap the icon */
        }

        .eye-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            user-select: none;
            font-size: 1.1rem;
            opacity: 0.6;
            transition: opacity 0.2s ease, transform 0.1s ease;
        }

        .eye-icon:hover {
            opacity: 1;
            transform: translateY(-50%) scale(1.1); /* Slight pop effect on hover */
        }
        /* Split Area*/
        .typing-container{
            display:flex;
            width:100%;
            gap:10px;
        }

        .typing-output {
            width: 100%;
            color: var(--text-muted);
            font-size: 1.6rem;
            line-height: 1.6;
            padding: 10px 20px;
            height: 310px;
            overflow-y: hidden;
            scroll-behavior: smooth;
            text-align: left;
            word-wrap: break-word;
            user-select: none;
            position: relative;
        }

        .typing-container.split .typing-area{
            width:50%;
        }

        .typing-container.split .typing-output{
            display:block;
        }

        /* Typing split layout */

        #typingWrapper{
            display:flex;
            gap:15px;
            width:100%;
        }

        #typingWrapper .typing-area,
        #typingWrapper .typing-output{
            flex:1;
        }

        #typedOutput{
            display:none;
            font-size:1.8rem;
            line-height:1.8;
            padding:10px 20px;
            height:310px;
            overflow-y:auto;
        }

        /* Split mode */

        .split-mode{
            display:flex;
            gap:10px;
        }

        .split-mode #typingArea{
            width:50%;
        }

        .split-mode #typedOutput{
            display:block;
            width:50%;
        }

        .typing-output .correct{
            color: var(--correct);
        }

        .typing-output .incorrect{
            color: var(--mistake);
            background: rgba(239,68,68,0.2);
            border-radius:4px;
        }

        /* animation */
        /* ========================================== */
        /* PREMIUM UI POLISH & ANIMATIONS             */
        /* ========================================== */
        
        /* 1. Custom Sleek Scrollbars */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: rgba(128, 128, 128, 0.1); border-radius: 4px; }
        ::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.4); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.8); }

        /* 2. Input & Dropdown Focus Glow */
        input:focus, select:focus, textarea:focus {
            outline: none !important;
            border-color: var(--accent) !important;
            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important;
            transition: all 0.2s ease;
        }

        /* 3. Interactive Level Cards */
        .level-card {
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            border: 1px solid var(--border);
        }
        .level-card:not(.locked):hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.15);
            border-color: var(--accent);
        }

        /* 4. Tactile Button Hover Effects */
        .primary-btn {
            transition: all 0.2s ease;
        }
        .primary-btn:not(:disabled):hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.15);
            filter: brightness(1.1);
        }
        .primary-btn:not(:disabled):active {
            transform: translateY(1px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        /* 5. Smooth Screen Transitions */
        .screen.active {
            animation: fadeAndSlideIn 0.4s ease-out forwards;
        }
        @keyframes fadeAndSlideIn {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 6. Dashboard Table Row Hovers */
        tr { transition: background-color 0.2s ease; }
        tbody tr:hover { background-color: rgba(128, 128, 128, 0.05); }

        /* ========================================== */
        /* TOP NAVIGATION MOBILE FIX                  */
        /* ========================================== */
        @media (max-width: 768px) {
            /* 1. Stack the Title and the Buttons vertically */
            .top-header { 
                flex-direction: column !important;
                text-align: center !important;
                gap: 15px !important;
                padding: 15px 10px !important;
            }

            /* 2. Allow the buttons to wrap neatly like a grid */
            .nav-buttons { 
                flex-wrap: wrap !important;
                justify-content: center !important;
                width: 100% !important;
            }

            /* 3. Resize buttons slightly for touch screens */
            .nav-buttons button, .nav-buttons span {
                font-size: 0.85rem !important;
                padding: 8px 12px !important;
                flex-grow: 1; /* Makes them stretch to fill empty space elegantly */
                text-align: center;
                margin: 0 !important;
            }
            
            /* Give the institute title a bit of breathing room */
            .top-header h2 {
                margin: 0 0 5px 0 !important;
                font-size: 1.4rem;
            }
        }
/* ========================================== */
        /* MOBILE RESPONSIVE TOP NAVIGATION           */
        /* ========================================== */
        @media (max-width: 768px) {
            /* 1. Stack everything and allow height to grow */
            .top-header { 
                flex-direction: column !important;
                align-items: center !important;       
                justify-content: center !important;   
                text-align: center !important;
                gap: 12px !important;
                padding: 15px 10px !important;
                width: 100% !important;
                box-sizing: border-box !important;
                height: auto !important; /* CRITICAL: overrides the fixed 60px height */
            }

            /* 2. Institute Title in the 1st row */
            .top-header h2 {
                font-size: 1.3rem !important; 
                margin: 0 !important;
                white-space: normal !important;
                width: 100% !important;
                text-align: center !important;
            }

            /* 3. The Navigation Buttons container in the 2nd row */
            .nav-controls {
                display: flex !important;
                flex-wrap: wrap !important;
                justify-content: center !important;   
                align-items: center !important;
                width: 100% !important;
                gap: 10px !important; 
                box-sizing: border-box !important;
            }

            /* 4. Hide the text labels on mobile to show only icons */
            .btn-text {
                display: none !important;
            }

            /* 5. Perfectly center and size the icons */
            .icon-btn {
                font-size: 1.1rem !important; 
                padding: 8px 12px !important;
                border-radius: 8px !important;
                margin: 0 !important; 
                flex-shrink: 0 !important;
            }
            
            /* 6. Email row styling (if user is logged in) */
            #loggedInUser {
                width: 100% !important;
                text-align: center !important;
                margin: 0 0 5px 0 !important;
                justify-content: center !important;
                display: flex !important; 
                font-size: 0.95rem !important;
            }

            /* 1. Force the container to wrap buttons to the next line */
            .admin-controls {
                flex-wrap: wrap !important;
                gap: 10px !important; /* Slightly tighter gap for mobile */
                width: 100% !important;
            }

            /* 2. Make the admin buttons smaller so they fit better */
            .admin-controls .primary-btn {
                font-size: 0.85rem !important; /* Smaller font size */
                padding: 8px 12px !important;  /* Reduced padding */
                flex: 1 1 auto !important;     /* Allows them to stretch slightly to fill gaps */
                white-space: normal !important; /* Allows text inside the button to wrap if extremely tight */
            }

            /* Teacher Dashboard Expiry Mobile Fix */
            .teacher-expiry-box {
                width: 100% !important;
                justify-content: center;
            }
            
            #teacherValidityDate {
                flex: 1; /* Makes the date picker stretch to fill empty space */
                min-width: 120px;
            }

            .teacher-expiry-actions {
                width: 100%;
                border-left: none !important; /* Remove the vertical line on mobile */
                border-top: 1px solid var(--border); /* Change it to a top border */
                padding-left: 0 !important;
                margin-left: 0 !important;
                padding-top: 8px !important;
                margin-top: 4px !important;
            }
        }

        /* ========================================== */
        /* BOTTOM PADDING FIX FOR SCROLLABLE SCREENS  */
        /* ========================================== */
        
        /* 1. Admin Screen & Teacher Screen main panels */
        #adminScreen > .glass-panel,
        #teacherScreen > .glass-panel {
            margin-bottom: 60px !important; 
        }

        /* 2. Student Lesson Selection container */
        #screen2 .level-container {
            margin-bottom: 60px !important;
        }

        /* ========================================== */
        /* MOBILE-FRIENDLY CUSTOM DROPDOWNS           */
        /* ========================================== */
        .custom-dropdown-list {
            position: absolute;
            top: 100%;
            
            /* NEW: Centers the box and prevents it from being wider than 280px */
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 280px; 
            
            z-index: 1000;
            background: var(--key-bg);
            border: 1px solid var(--border);
            border-radius: 6px;
            max-height: 220px;
            overflow-y: auto;
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
            display: none; 
            flex-direction: column;
            margin-top: 4px;
        }

        .custom-dropdown-list div {
            padding: 12px 15px;
            cursor: pointer;
            color: var(--text-main);
            border-bottom: 1px solid rgba(128,128,128,0.1);
            font-size: 1rem;
            transition: background 0.2s;
        }

        .custom-dropdown-list div:hover,
        .custom-dropdown-list div:active {
            background: var(--accent);
            color: white;
        }