@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-emoji/emoji-0.woff2') format('woff2');
  unicode-range: U+1f1e6-1f1ff;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-emoji/emoji-1.woff2') format('woff2');
  unicode-range: U+200d,U+2620,U+26a7,U+fe0f,U+1f308,U+1f38c,U+1f3c1,U+1f3f3-1f3f4,U+1f6a9,U+e0062-e0063,U+e0065,U+e0067,U+e006c,U+e006e,U+e0073-e0074,U+e0077,U+e007f;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-emoji/emoji-2.woff2') format('woff2');
  unicode-range: U+23,U+2a,U+30-39,U+a9,U+ae,U+200d,U+203c,U+2049,U+20e3,U+2122,U+2139,U+2194-2199,U+21a9-21aa,U+23cf,U+23e9-23ef,U+23f8-23fa,U+24c2,U+25aa-25ab,U+25b6,U+25c0,U+25fb-25fe,U+2611,U+2622-2623,U+2626,U+262a,U+262e-262f,U+2638,U+2640,U+2642,U+2648-2653,U+2660,U+2663,U+2665-2666,U+2668,U+267b,U+267e-267f,U+2695,U+269b-269c,U+26a0,U+26a7,U+26aa-26ab,U+26ce,U+26d4,U+2705,U+2714,U+2716,U+271d,U+2721,U+2733-2734,U+2747,U+274c,U+274e,U+2753-2755,U+2757,U+2764,U+2795-2797,U+27a1,U+27b0,U+27bf,U+2934-2935,U+2b05-2b07,U+2b1b-2b1c,U+2b55,U+3030,U+303d,U+3297,U+3299,U+fe0f,U+1f170-1f171,U+1f17e-1f17f,U+1f18e,U+1f191-1f19a,U+1f201-1f202,U+1f21a,U+1f22f,U+1f232-1f23a,U+1f250-1f251,U+1f310,U+1f3a6,U+1f3b5-1f3b6,U+1f3bc,U+1f3e7,U+1f441,U+1f499-1f49c,U+1f49f-1f4a0,U+1f4ac-1f4ad,U+1f4b1-1f4b2,U+1f4b9,U+1f4db,U+1f4f2-1f4f6,U+1f500-1f507,U+1f515,U+1f518-1f524,U+1f52f-1f53d,U+1f549,U+1f54e,U+1f5a4,U+1f5e8,U+1f5ef,U+1f6ab,U+1f6ad-1f6b1,U+1f6b3,U+1f6b7-1f6bc,U+1f6be,U+1f6c2-1f6c5,U+1f6d0,U+1f6d1,U+1f6d7,U+1f6dc,U+1f7e0-1f7eb,U+1f7f0,U+1f90d-1f90e,U+1f9d1-1f9d2,U+1f9e1,U+1fa75-1fa77,U+1faaf;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-emoji/emoji-3.woff2') format('woff2');
  unicode-range: U+200d,U+231a-231b,U+2328,U+23f0-23f3,U+2602,U+260e,U+2692,U+2694,U+2696-2697,U+2699,U+26b0-26b1,U+26cf,U+26d1,U+26d3,U+2702,U+2709,U+270f,U+2712,U+fe0f,U+1f302,U+1f321,U+1f392-1f393,U+1f3a9,U+1f3bd,U+1f3ee,U+1f3f7,U+1f3fa,U+1f451-1f462,U+1f484,U+1f489-1f48a,U+1f48c-1f48e,U+1f4a1,U+1f4a3,U+1f4a5,U+1f4b0,U+1f4b3-1f4b8,U+1f4bb-1f4da,U+1f4dc-1f4f1,U+1f4ff,U+1f508-1f514,U+1f516-1f517,U+1f526-1f529,U+1f52c-1f52e,U+1f550-1f567,U+1f56f-1f570,U+1f576,U+1f587,U+1f58a-1f58d,U+1f5a5,U+1f5a8,U+1f5b1-1f5b2,U+1f5c2-1f5c4,U+1f5d1-1f5d3,U+1f5dc-1f5de,U+1f5e1,U+1f5f3,U+1f6aa,U+1f6ac,U+1f6bd,U+1f6bf,U+1f6c1,U+1f6cb,U+1f6cd-1f6cf,U+1f6d2,U+1f6e0-1f6e1,U+1f6f0,U+1f97b-1f97f,U+1f9af,U+1f9ba,U+1f9e2-1f9e6,U+1f9ea-1f9ec,U+1f9ee-1f9f4,U+1f9f7-1f9ff,U+1fa71-1fa74,U+1fa79-1fa7b,U+1fa86,U+1fa8e-1fa8f,U+1fa91-1fa93,U+1fa96,U+1fa99-1faa0,U+1faa2-1faa7,U+1faaa-1faae;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-emoji/emoji-4.woff2') format('woff2');
  unicode-range: U+265f,U+26bd-26be,U+26f3,U+26f8,U+fe0f,U+1f004,U+1f0cf,U+1f380-1f384,U+1f386-1f38b,U+1f38d-1f391,U+1f396-1f397,U+1f399-1f39b,U+1f39e-1f39f,U+1f3a3-1f3a5,U+1f3a7-1f3a9,U+1f3ab-1f3b4,U+1f3b7-1f3bb,U+1f3bd-1f3c0,U+1f3c5-1f3c6,U+1f3c8-1f3c9,U+1f3cf-1f3d3,U+1f3f8-1f3f9,U+1f47e,U+1f4e2,U+1f4f7-1f4fd,U+1f52b,U+1f579,U+1f58c-1f58d,U+1f5bc,U+1f6f7,U+1f6f9,U+1f6fc,U+1f93f,U+1f941,U+1f945,U+1f947-1f94f,U+1f9e7-1f9e9,U+1f9f5-1f9f6,U+1fa70-1fa71,U+1fa80-1fa81,U+1fa83-1fa85,U+1fa87-1fa8a,U+1fa94-1fa95,U+1fa97-1fa98,U+1faa1,U+1faa9,U+1fadf;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-emoji/emoji-5.woff2') format('woff2');
  unicode-range: U+2693,U+26e9-26ea,U+26f1-26f2,U+26f4-26f5,U+26fa,U+26fd,U+2708,U+fe0f,U+1f301,U+1f303,U+1f306-1f307,U+1f309,U+1f310,U+1f3a0-1f3a2,U+1f3aa,U+1f3cd-1f3ce,U+1f3d5,U+1f3d7-1f3db,U+1f3df-1f3e6,U+1f3e8-1f3ed,U+1f3ef-1f3f0,U+1f488,U+1f492,U+1f4ba,U+1f54b-1f54d,U+1f5fa-1f5ff,U+1f680-1f6a2,U+1f6a4-1f6a8,U+1f6b2,U+1f6d1,U+1f6d5-1f6d6,U+1f6dd-1f6df,U+1f6e2-1f6e5,U+1f6e9,U+1f6eb-1f6ec,U+1f6f3-1f6f6,U+1f6f8,U+1f6fa-1f6fb,U+1f9bc-1f9bd,U+1f9ed,U+1f9f3,U+1fa7c;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-emoji/emoji-6.woff2') format('woff2');
  unicode-range: U+200d,U+2615,U+fe0f,U+1f32d-1f330,U+1f336,U+1f33d,U+1f344-1f37f,U+1f382,U+1f52a,U+1f7e9,U+1f7eb,U+1f942-1f944,U+1f950-1f96f,U+1f99e,U+1f9aa,U+1f9c0-1f9cb,U+1fad0-1fadc;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-emoji/emoji-7.woff2') format('woff2');
  unicode-range: U+200d,U+2600-2601,U+2603-2604,U+2614,U+2618,U+26a1,U+26c4-26c5,U+26c8,U+26f0,U+2728,U+2744,U+2b1b,U+2b50,U+fe0f,U+1f300,U+1f304-1f305,U+1f308,U+1f30a-1f30f,U+1f311-1f321,U+1f324-1f32c,U+1f331-1f335,U+1f337-1f33c,U+1f33e-1f344,U+1f3d4,U+1f3d6,U+1f3dc-1f3de,U+1f3f5,U+1f400-1f43f,U+1f490,U+1f4a7,U+1f4ae,U+1f525,U+1f54a,U+1f573,U+1f577-1f578,U+1f648-1f64a,U+1f6d8,U+1f940,U+1f980-1f9ae,U+1f9ba,U+1fa90,U+1faa8,U+1fab0-1fabf,U+1facd-1facf,U+1fae7;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-emoji/emoji-8.woff2') format('woff2');
  unicode-range: U+200d,U+2640,U+2642,U+2695-2696,U+26f7,U+26f9,U+2708,U+2764,U+27a1,U+fe0f,U+1f33e,U+1f373,U+1f37c,U+1f384-1f385,U+1f393,U+1f3a4,U+1f3a8,U+1f3c2-1f3c4,U+1f3c7,U+1f3ca-1f3cc,U+1f3eb,U+1f3ed,U+1f3fb-1f3ff,U+1f430,U+1f466-1f469,U+1f46b-1f478,U+1f47c,U+1f481-1f483,U+1f486-1f487,U+1f48b,U+1f48f,U+1f491,U+1f4bb-1f4bc,U+1f527,U+1f52c,U+1f574-1f575,U+1f57a,U+1f645-1f647,U+1f64b,U+1f64d-1f64e,U+1f680,U+1f692,U+1f6a3,U+1f6b4-1f6b6,U+1f6c0,U+1f6cc,U+1f91d,U+1f926,U+1f930-1f931,U+1f934-1f93a,U+1f93c-1f93e,U+1f977,U+1f9af-1f9b3,U+1f9b8-1f9b9,U+1f9bc-1f9bd,U+1f9cc-1f9cf,U+1f9d1-1f9df,U+1fa70,U+1fa82,U+1fac3-1fac5,U+1fac8,U+1faef;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-emoji/emoji-9.woff2') format('woff2');
  unicode-range: U+200d,U+2194-2195,U+2603,U+261d,U+2620,U+2639-263a,U+2665,U+26a1,U+26c4,U+270a-270d,U+2728,U+2763-2764,U+2b50,U+fe0f,U+1f31a-1f31f,U+1f32b,U+1f389-1f38a,U+1f3fb-1f3ff,U+1f440-1f450,U+1f463-1f465,U+1f479-1f47b,U+1f47d-1f480,U+1f485,U+1f48b-1f48c,U+1f493-1f49f,U+1f4a2,U+1f4a4-1f4a6,U+1f4a8-1f4ab,U+1f4af,U+1f525,U+1f573,U+1f590,U+1f595-1f596,U+1f5a4,U+1f5e3,U+1f600-1f644,U+1f648-1f64a,U+1f64c,U+1f64f,U+1f90c-1f925,U+1f927-1f92f,U+1f932-1f933,U+1f970-1f976,U+1f978-1f97a,U+1f9a0,U+1f9b4-1f9b7,U+1f9bb,U+1f9be-1f9bf,U+1f9d0,U+1f9e0-1f9e1,U+1fa75-1fa79,U+1fac0-1fac2,U+1fac6,U+1fae0-1fae6,U+1fae8-1faea,U+1faef-1fafa;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-emoji/emoji-10.woff2') format('woff2');
  unicode-range: U+1f6d9,U+1fa8b-1fa8d,U+1facc,U+1fadd,U+1faeb;
}

:root {
  --ft-bg: #151515;
  --ft-surface: #2a2a2a;
  --ft-surface-2: #1f1f1f;
  --ft-text: #dededd;
  --ft-text-2: #a0a0a0;
  --ft-accent: #3a82ff;
  --ft-accent-2: #70f9b8;
  --ft-danger: #f04438;
  --ft-border: rgba(255, 255, 255, 0.1);
  --ft-hover: rgba(255, 255, 255, 0.08);
  --ft-overlay: rgba(21, 21, 21, 0.95);
  --ft-radius: 15px;
  --ft-sidebar: 260px;
  --ft-toolbar: 64px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--ft-accent) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--ft-accent);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: #5c97ff;
}

.mahfel-chat-bubble,
.mahfel-chat-pinned-body,
.mahfel-chat-input input,
.ft-compact-input,
.ft-emoji-picker,
.ft-popup-emoji,
.ft-reaction {
  font-family: 'Noto Color Emoji', Vazirmatn, Tahoma, "Segoe UI", "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
}

/* قالب styles.min.css به همهٔ h1..h6 رنگ --default-text-color (سرمه‌ای تیره) می‌دهد که روی
   سطح‌های تیرهٔ محفل دیده نمی‌شود — این‌جا رنگ تیتر داخل کانتینرهای تیره اصلاح می‌شود.
   این بلاک عمداً اول فایل است تا رنگ‌های اختصاصیِ بعدی با specificity برابر همچنان ببرند. */
.mahfel-room :is(h1, h2, h3, h4, h5, h6),
.mahfel-modal :is(h1, h2, h3, h4, h5, h6),
.mahfel-join-card :is(h1, h2, h3, h4, h5, h6),
.mahfel-loadtest-card :is(h1, h2, h3, h4, h5, h6),
.ft-pay :is(h1, h2, h3, h4, h5, h6),
.ft-landing :is(h1, h2, h3, h4, h5, h6),
.ft-landing-empty :is(h1, h2, h3, h4, h5, h6),
.ft-explore :is(h1, h2, h3, h4, h5, h6),
.ft-share-page :is(h1, h2, h3, h4, h5, h6),
.pv-page :is(h1, h2, h3, h4, h5, h6),
.ph-page :is(h1, h2, h3, h4, h5, h6) {
  color: var(--ft-text);
}

/* مودال‌هایی که در پنل به‌صورت روشن re-skin شده‌اند — رنگ قالب حفظ می‌شود */
.valex-shell .mahfel-modal-content.reg-detail :is(h1, h2, h3, h4, h5, h6),
.valex-shell .bill-modal :is(h1, h2, h3, h4, h5, h6),
.ticket-create-modal :is(h1, h2, h3, h4, h5, h6) {
  color: var(--default-text-color);
}

.mahfel-room {
  position: fixed;
  inset: 0;
  background: var(--ft-bg);
  color: var(--ft-text);
  font-family: Vazirmatn, Tahoma, "Segoe UI", sans-serif;
  direction: rtl;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mahfel-join-page {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow: auto;
  direction: ltr;
  background:
    radial-gradient(640px 420px at 82% 8%, rgba(58, 130, 255, 0.18), transparent 60%),
    radial-gradient(520px 420px at 12% 88%, rgba(112, 249, 184, 0.08), transparent 60%),
    radial-gradient(400px 300px at 50% 50%, rgba(58, 130, 255, 0.05), transparent 70%),
    var(--ft-bg);
}

.mahfel-join-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
  justify-content: center;
  width: min(1100px, 100%);
  direction: rtl;
}

.mahfel-join-card {
  width: 400px;
  max-width: 94vw;
  background: rgba(42, 42, 42, 0.85);
  backdrop-filter: blur(14px);
  border: 1px solid var(--ft-border);
  border-radius: 20px;
  padding: 36px 32px 28px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.mahfel-loadtest-card {
  flex: 1 1 520px;
  max-width: min(640px, 96vw);
  max-height: min(92vh, 900px);
  overflow: auto;
  background: rgba(42, 42, 42, 0.85);
  backdrop-filter: blur(14px);
  border: 1px solid var(--ft-border);
  border-radius: 20px;
  padding: 22px 20px 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.ft-loadtest-modes {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.ft-loadtest-modes button {
  flex: 1;
  border: 1px solid var(--ft-border);
  background: var(--ft-surface-2);
  color: var(--ft-text-2);
  border-radius: 10px;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.ft-loadtest-modes button.sel {
  border-color: var(--ft-accent);
  background: rgba(58, 130, 255, 0.16);
  color: #fff;
}

.ft-loadtest-modes button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ft-loadtest-section-title {
  margin: 12px 0 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ft-text-2);
  letter-spacing: 0.02em;
}

.ft-loadtest-hint {
  margin: 0 0 10px;
  font-size: 0.76rem;
  color: var(--ft-text-2);
  line-height: 1.5;
}

.ft-loadtest-checks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 8px;
}

.ft-loadtest-textarea {
  width: 100%;
  background: var(--ft-surface-2);
  border: 1px solid var(--ft-border);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--ft-text);
  outline: none;
  font-family: inherit;
  font-size: 0.82rem;
  resize: vertical;
  min-height: 72px;
}

.ft-loadtest-textarea:focus {
  border-color: var(--ft-accent);
  box-shadow: 0 0 0 3px rgba(58, 130, 255, 0.15);
}

.ft-loadtest-page {
  align-items: flex-start;
  padding-top: 24px;
  padding-bottom: 32px;
}

.ft-loadtest-standalone {
  width: min(760px, 96vw);
  max-width: 760px;
  flex: none;
  max-height: none;
}

.ft-loadtest-standalone a {
  color: #9ec1ff;
}

.ft-loadtest-cmd {
  margin: 10px 0 0;
  max-height: 90px;
  overflow: auto;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(25, 113, 255, 0.1);
  border: 1px dashed rgba(58, 130, 255, 0.35);
  color: #9ec1ff;
  font-size: 0.68rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.ft-loadtest-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.ft-loadtest-head h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
}

.ft-loadtest-head p {
  margin: 0;
  color: var(--ft-text-2);
  font-size: 0.78rem;
  line-height: 1.55;
}

.ft-loadtest-badge {
  flex-shrink: 0;
  font-size: 0.72rem;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--ft-border);
  color: var(--ft-text-2);
}

.ft-loadtest-badge.running {
  border-color: rgba(112, 249, 184, 0.45);
  background: rgba(112, 249, 184, 0.12);
  color: #70f9b8;
}

.ft-loadtest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}

.ft-loadtest-grid .mahfel-field { margin-bottom: 0; }

.ft-loadtest-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 10px;
  font-size: 0.82rem;
  color: var(--ft-text-2);
  cursor: pointer;
  user-select: none;
}

.ft-loadtest-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--ft-accent);
}

.ft-loadtest-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.ft-loadtest-preset {
  border: 1px solid var(--ft-border);
  background: var(--ft-surface-2);
  color: var(--ft-text-2);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 0.74rem;
  font-family: inherit;
  cursor: pointer;
}

.ft-loadtest-preset:hover:not(:disabled) {
  border-color: rgba(58, 130, 255, 0.55);
  color: #fff;
}

.ft-loadtest-preset.sel {
  border-color: var(--ft-accent);
  background: rgba(58, 130, 255, 0.2);
  color: #fff;
}

.ft-loadtest-preset:disabled { opacity: 0.45; cursor: not-allowed; }

.ft-loadtest-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ft-loadtest-start { margin-top: 4px; }

.ft-loadtest-stop {
  margin-top: 4px;
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  box-shadow: 0 6px 22px rgba(231, 76, 60, 0.35);
}

.ft-loadtest-refresh {
  border: 1px solid var(--ft-border);
  background: transparent;
  color: var(--ft-text-2);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  margin-top: 4px;
}

.ft-loadtest-ok {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: #70f9b8;
  line-height: 1.5;
}

.ft-loadtest-error {
  margin: 12px 0 0;
  font-size: 0.82rem;
  color: var(--ft-danger);
  text-align: center;
}

.ft-loadtest-log {
  margin: 10px 0 0;
  max-height: 110px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--ft-border);
  color: var(--ft-text-2);
  font-size: 0.7rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.mahfel-join-logo {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  box-shadow: 0 8px 28px rgba(37, 99, 235, 0.4);
}

.mahfel-join-card h2 {
  text-align: center;
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.mahfel-join-subtitle {
  text-align: center;
  color: var(--ft-text-2);
  font-size: 0.85rem;
  margin: 0 0 26px;
}

.mahfel-field { margin-bottom: 16px; }

.mahfel-field > label {
  display: block;
  font-size: 0.8rem;
  color: var(--ft-text-2);
  margin-bottom: 7px;
}

.mahfel-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.mahfel-input-wrap > svg {
  position: absolute;
  right: 12px;
  opacity: 0.45;
  pointer-events: none;
}

.mahfel-input-wrap input,
.mahfel-input-wrap select {
  width: 100%;
  background: var(--ft-surface-2);
  border: 1px solid var(--ft-border);
  border-radius: 12px;
  padding: 12px 40px 12px 14px;
  color: var(--ft-text);
  outline: none;
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.mahfel-input-wrap input:focus,
.mahfel-input-wrap select:focus {
  border-color: var(--ft-accent);
  box-shadow: 0 0 0 3px rgba(58, 130, 255, 0.15);
}

.mahfel-input-wrap input::placeholder { color: var(--ft-text-2); }

.mahfel-roomcode-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.mahfel-roomcode-row .mahfel-input-wrap { flex: 1; }

.mahfel-invite-btn { flex: none; }

.mahfel-role-row { display: flex; gap: 10px; }

.mahfel-role-btn {
  flex: 1;
  padding: 12px 8px;
  border-radius: 12px;
  border: 1px solid var(--ft-border);
  background: var(--ft-surface-2);
  color: var(--ft-text-2);
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
}

.mahfel-role-btn:hover { border-color: rgba(58, 130, 255, 0.5); }

.mahfel-role-btn.selected {
  border-color: var(--ft-accent);
  color: #fff;
  background: rgba(58, 130, 255, 0.16);
}

.mahfel-join-mic {
  border-bottom: none;
  padding: 10px 4px 2px;
  color: var(--ft-text-2);
  font-size: 0.8rem;
}

.mahfel-join-hint {
  font-size: 0.74rem;
  color: var(--ft-text-2);
  margin: 2px 4px 0;
  opacity: 0.85;
}

/* ---------- تست تجهیزات پیش از ورود ---------- */
.mahfel-precheck { margin-bottom: 14px; }

.mahfel-precheck-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed var(--ft-border);
  background: transparent;
  color: var(--ft-text-2);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.mahfel-precheck-toggle:hover {
  border-color: rgba(58, 130, 255, 0.5);
  color: var(--ft-text);
}

.mahfel-precheck-toggle > span { flex: 1; text-align: start; }
.mahfel-precheck-toggle.open {
  border-style: solid;
  border-color: var(--ft-accent);
  color: var(--ft-text);
}

.mahfel-precheck-panel {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--ft-border);
  border-radius: 14px;
  background: var(--ft-surface-2);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.mahfel-precheck-panel .ft-cam-preview { margin-bottom: 0; }

.mahfel-precheck-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ft-text-2);
}

.mahfel-precheck-row > svg { flex: none; opacity: 0.6; }

.mahfel-precheck-row select {
  flex: 1;
  min-width: 0;
  background: var(--ft-surface);
  border: 1px solid var(--ft-border);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--ft-text);
  font-family: inherit;
  font-size: 0.8rem;
  outline: none;
}

.mahfel-precheck-row select:focus { border-color: var(--ft-accent); }

.mahfel-precheck-meter { margin: -2px 26px 0; }

.mahfel-netcheck {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--ft-border);
  border-radius: 10px;
  color: var(--ft-text-2);
  font-size: 0.73rem;
}

.mahfel-netcheck > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.mahfel-netcheck.excellent { border-color: rgba(34, 197, 94, 0.4); }
.mahfel-netcheck.good { border-color: rgba(234, 179, 8, 0.45); }
.mahfel-netcheck.poor,
.mahfel-netcheck.bad { border-color: rgba(240, 68, 56, 0.5); }

.mahfel-join-btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 13px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #1971ff, #3a82ff);
  box-shadow: 0 6px 22px rgba(25, 113, 255, 0.35);
  transition: transform 0.1s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.mahfel-join-btn:hover {
  box-shadow: 0 8px 30px rgba(25, 113, 255, 0.55);
  transform: translateY(-1px);
}

.mahfel-join-btn:active { transform: translateY(0); }

.mahfel-join-footer {
  text-align: center;
  color: var(--ft-text-2);
  font-size: 0.72rem;
  margin-top: 22px;
  opacity: 0.7;
}

/* سایدبار اطلاعات ورود در /room — فقط دسکتاپ */
.mahfel-join-side {
  position: relative;
  flex: 0 0 360px;
  max-width: min(360px, 40vw);
  min-height: 520px;
  max-height: min(720px, 92vh);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--ft-text);
  background:
    radial-gradient(420px 320px at 85% 10%, rgba(58, 130, 255, .3), transparent 60%),
    radial-gradient(320px 260px at 10% 90%, rgba(112, 249, 184, .14), transparent 60%),
    linear-gradient(160deg, #1d2333, #151515 70%);
  border: 1px solid var(--ft-border);
}
.mahfel-join-side-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.mahfel-join-side-in { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; padding: 30px 28px 24px; gap: 12px; }
.mahfel-join-side-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ft-text); text-decoration: none; font-size: 1.3rem; font-weight: 800; }
.mahfel-join-side-logo span { color: var(--ft-text); }
.mahfel-join-side-title { font-size: 1.35rem; font-weight: 800; line-height: 1.5; margin: 10px 0 0; color: var(--ft-text); }
.mahfel-join-side-msg { font-size: .85rem; color: var(--ft-text-2); line-height: 1.9; margin: 0; }
.mahfel-join-side-code { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--ft-border); color: var(--ft-text-2); font-size: .8rem; }
.mahfel-join-side-feats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.mahfel-join-side-feats span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--ft-border); color: var(--ft-text-2); font-size: .72rem; }
.mahfel-join-side-chips { display: flex; flex-direction: column; gap: 7px; }
.mahfel-join-side-chip { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: .78rem; line-height: 1.7; }
.mahfel-join-side-chip svg { flex-shrink: 0; margin-top: 3px; }
.mahfel-join-side-chip.ok { color: #8ef0c0; background: rgba(112,249,184,.07); border: 1px solid rgba(112,249,184,.22); }
.mahfel-join-side-chip.info { color: #9ec3ff; background: rgba(58,130,255,.09); border: 1px solid rgba(58,130,255,.28); }
.mahfel-join-side-chip.warn { color: #ffd08a; background: rgba(255,176,32,.09); border: 1px solid rgba(255,176,32,.28); }
.mahfel-join-side-chip.err { color: #fda29b; background: rgba(240,68,56,.09); border: 1px solid rgba(240,68,56,.3); }
.mahfel-join-side-qr { display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px dashed var(--ft-border); color: var(--ft-text-2); font-size: .72rem; line-height: 1.8; }
.mahfel-join-side-qr canvas { border-radius: 8px; flex-shrink: 0; width: 118px; height: 118px; }

@media (max-width: 760px) {
  .mahfel-join-side { display: none; }
  .mahfel-precheck { display: none; }
}

.mahfel-server-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ft-border);
  background: var(--ft-surface-2);
  color: var(--ft-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.mahfel-server-btn:hover {
  background: var(--ft-hover);
  border-color: rgba(58, 130, 255, 0.5);
}

.mahfel-server-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.mahfel-btn {
  border: 1px solid var(--ft-border);
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  direction: rtl;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ft-surface-2);
  color: var(--ft-text);
}

.mahfel-btn:hover {
  background: var(--ft-hover);
  border-color: rgba(0, 0, 0, 0.12);
}

.mahfel-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.mahfel-btn.sm {
  padding: 8px 16px;
  font-size: 0.85rem;
  border-radius: 10px;
  gap: 6px;
}

.mahfel-btn-primary {
  background: var(--ft-accent);
  border-color: transparent;
  color: #fff;
  width: 100%;
}

.mahfel-btn-primary:hover { background: #1d6ae0; border-color: transparent; }

.mahfel-btn-secondary {
  background: var(--ft-surface-2);
  color: var(--ft-text);
}

.mahfel-btn-secondary:hover { background: var(--ft-hover); }

.w-100 { width: 100%; }

.mahfel-body {
  flex: 1;
  display: flex;
  gap: 12px;
  padding: 12px;
  overflow: hidden;
  direction: ltr;
  position: relative;
  min-height: 0;
}

.mahfel-main {
  flex: 1;
  position: relative;
  border-radius: var(--ft-radius);
  background: var(--ft-surface);
  overflow: hidden;
  direction: rtl;
}

.mahfel-remote-grid {
  position: absolute;
  inset: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-auto-rows: auto;
  gap: 12px;
  align-content: start;
  align-items: start;
  justify-items: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: inset 0.2s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--ft-accent) transparent;
}

.mahfel-remote-grid::-webkit-scrollbar {
  width: 8px;
}
.mahfel-remote-grid::-webkit-scrollbar-track {
  background: transparent;
}
.mahfel-remote-grid::-webkit-scrollbar-thumb {
  background: var(--ft-accent);
  border-radius: 999px;
}
.mahfel-remote-grid::-webkit-scrollbar-thumb:hover {
  background: #5c97ff;
}

.mahfel-remote-grid.many-tiles {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}

.mahfel-remote-grid:has(.lk-video-cell:nth-child(50)) {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
}

.mahfel-main.stage-expanded .mahfel-remote-grid {
  inset: 8px;
}

.mahfel-main.has-speaker-layout .mahfel-remote-grid {
  /* ردیف‌ها را فشرده نکن — کاشی‌ها کامل بمانند و اسکرول بخورند */
  align-content: start;
  align-items: start;
}

.mahfel-local {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0b0d12;
  z-index: 2;
  flex-shrink: 0;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.mahfel-local.speaking {
  border-color: var(--ft-accent-2);
  box-shadow:
    0 0 0 2px rgba(112, 249, 184, 0.65),
    0 8px 20px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.mahfel-local.is-hidden,
.mahfel-local:not(:has(video)),
.mahfel-local.ft-local-docked {
  display: none !important;
}

.ft-local-label {
  position: absolute;
  inset-inline-start: 6px;
  bottom: 6px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #fff;
  background: rgba(12, 14, 20, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  line-height: 1.4;
}

.ft-local-expand {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ft-local-expand:hover {
  background: rgba(58, 130, 255, 0.85);
}

.mahfel-local .lk-video-cell,
.mahfel-local video.ft-local-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mahfel-local .lk-video-cell {
  position: absolute;
  inset: 0;
  aspect-ratio: unset;
  border-radius: 0;
  border: none;
}

.mahfel-local .lk-video-cell video,
.mahfel-local video.ft-local-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* حالت pip: ویدیوی خودی فقط در سایدبار */
.mahfel-body.self-video-pip .mahfel-remote-grid .lk-video-cell.lk-local-main,
.mahfel-body.self-video-pip #mahfel-remotes .lk-video-cell.lk-local-main {
  display: none !important;
}

/* حالت تمام‌صحنه: پیش‌نمایش سایدبار مخفی — فقط صحنه */
.mahfel-body.self-video-stage #mahfel-local {
  display: none !important;
}

/* حالت تمام‌صحنه: ویدیوی پین کل صحنه را پر کند — فقط در چیدمان‌های سخنران بالا/پایین؛ چپ/راست و شبکه قوانین خودشان حاکم‌اند */
.mahfel-body.self-video-stage .mahfel-remote-grid.has-pin.layout-speaker:not(.layout-speaker-left):not(.layout-speaker-right) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}

.mahfel-body.self-video-stage .mahfel-remote-grid.has-pin.layout-speaker-bottom:not(.layout-speaker-left):not(.layout-speaker-right) {
  flex-direction: column-reverse;
}

.mahfel-body.self-video-stage .mahfel-remote-grid.has-pin.layout-speaker > .lk-video-cell.lk-pinned {
  flex: 1 1 auto;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: unset !important;
  padding-bottom: 0 !important;
  border-radius: var(--ft-radius);
  align-self: stretch;
}

.mahfel-body.self-video-stage .mahfel-remote-grid.has-pin > .lk-filmstrip:not(:has(.lk-video-cell)) {
  display: none;
}

/* حالت تمام‌صحنه: filmstrip نوار باریک پایین بماند تا ویدیوی پین کل صحنه را پر کند — فقط در چیدمان بالا/پایین */
.mahfel-body.self-video-stage .mahfel-remote-grid.has-pin.layout-speaker:not(.layout-speaker-left):not(.layout-speaker-right) > .lk-filmstrip {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  max-height: 150px;
  flex-direction: row;
  flex-wrap: wrap;
}

.mahfel-sidebar.compact .mahfel-local {
  border-radius: 10px;
}

.mahfel-sidebar {
  width: var(--ft-sidebar);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  direction: rtl;
  min-height: 0;
  position: relative;
  z-index: 40;
}

.mahfel-panel {
  background: var(--ft-surface);
  border-radius: var(--ft-radius);
  overflow: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mahfel-panel-header {
  padding: 14px 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--ft-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mahfel-user-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}

.ft-user-toolbar {
  padding: 8px 12px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ft-user-search {
  position: relative;
  display: flex;
  align-items: center;
}

.ft-user-search > svg {
  position: absolute;
  inset-inline-start: 10px;
  color: var(--ft-text-2);
  opacity: 0.7;
  pointer-events: none;
}

.ft-user-search input {
  width: 100%;
  background: var(--ft-surface-2);
  border: 1px solid var(--ft-border);
  border-radius: 10px;
  padding: 8px 34px 8px 12px;
  padding-inline-start: 32px;
  color: var(--ft-text);
  outline: none;
  font-family: inherit;
  font-size: 0.82rem;
}

.ft-user-search input:focus {
  border-color: var(--ft-accent);
  box-shadow: 0 0 0 3px rgba(58, 130, 255, 0.12);
}

.ft-user-search-clear {
  position: absolute;
  inset-inline-end: 6px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ft-text-2);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.ft-user-search-clear:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.ft-user-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ft-user-filters button {
  border: 1px solid var(--ft-border);
  background: var(--ft-surface-2);
  color: var(--ft-text-2);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.4;
}

.ft-user-filters button:hover {
  border-color: rgba(58, 130, 255, 0.5);
  color: #fff;
}

.ft-user-filters button.sel {
  border-color: var(--ft-accent);
  background: rgba(58, 130, 255, 0.16);
  color: #fff;
}

.ft-user-search.compact {
  margin: 0 8px 6px;
}

.ft-user-search.compact input {
  padding: 6px 10px 6px 28px;
  padding-inline-start: 28px;
  font-size: 0.76rem;
  border-radius: 8px;
}

.ft-user-filters.compact {
  margin: 0 8px 8px;
  flex-wrap: nowrap;
  gap: 4px;
}

.ft-user-filters.compact button {
  padding: 3px 6px;
  font-size: 0.64rem;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.mahfel-user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  margin-bottom: 6px;
  background: var(--ft-surface-2);
  font-size: 0.82rem;
  gap: 8px;
  border: 1px solid transparent;
}

.ft-user-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.ft-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(58, 130, 255, 0.22);
  color: #9ec1ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
}

.ft-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mahfel-user-item > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mahfel-user-item .badge {
  font-size: 0.65rem;
  font-weight: 500;
}

.mahfel-user-item .mahfel-admin-actions .mahfel-admin-btn {
  width: 24px;
  height: 24px;
}

.mahfel-user-item.speaking {
  border-color: var(--ft-accent-2);
  background: rgba(112, 249, 184, 0.07);
}

.mahfel-toolbar {
  height: var(--ft-toolbar);
  background: var(--ft-surface);
  border-top: 1px solid var(--ft-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  gap: 12px;
}

.mahfel-toolbar-center,
.mahfel-toolbar-right,
.mahfel-toolbar-left {
  display: flex;
  gap: 10px;
  align-items: center;
}

.mahfel-tool-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  background: var(--ft-surface-2);
  color: var(--ft-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.mahfel-tool-btn:hover { background: var(--ft-hover); }

.mahfel-tool-btn.active { background: var(--ft-accent); }

.mahfel-tool-btn.danger { background: var(--ft-danger); color: #fff; }

.mahfel-tool-btn.ft-hangup {
  background: var(--ft-danger);
  color: #fff;
}

.mahfel-tool-btn.ft-hangup:hover { background: #d92d20; }

.lk-video-cell {
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--ft-border);
  width: 100%;
  /* ارتفاع قطعی مربع — ویدیوی absolute دیگر ردیف را صفر نمی‌کند */
  height: 0;
  padding-bottom: 100%;
  aspect-ratio: unset;
  min-height: unset;
  max-height: none;
  align-self: start;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.lk-video-cell video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

/* «نمایش کامل تصویر» — object-fit: contain برای دیدن کل قاب بدون کراپ */
.lk-video-cell video.lk-contain {
  object-fit: contain;
}

/* کاور «توقف دریافت این دوربین» — کاشی باقی می‌ماند و با کلیک ازسر گرفته می‌شود */
.lk-paused-cover {
  display: none;
  position: absolute;
  inset: 0 0 34px 0; /* نوار نام پایین آزاد می‌ماند */
  z-index: 3;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(8, 10, 16, 0.78);
  color: #94a3b8;
  font-size: 0.72rem;
  text-align: center;
  padding: 8px;
  cursor: pointer;
}

.lk-paused-cover svg { opacity: 0.75; }

.lk-paused-cover em {
  font-style: normal;
  font-size: 0.62rem;
  color: #64748b;
}

.lk-video-cell.cam-paused .lk-paused-cover { display: flex; }
.lk-video-cell.cam-paused video { opacity: 0; }

/* مخفی کردن تصویر خودم — کاشی لوکال و پیش‌نمایش PiP */
.mahfel-body.self-video-hidden #mahfel-local { display: none !important; }
.mahfel-body.self-video-hidden .lk-video-cell[data-source="camera"][id^="local-"] { display: none !important; }

.lk-name {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 6px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.72));
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
  direction: rtl;
  font-family: Vazirmatn, Tahoma, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.lk-name-ico {
  flex-shrink: 0;
  opacity: 0.85;
}

.lk-name-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ft-pres-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ft-text-2);
  text-align: center;
  padding: 32px;
  min-height: 220px;
}

.ft-pres-empty p {
  margin: 0;
  color: var(--ft-text);
  font-weight: 600;
}

/* هنگام ارائه، صحنه مثل یک کارت شناور با قاب تیره و گوشه‌های گرد دیده می‌شود */
.mahfel-body:has(.mahfel-presentation) {
  padding: 10px;
}

.mahfel-main:has(.mahfel-presentation) {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}

.mahfel-presentation {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #1a1b20 0%, #131317 100%);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  overflow: hidden;
  z-index: 20;
}

.mahfel-presentation-header {
  direction: rtl;
  text-align: right;
}

.mahfel-presentation .mahfel-presentation-header {
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.mahfel-presentation-body {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: auto;
  background: radial-gradient(130% 110% at 50% 0%, #17181d 0%, #0b0b0e 68%);
  min-height: 0;
}

.mahfel-presentation-body.zoomed {
  align-items: flex-start;
  justify-content: flex-start;
}

.mahfel-presentation-body canvas,
.mahfel-presentation-body .ft-pres-image {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 12px 44px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
  border-radius: 10px;
  object-fit: contain;
}

.mahfel-presentation-body.zoomed canvas {
  max-width: none;
  max-height: none;
}

.ft-pres-title {
  flex-wrap: wrap;
  gap: 10px;
}

.ft-pres-paging {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ft-text-2);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ft-border);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}

.ft-pres-nav {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ft-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.ft-pres-nav:hover {
  background: rgba(255, 255, 255, 0.1);
}

.ft-pres-zoom {
  min-width: 42px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ft-text-2);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0 6px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ft-pres-zoom:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ft-text);
}

.ft-pres-zoom.active {
  color: var(--ft-accent);
  font-weight: 600;
}

/* ---------- کروم مدرن هدر ارائه ---------- */
.mahfel-presentation .ft-pres-title > svg {
  padding: 6px;
  border-radius: 9px;
  background: rgba(58, 130, 255, 0.14);
  color: #8db4ff;
  box-sizing: content-box;
}

.mahfel-presentation .ft-pres-title strong {
  font-size: 0.9rem;
}

.mahfel-presentation .ft-pres-paging {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.09);
  padding: 4px 10px;
  gap: 4px;
}

.mahfel-presentation .ft-stage-actions .mahfel-tool-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--ft-text-2);
}

.mahfel-presentation .ft-stage-actions .mahfel-tool-btn:hover {
  background: rgba(255, 255, 255, 0.11);
  color: var(--ft-text);
}

.mahfel-presentation .ft-stage-actions .mahfel-tool-btn.active {
  background: var(--ft-accent);
  border-color: transparent;
  color: #fff;
}

.mahfel-presentation .mahfel-tool-btn.ft-file-mgr-btn {
  width: auto;
  height: 34px;
  padding: 0 12px;
  gap: 6px;
  border-radius: 10px;
  background: rgba(58, 130, 255, 0.15);
  border: 1px solid rgba(58, 130, 255, 0.32);
  color: #9dbfff;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.mahfel-presentation .mahfel-tool-btn.ft-file-mgr-btn:hover {
  background: rgba(58, 130, 255, 0.26);
  color: #fff;
}

.mahfel-presentation .ft-stage-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  margin-inline-end: 0;
  background: rgba(240, 68, 56, 0.14);
  color: #ff9d96;
}

.mahfel-presentation .ft-stage-close:hover {
  background: rgba(240, 68, 56, 0.42);
  color: #fff;
}

.mahfel-presentation-footer {
  padding: 10px 16px;
  text-align: center;
  color: var(--ft-text-2);
  border-top: 1px solid var(--ft-border);
  direction: rtl;
}

.mahfel-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mahfel-chat-bubble {
  align-self: flex-start;
  background: var(--ft-surface-2);
  border-radius: 12px;
  padding: 8px 12px;
  max-width: 90%;
  direction: rtl;
  text-align: right;
  position: relative;
}

.mahfel-chat-bubble.pinned {
  border-right: 3px solid var(--ft-accent);
}

.mahfel-chat-bubble.me.pinned {
  border-right-color: rgba(255, 255, 255, 0.6);
}

.mahfel-chat-bubble.me {
  align-self: flex-end;
  background: var(--ft-accent);
  color: #fff;
}

.mahfel-chat-bubble.question {
  border-right: 3px solid #0dcaf0;
}

.mahfel-chat-bubble.question .mahfel-chat-sender .badge {
  margin-right: 6px;
}

.mahfel-chat-sender {
  font-size: 0.7rem;
  opacity: 0.8;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mahfel-chat-text {
  font-size: 0.9rem;
  word-break: break-word;
}

/* ساعت پیام زیر حباب — الگوی پیام‌رسان‌های مدرن */
.mahfel-chat-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}

.mahfel-chat-time {
  font-size: 0.6rem;
  opacity: 0.55;
  direction: ltr;
  user-select: none;
  cursor: default;
}

.mahfel-chat-time:hover {
  opacity: 0.85;
}

/* جداکنندهٔ روز بین پیام‌ها (امروز / دیروز / تاریخ شمسی) — چسبان هنگام اسکرول */
.mahfel-chat-day {
  display: flex;
  justify-content: center;
  align-self: stretch;
  margin: 2px 0;
  position: sticky;
  top: 0;
  z-index: 2;
}

.mahfel-chat-day > span {
  background: var(--ft-surface);
  color: var(--ft-text-2);
  border: 1px solid var(--ft-border);
  font-size: 0.62rem;
  padding: 2px 12px;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* آواتار کوچک فرستنده در هدر حباب */
.ft-chat-av {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--av, var(--ft-accent));
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mahfel-chat-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
}

.mahfel-chat-file:hover {
  color: inherit;
  opacity: 0.85;
}

.mahfel-chat-pin, .mahfel-chat-reply, .mahfel-chat-menu {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  opacity: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}

.mahfel-chat-bubble:hover .mahfel-chat-pin,
.mahfel-chat-bubble:hover .mahfel-chat-reply,
.mahfel-chat-bubble:hover .mahfel-chat-menu,
.mahfel-chat-pin.on, .mahfel-chat-reply.on, .mahfel-chat-menu.on {
  opacity: 0.85;
}

.mahfel-chat-pin:hover, .mahfel-chat-reply:hover, .mahfel-chat-menu:hover {
  background: rgba(0, 0, 0, 0.15);
  opacity: 1;
}

/* جمع‌کنندهٔ دکمه‌های اکشن روی حباب (پین، پاسخ خصوصی، منوی ⋮) */
.mahfel-chat-actions {
  position: absolute;
  top: 4px;
  left: 4px;
  display: inline-flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}

.mahfel-chat-bubble:hover .mahfel-chat-actions,
.mahfel-chat-actions:has(.mahfel-chat-pin.on),
.mahfel-chat-actions:has(.mahfel-chat-menu.on) {
  opacity: 0.9;
}

.mahfel-chat-actions .mahfel-chat-pin,
.mahfel-chat-actions .mahfel-chat-reply,
.mahfel-chat-actions .mahfel-chat-menu {
  position: static;
  opacity: 1;
}

/* نقل‌قول «پاسخ به این پیام» داخل حباب */
.mahfel-chat-quote {
  border-right: 2px solid var(--ft-accent);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 3px 8px;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 0.7rem;
  color: var(--ft-text-2);
}

.mahfel-chat-quote b {
  color: var(--ft-text);
  font-weight: 600;
}

.mahfel-chat-quote span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.mahfel-chat-bubble.me .mahfel-chat-quote {
  border-right-color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.16);
  color: rgba(255, 255, 255, 0.85);
}

.mahfel-chat-bubble.me .mahfel-chat-quote b {
  color: #fff;
}

.mahfel-chat-edited {
  font-size: 0.62rem;
  opacity: 0.55;
  margin-right: 6px;
}

/* منوی ⋮ پیام — fixed تا در اسکرول کارت بریده نشود */
.mahfel-ctx-backdrop {
  position: fixed;
  inset: 0;
  z-index: 700;
}

.mahfel-ctx-menu {
  position: fixed;
  z-index: 701;
  min-width: 200px;
  max-width: 240px;
  max-height: 46vh;
  overflow-y: auto;
  background: rgba(38, 38, 38, 0.98);
  border: 1px solid var(--ft-border);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mahfel-ctx-menu .ft-popup-item {
  font-size: 0.78rem;
  padding: 8px 10px;
}

/* نمایش بزرگتر پنجرهٔ چت */
.ft-compact-chat.chat-expanded {
  flex: 5 1 0;
}

.ft-compact-chat.chat-expanded .ft-compact-messages {
  min-height: 38vh;
}

.mahfel-chat-pinned {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--ft-surface-2);
  border-bottom: 1px solid var(--ft-border);
  border-right: 3px solid var(--ft-accent);
  direction: rtl;
  flex-shrink: 0;
}

.mahfel-chat-pinned-icon {
  color: var(--ft-accent);
  display: inline-flex;
  flex-shrink: 0;
}

.mahfel-chat-pinned-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mahfel-chat-pinned-label {
  font-size: 0.65rem;
  color: var(--ft-text-2);
}

.mahfel-chat-pinned-text {
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mahfel-chat-unpin {
  border: none;
  background: transparent;
  color: var(--ft-text-2);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.mahfel-chat-unpin:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ft-text);
}

.mahfel-chat-input {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--ft-border);
}

.mahfel-chat-input input {
  flex: 1;
  min-width: 0;
  background: var(--ft-surface-2);
  color: var(--ft-text);
  border: 1px solid var(--ft-border);
  border-radius: 12px;
  padding: 8px 12px;
  outline: none;
  direction: rtl;
}

.mahfel-chat-input .mahfel-tool-btn {
  flex-shrink: 0;
}

.mahfel-chat-input input::placeholder {
  color: var(--ft-text-2);
}

.ft-chat-send {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--ft-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.12s;
}

.ft-chat-send:hover {
  background: #1d6ae0;
  transform: scale(1.04);
}

.mahfel-admin-actions {
  display: flex;
  gap: 4px;
  margin-right: 6px;
}

.mahfel-admin-btn {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: var(--ft-surface-2);
  color: var(--ft-text);
  font-size: 0.75rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mahfel-admin-btn:hover {
  background: var(--ft-hover);
}

.mahfel-admin-btn.danger:hover {
  background: var(--ft-danger);
  color: #fff;
}

.mahfel-whiteboard {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--ft-surface);
  border: 1px solid var(--ft-border);
  border-radius: 12px;
  overflow: hidden;
}

.mahfel-whiteboard-header,
.mahfel-whiteboard-header.ft-stage-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ft-border);
  direction: rtl;
  position: relative;
}

.mahfel-whiteboard-header .ft-stage-title {
  position: absolute;
  inset-inline-start: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.mahfel-whiteboard-header span {
  font-weight: 600;
  color: var(--ft-text);
}

.mahfel-whiteboard-body {
  flex: 1;
  position: relative;
  overflow: hidden;
}

#whiteboard-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  background: #1a1a1a;
}

.mahfel-color-picker {
  width: 32px;
  height: 32px;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.mahfel-size-slider {
  width: 100px;
  accent-color: var(--ft-accent);
}

.mahfel-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.mahfel-modal-content {
  background: var(--ft-surface);
  border: 1px solid var(--ft-border);
  border-radius: 18px;
  padding: 18px;
  width: 92%;
  max-width: 440px;
  max-height: 86vh;
  overflow-y: auto;
  color: var(--ft-text);
  direction: rtl;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.mahfel-modal-content h4 {
  margin-bottom: 16px;
  text-align: right;
}

.mahfel-form-group {
  margin-bottom: 14px;
}

.mahfel-form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: var(--ft-text-2);
}

.mahfel-form-group input,
.mahfel-form-group select,
.mahfel-form-group textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--ft-surface-2);
  color: var(--ft-text);
  border: 1px solid var(--ft-border);
  border-radius: 12px;
  padding: 10px 14px;
  outline: none;
  font-family: inherit;
  font-size: 0.9rem;
  direction: rtl;
  text-align: right;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* ورودی‌های لاتین (مثل کد دعوت) از راست‌چین معاف می‌شوند */
.mahfel-form-group [dir="ltr"] input,
.mahfel-form-group [dir="ltr"] .k-input-inner,
.mahfel-form-group input[dir="ltr"] {
  direction: ltr !important;
  text-align: left !important;
}

.mahfel-form-group input:focus,
.mahfel-form-group select:focus,
.mahfel-form-group textarea:focus {
  border-color: var(--ft-accent);
  box-shadow: 0 0 0 3px rgba(58, 130, 255, 0.15);
}

.mahfel-form-group input::placeholder,
.mahfel-form-group textarea::placeholder {
  color: var(--ft-text-2);
}

.mahfel-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 18px;
}

/* دکمه‌های بستن/آیکون روی مودال روشن قابل دیدن باشند */
.mahfel-modal-content .btn-icon.btn-light,
.mahfel-modal-content .btn-icon.btn-outline-secondary {
  background: transparent;
  border: 1px solid var(--ft-border);
  color: var(--ft-text-2);
}
.mahfel-modal-content .btn-icon.btn-light:hover,
.mahfel-modal-content .btn-icon.btn-outline-secondary:hover {
  background: var(--ft-hover);
  color: var(--ft-text);
  border-color: var(--ft-border);
}

.ft-activate-card {
  max-width: 380px;
}

.ft-activate-text {
  font-size: 0.86rem;
  color: var(--ft-text-2);
  line-height: 1.8;
  margin: 0;
}

.ft-chip-btn {
  cursor: pointer;
  font: inherit;
}

.ft-conn-panel {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 80;
  width: min(260px, calc(100% - 24px));
  background: var(--ft-overlay);
  border: 1px solid var(--ft-border);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
  direction: rtl;
}

.ft-conn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 0.82rem;
}

.ft-conn-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.78rem;
  color: var(--ft-text-2);
  border-bottom: 1px solid var(--ft-border);
}

.ft-conn-row:last-child { border-bottom: none; }

.ft-conn-row b {
  color: var(--ft-text);
  font-weight: 600;
  text-align: left;
}

.ft-conn-row b.bad { color: var(--ft-danger); }

.ft-conn-hint {
  margin-top: 7px;
  font-size: 0.66rem;
  color: var(--ft-text-2);
  opacity: 0.75;
  line-height: 1.6;
}

/* بنر «توقف دریافت تصاویر» — حالت فقط صدا برای صرفه‌جویی پهنای باند */
.ft-vidpaused {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 65;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--ft-overlay);
  border: 1px solid var(--ft-border);
  color: var(--ft-text);
  font-size: 0.78rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  direction: rtl;
  white-space: nowrap;
}

.ft-vidpaused button {
  border: none;
  border-radius: 999px;
  padding: 3px 10px;
  background: var(--ft-accent);
  color: #fff;
  font-size: 0.75rem;
  cursor: pointer;
}

.ft-vidpaused button:hover { filter: brightness(1.12); }

@media (max-width: 860px) {
  .ft-conn-panel {
    top: 8px;
    inset-inline: 8px;
    width: auto;
  }
}

.ft-stage-empty {
  position: absolute;
  inset: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ft-text-2);
  pointer-events: none;
  z-index: 1;
}

.ft-stage-empty p {
  margin: 0;
  font-size: 0.9rem;
}

.ft-stage-empty span {
  font-size: 0.78rem;
  opacity: 0.75;
}

.mahfel-remote-grid:not(:empty) + .ft-stage-empty,
.mahfel-remote-grid:has(.lk-video-cell) ~ .ft-stage-empty {
  display: none;
}

.ft-toast {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(520px, 92%);
  padding: 10px 12px 13px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #c026d3 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  box-shadow: 0 14px 40px rgba(124, 58, 237, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  font-size: 0.82rem;
  direction: rtl;
  animation: ft-toast-in 0.25s ease;
}

.ft-toast::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  transform-origin: right;
  animation: ft-toast-progress 3s linear forwards;
}

@keyframes ft-toast-in {
  from { opacity: 0; translate: 0 -8px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes ft-toast-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* در حالت ارائه/تخته، نوتیف زیر هدر صحنه بیاید نه روی آن */
.mahfel-main.film-mode .ft-toast,
.mahfel-main:has(.ft-stage-header) .ft-toast {
  top: 64px;
}

.ft-toast.err {
  border-color: rgba(255, 255, 255, 0.28);
  background: linear-gradient(135deg, #ef4444 0%, #e11d48 60%, #f43f5e 100%);
  color: #fff;
  box-shadow: 0 14px 40px rgba(225, 29, 72, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.ft-toast-close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.ft-toast-close:hover {
  background: rgba(255, 255, 255, 0.32);
}

.ft-wb-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ft-overlay);
  color: var(--ft-text-2);
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.ft-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ft-surface);
  backdrop-filter: blur(10px);
  border: 1px solid var(--ft-border);
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 0.78rem;
  color: var(--ft-text);
}

.ft-chip-rec {
  color: var(--ft-danger);
  border-color: rgba(240, 68, 56, 0.45);
}

.ft-chip-status {
  color: var(--ft-text-2);
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ft-conn-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #666;
  display: inline-block;
}

.ft-conn-dot.good { background: #22c55e; }
.ft-conn-dot.mid { background: #eab308; }
.ft-conn-dot.bad { background: var(--ft-danger); }

.ft-sig {
  display: inline-flex;
  align-items: flex-end;
  gap: 1.5px;
  width: 18px;
  height: 16px;
  padding: 2px;
  flex: none;
  color: #6b7280;
}

.ft-sig i {
  display: block;
  width: 2.5px;
  border-radius: 2px;
  background: rgba(148, 163, 184, 0.28);
}

.ft-sig i:nth-child(1) { height: 3px; }
.ft-sig i:nth-child(2) { height: 6px; }
.ft-sig i:nth-child(3) { height: 9px; }
.ft-sig i:nth-child(4) { height: 12px; }
.ft-sig.excellent { color: #22c55e; }
.ft-sig.good { color: #eab308; }
.ft-sig.poor,
.ft-sig.bad { color: var(--ft-danger); }
.ft-sig.excellent i,
.ft-sig.good i { background: currentColor; }
.ft-sig.poor i:nth-child(1),
.ft-sig.bad i:nth-child(1) { background: currentColor; }
.ft-sig.poor i:nth-child(2) { background: currentColor; }
.ft-net-bad { color: var(--ft-danger) !important; }

.ft-reconnect {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 12, 18, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: ft-reconnect-fade 0.28s ease-out;
}

.ft-reconnect-card {
  position: relative;
  width: min(340px, 92vw);
  padding: 36px 28px 30px;
  border-radius: 22px;
  text-align: center;
  color: var(--ft-text);
  background:
    linear-gradient(165deg, rgba(58, 130, 255, 0.14), transparent 42%),
    rgba(32, 34, 40, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: ft-reconnect-pop 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-reconnect-spinner {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
}

.ft-reconnect-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid rgba(58, 130, 255, 0.18);
  border-top-color: var(--ft-accent);
  border-right-color: rgba(112, 249, 184, 0.65);
  animation: ft-reconnect-spin 0.9s linear infinite;
}

.ft-reconnect-pulse {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58, 130, 255, 0.35), transparent 70%);
  animation: ft-reconnect-breathe 1.6s ease-in-out infinite;
}

.ft-reconnect-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.55;
  color: #f2f3f5;
}

.ft-reconnect-sub {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ft-text-2);
  line-height: 1.6;
}

@keyframes ft-reconnect-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ft-reconnect-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ft-reconnect-spin {
  to { transform: rotate(360deg); }
}

@keyframes ft-reconnect-breathe {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* ---------- bottom control bar (full width) ---------- */
.ft-dock-wrap {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  z-index: 90;
}

.ft-dock.mahfel-toolbar {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: var(--ft-toolbar);
  border: none;
  border-top: 1px solid var(--ft-border);
  border-radius: 0;
  padding: 10px 16px;
  gap: 22px;
  justify-content: center;
  background: var(--ft-surface);
  box-shadow: none;
}

.ft-dock-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ft-chat-empty {
  margin: auto;
  text-align: center;
  color: var(--ft-text-2);
  padding: 28px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ft-chat-empty p {
  margin: 0;
  color: var(--ft-text);
  font-weight: 600;
}

.ft-chat-empty span {
  font-size: 0.78rem;
}

.ft-sep {
  width: 1px;
  height: 26px;
  background: var(--ft-border);
  flex-shrink: 0;
}

.ft-split {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ft-caret {
  position: absolute;
  top: -7px;
  inset-inline-end: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--ft-border);
  background: var(--ft-surface);
  color: var(--ft-text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ft-caret:hover { color: var(--ft-text); background: var(--ft-hover); }

/* دکمهٔ تعویض دوربین (جلو/عقب) — فقط روی موبایل و دستگاه‌های لمسی */
.mahfel-tool-btn.ft-cam-flip { display: none; }

@media (max-width: 860px), (pointer: coarse) {
  .mahfel-tool-btn.ft-cam-flip { display: inline-flex; }
}

.mahfel-tool-btn.ft-off {
  color: var(--ft-danger);
}

.mahfel-tool-btn.ft-hand-on {
  background: rgba(234, 179, 8, 0.2);
  color: #fde047;
  box-shadow: inset 0 0 0 1.5px rgba(234, 179, 8, 0.55);
}

.mahfel-tool-btn.ft-rec-on {
  background: var(--ft-danger);
  color: #fff;
  animation: ft-rec-pulse 1.4s infinite;
}

@keyframes ft-rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 68, 56, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(240, 68, 56, 0); }
}

.ft-badge {
  position: absolute;
  top: -5px;
  inset-inline-start: -5px;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  background: var(--ft-danger);
  color: #fff;
  font-size: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.ft-badge-count { background: var(--ft-accent); }
.ft-badge-hand { background: rgba(234, 179, 8, 0.15); color: #a16207; box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.55), 0 1px 5px rgba(0, 0, 0, 0.12); }

.mahfel-tool-btn .ft-deny-x {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ft-danger);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}

.mahfel-tool-btn .ft-deny-x::before {
  content: "✕";
}

.ft-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(58, 130, 255, 0.14);
  border: 1px solid rgba(58, 130, 255, 0.35);
  color: var(--ft-text-2);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.ft-count-badge b {
  color: var(--ft-accent);
  font-weight: 800;
}

.mahfel-tool-btn { position: relative; }

/* ---------- popups ---------- */
.ft-popup {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(38, 38, 38, 0.97);
  border: 1px solid var(--ft-border);
  border-radius: 16px;
  padding: 8px;
  min-width: 260px;
  max-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  z-index: 95;
}

.ft-popup.ft-popup-anchored {
  bottom: calc(100% + 12px);
  left: 0;
  right: auto;
  transform: none;
  min-width: 220px;
  max-width: min(280px, 90vw);
  z-index: 96;
}

.ft-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 85;
}

.ft-popup-title {
  font-size: 0.72rem;
  color: var(--ft-text-2);
  padding: 8px 10px 4px;
  font-weight: 600;
}

.ft-popup-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 10px;
  background: transparent;
  border: none;
  color: var(--ft-text);
  font-family: inherit;
  font-size: 0.83rem;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  text-align: right;
}

.ft-popup-item > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.ft-popup-item > span.ft-device-name {
  display: block;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.45;
  text-align: left;
  direction: ltr;
}

.ft-popup-item > .ft-switch,
.ft-popup-item > span.ft-switch,
.ft-toggle-row > .ft-switch {
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  display: inline-block;
  overflow: visible;
}

.ft-popup-item > svg {
  flex-shrink: 0;
}

.ft-popup-audio {
  min-width: min(420px, 92vw);
  max-width: min(480px, 94vw);
}

.ft-popup-item:hover { background: rgba(255, 255, 255, 0.07); }
.ft-popup-item.sel { color: var(--ft-accent-2); }
.ft-popup-item.danger { color: var(--ft-danger); }
.ft-popup-link { color: var(--ft-accent); }

.ft-popup-item .ft-badge { position: static; flex-shrink: 0; }

.ft-popup-item > span.ft-popup-hint {
  flex: 0 0 auto;
  font-size: 0.65rem;
  color: var(--ft-text-2);
  opacity: 0.8;
}

.ft-popup-note {
  font-size: 0.68rem;
  color: var(--ft-text-2);
  padding: 6px 10px 8px;
  border-top: 1px solid var(--ft-border);
  margin-top: 4px;
}

/* نوار وضعیت شناور اشتراک صفحه */
.ft-sharebar {
  position: fixed;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(30, 30, 30, 0.92);
  border: 1px solid var(--ft-border);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 92;
  font-size: 0.75rem;
  color: var(--ft-text);
  backdrop-filter: blur(8px);
}

.ft-sharebar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f04438;
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.25);
  animation: ft-sharebar-pulse 1.6s ease-in-out infinite;
}

.ft-sharebar.frozen .ft-sharebar-dot {
  background: #eab308;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.25);
  animation: none;
}

@keyframes ft-sharebar-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.ft-sharebar-label { white-space: nowrap; }

.ft-sharebar-time {
  font-variant-numeric: tabular-nums;
  color: var(--ft-text-2);
  font-size: 0.72rem;
}

.ft-sharebar-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ft-text);
  font-family: inherit;
  font-size: 0.72rem;
  padding: 4px 9px;
  cursor: pointer;
}

.ft-sharebar-btn:hover { background: rgba(255, 255, 255, 0.16); }

.ft-sharebar-btn.stop {
  background: var(--ft-danger);
  color: #fff;
  padding: 4px 12px;
}

.ft-sharebar-btn.stop:hover { background: #d92d20; }

@media (max-width: 640px) {
  .ft-sharebar { top: 62px; max-width: 94vw; }
  .ft-sharebar-label { display: none; }
}

.ft-popup-item > span.ft-count-badge {
  flex: 0 0 auto;
  min-width: 16px;
  height: 15px;
  padding: 0 5px;
  font-size: 0.6rem;
}

.ft-popup-meter {
  height: 8px;
  background: var(--ft-surface-2);
  border-radius: 4px;
  margin: 4px 10px 8px;
  overflow: hidden;
}

.ft-popup-meter i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #22c55e, #eab308, var(--ft-danger));
  border-radius: 4px;
  transition: width 0.08s linear;
}

.ft-popup-item > span.ft-dev-level {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 18px;
  pointer-events: none;
}

.ft-dev-level i {
  width: 3px;
  height: 14px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  display: block;
}

.ft-dev-level i.on { background: var(--ft-accent-2); }

/* dock 里麦克风键旁的电平表：5 段递增，蓝色 — عمودی؛ از پایین به بالا روشن می‌شود */
.ft-dock-micmeter {
  display: inline-flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
  height: 44px;
  padding-bottom: 6px;
}

.ft-dock-micmeter i {
  width: 4px;
  height: 5px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 2px;
}

.ft-dock-micmeter i.on { background: var(--ft-accent); }

.ft-popup-slider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: var(--ft-text-2);
  font-size: 0.75rem;
}

.ft-vol-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 2px;
  margin: -2px;
  color: inherit;
  cursor: pointer;
  border-radius: 4px;
}

.ft-vol-toggle:hover { color: var(--ft-text); }

.ft-vol-toggle.off { color: #f04438; }

.ft-popup-slider input[type="range"] {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 16px;
  cursor: pointer;
  accent-color: var(--ft-accent);
  direction: rtl;
  --p: 50%;
}

.ft-popup-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to left, var(--ft-accent) var(--p), var(--ft-surface-2) var(--p));
}

.ft-popup-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: none;
  border-radius: 50%;
  background: var(--ft-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.ft-popup-slider input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--ft-surface-2);
}

.ft-popup-slider input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--ft-accent);
}

.ft-popup-slider input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--ft-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* علامت نقطه‌ی ۱۰۰٪ روی اسلایدر میکروفون (۰–۲۰۰) — وسط track */
.ft-range-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.ft-range-tick {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 9px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.ft-range-lbl {
  position: absolute;
  left: 50%;
  top: -9px;
  transform: translateX(-50%);
  font-style: normal;
  font-size: 0.58rem;
  line-height: 1;
  color: var(--ft-text-2);
  pointer-events: none;
}

.ft-popup-emoji {
  min-width: 0;
  display: flex;
  gap: 4px;
  padding: 8px;
}

.ft-emoji-btn {
  background: transparent;
  border: none;
  font-size: 1.35rem;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 10px;
}

.ft-emoji-btn:hover { background: rgba(255, 255, 255, 0.08); }

/* ---------- chat emoji picker ---------- */
.ft-emoji-picker {
  position: relative;
  z-index: 6;
  flex: 0 1 280px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  background: rgba(28, 28, 28, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.ft-compact-chat .ft-emoji-picker {
  border-top: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin: 0 0 2px;
}

.ft-emoji-picker-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 8px 8px;
  direction: ltr;
}

.ft-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px);
  gap: 2px;
}

.ft-emoji-grid .ft-emoji-btn {
  font-size: 1.45rem;
  padding: 5px 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ft-compact-input.picker-open,
.mahfel-chat-input.picker-open {
  position: relative;
  z-index: 6;
}

/* ---------- switch ---------- */
.ft-switch {
  width: 38px;
  height: 21px;
  border-radius: 11px;
  background: var(--ft-surface-2);
  border: 1px solid var(--ft-border);
  position: relative;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.ft-switch i {
  position: absolute;
  top: 2px;
  inset-inline-start: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #888;
  transition: all 0.15s;
}

.ft-switch.on { background: var(--ft-accent); border-color: var(--ft-accent); }
.ft-switch.on i { inset-inline-start: 19px; background: #fff; }

/* ---------- sidebar tabs ---------- */
.ft-sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--ft-border);
}

.ft-sidebar-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ft-text-2);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 12px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
}

.ft-sidebar-tab.active {
  color: var(--ft-text);
  border-bottom-color: var(--ft-accent);
}

.ft-sidebar-tab .ft-badge { position: static; }

/* ---------- settings modal ---------- */
.ft-settings {
  display: flex;
  background: var(--ft-surface);
  border: 1px solid var(--ft-border);
  border-radius: 18px;
  width: min(720px, 94vw);
  height: min(480px, 86vh);
  overflow: hidden;
  color: var(--ft-text);
}

.ft-settings-rail {
  width: 150px;
  flex-shrink: 0;
  background: var(--ft-surface-2);
  border-inline-end: 1px solid var(--ft-border);
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ft-settings-title {
  font-weight: 700;
  padding: 4px 10px 12px;
  font-size: 0.95rem;
}

.ft-settings-tab {
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: none;
  color: var(--ft-text-2);
  font-family: inherit;
  font-size: 0.84rem;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-align: right;
}

.ft-settings-tab:hover { background: rgba(255, 255, 255, 0.06); color: var(--ft-text); }
.ft-settings-tab.active { background: var(--ft-accent); color: #fff; }

.ft-settings-body {
  flex: 1;
  min-height: 0;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ft-settings-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ft-accent) transparent;
}

.ft-settings-scroll::-webkit-scrollbar {
  width: 8px;
}
.ft-settings-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.ft-settings-scroll::-webkit-scrollbar-thumb {
  background: var(--ft-accent);
  border-radius: 999px;
}
.ft-settings-scroll::-webkit-scrollbar-thumb:hover {
  background: #5c97ff;
}

.ft-settings-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  margin-bottom: 18px;
  font-size: 1rem;
}

.ft-settings-head .mahfel-tool-btn { width: 32px; height: 32px; }

.ft-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--ft-border);
  font-size: 0.85rem;
  cursor: pointer;
}

.ft-room-code {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ft-surface-2);
  border: 1px solid var(--ft-border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.9rem;
}

.ft-room-code .mahfel-tool-btn { width: 32px; height: 32px; }

/* ---------- video cell overlays ---------- */
.lk-video-cell.speaking {
  border-color: var(--ft-accent-2);
  box-shadow: 0 0 0 2px rgba(112, 249, 184, 0.65), 0 8px 24px rgba(0, 0, 0, 0.35);
}

.lk-video-cell.speaking .lk-name-ico {
  color: var(--ft-accent-2);
}

.lk-status {
  display: none;
}

.lk-level {
  position: absolute;
  top: auto;
  bottom: 8px;
  left: auto;
  right: 8px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
  z-index: 3;
  pointer-events: none;
}

.lk-level i {
  width: 3px;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  display: block;
}

.lk-level i:nth-child(1).on { height: 5px; }
.lk-level i:nth-child(2).on { height: 9px; }
.lk-level i:nth-child(3).on { height: 13px; }
.lk-level i:nth-child(4).on { height: 17px; }
.lk-level i:nth-child(5).on { height: 21px; }
.lk-level i.on { background: var(--ft-accent-2); }

.lk-mic-btn,
.lk-menu-btn,
.lk-pin-btn,
.lk-mirror-btn,
.lk-snap-btn {
  position: absolute;
  top: 8px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  padding: 0;
}

/* آیکون‌های بدون پس‌زمینه روی ویدیو (پین / آینه / سه‌نقطه / عکس) */
.lk-pin-btn,
.lk-mirror-btn,
.lk-menu-btn,
.lk-snap-btn {
  background: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

.lk-mirror-btn {
  color: #fff;
}

.lk-pin-btn {
  left: 8px;
  right: auto;
  display: none;
}
.lk-mirror-btn {
  left: 38px;
  right: auto;
}
.lk-mic-btn {
  right: 8px;
  left: auto;
  border-radius: 999px;
  background: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
.lk-menu-btn { left: 68px; right: auto; }

.lk-snap-btn {
  top: auto;
  bottom: 8px;
  left: 8px;
  right: auto;
}

.lk-mic-btn.muted {
  background: transparent;
}

.lk-mic-btn.readonly {
  cursor: default;
  opacity: 0.9;
}

.lk-video-cell:hover .lk-pin-btn,
.lk-video-cell:hover .lk-mirror-btn,
.lk-video-cell:hover .lk-snap-btn,
.lk-pin-btn.active,
.lk-mirror-btn.active {
  display: inline-flex;
}

.lk-mic-btn:hover,
.lk-snap-btn:hover { background: rgba(0, 0, 0, 0.82); }

.lk-pin-btn:hover,
.lk-menu-btn:hover { background: rgba(0, 0, 0, 0.45); border-radius: 999px; }

.lk-mirror-btn:hover { background: rgba(0, 0, 0, 0.45); border-radius: 999px; }

.lk-mic-btn:not(.muted):hover { background: rgba(0, 0, 0, 0.45); }

.lk-mic-btn.muted:hover { background: rgba(0, 0, 0, 0.45); }

.lk-video-cell.menu-open {
  overflow: visible;
  z-index: 8;
}

.lk-menu,
.lk-scope {
  position: absolute;
  top: 40px;
  left: 8px;
  right: auto;
  background: rgba(30, 30, 30, 0.97);
  border: 1px solid var(--ft-border);
  border-radius: 12px;
  padding: 5px;
  min-width: 200px;
  display: none;
  z-index: 9;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
}

.lk-scope { min-width: 120px; }

.lk-menu.open,
.lk-scope.open { display: block; }

.lk-menu button,
.lk-scope button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--ft-text);
  font-family: inherit;
  font-size: 0.78rem;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-align: right;
}

.lk-menu button .lk-mi {
  flex: 0 0 auto;
  display: inline-flex;
  color: rgba(255, 255, 255, 0.72);
}

.lk-menu button .lk-mi svg { width: 15px; height: 15px; }

.lk-menu button .lk-mi-txt { flex: 1 1 auto; }

.lk-menu button.lk-menu-promote {
  color: var(--ft-accent);
  font-weight: 600;
}

.lk-menu button.lk-menu-promote .lk-mi { color: var(--ft-accent); }

.mahfel-remote-grid.has-pin > .lk-filmstrip .lk-pin-btn,
.mahfel-remote-grid.has-pin > .lk-filmstrip .lk-mic-btn,
.mahfel-remote-grid.has-pin > .lk-filmstrip .lk-menu-btn,
.mahfel-remote-grid.has-pin > .lk-filmstrip .lk-mirror-btn,
.mahfel-remote-grid.has-pin > .lk-filmstrip .lk-snap-btn {
  width: 22px;
  height: 22px;
  top: 4px;
}

.mahfel-remote-grid.has-pin > .lk-filmstrip .lk-pin-btn { left: 4px; right: auto; }
.mahfel-remote-grid.has-pin > .lk-filmstrip .lk-mic-btn { right: 4px; left: auto; }
.mahfel-remote-grid.has-pin > .lk-filmstrip .lk-menu-btn { left: 48px; right: auto; }
.mahfel-remote-grid.has-pin > .lk-filmstrip .lk-mirror-btn { left: 26px; right: auto; }
.mahfel-remote-grid.has-pin > .lk-filmstrip .lk-snap-btn { top: auto; bottom: 4px; left: 4px; right: auto; }

.lk-menu button:hover,
.lk-scope button:hover { background: rgba(255, 255, 255, 0.08); }

.lk-mirrored { transform: scaleX(-1); }

/* جابه‌جایی کاشی‌ها با درگ (فقط سخنران) */
.lk-video-cell[draggable="true"] {
  cursor: grab;
}

.lk-video-cell.lk-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.lk-video-cell.lk-drop-before::before,
.lk-video-cell.lk-drop-after::after {
  content: '';
  position: absolute;
  top: 6%;
  bottom: 6%;
  width: 4px;
  border-radius: 3px;
  background: var(--ft-accent);
  box-shadow: 0 0 8px rgba(58, 130, 255, 0.8);
  z-index: 6;
  pointer-events: none;
}

.lk-video-cell.lk-drop-before::before { inset-inline-start: 2px; }
.lk-video-cell.lk-drop-after::after { inset-inline-end: 2px; }

.lk-video-cell.lk-drop-v.lk-drop-before::before {
  inset-inline-start: 6%;
  inset-inline-end: 6%;
  top: 2px;
  bottom: auto;
  width: auto;
  height: 4px;
}

.lk-video-cell.lk-drop-v.lk-drop-after::after {
  inset-inline-start: 6%;
  inset-inline-end: 6%;
  bottom: 2px;
  top: auto;
  width: auto;
  height: 4px;
}

/* ===== نمای سخنران: سخنران تمام‌قد + نوار مهمانان ===== */
/* قاب: بالا/پایین = ستونی، چپ/راست = ردیفی */
.mahfel-remote-grid.has-pin.layout-speaker,
.mahfel-remote-grid.has-pin.layout-speaker-top,
.mahfel-remote-grid.has-pin.layout-speaker-bottom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  overflow: hidden;
  grid-template-columns: unset;
  grid-template-rows: unset;
}

.mahfel-remote-grid.has-pin.layout-speaker-bottom {
  flex-direction: column-reverse;
}

.mahfel-remote-grid.has-pin.layout-speaker-left,
.mahfel-remote-grid.has-pin.layout-speaker-right {
  display: flex;
  flex-direction: row;
  direction: ltr;
  align-items: stretch;
  gap: 10px;
  overflow: hidden;
  grid-template-columns: unset;
}

.mahfel-remote-grid.has-pin.layout-speaker-right {
  flex-direction: row-reverse;
}

/* ترتیب کاشی‌های مهمان همچنان راست‌به‌چپ بماند */
/* اسکرول‌بار نوار مهمانان سمت راست — ترتیب کاشی‌ها را applyTileOrder می‌دهد */
.mahfel-remote-grid.has-pin.layout-speaker-left > .lk-filmstrip,
.mahfel-remote-grid.has-pin.layout-speaker-right > .lk-filmstrip {
  direction: ltr;
}

.mahfel-remote-grid.has-pin.layout-speaker-left > .lk-filmstrip > .lk-video-cell,
.mahfel-remote-grid.has-pin.layout-speaker-right > .lk-filmstrip > .lk-video-cell {
  direction: rtl;
}

/* وقتی فقط سخنران پین است */
.mahfel-remote-grid.has-pin:not(:has(.lk-filmstrip .lk-video-cell)):not(:has(.lk-video-cell:not(.lk-pinned):not(.lk-local-main))),
.mahfel-remote-grid.layout-focus.has-pin {
  justify-content: center;
}

/* نوار خالی مهمانان فضا نگیرد — سخنرانِ تنها کل صحنه را پر می‌کند */
.mahfel-remote-grid.has-pin > .lk-filmstrip:not(:has(.lk-video-cell)) {
  display: none;
}

/* کاشی پین همیشه اولین آیتم باشد — حتی وقتی applyTileOrder به آن order بزرگ‌تر داده
   (در حالت فیلم اعمال نمی‌شود تا JS بتواند ترتیب پرزنتر → سخنرانِ فعال → بقیه را بدهد) */
.mahfel-main:not(.film-mode) .mahfel-remote-grid.has-pin > .lk-video-cell.lk-pinned {
  order: -1 !important;
}

/* کاشی پین در حالت شبکه (بدون نمای سخنران) */
.mahfel-remote-grid.has-pin > .lk-video-cell.lk-pinned {
  flex: 0 0 auto;
  width: min(100%, 42vh);
  max-width: 480px;
  /* سخنران: مربع واقعی با ارتفاع صریح (نه padding-bottom) */
  height: auto;
  padding-bottom: 0;
  aspect-ratio: 1 / 1;
  min-height: 180px;
  max-height: min(48vh, 520px);
  justify-self: center;
}

/* نمای سخنران: کاشی سخنران تمام فضای باقی‌ماندهٔ صحنه را پر می‌کند */
.mahfel-remote-grid.has-pin.layout-speaker > .lk-video-cell.lk-pinned,
.mahfel-remote-grid.layout-focus.has-pin > .lk-video-cell.lk-pinned {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  height: auto;
  min-height: 0;
  max-height: none;
  padding-bottom: 0;
  aspect-ratio: unset;
  align-self: stretch;
  justify-self: stretch;
}

.mahfel-remote-grid.layout-focus.has-pin {
  display: flex;
}

.mahfel-remote-grid.has-pin > .lk-video-cell.lk-pinned video,
.mahfel-remote-grid.layout-focus .lk-video-cell.lk-pinned video {
  position: absolute;
  inset: 0;
  object-fit: cover;
  background: #000;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* نوار مهمانان — پیش‌فرض: نوار افقی زیر/بالای سخنران که به اندازهٔ محتوا جمع می‌شود */
.mahfel-remote-grid.has-pin.layout-speaker > .lk-filmstrip {
  --ft-tile: 148px;
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-height: 42%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 2px 4px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--ft-accent) transparent;
}

.mahfel-remote-grid.has-pin > .lk-filmstrip::-webkit-scrollbar {
  width: 8px;
}
.mahfel-remote-grid.has-pin > .lk-filmstrip::-webkit-scrollbar-track {
  background: transparent;
}
.mahfel-remote-grid.has-pin > .lk-filmstrip::-webkit-scrollbar-thumb {
  background: var(--ft-accent);
  border-radius: 999px;
}
.mahfel-remote-grid.has-pin > .lk-filmstrip::-webkit-scrollbar-thumb:hover {
  background: #5c97ff;
}

.mahfel-remote-grid.has-pin > .lk-filmstrip.dense {
  --ft-tile: 100px;
  gap: 6px;
}

.mahfel-remote-grid.has-pin > .lk-filmstrip.ultra-dense {
  --ft-tile: 84px;
  gap: 5px;
}

/* نوار کناری (سخنران چپ/راست): ردیف‌ها ارتفاع ستون را برابر پر می‌کنند تا کاشی‌ها بزرگ بمانند */
.mahfel-remote-grid.has-pin.layout-speaker-left > .lk-filmstrip,
.mahfel-remote-grid.has-pin.layout-speaker-right > .lk-filmstrip {
  --strip-cols: 1;
  --ft-tile: clamp(190px, 24%, 300px);
  flex: 0 1 auto;
  width: calc(var(--strip-cols) * var(--ft-tile) + (var(--strip-cols) - 1) * 8px + 8px);
  max-width: 46%;
  height: auto;
  max-height: none;
  display: grid;
  grid-template-columns: repeat(var(--strip-cols), minmax(0, 1fr));
  grid-auto-rows: minmax(84px, 1fr);
  align-content: stretch;
  justify-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 4px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* یک یا دو مهمان: کاشی‌های بزرگ‌تر که وسط ستون جمع می‌شوند */
.mahfel-remote-grid.has-pin.layout-speaker-left > .lk-filmstrip:not(:has(> .lk-video-cell:nth-child(3))),
.mahfel-remote-grid.has-pin.layout-speaker-right > .lk-filmstrip:not(:has(> .lk-video-cell:nth-child(3))) {
  --ft-tile: clamp(200px, 30%, 340px);
  grid-auto-rows: minmax(84px, 38%);
  align-content: safe center;
}

/* ۴ مهمان یا بیشتر → دو ستون (۵ نفر = سخنران + گرید ۲×۲ مهمان) */
.mahfel-remote-grid.has-pin.layout-speaker-left > .lk-filmstrip:has(> .lk-video-cell:nth-child(4)),
.mahfel-remote-grid.has-pin.layout-speaker-right > .lk-filmstrip:has(> .lk-video-cell:nth-child(4)) {
  --strip-cols: 2;
  --ft-tile: clamp(160px, 20%, 240px);
}

/* ۱۳ مهمان یا بیشتر → سه ستون */
.mahfel-remote-grid.has-pin.layout-speaker-left > .lk-filmstrip:has(> .lk-video-cell:nth-child(13)),
.mahfel-remote-grid.has-pin.layout-speaker-right > .lk-filmstrip:has(> .lk-video-cell:nth-child(13)) {
  --strip-cols: 3;
  --ft-tile: clamp(130px, 14%, 190px);
}

.mahfel-remote-grid.has-pin.layout-speaker-left > .lk-filmstrip.dense,
.mahfel-remote-grid.has-pin.layout-speaker-right > .lk-filmstrip.dense {
  --ft-tile: 112px;
}

.mahfel-remote-grid.has-pin.layout-speaker-left > .lk-filmstrip.ultra-dense,
.mahfel-remote-grid.has-pin.layout-speaker-right > .lk-filmstrip.ultra-dense {
  --ft-tile: 96px;
}

/* کاشی‌های مهمان: مستطیل ۱۶:۹ مانند نماهای مرسوم */
.mahfel-remote-grid.has-pin.layout-speaker > .lk-filmstrip .lk-video-cell {
  flex: 0 0 var(--ft-tile);
  width: var(--ft-tile);
  height: auto;
  padding-bottom: 0;
  aspect-ratio: 16 / 9;
  min-height: 0;
  max-height: none;
  align-self: flex-start;
}

.mahfel-remote-grid.has-pin.layout-speaker-left > .lk-filmstrip .lk-video-cell,
.mahfel-remote-grid.has-pin.layout-speaker-right > .lk-filmstrip .lk-video-cell {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: unset;
  align-self: stretch;
}

.mahfel-remote-grid.has-pin > .lk-filmstrip .lk-video-cell video {
  position: absolute;
  inset: 0;
  object-fit: cover;
}

.mahfel-remote-grid.has-pin > .lk-filmstrip .lk-name {
  font-size: 0.68rem;
  padding: 4px 6px;
}

.mahfel-remote-grid.layout-speaker:not(.has-pin) .lk-video-cell:first-child,
.mahfel-remote-grid.layout-speaker-top:not(.has-pin) .lk-video-cell:first-child {
  grid-column: 1 / -1;
  width: min(100%, 52vh);
  max-width: 560px;
  height: auto;
  padding-bottom: 0;
  aspect-ratio: 1 / 1;
  justify-self: center;
}

/* ---------- نمای شبکه: کاشی‌ها کل صحنه را پر می‌کنند ---------- */
.mahfel-remote-grid.layout-grid {
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
  align-items: stretch;
  justify-items: stretch;
}

.mahfel-remote-grid.layout-grid .lk-video-cell {
  height: 100%;
  padding-bottom: 0;
  align-self: stretch;
}

/* کاشی پین در شبکه مثل بقیهٔ کاشی‌ها سلول خودش را پر می‌کند */
.mahfel-remote-grid.layout-grid.has-pin > .lk-video-cell.lk-pinned {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  max-height: none;
  padding-bottom: 0;
  aspect-ratio: unset;
  justify-self: stretch;
}

/* تعداد ستون‌ها نزدیک به √n — صفحه همیشه پر می‌ماند */
.mahfel-remote-grid.layout-grid:not(:has(> .lk-video-cell:nth-child(2))) {
  grid-template-columns: 1fr;
}
.mahfel-remote-grid.layout-grid:has(> .lk-video-cell:nth-child(2)):not(:has(> .lk-video-cell:nth-child(5))) {
  grid-template-columns: repeat(2, 1fr);
}
.mahfel-remote-grid.layout-grid:has(> .lk-video-cell:nth-child(5)):not(:has(> .lk-video-cell:nth-child(10))) {
  grid-template-columns: repeat(3, 1fr);
}
.mahfel-remote-grid.layout-grid:has(> .lk-video-cell:nth-child(10)):not(:has(> .lk-video-cell:nth-child(17))) {
  grid-template-columns: repeat(4, 1fr);
}
.mahfel-remote-grid.layout-grid:has(> .lk-video-cell:nth-child(17)):not(:has(> .lk-video-cell:nth-child(26))) {
  grid-template-columns: repeat(5, 1fr);
}
.mahfel-remote-grid.layout-grid:has(> .lk-video-cell:nth-child(26)) {
  grid-template-columns: repeat(6, 1fr);
}

/* یک‌به‌یک */
.mahfel-remote-grid.layout-focus .lk-video-cell:not(.lk-pinned) {
  display: none;
}

.mahfel-remote-grid.layout-focus > .lk-filmstrip {
  display: none;
}

/* آیکون‌های منوی چیدمان */
.ft-popup-layout {
  min-width: 220px;
}

.ft-layout-ico {
  width: 22px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  position: relative;
  flex-shrink: 0;
  opacity: 0.85;
  display: inline-block;
}

.ft-layout-ico.grid {
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
}

.ft-layout-ico.sp-top::after,
.ft-layout-ico.sp-bottom::after,
.ft-layout-ico.sp-left::after,
.ft-layout-ico.sp-right::after,
.ft-layout-ico.focus::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  opacity: 0.55;
}

.ft-layout-ico.sp-top::after { left: 3px; right: 3px; top: 2px; height: 5px; }
.ft-layout-ico.sp-bottom::after { left: 3px; right: 3px; bottom: 2px; height: 5px; }
.ft-layout-ico.sp-left::after { top: 2px; bottom: 2px; left: 2px; width: 5px; }
.ft-layout-ico.sp-right::after { top: 2px; bottom: 2px; right: 2px; width: 5px; }
.ft-layout-ico.focus::after { inset: 3px; opacity: 0.35; }

/* ---------- reactions ---------- */
.ft-reaction {
  position: absolute;
  bottom: 90px;
  font-size: 2rem;
  z-index: 70;
  animation: ft-float-up 3s ease-out forwards;
  pointer-events: none;
}

@keyframes ft-float-up {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  12% { opacity: 1; transform: translateY(-14px) scale(1.15); }
  100% { transform: translateY(-160px) scale(1); opacity: 0; }
}

.mahfel-drawer-btn {
  display: none;
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 36px;
  height: 64px;
  border: none;
  border-radius: 12px 0 0 12px;
  background: var(--ft-accent);
  color: #fff;
  cursor: pointer;
  z-index: 600;
  align-items: center;
  justify-content: center;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.4);
}

.mahfel-drawer-btn.is-hidden {
  display: none !important;
}

.mahfel-sidebar-backdrop {
  display: none;
}

@media (max-width: 860px) {
  .mahfel-drawer-btn {
    display: flex;
  }

  .mahfel-drawer-btn.is-hidden {
    display: none !important;
  }

  .mahfel-sidebar,
  .mahfel-sidebar.pinned,
  .mahfel-sidebar.floating {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: min(320px, 86vw);
    height: auto;
    background: var(--ft-bg);
    padding: 10px;
    transform: translateX(100%);
    transition: transform 0.22s ease;
    z-index: 550;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5);
    border-radius: 0;
  }

  .mahfel-sidebar.compact,
  .mahfel-sidebar.compact.open {
    top: 8px;
    bottom: 8px;
    right: 10px;
    left: auto;
    width: min(280px, 88vw);
    height: auto;
    max-height: none;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0;
    transform: none;
    border-radius: 0;
  }

  .mahfel-sidebar.open,
  .mahfel-sidebar.pinned.open,
  .mahfel-sidebar.floating.open {
    transform: translateX(0);
  }

  .mahfel-sidebar.compact.open {
    transform: none;
  }

  .mahfel-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 540;
  }

  .mahfel-body {
    padding: 8px;
    gap: 8px;
  }

  .mahfel-remote-grid {
    inset: 8px;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
  }

  .mahfel-local {
    border-radius: 10px;
  }

  .ft-dock.mahfel-toolbar {
    padding: 6px 10px;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: safe center;
  }

  .ft-dock.mahfel-toolbar::-webkit-scrollbar {
    display: none;
  }

  .ft-dock-group {
    gap: 6px;
  }

  .mahfel-tool-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .ft-popup {
    min-width: 230px;
    max-width: 88vw;
    bottom: calc(100% + 10px);
    max-height: 74vh;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .ft-toast {
    top: auto;
    bottom: 12px;
    left: 12px;
    right: 12px;
    transform: none;
    max-width: none;
    width: auto;
  }

  .ft-stage-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .ft-stage-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
  }

  .mahfel-whiteboard-header .ft-stage-actions {
    justify-content: center;
  }

  .ft-pres-pager {
    bottom: 78px;
  }

  .ft-chip {
    padding: 4px 9px;
    font-size: 0.68rem;
  }

  .ft-settings {
    flex-direction: column;
    height: 92vh;
    width: 96vw;
  }

  .ft-settings-rail {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
    border-inline-end: none;
    border-bottom: 1px solid var(--ft-border);
  }

  .ft-settings-title { display: none; }

  .ft-settings-tab span { display: none; }
  .ft-settings-tab { padding: 10px 14px; }

  .mahfel-remote-grid.has-pin {
    gap: 8px;
  }

  .mahfel-remote-grid.has-pin > .lk-video-cell.lk-pinned {
    width: min(100%, 34vh);
    min-height: 120px;
    max-width: 360px;
  }

  .mahfel-remote-grid.has-pin > .lk-filmstrip {
    --ft-tile: 96px;
    gap: 6px;
  }

  .mahfel-remote-grid.has-pin.layout-speaker-left > .lk-filmstrip,
  .mahfel-remote-grid.has-pin.layout-speaker-right > .lk-filmstrip {
    --ft-tile: 104px;
    max-width: 40%;
  }

  .mahfel-remote-grid.has-pin > .lk-filmstrip.ultra-dense {
    --ft-tile: 76px;
  }

  .mahfel-join-card {
    padding: 26px 20px 20px;
  }

  .mahfel-join-layout .mahfel-join-briefing {
    width: min(400px, 100%);
    max-width: 94vw;
    max-height: none;
  }

  .mahfel-role-row {
    flex-direction: column;
  }

  .ft-files-card {
    width: min(560px, 96vw);
    padding: 12px;
  }

  .ft-files-row,
  .ft-files-row.head {
    grid-template-columns: 1fr 64px auto;
    gap: 6px;
    padding: 10px;
  }
}
/* ---------- stage chrome (whiteboard / presentation) ---------- */
.ft-stage {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative;
}

.ft-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ft-border);
  background: rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.ft-stage-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  min-width: 0;
}

.ft-stage-title strong,
.ft-stage-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ft-stage-meta {
  color: var(--ft-text-2);
  font-weight: 500;
  font-size: 0.78rem;
}

.ft-stage-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mahfel-tool-btn.ft-file-mgr-btn {
  width: auto;
  height: 36px;
  padding: 0 12px;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.ft-stage-close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  margin-inline-end: 8px;
  background: rgba(240, 68, 56, 0.18);
  color: #ff8f86;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ft-stage-close:hover {
  background: rgba(240, 68, 56, 0.35);
  color: #fff;
}

.ft-stage-close.sm {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.ft-pres-pager {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ft-overlay);
  border: 1px solid var(--ft-border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.8rem;
  z-index: 5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* ---------- sidebar chrome / pin / float ---------- */
.ft-sidebar-chrome {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--ft-border);
  flex-shrink: 0;
}

.ft-icon-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ft-text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.ft-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ft-text);
}

.ft-icon-btn.active {
  background: rgba(59, 130, 246, 0.16);
  color: var(--ft-accent);
}

.ft-sidebar-more {
  position: relative;
  flex-shrink: 0;
  z-index: 7;
}

/* بالاتر از بک‌دراپ پاپ‌آپ (85) و بک‌دراپ سایدبار موبایل (540)؛ با specificity بالاتر تا
   قواعد pinned/compact و چیدمان موبایل آن را خنثی نکنند */
.mahfel-sidebar.menu-open,
.mahfel-sidebar.compact.pinned.menu-open,
.mahfel-body .mahfel-sidebar.menu-open {
  z-index: 560;
}

.ft-sidebar-menu-dismiss {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.ft-sidebar-chrome {
  position: relative;
  z-index: 6;
}

.ft-sidebar-more .ft-popup.ft-popup-down {
  top: calc(100% + 6px);
  bottom: auto;
  inset-inline-start: auto;
  inset-inline-end: auto;
  left: 0;
  right: auto;
  transform: none;
  min-width: 230px;
  width: max-content;
  max-width: min(260px, 72vw);
}

/* پاپ‌آپ‌های هدر کارت جمع‌وجور (مثل منوی دست‌ها) به کل عرض هدر لنگر می‌شوند تا
   توسط overflow:hidden کارت بریده نشوند */
.ft-compact-head {
  position: relative;
}

.ft-compact-head .ft-sidebar-more {
  position: static;
}

.ft-compact-head .ft-sidebar-more .ft-popup.ft-popup-down {
  top: calc(100% + 6px);
  left: 10px;
  right: 10px;
  width: auto;
  min-width: 0;
  max-width: none;
}

.ft-chatmenu .ft-popup-item[role="button"] {
  cursor: pointer;
}

.ft-chatmenu-hint {
  margin: 6px 10px 8px;
  font-size: 0.72rem;
  color: var(--ft-warning, #f0b44a);
  line-height: 1.7;
}

.ft-sidebar-chrome .ft-sidebar-tabs {
  flex: 1;
  min-width: 0;
  width: auto;
  border-bottom: none;
}

.ft-sidebar-chrome .ft-sidebar-tab {
  min-width: 0;
  white-space: nowrap;
  padding: 8px 6px;
  font-size: 0.78rem;
}

.mahfel-sidebar:not(.open) {
  display: none;
}

.mahfel-sidebar.floating {
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: 14px;
  width: min(320px, 88vw);
  z-index: 120;
  background: var(--ft-bg);
  padding: 0;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  border-radius: var(--ft-radius);
}

.mahfel-sidebar.floating .mahfel-panel {
  border: 1px solid var(--ft-border);
}

.mahfel-sidebar.compact {
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: 14px;
  left: auto;
  width: min(250px, 86vw);
  height: auto;
  max-height: none;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  padding: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mahfel-sidebar.compact.open {
  display: flex;
}

/* سایدبار جمع‌وجور سنجاق‌شده: ستون ثابت سمت راست (کاربران + پیام‌ها روی هم) */
@media (min-width: 861px) {
  .mahfel-sidebar.compact.pinned {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(260px, 24vw);
    max-height: none;
    transform: none;
    z-index: 40;
    flex-shrink: 0;
  }
}

/* صحنه (ارائه/تخته) روی کل ناحیه بدنه — بالای پنل کاربران و پیام‌ها */
.mahfel-body.stage-cover .mahfel-main {
  position: absolute;
  inset: 0;
  z-index: 60;
  border-radius: 0;
  border: none;
}

.ft-compact-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.ft-compact-card {
  background: rgba(32, 32, 32, 0.96);
  border: 1px solid var(--ft-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  min-height: 0;
}

.ft-compact-users,
.ft-compact-chat {
  flex: 1 1 0;
  min-height: 0;
}

.ft-compact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 10px 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ft-compact-title {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--ft-text);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ft-compact-title svg {
  width: 12px;
  height: 12px;
}

.ft-compact-title .ft-count-badge {
  height: 15px;
  min-width: 15px;
  padding: 0 5px;
  font-size: 0.6rem;
}

.ft-compact-title b {
  color: var(--ft-accent);
  font-weight: 700;
}

.ft-compact-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ft-accent);
  display: inline-block;
}

.ft-compact-expand {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #f0f0f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ft-compact-expand svg {
  width: 15px;
  height: 15px;
}

.ft-compact-expand:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ft-text);
}

.ft-compact-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.ft-compact-expand.active {
  background: rgba(59, 130, 246, 0.16);
  color: var(--ft-accent);
}

.ft-hand-btn {
  position: relative;
}

.ft-compact-head .ft-badge {
  min-width: 14px;
  height: 14px;
  font-size: 0.58rem;
  top: -4px;
  inset-inline-start: -4px;
}

.ft-hand-btn.has-hands {
  color: #eab308;
}

.ft-hand-btn.active {
  background: rgba(234, 179, 8, 0.16);
  color: #eab308;
}

.ft-compact-user-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ft-compact-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 4px 8px;
  padding: 8px 12px;
  font-size: 0.84rem;
  color: var(--ft-text);
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
}

.ft-compact-user:hover {
  background: rgba(255, 255, 255, 0.05);
}

.ft-compact-user .ft-cu-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  color: var(--ft-text-2);
}

/* آواتار رنگی حرف اول نام — رنگ هر کاربر از روی identity ثابت است */
.ft-cu-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--av, var(--ft-accent));
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.18);
}

.ft-compact-user .ft-cu-name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ft-text);
  font-size: 0.72rem;
}

.ft-compact-user .ft-rename-input {
  flex: 1;
  min-width: 0;
  background: var(--ft-surface-2);
  border: 1px solid var(--ft-accent);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--ft-text);
  font-family: inherit;
  font-size: 0.72rem;
  outline: none;
}

.ft-compact-user .ft-cu-flags {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  color: var(--ft-text-2);
}

/* آیکون‌های فرعی ردیف کاربر — پیش‌فرض مخفی‌اند و فقط با هاور یا کلیک روی ردیف (cu-open) دیده می‌شوند */
.ft-cu-more {
  display: none;
  align-items: center;
  gap: 5px;
}

.ft-compact-user:hover .ft-cu-more,
.ft-compact-user.cu-open .ft-cu-more {
  display: inline-flex;
}

.ft-cu-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.ft-cu-flag.acc {
  color: #9dc0ff;
  background: rgba(96, 165, 250, 0.18);
  border-color: rgba(96, 165, 250, 0.45);
}

.ft-cu-flag.warn {
  color: #1f2937;
  background: #facc15;
  border-color: #a16207;
}

.ft-cu-flag.grant {
  color: #c4b5fd;
  background: rgba(167, 139, 250, 0.18);
  border-color: rgba(167, 139, 250, 0.45);
}

.ft-cu-flag.live {
  color: var(--ft-accent-2);
  background: rgba(112, 249, 184, 0.15);
  border-color: rgba(112, 249, 184, 0.5);
}

/* متر سطح صدای واقعی در ردیف کاربر — میله‌های ریز داخل خودِ آیکون میکروفون */
.ft-cu-flag.has-level {
  height: 20px;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 1px 0;
  box-sizing: border-box;
}

.ft-cu-level {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  height: auto;
  pointer-events: none;
  flex-shrink: 0;
}

.ft-cu-level i {
  width: 3px;
  height: 3px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.ft-check-label {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-weight: 400;
}

.ft-settings-hint {
  display: block;
  color: var(--ft-text-2);
  font-size: 0.68rem;
  margin-top: 3px;
  padding-inline-start: 24px;
}

.ft-cu-flag.mic-off,
.ft-user-mic.mic-off { color: #ff7b7b; }
.ft-cu-flag.mic-off {
  background: rgba(248, 113, 113, 0.16);
  border-color: rgba(248, 113, 113, 0.45);
}

.ft-cu-flag.mic-on,
.ft-user-mic.mic-on { color: #e8ecf3; }

.ft-cu-flag.mic-speaking,
.ft-user-mic.mic-speaking {
  color: var(--ft-accent-2);
  animation: ft-mic-pulse 1.2s ease-in-out infinite;
}
.ft-cu-flag.mic-speaking {
  background: rgba(112, 249, 184, 0.15);
  border-color: rgba(112, 249, 184, 0.5);
}
.ft-user-mic.mic-speaking {
  background: rgba(112, 249, 184, 0.15);
  border: 1px solid rgba(112, 249, 184, 0.5);
  border-radius: 999px;
  padding: 1px 5px;
}

.ft-user-mic {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-style: normal;
}

@keyframes ft-mic-pulse {
  50% { opacity: 0.5; }
}

.ft-cu-admin {
  display: none;
  align-items: center;
  gap: 3px;
}

.ft-compact-user:hover .ft-cu-admin {
  display: inline-flex;
}

.ft-cu-admin button {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: var(--ft-surface-2);
  color: var(--ft-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.ft-cu-admin button:hover { background: var(--ft-hover); color: var(--ft-text); }
.ft-cu-admin button.danger:hover { background: rgba(240, 68, 56, 0.25); color: #ff8f86; }

.ft-cu-perm, .ft-cu-pm {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border: 1px solid var(--ft-border);
  border-radius: 6px;
  background: var(--ft-surface-2);
  color: var(--ft-text-2);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.ft-cu-perm:hover, .ft-cu-pm:hover { background: var(--ft-hover); color: var(--ft-text); border-color: rgba(0, 0, 0, 0.2); }

.ft-cu-perm.pm-on, .ft-cu-pm.pm-on {
  color: var(--ft-accent);
  border-color: var(--ft-accent);
  background: rgba(92, 151, 255, 0.12);
}

.ft-pm-target {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 10px 6px;
  padding: 5px 10px;
  font-size: 0.75rem;
  color: var(--ft-text-2);
  background: rgba(92, 151, 255, 0.08);
  border: 1px solid rgba(92, 151, 255, 0.35);
  border-radius: 8px;
}

.ft-pm-target > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ft-pm-target b { color: var(--ft-text); font-weight: 600; }

.ft-pm-target button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ft-text-2);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.ft-pm-target button:hover { color: var(--ft-text); background: var(--ft-hover); }

.ft-perms-panel {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: var(--ft-surface);
  border-radius: var(--ft-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ft-perms-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px;
  border-bottom: 1px solid var(--ft-border);
  flex-shrink: 0;
}

.ft-perms-title {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ft-perms-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px 12px;
  min-height: 0;
  direction: ltr;
}

.ft-perms-body > * {
  direction: rtl;
}

.ft-perms-body .ft-popup-item {
  border-radius: 8px;
  padding: 10px 10px;
}

.ft-compact-user.presenter .ft-cu-name > span {
  color: var(--ft-accent);
}

.ft-compact-user.speaking {
  background: rgba(112, 249, 184, 0.08);
  border-color: rgba(112, 249, 184, 0.55);
}

.ft-speaking-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ft-accent-2);
  box-shadow: 0 0 6px rgba(112, 249, 184, 0.8);
  animation: ft-mic-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

.ft-compact-empty {
  padding: 14px;
  text-align: center;
  color: var(--ft-text-2);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ft-compact-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mahfel-chat-messages,
.mahfel-user-list,
.ft-compact-messages,
.ft-compact-user-list {
  scrollbar-width: thin;
  scrollbar-color: var(--ft-accent) transparent;
  /* اسکرول‌بار سمت راست */
  direction: ltr;
}

/* محتوای داخلی هر ردیف/حباب همچنان راست‌به‌چپ بماند */
.mahfel-chat-messages > *,
.mahfel-user-list > *,
.ft-compact-messages > *,
.ft-compact-user-list > * {
  direction: rtl;
}

/* جبران چینش حباب‌ها: در کانتینر ltr سمت flex-start/flex-end برعکس می‌شود */
.mahfel-chat-messages .mahfel-chat-bubble,
.ft-compact-messages .mahfel-chat-bubble {
  align-self: flex-end;
}

.mahfel-chat-messages .mahfel-chat-bubble.me,
.ft-compact-messages .mahfel-chat-bubble.me {
  align-self: flex-start;
}

.mahfel-chat-messages::-webkit-scrollbar,
.mahfel-user-list::-webkit-scrollbar,
.ft-compact-messages::-webkit-scrollbar,
.ft-compact-user-list::-webkit-scrollbar {
  width: 8px;
}

.mahfel-chat-messages::-webkit-scrollbar-track,
.mahfel-user-list::-webkit-scrollbar-track,
.ft-compact-messages::-webkit-scrollbar-track,
.ft-compact-user-list::-webkit-scrollbar-track {
  background: transparent;
}

.mahfel-chat-messages::-webkit-scrollbar-thumb,
.mahfel-user-list::-webkit-scrollbar-thumb,
.ft-compact-messages::-webkit-scrollbar-thumb,
.ft-compact-user-list::-webkit-scrollbar-thumb {
  background: var(--ft-accent);
  border-radius: 999px;
}

.mahfel-chat-messages::-webkit-scrollbar-thumb:hover,
.mahfel-user-list::-webkit-scrollbar-thumb:hover,
.ft-compact-messages::-webkit-scrollbar-thumb:hover,
.ft-compact-user-list::-webkit-scrollbar-thumb:hover {
  background: #5c97ff;
}

.ft-compact-locked {
  padding: 10px;
  text-align: center;
  color: var(--ft-text-2);
  font-size: 0.78rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ft-compact-input {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 10px 10px;
  padding: 6px 6px 6px 6px;
  background: rgba(18, 18, 18, 0.95);
  border: 1px solid var(--ft-border);
  border-radius: 999px;
}

.ft-compact-input input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--ft-text);
  font-family: inherit;
  font-size: 0.8rem;
  outline: none;
  text-align: right;
}

.ft-compact-input input::placeholder {
  color: var(--ft-text-2);
}

.ft-compact-emo,
.ft-compact-attach {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--ft-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1rem;
  padding: 0;
}

.ft-compact-ask {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--ft-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.ft-compact-ask.active {
  color: var(--ft-accent);
}

.ft-compact-send {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--ft-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.ft-compact-send:hover {
  filter: brightness(1.08);
}

@media (min-width: 861px) {
  .mahfel-sidebar.pinned.open {
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
    width: var(--ft-sidebar);
    box-shadow: none;
    background: transparent;
  }

  /* compact شناور فقط وقتی پین نیست؛ پین‌شده باید ستون جدا در چیدمان باشد نه روی صحنه */
  .mahfel-sidebar.compact.open:not(.pinned) {
    position: absolute;
    top: 12px;
    bottom: 12px;
    right: 14px;
    width: min(280px, 86vw);
    background: transparent;
    box-shadow: none;
  }
}

/* ---------- BBB-like file manager ---------- */
.ft-files-card {
  width: min(560px, 94vw);
  background: var(--ft-surface);
  border: 1px solid var(--ft-border);
  border-radius: 18px;
  padding: 14px;
  color: var(--ft-text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.ft-files-add {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ft-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ft-files-warn {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.35);
  color: #f5d77a;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.8rem;
  margin: 12px 0;
}

.ft-files-empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--ft-text-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ft-files-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
}

.ft-files-row {
  display: grid;
  grid-template-columns: 1fr 90px auto;
  gap: 10px;
  align-items: center;
  background: var(--ft-surface-2);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.85rem;
}

.ft-files-row.head {
  background: transparent;
  color: var(--ft-text-2);
  font-size: 0.75rem;
  padding: 4px 14px;
}

.ft-files-row > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ft-files-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.ft-files-row.live {
  outline: 1px solid var(--ft-accent);
}

.ft-files-live {
  color: #7ee787;
  font-size: 0.72rem;
  white-space: nowrap;
  padding: 0 6px;
}

.mahfel-tool-btn.ft-present-btn {
  width: auto;
  height: 34px;
  padding: 0 12px;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.mahfel-tool-btn.ft-file-row-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

/* ---------- viewer (guest) layout ---------- */
.ft-vw-header {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  padding: 0 14px;
  background: linear-gradient(180deg, #1e1e1e, #191919);
  border-bottom: 1px solid var(--ft-border);
  flex-shrink: 0;
}

.ft-vw-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  white-space: nowrap;
}

.ft-vw-brand-col {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
}

.ft-vw-logo {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  flex-shrink: 0;
}

.ft-vw-title {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ft-text);
  font-size: 0.88rem;
  font-weight: 600;
}

.ft-vw-title > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ft-vw-title > svg {
  color: var(--ft-accent);
  flex-shrink: 0;
}

.ft-vw-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ft-vw-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--ft-border);
  background: var(--ft-surface-2);
  color: var(--ft-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, border-color 0.15s;
}

.ft-vw-icon:hover {
  background: var(--ft-hover);
  border-color: rgba(58, 130, 255, 0.5);
}

.ft-vw-icon:disabled {
  opacity: 0.5;
  cursor: default;
}

.ft-vw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--ft-border);
  background: var(--ft-surface-2);
  font-size: 0.74rem;
  color: var(--ft-text);
  white-space: nowrap;
}

.ft-vw-chip.rec {
  color: var(--ft-danger);
  border-color: rgba(240, 68, 56, 0.45);
  background: rgba(240, 68, 56, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
}

.ft-vw-chip.rec.paused {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
}

.ft-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  display: inline-block;
  animation: ft-rec-pulse 1.4s ease-in-out infinite;
}

.ft-vw-chip.rec.paused .ft-rec-dot {
  animation: none;
  opacity: 0.85;
}

.ft-rec-time {
  font-family: monospace;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

.ft-rec-menu {
  min-width: 260px;
}

.ft-rec-opt {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: right;
  padding: 10px 12px;
}

.ft-rec-opt > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.85rem;
}

.ft-rec-hint {
  display: block;
  font-size: 0.7rem;
  color: var(--ft-text-2);
  line-height: 1.4;
  margin-right: 23px;
}

/* هدر بیرون از main است؛ صحنه مهمان از بالای main شروع می‌شود */
.viewer-mode .mahfel-remote-grid {
  inset: 12px;
}

.viewer-mode .ft-stage-empty {
  inset: 12px;
}

.viewer-mode .ft-conn-panel {
  top: 12px;
}

/* مهمان کاشی ویدیوی خودش را فقط وقتی می‌بیند که دوربینش واقعاً پخش شود */
.viewer-mode .lk-video-cell.lk-local-main:not(.has-video) {
  display: none !important;
}

/* دکمه خروج مهمان همان سبک سخنران را دارد (ft-hangup) */

/* تمام‌صفحهٔ درون‌مرورگری: کل فضای پنجرهٔ مرورگر پر می‌شود */
.mahfel-room.webfs .ft-vw-header,
.mahfel-room.webfs .mahfel-sidebar,
.mahfel-room.webfs .mahfel-sidebar-backdrop,
.mahfel-room.webfs .mahfel-drawer-btn {
  display: none !important;
}

.mahfel-room.webfs .mahfel-body {
  padding: 0;
  gap: 0;
}

.mahfel-room.webfs .mahfel-main {
  border-radius: 0;
}

.mahfel-room.webfs .mahfel-remote-grid {
  inset: 0 !important;
}

.mahfel-room.webfs .ft-stage-empty {
  inset: 0;
}

@media (max-width: 860px) {
  .ft-vw-header {
    height: 48px;
    padding: 0 10px;
    gap: 8px;
  }

  .ft-vw-brand {
    font-size: 0.82rem;
  }

  .ft-vw-logo {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }

  .ft-vw-title {
    font-size: 0.74rem;
  }

  .ft-vw-chip {
    display: none;
  }

  .viewer-mode .mahfel-remote-grid,
  .viewer-mode .ft-stage-empty {
    inset: 8px;
  }
}

/* ---------- camera settings / virtual background ---------- */
.ft-cam-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  margin-bottom: 14px;
  border: 1px solid var(--ft-border);
}

.ft-cam-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ft-cam-res {
  position: absolute;
  bottom: 8px;
  inset-inline-start: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 8px;
}

.ft-cam-off-hint {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  display: flex;
  gap: 5px;
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  color: #ffe9a8;
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 8px;
}

.ft-quality-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ft-quality-chip {
  padding: 6px 16px;
  border-radius: 10px;
  border: 1px solid var(--ft-border);
  background: var(--ft-surface-2);
  color: var(--ft-text);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  transition: border-color 0.15s, color 0.15s;
}

.ft-quality-chip:hover { border-color: rgba(255, 255, 255, 0.28); }
.ft-quality-chip.sel {
  border-color: var(--ft-accent);
  color: var(--ft-accent-2);
  background: rgba(58, 130, 255, 0.12);
}

.ft-bg-controls,
.ft-bg-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ft-bg-controls { margin-bottom: 8px; }

.ft-bg-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  border: 2px solid var(--ft-border);
  background: var(--ft-surface-2);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.ft-bg-icon:hover { border-color: rgba(255, 255, 255, 0.3); }
.ft-bg-icon.sel { border-color: var(--ft-accent); }

.ft-bg-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ft-bg-icon input[type="file"] { display: none; }

.ft-bg-urlbox {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.ft-bg-urlbox input { flex: 1; min-width: 0; font-size: 0.8rem; }

.ft-bg-err {
  display: block;
  color: var(--ft-danger);
  font-size: 0.75rem;
  margin-bottom: 6px;
}

.ft-bg-thumb {
  position: relative;
  width: 64px;
  height: 44px;
  border-radius: 9px;
  border: 2px solid var(--ft-border);
  background: var(--ft-surface-2);
  color: var(--ft-text);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ft-bg-thumb:hover { border-color: rgba(255, 255, 255, 0.3); }
.ft-bg-thumb.sel { border-color: var(--ft-accent); }

.ft-bg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ft-bg-del {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- user info card ---------- */
.ft-userinfo-card {
  width: min(360px, 92vw);
  background: var(--ft-surface);
  border: 1px solid var(--ft-border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ft-ui-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ft-ui-avatar {
  width: 44px;
  height: 44px;
  font-size: 1rem;
}

.ft-ui-namebox {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ft-ui-namebox b {
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ft-ui-role {
  font-size: 0.68rem;
  color: var(--ft-text-2);
}

.ft-ui-role.is-presenter {
  color: var(--ft-accent);
  font-weight: 600;
}

/* ---------- نشان نقش کاربر ---------- */
.ft-role-badge {
  font-style: normal;
  font-size: 0.56rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}
.ft-role-badge.r-host {
  color: #ffd166;
  background: rgba(255, 209, 102, 0.14);
  border-color: rgba(255, 209, 102, 0.42);
}
.ft-role-badge.r-mod {
  color: #9dc0ff;
  background: rgba(96, 165, 250, 0.16);
  border-color: rgba(96, 165, 250, 0.42);
}
.ft-role-badge.r-speaker {
  color: var(--ft-accent-2);
  background: rgba(112, 249, 184, 0.12);
  border-color: rgba(112, 249, 184, 0.38);
}
.ft-role-badge.sm {
  font-size: 0.52rem;
  padding: 0 6px;
  margin-inline-start: 4px;
  vertical-align: 1px;
}

/* بج نقش روی نام تایل ویدئو */
.lk-role {
  font-style: normal;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  margin-inline-end: 5px;
  flex-shrink: 0;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.lk-role.r-host {
  color: #ffd166;
  background: rgba(255, 209, 102, 0.16);
  border-color: rgba(255, 209, 102, 0.45);
}
.lk-role.r-mod {
  color: #9dc0ff;
  background: rgba(96, 165, 250, 0.18);
  border-color: rgba(96, 165, 250, 0.45);
}
.lk-role.r-speaker {
  color: var(--ft-accent-2);
  background: rgba(112, 249, 184, 0.14);
  border-color: rgba(112, 249, 184, 0.4);
}

/* رنگ نام کاربر بر اساس نقش */
.ft-compact-user.r-host .ft-cu-name > span { color: #ffd166; }
.ft-compact-user.r-mod .ft-cu-name > span { color: #9dc0ff; }
.ft-compact-user.r-speaker .ft-cu-name > span { color: var(--ft-accent-2); }

/* برچسب نقش در کارت اطلاعات کاربر */
.ft-ui-role.r-host { color: #ffd166; font-weight: 600; }
.ft-ui-role.r-mod { color: #9dc0ff; font-weight: 600; }
.ft-ui-role.r-speaker { color: var(--ft-accent-2); font-weight: 600; }

/* انتخابگر نقش */
.ft-role-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 8px 10px;
}
.ft-role-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 0.68rem;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ft-border);
  color: var(--ft-text-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ft-role-opt:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ft-text);
}
.ft-role-opt.on {
  color: var(--ft-text);
  border-color: var(--ft-accent);
  background: rgba(58, 130, 255, 0.18);
}
.ft-role-opt.r-host.on {
  color: #ffd166;
  border-color: rgba(255, 209, 102, 0.55);
  background: rgba(255, 209, 102, 0.14);
}
.ft-role-opt.r-mod.on {
  color: #9dc0ff;
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(96, 165, 250, 0.16);
}
.ft-role-opt.r-speaker.on {
  color: var(--ft-accent-2);
  border-color: rgba(112, 249, 184, 0.5);
  background: rgba(112, 249, 184, 0.12);
}

/* تغییر نام نمایشی در کارت کاربر */
.ft-ui-rename {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 2px 2px;
}
.ft-ui-rename input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ft-border);
  border-radius: 9px;
  color: var(--ft-text);
  padding: 7px 10px;
  font: inherit;
  font-size: 0.8rem;
}
.ft-ui-rename input:focus {
  outline: none;
  border-color: var(--ft-accent);
}
.ft-ui-rename .mahfel-btn {
  padding: 7px 12px;
  font-size: 0.74rem;
  white-space: nowrap;
}

.ft-ui-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ft-ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ft-border);
  color: var(--ft-text-2);
}

.ft-ui-chip.on {
  background: rgba(58, 130, 255, 0.14);
  border-color: rgba(58, 130, 255, 0.4);
  color: #9ec1ff;
}

.ft-ui-chip.warn {
  background: rgba(255, 193, 7, 0.12);
  border-color: rgba(255, 193, 7, 0.4);
  color: #ffd76a;
}

.ft-ui-chip.danger {
  background: rgba(255, 82, 82, 0.12);
  border-color: rgba(255, 82, 82, 0.4);
  color: #ff8a8a;
}

.ft-ui-rows {
  border-top: 1px solid var(--ft-border);
  display: flex;
  flex-direction: column;
}

.ft-ui-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px;
  font-size: 0.76rem;
  border-bottom: 1px solid var(--ft-border);
}

.ft-ui-row:last-child {
  border-bottom: none;
}

.ft-ui-row span {
  color: var(--ft-text-2);
}

.ft-ui-row b {
  font-weight: 500;
  text-align: left;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ft-ui-id {
  font-family: monospace;
  font-size: 0.72rem;
  cursor: pointer;
}

.ft-ui-actions {
  border-top: 1px solid var(--ft-border);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ---------- speaker tile (بالای پنل کاربران هنگام ارائه/تخته) ---------- */
.ft-speaker-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0b0d12;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ft-speaker-slot.speaking {
  border-color: var(--ft-accent-2);
  box-shadow: 0 0 0 2px rgba(112, 249, 184, 0.6), 0 8px 20px rgba(0, 0, 0, 0.35);
}

.ft-speaker-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ft-speaker-slot.no-video .ft-speaker-video { display: none; }

.ft-speaker-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #9ec1ff;
  background: radial-gradient(circle at 35% 30%, #1d2a44, #0b0d12);
}

.ft-speaker-slot.no-video .ft-speaker-fallback { display: flex; }

.ft-speaker-name {
  position: absolute;
  bottom: 6px;
  inset-inline-start: 6px;
  z-index: 2;
  max-width: 75%;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #fff;
  background: rgba(12, 14, 20, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  line-height: 1.5;
}

.ft-speaker-mic {
  position: absolute;
  top: 6px;
  right: 6px;
  left: auto;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  pointer-events: none;
}

.ft-speaker-mic.muted { background: transparent; }

.ft-speaker-mic svg { width: 12px; height: 12px; }

/* وقتی کاشی سخنران خودِ کاربر است، PiP ویدیوی خودی تکراری نشود */
.mahfel-sidebar:has(.ft-speaker-slot.is-self) .mahfel-local { display: none !important; }

/* ---------- annotation overlay روی ارائه ---------- */
.ft-annot-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  border-radius: 0;
  box-shadow: none !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
}

.ft-annot-canvas.drawing {
  pointer-events: auto;
  cursor: crosshair;
  touch-action: none;
}

.ft-annot-rail {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(16, 18, 26, 0.82);
  border: 1px solid var(--ft-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.ft-annot-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--ft-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.ft-annot-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ft-text);
}

.ft-annot-btn.active {
  background: var(--ft-accent);
  color: #fff;
}

.ft-annot-shape {
  display: block;
  border: 1.6px solid currentColor;
}

.ft-annot-circle {
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

.ft-annot-rect {
  width: 14px;
  height: 11px;
  border-radius: 2px;
}

.ft-annot-color {
  width: 26px;
  height: 26px;
  margin: 2px 0;
}

/* ---------- تختهٔ سفید: رنگ‌ها، ابزار، صفحه‌ها، زوم ---------- */
.ft-wb-swatches {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ft-wb-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--sw, #fff);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.ft-wb-swatch:hover { transform: scale(1.15); }

.ft-wb-swatch.on {
  border-color: var(--ft-accent-2);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}

.ft-wb-sep {
  width: 1px;
  height: 20px;
  background: var(--ft-border);
  margin: 0 4px;
}

.ft-wb-menu-wrap { position: relative; display: inline-flex; }

.ft-wb-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 210px;
  background: rgba(16, 18, 26, 0.96);
  border: 1px solid var(--ft-border);
  border-radius: 14px;
  padding: 8px;
  z-index: 30;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ft-wb-menu-title {
  font-size: 0.72rem;
  color: var(--ft-text-2);
  padding: 4px 8px 6px;
}

.ft-wb-bgs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 0 4px 8px;
}

.ft-wb-bg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--ft-border);
  border-radius: 10px;
  background: transparent;
  color: var(--ft-text-2);
  font-size: 0.68rem;
  padding: 7px 2px 6px;
  cursor: pointer;
}

.ft-wb-bg:hover { border-color: var(--ft-text-2); color: var(--ft-text); }

.ft-wb-bg.on { border-color: var(--ft-accent); color: var(--ft-accent-2); }

.ft-wb-bg i {
  width: 100%;
  height: 26px;
  border-radius: 6px;
  display: block;
}

.ft-wb-bg .ft-wb-bg-dark { background: #1a1a1a; }
.ft-wb-bg .ft-wb-bg-light { background: #f5f4ef; }
.ft-wb-bg .ft-wb-bg-grid {
  background: #15181f;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 7px 7px;
}
.ft-wb-bg .ft-wb-bg-dots {
  background: #101318;
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1.4px);
  background-size: 7px 7px;
}

/* ریل ابزار — سمت راست بوم، شناور */
.ft-wb-rail {
  position: absolute;
  top: 50%;
  inset-inline-start: 12px;
  transform: translateY(-50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(16, 18, 26, 0.82);
  border: 1px solid var(--ft-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.ft-wb-rail-sep {
  width: 20px;
  height: 1px;
  background: var(--ft-border);
  margin: 3px 0;
}

/* کنترل زوم — گوشهٔ پایین */
.ft-wb-zoom {
  position: absolute;
  bottom: 12px;
  inset-inline-end: 12px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(16, 18, 26, 0.82);
  border: 1px solid var(--ft-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ft-wb-zoom .ft-annot-btn { width: 28px; height: 28px; border-radius: 8px; }

.ft-wb-zoom-pct {
  min-width: 44px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ft-text);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0 4px;
}

.ft-wb-zoom-pct:hover { background: rgba(255, 255, 255, 0.08); }

/* نوار صفحه‌ها — پایین بوم */
.ft-wb-pages {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(16, 18, 26, 0.82);
  border: 1px solid var(--ft-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width: calc(100% - 140px);
  overflow-x: auto;
  scrollbar-width: none;
}

.ft-wb-pages::-webkit-scrollbar { display: none; }

.ft-wb-page {
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ft-text-2);
  font-size: 0.72rem;
  padding: 0 10px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ft-wb-page:hover { background: rgba(255, 255, 255, 0.08); color: var(--ft-text); }

.ft-wb-page.on { background: var(--ft-accent); color: #fff; }

.ft-wb-page-add,
.ft-wb-page-del { width: 28px; padding: 0; }

.ft-wb-page-del:hover { background: rgba(255, 93, 93, 0.18); color: var(--ft-danger); }

/* ادیتور متن روی بوم */
.ft-wb-text-input {
  position: absolute;
  z-index: 9;
  min-width: 120px;
  max-width: 60%;
  background: rgba(16, 18, 26, 0.6);
  border: 1px dashed var(--ft-accent-2);
  border-radius: 8px;
  color: #fff;
  font-family: Vazirmatn, Tahoma, sans-serif;
  padding: 4px 8px;
  outline: none;
  resize: none;
  overflow: hidden;
  line-height: 1.35;
}

@media (max-width: 720px) {
  .ft-wb-rail { inset-inline-start: 6px; padding: 4px; gap: 2px; }
  .ft-wb-rail .ft-annot-btn { width: 28px; height: 28px; }
  .ft-wb-pages { max-width: calc(100% - 90px); }
  .ft-wb-swatches { gap: 3px; }
  .ft-wb-swatch { width: 16px; height: 16px; }
}

/* ---------- حضور و غیاب ---------- */
.ft-attend-card {
  width: min(460px, 94vw);
  max-height: min(560px, 85vh);
  background: var(--ft-surface);
  border: 1px solid var(--ft-border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ft-attend-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ft-attend-head b { font-size: 0.95rem; }

.ft-attend-spacer { flex: 1; }

.ft-attend-excel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  background: #18b56b;
  color: #fff;
  cursor: pointer;
}

.ft-attend-excel:hover { background: #14a260; }

.ft-attend-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--ft-border);
}

.ft-attend-tabs button {
  flex: 1;
  border: none;
  background: none;
  padding: 9px 4px;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--ft-text-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.ft-attend-tabs button.sel {
  color: var(--ft-text);
  font-weight: 600;
  border-bottom-color: #18b56b;
}

.ft-attend-list {
  flex: 1;
  overflow-y: auto;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ft-attend-empty {
  padding: 28px;
  text-align: center;
  color: var(--ft-text-2);
  font-size: 0.82rem;
}

.ft-attend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 10px;
}

.ft-attend-row:hover { background: rgba(255, 255, 255, 0.04); }

.ft-attend-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ft-attend-info b {
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ft-attend-sub {
  font-size: 0.68rem;
  color: var(--ft-text-2);
}

.ft-attend-stats {
  display: inline-flex;
  gap: 8px;
  color: var(--ft-text-2);
}

.ft-attend-stats i {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-style: normal;
  font-size: 0.7rem;
}

.ft-attend-badge {
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}

.ft-attend-badge.online {
  background: rgba(24, 181, 107, 0.14);
  color: #5be3a0;
  border: 1px solid rgba(24, 181, 107, 0.35);
}

.ft-attend-badge.offline {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ft-text-2);
  border: 1px solid var(--ft-border);
}

/* ---------- رسانه در ارائه (ویدیو/صوت) ---------- */
/* هنگام پخش ویدیو، بدنهٔ ارائه زیر هدر هم کل قاب را پر می‌کند */
.mahfel-presentation:has(.ft-pres-media) .ft-stage-header {
  position: relative;
  z-index: 2;
}

.mahfel-presentation:has(.ft-pres-media) .mahfel-presentation-body {
  position: absolute;
  inset: 0;
  padding: 0;
}

.ft-pres-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 0;
  background: #000;
  outline: none;
}

.ft-audio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 48px;
  border-radius: 20px;
  background: linear-gradient(160deg, #16202e, #0d1117);
  border: 1px solid var(--ft-border);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5);
  min-width: min(420px, 80vw);
}

.ft-audio-ico {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(58, 130, 255, 0.14);
  border: 1px solid rgba(58, 130, 255, 0.35);
  color: var(--ft-accent);
}

.ft-audio-name {
  font-size: 0.92rem;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ft-audio-card audio {
  width: 100%;
  min-width: 300px;
}

/* ---------- موبایل: چیدمان عمودی (صحنه بالا، چت/کاربران زیر آن) ---------- */
@media (max-width: 860px) {
  .mahfel-body {
    flex-direction: column;
  }

  .mahfel-body .mahfel-main {
    flex: 0 0 auto;
    height: clamp(180px, 30vh, 300px);
  }

  /* سایدبار در موبایل به‌جای کشو، همیشه زیر صحنه می‌نشیند */
  .mahfel-body .mahfel-sidebar,
  .mahfel-body .mahfel-sidebar.floating,
  .mahfel-body .mahfel-sidebar.pinned,
  .mahfel-body .mahfel-sidebar.compact,
  .mahfel-body .mahfel-sidebar:not(.open) {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    display: flex;
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    min-height: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    z-index: 10;
  }

  .mahfel-body .mahfel-drawer-btn,
  .mahfel-body .mahfel-sidebar-backdrop {
    display: none !important;
  }

  /* کاشی کوچک ویدیوی خودی روی لبهٔ پایین صحنه — مثل PiP */
  .mahfel-body .mahfel-local {
    width: 88px;
    aspect-ratio: 3 / 4;
    align-self: center;
    margin-top: -40px;
    margin-bottom: 4px;
    z-index: 30;
  }

  /* وقتی کاشی سخنران بالای پنل است، PiP خودی روی آن نیافتد */
  .mahfel-body .mahfel-sidebar:has(.ft-speaker-slot) .mahfel-local {
    margin-top: 0;
    aspect-ratio: 16 / 10;
    width: 140px;
  }

  /* دکمه‌های «بستن کادرها» در چیدمان عمودی کاربرد ندارند */
  .mahfel-body .ft-sidebar-chrome > .ft-icon-btn:first-child {
    display: none;
  }

  /* کاشی سخنران در موبایل باریک‌تر */
  .mahfel-body .ft-speaker-slot {
    aspect-ratio: 16 / 8;
  }

  /* دکمه‌های داک گرد و مدرن */
  .ft-dock .mahfel-tool-btn {
    border-radius: 50%;
  }

  .ft-dock.mahfel-toolbar {
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }

  /* در موبایل ریل بالای داک تب پیام‌ها را دارد؛ دکمهٔ داک تکراری است */
  .ft-dock .ft-dock-restore {
    display: none;
  }
}

/* ---------- حالت فیلم: نوار ویدیوها کنار اسلاید/تخته ---------- */
.mahfel-main.film-mode {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 10px;
}

.mahfel-main.film-mode .ft-stage {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
}

/* گرید ویدیوها: از مطلقِ تمام‌صحنه به ستون عمودی کنار صحنه */
.mahfel-main.film-mode .mahfel-remote-grid,
.mahfel-main.film-mode .mahfel-remote-grid.has-pin,
.mahfel-main.film-mode .mahfel-remote-grid.has-pin.layout-speaker,
.mahfel-main.film-mode .mahfel-remote-grid.has-pin.layout-speaker-top,
.mahfel-main.film-mode .mahfel-remote-grid.has-pin.layout-speaker-left,
.mahfel-main.film-mode .mahfel-remote-grid.has-pin.layout-speaker-right,
.mahfel-main.film-mode .mahfel-remote-grid.has-pin.layout-speaker-bottom {
  position: static;
  inset: auto;
  flex: 0 0 190px;
  width: 190px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  direction: ltr;
}

/* اگر هیچ کاشی ویدیویی نیست، ستون فضا نگیرد */
.mahfel-main.film-mode .mahfel-remote-grid:not(:has(.lk-video-cell)) {
  display: none;
}

/* قانون «فقط سخنران پین» کاشی را وسط عمودی نکند — در ستون فیلم همیشه از بالا بچین */
.mahfel-main.film-mode .mahfel-remote-grid.has-pin:not(:has(.lk-filmstrip .lk-video-cell)):not(:has(.lk-video-cell:not(.lk-pinned):not(.lk-local-main))),
.mahfel-main.film-mode .mahfel-remote-grid.layout-focus.has-pin {
  justify-content: flex-start;
}

/* نوار داخلی سخنران در حالت فیلم صاف می‌شود تا همه تایل‌ها در همان ستون باشند */
.mahfel-main.film-mode .mahfel-remote-grid > .lk-filmstrip,
.mahfel-main.film-mode .mahfel-remote-grid.has-pin > .lk-filmstrip {
  display: contents;
}

/* منوی ⋮ داخل ستون باریک ویدیوها جا شود (پیش‌فرض min-width:200px از عرض ستون بیرون می‌زد) */
.mahfel-main.film-mode .mahfel-remote-grid .lk-menu,
.mahfel-main.film-mode .mahfel-remote-grid .lk-scope {
  left: 4px;
  right: 4px;
  min-width: 0;
}

/* همه تایل‌ها در ستون فیلم مربع و یک‌دست */
.mahfel-main.film-mode .mahfel-remote-grid .lk-video-cell,
.mahfel-main.film-mode .mahfel-remote-grid.has-pin > .lk-video-cell.lk-pinned,
.mahfel-main.film-mode .mahfel-remote-grid.has-pin > .lk-filmstrip .lk-video-cell,
.mahfel-main.film-mode .mahfel-remote-grid.layout-focus .lk-video-cell:not(.lk-pinned) {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  height: 0;
  padding-bottom: 100%;
  aspect-ratio: unset;
  min-height: 0;
  max-height: none;
  align-self: stretch;
  justify-self: stretch;
  direction: rtl;
}

.mahfel-main.film-mode .mahfel-remote-grid.layout-focus > .lk-filmstrip {
  display: contents;
}

/* تایل ویدیوی خودیِ مهمانٔ دارای مجوز دوربین هم در ستون دیده شود */
.mahfel-main.film-mode .mahfel-remote-grid .lk-video-cell.lk-local-main,
.mahfel-body .mahfel-main.film-mode #mahfel-remotes .lk-video-cell.lk-local-main {
  display: block !important;
}

/* تایل پین‌شده در ستون فیلم هالهٔ برند می‌گیرد */
.mahfel-main.film-mode .mahfel-remote-grid .lk-video-cell.lk-pinned {
  border-color: var(--ft-accent);
  box-shadow: 0 0 0 2px rgba(58, 130, 255, 0.4);
}

/* در حالت فیلم، کادر سبز «در حال صحبت» بر هالهٔ آبی پین اولویت دارد */
.mahfel-main.film-mode .mahfel-remote-grid .lk-video-cell.lk-pinned.speaking {
  border-color: var(--ft-accent-2);
  box-shadow: 0 0 0 2px rgba(112, 249, 184, 0.65), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* کاشی سخنرانِ بالای پنل در حالت فیلم لازم نیست — ویدیوها خودشان کنار صحنه‌اند */
.mahfel-body:has(.mahfel-main.film-mode) .ft-speaker-slot {
  display: none;
}

/* در حالت فیلم، PiP ویدیوی خودی بالای پنل کاربران نباشد — تایل خودی داخل ستون ویدیوهاست
   (فقط وقتی تایل خودی واقعاً در ستون هست) */
.mahfel-body:has(.mahfel-main.film-mode .lk-video-cell.lk-local-main) .mahfel-local {
  display: none !important;
}

/* موبایل: نوار ویدیوها به‌صورت افقی بالای اسلاید */
@media (max-width: 860px) {
  .mahfel-body .mahfel-main.film-mode {
    flex-direction: column;
    height: clamp(280px, 50vh, 520px);
  }

  .mahfel-main.film-mode .mahfel-remote-grid,
  .mahfel-main.film-mode .mahfel-remote-grid.has-pin {
    order: -1;
    flex: 0 0 108px;
    width: 100%;
    height: 108px;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 0;
  }

  .mahfel-main.film-mode .mahfel-remote-grid .lk-video-cell,
  .mahfel-main.film-mode .mahfel-remote-grid.has-pin > .lk-video-cell.lk-pinned,
  .mahfel-main.film-mode .mahfel-remote-grid.has-pin > .lk-filmstrip .lk-video-cell {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    padding-bottom: 0;
    min-height: 96px;
    max-height: 96px;
  }
}

/* ---------- ریل تب‌های جمع‌شده (سنجاق کادرهای کاربران/پیام‌ها) ---------- */
.ft-compact-stack {
  position: relative;
}

.ft-compact-rail {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 4;
}

.ft-rail-tab {
  position: relative;
  width: 40px;
  min-height: 40px;
  padding: 6px 2px;
  border: 1px solid var(--ft-border);
  border-radius: 12px;
  background: rgba(32, 32, 32, 0.96);
  color: var(--ft-text-2);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

.ft-rail-tab:hover {
  background: rgba(46, 46, 46, 0.97);
  color: var(--ft-text);
}

.ft-rail-tab b {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--ft-accent);
  line-height: 1;
}

.ft-rail-tab .ft-compact-dot {
  position: absolute;
  top: 5px;
  inset-inline-end: 5px;
}

.mahfel-sidebar.compact.has-collapsed .ft-compact-stack {
  padding-inline-start: 48px;
}

/* وقتی هر دو کادر سنجاق شده‌اند، سایدبار فقط به اندازهٔ ریل جا می‌گیرد تا صحنه بزرگ‌تر شود */
@media (min-width: 861px) {
  .mahfel-sidebar.compact.open.all-collapsed {
    width: 62px;
  }
}

/* موبایل: تب‌های جمع‌شده به‌صورت ردیفی بالای کادر می‌نشینند و صحنه بزرگ‌تر می‌شود */
@media (max-width: 860px) {
  .ft-compact-rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .mahfel-sidebar.compact.has-collapsed .ft-compact-stack {
    padding-inline-start: 0;
  }

  .mahfel-body.panels-collapsed .mahfel-main {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }

  .mahfel-body.panels-collapsed .mahfel-sidebar.compact {
    flex: 0 0 auto;
  }
}

/* ---------- زیرنویس زنده و صورتجلسه ---------- */
.ft-captions {
  position: absolute;
  inset-inline: 0;
  bottom: 86px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
  z-index: 40;
  padding: 0 12px;
}
.ft-cap-lines {
  max-width: min(720px, 90%);
  background: rgba(12, 14, 20, 0.72);
  color: #fff;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 14px;
  line-height: 1.9;
  backdrop-filter: blur(4px);
}
.ft-cap-line { text-align: center; }
.ft-cap-line b { color: #9ec5ff; margin-inline-end: 4px; font-weight: 600; }
.ft-cap-close {
  pointer-events: auto;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 0; border-radius: 50%;
  background: rgba(12, 14, 20, 0.72);
  color: #cbd2dd;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ft-cap-close:hover { color: #fff; }

.ft-badge-rec {
  position: absolute;
  top: 4px; inset-inline-end: 4px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #f04438;
  animation: ft-rec-blink 1.2s ease-in-out infinite;
}
@keyframes ft-rec-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.ft-minutes-card { max-width: 640px; width: 100%; text-align: right; }

/* ── آزمون ── */
.ft-quiz-sub { color: var(--ft-muted, #9aa3b2); font-size: 13px; margin: 0 0 12px; }
.ft-quiz-score {
  font-size: 16px; font-weight: 700; text-align: center;
  padding: 12px; margin-bottom: 14px; border-radius: 10px;
  background: rgba(58, 130, 255, .12); border: 1px solid rgba(58, 130, 255, .35);
}
.ft-quiz-q { margin-bottom: 14px; }
.ft-quiz-qtext { font-weight: 600; margin-bottom: 7px; font-size: 14px; line-height: 1.7; }
.ft-quiz-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ft-quiz-opt {
  padding: 5px 11px; border-radius: 8px; font-size: 12.5px;
  background: var(--ft-surface-2, #1c1f27); border: 1px solid var(--ft-border, #2e2e33);
}
.ft-quiz-opt.correct { border-color: rgba(74, 222, 128, .6); background: rgba(74, 222, 128, .1); color: #4ade80; }
.ft-quiz-opt.wrong { border-color: rgba(240, 68, 56, .6); background: rgba(240, 68, 56, .1); color: #f87171; }
.ft-quiz-opt-btn {
  padding: 6px 12px; border-radius: 8px; font-size: 12.5px; cursor: pointer;
  font-family: inherit; color: var(--ft-text, #eee);
  background: var(--ft-surface-2, #1c1f27); border: 1px solid var(--ft-border, #2e2e33);
}
.ft-quiz-opt-btn:hover { border-color: rgba(58, 130, 255, .5); }
.ft-quiz-opt-btn.sel { border-color: rgba(58, 130, 255, .8); background: rgba(58, 130, 255, .15); }
.ft-quiz-why { color: var(--ft-muted, #9aa3b2); font-size: 12px; margin-top: 5px; }
.ft-quiz-rank {
  margin-top: 16px; padding: 10px 12px; border-radius: 10px;
  background: var(--ft-surface-2, #1c1f27); border: 1px solid var(--ft-border, #2e2e33);
}
.ft-quiz-rank h5 { margin: 0 0 8px; font-size: 13px; }
.ft-quiz-rankrow { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }

.ft-minutes-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 14px;
  line-height: 2;
  background: var(--ft-surface-2, #1c1f27);
  border-radius: 10px;
  padding: 14px 16px;
  max-height: 55vh;
  overflow-y: auto;
  margin: 0 0 12px;
}
.ft-minutes-loading { padding: 26px 6px; text-align: center; color: var(--ft-muted, #9aa3b2); }
.ft-minutes-err {
  padding: 16px; margin-bottom: 12px;
  background: rgba(240, 68, 56, .1);
  border: 1px solid rgba(240, 68, 56, .35);
  border-radius: 10px;
  color: #f38b85;
  font-size: 13.5px;
  line-height: 1.9;
}

/* ---------- ابزارهای جلسه: آیکون‌های تکی در ریل و نوار کروم ---------- */
.ft-rail-sep {
  width: 22px;
  height: 1px;
  margin: 2px auto;
  background: var(--ft-border);
  flex-shrink: 0;
}

.ft-rail-tab.active {
  border-color: var(--ft-accent);
  color: var(--ft-text);
}

.ft-rail-tab .ft-tool-on {
  position: absolute;
  top: 5px;
  inset-inline-start: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ft-accent);
}

.ft-chrome-tools {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  padding: 2px 8px 6px;
  border-bottom: 1px solid var(--ft-border);
  flex-shrink: 0;
}

.ft-chrome-tools .ft-icon-btn {
  position: relative;
  width: 32px;
  height: 32px;
}

.ft-chrome-tools .ft-tool-on {
  position: absolute;
  top: 4px;
  inset-inline-start: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ft-accent);
}

/* ---------- structured minutes ---------- */
.ft-minutes-doc {
  max-height: 55vh;
  overflow-y: auto;
  padding: 2px 2px 6px;
  margin-bottom: 12px;
}

.ft-minutes-sec h5 {
  font-size: 0.78rem;
  color: var(--ft-accent);
  margin: 12px 0 5px;
  font-weight: 700;
}

.ft-minutes-sec p { font-size: 0.85rem; line-height: 1.9; margin: 0; }
.ft-minutes-sec ul { margin: 0; padding-inline-start: 18px; font-size: 0.85rem; line-height: 1.9; }
.ft-minutes-none { color: var(--ft-text-2); }

.ft-minutes-approved {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: #34c77b;
  border: 1px solid rgba(52, 199, 123, 0.4);
  border-radius: 999px;
  padding: 3px 10px;
}

.ft-minutes-label {
  display: block;
  font-size: 0.72rem;
  color: var(--ft-text-2);
  margin: 11px 0 4px;
}

.ft-minutes-input {
  width: 100%;
  background: var(--ft-surface-2, #1c1f27);
  border: 1px solid var(--ft-border);
  border-radius: 8px;
  color: var(--ft-text);
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.8;
  padding: 7px 10px;
}

.ft-minutes-input:focus { outline: none; border-color: var(--ft-accent); }

.ft-ai-table { display: flex; flex-direction: column; gap: 5px; }

.ft-ai-row {
  display: grid;
  grid-template-columns: 1fr 90px 90px;
  gap: 8px;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid var(--ft-border);
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.7;
}

.ft-ai-row.ft-ai-head {
  border: none;
  padding: 0 9px;
  color: var(--ft-text-2);
  font-size: 0.68rem;
}

.ft-ai-row.ft-ai-edit { grid-template-columns: 1fr 84px 84px 26px; }

.ft-ai-row input {
  background: transparent;
  border: 1px solid var(--ft-border);
  border-radius: 6px;
  color: var(--ft-text);
  font-family: inherit;
  font-size: 0.78rem;
  padding: 5px 7px;
  width: 100%;
}

.ft-ai-row input:focus { outline: none; border-color: var(--ft-accent); }

.mahfel-btn.ft-approved { border-color: rgba(52, 199, 123, 0.5) !important; color: #34c77b; }

/* ---------- meeting timeline ---------- */

.ft-tl-list { display: flex; flex-direction: column; gap: 4px; }

.ft-tl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--ft-border);
  border-radius: 8px;
  font-size: 0.8rem;
}

.ft-tl-row.ft-tl-bookmark {
  border-color: rgba(255, 196, 66, 0.35);
  background: rgba(255, 196, 66, 0.06);
}

.ft-tl-time {
  color: var(--ft-accent);
  font-variant-numeric: tabular-nums;
  min-width: 62px;
  font-size: 0.75rem;
}

.ft-tl-elapsed {
  color: var(--ft-text-2);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  min-width: 42px;
}

.ft-tl-title { flex: 1; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }

.ft-tl-bookmark .ft-tl-title { color: #ffd56b; }

/* ---------- meeting copilot (دستیار جلسه) ---------- */

.ft-copilot-card { max-width: 560px; display: flex; flex-direction: column; max-height: 82vh; }

.ft-copilot-log {
  flex: 1;
  min-height: 160px;
  max-height: 52vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px;
}

.ft-copilot-q {
  align-self: flex-end;
  max-width: 85%;
  background: rgba(58, 130, 255, 0.16);
  border: 1px solid rgba(58, 130, 255, 0.35);
  border-radius: 12px 12px 4px 12px;
  padding: 7px 11px;
  font-size: 0.86rem;
  color: var(--ft-text);
}

.ft-copilot-a {
  align-self: flex-start;
  max-width: 92%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ft-border, rgba(255, 255, 255, 0.1));
  border-radius: 12px 12px 12px 4px;
  padding: 8px 12px;
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--ft-text);
  white-space: pre-wrap;
}

.ft-copilot-pending { color: var(--ft-text-2); font-style: italic; }

.ft-copilot-suggest { display: flex; flex-wrap: wrap; gap: 6px; }

.ft-copilot-chip {
  background: rgba(112, 249, 184, 0.08);
  border: 1px solid rgba(112, 249, 184, 0.28);
  color: var(--ft-text);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s;
}
.ft-copilot-chip:hover { background: rgba(112, 249, 184, 0.18); }

.ft-copilot-ask {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}

.ft-copilot-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ft-border, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  color: var(--ft-text);
  padding: 8px 12px;
  font-size: 0.88rem;
  outline: none;
}
.ft-copilot-input:focus { border-color: rgba(58, 130, 255, 0.6); }

.ft-copilot-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--ft-text-2);
  cursor: pointer;
}

/* ---------- pre-meeting briefing (کارت مستقل بریفینگ کنار فرم ورود) ---------- */

.ft-briefing-card {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(58, 130, 255, 0.07);
  border: 1px solid rgba(58, 130, 255, 0.28);
  text-align: right;
  font-size: 0.8rem;
  color: var(--ft-text);
}

.ft-briefing-head {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #8fb8ff;
  margin-bottom: 6px;
}

.ft-briefing-title { font-weight: 600; }

.ft-briefing-date { margin-inline-start: auto; font-size: 0.72rem; color: var(--ft-text-2); }

.ft-briefing-topic { font-weight: 600; margin: 4px 0; }

.ft-briefing-summary { color: var(--ft-text-2); line-height: 1.8; margin: 2px 0 8px; }

.ft-briefing-sec { margin-top: 8px; }

.ft-briefing-sectitle {
  display: block;
  font-size: 0.72rem;
  color: #70f9b8;
  margin-bottom: 4px;
  font-weight: 600;
}

.ft-briefing-task {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  padding: 3px 0;
}

.ft-briefing-taskname { flex: 1; min-width: 55%; }

.ft-briefing-who {
  font-size: 0.7rem;
  color: #ffd56b;
  border: 1px solid rgba(255, 213, 107, 0.35);
  border-radius: 999px;
  padding: 1px 8px;
}

.ft-briefing-when {
  font-size: 0.7rem;
  color: var(--ft-text-2);
  border: 1px solid var(--ft-border, rgba(255, 255, 255, 0.14));
  border-radius: 999px;
  padding: 1px 8px;
}

.ft-briefing-decision {
  padding: 2px 0;
  color: var(--ft-text-2);
}
.ft-briefing-decision::before { content: "• "; color: #8fb8ff; }

.ft-briefing-meta {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.7rem;
  color: var(--ft-text-2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ft-briefing-arch { color: #8fb8ff; margin-inline-start: auto; text-decoration: none; }
.ft-briefing-arch:hover { text-decoration: underline; }

.mahfel-join-layout .mahfel-join-briefing {
  flex: 1 1 420px;
  min-width: min(360px, 100%);
  max-width: 560px;
  max-height: min(82vh, 720px);
  overflow: auto;
  margin-top: 0;
  padding: 20px;
  border-radius: 20px;
  background: rgba(42, 42, 42, 0.85);
  backdrop-filter: blur(14px);
  border: 1px solid var(--ft-border);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

/* ---------- session report ---------- */

.ft-report-card { max-width: 680px; }
.ft-report-text { max-height: 56vh; overflow-y: auto; }

.ft-report-send {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.ft-report-url, .ft-report-email {
  flex: 1; min-width: 0; background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px;
  color: var(--ft-text-1); font-size: 0.78rem; padding: 7px 10px;
}

.ft-report-url:focus, .ft-report-email:focus { outline: none; border-color: rgba(94, 158, 255, 0.5); }

.ft-report-sendstatus { font-size: 0.74rem; color: #8fd49a; white-space: nowrap; }

.ft-report-autosend {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.72rem; color: var(--ft-text-2); cursor: pointer; white-space: nowrap;
}

.ft-report-autosend input { accent-color: #4f8cff; cursor: pointer; }

/* ---------- translated captions ---------- */

.ft-cap-en {
  margin-top: 3px;
  font-size: 0.78rem;
  color: #9ecbff;
  text-align: left;
  direction: ltr;
  opacity: 0.9;
}

/* ---------- translate setup ---------- */

.ft-translate-card { width: min(380px, 94vw); }

.ft-translate-hint { font-size: 0.78rem; color: var(--ft-text-2); margin: 0 0 10px; }

.ft-translate-lang {
  width: 100%; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 9px;
  color: var(--ft-text-1); font-size: 0.85rem; padding: 8px 10px; margin-bottom: 12px;
}

.ft-translate-lang:focus { outline: none; border-color: rgba(94, 158, 255, 0.5); }

/* ---------- breakout rooms ---------- */

.ft-breakout-card { width: min(460px, 94vw); }

.ft-breakout-count {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.82rem; color: var(--ft-text-2); margin-bottom: 12px;
}

.ft-breakout-count b { color: var(--ft-text-1); min-width: 18px; text-align: center; }

.ft-breakout-list {
  max-height: 42vh; overflow-y: auto; display: flex; flex-direction: column;
  gap: 6px; margin-bottom: 12px;
}

.ft-breakout-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px; padding: 7px 10px;
}

.ft-breakout-name { font-size: 0.8rem; color: var(--ft-text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ft-breakout-sel {
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px; color: var(--ft-text-1); font-size: 0.75rem; padding: 5px 8px;
}

.ft-breakout-sel:focus { outline: none; border-color: rgba(94, 158, 255, 0.5); }

.ft-breakout-empty { font-size: 0.78rem; color: var(--ft-text-2); text-align: center; padding: 10px 0; }

.ft-breakout-rooms {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 0.78rem; color: var(--ft-text-2); margin-bottom: 12px;
}

.ft-breakout-banner {
  position: absolute; top: 10px; right: 50%; transform: translateX(50%);
  z-index: 60; display: flex; align-items: center; gap: 8px;
  background: var(--ft-overlay); border: 1px solid rgba(58, 130, 255, 0.35);
  border-radius: 999px; padding: 6px 14px;
  font-size: 0.78rem; color: var(--ft-text);
  backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- meeting archive (/archive) ---------- */

.ft-archive-page {
  min-height: 100vh;
  padding: 28px 18px 60px;
  background:
    radial-gradient(640px 420px at 82% 8%, rgba(58, 130, 255, 0.14), transparent 60%),
    radial-gradient(520px 420px at 12% 88%, rgba(112, 249, 184, 0.06), transparent 60%),
    var(--ft-bg);
}

.ft-archive {
  direction: rtl;
  max-width: 980px;
  margin: 0 auto;
  color: var(--ft-text);
}

.ft-archive-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ft-archive-head h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px; }

.ft-archive-search {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.ft-archive-search .mahfel-btn {
  width: auto;
  flex-shrink: 0;
}

.ft-archive-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ft-border);
  border-radius: 10px;
  color: var(--ft-text);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 10px 14px;
}

.ft-archive-input:focus { outline: none; border-color: var(--ft-accent); }

.ft-archive-count { color: var(--ft-text-2); font-size: 0.8rem; margin: 0 0 10px; }

.ft-archive-empty { color: var(--ft-text-2); padding: 26px 8px; text-align: center; }

.ft-archive-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ft-border);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}

.ft-archive-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
}

.ft-archive-room { font-weight: 700; font-size: 0.95rem; }

.ft-archive-meta { color: var(--ft-text-2); font-size: 0.75rem; }

.ft-archive-badges { display: inline-flex; gap: 6px; }

.ft-badge {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  color: var(--ft-text-2);
  font-size: 0.68rem;
  font-style: normal;
  padding: 2px 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ft-badge.ok { color: #34c77b; background: rgba(52, 199, 123, 0.12); }

.ft-archive-actions { margin-inline-start: auto; display: inline-flex; gap: 6px; }

.ft-archive-matches { border-top: 1px solid var(--ft-border); padding: 8px 14px 10px; }

.ft-archive-match {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  font-size: 0.8rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.ft-archive-match:last-child { border-bottom: none; }

.ft-archive-match.minutes .ft-archive-sp { color: var(--ft-accent); }

.ft-archive-sp { color: var(--ft-text-2); min-width: 70px; font-size: 0.74rem; }

.ft-archive-tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ft-archive-tx mark { background: rgba(255, 213, 107, 0.3); color: #ffd56b; border-radius: 3px; padding: 0 2px; }

.ft-archive-more { color: var(--ft-text-2); font-size: 0.74rem; margin: 6px 0 0; }

.ft-archive-viewer { max-height: 60vh; }

.ft-archive-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- decision log ---------- */

.ft-archive-nav { display: flex; gap: 6px; }

.ft-badge.warn { background: rgba(255, 176, 66, 0.16); color: #ffb042; }

/* ---------- workspace ---------- */

.ft-ws-briefing { border-color: rgba(96, 165, 250, 0.35); }

.ft-ws-body { padding: 10px 14px 12px; border-top: 1px solid var(--ft-border); }

.ft-ws-topic { font-weight: 600; margin: 0 0 6px; }

.ft-ws-summary { color: var(--ft-text-2); font-size: 0.82rem; line-height: 1.7; margin: 0 0 8px; }

.ft-ws-sub { color: var(--ft-text-2); font-size: 0.72rem; font-weight: 600; margin: 10px 0 4px; }

.ft-ws-task {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; border-bottom: 1px dashed var(--ft-border);
    font-size: 0.82rem; cursor: pointer;
}
.ft-ws-task:last-child { border-bottom: none; }
.ft-ws-task input[type="checkbox"] { accent-color: var(--ft-accent); flex-shrink: 0; }
.ft-ws-task-txt { flex: 1; min-width: 0; }
.ft-ws-task-meta { color: var(--ft-text-2); font-size: 0.7rem; white-space: nowrap; }

.ft-ws-decision {
    border-right: 3px solid var(--ft-accent);
    padding: 4px 10px; margin: 4px 0;
    background: rgba(96, 165, 250, 0.07); border-radius: 6px;
    font-size: 0.82rem;
}

.ft-ws-files { display: flex; flex-direction: column; gap: 4px; }

.ft-ws-file {
    display: flex; align-items: center; gap: 8px;
    color: var(--ft-text); text-decoration: none;
    padding: 5px 8px; border-radius: 8px; font-size: 0.8rem;
}
.ft-ws-file:hover { background: rgba(255, 255, 255, 0.05); color: var(--ft-accent); }

.ft-decl-stats b { color: #ffb042; font-weight: 600; }

.ft-decl-topic {
  font-size: 0.85rem; color: var(--ft-text-1); margin: 8px 0 4px; font-weight: 600;
}

.ft-decl-sec { margin-top: 8px; }

.ft-decl-sectitle {
  display: block; font-size: 0.7rem; color: var(--ft-text-2);
  letter-spacing: 0.02em; margin-bottom: 5px;
}

.ft-decl-decision {
  font-size: 0.8rem; color: var(--ft-text-1); padding: 3px 0 3px 12px;
  border-right: 2px solid rgba(94, 158, 255, 0.5); margin-bottom: 3px;
}

.ft-decl-task {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: var(--ft-text-1);
  padding: 5px 8px; border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, 0.03); margin-bottom: 4px;
}

.ft-decl-task input[type="checkbox"] { accent-color: #4f8cff; width: 15px; height: 15px; cursor: pointer; }

.ft-decl-task.done .ft-decl-taskname { text-decoration: line-through; opacity: 0.55; }

.ft-decl-taskname { flex: 1; min-width: 0; }

/* ---------- موبایل: خلوت‌سازی داک و هدر ---------- */
/* آیتم‌هایی که فقط در نمای موبایل داخل منوی «بیشتر» دیده می‌شوند */
.ft-popup-item.ft-mobile-only { display: none; }

@media (max-width: 860px) {
  /* دکمه‌ها/گروه‌های ثانویه در موبایل پنهان؛ از منوی ⋮ در دسترس‌اند */
  .ft-mobile-hide { display: none !important; }
  .ft-popup-item.ft-mobile-only { display: flex; }

  /* هدر مینیمال: عنوان + تایمر + وضعیت اتصال */
  .ft-vw-brand { display: none; }
  .ft-vw-chip { display: inline-flex; padding: 3px 9px; font-size: 0.68rem; gap: 4px; }

  /* صحنه کمی بلندتر تا ویدیو سهم بیشتری از صفحه بگیرد */
  .mahfel-body .mahfel-main { height: clamp(200px, 34vh, 330px); }

  /* ریل ابزارها: یک ردیف اسکرول‌دار به‌جای چند ردیف آیکون */
  .ft-compact-rail {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .ft-compact-rail::-webkit-scrollbar { display: none; }
  .ft-compact-rail > * { flex: 0 0 auto; }
}

/* لوگوی متنی محفل — جایگزین PNGهای کم‌رنگ؛ کلاسهای تم (desktop/toggle) همان‌طور کار می‌کنند */
.mahfel-logo {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  line-height: 2rem;
  font-size: 1.3rem;
  font-weight: 800;
  color: #1d4ed8;
  white-space: nowrap;
}

/* قالب هنگام نمایش display:block می‌دهد؛ margin روی متن در هر دو حالت فاصله می‌سازد */
.mahfel-logo > svg { flex-shrink: 0; vertical-align: middle; }
.mahfel-logo-n { margin-inline-start: 8px; }

.mahfel-inline { display: inline-block; vertical-align: -0.22em; }

.mahfel-logo-light { color: #fff; }

.mahfel-logo-sm { font-size: 1rem; }

/* ---------- رویدادها: داشبورد مدیریت ---------- */

.ft-ev-poster {
  width: 200px; height: 125px; border-radius: 12px; overflow: hidden;
  border: 1px dashed var(--ft-border); flex: 0 0 auto;
}
.ft-ev-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-ev-poster-empty {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  color: var(--ft-text-2); font-size: 0.72rem;
  background: linear-gradient(135deg, rgba(58,130,255,0.12), rgba(112,249,184,0.08));
}

.ft-ev-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ft-ev-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(58, 130, 255, 0.12); color: #7aa7ff;
  border-radius: 999px; padding: 3px 10px; font-size: 0.75rem;
}
.ft-ev-chip button {
  background: none; border: none; color: inherit; padding: 0;
  display: inline-flex; cursor: pointer; opacity: 0.7;
}
.ft-ev-chip button:hover { opacity: 1; }

.ft-ev-checklist { display: flex; flex-direction: column; gap: 7px; }
.ft-ev-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; color: var(--ft-text-2);
  padding: 7px 10px; border-radius: 9px;
  border: 1px solid var(--ft-border);
}
.ft-ev-check.done { color: #34c77b; border-color: rgba(52, 199, 123, 0.3); background: rgba(52, 199, 123, 0.06); }

/* حلقهٔ پیشرفت تکمیل اطلاعات */
.ft-ev-ring {
  --p: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: conic-gradient(#34c77b calc(var(--p) * 1%), rgba(255,255,255,0.08) 0);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.ft-ev-ring span {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ft-surface-2, #1f1f1f);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700;
}

/* ---------- رویدادها: صفحهٔ عمومی ثبت‌نام ---------- */

.ft-landing {
  min-height: 100vh; direction: rtl;
  background: radial-gradient(1200px 500px at 50% -10%, rgba(58,130,255,0.18), transparent),
              var(--ft-bg, #151515);
  color: var(--ft-text, #dededd);
  font-family: inherit;
  padding-bottom: 40px;
}
.ft-landing-empty {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; color: var(--ft-text-2);
}

.ft-landing-hero {
  max-width: 980px; margin: 0 auto; padding: 48px 20px 24px;
  display: flex; gap: 32px; align-items: center; flex-wrap: wrap;
}
.ft-landing-poster {
  width: min(360px, 100%); aspect-ratio: 8/5; border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45); flex: 0 1 auto;
}
.ft-landing-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-landing-poster-default {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(58,130,255,0.35), rgba(112,249,184,0.2));
  color: rgba(255,255,255,0.7);
}
.ft-landing-head { flex: 1 1 320px; min-width: 0; }
.ft-landing-head h1 { font-size: 1.9rem; font-weight: 800; margin: 10px 0 12px; line-height: 1.35; }
.ft-landing-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.ft-landing-badge {
  font-size: 0.72rem; padding: 4px 12px; border-radius: 999px;
  background: rgba(58,130,255,0.16); color: #8db4ff;
}
.ft-landing-badge.live { background: rgba(52,199,123,0.18); color: #4ade80; }
.ft-landing-badge.upcoming { background: rgba(250,190,60,0.15); color: #fbbf24; }
.ft-landing-badge.muted { background: rgba(255,255,255,0.08); color: var(--ft-text-2); }
.ft-landing-org, .ft-landing-time {
  display: flex; align-items: center; gap: 7px;
  color: var(--ft-text-2); font-size: 0.9rem; margin: 4px 0;
}

.ft-countdown { display: flex; gap: 10px; margin-top: 18px; }
.ft-cd-cell {
  min-width: 68px; padding: 10px 8px; text-align: center;
  background: rgba(255,255,255,0.05); border: 1px solid var(--ft-border);
  border-radius: 14px;
}
.ft-cd-cell b { display: block; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ft-cd-cell span { font-size: 0.68rem; color: var(--ft-text-2); }

.ft-live-pill {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  color: #4ade80; font-weight: 600; font-size: 0.9rem;
}
.ft-live-pill i {
  width: 9px; height: 9px; border-radius: 50%; background: #4ade80;
  animation: ftLivePulse 1.4s ease-in-out infinite;
}
@keyframes ftLivePulse { 50% { opacity: 0.3; transform: scale(0.75); } }

.ft-event-actions {
  max-width: 940px; margin: 0 auto 22px; padding: 10px 12px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--ft-overlay); border: 1px solid var(--ft-border);
  border-radius: 16px; box-shadow: 0 12px 38px rgba(0,0,0,.1);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.ft-event-action {
  min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 12px; border-radius: 10px; border: 1px solid transparent;
  color: var(--ft-text); background: transparent; font: inherit; font-size: .78rem; cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.ft-event-action:hover { background: rgba(255,255,255,.07); border-color: var(--ft-border); transform: translateY(-1px); }
.ft-event-action.primary { color: #d9e7ff; background: rgba(58,130,255,.16); border-color: rgba(58,130,255,.3); }
.ft-event-action-sep { width: 1px; height: 24px; margin: 0 2px; background: var(--ft-border); }
.ft-event-social {
  padding: 7px 10px; border-radius: 9px; color: var(--ft-text-2); text-decoration: none;
  font-size: .72rem; border: 1px solid transparent;
}
.ft-event-social:hover { color: #fff; border-color: var(--ft-border); }
.ft-event-social.telegram:hover { background: rgba(39,167,231,.14); }
.ft-event-social.whatsapp:hover { background: rgba(37,211,102,.12); }
.ft-event-zone { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--ft-text-2); font-size: .68rem; }

.ft-landing-body {
  max-width: 980px; margin: 0 auto; padding: 0 20px;
  display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap;
}
.ft-landing-main { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ft-landing-side { flex: 0 1 320px; min-width: 270px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }

.ft-landing-card {
  background: rgba(255,255,255,0.035); border: 1px solid var(--ft-border);
  border-radius: 16px; padding: 18px 20px;
}
.ft-landing-card h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.95rem; font-weight: 700; margin: 0 0 10px; color: #fff;
}
.ft-landing-about { font-size: 0.88rem; line-height: 2; color: var(--ft-text); white-space: pre-line; margin: 0; }
.ft-landing-list { margin: 0; padding-inline-start: 20px; font-size: 0.87rem; line-height: 2.1; }
.ft-landing-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-landing-chips span {
  background: rgba(112,249,184,0.1); color: #8ff0c3; font-size: 0.78rem;
  padding: 5px 12px; border-radius: 999px;
}
.ft-landing-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px; }
.ft-landing-tags span { color: var(--ft-text-2); font-size: 0.78rem; }

.ft-landing-speakers { display: flex; flex-direction: column; gap: 10px; }
.ft-landing-speaker { display: flex; align-items: center; gap: 10px; }
.ft-landing-speaker b { font-size: 0.88rem; display: block; }
.ft-landing-speaker small { color: var(--ft-text-2); font-size: 0.72rem; }
.ft-landing-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  background: linear-gradient(135deg, #3a82ff, #70f9b8); color: #10141b;
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.ft-landing-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ft-reg-card h3 { margin-bottom: 12px; }
.ft-reg-btn {
  display: block; width: 100%; text-align: center; text-decoration: none;
  background: linear-gradient(135deg, #3a82ff, #2563eb); color: #fff;
  border: none; border-radius: 12px; padding: 12px; font-size: 0.95rem; font-weight: 700;
  cursor: pointer; margin-top: 12px; transition: filter 0.15s;
}
.ft-reg-btn:hover { filter: brightness(1.1); color: #fff; }
.ft-reg-btn:disabled { opacity: 0.5; cursor: default; }
.ft-reg-hint { font-size: 0.75rem; color: var(--ft-text-2); margin: 10px 0 0; line-height: 1.8; }
.ft-reg-error { font-size: 0.78rem; color: var(--ft-danger, #f04438); margin: 6px 0 0; }
.ft-reg-state { text-align: center; padding: 18px 6px; color: var(--ft-text-2); font-size: 0.9rem; }
.ft-reg-done { text-align: center; padding: 12px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #34c77b; }
.ft-reg-done b { font-size: 1rem; }
.ft-reg-done span { color: var(--ft-text-2); font-size: 0.8rem; }

.ft-cap-bar {
  height: 6px; border-radius: 99px; background: rgba(255,255,255,0.08);
  overflow: hidden; margin-bottom: 6px;
}
.ft-cap-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3a82ff, #70f9b8); border-radius: 99px; }

/* انتخاب بلیت و کد تخفیف در صفحهٔ ثبت‌نام */
.ft-ticket-picker { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ft-ticket-opt {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid var(--ft-border); border-radius: 12px; padding: 10px 12px;
  background: rgba(255,255,255,0.03); transition: border-color .15s, background .15s;
}
.ft-ticket-opt input { accent-color: #3a82ff; }
.ft-ticket-opt.on { border-color: #3a82ff; background: rgba(58,130,255,0.12); }
.ft-ticket-opt.sold { opacity: 0.45; cursor: not-allowed; }
.ft-ticket-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ft-ticket-name { font-size: 0.85rem; font-weight: 600; }
.ft-ticket-desc { font-size: 0.7rem; color: var(--ft-text-2); font-weight: 400; }
.ft-ticket-price { margin-inline-start: auto; font-size: 0.8rem; color: #8ff0c3; font-weight: 700; white-space: nowrap; }
.ft-ticket-left { font-size: 0.68rem; color: var(--ft-text-2); white-space: nowrap; }
.ft-discount-row { display: flex; gap: 8px; }
.ft-discount-row input {
  flex: 1; background: var(--ft-surface-2); border: 1px solid var(--ft-border);
  border-radius: 10px; color: var(--ft-text); padding: 8px 12px; font: inherit; font-size: 0.85rem;
}
.ft-dc-ok { font-size: 0.75rem; color: #4ade80; margin-top: 4px; display: block; }
.ft-price-line {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px dashed var(--ft-border); margin-top: 10px; padding-top: 10px;
  font-size: 0.85rem; color: var(--ft-text-2);
}
.ft-price-line b { color: #8ff0c3; font-size: 0.95rem; }
.ft-reg-code {
  text-align: center; border: 1px dashed var(--ft-border); border-radius: 12px;
  padding: 8px; margin-top: 10px;
}
.ft-reg-code small { display: block; color: var(--ft-text-2); font-size: 0.68rem; }
.ft-reg-code b { font-size: 1.05rem; letter-spacing: 2px; }

/* ---------- صفحهٔ عمومی رویدادها (/explore) ---------- */
.ft-explore { min-height: 100vh; direction: rtl; background: var(--bg); color: var(--ink); padding-bottom: 48px; }
.ft-explore-hero {
  max-width: 1080px; margin: 0 auto; padding: 56px 20px 8px; text-align: center;
}
.ft-explore-hero h1 { color: var(--ink); font-size: 2rem; font-weight: 800; margin: 0 0 8px; }
.ft-explore-hero p { color: var(--ink-2); font-size: 0.92rem; margin: 0 0 20px; }
.ft-explore-search {
  max-width: 460px; margin: 0 auto; display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--card-br);
  border-radius: 14px; padding: 10px 16px;
}
.ft-explore-search input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--ink); font: inherit; font-size: 0.9rem;
}
.ft-explore-search input::placeholder { color: var(--ink-3); }
.ft-explore-cats {
  max-width: 1080px; margin: 18px auto 0; padding: 0 20px;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.ft-explore-cats button {
  border: 1px solid var(--card-br); background: var(--chip);
  color: var(--ink-2); font: inherit; font-size: 0.78rem;
  padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: all .15s;
}
.ft-explore-cats button.on { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.ft-explore-sec { max-width: 1080px; margin: 30px auto 0; padding: 0 20px; }
.ft-explore-sec-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 1rem; font-weight: 700; margin: 0 0 14px; color: var(--ink);
}
.ft-explore-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px;
}
.ft-ev-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--card-br);
  border-radius: 16px; overflow: hidden; transition: transform .15s, border-color .15s;
}
.ft-ev-card:hover { transform: translateY(-3px); border-color: var(--acc); color: inherit; }
.ft-ev-card-poster { aspect-ratio: 16/9; position: relative; background: linear-gradient(135deg, rgba(58,130,255,0.3), rgba(112,249,184,0.15)); }
.ft-ev-card-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-ev-card-poster .ft-landing-badge { position: absolute; top: 10px; inset-inline-start: 10px; }
.ft-ev-card-poster .ft-ev-poster-ic {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.55);
}
.ft-ev-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ft-ev-card-body h3 { font-size: 0.98rem; font-weight: 700; margin: 0; color: var(--ink); line-height: 1.5; }
.ft-ev-card-meta { font-size: 0.75rem; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.ft-ev-card-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; }
.ft-ev-card-price { font-size: 0.8rem; font-weight: 700; color: var(--k-success); }
.ft-ev-card-cta { font-size: 0.75rem; color: var(--ac); }
.ft-explore-empty { text-align: center; padding: 60px 20px; color: var(--ink-2); }
.ft-explore .ft-landing-footer { color: var(--ink-3); }
.ft-explore .ft-landing-footer b { color: var(--k-success); }
.ft-support-card small { color: var(--ft-text-2); font-size: 0.72rem; }

.ft-landing-footer {
  text-align: center; margin-top: 44px; color: var(--ft-text-2); font-size: 0.75rem;
}
.ft-landing-footer b { color: #34c77b; }
.ft-landing-compat { margin-top: 8px; font-size: 0.68rem; opacity: 0.7; }

/* کارت QR — ورود سریع با موبایل */
.ft-qr-card {
  max-width: 940px; margin: -8px auto 22px; padding: 16px 18px;
  display: flex; align-items: center; gap: 18px;
  background: var(--ft-overlay); border: 1px solid var(--ft-border);
  border-radius: 16px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.ft-qr-card canvas { width: 128px; height: 128px; border-radius: 12px; background: #fff; padding: 6px; flex: 0 0 auto; }
.ft-qr-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ft-qr-text b { font-size: 0.9rem; color: #fff; }
.ft-qr-text span { color: var(--ft-text-2); font-size: 0.78rem; line-height: 1.8; }
.ft-qr-text code { color: var(--ft-text-2); font-size: 0.7rem; direction: ltr; word-break: break-all; text-align: left; }

/* بازیابی بلیت با موبایل — معادل ورود کاربر دارای بلیت */
.ft-reg-lookup-toggle {
  display: block; width: 100%; margin-top: 10px; padding: 6px;
  background: none; border: none; color: var(--ft-text-2);
  font: inherit; font-size: 0.75rem; cursor: pointer; text-align: center;
}
.ft-reg-lookup-toggle:hover { color: #8db4ff; }
.ft-reg-lookup {
  border-top: 1px dashed var(--ft-border); margin-top: 8px; padding-top: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.ft-reg-lookup .ft-reg-btn { margin-top: 0; }
.ft-reg-ticket { display: inline-flex; align-items: center; gap: 4px; color: var(--ft-text-2); font-size: 0.75rem; }

/* عکس سخنران در صفحهٔ مدیریت رویداد */
.ft-sp-photo {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px dashed #98a2b3; cursor: pointer; color: #98a2b3; margin: 0;
}
.ft-sp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-sp-title { min-width: 130px; }

@media (max-width: 640px) {
  .ft-landing-hero { padding-top: 28px; }
  .ft-landing-head h1 { font-size: 1.4rem; }
  .ft-landing-side { position: static; flex: 1 1 100%; }
  .ft-event-actions { margin: 0 20px 18px; padding: 8px; gap: 6px; }
  .ft-event-action { flex: 1 1 calc(33.333% - 6px); padding-inline: 7px; }
  .ft-event-action-sep, .ft-event-zone { display: none; }
  .ft-event-social { flex: 1; text-align: center; background: rgba(255,255,255,.035); }
  .ft-countdown { gap: 6px; }
  .ft-cd-cell { min-width: 0; flex: 1; padding-inline: 4px; }
  .ft-cd-cell b { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-live-pill i { animation: none; }
  .ft-event-action, .ft-ev-card { transition: none; }
}

/* ---------- صفحهٔ عمومی حریم خصوصی ---------- */

.pv-page {
  min-height: 100vh; direction: rtl;
  background: radial-gradient(1200px 500px at 50% -10%, rgba(58,130,255,0.18), transparent),
              var(--ft-bg, #151515);
  color: var(--ft-text, #dededd);
  padding-bottom: 48px;
}
.pv-progress {
  position: fixed; top: 0; right: 0; left: 0; height: 3px; z-index: 100;
  background: rgba(255,255,255,0.05);
}
.pv-progress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #3a82ff, #70f9b8);
}

.pv-hero { max-width: 980px; margin: 0 auto; padding: 64px 20px 8px; text-align: center; }
.pv-hero-shield {
  width: 64px; height: 64px; border-radius: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(58,130,255,0.25), rgba(112,249,184,0.18));
  border: 1px solid rgba(58,130,255,0.3); color: #8db4ff;
}
.pv-hero h1 { font-size: 2rem; font-weight: 800; margin: 18px 0 10px; }
.pv-hero-lead { max-width: 640px; margin: 0 auto; color: var(--ft-text-2); font-size: 0.92rem; line-height: 2; }
.pv-hero-meta { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.pv-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.74rem; padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--ft-border);
  color: var(--ft-text-2); text-decoration: none;
}
.pv-pill-btn { cursor: pointer; font-family: inherit; }
.pv-pill-btn:hover, a.pv-pill:hover { color: #fff; border-color: rgba(58,130,255,0.5); }

.pv-promises {
  max-width: 980px; margin: 30px auto 0; padding: 0 20px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.pv-promise {
  background: rgba(255,255,255,0.035); border: 1px solid var(--ft-border);
  border-radius: 16px; padding: 16px;
}
.pv-promise-ico {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(112,249,184,0.1); color: #70f9b8;
}
.pv-promise b { display: block; font-size: 0.85rem; margin: 10px 0 4px; color: #fff; }
.pv-promise p { font-size: 0.72rem; color: var(--ft-text-2); line-height: 1.9; margin: 0; }

.pv-body {
  max-width: 980px; margin: 26px auto 0; padding: 0 20px;
  display: flex; gap: 22px; align-items: flex-start;
}
.pv-side { flex: 0 0 230px; position: sticky; top: 20px; }
.pv-toc {
  background: rgba(255,255,255,0.03); border: 1px solid var(--ft-border);
  border-radius: 16px; padding: 12px 8px;
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.pv-toc-title { font-size: 0.7rem; color: var(--ft-text-2); padding: 2px 10px 8px; }
.pv-toc a {
  display: flex; gap: 8px; align-items: baseline;
  padding: 7px 10px; border-radius: 10px;
  font-size: 0.78rem; color: var(--ft-text-2); text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.pv-toc a:hover { color: #fff; background: rgba(255,255,255,0.05); }
.pv-toc a.active { color: #8db4ff; background: rgba(58,130,255,0.12); }
.pv-toc a .n { font-size: 0.65rem; color: var(--ft-text-2); font-variant-numeric: tabular-nums; }
.pv-toc a.active .n { color: #8db4ff; }

.pv-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pv-sec {
  background: rgba(255,255,255,0.035); border: 1px solid var(--ft-border);
  border-radius: 16px; padding: 20px 22px; scroll-margin-top: 20px;
}
.pv-sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pv-sec-num {
  width: 30px; height: 30px; border-radius: 10px; flex: 0 0 auto;
  background: rgba(58,130,255,0.14); color: #8db4ff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 800;
}
.pv-sec-head h2 { font-size: 1rem; font-weight: 700; margin: 0; color: #fff; flex: 1; }
.pv-link-btn {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
  border: 1px solid transparent; background: transparent; color: var(--ft-text-2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: 0.15s;
}
.pv-sec:hover .pv-link-btn, .pv-link-btn:focus-visible { opacity: 1; border-color: var(--ft-border); }
.pv-link-btn:hover { color: #fff; }
.pv-link-btn.done { color: #70f9b8; opacity: 1; }
.pv-sec-body p, .pv-sec-body li { font-size: 0.86rem; line-height: 2.1; color: var(--ft-text); }
.pv-sec-body p { margin: 0 0 8px; }
.pv-sec-body p:last-child { margin-bottom: 0; }
.pv-sec-body ul { margin: 6px 0 0; padding-inline-start: 22px; }
.pv-sec-body li { margin-bottom: 4px; }
.pv-sec-body li::marker { color: #3a82ff; }
.pv-sec-body b { color: #fff; }
.pv-note {
  margin-top: 10px; font-size: 0.78rem; color: var(--ft-text-2); line-height: 1.9;
  background: rgba(255,255,255,0.03); border: 1px dashed var(--ft-border);
  border-radius: 10px; padding: 10px 14px;
}

.pv-contact { max-width: 980px; margin: 26px auto 0; padding: 0 20px; }
.pv-contact-card {
  border-radius: 18px; padding: 20px 22px;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(58,130,255,0.16), rgba(112,249,184,0.08));
  border: 1px solid rgba(58,130,255,0.25);
}
.pv-contact-ico {
  width: 44px; height: 44px; border-radius: 14px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(58,130,255,0.18); color: #8db4ff;
}
.pv-contact-txt { flex: 1 1 240px; }
.pv-contact-txt b { display: block; font-size: 0.95rem; color: #fff; }
.pv-contact-txt p { margin: 4px 0 0; font-size: 0.78rem; color: var(--ft-text-2); }
.pv-contact-btn {
  display: inline-block; padding: 10px 22px; border-radius: 12px;
  background: linear-gradient(135deg, #3a82ff, #2563eb); color: #fff;
  font-size: 0.85rem; font-weight: 700; text-decoration: none; transition: filter 0.15s;
}
.pv-contact-btn:hover { filter: brightness(1.1); color: #fff; }

.pv-footer { text-align: center; margin-top: 44px; color: var(--ft-text-2); font-size: 0.75rem; }
.pv-footer b { color: #34c77b; }
.pv-footer a { color: #8db4ff; text-decoration: none; }

@media (max-width: 860px) {
  .pv-side { display: none; }
  .pv-promises { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .pv-promises { grid-template-columns: 1fr; }
  .pv-hero { padding-top: 40px; }
  .pv-hero h1 { font-size: 1.5rem; }
}
@media print {
  .pv-progress, .pv-side, .pv-hero-meta, .pv-link-btn, .pv-contact, .pv-footer { display: none !important; }
  .pv-page { background: #fff; color: #1a1a1a; padding: 0; }
  .pv-hero { padding-top: 0; text-align: right; }
  .pv-hero h1 { color: #000; }
  .pv-hero-lead { color: #444; }
  .pv-promises { grid-template-columns: repeat(2, 1fr); }
  .pv-promise, .pv-sec { background: #fff; border: 1px solid #ddd; break-inside: avoid; }
  .pv-promise b, .pv-sec-head h2, .pv-sec-body b { color: #000; }
  .pv-promise p, .pv-sec-body p, .pv-sec-body li, .pv-note { color: #333; }
  .pv-sec-num { background: #eee; color: #333; }
}

/* ---------- share modal tabs ---------- */
.ft-share-tabs {
  display: flex;
  gap: 6px;
  background: var(--ft-surface-2);
  border: 1px solid var(--ft-border);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 16px;
}
.ft-share-tabs button {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--ft-text-2);
  font: inherit;
  font-size: 0.85rem;
  padding: 8px 6px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ft-share-tabs button.on {
  background: var(--ft-accent);
  color: #fff;
}
.ft-share-hint {
  font-size: 0.8rem;
  color: var(--ft-text-2);
  line-height: 1.8;
  text-align: right;
  margin: 0 0 6px;
}
.ft-share-hint.warn { color: #f5a623; }

.ft-embed-code {
  width: 100%;
  background: var(--ft-surface-2);
  border: 1px solid var(--ft-border);
  border-radius: 10px;
  color: var(--ft-text-2);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.72rem;
  line-height: 1.7;
  padding: 10px 12px;
  margin-bottom: 14px;
  resize: none;
  direction: ltr;
  text-align: left;
}

/* ---------- embed mode — اتاق داخل iframe سایت میزبان (?embed=1) ---------- */
.mahfel-room.embed .mahfel-join-page { padding: 8px; }
.mahfel-room.embed .mahfel-join-card {
  width: 340px;
  padding: 20px 18px 16px;
  border-radius: 14px;
}
.mahfel-room.embed .mahfel-join-logo { margin-bottom: 6px; }
.mahfel-room.embed .mahfel-join-subtitle { margin-bottom: 14px; }
.mahfel-room.embed .mahfel-precheck { display: none; }

/* ---------- phone companion page (/phone-share) ---------- */
.ph-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px 14px 30px;
  background:
    radial-gradient(640px 420px at 82% 8%, rgba(58, 130, 255, 0.18), transparent 60%),
    radial-gradient(520px 420px at 12% 88%, rgba(112, 249, 184, 0.08), transparent 60%),
    var(--ft-bg);
  color: var(--ft-text);
}
.ph-card {
  width: 430px;
  max-width: 100%;
  background: rgba(42, 42, 42, 0.85);
  backdrop-filter: blur(14px);
  border: 1px solid var(--ft-border);
  border-radius: 20px;
  padding: 22px 20px 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
.ph-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.ph-head > svg {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--ft-accent), #6a5cff);
  border-radius: 10px;
  padding: 6px;
  box-sizing: content-box;
}
.ph-head > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ph-head > div > b { font-size: 1rem; }
.ph-head > div > span { font-size: 0.78rem; color: var(--ft-text-2); }
.ph-conn {
  font-size: 0.72rem;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid var(--ft-border);
  color: var(--ft-text-2);
}
.ph-conn.on { color: var(--ft-accent-2); border-color: rgba(112, 249, 184, 0.4); }
.ph-conn.warn { color: #f5a623; border-color: rgba(245, 166, 35, 0.4); }
.ph-preview {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #0d0d0d;
  border: 1px solid var(--ft-border);
  border-radius: 14px;
  margin-bottom: 14px;
}
.ph-preview.off { display: none; }
.ph-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.ph-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 92px;
  padding: 12px 8px;
  border: 1px solid var(--ft-border);
  border-radius: 14px;
  background: var(--ft-surface-2);
  color: var(--ft-text);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ph-action:hover { border-color: var(--ft-accent); }
.ph-action.on {
  background: var(--ft-accent);
  border-color: var(--ft-accent);
  color: #fff;
}
.ph-action.danger:hover { border-color: var(--ft-danger); color: var(--ft-danger); }
.ph-action:disabled { opacity: 0.55; cursor: default; }
.ph-hint {
  font-size: 0.8rem;
  color: var(--ft-text-2);
  line-height: 1.9;
  margin: 12px 0;
}
.ph-hint.danger { color: var(--ft-danger); }
.ph-card .mahfel-join-btn { margin-top: 6px; }

/* ==================== پشتیبانی — صفحهٔ /support ==================== */
.sp-tabs { border-bottom: none; }
.sp-tabs .nav-link { border: none; background: none; cursor: pointer; }
.sp-tabs .nav-link.active { font-weight: 700; }

.sp-chat {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 260px; max-height: 430px; overflow-y: auto;
  padding: 6px 2px; scroll-behavior: smooth;
}
.sp-chat .mahfel-chat-bubble {
  background: var(--custom-bg-color, #f1f4fb);
  color: var(--default-text-color);
  border: 1px solid var(--default-border, #eae8f1);
  max-width: 82%;
}
.sp-chat .mahfel-chat-bubble.me {
  background: var(--primary-color, #0162e8);
  color: #fff; border-color: transparent;
}
.sp-chat .mahfel-chat-bubble.me .mahfel-chat-sender,
.sp-chat .mahfel-chat-bubble.me .text-muted { color: rgba(255,255,255,0.75) !important; }
.sp-bot-error { border-color: rgba(var(--danger-rgb, 238,51,94), .4) !important; }
.sp-attach-img img {
  max-width: 220px; max-height: 160px; border-radius: 8px; margin-top: 6px;
  border: 1px solid var(--default-border, #eae8f1); display: block;
}

.sp-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.sp-typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-muted, #7987a1);
  animation: spBlink 1.2s infinite ease-in-out;
}
.sp-typing i:nth-child(2) { animation-delay: .15s; }
.sp-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes spBlink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sp-chip {
  border: 1px solid var(--default-border, #eae8f1);
  background: var(--custom-white, #fff); color: var(--default-text-color);
  font-size: .75rem; border-radius: 999px; padding: 5px 12px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.sp-chip:hover:not(:disabled) { border-color: var(--primary-color); color: var(--primary-color); }
.sp-chip:disabled { opacity: .55; cursor: default; }

.sp-chat-input { border-top: 1px solid var(--default-border, #eae8f1); margin-top: 10px; padding: 10px 0 0; }
.sp-chat-input input, .sp-chat-input textarea {
  flex: 1; min-width: 0; resize: none;
  background: var(--form-control-bg, #fff); color: var(--default-text-color);
  border: 1px solid var(--input-border, #e9edf6);
  border-radius: 12px; padding: 8px 12px; outline: none;
  font-family: inherit; font-size: .85rem;
}
.sp-chat-input input:focus, .sp-chat-input textarea:focus { border-color: var(--primary-color); }
.sp-chat-input .mahfel-tool-btn {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--input-border, #e9edf6); background: var(--custom-white, #fff);
  color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; margin: 0; transition: color .15s, border-color .15s;
}
.sp-chat-input .mahfel-tool-btn:hover { color: var(--primary-color); border-color: var(--primary-color); }
.sp-chat-input .ft-chat-send:disabled { opacity: .5; transform: none; }

/* فهرست تیکت‌ها */
.sp-ticket-list { display: flex; flex-direction: column; }
.sp-ticket-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  background: none; border: none; border-bottom: 1px solid var(--default-border, #eae8f1);
  padding: 11px 4px; cursor: pointer; color: inherit; transition: background .12s;
}
.sp-ticket-row:hover { background: var(--list-hover-focus-bg, #ecf0fa); }
.sp-ticket-row:last-child { border-bottom: none; }
.sp-ticket-num { color: var(--text-muted); font-size: .78rem; flex-shrink: 0; min-width: 42px; }
.sp-ticket-main { flex: 1; min-width: 0; }
.sp-ticket-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .88rem; }
.sp-ticket-meta { display: flex; gap: 6px; flex-shrink: 0; }
.sp-unread-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: rgb(var(--danger-rgb, 238,51,94)); display: inline-block;
}

/* پیوست‌ها و امتیاز */
.sp-reply-files { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-file-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--custom-bg-color, #f1f4fb); border: 1px solid var(--default-border, #eae8f1);
  border-radius: 999px; padding: 3px 10px; font-size: .72rem;
}
.sp-file-chip button { border: none; background: none; color: var(--text-muted); padding: 0; cursor: pointer; display: inline-flex; }
.sp-rate-box {
  display: flex; align-items: center; gap: 6px;
  border-top: 1px dashed var(--default-border, #eae8f1); padding-top: 10px; margin-top: 4px;
}
.sp-star { border: none; background: none; padding: 2px; cursor: pointer; color: #f5b849; font-size: 1.15rem; }
.sp-star:hover { transform: scale(1.2); }

/* راه‌های ارتباطی و پرسش‌های متداول */
.sp-channel {
  display: flex; align-items: center; gap: 10px; padding: 9px 4px;
  border-radius: 10px; cursor: pointer; color: inherit; text-decoration: none;
  transition: background .12s;
}
.sp-channel:hover { background: var(--list-hover-focus-bg, #ecf0fa); color: inherit; }
.sp-channel .avatar { flex-shrink: 0; }
.sp-channel b { display: block; font-size: .83rem; }
.sp-channel small { color: var(--text-muted); font-size: .72rem; }
.sp-channel > i:last-child { margin-inline-start: auto; color: var(--text-muted); }

.sp-faq details { border-bottom: 1px solid var(--default-border, #eae8f1); }
.sp-faq details:last-child { border-bottom: none; }
.sp-faq summary {
  padding: 10px 2px; cursor: pointer; font-size: .84rem; font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.sp-faq summary::before {
  content: "\ea64"; font-family: remixicon; font-size: 1rem;
  color: var(--text-muted); transition: transform .15s;
}
.sp-faq details[open] summary::before { transform: rotate(-90deg); }
.sp-faq details p {
  margin: 0; padding: 0 24px 12px 2px; font-size: .8rem;
  color: var(--text-muted); line-height: 1.9;
}

/* ==================== ویجت شناور «از محفل بپرس» ==================== */
#mfSupWidget { font-family: inherit; }
.mf-sup-fab {
  position: fixed; bottom: 38px; inset-inline-end: 20px; z-index: 1060;
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--primary-color, #0162e8), #3a82ff);
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(var(--primary-rgb, 1,98,232), .35);
  transition: transform .18s, box-shadow .18s;
}
.mf-sup-fab:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(var(--primary-rgb, 1,98,232), .45); }
.mf-sup-fab.open { transform: rotate(90deg) scale(.92); }
.mf-sup-tag {
  position: fixed; bottom: 12px; inset-inline-end: 47px; z-index: 1059;
  transform: translateX(-50%); padding: 1px 9px; border-radius: 999px;
  font-size: .62rem; font-weight: 700; white-space: nowrap;
  color: var(--default-text-color, #4a5568);
  background: var(--custom-white, #fff);
  border: 1px solid var(--default-border, #eae8f1);
  box-shadow: 0 4px 12px rgba(15,23,42,.14);
  pointer-events: none;
}
.mf-sup-fab.open ~ .mf-sup-tag { display: none; }
.mf-sup-badge {
  position: absolute; top: -3px; inset-inline-end: -3px;
  min-width: 20px; height: 20px; border-radius: 999px; padding: 0 5px;
  background: rgb(var(--danger-rgb, 238,51,94)); color: #fff;
  font-size: .68rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--custom-white, #fff);
}
.mf-sup-panel {
  position: fixed; bottom: 100px; inset-inline-end: 20px; z-index: 1060;
  width: 370px; max-width: calc(100vw - 32px); height: 540px; max-height: calc(100vh - 126px);
  background: var(--custom-white, #fff); color: var(--default-text-color);
  border: 1px solid var(--default-border, #eae8f1); border-radius: 16px;
  box-shadow: 0 16px 48px rgba(35, 45, 80, .22);
  display: flex; flex-direction: column; overflow: hidden;
  animation: mfSupIn .22s ease;
}
@keyframes mfSupIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.mf-sup-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: linear-gradient(135deg, var(--primary-color, #0162e8), #3a82ff); color: #fff;
}
.mf-sup-head-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center;
}
.mf-sup-head-text { flex: 1; }
.mf-sup-head-text b { display: block; font-size: .9rem; }
.mf-sup-head-text small { opacity: .8; font-size: .68rem; }
.mf-sup-close {
  border: none; background: rgba(255,255,255,.15); color: #fff; cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px; font-size: 1.1rem; line-height: 1;
}
.mf-sup-close:hover { background: rgba(255,255,255,.3); }
.mf-sup-msgs {
  flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px;
  background: var(--default-background, #f8fafd);
}
.mf-sup-msg {
  align-self: flex-start; max-width: 85%;
  background: var(--custom-white, #fff); border: 1px solid var(--default-border, #eae8f1);
  border-radius: 12px; border-start-start-radius: 4px;
  padding: 8px 11px; font-size: .82rem; line-height: 1.8; word-break: break-word;
}
.mf-sup-msg.me {
  align-self: flex-end; background: var(--primary-color, #0162e8); color: #fff;
  border-color: transparent; border-start-start-radius: 12px; border-start-end-radius: 4px;
}
.mf-sup-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.mf-sup-typing i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted, #7987a1);
  animation: spBlink 1.2s infinite ease-in-out;
}
.mf-sup-typing i:nth-child(2) { animation-delay: .15s; }
.mf-sup-typing i:nth-child(3) { animation-delay: .3s; }
.mf-sup-escalate {
  align-self: center; margin-top: 2px; font-size: .75rem; font-weight: 700;
  color: rgb(var(--warning-rgb, 251,188,11)); background: rgba(var(--warning-rgb, 251,188,11), .12);
  border: 1px solid rgba(var(--warning-rgb, 251,188,11), .35);
  padding: 5px 12px; border-radius: 999px; text-decoration: none;
}
.mf-sup-escalate:hover { filter: brightness(.95); color: rgb(var(--warning-rgb, 251,188,11)); }
.mf-sup-chips {
  display: flex; gap: 6px; padding: 8px 10px 0; overflow-x: auto; flex-shrink: 0;
}
.mf-sup-chips button {
  flex-shrink: 0; border: 1px solid var(--default-border, #eae8f1);
  background: var(--custom-white, #fff); color: var(--default-text-color);
  font-size: .7rem; border-radius: 999px; padding: 4px 10px; cursor: pointer;
}
.mf-sup-chips button:hover { border-color: var(--primary-color); color: var(--primary-color); }
.mf-sup-input {
  display: flex; gap: 8px; padding: 10px; flex-shrink: 0;
  border-top: 1px solid var(--default-border, #eae8f1);
  background: var(--custom-white, #fff);
}
.mf-sup-input input {
  flex: 1; min-width: 0; border: 1px solid var(--input-border, #e9edf6); border-radius: 999px;
  background: var(--form-control-bg, #fff); color: var(--default-text-color);
  padding: 8px 14px; outline: none; font-family: inherit; font-size: .82rem;
}
.mf-sup-input input:focus { border-color: var(--primary-color); }
.mf-sup-send {
  width: 38px; height: 38px; border: none; border-radius: 50%; flex-shrink: 0;
  background: var(--primary-color, #0162e8); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.mf-sup-send:disabled { opacity: .5; }
.mf-sup-attach {
  width: 38px; height: 38px; border: none; border-radius: 50%; flex-shrink: 0;
  background: rgba(var(--primary-rgb, 1,98,232), .09); color: rgb(var(--primary-rgb, 1,98,232));
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.mf-sup-attach:hover { background: rgba(var(--primary-rgb, 1,98,232), .2); }
.mf-sup-att {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 7px 10px; max-width: 100%; border-radius: 10px;
  background: rgba(0,0,0,.05); color: inherit; text-decoration: none; font-size: .76rem;
}
.mf-sup-msg.me .mf-sup-att { background: rgba(255,255,255,.2); color: #fff; }
.mf-sup-att:hover { color: inherit; filter: brightness(.97); }
.mf-sup-att-ic { font-size: 1.25rem; flex-shrink: 0; }
.mf-sup-att-img { display: block; max-width: 190px; max-height: 140px; border-radius: 8px; object-fit: cover; }
.mf-sup-att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.mf-sup-foot {
  display: block; text-align: center; padding: 8px; flex-shrink: 0;
  border-top: 1px solid var(--default-border, #eae8f1);
  color: var(--text-muted); font-size: .72rem; text-decoration: none;
  background: var(--custom-white, #fff);
}
.mf-sup-foot:hover { color: var(--primary-color); }

/* ── تب‌ها و بخش «تماس با ما»ٔ ویجت پشتیبانی ── */
.mf-sup-head-status.on { font-weight: 700; }
.mf-sup-head-status.on::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 5px;
  border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.25);
}
.mf-sup-tabs {
  display: flex; flex-shrink: 0;
  border-bottom: 1px solid var(--default-border, #eae8f1);
  background: var(--custom-white, #fff);
}
.mf-sup-tabs button {
  flex: 1; padding: 9px 4px; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--text-muted); font: inherit; font-size: .78rem; cursor: pointer;
  transition: color .15s;
}
.mf-sup-tabs button:hover { color: var(--default-text-color); }
.mf-sup-tabs button.active { color: var(--primary-color); border-bottom-color: var(--primary-color); font-weight: 700; }
.mf-sup-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mf-sup-view[hidden] { display: none; }
.mf-sup-contact { overflow-y: auto; padding: 12px; background: var(--default-background, #f8fafd); }
.mf-sup-skeleton { padding: 34px 10px; text-align: center; color: var(--text-muted); font-size: .76rem; }
.mf-sup-card {
  background: var(--custom-white, #fff); border: 1px solid var(--default-border, #eae8f1);
  border-radius: 14px; padding: 12px; margin-bottom: 10px;
}
.mf-sup-live { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 700; }
.mf-sup-live i { width: 9px; height: 9px; border-radius: 50%; background: #b0b8c9; }
.mf-sup-live.on i { background: #22c55e; animation: mfSupLivePulse 2s infinite; }
@keyframes mfSupLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.35); }
  70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.mf-sup-status-card small { display: block; margin-top: 5px; color: var(--text-muted); font-size: .71rem; }
.mf-sup-sec { margin: 13px 2px 7px; font-size: .68rem; font-weight: 700; color: var(--text-muted); }
.mf-sup-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 8px;
  background: var(--custom-white, #fff); border: 1px solid var(--default-border, #eae8f1);
  border-radius: 12px; color: var(--default-text-color); text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.mf-sup-row:hover { border-color: rgba(var(--primary-rgb, 1,98,232), .45); transform: translateY(-1px); color: var(--default-text-color); }
.mf-sup-row-ic {
  width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 10px; background: rgba(var(--primary-rgb, 1,98,232), .09);
  color: var(--primary-color); font-size: 1.05rem;
}
.mf-sup-row-tx { flex: 1; min-width: 0; }
.mf-sup-row-tx b { display: block; font-size: .78rem; }
.mf-sup-row-tx small { color: var(--text-muted); font-size: .73rem; }
.mf-sup-row-go { color: var(--text-muted); font-size: 1rem; }
.mf-sup-msgrs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 2px; }
.mf-sup-msgr {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; font-size: .74rem; font-weight: 700;
  color: #fff; text-decoration: none; transition: filter .15s, transform .15s;
}
.mf-sup-msgr:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.mf-sup-msgr.bale { background: #1e88e5; }
.mf-sup-msgr.eitaa { background: #f58634; }
.mf-sup-msgr.telegram { background: #229ed9; }
.mf-sup-msgr.whatsapp { background: #25d366; }
.mf-sup-msgr.rubika { background: #e91e63; }
.mf-sup-msgr.soroush { background: #00bfa5; }
.mf-sup-cb input, .mf-sup-cb textarea {
  width: 100%; margin-bottom: 8px; padding: 8px 12px;
  border: 1px solid var(--input-border, #e9edf6); border-radius: 10px;
  background: var(--form-control-bg, #fff); color: var(--default-text-color);
  font: inherit; font-size: .79rem; outline: none;
}
.mf-sup-cb input:focus, .mf-sup-cb textarea:focus { border-color: var(--primary-color); }
.mf-sup-cb textarea { min-height: 52px; resize: vertical; }
.mf-sup-cb-send {
  width: 100%; padding: 9px; border: 0; border-radius: 10px;
  background: var(--primary-color, #0162e8); color: #fff;
  font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.mf-sup-cb-send:disabled { opacity: .55; cursor: default; }
.mf-sup-cb-msg { margin-top: 7px; font-size: .72rem; color: rgb(var(--danger-rgb, 238,51,94)); }
.mf-sup-cb-done { text-align: center; padding: 14px 8px; }
.mf-sup-cb-done .ok-ic {
  width: 46px; height: 46px; margin: 0 auto 9px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(var(--success-rgb, 34,197,94), .13);
  color: rgb(var(--success-rgb, 34,197,94)); font-size: 1.4rem;
}
.mf-sup-cb-done b { display: block; font-size: .82rem; }
.mf-sup-cb-done small { display: block; margin-top: 5px; color: var(--text-muted); font-size: .71rem; }
.mf-sup-cb-done .num { color: var(--text-muted); font-size: .72rem; }
.mf-sup-cb-track {
  display: inline-block; margin-top: 10px; font-size: .74rem; font-weight: 700;
  color: var(--primary-color); text-decoration: none;
}
.mf-sup-loginbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; flex-shrink: 0;
  border-top: 1px solid var(--default-border, #eae8f1);
  background: var(--custom-white, #fff); font-size: .76rem;
}
.mf-sup-loginbar[hidden] { display: none; }
.mf-sup-loginbar a {
  padding: 6px 14px; border-radius: 999px; flex-shrink: 0;
  background: var(--primary-color, #0162e8); color: #fff; font-weight: 700; text-decoration: none;
}
.mf-sup-loginbar a:hover { color: #fff; filter: brightness(1.08); }

/* ── چت زنده: سربرگ با آواتار تیم، حباب‌ها، پرسش‌های پرتکرار و فرم مهمان ── */
.mf-sup-avatars { display: flex; flex-shrink: 0; }
.mf-sup-av {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.22); color: #fff; font-size: .95rem;
  border: 2px solid rgba(255,255,255,.55); margin-inline-start: -9px;
}
.mf-sup-av:first-child { margin-inline-start: 0; }

.mf-sup-msg-by {
  display: flex; align-items: center; gap: 5px;
  margin: -2px 0 5px; font-size: .66rem; font-weight: 700;
  color: var(--text-muted);
}
.mf-sup-msg-by i { font-size: .8rem; color: rgb(var(--primary-rgb, 1,98,232)); }
.mf-sup-msg.staff .mf-sup-msg-by i { color: rgb(var(--success-rgb, 34,197,94)); }
.mf-sup-msg-time { display: block; margin-top: 4px; font-size: .6rem; opacity: .6; }
.mf-sup-msg.me .mf-sup-msg-time { text-align: left; }
.mf-sup-msg.bot { border-style: dashed; }
.mf-sup-msg.local { opacity: .96; }

.mf-sup-faq {
  background: var(--custom-white, #fff); border: 1px solid var(--default-border, #eae8f1);
  border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 7px;
}
.mf-sup-faq-title { font-size: .7rem; font-weight: 700; color: var(--text-muted); padding: 0 3px 3px; }
.mf-sup-faq button {
  border: 0; border-radius: 10px; padding: 9px 12px; cursor: pointer;
  background: rgba(var(--primary-rgb, 1,98,232), .09); color: rgb(var(--primary-rgb, 1,98,232));
  font: inherit; font-size: .76rem; font-weight: 600; text-align: start;
  transition: background .15s;
}
.mf-sup-faq button:hover { background: rgba(var(--primary-rgb, 1,98,232), .16); }
.mf-sup-faq .mf-sup-faq-human {
  background: rgba(var(--success-rgb, 34,197,94), .1);
  color: rgb(var(--success-rgb, 34,197,94));
}
.mf-sup-faq .mf-sup-faq-human:hover { background: rgba(var(--success-rgb, 34,197,94), .18); }

.mf-sup-start {
  background: var(--custom-white, #fff); border: 1px solid var(--default-border, #eae8f1);
  border-radius: 14px; padding: 13px; display: flex; flex-direction: column; gap: 8px;
}
.mf-sup-start-title { font-size: .76rem; font-weight: 700; }
.mf-sup-start input {
  padding: 8px 12px; border: 1px solid var(--input-border, #e9edf6); border-radius: 10px;
  background: var(--form-control-bg, #fff); color: var(--default-text-color);
  font: inherit; font-size: .79rem; outline: none;
}
.mf-sup-start input:focus { border-color: var(--primary-color); }
.mf-sup-start-go {
  padding: 9px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--primary-color, #0162e8); color: #fff;
  font: inherit; font-size: .8rem; font-weight: 700;
}
.mf-sup-start-go:disabled { opacity: .55; }
.mf-sup-start-err { font-size: .7rem; color: rgb(var(--danger-rgb, 238,51,94)); }

.mf-sup-foot2 {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 12px; flex-shrink: 0;
  border-top: 1px solid var(--default-border, #eae8f1);
  background: var(--custom-white, #fff); font-size: .66rem; color: var(--text-muted);
}
.mf-sup-foot2 a { color: var(--primary-color); text-decoration: none; font-weight: 700; white-space: nowrap; }
.mf-sup-foot2 a:hover { text-decoration: underline; }

/* ── درخواست میکروفون و لیست دست‌های بالا ── */
.ft-hand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 9px;
}
.ft-hand-row:hover { background: rgba(255, 255, 255, 0.06); }
.ft-hand-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  font-size: 0.76rem;
  color: var(--ft-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ft-hand-acts { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.ft-mini-btn {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--ft-border, rgba(255, 255, 255, 0.12));
  background: var(--ft-surface-2, #2a2a2a);
  color: var(--ft-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.ft-mini-btn:hover { background: var(--ft-hover); }
.ft-mini-btn.ok {
  color: var(--ft-accent-2);
  border-color: rgba(112, 249, 184, 0.45);
  background: rgba(112, 249, 184, 0.12);
}
.ft-mini-btn.ok:hover { background: rgba(112, 249, 184, 0.22); }

/* شمارهٔ نوبت و زمان انتظار در صف صحبت */
.ft-hand-num {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(234, 179, 8, 0.16);
  color: #fde047;
  font-size: 0.66rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ft-hand-time {
  font-size: 0.62rem;
  color: var(--ft-text-2);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── نشان دست روی تایل ویدیو ── */
.lk-tile-hand-badge {
  position: absolute;
  top: 8px;
  right: 44px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(22, 22, 22, 0.9);
  color: #fde047;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(234, 179, 8, 0.85), 0 2px 10px rgba(0, 0, 0, 0.5);
  animation: lk-hand-pop 0.25s ease, lk-hand-wave 1.6s ease-in-out 0.3s infinite;
}
@keyframes lk-hand-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes lk-hand-wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-13deg); }
  75% { transform: rotate(10deg); }
}
.lk-video-cell.lk-hand-raised { border-color: rgba(234, 179, 8, 0.75); }
.lk-video-cell.lk-hand-raised.speaking { border-color: var(--ft-accent-2); }

/* ── هشدار «صحبت می‌کنید ولی میکروفون قطع است» ── */
.mahfel-tool-btn.ft-speaking-muted {
  box-shadow: 0 0 0 2px rgba(240, 68, 56, 0.85);
  animation: ft-muted-alert 0.9s ease-in-out infinite;
}
@keyframes ft-muted-alert {
  50% { box-shadow: 0 0 0 5px rgba(240, 68, 56, 0.25); }
}

/* ── مودال راهنمای رفع خطای دسترسی رسانه ── */
.ft-mediahelp { max-width: 430px; }
.ft-help-steps {
  margin: 4px 0 10px;
  padding-inline-start: 20px;
  color: var(--ft-text);
  font-size: 0.78rem;
  line-height: 1.9;
}
.ft-help-steps li { margin-bottom: 4px; }
.ft-help-note {
  margin: 0 0 8px;
  font-size: 0.72rem;
  color: var(--ft-warning, #f0b44a);
}

.ft-rec-page { color: var(--ft-text); display: flex; flex-direction: column; gap: 16px; }
.ft-rec-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid rgba(58,130,255,.22); border-radius: 20px; padding: 24px 26px; background: radial-gradient(620px 180px at 90% 0,rgba(58,130,255,.18),transparent 65%),linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.02)); }
.ft-rec-hero h2 { margin: 7px 0 5px; font-size: 1.35rem; font-weight: 800; }.ft-rec-hero p { margin: 0; color: var(--ft-text-2); font-size: .82rem; }.ft-rec-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: #7aa7ff; font-size: .7rem; font-weight: 700; }
.ft-rec-tabs { display: flex; border-bottom: 1px solid var(--ft-border); gap: 6px; }.ft-rec-tabs button { border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ft-text-2); padding: 10px 16px; font: inherit; font-size: .82rem; cursor: pointer; }.ft-rec-tabs button.active { color: #7aa7ff; border-bottom-color: #3a82ff; }.ft-rec-tabs span { background: rgba(255,255,255,.08); border-radius: 99px; padding: 1px 7px; margin-inline-start: 5px; font-size: .65rem; }
.ft-rec-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }.ft-rec-metrics article { display: flex; align-items: center; gap: 12px; padding: 17px; border: 1px solid var(--ft-border); border-radius: 16px; background: rgba(255,255,255,.035); }.ft-rec-metrics article>i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; flex: 0 0 auto; }.ft-rec-metrics i.blue { color: #77a8ff; background: rgba(58,130,255,.14); }.ft-rec-metrics i.green { color: #4ade80; background: rgba(52,199,123,.13); }.ft-rec-metrics i.purple { color: #c39aff; background: rgba(147,89,255,.13); }.ft-rec-metrics i.amber { color: #fbbf24; background: rgba(251,191,36,.12); }.ft-rec-metrics span,.ft-rec-metrics small { display: block; color: var(--ft-text-2); font-size: .68rem; }.ft-rec-metrics b { display: block; margin: 2px 0; font-size: 1.05rem; font-weight: 800; }
.ft-rec-quota,.ft-rec-live { border: 1px solid var(--ft-border); background: rgba(255,255,255,.03); border-radius: 16px; padding: 18px 20px; }.ft-rec-quota header { display: flex; justify-content: space-between; gap: 14px; }.ft-rec-quota header div span { display: block; color: var(--ft-text-2); font-size: .72rem; margin-top: 3px; }.ft-rec-quota strong { color: #70f9b8; font-size: 1.2rem; }.ft-rec-progress { height: 7px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.07); margin-top: 14px; }.ft-rec-progress i { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: linear-gradient(90deg,#3a82ff,#70f9b8); }.ft-rec-quota p { color: var(--ft-text-2); font-size: .7rem; margin: 9px 0 0; }.ft-rec-live h3 { display: flex; align-items: center; gap: 7px; font-size: .84rem; margin: 0 0 10px; }.ft-rec-live h3 i { width: 8px; height: 8px; border-radius: 50%; background: #f04438; box-shadow: 0 0 0 5px rgba(240,68,56,.12); }.ft-rec-live>div { display: flex; gap: 14px; align-items: center; border-top: 1px solid var(--ft-border); padding: 9px 2px; font-size: .78rem; }.ft-rec-live span { color: var(--ft-text-2); }.ft-rec-live time { margin-inline-start: auto; color: #f87171; }
.ft-rec-toolbar { display: flex; gap: 10px; }.ft-rec-toolbar label { flex: 1; display: flex; align-items: center; gap: 8px; border: 1px solid var(--ft-border); background: rgba(255,255,255,.035); border-radius: 12px; padding: 0 12px; color: var(--ft-text-2); }.ft-rec-toolbar input,.ft-rec-toolbar select { font: inherit; color: var(--ft-text); border: 0; outline: none; background: transparent; font-size: .8rem; }.ft-rec-toolbar input { width: 100%; padding: 11px 0; }.ft-rec-toolbar select { border: 1px solid var(--ft-border); background: var(--ft-surface-2,#222); border-radius: 12px; padding: 0 13px; min-width: 135px; }
.ft-rec-list { display: flex; flex-direction: column; gap: 9px; }.ft-rec-row { display: flex; align-items: center; gap: 14px; padding: 11px; border: 1px solid var(--ft-border); border-radius: 15px; background: rgba(255,255,255,.03); transition: border-color .2s,transform .2s; }.ft-rec-row:hover { border-color: rgba(58,130,255,.35); transform: translateY(-1px); }.ft-rec-row.is-live { border-color: rgba(240,68,56,.28); }.ft-rec-thumb { position: relative; width: 128px; aspect-ratio: 16/9; flex: 0 0 auto; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; color: #fff; background: radial-gradient(circle at 35% 25%,rgba(58,130,255,.55),transparent 36%),linear-gradient(145deg,#17243a,#101218); }.ft-rec-thumb>span { position: absolute; inset: 0; display: grid; place-items: center; opacity: .88; }.ft-rec-thumb time { position: absolute; bottom: 5px; left: 6px; border-radius: 5px; padding: 2px 5px; background: rgba(0,0,0,.72); font-size: .58rem; }.ft-rec-thumb em { position: absolute; top: 5px; right: 5px; background: #ef4444; border-radius: 5px; padding: 2px 6px; font-size: .58rem; font-style: normal; }
.ft-rec-info { flex: 1; min-width: 0; }.ft-rec-info h3 { margin: 0 0 7px; font-size: .9rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }.ft-rec-info p { display: flex; flex-wrap: wrap; gap: 11px; margin: 3px 0; color: var(--ft-text-2); font-size: .68rem; }.ft-rec-info p span { display: inline-flex; align-items: center; gap: 4px; }.ft-rec-actions { display: flex; gap: 5px; }.ft-rec-actions button,.ft-rec-actions a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--ft-border); background: rgba(255,255,255,.035); border-radius: 9px; color: var(--ft-text-2); cursor: pointer; }.ft-rec-actions button:hover,.ft-rec-actions a:hover { color: #7aa7ff; border-color: rgba(58,130,255,.4); }.ft-rec-actions button:disabled { opacity: .35; cursor: default; }
.ft-rec-empty { text-align: center; padding: 55px 15px; color: var(--ft-text-2); }.ft-rec-empty>span { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 18px; color: #7aa7ff; background: rgba(58,130,255,.1); }.ft-rec-empty h3 { color: var(--ft-text); font-size: 1rem; margin: 0 0 5px; }.ft-rec-empty p { font-size: .78rem; }
.ft-rec-modal-bg { backdrop-filter: blur(9px); }.ft-rec-modal { width: min(680px,94vw); color: var(--ft-text); background: var(--ft-surface); border: 1px solid var(--ft-border); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.2); }.ft-rec-modal>header { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px; border-bottom: 1px solid var(--ft-border); }.ft-rec-modal>header div span { display: block; color: var(--ft-text-2); font-size: .67rem; margin-top: 3px; }.ft-rec-modal>header button { background: none; border: 0; color: var(--ft-text-2); cursor: pointer; }.ft-rec-preview video { display: block; width: 100%; aspect-ratio: 16/9; background: #050505; }.ft-rec-modal>footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 17px; color: var(--ft-text-2); font-size: .72rem; }
.ft-rec-manage { width: min(560px,94vw); padding-bottom: 4px; }.ft-rec-field,.ft-rec-sharebox { display: block; padding: 15px 17px 0; }.ft-rec-field>span,.ft-rec-sharebox>span { display: block; color: var(--ft-text-2); font-size: .7rem; margin-bottom: 6px; }.ft-rec-field input,.ft-rec-sharebox input { width: 100%; border: 1px solid var(--ft-border); outline: none; border-radius: 10px; background: rgba(255,255,255,.04); color: var(--ft-text); padding: 9px 11px; font: inherit; font-size: .8rem; }.ft-rec-field input:focus { border-color: #3a82ff; }.ft-rec-sharebox>div { display: flex; gap: 6px; }.ft-rec-sharebox button { display: flex; align-items: center; gap: 5px; border: 0; border-radius: 9px; padding: 0 12px; background: rgba(58,130,255,.14); color: #83adff; font: inherit; font-size: .72rem; cursor: pointer; }.ft-rec-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 15px 17px 0; padding: 12px; border-radius: 11px; background: rgba(255,255,255,.03); }.ft-rec-toggle b,.ft-rec-toggle span { display: block; }.ft-rec-toggle b { font-size: .78rem; }.ft-rec-toggle span { color: var(--ft-text-2); font-size: .66rem; margin-top: 3px; }.ft-rec-notice { margin: 10px 17px 0; color: #70f9b8; font-size: .7rem; }.ft-rec-delete { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: #f87171; font: inherit; font-size: .72rem; cursor: pointer; }.ft-rec-delete:disabled { opacity: .35; }.ft-rec-confirm { width: min(410px,92vw); text-align: center; padding: 28px; }.ft-rec-confirm .ft-rec-danger { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 16px; color: #f87171; background: rgba(239,68,68,.12); }.ft-rec-confirm h3 { font-size: 1rem; }.ft-rec-confirm p { color: var(--ft-text-2); font-size: .76rem; line-height: 1.8; }.ft-rec-confirm>div { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }.ft-rec-danger-btn { background: #dc2626; color: #fff; border-color: #dc2626; }
.ft-share-page { min-height: 100vh; color: #e6e8ed; background: radial-gradient(850px 420px at 50% -100px,rgba(58,130,255,.22),transparent 70%),#111318; font-family: inherit; }.ft-share-head { max-width: 1040px; margin: 0 auto; padding: 22px; display: flex; align-items: center; justify-content: space-between; }.ft-share-head a { text-decoration: none; }.ft-share-head>span { display: flex; align-items: center; gap: 6px; color: #8d96a6; font-size: .7rem; }.ft-share-main { max-width: 960px; margin: 12px auto; padding: 0 20px; }.ft-share-player { overflow: hidden; background: #030405; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; box-shadow: 0 30px 90px rgba(0,0,0,.45); }.ft-share-player video { display: block; width: 100%; aspect-ratio: 16/9; }.ft-share-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 5px 17px; }.ft-share-kicker { display: flex; align-items: center; gap: 5px; color: #70f9b8; font-size: .67rem; }.ft-share-meta h1 { margin: 6px 0 8px; font-size: 1.35rem; }.ft-share-meta p { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; color: #8d96a6; font-size: .74rem; }.ft-share-meta p span,.ft-share-meta aside button,.ft-share-meta aside a { display: inline-flex; align-items: center; gap: 6px; }.ft-share-meta aside { display: flex; gap: 7px; }.ft-share-meta aside button,.ft-share-meta aside a { white-space: nowrap; color: #c9d6ec; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.045); border-radius: 10px; padding: 8px 11px; font: inherit; font-size: .7rem; text-decoration: none; cursor: pointer; }.ft-share-details { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.025); }.ft-share-details div { padding: 14px 17px; border-inline-end: 1px solid rgba(255,255,255,.07); }.ft-share-details div:last-child { border: 0; }.ft-share-details span,.ft-share-details b { display: block; }.ft-share-details span { color: #7f8999; font-size: .65rem; }.ft-share-details b { font-size: .8rem; margin-top: 4px; }.ft-share-toast { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); border: 1px solid rgba(112,249,184,.3); background: rgba(20,35,30,.95); color: #70f9b8; border-radius: 10px; padding: 9px 16px; font-size: .72rem; }.ft-share-footer { display: flex; justify-content: center; align-items: center; gap: 6px; color: #697282; font-size: .67rem; padding: 35px 15px 24px; }.ft-share-missing { min-height: 65vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.ft-share-missing>span { color: #789ef0; }.ft-share-missing h1 { font-size: 1.25rem; }.ft-share-missing p { color: #8992a0; font-size: .8rem; }
@media (max-width:900px) { .ft-rec-metrics { grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px) { .ft-rec-hero { padding: 18px; }.ft-rec-hero h2 { font-size: 1.05rem; }.ft-rec-hero p { display: none; }.ft-rec-toolbar { flex-direction: column; }.ft-rec-toolbar select { min-height: 40px; }.ft-rec-row { align-items: flex-start; flex-wrap: wrap; }.ft-rec-thumb { width: 105px; }.ft-rec-info { width: calc(100% - 120px); }.ft-rec-actions { width: 100%; justify-content: flex-end; }.ft-rec-metrics { grid-template-columns: 1fr; }.ft-share-meta { flex-direction: column; }.ft-share-details { grid-template-columns: repeat(2,1fr); }.ft-share-details div:nth-child(2) { border-inline-end: 0; }.ft-share-main { padding: 0 12px; }.ft-share-player { border-radius: 13px; } }

.ft-files-card {
  width: min(920px, 96vw);
  max-height: min(820px, 92vh);
  overflow: auto;
  padding: 0;
}
.ft-files-head {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  background: color-mix(in srgb, var(--ft-surface) 94%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--ft-border);
}
.ft-files-head > div > span { display: block; margin-top: 5px; color: var(--ft-text-2); font-size: .73rem; }
.ft-files-tabs { display: flex; gap: 6px; padding: 12px 20px; border-bottom: 1px solid var(--ft-border); overflow-x: auto; }
.ft-files-tabs button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: max-content; padding: 9px 13px; border: 1px solid transparent; border-radius: 10px;
  color: var(--ft-text-2); background: transparent; font-family: inherit; cursor: pointer;
}
.ft-files-tabs button:hover { color: var(--ft-text); background: var(--ft-surface-2); }
.ft-files-tabs button.active { color: #fff; border-color: color-mix(in srgb, var(--ft-accent) 55%, transparent); background: color-mix(in srgb, var(--ft-accent) 18%, transparent); }
.ft-files-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 10px; }
.ft-files-toolbar .mahfel-btn-primary { width: auto; flex-shrink: 0; }
.ft-files-search { flex: 1; max-width: 380px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--ft-border); border-radius: 11px; background: var(--ft-surface-2); color: var(--ft-text-2); }
.ft-files-search input, .ft-url-input input, .ft-file-detail-meta input { width: 100%; border: 0; outline: 0; padding: 10px 0; color: var(--ft-text); background: transparent; font-family: inherit; }
.ft-files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 12px; max-height: 390px; overflow: auto; padding: 8px 20px 20px; }
.ft-file-card { min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--ft-border); border-radius: 14px; background: var(--ft-surface-2); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.ft-file-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ft-accent) 55%, var(--ft-border)); box-shadow: 0 12px 25px rgba(0,0,0,.2); }
.ft-file-card.live { border-color: var(--ft-accent); }
.ft-file-preview { position: relative; height: 108px; display: grid; place-items: center; color: #b7c6ff; background: linear-gradient(145deg, #252b3d, #1b1e2b); }
.ft-file-preview.image { background: #171717; }
.ft-file-preview.video { color: #fd8b8b; }
.ft-file-preview.audio { color: #8de0ba; }
.ft-file-preview img { width: 100%; height: 100%; object-fit: cover; }
.ft-file-preview .ft-files-live { position: absolute; top: 8px; inset-inline-start: 8px; padding: 4px 7px; border-radius: 7px; background: rgba(9,28,17,.85); }
.ft-file-info { padding: 11px 12px 5px; }
.ft-file-info strong, .ft-file-info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-file-info strong { font-size: .82rem; }
.ft-file-info span { margin-top: 5px; color: var(--ft-text-2); font-size: .7rem; }
.ft-file-card > .ft-files-actions { justify-content: flex-end; padding: 4px 9px 10px; }
.mahfel-presentation-body.laser-mode, .mahfel-presentation-body.laser-mode * { cursor: none !important; }
.ft-files-drop { margin: 20px; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1.5px dashed color-mix(in srgb, var(--ft-accent) 55%, var(--ft-border)); border-radius: 18px; color: var(--ft-text); background: color-mix(in srgb, var(--ft-accent) 6%, var(--ft-surface-2)); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.ft-files-drop:hover, .ft-files-drop.drag { border-color: var(--ft-accent); background: color-mix(in srgb, var(--ft-accent) 13%, var(--ft-surface-2)); transform: scale(.995); }
.ft-files-drop > span, .ft-files-drop small { color: var(--ft-text-2); text-align: center; }
.ft-files-drop-icon, .ft-files-feature-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px; color: #fff !important; background: linear-gradient(145deg, var(--ft-accent), #715cff); box-shadow: 0 10px 25px color-mix(in srgb, var(--ft-accent) 25%, transparent); }
.ft-files-feature { max-width: 610px; min-height: 330px; margin: 0 auto; padding: 34px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.ft-files-feature h4 { margin: 6px 0 0; color: var(--ft-text); }
.ft-files-feature p { max-width: 530px; margin: 0 0 8px; color: var(--ft-text-2); font-size: .82rem; line-height: 1.9; }
.ft-files-feature input[type=file] { width: min(100%, 470px); padding: 11px; border: 1px solid var(--ft-border); border-radius: 11px; background: var(--ft-surface-2); color: var(--ft-text-2); }
.ft-files-feature-actions { display: flex; gap: 8px; }
.ft-url-input { width: min(100%, 520px); padding: 0 12px; border: 1px solid var(--ft-border); border-radius: 11px; background: var(--ft-surface-2); }
.ft-file-detail { position: relative; display: grid; grid-template-columns: minmax(260px, 1.4fr) 1fr; gap: 16px; margin: 0 20px 20px; padding: 14px; border: 1px solid var(--ft-border); border-radius: 15px; background: var(--ft-surface-2); }
.ft-file-detail-preview { min-height: 190px; max-height: 270px; overflow: hidden; display: grid; place-items: center; border-radius: 11px; background: #111; }
.ft-file-detail-preview img, .ft-file-detail-preview video, .ft-file-detail-preview object { width: 100%; height: 100%; min-height: 190px; object-fit: contain; }
.ft-file-detail-preview audio { width: 90%; }
.ft-file-detail-meta { display: flex; flex-direction: column; gap: 10px; padding: 8px 30px 8px 0; color: var(--ft-text-2); font-size: .72rem; }
.ft-file-detail-meta label { display: flex; flex-direction: column; gap: 5px; color: var(--ft-text); font-size: .75rem; }
.ft-file-detail-meta label > input { padding: 9px 10px; border: 1px solid var(--ft-border); border-radius: 9px; background: var(--ft-surface); }
.ft-file-detail-meta .ft-toggle-row { flex-direction: row; justify-content: space-between; align-items: center; }
.ft-file-detail-actions { display: flex; gap: 7px; }
.mahfel-btn.danger { color: #ff8f8f; }
.ft-file-detail > .ft-stage-close { position: absolute; top: 10px; inset-inline-end: 10px; }
.ft-direct-player { position: fixed; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ft-direct-player.active { left: 18px; bottom: 82px; z-index: 45; width: min(360px, calc(100vw - 36px)); height: auto; padding: 8px; overflow: visible; border: 1px solid var(--ft-border); border-radius: 14px; background: var(--ft-surface); box-shadow: 0 16px 42px rgba(0,0,0,.5); }
.ft-direct-player video { width: 100%; max-height: 210px; border-radius: 9px; background: #000; }
.ft-direct-player .dp-audio-wrap { display: flex; align-items: center; gap: 10px; padding: 8px; }
.ft-direct-player .dp-audio-ico { color: var(--ft-accent); }
.ft-direct-player .dp-audio-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-direct-player audio { width: 100%; }
@media (max-width: 640px) {
  .ft-files-card { width: 100vw; max-height: 94vh; border-radius: 18px 18px 0 0; align-self: flex-end; }
  .ft-files-head { padding: 14px; }
  .ft-files-tabs, .ft-files-toolbar { padding-inline: 14px; }
  .ft-files-grid { grid-template-columns: 1fr; padding-inline: 14px; }
  .ft-files-drop { margin: 14px; min-height: 260px; }
  .ft-file-detail { grid-template-columns: 1fr; margin-inline: 14px; }
  .ft-file-detail-preview { max-height: 210px; }
}


/* ---------- فیلتر رویدادها (چیپ قابل‌کلیک) ---------- */
.ft-ev-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
button.ft-ev-chip {
  border: 1px solid var(--ft-border); background: rgba(255,255,255,.04);
  color: var(--ft-text-2); font: inherit; cursor: pointer; transition: all .15s;
}
button.ft-ev-chip:hover { border-color: rgba(58,130,255,.5); color: var(--ft-text); }
button.ft-ev-chip.on { background: rgba(58,130,255,.2); border-color: #3a82ff; color: #fff; }
.ft-ev-chip-n { font-size: .66rem; opacity: .75; }

/* ---------- درگاه پرداخت (آزمایشی) ---------- */
.ft-pay {
  min-height: 100vh; direction: rtl;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 16px;
  background: radial-gradient(900px 400px at 50% -10%, rgba(58,130,255,.18), transparent),
              var(--ft-bg, #151515);
  color: var(--ft-text, #dededd);
}
.ft-pay-card {
  width: min(430px, 100%);
  background: rgba(255,255,255,.04); border: 1px solid var(--ft-border);
  border-radius: 20px; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.ft-pay-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 1px dashed var(--ft-border); margin-bottom: 16px;
}
.ft-pay-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; color: #fff; }
.ft-pay-sandbox { font-size: .68rem; padding: 3px 10px; border-radius: 999px; background: rgba(250,190,60,.15); color: #fbbf24; }

.ft-pay-order { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ft-pay-row { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; color: var(--ft-text-2); }
.ft-pay-row b { color: var(--ft-text); font-weight: 600; }
.ft-pay-row.total { border-top: 1px dashed var(--ft-border); padding-top: 10px; margin-top: 4px; font-size: .9rem; }
.ft-pay-row.total b { color: #8ff0c3; font-size: 1.05rem; }

.ft-pay-timer {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: .75rem; color: #fbbf24; background: rgba(250,190,60,.08);
  border-radius: 10px; padding: 7px; margin-bottom: 14px; font-variant-numeric: tabular-nums;
}
.ft-pay-field { margin-bottom: 14px; }
.ft-pay-field label { display: block; font-size: .75rem; color: var(--ft-text-2); margin-bottom: 6px; }
.ft-pay-field input {
  width: 100%; background: var(--ft-surface-2); border: 1px solid var(--ft-border);
  border-radius: 12px; color: var(--ft-text); padding: 11px 14px;
  font: inherit; font-size: .95rem; letter-spacing: 1px; text-align: center;
}
.ft-pay-field input:focus { outline: none; border-color: #3a82ff; }

.ft-pay-btn {
  display: block; width: 100%; text-align: center; text-decoration: none;
  border: none; border-radius: 12px; padding: 12px; font: inherit;
  font-size: .95rem; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, #3a82ff, #2563eb); color: #fff;
  margin-top: 8px; transition: filter .15s;
}
.ft-pay-btn:hover { filter: brightness(1.1); color: #fff; }
.ft-pay-btn:disabled { opacity: .55; cursor: default; }
.ft-pay-btn.ghost { background: rgba(255,255,255,.06); color: var(--ft-text); border: 1px solid var(--ft-border); font-weight: 500; }
.ft-pay-fail-sim {
  display: block; margin: 10px auto 0; background: none; border: none;
  color: var(--ft-text-2); font: inherit; font-size: .7rem;
  text-decoration: underline; cursor: pointer;
}
.ft-pay-note {
  font-size: .7rem; color: var(--ft-text-2);
  display: flex; align-items: center; gap: 5px; justify-content: center;
  margin: 12px 0 0;
}
.ft-pay-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 14px 0; }
.ft-pay-center h2 { font-size: 1.15rem; margin: 6px 0 0; }
.ft-pay-center p { font-size: .82rem; color: var(--ft-text-2); margin: 0; line-height: 1.8; }
.ft-pay-center .ft-pay-btn { margin-top: 10px; }
.ft-pay-badge { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ft-pay-badge.ok { background: rgba(52,199,123,.16); color: #4ade80; }
.ft-pay-badge.err { background: rgba(240,68,56,.14); color: #f04438; }
.ft-pay-badge.warn { background: rgba(250,190,60,.14); color: #fbbf24; }
.ft-pay-ref { border: 1px dashed var(--ft-border); border-radius: 12px; padding: 10px 22px; margin: 8px 0; }
.ft-pay-ref small { display: block; color: var(--ft-text-2); font-size: .68rem; }
.ft-pay-ref b { font-size: 1.2rem; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.ft-pay-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.1); border-top-color: #3a82ff;
  animation: ftPaySpin .8s linear infinite;
}
@keyframes ftPaySpin { to { transform: rotate(360deg); } }
.ft-pay-foot { margin-top: 16px; font-size: .72rem; color: var(--ft-text-2); }
.ft-pay-foot b { color: #34c77b; }

/* ---------- صفحهٔ تراکنش‌های رویداد ---------- */
.ft-tx-stat .card-body { display: flex; align-items: center; gap: 12px; }
.ft-tx-stat-ic {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.ft-tx-stat-ic.ok { background: rgba(52,199,123,.13); color: #4ade80; }
.ft-tx-stat-ic.warn { background: rgba(250,190,60,.13); color: #fbbf24; }
.ft-tx-stat-ic.err { background: rgba(240,68,56,.12); color: #f04438; }
.ft-tx-stat-ic.dim { background: rgba(255,255,255,.07); color: var(--ft-text-2); }
.ft-tx-stat small { display: block; font-size: .72rem; color: var(--ft-text-2); }
.ft-tx-stat b { font-size: 1.05rem; font-weight: 700; }
.ft-tx-stat b i { font-style: normal; font-size: .68rem; color: var(--ft-text-2); font-weight: 400; }

.ft-tx-bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 16px; }
.ft-tx-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.ft-tx-bar i {
  width: 70%; max-width: 44px; min-height: 3px;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #3a82ff, rgba(58,130,255,.3));
}
.ft-tx-bar-v { font-size: .62rem; color: var(--ft-text-2); font-variant-numeric: tabular-nums; }
.ft-tx-bar-l { font-size: .66rem; color: var(--ft-text-2); }

.ft-tx-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ft-tx-search {
  display: flex; align-items: center; gap: 7px; min-width: 260px;
  background: var(--ft-surface-2); border: 1px solid var(--ft-border);
  border-radius: 10px; padding: 7px 12px; color: var(--ft-text-2);
}
.ft-tx-search input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--ft-text); font: inherit; font-size: .8rem;
}
.ft-tx-search input::placeholder { color: var(--ft-text-2); }
.ft-tx-ref { font-family: monospace; font-size: .8rem; letter-spacing: .5px; }
.ft-tx-pager {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--ft-border);
}

/* ==================== رویدادها (Events) ==================== */

/* ---- فیلترها ---- */
.ft-ev-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ft-ev-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; font-family: inherit; font-size: 0.8rem;
  border: 1px solid var(--default-border); background: var(--custom-white);
  color: var(--default-text-color); cursor: pointer; transition: all .15s;
}
.ft-ev-chip:hover { border-color: rgba(var(--primary-rgb), .5); }
.ft-ev-chip.on { background: rgb(var(--primary-rgb)); border-color: transparent; color: #fff; }
.ft-ev-chip-n {
  background: rgba(var(--primary-rgb), .12); border-radius: 999px;
  font-size: 0.68rem; padding: 1px 8px; font-variant-numeric: tabular-nums;
}
.ft-ev-chip.on .ft-ev-chip-n { background: rgba(255,255,255,.25); }

/* ---- کارت رویداد ---- */
.ft-ev-card { overflow: hidden; }
.ft-ev-poster {
  position: relative; display: block; height: 150px; overflow: hidden;
  background: linear-gradient(135deg, rgb(var(--primary-rgb)), #7c3aed);
}
.ft-ev-poster img { width: 100%; height: 100%; object-fit: cover; }
.ft-ev-poster-fallback {
  display: flex; align-items: center; justify-content: center;
  height: 100%; font-size: 3rem; font-weight: 800; color: rgba(255,255,255,.85);
}
.ft-ev-poster-fallback.lg { font-size: 4rem; }

.ft-ev-status {
  position: absolute; top: 10px; inset-inline-start: 10px;
  padding: 4px 12px; border-radius: 999px; font-size: 0.7rem; font-weight: 600;
  backdrop-filter: blur(6px); color: #fff;
}
.ft-ev-status.st-draft { background: rgba(90, 90, 110, .85); }
.ft-ev-status.st-open { background: rgba(34, 150, 90, .88); }
.ft-ev-status.st-live { background: rgba(220, 60, 70, .9); }
.ft-ev-status.st-finished { background: rgba(60, 90, 200, .85); }
.ft-ev-status.st-cancelled { background: rgba(80, 80, 80, .85); }

.ft-ev-title {
  font-weight: 700; font-size: 0.95rem; color: var(--default-text-color);
  text-decoration: none; flex: 1; min-width: 0;
}
.ft-ev-title:hover { color: rgb(var(--primary-rgb)); }

.ft-ev-meta {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px;
  color: var(--default-text-color); opacity: .75; font-size: 0.76rem;
}
.ft-ev-meta span { display: inline-flex; align-items: center; gap: 4px; }

.ft-ev-cap { height: 5px; border-radius: 999px; background: rgba(var(--primary-rgb), .12); margin-top: 10px; overflow: hidden; }
.ft-ev-cap i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgb(var(--primary-rgb)), #7c3aed); transition: width .3s; }

.ft-ev-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.ft-ev-countdown {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.74rem; font-variant-numeric: tabular-nums;
  color: rgb(var(--primary-rgb)); font-weight: 600;
}
.ft-ev-countdown.live { color: #dc3c46; }
.ft-ev-countdown.dim { color: var(--default-text-color); opacity: .6; font-weight: 400; }
.ft-ev-slug { font-size: 0.68rem; opacity: .55; }
.ft-ev-live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #dc3c46; animation: ft-ev-blink 1.1s infinite;
}
@keyframes ft-ev-blink { 50% { opacity: .25; } }

/* ---- منوی سه‌نقطه ---- */
.ft-ev-menu-wrap { position: relative; flex-shrink: 0; }
.ft-ev-dots {
  border: none; background: transparent; color: var(--default-text-color);
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; opacity: .7;
}
.ft-ev-dots:hover { background: rgba(var(--primary-rgb), .1); opacity: 1; }
.ft-ev-menu-overlay { position: fixed; inset: 0; z-index: 60; }
.ft-ev-menu {
  position: absolute; top: 30px; inset-inline-end: 0; z-index: 61; min-width: 190px;
  background: var(--custom-white); border: 1px solid var(--default-border);
  border-radius: 12px; padding: 5px; box-shadow: 0 14px 40px rgba(0,0,0,.18);
  display: flex; flex-direction: column;
}
.ft-ev-menu a, .ft-ev-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: none; border-radius: 8px; background: none;
  color: var(--default-text-color); font-family: inherit; font-size: 0.78rem;
  cursor: pointer; text-decoration: none; text-align: start;
}
.ft-ev-menu a:hover, .ft-ev-menu button:hover { background: rgba(var(--primary-rgb), .08); }
.ft-ev-menu button.warn:hover { background: rgba(255, 176, 66, .14); color: #e08a00; }
.ft-ev-menu button.danger:hover { background: rgba(240, 68, 56, .12); color: #f04438; }

/* ---- فرم ---- */
.ft-ev-modal { max-width: 640px; width: 94vw; max-height: 88vh; overflow-y: auto; }
.ft-ev-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.ft-ev-field { display: flex; flex-direction: column; gap: 5px; }
.ft-ev-field.wide { grid-column: 1 / -1; }
.ft-ev-field > span { font-size: 0.74rem; color: var(--default-text-color); opacity: .75; }
.ft-ev-field input, .ft-ev-field select, .ft-ev-field textarea {
  width: 100%; font-family: inherit; font-size: 0.84rem;
  background: var(--form-control-bg, var(--custom-white));
  border: 1px solid var(--default-border); border-radius: 9px;
  padding: 8px 11px; color: var(--default-text-color); outline: none;
  transition: border-color .15s;
}
.ft-ev-field input:focus, .ft-ev-field select:focus, .ft-ev-field textarea:focus {
  border-color: rgb(var(--primary-rgb));
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}
.ft-ev-field input[type="file"] { padding: 7px; }
.ft-ev-poster-preview { max-height: 90px; border-radius: 9px; border: 1px solid var(--default-border); object-fit: cover; }
.ft-ev-error { color: #f04438; font-size: 0.78rem; margin: 10px 0 0; }
.ft-ev-ok { color: #22965a; font-size: 0.78rem; margin: 10px 0 0; }

/* ---- هیرو داشبورد ---- */
.ft-ev-hero-grid {
  display: grid; grid-template-columns: 190px 1fr auto; gap: 20px; align-items: start;
}
.ft-ev-hero-poster {
  width: 190px; height: 130px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, rgb(var(--primary-rgb)), #7c3aed);
}
.ft-ev-hero-poster img { width: 100%; height: 100%; object-fit: cover; }
.ft-ev-hero-meta {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px;
  font-size: 0.78rem; color: var(--default-text-color); opacity: .75;
}
.ft-ev-hero-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ft-ev-hero-desc { margin: 8px 0 0; font-size: 0.84rem; opacity: .85; }
.ft-ev-countdown-hero {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 8px 14px; border-radius: 10px; font-size: 0.82rem; font-weight: 600;
  background: rgba(var(--primary-rgb), .1); color: rgb(var(--primary-rgb));
  font-variant-numeric: tabular-nums;
}
.ft-ev-hero-share { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ft-ev-share-label { font-size: 0.72rem; opacity: .7; }
.ft-ev-share-row { display: flex; align-items: center; gap: 6px; }
.ft-ev-share-row code { font-size: 0.72rem; direction: ltr; }
.ft-ev-qr { width: 96px; height: 96px; border-radius: 10px; border: 1px solid var(--default-border); }

/* ---- استپر وضعیت ---- */
.ft-ev-stepper { display: flex; gap: 4px; margin-top: 20px; }
.ft-ev-step {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 0.72rem; color: var(--default-text-color); opacity: .55;
}
.ft-ev-step i {
  display: block; width: 100%; height: 5px; border-radius: 999px;
  background: rgba(var(--primary-rgb), .15);
}
.ft-ev-step.done i { background: rgb(var(--primary-rgb)); }
.ft-ev-step.done { opacity: .9; }
.ft-ev-step.cur { opacity: 1; font-weight: 700; }
.ft-ev-step.cur i { background: rgb(var(--primary-rgb)); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .2); }
.ft-ev-step.cancelled i { background: #f04438; }
.ft-ev-step.cancelled { color: #f04438; }

/* ---- سخنرانان ---- */
.ft-ev-speakers { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ft-ev-speaker {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; font-size: 0.74rem;
  background: rgba(var(--primary-rgb), .1); color: rgb(var(--primary-rgb));
}
.ft-ev-x {
  border: none; background: none; color: inherit; cursor: pointer;
  display: inline-flex; padding: 0; opacity: .6;
}
.ft-ev-x:hover { opacity: 1; }

/* ---- تب‌ها ---- */
.ft-ev-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.ft-ev-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border: none; border-radius: 10px; background: none;
  font-family: inherit; font-size: 0.82rem; color: var(--default-text-color);
  cursor: pointer; opacity: .75; transition: all .15s;
}
.ft-ev-tab:hover { background: rgba(var(--primary-rgb), .07); opacity: 1; }
.ft-ev-tab.on {
  background: rgba(var(--primary-rgb), .12); color: rgb(var(--primary-rgb));
  font-weight: 700; opacity: 1;
}
.ft-ev-tab .ft-badge {
  position: static; font-style: normal; font-size: 0.66rem;
  background: rgba(var(--primary-rgb), .14); color: inherit;
  border-radius: 999px; padding: 1px 7px;
}

/* ---- بلیت/تخفیف ---- */
.ft-ev-ticket {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border: 1px solid var(--default-border); border-radius: 11px; margin-bottom: 9px;
}
.ft-ev-ticket-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ft-ev-ticket-info b { font-size: 0.85rem; }
.ft-ev-ticket-info span { font-size: 0.74rem; opacity: .75; }

.ft-ev-sidebox {
  border: 1px solid var(--default-border); border-radius: 13px;
  padding: 15px; display: flex; flex-direction: column; gap: 10px;
}
.ft-ev-sidebox > b { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; }
.ft-ev-sidebox .ft-ev-field { gap: 4px; }
.ft-ev-sidebox.danger-zone { border-color: rgba(240, 68, 56, .3); }
.ft-ev-sidebox hr { width: 100%; border-color: var(--default-border); margin: 4px 0; opacity: .5; }

/* ---- نمودار ثبت‌نام ---- */
.ft-ev-chart { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 18px; }
.ft-ev-bar-wrap {
  flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px;
}
.ft-ev-bar {
  display: block; width: 100%; max-width: 46px; border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, rgb(var(--primary-rgb)), rgba(var(--primary-rgb), .55));
}
.ft-ev-bar-n { font-size: 0.72rem; font-weight: 700; color: rgb(var(--primary-rgb)); }
.ft-ev-bar-d { font-size: 0.66rem; opacity: .6; direction: ltr; }

/* ---- تراکنش ---- */
.ft-ev-tx-sum {
  padding: 7px 14px; border-radius: 10px; font-size: 0.8rem;
  background: rgba(var(--primary-rgb), .07); color: var(--default-text-color);
}
.ft-ev-tx-sum.ok { background: rgba(34, 150, 90, .12); }
.ft-ev-tx-sum.warn { background: rgba(255, 176, 66, .14); }
.ft-ev-row-off { opacity: .45; }

/* ==================== صفحهٔ عمومی ثبت‌نام ==================== */

.ft-reg-page {
  position: absolute; inset: 0; overflow: auto; padding: 26px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background:
    radial-gradient(680px 420px at 82% 6%, rgba(58, 130, 255, 0.2), transparent 60%),
    radial-gradient(540px 420px at 10% 90%, rgba(112, 249, 184, 0.09), transparent 60%),
    radial-gradient(420px 320px at 50% 50%, rgba(124, 58, 237, 0.09), transparent 70%),
    var(--ft-bg);
}
.ft-reg-layout {
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: stretch; justify-content: center;
  width: min(960px, 100%);
}
.ft-reg-hero {
  flex: 1 1 380px; max-width: 470px;
  display: flex; flex-direction: column; gap: 12px; padding: 10px 6px;
}
.ft-reg-poster {
  width: 100%; max-height: 300px; object-fit: cover;
  border-radius: 18px; border: 1px solid var(--ft-border);
}
.ft-reg-hero h1 { color: var(--ft-text); font-size: 1.55rem; font-weight: 800; margin: 0; }
.ft-reg-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--ft-text-2); font-size: 0.8rem; }
.ft-reg-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ft-reg-desc { color: var(--ft-text-2); font-size: 0.86rem; line-height: 1.9; margin: 0; white-space: pre-wrap; }
.ft-reg-hero .ft-ev-speaker { background: rgba(58, 130, 255, .14); color: #9dbdff; }

.ft-reg-card {
  flex: 1 1 360px; max-width: 430px;
  background: rgba(42, 42, 42, 0.88); backdrop-filter: blur(14px);
  border: 1px solid var(--ft-border); border-radius: 20px;
  padding: 26px 24px; box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.ft-reg-title { color: var(--ft-text); font-size: 1.05rem; margin: 0 0 12px; }
.ft-reg-empty { color: var(--ft-text-2); text-align: center; padding: 30px 0; margin: 0; }
.ft-reg-brand { color: var(--ft-text-2); font-size: 0.72rem; opacity: .6; margin: 0; }

.ft-reg-countdown {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: 11px; margin-bottom: 14px;
  background: rgba(58, 130, 255, .12); border: 1px solid rgba(58, 130, 255, .3);
  color: #9dbdff; font-size: 0.78rem; font-variant-numeric: tabular-nums;
}
.ft-reg-countdown.live {
  background: rgba(220, 60, 70, .12); border-color: rgba(220, 60, 70, .35); color: #ff9aa2;
}

.ft-reg-tickets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ft-reg-ticket {
  display: flex; align-items: center; gap: 10px; text-align: start;
  padding: 11px 14px; border-radius: 12px; font-family: inherit; cursor: pointer;
  background: var(--ft-surface-2); border: 1px solid var(--ft-border);
  color: var(--ft-text); transition: all .15s;
}
.ft-reg-ticket b { flex: 1; font-size: 0.88rem; }
.ft-reg-ticket span { font-size: 0.82rem; color: var(--ft-accent-2); font-variant-numeric: tabular-nums; }
.ft-reg-ticket small { font-size: 0.68rem; color: var(--ft-text-2); }
.ft-reg-ticket:hover:not(:disabled) { border-color: rgba(58, 130, 255, .5); }
.ft-reg-ticket.on { border-color: var(--ft-accent); background: rgba(58, 130, 255, .12); }
.ft-reg-ticket:disabled { opacity: .45; cursor: not-allowed; }

.ft-reg-dc-row { display: flex; gap: 8px; }
.ft-reg-dc-row .mahfel-input-wrap { flex: 1; }
.ft-reg-dc { font-size: 0.76rem; margin: 8px 2px 0; }
.ft-reg-dc.ok { color: var(--ft-accent-2); }
.ft-reg-dc.err { color: var(--ft-danger); }
.ft-reg-hint { font-size: 0.74rem; color: var(--ft-text-2); margin: 10px 0 0; }

.ft-reg-done { text-align: center; }
.ft-reg-done-check {
  width: 58px; height: 58px; margin: 4px auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(112, 249, 184, .14); border: 1px solid rgba(112, 249, 184, .4);
  color: var(--ft-accent-2);
}
.ft-reg-done h3 { color: var(--ft-text); font-size: 1rem; margin: 0 0 14px; }
.ft-reg-receipt {
  display: flex; flex-direction: column; gap: 7px; text-align: start;
  border: 1px dashed var(--ft-border); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
}
.ft-reg-receipt > div { display: flex; justify-content: space-between; font-size: 0.8rem; }
.ft-reg-receipt span { color: var(--ft-text-2); }
.ft-reg-receipt b, .ft-reg-receipt code { color: var(--ft-text); }
.ft-reg-done .mahfel-btn { margin-top: 6px; }

@media (max-width: 860px) {
  .ft-ev-hero-grid { grid-template-columns: 1fr; }
  .ft-ev-hero-poster { width: 100%; height: 150px; }
  .ft-ev-hero-share { flex-direction: row; flex-wrap: wrap; }
  .ft-ev-form { grid-template-columns: 1fr; }
}

/* ── پروفایل اتاق: سالن انتظار، خوش‌آمد، سقف نشست ── */

/* کارت ورود — تصویر خوش‌آمد بالای فرم */
.ft-join-hero {
  width: calc(100% + 64px);
  margin: -36px -32px 18px;
  max-height: 170px;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
  display: block;
}

/* سالن انتظار — مهمان تا ورود سخنران */
.ft-wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.ft-wait .ft-join-hero {
  margin-bottom: 14px;
  max-height: 150px;
}

.ft-wait h2 {
  margin: 8px 0 2px;
}

.ft-wait-pulse {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ft-accent);
  background: rgba(58, 130, 255, 0.12);
  border: 1px solid rgba(58, 130, 255, 0.3);
  animation: ft-wait-pulse 1.8s ease-in-out infinite;
  margin-bottom: 6px;
}

@keyframes ft-wait-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(58, 130, 255, 0.35); }
  50% { box-shadow: 0 0 0 12px rgba(58, 130, 255, 0); }
}

.ft-wait-msg {
  color: var(--ft-text-2);
  font-size: 0.84rem;
  margin: 4px 0 6px;
  line-height: 1.7;
}

.ft-wait-media {
  width: 100%;
  max-height: 160px;
  border-radius: 12px;
  margin: 6px 0;
  background: #000;
}

.ft-wait-media:is(audio) { max-height: 44px; }

.ft-wait-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--ft-text-2);
  margin: 8px 0 14px;
}

.ft-wait-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ft-accent);
  display: inline-block;
  animation: ft-rec-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* چیپ شمارش معکوس سقف نشست در هدر */
.ft-vw-chip.ft-limit-chip {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
  font-variant-numeric: tabular-nums;
}

.ft-vw-chip.clickable { cursor: pointer; }
.ft-vw-chip.clickable:hover { filter: brightness(1.15); }

/* کارت پروفایل اتاق در فضای کاری */
.ft-ws-profile { border-color: rgba(58, 130, 255, 0.28); }

.ft-ws-prow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ft-ws-pbadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--ft-border);
  background: var(--ft-surface-2);
  color: var(--ft-text-2);
  font-size: 0.68rem;
}

.ft-ws-pbadge.ok { color: var(--ft-accent-2); border-color: rgba(112, 249, 184, 0.4); background: rgba(112, 249, 184, 0.08); }
.ft-ws-pbadge.off { color: var(--ft-danger); border-color: rgba(240, 68, 56, 0.4); background: rgba(240, 68, 56, 0.08); }

/* مودال تنظیمات اتاق در فضای کاری */
.ft-profile-modal { max-width: 560px; width: calc(100% - 2rem); }
.ft-profile-scroll { max-height: 66vh; overflow-y: auto; padding: 2px 2px 0; }
.ft-prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 575.98px) { .ft-prof-grid { grid-template-columns: 1fr; } }

/* ─── سرویس‌ها و صورتحساب (/billing) ─── */
.svc-card .svc-hint { font-size: .78rem; color: var(--ft-text-2); display: flex; align-items: center; gap: 6px; }
.svc-meter .progress { height: 6px; border-radius: 6px; background: var(--ft-surface-2); }
.svc-addons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.svc-addons .badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; }

.bill-families { display: flex; gap: 8px; }
.bill-fam {
  padding: 7px 18px; border-radius: 10px; border: 1px solid var(--ft-border);
  background: transparent; color: var(--ft-text-2); font: inherit; font-size: .8rem; cursor: pointer;
}
.bill-fam.on { background: rgba(58,130,255,.12); border-color: #3a82ff; color: #3a82ff; font-weight: 600; }

.bill-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bill-chip {
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--ft-border);
  background: var(--ft-surface-2); color: var(--ft-text); font: inherit; font-size: .76rem; cursor: pointer;
}
.bill-chip.on { background: rgba(58,130,255,.14); border-color: #3a82ff; color: #3a82ff; font-weight: 600; }

.bill-price-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ft-surface-2); border: 1px solid var(--ft-border);
  border-radius: 12px; padding: 12px 16px;
}
.bill-price-box b { font-size: 1.05rem; color: var(--ft-text); }
.bill-price-box small { display: block; font-size: .7rem; color: var(--ft-text-2); }

.bill-compare { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--ft-border); }
.bill-compare span { font-size: .72rem; color: var(--ft-text-2); display: inline-flex; align-items: center; gap: 5px; }

.bill-wizard { max-width: 640px; }
.bill-steps { display: flex; gap: 4px; padding: 10px 18px 0; }
.bill-step { display: flex; align-items: center; gap: 6px; font-size: .68rem; color: var(--ft-text-2); }
.bill-step i {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: .66rem; background: var(--ft-surface-2); border: 1px solid var(--ft-border);
}
.bill-step.on i { background: #3a82ff; border-color: #3a82ff; color: #fff; }
.bill-step.done i { background: rgba(38,191,148,.15); border-color: #26bf94; color: #26bf94; }
.bill-step:not(:last-child)::after { content: ""; width: 18px; height: 1px; background: var(--ft-border); margin-inline: 4px; }

.bill-plan-recap { background: var(--ft-surface-2); border: 1px solid var(--ft-border); border-radius: 10px; padding: 12px 14px; }
.bill-plan-recap small { display: block; color: var(--ft-text-2); font-size: .72rem; }

.bill-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bill-mode {
  display: block; border: 1px solid var(--ft-border); border-radius: 10px; padding: 10px 12px; cursor: pointer;
}
.bill-mode input { display: none; }
.bill-mode b { font-size: .8rem; display: block; }
.bill-mode small { font-size: .68rem; color: var(--ft-text-2); }
.bill-mode.on { border-color: #3a82ff; background: rgba(58,130,255,.08); }

.bill-addons { display: grid; gap: 10px; }
.bill-addon {
  display: flex; align-items: center; gap: 12px; border: 1px solid var(--ft-border);
  border-radius: 10px; padding: 12px 14px; cursor: pointer;
}
.bill-addon input { accent-color: #3a82ff; }
.bill-addon > i { font-size: 1.3rem; color: #3a82ff; }
.bill-addon span { flex: 1; }
.bill-addon span b { font-size: .82rem; display: block; }
.bill-addon span small { font-size: .68rem; color: var(--ft-text-2); }
.bill-addon.on { border-color: #3a82ff; background: rgba(58,130,255,.07); }
.bill-addon.off { opacity: .55; cursor: default; }
.bill-addon-price { font-size: .78rem; white-space: nowrap; }

.bill-review { border: 1px solid var(--ft-border); border-radius: 10px; padding: 6px 14px; }
.bill-line { display: flex; justify-content: space-between; padding: 9px 0; font-size: .8rem; border-bottom: 1px dashed var(--ft-border); }
.bill-line:last-child { border-bottom: 0; }
.bill-line.total { font-weight: 700; }
.bill-line.total b { color: #3a82ff; }

.bill-terms { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .78rem; cursor: pointer; }
.bill-terms a { color: #3a82ff; }

.bill-gateway { margin-top: 14px; border: 1px dashed var(--ft-border); border-radius: 10px; padding: 12px 14px; }
.bill-gateway-head { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; margin-bottom: 10px; }

.bill-done { text-align: center; padding: 18px 0 6px; }
.bill-done > i { font-size: 3rem; color: #26bf94; display: block; }
.bill-done b { display: block; margin: 6px 0 2px; }
.bill-done small { display: block; color: var(--ft-text-2); margin-bottom: 12px; }
.bill-done .btn-list { justify-content: center; }

.bill-buyer { margin-top: 14px; border-top: 1px dashed var(--ft-border); padding-top: 12px; }
.bill-buyer b { font-size: .8rem; display: block; }

.bill-invoice-wrap { max-width: 560px; }
.invoice-print { padding: 6px 18px; }
.bill-invoice { border: 1px solid var(--ft-border); border-radius: 12px; padding: 16px 18px; background: var(--ft-surface-2); }
.bill-invoice-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--ft-border); padding-bottom: 10px; margin-bottom: 6px; }
.bill-invoice-head b { font-size: .95rem; display: block; }
.bill-invoice-head small { font-size: .68rem; color: var(--ft-text-2); }
.bill-invoice-buyer { padding: 6px 0; border-bottom: 1px dashed var(--ft-border); color: var(--ft-text-2); }
.bill-paid-stamp {
  margin-top: 10px; display: inline-block; padding: 3px 12px; border: 2px solid #26bf94;
  border-radius: 8px; color: #26bf94; font-size: .72rem; font-weight: 700; transform: rotate(-4deg);
}

.mahfel-brand {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  padding: 4px 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 20px;
  font-size: .74rem; color: #fff;
}
.mahfel-brand img { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; }

@media print {
  body * { visibility: hidden; }
  .invoice-print, .invoice-print * { visibility: visible; }
  .invoice-print { position: fixed; inset: 0; background: #fff; padding: 32px; }
  .invoice-print .bill-invoice { background: #fff; color: #111; border-color: #ddd; }
  .invoice-print .bill-invoice-head small,
  .invoice-print .bill-invoice-buyer { color: #555; }
  .invoice-print .bill-line.total b { color: #111; }
}

/* ── پروفایل اتاق / سالن انتظار / سقف نشست ── */
.ft-join-hero {
  width: calc(100% + 64px); margin: -36px -32px 18px; display: block;
  height: 150px; object-fit: cover; border-radius: 20px 20px 0 0;
}
.ft-wait { text-align: center; padding: 4px 0 6px; }
.ft-wait-pulse {
  width: 74px; height: 74px; margin: 6px auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--ft-accent);
  background: rgba(58, 130, 255, 0.12); border: 1px solid rgba(58, 130, 255, 0.35);
  animation: ftWaitPulse 1.8s ease-in-out infinite;
}
@keyframes ftWaitPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(58, 130, 255, 0.35); }
  50% { box-shadow: 0 0 0 14px rgba(58, 130, 255, 0); }
}
.ft-wait-msg { color: var(--ft-text-2); font-size: 0.85rem; margin: 4px 0 10px; }
.ft-wait-media {
  width: 100%; max-height: 180px; border-radius: 12px;
  margin: 4px 0 10px; background: #000;
}
.ft-wait-status {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--ft-text-2); font-size: 0.8rem; margin: 12px 0 14px;
}
.ft-wait-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--ft-accent-2); animation: ftWaitBlink 1.2s ease-in-out infinite;
}
@keyframes ftWaitBlink { 50% { opacity: 0.25; } }

.ft-limit-chip {
  color: #fbbf24; border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.08);
}
.ft-limit-chip.clickable { cursor: pointer; }
.ft-limit-chip.clickable:hover { background: rgba(251, 191, 36, 0.18); }

/* کارت پروفایل در فضای کاری */
.ft-ws-prow { display: flex; flex-wrap: wrap; gap: 6px; }
.ft-ws-pbadge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px;
  font-size: 0.72rem; border: 1px solid var(--ft-border); color: var(--ft-text-2);
  background: rgba(255, 255, 255, 0.04);
}
.ft-ws-pbadge.ok { color: var(--ft-accent-2); border-color: rgba(112, 249, 184, 0.3); }
.ft-ws-pbadge.off { color: var(--ft-danger); border-color: rgba(240, 68, 56, 0.3); }
.ft-profile-modal { max-width: 520px; width: 94vw; }
.ft-profile-scroll { max-height: 62vh; overflow-y: auto; padding-left: 4px; }
.ft-prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 560px) { .ft-prof-grid { grid-template-columns: 1fr; } }

/* ── پیش‌ورود مدرن: تاگل رسانه روی پیش‌نمایش + اتاق‌های اخیر + هشدار مرورگر ── */
.ft-precheck-toggles {
  position: absolute; bottom: 10px; inset-inline: 0; z-index: 2;
  display: flex; gap: 10px; justify-content: center;
}
.ft-precheck-media {
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(15, 15, 15, 0.62);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(6px); transition: background 0.15s, border-color 0.15s;
}
.ft-precheck-media:hover { background: rgba(15, 15, 15, 0.85); }
.ft-precheck-media.off { background: var(--ft-danger); border-color: var(--ft-danger); }
.ft-precheck-camoff {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center;
  color: var(--ft-text-2); background: var(--ft-surface-2); font-size: 0.76rem;
}
.mahfel-recent { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.mahfel-recent-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px;
  border-radius: 20px; border: 1px solid var(--ft-border);
  background: var(--ft-surface-2); color: var(--ft-text-2);
  font-family: inherit; font-size: 0.74rem; cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.mahfel-recent-chip:hover { border-color: var(--ft-accent); color: var(--ft-text); }
.mahfel-recent-chip.sel { border-color: var(--ft-accent); color: #fff; background: rgba(58, 130, 255, 0.14); }
.mahfel-browser-warn {
  border: 1px solid rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.08);
  border-radius: 12px; padding: 11px 13px; margin-bottom: 16px;
  font-size: 0.78rem; color: #fbbf24; text-align: start;
}
.mahfel-browser-warn b { display: flex; align-items: center; gap: 6px; }
.mahfel-browser-warn ul { margin: 6px 0; padding-inline-start: 18px; color: var(--ft-text-2); }
.mahfel-browser-warn-hint { margin: 0; color: var(--ft-text-2); font-size: 0.74rem; }
.ft-wait-actions { display: flex; gap: 10px; justify-content: center; }
.ft-wait-presenter { width: auto; padding: 9px 18px; display: inline-flex; align-items: center; gap: 6px; }

/* ===== گردونه شانس ===== */
.ft-lucky-modal { max-width: 430px; }
.ft-lucky-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 0 6px; }
.ft-lucky-canvas { width: min(330px, 72vw); aspect-ratio: 1; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); }
.ft-lucky-winner {
  display: flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(236,72,153,.14));
  border: 1px solid rgba(245,158,11,.45); color: #fcd34d; font-size: .85rem;
  animation: ftLuckyPop .45s cubic-bezier(.2,1.5,.4,1);
}
.ft-lucky-winner b { color: #fff; }
@keyframes ftLuckyPop { from { transform: scale(.5); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.ft-lucky-status { color: var(--ft-text-2); font-size: .8rem; padding: 6px 0 2px; }
.ft-lucky-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ft-lucky-actions .ft-toggle-row { flex: 1; min-width: 190px; }
.ft-compact-user.lucky-win {
  border-radius: 10px; outline: 2px solid rgba(245,158,11,.85); outline-offset: -1px;
  animation: ftLuckyGlow 1.1s ease-in-out 3;
}
@keyframes ftLuckyGlow { 50% { box-shadow: 0 0 16px rgba(245,158,11,.55); } }

/* ---------- حضور و تمرکز صفحه + آمار دستگاه ---------- */
.ft-cu-flag.away {
  color: #fbbf24;
  background: rgba(251, 191, 36, .16);
  border-color: rgba(251, 191, 36, .5);
  animation: ft-away-pulse 2.4s ease-in-out infinite;
}
@keyframes ft-away-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.ft-away-count {
  display: inline-flex; align-items: center; gap: 3px;
  margin-inline-start: 6px; padding: 1px 7px;
  border-radius: 999px; font-size: .62rem; font-weight: 600;
  color: #fbbf24; background: rgba(251, 191, 36, .14);
  border: 1px solid rgba(251, 191, 36, .35); white-space: nowrap;
}

.ft-user-filter-away { color: #fbbf24; }
.ft-user-filter-away.sel {
  border-color: rgba(251, 191, 36, .6) !important;
  background: rgba(251, 191, 36, .14) !important;
  color: #fcd34d !important;
}

.ft-away-txt { color: #fbbf24; }

.ft-devstat {
  display: flex; align-items: center; gap: 8px;
  margin: 0 8px 8px; padding: 5px 9px;
  border-radius: 9px;
  background: var(--ft-surface-2);
  border: 1px solid var(--ft-border);
}
.ft-devstat-track {
  display: inline-flex; width: 72px; height: 6px;
  border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .08); flex-shrink: 0;
}
.ft-devstat-track i { display: block; height: 100%; }
.ft-devstat-track .ds-desk { background: #60a5fa; }
.ft-devstat-track .ds-mob { background: #fbbf24; }
.ft-devstat-track .ds-tab { background: #a78bfa; }
.ft-devstat-track .ds-oth { background: #64748b; }
.ft-devstat-text {
  font-size: .66rem; color: var(--ft-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ft-poll-presets { margin-bottom: 10px; }
.ft-poll-opt { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ft-poll-pct { font-size: .7rem; opacity: .8; direction: ltr; }

/* ══ صفحهٔ ورود مهمان /join — پورتال مدرن ورود به اتاق ══ */
.mj-page { overflow: auto; }

.mj-wrap {
  display: flex;
  width: min(960px, 96vw);
  min-height: min(620px, 92vh);
  margin: auto;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--ft-border);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
  background: rgba(42, 42, 42, .85);
  backdrop-filter: blur(14px);
}

.mj-side {
  position: relative;
  flex: 0 0 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(420px 320px at 85% 10%, rgba(58, 130, 255, .3), transparent 60%),
    radial-gradient(320px 260px at 10% 90%, rgba(112, 249, 184, .14), transparent 60%),
    linear-gradient(160deg, #1d2333, #151515 70%);
}
.mj-side-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: .55;
}
.mj-side-in {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  height: 100%;
  padding: 30px 28px 24px;
  gap: 12px;
}
.mj-logo {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ft-text); text-decoration: none;
  font-size: 1.3rem; font-weight: 800;
}
.mj-room-title { font-size: 1.35rem; font-weight: 800; line-height: 1.5; margin: 10px 0 0; }
.mj-room-msg { font-size: .85rem; color: var(--ft-text-2); line-height: 1.9; margin: 0; }
.mj-room-code {
  display: inline-flex; align-items: center; gap: 6px;
  width: fit-content;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--ft-border);
  color: var(--ft-text-2); font-size: .8rem;
}
.mj-brand {
  display: inline-flex; align-items: center; gap: 8px;
  width: fit-content;
  padding: 6px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--ft-border);
  font-size: .8rem; color: var(--ft-text);
}
.mj-brand img { max-height: 26px; max-width: 90px; object-fit: contain; }
.mj-feats {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: auto;
}
.mj-feats span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--ft-border);
  color: var(--ft-text-2); font-size: .72rem;
}
.mj-qr {
  display: flex; align-items: center; gap: 12px;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  border: 1px dashed var(--ft-border);
  color: var(--ft-text-2); font-size: .72rem; line-height: 1.8;
}
.mj-qr canvas { border-radius: 8px; flex-shrink: 0; width: 118px; height: 118px; }

.mj-card {
  flex: 1; min-width: 0;
  padding: 38px 36px 26px;
  overflow-y: auto;
}
.mj-card-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 4px; }
.mj-card-sub { color: var(--ft-text-2); font-size: .85rem; margin: 0 0 22px; }

.mj-ltr { direction: ltr; }
.mj-ltr .k-input { direction: ltr; }
.mj-recent { margin: -8px 0 14px; }

.mj-chips { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.mj-chip {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  font-size: .78rem; line-height: 1.7;
}
.mj-chip svg { flex-shrink: 0; margin-top: 3px; }
.mj-chip.ok   { color: #8ef0c0; background: rgba(112, 249, 184, .07); border: 1px solid rgba(112, 249, 184, .22); }
.mj-chip.info { color: #9ec3ff; background: rgba(58, 130, 255, .09);  border: 1px solid rgba(58, 130, 255, .28); }
.mj-chip.warn { color: #ffd08a; background: rgba(255, 176, 32, .09);  border: 1px solid rgba(255, 176, 32, .28); }
.mj-chip.err  { color: #fda29b; background: rgba(240, 68, 56, .09);   border: 1px solid rgba(240, 68, 56, .3); }

/* تم تیرهٔ کنترل‌های تلریک داخل کارت ورود */
.mj-card .k-input-solid {
  background: rgba(255, 255, 255, .05);
  border-color: var(--ft-border);
  border-radius: 12px;
  color: var(--ft-text);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.mj-card .k-input .k-input-inner { color: var(--ft-text); font-family: inherit; }
.mj-card .k-input-inner::placeholder { color: var(--ft-text-2); opacity: .8; }
.mj-card .k-input:focus-within,
.mj-card .k-input.k-focus {
  border-color: var(--ft-accent);
  box-shadow: 0 0 0 3px rgba(58, 130, 255, .22);
  background: rgba(58, 130, 255, .05);
}

.mj-card .k-button.mj-submit {
  width: 100%;
  margin-top: 8px;
  padding: 12px 20px;
  border: none; border-radius: 13px;
  background: linear-gradient(135deg, var(--ft-accent), #2563eb);
  color: #fff; font-family: inherit;
  font-size: .95rem; font-weight: 700;
  box-shadow: 0 10px 28px rgba(58, 130, 255, .35);
  transition: transform .12s, box-shadow .2s, filter .2s;
}
.mj-card .k-button.mj-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.mj-card .k-button.mj-submit:active { transform: translateY(0); }
.mj-card .k-button.mj-submit:disabled { opacity: .6; box-shadow: none; }
.mj-card .k-button.mj-submit .k-button-text { display: inline-flex; align-items: center; gap: 7px; }
.mj-card .mj-submit svg { display: inline-block !important; }

.mj-error { color: var(--ft-danger); font-size: .82rem; text-align: center; margin: 14px 0 0; }

.mj-links {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--ft-border);
}
.mj-links a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ft-text-2); font-size: .76rem; text-decoration: none;
}
.mj-links a:hover { color: var(--ft-text); }
.mj-foot {
  margin: 14px 0 0;
  text-align: center;
  color: var(--ft-text-2); font-size: .7rem; opacity: .7;
}

@media (max-width: 760px) {
  .mj-wrap { flex-direction: column; min-height: 0; max-height: 96vh; }
  .mj-side { flex: 0 0 auto; }
  .mj-side-in { padding: 20px 22px 16px; gap: 8px; }
  .mj-room-title { font-size: 1.05rem; margin-top: 4px; }
  .mj-room-msg { font-size: .78rem; }
  .mj-feats { display: none; }
  .mj-qr { display: none; }
  .mj-card { padding: 24px 22px 18px; overflow-y: visible; }
}

/* تیترهای صفحهٔ /join — رنگ قالب (سرمه‌ای) روی پس‌زمینهٔ تیره دیده نمی‌شود */
.mj-page :is(h1, h2, h3, h4, h5, h6) { color: var(--ft-text); }

/* ══ ویزارد ساخت رویداد /events/new ══ */
.ft-wz { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
@media (max-width: 991px) { .ft-wz { grid-template-columns: 1fr; } }

.ft-wz-steps { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.ft-wz-step {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; background: none; padding: 6px 4px;
  font: inherit; font-size: .8rem; color: var(--default-text-color);
  opacity: .55; cursor: pointer; white-space: nowrap;
}
.ft-wz-step-n {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700;
  border: 1.5px solid var(--default-border); transition: all .15s;
}
.ft-wz-step.on { opacity: 1; color: rgb(var(--primary-rgb)); font-weight: 700; }
.ft-wz-step.on .ft-wz-step-n { background: rgb(var(--primary-rgb)); color: #fff; border-color: transparent; }
.ft-wz-step.done { opacity: .9; }
.ft-wz-step.done .ft-wz-step-n { background: rgba(var(--primary-rgb), .15); color: rgb(var(--primary-rgb)); border-color: transparent; }
.ft-wz-step:disabled { cursor: default; }
.ft-wz-step-line { flex: 1; height: 2px; min-width: 12px; border-radius: 2px; background: var(--default-border); }
.ft-wz-step-line.done { background: rgb(var(--primary-rgb)); }
.ft-wz-progress { height: 4px; border-radius: 999px; background: rgba(var(--primary-rgb), .12); overflow: hidden; margin-bottom: 20px; }
.ft-wz-progress i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgb(var(--primary-rgb)), #7c3aed); transition: width .3s; }

.ft-wz-pane { animation: ftWzIn .25s ease; }
@keyframes ftWzIn { from { opacity: 0; transform: translateY(6px); } }
.ft-wz-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
.ft-wz-sub { font-size: .8rem; color: var(--default-text-color); opacity: .7; margin: 0 0 18px; }

.ft-wz-orgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ft-wz-org {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 12px; border-radius: 14px; text-align: start;
  border: 1.5px solid var(--default-border); background: var(--custom-white);
  font: inherit; font-size: .84rem; color: var(--default-text-color);
  cursor: pointer; transition: all .15s;
}
.ft-wz-org:hover { border-color: rgba(var(--primary-rgb), .5); }
.ft-wz-org.on { border-color: rgb(var(--primary-rgb)); background: rgba(var(--primary-rgb), .06); }
.ft-wz-org-logo {
  width: 38px; height: 38px; border-radius: 12px; flex: none; overflow: hidden;
  display: grid; place-items: center; font-weight: 800; font-size: 1rem;
  background: linear-gradient(135deg, rgb(var(--primary-rgb)), #7c3aed); color: #fff;
}
.ft-wz-org-logo img { width: 100%; height: 100%; object-fit: cover; }
.ft-wz-org-logo.sm { width: 44px; height: 44px; }
.ft-wz-org-logo.xs { width: 26px; height: 26px; border-radius: 8px; font-size: .8rem; }
.ft-wz-org-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-wz-org-del {
  position: absolute; top: 5px; inset-inline-end: 5px;
  width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center; opacity: .4;
}
.ft-wz-org-del:hover { opacity: 1; background: rgba(240, 68, 56, .15); color: #f04438; }
.ft-wz-org.new { border-style: dashed; }
.ft-wz-org.new .ft-wz-org-logo { background: rgba(var(--primary-rgb), .12); color: rgb(var(--primary-rgb)); }

.ft-wz-orgform { margin-bottom: 14px; padding: 14px; border-radius: 14px; background: rgba(var(--primary-rgb), .04); border: 1px dashed var(--default-border); }

.ft-wz-tip {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: 16px; padding: 12px 14px; border-radius: 12px;
  font-size: .78rem; line-height: 1.8; color: var(--default-text-color);
  background: rgba(var(--primary-rgb), .07); border: 1px solid rgba(var(--primary-rgb), .25);
}
.ft-wz-tip svg { flex: none; margin-top: 3px; color: rgb(var(--primary-rgb)); }
.ft-wz-tip.warn { background: rgba(250, 190, 60, .09); border-color: rgba(250, 190, 60, .3); }
.ft-wz-tip.warn svg { color: #e08a00; }

.ft-wz-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ft-wz-schedule {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 11px 14px; border-radius: 12px;
  font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums;
  background: rgba(var(--primary-rgb), .07); color: rgb(var(--primary-rgb));
}

.ft-wz-ticketkind { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 575px) { .ft-wz-ticketkind { grid-template-columns: 1fr; } }
.ft-wz-tk {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 14px; border-radius: 14px; text-align: start;
  border: 1.5px solid var(--default-border); background: var(--custom-white);
  font: inherit; color: var(--default-text-color); cursor: pointer; transition: all .15s;
}
.ft-wz-tk:hover { border-color: rgba(var(--primary-rgb), .5); }
.ft-wz-tk.on { border-color: rgb(var(--primary-rgb)); background: rgba(var(--primary-rgb), .06); }
.ft-wz-tk svg { color: rgb(var(--primary-rgb)); }
.ft-wz-tk b { font-size: .88rem; }
.ft-wz-tk small { font-size: .72rem; opacity: .7; }

.ft-wz-review { display: flex; flex-direction: column; border: 1px solid var(--default-border); border-radius: 14px; overflow: hidden; }
.ft-wz-rv { display: flex; justify-content: space-between; gap: 14px; padding: 10px 14px; font-size: .82rem; }
.ft-wz-rv + .ft-wz-rv { border-top: 1px dashed var(--default-border); }
.ft-wz-rv span { opacity: .65; flex: none; }
.ft-wz-rv b { font-weight: 600; text-align: end; }

.ft-wz-nav { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--default-border); }
.ft-wz-nav-hint { flex: 1; text-align: center; font-size: .72rem; opacity: .6; }
.ft-wz-nav .mahfel-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

/* ستون پیش‌نمایش زندهٔ صفحهٔ ثبت‌نام */
.ft-wz-side { position: sticky; top: 80px; }
@media (max-width: 991px) { .ft-wz-side { position: static; } }
.ft-wz-preview { border-radius: 18px; overflow: hidden; border: 1px solid var(--default-border); background: var(--custom-white); box-shadow: 0 18px 50px rgba(0, 0, 0, .12); }
.ft-wz-preview-bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--default-border); background: rgba(0, 0, 0, .04); }
.ft-wz-preview-bar > span { width: 9px; height: 9px; border-radius: 50%; background: var(--default-border); flex: none; }
.ft-wz-preview-bar code { margin-inline-start: 8px; font-size: .62rem; opacity: .55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-wz-preview-poster { position: relative; height: 150px; display: grid; place-items: center; background: linear-gradient(135deg, rgb(var(--primary-rgb)), #7c3aed); }
.ft-wz-preview-poster img { width: 100%; height: 100%; object-fit: cover; }
.ft-wz-preview-poster > span { font-size: 2.6rem; font-weight: 800; color: rgba(255, 255, 255, .85); }
.ft-wz-preview-poster em {
  position: absolute; top: 10px; inset-inline-start: 10px;
  font-style: normal; font-size: .64rem; font-weight: 700;
  padding: 3px 11px; border-radius: 999px;
  background: rgba(0, 0, 0, .45); color: #fff; backdrop-filter: blur(5px);
}
.ft-wz-preview-body { padding: 14px 16px 16px; }
.ft-wz-preview-body h4 { font-size: .95rem; font-weight: 700; margin: 0 0 8px; min-height: 1.4em; }
.ft-wz-preview-org { display: flex; align-items: center; gap: 8px; font-size: .76rem; opacity: .8; margin-bottom: 10px; }
.ft-wz-preview-meta { display: flex; flex-direction: column; gap: 5px; font-size: .72rem; opacity: .7; }
.ft-wz-preview-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ft-wz-preview-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--default-border); }
.ft-wz-preview-foot b { font-size: .88rem; color: rgb(var(--primary-rgb)); }
.ft-wz-preview-foot i { font-style: normal; font-size: .68rem; padding: 5px 16px; border-radius: 999px; background: linear-gradient(135deg, rgb(var(--primary-rgb)), #7c3aed); color: #fff; font-weight: 700; }
.ft-wz-preview-note { font-size: .7rem; opacity: .6; text-align: center; margin-top: 10px; }

/* ── نوار ابزار لیست رویدادها: فیلترها + جست‌وجو ── */
.ft-ev-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ft-ev-tools .ft-ev-filters { margin-bottom: 0; flex: 1; }
.ft-ev-search {
  display: flex; align-items: center; gap: 7px; min-width: 240px;
  background: var(--custom-white); border: 1px solid var(--default-border);
  border-radius: 999px; padding: 7px 14px; color: var(--default-text-color); opacity: .85;
}
.ft-ev-search:focus-within { border-color: rgba(var(--primary-rgb), .5); opacity: 1; }
.ft-ev-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--default-text-color); font: inherit; font-size: .8rem; outline: none; }
.ft-ev-search-x { border: 0; background: none; padding: 0; display: grid; place-items: center; opacity: .6; cursor: pointer; color: inherit; }
.ft-ev-search-x:hover { opacity: 1; }

/* ── حالت خالی لیست رویدادها ── */
.ft-ev-empty .card-body { padding: 44px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ft-ev-empty-art {
  position: relative; width: 120px; height: 120px; margin-bottom: 8px;
  border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .14), rgba(124, 58, 237, .1));
}
.ft-ev-empty-art > i { font-size: 2.6rem; color: rgb(var(--primary-rgb)); }
.ft-ev-empty-bubble { position: absolute; border-radius: 50%; }
.ft-ev-empty-bubble.b1 { width: 22px; height: 22px; top: 8px; inset-inline-end: 14px; background: rgba(var(--primary-rgb), .3); }
.ft-ev-empty-bubble.b2 { width: 13px; height: 13px; bottom: 14px; inset-inline-start: 10px; background: rgba(124, 58, 237, .3); }
.ft-ev-empty-bubble.b3 { width: 9px; height: 9px; top: 30px; inset-inline-start: 6px; background: rgba(52, 199, 123, .4); }
.ft-ev-empty h5 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.ft-ev-empty p { font-size: .82rem; color: var(--default-text-color); opacity: .7; max-width: 440px; margin: 0 0 10px; }
.ft-ev-empty .mahfel-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

/* ===================== پروفایل کاربری (/profile) ===================== */
.pf-hero {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 20px 22px; border-radius: 16px; margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .1), rgba(124, 58, 237, .08));
  border: 1px solid var(--default-border);
}
.pf-avatar-wrap { position: relative; flex: none; }
.pf-avatar {
  width: 88px; height: 88px; border-radius: 50%; object-fit: cover; display: block;
  border: 3px solid var(--custom-white); box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.pf-avatar-init { display: grid; place-items: center; font-size: 1.9rem; font-weight: 800; color: #fff; }
.pf-avatar-btn {
  position: absolute; bottom: 0; inset-inline-end: 0; width: 30px; height: 30px;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgb(var(--primary-rgb)); color: #fff; font-size: .9rem;
  border: 2px solid var(--custom-white); transition: transform .15s ease;
}
.pf-avatar-btn:hover { transform: scale(1.1); }
.pf-hero-info { flex: 1; min-width: 220px; }
.pf-hero-info h3 { margin: 0 0 8px; font-size: 1.25rem; font-weight: 700; }
.pf-hero-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .78rem; opacity: .85; }
.pf-hero-meta span { display: inline-flex; align-items: center; gap: 4px; }
.pf-hero-side { display: flex; gap: 14px; flex-wrap: wrap; }
.pf-mini { text-align: center; padding: 8px 14px; border-radius: 10px; background: var(--custom-white); border: 1px solid var(--default-border); min-width: 105px; }
.pf-mini small { display: block; font-size: .66rem; opacity: .6; margin-bottom: 2px; }
.pf-mini b { font-size: .76rem; font-weight: 600; }

.pf-tabs { display: flex; gap: 4px; }
.pf-tab {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none;
  padding: 8px 16px; border-radius: 10px; font: inherit; font-size: .82rem;
  color: var(--default-text-color); opacity: .75; cursor: pointer; transition: all .15s ease;
}
.pf-tab:hover { opacity: 1; background: rgba(var(--primary-rgb), .07); }
.pf-tab.on { opacity: 1; background: rgb(var(--primary-rgb)); color: #fff; }

.pf-kind { display: flex; gap: 12px; flex-wrap: wrap; }
.pf-kind-card {
  flex: 1; min-width: 180px; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 12px; cursor: pointer; text-align: start;
  border: 1px solid var(--default-border); background: var(--custom-white);
  color: var(--default-text-color); font: inherit; transition: all .15s ease;
}
.pf-kind-card i { font-size: 1.4rem; color: rgb(var(--primary-rgb)); }
.pf-kind-card b { display: block; font-size: .88rem; }
.pf-kind-card small { display: block; font-size: .7rem; opacity: .65; }
.pf-kind-card.on { border-color: rgb(var(--primary-rgb)); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); }

.pf-locked {
  display: flex; gap: 14px; flex-wrap: wrap; padding: 9px 14px;
  border-radius: 10px; background: rgba(0, 0, 0, .04); font-size: .82rem;
}
.pf-locked span { display: inline-flex; align-items: center; gap: 5px; }

.pf-pw-meter { display: flex; gap: 14px; flex-wrap: wrap; font-size: .74rem; }
.pf-pw-meter span { display: inline-flex; align-items: center; gap: 4px; opacity: .55; }
.pf-pw-meter span.ok { opacity: 1; color: #34c77b; }

/* ===================== مصرف و سهمیه (/usage) ===================== */
.usage-big { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; }
.usage-big small { font-size: .78rem; font-weight: 400; opacity: .65; }
.usage-bar { height: 10px; }
.usage-bar.sm { height: 6px; margin-top: 6px; }
.usage-sub { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .72rem; opacity: .7; margin-top: 8px; }
.usage-note { font-size: .72rem; opacity: .65; margin-top: 12px; display: flex; align-items: center; gap: 5px; }

.usage-cap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.usage-cap-row { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; }
.usage-cap-row span { display: inline-flex; align-items: center; gap: 6px; opacity: .8; }
.usage-cap-row b { font-size: .95rem; }

.usage-kinds { display: flex; gap: 12px; flex-wrap: wrap; font-size: .76rem; opacity: .8; margin-top: 4px; }
.usage-kinds span { display: inline-flex; align-items: center; gap: 4px; }

.usage-svcs { display: flex; flex-direction: column; gap: 14px; }
.usage-svc { padding-bottom: 12px; border-bottom: 1px dashed var(--default-border); }
.usage-svc:last-child { border-bottom: 0; padding-bottom: 0; }
.usage-svc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.usage-svc-head b { font-size: .88rem; }
.usage-svc-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .74rem; opacity: .75; }
.usage-svc-meta span { display: inline-flex; align-items: center; gap: 4px; }

.usage-addons { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.usage-addon {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--default-border); opacity: .7;
}
.usage-addon.on { opacity: 1; border-color: rgba(52, 199, 123, .5); background: rgba(52, 199, 123, .06); }
.usage-addon > i:first-child { font-size: 1.3rem; color: rgb(var(--primary-rgb)); }
.usage-addon.on > i:first-child { color: #34c77b; }
.usage-addon b { display: block; font-size: .8rem; }
.usage-addon small { display: block; font-size: .66rem; opacity: .7; }
.usage-addon-buy {
  margin-inline-start: auto; font-size: .68rem; padding: 3px 10px;
  border-radius: 999px; background: rgba(var(--primary-rgb), .12);
  color: rgb(var(--primary-rgb)); text-decoration: none;
}
.usage-addon-ok { margin-inline-start: auto; color: #34c77b; font-size: 1.1rem; }

.usage-room { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.usage-room-name { width: 130px; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.usage-room-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(0, 0, 0, .06); overflow: hidden; }
.usage-room-bar > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgb(var(--primary-rgb)), #7c3aed); }
.usage-room-val { font-size: .7rem; opacity: .65; flex: none; min-width: 110px; text-align: end; }