/* ══════════════════════════════════════════════════════════════
   tf.css — نظام التصميم الموحّد · v330 · v525 رموز الهويّات الخمس
   TakeFlow Tv - تصميم وتطوير محمد قندقلي

   البنية بثلاث طبقات:
   §١ الرموز      — امتداد للثيمات الحية. كل الجديد ببادئة --tf-
                    حتى ما يصطدم بمتغيرات البرنامج أبداً.
   §٢ المكوّنات   — الكتالوج الرسمي (.tf-*): بتستهلك الرموز بس،
                    ولا لون مكتوب بالكود جوّاتها.
   §٣ الموحِّد    — بيعطي أزرار البرنامج الموجودة الجلد الجديد
                    (زجاج + ضغطة scale) بلا ما يلمس ولا سطر HTML.

   المفتاح الرئيسي: كل التحويل الشامل (خط · نصف قطر · هالة · موحِّد)
   محصور تحت body.tf-on — شيل الصنف وبيرجع كل شي متل ما كان.

   قواعد صارمة (من دروس دفعنا حقّها):
   • backdrop-filter الحقيقي لطبقة التحكّم بس (نوافذ · قشور · أشرطة).
     الأزرار والكروت المتكرّرة: زجاج بصري بلا blur — شفافية + حدّ لمّاع.
   • ممنوع أي عنصر fixed (Scrim/Dialog) جوّا سلف عليه backdrop-filter
     أو filter — بيعمل containing block وبيكسر التموضع. النوافذ دايماً
     أولاد مباشرين للـbody.
   • الهالة بلا filter:blur — الـradial-gradient ناعم بطبيعتو.
   • ستوديو المرجع (tfs-*) بهويتو النحاسية المستقلة — خارج الموحِّد عمداً.
   ══════════════════════════════════════════════════════════════ */

/* ═══════════════ §١ · الرموز ═══════════════ */

/* الافتراضي — بيخدم كل الثيمات الغامقة (الافتراضي · blue · breaking · night · glass) */
:root{
  /* ثلاثي الغلاس: سطح شفاف · حدّ · لمعة الحدّ الداخلي */
  --tf-glass: rgba(255,255,255,.055);
  --tf-gl:    rgba(255,255,255,.13);
  --tf-ghi:   rgba(255,255,255,.2);
  /* ألوان ناقصة بالثيمات الحية */
  --tf-warn:   #e8a33d;
  --tf-purple: #9b7ede;
  /* v621 — --tf-accent-ink صار اسماً بديلاً لـ--accent-ink في tf-themes.css (نظامٌ واحد للحبر) */
  /* مشتقّات — بتنحسب من الثيم، ما بتتكتب باليد */
  --tf-accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --tf-accent-line: color-mix(in srgb, var(--accent) 42%, var(--border));
  /* الخط: نص ٥٠٠ · تسميات ٦٠٠ · عناوين ٧٠٠ */
  --tf-disp: 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif;
  --tf-mono: 'IBM Plex Mono', 'Share Tech Mono', ui-monospace, monospace;
  --tf-w-body: 500; --tf-w-label: 600; --tf-w-head: 700;
  --tf-pill: 100px;
  /* قشرة المساعدين — موحّدة للأقسام كلها */
  --tf-shell-w: min(1060px, 96vw);
  --tf-shell-h: min(86vh, 860px);
  --tf-shell-side: 232px;
}
/* الفاتحة (light · glasslight · paper · magazine): الغلاس أبيض كثيف
   والحبر أبيض فوق الأكسنتات الدافية — v319: كانت مغطاية light بس،
   فالمجلة والصحيفة كانوا ياخدوا غلاس الغامق (اكسات بيضا ضايعة) */
/* v525 — «ورق النشرة» و«الفجر» فاتحان أيضاً: كانا يأخذان غلاس الغامق
   (أبيض ٥٪ فوق أبيض) فتختفي الصناديق والحدود وتُقرأ الصفحة باهتة.
   محمد: «الثيمات ما عم بكونوا واضحين». */
body[data-theme="light"], body[data-theme="glasslight"],
body[data-theme="paper"], body[data-theme="magazine"],
body[data-theme="script"], body[data-theme="dawn"]{
  /* v320 — منطق الفاتح الصح: أبيض على أبيض بيختفي (أزرار «سكّر» والحذف
     بصور محمد). التعبئة غامقة شفافة خفيفة والحدود أغمق — واللمعة
     الداخلية بتضل بيضا (هي الضو). هيك الزر مبين عكل سطح فاتح. */
  /* v330 — الغلاس الفاتح: التعبئة الشفافة الصرفة كانت بتخلّي الأسطح
     تبهت فوق الخلفيات الفاتحة. صارت تعبئة بيضا كثيفة + حدود أغمق —
     السطح بيبيّن مرسوم مش مغسول، والنص فوقو بيقرا مضبوط. */
  --tf-glass: color-mix(in srgb, #fff 72%, var(--surface));
  --tf-gl:    rgba(28,22,10,.20);
  --tf-ghi:   rgba(255,255,255,.95);
  --tf-warn:  #b87d14;
  --tf-purple:#7350bd;
}
/* v621 — أحبار الثيمات (العاجل · الذهبيّ الفاتح · النحاسيّ · هويّات التمبلت والغرفة) انتقلت إلى
   --accent-ink في كتلة كلّ ثيم في tf-themes.css — بقيمها نفسها. */
/* الزجاجي: غلاس أوضح شوي لأن الخلفية متحركة */
body[data-theme="glass"]{
  --tf-glass: rgba(255,255,255,.07);
  --tf-gl:    rgba(255,255,255,.16);
  --tf-ghi:   rgba(255,255,255,.24);
}

/* ═══════════════ §١٫٥ · المفتاح الرئيسي ═══════════════ */

/* نصف القطر الموحّد: ١٢px — بيلحق كل صنف بيستهلك var(--radius) تلقائياً */
body.tf-on{ --radius: 12px; }

/* الخط: قلب Cairo → IBM Plex Sans Arabic بوزن ٥٠٠ (الـ٤٠٠ ضعيف بالعربي) */
body.tf-on[data-lang="ar"]{
  font-family: var(--tf-disp);
  font-weight: var(--tf-w-body);
}

/* الهالة الملوّنة تحت الصفحة — بلا filter وبلا animation: كلفة صفر.
   بتلوّن حالها من رموز الثيم فبتنسجم مع كل ثيم لحالها.
   z-index:-1 بترسم فوق خلفية الـbody وتحت المحتوى.
   ثيم glass مستثنى — عندو هالتو المتحركة الخاصة (::before) وما منكرّر. */
body.tf-on:not([data-theme="glass"])::after{
  content:''; position: fixed; inset: -12%; z-index: -1; pointer-events: none;
  opacity: .5;
  background:
    radial-gradient(48rem 32rem at 82% 0%,  color-mix(in srgb, var(--accent)    16%, transparent), transparent 66%),
    radial-gradient(42rem 30rem at 8% 22%,  color-mix(in srgb, var(--info)      12%, transparent), transparent 64%),
    radial-gradient(36rem 28rem at 52% 86%, color-mix(in srgb, var(--tf-purple) 10%, transparent), transparent 66%);
}
body.tf-on:is([data-theme="light"],[data-theme="glasslight"],[data-theme="paper"],[data-theme="magazine"],[data-theme="script"],[data-theme="dawn"])::after{ opacity: .35; }

/* ═══════════════ §٢ · المكوّنات ═══════════════ */

/* ── زر · Button ──
   زجاج بصري بلا backdrop-filter (عنصر متكرّر بالمئات).
   الحدّ اللمّاع الداخلي هو الغلاس، والضغطة انكماش scale(.965) —
   بلا مكعّب وبلا ظل سفلي نهائياً. */
.tf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--tf-disp); font-size:12.5px; font-weight:var(--tf-w-label); line-height:1;
  padding:10px 17px; border-radius:var(--radius,12px); cursor:pointer;
  color:var(--text); background:var(--tf-glass); border:1px solid var(--tf-gl);
  box-shadow:inset 0 1px 0 0 var(--tf-ghi);
  transition:transform .13s cubic-bezier(.2,.9,.3,1), filter .15s,
             border-color .15s, color .15s, background .15s;
}
.tf-btn:hover{ border-color:var(--accent); color:var(--accent-fg); filter:brightness(1.1); }
.tf-btn:active{ transform:scale(.965); filter:brightness(1.2); }
.tf-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.tf-btn[disabled]{ opacity:.35; pointer-events:none; }
.tf-btn svg{ width:15px; height:15px; flex-shrink:0; }

.tf-btn--primary{
  color:var(--tf-accent-ink); background:var(--accent); border-color:transparent;
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.32),
             0 8px 22px -10px color-mix(in srgb, var(--accent) 75%, transparent);
}
.tf-btn--primary:hover{ color:var(--tf-accent-ink); }
.tf-btn--danger{
  color:var(--danger); background:transparent;
  border-color:color-mix(in srgb, var(--danger) 45%, transparent); box-shadow:none;
}
.tf-btn--danger:hover{ color:var(--danger-ink); background:var(--danger); border-color:var(--danger); filter:none; }
/* على الهواء — الحالة الوحيدة يلي بتاخد أحمر مصمت */
.tf-btn--live{
  color:var(--danger-ink); background:var(--danger); border-color:transparent;
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.28),
             0 8px 22px -10px color-mix(in srgb, var(--danger) 75%, transparent);
}
.tf-btn--live:hover{ color:#fff; }
.tf-btn--ghost{ background:transparent; border-color:transparent; box-shadow:none; color:var(--text-muted); }
.tf-btn--ghost:hover{ background:var(--tf-glass); border-color:var(--tf-gl); }
.tf-btn--sm{ font-size:11px; padding:7px 12px; gap:5px; }
.tf-btn--sm svg{ width:13px; height:13px; }
.tf-btn--lg{ font-size:14.5px; padding:13px 26px; }

/* ── زر أيقونة · Icon Button — زر الإغلاق واحد بكل البرنامج ── */
.tf-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex-shrink:0; cursor:pointer;
  border-radius:var(--radius,12px); color:var(--text-muted);
  background:var(--tf-glass); border:1px solid var(--tf-gl);
  box-shadow:inset 0 1px 0 0 var(--tf-ghi);
  transition:transform .13s, border-color .15s, color .15s;
}
.tf-ico:hover{ color:var(--accent-fg); border-color:var(--accent); }
.tf-ico:active{ transform:scale(.94); }
.tf-ico:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.tf-ico svg{ width:16px; height:16px; }
.tf-ico--danger:hover{ color:var(--danger); border-color:var(--danger); }

/* ── منتقي مقاطع · Segmented Control ── */
.tf-seg{
  display:inline-flex; gap:3px; padding:3px; border-radius:var(--radius,12px);
  background:var(--tf-glass); border:1px solid var(--tf-gl);
}
.tf-seg button{
  font-family:var(--tf-disp); font-size:11.5px; font-weight:var(--tf-w-label); cursor:pointer;
  padding:6px 14px; border:none; border-radius:calc(var(--radius,12px) - 3px);
  background:transparent; color:var(--text-muted); transition:all .14s;
}
.tf-seg button[aria-pressed="true"]{ background:var(--accent); color:var(--tf-accent-ink); }
.tf-seg button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

/* ── رقاقة · Chip — فلتر بينكبس، النقطة بتضوي ── */
.tf-chip{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-family:var(--tf-disp); font-size:11.5px; font-weight:var(--tf-w-label);
  padding:6px 13px; border-radius:var(--tf-pill);
  color:var(--text-muted); background:var(--tf-glass); border:1px solid var(--tf-gl);
  transition:all .14s;
}
.tf-chip::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--border); transition:all .14s;
}
.tf-chip[aria-pressed="true"]{
  color:var(--text); border-color:var(--tf-accent-line); background:var(--tf-accent-soft);
}
.tf-chip[aria-pressed="true"]::before{
  background:var(--accent);
  box-shadow:0 0 7px color-mix(in srgb, var(--accent) 75%, transparent);
}
.tf-chip:hover{ border-color:var(--accent); }
.tf-chip:active{ transform:scale(.965); }

/* ── شارة · Badge — حالة للقراءة بس، ما بتنكبس ── */
.tf-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--tf-mono); font-size:9.5px; font-weight:600; letter-spacing:.05em;
  padding:3px 9px; border-radius:6px;
  color:var(--text-muted); background:var(--tf-glass); border:1px solid var(--tf-gl);
}
.tf-badge--ok{
  color:var(--success);
  background:color-mix(in srgb, var(--success) 11%, transparent);
  border-color:color-mix(in srgb, var(--success) 34%, transparent);
}
.tf-badge--warn{
  color:var(--tf-warn);
  background:color-mix(in srgb, var(--tf-warn) 11%, transparent);
  border-color:color-mix(in srgb, var(--tf-warn) 34%, transparent);
}
.tf-badge--live{
  color:var(--danger);
  background:color-mix(in srgb, var(--danger) 11%, transparent);
  border-color:color-mix(in srgb, var(--danger) 34%, transparent);
}

/* ── ختم · Stamp — مصدر موثّق، حدود متقطّعة متل ختم الحبر ── */
.tf-stamp{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--tf-mono); font-size:9px; font-weight:600; letter-spacing:.04em;
  padding:3px 10px; border-radius:6px;
  color:var(--text-muted); border:1px dashed var(--tf-gl);
}
.tf-stamp--verified{ color:var(--success); border-color:color-mix(in srgb, var(--success) 50%, transparent); }
.tf-stamp--major{ color:var(--accent-fg); border-color:var(--tf-accent-line); }

/* ── رقم تسلسلي · Serial (الاسم .tf-sn — .tf-serial محجوز بالبرنامج) ── */
.tf-sn{
  font-family:var(--tf-mono); font-size:9px; font-weight:600;
  letter-spacing:.1em; color:var(--text-muted); opacity:.85;
}

/* ── مؤشر · LED — جاهز · عم يشتغل · على الهواء ── */
.tf-led{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--border); flex-shrink:0; }
.tf-led--on{ background:var(--success); box-shadow:0 0 8px var(--success); }
.tf-led--busy{ background:var(--accent); animation:tf-pulse 1s ease-in-out infinite; }
.tf-led--live{ background:var(--danger); box-shadow:0 0 8px var(--danger); animation:tf-pulse 1.4s ease-in-out infinite; }
@keyframes tf-pulse{ 50%{ opacity:.3; } }

/* ── فيوميتر · Meter — ثقة المصدر · نسبة الإنجاز ── */
.tf-meter{ width:110px; height:7px; border-radius:5px; overflow:hidden; background:var(--tf-glass); border:1px solid var(--tf-gl); }
.tf-meter i{
  display:block; height:100%; border-radius:5px;
  background:linear-gradient(90deg, var(--tf-warn), var(--success)); transition:width .4s;
}

/* ── حقل · Field ── */
.tf-field{
  font-family:var(--tf-disp); font-size:13px; font-weight:var(--tf-w-body);
  padding:10px 14px; width:100%;
  border-radius:var(--radius,12px); background:var(--tf-glass);
  color:var(--text); border:1px solid var(--tf-gl); transition:border-color .15s, box-shadow .15s;
}
.tf-field::placeholder{ color:var(--text-muted); }
.tf-field:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ── مفتاح · Switch — RTL أصلي: inset-inline بيقلب لحالو، الـtransform يدوي ── */
.tf-switch{
  width:38px; height:21px; border-radius:var(--tf-pill); border:1px solid var(--tf-gl); cursor:pointer;
  position:relative; background:var(--tf-glass); transition:background .16s, border-color .16s; flex-shrink:0; padding:0;
}
.tf-switch::after{
  content:''; position:absolute; top:2px; inset-inline-start:2px; width:15px; height:15px;
  border-radius:50%; background:var(--text-muted); transition:transform .16s, background .16s;
}
.tf-switch[aria-pressed="true"]{ background:var(--success); border-color:var(--success); }
.tf-switch[aria-pressed="true"]::after{ background:#fff; transform:translateX(-17px); }
[dir="ltr"] .tf-switch[aria-pressed="true"]::after{ transform:translateX(17px); }
.tf-switch:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ── طبقة تعتيم · Scrim — ولد مباشر للـbody دايماً ── */
.tf-scrim{
  position:fixed; inset:0; z-index:230;
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  overscroll-behavior:contain;
}

/* ── نافذة · Dialog — غلاس حقيقي (قليلة بالشاشة فالكلفة مقبولة).
     ولد مباشر للـbody، والزر الرئيسي أول من اليمين دايماً. ── */
.tf-dialog{
  position:fixed; top:50%; inset-inline-start:50%; transform:translate(50%,-50%); z-index:240;
  width:min(440px, 94vw); border-radius:16px; overflow:hidden;
  background:var(--tf-glass); border:1px solid var(--tf-gl);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 20px 55px -24px rgba(0,0,0,.55), inset 0 1px 0 0 var(--tf-ghi);
}
[dir="ltr"] .tf-dialog{ transform:translate(-50%,-50%); }
.tf-dialog-h{
  display:flex; align-items:center; gap:9px; padding:12px 15px;
  font-size:13px; font-weight:var(--tf-w-head);
  border-bottom:1px solid var(--tf-gl);
}
.tf-dialog-b{
  padding:16px 15px; font-size:12.5px; font-weight:var(--tf-w-body);
  color:var(--text-muted); line-height:2;
  max-height:60vh; overflow:auto; overscroll-behavior:contain;
}
.tf-dialog-f{
  display:flex; gap:8px; padding:12px 15px;
  border-top:1px solid var(--tf-gl);
}

/* ── قشرة المساعد · Shell (الاسم .tf-shell — .tf-asst محجوز بالبرنامج) ── */
.tf-shell{
  position:fixed; top:50%; inset-inline-start:50%; transform:translate(50%,-50%); z-index:240;
  width:var(--tf-shell-w); height:var(--tf-shell-h);
  display:flex; overflow:hidden; border-radius:20px;
  background:var(--tf-glass); border:1px solid var(--tf-gl);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 20px 55px -24px rgba(0,0,0,.55), inset 0 1px 0 0 var(--tf-ghi);
}
[dir="ltr"] .tf-shell{ transform:translate(-50%,-50%); }
.tf-shell-side{
  width:var(--tf-shell-side); flex-shrink:0; overflow:auto; overscroll-behavior:contain;
  border-inline-end:1px solid var(--tf-gl);
}
.tf-shell-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.tf-shell-bar{
  display:flex; align-items:center; gap:9px; padding:11px 15px; flex-shrink:0;
  font-size:13px; font-weight:var(--tf-w-head);
  border-bottom:1px solid var(--tf-gl);
}
.tf-shell-body{ flex:1; overflow:auto; overscroll-behavior:contain; padding:15px; }
@media(max-width:760px){
  .tf-shell{ width:100vw; height:100dvh; border-radius:0; }
  .tf-shell-side{ display:none; }
}

/* ── v320 · نافذة tfPrompt/tfConfirm — كانت بلا ولا ستايل (زر التأكيد
     مخفي بصورة محمد). صارت نافذة النظام الرسمية: سكرِم + غلاس + أزرار. ── */
.tfp-back{position:fixed;inset:0;z-index:260;display:flex;align-items:center;justify-content:center;
  padding:18px;background:color-mix(in srgb,var(--bg) 55%,transparent);
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
  overscroll-behavior:contain}
.tfp{width:min(430px,94vw);border-radius:16px;overflow:hidden;
  background:var(--surface);border:1px solid var(--tf-gl);
  box-shadow:0 20px 55px -24px rgba(0,0,0,.5), inset 0 1px 0 0 var(--tf-ghi)}
.tfp-h{display:flex;align-items:center;gap:9px;padding:12px 15px;
  font-size:13.5px;font-weight:var(--tf-w-head);color:var(--text);
  border-bottom:1px solid var(--tf-gl)}
.tfp-h .asst-x{margin-inline-start:auto}
.tfp-b{padding:15px;font-size:12.5px;font-weight:var(--tf-w-body);
  color:var(--text);line-height:2}
.tfp-hint{margin:0 0 10px;font-size:11.5px;color:var(--text-muted)}
.tfp-in{width:100%;font-family:var(--tf-disp);font-size:13px;padding:10px 13px;
  border-radius:var(--radius,12px);background:var(--tf-glass);color:var(--text);
  border:1px solid var(--tf-gl)}
.tfp-in:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.tfp-f{display:flex;gap:8px;padding:12px 15px;border-top:1px solid var(--tf-gl)}
.tfp-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:var(--tf-disp);font-size:12.5px;font-weight:var(--tf-w-label);line-height:1;
  padding:11px 16px;border-radius:var(--radius,12px);
  color:var(--text);background:var(--tf-glass);border:1px solid var(--tf-gl);
  box-shadow:inset 0 1px 0 0 var(--tf-ghi);
  transition:transform .13s cubic-bezier(.2,.9,.3,1),filter .15s,border-color .15s}
.tfp-btn:hover{border-color:var(--accent)}
.tfp-btn:active{transform:scale(.965)}
.tfp-btn.pri{color:var(--tf-accent-ink);background:var(--accent);border-color:transparent;
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.32),
             0 8px 22px -10px color-mix(in srgb,var(--accent) 65%,transparent)}
.tfp-btn.danger,.tfp-btn.pri.danger{color:var(--danger-ink);background:var(--danger);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.28),
             0 8px 22px -10px color-mix(in srgb,var(--danger) 65%,transparent)}

/* ── أدوات مساعدة ── */
/* سطح زجاجي حقيقي — للأشرطة والطبقات العائمة بس، مش للكروت المتكرّرة */
.tf-glassy{
  background:var(--tf-glass); border:1px solid var(--tf-gl);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  box-shadow:inset 0 1px 0 0 var(--tf-ghi);
}
/* الحافة الملوّنة على طرف البوكس — بتنحط يدوياً وين بتلزم */
.tf-edge{ border-inline-start:3px solid var(--tf-accent-line); }
/* v318 — بوكس غلاس بهوية لونية (طلب محمد): اللون غسيل جوّا الزجاج نفسو —
   خلفية وحدود مغموسين باللون — بدل شريط لون مصمت فوق البوكس.
   الاستعمال: class="tf-tint" style="--tint:var(--info)" — وإذا ما حدّدت
   لون بياخد الأكسنت. بلا backdrop-filter فبتنحط عالكروت المتكرّرة براحتك. */
.tf-tint{
  background:color-mix(in srgb, var(--tint, var(--accent)) 9%, var(--tf-glass));
  border:1px solid color-mix(in srgb, var(--tint, var(--accent)) 32%, var(--tf-gl));
  box-shadow:inset 0 1px 0 0 color-mix(in srgb, var(--tint, var(--accent)) 22%, var(--tf-ghi));
}

/* ══════ v325 · البريد — العين تلاقي المهم فوراً ══════
   المشكلة يلي مسكها محمد: التلات أعمدة بنفس الوزن البصري فالمستخدم
   بيضيع. الحل مش إعادة بناء — تمييز صارخ بين المقروء وغير المقروء. */
body.tf-on .ml-row{ transition:background .14s, border-color .14s; }
/* غير المقروءة = الحدث: خلفية أوضح + شريط أكسنت جانبي */
body.tf-on .ml-row.unread{
  background:color-mix(in srgb, var(--accent) 7%, transparent);
  box-shadow:inset 3px 0 0 0 var(--accent);
}
body.tf-on [dir="ltr"] .ml-row.unread{ box-shadow:inset -3px 0 0 0 var(--accent); }
body.tf-on .ml-row.unread .ml-subj{ color:var(--text); }
body.tf-on .ml-row.unread .ml-prev{ color:var(--text-muted); opacity:.95; }
/* المقروءة بتخفت — التباين هو يلي بيوجّه العين */
body.tf-on .ml-row:not(.unread) .ml-who,
body.tf-on .ml-row:not(.unread) .ml-subj{ color:var(--text-muted); font-weight:500; }
body.tf-on .ml-row:not(.unread) .ml-prev{ opacity:.6; }
body.tf-on .ml-row:not(.unread) .ml-av{ opacity:.55; }
/* المفتوحة: إطار أكسنت كامل */
body.tf-on .ml-row.on{
  background:color-mix(in srgb, var(--accent) 13%, transparent);
  box-shadow:inset 3px 0 0 0 var(--accent), 0 0 0 1px var(--accent);
}
/* الصف تحت مؤشر الكيبورد */
body.tf-on .ml-row.kb{ outline:2px solid var(--accent); outline-offset:-2px; }
/* شريط الاختصارات */
.ml-keys{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:6px 11px;font-size:10.5px;
  color:var(--text-muted);border-block-end:1px solid var(--tf-gl,var(--border))}
.ml-keys kbd{font-family:var(--tf-mono);font-size:9.5px;padding:2px 6px;border-radius:5px;
  background:var(--tf-glass);border:1px solid var(--tf-gl);color:var(--text)}

/* ══════ v325 · الروابط ══════
   v333 — هالكتلة لازم تضل برّا مفتاح body.tf-on: الرابط يلي ما بيبيّن
   إنو رابط ما حدا بيكبسو، وهيدا بيصير على أي ثيم قديم. الشكل مش
   زينة هون — هو الإشارة الوحيدة إنو الشي قابل للكبس. */
.tf-link,.tf-ilink,.tf-path{
  color:var(--accent-fg); text-decoration:none; word-break:break-all;
  border-block-end:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.tf-link:hover,.tf-ilink:hover,.tf-path:hover{
  color:var(--accent2); border-block-end-color:var(--accent2);
}
.tf-ilink,.tf-path{
  display:inline-flex; align-items:center; gap:4px; border:none;
  padding:1px 7px; border-radius:6px; font-size:.94em;
  background:color-mix(in srgb, var(--accent) 13%, transparent);
}
.tf-path{ font-family:var(--tf-mono); font-size:.86em; color:var(--info);
  background:color-mix(in srgb, var(--info) 13%, transparent); }
.tf-path:hover{ color:var(--info); filter:brightness(1.15); }

/* ══════ v327 · الصفحة الرئيسية — الهوية الجديدة ══════
   بقية البرنامج انقلبت للغلاس والرئيسية ضلّت عالنمط القديم.
   هون منلبّسها: كروت زجاجية بلمعة داخلية وضغطة انكماش. */
body.tf-on .home-hero,
body.tf-on .home-live-card,
body.tf-on .home-action,
body.tf-on .home-stat{
  background:var(--tf-glass); border:1px solid var(--tf-gl);
  box-shadow:inset 0 1px 0 0 var(--tf-ghi);
}
body.tf-on .home-action{
  transition:transform .13s cubic-bezier(.2,.9,.3,1), border-color .15s, filter .15s;
}
body.tf-on .home-action:hover{ border-color:var(--accent); filter:brightness(1.06); }
body.tf-on .home-action:active{ transform:scale(.965); }
body.tf-on .home-stat{ transition:transform .13s, border-color .15s; }
body.tf-on .home-stat:hover{ border-color:var(--accent); transform:translateY(-1px); }
/* الهيرو: حافة ملوّنة بلمسة الهوية */
body.tf-on .home-hero{ border-inline-start:3px solid var(--tf-accent-line); }

/* v327 — باب الطلب السريع بالمطبخ: بارز بالأكسنت */
body.tf-on .lb-fast{
  background:color-mix(in srgb, var(--accent) 14%, var(--tf-glass));
  border-color:var(--tf-accent-line);
  box-shadow:inset 0 1px 0 0 var(--tf-ghi),
             0 8px 22px -12px color-mix(in srgb, var(--accent) 55%, transparent);
}
body.tf-on .lb-fast:hover{ filter:brightness(1.07); }

/* ══════ v327 · «شو عليّ اليوم» ══════ */
.home-mine{
  margin:0 0 14px; padding:13px 15px; border-radius:16px;
  background:color-mix(in srgb, var(--accent) 8%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow:inset 0 1px 0 0 var(--tf-ghi, transparent);
}
.home-mine.clear{
  background:color-mix(in srgb, var(--success) 7%, var(--surface));
  border-color:color-mix(in srgb, var(--success) 28%, var(--border));
}
.hm-h{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;margin-bottom:10px}
.hm-tot{
  font-family:var(--tf-mono); font-size:11px; font-weight:600; padding:2px 9px; border-radius:7px;
  color:var(--tf-accent-ink); background:var(--accent); margin-inline-start:auto;
}
.home-mine.clear .hm-tot{ color:var(--success-ink); background:var(--success); }
.hm-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.hm-i{
  display:flex; align-items:center; gap:9px; cursor:pointer; text-align:start;
  font-family:inherit; font-size:12.5px; color:var(--text);
  padding:10px 12px; border-radius:12px;
  background:var(--tf-glass, var(--surface2)); border:1px solid var(--tf-gl, var(--border));
  box-shadow:inset 0 1px 0 0 var(--tf-ghi, transparent);
  transition:transform .13s cubic-bezier(.2,.9,.3,1), border-color .15s;
}
.hm-i:hover{ border-color:var(--accent); }
.hm-i:active{ transform:scale(.965); }
.hm-i.u{ border-color:color-mix(in srgb, var(--danger) 42%, transparent); }
.hm-i.u b{ color:var(--danger); }
.hm-ic{font-size:16px;flex-shrink:0}
.hm-i b{font-family:var(--tf-mono);font-size:19px;font-weight:600;color:var(--accent-fg);line-height:1}
.hm-i span:not(.hm-ic){flex:1;min-width:0;color:var(--text-muted);font-size:11.5px}   /* v622 — سهم .hm-go خرج: السطر كلّه زرّ */

/* ═══════════════ §٣ · الموحِّد ═══════════════
   الجلد الجديد لأزرار البرنامج الموجودة — بلا لمس HTML.
   قاعدة حديدية: خصائص الشكل بس (خلفية · حدود · ظل · ضغطة).
   ممنوع هون: padding · width · height · display · position · margin —
   حتى ما ينكسر ولا تخطيط. والبادئة body.tf-on بتربح بالـspecificity
   على الستايلات المحقونة وقت التشغيل مهما كان ترتيب التحميل.
   البدائل الملوّنة (pri · go · start · done · p · active) بتحافظ
   على ألوانها — منبدّلها فيزياء الضغط والظل بس. */

/* ── حبر النص فوق الأكسنت: التباين على كل ثيم ──
   v334 — الباغ: `.btn-submit` بيستعمل `--accent-ink`، وهيدا الرمز
   معرّف بست ثيمات بس من أصل ١٣. الباقي بيقعوا على الافتراضي الغامق
   (#0a0e1a) — وعلى ثيم أكسنتو غامق بيصير حبر غامق فوق خلفية غامقة
   = زر بلا نص. هيك طلع «تأكيد» فاضي بنافذة النشر.
   tf.css أصلاً بيعرّف `--tf-accent-ink` مضبوط لكل ثيم — منربطهن
   فمرّة وحدة بتصلّح كل زر بالبرنامج بدل ما نلاحق كل نافذة. */
/* v621 — الربط انعكس واستقرّ في tf-themes.css: --tf-accent-ink = --accent-ink (المعرَّف لكلّ الثيمات)،
   وبقاء هذا السطر كان سيصنع حلقة متغيّرين يُبطل كلٌّ منهما الآخر. */
body.tf-on .btn-submit,
body.tf-on .btn-submit:hover,
body.tf-on .btn-submit:focus{ color:var(--tf-accent-ink); }
/* v335 — نوافذ التأكيد: `themedPrompt` و`themedConfirm` بيمسحوا لون
   الزر inline كل نداء (okBtn.style.color = '')، فالزر بيرجع لقاعدة
   .btn-submit الأصلية يلي بتقرا --accent-ink. الربط لوحدو ما كفى لأن
   بعض الثيمات ما بتعرّف --tf-accent-ink كمان، فمنثبّت التباين على
   الزر نفسو بخصوصية أعلى. النتيجة يلي شافها محمد: زر «تأكيد» فاضي
   بلا نص وقت الخروج من الطلب. */
body.tf-on #confirm-ok,
body.tf-on #confirm-ok:hover{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 90%,transparent),var(--accent));
  color:var(--tf-accent-ink,#fff);
  border:1px solid color-mix(in srgb,var(--accent) 55%,var(--border));
  text-shadow:0 1px 0 color-mix(in srgb,#000 18%,transparent);
}
body.tf-on #confirm-cancel,
body.tf-on #confirm-cancel:hover{ color:var(--text); background:var(--tf-glass); }
/* نافذة التأكيد نفسها بلون الثيم مش أبيض ثابت */
body.tf-on #confirm-overlay .modal{ background:var(--surface); border:1px solid var(--border); }
body.tf-on #confirm-overlay .confirm-msg,
body.tf-on #confirm-overlay .modal-title{ color:var(--text); }
/* الثانوي محايد — حبرو نص عادي مش حبر أكسنت */
body.tf-on .btn-submit.secondary,
body.tf-on .btn-submit.secondary:hover{ color:var(--text); }
/* v552 — الخطر المحايد كذلك: كان يرث حبر الأكسنت (داكن) على سطحٍ داكن — «حذف» بنافذة الطلب لا يُقرأ */
body.tf-on .btn-submit.danger-btn{ color:var(--text); background:var(--tf-glass); border:1px solid var(--tf-gl); box-shadow:inset 0 1px 0 0 var(--tf-ghi); }
body.tf-on .btn-submit.danger-btn:hover{ color:var(--danger); border-color:color-mix(in srgb, var(--danger) 55%, var(--tf-gl)); box-shadow:inset 0 1px 0 0 var(--tf-ghi); }

/* ── الزر الرئيسي .btn-submit (الأوسع استعمالاً) ──
   كان مكعّب translateY(4px) + ظل سفلي — صار زجاج وانكماش. */
body.tf-on .btn-submit{
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.32),
             0 8px 22px -10px color-mix(in srgb, var(--accent) 60%, transparent);
  transition:transform .13s cubic-bezier(.2,.9,.3,1), filter .15s,
             box-shadow .15s, background .15s, border-color .15s;
}
body.tf-on .btn-submit:hover{
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.32),
             0 10px 26px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
body.tf-on .btn-submit:active{ transform:scale(.965); }
/* النسخة الثانوية — محايدة: بتاخد الغلاس الكامل */
body.tf-on .btn-submit.secondary{
  background:var(--tf-glass); border:1px solid var(--tf-gl);
  box-shadow:inset 0 1px 0 0 var(--tf-ghi);
}
body.tf-on .btn-submit.secondary:hover{
  border-color:var(--accent);
  box-shadow:inset 0 1px 0 0 var(--tf-ghi);
}

/* ── عيلة ol-btn (أونلاين — محقونة وقت التشغيل) ── */
body.tf-on .ol-btn{
  box-shadow:inset 0 1px 0 0 var(--tf-ghi);
  transition:transform .13s cubic-bezier(.2,.9,.3,1), filter .15s,
             border-color .15s, background .15s, color .15s;
}
/* v336 — .dng انضاف للاستثناء: الموحِّد كان بيغسل خلفية زر الخطر
   بالغلاس الشفاف، فزر «أكيد» بنافذة تأكيد الأونلاين صار زجاج شفاف
   بنص أبيض — أبيض على أبيض، والمحرر ما عاد يعرف وين بيكبس ليأكّد
   حذف خبر. اللون هون مش زينة — هو المعنى (خطر = أحمر). */
body.tf-on .ol-btn:not(.pri):not(.ol-aibtn):not(.dng){ background:var(--tf-glass); border-color:var(--tf-gl); }
/* .aux.dng مقصود شفاف بنص أحمر (حذف ثانوي) — ما منقلبو أبيض */
body.tf-on .ol-btn.dng:not(.aux){ color:#fff; }
/* v318 — ol-aibtn صار من رموز الأكسنت (كان بنفسجي مثبّت انغسل بالموحِّد):
   الموحِّد ما بيلمس خلفيتو، بس بيعطيه اللمعة والضغطة متل الرئيسي */
body.tf-on .ol-btn.ol-aibtn{
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.3),
             0 8px 20px -9px color-mix(in srgb, var(--accent) 55%, transparent);
}
body.tf-on .ol-btn.pri{
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.32),
             0 8px 22px -10px color-mix(in srgb, var(--accent) 60%, transparent);
}
body.tf-on .ol-btn:active{ transform:scale(.965); box-shadow:inset 0 1px 0 0 var(--tf-ghi); }

/* ── عيلة nw-btn (الأخبار — تحت #page-news فلازم نطابق الـID) ── */
body.tf-on #page-news .nw-btn{
  box-shadow:inset 0 1px 0 0 var(--tf-ghi);
  transition:transform .13s cubic-bezier(.2,.9,.3,1), filter .15s,
             border-color .15s, background .15s, color .15s;
}
body.tf-on #page-news .nw-btn:not(.pri):not(.ai):not(.act){ background:var(--tf-glass); border-color:var(--tf-gl); }
body.tf-on #page-news .nw-btn.pri{
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.32),
             0 8px 22px -10px color-mix(in srgb, var(--accent) 60%, transparent);
}
body.tf-on #page-news .nw-btn:active{ transform:scale(.965); box-shadow:inset 0 1px 0 0 var(--tf-ghi); }

/* ── الأزرار المحايدة (سطحية بلا هوية لونية): الغلاس الكامل ──
   v627 — كانت .action-btn و.tool-btn و.sched-mgr-btn هنا بلا استثناء، ووزن :is() يأخذ أثقل
   ما فيها (0,2,0) فيغلب «.action-btn.go» (0,2,0) لأنّه مسبوقٌ بـbody.tf-on: زرّ «استعادة» في
   السلّة يفقد خلفيّته المملوءة ويبقى نصّه الداكن (accent-ink) على زجاجٍ داكن — «الزرّ فاضي».
   المملوء يبقى مملوءاً؛ والاستثناء بـ:not() لا يرفع الوزن عن (0,2,0). */
body.tf-on :is(
  .action-btn:not(.go, .go-green, .del-btn), .tool-btn:not(.active), .member-icon-btn:not(.on), .mrt-btn,
  .sched-mgr-btn:not(.on), .sched-nav-btn,
  .req-type-btn:not(.active), .scb-btn:not(.p),
  .filter-btn:not(.active), .mc-btn.ghost
){
  background:var(--tf-glass); border-color:var(--tf-gl);
  box-shadow:inset 0 1px 0 0 var(--tf-ghi);
}

/* ── فيزياء الضغط للعيلة كلها (البدائل الملوّنة بتضل بألوانها) ── */
body.tf-on :is(
  .action-btn, .tool-btn, .member-icon-btn, .mrt-btn,
  .sched-mgr-btn, .sched-nav-btn, .req-type-btn,
  .scb-btn, .filter-btn, .mc-btn, .draft-btn
){
  transition:transform .13s cubic-bezier(.2,.9,.3,1), filter .15s,
             border-color .15s, background .15s, color .15s, opacity .15s;
}
body.tf-on :is(
  .action-btn, .tool-btn, .member-icon-btn, .mrt-btn,
  .sched-mgr-btn, .sched-nav-btn, .req-type-btn,
  .scb-btn, .filter-btn, .mc-btn, .draft-btn
):active{
  transform:scale(.965); filter:brightness(1.15);
}

/* ── v319 · توحيد أزرار الإغلاق بكل البرنامج ──
   كانت كل نافذة بترسم الاكس على مزاجها (أبيض على بيج = ضايع).
   هون الجلد الموحّد: زجاج + لون من الرموز + ضغطة — مبين عكل الهويات.
   (tfs-modal-x تبع الستوديو مستثنى — هويتو المستقلة.)
   السياقات الملوّنة (متل اكس رأس المساعد فوق تدرّج الأكسنت) بتربح
   بالـspecificity الأعلى تبعها فبتضل مضبوطة. */
body.tf-on :is(.modal-close,.write-modal-close,.nw-x,.ol-x,.ol-zoomx,.scb-x,
  .asst-x,.sup-x,.ta-x,.scc-x,.sb-pick-close,.cell-task-x){
  background:var(--tf-glass); border:1px solid var(--tf-gl);
  color:var(--text-muted);
  box-shadow:inset 0 1px 0 0 var(--tf-ghi);
  transition:transform .13s cubic-bezier(.2,.9,.3,1), color .15s, border-color .15s;
}
body.tf-on :is(.modal-close,.write-modal-close,.nw-x,.ol-x,.ol-zoomx,.scb-x,
  .asst-x,.sup-x,.ta-x,.scc-x,.sb-pick-close,.cell-task-x):hover{
  color:var(--danger); border-color:var(--danger);
}
body.tf-on :is(.modal-close,.write-modal-close,.nw-x,.ol-x,.ol-zoomx,.scb-x,
  .asst-x,.sup-x,.ta-x,.scc-x,.sb-pick-close,.cell-task-x):active{
  transform:scale(.9);
}

/* v322 — التوست فوق كل النوافذ (كان يختفي خلف المصادر) */
#toast{ z-index:2147483300; }
/* v322 — زر الخطر بتأكيدات الأونلاين كان باهت عالفواتح */
body.tf-on .ol-btn.dng{
  color:var(--danger-ink); background:var(--danger); border-color:transparent;
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.28),
             0 8px 22px -10px color-mix(in srgb, var(--danger) 65%, transparent);
}
body.tf-on .ol-modal-f .ol-btn{ color:var(--text); }
body.tf-on .ol-modal-f .ol-btn.dng{ color:#fff; }

/* v324 — رقاقة الطلب السريع بالشريط اللاصق: بارزة بالأكسنت */
body.tf-on .nrs-chip.nrs-fast{
  color:var(--tf-accent-ink); background:var(--accent); border-color:transparent; font-weight:700;
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.3),
             0 6px 16px -8px color-mix(in srgb, var(--accent) 65%, transparent);
}
body.tf-on .nrs-chip.nrs-fast:hover{ filter:brightness(1.08); }

/* ═══ حركة أقل — احترام تفضيل النظام ═══ */
@media(prefers-reduced-motion:reduce){
  .tf-led--busy, .tf-led--live{ animation:none; }
  .tf-btn, .tf-ico, .tf-chip, .tf-switch{ transition:none; }
}