@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap";.btn{text-transform:uppercase;letter-spacing:.8px;-webkit-user-select:none;user-select:none;border-radius:12px;justify-content:center;align-items:center;font-weight:700;transition:all .2s;display:inline-flex;position:relative}.btn:active{margin-top:4px;transform:translateY(4px);border-bottom-width:0!important}.btn-sm{height:40px;padding:0 16px;font-size:14px}.btn-md{height:50px;padding:0 24px;font-size:16px}.btn-lg{height:60px;padding:0 32px;font-size:18px}.btn-primary{background-color:var(--green);color:#fff;border-bottom:4px solid var(--green-shadow)}.btn-primary:hover{background-color:var(--green-hover)}.btn-secondary{background-color:var(--blue);color:#fff;border-bottom:4px solid var(--blue-shadow)}.btn-secondary:hover{background-color:var(--blue-hover)}.btn-danger{background-color:var(--red);color:#fff;border-bottom:4px solid var(--red-shadow)}.btn-danger:hover{background-color:var(--red-hover)}.btn-ghost{color:var(--text);background-color:#0000;border-bottom:2px solid #0000}.btn-ghost:hover{background-color:var(--grey)}.btn-sidebar{color:var(--text);text-transform:none;letter-spacing:normal;background-color:#0000;border:2px solid #0000;border-radius:12px;justify-content:flex-start;gap:16px;font-size:15px;font-weight:700}.btn-sidebar:hover{background-color:var(--grey)}.btn-active{color:var(--blue);background-color:#ddf4ff;border:2px solid #84d8ff}.btn-active:hover{background-color:#ddf4ff}.btn-sidebarOutline{color:var(--blue);border:2px solid var(--border);border-bottom:4px solid var(--border);background-color:#fff}.btn-sidebarOutline:hover{background-color:var(--grey)}.sidebar{border-right:2px solid var(--border);background-color:var(--bg);flex-direction:column;width:256px;height:100vh;padding:24px;display:flex;position:fixed;top:0;left:0}.sidebar-header{margin-bottom:32px;padding-left:16px}.sidebar-logo{color:var(--green);letter-spacing:-.5px;font-size:24px;font-weight:800}.sidebar-nav{flex-direction:column;gap:8px;width:100%;display:flex}.nav-button{color:#777;width:100%}.nav-active{color:var(--blue);background-color:#ddf4ff;border:2px solid #84d8ff}@media (width<=768px){.sidebar{border-right:none;border-top:2px solid var(--border);z-index:50;flex-direction:row;justify-content:space-around;align-items:center;width:100%;height:80px;padding:0 16px;top:auto;bottom:0}.sidebar-header{display:none}.sidebar-nav{flex-direction:row;justify-content:space-around;gap:0}.nav-label{display:none}.nav-button{justify-content:center;width:60px;padding:0}}.learn-container{flex-direction:column;width:100%;max-width:680px;margin:0 auto;padding:16px 16px 80px;display:flex}.level-selector-wrapper{margin-bottom:24px}.level-pills-bar{scrollbar-width:thin;-webkit-overflow-scrolling:touch;gap:10px;padding-bottom:8px;display:flex;overflow-x:auto}.level-pills-bar::-webkit-scrollbar{height:6px}.level-pills-bar::-webkit-scrollbar-thumb{background:var(--grey-shadow);border-radius:10px}.level-pill{border:2px solid var(--border);border-bottom:4px solid var(--border);color:var(--text);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;background:#fff;border-radius:16px;align-items:center;gap:8px;padding:10px 16px;font-size:15px;font-weight:800;transition:all .15s;display:flex}.level-pill:hover{background-color:#f7f9fa;border-color:#d1d5db}.level-pill:active{border-bottom-width:2px;transform:translateY(2px)}.level-pill.active{border-color:var(--blue);border-bottom-color:var(--blue-shadow);color:var(--blue);background-color:#ddf4ff}.level-pill-badge{font-size:18px}.level-pill-count{color:#4b5563;background:#e5e7eb;border-radius:10px;padding:2px 6px;font-size:11px;font-weight:700}.level-pill.active .level-pill-count{color:#0284c7;background:#bae6fd}.level-banner-card{border:2px solid var(--border);border-bottom:5px solid var(--border);background:#fff;border-radius:20px;margin-bottom:32px;padding:20px 24px;box-shadow:0 4px 12px #00000008}.level-banner-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.level-banner-title-group{align-items:center;gap:12px;display:flex}.level-banner-badge{font-size:32px}.level-banner-title{color:var(--text);margin:0;font-size:26px;font-weight:900}.level-progress-tag{color:#059669;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:12px;padding:4px 10px;font-size:13px;font-weight:800}.level-banner-desc{color:#6b7280;margin:0 0 16px;font-size:14px;line-height:1.5}.level-progress-bar-bg{background:#e5e7eb;border-radius:8px;height:12px;position:relative;overflow:hidden}.level-progress-bar-fill{background:linear-gradient(90deg,#10b981,#059669);border-radius:8px;height:100%;transition:width .4s cubic-bezier(.4,0,.2,1)}.unit-section{margin-bottom:48px}.unit-header{color:#fff;border-radius:18px;justify-content:space-between;align-items:center;margin-bottom:30px;padding:20px 24px;display:flex;box-shadow:0 4px 10px #00000014}.unit-title{margin:0 0 6px;font-size:22px;font-weight:900}.unit-desc{opacity:.95;margin:0;font-size:14px;line-height:1.4}.unit-btn{color:#fff;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fff3;border:2px solid #fff;border-bottom-width:4px;border-radius:14px;padding:10px 18px;font-size:13px;font-weight:800;transition:all .15s}.unit-btn:hover{background:#ffffff4d}.unit-btn:active{border-bottom-width:2px;transform:translateY(2px)}.unit-path{flex-direction:column;align-items:center;gap:36px;display:flex;position:relative}.lesson-node-container{flex-direction:column;justify-content:center;align-items:center;width:120px;display:flex;position:relative}.path-line{background-color:var(--grey);z-index:0;border-radius:2px;width:4px;height:36px;position:absolute;top:72px;left:50%;transform:translate(-50%)}.lesson-node{z-index:10;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:74px;height:74px;transition:transform .15s;display:flex;position:relative}.lesson-node:active:not(.node-locked){transform:translateY(4px);box-shadow:inset 0 -4px #0000001a!important}.node-completed{box-shadow:inset 0 -8px #00000038}.node-current{box-shadow:inset 0 -8px 0 #0003, 0 0 0 4px white, 0 0 0 8px var(--grey);animation:2s infinite pulse}.node-locked{cursor:not-allowed;opacity:.85;box-shadow:inset 0 -8px #cbd5e1;background-color:#e5e7eb!important}.node-locked:active{transform:none}.lesson-title-label{color:#374151;text-align:center;max-width:130px;margin-top:8px;font-size:13px;font-weight:800;line-height:1.25}.floating-start{color:var(--green);border:2px solid var(--border);text-transform:uppercase;z-index:20;background-color:#fff;border-radius:10px;padding:6px 14px;font-size:13px;font-weight:800;animation:2s infinite bounce;position:absolute;top:-46px;box-shadow:0 4px 6px #0000000f}.triangle{border-bottom:2px solid var(--border);border-right:2px solid var(--border);background-color:#fff;width:10px;height:10px;position:absolute;bottom:-6px;left:50%;transform:translate(-50%)rotate(45deg)}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes pulse{0%{box-shadow:inset 0 -8px #0003,0 0 0 4px #fff,0 0 0 8px #e5e5e5}50%{box-shadow:inset 0 -8px #0003,0 0 0 4px #fff,0 0 0 12px #e5e5e580}to{box-shadow:inset 0 -8px #0003,0 0 0 4px #fff,0 0 0 8px #e5e5e5}}.guidebook-overlay{z-index:200;background:#00000080;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.guidebook-modal{background:#fff;border-radius:24px;flex-direction:column;width:100%;max-width:520px;max-height:85vh;display:flex;overflow:hidden;box-shadow:0 16px 36px #0003}.guidebook-header{color:#fff;padding:24px;position:relative}.guidebook-close-btn{color:#fff;cursor:pointer;background:#0003;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:background .2s;display:flex;position:absolute;top:16px;right:16px}.guidebook-close-btn:hover{background:#00000059}.guidebook-body{padding:24px;overflow-y:auto}.guidebook-lesson-item{background:#f9fafb;border:2px solid #e5e7eb;border-radius:14px;margin-bottom:12px;padding:14px 18px}.guidebook-lesson-title{color:var(--text);margin-bottom:4px;font-size:16px;font-weight:800}.guidebook-lesson-meta{color:#6b7280;font-size:13px}@media (width<=480px){.learn-container{padding:8px 4px 80px}.level-banner-card{padding:16px}.level-banner-header{flex-wrap:wrap;gap:8px}.unit-header{padding:16px}}.lesson-page{background-color:var(--bg);z-index:100;flex-direction:column;width:100vw;height:100dvh;display:flex;position:fixed;top:0;left:0}.lesson-header{align-items:center;gap:16px;width:100%;max-width:1056px;margin:0 auto;padding:24px;display:flex}.close-btn{border-radius:50%;padding:8px;transition:background-color .2s}.close-btn:hover{background-color:var(--grey)}.progress-bar-container{background-color:var(--grey);border-radius:8px;flex:1;height:16px;overflow:hidden}.progress-bar{background-color:var(--green);border-radius:8px;height:100%;transition:width .3s}.lesson-content{-webkit-overflow-scrolling:touch;box-sizing:border-box;flex-direction:column;flex:1;justify-content:flex-start;align-items:stretch;width:100%;max-width:680px;margin:0 auto;padding:16px 20px 36px;display:flex;overflow-y:auto}.question-title{color:var(--text);margin-bottom:20px;font-size:26px;font-weight:800;line-height:1.35}.listening-ui{justify-content:center;margin-bottom:48px;display:flex}.audio-btn{background-color:var(--blue);border-bottom:8px solid var(--blue-shadow);border-radius:24px;justify-content:center;align-items:center;width:150px;height:150px;transition:all .2s;display:flex}.audio-btn:active{border-bottom-width:4px;transform:translateY(4px)}.select-options{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;display:grid}.select-option{border:2px solid var(--border);border-bottom:4px solid var(--border);cursor:pointer;background-color:#fff;border-radius:16px;flex-direction:column;align-items:center;gap:16px;padding:24px;transition:all .2s;display:flex}.select-option:active{border-bottom-width:2px;transform:translateY(2px)}.select-selected{border-color:var(--blue);border-bottom-color:var(--blue-shadow);background-color:#ddf4ff}.option-image{font-size:64px}.option-text{color:var(--text);font-size:20px;font-weight:800}.translate-container{flex-direction:column;gap:32px;display:flex}.translate-answer-area{border-top:2px solid var(--border);border-bottom:2px solid var(--border);flex-wrap:wrap;align-content:flex-start;gap:12px;min-height:80px;padding:16px 0;display:flex}.translate-options-area{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.translate-word-btn{border:2px solid var(--border);border-bottom:4px solid var(--border);color:var(--text);cursor:pointer;background-color:#fff;border-radius:12px;padding:12px 20px;font-size:18px;font-weight:700;transition:all .2s}.translate-word-btn:active:not(:disabled){border-bottom-width:2px;transform:translateY(2px)}.translate-word-hidden{background-color:var(--grey);border-color:var(--grey);color:#0000;cursor:default}.lesson-footer{border-top:2px solid var(--border);background-color:#fff;padding:24px;transition:background-color .3s}.footer-correct{background-color:#d7ffb8;border-top-color:#b3ea81}.footer-correct .footer-message{color:var(--green-hover)}.footer-wrong{background-color:#ffdfe0;border-top-color:#ffb3b8}.footer-wrong .footer-message{color:var(--red-hover)}.footer-explore{background-color:#e0f2fe;border-top-color:#7dd3fc}.footer-explore .footer-message{color:#0369a1}.footer-content{justify-content:space-between;align-items:center;width:100%;max-width:1056px;margin:0 auto;display:flex}.footer-message h2{margin:0 0 6px;font-size:22px;font-weight:800}.footer-wrong-details{flex-direction:column;gap:8px;width:100%;margin-top:4px;display:flex}.footer-correct-answer-line{color:#991b1b;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px;font-weight:700;display:flex}.correct-answer-highlight{color:#15803d;background:#dcfce7;border:1.5px solid #86efac;border-radius:8px;padding:3px 10px;font-size:16px;font-weight:800}.footer-status-title-row{align-items:center;gap:12px;margin-bottom:8px;display:flex}.footer-status-icon{font-size:26px;line-height:1}.footer-status-headline{margin:0;font-size:20px;font-weight:800;line-height:1.25}.footer-status-headline.wrong-headline{color:#b91c1c}.footer-status-headline.correct-headline{color:#15803d}.footer-status-sub{color:#991b1b;margin:4px 0 0;font-size:13.5px;font-weight:600}.vocab-feedback-card{border-radius:16px;margin-top:6px;padding:14px 16px}.vocab-feedback-wrong{background:#fffffffa;border:1.5px solid #fca5a5;box-shadow:0 4px 14px #ef444414}.vocab-feedback-correct{background:#fffffffa;border:1.5px solid #86efac;box-shadow:0 4px 14px #22c55e14}.vocab-feedback-title{text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px;font-size:12px;font-weight:800}.vocab-feedback-wrong .vocab-feedback-title{color:#991b1b}.vocab-feedback-correct .vocab-feedback-title{color:#15803d}.vocab-feedback-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;display:grid}.vocab-entry-card{border-radius:12px;flex-direction:column;gap:6px;padding:10px 14px;display:flex}.user-choice-card{background:#fff5f5;border:1.5px solid #fecaca;border-left:4px solid #ef4444}.correct-choice-card{background:#f0fdf4;border:1.5px solid #bbf7d0;border-left:4px solid #10b981}.vocab-badge-row{justify-content:space-between;align-items:center;gap:6px;display:flex}.vocab-tag{text-transform:uppercase;letter-spacing:.3px;border-radius:6px;padding:2px 8px;font-size:10.5px;font-weight:800}.user-tag{color:#b91c1c;background:#fee2e2;border:1px solid #fca5a5}.correct-tag{color:#15803d;background:#dcfce7;border:1px solid #86efac}.vocab-category-tag{color:#64748b;background:#f1f5f9;border-radius:4px;padding:2px 6px;font-size:10.5px;font-weight:700}.vocab-word-display{align-items:center;gap:8px;display:flex}.vocab-emoji{font-size:20px;line-height:1}.vocab-term{color:#0f172a;font-size:16px;font-weight:800}.vocab-meaning-text{color:#334155;font-size:13px;line-height:1.5}.vocab-trans{color:#1e293b;font-weight:600}.vocab-ms-desc{color:#64748b;margin-top:2px;font-size:12px;font-style:italic}.vocab-context-hint-box{color:#92400e;white-space:pre-line;background:#fffbeb;border:1px solid #fef3c7;border-left:3.5px solid #f59e0b;border-radius:8px;margin-top:8px;padding:8px 12px;font-size:13px;line-height:1.5}.vocab-correct-concept-box{color:#166534;white-space:pre-line;background:#f0fdf4;border:1px solid #bbf7d0;border-left:3.5px solid #10b981;border-radius:8px;margin-top:8px;padding:10px 14px;font-size:13.5px;line-height:1.55}.select-option.option-attempted,.translate-word-btn.option-attempted{text-decoration:line-through;color:#991b1b!important;opacity:.6!important;cursor:not-allowed!important;background:#fff1f2!important;border-color:#fca5a5 #fca5a5 #f87171!important}.attempted-cross{margin-left:6px;font-size:12px;display:inline-block;text-decoration:none!important}.check-btn{min-width:150px}.footer-action-col{flex-direction:column;flex-shrink:0;align-items:stretch;gap:8px;display:flex}.return-explore-btn{color:#15803d;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff;border:2px solid #86efac;border-bottom:4px solid #22c55e;border-radius:12px;justify-content:center;align-items:center;gap:6px;padding:8px 16px;font-family:inherit;font-size:14px;font-weight:800;transition:all .15s;display:inline-flex;box-shadow:0 2px 6px #0000000a}.return-explore-btn:hover{background:#f0fdf4;border-color:#4ade80}.return-explore-btn:active{border-bottom-width:2px;transform:translateY(2px)}.return-summary-btn{color:#0369a1;letter-spacing:.5px;cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff;border:2px solid #7dd3fc;border-bottom:4px solid #0284c7;border-radius:12px;justify-content:center;align-items:center;gap:6px;padding:8px 14px;font-family:inherit;font-size:13px;font-weight:800;transition:all .15s;display:inline-flex}.return-summary-btn:hover{background:#f0f9ff;border-color:#38bdf8}.return-summary-btn:active{border-bottom-width:2px;transform:translateY(2px)}.explore-mode-banner{text-align:left;background:#eff6ff;border:1.5px solid #bfdbfe;border-left:4px solid #3b82f6;border-radius:12px;flex-direction:column;gap:4px;margin-bottom:16px;padding:10px 14px;display:flex}.explore-mode-header{color:#1d4ed8;align-items:center;gap:8px;font-size:14px;font-weight:800;display:flex}.explore-mode-desc{color:#1e40af;margin:0;font-size:13px;line-height:1.4}.explore-vocab-card-wrap{width:100%;max-width:650px;margin:16px auto 0}.vocab-feedback-explore{background:#fffffffa;border:1.5px solid #93c5fd;box-shadow:0 4px 14px #3b82f614}.vocab-feedback-explore .vocab-feedback-title{color:#1d4ed8}.explore-choice-card{background:#f0f9ff;border:1.5px solid #bae6fd;border-left:4px solid #0284c7}.explore-tag{color:#0369a1;background:#e0f2fe;border:1px solid #7dd3fc}.explore-speaker-btn{color:#0284c7;cursor:pointer;vertical-align:middle;background:#e0f2fe;border:1.5px solid #38bdf8;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;margin-left:6px;transition:all .15s;display:inline-flex}.explore-speaker-btn:hover{background:#bae6fd}.explore-speaker-btn:active{transform:scale(.92)}.placeholder-text{text-align:center;color:#888;font-size:20px;font-weight:700}.speaker-mini-btn{border:2px solid var(--blue);border-bottom:3px solid var(--blue-shadow);width:38px;height:38px;color:var(--blue);cursor:pointer;vertical-align:middle;background:#ddf4ff;border-radius:50%;justify-content:center;align-items:center;margin-left:10px;transition:all .15s;display:inline-flex}.speaker-mini-btn:active{border-bottom-width:1px;transform:translateY(2px)}.fill-blank-container{flex-direction:column;gap:28px;width:100%;display:flex}.fill-blank-sentence-box{border:2px solid var(--border);color:var(--text);background:#fff;border-radius:18px;flex-wrap:wrap;align-items:center;gap:10px;padding:24px;font-size:22px;font-weight:700;line-height:1.6;display:flex;box-shadow:0 4px 10px #00000005}.fill-blank-dialogue-box{border:2px solid var(--border);border-bottom:4px solid var(--border-dark,#cbd5e1);box-sizing:border-box;background:#fff;border-radius:20px;flex-direction:column;width:100%;display:flex;overflow:hidden;box-shadow:0 4px 14px #00000008}.dialogue-turn-row{box-sizing:border-box;flex-wrap:wrap;align-items:center;gap:12px 16px;width:100%;padding:18px 22px;transition:background-color .2s;display:flex}.dialogue-turn-row:not(:last-child){border-bottom:2px dashed #e2e8f0}.dialogue-turn-row.turn-prompt{background-color:#f8fafc}.dialogue-turn-row.turn-active-blank{background-color:#fff}.dialogue-speaker-pill{letter-spacing:.3px;-webkit-user-select:none;user-select:none;border:2px solid #e2e8f0;border-radius:14px;flex-shrink:0;align-items:center;gap:6px;padding:6px 14px;font-size:15px;font-weight:800;line-height:1;display:inline-flex;box-shadow:0 2px 4px #00000008}.dialogue-speaker-avatar{font-size:18px;line-height:1}.dialogue-speaker-name{font-weight:800}.dialogue-speech-flow{color:var(--text);white-space:pre-wrap;flex-wrap:wrap;flex:1;align-items:center;gap:8px 10px;min-width:0;font-size:21px;font-weight:700;line-height:1.5;display:inline-flex}.dialogue-text{color:#1e293b;word-break:break-word}.blank-slot{-webkit-user-select:none;user-select:none;border-radius:14px;justify-content:center;align-items:center;min-width:100px;height:48px;padding:4px 18px;font-size:19px;font-weight:800;transition:all .15s;display:inline-flex}.blank-slot.empty{color:#9ca3af;cursor:default;background:#f3f4f6;border:2px dashed #9ca3af}.blank-slot.filled{border:2px solid var(--blue);border-bottom:4px solid var(--blue-shadow);color:var(--blue);cursor:pointer;background:#ddf4ff}.blank-slot.filled:active{border-bottom-width:2px;transform:translateY(2px)}.fill-blank-options-area{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.match-container{flex-direction:column;gap:20px;width:100%;display:flex}.match-grid{grid-template-columns:1fr 1fr;gap:16px;width:100%;display:grid}.match-col{flex-direction:column;gap:14px;display:flex}.match-card{border:2px solid var(--border);border-bottom:4px solid var(--border);min-height:60px;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center;background:#fff;border-radius:16px;justify-content:center;align-items:center;padding:14px 12px;font-size:17px;font-weight:800;transition:all .15s;display:flex}.match-card:active:not(.matched){border-bottom-width:2px;transform:translateY(2px)}.match-card.selected{border-color:var(--blue);border-bottom-color:var(--blue-shadow);color:var(--blue);background-color:#ddf4ff}.match-card.matched{border-color:var(--green);color:var(--green-hover);cursor:default;opacity:.65;background-color:#d7ffb8;border-bottom-color:#b3ea81}.match-card.error{border-color:var(--red);color:var(--red-hover);background-color:#ffdfe0;border-bottom-color:#ffb3b8;animation:.4s matchShake}@keyframes matchShake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.context-content{flex-direction:column;justify-content:flex-start;max-width:680px;margin:0 auto;padding:16px 20px 80px;display:flex}.context-card{border:2px solid var(--border);border-bottom:5px solid var(--border);background:#fff;border-radius:24px;padding:28px;box-shadow:0 8px 24px #0000000a}.context-hero{align-items:center;gap:16px;margin-bottom:22px;display:flex}.context-avatar{background:#f3f4f6;border:2px solid #e5e7eb;border-radius:20px;flex-shrink:0;justify-content:center;align-items:center;width:72px;height:72px;font-size:42px;line-height:1;display:flex}.context-hero-text{flex-direction:column;gap:4px;display:flex}.context-badge-tag{color:#059669;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:12px;align-items:center;gap:6px;width:fit-content;padding:3px 10px;font-size:13px;font-weight:800;display:inline-flex}.context-main-title{color:var(--text);margin:0;font-size:24px;font-weight:900}.context-main-subtitle{color:#6b7280;margin:0;font-size:14px}.context-passage-box{background:#f9fafb;border:2px solid #e5e7eb;border-radius:18px;margin-bottom:20px;padding:22px}.context-passage-header-tag{align-items:center;margin-bottom:12px;display:flex}.context-passage-lang-badge{letter-spacing:.5px;text-transform:uppercase;color:#166534;background:#dcfce7;border:1px solid #bbf7d0;border-radius:6px;padding:3px 10px;font-size:11.5px;font-weight:800;display:inline-block}.context-passage-text{color:#1f2937;margin:0 0 16px;font-size:19px;font-weight:600;line-height:1.7}.context-translation-box{border:1.5px solid #bae6fd;border-left:4px solid var(--blue);background:#f0f7ff;border-radius:14px;margin:0 0 18px;padding:14px 18px}.context-translation-header{align-items:center;margin-bottom:6px;display:flex}.context-translation-badge{letter-spacing:.4px;text-transform:uppercase;color:#0369a1;background:#e0f2fe;border:1px solid #bae6fd;border-radius:6px;padding:3px 10px;font-size:12px;font-weight:800}.context-translation-text{color:#1e3a8a;margin:0;font-size:16px;font-weight:600;line-height:1.65}.context-audio-btn{border:2px solid var(--blue);border-bottom:4px solid var(--blue-shadow);color:var(--blue);cursor:pointer;background:#ddf4ff;border-radius:14px;align-items:center;gap:8px;padding:10px 18px;font-size:15px;font-weight:800;transition:all .15s;display:inline-flex}.context-audio-btn:active{border-bottom-width:2px;transform:translateY(2px)}.context-examples-container{background:#fffbeb;border:2px solid #fef3c7;border-radius:16px;margin-top:16px;padding:18px}.context-examples-header{color:#92400e;margin:0 0 12px;font-size:16px;font-weight:800}.context-examples-list{flex-direction:column;gap:8px;display:flex}.context-example-item{color:#374151;align-items:center;gap:10px;font-size:16px;font-weight:700;display:flex}.context-example-bullet{color:#fff;background:#f59e0b;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;font-weight:800;display:flex}.context-start-btn{min-width:240px}.context-screen-header-badge{color:#4b5563;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:12px;padding:6px 14px;font-size:14px;font-weight:800}.header-context-reopen-btn{border:2px solid var(--border);border-bottom:3px solid var(--border);color:var(--text);cursor:pointer;background:#fff;border-radius:12px;align-items:center;gap:6px;margin-right:8px;padding:6px 12px;font-size:13px;font-weight:800;transition:all .15s;display:inline-flex}.header-context-reopen-btn:active{border-bottom-width:1px;transform:translateY(2px)}.context-reference-banner{box-sizing:border-box;background:#fff;border:2px solid #e2e8f0;border-bottom:4px solid #cbd5e1;border-radius:18px;width:100%;margin-top:4px;margin-bottom:20px;padding:14px 16px;box-shadow:0 4px 14px #00000008}.context-ref-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.context-ref-title-wrap{flex-wrap:wrap;flex:1;align-items:center;gap:8px;min-width:180px;display:flex}.context-ref-avatar{font-size:18px;line-height:1}.context-ref-badge-tag{color:#475569;text-transform:uppercase;letter-spacing:.3px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:3px 8px;font-size:11px;font-weight:800}.context-ref-title-text{color:#1e293b;font-size:14.5px;font-weight:800}.context-ref-actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.context-ref-btn{color:#334155;cursor:pointer;background:#f8fafc;border:1.5px solid #cbd5e1;border-bottom:2.5px solid #94a3b8;border-radius:10px;align-items:center;gap:5px;padding:6px 12px;font-size:12px;font-weight:800;transition:all .15s;display:inline-flex}.context-ref-btn:hover{background:#f1f5f9}.context-ref-btn:active{border-bottom-width:1.5px;transform:translateY(1px)}.context-ref-btn-label{font-size:12px}.context-ref-toggle-btn{color:#1d4ed8;background:#eff6ff;border-color:#93c5fd #93c5fd #3b82f6}.context-ref-toggle-btn:hover{background:#dbeafe}.context-ref-body{border-top:1px solid #e2e8f0;flex-direction:column;gap:12px;max-height:320px;margin-top:12px;padding-top:12px;padding-right:4px;display:flex;overflow-y:auto}.context-ref-body::-webkit-scrollbar{width:6px}.context-ref-body::-webkit-scrollbar-track{background:#f1f5f9;border-radius:6px}.context-ref-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:6px}.context-ref-passage-card{background:#f8fafc;border:1.5px solid #e2e8f0;border-left:4px solid #10b981;border-radius:12px;padding:12px 16px}.context-ref-card-header{margin-bottom:6px}.context-ref-lang-badge{letter-spacing:.4px;text-transform:uppercase;color:#047857;background:#d1fae5;border:1px solid #a7f3d0;border-radius:6px;padding:2px 8px;font-size:11px;font-weight:800;display:inline-block}.context-ref-lang-badge.en-badge{color:#1d4ed8;background:#dbeafe;border-color:#bfdbfe}.context-ref-passage-text{color:#0f172a;margin:0;font-size:15.5px;font-weight:600;line-height:1.65}.context-ref-translation-card{border:1.5px solid #bfdbfe;border-left:4px solid var(--blue);background:#eff6ff;border-radius:12px;padding:12px 16px}.context-ref-trans-text{color:#1e3a8a;margin:0;font-size:14.5px;font-weight:600;line-height:1.6}.context-ref-keywords-bar{flex-direction:column;gap:6px;display:flex}.context-ref-kw-label{color:#64748b;text-transform:uppercase;letter-spacing:.4px;font-size:11.5px;font-weight:800}.context-ref-kw-scroll{flex-wrap:wrap;gap:6px;display:flex}.context-ref-kw-pill{color:#334155;cursor:pointer;background:#fff;border:1.5px solid #cbd5e1;border-radius:8px;align-items:center;gap:6px;padding:4px 8px;font-size:12px;font-weight:600;transition:all .15s;display:inline-flex}.context-ref-kw-pill:hover{border-color:var(--blue);background:#f1f5f9}.context-ref-examples-section{background:#fffbeb;border:1px solid #fef3c7;border-radius:10px;padding:8px 12px}.context-ref-ex-header{color:#92400e;text-transform:uppercase;margin-bottom:6px;font-size:11px;font-weight:800;display:block}.context-ref-examples{flex-wrap:wrap;gap:6px;display:flex}.context-ref-ex-pill{color:#78350f;background:#fff;border:1px solid #fde68a;border-radius:6px;padding:3px 8px;font-size:12px;font-weight:700}.question-context-hint{color:#0284c7;background:#f0f9ff;border:1px solid #bae6fd;border-radius:10px;width:100%;margin-bottom:18px;padding:8px 14px;font-size:14px}.context-keywords-section{background:#fff;border:2px solid #e2e8f0;border-radius:20px;margin-bottom:24px;padding:18px 20px;box-shadow:0 4px 14px #00000008}.context-section-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;display:flex}.context-section-title-wrap{align-items:center;gap:10px;display:flex}.context-section-badge{color:#b45309;background:#fef3c7;border:1px solid #fde68a;border-radius:10px;padding:3px 10px;font-size:13px;font-weight:800}.context-section-title{color:var(--text);margin:0;font-size:18px;font-weight:900}.context-keywords-toggle-btn{border:2px solid var(--border);border-bottom:3px solid var(--border);color:var(--text);cursor:pointer;background:#fff;border-radius:12px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:800;transition:all .15s;display:inline-flex}.context-keywords-toggle-btn:hover{border-color:var(--blue);color:var(--blue);background:#f8fafc}.context-keywords-toggle-btn:active{border-bottom-width:1.5px;transform:translateY(2px)}.context-keywords-instruction{color:#64748b;margin:0 0 16px;font-size:13px;font-weight:600}.flashcards-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;display:grid}@media (width<=480px){.flashcards-grid{grid-template-columns:repeat(2,1fr);gap:10px}}.flashcard{perspective:1000px;cursor:pointer;-webkit-user-select:none;user-select:none;height:172px;position:relative}.flashcard-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .4s cubic-bezier(.34,1.56,.64,1);position:relative}.flashcard.flipped .flashcard-inner{transform:rotateY(180deg)}.flashcard-face{backface-visibility:hidden;box-sizing:border-box;border-radius:16px;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:10px 8px;display:flex;position:absolute;top:0;left:0}.flashcard-front{border:2px solid var(--border);border-bottom:4px solid var(--border);z-index:2;background:#fff;transition:border-color .15s,opacity .2s;transform:rotateY(0)}.flashcard:hover .flashcard-front{border-color:var(--blue)}.flashcard-front:active{border-bottom-width:2px;transform:translateY(2px)}.flashcard-back{border:2px solid var(--blue);border-bottom:4px solid var(--blue-shadow);z-index:1;background:#f0f9ff;transition:opacity .2s;transform:rotateY(180deg)}.flashcard.flipped .flashcard-front{opacity:0;pointer-events:none;z-index:1}.flashcard.flipped .flashcard-back{opacity:1;pointer-events:auto;z-index:2}.flashcard:not(.flipped) .flashcard-back{opacity:0;pointer-events:none}.flashcard:not(.flipped) .flashcard-front{opacity:1;pointer-events:auto}.flashcard-top{justify-content:space-between;align-items:center;width:100%;display:flex}.flashcard-emoji{font-size:24px;line-height:1}.flashcard-speaker-btn{color:#475569;cursor:pointer;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;transition:all .15s;display:flex}.flashcard-speaker-btn:hover{color:var(--blue);border-color:var(--blue);background:#ddf4ff}.flashcard-speaker-btn.back-speaker{color:var(--blue);border-color:var(--blue);background:#fff}.flashcard-word{color:var(--text);text-align:center;margin:4px 0;font-size:18px;font-weight:900}.flashcard-hint{color:#94a3b8;text-align:center;font-size:11px;font-weight:700}.flashcard-back-orig{color:#0284c7;white-space:nowrap;text-overflow:ellipsis;text-align:right;max-width:70%;font-size:12px;font-weight:800;overflow:hidden}.flashcard-middle-content{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:5px;width:100%;min-height:0;padding:2px 0;display:flex}.flashcard-translation{color:#0369a1;text-align:center;word-break:break-word;margin:0;font-size:14px;font-weight:900;line-height:1.25}.flashcard-usage-desc{color:#0284c7;text-align:center;box-sizing:border-box;background:#0284c714;border:1px solid #0284c738;border-radius:6px;width:100%;padding:3px 5px;font-size:10px;font-weight:700;line-height:1.25}.flashcard-back-label{color:#0284c7;text-align:center;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;font-size:9.5px;font-weight:800;line-height:1}@media (width<=768px){.lesson-header{gap:10px;padding:14px 16px}.header-context-reopen-btn{padding:5px 10px;font-size:12px}.lesson-content{padding:14px 16px 32px}.context-card{border-radius:20px;padding:20px 16px}.context-hero{gap:12px}.context-avatar{border-radius:16px;width:56px;height:56px;font-size:32px}.context-main-title{font-size:20px}.context-passage-box{border-radius:16px;padding:16px}.context-passage-text{font-size:17px}.context-translation-box{padding:12px 14px}.context-translation-text{font-size:14.5px}.lesson-footer{padding:16px}}@media (width<=520px){.lesson-header{gap:8px;padding:10px 12px}.close-btn{padding:4px}.header-context-reopen-btn{gap:4px;padding:4px 8px;font-size:11.5px}.header-context-reopen-btn span{font-size:11px}.progress-bar-container{height:12px}.lesson-content{padding:10px 12px 28px}.question-title{margin-bottom:14px;font-size:20px;line-height:1.3}.context-reference-banner{border-radius:14px;margin-bottom:14px;padding:10px 12px}.context-ref-header{gap:8px}.context-ref-title-wrap{min-width:unset;gap:6px}.context-ref-title-text{font-size:13.5px}.context-ref-actions{justify-content:flex-end;width:100%;margin-top:2px}.context-ref-btn{padding:5px 10px;font-size:11px}.context-ref-body{gap:8px;max-height:250px}.context-ref-passage-card,.context-ref-translation-card{border-radius:10px;padding:10px 12px}.context-ref-passage-text{font-size:14px;line-height:1.55}.context-ref-trans-text{font-size:13.5px;line-height:1.5}.context-ref-kw-pill{padding:3px 7px;font-size:11px}.context-ref-ex-pill{padding:2px 6px;font-size:11px}.word-token{padding:8px 12px;font-size:15px}.lesson-footer{padding:12px 14px}.footer-message h2{font-size:18px}.footer-content{gap:8px}.fill-blank-dialogue-box{border-radius:16px}.dialogue-turn-row{gap:10px 12px;padding:14px}.dialogue-speech-flow{gap:6px 8px;font-size:17.5px}.dialogue-speaker-pill{border-radius:10px;padding:4px 10px;font-size:13px}.dialogue-speaker-avatar{font-size:15px}.blank-slot{min-width:80px;height:42px;padding:2px 12px;font-size:17px}}.auth-container{background-color:#fff;justify-content:center;align-items:center;width:100%;min-height:100vh;display:flex}.auth-card{text-align:center;border:2px solid #e5e5e5;border-radius:16px;width:100%;max-width:400px;padding:32px;box-shadow:0 4px #e5e5e5}.auth-title{color:#58cc02;letter-spacing:-1px;margin-bottom:8px;font-size:32px;font-weight:800}.auth-subtitle{color:#4b4b4b;margin-bottom:24px;font-size:18px;font-weight:700}.auth-form{flex-direction:column;gap:16px;display:flex}.auth-input{color:#4b4b4b;box-sizing:border-box;background-color:#f7f7f7;border:2px solid #e5e5e5;border-radius:12px;width:100%;padding:12px 16px;font-family:inherit;font-size:16px;transition:all .2s}.auth-input:focus{background-color:#fff;border-color:#1cb0f6;outline:none}.auth-submit{width:100%;margin-top:8px}.auth-error{color:#ff4b4b;background-color:#ffebf0;border-radius:8px;margin-bottom:16px;padding:12px;font-size:14px;font-weight:700}.auth-toggle{color:#777;margin-top:24px;font-size:15px;font-weight:700}.auth-link{color:#1cb0f6;cursor:pointer}.auth-link:hover{filter:brightness(.9)}.profile-container{width:100%;max-width:600px;margin:0 auto;padding:24px}.profile-content{flex-direction:column;gap:32px;display:flex}.profile-title{color:#4b4b4b;text-align:center;border-bottom:2px solid #e5e5e5;padding-bottom:24px;font-size:28px;font-weight:800}.profile-section{flex-direction:column;gap:16px;display:flex}.section-title{color:#a1a1a1;letter-spacing:.8px;font-size:17px;font-weight:800}.info-card,.management-card{background-color:#fff;border:2px solid #e5e5e5;border-radius:16px}.info-row{border-bottom:2px solid #e5e5e5;justify-content:space-between;padding:16px 20px;display:flex}.info-row:last-child{border-bottom:none}.info-label{color:#4b4b4b;font-size:16px;font-weight:700}.info-value{color:#777;font-size:16px;font-weight:700}.logged-in{color:#58cc02}.logout-button{width:100%;margin-top:8px}.management-action{justify-content:space-between;align-items:center;gap:16px;padding:20px;display:flex}.action-text h3{color:#4b4b4b;margin:0 0 4px;font-size:16px;font-weight:700}.action-text p{color:#777;margin:0;font-size:14px;line-height:1.4}.management-separator{background-color:#e5e5e5;height:2px;margin:0 20px}.leaderboard-container{flex-direction:column;align-items:center;gap:20px;width:100%;max-width:600px;margin:0 auto;padding:32px 16px 80px;display:flex}.leaderboard-header-card{text-align:center;border:2px solid var(--border);border-bottom:5px solid var(--border);background:#fff;border-radius:24px;flex-direction:column;align-items:center;width:100%;padding:28px 24px;display:flex;box-shadow:0 4px 14px #00000008}.leaderboard-badge-icon{background:#fef9c3;border:2px solid #fde047;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin-bottom:12px;display:flex}.leaderboard-title{color:var(--text);margin:0 0 6px;font-size:26px;font-weight:800}.leaderboard-subtitle{color:#64748b;margin:0;font-size:14.5px;font-weight:600}.leaderboard-list{flex-direction:column;gap:10px;width:100%;display:flex}.leaderboard-loading,.leaderboard-empty{text-align:center;color:#64748b;border:2px solid var(--border);background:#fff;border-radius:18px;padding:32px;font-weight:700}.leaderboard-row{border:2px solid var(--border);border-bottom:4px solid var(--border);background:#fff;border-radius:18px;justify-content:space-between;align-items:center;padding:14px 18px;transition:all .15s;display:flex}.leaderboard-row:hover{transform:translateY(-1px)}.current-user-row{background:#f0fdf4;border-color:#86efac #86efac #4ade80}.row-left{align-items:center;gap:14px;display:flex}.rank-badge{border-radius:8px;justify-content:center;align-items:center;gap:3px;min-width:40px;padding:4px 8px;font-size:15px;font-weight:900;display:inline-flex}.rank-badge.gold{color:#854d0e;background:#fef08a;border:1.5px solid #facc15}.rank-badge.silver{color:#475569;background:#e2e8f0;border:1.5px solid #cbd5e1}.rank-badge.bronze{color:#9a3412;background:#ffedd5;border:1.5px solid #fdba74}.rank-number{color:#64748b;justify-content:center;align-items:center;min-width:40px;font-size:16px;font-weight:800;display:inline-flex}.avatar-circle{color:#0284c7;background:#e0f2fe;border:2px solid #bae6fd;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;font-size:18px;font-weight:800;display:flex}.username-wrap{align-items:center;gap:8px;display:flex}.username-text{color:var(--text);font-size:16px;font-weight:800}.you-pill{color:#166534;text-transform:uppercase;background:#bbf7d0;border-radius:6px;padding:2px 8px;font-size:11px;font-weight:800}.row-right{align-items:center;gap:6px;display:flex}.xp-text{color:#854d0e;font-size:15px;font-weight:800}.quests-container{flex-direction:column;align-items:center;gap:20px;width:100%;max-width:640px;margin:0 auto;padding:32px 16px 80px;display:flex}.quests-header-card{text-align:center;border:2px solid var(--border);border-bottom:5px solid var(--border);background:#fff;border-radius:24px;flex-direction:column;align-items:center;width:100%;padding:28px 24px;display:flex;box-shadow:0 4px 14px #00000008}.quests-badge-icon{background:#eff6ff;border:2px solid #bfdbfe;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin-bottom:12px;display:flex}.quests-title{color:var(--text);margin:0 0 6px;font-size:26px;font-weight:800}.quests-subtitle{color:#64748b;margin:0;font-size:14.5px;font-weight:600}.quests-list{flex-direction:column;gap:14px;width:100%;display:flex}.quest-card{border:2px solid var(--border);border-bottom:4px solid var(--border);background:#fff;border-radius:20px;flex-direction:column;gap:14px;padding:18px 20px;transition:all .15s;display:flex}.quest-card.quest-done{background:#f0fdf4;border-color:#86efac #86efac #4ade80}.quest-top{align-items:flex-start;gap:16px;display:flex}.quest-icon-wrap{border:1.5px solid;border-radius:16px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.quest-details{flex-direction:column;flex:1;gap:4px;display:flex}.quest-title-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.quest-name{color:var(--text);margin:0;font-size:17px;font-weight:800}.quest-done-tag{color:#166534;background:#bbf7d0;border-radius:6px;align-items:center;gap:4px;padding:2px 8px;font-size:11.5px;font-weight:800;display:inline-flex}.quest-desc{color:#64748b;margin:0;font-size:13.5px;line-height:1.45}.quest-reward-pill{color:#1e40af;background:#dbeafe;border:1px solid #bfdbfe;border-radius:10px;flex-shrink:0;padding:5px 12px;font-size:12.5px;font-weight:800}.quest-progress-area{align-items:center;gap:14px;display:flex}.quest-progress-bar-bg{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;flex:1;height:12px;overflow:hidden}.quest-progress-bar-fill{border-radius:999px;height:100%;transition:width .3s}.quest-count{color:#64748b;text-align:right;min-width:45px;font-size:13px;font-weight:800}.app-container{width:100%;min-height:100vh;display:flex;overflow-x:hidden}.main-content{flex:1;justify-content:center;min-width:0;padding-left:256px;display:flex}.main-wrapper{width:100%;min-width:0;max-width:1056px;padding:24px}@media (width<=768px){.main-content{padding-bottom:80px;padding-left:0}.main-wrapper{padding:16px 12px}}:root{--green:#58cc02;--green-hover:#46a302;--green-shadow:#58a700;--blue:#1cb0f6;--blue-hover:#1899d6;--blue-shadow:#1185ba;--red:#ff4b4b;--red-hover:#ea2b2b;--red-shadow:#ea2b2b;--grey:#e5e5e5;--grey-hover:#d5d5d5;--grey-shadow:#b7b7b7;--dark-grey:#4b4b4b;--dark-grey-hover:#373737;--border:#e5e5e5;--bg:#fff;--text:#3c3c3c}*{box-sizing:border-box;margin:0;padding:0;font-family:Nunito,sans-serif}html,body{background-color:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;max-width:100%;overflow-x:hidden}button{cursor:pointer;background:0 0;border:none;font-family:Nunito,sans-serif}a{color:inherit;text-decoration:none}.flex{display:flex}.flex-col{flex-direction:column;display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-1{flex:1}.w-full{width:100%}.h-full{height:100%}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#e5e5e5;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#d5d5d5}