/* ==========================================================================
   STC AI VAP — Design System «ds» v1 (W35, 2026-10-23)
   --------------------------------------------------------------------------
   ملف واحد = مصدر واحد للهوية في الواجهة: الألوان والخط والمسافات والحواف
   والظلال وحلقة التركيز، ومعها المكوّنات (أزرار، حقول، بطاقات، مؤشرات،
   جداول، شارات حالة، تنبيهات، تبويبات، نوافذ، حالات التحميل/الفراغ/الخطأ).

   كيف يُستعمل:
   1) الطبقة الأولى — التوكنز (--ds-*) + أسماء المتغيرات القديمة (--bg,
      --panel, --text, --accent ...) مربوطة بها، فكل CSS قديم يرث الهوية
      الجديدة من غير ما يتغيّر سطر فيه.
   2) الطبقة الثانية — مكوّنات .ds-* للشاشات الجديدة (معالج الكاميرا،
      الاستوديو، أي صفحة جديدة). استعملها بدل الأنماط المضمّنة.
   3) الطبقة الثالثة — «الجلد» (skin): يعيد رسم العناصر الموجودة في اللوحة
      الحية (scenario-studio.html) واللوحة القديمة (main.js) ولوحة السحابة
      بنفس المكوّنات، بدون أي تغيير في الـ markup أو الـ ids أو المنطق.
      الجلد لا يغيّر الأبعاد الداخلية لمحرّر السيناريو/المعايرة.

   القواعد الملزمة: كحلي STC ‎#110D5C + ذهبي ‎#EDA909/#FFC01E (لوحة: ‎#f2aa00)،
   Alexandria ثم Cairo/Tajawal/Tahoma، RTL، الفاتح هو الافتراضي، لا حركة ثقيلة
   (وكل الحركة تُلغى مع prefers-reduced-motion). التباين ≥ 4.5:1 لكل نص —
   يتحقق منه edge_runtime_ng/tests/test_wave35_design_tokens.py على هذا الملف.

   ملف شقيق مطابق حرفيًا: cloud/admin/ds.css (نسخة، لا import عبر تطبيقين).
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* brand (branding/brand.json) */
  --ds-navy-950: #070530;
  --ds-navy-900: #0A0740;
  --ds-navy-800: #110D5C;   /* STC primary */
  --ds-navy-700: #251E8C;
  --ds-navy-600: #3A33A8;
  --ds-navy-100: #E4E2F7;
  --ds-navy-50:  #F0EFFB;
  --ds-gold-600: #C98A00;
  --ds-gold-500: #F2AA00;   /* dashboard accent */
  --ds-gold-450: #EDA909;   /* brand accent */
  --ds-gold-400: #FFC01E;
  --ds-gold-50:  #FFF7E0;

  /* neutrals */
  --ds-bg:        #F4F5FA;
  --ds-surface:   #FFFFFF;
  --ds-surface-2: #F7F8FC;
  --ds-surface-3: #EEF0F7;
  --ds-border:    #E2E4EE;
  --ds-border-strong: #C9CDDD;
  --ds-text:      #14163A;
  --ds-text-2:    #474D70;   /* secondary text — 8.2:1 on white, 7.5:1 on bg */
  --ds-text-3:    #5E6486;   /* hints/placeholders — 5.8:1 on white, 5.3:1 on bg */
  --ds-on-navy:   #FFFFFF;
  --ds-on-navy-2: #C9C7EE;   /* sidebar labels — 10:1 on navy */
  --ds-on-navy-3: #9A97D6;   /* sidebar group titles — 6.3:1 on navy */

  /* status — base (brand.json; dots, rails, borders, fills) */
  --ds-ok:   #10915F;
  --ds-warn: #DC9A00;
  --ds-crit: #D92D20;
  --ds-info: #2563EB;
  /* status — text on white / on its soft fill (AA) */
  --ds-ok-text:   #0B6B47;
  --ds-warn-text: #8A5000;
  --ds-crit-text: #B42318;
  --ds-info-text: #1D4ED8;
  --ds-neutral-text: #474D70;
  --ds-ok-bg:   #E7F6EF;
  --ds-warn-bg: #FDF3DC;
  --ds-crit-bg: #FDECEA;
  --ds-info-bg: #E8F0FE;
  --ds-neutral-bg: #EEF0F7;

  /* type */
  --ds-font: "Alexandria", "Cairo", "Tajawal", Tahoma, system-ui, "Segoe UI", sans-serif;
  --ds-font-mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --ds-fs-xs: 12px;
  --ds-fs-sm: 13px;
  --ds-fs-md: 14px;   /* body */
  --ds-fs-lg: 16px;
  --ds-fs-xl: 18px;   /* card titles */
  --ds-fs-2xl: 22px;  /* page title */
  --ds-fs-3xl: 28px;  /* KPI value */
  --ds-lh: 1.6;
  --ds-lh-tight: 1.25;
  --ds-fw-regular: 400;
  --ds-fw-medium: 600;
  --ds-fw-bold: 700;
  --ds-fw-black: 800;

  /* space — 4-pt grid */
  --ds-s-1: 4px;  --ds-s-2: 8px;  --ds-s-3: 12px; --ds-s-4: 16px;
  --ds-s-5: 20px; --ds-s-6: 24px; --ds-s-8: 32px; --ds-s-10: 40px; --ds-s-12: 48px;

  /* radius */
  --ds-r-sm: 6px; --ds-r-md: 10px; --ds-r-lg: 14px; --ds-r-xl: 20px; --ds-r-pill: 999px;

  /* elevation — navy-tinted, soft */
  --ds-e-0: none;
  --ds-e-1: 0 1px 2px rgba(17, 13, 92, .06), 0 1px 3px rgba(17, 13, 92, .05);
  --ds-e-2: 0 4px 14px rgba(17, 13, 92, .08), 0 1px 3px rgba(17, 13, 92, .05);
  --ds-e-3: 0 16px 40px rgba(17, 13, 92, .16), 0 4px 10px rgba(17, 13, 92, .06);

  /* focus — a double ring visible on white AND on navy */
  --ds-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ds-navy-700);
  --ds-focus-on-navy: 0 0 0 2px var(--ds-navy-800), 0 0 0 4px var(--ds-gold-400);

  /* motion */
  --ds-dur: .16s;
  --ds-ease: cubic-bezier(.2, .7, .3, 1);

  /* layout */
  --ds-sidebar-w: 264px;
  --ds-topbar-h: 64px;
  --ds-content-max: 1480px;

  /* ---- legacy aliases: every pre-W35 stylesheet reads these names ---- */
  --bg: var(--ds-bg);
  --panel: var(--ds-surface);
  --panel-2: var(--ds-surface-2);
  --line: var(--ds-border);
  --text: var(--ds-text);
  --muted: var(--ds-text-2);
  --accent: var(--ds-gold-500);
  --accent-2: var(--ds-navy-800);
  --ok: var(--ds-ok-text);
  --warn: var(--ds-warn-text);
  --danger: var(--ds-crit-text);
  --crit: var(--ds-crit);
  --info: var(--ds-info-text);
  --soft-shadow: var(--ds-e-2);
}
/* legacy/cloud put the light tokens on body.theme-light — keep them in step */
body.theme-light {
  --bg: var(--ds-bg); --panel: var(--ds-surface); --panel-2: var(--ds-surface-2);
  --line: var(--ds-border); --text: var(--ds-text); --muted: var(--ds-text-2);
  --accent: var(--ds-gold-500); --accent-2: var(--ds-navy-800);
  --ok: var(--ds-ok-text); --warn: var(--ds-warn-text); --danger: var(--ds-crit-text);
  --info: var(--ds-info-text); --soft-shadow: var(--ds-e-2);
}
/* dark exists only where the operator explicitly switches to it (light is the default) */
body.theme-dark {
  --ds-bg: #0B0A26; --ds-surface: #14123A; --ds-surface-2: #1A1846; --ds-surface-3: #221F55;
  --ds-border: rgba(255, 255, 255, .10); --ds-border-strong: rgba(255, 255, 255, .2);
  --ds-text: #EEF0FA; --ds-text-2: #B9BCDA; --ds-text-3: #9EA2C8;
  --ds-ok-text: #4ADE9B; --ds-warn-text: #FBBF24; --ds-crit-text: #F87171; --ds-info-text: #93B4FF;
  --ds-neutral-text: #B9BCDA;
  --ds-ok-bg: rgba(16, 145, 95, .18); --ds-warn-bg: rgba(220, 154, 0, .18);
  --ds-crit-bg: rgba(217, 45, 32, .2); --ds-info-bg: rgba(37, 99, 235, .2); --ds-neutral-bg: rgba(255, 255, 255, .08);
  --ds-focus: 0 0 0 2px var(--ds-surface), 0 0 0 4px var(--ds-gold-400);
  --bg: var(--ds-bg); --panel: var(--ds-surface); --panel-2: var(--ds-surface-2); --line: var(--ds-border);
  --text: var(--ds-text); --muted: var(--ds-text-2); --ok: var(--ds-ok-text); --warn: var(--ds-warn-text);
  --danger: var(--ds-crit-text); --info: var(--ds-info-text);
}

/* ---------- 2. BASE ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* (no body font-size on purpose: every page keeps its own base size, so the
   builder/studio layouts that were measured at it do not reflow. Components
   below set their sizes explicitly.) */
body {
  font-family: var(--ds-font);
  line-height: var(--ds-lh);
  color: var(--ds-text);
  background: var(--ds-bg);
  -webkit-font-smoothing: antialiased;
}
body.theme-light, body.theme-dark { background: var(--ds-bg); }
::selection { background: rgba(242, 170, 0, .32); color: var(--ds-text); }
:where(a) { color: var(--ds-navy-700); }
:where(a:hover) { color: var(--ds-navy-800); }
:where(code, kbd, samp, pre) { font-family: var(--ds-font-mono); font-size: .92em; }
:where(button, input, select, textarea) { font: inherit; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--ds-focus) !important; border-radius: var(--ds-r-sm); }
:where(h1, h2, h3, h4) { line-height: var(--ds-lh-tight); color: var(--ds-text); }
.ds-num, .cards .card strong, .card strong, .kpi-grid strong { font-variant-numeric: tabular-nums; }
.ds-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- 3. ICONS (inline SVG sprite injected by ds.js; one line style) ---------- */
.ds-icon { width: 18px; height: 18px; flex: 0 0 auto; display: inline-block; vertical-align: -3px;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ds-icon--sm { width: 16px; height: 16px; }
.ds-icon--lg { width: 22px; height: 22px; }

/* ---------- 4. COMPONENTS (.ds-*) ---------- */
/* 4.1 buttons */
.ds-btn {
  --_bg: var(--ds-surface); --_fg: var(--ds-navy-800); --_bd: var(--ds-border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-s-2);
  min-height: 38px; padding: 8px 14px; border-radius: var(--ds-r-md);
  background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd);
  font: inherit; font-size: var(--ds-fs-md); font-weight: var(--ds-fw-bold); line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none;
  transition: background var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}
.ds-btn:hover { background: var(--ds-surface-2); border-color: var(--ds-navy-700); }
.ds-btn:active { background: var(--ds-surface-3); }
.ds-btn--primary { --_bg: var(--ds-gold-500); --_fg: var(--ds-navy-900); --_bd: var(--ds-gold-500); box-shadow: var(--ds-e-1); }
.ds-btn--primary:hover { background: var(--ds-gold-400); border-color: var(--ds-gold-500); }
.ds-btn--navy { --_bg: var(--ds-navy-800); --_fg: #FFFFFF; --_bd: var(--ds-navy-800); }
.ds-btn--navy:hover { background: var(--ds-navy-700); border-color: var(--ds-navy-700); }
.ds-btn--secondary { --_bg: var(--ds-surface); --_fg: var(--ds-navy-800); --_bd: var(--ds-border-strong); }
.ds-btn--ghost { --_bg: transparent; --_fg: var(--ds-navy-800); --_bd: transparent; }
.ds-btn--ghost:hover { background: var(--ds-navy-50); border-color: transparent; }
.ds-btn--danger { --_bg: var(--ds-crit); --_fg: #FFFFFF; --_bd: var(--ds-crit); }
.ds-btn--danger:hover { background: var(--ds-crit-text); border-color: var(--ds-crit-text); }
.ds-btn--danger-soft { --_bg: var(--ds-crit-bg); --_fg: var(--ds-crit-text); --_bd: #F5C2BD; }
.ds-btn--sm { min-height: 30px; padding: 4px 10px; font-size: var(--ds-fs-sm); border-radius: var(--ds-r-sm); }
.ds-btn--lg { min-height: 46px; padding: 10px 20px; font-size: var(--ds-fs-lg); }
.ds-btn--icon { padding: 0; width: 38px; }
.ds-btn--block { width: 100%; }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.ds-btn[aria-busy="true"], .ds-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.ds-btn[aria-busy="true"]::after, .ds-btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--_fg); border-inline-end-color: transparent; animation: ds-spin .7s linear infinite;
}
.ds-btn-group { display: inline-flex; gap: var(--ds-s-2); flex-wrap: wrap; align-items: center; }

/* 4.2 form fields */
.ds-field { display: grid; gap: 6px; margin-bottom: var(--ds-s-3); }
.ds-label { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-medium); color: var(--ds-text-2); }
.ds-hint { font-size: var(--ds-fs-xs); color: var(--ds-text-3); }
.ds-field.is-invalid .ds-hint, .ds-error-text { color: var(--ds-crit-text); font-size: var(--ds-fs-xs); }
.ds-input, .ds-select, .ds-textarea {
  width: 100%; min-height: 40px; padding: 8px 12px; border-radius: var(--ds-r-md);
  background: var(--ds-surface); color: var(--ds-text); border: 1px solid var(--ds-border-strong);
  font: inherit; font-size: var(--ds-fs-md);
  transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}
.ds-textarea { min-height: 88px; resize: vertical; }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-text-3); }
.ds-input:hover, .ds-select:hover, .ds-textarea:hover { border-color: var(--ds-navy-700); }
.ds-input:focus-visible, .ds-select:focus-visible, .ds-textarea:focus-visible { border-color: var(--ds-navy-700); }
.ds-field.is-invalid .ds-input, .ds-input[aria-invalid="true"] { border-color: var(--ds-crit); }
.ds-input[dir="ltr"] { text-align: left; }
.ds-toggle { position: relative; display: inline-flex; align-items: center; gap: var(--ds-s-2); cursor: pointer; font-size: var(--ds-fs-md); color: var(--ds-text); }
.ds-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ds-toggle .ds-toggle__track { width: 40px; height: 22px; border-radius: var(--ds-r-pill); background: var(--ds-border-strong); position: relative; transition: background var(--ds-dur); flex: 0 0 auto; }
.ds-toggle .ds-toggle__track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--ds-e-1); transition: inset-inline-start var(--ds-dur) var(--ds-ease); }
.ds-toggle input:checked + .ds-toggle__track { background: var(--ds-ok); }
.ds-toggle input:checked + .ds-toggle__track::after { inset-inline-start: 21px; }
.ds-toggle input:focus-visible + .ds-toggle__track { box-shadow: var(--ds-focus); }

/* 4.3 surfaces */
.ds-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); box-shadow: var(--ds-e-1); padding: var(--ds-s-5); min-width: 0; }
.ds-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-s-3); margin-bottom: var(--ds-s-4); }
.ds-card__title { margin: 0; font-size: var(--ds-fs-lg); font-weight: var(--ds-fw-black); color: var(--ds-text); }
.ds-card__sub { margin: 2px 0 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.ds-grid { display: grid; gap: var(--ds-s-4); grid-template-columns: repeat(auto-fill, minmax(var(--ds-col, 280px), 1fr)); }
.ds-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-stack { display: grid; gap: var(--ds-s-3); }
.ds-row { display: flex; gap: var(--ds-s-2); align-items: center; flex-wrap: wrap; }
.ds-spacer { flex: 1 1 auto; }

/* 4.4 KPI tiles */
.ds-kpis { display: grid; gap: var(--ds-s-3); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ds-kpi { position: relative; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); padding: var(--ds-s-4) var(--ds-s-5); box-shadow: var(--ds-e-1); overflow: hidden; }
.ds-kpi::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--_kpi, var(--ds-gold-500)); }
.ds-kpi__label { display: block; font-size: var(--ds-fs-sm); color: var(--ds-text-2); font-weight: var(--ds-fw-medium); }
.ds-kpi__value { display: block; margin-top: 4px; font-size: var(--ds-fs-3xl); font-weight: var(--ds-fw-black); color: var(--ds-navy-800); line-height: 1.15; font-variant-numeric: tabular-nums; }
.ds-kpi__meta { display: block; margin-top: 4px; font-size: var(--ds-fs-xs); color: var(--ds-text-3); }
.ds-kpi--ok { --_kpi: var(--ds-ok); } .ds-kpi--warn { --_kpi: var(--ds-warn); } .ds-kpi--crit { --_kpi: var(--ds-crit); } .ds-kpi--info { --_kpi: var(--ds-info); }

/* 4.5 page header */
.ds-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ds-s-4); flex-wrap: wrap; margin-bottom: var(--ds-s-5); }
.ds-page-header__title { margin: 0; font-size: var(--ds-fs-2xl); font-weight: var(--ds-fw-black); color: var(--ds-navy-800); }
.ds-page-header__sub { margin: 4px 0 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2); max-width: 72ch; }

/* 4.6 badges / status pills */
.ds-badge { --_fg: var(--ds-neutral-text); --_bg: var(--ds-neutral-bg); --_dot: var(--ds-text-3);
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--ds-r-pill);
  background: var(--_bg); color: var(--_fg); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); line-height: 1.5; white-space: nowrap; border: 0; }
.ds-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--_dot); flex: 0 0 auto; }
.ds-badge--plain::before { display: none; }
.ds-badge--ok   { --_fg: var(--ds-ok-text);   --_bg: var(--ds-ok-bg);   --_dot: var(--ds-ok); }
.ds-badge--warn { --_fg: var(--ds-warn-text); --_bg: var(--ds-warn-bg); --_dot: var(--ds-warn); }
.ds-badge--crit { --_fg: var(--ds-crit-text); --_bg: var(--ds-crit-bg); --_dot: var(--ds-crit); }
.ds-badge--info { --_fg: var(--ds-info-text); --_bg: var(--ds-info-bg); --_dot: var(--ds-info); }
.ds-badge--neutral { --_fg: var(--ds-neutral-text); --_bg: var(--ds-neutral-bg); --_dot: var(--ds-text-3); }
.ds-badge--live::before { animation: ds-pulse 1.8s ease-in-out infinite; }

/* 4.7 alerts (inline) */
.ds-alert { --_fg: var(--ds-info-text); --_bg: var(--ds-info-bg); --_bd: var(--ds-info);
  display: flex; gap: var(--ds-s-3); align-items: flex-start; padding: var(--ds-s-3) var(--ds-s-4);
  border-radius: var(--ds-r-md); background: var(--_bg); color: var(--ds-text); border: 1px solid transparent; border-inline-start: 4px solid var(--_bd); }
.ds-alert__title { display: block; font-weight: var(--ds-fw-black); color: var(--_fg); margin-bottom: 2px; }
.ds-alert--ok   { --_fg: var(--ds-ok-text);   --_bg: var(--ds-ok-bg);   --_bd: var(--ds-ok); }
.ds-alert--warn { --_fg: var(--ds-warn-text); --_bg: var(--ds-warn-bg); --_bd: var(--ds-warn); }
.ds-alert--crit { --_fg: var(--ds-crit-text); --_bg: var(--ds-crit-bg); --_bd: var(--ds-crit); }

/* 4.8 toasts */
.ds-toasts { position: fixed; bottom: var(--ds-s-4); left: var(--ds-s-4); display: grid; gap: var(--ds-s-2); z-index: 1000; max-width: min(420px, calc(100vw - 32px)); }
[dir="ltr"] .ds-toasts { left: auto; right: var(--ds-s-4); }
.ds-toast { display: flex; gap: var(--ds-s-3); align-items: flex-start; background: var(--ds-navy-900); color: #fff; padding: 12px 16px; border-radius: var(--ds-r-md); box-shadow: var(--ds-e-3); border-inline-start: 4px solid var(--ds-gold-500); font-size: var(--ds-fs-md); }
.ds-toast--ok { border-inline-start-color: var(--ds-ok); } .ds-toast--crit { border-inline-start-color: var(--ds-crit); } .ds-toast--warn { border-inline-start-color: var(--ds-warn); }

/* 4.9 tabs */
.ds-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ds-border); margin-bottom: var(--ds-s-4); overflow-x: auto; scrollbar-width: none; }
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tab { appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 14px; color: var(--ds-text-2); font: inherit; font-weight: var(--ds-fw-bold); cursor: pointer; white-space: nowrap; border-radius: var(--ds-r-sm) var(--ds-r-sm) 0 0; }
.ds-tab:hover { color: var(--ds-navy-800); background: var(--ds-navy-50); }
.ds-tab[aria-selected="true"], .ds-tab.is-active { color: var(--ds-navy-800); border-bottom-color: var(--ds-gold-500); }
.ds-segment { display: inline-flex; gap: 2px; padding: 3px; background: var(--ds-surface-3); border-radius: var(--ds-r-md); }
.ds-segment > button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font: inherit; font-weight: var(--ds-fw-bold); color: var(--ds-text-2); cursor: pointer; }
.ds-segment > button[aria-pressed="true"], .ds-segment > button.is-active { background: var(--ds-surface); color: var(--ds-navy-800); box-shadow: var(--ds-e-1); }

/* 4.10 tables */
.ds-table-wrap { overflow: auto; border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); background: var(--ds-surface); max-height: var(--ds-table-max-h, none); }
.ds-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ds-fs-md); }
.ds-table th { position: sticky; top: 0; z-index: 1; background: var(--ds-surface-2); color: var(--ds-text-2); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-bold); text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--ds-border); white-space: nowrap; }
.ds-table td { padding: 10px 12px; border-bottom: 1px solid var(--ds-border); vertical-align: middle; text-align: start; }
.ds-table tbody tr:nth-child(even) td { background: #FAFBFD; }
.ds-table tbody tr:hover td { background: var(--ds-navy-50); }
.ds-table tr:last-child td { border-bottom: 0; }
.ds-table .ds-row-actions { display: flex; gap: var(--ds-s-1); justify-content: flex-end; flex-wrap: wrap; }
.ds-table .is-num { text-align: end; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  /* phone: rows become cards; each <td data-label="..."> shows its own label */
  .ds-table--stack thead { display: none; }
  .ds-table--stack, .ds-table--stack tbody, .ds-table--stack tr, .ds-table--stack td { display: block; width: 100%; }
  .ds-table--stack tr { border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); margin: 0 0 var(--ds-s-2); padding: var(--ds-s-2) var(--ds-s-3); background: var(--ds-surface); }
  .ds-table--stack td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: var(--ds-s-3); background: transparent !important; }
  .ds-table--stack td[data-label]::before { content: attr(data-label); color: var(--ds-text-2); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); }
  .ds-table--stack .ds-row-actions { justify-content: flex-start; }
}

/* 4.11 modal + drawer */
.ds-modal { border: 0; padding: 0; border-radius: var(--ds-r-xl); width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); background: var(--ds-surface); color: var(--ds-text); box-shadow: var(--ds-e-3); }
.ds-modal::backdrop, .ds-backdrop { background: rgba(10, 7, 64, .45); }
.ds-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-s-3); padding: var(--ds-s-4) var(--ds-s-5); border-bottom: 1px solid var(--ds-border); }
.ds-modal__title { margin: 0; font-size: var(--ds-fs-xl); font-weight: var(--ds-fw-black); }
.ds-modal__body { padding: var(--ds-s-5); overflow: auto; }
.ds-modal__foot { display: flex; gap: var(--ds-s-2); justify-content: flex-start; padding: var(--ds-s-3) var(--ds-s-5); border-top: 1px solid var(--ds-border); background: var(--ds-surface-2); }
.ds-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(440px, 100vw); background: var(--ds-surface); box-shadow: var(--ds-e-3); z-index: 950; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .2s var(--ds-ease); }
[dir="ltr"] .ds-drawer { transform: translateX(100%); }
.ds-drawer.is-open { transform: none; }
.ds-backdrop { position: fixed; inset: 0; z-index: 940; }

/* 4.12 states: loading / empty / error / success */
.ds-state { display: grid; justify-items: center; gap: var(--ds-s-2); text-align: center; padding: var(--ds-s-8) var(--ds-s-4); color: var(--ds-text-2); border: 1px dashed var(--ds-border-strong); border-radius: var(--ds-r-lg); background: var(--ds-surface-2); }
.ds-state__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ds-navy-50); color: var(--ds-navy-700); }
.ds-state__title { font-weight: var(--ds-fw-black); color: var(--ds-text); font-size: var(--ds-fs-lg); }
.ds-state--error { border-color: #F5C2BD; background: var(--ds-crit-bg); }
.ds-state--error .ds-state__icon { background: #fff; color: var(--ds-crit-text); }
.ds-state--error .ds-state__title { color: var(--ds-crit-text); }
.ds-state--success { border-color: #B7E4CF; background: var(--ds-ok-bg); }
.ds-state--success .ds-state__icon { background: #fff; color: var(--ds-ok-text); }
.ds-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--ds-navy-100); border-top-color: var(--ds-navy-700); animation: ds-spin .8s linear infinite; display: inline-block; }
.ds-skeleton { position: relative; overflow: hidden; background: var(--ds-surface-3); border-radius: var(--ds-r-sm); min-height: 12px; color: transparent !important; }
.ds-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: ds-shimmer 1.4s ease-in-out infinite; }
.ds-skeleton--text { height: 12px; margin: 6px 0; }
.ds-skeleton--title { height: 20px; width: 40%; margin: 4px 0 10px; }
.ds-skeleton--block { height: 96px; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
@keyframes ds-shimmer { to { transform: translateX(-100%); } }
@keyframes ds-drawer-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* 4.13 key/value list */
.ds-kv { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 6px var(--ds-s-4); font-size: var(--ds-fs-md); }
.ds-kv dt { color: var(--ds-text-2); } .ds-kv dd { margin: 0; font-weight: var(--ds-fw-bold); min-width: 0; overflow-wrap: anywhere; }

/* ==========================================================================
   5. SHELL — sidebar + top bar (live studio dashboard, legacy SPA, cloud)
   ========================================================================== */
body:not(.auth-lock) { grid-template-columns: var(--ds-sidebar-w) minmax(0, 1fr); }
/* W36 — LIGHT SHELL (owner: «خلي التصميم فاتح»): white sidebar, navy text, gold rail.
   The navy sidebar of W35 is gone; navy stays the brand ink (titles, active item, primary text). */
body > aside, aside#sidebar {
  background: var(--ds-surface) !important;
  color: var(--ds-text-2);
  border: 0 !important; border-inline-end: 1px solid var(--ds-border) !important;
  box-shadow: 2px 0 18px rgba(17, 13, 92, .04) !important;
  padding: var(--ds-s-5) var(--ds-s-3) var(--ds-s-4);
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 0; z-index: 30;
  scrollbar-width: thin; scrollbar-color: var(--ds-border-strong) transparent;
}
body > aside::-webkit-scrollbar-thumb, aside#sidebar::-webkit-scrollbar-thumb { background: var(--ds-border-strong); border-radius: 8px; }
/* brand block — the colour logo on white */
body > aside .brand, aside#sidebar .brand {
  display: grid; gap: 2px; justify-items: start; padding: 4px var(--ds-s-2) var(--ds-s-4); margin: 0 0 var(--ds-s-3);
  background: none !important; border: 0 !important; border-bottom: 1px solid var(--ds-border) !important; border-radius: 0; box-shadow: none !important;
}
body > aside .brand img, aside#sidebar .brand img {
  width: 112px !important; height: auto; max-width: 100%; filter: none !important; margin-bottom: 10px;
}
body > aside .brand b, body > aside .brand span, aside#sidebar .brand span, aside#sidebar .brand b {
  color: var(--ds-navy-800) !important; font-size: var(--ds-fs-lg) !important; font-weight: var(--ds-fw-black); letter-spacing: 0;
}
body > aside .brand small, aside#sidebar .brand small { color: var(--ds-text-3) !important; font-size: var(--ds-fs-xs); }
body > aside .brand small span, body > aside #brandVer {
  display: inline-block; margin-inline-start: 6px; padding: 0 8px; border-radius: var(--ds-r-pill);
  background: var(--ds-gold-50); color: #7A4F00 !important; font-size: 11px !important; font-weight: var(--ds-fw-bold); line-height: 20px;
}
body > aside #brandVer:empty { display: none; }
/* nav */
body > aside .nav { display: grid; gap: 2px; }
.ds-nav-group {
  display: block; margin: var(--ds-s-5) var(--ds-s-3) var(--ds-s-1); font-size: 11px; font-weight: var(--ds-fw-bold);
  color: var(--ds-text-3); letter-spacing: .02em;
}
.ds-nav-group:first-child { margin-top: 0; }
body > aside .nav button, aside#sidebar .nav-section button, aside#sidebar > button[data-page] {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 40px; margin: 0 !important; padding: 8px 12px !important;
  background: transparent !important; border: 0 !important; border-radius: var(--ds-r-md) !important; box-shadow: none !important;
  color: var(--ds-text-2) !important; font: inherit; font-size: var(--ds-fs-md); font-weight: var(--ds-fw-medium) !important;
  text-align: start; cursor: pointer; transform: none !important;
  transition: background var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease);
}
body > aside .nav button:hover, aside#sidebar .nav-section button:hover, aside#sidebar > button[data-page]:hover {
  background: var(--ds-surface-2) !important; color: var(--ds-navy-800) !important;
}
body > aside .nav button.active, aside#sidebar .nav-section button.active, aside#sidebar > button[data-page].active {
  background: var(--ds-navy-50) !important; color: var(--ds-navy-800) !important; font-weight: var(--ds-fw-black) !important;
}
body > aside .nav button.active::before, aside#sidebar .nav-section button.active::before, aside#sidebar > button[data-page].active::before {
  content: ""; position: absolute; inset-block: 8px; inset-inline-start: -12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--ds-gold-500);
}
body > aside .nav button:focus-visible, aside#sidebar button:focus-visible { box-shadow: var(--ds-focus) !important; }
body > aside .nav button .ds-icon { color: var(--ds-text-3); }
body > aside .nav button.active .ds-icon { color: var(--ds-navy-800); }
body > aside .nav button:hover .ds-icon { color: var(--ds-navy-700); }
body > aside .nav button .ds-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
aside#sidebar .nav-section { display: grid; gap: 2px; margin: 0 0 var(--ds-s-2); }
aside#sidebar .nav-section > span { display: block; margin: var(--ds-s-4) var(--ds-s-3) var(--ds-s-1); padding: 0; font-size: 11px; font-weight: var(--ds-fw-bold); color: var(--ds-text-3) !important; }
aside#sidebar .nav-icon { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; background: transparent !important; color: var(--ds-text-3) !important; box-shadow: none !important; display: inline-grid; place-items: center; }
aside#sidebar .nav-icon svg { width: 18px !important; height: 18px !important; stroke-width: 1.9 !important; }
aside#sidebar button.active .nav-icon { color: var(--ds-navy-800) !important; }
aside#sidebar button:hover .nav-icon { color: var(--ds-navy-700) !important; }
aside#sidebar .session-card { margin-top: auto !important; background: var(--ds-surface-2) !important; border: 1px solid var(--ds-border) !important; border-radius: var(--ds-r-md); padding: var(--ds-s-3); color: var(--ds-text-2); display: grid; gap: 4px; }
aside#sidebar .session-card strong { color: var(--ds-navy-800); }
aside#sidebar .session-card span, aside#sidebar .session-card small { color: var(--ds-text-3) !important; font-size: var(--ds-fs-xs); }
aside#sidebar .session-card button { justify-content: center; background: var(--ds-surface) !important; color: var(--ds-navy-800) !important; border: 1px solid var(--ds-border-strong) !important; border-radius: var(--ds-r-sm) !important; min-height: 34px; }
aside#sidebar .session-card button:hover { border-color: var(--ds-navy-700) !important; }

/* main column + top bar */
body > main { padding: var(--ds-s-5) var(--ds-s-8) var(--ds-s-8); min-width: 0; max-width: calc(var(--ds-content-max) + 2 * var(--ds-s-8)); width: 100%; }
body > main > header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-s-4); flex-wrap: wrap;
  margin: 0 0 var(--ds-s-5); padding: 0 0 var(--ds-s-4); border-bottom: 1px solid var(--ds-border);
}
body > main > header h1 { margin: 0; font-size: var(--ds-fs-2xl) !important; font-weight: var(--ds-fw-black); color: var(--ds-navy-800) !important; letter-spacing: 0; }
body > main > header p { margin: 4px 0 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2) !important; max-width: 70ch; }
body > main > header > div:first-child { flex: 1 1 320px; min-width: 0; }
body > main > header > .row, body > main > header > .actions { display: flex; align-items: center; gap: var(--ds-s-2); flex-wrap: wrap; justify-content: flex-end; margin-inline-start: auto; flex: 0 1 auto; padding: 0 !important; border: 0 !important; }
/* styles.css' legacy «.row» is a LIST row (padding + bottom rule). In the live
   dashboard .row is a flex toolbar, so that inherited rule drew stray lines under
   every toolbar. Keep the padding (no reflow) and drop only the line; rows that
   want a separator set it inline and still get it. */
.view .row { border-bottom: 0; }
body > main > header .hdr-lead { display: flex; align-items: center; gap: var(--ds-s-3); min-width: 0; }
/* the live-channel chip in the studio top bar */
#connDot { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--ds-r-pill); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); background: var(--ds-neutral-bg); color: var(--ds-neutral-text); border: 0 !important; }
#connDot i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
#connDot.c-ok { background: var(--ds-ok-bg); color: var(--ds-ok-text); }
#connDot.c-bad, #connDot.c-err { background: var(--ds-crit-bg); color: var(--ds-crit-text); }
#connDot.c-wait { background: var(--ds-warn-bg); color: var(--ds-warn-text); }

/* hamburger (injected by ds.js; the cloud ships its own #nav-burger) */
.ds-burger, #nav-burger {
  display: none; width: 40px; height: 40px; flex: 0 0 40px; align-items: center; justify-content: center; gap: 0;
  border-radius: var(--ds-r-md); border: 1px solid var(--ds-border-strong) !important; background: var(--ds-surface) !important; color: var(--ds-navy-800);
  cursor: pointer; padding: 0 !important;
}
#nav-burger { flex-direction: column; gap: 4px; }
#nav-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ds-navy-800); }
#nav-backdrop, .ds-nav-backdrop { display: none; }

/* ==========================================================================
   6. SKIN — existing markup re-drawn with the components (no markup change)
   ========================================================================== */
/* 6.1 surfaces: .panel / .card */
.panel, .card, .table-wrap {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: var(--ds-e-1) !important;
}
.card:hover, .panel:hover { transform: none !important; box-shadow: var(--ds-e-1) !important; border-color: var(--ds-border) !important; }
.panel .panel, .panel .card, .card .card { box-shadow: none !important; background: var(--ds-surface-2) !important; }
.panel > h2:first-child, .panel > h2, .card > h2 {
  font-size: var(--ds-fs-lg) !important; font-weight: var(--ds-fw-black) !important; color: var(--ds-text) !important;
  margin: 0 0 var(--ds-s-3) !important; display: flex; align-items: center; gap: var(--ds-s-2);
}
.panel h3 { color: var(--ds-text-2); }
/* 6.2 KPI tiles = :is(.cards, .kpi-grid) > .card (studio overview), .kpi-grid / .cards (cloud, legacy) */
.cards, .kpi-grid { gap: var(--ds-s-3) !important; }
:is(.cards, .kpi-grid) > .card:has(> strong) { position: relative; overflow: hidden; padding: var(--ds-s-4) var(--ds-s-5) !important; }
:is(.cards, .kpi-grid) > .card:has(> strong)::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--ds-gold-500); }
:is(.cards, .kpi-grid) > .card > span:first-child, :is(.cards, .kpi-grid) > .card > span { display: block; font-size: var(--ds-fs-sm) !important; color: var(--ds-text-2) !important; font-weight: var(--ds-fw-medium); }
:is(.cards, .kpi-grid) > .card > strong { display: block; margin-top: 4px; font-size: var(--ds-fs-3xl) !important; font-weight: var(--ds-fw-black) !important; line-height: 1.15; color: var(--ds-navy-800); background: none !important; -webkit-text-fill-color: currentColor !important; }
.card strong { background: none !important; -webkit-text-fill-color: currentColor !important; }
body.theme-light :is(.cards, .kpi-grid) > .card > strong:not([style*="color"]) { color: var(--ds-navy-800) !important; }
:is(.cards, .kpi-grid) > .card > small, :is(.cards, .kpi-grid) > .card > .muted { display: block; margin-top: 2px; font-size: var(--ds-fs-xs); color: var(--ds-text-3) !important; }
/* tone rail: ui-system StatCard puts the tone on <strong class="ok|warning|critical|info|online|active"> */
:is(.cards, .kpi-grid) > .card:has(> strong:is(.ok, .online, .active))::before { background: var(--ds-ok); }
:is(.cards, .kpi-grid) > .card:has(> strong:is(.warning, .warn))::before { background: var(--ds-warn); }
:is(.cards, .kpi-grid) > .card:has(> strong:is(.critical, .crit, .danger))::before { background: var(--ds-crit); }
:is(.cards, .kpi-grid) > .card:has(> strong.info)::before { background: var(--ds-info); }
/* 6.3 buttons */
button.act, button.setTab, main button:not([class]), dialog menu button, .actions > button, header .actions button,
.panel button:not([class]):not([role="switch"]), button.ghost, button.secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: var(--ds-fs-md); font-weight: var(--ds-fw-bold);
  color: var(--ds-navy-800); background: var(--ds-surface); border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-r-md); cursor: pointer; transform: none !important;
  transition: background var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}
button.act:hover, button.setTab:hover, main button:not([class]):hover, .actions > button:hover, button.ghost:hover, button.secondary:hover {
  background: var(--ds-surface-2); border-color: var(--ds-navy-700); box-shadow: none !important; transform: none !important;
}
button.primary, a.primary, button.act.primary, .actions > button.primary, #modal-submit {
  background: var(--ds-gold-500) !important; color: var(--ds-navy-900) !important; border: 1px solid var(--ds-gold-500) !important;
  font-weight: var(--ds-fw-black) !important; box-shadow: var(--ds-e-1) !important; transform: none !important;
}
button.primary:hover, a.primary:hover, #modal-submit:hover { background: var(--ds-gold-400) !important; }
button.danger, button.act.danger {
  background: var(--ds-crit-bg) !important; color: var(--ds-crit-text) !important; border: 1px solid #F3BDB7 !important;
}
button.danger:hover { background: #FBDAD6 !important; border-color: var(--ds-crit) !important; }
button.ghost { background: transparent; border-color: transparent; }
button.setTab.active, button.setTab[aria-selected="true"] {
  background: var(--ds-gold-500) !important; color: var(--ds-navy-900) !important; border-color: var(--ds-gold-500) !important; font-weight: var(--ds-fw-black) !important; box-shadow: var(--ds-e-1) !important;
}
button:disabled, button[disabled] { opacity: .5; cursor: not-allowed !important; box-shadow: none !important; transform: none !important; }
/* 6.4 fields */
main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
main select, main textarea, dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), dialog select, dialog textarea,
.login-form input {
  background: var(--ds-surface); color: var(--ds-text); border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-md);
  transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}
main input:hover, main select:hover, main textarea:hover { border-color: var(--ds-navy-700); }
main input::placeholder, main textarea::placeholder { color: var(--ds-text-3); }
main input:focus-visible, main select:focus-visible, main textarea:focus-visible, dialog input:focus-visible, dialog select:focus-visible { border-color: var(--ds-navy-700); }
main label { color: var(--ds-text-2); font-weight: var(--ds-fw-medium); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--ds-navy-800); }
/* 6.5 badges / status pills — soft fill, readable text, coloured dot */
.badge, .stbadge, .status-pill, .pill {
  border: 0 !important; background: var(--ds-neutral-bg); color: var(--ds-neutral-text);
  border-radius: var(--ds-r-pill) !important; font-weight: var(--ds-fw-bold); line-height: 1.5;
}
.status-pill, .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: var(--ds-fs-xs); white-space: nowrap; }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; flex: 0 0 auto; }
.badge.ok, .badge.live, .badge.tA, .st-done, .status-pill.ok, .pill.ok { background: var(--ds-ok-bg) !important; color: var(--ds-ok-text) !important; }
.badge.warn, .badge.warning, .badge.shadow, .badge.tC, .st-ack, .status-pill.warn, .pill.warn { background: var(--ds-warn-bg) !important; color: var(--ds-warn-text) !important; }
.badge.crit, .badge.err, .badge.danger, .st-esc, .status-pill.crit, .pill.crit { background: var(--ds-crit-bg) !important; color: var(--ds-crit-text) !important; }
.badge.sevhigh { background: #FFEEDF !important; color: #A9410B !important; }
.badge.info, .badge.tB, .st-open, .status-pill.info, .pill.info { background: var(--ds-info-bg) !important; color: var(--ds-info-text) !important; }
.badge.offline, .st-mute { background: var(--ds-neutral-bg) !important; color: var(--ds-neutral-text) !important; }
/* ui-system.js StatusBadge/SeverityBadge emit the raw state as a class (legacy SPA + cloud) */
.badge.online, .badge.analyzing, .badge.connected, .badge.receiving_frames, .badge.resolved,
.badge.Ready, .badge.active, .badge.enabled, .badge.low, .badge.normal { background: var(--ds-ok-bg) !important; color: var(--ds-ok-text) !important; }
.badge.reconnecting, .badge.acknowledged, .badge.medium, .badge.Beta, .badge.Untested, .badge.Downloading,
.badge.configuration_required, .badge.no_frames, .badge.demo, .badge.Demo, .badge.Baseline { background: var(--ds-warn-bg) !important; color: var(--ds-warn-text) !important; }
.badge.error, .badge.Error, .badge.Missing, .badge.critical { background: var(--ds-crit-bg) !important; color: var(--ds-crit-text) !important; }
.badge.high { background: #FFEEDF !important; color: #A9410B !important; }
.badge.new { background: var(--ds-info-bg) !important; color: var(--ds-info-text) !important; }
.badge.stopped, .badge.disabled, .badge.unknown { background: var(--ds-neutral-bg) !important; color: var(--ds-neutral-text) !important; }
.badge > i:empty { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; flex: 0 0 auto; }
.status.error-state { background: var(--ds-crit-bg) !important; color: var(--ds-crit-text) !important; border: 1px solid #F3BDB7 !important; border-radius: var(--ds-r-md) !important; padding: var(--ds-s-3) var(--ds-s-4); }
.loading-skeleton { display: grid; gap: 8px; }
.loading-skeleton > span { display: block; height: 12px; border-radius: var(--ds-r-sm); background: var(--ds-surface-3); position: relative; overflow: hidden; }
.loading-skeleton > span::after { content: ""; position: absolute; inset: 0; transform: translateX(100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: ds-shimmer 1.4s ease-in-out infinite; }
.loading-skeleton > span:nth-child(3n) { width: 62%; }
/* 6.6 tables */
main table:not(.ds-raw) { border-collapse: separate; border-spacing: 0; font-size: var(--ds-fs-md); }
main table:not(.ds-raw) th {
  background: var(--ds-surface-2); color: var(--ds-text-2) !important; font-size: var(--ds-fs-sm) !important; font-weight: var(--ds-fw-bold) !important;
  border-bottom: 1px solid var(--ds-border) !important; padding: 10px 10px; white-space: nowrap;
}
main table:not(.ds-raw) th:first-child { border-start-start-radius: var(--ds-r-md); }
main table:not(.ds-raw) th:last-child { border-start-end-radius: var(--ds-r-md); }
main table:not(.ds-raw) td { border-bottom: 1px solid var(--ds-border) !important; padding: 10px 10px; vertical-align: middle; }
main table:not(.ds-raw) tr:last-child td { border-bottom: 0 !important; }
main table:not(.ds-raw) tbody tr:hover td, main table:not(.ds-raw) tr:hover > td { background: var(--ds-navy-50); }
.table-wrap { overflow: auto; }
.table-wrap thead th { position: sticky; top: 0; z-index: 1; }
/* 6.7 empty / muted / inline status */
.empty {
  color: var(--ds-text-2) !important; background: var(--ds-surface-2); border: 1px dashed var(--ds-border-strong) !important;
  border-radius: var(--ds-r-md) !important; padding: var(--ds-s-5) var(--ds-s-4) !important; text-align: center;
}
.muted { color: var(--ds-text-2); }
.status-inline { background: var(--ds-warn-bg) !important; color: var(--ds-warn-text) !important; border: 1px solid #F1D79A !important; border-radius: var(--ds-r-md) !important; }
.status-inline.error { background: var(--ds-crit-bg) !important; color: var(--ds-crit-text) !important; border-color: #F3BDB7 !important; }
section.status { background: var(--ds-warn-bg) !important; color: var(--ds-warn-text) !important; border: 1px solid #F1D79A !important; border-radius: var(--ds-r-md) !important; }
.alert-item { background: var(--ds-surface-2) !important; border-radius: var(--ds-r-md) !important; border-inline-start-color: var(--ds-gold-500); }
.alert-item.crit { border-inline-start-color: var(--ds-crit) !important; }
/* 6.8 toasts (studio + legacy + cloud #toast) */
#toast .toast, #toast > div {
  background: var(--ds-navy-900) !important; color: #FFFFFF !important; border-radius: var(--ds-r-md) !important;
  box-shadow: var(--ds-e-3) !important; border-inline-start: 4px solid var(--ds-gold-500); padding: 12px 16px !important; font-size: var(--ds-fs-md);
}
#toast .toast.err, #toast > div.err, #toast > div.error { border-inline-start-color: var(--ds-crit) !important; }
#toast .toast.ok, #toast > div.ok, #toast > div.success { border-inline-start-color: var(--ds-ok) !important; }
/* 6.9 dialogs */
dialog#modal, dialog.ds-skin {
  border: 0 !important; border-radius: var(--ds-r-xl) !important; box-shadow: var(--ds-e-3) !important;
  background: var(--ds-surface) !important; color: var(--ds-text) !important;
}
dialog#modal::backdrop { background: rgba(10, 7, 64, .45); }
dialog#modal h2#modal-title { font-size: var(--ds-fs-xl); font-weight: var(--ds-fw-black); color: var(--ds-navy-800); }
dialog#modal menu { border-top: 1px solid var(--ds-border); background: var(--ds-surface-2); }
/* 6.10 login (cloud + legacy gate) */
.login-screen { background: linear-gradient(135deg, var(--ds-navy-800) 0%, var(--ds-navy-950) 100%) !important; }
.login-card { gap: 0 !important; border-radius: var(--ds-r-xl); overflow: hidden; box-shadow: var(--ds-e-3); background: var(--ds-surface); max-width: 960px; }
.login-copy {
  background: linear-gradient(160deg, var(--ds-navy-700) 0%, var(--ds-navy-900) 100%) !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; color: var(--ds-on-navy-2); padding: var(--ds-s-10) !important; position: relative;
}
.login-copy::before { content: ""; display: block; width: 132px; height: 43px; background: url("./assets/brand/stc-logo-white-200h.png") no-repeat 100% 50% / contain; margin-bottom: var(--ds-s-4); }
[dir="ltr"] .login-copy::before { background-position: 0 50%; }
.login-copy span { color: var(--ds-gold-400) !important; }
.login-copy h1 { color: #FFFFFF !important; font-size: 30px !important; }
.login-copy p { color: var(--ds-on-navy-2) !important; }
.login-form { background: var(--ds-surface) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: var(--ds-s-10) var(--ds-s-8) !important; }
.login-form h2 { color: var(--ds-navy-800) !important; }
.login-form label { color: var(--ds-text-2); font-weight: var(--ds-fw-medium); display: grid; gap: 6px; }
.login-form input { min-height: 44px; padding: 8px 12px; }
.login-form button.primary { min-height: 46px; font-size: var(--ds-fs-lg); }

/* ==========================================================================
   7. RESPONSIVE — tablet ≤ 1100, phone ≤ 860 (drawer nav), small ≤ 480
   ========================================================================== */
@media (max-width: 1100px) {
  :root { --ds-sidebar-w: 236px; }
  body > main { padding: var(--ds-s-4) var(--ds-s-5) var(--ds-s-8); }
}
@media (max-width: 860px) {
  body:not(.auth-lock) { display: block !important; grid-template-columns: none !important; }
  body > main { padding: var(--ds-s-3) var(--ds-s-4) var(--ds-s-8) !important; max-width: none; }
  /* (a) without ds.js: the sidebar collapses into one sticky, horizontally scrolling strip */
  body > aside, aside#sidebar {
    position: sticky !important; top: 0; z-index: 900; height: auto !important; width: auto !important;
    padding: 6px var(--ds-s-2) !important; flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden;
    box-shadow: var(--ds-e-2) !important;
  }
  body > aside .brand, aside#sidebar .brand { display: none !important; }
  body > aside .nav, aside#sidebar .nav-section { display: flex !important; gap: 2px; flex-wrap: nowrap; margin: 0; }
  aside#sidebar .nav-section > span, aside#sidebar .session-card, .ds-nav-group { display: none !important; }
  body > aside .nav button, aside#sidebar .nav-section button { width: auto; white-space: nowrap; min-height: 38px; padding: 6px 12px !important; }
  body > aside .nav button.active::before, aside#sidebar .nav-section button.active::before { inset-block: auto 0; inset-inline: 10px; height: 3px; width: auto; border-radius: 3px 3px 0 0; }
  /* (b) with ds.js (html.ds-js) or the cloud shell script: a real off-canvas drawer + hamburger */
  html.ds-js body > aside, html.ds-js aside#sidebar {
    position: fixed !important; inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; width: min(300px, 86vw) !important; height: 100dvh !important;
    padding: var(--ds-s-5) var(--ds-s-3) var(--ds-s-4) !important; flex-direction: column; align-items: stretch; overflow-x: hidden; overflow-y: auto;
    z-index: 960; box-shadow: var(--ds-e-3) !important;
    /* closed = not rendered at all: a translated-off-screen fixed drawer still
       widens the page's scrollable overflow in Chromium (horizontal scroll). */
    display: none !important;
  }
  html.ds-js body.ds-nav-open > aside, html.ds-js body.nav-open > aside#sidebar, html.ds-js body.ds-nav-open aside#sidebar { display: flex !important; animation: ds-drawer-in .18s var(--ds-ease) both; }
  html.ds-js body > aside .brand, html.ds-js aside#sidebar .brand { display: grid !important; }
  html.ds-js body > aside .nav, html.ds-js aside#sidebar .nav-section { display: grid !important; }
  html.ds-js aside#sidebar .nav-section > span, html.ds-js .ds-nav-group { display: block !important; }
  html.ds-js aside#sidebar .session-card { display: grid !important; }
  html.ds-js body > aside .nav button, html.ds-js aside#sidebar .nav-section button { width: 100%; min-height: 44px; padding: 8px 12px !important; }
  html.ds-js body > aside .nav button.active::before, html.ds-js aside#sidebar .nav-section button.active::before { inset-block: 8px; inset-inline: -12px auto; width: 4px; height: auto; border-radius: 0 4px 4px 0; }
  html.ds-js .ds-burger, html.ds-js #nav-burger, #nav-burger { display: inline-flex; }
  html.ds-js .ds-nav-backdrop, #nav-backdrop { position: fixed; inset: 0; z-index: 955; background: rgba(10, 7, 64, .45); }
  html.ds-js body.ds-nav-open .ds-nav-backdrop, body.nav-open #nav-backdrop { display: block; }
  html.ds-js body.ds-nav-open, body.nav-open { overflow: hidden; }
  /* top bar: title row + one horizontally scrolling action row (no 3-line wrap) */
  body > main > header { flex-wrap: wrap; align-items: flex-start; gap: var(--ds-s-2); padding-bottom: var(--ds-s-3); margin-bottom: var(--ds-s-4); }
  body > main > header > div:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--ds-s-3); align-items: center; min-width: 0; flex: 1 1 100%; }
  body > main > header > div:first-child > :not(.ds-burger):not(#nav-burger) { grid-column: 2; }
  body > main > header > div:first-child > .ds-burger { grid-row: 1 / span 2; align-self: center; }
  /* the trial/grace licence banner (studio-injected, sticky) ate ~260px of a phone
     screen: compact it to one tight block that is NOT sticky on phones */
  body #licBanner { position: relative !important; top: auto !important; flex-wrap: wrap !important; gap: 8px 12px !important; padding: 10px 12px !important; margin-bottom: 12px !important; }
  body #licBanner .lb-ico { display: none !important; }
  body #licBanner .lb-msg { flex: 1 1 calc(100% - 70px) !important; }
  body #licBanner .lb-msg .lb-sub { font-size: 12px !important; }
  body #licBanner .lb-days { width: 46px !important; height: 46px !important; }
  body #licBanner .lb-days b { font-size: 16px !important; }
  body #licBanner .lb-act { flex: 1 1 100% !important; padding: 9px 14px !important; }
  body > main > header h1 { font-size: 19px !important; }
  body > main > header p { font-size: var(--ds-fs-xs); }
  body > main > header > .row, body > main > header > .actions {
    flex: 1 1 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; margin: 0; scrollbar-width: none;
  }
  body > main > header > .row::-webkit-scrollbar, body > main > header > .actions::-webkit-scrollbar { display: none; }
  body > main > header > .row > *, body > main > header > .actions > * { flex: 0 0 auto; white-space: nowrap; }
  .cards, .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cards > .card { padding: var(--ds-s-3) var(--ds-s-4) !important; }
  .cards > .card > strong { font-size: 22px !important; }
  .grid2, .grid, .grid.three { grid-template-columns: minmax(0, 1fr) !important; }
  .panel, .card { padding: var(--ds-s-4) !important; }
  main table:not(.ds-raw) { font-size: var(--ds-fs-sm); }
  /* a wide table scrolls inside its card instead of widening the whole page */
  main table:not(.ds-raw):not(.ds-table--stack) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html, body { overflow-x: clip; }
  .login-card { grid-template-columns: 1fr !important; }
  .login-copy { padding: var(--ds-s-6) !important; }
  .login-copy h1 { font-size: 22px !important; }
  .login-form { padding: var(--ds-s-6) !important; }
}
@media (max-width: 480px) {
  .cards > .card > strong { font-size: 20px !important; }
  .ds-modal, dialog#modal { width: calc(100vw - 16px) !important; max-width: none !important; }
}
@media print {
  body > aside, aside#sidebar, .ds-burger, .ds-nav-backdrop, #nav-burger { display: none !important; }
  body { display: block !important; background: #fff !important; }
  .panel, .card { box-shadow: none !important; }
}

/* W35 (orchestrator): phone width — wide tables scroll inside their panel,
   never the whole page (measured: a 617 px camera table at 390 px). */
@media (max-width: 640px) {
  .view .panel, .view .card { overflow-x: auto; max-width: 100%; }
  .view table { min-width: 0; }
}

/* ==========================================================================
   8. W36 LIGHT REFRESH — owner: «غير التصميم وخلي التصميم فاتح وأفضل بكتير»
   Additive layer over sections 5–7: light everywhere (sidebar, login, toasts),
   a sticky translucent top bar, compact licence strip that never covers a
   modal, segmented tabs, calmer KPI tiles, phone affordances.
   ========================================================================== */
:root {
  --ds-bg: #F5F6FB;
  --ds-border: #E4E6F0;
  --ds-e-1: 0 1px 2px rgba(17, 13, 92, .05), 0 2px 8px rgba(17, 13, 92, .04);
}
body:not(.auth-lock) { background: var(--ds-bg) !important; }

/* 8.1 sticky translucent top bar (title + actions stay reachable while scrolling) */
body > main > header {
  position: sticky; top: 0; z-index: 40;
  margin-inline: calc(-1 * var(--ds-s-8)); padding: var(--ds-s-4) var(--ds-s-8) var(--ds-s-3) !important;
  background: rgba(245, 246, 251, .88); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
body > main > header h1 { font-size: 24px !important; }
body > main > header > .row > button, body > main > header > .actions > button {
  min-height: 36px; padding: 6px 12px !important; font-size: var(--ds-fs-sm) !important; border-radius: var(--ds-r-md) !important;
  background: var(--ds-surface); border-color: var(--ds-border-strong);
}
body > main > header > .row > button:hover { border-color: var(--ds-navy-700); background: var(--ds-navy-50); }
@media (max-width: 1100px) { body > main > header { margin-inline: calc(-1 * var(--ds-s-5)); padding-inline: var(--ds-s-5) !important; } }
/* studio sticky bars park under the sticky top bar (height published by ds.js) */
.studio-ctx { top: calc(var(--ds-hdr-h, 0px) + 8px) !important; z-index: 35 !important; }
.s2-panel { top: calc(var(--ds-hdr-h, 0px) + 10px) !important; max-height: calc(100vh - var(--ds-hdr-h, 0px) - 24px) !important; }

/* 8.2 licence strip: compact, in-flow, ALWAYS under modals (it used to be
   sticky at z-index 850 and covered the evidence/live viewers' close buttons) */
body #licBanner {
  position: relative !important; top: auto !important; z-index: 1 !important;
  padding: 10px 14px !important; gap: 12px !important; margin: 0 0 var(--ds-s-4) !important;
  border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-e-1) !important; animation: none !important;
}
body #licBanner .lb-ico { width: 34px !important; height: 34px !important; font-size: 16px !important; border-radius: 10px !important; }
body #licBanner .lb-msg .lb-title { font-size: 13.5px !important; }
body #licBanner .lb-act { min-height: 36px; padding: 7px 16px !important; border-radius: var(--ds-r-md) !important; }

/* 8.3 surfaces */
.panel, .card { border-radius: 16px !important; }
.panel { padding: var(--ds-s-5) !important; }
.panel > h2:first-child, .panel > h2, .card > h2 { color: var(--ds-navy-800) !important; }
:is(.cards, .kpi-grid) > .card:has(> strong) {
  min-height: 96px;
}
:is(.cards, .kpi-grid) > .card:has(> strong)::before { inset-block: 16px; width: 4px; }
:is(.cards, .kpi-grid) > .card > strong { font-size: 30px !important; letter-spacing: -.01em; }

/* 8.4 tabs = segmented control: navy for "where am I", gold stays the call-to-action */
button.setTab { min-height: 38px; padding: 7px 14px !important; background: var(--ds-surface) !important; color: var(--ds-text-2) !important; border: 1px solid var(--ds-border) !important; font-weight: var(--ds-fw-bold) !important; box-shadow: none !important; }
button.setTab:hover { color: var(--ds-navy-800) !important; border-color: var(--ds-navy-700) !important; background: var(--ds-navy-50) !important; }
button.setTab.active, button.setTab[aria-selected="true"] {
  background: var(--ds-navy-800) !important; color: #FFFFFF !important; border-color: var(--ds-navy-800) !important; box-shadow: var(--ds-e-1) !important;
}

/* 8.5 buttons: primary = gold CTA with navy ink; secondary white; focus ring everywhere */
button.primary, a.primary, button.act.primary, .actions > button.primary, #modal-submit { border-radius: var(--ds-r-md) !important; }
main button:focus-visible, dialog button:focus-visible, main a:focus-visible { outline: 0; box-shadow: var(--ds-focus) !important; }

/* 8.6 fields: comfortable height, clear focus */
main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), main select {
  min-height: 40px;
}
main input:focus, main select:focus, main textarea:focus, dialog input:focus, dialog select:focus, dialog textarea:focus {
  outline: 0; border-color: var(--ds-navy-700) !important; box-shadow: 0 0 0 3px rgba(37, 30, 140, .14) !important;
}

/* 8.7 toasts — light card with a coloured rail (was a navy block) */
#toast .toast, #toast > div {
  background: var(--ds-surface) !important; color: var(--ds-text) !important; border: 1px solid var(--ds-border) !important;
  border-inline-start: 4px solid var(--ds-gold-500) !important; box-shadow: var(--ds-e-3) !important;
}
#toast .toast.err, #toast > div.err, #toast > div.error { border-inline-start-color: var(--ds-crit) !important; }
#toast .toast.ok, #toast > div.ok, #toast > div.success { border-inline-start-color: var(--ds-ok) !important; }

/* 8.8 login — light (white card on a soft brand wash, colour logo) */
.login-screen { background: radial-gradient(900px 500px at 85% -10%, var(--ds-navy-50), transparent 60%), radial-gradient(700px 420px at 0% 110%, var(--ds-gold-50), transparent 60%), var(--ds-bg) !important; }
.login-card { border: 1px solid var(--ds-border); }
.login-copy {
  background: linear-gradient(160deg, var(--ds-navy-50) 0%, #FFFFFF 100%) !important; color: var(--ds-text-2) !important;
  border-inline-end: 1px solid var(--ds-border) !important;
}
.login-copy::before { background-image: url("./assets/stc-logo.png") !important; }
.login-copy span { color: #8A5A00 !important; }
.login-copy h1 { color: var(--ds-navy-800) !important; }
.login-copy p { color: var(--ds-text-2) !important; }

/* 8.9 dialogs + drawer backdrop: lighter veil */
dialog#modal::backdrop { background: rgba(20, 22, 58, .32); }
html.ds-js .ds-nav-backdrop, #nav-backdrop { background: rgba(20, 22, 58, .28) !important; }

@media (max-width: 860px) {
  /* phone: the top bar scrolls away with the page (screen height is precious) */
  body > main > header { position: static; -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent;
    margin-inline: 0; padding: 0 0 var(--ds-s-2) !important; }
  .studio-ctx { top: 8px !important; }
  .s2-panel { top: 10px !important; }
  body > main > header h1 { font-size: 19px !important; }
  /* the header action row scrolls sideways — fade its far edge so it reads as "more" */
  body > main > header > .row, body > main > header > .actions {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 28px); mask-image: linear-gradient(to left, transparent 0, #000 28px);
    padding-inline-end: 24px !important;
  }
  [dir="ltr"] body > main > header > .row { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px); mask-image: linear-gradient(to right, transparent 0, #000 28px); }
  .panel { padding: var(--ds-s-4) !important; }
  /* cloud customer-360: panels were 828 px inside a 358 px column (11 unreachable buttons) */
  .customer-360 > * { min-width: 0 !important; max-width: 100% !important; }
}

/* ==========================================================================
   9. W39 CLOUD CONSOLE POLISH (2026-10-30) — owner: «حسّن التنسيق العام»
   Cloud-only layer (every selector is scoped to the cloud shell: #app, #modal,
   #toast, aside#sidebar, or a class only cloud/admin/main.js emits), so it is
   inert if this file is synced to the local dashboard. Same STC identity:
   navy #110D5C, gold #f2aa00, light default, Alexandria/Cairo, RTL.
   ========================================================================== */
/* 9.1 one vertical rhythm for every page */
#app { display: grid; gap: var(--ds-s-4); align-content: start; min-width: 0; }
#app > * { min-width: 0; margin-top: 0 !important; margin-bottom: 0 !important; }
#app .panel > * + .table-wrap, #app .panel > .section-title + * { margin-top: 0; }
#app .section-title { align-items: flex-start; flex-wrap: wrap; }
#app .section-title > div { flex: 1 1 280px; min-width: 0; }
#app .section-title h2 { margin: 0 0 2px !important; }
#app .section-title p { margin: 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2); max-width: 78ch; line-height: 1.7; }
#app .grid { gap: var(--ds-s-4); }
#app .grid > * { min-width: 0; }

/* 9.2 hub tabs (العملاء / السيرفرات / المراقبة) = segmented control */
#app .hub-tabs { margin: 0; gap: 6px; padding: 4px; background: var(--ds-surface-3); border-radius: var(--ds-r-md); width: fit-content; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
#app .hub-tab { border: 0; background: transparent; color: var(--ds-text-2); padding: 7px 16px; font-size: var(--ds-fs-sm); white-space: nowrap; border-radius: 8px; transform: none !important; box-shadow: none; }
#app .hub-tab:hover { color: var(--ds-navy-800); background: rgba(255, 255, 255, .7); }
#app .hub-tab.active { background: var(--ds-surface); color: var(--ds-navy-800); box-shadow: var(--ds-e-1); border: 0; }

/* 9.3 states: loading / empty / error — one component */
.state-box { display: grid; justify-items: center; gap: 6px; text-align: center; padding: var(--ds-s-6) var(--ds-s-4); border-radius: var(--ds-r-lg); border: 1px dashed var(--ds-border-strong); background: var(--ds-surface-2); color: var(--ds-text-2); font-size: var(--ds-fs-md); }
.state-box > strong { font-size: var(--ds-fs-lg); font-weight: var(--ds-fw-black); color: var(--ds-navy-700); }
.state-box.state-empty > strong { font-size: 22px; color: var(--ds-text-3); line-height: 1; }
.state-box.state-error { border: 1px solid #F3BDB7; background: var(--ds-crit-bg); color: var(--ds-crit-text); }
.state-box.state-error > strong { color: var(--ds-crit-text); }
.state-box > button { margin-top: 6px; }
.panel .state-box { background: var(--ds-surface-2); }
.load-errors { border: 1px solid #F3BDB7; border-inline-start: 4px solid var(--ds-crit); background: var(--ds-crit-bg); color: var(--ds-text); border-radius: var(--ds-r-md); padding: var(--ds-s-3) var(--ds-s-4); display: grid; gap: 6px; }
.load-errors > strong { color: var(--ds-crit-text); font-weight: var(--ds-fw-black); }
.load-errors ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 2px; font-size: var(--ds-fs-sm); }
.load-errors > button { justify-self: start; min-height: 32px; padding: 4px 12px; font-size: var(--ds-fs-sm); }
.notice-strip { border: 1px solid var(--ds-info-bg); border-inline-start: 4px solid var(--ds-info); background: var(--ds-info-bg); color: var(--ds-text); border-radius: var(--ds-r-md); padding: 10px var(--ds-s-4); font-size: var(--ds-fs-sm); }
.attention-strip { display: flex; flex-wrap: wrap; gap: var(--ds-s-2); }
.attention-strip .attn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px; border-radius: var(--ds-r-pill); font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-sm); cursor: pointer; border: 1px solid transparent; }
.attention-strip .attn b { font-size: var(--ds-fs-lg); font-variant-numeric: tabular-nums; }
.attention-strip .attn.warn { background: var(--ds-warn-bg); color: var(--ds-warn-text); border-color: #F1D79A; }
.attention-strip .attn.crit { background: var(--ds-crit-bg); color: var(--ds-crit-text); border-color: #F3BDB7; }
.live-note { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--ds-fs-xs); color: var(--ds-text-3); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ds-ok); box-shadow: 0 0 0 3px var(--ds-ok-bg); animation: ds-pulse 1.8s ease-in-out infinite; }

/* 9.4 tables — sticky header inside a bounded scroller, calm zebra, aligned numbers */
#app .table-wrap { padding: 0 !important; max-height: min(72vh, 760px); overflow: auto; border-radius: var(--ds-r-md) !important; box-shadow: none !important; }
#app .panel .table-wrap { border: 1px solid var(--ds-border) !important; }
#app .table-wrap table { min-width: 720px; font-variant-numeric: tabular-nums; }
#app .table-wrap thead th { position: sticky; top: 0; z-index: 2; background: var(--ds-surface-2) !important; box-shadow: inset 0 -1px 0 var(--ds-border); }
#app .table-wrap tbody tr:nth-child(even) > td { background: #FAFBFD; }
#app .table-wrap tbody tr:hover > td { background: var(--ds-navy-50); }
#app .table-wrap td { vertical-align: middle; line-height: 1.55; }
#app .table-wrap td .mini-actions { flex-wrap: wrap; gap: 6px; }
#app .table-wrap td .muted { font-size: var(--ds-fs-xs); }
.num, #app td .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 42ch; }
#app code { font-size: .86em; background: var(--ds-surface-3); border-radius: 6px; padding: 1px 6px; color: var(--ds-text-2); }
.code-block { display: block; word-break: break-all; padding: 10px 12px; margin: 8px 0; background: var(--ds-surface-3); border-radius: var(--ds-r-md); }

/* 9.5 status pills — one component, five tones */
.status-pill.info { background: var(--ds-info-bg) !important; color: var(--ds-info-text) !important; }
.status-pill:not(.ok):not(.warn):not(.crit):not(.info) { background: var(--ds-neutral-bg) !important; color: var(--ds-neutral-text) !important; }
button.status-pill.pill-link { border: 0 !important; cursor: pointer; min-height: 0; margin-top: 4px; padding: 3px 10px !important; box-shadow: none !important; font-size: var(--ds-fs-xs) !important; }

/* 9.6 lists (rows()) and key/value blocks */
#app .row-list { display: grid; }
#app .row-list > .row { padding: 10px 0; border-bottom: 1px solid var(--ds-border); gap: var(--ds-s-3); min-width: 0; }
#app .row-list > .row:last-child { border-bottom: 0; }
#app .row-list > .row > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#app .kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: var(--ds-fs-sm); }
#app .kv dt { color: var(--ds-text-3); }
#app .kv dd { margin: 0; color: var(--ds-text); font-weight: var(--ds-fw-medium); min-width: 0; overflow-wrap: anywhere; }
#app .package-card { gap: var(--ds-s-3); }
#app .package-head span[dir="ltr"] { font-size: var(--ds-fs-xs); color: var(--ds-text-3); }
#app .package-metrics div { background: var(--ds-surface-2) !important; border-color: var(--ds-border) !important; border-radius: var(--ds-r-md); }
#app .package-metrics strong { color: var(--ds-navy-800); font-variant-numeric: tabular-nums; }

/* 9.7 forms — labels above inputs, 2 columns on desktop, 1 on phones */
#modal .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
#modal .form-grid > * { min-width: 0; }
#modal .form-grid > .span-2 { grid-column: 1 / -1; }
#modal .form-grid > label, #modal .form-grid > div { display: grid; gap: 6px; align-content: start; }
#modal .form-grid .field-label { display: block; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-medium); color: var(--ds-text-2); line-height: 1.5; }
#modal .form-grid .multiselect .ms-item { display: inline-flex !important; flex-direction: row; align-items: center; gap: 6px; font-size: var(--ds-fs-sm); color: var(--ds-text); }
#modal .form-grid .req { color: var(--ds-crit-text); font-weight: var(--ds-fw-black); }
#modal .form-grid input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), #modal .form-grid select { min-height: 40px; padding: 8px 12px; }
#modal .form-grid textarea { min-height: 88px; resize: vertical; padding: 8px 12px; }
#modal .form-grid .multiselect { margin-top: 0; }
#modal .img-pick { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
#modal .img-pick img { height: 42px; width: auto; border-radius: 8px; border: 1px solid var(--ds-border); }
#modal .form-error { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--ds-r-md); background: var(--ds-crit-bg); color: var(--ds-crit-text); border: 1px solid #F3BDB7; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-bold); }
main .inline-form { gap: 12px 14px; }
main .inline-form > button { min-height: 40px; }

/* 9.8 dialogs — bounded width, scrolling body, action bar always visible */
dialog#modal:not(.evi) { width: min(820px, calc(100vw - 24px)) !important; min-width: 0 !important; max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 32px) !important; padding: 0 !important; overflow: hidden !important; }
dialog#modal:not(.evi) > form { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
dialog#modal:not(.evi) > form > h2 { margin: 0 !important; padding: var(--ds-s-4) var(--ds-s-5) var(--ds-s-3); border-bottom: 1px solid var(--ds-border); }
dialog#modal:not(.evi) #modal-body { display: block; flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0 !important; padding: var(--ds-s-4) var(--ds-s-5); }
dialog#modal:not(.evi) #modal-body > * + * { margin-top: 12px; }
dialog#modal:not(.evi) menu { flex: 0 0 auto; margin: 0 !important; padding: var(--ds-s-3) var(--ds-s-5) !important; display: flex; gap: var(--ds-s-2); justify-content: flex-start; }
dialog#modal menu button { min-height: 40px; padding: 8px 18px; }
dialog#modal .dlg-toasts { position: fixed; bottom: 16px; left: 16px; z-index: 5; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }

/* 9.9 toasts — light card, coloured rail, dismissable */
#toast { z-index: 1000; max-width: min(440px, calc(100vw - 32px)); }
#toast .toast, dialog .dlg-toasts .toast { display: flex; align-items: flex-start; gap: 10px; background: var(--ds-surface) !important; color: var(--ds-text) !important; border: 1px solid var(--ds-border) !important; border-inline-start: 4px solid var(--ds-ok) !important; border-radius: var(--ds-r-md) !important; box-shadow: var(--ds-e-3) !important; padding: 12px 14px !important; font-size: var(--ds-fs-md); line-height: 1.6; }
#toast .toast-error, dialog .dlg-toasts .toast-error { border-inline-start-color: var(--ds-crit) !important; }
#toast .toast > strong, .dlg-toasts .toast > strong { flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ds-ok-bg); color: var(--ds-ok-text); font-size: 13px; }
#toast .toast-error > strong, .dlg-toasts .toast-error > strong { background: var(--ds-crit-bg); color: var(--ds-crit-text); }
#toast .toast > span, .dlg-toasts .toast > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.toast .toast-x { flex: 0 0 auto; border: 0 !important; background: transparent !important; color: var(--ds-text-3) !important; padding: 0 4px !important; min-height: 0 !important; font-size: 18px; line-height: 1; box-shadow: none !important; cursor: pointer; }
.toast .toast-x:hover { color: var(--ds-text) !important; }

/* 9.10 sidebar groups — readable section titles, tighter rhythm */
aside#sidebar .nav-section > span { font-size: 11.5px !important; letter-spacing: 0; color: var(--ds-text-3) !important; text-transform: none; border-top: 1px solid var(--ds-border); padding-top: var(--ds-s-3) !important; margin-top: var(--ds-s-3) !important; }
aside#sidebar .nav-section:first-of-type > span { border-top: 0; padding-top: 0 !important; margin-top: 0 !important; }
aside#sidebar .nav-section button { min-height: 38px; }

/* 9.11 header actions: the clock and the user chip read as quiet metadata */
#page-actions .user-chip { font-size: var(--ds-fs-xs); color: var(--ds-text-3); padding: 0 4px; }
#page-actions .hdr-clock { font-variant-numeric: tabular-nums; }

/* 9.12 phones (≤ 760 px): one column, nothing wider than the screen */
@media (max-width: 760px) {
  #modal .form-grid { grid-template-columns: minmax(0, 1fr); }
  dialog#modal:not(.evi) { width: calc(100vw - 12px) !important; max-height: calc(100dvh - 12px) !important; }
  dialog#modal:not(.evi) > form { max-height: calc(100dvh - 12px); }
  dialog#modal:not(.evi) #modal-body { padding: var(--ds-s-3) var(--ds-s-4); }
  #app { gap: var(--ds-s-3); }
  #app .table-wrap { max-height: none; }
  #app .table-wrap table { min-width: 640px; }
  #app .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #app .kpi-grid > .card > strong { font-size: 20px !important; overflow-wrap: anywhere; }
  #app .grid, #app .package-grid, #app .payment-grid, #app .notification-grid, #app .algorithm-grid.modern, #app .module-strip { grid-template-columns: minmax(0, 1fr) !important; }
  #app .settings-shell { grid-template-columns: minmax(0, 1fr); }
  #app .settings-nav { position: static; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  #app .settings-nav button { flex: 0 0 auto; white-space: nowrap; }
  #app .algorithm-hero, #app .plans-toolbar { grid-template-columns: minmax(0, 1fr); }
  #app .customer-head .ch-actions > button, #app .mini-actions > button { flex: 1 1 auto; }
  #app .clamp-2 { max-width: 28ch; }
  #toast { left: 8px; right: 8px; bottom: 8px; max-width: none; }
  #page-actions .user-chip { display: none; }
}

/* 9.13 refinements after the first visual pass */
#app .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)) !important; }
#app .kpi-grid > .card > strong { font-size: clamp(20px, 1.9vw, 28px) !important; overflow-wrap: anywhere; line-height: 1.25; }
#app .linklike, #app button.linklike { background: none !important; border: 0 !important; padding: 0 !important; min-height: 0 !important; box-shadow: none !important; color: var(--ds-navy-700) !important; font-weight: var(--ds-fw-bold); text-decoration: underline; text-decoration-color: rgba(37, 30, 140, .3); text-underline-offset: 3px; text-align: start; cursor: pointer; }
#app .linklike:hover { color: var(--ds-navy-800) !important; text-decoration-color: currentColor; }
#app .mini-actions { gap: 6px; }
#app .mini-actions > button, #app .mini-actions > a.primary { min-height: 32px !important; padding: 5px 11px !important; font-size: 13px !important; border-radius: var(--ds-r-sm) !important; white-space: nowrap; }
#app .cms-nav-btn { background: transparent !important; border-color: transparent !important; box-shadow: none !important; transform: none !important; }
#app .cms-nav-btn:hover { background: var(--ds-surface-2) !important; }
#app .cms-nav-btn.active { background: var(--ds-navy-800) !important; color: #fff !important; }
#page-actions a.primary { min-height: 36px; padding: 6px 14px !important; font-size: var(--ds-fs-sm) !important; display: inline-flex; align-items: center; }
@media (max-width: 760px) {
  #app .table-wrap table { min-width: 880px; }
  #app .table-wrap td .mini-actions { flex-wrap: nowrap; }
  #app .table-wrap td .mini-actions > button { flex: 0 0 auto; }
  #app .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
#app .package-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; }
#app .package-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
#app .package-metrics div { padding: 8px 10px !important; }
#app .package-metrics strong { font-size: 20px; }
#app .plans-toolbar, #app .algorithm-hero { align-items: center; }
#app .plans-toolbar > button { align-self: center; justify-self: start; width: auto; }
#app .chips { display: flex; flex-wrap: wrap; gap: 6px; }