:root{--bg:#F7F4EE;--bg-elevated:#FFFFFF;--ink:#1B2430;--ink-soft:#66707D;--primary:#1E4D7B;--primary-dark:#12304F;--primary-tint:#E3ECF6;--gold:#B9862E;--gold-soft:#F1E1B8;--line:#DFE3E8;--danger:#B2452F;--danger-tint:#F6E1DB;--on-accent:#FFFFFF;--glow:rgba(30,77,123,.10);--glow-2:rgba(185,134,46,.08);--radius:18px;--font-ui:"Quicksand",system-ui,-apple-system,"Segoe UI",sans-serif;--font-body:system-ui,-apple-system,"Segoe UI",sans-serif;--font-ar:"Noto Naskh Arabic","Traditional Arabic","Scheherazade New",serif;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#1F2B4D;--bg-elevated:#2B3A64;--ink:#F5F1E8;--ink-soft:#B9C3DD;--primary:#8CC0F5;--primary-dark:#C3DEFA;--primary-tint:#35497A;--gold:#F3C866;--gold-soft:#5A4620;--line:#40527F;--danger:#F09A80;--danger-tint:#5A3328;--on-accent:#14213D;--glow:rgba(140,192,245,.22);--glow-2:rgba(243,200,102,.14);color-scheme:dark}}:root[data-theme=dark]{--bg:#1F2B4D;--bg-elevated:#2B3A64;--ink:#F5F1E8;--ink-soft:#B9C3DD;--primary:#8CC0F5;--primary-dark:#C3DEFA;--primary-tint:#35497A;--gold:#F3C866;--gold-soft:#5A4620;--line:#40527F;--danger:#F09A80;--danger-tint:#5A3328;--on-accent:#14213D;--glow:rgba(140,192,245,.22);--glow-2:rgba(243,200,102,.14);color-scheme:dark}*{box-sizing:border-box}body,html{margin:0;padding:0}body{background:radial-gradient(120% 55% at 50% -10%,var(--glow),transparent 70%),radial-gradient(70% 40% at 100% 100%,var(--glow-2),transparent 70%),var(--bg);background-attachment:fixed;color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}#app,body{min-height:100vh}#app{max-width:640px;margin:0 auto;padding:20px 16px 48px}.screen-center{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 68px);min-height:calc(100dvh - 68px)}.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}h1,h2,h3{font-family:var(--font-ui);font-weight:700;margin:0 0 4px;letter-spacing:.2px}h1{font-size:1.5rem}h2{font-size:1.2rem}h3{font-size:1.02rem}p{margin:0 0 10px;line-height:1.5;color:var(--ink)}.muted{color:var(--ink-soft);font-size:.92rem}button{font-family:var(--font-ui);font-weight:600;cursor:pointer;border:none}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:999px;font-size:1rem;background:var(--primary);color:var(--on-accent);transition:transform .12s ease}.btn:active{transform:scale(.97)}.btn.secondary{background:var(--bg-elevated);color:var(--primary);border:1.5px solid var(--primary)}.btn.ghost{background:transparent;color:var(--ink-soft);padding:10px 14px}.btn.danger{background:var(--danger);color:var(--on-accent)}.btn.gold{background:var(--gold);color:#2B2118}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn.block{display:flex;width:100%}.row{display:flex;gap:10px;flex-wrap:wrap}.topbar{justify-content:space-between;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}.topbar,.topbar .who{display:flex;align-items:center}.topbar .who{gap:10px}.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:var(--primary-tint);flex:none}.card{background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px;position:relative}.card.hero-line{border-top:3px solid var(--gold);border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}.divider{height:6px;margin:18px 0;border-radius:3px;background:repeating-linear-gradient(135deg,var(--gold-soft) 0 6px,transparent 6px 12px);opacity:.8}.surah-card{display:flex;align-items:center;gap:14px;cursor:pointer;width:100%;background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;text-align:right;color:var(--ink);font:inherit}.surah-card:active{transform:scale(.99)}.surah-card .info{flex:1 1;text-align:left;display:flex;flex-direction:column}.surah-card .info strong{font-family:var(--font-ui)}.surah-card .ar{font-family:var(--font-ar);font-size:1.5rem;direction:rtl}.badge{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:1.05rem;border:2px solid var(--line);color:var(--ink-soft)}.badge.verzonden{border-color:var(--primary);color:var(--primary);background:var(--primary-tint)}.badge.goedgekeurd{border-color:var(--gold);color:#2B2118;background:var(--gold-soft)}.ayah-wrap{direction:rtl;text-align:right;font-family:var(--font-ar);font-size:1.85rem;line-height:2.5;margin:14px 0}.ayah-wrap .bismillah{display:block;text-align:center;font-size:1.5rem;color:var(--primary-dark);margin-bottom:10px}.ayah-wrap .ayah-line{transition:background .2s ease,color .2s ease;border-radius:10px;padding:2px 6px}.ayah-wrap .ayah-line.actief{background:var(--primary-tint);color:var(--primary-dark)}.steps{display:flex;gap:6px;margin-bottom:16px}.steps span{flex:1 1;height:5px;border-radius:3px;background:var(--line)}.steps span.done{background:var(--primary)}.pin-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;gap:10px;max-width:280px;margin:18px auto 0}.pin-grid button{aspect-ratio:1;border-radius:50%;background:var(--bg-elevated);border:1.5px solid var(--line);font-size:1.4rem;color:var(--ink)}.pin-dots{display:flex;gap:12px;justify-content:center;margin:14px 0}.pin-dots span{width:14px;height:14px;border-radius:50%;border:2px solid var(--primary)}.pin-dots span.filled{background:var(--primary)}.profile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));grid-gap:14px;gap:14px;margin-top:16px}.profile-tile{--tile:var(--primary);background:linear-gradient(165deg,color-mix(in srgb,var(--tile) 26%,var(--bg-elevated)),var(--bg-elevated) 85%);border:1.5px solid color-mix(in srgb,var(--tile) 45%,var(--line));border-radius:22px;padding:18px 10px 16px;text-align:center;color:var(--ink);width:100%;font:inherit;transition:transform .12s ease}.profile-tile:active{transform:scale(.96)}.profile-tile .em{font-size:2.6rem;line-height:1;display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin:0 auto 10px;border-radius:50%;background:color-mix(in srgb,var(--tile) 32%,var(--bg-elevated))}.profile-tile .name{font-family:var(--font-ui);font-weight:700;font-size:1.05rem;display:block}button.stat-btn{text-align:left;color:var(--ink);font:inherit;cursor:pointer}button.stat-btn:active{transform:scale(.98)}.field-label,label{display:block;font-size:.88rem;color:var(--ink-soft);margin:12px 0 5px;font-family:var(--font-ui);font-weight:600}label.surah-naam{display:inline;font:inherit;color:inherit;margin:0;cursor:pointer}input[type=email],input[type=number],input[type=password],input[type=text],select,textarea{width:100%;padding:11px 13px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg-elevated);color:var(--ink);font-size:1rem;font-family:var(--font-body)}textarea{min-height:110px;font-family:var(--font-ar);font-size:1.3rem;direction:rtl}.chip{display:inline-flex;align-items:center;padding:7px 13px;border-radius:999px;border:1.5px solid var(--line);font-size:.88rem;color:var(--ink-soft);background:var(--bg-elevated);cursor:pointer;margin:0 6px 6px 0}.chip.on{background:var(--primary);border-color:var(--primary);color:var(--on-accent)}button.chip{font-family:var(--font-ui);font-weight:600;line-height:1.2}.chip.emoji{font-size:1.2rem;padding:6px 11px}.swatch{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;display:inline-block;padding:0;margin:0 6px 6px 0}.swatch.on{border-color:var(--ink)}.swatch:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.row>.chip,.row>.swatch{margin:0}.rec-btn{width:96px;height:96px;border-radius:50%;background:var(--danger);color:var(--on-accent);font-size:2rem;display:flex;align-items:center;justify-content:center;margin:14px auto;border:none}.rec-btn.recording{animation:pulse 1.4s ease-in-out infinite}.rec-btn.starting{opacity:.75;cursor:progress}.rec-btn:disabled{cursor:progress}.spinner.light{border-color:#fff rgba(255,255,255,.35) rgba(255,255,255,.35);width:28px;height:28px}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(178,69,47,.5)}70%{box-shadow:0 0 0 18px rgba(178,69,47,0)}to{box-shadow:0 0 0 0 rgba(178,69,47,0)}}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}.timer{text-align:center;font-size:1.4rem;font-weight:700;color:var(--danger)}.ayah-teller,.timer{font-family:var(--font-ui)}.ayah-teller{margin:8px 0 0;font-weight:600}audio{width:100%;margin:10px 0}.empty{text-align:center;padding:40px 20px;color:var(--ink-soft)}.empty .em{font-size:2.6rem;display:block}.empty .em,.nav-item,.navlist .btn{margin-bottom:10px}.nav-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 18px;border-radius:var(--radius);background:var(--bg-elevated);border:1px solid var(--line);color:var(--ink);font-size:1.02rem;text-align:left}.nav-item .countpill{background:var(--danger);color:var(--on-accent);border-radius:999px;padding:2px 10px;font-size:.82rem}.list-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.list-row:last-child{border-bottom:none}.flex1{flex:1 1}.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 20px;border-radius:999px;font-family:var(--font-ui);font-weight:600;z-index:50;box-shadow:0 6px 20px rgba(0,0,0,.25)}.surah-check{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.surah-check:last-child{border-bottom:none}.surah-check input[type=checkbox]{width:22px;height:22px;margin-top:2px;accent-color:var(--primary);flex:none}.link-btn{background:none;color:var(--primary);font-family:var(--font-ui);font-weight:600;padding:4px 0}.field-error{color:var(--danger);font-size:.85rem;margin:-6px 0 10px}a.btn{text-decoration:none}.spinner{width:20px;height:20px;border-radius:50%;border:3px solid var(--primary-tint);border-top-color:var(--primary);animation:spin .7s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(1turn)}}