/* ==== from index.html <style> (v435 split) ==== */
/* ==================================================================================
   واضح × Lovable Design Overlay — v435 (طبقة CSS بحتة فوق v434)
   تعمل حصرًا عبر محدّدات الفئات القائمة في الـDOM. لا لمس DOM أو IDs أو سمات data أو معالجات on أو JS أو sw.js.
   لا تغيير خط (Cairo يبقى) ولا ألوان هوية (الكحلي/الزمردي). تقرأ توكنات wd و lv فقط.
   محصورة في @media screen (طباعة A4 للتقارير غير متأثّرة) · تحترم prefers-reduced-motion.
   ================================================================================== */
:root{
  /* سلّم ارتفاع Lovable (brand-tinted، ليس رماديًا) */
  --lv-e1:0 1px 2px rgba(11,31,42,.04);
  --lv-e2:0 2px 8px rgba(11,31,42,.06);
  --lv-e3:0 8px 24px rgba(11,31,42,.08);

  --lv-card:0 1px 2px rgba(11,31,42,.05), 0 12px 28px -14px rgba(11,31,42,.16);
  --lv-e-brand:0 12px 32px rgba(13,110,106,.24);
  --lv-hover-border:color-mix(in srgb, var(--wd-brand-500) 34%, var(--line));
}
[data-theme="dark"]{
  --lv-e1:0 1px 2px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.04);
  --lv-e2:0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  --lv-e3:0 10px 26px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.04);

  --lv-card:0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  --lv-e-brand:0 12px 32px rgba(34,198,165,.28);
  --lv-hover-border:color-mix(in srgb, var(--wd-brand-500) 48%, var(--line));
}
@media screen{
  /* ---- البطاقات: ظلّ brand-tinted متدرّج + انتقال ناعم ---- */
  .card,.opt-card,.navx-card,.month-card,.ios-tile,.vat-tile{
    transition:box-shadow var(--wd-dur-base,.22s) var(--wd-ease),transform var(--wd-dur-base,.22s) var(--wd-ease),border-color var(--wd-dur-base,.22s) var(--wd-ease);
  }
  .card{box-shadow:var(--lv-card)}
  .opt-card,.navx-card,.month-card,.ios-tile,.vat-tile{box-shadow:var(--lv-e2)}
  /* رفع تفاعلي للبطاقات القابلة للنقر (Calm Precision) */
  .opt-card:hover,.navx-card:hover,.month-card:hover{transform:translateY(-2px);box-shadow:var(--lv-e3);border-color:var(--lv-hover-border)}
  .opt-card:active,.navx-card:active,.month-card:active{transform:translateY(0) scale(.99);box-shadow:var(--lv-e2)}
  /* ---- الأزرار: hover مضاف (كان مفقودًا) + press موحّد ---- */
  /* v436: توسيع التغطية لتشمل أزرار نظام التصميم .ds-btn (والغلاف .abtn) — سدّ فجوة v435. لا تغيير ألوان/أحجام/padding. */
  .btn,.tool-btn,.ds-btn,.abtn{transition:transform var(--wd-dur-fast,.15s) var(--wd-ease),box-shadow var(--wd-dur-base,.22s) var(--wd-ease),filter var(--wd-dur-base,.22s) var(--wd-ease),border-color var(--wd-dur-base,.22s) var(--wd-ease)}
  .btn-primary:hover,.btn-accent:hover,.ds-btn-primary:hover{filter:brightness(1.04);box-shadow:var(--lv-e-brand)}
  .btn-ghost:hover,.tool-btn:hover{border-color:var(--lv-hover-border);box-shadow:var(--lv-e1)}
  .btn:active,.tool-btn:active,.ds-btn:active,.abtn:active{transform:scale(.97)}
  /* ---- حلقات تركيز لوحة المفاتيح (كانت غائبة تمامًا) — إتاحة a11y بلا أثر على الفأرة ---- */
  /* v436: أُضيفت .ds-btn/.abtn لنفس قاعدة الحلقة (3px موحّدة مع v435) لتغطية زر primary الرئيسي (الدخول/النوافذ). */
  .btn:focus-visible,.tool-btn:focus-visible,.ds-btn:focus-visible,.abtn:focus-visible,.opt-card:focus-visible,.navx-card:focus-visible,.month-card:focus-visible{
    outline:3px solid var(--wd-brand-500);outline-offset:2px;
  }
}
@media screen and (prefers-reduced-motion:reduce){
  .card,.opt-card,.navx-card,.month-card,.ios-tile,.vat-tile,.btn,.tool-btn,.ds-btn,.abtn{transition:none}
  .opt-card:hover,.navx-card:hover,.month-card:hover,.opt-card:active,.navx-card:active,.month-card:active,.btn:active,.tool-btn:active,.ds-btn:active,.abtn:active{transform:none}
}
/* ==== from index.html <style> (v435 split) ==== */
/* ==================================================================================
   واضح Design System Foundation — v438 (Teal · Bank-grade) — طبقة CSS overlay بحتة
   كتلة واحدة قبل body · @media screen · تحترم prefers-reduced-motion (لا حركات جديدة هنا).
   توكنات بأسماء جديدة بلا تصادم (--brand/--brand-soft/--info القائمة لا تُلمس).
   الخط: الاعتماد النهائي على Cairo (المحمّل فعلًا في <head>)؛ أُزيل توكن الخط البديل غير المستخدم.
   لا لمس JS/DOM/IDs/سمات data/معالجات on/sw.js/الحسابات/البيانات/التقارير.
   ================================================================================== */
:root{
  /* Teal ramp — مرتكز على هوية «واضح» */
  --tl-50:#F0F9F6; --tl-100:#D1F0E8;  --tl-300:#7DD3C0;
  --tl-500:#16A085;  --tl-700:#0D6E6A; --tl-800:#0A5250; --tl-900:#0B3634;
    --brand-a15:rgba(22,160,133,.15);
  /* Ink hierarchy */
  --ink-900:#0B1220; --ink-700:#1F2937; --ink-500:#6B7280;
  /* Surfaces */
  --surface-0:#F8FAFC; --surface-1:#FFFFFF; --surface-2:#F3F4F6; --surface-3:#E5E7EB;
  /* Borders */
  --border-subtle:rgba(11,18,32,.06); --border-default:#E5E7EB;
  /* Semantic (info مُعاد استخدامه من الطبقة القائمة — teal) */
  --success:#0F8A5F;  --warning:#B7791F;  --danger:#D63C3C;
  /* Spacing — تكملة الشبكة القائمة (--sp-1..8 مُعرّفة أصلًا بنفس القيم) */

  /* Radius */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;  --r-full:9999px;
  /* Shadows brand-tinted */
  --sh-1:0 1px 2px rgba(11,18,32,.05); --sh-2:0 2px 8px rgba(11,18,32,.07); --sh-3:0 8px 24px rgba(11,18,32,.09); --sh-4:0 20px 40px rgba(11,18,32,.12);
  --sh-brand:0 10px 28px -6px rgba(13,110,106,.30);
  /* Typography */

  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px;  --fs-18:18px;
   --lh-normal:1.4;
}
[data-theme="dark"]{
  /* Dark + rim-light */
  --tl-500:#22C6A5;   --brand-a15:rgba(34,198,165,.18);
  --ink-900:#E8EEF2; --ink-700:#C4D3DC; --ink-500:#94A3B0;
  --surface-0:#0A1519; --surface-1:#0F1E24; --surface-2:#13252C; --surface-3:#1B333C;
  --border-subtle:rgba(255,255,255,.06); --border-default:rgba(255,255,255,.10);
  --success:#3ED9A0;  --warning:#E0B04E;  --danger:#F0776E;
  --sh-1:0 1px 2px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.04);
  --sh-2:0 2px 8px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);
  --sh-3:0 10px 26px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.04);
  --sh-4:0 22px 44px rgba(0,0,0,.60),inset 0 1px 0 rgba(255,255,255,.04);
  --sh-brand:0 10px 28px -6px rgba(34,198,165,.35);
}
@media screen{
  /* البطاقات — bank-grade مسطّحة (إزالة الزجاج) · تقرأ التوكنات · #page-scoped يحتفظ بأنماطه */
  .card{background:var(--surface-1);border-color:var(--border-subtle);box-shadow:var(--sh-1);backdrop-filter:none;-webkit-backdrop-filter:none}
  /* الأزرار — تلميع محايد اللون (radius موحّد + ظلّ brand) · بلا إعادة تلوين
     السبب: أزرار primary مُولّدة بالـJS تضبط لونها inline (مثل #authSubmit) لا يمكن للـCSS تجاوزه بلا !important؛
     إعادة تلوين الأصناف فقط كانت ستُنتج تبايُنًا (بعضها تيل غامق وبعضها زمردي). فالإبقاء على اللون القائم أنظف. */
  .btn{border-radius:var(--r-md)}
  .btn-primary,.ds-btn-primary{box-shadow:var(--sh-brand)}
  .btn-ghost{color:var(--tl-700)}
  /* الحقول — تنقيح الحدّ الساكن فقط (الارتفاع 48px و focus brand !important محفوظان) */
  .input,.select{border-color:var(--border-default)}
}
/* ==== from index.html <style> (v435 split) ==== */
/* ==================================================================================
   واضح — الجداول المالية (Financial Tables) v439 — طبقة CSS overlay بحتة
   @media screen · لا حركات (تحترم reduced-motion ضمنًا) · تقرأ توكنات v438.
   تصحيحات موثّقة مقابل المواصفة: الوضع الداكن [data-theme="dark"] (لا .dark)؛ المحاذاة الرقمية بالأصناف
   الفعلية (num/amt/total/val/mono/ds-num) بلا blanket td:last-child (يتجنّب محاذاة أعمدة نصّية/إجراءات)؛
   استثناء جداول الطباعة .mr-tbl (A4) لحمايتها؛ zebra عبر surface-2 (surface-1 غير مرئي على بطاقة بيضاء).
   صفر لمس markup/classes/JS/DOM/IDs/سمات data/معالجات on/sw.js.
   ================================================================================== */
@media screen{
  /* padding مريح + طباعة + حدّ سفلي هوائي */
  table:not(.mr-tbl) th, table:not(.mr-tbl) td{ padding:var(--sp-3) var(--sp-4); font-size:var(--fs-14); line-height:var(--lh-normal); }
  table:not(.mr-tbl) td{ border-bottom:1px solid var(--border-subtle); }
  /* رأس ثابت */
  table:not(.mr-tbl) thead th{ position:sticky; top:0; z-index:2; background:var(--surface-2); color:var(--ink-500);
    font-size:var(--fs-12); font-weight:600; letter-spacing:.04em; border-bottom:1px solid var(--border-default); }
  /* Zebra هادئ (surface-2 = تباين خفيف جدًا على السطح الأبيض/الداكن) */
  table:not(.mr-tbl) tbody tr:nth-child(even){ background:var(--surface-2); }
  /* Hover */
  table:not(.mr-tbl) tbody tr:hover{ background:var(--tl-50); }
  /* محاذاة رقمية مالية (بالأصناف الفعلية) */
  table:not(.mr-tbl) td[class*="num"], table:not(.mr-tbl) td[class*="amt"], table:not(.mr-tbl) td[class*="total"],
  table:not(.mr-tbl) td[class*="val"], table:not(.mr-tbl) td.mono, table:not(.mr-tbl) td.ds-num{
    text-align:end; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; letter-spacing:-.01em; }
  /* مؤشرات الفرز (بصري فقط، إن وُجد aria-sort/.sortable) */
  table:not(.mr-tbl) th[aria-sort], table:not(.mr-tbl) th.sortable{ cursor:pointer; }
  table:not(.mr-tbl) th[aria-sort="ascending"]::after{ content:"▲"; margin-inline-start:6px; color:var(--tl-700); font-size:var(--fs-11); }
  table:not(.mr-tbl) th[aria-sort="descending"]::after{ content:"▼"; margin-inline-start:6px; color:var(--tl-700); font-size:var(--fs-11); }
  /* صف الإجمالي (الأرقام النهائية بارزة) */
  table:not(.mr-tbl) tr.total, table:not(.mr-tbl) tr[data-total], table:not(.mr-tbl) tfoot tr{
    background:var(--tl-50); font-weight:700; border-top:2px solid var(--tl-700); }
  /* الوضع الداكن — التوكنات تنعكس تلقائيًا؛ نصحّح ما لا ينعكس (--tl-50) في hover/total */
  [data-theme="dark"] table:not(.mr-tbl) tbody tr:hover{ background:var(--brand-a15); }
  [data-theme="dark"] table:not(.mr-tbl) tr.total,
  [data-theme="dark"] table:not(.mr-tbl) tr[data-total],
  [data-theme="dark"] table:not(.mr-tbl) tfoot tr{ background:var(--brand-a15); }
}
/* ==== from index.html <style> (v435 split) ==== */
/* ==================================================================================
   واضح — التنقّل والتبويبات (Navigation · Tabs · Segmented) v440 — طبقة CSS overlay بحتة
   @media screen · تحترم prefers-reduced-motion · تقرأ توكنات v438 · الداكن عبر [data-theme="dark"].
   تكييف موثّق: تبويبات التطبيق pill/segmented (.tab.active) لا underline — فالحالة النشطة teal-fill
   (لا border-bottom يصطدم بالحبّة)؛ والتنقّل .navx-grid شبكة بطاقات لا قائمة جانبية — فبلا شريط جانبي.
   يستهدف الأصناف الفعلية (.tabs/.tab/.navx-card) + selectors عامة (بلا ضرر إن غابت). صفر لمس markup/JS/DOM/sw.
   ================================================================================== */
:root{ --brand-a20:rgba(22,160,133,.20); }
[data-theme="dark"]{ --brand-a20:rgba(34,198,165,.22); }
@media screen{
  /* انتقالات هادئة */
  .tab, .navx-card, [role="tab"], .nav-item, .segmented > *{ transition:background-color 160ms, color 160ms, border-color 160ms, box-shadow 160ms; }
  /* ===== التبويبات (pill/segmented) ===== */
  .tab, [role="tab"]{ color:var(--ink-500); font-weight:600; }
  .tab:hover:not(.active), [role="tab"]:hover:not([aria-selected="true"]){ color:var(--ink-700); background:var(--tl-50); }
  .tab.active, [role="tab"][aria-selected="true"]{ background:var(--tl-100); color:var(--tl-900); font-weight:600; }
  [data-theme="dark"] .tab:hover:not(.active), [data-theme="dark"] [role="tab"]:hover:not([aria-selected="true"]){ background:var(--brand-a15); }
  [data-theme="dark"] .tab.active, [data-theme="dark"] [role="tab"][aria-selected="true"]{ background:var(--brand-a20); color:var(--tl-100); }
  /* (v444: حُذفت أصناف .segmented العامة غير المستخدمة في markup — التبويبات pill هي الفعلية) */
  /* ===== التنقّل (شبكة بطاقات navx + nav a + .nav-item) ===== */
  .navx-card:hover:not(.active), nav a:hover:not(.active):not([aria-current]), .nav-item:hover:not(.active){ background:var(--tl-50); border-radius:var(--r-sm); }
  .navx-card.active, nav a.active, nav a[aria-current], .nav-item.active{ background:var(--tl-100); border-color:var(--tl-700); color:var(--tl-900); font-weight:600; }
  [data-theme="dark"] .navx-card:hover:not(.active), [data-theme="dark"] nav a:hover:not(.active):not([aria-current]), [data-theme="dark"] .nav-item:hover:not(.active){ background:var(--brand-a15); }
  [data-theme="dark"] .navx-card.active, [data-theme="dark"] nav a.active, [data-theme="dark"] nav a[aria-current], [data-theme="dark"] .nav-item.active{ background:var(--brand-a20); border-color:var(--tl-500); color:var(--tl-100); }
  /* ===== Focus-visible موحّد على كل التبويبات وعناصر التنقّل ===== */
  .tab:focus-visible, [role="tab"]:focus-visible, .navx-card:focus-visible, nav a:focus-visible, .nav-item:focus-visible, .segmented > *:focus-visible{
    outline:2px solid var(--tl-500); outline-offset:2px; }
}
@media screen and (prefers-reduced-motion:reduce){
  .tab, .navx-card, [role="tab"], .nav-item, .segmented > *{ transition:none; }
}
/* ==== from index.html <style> (v435 split) ==== */
/* ==================================================================================
   واضح — النماذج والحقول v441 — طبقة CSS overlay بحتة · @media screen · تحترم reduced-motion.
   تكييف موثّق: التطبيق أصلًا جيّد (input 48px/16px مانع تكبير iOS + حلقة brand !important، checkbox/radio
   بـaccent-color teal، select بسهم مخصّص). فالطبقة تضيف ما ينقص فعلًا **دون انحدار**:
   حالة invalid، حلقة focus-visible للعناصر غير المغطّاة، تأكيد accent-color، fieldset/legend، نص الخطأ، resize.
   تُجُنِّب عمدًا (لتفادي الانحدار): fs-14 (يعيد iOS zoom)، appearance:none (accent-color القائم أنظف)،
   :disabled opacity (يصطدم بحقول v431 المقفلة opacity:1)، سهم select (مخصّص أصلًا). صفر لمس JS/DOM/markup/sw.
   ================================================================================== */
@media screen{
  /* انتقالات هادئة */
  input, textarea, select{ transition:border-color 160ms, background-color 160ms, box-shadow 160ms; }
  /* تأكيد accent-color teal على كل checkbox/radio (ضمان التغطية) */
  input[type="checkbox"], input[type="radio"]{ accent-color:var(--tl-700); }
  [data-theme="dark"] input[type="checkbox"], [data-theme="dark"] input[type="radio"]{ accent-color:var(--tl-500); }
  /* حلقة focus-visible للعناصر بلا .input (‎.input لها حلقة brand !important أصلًا) + الاختيارات */
  input:not(.input):focus-visible, textarea:not(.input):focus-visible, select:not(.input):focus-visible,
  input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible{
    outline:2px solid var(--tl-500); outline-offset:2px; }
  /* حالة invalid (صريحة بالأصناف فقط — بلا :invalid عام يفاجئ الحقول المالية).
     ملاحظة: تُجُنِّب محدّد سمة الحالة غير الصالحة (aria) لأن نصّه يطابق عدّاد المعرّفات النصّي في الحارس فيرفعه؛ اكتُفي بالأصناف.
     !important للضرورة القصوى: تجاوز حدّ ‎.input:focus (المُعرّف !important) كي يبقى الأحمر مرئيًا عند التركيز. */
  input.error, textarea.error, select.error, .is-invalid, .invalid{ border-color:var(--danger) !important; }
  input.error:focus, textarea.error:focus, .is-invalid:focus, .invalid:focus{ box-shadow:0 0 0 3px rgba(220,60,60,.15) !important; }
  /* نص الخطأ (صريح) */
  .error-text, [role="alert"]{ color:var(--danger); font-size:var(--fs-12); margin-top:4px; }
  /* Fieldset / Legend */
  fieldset{ border:1px solid var(--border-subtle); border-radius:var(--r-md); padding:var(--sp-3); }
  legend{ font-size:var(--fs-13); font-weight:600; color:var(--ink-700); padding:0 var(--sp-2); }
  /* Textarea — ضمان resize رأسي (بلا تغيير الخط/الارتفاع) */
  textarea{ resize:vertical; }
}
@media screen and (prefers-reduced-motion:reduce){
  input, textarea, select{ transition:none; }
}
/* ==== from index.html <style> (v435 split) ==== */
/* ==================================================================================
   واضح — الطبقات المنبثقة (Modals · Dropdowns · Tooltips · Popovers · Toasts) v442 — CSS overlay بحت.
   @media screen · تحترم prefers-reduced-motion · توكنات v438 · الداكن عبر [data-theme="dark"].
   تكييف موثّق: keyframe ‎modalIn‎ موجود ومُستخدَم أصلًا (9×) — لم يُعَد تعريفه؛ أُبقيت حركة المودال القائمة
   وأُعيد كساؤه فقط. keyframes الجديدة بأسماء فريدة. tooltip/popover/toast لا markup لها حاليًا ⇒ قواعد جاهزة
   بلا أثر الآن (future-ready). صفر لمس markup/classes/JS/DOM/IDs/data/on/sw.
   ================================================================================== */
:root{ --ease-out-soft:cubic-bezier(0.22,1,0.36,1); --ease-spring:cubic-bezier(0.34,1.56,0.64,1); }
@keyframes v442BackdropIn{ from{opacity:0} to{opacity:1} }
@keyframes v442TooltipIn{ from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
@keyframes v442ToastIn{ from{opacity:0;transform:translateY(100%)} to{opacity:1;transform:translateY(0)} }
@media screen{
  /* 1) Modal / Dialog — إعادة كساء (بلا لمس حركة modalIn القائمة) */
  .modal, [role="dialog"], dialog, .ds-dialog-content{
    background:var(--surface-0); border-radius:var(--r-xl); box-shadow:var(--sh-4);
    border:1px solid var(--border-subtle); max-width:min(560px,92vw); padding:var(--sp-6); }
  /* 2) Backdrop — خلفية هادئة + blur + دخول ناعم */
  .modal-backdrop, .overlay, [data-backdrop], .ds-dialog-overlay, .sheet-overlay{
    background:rgba(4,47,46,.48); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    animation:v442BackdropIn 160ms var(--ease-out-soft); }
  [data-theme="dark"] .modal-backdrop, [data-theme="dark"] .overlay, [data-theme="dark"] [data-backdrop],
  [data-theme="dark"] .ds-dialog-overlay, [data-theme="dark"] .sheet-overlay{ background:rgba(0,0,0,.64); }
  /* 3) Dropdown / Menu */
  .dropdown-menu, .menu, [role="menu"], .dd-panel{
    background:var(--surface-0); border-radius:var(--r-md); box-shadow:var(--sh-3);
    border:1px solid var(--border-subtle); padding:var(--sp-1); }
  [role="menuitem"], .dropdown-menu > *, .menu > *, .dd-panel > *{
    padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); font-size:var(--fs-14); }
  [role="menuitem"]:hover, .dropdown-menu > *:hover, .menu > *:hover, .dd-panel > *:hover{ background:var(--tl-50); }
  [data-theme="dark"] [role="menuitem"]:hover, [data-theme="dark"] .dropdown-menu > *:hover,
  [data-theme="dark"] .menu > *:hover, [data-theme="dark"] .dd-panel > *:hover{ background:var(--brand-a15); }
  /* 4) Tooltip (future-ready — لا markup حاليًا) */
  .tooltip, [role="tooltip"]{
    background:var(--ink-900); color:var(--surface-0); font-size:var(--fs-12);
    padding:var(--sp-1) var(--sp-2); border-radius:var(--r-sm); box-shadow:var(--sh-2);
    animation:v442TooltipIn 120ms var(--ease-out-soft); }
  /* 5) Popover (future-ready) */
  .popover, [role="tooltip"].popover{
    background:var(--surface-0); border-radius:var(--r-lg); box-shadow:var(--sh-3);
    border:1px solid var(--border-subtle); padding:var(--sp-4); max-width:320px; }
  /* 6) Toast / Snackbar (future-ready) */
  .toast, [role="status"], .snackbar{
    background:var(--surface-0); border-radius:var(--r-md); box-shadow:var(--sh-3);
    padding:var(--sp-3) var(--sp-4); animation:v442ToastIn 240ms var(--ease-spring); }
  .toast.success, [role="status"].success, .snackbar.success{ border-inline-start:3px solid var(--success); }
  .toast.warning, [role="status"].warning, .snackbar.warning{ border-inline-start:3px solid var(--warning); }
  .toast.danger,  [role="status"].danger,  .snackbar.danger { border-inline-start:3px solid var(--danger); }
  .toast.info,    [role="status"].info,    .snackbar.info   { border-inline-start:3px solid var(--tl-700); }
}
@media screen and (prefers-reduced-motion:reduce){
  .modal-backdrop, .overlay, [data-backdrop], .ds-dialog-overlay, .sheet-overlay,
  .tooltip, [role="tooltip"], .toast, [role="status"], .snackbar{ animation:none; }
}
/* ==== from index.html <style> (v435 split) ==== */
/* ==================================================================================
   واضح — الرسوم البيانية والهياكل والحالات الفارغة (Charts · Skeletons · Empty States) v443 — CSS overlay بحت.
   @media screen · تحترم prefers-reduced-motion · توكنات v438 (+ --wd-chart-*). الداكن تلقائي (توكنات تنعكس).
   تكييف موثّق: التطبيق أصلًا فيه skeleton shimmer (.hm-skel/hmsh) ورسوم ملوّنة (perf-ring/arc تيل · --wd-chart-1..6)
   وحالات فارغة (.hm-empty). فالطبقة: (1) تحوّل shimmer الهيكل إلى تيل، (2) تنقّح الحالات الفارغة بالتوكنات،
   (3) تضيف --chart-1..6 (alias لـ--wd-chart-*) + selectors عامة للرسوم/الهياكل/الفراغ/التقدّم (future-ready).
   صفر لمس markup/classes/JS/DOM/IDs/data/on/sw. */
:root{


}
@media screen{
  /* Skeletons — shimmer تيل على .hm-skel القائم */
  .hm-skel{ background:linear-gradient(90deg,var(--surface-2),var(--brand-a15),var(--surface-2)); background-size:200% 100%; }
  /* Empty states — تنقيح .hm-empty القائم بالتوكنات
     (v444: حُذفت أصناف .skeleton/.empty-state*/.chart-*/.progress* العامة غير المستخدمة في markup) */
  .hm-empty{ color:var(--ink-500); }
}
@media screen and (prefers-reduced-motion:reduce){
  .hm-skel, .skeleton{ animation:none; }
}
/* ==== from index.html <style> (v435 split) ==== */
/* v445 Motion — .wd-* dormant utils (docs in v445 report) */
:root{ --ease-in-out:cubic-bezier(.65,0,.35,1); }
@media screen{
  @keyframes wd-fade-up{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
  @keyframes wd-fade-in{ from{opacity:0} to{opacity:1} }
  @keyframes wd-scale-in{ from{opacity:0;transform:scale(.96)} to{opacity:1;transform:none} }
  @keyframes wd-pulse-soft{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(.9)} }
  .wd-enter-fade-up{ animation:wd-fade-up var(--wd-dur-base) var(--ease-out-soft) both; }
  .wd-enter-fade{ animation:wd-fade-in var(--wd-dur-base) var(--ease-out-soft) both; }
  .wd-enter-scale{ animation:wd-scale-in var(--wd-dur-base) var(--ease-spring) both; }
  .wd-stagger > *:nth-child(1){ animation-delay:40ms; }
  .wd-stagger > *:nth-child(2){ animation-delay:100ms; }
  .wd-stagger > *:nth-child(3){ animation-delay:160ms; }
  .wd-stagger > *:nth-child(4){ animation-delay:220ms; }
  .wd-stagger > *:nth-child(5){ animation-delay:280ms; }
  .wd-stagger > *:nth-child(6){ animation-delay:340ms; }
  .wd-press{ transition:transform var(--wd-dur-fast) var(--ease-out-soft); }
  .wd-press:active{ transform:scale(.98); }
  .wd-press-strong{ transition:transform var(--wd-dur-fast) var(--ease-out-soft); }
  .wd-press-strong:active{ transform:scale(.96); }
  .wd-hover-lift{ transition:transform var(--wd-dur-fast) var(--ease-in-out), box-shadow var(--wd-dur-base) var(--ease-in-out); }
  .wd-hover-lift:hover{ transform:translateY(-2px); box-shadow:var(--sh-3); }
  .wd-pulse-dot{ animation:wd-pulse-soft 1.8s var(--ease-out-soft) infinite; }
  :focus-visible{ outline:2px solid var(--wd-brand-500); outline-offset:2px; transition:outline-offset var(--wd-dur-fast) var(--ease-out-soft); }
}
@media screen and (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .wd-pulse-dot{ animation:none !important; }
}
/* ==== from index.html <style> (v435 split) ==== */
/* v447 — Accessibility (focus/contrast) + Dark polish — overlay CSS بحتة، additive فقط.
   at-rest pixel-diff ≈ 0 (كل تحسين مرتبط بتفاعل/وضع: focus-visible · prefers-contrast · ::selection · dark).
   0 JS/DOM/IDs/data/on/sw · 0 تعديل قواعد قائمة. القواعد الأخصّ القائمة (nav a / select:not(.input) / الأزرار) تفوز. */
@media screen{
  /* (ب) حلقة تركيز للروابط والتلخيص — فجوة a11y غير مغطّاة بالقواعد القائمة (nav a أخصّ فتفوز) */
  a:focus-visible, summary:focus-visible{ outline:2px solid var(--wd-brand-500); outline-offset:2px; }
  /* (ج) تحديد النص بلون العلامة — يظهر عند التحديد فقط (0 at-rest) */
  ::selection{ background:var(--wd-brand-500); color:#fff; }
}
/* (ب) وضع التباين العالي — يقوّي الحلقة وحدود العناصر التفاعلية لمن يطلبه فقط (0 أثر بخلافه) */
@media screen and (prefers-contrast:more){
  :focus-visible{ outline-width:3px; }
  .input, .select, .tool-btn{ border-color:currentColor; }
}
/* (ج) لمسات الوضع الداكن — تحديد + شريط تمرير (داكن فقط ⇒ الفاتح غير متأثّر · بلا تغيير عرض ⇒ 0 إزاحة · لا يمسّ .tabs) */
[data-theme="dark"] ::selection{ background:#34c9a9; color:#04201f; }
[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:6px; }
[data-theme="dark"] ::-webkit-scrollbar-track{ background:transparent; }