html,*{box-sizing:border-box}html,body{margin:0;padding:0}#root{background:var(--background);min-height:100vh;width:100%}#app{text-align:center;color:#fff;font-family:Oswald,sans-serif}button,select{color:#000}.home{text-align:center}.home .categories{display:grid;grid-template-columns:1fr 1fr;grid-gap:5px}@media screen and (max-width:650px){.home .categories{grid-template-columns:1fr}}.home .category-item{position:relative;margin: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{background:#fff;text-decoration:none;font-size:20px;border:none;padding:10px 20px;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0)}header .sub-menu-wrap{position:relative;text-align:right}header .sub-menu-wrap.open button,header .sub-menu-wrap.open a{border-radius:0!important}header .sub-menu-wrap .submenu{display:flex;flex-direction:column}header .sub-menu-wrap .submenu button,header .sub-menu-wrap .submenu a{border-radius:0!important;text-align:left}header .sub-menu-wrap .submenu button:first-child,header .sub-menu-wrap .submenu a:first-child{border-top-left-radius:10px!important}header .sub-menu-wrap .submenu button:last-child,header .sub-menu-wrap .submenu a:last-child{border-bottom-left-radius:10px!important}header .left>button,header .left>a,header .left .sub-menu-wrap>button,header .left .sub-menu-wrap>a,header .right>button,header .right>a,header .right .sub-menu-wrap>button,header .right .sub-menu-wrap>a{display:inline-block}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,header .right .sub-menu-wrap>button:first-child,header .right .sub-menu-wrap>a:first-child{border-bottom-left-radius: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;max-height:100vh;overflow-y:auto}.overflow-activity{position:absolute;left:0;top:0;z-index:3;width:100%;min-height:100%;background:var(--background)}.app-confirm .inner{text-align:center;font-size:20px}.app-modal{position:fixed;z-index:10;left:0;top:0;width:100%;height:100%}.app-modal:not(.shown){pointer-events:none}.app-modal:before{content:"";display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:.5;transition:all .5s}.app-modal .dialog{position:absolute;max-width:800px;width:calc(100% - 30px);max-height:calc(100vh - 30px);overflow-y:auto;top:15px;left:50%;transform:translate(-50%);background:var(--color-modal);border:1px solid var(--color-secondary);transition:opacity .5s,transform .5s;text-align:left;color:#fff;display:flex;flex-direction:column;box-shadow:0 0 20px 3px #000;border-radius:10px}.app-modal .dialog .header{background:var(--color-secondary);flex-grow:0;flex-shrink:0}.app-modal .dialog .header h2{margin:10px;text-align:center}.app-modal .dialog>.inner{flex-grow:0;flex-shrink:1;padding:30px;height:100%;overflow-y:auto}.app-modal .dialog>.inner h2:first-child{margin-top:0}.app-modal .dialog .close-btn{position:absolute;right:10px;top:7px;background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer;padding:5px;line-height:1}.app-modal .dialog .close-btn:hover{color:var(--color-secondary)}.app-modal .dialog .buttons{text-align:center;padding:20px 10px}.app-modal .dialog .buttons button{font-size:20px;padding:8px 30px;margin:0 5px;cursor:pointer;background:#fff;border:2px solid transparent;box-sizing:content-box}.app-modal .dialog .buttons button:focus{border-color:var(--color-secondary)}.app-modal .dialog .loading{display:flex;justify-content:center;padding:40px}.app-modal:not(.shown):before{opacity:0}.app-modal:not(.shown) .dialog{opacity:0;transform:translate(-50%) translateY(-100%)}.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;color:#000}.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;color:#000}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 .left{display:flex}.category ul li .left>div{display:flex;flex-direction:column;justify-content:center}.category ul li .left .audio-playback{margin-right:15px}.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 ul li .actions .copy-word-btn{background:none;border:none;color:#fff;cursor:pointer;font-size:1.2rem;padding:5px;display:flex;align-items:center;justify-content:center}.category ul li .actions .copy-word-btn:hover{color:var(--color-primary)}.category ul li .actions .info-btn{background:none;border:none;color:#fff;cursor:pointer;font-size:1.2rem;padding:5px;display:flex;align-items:center;justify-content:center}.category ul li .actions .info-btn:hover{color:var(--color-primary)}.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}.category .actions .info-btn{background:none;border:none;color:#fff;cursor:pointer;font-size:1.2rem;padding:5px;display:flex;align-items:center;justify-content:center}.category .actions .info-btn:hover{color:var(--color-primary)}.button-list{display:flex;flex-direction:column;gap:10px;margin-bottom:30px}.button-list button{padding:15px;font-size:1.2rem;background:#efefef;cursor:pointer;color:#000;display:flex;align-items:center;justify-content:center;gap:15px;border:none}.button-list button .status-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:1.1rem}.button-list button .status-icon .fa-times{color:#c00}.button-list button .status-icon .fa-check{color:#4caf50}.button-list button.selected{background:var(--color-secondary);color:#fff;border-color:#fff}.button-list button.selected .status-icon .fa-times,.button-list button.selected .status-icon .fa-check{color:#fff}.word-info-modal .dialog .info-content .section{margin-bottom:20px}.word-info-modal .dialog .info-content .section h3{margin-top:25px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:5px}.word-info-modal .dialog .info-content .section ul{list-style:none;padding:0;margin:0}.word-info-modal .dialog .info-content .section ul.sub-list{margin-top:5px;margin-left:15px}.word-info-modal .dialog .info-content .section ul.sub-list li{margin-bottom:4px;background:transparent;padding:0;border-radius:0;font-size:.95em}.word-info-modal .dialog .info-content .section ul li{margin-bottom:12px;background:#ffffff0d;padding:10px;border-radius:4px}.word-info-modal .dialog .info-content .section ul li .sentence{font-weight:700;font-style:italic}.word-info-modal .dialog .info-content .section ul li .sentence-translation{font-size:.9em;opacity:.8;margin-top:4px}.word-info-modal .dialog .info-content .section strong{color:#fff}.word-info-modal .dialog .info-content .section.examples li{display:flex;justify-content:space-between}.word-info-modal .dialog .info-content .section.examples li .audio-playback{margin-top:0}.word-info-modal .dialog .info-content .section.examples li .audio-playback.loading{display:block;padding:0}.copy-word-modal ul{list-style-type:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:10px}.copy-word-modal ul button{width:100%;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;background:var(--color-secondary);color:#fff;border-color:#fff}.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}.test-run-modal .test-run-details{overflow-y:auto;margin-bottom:20px}.test-run-modal .test-run-details .results-list{list-style:none;padding:0;margin:0}.test-run-modal .test-run-details .results-list .result-item{display:flex;align-items:center;padding:10px;border-bottom:1px solid rgba(0,0,0,.1)}.test-run-modal .test-run-details .results-list .result-item.correct .status-icon{color:var(--color-correct)}.test-run-modal .test-run-details .results-list .result-item.failed .status-icon{color:var(--color-failed)}.test-run-modal .test-run-details .results-list .result-item .status-icon{margin-right:15px;width:20px}.test-run-modal .test-run-details .results-list .result-item .word-text{font-weight:700}.test-run-modal .test-run-details .results-list .result-item.unanswered{opacity:.5}.profile-container .profile-content{margin:0 auto}.profile-container .profile-content h1{text-align:center;margin-top:0;margin-bottom:30px}.profile-container .profile-content .form-group{margin-bottom:20px}.profile-container .profile-content .form-group label{display:block;margin-bottom:5px;font-weight:700}.profile-container .profile-content .form-group input{width:100%;padding:12px;border:1px solid var(--color-border);border-radius:8px;font-size:1rem}.profile-container .profile-content .form-group input:focus{outline:none;border-color:var(--color-base)}.profile-container .profile-content .form-group .user-id-display{padding:12px;background:var(--color-bg-secondary);border-radius:8px;font-family:monospace;font-size:.8rem;word-break:break-all;color:var(--color-text-secondary)}.profile-container .profile-content .actions{margin-top:30px;display:flex;justify-content:center}.profile-container .profile-content .actions button{padding:12px 30px;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:opacity .2s}.profile-container .profile-content .actions button:disabled{opacity:.5;cursor:not-allowed}.profile-container .profile-content .actions button:not(:disabled):hover{opacity:.9}.profile-container .profile-content .stats-section{margin-top:40px;border-top:1px solid var(--color-border);padding-top:20px}.profile-container .profile-content .stats-section h2{margin-bottom:20px;color:var(--color-primary)}.profile-container .profile-content .stats-section h3{margin:20px 0 10px;font-size:1.1rem;border-bottom:1px solid var(--color-border);padding-bottom:5px}.profile-container .profile-content .stats-section .word-stats-list{background:var(--color-bg-secondary);border-radius:8px;padding:10px;max-height:400px;overflow-y:auto;font-size:.9rem}.profile-container .profile-content .stats-section .test-runs-table-container{background:var(--color-bg-secondary);border-radius:8px;padding:10px;max-height:500px;overflow-x:auto;overflow-y:auto}.profile-container .profile-content .stats-section .test-runs-table-container .test-runs-table{width:100%;border-collapse:collapse;font-size:.8rem}.profile-container .profile-content .stats-section .test-runs-table-container .test-runs-table th,.profile-container .profile-content .stats-section .test-runs-table-container .test-runs-table td{text-align:left;padding:8px 4px;border-bottom:1px solid rgba(255,255,255,.05)}.profile-container .profile-content .stats-section .test-runs-table-container .test-runs-table th{font-weight:700;white-space:nowrap}.profile-container .profile-content .stats-section .test-runs-table-container .test-runs-table .category{font-weight:700;color:var(--color-text)}.profile-container .profile-content .stats-section .test-runs-table-container .test-runs-table .timestamp{color:var(--color-text-secondary);font-size:.75rem}.profile-container .profile-content .stats-section .test-runs-table-container .test-runs-table .completion,.profile-container .profile-content .stats-section .test-runs-table-container .test-runs-table .accuracy,.profile-container .profile-content .stats-section .test-runs-table-container .test-runs-table .duration{white-space:nowrap}.profile-container .profile-content .stats-section .test-runs-table-container .test-runs-table .clickable-row{cursor:pointer}.profile-container .profile-content .stats-section .test-runs-table-container .test-runs-table .clickable-row:hover{background:#ffffff1a}.profile-container .profile-content .stats-section .test-runs-table-container .no-runs{padding:10px;font-style:italic;color:var(--color-text-secondary);text-align:center}.profile-container .profile-content .stats-section .word-stat-item{padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05)}.profile-container .profile-content .stats-section .word-stat-item:last-child{border-bottom:none}.profile-container .profile-content .stats-section .word-id{font-weight:700}.profile-container .profile-content .stats-section .correct{color:#4caf50}.profile-container .profile-content .stats-section .failed{color:#f44336}:root{--color-base: #00072e;--color-secondary: #2e2f54;--color-modal: #181d39;--background: linear-gradient(-45deg,#00072e 0%, #101c5e 100%);--color-correct: #0f0;--color-failed: #f00}.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}.settings .sharing-section .push-section{text-align:left;margin-bottom:20px}.settings .sharing-section .push-section h3{margin-top:0;margin-bottom:10px;font-size:1.2em}.settings .sharing-section .push-section .status-msg.success{color:#28a745;font-weight:700}.settings .sharing-section .push-section .btn-primary{width:100%;padding:10px;font-size:18px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.settings .sharing-section .push-section .info-msg{font-size:16px;color:#666;font-style:italic;background:#eee;padding:10px;border-radius:4px}.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}