.navigation{position:sticky;top:0;z-index:50;background:var(--bg-card);border-bottom:1px solid var(--border-light)}.nav-container{display:flex;align-items:center;gap:1rem;max-width:1180px;margin:0 auto;padding:.625rem 1.5rem}.nav-logo{display:inline-flex;align-items:center;gap:.625rem;text-decoration:none;flex:0 0 auto}.logo-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--primary);color:var(--on-primary);box-shadow:0 3px 0 var(--clay-600)}.logo-mark .material-symbols-outlined{font-size:1.375rem;font-variation-settings:"FILL" 1,"wght" 600}.logo-text{font-family:var(--font-display);font-size:1.3125rem;font-weight:800;letter-spacing:-.015em;color:var(--text-main)}.logo-accent{color:var(--primary)}.nav-links{display:flex;align-items:center;gap:.25rem;flex:1;justify-content:center}.nav-link{display:inline-flex;align-items:center;gap:.375rem;min-height:44px;padding:.5rem .75rem;border-radius:var(--radius-chip);font-family:var(--font-body);font-size:.9375rem;font-weight:600;color:var(--text-body);text-decoration:none;white-space:nowrap;transition:var(--transition-base)}.nav-link .material-symbols-outlined{font-size:1.25rem}.nav-link:hover{background:var(--bg-sunken);color:var(--text-main)}.nav-link.active{background:var(--primary-soft);color:var(--clay-700)}.dark .nav-link.active{color:var(--clay-400)}.nav-link.is-utility{margin-left:.5rem;padding-left:.875rem;border-left:1px solid var(--border-light);border-radius:0 var(--radius-chip) var(--radius-chip) 0;color:var(--text-muted)}.nav-controls{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}.streak-chip{display:inline-flex;align-items:center;gap:.25rem;height:36px;padding:0 .75rem;border-radius:var(--radius-pill);background:var(--sun-100);color:var(--warning);font-family:var(--font-display);font-size:1rem;font-weight:700}.streak-chip .material-symbols-outlined{font-size:1.25rem;font-variation-settings:"FILL" 1}.mode-toggle{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--border-light);border-radius:var(--radius-chip);background:var(--bg-card);color:var(--text-body);cursor:pointer;transition:var(--transition-base)}.mode-toggle:hover{background:var(--bg-sunken);color:var(--text-main)}.mode-toggle .material-symbols-outlined{font-size:1.375rem}.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 10px;border:1px solid var(--border-light);border-radius:var(--radius-chip);background:var(--bg-card);cursor:pointer}.hamburger span{display:block;height:2px;border-radius:2px;background:var(--text-main);transition:transform .2s ease,opacity .2s ease}.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}@media (max-width: 900px){.nav-container{flex-wrap:wrap;padding:.625rem 1rem}.hamburger{display:flex;order:3}.nav-controls{order:2;margin-left:auto}.nav-links{order:4;display:none;width:100%;flex-direction:column;align-items:stretch;gap:.125rem;padding:.5rem 0 .25rem;border-top:1px solid var(--border-light);margin-top:.5rem}.nav-links.open{display:flex}.nav-link{min-height:48px;padding:.625rem .875rem;font-size:1rem}.nav-link.is-utility{margin-left:0;padding-left:.875rem;border-left:none;border-top:1px solid var(--border-light);border-radius:var(--radius-chip);margin-top:.25rem}}.path{padding:1.25rem 1.25rem 1.5rem;margin-bottom:1rem}.path-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;padding-bottom:.875rem;margin-bottom:.5rem;border-bottom:1px solid var(--border-light)}.path-title{font-family:var(--font-display);font-size:1.375rem;font-weight:700;color:var(--text-main)}.path-meta{display:flex;align-items:center;gap:.75rem;font-size:.9375rem;font-weight:500;color:var(--text-muted)}.path-badge-count{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .6rem;border-radius:var(--radius-pill);background:var(--sun-100);color:var(--warning);font-weight:600}.path-badge-count .material-symbols-outlined{font-size:1.125rem}.path-list{list-style:none;display:flex;flex-direction:column;gap:.375rem}.path-step{position:relative;padding-left:calc(var(--step-offset, 0) * 18px);transition:padding-left .2s ease}.path-step:before{content:"";position:absolute;left:calc(var(--step-offset, 0) * 18px + 27px);top:-.375rem;height:.375rem;border-left:2px dotted var(--line)}.path-step:first-child:before{display:none}.path-step-btn{display:flex;align-items:center;gap:.875rem;width:100%;min-height:56px;padding:.625rem .875rem;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-button);font-family:var(--font-body);text-align:left;cursor:pointer;transition:var(--transition-base)}.path-step-btn:hover{border-color:var(--primary);background:var(--primary-soft)}.path-node{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--line);background:var(--bg-sunken);color:var(--text-muted);font-family:var(--font-display);font-size:1.125rem;font-weight:700}.path-node .material-symbols-outlined{font-size:1.375rem;font-variation-settings:"wght" 700}.path-step.is-done .path-node{background:var(--success);border-color:var(--success);color:#fff}.dark .path-step.is-done .path-node{color:var(--on-primary)}.path-step.is-in-progress .path-node{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}.path-step.is-in-progress .path-step-btn{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}.path-step-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}.path-step-title{font-family:var(--font-display);font-size:1.0625rem;font-weight:600;color:var(--text-main);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.path-step-sub{font-size:.8125rem;color:var(--text-muted)}.path-step-bar{display:block;height:6px;border-radius:var(--radius-pill);background:var(--bg-sunken);overflow:hidden}.path-step-bar>span{display:block;height:100%;border-radius:var(--radius-pill);background:var(--primary);transition:width .3s ease}.path-step.is-done .path-step-bar>span{background:var(--success)}.path-step-pct{flex:0 0 auto;min-width:3rem;text-align:right;font-family:var(--font-display);font-size:.9375rem;font-weight:700;color:var(--text-muted)}.path-step.is-done .path-step-pct{color:var(--success)}.path-step.is-in-progress .path-step-pct{color:var(--primary)}@media (max-width: 640px){.path-step{padding-left:0}.path-step:before{left:27px}.path-step-pct{display:none}}.dashboard{display:flex;flex-direction:column;gap:1.5rem}.dashboard-loading{padding:4rem 0;text-align:center;font-size:1.125rem;color:var(--text-muted)}.dash-empty{padding:3rem 2rem;text-align:center}.dash-empty h1{font-family:var(--font-display);font-size:1.75rem;margin-bottom:.5rem}.dash-empty p{color:var(--text-muted);margin-bottom:1.5rem}.dash-top{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:1.25rem;align-items:stretch}.dash-today{display:flex;flex-direction:column;align-items:flex-start;padding:1.75rem;border-radius:var(--radius-card);background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-card)}.dash-today .eyebrow{color:var(--on-primary);opacity:.78}.dash-today-title{font-family:var(--font-display);font-size:clamp(1.625rem,2.6vw,2.125rem);font-weight:800;line-height:1.15;margin:.5rem 0}.dash-today-sub{font-size:1rem;opacity:.9;margin-bottom:auto;padding-bottom:1.5rem}.dash-today-sub strong{font-weight:700}.dash-start{background:var(--bg-card);color:var(--primary);box-shadow:0 4px 0 var(--clay-600);text-decoration:none}.dash-start:hover{background:var(--bg-card);filter:brightness(.97)}.dash-start .material-symbols-outlined{font-size:1.25rem}.dash-total{padding:1.5rem}.dash-total-figure{display:flex;align-items:baseline;gap:.5rem;margin:.375rem 0 .875rem}.dash-total-figure strong{font-family:var(--font-display);font-size:2.75rem;font-weight:800;line-height:1;color:var(--text-main)}.dash-total-figure span{font-size:1rem;color:var(--text-muted)}.dash-total-bar{height:12px;border-radius:var(--radius-pill);background:var(--bg-sunken);overflow:hidden}.dash-total-bar>span{display:block;height:100%;border-radius:var(--radius-pill);background:var(--success);transition:width .4s ease}.dash-total-note{margin-top:.5rem;font-size:.8125rem;color:var(--text-muted)}.dash-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border-light)}.dash-stat{display:flex;flex-direction:column;gap:.125rem}.dash-stat-value{font-family:var(--font-display);font-size:1.5rem;font-weight:800;line-height:1.1;color:var(--warning)}.dash-stat-label{font-size:.8125rem;color:var(--text-muted)}.dash-week{padding:1.25rem 1.5rem 1.375rem}.dash-week-days{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;margin:.75rem 0 .625rem}.dash-day{display:flex;flex-direction:column;align-items:center;gap:.375rem}.dash-day-label{font-size:.8125rem;font-weight:600;color:var(--text-muted)}.dash-day-mark{width:100%;height:34px;border-radius:var(--radius-chip);border:2px dashed var(--line);background:transparent}.dash-day.is-studied .dash-day-mark{border-style:solid;border-color:var(--success);background:var(--success)}.dash-day.is-today .dash-day-mark{outline:2px solid var(--warning);outline-offset:2px}.dash-day-points{font-size:.8125rem;font-weight:600;color:var(--text-muted)}.dash-day.is-studied .dash-day-points{color:var(--success)}.dash-week-note{font-size:.8125rem;color:var(--text-muted)}.dash-section-head{margin-bottom:.875rem}.dash-section-head h2{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--text-main)}.dash-section-head p{font-size:.9375rem;color:var(--text-muted)}.dash-mode-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.875rem}.dash-mode{display:flex;flex-direction:column;gap:.25rem;min-height:116px;padding:1.125rem;text-decoration:none;color:inherit;transition:var(--transition-base)}.dash-mode:hover{border-color:var(--primary);background:var(--primary-soft);transform:translateY(-2px)}.dash-mode-icon{font-size:1.75rem;color:var(--primary);margin-bottom:.25rem}.dash-mode-label{font-family:var(--font-display);font-size:1.125rem;font-weight:700;color:var(--text-main)}.dash-mode-hint{font-size:.8125rem;color:var(--text-muted)}.dash-parent{padding:1rem 1.25rem;border-radius:var(--radius-button);border:1px solid var(--border-light);background:var(--sun-050);font-size:.9375rem;color:var(--text-body)}.dash-parent a{color:var(--clay-700);font-weight:600}.dark .dash-parent a{color:var(--clay-400)}@media (max-width: 900px){.dash-top{grid-template-columns:1fr}.dash-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 560px){.dash-today{padding:1.375rem}.dash-start{width:100%}.dash-badges{grid-template-columns:1fr;gap:.75rem}.dash-stat{flex-direction:row;align-items:baseline;gap:.5rem}}.curriculum-unit-filter{margin-bottom:1rem}.filter-title{font-family:var(--font-display),sans-serif;font-size:1rem;font-weight:700;color:var(--text-main);margin-bottom:.75rem}.filter-controls{display:flex;flex-wrap:wrap;gap:.75rem}.filter-group{position:relative}.filter-label{font-family:var(--font-body),sans-serif;font-size:.8125rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;display:none}.multi-select-dropdown{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:44px;padding:.6rem 1.1rem;min-width:190px;background:var(--bg-card);border:var(--border-width) solid var(--border);border-radius:var(--radius-button);box-shadow:var(--shadow-button-neutral);font-family:var(--font-display),sans-serif;font-size:.9375rem;font-weight:700;color:var(--text-main);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,border-color .15s ease,transform .08s ease,box-shadow .08s ease}.multi-select-dropdown:hover{background-color:var(--bg-sunken)}.multi-select-dropdown.open{border-color:var(--primary)}.dropdown-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-arrow{font-size:1.25rem;color:var(--text-muted);transition:transform .2s ease}.multi-select-dropdown.open .dropdown-arrow{transform:rotate(180deg)}.multi-select-dropdown:active{transform:translateY(var(--ledge));box-shadow:none}.dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:100;min-width:100%;max-height:300px;overflow-y:auto;background:var(--bg-card);border:var(--border-width) solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:.5rem 0;animation:dropdownFadeIn .2s cubic-bezier(.16,1,.3,1) forwards}.dropdown-menu.units-menu{min-width:290px;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;min-height:44px;padding:.55rem 1.15rem;font-size:.9375rem;color:var(--text-main);cursor:pointer;transition:background-color .15s ease,color .15s ease}.dropdown-item:hover{background-color:var(--primary-soft);color:var(--primary)}.dropdown-item input[type=checkbox]{width:1.25rem;height:1.25rem;accent-color:var(--primary);cursor:pointer}.dropdown-item.select-all,.dropdown-item.select-all-units{font-family:var(--font-display),sans-serif;font-weight:700;color:var(--text-main)}.dropdown-divider{height:var(--border-width);background:var(--border);margin:.5rem 0}.curriculum-group{border-bottom:var(--border-width) solid var(--border-light);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:var(--bg-card);z-index:1;border-bottom:var(--border-width) solid transparent}.curriculum-name{font-family:var(--font-display),sans-serif;font-weight:800;color:var(--primary)}.units-list{padding-left:.5rem}.unit-item{font-size:.875rem;color:var(--text-body)}.unit-item:hover{color:var(--primary)}.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:.4rem .5rem .4rem .85rem;background:var(--bg-card);border:var(--border-width) solid var(--border);border-radius:var(--radius-pill);font-family:var(--font-display),sans-serif;font-size:.8125rem;font-weight:700;color:var(--text-main);animation:chipFadeIn .2s cubic-bezier(.16,1,.3,1) forwards}@keyframes chipFadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.chip.curriculum-chip{background:var(--primary-soft);color:var(--primary);border-color:var(--primary)}.chip.unit-chip{background:var(--accent-soft);color:var(--text-body);border-color:var(--border)}.chip-remove{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;background:transparent;border:none;border-radius:var(--radius-pill);cursor:pointer;color:var(--text-muted);transition:var(--transition-base)}.chip-remove:hover{background:var(--bg-sunken);color:var(--error)}.chip-remove .material-symbols-outlined{font-size:1rem}.filter-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;min-height:44px;padding:.6rem 2.5rem .6rem 1.1rem;background:var(--bg-card);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%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:var(--border-width) solid var(--border);border-radius:var(--radius-button);box-shadow:var(--shadow-button-neutral);font-family:var(--font-display),sans-serif;font-size:.9375rem;font-weight:700;color:var(--text-main);cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .08s ease,box-shadow .08s ease;min-width:190px}.filter-select:hover{background-color:var(--bg-sunken)}.filter-select:active{transform:translateY(var(--ledge));box-shadow:none}.filter-select:focus{outline:none;border-color:var(--primary)}.unit-info{margin-top:.75rem;padding:.6rem .9rem;background:var(--primary-soft);border:var(--border-width) solid var(--border);border-radius:var(--radius-button);font-size:.9375rem;color:var(--text-main)}.unit-info strong{color:var(--primary);font-weight:700}@media (max-width: 768px){.filter-controls{flex-direction:column;gap:.5rem}.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 - 160px);display:flex;flex-direction:column;animation:fadeIn .4s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.flashcard-header{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem}@media (min-width: 768px){.flashcard-header{flex-direction:row;justify-content:space-between;align-items:center}}.filter-section{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.progress-section{display:flex;flex-direction:column;gap:.5rem;min-width:240px;padding:1rem 1.15rem;background:var(--bg-card);border:var(--border-width) solid var(--border-light);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}.progress-label{font-family:var(--font-body),sans-serif;font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.progress-count{font-family:var(--font-display),sans-serif;font-size:1rem;font-weight:700;color:var(--text-main);text-align:right}.progress-count .of{font-weight:500;color:var(--text-muted)}.progress-bar{height:10px;background:var(--bg-sunken);border:var(--border-width) solid var(--border-light);border-radius:var(--radius-pill);overflow:hidden}.progress-fill{height:100%;background:var(--primary);border-radius:var(--radius-pill);transition:width .4s cubic-bezier(.34,1.4,.64,1)}.flashcard-area{flex:1;display:flex;align-items:center;justify-content:center;min-height:380px;margin-bottom:2rem}.flashcard{position:relative;width:100%;max-width:600px;aspect-ratio:4 / 2.6;perspective:1000px;cursor:pointer}.flashcard-front,.flashcard-back{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-card);border:var(--border-width) solid var(--border);box-shadow:var(--shadow-card);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.75rem 1.75rem 1.75rem 2.6rem;backface-visibility:hidden;transition:transform .6s var(--transition-spring),box-shadow .3s ease}.flashcard-front{background:var(--primary-soft)}.flashcard-back{background:var(--bg-card);transform:rotateY(180deg)}.flashcard:hover .flashcard-front,.flashcard:hover .flashcard-back{transform:translateY(-6px) scale(1.01)}.flashcard.flipped .flashcard-front{transform:rotateY(-180deg)}.flashcard.flipped .flashcard-back{transform:rotateY(0)}.flashcard.flipped:hover .flashcard-front{transform:rotateY(-180deg) translateY(-6px) scale(1.01)}.flashcard.flipped:hover .flashcard-back{transform:rotateY(0) translateY(-6px) scale(1.01)}.card-gradient{position:absolute;top:0;bottom:0;left:0;width:16px;z-index:5;background:var(--primary-soft);border-right:2px dashed var(--primary);border-radius:var(--radius-card) 0 0 var(--radius-card);pointer-events:none}.hint-badge{position:absolute;top:1rem;right:1rem;z-index:10;display:flex;align-items:center;gap:.4rem;min-height:44px;padding:.5rem .9rem;background:var(--accent-soft);color:var(--text-body);border:var(--border-width) solid var(--border);border-radius:var(--radius-pill);font-family:var(--font-display),sans-serif;font-size:.875rem;font-weight:700;cursor:pointer;transition:var(--transition-base)}.hint-badge:hover{background:var(--accent);color:var(--text-main)}.hint-badge .material-symbols-outlined{font-size:19px;color:var(--warning)}.hint-badge:hover .material-symbols-outlined{color:var(--text-main)}.flashcard-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1.5rem}.learned-badge{position:absolute;top:1rem;left:1.5rem;z-index:10;display:flex;align-items:center;gap:.4rem;min-height:44px;padding:.5rem .9rem;background:var(--bg-card);color:var(--text-body);border:var(--border-width) solid var(--border);border-radius:var(--radius-pill);font-family:var(--font-display),sans-serif;font-size:.875rem;font-weight:700;cursor:pointer;transition:var(--transition-base)}.learned-badge:hover{color:var(--success);border-color:var(--success)}.learned-badge.is-learned{background:var(--success-soft);color:var(--success);border-color:var(--success)}.learned-badge .material-symbols-outlined{font-size:19px}.learned-filter-btn{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.6rem 1.1rem;background:var(--bg-card);color:var(--text-main);border:var(--border-width) solid var(--border);border-radius:var(--radius-button);box-shadow:var(--shadow-button-neutral);font-family:var(--font-display),sans-serif;font-size:.9375rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .08s ease,box-shadow .08s ease}.learned-filter-btn:hover{background:var(--bg-sunken);color:var(--success);border-color:var(--success)}.learned-filter-btn:active{transform:translateY(var(--ledge));box-shadow:none}.learned-filter-btn.active{background:var(--success-soft);color:var(--success);border-color:var(--success)}.learned-filter-btn .material-symbols-outlined{font-size:20px}.storage-warning{display:flex;align-items:center;gap:.5rem;max-width:600px;margin:0 auto 1.25rem;padding:.75rem 1rem;background:var(--accent-soft);border:var(--border-width) solid var(--warning);border-radius:var(--radius-button);color:var(--text-main);font-size:.9375rem;font-weight:600}.storage-warning .material-symbols-outlined{font-size:20px;color:var(--warning)}.learned-stat{display:flex;align-items:center;gap:.4rem;font-family:var(--font-display),sans-serif;font-size:.875rem;font-weight:700;color:var(--success)}.learned-stat .material-symbols-outlined{font-size:18px}.learned-stat .of{color:var(--text-muted);font-weight:600}.card-icon{width:56px;height:56px;border:var(--border-width) solid var(--border);border-radius:var(--radius-button);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.flashcard-front .card-icon{background:var(--bg-card)}.flashcard-back .card-icon{background:var(--primary-soft)}.card-icon .material-symbols-outlined{font-size:30px;color:var(--primary)}.card-text-main{font-family:var(--font-display),sans-serif;font-size:3rem;font-weight:800;color:var(--text-main);letter-spacing:-.02em;text-align:center;margin-bottom:.75rem}.card-text-main.english{color:var(--primary);display:flex;gap:.02em;flex-wrap:wrap;justify-content:center}.card-hint{font-size:.9375rem;font-weight:500;color:var(--text-muted);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.9}50%{opacity:.45}}.card-example{font-size:1rem;color:var(--text-body);line-height:1.5;text-align:center;margin:.75rem 0 1.25rem;max-width:450px}.pronounce-btn-card{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.55rem 1.1rem;background:var(--primary);color:var(--on-primary);border:none;border-radius:var(--radius-button);box-shadow:var(--shadow-button);font-family:var(--font-display),sans-serif;font-size:.9375rem;font-weight:700;cursor:pointer;transition:background-color .15s ease,transform .08s ease,box-shadow .08s ease}.pronounce-btn-card:hover:not(:disabled){background:var(--primary-hover)}.pronounce-btn-card:active:not(:disabled){transform:translateY(var(--ledge));box-shadow:none}.pronounce-btn-card .material-symbols-outlined{font-size:20px}.pronounce-btn-card:disabled,.spell-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.spell-buttons{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1rem}.spell-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.55rem 1.1rem;background:var(--bg-card);color:var(--text-main);border:var(--border-width) solid var(--border);border-radius:var(--radius-button);box-shadow:var(--shadow-button-neutral);font-family:var(--font-display),sans-serif;font-size:.9375rem;font-weight:700;cursor:pointer;transition:background-color .15s ease,transform .08s ease,box-shadow .08s ease}.spell-btn:hover:not(:disabled){background:var(--bg-sunken)}.spell-btn:active:not(:disabled){transform:translateY(var(--ledge));box-shadow:none}.spell-btn .material-symbols-outlined{font-size:20px;color:var(--primary)}.spell-btn.phonics .material-symbols-outlined{color:var(--warning)}.letter-char{display:inline-block;padding:0 .05em;transition:all .2s cubic-bezier(.34,1.4,.64,1);border-radius:var(--radius-chip)}.letter-highlight{background:var(--primary);color:var(--on-primary);transform:scale(1.18) translateY(-2px);padding:.08em .18em;margin:0 .04em;box-shadow:var(--shadow-button);animation:letterPop .3s ease}.phonics-highlight{background:var(--accent-soft);color:var(--text-main);box-shadow:inset 0 0 0 2px var(--accent);transform:scale(1.18) translateY(-2px);padding:.08em .18em;margin:0 .04em;animation:letterPop .3s ease}@keyframes letterPop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1.18) translateY(-2px)}}.flashcard-controls{display:flex;align-items:center;justify-content:space-between;max-width:600px;margin:0 auto 1.5rem;width:100%}.control-btn{display:flex;flex-direction:column;align-items:center;gap:.35rem;background:none;border:none;cursor:pointer;width:76px}.control-btn.secondary>.material-symbols-outlined{width:52px;height:52px;background:var(--bg-card);border-radius:var(--radius-button);border:var(--border-width) solid var(--border);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--text-main);box-shadow:var(--shadow-button-neutral);transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .08s ease,box-shadow .08s ease}.control-btn:hover>.material-symbols-outlined{color:var(--primary);border-color:var(--primary)}.control-btn:active>.material-symbols-outlined{transform:translateY(var(--ledge));box-shadow:none}.control-label{font-family:var(--font-body),sans-serif;font-size:.8125rem;font-weight:600;letter-spacing:.04em;color:var(--text-muted)}.main-controls{display:flex;align-items:center;gap:.75rem}.nav-btn{width:56px;height:56px;background:var(--bg-card);border:var(--border-width) solid var(--border);border-radius:var(--radius-button);box-shadow:var(--shadow-button-neutral);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .08s ease,box-shadow .08s ease}.nav-btn .material-symbols-outlined{font-size:28px;color:var(--text-main)}.nav-btn:hover{background:var(--bg-sunken);border-color:var(--primary)}.nav-btn:active{transform:translateY(var(--ledge));box-shadow:none}.flip-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:52px;padding:.75rem 1.75rem;background:var(--primary);color:var(--on-primary);border:none;border-radius:var(--radius-button);box-shadow:var(--shadow-button);font-family:var(--font-display),sans-serif;font-size:1.0625rem;font-weight:700;letter-spacing:.01em;cursor:pointer;transition:background-color .15s ease,transform .08s ease,box-shadow .08s ease}.flip-btn:hover{background:var(--primary-hover)}.flip-btn:active{transform:translateY(var(--ledge));box-shadow:none}.flip-btn .material-symbols-outlined{font-size:22px}.keyboard-hints{display:flex;justify-content:center;gap:1.5rem;font-size:.8125rem;color:var(--text-muted);margin-top:.5rem}.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:var(--bg-card);border:var(--border-width) solid var(--border);border-radius:var(--radius-chip);font-family:inherit;font-size:.8125rem;font-weight:700;color:var(--text-main);box-shadow:0 2px 0 var(--line)}.loading-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;color:var(--text-body);gap:1.25rem;padding:5rem 2rem;background:var(--bg-card);border:var(--border-width) solid var(--border-light);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}.loading-state .material-symbols-outlined,.empty-state .material-symbols-outlined{font-size:56px;color:var(--primary)}.empty-state h2{font-family:var(--font-display),sans-serif;font-size:1.6rem;font-weight:800;color:var(--text-main)}.spinning{animation:spin 1.2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.flashcard-page{padding:0 .25rem}.flashcard-header{margin-bottom:1.5rem}.flashcard{aspect-ratio:4 / 3}.flashcard-front,.flashcard-back{padding:1.5rem 1.25rem 1.5rem 2rem}.card-gradient{width:12px}.learned-badge{left:1.25rem}.card-text-main{font-size:2rem}.flashcard-controls{gap:.5rem}.flip-btn{padding:.75rem 1.25rem;font-size:1rem}.nav-btn{width:52px;height:52px}.control-btn{width:56px}.control-btn.secondary>.material-symbols-outlined{width:48px;height:48px;font-size:22px}.keyboard-hints{display:none}.spell-buttons{gap:.35rem}.spell-btn,.pronounce-btn-card{padding:.5rem .85rem;font-size:.875rem}.spell-btn .material-symbols-outlined,.pronounce-btn-card .material-symbols-outlined{font-size:18px}.letter-highlight,.phonics-highlight{transform:scale(1.1) translateY(-1px);padding:.05em .1em}}.word-matching-page{max-width:900px;margin:0 auto;min-height:calc(100vh - 160px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .4s ease-out}.game-card{width:100%;background:var(--bg-card);border:var(--border-width) solid var(--border-light);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;position:relative}.blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:.12}.blob-primary{top:-60px;right:-60px;width:280px;height:280px;background:rgba(var(--primary-rgb),.3)}.blob-secondary{bottom:-60px;left:-60px;width:280px;height:280px;background:rgba(var(--primary-rgb),.2)}.toast-notification{position:absolute;top:1.25rem;right:1.25rem;z-index:50;display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:var(--success-soft);border:2px solid var(--success);border-radius:var(--radius-button);box-shadow:var(--shadow-card);animation:floatToast 3s ease-in-out infinite}@keyframes floatToast{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.toast-icon{width:32px;height:32px;background:var(--success);color:var(--bg-card);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toast-icon .material-symbols-outlined{font-size:20px;color:inherit}.toast-title{font-family:var(--font-display),sans-serif;font-size:1rem;font-weight:800;color:var(--success)}.toast-subtitle{font-size:.8125rem;font-weight:600;color:var(--warning)}.game-header{position:relative;padding:1.75rem 2rem;border-bottom:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;gap:1.25rem;background:var(--bg-sunken)}@media (min-width: 768px){.game-header{flex-direction:row;align-items:center;justify-content:space-between}}.score-section{display:flex;flex-direction:column;gap:.35rem}.score-label{display:flex;align-items:center;gap:.5rem;font-family:var(--font-body),sans-serif;font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.score-label .material-symbols-outlined{font-size:20px;color:var(--warning)}.score-value{font-family:var(--font-display),sans-serif;font-size:2rem;font-weight:800;color:var(--text-main);letter-spacing:-.02em}.score-divider{color:var(--text-muted)}.progress-section{flex:1;max-width:380px}.progress-header{display:flex;justify-content:space-between;font-family:var(--font-display),sans-serif;font-size:.8125rem;font-weight:700;color:var(--text-body);margin-bottom:.4rem}.progress-bar{height:18px;background:var(--bg-card);border:var(--border-width) solid var(--border);border-radius:var(--radius-pill);padding:3px}.progress-fill{height:100%;background:var(--primary);border-radius:var(--radius-pill);position:relative;overflow:hidden;transition:width .35s cubic-bezier(.34,1.56,.64,1)}.progress-stripes{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.18) 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.25rem;text-align:center}.definition-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;background:var(--bg-sunken);border:var(--border-width) solid var(--border);border-radius:var(--radius-pill);font-family:var(--font-body),sans-serif;font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:.85rem}.definition-badge .material-symbols-outlined{font-size:18px}.definition-text{font-size:1.5rem;font-weight:700;color:var(--text-main);line-height:1.45;margin-bottom:.5rem}.vietnamese-hint{font-size:1.125rem;color:var(--primary);font-weight:700;font-family:var(--font-display),sans-serif}.construction-zone{background:var(--bg-sunken);border:2px dashed var(--border);border-radius:var(--radius-card);margin:0 2rem 1.5rem;padding:1.75rem}.letter-slots{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}.letter-slot{width:56px;height:64px;background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-button);display:flex;align-items:center;justify-content:center;font-family:var(--font-display),sans-serif;font-size:1.75rem;font-weight:800;color:var(--text-muted);box-shadow:var(--shadow-button-neutral);transition:var(--transition-spring)}.letter-slot.filled{background:var(--primary);border-color:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-button);animation:popLetter .3s cubic-bezier(.34,1.56,.64,1)}.letter-slot.correct{background:var(--success-soft);border:3px solid var(--success);color:var(--success);box-shadow:none;transform:translateY(var(--ledge))}.letter-slot.incorrect{background:var(--error-soft);border:3px dashed var(--error);color:var(--error);box-shadow:none;animation:shake .4s ease}@keyframes popLetter{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.scrambled-letters{display:flex;flex-wrap:wrap;justify-content:center;gap:.85rem;padding:0 2rem 2rem}.letter-btn{width:56px;min-height:56px;background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-button);box-shadow:var(--shadow-button-neutral);display:flex;align-items:center;justify-content:center;font-family:var(--font-display),sans-serif;font-size:1.75rem;font-weight:800;color:var(--text-main);cursor:pointer;transform:translateY(0);transition:background-color .15s ease,border-color .15s ease,transform .08s ease,box-shadow .08s ease}.letter-btn:hover:not(:disabled){background:var(--primary-soft);border-color:var(--primary)}.letter-btn:active:not(:disabled){transform:translateY(var(--ledge));box-shadow:none}.letter-btn.used{background:var(--bg-sunken);border-color:var(--border-light);color:var(--text-muted);opacity:.45;box-shadow:none;transform:translateY(var(--ledge)) scale(.94);cursor:not-allowed}.game-footer{display:flex;flex-direction:column;gap:1rem;padding:1.5rem 2rem;background:var(--bg-sunken);border-top:var(--border-width) solid var(--border-light)}@media (min-width: 640px){.game-footer{flex-direction:row;justify-content:space-between;align-items:center}}.footer-actions{display:flex;gap:.85rem;justify-content:flex-end;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:52px;padding:.75rem 1.5rem;border:none;border-radius:var(--radius-button);background:var(--bg-card);color:var(--text-main);box-shadow:var(--shadow-button-neutral);font-family:var(--font-display),sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transform:translateY(0);transition:background-color .15s ease,color .15s ease,transform .08s ease,box-shadow .08s ease}.btn:active:not(:disabled){transform:translateY(var(--ledge));box-shadow:none}.btn .material-symbols-outlined{font-size:20px}.btn-hint{background:var(--accent-soft);color:var(--warning)}.btn-hint:hover{background:var(--sun-100)}.btn-reset{background:var(--bg-card);color:var(--text-body)}.btn-reset:hover{color:var(--text-main);background:var(--paper-2)}.btn-check{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-button)}.btn-check:hover:not(:disabled){background:var(--primary-hover)}.btn-check:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--shadow-button)}.hint-panel{padding:1.5rem 2rem;background:var(--accent-soft);border-top:2px solid var(--warning);animation:slideDown .3s ease-out}.game-tip{margin-top:2rem;text-align:center;font-size:1rem;color:var(--text-muted)}.loading-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;color:var(--text-body);gap:1rem;padding:5rem 2rem;background:var(--bg-card);border:var(--border-width) solid var(--border-light);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}@media (max-width: 640px){.game-header,.definition-section,.scrambled-letters,.game-footer{padding-left:1rem;padding-right:1rem}.construction-zone{margin-left:1rem;margin-right:1rem;padding:1.25rem}.letter-slots,.scrambled-letters{gap:.6rem}.letter-slot{width:52px;height:60px}.letter-btn{width:52px;min-height:52px}.definition-text{font-size:1.25rem}.footer-actions{justify-content:stretch}.footer-actions .btn{flex:1}}.fill-in-blank-page{max-width:1200px;margin:0 auto;min-height:calc(100vh - 160px);animation:fadeIn .4s ease-out}.fill-layout{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}@media (min-width: 1024px){.fill-layout{grid-template-columns:1fr 340px}}.exercise-area{display:flex;flex-direction:column;gap:2rem}.mode-toggle{display:flex;justify-content:center}.toggle-container{display:inline-flex;gap:4px;background:var(--bg-sunken);padding:4px;border-radius:var(--radius-pill);border:var(--border-width) solid var(--border)}.toggle-btn{min-height:44px;padding:.625rem 1.5rem;background:transparent;border:none;border-radius:var(--radius-pill);font-family:var(--font-display),sans-serif;font-size:1rem;font-weight:700;color:var(--text-body);cursor:pointer;transition:var(--transition-base)}.toggle-btn.active{background:var(--primary);color:var(--on-primary)}.toggle-btn:hover:not(.active){background:var(--primary-soft);color:var(--primary)}.exercise-card{background:var(--bg-card);border-radius:var(--radius-card);box-shadow:var(--shadow-card);border:var(--border-width) solid var(--border-light);padding:2.5rem;position:relative;overflow:hidden}.card-blob{position:absolute;top:-60px;right:-60px;width:240px;height:240px;background:rgba(var(--primary-rgb),.08);border-radius:50%;filter:blur(80px);pointer-events:none}.prompt-section{text-align:center;margin-bottom:2.5rem;position:relative;z-index:1}.translate-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;background:var(--primary-soft);color:var(--primary);border:var(--border-width) solid var(--primary);border-radius:var(--radius-pill);font-family:var(--font-body),sans-serif;font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem}.translate-badge .material-symbols-outlined{font-size:18px}.prompt-text{font-size:1.85rem;font-weight:700;color:var(--text-main);line-height:1.4;margin-bottom:.75rem}.prompt-instruction{font-size:1rem;font-weight:500;color:var(--text-body)}.word-builder{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem;font-family:var(--font-display),sans-serif;font-size:1.85rem;font-weight:700;color:var(--text-main);margin-bottom:2rem;position:relative;z-index:1}.letter-static{padding:0 2px}.letter-input{width:56px;height:64px;background:var(--bg-sunken);border:2px solid var(--border);border-radius:var(--radius-button);box-shadow:var(--shadow-button-neutral);text-align:center;font-family:var(--font-display),sans-serif;font-size:1.75rem;font-weight:800;color:var(--primary);caret-color:var(--primary);outline:none;transition:background-color .15s ease,border-color .15s ease,transform .08s ease,box-shadow .08s ease;margin:0 1px}.letter-input:focus{background:var(--bg-card);border-color:var(--primary);box-shadow:var(--shadow-button)}.letter-input.error{background:var(--error-soft);border:3px dashed var(--error);color:var(--error);box-shadow:none;animation:shake .4s ease}.letter-input.success{background:var(--success-soft);border:3px solid var(--success);color:var(--success);box-shadow:none;transform:translateY(var(--ledge))}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.hint-btn{display:flex;align-items:center;justify-content:center;gap:.55rem;min-height:52px;background:transparent;border:none;padding:.5rem 1rem;border-radius:var(--radius-pill);font-family:var(--font-display),sans-serif;font-size:1rem;font-weight:700;color:var(--text-body);cursor:pointer;transition:var(--transition-base);margin:0 auto;position:relative;z-index:1}.hint-btn:hover{color:var(--warning)}.hint-icon{width:36px;height:36px;background:var(--accent-soft);color:var(--warning);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease}.hint-btn:hover .hint-icon{background:var(--sun-100)}.hint-icon .material-symbols-outlined{font-size:20px}.hint-panel{margin-top:1.5rem;padding:1.15rem 1.5rem;background:var(--accent-soft);border-radius:var(--radius-button);border:2px solid var(--warning);animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.hint-panel p{font-size:1rem;color:var(--text-main);margin-bottom:.35rem}.hint-panel p:last-child{margin-bottom:0}.hint-panel strong{font-family:var(--font-display),sans-serif;color:var(--warning)}.sidebar{display:flex;flex-direction:column;gap:1.5rem}.stats-card{background:var(--bg-card);border-radius:var(--radius-card);border:var(--border-width) solid var(--border-light);box-shadow:var(--shadow-card);padding:1.5rem}.stats-title{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display),sans-serif;font-size:1.15rem;font-weight:800;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.25rem}.stat-box{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;background:var(--bg-sunken);border-radius:var(--radius-button);border:var(--border-width) solid var(--border);position:relative;overflow:hidden}.stat-box.streak{background:var(--accent-soft);border-color:var(--warning)}.stat-value{font-family:var(--font-display),sans-serif;font-size:1.85rem;font-weight:800;color:var(--primary);z-index:1}.stat-box.streak .stat-value{color:var(--warning)}.stat-label{font-family:var(--font-body),sans-serif;font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-top:.25rem;z-index:1}.stat-box.streak .stat-label{color:var(--warning)}.stat-icon{position:absolute;top:4px;right:4px;font-size:48px;color:var(--warning);opacity:.12}.daily-progress{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--bg-sunken);border-radius:var(--radius-button);border:var(--border-width) solid var(--border)}.progress-circle{position:relative;width:56px;height:56px;flex-shrink:0}.progress-circle svg{width:100%;height:100%;transform:rotate(-90deg)}.progress-bg{stroke:var(--border)}.progress-value{stroke:var(--primary);stroke-linecap:round;transition:stroke-dashoffset .5s ease-out}.progress-percent{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display),sans-serif;font-size:.8125rem;font-weight:800;color:var(--text-main)}.progress-info{flex:1}.progress-title{font-family:var(--font-display),sans-serif;font-size:1rem;font-weight:700;color:var(--text-main)}.progress-subtitle{font-size:.8125rem;color:var(--text-body)}.actions-card{background:var(--bg-card);border-radius:var(--radius-card);border:var(--border-width) solid var(--border-light);box-shadow:var(--shadow-card);padding:1.5rem;position:sticky;top:7rem}.btn-check-answer{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:52px;padding:.75rem 1.5rem;background:var(--primary);color:var(--on-primary);border:none;border-radius:var(--radius-button);font-family:var(--font-display),sans-serif;font-size:1.0625rem;font-weight:700;cursor:pointer;box-shadow:var(--shadow-button);transform:translateY(0);transition:background-color .15s ease,transform .08s ease,box-shadow .08s ease}.btn-check-answer:hover:not(:disabled){background:var(--primary-hover)}.btn-check-answer:active:not(:disabled){transform:translateY(var(--ledge));box-shadow:none}.btn-check-answer:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--shadow-button)}.btn-skip{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:52px;padding:.75rem 1.5rem;background:var(--bg-card);color:var(--text-body);border:var(--border-width) solid var(--border);border-radius:var(--radius-button);font-family:var(--font-display),sans-serif;font-size:1rem;font-weight:700;box-shadow:var(--shadow-button-neutral);cursor:pointer;transform:translateY(0);transition:background-color .15s ease,color .15s ease,transform .08s ease,box-shadow .08s ease;margin-top:1rem}.btn-skip:hover{color:var(--text-main);background:var(--paper-2)}.btn-skip:active{transform:translateY(var(--ledge));box-shadow:none}.feedback-card{display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem;border-radius:var(--radius-button);font-size:1rem;font-weight:700;border:2px solid var(--border)}.feedback-card .material-symbols-outlined{font-size:24px;flex-shrink:0}.feedback-card.correct{background:var(--success-soft);color:var(--success);border:2px solid var(--success)}.feedback-card.incorrect{background:var(--error-soft);color:var(--error);border:2px dashed var(--error)}@media (max-width: 768px){.fill-in-blank-page{padding:0 .25rem}.exercise-card{padding:1.5rem}.prompt-text{font-size:1.5rem}.word-builder{font-size:1.5rem;gap:.3rem}.letter-input{width:52px;height:60px}.sidebar{order:-1}}.vocabulary-importer{max-width:1100px;margin:0 auto;padding-bottom:6rem;animation:fadeIn .3s ease-out}.page-header{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.75rem}@media (min-width: 768px){.page-header{flex-direction:row;align-items:center;justify-content:space-between}}.header-content h1{font-family:var(--font-display);font-size:1.75rem;font-weight:700;color:var(--text-main);letter-spacing:-.01em;margin-bottom:.35rem}.header-content p{color:var(--text-body);font-size:1rem;line-height:1.6;max-width:60ch}.daily-goal{display:flex;align-items:center;gap:.75rem;background:var(--bg-card);padding:.65rem 1rem;border-radius:var(--radius-pill);border:var(--border-width) solid var(--border-light);box-shadow:var(--shadow-card)}.goal-progress{width:100px;height:10px;background:var(--bg-sunken);border-radius:var(--radius-pill);overflow:hidden}.goal-bar{height:100%;background:var(--accent);border-radius:var(--radius-pill);transition:width .4s cubic-bezier(.34,1.4,.64,1)}.goal-text{font-family:var(--font-body);font-size:.8125rem;font-weight:600;color:var(--text-body);white-space:nowrap}.upload-zone{position:relative;background:var(--bg-card);border-radius:var(--radius-card);border:2px dashed var(--border);padding:2.5rem 1.5rem;margin-bottom:1.75rem;cursor:pointer;overflow:hidden;transition:border-color .18s ease,background-color .18s ease}.upload-zone:hover,.upload-zone.drag-active{border-color:var(--primary);background:var(--primary-soft)}.upload-zone-glow,.upload-zone-pattern{display:none}.upload-zone-content{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1}.upload-icon{width:56px;height:56px;background:var(--primary-soft);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.upload-icon .material-symbols-outlined{font-size:28px;color:var(--primary)}.upload-zone-content h3{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--text-main);margin-bottom:.35rem}.upload-zone-content p{font-size:1rem;line-height:1.6;color:var(--text-body);max-width:52ch;margin-bottom:1.25rem}.file-type{font-weight:700;color:var(--primary)}.browse-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.75rem 1.75rem;background:var(--primary);color:var(--on-primary);font-family:var(--font-display);font-size:1rem;font-weight:700;border:none;border-radius:var(--radius-button);box-shadow:var(--shadow-button);cursor:pointer;transition:background-color .15s ease,transform .08s ease,box-shadow .08s ease}.browse-btn:hover{background:var(--primary-hover)}.browse-btn:active{transform:translateY(var(--ledge));box-shadow:none}.browse-btn .material-symbols-outlined{font-size:20px}.message{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.25rem;border-radius:var(--radius-button);margin-bottom:1.25rem;font-size:1rem;font-weight:600;line-height:1.5;border:var(--border-width) solid transparent}.message .material-symbols-outlined{font-size:22px}.message.error{background:var(--error-soft);color:var(--error);border-color:var(--error)}.message.success{background:var(--success-soft);color:var(--success);border-color:var(--success)}.data-dashboard{background:var(--bg-card);border-radius:var(--radius-card);border:var(--border-width) solid var(--border-light);box-shadow:var(--shadow-card);overflow:hidden}.dashboard-toolbar{padding:1.25rem 1.5rem;border-bottom:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;gap:1rem}@media (min-width: 768px){.dashboard-toolbar{flex-direction:row;align-items:center;justify-content:space-between}}.toolbar-left{display:flex;align-items:center;gap:.85rem}.status-icon{width:44px;height:44px;flex-shrink:0;border-radius:50%;background:var(--success-soft);border:var(--border-width) solid var(--success);display:flex;align-items:center;justify-content:center}.status-icon .material-symbols-outlined{font-size:22px;color:var(--success)}.status-info h2{font-family:var(--font-display);font-size:1.125rem;font-weight:700;color:var(--text-main);margin-bottom:.15rem}.status-badge{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:600;color:var(--text-muted)}.badge{display:inline-flex;align-items:center;padding:.2rem .55rem;background:var(--bg-sunken);color:var(--text-body);border:var(--border-width) solid var(--border-light);border-radius:var(--radius-chip);font-weight:700}.search-container{display:flex;align-items:center;min-height:44px;background:var(--bg-sunken);border:var(--border-width) solid var(--border);border-radius:var(--radius-button);padding:.35rem .85rem;flex:1;max-width:320px;position:relative;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}.search-container:focus-within{background:var(--bg-card);border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.18)}.search-icon{font-size:20px;color:var(--text-muted);margin-right:.5rem}.search-input{border:none;background:transparent;width:100%;font-family:var(--font-body);font-size:1rem;font-weight:500;color:var(--text-main);outline:none}.search-input::placeholder{color:var(--text-muted)}.clear-search-btn{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-right:-.5rem;background:none;border:none;padding:0;cursor:pointer;color:var(--text-muted)}.clear-search-btn:hover{color:var(--primary)}.clear-search-btn .material-symbols-outlined{font-size:20px}.toolbar-actions{display:flex;gap:.75rem}.vocabulary-importer .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.5rem 1.1rem;font-family:var(--font-display);font-size:.9375rem;font-weight:700;background:var(--bg-card);color:var(--text-body);border:var(--border-width) solid var(--border);border-radius:var(--radius-button);box-shadow:var(--shadow-button-neutral);cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .08s ease,box-shadow .08s ease}.vocabulary-importer .btn:active:not(:disabled){transform:translateY(var(--ledge));box-shadow:none}.vocabulary-importer .btn .material-symbols-outlined{font-size:20px}.vocabulary-importer .btn-sample{background:var(--accent-soft);color:var(--warning);border-color:var(--accent)}.vocabulary-importer .btn-sample:hover:not(:disabled){background:var(--sun-100)}.vocabulary-importer .btn-clear:hover:not(:disabled){background:var(--error-soft);color:var(--error);border-color:var(--error)}.vocabulary-importer .btn-clear:disabled{opacity:.45;cursor:not-allowed;transform:none}.table-container{overflow-x:auto}.vocab-table{width:100%;border-collapse:collapse;text-align:left}.vocab-table thead{background:var(--bg-sunken);border-bottom:var(--border-width) solid var(--border)}.vocab-table th{padding:.9rem 1.25rem;font-family:var(--font-body);font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);white-space:nowrap}.vocab-table th:first-child{width:18%}.vocab-table th:nth-child(2){width:18%}.vocab-table th:nth-child(3){width:32%}.vocab-table th:nth-child(4){width:32%}.vocab-table tbody tr{border-bottom:var(--border-width) solid var(--border-light);transition:background-color .15s ease}.vocab-table tbody tr:hover{background-color:var(--bg-sunken)}.vocab-table td{padding:.9rem 1.25rem;vertical-align:top;font-size:1rem;line-height:1.6;color:var(--text-body)}.word-cell .word-content{display:flex;align-items:center;gap:.25rem}.word-text{font-family:var(--font-display);font-size:1.0625rem;font-weight:700;color:var(--text-main)}.pronounce-btn{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:none;border:none;padding:0;cursor:pointer;color:var(--text-muted);border-radius:var(--radius-chip);transition:color .15s ease,background-color .15s ease}.pronounce-btn:hover{color:var(--primary);background:var(--primary-soft)}.pronounce-btn .material-symbols-outlined{font-size:20px}.part-of-speech{display:block;font-size:.8125rem;color:var(--text-muted);font-style:italic;margin-top:.15rem}.vietnamese-text{display:inline-block;padding:.25rem .6rem;background:var(--bg-sunken);color:var(--text-main);border:var(--border-width) solid var(--border-light);border-radius:var(--radius-chip);font-weight:600;font-size:.9375rem}.definition-cell p{font-size:1rem;color:var(--text-body);line-height:1.6;max-width:48ch}.example-cell .example-text{font-size:.9375rem;color:var(--text-muted);font-style:italic;border-left:3px solid var(--border);padding-left:.75rem;line-height:1.6;max-width:48ch}.no-example{color:var(--text-muted);opacity:.5}.table-footer{padding:.85rem 1.25rem;background:var(--bg-sunken);border-top:var(--border-width) solid var(--border-light);display:flex;justify-content:center}.show-more-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:44px;padding:.5rem 1.25rem;background:none;border:none;border-radius:var(--radius-button);font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--primary);cursor:pointer;transition:background-color .15s ease,color .15s ease}.show-more-btn:hover{background:var(--primary-soft);color:var(--primary-hover)}.show-more-btn .material-symbols-outlined{font-size:20px}.start-learning-container{position:sticky;bottom:1.5rem;display:flex;justify-content:center;padding-top:1.75rem;z-index:40}.start-learning-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:.85rem 2.5rem;background:var(--primary);color:var(--on-primary);font-family:var(--font-display);font-size:1.0625rem;font-weight:700;border:none;border-radius:var(--radius-button);text-decoration:none;box-shadow:var(--shadow-button);transition:background-color .15s ease,transform .08s ease,box-shadow .08s ease}.start-learning-btn:hover{background:var(--primary-hover)}.start-learning-btn:active{transform:translateY(var(--ledge));box-shadow:none}.start-learning-btn .material-symbols-outlined{font-size:20px}.btn-glow{display:none}@media (max-width: 768px){.vocabulary-importer{padding-bottom:5rem}.header-content h1{font-size:1.5rem}.upload-zone{padding:2rem 1.25rem}.vocab-table th,.vocab-table td{padding:.75rem 1rem}.search-container{max-width:100%}.toolbar-actions{width:100%}.toolbar-actions .btn{flex:1}.start-learning-btn{width:100%;max-width:24rem}}.reading-practice-container{width:calc(100% - 2rem);max-width:1200px;margin:1.5rem auto;min-height:calc(100vh - 120px);display:flex;flex-direction:column}.reading-dashboard{display:flex;flex-direction:column;gap:2rem}.dashboard-header{text-align:center;margin-top:1rem}.dashboard-title{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--text-main);margin-bottom:.5rem;letter-spacing:-.01em}.dashboard-subtitle{font-size:1.0625rem;line-height:1.6;color:var(--text-body);max-width:60ch;margin:0 auto}.exercise-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;padding:.5rem 0}.reading-practice-container .card-3d{background-color:var(--bg-card);border:var(--border-width) solid var(--border-light);border-radius:var(--radius-card);box-shadow:var(--shadow-card);transition:var(--transition-base);position:relative;overflow:hidden}.reading-practice-container .exercise-card{padding:1.75rem;display:flex;flex-direction:column;gap:.85rem}.reading-practice-container .exercise-card:hover{transform:translateY(-4px);border-color:var(--primary)}.card-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .75rem;background:var(--primary-soft);color:var(--primary);border-radius:var(--radius-pill);font-size:.8125rem;font-weight:700;width:fit-content}.badge-icon{font-size:18px}.card-exercise-id{font-size:.8125rem;font-weight:700;color:var(--text-muted);letter-spacing:.08em}.card-title{font-family:var(--font-display);font-size:1.375rem;font-weight:700;color:var(--text-main);line-height:1.3}.card-meta{display:flex;gap:1rem;font-size:.875rem;color:var(--text-muted);border-bottom:var(--border-width) solid var(--border-light);padding-bottom:.85rem}.meta-item{display:flex;align-items:center;gap:.3rem}.meta-item .material-symbols-outlined{font-size:18px}.card-progress{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.progress-label{font-size:.9375rem;font-weight:600;color:var(--text-body)}.stars-badge{display:flex;gap:2px}.star-icon{font-size:22px}.star-filled{color:var(--accent);font-variation-settings:"FILL" 1}.star-empty{color:var(--text-muted);opacity:.35}.reading-practice-container .btn.start-btn{width:100%;margin-top:.5rem}.button-arrow{font-size:20px}.active-exercise{display:flex;flex-direction:column;gap:1.25rem}.reading-practice-container .exercise-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;gap:1.25rem}.back-btn{display:inline-flex;align-items:center;gap:.5rem}.header-info{text-align:center;flex:1}.header-actions{display:flex;align-items:center;gap:.75rem}.exercise-indicator{font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--primary)}.exercise-main-title{font-family:var(--font-display);font-size:1.375rem;font-weight:700;color:var(--text-main);margin-top:.2rem}.reading-practice-container .btn.btn-audio{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.75rem 1.5rem;background-color:var(--primary);color:var(--on-primary);font-family:var(--font-display);font-size:1rem;font-weight:700;border:none;border-radius:var(--radius-button);box-shadow:var(--shadow-button);cursor:pointer;transition:background-color .15s ease,transform .08s ease,box-shadow .08s ease}.reading-practice-container .btn.btn-audio:hover{background-color:var(--primary-hover)}.reading-practice-container .btn.btn-audio:active{transform:translateY(var(--ledge));box-shadow:none}.reading-practice-container .btn.btn-audio.playing{background-color:var(--error)}.exercise-content-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}.panel-title{display:flex;align-items:center;gap:.75rem;padding:1.1rem 1.5rem;border-bottom:var(--border-width) solid var(--border-light);font-family:var(--font-display);font-size:1.125rem;font-weight:700;color:var(--text-main)}.panel-title .icon{color:var(--primary)}.panel-hint{font-family:var(--font-body);font-size:.8125rem;font-weight:500;color:var(--text-muted);margin-left:auto}.reading-practice-container .story-panel{display:flex;flex-direction:column;height:600px}.story-content{padding:1.5rem;overflow-y:auto;flex:1}.story-text{max-width:68ch;margin:0 auto;font-size:1.125rem;line-height:1.8;color:var(--text-main)}.story-paragraph{margin-bottom:1.25rem;line-height:1.8}.story-paragraph:last-child{margin-bottom:0}.story-sentence,.story-sentence-span{cursor:pointer;padding:.1rem .3rem;border-radius:var(--radius-chip);border:1px solid transparent;transition:background-color .18s ease,border-color .18s ease;display:inline}.story-sentence:hover,.story-sentence-span:hover{background-color:var(--primary-soft);border-color:var(--border)}.story-sentence.active-highlight,.story-sentence-span.active-highlight{background-color:var(--accent-soft);border-color:var(--accent);color:var(--text-main);font-weight:600}.reading-practice-container .quiz-panel{display:flex;flex-direction:column;min-height:600px}.wizard-flow{padding:1.75rem;display:flex;flex-direction:column;gap:1.25rem;flex:1}.wizard-progress{display:flex;flex-direction:column;gap:.5rem}.progress-text{display:flex;justify-content:space-between;font-size:.9375rem;color:var(--text-muted)}.progress-text strong{color:var(--text-main)}.progress-track{height:12px;background-color:var(--bg-sunken);border-radius:var(--radius-pill);overflow:hidden}.progress-fill{height:100%;background-color:var(--success);border-radius:var(--radius-pill);transition:width .35s cubic-bezier(.25,.8,.25,1)}.question-container{display:flex;flex-direction:column;gap:1.1rem;flex:1}.question-badge{text-transform:uppercase;font-size:.8125rem;font-weight:700;letter-spacing:.08em;color:var(--text-muted);width:fit-content;border-bottom:2px solid var(--primary);padding-bottom:.2rem}.question-text{font-family:var(--font-display);font-size:1.375rem;font-weight:700;color:var(--text-main);line-height:1.4;max-width:60ch}.question-interactive-area{margin-top:.25rem;flex:1;display:flex;flex-direction:column}.options-grid{display:grid;grid-template-columns:1fr;gap:.85rem}.reading-practice-container .option-btn{min-height:52px;padding:.85rem 1.25rem;text-align:left;justify-content:flex-start;display:flex;align-items:center;gap:1rem;font-family:var(--font-body);font-size:1.0625rem;font-weight:600;line-height:1.5;color:var(--text-main);background-color:var(--bg-card);border:var(--border-width) solid var(--border);border-radius:var(--radius-button);box-shadow:var(--shadow-button-neutral);cursor:pointer;transition:border-color .15s ease,background-color .15s ease,transform .08s ease,box-shadow .08s ease}.reading-practice-container .option-btn:hover:not(:disabled){border-color:var(--primary);background-color:var(--primary-soft)}.reading-practice-container .option-btn:active:not(:disabled){transform:translateY(var(--ledge));box-shadow:none}.option-letter{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:34px;height:34px;border-radius:50%;background-color:var(--bg-sunken);color:var(--text-main);font-family:var(--font-display);font-weight:700;font-size:1rem}.option-label{flex:1}.reading-practice-container .answer-selected{border-color:var(--primary);background-color:var(--primary-soft)}.reading-practice-container .answer-correct{border-color:var(--success);background-color:var(--success-soft);color:var(--success)}.reading-practice-container .answer-correct .option-letter{background-color:var(--success);color:var(--on-primary)}.reading-practice-container .answer-incorrect{border-color:var(--error);background-color:var(--error-soft);color:var(--error)}.reading-practice-container .answer-incorrect .option-letter{background-color:var(--error);color:var(--on-primary)}.reading-practice-container .answer-disabled{opacity:.55;cursor:not-allowed}.reading-practice-container .option-btn:disabled,.reading-practice-container .tf-btn:disabled{box-shadow:var(--shadow-button-neutral)}.tf-container{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.reading-practice-container .tf-btn{min-height:52px;padding:1.5rem 1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-display);font-size:1.125rem;font-weight:700;text-transform:uppercase;background-color:var(--bg-card);border:var(--border-width) solid var(--border);border-radius:var(--radius-button);box-shadow:var(--shadow-button-neutral);cursor:pointer;transition:border-color .15s ease,transform .08s ease,box-shadow .08s ease}.reading-practice-container .tf-btn:active:not(:disabled){transform:translateY(var(--ledge));box-shadow:none}.tf-icon{font-size:40px}.reading-practice-container .tf-btn.true{color:var(--success)}.reading-practice-container .tf-btn.true:hover:not(:disabled){border-color:var(--success)}.reading-practice-container .tf-btn.false{color:var(--error)}.reading-practice-container .tf-btn.false:hover:not(:disabled){border-color:var(--error)}.reading-practice-container .tf-btn:disabled{cursor:not-allowed}.short-answer-container{display:flex;flex-direction:column;gap:1rem}.text-field{min-height:52px;padding:.85rem 1.25rem;font-family:var(--font-body);font-size:1.0625rem;border:var(--border-width) solid var(--border);border-radius:var(--radius-button);background-color:var(--bg-card);color:var(--text-main);outline:none;transition:border-color .2s ease,box-shadow .2s ease}.text-field::placeholder{color:var(--text-muted)}.text-field:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.18)}.reading-practice-container .btn.submit-btn{min-height:52px;padding:.85rem 2rem;font-size:1.0625rem}.reading-practice-container .feedback-hint-box{padding:1rem 1.25rem;background-color:var(--bg-sunken);border:var(--border-width) solid var(--border-light);border-radius:var(--radius-button);box-shadow:none}.feedback-headline{font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:.35rem}.feedback-answer-text{font-size:1.0625rem;font-weight:700;line-height:1.5;color:var(--success)}.feedback-answer-text.text-sm{font-size:.9375rem;font-weight:600}.unscramble-container{display:flex;flex-direction:column;gap:1.25rem}.unscramble-hint,.matching-hint{font-size:1rem;line-height:1.6;color:var(--text-body)}.unscramble-slots{display:flex;flex-wrap:wrap;gap:.5rem;min-height:64px;padding:.75rem;background-color:var(--bg-sunken);border:var(--border-width) dashed var(--border);border-radius:var(--radius-button);align-items:center;justify-content:center}.unscramble-slot{width:36px;height:40px;border-bottom:3px solid var(--text-muted);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.375rem;font-weight:700;color:var(--text-main);text-transform:uppercase}.unscramble-slot.filled{border-bottom-color:var(--primary);color:var(--primary)}.unscramble-slot.correct{border-bottom-color:var(--success);color:var(--success)}.unscramble-slot.incorrect{border-bottom-color:var(--error);color:var(--error)}.unscramble-bank{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center;margin:.25rem 0}.reading-practice-container .unscramble-letter{width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.25rem;font-weight:700;text-transform:uppercase;cursor:pointer;background-color:var(--bg-card);color:var(--text-main);border:var(--border-width) solid var(--border);border-radius:var(--radius-button);box-shadow:var(--shadow-button-neutral);transition:border-color .15s ease,color .15s ease,transform .08s ease,box-shadow .08s ease}.reading-practice-container .unscramble-letter:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}.reading-practice-container .unscramble-letter:active:not(:disabled){transform:translateY(var(--ledge));box-shadow:none}.reading-practice-container .unscramble-letter.used{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none}.unscramble-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between}.matching-container{display:flex;flex-direction:column;gap:1.1rem}.matching-board{display:grid;grid-template-columns:1fr;gap:1.25rem}.matching-left-col{display:flex;flex-direction:column;gap:.85rem}.matching-row{display:flex;align-items:center;gap:.75rem}.reading-practice-container .matching-left-btn{width:128px;min-height:48px;padding:.75rem;font-family:var(--font-display);font-size:1rem;font-weight:700;text-align:center;color:var(--text-main);cursor:pointer;background-color:var(--bg-card);border:var(--border-width) solid var(--border);border-radius:var(--radius-button);box-shadow:var(--shadow-button-neutral);transition:border-color .15s ease,background-color .15s ease,transform .08s ease,box-shadow .08s ease}.reading-practice-container .matching-left-btn:hover:not(:disabled){border-color:var(--primary)}.reading-practice-container .matching-left-btn:active:not(:disabled){transform:translateY(var(--ledge));box-shadow:none}.reading-practice-container .matching-left-btn.active-selection{background-color:var(--primary);color:var(--on-primary);border-color:var(--primary)}.reading-practice-container .matching-left-btn.matched{border-color:var(--success);background-color:var(--success-soft)}.matching-bridge{color:var(--text-muted);display:flex;align-items:center}.matching-bridge span{font-size:20px}.matching-slot{flex:1;min-height:48px;border:var(--border-width) dashed var(--border);border-radius:var(--radius-button);background-color:var(--bg-sunken);display:flex;align-items:center;padding:4px}.empty-slot-placeholder{font-size:.8125rem;color:var(--text-muted);width:100%;text-align:center;font-style:italic}.reading-practice-container .matched-item-badge{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;min-height:44px;padding:.4rem .4rem .4rem 1rem;background-color:var(--bg-card);border:var(--border-width) solid var(--success);border-radius:var(--radius-chip);box-shadow:none;font-size:.9375rem;font-weight:600;color:var(--text-main)}.matched-text{flex:1;text-align:left;line-height:1.4}.matching-slot-clear{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:transparent;border:none;border-radius:var(--radius-chip);color:var(--error);font-weight:700;font-size:1rem;cursor:pointer}.matching-slot-clear:hover{background:var(--error-soft)}.matching-right-bank{background-color:var(--bg-sunken);border:var(--border-width) solid var(--border-light);border-radius:var(--radius-card);padding:1.25rem}.bank-title{font-size:.8125rem;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin-bottom:.75rem;letter-spacing:.06em}.matching-bank-items{display:flex;flex-direction:column;gap:.6rem}.reading-practice-container .matching-bank-item{min-height:48px;padding:.7rem 1rem;text-align:left;font-family:var(--font-body);font-size:1rem;font-weight:600;color:var(--text-main);background-color:var(--bg-card);border:var(--border-width) solid var(--border);border-radius:var(--radius-button);box-shadow:var(--shadow-button-neutral);cursor:pointer;transition:border-color .15s ease,color .15s ease,transform .08s ease,box-shadow .08s ease}.reading-practice-container .matching-bank-item:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}.reading-practice-container .matching-bank-item:active:not(:disabled){transform:translateY(var(--ledge));box-shadow:none}.reading-practice-container .matching-bank-item.used{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}.matching-actions{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;margin-top:.25rem}.wizard-footer{margin-top:auto;display:flex;justify-content:flex-end;padding-top:1.25rem;border-top:var(--border-width) solid var(--border-light)}.reading-practice-container .btn.next-btn{min-height:52px;padding:.85rem 1.75rem;font-size:1.0625rem}.cloze-text-layout{display:block}.cloze-blank{display:inline-flex;align-items:center;justify-content:center;min-width:104px;min-height:44px;padding:0 .75rem;margin:.15rem .35rem;border:2px dashed var(--primary);border-radius:var(--radius-chip);background-color:var(--primary-soft);font-family:var(--font-display);font-size:1.0625rem;font-weight:700;color:var(--primary);vertical-align:middle;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}.cloze-blank:hover{background-color:var(--clay-100)}.cloze-blank.selected{border-style:solid;box-shadow:0 0 0 3px rgba(var(--primary-rgb),.28)}.cloze-blank.filled{border-style:solid;background-color:var(--primary);color:var(--on-primary);border-color:var(--primary)}.cloze-blank.correct{background-color:var(--success);border-color:var(--success);border-style:solid;color:var(--on-primary)}.cloze-blank.incorrect{background-color:var(--error);border-color:var(--error);border-style:solid;color:var(--on-primary)}.cloze-feedback-icon{font-size:16px;margin-left:6px;display:inline-flex;align-items:center;justify-content:center}.cloze-controller{padding:1.75rem;display:flex;flex-direction:column;gap:1.25rem;flex:1}.cloze-progress{display:flex;flex-direction:column;gap:.5rem}.cloze-instructions{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.25rem;background-color:var(--bg-sunken);border:var(--border-width) solid var(--border-light);border-radius:var(--radius-button);font-size:1rem;line-height:1.6;color:var(--text-body)}.cloze-instructions .icon{color:var(--primary);flex-shrink:0}.selected-blank-indicator{min-height:44px;display:flex;align-items:center;justify-content:center;padding:.6rem 1rem;background-color:var(--bg-sunken);border-radius:var(--radius-button);text-align:center}.indicator-text{font-size:.9375rem;color:var(--text-muted)}.indicator-text.active{color:var(--primary);font-weight:700}.cloze-word-bank-container{background-color:var(--bg-sunken);border:var(--border-width) solid var(--border-light);border-radius:var(--radius-card);padding:1.25rem;flex:1}.word-bank{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:.5rem}.reading-practice-container .word-bank-item{min-height:48px;padding:.6rem 1.15rem;font-family:var(--font-body);font-size:1rem;font-weight:600;background-color:var(--bg-card);border:var(--border-width) solid var(--border);border-radius:var(--radius-button);box-shadow:var(--shadow-button-neutral);cursor:pointer;color:var(--text-main);transition:border-color .15s ease,color .15s ease,transform .08s ease,box-shadow .08s ease}.reading-practice-container .word-bank-item:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}.reading-practice-container .word-bank-item:active:not(:disabled){transform:translateY(var(--ledge));box-shadow:none}.reading-practice-container .word-bank-item.used{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none}.cloze-actions{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-top:auto}.results-screen{padding:2.5rem 1.75rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.25rem;flex:1}.trophy-container{width:84px;height:84px;background-color:var(--accent-soft);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:.25rem}.trophy-icon{font-size:48px}.results-title{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--text-main);letter-spacing:-.01em}.results-score-box{background-color:var(--bg-sunken);border:var(--border-width) solid var(--border-light);border-radius:var(--radius-card);padding:1.1rem 2.25rem}.results-score-label{font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:.25rem}.results-score-value{font-family:var(--font-display);font-size:2.5rem;font-weight:700;color:var(--success)}.score-slash{color:var(--text-muted);font-weight:400;font-size:1.75rem}.results-stars{display:flex;flex-direction:column;align-items:center;gap:.5rem}.results-stars .star-icon{font-size:40px}.stars-label{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--text-main)}.results-buttons{display:flex;gap:1rem;margin-top:.75rem}.toast-notification{position:fixed;top:6.5rem;right:2rem;display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background-color:var(--bg-card);border:var(--border-width) solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);z-index:200;animation:toastSlideIn .3s cubic-bezier(.16,1,.3,1) forwards;max-width:320px}@keyframes toastSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.toast-icon{display:flex;align-items:center}.toast-icon span{font-size:32px}.toast-notification.correct{border-color:var(--success)}.toast-notification.correct .toast-icon span{color:var(--success)}.toast-notification.incorrect{border-color:var(--error)}.toast-notification.incorrect .toast-icon span{color:var(--error)}.toast-content{display:flex;flex-direction:column}.toast-title{font-family:var(--font-display);font-size:1.0625rem;font-weight:700;color:var(--text-main)}.toast-subtitle{font-size:.875rem;line-height:1.5;color:var(--text-body);margin-top:.15rem}.reading-practice-container .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.6rem 1.25rem;font-family:var(--font-display);font-size:1rem;font-weight:700;border-radius:var(--radius-button);cursor:pointer;transition:background-color .15s ease,transform .08s ease,box-shadow .08s ease}.reading-practice-container .btn-primary{min-height:52px;background-color:var(--primary);color:var(--on-primary);border:none;box-shadow:var(--shadow-button)}.reading-practice-container .btn-primary:hover:not(:disabled){background-color:var(--primary-hover)}.reading-practice-container .btn-primary:active:not(:disabled){transform:translateY(var(--ledge));box-shadow:none}.reading-practice-container .btn-secondary{background-color:var(--bg-card);color:var(--text-main);border:var(--border-width) solid var(--border);box-shadow:var(--shadow-button-neutral)}.reading-practice-container .btn-secondary:hover:not(:disabled){background-color:var(--bg-sunken)}.reading-practice-container .btn-secondary:active:not(:disabled){transform:translateY(var(--ledge));box-shadow:none}.reading-practice-container .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.reading-practice-container .btn .material-symbols-outlined{font-size:20px}.animate-fade-in{animation:fadeIn .35s cubic-bezier(.16,1,.3,1) forwards}.animate-scale-up{animation:scaleUp .35s cubic-bezier(.16,1,.3,1) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@media (max-width: 1024px){.exercise-content-grid{grid-template-columns:1fr}.reading-practice-container .story-panel{height:420px}.reading-practice-container .quiz-panel{min-height:auto}.toast-notification{top:5.5rem;right:1rem}}@media (max-width: 768px){.reading-practice-container{width:calc(100% - 1.5rem);margin:1rem auto}.dashboard-title{font-size:1.75rem}.exercise-grid{grid-template-columns:1fr;gap:1.25rem}.reading-practice-container .exercise-header{flex-direction:column;padding:1.25rem;text-align:center;gap:1rem}.back-btn,.header-actions{width:100%;justify-content:center}.reading-practice-container .btn.btn-audio{width:100%}.tf-container,.matching-board{grid-template-columns:1fr}.matching-row{flex-wrap:wrap;justify-content:center}.reading-practice-container .matching-left-btn,.matching-slot{width:100%}.matching-bridge{transform:rotate(90deg);margin:.25rem 0}.unscramble-actions,.cloze-actions{flex-direction:column;align-items:stretch}.unscramble-actions .btn,.cloze-actions .btn{width:100%}.results-buttons{flex-direction:column;width:100%}.results-buttons .btn{width:100%}}@media (max-width: 480px){.dashboard-title{font-size:1.625rem}.dashboard-subtitle{font-size:1rem}.reading-practice-container .exercise-card,.story-content,.wizard-flow,.cloze-controller{padding:1.25rem}.question-text{font-size:1.25rem}}:root,.theme-vocab{--paper: oklch(.982 .006 85);--paper-2: oklch(.962 .01 85);--paper-3: oklch(.934 .012 84);--line: oklch(.884 .014 82);--ink-400: oklch(.505 .024 60);--ink-700: oklch(.415 .024 55);--ink-900: oklch(.248 .022 55);--clay-050: oklch(.957 .024 45);--clay-100: oklch(.905 .052 45);--clay-400: oklch(.672 .14 42);--clay-500: oklch(.545 .152 39);--clay-600: oklch(.468 .138 38);--clay-700: oklch(.398 .116 37);--leaf-050: oklch(.96 .03 165);--leaf-100: oklch(.906 .058 165);--leaf-500: oklch(.518 .1 165);--leaf-600: oklch(.478 .098 166);--sun-050: oklch(.972 .04 92);--sun-100: oklch(.928 .088 92);--sun-400: oklch(.828 .142 88);--sun-600: oklch(.47 .104 74);--berry-050: oklch(.95 .03 18);--berry-500: oklch(.556 .196 18);--berry-600: oklch(.486 .18 18);--bg-app: var(--paper);--bg-card: #FFFFFF;--bg-sunken: var(--paper-2);--text-main: var(--ink-900);--text-muted: var(--ink-400);--text-body: var(--ink-700);--primary: var(--clay-500);--primary-hover: var(--clay-600);--primary-soft: var(--clay-050);--primary-rgb: 190, 88, 54;--on-primary: #FFFFFF;--accent: var(--sun-400);--accent-soft: var(--sun-050);--success: var(--leaf-500);--success-soft: var(--leaf-050);--error: var(--berry-500);--error-soft: var(--berry-050);--warning: var(--sun-600);--border: var(--line);--border-light: var(--paper-3);--border-width: 1px;--radius-card: 22px;--radius-button: 16px;--radius-pill: 999px;--radius-chip: 12px;--ledge: 4px;--shadow-button: 0 4px 0 var(--clay-700);--shadow-button-neutral: 0 4px 0 var(--line);--shadow-card: 0 1px 2px oklch(.415 .024 55 / .05), 0 8px 24px oklch(.415 .024 55 / .06);--shadow-raised: 0 2px 0 var(--line);--font-display: "Baloo 2", "Be Vietnam Pro", system-ui, sans-serif;--font-body: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;--transition-spring: all .22s cubic-bezier(.34, 1.4, .64, 1);--transition-base: all .18s ease}.dark{--paper: oklch(.208 .014 60);--paper-2: oklch(.256 .016 60);--paper-3: oklch(.318 .016 60);--line: oklch(.372 .018 60);--ink-400: oklch(.712 .018 70);--ink-700: oklch(.858 .014 75);--ink-900: oklch(.948 .01 80);--clay-050: oklch(.268 .042 42);--clay-100: oklch(.382 .07 42);--clay-400: oklch(.762 .124 48);--clay-500: oklch(.668 .142 44);--clay-600: oklch(.726 .13 46);--clay-700: oklch(.398 .096 40);--leaf-050: oklch(.31 .044 166);--leaf-100: oklch(.368 .06 166);--leaf-500: oklch(.74 .118 166);--leaf-600: oklch(.79 .11 166);--sun-050: oklch(.33 .048 90);--sun-100: oklch(.392 .07 90);--sun-400: oklch(.846 .14 90);--sun-600: oklch(.872 .132 88);--berry-050: oklch(.318 .066 18);--berry-500: oklch(.706 .158 20);--berry-600: oklch(.756 .146 20);--bg-app: var(--paper);--bg-card: oklch(.252 .016 60);--bg-sunken: oklch(.232 .014 60);--text-main: var(--ink-900);--text-muted: var(--ink-400);--text-body: var(--ink-700);--primary: var(--clay-500);--primary-hover: var(--clay-600);--primary-soft: var(--clay-050);--on-primary: oklch(.188 .02 50);--primary-rgb: 226, 138, 96;--accent: var(--sun-400);--accent-soft: var(--sun-050);--success: var(--leaf-500);--success-soft: var(--leaf-050);--error: var(--berry-500);--error-soft: var(--berry-050);--warning: var(--sun-600);--border: var(--line);--border-light: var(--paper-3);--shadow-button: 0 4px 0 var(--clay-700);--shadow-card: 0 1px 2px oklch(0 0 0 / .4), 0 8px 24px oklch(0 0 0 / .28);color-scheme:dark}*{margin:0;padding:0;box-sizing:border-box}body,.app,.shadow-card,.card-surface{transition:background-color .2s ease,color .2s ease,border-color .2s ease}html{-webkit-text-size-adjust:100%}body{font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-app);color:var(--text-main);min-height:100vh}h1,h2,h3,h4,.font-display{font-family:var(--font-display);font-weight:700;line-height:1.2;letter-spacing:-.01em}.app{min-height:100vh;display:flex;flex-direction:column;background:var(--bg-app)}.main-content{flex:1;padding:2rem 1.5rem 4rem;max-width:1180px;margin:0 auto;width:100%}.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24;vertical-align:middle;-webkit-user-select:none;user-select:none}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:var(--line);border-radius:var(--radius-pill);border:3px solid var(--bg-app)}.btn-3d,.btn-ledge{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:52px;padding:.75rem 1.5rem;background:var(--primary);color:var(--on-primary);border:none;border-radius:var(--radius-button);font-family:var(--font-display);font-size:1.0625rem;font-weight:700;letter-spacing:.01em;cursor:pointer;box-shadow:var(--shadow-button);transform:translateY(0);transition:background-color .15s ease,transform .08s ease,box-shadow .08s ease}.btn-3d:hover,.btn-ledge:hover{background:var(--primary-hover)}.btn-3d:active,.btn-ledge:active{transform:translateY(var(--ledge));box-shadow:none}.btn-3d:disabled,.btn-ledge:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--shadow-button)}.btn-ledge.is-neutral{background:var(--bg-card);color:var(--text-main);border:1px solid var(--line);box-shadow:var(--shadow-button-neutral)}.btn-ledge.is-neutral:hover{background:var(--paper-2)}.btn-ledge.is-success{background:var(--success);color:#fff;box-shadow:0 4px 0 var(--leaf-600)}.dark .btn-ledge.is-success{color:var(--on-primary)}:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--sun-400);outline-offset:2px;border-radius:var(--radius-chip)}.shadow-soft{box-shadow:var(--shadow-card)}.shadow-card,.card-surface{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}.eyebrow{font-family:var(--font-body);font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (max-width: 768px){.main-content{padding:1.25rem 1rem 3rem}}