/* ============================================================
   SYNCYAR v5.0 — CLEAN & READABLE
   تمرکز روی خوانایی متن، تمیز، ساده، کاربردی
   رنگ: آبی-سورمه‌ای روی خاکستری تیره
   ============================================================ */

/* ============================================================
   1. Design Tokens
   ============================================================ */
:root,[data-bs-theme=light]{
  /* Backgrounds */
  --xs-bg:#f8fafc;
  --xs-bg-2:#f1f5f9;
  --xs-surface:#ffffff;
  --xs-surface-2:#f8fafc;
  --xs-surface-3:#f1f5f9;
  --xs-surface-hover:#e2e8f0;

  /* Lines */
  --xs-border:#e2e8f0;
  --xs-border-hover:#cbd5e1;
  --xs-border-strong:#94a3b8;

  /* Text */
  --xs-text:#0f172a;
  --xs-text-2:#1e293b;
  --xs-text-3:#334155;
  --xs-muted:#64748b;
  --xs-muted-2:#475569;

  /* Brand */
  --xs-brand:#4f46e5;
  --xs-brand-2:#6366f1;
  --xs-brand-soft:#eef2ff;
  --xs-brand-glow:rgba(79,70,229,.25);

  /* Status */
  --xs-ok:#059669;   --xs-ok-soft:#ecfdf5;
  --xs-warn:#d97706; --xs-warn-soft:#fffbeb;
  --xs-bad:#dc2626;  --xs-bad-soft:#fef2f2;
  --xs-info:#0891b2; --xs-info-soft:#ecfeff;

  --xs-xcom:var(--xs-brand);
  --xs-xcom-soft:var(--xs-brand-soft);
  --xs-xir:#ea580c;
  --xs-xir-soft:#fff7ed;

  --xs-primary:var(--xs-brand);
  --xs-primary-hover:#4338ca;
  --xs-on-primary:#fff;

  /* Shadows */
  --xs-shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --xs-shadow:0 2px 8px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --xs-shadow-lg:0 8px 24px rgba(15,23,42,.08),0 2px 6px rgba(15,23,42,.04);

  /* Radius */
  --xs-r-xs:.375rem; --xs-r-sm:.5rem; --xs-r:.625rem; --xs-r-lg:.75rem; --xs-r-xl:1rem;

  /* Layout */
  --xs-sb-w:240px;
  --xs-sb-mini:64px;
  --xs-top-h:56px;

  /* Motion */
  --xs-ease:cubic-bezier(.4,0,.2,1);

  /* Bootstrap overrides */
  --bs-body-bg:var(--xs-bg);
  --bs-body-color:var(--xs-text);
  --bs-border-color:var(--xs-border);
  --bs-primary:var(--xs-brand);
  --bs-primary-rgb:79,70,229;
  --bs-link-color:var(--xs-brand);
  --bs-link-hover-color:var(--xs-primary-hover);
  --bs-body-font-family:'Vazirmatn','IRANYekan',-apple-system,Tahoma,system-ui,sans-serif;
  --bs-body-font-size:.9rem;
  --bs-border-radius:.5rem;
  --bs-border-radius-sm:.375rem;
  --bs-border-radius-lg:.625rem;
  --bs-secondary-color:var(--xs-muted);
  --bs-emphasis-color:var(--xs-text);
  --bs-heading-color:var(--xs-text);
}

/* ============================================================
   Dark Theme
   ============================================================ */
[data-bs-theme=dark]{
  --xs-bg:#0d1117;
  --xs-bg-2:#0a0e14;
  --xs-surface:#161b22;
  --xs-surface-2:#1c2128;
  --xs-surface-3:#232a33;
  --xs-surface-hover:#2a323c;

  --xs-border:#2d333b;
  --xs-border-hover:#3d444c;
  --xs-border-strong:#4a5158;

  --xs-text:#f0f6fc;
  --xs-text-2:#e6edf3;
  --xs-text-3:#c9d1d9;
  --xs-muted:#8b949e;
  --xs-muted-2:#6e7681;

  --xs-brand-soft:rgba(79,70,229,.15);
  --xs-brand-glow:rgba(79,70,229,.4);

  --xs-ok-soft:rgba(5,150,105,.12);
  --xs-warn-soft:rgba(217,119,6,.12);
  --xs-bad-soft:rgba(220,38,38,.12);
  --xs-info-soft:rgba(8,145,178,.12);

  --xs-xir-soft:rgba(234,88,12,.12);

  --xs-shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --xs-shadow:0 2px 8px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.2);
  --xs-shadow-lg:0 8px 24px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);

  --bs-body-bg:var(--xs-bg);
  --bs-body-color:var(--xs-text);
  --bs-border-color:var(--xs-border);
}

[data-bs-theme=dark] body{background:var(--xs-bg);color:var(--xs-text)}
[data-bs-theme=dark] .sidebar{background:rgba(13,17,23,.95)}
[data-bs-theme=dark] .topbar{background:rgba(13,17,23,.8);border-bottom-color:var(--xs-border)}
[data-bs-theme=dark] .card,[data-bs-theme=dark] .set-card,[data-bs-theme=dark] .seo-card,[data-bs-theme=dark] .sec-card,[data-bs-theme=dark] .inv-section,[data-bs-theme=dark] .hr-card,[data-bs-theme=dark] .hr-store{background:var(--xs-surface);border-color:var(--xs-border);color:var(--xs-text)}
[data-bs-theme=dark] .card-header{background:transparent;border-bottom-color:var(--xs-border);color:var(--xs-text)}
[data-bs-theme=dark] .form-control,[data-bs-theme=dark] .form-select{background:var(--xs-surface-2);border-color:var(--xs-border);color:var(--xs-text)}
[data-bs-theme=dark] .form-control:focus,[data-bs-theme=dark] .form-select:focus{background:var(--xs-surface-2);border-color:var(--xs-brand);color:var(--xs-text)}
[data-bs-theme=dark] .form-control::placeholder{color:var(--xs-muted);opacity:.6}
[data-bs-theme=dark] .table{color:var(--xs-text)}
[data-bs-theme=dark] .table thead th{background:var(--xs-surface-2);color:var(--xs-muted);border-bottom-color:var(--xs-border)}
[data-bs-theme=dark] .table tbody td{border-bottom-color:var(--xs-border);color:var(--xs-text)}
[data-bs-theme=dark] .table tbody tr:hover td{background:var(--xs-surface-2)}
[data-bs-theme=dark] .dropdown-menu{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .dropdown-item{color:var(--xs-text-2)}
[data-bs-theme=dark] .dropdown-item:hover{background:var(--xs-brand-soft);color:var(--xs-brand)}
[data-bs-theme=dark] .modal-content{background:var(--xs-surface);border-color:var(--xs-border);color:var(--xs-text)}
[data-bs-theme=dark] .toast{background:var(--xs-surface);border-color:var(--xs-border);color:var(--xs-text)}
[data-bs-theme=dark] .alert{color:var(--xs-text)}
[data-bs-theme=dark] .alert-info{background:var(--xs-info-soft);border-color:rgba(8,145,178,.3);color:#7dd3fc}
[data-bs-theme=dark] .alert-success{background:var(--xs-ok-soft);border-color:rgba(5,150,105,.3);color:#6ee7b7}
[data-bs-theme=dark] .alert-warning{background:var(--xs-warn-soft);border-color:rgba(217,119,6,.3);color:#fcd34d}
[data-bs-theme=dark] .alert-danger{background:var(--xs-bad-soft);border-color:rgba(220,38,38,.3);color:#fca5a5}
[data-bs-theme=dark] pre{background:var(--xs-surface-2)!important;color:var(--xs-text-2);border-color:var(--xs-border)}
[data-bs-theme=dark] code{background:var(--xs-surface-2);color:var(--xs-brand)}
[data-bs-theme=dark] .btn-close{filter:invert(1) grayscale(100%) brightness(200%)}
[data-bs-theme=dark] .btn-light{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1);color:var(--xs-text)}
[data-bs-theme=dark] .btn-outline-secondary{background:transparent;border-color:var(--xs-border);color:var(--xs-text-2)}
[data-bs-theme=dark] .btn-outline-secondary:hover{background:var(--xs-surface-2);color:var(--xs-text)}
[data-bs-theme=dark] .icon-btn{background:rgba(255,255,255,.04);border-color:var(--xs-border);color:var(--xs-text-3)}
[data-bs-theme=dark] .icon-btn:hover{background:var(--xs-brand-soft);border-color:var(--xs-brand);color:var(--xs-brand)}
[data-bs-theme=dark] .user-chip{background:rgba(255,255,255,.04);border-color:var(--xs-border)}
[data-bs-theme=dark] .tb-search{background:rgba(255,255,255,.04);border-color:var(--xs-border);color:var(--xs-muted)}
[data-bs-theme=dark] .bridge{background:rgba(255,255,255,.04);border-color:var(--xs-border)}
[data-bs-theme=dark] .list-group-item{background:var(--xs-surface);border-color:var(--xs-border);color:var(--xs-text)}
[data-bs-theme=dark] .empty-state{color:var(--xs-muted)}
[data-bs-theme=dark] .empty-state .big{color:var(--xs-border-strong)}
[data-bs-theme=dark] .text-muted{color:var(--xs-muted)!important}
[data-bs-theme=dark] .text-dark{color:var(--xs-text)!important}
[data-bs-theme=dark] .text-body{color:var(--xs-text)!important}
[data-bs-theme=dark] .text-secondary{color:var(--xs-muted)!important}
[data-bs-theme=dark] .text-success{color:var(--xs-ok)!important}
[data-bs-theme=dark] .text-danger{color:var(--xs-bad)!important}
[data-bs-theme=dark] .text-warning{color:var(--xs-warn)!important}
[data-bs-theme=dark] .text-info{color:var(--xs-info)!important}
[data-bs-theme=dark] .text-primary{color:var(--xs-brand)!important}
[data-bs-theme=dark] .text-white{color:#fff!important}
[data-bs-theme=dark] small{color:var(--xs-muted)}
[data-bs-theme=dark] .small{color:var(--xs-text-3)}
[data-bs-theme=dark] .form-label{color:var(--xs-text-2)}
[data-bs-theme=dark] .form-text{color:var(--xs-muted)}
[data-bs-theme=dark] .form-check-label{color:var(--xs-text-2)}
[data-bs-theme=dark] .nav-link{color:var(--xs-text-3)}
[data-bs-theme=dark] .nav-tabs .nav-link{color:var(--xs-muted)}
[data-bs-theme=dark] .nav-tabs .nav-link:hover{color:var(--xs-text)}
[data-bs-theme=dark] .nav-tabs .nav-link.active{color:var(--xs-brand)}
[data-bs-theme=dark] .badge{color:#fff}
[data-bs-theme=dark] .progress{background:var(--xs-surface-3)}
[data-bs-theme=dark] .chip{background:var(--xs-surface-2);color:var(--xs-muted);border-color:var(--xs-border)}
[data-bs-theme=dark] .chip.active{background:var(--xs-brand);color:#fff}
[data-bs-theme=dark] .bg-light{background:var(--xs-surface-2)!important}
[data-bs-theme=dark] .bg-white{background:var(--xs-surface)!important}
[data-bs-theme=dark] .border{border-color:var(--xs-border)!important}
[data-bs-theme=dark] hr{border-color:var(--xs-border)}
[data-bs-theme=dark] .dropdown-divider{border-color:var(--xs-border)}
[data-bs-theme=dark] .text-warning{color:var(--xs-warn)!important}
[data-bs-theme=dark] .stock-pill{background:var(--xs-surface-3);color:var(--xs-text)}
[data-bs-theme=dark] .kpi{background:var(--xs-surface);border-color:var(--xs-border);color:var(--xs-text)}
[data-bs-theme=dark] .kpi .k-val{color:var(--xs-text)}
[data-bs-theme=dark] .kpi .k-label{color:var(--xs-muted)}
[data-bs-theme=dark] .kpi .k-ico{background:var(--xs-brand-soft);color:var(--xs-brand)}
[data-bs-theme=dark] .kpi.ok .k-ico{background:var(--xs-ok-soft);color:var(--xs-ok)}
[data-bs-theme=dark] .kpi.warn .k-ico{background:var(--xs-warn-soft);color:var(--xs-warn)}
[data-bs-theme=dark] .kpi.bad .k-ico{background:var(--xs-bad-soft);color:var(--xs-bad)}
[data-bs-theme=dark] .kpi.xir .k-ico{background:var(--xs-xir-soft);color:var(--xs-xir)}
[data-bs-theme=dark] .ms-card,[data-bs-theme=dark] .sms-card,[data-bs-theme=dark] .pers-card,[data-bs-theme=dark] .au-rule,[data-bs-theme=dark] .au-preset,[data-bs-theme=dark] .provider-card,[data-bs-theme=dark] .tpl-card,[data-bs-theme=dark] .co-insight,[data-bs-theme=dark] .lo-tile,[data-bs-theme=dark] .si-stat,[data-bs-theme=dark] .ms-stat,[data-bs-theme=dark] .vi-stat,[data-bs-theme=dark] .ss-stat{background:var(--xs-surface);border-color:var(--xs-border);color:var(--xs-text)}
[data-bs-theme=dark] .ss-rule,[data-bs-theme=dark] .ss-tpl,[data-bs-theme=dark] .ss-sim{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .ss-step{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06)}
[data-bs-theme=dark] .ai-feat{background:var(--xs-surface-2);border-color:var(--xs-border)}
[data-bs-theme=dark] .ai-feat b{color:var(--xs-text)}
[data-bs-theme=dark] .ai-feat small{color:var(--xs-muted)}
[data-bs-theme=dark] .tg-status{background:var(--xs-surface-2);color:var(--xs-muted)}
[data-bs-theme=dark] .tg-status.on{background:var(--xs-ok-soft);color:var(--xs-ok)}
[data-bs-theme=dark] .feed li{border-bottom-color:var(--xs-border)}
[data-bs-theme=dark] .feed .when{color:var(--xs-muted)}
[data-bs-theme=dark] .sp-node{background:var(--xs-surface-2);border-color:var(--xs-border)}
[data-bs-theme=dark] .sp-foot{background:var(--xs-surface-2)}
[data-bs-theme=dark] .sp-foot b{color:var(--xs-text)}
[data-bs-theme=dark] .filter-chips .chip{background:var(--xs-surface-2);color:var(--xs-muted)}
[data-bs-theme=dark] .disc-stat{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .disc-stat .count{color:var(--xs-text)}
[data-bs-theme=dark] .disc-stat .lbl{color:var(--xs-muted)}
[data-bs-theme=dark] .cal-day{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .cal-day-num{color:var(--xs-text)}
[data-bs-theme=dark] .cal-stat{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .cal-stat .num{color:var(--xs-brand)}
[data-bs-theme=dark] .cal-stat .lbl{color:var(--xs-muted)}
[data-bs-theme=dark] .ach-card{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .ach-card b{color:var(--xs-text)}
[data-bs-theme=dark] .ach-card small{color:var(--xs-muted)}
[data-bs-theme=dark] .task-col{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .task-item{background:var(--xs-surface-2);border-color:var(--xs-border)}
[data-bs-theme=dark] .task-item-title{color:var(--xs-text)}
[data-bs-theme=dark] .task-col-header{border-bottom-color:var(--xs-border)}
[data-bs-theme=dark] .pr-card,[data-bs-theme=dark] .pr-stat{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .pr-stat .num{color:var(--xs-text)}
[data-bs-theme=dark] .pr-stat .lbl{color:var(--xs-muted)}
[data-bs-theme=dark] .tpl-item{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .tpl-item b{color:var(--xs-text)}
[data-bs-theme=dark] .tpl-item small{color:var(--xs-muted)}
[data-bs-theme=dark] .tpl-preview{background:var(--xs-surface-2);border-color:var(--xs-border)}
[data-bs-theme=dark] .tpl-vars{background:var(--xs-surface-2);color:var(--xs-muted)}
[data-bs-theme=dark] .tpl-vars code{background:var(--xs-surface-3)}
[data-bs-theme=dark] .inv-paper{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .inv-paper-table th{background:var(--xs-brand);color:#fff}
[data-bs-theme=dark] .inv-paper-table td{border-color:var(--xs-border);color:var(--xs-text)}
[data-bs-theme=dark] .inv-paper-footer{border-top-color:var(--xs-border);color:var(--xs-muted)}
[data-bs-theme=dark] .login-preview-form{background:var(--xs-surface)}
[data-bs-theme=dark] .login-preview-form input{background:var(--xs-surface-2);border-color:var(--xs-border);color:var(--xs-text)}
[data-bs-theme=dark] .login-preview-wrap{background:var(--xs-surface-2)}
[data-bs-theme=dark] .seo-card,[data-bs-theme=dark] .sec-card,[data-bs-theme=dark] .hr-card,[data-bs-theme=dark] .hr-store,[data-bs-theme=dark] .hr-store-stat{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .seo-stat,[data-bs-theme=dark] .seo-check-item{background:var(--xs-surface-2)}
[data-bs-theme=dark] .crm-stat,[data-bs-theme=dark] .loy-stat,[data-bs-theme=dark] .game-stat{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .crm-stat .num,[data-bs-theme=dark] .loy-stat .num,[data-bs-theme=dark] .game-stat .num{color:var(--xs-text)}
[data-bs-theme=dark] .crm-stat .lbl,[data-bs-theme=dark] .loy-stat .lbl,[data-bs-theme=dark] .game-stat .lbl{color:var(--xs-muted)}
[data-bs-theme=dark] .crm-help,[data-bs-theme=dark] .loy-help{background:var(--xs-surface-2);border-color:var(--xs-border)}
[data-bs-theme=dark] .crm-help b,[data-bs-theme=dark] .loy-help b{color:var(--xs-brand)}
[data-bs-theme=dark] .crm-help ol li,[data-bs-theme=dark] .loy-help ol li{color:var(--xs-text-2)}
[data-bs-theme=dark] .aud-stat,[data-bs-theme=dark] .cal-stat,[data-bs-theme=dark] .sec-stat{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .aud-stat .num,[data-bs-theme=dark] .sec-stat .num{color:var(--xs-text)}
[data-bs-theme=dark] .aud-stat .lbl,[data-bs-theme=dark] .sec-stat .lbl{color:var(--xs-muted)}
[data-bs-theme=dark] .aud-bar-chart{background:var(--xs-surface-2)}
[data-bs-theme=dark] .rfm-segment{border-bottom-color:var(--xs-border)}
[data-bs-theme=dark] .rfm-info b{color:var(--xs-text)}
[data-bs-theme=dark] .rfm-info small{color:var(--xs-muted)}
[data-bs-theme=dark] .rfm-bar{background:var(--xs-surface-2)}
[data-bs-theme=dark] .wh-stat,[data-bs-theme=dark] .wh-item{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .wh-stat .num{color:var(--xs-text)}
[data-bs-theme=dark] .wh-stat .lbl{color:var(--xs-muted)}
[data-bs-theme=dark] .wh-item-body{background:var(--xs-surface-2);color:var(--xs-text-2)}
[data-bs-theme=dark] .wh-item-time{color:var(--xs-muted)}
[data-bs-theme=dark] .wh-item-title{color:var(--xs-text)}
[data-bs-theme=dark] .perf-card{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .perf-card .value{color:var(--xs-text)}
[data-bs-theme=dark] .perf-card .label{color:var(--xs-muted)}
[data-bs-theme=dark] .perf-table td:first-child{color:var(--xs-muted)}
[data-bs-theme=dark] .perf-table td:last-child{color:var(--xs-text)}
[data-bs-theme=dark] .widget-card{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .widget-card b{color:var(--xs-text)}
[data-bs-theme=dark] .widget-card small{color:var(--xs-muted)}
[data-bs-theme=dark] .theme-card{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .theme-card .tp-bar{opacity:.8}
[data-bs-theme=dark] .theme-card .tp-row{background:var(--xs-border)}
[data-bs-theme=dark] .theme-card small{color:var(--xs-muted)}
[data-bs-theme=dark] .xs-sb-search-input{background:var(--xs-surface-2);border-color:var(--xs-border);color:var(--xs-text)}
[data-bs-theme=dark] .xs-sb-search-input::placeholder{color:var(--xs-muted)}
[data-bs-theme=dark] .xs-sb-search-input:focus{background:var(--xs-surface);border-color:var(--xs-brand)}
[data-bs-theme=dark] .xs-pinned-section{border-bottom-color:var(--xs-border)}
[data-bs-theme=dark] .xs-pinned-header{color:var(--xs-muted)}
[data-bs-theme=dark] .xs-pinned-link{color:var(--xs-text-2)}
[data-bs-theme=dark] .xs-pinned-link:hover{background:var(--xs-brand-soft);color:var(--xs-brand)}
[data-bs-theme=dark] .xs-ai-chat{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .xs-ai-header{background:linear-gradient(135deg,#4f46e5,#06b6d4)}
[data-bs-theme=dark] .xs-ai-messages{background:var(--xs-surface)}
[data-bs-theme=dark] .xs-ai-msg.bot{background:var(--xs-surface-2);color:var(--xs-text)}
[data-bs-theme=dark] .xs-ai-msg.user{background:var(--xs-brand);color:#fff}
[data-bs-theme=dark] .xs-ai-input input{background:var(--xs-surface-2);border-color:var(--xs-border);color:var(--xs-text)}
[data-bs-theme=dark] .xs-bulk-bar{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .xs-context-menu{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .xs-context-menu a,[data-bs-theme=dark] .xs-context-menu button{color:var(--xs-text-2)}
[data-bs-theme=dark] .xs-session-warn{background:var(--xs-surface);border-color:var(--xs-warn)}
[data-bs-theme=dark] .xs-push-banner,[data-bs-theme=dark] .xs-install-banner{background:var(--xs-surface);border-color:var(--xs-border)}
[data-bs-theme=dark] .xs-push-banner b,[data-bs-theme=dark] .xs-install-banner b{color:var(--xs-text)}
[data-bs-theme=dark] .xs-push-banner small,[data-bs-theme=dark] .xs-install-banner small{color:var(--xs-muted)}
[data-bs-theme=dark] .xs-revenue-badge{background:var(--xs-ok-soft);color:var(--xs-ok)}
[data-bs-theme=dark] .xs-cmd-item{color:var(--xs-text-2)}
[data-bs-theme=dark] .xs-cmd-item:hover,[data-bs-theme=dark] .xs-cmd-item.active{background:var(--xs-brand-soft)}
[data-bs-theme=dark] .xs-tooltip{background:var(--xs-text);color:var(--xs-bg)}
[data-bs-theme=dark] .xs-skeleton{background:linear-gradient(90deg,var(--xs-surface-3) 25%,var(--xs-surface-hover) 50%,var(--xs-surface-3) 75%);background-size:200% 100%}

/* ============================================================
   2. Body
   ============================================================ */
*{box-sizing:border-box}

body{
  background:var(--xs-bg);
  color:var(--xs-text);
  font-family:var(--bs-body-font-family);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  line-height:1.6;
  font-size:.9rem;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.chip){
  color:var(--xs-brand);
  text-decoration:none;
  transition:color .15s;
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.chip):hover{
  color:var(--xs-primary-hover);
  text-decoration:underline;
}

/* ============================================================
   3. Shell
   ============================================================ */
.shell{display:flex;min-height:100vh}

/* ============================================================
   4. Sidebar — تمیز، روشن، خوانا
   ============================================================ */
.sidebar{
  width:var(--xs-sb-w);
  background:#ffffff;
  border-inline-start:1px solid var(--xs-border);
  position:fixed;
  top:0;bottom:0;inset-inline-start:0;
  display:flex;
  flex-direction:column;
  z-index:1050;
  transition:transform .25s var(--xs-ease),width .25s var(--xs-ease);
}
html[data-sb=mini] .sidebar{width:var(--xs-sb-mini)}

/* Brand */
.sidebar .brand{
  display:flex;align-items:center;gap:.6rem;
  padding:.5rem .6rem;
  border-radius:var(--xs-r);
  background:var(--xs-brand-soft);
  border:1px solid #e0e7ff;
  text-decoration:none;
  transition:all .15s;
  flex:1;
  min-width:0;
}
.sidebar .brand:hover{background:#e0e7ff}
.brand-mark{
  width:32px;height:32px;border-radius:8px;
  background:var(--xs-brand);
  display:grid;place-items:center;
  flex-shrink:0;
}
.brand-mark i{
  display:block;width:13px;height:2px;border-radius:2px;
  background:#fff;margin:2px auto;
}
.brand-mark i:first-child{width:17px}
.brand-mark i:last-child{width:9px}
.sidebar .brand span{
  color:var(--xs-text);font-weight:700;font-size:.875rem;
  display:block;line-height:1.3;
}
.sidebar .brand small{
  color:var(--xs-brand);font-size:.6875rem;font-weight:600;
  display:block;margin-top:.05rem;
}
html[data-sb=mini] .brand span,html[data-sb=mini] .brand small{display:none}

/* Sidebar header */
.sb-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.5rem .5rem .5rem .6rem;
  margin:.4rem .4rem 0;
  gap:.5rem;
}

/* Sidebar toggle */
.sb-toggle{
  width:34px;height:34px;
  border-radius:.45rem;
  background:var(--xs-surface-2);
  border:1px solid var(--xs-border);
  color:var(--xs-muted);
  cursor:pointer;
  display:grid;place-items:center;
  transition:all .15s;
  flex-shrink:0;
  font-size:1.1rem;
}
.sb-toggle:hover{background:var(--xs-brand-soft);color:var(--xs-brand);border-color:var(--xs-brand)}
[data-bs-theme=dark] .sb-toggle{background:rgba(255,255,255,.04);border-color:var(--xs-border);color:var(--xs-text-3)}
[data-bs-theme=dark] .sb-toggle:hover{background:var(--xs-brand-soft);color:var(--xs-brand)}

/* Sidebar scroll */
.sb-scroll{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:.4rem .5rem 1rem;
  overscroll-behavior:contain;
}
.sb-scroll::-webkit-scrollbar{width:5px}
.sb-scroll::-webkit-scrollbar-track{background:transparent}
.sb-scroll::-webkit-scrollbar-thumb{background:var(--xs-border);border-radius:3px}
.sb-scroll::-webkit-scrollbar-thumb:hover{background:var(--xs-border-strong)}

/* ============================================================
   5. آکاردئون سایدبار — خفن و منظم
   ============================================================ */
.nav-accordion{
  margin-bottom:.15rem;
  border-radius:.5rem;
  overflow:hidden;
  transition:background .15s;
}
.nav-accordion:hover{background:rgba(0,0,0,.02)}
.nav-group-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:.6rem .7rem;
  background:transparent;border:0;
  color:var(--xs-muted);
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:all .15s;
  border-radius:.4rem;
  position:relative;
}
.nav-group-toggle:hover{color:var(--xs-text);background:var(--xs-surface-2)}
.nav-group-toggle .chev{
  transition:transform .25s var(--xs-ease);
  font-size:.65rem;opacity:.5;
}
.nav-accordion.open .nav-group-toggle .chev{transform:rotate(180deg);opacity:1}
.nav-accordion.open .nav-group-toggle{
  color:var(--xs-brand);
  background:linear-gradient(90deg,var(--xs-brand-soft),transparent);
}
.nav-accordion.open .nav-group-toggle::before{
  content:'';position:absolute;inset-inline-start:0;top:25%;bottom:25%;width:2px;
  background:var(--xs-brand);border-radius:0 2px 2px 0;
}

.nav-collapse{
  max-height:0;overflow:hidden;
  transition:max-height .3s var(--xs-ease);
  padding:0 .3rem;
}
.nav-accordion.open .nav-collapse{
  max-height:2000px;
  padding:.15rem .3rem .35rem;
}

/* Nav links — مدرن، خوانا */
.sidebar .nav{gap:1px}
.sidebar .nav-link{
  position:relative;display:flex;align-items:center;gap:.6rem;
  padding:.5rem .65rem;border-radius:.4rem;
  color:var(--xs-text-2);font-size:.8rem;font-weight:500;
  white-space:nowrap;transition:all .15s;
  text-decoration:none;
  margin-bottom:1px;
}
.sidebar .nav-link i{
  font-size:.92rem;width:1.1rem;text-align:center;
  color:var(--xs-muted);transition:all .15s;
  flex-shrink:0;
}
.sidebar .nav-link:hover{
  background:var(--xs-surface-2);
  color:var(--xs-text);
  transform:translateX(-2px);
}
.sidebar .nav-link:hover i{color:var(--xs-text-3)}
.sidebar .nav-link.active{
  background:var(--xs-brand-soft);
  color:var(--xs-brand);
  font-weight:600;
}
.sidebar .nav-link.active i{color:var(--xs-brand)}
.sidebar .nav-link.active::before{
  content:'';position:absolute;inset-inline-start:-.5rem;top:25%;bottom:25%;width:2.5px;
  background:var(--xs-brand);
  border-radius:0 2px 2px 0;
  box-shadow:0 0 6px var(--xs-brand-glow);
}
.nav-link .nav-count{
  margin-inline-start:auto;font-size:.65rem;font-weight:700;
  border-radius:99px;padding:.05rem .35rem;
  background:var(--xs-bad-soft);color:var(--xs-bad);
}

/* Sidebar footer */
.sidebar-foot{padding:.5rem;border-top:1px solid var(--xs-border)}
.sf-user{
  display:flex;align-items:center;gap:.5rem;
  padding:.4rem .5rem;border-radius:.375rem;
  color:var(--xs-text-2);text-decoration:none;
  transition:all .15s;
}
.sf-user:hover{background:var(--xs-surface-2);color:var(--xs-text)}
.sf-user .avatar{width:30px;height:30px;background:var(--xs-brand);color:#fff}
.sf-user .who b{display:block;font-size:.75rem;color:var(--xs-text);font-weight:600}
.sf-user .who small{font-size:.65rem;color:var(--xs-muted)}
.sidebar-foot form{margin:0}
.sidebar-foot .btn{
  width:100%;justify-content:flex-start;gap:.5rem;
  padding:.4rem .55rem;border-radius:.375rem;
  background:transparent;border:0;color:var(--xs-muted);
  font-size:.75rem;font-weight:500;
}
.sidebar-foot .btn:hover{background:var(--xs-bad-soft);color:var(--xs-bad)}
.sidebar-foot .btn i{font-size:.85rem}

/* ============================================================
   6. Content area
   ============================================================ */
.content{
  margin-inline-start:var(--xs-sb-w);
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  min-height:100vh;
}
html[data-sb=mini] .content{margin-inline-start:var(--xs-sb-mini)}

/* ============================================================
   7. Topbar
   ============================================================ */
.topbar{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--xs-border);
  position:sticky;top:0;z-index:1000;
  height:var(--xs-top-h);
  display:flex;align-items:center;
  padding:0 1.25rem;gap:.75rem;
}
.tb-title{flex:1;min-width:0}
.tb-title h1{
  font-size:.9375rem;font-weight:700;letter-spacing:-.01em;
  color:var(--xs-text);margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-crumb{
  font-size:.65rem;color:var(--xs-brand);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:.05rem;
}
.tb-actions{display:flex;align-items:center;gap:.4rem}

/* Bridge */
.bridge{
  display:flex;align-items:center;gap:.4rem;
  padding:.25rem .5rem;border-radius:.375rem;
  background:var(--xs-surface-2);
  border:1px solid var(--xs-border);
}
.site{
  padding:.18rem .4rem;border-radius:.25rem;
  font-weight:700;font-size:.65rem;
  transition:all .15s;text-decoration:none;
  display:inline-flex;align-items:center;gap:.15rem;
}
.site.xcom{background:var(--xs-brand-soft);color:var(--xs-brand)}
.site.xir{background:var(--xs-xir-soft);color:var(--xs-xir)}
.site.off{background:var(--xs-surface-3);color:var(--xs-muted)}
.bridge-meta{font-size:.65rem;color:var(--xs-muted)}
.arrows{font-size:.65rem;color:var(--xs-muted)}

/* Search */
.tb-search{
  display:flex;align-items:center;gap:.45rem;
  padding:.35rem .6rem;
  background:var(--xs-surface-2);
  border:1px solid var(--xs-border);
  border-radius:.375rem;
  color:var(--xs-muted);font-size:.75rem;
  cursor:pointer;transition:all .15s;
}
.tb-search:hover{border-color:var(--xs-border-strong);color:var(--xs-text)}
.tb-search kbd{
  background:#fff;border:1px solid var(--xs-border);
  border-radius:.2rem;padding:.05rem .25rem;font-size:.6rem;
}

/* Icon button */
.icon-btn{
  width:34px;height:34px;border-radius:.375rem;
  border:1px solid var(--xs-border);
  background:#fff;
  display:grid;place-items:center;
  cursor:pointer;transition:all .15s;
  color:var(--xs-text-3);
  position:relative;
}
.icon-btn:hover{background:var(--xs-surface-2);color:var(--xs-text);border-color:var(--xs-border-strong)}

/* User chip */
.user-chip{
  display:flex;align-items:center;gap:.4rem;
  padding:.2rem .45rem .2rem .2rem;
  border-radius:99px;
  border:1px solid var(--xs-border);
  background:#fff;
  cursor:pointer;transition:all .15s;
}
.user-chip:hover{background:var(--xs-surface-2)}
.avatar{
  width:28px;height:28px;border-radius:50%;
  background:var(--xs-brand);
  color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:.7rem;
  flex-shrink:0;
}
.u-name{font-size:.75rem;color:var(--xs-text);font-weight:600}

/* Notification badge */
#notifBadge{
  background:var(--xs-bad);
  min-width:16px;height:16px;font-size:.6rem;
  display:grid;place-items:center;
  top:-3px !important;inset-inline-start:-3px !important;
}

/* ============================================================
   8. Page
   ============================================================ */
.page{flex:1;padding:1.25rem;max-width:1500px;width:100%;margin:0 auto}

/* ============================================================
   9. Hero
   ============================================================ */
.hero,.ss-hero,.set-hero,.ab-hero{
  background:#fff;
  color:var(--xs-text);
  border-radius:var(--xs-r-lg);
  padding:1.25rem 1.5rem;
  position:relative;overflow:hidden;
  border:1px solid var(--xs-border);
  box-shadow:var(--xs-shadow);
  margin-bottom:1rem;
}
.hero h2,.ss-hero h1,.set-hero h1,.ab-hero h1{
  color:var(--xs-text);font-weight:700;letter-spacing:-.02em;
  font-size:1.25rem;margin-bottom:.35rem;
}
.hero p,.ss-hero p,.set-hero p{color:var(--xs-text-3);margin-bottom:0}
.hero .muted,.ss-hero .muted,.set-hero .muted{color:var(--xs-muted)}
.hero .btn-light-glass{
  background:#fff;border:1px solid var(--xs-border);
  color:var(--xs-text);font-weight:600;
  padding:.4rem .85rem;border-radius:.375rem;transition:all .15s;
}
.hero .btn-light-glass:hover{background:var(--xs-surface-2);border-color:var(--xs-border-strong)}
.hero .btn-solid{
  background:var(--xs-brand);color:#fff;font-weight:600;border:0;
  padding:.4rem .85rem;border-radius:.375rem;
}
.hero .btn-solid:hover{background:var(--xs-primary-hover)}

/* ============================================================
   10. Cards — تمیز، بدون افکت اضافه
   ============================================================ */
.card{
  background:#fff;
  border:1px solid var(--xs-border);
  border-radius:var(--xs-r-lg);
  color:var(--xs-text);
  box-shadow:var(--xs-shadow-sm);
  transition:box-shadow .15s,border-color .15s;
}
.card:hover{box-shadow:var(--xs-shadow);border-color:var(--xs-border-hover)}
.card-header{
  background:#fff;
  border-bottom:1px solid var(--xs-border);
  color:var(--xs-text);font-weight:700;
  padding:.75rem 1rem;font-size:.875rem;
  display:flex;align-items:center;justify-content:space-between;
}
.card-body{padding:1rem;color:var(--xs-text)}

/* ============================================================
   11. KPI — خوانا
   ============================================================ */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem}
.kpi{
  background:#fff;
  border:1px solid var(--xs-border);
  border-radius:var(--xs-r-lg);
  padding:1rem 1.1rem;
  position:relative;overflow:hidden;
  transition:box-shadow .15s,border-color .15s;
  color:var(--xs-text);
}
.kpi:hover{box-shadow:var(--xs-shadow);border-color:var(--xs-border-hover)}
.kpi .k-val{
  font-size:1.5rem;font-weight:800;letter-spacing:-.02em;
  line-height:1.2;color:var(--xs-text);
  margin:.35rem 0 .15rem;
}
.kpi .k-label{font-size:.75rem;color:var(--xs-muted);font-weight:600}
.kpi .k-top{display:flex;align-items:center;gap:.55rem}
.kpi .k-ico{
  width:34px;height:34px;border-radius:.5rem;
  display:grid;place-items:center;
  background:var(--xs-brand-soft);color:var(--xs-brand);
  font-size:.95rem;flex-shrink:0;
}
.kpi.bad .k-ico{background:var(--xs-bad-soft);color:var(--xs-bad)}
.kpi.warn .k-ico{background:var(--xs-warn-soft);color:var(--xs-warn)}
.kpi.ok .k-ico{background:var(--xs-ok-soft);color:var(--xs-ok)}
.kpi.xir .k-ico{background:var(--xs-xir-soft);color:var(--xs-xir)}
.kpi .k-foot{margin-top:.35rem}
.kpi .k-foot a{font-size:.7rem;color:var(--xs-brand);text-decoration:none}
.kpi .k-foot a:hover{text-decoration:underline}

/* ============================================================
   12. Buttons — ساده، خوانا
   ============================================================ */
.btn-primary{
  background:var(--xs-brand);
  border:1px solid var(--xs-brand);
  color:#fff;font-weight:600;font-size:.8125rem;
  padding:.4rem .9rem;border-radius:.375rem;
  transition:all .15s;cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem;
}
.btn-primary:hover{background:var(--xs-primary-hover);border-color:var(--xs-primary-hover);color:#fff}

.btn-outline-primary{
  background:#fff;
  border:1px solid var(--xs-border-strong);
  color:var(--xs-text-2);font-weight:600;
  border-radius:.375rem;padding:.4rem .85rem;
  transition:all .15s;
}
.btn-outline-primary:hover{
  background:var(--xs-brand);border-color:var(--xs-brand);color:#fff;
}

.btn-outline-secondary{
  background:#fff;
  border:1px solid var(--xs-border);
  color:var(--xs-text-2);font-weight:600;
  border-radius:.375rem;padding:.4rem .85rem;
  transition:all .15s;
}
.btn-outline-secondary:hover{background:var(--xs-surface-2);color:var(--xs-text);border-color:var(--xs-border-strong)}

.btn-danger{background:var(--xs-bad);border:1px solid var(--xs-bad);color:#fff;font-weight:600;border-radius:.375rem;padding:.4rem .85rem}
.btn-danger:hover{background:#b91c1c;border-color:#b91c1c;color:#fff}
.btn-success{background:var(--xs-ok);border:1px solid var(--xs-ok);color:#fff;font-weight:600;border-radius:.375rem;padding:.4rem .85rem}
.btn-info{background:var(--xs-info);border:1px solid var(--xs-info);color:#fff;font-weight:600;border-radius:.375rem;padding:.4rem .85rem}
.btn-warning{background:var(--xs-warn);border:1px solid var(--xs-warn);color:#fff;font-weight:600;border-radius:.375rem;padding:.4rem .85rem}
.btn-light{background:#fff;border:1px solid var(--xs-border);color:var(--xs-text);font-weight:600;border-radius:.375rem;padding:.4rem .85rem}
.btn-light:hover{background:var(--xs-surface-2);color:var(--xs-text)}

.btn-sm{padding:.3rem .6rem;font-size:.7rem;border-radius:.3rem}
.btn-group-sm>.btn{border-radius:.3rem}

/* ============================================================
   13. Form controls — خوانا
   ============================================================ */
.form-control,.form-select{
  background:#fff;
  border:1px solid var(--xs-border-strong);
  border-radius:.375rem;
  padding:.4rem .7rem;
  font-size:.85rem;
  color:var(--xs-text);
  transition:all .15s;
}
.form-control:focus,.form-select:focus{
  background:#fff;
  border-color:var(--xs-brand);
  box-shadow:0 0 0 3px var(--xs-brand-glow);
  color:var(--xs-text);
  outline:0;
}
.form-control::placeholder{color:var(--xs-muted);opacity:.7}
.form-label{font-size:.78rem;font-weight:600;color:var(--xs-text-2);margin-bottom:.3rem}
.form-text{color:var(--xs-muted);font-size:.72rem}
.form-check-input{background-color:#fff;border-color:var(--xs-border-strong)}
.form-check-input:checked{background-color:var(--xs-brand);border-color:var(--xs-brand)}
.form-check-input:focus{border-color:var(--xs-brand);box-shadow:0 0 0 3px var(--xs-brand-glow)}
.form-switch .form-check-input{width:2.2em;height:1.25em;background-color:var(--xs-border-strong)}
.form-switch .form-check-input:checked{background-color:var(--xs-brand)}
.form-check-label{color:var(--xs-text-2);font-size:.8125rem}

/* ============================================================
   14. Tabs — همه بسته پیش‌فرض
   ============================================================ */
.nav-tabs{
  gap:.2rem;
  border-bottom:1px solid var(--xs-border);
  flex-wrap:wrap;
  padding-bottom:0;
  margin-bottom:1rem;
  display:flex;
}
.nav-tabs .nav-item{margin-bottom:-1px}
.nav-tabs .nav-link{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .85rem;
  border:0 !important;
  border-bottom:2px solid transparent !important;
  border-radius:.375rem .375rem 0 0;
  font-size:.8125rem;font-weight:600;
  color:var(--xs-muted);
  background:transparent !important;
  transition:all .15s;
  position:relative;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
}
.nav-tabs .nav-link i{font-size:.9rem;transition:transform .15s}
.nav-tabs .nav-link:hover{color:var(--xs-text);background:var(--xs-surface-2) !important}
.nav-tabs .nav-link:hover i{transform:scale(1.05)}
.nav-tabs .nav-link.active{
  color:var(--xs-brand) !important;
  border-bottom-color:var(--xs-brand) !important;
  background:#fff !important;
  font-weight:700;
}
.nav-tabs .nav-link.active i{color:var(--xs-brand)}

/* Tab content */
.tab-content{position:relative}
.tab-pane{display:none;padding:0}
.tab-pane.active{display:block;opacity:1}
.tab-pane.fade{transition:opacity .2s}
.tab-pane.fade.active{opacity:1}

/* ============================================================
   15. Set-card
   ============================================================ */
.set-card{
  border:1px solid var(--xs-border);
  border-radius:var(--xs-r-lg);
  background:#fff;
  padding:1.15rem;
  margin-bottom:.85rem;
  box-shadow:var(--xs-shadow-sm);
  transition:box-shadow .15s;
  color:var(--xs-text);
}
.set-card:hover{box-shadow:var(--xs-shadow)}
.set-card h3{
  font-size:.9375rem;font-weight:700;
  margin-bottom:.85rem;color:var(--xs-text);
  display:flex;align-items:center;gap:.5rem;
}
.set-card h3 i{color:var(--xs-brand)}

/* ============================================================
   16. Sync panel
   ============================================================ */
.sync-panel{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:.85rem;padding:1.2rem;align-items:center}
.sp-node{
  text-align:center;padding:1rem;
  border-radius:var(--xs-r-lg);
  background:var(--xs-surface-2);
  border:1px solid var(--xs-border);
  transition:all .2s;
}
.sp-node.xcom{border-color:#c7d2fe}
.sp-node.xir{border-color:#fed7aa}
.sp-node.off{opacity:.6}
.sp-node:hover{box-shadow:var(--xs-shadow)}
.sp-node .site{display:inline-block;padding:.2rem .55rem;border-radius:.25rem;font-weight:700;font-size:.7rem;margin-bottom:.4rem}
.sp-node .site.xcom{background:var(--xs-brand-soft);color:var(--xs-brand)}
.sp-node .site.xir{background:var(--xs-xir-soft);color:var(--xs-xir)}
.sp-node .role{font-size:.72rem;color:var(--xs-muted);margin-bottom:.35rem}
.sp-node .count{font-size:1.75rem;font-weight:800;color:var(--xs-text)}
.sp-node .count small{display:block;font-size:.68rem;color:var(--xs-muted);font-weight:500;margin-top:.1rem}
.sp-lane{text-align:center;padding:.8rem;border-radius:var(--xs-r-lg);background:var(--xs-surface-2);border:1px solid var(--xs-border);position:relative}
.sp-lane.live{background:var(--xs-ok-soft);border-color:#a7f3d0}
.sp-lane .rail{height:2px;background:var(--xs-border);border-radius:2px;margin:.35rem 0}
.sp-lane.live .rail{background:var(--xs-ok)}
.sp-lane b{color:var(--xs-text);font-size:1.05rem}
.sp-lane .warn{color:var(--xs-warn);font-size:.7rem;margin-top:.2rem}
.sp-foot{display:flex;justify-content:space-around;padding:.8rem;background:var(--xs-surface-2);border-radius:var(--xs-r);margin-top:.35rem;border:1px solid var(--xs-border)}
.sp-foot span{font-size:.72rem;color:var(--xs-muted)}
.sp-foot b{display:block;font-size:.9rem;color:var(--xs-text);font-weight:700;margin-top:.05rem}

/* ============================================================
   17. Filter chips
   ============================================================ */
.filter-chips{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.5rem}
.chip{
  padding:.28rem .6rem;border-radius:99px;
  font-size:.7rem;font-weight:600;
  color:var(--xs-muted);
  background:#fff;
  border:1px solid var(--xs-border);
  text-decoration:none;cursor:pointer;
  transition:all .15s;
}
.chip:hover{background:var(--xs-surface-2);color:var(--xs-text);border-color:var(--xs-border-strong)}
.chip.active{background:var(--xs-brand);color:#fff;border-color:var(--xs-brand)}

/* ============================================================
   18. Badge
   ============================================================ */
.badge{font-weight:600;font-size:.65rem;padding:.22em .5em;border-radius:.3rem}
.text-bg-success{background:var(--xs-ok) !important;color:#fff !important}
.text-bg-danger{background:var(--xs-bad) !important;color:#fff !important}
.text-bg-warning{background:var(--xs-warn) !important;color:#fff !important}
.text-bg-info{background:var(--xs-info) !important;color:#fff !important}
.text-bg-primary{background:var(--xs-brand) !important;color:#fff !important}
.text-bg-secondary{background:var(--xs-surface-3) !important;color:var(--xs-text) !important}
.text-bg-light{background:var(--xs-surface-2) !important;color:var(--xs-text) !important}
.rounded-pill{border-radius:99px !important}

/* ============================================================
   19. Alert
   ============================================================ */
.alert{border-radius:.5rem;border:1px solid transparent;padding:.7rem .95rem;font-size:.8125rem;color:var(--xs-text)}
.alert-info{background:var(--xs-info-soft);border-color:#a5f3fc;color:#0e7490}
.alert-success{background:var(--xs-ok-soft);border-color:#a7f3d0;color:#065f46}
.alert-warning{background:var(--xs-warn-soft);border-color:#fde68a;color:#92400e}
.alert-danger{background:var(--xs-bad-soft);border-color:#fecaca;color:#991b1b}

/* ============================================================
   20. Progress
   ============================================================ */
.progress{height:.4rem;border-radius:1rem;background:var(--xs-surface-3);overflow:hidden}
.progress-bar{background:var(--xs-brand);border-radius:1rem;transition:width .5s var(--xs-ease)}

/* ============================================================
   21. Table — خوانا
   ============================================================ */
.table{font-size:.8125rem;margin-bottom:0;color:var(--xs-text)}
.table thead th{
  background:var(--xs-surface-2);
  font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--xs-muted);
  border-bottom:1px solid var(--xs-border);
  padding:.55rem .75rem;
  position:sticky;top:0;z-index:5;
}
.table tbody td{
  padding:.55rem .75rem;
  border-bottom:1px solid var(--xs-border);
  vertical-align:middle;color:var(--xs-text);
}
.table tbody tr{transition:background .1s}
.table tbody tr:hover{background:var(--xs-surface-2)}
.table a{color:var(--xs-brand)}
.table-responsive{border-radius:.5rem;overflow:hidden}

/* ============================================================
   22. Dropdown
   ============================================================ */
.dropdown-menu{
  background:#fff;border:1px solid var(--xs-border);
  border-radius:.5rem;box-shadow:var(--xs-shadow-lg);
  padding:.3rem;
}
.dropdown-item{border-radius:.3rem;padding:.4rem .6rem;font-size:.8125rem;color:var(--xs-text-2);transition:all .1s}
.dropdown-item:hover{background:var(--xs-brand-soft);color:var(--xs-brand)}
.dropdown-divider{border-color:var(--xs-border)}
.dropdown-header{color:var(--xs-muted);font-size:.65rem;font-weight:700;text-transform:uppercase}

/* ============================================================
   23. Empty state
   ============================================================ */
.empty-state{text-align:center;padding:2.5rem 1rem;color:var(--xs-muted)}
.empty-state .big{font-size:2.5rem;color:var(--xs-border-strong);margin-bottom:.75rem;display:inline-block}
.empty-state h2{font-size:1rem;font-weight:700;color:var(--xs-text);margin-bottom:.35rem}
.empty-state p{font-size:.8125rem}

/* ============================================================
   24. List group
   ============================================================ */
.list-group-item{background:#fff;border:1px solid var(--xs-border);color:var(--xs-text);padding:.6rem .85rem}
.list-group-item-action:hover{background:var(--xs-surface-2);color:var(--xs-text)}
.list-group-flush>.list-group-item{border-bottom:1px solid var(--xs-border)}

/* ============================================================
   25. Toast
   ============================================================ */
.toast-container{position:fixed !important;z-index:9999}
.toast{background:#fff;border:1px solid var(--xs-border);border-radius:.5rem;box-shadow:var(--xs-shadow-lg);color:var(--xs-text)}
.toast-body{color:var(--xs-text)}
.toast-header{background:#fff;border-bottom:1px solid var(--xs-border);color:var(--xs-text)}

/* ============================================================
   26. Misc utilities
   ============================================================ */
.text-muted{color:var(--xs-muted) !important}
.text-success{color:var(--xs-ok) !important}
.text-danger{color:var(--xs-bad) !important}
.text-warning{color:var(--xs-warn) !important}
.text-info{color:var(--xs-info) !important}
.text-primary{color:var(--xs-brand) !important}
.text-secondary{color:var(--xs-muted) !important}
.text-light{color:var(--xs-text) !important}
.text-dark{color:var(--xs-text) !important}
.text-white{color:#fff !important}

.bg-light{background:var(--xs-surface-2) !important}
.bg-dark{background:var(--xs-text) !important;color:#fff !important}
.bg-primary{background:var(--xs-brand) !important;color:#fff !important}
.bg-success{background:var(--xs-ok) !important;color:#fff !important}
.bg-danger{background:var(--xs-bad) !important;color:#fff !important}
.bg-warning{background:var(--xs-warn) !important;color:#fff !important}

.border{border:1px solid var(--xs-border) !important}
.border-top{border-top:1px solid var(--xs-border) !important}
.border-bottom{border-bottom:1px solid var(--xs-border) !important}
.border-start{border-inline-start:1px solid var(--xs-border) !important}
.border-end{border-inline-end:1px solid var(--xs-border) !important}
.border-0{border:0 !important}

hr,.dropdown-divider{border-color:var(--xs-border);opacity:1}

pre{background:var(--xs-surface-2) !important;color:var(--xs-text-2);border:1px solid var(--xs-border);border-radius:.375rem;padding:.55rem .75rem;font-size:.78rem}
code{color:var(--xs-brand);background:var(--xs-brand-soft);padding:.1rem .25rem;border-radius:.25rem;font-size:.82em}

/* Modal */
.modal-content{background:#fff;border:1px solid var(--xs-border);border-radius:.5rem;color:var(--xs-text)}
.modal-header{border-bottom:1px solid var(--xs-border)}
.modal-footer{border-top:1px solid var(--xs-border)}
.modal-title{color:var(--xs-text)}

/* ============================================================
   27. Mobile nav
   ============================================================ */
.mobile-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;
  display:none;background:#fff;
  border-top:1px solid var(--xs-border);
  padding:.3rem;justify-content:space-around;
  box-shadow:0 -2px 8px rgba(15,23,42,.04);
}
@media(max-width:991px){
  .mobile-nav{display:flex}
  .sidebar{transform:translateX(100%)}
  .sidebar.show{transform:translateX(0)}
  .content{margin-inline-start:0}
}
.mobile-nav .nav-item{
  display:flex;flex-direction:column;align-items:center;gap:.08rem;
  padding:.3rem .5rem;border-radius:.3rem;
  color:var(--xs-muted);font-size:.62rem;text-decoration:none;
  transition:all .15s;
}
.mobile-nav .nav-item.active{color:var(--xs-brand)}
.mobile-nav .nav-item i{font-size:.95rem}

/* ============================================================
   28. Mini sidebar
   ============================================================ */
html[data-sb=mini] .nav-accordion{padding:0}
html[data-sb=mini] .nav-group-toggle{padding:.5rem 0;justify-content:center;font-size:0}
html[data-sb=mini] .nav-group-toggle .chev{display:none}
html[data-sb=mini] .nav-collapse{display:none}
html[data-sb=mini] .nav-accordion.open .nav-collapse{
  display:block;position:absolute;inset-inline-end:0;top:100%;
  background:#fff;box-shadow:var(--xs-shadow-lg);
  border-radius:.375rem;min-width:200px;z-index:100;padding:.3rem;
  border:1px solid var(--xs-border);
}
html[data-sb=mini] .sidebar .nav-link{justify-content:center;padding:.5rem 0}
html[data-sb=mini] .sidebar .nav-link span{display:none}

/* ============================================================
   29. Mobile responsive
   ============================================================ */
@media(max-width:768px){
  .sync-panel{grid-template-columns:1fr;gap:.4rem}
  .sp-lane{display:none}
  .sp-foot{flex-direction:column;gap:.35rem}
  .page{padding:1rem .85rem 4rem}
  .hero,.ss-hero,.set-hero{padding:1.1rem 1rem}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .nav-tabs{overflow-x:auto;flex-wrap:nowrap}
  .nav-tabs .nav-link{white-space:nowrap}
  .topbar{padding:0 .85rem;gap:.4rem}
  .bridge{display:none !important}
  .tb-search span{display:none}
  .u-name{display:none}
}

/* ============================================================
   30. Scrollbar
   ============================================================ */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--xs-border-strong);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--xs-muted)}
::selection{background:var(--xs-brand-soft);color:var(--xs-text)}
*:focus-visible{outline:2px solid var(--xs-brand);outline-offset:2px}

/* ============================================================
   31. Sidebar backdrop
   ============================================================ */
.sidebar-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.3);backdrop-filter:blur(2px);z-index:1040;display:none}
.sidebar-backdrop.show{display:block}
@media(min-width:992px){.sidebar-backdrop{display:none !important}}

/* ============================================================
   32. Custom card styles
   ============================================================ */
.ss-stat,.ms-stat,.vi-stat,.sms-card,.pers-card,.au-rule,.au-preset,.provider-card,.tpl-card,.co-insight,.lo-tile{
  background:#fff;border:1px solid var(--xs-border);border-radius:var(--xs-r-lg);
  padding:1rem 1.05rem;color:var(--xs-text);transition:box-shadow .15s;
}
.ss-stat:hover,.ms-stat:hover,.vi-stat:hover{box-shadow:var(--xs-shadow)}
.ss-stat .num,.ms-stat .num,.vi-stat .num{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--xs-text)}
.ss-stat .lbl,.ms-stat .lbl,.vi-stat .lbl{font-size:.72rem;color:var(--xs-muted);font-weight:600}

.ss-rule{background:#fff;border:1px solid var(--xs-border);border-radius:var(--xs-r-lg);padding:.8rem .95rem;transition:box-shadow .15s}
.ss-rule:hover{box-shadow:var(--xs-shadow)}
.ss-rule.off{opacity:.6}
.ss-rule .pct{font-size:1.3rem;font-weight:800;color:var(--xs-brand)}

.ss-tpl{border:1px dashed var(--xs-border);border-radius:.5rem;padding:.7rem .8rem;cursor:pointer;background:#fff;transition:all .15s}
.ss-tpl:hover{border-color:var(--xs-brand);background:var(--xs-brand-soft)}
.ss-sim{background:var(--xs-surface-2);border-radius:.5rem;padding:.8rem;border:1px solid var(--xs-border)}

.ai-feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.6rem;margin-top:.8rem}
.ai-feat{padding:.7rem .8rem;border:1px solid var(--xs-border);border-radius:.5rem;background:#fff;transition:all .15s}
.ai-feat:hover{border-color:var(--xs-border-strong);box-shadow:var(--xs-shadow-sm)}
.ai-feat i{font-size:1.05rem;color:var(--xs-brand)}
.ai-feat b{display:block;margin-top:.25rem;font-size:.8125rem;color:var(--xs-text)}
.ai-feat small{display:block;color:var(--xs-muted);font-size:.7rem;margin-top:.05rem}

.tg-status{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .65rem;border-radius:99px;font-size:.76rem;font-weight:600}
.tg-status.on{background:var(--xs-ok-soft);color:var(--xs-ok)}
.tg-status.off{background:var(--xs-surface-2);color:var(--xs-muted)}

.ss-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.8rem;position:relative;z-index:1}
.ss-step{background:var(--xs-surface-2);border:1px solid var(--xs-border);border-radius:.5rem;padding:.65rem .8rem}
.ss-step b{display:block;margin-bottom:.15rem;font-size:.78rem;color:var(--xs-text)}
.ss-step small{color:var(--xs-muted);font-size:.68rem}
@media(max-width:768px){.ss-steps{grid-template-columns:1fr}}

.feed{list-style:none;padding:0;margin:0}
.feed li{padding:.55rem 0;border-bottom:1px solid var(--xs-border);font-size:.8125rem}
.feed li:last-child{border-bottom:0}
.feed .when{font-size:.68rem;color:var(--xs-muted);margin-top:.1rem}

.hero .muted,.ss-hero .muted{color:var(--xs-muted)}

/* ============================================================
   33. (حذف شد — Command Palette)
   ============================================================ */

/* ============================================================
   34. Shortcuts help modal
   ============================================================ */
#xsShortcutsHelp .modal-content{
  border-radius:1rem;overflow:hidden;
  box-shadow:0 24px 48px rgba(15,23,42,.15);
}
#xsShortcutsHelp kbd{
  background:var(--xs-surface-2);border:1px solid var(--xs-border);
  border-radius:.3rem;padding:.2rem .5rem;font-size:.72rem;
  color:var(--xs-text);direction:ltr;font-family:monospace;
}

/* ============================================================
   35. Live status indicator
   ============================================================ */
#xsLiveStatus{
  padding:.5rem .6rem;margin-bottom:.4rem;
  border-radius:.5rem;
  display:flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:600;
  transition:all .3s;
}
#xsLiveStatus .dot{
  width:8px;height:8px;border-radius:50%;
  animation:xsLivePulse 2s infinite;
}

@keyframes xsLivePulse{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}
  70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
}

/* ============================================================
   36. Toast container
   ============================================================ */
#xsToastContainer{
  position:fixed;bottom:1.5rem;inset-inline-start:1.5rem;
  z-index:9998;display:flex;flex-direction:column;gap:.5rem;
  pointer-events:none;
}
#xsToastContainer > div{
  animation:xsSlideIn .3s cubic-bezier(.22,1,.36,1);
}
@keyframes xsSlideIn{
  from{opacity:0;transform:translateY(20px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ============================================================
   37. Keyboard shortcut hint در sidebar
   ============================================================ */
.sb-scroll::after{
  content:'Ctrl+Shift+F برای جستجو';
  display:block;
  text-align:center;
  font-size:.65rem;
  color:var(--xs-muted);
  padding:.5rem;
  margin-top:.5rem;
  opacity:.6;
}

/* ============================================================
   38. Command Palette
   ============================================================ */
#xsCmdPalette .modal-content{
  border-radius:1rem;overflow:hidden;
  box-shadow:0 24px 48px rgba(15,23,42,.15);
  border:1px solid var(--xs-border);
}
.xs-cmd-item{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .75rem;border-radius:.5rem;
  cursor:pointer;transition:background .1s;
}
.xs-cmd-item:hover,#xsCmdPalette .xs-cmd-item.active{
  background:var(--xs-brand-soft);
}
.xs-cmd-item i{
  color:var(--xs-brand);font-size:.95rem;width:1.2rem;text-align:center;
}

/* kbd */
.xs-kbd{
  background:var(--xs-surface-2);border:1px solid var(--xs-border);
  border-radius:.25rem;padding:.05rem .3rem;font-size:.62rem;
  color:var(--xs-muted);direction:ltr;display:inline-block;font-family:monospace;
}

/* ============================================================
   39. Shortcuts help modal
   ============================================================ */
#xsShortcutsHelp .modal-content{
  border-radius:1rem;overflow:hidden;
  box-shadow:0 24px 48px rgba(15,23,42,.15);
}

/* ============================================================
   40. Live status indicator
   ============================================================ */
#xsLiveStatus{
  padding:.45rem .6rem;margin:.2rem .55rem .5rem;
  border-radius:.5rem;border:1px solid #a7f3d0;
  display:flex;align-items:center;gap:.45rem;
  font-size:.7rem;font-weight:600;
  background:var(--xs-ok-soft);color:var(--xs-ok);
  transition:all .3s;
}
#xsLiveStatus .xs-dot{
  width:8px;height:8px;border-radius:50%;background:var(--xs-ok);
  animation:xsLivePulse 2s infinite;flex-shrink:0;
}
@keyframes xsLivePulse{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}
  70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
}

/* ============================================================
   41. Toast
   ============================================================ */
#xsToastContainer{
  position:fixed;bottom:1.5rem;inset-inline-start:1.5rem;
  z-index:9998;display:flex;flex-direction:column;gap:.5rem;
  pointer-events:none;
}
.xs-toast{
  background:#fff;border:1px solid var(--xs-border);
  border-radius:.6rem;padding:.75rem 1rem;
  box-shadow:0 8px 24px rgba(15,23,42,.12);
  display:flex;align-items:center;gap:.6rem;
  font-size:.83rem;font-weight:500;color:var(--xs-text);
  pointer-events:auto;cursor:pointer;max-width:360px;
  animation:xsSlideIn .3s cubic-bezier(.22,1,.36,1);
  transition:opacity .3s,transform .3s;
}
.xs-toast.xs-toast-out{opacity:0;transform:translateY(10px)}
.xs-toast-success{border-inline-start:3px solid var(--xs-ok)}
.xs-toast-success i{color:var(--xs-ok)}
.xs-toast-danger{border-inline-start:3px solid var(--xs-bad)}
.xs-toast-danger i{color:var(--xs-bad)}
.xs-toast-warning{border-inline-start:3px solid var(--xs-warn)}
.xs-toast-warning i{color:var(--xs-warn)}
.xs-toast-info{border-inline-start:3px solid var(--xs-info)}
.xs-toast-info i{color:var(--xs-info)}
.xs-toast i{font-size:1.05rem;flex-shrink:0}

@keyframes xsSlideIn{
  from{opacity:0;transform:translateY(20px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ============================================================
   42. Quick Actions FAB
   ============================================================ */
#xsFab{
  position:fixed;bottom:1.5rem;inset-inline-end:1.5rem;z-index:9990;
}
.xs-fab-btn{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,#4f46e5,#6366f1);
  border:0;color:#fff;cursor:pointer;
  box-shadow:0 8px 24px rgba(79,70,229,.4),0 2px 8px rgba(79,70,229,.3);
  font-size:1.4rem;display:grid;place-items:center;
  transition:all .2s cubic-bezier(.22,1,.36,1);
  position:relative;z-index:2;
}
.xs-fab-btn:hover{transform:scale(1.05);box-shadow:0 12px 32px rgba(79,70,229,.5)}
.xs-fab-btn:active{transform:scale(.95)}
#xsFab.open .xs-fab-btn{transform:rotate(45deg)}

.xs-fab-menu{
  position:absolute;bottom:70px;inset-inline-end:0;
  background:#fff;border:1px solid var(--xs-border);
  border-radius:.75rem;box-shadow:0 16px 40px rgba(15,23,42,.15);
  padding:.4rem;min-width:220px;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.95);
  transition:all .2s cubic-bezier(.22,1,.36,1);
  transform-origin:bottom right;
}
#xsFab.open .xs-fab-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.xs-fab-menu button,.xs-fab-menu a{
  display:flex;align-items:center;gap:.6rem;width:100%;
  padding:.55rem .7rem;border:0;background:transparent;
  border-radius:.5rem;cursor:pointer;
  font-size:.82rem;font-weight:500;color:var(--xs-text-2);
  text-decoration:none;transition:all .1s;font-family:inherit;
}
.xs-fab-menu button:hover,.xs-fab-menu a:hover{
  background:var(--xs-brand-soft);color:var(--xs-brand);
}
.xs-fab-menu i{font-size:.95rem;width:1.2rem;text-align:center;color:var(--xs-brand)}
.xs-fab-divider{height:1px;background:var(--xs-border);margin:.3rem .4rem}

@media(max-width:768px){
  #xsFab{bottom:5rem;inset-inline-end:1rem}
  .xs-fab-btn{width:48px;height:48px;font-size:1.2rem}
}

/* ============================================================
   43. Sparkline در KPI
   ============================================================ */
.kpi{position:relative}
.kpi svg{position:absolute;inset-inline-end:.5rem;bottom:.5rem;opacity:.6;pointer-events:none}

/* ============================================================
   44. Skeleton Loading
   ============================================================ */
.xs-skeleton-wrap{padding:.5rem 0}
.xs-skeleton-row{
  display:flex;align-items:center;gap:.75rem;
  padding:.6rem 0;border-bottom:1px solid var(--xs-border);
}
.xs-skeleton-row:last-child{border-bottom:0}
.xs-skeleton{
  background:linear-gradient(90deg,var(--xs-surface-3) 25%,var(--xs-surface-hover) 50%,var(--xs-surface-3) 75%);
  background-size:200% 100%;
  animation:xsShimmer 1.5s infinite;
  border-radius:.3rem;
}
@keyframes xsShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* ============================================================
   45. Context Menu
   ============================================================ */
.xs-context-menu{
  position:fixed;display:none;
  background:#fff;border:1px solid var(--xs-border);
  border-radius:.6rem;box-shadow:0 16px 40px rgba(15,23,42,.15);
  padding:.35rem;min-width:200px;z-index:99991;
}
.xs-context-menu a,.xs-context-menu button{
  display:flex;align-items:center;gap:.55rem;width:100%;
  padding:.45rem .65rem;border:0;background:transparent;
  border-radius:.4rem;cursor:pointer;
  font-size:.8rem;font-weight:500;color:var(--xs-text-2);
  text-decoration:none;transition:all .1s;font-family:inherit;text-align:start;
}
.xs-context-menu a:hover,.xs-context-menu button:hover{
  background:var(--xs-brand-soft);color:var(--xs-brand);
}
.xs-context-menu i{font-size:.9rem;width:1.1rem;text-align:center;color:var(--xs-brand)}
.xs-ctx-divider{height:1px;background:var(--xs-border);margin:.25rem .35rem}

/* ============================================================
   46. Multi-Select Bulk Bar
   ============================================================ */
.xs-bulk-bar{
  position:fixed;bottom:1.5rem;inset-inline-start:50%;transform:translateX(50%);
  background:#fff;border:1px solid var(--xs-border);
  border-radius:.75rem;box-shadow:0 16px 40px rgba(15,23,42,.15);
  padding:.65rem 1rem;display:flex;align-items:center;gap:1rem;
  z-index:9994;animation:xsSlideIn .3s var(--xs-ease);
}
.xs-bulk-bar span{font-size:.83rem;color:var(--xs-muted)}
.xs-bulk-bar b{color:var(--xs-brand);font-weight:700}
.xs-bulk-actions{display:flex;gap:.35rem}
.xs-bulk-actions button{
  display:flex;align-items:center;gap:.35rem;
  padding:.4rem .7rem;border:1px solid var(--xs-border);
  background:#fff;border-radius:.4rem;cursor:pointer;
  font-size:.76rem;font-weight:600;color:var(--xs-text-2);
  transition:all .1s;font-family:inherit;
}
.xs-bulk-actions button:hover{background:var(--xs-brand-soft);color:var(--xs-brand);border-color:var(--xs-brand)}
.xs-bulk-actions button.xs-bulk-clear{color:var(--xs-bad);border-color:var(--xs-bad)}
.xs-bulk-actions button.xs-bulk-clear:hover{background:var(--xs-bad-soft)}
.xs-ms-selected{background:var(--xs-brand-soft) !important}

/* ============================================================
   47. Inline Edit
   ============================================================ */
[data-inline-edit]{cursor:pointer;position:relative}
[data-inline-edit]:hover{background:var(--xs-brand-soft);border-radius:.25rem}
[data-inline-edit]::after{
  content:'\F4CA';font-family:'bootstrap-icons';font-size:.7rem;
  opacity:0;position:absolute;inset-inline-end:.3rem;top:50%;transform:translateY(-50%);
  color:var(--xs-muted);transition:opacity .1s;
}
[data-inline-edit]:hover::after{opacity:.5}

/* ============================================================
   48. Activity Feed
   ============================================================ */
.xs-af-item{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem 0;border-bottom:1px solid var(--xs-border);
}
.xs-af-item:last-child{border-bottom:0}
.xs-af-item i{font-size:.95rem;flex-shrink:0}

/* ============================================================
   49. Sidebar Search — استایل بهتر
   ============================================================ */
.xs-sb-search-wrap{
  padding:.6rem .55rem .5rem;
  position:sticky;
  top:0;
  background:var(--xs-surface);
  z-index:10;
  border-bottom:1px solid var(--xs-border);
  margin-bottom:.4rem;
}
.xs-sb-search-inner{
  position:relative;
  display:flex;
  align-items:center;
}
.xs-sb-search-icon{
  position:absolute;
  inset-inline-start:.65rem;
  color:var(--xs-muted);
  font-size:.8rem;
  pointer-events:none;
  transition:color .15s;
}
.xs-sb-search-input{
  width:100%;
  padding:.45rem 2rem .45rem 1.9rem;
  border:1px solid var(--xs-border);
  border-radius:.5rem;
  background:var(--xs-surface-2);
  font-size:.78rem;
  color:var(--xs-text);
  outline:0;
  font-family:inherit;
  transition:all .15s;
}
.xs-sb-search-input::placeholder{color:var(--xs-muted);opacity:.7}
.xs-sb-search-input:focus{
  border-color:var(--xs-brand);
  background:#fff;
  box-shadow:0 0 0 3px var(--xs-brand-glow);
}
.xs-sb-search-input:focus + .xs-sb-search-icon,
.xs-sb-search-input:focus ~ .xs-sb-search-icon{
  color:var(--xs-brand);
}
.xs-sb-search-clear{
  position:absolute;
  inset-inline-end:.4rem;
  background:transparent;
  border:0;
  color:var(--xs-muted);
  cursor:pointer;
  padding:.2rem;
  font-size:.85rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition:all .15s;
}
.xs-sb-search-clear:hover{color:var(--xs-text);background:var(--xs-surface-3)}
.xs-sb-search-count{
  font-size:.65rem;
  color:var(--xs-muted);
  text-align:center;
  padding:.25rem 0 0;
  font-weight:600;
}
.xs-sb-search-count.empty{color:var(--xs-bad)}

/* mini sidebar — مخفی کردن سرچ */
html[data-sb=mini] .xs-sb-search-wrap{display:none}


/* ============================================================
   50. Onboarding modal
   ============================================================ */
#xsOnboarding .modal-content{border:0;border-radius:1.25rem;overflow:hidden;box-shadow:0 24px 48px rgba(0,0,0,.2)}

/* ============================================================
   51. Keyboard hint در sidebar
   ============================================================ */
.sb-scroll::after{
  content:'Ctrl+Shift+F برای جستجو';
  display:block;text-align:center;font-size:.62rem;
  color:var(--xs-muted);padding:.4rem;margin-top:.4rem;opacity:.5;
}

/* ============================================================
   52. Copy Button برای code/pre
   ============================================================ */
.xs-copy-btn{
  position:absolute;
  inset-inline-end:.4rem;
  top:.4rem;
  background:var(--xs-surface-3);
  border:1px solid var(--xs-border);
  border-radius:.3rem;
  padding:.25rem .4rem;
  cursor:pointer;
  color:var(--xs-muted);
  font-size:.75rem;
  opacity:0;
  transition:all .15s;
  z-index:2;
}
pre:hover .xs-copy-btn,
code:hover .xs-copy-btn{opacity:1}
.xs-copy-btn:hover{background:var(--xs-brand);color:#fff;border-color:var(--xs-brand)}

/* ============================================================
   53. Scroll to Top
   ============================================================ */
.xs-scroll-top{
  position:fixed;
  bottom:5.5rem;
  inset-inline-end:1.5rem;
  width:40px;height:40px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--xs-border);
  color:var(--xs-text-2);
  cursor:pointer;
  display:grid;place-items:center;
  font-size:1rem;
  box-shadow:0 4px 12px rgba(15,23,42,.1);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:all .25s cubic-bezier(.22,1,.36,1);
  z-index:9989;
}
.xs-scroll-top.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.xs-scroll-top:hover{
  background:var(--xs-brand);
  color:#fff;
  border-color:var(--xs-brand);
  transform:translateY(-2px);
  box-shadow:0 6px 16px var(--xs-brand-glow);
}
@media(max-width:768px){
  .xs-scroll-top{bottom:5rem;inset-inline-end:1rem;width:36px;height:36px}
}

/* ============================================================
   54. Tooltip
   ============================================================ */
.xs-tooltip{
  position:absolute;
  background:var(--xs-text);
  color:var(--xs-bg);
  padding:.3rem .55rem;
  border-radius:.3rem;
  font-size:.7rem;
  font-weight:500;
  white-space:nowrap;
  z-index:99999;
  pointer-events:none;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .15s,transform .15s;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.xs-tooltip.show{opacity:1;transform:translateY(0)}
.xs-tooltip::after{
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:4px solid transparent;border-top-color:var(--xs-text);
}

/* ============================================================
   55. Session Timeout Warning
   ============================================================ */
.xs-session-warn{
  position:fixed;
  bottom:1.5rem;
  inset-inline-start:50%;
  transform:translateX(50%) translateY(100px);
  background:#fff;
  border:1px solid var(--xs-warn);
  border-radius:.75rem;
  padding:.85rem 1.25rem;
  box-shadow:0 16px 40px rgba(15,23,42,.15);
  display:flex;align-items:center;gap:.75rem;
  font-size:.85rem;color:var(--xs-text);
  z-index:9995;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
  max-width:500px;
}
.xs-session-warn.show{transform:translateX(50%) translateY(0)}
.xs-session-warn i{color:var(--xs-warn);font-size:1.1rem}
.xs-session-warn button{
  background:var(--xs-brand);color:#fff;border:0;
  padding:.35rem .85rem;border-radius:.4rem;cursor:pointer;
  font-size:.78rem;font-weight:600;font-family:inherit;
}

/* ============================================================
   56. Keyboard Navigation در جدول‌ها
   ============================================================ */
.xs-row-active{
  background:var(--xs-brand-soft) !important;
  outline:2px solid var(--xs-brand);
  outline-offset:-2px;
}

/* ============================================================
   57. Pin/Unpin صفحات
   ============================================================ */
.xs-pinned-section{
  margin-bottom:.5rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--xs-border);
}
.xs-pinned-header{
  padding:.35rem .7rem .2rem;
  font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--xs-muted);
}
.xs-pinned-link{
  position:relative;
}
.xs-pinned-link .xs-unpin-btn{
  margin-inline-start:auto;
  background:transparent;border:0;color:var(--xs-muted);
  cursor:pointer;padding:.1rem .25rem;font-size:.7rem;
  border-radius:.2rem;opacity:0;transition:opacity .15s;
}
.xs-pinned-link:hover .xs-unpin-btn{opacity:1}
.xs-pinned-link .xs-unpin-btn:hover{color:var(--xs-bad);background:var(--xs-bad-soft)}

.xs-pin-btn{
  margin-inline-start:auto;
  background:transparent;border:0;
  color:var(--xs-muted);cursor:pointer;
  padding:.1rem .25rem;font-size:.7rem;
  border-radius:.2rem;opacity:0;transition:opacity .15s;
}
.sidebar .nav-link:hover .xs-pin-btn{opacity:.7}
.xs-pin-btn:hover{color:var(--xs-warn) !important;opacity:1 !important}

/* mini sidebar — مخفی کردن pin */
html[data-sb=mini] .xs-pin-btn{display:none}
html[data-sb=mini] .xs-pinned-section{display:none}

/* ============================================================
   58. AI Chat Widget شناور
   ============================================================ */
.xs-ai-bubble{
  position:fixed;
  bottom:6.5rem;
  inset-inline-end:1.5rem;
  width:56px;height:56px;
  border-radius:50%;
  background:linear-gradient(135deg,#4f46e5,#06b6d4);
  color:#fff;border:0;cursor:pointer;
  display:grid;place-items:center;
  font-size:1.4rem;
  box-shadow:0 8px 24px rgba(79,70,229,.4);
  z-index:9987;
  transition:all .2s cubic-bezier(.22,1,.36,1);
  animation:xsAIPulse 3s ease-in-out infinite;
}
.xs-ai-bubble:hover{transform:scale(1.1) rotate(5deg);box-shadow:0 12px 32px rgba(79,70,229,.5)}
@keyframes xsAIPulse{
  0%,100%{box-shadow:0 8px 24px rgba(79,70,229,.4)}
  50%{box-shadow:0 8px 24px rgba(79,70,229,.4),0 0 0 12px rgba(79,70,229,.1)}
}

.xs-ai-chat{
  position:fixed;
  bottom:6.5rem;
  inset-inline-end:1.5rem;
  width:380px;
  max-width:calc(100vw - 2rem);
  height:500px;
  max-height:calc(100vh - 8rem);
  background:#fff;
  border:1px solid var(--xs-border);
  border-radius:1rem;
  box-shadow:0 24px 48px rgba(0,0,0,.15);
  display:flex;flex-direction:column;
  z-index:9988;
  opacity:0;visibility:hidden;
  transform:translateY(20px) scale(.95);
  transition:all .25s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
.xs-ai-chat.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

.xs-ai-header{
  padding:.85rem 1rem;
  background:linear-gradient(135deg,#4f46e5,#06b6d4);
  color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  font-weight:700;font-size:.9rem;
}
.xs-ai-header i{margin-inline-end:.4rem}
.xs-ai-close{
  background:rgba(255,255,255,.2);border:0;color:#fff;
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  font-size:1.2rem;display:grid;place-items:center;
}
.xs-ai-close:hover{background:rgba(255,255,255,.3)}

.xs-ai-messages{
  flex:1;overflow-y:auto;padding:1rem;
  display:flex;flex-direction:column;gap:.6rem;
}
.xs-ai-msg{
  max-width:80%;padding:.6rem .85rem;
  border-radius:.75rem;font-size:.82rem;line-height:1.5;
  word-wrap:break-word;
}
.xs-ai-msg.bot{
  background:var(--xs-surface-2);
  color:var(--xs-text);
  border-bottom-inline-start-radius:.25rem;
  align-self:flex-start;
}
.xs-ai-msg.user{
  background:var(--xs-brand);color:#fff;
  border-bottom-inline-end-radius:.25rem;
  align-self:flex-end;
}
.xs-ai-msg.bot.error{background:var(--xs-bad-soft);color:var(--xs-bad)}
.xs-ai-msg.typing{display:flex;align-items:center;gap:.4rem;color:var(--xs-muted)}

.xs-ai-input{
  padding:.75rem;border-top:1px solid var(--xs-border);
  display:flex;gap:.5rem;
}
.xs-ai-input input{
  flex:1;padding:.5rem .75rem;
  border:1px solid var(--xs-border);border-radius:.5rem;
  font-size:.82rem;outline:0;font-family:inherit;
  background:var(--xs-surface-2);color:var(--xs-text);
}
.xs-ai-input input:focus{border-color:var(--xs-brand);box-shadow:0 0 0 3px var(--xs-brand-glow)}
.xs-ai-input button{
  width:36px;height:36px;border-radius:50%;
  background:var(--xs-brand);border:0;color:#fff;cursor:pointer;
  display:grid;place-items:center;flex-shrink:0;
}
.xs-ai-input button:hover{background:var(--xs-primary-hover)}

/* ============================================================
   59. Pull to Refresh
   ============================================================ */
.xs-pull-indicator{
  position:fixed;top:0;inset-inline-start:50%;
  transform:translateX(50%) translateY(0);
  background:var(--xs-brand);color:#fff;
  padding:.5rem 1.25rem;border-radius:0 0 .6rem .6rem;
  font-size:.78rem;font-weight:600;
  display:flex;align-items:center;gap:.4rem;
  z-index:9990;opacity:0;
  transition:opacity .15s;
  box-shadow:0 4px 12px var(--xs-brand-glow);
}
.xs-pull-indicator i{font-size:.9rem}

/* ============================================================
   60. Compact Mode
   ============================================================ */
html[data-compact="1"] .card{padding:.5rem !important}
html[data-compact="1"] .card-body{padding:.65rem !important}
html[data-compact="1"] .kpi{padding:.7rem .85rem !important}
html[data-compact="1"] .kpi .k-val{font-size:1.2rem !important}
html[data-compact="1"] .set-card{padding:.85rem !important;margin-bottom:.5rem !important}
html[data-compact="1"] .table td,html[data-compact="1"] .table th{padding:.4rem .55rem !important;font-size:.78rem !important}
html[data-compact="1"] .nav-tabs .nav-link{padding:.4rem .7rem !important;font-size:.76rem !important}
html[data-compact="1"] .btn{padding:.35rem .7rem !important;font-size:.78rem !important}
html[data-compact="1"] .page{padding:.85rem !important}
html[data-compact="1"] .hero,html[data-compact="1"] .ss-hero,html[data-compact="1"] .set-hero{padding:1rem !important}
html[data-compact="1"] .hero h2,html[data-compact="1"] .ss-hero h1{font-size:1.05rem !important}

/* ============================================================
   61. Install Banner (PWA)
   ============================================================ */
.xs-install-banner{
  position:fixed;
  bottom:1.5rem;inset-inline-start:1.5rem;
  background:#fff;
  border:1px solid var(--xs-border);
  border-radius:.75rem;
  padding:.75rem 1rem;
  display:flex;align-items:center;gap:.75rem;
  box-shadow:0 16px 40px rgba(15,23,42,.15);
  z-index:9989;
  animation:xsSlideIn .3s var(--xs-ease);
  max-width:400px;
}
.xs-install-banner > i{
  font-size:1.5rem;color:var(--xs-brand);
}
.xs-install-banner div{flex:1}
.xs-install-banner b{display:block;font-size:.85rem;color:var(--xs-text)}
.xs-install-banner small{display:block;font-size:.72rem;color:var(--xs-muted)}
.xs-install-banner .btn{padding:.3rem .65rem;font-size:.72rem}

/* ============================================================
   62. Saved Filters
   ============================================================ */
.xs-saved-filter{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.4rem .6rem;
  background:var(--xs-surface-2);
  border:1px solid var(--xs-border);
  border-radius:.4rem;
  margin-bottom:.3rem;
  font-size:.78rem;
}
.xs-saved-filter a{color:var(--xs-brand);text-decoration:none;flex:1}
.xs-saved-filter a:hover{text-decoration:underline}
.xs-saved-filter .btn{padding:.15rem .35rem;font-size:.7rem}

/* ============================================================
   63. Compact/Font toggle buttons
   ============================================================ */
.xs-compact-toggle,.xs-font-toggle{
  transition:all .15s;
}
.xs-compact-toggle:hover,.xs-font-toggle:hover{
  background:var(--xs-brand-soft) !important;
  border-color:var(--xs-brand) !important;
  color:var(--xs-brand) !important;
}

@media(max-width:768px){
  .xs-compact-toggle,.xs-font-toggle{display:none}
  .xs-ai-chat{width:100%;inset-inline-start:0;inset-inline-end:0;bottom:0;border-radius:1rem 1rem 0 0}
  .xs-ai-bubble{bottom:5rem;inset-inline-end:1rem;width:48px;height:48px;font-size:1.2rem}
}

/* ============================================================
   64. Product Card Pro — رابط کاربری زیبا و مدرن
   ============================================================ */
.product-grid-pro{margin-top:.5rem}
.product-card-pro{
  position:relative;
  border:1px solid var(--xs-line);
  border-radius:1rem;
  overflow:hidden;
  background:var(--xs-surface);
  transition:transform .2s var(--xs-ease),box-shadow .25s,border-color .2s;
  display:flex;
  flex-direction:column;
}
.product-card-pro:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(15,23,42,.12);
  border-color:var(--xs-line-strong);
}
.product-card-pro.hot{
  border-color:#f97316;
  box-shadow:0 0 0 1px #f97316 inset,0 4px 12px rgba(249,115,22,.15);
}
.product-card-pro.hot:hover{
  box-shadow:0 12px 32px rgba(249,115,22,.25);
  border-color:#ea580c;
}
.product-card-pro.out-of-stock{opacity:.75}
.product-card-pro.out-of-stock:hover{opacity:1}

/* Checkbox */
.product-card-pro .product-card-check{position:absolute;top:.5rem;inset-inline-start:.5rem;z-index:3}

/* Badges (hot + discount) */
.product-card-pro .hot-badge{
  position:absolute;top:.5rem;inset-inline-end:.5rem;z-index:3;
  background:linear-gradient(135deg,#ef4444,#f97316);
  color:#fff;
  font-size:.66rem;font-weight:700;
  padding:.2rem .5rem;border-radius:99px;
  box-shadow:0 2px 8px rgba(239,68,68,.4);
  display:flex;align-items:center;gap:.2rem;
  animation:pulse-hot 2s infinite;
}
@keyframes pulse-hot{0%,100%{box-shadow:0 2px 8px rgba(239,68,68,.4)}50%{box-shadow:0 2px 14px rgba(239,68,68,.7)}}
.product-card-pro .discount-badge{
  position:absolute;bottom:.5rem;inset-inline-end:.5rem;z-index:3;
  background:#16a34a;color:#fff;
  font-size:.66rem;font-weight:700;
  padding:.2rem .5rem;border-radius:99px;
  box-shadow:0 2px 8px rgba(22,163,74,.4);
}

/* Thumbnail */
.product-thumb-wrap-pro{
  display:block;aspect-ratio:1;
  background:linear-gradient(135deg,var(--xs-surface-3),var(--xs-surface-2));
  overflow:hidden;position:relative;
  border-bottom:1px solid var(--xs-line);
}
.product-thumb-wrap-pro img{
  width:100%;height:100%;object-fit:contain;padding:.5rem;
  transition:transform .4s var(--xs-ease);
}
.product-card-pro:hover .product-thumb-wrap-pro img{transform:scale(1.06)}
.thumb-placeholder-pro{
  display:grid;place-items:center;width:100%;height:100%;
  color:var(--xs-muted);font-size:2.5rem;
}
.out-overlay{
  position:absolute;inset:0;
  background:rgba(15,23,42,.55);
  color:#fff;font-weight:700;font-size:.95rem;
  display:grid;place-items:center;
  letter-spacing:.05em;
}

/* Body */
.card-body-pro{padding:.65rem .75rem .6rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.pro-brand{
  font-size:.68rem;font-weight:700;color:var(--xs-xcom);
  text-transform:uppercase;letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pro-title{
  font-size:.85rem;font-weight:600;line-height:1.4;color:var(--xs-text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.4em;
}
.pro-title:hover{color:var(--xs-xcom)}
.pro-sku{
  font-size:.68rem;color:var(--xs-muted);
  display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;
}
.pro-sku code{background:var(--xs-surface-2);padding:.05rem .3rem;border-radius:.25rem;font-size:.66rem}
.pro-cat{color:var(--xs-muted)}

/* Price + Stock row */
.pro-price-row{
  display:flex;justify-content:space-between;align-items:flex-end;gap:.5rem;
  padding:.4rem 0;border-top:1px dashed var(--xs-line);border-bottom:1px dashed var(--xs-line);
  margin:.2rem 0;
}
.pro-price{display:flex;flex-direction:column;gap:.1rem}
.price-sale{font-size:1.05rem;font-weight:800;color:var(--xs-xir)}
.price-orig{font-size:.72rem;color:var(--xs-muted);font-weight:500}
.price-regular{font-size:1.05rem;font-weight:800;color:var(--xs-text)}
.price-currency{font-size:.65rem;color:var(--xs-muted);font-weight:500;margin-inline-start:.15rem}

.stock-pill-pro{
  display:inline-flex;align-items:center;gap:.25rem;
  font-size:.7rem;font-weight:700;padding:.18rem .5rem;border-radius:99px;
  background:#dcfce7;color:#16a34a;
}
.stock-pill-pro::before{content:'';width:6px;height:6px;border-radius:50%;background:#16a34a}
.stock-pill-pro.low{background:#fef3c7;color:#ca8a04}
.stock-pill-pro.low::before{background:#ca8a04}
.stock-pill-pro.out{background:#fee2e2;color:#dc2626}
.stock-pill-pro.out::before{background:#dc2626}

/* Stats row */
.pro-stats{
  display:flex;gap:.6rem;align-items:center;font-size:.7rem;color:var(--xs-muted);
}
.pro-stat-item{display:inline-flex;align-items:center;gap:.2rem}

/* Actions */
.pro-actions{
  display:flex;gap:.3rem;margin-top:.4rem;
}
.pro-actions .btn{padding:.3rem .5rem;font-size:.74rem;font-weight:600}

/* List view tweaks */
.products-table .thumb{width:48px;height:48px;border-radius:.5rem;object-fit:cover;border:1px solid var(--xs-line)}
.products-table .thumb.empty{display:grid;place-items:center;background:var(--xs-surface-2);color:var(--xs-muted)}
.products-table tr.table-warning-subtle{background:rgba(249,115,22,.06) !important}
.products-table tr.table-warning-subtle:hover{background:rgba(249,115,22,.12) !important}

/* Dark mode */
[data-bs-theme="dark"] .product-card-pro{
  background:var(--xs-surface);
  border-color:var(--xs-line);
}
[data-bs-theme="dark"] .product-thumb-wrap-pro{
  background:linear-gradient(135deg,#1e293b,#0f172a);
}
[data-bs-theme="dark"] .price-sale,[data-bs-theme="dark"] .price-regular{color:#fbbf24}
[data-bs-theme="dark"] .pro-brand{color:#60a5fa}
[data-bs-theme="dark"] .pro-sku code{background:#1e293b}
[data-bs-theme="dark"] .stock-pill-pro{background:rgba(22,163,74,.15)}
[data-bs-theme="dark"] .products-table tr.table-warning-subtle{background:rgba(249,115,22,.1) !important}

@media(max-width:576px){
  .product-card-pro .pro-actions{flex-direction:column}
  .product-card-pro .pro-actions .btn{width:100%}
  .pro-price-row{flex-direction:column;align-items:flex-start;gap:.4rem}
}

/* ============================================================
   65. Mobile Responsive Fixes — بهبود استایل در گوشی
   ============================================================ */

/* تبلت و موبایل بزرگ */
@media(max-width:991px){
  /* جلوگیری از overflow افقی */
  body{overflow-x:hidden}
  .container,.container-fluid{padding-inline:.75rem}
  /* کارت‌های آماری — ۲ ستونه */
  .row.g-3 > [class*="col-"]{margin-bottom:.5rem}
  /* جداول — اسکرول افقی */
  .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table{min-width:600px}
  /* مودال‌ها — تمام صفحه */
  .modal-dialog{margin:.5rem}
  .modal-content{border-radius:.75rem}
  /* فرم‌ها — فاصله کمتر */
  .form-control,.form-select{font-size:.95rem;padding:.5rem .75rem}
  /* دکمه‌ها — حداقل ارتفاع ۴۴px برای لمس */
  .btn{min-height:44px;padding:.5rem 1rem}
  .btn-sm{min-height:38px}
}

/* موبایل */
@media(max-width:767px){
  /* hero بخش‌ها — padding کمتر */
  .ah-hero,.psr-hero,.hm-hero,.an-hero,.im-hero,.tb-hero,.pe-hero,.os-hero{
    padding:1rem 1.25rem!important;
    border-radius:1rem!important;
  }
  .ah-hero h1,.psr-hero h2,.hm-hero h2,.an-hero h1,.im-hero h2,.tb-hero h2,.pe-hero h2,.os-hero h2{
    font-size:1.1rem!important;
  }
  /* کارت‌ها — padding کمتر */
  .card-body{padding:.75rem}
  .ah-card,.psr-card,.hm-card,.im-setting{
    padding:.85rem!important;
  }
  /* آمار — ۲ ستونه */
  .row.g-3 > .col-6{flex:0 0 50%;max-width:50%}
  /* نمودار — height کمتر */
  canvas{max-height:200px!important}
  /* tabs — قابل اسکرول */
  .d-flex.gap-1{
    flex-wrap:wrap;
  }
  .ah-tab,.ah-tab{
    font-size:.72rem;
    padding:.3rem .6rem;
    white-space:nowrap;
  }
  /* تیتر کارت‌ها — فونت کوچکتر */
  .card-header,.ah-card h3{
    font-size:.85rem!important;
    padding:.6rem .75rem!important;
  }
  /* جداول — فونت کوچکتر */
  .table{font-size:.78rem}
  .table th,.table td{padding:.4rem .5rem}
  /* sidebar دسته‌بندی — مخفی در موبایل */
  .col-lg-3,.col-xl-2{display:none}
  /* مودال — تمام عرض */
  .modal-dialog{max-width:100%;margin:0}
  .modal{padding:0!important}
  .modal-content{border-radius:0;min-height:100vh}
  .modal-body{padding:1rem}
  /* فیلتر چپ‌ها — stack عمودی */
  .filter-chips{flex-wrap:wrap;gap:.3rem}
  .filter-chips .chip{font-size:.7rem;padding:.3rem .6rem}
}

/* موبایل کوچک */
@media(max-width:575px){
  /* hero — فاصله کمتر */
  .ah-hero,.psr-hero,.hm-hero,.an-hero,.im-hero,.tb-hero,.pe-hero,.os-hero{
    padding:.85rem 1rem!important;
    margin-bottom:.75rem!important;
  }
  /* آمار — ۱ ستونه در موبایل خیلی کوچک */
  .row.g-3 > .col-6{flex:0 0 50%;max-width:50%}
  /* کارت محصول — ۱ ستونه */
  .product-grid-pro > [class*="col-"]{
    flex:0 0 100%;
    max-width:100%;
  }
  /* قیمت و موجودی — stack */
  .pro-price-row{
    flex-direction:column;
    align-items:flex-start;
    gap:.3rem;
  }
  /* دکمه‌های اقدام — تمام عرض */
  .pro-actions{
    flex-direction:column;
  }
  .pro-actions .btn{width:100%}
  /* فرم‌ها — فاصله کمتر */
  .row.g-2 > [class*="col-"]{margin-bottom:.4rem}
  /* تیتر صفحات */
  .topbar .tb-title h1{font-size:1rem}
  .topbar .tb-title .tb-crumb{font-size:.7rem}
  /* بنر هشدار — فاصله کمتر */
  .alert{padding:.6rem .75rem;font-size:.78rem}
  /* نمودار — height خیلی کمتر */
  canvas{max-height:160px!important}
}

/* موبایل خیلی کوچک (iPhone SE) */
@media(max-width:375px){
  .ah-hero,.psr-hero,.hm-hero,.an-hero,.im-hero,.tb-hero,.pe-hero,.os-hero{
    padding:.75rem .85rem!important;
  }
  .ah-hero h1,.psr-hero h2,.hm-hero h2,.an-hero h1,.im-hero h2,.tb-hero h2,.pe-hero h2,.os-hero h2{
    font-size:1rem!important;
  }
  /* آمار — ۱ ستونه */
  .row.g-3 > .col-6{flex:0 0 100%;max-width:100%}
  .ah-stat,.psr-stat,.hm-stat,.an-stat,.im-stat{
    padding:.6rem .75rem;
  }
  .ah-stat .num,.psr-stat .v,.hm-stat .v,.an-stat .num,.im-stat .v{
    font-size:1.2rem;
  }
}

/* بهبود فرم‌ها در موبایل */
@media(max-width:768px){
  .form-control,.form-select,.form-control-sm,.form-select-sm{
    font-size:16px; /* جلوگیری از zoom در iOS */
  }
  .input-group .btn{min-height:44px}
}

/* بهبود scroll */
@media(max-width:991px){
  .table-responsive,.card-body{
    -webkit-overflow-scrolling:touch;
  }
  /* scrollbar مخفی در موبایل */
  ::-webkit-scrollbar{width:6px;height:6px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--xs-line-strong);border-radius:99px}
}

/* بهبود touch */
@media(hover:none) and (pointer:coarse){
  .product-card-pro:hover{transform:none}
  .btn:hover{transform:none}
  /* منطقه‌ی لمس بزرگ‌تر */
  .btn-sm{padding:.4rem .7rem;min-height:38px}
  .form-check-input{width:1.25rem;height:1.25rem;margin-inline-start:-1.75rem}
}

/* بهبود safe-area برای iPhone X+ */
@supports(padding:max(0px)){
  .topbar{
    padding-top:max(.5rem,env(safe-area-inset-top));
  }
  .mobile-nav{
    padding-bottom:max(.5rem,env(safe-area-inset-bottom));
  }
  body{
    padding-bottom:env(safe-area-inset-bottom);
  }
}

/* ============================================================
   66. Bridge Simple — نمایش ساده‌ی وضعیت اتصال سایت‌ها
   ============================================================ */
.bridge-simple{
  display:flex;
  align-items:center;
  gap:.3rem;
  padding:.2rem .4rem;
  background:var(--xs-surface-2);
  border-radius:99px;
}
.site-pill{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.2rem .55rem;
  border-radius:99px;
  font-size:.72rem;
  font-weight:700;
  white-space:nowrap;
}
.site-pill .dot{
  width:7px;
  height:7px;
  border-radius:50%;
  flex-shrink:0;
}
.site-pill.on{
  background:var(--xs-ok-soft);
  color:var(--xs-ok);
}
.site-pill.on .dot{
  background:var(--xs-ok);
  box-shadow:0 0 6px var(--xs-ok);
  animation:pulse-dot 2s infinite;
}
.site-pill.off{
  background:var(--xs-surface-3);
  color:var(--xs-muted);
}
.site-pill.off .dot{
  background:var(--xs-muted);
}
@keyframes pulse-dot{
  0%,100%{opacity:1}
  50%{opacity:.5}
}

/* موبایل — bridge ساده‌تر */
@media(max-width:767px){
  .bridge-simple{
    gap:.2rem;
    padding:.15rem .3rem;
  }
  .site-pill{
    font-size:.66rem;
    padding:.15rem .4rem;
  }
  .site-pill .dot{
    width:6px;
    height:6px;
  }
  /* فقط آیکون site رو نشون بده، متن رو مخفی کن */
  .site-pill span:not(.dot){
    display:none;
  }
  .site-pill::after{
    content:attr(data-short);
    font-size:.66rem;
  }
}

/* دکمه‌ی همگام‌سازی در موبایل */
@media(max-width:575px){
  #xsSyncAllBtn{
    padding:.3rem .5rem;
    font-size:.72rem;
  }
  #xsSyncAllBtn span{
    display:none!important;
  }
}