:root { 
            --green: #58cc02; --green-dark: #46a302;
            --blue: #1cb0f6; --blue-dark: #1899d6;
            --red: #ff4b4b; --red-dark: #ea2b2b;
            --gold: #ffc800; --gold-dark: #f4a500;
            --purple: #ce82ff; --purple-dark: #a561d6;
            --bg: #ffffff; --surface: #ffffff; --text: #3c3c3c;
            --gray-light: #e5e5e5; --gray-mid: #afafaf;
        }
        
        .fs-app-wrapper { position: fixed; inset: 0; z-index: 999999; background: var(--bg); font-family: 'Nunito', sans-serif; display: flex; flex-direction: column; overflow: hidden; font-size: 16px; color: var(--text); }
        .fs-hidden { display: none !important; }
        
        .fs-app-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: var(--surface); border-bottom: 2px solid var(--gray-light); z-index: 20; flex-shrink: 0; flex-wrap: wrap; gap: 10px;}
        .fs-app-title { font-weight: 900; font-size: 1.2rem; color: var(--text); display:flex; align-items:center; gap:8px;}
        
        .fs-badge { padding: 6px 14px; border-radius: 20px; font-weight: 800; font-size: 0.85rem; cursor: pointer; text-transform:uppercase; letter-spacing: 0.5px; transition:0.2s; box-shadow: 0 3px 0 rgba(0,0,0,0.1); white-space: nowrap;}
        .fs-badge:active { transform: translateY(3px); box-shadow: 0 0 0 transparent; }
        .fs-pro-badge { background: var(--gold); color: white; box-shadow: 0 3px 0 var(--gold-dark); }
        .fs-guest-badge { background: var(--blue); color: white; box-shadow: 0 3px 0 var(--blue-dark); }
        
        .fs-main-content { flex-grow: 1; overflow-y: auto; padding: 20px; padding-bottom: 120px; }
        
        .fs-bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; height: 85px; background: var(--surface); border-top: 2px solid var(--gray-light); display: flex; justify-content: space-around; align-items: center; z-index: 20; padding-bottom: env(safe-area-inset-bottom); }
        .fs-nav-item { display: flex; flex-direction: column; align-items: center; color: var(--gray-mid); font-weight: 800; font-size: 0.75rem; cursor: pointer; width: 20%; transition: 0.2s; padding: 10px 0;}
        .fs-nav-item:hover { color: var(--text); background: #f7f7f7; border-radius: 16px; }
        .fs-nav-item.active { color: var(--blue); background: #ddf4ff; border-radius: 16px; border: 2px solid #bce6ff;}
        .fs-nav-icon { font-size: 1.8rem; margin-bottom: 2px; }

        .fs-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; width: 100%; margin-bottom: 30px;}
        .fs-topic-card { background: var(--surface); border: none; border-radius: 20px; padding: 0; display: flex; flex-direction: column; align-items: stretch; box-shadow: 0 10px 30px rgba(0,0,0,0.06), 0 2px 10px rgba(0,0,0,0.03); cursor: pointer; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
        .fs-topic-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 15px 35px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.05); }
        .fs-topic-card:active { transform: translateY(0) scale(0.98); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
        
        .fs-card-image { width: 100%; height: 150px; object-fit: cover; background: #e2e8f0; border-bottom: 1px solid rgba(0,0,0,0.05); }
        .fs-card-content { padding: 18px; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; }
        .fs-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
        .fs-card-title { font-size: 1.15rem; font-weight: 900; color: #0f172a; line-height: 1.3; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
        .fs-card-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; background: #f1f5f9; color: #475569; margin-bottom: 10px; align-self: flex-start;}
        .fs-card-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 15px; border-top: 1px solid #f1f5f9; }

        .fs-category-title { font-size: 1.4rem; font-weight: 900; color: #0f172a; margin: 35px 0 20px 0; display:flex; justify-content: space-between; align-items:center; flex-wrap: wrap; gap: 10px; font-family: -apple-system, BlinkMacSystemFont, sans-serif;}
        .fs-del-icon, .fs-share-icon { font-size: 1.2rem; margin-left: 5px; color: var(--gray-mid); padding: 6px; z-index: 5; transition: 0.2s; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: #f8fafc;}
        .fs-del-icon:hover { color: var(--red); background: #fee2e2; transform: scale(1.1); }
        .fs-share-icon:hover { color: var(--green); background: #dcfce7; transform: scale(1.1); }

        .fs-btn { padding: 14px; border: none; border-radius: 16px; cursor: pointer; font-weight: 800; font-size: 1.05rem; text-align: center; width: 100%; box-sizing: border-box; transition: 0.1s; letter-spacing: 0.5px; }
        .fs-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 transparent !important; }
        .fs-btn-green { background: var(--green); color: white; box-shadow: 0 4px 0 var(--green-dark); }
        .fs-btn-blue { background: var(--blue); color: white; box-shadow: 0 4px 0 var(--blue-dark); }
        .fs-btn-purple { background: var(--purple); color: white; box-shadow: 0 4px 0 var(--purple-dark); }
        .fs-btn-gold { background: var(--gold); color: white; box-shadow: 0 4px 0 var(--gold-dark); }
        .fs-btn-red { background: var(--red); color: white; box-shadow: 0 4px 0 var(--red-dark); }
        .fs-btn-gray { background: var(--gray-light); color: var(--gray-mid); box-shadow: 0 4px 0 #d1d1d1; }
        .fs-btn-grp { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; }
        .fs-btn-grp .fs-btn { flex: 1 1 auto; min-width: 140px; }

        .fs-input, .fs-select, .fs-textarea { width: 100%; padding: 14px; border-radius: 16px; border: 2px solid var(--gray-light); font-size: 1rem; font-weight: 700; background: #f7f7f7; box-sizing: border-box; margin-bottom: 15px; font-family: inherit; transition: 0.2s; color:var(--text); }
        .fs-input:focus, .fs-select:focus, .fs-textarea:focus { outline: none; border-color: var(--blue); background: white; }

        .fs-practice-wrapper { position: absolute; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column; height: 100vh; animation: slideIn 0.3s ease-out; }
        .fs-modal-overlay { position: absolute; inset: 0; z-index: 200; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); display: flex; justify-content: center; align-items: flex-end; }
        .fs-modal-content { background: var(--surface); width: 100%; border-radius: 30px 30px 0 0; padding: 35px 25px; text-align: center; animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); max-height:90vh; overflow-y:auto;}
        
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
        
        .fs-toggle-bar { display: flex; background: var(--gray-light); padding: 4px; border-radius: 16px; margin-bottom: 20px;}
        .fs-toggle-btn { flex: 1; text-align: center; padding: 12px; font-weight: 800; color: var(--gray-mid); cursor: pointer; border-radius: 12px; transition: 0.2s; font-size: clamp(0.8rem, 3vw, 1rem);}
        .fs-toggle-btn.active { background: white; color: var(--blue); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        .fs-practice-top { flex-shrink: 0; padding: 15px; display: flex; flex-direction: column; gap: 15px; background: var(--surface); border-bottom: 2px solid var(--gray-light); }
        .fs-top-row { display: flex; align-items: center; gap: 15px; flex-wrap: nowrap;}
        .fs-close-practice { font-size: 1.8rem; font-weight: 900; color: var(--gray-mid); cursor: pointer; line-height: 1; transition:0.2s;}
        .fs-close-practice:hover { color: var(--text); }
        .fs-progress-track { flex-grow: 1; background: var(--gray-light); height: 16px; border-radius: 8px; overflow: hidden; }
        .fs-progress-fill { background: var(--green); height: 100%; width: 0%; transition: width 0.4s ease-out; border-radius: 8px;}
        
        .fs-practice-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; align-items: center; }
        .fs-practice-settings .fs-select { margin: 0; padding: 8px; font-size: 0.85rem; height: 42px; width: 100%; border-radius: 12px; }
        .fs-toggles-box { display: flex; justify-content: space-evenly; align-items: center; height: 42px; background: var(--gray-light); border-radius: 12px; }
        
        .fs-tabs { display: flex; background: var(--gray-light); padding: 4px; border-radius: 14px; margin-top: 5px; flex-wrap: nowrap; gap: 4px;}
        .fs-tab { flex: 1; text-align: center; padding: 10px 4px; border-radius: 10px; font-weight: 800; font-size: clamp(0.75rem, 3vw, 0.9rem); color: var(--gray-mid); cursor: pointer; transition:0.2s; white-space: nowrap; min-width: 0;}
        .fs-tab.active { background: white; color: var(--text); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        .fs-stage { flex-grow: 1; overflow-y: auto; padding: 20px 15px; display: flex; flex-direction: column; position: relative; }
        .fs-flashcard-text { font-size: clamp(1.1rem, 6vw, 1.4rem); font-weight: 800; color: var(--text); line-height: 1.4; text-align: center; margin: auto 0; word-break: break-word;}
        .fs-full-text { font-size: 1.05rem; line-height: 1.7; color: var(--text); white-space: pre-line; background: white; padding: 15px; border-radius: 20px; border: 2px solid var(--gray-light); box-shadow: 0 4px 0 var(--gray-light); word-break: break-word; margin-bottom: 20px;}

        /* IMPROVED OVERLAY FOR GRAMMAR/TRANSLATION */
        /* IMPROVED OVERLAY FOR GRAMMAR/TRANSLATION */
        .fs-flashcard-extra { 
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            bottom: 70px; /* Leave space for tool buttons */
            background: #ffffff;
            border: 3px solid #1cb0f6;
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            z-index: 100;
            overflow-y: auto;
            display: none; 
            text-align: left;
            font-size: 1.05rem;
            color: #333;
            line-height: 1.6;
            white-space: pre-line; /* Add this to make line breaks work! */
        }
        
        .fs-tool-btns { display:flex; justify-content:center; gap:20px; margin-top:20px; position: relative; z-index: 101;}
        .fs-tool-icon { font-size:1.8rem; cursor:pointer; opacity:0.6; transition:0.2s; background: white; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .fs-tool-icon:hover, .fs-tool-icon.active { opacity:1; transform:scale(1.1); box-shadow: 0 4px 10px rgba(0,0,0,0.2); background: #e0f2fe; color: #0284c7; }
        .fs-tool-icon.active { background: #1cb0f6; color: white; }

        .fs-overview-section { background: white; border-radius: 20px; border: 2px solid var(--gray-light); padding: 15px; margin-bottom:15px; box-shadow: 0 4px 0 var(--gray-light); }
        .fs-overview-title { font-weight:900; font-size: 1.1rem; color:var(--text); margin-top:0; border-bottom: 2px solid var(--gray-light); padding-bottom:10px; margin-bottom:15px; display:flex; align-items:center; gap:8px;}
        
        .fs-practice-actions { flex-shrink: 0; padding: 15px; border-top: 2px solid var(--gray-light); background: var(--surface); padding-bottom: calc(15px + env(safe-area-inset-bottom)); }
        .fs-action-row { display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 10px; width: 100%; }
        .fs-action-row .fs-btn { flex: 1; min-width: 0; padding: 12px 2px; font-size: clamp(0.7rem, 2.5vw, 0.95rem); white-space: nowrap; display: flex; justify-content: center; align-items: center; gap: 4px; }

        .clickable-word { border-bottom: 2px dotted #cbd5e1; cursor: pointer; margin: 0 1px; transition: 0.15s; }
        .clickable-word:hover { color: var(--blue); border-color: var(--blue); background: #e0f2fe; border-radius:4px; }
        .fs-blurred { filter: blur(6px); opacity: 0.4; transition: 0.3s; user-select:none;}
        
        .fs-open-chat { background: var(--blue); color: white; border-radius: 50%; width: 38px; height: 38px; min-width: 38px; display: flex; justify-content: center; align-items: center; font-size: 1.3rem; cursor: pointer; box-shadow: 0 3px 0 var(--blue-dark); transition: 0.1s; }
        .fs-open-chat:active { transform: translateY(3px); box-shadow: 0 0 0 transparent; }

        .fs-chat-window { position:fixed; bottom: 15px; left: 15px; right: 15px; width: auto; max-width: 500px; height: 60vh; background:white; border-radius:24px; box-shadow:0 10px 30px rgba(0,0,0,0.3); z-index:250; display:flex; flex-direction:column; overflow:hidden; border:2px solid var(--gray-light); transform-origin:bottom; transition:0.3s; margin: 0 auto;}
        .fs-chat-window.hidden { transform:scale(0.95) translateY(20px); opacity:0; pointer-events:none;}
        .fs-chat-header { background:var(--blue); color:white; padding:15px; font-weight:900; display:flex; justify-content:space-between; align-items:center;}
        .fs-chat-body { flex-grow:1; padding:15px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; background:#f9fafb;}
        .fs-chat-msg { padding:10px 14px; border-radius:16px; font-weight:700; font-size:0.95rem; line-height:1.4; max-width:85%; word-wrap:break-word;}
        .fs-chat-msg.user { background:var(--blue); color:white; align-self:flex-end; border-bottom-right-radius:4px;}
        .fs-chat-msg.ai { background:#e5e7eb; color:var(--text); align-self:flex-start; border-bottom-left-radius:4px;}
        .fs-chat-input-area { padding:10px; background:white; border-top:2px solid var(--gray-light); display:flex; gap:8px;}
        .fs-chat-input { flex-grow:1; padding:10px 14px; border-radius:20px; border:2px solid var(--gray-light); outline:none; font-family:inherit; font-weight:700;}
        .fs-chat-input:focus { border-color:var(--blue); }
        .fs-chat-send { background:var(--blue); color:white; border:none; border-radius:50%; width:40px; height:40px; display:flex; justify-content:center; align-items:center; cursor:pointer;}
        
        @media (min-width: 768px) {
            .fs-app-wrapper { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr; height: 100vh; overflow: hidden; }
            .fs-bottom-nav { position: relative; grid-column: 1 / 2; grid-row: 1 / 3; width: 100%; height: 100%; flex-direction: column; justify-content: flex-start; border-top: none; border-right: 2px solid var(--gray-light); padding-top: 20px; z-index: 30; }
            .fs-nav-item { width: 100%; flex-direction: row; justify-content: flex-start; padding: 15px 25px; font-size: 1.1rem; gap: 15px; }
            .fs-nav-icon { margin-bottom: 0; }
            .fs-app-header { grid-column: 2 / 3; grid-row: 1 / 2; width: 100%; }
            .fs-main-content { grid-column: 2 / 3; grid-row: 2 / 3; width: 100%; height: 100%; padding: 40px; padding-bottom: 60px; overflow-y: auto; }
            .fs-chat-window { bottom: 110px; right: 40px; }
            
            /* Desktop Split-View forces row layout */
            .fs-practice-wrapper.fs-split-view { flex-direction: row !important; }
            .fs-practice-wrapper.fs-split-view .fs-practice-side { display: flex !important; width: 40%; max-width: 450px; border-right: 2px solid var(--gray-light); flex-direction: column; background: #f9fafb; padding: 20px; overflow-y:auto; max-height:100vh; }
            .fs-practice-wrapper.fs-split-view .fs-practice-main { width: 60%; display: flex; flex-direction: column; flex-grow:1; max-height:100vh; min-width: 0; }
        }
        
        /* Mobile Popup Overlay for Side Context */
        @media (max-width: 767px) {
            .fs-practice-wrapper.fs-split-view .fs-practice-side {
                display: flex !important;
                position: fixed;
                top: 5vh; bottom: 5vh; left: 5vw; right: 5vw;
                width: 90vw !important; max-width: 90vw;
                z-index: 9999;
                border-radius: 20px;
                box-shadow: 0 10px 40px rgba(0,0,0,0.5);
                background: #f9fafb;
                border: 3px solid var(--gray-light);
                flex-direction: column;
            }
            .fs-practice-wrapper.fs-split-view .fs-practice-main { width: 100% !important; flex-grow: 1; min-width: 0; }
        }
        
        .fs-practice-side { display: none; background: #f9fafb; padding: 15px; border-bottom: 2px solid var(--gray-light); flex-shrink: 0; max-height: 40vh; overflow-y: auto; height: 100%; }
        .fs-practice-main { flex-grow:1; display:flex; flex-direction:column; min-height:0; position:relative; width: 100%; max-height: 100vh; }
        .fs-mobile-reveal-btn { display: none; }
        .fs-topic-image-preview { width:100%; border-radius:16px; object-fit:cover; margin-bottom:15px; border:2px solid var(--gray-light); box-shadow:0 4px 6px rgba(0,0,0,0.05); }
        .fs-topic-context-box { background:white; padding:15px; border-radius:16px; font-size:0.95rem; line-height:1.5; border:2px solid var(--gray-light); margin-bottom: 15px;}
        @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(234, 43, 43, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(234, 43, 43, 0); } 100% { box-shadow: 0 0 0 0 rgba(234, 43, 43, 0); } }

        /* --- READING MODE SPECIFIC STYLES --- */
        #fsModalReading .fs-stage { max-width: 900px; margin: 0 auto; width: 100%; border-left: 1px solid var(--gray-light); border-right: 1px solid var(--gray-light); }
        
        /* 
         * PDF Export Optimizations 
         * html2pdf takes a snapshot of exactly what is on screen.
         * We ensure backgrounds are white, text is high-contrast, and no unwanted scrollbars appear in the PDF.
         */
        #fsPdfContainer {
            background-color: white !important;
            color: black !important;
            font-family: 'Nunito', sans-serif !important;
        }
        
        #fsPdfContainer ul li { margin-bottom: 8px; }
        #fsPdfContainer p { margin-top: 0; }
        
        /* For the screen layout view, we want a nice shadow on the "page" */
        @media (min-width: 768px) {
            #fsModalReading { background-color: #f1f5f9; }
            #fsModalReading .fs-stage { 
                background: white; 
                box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
                margin-top: 20px; 
                margin-bottom: 20px; 
                border-radius: 8px;
                border: 1px solid #e2e8f0;
            }
        }

        /* PULSE ANIMATION for recording button */
        .fs-pulse { animation: fs-pulse-anim 1.5s infinite !important; }
        @keyframes fs-pulse-anim { 
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 75, 75, 0.7); }
            70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(255, 75, 75, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 75, 75, 0); }
        }

        /* LOADER for AI evaluation */
        .fs-loader {
            width: 48px;
            height: 48px;
            border: 5px solid var(--gray-light);
            border-bottom-color: var(--blue);
            border-radius: 50%;
            display: inline-block;
            box-sizing: border-box;
            animation: fs-rotation 1s linear infinite;
        }
        @keyframes fs-rotation {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }