:root{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color-scheme:dark;--bg:#0b211d;--bg2:#102a24;--surface:#15362f;--surface2:#193e36;--surface3:#20473d;--border:#315247;--fg:#f3f4e9;--muted:#afc5bc;--gold:#dcc18a;--gold2:#f0dba7;--arabic:32px;--english:16px;--shadow:0 24px 65px #06141175;--navh:74px;}
:root[data-theme="light"]{color-scheme:light;--bg:#f6f5ef;--bg2:#eeeae0;--surface:#fffefb;--surface2:#f0eee6;--surface3:#e9e5d8;--border:#d9d8cc;--fg:#172e29;--muted:#61726b;--gold:#977336;--gold2:#89682c;--shadow:0 18px 55px #183b2220}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--bg);color:var(--fg);min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:4px}::selection{background:#c5ad72;color:#09221b}.ambient{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 78% 9%,#245f4527,transparent 34%),radial-gradient(circle at 6% 66%,#6a794013,transparent 34%);pointer-events:none}.site-header{position:sticky;top:0;z-index:25;backdrop-filter:blur(16px);background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:1px solid var(--border)}.header-inner{max-width:1280px;margin:auto;padding:15px 26px;display:flex;gap:26px;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;min-width:0}.brand-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:linear-gradient(160deg,#1f715f,#0b3d34);color:var(--gold2);font-size:36px;font-family:serif;box-shadow:inset 0 0 0 1px #b5a06555}.brand-copy{display:grid;gap:2px}.brand-copy strong{font-size:21px;letter-spacing:-.75px;line-height:1.1}.brand-copy small{font-size:9px;letter-spacing:1.5px;color:var(--muted);font-weight:800}.desktop-nav{display:flex;gap:6px;align-items:center}.desktop-nav a{padding:11px 13px;font-size:13px;font-weight:700;color:var(--muted);border-radius:11px;white-space:nowrap}.desktop-nav a:hover,.desktop-nav a.active{color:var(--fg);background:var(--surface2)}.header-actions{display:flex;align-items:center;gap:8px}.icon-button{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--surface);border:1px solid var(--border);color:var(--fg);font-size:20px}.header-install{height:41px;white-space:nowrap;display:flex;align-items:center;gap:9px;padding:0 14px;border:1px solid var(--border);background:var(--surface);color:var(--fg);border-radius:100px;font-size:12px;font-weight:800}.main{max-width:1230px;margin:0 auto;padding:32px 26px 110px;min-height:70vh}.eyebrow{color:var(--gold);font-size:11px;text-transform:uppercase;font-weight:800;letter-spacing:2.2px}.hero{position:relative;display:grid;grid-template-columns:1.35fr .65fr;align-items:center;min-height:345px;border:1px solid #54806a;border-radius:28px;padding:48px 50px;overflow:hidden;background:linear-gradient(125deg,#103b32,#226553 64%,#347b68);box-shadow:var(--shadow);color:#fff}.hero:after{content:'۞';position:absolute;right:4%;top:-120px;font:430px Georgia,serif;color:#f4e6c10a;pointer-events:none}.hero h1{font-size:clamp(35px,4.4vw,62px);line-height:1.12;margin:17px 0 18px;letter-spacing:-2.8px;max-width:720px}.hero h1 em{font-style:normal;color:#e9d09c}.hero p{color:#d4e4dc;max-width:510px;line-height:1.9;font-size:14px;margin-bottom:25px}.hero-art{position:relative;z-index:1;text-align:center;padding:28px}.hero-art .arabic-hero{font-family:Amiri,serif;font-size:72px;line-height:1.6;color:#efddaf}.hero-art .hero-decoration{font-size:100px;color:#e2cf9550;line-height:.7}.button-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;flex-wrap:nowrap;border:1px solid var(--border);border-radius:13px;padding:12px 17px;font-size:13px;font-weight:800;color:var(--fg);background:var(--surface);min-height:43px}.btn:hover{filter:brightness(1.09)}.btn-gold{color:#19382f;background:#e1c58d;border-color:#e1c58d}.btn-ghost{background:transparent;border-color:#bdd4c46b;color:inherit}.btn-sm{padding:9px 12px;min-height:36px;font-size:12px}.btn:disabled{opacity:.45;cursor:not-allowed}.mini-stats{display:flex;gap:10px;flex-wrap:wrap;margin:23px 0}.mini-stat{display:flex;align-items:center;gap:10px;padding:14px 17px;background:var(--surface);border:1px solid var(--border);border-radius:16px;flex:1;min-width:150px}.mini-stat strong{font-size:22px;color:var(--gold)}.mini-stat span{color:var(--muted);font-size:11px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:38px 0 18px}.section-head h2{margin:7px 0 0;font-size:25px;letter-spacing:-1px}.section-head p{font-size:12px;color:var(--muted);line-height:1.7}.section-head a{font-size:12px;font-weight:800;color:var(--gold);white-space:nowrap}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.book-card{display:flex;flex-direction:column;gap:15px;background:var(--surface);border:1px solid var(--border);padding:21px;border-radius:19px;min-width:0;position:relative;transition:transform .17s,border-color .17s}.book-card:hover{border-color:#a68d56;transform:translateY(-2px)}.book-card-top{display:flex;align-items:start;justify-content:space-between;gap:10px}.book-symbol{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;color:#ebd1a1;background:linear-gradient(135deg,#215d4d,#153b32);font-size:27px}.book-arabic{font:26px Amiri,serif;color:var(--gold);direction:rtl}.book-card h3{font-size:16px;letter-spacing:-.35px;margin:0;line-height:1.45}.book-card p{margin:6px 0 0;font-size:12px;line-height:1.8;color:var(--muted)}.book-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;color:var(--gold);font-size:11px;font-weight:800}.book-foot span:last-child{white-space:nowrap}.tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;letter-spacing:.25px;font-weight:800;padding:6px 9px;background:var(--surface3);border:1px solid var(--border);border-radius:100px;color:var(--muted)}.tag.gold{background:#a9802d20;color:var(--gold);border-color:#ad935b55}.quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.quick-card{border-radius:18px;padding:19px;background:var(--surface);border:1px solid var(--border);display:flex;gap:14px;align-items:start}.quick-card .small-icon{font-size:24px;color:var(--gold)}.quick-card strong{font-size:14px}.quick-card p{margin:5px 0 0;font-size:12px;color:var(--muted);line-height:1.65}.page-head{display:flex;justify-content:space-between;align-items:start;gap:20px;margin:20px 0 26px}.page-head h1{font-size:clamp(30px,4vw,44px);letter-spacing:-1.8px;margin:10px 0}.page-head p{color:var(--muted);font-size:13px;line-height:1.7;max-width:650px}.search-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:15px 0 21px}.search-field{position:relative;display:flex;align-items:center;flex:1;min-width:210px}.search-field>span{position:absolute;left:15px;color:var(--gold);font-size:19px;pointer-events:none}.search-field input{width:100%;height:49px;border-radius:13px;background:var(--surface);border:1px solid var(--border);color:var(--fg);padding:0 16px 0 44px;outline:none;font-size:13px}.search-field input:focus{border-color:var(--gold)}.input,select{border:1px solid var(--border);background:var(--surface);color:var(--fg);border-radius:12px;min-height:45px;padding:0 13px;max-width:100%;outline:none;font-size:13px}select{padding-right:32px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7ac72' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:17px}.book-hero{border:1px solid var(--border);background:linear-gradient(125deg,var(--surface2),var(--surface));border-radius:23px;padding:32px 34px;display:flex;align-items:center;justify-content:space-between;gap:25px}.book-hero h1{font-size:clamp(25px,4vw,37px);margin:8px 0;letter-spacing:-1px}.book-hero p{color:var(--muted);font-size:13px;line-height:1.8;max-width:700px}.book-hero-ar{font:clamp(38px,5vw,65px) Amiri,serif;color:var(--gold);white-space:nowrap}.book-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:19px 0}.chapter-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.chapter{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:15px;min-width:0;min-height:75px;cursor:pointer;text-align:left;color:var(--fg)}.chapter:hover{border-color:#a88f58;background:var(--surface2)}.chapter-num{flex:none;width:40px;height:40px;border-radius:11px;background:var(--surface3);display:grid;place-items:center;color:var(--gold);font-weight:800;font-size:13px}.chapter-text{min-width:0}.chapter-text strong{font-size:13px;display:block;overflow-wrap:anywhere}.chapter-text small{color:var(--muted);font-size:11px;margin-top:4px;display:block}.chapter-chevron{margin-left:auto;color:var(--gold)}.reader-column{max-width:920px;margin:auto}.reader-heading{text-align:center;padding:16px 10px 12px}.reader-heading h1{font-size:clamp(25px,3.6vw,37px);line-height:1.3;letter-spacing:-1.1px}.reader-heading p{color:var(--muted);font-size:12px;line-height:1.8}.reader-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:10px;margin:20px 0}.reader-tools .button-row{gap:7px}.hadith-card{background:var(--surface);border:1px solid var(--border);border-radius:21px;padding:29px 34px;margin:15px 0;scroll-margin-top:100px;overflow:hidden}.hadith-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.hadith-no{color:var(--gold);background:var(--surface3);font-size:11px;letter-spacing:.5px;font-weight:800;padding:7px 11px;border-radius:100px}.hadith-actions{display:flex;gap:7px;align-items:center}.tiny-button{border:1px solid var(--border);background:var(--surface2);color:var(--muted);display:flex;gap:5px;align-items:center;border-radius:9px;font-size:11px;font-weight:700;padding:8px 10px;white-space:nowrap}.tiny-button.saved{color:var(--gold);border-color:#ac9558}.arabic-text{font-family:Amiri,'Times New Roman',serif;direction:rtl;text-align:right;font-size:var(--arabic);line-height:2.05;color:var(--fg);margin:28px 0;white-space:pre-wrap;overflow-wrap:anywhere}.english-text{font-size:var(--english);line-height:2.05;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--fg);margin:20px 0}.hadith-divider{height:1px;background:var(--border);margin:22px 0}.source-line{font-size:11px;color:var(--muted);line-height:1.8;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.source-line a{color:var(--gold)}.reader-pagination{display:flex;justify-content:space-between;gap:10px;margin:25px 0}.status-card{padding:26px;border:1px solid var(--border);border-radius:17px;background:var(--surface);color:var(--muted);font-size:13px;line-height:1.9}.status-card strong{color:var(--fg)}.status-card a{color:var(--gold);font-weight:800}.skeleton{height:150px;border-radius:15px;background:linear-gradient(95deg,var(--surface),var(--surface2),var(--surface));background-size:200%;animation:shimmer 1.5s infinite;margin:12px 0}@keyframes shimmer{to{background-position-x:-200%}}.empty-state{text-align:center;border:1px dashed var(--border);border-radius:17px;padding:45px 22px;color:var(--muted)}.empty-state strong{display:block;color:var(--fg);font-size:20px;margin-bottom:8px}.empty-state p{font-size:13px;line-height:1.8;max-width:480px;margin:0 auto 14px}.notice{border:1px solid #98794578;background:#c5a06112;border-radius:15px;padding:16px 19px;font-size:12px;color:var(--muted);line-height:1.85}.notice strong{color:var(--fg)}.notice a{color:var(--gold)}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.setting-card{padding:20px;border:1px solid var(--border);background:var(--surface2);border-radius:17px}.setting-card h3{margin:0 0 14px;font-size:14px}.setting-card p{font-size:12px;color:var(--muted)}.choice-row{display:flex;flex-wrap:wrap;gap:9px}.choice-row button{background:var(--surface);border:1px solid var(--border);color:var(--fg);padding:10px 13px;border-radius:10px;font-size:12px;font-weight:700}.choice-row button.selected{background:var(--gold);color:#173328;border-color:var(--gold)}.floating-panel{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:15px;background:#010c0ac7;backdrop-filter:blur(8px)}.dialog{background:var(--surface);border:1px solid var(--border);border-radius:24px;width:min(540px,100%);max-height:min(85dvh,760px);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}.dialog-head{display:flex;align-items:start;gap:14px;justify-content:space-between;padding:23px 24px 16px}.dialog-head h2{font-size:22px;margin:7px 0;letter-spacing:-.8px}.dialog-head p{font-size:12px;line-height:1.6;color:var(--muted)}.dialog-body{padding:5px 24px 24px;overflow-y:auto;overscroll-behavior:contain}.dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;border-top:1px solid var(--border);padding:13px 24px}.close-btn{width:36px;height:36px;border-radius:100%;border:1px solid var(--border);background:var(--surface2);color:var(--fg);font-size:18px;flex:none}.installation-graphic{height:102px;display:grid;place-items:center;position:relative;border:1px solid var(--border);border-radius:17px;background:var(--surface2);margin:12px 0 18px;overflow:hidden}.install-target{border:2px solid var(--gold);border-radius:13px;padding:12px 18px;font-size:14px;font-weight:800;box-shadow:0 0 0 8px #c6aa5d12}.gold-trail{position:absolute;width:120px;height:80px;left:14%;top:20%;pointer-events:none}.gold-trail:before{content:'➤';position:absolute;color:var(--gold2);font-size:26px;filter:drop-shadow(0 0 8px #d7bd77);animation:point 2.4s ease-in-out infinite}.gold-trail:after{content:'·········';position:absolute;color:var(--gold);transform:rotate(17deg);font-size:22px;opacity:.65;animation:glow 2.4s infinite}@keyframes point{0%,100%{transform:translate(0,30px) rotate(-40deg);opacity:.3}65%{transform:translate(100px,0) rotate(-40deg);opacity:1}}@keyframes glow{50%{opacity:.2}}.install-instructions{color:var(--muted);line-height:1.9;font-size:13px}.install-instructions b{color:var(--fg)}.mobile-nav{display:none}#toast{position:fixed;z-index:110;left:50%;bottom:30px;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:11px 16px;color:#133228;background:#e1c58d;border-radius:12px;font-size:12px;font-weight:800;transition:.2s;box-shadow:var(--shadow);white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0)}.footer{padding:40px 0 10px;margin-top:40px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;color:var(--muted);font-size:11px;line-height:1.8}.footer a{color:var(--gold)}
@media(max-width:950px){.desktop-nav{gap:0}.desktop-nav a{padding:10px 7px;font-size:11px}.header-inner{gap:15px}.hero{padding:34px}.hero-art .arabic-hero{font-size:55px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){:root{--navh:67px}.header-inner{padding:12px 15px}.brand-mark{width:41px;height:41px;font-size:31px}.brand-copy strong{font-size:18px}.brand-copy small{font-size:7px;letter-spacing:1.05px}.desktop-nav,.header-install{display:none}.header-actions{gap:5px}.icon-button{width:37px;height:37px;border-radius:11px}.main{padding:19px 15px calc(95px + env(safe-area-inset-bottom))}.hero{grid-template-columns:1fr;min-height:unset;padding:30px 24px;border-radius:22px}.hero h1{font-size:35px;letter-spacing:-1.4px}.hero p{font-size:12px;line-height:1.8}.hero-art{display:none}.hero .button-row{align-items:stretch}.hero .btn{font-size:12px}.mini-stats{gap:8px;margin-top:13px}.mini-stat{min-width:calc(50% - 4px);padding:12px}.mini-stat strong{font-size:18px}.mini-stat span{font-size:10px}.section-head{margin:28px 0 14px}.section-head h2{font-size:20px}.cards{grid-template-columns:1fr;gap:11px}.book-card{padding:17px;gap:9px;border-radius:16px}.book-arabic{font-size:23px}.quick-grid{grid-template-columns:1fr;gap:9px}.quick-card{padding:15px}.page-head{margin:8px 0 20px;flex-direction:column}.page-head h1{font-size:28px}.search-bar{gap:8px}.search-field{min-width:100%}.search-bar select{width:100%}.book-hero{padding:21px;border-radius:18px;flex-direction:column;align-items:start;gap:1px}.book-hero h1{font-size:27px}.book-hero-ar{font-size:39px;align-self:center}.chapter-list{grid-template-columns:1fr}.chapter{padding:13px;min-height:66px}.reader-tools{gap:9px}.reader-tools .button-row{width:100%;justify-content:center}.reader-tools .btn{flex:1;padding:9px 11px;font-size:11px}.reader-heading h1{font-size:24px}.hadith-card{padding:20px 16px;margin:12px 0;border-radius:17px}.arabic-text{font-size:var(--arabic);line-height:1.95}.english-text{line-height:1.9}.hadith-card-head{align-items:start}.tiny-button{padding:8px}.source-line{font-size:10px}.settings-grid{grid-template-columns:1fr}.mobile-nav{display:flex;position:fixed;z-index:28;left:0;bottom:0;width:100%;padding:7px max(8px,env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right));background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(18px);border-top:1px solid var(--border);justify-content:space-around;gap:2px}.mobile-nav a{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;color:var(--muted);font-size:10px;font-weight:800;white-space:nowrap;padding:6px 2px;border-radius:10px}.mobile-nav a.active{background:var(--surface2);color:var(--gold)}.mn-icon{font-size:22px;line-height:1.1}#toast{bottom:calc(81px + env(safe-area-inset-bottom));max-width:90vw;overflow:hidden;text-overflow:ellipsis}.dialog{max-height:min(89dvh,820px);border-radius:20px}.dialog-head{padding:18px 18px 8px}.dialog-body{padding:5px 18px 18px}.dialog-actions{padding:12px 18px}.dialog-head h2{font-size:19px}.footer{padding-bottom:30px}}
@media(max-width:345px){.brand-copy small{display:none}.hero h1{font-size:31px}.btn{padding:10px 11px;font-size:11px}.tiny-button{font-size:10px;padding:6px 7px}.hadith-card{padding:15px 12px}.mini-stat{min-width:100%}.reader-pagination .btn{font-size:11px;padding:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


/* V2 — universal alignment system. Text and SVGs share an exact centre line. */
.ui-icon{width:18px;height:18px;display:block;flex:none;pointer-events:none;vertical-align:middle}
.control-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:20px;line-height:1}
.control-label{display:inline-block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.btn,.tiny-button,.header-install,.choice-row button,.dialog-actions button{display:inline-flex;align-items:center;justify-content:center;flex-flow:row nowrap;gap:8px;vertical-align:middle;white-space:nowrap;line-height:1.15;max-width:100%;min-width:0;min-height:42px;text-align:center}
.btn-sm{min-height:38px}
.btn .control-icon,.tiny-button .control-icon{align-self:center}
.btn .control-label,.tiny-button .control-label{flex:0 1 auto}
.icon-button,.close-btn{display:inline-flex;justify-content:center;align-items:center;flex:none;line-height:1;padding:0}
.icon-button .ui-icon{width:20px;height:20px}
.close-btn .ui-icon{width:20px;height:20px}
#theme-icon{display:grid;place-items:center;width:22px;height:22px;line-height:1}
#theme-icon svg{width:20px;height:20px}
.header-actions{flex-wrap:nowrap;align-items:center;justify-content:flex-end}
.book-foot span:last-child,.section-head>a{display:inline-flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.book-foot span:last-child .control-icon,.section-head>a .control-icon{width:16px;height:18px}
.book-foot span:last-child .ui-icon,.section-head>a .ui-icon{width:15px;height:15px}
.chapter{align-items:center;gap:10px}
.chapter-text{flex:1 1 auto;min-width:0}
.chapter-chevron{display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:32px;line-height:1;margin-left:auto;color:var(--gold)}
.chapter-chevron .ui-icon{width:18px;height:18px}
.search-field>span{height:100%;width:20px;display:flex;align-items:center;justify-content:center;line-height:1}
.search-field>span .ui-icon{width:19px;height:19px}
select{appearance:none;-webkit-appearance:none;line-height:1.2;padding:0 38px 0 13px;min-height:45px;background-position:right 12px center;background-size:18px;background-repeat:no-repeat;text-overflow:ellipsis}
select option{color:var(--fg);background:var(--surface)}
.reader-tools{align-items:center}
.reader-tools>.button-row{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:7px;min-width:0}
.reader-tools .tag{white-space:nowrap;line-height:1.2}
.reader-pagination{align-items:center;flex-flow:row wrap;gap:8px}
.reader-pagination .button-row{display:flex;align-items:center;gap:8px;min-width:0}
.hadith-card-head{align-items:center;flex-wrap:wrap;gap:8px}
.hadith-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:nowrap;min-width:0;margin-left:auto}
.hadith-no{display:inline-flex;align-items:center;min-height:30px;min-width:0;max-width:100%;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tiny-button{min-height:34px;padding:7px 10px;font-size:11px;gap:5px}
.tiny-button .ui-icon{width:15px;height:15px}
.tiny-button.icon-only-action{width:36px;padding:0}
.mobile-nav a{align-items:center;justify-content:center;min-height:51px;gap:3px;text-align:center;white-space:nowrap;line-height:1.15}
.mn-icon{display:grid;place-items:center;line-height:1;height:24px;width:28px;flex:none}
.mn-icon .ui-icon{width:22px;height:22px}
.dialog-head{align-items:center}
.dialog-head>div{flex:1;min-width:0}
.dialog-actions{align-items:center;gap:8px}
.choice-row{align-items:center}
.choice-row button{min-height:39px}
@media(max-width:680px){
 .header-inner{gap:10px}
 .header-actions{gap:7px}
 .reader-tools{display:flex;flex-flow:column nowrap;align-items:stretch;gap:8px;padding:11px}
 .reader-tools .button-row{width:100%;display:flex;align-items:center;justify-content:flex-start;flex-flow:row wrap;gap:7px}
 .reader-tools .btn{flex:0 1 auto;padding:9px 11px;font-size:11px;max-width:100%}
 .reader-pagination{flex-wrap:wrap;justify-content:space-between}
 .button-row{align-items:center}
 .hero .button-row .btn{flex:0 1 auto}
 .book-tools{align-items:flex-start}
 .book-tools .button-row{justify-content:flex-start}
 .dialog{width:100%;max-height:calc(100dvh - 24px);max-width:540px}
 .floating-panel{padding:12px;align-items:center}
 .dialog-head h2{font-size:clamp(18px,5vw,22px)}
 .dialog-body{min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
 .dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
 .dialog-actions .btn{flex:none;max-width:100%}
}
@media(max-width:365px){
 .hadith-card-head{display:flex;flex-wrap:wrap;gap:7px}
 .hadith-actions{gap:4px;margin-left:auto}
 .tiny-button{padding:6px 8px;font-size:10px;min-height:32px}
 .tiny-button .ui-icon{width:14px;height:14px}
 .reader-tools .btn{padding:8px 9px;font-size:10.5px}
 .reader-tools .button-row{gap:6px}
 .reader-pagination .btn{padding:9px 10px}
 .dialog-actions .btn{padding:9px 11px;font-size:11px}
 .mobile-nav a{font-size:9.5px}
}
@media(max-width:680px){.header-install{display:none}}


/* V3 — iPhone/PWA top header visibility. iOS WebKit sometimes paints the
   descendants of a blurred sticky layer as blurred/occluded on scroll.
   Make the header fully opaque and keep its controls in the safe area. */
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 25;
  background: var(--bg);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  isolation: isolate;
  box-shadow: 0 5px 18px rgba(0,0,0,.12);
}
.header-inner { position: relative; min-width: 0; }
.brand-copy { min-width: 0; }
.brand-copy strong { display: block; }
.header-actions { flex-shrink: 0; }
@media (max-width:680px) {
  .site-header { width:100%; }
  .header-inner { min-height:64px; }
  .header-actions .icon-button { flex:none; }
}
/* Standalone PWAs can draw beneath iOS' status bar with viewport-fit=cover.
   Reserve the safe-area inset rather than hiding the logo under system UI. */
@media (display-mode:standalone) {
  .site-header { padding-top: env(safe-area-inset-top, 0px); }
  html { scroll-padding-top: calc(90px + env(safe-area-inset-top, 0px)); }
}