:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}button{font-family:inherit}input[type=number]{appearance:textfield;-moz-appearance:textfield}.app{min-height:100vh;width:100%}.mode-selection{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(135deg,#f5f7fa,#e8ecf1)}.mode-selection h1{color:#2c3e50;font-size:3rem;margin-bottom:3rem;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.1)}.mode-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;max-width:800px;width:100%}.mode-card{background:#fff;border-radius:20px;padding:2.5rem;text-align:center;box-shadow:0 4px 20px #00000014;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;border:1px solid #e8ecf1}.mode-card:hover{transform:translateY(-5px);box-shadow:0 8px 30px #0000001f}.card-icon{font-size:4rem;margin-bottom:1rem}.mode-card h2{color:#333;font-size:1.8rem;margin-bottom:1rem}.mode-card p{color:#6c757d;font-size:1.1rem;margin-bottom:2rem;line-height:1.5}.mode-button{background:#3498db;color:#fff;border:none;border-radius:50px;padding:1rem 2.5rem;font-size:1.2rem;font-weight:600;cursor:pointer;transition:opacity .3s ease,transform .2s ease}.mode-button:hover{opacity:.9;transform:scale(1.05);background:#2980b9}.mode-button:active{transform:scale(.98)}.number-selection{background:#fff;border-radius:20px;padding:3rem;max-width:700px;width:100%;box-shadow:0 4px 20px #00000014;border:1px solid #e8ecf1}.number-selection h2{color:#333;font-size:2rem;margin-bottom:2rem;text-align:center}.difficulty-toggle{margin-bottom:2rem;text-align:center}.toggle-label{display:inline-flex;align-items:center;gap:.8rem;cursor:pointer;font-size:1.1rem;color:#495057;padding:.8rem 1.5rem;background:#f8f9fa;border-radius:50px;transition:all .3s ease;border:1px solid #e8ecf1}.toggle-label:hover{background:#e9ecef;border-color:#dee2e6}.toggle-label input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:#3498db}.toggle-text{font-weight:600}.number-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:1rem;margin-bottom:2rem}.number-button{background:#f8f9fa;color:#495057;border:2px solid #e8ecf1;border-radius:15px;padding:1.5rem;font-size:1.5rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #0000000d}.number-button:hover{transform:translateY(-3px);box-shadow:0 4px 12px #0000001a;background:#fff;border-color:#3498db;color:#3498db}.number-button:active{transform:translateY(-1px)}.back-button{background:#e9ecef;color:#495057;border:1px solid #dee2e6;border-radius:50px;padding:.8rem 2rem;font-size:1.1rem;cursor:pointer;transition:all .3s ease;display:block;margin:0 auto}.back-button:hover{background:#dee2e6;transform:translateY(-2px);box-shadow:0 2px 8px #0000001a}@media(max-width:768px){.mode-selection h1{font-size:2rem}.mode-cards{grid-template-columns:1fr}.number-grid{grid-template-columns:repeat(3,1fr)}}.practice-mode{min-height:100vh;background:linear-gradient(135deg,#f8f9fa,#e9ecef);padding:2rem}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.header .back-button{background:#fff;color:#495057;border:2px solid #dee2e6;border-radius:50px;padding:.8rem 1.5rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.header .back-button:hover{background:#f8f9fa;transform:translate(-5px);box-shadow:0 2px 8px #0000001a}.stats{display:flex;gap:1.5rem;flex-wrap:wrap}.stat{background:#fff;padding:.8rem 1.5rem;border-radius:50px;font-weight:600;color:#495057;box-shadow:0 2px 8px #00000014;font-size:1.1rem;border:1px solid #e8ecf1}.stat.streak{background:linear-gradient(135deg,#ff6b6b,#ff8787);color:#fff;border:none;animation:glow 2s ease-in-out infinite}.stat.best-streak{background:linear-gradient(135deg,#ffd93d,#ffed4e);color:#333;border:none}@keyframes glow{0%,to{box-shadow:0 2px 8px #ff6b6b4d}50%{box-shadow:0 4px 16px #ff6b6b99}}.practice-layout{display:grid;grid-template-columns:1fr auto;gap:2rem;max-width:1200px;margin:0 auto;align-items:start}.practice-container{max-width:600px;flex:1}.header-controls{text-align:center;margin-bottom:1.5rem}.toggle-table-button{background:#fff;color:#495057;border:2px solid #e8ecf1;border-radius:50px;padding:.7rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #00000014}.toggle-table-button:hover{background:#f8f9fa;border-color:#3498db;color:#3498db;transform:translateY(-2px);box-shadow:0 4px 12px #0000001f}.reference-table{background:#fff;border-radius:20px;padding:2rem;box-shadow:0 4px 20px #00000014;border:1px solid #e8ecf1;max-width:350px;position:sticky;top:2rem}.reference-table h3{color:#2c3e50;font-size:1.5rem;margin-bottom:1.5rem;text-align:center}.table-grid{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.table-row{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;background:#f8f9fa;border-radius:10px;transition:all .3s ease;font-weight:600;border:2px solid transparent}.table-row.current{background:#e3f2fd;border-color:#3498db;transform:scale(1.05);box-shadow:0 2px 8px #3498db4d}.table-equation{color:#495057;font-size:1.1rem}.table-equals{color:#adb5bd;margin:0 .5rem}.table-result{color:#3498db;font-size:1.2rem;font-weight:700}.table-tips{background:#fff9e6;border:2px solid #ffe066;border-radius:15px;padding:1.5rem;margin-top:1.5rem}.table-tips h4{color:#2c3e50;font-size:1.1rem;margin-bottom:.8rem}.table-tips ul{list-style:none;padding:0;margin:0}.table-tips li{color:#6c757d;font-size:1rem;line-height:1.6;margin-bottom:.5rem;padding-left:.5rem}.practice-container{max-width:600px;margin:0 auto}.practice-container h2{color:#2c3e50;text-align:center;font-size:2.5rem;margin-bottom:2rem;text-shadow:0 2px 4px rgba(0,0,0,.1)}.challenge-badge{font-size:1.5rem;display:inline-block;animation:flicker 2s ease-in-out infinite}.problem-card{background:#fff;border-radius:30px;padding:3rem;box-shadow:0 4px 20px #00000014;margin-bottom:2rem;border:1px solid #e8ecf1}.problem-display{display:flex;align-items:center;justify-content:center;gap:1.5rem;font-size:3rem;font-weight:700;margin-bottom:2rem}.number{color:#3498db;min-width:80px;text-align:center}.operator{color:#7f8c8d}.equals{color:#495057}.answer-input{width:150px;font-size:3rem;font-weight:700;text-align:center;border:3px solid #e8ecf1;border-radius:15px;padding:.5rem;transition:all .3s ease;background:#fafbfc}.answer-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db33}.answer-input.correct{border-color:#28a745;background:#d4edda;color:#155724}.answer-input.incorrect{border-color:#dc3545;background:#f8d7da;color:#721c24}.answer-input::-webkit-inner-spin-button,.answer-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.result{text-align:center;padding:1.5rem;border-radius:15px;animation:slideIn .3s ease}.result.correct{background:#d4edda;border:2px solid #28a745}.result.incorrect{background:#f8d7da;border:2px solid #dc3545}.result-icon{font-size:3rem;margin-bottom:.5rem}.result.correct .result-icon{color:#28a745}.result.incorrect .result-icon{color:#dc3545}.result-text{font-size:1.5rem;font-weight:600}.result.correct .result-text{color:#155724}.result.incorrect .result-text{color:#721c24}.explanation{margin-top:1rem;padding:1rem;background:#ffffff80;border-radius:10px;font-size:1.1rem;line-height:1.6;color:#721c24;font-weight:500;text-align:left}.button-container{text-align:center}.submit-button,.next-button{background:#3498db;color:#fff;border:none;border-radius:50px;padding:1.2rem 3rem;font-size:1.3rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 5px 20px #3498db4d}.submit-button:hover,.next-button:hover{transform:translateY(-3px);box-shadow:0 8px 25px #3498db66;background:#2980b9}.submit-button:active,.next-button:active{transform:translateY(-1px)}.submit-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.keyboard-hint{text-align:center;margin-top:1rem;color:#6c757d;font-size:1rem;opacity:.9}.keyboard-hint strong{background:#e9ecef;padding:.2rem .6rem;border-radius:5px;font-weight:700;color:#495057}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.problem-display{font-size:2rem;gap:1rem}.number{min-width:60px}.answer-input{width:100px;font-size:2rem}.practice-container h2{font-size:2rem}.stats{justify-content:center}.practice-layout{grid-template-columns:1fr}.reference-table{max-width:100%;position:static}}.timed-test{min-height:100vh;background:linear-gradient(135deg,#f8f9fa,#e9ecef);padding:2rem}.test-instructions{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh}.test-instructions h1{color:#2c3e50;font-size:3.5rem;margin-bottom:3rem;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.1)}.test-instructions .challenge-badge{font-size:2.5rem;display:inline-block;animation:flicker 2s ease-in-out infinite}@keyframes flicker{0%,to{opacity:1}50%{opacity:.7}}.instructions-card{background:#fff;border-radius:30px;padding:3rem;max-width:600px;box-shadow:0 4px 20px #00000014;border:1px solid #e8ecf1}.instructions-card h2{color:#333;font-size:2rem;margin-bottom:1.5rem;text-align:center}.instructions-card ul{text-align:left;margin-bottom:2rem;color:#6c757d;font-size:1.2rem;line-height:2}.instructions-card li{margin-bottom:1rem}.button-group{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.start-button{background:#3498db;color:#fff;border:none;border-radius:50px;padding:1.2rem 3rem;font-size:1.4rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 5px 20px #3498db4d}.start-button:hover{transform:translateY(-3px);box-shadow:0 8px 25px #3498db66;background:#2980b9}.test-header{display:flex;justify-content:space-between;align-items:center;background:#fff;padding:1.5rem 2rem;border-radius:20px;margin-bottom:2rem;box-shadow:0 2px 12px #00000014;flex-wrap:wrap;gap:1rem;position:sticky;top:1rem;z-index:100;border:1px solid #e8ecf1}.timer-display{display:flex;align-items:center;gap:1rem;font-size:1.3rem}.timer-label{font-weight:600;color:#495057}.timer{font-size:2rem;font-weight:700;color:#28a745;font-family:Courier New,monospace;padding:.5rem 1rem;background:#d4edda;border-radius:10px}.timer.warning{color:#dc3545;background:#f8d7da;animation:pulse 1s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.finish-button{background:#28a745;color:#fff;border:none;border-radius:50px;padding:1rem 2rem;font-size:1.2rem;font-weight:600;cursor:pointer;transition:all .3s ease}.finish-button:hover{background:#218838;transform:translateY(-2px);box-shadow:0 4px 15px #28a7454d}.problems-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;padding-bottom:2rem}.problem-item{background:#fff;padding:1.5rem;border-radius:15px;box-shadow:0 2px 8px #0000000f;transition:transform .2s ease;border:1px solid #e8ecf1}.problem-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.problem-number{font-size:.9rem;color:#adb5bd;font-weight:600;margin-bottom:.5rem}.problem-equation{display:flex;align-items:center;gap:.5rem;font-size:1.5rem;font-weight:700}.num{color:#3498db;min-width:35px;text-align:center}.op{color:#7f8c8d}.eq{color:#495057}.problem-input{width:70px;font-size:1.5rem;font-weight:700;text-align:center;border:2px solid #e8ecf1;border-radius:8px;padding:.3rem;transition:all .3s ease;background:#fafbfc}.problem-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db33}.problem-input::-webkit-inner-spin-button,.problem-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.results-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh}.results-screen h1{color:#2c3e50;font-size:3.5rem;margin-bottom:3rem;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.1)}.results-card{background:#fff;border-radius:30px;padding:3rem;max-width:600px;width:100%;box-shadow:0 4px 20px #00000014;border:1px solid #e8ecf1}.score-display{text-align:center;margin-bottom:2rem;padding:2rem;background:#e9ecef;border-radius:20px;color:#2c3e50;border:1px solid #dee2e6}.score-number{font-size:4rem;font-weight:700;margin-bottom:.5rem}.score-percentage{font-size:2.5rem;font-weight:600}.results-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2rem}.stat-item{text-align:center;padding:1.5rem;background:#f8f9fa;border-radius:15px}.stat-label{font-size:1rem;color:#666;margin-bottom:.5rem;font-weight:600}.stat-value{font-size:2rem;color:#2c3e50;font-weight:700}.focus-areas{background:#e3f2fd;border:2px solid #3498db;border-radius:15px;padding:1.5rem;margin-bottom:2rem;text-align:center}.focus-areas h3{color:#2c3e50;font-size:1.3rem;margin-bottom:1rem}.focus-tags{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}.focus-tag{background:#3498db;color:#fff;padding:.6rem 1.5rem;border-radius:50px;font-size:1.3rem;font-weight:700;box-shadow:0 2px 8px #3498db4d}.focus-hint{color:#6c757d;font-size:1rem;margin:0}.wrong-problems{background:#fff5f5;border:2px solid #ffcccc;border-radius:15px;padding:1.5rem;margin-bottom:2rem}.wrong-problems h3{color:#dc3545;font-size:1.3rem;margin-bottom:1.5rem;text-align:center}.wrong-problems-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;max-height:400px;overflow-y:auto;padding:.5rem}.wrong-problem-item{background:#fff;border:1px solid #e8ecf1;border-radius:10px;padding:1rem;text-align:center}.wrong-equation{font-size:1.2rem;font-weight:600;color:#495057;margin-bottom:.5rem}.user-wrong-answer{color:#dc3545;text-decoration:line-through;margin-left:.3rem;font-weight:700}.correct-answer{color:#6c757d;font-size:.95rem}.correct-answer strong{color:#28a745;font-size:1.1rem}.restart-button{background:#3498db;color:#fff;border:none;border-radius:50px;padding:1.2rem 3rem;font-size:1.3rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 5px 20px #3498db4d}.restart-button:hover{transform:translateY(-3px);box-shadow:0 8px 25px #3498db66;background:#2980b9}.timed-test .back-button{background:#e9ecef;color:#495057;border:1px solid #dee2e6;border-radius:50px;padding:.8rem 2rem;font-size:1.1rem;cursor:pointer;transition:all .3s ease}.timed-test .back-button:hover{background:#dee2e6;transform:translateY(-2px);box-shadow:0 2px 8px #0000001a}@media(max-width:768px){.problems-grid,.results-stats{grid-template-columns:1fr}.test-header{flex-direction:column;text-align:center}.timer-display{flex-direction:column;gap:.5rem}.results-screen h1,.test-instructions h1{font-size:2.5rem}.score-number{font-size:3rem}.score-percentage{font-size:2rem}}