/* ===== Base: hide theme chrome on this template ===== */
body.ms-standalone #wpadminbar{display:none!important}
body.ms-standalone{margin-top:0!important}
body.ms-standalone header,
body.ms-standalone footer,
body.ms-standalone .site-header,
body.ms-standalone .site-footer,
body.ms-standalone .elementor-location-header,
body.ms-standalone .elementor-location-footer{display:none!important}

/* ===== App background ===== */
html,body{height:100%}
body.ms-standalone{
  direction:rtl; color:#0f172a;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Vazirmatn","IRANSans",sans-serif;
  background:
    radial-gradient(1000px 480px at -10% 0%, rgba(92,225,230,.12), transparent 55%),
    radial-gradient(900px 500px at 110% 110%, rgba(175,234,180,.14), transparent 55%),
    linear-gradient(180deg,#f9fafb 0%, #f6f7fb 100%);
}

/* ===== Forest topbar (icon-only) ===== */
.hg-topbar{max-width:1100px;margin:10px auto 0;padding:0 16px}
.hg-topbar-inner{display:flex;align-items:center;justify-content:flex-start}
.btn-forest{display:inline-flex;align-items:center;gap:8px;background:#0f766e;color:#fff;text-decoration:none;border-radius:12px;padding:10px 12px;box-shadow:0 8px 20px rgba(15,118,110,.25);font-weight:900}
.btn-forest .icon{font-size:18px;line-height:1}
.btn-forest .label{font-size:13px}
.btn-forest.icon-only .label{display:none}

/* دکمهٔ بازگشت: فقط آیکن در موبایل */
@media (max-width:540px){
  .hg-topbar .btn-forest{ font-size:13px; padding:8px 10px; border-radius:10px; }
  .hg-topbar .btn-forest .label{ display:none; }
  .hg-topbar .btn-forest .icon{ font-size:18px; }
}
@media (max-width:420px){
  .hg-topbar .btn-forest{ padding:8px; }
  .hg-topbar .btn-forest .icon{ font-size:16px; }
}

/* ===== AppBar ===== */
.ms-appbar{
  max-width:1100px; margin:10px auto 0; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.ms-title{font-weight:900; font-size:18px; color:#0f172a}
.ms-topinfo{display:flex; align-items:center; gap:10px}

/* ===== Shell panel ===== */
.ms-shell{
  max-width:1100px; margin:12px auto 28px; padding:18px 16px 24px;
  background:#ffffffd9; backdrop-filter:saturate(1.1) blur(3px);
  border:1px solid #e5e7eb; border-radius:22px;
  box-shadow:0 20px 50px rgba(15,23,42,.06);
}

/* ===== KPIs ===== */
.ms-kpis{display:grid; gap:10px}
.ms-counter{font-weight:800; color:#334155}
.ms-progress{height:10px; width:100%; background:#e5efe9; border-radius:999px; overflow:hidden}
#ms-bar{height:100%; width:0; background:linear-gradient(90deg,#22c55e,#10b981); border-radius:999px; transition:width .25s}

/* ===== Grid ===== */
.ms-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px; margin-top:18px;
}
.ms-card{
  position:relative; background:#fff; border:1px solid #eef2f7;
  border-radius:16px; padding:18px 16px 20px; cursor:pointer; outline:none;
  box-shadow:0 10px 24px rgba(15,23,42,.06); transition:transform .12s, box-shadow .12s;
}
.ms-card:hover{ transform:translateY(-1px); box-shadow:0 16px 30px rgba(15,23,42,.10) }
.ms-card:focus{ box-shadow:0 0 0 3px rgba(34,197,94,.35), 0 10px 24px rgba(15,23,42,.06) }
.ms-card .tick{
  position:absolute; top:10px; left:12px; width:22px; height:22px; border-radius:999px;
  background:#eafff3; color:#15803d; font-weight:800; display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 2px #c7f7da; font-size:14px;
}
.ms-card .hidden{display:none}
.ms-card.done{ border-color:#c9f2da }
.ms-text{ color:#0f172a; line-height:1.9; font-size:15.5px }

/* ===== Lock overlay for FREE overflow ===== */
.ms-card.locked{cursor:not-allowed}
.ms-card.locked-free .ms-text{filter: blur(4px); opacity:.32; user-select:none}
.ms-card .ms-cta-cover{
  position:absolute; inset:8px; border-radius:14px; z-index:5; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(15,23,42,.86), rgba(15,23,42,.82));
  border:1px solid rgba(255,255,255,.08); box-shadow:0 12px 28px rgba(15,23,42,.24); color:#fff;
}
.ms-cta-panel{width:min(92%,380px); text-align:center; display:grid; gap:10px; padding:14px 12px; border-radius:12px}
.ms-cta-title{font-weight:900; font-size:14.5px}
.ms-cta-title::before{content:"🔒 "; font-size:14px}
/* خود متن CTA لینک می‌شود؛ بدون زیرخط */
.ms-cta-panel a.ms-cta-title{ text-decoration:none; color:inherit; }

/* ===== Footer (بدون CTA) ===== */
.ms-footer{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px}
.ms-left{display:flex; align-items:center; gap:12px; flex-wrap:wrap}

/* ===== Flower (بالا کنار پیام پریمیوم) ===== */
.ms-flower{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid #eee; border-radius:12px; padding:6px 10px; box-shadow:0 8px 18px rgba(0,0,0,.06)}
.ms-flower-avatar{position:relative; width:34px; height:34px; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 30% 30%, #ffecc7 0%, #ffd77a 60%, #f7c04a 100%)}
.ms-flower-avatar img{width:100%; height:100%; object-fit:cover; display:block}
.ms-flower-avatar span{display:grid;place-items:center;width:100%;height:100%}
.ms-flower-badge{position:absolute; bottom:-6px; right:-6px; min-width:20px; height:20px; padding:0 6px; background:#111; color:#fff; border-radius:999px; border:2px solid #fff; font-weight:800; font-size:11px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.25)}
.ms-flower-text{font-weight:800; color:#2a2a2a; font-size:13px}

/* ===== Toast chip (top) ===== */
.ms-toast{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px;
  background:rgba(15,23,42,.9); color:#fff; font:800 13px/1 system-ui,-apple-system,"Vazirmatn",sans-serif;
  box-shadow:0 8px 20px rgba(15,23,42,.18); z-index:999999; white-space:nowrap; animation:toastIn .22s ease-out both;
}
.ms-toast::before{content:"☀️"}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ===== Gate ===== */ 
.ms-gate-wrap{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#f9fafb 0%,#f2f6ff 100%)}
.ms-gate-card{max-width:640px; width:92%; background:#111; color:#f8f8f8; border-radius:22px; padding:28px; border:1px solid rgba(255,255,255,.06); box-shadow:0 30px 80px rgba(0,0,0,.45); text-align:center}
.ms-btn{display:inline-block; padding:10px 16px; border-radius:12px; text-decoration:none}
.ms-btn.ms-btn-primary{background:#22c55e; color:#062; font-weight:900}

/* ===== Premium tag at top-right ===== */
.ms-premium-top{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:10px;
  background:#eaffea;border:1px solid #b7f0b7;
  color:#166534;font-weight:800;font-size:12.5px;white-space:nowrap
}

/* ===== Responsive ===== */
@media (max-width:720px){
  .ms-shell{border-radius:18px; padding:16px 14px 20px}
  .ms-footer{flex-direction:column; align-items:flex-start}
}
body.ms-standalone header.ms-appbar{display:flex!important}
/* ===== MONSUN-LIKE TOPBAR (msn- prefixed) ===== */
.msn-topbar{
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, #fbfdff 0%, #f6f9ff 60%, #f6f9ff00 100%);
  border-bottom: 1px solid rgba(0,0,0,.04);
  backdrop-filter: blur(6px);
  direction: rtl;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "IRANYekan", Vazirmatn, sans-serif;
}
.msn-topbar-inner{
  max-width: 1200px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
}
.msn-left{
  margin-inline-start: auto;      /* در RTL پِل‌ها به چپ می‌روند */
  display:flex; align-items:center; gap:10px;
}

/* Pills */
.msn-pill{
  display:inline-flex; align-items:center; gap:10px;
  height:36px; padding:0 14px;
  border-radius:999px; text-decoration:none;
  font-weight:700; font-size:13px; line-height:1.1;
  color:#0c1b1e; background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.msn-pill:hover{ filter:brightness(1.03); }
.msn-pill-label{ white-space:nowrap; }

/* Premium (green) */
.msn-pill--green{
  background:#e9fff2; color:#0b7a3a; border-color:rgba(11,122,58,.15);
}

/* Medal pill */
.msn-pill--medal .msn-pill-medal-icon{
  width:22px; height:22px; border-radius:999px; display:inline-block;
  box-shadow: inset 0 0 0 2px #fff, 0 1px 2px rgba(0,0,0,.08);
  background:
    radial-gradient(circle at 30% 30%, #fff6 0 40%, transparent 41%),
    conic-gradient(#f7c948 0 70%, #f1a208 70% 100%); /* طلایی */
  position:relative;
}
.msn-pill--medal .msn-pill-medal-icon::after{
  content:"🏅"; position:absolute; inset:0; display:grid; place-items:center; font-size:13px;
}
/* اگر از PHP آیکن مدال سفارشی آمد */
.msn-pill--medal .msn-pill-medal-icon[style*="--medal"]{
  background: var(--medal) no-repeat center/cover, #f7c948;
}

/* Avatar (tree) on right */
.msn-avatar{
  width:44px; height:44px; border-radius:12px;
  background: linear-gradient(145deg, #046a6a, #0b8c8c);
  display:grid; place-items:center; text-decoration:none; color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  overflow:hidden;
}
.msn-avatar img{ width:70%; height:70%; object-fit:contain; filter: drop-shadow(0 1px 0 rgba(0,0,0,.2)); }
.msn-avatar span{ font-size:22px; line-height:1; }

/* Responsive */
@media (max-width:640px){
  .msn-pill{ height:34px; padding:0 12px; font-size:12px; }
  .msn-avatar{ width:40px; height:40px; border-radius:10px; }
}