/* Alhamdulillah 0.4 visual system: original design, Quran.com-inspired palette */
:root{
 --bg:#f6f9f7;--paper:#ffffff;--text:#183a35;--muted:#607c76;
 --main:#087c71;--main-dark:#056156;--accent:#23a89b;--border:#e0eae5;
 --subtle:#eaf5f0;--shadow:0 15px 38px rgba(8,64,52,.055);
 --gold:#c5a46a;--gold-muted:#e8dcc6;
}
html{scroll-padding-top:105px}body{background:radial-gradient(ellipse at 16% 5%,#e5f6ed 0,transparent 35%),var(--bg);line-height:1.7}
.header{background:rgba(255,255,255,.93);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 2px 22px #0a64470c}
.header::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#076f60 5%,#29b6aa 55%,#c6ab75)}
.brand{letter-spacing:-.055em;font-size:1.38rem}.brand-mark{display:inline-grid;place-items:center;background:var(--subtle);color:var(--main);border-radius:13px;width:39px;height:39px;font-size:1.6rem;margin-right:9px;vertical-align:middle}
nav a{transition:color .15s ease}nav a.active:after{bottom:-14px;background:var(--accent);height:3px;border-radius:8px}
.theme-toggle{border-radius:50%;width:42px;height:42px;display:grid;place-items:center;transition:transform .2s}
.theme-toggle:hover{transform:rotate(-18deg)}
.layout{max-width:1200px}.hero{position:relative;isolation:isolate;max-width:none;padding:75px 35px 76px;margin:12px auto 30px;overflow:hidden;border-radius:30px;background:linear-gradient(132deg,#f5fffa 4%,#ebf7f1 64%,#e2f3ed);box-shadow:inset 0 0 0 1px #dcefe5}
.hero:before{content:"";position:absolute;z-index:-1;width:380px;height:380px;top:-190px;right:-95px;border-radius:50%;border:60px solid rgba(29,142,112,.055)}
.hero:after{content:"";position:absolute;z-index:-1;width:290px;height:290px;bottom:-215px;left:-90px;border-radius:50%;border:56px solid rgba(29,142,112,.07)}
.hero-kicker{display:flex;gap:14px;align-items:center;justify-content:center;letter-spacing:.26em;font-size:.70rem}
.hero-kicker-line{display:inline-block;width:36px;height:1px;background:var(--gold)}
.hero-ar{margin:22px auto 3px;color:#598f73;font-size:clamp(1.65rem,3.1vw,2.35rem);line-height:2.1;font-family:'Amiri','Traditional Arabic','Noto Naskh Arabic',serif;letter-spacing:.01em}
.hero h1{font-size:clamp(2.6rem,5.3vw,4.6rem);font-weight:800;line-height:1.17;letter-spacing:-.057em;margin:11px 0 22px}
.hero h1 span{background:linear-gradient(95deg,#086c5e,#20a995);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:1.04rem;max-width:630px;color:#5a7770}
.hero-search{margin-top:32px;max-width:705px;box-shadow:0 16px 45px rgba(3,87,71,.11);border:1px solid #cfe6db;border-radius:17px;padding:7px}
.hero-search:focus-within,.search-primary:focus-within{outline:3px solid #48af9c4a;outline-offset:2px}
.hero-search input{font-size:.96rem}.primary{background:linear-gradient(120deg,#077e71,#098b7a);border-color:transparent;border-radius:10px;transition:transform .15s,box-shadow .15s;box-shadow:0 5px 16px #087d7130}
.primary:hover{background:linear-gradient(120deg,#065e54,#06746a);transform:translateY(-1px);box-shadow:0 8px 20px #087d713b}.primary:active{transform:translateY(0)}
.home-quicklinks{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 auto 35px;max-width:1000px}
.home-quicklinks a{display:flex;gap:15px;align-items:center;justify-content:space-between;border:1px solid var(--border);background:var(--paper);box-shadow:var(--shadow);border-radius:999px;padding:9px 17px;font-size:.84rem;font-weight:700;color:var(--text)}.home-quicklinks a:hover{color:var(--main);border-color:var(--main)}.home-quicklinks span{color:var(--main)}
.section{padding:22px 0 38px}.section-kicker{letter-spacing:.2em}.section h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:9px 0 25px}.cards{gap:18px}
.card{position:relative;overflow:hidden;padding:30px;border-radius:19px;box-shadow:0 15px 32px #0f42360b;min-height:255px}
.card:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--main),var(--gold));opacity:.8}
.card-icon{display:grid;place-items:center;width:65px;height:65px;background:var(--subtle);border-radius:17px;font-size:2.3rem}.card h3{margin-top:21px}.card p{line-height:1.65}.card:hover{border-color:#97cebc;transform:translateY(-5px)}
.home-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;padding:20px 0 25px}
.home-benefits div{padding:19px 21px;border-left:1px solid var(--border);display:flex;flex-direction:column;gap:4px}
.home-benefits span{font-family:Georgia,serif;color:var(--gold);font-size:1.5rem}.home-benefits strong{font-size:.95rem}.home-benefits p{font-size:.84rem;color:var(--muted);margin:0}
.home-note{border:1px solid #d7e9de;background:linear-gradient(110deg,var(--subtle),transparent)}
.page-head{padding:23px 0 7px}.page-head h1{font-size:clamp(2rem,3.7vw,2.85rem);font-weight:780}.page-head p{max-width:700px}
.toolbar,.search-filters{border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);background:var(--paper)}.toolbar{padding:19px;gap:14px}
.toolbar select,.toolbar input,.search-detail select{border-radius:10px;min-height:45px}
.toolbar select:focus,.toolbar input:focus,.search-detail select:focus{outline:2px solid #3fbfa475}
.verse,.reading-panel,.result-card{border:1px solid var(--border);border-radius:18px;box-shadow:0 12px 35px #143e3210}
.verse{padding:27px 37px;margin-bottom:18px;transition:border-color .15s}.verse:hover{border-color:#a7d4c3}
.verse-ref{border:1px solid #cbe8da;color:#0a7563;background:var(--subtle);font-variant-numeric:tabular-nums}
.arabic{line-height:2.25;font-family:'Amiri','Noto Naskh Arabic','Traditional Arabic',serif;color:var(--text);padding:27px 5px 25px}
.translation-grid.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.translation-grid .verse-translation{border-top:1px solid var(--border);white-space:pre-wrap;margin-bottom:14px}
.translation-label{display:block;font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--main);padding-bottom:8px}
.verse-actions{flex-wrap:wrap}.icon-btn:hover,.font-tools button:hover{border-color:var(--main);color:var(--main)}
.pagination{font-variant-numeric:tabular-nums}.pagination a{padding:10px 16px;border-radius:11px}.pagination a:hover{border-color:var(--main)}
.reading-panel{padding:28px 34px}.reading-panel h2{font-size:1.28rem}.panel-actions{border-top:1px solid var(--border);margin-top:20px;padding-top:15px}
.search-filters{padding:22px;display:grid;gap:18px}.search-primary{display:flex;align-items:center;gap:8px;min-height:62px;border:1px solid var(--border);border-radius:14px;padding:7px 8px 7px 18px;background:var(--bg)}
.search-primary input{flex:1;min-width:0;color:var(--text);font-size:1.03rem;border:0;outline:0;background:transparent}.search-loupe{font-size:1.65rem;color:var(--main);line-height:1}.search-primary .primary{padding:12px 22px}
.search-tabs{display:flex;flex-wrap:wrap;gap:9px;align-items:center}.search-tab{position:relative;cursor:pointer}.search-tab input{position:absolute;opacity:0;width:1px;height:1px}.search-tab span{display:block;border:1px solid var(--border);padding:8px 19px;border-radius:999px;font-weight:700;font-size:.9rem;color:var(--muted);transition:background .15s}.search-tab input:checked+span{background:var(--main);border-color:var(--main);color:#fff}.search-tab input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.search-detail{display:flex;flex-wrap:wrap;gap:14px}.search-detail label{display:grid;gap:5px;flex:1;min-width:180px;color:var(--muted);font-size:.8rem;font-weight:750}.search-detail select{background:var(--paper);color:var(--text);border:1px solid var(--border);padding:9px 12px}
.hint{margin:0;color:var(--muted);font-size:.82rem}.hint a{font-weight:700;text-decoration:underline;color:var(--main)}
.results-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 16px;color:var(--muted);font-size:.91rem}.results-bar strong{color:var(--text)}
.search-results{display:grid;gap:13px}.result-card{padding:22px 25px;background:var(--paper)}.result-card:hover{border-color:#b9dbc9}.result-meta{display:flex;gap:14px;align-items:center;justify-content:space-between;color:var(--muted);font-size:.8rem}.result-type{font-size:.75rem;font-weight:750;border-radius:6px;padding:4px 10px;background:var(--subtle);color:var(--main)}.result-type.hadith{background:#f4eee2;color:#937438}.result-type.tafsir{background:#eaf1fc;color:#3c669d}
.result-body{font-size:1.01rem;line-height:1.87;margin:15px 0 13px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)}mark{background:#fbeab4;color:#4f3911;border-radius:2px;padding:0 .1em}.result-link{color:var(--main);font-weight:800;font-size:.86rem;display:inline-flex;align-items:center;gap:11px}.result-link:hover{text-decoration:underline}
footer{background:var(--paper);border-top:1px solid var(--border)}footer a:hover{text-decoration:underline}
body.dark{--bg:#0c1b18;--paper:#132a24;--text:#edf7f2;--muted:#a7c4b8;--main:#59cbb5;--main-dark:#158b72;--accent:#60d9c0;--border:#29483d;--subtle:#1b3c33;--shadow:0 15px 45px #0003;--gold:#d4b783;background:radial-gradient(ellipse at 17% 2%,#19372d 0,transparent 35%),var(--bg)}
body.dark .header{background:rgba(19,42,36,.94)}body.dark .hero{background:linear-gradient(125deg,#14362b,#1c4034,#123127);box-shadow:inset 0 0 0 1px #315d4c}
body.dark .hero-ar{color:#8ac6ac}body.dark .hero p{color:#b1cbbd}body.dark .hero h1 span{background:linear-gradient(90deg,#5ae2c2,#d5e7c1);-webkit-background-clip:text;background-clip:text;color:transparent}
body.dark .hero-search{border-color:#356758}body.dark .hero-search input{color:#123a2f}body.dark .hero-search{background:#f1fbf6}
body.dark .card:before{opacity:.7}body.dark .result-type.hadith{background:#4a3f2b;color:#e7c68c}body.dark .result-type.tafsir{background:#243e63;color:#b9d2ff}body.dark .verse-ref{border-color:#295b4d}body.dark .search-primary{background:#0d231b}body.dark .search-tab input:checked+span{color:#09291e}body.dark .primary{background:#0c8c79;color:#fff}
@media(max-width:900px){.translation-grid.two-col{grid-template-columns:1fr;gap:0}.home-benefits{grid-template-columns:1fr;gap:0}.home-benefits div{padding:12px 15px}.hero{border-radius:21px}}
@media(max-width:750px){.hero{padding:50px 17px 54px;margin:3px 0 22px}.hero-ar{font-size:1.52rem}.hero h1{font-size:2.45rem}.hero-kicker-line{width:16px}.hero-search{flex-wrap:wrap}.hero-search input{width:100%;flex-basis:100%;min-height:42px}.hero-search .primary{width:100%}.home-quicklinks{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:5px 0 13px}.home-quicklinks a{flex:0 0 auto}.cards{gap:14px}.card{min-height:0}.search-filters{padding:14px}.search-primary{flex-wrap:wrap}.search-primary input{font-size:.95rem;flex:1 1 calc(100% - 55px)}.search-primary .primary{width:100%}.search-tabs{gap:5px}.search-tab span{padding:7px 13px;font-size:.8rem}.verse{padding:20px}.arabic{font-size:var(--arabic-size);line-height:2.25}.result-card{padding:19px}.results-bar{align-items:start;flex-direction:column}.hero h1{letter-spacing:-.04em}.footer-brand{font-size:.95rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

.bookmark-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.import-btn{display:inline-flex;align-items:center;gap:7px;position:relative;overflow:hidden;padding:10px 18px;border:1px solid var(--border);border-radius:10px;font-weight:750;cursor:pointer}.import-btn:hover{border-color:var(--main)}.import-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}