*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f8f9fa;color:#2c3e50;line-height:1.4}.app{position:relative;min-height:100vh}.practice-header{position:fixed;top:0;right:0;padding:20px;z-index:1000}.language-selector-container{display:flex;justify-content:flex-end}.language-selector{position:relative;display:inline-block}.language-selector-toggle{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid #6b2c87;border-radius:12px;padding:8px 12px;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #0000001a}.language-selector-toggle:hover{background:#f8f0f8;box-shadow:0 4px 12px #00000026}.current-language-name{font-size:14px;font-weight:500;color:#6b2c87;line-height:1}.dropdown-arrow{font-size:12px;color:#6b2c87;transition:transform .3s ease}.language-selector.open .dropdown-arrow{transform:rotate(180deg)}.language-selector-dropdown{position:absolute;top:100%;right:0;background:#fff;border:2px solid #6b2c87;border-radius:12px;margin-top:8px;min-width:140px;box-shadow:0 4px 20px #0003;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s ease;z-index:1001}.language-selector.open .language-selector-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.language-option{display:flex;align-items:center;padding:10px 15px;cursor:pointer;transition:background-color .3s ease;border-radius:8px;margin:4px}.language-option:hover{background:#f8f0f8}.language-option:first-child{border-top-left-radius:10px;border-top-right-radius:10px}.language-option:last-child{border-bottom-left-radius:10px;border-bottom-right-radius:10px}.language-name{font-size:14px;font-weight:500;color:#6b2c87}.custom-vocabulary-selector{position:relative;display:inline-block}.vocabulary-selector-toggle{background:#fff;border:2px solid #ddd;border-radius:25px;padding:8px 16px;font-size:1rem;min-width:120px;cursor:pointer;transition:all .2s ease;position:relative;display:flex;align-items:center;justify-content:space-between}.vocabulary-selector-toggle:hover{border-color:#6b2c87}.vocabulary-selector-toggle:focus{outline:none;border-color:#6b2c87;box-shadow:0 0 0 3px #6b2c871a}.vocabulary-selector-toggle .dropdown-arrow{color:#666;font-size:12px;pointer-events:none;transition:transform .3s ease;margin-left:8px}.vocabulary-selector-toggle.open{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent}.vocabulary-selector-toggle.open .dropdown-arrow{transform:rotate(180deg)}.selected-set-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.vocabulary-selector-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:2px solid #ddd;border-top:1px solid #f0f0f0;border-radius:0 0 25px 25px;max-height:200px;overflow-y:auto;z-index:1000;display:none;box-shadow:0 2px 4px #0000001a}.vocabulary-selector-dropdown.open{display:block}.vocabulary-option{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;cursor:pointer;transition:background-color .2s ease;font-size:1rem;color:#333;border-bottom:1px solid #f0f0f0}.vocabulary-option:last-child{border-bottom:none;border-radius:0 0 25px 25px}.vocabulary-option:hover{background:#f5f5f5}.vocabulary-option.selected{background:#f5e8f8;color:#6b2c87;font-weight:500}.vocabulary-option.action-option{font-style:italic;color:#666;border-top:1px solid #e0e0e0;margin-top:4px}.option-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.delete-set-btn{background:none;border:none;color:#dc3545;font-size:1rem;cursor:pointer;padding:4px 8px;border-radius:15px;transition:all .2s ease;margin-left:8px;line-height:1;font-weight:700}.delete-set-btn:hover{background:#dc3545;color:#fff}.view{padding:20px 15px}.view{max-width:1200px;margin:0 auto}.view.hidden{display:none}.practice-header{text-align:center;margin-bottom:20px}.practice-header h1{font-size:2.2em;color:#2c3e50;margin-bottom:5px}.language-selectors{display:flex;gap:15px;justify-content:center;margin-bottom:15px;flex-wrap:wrap}.language-selector{display:flex;flex-direction:column;gap:5px}.language-selector label{font-weight:600;color:#2c3e50;font-size:.9em}.language-selector select{padding:8px 12px;border:2px solid #e0e6ed;border-radius:6px;font-size:.9em;background:#fff;color:#2c3e50;transition:border-color .3s}.language-selector select:focus{outline:none;border-color:#3498db}.vocabulary-set-selector{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:25px}.vocabulary-set-selector label{font-weight:600;color:#2c3e50;font-size:.9em}.vocabulary-set-selector select{padding:8px 12px;border:2px solid #e0e6ed;border-radius:6px;font-size:.9em;background:#fff;color:#2c3e50;transition:border-color .3s}.vocabulary-set-selector select:focus{outline:none;border-color:#3498db}.secondary-btn{background:#f8f9fa;color:#6b2c87;border:2px solid #ddd;padding:10px 20px;border-radius:20px;font-size:.9em;cursor:pointer;transition:all .2s ease;font-weight:500}.secondary-btn:hover{background:#e9ecef;border-color:#6b2c87;transform:translateY(-1px)}.practice-area{text-align:center;margin:30px 0}.word-display{margin-bottom:25px}.word-to-translate{font-size:2.2em;font-weight:700;color:#2c3e50;margin-bottom:8px}.language-label{font-size:.8em;color:#7f8c8d;font-weight:400}.answer-form{margin-bottom:15px}.input-container{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}.input-container input{padding:12px 16px;border:2px solid #e0e6ed;border-radius:6px;font-size:1.1rem;width:300px;max-width:100%;transition:border-color .3s}.input-container input:focus{outline:none;border-color:#3498db}.submit-btn{background:#28a745;color:#fff;border:none;padding:12px 24px;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .3s}.submit-btn:hover{background:#218838}.feedback{margin:15px 0;padding:12px;border-radius:6px;font-weight:600;min-height:40px;display:flex;align-items:center;justify-content:center}.feedback.correct{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.feedback.incorrect{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.score-display{text-align:center;font-size:1.1em;font-weight:600;color:#2c3e50;margin-top:15px}.virtual-keyboard{margin:25px 0;padding:15px;background:#f8f9fa;border-radius:8px;text-align:center}.keyboard-row{display:flex;justify-content:center;gap:4px;margin-bottom:4px}.keyboard-key{padding:6px 10px;border:1px solid #ddd;border-radius:4px;background:#fff;cursor:pointer;font-size:.9rem;min-width:30px;transition:all .1s}.keyboard-key:hover{background:#e9ecef}.keyboard-key.pressed{background:#007bff;color:#fff}.keyboard-key.shift{min-width:50px}.keyboard-key.shift.active{background:#28a745;color:#fff}.keyboard-key.space{min-width:180px}.creator-layout{display:grid;grid-template-columns:320px 1fr 360px;gap:20px;min-height:75vh;padding:20px;max-width:1200px;margin:0 auto}.left-panel{background:#fff;border-radius:8px;padding:20px;box-shadow:0 1px 4px #0000001a;height:fit-content}.right-panel{background:#fff;border-radius:8px;padding:20px;box-shadow:0 1px 4px #0000001a;height:fit-content;display:flex;flex-direction:column;gap:20px}.vocab-list-panel{background:#fff;border-radius:8px;padding:20px;box-shadow:0 1px 4px #0000001a;height:fit-content;max-height:80vh;overflow-y:auto}.back-btn{background:#6b2c87;color:#fff;border:none;padding:10px 20px;border-radius:20px;font-size:.9em;cursor:pointer;margin-bottom:20px;transition:all .2s ease;font-weight:500}.back-btn:hover{background:#4a1e5c;transform:translateY(-1px)}.create-deck h3{color:#6b2c87;margin-bottom:20px;font-size:1.5em;font-weight:300;text-align:center;letter-spacing:.05em}.input-group{margin-bottom:15px}.input-group label{display:block;margin-bottom:6px;font-weight:600;color:#6b2c87;font-size:.9em}.input-group input,.input-group textarea{width:100%;padding:10px 16px;border:2px solid #ddd;border-radius:20px;font-size:.9em;resize:vertical;transition:all .2s ease;background:#fff}.input-group input:focus,.input-group textarea:focus{outline:none;border-color:#6b2c87;box-shadow:0 0 0 3px #6b2c871a}.input-group textarea{min-height:50px;max-height:100px}.section{margin-bottom:15px}.section label{display:block;margin-bottom:6px;font-weight:600;color:#6b2c87;font-size:.9em}.selected-items{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;min-height:28px}.selected-item{background:#e3f2fd;color:#1976d2;padding:3px 6px;border-radius:4px;font-size:.8em;display:flex;align-items:center;gap:3px}.selected-item-remove{background:none;border:none;color:#1976d2;cursor:pointer;font-size:.9em;padding:0;margin-left:3px}.selected-item-remove:hover{color:#d32f2f}.add-btn{background:#f8f9fa;border:2px dashed #dee2e6;color:#6c757d;padding:5px 10px;border-radius:4px;font-size:.9em;cursor:pointer;transition:all .3s}.add-btn:hover{background:#e9ecef;border-color:#adb5bd}.add-btn:disabled{cursor:not-allowed;opacity:.6}.niveau-display{background:#f8f9fa;border:2px solid #e0e6ed;padding:8px 12px;border-radius:6px;font-size:.9em;color:#2c3e50}.deck-buttons{display:flex;gap:12px;margin-top:20px;justify-content:center}.primary-btn{background:#6b2c87;color:#fff;border:none;padding:10px 20px;border-radius:20px;font-size:.9em;font-weight:600;cursor:pointer;transition:all .2s ease}.primary-btn:hover{background:#4a1e5c;transform:translateY(-1px)}.primary-btn:disabled,.secondary-btn:disabled{opacity:.6;cursor:not-allowed}.vocab-input-container h3{color:#6b2c87;margin-bottom:20px;font-size:1.5em;font-weight:300;text-align:center;letter-spacing:.05em}.vocab-input-group{margin-bottom:12px}.vocab-input-group label{display:block;margin-bottom:6px;font-weight:600;color:#6b2c87;font-size:.9em}.vocab-input{width:100%;padding:10px 16px;border:2px solid #ddd;border-radius:20px;font-size:.9em;transition:all .2s ease;background:#fff}.vocab-input:focus{outline:none;border-color:#6b2c87;box-shadow:0 0 0 3px #6b2c871a}.vocab-buttons{display:flex;gap:12px;margin-top:15px;justify-content:center}.vocab-summary-container{background:#6b2c8705;border:2px solid rgba(107,44,135,.1);border-radius:8px;padding:20px;text-align:center;margin-top:30px}.vocab-summary-container h3{color:#6b2c87;margin-bottom:15px;font-size:1.3em;font-weight:300;letter-spacing:.05em}.summary-info{display:flex;justify-content:center;gap:30px;margin-bottom:20px;flex-wrap:wrap}.summary-item{display:flex;flex-direction:column;gap:5px}.summary-label{font-size:.8em;color:#7f8c8d;text-transform:uppercase;letter-spacing:.05em;font-weight:600}.summary-value{font-size:1.1em;color:#6b2c87;font-weight:600}.summary-buttons{display:flex;gap:12px;justify-content:center}.locked-container{text-align:center;padding:40px 20px;color:#7f8c8d;background:#6b2c8705;border-radius:8px;border:2px dashed rgba(107,44,135,.1)}.lock-icon{font-size:2.5em;margin-bottom:10px;opacity:.7}.placeholder{color:#7f8c8d;font-style:italic;text-align:center;padding:20px;background:#6b2c8705;border-radius:8px;border:2px dashed rgba(107,44,135,.1)}.vocab-list-panel h3{color:#6b2c87;margin-bottom:20px;font-size:1.5em;font-weight:300;text-align:center;letter-spacing:.05em}.vocab-table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:.9em;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.vocab-table th,.vocab-table td{padding:10px 12px;text-align:left;border-bottom:1px solid #e9ecef}.vocab-table th{background:#f8f9fa;font-weight:600;color:#6b2c87;font-size:.85em;text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;z-index:10}.vocab-row{cursor:pointer;transition:all .2s ease}.vocab-row:hover{background-color:#e74c3c1a}.vocab-row.delete-hover{background-color:#e74c3c33;color:#e74c3c}.vocab-row.delete-hover td{text-decoration:line-through}#vocabulary-table{max-height:400px;overflow-y:auto;border:1px solid #e9ecef;border-radius:8px}.export-btn{background:#6b2c87;color:#fff;border:none;padding:10px 20px;border-radius:20px;font-size:.9em;cursor:pointer;transition:all .2s ease;font-weight:600;display:block;margin:0 auto}.export-btn:hover{background:#4a1e5c;transform:translateY(-1px)}.export-btn:disabled{opacity:.6;cursor:not-allowed}.modal{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal.hidden{display:none}.modal-content{background:#fff;border-radius:12px;padding:30px;max-width:800px;width:90vw;max-height:80vh;overflow-y:auto;box-shadow:0 10px 40px #00000026}.modal-content h3{color:#6b2c87;margin-bottom:25px;font-size:1.8em;font-weight:300;text-align:center;letter-spacing:.05em}.modal-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:25px}.modal-item{background:#fff;border:2px solid #ddd;padding:12px 15px;border-radius:15px;cursor:pointer;transition:all .2s ease;text-align:center;font-size:.9em;font-weight:500;min-height:45px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px #0000001a}.modal-item:hover{background:#f8f9fa;border-color:#6b2c87;transform:translateY(-2px);box-shadow:0 2px 8px #00000026}.modal-item.selected{background:#6b2c871a;border-color:#6b2c87;color:#6b2c87;font-weight:600}.modal-close{background:#6b2c87;color:#fff;border:none;padding:12px 30px;border-radius:20px;cursor:pointer;transition:all .2s ease;font-size:1em;font-weight:600;display:block;margin:0 auto}.modal-close:hover{background:#4a1e5c;transform:translateY(-1px)}@media (max-width: 1024px){.creator-layout{grid-template-columns:1fr;gap:15px}.left-panel,.right-panel,.vocab-list-panel{order:0}.vocab-list-panel{order:1}}@media (max-width: 768px){.app{padding:10px}.language-selectors,.vocabulary-set-selector{flex-direction:column;align-items:center}.input-container{flex-direction:column}.input-container input{width:100%}.modal-content{margin:20px;max-width:calc(100% - 40px);width:calc(100% - 40px)}.modal-items{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.modal-item{min-height:40px;font-size:.85em}.deck-buttons,.vocab-buttons,.summary-buttons{flex-direction:column}.summary-info{flex-direction:column;gap:15px}.right-panel{gap:15px}}.vocabulary-practice{max-width:900px;margin:0 auto;padding:20px;text-align:center;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.vocabulary-header{text-align:center;margin-bottom:25px}.vocabulary-header h1{font-size:2.5rem;font-weight:300;color:#6b2c87;margin:0;letter-spacing:.1em}.vocabulary-controls{margin-bottom:30px}.translate-line{font-size:1.1rem;color:#333;margin-bottom:15px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.inline-select{background:#fff;border:2px solid #ddd;border-radius:25px;padding:8px 16px;font-size:1rem;min-width:120px;cursor:pointer;transition:all .2s ease}.inline-select:hover{border-color:#6b2c87}.inline-select:focus{outline:none;border-color:#6b2c87;box-shadow:0 0 0 3px #6b2c871a}.word-display-area{margin:30px 0;text-align:center}.current-word{font-size:3rem;font-weight:300;color:#6b2c87;margin-bottom:8px;min-height:60px;display:flex;align-items:center;justify-content:center}.language-label{font-size:1.1rem;color:#666;font-style:italic}.input-section{margin:25px 0}.input-container{display:flex;justify-content:center;align-items:center;gap:10px;margin-bottom:15px}#translation-input{background:#fff;border:2px solid #ddd;border-radius:25px;padding:12px 20px;font-size:1.1rem;width:400px;max-width:80vw;text-align:center;transition:all .2s ease}#translation-input:focus{outline:none;border-color:#6b2c87;box-shadow:0 0 0 3px #6b2c871a}#translation-input::placeholder{color:#aaa;font-style:italic}.btn{border:none;border-radius:50%;cursor:pointer;transition:all .2s ease;font-size:1.2rem;display:flex;align-items:center;justify-content:center}.btn-primary{background:#6b2c87;color:#fff;width:50px;height:50px}.btn-primary:hover{background:#4a1e5c;transform:scale(1.05)}.btn-secondary{background:#f5f5f5;color:#666;border:2px solid #ddd;border-radius:20px;padding:8px 16px;font-size:.9rem}.btn-secondary:hover{background:#e5e5e5;border-color:#ccc}.feedback{font-size:1rem;font-weight:500;min-height:30px;display:flex;align-items:center;justify-content:center;margin:10px auto;padding:10px 20px;border-radius:20px;max-width:400px;transition:all .3s ease;text-align:center}.feedback.correct{color:#27ae60;background:#27ae601a;border:1px solid rgba(39,174,96,.2)}.feedback.incorrect{color:#e74c3c;background:#e74c3c1a;border:1px solid rgba(231,76,60,.2)}.virtual-keyboard-container{margin-top:25px}.virtual-keyboard{background:transparent;border-radius:0;padding:15px;box-shadow:none}.keyboard-row{display:flex;justify-content:center;gap:5px;margin-bottom:8px}.keyboard-key{background:linear-gradient(135deg,#fff,#f8f9fa);border:1px solid #ddd;border-radius:6px;padding:10px;min-width:40px;height:40px;cursor:pointer;font-size:1rem;transition:all .1s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 6px #0000001a,0 1px 3px #00000014,inset 0 1px #fffc;position:relative;top:0}.keyboard-key:hover{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-color:#bbb;box-shadow:0 4px 8px #0000001f,0 2px 4px #0000001a,inset 0 1px #fffc;top:-1px}.keyboard-key:active,.keyboard-key.pressed{background:linear-gradient(135deg,#e9ecef,#dee2e6);border-color:#adb5bd;color:#2c3e50;box-shadow:0 1px 2px #0000001a,inset 0 2px 4px #0000001a;transform:none;top:2px}.keyboard-key.shift{min-width:60px;background:linear-gradient(135deg,#e9ecef,#dee2e6)}.keyboard-key.space{min-width:200px}.keyboard-key.active{background:linear-gradient(135deg,#e9ecef,#dee2e6);border-color:#adb5bd;color:#2c3e50;box-shadow:0 1px 2px #0000001a,inset 0 2px 4px #0000001a;top:2px}@media (max-width: 768px){.vocabulary-header h1{font-size:2rem}.translate-line{font-size:1rem;flex-direction:column;gap:10px}.current-word{font-size:2.5rem}#translation-input{width:300px}.vocabulary-practice{padding:15px}}