*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--red:#e3182d;--dark-red:#c11222;--yellow:#ffd000;--dark-yellow:#e5bb00;--blue:#1b85e5;--light-blue:#70d6ff;--green:#11a646;--pink:#ffe6eb;--ink:#111;--paper:#f0f8ff;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}html,body,#root{background:var(--light-blue);min-height:100vh;color:var(--ink);font-family:Nunito,system-ui,sans-serif;font-size:15px;font-weight:700}.role-banner{text-transform:uppercase;letter-spacing:.05em;border-bottom:4px solid var(--ink);background:var(--yellow);color:var(--ink);justify-content:space-between;align-items:center;padding:8px 16px;font-size:.85em;font-weight:900;display:flex}.role-banner.admin{background:#e0ccff}.role-banner.learner{background:#bcf5d6}.hero{text-align:center;background:repeating-linear-gradient(45deg, var(--red), var(--red) 20px, var(--dark-red) 20px, var(--dark-red) 40px);color:#fff;border-bottom:6px solid var(--ink);flex-direction:column;justify-content:center;align-items:center;padding:30px 16px;display:flex;position:relative;overflow:hidden}.hero h1{letter-spacing:.05em;color:var(--yellow);text-shadow:2px 2px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 4px 4px 0 var(--ink);margin-bottom:10px;font-family:Bangers,cursive;font-size:3.2em}.hero p.scene{text-shadow:1px 1px 0 var(--ink);margin-bottom:16px;font-size:1.1em;font-weight:700}.hud{text-transform:uppercase;justify-content:center;align-items:center;gap:12px;font-size:.85em;font-weight:900;display:flex}.hud-chip{color:var(--yellow);border:3px solid var(--yellow);background:#0e2b5e;padding:6px 12px}.tab-bar{border-bottom:6px solid var(--ink);background:var(--yellow);flex-wrap:wrap;display:flex}.tab-btn{border:none;border-right:4px solid var(--ink);color:var(--ink);cursor:pointer;white-space:nowrap;text-align:center;background:0 0;flex:auto;padding:12px 14px;font-family:inherit;font-size:.95em;font-weight:900}.tab-btn:last-child{border-right:none}.tab-btn.active{box-shadow:inset 0 -5px 0 var(--red);background:#fff}.tab-btn:hover:not(.active){background:var(--dark-yellow)}.tab-btn.login-btn{background:var(--ink);color:#fff}.tab-btn.login-btn:hover{background:#333}.tab-btn.grades-btn{background:#e0ccff}.tab-btn.grades-btn.active{background:#fff;box-shadow:inset 0 -5px #7c3aed}.persona-party{border-bottom:6px solid var(--ink);background:#fff;padding:16px}.companions-label{color:var(--ink);align-items:center;gap:8px;margin-bottom:12px;font-size:.85em;font-style:italic;font-weight:900;display:flex}.companions-label:before{content:"⚔️"}.persona-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.persona{text-align:left;border:4px solid var(--ink);min-height:100px;color:var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer;background:#fff;grid-template-columns:80px 1fr;align-items:center;gap:12px;padding:10px;font-family:inherit;transition:transform .1s;display:grid}.persona:active{box-shadow:2px 2px 0 var(--ink);transform:translate(2px,2px)}.persona.active{border-color:var(--blue)}.persona-aakash{background:var(--yellow)}.persona img{object-fit:contain;width:70px;height:70px}.persona-name{letter-spacing:.03em;margin-bottom:4px;font-family:Bangers,cursive;font-size:1.4em;display:block}.persona-role{color:#444;font-size:.75em;display:block}.persona-message{border:4px dashed var(--ink);background:#fff;min-height:2.2em;margin:16px 0 0;padding:12px 16px;font-size:1.05em;font-weight:800}.guide-panel{border-bottom:6px solid var(--ink);background:var(--pink);grid-template-columns:140px 1fr 140px;display:grid}.guide-col{flex-direction:column;justify-content:center;align-items:center;padding:16px 10px;display:flex}.guide-col.left{border-right:4px solid var(--ink);background:var(--yellow)}.guide-col.right{border-left:4px solid var(--ink);background:var(--pink)}.guide-col img{object-fit:contain;border:3px solid var(--ink);width:100px;height:100px;box-shadow:3px 3px 0 var(--ink);background:#fff;margin-bottom:8px}.guide-col.right img{border-radius:50%}.guide-col-label{text-align:center;font-family:Bangers,cursive;font-size:1.2em;line-height:1.1}.guide-body{flex-direction:column;justify-content:center;gap:10px;padding:16px 20px;display:flex}.guide-body h3{font-family:Bangers,cursive;font-size:1.5em;font-style:italic}.guide-body p{color:#222;font-size:.95em;font-weight:700;line-height:1.5}.guide-tags{flex-wrap:wrap;gap:8px;margin-top:4px;display:flex}.guide-tag{border:3px solid var(--ink);color:#fff;padding:4px 10px;font-size:.8em;font-weight:900}.mission{background:var(--green);border-bottom:6px solid var(--ink);color:#fff;justify-content:space-between;align-items:center;gap:16px;padding:12px 20px;font-size:1.1em;display:flex}.dialogue{align-items:center;gap:10px;display:flex}.points-badge{background:var(--yellow);color:var(--ink);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);white-space:nowrap;padding:6px 14px;font-weight:900}.lesson{max-width:1200px;margin:0 auto;padding:24px 16px}.phrase-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:24px;display:grid}.phrase-card{border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:#fff;padding:18px;position:relative}.ref-badge{background:var(--green);color:#fff;border:3px solid var(--ink);padding:4px 10px;font-size:.75em;font-weight:900;display:none;position:absolute;top:-12px;right:-10px;transform:rotate(4deg)}.phrase-card.has-ref .ref-badge{display:inline-block}.hanzi{color:var(--red);margin-bottom:4px;font-size:2.2em;font-weight:900}.pinyin{color:#555;margin:4px 0 8px;font-size:1.1em;font-weight:800}.translation{color:var(--blue);margin-bottom:14px;font-size:1em;font-weight:700}.phrase-actions{flex-wrap:wrap;gap:10px;display:flex}.admin-actions{border-top:3px dashed #ccc;flex-wrap:wrap;gap:10px;margin-top:10px;padding-top:10px;display:none}.admin-mode .admin-actions{display:flex}.admin-mode .learner-action{display:none}.btn{border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);color:var(--ink);cursor:pointer;white-space:nowrap;text-transform:uppercase;background:#fff;border-radius:0;align-items:center;gap:6px;padding:8px 14px;font-family:Nunito,sans-serif;font-size:.9em;font-weight:900;line-height:1.2;transition:transform .1s,box-shadow .1s;display:inline-flex}.btn:hover{background:#f0f0f0}.btn:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:#1565c0}.btn-danger{background:var(--red);color:#fff}.btn-danger:hover{background:var(--dark-red)}.btn-success{background:var(--green);color:#fff}.btn-success:hover{background:#0e8538}.btn-admin{color:#fff;background:#a855f7}.btn-admin:hover{background:#9333ea}.btn-yellow{background:var(--yellow);color:var(--ink)}.btn-yellow:hover{background:var(--dark-yellow)}.voice-zone{border:4px solid var(--ink);background:var(--yellow);box-shadow:6px 6px 0 var(--ink);margin-top:24px;padding:20px}.voice-zone.admin-studio{background:#e0ccff;display:none}.admin-mode .voice-zone.admin-studio{display:block}.admin-mode .voice-zone.learner-studio{display:none}.zone-label{letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px;font-size:.85em;font-weight:900}.voice-zone h2{letter-spacing:.03em;margin-bottom:8px;font-family:Bangers,cursive;font-size:1.8em}.zone-desc{color:#222;margin-bottom:16px;font-size:.95em}.record-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.rec-status{min-height:1.4em;color:var(--red);margin-top:12px;font-size:.9em;font-weight:800}.custom-deck{border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:#fff;margin-top:24px;padding:20px}.custom-deck h2{margin-bottom:8px;font-family:Bangers,cursive;font-size:1.8em}.deck-desc{margin-bottom:16px;font-size:.95em}.presets{flex-wrap:wrap;gap:10px;margin-bottom:16px;display:flex}.card-form{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;display:grid}.form-field{flex-direction:column;gap:4px;display:flex}.form-field label{text-transform:uppercase;font-size:.85em;font-weight:800}.form-field input{border:3px solid var(--ink);color:var(--ink);background:#fff;padding:8px 12px;font-family:inherit;font-size:1em;font-weight:700}.form-field input:focus{border-color:var(--blue);box-shadow:3px 3px 0 var(--blue);outline:none}.add-wrap{grid-column:1/-1;justify-content:flex-end;display:flex}.custom-cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px;display:grid}.custom-card{border:4px solid var(--ink);background:var(--pink);box-shadow:5px 5px 0 var(--ink);padding:16px}.quiz-box{border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:#fff;padding:24px}.quiz-question{letter-spacing:.03em;margin-bottom:20px;font-family:Bangers,cursive;font-size:1.8em}.answers-grid{gap:12px;display:grid}.ans-btn{text-align:left;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer;background:#f8f8f8;padding:12px 16px;font-family:inherit;font-size:1.05em;font-weight:800;transition:transform .1s,box-shadow .1s}.ans-btn:hover:not(:disabled){background:var(--yellow);box-shadow:5px 5px 0 var(--ink);transform:translate(-2px,-2px)}.ans-btn.correct{background:var(--green);color:#fff}.ans-btn.wrong{background:var(--red);color:#fff}.quiz-feedback{color:var(--blue);min-height:1.4em;margin-top:16px;font-size:1.1em;font-weight:900}.grades-panel{max-width:900px;margin:0 auto;padding:24px}.grades-panel h2{letter-spacing:.03em;margin-bottom:8px;font-family:Bangers,cursive;font-size:2.2em}.grade-card{border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:#fff;margin-bottom:20px;padding:18px}.grade-card-header{border-bottom:3px dashed #ccc;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px;padding-bottom:14px;display:flex}.grade-label-text{color:var(--blue);font-size:1.2em;font-weight:900}.grade-status{border:3px solid var(--ink);text-transform:uppercase;padding:6px 12px;font-size:.85em;font-weight:900}.grade-audio-row{background:var(--paper);border:3px solid var(--ink);flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px;padding:12px;display:flex}.star-row{flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;display:flex}.star-btn{border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink);cursor:pointer;background:#fff;padding:6px 12px;font-family:inherit;font-size:.9em;font-weight:800;transition:transform .1s}.star-btn:hover{background:#f0f0f0}.star-btn.selected{background:var(--yellow);box-shadow:inset 0 0 0 2px var(--ink)}.grade-note{border:3px solid var(--ink);background:#fff;width:100%;margin-top:14px;padding:10px 14px;font-family:inherit;font-size:.95em;font-weight:700;box-shadow:inset 2px 2px #0000000d}.voice-feedback-row{border:3px solid var(--ink);background:#e0ccff;flex-direction:column;gap:8px;margin-top:14px;padding:12px;display:flex}.voice-feedback-row.learner-view{background:#fdf2f8}.modal-overlay{z-index:1000;background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{border:6px solid var(--ink);box-shadow:10px 10px 0 var(--red);background:#fff;width:90%;max-width:420px;padding:30px;position:relative}.modal h2{margin-bottom:10px;font-family:Bangers,cursive;font-size:2.2em}.role-cards{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;display:grid}.role-card{border:4px solid var(--ink);cursor:pointer;text-align:center;box-shadow:4px 4px 0 var(--ink);background:#f8f8f8;padding:20px 10px;transition:transform .1s}.role-card:hover{box-shadow:6px 6px 0 var(--ink);transform:translate(-2px,-2px)}.role-card.admin-card:hover{background:#e0ccff}.role-card.learner-card:hover{background:var(--yellow)}.pw-section input{border:3px solid var(--ink);background:#fff;width:100%;margin-bottom:14px;padding:10px 14px;font-family:inherit;font-size:1.05em;font-weight:800}@media (width<=768px){.guide-panel{grid-template-columns:1fr}.guide-col.left,.guide-col.right{border:none;border-bottom:4px solid var(--ink)}.guide-col.right{border-bottom:none;border-top:4px solid var(--ink)}.phrase-grid,.persona-row{grid-template-columns:1fr}}