/* ===== 3. Book layout ===== */
.book{max-width:var(--maxw); margin:0 auto; padding:clamp(16px,3vw,34px) clamp(12px,4vw,24px) 120px;
  display:flex; flex-direction:column; gap:clamp(22px,4vw,42px)}
.page{
  background:var(--paper); border-radius:var(--r-lg); padding:clamp(18px,4vw,38px);
  border:2px solid var(--line); box-shadow:var(--shadow-2); position:relative; overflow:hidden;
  animation:fadeUp .55s ease both;
}
.page::after{content:""; position:absolute; inset-inline-start:0; top:0; height:9px; width:100%;
  background:repeating-linear-gradient(90deg,var(--teal) 0 26px,var(--gold) 26px 52px,var(--coral) 52px 78px,var(--blue) 78px 104px)}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.pageTag{display:inline-flex; align-items:center; gap:8px; background:#EAF6F4; color:var(--teal-dk);
  border:2px solid #CFE9E5; border-radius:999px; padding:3px 13px; font-family:var(--font-ui); font-weight:700; font-size:.8rem}
.pageTag.gold{background:#FFF3DC; border-color:#F7DFB2; color:var(--gold-dk)}
.pageTag.coral{background:#FFEDE8; border-color:#F8D3C9; color:#B93F22}
.page h2.title{font-size:clamp(1.5rem,4.6vw,2.1rem); margin:12px 0 4px; font-weight:800}
.when{font-family:var(--font-ui); font-weight:600; color:var(--ink-soft); font-size:.98rem}
.rule{height:3px; border:0; background:linear-gradient(90deg,var(--line),transparent); margin:16px 0}

/* dua + hadith blocks */
.duaBox{
  background:linear-gradient(180deg,#F2FBF9,#E8F6F4); border:2px dashed #9FD3CC; border-radius:var(--r-md);
  padding:clamp(14px,3vw,24px); margin:14px 0; position:relative;
}
.duaBox .dua{font-family:var(--font-dua); font-size:clamp(1.25rem,4vw,1.7rem); line-height:2.15;
  color:#0B3B37; font-weight:600; margin:0; text-align:center}
.duaBox .label{position:absolute; top:-14px; inset-inline-start:18px; background:var(--teal); color:#fff;
  font-family:var(--font-ui); font-weight:700; font-size:.78rem; padding:3px 12px; border-radius:999px}
.hadith{background:#FFF7E8; border-inline-start:8px solid var(--gold); border-radius:var(--r-sm);
  padding:14px 18px; margin:14px 0}
.hadith p{margin:0; font-family:var(--font-dua); font-size:calc(1.06rem * var(--fs)); color:#5A3A08}
.hadith .src{display:flex; align-items:center; gap:7px; margin-top:8px; font-family:var(--font-ui);
  font-weight:700; font-size:.82rem; color:var(--gold-dk)}
.meaning{display:flex; gap:12px; align-items:flex-start; margin:16px 0 8px}
.meaning .ic{flex:0 0 42px; width:42px; height:42px; border-radius:14px; display:grid; place-items:center;
  background:#EDF2FB; color:var(--blue)}
.meaning h3{font-size:1.05rem; margin-bottom:2px}
.meaning p{margin:0; color:var(--ink-soft)}
.tip{margin-top:14px; background:#F7F1FB; border:2px solid #E7DBF4; border-radius:var(--r-sm); padding:12px 16px;
  display:flex; gap:10px; align-items:flex-start}
.tip .ic{flex:0 0 34px; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:#fff; color:var(--violet)}
.tip b{font-family:var(--font-ui)}