@import"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&display=swap";*{margin:0;padding:0;box-sizing:border-box}html{width:100%;min-width:100%;max-width:100%}body{width:100%;min-width:100%;max-width:100%;margin:0;padding:0;position:relative}:root{--bg-color: white;--text-color: #2C3E50;--accent-color: #F1C40F;--accent-light: rgba(241, 196, 15, .1);--accent-medium: rgba(241, 196, 15, .2);--success-color: #28a745;--success-light: rgba(40, 167, 69, .1);--error-color: #E74C3C;--error-light: rgba(220, 53, 69, .1);--border-color: #E8E8E8;--shadow-color: rgba(44, 62, 80, .08);font-family:Open Sans,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:var(--text-color)}body{min-height:100vh;background-color:var(--bg-color)}@media (max-width: 600px){html,body{height:100vh;overflow:hidden;position:fixed;width:100%}}button{border:1px solid var(--border-color);background-color:var(--bg-color)}body.dark{--bg-color: #121212;--text-color: #ffffff;--accent-color: #FFD700;--accent-light: rgba(255, 215, 0, .1);--accent-medium: rgba(255, 215, 0, .2);--success-color: #2ecc71;--success-light: rgba(46, 204, 113, .1);--error-color: #e74c3c;--error-light: rgba(231, 76, 60, .1);--border-color: #333333;--shadow-color: rgba(255, 255, 255, .05)}.star-button{background:none;border:none;padding:4px;cursor:pointer;color:var(--accent-color);display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.star-button:hover{transform:scale(1.1)}.star-button svg{width:20px;height:20px}.star-button.favorite{color:var(--accent-color)}.star-button.category-star{padding:0;margin-right:4px;pointer-events:none}.star-button.category-star svg{width:16px;height:16px}.header{background-color:var(--bg-color);box-shadow:0 4px 12px var(--shadow-color);z-index:100;display:flex;flex-direction:row}@media (max-width: 600px){.header{flex-shrink:0}}@media (min-width: 601px){.header{position:fixed;top:0;left:0;right:0;width:100%}}.tab{height:40px;padding:0 .8rem;border:none;cursor:pointer;font-size:1.2rem;font-weight:500;color:var(--text-color);border-bottom:1px solid var(--border-color);position:relative;background-color:var(--bg-color);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.tab.active{color:var(--accent-color);border-bottom:2px solid var(--accent-color)}.categories-container{position:relative;z-index:101;margin:0;background-color:var(--bg-color);border-bottom:1px solid var(--border-color);height:40px;display:flex;align-items:center;overflow:visible;flex:1}.categories-row{display:inline-flex;gap:.1rem;padding:0 .2rem;height:100%;align-items:center}.category-button{height:28px;padding:0 .3rem;border-radius:6px;border:none;cursor:pointer;white-space:nowrap;color:var(--text-color);font-weight:500;transition:all .2s ease;background-color:transparent;font-size:.9rem;display:flex;align-items:center;justify-content:center}.category-button:hover{color:var(--accent-color);background-color:var(--accent-light)}.category-button.active{color:var(--accent-color);background-color:var(--accent-light);font-weight:500}.category-select-wrapper{position:relative}.category-select-button{height:28px;padding:0 .8rem;border-radius:6px;border:none;cursor:pointer;white-space:nowrap;color:var(--text-color);font-weight:500;transition:all .2s ease;background-color:transparent;font-size:.9rem;display:flex;align-items:center;justify-content:center}.category-select-button:hover{color:var(--accent-color);background-color:var(--accent-light)}.category-popup{position:absolute;top:100%;left:0;background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:6px;box-shadow:0 4px 12px var(--shadow-color);z-index:102;min-width:200px;margin-top:.5rem;max-height:400px;overflow-y:auto}.category-popup .category-button{display:flex;width:100%;border-radius:0;padding:.5rem 1rem;height:auto;justify-content:flex-start;text-align:left;align-items:center}.category-popup .category-button:hover{background-color:var(--accent-light)}.filter-icon{margin-left:.5rem}.github-tab{display:flex;align-items:center;justify-content:center;transition:all .2s ease}.github-tab:hover{color:var(--accent-color)}.category-popup h3{margin:.5rem 0 .25rem 1rem;font-size:1.1rem;font-weight:600;color:var(--text-color);border-bottom:1px solid var(--border-color)}.answer-button{padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:8px;text-align:left;cursor:pointer;font-size:1rem;line-height:1.4;color:var(--text-color);width:100%;transition:all .2s ease}.answer-button:disabled{cursor:default}.answer-button.review-mode.correct,.answer-button.test-mode.correct{border-color:var(--success-color);color:var(--success-color);background-color:var(--success-light)}.answer-button.test-mode.incorrect{border-color:var(--error-color);color:var(--error-color);background-color:var(--error-light)}.try-again-button{margin-top:16px;padding:12px;color:var(--accent-color);border:1px solid var(--accent-color);border-radius:4px;cursor:pointer;font-size:14px}.try-again-button:hover{background-color:var(--accent-light)}.question-card{border-radius:12px;padding:1.25rem;box-shadow:0 4px 12px var(--shadow-color);position:relative;border:1px solid var(--border-color);display:flex;flex-direction:column;min-height:200px}.question-header{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:1.25rem}.question-badge{position:absolute;top:-10px;left:-10px;background-color:var(--bg-color);color:var(--accent-color);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:600;border:1px solid var(--accent-color);box-shadow:0 2px 4px var(--shadow-color);padding:0 .25rem}.question-text{margin:0;font-size:1.1rem;color:var(--text-color);font-weight:500;line-height:1.4;flex:1}.answers-container{display:flex;flex-direction:column;gap:10px;flex:1}.question-image-container{margin:0 auto 20px;max-width:400px;width:100%}.question-image{width:100%;height:auto;display:block;border-radius:8px;box-shadow:0 2px 4px #0000001a}.question-image-text{margin:.5rem 0 0;font-size:.9rem;color:var(--text-color);text-align:center;font-style:italic;line-height:1.4}.question-category{margin-top:1rem;padding-top:.45rem;border-top:1px solid var(--border-color);font-size:.8rem;color:var(--text-color);opacity:.5;text-align:right}@media (max-width: 600px){.question-card{margin-bottom:0;width:100%;box-sizing:border-box}}.question-list-container{padding:1rem 0;position:relative}.scroll-top-button{position:fixed;bottom:65px;right:5px;width:40px;height:40px;border-radius:50%;color:var(--accent-color);background-color:var(--accent-medium);border:none;font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px var(--shadow-color);transition:opacity .3s ease;z-index:1000}.mobile-question-container{display:flex;flex-direction:column;height:100%;min-height:0}.single-question-wrapper{flex:1;overflow-y:auto;padding:1rem;min-height:0;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.empty-questions,.loading-question{display:flex;align-items:center;justify-content:center;min-height:50vh;color:var(--text-color);opacity:.6}.empty-questions p,.loading-question p{font-size:16px;text-align:center}@media (max-width: 600px){.question-list-container,.scroll-top-button{display:none}}@media (min-width: 601px){.mobile-question-container{display:none}}.navigation-controls{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;z-index:100}@media (max-width: 600px){.navigation-controls{flex-shrink:0}}@media (min-width: 601px){.navigation-controls{display:none}}.nav-button{display:flex;align-items:center;padding:6px 8px;border-radius:8px;background-color:var(--accent-color);color:var(--bg-color);border:none;font-size:16px;font-weight:600;min-width:80px;justify-content:center;cursor:pointer;transition:all .2s ease}.nav-button:hover:not(.disabled){transform:translateY(-1px);box-shadow:0 4px 8px var(--shadow-color)}.nav-button.disabled{background-color:var(--border-color);color:var(--text-color);opacity:.5;cursor:not-allowed}.question-number-button{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:8px;border-radius:12px;background-color:var(--bg-color);border:2px solid var(--accent-color);min-width:100px;cursor:pointer;transition:all .2s ease}.question-number-button:hover{background-color:var(--accent-light);transform:translateY(-1px)}.question-number-text{color:var(--accent-color);font-size:16px;font-weight:700;margin-right:4px}@media (max-width: 600px){.nav-button{font-size:14px;min-width:70px;padding:8px 6px}.question-number-button{min-width:90px}}.question-picker-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;padding:20px}.question-picker-modal{background-color:var(--bg-color);border-radius:16px;width:100%;max-width:500px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 10px 30px var(--shadow-color)}.question-picker-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--border-color)}.question-picker-title{margin:0;font-size:18px;font-weight:700;color:var(--text-color)}.question-picker-close{width:32px;height:32px;border-radius:16px;background-color:var(--border-color);border:none;font-size:16px;font-weight:700;color:var(--text-color);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease}.question-picker-close:hover{background-color:var(--accent-light)}.question-picker-legend{display:flex;justify-content:space-around;padding:12px 20px;border-bottom:1px solid var(--border-color);background-color:var(--accent-light)}.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-color);opacity:.7}.legend-dot{width:12px;height:12px;border-radius:6px}.legend-dot.correct{background-color:#4caf50}.legend-dot.incorrect{background-color:#f44336}.legend-dot.unanswered{background-color:var(--border-color)}.question-picker-grid{padding:20px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;overflow-y:auto;max-height:400px}.question-picker-item{position:relative;height:50px;border-radius:8px;background-color:var(--bg-color);border:1px solid var(--border-color);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.question-picker-item:hover{background-color:var(--accent-light);transform:translateY(-1px)}.question-picker-item.selected{background-color:var(--accent-color);border-color:var(--accent-color)}.question-picker-item.selected .question-item-number{color:var(--bg-color)}.question-picker-item.correct{border-color:#4caf50;border-width:2px}.question-picker-item.incorrect{border-color:#f44336;border-width:2px}.question-item-number{font-size:16px;font-weight:600;color:var(--text-color)}.answer-indicator{position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:4px}.answer-indicator.correct{background-color:#4caf50}.answer-indicator.incorrect{background-color:#f44336}@media (max-width: 600px){.question-picker-overlay{padding:10px}.question-picker-modal{max-height:90vh}.question-picker-grid{grid-template-columns:repeat(4,1fr);gap:8px;padding:15px}.question-picker-item{height:45px}.question-item-number{font-size:14px}}.welcome-container{min-height:100vh;display:flex;flex-direction:column;background-color:var(--bg-color)}.welcome-content{flex:1;display:flex;flex-direction:column;max-width:800px;width:100%;margin:0 auto;background:var(--bg-color);padding:2rem}.readme-content{flex:1;overflow-y:auto;margin-bottom:2rem;line-height:1.6;color:var(--text-color);font-size:1rem;padding-right:.5rem}.readme-content h1,.readme-content h2,.readme-content h3{margin-top:1.5em;margin-bottom:.5em;color:var(--text-color)}.readme-content h1{font-size:2em;border-bottom:2px solid var(--border-color);padding-bottom:.3em}.readme-content h2{font-size:1.5em;border-bottom:1px solid var(--border-color);padding-bottom:.3em}.readme-content h3{font-size:1.25em}.readme-content p{margin:1em 0}.readme-content strong{font-weight:600;color:var(--text-color)}.readme-content a{color:var(--accent-color);text-decoration:none}.readme-content a:hover{text-decoration:underline}.readme-content hr{border:none;border-top:2px solid var(--border-color);margin:2em 0}.readme-content code{background-color:var(--accent-light);padding:.2em .4em;border-radius:3px;font-family:monospace;font-size:.9em}.start-button{display:block;width:200px;margin:0 auto;padding:12px 24px;font-size:1.2rem;font-weight:600;color:#2c3e50;background-color:#f1c40f;border:1px solid #F1C40F;border-radius:6px;cursor:pointer;transition:all .3s ease;position:sticky;bottom:1rem}@media (max-width: 768px){.welcome-container{height:100vh;height:100dvh;position:relative;padding-bottom:100px;box-sizing:border-box}.welcome-content{margin:0;border-radius:0;padding:1rem;height:100%;box-sizing:border-box}.readme-content{height:100%;overflow-y:auto;padding-bottom:20px}.start-button{position:fixed;left:50%;transform:translate(-50%);z-index:1000;bottom:calc(20px + env(safe-area-inset-bottom,0));box-shadow:0 4px 20px #0000004d}}body.dark .welcome-container{--bg-color: #1a1a1a}body.dark .readme-content a{color:gold}body.dark .start-button{color:#121212}.vocabulary-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;opacity:0;animation:fadeIn .3s ease-out forwards}.vocabulary-overlay.closing{animation:fadeOut .3s ease-in forwards}body:has(.vocabulary-overlay){overflow:hidden}body.vocabulary-open{overflow:hidden}.vocabulary-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000080;touch-action:none}.vocabulary-container{position:absolute;top:0;right:0;width:90%;max-width:700px;height:100vh;background:var(--bg-color);box-shadow:-2px 0 10px #0000004d;padding:20px;display:flex;flex-direction:column;transform:translate(100%);animation:slideInRight .3s ease-out forwards}.vocabulary-container.closing{animation:slideOutRight .3s ease-in forwards}.vocabulary-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid var(--border-color)}.vocabulary-header h2{margin:0;font-size:1.5rem;color:var(--text-color)}.close-button{background:none;border:none;font-size:2rem;cursor:pointer;color:var(--text-color);padding:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease}.close-button:hover{background-color:var(--border-color)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutRight{0%{transform:translate(0)}to{transform:translate(100%)}}.language-switcher{display:flex;gap:10px;margin-bottom:20px;justify-content:center}.lang-button{padding:8px 16px;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-color);cursor:pointer;transition:all .2s ease;color:var(--text-color);font-size:.9rem}.lang-button:hover{background:var(--accent-light);color:var(--accent-color)}.lang-button.active{background:var(--accent-color);color:var(--text-color);border-color:var(--accent-color)}.vocabulary-list{background:var(--bg-color);border-radius:8px;box-shadow:0 2px 4px var(--shadow-color);padding:20px;display:flex;flex-direction:column;gap:0;flex:1;overflow-y:auto;min-height:0}.vocabulary-item{padding:12px 0;border-bottom:1px solid var(--border-color);font-size:.95rem;line-height:1.4;color:var(--text-color)}.vocabulary-item:last-child{border-bottom:none}.vocabulary-item.category{font-weight:600;background:var(--accent-light);margin-top:20px;border-radius:4px;color:var(--text-color);padding:16px 0 8px;border-bottom:none}.vocabulary-item.word{display:flex;align-items:center;min-height:40px;color:var(--text-color)}.separator{margin:0 8px;opacity:.7;color:var(--text-color)}[lang=ar]{direction:rtl;text-align:right;font-family:system-ui,-apple-system,sans-serif}@media (max-width: 600px){.vocabulary-container{width:100%;padding:15px}.vocabulary-list{padding:15px}.vocabulary-item{padding:8px 0}.vocabulary-header h2{font-size:1.3rem}.close-button{width:35px;height:35px;font-size:1.5rem}}body.dark .lang-button.active{color:#121212}body.dark .vocabulary-item.category{background:var(--accent-medium)}.statistics-container{background-color:var(--bg-color);box-shadow:0 -4px 12px var(--shadow-color);z-index:10;padding:.2rem;padding-bottom:calc(.2rem + env(safe-area-inset-bottom,0))}@media (max-width: 600px){.statistics-container{flex-shrink:0}}@media (min-width: 601px){.statistics-container{position:fixed;bottom:0;left:0;right:0;width:100%}}.statistics-card{background-color:var(--bg-color);max-width:500px;margin:0 auto}.statistics-content{display:flex;justify-content:flex-start;gap:.2rem}.stat-item{display:flex;align-items:center;gap:.1rem;padding:.1rem;border-radius:6px;transition:all .2s ease;min-width:fit-content}.stat-icon{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.7rem;flex-shrink:0}.correct .stat-icon{background-color:var(--success-color);color:#fff}.incorrect .stat-icon{background-color:var(--error-color);color:#fff}.accuracy .stat-icon{background-color:transparent;color:var(--text-color);font-size:1rem}.stat-number{font-size:1rem;font-weight:600;color:var(--text-color);line-height:1}.stat-number-green{color:var(--success-color)}.stat-number-red{color:var(--error-color)}.statistics-footer{display:flex;align-items:center;gap:.5rem}.progress-bar{height:4px;background-color:var(--border-color);border-radius:2px;overflow:hidden;flex:1}.progress-fill{height:100%;background-color:var(--accent-color);border-radius:2px;transition:width .3s ease}.progress-text{font-size:.7rem;color:var(--text-color);opacity:.8;white-space:nowrap}.clear-button{padding:8px;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-color);cursor:pointer;transition:all .2s ease;font-size:.9rem;color:var(--text-color)}.clear-button:hover{background:var(--accent-light);color:var(--accent-color)}.toggle-button{padding:8px;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-color);cursor:pointer;transition:all .2s ease;font-size:.9rem;color:var(--text-color)}.toggle-button:hover{background:var(--success-light);color:var(--success-color)}.toggle-button.active{background:var(--success-color);color:var(--bg-color);border-color:var(--success-color)}.toggle-button.active:hover{background:var(--success-color);opacity:.9}.buttons-group{display:flex;gap:.2rem;margin-left:auto}@media (max-width: 768px){.stat-item{padding:.3rem;gap:.25rem}.stat-number{font-size:.9rem}}.app-container{background-color:var(--bg-color);width:100%;display:flex;flex-direction:column}@media (max-width: 600px){.app-container{height:100vh;height:100dvh;overflow:hidden}}@media (min-width: 601px){.app-container{min-height:100vh}.app-container>*:nth-child(2){padding-top:60px;padding-bottom:80px}}.questions-grid{padding:0 2rem 2rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;position:relative;z-index:1}