.navigation{position:sticky;top:0;z-index:50;width:100%;background:#fffffff2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid #e8f2f2}.nav-container{max-width:1280px;margin:0 auto;padding:0 1.5rem;height:64px;display:flex;align-items:center;justify-content:space-between}.nav-logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;cursor:pointer;z-index:60}.logo-icon{width:32px;height:32px;background:var(--primary);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px #25d0ca4d;transition:transform .2s}.nav-logo:hover .logo-icon{transform:scale(1.05)}.logo-icon .material-symbols-outlined{font-size:20px}.logo-text{font-size:1.25rem;font-weight:700;color:var(--text-main);letter-spacing:-.02em}.logo-accent{color:var(--primary)}.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;background:transparent;border:none;cursor:pointer;z-index:60;padding:8px}.hamburger span{display:block;width:22px;height:2px;background:var(--text-main);border-radius:2px;transition:all .3s ease}.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}.nav-links{display:flex;align-items:center;gap:.25rem}.nav-link{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:#64748b;text-decoration:none;border-radius:9999px;transition:all .2s}.nav-link .material-symbols-outlined{font-size:18px;display:none}.nav-link:hover{color:var(--primary);background:#25d0ca0d}.nav-link.active{color:var(--primary);background:#25d0ca1a;font-weight:600}.user-profile{display:flex;align-items:center;gap:.75rem}.user-info{display:flex;flex-direction:column;align-items:flex-end}.user-name{font-size:.75rem;font-weight:700;color:var(--text-main)}.user-role{font-size:.625rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}.user-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary) 0%,#1ea8a3 100%);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 2px 8px #0000001a}.user-avatar .material-symbols-outlined{font-size:24px}@media (max-width: 768px){.nav-container{padding:0 1rem;height:56px}.hamburger{display:flex}.nav-links{position:fixed;top:0;left:0;right:0;bottom:0;background:#fffffffa;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex-direction:column;justify-content:center;align-items:center;gap:1rem;opacity:0;visibility:hidden;transition:all .3s ease;z-index:55}.nav-links.open{opacity:1;visibility:visible}.nav-link{font-size:1.25rem;padding:1rem 2rem;width:80%;justify-content:center;border-radius:1rem;background:#f8fafc}.nav-link .material-symbols-outlined{display:inline-flex;font-size:24px}.nav-link.active{background:#25d0ca26}.user-info,.user-profile{display:none}.logo-text{font-size:1.1rem}}@media (min-width: 769px) and (max-width: 1024px){.nav-link{padding:.4rem .75rem;font-size:.8rem}}.curriculum-unit-filter{margin-bottom:1rem}.filter-title{font-size:.875rem;font-weight:600;color:#64748b;margin-bottom:.75rem}.filter-controls{display:flex;flex-wrap:wrap;gap:.75rem}.filter-group{position:relative}.filter-label{font-size:.75rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;display:none}.multi-select-dropdown{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.625rem 1rem;min-width:180px;background:#fff;border:none;border-bottom:4px solid #e2e8f0;border-radius:.5rem;font-size:.875rem;font-weight:600;color:#475569;cursor:pointer;transition:all .2s;box-shadow:0 1px 2px #00000005;-webkit-user-select:none;user-select:none}.multi-select-dropdown:hover{background-color:#f8fafc}.multi-select-dropdown.open{border-color:var(--primary, #25d0ca)}.dropdown-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-arrow{font-size:1.25rem;color:#94a3b8;transition:transform .2s}.multi-select-dropdown.open .dropdown-arrow{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:100;min-width:100%;max-height:300px;overflow-y:auto;background:#fff;border-radius:.5rem;box-shadow:0 10px 40px #00000026;padding:.5rem 0;animation:dropdownFadeIn .15s ease-out}.dropdown-menu.units-menu{min-width:280px;max-height:400px}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{display:flex;align-items:center;gap:.75rem;padding:.625rem 1rem;font-size:.875rem;color:#475569;cursor:pointer;transition:background .15s}.dropdown-item:hover{background:#f1f5f9}.dropdown-item input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--primary, #25d0ca);cursor:pointer}.dropdown-item.select-all,.dropdown-item.select-all-units{font-weight:600;color:#334155}.dropdown-divider{height:1px;background:#e2e8f0;margin:.5rem 0}.curriculum-group{border-bottom:1px solid #e2e8f0;padding-bottom:.5rem;margin-bottom:.5rem}.curriculum-group:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}.curriculum-header{position:sticky;top:0;background:#fff;z-index:1}.curriculum-name{font-weight:700;color:var(--primary-dark, #1a9994)}.units-list{padding-left:.5rem}.unit-item{font-size:.8125rem;color:#64748b}.unit-item:hover{color:#475569}.filter-summary{margin-top:.75rem;display:flex;flex-direction:column;gap:.5rem}.summary-chips{display:flex;flex-wrap:wrap;gap:.5rem}.chip{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .5rem .25rem .75rem;background:#f1f5f9;border-radius:9999px;font-size:.75rem;font-weight:500;color:#475569;animation:chipFadeIn .2s ease-out}@keyframes chipFadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.chip.curriculum-chip{background:#25d0ca1a;color:var(--primary-dark, #1a9994)}.chip.unit-chip{background:#8b5cf61a;color:#7c3aed}.chip-remove{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:transparent;border:none;border-radius:50%;cursor:pointer;transition:background .15s}.chip-remove:hover{background:#0000001a}.chip-remove .material-symbols-outlined{font-size:.875rem}.filter-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.625rem 2.5rem .625rem 1rem;background:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;background-size:1rem;border:none;border-bottom:4px solid #e2e8f0;border-radius:.5rem;font-size:.875rem;font-weight:600;color:#475569;cursor:pointer;transition:all .2s;min-width:180px;box-shadow:0 1px 2px #00000005}.filter-select:hover{background-color:#f8fafc}.filter-select:focus{outline:none;border-color:var(--primary)}.unit-info{margin-top:.75rem;padding:.5rem .75rem;background:#25d0ca0d;border-radius:.375rem;font-size:.875rem;color:#475569}.unit-info strong{color:var(--primary-dark)}@media (max-width: 640px){.filter-controls{flex-direction:column}.multi-select-dropdown,.dropdown-menu{width:100%}.dropdown-menu.units-menu{min-width:unset}.filter-select{width:100%}}.flashcard-page{max-width:900px;margin:0 auto;min-height:calc(100vh - 120px);display:flex;flex-direction:column}.flashcard-header{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:3rem}@media (min-width: 768px){.flashcard-header{flex-direction:row;justify-content:space-between;align-items:flex-end}}.filter-section{display:flex;gap:.75rem}.progress-section{display:flex;flex-direction:column;gap:.5rem;min-width:200px}.progress-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b}.progress-count{font-size:.875rem;font-weight:700;color:var(--text-main);text-align:right}.progress-count .of{font-weight:400;color:#94a3b8}.progress-bar{height:10px;background:#e2e8f0;border-radius:9999px;overflow:hidden}.progress-fill{height:100%;background:var(--primary);border-radius:9999px;transition:width .3s ease}.flashcard-area{flex:1;display:flex;align-items:center;justify-content:center;min-height:350px;margin-bottom:2rem}.flashcard{position:relative;width:100%;max-width:640px;aspect-ratio:4 / 2.5;perspective:1000px;cursor:pointer}.flashcard-front,.flashcard-back{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;border-radius:1.5rem;border-bottom:12px solid #e2e8f0;box-shadow:0 20px 25px -5px #0000000d,0 10px 10px -5px #00000005;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;backface-visibility:hidden;transition:transform .5s ease,box-shadow .3s ease}.flashcard:hover .flashcard-front,.flashcard:hover .flashcard-back{transform:translateY(-4px)}.flashcard-back{transform:rotateY(180deg)}.flashcard.flipped .flashcard-front{transform:rotateY(-180deg)}.flashcard.flipped .flashcard-back{transform:rotateY(0)}.flashcard.flipped:hover .flashcard-front{transform:rotateY(-180deg) translateY(-4px)}.flashcard.flipped:hover .flashcard-back{transform:rotateY(0) translateY(-4px)}.hint-badge{position:absolute;top:1.5rem;right:1.5rem;z-index:10;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#fef3c7;color:#b45309;border:none;border-radius:9999px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:background .2s}.hint-badge:hover{background:#fde68a}.hint-badge .material-symbols-outlined{font-size:16px}.card-icon{width:64px;height:64px;background:#f8fafc;border-radius:1rem;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.card-icon .material-symbols-outlined{font-size:36px;color:var(--primary)}.card-text-main{font-size:3rem;font-weight:800;color:var(--text-main);letter-spacing:-.02em;text-align:center;margin-bottom:.5rem}.card-text-main.english{color:var(--primary-dark)}.card-hint{font-size:1rem;color:#94a3b8;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.card-example{font-size:.95rem;color:#64748b;font-style:italic;text-align:center;margin:1rem 0;max-width:400px}.pronounce-btn-card{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#25d0ca1a;color:var(--primary-dark);border:none;border-radius:.5rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:background .2s;margin-bottom:.5rem}.pronounce-btn-card:hover{background:#25d0ca33}.pronounce-btn-card .material-symbols-outlined{font-size:18px}.pronounce-btn-card:disabled,.spell-btn:disabled{opacity:.5;cursor:not-allowed}.spell-buttons{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:.5rem}.spell-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#6366f11a;color:#4f46e5;border:none;border-radius:.5rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.spell-btn:hover:not(:disabled){background:#6366f133;transform:translateY(-1px)}.spell-btn.phonics{background:#ec48991a;color:#db2777}.spell-btn.phonics:hover:not(:disabled){background:#ec489933}.spell-btn .material-symbols-outlined{font-size:18px}.letter-char{display:inline-block;padding:0 .05em;transition:all .2s ease;border-radius:.25rem}.letter-highlight{background:linear-gradient(135deg,#818cf8,#6366f1);color:#fff!important;transform:scale(1.15);padding:.1em .15em;margin:0 .05em;box-shadow:0 4px 12px #6366f166;animation:letterPop .3s ease}.phonics-highlight{background:linear-gradient(135deg,#f472b6,#ec4899);color:#fff!important;transform:scale(1.15);padding:.1em .15em;margin:0 .05em;box-shadow:0 4px 12px #ec489966;animation:letterPop .3s ease}@keyframes letterPop{0%{transform:scale(1);opacity:.5}50%{transform:scale(1.25)}to{transform:scale(1.15);opacity:1}}.card-gradient{position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(to right,transparent,rgba(37,208,202,.2),transparent);border-radius:0 0 1.5rem 1.5rem}.flashcard-controls{display:flex;align-items:center;justify-content:space-between;max-width:640px;margin:0 auto 2rem;width:100%}.control-btn{display:flex;flex-direction:column;align-items:center;gap:.25rem;background:none;border:none;cursor:pointer;width:64px}.control-btn.secondary>.material-symbols-outlined{width:48px;height:48px;background:#fff;border-radius:.75rem;border-bottom:4px solid #e2e8f0;display:flex;align-items:center;justify-content:center;font-size:24px;color:#94a3b8;transition:all .2s}.control-btn:hover>.material-symbols-outlined{color:var(--primary);border-color:#25d0ca4d}.control-btn:active>.material-symbols-outlined{border-bottom-width:0;transform:translateY(4px)}.control-label{font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;opacity:0;transition:opacity .2s}.control-btn:hover .control-label{opacity:1}.main-controls{display:flex;align-items:center;gap:1rem}.nav-btn{width:56px;height:56px;background:#fff;border:none;border-radius:1rem;border-bottom:6px solid #e2e8f0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .1s}.nav-btn .material-symbols-outlined{font-size:28px;color:#475569}.nav-btn:hover{background:#f8fafc}.nav-btn:active{border-bottom-width:0;transform:translateY(6px)}.flip-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;height:64px;padding:0 2.5rem;background:var(--primary);color:#fff;border:none;border-radius:1rem;border-bottom:6px solid var(--primary-shade);font-size:1.125rem;font-weight:700;cursor:pointer;box-shadow:0 4px 12px #25d0ca33;transition:all .1s}.flip-btn:hover{filter:brightness(1.05)}.flip-btn:active{border-bottom-width:0;transform:translateY(6px)}.flip-btn .material-symbols-outlined{font-size:24px}.keyboard-hints{display:flex;justify-content:center;gap:1.5rem;font-size:.75rem;color:#94a3b8}.keyboard-hints span{display:flex;align-items:center;gap:.5rem}.keyboard-hints kbd{display:inline-flex;align-items:center;justify-content:center;padding:.25rem .5rem;background:#f1f5f9;border:none;border-radius:.25rem;border-bottom:2px solid #e2e8f0;font-family:inherit;font-size:.75rem;font-weight:600}@media (max-width: 768px){.flashcard-page{padding:0 .5rem}.flashcard{aspect-ratio:4 / 3}.card-text-main{font-size:2rem}.flashcard-controls{gap:.5rem}.flip-btn{padding:0 1.5rem;font-size:1rem}.nav-btn{width:48px;height:48px}.control-btn{width:48px}.control-btn.secondary>.material-symbols-outlined{width:40px;height:40px;font-size:20px}.control-label,.keyboard-hints{display:none}.spell-buttons{gap:.375rem}.spell-btn{padding:.375rem .75rem;font-size:.75rem}.spell-btn .material-symbols-outlined{font-size:16px}.pronounce-btn-card{padding:.375rem .75rem;font-size:.75rem}.letter-highlight,.phonics-highlight{transform:scale(1.1);padding:.05em .1em}}.word-matching-page{max-width:900px;margin:0 auto;min-height:calc(100vh - 120px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem}.game-card{width:100%;background:#fff;border-radius:1.5rem;box-shadow:0 8px 30px -4px #00000014;border:1px solid rgba(0,0,0,.04);overflow:hidden;position:relative}.blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}.blob-primary{top:-80px;right:-80px;width:320px;height:320px;background:#25d0ca0d}.blob-secondary{bottom:-80px;left:-80px;width:320px;height:320px;background:#f8d36a1a}.toast-notification{position:absolute;top:1.5rem;right:1.5rem;z-index:20;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:.75rem;box-shadow:0 4px 12px #0000001a;animation:float 3s ease-in-out infinite;transform:rotate(2deg)}@keyframes float{0%,to{transform:rotate(2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-5px)}}.toast-icon{width:28px;height:28px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center}.toast-icon .material-symbols-outlined{font-size:18px;color:#16a34a}.toast-title{font-size:.875rem;font-weight:700;color:#16a34a}.toast-subtitle{font-size:.75rem;color:#16a34a;opacity:.8}.game-header{position:relative;padding:2rem;border-bottom:1px solid #f1f5f9;display:flex;flex-direction:column;gap:1.5rem}@media (min-width: 768px){.game-header{flex-direction:row;align-items:flex-end;justify-content:space-between}}.score-section{display:flex;flex-direction:column;gap:.5rem}.score-label{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b}.score-label .material-symbols-outlined{font-size:18px;color:#f59e0b}.score-value{font-size:1.875rem;font-weight:800;color:var(--text-main)}.score-divider{color:#e2e8f0}.progress-section{flex:1;max-width:400px}.progress-header{display:flex;justify-content:space-between;font-size:.75rem;font-weight:600;color:#64748b;margin-bottom:.5rem}.progress-bar{height:16px;background:#f1f5f9;border-radius:9999px;padding:4px;box-shadow:inset 0 1px 2px #0000000d}.progress-fill{height:100%;background:var(--primary);border-radius:9999px;position:relative;overflow:hidden;transition:width .3s ease}.progress-stripes{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-size:1rem 1rem;animation:stripes 3s linear infinite}@keyframes stripes{0%{background-position:0 0}to{background-position:1rem 0}}.definition-section{position:relative;padding:2rem 2rem 1.5rem;text-align:center}.definition-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .75rem;background:#f8fafc;border:1px solid #f1f5f9;border-radius:9999px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;margin-bottom:1rem}.definition-badge .material-symbols-outlined{font-size:14px}.definition-text{font-size:1.5rem;font-weight:700;color:var(--text-main);line-height:1.4;margin-bottom:.75rem}.vietnamese-hint{font-size:1rem;color:var(--primary);font-weight:500;font-style:italic}.construction-zone{background:#f8fafc;border:2px dashed #e2e8f0;border-radius:1rem;margin:0 2rem 1.5rem;padding:2rem}.letter-slots{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}.letter-slot{width:56px;height:64px;background:#fff;border:2px solid #e2e8f0;border-bottom-width:4px;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1.75rem;font-weight:700;color:#cbd5e1;transition:all .2s}.letter-slot.filled{background:var(--primary);border-color:var(--primary-shade);color:#fff;animation:pop .3s cubic-bezier(.175,.885,.32,1.275)}.letter-slot.correct{background:#22c55e;border-color:#16a34a}.letter-slot.incorrect{background:#ef4444;border-color:#dc2626;animation:shake .5s ease}@keyframes pop{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.scrambled-letters{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;padding:0 2rem 2rem}.letter-btn{width:56px;height:56px;background:#fff;border:1px solid #e2e8f0;border-bottom:6px solid #e2e8f0;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:#475569;cursor:pointer;transition:all .1s}.letter-btn:hover:not(:disabled){background:#f8fafc}.letter-btn:active:not(:disabled){transform:translateY(6px);border-bottom-width:0}.letter-btn.used{background:#f1f5f9;border-color:#e2e8f0;color:#cbd5e1;transform:scale(.95);opacity:.5;cursor:not-allowed}.game-footer{display:flex;flex-direction:column;gap:1rem;padding:1.5rem 2rem;background:#f8fafc;border-top:1px solid #f1f5f9}@media (min-width: 640px){.game-footer{flex-direction:row;justify-content:space-between;align-items:center}}.footer-actions{display:flex;gap:1rem;justify-content:flex-end}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:.75rem;font-size:.875rem;font-weight:700;border:none;cursor:pointer;transition:all .1s}.btn-hint{background:#fef3c7;color:#b45309;border-bottom:6px solid #f59e0b}.btn-hint:hover{filter:brightness(1.05)}.btn-hint:active{transform:translateY(6px);border-bottom-width:0}.btn-reset{background:transparent;color:#64748b}.btn-reset:hover{color:var(--text-main)}.btn-check{background:#e2e8f0;color:#94a3b8;border-bottom:4px solid #cbd5e1}.btn-check:disabled{cursor:not-allowed}.hint-panel{padding:1.5rem 2rem;background:#fffbeb;border-top:1px solid #fef3c7}.game-tip{margin-top:2rem;text-align:center;font-size:.875rem;color:#94a3b8}.loading-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;color:var(--text-muted);gap:1rem;padding:4rem 2rem}@media (max-width: 640px){.game-header,.definition-section,.construction-zone,.scrambled-letters,.game-footer{padding-left:1rem;padding-right:1rem}.construction-zone{margin-left:1rem;margin-right:1rem}.letter-slot{width:48px;height:56px;font-size:1.5rem}.letter-btn{width:48px;height:48px;font-size:1.25rem}.definition-text{font-size:1.25rem}}.fill-in-blank-page{max-width:1200px;margin:0 auto;min-height:calc(100vh - 120px)}.fill-layout{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}@media (min-width: 1024px){.fill-layout{grid-template-columns:1fr 360px}}.exercise-area{display:flex;flex-direction:column;gap:2rem}.mode-toggle{display:flex;justify-content:center}.toggle-container{display:inline-flex;background:#e2e8f0;padding:6px;border-radius:.75rem;box-shadow:inset 0 1px 2px #0000000d}.toggle-btn{padding:.625rem 1.5rem;background:transparent;border:none;border-radius:.5rem;font-size:.875rem;font-weight:500;color:#64748b;cursor:pointer;transition:all .2s}.toggle-btn.active{background:#fff;color:var(--primary-dark);font-weight:700;box-shadow:0 1px 3px #0000001a}.toggle-btn:hover:not(.active){color:var(--text-main)}.exercise-card{background:#fff;border-radius:1.5rem;box-shadow:0 4px 20px -2px #0000000d;border:1px solid rgba(0,0,0,.04);padding:2rem 2.5rem;position:relative;overflow:hidden}.card-blob{position:absolute;top:-80px;right:-80px;width:256px;height:256px;background:#25d0ca0d;border-radius:50%;filter:blur(60px);pointer-events:none;transition:background .5s}.exercise-card:hover .card-blob{background:#25d0ca1a}.prompt-section{text-align:center;margin-bottom:3rem;position:relative;z-index:1}.translate-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .75rem;background:#eff6ff;border-radius:9999px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#3b82f6;margin-bottom:1rem}.translate-badge .material-symbols-outlined{font-size:14px}.prompt-text{font-size:2rem;font-weight:700;color:var(--text-main);line-height:1.3;margin-bottom:1rem}.prompt-instruction{font-size:.875rem;color:#64748b}.word-builder{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:.25rem;font-size:1.75rem;font-weight:500;color:var(--text-main);margin-bottom:2rem;position:relative;z-index:1}.letter-static{padding:0 2px}.letter-input{width:40px;height:48px;background:#f8fafc;border:none;border-bottom:4px solid #e2e8f0;border-radius:.5rem;text-align:center;font-size:1.75rem;font-weight:700;color:var(--primary);caret-color:var(--primary);outline:none;transition:all .2s;margin:0 2px}.letter-input:focus{transform:translateY(-2px);border-color:var(--primary);box-shadow:0 4px 12px #25d0ca33}.letter-input.error{border-color:#ef4444;color:#ef4444;animation:shake .5s ease}.letter-input.success{border-color:#22c55e;color:#22c55e}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}.hint-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;background:transparent;border:none;padding:.5rem 1rem;font-size:.875rem;font-weight:600;color:#94a3b8;cursor:pointer;transition:color .2s;margin:0 auto;position:relative;z-index:1}.hint-btn:hover{color:var(--primary)}.hint-icon{width:32px;height:32px;background:#f1f5f9;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s}.hint-btn:hover .hint-icon{background:#25d0ca1a}.hint-icon .material-symbols-outlined{font-size:18px}.hint-panel{margin-top:1.5rem;padding:1rem 1.5rem;background:#fffbeb;border-radius:.75rem;border:1px solid #fef3c7}.hint-panel p{font-size:.875rem;color:#78716c;margin-bottom:.5rem}.hint-panel p:last-child{margin-bottom:0}.hint-panel strong{color:#b45309}.sidebar{display:flex;flex-direction:column;gap:1.5rem}.stats-card{background:#fff;border-radius:1rem;box-shadow:0 4px 20px -2px #0000000d;border:1px solid rgba(0,0,0,.04);padding:1.5rem}.stats-title{display:flex;align-items:center;gap:.5rem;font-size:1.125rem;font-weight:700;color:var(--text-main);margin-bottom:1.5rem}.stats-title .material-symbols-outlined{color:var(--primary)}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}.stat-box{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;background:#f8fafc;border-radius:.75rem;border:1px solid #f1f5f9;position:relative}.stat-box.streak{background:#fff7ed;border-color:#ffedd5}.stat-value{font-size:1.875rem;font-weight:800;color:var(--primary)}.stat-box.streak .stat-value{color:#f97316}.stat-label{font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;margin-top:.25rem}.stat-box.streak .stat-label{color:#fb923c}.stat-icon{position:absolute;top:4px;right:4px;font-size:48px;color:#f97316;opacity:.1}.daily-progress{display:flex;align-items:center;gap:1rem;padding:1rem;background:#f8fafc;border-radius:.75rem}.progress-circle{position:relative;width:48px;height:48px;flex-shrink:0}.progress-circle svg{width:100%;height:100%;transform:rotate(-90deg)}.progress-bg{stroke:#e2e8f0}.progress-value{stroke:var(--primary);stroke-linecap:round;transition:stroke-dashoffset .5s ease}.progress-percent{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:700;color:#475569}.progress-info{flex:1}.progress-title{font-size:.875rem;font-weight:700;color:var(--text-main)}.progress-subtitle{font-size:.75rem;color:#64748b}.actions-card{background:#fff;border-radius:1rem;box-shadow:0 4px 20px -2px #0000000d;border:1px solid rgba(0,0,0,.04);padding:1.5rem;position:sticky;top:6rem}.btn-check-answer{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem 1.5rem;background:var(--primary);color:#fff;border:none;border-radius:.75rem;font-size:1rem;font-weight:700;cursor:pointer;box-shadow:0 4px 12px #25d0ca33;transition:all .2s}.btn-check-answer:hover:not(:disabled){background:var(--primary-dark)}.btn-check-answer:active:not(:disabled){transform:scale(.98)}.btn-check-answer:disabled{opacity:.6;cursor:not-allowed}.btn-skip{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;background:transparent;color:#94a3b8;border:none;border-radius:.75rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s;margin-top:1rem}.btn-skip:hover{color:#475569;background:#f8fafc}.feedback-card{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-radius:.75rem;font-size:.875rem;font-weight:600}.feedback-card .material-symbols-outlined{font-size:20px}.feedback-card.correct{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}.feedback-card.incorrect{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}.loading-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center;color:var(--text-muted);gap:1rem;padding:4rem 2rem}.loading-state .material-symbols-outlined,.empty-state .material-symbols-outlined{font-size:64px;color:#cbd5e1}.empty-state h2{font-size:1.5rem;font-weight:700;color:var(--text-main)}@media (max-width: 768px){.fill-in-blank-page{padding:0 .5rem}.exercise-card{padding:1.5rem}.prompt-text,.word-builder{font-size:1.5rem}.letter-input{width:36px;height:44px;font-size:1.5rem}.sidebar{order:-1}}.vocabulary-importer{max-width:1200px;margin:0 auto;padding-bottom:6rem}.page-header{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}@media (min-width: 768px){.page-header{flex-direction:row;align-items:flex-end;justify-content:space-between}}.header-content h1{font-size:1.875rem;font-weight:800;color:var(--text-main);letter-spacing:-.02em;margin-bottom:.5rem}.header-content p{color:var(--text-muted);font-size:.95rem;max-width:32rem}.daily-goal{display:flex;align-items:center;gap:.75rem;background:#fff;padding:.75rem 1rem;border-radius:9999px;box-shadow:0 1px 3px #0000000d;border:1px solid #f1f1f1}.goal-progress{width:6rem;height:8px;background:#f1f5f9;border-radius:9999px;overflow:hidden}.goal-bar{height:100%;background:var(--primary);border-radius:9999px}.goal-text{font-size:.75rem;font-weight:700;color:#475569}.upload-zone{position:relative;background:#fff;border-radius:1rem;border:2px dashed #d1d5db;padding:3rem 2rem;margin-bottom:2rem;cursor:pointer;transition:all .3s ease;overflow:hidden}.upload-zone:hover{border-color:var(--primary)}.upload-zone.drag-active{border-color:var(--primary);background:#25d0ca05}.upload-zone-glow{position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;background:linear-gradient(to right,var(--primary),#60a5fa);border-radius:1rem;opacity:0;filter:blur(8px);transition:opacity .3s;z-index:-1}.upload-zone:hover .upload-zone-glow{opacity:.15}.upload-zone-pattern{position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(var(--primary) 1px,transparent 1px);background-size:20px 20px;opacity:.03;pointer-events:none}.upload-zone-content{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1}.upload-icon{width:64px;height:64px;background:#25d0ca1a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;transition:transform .3s}.upload-zone:hover .upload-icon{transform:scale(1.1)}.upload-icon .material-symbols-outlined{font-size:32px;color:var(--primary)}.upload-zone-content h3{font-size:1.125rem;font-weight:700;color:var(--text-main);margin-bottom:.5rem}.upload-zone-content p{font-size:.875rem;color:var(--text-muted);margin-bottom:1.5rem}.file-type{font-weight:500;color:var(--primary)}.browse-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:var(--primary);color:#fff;font-size:.875rem;font-weight:700;border-radius:.5rem;cursor:pointer;box-shadow:0 4px 12px #25d0ca40;transition:all .2s}.browse-btn:hover{background:var(--primary-dark);transform:translateY(-1px)}.browse-btn:active{transform:scale(.98)}.browse-btn .material-symbols-outlined{font-size:18px}.message{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-radius:.75rem;margin-bottom:1.5rem;font-weight:500;font-size:.875rem}.message .material-symbols-outlined{font-size:20px}.message.error{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}.message.success{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}.data-dashboard{background:#fff;border-radius:1.5rem;box-shadow:0 4px 20px #00000008;border:1px solid #f1f5f9;overflow:hidden}.dashboard-toolbar{padding:1.25rem 1.5rem;border-bottom:1px solid #f1f5f9;display:flex;flex-direction:column;gap:1rem}@media (min-width: 640px){.dashboard-toolbar{flex-direction:row;align-items:center;justify-content:space-between}}.toolbar-left{display:flex;align-items:center;gap:.75rem}.status-icon{width:40px;height:40px;border-radius:50%;background:#dcfce7;display:flex;align-items:center;justify-content:center}.status-icon .material-symbols-outlined{font-size:24px;color:#16a34a}.status-info h2{font-size:1.125rem;font-weight:700;color:var(--text-main);margin-bottom:.25rem}.status-badge{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-muted)}.badge{display:inline-flex;align-items:center;padding:.25rem .5rem;background:#25d0ca1a;color:var(--primary-dark);border-radius:.25rem;font-weight:600}.search-container{display:flex;align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;padding:.5rem .75rem;flex:1;max-width:320px;position:relative;transition:all .2s;margin:0 1rem}.search-container:focus-within{background:#fff;border-color:var(--primary);box-shadow:0 0 0 3px #25d0ca1a}.search-icon{font-size:20px;color:#94a3b8;margin-right:.5rem}.search-input{border:none;background:transparent;width:100%;font-size:.875rem;color:var(--text-main);outline:none}.search-input::placeholder{color:#94a3b8}.clear-search-btn{background:none;border:none;padding:0;cursor:pointer;color:#94a3b8;display:flex;align-items:center;justify-content:center;margin-left:.5rem}.clear-search-btn:hover{color:#64748b}.clear-search-btn .material-symbols-outlined{font-size:18px}.toolbar-actions{display:flex;gap:.75rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1rem;font-size:.875rem;font-weight:600;border-radius:.5rem;border:none;cursor:pointer;transition:all .2s}.btn .material-symbols-outlined{font-size:18px}.btn-sample{background:#f8d36a33;color:#b45309}.btn-sample:hover{background:#f8d36a4d}.btn-clear{background:#f1f5f9;color:#64748b}.btn-clear:hover:not(:disabled){background:#fef2f2;color:#dc2626}.btn-clear:disabled{opacity:.5;cursor:not-allowed}.table-container{overflow-x:auto}.vocab-table{width:100%;border-collapse:collapse;text-align:left}.vocab-table thead{background:#f8fafc80;border-bottom:1px solid #f1f5f9}.vocab-table th{padding:1rem 1.5rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b}.vocab-table th:first-child{width:16%}.vocab-table th:nth-child(2){width:16%}.vocab-table th:nth-child(3){width:34%}.vocab-table th:nth-child(4){width:34%}.vocab-table tbody tr{border-bottom:1px solid #f8fafc;transition:background .15s}.vocab-table tbody tr:hover{background:#3b82f605}.vocab-table td{padding:1rem 1.5rem;vertical-align:top}.word-cell .word-content{display:flex;align-items:flex-start;gap:.5rem}.word-text{font-size:1rem;font-weight:700;color:var(--text-main)}.pronounce-btn{background:none;border:none;padding:.25rem;cursor:pointer;color:#94a3b8;transition:color .2s;display:flex;align-items:center;justify-content:center}.pronounce-btn:hover{color:var(--primary)}.pronounce-btn .material-symbols-outlined{font-size:16px}.part-of-speech{display:block;font-size:.75rem;color:#94a3b8;font-style:italic;margin-top:.25rem}.vietnamese-text{display:inline-block;padding:.25rem .5rem;background:#25d0ca0d;color:var(--primary-dark);border-radius:.375rem;font-weight:500;font-size:.875rem}.definition-cell p{font-size:.875rem;color:#475569;line-height:1.6}.example-cell .example-text{font-size:.875rem;color:#64748b;font-style:italic;border-left:2px solid #e2e8f0;padding-left:.75rem;line-height:1.6}.no-example{color:#cbd5e1}.table-footer{padding:1rem;background:#f8fafc80;border-top:1px solid #f1f5f9;display:flex;justify-content:center}.show-more-btn{display:inline-flex;align-items:center;gap:.25rem;background:none;border:none;padding:.5rem 1rem;font-size:.875rem;font-weight:700;color:var(--primary);cursor:pointer;transition:color .2s}.show-more-btn:hover{color:var(--primary-dark)}.show-more-btn .material-symbols-outlined{font-size:18px}.loading-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;color:var(--text-muted);gap:1rem}.loading-state .material-symbols-outlined,.empty-state .material-symbols-outlined{font-size:48px;color:#cbd5e1}.spinning{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.start-learning-container{position:sticky;bottom:2rem;display:flex;justify-content:center;padding-top:2rem;z-index:40}.start-learning-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem 3rem;background:var(--text-main);color:#fff;font-size:1.125rem;font-weight:700;border-radius:9999px;text-decoration:none;box-shadow:0 8px 24px #00000026;transition:all .3s;overflow:hidden}.start-learning-btn:hover{background:#000;transform:translateY(-2px)}.start-learning-btn:hover .material-symbols-outlined{transform:translate(4px)}.start-learning-btn .material-symbols-outlined{font-size:20px;transition:transform .3s}.btn-glow{position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;background:linear-gradient(to right,var(--primary),#60a5fa);border-radius:9999px;filter:blur(12px);opacity:0;transition:opacity .3s;z-index:-1}.start-learning-btn:hover .btn-glow{opacity:.3}@media (max-width: 768px){.vocabulary-importer{padding-bottom:5rem}.header-content h1{font-size:1.5rem}.upload-zone{padding:2rem 1.5rem}.vocab-table th,.vocab-table td{padding:.75rem 1rem}.toolbar-actions{width:100%}.search-container{max-width:100%;margin:0 0 1rem}.toolbar-actions .btn{flex:1}}:root{--primary: #25d0ca;--primary-dark: #1da8a3;--primary-shade: #179F9B;--secondary: #F8D36A;--secondary-shade: #D4B04C;--background-light: #fafaf9;--surface-light: #ffffff;--text-main: #0f1a1a;--text-muted: #64748b;--border-light: #e8e8e8;--success: #22c55e;--error: #ef4444;--warning: #f59e0b}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--background-light);color:var(--text-main);min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;padding:2rem;max-width:1280px;margin:0 auto;width:100%}.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;vertical-align:middle}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:#cbd5e1;border-radius:20px}.btn-3d{transition:all .1s ease;transform:translateY(0)}.btn-3d:active{transform:translateY(4px);box-shadow:none!important}.shadow-soft{box-shadow:0 4px 20px -2px #0000000d}.shadow-card{box-shadow:0 2px 8px #0000000a}@media (max-width: 768px){.main-content{padding:1rem}}