html,*{box-sizing:border-box}html,body{margin:0;padding:0}#root{background:var(--background);min-height:100vh;width:100vw}#app{text-align:center;color:#fff;font-family:Oswald,sans-serif}.home{text-align:center}.home .category-item{position:relative;margin:4px 0}.home .category-item .category-link{display:block;background:#efefef;color:#000;text-decoration:none;padding:20px;font-size:20px}.home .category-item .delete-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:#c00;cursor:pointer;font-size:1.2rem;padding:10px}.home .create-category-btn{width:100%;padding:15px;font-size:1.1rem;margin-top:20px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer}.home .create-category-btn:hover{background-color:#45a049}header{position:fixed;left:0;top:0;width:100%;z-index:2}header button,header a{display:inline-block;background:#fff;text-decoration:none;font-size:20px;border:none;padding:5px 20px;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0)}header .left{position:absolute;left:0;top:0;display:flex}header .left button:last-child,header .left a:last-child{border-radius:0 0 10px}header svg path{fill:#00072e}header .right{position:absolute;right:0;top:0;display:flex}header .right button:first-child,header .right a:first-child{border-radius:0 0 0 10px}.activity-headline{padding:0 0 40px}.activity-headline h1{margin:0;padding:0;font-size:30px}.container{margin:0 auto;width:100%;max-width:800px}.activity{padding:80px 20px 20px}.overflow-activity{position:absolute;left:0;top:0;z-index:3;width:100%;min-height:100%;background:var(--background)}.app-confirm{position:fixed;z-index:3;left:0;top:0;width:100%;height:100%}.app-confirm:not(.shown){pointer-events:none}.app-confirm:before{content:"";display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:#fff;opacity:.3;transition:all .5s}.app-confirm .dialog{position:absolute;max-width:600px;width:calc(100vw - 30px);top:50px;left:50%;padding:30px;transform:translate(-50%);background:var(--color-base);border:2px solid var(--color-secondary);transition:all .5s;font-size:20px}.app-confirm:not(.shown):before{opacity:0}.app-confirm:not(.shown) .dialog{opacity:0;transform:translate(-50%) translateY(-100%)}.app-confirm .buttons{margin-top:30px}.app-confirm .buttons button{font-size:20px;padding:5px 20px;margin:0 5px;cursor:pointer;background:#fff;border:none}.stats-progress{--radius: 10px;--border: #666;display:flex;width:100%;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.stats-progress button{flex:1;border:none;background:#f0f8ff;height:20px;min-width:1px}.stats-progress button:not(:first-child){border-left:1px solid var(--border)}.stats-progress button.correct{background:#0f0}.stats-progress button.incorrect{background:red}@media(max-width:480px){.stats-progress button:not(:first-child){border-left:none}}.question-container .question{font-size:30px;margin:50px 0}.question-container .next-container{margin-top:50px}.question-container .next-container .result{font-size:20px}.question-container .next-container button{margin-top:30px;font-size:30px;padding:5px 50px;cursor:pointer}.question-container .audio-playback{margin:20px auto 0;text-align:center}.question-spell .hint{letter-spacing:2px;font-size:30px}.question-spell.correct .hint{color:#0f0}.question-spell.incorrect .hint{color:red}.question-spell .buttons{margin-top:30px;animation:fly-in 1s}.question-spell button{font-size:30px;padding:5px 10px;margin:5px;cursor:pointer}.question-spell button.selected{visibility:hidden}@keyframes fly-in{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}ul.question-choice{list-style-type:none;margin:0;padding:0}ul.question-choice button{width:100%;margin:10px 0;font-size:30px;padding:10px;cursor:pointer;border:1px solid #fff;animation:fly-in 1s}ul.question-choice button.selected,ul.question-choice button.not-selected{pointer-events:none}ul.question-choice button.not-selected:not(.correct){opacity:.5}ul.question-choice button.correct{background:#0f0;border-color:#0f0}ul.question-choice button.not-correct.selected{background:red;border-color:red;color:#fff}ul.question-choice:not(.selected) button .translation{margin-top:-16px;opacity:0}ul.question-choice .translation{font-size:16px;transition:all .3s}.question-write{margin-top:20px}.question-write form{display:flex;gap:10px;justify-content:center}.question-write form input{font-size:24px;padding:10px;border:2px solid #ccc;border-radius:5px;width:100%;max-width:300px;background:#fff;color:#000}.question-write form input:focus{outline:none;border-color:#007bff}.question-write form button{padding:10px 20px;font-size:20px;background:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer}.question-write form button:disabled{opacity:.5;cursor:not-allowed}.question-write.correct input{border-color:#28a745;background-color:#d4edda}.question-write.correct button{background-color:#28a745}.question-write.incorrect input{border-color:#dc3545;background-color:#f8d7da}.question-write.incorrect button{background-color:#dc3545}.question-write .correct-answer{margin-top:15px;font-size:20px;color:#dc3545;font-weight:700;text-align:center}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.audio-playback{--borderWidth: 4px}.audio-playback .icon{display:inline-block;width:40px;height:40px;background:#245465;border-radius:20px;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0)}.audio-playback .icon .inner{position:absolute;width:calc(100% - var(--borderWidth) * 2);height:calc(100% - var(--borderWidth) * 2);top:var(--borderWidth);left:var(--borderWidth);border-radius:20px;background:#184150;color:#fff;display:flex;flex-direction:column;justify-content:center}.audio-playback .icon .inner svg{align-self:center}.audio-playback .icon .inner svg path{fill:#7495a1}.audio-playback.playing .icon{background:#47cbff}.audio-playback.loading .icon{background:linear-gradient(90deg,#47cbff,#7495a1);animation:rotate 4s linear infinite}.results ul{list-style-type:none;margin:0;padding:0}.results ul li{background:var(--color-secondary);margin:3px;text-align:left;padding:10px;display:flex;justify-content:space-between}.results ul li.correct svg path,.results ul li.correct .word .inner div:first-child{fill:#0f0;color:#0f0}.results ul li.incorrect svg path,.results ul li.incorrect .word .inner div:first-child{fill:red;color:red}.results ul li .left{display:flex}.results ul li .left>div{display:flex;flex-direction:column;justify-content:center}.results ul li .left>div:first-child{padding-right:10px}.results ul li .listen{display:flex;flex-direction:column;justify-content:center}.results ul li .listen .audio-playback{margin-top:0}.category h1{margin-bottom:0}.category small{display:block;margin-bottom:20px}.category .buttons{display:flex;flex-wrap:wrap}.category .buttons a,.category .buttons button{display:block;background:#efefef;text-decoration:none;color:#000;flex-grow:1;border:none;margin:2px 2px 20px;font-size:16px;padding:10px;cursor:pointer}.category .buttons a.delete-cat-btn,.category .buttons button.delete-cat-btn{background:#fee;color:#c00}.category .buttons a.manage-words-btn,.category .buttons button.manage-words-btn{background:#eef;color:#00c}.category .activity-headline .display-name{display:flex;align-items:center;justify-content:center;gap:10px}.category .activity-headline .display-name .edit-btn{background:none;border:none;cursor:pointer;font-size:.6em;color:#666}.category .activity-headline .edit-name{display:flex;gap:5px;justify-content:center}.category .activity-headline .edit-name input{font-size:1.5rem;padding:2px 5px;width:60%}.category .activity-headline .edit-name button{background:none;border:1px solid #ccc;border-radius:4px;padding:5px 10px;cursor:pointer}.category ul{list-style-type:none;margin:0;padding:0}.category ul li{background:var(--color-secondary);margin:3px;text-align:left;padding:10px;display:flex;justify-content:space-between}.category ul li .actions{display:flex;align-items:center;gap:10px}.category ul li .actions .remove-word-btn{background:none;border:none;color:#c00;cursor:pointer;font-size:1.2rem}.category .audio-playback{margin:0}.category .display-name{display:flex;align-items:center;justify-content:center;gap:10px}.category .display-name .edit-btn{background:none;border:none;color:var(--color-primary);cursor:pointer;font-size:.8em;padding:5px;margin:0}.category .edit-name{display:flex;gap:5px;justify-content:center}.category .edit-name input{font-size:1.5rem;padding:5px;width:200px}.category .edit-name button{padding:5px 10px;background:var(--color-primary);color:#fff;border:none;border-radius:4px;cursor:pointer}.category .actions{display:flex;align-items:center;gap:10px}.category .actions .remove-word-btn{background:none;border:none;color:#c00;cursor:pointer;padding:5px}.question-type-modal{position:fixed;z-index:3;left:0;top:0;width:100%;height:100%}.question-type-modal:not(.shown){pointer-events:none}.question-type-modal:before{content:"";display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:#fff;opacity:.3;transition:all .5s}.question-type-modal .dialog{position:absolute;max-width:600px;width:calc(100vw - 30px);top:50px;left:50%;padding:30px;transform:translate(-50%);background:var(--color-base);border:2px solid var(--color-secondary);transition:all .5s;text-align:center;color:#fff}.question-type-modal .dialog h2{margin-top:20px;margin-bottom:20px}.question-type-modal .dialog h2:first-child{margin-top:0}.question-type-modal .dialog .types-list{display:flex;flex-direction:column;gap:10px;margin-bottom:30px}.question-type-modal .dialog .types-list .type-btn{padding:15px;font-size:1.2rem;background:#efefef;border:2px solid transparent;cursor:pointer;color:#000;display:flex;align-items:center;justify-content:center;gap:15px}.question-type-modal .dialog .types-list .type-btn .status-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:1.1rem}.question-type-modal .dialog .types-list .type-btn .status-icon .fa-times{color:#c00}.question-type-modal .dialog .types-list .type-btn .status-icon .fa-check{color:#4caf50}.question-type-modal .dialog .types-list .type-btn.selected{background:var(--color-secondary);color:#fff;border-color:#fff}.question-type-modal .dialog .types-list .type-btn.selected .status-icon .fa-times,.question-type-modal .dialog .types-list .type-btn.selected .status-icon .fa-check{color:#fff}.question-type-modal:not(.shown):before{opacity:0}.question-type-modal:not(.shown) .dialog{opacity:0;transform:translate(-50%) translateY(-100%)}.question-type-modal .buttons button{font-size:20px;padding:8px 30px;margin:0 5px;cursor:pointer;background:#fff;border:none}.question-type-modal .buttons button:disabled{opacity:.5;cursor:not-allowed}.word-selection .selection-controls{padding:1rem;display:flex;gap:10px}.word-selection .selection-controls select{flex-grow:1;padding:.5rem;font-size:1rem;border-radius:4px;border:1px solid var(--border-color, #ccc);background-color:var(--bg-color, #fff);color:var(--text-color, #000)}.word-selection .selection-controls .apply-btn{padding:.5rem 1rem;font-size:1rem;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer;white-space:nowrap}.word-selection .selection-controls .apply-btn:hover{background-color:#45a049}.word-selection .word-list{list-style:none;padding:0;margin:0;color:#fff}.word-selection .word-list li{position:relative;display:flex;justify-content:space-between;align-items:center;padding:1rem;background:var(--color-secondary);margin:3px;cursor:pointer}.word-selection .word-list li.selected{outline:2px solid white;z-index:1}.word-selection .word-list li.selected .checkbox{color:#fff}.word-selection .word-list li .word-info{display:flex;flex-direction:column}.word-selection .word-list li .word-info strong{font-size:1.1rem}.word-selection .word-list li .word-info span{font-size:.9rem;color:#ccc}.word-selection .word-list li .checkbox{font-size:1.5rem;color:#4caf50;width:2rem;text-align:center}:root{--color-base: #00072e;--color-secondary: #2e2f54;--background: linear-gradient(-45deg,#00072e 0%, #101c5e 100%)}.settings{text-align:left;font-size:20px}.settings select{font-size:20px;padding:5px 10px}.settings .rows{display:grid;grid-template-columns:1fr 1fr;grid-row-gap:10px}.settings .rows .field{text-align:right}.settings .sharing-section{margin-top:20px;text-align:center}.settings .sharing-section hr{border:0;border-top:1px solid #ccc;margin-bottom:20px}.settings .sharing-section .create-share-btn{width:100%;padding:10px;font-size:18px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.settings .sharing-section .share-code-display{margin-bottom:20px}.settings .sharing-section .share-code-display p{font-size:18px}.settings .sharing-section .share-code-display p strong{font-size:24px;color:#28a745}.settings .sharing-section .share-code-display img{margin-top:10px;border:1px solid #ddd;padding:5px;background:#fff}.settings .sharing-section .receive-section{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.settings .sharing-section .receive-section input{flex:1;min-width:150px;padding:10px;font-size:18px;border:1px solid #ccc;border-radius:4px;text-transform:uppercase}.settings .sharing-section .receive-section button{flex-grow:1;padding:10px 20px;font-size:18px;background:#28a745;color:#fff;border:none;border-radius:4px;cursor:pointer;white-space:nowrap}.settings .sharing-section .scan-qr-btn{width:100%;margin-top:10px;padding:10px;font-size:18px;background:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer}.settings .sharing-section #qr-reader{margin-top:10px;width:100%}.settings .sharing-section .status-msg{margin-top:10px;color:#28a745;font-weight:700}.settings .sharing-section .error-msg{margin-top:10px;color:#dc3545;font-weight:700}.share-selection-dialog{position:fixed;z-index:3;left:0;top:0;width:100%;height:100%}.share-selection-dialog:not(.shown){pointer-events:none}.share-selection-dialog:before{content:"";display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:#fff;opacity:.3;transition:all .5s}.share-selection-dialog .dialog{position:absolute;max-width:600px;width:calc(100vw - 30px);top:50px;left:50%;padding:30px;transform:translate(-50%);background:var(--color-base);border:2px solid var(--color-secondary);transition:all .5s;font-size:20px;display:flex;flex-direction:column;max-height:80vh}.share-selection-dialog .dialog h3{margin-top:0;margin-bottom:20px}.share-selection-dialog .dialog .category-list{overflow-y:auto;flex:1;margin-bottom:20px;text-align:left}.share-selection-dialog .dialog .category-list .category-option{margin-bottom:10px}.share-selection-dialog .dialog .category-list .category-option label{display:flex;align-items:center;cursor:pointer}.share-selection-dialog .dialog .category-list .category-option label input{margin-right:15px;width:20px;height:20px}.share-selection-dialog:not(.shown):before{opacity:0}.share-selection-dialog:not(.shown) .dialog{opacity:0;transform:translate(-50%) translateY(-100%)}.share-selection-dialog .buttons button{font-size:20px;padding:10px 20px;margin-right:10px;cursor:pointer;background:#fff;border:1px solid var(--color-secondary)}.share-selection-dialog .buttons button:disabled{opacity:.5;cursor:not-allowed}.share-selection-dialog .buttons button:first-child{background:var(--color-secondary);color:#fff}