/* ═══════════════════════ ١) 🎨 الرموز ═══════════════════════════════════ */

:root{
  /* المسافات: مقياس ٤px — كل فراغ باللوحة من هنا، فما تطلع مسافات عشوائية */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:56px;
  --r1:8px; --r2:12px; --r3:16px; --r4:22px; --rf:999px;

  /* ============================================================================
   *  🎨 الاتجاه البصري: حيويّ وملوّن — بطاقة لكل قسم بلونه، ووهج عند اللمس
   * --------------------------------------------------------------------------
   *  اللون هنا **معلومة** لا زينة: نفس لون القسم يلاحقه من أيقونة القائمة
   *  إلى حافة بطاقته إلى شريحته. والتدرّج يعطي البطاقة عمقًا بلا صورة ولا
   *  ضباب خلفي — فيبقى التمرير خفيفًا على قائمة فيها ٢١٧ أمرًا.
   * ========================================================================== */
  --accent:#6f5cff; --accent-2:#b15cff; --accent-3:#22d3ee;
  /* 🐞 تدرّج واحد لكل شيء كان خطأً حقيقيًا لا ذوقًا: النصّ الأبيض فوق طرفه
     الفاتح (#c94fe0) تباينه 3.70 و(#a855f7) تباينه 3.96 — وحدّ WCAG AA
     للنصّ الصغير 4.5. فكل زرّ أساسي وكل مقطع مضغوط كان تحت الحدّ.
     فصلناهما: `--g-accent` يحمل نصًّا أبيض ويبقى فوق 5.0 بكل نقطة منه،
     و`--g-vivid` للأسطح الزخرفية وحدها (أيقونة، شريط، علامة) حيث لا نصّ. */
  --g-accent:linear-gradient(135deg,#6552f0,#7a4ae8 55%,#8f47e0);
  --g-vivid:linear-gradient(140deg,#6f5cff,#b15cff 55%,#c94fe0);
  --ok:#22c55e; --warn:#f0a92e; --err:#ef4444; --info:#38bdf8;

  /* ============================================================================
   *  🌈 ألوان الأقسام — نفس لوحة إيموجيات البوت بالضبط
   * --------------------------------------------------------------------------
   *  ليش ألوان لكل قسم لا لون واحد؟ لأن اللوحة فيها عشرة تبويبات وإحدى عشرة
   *  فئة أوامر، وكلها رمادية = الكل يبان متشابهًا فتضيع الوجهة. اللون هنا
   *  **معلومة** لا زينة: نفس اللون يلاحق القسم من أيقونة القائمة، لشريحة
   *  الفئة، لعنوان البطاقة، لأيقونة البوت داخل ديسكورد.
   * ========================================================================== */
  --h-violet:#8b5cf6; --h-blue:#3b82f6;  --h-green:#10b981; --h-amber:#f59e0b;
  --h-red:#ef4444;    --h-teal:#14b8a6;  --h-pink:#ec4899;  --h-gold:#eab308;
  --h-slate:#64748b;  --h-indigo:#6366f1;
  /* الطرف الثاني لتدرّج كل لون — نفس العائلة مُزاحة لا لون غريب */
  --h2-violet:#c084fc; --h2-blue:#60a5fa;  --h2-green:#34d399; --h2-amber:#fbbf24;
  --h2-red:#fb7185;    --h2-teal:#2dd4bf;  --h2-pink:#f472b6;  --h2-gold:#facc15;
  --h2-slate:#94a3b8;  --h2-indigo:#818cf8;

  --font:"Segoe UI Variable","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,
         "Noto Sans Arabic","Noto Kufi Arabic",Cairo,Tahoma,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* الحركة: ٢٢٠ms مع ارتفاع طفيف — محسوسة بلا تباطؤ */
  --dur:.22s;
  --dur-fast:.13s;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* الغامق (الافتراضي) */
[data-theme="dark"]{
  --bg:#08090f;
  --bg-2:#0d0f18;
  --surface:#12141d;
  --surface-2:#181b26;
  --surface-3:#1f2331;
  --line:#242838;
  --line-2:#333a50;
  --text:#eceef5;
  --text-2:#a3a9bd;
  /* ⬆️ كان ‎#6f768c‎ ونسبة تباينه ٣٫٤٦ — تحت حد ٤٫٥ بمعيار WCAG AA. أي نص
     ثانوي (عدّاد، عنوان مجموعة، كسر ١٦/٥٩) كان غير مقروء لضعاف البصر. */
  --text-3:#949bb1;
  --accent-text:#a99bff;   /* اللون المميّز للنصوص — الأساسي غامق زيادة على النص */
  --danger-text:#ff8b84;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.85);
  --accent-soft:rgba(109,92,246,.16);
  --accent-line:rgba(109,92,246,.42);
  --ok-soft:rgba(47,191,113,.14);
  --warn-soft:rgba(232,169,58,.14);
  --err-soft:rgba(228,87,79,.14);
  --info-soft:rgba(58,160,232,.14);
  --glow:radial-gradient(80% 60% at 50% -10%,rgba(111,92,255,.24),transparent 70%);
  /* وهج الصفحة: ثلاث دوائر ثابتة تُرسم مرة واحدة — بلا أي تكلفة تمرير */
  --halo:
    radial-gradient(52% 38% at 18% -6%,rgba(111,92,255,.20),transparent 68%),
    radial-gradient(44% 34% at 88% 2%,rgba(201,79,224,.15),transparent 66%),
    radial-gradient(60% 40% at 50% 104%,rgba(34,211,238,.08),transparent 70%);
  --ring:0 0 0 3px rgba(111,92,255,.28);
  --lift:0 18px 40px -22px rgba(0,0,0,.9);
  --knob:#cbd2e4;          /* كرة المفتاح وهو مطفي */
  --tint:22%;              /* نسبة مزج اللون مع السطح للخلفيات الملوّنة */
  --tint-line:38%;
  --tint-text:78%;         /* اللون على النص: يُفتَح فوق الغامق */
}
/* الفاتح */
[data-theme="light"]{
  --bg:#f5f6fa;
  --bg-2:#eef0f6;
  --surface:#ffffff;
  --surface-2:#f7f8fc;
  --surface-3:#eef0f7;
  --line:#e2e5ee;
  --line-2:#cdd2e0;
  --text:#12141c;
  --text-2:#545c72;
  --text-3:#5d6579;        /* نفس سبب النسخة الغامقة: ٢٫٩٣ → فوق ٤٫٥ */
  --accent-text:#5b49df;
  --danger-text:#c0342c;
  --shadow:0 1px 2px rgba(16,20,40,.06),0 10px 26px -16px rgba(16,20,40,.24);
  --shadow-lg:0 30px 70px -28px rgba(16,20,40,.32);
  --accent-soft:rgba(109,92,246,.10);
  --accent-line:rgba(109,92,246,.38);
  --ok-soft:rgba(47,191,113,.12);
  --warn-soft:rgba(232,169,58,.16);
  --err-soft:rgba(228,87,79,.10);
  --info-soft:rgba(58,160,232,.12);
  --glow:radial-gradient(80% 60% at 50% -10%,rgba(111,92,255,.14),transparent 70%);
  --halo:
    radial-gradient(52% 38% at 18% -6%,rgba(111,92,255,.13),transparent 68%),
    radial-gradient(44% 34% at 88% 2%,rgba(201,79,224,.10),transparent 66%),
    radial-gradient(60% 40% at 50% 104%,rgba(34,211,238,.07),transparent 70%);
  --ring:0 0 0 3px rgba(111,92,255,.20);
  --lift:0 18px 40px -24px rgba(16,20,40,.34);
  /* 🐞 كانت كرة المفتاح بلون النص الثانوي (#545c72): غامقة على مسار فاتح،
     فالمفتاح **المطفي** يبان مثل المشغّل ويحتار الشخص وش حالته. الكرة
     البيضاء مع مسار رمادي هي العرف بكل مكان (ديسكورد، iOS، أندرويد). */
  --knob:#ffffff;
  --tint:14%;
  --tint-line:30%;
  --tint-text:100%;        /* وعلى الفاتح نستخدم اللون كما هو ثم نغمّقه */
}

/* ═══════════════════════ الأساس ════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text);
  /* الوهج مثبّت بالمشهد: يُرسم مرة واحدة ولا يُعاد حسابه مع كل تمرير،
     فنكسب العمق البصري بلا أي كلفة على قائمة طويلة. */
  background-image:var(--halo);
  background-attachment:fixed;
  background-repeat:no-repeat;
  font:400 15px/1.6 var(--font);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
@supports (min-height:100dvh){ body{min-height:100dvh} }
h1,h2,h3,h4{margin:0;font-weight:760;line-height:1.22;letter-spacing:-.02em}
h1{font-size:clamp(26px,4.8vw,38px)}
h2{font-size:clamp(20px,2.8vw,25px)}
h3{font-size:17.5px;font-weight:720}
h4{font-size:15px;font-weight:700}
p{margin:0}
a{color:var(--accent-text);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
code,kbd{font-family:var(--mono);font-size:.9em}
::placeholder{color:var(--text-3)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r1)}
[hidden]{display:none!important}

/* شريط تمرير هادي — ما يسحب العين عن المحتوى */
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:var(--rf);border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* أدوات مساعدة صغيرة — كل وحدة تُستخدم بأكثر من مكان */
.muted{color:var(--text-2)}
.dim{color:var(--text-3)}
.tiny{font-size:12.5px;line-height:1.55}
.sm{font-size:13.5px}
.strong{font-weight:650}
/* ============================================================================
 *  ↔️ العزل الاتجاهي — يمنع انقلاب النصّ اللاتيني داخل سطر عربي
 * --------------------------------------------------------------------------
 *  🐞 صنف كامل من «الأخطاء الكتابية» سببه ثنائية الاتجاه لا الكتابة:
 *  «40 / 100» كان يُعرض «100 / 40»، و«/botinfo» يُعرض «botinfo/»، و«600×240»
 *  يُعرض «240×600». والسبب أن الرمز المحيّد (`/` و`×` و`:`) بين رقمين أو
 *  حروف لاتينية داخل سطر عربي يأخذ اتجاه السطر فينقلب الترتيب.
 *
 *  العلاج بنيوي لا لكل نصّ على حِدة: كل ما هو لاتيني بطبعه (اسم أمر، كسر،
 *  معرّف، شيفرة) يُعزل اتجاهيًا فيُقرأ كما كُتب — ويبقى موضعه بالسطر تابعًا
 *  للعربية كما يجب.
 * ========================================================================== */
.mono{font-family:var(--mono);unicode-bidi:isolate}
.ltr{direction:ltr;unicode-bidi:isolate;text-align:start}
[dir="auto"]{unicode-bidi:isolate}
/* الأرقام والكسور والوسوم: أرقام غربية داخل نصّ عربي — تُعزل دائمًا */
.stat .v,.cnt,.tag,.meter-val,code,kbd{unicode-bidi:isolate}
.nowrap{white-space:nowrap}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.center{text-align:center}
.grow{flex:1 1 auto;min-width:0}
.row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.row-tight{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.spacer{flex:1 1 auto}
.hr{height:1px;background:var(--line);border:0;margin:var(--s4) 0}
.skip{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:200;padding:10px 16px;
  background:var(--surface);border:1px solid var(--accent);border-radius:var(--r2);
  font-weight:650;transform:translateY(-200%);transition:transform var(--dur) var(--ease)}
.skip:focus{transform:none;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ═══════════════════════ ٢) 🧱 المكوّنات ════════════════════════════════ */

/* ============================================================================
 *  🌈 التلوين — صنف واحد يلوّن أي عنصر بلون قسمه
 * --------------------------------------------------------------------------
 *  `color-mix` مدعومة بكل المتصفحات الحديثة، ولو ما كانت مدعومة يبقى
 *  العنصر بلون السطح العادي — يعني تدهور ناعم لا كسر.
 * ========================================================================== */
[data-hue]{ --hue:var(--h-violet); --hue2:var(--h2-violet) }
[data-hue="violet"]{ --hue:var(--h-violet); --hue2:var(--h2-violet) }
[data-hue="blue"]{   --hue:var(--h-blue);   --hue2:var(--h2-blue) }
[data-hue="green"]{  --hue:var(--h-green);  --hue2:var(--h2-green) }
[data-hue="amber"]{  --hue:var(--h-amber);  --hue2:var(--h2-amber) }
[data-hue="red"]{    --hue:var(--h-red);    --hue2:var(--h2-red) }
[data-hue="teal"]{   --hue:var(--h-teal);   --hue2:var(--h2-teal) }
[data-hue="pink"]{   --hue:var(--h-pink);   --hue2:var(--h2-pink) }
[data-hue="gold"]{   --hue:var(--h-gold);   --hue2:var(--h2-gold) }
[data-hue="slate"]{  --hue:var(--h-slate);  --hue2:var(--h2-slate) }
[data-hue="indigo"]{ --hue:var(--h-indigo); --hue2:var(--h2-indigo) }

.tinted{
  background:color-mix(in srgb,var(--hue) var(--tint),var(--surface));
  border-color:color-mix(in srgb,var(--hue) var(--tint-line),var(--line));
  color:color-mix(in srgb,var(--hue) var(--tint-text),var(--text));
}

/* — بطاقة — */
.card{
  position:relative;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r4); padding:var(--s5);
  box-shadow:var(--shadow);
  transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
/* غسل لوني خفيف من أعلى البطاقة — يعطي عمقًا بلا صورة ولا ضباب */
.card[data-hue]{
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--hue) 9%,transparent),transparent 42%),
    var(--surface);
}
/* الارتفاع والوهج عند التمرير — على البطاقة وحدها، لا على صفوف القوائم،
   فالبطاقات قليلة والصفوف قد تبلغ المئات. */
@media (hover:hover){
  .card[data-hue]:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--hue) 34%,var(--line));
    box-shadow:var(--lift),0 0 0 1px color-mix(in srgb,var(--hue) 22%,transparent),
               0 16px 44px -26px color-mix(in srgb,var(--hue) 65%,transparent);
  }
}
.card+.card{margin-top:var(--s4)}
.card-head{display:flex;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s4)}
.card-head .ico{
  flex:0 0 auto;width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;font-size:20px;line-height:1;
  /* شريحة مملوءة بتدرّج القسم: أبرز عنصر ملوّن بالبطاقة، وأكثرها إفادة —
     تُعرف القسم من زاوية العين قبل قراءة العنوان. */
  background:linear-gradient(140deg,var(--hue,var(--accent)),var(--hue2,var(--accent-2)));
  border:0;
  box-shadow:0 6px 18px -8px color-mix(in srgb,var(--hue,var(--accent)) 70%,transparent),
             inset 0 1px 0 rgba(255,255,255,.28);
}
/* شريط لوني رفيع أعلى البطاقة الملوّنة — يعرّف القسم قبل قراءة عنوانه */
.card[data-hue]{overflow:hidden}
.card[data-hue]::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;
  background:linear-gradient(90deg,var(--hue),var(--hue2) 55%,color-mix(in srgb,var(--hue) 30%,transparent));
}
.card-title{font-size:17px;font-weight:740;letter-spacing:-.015em}
.accent-text{color:var(--accent-text)}
.card-sub{color:var(--text-2);font-size:13.5px;margin-top:2px}
.card-flat{box-shadow:none;background:var(--surface-2)}
.grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grid-2{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* — زر — */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:10px 16px;min-height:40px;
  background:var(--surface-2);color:var(--text);
  border:1px solid var(--line-2);border-radius:var(--r2);
  font-weight:600;font-size:14px;cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover:not(:disabled){background:var(--surface-3);border-color:var(--line-2)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:transparent;color:#fff}
.btn-primary:hover:not(:disabled){background:#7d6dfa}
.btn-danger{background:var(--err-soft);border-color:rgba(228,87,79,.45);color:var(--danger-text)}
.btn-danger:hover:not(:disabled){background:rgba(228,87,79,.22)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn-ghost:hover:not(:disabled){background:var(--surface-2);color:var(--text)}
.btn-sm{min-height:32px;padding:6px 12px;font-size:13px;border-radius:var(--r1)}
.btn-icon{padding:0;width:38px;min-height:38px;flex:0 0 auto}
.btn-block{width:100%}
/* 🖼️ شبكة اختيار الإيموجي/الستكر — بلاطات مربّعة موحّدة، والصورة داخلها
   تحفظ نسبتها الحقيقية (contain) فما تتمدّد ولا تتشوّه. */
.expr-grid{display:flex;flex-wrap:wrap;gap:6px;max-height:340px;overflow:auto;padding:4px;align-content:flex-start}
.expr-tile{width:46px;height:46px;padding:0;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r1);cursor:pointer;transition:border-color .12s,background .12s}
.expr-tile:hover{background:var(--surface);border-color:var(--line-2)}
.expr-tile-lg{width:74px;height:auto;min-height:74px;flex-direction:column;gap:4px;padding:8px}
/* 🎨 منتقي الألوان */
.clr-swatch{width:38px;height:38px;flex:0 0 auto;border-radius:var(--r1);border:1px solid var(--line-2)}
.clr-presets{display:flex;flex-wrap:wrap;gap:6px}
.clr-preset{width:30px;height:30px;flex:0 0 auto;border-radius:8px;border:1px solid rgba(255,255,255,.14);cursor:pointer;padding:0;transition:transform .1s}
.clr-preset:hover{transform:scale(1.08)}
/* 📱 على اللمس: هدف 40px على الأقل (المعيار الذي يفحصه layout-audit) */
@media (pointer:coarse),(max-width:600px){.clr-preset{width:40px;height:40px;border-radius:10px}}
.clr-sq{position:relative;width:100%;height:150px;border-radius:var(--r1);border:1px solid var(--line);cursor:crosshair;touch-action:none;overflow:hidden}
.clr-sq-thumb{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.5);transform:translate(-50%,-50%);pointer-events:none}
.clr-hue{-webkit-appearance:none;appearance:none;width:100%;height:16px;border-radius:8px;border:1px solid var(--line);padding:0;cursor:pointer;
  background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}
.clr-hue::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.5);cursor:pointer}
.clr-hue::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.4);cursor:pointer}
.btn .spin{
  width:14px;height:14px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* — حقل — */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.label{font-size:13.5px;font-weight:600;color:var(--text)}
.hint{font-size:12.5px;color:var(--text-2);line-height:1.55}
.input,.select,.textarea{
  width:100%;padding:10px 12px;min-height:42px;
  background:var(--surface-2);color:var(--text);
  border:1px solid var(--line-2);border-radius:var(--r2);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.input:hover,.select:hover,.textarea:hover{border-color:var(--line-2)}
.input:focus,.select:focus,.textarea:focus{
  outline:0;border-color:var(--accent);background:var(--surface);
  box-shadow:var(--ring);
}
.textarea{min-height:96px;resize:vertical;line-height:1.6}
.select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 49%,var(--text-2) 50%),linear-gradient(-45deg,transparent 49%,var(--text-2) 50%);
  background-size:6px 6px;background-repeat:no-repeat;
  background-position:calc(100% - 18px) 19px,calc(100% - 12px) 19px;
  padding-inline-end:38px;
}
html[dir="rtl"] .select{background-position:18px 19px,12px 19px;padding-inline-end:12px;padding-inline-start:38px}
.input-err{border-color:var(--err)!important}
.field-err{color:var(--err);font-size:12.5px}
.with-btn{display:flex;gap:var(--s2);align-items:stretch}
.with-btn .input{flex:1 1 auto}

/* — مفتاح تشغيل — */
.switch{display:inline-flex;align-items:center;gap:var(--s3);cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{
  flex:0 0 auto;width:46px;height:27px;border-radius:var(--rf);
  background:var(--surface-3);border:1px solid var(--line-2);
  position:relative;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.switch .track::after{
  content:"";position:absolute;top:2px;inset-inline-start:2px;
  width:21px;height:21px;border-radius:50%;background:var(--knob);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.switch input:checked+.track{
  background:var(--g-accent);border-color:transparent;
  box-shadow:0 4px 14px -6px rgba(111,92,255,.8);
}
.switch input:checked+.track::after{background:#fff;transform:translateX(19px)}
html[dir="rtl"] .switch input:checked+.track::after{transform:translateX(-19px)}
.switch input:focus-visible+.track{outline:2px solid var(--accent);outline-offset:2px}
.switch input:disabled+.track{opacity:.45}

/* — مجموعة أزرار (اختيار واحد) — */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r2);padding:3px;gap:2px;flex-wrap:wrap}
.seg button{
  border:0;background:transparent;color:var(--text-2);
  padding:7px 13px;border-radius:calc(var(--r2) - 3px);
  font-size:13.5px;font-weight:650;cursor:pointer;min-height:34px;
}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{
  background:var(--g-accent);color:#fff;
  box-shadow:0 6px 16px -10px rgba(111,92,255,.9),inset 0 1px 0 rgba(255,255,255,.2);
}

/* — شرائح ووسوم — */
/* 🏷️ شرائح الوسوم: الوسم نفسه + اسمه المقروء (لا يظهر بالتمرير وحده) */
.tok-chip{min-height:30px;padding:4px 10px;gap:6px;font-weight:600}
.tok-chip .mono{font-size:12px;color:var(--text)}
.tok-lbl{font-size:11.5px;font-weight:500;color:var(--text-3);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;min-height:34px;border-radius:var(--rf);
  background:var(--surface-2);border:1px solid var(--line);
  font-size:12.5px;font-weight:650;color:var(--text-2);
  cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.chip:hover{color:var(--text);border-color:var(--line-2)}
/* ملاحظة: ما نلوّن الإيموجي نفسه — الإيموجي رسم ملوّن أصلًا، وتلوين نصّه
   ما يغيّر شكله ويكسر قياس التباين بلا فايدة. اللون يجي من خلفية الشريحة. */
.chip[aria-pressed="true"]{
  background:color-mix(in srgb,var(--hue,var(--accent)) var(--tint),var(--surface));
  border-color:color-mix(in srgb,var(--hue,var(--accent)) var(--tint-line),var(--line));
  color:var(--text);
}
.chip-x{border:0;background:transparent;color:inherit;cursor:pointer;padding:0 0 0 2px;font-size:14px;line-height:1}
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--rf);font-size:11.5px;font-weight:700;letter-spacing:.01em}
.tag-ok{background:var(--ok-soft);color:var(--ok)}
.tag-warn{background:var(--warn-soft);color:var(--warn)}
.tag-err{background:var(--err-soft);color:var(--err)}
.tag-info{background:var(--info-soft);color:var(--info)}
/* 🌓 بالفاتح ألوان الحالة الزاهية (#22c55e…) على خلفيتها الشفافة تحت حدّ WCAG
   (٢٫٣ للأخضر) — نصّ الشارة يُغمَّق، والخلفية تبقى كما هي */
[data-theme="light"] .tag-ok{color:#13703a}
[data-theme="light"] .tag-warn{color:#875400}
[data-theme="light"] .tag-err{color:#b4231a}
[data-theme="light"] .tag-info{color:#0b628f}
.tag-mute{background:var(--surface-3);color:var(--text-2)}
.tag-accent{background:var(--accent-soft);color:var(--accent-text)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}

/* — إحصائية — */
/* 🐞 على الجوال يظهر عمودان، فثلاث بلاطات تعطي صفًّا ناقصًا وفراغًا
   واضحًا جنب البلاطة الأخيرة. الفردية الأخيرة تمتدّ على العرض كامله. */
.stats{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stats>*:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:900px){ .stats>*:last-child:nth-child(odd){grid-column:auto} }
.stat{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r2);padding:var(--s4);
  display:flex;gap:var(--s3);align-items:center;
}
.stat{transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
@media (hover:hover){
  .stat[data-hue]:hover{
    border-color:color-mix(in srgb,var(--hue) 34%,var(--line));
    background:color-mix(in srgb,var(--hue) 7%,var(--surface-2));
  }
}
.stat .em{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:18px;
  background:linear-gradient(140deg,var(--hue,var(--accent)),var(--hue2,var(--accent-2)));
  border:0;
  box-shadow:0 5px 14px -7px color-mix(in srgb,var(--hue,var(--accent)) 70%,transparent),
             inset 0 1px 0 rgba(255,255,255,.26);
}
.stat .k{font-size:12.5px;color:var(--text-2);font-weight:600}
.stat .v{font-size:24px;font-weight:780;letter-spacing:-.02em;margin-top:1px;}
.stat .v small{font-size:13px;font-weight:600;color:var(--text-3)}

/* — شريط تقدّم — */
.meter{height:8px;border-radius:var(--rf);background:var(--surface-3);overflow:hidden}
.meter i{display:block;height:100%;border-radius:var(--rf);background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s var(--ease)}
.meter.warn i{background:linear-gradient(90deg,var(--warn),#f0c14b)}
.meter.err i{background:linear-gradient(90deg,var(--err),#ef7a72)}

/* — قائمة صفوف — */
.list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;background:var(--surface)}
.item{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);min-width:0}
.item:last-child{border-bottom:0}
/* الصفوف تبقى مسطّحة بلا ظلال ولا مرشّحات: قائمة الأوامر قد تبلغ ٢١٧
   صفًّا، وكل ظلّ هنا يُحسب مرّتين ومئتين مع كل تمرير. */
.item{transition:background var(--dur-fast) var(--ease)}
.item:hover{background:color-mix(in srgb,var(--accent) 6%,var(--surface-2))}
.item-main{min-width:0;flex:1 1 auto}
.item-title{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.item-sub{color:var(--text-2);font-size:12.5px;margin-top:2px}
.item-act{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}
.item.on{box-shadow:inset 3px 0 0 var(--accent);background:color-mix(in srgb,var(--accent) 5%,transparent)}
html[dir="rtl"] .item.on{box-shadow:inset -3px 0 0 var(--accent)}

/* — حالة فاضية — */
.empty{
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  padding:var(--s8) var(--s4);text-align:center;color:var(--text-2);
  border:1px dashed var(--line-2);border-radius:var(--r3);background:var(--surface-2);
}
.empty .em{font-size:30px;line-height:1}

/* — هيكل تحميل — */
.skel{background:var(--surface-2);border-radius:var(--r2);position:relative;overflow:hidden}
.skel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--surface-3),transparent);
  animation:sweep 1.2s infinite;
}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* — نافذة — */
.scrim{
  position:fixed;inset:0;z-index:80;
  background:rgba(6,7,11,.62);
  display:flex;align-items:center;justify-content:center;padding:var(--s4);
  animation:fade var(--dur) var(--ease);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  width:100%;max-width:560px;max-height:88vh;overflow:auto;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r4);box-shadow:var(--shadow-lg);
  padding:var(--s6);
  animation:pop .2s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.modal-wide{max-width:860px}
.modal-head{display:flex;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s4)}
.modal-foot{display:flex;gap:var(--s2);justify-content:flex-end;margin-top:var(--s6);flex-wrap:wrap}

/* — تنبيه عابر — */
.toasts{position:fixed;inset-block-end:calc(var(--s5) + env(safe-area-inset-bottom));inset-inline:0;z-index:120;display:flex;flex-direction:column;align-items:center;gap:var(--s2);pointer-events:none;padding:0 var(--s4)}
.toast{
  pointer-events:auto;max-width:440px;
  background:var(--surface);color:var(--text);
  border:1px solid var(--line-2);border-inline-start:3px solid var(--accent);
  border-radius:var(--r2);box-shadow:var(--shadow-lg);
  padding:11px var(--s4);font-size:14px;font-weight:600;
  animation:rise .22s var(--ease);
}
.toast.bad{border-inline-start-color:var(--err)}
.toast.good{border-inline-start-color:var(--ok)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.toast{font-size:13px;overflow-wrap:anywhere}

/* — 💾 الحفظ اليدوي — */
.draftbar{
  position:fixed;inset-inline:0;inset-block-end:0;z-index:110;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) var(--s5) calc(var(--s3) + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--line-2);box-shadow:var(--shadow-lg);
  animation:rise .18s var(--ease);
}
.draftbar-text{font-size:14px;font-weight:700}
body.has-draftbar .page{padding-bottom:calc(var(--s9) + 64px)}
body.has-draftbar .toasts{inset-block-end:calc(var(--s5) + 64px + env(safe-area-inset-bottom))}
.is-dirty{position:relative}
.is-dirty > .label::after,.is-dirty > .row-tight > .label::after,
.card-flat.is-dirty > .switch .label::after,
.card.is-dirty > .card-head .card-title::after{content:' •';color:var(--warn)}
.has-err .input,.has-err .textarea,.has-err .select{border-color:var(--err)}
.draft-err{display:block;margin-top:4px;font-size:12.5px;color:var(--err);font-weight:600}
.draft-save{white-space:nowrap;flex:none}
body.has-modal .draftbar{display:none}
.draft-save[hidden]{display:none}

/* — تنبيه ثابت داخل الصفحة — */
.note{
  display:flex;gap:var(--s3);padding:var(--s3) var(--s4);
  border-radius:var(--r2);border:1px solid var(--line);
  border-inline-start:3px solid var(--accent);
  background:var(--surface-2);font-size:13.5px;line-height:1.6;
}
.note-warn{border-inline-start-color:var(--warn)}
.note-err{border-inline-start-color:var(--err)}
.note-info{border-inline-start-color:var(--info)}
/* 🐞 `note(..., 'good')` مستعملة بالواجهة (ملاحظة نطاق ميزة الشكل مثلًا)
   وما كان لها أي قاعدة — فتطلع بلون الملاحظة العادي، والمعنى «هذا جيد»
   يضيع. */
.note-good{border-inline-start-color:var(--ok);background:var(--ok-soft);border-color:rgba(34,197,94,.3)}
.note .em{flex:0 0 auto;font-size:16px}
.note-warn{background:var(--warn-soft);border-color:rgba(232,169,58,.4)}
.note-err{background:var(--err-soft);border-color:rgba(228,87,79,.4)}
.note-info{background:var(--info-soft);border-color:rgba(58,160,232,.35)}

/* ═══════════════════════ الهيكل العام ══════════════════════════════════ */

.shell{display:flex;min-height:100vh}
@supports (min-height:100dvh){ .shell{min-height:100dvh} }

/* الشريط الجانبي */
.side{
  flex:0 0 264px;width:264px;
  background:color-mix(in srgb,var(--bg-2) 92%,var(--accent));
  border-inline-end:1px solid var(--line);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
@supports (height:100dvh){ .side{height:100dvh} }
.side-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s5) var(--s4);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:var(--s2);font-weight:750;font-size:17px;letter-spacing:-.02em}
/* شعار البوت نفسه بخلفية شفّافة — فيصحّ على الداكن والفاتح معًا،
   والوهج من `drop-shadow` لا من مربّع خلفه فلا حدود مرئية */
.brand .mark{width:30px;height:30px;background:none;border:0;border-radius:0;
  object-fit:contain;display:block;flex:0 0 auto;
  filter:drop-shadow(0 2px 7px rgba(139,92,246,.45))}
.nav{padding:var(--s3);overflow:auto;flex:1 1 auto}
.nav-group{font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding:var(--s4) var(--s3) var(--s2)}
.nav-item{
  position:relative;
  display:flex;align-items:center;gap:var(--s3);width:100%;
  padding:10px var(--s3);margin-bottom:2px;min-height:42px;
  border:0;background:transparent;border-radius:var(--r2);
  color:var(--text-2);font-size:14.5px;font-weight:650;cursor:pointer;text-align:start;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
/* التبويب النشط: خلفية متدرّجة خفيفة + شريط لوني على حرفه الداخلي.
   الشريط منطقي للاتجاهين: `inset-inline-start` يقلب نفسه بالعربية. */
.nav-item[aria-current="page"]{
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 22%,transparent),
                             color-mix(in srgb,var(--accent-2) 8%,transparent));
  color:var(--text);
}
html[dir="rtl"] .nav-item[aria-current="page"]{
  background:linear-gradient(270deg,color-mix(in srgb,var(--accent) 22%,transparent),
                             color-mix(in srgb,var(--accent-2) 8%,transparent));
}
.nav-item[aria-current="page"]::before{
  content:"";position:absolute;inset-block:8px;inset-inline-start:0;
  width:3px;border-radius:var(--rf);background:var(--g-vivid);
}
.nav-item .em{
  font-size:15px;line-height:1;flex:0 0 auto;
  width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(140deg,
    color-mix(in srgb,var(--hue,var(--accent)) 30%,var(--surface-2)),
    color-mix(in srgb,var(--hue2,var(--accent-2)) 18%,var(--surface-2)));
  border:1px solid color-mix(in srgb,var(--hue,var(--accent)) 26%,transparent);
}
.nav-item[aria-current="page"] .em{
  background:color-mix(in srgb,var(--hue,var(--accent)) 30%,var(--surface));
}
.nav-item .cnt{margin-inline-start:auto;font-size:11.5px;font-weight:700;color:var(--text-3);background:var(--surface-3);border-radius:var(--rf);padding:1px 8px}
.side-foot{padding:var(--s3);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s2)}

/* المحتوى */
.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.top{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s5);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
@supports not (background:color-mix(in srgb,red 50%,blue)){ .top{background:var(--bg)} }
.page{padding:var(--s6) var(--s5) var(--s9);width:100%;max-width:1120px;margin:0 auto;flex:1 1 auto}
/* 🐞 كانت ترويسة الصفحة **بطاقة**: خلفية وحدود وتدرّج حول ثلاثة أسطر نصّ.
   على الجوال تطلع صندوقًا أبيض فاضيًا يأكل نصف الشاشة قبل أول محتوى —
   وهذا أظهر ما بالصورة اللي أرسلها صاحب البوت. العنوان نصّ على الصفحة،
   وخطّ رفيع ملوّن تحته يكفي للانتماء للقسم. */
.page-head{
  margin-bottom:var(--s5);position:relative;
  padding:0 0 var(--s4);
  border-bottom:1px solid var(--line);
}
.page-head::after{
  content:"";position:absolute;inset-inline-start:0;bottom:-1px;
  width:64px;height:3px;border-radius:3px;
  background:var(--g-vivid);
}
.page-head h1{letter-spacing:-.025em}
.page-head .eyebrow{font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.page-head p{color:var(--text-2);margin-top:6px;max-width:70ch}
.section{margin-top:var(--s7)}
.section>h3{margin-bottom:var(--s2)}
.section>.sub{color:var(--text-2);font-size:13.5px;margin-bottom:var(--s4);max-width:70ch}

/* مبدّل السيرفر */
.gpick{
  display:flex;align-items:center;gap:var(--s2);
  padding:6px 10px;border-radius:var(--r2);
  background:var(--surface-2);border:1px solid var(--line);
  cursor:pointer;font-weight:650;font-size:13.5px;max-width:240px;
}
.gpick:hover{border-color:var(--line-2)}
.gicon{width:26px;height:26px;border-radius:8px;flex:0 0 auto;background:var(--surface-3);display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--text-2);overflow:hidden}
.gicon img{width:100%;height:100%;object-fit:cover}

/* زر القائمة بالجوال */
.burger{display:none}

/* ═══════════════════════ الاستجابة ════════════════════════════════════ */

@media (max-width:1023px){
  .side{
    position:fixed;inset-block:0;inset-inline-start:0;z-index:90;
    transform:translateX(-100%);transition:transform .22s var(--ease);
    box-shadow:var(--shadow-lg);
  }
  html[dir="rtl"] .side{transform:translateX(100%)}
  .side.open{transform:none!important}
  .burger{display:inline-flex}
  .page{padding:var(--s5) var(--s4) var(--s9)}
  .top{padding:var(--s3) var(--s4)}
}
@media (max-width:560px){
  body{font-size:14.5px}
  /* ============================================================================
   *  👆 أهداف اللمس على الجوال
   * --------------------------------------------------------------------------
   *  🐞 مدقّق التخطيط أبلغ عن ٦٣ هدفًا تحت الأربعين بكسلًا: الشرائح ٣٢px
   *  وأزرار المقطع ٣٦px والأزرار الصغيرة ٣٢px. الإصبع أعرض من ذلك، فيضغط
   *  الشخص جارها ويغيّر إعدادًا لم يقصده. الحدّ الموصى به أربعون، ويُطبَّق
   *  على الشاشات الصغيرة وحدها فسطح المكتب يبقى مضغوطًا كما هو.
   * ========================================================================== */
  .chip{min-height:40px;padding:9px 14px;font-size:13px}
  .seg button{min-height:40px;padding:10px 14px}
  .seg{padding:4px}
  .btn-sm{min-height:40px;padding:10px 14px;font-size:13.5px}
  .btn-icon{width:42px;min-height:42px}
  /* 🐞 زر الإزالة داخل الشريحة كان ١٧×١٦px على الجوال: يُضغط بالخطأ
     أو لا يُصاب أصلًا. الشريحة نفسها ـ٤٠px، فيرتفع معها بلا توسيع صفّ. */
  .chip-x{padding:0 6px;font-size:16px;min-width:40px;min-height:40px;margin-inline-start:2px;display:inline-flex;align-items:center;justify-content:center}
  /* والشريحة تُضيق حشوتها الرأسية حين تحمل زرّ إزالة، فيكبر الهدف بلا شريحة ضخمة */
  .chip:has(.chip-x){padding-block:2px}
  .tag{padding:4px 10px;font-size:12px}
  .card{padding:var(--s4);border-radius:var(--r2)}
  .modal{padding:var(--s5);border-radius:var(--r3);max-height:92vh}
  .stats{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
  .grid{grid-template-columns:1fr}
  .item{flex-wrap:wrap}
  .item-act{width:100%;justify-content:flex-end}
  .gpick{max-width:150px}
  .btn{padding:10px 14px}
}

/* صفحة الدخول */
.gate{min-height:100vh;display:grid;place-items:center;padding:var(--s6) var(--s4);background:var(--bg);background-image:var(--glow)}
@supports (min-height:100dvh){ .gate{min-height:100dvh} }
.gate-card{width:100%;max-width:460px;text-align:center}
.gate-card .mark{
  width:96px;height:96px;margin:0 auto var(--s5);
  background:none;border:0;border-radius:0;box-shadow:none;
  object-fit:contain;display:block;
  filter:drop-shadow(0 16px 36px rgba(139,92,246,.55));
}

/* شبكة اختيار السيرفرات */
/* قائمة السيرفرات: بطاقة واحدة تضمّ صفوفًا بفواصل رفيعة — بدل ستّ بطاقات
   عائمة بظلال وفجوات. أكثف بنحو ٤٠٪ رأسيًا وأسهل مسحًا بالعين. */
.glist{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r3);box-shadow:var(--shadow);overflow:hidden;
}
.gcard{
  display:flex;align-items:center;gap:var(--s3);width:100%;text-align:start;
  padding:var(--s3) var(--s4);cursor:pointer;
  background:transparent;border:0;border-top:1px solid var(--line);
  transition:background var(--dur) var(--ease);
}
.glist .gcard:first-child{border-top:0}
.gcard{position:relative}
.gcard::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;
  background:var(--g-vivid);opacity:0;transition:opacity var(--dur) var(--ease);
}
.gcard:hover{background:color-mix(in srgb,var(--accent) 7%,var(--surface-2))}
.gcard:hover::before{opacity:1}
.gcard:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.gcard .gicon{width:40px;height:40px;border-radius:var(--r2);font-size:15px}
.gcard-go{
  display:grid;place-items:center;color:var(--text-3);flex:0 0 auto;
  transition:color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.gcard:hover .gcard-go{color:var(--accent-text)}
/* الأزرار القصيرة ما تلفّ سطرين — «Sign out» كان ينكسر نصفين بالصورة */
.top .btn{white-space:nowrap}
.top .seg button{white-space:nowrap}

/* 🐞 الأيقونة المتجهية داخل زر مرن كانت تنضغط لعرض 8px (الارتفاع 18 والعرض
   8) فتطلع كشرطة باهتة. `flex:0 0 auto` يمنع الانضغاط، و`display:block`
   يشيل فراغ السطر الأساسي تحتها. */
.btn svg,.gcard-go svg{flex:0 0 auto;display:block}

/* ============================================================================
 *  👤 منتقي الكيانات — رتبة / عضو / روم بشكل ديسكورد
 * --------------------------------------------------------------------------
 *  كل المقاسات هنا مأخوذة من ديسكورد نفسه: الصورة ٢٨px، والنقطة ١٠px،
 *  والشريحة بحد ١٢px — فالصف يقرأ مثل قائمة أعضاء حقيقية لا مثل جدول.
 * ========================================================================== */
.ent{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto}
.ent-compact{gap:7px}
.ent-av{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--surface-3);border:1px solid var(--line)}
.ent-av-none{display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--text-2)}
.ent-main{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.ent-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:isolate}
.ent-sub{font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ent-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 1px rgb(0 0 0 / .25) inset}
.ent-dot-sm{width:7px;height:7px}
.ent-hash{color:var(--text-3);font-weight:700;flex:0 0 auto}
.ent-chips{display:flex;gap:4px;margin-inline-start:auto;flex:0 0 auto;max-width:52%;overflow:hidden}
.ent-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;line-height:1;
  padding:3px 7px;border-radius:999px;background:var(--surface-3);
  border:1px solid var(--line);color:var(--text-2);max-width:130px}
.ent-chip .trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ent-chip-more{color:var(--text-3)}
.ent-tag{font-size:10px;padding:2px 6px;border-radius:6px;background:var(--surface-3);
  border:1px solid var(--line);color:var(--text-3);flex:0 0 auto}

/* الزر المغلق — يعرض المختار كما يظهر بديسكورد */
.ent-btn{display:flex;align-items:center;gap:8px;width:100%;text-align:start;
  padding:9px 12px;border-radius:12px;background:var(--surface-2);
  border:1px solid var(--line);color:var(--text);cursor:pointer;
  transition:border-color .15s, background .15s}
.ent-btn:hover{border-color:var(--line-2);background:var(--surface-3)}
.ent-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ent-caret{margin-inline-start:auto;color:var(--text-3);flex:0 0 auto}
.ent-add{align-self:flex-start}

/* القائمة داخل النافذة */
.ent-list{max-height:min(52vh,420px);overflow:auto;display:flex;flex-direction:column;gap:2px;
  border:1px solid var(--line);border-radius:12px;padding:6px;background:var(--surface)}
.ent-row{display:flex;align-items:center;gap:8px;width:100%;text-align:start;
  padding:7px 9px;border-radius:10px;background:transparent;border:0;
  color:var(--text);cursor:pointer;font:inherit}
.ent-row:hover{background:var(--surface-3)}
.ent-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ent-row.is-on{background:color-mix(in srgb, var(--accent) 14%, transparent)}
.ent-check{margin-inline-start:auto;color:var(--accent);font-weight:700;flex:0 0 auto}

/* المختار بقائمة متعددة */
.ent-picked{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--line)}

@media (max-width:520px){
  .ent-chips{display:none}          /* الشرائح تزحم الصف على الجوال */
  .ent-list{max-height:60vh}
}