/* ============================================================
   🎨 (Update 43) استودیوی فراتی‌وی (/admin/faratv) — پیشوند: fts-
   تنها محلِ مدیریتِ فراتی‌وی: پیشخوان، صفِ بررسی، ولاگ، موزیک، دسته‌ها و رسانه‌ها، صفحه‌ی اصلی.
   ============================================================ */

.fts {
  --s-bg: #f6f7fb; --s-surface: #fff; --s-surface-2: #fafbfd; --s-border: #e7e9f0; --s-text: #151826; --s-text-2: #545a6e; --s-text-3: #9097aa;
  --s-accent: #7c3aed; --s-accent-2: #5b21b6; --s-accent-bg: #f3efff; --s-ok: #059669; --s-warn: #b45309; --s-bad: #dc2626;
  --s-radius: 16px; --s-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  /* متغیرهایِ ftvx- برایِ مؤلفه‌ی مشترکِ آپلود (FaraTvFileDrop) */
  --ftvx-bg: var(--s-bg); --ftvx-surface: var(--s-surface); --ftvx-border: var(--s-border); --ftvx-text: var(--s-text); --ftvx-text-2: var(--s-text-2); --ftvx-text-3: var(--s-text-3);
  --ftvx-accent: var(--s-accent); --ftvx-accent-2: var(--s-accent-2); --ftvx-accent-bg: var(--s-accent-bg); --ftvx-ok: var(--s-ok); --ftvx-warn: var(--s-warn); --ftvx-bad: var(--s-bad); --ftvx-radius: 14px;
  direction: rtl; color: var(--s-text); max-width: 1240px; margin: 0 auto; padding: 4px 4px 40px; font-family: inherit;
}
[data-theme="dark"] .fts {
  --s-bg: #15161a; --s-surface: #1c1d22; --s-surface-2: #212228; --s-border: rgba(255,255,255,.09); --s-text: #f1f1ef; --s-text-2: #b3b3ad; --s-text-3: #7d7d77;
  --s-accent-bg: rgba(124,58,237,.18); --s-shadow: none;
}
.fts *, .fts *::before, .fts *::after { box-sizing: border-box; }
.fts a { color: inherit; text-decoration: none; }
.fts :is(button, a, input, select, textarea):focus-visible { outline: 3px solid rgba(124,58,237,.4); outline-offset: 2px; }
.fts .ltr { direction: ltr; unicode-bidi: isolate; }

/* ── دکمه‌ها و فرم ── */
.fts-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--s-border);
  background: var(--s-surface); color: var(--s-text); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, filter .15s, transform .1s; }
.fts-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--s-accent) 40%, var(--s-border)); }
.fts-btn:active:not(:disabled) { transform: scale(.98); }
.fts-btn:disabled { opacity: .55; cursor: not-allowed; }
.fts-btn.primary { background: var(--s-accent); border-color: var(--s-accent); color: #fff; box-shadow: 0 8px 18px -10px var(--s-accent); }
.fts-btn.primary:hover:not(:disabled) { background: var(--s-accent-2); }
.fts-btn.ghost { background: transparent; }
.fts-btn.ghost.on { background: var(--s-accent-bg); color: var(--s-accent); border-color: transparent; }
.fts-btn.ok { color: var(--s-ok); border-color: color-mix(in srgb, var(--s-ok) 35%, var(--s-border)); }
.fts-btn.ok:hover:not(:disabled) { background: var(--s-ok); color: #fff; }
.fts-btn.danger { color: var(--s-bad); border-color: color-mix(in srgb, var(--s-bad) 30%, var(--s-border)); }
.fts-btn.danger.solid, .fts-btn.danger:hover:not(:disabled) { background: var(--s-bad); color: #fff; border-color: var(--s-bad); }
.fts-btn.sm { min-height: 34px; padding: 0 12px; font-size: 12px; border-radius: 10px; }
.fts-icon-btn { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--s-border); background: var(--s-surface); color: var(--s-text-2);
  display: inline-grid; place-items: center; font-size: 17px; cursor: pointer; transition: all .15s; }
.fts-icon-btn:hover:not(:disabled) { color: var(--s-accent); border-color: color-mix(in srgb, var(--s-accent) 40%, var(--s-border)); background: var(--s-accent-bg); }
.fts-icon-btn.danger:hover:not(:disabled) { color: #fff; background: var(--s-bad); border-color: var(--s-bad); }
.fts-icon-btn.on-amber { color: #d97706; background: #fffbeb; border-color: #fde68a; }
.fts-icon-btn:disabled { opacity: .5; cursor: not-allowed; }
.fts-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--s-accent); cursor: pointer; display: inline-flex; align-items: center; gap: 2px; }
.fts-mini { width: 24px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: var(--s-text-3); cursor: pointer; display: grid; place-items: center; font-size: 14px; }
.fts-mini:hover:not(:disabled) { background: var(--s-accent-bg); color: var(--s-accent); }
.fts-mini:disabled { opacity: .3; cursor: default; }

.fts-input { width: 100%; border: 1px solid var(--s-border); border-radius: 12px; background: var(--s-surface); color: var(--s-text); font: inherit; font-size: 13.5px;
  padding: 10px 12px; outline: none; transition: border-color .15s, box-shadow .15s; }
.fts-input:focus { border-color: var(--s-accent); box-shadow: 0 0 0 4px rgba(124,58,237,.12); }
textarea.fts-input { resize: vertical; min-height: 80px; line-height: 1.8; }
.fts-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.fts-field > label { font-size: 12px; font-weight: 800; color: var(--s-text-2); }
.fts-field small, .fts-field > label small { font-size: 11px; font-weight: 600; color: var(--s-text-3); }
.fts-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fts-search { position: relative; flex: 1 1 220px; min-width: 0; display: block; }
.fts-search > i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--s-text-3); pointer-events: none; }
.fts-search .fts-input { padding-right: 36px; }
.fts-search.sm .fts-input { padding-top: 8px; padding-bottom: 8px; font-size: 12.5px; }
.fts-muted { color: var(--s-text-3); font-size: 12px; }
.fts-muted.center { text-align: center; padding: 10px; }
.fts-muted.grow { flex: 1 1 280px; }

/* سگمنت (انتخابِ یکی از چند) */
.fts-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--s-bg); border: 1px solid var(--s-border); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fts-seg::-webkit-scrollbar { display: none; }
.fts-seg.wrap { flex-wrap: wrap; overflow: visible; }
.fts-seg button { flex: none; display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--s-text-2); font: inherit; font-size: 12.5px; font-weight: 800;
  padding: 7px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.fts-seg.sm button { padding: 6px 10px; font-size: 12px; }
.fts-seg button:hover:not(:disabled):not(.on) { color: var(--s-text); }
.fts-seg button.on { background: var(--s-surface); color: var(--s-accent); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.fts-seg button:disabled { opacity: .5; cursor: not-allowed; }

/* کلید (switch) */
.fts-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; cursor: pointer; margin-bottom: 12px; min-height: 40px; }
.fts-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fts-switch-ui { position: relative; width: 40px; height: 24px; border-radius: 999px; background: var(--s-border); transition: background .2s; flex-shrink: 0; }
.fts-switch-ui::after { content: ""; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: right .2s; }
.fts-switch input:checked + .fts-switch-ui { background: var(--s-accent); }
.fts-switch input:checked + .fts-switch-ui::after { right: 19px; }
.fts-switch input:focus-visible + .fts-switch-ui { outline: 3px solid rgba(124,58,237,.4); outline-offset: 2px; }
.fts-switch input:disabled + .fts-switch-ui { opacity: .5; }

/* نشان‌ها و تراشه‌ها */
.fts-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #f1f5f9; color: #475569; white-space: nowrap; }
.fts-badge.green { background: #ecfdf5; color: var(--s-ok); } .fts-badge.amber { background: #fffbeb; color: #b45309; }
.fts-badge.red { background: #fef2f2; color: var(--s-bad); } .fts-badge.gray { background: #f1f5f9; color: #64748b; }
[data-theme="dark"] .fts .fts-badge { background: rgba(255,255,255,.07); }
.fts-chips, .fts-subchips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.fts-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--s-border); background: var(--s-surface); color: var(--s-text-2); border-radius: 999px;
  padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; }
.fts-chip:hover { border-color: color-mix(in srgb, var(--s-accent) 40%, var(--s-border)); color: var(--s-accent); }
.fts-chip small { font-size: 10.5px; color: var(--s-text-3); }
.fts-chip.muted { opacity: .6; }
.fts-chip.vlog { background: #f3efff; color: #6d28d9; border-color: transparent; cursor: default; }
.fts-chip.music { background: #fdf2f8; color: #be185d; border-color: transparent; cursor: default; }
.fts-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #f59e0b; color: #fff; font-size: 11px; font-weight: 900; display: inline-grid; place-items: center; }

.fts-note { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.8; padding: 8px 12px; border-radius: 12px; background: var(--s-accent-bg); color: var(--s-text-2); margin: 8px 0; }
.fts-note.warn { background: #fffbeb; color: #92400e; }
[data-theme="dark"] .fts .fts-note.warn { background: rgba(245,158,11,.12); color: #fcd34d; }

.fts-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-left-color: transparent; animation: fts-rot .7s linear infinite; display: inline-block; }
@keyframes fts-rot { to { transform: rotate(360deg); } }

/* ── سربرگ ── */
.fts-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 20px; border-radius: 22px; margin-bottom: 14px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(110% 160% at 100% 0%, #a855f7 0%, #7c3aed 40%, #3b0764 100%); box-shadow: 0 18px 36px -24px rgba(76,29,149,.9); }
.fts-head::after { content: ""; position: absolute; inset: auto auto -80px -40px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none; }
.fts-head-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 27px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); flex-shrink: 0; }
.fts-head-txt { flex: 1 1 280px; min-width: 0; position: relative; z-index: 1; }
.fts-head h1 { margin: 0; font-size: 21px; font-weight: 900; }
.fts-head p { margin: 4px 0 0; font-size: 12.5px; opacity: .88; line-height: 1.8; }
.fts-head-acts { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 2; }
.fts-head .fts-btn { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.26); color: #fff; }
.fts-head .fts-btn:hover { background: rgba(255,255,255,.24); }
.fts-head .fts-btn.primary { background: #fff; color: var(--s-accent-2); border-color: #fff; box-shadow: none; }

.fts-menu { position: relative; }
.fts-menu-bg { position: fixed; inset: 0; z-index: 50; }
.fts-menu-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 51; min-width: 220px; padding: 6px; border-radius: 14px; background: var(--s-surface); color: var(--s-text);
  border: 1px solid var(--s-border); box-shadow: 0 18px 40px rgba(15,23,42,.18); display: flex; flex-direction: column; animation: fts-in .14s ease; }
.fts-menu-list button { display: flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: inherit; padding: 9px 10px; border-radius: 10px; cursor: pointer; text-align: right; }
.fts-menu-list button i { font-size: 18px; color: var(--s-accent); }
.fts-menu-list button:hover { background: var(--s-accent-bg); }
@keyframes fts-in { from { opacity: 0; } to { opacity: 1; } }

/* ── زبانه‌ها ── */
.fts-tabs { position: sticky; top: 0; z-index: 20; display: flex; gap: 4px; padding: 6px; margin-bottom: 14px; border-radius: 16px; background: color-mix(in srgb, var(--s-surface) 92%, transparent);
  border: 1px solid var(--s-border); box-shadow: var(--s-shadow); overflow-x: auto; scrollbar-width: none; backdrop-filter: blur(8px); }
.fts-tabs::-webkit-scrollbar { display: none; }
.fts-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 9px 14px; border-radius: 11px; font: inherit; font-size: 13px; font-weight: 800;
  color: var(--s-text-2); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.fts-tab i { font-size: 17px; }
.fts-tab:hover:not(.on) { background: var(--s-bg); color: var(--s-text); }
.fts-tab.on { background: var(--s-accent); color: #fff; box-shadow: 0 6px 14px -8px var(--s-accent); }
.fts-tab.on .fts-count { background: #fff; color: var(--s-accent); }

/* ── پنل‌ها، فهرست‌ها، حالت‌ها ── */
.fts-panel { min-width: 0; }
.fts-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.fts-list { display: flex; flex-direction: column; gap: 8px; transition: opacity .15s; }
.is-busy { opacity: .6; pointer-events: none; }
.fts-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--s-radius); background: var(--s-surface); border: 1px solid var(--s-border); box-shadow: var(--s-shadow); transition: border-color .15s; }
.fts-row:hover { border-color: color-mix(in srgb, var(--s-accent) 30%, var(--s-border)); }
.fts-thumb { position: relative; flex-shrink: 0; width: 96px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(135deg, #ede9fe, #fce7f3); display: grid; place-items: center; color: #8b5cf6; font-size: 24px; }
.fts-thumb.sq { width: 60px; aspect-ratio: 1; }
.fts-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.fts-thumb-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(15,23,42,.45); color: #fff; font-size: 22px; opacity: 0; transition: opacity .15s; }
.fts-thumb:hover .fts-thumb-play, .fts-thumb:focus-visible .fts-thumb-play { opacity: 1; }
[data-theme="dark"] .fts .fts-thumb { background: linear-gradient(135deg, #2e1065, #500724); color: #c4b5fd; }
.fts-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fts-row-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fts-row-title b { font-size: 13.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.fts-row-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--s-text-3); }
.fts-row-meta span { display: inline-flex; align-items: center; gap: 3px; }
.fts-row-acts { display: flex; gap: 6px; flex-shrink: 0; }

.fts-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 40px 16px; border-radius: var(--s-radius);
  background: var(--s-surface); border: 1px dashed var(--s-border); color: var(--s-text-2); }
.fts-empty > i { font-size: 40px; color: #c4b5fd; }
.fts-empty b { font-size: 13.5px; }
.fts-empty.sm { padding: 20px 10px; }
.fts-empty.sm > i { font-size: 28px; }
.fts-empty.flat { border: 0; background: transparent; padding: 18px 8px; }

.fts-skel { border-radius: 14px; background: linear-gradient(90deg, var(--s-bg), var(--s-surface-2), var(--s-bg)); background-size: 200% 100%; animation: fts-sh 1.2s infinite; }
.fts-skel.row { height: 74px; } .fts-skel.cat { height: 52px; margin-bottom: 6px; } .fts-skel.line { height: 40px; margin-bottom: 8px; } .fts-skel.tile { height: 112px; }
@keyframes fts-sh { to { background-position: -200% 0; } }

/* ── صفِ بررسی ── */
.fts-review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; transition: opacity .15s; }
.fts-review { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--s-surface); border: 1px solid var(--s-border); box-shadow: var(--s-shadow); }
.fts-review-media { background: #0f0f14; }
.fts-review-media video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.fts-review-audio { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px; min-height: 160px; color: #fff;
  background: linear-gradient(135deg, #ec4899, #7e22ce); overflow: hidden; }
.fts-review-audio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.fts-review-audio > i { position: relative; font-size: 40px; opacity: .9; }
.fts-review-audio audio { position: relative; width: 100%; }
.fts-review-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fts-review-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fts-review-title { font-size: 14.5px; font-weight: 900; }
.fts-review-desc { margin: 2px 0; font-size: 12.5px; line-height: 1.9; color: var(--s-text-2); white-space: pre-line; overflow-wrap: anywhere; }
.fts-review-acts { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; }
.fts-review-acts .fts-btn { flex: 1; }

/* ── مودال ── */
.fts-modal-bg { position: fixed; inset: 0; z-index: 9000; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fts-in .15s ease; }
.fts-modal { width: min(860px, 100%); max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; background: var(--s-surface); color: var(--s-text); border-radius: 22px; padding: 18px 18px 0;
  box-shadow: 0 30px 70px rgba(0,0,0,.3); direction: rtl; }
.fts-modal.sm { width: min(560px, 100%); }
.fts-modal-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.fts-modal-h h3 { margin: 0; font-size: 16px; font-weight: 900; display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.fts-modal-h h3 i { color: var(--s-accent); }
.fts-modal-f { position: sticky; bottom: 0; display: flex; justify-content: flex-start; gap: 8px; padding: 12px 0 16px; margin-top: 6px; background: var(--s-surface); border-top: 1px solid var(--s-border); flex-direction: row-reverse; }
.fts-preview-video { display: block; width: 100%; max-height: 62vh; border-radius: 14px; background: #000; margin-bottom: 16px; }
.fts-preview-audio { display: block; width: 100%; margin-bottom: 16px; }

/* ── رنگ‌هایِ دسته (مشترک بینِ کاشی، آیکن، سربرگ) ── */
.fts .c-violet { --a: #8b5cf6; --b: #5b21b6; } .fts .c-indigo { --a: #6366f1; --b: #3730a3; } .fts .c-sky { --a: #38bdf8; --b: #0369a1; }
.fts .c-teal { --a: #14b8a6; --b: #0f766e; } .fts .c-emerald { --a: #10b981; --b: #047857; } .fts .c-amber { --a: #f59e0b; --b: #b45309; }
.fts .c-rose { --a: #f43f5e; --b: #9f1239; } .fts .c-slate { --a: #64748b; --b: #334155; }

.fts-tile-ic { --a: #7c3aed; --b: #4c1d95; position: relative; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; overflow: hidden; flex-shrink: 0;
  color: #fff; font-size: 22px; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 8px 16px -10px var(--b); }
.fts-tile-ic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.fts-tile-ic.sm { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; }
.fts-tile-ic.lg { width: 64px; height: 64px; border-radius: 18px; font-size: 32px; }
.fts-cat-head .fts-tile-ic { --a: inherit; --b: inherit; }

.fts-tile { --a: #7c3aed; --b: #4c1d95; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 18px; min-height: 112px; overflow: hidden;
  background: var(--s-surface); border: 1px solid var(--s-border); }
.fts-tile::after { content: ""; position: absolute; inset: auto -30px -40px auto; width: 110px; height: 110px; border-radius: 50%; background: var(--a); opacity: .08; }
.fts-tile .fts-tile-ic { --a: inherit; --b: inherit; }
.fts-tile b { font-size: 14px; font-weight: 900; margin-top: 6px; }
.fts-tile small { font-size: 11.5px; color: var(--s-text-3); }
.fts-tile.muted { opacity: .55; filter: grayscale(.5); }
.fts-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }

/* ── دسته‌ها و رسانه‌ها ── */
.fts-catalog { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.fts-cat-side { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 18px; background: var(--s-surface); border: 1px solid var(--s-border);
  box-shadow: var(--s-shadow); max-height: calc(100vh - 90px); overflow: hidden; }
.fts-cat-side-h { display: flex; gap: 8px; align-items: center; }
.fts-tree { list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.fts-tree-item { position: relative; display: flex; align-items: center; border-radius: 12px; transition: background .15s; }
.fts-tree-item:hover { background: var(--s-bg); }
.fts-tree-item.on { background: var(--s-accent-bg); }
.fts-tree-item.on::before { content: ""; position: absolute; right: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--s-accent); }
.fts-tree-item.child { margin-right: 18px; }
.fts-tree-item.child::after { content: ""; position: absolute; right: -10px; top: 0; bottom: 50%; width: 8px; border-right: 1.5px solid var(--s-border); border-bottom: 1.5px solid var(--s-border); border-bottom-right-radius: 6px; }
.fts-tree-item.muted .fts-tree-btn { opacity: .55; }
.fts-tree-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 7px 8px; font: inherit; color: inherit; text-align: right; cursor: pointer; border-radius: 12px; }
.fts-tree-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fts-tree-txt b { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fts-tree-txt small { font-size: 11px; color: var(--s-text-3); }
.fts-tree-flag { color: var(--s-text-3); font-size: 15px; }
.fts-tree-order { display: flex; flex-direction: column; opacity: 0; transition: opacity .15s; padding-left: 4px; }
.fts-tree-item:hover .fts-tree-order, .fts-tree-item.on .fts-tree-order, .fts-tree-order:focus-within { opacity: 1; }

.fts-cat-main { min-width: 0; }
.fts-cat-head { --a: #7c3aed; --b: #4c1d95; display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; padding: 16px; border-radius: 18px; margin-bottom: 12px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--a) 12%, var(--s-surface)), var(--s-surface) 70%); border: 1px solid color-mix(in srgb, var(--a) 22%, var(--s-border)); }
.fts-cat-head-txt { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fts-cat-head h2 { margin: 0; font-size: 19px; font-weight: 900; overflow-wrap: anywhere; }
.fts-cat-head p { margin: 0; }
.fts-cat-head-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fts-crumb { align-self: flex-start; border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 800; color: var(--s-text-3); cursor: pointer; display: inline-flex; align-items: center; gap: 2px; }
.fts-crumb:hover { color: var(--s-accent); }

/* ویرایشگرِ دسته */
.fts-editor { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; }
.fts-editor-preview { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: var(--s-bg); }
.fts-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.fts-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--s-surface); cursor: pointer; background: linear-gradient(135deg, var(--a, #ddd), var(--b, #aaa));
  box-shadow: 0 0 0 1px var(--s-border); transition: transform .12s, box-shadow .12s; display: grid; place-items: center; color: var(--s-text-2); }
.fts-swatch.auto { background: var(--s-bg); }
.fts-swatch:hover { transform: scale(1.08); }
.fts-swatch.on { box-shadow: 0 0 0 2px var(--s-surface), 0 0 0 4px var(--s-accent); }
.fts-iconpick { border: 1px solid var(--s-border); border-radius: 14px; padding: 10px; background: var(--s-surface-2); }
.fts-iconpick-top { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.fts-iconpick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; max-height: 180px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.fts-iconpick-grid button { aspect-ratio: 1; border: 1px solid transparent; background: var(--s-surface); border-radius: 10px; font-size: 20px; color: var(--s-text-2); cursor: pointer; display: grid; place-items: center; transition: all .12s; }
.fts-iconpick-grid button:hover { color: var(--s-accent); border-color: var(--s-border); }
.fts-iconpick-grid button.on { background: var(--s-accent); color: #fff; }

/* ── پیشخوان ── */
.fts-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.fts-kpi { --a: #7c3aed; position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: right;
  padding: 14px; border-radius: 18px; border: 1px solid var(--s-border); background: var(--s-surface); color: var(--s-text); font: inherit; cursor: pointer; box-shadow: var(--s-shadow); transition: transform .15s, border-color .15s; }
.fts-kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--a) 45%, var(--s-border)); }
.fts-kpi.violet { --a: #8b5cf6; } .fts-kpi.rose { --a: #ec4899; } .fts-kpi.amber { --a: #f59e0b; } .fts-kpi.sky { --a: #0ea5e9; } .fts-kpi.teal { --a: #14b8a6; } .fts-kpi.slate { --a: #64748b; }
.fts-kpi-ic { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; color: var(--a); background: color-mix(in srgb, var(--a) 13%, transparent); }
.fts-kpi-n { font-size: 22px; font-weight: 900; line-height: 1.2; }
.fts-kpi-l { font-size: 11.5px; color: var(--s-text-3); font-weight: 700; }
.fts-kpi.pulse .fts-kpi-ic { animation: fts-pulse 2s ease-in-out infinite; }
@keyframes fts-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--a) 15%, transparent); } }

.fts-ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fts-card { padding: 14px 16px; border-radius: 18px; background: var(--s-surface); border: 1px solid var(--s-border); box-shadow: var(--s-shadow); min-width: 0; }
.fts-card.span2 { grid-column: 1 / -1; }
.fts-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.fts-card-h h2 { margin: 0; font-size: 14.5px; font-weight: 900; display: flex; align-items: center; gap: 6px; }
.fts-card-h h2 i { color: var(--s-accent); }
.fts-mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fts-mini-list li { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; }
.fts-mini-list li + li { border-top: 1px solid var(--s-border); }
.fts-mini-list li > i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--s-accent-bg); color: var(--s-accent); font-size: 16px; flex-shrink: 0; }
.fts-mini-list span { display: flex; flex-direction: column; min-width: 0; }
.fts-mini-list b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fts-mini-list small { font-size: 11px; color: var(--s-text-3); }
.fts-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fts-quick > button, .fts-quick > a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border-radius: 14px; border: 1px solid var(--s-border); background: var(--s-surface-2);
  font: inherit; font-size: 12px; font-weight: 800; color: var(--s-text); cursor: pointer; text-align: center; transition: transform .15s, border-color .15s; }
.fts-quick > :is(button, a):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--s-accent) 35%, var(--s-border)); }

/* ── واکنش‌گرا ── */
@media (max-width: 960px) {
  .fts-catalog { grid-template-columns: 1fr; }
  .fts-cat-side { position: static; max-height: none; }
  .fts-tree { max-height: 320px; }
  .fts-tree-order { opacity: 1; }
  .fts-editor { grid-template-columns: 1fr; }
  .fts-editor-preview { position: static; order: -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .fts-editor-preview .fts-tile { flex: 1 1 200px; }
  .fts-ov-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fts { padding: 0 0 32px; }
  .fts-head { padding: 14px; border-radius: 18px; }
  .fts-head-ic { width: 42px; height: 42px; font-size: 22px; }
  .fts-head h1 { font-size: 18px; }
  .fts-head-acts { width: 100%; }
  .fts-head-acts > * { flex: 1; }
  .fts-head-acts .fts-btn { width: 100%; }
  .fts-menu-list { left: auto; right: 0; }
  .fts-tab span { font-size: 12px; }
  .fts-grid2 { grid-template-columns: 1fr; }
  .fts-row { flex-wrap: wrap; }
  .fts-row-main { flex-basis: calc(100% - 110px); }
  .fts-row-acts { width: 100%; justify-content: flex-end; border-top: 1px solid var(--s-border); padding-top: 8px; }
  .fts-thumb { width: 84px; }
  .fts-review-grid { grid-template-columns: 1fr; }
  .fts-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fts-modal-bg { padding: 0; align-items: flex-end; }
  .fts-modal, .fts-modal.sm { width: 100%; max-height: 94vh; border-radius: 22px 22px 0 0; }
  .fts-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fts-kpi { padding: 12px; }
  .fts-kpi-n { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .fts *, .fts *::before, .fts *::after { animation: none !important; transition: none !important; }
}