:root{--color-bg:#fafafa;--color-surface:#fff;--color-surface-raised:#f5f5f5;--color-text-primary:#1a1a2e;--color-text-secondary:#6b7280;--color-text-muted:#9ca3af;--color-border:#e5e7eb;--color-border-light:#f3f4f6;--color-success:#059669;--color-success-bg:#ecfdf5;--color-error:#dc2626;--color-error-bg:#fef2f2;--color-focus:#3b82f6;--color-primary:#4f46e5;--color-primary-hover:#4338ca;--font-system:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--font-mono:"SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--radius-md:8px;--transition-fast:.15s ease-in-out}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-bg:#0f172a;--color-surface:#1e293b;--color-surface-raised:#334155;--color-text-primary:#f1f5f9;--color-text-secondary:#94a3b8;--color-text-muted:#64748b;--color-border:#334155;--color-border-light:#1e293b;--color-success:#10b981;--color-success-bg:#064e3b;--color-error:#ef4444;--color-error-bg:#7f1d1d;--color-focus:#60a5fa;--color-primary:#818cf8;--color-primary-hover:#6366f1}}:root[data-theme=dark]{--color-bg:#0f172a;--color-surface:#1e293b;--color-surface-raised:#334155;--color-text-primary:#f1f5f9;--color-text-secondary:#94a3b8;--color-text-muted:#64748b;--color-border:#334155;--color-border-light:#1e293b;--color-success:#10b981;--color-success-bg:#064e3b;--color-error:#ef4444;--color-error-bg:#7f1d1d;--color-focus:#60a5fa;--color-primary:#818cf8;--color-primary-hover:#6366f1}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--font-system);color:var(--color-text-primary);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.5;overflow-y:scroll}#app{flex-direction:column;height:100%;display:flex}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}a{color:inherit;text-decoration:none}ul,ol{list-style:none}table{border-collapse:collapse;width:100%}:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}:focus:not(:focus-visible){outline:none}h1,.h1{font-size:1.5rem;font-weight:700}h2,.h2{font-size:1.25rem;font-weight:600}.text-body{font-size:1rem}.text-small{font-size:.875rem}.text-muted{color:var(--color-text-muted)}.text-secondary{color:var(--color-text-secondary)}.container{max-width:800px;padding:0 var(--space-4);width:100%;margin:0 auto}.flex{display:flex}.flex-col{flex-direction:column;display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.nav{margin:var(--space-4) auto;background-color:var(--color-border-light);border-radius:9999px;justify-content:center;align-items:center;gap:4px;padding:4px;display:inline-flex}.nav-link{color:var(--color-text-secondary);transition:all var(--transition-fast);border-radius:9999px;padding:8px 16px;font-weight:500}.nav-link:hover{color:var(--color-text-primary)}.nav-link--active{color:var(--color-text-primary);background-color:var(--color-surface);box-shadow:0 1px 3px #0000001a}.card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-6)}.btn{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);padding:var(--space-3) var(--space-6);cursor:pointer;transition:all var(--transition-fast);border:1px solid #0000;border-radius:9999px;justify-content:center;align-items:center;font-weight:600;display:inline-flex}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover{background-color:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 4px 6px -1px #4f46e533}.btn-secondary{border:1px solid var(--color-border);color:var(--color-text-primary);background-color:#0000}.btn-secondary:hover:not(:disabled){background-color:var(--color-surface-raised)}.input{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);width:100%;color:var(--color-text-primary);min-height:44px;transition:border-color var(--transition-fast)}.input:focus{border-color:var(--color-focus)}.input.error{border-color:var(--color-error)}.table,.stats-table{text-align:left;width:100%}.table th,.table td,.stats-table th,.stats-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border-light)}.table th,.stats-table th{color:var(--color-text-muted);font-size:.875rem;font-weight:700}.table tr:nth-child(2n),.stats-table tr:nth-child(2n){background-color:var(--color-surface-raised)}.modal-overlay{z-index:100;background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.modal-overlay[data-theme=dark]{background-color:#ffffff1a}.modal-content{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;max-width:400px;padding:var(--space-6);z-index:101}.practice-screen{flex-direction:column;width:100%;height:100%;margin:0 auto;display:flex}.practice-content{padding:var(--space-6);flex-direction:column;flex:1;justify-content:center;align-items:center;width:100%;max-width:600px;margin:0 auto;display:flex}.practice-question{margin-bottom:var(--space-4);text-align:center;color:var(--color-text-primary);font-size:3rem;font-weight:700}.practice-answer{margin-bottom:var(--space-4);justify-content:center;align-items:center;width:100%;max-width:200px;display:flex}.practice-answer-input{text-align:center;width:100%;padding:var(--space-2) var(--space-4);border:2px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface);color:var(--color-text-primary);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);font-size:2.5rem;font-weight:600}.practice-answer-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 4px #4f46e533}.practice-answer-display{min-height:4rem;color:var(--color-text-primary);border-bottom:2px solid var(--color-border);width:100%;padding-bottom:var(--space-2);justify-content:center;align-items:center;font-size:2.5rem;font-weight:600;display:flex}.practice-feedback{min-height:2rem;margin-bottom:var(--space-6);text-align:center;opacity:0;transition:opacity var(--transition-fast);font-size:1.25rem;font-weight:600}.practice-feedback.correct,.practice-feedback.incorrect{opacity:1}.practice-feedback.correct{color:var(--color-success)}.practice-feedback.incorrect{color:var(--color-error)}.practice-progress{color:var(--color-text-muted);padding-bottom:var(--space-4);margin-top:auto;font-size:.875rem}.practice-answer.correct .practice-answer-input,.practice-answer.correct .practice-answer-display{border-color:var(--color-success);color:var(--color-success)}.practice-answer.incorrect .practice-answer-input,.practice-answer.incorrect .practice-answer-display{border-color:var(--color-error);color:var(--color-error)}.practice-complete{text-align:center;align-items:center;gap:var(--space-4);flex-direction:column;display:flex}.practice-complete h2{margin-bottom:var(--space-2);font-size:2rem}.numpad{padding:var(--space-4);background-color:var(--color-surface-raised);padding-bottom:env(safe-area-inset-bottom,var(--space-4));border-top:1px solid var(--color-border);gap:var(--space-2);grid-template-columns:repeat(3,1fr);display:grid}.numpad-btn{background-color:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-primary);cursor:pointer;height:64px;transition:background-color var(--transition-fast), transform var(--transition-fast);border-radius:8px;justify-content:center;align-items:center;font-size:1.5rem;font-weight:500;display:flex}.numpad-btn:active{background-color:var(--color-surface-raised);transform:scale(.96)}.numpad-btn--action{background-color:var(--color-surface-raised);font-size:1rem;font-weight:600}.numpad-btn--enter{color:var(--color-primary)}.stats-page,.settings-page,.learn-page{flex-direction:column;width:100%;height:100%;display:flex}.stats-content,.settings-content{width:100%;max-width:800px;padding:var(--space-6) var(--space-4);flex:1;margin:0 auto}.learn-content{width:100%;max-width:1200px;padding:var(--space-6) var(--space-4);flex:1;margin:0 auto}.learn-title{text-align:center;margin-bottom:var(--space-6);font-size:2rem}.tables-grid{gap:var(--space-4);margin-bottom:var(--space-8);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.table-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);text-align:center;box-shadow:0 1px 3px #0000000d}.table-card h2{color:var(--color-primary);margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border-light);font-size:1.25rem}.table-list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.table-row{color:var(--color-text-secondary);font-variant-numeric:tabular-nums;border-radius:4px;justify-content:center;align-items:center;padding:4px 0;font-size:1rem;display:flex}.table-row:nth-child(2n){background-color:var(--color-surface-raised)}.math-col{text-align:right;width:24px}.operator{text-align:center;width:20px;color:var(--color-text-muted)}.result-col{text-align:right;width:32px;color:var(--color-text-primary);font-weight:600}.stats-header{margin:var(--space-6) 0;justify-content:space-between;align-items:center;display:flex}.stats-grid{gap:var(--space-4);margin-bottom:var(--space-6);grid-template-columns:repeat(2,1fr);display:grid}.stat-card{text-align:center;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);box-shadow:0 1px 3px #0000000d}.stat-value{color:var(--color-primary);margin-bottom:var(--space-1);font-size:2rem;font-weight:700}.stat-label{color:var(--color-text-secondary);font-size:.875rem;font-weight:500}.settings-section,.stats-section{margin-bottom:var(--space-6);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-6);box-shadow:0 1px 3px #0000000d}.settings-section-title,.stats-section-title{margin-bottom:var(--space-4);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border-light);font-size:1.25rem;font-weight:600}.form-group{margin-bottom:var(--space-4)}.form-label{color:var(--color-text-secondary);margin-bottom:var(--space-2);font-size:.875rem;font-weight:500;display:block}.settings-radio-group{background-color:var(--color-surface-raised);border-radius:9999px;flex-flow:wrap;gap:4px;padding:4px;display:inline-flex}.settings-radio{cursor:pointer;display:flex;position:relative}.settings-radio input[type=radio]{-webkit-appearance:none;appearance:none;opacity:0;position:absolute}.settings-radio-label{color:var(--color-text-secondary);transition:all var(--transition-fast);border-radius:9999px;padding:8px 16px;font-weight:500}.settings-radio input[type=radio]:checked+.settings-radio-label{background-color:var(--color-surface);color:var(--color-text-primary);box-shadow:0 1px 3px #0000001a}.practice-progress{gap:var(--space-2);padding-bottom:var(--space-4);color:var(--color-text-secondary);justify-content:center;align-items:center;margin-top:auto;font-size:.875rem;display:flex}.settings-group{align-items:center;gap:var(--space-4);display:flex}.settings-input{width:100px;padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface);color:var(--color-text-primary)}.settings-btn{padding:var(--space-2) var(--space-4);background-color:var(--color-primary);color:#fff;cursor:pointer;margin-right:var(--space-2);margin-bottom:var(--space-2);transition:all var(--transition-fast);border:none;border-radius:9999px;font-weight:500;display:inline-block}.settings-btn:hover{background-color:var(--color-primary-hover)}.settings-btn--danger{background-color:var(--color-error)}.settings-btn--danger:hover{background-color:#b91c1c}.settings-message{margin-top:var(--space-2);color:var(--color-success);font-size:.875rem}.settings-message--error{color:var(--color-error)}@media (min-width:480px){.numpad-grid{gap:var(--space-3)}}@media (min-width:768px){.question-text{font-size:3rem}.answer-display{font-size:2.5rem}.numpad-container{width:100%;max-width:400px;margin:0 auto}.stats-grid{grid-template-columns:repeat(4,1fr)}}