/* ════════ CogMap Demo — UI components (مشترک، قفل) ════════ */

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

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

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

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

/* بَج */
.cm-badge{display:inline-block;padding:3px 11px;border-radius:var(--cm-pill);font-size:11.5px;font-weight:600}
.cm-badge.teal{background:rgba(45,212,191,.16);color:#7ff0e0}
.cm-badge.gold{background:rgba(245,179,1,.16);color:#f7cd6b}
.cm-badge.indigo{background:rgba(99,102,241,.18);color:#b9bdfb}
.cm-badge.rose{background:rgba(251,113,133,.16);color:#ffaeb9}
.cm-badge.gray{background:rgba(255,255,255,.08);color:var(--cm-text-dim)}
.cm-badge.green{background:rgba(52,211,153,.16);color:#7be8c0}

/* دکمه‌ها (هم‌نام با shell، اینجا برای داخلِ view) */
.cm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:var(--cm-pill);font-weight:700;font-size:14px;border:1px solid transparent;transition:transform .16s,box-shadow .22s,background .2s}
.cm-btn:hover{transform:translateY(-1px)}
.cm-btn-primary{color:#04140f;background:var(--cm-grad-teal);box-shadow:0 14px 34px -16px var(--cm-glow-teal)}
.cm-btn-ghost{color:var(--cm-text);background:var(--cm-surface);border-color:var(--cm-border-2)}
.cm-btn-ghost:hover{background:var(--cm-surface-2);border-color:var(--cm-teal)}

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

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

/* stub + disclaimer */
.cm-stub{margin:14px 0;padding:16px 18px;border-radius:var(--cm-r);background:rgba(245,179,1,.06);border:1px dashed rgba(245,179,1,.3)}
.cm-stub-pill{display:inline-block;font-size:12px;font-weight:700;color:var(--cm-gold)}
.cm-stub-txt{margin:8px 0 0;font-size:13px;color:var(--cm-text-soft)}
.cm-disc{margin-top:18px;font-size:12px;color:var(--cm-text-mute);line-height:1.85;border-top:1px solid var(--cm-border);padding-top:14px}

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