body {
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc;
        }
        /* ---------------------------------------------------- */
        /* SIDEBAR STYLES (FLEXBOX STABLE) */
        /* ---------------------------------------------------- */
        .sidebar {
            background-color: #ffffff;
            border-right: 1px solid #e2e8f0;
            transition: width 0.3s ease, min-width 0.3s ease, transform 0.3s ease;
            height: 100vh;
            z-index: 50; 
            overflow: hidden; 
            flex-shrink: 0;
        }
        /* Mobile Drawer Behavior (default) */
        @media (max-width: 1023px) {
            .sidebar {
                position: fixed;
                transform: translateX(-100%);
                box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            }
            .sidebar.open {
                 transform: translateX(0%);
            }
        }
        /* Desktop Flexbox Behavior */
        @media (min-width: 1024px) {
            .sidebar {
                position: relative !important;
                box-shadow: none;
            }
        }

        .sidebar-header {
            display: flex;
            align-items: center;
            padding: 1.5rem 1.5rem 1.5rem 1.5rem; 
            min-height: 4.5rem;
        }

        .sidebar-link {
            display: flex;
            align-items: center;
            padding: 0.75rem 1.5rem;
            color: #475569;
            font-weight: 500;
            border-left: 3px solid transparent;
            transition: all 0.2s ease-in-out;
            cursor: pointer;
            white-space: nowrap;
        }
        .sidebar-link:hover {
            color: #4f46e5;
            background-color: #eef2ff;
        }
        .sidebar-link.active {
            color: #4f46e5;
            background-color: #eef2ff;
            border-left-color: #4f46e5;
        }
        .sidebar-link.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background-color: transparent !important;
        }
        .sidebar-link i {
            width: 1.25rem;
            margin-right: 0.75rem;
        }
        .link-text {
             transition: opacity 0.1s ease, max-width 0.3s ease;
             overflow: hidden;
             max-width: 100%;
        }
        .collapsed .link-text, .collapsed #sidebar-title {
             opacity: 0;
             max-width: 0;
             visibility: hidden;
             pointer-events: none;
        }
        .collapsed .sidebar-footer #user-profile-button {
            justify-content: center;
        }
        .collapsed .sidebar-header {
            padding: 1.5rem 0.875rem;
            justify-content: center;
        }
        .collapsed .sidebar-link i {
             margin-right: 0; 
        }

        /* ---------------------------------------------------- */
        /* GENERAL STYLES */
        /* ---------------------------------------------------- */
        .card {
            background-color: white;
            border-radius: 0.75rem;
            border: 1px solid #e2e8f0;
            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05);
        }
        .btn-primary {
            background-color: #4f46e5; color: white; font-weight: 600;
            padding: 0.625rem 1.25rem; border-radius: 0.5rem; transition: background-color 0.3s;
        }
        .btn-primary:hover { background-color: #4338ca; }
        .btn-primary:disabled { background-color: #a5b4fc; cursor: not-allowed; }
        .btn-secondary {
            background-color: #e2e8f0; color: #1e293b; font-weight: 600;
            padding: 0.625rem 1.25rem; border-radius: 0.5rem; transition: background-color 0.3s;
            border: 1px solid #cbd5e1;
        }
        .btn-secondary:hover { background-color: #cbd5e1; }
        .btn-danger { background-color: #ef4444; color: white; }
        .btn-danger:hover { background-color: #dc2626; }
        .btn-secondary:disabled { background-color: #f1f5f9; color: #94a3b8; cursor: not-allowed; }

        #file-drop-zone { border: 2px dashed #cbd5e1; transition: background-color 0.2s ease-in-out; }
        #file-drop-zone.dragover { background-color: #eef2ff; border-color: #818cf8; }
        
        .correct-answer { background-color: #d1fae5; color: #065f46; font-weight: 600; }
        .incorrect-answer { background-color: #fee2e2; color: #991b1b; font-weight: 600; }
        .answer-feedback { margin-top: 0.75rem; padding: 0.75rem; border-radius: 0.5rem; border-left: 4px solid; }
        #mobile-overlay { position: fixed; inset: 0; z-index: 40; background-color: rgba(0, 0, 0, 0.6); display: none; }
        .action-menu { display: none; }
        .group:hover .action-menu-btn { opacity: 1; }
        .action-menu-btn.active + .action-menu, .action-menu:hover { display: block; }
        .loader-small {
            border: 2px solid #f3f3f3; border-top: 2px solid #4f46e5; width: 16px; height: 16px; 
            animation: spin 1s linear infinite; border-radius: 50%;
        }
        .gradient-title {
            background: linear-gradient(to right, #4f46e5, #a78bfa);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; text-fill-color: transparent;
        }
        
        /* CHAT STYLES */
        .chat-container { display: flex; flex-direction: column; height: 100%; }
        .chat-main { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; height: 100%; }
        .chat-window { flex-grow: 1; overflow-y: auto; }
        .chat-input-area { flex-shrink: 0; }
        .chat-message { display: flex; margin-bottom: 1rem; }
        .chat-message.user { justify-content: flex-end; }
        .chat-message.ai { justify-content: flex-start; }
        .chat-bubble { max-width: 80%; padding: 0.75rem 1rem; border-radius: 1rem; word-break: break-word; }
        .chat-bubble strong { font-weight: 700; }
        .chat-bubble ol, .chat-bubble ul { padding-left: 1.5rem; margin-top: 0.5rem; margin-bottom: 0.5rem; }
        .chat-message.user .chat-bubble { background-color: #4f46e5; color: white; border-bottom-right-radius: 0.25rem; }
        .chat-message.ai .chat-bubble { background-color: #f1f5f9; color: #1e293b; border-bottom-left-radius: 0.25rem; }
        /* FLASHCARD STYLES */
        .flashcard-container { perspective: 1000px; }
        .flashcard {
            width: 100%; height: 300px; position: relative;
            transform-style: preserve-3d; transition: transform 0.6s; cursor: pointer;
        }
        .flashcard.is-flipped { transform: rotateY(180deg); }
        .flashcard-face {
            position: absolute; width: 100%; height: 100%;
            backface-visibility: hidden; display: flex;
            align-items: center; justify-content: center; padding: 2rem;
            text-align: center; font-size: 1.25rem; border-radius: 0.75rem;
            border: 1px solid #e2e8f0;
        }
        .flashcard-front { background-color: white; }
        .flashcard-back { background-color: #eef2ff; transform: rotateY(180deg); }

        /* LOADING ANIMATION */
        .brain-loader-path {
            stroke: #c7d2fe;
            animation: pulse 2s ease-in-out infinite;
        }
        .brain-loader-synapse {
            fill: #a5b4fc;
            animation: flash 1.5s ease-in-out infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        @keyframes flash {
            0%, 100% { transform: scale(0.8); fill: #818cf8; }
            50% { transform: scale(1.1); fill: #c7d2fe; }
        }
        .brain-loader-synapse:nth-child(2) { animation-delay: 0.2s; }
        .brain-loader-synapse:nth-child(3) { animation-delay: 0.4s; }
        .brain-loader-synapse:nth-child(4) { animation-delay: 0.6s; }