: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}

.hero{
  width:100%;
  background:#f6f7f8;        /* زمینه سفید دو طرف */
  text-align:center;         /* تصویر وسط قرار بگیرد */
  padding:10px 0;
}
.hero.noimg{padding:10px 0}
.heroImg{
  width:100%;
  max-width:1200px;          /* حداکثر عرض تصویر (همان عرض واقعی فایل) */
  height:auto;
  display:inline-block;
}
.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}
.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}
.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-right:8px}
.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}
  .heroImg{max-height:220px}
}