:root{
--g:#17483b;--g2:#236252;--gold:#b18a3b;--gold2:#d7bd79;--bg:#f8f4e9;--card:#fffdf8;
--line:#e3d8bd;--txt:#273a32;--muted:#718078;--shadow:0 6px 22px rgba(30,55,46,.07);
--quran-blue:#78c7e8;--quran-blue-dark:#4ea8cf;--quran-white:#fff;--alert:#c62828
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(#b18a3b18 1px,transparent 1px),var(--bg);background-size:28px 28px;color:var(--txt);font-family:AmiriLocal,system-ui,sans-serif;transition:.2s}
body.dark{--bg:#111b18;--card:#182621;--line:#30443d;--txt:#edf2ef;--muted:#a8b6b0;--g:#2d7a67;--g2:#205749}
.hero{height:170px;background:linear-gradient(135deg,var(--g),var(--g2));color:#fff;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pattern{position:absolute;inset:-70px;opacity:.16;background-image:linear-gradient(45deg,transparent 48%,#fff 49%,#fff 51%,transparent 52%),linear-gradient(-45deg,transparent 48%,#fff 49%,#fff 51%,transparent 52%);background-size:55px 55px;transform:rotate(10deg)}
.topbar{position:relative;width:min(1050px,100%);display:flex;align-items:center;justify-content:space-between;padding:22px 18px}
.brand{display:flex;align-items:center;gap:24px;text-align:center;margin:auto}
.brand span{font-size:40px;color:var(--gold2)}
.brand h1{font:700 42px Amiri,serif;margin:0}
.brand p{margin:2px 0;color:#e5eee9;font-size:13px}
.icon-btn{width:42px;height:42px;border:1px solid #ffffff3b;background:#ffffff16;color:#fff;border-radius:50%;font-size:21px;cursor:pointer;backdrop-filter:blur(8px)}
.nav{position:sticky;top:0;z-index:20;background:#fffdf8f2;border-bottom:1px solid var(--line);display:flex;gap:7px;justify-content:center;flex-wrap:wrap;padding:10px;backdrop-filter:blur(9px)}
.dark .nav{background:#182621f2}
.nav button{border:1px solid var(--line);background:var(--card);color:var(--g);border-radius:22px;padding:8px 14px;font:600 13px AmiriLocal;cursor:pointer;transition:.15s}
.nav button:hover{background:var(--g);color:#fff;transform:translateY(-1px)}
main{max-width:980px;margin:auto;padding:25px 14px 70px}
.hidden{display:none!important}
.welcome{text-align:center;padding:15px 10px 20px}
.ornament{color:var(--gold);font-size:26px}
.welcome h2{font:700 31px Amiri;color:var(--g);margin:5px 0}
.welcome p{color:var(--muted);margin:0}
.home-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:13px}
.resume{border:1px solid var(--line);background:var(--card);color:var(--g);border-radius:24px;padding:9px 15px;font:600 12px AmiriLocal;cursor:pointer}
.resume:hover{border-color:var(--gold)}
.resume.secondary{color:var(--gold)}
.section-title{text-align:center;margin:8px 0 18px;font:700 21px Amiri;color:var(--g)}
.section-title span{padding:0 18px;position:relative}
.section-title span:before,.section-title span:after{content:"";position:absolute;top:50%;width:55px;height:1px;background:var(--gold);opacity:.55}
.section-title span:before{right:100%}.section-title span:after{left:100%}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tile{border:1px solid var(--line);background:var(--card);border-radius:18px;padding:19px 10px;text-align:center;cursor:pointer;box-shadow:var(--shadow);transition:.18s}
.tile:hover{transform:translateY(-3px);border-color:var(--gold)}
.tile .ico{font-size:30px;display:block;margin-bottom:7px}
.tile strong{font-size:13px}.tile small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.heading{display:flex;align-items:center;justify-content:center;gap:14px;margin:5px 0 18px}
.heading h2{font:700 31px Amiri;color:var(--g);margin:0}.heading i{font-style:normal;color:var(--gold)}
.tools{display:flex;gap:8px;align-items:center;margin-bottom:14px;position:sticky;top:59px;z-index:8;padding:7px 0;background:linear-gradient(var(--bg) 80%,transparent)}
.search{flex:1;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);border-radius:25px;padding:0 14px;color:var(--muted)}
.search input{width:100%;border:0;outline:0;background:transparent;color:var(--txt);padding:10px 0;font:13px AmiriLocal}
.tool{border:1px solid var(--line);background:var(--card);color:var(--g);border-radius:22px;padding:9px 12px;font:600 11px AmiriLocal;cursor:pointer;white-space:nowrap}
.progress-wrap{margin:0 0 12px}.progress{height:6px;border-radius:10px;background:var(--line);overflow:hidden}.progress span{display:block;height:100%;width:0;background:var(--g);transition:.2s}.progress-wrap small{display:block;color:var(--muted);margin-top:5px;font-size:10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;margin:14px 0;padding:18px;box-shadow:var(--shadow);scroll-margin-top:125px}
.meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px}
.num{width:34px;height:34px;border-radius:50%;background:#f1e8d4;border:1px solid #ddcda7;display:grid;place-items:center;color:var(--g);font-weight:700}
.text{font:400 25px/2.05 Amiri,serif;margin:13px 0 5px;white-space:pre-wrap}.hint{font-size:12px;color:var(--muted);line-height:1.9;border-top:1px dashed var(--line);padding-top:8px}
.actions{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}.action-row{display:flex;gap:7px;align-items:center}
.counter-btn,.copy-btn{border:0;border-radius:25px;padding:9px 16px;background:var(--g);color:#fff;font:700 12px AmiriLocal;cursor:pointer}.counter-btn.done{background:#687a72}.copy-btn{background:transparent;color:var(--g);border:1px solid var(--line)}
.fav{border:1px solid var(--line);background:transparent;color:var(--gold);border-radius:50%;width:39px;height:39px;font-size:20px;cursor:pointer}.fav.on{background:#b18a3b16}
.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);background:var(--g);color:#fff;padding:10px 16px;border-radius:24px;font:600 12px AmiriLocal;opacity:0;pointer-events:none;transition:.2s;z-index:50}.toast.show{opacity:1;transform:translate(-50%,0)}
.tasbeeh-box{max-width:520px;margin:10px auto;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:25px;text-align:center;box-shadow:var(--shadow)}
.tasbeeh-label{color:var(--muted);font-size:12px;margin-bottom:8px}.tasbeeh-box select{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--txt);border-radius:14px;padding:11px;font:600 14px AmiriLocal;outline:0}
.tasbeeh-count{font:700 72px AmiriLocal;color:var(--g);margin:20px 0 8px}.tasbeeh-btn{width:100%;border:0;border-radius:30px;padding:15px;background:var(--g);color:#fff;font:700 16px AmiriLocal;cursor:pointer}.tasbeeh-actions{display:flex;justify-content:center;gap:8px;margin-top:10px}.tasbeeh-actions button{border:1px solid var(--line);background:transparent;color:var(--g);border-radius:20px;padding:7px 16px;font:600 12px AmiriLocal;cursor:pointer}
@media(max-width:800px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.hero{height:145px}.brand{gap:12px}.brand h1{font-size:34px}.brand span{font-size:28px}.text{font-size:21px}.card{padding:15px}.tiles{grid-template-columns:repeat(2,1fr)}.tools{top:57px}.nav{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}.nav button{flex:0 0 auto}}

/* Quran / Mushaf */
@font-face{font-family:AmiriLocal;src:url('assets/fonts/Amiri-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:AmiriQuran;src:url('assets/fonts/AmiriQuranColored.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.quran-screen{padding-bottom:20px}
.quran-intro{margin:-8px auto 15px;text-align:center;color:var(--muted);font-size:12px}
.quran-tools{display:flex;gap:8px;align-items:center;margin-bottom:14px;position:sticky;top:59px;z-index:8;padding:7px 0;background:linear-gradient(var(--bg) 80%,transparent)}
.surah-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.surah-item{border:1px solid var(--line);background:var(--card);color:var(--txt);border-radius:15px;padding:11px 10px;display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;text-align:right;cursor:pointer;box-shadow:var(--shadow);transition:.15s;font-family:system-ui,sans-serif}
.surah-item:hover{transform:translateY(-2px);border-color:var(--gold)}
.surah-num{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid #d8c697;background:#f1e8d4;color:var(--g);font-weight:700;font-size:11px}
.surah-name{font:700 18px AmiriLocal,serif;color:var(--g)}
.surah-item small{font-size:9px;color:var(--muted);white-space:nowrap}
.quran-results{display:grid;gap:8px}
.q-result{width:100%;border:1px solid var(--line);background:var(--card);border-radius:15px;padding:12px;text-align:right;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--txt);cursor:pointer}
.q-result b{font-size:11px;color:var(--g)}.q-result p{margin:5px 0 0;font:18px/1.8 AmiriLocal,serif}.q-result>span{font-size:25px;color:var(--gold)}
.quran-empty,.quran-error{border:1px solid var(--line);background:var(--card);border-radius:15px;padding:20px;text-align:center;color:var(--muted);font-size:12px}
.quran-reader-tools{display:flex;justify-content:space-between;gap:8px;margin-bottom:9px;position:sticky;top:59px;z-index:9;padding:7px 0;background:linear-gradient(var(--bg) 80%,transparent)}
.mushaf{max-width:900px;margin:auto;background:var(--card);border:1px solid #d8cdb7;border-radius:10px;padding:15px 18px 15px;box-shadow:0 6px 22px rgba(65,52,32,.08);position:relative;overflow:hidden}
.mushaf:before{content:"";position:absolute;inset:7px;border:1px solid #c9b98f;border-radius:6px;pointer-events:none;opacity:.8}
.mushaf:after{content:"";position:absolute;inset:11px;border:1px solid #e2d8c3;border-radius:4px;pointer-events:none;opacity:.9}
.surah-head{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:18px;text-align:center;color:#fff;margin:1px 0 9px}
.surah-head>span{color:var(--gold);font-size:23px}.surah-head strong{display:block;font:700 30px AmiriLocal,serif;color:var(--g)}.surah-head small{display:block;color:var(--muted);font-size:9px;margin-top:-4px}
.basmala{position:relative;z-index:1;text-align:center;font:400 26px/1.9 AmiriQuran,AmiriLocal,serif;color:var(--g);margin:0 0 10px;text-shadow:none}
.quran-text{position:relative;z-index:1;direction:rtl;text-align:justify;color:#20201c;padding:7px 12px 4px;min-height:430px;text-shadow:none}
.q-inline-ayah{font:400 29px/2.35 AmiriQuran,AmiriLocal,serif;word-spacing:.03em;color:#20201c}
.ayah-mark{display:inline-grid;place-items:center;vertical-align:middle;width:1.45em;height:1.45em;margin:0 .18em;color:#fff;font:400 .52em/1 AmiriLocal,serif;border:1px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(35,137,178,.5);box-shadow:inset 0 0 0 2px rgba(255,255,255,.12)}
.dark .quran-text{color:#fff}.dark .q-base{color:#fff}.dark .q-tashkeel{color:#111}.dark .ayah-mark{background:rgba(20,93,125,.65);border-color:rgba(255,255,255,.7);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.12)}
.page-navigation{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:8px;padding-top:10px;border-top:1px double #d8cdb7}
.page-nav-btn{border:1px solid #cdbf9f;background:#f7f1e5;color:var(--g);border-radius:20px;padding:8px 12px;cursor:pointer;font:600 12px AmiriLocal;white-space:nowrap;backdrop-filter:blur(5px)}
.page-nav-btn:disabled{opacity:.35;cursor:not-allowed}
.page-number{color:var(--muted);font:600 11px AmiriLocal;white-space:nowrap}
.quran-screen .tool{font-size:11px}
.quran-attribution{margin:10px auto 0;max-width:900px;text-align:center;color:var(--muted);font-size:8px;line-height:1.6}
.quran-attribution a{color:var(--g)}
@media(max-width:800px){.surah-grid{grid-template-columns:repeat(2,1fr)}.q-inline-ayah{font-size:27px;line-height:2.3}.mushaf{padding:13px 12px 13px}}
@media(max-width:600px){.quran-tools{top:57px}.quran-reader-tools{top:57px}.surah-grid{grid-template-columns:1fr 1fr;gap:8px}.surah-item{grid-template-columns:32px 1fr;padding:9px 8px}.surah-item small{grid-column:2}.surah-name{font-size:17px}.q-inline-ayah{font-size:25px;line-height:2.28}.ayah-mark{width:1.5em;height:1.5em;margin:0 .12em;font-size:.5em}.basmala{font-size:22px;margin-bottom:8px}.mushaf{border-radius:15px;padding:10px 8px 10px}.mushaf:before{inset:5px}.quran-text{min-height:390px;padding:6px 5px 2px}.quran-intro{font-size:10px}.page-navigation{gap:5px}.page-nav-btn{padding:7px 9px;font-size:11px}.page-number{font-size:10px}.quran-attribution{font-size:7px}}

.quran-alert{display:inline-flex;align-items:center;justify-content:center;margin:0 .2em;color:#fff;background:var(--alert);border-radius:50%;width:1.35em;height:1.35em;font:700 .52em/1 AmiriLocal,serif;vertical-align:middle;box-shadow:0 1px 4px rgba(120,0,0,.18)}
.quran-alert-label{display:block;text-align:center;color:#fff;background:rgba(198,40,40,.92);border-radius:12px;padding:3px 9px;width:max-content;margin:8px auto 0;font:600 10px AmiriLocal,serif}
/* Quran Uthmani-style typography: monochrome white text, colored alerts only */
.quran-text,.q-inline-ayah,.basmala{font-family:AmiriQuran,AmiriLocal,serif;font-variant-ligatures:normal;font-feature-settings:"liga" 1,"calt" 1;color:#20201c!important}.q-base{color:inherit}.q-tashkeel{color:inherit}
/* Dark mode: Quran letters and dots stay white; only diacritics are black. Day mode is unchanged. */
.dark .quran-text,.dark .q-inline-ayah,.dark .basmala{color:#fff!important}
.dark .q-base{color:#fff!important}
.dark .q-tashkeel{color:#000!important}
.quran-alert{color:#fff!important;background:#c62828!important;}