:root{--bg:#f6f7fb;--surface:#fff;--surface-soft:#fbfbfe;--fg:#19182d;--muted:#6e7085;--muted-strong:#55576c;--border:#e6e6f1;--border-strong:#d7d6e6;--accent:#6c5ce7;--accent-hover:#5746d7;--accent-soft:#f0edff;--accent-pale:#f7f5ff;--mint:#18a989;--mint-soft:#e9faf6;--danger:#d64e69;--danger-soft:#fff0f3;--warning:#b77708;--warning-soft:#fff7e7;--font-display:"Be Vietnam Pro", "Segoe UI", sans-serif;--font-body:"Be Vietnam Pro", "Segoe UI", Roboto, Arial, system-ui, sans-serif;--font-mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--radius-xl:32px;--shadow-sm:0 8px 24px #2a245a0f;--shadow-md:0 18px 52px #2a245a1a;--shadow-accent:0 12px 26px #6c5ce73d}*{box-sizing:border-box;margin:0}html{background:var(--bg);scroll-behavior:smooth;width:100%;height:auto;min-height:100%;overflow:hidden scroll}body{touch-action:pan-y;background:radial-gradient(circle at 8% 4%, #6c5ce717, transparent 28rem), radial-gradient(circle at 94% 18%, #2dd4bf14, transparent 24rem), var(--bg);width:100%;min-height:100svh;color:var(--fg);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;line-height:1.6;overflow:hidden visible}button,input,textarea{font:inherit}button:focus-visible,input:focus-visible,[role=button]:focus-visible{outline-offset:3px;outline:3px solid #6c5ce738}button svg{flex:none}#root{width:100%;min-height:100svh;overflow:visible}.app{width:min(100%,1180px);height:auto;min-height:100svh;padding:var(--space-6) var(--space-8) var(--space-16);flex-direction:column;margin:0 auto;display:flex;overflow:visible}.app-create,.app-result{max-width:900px}.app-wide{max-width:1180px}.screen{display:none}.screen.active{flex-direction:column;flex:1;animation:.38s both screen-in;display:flex}@keyframes screen-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.masthead{justify-content:space-between;align-items:center;gap:var(--space-6);margin-bottom:var(--space-10);display:flex}.brand{align-items:center;gap:.7rem;display:inline-flex}.brand-mark{background:linear-gradient(145deg,#fff,#f0edff);border:1px solid #6c5ce724;border-radius:13px;place-items:center;width:42px;height:42px;padding:9px;display:grid;box-shadow:0 8px 22px #6c5ce729}.brand-mark img{width:100%;height:100%;display:block}.logo{letter-spacing:-.07em;font-size:1.45rem;font-weight:700;line-height:1}.logo-accent{color:var(--accent)}.brand-tagline{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:.25rem;font-size:.63rem;font-weight:600;line-height:1}.header-status{align-items:center;gap:var(--space-2);border:1px solid var(--border);color:var(--muted-strong);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffb8;border-radius:999px;padding:.55rem .85rem;font-size:.76rem;font-weight:500;display:inline-flex}.header-status-dot{background:var(--mint);border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 4px #18a9891f}.eyebrow{margin-bottom:var(--space-2);color:var(--accent);letter-spacing:.12em;text-transform:uppercase;align-items:center;gap:.4rem;font-size:.69rem;font-weight:700;line-height:1.4;display:flex}.eyebrow-pill{width:fit-content;margin-bottom:var(--space-5);background:#ffffffb8;border:1px solid #6c5ce729;border-radius:999px;padding:.45rem .7rem}.title{color:var(--fg);font-family:var(--font-display);letter-spacing:-.055em;font-size:clamp(2.3rem,5vw,3.6rem);font-weight:700;line-height:1.08}.title span{color:var(--accent)}.subtitle{max-width:54ch;margin-top:var(--space-4);color:var(--muted);font-size:.98rem;line-height:1.75}.subtitle strong{color:var(--fg)}.btn{justify-content:center;align-items:center;gap:var(--space-2);border:1px solid var(--border);background:var(--surface);min-height:44px;color:var(--fg);cursor:pointer;border-radius:12px;padding:.7rem 1.2rem;font-size:.88rem;font-weight:600;line-height:1;text-decoration:none;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s;display:inline-flex;box-shadow:0 3px 10px #2a245a0a}.btn:hover{border-color:var(--border-strong);background:var(--surface-soft);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-primary,.btn-ai{color:#fff;box-shadow:var(--shadow-accent);background:linear-gradient(135deg,#7565ec,#5b49dc);border-color:#0000}.btn-primary:hover,.btn-ai:hover{color:#fff;background:linear-gradient(135deg,#6553e2,#4f3cce);border-color:#0000}.btn-danger{background:var(--danger-soft);color:var(--danger);border-color:#d64e693d}.btn[disabled]{cursor:not-allowed;opacity:.45;box-shadow:none;transform:none}.btn-sm{min-height:39px;padding:.58rem .85rem;font-size:.79rem}.btn-utility{color:var(--muted-strong)}.topics-hero{border-radius:var(--radius-xl);background:linear-gradient(120deg, #fffffff0, #f6f3ffe6), var(--surface);min-height:346px;box-shadow:var(--shadow-md);border:1px solid #6c5ce721;grid-template-columns:minmax(0,1.35fr) minmax(290px,.75fr);align-items:center;gap:clamp(2rem,5vw,5rem);padding:clamp(1.5rem,4.6vw,3.5rem);display:grid;position:relative;overflow:hidden}.topics-hero:before,.topics-hero:after{content:"";pointer-events:none;border-radius:50%;position:absolute}.topics-hero:before{border:55px solid #6c5ce714;width:330px;height:330px;top:-170px;right:-135px}.topics-hero:after{border:38px solid #18a98912;width:190px;height:190px;bottom:-145px;left:43%}.hero-copy,.practice-settings{z-index:1;position:relative}.practice-settings{padding:var(--space-4);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffc2;border:1px solid #fffc;box-shadow:0 20px 45px #4a3d971c}.settings-heading{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-2) var(--space-4);display:flex}.settings-heading>div:last-child{flex-direction:column;display:flex}.settings-heading strong{font-size:.85rem}.settings-heading span{color:var(--muted);margin-top:.12rem;font-size:.68rem}.settings-icon{background:var(--accent-soft);width:36px;height:36px;color:var(--accent);border-radius:11px;place-items:center;display:grid}.mode-toggle{gap:var(--space-2);display:grid}.mode-btn{align-items:center;gap:var(--space-3);width:100%;min-height:62px;color:var(--muted-strong);cursor:pointer;text-align:left;background:0 0;border:1px solid #0000;border-radius:14px;padding:.72rem .85rem;transition:background .18s,border-color .18s,color .18s,transform .18s;display:flex}.mode-btn>span{flex-direction:column;display:flex}.mode-btn strong{font-size:.82rem;font-weight:650}.mode-btn small{color:var(--muted);margin-top:.1rem;font-size:.65rem}.mode-btn:hover{background:var(--accent-pale);color:var(--accent)}.mode-btn.active{background:var(--accent-soft);color:var(--accent);border-color:#6c5ce724}.mode-btn.active svg{filter:drop-shadow(0 3px 6px #6c5ce733)}.topics-section-heading{margin-top:var(--space-12);justify-content:space-between;align-items:flex-end;gap:var(--space-6);display:flex}.topics-section-heading h2{letter-spacing:-.035em;font-size:1.45rem;font-weight:700}.topic-actions{justify-content:flex-end;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.topics-grid{margin-top:var(--space-6);gap:var(--space-4);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.topic-card{--card-accent:var(--accent);--card-soft:var(--accent-soft);min-height:224px;padding:var(--space-6);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);cursor:pointer;box-shadow:var(--shadow-sm);flex-direction:column;transition:transform .22s,border-color .22s,box-shadow .22s;display:flex;position:relative}.topic-card-2{--card-accent:#0e9f8a;--card-soft:#eafaf7}.topic-card-3{--card-accent:#e27b47;--card-soft:#fff3ec}.topic-card-4{--card-accent:#3e7bdd;--card-soft:#edf4ff}.topic-card:hover{border-color:color-mix(in srgb, var(--card-accent) 30%, var(--border));transform:translateY(-4px);box-shadow:0 18px 44px #2a245a1c}.topic-card-top{min-height:44px;margin-bottom:var(--space-5);justify-content:space-between;align-items:center;display:flex}.topic-icon{background:var(--card-soft);width:44px;height:44px;color:var(--card-accent);border-radius:14px;place-items:center;display:grid}.topic-name{color:var(--fg);letter-spacing:-.025em;font-size:1.15rem;font-weight:700;line-height:1.35}.topic-meta{margin-top:var(--space-2);color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:.7rem;font-weight:600}.topic-card-footer{padding-top:var(--space-5);justify-content:space-between;align-items:center;gap:var(--space-3);margin-top:auto;display:flex}.topic-status{color:var(--muted);font-size:.72rem;line-height:1.4}.topic-status.in-progress{color:var(--warning);font-weight:600}.topic-open{background:var(--surface-soft);width:32px;height:32px;color:var(--muted);border-radius:50%;flex:none;place-items:center;transition:background .18s,color .18s,transform .18s;display:grid}.topic-card:hover .topic-open{background:var(--card-soft);color:var(--card-accent);transform:rotate(6deg)}.custom-badge{width:fit-content;margin-bottom:var(--space-2);background:var(--card-soft);color:var(--card-accent);letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:.24rem .5rem;font-size:.61rem;font-weight:700}.delete-btn{width:34px;height:34px;color:var(--muted);cursor:pointer;opacity:0;background:0 0;border:0;border-radius:10px;place-items:center;transition:opacity .18s,background .18s,color .18s;display:grid}.topic-card:hover .delete-btn,.delete-btn:focus-visible{opacity:1}.delete-btn:hover{background:var(--danger-soft);color:var(--danger)}.create-card{justify-content:center;align-items:center;gap:var(--space-4);border:1.5px dashed var(--border-strong);box-shadow:none;background:#ffffff8a;flex-direction:row}.create-card:hover{background:var(--accent-pale);border-color:#6c5ce780}.create-card .plus{background:var(--accent-soft);width:48px;height:48px;color:var(--accent);border-radius:15px;flex:none;place-items:center;display:grid}.create-label{color:var(--fg);font-size:.95rem;font-weight:700}.create-hint{max-width:19ch;color:var(--muted);margin-top:.2rem;font-size:.7rem;line-height:1.5}.page-nav{margin-bottom:var(--space-8)}.back-link{align-items:center;gap:var(--space-2);color:var(--muted-strong);cursor:pointer;background:0 0;border:0;font-size:.82rem;font-weight:600;transition:color .18s,transform .18s;display:inline-flex}.back-link:hover{color:var(--accent);transform:translate(-2px)}.page-heading{margin-bottom:var(--space-8);align-items:flex-start;gap:var(--space-5);display:flex}.page-heading-icon{background:var(--accent-soft);width:50px;height:50px;color:var(--accent);border-radius:16px;flex:none;place-items:center;display:grid}.page-heading .title{font-size:clamp(2rem,5vw,3rem)}.page-heading .subtitle{margin-top:var(--space-2)}.create-form-card{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-md);padding:clamp(1.25rem,4vw,2.5rem)}.form-group{margin-bottom:var(--space-6)}.topic-name-field{padding-bottom:var(--space-6);border-bottom:1px solid var(--border)}.form-label{margin-bottom:var(--space-2);color:var(--fg);font-size:.78rem;font-weight:650;display:block}.label-note{color:var(--muted);font-size:.68rem;font-weight:400}.form-input,.form-textarea{border:1px solid var(--border);background:var(--surface-soft);width:100%;min-height:48px;color:var(--fg);border-radius:12px;outline:none;padding:.78rem .95rem;font-size:.88rem;transition:border-color .18s,background .18s,box-shadow .18s}.form-input::placeholder,.form-textarea::placeholder{color:#a0a1b2}.form-input:focus,.form-textarea:focus{background:var(--surface);border-color:#6c5ce794;box-shadow:0 0 0 4px #6c5ce717}.form-textarea{resize:vertical;min-height:90px}.sentence-row{padding:var(--space-5) 0;border-bottom:1px solid var(--border)}.sentence-row-header{align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);color:var(--muted);letter-spacing:.09em;text-transform:uppercase;font-size:.64rem;font-weight:700;display:flex}.sentence-row-header span{background:var(--accent-soft);width:24px;height:24px;color:var(--accent);border-radius:8px;place-items:center;display:grid}.sentence-row-grid{gap:var(--space-4);grid-template-columns:1fr 1fr;display:grid}.hint-text{color:var(--muted);font-size:.76rem;line-height:1.6}.form-hint{margin-top:var(--space-5);padding:var(--space-3) var(--space-4);background:var(--accent-pale);color:var(--muted-strong);border-radius:12px}.form-actions{margin-top:var(--space-8);justify-content:flex-end;gap:var(--space-3);flex-wrap:wrap;display:flex}.app-play{min-height:100svh}.screen.active.play-layout{gap:var(--space-4)}.play-main{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);min-height:640px;box-shadow:var(--shadow-md);flex-direction:column;flex:1;padding:clamp(1.25rem,4vw,2.5rem);display:flex}.play-header{align-items:center;gap:var(--space-4);margin-bottom:var(--space-8);grid-template-columns:1fr auto 1fr;display:grid}.play-topic-label{background:var(--accent-pale);color:var(--accent);letter-spacing:.05em;text-align:center;text-transform:uppercase;border-radius:999px;padding:.4rem .7rem;font-size:.68rem;font-weight:700}.progress-wrap{justify-self:end}.progress{color:var(--muted-strong);letter-spacing:.05em;text-align:right;text-transform:uppercase;font-size:.67rem;font-weight:700}.progress-bar{width:138px;height:6px;margin-top:var(--space-2);background:var(--accent-soft);border-radius:999px;overflow:hidden}.progress-bar>span{border-radius:inherit;background:linear-gradient(90deg, var(--accent), #8c7cf2);height:100%;transition:width .35s;display:block;box-shadow:0 0 12px #6c5ce759}.practice-prompt{width:100%;max-width:880px;margin:0 auto var(--space-6);border-radius:var(--radius-lg);text-align:center;background:linear-gradient(135deg,#fbfaff,#f4f1ff);border:1px solid #6c5ce71f;padding:clamp(1.4rem,4vw,2.5rem);position:relative;overflow:hidden}.practice-prompt:after{content:"";border:24px solid #6c5ce714;border-radius:50%;width:120px;height:120px;position:absolute;top:-78px;right:-35px}.practice-kicker{color:var(--accent);letter-spacing:.1em;text-transform:uppercase;font-size:.66rem;font-weight:700}.sentence-vi{max-width:32ch;margin:var(--space-3) auto 0;color:var(--fg);letter-spacing:-.035em;text-align:center;font-size:clamp(1.4rem,4vw,2.15rem);font-weight:700;line-height:1.4}.sentence-audio-actions{margin-bottom:var(--space-8);justify-content:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.sentence-audio-actions .btn{background:var(--surface-soft);min-height:36px;box-shadow:none;border-radius:999px}.slots-area{min-height:62px;margin:0 auto var(--space-8);justify-content:center;align-items:center;gap:var(--space-3);isolation:isolate;flex-wrap:wrap;display:flex}.slot{min-width:92px;height:50px;padding:0 var(--space-4);z-index:1;border:1.5px dashed var(--border-strong);background:var(--surface-soft);color:var(--fg);cursor:pointer;border-radius:13px;justify-content:center;align-items:center;font-size:.93rem;font-weight:600;transition:border-color .18s,background .18s,transform .18s;display:inline-flex;position:relative}.slot:hover{border-color:#6c5ce775}.slot.filled{z-index:2;background:var(--accent-pale);color:var(--accent);border-style:solid;border-color:#6c5ce747}.slot.correct,.slot-input.correct{background:var(--mint-soft);color:#087962;border-color:#18a98966}.slot.wrong,.slot-input.wrong{background:var(--danger-soft);color:var(--danger);border-color:#d64e6961}.slot-input{height:48px;padding:0 var(--space-2);border:0;border-bottom:2px solid var(--border-strong);color:var(--fg);text-align:center;background:0 0;outline:0;justify-content:center;align-items:center;font-size:.95rem;font-weight:600;transition:border-color .18s,background .18s;display:inline-flex}.slot-input::placeholder{color:#a8a8b8;letter-spacing:.08em}.slot-input:focus{border-bottom-color:var(--accent)}.word-bank-section{width:100%;max-width:900px;padding-top:var(--space-5);align-items:center;gap:var(--space-4);border-top:1px solid var(--border);flex-direction:column;margin:auto auto 0;display:flex}.bank-label{color:var(--muted);letter-spacing:.1em;text-align:center;text-transform:uppercase;font-size:.64rem;font-weight:700}.word-bank{justify-content:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.word-chip{border:1px solid var(--border);background:var(--surface);color:var(--fg);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:12px;padding:.62rem .9rem;font-size:.86rem;font-weight:600;transition:border-color .18s,transform .14s,opacity .18s,box-shadow .18s;box-shadow:0 4px 12px #2a245a0f}.word-chip:hover{border-color:#6c5ce766;transform:translateY(-2px);box-shadow:0 8px 18px #2a245a17}.word-chip:active{transform:translateY(0)}.word-chip.used{opacity:.18;pointer-events:none}.play-actions{padding-top:var(--space-4);justify-content:center;display:flex;margin-top:var(--space-5)!important}.feedback{min-height:1.6em;margin-top:var(--space-4);color:var(--muted);text-align:center;font-size:.86rem;font-weight:600}.feedback.correct-text{color:var(--mint)}.feedback.wrong-text{color:var(--danger)}.hint{margin:var(--space-5) 0;color:var(--muted);text-align:center;font-size:.75rem}.spacer{flex:1}#screen-result{padding:var(--space-4) 0 var(--space-10)}.result-header{padding:var(--space-8) var(--space-4);text-align:center}.score-ring{width:152px;height:152px;margin:0 auto var(--space-6);background:linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(var(--accent), #9d8ff4, var(--mint), var(--accent)) border-box;color:var(--accent);border:7px solid #0000;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;display:flex;box-shadow:0 16px 42px #6c5ce729}.score-number{color:var(--fg);letter-spacing:-.06em;margin-top:.15rem;font-size:2.65rem;font-weight:750;line-height:1}.score-label{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:.35rem;font-size:.61rem;font-weight:700}.result-eyebrow{justify-content:center}.result-header .title{font-size:clamp(2rem,5vw,3rem)}.result-header .subtitle{margin:var(--space-3) auto 0}.result-list{padding:var(--space-6);gap:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);flex-direction:column;display:flex}.result-item{padding:var(--space-4);background:var(--surface-soft);border-radius:14px}.result-item .vi{margin-bottom:var(--space-2);color:var(--fg);font-size:.91rem;font-weight:650}.result-item .en{color:var(--muted);font-size:.84rem}.result-item .your{margin-right:var(--space-2);color:var(--danger);text-decoration:line-through}.result-item .correct-ans{color:var(--mint);font-weight:650}.result-actions{margin-top:var(--space-6);justify-content:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.modal-overlay{z-index:300;padding:var(--space-4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#15122f7a;justify-content:center;align-items:center;animation:.2s both overlay-in;display:flex;position:fixed;inset:0}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.modal{width:min(100%,540px);max-height:90vh;padding:var(--space-6);border-radius:var(--radius-lg);background:var(--surface);border:1px solid #ffffffb8;animation:.25s both modal-in;overflow:auto;box-shadow:0 28px 80px #15122f47}@keyframes modal-in{0%{opacity:0;transform:translateY(14px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.modal-lg{width:min(100%,680px)}.modal-header{margin-bottom:var(--space-6);justify-content:space-between;align-items:center;gap:var(--space-4);display:flex}.modal-heading{align-items:center;gap:var(--space-3);display:flex}.modal-heading .eyebrow{margin-bottom:.1rem;font-size:.58rem}.modal-header h2{color:var(--fg);letter-spacing:-.03em;font-size:1.25rem;font-weight:700}.modal-feature-icon{background:var(--accent-soft);width:44px;height:44px;color:var(--accent);border-radius:14px;flex:none;place-items:center;display:grid}.modal-close{background:var(--surface-soft);width:36px;height:36px;color:var(--muted);cursor:pointer;border:0;border-radius:11px;flex:none;place-items:center;transition:background .18s,color .18s;display:grid}.modal-close:hover{background:var(--danger-soft);color:var(--danger)}.dropzone{min-height:190px;padding:var(--space-8) var(--space-4);justify-content:center;align-items:center;gap:var(--space-2);border:1.5px dashed var(--border-strong);border-radius:var(--radius-md);background:var(--surface-soft);color:var(--muted);cursor:pointer;text-align:center;flex-direction:column;transition:border-color .18s,background .18s,color .18s;display:flex}.dropzone:hover,.dropzone.active{background:var(--accent-pale);color:var(--accent);border-color:#6c5ce78c}.dropzone p{color:var(--fg);font-size:.86rem;font-weight:600}.dropzone-hint{font-size:.69rem}.modal-loading,.modal-error{margin-top:var(--space-4);padding:var(--space-3);text-align:center;border-radius:10px;font-size:.8rem}.modal-loading{background:var(--accent-pale);color:var(--accent)}.modal-error{background:var(--danger-soft);color:var(--danger)}.preview-section{margin-top:var(--space-5)}.preview-title{margin-bottom:var(--space-3);color:var(--fg);font-size:.82rem}.preview-list{max-height:230px;padding:var(--space-3);gap:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-soft);flex-direction:column;display:flex;overflow:auto}.preview-item{padding:var(--space-3);background:var(--surface);border-radius:10px}.preview-vi{color:var(--fg);margin-bottom:.2rem;font-size:.82rem;font-weight:600}.preview-en{color:var(--muted);font-size:.75rem}.preview-more{padding:var(--space-2);color:var(--muted);text-align:center;font-size:.72rem}.modal-actions{margin-top:var(--space-6);justify-content:flex-end;gap:var(--space-3);flex-wrap:wrap;display:flex}.modal-loading-state{align-items:center;gap:var(--space-3);color:var(--muted);text-align:center;flex-direction:column;display:flex}.modal-loading-state strong{color:var(--fg)}.modal-loading-state .hint{margin:0}.spin{animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.chat-fab{width:58px;height:58px;right:var(--space-6);bottom:var(--space-6);z-index:200;color:#fff;cursor:pointer;background:linear-gradient(145deg,#7969ef,#5542d2);border:0;border-radius:18px;place-items:center;transition:transform .18s,box-shadow .18s;display:grid;position:fixed;box-shadow:0 16px 34px #6c5ce75c}.chat-fab:after{content:"";border:1px solid #6c5ce733;border-radius:22px;position:absolute;inset:-5px}.chat-fab:hover{transform:translateY(-3px)rotate(-2deg);box-shadow:0 20px 40px #6c5ce76b}.chat-popup{width:390px;height:min(570px,100vh - 3rem);right:var(--space-6);bottom:var(--space-6);z-index:250;border-radius:var(--radius-lg);animation:.22s both modal-in;position:fixed;overflow:hidden;box-shadow:0 28px 80px #15122f47}.chat-panel{border-radius:inherit;background:var(--surface);border:1px solid #6c5ce724;flex-direction:column;height:100%;display:flex;overflow:hidden}.chat-header{min-height:62px;padding:var(--space-3) var(--space-4);justify-content:space-between;align-items:center;gap:var(--space-2);border-bottom:1px solid var(--border);background:linear-gradient(135deg, var(--accent-pale), #fff);color:var(--fg);font-size:.86rem;font-weight:700;display:flex}.chat-messages{min-height:0;padding:var(--space-4);gap:var(--space-3);flex-direction:column;flex:1;display:flex;overflow-y:auto}.chat-empty{padding:var(--space-8) var(--space-4);align-items:center;gap:var(--space-3);color:var(--accent);text-align:center;flex-direction:column;margin:auto;display:flex}.chat-empty strong{color:var(--fg);font-size:.9rem}.chat-empty p{max-width:28ch;color:var(--muted);font-size:.78rem;line-height:1.6}.chat-bubble{align-items:flex-start;gap:var(--space-2);display:flex}.chat-bubble.user{flex-direction:row-reverse}.chat-avatar{border-radius:9px;flex:none;place-items:center;width:28px;height:28px;margin-top:2px;display:grid}.chat-bubble.assistant .chat-avatar{background:var(--accent-soft);color:var(--accent)}.chat-bubble.user .chat-avatar{background:var(--mint-soft);color:var(--mint)}.chat-content{max-width:84%}.chat-text{color:var(--fg);overflow-wrap:anywhere;border-radius:12px;padding:.65rem .8rem;font-size:.82rem;line-height:1.55}.chat-bubble.assistant .chat-text{background:var(--surface-soft);border-top-left-radius:4px}.chat-bubble.user .chat-text{background:var(--accent-soft);border-top-right-radius:4px}.chat-error{padding:var(--space-2);background:var(--danger-soft);color:var(--danger);text-align:center;border-radius:9px;font-size:.72rem}.chat-input-area{padding:var(--space-3);gap:var(--space-2);border-top:1px solid var(--border);background:var(--surface);display:flex}.chat-input{border:1px solid var(--border);background:var(--surface-soft);min-width:0;min-height:42px;color:var(--fg);border-radius:12px;outline:0;flex:1;padding:.7rem .85rem;font-size:.8rem;transition:border-color .18s,box-shadow .18s}.chat-input:focus{border-color:#6c5ce780;box-shadow:0 0 0 4px #6c5ce714}.chat-send-btn{background:var(--accent);color:#fff;cursor:pointer;border:0;border-radius:12px;flex:none;place-items:center;width:42px;height:42px;transition:background .18s,transform .18s;display:grid}.chat-send-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}.chat-send-btn[disabled]{cursor:not-allowed;opacity:.45}.chat-new-btn,.chat-close-btn{border:1px solid var(--border);width:32px;height:32px;color:var(--muted);cursor:pointer;background:#ffffffb3;border-radius:9px;place-items:center;transition:border-color .18s,color .18s,background .18s;display:inline-grid}.chat-new-btn:hover,.chat-close-btn:hover{background:var(--accent-soft);color:var(--accent);border-color:#6c5ce74d}.toast-container{width:min(400px,100vw - 2rem);top:var(--space-4);right:var(--space-4);z-index:500;gap:var(--space-2);flex-direction:column;display:flex;position:fixed}.toast{padding:var(--space-3) var(--space-4);align-items:flex-start;gap:var(--space-3);border:1px solid var(--border);background:var(--surface);color:var(--muted-strong);box-shadow:var(--shadow-md);border-radius:14px;font-size:.8rem;line-height:1.5;animation:.25s both toast-in;display:flex}@keyframes toast-in{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}.toast-success{background:var(--mint-soft);color:#087962;border-color:#18a98933}.toast-error{background:var(--danger-soft);color:var(--danger);border-color:#d64e6933}.toast-icon{flex:none;margin-top:1px}.toast-message{overflow-wrap:anywhere;flex:1}.toast-close{color:inherit;cursor:pointer;opacity:.58;background:0 0;border:0;flex:none;margin-top:1px;padding:0}.toast-close:hover{opacity:1}.app-loading{place-content:center;justify-items:center;gap:var(--space-4);min-height:100svh;color:var(--muted);display:grid}.loading-mark{background:var(--surface);width:58px;height:58px;box-shadow:var(--shadow-md);border-radius:18px;padding:13px}.loading-mark img{width:100%;height:100%}.loading-bar{background:var(--accent-soft);border-radius:999px;width:130px;height:4px;overflow:hidden}.loading-bar span{border-radius:inherit;background:var(--accent);width:45%;height:100%;animation:1.1s ease-in-out infinite alternate loading-slide;display:block}@keyframes loading-slide{0%{transform:translate(-10%)}to{transform:translate(130%)}}.app-loading p{font-size:.75rem}@media (width<=960px){.topics-hero{gap:var(--space-8);grid-template-columns:minmax(0,1fr) minmax(260px,.7fr)}.topics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=760px){.app{padding:var(--space-4) var(--space-4) var(--space-10)}.masthead{margin-bottom:var(--space-8)}.topics-hero{gap:var(--space-8);grid-template-columns:1fr;min-height:0}.practice-settings{max-width:none}.topics-section-heading{flex-direction:column;align-items:flex-start}.topic-actions{justify-content:flex-start;width:100%}.sentence-row-grid{grid-template-columns:1fr}.play-main{min-height:calc(100svh - 130px)}.play-topic-label{display:none}.play-header{grid-template-columns:1fr 1fr}}@media (width<=560px){.header-status{display:none}.brand-mark{width:38px;height:38px}.topics-hero{padding:var(--space-6);border-radius:var(--radius-lg)}.title{font-size:clamp(2rem,10vw,2.55rem)}.subtitle{font-size:.88rem}.practice-settings{margin:0 -.35rem -.35rem}.topics-section-heading{margin-top:var(--space-10)}.topic-actions{grid-template-columns:1fr 1fr;display:grid}.topic-actions .btn{width:100%}.topics-grid{grid-template-columns:1fr}.topic-card{min-height:205px}.delete-btn{opacity:1}.page-heading{gap:var(--space-3)}.page-heading-icon{width:42px;height:42px}.create-form-card{border-radius:var(--radius-lg)}.form-actions .btn{flex:1}.play-main{min-height:calc(100svh - 104px);padding:var(--space-4);border-radius:var(--radius-lg);margin:0 -.25rem}.play-header{margin-bottom:var(--space-6)}.progress-bar{width:104px}.practice-prompt{padding:var(--space-6) var(--space-4)}.sentence-vi{font-size:1.42rem}.sentence-audio-actions{gap:.4rem}.sentence-audio-actions .btn{min-height:34px;padding:.52rem .68rem;font-size:.69rem}.slots-area{gap:var(--space-2)}.slot{min-width:76px;height:46px;padding:0 var(--space-3);font-size:.82rem}.result-list{padding:var(--space-3)}.result-actions .btn{flex:1}.modal-overlay{padding:var(--space-3);align-items:flex-end}.modal{max-height:92svh;padding:var(--space-5);border-radius:var(--radius-lg)}.modal-actions .btn{flex:1}.chat-fab{width:52px;height:52px;right:var(--space-4);bottom:var(--space-4);border-radius:16px}.chat-popup{width:auto;height:auto;inset:var(--space-3);max-height:calc(100svh - var(--space-6))}.toast-container{top:var(--space-3);right:var(--space-3)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}