/* SmartFX — نظرات و امتیاز کاربران
   اسکوپِ ریشه: .sfx-cm  ·  توکن‌ها طبقِ DESIGN-SYSTEM.md (بخش ۶: توکن روی اسکوپ، نه :root) */

.sfx-cm{
  --g:linear-gradient(150deg,#6a5be2,#4535ad);
  --accent:#5a4bd6; --accent-dk:#4535ad;
  --lilac:#efeaff; --lilac-2:#e3dbfa;
  --ink:#2a2350; --ink-2:#6f6a86; --ink-3:#9a97ad; --body:#35315a;
  --gold:#e8b64c; --up:#12b886; --down:#f0526c;
  --sh:0 22px 50px -26px rgba(69,53,173,.45);
  --sh-sm:0 12px 28px -18px rgba(69,53,173,.42);
  direction:rtl; color:var(--body);
  font-family:'IRANYekanX','IRANSans',Arial,sans-serif;
  margin-top:30px;
}
.sfx-cm *{box-sizing:border-box}
.sfx-cm button{font-family:inherit;cursor:pointer}

/* ---------------------------------------------------------- چیدمان */
.sfx-cm-wrap{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:22px;align-items:start}
.sfx-cm-side{position:sticky;top:90px;display:flex;flex-direction:column;gap:16px}
@media(max-width:991px){
  .sfx-cm-wrap{grid-template-columns:minmax(0,1fr)}
  .sfx-cm-side{position:static;order:-1}
}

.sfx-cm-h2{font-size:clamp(20px,2.6vw,26px);font-weight:800;color:var(--ink);margin:0 0 18px;line-height:1.55}

/* --------------------------------------------------- پنل امتیاز */
.sfx-cm-score{background:#fff;border:1px solid var(--lilac-2);border-radius:20px;
  padding:24px 20px;box-shadow:var(--sh-sm);text-align:center}
.sfx-cm-gauge{position:relative;width:170px;height:104px;margin:0 auto 6px}
.sfx-cm-gauge svg{display:block}
.sfx-cm-gauge-val{position:absolute;inset:auto 0 4px;text-align:center}
.sfx-cm-gauge-val b{display:block;font-size:30px;font-weight:900;color:var(--ink);line-height:1.2}
.sfx-cm-gauge-val b i{font-style:normal;font-size:17px;font-weight:700;color:var(--ink-3)}
.sfx-cm-gauge-cap{font-size:13px;font-weight:700;color:var(--ink-3);letter-spacing:.2px}
.sfx-cm-score p{font-size:13.5px;color:var(--ink-2);margin:8px 0 0;font-weight:600}

.sfx-cm-bars{margin-top:16px;display:flex;flex-direction:column;gap:7px}
.sfx-cm-bar{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2);font-weight:600}
.sfx-cm-bar .s{display:inline-flex;align-items:center;gap:3px;min-width:26px;justify-content:flex-start}
.sfx-cm-bar .s svg{width:12px;height:12px;fill:var(--gold)}
.sfx-cm-bar .t{flex:1;height:7px;border-radius:99px;background:#f1eefb;overflow:hidden}
.sfx-cm-bar .t i{display:block;height:100%;border-radius:99px;background:var(--g)}
.sfx-cm-bar .n{min-width:22px;text-align:left;color:var(--ink-3)}

.sfx-cm-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  margin-top:18px;padding:14px 22px;border:none;border-radius:999px;background:var(--g);color:#fff;
  font-weight:800;font-size:15px;box-shadow:0 16px 30px -14px rgba(69,53,173,.9);
  transition:transform .18s ease,box-shadow .18s ease}
.sfx-cm-cta:hover{transform:translateY(-2px)}
.sfx-cm-cta svg{width:18px;height:18px}

/* --------------------------------------------------- سیاست‌ها */
.sfx-cm-policy{background:#fff;border:1px solid var(--lilac-2);border-radius:20px;
  padding:18px 18px 6px;box-shadow:var(--sh-sm)}
.sfx-cm-policy h3{display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:800;
  color:var(--ink);margin:0 0 8px}
.sfx-cm-policy h3 svg{width:19px;height:19px;color:var(--accent)}
.sfx-cm-acc{border-top:1px solid #f2effc}
.sfx-cm-acc:first-of-type{border-top:none}
.sfx-cm-acc summary{list-style:none;cursor:pointer;padding:12px 0;font-size:13.5px;font-weight:700;
  color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:10px}
.sfx-cm-acc summary::-webkit-details-marker{display:none}
.sfx-cm-acc summary svg{width:15px;height:15px;color:var(--ink-3);flex:none;transition:transform .22s ease}
.sfx-cm-acc[open] summary{color:var(--accent-dk)}
.sfx-cm-acc[open] summary svg{transform:rotate(180deg)}
.sfx-cm-acc p{margin:0 0 12px;font-size:13px;line-height:2;color:var(--ink-2)}

/* ------------------------------------------------- نوارِ ابزار */
.sfx-cm-bar-top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:#fff;border:1px solid var(--lilac-2);border-radius:16px;padding:10px 14px;
  box-shadow:var(--sh-sm);margin-bottom:16px;flex-wrap:wrap}
.sfx-cm-tool{display:inline-flex;align-items:center;gap:7px;background:#f7f5fe;border:1.5px solid var(--lilac-2);
  border-radius:11px;padding:8px 14px;font-size:13.5px;font-weight:700;color:var(--ink);transition:.18s}
.sfx-cm-tool:hover{background:var(--lilac);border-color:var(--accent)}
.sfx-cm-tool svg{width:16px;height:16px;color:var(--accent)}
.sfx-cm-tool.is-on{background:var(--lilac);border-color:var(--accent);color:var(--accent-dk)}
.sfx-cm-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sfx-cm-count{font-size:13px;font-weight:700;color:var(--ink-3)}
.sfx-cm-divider{width:1px;height:20px;background:var(--lilac-2)}

/* -------------------------------------------- کارت‌های دعوت */
.sfx-cm-invite{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:0;
  background:#fff;border:1px solid var(--lilac-2);border-radius:18px;overflow:hidden;
  box-shadow:var(--sh-sm);margin-bottom:18px}
.sfx-cm-invite.is-single{grid-template-columns:1fr}
.sfx-cm-invite-x{width:1px;background:var(--lilac-2);margin:14px 0}
.sfx-cm-invite-card{display:flex;align-items:center;gap:13px;padding:16px 18px;background:none;
  border:none;text-align:right;text-decoration:none;transition:background .18s ease}
.sfx-cm-invite-card:hover{background:#faf9ff}
.sfx-cm-invite-ic{flex:none;width:42px;height:42px;border-radius:13px;background:var(--lilac);
  display:flex;align-items:center;justify-content:center}
.sfx-cm-invite-ic svg{width:21px;height:21px;color:var(--accent)}
.sfx-cm-invite-b{min-width:0;flex:1}
.sfx-cm-invite-t{display:block;font-size:14.5px;font-weight:800;color:var(--ink)}
.sfx-cm-invite-d{display:block;font-size:12.5px;line-height:1.85;color:var(--ink-2);margin-top:2px}
.sfx-cm-invite-a{flex:none;color:var(--ink-3)}
.sfx-cm-invite-a svg{width:17px;height:17px}
@media(max-width:640px){
  .sfx-cm-invite{grid-template-columns:1fr}
  .sfx-cm-invite-x{width:auto;height:1px;margin:0 16px}
}

/* --------------------------------------------------- کارتِ نظر */
.sfx-cm-list{display:flex;flex-direction:column;gap:14px}
.sfx-cm-card{background:#fff;border:1px solid var(--lilac-2);border-radius:18px;padding:18px 20px;
  box-shadow:var(--sh-sm);transition:border-color .2s ease}
.sfx-cm-card:hover{border-color:#d6cdf5}
.sfx-cm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.sfx-cm-who{display:flex;align-items:center;gap:11px;min-width:0}
.sfx-cm-ava{flex:none;width:42px;height:42px;border-radius:50%;background:var(--lilac);
  color:var(--accent-dk);display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:800}
.sfx-cm-meta{min-width:0}
.sfx-cm-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sfx-cm-name b{font-size:14.5px;font-weight:800;color:var(--ink)}
.sfx-cm-date{display:block;font-size:12.5px;color:var(--ink-3);font-weight:600;margin-top:3px}
.sfx-cm-stars{display:inline-flex;align-items:center;gap:1.5px}
.sfx-cm-stars svg.on{fill:var(--gold)}
.sfx-cm-stars svg.off{fill:#e6e2f4}
.sfx-cm-badge-official{background:var(--up);color:#fff;border-radius:999px;padding:3px 10px;
  font-size:11.5px;font-weight:800}
.sfx-cm-tags{display:flex;gap:7px;flex-wrap:wrap}
.sfx-cm-tag{background:#f7f5fe;border:1px solid var(--lilac-2);border-radius:999px;
  padding:5px 12px;font-size:12px;font-weight:700;color:var(--ink-2);white-space:nowrap}

.sfx-cm-title{font-size:15.5px;font-weight:800;color:var(--ink);margin:14px 0 6px;line-height:1.6}
.sfx-cm-body{font-size:14.5px;line-height:2.05;color:var(--body);text-align:justify}
.sfx-cm-body p{margin:0 0 8px}
.sfx-cm-body p:last-child{margin:0}

.sfx-cm-foot{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:12px;
  border-top:1px solid #f4f1fc;flex-wrap:wrap}
.sfx-cm-foot button{display:inline-flex;align-items:center;gap:6px;background:none;border:none;
  padding:4px 2px;font-size:13px;font-weight:700;color:var(--ink-2);transition:color .18s ease}
.sfx-cm-foot button:hover{color:var(--accent-dk)}
.sfx-cm-vote.is-done{color:var(--accent);cursor:default}
.sfx-cm-vote .n{font-size:12.5px;color:var(--ink-3);min-width:9px}
.sfx-cm-sep{width:1px;height:16px;background:var(--lilac-2)}
.sfx-cm-report{margin-inline-start:auto;color:var(--ink-3)!important}
.sfx-cm-report:hover{color:var(--down)!important}

/* پاسخ‌ها با خطِ اتصالِ منحنی */
.sfx-cm-replies{margin:14px 0 0;padding-inline-start:0;padding-inline-end:22px;position:relative}
.sfx-cm-replies::before{content:'';position:absolute;top:0;bottom:18px;right:9px;
  width:2px;background:var(--lilac-2);border-radius:2px}
.sfx-cm-card.is-reply{position:relative;background:#faf9ff;margin-top:12px;border-radius:16px}
.sfx-cm-card.is-reply::before{content:'';position:absolute;top:26px;right:-13px;width:13px;height:14px;
  border-right:2px solid var(--lilac-2);border-bottom:2px solid var(--lilac-2);
  border-bottom-right-radius:10px}
.sfx-cm-card.is-reply .sfx-cm-ava{width:34px;height:34px;font-size:15px}

.sfx-cm-replybox{margin-top:12px}
.sfx-cm-replybox textarea{width:100%;font-family:inherit;font-size:14px;color:var(--ink);
  border:1.5px solid var(--lilac-2);border-radius:12px;padding:11px 14px;min-height:88px;resize:vertical}
.sfx-cm-replybox textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(90,75,214,.12)}
.sfx-cm-replybox .row{display:flex;gap:9px;margin-top:9px;align-items:center;flex-wrap:wrap}
.sfx-cm-replybox input[type=text]{flex:1;min-width:150px;font-family:inherit;font-size:14px;
  border:1.5px solid var(--lilac-2);border-radius:12px;padding:10px 14px;color:var(--ink)}

.sfx-cm-empty{background:#fff;border:1px dashed var(--lilac-2);border-radius:18px;padding:38px 20px;
  text-align:center;color:var(--ink-2);font-size:14px;font-weight:600}
.sfx-cm-more{display:block;margin:18px auto 0;padding:12px 30px;border-radius:999px;background:#fff;
  color:var(--accent-dk);border:1.5px solid var(--lilac-2);font-weight:800;font-size:14px;
  box-shadow:var(--sh-sm);transition:.18s}
.sfx-cm-more:hover{background:var(--lilac)}

/* ------------------------------------------------------- مودال */
.sfx-cm-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(24,16,58,.55);backdrop-filter:blur(3px)}
.sfx-cm-modal.is-open{display:flex}
.sfx-cm-modal-box{background:#fff;border-radius:22px;width:100%;max-width:560px;max-height:92vh;
  overflow:auto;box-shadow:0 30px 80px rgba(20,10,60,.35);animation:sfxCmIn .22s ease}
@keyframes sfxCmIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sfx-cm-modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px;border-bottom:1px solid var(--lilac-2);position:sticky;top:0;background:#fff;z-index:2}
.sfx-cm-modal-h h3{margin:0;font-size:17px;font-weight:800;color:var(--ink)}
.sfx-cm-x{width:34px;height:34px;border-radius:50%;border:none;background:#f4f1fc;color:var(--ink-2);
  font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center}
.sfx-cm-x:hover{background:var(--lilac);color:var(--accent-dk)}
.sfx-cm-modal-b{padding:20px 22px}
.sfx-cm-modal-f{display:flex;gap:10px;justify-content:flex-end;padding:16px 22px;
  border-top:1px solid var(--lilac-2);position:sticky;bottom:0;background:#fff}

.sfx-cm-field{margin-bottom:16px}
.sfx-cm-field>label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:7px}
.sfx-cm-field input[type=text],.sfx-cm-field textarea,.sfx-cm-field input[type=number]{
  width:100%;font-family:inherit;font-size:14.5px;color:var(--ink);background:#fff;
  border:1.5px solid var(--lilac-2);border-radius:12px;padding:11px 14px}
.sfx-cm-field textarea{min-height:130px;resize:vertical;line-height:1.9}
.sfx-cm-field input:focus,.sfx-cm-field textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(90,75,214,.12)}
.sfx-cm-hint{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.85}

.sfx-cm-rate{text-align:center;background:#faf9ff;border:1px solid var(--lilac-2);
  border-radius:16px;padding:18px;margin-bottom:18px}
.sfx-cm-rate>span{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:12px}
.sfx-cm-rate-stars{display:inline-flex;flex-direction:row-reverse;gap:6px}
.sfx-cm-rate-stars button{background:none;border:none;padding:2px;line-height:0}
.sfx-cm-rate-stars svg{width:38px;height:38px;fill:#e6e2f4;transition:fill .14s ease,transform .14s ease}
.sfx-cm-rate-stars button:hover svg,.sfx-cm-rate-stars button.on svg{fill:var(--gold)}
.sfx-cm-rate-stars button:hover svg{transform:scale(1.12)}
.sfx-cm-rate-badge{display:inline-block;margin-top:10px;font-size:13px;font-weight:800;
  color:var(--accent-dk);background:var(--lilac);border-radius:999px;padding:6px 16px;min-height:29px}

.sfx-cm-radios{display:flex;gap:9px;flex-wrap:wrap}
.sfx-cm-radios label{display:inline-flex;align-items:center;gap:7px;background:#fff;
  border:1.5px solid var(--lilac-2);border-radius:11px;padding:9px 14px;font-size:13px;
  font-weight:700;color:var(--ink-2);cursor:pointer;transition:.16s}
.sfx-cm-radios input{accent-color:var(--accent);margin:0}
.sfx-cm-radios label:has(input:checked){background:var(--lilac);border-color:var(--accent);color:var(--accent-dk)}

.sfx-cm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;
  border-radius:999px;font-weight:800;font-size:14.5px;border:none;transition:.18s}
.sfx-cm-btn-p{background:var(--g);color:#fff;box-shadow:0 16px 30px -14px rgba(69,53,173,.9)}
.sfx-cm-btn-p:hover{transform:translateY(-2px)}
.sfx-cm-btn-p:disabled{opacity:.6;transform:none;cursor:not-allowed}
.sfx-cm-btn-g{background:#fff;color:var(--ink-2);border:1.5px solid var(--lilac-2)}
.sfx-cm-btn-g:hover{background:#f7f5fe}

.sfx-cm-msg{margin-top:12px;font-size:13.5px;font-weight:700;border-radius:12px;padding:11px 14px;display:none}
.sfx-cm-msg.ok{display:block;background:#e8f8f1;color:#0f7a56;border:1px solid #b9e8d5}
.sfx-cm-msg.err{display:block;background:#fdecef;color:#b3253c;border:1px solid #f6c9d2}

@media (prefers-reduced-motion:reduce){
  .sfx-cm *,.sfx-cm-modal-box{animation:none!important;transition:none!important}
}