/* Generated by scripts/build-screens.mjs from site/pages/screens/src/groupe.css: do not edit by hand. */
/* The groupe screens (api/screens/groupe.js): the executive cockpit « Pilotage groupe », the group's AI assistant, the drill-down by
   entity. Written in design pixels (scripts/build-screens.mjs). gp-* = the shell shared by the cockpit and the entities screens,
   ck-* = the cockpit, as-* = the assistant, en-* = the entities. Charts stay left to right in Arabic (.ltr wrappers). */

.scr-cockpit, .scr-entities { height: calc(var(--u) * 800); }
.scr-assistant { height: calc(var(--u) * 680); }
:is(.scr-cockpit, .scr-assistant, .scr-entities) .num { white-space: nowrap; }
:is(.scr-cockpit, .scr-assistant, .scr-entities) .gp-st { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
:is(.scr-cockpit, .scr-assistant, .scr-entities) .gp-sq { display: inline-block; width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: calc(var(--u) * 2); flex: 0 0 auto; background: var(--s1); }
:is(.scr-cockpit, .scr-assistant, .scr-entities) .gp-sq.s2 { background: var(--s2); }
:is(.scr-cockpit, .scr-assistant, .scr-entities) .gp-sq.s3 { background: var(--s3); }
:is(.scr-cockpit, .scr-assistant, .scr-entities) .gp-sq.s5 { background: var(--s5); }
:is(.scr-cockpit, .scr-assistant, .scr-entities) .gp-sq.s6 { background: var(--s6); }

/* ── the shell: sidebar and top bar ── */
:is(.scr-cockpit, .scr-entities) .gp-side { padding: calc(var(--u) * 14) calc(var(--u) * 12) calc(var(--u) * 12); }
:is(.scr-cockpit, .scr-entities) .gp-side .brand { padding: calc(var(--u) * 4) calc(var(--u) * 8) calc(var(--u) * 18); }
:is(.scr-cockpit, .scr-entities) .gp-side .brand .ell { flex: 1 1 auto; }
:is(.scr-cockpit, .scr-entities) .gp-sw { width: calc(var(--u) * 15); height: calc(var(--u) * 15); color: var(--tx3); }
:is(.scr-cockpit, .scr-entities) .gp-side .grp { margin: calc(var(--u) * 18) calc(var(--u) * 10) calc(var(--u) * 6); }
:is(.scr-cockpit, .scr-entities) .nv .gp-cnt { min-width: calc(var(--u) * 18); height: calc(var(--u) * 18); padding: 0 calc(var(--u) * 5); border-radius: calc(var(--u) * 9); background: var(--bad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 10.5); font-weight: 700; }
:is(.scr-cockpit, .scr-entities) .gp-v { font-size: calc(var(--u) * 13); }
:is(.scr-cockpit, .scr-entities) .gp-v .gp-sq { margin-inline: calc(var(--u) * 5) calc(var(--u) * 4); }
:is(.scr-cockpit, .scr-entities) .gp-close { display: flex; flex-direction: column; gap: calc(var(--u) * 7); padding: calc(var(--u) * 11) calc(var(--u) * 12) calc(var(--u) * 10); margin: 0 calc(var(--u) * 2) calc(var(--u) * 8); border: 1px solid var(--line); border-radius: calc(var(--u) * 10); }
:is(.scr-cockpit, .scr-entities) .gp-close .prog { height: calc(var(--u) * 5); }
:is(.scr-cockpit, .scr-entities) .gp-j { display: inline-flex; align-items: center; height: calc(var(--u) * 18); padding: 0 calc(var(--u) * 6); border-radius: calc(var(--u) * 5); background: var(--warn-soft); color: var(--warn); font-size: calc(var(--u) * 10.5); font-weight: 700; }
:is(.scr-cockpit, .scr-entities) .gp-sync { display: flex; align-items: flex-start; gap: calc(var(--u) * 10); padding: calc(var(--u) * 10) calc(var(--u) * 12); margin: 0 calc(var(--u) * 2) calc(var(--u) * 10); border: 1px solid var(--line); border-radius: calc(var(--u) * 10); background: var(--sur2); }
:is(.scr-cockpit, .scr-entities) .gp-sync .dot { margin-top: calc(var(--u) * 5); box-shadow: 0 0 0 calc(var(--u) * 3) var(--ok-soft); }
:is(.scr-cockpit, .scr-entities) .gp-me { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 12) calc(var(--u) * 6) calc(var(--u) * 2); border-top: 1px solid var(--line2); }
:is(.scr-cockpit, .scr-entities) .gp-dots { color: var(--tx3); }
:is(.scr-cockpit, .scr-entities) .gp-top { gap: calc(var(--u) * 10); }
:is(.scr-cockpit, .scr-entities) .gp-q { width: calc(var(--u) * 330); }
:is(.scr-cockpit, .scr-entities) .gp-q .ell { flex: 1 1 auto; }
:is(.scr-cockpit, .scr-entities) .gp-ent { height: calc(var(--u) * 36); padding-inline: calc(var(--u) * 11) calc(var(--u) * 9); border-radius: calc(var(--u) * 9); color: var(--tx); }
:is(.scr-cockpit, .scr-entities) .gp-ent .ic { color: var(--tx3); }
:is(.scr-cockpit, .scr-entities) .gp-pill { display: inline-flex; align-items: center; height: calc(var(--u) * 18); padding: 0 calc(var(--u) * 6); border-radius: calc(var(--u) * 5); background: var(--line2); color: var(--tx2); font-size: calc(var(--u) * 11); font-weight: 600; }
:is(.scr-cockpit, .scr-entities) .gp-top .seg .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: var(--tx3); }
:is(.scr-cockpit, .scr-entities) .gp-top .av { width: calc(var(--u) * 32); height: calc(var(--u) * 32); margin-inline-start: calc(var(--u) * 2); }

/* ── cockpit ── */
.scr-cockpit .ck-upd { margin-inline-end: calc(var(--u) * 6); }
.scr-cockpit .ck-upd .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.scr-cockpit .ck-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 16); flex: 0 0 auto; }
.scr-cockpit .ck-k { position: relative; height: calc(var(--u) * 116); padding: calc(var(--u) * 16) calc(var(--u) * 18); display: flex; flex-direction: column; }
.scr-cockpit .ck-k .val { font-size: calc(var(--u) * 24); margin-top: calc(var(--u) * 8); }
.scr-cockpit .ck-u { font-size: calc(var(--u) * 14); font-weight: 600; color: var(--tx2); letter-spacing: 0; margin-inline-start: calc(var(--u) * 4); }
.scr-cockpit .ck-kd { margin-top: auto; }
.scr-cockpit .ck-sk { position: absolute; inset-inline-end: calc(var(--u) * 18); top: calc(var(--u) * 44); width: calc(var(--u) * 76); height: calc(var(--u) * 30); }
.scr-cockpit .chart .ln.bad { stroke: var(--bad); }
.scr-cockpit .chart .bad.st0, .scr-cockpit .chart .bad.st1 { stop-color: var(--bad); }
.scr-cockpit .ck-grid { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 392); gap: calc(var(--u) * 16); flex: 1 1 auto; min-height: 0; }
.scr-cockpit .ck-rc { display: flex; flex-direction: column; gap: calc(var(--u) * 16); min-height: 0; min-width: 0; }

/* the chart: plot 508 × 344 = its SVG viewBox; y labels centred on the grid lines; x labels centred on the points */
.scr-cockpit .ck-ch { padding: calc(var(--u) * 16); display: flex; flex-direction: column; }
.scr-cockpit .ck-ch .card-h { margin-bottom: calc(var(--u) * 14); align-items: flex-start; }
.scr-cockpit .ck-seg span { height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 9); font-size: calc(var(--u) * 12); }
.scr-cockpit .ck-ib { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.scr-cockpit .ck-lgs { margin-bottom: calc(var(--u) * 16); }
.scr-cockpit .ck-tot { color: var(--tx); font-weight: 650; margin-inline-start: calc(var(--u) * 6); }
.scr-cockpit .ck-plot { display: flex; align-items: flex-start; gap: calc(var(--u) * 10); }
.scr-cockpit .ck-ya { width: calc(var(--u) * 34); height: calc(var(--u) * 358); margin-top: calc(var(--u) * -7); display: flex; flex-direction: column; justify-content: space-between; text-align: end; font-size: calc(var(--u) * 11); line-height: calc(var(--u) * 14); color: var(--tx3); flex: 0 0 auto; }
.scr-cockpit .ck-pa { position: relative; width: calc(var(--u) * 508); height: calc(var(--u) * 344); flex: 0 0 auto; box-shadow: inset 0 1px 0 var(--line2), inset 0 -1px 0 var(--line); }
.scr-cockpit .ck-pa > .chart { position: absolute; inset: 0; }
.scr-cockpit .ck-pa .chart .ar:not(.s1) { display: none; }
.scr-cockpit .ck-pa .chart .s1.st0 { stop-opacity: .18; }
.scr-cockpit .ck-band { position: absolute; inset-block: 0; inset-inline-start: calc(var(--u) * 392.5); width: calc(var(--u) * 115.5); background: color-mix(in srgb, var(--acc) 5%, transparent); border-inline-start: 1px dashed color-mix(in srgb, var(--acc) 40%, transparent); }
.scr-cockpit .ck-band span { position: absolute; top: calc(var(--u) * 6); inset-inline-end: calc(var(--u) * 8); font-weight: 700; color: var(--acc-tx); }
.scr-cockpit .ck-ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.scr-cockpit .ck-gd { stroke: var(--tx3); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.scr-cockpit .ck-ov circle { stroke: var(--sur); stroke-width: 2; }
.scr-cockpit .ck-ov .s1 { fill: var(--s1); } .scr-cockpit .ck-ov .s2 { fill: var(--s2); } .scr-cockpit .ck-ov .s3 { fill: var(--s3); } .scr-cockpit .ck-ov .s6 { fill: var(--s6); }
.scr-cockpit .ck-tip { position: absolute; z-index: 3; top: calc(var(--u) * 12); inset-inline-start: calc(var(--u) * 260); width: calc(var(--u) * 190); }
.scr-cockpit .ck-tip-in { display: flex; flex-direction: column; gap: calc(var(--u) * 6); padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 10); background: var(--sur); border: 1px solid var(--line); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 28) calc(var(--u) * -8) rgba(16, 24, 40, .22), 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(16, 24, 40, .06); }
[dir="rtl"] .scr-cockpit .ck-tip-in { direction: rtl; }
.scr-cockpit .ck-tr { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 12); color: var(--tx2); }
.scr-cockpit .ck-tr i { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: calc(var(--u) * 2); flex: 0 0 auto; background: var(--s1); }
.scr-cockpit .ck-tr i.s2 { background: var(--s2); } .scr-cockpit .ck-tr i.s3 { background: var(--s3); } .scr-cockpit .ck-tr i.s6 { background: var(--s6); }
.scr-cockpit .ck-tr b { margin-inline-start: auto; font-weight: 600; color: var(--tx); }
.scr-cockpit .ck-tt { padding-top: calc(var(--u) * 6); border-top: 1px solid var(--line2); color: var(--tx); font-weight: 600; }
.scr-cockpit .ck-ptr { inset-inline-start: calc(var(--u) * 459); top: calc(var(--u) * 198); }
.scr-cockpit .ck-xa { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); width: calc(var(--u) * 554.2); margin-inline-start: calc(var(--u) * 20.9); margin-top: calc(var(--u) * 8); text-align: center; font-size: calc(var(--u) * 11); color: var(--tx3); }
.scr-cockpit .ck-xa .on { color: var(--tx); font-weight: 650; }
.js .dev:not(.in) .scr-cockpit .ck-ptr { opacity: 0; }
.in .scr-cockpit .ck-ptr { animation: ck-ptr 1.1s cubic-bezier(.3, .7, .3, 1) 1.4s both; }
@keyframes ck-ptr { from { opacity: 0; transform: translate(calc(var(--u) * -110), calc(var(--u) * 70)); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }

/* markets and alerts */
.scr-cockpit .ck-mk { padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 8); flex: 0 0 auto; }
.scr-cockpit .ck-al { padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 4); flex: 1 1 auto; min-height: 0; overflow: hidden; }
.scr-cockpit :is(.ck-mk, .ck-al) .card-h { margin-bottom: calc(var(--u) * 8); }
.scr-cockpit :is(.ck-mk, .ck-al) .card-h .h4 { flex: 0 0 auto; }
.scr-cockpit .ck-mr { display: grid; grid-template-columns: calc(var(--u) * 30) minmax(0, 1fr) calc(var(--u) * 52) calc(var(--u) * 54) calc(var(--u) * 52); align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 34); border-top: 1px solid var(--line2); }
.scr-cockpit .ck-mr > * { min-width: 0; }
.scr-cockpit .ck-mr.th { height: calc(var(--u) * 26); border-top: 0; font-size: calc(var(--u) * 11); font-weight: 600; color: var(--tx3); }
[lang="ar"] .scr-cockpit .ck-mr.th { font-size: calc(var(--u) * 11.5); }
.scr-cockpit .ck-mr .end { text-align: end; justify-self: end; }
.scr-cockpit .ck-code { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 30); height: calc(var(--u) * 20); border-radius: calc(var(--u) * 5); background: var(--line2); color: var(--tx2); font-size: calc(var(--u) * 10.5); font-weight: 700; letter-spacing: calc(var(--u) * .3); }
.scr-cockpit .ck-mr .prog { height: calc(var(--u) * 5); }
.scr-cockpit .ck-ar { display: flex; align-items: flex-start; gap: calc(var(--u) * 10); padding: calc(var(--u) * 8) 0 calc(var(--u) * 9); border-top: 1px solid var(--line2); }
.scr-cockpit .ck-ar .dot { margin-top: calc(var(--u) * 6); }
.scr-cockpit .ck-ar .dot.bad { box-shadow: 0 0 0 calc(var(--u) * 3) var(--bad-soft); }
.scr-cockpit .ck-ar .dot.warn { box-shadow: 0 0 0 calc(var(--u) * 3) var(--warn-soft); }
.scr-cockpit .ck-tm { flex: 0 0 auto; }
.scr-cockpit .ck-ar .row { gap: calc(var(--u) * 6); }

/* ── assistant ── */
.scr-assistant { display: flex; flex-direction: column; background: var(--sur); }
.scr-assistant .as-h { flex: 0 0 auto; display: flex; align-items: center; gap: calc(var(--u) * 12); padding-block: calc(var(--u) * 12); padding-inline: calc(var(--u) * 18) calc(var(--u) * 14); border-bottom: 1px solid var(--line); }
.scr-assistant .as-lg { width: calc(var(--u) * 38); height: calc(var(--u) * 38); border-radius: calc(var(--u) * 11); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #fff; background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 55%, var(--s2))); box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 10) calc(var(--u) * -4) color-mix(in srgb, var(--acc) 70%, transparent); }
.scr-assistant .as-lg .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.scr-assistant .as-h .h4 { font-size: calc(var(--u) * 14); }
.scr-assistant .as-scope { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); align-self: flex-start; max-width: 100%; height: calc(var(--u) * 22); margin-top: calc(var(--u) * 4); padding-inline: calc(var(--u) * 7) calc(var(--u) * 6); border-radius: calc(var(--u) * 6); background: var(--acc-soft); color: var(--acc-tx); font-size: calc(var(--u) * 11.5); font-weight: 600; }
.scr-assistant .as-scope .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); stroke-width: 2.2; }
.scr-assistant .as-ib { width: calc(var(--u) * 32); height: calc(var(--u) * 32); border-color: transparent; }
.scr-assistant .as-b { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(var(--u) * 12); padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 12); background: var(--bg); }
.scr-assistant .as-q { display: flex; align-items: flex-end; justify-content: flex-end; gap: calc(var(--u) * 8); }
.scr-assistant .as-bub { max-width: calc(var(--u) * 420); padding: calc(var(--u) * 9) calc(var(--u) * 14); border-radius: calc(var(--u) * 16); border-end-end-radius: calc(var(--u) * 5); background: var(--ink); color: var(--bg); font-size: calc(var(--u) * 13.5); font-weight: 500; }
.scr-assistant .as-a { padding: calc(var(--u) * 12) calc(var(--u) * 16) calc(var(--u) * 6); border-radius: calc(var(--u) * 14); display: flex; flex-direction: column; gap: calc(var(--u) * 10); box-shadow: 0 1px calc(var(--u) * 2) rgba(16, 24, 40, .04), 0 calc(var(--u) * 4) calc(var(--u) * 12) calc(var(--u) * -2) rgba(16, 24, 40, .06); }
.scr-assistant .as-mini { width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: calc(var(--u) * 6); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--acc-soft); color: var(--acc-tx); }
.scr-assistant .as-mini .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.scr-assistant .as-tool { width: calc(var(--u) * 15); height: calc(var(--u) * 15); color: var(--tx3); }
.scr-assistant .as-tool + .as-tool { margin-inline-start: calc(var(--u) * 6); }
.scr-assistant .as-p { font-size: calc(var(--u) * 13.5); line-height: 1.6; color: var(--tx); }
.scr-assistant .as-ct { display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--u) * 16); height: calc(var(--u) * 16); padding: 0 calc(var(--u) * 4); margin-inline: calc(var(--u) * 3) 1px; border-radius: calc(var(--u) * 5); background: var(--acc-soft); color: var(--acc-tx); font-size: calc(var(--u) * 10); font-weight: 700; line-height: 1; vertical-align: calc(var(--u) * 5); }
.scr-assistant .as-ch { padding: calc(var(--u) * 10) calc(var(--u) * 14) calc(var(--u) * 8); border: 1px solid var(--line2); border-radius: calc(var(--u) * 10); background: var(--sur2); }
.scr-assistant .as-ch .lg { font-size: calc(var(--u) * 11); }
.scr-assistant .lg i.as-lb { background: var(--bad); }
.scr-assistant .lg i.as-lt { width: calc(var(--u) * 12); height: 0; border-radius: 0; background: none; border-top: calc(var(--u) * 1.5) dashed var(--tx3); }
.scr-assistant .as-pl { position: relative; height: calc(var(--u) * 66); margin-top: calc(var(--u) * 18); }
.scr-assistant .as-pl .chart { position: absolute; inset: 0; }
.scr-assistant .chart rect.as-n { fill: color-mix(in srgb, var(--acc) 34%, var(--sur)); }
.scr-assistant .chart rect.warn { fill: var(--warn); }
.scr-assistant .chart rect.bad { fill: var(--bad); }
.scr-assistant .as-tg { position: absolute; inset-inline: 0; inset-block-end: 62.5%; border-top: calc(var(--u) * 1.5) dashed var(--tx3); }
.scr-assistant .as-vl { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.scr-assistant .as-vl > span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.scr-assistant .as-vl b { font-size: calc(var(--u) * 10.5); font-weight: 600; color: var(--tx2); margin-bottom: calc(var(--u) * 3); }
.scr-assistant .as-vl b.warn { color: var(--warn); } .scr-assistant .as-vl b.bad { color: var(--bad); }
.scr-assistant .as-xa { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); text-align: center; font-size: calc(var(--u) * 10.5); color: var(--tx3); margin-top: 0; padding-top: calc(var(--u) * 5); border-top: 1px solid var(--line); }
.scr-assistant .as-src { display: flex; flex-direction: column; }
.scr-assistant .as-sh { margin-bottom: calc(var(--u) * 2); }
.scr-assistant .as-s { display: flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 30); border-top: 1px solid var(--line2); }
.scr-assistant .as-s .as-ct { margin: 0; vertical-align: 0; flex: 0 0 auto; }
.scr-assistant .as-si { width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 6); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--sur2); border: 1px solid var(--line); color: var(--tx2); }
.scr-assistant .as-si .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.scr-assistant .as-sm { flex: 0 1 auto; }
.scr-assistant .as-o { display: inline-flex; align-items: center; gap: calc(var(--u) * 3); flex: 0 0 auto; font-size: calc(var(--u) * 12); font-weight: 600; color: var(--acc-tx); }
.scr-assistant .as-o .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.scr-assistant .as-sug { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); }
.scr-assistant .as-sug .chip { height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 15); color: var(--tx); background: var(--sur); }
.scr-assistant .as-f { flex: 0 0 auto; display: flex; flex-direction: column; gap: calc(var(--u) * 6); padding: calc(var(--u) * 10) calc(var(--u) * 16) calc(var(--u) * 8); border-top: 1px solid var(--line); background: var(--sur); }
.scr-assistant .as-in { height: calc(var(--u) * 46); display: flex; align-items: center; gap: calc(var(--u) * 2); padding-inline: calc(var(--u) * 14) calc(var(--u) * 7); border: 1px solid color-mix(in srgb, var(--acc) 55%, var(--line)); border-radius: calc(var(--u) * 12); box-shadow: 0 0 0 calc(var(--u) * 3) var(--acc-soft); font-size: calc(var(--u) * 13.5); }
.scr-assistant .as-in .ell { margin-inline-start: calc(var(--u) * 4); }
.scr-assistant .as-send { width: calc(var(--u) * 32); height: calc(var(--u) * 32); border-radius: calc(var(--u) * 9); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--acc); color: #fff; }
.scr-assistant .as-send .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); stroke-width: 2.2; }
.scr-assistant .as-note { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 5); font-size: calc(var(--u) * 11); color: var(--tx3); }
.scr-assistant .as-note .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }

/* ── entities ── */
.scr-entities .en-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 344); }
.scr-entities .en-bc { display: flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 12.5); font-weight: 500; color: var(--tx3); }
.scr-entities .en-bc .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.scr-entities .en-bc b { color: var(--tx2); font-weight: 600; }
.scr-entities .en-ttl { display: flex; align-items: center; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 6); }
.scr-entities .en-mx { padding: calc(var(--u) * 16); display: flex; flex-direction: column; flex: 0 0 auto; }
.scr-entities .en-mx .card-h { margin-bottom: calc(var(--u) * 12); }
.scr-entities .en-mx .card-h .h4 { flex: 0 0 auto; }
.scr-entities .en-seg span { height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 9); font-size: calc(var(--u) * 12); }
.scr-entities .en-r { display: grid; grid-template-columns: calc(var(--u) * 150) repeat(5, minmax(0, 1fr)) calc(var(--u) * 16); gap: calc(var(--u) * 4); align-items: center; padding: calc(var(--u) * 2) calc(var(--u) * 6); border-radius: calc(var(--u) * 10); }
.scr-entities .en-r + .en-r { margin-top: calc(var(--u) * 2); }
.scr-entities .en-r.th { padding-block: 0 calc(var(--u) * 4); font-size: calc(var(--u) * 11); font-weight: 600; color: var(--tx3); text-align: center; line-height: 1.25; }
[lang="ar"] .scr-entities .en-r.th { font-size: calc(var(--u) * 11.5); }
.scr-entities .en-r.th > :first-child { text-align: start; padding-inline-start: calc(var(--u) * 4); }
.scr-entities .en-r.sel { background: var(--acc-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 30%, transparent); }
.scr-entities .en-r.tot { margin-top: calc(var(--u) * 6); padding-top: calc(var(--u) * 8); border-top: 1px solid var(--line); border-radius: 0; }
.scr-entities .en-e { min-width: 0; padding-inline-start: calc(var(--u) * 2); }
.scr-entities .en-ei { width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: calc(var(--u) * 8); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--sur); border: 1px solid var(--line); color: var(--tx2); }
.scr-entities .en-ei .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.scr-entities .en-r.sel .en-ei { background: var(--acc); border-color: var(--acc); color: #fff; }
.scr-entities .en-c { position: relative; height: calc(var(--u) * 48); min-width: 0; border-radius: calc(var(--u) * 8); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.scr-entities .en-c b { font-size: calc(var(--u) * 13); font-weight: 650; color: var(--tx); }
.scr-entities .en-c small { font-size: calc(var(--u) * 10.5); font-weight: 600; }
.scr-entities .en-c small.up { color: color-mix(in srgb, var(--ok) 72%, var(--tx)); }
.scr-entities .en-c small.dn { color: color-mix(in srgb, var(--bad) 82%, var(--tx)); }
.scr-entities :is(.en-c, .en-sw i).g3 { background: color-mix(in srgb, var(--ok) 32%, var(--sur)); }
.scr-entities :is(.en-c, .en-sw i).g2 { background: color-mix(in srgb, var(--ok) 19%, var(--sur)); }
.scr-entities :is(.en-c, .en-sw i).g1 { background: color-mix(in srgb, var(--ok) 9%, var(--sur)); }
.scr-entities :is(.en-c, .en-sw i).n0 { background: var(--sur2); box-shadow: inset 0 0 0 1px var(--line2); }
.scr-entities :is(.en-c, .en-sw i).r1 { background: color-mix(in srgb, var(--bad) 9%, var(--sur)); }
.scr-entities :is(.en-c, .en-sw i).r2 { background: color-mix(in srgb, var(--bad) 18%, var(--sur)); }
.scr-entities :is(.en-c, .en-sw i).r3 { background: color-mix(in srgb, var(--bad) 30%, var(--sur)); }
.scr-entities .en-c.na { color: var(--tx3); background: repeating-linear-gradient(135deg, var(--line2) 0 calc(var(--u) * 2), transparent calc(var(--u) * 2) calc(var(--u) * 7)); }
.scr-entities .en-c.tt b { font-weight: 700; }
.scr-entities .en-c.hov { z-index: 3; }
.scr-entities .en-c.hov::before { content: ""; position: absolute; inset: 0; border-radius: calc(var(--u) * 8); box-shadow: 0 0 0 calc(var(--u) * 2) var(--tx), 0 calc(var(--u) * 8) calc(var(--u) * 18) calc(var(--u) * -6) rgba(16, 24, 40, .35); pointer-events: none; }
.js .dev:not(.in) .scr-entities .en-c.hov::before { opacity: 0; }
.in .scr-entities .en-c.hov::before { animation: scr-fade .3s ease 2.5s both; }
.scr-entities .en-chev { width: calc(var(--u) * 15); height: calc(var(--u) * 15); color: var(--tx3); }
.scr-entities .en-r.sel .en-chev { color: var(--acc-tx); }
.scr-entities .en-tip { position: absolute; z-index: 4; bottom: calc(100% + calc(var(--u) * 10)); inset-inline-start: calc(var(--u) * -52); width: calc(var(--u) * 188); display: flex; flex-direction: column; gap: calc(var(--u) * 2); padding: calc(var(--u) * 9) calc(var(--u) * 11); border-radius: calc(var(--u) * 9); background: var(--ink); color: var(--bg); font-size: calc(var(--u) * 11.5); line-height: 1.4; text-align: start; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) calc(var(--u) * -8) rgba(16, 24, 40, .45); }
.scr-entities .en-tip b { font-size: calc(var(--u) * 12); font-weight: 650; color: var(--bg); }
.scr-entities .en-tip .en-tk { display: flex; align-items: center; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 4); color: color-mix(in srgb, var(--bg) 70%, transparent); }
.scr-entities .en-tip .en-tk .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.scr-entities .en-tip::after { content: ""; position: absolute; top: 100%; inset-inline-start: calc(var(--u) * 88); border: calc(var(--u) * 6) solid transparent; border-top-color: var(--ink); }
.scr-entities .en-ptr { top: calc(var(--u) * 26); inset-inline-start: calc(var(--u) * 50); }
.js .dev:not(.in) .scr-entities :is(.en-tip, .en-ptr) { opacity: 0; }
.in .scr-entities .en-tip { animation: scr-fade .4s ease 2.7s both; }
.in .scr-entities .en-ptr { animation: en-ptr 1s cubic-bezier(.3, .7, .3, 1) 1.6s both; }
@keyframes en-ptr { from { opacity: 0; transform: translate(calc(var(--u) * 60), calc(var(--u) * 80)); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
.scr-entities .en-lg { display: flex; align-items: center; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 14); padding-top: calc(var(--u) * 12); border-top: 1px solid var(--line2); }
.scr-entities .en-sw { display: inline-flex; gap: calc(var(--u) * 3); }
.scr-entities .en-sw i { width: calc(var(--u) * 16); height: calc(var(--u) * 10); border-radius: calc(var(--u) * 3); }
.scr-entities .en-ai { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 12) calc(var(--u) * 14); border-radius: calc(var(--u) * 12); border: 1px solid color-mix(in srgb, var(--acc) 25%, var(--line)); background: linear-gradient(90deg, var(--acc-soft), var(--sur) 75%); flex: 0 0 auto; }
[dir="rtl"] .scr-entities .en-ai { background: linear-gradient(270deg, var(--acc-soft), var(--sur) 75%); }
.scr-entities .en-ai b { color: var(--acc-tx); font-weight: 650; }
.scr-entities .en-aii { width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: calc(var(--u) * 9); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--acc); color: #fff; }
.scr-entities .en-aii .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }

/* the selected entity's panel */
.scr-entities .en-pn { background: var(--sur); border-inline-start: 1px solid var(--line); padding: calc(var(--u) * 18) calc(var(--u) * 20) calc(var(--u) * 20); display: flex; flex-direction: column; gap: calc(var(--u) * 12); min-width: 0; min-height: 0; overflow: hidden; }
.scr-entities .en-ph { display: flex; align-items: flex-start; gap: calc(var(--u) * 12); }
.scr-entities .en-ph .h4 { font-size: calc(var(--u) * 14); }
.scr-entities .en-ph .icb { width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-color: transparent; }
.scr-entities .en-ico { width: calc(var(--u) * 38); height: calc(var(--u) * 38); border-radius: calc(var(--u) * 10); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--acc); color: #fff; }
.scr-entities .en-ico .ic { width: calc(var(--u) * 19); height: calc(var(--u) * 19); }
.scr-entities .en-tags { flex-wrap: wrap; }
.scr-entities .en-kg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 8); }
.scr-entities .en-k { padding: calc(var(--u) * 10) calc(var(--u) * 12); border: 1px solid var(--line); border-radius: calc(var(--u) * 10); display: flex; flex-direction: column; gap: calc(var(--u) * 2); min-width: 0; }
.scr-entities .en-kv { font-size: calc(var(--u) * 18); font-weight: 700; letter-spacing: calc(var(--u) * -.3); line-height: 1.3; }
.scr-entities .en-sec { padding-top: calc(var(--u) * 12); border-top: 1px solid var(--line2); }
.scr-entities .en-sh { display: flex; align-items: center; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 10); }
.scr-entities .en-dn { display: flex; align-items: center; gap: calc(var(--u) * 18); }
.scr-entities .en-dw { position: relative; width: calc(var(--u) * 98); height: calc(var(--u) * 98); flex: 0 0 auto; }
.scr-entities .en-dc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
.scr-entities .en-dc b { font-size: calc(var(--u) * 15); font-weight: 700; }
.scr-entities .en-lgd { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 9); }
.scr-entities .en-lr { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 12); }
.scr-entities .en-lr .ell { flex: 1 1 auto; color: var(--tx2); }
.scr-entities .en-lr b { font-weight: 650; }
.scr-entities .en-acs { display: flex; flex-direction: column; }
.scr-entities .en-ac { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 38); border-top: 1px solid var(--line2); }
.scr-entities .en-ac:first-child { border-top: 0; }
.scr-entities .en-rk { width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: calc(var(--u) * 6); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--line2); color: var(--tx2); font-size: calc(var(--u) * 11); font-weight: 700; }
.scr-entities .en-av { width: calc(var(--u) * 62); flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 4); }
.scr-entities .en-av .prog { width: 100%; height: calc(var(--u) * 4); }
.scr-entities .en-pf { margin-top: auto; display: flex; gap: calc(var(--u) * 8); }
.scr-entities .en-pf .btn.pri { flex: 1 1 auto; height: calc(var(--u) * 38); }
.scr-entities .en-pf .icb { width: calc(var(--u) * 38); height: calc(var(--u) * 38); }