:root{--green:#0b5d43;--green2:#0a4937;--ink:#15352d;--muted:#738079;--cream:#faf8f2;--line:#ebe7dd;--gold:#c8a455;--shadow:0 10px 30px rgba(17,62,49,.08)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Tahoma,"Segoe UI",Arial,sans-serif;background:#fff;color:var(--ink);line-height:1.7}button,input{font:inherit}.topbar{height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:0 clamp(20px,5vw,72px);background:rgba(255,255,255,.97);border-bottom:1px solid #eee;position:sticky;top:0;z-index:50}.brand{justify-self:start;display:flex;align-items:center;gap:10px;color:var(--green);text-decoration:none;direction:ltr;font-weight:700}.brand img{width:42px;height:42px}.brand span{display:flex;gap:5px;align-items:baseline}.brand b{font-size:.84em}.main-nav{display:flex;gap:32px;align-items:center}.main-nav a{color:#2a3935;text-decoration:none;font-size:14px;padding:27px 0 22px;border-bottom:3px solid transparent}.main-nav a.active,.main-nav a:hover{color:var(--green);border-color:var(--green)}.order-toggle{justify-self:end;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:10px 16px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.02);display:flex;gap:8px;align-items:center}.order-toggle:hover{border-color:#cfc7b7}.order-icon{color:var(--green);font-weight:700}.hero{height:clamp(560px,68vh,760px);min-height:560px;position:relative;overflow:hidden;display:grid;place-items:center}.hero-art{position:absolute;inset:0;background-image:url('../images/hero/hero-4k.webp');background-size:min(100%,3840px) auto;background-repeat:no-repeat;background-position:center center}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,24,20,.25),rgba(4,24,20,.52),rgba(4,24,20,.18))}.hero-content{position:relative;z-index:2;width:min(780px,90%);text-align:center;color:#fff;padding:50px 10px}.eyebrow{font-size:12px;letter-spacing:.12em;opacity:.72;margin:0 0 8px;direction:ltr}.hero h1{font-size:clamp(35px,5vw,58px);margin:0 0 10px;line-height:1.3}.hero-copy{max-width:680px;margin:0 auto 26px;color:#f0f0eb;font-size:17px}.language-pills{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:24px}.lang{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.11);color:#fff;border-radius:999px;padding:10px 22px;cursor:pointer;backdrop-filter:blur(5px)}.lang.active,.lang:hover{background:#fff;color:#15352d}.search-box{height:60px;background:#fff;border-radius:14px;display:flex;align-items:center;padding:0 20px;max-width:650px;margin:auto;box-shadow:0 15px 35px rgba(0,0,0,.18);color:var(--green)}.search-box input{border:0;outline:0;flex:1;width:100%;font-size:15px;text-align:right;background:transparent}.search-box span{font-size:28px;line-height:1}.quick-actions{padding:38px clamp(20px,5vw,72px);display:grid;grid-template-columns:repeat(4,1fr);gap:18px;background:var(--cream);border-bottom:1px solid var(--line)}.action-card{min-height:104px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px;display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;text-decoration:none;color:var(--ink)}.action-icon{font-size:32px;color:var(--green);text-align:center}.action-card span:nth-child(2){display:flex;flex-direction:column}.action-card b{font-size:15px}.action-card small{font-size:12px;color:var(--muted)}.action-card i{font-style:normal;font-size:26px;color:var(--green)}.surah-section{padding:50px clamp(20px,5vw,72px) 70px;background:#fff}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:26px}.section-kicker{color:var(--green);font-size:12px;font-weight:700;margin:0 0 2px}.section-heading h2{margin:0;font-size:28px}.section-heading p:last-child{margin:3px 0 0;color:var(--muted);font-size:14px}.view-switch{display:flex;gap:8px;direction:ltr}.view-switch button{width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:#fff;color:#65726d}.view-switch button.active{background:var(--green);color:white;border-color:var(--green)}.surah-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.surah-card{position:relative;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(31,61,52,.045);transition:.22s}.surah-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#dcd4c5}.surah-card[hidden]{display:none}.surah-main{display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:center;padding:19px 16px 17px 66px;color:inherit;text-decoration:none;min-height:125px}.number-stack{text-align:center}.main-number{width:42px;height:42px;border-radius:50%;background:var(--green);color:white;display:grid;place-items:center;font-weight:700;margin:auto}.revelation-number{display:flex;flex-direction:column;align-items:center;margin-top:5px;color:var(--green);line-height:1.15}.revelation-number small{font-size:9px;font-weight:700}.revelation-number b{font-size:17px}.surah-name{text-align:right}.surah-name h3{font-size:21px;margin:0 0 1px}.surah-name p{direction:ltr;text-align:right;margin:0;color:#66746e;font-size:12px}.surah-meta{display:flex;flex-direction:column;gap:4px;color:#728079;font-size:12px;min-width:50px}.card-actions{position:absolute;left:12px;top:12px;display:flex;gap:6px;z-index:2}.mini-btn{width:31px;height:31px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--green);cursor:pointer}.mini-btn:hover{background:#edf6f2}.empty-state{text-align:center;padding:50px;color:var(--muted)}.footer{border-top:1px solid var(--line);padding:28px clamp(20px,5vw,72px);display:flex;justify-content:space-between;gap:20px;align-items:center;background:var(--cream);font-size:13px;color:#68746f}.footer div{display:flex;flex-direction:column}.footer b{color:var(--green);font-size:15px}.footer span{direction:ltr}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:#133c31;color:white;padding:11px 18px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;z-index:100;max-width:90%;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.placeholder-page{min-height:100vh;background:var(--cream);display:grid;place-items:center;padding:20px}.placeholder-card{width:min(560px,100%);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:45px;text-align:center}.placeholder-card img{width:70px}.placeholder-card h1{margin:15px 0 6px}.primary-link{display:inline-block;margin-top:18px;background:var(--green);color:#fff;text-decoration:none;padding:10px 18px;border-radius:10px}@media(min-width:1200px){.hero-art{background-image:url('../images/hero/hero-4k.webp');background-size:min(100%,3840px) auto;background-position:center center;background-color:#6d351d}}@media(max-width:1199px) and (orientation:landscape){.hero-art{background-image:image-set(url('../images/hero/hero-1280.webp') 1x,url('../images/hero/hero-2560.webp') 2x);background-position:center center}}@media(max-width:1050px){.surah-grid{grid-template-columns:repeat(2,1fr)}.quick-actions{grid-template-columns:repeat(2,1fr)}.topbar{grid-template-columns:auto 1fr auto}.main-nav{gap:18px}.brand span{display:none}}@media(max-width:900px) and (orientation:portrait){.hero{height:clamp(620px,76vh,820px);min-height:620px}.hero-art{background-image:image-set(url('../images/hero/hero-tablet-1200x1500.webp') 1x,url('../images/hero/hero-tablet-2400x3000.webp') 2x);background-position:center center}}@media(max-width:760px){.topbar{height:auto;min-height:70px;padding:10px 16px;grid-template-columns:1fr auto}.main-nav{grid-column:1/-1;order:3;overflow-x:auto;justify-content:flex-start;border-top:1px solid #f0eee8;margin:0 -16px -10px;padding:0 16px}.main-nav a{white-space:nowrap;padding:12px 0 10px}.hero{height:clamp(620px,82vh,760px);min-height:620px}.hero-art{background-image:image-set(url('../images/hero/hero-mobile-1080x1920.webp') 1x,url('../images/hero/hero-mobile-2160x3840.webp') 2x);background-position:center center}.hero h1{font-size:36px}.hero-copy{font-size:15px}.quick-actions{grid-template-columns:1fr;padding:22px 16px}.surah-section{padding:38px 16px}.surah-grid{grid-template-columns:1fr}.section-heading{align-items:center}.section-heading h2{font-size:22px}.footer{flex-direction:column;align-items:flex-start}.surah-main{padding-left:65px}}@media(max-width:430px){.hero-art{background-image:image-set(url('../images/hero/hero-mobile-1080x1920.webp') 1x,url('../images/hero/hero-mobile-2160x3840.webp') 2x);background-position:center center}.order-toggle{padding:9px 10px;font-size:12px}.language-pills{gap:7px}.lang{padding:8px 14px;font-size:12px}.hero-content{width:94%}.search-box{height:54px}.section-heading{align-items:flex-start}.view-switch{display:none}}

/* English-default / LTR homepage */
html[dir="ltr"] .search-box input{text-align:left}
html[dir="ltr"] .surah-main{padding:19px 66px 17px 16px}
html[dir="ltr"] .card-actions{left:auto;right:12px}
html[dir="ltr"] .surah-name{text-align:left}
html[dir="ltr"] .surah-name h3{direction:rtl;text-align:left}
html[dir="ltr"] .surah-name p{text-align:left}
html[dir="ltr"] .action-card i{transform:scaleX(-1)}
@media(max-width:760px){html[dir="ltr"] .surah-main{padding-left:16px;padding-right:65px}}

/* =========================================================
   v7 — Quran-page framed layout
   The whole website is a centered page on large monitors.
   Hero, quick actions and Surah cards share the same width.
   ========================================================= */

:root{
  --page-max: 1600px;
  --page-paper: #fffdf7;
  --frame-gold: #c8a455;
  --frame-deep: #0b5d43;
}

html{
  background:
    radial-gradient(circle at 50% 0%, rgba(200,164,85,.18), transparent 34%),
    linear-gradient(135deg,#0b3f31 0%,#123d32 48%,#092d25 100%);
  padding: 34px 28px;
}

body{
  width: min(100%, var(--page-max));
  margin: 0 auto;
  min-height: calc(100vh - 68px);
  overflow-x: hidden;
  background: var(--page-paper);
  border: 1px solid rgba(200,164,85,.95);
  border-radius: 22px;
  position: relative;
  box-shadow:
    0 0 0 5px rgba(255,253,247,.98),
    0 0 0 7px rgba(200,164,85,.72),
    0 0 0 11px rgba(11,93,67,.38),
    0 28px 80px rgba(0,0,0,.34);
}

/* inner Quran-page ornamental lines */
body::before,
body::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:50;
  border-radius:16px;
}
body::before{
  inset: 10px;
  border: 1px solid rgba(200,164,85,.35);
}
body::after{
  inset: 16px;
  border: 1px solid rgba(11,93,67,.12);
}

/* everything stays inside the same book-page width */
.topbar,
.hero,
.quick-actions,
.surah-section,
.footer{
  width:100%;
  max-width:none;
}

/* Do not let the hero become a full-monitor banner. */
.hero{
  height: clamp(500px, 48vw, 650px);
  min-height: 500px;
  max-height: 650px;
}

.hero-art{
  background-image: url('../images/hero/hero-4k.webp');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}

/* Keep the large-screen site comfortably framed. */
@media (min-width: 1700px){
  body{ width: var(--page-max); }
}

@media (max-width: 1660px){
  html{ padding:22px 18px; }
  body{ width:100%; min-height:calc(100vh - 44px); }
}

/* Tablets keep a lighter frame. */
@media (max-width: 900px){
  html{ padding:10px; }
  body{
    min-height:calc(100vh - 20px);
    border-radius:14px;
    box-shadow:
      0 0 0 3px rgba(255,253,247,.98),
      0 0 0 4px rgba(200,164,85,.55),
      0 14px 36px rgba(0,0,0,.24);
  }
  body::before{ inset:6px; border-radius:10px; }
  body::after{ display:none; }
}

/* On phones use all available width; the mobile crop remains responsive. */
@media (max-width: 600px){
  html{ padding:0; background:var(--page-paper); }
  body{
    min-height:100vh;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  body::before, body::after{ display:none; }
}

/* v8 — Quran manuscript inspired green/gold page frame */
:root{
  --frame-green:#0b5d43;
  --frame-green-deep:#063d2d;
  --frame-gold:#caa552;
  --frame-paper:#fffdf6;
}

/* Outer desk/background */
html{
  background:
    radial-gradient(circle at 50% 0, rgba(202,165,82,.13), transparent 34%),
    linear-gradient(135deg,#063d2d 0%,#0b5d43 52%,#073326 100%);
  padding:32px;
}

/* Main Quran-page body */
body{
  width:min(100%,1640px);
  margin:0 auto;
  background:
    linear-gradient(rgba(255,253,246,.975),rgba(255,253,246,.975)),
    repeating-linear-gradient(0deg,rgba(202,165,82,.025) 0 1px,transparent 1px 5px);
  border-radius:18px;
  border:2px solid var(--frame-gold);
  box-shadow:
    0 0 0 7px var(--frame-paper),
    0 0 0 10px var(--frame-green),
    0 0 0 12px var(--frame-gold),
    0 25px 80px rgba(0,0,0,.32);
  position:relative;
  overflow:hidden;
}

/* Manuscript-style inner border */
body::before{
  content:"";
  position:absolute;
  inset:18px;
  z-index:50;
  pointer-events:none;
  border:1px solid rgba(202,165,82,.75);
  border-radius:10px;
  box-shadow:
    inset 0 0 0 5px rgba(11,93,67,.07),
    inset 0 0 0 7px rgba(202,165,82,.12);
}

/* Four ornamental corner motifs */
body::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:51;
  pointer-events:none;
  background-image:
    url('../images/quran-frame-corner.svg'),
    url('../images/quran-frame-corner.svg'),
    url('../images/quran-frame-corner.svg'),
    url('../images/quran-frame-corner.svg');
  background-repeat:no-repeat;
  background-size:150px 150px;
  background-position:left top,right top,right bottom,left bottom;
  /* flip corners using mask-like orientation via background is not possible;
     repeated ornament still gives a manuscript frame feel */
  opacity:.95;
}

/* Keep all page sections comfortably inside the ornament */
.topbar,
.hero,
.quick-actions,
.surah-section,
.footer{
  width:calc(100% - 52px);
  margin-left:26px;
  margin-right:26px;
}

.topbar{
  margin-top:20px;
  border-radius:12px 12px 0 0;
}

.hero{
  border-left:1px solid rgba(202,165,82,.42);
  border-right:1px solid rgba(202,165,82,.42);
}

.quick-actions{
  border-left:1px solid rgba(202,165,82,.22);
  border-right:1px solid rgba(202,165,82,.22);
}

.surah-section{
  position:relative;
  padding-left:42px;
  padding-right:42px;
}

/* Thin ornamental divider under major areas */
.quick-actions::after,
.surah-section::before{
  content:"";
  display:block;
  height:7px;
  margin:0 34px;
  background:
    linear-gradient(90deg,transparent,var(--frame-gold) 12%,var(--frame-green) 50%,var(--frame-gold) 88%,transparent);
  opacity:.45;
  border-radius:999px;
}

.footer{
  margin-bottom:22px;
  border-bottom:1px solid rgba(202,165,82,.35);
  border-radius:0 0 12px 12px;
}

/* On very wide monitors keep visible green margins around the Quran page */
@media(min-width:1800px){
  body{width:1640px}
}

/* Tablet: retain a lighter decorative frame */
@media(max-width:900px){
  html{padding:14px}
  body{
    width:100%;
    border-radius:12px;
    box-shadow:
      0 0 0 4px var(--frame-paper),
      0 0 0 6px var(--frame-green),
      0 10px 34px rgba(0,0,0,.24);
  }
  body::before{inset:10px}
  body::after{background-size:92px 92px;opacity:.65}
  .topbar,.hero,.quick-actions,.surah-section,.footer{
    width:calc(100% - 24px);
    margin-left:12px;
    margin-right:12px;
  }
}

/* Phones: content remains fully usable; ornament becomes subtle */
@media(max-width:600px){
  html{padding:0;background:var(--frame-paper)}
  body{border:0;border-radius:0;box-shadow:none}
  body::before{display:none}
  body::after{display:none}
  .topbar,.hero,.quick-actions,.surah-section,.footer{
    width:100%;
    margin-left:0;
    margin-right:0;
  }
}


/* v9 FIX — restore scrolling and stabilize the Quran frame */
html{
  min-height:100%;
  overflow-y:auto !important;
  overflow-x:hidden;
}

body{
  overflow:visible !important;
  min-height:100vh;
  height:auto !important;
}

/* Keep decorative borders inside the page and let them scroll with content */
body::before{
  position:absolute !important;
  inset:18px !important;
  top:18px !important;
  bottom:18px !important;
  left:18px !important;
  right:18px !important;
}

/* Remove the repeated corner artwork that was overlapping content.
   Keep a clean Quran-style green/gold frame instead. */
body::after{
  content:none !important;
  display:none !important;
}

/* Give content enough breathing room from the manuscript border */
.topbar{
  margin-top:26px !important;
}

.footer{
  margin-bottom:26px !important;
}

/* Prevent the hero from escaping the framed page */
.hero{
  overflow:hidden !important;
  border-radius:0;
}

.hero-art{
  inset:0 !important;
  width:100%;
  height:100%;
}

/* On large displays keep the whole website as one centered Quran page */
@media(min-width:1800px){
  body{
    width:min(1640px, calc(100vw - 96px)) !important;
  }
}

/* Smaller screens: page remains scrollable and frame stays simple */
@media(max-width:900px){
  html{
    overflow-y:auto !important;
  }
  body{
    overflow:visible !important;
  }
  body::before{
    inset:10px !important;
  }
}

@media(max-width:600px){
  body::before{
    display:none !important;
  }
}

/* v10 simplified hero/header */
.topbar{grid-template-columns:auto auto 1fr auto;align-items:center}
.header-language{position:relative;margin-left:10px}
.language-toggle{height:42px;padding:0 12px;border:1px solid rgba(202,165,82,.45);border-radius:12px;background:#fffdf8;color:var(--ink);cursor:pointer}
.language-menu{position:absolute;top:48px;left:0;min-width:170px;padding:8px;border:1px solid rgba(202,165,82,.45);border-radius:12px;background:#fffdf8;box-shadow:0 14px 34px rgba(0,0,0,.16);z-index:1000}
.language-menu button{width:100%;border:0;background:transparent;padding:10px 12px;text-align:left;border-radius:8px;cursor:pointer}
.language-menu button:hover{background:rgba(11,93,67,.08)}
.main-nav{justify-content:center;align-items:center}
.nav-search-button{border:0;background:transparent;color:var(--ink);font:inherit;cursor:pointer;padding:12px 0}
.nav-search-button:hover{color:var(--green)}
.hero-calligraphy-only{display:grid;place-items:center;width:100%;height:100%;padding:0 20px}
.kitab-allah{direction:rtl;color:#f5cf66;font-family:Georgia,"Times New Roman",serif;font-size:clamp(72px,9vw,150px);font-weight:700;line-height:1;text-align:center;text-shadow:0 0 8px rgba(255,220,110,.95),0 0 22px rgba(255,191,45,.75),0 0 48px rgba(255,161,0,.45)}
.hero .eyebrow,.hero h1,.hero-copy,.hero .language-pills,.hero .search-box{display:none!important}
.search-overlay{position:fixed;inset:0;z-index:5000;background:rgba(5,25,19,.58);backdrop-filter:blur(5px);display:grid;place-items:start center;padding-top:120px}
.search-modal{width:min(680px,calc(100vw - 32px));background:#fffdf8;border:1px solid rgba(202,165,82,.65);border-radius:18px;padding:28px;box-shadow:0 24px 70px rgba(0,0,0,.28);position:relative}
.search-close{position:absolute;right:16px;top:10px;border:0;background:transparent;font-size:30px;cursor:pointer}
.modal-search-box{margin:0;max-width:none}
@media(max-width:900px){.topbar{grid-template-columns:auto 1fr auto}.header-language{grid-column:2;justify-self:start}.main-nav{grid-column:1/-1}}
@media(max-width:600px){.language-toggle #languageLabel{display:none}.kitab-allah{font-size:clamp(58px,18vw,92px)}}

/* v11 — exact calligraphy, original hero light, refined header, order below hero, 5 quick actions */

/* Restore the approved photo's original brightness. */
.hero-overlay{
  background:linear-gradient(90deg,rgba(4,24,20,.04),rgba(4,24,20,.08),rgba(4,24,20,.03)) !important;
}
.hero-art{
  filter:none !important;
  opacity:1 !important;
}

/* Exact calligraphy artwork from the user-provided source. */
.hero-calligraphy-only{
  display:grid !important;
  place-items:center !important;
  width:100% !important;
  height:100% !important;
  padding:24px !important;
}
.kitab-allah-art{
  display:block;
  width:min(520px,46vw);
  max-height:68%;
  object-fit:contain;
  filter:
    drop-shadow(0 0 6px rgba(255,229,135,.95))
    drop-shadow(0 0 18px rgba(245,190,54,.85))
    drop-shadow(0 0 38px rgba(226,142,18,.58));
}

/* Header cluster: language LEFT, logo CENTER, title RIGHT */
.topbar{
  grid-template-columns:auto 1fr !important;
  gap:26px !important;
  align-items:center !important;
}
.brand-cluster{
  display:grid;
  grid-template-columns:auto 52px auto;
  align-items:center;
  gap:10px;
  min-width:max-content;
}
.header-language{
  grid-column:1 !important;
  margin:0 !important;
  position:relative;
}
.brand-logo{
  grid-column:2;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  text-decoration:none;
}
.brand-logo img{
  width:48px;
  height:48px;
  display:block;
}
.brand-title{
  grid-column:3;
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
}
.language-toggle{
  height:40px;
  padding:0 10px;
  display:flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(202,165,82,.45);
  border-radius:12px;
  background:#fffdf8;
  color:var(--ink);
  cursor:pointer;
  font:inherit;
}
.language-menu{left:0 !important;right:auto !important}

/* Search keeps its original rounded field form, moved into top navigation. */
.main-nav{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:22px !important;
}
.header-search{
  width:clamp(170px,18vw,280px);
  height:42px;
  border:1px solid #e7e2d6;
  border-radius:14px;
  background:#fff;
  display:flex;
  align-items:center;
  padding:0 12px;
  box-shadow:0 4px 14px rgba(17,62,49,.05);
}
.header-search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
}
.header-search .search-icon{
  color:var(--green);
  font-size:23px;
  line-height:1;
}

/* Remove legacy search modal/button UI. */
.nav-search-button,.search-overlay,.search-modal{display:none !important}

/* Order belongs with surah display controls below the hero/quick actions. */
.section-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.section-order-toggle{
  position:static !important;
  margin:0 !important;
  height:46px;
  white-space:nowrap;
}

/* Five equal quick-action cards, with active underline exactly under active item. */
.quick-actions{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:14px !important;
  position:relative;
}
.action-card{
  position:relative;
  overflow:visible !important;
}
.action-card::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:-11px;
  height:3px;
  border-radius:999px;
  background:transparent;
}
.action-card.active{
  border-color:rgba(11,93,67,.38);
  background:#fffefa;
}
.action-card.active .action-icon,
.action-card.active b{
  color:var(--green);
}
.action-card.active::after{
  background:var(--green);
  box-shadow:0 2px 8px rgba(11,93,67,.18);
}

/* Remove the old broad divider directly under quick actions if present. */
.quick-actions::after{display:none !important}

@media(max-width:1150px){
  .topbar{grid-template-columns:1fr !important}
  .brand-cluster{justify-self:start}
  .main-nav{justify-content:flex-start !important;overflow-x:auto}
  .header-search{min-width:220px}
  .quick-actions{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:760px){
  .topbar{display:block !important}
  .brand-cluster{
    grid-template-columns:auto 48px auto;
    gap:8px;
    width:100%;
    justify-content:start;
  }
  .brand-logo{width:48px;height:48px}
  .brand-title{font-size:14px}
  .language-toggle #languageLabel{display:none}
  .main-nav{
    margin-top:10px !important;
    gap:16px !important;
    padding-bottom:8px;
  }
  .header-search{
    min-width:180px;
    width:210px;
  }
  .kitab-allah-art{
    width:min(430px,78vw);
    max-height:64%;
  }
  .quick-actions{grid-template-columns:1fr !important}
  .section-controls{width:100%;justify-content:flex-end}
}

/* v12 — mobile header stabilization + calligraphy position + action icons */

/* Move Kitab Allah upward so it stays clear of the Quran book in all desktop sizes. */
.hero-calligraphy-only{
  align-items:start !important;
  padding-top:clamp(42px,7vh,88px) !important;
}
.kitab-allah-art{
  transform:translateY(-8%) !important;
  width:min(500px,43vw) !important;
  max-height:58% !important;
}

/* Clearer quick-action iconography. */
.action-icon.audio-icon{
  font-size:25px !important;
  font-weight:700;
  line-height:1;
}
.action-icon.continue-icon{
  font-size:25px !important;
  font-weight:700;
  line-height:1;
}

/* Tablet / smaller desktop: lift the calligraphy a little more. */
@media (max-width:1200px) and (min-width:761px){
  .hero-calligraphy-only{
    padding-top:34px !important;
  }
  .kitab-allah-art{
    transform:translateY(-12%) !important;
    width:min(440px,48vw) !important;
    max-height:54% !important;
  }
}

/* Mobile header: one compact brand row, never a detached oversized logo. */
@media(max-width:760px){
  .topbar{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    padding:14px 14px 8px !important;
    min-height:0 !important;
  }

  .brand-cluster{
    display:grid !important;
    grid-template-columns:auto 44px minmax(0,1fr) !important;
    align-items:center !important;
    justify-content:start !important;
    gap:8px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  .header-language{
    grid-column:1 !important;
    position:relative !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
  }

  .language-toggle{
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:38px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border-radius:10px !important;
    overflow:hidden !important;
  }
  .language-toggle #languageLabel,
  .language-toggle .language-caret{
    display:none !important;
  }
  .language-icon{
    font-size:20px !important;
    line-height:1 !important;
  }

  .brand-logo{
    grid-column:2 !important;
    display:grid !important;
    place-items:center !important;
    width:44px !important;
    height:44px !important;
    max-width:44px !important;
    max-height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:8px !important;
  }
  .brand-logo img{
    display:block !important;
    width:40px !important;
    height:40px !important;
    max-width:40px !important;
    max-height:40px !important;
    min-width:0 !important;
    min-height:0 !important;
    object-fit:contain !important;
    margin:0 !important;
    padding:0 !important;
  }

  .brand-title{
    grid-column:3 !important;
    display:block !important;
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    font-size:15px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .main-nav{
    display:flex !important;
    width:100% !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:14px !important;
    margin:0 !important;
    padding:4px 0 8px !important;
    overflow-x:auto !important;
    scrollbar-width:none;
  }
  .main-nav::-webkit-scrollbar{display:none}
  .main-nav a{
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }

  .header-search{
    flex:0 0 190px !important;
    width:190px !important;
    min-width:190px !important;
    height:38px !important;
    margin-left:2px !important;
  }

  .language-menu{
    top:44px !important;
    left:0 !important;
    min-width:155px !important;
  }

  /* Mobile hero: keep calligraphy in upper half, clear of the book. */
  .hero-calligraphy-only{
    align-items:start !important;
    padding-top:42px !important;
  }
  .kitab-allah-art{
    width:min(330px,74vw) !important;
    max-height:43% !important;
    transform:translateY(-8%) !important;
  }
}

/* Very narrow phones */
@media(max-width:420px){
  .topbar{padding-left:10px !important;padding-right:10px !important}
  .brand-cluster{grid-template-columns:40px 42px minmax(0,1fr) !important;gap:6px !important}
  .language-toggle{width:40px !important;min-width:40px !important}
  .brand-logo{width:42px !important;height:42px !important;max-width:42px !important;min-width:42px !important}
  .brand-logo img{width:38px !important;height:38px !important;max-width:38px !important}
  .brand-title{font-size:13px !important}
  .main-nav{gap:12px !important}
  .header-search{flex-basis:165px !important;width:165px !important;min-width:165px !important}
}

/* v13 — hard mobile viewport/header fix */
@media screen and (max-width: 820px) {
  .topbar{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:10px 12px 6px !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

  .brand-cluster{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:48px !important;
    padding:0 !important;
    margin:0 !important;
  }

  .header-language{
    order:1 !important;
    flex:0 0 42px !important;
    width:42px !important;
    height:40px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .language-toggle{
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    overflow:hidden !important;
    font-size:0 !important;
    box-sizing:border-box !important;
  }
  .language-toggle .language-icon{
    display:inline-block !important;
    font-size:21px !important;
    line-height:1 !important;
  }
  .language-toggle #languageLabel,
  .language-toggle .language-caret{
    display:none !important;
  }

  .brand-logo{
    order:2 !important;
    flex:0 0 46px !important;
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;
    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  .brand-logo img,
  .brand-logo > img,
  .topbar .brand-logo img{
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    object-fit:contain !important;
    display:block !important;
    padding:0 !important;
    margin:0 !important;
    transform:none !important;
  }

  .brand-title{
    order:3 !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    max-width:calc(100% - 104px) !important;
    margin:0 !important;
    padding:0 !important;
    font-size:15px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .main-nav{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:13px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:8px 0 0 !important;
    padding:0 0 7px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    box-sizing:border-box !important;
    scrollbar-width:none !important;
  }
  .main-nav::-webkit-scrollbar{display:none !important}

  .main-nav a{
    flex:0 0 auto !important;
    font-size:15px !important;
  }

  .header-search{
    flex:0 0 175px !important;
    width:175px !important;
    min-width:175px !important;
    max-width:175px !important;
    height:38px !important;
    margin:0 !important;
    padding:0 10px !important;
    box-sizing:border-box !important;
  }

  .header-search input{
    min-width:0 !important;
    width:100% !important;
    font-size:14px !important;
  }

  .language-menu{
    top:44px !important;
    left:0 !important;
    right:auto !important;
    z-index:9999 !important;
  }
}

/* Extra-narrow phones */
@media screen and (max-width: 480px) {
  .topbar{padding-left:10px !important;padding-right:10px !important}
  .brand-cluster{gap:6px !important}
  .header-language{flex-basis:40px !important;width:40px !important}
  .language-toggle{width:40px !important;min-width:40px !important;max-width:40px !important}
  .brand-logo{flex-basis:42px !important;width:42px !important;min-width:42px !important;max-width:42px !important;height:42px !important}
  .brand-logo img,.brand-logo>img,.topbar .brand-logo img{
    width:38px !important;min-width:38px !important;max-width:38px !important;
    height:38px !important;min-height:38px !important;max-height:38px !important;
  }
  .brand-title{font-size:13.5px !important;max-width:calc(100% - 94px) !important}
  .main-nav{gap:11px !important}
  .header-search{flex-basis:158px !important;width:158px !important;min-width:158px !important;max-width:158px !important}
}

/* v15 — refined calligraphy position + semantic quick-action icons */

/* Position Kitab Allah midway between v11 and v12: higher than the original,
   but lower than the last version, keeping it clear of the Quran book. */
.hero-calligraphy-only{
  align-items:start !important;
  padding-top:clamp(58px,9vh,108px) !important;
}
.kitab-allah-art{
  transform:translateY(0) !important;
  width:min(500px,43vw) !important;
  max-height:60% !important;
}

/* Crisp line icons; no font/music-symbol ambiguity. */
.svg-action-icon{
  width:30px !important;
  height:30px !important;
  display:grid !important;
  place-items:center !important;
  flex:0 0 30px;
}
.svg-action-icon svg{
  width:27px;
  height:27px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.audio-recitation-icon svg{
  width:29px;
  height:29px;
}

/* Smaller desktop/tablet: keep calligraphy above the physical Quran. */
@media (max-width:1200px) and (min-width:821px){
  .hero-calligraphy-only{
    padding-top:48px !important;
  }
  .kitab-allah-art{
    transform:translateY(0) !important;
    width:min(440px,48vw) !important;
    max-height:56% !important;
  }
}

/* Mobile: slightly lower than previous v14 treatment, still in upper half. */
@media screen and (max-width:820px){
  .hero-calligraphy-only{
    align-items:start !important;
    padding-top:58px !important;
  }
  .kitab-allah-art{
    transform:translateY(0) !important;
    width:min(330px,74vw) !important;
    max-height:46% !important;
  }
}

/* v17 — guarantee five quick-access items */
.quick-actions{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}
@media(max-width:1150px){
  .quick-actions{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:760px){
  .quick-actions{grid-template-columns:1fr !important;}
}

/* v18 */
.brand-cluster{gap:12px!important}
.brand-title{max-width:520px;line-height:1.25;text-decoration:none!important}
.main-nav>a{position:relative}
.main-nav>a::after{opacity:0!important;transform:scaleX(0)!important}
.main-nav>a.active::after{opacity:1!important;transform:scaleX(1)!important}
.site-footer{margin-top:42px}
.footer-inner{text-align:center;padding:26px 18px 30px}
.footer-credit{margin:0 0 12px}
.footer-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 18px;font-size:.92rem;line-height:1.6}
.donation-notice{margin:12px 0 14px;font-size:.82rem;opacity:.58;cursor:default;user-select:none}
.footer-legal{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 22px}
.footer-legal a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:1100px){.brand-title{max-width:390px;font-size:.92rem!important}}
@media screen and (max-width:820px){
 .brand-cluster{gap:8px!important}
 .brand-title{max-width:min(68vw,420px)!important;font-size:.78rem!important;line-height:1.2!important;white-space:normal!important}
 .footer-bank{flex-direction:column;gap:2px}
}

/* v19 — reliable three-language selector */
.header-language{position:relative!important;overflow:visible!important;z-index:10020!important}
.language-toggle{position:relative;z-index:10021}
.language-menu{
  position:absolute!important;top:calc(100% + 7px)!important;left:0!important;right:auto!important;
  min-width:170px!important;padding:7px!important;z-index:10050!important;
  background:#fffdf8!important;border:1px solid rgba(202,165,82,.55)!important;border-radius:12px!important;
  box-shadow:0 14px 34px rgba(0,0,0,.18)!important;
}
.language-menu[hidden]{display:none!important}
.language-menu:not([hidden]){display:block!important}
.language-option{
  display:block!important;width:100%!important;box-sizing:border-box;padding:10px 12px!important;
  border-radius:8px!important;text-decoration:none!important;text-align:left!important;color:var(--ink)!important;
  font:inherit!important;white-space:nowrap!important;
}
.language-option:hover{background:rgba(11,93,67,.08)!important}
.language-option.active{
  background:var(--green)!important;color:#fff!important;font-weight:700!important;
}
html[dir="rtl"] .language-option{text-align:right!important}
@media(max-width:820px){
 .topbar,.brand-cluster{overflow:visible!important}
 .language-menu{position:absolute!important;top:44px!important;left:0!important;min-width:158px!important}
}

/* v20 definitive header fixes */
.topbar{position:relative!important;z-index:20000!important;display:grid!important;grid-template-columns:1fr auto 1fr!important;grid-template-areas:"lang title nav"!important;align-items:center!important;width:100%!important;overflow:visible!important;background:#fffdf8!important;padding:16px 28px!important;box-sizing:border-box!important}
.brand-cluster{grid-area:title!important;display:block!important;overflow:visible!important}.brand-title{display:block!important;position:static!important;width:max-content!important;max-width:min(620px,46vw)!important;margin:auto!important;text-align:center!important;white-space:normal!important;line-height:1.25!important}
.header-language{grid-area:lang!important;justify-self:start!important;position:relative!important;z-index:21000!important;overflow:visible!important}
.main-nav{grid-area:nav!important;justify-self:end!important;position:static!important;display:flex!important;align-items:center!important;gap:18px!important;z-index:20010!important;background:#fffdf8!important}
.hero{position:relative!important;z-index:1!important;clear:both!important}
.language-checkbox{position:absolute!important;opacity:0!important;pointer-events:none!important}.language-toggle{display:inline-flex!important;align-items:center!important;gap:7px!important;cursor:pointer!important;position:relative!important;z-index:21002!important}
.language-menu{display:none!important;position:absolute!important;top:calc(100% + 8px)!important;left:0!important;min-width:170px!important;padding:7px!important;z-index:22000!important;background:#fffdf8!important;border:1px solid rgba(202,165,82,.6)!important;border-radius:12px!important;box-shadow:0 16px 38px rgba(0,0,0,.2)!important}
.language-checkbox:checked~.language-menu{display:block!important}.language-option{display:block!important;padding:10px 12px!important;border-radius:8px!important;text-decoration:none!important}.language-option.active{background:var(--green)!important;color:#fff!important;font-weight:700!important}
.main-nav>a::after{opacity:0!important;transform:scaleX(0)!important}.main-nav>a.active::after{opacity:1!important;transform:scaleX(1)!important}
@media(max-width:1200px) and (min-width:821px){.topbar{grid-template-columns:auto 1fr!important;grid-template-areas:"lang title" "nav nav"!important;row-gap:12px!important}.main-nav{justify-self:end!important}}
@media(max-width:820px){.topbar{grid-template-columns:1fr!important;grid-template-areas:"title" "lang" "nav"!important;row-gap:12px!important;padding:14px 18px 16px!important}.brand-title{width:100%!important;max-width:none!important;margin:0!important;text-align:center!important;font-size:clamp(.92rem,4vw,1.05rem)!important}.header-language{justify-self:start!important}.language-current,.language-caret{display:inline!important}.main-nav{width:100%!important;justify-self:stretch!important;justify-content:flex-start!important;gap:18px!important;overflow-x:auto!important;padding:4px 0 8px!important}.main-nav .header-search{flex:0 0 min(260px,48vw)!important}}

/* v21 — stable header, language picker, inactive placeholders */
.topbar{
  position:relative!important;
  z-index:20000!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-areas:"title" "nav"!important;
  align-items:center!important;
  gap:10px!important;
  overflow:visible!important;
  background:#fffdf8!important;
  padding:14px 28px 12px!important;
}
.brand-cluster{grid-area:title!important;width:100%!important}
.brand-title{
  display:block!important;width:100%!important;max-width:none!important;
  margin:0!important;text-align:center!important;white-space:normal!important;
}
.header-language.language-picker{
  position:absolute!important;left:28px!important;top:10px!important;
  z-index:22000!important;margin:0!important;overflow:visible!important;
}
html[dir="rtl"] .header-language.language-picker{left:auto!important;right:28px!important}
.language-picker>summary{list-style:none!important}
.language-picker>summary::-webkit-details-marker{display:none!important}
.language-picker:not([open]) .language-menu{display:none!important}
.language-picker[open] .language-menu{
  display:block!important;position:absolute!important;top:calc(100% + 7px)!important;
  left:0!important;right:auto!important;min-width:170px!important;padding:7px!important;
  background:#fffdf8!important;border:1px solid rgba(202,165,82,.6)!important;
  border-radius:12px!important;box-shadow:0 16px 38px rgba(0,0,0,.2)!important;z-index:23000!important;
}
html[dir="rtl"] .language-picker[open] .language-menu{left:auto!important;right:0!important}
.language-toggle{cursor:pointer!important}
.language-option{display:block!important;padding:10px 12px!important;border-radius:8px!important;text-decoration:none!important;white-space:nowrap!important}
.language-option.active{background:var(--green)!important;color:#fff!important;font-weight:700!important}

.main-nav{
  grid-area:nav!important;position:static!important;width:100%!important;
  display:flex!important;justify-content:center!important;align-items:center!important;
  flex-wrap:wrap!important;gap:10px 22px!important;background:transparent!important;
  padding:3px 0 0!important;overflow:visible!important;
}
.main-nav .header-search{flex:0 1 250px!important}
.main-nav>a::after{opacity:0!important;transform:scaleX(0)!important}
.main-nav>a.active::after{opacity:1!important;transform:scaleX(1)!important}

.quick-actions .action-card small{display:none!important}
.quick-actions .action-card{cursor:pointer!important}
.quick-actions .action-card.active::after{opacity:1!important;transform:scaleX(1)!important}
.quick-actions .action-card:not(.active)::after{opacity:0!important;transform:scaleX(0)!important}

.surah-main{cursor:default!important}
.mini-btn:disabled{cursor:default!important;opacity:.38!important}
.surah-title-meaning{font-size:inherit!important;color:inherit!important}

@media(max-width:820px){
  .topbar{padding:14px 18px 12px!important;gap:12px!important}
  .brand-title{padding:0 54px!important;box-sizing:border-box!important;text-align:center!important}
  .header-language.language-picker{left:18px!important;top:44px!important}
  html[dir="rtl"] .header-language.language-picker{left:auto!important;right:18px!important}
  .main-nav{
    margin-top:40px!important;justify-content:flex-start!important;flex-wrap:nowrap!important;
    overflow-x:auto!important;overflow-y:visible!important;padding-bottom:7px!important;
  }
  .main-nav .header-search{flex:0 0 min(250px,58vw)!important}
}

/* v22 — final active-state + desktop header placement fixes */

/* IMPORTANT: the original stylesheet had height:76px on .topbar.
   With title + navigation on two rows this made the second row overflow
   on top of the mosque image. Let the header grow naturally. */
.topbar{
  height:auto !important;
  min-height:108px !important;
  position:relative !important;
  overflow:visible !important;
  background:#fffdf8 !important;
  grid-template-columns:1fr !important;
  grid-template-areas:"title" "nav" !important;
  grid-template-rows:auto auto !important;
  align-content:center !important;
  row-gap:10px !important;
  padding:14px 28px 13px !important;
  border-bottom:1px solid var(--line) !important;
}
.brand-cluster{
  grid-area:title !important;
  width:100% !important;
}
.brand-title{
  width:100% !important;
  max-width:none !important;
  text-align:center !important;
  margin:0 auto !important;
}
.main-nav{
  grid-area:nav !important;
  position:relative !important;
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:8px 24px !important;
  padding:0 !important;
  margin:0 !important;
  background:#fffdf8 !important;
  overflow:visible !important;
}
.main-nav .header-search{
  flex:0 1 250px !important;
  margin:0 !important;
}

/* Hero starts after the full white header; it can never sit under the nav. */
main#home{
  position:relative !important;
  z-index:1 !important;
}
.hero{
  position:relative !important;
  z-index:1 !important;
  margin-top:0 !important;
  clear:both !important;
}

/* Legacy .active styling is neutralized.
   v22 uses data-active so exactly one underline can exist. */
.main-nav > a,
.main-nav > a.active,
.main-nav > a:hover{
  border-bottom:3px solid transparent !important;
}
.main-nav > a.active::after,
.main-nav > a:not(.active)::after{
  opacity:0 !important;
  transform:scaleX(0) !important;
}
.main-nav > a[data-active="true"]{
  color:var(--green) !important;
  border-bottom-color:var(--green) !important;
}
.main-nav > a[data-active="false"]{
  color:#2a3935 !important;
  border-bottom-color:transparent !important;
}

/* Same principle for the five quick-access cards. */
.quick-actions .action-card.active::after,
.quick-actions .action-card:not(.active)::after{
  background:transparent !important;
  box-shadow:none !important;
  opacity:0 !important;
}
.quick-actions .action-card.active{
  border-color:var(--line) !important;
  background:#fff !important;
}
.quick-actions .action-card[data-active="true"]{
  border-color:rgba(11,93,67,.38) !important;
  background:#fffefa !important;
}
.quick-actions .action-card[data-active="true"]::after{
  background:var(--green) !important;
  box-shadow:0 2px 8px rgba(11,93,67,.18) !important;
  opacity:1 !important;
  transform:scaleX(1) !important;
}
.quick-actions .action-card[data-active="false"]::after{
  background:transparent !important;
  box-shadow:none !important;
  opacity:0 !important;
  transform:scaleX(0) !important;
}

/* Keep the language selector in the white header. */
.header-language.language-picker{
  top:12px !important;
}

@media (max-width:820px){
  .topbar{
    height:auto !important;
    min-height:0 !important;
    grid-template-rows:auto auto !important;
    padding:14px 18px 13px !important;
    row-gap:12px !important;
  }
  .brand-title{
    padding:0 54px !important;
  }
  .header-language.language-picker{
    top:46px !important;
  }
  .main-nav{
    margin-top:40px !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    padding:0 0 8px !important;
    background:#fffdf8 !important;
  }
}

/* v23 — fix top header protrusion + restore quick-action underline */

/* Keep the white top header fully inside the framed page.
   No horizontal protrusion beyond the Quran-style frame. */
.topbar{
  width:auto !important;
  max-width:100% !important;
  margin:0 !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  box-sizing:border-box !important;
  border-radius:0 !important;
}

/* Some older rules gave the header/search negative offsets.
   Neutralize them so nothing sticks out of the frame. */
.site-shell > .topbar,
.page-frame > .topbar,
.topbar::before,
.topbar::after{
  margin-left:0 !important;
  margin-right:0 !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}

/* Quick action underline:
   create a dedicated bottom bar on each card and show it only for selected card. */
.quick-actions .action-card{
  position:relative !important;
  overflow:visible !important;
  padding-bottom:18px !important;
  border-bottom:0 !important;
}

.quick-actions .action-card::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:6px !important;
  width:72px !important;
  max-width:70% !important;
  height:3px !important;
  border-radius:999px !important;
  background:transparent !important;
  opacity:0 !important;
  transform:translateX(-50%) scaleX(0) !important;
  transform-origin:center !important;
  transition:opacity .18s ease, transform .18s ease !important;
  box-shadow:none !important;
}

/* data-active is the authoritative state set by app.js */
.quick-actions .action-card[data-active="true"]::after{
  background:var(--green) !important;
  opacity:1 !important;
  transform:translateX(-50%) scaleX(1) !important;
  box-shadow:0 2px 8px rgba(11,93,67,.18) !important;
}

.quick-actions .action-card[data-active="false"]::after{
  background:transparent !important;
  opacity:0 !important;
  transform:translateX(-50%) scaleX(0) !important;
  box-shadow:none !important;
}

/* Make sure any legacy "active" class cannot leave a second underline. */
.quick-actions .action-card.active:not([data-active="true"])::after{
  background:transparent !important;
  opacity:0 !important;
  transform:translateX(-50%) scaleX(0) !important;
}

@media(max-width:820px){
  .topbar{
    width:100% !important;
    max-width:100% !important;
  }
  .quick-actions .action-card::after{
    width:64px !important;
    bottom:5px !important;
  }
}


/* v28 repair: intentionally minimal additions on top of the last known-good v23 layout */
.card-actions{display:none!important}

a.surah-main{
  text-decoration:none!important;
  color:inherit!important;
}
a.surah-main:hover,
a.surah-main:focus-visible{
  text-decoration:none!important;
}
a.surah-main:focus-visible{
  outline:2px solid var(--gold)!important;
  outline-offset:-3px!important;
  border-radius:12px!important;
}

.footer-bank{
  opacity:.58!important;
  filter:grayscale(.25)!important;
}
.donation-notice[aria-disabled="true"]{
  opacity:.72!important;
  font-weight:700!important;
}
.repair-legal{
  display:flex!important;
  justify-content:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
.repair-legal a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:145px!important;
  padding:9px 15px!important;
  border:1px solid rgba(11,93,67,.28)!important;
  border-radius:999px!important;
  background:#fff!important;
  color:var(--green)!important;
  text-decoration:none!important;
  font-weight:700!important;
}
.repair-legal a:hover{
  background:#f3f8f5!important;
}

/* v29 — force the approved hero image with a simple, robust fallback chain */
.hero{
  position:relative !important;
  overflow:hidden !important;
  background:#6d351d !important;
}
.hero-art{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:1 !important;
  filter:none !important;
  background-color:#6d351d !important;
  background-image:url('../images/hero/hero-main.png') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}
@media (min-width:1400px){
  .hero-art{
    background-image:url('../images/hero/hero-2560.webp') !important;
  }
}
@media (min-width:2600px){
  .hero-art{
    background-image:url('../images/hero/hero-4k.webp') !important;
  }
}
@media (max-width:900px) and (orientation:portrait){
  .hero-art{
    background-image:url('../images/hero/hero-tablet-1200x1500.webp') !important;
  }
}
@media (max-width:600px) and (orientation:portrait){
  .hero-art{
    background-image:url('../images/hero/hero-mobile-1080x1920.webp') !important;
  }
}

/* v30: only new homepage success notification */
.site-toast{
 position:fixed;top:18px;left:50%;transform:translateX(-50%);
 z-index:9999;background:#0b5d43;color:#fff;padding:11px 18px;
 border:1px solid rgba(255,255,255,.35);border-radius:999px;
 box-shadow:0 12px 30px rgba(0,0,0,.18);font-weight:800;font-size:14px
}

/* v53: only Surah Al-Alaq (96) is highlighted as work in progress */
.surah-card[data-number="96"]{background:#eef8f1 !important}

/* v55 — Al-'Alaq (Surah 96) work-in-progress highlight; intentionally last/strongest rule */
#surahGrid .surah-card[data-number="96"],
#surahGrid .surah-card[data-number="96"]:hover{
  background-color:#e8f6ec !important;
  background-image:none !important;
}

/* v56 — Surah 96 highlight at ALL viewport sizes, including responsive card layers */
html body #surahGrid .surah-card[data-number="96"],
html body #surahGrid .surah-card[data-number="96"]:hover,
html body #surahGrid .surah-card[data-number="96"] .surah-main,
html body #surahGrid .surah-card[data-number="96"]:hover .surah-main{
  background:#e8f6ec !important;
  background-color:#e8f6ec !important;
  background-image:none !important;
}
@media(max-width:1200px){
 html body #surahGrid .surah-card[data-number="96"],
 html body #surahGrid .surah-card[data-number="96"] .surah-main{background:#e8f6ec !important}
}
@media(max-width:760px){
 html body #surahGrid .surah-card[data-number="96"],
 html body #surahGrid .surah-card[data-number="96"] .surah-main{background:#e8f6ec !important}
}
@media(max-width:430px){
 html body #surahGrid .surah-card[data-number="96"],
 html body #surahGrid .surah-card[data-number="96"] .surah-main{background:#e8f6ec !important}
}

/* Account / authentication */
.account-header-btn{display:inline-flex!important;align-items:center;gap:7px;min-height:42px;padding:8px 14px!important;border:1px solid rgba(11,93,67,.25)!important;border-radius:999px;color:#0b5d43!important;background:#fff;text-decoration:none!important;font-weight:700;white-space:nowrap;line-height:1!important}
.account-header-btn:hover,.account-header-btn:focus-visible{background:#eef7f1!important;border-color:#0b5d43!important;outline:3px solid rgba(11,93,67,.12);outline-offset:2px}
@media(max-width:620px){.account-header-btn{min-height:44px;padding:8px 11px!important}.account-header-btn span:last-child{max-width:86px;overflow:hidden;text-overflow:ellipsis}}

/* Production account button — aligned with the site's green/gold design */
.header-account{display:flex;align-items:center;justify-content:center}
.account-header-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-height:38px!important;padding:7px 13px!important;border:1px solid rgba(199,168,79,.72)!important;border-radius:999px!important;color:#0b5d43!important;background:rgba(255,255,255,.92)!important;text-decoration:none!important;font-weight:700!important;white-space:nowrap!important;line-height:1!important;box-shadow:0 4px 14px rgba(23,61,44,.07)}
.account-header-btn .account-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.account-header-btn:hover,.account-header-btn:focus-visible{background:#f8f3df!important;border-color:#b89436!important;color:#074b36!important;outline:3px solid rgba(199,168,79,.16)!important;outline-offset:2px!important}
@media(max-width:620px){.account-header-btn{min-height:40px!important;padding:7px 10px!important}.account-header-btn span{max-width:92px;overflow:hidden;text-overflow:ellipsis}}
/* Account button v2: aligned with language selector, no person icon. */
.main-nav .header-account{display:inline-flex!important;align-items:center!important;margin:0 2px!important;order:-1}
.main-nav .lang-v40{order:-2!important}
.account-header-btn{height:38px!important;min-height:38px!important;min-width:38px!important;padding:0 14px!important;border:1px solid rgba(199,168,79,.72)!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;background:rgba(255,255,255,.94)!important;color:#0b5d43!important;text-decoration:none!important;font-weight:700!important;box-shadow:0 4px 14px rgba(23,61,44,.07)!important}
.account-header-btn.has-avatar{width:38px!important;padding:0!important;overflow:hidden!important;border-radius:50%!important}
.account-avatar{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important}
@media(max-width:900px){.main-nav .header-account{order:-1!important}.main-nav .lang-v40{order:-2!important}}


/* vAccount-final — language + account stay together on one navigation row */
.main-nav .lang-v40,
.main-nav .header-account{flex:0 0 auto!important;align-self:center!important;margin:0!important;order:0!important}
.main-nav .lang-v40{order:-20!important}
.main-nav .header-account{order:-19!important}
.main-nav .lang-v40-button,.main-nav .account-header-btn{height:40px!important;min-height:40px!important;box-sizing:border-box!important}
.main-nav .account-header-btn{border-radius:999px!important;padding:0 15px!important}
.main-nav .account-header-btn.has-avatar{width:40px!important;min-width:40px!important;height:40px!important;padding:0!important;border-radius:50%!important;overflow:hidden!important;aspect-ratio:1/1!important}
.main-nav .account-header-btn.has-avatar .account-avatar{width:40px!important;height:40px!important;border-radius:50%!important;object-fit:cover!important;display:block!important}
html[dir="rtl"] .main-nav{direction:rtl!important}
@media(max-width:820px){
 .main-nav{margin-top:0!important;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;overflow:visible!important;gap:10px 14px!important}
 .main-nav .lang-v40,.main-nav .header-account{display:inline-flex!important;flex:0 0 auto!important}
 .main-nav .header-search{flex:1 1 210px!important;max-width:280px!important}
}

/* v81 mobile header collision fix — explicit rows, no overlap */
@media (max-width:760px){
  .topbar{overflow:visible!important;z-index:200000!important}
  .main-nav{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    width:100%!important;
    gap:10px 12px!important;
    align-items:center!important;
    justify-items:stretch!important;
    overflow:visible!important;
    padding:4px 0 8px!important;
  }
  .main-nav .lang-v40{grid-column:1!important;grid-row:1!important;width:100%!important;min-width:0!important;margin:0!important;z-index:200020!important}
  .main-nav .lang-v40-button{width:100%!important;max-width:none!important;justify-content:center!important;height:42px!important}
  .main-nav .header-account{grid-column:2!important;grid-row:1!important;width:100%!important;min-width:0!important;margin:0!important;display:flex!important;justify-content:center!important}
  .main-nav .account-header-btn{width:100%!important;max-width:none!important;height:42px!important;min-height:42px!important}
  .main-nav .account-header-btn.has-avatar{width:42px!important;min-width:42px!important;height:42px!important;justify-self:center!important}
  .main-nav>a{grid-row:2!important;min-width:0!important;text-align:center!important;padding:9px 3px 8px!important;white-space:nowrap!important;font-size:clamp(13px,3.7vw,16px)!important}
  .main-nav>a:nth-of-type(1){grid-column:1!important}
  .main-nav>a:nth-of-type(2){grid-column:2!important}
  .main-nav>a:nth-of-type(3){grid-column:1!important;grid-row:3!important}
  .main-nav>a:nth-of-type(4){grid-column:2!important;grid-row:3!important}
  .main-nav .header-search{grid-column:1 / -1!important;grid-row:4!important;width:100%!important;max-width:none!important;min-width:0!important;margin:0!important}
  .main-nav .header-search input{width:100%!important;min-width:0!important}
  .lang-v40-menu{position:fixed!important;left:12px!important;right:12px!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 90px)!important;z-index:2147483000!important}
}
@media (max-width:380px){
  .main-nav{gap:8px!important}
  .main-nav>a{font-size:13px!important}
}

/* v86 — permanent low-glare black theme */
:root{color-scheme:dark;--night-bg:#000;--night-surface:#090a09;--night-surface-2:#101210;--night-text:#e3e5e4;--night-muted:#b7bdb9;--night-line:#343934;--night-gold:#d0b35b;--night-green:#72c7a5}
html,body{background:#000!important;color:var(--night-text)!important}
body{color-scheme:dark!important}
main,section,article,.page,.page-shell,.content,.content-wrap,.container,.section,.surah-section,.hadith-section{color:var(--night-text)}
h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,legend,strong,b,small,span{color:inherit}
a{color:var(--night-text)}
/* readable, low-glare surfaces */
.card,.panel,.box,.content-card,.surah-card,.surah-main,.hadith-card,.hadith-item,.feature-card,.search-results,.modal-content,.dropdown-content,.lang-v40-menu,.lang-v40-list,.header-search input,textarea,input,select{background:var(--night-surface)!important;color:var(--night-text)!important;border-color:var(--night-line)!important;box-shadow:none!important}
.surah-card:hover,.hadith-card:hover,.card:hover{background:var(--night-surface-2)!important}
input::placeholder,textarea::placeholder{color:#8f9691!important;opacity:1}
/* gold/green identity remains visible without bright glow */
.gold,.accent,.section-title,.surah-number,.arabic-title{color:var(--night-gold)!important;text-shadow:none!important}
button,.btn,.nav-button,.lang-v40-button,.account-header-btn{box-shadow:none!important}
.main-nav a,.site-footer,.site-footer a,.footer-inner,.footer-bank,.footer-legal{color:var(--night-text)!important}
.site-footer,.footer-inner{background:#000!important;border-color:var(--night-line)!important}
.repair-legal a{background:var(--night-surface)!important;color:var(--night-green)!important;border-color:var(--night-line)!important}
/* Quran and Hadith Arabic stays Arabic; only presentation changes */
[lang="ar"],.arabic,.arabic-text,.ayah-arabic,.hadith-arabic{color:#ece8dc!important;text-shadow:none!important}
.translation,.ayah-translation,.hadith-translation{color:var(--night-text)!important}
/* language menu must remain legible */
.lang-v40-menu,.lang-v40-menu *{color:var(--night-text)}
.lang-v40-menu input{background:#111!important;color:var(--night-text)!important;border-color:#3a403b!important}
.lang-v40-menu a:hover,.lang-v40-menu button:hover{background:#171a18!important}
/* reduce glare from pale blocks left by legacy page CSS */
[style*="background:#fff"],[style*="background: #fff"],[style*="background:white"],[style*="background: white"],[style*="background-color:#fff"],[style*="background-color: #fff"]{background-color:var(--night-surface)!important;color:var(--night-text)!important}
@media(max-width:760px){body{background:#000!important}.topbar,.main-nav{background:#000!important}}

/* v87 — refined dark palette from user review */
:root{
 --v87-frame:#3f4542;
 --v87-panel:#202422;
 --v87-card:#171a18;
 --v87-text:#79d7b1;
 --v87-active:#0b5d43;
 --v87-line:#555d58;
}
/* 1 + 5: charcoal outer frame; dark-gray content bands instead of white/black */
html{background:var(--v87-frame)!important}
body{background:var(--v87-panel)!important;color:var(--v87-text)!important}
.quick-actions,.surah-section,.site-footer,.footer-inner,.topbar,.main-nav,.hadith-section,.page,.page-shell,.content,.content-wrap,.container,.section{background:var(--v87-panel)!important;color:var(--v87-text)!important}
/* search field must not be black */
.header-search,.header-search input,.search-box,.search-box input{background:#e8e9e7!important;color:#173d2c!important;border-color:#9da7a1!important}
.header-search input::placeholder,.search-box input::placeholder{color:#66716b!important}
.header-search .search-icon,.search-box span{color:var(--v87-active)!important}
/* 2: language + login strong site green */
.lang-v40-button,.account-header-btn,.lang-v40-button *,.account-header-btn *{color:var(--v87-active)!important;font-weight:800!important}
.lang-v40-button,.account-header-btn{background:#e8e9e7!important;border-color:#8d9b94!important}
/* 3: gray gutters and identical Surah cards, including Al-Alaq */
.surah-grid{background:var(--v87-frame)!important;gap:12px!important}
#surahGrid .surah-card,#surahGrid .surah-card:hover,#surahGrid .surah-card .surah-main,#surahGrid .surah-card:hover .surah-main,
html body #surahGrid .surah-card[data-number="96"],html body #surahGrid .surah-card[data-number="96"] .surah-main{background:var(--v87-card)!important;background-color:var(--v87-card)!important;background-image:none!important;border-color:var(--v87-line)!important}
/* 4: general text takes the same green family as footer controls */
.surah-name h3,.surah-name p,.surah-meta,.section-heading,.section-heading p,.section-heading h2,.section-kicker,.action-card,.action-card b,.action-card small,.footer-rights,.site-builder-credit{color:var(--v87-text)!important}
.main-number{background:var(--v87-active)!important;color:#f3f6f4!important}.revelation-number,.revelation-number *{color:var(--v87-text)!important}
/* footer panels become the reference gray and stay consistent */
.site-footer .bank-card,.site-footer .payment-guidance{background:var(--v87-frame)!important;color:#e3e5e4!important;border-color:var(--v87-line)!important}
.site-footer .bank-card strong,.site-footer .footer-legal a,.repair-legal a{color:var(--v87-text)!important}
.site-footer .footer-legal a,.repair-legal a{background:var(--v87-card)!important;border-color:var(--v87-line)!important}
/* language dropdown remains readable */
.lang-v40-menu,.global-lang-search,.global-lang-items,.global-lang-note{background:var(--v87-panel)!important;color:var(--v87-text)!important}
.global-lang-search input{background:#e8e9e7!important;color:#173d2c!important}
.global-lang-items .lang-v40-option{background:var(--v87-panel)!important;color:var(--v87-text)!important}
.global-lang-items .lang-v40-option:hover,.global-lang-items .lang-v40-option:focus{background:#303633!important;color:#9be7c8!important}
@media(max-width:760px){html,body{background:var(--v87-panel)!important}.topbar,.main-nav,.quick-actions,.surah-section,.site-footer,.footer-inner{background:var(--v87-panel)!important}}

/* v88 — Quran.com-inspired restrained dark palette */
:root{--v88-outer:#171a18;--v88-inner:#3f4542;--v88-control:#3f4542;--v88-text:#f2f4f3;--v88-muted:#cbd0cd;--v88-green:#2ca77b;--v88-line:#5b625e;--v88-shadow:0 8px 22px rgba(0,0,0,.32)}
html{background:var(--v88-outer)!important}
body,.page-shell,.site-shell,.surah-section,.quick-actions,.topbar,.footer,.site-footer,.footer-inner,.placeholder-page{background:var(--v88-inner)!important;color:var(--v88-text)!important}
/* controls/cards: same tone as inner site, separated by a soft black edge */
.action-card,.surah-card,.order-toggle,.lang,.view-switch button,.mini-btn,.search-box,.language-dropdown,.language-menu,.lang-menu,.site-footer .bank-card,.site-footer .payment-guidance,.site-footer .footer-legal a,.placeholder-card{background:var(--v88-control)!important;color:var(--v88-text)!important;border-color:var(--v88-line)!important;box-shadow:var(--v88-shadow)!important}
.search-box input,.search-box input::placeholder{color:var(--v88-text)!important}.search-box input::placeholder{opacity:.68}
.action-card b,.surah-name h3,.section-heading h2,.section-kicker,.footer b,.site-footer,.site-footer a,.site-footer .bank-card strong,.main-nav a,.brand,.order-toggle,.lang,.language-button,.login-button,.auth-link{color:var(--v88-text)!important}
.action-card small,.surah-name p,.surah-meta,.section-heading p:last-child,.footer,.eyebrow{color:var(--v88-muted)!important}
/* green appears as interaction/active feedback, not as default label color */
a:hover,a:focus-visible,button:hover,button:focus-visible,.main-nav a:hover,.main-nav a.active,.action-card:hover b,.surah-card:hover h3,.site-footer .footer-legal a:hover{color:var(--v88-green)!important}
.main-nav a.active{border-color:var(--v88-green)!important}
.action-icon,.action-card i,.search-box span,.order-icon,.revelation-number{color:var(--v88-text)!important}
.main-number,.view-switch button.active,#backToTop{background:var(--v88-green)!important;color:#fff!important}
.surah-grid{gap:16px!important}.surah-card{border-color:var(--v88-line)!important}
@media(min-width:761px){body{box-shadow:0 0 0 1px rgba(255,255,255,.04),0 18px 60px rgba(0,0,0,.35)!important}}

/* v89 — Surah 96 behaves exactly like every other Surah card */
html body #surahGrid .surah-card[data-number="96"],
html body #surahGrid .surah-card[data-number="96"] .surah-main{
  background:var(--v88-control)!important;
  background-color:var(--v88-control)!important;
  background-image:none!important;
  color:var(--v88-text)!important;
  border-color:var(--v88-line)!important;
  box-shadow:var(--v88-shadow)!important;
}
html body #surahGrid .surah-card[data-number="96"]:hover,
html body #surahGrid .surah-card[data-number="96"]:focus-within,
html body #surahGrid .surah-card[data-number="96"]:hover .surah-main,
html body #surahGrid .surah-card[data-number="96"]:focus-within .surah-main{
  background:var(--v88-control)!important;
  background-color:var(--v88-control)!important;
  background-image:none!important;
  color:var(--v88-text)!important;
  border-color:var(--v88-line)!important;
  box-shadow:var(--v88-shadow)!important;
}
html body #surahGrid .surah-card[data-number="96"]:hover h3,
html body #surahGrid .surah-card[data-number="96"]:focus-within h3{
  color:var(--v88-green)!important;
}

/* v90 — unified control language; no permanent active underline */
:root{--v90-bg:#3f4542;--v90-control:#3f4542;--v90-text:#f2f4f3;--v90-green:#2ca77b;--v90-border:#5b625e;--v90-shadow:0 7px 20px rgba(0,0,0,.30)}
/* Bismillah as a readable pill/control */
.brand-cluster{display:flex!important;justify-content:center!important;align-items:center!important;padding:10px 12px!important}
.brand-title{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:46px!important;padding:9px 22px!important;border:1px solid var(--v90-border)!important;border-radius:999px!important;background:var(--v90-control)!important;color:var(--v90-text)!important;box-shadow:var(--v90-shadow)!important;text-decoration:none!important;font-size:clamp(16px,1.55vw,21px)!important;font-weight:700!important;line-height:1.35!important;text-align:center!important}
.brand-title:hover,.brand-title:focus-visible{color:var(--v90-green)!important}
/* Main navigation: same visual language as all other controls */
.main-nav>a,.nav-home,.nav-hadith,.nav-about,.nav-contact{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;padding:8px 15px!important;border:1px solid var(--v90-border)!important;border-radius:999px!important;background:var(--v90-control)!important;color:var(--v90-text)!important;box-shadow:var(--v90-shadow)!important;text-decoration:none!important}
.main-nav>a.active,.main-nav>a[data-active="true"],.main-nav>a:hover,.main-nav>a:focus-visible{background:var(--v90-control)!important;border-color:var(--v90-border)!important;border-bottom-color:var(--v90-border)!important;color:var(--v90-green)!important}
.main-nav>a::after,.main-nav>a.active::after,.main-nav>a[data-active="true"]::after{display:none!important;content:none!important}
/* Quick actions: no default selected tile or underline */
.quick-actions .action-card,.quick-actions .action-card.active,.quick-actions .action-card[data-active="true"]{background:var(--v90-control)!important;color:var(--v90-text)!important;border:1px solid var(--v90-border)!important;box-shadow:var(--v90-shadow)!important}
.quick-actions .action-card::after,.quick-actions .action-card.active::after,.quick-actions .action-card[data-active="true"]::after{display:none!important;content:none!important}
.quick-actions .action-card:hover,.quick-actions .action-card:focus-visible{background:var(--v90-control)!important;border-color:var(--v90-border)!important}
.quick-actions .action-card:hover b,.quick-actions .action-card:focus-visible b,.quick-actions .action-card:hover .action-icon,.quick-actions .action-card:focus-visible .action-icon,.quick-actions .action-card:hover i,.quick-actions .action-card:focus-visible i{color:var(--v90-green)!important}
/* Every Surah card now uses the same control background and interaction */
#surahGrid .surah-card,#surahGrid .surah-card .surah-main,#surahGrid .surah-card[data-number="96"],#surahGrid .surah-card[data-number="96"] .surah-main{background:var(--v90-control)!important;background-color:var(--v90-control)!important;background-image:none!important;color:var(--v90-text)!important;border-color:var(--v90-border)!important;box-shadow:var(--v90-shadow)!important}
#surahGrid .surah-card:hover,#surahGrid .surah-card:focus-within,#surahGrid .surah-card:hover .surah-main,#surahGrid .surah-card:focus-within .surah-main{background:var(--v90-control)!important;background-color:var(--v90-control)!important;border-color:var(--v90-border)!important;box-shadow:var(--v90-shadow)!important}
#surahGrid .surah-card:hover h3,#surahGrid .surah-card:focus-within h3{color:var(--v90-green)!important}
#surahGrid .surah-card:not(:hover):not(:focus-within) h3{color:var(--v90-text)!important}
/* remove legacy green bottom rules globally from these controls */
.action-card:before,.action-card:after,.main-nav>a:before,.main-nav>a:after{border-bottom:0!important;box-shadow:none!important}
@media(max-width:760px){.brand-title{font-size:16px!important;padding:9px 16px!important;max-width:calc(100vw - 32px)!important}.main-nav>a{min-height:40px!important;padding:7px 12px!important}}

/* v91 — clean flat header/control treatment requested by owner */
:root{--v91-bg:var(--v88-inner,#3f4542);--v91-text:#f2f4f3;--v91-green:var(--v88-green,#2ca77b);--v91-shadow:0 7px 20px rgba(0,0,0,.30)}
/* Bismillah is a heading, not a button/card */
.brand-cluster{padding:12px 12px 10px!important;background:var(--v91-bg)!important}
.brand-title{display:block!important;min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--v91-text)!important;font-size:clamp(16px,1.55vw,21px)!important;font-weight:700!important;line-height:1.45!important;text-align:center!important}
.brand-title:hover,.brand-title:focus-visible{color:var(--v91-text)!important}
/* Header/nav strip uses exactly the same site background */
.topbar,.main-nav{background:var(--v91-bg)!important;border:0!important;box-shadow:none!important}
/* Remove decorative separator lines throughout the main UI */
.topbar,.main-nav,.quick-actions,.surah-section,.section-heading,.footer,.site-footer,.footer-inner{border-color:transparent!important}
/* Main navigation matches the quick-action cards */
.main-nav>a,.nav-home,.nav-hadiths,.nav-about,.nav-contact,
.quick-actions .action-card{background:var(--v91-bg)!important;color:var(--v91-text)!important;border:0!important;border-radius:12px!important;box-shadow:var(--v91-shadow)!important;text-decoration:none!important}
.main-nav>a:hover,.main-nav>a:focus-visible,.nav-home:hover,.nav-hadiths:hover,.nav-about:hover,.nav-contact:hover,
.quick-actions .action-card:hover,.quick-actions .action-card:focus-visible{background:var(--v91-bg)!important;color:var(--v91-green)!important;border:0!important}
.main-nav>a.active,.main-nav>a[data-active="true"],.nav-home.active{background:var(--v91-bg)!important;color:var(--v91-text)!important;border:0!important;box-shadow:var(--v91-shadow)!important}
.main-nav>a.active:hover,.main-nav>a[data-active="true"]:hover,.nav-home.active:hover{color:var(--v91-green)!important}
.main-nav>a::before,.main-nav>a::after,.main-nav>a.active::before,.main-nav>a.active::after,.quick-actions .action-card::before,.quick-actions .action-card::after{display:none!important;content:none!important;border:0!important;box-shadow:none!important}
/* language/login stay readable but no bright/extra border lines */
.lang-v40-button,.account-header-btn{border:0!important;box-shadow:var(--v91-shadow)!important}
/* Surah cards: no thin outline; separation comes from shadow/gap only */
#surahGrid .surah-card,#surahGrid .surah-card .surah-main{border:0!important}
@media(max-width:760px){.brand-cluster{padding-top:10px!important}.main-nav{border-top:0!important}}

/* Unified surface + controls */
:root{--v93-surface:var(--v88-inner,#3f4542);--v93-text:#f2f4f3;--v93-green:var(--v88-green,#2ca77b);--v93-shadow:0 7px 20px rgba(0,0,0,.30)}
html,body{background:var(--v93-surface)!important}
body,.page-shell,.site-shell,.page,.content,.content-wrap,.container,.topbar,.main-nav,.brand-cluster,.quick-actions,.surah-section,.hadith-section,.footer,.site-footer,.footer-inner,.placeholder-page{background:var(--v93-surface)!important}
/* Header navigation labels use the same white as other action cards. */
.main-nav>a,.main-nav>a.active,.main-nav>a[data-active="true"],.nav-home,.nav-hadith,.nav-hadiths,.nav-about,.nav-contact{color:var(--v93-text)!important;background:var(--v93-surface)!important}
.main-nav>a:hover,.main-nav>a:focus-visible,.nav-home:hover,.nav-hadith:hover,.nav-hadiths:hover,.nav-about:hover,.nav-contact:hover{color:var(--v93-green)!important}
/* Language, account/login and Surah search now share the same control palette. */
.lang-v40-button,.account-header-btn,.header-search,.search-box{background:var(--v93-surface)!important;color:var(--v93-text)!important;border:0!important;box-shadow:var(--v93-shadow)!important}
.lang-v40-button *,.account-header-btn *{color:inherit!important}
.header-search input,.search-box input{background:transparent!important;color:var(--v93-text)!important;border:0!important;box-shadow:none!important}
.header-search input::placeholder,.search-box input::placeholder{color:var(--v93-text)!important;opacity:.72!important}
.header-search .search-icon,.search-box span{color:var(--v93-text)!important}
.lang-v40-button:hover,.lang-v40-button:focus-visible,.account-header-btn:hover,.account-header-btn:focus-visible,.header-search:focus-within,.search-box:focus-within{color:var(--v93-green)!important}
.lang-v40-button:hover *,.lang-v40-button:focus-visible *,.account-header-btn:hover *,.account-header-btn:focus-visible *,.header-search:focus-within .search-icon,.search-box:focus-within span{color:var(--v93-green)!important}
/* No contrasting outer canvas/frame on wide screens. */
@media(min-width:761px){html,body{background:var(--v93-surface)!important}body{box-shadow:none!important}}

/* v94 — remove ornamental frame lines around the main site */
html body{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
body::before,
body::after{
  content:none!important;
  display:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:none!important;
}

/* v95 — force normal header navigation labels to the unified off-white.
   Hover/focus remains green. */
#mainNav > a.nav-hadiths,
#mainNav > a.nav-about,
#mainNav > a.nav-contact,
#mainNav > a.nav-home {
  color: var(--v93-text, #f2f4f3) !important;
  -webkit-text-fill-color: var(--v93-text, #f2f4f3) !important;
}
#mainNav > a.nav-hadiths:hover,
#mainNav > a.nav-hadiths:focus-visible,
#mainNav > a.nav-about:hover,
#mainNav > a.nav-about:focus-visible,
#mainNav > a.nav-contact:hover,
#mainNav > a.nav-contact:focus-visible,
#mainNav > a.nav-home:hover,
#mainNav > a.nav-home:focus-visible {
  color: var(--v93-green, #2ca77b) !important;
  -webkit-text-fill-color: var(--v93-green, #2ca77b) !important;
}