:root{--bg:#fcf9f8;--bg-card:#fff;--bg-muted:#f0eded;--bg-container-low:#f6f3f2;--bg-container-high:#eae7e7;--bg-variant:#e5e2e1;--sage:#a8c5a0;--sage-dark:#4b6546;--sage-light:#cdebc4;--sky:#cae6fb;--sky-dark:#476273;--gold:#e4b660;--gold-dark:#7b5804;--gold-light:#ffdea6;--blush:#e8c5b0;--rose:#e8b0b0;--text:#1c1b1b;--text-muted:#434840;--text-on-sage:#092008;--text-on-sky:#001e2d;--text-on-gold:#271900;--text-inverse:#f3f0ef;--border:#1c1b1b;--border-muted:#737970;--shadow:3px 3px 0px #1c1b1b;--shadow-lg:5px 5px 0px #1c1b1b;--shadow-xl:8px 8px 0px #1c1b1b;--radius-sm:4px;--radius:8px;--radius-md:12px;--radius-lg:16px;--radius-full:9999px;--gap:16px;--card-padding:24px;--page-margin:40px;--base:8px;--font-display:"Playfair Display", Georgia, serif;--font-body:"DM Sans", system-ui, sans-serif;--font-arabic:"UthmanicHafs", "me_quran", "Amiri Quran", "Noto Naskh Arabic", serif;--transition-fast:.12s ease;--transition:.2s ease}@media (width<=768px){:root{--page-margin:16px}}@font-face{font-family:UthmanicHafs;src:url(https://verses.quran.foundation/fonts/quran/hafs/uthmanic_hafs/UthmanicHafs1Ver18.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6}h1,h2,h3,h4{font-family:var(--font-display);color:var(--text);font-weight:700;line-height:1.2}h1{letter-spacing:-.02em;font-size:48px}h2{font-size:32px;font-weight:600;line-height:1.3}h3{font-size:24px;font-weight:600;line-height:1.3}h4{font-size:20px;font-weight:600}@media (width<=768px){h1{font-size:32px}h2{font-size:28px}h3{font-size:20px}}a{color:var(--sage-dark);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--text)}img{max-width:100%;display:block}.container{max-width:1200px;padding:0 var(--page-margin);margin:0 auto}.container-narrow{max-width:680px;padding:0 var(--page-margin);margin:0 auto}.text-muted{color:var(--text-muted)}.text-sage{color:var(--sage-dark)}.text-gold{color:var(--gold-dark)}.text-center{text-align:center}.text-right{text-align:right}.font-display{font-family:var(--font-display)}.font-body{font-family:var(--font-body)}.label{font-family:var(--font-body);letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);font-size:12px;font-weight:700}.bento-grid{gap:var(--gap);grid-template-columns:repeat(12,1fr);display:grid}.bento-3{grid-column:span 3}.bento-4{grid-column:span 4}.bento-6{grid-column:span 6}.bento-8{grid-column:span 8}.bento-12{grid-column:span 12}@media (width<=1024px){.bento-3,.bento-4{grid-column:span 6}.bento-8{grid-column:span 12}}@media (width<=768px){.bento-grid{grid-template-columns:1fr}.bento-3,.bento-4,.bento-6,.bento-8,.bento-12{grid-column:span 1}}.card{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow);padding:var(--card-padding);transition:transform var(--transition-fast), box-shadow var(--transition-fast)}.card:hover{box-shadow:var(--shadow-lg);transform:translate(-2px,-2px)}.card-flat{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-md);padding:var(--card-padding)}.card-sage{border-top:4px solid var(--sage)}.card-sky{border-top:4px solid var(--sky)}.card-gold{border-top:4px solid var(--gold)}.btn{border:2px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow);font-family:var(--font-body);cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:700;line-height:1;text-decoration:none;transition:transform .1s,box-shadow .1s;display:inline-flex}.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px #1c1b1b}.btn:active{box-shadow:none;transform:translate(3px,3px)}.btn-primary{background:var(--sage);color:var(--text-on-sage)}.btn-secondary{background:var(--sky);color:var(--text-on-sky)}.btn-gold{background:var(--gold);color:var(--text-on-gold)}.btn-outline{color:var(--text);background:0 0}.btn-danger{background:var(--rose);color:#4a0e0e}.btn-sm{padding:8px 16px;font-size:12px}.btn-lg{padding:16px 32px;font-size:16px}.btn-icon{border-radius:var(--radius);padding:10px}.btn-pill{border-radius:var(--radius-full)}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:var(--shadow);transform:none}.input{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);width:100%;font-family:var(--font-body);color:var(--text);box-shadow:var(--shadow);transition:background var(--transition-fast);padding:10px 14px;font-size:16px}.input:focus{background:var(--bg-container-low);outline:none}.input-label{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);margin-bottom:6px;font-size:14px;font-weight:700;display:block}.chip{border-radius:var(--radius-full);font-family:var(--font-body);border:1px solid;align-items:center;gap:4px;padding:4px 12px;font-size:12px;font-weight:700;display:inline-flex}.chip-memorised{background:var(--sage-light);color:#344d30}.chip-review{background:var(--sky);color:#2f4a5a}.chip-streak{background:var(--gold-light);color:#5d4200}.chip-new{background:var(--bg-variant);color:var(--text-muted)}.chip-danger{color:#93000a;background:#ffdad6}.arabic{font-family:var(--font-arabic);text-align:center;color:var(--text);direction:rtl;padding:16px 0;font-size:36px;font-weight:400;line-height:1.8}.arabic-lg{font-size:44px;line-height:2}.arabic-sm{font-size:24px;line-height:1.6}.ayah-box{border-radius:var(--radius-sm);cursor:pointer;border:1px solid #0000;width:14px;height:14px;transition:transform .1s}.ayah-box:hover{border-color:var(--border);z-index:2;position:relative;transform:scale(1.4)}.ayah-box.new{background:#dcd9d9}.ayah-box.learning{background:#aecade}.ayah-box.memorised{background:#a8c5a0}.ayah-box.strong{background:#4b6546}.heat-0{background:var(--bg-variant)}.heat-1{background:#cdebc4}.heat-2{background:#b1cfa9}.heat-3{background:#a8c5a0}.heat-4{background:#4b6546}.modal-overlay{z-index:1000;padding:var(--page-margin);background:#1c1b1b80;justify-content:center;align-items:center;animation:.15s fadeIn;display:flex;position:fixed;inset:0}.modal{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);width:100%;max-width:520px;max-height:90vh;animation:.2s slideUp;overflow-y:auto}@media (width<=768px){.modal-overlay{align-items:flex-end;padding:0}.modal{border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-width:100%;max-height:85vh}}.modal-header{border-bottom:2px solid var(--bg-variant);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.modal-body{padding:24px}.modal-footer{border-top:2px solid var(--bg-variant);padding:16px 24px}.progress-ring{justify-content:center;align-items:center;display:inline-flex;position:relative}.progress-ring svg{transform:rotate(-90deg)}.progress-ring-label{font-family:var(--font-body);color:var(--text);font-size:12px;font-weight:700;position:absolute}.skeleton{background:linear-gradient(90deg, var(--bg-variant) 25%, var(--bg-muted) 50%, var(--bg-variant) 75%);border-radius:var(--radius);background-size:200% 100%;animation:1.5s ease-in-out infinite shimmer}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.animate-bounce{animation:.4s bounce}.animate-pulse{animation:2s ease-in-out infinite pulse}.navbar{padding:16px var(--page-margin);border-bottom:2px solid var(--border);background:var(--bg);z-index:100;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.navbar-brand{font-family:var(--font-display);color:var(--text);align-items:center;gap:8px;font-size:24px;font-weight:700;text-decoration:none;display:flex}.navbar-links{align-items:center;gap:24px;list-style:none;display:flex}.navbar-links a{font-family:var(--font-body);color:var(--text-muted);transition:color var(--transition-fast);align-items:center;gap:6px;font-size:14px;font-weight:600;display:flex}.navbar-links a svg{opacity:.7;transition:opacity var(--transition-fast)}.navbar-links a:hover,.navbar-links a.active{color:var(--text)}.navbar-links a:hover svg,.navbar-links a.active svg{opacity:1}@media (width<=768px){.navbar-links{gap:16px}.navbar-links a span.nav-label{display:none}}.page{padding:40px 0}.page-header{margin-bottom:32px}.page-header h1{margin-bottom:8px}.page-header p{color:var(--text-muted);font-size:18px}.stat-value{font-family:var(--font-display);margin-bottom:4px;font-size:36px;font-weight:700;line-height:1}.stat-label{color:var(--text-muted);font-size:14px;font-weight:500}.audio-controls{align-items:center;gap:12px;padding:12px 0;display:flex}.audio-progress{background:var(--bg-variant);border-radius:var(--radius-full);flex:1;height:4px;overflow:hidden}.audio-progress-fill{background:var(--sage);border-radius:var(--radius-full);height:100%;transition:width .1s linear}.rating-row{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.rating-btn{border:2px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow);cursor:pointer;font-family:var(--font-body);background:var(--bg-card);flex-direction:column;align-items:center;gap:4px;padding:16px 8px;font-size:12px;font-weight:700;transition:transform .1s,box-shadow .1s;display:flex}.rating-btn:active{box-shadow:none;transform:translate(3px,3px)}.rating-btn .btn-icon-svg{justify-content:center;align-items:center;width:28px;height:28px;display:flex}.rating-btn .btn-icon-svg svg{width:100%;height:100%}.rating-btn.again{color:#c87070;border-color:#c87070}.rating-btn.again:hover{background:#fde8e8}.rating-btn.hard{border-color:var(--sky-dark);color:var(--sky-dark)}.rating-btn.hard:hover{background:#e8f2fb}.rating-btn.good{border-color:var(--sage-dark);color:var(--sage-dark)}.rating-btn.good:hover{background:#ecf5ea}.rating-btn.easy{border-color:var(--gold-dark);color:var(--gold-dark)}.rating-btn.easy:hover{background:#fef5e1}@media (width<=480px){.rating-row{grid-template-columns:repeat(2,1fr)}}.tooltip{background:var(--text);color:var(--text-inverse);border-radius:var(--radius);white-space:nowrap;pointer-events:none;z-index:50;padding:6px 12px;font-size:12px;font-weight:500;animation:.1s fadeIn;position:absolute}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--bg-variant);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--border-muted)}body:before{content:"";z-index:-1;opacity:.03;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%231c1b1b' stroke-width='1'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z'/%3E%3Cpath d='M30 10L50 30L30 50L10 30Z'/%3E%3Ccircle cx='30' cy='30' r='8'/%3E%3C/g%3E%3C/svg%3E");background-size:60px 60px;position:fixed;inset:0}.confetti-container{pointer-events:none;z-index:9999;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.confetti-piece{width:10px;height:10px;animation:2.5s ease-out forwards confettiFall;position:absolute;top:-20px}@keyframes confettiFall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}.toast{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:200;align-items:center;gap:10px;padding:14px 24px;font-size:14px;font-weight:700;animation:.3s toastSlide;display:flex;position:fixed;top:80px;left:50%;transform:translate(-50%)}.toast-success{border-left:4px solid var(--sage)}.toast-error{border-left:4px solid var(--rose)}.toast-info{border-left:4px solid var(--sky)}@keyframes toastSlide{0%{opacity:0;transform:translate(-50%)translateY(-20px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.error-page{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:60vh;padding:40px;display:flex}.error-page .error-icon{margin-bottom:24px;font-size:64px}.error-page h2{color:#ba1a1a;margin-bottom:12px}.error-page p{color:var(--text-muted);max-width:400px;margin-bottom:24px}.streak-badge{background:var(--gold-light);border:2px solid var(--gold-dark);border-radius:var(--radius-full);color:var(--gold-dark);align-items:center;gap:6px;padding:6px 14px;font-size:14px;font-weight:700;animation:.4s streakPop;display:inline-flex}@keyframes streakPop{0%{opacity:0;transform:scale(.8)}60%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:60px 20px;display:flex}.empty-state .empty-icon{opacity:.6;margin-bottom:16px;font-size:48px}@media (width<=768px){.navbar{border-bottom:none;border-top:2px solid var(--border);padding:8px var(--page-margin);z-index:100;background:var(--bg);position:fixed;inset:auto 0 0}.navbar-brand{display:none}.navbar-links{justify-content:space-around;gap:0;width:100%}.navbar-links a{flex-direction:column;align-items:center;gap:2px;font-size:20px;display:flex}.page{padding:24px 0 100px}.landing .navbar{border-top:none;border-bottom:2px solid var(--border);position:static}.landing .navbar .navbar-brand{display:block}.card:hover{box-shadow:var(--shadow);transform:none}.audio-controls{flex-wrap:wrap;gap:8px}}.page{animation:.25s pageIn}@keyframes pageIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}:focus-visible{outline:3px solid var(--sage);outline-offset:2px;border-radius:var(--radius-sm)}.tajweed-enabled .madda_normal{color:#537ce6}.tajweed-enabled .madda_permissible{color:#4050ff}.tajweed-enabled .madda_necessity{color:#8a0b0b}.tajweed-enabled .madda_obligatory{color:#2144c1}.tajweed-enabled .qalaqah{color:#dd0008}.tajweed-enabled .ikhafa_shafawi{color:#d500b7}.tajweed-enabled .ikhafa{color:#9400a8}.tajweed-enabled .idgham_shafawi{color:#58b800}.tajweed-enabled .idgham_ghunnah{color:#169200}.tajweed-enabled .idgham_wo_ghunnah,.tajweed-enabled .idgham_mutajanisayn,.tajweed-enabled .idgham_mutaqaribayn{color:#a1a1a1}.tajweed-enabled .ghunnah{color:#ff7e1e}.tajweed-enabled .iqlab{color:#26bffd}.tajweed-enabled .slnt{color:#a1a1a1}@media print{.navbar,.modal-overlay,.toast,.confetti-container{display:none!important}body:before{display:none}.card{box-shadow:none;border:1px solid #ccc}}.loading-screen.svelte-12qhfyh{min-height:100vh;color:var(--text-muted);font-family:var(--font-body);flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex}.loading-logo.svelte-12qhfyh{font-size:48px;animation:2s ease-in-out infinite svelte-12qhfyh-pulse}@keyframes svelte-12qhfyh-pulse{0%,to{opacity:1}50%{opacity:.4}}