*{margin:0;padding:0;box-sizing:border-box}
        :root{--bg:linear-gradient(135deg,#e8eaf6 0%,#e3f2fd 50%,#fce4ec 100%);--card:#fff;--text:#333;--muted:#666;--display:#f5f7fa;--size:26px}
        body{font-family:'Poppins',sans-serif;background:var(--bg);min-height:100vh;padding:20px;color:var(--text)}
        .container{max-width:900px;margin:0 auto}

        .grade-selector-bar{display:flex;gap:0;margin-bottom:20px;background:#fff;border-radius:16px;padding:4px;box-shadow:0 2px 12px rgba(0,0,0,0.06);overflow-x:auto}
        .grade-tab{flex:1;padding:12px 20px;border:none;background:transparent;border-radius:12px;cursor:pointer;font-family:'Poppins',sans-serif;font-weight:600;font-size:0.95rem;color:var(--muted);transition:all 0.25s ease}
        .grade-tab:hover{background:#f5f5f5;color:var(--text)}
        .grade-tab.active{background:linear-gradient(135deg,#5c6bc0,#7e57c2);color:#fff;box-shadow:0 3px 12px rgba(92,107,192,0.35)}

        .header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:15px}
        .day-badge{background:linear-gradient(135deg,#5c6bc0,#7e57c2);color:#fff;padding:12px 24px;border-radius:30px;font-weight:700;font-size:1rem;display:flex;align-items:center;gap:8px}
        .day-badge::before{content:'📚'}
        .day-info{color:var(--muted);font-size:0.9rem;margin-left:10px}
        .segment-badge{background:#e1bee7;color:#7b1fa2;padding:4px 12px;border-radius:12px;font-size:0.75rem;font-weight:600;margin-left:10px}
        .nav{display:flex;gap:10px;align-items:center}
        .nav-btn{background:#fff;color:#333;border:1px solid #ddd;padding:10px 18px;border-radius:8px;cursor:pointer;font-size:0.9rem;font-weight:500;transition:all 0.2s}
        .nav-btn:hover{background:#5c6bc0;color:#fff;border-color:#5c6bc0}
        .nav-btn:disabled{opacity:0.4;cursor:not-allowed}
        .go-input{width:70px;padding:10px;border:1px solid #ddd;border-radius:8px;text-align:center;font-size:0.9rem}
        .go-btn{background:#5c6bc0;color:#fff;border:none;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:600}

        .controls{display:flex;align-items:center;gap:20px;margin-bottom:20px;flex-wrap:wrap}
        .help-btn{background:#fff;border:1px solid #ddd;padding:8px 16px;border-radius:20px;cursor:pointer;font-size:0.85rem;display:flex;align-items:center;gap:6px}
        .help-btn::before{content:'❓'}
        .size-ctrl{display:flex;align-items:center;gap:10px;font-size:0.85rem;color:var(--muted)}
        .size-ctrl input{width:100px}
        .size-val{background:#fff;padding:4px 12px;border-radius:6px;font-weight:600;border:1px solid #eee}

        .card{background:var(--card);border-radius:20px;padding:24px;margin-bottom:20px;box-shadow:0 4px 20px rgba(0,0,0,0.06)}
        .card-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
        .card-num{background:linear-gradient(135deg,#42a5f5,#5c6bc0);color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem}
        .find-label{font-size:calc(var(--size) * 0.52);color:var(--muted)}
        .find-label .tag{padding:2px 10px;border-radius:12px;font-weight:600;font-size:calc(var(--size) * 0.46);margin:0 2px}
        .find-label .err{background:#ef5350;color:#fff}
        .find-label .noun{background:#e3f2fd;color:#1565c0}
        .find-label .verb{background:#e8f5e9;color:#2e7d32}
        .find-label .adj{background:#fff3e0;color:#bf360c}
        .find-label .pro{background:#f3e5f5;color:#7b1fa2}
        .find-label .prep{background:#e0f7fa;color:#00838f}
        .find-label .adv{background:#fce4ec;color:#c2185b}

        /* UFLI Phonics Panel */
        .ufli-panel{background:linear-gradient(135deg,#e0f2f1,#b2dfdb);border:2px solid #80cbc4;border-radius:14px;padding:14px 18px;margin-bottom:14px}
        .ufli-top-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
        .ufli-lesson-badge{background:#00897b;color:#fff;padding:6px 14px;border-radius:20px;font-weight:700;font-size:calc(var(--size) * 0.52);white-space:nowrap}
        .ufli-section{color:#00695c;font-size:calc(var(--size) * 0.49);font-weight:500}
        .ufli-type-badge{padding:3px 10px;border-radius:10px;font-size:calc(var(--size) * 0.43);font-weight:700;text-transform:uppercase}
        .ufli-type-badge.intro{background:#e3f2fd;color:#1565c0}
        .ufli-type-badge.app{background:#e8f5e9;color:#2e7d32}
        .ufli-words-row{display:flex;gap:20px;flex-wrap:wrap}
        .ufli-words-section{flex:1;min-width:140px}
        .ufli-word-label{font-size:calc(var(--size) * 0.52);font-weight:700;color:#00695c;text-transform:uppercase;margin-bottom:6px;letter-spacing:0.3px}
        .ufli-word-list{display:flex;gap:5px;flex-wrap:wrap}
        .ufli-word-chip{background:#e3f2fd;color:#1565c0;padding:6px 16px;border-radius:10px;font-size:calc(var(--size) * 0.65);font-weight:600;font-family:'Crimson Pro',Georgia,serif}
        .ufli-heart-chip{background:#fce4ec;color:#c2185b;padding:6px 16px;border-radius:10px;font-size:calc(var(--size) * 0.65);font-weight:600;font-family:'Crimson Pro',Georgia,serif}
        .ufli-heart-chip::before{content:'\2665 ';font-size:calc(var(--size) * 0.55)}

        .sentence-display{font-family:'Crimson Pro',Georgia,serif;font-size:var(--size);line-height:2.8;padding:28px;background:var(--display);border-radius:16px;margin-bottom:16px;min-height:100px}
        .word{display:inline-block;position:relative;margin:0 3px;line-height:1.15}
        .word .abbr{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:0.45em;font-family:'Poppins';font-weight:700;padding:0.15em 0.55em;border-radius:0.35em;white-space:nowrap;line-height:1}
        .word .abbr.N{background:#1565c0;color:#fff}
        .word .abbr.V{background:#2e7d32;color:#fff}
        .word .abbr.ADJ{background:#ef6c00;color:#fff}
        .word .abbr.PRO{background:#7b1fa2;color:#fff}
        .word .abbr.PREP{background:#00838f;color:#fff}
        .word .abbr.ADV{background:#c2185b;color:#fff}
        .word .abbr.CONJ{background:#5d4037;color:#fff}
        .word .abbr.ART{background:#455a64;color:#fff}
        .word .abbr.DEM{background:#6d4c41;color:#fff}
        .word .abbr.SUBCONJ{background:#00695c;color:#fff}
        .word .abbr.OBJPRO{background:#4a148c;color:#fff}
        .word .abbr.POSS{background:#ff8f00;color:#fff}
        .word .abbr.PP{background:#1b5e20;color:#fff}
        .word .abbr.RELPRO{background:#d84315;color:#fff}
        .word .abbr.PASS{background:#37474f;color:#fff}
        .word .abbr.MODAL{background:#6a1b9a;color:#fff}

        /* POS tooltip on hover */
        .find-label .tag[title],.popout-task-bar .tag[title],.pos-item .word-box[title],.pos-item .type-badge[title]{position:relative;cursor:help}
        .word .abbr[title]{cursor:help}
        .find-label .tag[title]:hover::after,.popout-task-bar .tag[title]:hover::after,.word .abbr[title]:hover::after,.pos-item .type-badge[title]:hover::after{content:attr(title);position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 6px);background:#333;color:#fff;padding:6px 12px;border-radius:8px;font-size:calc(var(--size) * 0.44);font-weight:500;white-space:nowrap;z-index:100;box-shadow:0 3px 10px rgba(0,0,0,0.2);pointer-events:none;font-family:'Poppins',sans-serif;letter-spacing:0}
        .find-label .tag[title]:hover::before,.popout-task-bar .tag[title]:hover::before,.word .abbr[title]:hover::before,.pos-item .type-badge[title]:hover::before{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 2px);border:5px solid transparent;border-top-color:#333;z-index:100;pointer-events:none}
        .pos-item .word-box[title]:hover::after{content:attr(title);position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 6px);background:#333;color:#fff;padding:6px 12px;border-radius:8px;font-size:calc(var(--size) * 0.44);font-weight:500;white-space:nowrap;z-index:100;box-shadow:0 3px 10px rgba(0,0,0,0.2);pointer-events:none;font-family:'Poppins',sans-serif}
        .pos-item .word-box[title]:hover::before{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 2px);border:5px solid transparent;border-top-color:#333;z-index:100;pointer-events:none}

        .manip-highlight{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;padding:2px 8px;border-radius:6px;font-weight:600;box-shadow:0 2px 8px rgba(255,152,0,0.4)}

        .btn-row{display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
        .check-btn{background:linear-gradient(135deg,#42a5f5,#5c6bc0);color:#fff;border:none;padding:14px 28px;border-radius:30px;cursor:pointer;font-weight:700;font-size:calc(var(--size) * 0.58);transition:all 0.2s}
        .check-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(66,165,245,0.4)}
        .check-btn:disabled{opacity:0.5;transform:none;cursor:not-allowed}
        .check-btn.complete{background:linear-gradient(135deg,#66bb6a,#43a047)}
        .reset-btn{background:#fff;border:1px solid #ddd;padding:12px 20px;border-radius:20px;cursor:pointer;font-size:calc(var(--size) * 0.52);display:flex;align-items:center;gap:6px}
        .reset-btn::before{content:'🔄'}

        .section{border-radius:14px;padding:16px;margin-top:14px;animation:slideIn 0.3s ease}
        @keyframes slideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

        .corr-section{background:linear-gradient(135deg,#fff8e1,#ffecb3)}
        .corr-item{background:#fff;border-radius:10px;padding:12px 14px;margin-bottom:10px;border-left:4px solid #ffc107}
        .corr-item.capitalization{border-left-color:#00bcd4}
        .corr-item.grammar{border-left-color:#ffc107}
        .corr-item.spelling{border-left-color:#e53935}
        .corr-item.punctuation{border-left-color:#9c27b0}
        .corr-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
        .corr-type{font-size:calc(var(--size) * 0.40);padding:3px 8px;border-radius:6px;font-weight:700;color:#fff;text-transform:uppercase}
        .corr-type.capitalization{background:#00bcd4}
        .corr-type.grammar{background:#ffc107;color:#1a1a1a}
        .corr-type.punctuation{background:#9c27b0}
        .corr-type.spelling{background:#e53935}
        .corr-num{font-size:calc(var(--size) * 0.46);color:var(--muted)}
        .corr-change{font-size:calc(var(--size) * 0.62);margin-bottom:4px}
        .wrong{text-decoration:line-through;color:#e53935}
        .inline-corr{display:inline;position:relative}
        .inline-wrong{text-decoration:line-through;color:#c62828;background:#ffebee;padding:2px 4px;border-radius:3px}
        .inline-right{color:#2e7d32;font-weight:700;background:#c8e6c9;padding:3px 8px;border-radius:5px;margin-left:6px;border:2px solid #81c784}
        .inline-cap{color:#00838f;font-weight:700;background:#b2ebf2;padding:3px 8px;border-radius:5px;margin-left:6px;border:2px solid #4dd0e1}
        .inline-pulse{animation:correctPulse 0.6s ease}
        @keyframes correctPulse{0%{transform:scale(1.15);box-shadow:0 0 12px #4caf50}100%{transform:scale(1);box-shadow:none}}
        .inline-punct{color:#6a1b9a;font-weight:700;background:#e1bee7;padding:3px 8px;border-radius:5px;margin-left:4px;border:2px solid #ba68c8}
        .arrow{color:var(--muted);margin:0 8px}
        .right{color:#43a047;font-weight:700}
        .corr-explain{font-size:calc(var(--size) * 0.49);color:var(--muted);font-style:italic}

        .pos-section{background:linear-gradient(135deg,#e8f5e9,#c8e6c9)}
        .pos-title{font-size:calc(var(--size) * 0.52);font-weight:600;color:#2e7d32;margin-bottom:12px;display:flex;align-items:center;gap:8px}
        .pos-title::before{content:'🏷️'}
        .pos-item{background:#fff;border-radius:10px;padding:10px 14px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
        .pos-item .check{color:#66bb6a;margin-right:8px}
        .pos-item .q{flex:1;font-size:calc(var(--size) * 0.52)}
        .pos-item .ans{display:flex;align-items:center;gap:6px}
        .pos-item .word-box{padding:6px 14px;border-radius:8px;font-weight:600;font-size:calc(var(--size) * 0.62)}
        .pos-item .word-box.noun{background:#e3f2fd;color:#1565c0}
        .pos-item .word-box.verb{background:#e8f5e9;color:#2e7d32}
        .pos-item .word-box.adj{background:#fff3e0;color:#bf360c}
        .pos-item .word-box.pro{background:#f3e5f5;color:#7b1fa2}
        .pos-item .word-box.prep{background:#e0f7fa;color:#00838f}
        .pos-item .word-box.adv{background:#fce4ec;color:#c2185b}
        .pos-item .type-badge{font-size:calc(var(--size) * 0.46);padding:4px 10px;border-radius:6px;font-weight:700;color:#fff}
        .pos-item .type-badge.noun{background:#1565c0}
        .pos-item .type-badge.verb{background:#2e7d32}
        .pos-item .type-badge.adj{background:#ef6c00}
        .pos-item .type-badge.pro{background:#7b1fa2}
        .pos-item .type-badge.prep{background:#00838f}
        .pos-item .type-badge.adv{background:#c2185b}

        .manip-section{background:linear-gradient(135deg,#fff3e0,#ffe0b2)}
        .manip-title{font-size:calc(var(--size) * 0.52);font-weight:600;color:#e65100;margin-bottom:12px;display:flex;align-items:center;gap:8px}
        .manip-title::before{content:'✏️'}
        .manip-box{background:#fff;border-radius:10px;padding:14px}
        .manip-task{font-size:calc(var(--size) * 0.55);font-weight:600;margin-bottom:12px;color:#e65100}
        .manip-examples{display:flex;flex-direction:column;gap:8px}
        .manip-example{background:linear-gradient(135deg,#fff8e1,#ffe0b2);padding:12px 16px;border-radius:10px;font-family:'Crimson Pro',Georgia,serif;font-size:calc(var(--size) * 0.68);border-left:4px solid #ff9800}
        .manip-example .changed{background:#ff9800;color:#fff;padding:2px 8px;border-radius:4px;font-weight:600}

        .vocab-section{background:linear-gradient(135deg,#f3e5f5,#e1bee7)}
        .vocab-header{font-size:calc(var(--size) * 0.52);font-weight:600;color:#7b1fa2;margin-bottom:12px;display:flex;align-items:center;gap:8px}
        .vocab-header::before{content:'📖'}
        .vocab-word-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
        .vocab-star{font-size:calc(var(--size) * 0.80)}
        .vocab-word{font-size:calc(var(--size) * 0.86);font-weight:700;color:#6a1b9a}
        .vocab-type{background:#9c27b0;color:#fff;padding:3px 12px;border-radius:15px;font-size:calc(var(--size) * 0.43);font-weight:700}
        .vocab-row{margin-bottom:10px}
        .vocab-label{font-weight:600;color:#7b1fa2;font-size:calc(var(--size) * 0.49);display:flex;align-items:center;gap:6px}
        .vocab-text{font-size:calc(var(--size) * 0.55);margin-top:3px}
        .vocab-simple{background:#f3e5f5;padding:10px 12px;border-radius:10px;margin-bottom:10px}
        .vocab-chips{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
        .vocab-chips span{padding:4px 12px;border-radius:10px;font-size:calc(var(--size) * 0.49)}
        .vocab-chips.similar span{background:#e1bee7;color:#6a1b9a}
        .vocab-chips.antonym span{background:#ffcdd2;color:#c62828}
        .vocab-chips.nonex span{background:#ffecb3;color:#e65100;font-style:italic}
        .vocab-chips.examples span{background:#c8e6c9;color:#2e7d32}
        .vocab-example{font-style:italic;color:var(--muted);padding:10px 12px;background:#fff;border-radius:10px;border-left:4px solid #9c27b0;margin-bottom:10px;font-size:calc(var(--size) * 0.55)}
        .vocab-starter{background:#c8e6c9;padding:12px;border-radius:10px;margin-bottom:10px;border-left:4px solid #4caf50}
        .vocab-starter-label{font-weight:600;color:#2e7d32;font-size:calc(var(--size) * 0.49);display:flex;align-items:center;gap:6px;margin-bottom:6px}
        .vocab-starter-label::before{content:'🗣️'}
        .vocab-starter-text{font-size:calc(var(--size) * 0.58);color:#1b5e20;font-weight:500}
        .vocab-why{background:#e1bee7;padding:12px;border-radius:10px;display:flex;gap:10px}
        .vocab-why-icon{font-size:calc(var(--size) * 0.68)}
        .vocab-why-label{font-weight:600;color:#7b1fa2;font-size:calc(var(--size) * 0.49)}
        .vocab-why-text{font-size:calc(var(--size) * 0.52);margin-top:2px}

        .help-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}
        .help-overlay.show{display:flex}
        .help-modal{background:var(--card);border-radius:20px;padding:30px;max-width:500px;max-height:80vh;overflow-y:auto;position:relative}
        .help-close{position:absolute;top:15px;right:15px;background:#f5f5f5;border:none;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.2rem}
        .help-title{font-size:1.2rem;color:#5c6bc0;margin-bottom:16px}
        .help-section{margin-bottom:16px}
        .help-section h3{color:#42a5f5;margin-bottom:8px;font-size:0.95rem}
        .help-section p{font-size:0.85rem;line-height:1.5;margin:4px 0}

        /* Popout / Individual Lesson Overlay */
        #popout-overlay{position:fixed;inset:0;background:var(--bg);display:flex;align-items:flex-start;justify-content:center;z-index:9999;padding:0;overflow-y:auto;animation:popoutFadeIn 0.3s ease}
        @keyframes popoutFadeIn{from{opacity:0}to{opacity:1}}
        @keyframes popoutSlideUp{from{opacity:0;transform:translateY(30px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}
        .popout-container{background:var(--bg);width:100%;max-width:900px;min-height:100vh;padding:20px 20px 40px;animation:popoutSlideUp 0.4s ease}
        .popout-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #f0f0f0}
        .popout-header-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
        .popout-day-badge{background:linear-gradient(135deg,#5c6bc0,#7e57c2);color:#fff;padding:8px 18px;border-radius:20px;font-weight:700;font-size:calc(var(--size) * 0.55)}
        .popout-sentence-label{font-size:calc(var(--size) * 0.68);font-weight:600;color:var(--text)}
        .popout-close{background:#f5f5f5;border:none;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:1.3rem;display:flex;align-items:center;justify-content:center;transition:all 0.2s;color:#666;flex-shrink:0}
        .popout-close:hover{background:#ef5350;color:#fff;transform:scale(1.1)}
        .popout-task-bar{font-size:calc(var(--size) * 0.55);color:var(--muted);margin-bottom:20px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
        .popout-task-bar .tag{padding:2px 10px;border-radius:12px;font-weight:600;font-size:calc(var(--size) * 0.46);margin:0 2px}
        .popout-task-bar .err{background:#ef5350;color:#fff}
        .popout-task-bar .noun{background:#e3f2fd;color:#1565c0}
        .popout-task-bar .verb{background:#e8f5e9;color:#2e7d32}
        .popout-task-bar .adj{background:#fff3e0;color:#bf360c}
        .popout-task-bar .pro{background:#f3e5f5;color:#7b1fa2}
        .popout-task-bar .prep{background:#e0f7fa;color:#00838f}
        .popout-task-bar .adv{background:#fce4ec;color:#c2185b}
        .popout-sentence{font-family:'Crimson Pro',Georgia,serif;font-size:calc(var(--size) * 1.25);line-height:3;padding:32px;background:var(--display);border-radius:16px;margin-bottom:20px;min-height:120px}
        .popout-btn-row{display:flex;gap:14px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
        .popout-advance-btn{padding:16px 36px!important;font-size:calc(var(--size) * 0.65)!important;border-radius:30px}
        .popout-btn{background:none;border:1px solid #ddd;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all 0.2s;color:#999;margin-left:auto;flex-shrink:0}
        .popout-btn:hover{background:linear-gradient(135deg,#42a5f5,#5c6bc0);color:#fff;border-color:transparent;transform:scale(1.15);box-shadow:0 3px 12px rgba(66,165,245,0.4)}
        .print-btn{background:none;border:1px solid #ddd;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:0.95rem;display:flex;align-items:center;justify-content:center;transition:all 0.2s;color:#999;flex-shrink:0}
        .print-btn:hover{background:linear-gradient(135deg,#66bb6a,#43a047);color:#fff;border-color:transparent;transform:scale(1.15);box-shadow:0 3px 12px rgba(76,175,80,0.4)}
        .popout-header-print{background:#f5f5f5;border:none;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all 0.2s;color:#666;flex-shrink:0}
        .popout-header-print:hover{background:#66bb6a;color:#fff;transform:scale(1.1)}

        /* Mode Selector (3-way pill) */
        .mode-selector{display:flex;background:#e8eaf6;border-radius:25px;padding:3px;gap:2px}
        .mode-btn{border:none;background:transparent;padding:8px 18px;border-radius:22px;cursor:pointer;font-family:'Poppins',sans-serif;font-weight:600;font-size:0.82rem;color:var(--muted);transition:all 0.25s ease}
        .mode-btn:hover{background:rgba(255,255,255,0.5);color:var(--text)}
        .mode-btn.active{background:#fff;color:#5c6bc0;box-shadow:0 2px 8px rgba(92,107,192,0.25)}

        /* Help mode highlights */
        .help-highlight{background:rgba(255,152,0,0.3);text-decoration:underline wavy #e65100;text-decoration-thickness:2px;text-decoration-skip-ink:none;text-underline-offset:3px;padding:2px 4px;border-radius:4px;font-weight:700;cursor:help}
        .help-banner{background:linear-gradient(135deg,#fff3e0,#ffe0b2);border:2px solid #ffb74d;border-radius:12px;padding:12px 18px;margin-bottom:14px;display:flex;align-items:center;gap:10px;font-size:calc(var(--size) * 0.52);font-weight:600;color:#e65100}
        .help-banner::before{content:'\1F50D';font-size:1.3rem}
        .share-link-btn{border:none;background:#e8eaf6;color:#5c6bc0;padding:4px 10px;border-radius:14px;cursor:pointer;font-family:'Poppins',sans-serif;font-size:0.7rem;font-weight:600;transition:all 0.2s;white-space:nowrap}
        .share-link-btn:hover{background:#c5cae9;color:#3949ab}
        .share-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#43a047;color:#fff;padding:10px 24px;border-radius:24px;font-family:'Poppins',sans-serif;font-weight:600;font-size:0.9rem;box-shadow:0 4px 16px rgba(0,0,0,0.2);z-index:9999;animation:toastIn 0.3s ease,toastOut 0.3s ease 1.7s forwards}
        @keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
        @keyframes toastOut{from{opacity:1}to{opacity:0}}

        /* Dashboard */
        .dashboard{background:#fff;border-radius:14px;padding:12px 20px;margin-bottom:20px;box-shadow:0 2px 12px rgba(0,0,0,0.04);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
        .dash-progress{display:flex;align-items:center;gap:12px;flex:1;min-width:200px}
        .dash-progress-bar{flex:1;height:10px;background:#eee;border-radius:5px;overflow:hidden;max-width:250px}
        .dash-progress-fill{height:100%;background:linear-gradient(135deg,#66bb6a,#43a047);border-radius:5px;transition:width 0.5s ease}
        .dash-progress-text{font-size:0.82rem;font-weight:600;color:var(--muted);white-space:nowrap}
        .dash-stats{display:flex;align-items:center;gap:12px}
        .dash-streak{font-size:0.85rem;font-weight:700;color:#ff9800;white-space:nowrap}
        .dash-review-btn{background:#fff3e0;color:#e65100;border:1px solid #ffcc80;padding:6px 14px;border-radius:16px;cursor:pointer;font-size:0.8rem;font-weight:600;transition:all 0.2s}
        .dash-review-btn:hover{background:#ffe0b2}
        .dash-review-btn.active{background:#e65100;color:#fff;border-color:#e65100}

        /* TTS Button */
        .tts-btn{background:none;border:1px solid #ddd;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all 0.2s;color:#999;flex-shrink:0}
        .tts-btn:hover{background:linear-gradient(135deg,#42a5f5,#5c6bc0);color:#fff;border-color:transparent;transform:scale(1.15)}
        .tts-btn.speaking{background:#42a5f5;color:#fff;border-color:#42a5f5;animation:ttsPulse 1s infinite}
        @keyframes ttsPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

        /* Interactive Mode */
        .interactive-hint{background:linear-gradient(135deg,#fff8e1,#ffe0b2);border:2px solid #ff9800;border-radius:12px;padding:14px 18px;margin-bottom:14px;display:flex;align-items:center;gap:12px}
        .hint-icon{font-size:1.4rem}
        .hint-text{font-size:calc(var(--size) * 0.55);font-weight:600;color:#e65100}
        .interactive-input-row{display:flex;gap:10px;align-items:center;margin-top:10px}
        .interactive-input{flex:1;padding:10px 14px;border:2px solid #ddd;border-radius:10px;font-size:calc(var(--size) * 0.55);font-family:'Poppins',sans-serif}
        .interactive-input:focus{border-color:#5c6bc0;outline:none}
        .interactive-submit{background:linear-gradient(135deg,#42a5f5,#5c6bc0);color:#fff;border:none;padding:10px 20px;border-radius:10px;cursor:pointer;font-weight:700;font-size:calc(var(--size) * 0.52)}
        .interactive-feedback{padding:10px 14px;border-radius:10px;margin-top:8px;font-weight:600;font-size:calc(var(--size) * 0.52);animation:slideIn 0.3s ease}
        .interactive-feedback.correct{background:#c8e6c9;color:#2e7d32;border:2px solid #66bb6a}
        .interactive-feedback.incorrect{background:#ffcdd2;color:#c62828;border:2px solid #ef5350}

        /* Interactive POS - clickable words */
        .pos-clickable{cursor:pointer;padding:4px 8px;border-radius:6px;transition:all 0.2s;border:2px solid transparent}
        .pos-clickable:hover{background:#e3f2fd;border-color:#90caf9}
        .pos-clickable.correct-pick{background:#c8e6c9;border-color:#66bb6a}
        .pos-clickable.wrong-pick{background:#ffcdd2;border-color:#ef5350}

        /* Sentence Starter Input */
        .vocab-starter-input{width:100%;padding:10px 14px;border:2px dashed #4caf50;border-radius:10px;font-size:calc(var(--size) * 0.52);font-family:'Crimson Pro',Georgia,serif;resize:vertical;min-height:60px;margin-top:8px;background:#f9fff9}
        .vocab-starter-input:focus{border-style:solid;border-color:#2e7d32;outline:none}
        .vocab-starter-count{font-size:calc(var(--size) * 0.38);color:var(--muted);text-align:right;margin-top:4px}

        /* Sentence Diagram */
        .diagram-section{background:linear-gradient(135deg,#e8eaf6,#c5cae9);border-radius:14px;padding:16px;margin-top:14px;animation:slideIn 0.3s ease}
        .diagram-title{font-size:calc(var(--size) * 0.52);font-weight:600;color:#283593;margin-bottom:12px;display:flex;align-items:center;gap:8px}
        .diagram-table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden}
        .diagram-table th{background:#5c6bc0;color:#fff;padding:8px 12px;font-size:calc(var(--size) * 0.43);text-transform:uppercase;letter-spacing:0.5px;font-weight:700}
        .diagram-table td{padding:10px 14px;font-family:'Crimson Pro',Georgia,serif;font-size:calc(var(--size) * 0.55);border:1px solid #e8eaf6;text-align:center}

        /* Word Families (UFLI) */
        .word-families{margin-top:10px;padding-top:10px;border-top:1px dashed #80cbc4}
        .wf-label{font-size:calc(var(--size) * 0.52);font-weight:700;color:#00695c;text-transform:uppercase;margin-bottom:6px}
        .wf-group{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
        .wf-pattern{font-size:calc(var(--size) * 0.55);font-weight:700;color:#00897b;min-width:40px}
        .wf-word{background:#e8f5e9;color:#2e7d32;padding:5px 14px;border-radius:8px;font-size:calc(var(--size) * 0.58);font-family:'Crimson Pro',Georgia,serif;cursor:pointer;transition:all 0.2s}
        .wf-word:hover{background:#c8e6c9;transform:scale(1.05)}

        /* UFLI clickable word chips */
        .ufli-word-chip.clickable,.ufli-heart-chip.clickable{cursor:pointer;transition:all 0.2s}
        .ufli-word-chip.clickable:hover,.ufli-heart-chip.clickable:hover{transform:scale(1.1);box-shadow:0 2px 8px rgba(0,0,0,0.15)}
        .ufli-word-chip.clickable:active,.ufli-heart-chip.clickable:active{transform:scale(0.95)}

        /* Immersive Practice Overlay */
        .immersive-overlay{position:fixed;inset:0;background:var(--bg);display:flex;align-items:flex-start;justify-content:center;z-index:9998;padding:0;overflow-y:auto;animation:popoutFadeIn 0.3s ease}
        .immersive-container{width:100%;max-width:800px;min-height:100vh;padding:24px 24px 60px;animation:popoutSlideUp 0.4s ease}
        .immersive-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid #e0e0e0}
        .immersive-header-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
        .immersive-title{font-size:1.1rem;font-weight:700;color:var(--text)}
        .immersive-exit{background:#f5f5f5;border:none;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:1.3rem;display:flex;align-items:center;justify-content:center;transition:all 0.2s;color:#666;flex-shrink:0}
        .immersive-exit:hover{background:#ef5350;color:#fff;transform:scale(1.1)}
        .immersive-step-bar{display:flex;align-items:center;gap:8px;margin-bottom:20px;flex-wrap:wrap}
        .immersive-step-label{font-size:calc(var(--size) * 0.58);font-weight:700;color:#5c6bc0}
        .immersive-dots{display:flex;gap:6px;align-items:center}
        .immersive-dot{width:14px;height:14px;border-radius:50%;background:#e0e0e0;transition:all 0.3s}
        .immersive-dot.done{background:linear-gradient(135deg,#66bb6a,#43a047)}
        .immersive-dot.active{background:linear-gradient(135deg,#42a5f5,#5c6bc0);transform:scale(1.3);box-shadow:0 0 8px rgba(66,165,245,0.5)}
        .immersive-sentence{font-family:'Crimson Pro',Georgia,serif;font-size:calc(var(--size) * 1.3);line-height:3;padding:32px;background:var(--display);border-radius:16px;margin-bottom:20px;min-height:120px;text-align:center}
        .immersive-hint{background:linear-gradient(135deg,#fff8e1,#ffe0b2);border:2px solid #ff9800;border-radius:14px;padding:18px 22px;margin-bottom:18px}
        .immersive-hint .hint-icon{font-size:1.6rem}
        .immersive-hint .hint-text{font-size:calc(var(--size) * 0.62);font-weight:600;color:#e65100}
        .immersive-hint .interactive-input{font-size:calc(var(--size) * 0.62);padding:12px 16px}
        .immersive-hint .interactive-submit{font-size:calc(var(--size) * 0.58);padding:12px 24px}
        .immersive-feedback{text-align:center;padding:16px 20px;border-radius:14px;margin-bottom:18px;font-weight:700;font-size:calc(var(--size) * 0.72);animation:slideIn 0.3s ease}
        .immersive-feedback.correct{background:#c8e6c9;color:#2e7d32;border:3px solid #66bb6a}
        .immersive-feedback.incorrect{background:#ffcdd2;color:#c62828;border:3px solid #ef5350}
        .immersive-nav{display:flex;gap:14px;align-items:center;justify-content:center;margin-bottom:20px;flex-wrap:wrap}
        .immersive-nav .check-btn{padding:16px 36px;font-size:calc(var(--size) * 0.65);border-radius:30px}
        .immersive-complete{text-align:center;padding:40px 20px;animation:slideIn 0.4s ease}
        .immersive-complete-icon{font-size:3rem;margin-bottom:12px}
        .immersive-complete-text{font-size:calc(var(--size) * 0.8);font-weight:700;color:#2e7d32;margin-bottom:8px}
        .immersive-complete-sub{font-size:calc(var(--size) * 0.55);color:var(--muted)}
        .immersive-sections{margin-top:16px}
        .immersive-next-btn{background:linear-gradient(135deg,#66bb6a,#43a047);color:#fff;border:none;padding:16px 36px;border-radius:30px;cursor:pointer;font-weight:700;font-size:calc(var(--size) * 0.62);margin-top:16px;transition:all 0.2s}
        .immersive-next-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(76,175,80,0.4)}
        .immersive-all-done{text-align:center;padding:60px 20px;animation:slideIn 0.4s ease}
        .immersive-all-done-icon{font-size:4rem;margin-bottom:16px}
        .immersive-all-done-text{font-size:calc(var(--size) * 0.9);font-weight:700;color:#2e7d32;margin-bottom:10px}
        .immersive-all-done-sub{font-size:calc(var(--size) * 0.58);color:var(--muted);margin-bottom:20px}

        @media(max-width:600px){.header{flex-direction:column;align-items:flex-start}.sentence-display{font-size:var(--size);padding:16px}.popout-container{padding:12px 12px 30px}.popout-sentence{font-size:calc(var(--size) * 1.1);padding:20px;line-height:2.6}.popout-header-left{gap:8px}.popout-sentence-label{font-size:calc(var(--size) * 0.58)}.ufli-words-row{flex-direction:column;gap:10px}.ufli-top-row{gap:6px}.ufli-lesson-badge{font-size:calc(var(--size) * 0.48);padding:5px 10px}.dashboard{flex-direction:column;align-items:flex-start;gap:10px}.controls{flex-direction:column;align-items:flex-start;gap:10px}.mode-btn{padding:6px 12px;font-size:0.75rem}.immersive-container{padding:12px 12px 40px}.immersive-sentence{font-size:calc(var(--size) * 1.1);padding:20px;line-height:2.6}}