/* ════════════════════════════════════════════════════════════════════
   FX Demo — اجزای رابط (کارت، آمار، بَج، جدول، نوار)  — مشترکِ همه‌ی سایت‌ها
   ════════════════════════════════════════════════════════════════════ */

/* سرِ صفحه */
.fx-ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.fx-ph-title{font-size:clamp(22px,3vw,30px);font-weight:900;margin:0;letter-spacing:-.3px}
.fx-ph-sub{margin:6px 0 0;color:var(--fx-text-dim);font-size:14.5px;max-width:680px}
.fx-ph-actions{display:flex;gap:10px;flex-wrap:wrap}

/* کارت */
.fx-c{position:relative;border-radius:var(--fx-r-lg);background:var(--fx-glass);border:1px solid var(--fx-border);backdrop-filter:var(--fx-blur);padding:20px;overflow:hidden}
.fx-c h3{margin:0 0 6px;font-size:16px;font-weight:800}
.fx-c .muted{color:var(--fx-text-dim);font-size:13.5px}

/* گرید */
.fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--min,240px),1fr));gap:16px}

/* آمار */
.fx-stat{padding:16px 18px;border-radius:var(--fx-r);background:var(--fx-surface);border:1px solid var(--fx-border);position:relative}
.fx-stat-v{font-family:var(--fx-font-display);font-size:26px;line-height:1.1;color:#fff}
.fx-stat-l{font-size:12.5px;color:var(--fx-text-mute);margin-top:6px}
.fx-stat-d{position:absolute;top:14px;inset-inline-start:16px;font-size:11.5px}
.fx-stat-d.up{color:var(--fx-green)} .fx-stat-d.down{color:var(--fx-c2)}

/* بَج */
.fx-badge{display:inline-block;padding:3px 11px;border-radius:var(--fx-pill);font-size:11.5px;font-weight:600}
.fx-badge.a{background:color-mix(in srgb,var(--fx-a) 16%,transparent);color:color-mix(in srgb,var(--fx-a) 70%,#fff)}
.fx-badge.b{background:color-mix(in srgb,var(--fx-b) 18%,transparent);color:color-mix(in srgb,var(--fx-b2) 70%,#fff)}
.fx-badge.c{background:color-mix(in srgb,var(--fx-c) 16%,transparent);color:color-mix(in srgb,var(--fx-c) 75%,#fff)}
.fx-badge.gray{background:rgba(255,255,255,.08);color:var(--fx-text-dim)}
.fx-badge.green{background:color-mix(in srgb,var(--fx-green) 16%,transparent);color:color-mix(in srgb,var(--fx-green) 75%,#fff)}
.fx-badge.rose{background:color-mix(in srgb,var(--fx-c2) 16%,transparent);color:color-mix(in srgb,var(--fx-c2) 75%,#fff)}

/* دکمه‌های داخلِ view */
.fx-view .fx-btn{padding:11px 18px;font-size:14px}

/* نوارِ پیشرفت */
.fx-pbar{height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.fx-pbar>span{display:block;height:100%;border-radius:99px}

/* جدول */
.fx-table-wrap{overflow-x:auto;border-radius:var(--fx-r);border:1px solid var(--fx-border)}
.fx-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:420px}
.fx-table th{text-align:right;padding:12px 14px;color:var(--fx-text-mute);font-weight:600;background:var(--fx-surface);font-size:12.5px}
.fx-table td{padding:12px 14px;border-top:1px solid var(--fx-border)}
.fx-table tbody tr:hover{background:var(--fx-surface)}

/* کدباکس (برای دموهای فنی) */
.fx-code{direction:ltr;text-align:left;font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.7;background:#070b16;border:1px solid var(--fx-border);border-radius:var(--fx-r);padding:16px 18px;overflow-x:auto;color:#cfe3ff;white-space:pre}
.fx-code .k{color:var(--fx-b2)} .fx-code .s{color:var(--fx-a)} .fx-code .c{color:var(--fx-text-mute)} .fx-code .n{color:var(--fx-c)}

/* لاگِ جریان (برای اجنت‌ها) */
.fx-log{display:flex;flex-direction:column;gap:8px}
.fx-log-row{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-radius:var(--fx-r-sm);background:var(--fx-surface);border:1px solid var(--fx-border);font-size:13px}
.fx-log-row .dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex-shrink:0}

/* stub + disclaimer */
.fx-stub{margin:14px 0;padding:16px 18px;border-radius:var(--fx-r);background:color-mix(in srgb,var(--fx-c) 6%,transparent);border:1px dashed color-mix(in srgb,var(--fx-c) 30%,transparent)}
.fx-stub-pill{display:inline-block;font-size:12px;font-weight:700;color:var(--fx-c)}
.fx-stub-txt{margin:8px 0 0;font-size:13px;color:var(--fx-text-soft)}
.fx-disc{margin-top:18px;font-size:12px;color:var(--fx-text-mute);line-height:1.85;border-top:1px solid var(--fx-border);padding-top:14px}

/* reveal سبک هنگام mount */
.fx-view>*{animation:fx-in .4s ease both}
@keyframes fx-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.fx-view>*{animation:none}}