:root{--bd:rgba(0,0,0,.08);--txt:#111;--mut:#444;--bg:#fff}
*{box-sizing:border-box}
body{margin:0;background:#f6f7f8;color:var(--txt);font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial}

.wrap{max-width:960px;margin:18px auto 24px;padding:0 14px}
.card{background:var(--bg);border:1px solid var(--bd);border-radius:18px;padding:18px;box-shadow:0 6px 18px rgba(0,0,0,.04)}
.title{margin:0 0 10px;font-size:22px;line-height:1.35}
.subtitle{margin:0 0 10px;color:var(--mut)}
.note{margin:0 0 14px;color:#555;font-size:13px;border:1px dashed rgba(0,0,0,.15);border-radius:14px;padding:10px;background:rgba(0,0,0,.015)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.stat{border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:10px;background:rgba(0,0,0,.015)}
.label{font-size:13px;color:#555;margin-bottom:4px}
.value{font-size:18px;font-weight:800}
.progressWrap{margin:10px 0 14px;border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:10px;background:rgba(0,0,0,.015)}
.progressTop{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}
.progressLabel{font-size:13px;color:#555}
.progressValue{font-size:13px;font-weight:800}
.bar{height:12px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden}
.barFill{height:100%;background:#111;border-radius:999px;width:0%}

.actions{margin:12px 0 4px}
.actions .row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}

.btn{border:0;border-radius:999px;padding:10px 14px;cursor:pointer;background:#111;color:#fff;font-weight:800}
.btn:hover{opacity:.92}
.btnAlt{background:#0b3d2e}

.devBox{margin-top:14px;border:1px dashed rgba(0,0,0,.18);border-radius:16px;padding:12px;background:#fff}
.devTitle{font-weight:900;margin-bottom:8px}
.devSub{font-size:13px;color:#555;margin:10px 0 8px}
.devRow{display:flex;flex-wrap:wrap;gap:10px}
.devBtn{border:0;border-radius:999px;padding:9px 12px;cursor:pointer;font-weight:900;font-size:13px;background:#7a1f1f;color:#fff}
.devBtn:hover{opacity:.92}
.devBtn.alt{background:#b08d57}
.devCount{margin-top:10px;color:#555;font-size:13px}

.miniStats{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 0}
.mini{font-size:13px;color:#333}
.mini .k{color:#555}
.result{margin-top:14px;border-top:1px dashed rgba(0,0,0,.15);padding-top:14px}
.resultTitle{font-weight:900;margin-bottom:8px}
.resultBody{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.resultText{padding:10px 12px;border-radius:14px;border:1px solid rgba(0,0,0,.1);background:#fafafa;min-width:260px}
.btnOutline{border:1px solid rgba(0,0,0,.15);background:#fff;border-radius:999px;padding:8px 12px;cursor:pointer;font-weight:800}

.share{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.shareTitle{width:100%;font-weight:900;margin-top:2px}
.shareBtn{padding:8px 14px;background:#111;color:#fff;border-radius:999px;text-decoration:none;font-size:13px;font-weight:800}
.shareBtn:hover{opacity:.92}

.recent{margin-top:16px;border-top:1px dashed rgba(0,0,0,.15);padding-top:14px}
.recentTitle{font-weight:900;margin-bottom:8px}
.recentList{margin:0;padding:0 18px;display:flex;flex-direction:column;gap:6px}
.recentList li{color:#222}
.recentList li .t{color:#555;font-size:12px;margin-left:8px}
.recentList li .tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.06);margin-left:8px;color:#333}

.muted{color:#777}
.foot{margin-top:18px;padding-top:12px;border-top:1px solid rgba(0,0,0,.08);color:#555;font-size:13px;text-align:center}
.msg{margin-top:10px;padding:10px 12px;border-radius:14px;border:1px solid rgba(0,0,0,.1);background:#fafafa}
.msg.err{border-color:rgba(200,0,0,.25);background:rgba(200,0,0,.04);color:#900}

@media (max-width:560px){
  .stats{grid-template-columns:1fr}
  .resultText{min-width:unset;width:100%}
  .progressTop{flex-direction:column;align-items:flex-start}
}


/* v5: language switch */
.langSwitch{position:fixed;top:10px;left:10px;display:flex;gap:6px;z-index:50;flex-wrap:wrap}
.langSwitch button{border:1px solid rgba(0,0,0,.15);background:#fff;padding:6px 8px;cursor:pointer;font-size:12px;border-radius:10px;font-weight:700}
.langSwitch button.active{background:#111;color:#fff}

/* v5: devotion sections */
.sectionGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.subCard{border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:12px;background:#fff}
.sectionTitle{font-size:16px;font-weight:900;margin-bottom:10px}
.statsSmall{margin-top:10px;font-size:13px;color:#444}
.breakdown{margin:8px 0 0;padding:0 18px}
.breakdown li{margin:3px 0}
.smallLine{margin-bottom:6px}
.duaCard{border-left:4px solid #7a1f1f}
.ziyaraCard{border-left:4px solid #b08d57}

/* v5: share buttons */
.shareBtnLight{background:#fff !important;color:#111 !important;border:1px solid rgba(0,0,0,.15) !important}

/* v5: recent list styles by type */
.recentList li.quran{background:rgba(0,51,170,.05);border-radius:12px;padding:8px 10px}
.recentList li.dua{background:rgba(106,0,170,.05);border-radius:12px;padding:8px 10px}
.recentList li.ziyara{background:rgba(180,83,9,.06);border-radius:12px;padding:8px 10px}
.tagQuran{background:#e8f0ff !important;color:#0033aa !important}
.tagDua{background:#f3e8ff !important;color:#6a00aa !important}
.tagZiyara{background:#fff3e0 !important;color:#b45309 !important}

@media (max-width:760px){.sectionGrid{grid-template-columns:1fr}.langSwitch{left:8px;right:8px}}


.hero{
  width:100%;
  margin-top:6px;
  background:#f6f7f8;
  text-align:center;
  padding:1px 0;
}
.hero.noimg{padding:10px 0}
.heroImg{
  width:100%;
  max-width:1200px;          /* حداکثر عرض تصویر (همان عرض واقعی فایل) */
  height:auto;
  display:inline-block;
}

/* Language switch: always above header, mobile-friendly */
.langSwitch{
  position: relative;          /* نه sticky نه fixed */
  z-index: 5;
  width: 100%;
  background: #f6f7f8;
  padding: 8px 10px;

  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;

  flex-wrap: wrap;             /* در موبایل دو ردیف شود */
  direction: ltr;              /* ترتیب دکمه‌ها ثابت بماند */
}

.langSwitch button{
  flex: 0 0 auto;
  border: 1px solid rgb(76, 76, 76);
  background: #fff;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 12px;
  border-radius: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.langSwitch button.active{
  background: rgb(15, 74, 152);
  color: #fff;
}

.langSwitch .flag{
  display:inline-block;
  margin-inline-end:6px;
  font-size:14px;
  line-height:1;
  vertical-align:-1px;
}

.khamenei{color:#aa1111;font-weight:900;}

/* Geo stats widget */
.geoCard{margin-top:14px;padding-top:10px;border-top:1px solid rgba(0,0,0,.08)}
.geoTitle{font-weight:800;margin:0 0 8px 0}
.geoList{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.geoItem{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.geoBar{height:10px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden}
.geoFill{height:100%;width:0%;background:rgba(0,0,0,.25)}
.geoCountry{font-weight:700;font-size:.95rem}
.geoPct{font-variant-numeric:tabular-nums;font-size:.9rem;opacity:.85}
.geoNote{margin-top:6px;font-size:.85rem;opacity:.7}

.inlineResult{margin-top:12px}


/* === UI Enhancements (vNext) === */
.leader{color:#aa1111;font-weight:900}

/* nicer card */
.card{box-shadow:0 4px 18px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.05)}

/* buttons */
.btn,.devBtn,.btnOutline,.shareBtn{transition:transform .18s, box-shadow .18s, opacity .18s}
.btn:hover,.devBtn:hover,.btnOutline:hover,.shareBtn:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.btn:active,.devBtn:active,.btnOutline:active,.shareBtn:active{transform:translateY(0)}
button.busy{opacity:.6;cursor:not-allowed}

/* result boxes */
.result{border:1px solid rgba(0,0,0,.08);border-radius:14px;background:#f2fff4}
.result.inlineResult{margin-top:12px}
.resultTitle{color:#145a22}
.resultBody{gap:10px}

/* geo card */
.geoCard{margin-top:18px;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:14px 14px;background:#fff}
.geoTitle{margin:0 0 10px;font-size:16px}
.geoList{list-style:none;padding:0;margin:0}
.geoItem{display:flex;align-items:center;gap:10px;margin:8px 0}
.geoCountry{width:88px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.geoBar{flex:1;height:10px;background:#eee;border-radius:999px;overflow:hidden}
.geoFill{height:100%;background:linear-gradient(90deg,#1a73e8,#7fb4ff)}
.geoPct{width:44px;text-align:left;font-variant-numeric:tabular-nums;color:#333}
.geoNote{margin-top:8px;color:var(--mut);font-size:12px}

/* recent list: a bit clearer */
.recentList li{padding:8px 10px;border-radius:10px}
.recentList li.quran{background:rgba(26,115,232,.06)}
.recentList li.dua{background:rgba(46,125,50,.06)}
.recentList li.ziyara{background:rgba(142,36,170,.06)}