@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap";.hn1-layout{display:flex;height:100vh;overflow:hidden;max-width:1400px;margin:0 auto}.hn1-sidebar{width:260px;flex-shrink:0;display:flex;flex-direction:column;background:var(--surface);border-right:2px solid var(--border);overflow:hidden;transition:width .25s ease}.hn1-sidebar:not(.open){width:0}.hn1-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:2px solid var(--border);flex-shrink:0;background:var(--blue-soft)}.hn1-sidebar-title{font-size:.9rem;font-weight:800;color:var(--accent)}.hn1-sidebar-sub{font-size:.72rem;color:var(--text-muted)}.hn1-sidebar-close{background:none;border:none;cursor:pointer;font-size:1rem;color:var(--text-muted);padding:.2rem .4rem;border-radius:6px}.hn1-sidebar-close:hover{background:var(--surface2);color:var(--accent)}.hn1-sidebar-list{flex:1;overflow-y:auto;padding:.5rem;display:flex;flex-direction:column;gap:.3rem}.hn1-sidebar-list::-webkit-scrollbar{width:4px}.hn1-sidebar-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.hn1-lesson-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:12px;border:2px solid transparent;background:none;cursor:pointer;text-align:left;width:100%;transition:all .18s}.hn1-lesson-item:hover{background:var(--surface2);border-color:var(--border)}.hn1-lesson-item.active{background:var(--blue-soft);border-color:var(--accent);box-shadow:0 2px 10px #4a90d926}.hn1-lesson-num-badge{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-size:.75rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}.hn1-lesson-item.active .hn1-lesson-num-badge{background:var(--accent-hover)}.hn1-lesson-item-info{flex:1;min-width:0}.hn1-lesson-item-zh{font-size:.88rem;font-weight:700;color:var(--text);display:block}.hn1-lesson-item-py{font-size:.72rem;color:var(--accent);font-style:italic;display:block}.hn1-lesson-item-vi{font-size:.7rem;color:var(--text-muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hn1-lesson-vocab-count{font-size:.65rem;color:var(--text-muted);white-space:nowrap}.hn1-sidebar-footer{padding:.75rem 1rem;border-top:2px solid var(--border);background:var(--surface2);font-size:.75rem;color:var(--text-muted);text-align:center}.hn1-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}.hn1-header{display:flex;align-items:flex-start;gap:.9rem;padding:.9rem 1.4rem;background:var(--surface);border-bottom:2px solid var(--border);flex-shrink:0;box-shadow:0 2px 12px #4a90d914}.hn1-menu-btn{background:var(--surface2);border:2px solid var(--border);border-radius:10px;color:var(--text-muted);cursor:pointer;font-size:1.1rem;padding:.4rem .6rem;flex-shrink:0;margin-top:.1rem;transition:all .18s}.hn1-menu-btn:hover{border-color:var(--accent);color:var(--accent)}.hn1-lesson-info{flex:1;min-width:0}.hn1-lesson-badge{font-size:.7rem;background:var(--accent);color:#fff;padding:.18rem .6rem;border-radius:50px;font-weight:700;margin-right:.4rem}.hn1-lesson-title-row{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin:.25rem 0}.hn1-lesson-zh{font-size:1.3rem;font-weight:800;color:var(--text)}.hn1-lesson-py{font-size:.9rem;color:var(--accent);font-style:italic}.hn1-lesson-vi{font-size:.85rem;color:var(--text-muted)}.hn1-grammar-hint{font-size:.75rem;color:var(--text-muted);margin:0}.hn1-skill-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);flex-shrink:0;background:var(--surface)}.hn1-skill-tab{flex:1;padding:.65rem .5rem;border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:.85rem;font-weight:600;border-bottom:3px solid transparent;transition:all .18s}.hn1-skill-tab:hover{color:var(--accent);background:var(--surface2)}.hn1-skill-tab.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--blue-soft);font-weight:800}.hn1-vocab-strip{display:flex;align-items:center;gap:.4rem;padding:.5rem 1.2rem;background:var(--blue-soft);border-bottom:2px solid var(--border);flex-shrink:0;overflow-x:auto;scrollbar-width:none}.hn1-vocab-strip::-webkit-scrollbar{display:none}.hn1-vocab-label{font-size:.72rem;font-weight:800;color:var(--accent);white-space:nowrap}.hn1-vocab-chip{font-size:.72rem;padding:.18rem .55rem;border-radius:50px;background:var(--surface);border:1.5px solid var(--border);color:var(--text);white-space:nowrap;cursor:default}.hn1-vocab-chip em{color:var(--accent);font-style:italic;margin-left:.25rem}.hn1-vocab-more{font-size:.7rem;color:var(--text-muted);white-space:nowrap}.hn1-content-area{flex:1;overflow-y:auto}.hn1-content-area::-webkit-scrollbar{width:6px}.hn1-content-area::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.hn1-section{padding:1.2rem 1.4rem;display:flex;flex-direction:column;gap:1rem}.hn1-controls-bar{display:flex;align-items:center;gap:1.5rem;padding:.7rem 1rem;background:var(--surface);border:2px solid var(--border);border-radius:14px;flex-wrap:wrap}.hn1-control-group{display:flex;flex-direction:column;gap:.3rem}.hn1-control-group label{font-size:.68rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}.hn1-btn-group{display:flex;gap:.3rem;flex-wrap:wrap}.hn1-ctrl-btn{padding:.35rem .8rem;border-radius:50px;border:2px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;font-size:.8rem;font-weight:600;transition:all .15s}.hn1-ctrl-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.hn1-ctrl-btn.active{background:var(--gradient-btn);border-color:transparent;color:#fff;box-shadow:0 3px 10px #4a90d94d}.hn1-ctrl-btn:disabled{opacity:.4;cursor:not-allowed}.hn1-score-badge{margin-left:auto;font-size:.82rem;font-weight:700;color:var(--accent);background:var(--blue-soft);padding:.3rem .8rem;border-radius:50px}.hn1-pct{color:var(--text-muted);font-weight:500}.hn1-exercise-card{background:var(--surface);border:2px solid var(--border);border-radius:18px;padding:1.4rem;display:flex;flex-direction:column;gap:.9rem;box-shadow:0 3px 14px #4a90d912}.hn1-ex-type-label{font-size:.75rem;font-weight:800;color:var(--accent)}.hn1-ex-progress{font-size:.75rem;color:var(--text-muted);font-weight:600}.hn1-hint-text{font-size:.78rem;color:var(--text-muted);font-style:italic}.hn1-empty{padding:3rem;text-align:center;color:var(--text-muted)}.hn1-audio-area{display:flex;align-items:flex-start;gap:1rem;background:var(--blue-soft);border-radius:12px;padding:1rem}.hn1-play-btn{width:54px;height:54px;border-radius:50%;border:3px solid var(--accent);background:var(--surface);color:var(--accent);font-size:1.4rem;cursor:pointer;flex-shrink:0;transition:all .2s;display:flex;align-items:center;justify-content:center}.hn1-play-btn:hover{background:var(--accent);color:#fff;transform:scale(1.08)}.hn1-play-btn.playing{background:var(--accent);color:#fff}.hn1-audio-text{flex:1}.hn1-audio-zh{font-size:1.05rem;font-weight:600;color:var(--text);line-height:1.7}.hn1-audio-py{font-size:.82rem;color:var(--accent);font-style:italic;margin-top:.25rem;line-height:1.6}.hn1-question{font-size:.95rem;font-weight:700;color:var(--text)}.hn1-options{display:flex;flex-direction:column;gap:.5rem}.hn1-option{display:flex;align-items:center;gap:.8rem;padding:.65rem 1rem;border:2px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;text-align:left;font-size:.9rem;color:var(--text);transition:all .18s}.hn1-option:hover,.hn1-option.selected{border-color:var(--accent);background:var(--blue-soft)}.hn1-option.correct{border-color:#34b87a;background:#e8faf3;color:#1a7a4a}.hn1-option.wrong{border-color:#ef4444;background:#fff0f0;color:#c0392b}.hn1-opt-letter{width:26px;height:26px;border-radius:50%;background:var(--border);font-size:.75rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}.hn1-option.correct .hn1-opt-letter{background:#34b87a;color:#fff}.hn1-option.wrong .hn1-opt-letter{background:#ef4444;color:#fff}.hn1-confirm-btn{padding:.7rem 2rem;border-radius:50px;border:none;background:var(--gradient-btn);color:#fff;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .2s;align-self:flex-start;box-shadow:0 4px 14px #4a90d959}.hn1-confirm-btn:hover:not(:disabled){transform:scale(1.04)}.hn1-confirm-btn:disabled{opacity:.4;cursor:not-allowed}.hn1-next-btn{padding:.55rem 1.4rem;border-radius:50px;border:2px solid var(--accent);background:var(--surface);color:var(--accent);font-size:.85rem;font-weight:700;cursor:pointer;transition:all .2s}.hn1-next-btn:hover{background:var(--accent);color:#fff}.hn1-result-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.hn1-result-label{font-size:.88rem;font-weight:700}.hn1-result-label.correct{color:#1a7a4a}.hn1-result-label.wrong{color:#c0392b}.hn1-btn-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.hn1-ex-nav{display:flex;gap:.4rem;flex-wrap:wrap}.hn1-ex-dot{width:30px;height:30px;border-radius:50%;border:2px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;font-size:.78rem;font-weight:700;transition:all .15s}.hn1-ex-dot.active{background:var(--accent);border-color:var(--accent);color:#fff}.hn1-ex-dot:hover:not(.active){border-color:var(--accent);color:var(--accent)}.hn1-nav-btns{display:flex;gap:.6rem}.hn1-fill-text{font-size:.95rem;line-height:2.2;color:var(--text)}.hn1-blank-select{margin:0 .2rem;padding:.15rem .5rem;border-radius:8px;border:2px solid var(--accent);background:var(--blue-soft);color:var(--text);font-size:.88rem;cursor:pointer}.hn1-blank-select.correct{border-color:#34b87a;background:#e8faf3;color:#1a7a4a}.hn1-blank-select.wrong{border-color:#ef4444;background:#fff0f0;color:#c0392b}.hn1-answers-row{display:flex;gap:.4rem;flex-wrap:wrap}.hn1-answer-chip{font-size:.8rem;padding:.2rem .6rem;border-radius:50px;background:#e8faf3;border:2px solid #34b87a;color:#1a7a4a;font-weight:700}.hn1-tf-passage{background:var(--blue-soft);border-radius:12px;padding:.9rem 1rem}.hn1-tf-statement{font-size:.92rem;font-weight:600;color:var(--text)}.hn1-tf-btns{display:flex;gap:.8rem}.hn1-tf-btn{flex:1;padding:.65rem 1rem;border-radius:12px;border:2px solid var(--border);background:var(--surface);cursor:pointer;font-size:.9rem;font-weight:700;transition:all .18s}.hn1-tf-btn:hover:not(:disabled){border-color:var(--accent);background:var(--blue-soft)}.hn1-tf-btn.correct{border-color:#34b87a;background:#e8faf3;color:#1a7a4a}.hn1-tf-btn.wrong{border-color:#ef4444;background:#fff0f0;color:#c0392b}.hn1-tf-btn:disabled{opacity:.7;cursor:not-allowed}.hn1-ordering-chosen{min-height:52px;border:2px dashed var(--accent);border-radius:12px;padding:.5rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;background:var(--blue-soft)}.hn1-ordering-placeholder{font-size:.8rem;color:var(--text-muted);font-style:italic}.hn1-ordering-pool{display:flex;flex-wrap:wrap;gap:.4rem}.hn1-word-chip{padding:.35rem .75rem;border-radius:10px;border:2px solid var(--border);background:var(--surface);cursor:pointer;font-size:.88rem;font-weight:600;color:var(--text);transition:all .15s}.hn1-word-chip:hover{border-color:var(--accent);background:var(--blue-soft)}.hn1-word-chip.chosen{border-color:var(--accent);background:var(--blue-soft);color:var(--accent)}.hn1-word-chip em{font-size:.7rem;color:#2b72c0;margin-left:.25rem}.hn1-matching-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.2rem}.hn1-matching-col{display:flex;flex-direction:column;gap:.4rem}.hn1-match-chip{padding:.55rem .9rem;border-radius:12px;border:2px solid var(--border);background:var(--surface);cursor:pointer;font-size:.88rem;font-weight:600;color:var(--text);transition:all .18s;text-align:left}.hn1-match-chip:hover:not(.used){border-color:var(--accent);background:var(--blue-soft)}.hn1-match-chip.selected{border-color:var(--accent);background:var(--blue-soft)}.hn1-match-chip.correct{border-color:#34b87a;background:#e8faf3;color:#1a7a4a}.hn1-match-chip.wrong{border-color:#ef4444;background:#fff0f0;color:#c0392b}.hn1-match-chip.used{opacity:.5;cursor:not-allowed}.hn1-match-chip.right{text-align:center}.hn1-match-arrow{font-size:.72rem;color:var(--text-muted)}.hn1-speak-layout{display:flex;flex-direction:column;height:100%;overflow:hidden}.hn1-speak-layout .hn1-controls-bar{margin:.8rem 1.2rem 0}.hn1-speak-layout .messages-area{flex:1;overflow-y:auto;padding:1rem 1.4rem}.hn1-speak-layout .chat-actions{flex-shrink:0}.hn1-speak-hint{font-size:.8rem;color:var(--text-muted);padding:.5rem 1.4rem;background:var(--blue-soft);border-bottom:1.5px solid var(--border);line-height:1.6}.hn1-flashcard-wrap{display:flex;flex-direction:column;align-items:center;gap:1.2rem;padding:1rem 0}.hn1-fc-progress{font-size:.82rem;color:var(--text-muted);text-align:center;width:100%}.hn1-fc-bar{height:6px;background:var(--border);border-radius:3px;margin-top:.4rem;overflow:hidden}.hn1-fc-bar-fill{height:100%;background:var(--gradient-btn);border-radius:3px;transition:width .4s ease}.hn1-flashcard{width:320px;height:220px;cursor:pointer;perspective:1000px}.hn1-fc-front,.hn1-fc-back{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:20px;padding:1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;backface-visibility:hidden;transition:transform .5s ease;box-shadow:0 6px 28px #4a90d926}.hn1-fc-front{background:var(--surface);border:2px solid var(--border)}.hn1-fc-back{background:var(--blue-soft);border:2px solid var(--accent);transform:rotateY(180deg)}.hn1-flashcard.flipped .hn1-fc-front{transform:rotateY(-180deg)}.hn1-flashcard.flipped .hn1-fc-back{transform:rotateY(0)}.hn1-flashcard{position:relative}.hn1-fc-zh{font-size:2.8rem;font-weight:800;color:var(--text)}.hn1-fc-tap{font-size:.78rem;color:var(--text-muted);margin-top:.5rem}.hn1-fc-py{font-size:1rem;color:var(--accent);font-style:italic;margin-bottom:.3rem}.hn1-fc-vi{font-size:.95rem;font-weight:700;color:var(--text)}.hn1-fc-radical{font-size:.78rem;color:var(--text-muted);margin-top:.4rem}.hn1-fc-hint{font-size:.78rem;color:var(--text-muted);font-style:italic;margin-top:.2rem;text-align:center}.hn1-fc-btns{display:flex;gap:.7rem}.hn1-fc-btn{padding:.55rem 1.2rem;border-radius:50px;border:2px solid;cursor:pointer;font-size:.85rem;font-weight:700;transition:all .18s}.hn1-fc-btn.forget{border-color:#ef4444;color:#ef4444;background:#fff0f0}.hn1-fc-btn.hard{border-color:#f59e0b;color:#b45309;background:#fffbeb}.hn1-fc-btn.know{border-color:#34b87a;color:#1a7a4a;background:#e8faf3}.hn1-fc-btn:hover{transform:scale(1.06)}.hn1-flashcard-done{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:3rem 1rem;text-align:center;color:var(--text)}.hn1-typing-wrap{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem 0}.hn1-typing-card{width:340px;background:var(--surface);border:2px solid var(--border);border-radius:20px;padding:1.6rem;display:flex;flex-direction:column;align-items:center;gap:.7rem;box-shadow:0 4px 18px #4a90d91a}.hn1-typing-prompt{font-size:.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}.hn1-typing-py{font-size:1.6rem;font-weight:800;color:var(--accent);font-style:italic}.hn1-typing-vi{font-size:1rem;color:var(--text);font-weight:600}.hn1-typing-hint{font-size:.75rem;color:var(--text-muted);font-style:italic;text-align:center}.hn1-typing-counter{font-size:.78rem;color:var(--text-muted)}.hn1-typing-input{width:100%;padding:.7rem 1rem;border-radius:12px;border:2px solid var(--border);font-size:1.2rem;text-align:center;outline:none;background:var(--surface);color:var(--text);transition:border-color .2s}.hn1-typing-input:focus{border-color:var(--accent)}.hn1-typing-input.correct{border-color:#34b87a;background:#e8faf3}.hn1-typing-input.wrong{border-color:#ef4444;background:#fff0f0}.hn1-typing-feedback{font-size:.95rem;font-weight:700}.hn1-typing-feedback.correct{color:#1a7a4a}.hn1-typing-feedback.wrong{color:#c0392b}.hn1-canvas-wrap{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem 0}.hn1-canvas-info{text-align:center}.hn1-canvas{border:2px solid var(--border);border-radius:16px;background:var(--surface);cursor:crosshair;touch-action:none;box-shadow:0 4px 18px #4a90d91f}.hn1-vocab-actions{display:flex;justify-content:flex-end;padding:.5rem 0 .75rem}.hn1-review-btn{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:.55rem 1.2rem;font-size:.9rem;font-weight:700;cursor:pointer;transition:opacity .15s}.hn1-review-btn:hover{opacity:.88}.hn1-vocab-table-wrap{overflow-x:auto;border-radius:12px;border:1.5px solid var(--border);margin-bottom:1.5rem}.hn1-vocab-table{width:100%;border-collapse:collapse;font-size:.88rem}.hn1-vocab-table th{background:var(--blue-soft);color:var(--accent);font-weight:700;padding:.55rem .75rem;text-align:left;white-space:nowrap;border-bottom:2px solid var(--border)}.hn1-vocab-table td{padding:.45rem .75rem;border-bottom:1px solid var(--border);vertical-align:middle}.hn1-vocab-table tr:last-child td{border-bottom:none}.hn1-vocab-table tr:hover td{background:var(--blue-soft)}.hn1-td-zh{font-size:1.15rem;font-weight:700;color:var(--text)}.hn1-zh-cell{display:inline-flex;align-items:center;gap:.4rem}.hn1-speak-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--blue-soft);border:1.5px solid var(--border);cursor:pointer;font-size:.72rem;line-height:1;color:var(--accent);opacity:.7;flex-shrink:0;transition:opacity .15s,transform .15s,background .15s}.hn1-speak-btn:hover{opacity:1;background:var(--accent);color:#fff;transform:scale(1.15)}.hn1-td-py{color:var(--accent);font-style:italic;font-size:.82rem;white-space:nowrap}.hn1-td-hv{color:#e67e22;font-size:.82rem;font-style:italic}.hn1-td-vi{color:var(--text)}.hn1-td-en{color:var(--text-muted);font-size:.82rem}.hn1-td-hint{color:var(--text-muted);font-size:.8rem;max-width:180px}.hn1-td-stt{color:var(--text-muted);font-size:.8rem;width:40px}.hn1-ext-row td{background:#4a90d90a}.hn1-custom-row td{background:#2ecc710f}.hn1-del-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.85rem;padding:.2rem .4rem;border-radius:6px;transition:color .15s}.hn1-del-btn:hover{color:#e74c3c}.hn1-add-word-form{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:1rem 1.2rem;margin-bottom:1.5rem}.hn1-add-word-title{font-weight:700;color:var(--accent);margin:0 0 .75rem;font-size:.92rem}.hn1-add-word-fields{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end}.hn1-field-group{display:flex;flex-direction:column;gap:.25rem}.hn1-field-group label{font-size:.75rem;font-weight:600;color:var(--text-muted)}.hn1-field-group.required label:after{content:" *";color:var(--accent)}.hn1-field-input{border:1.5px solid var(--border);border-radius:8px;padding:.4rem .7rem;font-size:.88rem;background:var(--bg);color:var(--text);min-width:120px;transition:border-color .15s}.hn1-field-input:focus{outline:none;border-color:var(--accent)}.hn1-py-loading{font-size:.72rem;color:var(--text-muted)}.hn1-add-error{color:#e74c3c;font-size:.82rem;margin-top:.5rem}.hn1-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;background:#1a2d4a8c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1rem}.hn1-modal{background:var(--surface);border-radius:18px;border:2px solid var(--border);width:100%;max-width:640px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;padding:1.25rem}.hn1-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;font-weight:700;color:var(--accent);font-size:.95rem;flex-wrap:wrap;gap:.5rem}.hn1-modal-controls{display:flex;align-items:center;gap:.5rem}.hn1-modal-close{background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--text-muted);padding:.2rem .5rem;border-radius:8px;transition:color .15s}.hn1-modal-close:hover{color:#e74c3c}.hn1-ai-loading{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem}.hn1-ai-spinner{width:42px;height:42px;border-radius:50%;border:4px solid var(--border);border-top-color:var(--accent);animation:hn1-spin .8s linear infinite}@keyframes hn1-spin{to{transform:rotate(360deg)}}.hn1-error-bar{background:#e74c3c1a;border:1.5px solid rgba(231,76,60,.4);border-radius:10px;padding:.6rem 1rem;color:#e74c3c;font-size:.88rem}.hn1-error-bar button{background:none;border:none;color:var(--accent);cursor:pointer;text-decoration:underline}.hn1-exercise-card{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:1.25rem}.hn1-ex-type-label{font-size:.78rem;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin:0 0 .75rem;letter-spacing:.05em}.hn1-question{font-size:1rem;font-weight:600;margin:.75rem 0;color:var(--text)}.hn1-play-btn{width:52px;height:52px;border-radius:50%;border:2px solid var(--accent);background:var(--blue-soft);color:var(--accent);font-size:1.1rem;cursor:pointer;flex-shrink:0;transition:background .15s}.hn1-play-btn:hover,.hn1-play-btn.playing{background:var(--accent);color:#fff}.hn1-play-btn-sm{display:inline-flex;align-items:center;gap:.4rem;border:1.5px solid var(--accent);background:var(--blue-soft);color:var(--accent);border-radius:20px;padding:.3rem .9rem;font-size:.85rem;cursor:pointer;margin:.5rem 0;transition:background .15s}.hn1-play-btn-sm:hover{background:var(--accent);color:#fff}.hn1-dialogue-box{background:var(--bg);border:1.5px solid var(--border);border-radius:12px;padding:.75rem 1rem;margin-bottom:.75rem}.hn1-dialogue-line{display:flex;align-items:baseline;gap:.6rem;margin:.3rem 0;font-size:.92rem}.hn1-dialogue-line.right{flex-direction:row-reverse}.hn1-dialogue-role{font-size:.7rem;font-weight:800;color:#fff;background:var(--accent);border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.hn1-dialogue-line.right .hn1-dialogue-role{background:#2ecc71}.hn1-tf-statement{background:var(--blue-soft);border-radius:10px;padding:.6rem .9rem;margin:.75rem 0;font-size:.95rem}.hn1-opt-py{color:var(--accent);font-size:.78rem;margin-left:.3rem}.hn1-match-fragment{font-size:1.05rem;font-weight:600;background:var(--blue-soft);border-radius:10px;padding:.6rem .9rem;margin-bottom:.75rem}.hn1-blank-slot{color:var(--accent);font-size:1.1rem}.hn1-fill-sentence{font-size:1rem;line-height:2;margin:.5rem 0 .75rem}.hn1-fill-blank{display:inline-block;min-width:3rem;border-bottom:2px solid var(--accent);text-align:center;padding:0 .5rem;margin:0 .2rem;font-weight:700;color:var(--text);transition:background .15s}.hn1-fill-blank.correct{background:#2ecc7126;border-color:#2ecc71;color:#27ae60}.hn1-fill-blank.wrong{background:#e74c3c1a;border-color:#e74c3c;color:#e74c3c}.hn1-passage-box{background:var(--bg);border:1.5px solid var(--border);border-radius:12px;padding:.8rem 1rem;margin-bottom:.75rem;line-height:1.7;font-size:.95rem}.hn1-write-sentence{font-size:1.05rem;line-height:2.2;margin:.5rem 0 1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem}.hn1-write-blank-wrap{display:inline-flex;flex-direction:column;align-items:center}.hn1-write-target-py{font-size:.78rem;color:var(--accent);font-style:italic}.hn1-write-input{border:none;border-bottom:2px solid var(--accent);text-align:center;font-size:1.1rem;background:transparent;color:var(--text);padding:.1rem .3rem;outline:none;min-width:2.5rem;transition:border-color .15s}.hn1-write-input.correct{border-color:#2ecc71;color:#27ae60}.hn1-write-input.wrong{border-color:#e74c3c;color:#e74c3c}.hn1-result-row{display:flex;align-items:center;gap:1rem;margin-top:.75rem;flex-wrap:wrap}.hn1-next-btn{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:.45rem 1rem;font-size:.88rem;font-weight:700;cursor:pointer;transition:opacity .15s}.hn1-next-btn:hover{opacity:.88}.hn1-vr-zh{font-size:2rem;font-weight:800;text-align:center;margin:.5rem 0 1rem;color:var(--text)}.hn1-vr-vi{font-size:1rem;font-style:italic;color:var(--text-muted);margin:.5rem 0 1rem;text-align:center}.hn1-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:198;background:#1a2d4a4d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@media(max-width:768px){.hn1-sidebar{position:fixed;top:0;left:0;bottom:0;z-index:199;width:280px!important;transform:translate(-100%);transition:transform .25s ease;box-shadow:6px 0 30px #4a90d933}.hn1-sidebar.open{transform:translate(0)}.hn1-overlay{display:block}.hn1-lesson-py,.hn1-lesson-vi{display:none}.hn1-flashcard{width:280px;height:200px}.hn1-typing-card{width:100%}.hn1-matching-grid{grid-template-columns:1fr}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:inherit}:root{--bg: #f0f6ff;--surface: #ffffff;--surface2: #eaf3ff;--border: #b8d4f5;--text: #1a2d4a;--text-muted: #6b8cb5;--accent: #4a90d9;--accent-hover: #2b72c0;--accent2: #85c1f5;--blue-soft: #dceefb;--green-vi: #2eaa6f;--blue-ipa: #4a6fd4;--gradient: linear-gradient(135deg, #5baae8 0%, #a8d4fa 100%);--gradient-btn: linear-gradient(135deg, #4a90d9 0%, #85c1f5 100%);font-family:Nunito,system-ui,sans-serif}body{font-family:Nunito,system-ui,sans-serif;background:var(--bg);background-image:radial-gradient(circle at 15% 40%,rgba(91,170,232,.12) 0%,transparent 45%),radial-gradient(circle at 85% 15%,rgba(133,193,245,.1) 0%,transparent 45%),radial-gradient(circle at 55% 85%,rgba(168,212,250,.15) 0%,transparent 40%);color:var(--text);min-height:100vh}.app{min-height:100vh}@keyframes fadeInUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes bounce{0%,80%,to{transform:scale(.55);opacity:.5}40%{transform:scale(1);opacity:1}}@keyframes bluePulse{0%,to{box-shadow:0 0 #4a90d980}50%{box-shadow:0 0 0 16px #4a90d900}}@keyframes popupIn{0%{opacity:0;transform:translate(-50%,-94%)}to{opacity:1;transform:translate(-50%,-100%)}}@keyframes cardPop{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.02)}to{transform:translateY(-3px) scale(1.015)}}.diff-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;flex-shrink:0;margin-right:3px}.diff-dot.diff-easy{background:#34b87a}.diff-dot.diff-medium{background:#f59e0b}.diff-dot.diff-hard{background:#ef4444}.chart-anim{display:inline-block}.topic-list-container{max-width:1100px;margin:0 auto;padding:2rem 1.5rem}.topic-list-header{text-align:center;margin-bottom:2rem}.app-title{font-size:2.2rem;font-weight:800;margin-bottom:.4rem;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-subtitle{color:var(--text-muted);font-size:.95rem}.search-input{width:100%;padding:.8rem 1.1rem;border-radius:50px;border:2px solid var(--border);background:var(--surface);color:var(--text);font-size:1rem;margin-bottom:1.25rem;outline:none;transition:border-color .2s,box-shadow .2s;box-shadow:0 2px 12px #4a90d914}.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px #4a90d926}.search-input::placeholder{color:var(--text-muted)}.phase-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}.phase-btn{padding:.45rem 1.1rem;border-radius:50px;border:2px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;font-size:.85rem;font-weight:600;transition:all .2s;white-space:nowrap;box-shadow:0 2px 8px #4a90d90f}.phase-btn.active{background:var(--gradient-btn);border-color:transparent;color:#fff;box-shadow:0 4px 14px #4a90d959}.phase-btn:hover:not(.active){border-color:var(--accent);color:var(--accent)}.topics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.topic-card{background:var(--surface);border:2px solid var(--border);border-radius:18px;padding:1.1rem;cursor:pointer;text-align:left;color:var(--text);transition:all .25s;box-shadow:0 3px 14px #4a90d912}.topic-card:hover{animation:cardPop .25s ease forwards;border-color:var(--accent);box-shadow:0 8px 28px #4a90d933}.topic-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem;border-left:4px solid;padding-left:.6rem}.topic-num{font-size:.75rem;color:var(--text-muted);font-weight:700}.topic-phase-badge{font-size:.7rem;padding:.2rem .6rem;border-radius:50px;color:#fff;font-weight:700}.topic-title{font-size:.95rem;font-weight:700;margin-bottom:.4rem;line-height:1.35}.topic-vocab{font-size:.75rem;color:var(--text-muted);line-height:1.45}.topic-title-py{font-size:.72rem;color:var(--accent);font-style:italic;margin-bottom:.3rem;line-height:1.3}.lang-toggle-bar{display:flex;justify-content:center;gap:.6rem;padding:.85rem 1rem;border-bottom:2px solid var(--border);background:var(--surface);box-shadow:0 2px 12px #4a90d914}.lang-btn{padding:.45rem 1.4rem;border-radius:50px;border:2px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;font-size:.9rem;font-weight:600;transition:all .2s}.lang-btn.active{background:var(--gradient-btn);border-color:transparent;color:#fff;box-shadow:0 4px 14px #4a90d959}.lang-btn:hover:not(.active){border-color:var(--accent);color:var(--accent)}.voice-chat-layout{display:flex;height:100vh;overflow:hidden;max-width:1300px;margin:0 auto}.voice-chat{display:flex;flex-direction:column;height:100vh;flex:1;min-width:0}.chat-header{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;background:var(--surface);border-bottom:2px solid var(--border);flex-shrink:0;box-shadow:0 2px 12px #4a90d914}.back-btn{background:var(--surface2);border:2px solid var(--border);color:var(--text-muted);padding:.4rem .9rem;border-radius:50px;cursor:pointer;font-size:.875rem;white-space:nowrap;transition:all .2s;font-weight:600}.back-btn:hover{border-color:var(--accent);color:var(--accent)}.chat-topic-info{min-width:0;flex:1}.chat-phase-badge{font-size:.72rem;padding:.2rem .7rem;border-radius:50px;color:#fff;font-weight:700;margin-bottom:.25rem;display:inline-block}.chat-title-row{display:flex;align-items:center;gap:.4rem;min-width:0}.chat-title-row h2{font-size:1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.chat-controls{display:flex;gap:1.5rem;padding:.75rem 1.5rem;background:var(--surface2);border-bottom:2px solid var(--border);flex-wrap:wrap;flex-shrink:0}.control-group{display:flex;flex-direction:column;gap:.4rem}.control-group label{font-size:.7rem;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.07em}.btn-group{display:flex;gap:.3rem;flex-wrap:wrap}.ctrl-btn{padding:.35rem .8rem;border-radius:50px;border:2px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;font-size:.8rem;font-weight:600;transition:all .15s}.ctrl-btn:hover{border-color:var(--accent);color:var(--accent)}.ctrl-btn.active{background:var(--gradient-btn);border-color:transparent;color:#fff;box-shadow:0 3px 10px #4a90d94d}.diff-easy.active{background:linear-gradient(135deg,#34b87a,#20c997);border-color:transparent}.diff-medium.active{background:linear-gradient(135deg,#f59e0b,#f97316);border-color:transparent}.diff-hard.active{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:transparent}.vocab-strip{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.5rem;background:var(--blue-soft);border-bottom:2px solid var(--border);flex-shrink:0;overflow-x:auto;scrollbar-width:none}.vocab-strip::-webkit-scrollbar{display:none}.vocab-label{font-size:.75rem;font-weight:800;color:var(--accent);white-space:nowrap}.vocab-tag{font-size:.72rem;padding:.22rem .6rem;border-radius:50px;background:var(--surface);border:1.5px solid var(--border);color:var(--text-muted);white-space:nowrap;font-weight:600;transition:all .15s}.vocab-tag:hover{border-color:var(--accent);color:var(--accent)}.messages-area{flex:1;overflow-y:auto;padding:1.2rem 1.5rem;background:var(--bg)}.messages-area::-webkit-scrollbar{width:6px}.messages-area::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.messages-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-muted);gap:.6rem;text-align:center}.empty-icon{font-size:3rem;margin-bottom:.5rem;animation:float 3s ease-in-out infinite}.empty-hint{font-size:.85rem;opacity:.75}.messages-list{display:flex;flex-direction:column;gap:1rem}.message{display:flex;gap:.75rem;align-items:flex-start;animation:fadeInUp .3s ease}.message-assistant{flex-direction:row}.message-user{flex-direction:row-reverse}.message-avatar{font-size:1.5rem;flex-shrink:0;margin-top:.1rem}.message-bubble{padding:.85rem 1.1rem;border-radius:18px;max-width:75%;line-height:1.6;font-size:.925rem;position:relative}.message-assistant .message-bubble{background:var(--surface);border:2px solid var(--border);border-top-left-radius:4px;box-shadow:0 3px 14px #4a90d914}.message-user .message-bubble{background:var(--gradient-btn);color:#fff;border-top-right-radius:4px;box-shadow:0 4px 16px #4a90d94d}.speaking-indicator{display:inline-flex;gap:3px;align-items:center;margin-left:.5rem;vertical-align:middle}.speaking-indicator span{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:bounce 1s infinite ease-in-out}.speaking-indicator span:nth-child(2){animation-delay:.15s}.speaking-indicator span:nth-child(3){animation-delay:.3s}.zh-text{font-size:.9rem;line-height:1.65;font-weight:500;color:var(--text);margin-bottom:.3rem}.zh-pinyin{font-size:.78rem;color:#2b72c0;letter-spacing:.02em;line-height:1.5;font-style:italic;border-top:1.5px solid var(--border);padding-top:.3rem;margin-top:.2rem}.zh-vi,.en-vi{font-size:.78rem;color:var(--green-vi);line-height:1.5;border-top:1.5px solid var(--border);padding-top:.3rem;margin-top:.2rem}.en-ipa{font-size:.78rem;color:var(--blue-ipa);font-style:italic;letter-spacing:.02em;line-height:1.5;border-top:1.5px solid var(--border);padding-top:.3rem;margin-top:.2rem}.error-bar{background:#fff0f0;border:2px solid #ffc0c0;color:#c0392b;padding:.6rem 1.5rem;font-size:.85rem;flex-shrink:0}.chat-actions{padding:1.25rem 1.5rem;background:var(--surface);border-top:2px solid var(--border);display:flex;align-items:center;justify-content:center;gap:1rem;flex-shrink:0;position:relative;box-shadow:0 -2px 14px #4a90d912}.start-btn{padding:.95rem 2.8rem;border-radius:50px;background:var(--gradient-btn);background-size:200% auto;border:none;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:all .25s;box-shadow:0 5px 20px #4a90d966;animation:shimmer 3s linear infinite}.start-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 8px 28px #4a90d98c}.start-btn:disabled{opacity:.5;cursor:not-allowed;animation:none}.mic-area{display:flex;flex-direction:column;align-items:center;gap:.5rem}.mic-btn{width:74px;height:74px;border-radius:50%;border:none;font-size:1.9rem;cursor:pointer;transition:all .2s;background:var(--surface2);border:3px solid var(--border);box-shadow:0 4px 16px #4a90d91f}.mic-btn:hover:not(:disabled){transform:scale(1.08);border-color:var(--accent)}.mic-btn.listening{background:var(--blue-soft);border-color:var(--accent);animation:bluePulse 1.2s infinite}.mic-btn.loading{opacity:.6;cursor:not-allowed}.mic-hint{font-size:.8rem;color:var(--text-muted);font-weight:500}.interim-text{font-size:.82rem;color:var(--accent);font-style:italic;font-weight:600;max-width:280px;text-align:center;line-height:1.4;margin:.25rem 0 0;word-break:break-word}.restart-btn{position:absolute;right:1.5rem;background:var(--surface2);border:2px solid var(--border);color:var(--text-muted);padding:.4rem .9rem;border-radius:50px;cursor:pointer;font-size:.8rem;font-weight:600;transition:all .2s}.restart-btn:hover{border-color:var(--accent);color:var(--accent)}.voice-select{background:var(--surface);border:2px solid var(--border);color:var(--text);border-radius:50px;padding:.35rem .8rem;font-size:.8rem;cursor:pointer;max-width:220px;outline:none;font-weight:500}.voice-select:focus{border-color:var(--accent)}.translation-popup{position:fixed;z-index:9999;transform:translate(-50%,-100%);background:var(--surface);border:2px solid var(--accent);border-radius:14px;padding:.7rem 1rem;box-shadow:0 12px 36px #4a90d940;min-width:190px;max-width:320px;animation:popupIn .18s ease;pointer-events:all}.translation-popup:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);border:8px solid transparent;border-bottom:0;border-top-color:var(--accent)}.popup-selected{font-size:.78rem;color:var(--text-muted);font-style:italic;margin-bottom:.4rem;border-bottom:1.5px solid var(--border);padding-bottom:.35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.popup-loading{font-size:.8rem;color:var(--text-muted);text-align:center;padding:.2rem 0}.popup-error{font-size:.8rem;color:#ef4444}.popup-translations{display:flex;flex-direction:column;gap:.35rem}.popup-row{display:flex;gap:.5rem;align-items:flex-start}.popup-lang{font-size:.7rem;font-weight:800;color:var(--accent);white-space:nowrap;padding-top:.1rem;min-width:40px}.popup-text{font-size:.85rem;line-height:1.45;color:var(--text)}.popup-pinyin{color:var(--accent);font-weight:700}.popup-row-speak{align-items:center}.popup-speak-btn{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--blue-soft);border:1.5px solid var(--border);cursor:pointer;font-size:.65rem;color:var(--accent);flex-shrink:0;transition:background .15s,transform .15s}.popup-speak-btn:hover{background:var(--accent);color:#fff;transform:scale(1.15)}.replay-btn{display:inline-flex;align-items:center;gap:.25rem;margin-top:.5rem;padding:.2rem .6rem;border:1.5px solid var(--border);border-radius:20px;background:var(--surface2);cursor:pointer;font-size:.75rem;color:var(--text-muted);transition:all .15s}.replay-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--blue-soft)}.conv-sidebar{width:265px;flex-shrink:0;display:flex;flex-direction:column;background:var(--surface);border-right:2px solid var(--border);overflow:hidden;transition:width .25s ease}.conv-sidebar:not(.open){width:0}.conv-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;border-bottom:2px solid var(--border);flex-shrink:0;gap:.5rem;background:var(--blue-soft)}.conv-sidebar-title{font-size:.8rem;font-weight:800;color:var(--accent);white-space:nowrap}.new-conv-btn-sm{padding:.3rem .8rem;border-radius:50px;border:none;background:var(--gradient-btn);color:#fff;cursor:pointer;font-size:.78rem;font-weight:700;white-space:nowrap;transition:all .2s;box-shadow:0 3px 10px #4a90d94d}.new-conv-btn-sm:hover{transform:scale(1.05);box-shadow:0 5px 16px #4a90d973}.conv-sidebar-list{flex:1;overflow-y:auto;padding:.5rem;display:flex;flex-direction:column;gap:.35rem}.conv-sidebar-list::-webkit-scrollbar{width:4px}.conv-sidebar-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.conv-sidebar-empty{font-size:.8rem;color:var(--text-muted);text-align:center;padding:2rem .75rem;white-space:pre-line;line-height:1.7}.conv-sidebar-item{padding:.7rem .8rem;border-radius:12px;cursor:pointer;border:2px solid transparent;transition:all .18s}.conv-sidebar-item:hover{background:var(--surface2);border-color:var(--border)}.conv-sidebar-item.active{background:var(--blue-soft);border-color:var(--accent);box-shadow:0 2px 10px #4a90d91f}.conv-sidebar-preview{font-size:.8rem;line-height:1.4;color:var(--text);font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.35rem}.conv-sidebar-meta{display:flex;align-items:center;gap:.4rem;font-size:.7rem;color:var(--text-muted)}.conv-msg-count{margin-left:auto}.conv-delete-btn{background:none;border:none;cursor:pointer;font-size:.8rem;opacity:.35;padding:.1rem .25rem;border-radius:6px;transition:all .15s}.conv-delete-btn:hover{opacity:1;background:#ffe4e4}.sidebar-toggle-btn{background:var(--surface2);border:2px solid var(--border);color:var(--text-muted);padding:.25rem .5rem;border-radius:50px;cursor:pointer;font-size:.9rem;transition:all .2s;flex-shrink:0;line-height:1}.sidebar-toggle-btn:hover{border-color:var(--accent);color:var(--accent)}.sidebar-backdrop{display:none}@media(max-width:768px){.topic-list-container{padding:1rem}.app-title{font-size:1.6rem}.chat-controls{gap:1rem;padding:.6rem 1rem}.vocab-strip{padding:.5rem 1rem}.messages-area{padding:.85rem 1rem}.chat-actions{padding:1rem}.conv-sidebar{position:fixed;top:0;left:0;bottom:0;z-index:200;width:285px!important;transform:translate(-100%);transition:transform .25s ease;box-shadow:6px 0 30px #4a90d933}.conv-sidebar.open{transform:translate(0)}.sidebar-backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:199;background:#1a2d4a4d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}