/* ============================================================
   THEME VARIABLES — Soft eye-friendly palettes
   ============================================================ */
:root{
  --font-ui:'Tajawal','IBM Plex Sans Arabic',sans-serif;
  --font-content:'Noto Naskh Arabic',serif;
  --font-lat:'Inter',sans-serif;
  --font-urdu:'Noto Nastaliq Urdu',serif;

  --canvas:#131418;
  --canvas-grad-1:rgba(223,183,117,0.07);
  --canvas-grad-2:rgba(86,146,245,0.05);
  --card-bg:rgba(28,30,36,0.82);
  --card-bg-solid:#1c1e24;
  --card-border:rgba(223,183,117,0.24);
  --gold:#dfb775;
  --gold-matte:#c9a35c;
  --gold-soft:rgba(223,183,117,0.14);
  --text-primary:#ece6da;
  --text-secondary:#a9a298;
  --text-muted:#767067;
  --accent-water:#5e9bf7;
  --accent-water-soft:rgba(94,155,247,0.14);
  --accent-impure:#e97264;
  --accent-impure-soft:rgba(233,114,100,0.14);
  --accent-purple:#b785e8;
  --accent-purple-soft:rgba(183,133,232,0.14);
  --accent-teal:#3cc9a8;
  --accent-teal-soft:rgba(60,201,168,0.14);
  --accent-brown:#c79a5b;
  --accent-brown-soft:rgba(199,154,91,0.14);
  --sidebar-bg:rgba(19,20,24,0.88);
  --tab-bg:rgba(255,255,255,0.04);
  --glow:rgba(223,183,117,0.35);
  --shadow:0 24px 70px rgba(0,0,0,0.5);
  --hairline:rgba(255,255,255,0.08);
}
[data-theme="light"]{
  --canvas:#f4f1ea;
  --canvas-grad-1:rgba(179,143,79,0.10);
  --canvas-grad-2:rgba(86,146,245,0.06);
  --card-bg:#fbf8f1;
  --card-bg-solid:#fbf8f1;
  --card-border:rgba(179,143,79,0.30);
  --gold:#9a7a3a;
  --gold-matte:#7c6230;
  --gold-soft:rgba(179,143,79,0.12);
  --text-primary:#3a3225;
  --text-secondary:#6b6253;
  --text-muted:#8f8775;
  --accent-water:#2f6fd0;
  --accent-water-soft:rgba(47,111,208,0.14);
  --accent-impure:#cf4438;
  --accent-impure-soft:rgba(207,68,56,0.14);
  --accent-purple:#8b47b8;
  --accent-purple-soft:rgba(139,71,184,0.14);
  --accent-teal:#1f9c7c;
  --accent-teal-soft:rgba(31,156,124,0.14);
  --accent-brown:#9a6f2e;
  --accent-brown-soft:rgba(154,111,46,0.14);
  --sidebar-bg:rgba(248,244,234,0.92);
  --tab-bg:rgba(60,45,25,0.05);
  --glow:rgba(179,143,79,0.30);
  --shadow:0 24px 70px rgba(120,100,60,0.16);
  --hairline:rgba(60,45,25,0.12);
}

*,*::before,*::after{
  transition:background-color .5s cubic-bezier(0.4,0,0.2,1),
             color .5s cubic-bezier(0.4,0,0.2,1),
             border-color .5s cubic-bezier(0.4,0,0.2,1),
             box-shadow .5s cubic-bezier(0.4,0,0.2,1),
             fill .5s cubic-bezier(0.4,0,0.2,1),
             stroke .5s cubic-bezier(0.4,0,0.2,1),
             opacity .35s cubic-bezier(0.4,0,0.2,1);
}
html,body{height:100%;}
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 85% -10%, var(--canvas-grad-1), transparent 60%),
    radial-gradient(1000px 600px at -10% 110%, var(--canvas-grad-2), transparent 55%),
    var(--canvas);
  color:var(--text-primary);
  font-family:var(--font-lat);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  padding-top:env(safe-area-inset-top);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  padding-bottom:env(safe-area-inset-bottom);
}
body.lang-ar{ font-family:var(--font-ui); }
body.lang-ur{ font-family:var(--font-urdu); line-height:2.2; }

.content-font{ font-family:var(--font-content); }
body.lang-en .content-font, body.lang-fr .content-font, body.lang-ru .content-font{ font-family:var(--font-lat); }
body.lang-ur .content-font{ font-family:var(--font-urdu); }

h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:.2px; }
a{ color:var(--gold); text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

:root{ --fs-scale:1; }

::view-transition-old(root),::view-transition-new(root){ animation:none; mix-blend-mode:normal; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; }
}

/* ============================================================
   HEADER
   ============================================================ */
.app-header{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  padding:16px clamp(16px,4vw,42px);
  background:var(--sidebar-bg);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--card-border);
}
.brand{ display:flex; align-items:center; gap:16px; min-width:0; }
.brand-mark{
  width:54px; height:54px; flex:0 0 auto;
  display:grid; place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg,var(--gold-soft),transparent);
  border:1px solid var(--card-border);
  box-shadow:0 0 24px -6px var(--glow);
}
.brand-mark svg{ width:38px; height:38px; }
.brand-text{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.brand-title{
  font-family:'Noto Naskh Arabic',serif;
  font-size:clamp(1.45rem,3.8vw,2.05rem);
  font-weight:700;
  line-height:1.25;
  letter-spacing:.3px;
  background:linear-gradient(100deg,var(--gold-matte),var(--gold) 55%,var(--gold-matte));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--gold);
  white-space:nowrap;
  padding-bottom:4px;
  position:relative;
}
.brand-title::after{
  content:""; display:block;
  width:46px; height:2px; margin-top:8px;
  background:linear-gradient(90deg,var(--gold),transparent);
  border-radius:2px; opacity:.8;
}
body.lang-en .brand-title,body.lang-fr .brand-title,body.lang-ru .brand-title{ font-family:var(--font-lat); letter-spacing:.4px; }
body.lang-ur .brand-title{ font-family:var(--font-urdu); }
.brand-tagline{
  font-size:.82rem; color:var(--text-secondary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-top:2px;
}

.controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.ctrl{
  position:relative;
  display:inline-grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--tab-bg);
  border:1px solid var(--card-border);
  color:var(--text-primary);
  transition:transform .25s cubic-bezier(0.4,0,0.2,1),
             background-color .5s, border-color .5s, color .5s, box-shadow .35s;
}
.ctrl:hover{ transform:translateY(-2px); border-color:var(--gold); box-shadow:0 0 18px -4px var(--glow); color:var(--gold); }
.ctrl:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.ctrl.on{ background:var(--gold-soft); border-color:var(--gold); color:var(--gold); }
.ic-ico{ display:grid; place-items:center; font-size:1.1rem; font-weight:700; }
.ic-ico svg{ width:21px; height:21px; display:block; }
.tip{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--card-bg-solid); color:var(--text-primary);
  border:1px solid var(--card-border); border-radius:8px;
  padding:5px 9px; font-size:.72rem; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s;
  box-shadow:var(--shadow); z-index:80;
}
.ctrl:hover .tip{ opacity:1; }

.flag{ width:26px; height:26px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 1px var(--card-border); display:block; }
.flag svg{ width:100%; height:100%; display:block; }

.lang-wrap{ position:relative; }
.lang-menu{
  position:absolute; top:calc(100% + 12px);
  inset-inline-end:0;
  min-width:176px;
  background:var(--card-bg-solid);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:6px;
  box-shadow:var(--shadow);
  display:none; z-index:90;
}
.lang-menu.open{ display:block; animation:pop .22s cubic-bezier(0.4,0,0.2,1); }
@keyframes pop{ from{opacity:0; transform:translateY(-6px) scale(.97);} to{opacity:1; transform:none;} }
.lang-opt{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:9px 10px; border-radius:10px;
  background:transparent; border:0; color:var(--text-primary);
  text-align:start; font-size:.9rem; font-family:var(--font-ui);
}
body.lang-en .lang-opt,body.lang-fr .lang-opt,body.lang-ru .lang-opt{ font-family:var(--font-lat); }
body.lang-ur .lang-opt{ font-family:var(--font-urdu); }
.lang-opt:hover{ background:var(--gold-soft); color:var(--gold); }
.lang-opt.active{ color:var(--gold); background:var(--gold-soft); }
.lang-opt .flag{ width:24px; height:24px; }

/* ============================================================
   LAYOUT
   ============================================================ */
.shell{
  display:grid;
  grid-template-columns:clamp(260px,27%,340px) 1fr;
  gap:clamp(16px,2.5vw,30px);
  padding:clamp(16px,2.5vw,30px);
  align-items:start;
  max-width:1520px; margin:0 auto;
  overflow:hidden;
}

.sidebar{
  position:sticky; top:100px;
  background:var(--card-bg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--card-border);
  border-radius:20px;
  padding:16px;
  box-shadow:var(--shadow);
  max-height:calc(100vh - 124px);
  display:flex; flex-direction:column;
}
.sidebar-head{ display:flex; align-items:center; gap:10px; padding:2px 6px 12px; }
.sidebar-head .ico{ color:var(--gold); display:grid; place-items:center; }
.sidebar-head .ico svg{ width:20px; height:20px; }
.sidebar-head h2{ font-size:.82rem; text-transform:uppercase; letter-spacing:2px; color:var(--gold-matte); }

.search-box{ position:relative; margin-bottom:12px; }
.search-box input{
  width:100%; box-sizing:border-box;
  padding:13px 40px 13px 40px;
  background:var(--tab-bg);
  border:1px solid var(--card-border);
  border-radius:13px;
  color:var(--text-primary); font-size:.92rem; font-family:inherit;
}
.search-box input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.search-box .ic-search{ position:absolute; inset-inline-start:13px; top:50%; transform:translateY(-50%); color:var(--text-muted); display:grid; place-items:center; }
.search-box .ic-search svg{ width:17px; height:17px; }
.search-box .ic-clear{
  position:absolute; inset-inline-end:10px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%; border:0;
  background:var(--card-border); color:var(--text-secondary);
  display:none; place-items:center; font-size:.85rem; line-height:1;
}
.search-box.has-val .ic-clear{ display:grid; }
.search-box .ic-clear:hover{ background:var(--gold); color:#1a1206; }

.issues{ list-style:none; margin:0; padding:0; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.issues::-webkit-scrollbar{ width:8px; }
.issues::-webkit-scrollbar-thumb{ background:var(--card-border); border-radius:8px; }
.bab-group{ margin-bottom:8px; }
.bab-head{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px 6px; margin-top:6px;
  font-size:.72rem; letter-spacing:1px; text-transform:uppercase;
  color:var(--gold-matte); font-weight:700;
}
.bab-head::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:.7; }
.bab-head.bab-wudu::before{ background:var(--accent-water); }
.bab-head.bab-wudu{ color:var(--accent-water); }
.bab-head.bab-khuff::before{ background:var(--accent-purple); }
.bab-head.bab-khuff{ color:var(--accent-purple); }
.bab-head.bab-nawaqid::before{ background:var(--accent-impure); }
.bab-head.bab-nawaqid{ color:var(--accent-impure); }
.bab-head.bab-ghusl::before{ background:var(--accent-teal); }
.bab-head.bab-ghusl{ color:var(--accent-teal); }
.bab-head.bab-tayammum::before{ background:var(--accent-brown); }
.bab-head.bab-tayammum{ color:var(--accent-brown); }
.bab-head.bab-najasah::before{ background:var(--accent-impure); }
.bab-head.bab-najasah{ color:var(--accent-impure); }
.bab-head.bab-hayd::before{ background:var(--accent-purple); }
.bab-head.bab-hayd{ color:var(--accent-purple); }
.bab-head .bab-count{ margin-left:auto; font-size:.68rem; font-weight:500; color:var(--text-muted); }
.issue-item{
  display:flex; align-items:center; gap:12px;
  padding:12px;
  border-radius:13px;
  border:1px solid transparent;
  background:var(--tab-bg);
  color:var(--text-secondary);
  cursor:pointer;
  text-align:start; width:100%; font-family:inherit; font-size:.92rem;
  transition:transform .25s cubic-bezier(0.4,0,0.2,1),
             background-color .5s, border-color .5s, color .5s, box-shadow .35s;
}
.issue-item:hover{ transform:translateY(-2px); border-color:var(--card-border); color:var(--text-primary); box-shadow:0 0 18px -8px var(--glow); }
.issue-item.active{
  background:linear-gradient(135deg,var(--gold-soft),transparent);
  border-color:var(--gold);
  color:var(--text-primary);
  box-shadow:0 0 22px -8px var(--glow);
}
.issue-num{
  flex:0 0 auto; width:32px; height:32px; border-radius:10px;
  display:grid; place-items:center; font-weight:700; font-size:.86rem;
  background:var(--card-bg-solid); border:1px solid var(--card-border); color:var(--gold);
}
.issue-item.active .issue-num{ background:var(--gold); color:#1a1206; border-color:var(--gold); }
.issue-title{ line-height:1.5; }
.issue-title mark{ background:var(--gold-soft); color:var(--gold); border-radius:3px; padding:0 2px; }

/* ============================================================
   HUB
   ============================================================ */
.hub{ display:flex; flex-direction:column; gap:20px; min-width:0; }

.issue-card{
  background:var(--card-bg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--card-border);
  border-radius:22px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-head{
  padding:clamp(18px,3vw,28px);
  border-bottom:1px solid var(--hairline);
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.head-meta{ min-width:0; flex:1; }
.kicker{ display:inline-flex; align-items:center; gap:9px; font-size:.74rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-matte); }
.kicker .ico{ color:var(--gold); display:grid; place-items:center; }
.kicker .ico svg{ width:18px; height:18px; }
.head-meta h1{ font-size:calc(1.7rem * var(--fs-scale)); margin-top:12px; color:var(--text-primary); line-height:1.4; font-weight:700; }
.bab-pill{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:6px 14px; border-radius:999px; background:linear-gradient(135deg,var(--gold-soft),var(--accent-water-soft)); border:1px solid var(--hairline); color:var(--gold-matte); font-size:.82rem; font-weight:600; }
.bab-pill::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.bab-pill.bab-wudu{ background:linear-gradient(135deg,var(--accent-water-soft),var(--gold-soft)); }
.bab-pill.bab-wudu::before{ background:var(--accent-water); box-shadow:0 0 0 3px var(--accent-water-soft); }
.bab-pill.bab-khuff{ background:linear-gradient(135deg,var(--accent-purple-soft),var(--gold-soft)); }
.bab-pill.bab-khuff::before{ background:var(--accent-purple); box-shadow:0 0 0 3px var(--accent-purple-soft); }
.bab-pill.bab-nawaqid{ background:linear-gradient(135deg,var(--accent-impure-soft),var(--gold-soft)); }
.bab-pill.bab-nawaqid::before{ background:var(--accent-impure); box-shadow:0 0 0 3px var(--accent-impure-soft); }
.bab-pill.bab-ghusl{ background:linear-gradient(135deg,var(--accent-teal-soft),var(--gold-soft)); }
.bab-pill.bab-ghusl::before{ background:var(--accent-teal); box-shadow:0 0 0 3px var(--accent-teal-soft); }
.bab-pill.bab-tayammum{ background:linear-gradient(135deg,var(--accent-brown-soft),var(--gold-soft)); }
.bab-pill.bab-tayammum::before{ background:var(--accent-brown); box-shadow:0 0 0 3px var(--accent-brown-soft); }
.bab-pill.bab-najasah{ background:linear-gradient(135deg,var(--accent-impure-soft),var(--gold-soft)); }
.bab-pill.bab-najasah::before{ background:var(--accent-impure); box-shadow:0 0 0 3px var(--accent-impure-soft); }
.bab-pill.bab-hayd{ background:linear-gradient(135deg,var(--accent-purple-soft),var(--gold-soft)); }
.bab-pill.bab-hayd::before{ background:var(--accent-purple); box-shadow:0 0 0 3px var(--accent-purple-soft); }

.diagram-box{
  flex:0 0 auto;
  width:clamp(160px,22%,220px);
  background:var(--tab-bg);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:10px;
  box-shadow:inset 0 0 20px -14px var(--glow);
}
.diagram-box .dlbl{ font-size:.58rem; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; text-align:center; }
.diagram-box svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 4px 10px rgba(0,0,0,.2)); max-height:130px; object-fit:contain; }

.tabs-wrap{ position:relative; padding:0 clamp(12px,3vw,22px); border-bottom:1px solid var(--hairline); }
.tabs{ position:relative; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:8px;
  padding:14px 14px;
  background:transparent; border:0;
  color:var(--text-secondary);
  font-size:calc(.86rem * var(--fs-scale)); font-weight:600;
  white-space:nowrap; border-bottom:2px solid transparent;
  transition:color .3s;
}
.tab .ico svg{ width:16px; height:16px; }
.tab:hover{ color:var(--text-primary); }
.tab.active{ color:var(--gold); }
.tab-indicator{
  position:absolute; bottom:-1px; left:0; z-index:1;
  height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold-matte),var(--gold),var(--gold-matte));
  box-shadow:0 0 12px var(--glow);
  transition:transform .42s cubic-bezier(0.4,0,0.2,1), width .42s cubic-bezier(0.4,0,0.2,1);
}

.article-body{ padding:clamp(18px,3vw,30px); font-size:calc(1.06rem * var(--fs-scale)); line-height:2.05; }
.section-block{ animation:fadeUp .45s cubic-bezier(0.4,0,0.2,1); }
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
.section-block h3{ display:flex; align-items:center; gap:12px; font-size:calc(1.06rem * var(--fs-scale)); color:var(--gold); margin-bottom:16px; }
.section-block h3 .pill{ font-size:.62rem; letter-spacing:1px; text-transform:uppercase; color:var(--gold-matte); border:1px solid var(--card-border); padding:4px 9px; border-radius:20px; background:var(--tab-bg); font-weight:700; }
.matn-quote{
  font-size:calc(1.3rem * var(--fs-scale));
  font-weight:500;
  background:var(--tab-bg);
  border-inline-start:4px solid var(--gold);
  border-radius:0 14px 14px 0;
  padding:22px 24px;
  color:var(--text-primary);
  box-shadow:inset 0 0 30px -22px var(--glow);
  line-height:2.2;
}
.body-text{ color:var(--text-primary); white-space:pre-line; }
.body-text + .body-text{ margin-top:14px; }
.evidence{
  margin-top:18px; padding:16px 18px; border-radius:12px;
  background:var(--tab-bg); border:1px solid var(--card-border);
  font-size:calc(.98rem * var(--fs-scale)); color:var(--text-secondary);
  white-space:pre-line;
}
.evidence-label{ display:block; color:var(--gold); font-weight:700; font-size:calc(.82rem * var(--fs-scale)); margin-bottom:6px; letter-spacing:.5px; }
.evidence-primary{
  margin-top:0;
  padding:clamp(18px,3vw,26px);
  background:linear-gradient(135deg,var(--gold-soft),var(--tab-bg));
  border:1px solid var(--gold);
  border-inline-start:4px solid var(--gold);
  color:var(--text-primary);
  font-size:calc(1.04rem * var(--fs-scale));
  line-height:2;
  box-shadow:inset 0 0 34px -26px var(--glow),0 12px 30px -24px var(--glow);
}
.evidence-primary .evidence-label{
  font-size:calc(.9rem * var(--fs-scale));
  letter-spacing:.7px;
}

.app-footer{ text-align:center; padding:30px 20px 40px; color:var(--text-muted); font-size:.8rem; line-height:1.9; }
.app-footer .sep{ color:var(--gold); margin:0 8px; }

/* Touch-friendly base — ensure minimum 44px tap targets */
@media (hover:none) and (pointer:coarse){
  .ctrl{ min-width:44px; min-height:44px; }
  .issue-item{ min-height:44px; }
  .tab{ min-height:44px; }
  .search-box input{ min-height:44px; }
  .welcome-close-x{ min-width:44px; min-height:44px; }
}

/* ============================================================
   RESPONSIVE DESIGN — Tablet + Phone + Small Phone
   ============================================================ */

/* --- TABLET (≤1024px): Sidebar collapses to horizontal scroll --- */
@media (max-width:1024px){
  .shell{
    grid-template-columns:1fr;
    gap:16px;
    padding:16px;
  }
  .sidebar{
    position:relative; top:auto;
    max-height:none;
    padding:14px;
    border-radius:16px;
  }
  .issues{
    flex-direction:row;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    padding-bottom:8px;
    gap:10px;
  }
  .issues::-webkit-scrollbar{ height:6px; }
  .issues::-webkit-scrollbar-thumb{ background:var(--card-border); border-radius:6px; }
  .bab-group{
    display:contents;
  }
  .bab-head{
    display:none;
  }
  .issue-item{
    flex:0 0 auto;
    width:clamp(200px,65%,320px);
    scroll-snap-align:start;
  }
  .brand-tagline{ display:none; }
}

/* --- SMALL TABLET / LARGE PHONE (≤768px): Compact header, refined cards --- */
@media (max-width:768px){
  .app-header{
    flex-wrap:wrap;
    padding:10px clamp(10px,3vw,16px);
    gap:8px;
  }
  .brand{ gap:8px; flex-shrink:1; }
  .brand-mark{ width:40px; height:40px; border-radius:11px; }
  .brand-mark svg{ width:28px; height:28px; }
  .brand-title{ font-size:clamp(1rem,4vw,1.35rem); }
  .brand-title::after{ width:26px; height:2px; margin-top:4px; }
  .brand-text{ gap:1px; }

  .controls{
    gap:4px;
    order:3;
    width:100%;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    padding-top:4px;
  }
  .ctrl{
    width:38px; height:38px;
    border-radius:10px;
  }
  .ctrl .tip{ display:none; }
  .ic-ico svg{ width:17px; height:17px; }
  .ic-ico{ font-size:.9rem; }
  .flag{ width:20px; height:20px; }

  .lang-menu{
    top:calc(100% + 6px);
    min-width:150px;
    border-radius:12px;
    padding:4px;
  }

  .card-head{
    flex-direction:column;
    padding:clamp(12px,3.5vw,20px);
    gap:12px;
  }
  .diagram-box{
    width:100%;
    max-width:280px;
    margin:0 auto;
    border-radius:14px;
    padding:10px;
  }
  .diagram-box svg{ max-height:110px; }
  .diagram-box .dlbl{ font-size:.56rem; }
  .head-meta h1{ font-size:calc(1.3rem * var(--fs-scale)); margin-top:8px; }

  .tabs-wrap{ padding:0 clamp(6px,2.5vw,14px); }
  .tab{
    padding:11px 8px;
    font-size:calc(.78rem * var(--fs-scale));
    gap:5px;
  }
  .tab .ico svg{ width:13px; height:13px; }

  .article-body{
    padding:clamp(12px,3.5vw,20px);
    font-size:calc(.95rem * var(--fs-scale));
    line-height:1.9;
  }
  .section-block h3{ font-size:calc(.92rem * var(--fs-scale)); gap:8px; margin-bottom:12px; }
  .matn-quote{
    font-size:calc(1.1rem * var(--fs-scale));
    padding:14px 16px;
    line-height:1.95;
  }
  .evidence{
    padding:10px 12px;
    font-size:calc(.86rem * var(--fs-scale));
    margin-top:12px;
  }

  .app-footer{ padding:16px 12px 24px; font-size:.72rem; }
}

/* --- PHONE (≤520px): Full mobile optimization --- */
@media (max-width:520px){
  html{ font-size:15px; }

  .app-header{
    padding:8px clamp(8px,3.5vw,14px);
    gap:6px;
  }
  .brand{ gap:6px; flex:1 1 auto; min-width:0; }
  .brand-mark{ width:34px; height:34px; border-radius:9px; }
  .brand-mark svg{ width:24px; height:24px; }
  .brand-title{
    font-size:clamp(.88rem,4.2vw,1.1rem);
    letter-spacing:0;
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
  }
  .brand-title::after{ width:20px; margin-top:3px; }

  .controls{
    gap:4px;
    padding:2px 0;
  }
  .ctrl{
    width:34px; height:34px;
    border-radius:9px;
    border-width:1px;
  }
  .ic-ico svg{ width:15px; height:15px; }
  .ic-ico{ font-size:.8rem; }
  .flag{ width:18px; height:18px; }

  .lang-menu{
    min-width:140px;
    font-size:.82rem;
  }
  .lang-opt{ padding:7px 7px; gap:7px; font-size:.82rem; }
  .lang-opt .flag{ width:18px; height:18px; }

  .shell{ padding:8px; gap:10px; }
  .sidebar{ padding:8px; border-radius:12px; }
  .sidebar-head{ padding:1px 3px 6px; gap:6px; }
  .sidebar-head h2{ font-size:.68rem; letter-spacing:1.2px; }
  .search-box{ margin-bottom:8px; }
  .search-box input{ padding:9px 32px; font-size:.82rem; border-radius:9px; }
  .issue-item{
    padding:8px;
    border-radius:9px;
    width:clamp(150px,70%,260px);
    font-size:.82rem;
    gap:7px;
  }
  .issue-num{ width:26px; height:26px; border-radius:7px; font-size:.74rem; }
  .issue-title{ font-size:.78rem; line-height:1.35; }

  .issue-card{ border-radius:14px; }
  .card-head{ padding:clamp(10px,3.5vw,16px); gap:10px; }
  .head-meta h1{ font-size:calc(1.1rem * var(--fs-scale)); margin-top:6px; line-height:1.3; }
  .kicker{ font-size:.64rem; gap:5px; }
  .kicker .ico svg{ width:12px; height:12px; }
  .bab-pill{ margin-top:6px; padding:4px 8px; font-size:.7rem; gap:4px; }
  .bab-pill::before{ width:5px; height:5px; }

  .diagram-box{
    padding:8px;
    border-radius:12px;
    max-width:220px;
  }
  .diagram-box svg{ max-height:90px; }
  .diagram-box .dlbl{ font-size:.52rem; letter-spacing:1px; margin-bottom:4px; }

  .tabs-wrap{ padding:0 clamp(4px,2.5vw,10px); }
  .tab{
    padding:9px 6px;
    font-size:calc(.7rem * var(--fs-scale));
    gap:4px;
  }
  .tab .pill{ display:none; }

  .article-body{
    padding:clamp(10px,3.5vw,16px);
    font-size:calc(.88rem * var(--fs-scale));
    line-height:1.85;
  }
  .section-block h3{
    font-size:calc(.84rem * var(--fs-scale));
    gap:6px;
    margin-bottom:10px;
  }
  .section-block h3 .pill{
    padding:2px 6px;
    font-size:.52rem;
  }
  .matn-quote{
    font-size:calc(1rem * var(--fs-scale));
    padding:12px 12px;
    line-height:1.9;
    border-inline-start-width:3px;
    border-radius:0 9px 9px 0;
  }
  .evidence{
    padding:8px 10px;
    font-size:calc(.8rem * var(--fs-scale));
    margin-top:10px;
    border-radius:9px;
  }
  .evidence-label{ font-size:calc(.72rem * var(--fs-scale)); }
}

/* --- SMALL PHONE (≤380px): Ultra-compact for very small devices --- */
@media (max-width:380px){
  html{ font-size:14px; }

  .app-header{ padding:8px clamp(8px,3vw,12px); gap:6px; }
  .brand-mark{ width:34px; height:34px; border-radius:8px; }
  .brand-mark svg{ width:22px; height:22px; }
  .brand-title{ font-size:clamp(.9rem,5vw,1.1rem); }

  .controls{ gap:4px; }
  .ctrl{ width:32px; height:32px; border-radius:8px; }
  .ic-ico svg{ width:14px; height:14px; }
  .ic-ico{ font-size:.8rem; }
  .flag{ width:18px; height:18px; }

  .search-box input{ padding:8px 32px; font-size:.8rem; }

  .issue-item{
    width:clamp(140px,78%,250px);
    padding:8px;
    gap:6px;
  }
  .issue-num{ width:24px; height:24px; border-radius:6px; font-size:.72rem; }

  .head-meta h1{ font-size:calc(1.05rem * var(--fs-scale)); }
  .diagram-box{ padding:8px; }

  .tab{ padding:8px 6px; font-size:calc(.68rem * var(--fs-scale)); }
  .tab .ico svg{ width:12px; height:12px; }

  .article-body{ font-size:calc(.86rem * var(--fs-scale)); }
  .matn-quote{ font-size:calc(.95rem * var(--fs-scale)); padding:10px 12px; }
}

/* --- LANDSCAPE PHONES (max-height: 500px and max-width: 768px) --- */
@media (max-width:768px) and (max-height:500px){
  .welcome-mark{ width:48px; height:48px; margin-bottom:10px; }
  .welcome-mark svg{ width:28px; height:28px; }
  .welcome-title{ font-size:clamp(1.2rem,4vw,1.6rem); margin-bottom:4px; }
  .welcome-sub{ font-size:.82rem; margin-bottom:14px; }
  .welcome-divider{ margin:14px 0; }
  .welcome-features{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .welcome-feature{ padding:10px; gap:10px; }
  .welcome-feature .f-ico{ width:32px; height:32px; border-radius:8px; }
  .welcome-feature .f-ico svg{ width:16px; height:16px; }
  .welcome-feature h4{ font-size:.82rem; }
  .welcome-feature p{ font-size:.72rem; }
  .welcome-stats{ gap:16px; margin:14px 0 4px; }
  .welcome-stat .num{ font-size:clamp(1.2rem,4vw,1.5rem); }
  .welcome-stat .lbl{ font-size:.64rem; }
  .welcome-actions{ margin-top:16px; gap:8px; }
  .w-btn{ padding:10px 20px; font-size:.85rem; }
  .welcome-card{ padding:clamp(16px,3vw,24px); }
}

/* ============================================================
   WELCOME OVERLAY — قصة الموقع وهدفه
   ============================================================ */
.welcome{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:radial-gradient(circle at 50% 30%, rgba(223,183,117,0.12), transparent 60%), rgba(8,9,12,0.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; pointer-events:none;
  transition:opacity .5s cubic-bezier(0.4,0,0.2,1);
}
.welcome.show{ opacity:1; pointer-events:auto; }
.welcome-card{
  position:relative; width:min(720px,100%);
  max-height:90vh; overflow-y:auto;
  background:var(--card-bg-solid);
  border:1px solid var(--card-border);
  border-radius:26px;
  box-shadow:0 40px 100px rgba(0,0,0,0.6), 0 0 60px -20px var(--glow);
  padding:clamp(26px,5vw,46px);
  transform:translateY(24px) scale(.96);
  transition:transform .55s cubic-bezier(0.16,1,0.3,1);
}
.welcome.show .welcome-card{ transform:none; }
.welcome-card::-webkit-scrollbar{ width:7px; }
.welcome-card::-webkit-scrollbar-thumb{ background:var(--card-border); border-radius:7px; }

.welcome-mark{
  width:72px; height:72px; margin:0 auto 18px;
  display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(135deg,var(--gold-soft),transparent);
  border:1px solid var(--card-border);
  box-shadow:0 0 40px -8px var(--glow);
  animation:pulseGold 3s ease-in-out infinite;
}
.welcome-mark svg{ width:44px; height:44px; }
@keyframes pulseGold{ 0%,100%{ box-shadow:0 0 30px -10px var(--glow);} 50%{ box-shadow:0 0 55px -6px var(--glow);} }

.welcome-title{
  font-family:'Noto Naskh Arabic',serif; text-align:center;
  font-size:clamp(1.7rem,5vw,2.5rem); font-weight:700;
  line-height:1.4; margin-bottom:8px;
  background:linear-gradient(100deg,var(--gold-matte),var(--gold) 55%,var(--gold-matte));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--gold);
}
.welcome-sub{
  text-align:center; color:var(--text-secondary);
  font-size:clamp(.92rem,2.5vw,1.05rem); margin-bottom:26px;
  line-height:1.8;
}
.welcome-divider{
  display:flex; align-items:center; gap:12px; margin:24px 0;
  color:var(--gold-matte); font-size:.72rem; letter-spacing:2px; text-transform:uppercase;
}
.welcome-divider::before,.welcome-divider::after{
  content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--card-border),transparent);
}
.welcome-features{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.welcome-feature{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px; border-radius:16px;
  background:var(--tab-bg); border:1px solid var(--hairline);
  transition:transform .3s, border-color .3s, box-shadow .3s;
}
.welcome-feature:hover{ transform:translateY(-3px); border-color:var(--card-border); box-shadow:0 0 24px -12px var(--glow); }
.welcome-feature .f-ico{
  flex:0 0 auto; width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--gold-soft),transparent);
  border:1px solid var(--card-border); color:var(--gold);
}
.welcome-feature .f-ico svg{ width:22px; height:22px; }
.welcome-feature h4{ font-size:.96rem; margin:0 0 4px; color:var(--text-primary); }
.welcome-feature p{ font-size:.82rem; color:var(--text-secondary); margin:0; line-height:1.6; }

.welcome-stats{ display:flex; justify-content:center; gap:clamp(20px,6vw,50px); margin:26px 0 8px; }
.welcome-stat{ text-align:center; }
.welcome-stat .num{
  font-size:clamp(1.6rem,5vw,2.2rem); font-weight:800; color:var(--gold);
  font-family:'Inter',sans-serif; line-height:1;
}
.welcome-stat .lbl{ font-size:.74rem; color:var(--text-muted); margin-top:6px; letter-spacing:.5px; }

.welcome-actions{ display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.w-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 28px; border-radius:14px; font-size:.95rem; font-weight:700;
  font-family:inherit; cursor:pointer; border:1px solid transparent;
  transition:transform .25s, box-shadow .3s, background-color .3s;
}
.w-btn.primary{
  background:linear-gradient(135deg,var(--gold),var(--gold-matte)); color:#1a1206;
  box-shadow:0 12px 30px -8px var(--glow);
}
.w-btn.primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -8px var(--glow); }
.w-btn.ghost{ background:var(--tab-bg); border-color:var(--card-border); color:var(--text-primary); }
.w-btn.ghost:hover{ transform:translateY(-2px); border-color:var(--gold); color:var(--gold); }
.w-btn svg{ width:18px; height:18px; }

.welcome-foot{ text-align:center; margin-top:22px; font-size:.78rem; color:var(--text-muted); line-height:1.8; }
.welcome-close-x{
  position:absolute; top:18px; inset-inline-end:18px;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--card-border);
  background:var(--tab-bg); color:var(--text-secondary); cursor:pointer;
  display:grid; place-items:center; font-size:1.1rem; transition:all .25s;
}
.welcome-close-x:hover{ background:var(--accent-impure); color:#fff; border-color:var(--accent-impure); transform:rotate(90deg); }

@media (max-width:560px){
  .welcome-features{ grid-template-columns:1fr; }
  .welcome-actions{ flex-direction:column; }
  .w-btn{ width:100%; justify-content:center; }
  .welcome-card{ border-radius:20px; }
  .welcome-close-x{ top:12px; inset-inline-end:12px; width:34px; height:34px; }
  .welcome-mark{ width:56px; height:56px; }
  .welcome-mark svg{ width:34px; height:34px; }
}
@media (max-width:380px){
  .welcome-card{ padding:clamp(18px,5vw,24px); }
  .welcome-features{ gap:10px; }
  .welcome-feature{ padding:12px; gap:10px; }
  .welcome-feature .f-ico{ width:36px; height:36px; }
  .welcome-feature .f-ico svg{ width:18px; height:18px; }
  .welcome-feature h4{ font-size:.88rem; }
  .welcome-feature p{ font-size:.76rem; }
  .w-btn{ padding:12px 20px; font-size:.88rem; border-radius:12px; }
}


/* ============================================================
   V3 — STUDY EXPERIENCE, ACCESSIBILITY, PWA
   ============================================================ */
.skip-link{
  position:fixed; inset-inline-start:16px; top:-80px; z-index:500;
  padding:10px 16px; border-radius:10px; background:var(--gold); color:#1a1206;
  font-weight:800; box-shadow:var(--shadow); transition:top .2s ease;
}
.skip-link:focus{ top:12px; outline:3px solid var(--canvas); outline-offset:2px; }

.connection-banner{
  position:sticky; top:0; z-index:190; width:100%; box-sizing:border-box;
  padding:8px 16px; text-align:center; background:var(--accent-brown);
  color:#161008; font-weight:700; font-size:.82rem;
}
.connection-banner[hidden]{ display:none; }

.toast{
  position:fixed; z-index:400; inset-inline-start:50%; bottom:24px;
  transform:translate(-50%,20px); opacity:0; pointer-events:none;
  max-width:min(90vw,520px); padding:11px 18px; border-radius:12px;
  background:var(--card-bg-solid); color:var(--text-primary);
  border:1px solid var(--gold); box-shadow:var(--shadow);
  font-size:.86rem; font-weight:700; text-align:center;
  transition:opacity .25s ease, transform .25s ease;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
[dir="rtl"] .toast{ transform:translate(50%,20px); }
[dir="rtl"] .toast.show{ transform:translate(50%,0); }

.study-tools{ display:grid; gap:9px; margin-bottom:12px; }
.study-progress{
  padding:10px 11px; border:1px solid var(--hairline); border-radius:12px;
  background:var(--tab-bg);
}
.study-progress-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--text-secondary); font-size:.76rem; }
.study-progress-head strong{ color:var(--gold); font-family:var(--font-lat); font-size:.78rem; }
.progress-track{ height:5px; margin-top:8px; border-radius:999px; overflow:hidden; background:var(--hairline); }
.progress-track span{ display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--gold-matte),var(--gold)); transition:width .45s ease; }
.favorites-filter{
  min-height:40px; display:flex; align-items:center; gap:8px; width:100%;
  padding:8px 11px; border:1px solid var(--hairline); border-radius:11px;
  background:transparent; color:var(--text-secondary); text-align:start;
}
.favorites-filter:hover,.favorites-filter.active{ color:var(--gold); border-color:var(--gold); background:var(--gold-soft); }
.favorites-filter > [aria-hidden="true"]{ font-size:1.05rem; line-height:1; }
.favorites-filter b{ margin-inline-start:auto; min-width:22px; height:22px; display:grid; place-items:center; border-radius:999px; background:var(--tab-bg); color:var(--gold); font-family:var(--font-lat); font-size:.7rem; }

.issue-flags{ margin-inline-start:auto; display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; }
.issue-favorite{ color:var(--gold); font-size:.78rem; }
.issue-visited{ width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:var(--accent-teal-soft); color:var(--accent-teal); font-size:.67rem; font-weight:900; }
.no-results{ color:var(--text-muted); padding:18px 10px; text-align:center; font-size:.84rem; }

.issue-actions{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:13px; }
.issue-action{
  min-height:38px; display:inline-flex; align-items:center; gap:7px;
  padding:7px 11px; border-radius:10px; border:1px solid var(--hairline);
  background:var(--tab-bg); color:var(--text-secondary); font-size:.75rem; font-weight:700;
}
.issue-action:hover,.issue-action.active{ border-color:var(--gold); color:var(--gold); background:var(--gold-soft); }
.issue-action:focus-visible,.favorites-filter:focus-visible,.install-app:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.issue-action-icon{ width:17px; height:17px; display:grid; place-items:center; font-size:1rem; }
.issue-action-icon svg{ width:16px; height:16px; }

.install-app{
  margin-top:12px; padding:9px 15px; border-radius:10px; border:1px solid var(--gold);
  background:var(--gold-soft); color:var(--gold); font-family:inherit; font-weight:700;
}
.install-app[hidden]{ display:none; }
.version-line{ margin:8px 0 0; opacity:.55; font-size:.68rem; }

body.is-offline .brand-mark::after{
  content:''; position:absolute; width:8px; height:8px; border-radius:50%;
  background:var(--accent-brown); border:2px solid var(--card-bg-solid);
  inset-inline-end:2px; bottom:2px;
}
.brand-mark{ position:relative; }

@media (max-width:520px){
  .study-tools{ margin-bottom:8px; }
  .study-progress{ padding:8px 9px; border-radius:9px; }
  .favorites-filter{ min-height:36px; padding:6px 9px; border-radius:9px; font-size:.76rem; }
  .issue-actions{ gap:5px; margin-top:9px; }
  .issue-action{ flex:1 1 auto; justify-content:center; min-height:35px; padding:6px 8px; font-size:.68rem; }
  .toast{ bottom:14px; padding:9px 12px; font-size:.76rem; }
}

@media print{
  :root{ --canvas:#fff; --card-bg:#fff; --card-bg-solid:#fff; --text-primary:#111; --text-secondary:#333; --text-muted:#555; --hairline:#ccc; --card-border:#bbb; --gold:#6d5424; --gold-matte:#6d5424; }
  *{ animation:none !important; transition:none !important; box-shadow:none !important; }
  body{ background:#fff !important; color:#111; font-size:13pt; padding:0; }
  .app-header,.sidebar,.tabs-wrap,.issue-actions,.app-footer,.welcome,.toast,.connection-banner,.skip-link{ display:none !important; }
  .shell{ display:block; max-width:none; padding:0; }
  .hub,.issue-card{ display:block; border:0; background:#fff; }
  .card-head{ padding:0 0 18px; border-bottom:1px solid #bbb; }
  .diagram-box{ max-width:220px; border:1px solid #bbb; }
  .article-body{ padding:22px 0; }
  a{ color:#111; text-decoration:underline; }
  @page{ margin:18mm; }
}

/* Prevent horizontal study index from expanding the mobile grid track */
.shell > *, .sidebar, .issues, .bab-group{ min-width:0; }
.sidebar{ box-sizing:border-box; }
@media (max-width:1024px){
  .shell{ width:100%; box-sizing:border-box; }
  .sidebar,.hub{ width:100%; max-width:100%; }
  .issues{ width:100%; max-width:100%; }
}


/* ============================================================
   SIMPLE LEARNING FLOW — summary, proof, application
   ============================================================ */
.summary-text{
  font-size:calc(1.12rem * var(--fs-scale));
  line-height:2.05;
  padding:clamp(16px,2.6vw,24px);
  border-radius:16px;
  background:linear-gradient(135deg,var(--gold-soft),transparent);
  border:1px solid var(--card-border);
}
.scientific-details{
  margin-top:22px;
  border:1px solid var(--hairline);
  border-radius:16px;
  background:var(--tab-bg);
  overflow:hidden;
}
.scientific-details > summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:12px 16px;
  cursor:pointer;
  color:var(--text-secondary);
  font-weight:700;
  font-size:calc(.9rem * var(--fs-scale));
}
.scientific-details > summary::-webkit-details-marker{display:none;}
.scientific-details > summary::after{
  content:'+';
  margin-inline-start:auto;
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--card-border);
  color:var(--gold);
  font-size:1.05rem;
}
.scientific-details[open] > summary::after{content:'−';}
.scientific-details > summary:hover{color:var(--gold);}
.details-icon{display:grid;place-items:center;color:var(--gold);}
.details-icon svg{width:19px;height:19px;}
.scientific-details-body{
  padding:0 clamp(14px,2.5vw,22px) clamp(16px,2.5vw,22px);
  border-top:1px solid var(--hairline);
}
.detail-section{padding-top:18px;}
.detail-section + .detail-section{margin-top:18px;border-top:1px solid var(--hairline);}
.detail-section h4{margin:0 0 12px;color:var(--gold);font-size:calc(.92rem * var(--fs-scale));}
.matn-quote.compact{font-size:calc(1.06rem * var(--fs-scale));padding:16px 18px;}
@media (max-width:520px){
  .summary-text{font-size:calc(.98rem * var(--fs-scale));padding:14px;line-height:1.9;}
  .scientific-details{margin-top:14px;border-radius:12px;}
  .scientific-details > summary{padding:10px 12px;font-size:calc(.82rem * var(--fs-scale));}
  .scientific-details-body{padding:0 12px 14px;}
}

/* ============================================================
   FOUR-MADHHAB LEARNING FLOW — compare, evidence, preference, apply
   ============================================================ */
.tabs{gap:8px;padding:8px 0;}
.tab{
  min-height:58px;
  padding:10px 13px;
  border:1px solid transparent;
  border-radius:13px 13px 0 0;
}
.tab:hover{background:var(--tab-bg);border-color:var(--hairline);}
.tab.active{background:linear-gradient(180deg,var(--gold-soft),transparent);border-color:var(--card-border);}
.tab-step{
  width:24px;height:24px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--tab-bg);
  border:1px solid var(--card-border);
  color:var(--text-muted);
  font-family:var(--font-lat);
  font-size:.68rem;font-weight:800;
}
.tab.active .tab-step{background:var(--gold);border-color:var(--gold);color:#1a1206;box-shadow:0 0 14px -4px var(--glow);}

.madhhab-intro{
  margin:0 0 16px;
  color:var(--text-secondary);
  font-size:calc(.94rem * var(--fs-scale));
}
.madhhab-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.madhhab-card{
  position:relative;
  min-width:0;
  padding:0;
  border:1px solid var(--card-border);
  border-radius:17px;
  background:linear-gradient(145deg,var(--tab-bg),transparent);
  overflow:hidden;
  box-shadow:inset 0 1px 0 var(--hairline);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.madhhab-card:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 14px 30px -24px var(--glow);}
.madhhab-card::before{
  content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--gold),transparent 88%);
}
.madhhab-card header{
  display:flex;align-items:center;gap:10px;
  padding:13px 15px 10px;
  border-bottom:1px solid var(--hairline);
}
.madhhab-card h4{margin:0;color:var(--text-primary);font-size:calc(.94rem * var(--fs-scale));}
.madhhab-mark{
  width:34px;height:34px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:11px;
  background:var(--gold-soft);
  border:1px solid var(--card-border);
  color:var(--gold);
  font-family:var(--font-content);
  font-size:1rem;font-weight:700;
}
.madhhab-order{
  margin-inline-start:auto;
  color:var(--text-muted);
  font-family:var(--font-lat);
  font-size:.68rem;font-weight:800;letter-spacing:1px;
}
.madhhab-card p{
  margin:0;
  padding:14px 16px 17px;
  color:var(--text-secondary);
  font-size:calc(.94rem * var(--fs-scale));
  line-height:1.95;
}
.comparison-summary{
  padding:clamp(16px,2.5vw,22px);
  border:1px solid var(--card-border);
  border-radius:16px;
  background:linear-gradient(135deg,var(--tab-bg),transparent);
  color:var(--text-primary);
  line-height:2;
  white-space:pre-line;
}
.preference-text,
.application-text{
  position:relative;
  padding:clamp(18px,3vw,26px);
  border-radius:17px;
  line-height:2.05;
  white-space:pre-line;
}
.preference-text{
  background:linear-gradient(135deg,var(--gold-soft),transparent 75%);
  border:1px solid var(--gold);
  box-shadow:inset 0 0 34px -28px var(--glow);
  font-size:calc(1.06rem * var(--fs-scale));
}
.preference-text::before{
  content:'✓';
  display:inline-grid;place-items:center;
  width:28px;height:28px;margin-inline-end:9px;
  border-radius:50%;
  background:var(--gold);color:#1a1206;
  font-family:var(--font-lat);font-weight:900;
  vertical-align:middle;
}
.application-text{
  background:linear-gradient(135deg,var(--accent-teal-soft),transparent 78%);
  border:1px solid color-mix(in srgb,var(--accent-teal) 52%,transparent);
  font-size:calc(1rem * var(--fs-scale));
}
.section-evidence .evidence-primary{
  border-color:var(--gold);
  background:linear-gradient(135deg,var(--gold-soft),var(--tab-bg));
  font-size:calc(1.01rem * var(--fs-scale));
  line-height:2;
}
.matn-details{margin-top:26px;opacity:.92;}

@media (max-width:900px){
  .tab{min-height:52px;padding:9px 10px;}
  .tab-step{width:22px;height:22px;}
}
@media (max-width:640px){
  .tabs{gap:4px;padding:5px 0;}
  .tab{min-height:46px;padding:8px 7px;border-radius:10px 10px 0 0;}
  .tab-step{width:20px;height:20px;font-size:.6rem;}
  .tab .ico{display:none;}
  .madhhab-grid{grid-template-columns:1fr;gap:10px;}
  .madhhab-card{border-radius:13px;}
  .madhhab-card header{padding:10px 12px 8px;}
  .madhhab-mark{width:30px;height:30px;border-radius:9px;font-size:.88rem;}
  .madhhab-card p{padding:11px 13px 14px;font-size:calc(.88rem * var(--fs-scale));line-height:1.85;}
  .madhhab-intro{font-size:calc(.86rem * var(--fs-scale));margin-bottom:11px;}
  .preference-text,.application-text{padding:14px;border-radius:13px;line-height:1.9;}
  .preference-text{font-size:calc(.96rem * var(--fs-scale));}
  .application-text{font-size:calc(.9rem * var(--fs-scale));}
  .preference-text::before{width:24px;height:24px;font-size:.8rem;margin-inline-end:6px;}
}
@media (max-width:390px){
  .tab{padding:7px 6px;font-size:calc(.64rem * var(--fs-scale));gap:3px;}
  .tab-step{display:none;}
}

/* Mobile polish: readable lesson rail and uncluttered learning steps */
@media (max-width:640px){
  .issues{gap:8px;padding-inline-end:8px;}
  .issue-item{
    flex:0 0 220px;
    width:220px;
    min-width:220px;
    align-items:center;
  }
  .issue-title{
    min-width:0;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    white-space:normal;
  }
  .tabs{overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;}
  .tab{
    flex:0 0 auto;
    min-width:142px;
    justify-content:center;
    scroll-snap-align:start;
    font-size:calc(.76rem * var(--fs-scale));
  }
  .tab .ico{display:grid;}
  .tab-step{display:grid;}
}
@media (max-width:390px){
  .issue-item{flex-basis:202px;width:202px;min-width:202px;}
  .tab{min-width:136px;font-size:calc(.72rem * var(--fs-scale));}
  .tab-step{display:grid;}
}

/* On phones, four clear steps are easier to scan as a 2×2 control than a cramped rail. */
@media (max-width:640px){
  .tabs-wrap{padding:7px 9px 9px;}
  .tabs{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    overflow:visible;
    padding:0;
    scroll-snap-type:none;
  }
  .tab{
    width:100%;
    min-width:0;
    min-height:44px;
    padding:8px 9px;
    justify-content:flex-start;
    border-radius:10px;
    border-bottom-width:1px;
    font-size:calc(.72rem * var(--fs-scale));
  }
  .tab-indicator{display:none;}
}
@media (max-width:390px){
  .tab{font-size:calc(.68rem * var(--fs-scale));padding:7px;gap:5px;}
  .tab .ico svg{width:12px;height:12px;}
  .tab-step{width:19px;height:19px;font-size:.56rem;}
}


/* ============================================================
   RELEASE 0.4.3 — EVIDENCE-FIRST MERGED VERDICT
   The stronger view, its proof, and Sheikh Ibn Uthaymeen's
   preference are presented as one green evidence-based result.
   ============================================================ */
.tab[data-section="evidence"].active{
  color:var(--accent-teal);
  background:linear-gradient(180deg,var(--accent-teal-soft),transparent);
  border-color:color-mix(in srgb,var(--accent-teal) 48%,var(--card-border));
}
.tab[data-section="evidence"].active .tab-step{
  background:var(--accent-teal);
  border-color:var(--accent-teal);
  color:#071d17;
  box-shadow:0 0 14px -4px color-mix(in srgb,var(--accent-teal) 72%,transparent);
}
.section-evidence > h3{color:var(--accent-teal);}
.section-evidence > h3 .pill{
  color:var(--accent-teal);
  border-color:color-mix(in srgb,var(--accent-teal) 48%,var(--card-border));
  background:var(--accent-teal-soft);
}
.verdict-card{
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent-teal) 62%,var(--card-border));
  border-radius:20px;
  background:
    radial-gradient(560px 240px at 100% 0%,color-mix(in srgb,var(--accent-teal) 15%,transparent),transparent 68%),
    linear-gradient(145deg,var(--accent-teal-soft),var(--tab-bg) 52%,transparent);
  box-shadow:0 18px 48px -34px color-mix(in srgb,var(--accent-teal) 65%,transparent),inset 0 1px 0 var(--hairline);
}
.verdict-card::before{
  content:'';
  position:absolute;
  inset-inline-start:0;
  inset-block:0;
  width:4px;
  background:linear-gradient(180deg,var(--accent-teal),color-mix(in srgb,var(--accent-teal) 25%,transparent));
}
.verdict-head{
  display:flex;
  align-items:center;
  gap:13px;
  padding:clamp(16px,2.6vw,22px);
  border-bottom:1px solid color-mix(in srgb,var(--accent-teal) 28%,var(--hairline));
}
.verdict-mark{
  width:44px;
  height:44px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--accent-teal);
  color:#071d17;
  font-family:var(--font-lat);
  font-size:1.25rem;
  font-weight:900;
  box-shadow:0 10px 24px -14px color-mix(in srgb,var(--accent-teal) 82%,transparent);
}
.verdict-title{min-width:0;}
.verdict-kicker{
  display:block;
  margin-bottom:2px;
  color:var(--accent-teal);
  font-size:calc(.72rem * var(--fs-scale));
  font-weight:800;
  letter-spacing:1px;
}
.verdict-title h4{
  margin:0;
  color:var(--text-primary);
  font-size:calc(1.12rem * var(--fs-scale));
  line-height:1.55;
}
.verdict-part{
  padding:clamp(17px,2.8vw,24px);
}
.verdict-part + .verdict-part{
  border-top:1px solid color-mix(in srgb,var(--accent-teal) 24%,var(--hairline));
}
.verdict-part h5{
  margin:0 0 8px;
  color:var(--accent-teal);
  font-size:calc(.88rem * var(--fs-scale));
  font-weight:800;
}
.verdict-part p{
  margin:0;
  color:var(--text-primary);
  font-size:calc(1rem * var(--fs-scale));
  line-height:2;
  white-space:pre-line;
}
.verdict-result{
  background:color-mix(in srgb,var(--accent-teal-soft) 72%,transparent);
}
.verdict-result p{
  font-size:calc(1.04rem * var(--fs-scale));
  font-weight:600;
}
.sheikh-basis{
  margin:0;
  padding:13px clamp(17px,2.8vw,24px) 16px;
  border-top:1px solid color-mix(in srgb,var(--accent-teal) 30%,var(--hairline));
  color:var(--text-secondary);
  font-size:calc(.86rem * var(--fs-scale));
  line-height:1.8;
}
.sheikh-basis::before{
  content:'◆';
  margin-inline-end:7px;
  color:var(--accent-teal);
  font-size:.72em;
}
@media (max-width:640px){
  .tabs .tab[data-section="practical"]{grid-column:1/-1;}
  .verdict-card{border-radius:15px;}
  .verdict-head{padding:14px;gap:10px;}
  .verdict-mark{width:38px;height:38px;border-radius:12px;font-size:1.05rem;}
  .verdict-title h4{font-size:calc(.98rem * var(--fs-scale));}
  .verdict-part{padding:14px;}
  .verdict-part p{font-size:calc(.91rem * var(--fs-scale));line-height:1.9;}
  .verdict-result p{font-size:calc(.95rem * var(--fs-scale));}
  .sheikh-basis{padding:11px 14px 14px;font-size:calc(.78rem * var(--fs-scale));}
}


/* ============================================================
   RELEASE 0.4.3.1 — CONSISTENT ALIGNMENT SECTION
   The madhhab that agrees with the preferred evidence is shown
   as a normal verdict section, not as a tiny secondary footer.
   ============================================================ */
.verdict-alignment-part{
  background:color-mix(in srgb,var(--accent-teal-soft) 52%,transparent);
}
.verdict-alignment-part h5{
  display:flex;
  align-items:center;
  gap:8px;
}
.verdict-alignment-part h5::before{
  content:'✓';
  width:22px;
  height:22px;
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  background:var(--accent-teal);
  color:#071d17;
  font-family:var(--font-lat);
  font-size:.8rem;
  font-weight:900;
  flex:0 0 auto;
}
.alignment-schools{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.alignment-school-chip{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 12px;
  border:1px solid color-mix(in srgb,var(--accent-teal) 44%,var(--card-border));
  border-radius:999px;
  background:color-mix(in srgb,var(--accent-teal-soft) 84%,var(--card-bg-solid));
  color:var(--accent-teal);
  font-size:calc(.78rem * var(--fs-scale));
  font-weight:800;
  box-shadow:inset 0 1px 0 var(--hairline);
}
.alignment-school-independent{
  border-style:dashed;
  color:var(--text-secondary);
}
.alignment-copy{
  margin:0;
  color:var(--text-primary);
  font-size:calc(.98rem * var(--fs-scale));
  line-height:1.95;
}
.verdict-note{
  margin:12px 0 0;
  padding-top:12px;
  border-top:1px dashed color-mix(in srgb,var(--accent-teal) 35%,var(--hairline));
  color:var(--text-secondary);
  font-size:calc(.84rem * var(--fs-scale));
  line-height:1.8;
}
@media(max-width:640px){
  .alignment-schools{gap:6px;margin-bottom:10px;}
  .alignment-school-chip{min-height:30px;padding:5px 10px;font-size:calc(.74rem * var(--fs-scale));}
  .alignment-copy{font-size:calc(.9rem * var(--fs-scale));line-height:1.9;}
  .verdict-note{font-size:calc(.78rem * var(--fs-scale));line-height:1.75;}
}


/* RELEASE 0.5.0 — completed purification chapters */
.bab-head.bab-aniyah::before{background:var(--accent-brown)}
.bab-head.bab-aniyah{color:var(--accent-brown)}
.bab-head.bab-istinja::before{background:var(--accent-water)}
.bab-head.bab-istinja{color:var(--accent-water)}
.bab-head.bab-siwak::before{background:var(--accent-teal)}
.bab-head.bab-siwak{color:var(--accent-teal)}
.bab-pill.bab-aniyah{background:linear-gradient(135deg,var(--accent-brown-soft),var(--gold-soft))}
.bab-pill.bab-aniyah::before{background:var(--accent-brown);box-shadow:0 0 0 3px var(--accent-brown-soft)}
.bab-pill.bab-istinja{background:linear-gradient(135deg,var(--accent-water-soft),var(--gold-soft))}
.bab-pill.bab-istinja::before{background:var(--accent-water);box-shadow:0 0 0 3px var(--accent-water-soft)}
.bab-pill.bab-siwak{background:linear-gradient(135deg,var(--accent-teal-soft),var(--gold-soft))}
.bab-pill.bab-siwak::before{background:var(--accent-teal);box-shadow:0 0 0 3px var(--accent-teal-soft)}

/* ============================================================
   RELEASE 0.6.0 — MULTI-BOOK NAVIGATION + PRAYER CHAPTERS
   ============================================================ */
.book-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:14px 2px 4px;padding:11px 12px;border-radius:12px;
  border:1px solid var(--card-border);
  background:linear-gradient(135deg,var(--gold-soft),transparent);
  color:var(--gold);font-size:.82rem;font-weight:800;
}
.book-head::before{content:'◆';font-size:.62rem;color:currentColor;}
.book-head span:first-child{margin-inline-end:auto;}
.book-count{min-width:28px;text-align:center;padding:2px 7px;border-radius:999px;background:var(--tab-bg);color:var(--text-secondary);font-family:var(--font-lat);font-size:.7rem;}
.book-head.book-salah{color:var(--accent-teal);background:linear-gradient(135deg,var(--accent-teal-soft),transparent);}
.bab-head.bab-mawaqit::before{background:var(--gold)}
.bab-head.bab-mawaqit{color:var(--gold)}
.bab-head.bab-adhan::before{background:var(--accent-water)}
.bab-head.bab-adhan{color:var(--accent-water)}
.bab-head.bab-shurut::before{background:var(--accent-teal)}
.bab-head.bab-shurut{color:var(--accent-teal)}
.bab-pill.bab-mawaqit{background:linear-gradient(135deg,var(--gold-soft),var(--accent-teal-soft));}
.bab-pill.bab-mawaqit::before{background:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);}
.bab-pill.bab-adhan{background:linear-gradient(135deg,var(--accent-water-soft),var(--gold-soft));}
.bab-pill.bab-adhan::before{background:var(--accent-water);box-shadow:0 0 0 3px var(--accent-water-soft);}
.bab-pill.bab-shurut{background:linear-gradient(135deg,var(--accent-teal-soft),var(--gold-soft));}
.bab-pill.bab-shurut::before{background:var(--accent-teal);box-shadow:0 0 0 3px var(--accent-teal-soft);}
@media(max-width:1024px){.book-head{display:none;}}

.mobile-chapter-nav{display:none;}
@media(max-width:1024px){
  .mobile-chapter-nav{display:flex;align-items:center;gap:9px;margin:0 0 10px;}
  .mobile-chapter-nav label{flex:0 0 auto;color:var(--text-secondary);font-size:.74rem;font-weight:700;}
  .mobile-chapter-nav select{min-width:0;flex:1;min-height:42px;padding:8px 12px;border:1px solid var(--card-border);border-radius:11px;background:var(--card-bg-solid);color:var(--text-primary);font:inherit;font-size:.84rem;}
  .mobile-chapter-nav select:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
}
@media(max-width:520px){.mobile-chapter-nav{display:block}.mobile-chapter-nav label{display:block;margin-bottom:5px}.mobile-chapter-nav select{width:100%;}}

/* RELEASE 0.7.0 — PRAYER CORE CHAPTERS */
.bab-head.bab-sifat::before{background:var(--accent-water)}
.bab-head.bab-sifat{color:var(--accent-water)}
.bab-head.bab-arkan::before{background:var(--gold)}
.bab-head.bab-arkan{color:var(--gold)}
.bab-head.bab-sahw::before{background:var(--accent-purple)}
.bab-head.bab-sahw{color:var(--accent-purple)}
.bab-pill.bab-sifat{background:linear-gradient(135deg,var(--accent-water-soft),var(--gold-soft));}
.bab-pill.bab-sifat::before{background:var(--accent-water);box-shadow:0 0 0 3px var(--accent-water-soft);}
.bab-pill.bab-arkan{background:linear-gradient(135deg,var(--gold-soft),var(--accent-teal-soft));}
.bab-pill.bab-arkan::before{background:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);}
.bab-pill.bab-sahw{background:linear-gradient(135deg,var(--accent-purple-soft),var(--gold-soft));}
.bab-pill.bab-sahw::before{background:var(--accent-purple);box-shadow:0 0 0 3px var(--accent-purple-soft);}

/* One unified conclusion: no repeated boxes or tiny footer notes */
.verdict-conclusion{
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent-teal-soft) 76%,transparent),transparent);
}
.verdict-conclusion > h5{
  display:flex;align-items:center;gap:8px;font-size:calc(.93rem * var(--fs-scale));
}
.verdict-conclusion > h5::before{
  content:'✓';width:24px;height:24px;display:inline-grid;place-items:center;border-radius:50%;
  background:var(--accent-teal);color:#071d17;font-family:var(--font-lat);font-size:.82rem;font-weight:900;flex:0 0 auto;
}
.verdict-ruling{font-size:calc(1.04rem * var(--fs-scale))!important;font-weight:650;}
.verdict-agreement{
  margin-top:15px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--accent-teal) 32%,var(--hairline));
}
.verdict-agreement .alignment-schools{margin:0 0 10px;gap:7px;}
.verdict-agreement p{margin:0;color:var(--text-secondary);font-size:calc(.9rem * var(--fs-scale));line-height:1.85;}
.verdict-agreement .alignment-school-chip{font-size:calc(.76rem * var(--fs-scale));min-height:30px;padding:5px 11px;}
/* Hide obsolete structures if cached markup appears */
.verdict-alignment-part,.sheikh-basis{display:none!important;}
@media(max-width:640px){
  .verdict-ruling{font-size:calc(.94rem * var(--fs-scale))!important;line-height:1.9!important;}
  .verdict-agreement{margin-top:12px;padding-top:12px;}
  .verdict-agreement p{font-size:calc(.82rem * var(--fs-scale));line-height:1.8;}
}

/* RELEASE 0.8.0 — GROUP PRAYER & EXCUSES */
.bab-head.bab-jamaah,.bab-pill.bab-jamaah{color:var(--accent-teal);}
.bab-head.bab-jamaah::before,.bab-pill.bab-jamaah::before{background:var(--accent-teal);}
.bab-head.bab-udhr,.bab-pill.bab-udhr{color:var(--accent-purple);}
.bab-head.bab-udhr::before,.bab-pill.bab-udhr::before{background:var(--accent-purple);}

/* RELEASE 0.9.0 — FRIDAY & SPECIAL PRAYERS */
.bab-head.bab-jumuah,.bab-pill.bab-jumuah{color:var(--gold);}
.bab-head.bab-jumuah::before,.bab-pill.bab-jumuah::before{background:var(--gold);}
.bab-head.bab-eid,.bab-pill.bab-eid{color:var(--accent-purple);}
.bab-head.bab-eid::before,.bab-pill.bab-eid::before{background:var(--accent-purple);}
.bab-head.bab-kusuf,.bab-pill.bab-kusuf{color:var(--accent-water);}
.bab-head.bab-kusuf::before,.bab-pill.bab-kusuf::before{background:var(--accent-water);}
.bab-head.bab-istisqa,.bab-pill.bab-istisqa{color:var(--accent-teal);}
.bab-head.bab-istisqa::before,.bab-pill.bab-istisqa::before{background:var(--accent-teal);}

/* RELEASE 1.0.0 — FUNERALS CHAPTER */
.bab-head.bab-janaiz::before{background:var(--text-secondary);}
.bab-head.bab-janaiz{color:var(--text-secondary);}
.bab-pill.bab-janaiz{background:linear-gradient(135deg,var(--tab-bg),var(--gold-soft));}
.bab-pill.bab-janaiz::before{background:var(--text-secondary);box-shadow:0 0 0 3px var(--tab-bg);}

/* RELEASE 1.1.0 — BOOK OF ZAKAT */
.book-head.book-zakat{color:var(--accent-purple);background:linear-gradient(135deg,var(--accent-purple-soft),transparent);}
.bab-head.bab-zakat-conditions::before{background:var(--gold)}
.bab-head.bab-zakat-conditions{color:var(--gold)}
.bab-head.bab-zakat-wealth::before{background:var(--accent-water)}
.bab-head.bab-zakat-wealth{color:var(--accent-water)}
.bab-head.bab-zakat-recipients::before{background:var(--accent-purple)}
.bab-head.bab-zakat-recipients{color:var(--accent-purple)}
.bab-pill.bab-zakat_conditions{background:linear-gradient(135deg,var(--gold-soft),var(--accent-purple-soft));}
.bab-pill.bab-zakat_conditions::before{background:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);}
.bab-pill.bab-zakat_wealth{background:linear-gradient(135deg,var(--accent-water-soft),var(--gold-soft));}
.bab-pill.bab-zakat_wealth::before{background:var(--accent-water);box-shadow:0 0 0 3px var(--accent-water-soft);}
.bab-pill.bab-zakat_recipients{background:linear-gradient(135deg,var(--accent-purple-soft),var(--gold-soft));}
.bab-pill.bab-zakat_recipients::before{background:var(--accent-purple);box-shadow:0 0 0 3px var(--accent-purple-soft);}

/* RELEASE 1.2.0 — ZAKAT COMPLETION */
.bab-head.bab-zakat-crops::before{background:var(--accent-water)}
.bab-head.bab-zakat-crops{color:var(--accent-water)}
.bab-head.bab-zakat-livestock::before{background:var(--gold)}
.bab-head.bab-zakat-livestock{color:var(--gold)}
.bab-head.bab-zakat-fitr::before{background:var(--accent-teal)}
.bab-head.bab-zakat-fitr{color:var(--accent-teal)}
.bab-pill.bab-zakat_crops{background:linear-gradient(135deg,var(--accent-water-soft),var(--gold-soft));}
.bab-pill.bab-zakat_crops::before{background:var(--accent-water);box-shadow:0 0 0 3px var(--accent-water-soft);}
.bab-pill.bab-zakat_livestock{background:linear-gradient(135deg,var(--gold-soft),var(--accent-brown-soft));}
.bab-pill.bab-zakat_livestock::before{background:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);}
.bab-pill.bab-zakat_fitr{background:linear-gradient(135deg,var(--accent-teal-soft),var(--gold-soft));}
.bab-pill.bab-zakat_fitr::before{background:var(--accent-teal);box-shadow:0 0 0 3px var(--accent-teal-soft);}

/* ============================================================
   RELEASE 2.1.0-rc1 — BOOKS OF FASTING, HAJJ AND UMRAH
   ============================================================ */
.book-head.book-sawm{color:var(--accent-water);background:linear-gradient(135deg,var(--accent-water-soft),transparent);}
.book-head.book-hajj{color:var(--gold);background:linear-gradient(135deg,var(--gold-soft),transparent);}
.bab-head.bab-sawm-entry::before,.bab-head.bab-sawm-qada-nawafil::before{background:var(--accent-water)}
.bab-head.bab-sawm-entry,.bab-head.bab-sawm-qada-nawafil{color:var(--accent-water)}
.bab-head.bab-sawm-invalidators::before{background:var(--accent-brown)}
.bab-head.bab-sawm-invalidators{color:var(--accent-brown)}
.bab-head.bab-sawm-excuses::before{background:var(--accent-teal)}
.bab-head.bab-sawm-excuses{color:var(--accent-teal)}
.bab-head.bab-hajj-obligation-miqat::before,.bab-head.bab-hajj-days::before{background:var(--gold)}
.bab-head.bab-hajj-obligation-miqat,.bab-head.bab-hajj-days{color:var(--gold)}
.bab-head.bab-hajj-tawaf-sai::before{background:var(--accent-water)}
.bab-head.bab-hajj-tawaf-sai{color:var(--accent-water)}
.bab-head.bab-hajj-prohibitions-umrah::before{background:var(--accent-purple)}
.bab-head.bab-hajj-prohibitions-umrah{color:var(--accent-purple)}
.bab-pill.bab-sawm_entry,.bab-pill.bab-sawm_qada_nawafil{background:linear-gradient(135deg,var(--accent-water-soft),var(--gold-soft));}
.bab-pill.bab-sawm_entry::before,.bab-pill.bab-sawm_qada_nawafil::before{background:var(--accent-water);box-shadow:0 0 0 3px var(--accent-water-soft);}
.bab-pill.bab-sawm_invalidators{background:linear-gradient(135deg,var(--accent-brown-soft),var(--gold-soft));}
.bab-pill.bab-sawm_invalidators::before{background:var(--accent-brown);box-shadow:0 0 0 3px var(--accent-brown-soft);}
.bab-pill.bab-sawm_excuses{background:linear-gradient(135deg,var(--accent-teal-soft),var(--gold-soft));}
.bab-pill.bab-sawm_excuses::before{background:var(--accent-teal);box-shadow:0 0 0 3px var(--accent-teal-soft);}
.bab-pill.bab-hajj_obligation_miqat,.bab-pill.bab-hajj_days{background:linear-gradient(135deg,var(--gold-soft),var(--accent-brown-soft));}
.bab-pill.bab-hajj_obligation_miqat::before,.bab-pill.bab-hajj_days::before{background:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);}
.bab-pill.bab-hajj_tawaf_sai{background:linear-gradient(135deg,var(--accent-water-soft),var(--gold-soft));}
.bab-pill.bab-hajj_tawaf_sai::before{background:var(--accent-water);box-shadow:0 0 0 3px var(--accent-water-soft);}
.bab-pill.bab-hajj_prohibitions_umrah{background:linear-gradient(135deg,var(--accent-purple-soft),var(--gold-soft));}
.bab-pill.bab-hajj_prohibitions_umrah::before{background:var(--accent-purple);box-shadow:0 0 0 3px var(--accent-purple-soft);}
.translation-fallback-note{
  margin:0 0 16px;
  padding:11px 14px;
  border:1px solid var(--hairline);
  border-radius:12px;
  background:var(--tab-bg);
  color:var(--text-secondary);
  font-family:var(--font-ui);
  font-size:calc(.8rem * var(--fs-scale));
  line-height:1.75;
}
.seo-directory-link{display:inline-flex;align-items:center;gap:7px;margin-top:12px;color:var(--gold-matte);text-decoration:none;font-weight:700;}
.seo-directory-link:hover{text-decoration:underline;}


/* ============================================================
   RELEASE 2.1.0-rc1 — PREMIUM POLISH WITHOUT REDESIGN
   Preserve the established identity; refine depth, light theme,
   and the green evidence-first verdict without adding clutter.
   ============================================================ */
.issue-card,
.sidebar{
  box-shadow:
    0 22px 56px -38px rgba(0,0,0,.72),
    inset 0 1px 0 color-mix(in srgb,var(--hairline) 82%,transparent);
}
[data-theme="light"] .issue-card,
[data-theme="light"] .sidebar{
  background:
    linear-gradient(145deg,rgba(255,255,255,.46),transparent 42%),
    var(--card-bg);
  box-shadow:
    0 24px 60px -42px rgba(83,61,24,.34),
    inset 0 1px 0 rgba(255,255,255,.8);
}
.brand-mark{isolation:isolate;overflow:hidden;}
.brand-mark::before{
  content:'';position:absolute;inset:-35%;z-index:-1;
  background:conic-gradient(from 210deg,transparent 0 62%,var(--gold-soft) 72%,transparent 82%);
  opacity:.7;transform:rotate(-8deg);
}
.madhhab-card{
  background:
    radial-gradient(220px 120px at 100% 0%,var(--gold-soft),transparent 72%),
    linear-gradient(145deg,var(--tab-bg),transparent);
}
[data-theme="light"] .madhhab-card{
  background:
    radial-gradient(220px 120px at 100% 0%,rgba(154,122,58,.08),transparent 72%),
    linear-gradient(145deg,rgba(255,255,255,.58),rgba(255,255,255,.12));
}
.verdict-card{
  border-color:color-mix(in srgb,var(--accent-teal) 72%,var(--card-border));
  background:
    radial-gradient(620px 280px at 100% 0%,color-mix(in srgb,var(--accent-teal) 22%,transparent),transparent 70%),
    radial-gradient(420px 240px at 0% 100%,color-mix(in srgb,var(--gold) 9%,transparent),transparent 72%),
    linear-gradient(145deg,color-mix(in srgb,var(--accent-teal-soft) 88%,var(--card-bg-solid)),var(--card-bg-solid) 72%);
  box-shadow:
    0 22px 62px -38px color-mix(in srgb,var(--accent-teal) 78%,transparent),
    inset 0 1px 0 color-mix(in srgb,var(--accent-teal) 22%,var(--hairline));
}
.verdict-card::after{
  content:'';position:absolute;inset-inline-end:-46px;inset-block-start:-52px;
  width:180px;height:180px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent-teal) 12%,transparent);
  box-shadow:0 0 0 22px color-mix(in srgb,var(--accent-teal) 5%,transparent),0 0 0 44px color-mix(in srgb,var(--accent-teal) 3%,transparent);
  pointer-events:none;
}
.verdict-head,.verdict-part{position:relative;z-index:1;}
.verdict-mark{box-shadow:0 10px 28px -12px color-mix(in srgb,var(--accent-teal) 86%,transparent),inset 0 1px 0 rgba(255,255,255,.22);}
.verdict-title h4{font-weight:800;letter-spacing:.1px;}
.verdict-proof h5::before{content:'◈';margin-inline-end:7px;font-size:.8em;opacity:.88;}
.verdict-conclusion{background:linear-gradient(135deg,color-mix(in srgb,var(--accent-teal-soft) 88%,transparent),transparent 84%);}
.verdict-ruling{max-width:72ch;}
[data-theme="light"] .verdict-card{
  background:
    radial-gradient(620px 280px at 100% 0%,rgba(31,156,124,.13),transparent 70%),
    radial-gradient(420px 240px at 0% 100%,rgba(154,122,58,.06),transparent 72%),
    linear-gradient(145deg,#f6fbf7,#f4f1ea 78%);
  box-shadow:0 24px 64px -42px rgba(24,102,81,.34),inset 0 1px 0 rgba(255,255,255,.92);
}
[data-theme="light"] .verdict-title h4,
[data-theme="light"] .verdict-part p{color:#24352f;}
.application-text,.scientific-details{box-shadow:inset 0 1px 0 var(--hairline);}
@media (max-width:640px){.verdict-card::after{width:130px;height:130px;inset-inline-end:-42px;inset-block-start:-46px;}.verdict-ruling{max-width:none;}}


/* ============================================================
   SOURCE & DOCUMENTATION — scientific transparency without clutter
   ============================================================ */
.source-card{
  margin-top:16px;
  padding:clamp(14px,2.4vw,20px);
  border:1px solid color-mix(in srgb,var(--accent-teal) 42%,var(--card-border));
  border-radius:16px;
  background:linear-gradient(135deg,var(--accent-teal-soft),var(--tab-bg) 58%,transparent);
  box-shadow:inset 0 0 34px -28px var(--accent-teal),0 12px 30px -28px var(--shadow);
}
.source-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.source-card-head h5{margin:0;color:var(--text-primary);font-size:calc(.94rem * var(--fs-scale));}
.source-chip{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border-radius:999px;font-size:calc(.7rem * var(--fs-scale));font-weight:800;white-space:nowrap;border:1px solid var(--hairline);}
.source-chip-precise{color:var(--accent-teal);background:var(--accent-teal-soft);border-color:color-mix(in srgb,var(--accent-teal) 46%,transparent);}
.source-chip-broad{color:var(--gold);background:var(--gold-soft);border-color:var(--card-border);}
.source-meta{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;}
.source-meta>div{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:8px;padding:9px 10px;border-radius:10px;background:color-mix(in srgb,var(--card-bg-solid) 52%,transparent);border:1px solid var(--hairline);}
.source-meta dt{color:var(--text-muted);font-size:calc(.72rem * var(--fs-scale));font-weight:700;}
.source-meta dd{margin:0;color:var(--text-secondary);font-size:calc(.8rem * var(--fs-scale));line-height:1.7;overflow-wrap:anywhere;}
.source-note{margin:11px 2px 0;color:var(--text-muted);font-size:calc(.72rem * var(--fs-scale));line-height:1.75;}
[data-theme="light"] .source-card{background:linear-gradient(135deg,rgba(31,156,124,.10),rgba(255,255,255,.44));box-shadow:0 12px 34px -28px rgba(31,90,72,.34);}
@media (max-width:620px){
  .source-card{margin-top:12px;padding:12px;border-radius:12px;}
  .source-card-head{align-items:flex-start;}
  .source-meta{grid-template-columns:1fr;}
  .source-meta>div{padding:8px;}
}

/* ============================================================
   RELEASE 2.1.0-rc2 — PRE-HUMAN-REVIEW POLISH
   Mobile readability, honest language coverage, custom chapter
   navigation, and source transparency. No visual redesign.
   ============================================================ */

/* Pending translations remain selectable: the UI switches language and clearly shows the declared English fallback. */
.lang-opt.unavailable{
  opacity:.72;
  cursor:pointer;
}
.lang-opt.unavailable:hover,.lang-opt.unavailable:focus-visible{background:var(--gold-soft);color:var(--text-primary);outline:none;}
.lang-pending{
  margin-inline-start:auto;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid var(--hairline);
  color:var(--text-muted);
  font-size:.68rem;
  white-space:nowrap;
}
.welcome-coverage{
  margin:8px auto 18px;
  max-width:760px;
  text-align:center;
  color:var(--text-muted);
  font-size:.76rem;
  line-height:1.7;
}

/* Replace the native mobile <select> with an in-site, grouped picker. */
.chapter-select-fallback{
  position:absolute!important;
  width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none!important;
  overflow:hidden!important;
}
.mobile-chapter-nav{
  align-items:stretch!important;
}
.chapter-jump-label{
  flex:0 0 auto;
  color:var(--text-secondary);
  font-size:.78rem;
  font-weight:700;
}
.chapter-picker-btn{
  min-width:0;
  flex:1;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 12px;
  border:1px solid var(--card-border);
  border-radius:12px;
  background:linear-gradient(135deg,var(--tab-bg),transparent),var(--card-bg-solid);
  color:var(--text-primary);
  font:inherit;
  font-size:.88rem;
  font-weight:700;
  text-align:start;
  box-shadow:inset 0 1px 0 var(--hairline);
}
.chapter-picker-btn:hover,.chapter-picker-btn:focus-visible{
  border-color:var(--gold);
  outline:none;
  box-shadow:0 0 0 3px var(--gold-soft),inset 0 1px 0 var(--hairline);
}
.chapter-picker-btn svg{width:18px;height:18px;flex:0 0 auto;color:var(--gold);}
.chapter-picker-open{overflow:hidden;}
.chapter-picker-backdrop{
  position:fixed;
  inset:0;
  z-index:180;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
  background:rgba(7,8,10,.64);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  opacity:0;
  transition:opacity .18s ease;
}
.chapter-picker-backdrop[hidden]{display:none!important;}
.chapter-picker-backdrop.open{opacity:1;}
.chapter-picker-sheet{
  width:min(760px,100%);
  max-height:min(78vh,760px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--card-border);
  border-radius:24px;
  background:
    radial-gradient(700px 260px at 90% -10%,var(--gold-soft),transparent 62%),
    var(--card-bg-solid);
  box-shadow:0 32px 100px rgba(0,0,0,.55),inset 0 1px 0 var(--hairline);
  transform:translateY(18px) scale(.99);
  transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.chapter-picker-backdrop.open .chapter-picker-sheet{transform:none;}
.chapter-picker-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px 14px;
  border-bottom:1px solid var(--hairline);
}
.chapter-picker-head h2{
  color:var(--gold);
  font-size:1.12rem;
  line-height:1.4;
}
.chapter-picker-close{
  width:40px;height:40px;
  display:grid;place-items:center;
  flex:0 0 auto;
  border:1px solid var(--card-border);
  border-radius:12px;
  background:var(--tab-bg);
  color:var(--text-primary);
  font-size:1.05rem;
}
.chapter-picker-close:hover,.chapter-picker-close:focus-visible{border-color:var(--gold);color:var(--gold);outline:none;}
.chapter-picker-list{
  overflow:auto;
  padding:12px 16px 20px;
  overscroll-behavior:contain;
}
.chapter-picker-group{padding:7px 0 12px;}
.chapter-picker-group+ .chapter-picker-group{border-top:1px solid var(--hairline);padding-top:15px;}
.chapter-picker-group h3{
  margin:0 2px 9px;
  color:var(--gold-matte);
  font-size:.82rem;
}
.chapter-picker-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.chapter-picker-option{
  min-width:0;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--hairline);
  border-radius:12px;
  background:var(--tab-bg);
  color:var(--text-secondary);
  font:inherit;
  font-size:.88rem;
  text-align:start;
}
.chapter-picker-option:hover,.chapter-picker-option:focus-visible{
  color:var(--text-primary);
  border-color:var(--card-border);
  outline:none;
}
.chapter-picker-option.active{
  color:var(--text-primary);
  border-color:var(--gold);
  background:linear-gradient(135deg,var(--gold-soft),transparent);
  box-shadow:0 0 24px -14px var(--glow);
}
.chapter-picker-name{min-width:0;line-height:1.45;}
.chapter-picker-count{
  min-width:28px;
  height:28px;
  display:grid;place-items:center;
  flex:0 0 auto;
  border:1px solid var(--card-border);
  border-radius:9px;
  background:var(--card-bg-solid);
  color:var(--gold);
  font:700 .72rem var(--font-lat);
}
.chapter-picker-option.active .chapter-picker-count{background:var(--gold);color:#1a1206;border-color:var(--gold);}

/* Documentation lives in its own disclosure instead of crowding the lesson. */
.source-details .source-card{margin-top:0;}
.source-details summary{color:var(--accent-teal);}

/* Mobile reading size: readable by default, with +/- controls still available. */
@media (max-width:520px){
  html{font-size:16px;}
  .search-box input{font-size:.92rem;min-height:44px;}
  .sidebar-head h2{font-size:.76rem;}
  .chapter-jump-label{display:block;margin-bottom:6px;font-size:.8rem;}
  .chapter-picker-btn{width:100%;font-size:.92rem;min-height:46px;}
  .issue-item{font-size:.9rem;}
  .issue-title{font-size:.88rem;line-height:1.45;}
  .head-meta h1{font-size:calc(1.28rem * var(--fs-scale));line-height:1.45;}
  .article-body{font-size:calc(1rem * var(--fs-scale));line-height:1.95;}
  .section-block h3{font-size:calc(1rem * var(--fs-scale));}
  .madhhab-intro{font-size:calc(.95rem * var(--fs-scale));line-height:1.8;}
  .madhhab-card p{font-size:calc(1rem * var(--fs-scale));line-height:1.95;}
  .comparison-summary{font-size:calc(1rem * var(--fs-scale));line-height:1.95;}
  .application-text{font-size:calc(1.02rem * var(--fs-scale));line-height:1.95;}
  .verdict-part p{font-size:calc(1rem * var(--fs-scale));line-height:1.95;}
  .verdict-ruling{font-size:calc(1.08rem * var(--fs-scale))!important;line-height:1.95;}
  .matn-quote{font-size:calc(1.06rem * var(--fs-scale));line-height:2;}
  .scientific-details summary{font-size:calc(.94rem * var(--fs-scale));}
  .source-card-head h5{font-size:calc(1rem * var(--fs-scale));}
  .source-meta dd{font-size:calc(.9rem * var(--fs-scale));}
  .source-note{font-size:calc(.8rem * var(--fs-scale));}
  .issues{scroll-padding-inline:10px;padding-inline:2px 14px;}
  .issue-item{scroll-snap-align:center;}
  .chapter-picker-backdrop{padding:10px;}
  .chapter-picker-sheet{border-radius:20px 20px 16px 16px;max-height:82vh;}
  .chapter-picker-head{padding:15px 15px 12px;}
  .chapter-picker-list{padding:10px 12px 16px;}
  .chapter-picker-grid{grid-template-columns:1fr;gap:7px;}
  .chapter-picker-option{font-size:.95rem;min-height:50px;}
  .welcome-coverage{font-size:.72rem;margin:7px auto 13px;}
}
@media (max-width:380px){
  html{font-size:15.5px;}
  .article-body{font-size:calc(1rem * var(--fs-scale));}
  .madhhab-card p,.application-text,.verdict-part p{font-size:calc(1rem * var(--fs-scale));}
}


/* RC4 scholar-clean presentation */
.diagram-box{width:clamp(210px,28%,300px);padding:14px;}
.diagram-box .dlbl{font-size:.68rem;letter-spacing:.5px;text-transform:none;margin-bottom:10px;}
#diagramSvg{min-height:120px;display:grid;place-items:center;}
.issue-map-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;}
.issue-map-step{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 10px;border:1px solid var(--hairline);border-radius:12px;background:var(--card-bg);color:var(--text-secondary);}
.issue-map-step span{display:grid;place-items:center;min-width:26px;height:26px;border-radius:50%;border:1px solid var(--gold-matte);color:var(--gold);font-weight:700;font-size:.8rem;}
.issue-map-step b{font-size:.75rem;font-weight:650;line-height:1.35;}
.origin-card{padding:clamp(16px,2.5vw,24px);border:1px solid var(--card-border);border-radius:16px;background:linear-gradient(135deg,var(--gold-soft),transparent 55%),var(--tab-bg);}
.origin-badge{display:inline-flex;padding:4px 10px;border-radius:999px;border:1px solid var(--gold-matte);color:var(--gold-matte);font-size:.72rem;font-weight:700;margin-bottom:10px;}
.origin-card h4{margin:0 0 10px;color:var(--text-primary);font-size:1.05rem;}
.origin-text{margin:0;color:var(--text-primary);font-size:calc(1.02rem * var(--fs-scale));line-height:2;}
.origin-note{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--hairline);color:var(--text-muted);font-size:.82rem;line-height:1.8;}
@media(max-width:720px){.diagram-box{width:100%;}.issue-map-grid{grid-template-columns:1fr 1fr;}}

/* ============================================================
   RC4.2 — PREMIUM ENTRY GATE
   Restore the original cinematic welcome experience; keep the app itself behind it.
   ============================================================ */
.welcome{
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 14%, rgba(223,183,117,.18), transparent 34%),
    radial-gradient(circle at 15% 85%, rgba(38,117,105,.10), transparent 38%),
    linear-gradient(145deg, rgba(7,8,11,.98), rgba(13,14,18,.98));
}
.welcome::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.34;
  background-image:
    repeating-linear-gradient(135deg, rgba(223,183,117,.035) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(45deg, rgba(223,183,117,.02) 0 1px, transparent 1px 38px);
  -webkit-mask-image:radial-gradient(circle at center,#000 0 48%,transparent 86%);
  mask-image:radial-gradient(circle at center,#000 0 48%,transparent 86%);
}
.welcome-card-premium{
  width:min(790px,100%);
  padding:clamp(28px,5vw,54px);
  background:
    linear-gradient(145deg,rgba(28,29,35,.98),rgba(16,17,21,.99));
  border:1px solid rgba(223,183,117,.28);
  box-shadow:
    0 45px 120px rgba(0,0,0,.68),
    0 0 0 1px rgba(255,255,255,.018) inset,
    0 0 90px -42px rgba(223,183,117,.50);
}
.welcome-card-premium::before{
  content:''; position:absolute; inset:10px; border:1px solid rgba(223,183,117,.08); border-radius:20px; pointer-events:none;
}
.welcome-kicker{
  width:max-content; max-width:80%; margin:0 auto 14px; padding:6px 13px;
  border:1px solid rgba(223,183,117,.20); border-radius:999px;
  color:#c9a86f; background:rgba(223,183,117,.055);
  font-size:.72rem; letter-spacing:.08em;
}
.welcome-mark-book{
  width:76px; height:76px; border-radius:22px; margin-bottom:16px;
  background:linear-gradient(145deg,rgba(223,183,117,.13),rgba(223,183,117,.025));
  box-shadow:0 18px 55px -28px rgba(223,183,117,.9), inset 0 0 0 1px rgba(255,255,255,.02);
  animation:none;
}
.welcome-mark-book svg{width:48px;height:48px}
.welcome-card-premium .welcome-title{
  font-size:clamp(2rem,5vw,3.15rem);
  letter-spacing:.01em;
  margin-bottom:10px;
}
.welcome-card-premium .welcome-sub{
  max-width:650px; margin:0 auto 26px; line-height:2; color:#c4beb3;
  font-size:clamp(.94rem,2.2vw,1.08rem);
}
.welcome-stats-premium{
  width:min(590px,100%); margin:30px auto 9px; padding:18px 12px;
  border-top:1px solid rgba(223,183,117,.15); border-bottom:1px solid rgba(223,183,117,.15);
  gap:0;
}
.welcome-stats-premium .welcome-stat{flex:1; padding:0 18px; position:relative}
.welcome-stats-premium .welcome-stat:not(:last-child)::after{
  content:''; position:absolute; top:10%; bottom:10%; inset-inline-end:0; width:1px; background:rgba(223,183,117,.13);
}
.welcome-stats-premium .num{font-size:clamp(1.8rem,5vw,2.65rem); color:#e6c684; text-shadow:0 8px 26px rgba(223,183,117,.18)}
.welcome-stats-premium .lbl{font-size:.77rem; color:#9e988e; margin-top:7px}
.welcome-books{margin:10px auto 2px;color:#a9a297;letter-spacing:.02em;font-size:.77rem}
.welcome-card-premium .welcome-divider{margin:28px 0 20px;color:#c9a86f;letter-spacing:.12em}
.welcome-features-premium{grid-template-columns:repeat(4,1fr);gap:10px}
.welcome-features-premium .welcome-feature{
  display:block; min-height:148px; padding:16px 14px; text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
  border-color:rgba(223,183,117,.09); border-radius:15px;
}
.welcome-features-premium .welcome-feature:hover{transform:translateY(-2px);border-color:rgba(223,183,117,.24);box-shadow:0 16px 34px -26px rgba(223,183,117,.75)}
.welcome-features-premium .f-num{
  width:34px;height:34px;margin:0 auto 10px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(223,183,117,.22);background:rgba(223,183,117,.065);color:#dfb775;
  font-family:'Noto Naskh Arabic',serif;font-weight:700;font-size:.95rem;
}
.welcome-features-premium h4{color:#eee7db;margin-bottom:6px;font-size:.9rem}
.welcome-features-premium p{color:#958f86;font-size:.75rem;line-height:1.75}
.welcome-actions-premium{margin-top:28px}
.premium-start{
  min-width:220px; justify-content:center; padding:15px 34px; border-radius:13px;
  font-size:1rem; box-shadow:0 18px 45px -18px rgba(223,183,117,.85);
}
.welcome-card-premium .welcome-foot{margin-top:19px;color:#77736c;font-size:.73rem}
.welcome-card-premium .welcome-close-x{opacity:.55}
.welcome-card-premium .welcome-close-x:hover{opacity:1}

@media (max-width:760px){
  .welcome-features-premium{grid-template-columns:repeat(2,1fr)}
  .welcome-features-premium .welcome-feature{min-height:132px}
}
@media (max-width:520px){
  .welcome{padding:10px}
  .welcome-card-premium{padding:24px 18px 22px;border-radius:20px;max-height:96vh}
  .welcome-kicker{font-size:.64rem;margin-bottom:10px}
  .welcome-mark-book{width:60px;height:60px;border-radius:17px;margin-bottom:10px}
  .welcome-mark-book svg{width:38px;height:38px}
  .welcome-card-premium .welcome-title{font-size:1.75rem}
  .welcome-card-premium .welcome-sub{font-size:.85rem;line-height:1.8;margin-bottom:18px}
  .welcome-stats-premium{margin-top:18px;padding:14px 4px}
  .welcome-stats-premium .welcome-stat{padding:0 7px}
  .welcome-stats-premium .num{font-size:1.55rem}
  .welcome-stats-premium .lbl{font-size:.62rem}
  .welcome-books{font-size:.66rem;white-space:normal;line-height:1.7}
  .welcome-card-premium .welcome-divider{margin:20px 0 14px}
  .welcome-features-premium{grid-template-columns:repeat(2,1fr);gap:8px}
  .welcome-features-premium .welcome-feature{min-height:116px;padding:11px 9px}
  .welcome-features-premium .f-num{width:29px;height:29px;margin-bottom:7px}
  .welcome-features-premium h4{font-size:.78rem}
  .welcome-features-premium p{font-size:.67rem;line-height:1.55}
  .welcome-actions-premium{margin-top:18px}
  .premium-start{min-width:100%;padding:14px 20px}
  .welcome-actions-premium .w-btn.ghost{display:none}
  .welcome-card-premium .welcome-foot{font-size:.66rem;margin-top:14px}
}