*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#233d4d;min-height:100vh}.app{min-height:100vh;padding:20px;display:flex;justify-content:center;align-items:center}.home-container{max-width:600px;width:100%;text-align:center}.app-title{font-size:3.5rem;color:#fff;margin-bottom:10px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.app-subtitle{font-size:1.2rem;color:#ffffffe6;margin-bottom:40px}.stats-card{background:#fff;border-radius:15px;padding:25px;margin-bottom:30px;box-shadow:0 8px 20px #00000026}.stats-card h3{color:#333;margin-bottom:20px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.stat-item{padding:15px;background:#215e61;border-radius:10px;color:#fff}.stat-value{font-size:2rem;font-weight:700;margin-bottom:5px}.stat-label{font-size:.9rem;opacity:.9}.menu-buttons{display:flex;flex-direction:column;gap:20px;margin-bottom:30px}.menu-button{background:#fff;border:none;border-radius:15px;padding:30px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0000001a;display:flex;flex-direction:column;align-items:center;gap:10px}.menu-button:hover{transform:translateY(-5px);box-shadow:0 8px 25px #0003}.button-icon{font-size:3rem}.button-text{font-size:1.5rem;font-weight:600;color:#333}.button-desc{font-size:.95rem;color:#666}.home-footer{color:#fffc;font-size:.9rem}.flashcard-container{max-width:800px;width:100%}.flashcard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:15px}.flashcard-header h2{color:#fff;font-size:2rem}.flashcard-controls{display:flex;gap:10px}.back-button{background:#fff3;color:#fff;border:2px solid white;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:1rem;transition:all .3s ease}.back-button:hover{background:#fff;color:#215e61}.filter-select{padding:10px 15px;border-radius:8px;border:2px solid white;background:#ffffffe6;cursor:pointer;font-size:.95rem}.shuffle-button{background:#ffffffe6;border:2px solid white;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:.95rem;transition:all .3s ease}.shuffle-button:hover{background:#fff}.progress-bar{margin-bottom:30px}.progress-text{color:#fff;text-align:center;margin-bottom:10px;font-size:1.1rem}.progress-fill-container{width:100%;height:8px;background:#ffffff4d;border-radius:10px;overflow:hidden}.progress-fill{height:100%;background:#fff;transition:width .3s ease;border-radius:10px}.card-wrapper{perspective:1000px;margin-bottom:30px}.card{width:100%;height:400px;position:relative;transform-style:preserve-3d;transition:transform .6s;cursor:pointer}.card.flipped{transform:rotateY(180deg)}.card-front,.card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:20px;box-shadow:0 10px 30px #0000004d;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;background:#fff}.card-back{transform:rotateY(180deg)}.category-badge{position:absolute;top:20px;right:20px;background:#215e61;color:#fff;padding:8px 16px;border-radius:20px;font-size:.85rem;font-weight:600}.character-display{font-size:10rem;color:#333;margin-bottom:20px}.english-display{font-size:3rem;color:#333;font-weight:600;margin-bottom:20px}.character-small{font-size:4rem;color:#999}.tap-hint{color:#999;font-size:.95rem}.vowel-sign-hint{color:#666;font-size:.85rem;margin-top:15px;padding:10px 20px;background:#f8f9fa;border-radius:8px;font-style:italic;max-width:90%;text-align:center}.vowel-sign-explanation{color:#666;font-size:.9rem;margin-top:15px;font-style:italic}.navigation-buttons{display:flex;gap:15px;justify-content:center}.nav-button{background:#fff;border:none;padding:15px 40px;border-radius:10px;cursor:pointer;font-size:1.1rem;font-weight:600;color:#215e61;transition:all .3s ease;box-shadow:0 4px 15px #0000001a}.nav-button:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 6px 20px #00000026}.nav-button:disabled{opacity:.5;cursor:not-allowed}.nav-button.primary{background:#215e61;color:#fff}.quiz-container{max-width:700px;width:100%}.quiz-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;color:#fff;flex-wrap:wrap;gap:15px}.quiz-progress,.quiz-score{font-size:1.2rem;font-weight:600}.next-button-card{background:#215e61;color:#fff;border:none;padding:12px 35px;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #215e614d;margin-top:12px;display:block;margin-left:auto;margin-right:auto}.next-button-card:hover{background:#1a4b4e;transform:translateY(-2px);box-shadow:0 6px 20px #215e6166}.question-card{background:#fff;border-radius:16px;padding:25px;box-shadow:0 10px 30px #0003}.question-text{text-align:center;font-size:1.1rem;color:#666;margin-bottom:12px}.question-character{text-align:center;font-size:5rem;color:#333;margin-bottom:20px}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:15px}.option-button{background:#f8f9fa;border:2px solid #e9ecef;padding:12px;border-radius:10px;cursor:pointer;font-size:2rem;font-weight:600;color:#333;transition:all .3s ease}.option-button:hover:not(:disabled){background:#e9ecef;transform:translateY(-2px)}.option-button.correct{background:#d4edda;border-color:#28a745;color:#155724}.option-button.incorrect{background:#f8d7da;border-color:#dc3545;color:#721c24}.option-button.disabled{opacity:.5;cursor:not-allowed}.feedback{text-align:center;padding:10px;border-radius:8px;font-size:1rem;font-weight:600}.feedback.correct{background:#d4edda;color:#155724}.feedback.incorrect{background:#f8d7da;color:#721c24}.results-card{background:#fff;border-radius:20px;padding:50px;text-align:center;box-shadow:0 10px 30px #0003}.results-card h2{font-size:2.5rem;color:#333;margin-bottom:30px}.score-display{margin-bottom:30px}.score-circle{display:inline-block;padding:40px;border-radius:50%;background:#215e61;color:#fff}.score-percentage{font-size:4rem;font-weight:700}.score-fraction{font-size:1.3rem;opacity:.9}.results-message{font-size:1.5rem;margin-bottom:30px;color:#555}.results-buttons{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.quiz-button{border:none;padding:15px 40px;border-radius:10px;cursor:pointer;font-size:1.1rem;font-weight:600;transition:all .3s ease;box-shadow:0 4px 15px #0000001a}.quiz-button.primary{background:#215e61;color:#fff}.quiz-button.secondary{background:#e9ecef;color:#333}.quiz-button:hover{transform:translateY(-3px);box-shadow:0 6px 20px #00000026}.loading{color:#fff;font-size:1.5rem;text-align:center}.review-section{margin-top:20px;background:#fff;border-radius:16px;padding:20px;box-shadow:0 10px 30px #0003}.review-section h3{margin:0 0 15px;color:#215e61;font-size:1.3rem;text-align:center}.review-item{display:flex;align-items:flex-start;gap:12px;padding:12px;margin-bottom:10px;border-radius:10px;border-left:4px solid}.review-item.correct{background:#f0fdf4;border-left-color:#22c55e}.review-item.incorrect{background:#fef2f2;border-left-color:#ef4444}.review-question-number{font-weight:600;color:#666;font-size:.85rem;min-width:80px}.review-content{flex:1}.review-question{margin-bottom:8px}.review-char{font-size:2rem;color:#333}.review-sound{font-size:1.1rem;color:#333;font-weight:500}.review-answers{font-size:.9rem}.review-answer-row{margin-bottom:4px}.review-label{color:#666;margin-right:8px}.answer-correct{color:#22c55e;font-weight:600}.answer-wrong{color:#ef4444;font-weight:600}.review-meaning{margin-top:6px;font-size:.85rem;color:#666;font-style:italic}.review-status{font-size:1.5rem;font-weight:700}.review-item.correct .review-status{color:#22c55e}.review-item.incorrect .review-status{color:#ef4444}@media (max-width: 768px){.app-title{font-size:2.5rem}.character-display{font-size:7rem}.question-character{font-size:6rem}.card{height:350px}.options-grid,.stats-grid{grid-template-columns:1fr}.flashcard-header{flex-direction:column;align-items:stretch}.flashcard-controls{flex-direction:column}.character-grid.auto{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}.character-grid.fixed-5{grid-template-columns:repeat(5,1fr);gap:6px;max-width:100%}.section-title{font-size:1.2rem}.filter-tabs{gap:5px}.filter-tab{padding:8px 15px;font-size:.85rem}}.home-grid-container{max-width:1200px;width:100%;padding-bottom:100px}.grid-header{text-align:center;margin-bottom:30px}.grid-title{font-size:2.5rem;color:#f5fbe6;margin-bottom:10px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.grid-subtitle{font-size:1.1rem;color:#f5fbe6}.stats-bar{display:flex;gap:15px;justify-content:center;margin-bottom:20px;flex-wrap:wrap}.stats-bar .stat-item{display:flex;align-items:center;gap:8px;background:#f5fbe6;padding:10px 20px;border-radius:25px;box-shadow:0 2px 8px #0003}.stat-badge{padding:4px 12px;border-radius:12px;font-size:.85rem;font-weight:600;color:#fff}.stat-badge.new{background:#888;color:#f5fbe6}.stat-badge.learning{background:#fe7f2d;color:#f5fbe6}.stat-badge.practiced{background:#4caf50;color:#f5fbe6}.stat-badge.mastered{background:#215e61;color:#f5fbe6}.stat-count{font-weight:700;font-size:1.1rem;color:#333}.filter-tabs{display:flex;gap:10px;justify-content:center;margin-bottom:30px;flex-wrap:wrap}.filter-tab{background:#f5fbe6;border:2px solid transparent;padding:10px 20px;border-radius:25px;cursor:pointer;font-size:.95rem;font-weight:600;color:#215e61;transition:all .3s ease}.filter-tab:hover{background:#fff;transform:translateY(-2px)}.filter-tab.active{background:#fe7f2d;color:#f5fbe6;border-color:#f5fbe6}.character-section{margin-bottom:40px}.section-header{transition:opacity .2s ease;margin-bottom:15px}.section-header:hover{opacity:.8}.section-title{color:#f5fbe6;font-size:1.5rem;font-weight:600;margin-bottom:0;text-align:center;display:flex;align-items:center;justify-content:center;gap:10px;-webkit-user-select:none;user-select:none}.section-toggle-icon{font-size:1rem;transition:transform .2s ease;color:#fe7f2d}.section-note{color:#fe7f2d;font-size:.9rem;font-style:italic;margin-bottom:10px;text-align:center;text-shadow:1px 1px 3px rgba(0,0,0,.3)}.word-details{margin-top:20px;padding:20px;border-radius:12px;text-align:center;animation:fadeIn .3s ease}.word-details.correct-word{background:#90e0a1;border:3px solid #4CAF50}.word-details.incorrect-word{background:#ffb8b8;border:3px solid #F44336}.word-sourashtra{font-size:3rem;margin-bottom:10px;font-weight:700;color:#233d4d}.word-pronunciation{font-size:1.5rem;margin-bottom:8px;color:#333;font-weight:600}.word-meaning{font-size:1.3rem;color:#555;font-weight:500}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.character-grid{display:grid;gap:10px;margin-bottom:20px}.character-grid.auto{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.character-grid.fixed-5{grid-template-columns:repeat(5,1fr);max-width:600px;margin-left:auto;margin-right:auto}.character-tile{background:#f5fbe6;border:2px solid #215E61;border-radius:12px;padding:15px 10px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:120px;position:relative}.character-tile:hover{transform:translateY(-3px);box-shadow:0 4px 12px #0000004d;border-color:#fe7f2d;background:#fff}.tile-character{font-size:2.5rem;color:#333;line-height:1}.tile-english{font-size:.9rem;color:#666;font-weight:600}.tile-accuracy{position:absolute;top:5px;right:5px;background:#000000b3;color:#fff;font-size:.75rem;padding:2px 6px;border-radius:8px;font-weight:600}.quiz-fab{position:fixed;bottom:30px;right:30px;background:#fe7f2d;color:#f5fbe6;border:3px solid #F5FBE6;border-radius:50px;padding:15px 30px;cursor:pointer;box-shadow:0 4px 20px #fe7f2d99;display:flex;align-items:center;gap:10px;font-size:1.1rem;font-weight:700;transition:all .3s ease;z-index:100}.quiz-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 30px #fe7f2dcc;background:#ff9d5c}.fab-icon{font-size:1.5rem}.word-quiz-fab{position:fixed;bottom:30px;right:180px;background:#215e61;color:#f5fbe6;border:3px solid #F5FBE6;border-radius:50px;padding:15px 30px;cursor:pointer;box-shadow:0 4px 20px #215e6199;display:flex;align-items:center;gap:10px;font-size:1.1rem;font-weight:700;transition:all .3s ease;z-index:100;animation:slideIn .5s ease}.word-quiz-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 30px #215e61cc;background:#2a7a7e}@keyframes slideIn{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}.unlock-progress{position:fixed;bottom:95px;right:30px;background:#f5fbe6;color:#233d4d;border:2px solid #FE7F2D;border-radius:12px;padding:10px 20px;font-size:.9rem;font-weight:600;text-align:center;box-shadow:0 4px 15px #0003;z-index:99;animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.progress-legend{background:#f5fbe6;border-radius:15px;padding:20px;margin-top:20px}.progress-legend h3{color:#333;margin-bottom:15px;font-size:1.1rem}.legend-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.legend-item{display:flex;align-items:center;gap:10px;font-size:.9rem;color:#666}.legend-color{width:30px;height:30px;border-radius:6px;border:2px solid #dee2e6}.legend-color.new{background:#f5fbe6}.legend-color.learning{background:#ffe8b8}.legend-color.practiced{background:#90e0a1}.legend-color.mastered{background:#a8dadc}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;padding:20px}.modal-content{background:#fff;border-radius:20px;padding:40px;max-width:500px;width:100%;position:relative;box-shadow:0 10px 40px #0000004d}.modal-close{position:absolute;top:15px;right:15px;background:#e9ecef;border:none;width:35px;height:35px;border-radius:50%;cursor:pointer;font-size:1.3rem;color:#333;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.modal-close:hover{background:#dee2e6;transform:rotate(90deg)}.modal-card-wrapper{perspective:1000px;margin-bottom:20px}.modal-card{width:100%;height:350px;position:relative;transform-style:preserve-3d;transition:transform .6s;cursor:pointer}.modal-card.flipped{transform:rotateY(180deg)}.modal-card-front,.modal-card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:15px;box-shadow:0 4px 15px #0000001a;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;background:linear-gradient(135deg,#f8f9fa,#e9ecef)}.modal-card-back{transform:rotateY(180deg)}.modal-character{font-size:6rem;color:#333;margin-bottom:15px}.modal-english{font-size:2.5rem;color:#333;font-weight:600;margin-bottom:15px}.modal-character-small{font-size:3rem;color:#999}.modal-hint,.modal-explanation{text-align:center;color:#666;font-size:.9rem;margin-top:10px;padding:8px 15px;background:#fffc;border-radius:8px}.modal-tap-hint{color:#999;font-size:.85rem;margin-top:10px}.modal-info{display:flex;justify-content:center;gap:20px}.info-item{display:flex;gap:8px}.info-label{font-weight:600;color:#666}.info-value{color:#333;text-transform:capitalize}.install-button{position:fixed;top:20px;right:20px;background:linear-gradient(135deg,#215e61,#2a7074);color:#fff;border:none;border-radius:12px;padding:12px 24px;font-size:1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:10px;box-shadow:0 4px 15px #215e614d;transition:all .3s ease;z-index:999;animation:slideIn .5s ease}.install-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #215e6166}.install-button:active{transform:translateY(0)}.install-icon{font-size:1.3rem}.install-text{font-size:.95rem}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@media (max-width: 768px){.install-button{top:10px;right:10px;padding:10px 16px;font-size:.9rem;gap:8px}.install-icon{font-size:1.1rem}.install-text{font-size:.85rem}}.app{padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom));padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}.quiz-fab{bottom:max(30px,calc(env(safe-area-inset-bottom) + 10px));right:max(30px,calc(env(safe-area-inset-right) + 10px))}body{overscroll-behavior:none}@media (max-width: 768px){.character-tile{min-height:100px;padding:12px 8px}.tile-character{font-size:2rem}.filter-tab{padding:8px 16px;font-size:.9rem}.option-button{padding:14px;font-size:1rem}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#root{width:100%}