:root{--bg:oklch(97% .012 80);--surface:oklch(99% .005 80);--fg:oklch(20% .02 60);--muted:oklch(48% .015 60);--border:oklch(89% .012 80);--accent:oklch(58% .16 35);--font-display:"Be Vietnam Pro", "Noto Serif", "Times New Roman", serif;--font-body:"Be Vietnam Pro", "Noto Sans", "Segoe UI", Roboto, Arial, system-ui, sans-serif;--font-mono:ui-monospace, "IBM Plex Mono", "JetBrains Mono", Menlo, monospace;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem}*{box-sizing:border-box;margin:0}html,body{background:var(--bg);height:100%;color:var(--fg);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.6}#root{text-align:left;box-sizing:border-box;border:none;width:100%;max-width:100%;min-height:100svh;margin:0;display:block}.app{max-width:720px;min-height:100vh;padding:var(--space-6) var(--space-4);flex-direction:column;margin:0 auto;display:flex}.app-wide{max-width:1160px}.app-play{min-height:auto}.screen{display:none}.screen.active{flex-direction:column;flex:1;display:flex}.eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:var(--space-2);font-size:.7rem}.title{font-family:var(--font-display);color:var(--fg);font-size:clamp(2rem,5vw,2.75rem);font-weight:600;line-height:1.15}.subtitle{color:var(--muted);margin-top:var(--space-2);max-width:44ch;font-size:1rem}.masthead{margin-bottom:var(--space-8);padding-bottom:var(--space-4);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;display:flex}.logo{font-family:var(--font-display);letter-spacing:-.01em;font-size:1.25rem;font-weight:600}.logo-accent{color:var(--accent)}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);font-family:var(--font-body);border:1.5px solid var(--border);background:var(--surface);color:var(--fg);cursor:pointer;font-size:.95rem;font-weight:500;text-decoration:none;transition:border-color .15s,background .15s;display:inline-flex}.btn:hover{border-color:var(--fg)}.btn-primary{background:var(--fg);color:var(--surface);border-color:var(--fg)}.btn-primary:hover{background:var(--muted);border-color:var(--muted)}.btn-danger{color:oklch(45% .16 25);border-color:oklch(75% .1 25)}.btn-danger:hover{background:oklch(96% .04 25);border-color:oklch(55% .18 25)}.btn[disabled]{opacity:.45;cursor:not-allowed}.btn-sm{padding:var(--space-2) var(--space-3);font-size:.8rem}.mode-toggle{border:1.5px solid var(--border);margin-top:var(--space-6);display:inline-flex}.mode-btn{padding:var(--space-2) var(--space-4);font-family:var(--font-body);cursor:pointer;color:var(--muted);background:0 0;border:none;font-size:.875rem;transition:background .15s,color .15s}.mode-btn.active{background:var(--fg);color:var(--surface)}.mode-btn:not(:last-child){border-right:1.5px solid var(--border)}.topics-grid{gap:var(--space-4);margin-top:var(--space-8);grid-template-columns:1fr;display:grid}@media (width>=560px){.topics-grid{grid-template-columns:1fr 1fr}}.topic-card{border:1.5px solid var(--border);padding:var(--space-6);background:var(--surface);cursor:pointer;gap:var(--space-2);flex-direction:column;transition:border-color .15s;display:flex;position:relative}.topic-card:hover{border-color:var(--fg)}.topic-card .topic-name{font-family:var(--font-display);font-size:1.25rem;font-weight:600}.topic-card .topic-meta{font-family:var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}.topic-card .topic-status{color:var(--muted);font-size:.8rem}.topic-card .topic-status.in-progress{color:oklch(52% .12 85)}.topic-card .delete-btn{top:var(--space-2);right:var(--space-2);color:var(--muted);cursor:pointer;padding:var(--space-1);opacity:0;background:0 0;border:none;justify-content:center;align-items:center;font-size:1.1rem;line-height:1;transition:opacity .15s,color .15s;display:flex;position:absolute}.topic-card:hover .delete-btn{opacity:1}.delete-btn:hover{color:oklch(45% .16 25)}.create-card{border:2px dashed var(--border);text-align:center;justify-content:center;align-items:center;gap:var(--space-3);background:0 0;min-height:120px}.create-card:hover{border-color:var(--fg);background:var(--surface)}.create-card .plus{color:var(--muted);font-size:2rem;font-weight:300;line-height:1}.create-card .create-label{color:var(--muted);font-size:.95rem}.form-group{margin-bottom:var(--space-6)}.form-label{margin-bottom:var(--space-2);color:var(--fg);font-size:.85rem;font-weight:500;display:block}.form-input,.form-textarea{width:100%;padding:var(--space-3) var(--space-4);border:1.5px solid var(--border);background:var(--surface);color:var(--fg);font-family:var(--font-body);outline:none;font-size:.95rem;transition:border-color .15s}.form-input:focus,.form-textarea:focus{border-color:var(--fg)}.form-textarea{resize:vertical;min-height:60px}.sentence-row{border:1.5px solid var(--border);padding:var(--space-4);margin-bottom:var(--space-4);background:var(--surface)}.sentence-row-header{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:var(--space-3);font-size:.7rem}.sentence-row-grid{gap:var(--space-3);display:grid}@media (width>=560px){.sentence-row-grid{grid-template-columns:1fr 1fr}}.hint-text{color:var(--muted);margin-top:var(--space-2);font-size:.8rem}.form-actions{gap:var(--space-4);margin-top:var(--space-8);flex-wrap:wrap;justify-content:center;display:flex}.play-header{margin-bottom:var(--space-8);justify-content:space-between;align-items:center;display:flex}.back-link{color:var(--muted);cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit;font-size:.875rem;text-decoration:none}.back-link:hover{color:var(--fg)}.progress{font-family:var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}.progress-bar{background:var(--border);width:120px;height:3px;margin-top:var(--space-1);position:relative}.progress-bar>span{background:var(--accent);height:100%;transition:width .3s;display:block}.sentence-vi{font-family:var(--font-display);text-align:center;margin:var(--space-8) 0 var(--space-12);color:var(--fg);font-size:clamp(1.5rem,4.5vw,2.25rem);line-height:1.35}.sentence-audio-actions{gap:var(--space-3);margin-bottom:var(--space-6);flex-wrap:wrap;justify-content:center;display:flex}.slots-area{gap:var(--space-3);margin-bottom:var(--space-12);isolation:isolate;flex-wrap:wrap;justify-content:center;min-height:56px;display:flex}.slot{border:1.5px dashed var(--border);min-width:90px;height:48px;font-family:var(--font-body);color:var(--fg);cursor:pointer;padding:0 var(--space-3);z-index:1;background:0 0;justify-content:center;align-items:center;font-size:1rem;font-weight:500;transition:border-color .15s,background .15s;display:inline-flex;position:relative}.slot.filled{border-style:solid;border-color:var(--fg);background:var(--surface);z-index:2}.slot.correct{color:oklch(32% .12 145);z-index:2;background:oklch(93% .06 145);border-color:oklch(52% .14 145)}.slot.wrong{color:oklch(38% .16 25);z-index:2;background:oklch(92% .06 25);border-color:oklch(55% .18 25)}.slot-input{border:none;border-bottom:2.5px solid var(--border);text-align:center;width:110px;min-width:90px;height:48px;font-family:var(--font-body);color:var(--fg);padding:0 var(--space-2);background:0 0;outline:none;justify-content:center;align-items:center;font-size:1rem;font-weight:500;transition:border-color .15s,background .15s;display:inline-flex}.slot-input:focus{border-bottom-color:var(--fg)}.slot-input.correct{color:oklch(32% .12 145);background:oklch(93% .06 145);border-bottom-color:oklch(52% .14 145)}.slot-input.wrong{color:oklch(38% .16 25);background:oklch(92% .06 25);border-bottom-color:oklch(55% .18 25)}.bank-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);text-align:center;width:max-content;padding:0 var(--space-2);background:var(--bg);z-index:3;margin:0 auto;font-size:.7rem;position:relative}.word-bank-section{margin-top:var(--space-8);align-items:center;gap:var(--space-4);flex-direction:column;display:flex}.word-bank{gap:var(--space-3);margin-top:0;margin-bottom:var(--space-8);flex-wrap:wrap;justify-content:center;display:flex}.word-chip{padding:var(--space-2) var(--space-4);border:1.5px solid var(--border);background:var(--surface);font-family:var(--font-body);color:var(--fg);cursor:pointer;-webkit-user-select:none;user-select:none;font-size:.95rem;font-weight:500;transition:border-color .15s,transform .1s,opacity .15s}.word-chip:hover{border-color:var(--fg)}.word-chip:active{transform:translateY(1px)}.word-chip.used{opacity:.25;pointer-events:none}.play-actions{padding-top:var(--space-8);justify-content:center;margin-top:auto;display:flex}.feedback{text-align:center;margin-bottom:var(--space-4);min-height:1.6em;font-size:.95rem}.feedback.correct-text{color:oklch(42% .12 145)}.feedback.wrong-text{color:oklch(45% .16 25)}.result-header{text-align:center;margin:var(--space-8) 0 var(--space-12)}.score-ring{border:3px solid var(--border);width:140px;height:140px;margin:0 auto var(--space-6);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;display:flex}.score-number{font-family:var(--font-display);font-size:2.5rem;font-weight:600;line-height:1}.score-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:var(--space-1);font-size:.7rem}.result-list{gap:var(--space-4);margin-bottom:var(--space-8);flex-direction:column;display:flex}.result-item{border:1.5px solid var(--border);padding:var(--space-4);background:var(--surface)}.result-item .vi{font-family:var(--font-display);margin-bottom:var(--space-2);font-size:1.05rem}.result-item .en{color:var(--muted);font-size:.95rem}.result-item .en .your{margin-right:var(--space-2);text-decoration:line-through}.result-item .en .correct-ans{color:oklch(42% .12 145);font-weight:500}.result-actions{gap:var(--space-4);flex-wrap:wrap;justify-content:center;display:flex}.spacer{flex:1}.hint{text-align:center;color:var(--muted);margin-top:var(--space-8);margin-bottom:var(--space-4);font-size:.8rem}.custom-badge{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--border);color:var(--muted);margin-bottom:var(--space-2);width:fit-content;padding:2px 6px;font-size:.65rem;display:inline-block}.modal-overlay{padding:var(--space-4);z-index:100;background:#00000059;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--surface);border:1.5px solid var(--border);width:100%;max-width:520px;max-height:90vh;padding:var(--space-6);overflow:auto}.modal-lg{max-width:640px}.modal-header{margin-bottom:var(--space-6);justify-content:space-between;align-items:center;display:flex}.modal-header h2{font-family:var(--font-display);font-size:1.35rem;font-weight:600}.modal-close{color:var(--muted);cursor:pointer;padding:var(--space-1);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.modal-close:hover{color:var(--fg)}.dropzone{border:2px dashed var(--border);padding:var(--space-8) var(--space-4);text-align:center;cursor:pointer;align-items:center;gap:var(--space-2);color:var(--muted);flex-direction:column;transition:border-color .15s,background .15s;display:flex}.dropzone:hover,.dropzone.active{border-color:var(--fg);background:var(--bg);color:var(--fg)}.dropzone-hint{font-size:.75rem;font-family:var(--font-mono)}.modal-loading{text-align:center;color:var(--muted);margin-top:var(--space-4)}.modal-error{color:oklch(45% .16 25);margin-top:var(--space-4);font-size:.9rem}.preview-section{margin-top:var(--space-4)}.preview-title{margin-bottom:var(--space-3);color:var(--fg);font-size:.9rem}.preview-list{gap:var(--space-2);border:1px solid var(--border);max-height:200px;padding:var(--space-3);background:var(--bg);flex-direction:column;display:flex;overflow:auto}.preview-item{padding:var(--space-2) 0;border-bottom:1px solid var(--border)}.preview-item:last-child{border-bottom:none}.preview-vi{color:var(--fg);margin-bottom:2px;font-size:.9rem}.preview-en{color:var(--muted);font-size:.8rem;font-family:var(--font-mono)}.preview-more{text-align:center;color:var(--muted);padding:var(--space-2);font-size:.8rem}.modal-actions{gap:var(--space-4);margin-top:var(--space-6);flex-wrap:wrap;justify-content:flex-end;display:flex}.spin{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.screen.active.play-layout{gap:var(--space-4);flex-direction:column}.play-main{flex-direction:column;flex:1;display:flex}.chat-fab{bottom:var(--space-4);right:var(--space-4);background:var(--fg);width:52px;height:52px;color:var(--surface);cursor:pointer;z-index:200;border:none;border-radius:50%;justify-content:center;align-items:center;transition:transform .15s,box-shadow .15s;display:flex;position:fixed;box-shadow:0 4px 12px #00000026}.chat-fab:hover{transform:scale(1.05);box-shadow:0 6px 16px #0003}.chat-fab:active{transform:scale(.97)}.chat-popup{bottom:var(--space-4);right:var(--space-4);z-index:200;flex-direction:column;width:380px;height:520px;display:flex;position:fixed;box-shadow:0 8px 32px #0000002e}.chat-panel{border:1.5px solid var(--border);background:var(--surface);flex-direction:column;flex:1;display:flex;overflow:hidden}.chat-header{justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:1.5px solid var(--border);flex-shrink:0;font-size:.9rem;font-weight:600;display:flex}.chat-messages{padding:var(--space-3);gap:var(--space-3);flex-direction:column;flex:1;min-height:0;display:flex;overflow-y:auto}.chat-empty{text-align:center;color:var(--muted);align-items:center;gap:var(--space-3);padding:var(--space-8) var(--space-4);flex-direction:column;margin:auto;display:flex}.chat-empty p{font-size:.85rem;line-height:1.5}.chat-bubble{gap:var(--space-2);align-items:flex-start;display:flex}.chat-bubble.user{flex-direction:row-reverse}.chat-avatar{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;margin-top:2px;display:flex}.chat-bubble.assistant .chat-avatar{background:var(--fg);color:var(--surface)}.chat-bubble.user .chat-avatar{background:var(--accent);color:var(--surface)}.chat-content{max-width:85%}.chat-text{padding:var(--space-2) var(--space-3);word-break:break-word;border-radius:2px;font-size:.9rem;line-height:1.5}.chat-bubble.assistant .chat-text{background:var(--bg)}.chat-bubble.user .chat-text{background:oklch(94% .02 80)}.chat-error{color:oklch(45% .16 25);text-align:center;padding:var(--space-2);font-size:.8rem}.chat-input-area{gap:var(--space-2);padding:var(--space-3);border-top:1.5px solid var(--border);flex-shrink:0;display:flex}.chat-input{min-width:0;padding:var(--space-2) var(--space-3);border:1.5px solid var(--border);background:var(--surface);color:var(--fg);font-family:var(--font-body);outline:none;flex:1;font-size:.9rem;transition:border-color .15s}.chat-input:focus{border-color:var(--fg)}.chat-send-btn{background:var(--fg);width:36px;height:36px;color:var(--surface);cursor:pointer;border:none;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.chat-send-btn:hover{background:var(--muted)}.chat-send-btn[disabled]{opacity:.45;cursor:not-allowed}.chat-new-btn{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);font-size:.75rem;font-family:var(--font-body);border:1px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;transition:border-color .15s,color .15s;display:inline-flex}.chat-new-btn:hover{border-color:var(--fg);color:var(--fg)}.chat-close-btn{padding:var(--space-1);color:var(--muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:color .15s;display:inline-flex}.chat-close-btn:hover{color:var(--fg)}@media (width<=860px){.chat-popup{inset:var(--space-3);bottom:var(--space-3);right:var(--space-3);width:auto;height:auto;max-height:calc(100svh - var(--space-3) * 2)}}