*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #F7F4EE;--surface: #FFFFFF;--surface-alt: #EDE8DF;--border: #D4CFC4;--border-hover: #2D6A4F;--primary: #2D6A4F;--primary-light: #7AB592;--primary-dark: #1B4332;--accent: #8B6914;--accent-dim: #A08540;--text: #1A1A1A;--text-secondary: #5C5647;--error: #B33B3B;--warning: #9A7B2E;--success: #2D6A4F;--card-bg: #FFFFFF;--tint-learning: #FDF3D7;--tint-known: #D4EDDA;--radius: 12px;--radius-sm: 8px;--shadow: 0 1px 3px rgba(0,0,0,.08)}html.dark{--bg: #141A24;--surface: #1E2636;--surface-alt: #2A3142;--border: #333A4A;--border-hover: #4A9B6A;--primary: #4A9B6A;--primary-light: #6ABF8A;--primary-dark: #3D6B52;--accent: #D4A843;--accent-dim: #8A7A3A;--text: #E8E4DC;--text-secondary: #9C978C;--error: #CF6B6B;--warning: #C49A30;--success: #4A9B6A;--card-bg: #1E2636;--tint-learning: #3A2E10;--tint-known: #1A3A2A;--shadow: 0 1px 3px rgba(0,0,0,.3)}@media(prefers-color-scheme:dark){html:not(.light){--bg: #141A24;--surface: #1E2636;--surface-alt: #2A3142;--border: #333A4A;--border-hover: #4A9B6A;--primary: #4A9B6A;--primary-light: #6ABF8A;--primary-dark: #3D6B52;--accent: #D4A843;--accent-dim: #8A7A3A;--text: #E8E4DC;--text-secondary: #9C978C;--error: #CF6B6B;--warning: #C49A30;--success: #4A9B6A;--card-bg: #1E2636;--tint-learning: #3A2E10;--tint-known: #1A3A2A;--shadow: 0 1px 3px rgba(0,0,0,.3)}}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:1rem;line-height:1.5;color:var(--text);background:var(--bg);min-height:100vh;-webkit-font-smoothing:antialiased;transition:background .4s ease,color .4s ease}.theme-transition,.theme-transition *,.theme-transition *:before,.theme-transition *:after{transition:background .4s ease,background-color .4s ease,color .4s ease,border-color .4s ease,fill .4s ease,stroke .4s ease!important}.theme-transition .card{transition:transform .5s,background .4s ease,color .4s ease,border-color .4s ease!important}.arabic{font-family:Amiri,Traditional Arabic,Scheherazade New,serif;direction:rtl;line-height:1.6}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.card{transition:transform .3s!important}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-100%;left:1rem;padding:.5rem 1rem;background:var(--primary);color:#fff;border-radius:var(--radius-sm);z-index:200;font-size:.875rem;text-decoration:none}.skip-link:focus{top:1rem}.app-nav{position:fixed;top:1rem;right:1rem;display:flex;gap:.5rem;z-index:10}.nav-btn{padding:.5rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:border-color .2s,color .2s}.nav-btn:hover{border-color:var(--border-hover);color:var(--text)}.nav-btn svg{width:20px;height:20px}.app-header{text-align:center;padding:2rem 1.5rem 0}.app-header h1{font-size:1.5rem;color:var(--accent);margin-bottom:.25rem}.app-header p{color:var(--text-secondary);font-size:.875rem}.app-title{display:block;margin:0 auto .5rem}.app-title-dark,html.dark .app-title-light{display:none}html.dark .app-title-dark{display:block;margin:0 auto .5rem}@media(prefers-color-scheme:dark){html:not(.light) .app-title-light{display:none}html:not(.light) .app-title-dark{display:block;margin:0 auto .5rem}}.view{display:none;flex-direction:column;align-items:center;padding:2rem 1.5rem}.view.active{display:flex}.mastery{width:100%;max-width:560px;margin:0 auto 1.5rem;text-align:center;padding:0 1.25rem}.mastery-label{font-size:.875rem;color:var(--text-secondary);margin-bottom:.5rem}.mastery-label b{color:var(--accent);font-size:1.5rem}.mastery-bar{width:100%;height:12px;background:var(--surface-alt);border-radius:6px;overflow:hidden}.mastery-fill{height:100%;background:linear-gradient(90deg,var(--primary-dark),var(--primary-light));border-radius:6px;transition:width .5s}.view-tabs{display:flex;gap:.5rem;margin-bottom:1.25rem;justify-content:center}.tab-btn{padding:.5rem 1.25rem;min-height:44px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);cursor:pointer;font-size:.875rem;display:flex;align-items:center;gap:.5rem;transition:border-color .2s,color .2s}.tab-btn:hover{border-color:var(--border-hover);color:var(--text)}.tab-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.tab-btn svg{width:16px;height:16px}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.875rem;width:100%;max-width:960px}.grid-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;cursor:pointer;transition:border-color .2s,transform .2s;display:flex;align-items:center;gap:.875rem;min-height:44px}.grid-card:hover{border-color:var(--border-hover);transform:translateY(-1px)}.grid-card-info{flex:1;min-width:0}.grid-card-name{font-size:.875rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid-card-name-ar{font-family:Amiri,Traditional Arabic,serif;font-size:1.125rem;color:var(--accent-dim);direction:rtl;text-align:left;unicode-bidi:plaintext;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.125rem}.grid-card-meta{font-size:.875rem;color:var(--text-secondary);margin-top:.25rem}.back-btn{align-self:flex-start;padding:.625rem 1.125rem;min-height:44px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;margin-bottom:1.25rem;font-size:.875rem;display:flex;align-items:center;gap:.5rem;transition:border-color .2s}.back-btn:hover{border-color:var(--border-hover)}.back-btn svg{width:16px;height:16px}.surah-title{text-align:center;margin-bottom:.75rem}.surah-title h2{font-size:1.25rem;color:var(--accent)}.surah-title p{font-size:.875rem;color:var(--text-secondary);margin-top:.25rem}.surah-title p.arabic-subtitle{font-size:1.5rem;font-family:Amiri,Traditional Arabic,serif;direction:rtl}.controls{display:flex;gap:.625rem;flex-wrap:wrap;justify-content:center;margin-bottom:1rem}.controls select,.controls button{padding:.5rem 1rem;min-height:44px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.875rem;cursor:pointer;display:flex;align-items:center;gap:.375rem;transition:border-color .2s}.controls select{padding-right:2rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C5647' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center}.controls select:hover,.controls button:hover{border-color:var(--border-hover)}.controls svg{width:16px;height:16px}.stats{display:flex;gap:1rem;margin-bottom:.875rem;font-size:.875rem;color:var(--text-secondary);flex-wrap:wrap;justify-content:center}.stats span{display:flex;align-items:center;gap:.375rem}.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}.dot-new{background:var(--text-secondary)}.dot-learning{background:var(--warning)}.dot-known{background:var(--success)}.counter{color:var(--text-secondary);font-size:.875rem;margin-bottom:1rem}.card-container{perspective:1000px;-webkit-perspective:1000px;width:min(440px,88vw);height:270px;margin-bottom:1.375rem;cursor:pointer;touch-action:pan-y}.card-side-btn{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;opacity:.4;transition:opacity .2s,color .2s;z-index:1}.card-side-btn:hover{opacity:.8;color:var(--text)}.card-side-btn svg{width:20px;height:20px}.card-side-left{left:.25rem}.card-side-right{right:.25rem}.card-container.empty{cursor:default}.card{width:100%;height:100%;position:relative;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .5s}.card.flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.75rem 1.5rem;border:1px solid var(--border);background:var(--card-bg)}.card-face.st-learning{background:var(--tint-learning)}.card-face.st-known{background:var(--tint-known)}.card-back{transform:rotateY(180deg);-webkit-transform:rotateY(180deg)}.card-arabic{font-family:Amiri,Traditional Arabic,Scheherazade New,serif;font-size:3rem;direction:rtl;color:var(--text);margin-bottom:.5rem;line-height:1.4}.card-type{font-size:.875rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.5rem}.card-root{font-size:.875rem;color:var(--primary-light);margin-top:.5rem;direction:rtl;font-family:Amiri,Traditional Arabic,serif}.card-english{font-size:1.25rem;color:var(--text);margin-bottom:.5rem;text-align:center}.card-detail{font-size:.875rem;color:var(--text-secondary);text-align:center;max-width:340px;line-height:1.4}.card-freq{font-size:.875rem;color:var(--text-secondary);margin-top:.5rem}.card-flip-btn{position:absolute;top:.5rem;right:.5rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;opacity:.4;transition:opacity .2s,color .2s;z-index:1}.card-flip-btn:hover{opacity:.8;color:var(--text)}.card-flip-btn svg{width:18px;height:18px}.card-corner-btn{position:absolute;top:.5rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;opacity:.4;transition:opacity .2s,color .2s;z-index:1}.card-corner-left{left:.5rem}.card-corner-btn:hover{opacity:.8;color:var(--text)}.card-corner-btn svg{width:18px;height:18px}.card-side-btn,.card-flip-btn,.card-corner-btn{pointer-events:auto}.actions{display:flex;gap:.75rem;margin-bottom:1.125rem}.actions button{padding:.75rem 1.5rem;min-height:44px;border-radius:var(--radius);border:none;font-size:.875rem;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:.375rem;transition:opacity .2s}.actions button:hover{opacity:.85}.btn-wrong{background:var(--error);color:#fff}.btn-learning{background:var(--warning);color:#fff}.btn-correct{background:var(--success);color:#fff}.actions svg{width:16px;height:16px}.hint{color:var(--text-secondary);font-size:.875rem;opacity:.6}.hint-mobile{display:none}@media(max-width:820px){.hint-desktop{display:none}.hint-mobile{display:block}}.empty-msg{font-size:.875rem;color:var(--text-secondary);text-align:center;line-height:1.8}.empty-card{width:min(440px,88vw);height:270px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.75rem 1.5rem;margin-bottom:1.375rem;text-align:center}.empty-card p{font-size:1.125rem;color:var(--text);margin-bottom:.5rem}.empty-card .empty-card-sub{font-size:.875rem;color:var(--text-secondary);line-height:1.5}.settings-section{width:100%;max-width:480px;margin-bottom:1.5rem}.settings-section h3{font-size:1rem;color:var(--accent);margin-bottom:.75rem}.settings-btn{display:flex;align-items:center;gap:.5rem;width:100%;padding:.875rem 1rem;min-height:44px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);cursor:pointer;font-size:.875rem;margin-bottom:.5rem;transition:border-color .2s}.settings-btn:hover{border-color:var(--border-hover)}a.settings-btn{text-decoration:none}.settings-btn.danger{color:var(--error)}.settings-btn svg{width:18px;height:18px;flex-shrink:0}@media(max-width:820px){.card-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:500px){.card-grid{grid-template-columns:1fr}.card-arabic{font-size:2.2rem}.card-container{height:240px}.view{padding:1.25rem 1rem}.app-title{width:220px!important;height:220px!important}.card-side-btn{width:32px;height:32px}}.app-footer{text-align:center;padding:2rem 1rem;font-size:.875rem;color:var(--text-secondary)}.app-footer a{color:var(--primary);text-decoration:none}.app-footer a:hover{text-decoration:underline}.filter-group{display:flex;align-items:center;position:relative}.filter-group select{padding-left:2rem}.filter-info{position:absolute;left:.5rem;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;z-index:1;opacity:.5}.filter-info:hover{color:var(--primary);opacity:1}.filter-info svg{width:16px;height:16px}.filter-info.hidden{display:none}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem 1.5rem;max-width:360px;width:90%;text-align:center}.modal h3{color:var(--accent);margin-bottom:.75rem;font-size:1.125rem}.modal p{color:var(--text-secondary);font-size:.875rem;margin-bottom:1.25rem;line-height:1.5}.modal-actions{display:flex;gap:.625rem;justify-content:center}.modal-actions button{padding:.5rem 1.25rem;min-height:44px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-size:.875rem;transition:border-color .2s}.modal-actions button:hover{border-color:var(--border-hover)}.modal-actions .btn-danger{background:var(--error);color:#fff;border-color:var(--error)}.modal-actions .btn-danger:hover{opacity:.85}.file-input-hidden{display:none}.onboarding{max-width:400px}.onboarding-steps{text-align:left;margin-bottom:1.25rem}.onboarding-step{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem}.onboarding-step p{font-size:.875rem;color:var(--text);line-height:1.5}.onboarding-icon{flex-shrink:0;color:var(--primary);width:24px;height:24px}.onboarding-icon svg{width:24px;height:24px}.onboarding-dismiss{padding:.75rem 2rem;min-height:44px;border:none;border-radius:var(--radius-sm);background:var(--primary);color:#fff;font-size:.875rem;font-weight:600;cursor:pointer}.onboarding-dismiss:hover{opacity:.9}.toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);padding:.75rem 1.5rem;border-radius:var(--radius-sm);background:var(--primary);color:#fff;font-size:.875rem;z-index:200;animation:toast-in .3s ease,toast-out .3s ease 2.5s forwards}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(1rem)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toast-out{0%{opacity:1}to{opacity:0}}