:root{
    /* ═══════════════════════════════════════════════════════════════
       هوية «طاولة المونتاج الوثائقية» — أسود دافئ، حبر ورقي، أحمر أرشيفي.
       كل قيمة في الواجهة تخرج من هنا. الأسماء القديمة (--panel/--line/…)
       محفوظة كما هي عمدًا: ٦٨٤ سطرًا في هذا الملف تستعملها، فتغيير القيم
       وحدها يُعيد صبغ الواجهة كاملةً بلا لمس أي مكوّن.
       ═══════════════════════════════════════════════════════════════ */

    /* الأسطح — أسود مائل للبنّي لا للأزرق، والفرق بينها إضاءة لا حدود */
    --bg:#0C0B09;
    --panel:#100E0B;
    --panel2:#16130F;
    --panel3:#1D1914;
    --line:#241F19;
    --line2:#332D25;

    /* الحبر */
    --ink:#EDE7DB;
    --muted:#8A8172;
    --faint:#645C50;

    /* الألوان الدالّة */
    --accent:#C24A34;      /* أحمر أرشيفي — لون الفعل والتحديد */
    --accent2:#D9A441;     /* ذهب قديم — التنبيه والتوقيت */
    --accent-ink:#1A0E09;  /* الحبر فوق الأحمر */
    --danger:#E8604E;
    --ok:#7FA35C;

    /* سلّم الخطوط — ثمانية أحجام بدل خمسة وعشرين كانت متفرقة بين 8.5 و22 */
    --t-2xs:10.5px;
    --t-xs:11.5px;
    --t-sm:12.5px;
    --t-md:13.5px;
    --t-lg:15px;
    --t-xl:17px;
    --t-2xl:19px;
    --t-3xl:22px;

    /* سلّم أنصاف الأقطار — خمسة بدل اثني عشر */
    --r-xs:5px;
    --r-sm:8px;
    --r-md:11px;
    --r-lg:16px;
    --r-pill:999px;
    --radius:var(--r-md);      /* أسماء قديمة تشير للسلّم الجديد */
    --radius-sm:var(--r-sm);

    /* سلّم المسافات */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

    --rail-w:72px;
    --shadow-card:0 1px 3px rgba(0,0,0,.45);
    --shadow-pop:0 18px 44px rgba(0,0,0,.62);

    /* خط العرض اللاتيني — للأرقام والعناوين الإنجليزية فقط، لا للعربي */
    --font-display:'Playfair Display', Georgia, serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif;
    min-height:100vh;
  }
  header{
    padding:14px 24px;
    border-bottom:1px solid var(--line);
    display:flex;align-items:center;gap:14px;
    background:linear-gradient(180deg,#100E0B,#0C0B09);
  }
  header .logo{
    width:36px;height:36px;border-radius:var(--r-md);
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    display:grid;place-items:center;font-weight:700;color:var(--accent-ink);font-size:var(--t-xl);
    box-shadow:0 4px 14px rgba(194,74,52,.25);
  }
  header h1{font-size:var(--t-xl);font-weight:600;letter-spacing:.2px}
  header p{font-size:var(--t-xs);color:var(--muted);margin-top:1px}
  header .header-actions{margin-inline-start:auto;flex-shrink:0}
  .btn.small{width:auto;padding:8px 14px;margin-top:0;font-size:var(--t-sm)}

  /* ---------- الهيكل العام: رف أيقونات + لوحة تحكم + خريطة ---------- */
  .layout{
    display:grid;
    grid-template-columns:var(--rail-w) var(--aside-w, 360px) 6px 1fr;
    gap:0;
    height:calc(100vh - 65px);
  }
  .resizer{
    cursor:col-resize;
    background:var(--line);
    transition:background .15s;
  }
  .resizer:hover,.resizer.active{background:var(--accent)}

  /* ---------- رف الأيقونات الجانبي (تنقّل بين الأقسام) ---------- */
  .rail{
    background:var(--bg);
    border-left:1px solid var(--line);
    display:flex;flex-direction:column;align-items:stretch;
    padding:14px 8px;gap:6px;
    flex:none;
  }
  .rail .tab-btn{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);
    color:var(--muted);font-family:inherit;
    padding:10px 4px;cursor:pointer;
    transition:background .15s,color .15s,border-color .15s;
  }
  .rail .tab-btn .tab-ico{font-size:var(--t-2xl);line-height:1}
  .rail .tab-btn .tab-lbl{font-size:var(--t-2xs);font-weight:600;white-space:nowrap}
  .rail .tab-btn:hover{background:var(--panel2);color:var(--ink)}
  .rail .tab-btn.active{
    background:linear-gradient(160deg, rgba(194,74,52,.16), rgba(217,164,65,.12));
    border-color:rgba(194,74,52,.4);
    color:var(--accent);
  }

  /* ---------- لوحة التحكم ---------- */
  aside{
    overflow-y:auto;
    padding:18px;
    background:var(--panel);
  }
  .tab-panel{display:none}
  .tab-panel.active{display:block}
  .step{
    margin-bottom:14px;
    background:var(--panel2);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:14px 14px 4px;
    box-shadow:var(--shadow-card);
  }
  .step h2{
    font-size:var(--t-sm);font-weight:700;color:var(--ink);
    margin-bottom:0;display:flex;align-items:center;gap:8px;
    padding-bottom:12px;
    letter-spacing:.2px;
  }
  .step h2 .n{
    width:20px;height:20px;border-radius:50%;
    background:var(--panel3);border:1px solid var(--line2);
    display:grid;place-items:center;font-size:var(--t-2xs);color:var(--accent);flex:none;
  }
  /* أقسام قابلة للطي — تقلل الزحمة البصرية بالتبويبات اللي فيها حقول كثيرة */
  .step h2.step-toggle{cursor:pointer;user-select:none}
  .step h2.step-toggle::after{
    content:'';margin-inline-start:auto;flex:none;
    width:8px;height:8px;
    border-inline-end:1.6px solid var(--muted);border-block-end:1.6px solid var(--muted);
    transform:rotate(45deg);transition:transform .2s;
  }
  .step.collapsed h2.step-toggle::after{transform:rotate(-135deg)}
  .step.collapsed .step-body{display:none}
  .step .step-body{
    border-top:1px solid var(--line);
    padding-top:12px;padding-bottom:14px;
  }
  .step .step-body > *:last-child{margin-bottom:0}

  /* ---------- بطاقة الذكاء الاصطناعي الثابتة فوق التبويبات ---------- */
  .ai-scenario-card{
    background:linear-gradient(160deg, rgba(194,74,52,.14), rgba(217,164,65,.09));
    border:1px solid rgba(194,74,52,.35);
    border-radius:var(--radius);
    padding:16px;
    margin-bottom:16px;
    box-shadow:var(--shadow-card);
  }
  .ai-scenario-card h2{
    font-size:var(--t-md);font-weight:700;color:var(--accent);margin-bottom:8px;
  }
  .ai-scenario-card label{color:var(--ink);opacity:.75;margin-bottom:8px}

  .speed-wrap{display:flex;gap:4px;align-items:center;margin-inline-start:6px}
  .speed-btn{
    background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);
    color:var(--muted);font-family:inherit;font-size:var(--t-xs);font-weight:700;
    padding:6px 9px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
  }
  .speed-btn:hover{color:var(--ink);border-color:var(--accent)}
  .speed-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink);border-color:transparent}
  .country-inspect{
    position:absolute;top:14px;inset-inline-start:14px;z-index:5;
    background:rgba(10,14,22,.88);border:1px solid rgba(255,255,255,.25);border-radius:var(--r-md);
    padding:8px 12px;color:#fff;font-size:var(--t-md);display:none;pointer-events:none;
    box-shadow:0 4px 14px rgba(0,0,0,.4);max-width:260px;
  }
  .country-inspect.show{display:block}
  .country-inspect .ci-name{font-weight:800;font-size:var(--t-lg)}
  .country-inspect .ci-region{color:var(--muted);font-size:var(--t-sm);margin-top:2px}
  label{font-size:var(--t-xs);color:var(--muted);display:block;margin-bottom:6px}
  input[type=text],textarea{
    width:100%;
    background:var(--panel3);
    border:1px solid var(--line2);
    border-radius:var(--radius-sm);
    color:var(--ink);
    padding:9px 12px;
    font-family:inherit;
    font-size:var(--t-md);
  }
  input[type=text]:focus,textarea:focus,input[type=number]:focus{outline:none;border-color:var(--accent)}
  select{
    width:100%;background:var(--panel3);border:1px solid var(--line2);
    border-radius:var(--radius-sm);color:var(--ink);padding:9px 12px;
    font-family:inherit;font-size:var(--t-md);
  }
  .drop{
    border:1.5px dashed var(--line2);
    border-radius:var(--radius);
    padding:22px 14px;
    text-align:center;
    color:var(--muted);
    font-size:var(--t-sm);
    cursor:pointer;
    transition:border-color .2s,background .2s;
  }
  .drop:hover,.drop.on{border-color:var(--accent);background:rgba(194,74,52,.05);color:var(--ink)}
  .drop input{display:none}
  .fact{
    background:var(--panel3);
    border:1px solid var(--line2);
    border-radius:var(--r-md);
    padding:10px;
    margin-bottom:8px;
    display:flex;flex-direction:column;gap:8px;
  }
  .fact.pinned{border-color:var(--ok)}
  .fact.picking{border-color:var(--accent2);box-shadow:0 0 0 2px rgba(217,164,65,.25)}
  .fact.selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(194,74,52,.3)}
  .fact .fact-row{display:flex;gap:8px;align-items:center}
  .fact .dot{
    width:26px;height:26px;border-radius:50%;flex-shrink:0;
    display:grid;place-items:center;font-size:var(--t-sm);font-weight:700;
    background:var(--panel);border:1px solid var(--line);color:var(--muted);
  }
  .fact.pinned .dot{background:var(--ok);color:#06251a;border-color:var(--ok)}
  .fact input{
    flex:1;min-width:0;
    border:1px solid var(--line);background:var(--panel);
    border-radius:var(--r-sm);padding:8px 10px;color:var(--ink);
    font-family:inherit;font-size:var(--t-md);
  }
  .fact input:focus{outline:none;border-color:var(--accent)}
  .fact select{flex:1 1 auto;min-width:0}
  .fact button{
    background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);
    color:var(--muted);font-size:var(--t-xs);padding:5px 9px;cursor:pointer;
    font-family:inherit;white-space:nowrap;flex:none;
  }
  .fact button:hover{border-color:var(--accent2);color:var(--accent2)}
  .btn{
    width:100%;
    border:none;border-radius:var(--r-md);
    padding:11px;
    font-family:inherit;font-size:var(--t-md);font-weight:600;
    cursor:pointer;
    margin-top:8px;
    transition:transform .1s, opacity .2s, filter .15s;
  }
  .btn:active{transform:scale(.98)}
  .btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink)}
  .btn.primary:hover{filter:brightness(1.06)}
  .btn.ghost{background:var(--panel3);color:var(--ink);border:1px solid var(--line2)}
  .btn.ghost:hover{border-color:var(--accent)}
  .btn.ghost.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink);border-color:transparent}
  .btn:disabled{opacity:.4;cursor:not-allowed}
  .hint{font-size:var(--t-xs);color:var(--muted);margin-top:8px;line-height:1.6}
  .hint b{color:var(--accent2)}

  /* شرائح "أنواع حركات الكاميرا" تحت صندوق برومت الذكاء الاصطناعي — ضغطة وحدة تضيف جملة جاهزة
     للنص بدل ما يحتاج المستخدم يتذكر/يكتب اسم النوع بنفسه */
  .camchip-hint{font-size:var(--t-xs);color:var(--muted);margin-top:9px;margin-bottom:5px}
  .camchip-row{display:flex;flex-wrap:wrap;gap:6px}
  .camchip{
    font-size:var(--t-xs);padding:5px 9px;border-radius:var(--r-pill);
    background:var(--panel3);border:1px solid var(--line2);color:var(--ink);
    cursor:pointer;white-space:nowrap;transition:filter .15s,border-color .15s;
  }
  .camchip:hover{border-color:var(--accent);filter:brightness(1.12)}
  .camchip:active{transform:scale(.96)}
  .camchip.just-added{border-color:var(--accent2);background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink)}

  /* ---------- منطقة المعاينة ---------- */
  main{
    position:relative;
    display:flex;flex-direction:column;
    align-items:center;justify-content:flex-start;
    padding:14px 14px 8px;gap:8px;
    /* ═══ «أبغى الجزء الي فيه الخريطة ثابت» ═══
       شكوى المخرج: ينزل إلى التايم لاين ليعدّل فتغيب الخريطةُ عن الشاشة، فيصعد
       ليرى الأثر ثمّ ينزل ليعدّل — والتجربةُ صعبة. والسببُ أنّ main كان **بلا
       تمرير**: الخريطةُ والتايم لاين أخوان بداخله، ومحتواه يفيض فتمرّر الصفحةُ
       كلُّها فتخرج الخريطةُ من أعلاها.
       فصار main هو الممرِّر، والخريطةُ **لاصقةً** في أعلاه: يمرّ التايم لاين
       تحتها وهي ثابتة. وjustify-content صار flex-start لأنّ center مع الفيض
       يجعل أعلى المحتوى غيرَ قابلٍ للوصول في متصفّحات كثيرة. */
    /* والعمودُ لا يمرّر البتّة: المخرجُ رسم خطًّا على لقطته وقال — ما فوقَه
       ثابتٌ وما تحتَه وحدَه يتحرّك. والخطُّ تحت شريط التشغيل وفوق الجِراب.
       فالخريطةُ والشريطُ بمقاسِهما، والجِرابُ يأخذ ما بقي ويمرّر صفوفَه
       داخلَه. وهذا أبسطُ من التثبيت والتصغير: لا شيءَ يتحرّك فلا شيءَ يُخفى. */
    overflow:hidden;
    /* main هو عمود «1fr» في شبكة ‎.app‎، وعمود بهذا الوصف حدّه الأدنى تلقائيًا = عرض أوسع محتوى فيه.
       فلمّا كان التايم لاين يتّسع (بالتكبير أو بعيب حساب) كان يجرّ العمود كلّه معه فتفيض الصفحة
       أفقيًا وتنزلق الخريطة خارج الشاشة، بدل ما يتمرّر الشريط داخل صندوقه. صفر هنا يقطع الجرّ. */
    min-width:0;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(194,74,52,.05), transparent 50%),
      radial-gradient(ellipse at 70% 80%, rgba(217,164,65,.05), transparent 50%);
  }
  .stage-wrap{
    /* لاصقةٌ في أعلى main فلا تغيب حين ينزل المخرجُ إلى التايم لاين.
       وsticky تكفي هنا لأنّ الخريطةَ والتايم لاين أخوان في العنصر الممرِّر نفسِه. */
    position:relative;
    /* ولا تُضغط: main عمودٌ مرن، وكان التايم لاين حين يكبر **يضغط المعاينة**
       (قِيس: 539px ⇐ 304px) بدل أن يفيض العمود — فلا تمريرَ يقع ولا تثبيتَ يعمل،
       وتصغُر الخريطةُ من حيث لا يريد المخرج. فتُثبَّت على مقاسها ويفيض العمودُ
       فيتمرّر، وعندها يعمل sticky وتصغُر بقرارٍ منّا لا بضغطٍ من جارها. */
    flex:0 0 auto;
    /* والارتفاعُ هو من يقود لا العرض — وإلّا انفجر المقاسُ العموديّ.
       قُست بـ 9:16 فكان ارتفاعُ المعاينة 1676px في شاشةٍ ارتفاعُها 835 — أي ضعفَيها،
       لأنّ width:100% مع نسبةٍ طوليّةٍ يولّد ارتفاعًا بقدر العرض مضروبًا في النسبة.
       فبارتفاعٍ محدّدٍ وعرضٍ تلقائيٍّ تُشتقّ النسبةُ منه، فيستقيم المقاسانِ معًا. */
    /* والعرضُ يُحسب من **ميزانيّة الارتفاع** مضروبةً في النسبة، ثمّ
       aspect-ratio يشتقّ الارتفاعَ منه — فتستقيم النسبةُ دائمًا.
       وكان قبلَها height محدّدٌ مع max-width، والمتصفّح يقصُر العرضَ ولا يُعيد
       حسابَ الارتفاع، فخرجت المعاينةُ 960×600 — نسبةُ 1.60 مكان 1.78،
       فامتدّت الخريطةُ عرضًا. قُست فرأيتُها. */
    --stage-ar:1.7778;
    /* ═══ سقفٌ يُبقي للتايم لاين نصيبًا ═══
       منعُ العمود من التمرير جعل التايم لاين يأخذ **الفَضْلة** لا مقاسًا،
       والمعاينةُ تلتهم 56vh قبله. قيس على 768: المعاينة 430 وجسمُ الجِراب
       **38 بكسلًا** — صفٌّ واحد. ومن يرى شريطًا مقصوصًا لا يرى مقبضَيه،
       فقال المخرج «اختفت أشرطةُ السحب والمساحةُ صغيرةٌ جدًّا» — وهو عينُ هذا.
       والحدُّ الثالث يحجز 450px لما تحته، ولا يعمل إلّا حين تضيق الشاشة:
       على 1080 يبقى السقف 560 كما كان، وعلى 768 ينزل إلى 318 فيربح الجِراب أربعةَ أضعاف.
       وmax(220px,…) يمنع العكس: ألّا تختفي الخريطةُ على شاشةٍ قزمة. والمقبضُ ينسخ هذا متى شاء. */
    --stage-h:min(56vh, 560px, max(220px, calc(100vh - 450px)));
    width:min(100%, 960px, calc(var(--stage-h) * var(--stage-ar)));
    height:auto;
    aspect-ratio:var(--stage-ar);
    aspect-ratio:16/9;
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--line);
    background:#000;
    box-shadow:0 24px 60px rgba(0,0,0,.55);
    /* ولا يُنتقَل max-width: قُست فلم تتغيّر قيمتُه أبدًا مع الانتقال
       (960px عند صفر وعند 600 ملّي ثانية)، وبإزالة الانتقال صار 400px في إطارٍ واحد.
       والتغيّرُ الفوريُّ أنسبُ لواجهةٍ يقودها التمرير على كلّ حال. */

  }
  canvas{width:100%;height:100%;display:block}
  .stage-wrap.picking{cursor:crosshair;outline:2px solid var(--accent2)}
  .empty{
    position:absolute;inset:0;display:grid;place-items:center;
    color:var(--muted);font-size:var(--t-md);text-align:center;line-height:2;
    pointer-events:none;
  }
  .toolbar{
    display:flex;gap:10px;width:100%;max-width:960px;
  }
  .toolbar .btn{margin-top:0;width:auto;flex:1}
  /* شريط أدوات عائم فوق الخريطة — بستايل أشرطة أدوات الرسم بأنظمة الأخبار المباشرة (شريط عمودي مضغوط
     من أيقونات بدون نص، بخلفية داكنة شبه شفافة). يقعد بأعلى-يسار لوحة الخريطة (فيزيائيًا) عشان ما
     يتصادم مع صندوق اسم الدولة (country-inspect) اللي يقعد بأعلى-يمين المنطقي (RTL) بنفس الزاوية تقريبًا */
  /* ═══ اللوحةُ تسكن الفراغَ الأيسر ═══
     طلبُه: «ننقل القائمة إلى هنا وتكون باينة طول الوقت؟» ومعه دائرةٌ على
     العمود الأيسر الفارغ. وهو فراغٌ ميّتٌ حقًّا، واللوحةُ كانت تغطّي الخريطة.
     والموضعُ يُقاس لا يُفترَض: الفراغُ يختلف باختلاف الشاشة وطيِّ اللوحة
     الجانبيّة — قِيس على 1366: 167px واللوحةُ الطبيعيّة 221 (يفرضها عرضُ
     خانةي النصّ لا الأزرار). فثلاثةُ أوضاعٍ يختار بينها mountFtDock بالقياس. */
  .float-toolbar{
    position:absolute;top:var(--ft-top,0);left:var(--ft-left,14px);z-index:6;
    display:flex;flex-direction:column;gap:6px;
    background:rgba(10,14,22,.82);
    border:1px solid rgba(255,255,255,.16);
    border-radius:var(--r-md);
    padding:7px;
    box-shadow:0 8px 24px rgba(0,0,0,.45);
    backdrop-filter:blur(6px);
    /* أمان إضافي: لو الشريط طال أكثر من مساحة الخريطة المتاحة (شاشات قصيرة، أو زيادة عدد الأزرار
       مستقبلًا) يصير له سكرول داخلي بدل ما ينقص/ينقطع صفه الأخير بصمت تحت overflow:hidden بتاع
       .stage-wrap (نفس المشكلة اللي صارت لما زاد عدد الرموز العسكرية عن مساحة الشريط) */
    /* والسقفُ من ارتفاع المعاينة لا من ارتفاع main: وإلّا طالت على الشاشة
       القصيرة فنزلت على التايم لاين. ويكتبه mountFtDock بعد القياس. */
    max-height:var(--ft-maxh,calc(100% - 28px));overflow-y:auto;overflow-x:hidden;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent;
  }
  /* وضعُ الرسوّ: عرضٌ صريحٌ لأنّ خانتي النصّ تفرضان 195px بطبعهما،
     والأزرارُ ثلاثةٌ بـ 38 لا تحتاج إلّا 142. فتضيق الخانتان ويتحرّر نصفُ العرض. */
  .float-toolbar.ft-docked{width:var(--ft-w,150px)}
  /* والأزرارُ تملأ خليّتَها فتكبر مع اللوحة بدل أن تترك فجواتٍ حولها */
  .float-toolbar.ft-docked .ft-btn{width:100%;height:42px}
  .float-toolbar.ft-docked .ft-label-input{min-width:0}
  .float-toolbar.ft-2col{width:var(--ft-w,104px)}
  .float-toolbar.ft-2col .ft-grid{grid-template-columns:repeat(2,1fr)}
  .float-toolbar::-webkit-scrollbar{width:5px}
  .float-toolbar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:4px}
  /* زر فتح/طي الشريط — يخليه ضيق (مربع صغير) بشكله الافتراضي بدل ما ياخذ عرض كبير من الخريطة، والمستخدم
     يقدر يفتحه (يوسّعه) بضغطة لو احتاج كل الأدوات، ويطويه مرة ثانية بنفس الزر */
  .ft-toggle{
    width:32px;height:32px;flex:none;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16);
    border-radius:var(--r-sm);color:#fff;cursor:pointer;
    transition:background .15s,transform .2s;
  }
  .ft-toggle:hover{background:rgba(255,255,255,.18)}
  .ft-toggle svg{width:18px;height:18px;transition:transform .2s}
  .float-toolbar.collapsed .ft-toggle svg{transform:rotate(0deg)}
  .float-toolbar:not(.collapsed) .ft-toggle svg{transform:rotate(90deg)}
  .float-toolbar.collapsed{padding:5px}
  .float-toolbar.collapsed .ft-body{display:none}
  .ft-body{display:flex;flex-direction:column;gap:6px}
  /* 3 أعمدة بدل عمودين — يقلل عدد الصفوف تقريبًا للنص، فيقل احتمال احتياج سكرول أصلًا، وبنفس الوقت
     يوسّع كل صف شوي فيخلي الأيقونات تبين أوضح وأقل تلاصق مع بعض */
  .ft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .ft-swatches{display:flex;gap:6px;justify-content:center;padding:2px 0}
  .ft-swatch{
    width:20px;height:20px;border-radius:50%;
    border:2px solid rgba(255,255,255,.25);cursor:pointer;padding:0;
    transition:border-color .15s,transform .1s;
  }
  .ft-swatch:hover{transform:scale(1.12)}
  .ft-swatch.active{border-color:#fff}
  .ft-btn{
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--r-md);
    color:#fff;font-size:var(--t-2xl);line-height:1;
    cursor:pointer;
    transition:background .15s,transform .1s,border-color .15s;
  }
  .ft-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
  .ft-btn:active{transform:scale(.92)}
  .ft-btn.active{background:var(--accent2);border-color:var(--accent2)}
  .ft-btn:disabled{opacity:.35;cursor:default}
  .ft-btn:disabled:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
  /* أيقونات SVG أحادية اللون (بدل الإيموجي الملونة) — مظهر رسومات بث إخباري احترافي بدل شكل "لعبة"،
     ومتناسقة كلها بنفس الوزن/السماكة بعكس خط الإيموجي المختلط بين الأنظمة */
  .ft-btn svg{width:19px;height:19px;display:block;flex:none;color:#EDE7DB}
  /* تلوين خفيف حسب فئة الرمز العسكري (عسكري صريح = أحمر خفيف، مدني = أزرق خفيف) — يساعد العين تفرز
     الشبكة بسرعة بدون ما تقرأ كل تلميح لحاله، خصوصًا إن كثير من الإيموجي الافتراضية متشابهة بصريًا */
  .ft-btn.mil{background:rgba(255,90,90,.10);border-color:rgba(255,110,110,.22)}
  .ft-btn.mil:hover{background:rgba(255,90,90,.2);border-color:rgba(255,110,110,.4)}
  .ft-btn.civ{background:rgba(90,170,255,.10);border-color:rgba(110,180,255,.22)}
  .ft-btn.civ:hover{background:rgba(90,170,255,.2);border-color:rgba(110,180,255,.4)}
  .ft-sep{height:1px;background:rgba(255,255,255,.15);margin:2px 4px}
  /* خانة نص خط القياس — تكتب فوق شارة المسافة لآخر خط قياس (📏) مضاف، مباشرة من شريط الأدوات
     العائم بدل ما يفتح المستخدم قسم "المسارات" باللوحة الجانبية */
  .ft-label-input{
    width:100%;box-sizing:border-box;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--r-sm);
    color:#fff;font-size:var(--t-xs);font-family:inherit;
    padding:6px 8px;outline:none;
  }
  .ft-label-input::placeholder{color:rgba(255,255,255,.4)}
  .ft-label-input:focus{border-color:var(--accent2)}
  .ft-label-input:disabled{opacity:.35;cursor:default}
  /* تلميح صغير (زي title بس مصمم يبين بنفس ثيم الشريط) يظهر يسار الأيقونة عند المرور عليها */
  .ft-btn,.ft-swatch{position:relative}
  .ft-btn::after,.ft-swatch::after{
    content:attr(data-tip);
    position:absolute;top:50%;left:calc(100% + 8px);transform:translateY(-50%);
    background:rgba(10,14,22,.92);border:1px solid rgba(255,255,255,.18);
    color:#fff;font-size:var(--t-xs);white-space:nowrap;padding:4px 8px;border-radius:var(--r-sm);
    opacity:0;pointer-events:none;transition:opacity .12s;
  }
  .ft-btn:hover::after,.ft-swatch:hover::after{opacity:1}
  .status{
    font-size:var(--t-sm);color:var(--muted);
    min-height:18px;text-align:center;
  }
  .status.rec{color:var(--danger)}
  a.dl{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--ok);font-size:var(--t-md);text-decoration:none;
    border:1px solid var(--ok);border-radius:var(--r-md);padding:8px 16px;
  }

  /* ---------- تايم لاين احترافي (ستايل كاب كات): مثبّت تحت الخريطة دائمًا ---------- */
  /* ═══ مقبضٌ يقسم الارتفاع بين المعاينة والتايم لاين ═══
     طلبُ المخرج: «كبّر المساحة هذي إلى أقصى حدٍّ ممكن». والأقصى ليس رقمًا أختاره أنا:
     من يراجع الخريطة يريدها كبيرةً، ومن يرتّب عشرين صفًّا يريد الصفوف. فالحدُّ
     بيده، ويُحفظ فلا يُعاد ضبطُه كلّ مرّة. ونقرةٌ مزدوجةٌ تُرجع الافتراضيّ. */
  .stage-resizer{
    flex:0 0 auto;width:100%;max-width:960px;height:18px;
    cursor:row-resize;position:relative;border-radius:9px;
    touch-action:none;
    display:flex;align-items:center;justify-content:center;
    background:var(--panel2);border:1px solid var(--line);
    transition:background .15s, border-color .15s;
  }
  /* مقبضٌ مرئيٌّ لا خيطٌ: الأوّلُ كان 4px من لون الحدّ فلم يُرَ أصلًا،
     وقال المخرج «ما تغيّر شي» وهو لم يجده. وميزةٌ لا تُكتشَف ليست ميزة. */
  .stage-resizer::before{
    content:'\2022 \2022 \2022';letter-spacing:3px;
    color:var(--muted);font-size:11px;line-height:1;
    transition:color .15s;
  }
  .stage-resizer:hover{background:var(--panel);border-color:var(--accent)}
  .stage-resizer:hover::before,.stage-resizer.active::before{color:var(--accent)}
  .stage-resizer.active{background:var(--panel);border-color:var(--accent)}
  /* وزرُّ التوسيع في رأس الجِراب */
  .tl-expand-btn{
    width:auto;margin:0;padding:5px 10px;
    font-size:var(--t-2xs);font-weight:600;white-space:nowrap;
    background:var(--panel2);color:var(--ink);
    border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;
  }
  .tl-expand-btn:hover{border-color:var(--accent);color:var(--accent)}
  .tl-expand-btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
  .tl-dock{
    background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
    margin-top:0;
    /* عرضه fit-content (لأن main يوسّط عناصره) — فبدون سقف صريح يتمدّد بعرض محتواه مهما طال.
       السقف يخلّي المحتوى الطويل يتمرّر داخل ‎.tl-scroll‎ كما هو مقصود، لا يدفع الصفحة */
    /* وعرضُه ثابتٌ لا تابعٌ لمحتواه: كان fit-content، وعرضُ الأشرطة يُحسب منه،
       فيتغيّر المقياسُ كلّما تغيّر المحتوى — دورةٌ في القياس. وبعرضٍ مطابقٍ
       للمعاينة يستقيم المقياسُ وتتحاذى الحافّتانِ في العين. */
    width:100%;max-width:960px;
    /* ويأخذ ما بقي من ارتفاع العمود لا ما يطلبه محتواه، وmin-height:0
       لازمةٌ وإلّا رفض العنصرُ المرنُ أن يقلّ عن محتواه فلم يقع تمريرٌ أبدًا. */
    flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
    /* ملاحظة مهمة: ما نحط overflow:hidden هنا — قائمة "+ أضف عنصر" تنبثق فوق شريط الرأس وتطلع
       برا صندوق tl-dock، ولو حطينا overflow:hidden راح تنقص وتختفي بصمت */
  }
  .tl-dock-head{
    /* الأزرار كثيرة ونصوصها لا تنكسر — بدون wrap كانت تفرض عرضًا أدنى كبيرًا على الصندوق
       (ومنه على العمود كلّه) وتفيض على الشاشات الضيّقة. الآن تنزل سطرًا ثانيًا بدل ما تدفع الصفحة */
    flex-wrap:wrap;
    display:flex;align-items:center;gap:8px;
    padding:8px 10px;border-bottom:1px solid var(--line);
    background:var(--panel2);border-radius:10px 10px 0 0;
  }
  .tl-toggle-btn{
    font-family:inherit;font-size:var(--t-sm);font-weight:600;
    background:rgba(255,255,255,.05);color:var(--muted);
    border:1px solid var(--line);border-radius:var(--r-lg);
    padding:6px 14px;cursor:pointer;transition:.15s;flex:none;
  }
  .tl-toggle-btn:hover{border-color:var(--accent2)}
  .tl-toggle-btn.on{
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:var(--accent-ink);border-color:transparent;
    box-shadow:0 0 0 3px rgba(194,74,52,.2);
  }
  .tl-play-btn{
    flex:none;width:30px;height:30px;border-radius:50%;
    background:var(--ink);color:var(--accent-ink);border:none;
    font-size:var(--t-sm);cursor:pointer;display:grid;place-items:center;
  }
  .tl-play-btn:hover{background:var(--accent2)}
  .tl-play-btn.playing{background:var(--danger);color:#fff}
  .tl-rec-btn{
    flex:none;font-family:inherit;font-size:var(--t-xs);font-weight:600;
    background:rgba(255,95,95,.12);color:var(--danger);
    border:1px solid rgba(255,95,95,.4);border-radius:var(--r-lg);
    padding:6px 12px;cursor:pointer;
  }
  .tl-rec-btn:hover{background:var(--danger);color:#fff}
  .tl-add-wrap{position:relative;flex:none}
  .tl-add-menu{
    display:none;position:absolute;bottom:calc(100% + 6px);right:0;
    background:var(--panel3);border:1px solid var(--line2);border-radius:var(--r-md);
    min-width:200px;max-height:220px;overflow-y:auto;
    box-shadow:var(--shadow-pop);z-index:20;padding:4px;
  }
  .tl-add-menu.open{display:block}
  .tl-add-item{
    display:flex;align-items:center;gap:8px;
    font-size:var(--t-sm);padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;
  }
  .tl-add-item:hover{background:rgba(194,74,52,.12);color:var(--accent)}
  .tl-add-empty{font-size:var(--t-xs);color:var(--muted);padding:10px;text-align:center}
  .lbl-style-pop{
    position:fixed;width:250px;background:var(--panel3);border:1px solid var(--line2);
    border-radius:var(--r-md);box-shadow:var(--shadow-pop);z-index:60;padding:10px;
  }
  .lbl-style-title{font-size:var(--t-sm);font-weight:700;color:var(--ink);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lbl-style-subtitle{font-size:var(--t-2xs);color:var(--muted);margin:6px 0 5px}
  .lbl-style-anim-row{display:grid;grid-template-columns:1fr 1fr;gap:5px}
  .lbl-anim-btn{
    font-family:inherit;font-size:var(--t-xs);background:rgba(255,255,255,.05);
    border:1px solid var(--line);border-radius:var(--r-sm);color:var(--muted);
    padding:6px 4px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .lbl-anim-btn:hover{border-color:var(--accent);color:var(--ink)}
  .lbl-anim-btn.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
  .lbl-stops-wrap{display:flex;flex-direction:column;gap:5px;max-height:150px;overflow-y:auto}
  .lbl-stop-row{display:flex;align-items:center;gap:6px}
  .lbl-stop-row input[type=color]{
    width:22px;height:22px;flex:none;border:1px solid var(--line);border-radius:var(--r-xs);
    background:none;padding:0;cursor:pointer;
  }
  .lbl-stop-row input[type=number]{
    width:52px;background:rgba(255,255,255,.05);border:1px solid var(--line);
    border-radius:var(--r-sm);color:var(--ink);padding:4px 6px;font-size:var(--t-xs);
    font-family:inherit;text-align:center;flex:none;
  }
  .lbl-stop-row input[type=number]:focus{outline:none;border-color:var(--accent)}
  .lbl-stop-sec{font-size:var(--t-2xs);color:var(--muted);flex:none}
  .lbl-stop-rm{
    flex:none;width:16px;height:16px;border-radius:50%;margin-inline-start:auto;
    background:rgba(255,95,95,.15);color:var(--danger);border:none;font-size:var(--t-xs);
    line-height:1;cursor:pointer;display:grid;place-items:center;
  }
  .lbl-stop-rm:hover{background:var(--danger);color:#fff}
  .lbl-stop-add{
    width:100%;margin-top:8px;font-family:inherit;font-size:var(--t-xs);font-weight:600;
    background:rgba(194,74,52,.12);color:var(--accent);border:1px dashed var(--accent);
    border-radius:var(--r-sm);padding:7px;cursor:pointer;
  }
  .lbl-stop-add:hover{background:var(--accent);color:var(--accent-ink)}
  .geo-add-pop{width:260px}
  .geo-add-input{
    width:100%;box-sizing:border-box;background:rgba(255,255,255,.05);border:1px solid var(--line);
    border-radius:var(--r-sm);color:var(--ink);padding:7px 9px;font-size:var(--t-sm);font-family:inherit;
  }
  .geo-add-input:focus{outline:none;border-color:var(--accent)}
  .geo-add-results{display:flex;flex-direction:column;gap:2px;max-height:150px;overflow-y:auto;margin-top:4px}
  .geo-add-item{
    font-size:var(--t-sm);padding:7px 8px;border-radius:var(--r-sm);cursor:pointer;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .geo-add-item:hover{background:rgba(194,74,52,.15);color:var(--accent)}
  .geo-add-empty{font-size:var(--t-xs);color:var(--muted);padding:6px 4px}
  .tl-time-label{
    margin-inline-start:auto;font-size:var(--t-xs);color:var(--muted);
    font-variant-numeric:tabular-nums;direction:ltr;flex:none;
  }
  .tl-dur-wrap{
    display:flex;align-items:center;gap:5px;flex:none;
    font-size:var(--t-xs);color:var(--muted);
  }
  .tl-dur-wrap input{
    width:56px;background:rgba(255,255,255,.05);border:1px solid var(--line);
    border-radius:var(--r-sm);color:var(--ink);padding:4px 6px;font-size:var(--t-xs);
    font-family:inherit;text-align:center;
  }
  .tl-dur-wrap input:focus{outline:none;border-color:var(--accent)}
  .tl-zoom{display:flex;gap:4px;flex:none}
  .tl-zoom button{
    width:22px;height:22px;border-radius:var(--r-sm);border:1px solid var(--line);
    background:rgba(255,255,255,.05);color:var(--muted);cursor:pointer;
    font-size:var(--t-md);line-height:1;display:grid;place-items:center;
  }
  .tl-zoom button:hover{border-color:var(--accent);color:var(--accent)}
  .tl-body{display:none}
  /* وجسمُ الجِراب هو الممرِّر لا الجِرابُ نفسُه — والفرقُ مقصود:
     قائمةُ «+ أضف عنصر» تنبثق من رأس الجِراب وتخرج من صندوقه، فلو قُصّ الجِرابُ
     لانقصت واختفت بصمت (والتعليقُ فوقَ هذا يسجّل الواقعة). وفيه فائدةٌ ثانية:
     رأسُ الجِراب (التشغيل، وإضافةُ عنصرٍ، وطولُ الفيديو) يبقى في متناول اليد
     والمخرجُ يعدّل الصفوف. */
  /* وscrollbar-gutter ليست زينةً: عرضُ أشرطة التايم لاين يُحسب من
     scrollEl.clientWidth وقتَ الرسم، وشريطُ التمرير الرأسيّ يظهر **بعدَه** (لأنّ
     ظهورَه مرهونٌ بعدد الصفوف الذي لا يُعرف إلّا بعد الرسم) — فيسرق 15px
     فتُقصَّ الأشرطة وتختفي. قياسٌ: حُسِبت على 844 والمتاحُ صار 731.
     فيُحجز مكانُه دائمًا فيثبت القياسُ ظهر أم لم يظهر. وoverflow-x:hidden صراحةً
     لأنّ overflow-y:auto وحدَه يجعل المحورَ الآخرَ auto فيظهر شريطٌ أفقيٌّ لا يُراد. */
  /* ═══ والعمودان يعلوان بمحتواهما لا بالإطار ═══
     `align-items:stretch` كان يشدّ `.tl-scroll` إلى ارتفاع **المرئيّ** (249) لا إلى ارتفاع
     صفوفه (620)، و`.tl-content{height:100%}` يرث ذلك، و`overflow-y:hidden` يقصّ الباقي.
     فيبقى عمودُ الأسماء طويلًا يمرّر ويُقصّ عمودُ الأشرطة عند الصفّ السادس — وهو ما رآه
     المخرج: أسماءٌ يمينًا وسوادٌ مكان أشرطتها. و`flex-start` يجعل كلَّ عمودٍ بمقاس محتواه
     فيمرّان معًا في جسمٍ واحد. قِيس: الانزياحُ صفرٌ في خمسةَ عشرَ صفًّا، والعمودان 645. */
  /* والجسمُ لم يعد يمرّر: صار «#tlScroll» المُمرِّرَ الوحيدَ للمحورين معًا، وهو
     شرطُ أن تعمل position:sticky — المتصفّحُ يُلصِق بأقربِ مُمرِّرٍ يحتوي العنصر،
     وكان أقربُها مُمرِّرًا أفقيًّا لا ينزل، فيُنفَّذ الأمرُ بلا أثر. */
  .tl-dock.on .tl-body{
    display:flex;align-items:stretch;flex:1 1 auto;min-height:0;overflow:hidden;
  }
  /* 124 بكسل كانت تقصّ كل اسم متوسط الطول («من واردات ال…»، «／MARITIME CORRIDOR»)، فلا يعرف
     المستخدم ما هذا الصف أصلًا. 200 تكفي لأغلب الأسماء، ومعها title يكشف الباقي عند المرور */
  /* وعمودُ الأسماء داخل المُمرِّر الآن، ملصوقٌ بحافّته اليمنى فيبقى ظاهرًا مهما
     تحرّكتَ في الزمن. وdirection:rtl يردّ ما أخذه ltr المُمرِّر (زرُّ الحذف يمينًا).
     ولا حشوةَ رأسيّةً له: حشوةُ المُمرِّر تكفي، ومضاعفتُها تُزيحه عن أشرطته. */
  .tl-labels{
    flex:none;width:200px;padding:10px 0 10px 8px;
    display:flex;flex-direction:column;
    direction:rtl;
    position:sticky;inset-inline-end:0;right:0;z-index:14;
    background:var(--panel);
  }
  /* ═══ الفاصلُ يقابل المسطرة، فيلزمه طولُها ═══
     كان عشرين حين كانت المسطرةُ عشرين. ثمّ صارت المسطرةُ سطرين (فصولٌ فوق وثوانٍ تحت)
     فطالت إلى 34، وبقي الفاصلُ على 20 — فنزل كلُّ شريطٍ **أربعةَ عشرَ بكسلًا** تحت اسمه
     من الصفّ الأوّل إلى الآخر. رقمان مربوطان في موضعين، وأحدُهما تغيّر وحدَه. */
  /* ═══ 40 لا 34+6 ═══
     الهامشُ بين المسطرة وصفّ الكاميرا شفّافٌ لا يغطّيه أحد، وكلاهما مثبَّت — فكانت
     الصفوفُ تنزلق في ستّة بكسلاتٍ بينهما: «ورا الكاميرا في فراغ». فيصير الهامشُ
     ارتفاعًا، فيتلاصق المثبَّتان (0..40 ثمّ 40..74) ولا يبقى بينهما منفذ. */
  .tl-labels-spacer{height:40px;margin-bottom:0;flex:none}
  .tl-scroll{
    flex:1;min-width:0;overflow:auto;scrollbar-gutter:stable;
    display:flex;align-items:flex-start;
    /* ولا حشوةَ رأسيّةً هنا: sticky تلتصق بحافّة الحشوة لا بحافّة الصندوق، والحشوةُ
       جزءٌ من المساحة المُمرَّرة — فكانت الصفوفُ تمرّ في العشرة العلويّة **فوق**
       المسطرة المثبَّتة. نقلناها إلى العمودين فصارت فوق المثبَّتات لا تحتها. */
    position:relative;padding:0 10px 0 0;
    direction:ltr; /* مهم: الوقت يمشي يسار←يمين دايمًا هنا، وإلا مقابض تمديد الأشرطة (hL/hR) تنعكس
                      بالعكس (تصير مقبض البداية يسار ومقبض النهاية يمين) بسبب اتجاه الصفحة RTL */
  }
  /* وضع "ملء العرض" (تكبير=1، بدون سكرول): بعض عناصر المحتوى (آخر علامة زمنية بالمسطرة، أو أي شريط
     له حد أدنى بالبكسل زي 36px) ممكن يفيض شوي عن العرض المحسوب حسابيًا (خصوصًا كل ما طالت مدة الفيديو
     وصغّر المقياس px/ثانية) — بدون هذا الكلاس كان هذا الفيض يطلّع سكرول أفقي غير متوقع فيبان الشريط
     "أعرض من الشاشة" رغم إن تكبير=1 المفروض يملأ العرض المرئي بالضبط بدون أي حاجة للتمرير. نقص الفيض
     بدل ما نسمح بالسكرول إلا لما المستخدم يكبّر فعليًا (tlZoom>1، تُدار من JS عبر هذا الكلاس) */
  .tl-scroll.tl-fit{overflow-x:hidden}
  /* height:auto لا 100%: النسبةُ كانت تُقاس على `.tl-scroll` المشدودِ إلى الإطار المرئيّ
     (249) فيرث المحتوى قصرَه وتُقصّ صفوفُه الزائدة. وبauto يعلو بصفوفه فيصدق المؤشّرُ
     الممتدُّ top:0;bottom:0 على كامل الأعمدة بدل سُدسها. */
  /* والحشوةُ الرأسيّةُ هنا لا على المُمرِّر — وهي رأسيّةٌ فقط فلا تنقص العرضَ المكتوب */
  .tl-content{position:relative;height:auto;min-height:20px;flex:0 0 auto;padding:10px 0}
  /* ═══ الفصول والثواني كانت تُكتب في السطر نفسه ═══
     المسطرة كانت عشرين بكسل، والفصل يمتد top:0;bottom:0 والعلامة الزمنية bottom:0 — أي أن
     «حقيقة 12» و«01:20» يُرسمان فوق بعضهما حرفيًا. ومع عشرين فصلًا في مئة ثانية صار السطر
     كتلة حروف متراكبة لا تُقرأ. الآن سطران: الفصول فوق والثواني تحت، ولكلٍّ ارتفاعه. */
  .tl-ruler{
    position:relative;height:40px;margin-bottom:0;
    border-bottom:1px solid var(--line);cursor:pointer;
  }
  .tl-chap{
    position:absolute;top:0;height:17px;
    border-inline-start:1px dashed rgba(139,150,168,.4);
    font-size:var(--t-2xs);color:var(--muted);
    padding-inline-start:4px;white-space:nowrap;overflow:hidden;
    line-height:17px;pointer-events:none;
  }
  .tl-tick{
    position:absolute;bottom:0;height:16px;font-size:var(--t-2xs);color:rgba(139,150,168,.6);
    border-inline-start:1px solid rgba(139,150,168,.25);
    padding-inline-start:2px;pointer-events:none;line-height:16px;
  }
  .tl-playhead{
    position:absolute;top:0;bottom:0;width:2px;
    background:var(--danger);z-index:15;cursor:ew-resize;
    display:none;
  }
  .tl-playhead.show{display:block}
  .tl-playhead::before{
    content:'';position:absolute;top:-6px;right:-6px;
    width:14px;height:10px;background:var(--danger);border-radius:3px 3px 0 0;
  }
  .tl-row-label{
    /* ═══ «الكلام مقصوص» ═══
       وُسِّع العمود (.tl-labels) من ١٢٤ إلى ٢٠٠ لهذا السبب بعينه، والتعليقُ فوقه يشرحه —
       لكنّ الاسم نفسه بقي مسمَّرًا على ١٢٤. فالعمود اتّسع والنصُّ ظلّ يُقصّ عند حدّه القديم،
       وبقي ٦٨ بكسلًا فارغةً إلى جانبه. «روسيا ← أوكرانيا» تصير «روسيا ← أ…» ولا يعرف
       المخرجُ ما هذا الصفّ. يملأ العمودَ الآن مهما تغيّر عرضُه. */
    width:100%;flex:none;
    height:34px;margin-bottom:5px; /* لازم يطابق ارتفاع/فاصل .tl-track-row بالضبط — وإلا صف الأسماء
      (عمود tlLabels) ينحرف تدريجيًا عن صف الأشرطة المقابلة له (عمود tlContent) كل ما زاد عدد الصفوف،
      لأنه بدون ارتفاع/هامش صريح يتقلّص لحجم النص فقط (أصغر من 39px) بينما الشريط المقابل ثابت 39px */
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    display:flex;align-items:center;gap:5px;
  }
  .tl-row-rm{
    flex:none;width:16px;height:16px;border-radius:50%;
    background:rgba(255,95,95,.15);color:var(--danger);
    border:none;font-size:var(--t-xs);line-height:1;cursor:pointer;
    display:grid;place-items:center;
  }
  .tl-row-rm:hover{background:var(--danger);color:#fff}
  .tl-track-row{position:relative;height:34px;margin-bottom:5px}
  /* ═══ الصفوفُ المثبَّتة ═══
     خلفيّةٌ صمّاءُ لازمة: هي تطفو وما تحتها ينزلق تحتها، فبخلفيّةٍ شفّافةٍ يظهر
     الصفّان معًا. وz-index:12 يضعها فوق الصفوف (بلا z-index) وتحت المؤشّر (15) —
     فيظلّ خطُّ الزمن يعبر صفَّ الكاميرا وهو المقصود. */
  .tl-ruler,.tl-labels-spacer{position:sticky;top:0;z-index:12;background:var(--panel)}
  /* و40 = ارتفاعُ المسطرة 34 وهامشُها 6: يقف صفُّ الكاميرا تحتها بالضبط */
  .tl-row-label.tl-pinned{position:sticky;top:40px;z-index:12;background:var(--panel)}
  /* والتدرّجُ يحفظ صبغةَ .tl-cam-row فوق خلفيّةٍ صمّاء: لونٌ واحدٌ يمحوها */
  .tl-track-row.tl-pinned{
    position:sticky;top:40px;z-index:12;
    background:linear-gradient(rgba(217,164,65,.05),rgba(217,164,65,.05)),var(--panel);
  }
  .tl-dock.tl-stuck .tl-ruler,
  .tl-dock.tl-stuck .tl-track-row.tl-pinned,
  .tl-dock.tl-stuck .tl-row-label.tl-pinned{box-shadow:0 4px 8px -2px rgba(0,0,0,.45)}
  /* مجلّدات التايم لاين: رأسٌ مميّزٌ بلونه وحدّه، وأعضاؤه مزاحون قليلًا لتُقرأ التبعية بالعين */
  .tl-folder-label{
    background:rgba(120,170,255,.10);border-inline-start:2px solid rgba(120,170,255,.55);
    border-radius:6px;padding-inline:5px;
  }
  .tl-folder-row{background:rgba(120,170,255,.06);border-radius:6px}
  .tl-fold-tog{
    flex:none;width:16px;height:16px;border:none;background:transparent;cursor:pointer;
    color:var(--muted);font-size:var(--t-xs);line-height:1;display:grid;place-items:center;padding:0;
  }
  .tl-fold-tog:hover{color:var(--ink)}
  .tl-fold-name{
    flex:1;min-width:0;background:transparent;border:none;color:var(--ink);
    font-size:var(--t-sm);font-weight:600;padding:2px 3px;border-radius:4px;
  }
  .tl-fold-name:hover{background:rgba(255,255,255,.06)}
  .tl-fold-name:focus{background:rgba(255,255,255,.10);outline:1px solid rgba(120,170,255,.6)}
  .tl-fold-count{
    flex:none;font-size:var(--t-2xs);color:var(--muted);
    background:rgba(255,255,255,.08);border-radius:8px;padding:1px 6px;
  }
  .tl-fold-span{
    position:absolute;top:9px;height:16px;border-radius:5px;
    background:rgba(120,170,255,.18);border:1px solid rgba(120,170,255,.45);
    pointer-events:none;
  }
  .tl-fold-span.packed{
    top:5px;height:24px;background:rgba(120,170,255,.30);
    color:var(--ink);font-size:var(--t-2xs);line-height:24px;text-align:center;
    overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-inline:6px;
  }
  .tl-row-label.tl-in-folder{padding-inline-start:14px}
  .tl-fold-btn{
    flex:none;width:18px;height:18px;border:none;background:transparent;cursor:pointer;
    font-size:11px;line-height:1;padding:0;border-radius:4px;opacity:.45;
    display:grid;place-items:center;
  }
  .tl-fold-btn:hover{opacity:1;background:rgba(120,170,255,.20)}
  .tl-row-label.tl-in-folder .tl-fold-btn{opacity:.9}
  .tl-cam-row{background:rgba(217,164,65,.05);border-radius:6px}
  .tl-kf{
    position:absolute;top:50%;width:13px;height:13px;
    background:var(--accent2);border:2px solid var(--accent-ink);
    transform:translate(-50%,-50%) rotate(45deg);
    cursor:grab;box-shadow:0 1px 4px rgba(0,0,0,.5);z-index:5;
  }
  .tl-kf:hover{background:#fff}
  .tl-kf:active{cursor:grabbing}
  .tl-kf.whip{background:var(--danger);border-color:#3a0808}
  .tl-kf.whip:hover{background:#ff9494}
  .tl-kf.spiral{background:#B9793F;border-color:#2A1A0A}
  .tl-kf.spiral:hover{background:#D9A441}
  .tl-kf.dolly{background:#ffb545;border-color:#3a2408}
  .tl-kf.dolly:hover{background:#ffd08a}
  /* حركات الكاميرا المركّبة الست بين لقطتين مسجّلتين — نفس عائلة اللون البنفسجي المستخدم بشريحة
     tl-cammove-seg (صف المشاهد) عشان يترابطون بصريًا كـ"حركة كاميرا" واحدة بمظهر موحّد بكل مكان */
  .tl-kf.flyAndRotate,.tl-kf.flyRotateTilt,.tl-kf.zoomAndTilt,.tl-kf.panAndZoom,.tl-kf.flyAndTilt,.tl-kf.zoomAndRotate{
    background:#B9793F;border-color:#2A1A0A;
  }
  .tl-kf.flyAndRotate:hover,.tl-kf.flyRotateTilt:hover,.tl-kf.zoomAndTilt:hover,.tl-kf.panAndZoom:hover,.tl-kf.flyAndTilt:hover,.tl-kf.zoomAndRotate:hover{
    background:#D9A441;
  }
  /* top:22% (بدل 50% الافتراضي) — لو معيّنات تتبع الحدود/العلم انضمّت لنفس صف اسم الدولة (دولة مميزة
     مدموجة بصف الاسم بدل صف منفصل)، ما تتراكب فوق معيّن لحظة ظهور الاسم (dot الرئيسي، top:50%) ولا
     فوق معيّنات الألوان (colorstop، top:80%) — ثلاث طبقات واضحة بنفس الشريط */
  .tl-kf.hlborder{background:#B9793F;border-color:#2A1A0A;top:22%}
  .tl-kf.hlborder:hover{background:#D9A441}
  .tl-kf.hlflag{background:#5fd98a;border-color:#0a3a1c;top:22%}
  .tl-kf.hlflag:hover{background:#9df0b8}
  /* معيّن توقيت بداية "رسم يدوي" (خط/سهم/دائرة) — شفاف شوي لحد ما المستخدم يسحبه أول مرة (يعني لسا
     بالتوقيت التلقائي الافتراضي)، ويصير معتّم كامل بعد أول سحب (توقيت يدوي محدد فعليًا) */
  .tl-kf.anndraw{background:var(--accent2);border-color:#3a2a08}
  .tl-kf.anndraw:hover{background:#ffe29c}
  .tl-kf.anndraw.auto{opacity:.55}
  /* معيّن "يختفي عند" لطبقات التعتيم/سبوت لايت — لون مختلف تمامًا عن معيّن الظهور (anndraw الأصفر)
     عشان يتميّز فورًا كـ"نهاية" مو "بداية" ثانية بنفس الصف */
  .tl-kf.shadeend{background:#ff8a5c;border-color:#3a1c08}
  .tl-kf.shadeend:hover{background:#ffb18c}
  .tl-kf.colorstop{
    top:80%;width:10px;height:10px;border-radius:50%;
    transform:translate(-50%,-50%);z-index:4;border-width:1.5px;
  }
  .tl-kf.colorstop:hover{filter:brightness(1.35)}
  /* معيّن "لون خط النيون الثاني/التالي" — شكل مثلث بدل دائرة عشان يتميّز فورًا عن معيّن البداية
     الأساسي بنفس الصف (خصوصًا إنه بنفس ارتفاع الشريط تقريبًا وممكن يتقارب منه) */
  .tl-kf.colorstop.tri{
    top:80%;width:0;height:0;border-radius:0;background:transparent!important;
    border-left:6px solid transparent;border-right:6px solid transparent;
    border-bottom:11px solid #fff;border-top:none;
    transform:translate(-50%,-35%);box-shadow:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
  }
  .tl-kf.colorstop.tri:hover{filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) brightness(1.35)}
  /* معيّن "نقطة حركة" (motion waypoint) لصور الذكاء الاصطناعي — مثلث ذهبي بنفس ارتفاع صف البداية/النهاية
     (top:50% الافتراضي) عشان يتميّز فورًا كنقطة "حركة" مختلفة عن معيّن البداية (دبوس) ومعيّن النهاية (برتقالي) */
  .tl-kf.motionwp{
    width:0;height:0;border-radius:0;background:transparent!important;
    border-left:6px solid transparent;border-right:6px solid transparent;
    border-bottom:11px solid #ffcc33;border-top:none;
    transform:translate(-50%,-35%);box-shadow:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
  }
  .tl-kf.motionwp:hover{filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) brightness(1.35)}

  /* ═══ النسخة الإنجليزية: ما لا تقلبه الخصائص المنطقية وحدها ═══
     أغلب التخطيط مكتوب بخصائص منطقية (margin-inline، inset-inline) فينقلب مع dir وحده.
     يبقى ما فُرض عليه اتجاهٌ صريح، والخطّ: بلِكس العربي جميلٌ للعربية، والإنجليزية أوضح
     بخطٍّ لاتيني صريح. */
  /* كانت 'Inter' هنا، وهي **غير محمَّلةٍ في المشروع كلّه**: لا في رابط جوجل ولا في أيّ
     ‎@font-face‎ ولا ‎@import‎ — مطابقةٌ واحدةٌ يتيمةٌ في هذا السطر. فالواجهةُ الإنجليزيّةُ
     كانت تسقط صامتةً إلى Segoe UI منذ كُتب السطر، ولا شيءَ يشتكي. و«ريدكس برو» مصمَّمةٌ
     للقراءة على الشاشة ومحمَّلةٌ سلفًا في الرابط، فتُنجز المقصودَ بلا عائلةٍ سادسةَ عشرة. */
  html.mm-en body{font-family:'Readex Pro','Segoe UI',system-ui,-apple-system,Arial,sans-serif}
  html.mm-en .tl-label{direction:ltr}
  html.mm-en #tlClipMenu{direction:ltr}
  /* نصوصٌ طويلة بالإنجليزية تحتاج فاصلًا ألطف داخل الأعمدة الضيقة */
  html.mm-en .hint,html.mm-en label{hyphens:auto}


  /* ═══ شبكة رايات الإمبراطوريات ═══
     الراية هي الزرّ لا زخرفةً بجانبه: المخرج يعرف العثمانية من رايتها أسرع من قراءة اسمها.
     نسبة 3:2 لكل راية كي تُقرأ كعلم، والاسم تحتها والحقبة أصغر — ثلاث مراتب بصرية لا واحدة. */
  .empire-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;
    max-height:420px;overflow-y:auto;padding:2px;
  }
  .empire-card{
    display:flex;flex-direction:column;gap:4px;padding:6px 5px 7px;
    background:var(--panel3);border:1px solid var(--line2);border-radius:var(--r-sm);
    cursor:pointer;text-align:center;transition:border-color .12s,transform .12s;
  }
  .empire-card:hover{border-color:var(--accent);transform:translateY(-1px)}
  .empire-card:active{transform:translateY(0)}
  .empire-flag{
    width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px;
    background:#241d17;box-shadow:0 1px 3px rgba(0,0,0,.45);
    display:flex;align-items:center;justify-content:center;
    font-size:var(--t-lg);font-weight:700;color:rgba(255,255,255,.92);
  }
  .empire-name{
    font-size:var(--t-2xs);font-weight:600;line-height:1.3;
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  }
  .empire-era{font-size:9px;opacity:.55;line-height:1.2}
  .empire-count{font-size:9px;opacity:.75}
  .empire-empty{grid-column:1/-1;opacity:.6;font-size:var(--t-2xs);padding:10px;text-align:center}
  /* ═══ شريط الظهور: مدّة العنصر على الخريطة، ومنه يُقصّ ═══
     كان بلا التقاطٍ للفأرة (pointer-events:none) ما دام قطعةً واحدة. ثمّ أعطيناه في الشفرة
     مقابضَ سحبٍ وطرفين… فلم يتحرّك شيء، لأنّ السطر أعلاه يمنع وصول الفأرة إليه أصلًا.
     وأسوأ من العيب أنّ اختباري مرّ: كان يُطلق الأحداث على العنصر مباشرة بـdispatchEvent،
     وهي تتجاهل pointer-events تمامًا — فشهد بأنّ ما لا يعمل يعمل. الآن يلتقط الفأرة،
     والمعيّنات فوقه بترتيب أعلى فتبقى تُسحب كما اعتاد المخرج. */
  .tl-span{
    position:absolute;top:50%;height:13px;transform:translateY(-50%);
    background:rgba(217,164,65,.16);border:1px solid rgba(217,164,65,.30);
    border-radius:var(--r-sm);pointer-events:auto;cursor:grab;z-index:0;
  }
  .tl-span:hover{background:rgba(217,164,65,.26);border-color:rgba(217,164,65,.5)}
  .tl-span:active{cursor:grabbing}
  .tl-span.cut{
    background:linear-gradient(180deg,rgba(217,164,65,.55),rgba(214,106,74,.55));
    border-color:rgba(255,255,255,.34);pointer-events:auto;cursor:grab;
    box-shadow:0 1px 5px rgba(0,0,0,.35);
  }
  .tl-span.cut:hover{filter:brightness(1.15)}
  .tl-span.cut:active{cursor:grabbing}
  .tl-sh{position:absolute;top:0;bottom:0;width:7px;cursor:ew-resize;background:rgba(0,0,0,.22)}
  .tl-shl{left:0;border-radius:var(--r-sm) 0 0 var(--r-sm)}
  .tl-shr{right:0;border-radius:0 var(--r-sm) var(--r-sm) 0}
  .tl-bar{
    position:absolute;top:2px;bottom:2px;
    background:linear-gradient(180deg,#D9A441,var(--accent) 55%,var(--accent2));
    border-radius:var(--r-sm);display:flex;align-items:center;
    min-width:36px;cursor:grab;
    box-shadow:0 2px 6px rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.3);
  }
  /* شريحة حركة كاميرا تلقائية (orbit/cameraMove) بصف "🎥 الكاميرا" — تمتد طول مدة المشهد كامل (مو
     نقطة وحدة زي اللقطات المسجّلة يدويًا)، عشان توضح بصريًا وين فعليًا فيه حركة كاميرا شغّالة بالفيديو */
  .tl-cammove-seg{
    position:absolute;top:4px;bottom:4px;
    background:linear-gradient(180deg,rgba(185,140,255,.32),rgba(217,164,65,.4));
    border:1px dashed rgba(201,171,255,.75);border-radius:var(--r-xs);
    display:flex;align-items:center;overflow:hidden;pointer-events:none;z-index:1;
  }
  .tl-cammove-seg span{
    font-size:var(--t-2xs);font-weight:600;color:#EDE7DB;white-space:nowrap;
    padding:0 6px;text-shadow:0 1px 2px rgba(0,0,0,.6);
  }
  .tl-bar.snap{box-shadow:0 0 0 2px var(--accent2),0 2px 6px rgba(0,0,0,.35)}
  .tl-bar:hover{filter:brightness(1.08)}
  .tl-bar:active{cursor:grabbing}
  .tl-label{
    flex:1;font-size:var(--t-2xs);font-weight:600;color:var(--accent-ink);
    padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    direction:rtl;pointer-events:none;text-shadow:0 1px 0 rgba(255,255,255,.25);
    /* pointer-events:none مقصود: النقر يمرّ للصف الأب حيث المستمع الذي يفتح اللوحة ويطير للخريطة */
  }
  .tl-h{
    width:10px;align-self:stretch;cursor:ew-resize;flex:none;
    background:rgba(0,0,0,.2);position:relative;
  }
  .tl-h::after{
    content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:2px;height:14px;background:rgba(255,255,255,.65);border-radius:var(--r-xs);
  }
  .tl-hl{border-radius:6px 0 0 6px}
  .tl-hr{border-radius:0 6px 6px 0}
  .tl-h:hover{background:rgba(0,0,0,.4)}
  .tl-h:hover::after{background:#fff}
  /* ═══ وهامشُه هامشُ الصفّ ═══
     صفُّه المقابل `.tl-track-row` يحمل margin-bottom:5px، وهذا لا يحمل شيئًا
     (`*{margin:0}`) — فينزل كلُّ صفٍّ بعد التلميح خمسةَ بكسلاتٍ عن اسمه. قِيس:
     الصفوفُ قبله انزياحُها صفرٌ وبعدَه خمسة. وflex:none كأخيه .tl-row-label. */
  .tl-empty-hint{font-size:var(--t-xs);color:var(--muted);padding:6px 2px;margin-bottom:5px;flex:none}
  .tl-snapline{
    position:absolute;top:0;bottom:0;width:1px;
    background:var(--accent2);z-index:14;pointer-events:none;display:none;
  }
  .tl-snapline.show{display:block}

  /* ═══════════════════════════════════════════════════════════════════
     طبقة الهوية: «طاولة المونتاج الوثائقية»
     تأتي في آخر الملف عمدًا — لا تُعيد كتابة المكوّنات بل تُهذّبها.
     المبدأ: الفصل بين الأسطح بفرق الإضاءة لا بخطّ حول كل صندوق، ولاتينيةٌ
     بخط رقعة كلاسيكي للأرقام والعناوين الإنجليزية (العربية تبقى بخطها).
     ═══════════════════════════════════════════════════════════════════ */

  /* حبيبات فيلم خفيفة جدًا — تكسر «نظافة» الشاشة الرقمية وتعطي إحساس مادة */
  body::after{
    content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.03;
    background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px);
  }

  /* الترويسة: العلامة بخط عرض لاتيني، والوصف يخفت */
  header{background:var(--panel);border-bottom:1px solid var(--line)}
  header h1{font-size:var(--t-lg);font-weight:600;letter-spacing:0}
  header p{color:var(--faint)}
  header .logo{
    background:linear-gradient(140deg,var(--accent),#8E3524);
    color:#F6EFE2;border-radius:var(--r-sm);
  }

  /* رفّ التبويبات: العلامة النشطة شريط أحمر لا خلفية ملوّنة */
  .rail{background:var(--bg);border-inline-start:1px solid var(--line);border-inline-end:0}
  .rail .tab-btn{position:relative;border-radius:var(--r-sm)}
  .rail .tab-btn.active{
    background:rgba(194,74,52,.10);border-color:transparent;color:var(--accent);
  }
  .rail .tab-btn.active::before{
    content:'';position:absolute;inset-inline-end:-8px;top:50%;transform:translateY(-50%);
    width:2px;height:20px;border-radius:var(--r-pill);background:var(--accent);
  }

  /* الأقسام: بلا حدّ حول الصندوق — سطحٌ أفتح وخطّ شعري تحت العنوان فقط */
  aside{background:var(--panel)}
  .step{
    background:var(--panel2);
    border:1px solid transparent;
    border-radius:var(--r-md);
    box-shadow:none;
  }
  .step:hover{border-color:var(--line)}
  .step h2{
    font-size:var(--t-xs);font-weight:600;color:var(--muted);letter-spacing:.3px;
  }
  .step .step-body{border-top:1px solid var(--line)}

  /* البطاقة البطلة: تمييزها لونيّ لا حجميّ */
  .ai-scenario-card{
    background:
      radial-gradient(120% 100% at 100% 0%, rgba(194,74,52,.10), transparent 62%),
      var(--panel2);
    border:1px solid rgba(194,74,52,.24);
    border-radius:var(--r-md);
  }
  .ai-scenario-card h2{color:var(--ink);font-size:var(--t-md)}

  /* الحقول: بلا حدّ في السكون، والحدّ يظهر عند التركيز فقط — يقلّ الضجيج كثيرًا */
  input[type=text],input[type=number],textarea,select{
    background:var(--panel3);border-color:transparent;
  }
  input[type=text]:focus,input[type=number]:focus,textarea:focus,select:focus{
    border-color:var(--accent);background:#221C16;
  }

  /* عناصر القوائم */
  .fact{
    background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  }
  .fact .dot{
    font-family:var(--font-display);font-size:var(--t-sm);
    background:var(--panel3);color:var(--accent);border-radius:var(--r-xs);
  }

  /* الأزرار: زوايا أقرب للحادّة — طابع أرشيفي لا تطبيق جوال */
  .btn{border-radius:var(--r-xs)}
  .btn.primary{
    background:var(--accent);border-color:var(--accent);color:#F8F1E6;font-weight:600;
  }
  .btn.primary:hover{background:#D2573F;border-color:#D2573F}

  /* أي لاتينية أو رقم داخل عنصر يحمل هذا الصنف يأخذ خط العرض */
  .display,.tl-time,.tl-dur{font-family:var(--font-display);letter-spacing:.4px}

/* ═══ بطاقة الذكاء الاصطناعي تُطوى ككتلة واحدة ═══
   كانت مفروشة دائمًا فوق التبويبات كلها — عنوانٌ ووصف وصندوق نصّ بارتفاع 260 بكسل ومفتاح صوت
   وقائمة أصوات وصندوق أوامر — فتدفع أدوات الخريطة كلها خارج الشاشة. الآن رأسها زرّ يطويها
   ويفتحها، وحالتها محفوظة، وتنطوي وحدها بعد أول بناء ناجح. */
.ai-scenario-card #aiCardHead:hover{ color:var(--accent2) }
.ai-scenario-card #aiCardHead:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm) }
.ai-scenario-card.collapsed #aiCardBody{ display:none }
.ai-scenario-card.collapsed #aiCardChevron{ transform:rotate(-90deg) }
.ai-scenario-card.collapsed{ padding-bottom:10px }

/* المعاينة والتصدير مثبّتان أسفل اللوحة خارج التبويبات — آخر فعل في العمل ويُحتاج من أي تبويب */
/* وتنسيقُ .pinned-actions حُذف مع موضعه: صار التوليدُ تبويبًا لا شريطًا
   ملصقًا أسفل اللوحة — وشيفرةٌ بلا موضعٍ تبدو حراسةً وليست بها. */
.tab-panel[data-panel="output"] .step h2{ font-size:var(--t-sm); color:var(--muted) }

/* بطاقة المساعد: أصغر وأهدأ من بطاقة البناء، وتبقى مفتوحة لأنها تُستعمل أثناء الشغل لا قبله */
.ai-assist-card{
  background:var(--panel2, #141110);
  border:1px solid var(--line);
  border-radius:var(--r-md, 10px);
  padding:12px 14px;
  margin:0 0 12px;
}
.ai-assist-card h2{ font-size:var(--t-md); margin:0 }
.ai-assist-card #aiAssistHead:hover{ color:var(--accent2) }
.ai-assist-card #aiAssistHead:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm) }
.ai-assist-card.collapsed #aiAssistBody{ display:none }
.ai-assist-card.collapsed #aiAssistChevron{ transform:rotate(-90deg) }
.ai-assist-card #scenarioEditBox{ margin-top:8px }