
:root{--bg:#f8f6ef;--surface:#fffdf8;--surface2:#f0ecdf;--text:#20352d;--muted:#60756d;--primary:#176044;--primary2:#0f4933;--gold:#b58b34;--line:#ded6bf;--danger:#9c332e;--shadow:0 16px 40px rgba(24,58,44,.09);--reader-size:2rem;--reader-line:2.35;--reader-width:850px}
html[data-theme=dark]{--bg:#101a16;--surface:#17241f;--surface2:#203029;--text:#ecf3ef;--muted:#abc0b6;--primary:#62b78f;--primary2:#8dceb0;--gold:#dfbd70;--line:#32483e;--danger:#ff9d96;--shadow:0 16px 40px rgba(0,0,0,.25)}
html[data-contrast=high]{--bg:#000;--surface:#000;--surface2:#111;--text:#fff;--muted:#fff;--primary:#7cffb5;--line:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Tahoma,"Segoe UI",Arial,sans-serif;line-height:1.8}a{color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}.container{width:min(1180px,calc(100% - 32px));margin:auto}.site-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--surface) 92%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(12px);transition:transform .25s}.site-header.hidden{transform:translateY(-110%)}.nav{min-height:72px;display:flex;align-items:center;gap:18px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800}.brand img{width:43px;height:43px}.nav-links{display:flex;gap:14px;margin-inline-start:auto;align-items:center}.nav-links a{text-decoration:none;padding:8px 10px;border-radius:12px}.nav-links a:hover{background:var(--surface2)}.hero{padding:70px 0 35px;text-align:center;background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--primary) 12%,transparent),transparent 60%)}.eyebrow{color:var(--gold);font-weight:800}.hero h1{font-size:clamp(2rem,6vw,4.4rem);line-height:1.15;margin:.3em 0}.hero p{font-size:clamp(1rem,2vw,1.28rem);color:var(--muted);max-width:780px;margin:0 auto 25px}.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:11px 17px;border-radius:15px;text-decoration:none;font-weight:700}.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn.danger{color:var(--danger)}.btn.small{padding:7px 10px;font-size:.9rem}.section{padding:34px 0}.section-title{display:flex;justify-content:space-between;align-items:end;gap:15px;margin-bottom:18px}.section-title h2{margin:0;font-size:clamp(1.4rem,3vw,2.2rem)}.muted{color:var(--muted)}.card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.features{grid-template-columns:repeat(4,1fr)}.feature h3{margin:.2em 0}.search-shell{max-width:820px;margin:22px auto 0;position:relative}.search-shell input{width:100%;padding:17px 20px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:18px;font-size:1.05rem}.search-results{display:none;position:absolute;inset-inline:0;top:calc(100% + 8px);max-height:420px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);z-index:50;text-align:right;padding:8px}.search-results.open{display:block}.search-item{display:block;padding:12px;border-radius:12px;text-decoration:none;border-bottom:1px solid var(--line)}.search-item:hover{background:var(--surface2)}.surah-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.surah-card{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:17px;background:var(--surface);text-decoration:none}.surah-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.surah-num{width:39px;height:39px;border-radius:13px;background:var(--surface2);display:grid;place-items:center;font-weight:800;color:var(--primary)}.surah-card strong{display:block}.surah-card small{color:var(--muted)}.stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}.stat-number{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;color:var(--primary);font-variant-numeric:tabular-nums}.reading-center{margin:25px auto;max-width:1100px}.reading-center>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:900;font-size:1.2rem;cursor:pointer}.reading-center>summary::-webkit-details-marker{display:none}.center-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}.tool{border:1px solid var(--line);border-radius:18px;padding:15px;background:var(--bg)}.tool h3{margin:0 0 8px}.tool-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.progress{height:10px;background:var(--surface2);border-radius:20px;overflow:hidden}.progress span{display:block;height:100%;background:var(--primary);width:0}.reader-head{text-align:center;padding:38px 0 16px}.reader-head h1{font-size:clamp(2rem,6vw,4rem);margin:.15em}.meta-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.chip{padding:6px 11px;background:var(--surface2);border-radius:999px;color:var(--muted)}.quran-text{width:min(var(--reader-width),calc(100% - 28px));margin:20px auto 50px;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(18px,5vw,55px);box-shadow:var(--shadow)}.ayah{position:relative;display:inline;scroll-margin-top:110px;font-size:var(--reader-size);line-height:var(--reader-line);cursor:pointer}.ayah:hover,.ayah.active{background:color-mix(in srgb,var(--gold) 18%,transparent);border-radius:8px}.ayah-num{display:inline-grid;place-items:center;min-width:1.9em;height:1.9em;margin:0 .2em;border:1px solid var(--gold);border-radius:50%;font-family:Tahoma;font-size:.48em;color:var(--gold);vertical-align:middle}.qpc-text,.fallback-text{display:none}.quran-glyph{display:inline}.verse-tools{position:sticky;bottom:12px;z-index:30;width:min(760px,calc(100% - 24px));margin:0 auto 20px;display:none;gap:8px;flex-wrap:wrap;justify-content:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:var(--shadow)}.verse-tools.open{display:flex}.reader-nav{display:flex;justify-content:space-between;gap:10px;max-width:850px;margin:20px auto 50px}.breadcrumbs{font-size:.9rem;color:var(--muted);padding-top:18px}.mobile-tools-button{display:none;position:fixed;bottom:16px;inset-inline:16px;z-index:55;background:var(--primary);color:#fff;border:0;border-radius:16px;padding:13px;font-weight:800;box-shadow:var(--shadow);transition:transform .25s}.mobile-tools-button.hidden{transform:translateY(130%)}.bottom-sheet-backdrop{display:none}.privacy-note{position:fixed;inset-inline:15px;bottom:15px;z-index:80;max-width:760px;margin:auto}.privacy-note[hidden]{display:none}.notice{padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--surface2)}.site-footer{border-top:1px solid var(--line);padding:34px 0 90px;margin-top:35px}.footer-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.footer-note{text-align:center;color:var(--muted)}.offline-badge{font-size:.85rem}.online{color:var(--primary)}.offline{color:var(--danger)}.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.disabled-card{opacity:.8}.tag{display:inline-block;padding:4px 9px;border-radius:999px;background:var(--surface2);font-size:.8rem}.toast{position:fixed;top:88px;left:50%;transform:translateX(-50%);z-index:100;background:var(--primary2);color:#fff;padding:10px 15px;border-radius:13px;box-shadow:var(--shadow);display:none}.toast.show{display:block}.no-js{padding:12px;background:#fff3cd;color:#5c4800;text-align:center}.skip{position:absolute;top:-100px;right:12px;background:#fff;color:#000;padding:8px;z-index:999}.skip:focus{top:12px}
@media(max-width:900px){.grid,.features,.surah-grid,.media-grid{grid-template-columns:repeat(2,1fr)}.nav-links{display:none}.center-grid{grid-template-columns:1fr}}
@media(max-width:680px){.container{width:min(100% - 22px,1180px)}.hero{padding-top:42px}.grid,.features,.surah-grid,.stats,.media-grid{grid-template-columns:1fr}.reading-center.desktop-center{display:none}.mobile-tools-button{display:block}.bottom-sheet-backdrop.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:89}.bottom-sheet{position:fixed;inset-inline:0;bottom:0;z-index:90;max-height:88vh;overflow:auto;background:var(--surface);border-radius:26px 26px 0 0;padding:20px;transform:translateY(105%);transition:transform .25s}.bottom-sheet.open{transform:none}.quran-text{width:calc(100% - 16px);padding:17px;border-radius:20px}.ayah{font-size:calc(var(--reader-size)*.86)}.reader-nav{padding:0 10px}.site-footer{padding-bottom:110px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.center-search{margin:8px 0 0}.center-search .search-results{position:relative;top:8px;max-height:300px}.tool select,.tool input[type=number]{max-width:100%;padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text)}
[data-offline-list]{margin-top:9px}.print-header{display:none}


/* Othbox 2.0 — seven device-local/offline font profiles. No remote font request. */
@font-face{font-family:OthboxUthmani;src:local("KFGQPC Uthmanic Script HAFS"),local("KFGQPC Hafs Uthmanic Script"),local("KFGQPC Uthmanic Script HAFS Regular");font-display:swap}
@font-face{font-family:OthboxAmiri;src:local("Amiri Quran"),local("Amiri Quran Regular"),local("Amiri");font-display:swap}
@font-face{font-family:OthboxNaskh;src:local("Noto Naskh Arabic"),local("Noto Naskh Arabic UI");font-display:swap}
@font-face{font-family:OthboxScheherazade;src:local("Scheherazade New"),local("Scheherazade");font-display:swap}
@font-face{font-family:OthboxTraditional;src:local("Traditional Arabic"),local("Sakkal Majalla");font-display:swap}
@font-face{font-family:OthboxTypesetting;src:local("Arabic Typesetting"),local("Aldhabi");font-display:swap}
@font-face{font-family:OthboxGeeza;src:local("Geeza Pro"),local("Al Bayan"),local("Damascus");font-display:swap}
:root{--quran-font:OthboxAmiri,OthboxNaskh,"Noto Naskh Arabic",serif;--focus:0 0 0 4px color-mix(in srgb,var(--primary) 30%,transparent)}
html[data-quran-font="uthmani"]{--quran-font:OthboxUthmani,OthboxAmiri,OthboxNaskh,serif}
html[data-quran-font="amiri"]{--quran-font:OthboxAmiri,OthboxNaskh,serif}
html[data-quran-font="naskh"]{--quran-font:OthboxNaskh,OthboxAmiri,serif}
html[data-quran-font="scheherazade"]{--quran-font:OthboxScheherazade,OthboxAmiri,serif}
html[data-quran-font="traditional"]{--quran-font:OthboxTraditional,OthboxNaskh,serif}
html[data-quran-font="typesetting"]{--quran-font:OthboxTypesetting,OthboxNaskh,serif}
html[data-quran-font="geeza"]{--quran-font:OthboxGeeza,OthboxNaskh,serif}
.quran-text,.daily-ayah-text,.ayah-card-preview{font-family:var(--quran-font)}
.quran-glyph{font-family:inherit}.basmalah{text-align:center;font-family:var(--quran-font);font-size:calc(var(--reader-size)*1.05);line-height:2.2;color:var(--primary);padding:8px 0 24px}
select,input[type=number]{max-width:100%;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;padding:9px 11px}
.setting-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.setting-grid label{display:grid;gap:5px}.tool-wide{grid-column:1/-1}.tool-status{min-height:1.8em}.achievements{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.achievement{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center}.achievement strong{display:block;font-size:1.35rem;color:var(--primary)}
.inspiration-card{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,var(--surface)),var(--surface))}.inspiration-card:before{content:"";position:absolute;width:300px;height:300px;border:1px solid var(--line);border-radius:50%;inset-inline-end:-150px;top:-170px;z-index:-1}.daily-ayah-text{font-size:clamp(1.45rem,3.2vw,2.25rem);line-height:2.2;text-align:center;margin:15px auto;max-width:900px}.daily-ayah-meta{text-align:center;color:var(--gold);font-weight:800}.quick-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.quick-nav label{display:grid;gap:6px}.social-actions{display:flex;flex-wrap:wrap;gap:8px}.social-btn{min-width:48px}.reading-session{font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:900;color:var(--primary)}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);background:var(--surface);border-radius:999px;margin-top:16px}.hero-badge:before{content:"✦";color:var(--gold)}
.verse-tools{padding-bottom:max(10px,env(safe-area-inset-bottom))}.verse-tools .active-label{flex-basis:100%;text-align:center;color:var(--muted);font-size:.88rem}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:0;box-shadow:var(--focus)}
.center-grid .search-results{position:static;max-height:300px;margin-top:8px}.center-grid .search-results.open{display:block}.center-grid .search-shell{margin:0}.center-grid .search-shell input{padding:11px 13px}
.print-header{display:none}.offline-list{display:grid;gap:5px;margin-top:8px}.offline-list a{padding:6px 9px;background:var(--surface);border-radius:10px;text-decoration:none}.update-banner{border-color:var(--gold)}
@media(max-width:680px){.setting-grid,.quick-nav{grid-template-columns:1fr}.achievements{grid-template-columns:repeat(3,1fr)}.center-grid{padding-bottom:20px}.bottom-sheet{padding-bottom:max(22px,env(safe-area-inset-bottom))}.daily-ayah-text{font-size:1.5rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
@media print{html{color-scheme:light!important}html,body{background:#fff!important;color:#000!important}.site-header,.reading-center,.mobile-tools-button,.bottom-sheet,.bottom-sheet-backdrop,.verse-tools,.site-footer,.privacy-note,.actions,.breadcrumbs,.hero-badge{display:none!important}.quran-text{box-shadow:none!important;border:0!important;width:100%!important;max-width:none!important;padding:0!important;background:#fff!important;font-family:OthboxAmiri,OthboxNaskh,"Traditional Arabic",serif!important}.ayah{font-size:19pt!important;line-height:2.25!important;break-inside:avoid;page-break-inside:avoid}.quran-glyph{display:inline!important}.ayah-num{color:#000!important;border-color:#777!important}.print-header{display:block!important;text-align:center;margin-bottom:18px;font-size:10pt}.basmalah{color:#000!important}body.print-selected .ayah:not(.active){display:none!important}}
