:root{--primary-bg: #f0f8ff;--secondary-bg: #ffffff;--text-color: #333;--primary-accent: #007bff;--secondary-accent: #6c757d;--positive-green: #28a745;--negative-red: #dc3545;--ai-purple: #6f42c1;--font-family: "Nunito", "Arial", sans-serif;--border-radius: 8px;--box-shadow: 0 4px 8px rgba(0, 0, 0, .1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--primary-bg);color:var(--text-color);line-height:1.6;font-size:18px}#root{max-width:1000px;margin:2rem auto;padding:1rem}.app-container{background:var(--secondary-bg);border-radius:var(--border-radius);box-shadow:var(--box-shadow);padding:2rem;min-height:80vh}.app-header{display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #ddd}.app-header h1{font-size:1.8rem;color:var(--primary-accent);margin:0;flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}h2{font-size:1.8rem;color:var(--text-color);margin-bottom:1rem}h3{margin-top:1rem}.parent-view,.child-view{display:flex;flex-direction:column;gap:2rem}.card{background:#f8f9fa;border:1px solid #dee2e6;border-radius:var(--border-radius);padding:1.5rem}.input-group{display:flex;gap:.5rem;margin-bottom:1rem}input[type=text],input[type=number],select{flex-grow:1;padding:.7rem;font-size:1.2rem;font-family:var(--font-family);border:2px solid #ced4da;border-radius:var(--border-radius)}.btn{padding:.7rem 1.2rem;font-size:1.1rem;font-family:var(--font-family);font-weight:700;border:none;border-radius:var(--border-radius);cursor:pointer;background-color:var(--positive-green);color:#fff;transition:background-color .3s}.btn:hover:not(:disabled){background-color:#218838}.btn:disabled{background-color:#ccc;cursor:not-allowed}.btn.btn-icon{flex:0 0 auto;width:48px;height:auto;font-size:1.8rem;padding:0;line-height:1}.btn-ai{background-color:var(--ai-purple)}.btn-ai:hover:not(:disabled){background-color:#5a32a3}.btn-secondary{background-color:var(--secondary-accent)}.btn-secondary:hover:not(:disabled){background-color:#5a6268}.btn-danger{background-color:var(--negative-red)}.btn-danger:hover:not(:disabled){background-color:#c82333}.button-group{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:center}.item-list{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem;background:#e9ecef;border-radius:var(--border-radius);min-height:40px}.item{background:#fff;padding:.5rem 1rem;border-radius:20px;box-shadow:0 1px 3px #0000001a;font-size:1.2rem;cursor:pointer;transition:transform .2s,box-shadow .2s;border:none;font-family:var(--font-family);color:var(--text-color)}.item:hover{transform:translateY(-2px);box-shadow:0 3px 6px #00000026}.deletable{position:relative;padding-right:25px}.delete-btn{position:absolute;top:50%;right:5px;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;border:none;background-color:var(--secondary-accent);color:#fff;font-weight:700;font-size:14px;line-height:20px;text-align:center;cursor:pointer;opacity:.5;transition:opacity .2s}.deletable:hover .delete-btn{opacity:1}.delete-btn:hover{background-color:var(--negative-red)}.sentence-display{font-size:2rem;font-weight:700;text-align:center;padding:1rem;margin-top:.5rem;margin-bottom:1rem;border:2px dashed #ccc;border-radius:var(--border-radius);min-height:80px;color:var(--primary-accent)}.sentence-display.sentence-display--no-border{border:none;min-height:auto;padding:.5rem 0;margin-bottom:1.5rem}.sentence-list{list-style:none;padding:0}.sentence-list li{background:#e9ecef;padding:1rem;margin-bottom:.5rem;border-radius:var(--border-radius);font-size:1.3rem;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}.sentence-list li:hover{background:#d4d9de}.sentence-list li.completed{background-color:#d4edda;color:#155724;border-color:#c3e6cb}.sentence-list li.completed:hover{background-color:#c3e6cb}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-grid .form-group{margin-bottom:0}.form-grid .form-group-full{grid-column:1 / -1}.form-group-split{display:flex;gap:1rem;align-items:flex-end;grid-column:1 / -1}.form-group-split .form-group{flex:1;margin-bottom:0}.form-group label{display:block;margin-bottom:.5rem;font-weight:700;font-size:.9rem}.form-group textarea{width:100%;padding:.7rem;font-size:1rem;font-family:var(--font-family);border:2px solid #ced4da;border-radius:var(--border-radius);resize:vertical;min-height:80px}.form-group input[type=text],.form-group input[type=number],.form-group select{width:100%}.complexity-hint{font-weight:400;font-size:.9rem;color:var(--secondary-accent)}input[type=range]{width:100%}.checkbox-label{display:flex;align-items:center;gap:.75rem;font-weight:400;cursor:pointer}.checkbox-label input[type=checkbox]{width:1.2em;height:1.2em;cursor:pointer}@media (max-width: 800px){body{font-size:16px}#root{margin:1rem auto;padding:.5rem}.app-container{padding:1rem}.app-header h1{font-size:1.3rem}.card{padding:1rem}input[type=text],input[type=number],.btn,select{font-size:1rem;padding:.8rem}.sentence-display{font-size:1.5rem;min-height:60px}h2{font-size:1.5rem}}.menu-container{position:relative;z-index:100}.menu-toggle{background:transparent;border:none;cursor:pointer;padding:0;width:20px;height:36px;display:flex;flex-direction:column;gap:5px;justify-content:center;align-items:center;transition:background-color .2s;border-radius:8px;-webkit-tap-highlight-color:transparent}.menu-toggle:hover{background-color:#0000000d}.menu-toggle span{display:block;width:16px;height:2px;background-color:var(--text-color);border-radius:4px;transition:all .3s ease}.menu-panel{position:absolute;top:calc(100% + 5px);left:0;background:var(--secondary-bg);border-radius:var(--border-radius);box-shadow:0 8px 16px #00000026;display:flex;flex-direction:column;width:280px;max-width:calc(100vw - 2rem);padding:.5rem;border:1px solid #eee}.menu-item{background:none;border:none;text-align:left;padding:1rem;font-size:1.1rem;cursor:pointer;border-radius:6px;width:100%;transition:background-color .2s;font-family:var(--font-family);color:var(--text-color);display:flex;align-items:center;gap:.75rem}.menu-item:hover{background-color:var(--primary-bg)}.menu-item.active{background-color:var(--primary-accent);color:#fff;font-weight:700}.menu-item.active-child-display{background-color:#e6f7ff;color:var(--primary-accent);cursor:default;text-align:center;justify-content:center;font-weight:700}.menu-separator{height:1px;background-color:#eee;margin:.5rem 0}.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:#fff;padding:2rem;border-radius:var(--border-radius);width:90%;max-width:500px}.modal-content h2{margin-top:0}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:700}.settings-group{background-color:#f8f9fa;border:1px solid #dee2e6;padding:1rem;border-radius:var(--border-radius);margin-top:1.5rem}.settings-group h3{margin-top:0;margin-bottom:1rem;font-size:1.2rem}.gender-selector{display:flex;gap:1rem}.gender-selector button{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem;border:2px solid #ccc;background-color:#f8f9fa;border-radius:var(--border-radius);cursor:pointer;font-size:1.2rem;transition:all .2s}.gender-selector button.selected{border-color:var(--primary-accent);background-color:#e6f7ff;font-weight:700}input[type=file]{font-size:1rem;padding:.5rem}.modal-photo-preview{width:100px;height:100px;border-radius:50%;object-fit:cover;margin-top:.5rem;border:2px solid #ddd}.modal-content .button-group{justify-content:space-between}.about-modal-content{text-align:center}.about-modal-content h2{color:var(--primary-accent);margin-bottom:1rem}.about-modal-content p{margin-bottom:1.5rem;font-size:1.1rem;line-height:1.7;text-align:left}.about-modal-content .author{margin-top:2rem;font-style:italic;color:var(--secondary-accent)}@media (max-width: 800px){.modal-content{padding:1rem;max-height:90vh;overflow-y:auto}}.smart-input-card{background-color:#e6f7ff;padding:1rem;border-radius:var(--border-radius);margin-bottom:1.5rem;border:1px solid #b3e0ff}.ai-settings-card{background-color:#f0f4ff;padding:1rem 1.5rem;border-radius:var(--border-radius);margin-top:1.5rem;border:1px solid #d6deff}.ai-settings-card h3{margin-top:0;margin-bottom:1rem;color:var(--ai-purple)}.ai-settings-card .button-group{margin-top:1rem}.child-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.child-list-item{display:flex;align-items:center;gap:1rem;background-color:var(--secondary-bg);padding:.75rem;border-radius:var(--border-radius);box-shadow:0 2px 4px #0000000d}.child-list-item img,.child-list-item .photo-placeholder{width:60px;height:60px;border-radius:50%;object-fit:cover;background-color:#ccc;color:#fff;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700}.child-list-item-info{flex-grow:1}.child-list-item-info strong{font-size:1.2rem}.child-list-item-actions{display:flex;gap:.5rem}.child-list-item-actions .btn{padding:.5rem;font-size:1.2rem;min-width:40px;text-align:center}.child-selection-view{text-align:center}.child-selection-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:2rem;margin-top:2rem}.child-selection-card{cursor:pointer;border:3px solid transparent;border-radius:var(--border-radius);padding:1rem;transition:all .2s ease;width:200px}.child-selection-card:hover{transform:translateY(-5px);border-color:var(--primary-accent);background-color:#f0f8ff}.child-selection-card img,.child-selection-card .photo-placeholder{width:150px;height:150px;border-radius:50%;object-fit:cover;margin:0 auto 1rem;border:4px solid white;box-shadow:var(--box-shadow);background-color:#ccc;color:#fff;display:flex;align-items:center;justify-content:center;font-size:4rem;font-weight:700}.child-selection-card span{font-size:1.5rem;font-weight:700;color:var(--text-color)}@media (max-width: 800px){.child-selection-grid{gap:1rem;flex-direction:column;align-items:center}.child-selection-card{width:90%;max-width:250px}}.game-content{position:relative;padding:2rem;background:#f0f8ff;border-radius:var(--border-radius);display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center}.level-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.instruction{font-size:1.4rem;color:var(--secondary-accent);margin-bottom:-1rem}.punctuation-static{color:var(--text-color);padding:0 .2rem;align-self:center;-webkit-user-select:none;user-select:none}.drop-area .punctuation-static{font-size:2.5rem}.drop-area{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;padding:1rem;border-radius:var(--border-radius);min-height:100px;width:100%}.drop-slot{min-width:120px;height:70px;padding:0 1rem;background-color:#e9ecef;border-radius:var(--border-radius);display:flex;justify-content:center;align-items:center;font-size:1.8rem;font-weight:700;border:2px dashed #b0c4de;transition:all .2s ease-in-out;cursor:pointer}.drop-slot.filled{border:3px solid var(--positive-green);background-color:#e6ffed;cursor:default}.drop-slot.syllable-expected{border-color:var(--positive-green);border-width:3px}.drop-slot.letter-expected{border-color:var(--negative-red);border-width:3px}.parts-bank{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem 1rem;padding:1.5rem 1rem 1rem;background:#e9ecef;border-radius:var(--border-radius);width:100%;border-top:1px solid #dee2e6}.plaque{padding:.8rem 1.5rem;border-radius:var(--border-radius);font-size:1.8rem;font-weight:700;cursor:grab;-webkit-user-select:none;user-select:none;background-color:#fff;box-shadow:var(--box-shadow);transition:transform .2s,box-shadow .2s,border-color .2s;touch-action:none}.plaque.dragging{position:fixed;z-index:1000;cursor:grabbing;pointer-events:none;box-shadow:0 10px 20px #0003;transition:none}.plaque-placeholder{background-color:#d0d5db;border:2px dashed #b0c4de;border-radius:var(--border-radius);box-shadow:none}.plaque.selected{transform:scale(1.05);box-shadow:0 0 15px var(--primary-accent),0 0 5px var(--primary-accent) inset;border-color:var(--primary-accent)}.word-plaque{border:4px solid #007bff}.letter-plaque{border:4px solid #dc3545}.syllable-plaque{border:4px solid #28a745}.game-controls{display:flex;justify-content:center;gap:1rem;margin-top:1rem}.level-complete-controls{margin-top:1.5rem}.level-complete-controls .btn{font-size:1.3rem;padding:.8rem 2rem}.btn-hint{background-color:#ffc107;color:#333;width:50px;height:50px;border-radius:50%;font-size:1.8rem;padding:0;line-height:1;display:flex;align-items:center;justify-content:center}.btn-hint:hover{background-color:#e0a800}.control-area{display:flex;justify-content:center;align-items:center;width:100%;min-height:70px}.fireworks-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.firework{position:absolute;background:gold;border-radius:50%;opacity:0;animation:firework-anim 1.5s ease-out forwards}@keyframes firework-anim{0%{transform:scale(.1);opacity:1}50%{opacity:1}to{transform:scale(1) translate(var(--x),var(--y));opacity:0}}@media (max-width: 800px){.game-content{padding:.5rem;background-color:var(--secondary-bg)}.parts-bank{padding:.5rem;gap:.5rem}.drop-area .punctuation-static{font-size:1.6rem}.drop-slot{min-width:60px;height:50px;font-size:1.1rem;flex-basis:auto;flex-grow:0}.plaque{font-size:1.1rem;padding:.5rem .8rem}}.level1-sentence{font-size:3rem;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem}.level1-sentence .word{cursor:default;padding:.5rem;border-radius:var(--border-radius);transition:background-color .2s}.level1-sentence .punctuation-static{font-size:3rem;line-height:1}.level1-controls{margin-top:1rem;min-height:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;width:100%}.level1-controls .btn{display:flex;align-items:center;justify-content:center;gap:.75rem;font-size:1.1rem}.listening-indicator{font-size:1.5rem;color:var(--primary-accent);font-weight:700}.listening-indicator.processing:after{display:inline-block;animation:ellipsis 1.5s infinite;content:".";width:1em;text-align:left}@keyframes ellipsis{0%{content:"."}33%{content:".."}66%{content:"..."}}.transcript-display{font-size:1.2rem;color:var(--secondary-accent);margin-top:.5rem;min-height:2em;font-style:italic;text-align:center}.btn-mic{background-color:var(--negative-red)}.btn-mic:hover:not(:disabled){background-color:#c82333}.btn-quiz{background-color:var(--positive-green)}.btn-quiz:hover:not(:disabled){background-color:#218838}.btn-icon-quiz{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:50%;border:2px solid currentColor;font-weight:700;font-size:1em;line-height:1}.quiz-options{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem;width:100%;justify-content:center;margin:1.5rem 0}.quiz-option{width:120px;height:120px;flex-grow:0;text-align:center;justify-content:center;font-size:3rem;padding:.8rem;background-color:var(--secondary-bg);color:var(--text-color);border:2px solid var(--secondary-accent);display:flex;align-items:center;gap:0;border-radius:var(--border-radius)}.quiz-option:hover:not(:disabled){background-color:var(--primary-bg);border-color:var(--primary-accent)}.quiz-nav-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;min-height:70px;gap:1rem}.quiz-nav-controls .btn-back{justify-self:start}.quiz-nav-controls .btn-hint{justify-self:center}.syllable-toggle-container{display:flex;justify-content:center;margin-bottom:1.5rem}.toggle-switch{display:flex;align-items:center;gap:.75rem;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-switch-track{width:50px;height:28px;background-color:#ccc;border-radius:14px;position:relative;transition:background-color .3s}.toggle-switch-thumb{position:absolute;top:2px;left:2px;width:24px;height:24px;background-color:#fff;border-radius:50%;transition:transform .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 1px 3px #0003}.toggle-switch input{display:none}.toggle-switch input:checked+.toggle-switch-track{background-color:var(--primary-accent)}.toggle-switch input:checked+.toggle-switch-track .toggle-switch-thumb{transform:translate(22px)}.toggle-switch-label{font-weight:700;color:var(--secondary-accent);transition:color .3s}.toggle-switch-label.active{color:var(--primary-accent)}.word-in-syllables{display:inline-flex;flex-wrap:nowrap;align-items:center;background:#fff;border:1px solid #ddd;border-radius:var(--border-radius);box-shadow:0 1px 2px #0000000d;font-weight:400;overflow:hidden}.syllable-part{padding:.5rem .2rem;cursor:pointer;transition:background-color .2s;letter-spacing:.05em}.syllable-part:hover{background-color:#f0f8ff}.syllable-part:not(:last-child){border-right:1px solid #ddd}@media (max-width: 800px){.level1-sentence{font-size:1.6rem;gap:.5rem}.quiz-option{width:80px;height:80px;font-size:2rem}.level1-sentence .punctuation-static{font-size:1.6rem}}.level3-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;min-height:70px;gap:1rem}.level3-controls .control-left{justify-self:start}.level3-controls .control-center{justify-self:center}.level3-controls .control-right{justify-self:end}.level3-controls .completion-controls{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:1rem;font-size:1.2rem;font-weight:700}.sentence-progress{display:flex;flex-wrap:wrap;justify-content:center;gap:.5em;font-size:1.2rem;margin:-1rem 0 .5rem;line-height:1.2;width:100%;align-items:center}.word-progress{transition:all .3s ease}.word-progress--done{color:var(--text-color);opacity:.8}.word-progress--current{color:var(--primary-accent);font-weight:700;font-size:1.8rem}.word-progress--todo{color:#ccc}.word-progress--punctuation{color:#999;font-weight:400;font-size:1.2rem;opacity:.8}@media (max-width: 800px){.word-progress--current{font-size:1.5rem}}