/* e-quran.com — Useful Tools V15 */
:root{
  --t-bg:#f7f8f3;--t-card:#ffffff;--t-text:#17231d;--t-muted:#647068;--t-line:#dfe6df;
  --t-green:#0f5b45;--t-green-2:#13765a;--t-gold:#b38a2d;--t-gold-soft:#f3ead0;--t-danger:#a13d38;
  --t-shadow:0 14px 42px rgba(25,49,39,.08);--t-radius:22px;--t-max:1160px;
}
html[data-theme="dark"],html.dark,body[data-theme="dark"],body.dark{
  --t-bg:#0e1713;--t-card:#14211b;--t-text:#eef7f1;--t-muted:#a9b8af;--t-line:#2a3b32;
  --t-green:#78c6a3;--t-green-2:#95d6b8;--t-gold:#d9b968;--t-gold-soft:#2b281d;--t-danger:#ef8e86;
  --t-shadow:0 18px 48px rgba(0,0,0,.22)
}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--t-bg);color:var(--t-text);font-family:Vazirmatn,Al_Jazeera,Tahoma,Arial,sans-serif;line-height:1.8}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.tools-shell{max-width:var(--t-max);margin:auto;padding:28px 18px 72px}.tools-breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--t-muted);font-size:.92rem;margin:4px 0 18px}.tools-breadcrumb a:hover{color:var(--t-green)}.tools-hero{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--t-card),color-mix(in srgb,var(--t-gold-soft) 45%,var(--t-card)));border:1px solid var(--t-line);border-radius:30px;padding:34px;box-shadow:var(--t-shadow)}.tools-hero::after{content:"۞";position:absolute;inset-inline-end:26px;top:12px;font-size:92px;color:var(--t-gold);opacity:.08;line-height:1}.tools-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--t-green);font-weight:800;font-size:.92rem}.tools-hero h1{font-size:clamp(1.8rem,4vw,3rem);line-height:1.25;margin:9px 0 10px}.tools-hero p{max-width:780px;color:var(--t-muted);margin:0;font-size:1.05rem}.hero-actions,.tool-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 17px;border-radius:14px;border:1px solid var(--t-line);background:var(--t-card);color:var(--t-text);font-weight:800}.btn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--t-green) 45%,var(--t-line))}.btn-primary{background:var(--t-green);color:#fff;border-color:transparent}.btn-gold{background:var(--t-gold-soft);color:color-mix(in srgb,var(--t-gold) 80%,var(--t-text));border-color:color-mix(in srgb,var(--t-gold) 40%,var(--t-line))}.btn-danger{border-color:color-mix(in srgb,var(--t-danger) 45%,var(--t-line));color:var(--t-danger)}
.tools-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin:22px 0}.searchbox{position:relative}.searchbox input{width:100%;min-height:50px;padding:11px 46px 11px 14px;border:1px solid var(--t-line);border-radius:15px;background:var(--t-card);color:var(--t-text);outline:none}.searchbox::before{content:"⌕";position:absolute;inset-inline-start:15px;top:7px;font-size:1.4rem;color:var(--t-muted)}.filter-row{display:flex;gap:8px;flex-wrap:wrap}.filter-btn{border:1px solid var(--t-line);background:var(--t-card);color:var(--t-text);border-radius:999px;padding:8px 12px;font-weight:700}.filter-btn.is-active{background:var(--t-green);color:#fff;border-color:transparent}
.tools-section{margin-top:34px}.tools-section-head{display:flex;justify-content:space-between;gap:14px;align-items:end;margin-bottom:14px}.tools-section h2{margin:0;font-size:1.45rem}.tools-section-head p{margin:3px 0 0;color:var(--t-muted)}.tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.tool-card{position:relative;display:flex;flex-direction:column;gap:9px;min-height:178px;padding:20px;background:var(--t-card);border:1px solid var(--t-line);border-radius:20px;box-shadow:0 7px 24px rgba(25,49,39,.04);transition:.18s ease}.tool-card:hover{transform:translateY(-3px);box-shadow:var(--t-shadow);border-color:color-mix(in srgb,var(--t-green) 42%,var(--t-line))}.tool-card .icon{font-size:1.65rem}.tool-card h3{font-size:1.08rem;line-height:1.45;margin:0}.tool-card p{color:var(--t-muted);font-size:.92rem;line-height:1.7;margin:0}.tool-card .meta{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px}.badge{display:inline-flex;align-items:center;min-height:28px;border-radius:999px;padding:3px 9px;font-size:.78rem;font-weight:800;background:var(--t-gold-soft);color:color-mix(in srgb,var(--t-gold) 85%,var(--t-text))}.badge.new{background:color-mix(in srgb,var(--t-green) 10%,var(--t-card));color:var(--t-green);border:1px solid color-mix(in srgb,var(--t-green) 24%,var(--t-line))}.arrow{color:var(--t-green);font-weight:900}.tool-card[hidden]{display:none}
.tool-panel{margin-top:22px;background:var(--t-card);border:1px solid var(--t-line);border-radius:var(--t-radius);padding:24px;box-shadow:var(--t-shadow)}.tool-panel h2,.tool-panel h3{margin-top:0}.tool-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field label{font-weight:800;font-size:.92rem}.field small,.help,.muted{color:var(--t-muted)}input[type="text"],input[type="number"],input[type="date"],select,textarea{width:100%;min-height:46px;border:1px solid var(--t-line);border-radius:13px;padding:10px 12px;background:var(--t-bg);color:var(--t-text);outline:none}textarea{min-height:110px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--t-green);box-shadow:0 0 0 3px color-mix(in srgb,var(--t-green) 15%,transparent)}.result-box{margin-top:18px;padding:18px;border-radius:17px;background:color-mix(in srgb,var(--t-green) 7%,var(--t-card));border:1px solid color-mix(in srgb,var(--t-green) 20%,var(--t-line))}.result-box strong.big{display:block;font-size:clamp(1.6rem,5vw,2.6rem);line-height:1.3;color:var(--t-green)}.notice{margin:18px 0;padding:14px 16px;border-radius:15px;background:var(--t-gold-soft);border:1px solid color-mix(in srgb,var(--t-gold) 30%,var(--t-line));font-size:.93rem}.notice.danger{background:color-mix(in srgb,var(--t-danger) 8%,var(--t-card));border-color:color-mix(in srgb,var(--t-danger) 28%,var(--t-line))}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}.stat{padding:14px;border-radius:15px;border:1px solid var(--t-line);background:var(--t-card);text-align:center}.stat b{display:block;font-size:1.28rem;color:var(--t-green)}.stat span{font-size:.78rem;color:var(--t-muted)}.content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.info-card{padding:18px;border:1px solid var(--t-line);border-radius:18px;background:var(--t-card)}.info-card h3{margin:0 0 6px}.info-card p{margin:0;color:var(--t-muted)}.faq details{border-bottom:1px solid var(--t-line);padding:12px 0}.faq summary{cursor:pointer;font-weight:800}.faq details p{color:var(--t-muted);margin:8px 0 0}.related-links{display:flex;flex-wrap:wrap;gap:9px}.related-links a{padding:8px 11px;border-radius:12px;border:1px solid var(--t-line);background:var(--t-card)}.empty-state{display:none;padding:24px;text-align:center;border:1px dashed var(--t-line);border-radius:18px;color:var(--t-muted)}.empty-state.show{display:block}
.prayer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.prayer-time{padding:14px;border:1px solid var(--t-line);border-radius:16px;background:var(--t-bg);text-align:center}.prayer-time b{display:block;font-size:1.25rem}.prayer-time.next{border-color:var(--t-gold);background:var(--t-gold-soft)}.compass{width:min(310px,80vw);aspect-ratio:1;margin:20px auto;border:12px solid var(--t-line);border-radius:50%;position:relative;background:radial-gradient(circle,var(--t-card) 0 58%,var(--t-bg) 59%)}.compass::before{content:"N";position:absolute;top:8px;left:50%;transform:translateX(-50%);font-weight:900;color:var(--t-muted)}.needle{position:absolute;left:50%;top:50%;width:6px;height:41%;transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(0deg);border-radius:999px;background:linear-gradient(var(--t-gold) 0 48%,var(--t-green) 49% 100%);transition:transform .2s ease}.needle::after{content:"◆";position:absolute;top:-18px;left:50%;transform:translateX(-50%);color:var(--t-gold);font-size:1.2rem}.calendar-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:14px}.cal-cell{min-height:74px;padding:8px;border:1px solid var(--t-line);border-radius:13px;background:var(--t-bg);font-size:.86rem}.cal-cell.head{min-height:auto;background:transparent;border:0;text-align:center;font-weight:800}.cal-cell.today{border-color:var(--t-gold);background:var(--t-gold-soft)}.tasbeeh-display{text-align:center;padding:24px}.tasbeeh-count{font-size:clamp(4rem,14vw,8rem);line-height:1;color:var(--t-green);font-weight:900;font-variant-numeric:tabular-nums}.tasbeeh-main{width:min(220px,70vw);aspect-ratio:1;border-radius:50%;border:0;background:var(--t-green);color:#fff;font-size:1.35rem;font-weight:900;box-shadow:0 18px 40px color-mix(in srgb,var(--t-green) 25%,transparent)}.progress{height:12px;border-radius:99px;background:var(--t-line);overflow:hidden}.progress>span{display:block;height:100%;width:0;background:var(--t-green);transition:width .25s}.name-list,.check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:15px}.name-card,.check-card{padding:14px;border:1px solid var(--t-line);border-radius:15px;background:var(--t-bg)}.name-card b{color:var(--t-green)}.steps{counter-reset:step;display:grid;gap:12px}.step{position:relative;padding:16px 58px 16px 16px;border:1px solid var(--t-line);border-radius:16px;background:var(--t-bg)}.step::before{counter-increment:step;content:counter(step);position:absolute;right:16px;top:15px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--t-green);color:#fff;font-weight:900}.share-plan{white-space:pre-wrap;direction:rtl;background:var(--t-bg);border:1px dashed var(--t-line);padding:14px;border-radius:14px}.footer-note{margin-top:34px;text-align:center;color:var(--t-muted);font-size:.9rem}
@media(max-width:900px){.tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.tools-shell{padding:18px 12px 56px}.tools-hero{padding:24px 19px;border-radius:23px}.tools-toolbar{grid-template-columns:1fr}.tools-grid,.content-grid,.tool-form,.name-list,.check-list{grid-template-columns:1fr}.tools-section-head{align-items:start;flex-direction:column}.prayer-grid{grid-template-columns:repeat(2,1fr)}.calendar-grid{gap:3px}.cal-cell{min-height:57px;padding:5px;font-size:.75rem}.hero-actions .btn,.tool-actions .btn{flex:1 1 auto}}
@media(max-width:360px){.prayer-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.btn{padding-inline:12px}.tools-hero h1{font-size:1.7rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* V15 Tools expansion */
.use-filter-row{margin-top:10px}.use-filter-btn{border:1px solid var(--t-line);background:color-mix(in srgb,var(--t-card) 88%,var(--t-gold-soft));color:var(--t-text);border-radius:999px;padding:8px 12px;font-weight:700}.use-filter-btn.is-active{background:var(--t-gold-soft);border-color:color-mix(in srgb,var(--t-gold) 50%,var(--t-line));color:color-mix(in srgb,var(--t-gold) 80%,var(--t-text))}.featured-tools{margin:22px 0}.featured-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.featured-card{display:flex;gap:14px;align-items:center;padding:18px;border:1px solid color-mix(in srgb,var(--t-gold) 28%,var(--t-line));border-radius:19px;background:linear-gradient(135deg,var(--t-card),color-mix(in srgb,var(--t-gold-soft) 45%,var(--t-card)));box-shadow:0 8px 24px rgba(25,49,39,.05)}.featured-card>span{font-size:2rem}.featured-card h3,.featured-card p{margin:0}.featured-card p{color:var(--t-muted);font-size:.88rem;margin-top:4px}.privacy-pill{display:inline-flex;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--t-green) 9%,var(--t-card));border:1px solid color-mix(in srgb,var(--t-green) 22%,var(--t-line));color:var(--t-green);font-weight:800;font-size:.8rem}.daily-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.smart-link{transition:.18s ease}.smart-link:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--t-green) 38%,var(--t-line))}.ramadan-countdown{text-align:center;padding:22px;margin-bottom:16px;border-radius:18px;background:var(--t-gold-soft);border:1px solid color-mix(in srgb,var(--t-gold) 28%,var(--t-line))}.ramadan-countdown span,.ramadan-countdown small{display:block}.ramadan-countdown strong{display:block;font-size:clamp(1.6rem,5vw,2.5rem);margin:5px 0;color:var(--t-green)}.guide-step{position:relative;min-height:210px;padding:30px 28px;margin:16px 0;border:1px solid var(--t-line);border-radius:22px;background:var(--t-bg)}.guide-step h2{font-size:1.65rem;margin:8px 0}.guide-step p{font-size:1.05rem;color:var(--t-muted)}.step-number{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--t-green);color:#fff;font-weight:900}.pilgrim-list{display:grid;gap:9px;margin:16px 0}.pilgrim-item{display:flex;gap:10px;align-items:center;padding:13px 14px;border:1px solid var(--t-line);border-radius:14px;background:var(--t-bg);cursor:pointer}.pilgrim-item input{width:20px;height:20px}.need-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}.need-card{min-height:110px;border:1px solid var(--t-line);border-radius:17px;background:var(--t-bg);color:var(--t-text);font-weight:800;cursor:pointer}.need-card span{display:block;font-size:1.7rem;margin-bottom:6px}.need-card:hover{border-color:var(--t-green)}@media(max-width:900px){.featured-grid{grid-template-columns:1fr 1fr}.need-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.featured-grid{grid-template-columns:1fr}.daily-head{flex-direction:column}.need-grid{grid-template-columns:1fr 1fr}}

/* Useful Tools V2 — local-first hub, favorites, PWA and richer utilities */
.eq-tools-toast{position:fixed;z-index:99999;left:50%;bottom:24px;transform:translate(-50%,12px);background:#17231d;color:#fff;padding:10px 14px;border-radius:12px;font:700 14px/1.5 Vazirmatn,Tahoma,sans-serif;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 12px 30px rgba(0,0,0,.22)}.eq-tools-toast.show{opacity:1;transform:translate(-50%,0)}
.daily-hub{margin:22px 0 8px;padding:22px;border:1px solid color-mix(in srgb,var(--t-green) 24%,var(--t-line));border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--t-green) 7%,var(--t-card)),var(--t-card));box-shadow:var(--t-shadow)}.daily-hub-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.daily-hub h2{margin:3px 0 3px;font-size:1.45rem}.daily-hub p{margin:0;color:var(--t-muted)}.hub-status{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.status-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--t-line);border-radius:999px;background:var(--t-card);font-size:.8rem;font-weight:800;color:var(--t-muted)}.status-pill.offline{color:var(--t-gold)}.daily-hub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}.hub-card{display:block;padding:15px;border:1px solid var(--t-line);border-radius:17px;background:var(--t-card);min-height:124px;transition:.18s}.hub-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--t-green) 35%,var(--t-line))}.hub-card span{font-size:1.25rem}.hub-card b{display:block;margin-top:7px;line-height:1.45}.hub-card small{display:block;color:var(--t-muted);margin-top:3px;line-height:1.5}.hub-achievement{margin-top:12px;padding:10px 13px;border-radius:14px;background:var(--t-gold-soft);color:color-mix(in srgb,var(--t-gold) 78%,var(--t-text));font-weight:800;font-size:.9rem}.hub-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.my-tools{margin-top:26px}.my-tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mini-tool{display:flex;gap:11px;align-items:flex-start;padding:13px;border:1px solid var(--t-line);border-radius:16px;background:var(--t-card)}.mini-tool>span{font-size:1.25rem}.mini-tool b,.mini-tool small{display:block}.mini-tool small{color:var(--t-muted);font-size:.82rem;line-height:1.55;margin-top:2px}.my-tools-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}.my-tools-columns h3{margin:0 0 10px}.my-tools-empty{margin:0;padding:12px;border:1px dashed var(--t-line);border-radius:14px}
.tool-card-wrap{position:relative;min-width:0}.tool-card-wrap .tool-card{height:100%}.card-fav{position:absolute;z-index:3;top:12px;inset-inline-end:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--t-line);background:color-mix(in srgb,var(--t-card) 92%,transparent);color:var(--t-muted);font-size:1.15rem;line-height:1;display:grid;place-items:center;box-shadow:0 3px 12px rgba(0,0,0,.06)}.card-fav:hover,.card-fav.active{color:var(--t-gold);border-color:color-mix(in srgb,var(--t-gold) 50%,var(--t-line));background:var(--t-gold-soft)}.tool-card-wrap[hidden]{display:none}.tool-favorite-btn[aria-pressed="true"]{color:color-mix(in srgb,var(--t-gold) 82%,var(--t-text));border-color:color-mix(in srgb,var(--t-gold) 50%,var(--t-line));background:var(--t-gold-soft)}
.advanced-box{margin-top:14px;border:1px solid var(--t-line);border-radius:16px;background:var(--t-bg);overflow:hidden}.advanced-box summary{cursor:pointer;padding:12px 14px;font-weight:800}.advanced-box .advanced-body{padding:0 14px 14px}.offset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.offset-grid .field label{font-size:.82rem}.countdown-box{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;padding:14px 16px;border:1px solid color-mix(in srgb,var(--t-gold) 32%,var(--t-line));border-radius:16px;background:var(--t-gold-soft)}.countdown-box strong{font-size:1.25rem}.monthly-wrap{overflow:auto;margin-top:14px}.monthly-table{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}.monthly-table th,.monthly-table td{padding:8px 10px;border-bottom:1px solid var(--t-line);text-align:center;font-size:.85rem}.monthly-table th{position:sticky;top:0;background:var(--t-card);z-index:1}.monthly-table tr.today-row td{background:var(--t-gold-soft)}
.compass-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}.compass-meta .stat{padding:10px}.calibration-tip{margin-top:10px;font-size:.88rem;color:var(--t-muted)}
.achievement-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}.achievement-card{padding:14px;border:1px solid var(--t-line);border-radius:16px;background:var(--t-bg)}.achievement-card b{display:block;color:var(--t-green);font-size:1.15rem}.achievement-card span{font-size:.82rem;color:var(--t-muted)}
.calc-steps{margin:12px 0 0;padding-inline-start:22px;color:var(--t-muted)}.calc-steps li{margin:4px 0}.result-actions{margin-top:10px}.share-plan-row{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}.privacy-note{display:flex;gap:8px;align-items:flex-start;padding:12px 14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--t-green) 22%,var(--t-line));background:color-mix(in srgb,var(--t-green) 5%,var(--t-card));color:var(--t-muted);font-size:.9rem}
.season-banner{margin:14px 0;padding:15px 17px;border-radius:17px;background:linear-gradient(135deg,var(--t-gold-soft),color-mix(in srgb,var(--t-green) 7%,var(--t-card)));border:1px solid color-mix(in srgb,var(--t-gold) 30%,var(--t-line))}.season-banner b{display:block;font-size:1.05rem}.season-banner p{margin:3px 0 0;color:var(--t-muted)}
@media(max-width:900px){.daily-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.my-tools-columns{grid-template-columns:1fr}.offset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.achievement-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.daily-hub{padding:17px}.daily-hub-head{display:block}.hub-status{justify-content:flex-start;margin-top:10px}.daily-hub-grid{grid-template-columns:1fr 1fr}.my-tools-grid{grid-template-columns:1fr}.offset-grid{grid-template-columns:1fr}.compass-meta,.achievement-grid{grid-template-columns:1fr}.countdown-box{display:block}.countdown-box strong{display:block;margin-top:4px}.tool-card{padding-top:48px}}
@media(max-width:360px){.daily-hub-grid{grid-template-columns:1fr}.hub-actions .btn{width:100%}}
@media print{header#header,footer#footer,.tools-breadcrumb,.tools-hero .hero-actions,.tool-actions,.result-actions,.faq,.footer-note,.card-fav{display:none!important}.tools-shell{max-width:none;padding:0}.tools-hero,.tool-panel{box-shadow:none;border-color:#bbb}.tool-panel{break-inside:avoid}body{background:#fff;color:#111}}

/* Production final: search-demand, featured badges, category pages and mobile section navigation */
.popular-tools{margin:24px 0 12px}.popular-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.popular-card{position:relative;display:flex;flex-direction:column;min-height:190px;padding:20px;border:1px solid color-mix(in srgb,var(--t-danger) 24%,var(--t-line));border-radius:20px;background:linear-gradient(145deg,var(--t-card),color-mix(in srgb,var(--t-danger) 4%,var(--t-card)));box-shadow:0 8px 26px rgba(25,49,39,.05);transition:.18s}.popular-card:hover{transform:translateY(-3px);box-shadow:var(--t-shadow)}.popular-card .popular-fire{align-self:flex-start;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--t-danger) 12%,var(--t-card));color:var(--t-danger);font-weight:900;font-size:.76rem;border:1px solid color-mix(in srgb,var(--t-danger) 24%,var(--t-line))}.popular-card .icon{font-size:1.6rem;margin-top:13px}.popular-card h3{margin:5px 0 3px}.popular-card p{margin:0;color:var(--t-muted);font-size:.9rem}.popular-card .arrow{margin-top:auto;padding-top:10px}.badge.popular-badge{background:color-mix(in srgb,var(--t-danger) 11%,var(--t-card));color:var(--t-danger);border:1px solid color-mix(in srgb,var(--t-danger) 24%,var(--t-line))}.badge.featured-badge{background:linear-gradient(135deg,var(--t-gold-soft),color-mix(in srgb,var(--t-gold) 10%,var(--t-card)));color:color-mix(in srgb,var(--t-gold) 84%,var(--t-text));border:1px solid color-mix(in srgb,var(--t-gold) 42%,var(--t-line))}.badge-stack{display:flex;gap:5px;flex-wrap:wrap}.category-directory{margin:26px 0}.category-directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.category-tile{display:flex;gap:13px;padding:17px;border:1px solid var(--t-line);border-radius:18px;background:var(--t-card);transition:.18s}.category-tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--t-green) 38%,var(--t-line));box-shadow:var(--t-shadow)}.category-tile>span{font-size:1.6rem}.category-tile h3,.category-tile p{margin:0}.category-tile p{font-size:.87rem;color:var(--t-muted);margin:2px 0 5px}.category-tile b{font-size:.82rem;color:var(--t-green)}.section-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.category-open-link{display:inline-flex;align-items:center;min-height:34px;padding:5px 10px;border:1px solid var(--t-line);border-radius:999px;background:var(--t-card);font-size:.8rem;font-weight:900;color:var(--t-green)}.category-open-link:hover{border-color:var(--t-green)}.mobile-groups-note{display:none;margin:16px 0 2px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--t-green) 6%,var(--t-card));border:1px solid color-mix(in srgb,var(--t-green) 18%,var(--t-line));color:var(--t-muted)}.category-hero{margin-bottom:24px}.category-only-section{margin-top:22px}.category-explainer p{margin:0;color:var(--t-muted)}.related-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.related-category-grid a{display:flex;gap:9px;align-items:center;padding:13px;border:1px solid var(--t-line);border-radius:15px;background:var(--t-card)}.related-category-grid span{font-size:1.2rem}.category-tool-card .meta{align-items:flex-end}.tool-category-shortcuts{content-visibility:auto;contain-intrinsic-size:300px}.tools-section[data-group]{content-visibility:auto;contain-intrinsic-size:650px}
@media(max-width:900px){.popular-grid,.category-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.related-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.popular-grid,.category-directory-grid{grid-template-columns:1fr}.mobile-groups-note{display:block}.tools-toolbar{display:block}.tools-toolbar .filter-row{overflow-x:auto;flex-wrap:nowrap;padding-bottom:5px;scrollbar-width:none}.tools-toolbar .filter-row::-webkit-scrollbar{display:none}.tools-section[data-group]{margin-top:28px;padding-top:4px;border-top:1px solid var(--t-line)}.tools-section[data-group] .tools-section-head{align-items:flex-start}.tools-section[data-group] .tools-grid{grid-template-columns:1fr}.section-head-actions{justify-content:flex-start}.category-open-link{min-height:38px}.popular-card{min-height:168px}.related-category-grid{grid-template-columns:1fr}.category-only-section .tools-grid{grid-template-columns:1fr}.category-directory-grid .category-tile{padding:15px}}


/* Homepage polish — professional hero + very soft category backgrounds */
.tools-hero-pro{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(220px,.65fr);
  align-items:center;
  gap:30px;
  min-height:330px;
  padding:42px 44px;
  isolation:isolate;
  background:
    radial-gradient(circle at 12% 12%,rgba(179,138,45,.12),transparent 34%),
    radial-gradient(circle at 88% 82%,rgba(15,91,69,.11),transparent 38%),
    linear-gradient(145deg,var(--t-card),color-mix(in srgb,var(--t-green) 3%,var(--t-card)));
  border-color:color-mix(in srgb,var(--t-green) 16%,var(--t-line));
}
.tools-hero-pro::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.34;background-image:linear-gradient(90deg,color-mix(in srgb,var(--t-line) 42%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--t-line) 42%,transparent) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to left,#000,transparent 76%)}
.tools-hero-pro::after{content:"";position:absolute;width:310px;height:310px;inset-inline-end:-92px;top:-92px;border:1px solid color-mix(in srgb,var(--t-gold) 28%,transparent);border-radius:50%;opacity:.55}
.tools-hero-copy{position:relative;z-index:2}.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:999px;background:color-mix(in srgb,var(--t-green) 8%,var(--t-card));border:1px solid color-mix(in srgb,var(--t-green) 18%,var(--t-line));color:var(--t-green);font-size:.88rem;font-weight:900}.hero-eyebrow span{color:var(--t-gold);font-size:1.08rem}.tools-hero-pro h1{max-width:720px;margin:13px 0 10px;font-size:clamp(2rem,4.5vw,3.35rem);letter-spacing:-.02em}.tools-hero-pro p{max-width:720px;font-size:1.06rem;line-height:1.9}.hero-highlights{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px}.hero-highlights span{display:inline-flex;align-items:center;min-height:34px;padding:5px 10px;border:1px solid var(--t-line);border-radius:999px;background:color-mix(in srgb,var(--t-card) 86%,transparent);font-size:.82rem;font-weight:800;color:var(--t-muted)}
.tools-hero-visual{position:relative;min-height:235px;display:grid;place-items:center}.hero-mark{width:126px;aspect-ratio:1;display:grid;place-items:center;border-radius:34px;background:linear-gradient(145deg,var(--t-green),color-mix(in srgb,var(--t-green) 70%,#173b30));color:#fff;font-size:4rem;box-shadow:0 22px 55px color-mix(in srgb,var(--t-green) 24%,transparent);transform:rotate(4deg)}.hero-orbit{position:absolute;width:54px;aspect-ratio:1;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--t-gold) 27%,var(--t-line));border-radius:17px;background:color-mix(in srgb,var(--t-card) 92%,transparent);box-shadow:0 10px 26px rgba(25,49,39,.08);font-size:1.45rem}.hero-orbit-1{top:14px;inset-inline-start:12px;transform:rotate(-5deg)}.hero-orbit-2{top:24px;inset-inline-end:5px;transform:rotate(7deg)}.hero-orbit-3{bottom:20px;inset-inline-start:2px;transform:rotate(6deg)}.hero-orbit-4{bottom:7px;inset-inline-end:26px;transform:rotate(-7deg)}

.tools-section[data-group]{padding:23px;border:1px solid transparent;border-radius:24px}
.tools-section[data-group="prayer"]{background:rgba(21,122,91,.045);border-color:rgba(21,122,91,.10)}
.tools-section[data-group="quran"]{background:rgba(179,138,45,.05);border-color:rgba(179,138,45,.11)}
.tools-section[data-group="memorize"]{background:rgba(74,112,170,.045);border-color:rgba(74,112,170,.10)}
.tools-section[data-group="dhikr"]{background:rgba(151,91,113,.042);border-color:rgba(151,91,113,.09)}
.tools-section[data-group="hadith"]{background:rgba(52,126,126,.042);border-color:rgba(52,126,126,.09)}
.tools-section[data-group="calc"]{background:rgba(188,126,47,.045);border-color:rgba(188,126,47,.10)}
.tools-section[data-group="family"]{background:rgba(112,91,151,.042);border-color:rgba(112,91,151,.09)}
.tools-section[data-group] .tool-card{background:color-mix(in srgb,var(--t-card) 95%,transparent)}
.category-directory-grid .category-tile:nth-child(7n+1){background:color-mix(in srgb,#4f9f82 5%,var(--t-card))}.category-directory-grid .category-tile:nth-child(7n+2){background:color-mix(in srgb,#c09945 5%,var(--t-card))}.category-directory-grid .category-tile:nth-child(7n+3){background:color-mix(in srgb,#6382b5 5%,var(--t-card))}.category-directory-grid .category-tile:nth-child(7n+4){background:color-mix(in srgb,#9b7182 5%,var(--t-card))}.category-directory-grid .category-tile:nth-child(7n+5){background:color-mix(in srgb,#4d9494 5%,var(--t-card))}.category-directory-grid .category-tile:nth-child(7n+6){background:color-mix(in srgb,#bc873f 5%,var(--t-card))}.category-directory-grid .category-tile:nth-child(7n){background:color-mix(in srgb,#806ca3 5%,var(--t-card))}

html[data-theme="dark"] .tools-section[data-group],html.dark .tools-section[data-group],body[data-theme="dark"] .tools-section[data-group],body.dark .tools-section[data-group]{border-color:color-mix(in srgb,var(--t-line) 82%,transparent)}
@media(max-width:900px){.tools-hero-pro{grid-template-columns:1fr;padding:34px}.tools-hero-visual{display:none}}
@media(max-width:640px){.tools-hero-pro{min-height:auto;padding:26px 20px;border-radius:24px}.tools-hero-pro h1{font-size:2rem}.hero-highlights{gap:6px}.hero-highlights span{font-size:.77rem}.tools-section[data-group]{padding:16px 12px;border-radius:20px}.tools-section[data-group]{margin-top:24px}.tools-section[data-group] .tools-grid{gap:11px}}
@media(max-width:360px){.tools-hero-pro h1{font-size:1.75rem}.hero-highlights span{width:100%;justify-content:center}}


/* 2026-09 mobile density + theme stability polish */
/* Hero: stronger 35% visual color presence, while preserving contrast. */
.tools-hero-pro{
  background:
    radial-gradient(circle at 12% 14%,rgba(217,185,104,.24),transparent 34%),
    radial-gradient(circle at 88% 84%,rgba(32,143,102,.35),transparent 40%),
    linear-gradient(138deg,#10382d 0%,#155740 58%,#665a2d 118%);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 20px 52px rgba(10,44,33,.22);
}
.tools-hero-pro h1{color:#fff}
.tools-hero-pro p{color:rgba(255,255,255,.80)}
.tools-hero-pro .hero-eyebrow{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.15);color:#f6fbf8}
.tools-hero-pro .hero-eyebrow span{color:#e3c879}
.tools-hero-pro .hero-highlights span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.13);color:rgba(255,255,255,.84)}
.tools-hero-pro .hero-actions .btn:not(.btn-primary){background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18);color:#fff}
.tools-hero-pro .hero-actions .btn:not(.btn-primary):hover{background:rgba(255,255,255,.15)}
.tools-hero-pro .hero-mark{background:linear-gradient(145deg,#0d4b38,#177458);box-shadow:0 22px 55px rgba(5,34,25,.28)}
.tools-hero-pro .hero-orbit{background:rgba(255,255,255,.92);border-color:rgba(217,185,104,.28)}

@media(max-width:640px){
  .tools-shell{padding:16px 10px 44px}
  .tools-breadcrumb{gap:6px;font-size:.80rem;margin:2px 2px 10px}

  /* Compact hero so the user reaches the tools quickly. */
  .tools-hero-pro{padding:20px 16px;border-radius:20px;gap:0}
  .tools-hero-pro h1{font-size:1.72rem;line-height:1.28;margin:9px 0 7px}
  .tools-hero-pro p{font-size:.90rem;line-height:1.62}
  .hero-eyebrow{padding:4px 9px;font-size:.77rem}
  .hero-highlights{margin-top:11px;gap:5px}
  .hero-highlights span{min-height:28px;padding:3px 8px;font-size:.70rem}
  .tools-hero-pro .hero-actions{margin-top:13px;gap:7px}
  .tools-hero-pro .hero-actions .btn{min-height:38px;padding:7px 11px;border-radius:11px;font-size:.82rem}

  .tools-toolbar{margin:14px 0 10px}
  .searchbox input{min-height:44px;border-radius:13px;font-size:.88rem}
  .filter-row{gap:6px;margin-top:8px}
  .filter-btn{padding:6px 9px;font-size:.76rem}

  /* Most-viewed tools stay prominent without consuming several screens. */
  .popular-grid{
    display:grid;
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:minmax(248px,82vw);
    gap:9px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:inline mandatory;
    padding:2px 1px 7px;
    scrollbar-width:none;
  }
  .popular-grid::-webkit-scrollbar{display:none}
  .popular-card{min-height:142px;padding:14px;border-radius:16px;scroll-snap-align:start}
  .popular-card .popular-fire{padding:2px 7px;font-size:.69rem}
  .popular-card .icon{font-size:1.34rem;margin-top:7px}
  .popular-card h3{font-size:1rem;margin:3px 0 1px}
  .popular-card p{font-size:.78rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* Category directory: two compact tiles per row on normal phones. */
  .category-directory{margin:16px 0}
  .category-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .category-directory-grid .category-tile{min-height:70px;padding:9px 10px;border-radius:14px;gap:8px;align-items:center}
  .category-tile>span{font-size:1.28rem}
  .category-tile h3{font-size:.85rem;line-height:1.3}
  .category-tile p{display:none}
  .category-tile b{font-size:.70rem}
  .mobile-groups-note{margin:10px 0 0;padding:9px 11px;font-size:.78rem;line-height:1.5}

  /* Section blocks are intentionally dense on phones. */
  .tools-section[data-group]{margin-top:14px;padding:11px 9px;border-radius:16px}
  .tools-section[data-group] .tools-section-head{margin-bottom:8px;gap:7px;align-items:center}
  .tools-section[data-group] .tools-section-head>div:first-child{min-width:0}
  .tools-section[data-group] h2{font-size:1.08rem;line-height:1.3}
  .tools-section[data-group] .tools-section-head p{font-size:.74rem;line-height:1.35;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62vw}
  .section-head-actions{gap:5px;flex-wrap:nowrap}
  .section-head-actions>.badge{display:none}
  .category-open-link{min-height:30px;padding:4px 8px;border-radius:10px;font-size:.70rem;white-space:nowrap}
  .tools-section[data-group] .tools-grid{gap:7px}

  /* Tool cards become compact horizontal rows: explanation remains, but only one line. */
  .tools-section[data-group] .tool-card,
  .category-only-section .tool-card{
    display:grid;
    grid-template-columns:32px minmax(0,1fr) auto;
    grid-template-areas:"icon title meta" "icon desc meta";
    align-items:center;
    gap:1px 8px;
    min-height:74px;
    padding:9px 10px;
    border-radius:14px;
    box-shadow:0 3px 12px rgba(25,49,39,.035);
  }
  .tools-section[data-group] .tool-card:hover,
  .category-only-section .tool-card:hover{transform:none}
  .tools-section[data-group] .tool-card .icon,
  .category-only-section .tool-card .icon{grid-area:icon;font-size:1.23rem;text-align:center}
  .tools-section[data-group] .tool-card h3,
  .category-only-section .tool-card h3{grid-area:title;font-size:.92rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tools-section[data-group] .tool-card p,
  .category-only-section .tool-card p{grid-area:desc;font-size:.72rem;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tools-section[data-group] .tool-card .meta,
  .category-only-section .tool-card .meta{grid-area:meta;margin:0;align-self:center;justify-self:end;gap:4px}
  .tools-section[data-group] .tool-card .meta>.badge:not(.popular-badge):not(.featured-badge),
  .category-only-section .tool-card .meta>.badge:not(.popular-badge):not(.featured-badge){display:none}
  .tools-section[data-group] .tool-card .popular-badge,
  .tools-section[data-group] .tool-card .featured-badge,
  .category-only-section .tool-card .popular-badge,
  .category-only-section .tool-card .featured-badge{min-height:22px;padding:2px 5px;font-size:.61rem}
  .tools-section[data-group] .tool-card .arrow,
  .category-only-section .tool-card .arrow{font-size:.93rem}

  .tool-panel{margin-top:14px;padding:15px 12px;border-radius:16px}
  .tool-panel h2{font-size:1.12rem}
  .content-grid{gap:8px}
  .info-card{padding:11px;border-radius:13px}
  .info-card h3{font-size:.94rem}
  .info-card p{font-size:.77rem;line-height:1.5}
  .footer-note{font-size:.74rem;line-height:1.5}
}

@media(max-width:350px){
  .category-directory-grid{grid-template-columns:1fr}
  .tools-hero-pro h1{font-size:1.58rem}
  .tools-section[data-group] .tools-section-head p{display:none}
  .popular-grid{grid-auto-columns:88vw}
}

/* 2026-09 final homepage refinement: clearer hero actions, compact popular heading, theme-aware hero */
.tools-hero-pro .hero-actions .btn-primary{
  background:linear-gradient(135deg,#f2d889,#e6bf5a);
  border-color:rgba(255,244,208,.88);
  color:#17392e;
  box-shadow:0 9px 24px rgba(9,38,29,.22),inset 0 1px 0 rgba(255,255,255,.42);
  font-weight:900;
}
.tools-hero-pro .hero-actions .btn-primary:hover{
  background:linear-gradient(135deg,#f7e2a4,#ebc86b);
  border-color:#fff2c7;
  color:#102f25;
  transform:translateY(-1px);
}
.tools-hero-pro .hero-actions .btn:not(.btn-primary){
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.30);
  color:#fff;
  backdrop-filter:blur(8px);
}
.tools-hero-pro .hero-actions .btn:not(.btn-primary):hover{background:rgba(255,255,255,.23);border-color:rgba(255,255,255,.40)}

/* The hero follows the site's theme instead of keeping one fixed appearance. */
html[data-theme="dark"] .tools-hero-pro,
html.dark .tools-hero-pro,
body[data-theme="dark"] .tools-hero-pro,
body.dark .tools-hero-pro{
  background:
    radial-gradient(circle at 12% 14%,rgba(214,176,78,.16),transparent 34%),
    radial-gradient(circle at 88% 84%,rgba(29,116,84,.25),transparent 40%),
    linear-gradient(138deg,#0a241d 0%,#103a2c 58%,#413b21 118%);
  border-color:rgba(233,211,151,.14);
  box-shadow:0 20px 52px rgba(0,0,0,.30);
}
html[data-theme="dark"] .tools-hero-pro .hero-eyebrow,
html.dark .tools-hero-pro .hero-eyebrow,
body[data-theme="dark"] .tools-hero-pro .hero-eyebrow,
body.dark .tools-hero-pro .hero-eyebrow{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .tools-hero-pro .hero-highlights span,
html.dark .tools-hero-pro .hero-highlights span,
body[data-theme="dark"] .tools-hero-pro .hero-highlights span,
body.dark .tools-hero-pro .hero-highlights span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.11);color:rgba(255,255,255,.80)}
html[data-theme="dark"] .tools-hero-pro .hero-actions .btn-primary,
html.dark .tools-hero-pro .hero-actions .btn-primary,
body[data-theme="dark"] .tools-hero-pro .hero-actions .btn-primary,
body.dark .tools-hero-pro .hero-actions .btn-primary{
  background:linear-gradient(135deg,#dfbd67,#cfa54b);
  border-color:rgba(244,217,143,.70);
  color:#102b22;
  box-shadow:0 9px 24px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.25);
}

/* Remove the old bulky demand explanation; keep only the useful heading. */
.popular-tools>.tools-section-head{margin-bottom:12px;align-items:center}
.popular-tools>.tools-section-head>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.popular-tools>.tools-section-head h2{margin:0}
.popular-scroll-hint{display:none;color:var(--t-muted);font-size:.74rem;font-weight:800;white-space:nowrap}

@media(max-width:640px){
  .popular-tools>.tools-section-head{margin-bottom:7px}
  .popular-tools>.tools-section-head>div{width:100%;justify-content:space-between;gap:8px}
  .popular-tools>.tools-section-head h2{font-size:1.06rem}
  .popular-scroll-hint{display:inline-flex;align-items:center}
}