/* Generated by scripts/home-css.mjs from site/fonts.css, site/pages/s/kit.css, site/pages/s/web.css, site/pages/s/logiciels.css, site/pages/s/groupe.css, site/pages/s/securite.css: do not edit by hand. */
/* izak's brand fonts, self-hosted (OFL, licences in /fonts/), one sheet for the whole site since 07/10/2026: the v6 pages, the legal
   pages, the 404, the client space (/app), the email-link page and izak HQ's audience page. WOFF2 subsets under their real names,
   so the kit's screens (kit.css asks for "Plus Jakarta Sans") paint in the brand face too. Arabic is in /fonts-ar.css, linked only
   by Arabic pages (and /app). A changed face takes a new file name: the files are cached a year (site/_headers). */
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/jakarta.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* the word « العربية » in the language lists of the other languages' pages: Noto Sans Arabic cut to its seven letters (3 KB, weight
   500), so that it is not drawn in a system face and the full Arabic file is not downloaded for one word */
@font-face { font-family: "Noto Sans Arabic Lang"; src: url("/fonts/arabic-name.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0627-0629, U+0631, U+0639, U+0644, U+064A; }

/* Generated by scripts/build-screens.mjs from site/pages/screens/src/kit.css: do not edit by hand. */
/* The product screens' kit (api/screens/kit.js). Written in DESIGN pixels: scripts/build-screens.mjs turns every « Npx » into
   calc(var(--u) * N) (1px hairlines stay; « NPX » in capitals stays in real pixels, for the frames themselves).
   A fictional client, « Votre Groupe »: its product colour is a deep teal; greys, four chart tones, semantic greens/ambers/reds.
   Light by default, .dark for dark products. Arabic pages are right to left: logical properties only (inline/block). */

/* ── frames: .dev is the container; --u = one design pixel at its real width ── */
.dev { position: relative; container-type: inline-size; --u: calc(100cqw / var(--dw)); --dw: 1280; isolation: isolate; text-align: start;
  --sf: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-family: var(--sf); }
[lang="ar"] .dev { --sf: "Noto Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif; }
.dev.ph { --dw: 390; }
.dev.pn { --dw: 560; }
.dev.dw-1440 { --dw: 1440; } .dev.dw-1200 { --dw: 1200; } .dev.dw-1100 { --dw: 1100; } .dev.dw-1000 { --dw: 1000; } .dev.dw-960 { --dw: 960; }
.dev.dw-900 { --dw: 900; } .dev.dw-800 { --dw: 800; } .dev.dw-720 { --dw: 720; } .dev.dw-640 { --dw: 640; } .dev.dw-600 { --dw: 600; }
.dev.dw-520 { --dw: 520; } .dev.dw-480 { --dw: 480; } .dev.dw-420 { --dw: 420; } .dev.dw-400 { --dw: 400; } .dev.dw-360 { --dw: 360; } .dev.dw-320 { --dw: 320; }
.dev .vp { position: relative; overflow: hidden; }
.dev .ic { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* a browser window (macOS-like) */
.dev.br { border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 30px 80px -20px rgba(0, 0, 0, .45), 0 12px 30px -12px rgba(0, 0, 0, .3); }
.dev.br.dark { background: #16181d; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 80px -20px rgba(0, 0, 0, .6); }
.br-bar { height: calc(var(--u) * 44); display: flex; align-items: center; gap: calc(var(--u) * 16); padding: 0 calc(var(--u) * 16); background: #f3f4f6; border-bottom: 1px solid #e3e5e8; direction: ltr; }
.dark .br-bar { background: #1d2026; border-bottom-color: #2a2e36; }
.br-dots { display: flex; gap: calc(var(--u) * 8); flex: 0 0 auto; }
.br-dots i { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; background: #ff5f57; }
.br-dots i:nth-child(2) { background: #febc2e; } .br-dots i:nth-child(3) { background: #28c840; }
.br-tabs { display: flex; gap: calc(var(--u) * 4); flex: 0 1 auto; min-width: 0; }
.br-url { flex: 0 1 calc(var(--u) * 520); margin: 0 auto; height: calc(var(--u) * 28); border-radius: calc(var(--u) * 7); background: #e6e8eb; color: #4b5260; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6); font: 500 calc(var(--u) * 12.5)/1 var(--sf); white-space: nowrap; overflow: hidden; }
.dark .br-url { background: #2a2e36; color: #aab1bc; }
.br-url .ic { width: calc(var(--u) * 11); height: calc(var(--u) * 11); stroke-width: 2.4; flex: 0 0 auto; }
.br-act { display: flex; gap: calc(var(--u) * 14); color: #8a919c; flex: 0 0 auto; }
.br-act .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }

/* a phone (iPhone-like: Dynamic Island, status bar, home indicator); the bezel is in % of its own width */
.dev.ph { padding: 3.1%; border-radius: 15.5% / 7.4%; background: #0c0c0e; box-shadow: inset 0 0 0 1.5px #3a3a3e, inset 0 0 0 4px #1a1a1c, 0 40px 80px -24px rgba(0, 0, 0, .55), 0 14px 30px -14px rgba(0, 0, 0, .4); }
.ph-in { position: relative; border-radius: calc(var(--u) * 47); overflow: hidden; background: #fff; }
.ph.dark .ph-in { background: #000; }
.ph-status { position: absolute; z-index: 5; inset-inline: 0; top: 0; height: calc(var(--u) * 54); display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 6) calc(var(--u) * 30) 0 calc(var(--u) * 44); color: #000; pointer-events: none; }
.ph.dark .ph-status, .ph .ph-status.on-dark { color: #fff; }
.ph-time { font: 600 calc(var(--u) * 17)/1 var(--sf); letter-spacing: calc(var(--u) * -.2); }
.ph-isl { position: absolute; left: 50%; top: calc(var(--u) * 11); width: calc(var(--u) * 124); height: calc(var(--u) * 36); margin-left: calc(var(--u) * -62); border-radius: calc(var(--u) * 20); background: #000; }
.ph-sys { display: flex; gap: calc(var(--u) * 6); align-items: center; }
.ph-sys svg { height: calc(var(--u) * 12); width: auto; fill: currentColor; }
.ph-sys svg:last-child { height: calc(var(--u) * 13); }
.ph-sys .bt-o { fill: none; stroke: currentColor; opacity: .4; }
.ph-sys .bt-t { opacity: .4; }
.ph-home { position: absolute; z-index: 5; left: 50%; bottom: calc(var(--u) * 8); width: calc(var(--u) * 134); height: calc(var(--u) * 5); margin-left: calc(var(--u) * -67); border-radius: calc(var(--u) * 3); background: #000; }
.ph.dark .ph-home, .ph-home.on-dark { background: #fff; }

/* a floating panel */
.dev.pn { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 30px 70px -18px rgba(0, 0, 0, .45), 0 10px 24px -10px rgba(0, 0, 0, .25); }
.dev.pn.dark { background: #15181d; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 70px -18px rgba(0, 0, 0, .7); }

/* ── the screen ── */
.scr {
  --sf: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg: #f6f7f9; --sur: #ffffff; --sur2: #f9fafb; --line: #e6e8ec; --line2: #eef0f3; --tx: #0e1116; --tx2: #4a5260; --tx3: #8a919c;
  --acc: #0f8f72; --acc2: #0b7a61; --acc-soft: #e3f4ef; --acc-tx: #0b6b55; --ink: #0e1116;
  --s1: #0f8f72; --s2: #5b5bd6; --s3: #e3a008; --s4: #e0567b; --s5: #2b9be0; --s6: #9aa3ad;
  --ok: #16a34a; --ok-soft: #e6f6ec; --warn: #d97706; --warn-soft: #fdf3e2; --bad: #dc2626; --bad-soft: #fdecec; --info: #2563eb; --info-soft: #e8effd;
  box-sizing: border-box; position: relative; width: 100%; overflow: hidden; background: var(--bg); color: var(--tx); font: 400 calc(var(--u) * 14)/1.45 var(--sf);
  -webkit-font-smoothing: antialiased; text-align: start; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.scr.dark, .dark > .vp > .scr:not(.light), .dark .ph-in > .vp > .scr:not(.light) {
  --bg: #0b0d10; --sur: #13161b; --sur2: #171a20; --line: #23272e; --line2: #1c2026; --tx: #e8ebf0; --tx2: #a4abb6; --tx3: #6b7380;
  --acc: #2bc49c; --acc2: #22a886; --acc-soft: rgba(43, 196, 156, .14); --acc-tx: #5fd9b6; --ink: #f2f4f7;
  --s1: #2bc49c; --s2: #8b8bf0; --s3: #f2b632; --s4: #f07597; --s5: #4fb3f0; --s6: #59616b;
  --ok: #34c06b; --ok-soft: rgba(52, 192, 107, .14); --warn: #f0a63a; --warn-soft: rgba(240, 166, 58, .14); --bad: #f0605d; --bad-soft: rgba(240, 96, 93, .15); --info: #6b9bf5; --info-soft: rgba(107, 155, 245, .15);
}
[lang="ar"] .scr, .scr [lang="ar"] { --sf: "Noto Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif; }
.scr *, .scr *::before, .scr *::after { box-sizing: border-box; }
.scr p, .scr h1, .scr h2, .scr h3, .scr h4, .scr ul, .scr ol, .scr figure { margin: 0; padding: 0; }
.scr ul, .scr ol { list-style: none; }
.scr .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.scr .ic.f { fill: currentColor; stroke: none; }
[dir="rtl"] .scr .ic.dir { transform: scaleX(-1); }
.scr .ltr { direction: ltr; unicode-bidi: isolate; }
.scr .num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* type */
.scr .h1 { font-size: calc(var(--u) * 24); font-weight: 700; letter-spacing: calc(var(--u) * -.4); line-height: 1.2; }
.scr .h2 { font-size: calc(var(--u) * 18); font-weight: 650; letter-spacing: calc(var(--u) * -.2); line-height: 1.25; }
.scr .h3 { font-size: calc(var(--u) * 15); font-weight: 650; line-height: 1.3; }
.scr .h4 { font-size: calc(var(--u) * 13); font-weight: 650; line-height: 1.3; }
.scr .sm { font-size: calc(var(--u) * 12.5); } .scr .xs { font-size: calc(var(--u) * 11.5); } .scr .xxs { font-size: calc(var(--u) * 10.5); }
.scr .mut { color: var(--tx2); } .scr .mut2 { color: var(--tx3); }
.scr .b { font-weight: 650; } .scr .sb { font-weight: 600; } .scr .md { font-weight: 500; }
.scr .cap { font-size: calc(var(--u) * 11); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--tx3); }
[lang="ar"] .scr .cap { letter-spacing: 0; text-transform: none; font-size: calc(var(--u) * 11.5); }
.scr .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.scr .up { color: var(--ok); } .scr .dn { color: var(--bad); } .scr .acc { color: var(--acc-tx); }

/* layout helpers */
.scr .row { display: flex; align-items: center; gap: calc(var(--u) * 8); min-width: 0; }
.scr .col { display: flex; flex-direction: column; gap: calc(var(--u) * 8); min-width: 0; }
.scr .sp { flex: 1 1 auto; min-width: 0; }
.scr .g4 { gap: calc(var(--u) * 4); } .scr .g6 { gap: calc(var(--u) * 6); } .scr .g10 { gap: calc(var(--u) * 10); } .scr .g12 { gap: calc(var(--u) * 12); } .scr .g16 { gap: calc(var(--u) * 16); } .scr .g20 { gap: calc(var(--u) * 20); } .scr .g24 { gap: calc(var(--u) * 24); }
.scr .hr { height: 1px; background: var(--line); border: 0; margin: 0; }

/* an app: sidebar + main */
.scr .app { display: grid; grid-template-columns: calc(var(--u) * 232) minmax(0, 1fr); height: 100%; }
.scr .side { background: var(--sur); border-inline-end: 1px solid var(--line); padding: calc(var(--u) * 14) calc(var(--u) * 12); display: flex; flex-direction: column; gap: calc(var(--u) * 2); min-width: 0; }
.scr .side .brand { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 4) calc(var(--u) * 8) calc(var(--u) * 16); font-weight: 700; font-size: calc(var(--u) * 14.5); letter-spacing: calc(var(--u) * -.2); }
.scr .side .grp { margin: calc(var(--u) * 14) calc(var(--u) * 8) calc(var(--u) * 6); }
.scr .nv { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 8); color: var(--tx2); font-size: calc(var(--u) * 13.5); font-weight: 500; white-space: nowrap; }
.scr .nv .ic { width: calc(var(--u) * 17); height: calc(var(--u) * 17); color: var(--tx3); }
.scr .nv.on { background: var(--acc-soft); color: var(--acc-tx); font-weight: 600; }
.scr .nv.on .ic { color: var(--acc-tx); }
.scr .nv .n { margin-inline-start: auto; font-size: calc(var(--u) * 11.5); color: var(--tx3); font-weight: 600; }
.scr .nv.on .n { color: var(--acc-tx); }
.scr .main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.scr .topbar { height: calc(var(--u) * 60); flex: 0 0 auto; display: flex; align-items: center; gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 24); background: var(--sur); border-bottom: 1px solid var(--line); }
.scr .content { flex: 1 1 auto; min-height: 0; padding: calc(var(--u) * 24); overflow: hidden; display: flex; flex-direction: column; gap: calc(var(--u) * 16); }
.scr .pagehead { display: flex; align-items: flex-end; gap: calc(var(--u) * 12); }

/* the « Votre Groupe » monogram */
.scr .vg { display: inline-flex; width: calc(var(--u) * 28); height: calc(var(--u) * 28); flex: 0 0 auto; }
.scr .vg svg { width: 100%; height: 100%; }
.scr .vg rect { fill: var(--acc); }
.scr .vg path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* surfaces */
.scr .card { background: var(--sur); border: 1px solid var(--line); border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 16); min-width: 0; }
.scr .card.flat { box-shadow: none; }
.scr .card.lift { 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 .card-h { display: flex; align-items: center; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 12); }
.scr .card-h .h4 { flex: 1 1 auto; }
.scr .kpi .lbl { font-size: calc(var(--u) * 12.5); color: var(--tx2); font-weight: 500; }
.scr .kpi .val { font-size: calc(var(--u) * 26); font-weight: 700; letter-spacing: calc(var(--u) * -.6); line-height: 1.15; margin-top: calc(var(--u) * 6); }
.scr .kpi .dl { font-size: calc(var(--u) * 12); font-weight: 600; display: inline-flex; align-items: center; gap: calc(var(--u) * 3); }
.scr .kpi .dl .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); stroke-width: 2.2; }

/* inputs and buttons */
.scr .inp { height: calc(var(--u) * 36); display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 12); border: 1px solid var(--line); border-radius: calc(var(--u) * 9); background: var(--sur); color: var(--tx3); font-size: calc(var(--u) * 13); min-width: 0; }
.scr .inp .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.scr .inp .k { margin-inline-start: auto; font-size: calc(var(--u) * 11); padding: calc(var(--u) * 2) calc(var(--u) * 6); border-radius: calc(var(--u) * 5); border: 1px solid var(--line); color: var(--tx3); }
.scr .btn { height: calc(var(--u) * 34); display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6); padding: 0 calc(var(--u) * 14); border-radius: calc(var(--u) * 9); font-size: calc(var(--u) * 13); font-weight: 600; white-space: nowrap; border: 1px solid var(--line); background: var(--sur); color: var(--tx); }
.scr .btn .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.scr .btn.pri { background: var(--acc); border-color: var(--acc); color: #fff; }
.scr .btn.ink { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.scr .btn.ghost { border-color: transparent; background: transparent; color: var(--tx2); }
.scr .btn.sm { height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 10); font-size: calc(var(--u) * 12); border-radius: calc(var(--u) * 7); }
.scr .btn.lg { height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 20); font-size: calc(var(--u) * 15); border-radius: calc(var(--u) * 11); }
.scr .icb { width: calc(var(--u) * 34); height: calc(var(--u) * 34); display: inline-flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 9); color: var(--tx2); border: 1px solid var(--line); background: var(--sur); position: relative; }
.scr .icb .ic { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.scr .icb .pip { position: absolute; top: calc(var(--u) * 6); inset-inline-end: calc(var(--u) * 7); width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 calc(var(--u) * 2) var(--sur); }

/* tabs, segmented control, chips */
.scr .tabs { display: flex; gap: calc(var(--u) * 22); border-bottom: 1px solid var(--line); }
.scr .tab { padding: calc(var(--u) * 10) 0 calc(var(--u) * 11); font-size: calc(var(--u) * 13.5); font-weight: 500; color: var(--tx2); white-space: nowrap; position: relative; }
.scr .tab.on { color: var(--tx); font-weight: 600; }
.scr .tab.on::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: calc(var(--u) * 2); background: var(--acc); border-radius: calc(var(--u) * 2); }
.scr .tab .n { font-size: calc(var(--u) * 11); color: var(--tx3); margin-inline-start: calc(var(--u) * 5); }
.scr .seg { display: inline-flex; padding: calc(var(--u) * 3); gap: calc(var(--u) * 2); border-radius: calc(var(--u) * 9); background: var(--line2); }
.scr .seg span { height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 11); display: inline-flex; align-items: center; gap: calc(var(--u) * 6); border-radius: calc(var(--u) * 7); font-size: calc(var(--u) * 12.5); font-weight: 500; color: var(--tx2); white-space: nowrap; }
.scr .seg .on { background: var(--sur); color: var(--tx); font-weight: 600; box-shadow: 0 1px calc(var(--u) * 2) rgba(16, 24, 40, .1); }
.scr .chip { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 8); border: 1px solid var(--line); background: var(--sur); font-size: calc(var(--u) * 12.5); font-weight: 500; color: var(--tx2); white-space: nowrap; }
.scr .chip .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }

/* badges, dots, avatars */
.scr .bd { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 6); font-size: calc(var(--u) * 11.5); font-weight: 600; white-space: nowrap; background: var(--line2); color: var(--tx2); }
.scr .bd .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); stroke-width: 2.2; }
.scr .bd.ok { background: var(--ok-soft); color: var(--ok); } .scr .bd.warn { background: var(--warn-soft); color: var(--warn); }
.scr .bd.bad { background: var(--bad-soft); color: var(--bad); } .scr .bd.info { background: var(--info-soft); color: var(--info); }
.scr .bd.accent { background: var(--acc-soft); color: var(--acc-tx); } .scr .bd.solid { background: var(--ink); color: var(--bg); }
.scr .dot { display: inline-block; width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; background: var(--tx3); flex: 0 0 auto; }
.scr .dot.ok { background: var(--ok); } .scr .dot.warn { background: var(--warn); } .scr .dot.bad { background: var(--bad); } .scr .dot.info { background: var(--info); } .scr .dot.accent { background: var(--acc); }
.scr .av { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 50%; flex: 0 0 auto; font-size: calc(var(--u) * 11); font-weight: 700; color: #fff; letter-spacing: 0; }
.scr .av.lg { width: calc(var(--u) * 40); height: calc(var(--u) * 40); font-size: calc(var(--u) * 14); } .scr .av.sm { width: calc(var(--u) * 22); height: calc(var(--u) * 22); font-size: calc(var(--u) * 9.5); }
.scr .av.h0 { background: #0f8f72; } .scr .av.h1 { background: #5b5bd6; } .scr .av.h2 { background: #d4692a; } .scr .av.h3 { background: #c2417a; }
.scr .av.h4 { background: #2b7fc0; } .scr .av.h5 { background: #7a5a3a; } .scr .av.h6 { background: #3f8f3a; } .scr .av.h7 { background: #6b4fa8; }
.scr .avs { display: inline-flex; }
.scr .avs .av { box-shadow: 0 0 0 calc(var(--u) * 2) var(--sur); }
.scr .avs .av + .av { margin-inline-start: calc(var(--u) * -8); }

/* tables: a grid per row (the screen sets grid-template-columns on .tr) */
.scr .tbl { display: flex; flex-direction: column; min-width: 0; }
.scr .tr { display: grid; align-items: center; gap: calc(var(--u) * 12); min-height: calc(var(--u) * 46); padding: 0 calc(var(--u) * 12); border-bottom: 1px solid var(--line2); font-size: calc(var(--u) * 13); }
.scr .tr > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr .tr.th { min-height: calc(var(--u) * 36); font-size: calc(var(--u) * 11.5); font-weight: 600; color: var(--tx3); background: var(--sur2); border-bottom: 1px solid var(--line); }
[lang="ar"] .scr .tr.th { font-size: calc(var(--u) * 12); }
.scr .tr.sel { background: var(--acc-soft); }
.scr .tr .end, .scr .end { text-align: end; justify-self: end; }

/* progress, toggle */
.scr .prog { display: block; height: calc(var(--u) * 6); border-radius: calc(var(--u) * 3); background: var(--line2); overflow: hidden; }
.scr .prog i { display: block; height: 100%; border-radius: calc(var(--u) * 3); background: var(--s1); }
.scr .prog i.s2 { background: var(--s2); } .scr .prog i.s3 { background: var(--s3); } .scr .prog i.s4 { background: var(--s4); } .scr .prog i.s5 { background: var(--s5); }
.scr .prog i.ok { background: var(--ok); } .scr .prog i.warn { background: var(--warn); } .scr .prog i.bad { background: var(--bad); }
.scr .tog { display: inline-block; width: calc(var(--u) * 34); height: calc(var(--u) * 20); border-radius: calc(var(--u) * 10); background: var(--line); position: relative; flex: 0 0 auto; }
.scr .tog::after { content: ""; position: absolute; top: calc(var(--u) * 2); inset-inline-start: calc(var(--u) * 2); width: calc(var(--u) * 16); height: calc(var(--u) * 16); border-radius: 50%; background: #fff; box-shadow: 0 1px calc(var(--u) * 2) rgba(0, 0, 0, .2); }
.scr .tog.on { background: var(--acc); }
.scr .tog.on::after { inset-inline-start: calc(var(--u) * 16); }
.scr .ck { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 18); height: calc(var(--u) * 18); border-radius: calc(var(--u) * 5); border: calc(var(--u) * 1.5) solid var(--line); background: var(--sur); flex: 0 0 auto; }
.scr .ck.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.scr .ck .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); stroke-width: 3; }

/* charts (kit.js area / bars / donut / spark): series tones s1…s6 */
.scr .chart { display: block; width: 100%; height: 100%; overflow: visible; }
.scr .chart .gl { stroke: var(--line2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.scr .chart .ln { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.scr .chart.spark .ln { stroke-width: 1.75; }
.scr .chart .ln.s1 { stroke: var(--s1); } .scr .chart .ln.s2 { stroke: var(--s2); } .scr .chart .ln.s3 { stroke: var(--s3); } .scr .chart .ln.s4 { stroke: var(--s4); } .scr .chart .ln.s5 { stroke: var(--s5); } .scr .chart .ln.s6 { stroke: var(--s6); }
.scr .chart .st0 { stop-opacity: .26; } .scr .chart .st1 { stop-opacity: 0; }
.scr .chart .s1.st0, .scr .chart .s1.st1 { stop-color: var(--s1); } .scr .chart .s2.st0, .scr .chart .s2.st1 { stop-color: var(--s2); }
.scr .chart .s3.st0, .scr .chart .s3.st1 { stop-color: var(--s3); } .scr .chart .s4.st0, .scr .chart .s4.st1 { stop-color: var(--s4); }
.scr .chart .s5.st0, .scr .chart .s5.st1 { stop-color: var(--s5); } .scr .chart .s6.st0, .scr .chart .s6.st1 { stop-color: var(--s6); }
.scr .chart rect.s1 { fill: var(--s1); } .scr .chart rect.s2 { fill: var(--s2); } .scr .chart rect.s3 { fill: var(--s3); } .scr .chart rect.s4 { fill: var(--s4); } .scr .chart rect.s5 { fill: var(--s5); } .scr .chart rect.s6 { fill: var(--s6); }
.scr .chart rect.mute { fill: var(--line); }
.scr .chart .trk { stroke: var(--line2); }
.scr .chart .seg.s1 { stroke: var(--s1); } .scr .chart .seg.s2 { stroke: var(--s2); } .scr .chart .seg.s3 { stroke: var(--s3); } .scr .chart .seg.s4 { stroke: var(--s4); } .scr .chart .seg.s5 { stroke: var(--s5); } .scr .chart .seg.s6 { stroke: var(--s6); }
.scr .lg { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 12); color: var(--tx2); white-space: nowrap; }
.scr .lg i { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: calc(var(--u) * 2); background: var(--s1); }
.scr .lg i.s2 { background: var(--s2); } .scr .lg i.s3 { background: var(--s3); } .scr .lg i.s4 { background: var(--s4); } .scr .lg i.s5 { background: var(--s5); } .scr .lg i.s6 { background: var(--s6); }
.scr .axis { display: flex; justify-content: space-between; font-size: calc(var(--u) * 11); color: var(--tx3); direction: ltr; }

/* a typing caret and a pointer */
.scr .caret { display: inline-block; width: calc(var(--u) * 2); height: 1.1em; margin-inline-start: calc(var(--u) * 2); vertical-align: text-bottom; background: var(--acc); animation: scr-blink 1s steps(1) infinite; }
.scr .ptr { position: absolute; z-index: 20; width: calc(var(--u) * 22); height: calc(var(--u) * 22); pointer-events: none; filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(0, 0, 0, .35)); }
.scr .ptr svg { width: 100%; height: 100%; fill: #111; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
@keyframes scr-blink { 50% { opacity: 0; } }

/* ── motion: the page's script adds .in to a frame (.dev) when it comes into view, and .js to <html> from the start.
   Without the script (or with reduced motion) everything is shown as it ends. A screen animates with these classes, its own
   keyframes keyed off .in, and delays .d1…d80 (0.1 s steps). ── */
.js .dev:not(.in) .a-up, .js .dev:not(.in) .a-fade, .js .dev:not(.in) .a-pop, .js .dev:not(.in) .a-type { opacity: 0; }
.js .dev:not(.in) .a-gx { transform: scaleX(0); }
.js .dev:not(.in) .a-gy, .js .dev:not(.in) .chart.bars.a-bars rect { transform: scaleY(0); }
.js .dev:not(.in) .a-draw .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .dev:not(.in) .a-draw .ar { opacity: 0; }
.in .a-up { animation: scr-up .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
.in .a-fade { animation: scr-fade .6s ease var(--d, 0s) both; }
.in .a-pop { animation: scr-pop .5s cubic-bezier(.2, .9, .3, 1.2) var(--d, 0s) both; }
.in .a-gx { transform-origin: 0 50%; animation: scr-gx .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
[dir="rtl"] .in .a-gx { transform-origin: 100% 50%; }
.in .a-gy { transform-origin: 50% 100%; animation: scr-gy .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
.in .chart.bars.a-bars rect { transform-box: fill-box; transform-origin: 50% 100%; animation: scr-gy .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
.in .chart.bars.a-bars rect:nth-child(2n) { animation-delay: calc(var(--d, 0s) + .06s); } .in .chart.bars.a-bars rect:nth-child(3n) { animation-delay: calc(var(--d, 0s) + .12s); }
.in .a-draw .ln { stroke-dasharray: 1; animation: scr-draw 1.6s cubic-bezier(.4, 0, .2, 1) var(--d, 0s) both; }
.in .a-draw .ar { animation: scr-fade 1s ease calc(var(--d, 0s) + .6s) both; }
.in .a-type { animation: scr-type 1.2s steps(28) var(--d, 0s) both; }
[dir="rtl"] .in .a-type { animation-name: scr-type-rtl; }
@keyframes scr-up { from { opacity: 0; transform: translateY(calc(var(--u) * 14)); } to { opacity: 1; transform: none; } }
@keyframes scr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes scr-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes scr-gx { from { transform: scaleX(0); } to { transform: none; } }
@keyframes scr-gy { from { transform: scaleY(0); } to { transform: none; } }
@keyframes scr-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes scr-type { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes scr-type-rtl { from { opacity: 1; clip-path: inset(0 0 0 100%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .scr *, .scr *::before, .scr *::after { animation: none !important; } .js .dev .scr * { opacity: 1 !important; transform: none !important; clip-path: none !important; stroke-dashoffset: 0 !important; } }

/* ── generated helpers ── */
.pw-0{width:0%}.ph-0{height:0%}.pw-1{width:1%}.ph-1{height:1%}.pw-2{width:2%}.ph-2{height:2%}.pw-3{width:3%}.ph-3{height:3%}.pw-4{width:4%}.ph-4{height:4%}.pw-5{width:5%}.ph-5{height:5%}.pw-6{width:6%}.ph-6{height:6%}.pw-7{width:7%}.ph-7{height:7%}.pw-8{width:8%}.ph-8{height:8%}.pw-9{width:9%}.ph-9{height:9%}.pw-10{width:10%}.ph-10{height:10%}.pw-11{width:11%}.ph-11{height:11%}.pw-12{width:12%}.ph-12{height:12%}.pw-13{width:13%}.ph-13{height:13%}.pw-14{width:14%}.ph-14{height:14%}.pw-15{width:15%}.ph-15{height:15%}.pw-16{width:16%}.ph-16{height:16%}.pw-17{width:17%}.ph-17{height:17%}.pw-18{width:18%}.ph-18{height:18%}.pw-19{width:19%}.ph-19{height:19%}.pw-20{width:20%}.ph-20{height:20%}.pw-21{width:21%}.ph-21{height:21%}.pw-22{width:22%}.ph-22{height:22%}.pw-23{width:23%}.ph-23{height:23%}.pw-24{width:24%}.ph-24{height:24%}.pw-25{width:25%}.ph-25{height:25%}.pw-26{width:26%}.ph-26{height:26%}.pw-27{width:27%}.ph-27{height:27%}.pw-28{width:28%}.ph-28{height:28%}.pw-29{width:29%}.ph-29{height:29%}.pw-30{width:30%}.ph-30{height:30%}.pw-31{width:31%}.ph-31{height:31%}.pw-32{width:32%}.ph-32{height:32%}.pw-33{width:33%}.ph-33{height:33%}.pw-34{width:34%}.ph-34{height:34%}.pw-35{width:35%}.ph-35{height:35%}.pw-36{width:36%}.ph-36{height:36%}.pw-37{width:37%}.ph-37{height:37%}.pw-38{width:38%}.ph-38{height:38%}.pw-39{width:39%}.ph-39{height:39%}.pw-40{width:40%}.ph-40{height:40%}.pw-41{width:41%}.ph-41{height:41%}.pw-42{width:42%}.ph-42{height:42%}.pw-43{width:43%}.ph-43{height:43%}.pw-44{width:44%}.ph-44{height:44%}.pw-45{width:45%}.ph-45{height:45%}.pw-46{width:46%}.ph-46{height:46%}.pw-47{width:47%}.ph-47{height:47%}.pw-48{width:48%}.ph-48{height:48%}.pw-49{width:49%}.ph-49{height:49%}.pw-50{width:50%}.ph-50{height:50%}.pw-51{width:51%}.ph-51{height:51%}.pw-52{width:52%}.ph-52{height:52%}.pw-53{width:53%}.ph-53{height:53%}.pw-54{width:54%}.ph-54{height:54%}.pw-55{width:55%}.ph-55{height:55%}.pw-56{width:56%}.ph-56{height:56%}.pw-57{width:57%}.ph-57{height:57%}.pw-58{width:58%}.ph-58{height:58%}.pw-59{width:59%}.ph-59{height:59%}.pw-60{width:60%}.ph-60{height:60%}.pw-61{width:61%}.ph-61{height:61%}.pw-62{width:62%}.ph-62{height:62%}.pw-63{width:63%}.ph-63{height:63%}.pw-64{width:64%}.ph-64{height:64%}.pw-65{width:65%}.ph-65{height:65%}.pw-66{width:66%}.ph-66{height:66%}.pw-67{width:67%}.ph-67{height:67%}.pw-68{width:68%}.ph-68{height:68%}.pw-69{width:69%}.ph-69{height:69%}.pw-70{width:70%}.ph-70{height:70%}.pw-71{width:71%}.ph-71{height:71%}.pw-72{width:72%}.ph-72{height:72%}.pw-73{width:73%}.ph-73{height:73%}.pw-74{width:74%}.ph-74{height:74%}.pw-75{width:75%}.ph-75{height:75%}.pw-76{width:76%}.ph-76{height:76%}.pw-77{width:77%}.ph-77{height:77%}.pw-78{width:78%}.ph-78{height:78%}.pw-79{width:79%}.ph-79{height:79%}.pw-80{width:80%}.ph-80{height:80%}.pw-81{width:81%}.ph-81{height:81%}.pw-82{width:82%}.ph-82{height:82%}.pw-83{width:83%}.ph-83{height:83%}.pw-84{width:84%}.ph-84{height:84%}.pw-85{width:85%}.ph-85{height:85%}.pw-86{width:86%}.ph-86{height:86%}.pw-87{width:87%}.ph-87{height:87%}.pw-88{width:88%}.ph-88{height:88%}.pw-89{width:89%}.ph-89{height:89%}.pw-90{width:90%}.ph-90{height:90%}.pw-91{width:91%}.ph-91{height:91%}.pw-92{width:92%}.ph-92{height:92%}.pw-93{width:93%}.ph-93{height:93%}.pw-94{width:94%}.ph-94{height:94%}.pw-95{width:95%}.ph-95{height:95%}.pw-96{width:96%}.ph-96{height:96%}.pw-97{width:97%}.ph-97{height:97%}.pw-98{width:98%}.ph-98{height:98%}.pw-99{width:99%}.ph-99{height:99%}.pw-100{width:100%}.ph-100{height:100%}
.d1{--d:0.1s}.d2{--d:0.2s}.d3{--d:0.3s}.d4{--d:0.4s}.d5{--d:0.5s}.d6{--d:0.6s}.d7{--d:0.7s}.d8{--d:0.8s}.d9{--d:0.9s}.d10{--d:1.0s}.d11{--d:1.1s}.d12{--d:1.2s}.d13{--d:1.3s}.d14{--d:1.4s}.d15{--d:1.5s}.d16{--d:1.6s}.d17{--d:1.7s}.d18{--d:1.8s}.d19{--d:1.9s}.d20{--d:2.0s}.d21{--d:2.1s}.d22{--d:2.2s}.d23{--d:2.3s}.d24{--d:2.4s}.d25{--d:2.5s}.d26{--d:2.6s}.d27{--d:2.7s}.d28{--d:2.8s}.d29{--d:2.9s}.d30{--d:3.0s}.d31{--d:3.1s}.d32{--d:3.2s}.d33{--d:3.3s}.d34{--d:3.4s}.d35{--d:3.5s}.d36{--d:3.6s}.d37{--d:3.7s}.d38{--d:3.8s}.d39{--d:3.9s}.d40{--d:4.0s}.d41{--d:4.1s}.d42{--d:4.2s}.d43{--d:4.3s}.d44{--d:4.4s}.d45{--d:4.5s}.d46{--d:4.6s}.d47{--d:4.7s}.d48{--d:4.8s}.d49{--d:4.9s}.d50{--d:5.0s}.d51{--d:5.1s}.d52{--d:5.2s}.d53{--d:5.3s}.d54{--d:5.4s}.d55{--d:5.5s}.d56{--d:5.6s}.d57{--d:5.7s}.d58{--d:5.8s}.d59{--d:5.9s}.d60{--d:6.0s}.d61{--d:6.1s}.d62{--d:6.2s}.d63{--d:6.3s}.d64{--d:6.4s}.d65{--d:6.5s}.d66{--d:6.6s}.d67{--d:6.7s}.d68{--d:6.8s}.d69{--d:6.9s}.d70{--d:7.0s}.d71{--d:7.1s}.d72{--d:7.2s}.d73{--d:7.3s}.d74{--d:7.4s}.d75{--d:7.5s}.d76{--d:7.6s}.d77{--d:7.7s}.d78{--d:7.8s}.d79{--d:7.9s}.d80{--d:8.0s}
/* Generated by scripts/build-screens.mjs from site/pages/screens/src/web.css: do not edit by hand. */
/* The web screens (api/screens/web.js), in DESIGN pixels (scripts/build-screens.mjs): site + twin (the group's corporate website,
   one markup in two languages and directions), cms (a headless CMS), visibility (an SEO & GEO console). Logical properties only;
   :dir() and :lang() so that the twin (its own dir/lang on the screen's root) and the visitor's page are both right. */

/* ── site + twin: the corporate website ── */
.scr.web-site { height: calc(var(--u) * 1000); background: #fff; --ws-ink: #06110f; }
.scr.web-site[lang="ar"] { --sf: "Noto Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif; }
.scr.web-site[lang="en"] { --sf: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.scr.web-site:dir(rtl) .ic.dir { transform: scaleX(-1); }
.scr.web-site:dir(ltr) .ic.dir { transform: none; }
.web-site .ws-dark { position: relative; height: calc(var(--u) * 520); overflow: hidden; color: #fff;
  background: radial-gradient(calc(var(--u) * 560) calc(var(--u) * 440) at 72% 70%, rgba(43, 196, 156, .17), transparent 70%),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px) 0 0 / calc(var(--u) * 160) 100%,
    linear-gradient(180deg, #071613 0%, #07110f 62%, #050b0a 100%); }
.web-site:dir(rtl) .ws-dark { background: radial-gradient(calc(var(--u) * 560) calc(var(--u) * 440) at 28% 70%, rgba(43, 196, 156, .17), transparent 70%),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px) 0 0 / calc(var(--u) * 160) 100%,
    linear-gradient(180deg, #071613 0%, #07110f 62%, #050b0a 100%); }

/* header */
.web-site .ws-top { position: relative; z-index: 3; height: calc(var(--u) * 68); display: flex; align-items: center; gap: calc(var(--u) * 44); padding: 0 calc(var(--u) * 56); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.web-site .ws-logo { display: inline-flex; align-items: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 16.5); font-weight: 700; letter-spacing: calc(var(--u) * -.3); white-space: nowrap; }
.web-site .ws-logo .vg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.web-site .ws-logo .vg rect { fill: #13a383; }
.web-site .ws-nav { display: flex; align-items: center; gap: calc(var(--u) * 28); font-size: calc(var(--u) * 14); font-weight: 500; color: rgba(255, 255, 255, .74); white-space: nowrap; }
.web-site .ws-nav span { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); }
.web-site .ws-nav .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); opacity: .7; }
.web-site .ws-tools { display: flex; align-items: center; gap: calc(var(--u) * 12); }
.web-site .ws-search { width: calc(var(--u) * 36); height: calc(var(--u) * 36); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: rgba(255, 255, 255, .8); }
.web-site .ws-search .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.web-site .ws-lang { display: inline-flex; padding: calc(var(--u) * 3); gap: calc(var(--u) * 2); border-radius: calc(var(--u) * 10); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.web-site .ws-lang span { min-width: calc(var(--u) * 34); height: calc(var(--u) * 26); padding: 0 calc(var(--u) * 8); display: inline-flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 7); font-size: calc(var(--u) * 12); font-weight: 600; letter-spacing: calc(var(--u) * .2); color: rgba(255, 255, 255, .6); }
.web-site .ws-lang span[lang="ar"] { font-size: calc(var(--u) * 14); letter-spacing: 0; }
html[lang="ar"] .web-site .ws-lang span[lang="ar"] { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif; }
.web-site .ws-lang .on { background: #fff; color: #06110f; }
.web-site .ws-contact { height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 18); display: inline-flex; align-items: center; border-radius: calc(var(--u) * 999); background: #fff; color: #06110f; font-size: calc(var(--u) * 13.5); font-weight: 650; white-space: nowrap; }

/* hero */
.web-site .ws-hero { position: relative; z-index: 2; width: calc(var(--u) * 720); padding-block: calc(var(--u) * 36) 0; padding-inline: calc(var(--u) * 56) 0; }
.web-site .ws-pill { display: inline-flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 32); padding-inline: calc(var(--u) * 4) calc(var(--u) * 12); border-radius: calc(var(--u) * 999); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); font-size: calc(var(--u) * 13); font-weight: 500; color: rgba(255, 255, 255, .84); white-space: nowrap; }
.web-site .ws-pill b { height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 10); display: inline-flex; align-items: center; border-radius: calc(var(--u) * 999); background: #2bc49c; color: #03241c; font-size: calc(var(--u) * 11.5); font-weight: 700; }
.web-site .ws-pill .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); opacity: .6; }
.web-site .ws-h1 { margin-top: calc(var(--u) * 20); font-size: calc(var(--u) * 53); line-height: 1.06; font-weight: 650; letter-spacing: calc(var(--u) * -1.9); color: #fff; }
.web-site .ws-grad { background: linear-gradient(90deg, #a6f6de, #2bc49c 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.web-site:dir(rtl) .ws-grad { background-image: linear-gradient(270deg, #a6f6de, #2bc49c 75%); }
.web-site .ws-sub { margin-top: calc(var(--u) * 18); max-width: calc(var(--u) * 620); font-size: calc(var(--u) * 17); line-height: 1.55; color: rgba(255, 255, 255, .66); }
.web-site .ws-ctas { margin-top: calc(var(--u) * 26); display: flex; gap: calc(var(--u) * 12); }
.web-site .ws-btn { height: calc(var(--u) * 48); padding: 0 calc(var(--u) * 24); display: inline-flex; align-items: center; gap: calc(var(--u) * 10); border-radius: calc(var(--u) * 999); font-size: calc(var(--u) * 14.5); font-weight: 650; white-space: nowrap; }
.web-site .ws-btn .ic { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.web-site .ws-btn.pri { background: #fff; color: #06110f; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 28) calc(var(--u) * -10) rgba(43, 196, 156, .55); }
.web-site .ws-btn.sec { color: #fff; border: 1px solid rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .04); }

/* the globe (its own coordinates: never mirrored; it fades towards the text) */
.web-site .ws-globe { position: absolute; z-index: 0; top: 0; inset-inline-end: 0; width: calc(var(--u) * 720); height: calc(var(--u) * 600); overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 26%); mask-image: linear-gradient(90deg, transparent 2%, #000 26%); }
.web-site:dir(rtl) .ws-globe { -webkit-mask-image: linear-gradient(270deg, transparent 2%, #000 26%); mask-image: linear-gradient(270deg, transparent 2%, #000 26%); }
.web-site .ws-grat { fill: none; stroke: rgba(255, 255, 255, .075); stroke-width: 1; vector-effect: non-scaling-stroke; }
.web-site .ws-rim { fill: none; stroke-width: 1.4; }
.web-site .ws-node { fill: #bff7e6; }
.web-site .ws-site { fill: rgba(190, 245, 228, .55); }
.web-site .ws-glow { fill: none; stroke: rgba(43, 196, 156, .16); stroke-width: 5; stroke-linecap: round; }
.web-site .ws-arc { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.web-site .ws-core { fill: #fff; }
.web-site .ws-ring { fill: none; stroke: #7ef2cf; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.web-site .ws-lbl { direction: ltr; fill: rgba(255, 255, 255, .82); font-weight: 600; paint-order: stroke; stroke: #071411; stroke-width: 4; stroke-linejoin: round; }
.web-site .ws-lbl.hq { fill: #fff; font-weight: 700; }
.web-site .ws-lbl.sub { fill: rgba(255, 255, 255, .52); font-weight: 500; }

/* a floating glass card: the share price */
.web-site .ws-glass { position: absolute; z-index: 2; top: calc(var(--u) * 104); inset-inline-end: calc(var(--u) * 56); width: calc(var(--u) * 216); padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 12); border-radius: calc(var(--u) * 14); --s1: #5fe0b9;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 calc(var(--u) * 24) calc(var(--u) * 48) calc(var(--u) * -18) rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(calc(var(--u) * 14)); backdrop-filter: blur(calc(var(--u) * 14)); }
.web-site .ws-gh { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 12); font-weight: 600; color: rgba(255, 255, 255, .82); white-space: nowrap; }
.web-site .ws-live { margin-inline-start: auto; display: inline-flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 11); font-weight: 500; color: #7ee8c9; }
.web-site .ws-live i { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: #2bc49c; box-shadow: 0 0 0 calc(var(--u) * 3) rgba(43, 196, 156, .25); }
.web-site .ws-gv { display: flex; align-items: baseline; gap: calc(var(--u) * 8); margin: calc(var(--u) * 6) 0 calc(var(--u) * 8); white-space: nowrap; }
.web-site .ws-gv .num:first-child { font-size: calc(var(--u) * 22); font-weight: 700; letter-spacing: calc(var(--u) * -.4); }
.web-site .ws-gv .up { font-size: calc(var(--u) * 12.5); font-weight: 650; color: #5fe0b9; }
.web-site .ws-glass .chart { height: calc(var(--u) * 30); }
.web-site .ws-gf { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 11); color: rgba(255, 255, 255, .5); white-space: nowrap; }

/* key figures */
.web-site .ws-figs { position: relative; z-index: 4; margin: calc(var(--u) * -48) calc(var(--u) * 56) 0; display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, .96fr) minmax(0, 1.2fr) minmax(0, 1.16fr); background: #fff; border-radius: calc(var(--u) * 16); border: 1px solid #e7eaed;
  box-shadow: 0 1px calc(var(--u) * 2) rgba(6, 17, 15, .05), 0 calc(var(--u) * 28) calc(var(--u) * 56) calc(var(--u) * -28) rgba(6, 17, 15, .45); }
.web-site .ws-fig { display: flex; align-items: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 22) calc(var(--u) * 24); min-width: 0; border-inline-start: 1px solid #eceef1; }
.web-site .ws-fig:first-child { border-inline-start: 0; }
.web-site .ws-fig-v { font-size: calc(var(--u) * 36); font-weight: 700; letter-spacing: calc(var(--u) * -1.3); line-height: 1; color: #06110f; white-space: nowrap; }
.web-site .ws-fig-t { display: flex; flex-direction: column; gap: calc(var(--u) * 3); min-width: 0; }
.web-site .ws-fig-t b { font-size: calc(var(--u) * 13.5); font-weight: 650; color: #06110f; line-height: 1.25; }
.web-site .ws-fig-t span { font-size: calc(var(--u) * 12); color: #6b7480; line-height: 1.3; }

/* sections */
.web-site .ws-sec { padding: 0 calc(var(--u) * 56); margin-top: calc(var(--u) * 30); }
.web-site .ws-sec-h { display: flex; align-items: flex-end; gap: calc(var(--u) * 16); margin-bottom: calc(var(--u) * 14); }
.web-site .ws-eyebrow { font-size: calc(var(--u) * 11.5); font-weight: 700; letter-spacing: calc(var(--u) * 1.2); text-transform: uppercase; color: #0f8f72; white-space: nowrap; }
.web-site .ws-h2 { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 26); font-weight: 650; letter-spacing: calc(var(--u) * -.7); color: #06110f; line-height: 1.15; }
.web-site .ws-more { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 13.5); font-weight: 600; color: #0b6b55; white-space: nowrap; }
.web-site .ws-more .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.web-site .ws-divs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 16); }
.web-site .ws-div { position: relative; height: calc(var(--u) * 140); padding: calc(var(--u) * 16) calc(var(--u) * 18) calc(var(--u) * 16); display: flex; flex-direction: column; border-radius: calc(var(--u) * 14); border: 1px solid #e6e9ec; background: #fff; overflow: hidden; }
.web-site .ws-div.hov { border-color: #b4e2d5; box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 36) calc(var(--u) * -20) rgba(15, 143, 114, .5); }
.web-site .ws-div-k { position: absolute; top: calc(var(--u) * 16); inset-inline-end: calc(var(--u) * 18); font-size: calc(var(--u) * 12); font-weight: 600; color: #b3bac2; }
.web-site .ws-div-h { display: flex; align-items: center; gap: calc(var(--u) * 12); min-width: 0; }
.web-site .ws-div-ic { width: calc(var(--u) * 34); height: calc(var(--u) * 34); flex: 0 0 auto; border-radius: calc(var(--u) * 10); display: inline-flex; align-items: center; justify-content: center; background: #e3f4ef; color: #0b6b55; }
.web-site .ws-div-ic .ic { width: calc(var(--u) * 19); height: calc(var(--u) * 19); }
.web-site .ws-div.hov .ws-div-ic { background: #0f8f72; color: #fff; }
.web-site .ws-div-n { font-size: calc(var(--u) * 16); font-weight: 700; letter-spacing: calc(var(--u) * -.2); color: #06110f; }
.web-site .ws-div-l { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 12.5); line-height: 1.5; color: #5b6470; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.web-site .ws-div-f { margin-top: auto; display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 11.5); color: #8a929c; font-weight: 500; }
.web-site .ws-div-m { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.web-site .ws-div-f .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); color: #a3abb3; }
.web-site .ws-div.hov .ws-div-f .ic { color: #0f8f72; }
.web-site .ws-div.hov .ws-div-n { color: #0b6b55; }

/* investors + careers */
.web-site .ws-bot { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 392); gap: calc(var(--u) * 16); padding: 0 calc(var(--u) * 56); margin-top: calc(var(--u) * 18); }
.web-site .ws-inv { height: calc(var(--u) * 168); display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 210) calc(var(--u) * 150); gap: calc(var(--u) * 24); padding: calc(var(--u) * 20) calc(var(--u) * 24); border-radius: calc(var(--u) * 16); background: #f5f7f8; border: 1px solid #e9ecef; }
.web-site .ws-inv-a { display: flex; flex-direction: column; min-width: 0; }
.web-site .ws-inv-t { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 19); font-weight: 700; letter-spacing: calc(var(--u) * -.4); color: #06110f; white-space: nowrap; }
.web-site .ws-inv-v { margin-top: calc(var(--u) * 10); display: flex; align-items: center; gap: calc(var(--u) * 10); white-space: nowrap; }
.web-site .ws-inv-v > .num { font-size: calc(var(--u) * 28); font-weight: 700; letter-spacing: calc(var(--u) * -.8); color: #06110f; line-height: 1; }
.web-site .ws-inv-l { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 12); color: #6b7480; }
.web-site .ws-dl { margin-top: auto; display: inline-flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 13); font-weight: 600; color: #0b6b55; white-space: nowrap; }
.web-site .ws-dl .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.web-site .ws-inv-c { display: flex; flex-direction: column; min-width: 0; }
.web-site .ws-inv-ch { height: calc(var(--u) * 84); border-bottom: 1px solid #dde2e6; }
.web-site .ws-inv-ax { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 10.5); color: #8a929c; text-align: center; white-space: nowrap; }
.web-site .ws-inv-cap { margin-top: auto; font-size: calc(var(--u) * 11.5); color: #8a929c; white-space: nowrap; }
.web-site .ws-inv-k { display: flex; flex-direction: column; justify-content: space-between; padding-inline-start: calc(var(--u) * 20); border-inline-start: 1px solid #e1e5e8; min-width: 0; }
.web-site .ws-inv-k div { display: flex; flex-direction: column; min-width: 0; }
.web-site .ws-inv-k b { font-size: calc(var(--u) * 17); font-weight: 700; letter-spacing: calc(var(--u) * -.3); color: #06110f; line-height: 1.25; white-space: nowrap; }
.web-site .ws-inv-k span { font-size: calc(var(--u) * 11.5); color: #6b7480; white-space: nowrap; }
.web-site .ws-car { position: relative; height: calc(var(--u) * 168); padding: calc(var(--u) * 20) calc(var(--u) * 24); border-radius: calc(var(--u) * 16); overflow: hidden; color: #fff; display: flex; flex-direction: column;
  background: radial-gradient(calc(var(--u) * 260) calc(var(--u) * 180) at 100% 0%, rgba(126, 242, 207, .32), transparent 70%), linear-gradient(135deg, #0f8f72, #0a5e4c 60%, #083f34); }
.web-site:dir(rtl) .ws-car { background: radial-gradient(calc(var(--u) * 260) calc(var(--u) * 180) at 0% 0%, rgba(126, 242, 207, .32), transparent 70%), linear-gradient(225deg, #0f8f72, #0a5e4c 60%, #083f34); }
.web-site .ws-car::after { content: ""; position: absolute; width: calc(var(--u) * 200); height: calc(var(--u) * 200); border-radius: 50%; inset-inline-end: calc(var(--u) * -60); bottom: calc(var(--u) * -110); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 0 0 calc(var(--u) * 30) rgba(255, 255, 255, .035), 0 0 0 calc(var(--u) * 60) rgba(255, 255, 255, .025); }
.web-site .ws-car .ws-eyebrow { color: #a8f0da; }
.web-site .ws-car-t { position: relative; z-index: 1; margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 21); font-weight: 700; letter-spacing: calc(var(--u) * -.5); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.web-site .ws-car-c { position: relative; z-index: 1; margin-top: calc(var(--u) * 12); display: flex; gap: calc(var(--u) * 6); }
.web-site .ws-car-c span { height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 8); display: inline-flex; align-items: center; gap: calc(var(--u) * 5); border-radius: calc(var(--u) * 6); background: rgba(255, 255, 255, .13); font-size: calc(var(--u) * 11.5); color: rgba(255, 255, 255, .8); }
.web-site .ws-car-c b { font-weight: 700; color: #fff; }
.web-site .ws-car-b { position: relative; z-index: 1; margin-top: auto; display: inline-flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 13.5); font-weight: 650; }
.web-site .ws-car-b .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }

/* Arabic: no letter-spacing, taller lines */
.web-site:lang(ar) :is(.ws-h1, .ws-h2, .ws-logo, .ws-fig-v, .ws-inv-t, .ws-inv-v > .num, .ws-car-t, .ws-div-n, .ws-inv-k b, .ws-gv .num) { letter-spacing: 0; }
.web-site:lang(ar) .ws-h1 { font-size: calc(var(--u) * 44); line-height: 1.3; font-weight: 700; }
.web-site:lang(ar) .ws-sub { line-height: 1.65; }
.web-site:lang(ar) .ws-eyebrow { letter-spacing: 0; text-transform: none; font-size: calc(var(--u) * 12.5); }
.web-site:lang(ar) .ws-div-l { line-height: 1.6; }
.web-site:lang(ar) .ws-car-t { line-height: 1.45; }

/* motion: arcs drawn from the head office, rings on the cities */
.js .dev:not(.in) .web-site .ws-arc { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .dev:not(.in) .web-site .ws-glow { opacity: 0; }
.in .web-site .ws-arc { stroke-dasharray: 1; animation: ws-draw 1.5s cubic-bezier(.45, 0, .2, 1) .8s both; }
.in .web-site .ws-arc.a1 { animation-delay: 1s; } .in .web-site .ws-arc.a2 { animation-delay: 1.2s; } .in .web-site .ws-arc.a3 { animation-delay: 1.4s; }
.in .web-site .ws-arc.a4 { animation-delay: 1.5s; } .in .web-site .ws-arc.a5 { animation-delay: 1.6s; }
.in .web-site .ws-glow { animation: ws-fade 1s ease 2s both; }
.in .web-site .ws-ring { animation: ws-ring 2.2s cubic-bezier(.2, .6, .3, 1) 1.2s 2 both; }
.in .web-site .ws-ring.r1 { animation-delay: 2.2s; } .in .web-site .ws-ring.r2 { animation-delay: 2.4s; } .in .web-site .ws-ring.r3 { animation-delay: 2.6s; }
.in .web-site .ws-ring.r4 { animation-delay: 2.8s; } .in .web-site .ws-ring.r5 { animation-delay: 3s; }
@keyframes ws-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ws-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ws-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }

/* ── cms: the headless CMS ── */
.scr-cms { height: calc(var(--u) * 800); background: var(--bg); --sx: 1; }
.scr-cms:dir(rtl) { --sx: -1; }
.scr-cms .cm-top { height: calc(var(--u) * 52); display: flex; align-items: center; gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 16); background: var(--sur); border-bottom: 1px solid var(--line); }
.scr-cms .cm-brand { display: inline-flex; align-items: center; gap: calc(var(--u) * 9); font-size: calc(var(--u) * 13.5); white-space: nowrap; }
.scr-cms .cm-brand .vg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.scr-cms .cm-prod { padding-inline-start: calc(var(--u) * 10); border-inline-start: 1px solid var(--line); color: var(--tx2); font-weight: 500; }
.scr-cms .cm-crumb { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); margin-inline-start: calc(var(--u) * 22); font-size: calc(var(--u) * 13); color: var(--tx3); white-space: nowrap; }
.scr-cms .cm-crumb .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.scr-cms .cm-crumb b { color: var(--tx); font-weight: 600; }
.scr-cms .cm-saved { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 12.5); color: var(--tx3); white-space: nowrap; }
.scr-cms .cm-saved .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: var(--ok); stroke-width: 2.4; }
.scr-cms .cm-top .avs { margin-inline: calc(var(--u) * 4); }
.scr-cms .cm-top .avs .av + .av { margin-inline-start: calc(var(--u) * -5); }
.scr-cms .cm-top .icb { width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
.scr-cms .cm-body { display: grid; grid-template-columns: calc(var(--u) * 248) minmax(0, 1fr) calc(var(--u) * 330); height: calc(var(--u) * 748); }
.scr-cms .cm-ib { width: calc(var(--u) * 28); height: calc(var(--u) * 28); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 7); color: var(--tx3); }
.scr-cms .cm-ib .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.scr-cms .cm-code { display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--u) * 26); height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 5); 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); flex: 0 0 auto; }
.scr-cms .cm-ver { font-size: calc(var(--u) * 12); color: var(--tx3); white-space: nowrap; }

/* the content tree */
.scr-cms .cm-tree { background: var(--sur); border-inline-end: 1px solid var(--line); padding: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 14); display: flex; flex-direction: column; min-width: 0; }
.scr-cms .cm-tree-h { display: flex; align-items: center; padding: 0 calc(var(--u) * 4) calc(var(--u) * 8); font-size: calc(var(--u) * 13.5); }
.scr-cms .cm-find { height: calc(var(--u) * 32); font-size: calc(var(--u) * 12.5); }
.scr-cms .cm-site { margin: calc(var(--u) * 10) 0 calc(var(--u) * 6); display: flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 7); background: var(--sur2); border: 1px solid var(--line2); font-size: calc(var(--u) * 12); font-weight: 600; color: var(--tx2); }
.scr-cms .cm-site .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: var(--tx3); }
.scr-cms .cm-site .ell { flex: 1 1 auto; }
.scr-cms .cm-site .cm-n { font-weight: 500; }
.scr-cms .cm-nodes { display: flex; flex-direction: column; gap: 1px; }
.scr-cms .cm-node { display: flex; align-items: center; gap: calc(var(--u) * 7); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 7); font-size: calc(var(--u) * 13); color: var(--tx2); white-space: nowrap; min-width: 0; }
.scr-cms .cm-node .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); color: var(--tx3); }
.scr-cms .cm-node .ell { flex: 1 1 auto; }
.scr-cms .cm-node.l1 { padding-inline-start: calc(var(--u) * 30); }
.scr-cms .cm-node .cm-chev { width: calc(var(--u) * 13); height: calc(var(--u) * 13); flex: 0 0 auto; }
.scr-cms .cm-node.sel { background: var(--acc-soft); color: var(--acc-tx); font-weight: 600; }
.scr-cms .cm-node.sel .ic { color: var(--acc-tx); }
.scr-cms .cm-n { font-size: calc(var(--u) * 11); color: var(--tx3); font-weight: 600; }
.scr-cms .cm-node .dot { width: calc(var(--u) * 7); height: calc(var(--u) * 7); }
.scr-cms .cm-grp { margin: calc(var(--u) * 14) calc(var(--u) * 8) calc(var(--u) * 4); }
.scr-cms .cm-leg { margin-top: auto; display: flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 10) calc(var(--u) * 6) 0; border-top: 1px solid var(--line2); font-size: calc(var(--u) * 11); color: var(--tx3); white-space: nowrap; }
.scr-cms .cm-leg .dot { width: calc(var(--u) * 6); height: calc(var(--u) * 6); margin-inline-start: calc(var(--u) * 6); }
.scr-cms .cm-leg .dot:first-child { margin-inline-start: 0; }

/* the editor */
.scr-cms .cm-ed { display: flex; flex-direction: column; min-width: 0; background: var(--sur); }
.scr-cms .cm-bar { height: calc(var(--u) * 46); flex: 0 0 auto; display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 20); border-bottom: 1px solid var(--line); }
.scr-cms .cm-bar .chip { height: calc(var(--u) * 28); font-size: calc(var(--u) * 12); }
.scr-cms .cm-bar .chip .cm-code { min-width: calc(var(--u) * 22); height: calc(var(--u) * 18); font-size: calc(var(--u) * 10); }
.scr-cms .cm-bar .bd .dot { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.scr-cms .cm-doc { flex: 1 1 auto; min-height: 0; padding: calc(var(--u) * 22) calc(var(--u) * 40) 0; display: flex; flex-direction: column; gap: calc(var(--u) * 14); overflow: hidden; }
.scr-cms .cm-title { font-size: calc(var(--u) * 28); font-weight: 700; letter-spacing: calc(var(--u) * -.6); line-height: 1.2; }
.scr-cms .cm-slug { display: flex; align-items: center; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * -8); font-size: calc(var(--u) * 12.5); color: var(--tx3); white-space: nowrap; }
.scr-cms .cm-slug .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.scr-cms .cm-slug b { color: var(--tx2); font-weight: 600; }
.scr-cms .cm-rt { border: 1px solid var(--line); border-radius: calc(var(--u) * 10); }
.scr-cms .cm-tb { height: calc(var(--u) * 40); display: flex; align-items: center; gap: calc(var(--u) * 2); padding: 0 calc(var(--u) * 8); border-bottom: 1px solid var(--line2); background: var(--sur2); border-radius: calc(var(--u) * 10) calc(var(--u) * 10) 0 0; }
.scr-cms .cm-tsel { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 8); font-size: calc(var(--u) * 12.5); font-weight: 500; color: var(--tx2); white-space: nowrap; }
.scr-cms .cm-tsel .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.scr-cms .cm-tsep { width: 1px; height: calc(var(--u) * 18); background: var(--line); margin: 0 calc(var(--u) * 4); flex: 0 0 auto; }
.scr-cms .cm-t { min-width: calc(var(--u) * 28); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 6); display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6); border-radius: calc(var(--u) * 6); font-size: calc(var(--u) * 13); font-weight: 600; color: var(--tx2); white-space: nowrap; }
.scr-cms .cm-t .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.scr-cms .cm-t.b { font-weight: 800; }
.scr-cms .cm-t.i { font-style: italic; font-weight: 500; }
.scr-cms .cm-t.u { text-decoration: underline; font-weight: 500; }
.scr-cms .cm-t.on { background: var(--acc-soft); color: var(--acc-tx); }
.scr-cms .cm-tr { font-size: calc(var(--u) * 12); color: var(--acc-tx); }
.scr-cms .cm-txt { position: relative; padding-block: calc(var(--u) * 14); padding-inline: calc(var(--u) * 16) calc(var(--u) * 56); display: flex; flex-direction: column; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 14); line-height: 1.6; color: var(--tx); }
.scr-cms .cm-cmt { position: absolute; top: calc(var(--u) * 14); inset-inline-end: calc(var(--u) * 12); display: inline-flex; align-items: center; gap: calc(var(--u) * 4); padding-block: calc(var(--u) * 2); padding-inline: calc(var(--u) * 2) calc(var(--u) * 7); border-radius: calc(var(--u) * 999); background: var(--warn-soft); font-size: calc(var(--u) * 11); color: var(--warn); }
.scr-cms .cm-cmt .av.sm { width: calc(var(--u) * 18); height: calc(var(--u) * 18); font-size: calc(var(--u) * 8); }
.scr-cms .cm-blk { border: 1px solid var(--line); border-radius: calc(var(--u) * 10); padding: calc(var(--u) * 10) calc(var(--u) * 14) calc(var(--u) * 14); }
.scr-cms .cm-blk-h { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 12.5); color: var(--tx2); }
.scr-cms .cm-blk-h > .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); color: var(--tx3); }
.scr-cms .cm-blk-h b { color: var(--tx); font-weight: 600; }
.scr-cms .cm-grip { width: calc(var(--u) * 8); height: calc(var(--u) * 14); flex: 0 0 auto; opacity: .75; background: radial-gradient(circle, var(--tx3) calc(var(--u) * 1.1), transparent calc(var(--u) * 1.5)) 0 0 / calc(var(--u) * 4) calc(var(--u) * 4.67); }
.scr-cms .cm-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 10); }
.scr-cms .cm-figs > div { display: flex; flex-direction: column; gap: calc(var(--u) * 2); padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 8); background: var(--sur2); border: 1px solid var(--line2); min-width: 0; }
.scr-cms .cm-figs > div > span { font-size: calc(var(--u) * 11.5); color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-cms .cm-figs b { font-size: calc(var(--u) * 18); font-weight: 700; letter-spacing: calc(var(--u) * -.3); white-space: nowrap; }
.scr-cms .cm-file { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 10) calc(var(--u) * 14); border: 1px solid var(--line); border-radius: calc(var(--u) * 10); }
.scr-cms .cm-pdf { width: calc(var(--u) * 32); height: calc(var(--u) * 38); flex: 0 0 auto; border-radius: calc(var(--u) * 5); background: var(--bad-soft); color: var(--bad); display: inline-flex; align-items: flex-end; justify-content: center; padding-bottom: calc(var(--u) * 5); font-size: calc(var(--u) * 9); font-weight: 800; letter-spacing: calc(var(--u) * .4); box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .18); }
.scr-cms .cm-fn { gap: calc(var(--u) * 2); }
.scr-cms .cm-fn b { font-size: calc(var(--u) * 13); font-weight: 600; }
.scr-cms .cm-fn span { font-size: calc(var(--u) * 11.5); color: var(--tx3); white-space: nowrap; }
.scr-cms .cm-seo { border-top: 1px solid var(--line2); padding-top: calc(var(--u) * 14); }
.scr-cms .cm-seo-h { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 13.5); }
.scr-cms .cm-seo-h > .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); color: var(--tx3); }
.scr-cms .cm-fields { display: grid; grid-template-columns: calc(var(--u) * 250) minmax(0, 1fr); gap: calc(var(--u) * 14); margin-top: calc(var(--u) * 10); }
.scr-cms .cm-fl { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 6); font-size: calc(var(--u) * 12); font-weight: 600; color: var(--tx2); white-space: nowrap; }
.scr-cms .cm-cnt { font-size: calc(var(--u) * 11); font-weight: 600; color: var(--ok); }
.scr-cms .cm-in { min-height: calc(var(--u) * 36); padding: calc(var(--u) * 8) calc(var(--u) * 11); border: 1px solid var(--line); border-radius: calc(var(--u) * 8); font-size: calc(var(--u) * 13); line-height: 1.45; color: var(--tx); background: var(--sur); }
.scr-cms .cm-ta { font-size: calc(var(--u) * 12.5); line-height: 1.5; border-color: var(--acc); box-shadow: 0 0 0 calc(var(--u) * 3) var(--acc-soft); }

/* the right panel: languages, validation circuit */
.scr-cms .cm-side { background: var(--sur); border-inline-start: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.scr-cms .cm-tabs { padding: 0 calc(var(--u) * 18); gap: calc(var(--u) * 20); flex: 0 0 auto; }
.scr-cms .cm-tabs .tab { padding: calc(var(--u) * 13) 0 calc(var(--u) * 12); font-size: calc(var(--u) * 13); }
.scr-cms .cm-sec { padding: calc(var(--u) * 14) calc(var(--u) * 18); border-bottom: 1px solid var(--line2); }
.scr-cms .cm-sec-h { display: flex; align-items: center; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 8); font-size: calc(var(--u) * 13.5); }
.scr-cms .cm-lang { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 8); margin: 0 calc(var(--u) * -8); border-radius: calc(var(--u) * 8); font-size: calc(var(--u) * 13); }
.scr-cms .cm-lang.on { background: var(--sur2); }
.scr-cms .cm-ln { flex: 1 1 auto; font-weight: 500; }
html[lang="ar"] .scr-cms .cm-ln[lang="ar"] { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif; }
.scr-cms .cm-steps { display: flex; flex-direction: column; margin-top: calc(var(--u) * 4); }
.scr-cms .cm-step { position: relative; display: flex; gap: calc(var(--u) * 12); padding-bottom: calc(var(--u) * 16); }
.scr-cms .cm-step::before, .scr-cms .cm-brand-step::after { content: ""; position: absolute; top: calc(var(--u) * 28); bottom: calc(var(--u) * 4); inset-inline-start: calc(var(--u) * 11); width: calc(var(--u) * 2); border-radius: 1px; background: var(--line); }
.scr-cms .cm-step.done::before, .scr-cms .cm-brand-step::after { background: var(--ok); }
.scr-cms .cm-brand-step::after { transform-origin: 50% 0; }
.scr-cms .cm-step.last { padding-bottom: 0; }
.scr-cms .cm-step.last::before { display: none; }
.scr-cms .cm-si { width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--line2); color: var(--tx2); }
.scr-cms .cm-si .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); stroke-width: 2.4; }
.scr-cms .cm-step.done .cm-si { background: var(--ok); color: #fff; }
.scr-cms .cm-si.cm-sw { background: none; }
.scr-cms .cm-si .cm-pend, .scr-cms .cm-si .cm-done { width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.scr-cms .cm-si .cm-pend { background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 calc(var(--u) * 1.5) var(--warn); }
.scr-cms .cm-si .cm-done { background: var(--ok); color: #fff; }
.scr-cms .cm-sx { display: flex; flex-direction: column; gap: calc(var(--u) * 4); min-width: 0; padding-top: calc(var(--u) * 2); }
.scr-cms .cm-sx > b { font-size: calc(var(--u) * 13); font-weight: 600; display: flex; align-items: center; gap: calc(var(--u) * 8); }
.scr-cms .cm-sm { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 12); color: var(--tx2); white-space: nowrap; }
.scr-cms .cm-sm .av.sm { width: calc(var(--u) * 18); height: calc(var(--u) * 18); font-size: calc(var(--u) * 8); }
.scr-cms .cm-sw { display: grid; }
.scr-cms .cm-sw > * { grid-area: 1 / 1; }
.scr-cms .cm-sm.cm-pend { color: var(--warn); }
.scr-cms .cm-sm.cm-done { color: var(--ok); font-weight: 600; }
.scr-cms .cm-mk { display: flex; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 2); }
.scr-cms .cm-mk span { height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 6); display: inline-flex; align-items: center; border-radius: calc(var(--u) * 5); background: var(--info-soft); color: var(--info); font-size: calc(var(--u) * 10.5); font-weight: 700; }
.scr-cms .cm-acts { margin-top: auto; display: flex; gap: calc(var(--u) * 8); padding: calc(var(--u) * 14) calc(var(--u) * 18); border-top: 1px solid var(--line); background: var(--sur2); }
.scr-cms .cm-acts > .btn { flex: 1 1 auto; height: calc(var(--u) * 38); }
.scr-cms .cm-ok { position: relative; display: flex; flex: 1 1 auto; }
.scr-cms .cm-ok .btn { width: 100%; height: calc(var(--u) * 38); }
.scr-cms .cm-ptr { top: calc(var(--u) * 18); inset-inline-start: 56%; }

/* the toast */
.scr-cms .cm-toast { position: absolute; z-index: 15; bottom: calc(var(--u) * 84); inset-inline-end: calc(var(--u) * 18); width: calc(var(--u) * 294); display: flex; align-items: center; gap: calc(var(--u) * 10); padding-block: calc(var(--u) * 11); padding-inline: calc(var(--u) * 12) calc(var(--u) * 9); border-radius: calc(var(--u) * 12);
  background: #111418; color: #fff; font-size: calc(var(--u) * 13); font-weight: 500; white-space: nowrap; box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 40) calc(var(--u) * -12) rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .07); }
.scr-cms .cm-tt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; white-space: normal; }
.scr-cms .cm-tt b { font-size: calc(var(--u) * 13); font-weight: 650; }
.scr-cms .cm-tt span { font-size: calc(var(--u) * 11.5); color: rgba(255, 255, 255, .62); }
.scr-cms .cm-tk { flex: 0 0 auto; width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #22c55e; color: #fff; }
.scr-cms .cm-tk .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); stroke-width: 2.8; }
.scr-cms .cm-undo { flex: 0 0 auto; height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 9); display: inline-flex; align-items: center; border-radius: calc(var(--u) * 8); background: rgba(255, 255, 255, .07); color: #7ee8c9; font-weight: 600; }

/* motion: the pointer approves, the « Marque » step turns green, the toast pops */
.scr-cms .cm-pend { opacity: 0; }
.js .dev:not(.in) .scr-cms .cm-pend { opacity: 1; }
.js .dev:not(.in) .scr-cms .cm-done, .js .dev:not(.in) .scr-cms .cm-ptr { opacity: 0; }
.js .dev:not(.in) .scr-cms .cm-brand-step::after { transform: scaleY(0); }
.in .scr-cms .cm-ptr { animation: cm-ptr 2.2s cubic-bezier(.3, .1, .2, 1) .3s both; }
.in .scr-cms .cm-ok .btn { animation: cm-press .32s ease 1.95s both; }
.in .scr-cms .cm-pend { animation: cm-out .3s ease 2.25s both; }
.in .scr-cms .cm-done { animation: cm-in .45s cubic-bezier(.2, .9, .3, 1.2) 2.3s both; }
.in .scr-cms .cm-brand-step::after { animation: cm-gy .6s cubic-bezier(.2, .7, .2, 1) 2.45s both; }
@keyframes cm-ptr { 0% { opacity: 0; transform: translate(calc(var(--sx) * calc(var(--u) * -400)), calc(var(--u) * -250)); } 14% { opacity: 1; } 72% { transform: none; } 80% { transform: scale(.84); } 90%, 100% { opacity: 1; transform: none; } }
@keyframes cm-press { 50% { transform: scale(.96); filter: brightness(.9); } }
@keyframes cm-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes cm-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes cm-gy { from { transform: scaleY(0); } to { transform: none; } }

/* ── visibility: the SEO & GEO console ── */
.scr-visibility { height: calc(var(--u) * 800); background: var(--bg); }
.scr-visibility .vi-top { height: calc(var(--u) * 56); display: flex; align-items: center; gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 24); background: var(--sur); border-bottom: 1px solid var(--line); }
.scr-visibility .vi-brand { display: inline-flex; align-items: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 15); letter-spacing: calc(var(--u) * -.2); white-space: nowrap; }
.scr-visibility .vi-sep { width: 1px; height: calc(var(--u) * 22); background: var(--line); margin: 0 calc(var(--u) * 4); }
.scr-visibility .vi-site { height: calc(var(--u) * 32); font-weight: 600; color: var(--tx); }
.scr-visibility .vi-site .ic { color: var(--tx3); }
.scr-visibility .vi-top .icb { width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
.scr-visibility .vi-tabs { height: calc(var(--u) * 46); display: flex; align-items: flex-end; gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 24); background: var(--sur); border-bottom: 1px solid var(--line); }
.scr-visibility .vi-tabs .tabs { border-bottom: 0; gap: calc(var(--u) * 24); }
.scr-visibility .vi-tabs .tab { padding: calc(var(--u) * 12) 0 calc(var(--u) * 13); }
.scr-visibility .vi-upd { align-self: center; display: inline-flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 12); color: var(--tx3); white-space: nowrap; }
.scr-visibility .vi-upd .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.scr-visibility .vi-content { padding: calc(var(--u) * 16) calc(var(--u) * 24); display: flex; flex-direction: column; gap: calc(var(--u) * 14); }
.scr-visibility .vi-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 14); }
.scr-visibility .vi-kpi { position: relative; height: calc(var(--u) * 104); padding: calc(var(--u) * 14) calc(var(--u) * 16); display: flex; flex-direction: column; }
.scr-visibility .vi-kl { display: flex; align-items: center; gap: calc(var(--u) * 6); min-width: 0; white-space: nowrap; }
.scr-visibility .vi-kl .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); color: var(--tx3); }
.scr-visibility .vi-kpi .val { margin-top: calc(var(--u) * 4); }
.scr-visibility .vi-kf { margin-top: auto; display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 12); white-space: nowrap; min-width: 0; }
.scr-visibility .vi-prog { flex: 1 1 auto; }
.scr-visibility .vi-sp { position: absolute; inset-inline-end: calc(var(--u) * 16); top: calc(var(--u) * 42); width: calc(var(--u) * 96); height: calc(var(--u) * 30); }
.scr-visibility .vi-good { color: var(--ok); }
.scr-visibility .vi-cwv { margin-top: auto; display: flex; gap: calc(var(--u) * 6); }
.scr-visibility .vi-cwv span { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 7); border-radius: calc(var(--u) * 6); background: var(--ok-soft); color: #15803d; font-size: calc(var(--u) * 11); font-weight: 600; white-space: nowrap; }
.scr-visibility .vi-cwv b { font-weight: 700; color: #166534; opacity: .7; }
.scr-visibility .vi-row { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 286) calc(var(--u) * 268); gap: calc(var(--u) * 14); height: calc(var(--u) * 236); }
.scr-visibility .vi-chart { display: flex; flex-direction: column; padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 10); }
.scr-visibility .vi-chart .card-h { margin-bottom: calc(var(--u) * 6); }
.scr-visibility .vi-chart .seg span { height: calc(var(--u) * 24); font-size: calc(var(--u) * 12); }
.scr-visibility .vi-lgs { display: flex; gap: calc(var(--u) * 18); margin-bottom: calc(var(--u) * 12); }
.scr-visibility .vi-lv { font-weight: 650; color: var(--tx); }
.scr-visibility .vi-plot { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: calc(var(--u) * 34) minmax(0, 1fr); }
.scr-visibility .vi-y { display: flex; flex-direction: column; justify-content: space-between; margin: calc(var(--u) * -7) 0; font-size: calc(var(--u) * 10.5); line-height: calc(var(--u) * 14); color: var(--tx3); }
.scr-visibility .vi-area { position: relative; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line2); }
.scr-visibility .vi-area .vi-svg { position: absolute; inset-block: 0; inset-inline-start: 4.1667%; width: 91.667%; height: 100%; }
.scr-visibility .vi-mark { position: absolute; z-index: 1; inset-block: 0; inset-inline-start: 0; border-inline-end: 1px dashed var(--tx3); }
.scr-visibility .vi-flag { position: absolute; top: calc(var(--u) * 4); inset-inline-start: calc(100% + calc(var(--u) * 6)); height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 7); display: inline-flex; align-items: center; border-radius: calc(var(--u) * 5); background: var(--ink); color: var(--bg); font-size: calc(var(--u) * 10.5); font-weight: 600; white-space: nowrap; }
.scr-visibility .vi-x { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-inline-start: calc(var(--u) * 34); padding-top: calc(var(--u) * 6); font-size: calc(var(--u) * 10.5); color: var(--tx3); text-align: center; white-space: nowrap; }
.scr-visibility .vi-sd, .scr-visibility .vi-tech { display: flex; flex-direction: column; padding: calc(var(--u) * 14) calc(var(--u) * 16); }
.scr-visibility .vi-sd .card-h, .scr-visibility .vi-tech .card-h { margin-bottom: calc(var(--u) * 6); }
.scr-visibility .vi-sdr { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 32); border-bottom: 1px solid var(--line2); font-size: calc(var(--u) * 12.5); white-space: nowrap; }
.scr-visibility .vi-sdr b { font-weight: 600; font-size: calc(var(--u) * 12.5); }
.scr-visibility .vi-ok { width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ok-soft); color: var(--ok); flex: 0 0 auto; }
.scr-visibility .vi-ok.warn { background: var(--warn-soft); color: var(--warn); }
.scr-visibility .vi-ok .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); stroke-width: 2.6; }
.scr-visibility .vi-sdr .warn + b + .sp + span { color: var(--warn); font-weight: 600; }
.scr-visibility .vi-foot { margin-top: auto; display: flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 11.5); color: var(--tx3); white-space: nowrap; }
.scr-visibility .vi-foot .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.scr-visibility .vi-hl { display: flex; gap: calc(var(--u) * 6); margin-bottom: calc(var(--u) * 4); }
.scr-visibility .vi-hl span { flex: 1 1 0; height: calc(var(--u) * 28); display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 4); border-radius: calc(var(--u) * 7); background: var(--ok-soft); color: #15803d; font-size: calc(var(--u) * 11.5); font-weight: 700; }
.scr-visibility .vi-hl .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); stroke-width: 2.6; }
.scr-visibility .vi-tl { display: flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 30); border-bottom: 1px solid var(--line2); font-size: calc(var(--u) * 12.5); white-space: nowrap; }
.scr-visibility .vi-tl:last-child { border-bottom: 0; }
.scr-visibility .vi-tl b { font-weight: 650; }
.scr-visibility .vi-ck { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: var(--ok); stroke-width: 2.4; }
.scr-visibility .vi-q { padding: calc(var(--u) * 12) 0 0; }
.scr-visibility .vi-q .card-h { padding: 0 calc(var(--u) * 16); margin-bottom: calc(var(--u) * 10); }
.scr-visibility .vi-q .card-h .h4 { flex: 0 0 auto; }
.scr-visibility .vi-q .chip, .scr-visibility .vi-q .btn.sm { height: calc(var(--u) * 28); }
.scr-visibility .vi-tr { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 70) calc(var(--u) * 330) calc(var(--u) * 100) calc(var(--u) * 100); gap: calc(var(--u) * 16); min-height: calc(var(--u) * 37); padding: 0 calc(var(--u) * 16); }
.scr-visibility .vi-tr.th { min-height: calc(var(--u) * 32); }
.scr-visibility .vi-qq { display: flex; align-items: center; gap: calc(var(--u) * 8); color: var(--tx); font-weight: 500; }
.scr-visibility .vi-qq .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: var(--tx3); }
.scr-visibility .vi-mk { display: inline-flex; align-items: center; height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 6); border-radius: calc(var(--u) * 5); border: 1px solid var(--line); font-size: calc(var(--u) * 11); font-weight: 700; color: var(--tx2); }
.scr-visibility .vi-es { display: flex; gap: calc(var(--u) * 5); }
.scr-visibility .vi-e { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 7); border-radius: calc(var(--u) * 6); background: var(--sur2); border: 1px solid var(--line); font-size: calc(var(--u) * 11.5); font-weight: 600; color: var(--tx2); }
.scr-visibility .vi-e i { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: var(--s1); }
.scr-visibility .vi-e i.s2 { background: var(--s2); } .scr-visibility .vi-e i.s3 { background: var(--s3); } .scr-visibility .vi-e i.s4 { background: var(--s4); }
.scr-visibility .vi-pos { display: inline-flex; align-items: center; justify-content: flex-end; gap: calc(var(--u) * 8); }
.scr-visibility .vi-pos b { font-weight: 650; }
.scr-visibility .vi-pos .up, .scr-visibility .vi-pos .dn { display: inline-flex; align-items: center; font-size: calc(var(--u) * 11.5); font-weight: 600; }
.scr-visibility .vi-pos .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); stroke-width: 2.4; }
.scr-visibility .vi-tsp { width: calc(var(--u) * 84); height: calc(var(--u) * 22); }

/* Generated by scripts/build-screens.mjs from site/pages/screens/src/logiciels.css: do not edit by hand. */
/* The logiciels screens (api/screens/logiciels.js): crm, pipeline, agent, portal, backoffice, whitelabel. Design pixels (see kit.css).
   Every selector is scoped to its screen; .lo-* are shared by several of these screens. Logical properties only (Arabic is RTL). */

/* ── shared ── */
:is(.scr-crm, .scr-pipeline, .scr-agent, .scr-portal, .scr-backoffice, .scr-whitelabel) .num { white-space: nowrap; }
:is(.scr-crm, .scr-pipeline, .scr-agent, .scr-portal, .scr-backoffice, .scr-whitelabel) .g0 { gap: 0; }
:is(.scr-crm, .scr-pipeline, .scr-agent, .scr-portal, .scr-backoffice, .scr-whitelabel) .g2 { gap: calc(var(--u) * 2); }
:is(.scr-crm, .scr-pipeline, .scr-agent, .scr-portal, .scr-backoffice, .scr-whitelabel) .g8 { gap: calc(var(--u) * 8); }
:is(.scr-crm, .scr-pipeline, .scr-backoffice, .scr-whitelabel, .scr-portal) .lo-side .brand { padding-bottom: calc(var(--u) * 14); min-width: 0; }
:is(.scr-crm, .scr-pipeline, .scr-backoffice, .scr-whitelabel) .lo-tag { height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 6); font-size: calc(var(--u) * 10.5); margin-inline-start: auto; }
:is(.scr-crm, .scr-pipeline, .scr-backoffice, .scr-whitelabel) .lo-sync { padding: calc(var(--u) * 8) calc(var(--u) * 10); }
:is(.scr-crm, .scr-pipeline, .scr-backoffice, .scr-whitelabel) .lo-me { padding: calc(var(--u) * 12) calc(var(--u) * 8) calc(var(--u) * 2); margin-top: calc(var(--u) * 4); border-top: 1px solid var(--line); }
:is(.scr-crm, .scr-pipeline, .scr-backoffice, .scr-whitelabel) .lo-me > .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); color: var(--tx3); }
:is(.scr-crm, .scr-pipeline, .scr-backoffice, .scr-whitelabel) .nv .dot { margin: 0 calc(var(--u) * 4); }
:is(.scr-crm, .scr-pipeline, .scr-backoffice, .scr-whitelabel, .scr-portal) .lo-crumb .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: var(--tx3); }
:is(.scr-crm, .scr-pipeline, .scr-whitelabel) .lo-search { width: calc(var(--u) * 300); }
:is(.scr-crm, .scr-pipeline, .scr-backoffice, .scr-whitelabel) .topbar .av { margin-inline-start: calc(var(--u) * 4); }
:is(.scr-crm, .scr-pipeline, .scr-backoffice, .scr-whitelabel, .scr-portal) .lo-sep { display: inline-block; width: calc(var(--u) * 3); height: calc(var(--u) * 3); border-radius: 50%; background: var(--tx3); flex: 0 0 auto; }
/* the one hovered button of a screen */
:is(.scr-crm, .scr-pipeline, .scr-backoffice, .scr-whitelabel, .scr-portal) .btn.pri.lo-hv { background: var(--acc2); border-color: var(--acc2); box-shadow: 0 0 0 calc(var(--u) * 3) var(--acc-soft); }
:is(.scr-crm, .scr-pipeline, .scr-backoffice, .scr-whitelabel, .scr-portal) .btn.lo-hv:not(.pri) { background: var(--sur2); border-color: #cfd4db; color: var(--tx); }
/* a state change: two elements in one cell (final state = .lo-now) */
:is(.scr-pipeline, .scr-agent) .lo-sw { display: inline-grid; }
:is(.scr-pipeline, .scr-agent) .lo-sw > * { grid-area: 1 / 1; }
:is(.scr-pipeline, .scr-agent) .lo-was { opacity: 0; }
@keyframes lo-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes lo-in { from { opacity: 0; } to { opacity: 1; } }

/* ── 1. crm ── */
.scr-crm { height: calc(var(--u) * 800); }
.scr-crm .cr-head { flex: 0 0 auto; padding: calc(var(--u) * 18) calc(var(--u) * 24) 0; background: var(--sur); border-bottom: 1px solid var(--line); }
.scr-crm .cr-tile { width: calc(var(--u) * 52); height: calc(var(--u) * 52); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 14); color: #fff; font-size: calc(var(--u) * 18); font-weight: 700; letter-spacing: calc(var(--u) * .3); background: linear-gradient(135deg, #1f3b63, #3f6db0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.scr-crm .cr-name { font-size: calc(var(--u) * 22); flex: 0 1 auto; }
.scr-crm .cr-head .bd { height: calc(var(--u) * 22); }
.scr-crm .cr-meta { margin-top: calc(var(--u) * 2); }
.scr-crm .cr-meta .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: var(--tx3); margin-inline-end: calc(var(--u) * -4); }
.scr-crm .cr-nw { white-space: nowrap; }
.scr-crm .cr-owner { padding-block: calc(var(--u) * 6); padding-inline: calc(var(--u) * 6) calc(var(--u) * 14); border: 1px solid var(--line); border-radius: calc(var(--u) * 22); margin-inline-end: calc(var(--u) * 4); }
.scr-crm .cr-tabs { margin-top: calc(var(--u) * 12); border-bottom: 0; gap: calc(var(--u) * 26); }
.scr-crm .cr-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: calc(var(--u) * 248) minmax(0, 1fr) calc(var(--u) * 280); grid-template-rows: minmax(0, 1fr); gap: calc(var(--u) * 16); padding: calc(var(--u) * 18) calc(var(--u) * 24) calc(var(--u) * 20); }
.scr-crm .cr-left, .scr-crm .cr-mid { min-height: 0; }
.scr-crm .cr-kpi { padding: calc(var(--u) * 10) calc(var(--u) * 14) calc(var(--u) * 9); }
.scr-crm .cr-ki { width: calc(var(--u) * 24); height: calc(var(--u) * 24); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 7); background: var(--acc-soft); color: var(--acc-tx); }
.scr-crm .cr-ki .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.scr-crm .cr-kpi .ic.dir, .scr-crm .cr-kpi .up .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); stroke-width: 2.2; }
.scr-crm .cr-kb { height: calc(var(--u) * 20); font-size: calc(var(--u) * 11); padding: 0 calc(var(--u) * 7); }
.scr-crm .cr-kv { margin: calc(var(--u) * 6) 0 1px; min-height: calc(var(--u) * 26); }
.scr-crm .cr-val { font-size: calc(var(--u) * 20); font-weight: 700; letter-spacing: calc(var(--u) * -.4); line-height: 1.2; }
.scr-crm .cr-kv .chart { width: calc(var(--u) * 84); height: calc(var(--u) * 26); flex: 0 0 auto; }
.scr-crm .cr-goal { width: calc(var(--u) * 64); flex: 0 0 auto; }
.scr-crm .cr-contacts { flex: 1 1 auto; display: flex; flex-direction: column; padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 12); }
.scr-crm .cr-contacts .card-h { margin-bottom: calc(var(--u) * 4); }
.scr-crm .cr-contacts .card-h .h4 { flex: 0 0 auto; }
.scr-crm .cr-contacts .btn .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.scr-crm .cr-ct { padding: calc(var(--u) * 7) 0; border-bottom: 1px solid var(--line2); }
.scr-crm .cr-ct:last-child { border-bottom: 0; }
.scr-crm .cr-cti { color: var(--tx3); display: inline-flex; }
.scr-crm .cr-cti .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.scr-crm .cr-dec { height: calc(var(--u) * 18); padding: 0 calc(var(--u) * 6); font-size: calc(var(--u) * 10.5); }
.scr-crm .cr-more { margin-top: auto; padding-top: calc(var(--u) * 8); }
.scr-crm .cr-more .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.scr-crm .cr-opps { padding: 0; overflow: hidden; }
.scr-crm .cr-opps .card-h { padding: calc(var(--u) * 14) calc(var(--u) * 16) 0; margin-bottom: calc(var(--u) * 12); }
.scr-crm .cr-opps .card-h .h4 { flex: 0 0 auto; }
.scr-crm .cr-seg { padding: calc(var(--u) * 2); }
.scr-crm .cr-seg span { height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 9); font-size: calc(var(--u) * 12); }
.scr-crm .cr-opps .tr { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 90) calc(var(--u) * 60) calc(var(--u) * 76); gap: calc(var(--u) * 10); min-height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 16); position: relative; }
.scr-crm .cr-opps .tr.th { min-height: calc(var(--u) * 32); }
.scr-crm .cr-opps .tr:last-child { border-bottom: 0; }
.scr-crm .cr-opps .tr.sel::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: calc(var(--u) * 3); background: var(--acc); }
.scr-crm .cr-p .prog { width: calc(var(--u) * 20); flex: 0 0 auto; }
.scr-crm .cr-tot { padding: calc(var(--u) * 10) calc(var(--u) * 16); background: var(--sur2); border-top: 1px solid var(--line); }
.scr-crm .cr-rev { flex: 1 1 auto; padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 12); display: flex; flex-direction: column; }
.scr-crm .cr-rev .card-h { margin-bottom: calc(var(--u) * 8); }
.scr-crm .cr-rev .card-h .h4 { flex: 0 0 auto; }
.scr-crm .cr-chart { flex: 1 1 auto; min-height: calc(var(--u) * 60); }
.scr-crm .cr-ax { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: calc(var(--u) * 6); direction: ltr; text-align: center; font-size: calc(var(--u) * 10.5); color: var(--tx3); }
.scr-crm .cr-act { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: calc(var(--u) * 14) calc(var(--u) * 16); }
.scr-crm .cr-act .card-h { margin-bottom: calc(var(--u) * 10); }
.scr-crm .cr-note { height: calc(var(--u) * 34); flex: 0 0 auto; margin-top: auto; }
.scr-crm .cr-note .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.scr-crm .cr-day { margin: calc(var(--u) * 14) 0 calc(var(--u) * 8); }
.scr-crm .cr-tl { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 12); }
.scr-crm .cr-tl::before { content: ""; position: absolute; inset-inline-start: calc(var(--u) * 13); top: calc(var(--u) * 8); bottom: calc(var(--u) * 8); width: 1px; background: var(--line); }
.scr-crm .cr-ev { position: relative; display: flex; align-items: flex-start; gap: calc(var(--u) * 10); min-width: 0; }
.scr-crm .cr-evi { position: relative; z-index: 1; width: calc(var(--u) * 28); height: calc(var(--u) * 28); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sur); border: 1px solid var(--line); color: var(--tx2); }
.scr-crm .cr-evi .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.scr-crm .cr-evi.auto { background: var(--acc); border-color: var(--acc); color: #fff; }
.scr-crm .cr-evi.mail { background: var(--info-soft); border-color: transparent; color: var(--info); }
.scr-crm .cr-evi.meet { background: #eeeefc; border-color: transparent; color: #5b5bd6; }
.scr-crm .cr-evi.call { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.scr-crm .cr-evi.note { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.scr-crm .cr-ev .col { padding-top: calc(var(--u) * 2); }
.scr-crm .cr-evt { flex: 0 0 auto; }
.scr-crm .cr-evb { font-weight: 500; line-height: 1.35; }
.scr-crm .cr-quote { margin-top: calc(var(--u) * 4); padding: calc(var(--u) * 6) calc(var(--u) * 10); border-radius: calc(var(--u) * 8); background: var(--sur2); border: 1px solid var(--line2); font-style: italic; }
.scr-crm .cr-ev .row .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.scr-crm .cr-new { margin-inline: calc(var(--u) * -8); padding: calc(var(--u) * 8); border-radius: calc(var(--u) * 10); background: var(--acc-soft); overflow: hidden; }
.scr-crm .cr-new .cr-evt { color: var(--acc-tx); font-weight: 600; }
.in .scr-crm .cr-new { animation: cr-ins .7s cubic-bezier(.2, .7, .2, 1) 2s both; }
@keyframes cr-ins { from { opacity: 0; max-height: 0; padding-block: 0; transform: translateY(calc(var(--u) * -6)); } 40% { opacity: 0; } to { opacity: 1; max-height: calc(var(--u) * 110); transform: none; } }

/* ── 2. pipeline ── */
.scr-pipeline { height: calc(var(--u) * 800); --dir: 1; }
.scr-pipeline .app { grid-template-columns: calc(var(--u) * 64) minmax(0, 1fr); }
.scr-pipeline .pl-rail { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); padding: calc(var(--u) * 16) 0 calc(var(--u) * 14); background: var(--sur); border-inline-end: 1px solid var(--line); }
.scr-pipeline .pl-rail .vg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.scr-pipeline .pl-rs { width: calc(var(--u) * 28); height: 1px; margin: calc(var(--u) * 10) 0 calc(var(--u) * 8); background: var(--line); }
.scr-pipeline .pl-ri { position: relative; width: calc(var(--u) * 40); height: calc(var(--u) * 38); display: inline-flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 10); color: var(--tx3); }
.scr-pipeline .pl-ri .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.scr-pipeline .pl-ri.on { background: var(--acc-soft); color: var(--acc-tx); }
.scr-pipeline .pl-ri .pip { position: absolute; top: calc(var(--u) * 8); inset-inline-end: calc(var(--u) * 8); width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 calc(var(--u) * 2) var(--sur); }
.scr-pipeline .pl-rail .av { margin-top: calc(var(--u) * 8); }
[dir="rtl"] .scr-pipeline { --dir: -1; }
.scr-pipeline .pl-content { position: relative; padding: calc(var(--u) * 18) calc(var(--u) * 24) calc(var(--u) * 20); gap: calc(var(--u) * 14); }
.scr-pipeline .pl-head { align-items: center; gap: calc(var(--u) * 16); }
.scr-pipeline .pl-fc { width: calc(var(--u) * 452); flex: 0 0 auto; display: flex; gap: calc(var(--u) * 18); padding: calc(var(--u) * 10) calc(var(--u) * 16); border: 1px solid var(--line); border-radius: calc(var(--u) * 12); background: var(--sur); box-shadow: 0 1px calc(var(--u) * 2) rgba(16, 24, 40, .04); }
.scr-pipeline .pl-fc .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); stroke-width: 2.2; }
.scr-pipeline .pl-fv { font-size: calc(var(--u) * 22); font-weight: 700; letter-spacing: calc(var(--u) * -.5); line-height: 1.2; }
.scr-pipeline .pl-q { height: calc(var(--u) * 8); border-radius: calc(var(--u) * 4); }
.scr-pipeline .pl-q i { border-radius: calc(var(--u) * 4); }
.scr-pipeline .pl-fq { justify-content: center; padding-inline-start: calc(var(--u) * 18); border-inline-start: 1px solid var(--line2); }
.scr-pipeline .pl-filters .chip .ic + .ic, .scr-pipeline .pl-filters .chip > .ic:last-child:not(:first-child) { width: calc(var(--u) * 12); height: calc(var(--u) * 12); color: var(--tx3); }
.scr-pipeline .pl-filters .chip.on { background: var(--acc-soft); border-color: #b8e2d5; color: var(--acc-tx); font-weight: 600; }
.scr-pipeline .pl-filters .chip.on .ic { color: var(--acc-tx); }
.scr-pipeline .pl-filters .seg .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.scr-pipeline .pl-board { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(5, calc(var(--u) * 224)); gap: calc(var(--u) * 12); align-items: start; }
.scr-pipeline .pl-col { display: flex; flex-direction: column; padding: calc(var(--u) * 8) calc(var(--u) * 8) 0; border-radius: calc(var(--u) * 12); background: var(--line2); min-width: 0; }
.scr-pipeline .pl-ch { display: flex; flex-direction: column; gap: 1px; padding: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 10); min-width: 0; }
.scr-pipeline .pl-ch .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); color: var(--tx3); }
.scr-pipeline .pl-tot { padding-inline-start: calc(var(--u) * 14); }
.scr-pipeline .pl-ch .h4 { flex: 0 1 auto; }
.scr-pipeline .pl-cd { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; flex: 0 0 auto; background: var(--s6); }
.scr-pipeline .pl-cd.s5 { background: var(--s5); } .scr-pipeline .pl-cd.s3 { background: var(--s3); } .scr-pipeline .pl-cd.s2 { background: var(--s2); } .scr-pipeline .pl-cd.ok { background: var(--ok); }
.scr-pipeline .pl-ch .bd { height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 6); font-size: calc(var(--u) * 11); background: var(--sur); }
.scr-pipeline .pl-cards { display: flex; flex-direction: column; }
.scr-pipeline .pl-card { height: calc(var(--u) * 112); margin-bottom: calc(var(--u) * 8); padding: calc(var(--u) * 10) calc(var(--u) * 12); display: flex; flex-direction: column; min-width: 0; background: var(--sur); border: 1px solid var(--line); border-radius: calc(var(--u) * 10); box-shadow: 0 1px calc(var(--u) * 2) rgba(16, 24, 40, .05); }
.scr-pipeline .pl-amt { margin-top: auto; }
.scr-pipeline .pl-amt .sb { font-size: calc(var(--u) * 13.5); }
.scr-pipeline .pl-meta { margin-top: calc(var(--u) * 6); min-height: calc(var(--u) * 20); }
.scr-pipeline .pl-meta .bd { height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 6); font-size: calc(var(--u) * 10.5); }
.scr-pipeline .pl-meta .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.scr-pipeline .pl-late { color: var(--warn); font-weight: 600; }
.scr-pipeline .pl-won { color: var(--ok); font-weight: 600; }
.scr-pipeline .pl-won .ic { stroke-width: 2.6; }
/* the deal that moves from Négociation to Signature: it sits in Signature (final state), drawn one column back at first */
.scr-pipeline .pl-slot { height: calc(var(--u) * 120); }
.scr-pipeline .pl-ghost { position: relative; height: 0; overflow: hidden; }
.scr-pipeline .pl-ghost::after { content: ""; position: absolute; inset-inline: 0; top: 0; height: calc(var(--u) * 112); border: calc(var(--u) * 1.5) dashed #c9ced6; border-radius: calc(var(--u) * 10); }
.scr-pipeline .pl-move { position: relative; z-index: 3; border-color: #b8e2d5; box-shadow: 0 0 0 calc(var(--u) * 3) var(--acc-soft), 0 1px calc(var(--u) * 2) rgba(16, 24, 40, .05); }
.js .dev:not(.in) .scr-pipeline .pl-move { opacity: 0; }
.in .scr-pipeline .pl-move { animation: lo-in .5s ease .5s both, pl-move 1.6s cubic-bezier(.5, 0, .2, 1) 1.3s both; }
.in .scr-pipeline .pl-slot { animation: pl-slot .8s cubic-bezier(.4, 0, .2, 1) 1.6s both; }
.in .scr-pipeline .pl-ghost { animation: pl-ghost .8s cubic-bezier(.4, 0, .2, 1) 1.75s both; }
.in .scr-pipeline .lo-was { animation: lo-out .25s 2.6s both; }
.in .scr-pipeline .lo-now { animation: lo-in .3s 2.65s both; }
@keyframes pl-move {
  0% { transform: translateX(calc(var(--dir) * calc(var(--u) * -236))); box-shadow: 0 1px calc(var(--u) * 2) rgba(16, 24, 40, .05); border-color: var(--line); }
  18% { transform: translateX(calc(var(--dir) * calc(var(--u) * -236))) translateY(calc(var(--u) * -5)) rotate(-2deg) scale(1.03); box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 34) calc(var(--u) * -10) rgba(16, 24, 40, .32); }
  72% { transform: translateY(calc(var(--u) * -5)) rotate(-2deg) scale(1.03); box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 34) calc(var(--u) * -10) rgba(16, 24, 40, .32); }
  100% { transform: none; }
}
@keyframes pl-slot { from { height: 0; } to { height: calc(var(--u) * 120); } }
@keyframes pl-ghost { from { height: calc(var(--u) * 120); } to { height: 0; } }
.scr-pipeline .pl-toast { position: absolute; z-index: 4; bottom: calc(var(--u) * 30); inset-inline-start: calc(var(--u) * 496); width: calc(var(--u) * 460); display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 10) calc(var(--u) * 14); border-radius: calc(var(--u) * 12); background: #14171c; color: #e8ebf0; box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 36) calc(var(--u) * -12) rgba(0, 0, 0, .45); }
.scr-pipeline .pl-toast .ic.dir { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: #8a919c; margin: 0 calc(var(--u) * 2); }
.scr-pipeline .pl-toast .sm { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-pipeline .pl-ti { width: calc(var(--u) * 22); height: calc(var(--u) * 22); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #2bc49c; color: #06261d; }
.scr-pipeline .pl-ti .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); stroke-width: 3; }
.scr-pipeline .pl-undo { color: #5fd9b6; flex: 0 0 auto; }

/* ── 3. agent ── */
.scr-agent { height: calc(var(--u) * 520); display: flex; flex-direction: column; background: var(--sur); --dir: 1; }
[dir="rtl"] .scr-agent { --dir: -1; }
.scr-agent .ag-top { height: calc(var(--u) * 58); flex: 0 0 auto; padding-inline: calc(var(--u) * 20) calc(var(--u) * 12); border-bottom: 1px solid var(--line); }
.scr-agent .ag-logo { width: calc(var(--u) * 32); height: calc(var(--u) * 32); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 10); color: #fff; background: linear-gradient(135deg, #0f8f72, #5b5bd6); }
.scr-agent .ag-logo .ic { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.scr-agent .ag-icb { width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-color: transparent; }
.scr-agent .ag-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: calc(var(--u) * 18) calc(var(--u) * 24) 0; }
.scr-agent .ag-doc { width: calc(var(--u) * 42); height: calc(var(--u) * 42); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 11); background: var(--sur2); border: 1px solid var(--line); color: var(--tx2); }
.scr-agent .ag-doc .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.scr-agent .ag-title .h2 { font-size: calc(var(--u) * 19); }
.scr-agent .ag-cap { margin: calc(var(--u) * 16) 0 calc(var(--u) * 8); }
.scr-agent .ag-outline { border: 1px solid var(--line); border-radius: calc(var(--u) * 12); overflow: hidden; }
.scr-agent .ag-sec { height: calc(var(--u) * 46); padding: 0 calc(var(--u) * 14); border-bottom: 1px solid var(--line2); }
.scr-agent .ag-sec:last-child { border-bottom: 0; }
.scr-agent .ag-num { width: calc(var(--u) * 24); height: calc(var(--u) * 24); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 7); background: var(--acc-soft); color: var(--acc-tx); font-size: calc(var(--u) * 12); font-weight: 700; }
.scr-agent .ag-src { height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 8); font-size: calc(var(--u) * 11.5); }
.scr-agent .ag-src .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); color: var(--acc-tx); }
.scr-agent .ag-flag { height: calc(var(--u) * 20); font-size: calc(var(--u) * 10.5); padding: 0 calc(var(--u) * 6); }
.scr-agent .ag-ok { width: calc(var(--u) * 20); height: calc(var(--u) * 20); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.scr-agent .ag-ok .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); stroke-width: 2.8; }
.scr-agent .ag-cap2 { margin: calc(var(--u) * 14) 0 calc(var(--u) * 8); }
.scr-agent .ag-chips { flex-wrap: wrap; }
.scr-agent .ag-chips .chip { height: calc(var(--u) * 26); padding: 0 calc(var(--u) * 8); gap: calc(var(--u) * 5); font-size: calc(var(--u) * 11.5); }
.scr-agent .ag-chips .chip .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.scr-agent .ag-chips .chip .ic { color: var(--acc-tx); }
.scr-agent .ag-note { margin-top: calc(var(--u) * 12); padding: calc(var(--u) * 8) calc(var(--u) * 12); border-radius: calc(var(--u) * 9); background: var(--warn-soft); color: var(--tx2); }
.scr-agent .ag-note .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: var(--warn); }
.scr-agent .ag-note b { color: var(--tx); }
.scr-agent .ag-foot { height: calc(var(--u) * 70); flex: 0 0 auto; padding: 0 calc(var(--u) * 24); border-top: 1px solid var(--line); background: var(--sur2); }
.scr-agent .ag-st { display: grid; min-width: 0; }
.scr-agent .ag-st > * { grid-area: 1 / 1; min-width: 0; }
.scr-agent .ag-sti { width: calc(var(--u) * 30); height: calc(var(--u) * 30); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.scr-agent .ag-sti .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.scr-agent .ag-sti.warn { background: var(--warn-soft); color: var(--warn); }
.scr-agent .ag-sti.ok { background: var(--ok); color: #fff; }
.scr-agent .ag-sti.ok .ic { stroke-width: 2.8; }
.scr-agent .ag-wait { opacity: 0; }
.scr-agent .ag-approve { position: relative; }
.scr-agent .ag-ptr { inset-inline-end: calc(var(--u) * 16); bottom: calc(var(--u) * 9); }
[dir="rtl"] .scr-agent .ag-ptr { inset-inline-end: calc(var(--u) * 108); }
.in .scr-agent .ag-wait { animation: lo-out .2s 2.95s both; }
.in .scr-agent .ag-done { animation: ag-done .5s cubic-bezier(.2, .7, .2, 1) 3.12s both; }
.in .scr-agent .ag-approve { animation: ag-press .35s ease 2.75s both; }
.in .scr-agent .ag-ptr { animation: ag-ptr 1.5s cubic-bezier(.3, .7, .3, 1) 1.4s both; }
@keyframes ag-done { from { opacity: 0; transform: translateY(calc(var(--u) * 6)); } to { opacity: 1; transform: none; } }
@keyframes ag-press { 0%, 100% { transform: none; filter: none; } 45% { transform: scale(.95); filter: brightness(.88); } }
@keyframes ag-ptr { 0% { opacity: 0; transform: translate(calc(var(--dir) * calc(var(--u) * -170)), calc(var(--u) * -190)); } 12% { opacity: 1; } 78% { transform: none; } 88% { transform: scale(.82); } 100% { opacity: 1; transform: none; } }

/* ── 4. portal (dark) ── */
.scr-portal { height: calc(var(--u) * 800); display: flex; flex-direction: column; }
.scr-portal .pt-top { height: calc(var(--u) * 60); flex: 0 0 auto; padding: 0 calc(var(--u) * 20); background: var(--sur); border-bottom: 1px solid var(--line); }
.scr-portal .pt-brand { font-size: calc(var(--u) * 14.5); }
.scr-portal .pt-div { width: 1px; height: calc(var(--u) * 20); background: var(--line); }
.scr-portal .pt-sso { height: calc(var(--u) * 26); padding: 0 calc(var(--u) * 10); font-size: calc(var(--u) * 12); margin-inline-start: calc(var(--u) * 6); }
.scr-portal .pt-sso .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.scr-portal .pt-search { width: calc(var(--u) * 250); height: calc(var(--u) * 34); }
.scr-portal .pt-co { height: calc(var(--u) * 34); color: var(--tx); font-weight: 600; }
.scr-portal .pt-co .ic:last-child { width: calc(var(--u) * 12); height: calc(var(--u) * 12); color: var(--tx3); }
.scr-portal .pt-app { height: auto; flex: 1 1 auto; min-height: 0; }
.scr-portal .side { padding-top: calc(var(--u) * 16); }
.scr-portal .pt-team { display: flex; flex-direction: column; gap: calc(var(--u) * 10); padding: calc(var(--u) * 12); border: 1px solid var(--line); border-radius: calc(var(--u) * 12); background: var(--sur2); }
.scr-portal .pt-wide { width: 100%; }
.scr-portal .pt-content { padding: calc(var(--u) * 20) calc(var(--u) * 24); gap: calc(var(--u) * 16); }
.scr-portal .pagehead { align-items: flex-end; }
.scr-portal .pagehead .bd .dot { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.scr-portal .pt-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 336); gap: calc(var(--u) * 16); }
.scr-portal .pt-left, .scr-portal .pt-right { min-height: 0; }
.scr-portal .pt-sig { padding: calc(var(--u) * 16) calc(var(--u) * 18) calc(var(--u) * 14); }
.scr-portal .pt-sig .card-h .h4 { flex: 0 0 auto; }
.scr-portal .pt-sig .card-h .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.scr-portal .pt-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: calc(var(--u) * 8) 0 calc(var(--u) * 14); }
.scr-portal .pt-line { position: absolute; top: calc(var(--u) * 15); inset-inline: 12.5%; height: calc(var(--u) * 2); border-radius: calc(var(--u) * 2); background: var(--line); }
.scr-portal .pt-fill { display: block; height: 100%; border-radius: calc(var(--u) * 2); background: var(--acc); }
.scr-portal .pt-step { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); padding: 0 calc(var(--u) * 6); min-width: 0; text-align: center; }
.scr-portal .pt-step > * { max-width: 100%; }
.scr-portal .pt-c { position: relative; z-index: 1; width: calc(var(--u) * 32); height: calc(var(--u) * 32); margin-bottom: calc(var(--u) * 8); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: calc(var(--u) * 2) solid var(--line); background: var(--sur); color: var(--tx3); font-size: calc(var(--u) * 12.5); font-weight: 700; }
.scr-portal .pt-c .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); stroke-width: 2.6; }
.scr-portal .done .pt-c { background: var(--acc); border-color: var(--acc); color: #04140f; }
.scr-portal .cur .pt-c { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); box-shadow: 0 0 0 calc(var(--u) * 4) rgba(240, 166, 58, .12); }
.scr-portal .cur .pt-c .ic { stroke-width: 2; }
.scr-portal .pt-step .bd { margin-top: calc(var(--u) * 3); height: calc(var(--u) * 20); font-size: calc(var(--u) * 11); }
.scr-portal .pt-okt { color: var(--ok); margin-top: calc(var(--u) * 3); }
.scr-portal .next .xs.mut2 { margin-top: calc(var(--u) * 3); }
.scr-portal .pt-sigf { padding-top: calc(var(--u) * 12); border-top: 1px solid var(--line); }
.scr-portal .pt-inv { flex: 1 1 auto; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.scr-portal .pt-inv .card-h { padding: calc(var(--u) * 14) calc(var(--u) * 16) 0; margin-bottom: calc(var(--u) * 12); }
.scr-portal .pt-inv .card-h .h4 { flex: 1 1 auto; }
.scr-portal .pt-inv .tr { grid-template-columns: calc(var(--u) * 124) minmax(0, 1fr) calc(var(--u) * 80) calc(var(--u) * 112) calc(var(--u) * 72) calc(var(--u) * 16); gap: calc(var(--u) * 10); min-height: calc(var(--u) * 40); padding: 0 calc(var(--u) * 16); font-size: calc(var(--u) * 12.5); }
.scr-portal .pt-inv .tr.th { min-height: calc(var(--u) * 32); font-size: calc(var(--u) * 11.5); }
.scr-portal .pt-inv .tr.sel { background: rgba(240, 96, 93, .07); }
.scr-portal .pt-dl { display: inline-flex; color: var(--tx3); }
.scr-portal .pt-dl .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.scr-portal .pt-foot { margin-top: auto; padding: calc(var(--u) * 8) calc(var(--u) * 16); border-top: 1px solid var(--line); }
.scr-portal .pt-foot .btn .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.scr-portal .pt-tk, .scr-portal .pt-docs { padding: calc(var(--u) * 14) calc(var(--u) * 16); }
.scr-portal .pt-tk .card-h .h4, .scr-portal .pt-docs .card-h .h4 { flex: 0 0 auto; }
.scr-portal .pt-tk .btn .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.scr-portal .pt-tki { display: flex; flex-direction: column; gap: calc(var(--u) * 6); padding: calc(var(--u) * 10) calc(var(--u) * 12); border: 1px solid var(--line); border-radius: calc(var(--u) * 10); background: var(--sur2); }
.scr-portal .pt-tki + .pt-tki { margin-top: calc(var(--u) * 8); }
.scr-portal .pt-tki .bd { height: calc(var(--u) * 20); font-size: calc(var(--u) * 10.5); padding: 0 calc(var(--u) * 6); }
.scr-portal .pt-tki .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.scr-portal .pt-sla { color: var(--warn); }
.scr-portal .pt-slab { width: calc(var(--u) * 84); flex: 0 0 auto; }
.scr-portal .pt-docs { flex: 1 1 auto; display: flex; flex-direction: column; }
.scr-portal .pt-doc { padding: calc(var(--u) * 8) 0; border-bottom: 1px solid var(--line2); }
.scr-portal .pt-doc:last-child { border-bottom: 0; }
.scr-portal .pt-ft { width: calc(var(--u) * 30); height: calc(var(--u) * 36); flex: 0 0 auto; display: inline-flex; align-items: flex-end; justify-content: center; padding-bottom: calc(var(--u) * 5); border-radius: calc(var(--u) * 6); color: #fff; font-size: calc(var(--u) * 9); font-weight: 700; letter-spacing: calc(var(--u) * .3); }
.scr-portal .pt-ft.pdf { background: #b8433d; } .scr-portal .pt-ft.xls { background: #1e7a4b; } .scr-portal .pt-ft.doc { background: #2f5fb3; }
.scr-portal .pt-icb { width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-color: transparent; background: transparent; }
.scr-portal .pt-icb .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.scr-portal .pt-nw { white-space: nowrap; flex: 0 0 auto; }
.scr-portal .pt-share { margin-top: auto; padding-top: calc(var(--u) * 10); border-top: 1px solid var(--line2); }
.scr-portal .pt-share .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }

/* ── 5. backoffice ── */
.scr-backoffice { height: calc(var(--u) * 800); }
.scr-backoffice .lo-bn { min-width: 0; line-height: 1.25; }
.scr-backoffice .bo-ent { height: calc(var(--u) * 34); color: var(--tx); font-weight: 600; }
.scr-backoffice .bo-ent .ic:last-child { width: calc(var(--u) * 12); height: calc(var(--u) * 12); color: var(--tx3); }
.scr-backoffice .topbar .chip .ic:last-child:not(:first-child) { width: calc(var(--u) * 12); height: calc(var(--u) * 12); color: var(--tx3); }
.scr-backoffice .topbar .chip { height: calc(var(--u) * 34); }
.scr-backoffice .bo-search { width: calc(var(--u) * 380); }
.scr-backoffice .bo-content { padding: calc(var(--u) * 18) calc(var(--u) * 24) calc(var(--u) * 20); gap: calc(var(--u) * 14); }
.scr-backoffice .pagehead { align-items: center; }
.scr-backoffice .pagehead .bd .dot { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.scr-backoffice .bo-kpis { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 12); }
.scr-backoffice .bo-kpi { padding: calc(var(--u) * 12) calc(var(--u) * 16); }
.scr-backoffice .bo-kpi .val { font-size: calc(var(--u) * 23); margin-top: calc(var(--u) * 4); }
.scr-backoffice .bo-kv { align-items: flex-end; }
.scr-backoffice .bo-kv .chart { width: calc(var(--u) * 96); height: calc(var(--u) * 30); flex: 0 0 auto; }
.scr-backoffice .bo-kp { width: calc(var(--u) * 104); flex: 0 0 auto; margin-bottom: calc(var(--u) * 9); }
.scr-backoffice .bo-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 330); gap: calc(var(--u) * 14); }
.scr-backoffice .bo-orders { display: flex; flex-direction: column; padding: 0; overflow: hidden; min-height: 0; }
.scr-backoffice .bo-tabs { flex: 0 0 auto; align-items: center; gap: calc(var(--u) * 18); padding: calc(var(--u) * 2) calc(var(--u) * 16) 0; }
.scr-backoffice .bo-tabs .tab { font-size: calc(var(--u) * 13); }
.scr-backoffice .bo-flt { height: calc(var(--u) * 26); }
.scr-backoffice .bo-orders .tr { grid-template-columns: calc(var(--u) * 92) calc(var(--u) * 44) minmax(0, 1fr) calc(var(--u) * 52) calc(var(--u) * 112) calc(var(--u) * 118); gap: calc(var(--u) * 10); min-height: calc(var(--u) * 43); padding: 0 calc(var(--u) * 16); font-size: calc(var(--u) * 12.5); }
.scr-backoffice .bo-orders .tr.th { min-height: calc(var(--u) * 32); font-size: calc(var(--u) * 11.5); }
.scr-backoffice .bo-orders .tr .bd { height: calc(var(--u) * 20); font-size: calc(var(--u) * 11); padding: 0 calc(var(--u) * 7); }
.scr-backoffice .bo-orders .tr .bo-ch { font-size: calc(var(--u) * 10.5); padding: 0 calc(var(--u) * 6); }
.scr-backoffice .bo-foot { margin-top: auto; padding: calc(var(--u) * 7) calc(var(--u) * 16); border-top: 1px solid var(--line); }
.scr-backoffice .bo-pg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
.scr-backoffice .bo-pg .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.scr-backoffice .bo-right { min-height: 0; }
.scr-backoffice .bo-whc { padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 8); }
.scr-backoffice .bo-whc .card-h { margin-bottom: calc(var(--u) * 6); }
.scr-backoffice .bo-whr { display: grid; grid-template-columns: calc(var(--u) * 48) minmax(0, 1fr) calc(var(--u) * 92) calc(var(--u) * 50); gap: calc(var(--u) * 10); align-items: center; height: calc(var(--u) * 30); }
.scr-backoffice .bo-whr > * { min-width: 0; }
.scr-backoffice .bo-bar { height: calc(var(--u) * 6); }
.scr-backoffice .bo-grids { flex: 1 1 auto; padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 6); }
.scr-backoffice .bo-grids .card-h { margin-bottom: calc(var(--u) * 4); }
.scr-backoffice .bo-gr { padding: calc(var(--u) * 9) 0; border-top: 1px solid var(--line2); }
.scr-backoffice .bo-gr .bd { height: calc(var(--u) * 20); font-size: calc(var(--u) * 11); padding: 0 calc(var(--u) * 7); }
.scr-backoffice .bo-cur { width: calc(var(--u) * 40); height: calc(var(--u) * 32); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 8); border: 1px solid var(--line); background: var(--sur2); color: var(--tx2); font-size: calc(var(--u) * 11); font-weight: 700; }

/* ── 6. whitelabel (the subsidiary's orange, #e8682a, only in its own preview) ── */
.scr-whitelabel { height: calc(var(--u) * 720); }
.scr-whitelabel .wl-content { padding: calc(var(--u) * 16) calc(var(--u) * 24) calc(var(--u) * 18); gap: calc(var(--u) * 14); }
.scr-whitelabel .wl-head { align-items: center; }
.scr-whitelabel .wl-tile { width: calc(var(--u) * 44); height: calc(var(--u) * 44); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 12); background: var(--ink); color: var(--bg); font-size: calc(var(--u) * 15); font-weight: 700; }
.scr-whitelabel .wl-head .bd .dot { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.scr-whitelabel .wl-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 404); gap: calc(var(--u) * 16); }
.scr-whitelabel .wl-left { min-height: 0; }
.scr-whitelabel .wl-left .card { padding: calc(var(--u) * 12) calc(var(--u) * 16); }
.scr-whitelabel .wl-left .card-h { margin-bottom: calc(var(--u) * 10); }
.scr-whitelabel .card-h .bd .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.scr-whitelabel .wl-inp { height: calc(var(--u) * 36); color: var(--tx); }
.scr-whitelabel .wl-val { font-size: calc(var(--u) * 13); font-weight: 600; }
.scr-whitelabel .wl-dns { margin-top: calc(var(--u) * 10); border: 1px solid var(--line); border-radius: calc(var(--u) * 10); overflow: hidden; }
.scr-whitelabel .wl-dns .tr { grid-template-columns: calc(var(--u) * 72) calc(var(--u) * 88) minmax(0, 1fr) calc(var(--u) * 92); min-height: calc(var(--u) * 38); border-bottom: 0; }
.scr-whitelabel .wl-dns .tr.th { min-height: calc(var(--u) * 30); border-bottom: 1px solid var(--line); }
.scr-whitelabel .wl-arr { width: calc(var(--u) * 13); height: calc(var(--u) * 13); color: var(--tx3); }
.scr-whitelabel .wl-tls { margin-top: calc(var(--u) * 8); padding: calc(var(--u) * 8) calc(var(--u) * 12); border-radius: calc(var(--u) * 10); background: var(--sur2); border: 1px solid var(--line2); }
.scr-whitelabel .wl-ti { width: calc(var(--u) * 32); height: calc(var(--u) * 32); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 9); background: var(--acc-soft); color: var(--acc-tx); }
.scr-whitelabel .wl-ti .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.scr-whitelabel .wl-st { color: var(--ok); flex: 0 0 auto; }
.scr-whitelabel .wl-ck { width: calc(var(--u) * 20); height: calc(var(--u) * 20); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ok); color: #fff; }
.scr-whitelabel .wl-ck .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); stroke-width: 3; }
.scr-whitelabel .wl-ck.todo { background: var(--sur); border: calc(var(--u) * 1.5) solid var(--line); color: var(--tx3); font-size: calc(var(--u) * 10.5); font-weight: 700; }
.scr-whitelabel .wl-idg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 12); }
.scr-whitelabel .wl-sw { width: calc(var(--u) * 20); height: calc(var(--u) * 20); flex: 0 0 auto; border-radius: calc(var(--u) * 6); background: #e8682a; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.scr-whitelabel .wl-up { height: calc(var(--u) * 44); padding-inline: calc(var(--u) * 8); }
.scr-whitelabel .wl-logo { width: calc(var(--u) * 28); height: calc(var(--u) * 28); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 7); background: #e8682a; color: #fff; font-size: calc(var(--u) * 10.5); font-weight: 800; }
.scr-whitelabel .wl-up .btn .ic, .scr-whitelabel .wl-teams .btn .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.scr-whitelabel .wl-teams .card-h { margin-bottom: calc(var(--u) * 4); }
.scr-whitelabel .wl-team .avs .av + .av { margin-inline-start: calc(var(--u) * -5); }
.scr-whitelabel .wl-team { padding: calc(var(--u) * 8) 0; border-top: 1px solid var(--line2); }
.scr-whitelabel .wl-teams .card-h + .wl-team { border-top: 0; }
.scr-whitelabel .wl-prev { display: flex; flex-direction: column; min-height: 0; padding: calc(var(--u) * 14) calc(var(--u) * 16); }
.scr-whitelabel .wl-prev .card-h .h4 { flex: 1 1 auto; }
.scr-whitelabel .wl-seg { padding: calc(var(--u) * 2); }
.scr-whitelabel .wl-seg span { height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 9); font-size: calc(var(--u) * 12); }
.scr-whitelabel .wl-seg .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
/* the mini portal, in the subsidiary's colours */
.scr-whitelabel .wl-mini { flex: 0 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: calc(var(--u) * 10); background: #fbfaf8; color: #231d18; font-size: calc(var(--u) * 9); line-height: 1.35; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 26) calc(var(--u) * -12) rgba(16, 24, 40, .28); }
.scr-whitelabel .wl-mbar { height: calc(var(--u) * 22); display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 8); background: #f1efec; border-bottom: 1px solid #e5e1dc; direction: ltr; }
.scr-whitelabel .wl-mdots { display: flex; gap: calc(var(--u) * 3); flex: 0 0 auto; }
.scr-whitelabel .wl-mdots i { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: #d8d3ce; }
.scr-whitelabel .wl-murl { margin: 0 auto; height: calc(var(--u) * 14); display: inline-flex; align-items: center; gap: calc(var(--u) * 3); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 4); background: #e6e2dd; color: #6b635b; font-size: calc(var(--u) * 8); }
.scr-whitelabel .wl-murl .ic { width: calc(var(--u) * 7); height: calc(var(--u) * 7); stroke-width: 2.6; }
.scr-whitelabel .wl-mtop { height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 10); gap: calc(var(--u) * 10); background: #fff; border-bottom: 1px solid #efe9e4; font-size: calc(var(--u) * 9.5); }
.scr-whitelabel .wl-mlogo { width: calc(var(--u) * 16); height: calc(var(--u) * 16); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 4); background: #e8682a; color: #fff; font-size: calc(var(--u) * 6.5); font-weight: 800; }
.scr-whitelabel .wl-mtop .b { margin-inline-start: calc(var(--u) * -4); }
.scr-whitelabel .wl-mnav { color: #7b7068; font-weight: 500; font-size: calc(var(--u) * 9); }
.scr-whitelabel .wl-mnav.on { color: #e8682a; font-weight: 700; }
.scr-whitelabel .wl-mav { width: calc(var(--u) * 16); height: calc(var(--u) * 16); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #3a2f28; color: #fff; font-size: calc(var(--u) * 6.5); font-weight: 700; }
.scr-whitelabel .wl-mbody { display: flex; flex-direction: column; gap: calc(var(--u) * 8); padding: calc(var(--u) * 10); }
.scr-whitelabel .wl-mhero { padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 8); background: linear-gradient(115deg, #e8682a, #f29a52); color: #fff; }
.scr-whitelabel .wl-mh { font-size: calc(var(--u) * 12.5); font-weight: 700; }
.scr-whitelabel .wl-ms { font-size: calc(var(--u) * 8); color: #8a7f77; }
.scr-whitelabel .wl-mhero .wl-ms { color: rgba(255, 255, 255, .88); }
.scr-whitelabel .wl-mbtn { flex: 0 0 auto; height: calc(var(--u) * 20); display: inline-flex; align-items: center; padding: 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 5); background: #fff; color: #d4581d; font-size: calc(var(--u) * 8.5); font-weight: 700; }
.scr-whitelabel .wl-mk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 6); }
.scr-whitelabel .wl-mk > span { padding: calc(var(--u) * 6) calc(var(--u) * 8); border: 1px solid #eee6df; border-radius: calc(var(--u) * 6); background: #fff; }
.scr-whitelabel .wl-mv { font-size: calc(var(--u) * 11); font-weight: 700; }
.scr-whitelabel .wl-mt { border: 1px solid #eee6df; border-radius: calc(var(--u) * 6); background: #fff; overflow: hidden; }
.scr-whitelabel .wl-mr { display: grid; grid-template-columns: calc(var(--u) * 50) minmax(0, 1fr) calc(var(--u) * 64) calc(var(--u) * 56); gap: calc(var(--u) * 6); align-items: center; height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 8); border-bottom: 1px solid #f4efea; font-size: calc(var(--u) * 8.5); }
.scr-whitelabel .wl-mr:last-child { border-bottom: 0; }
.scr-whitelabel .wl-mr > * { min-width: 0; white-space: nowrap; }
.scr-whitelabel .wl-mr > :last-child { text-align: end; }
.scr-whitelabel .wl-mbd { justify-self: start; height: calc(var(--u) * 13); display: inline-flex; align-items: center; padding: 0 calc(var(--u) * 5); border-radius: calc(var(--u) * 4); background: #e8682a; color: #fff; font-size: calc(var(--u) * 7.5); font-weight: 700; }
.scr-whitelabel .wl-mbd.soft { background: #fdeee4; color: #c4521a; }
.scr-whitelabel .wl-ph { margin: calc(var(--u) * 12) 0 calc(var(--u) * 2); }
.scr-whitelabel .wl-tasks { display: flex; flex-direction: column; }
.scr-whitelabel .wl-task { padding: calc(var(--u) * 5) 0; }
.scr-whitelabel .wl-task + .wl-task { border-top: 1px solid var(--line2); }
/* Arabic month names are long: the revenue chart labels every other month (the last one, September, always) */
[lang="ar"] .scr-crm .cr-ax > :nth-child(odd) { visibility: hidden; }

/* 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); }

/* Generated by scripts/build-screens.mjs from site/pages/screens/src/securite.css: do not edit by hand. */
/* The « securite » screens (api/screens/securite.js), in DESIGN pixels (see kit.css): access (the security console), audit (the
   audit log), status (the public status page), integrations (the integration hub) and residency (data residency panel).
   Class prefixes: sec- (the admin shell shared by access and audit), ac-, au-, st-, ig-, rs-. Logical properties only. */

/* ── the admin console shell (access, audit) ── */
.scr-access, .scr-audit { height: calc(var(--u) * 800); }
.scr-audit, .scr-integrations, .scr-residency { --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
.scr .sec-shell .brand { padding-bottom: calc(var(--u) * 10); }
.scr .sec-bt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.scr .sec-bs { font-size: calc(var(--u) * 11); font-weight: 500; color: var(--tx3); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr .sec-shell .grp { margin: calc(var(--u) * 14) calc(var(--u) * 8) calc(var(--u) * 6); }
.scr .sec-shell .nv .ell { flex: 0 1 auto; }
.scr .sec-env { margin-top: auto; padding: calc(var(--u) * 10) calc(var(--u) * 12); border: 1px solid var(--line); border-radius: calc(var(--u) * 10); background: var(--sur2); display: flex; flex-direction: column; gap: calc(var(--u) * 4); }
.scr .sec-me { display: flex; align-items: center; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 10); padding: calc(var(--u) * 12) calc(var(--u) * 6) calc(var(--u) * 2); border-top: 1px solid var(--line); }
.scr .sec-me .sec-bt { flex: 1 1 auto; }
.scr .sec-me > .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); color: var(--tx3); }
.scr .sec-shell .topbar { gap: calc(var(--u) * 10); }
.scr .sec-crumb { display: flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 13); color: var(--tx3); white-space: nowrap; }
.scr .sec-crumb .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.scr .sec-crumb b { color: var(--tx); font-weight: 600; }
.scr .sec-search { width: calc(var(--u) * 340); flex: 0 0 auto; }
.scr .sec-search .ell { flex: 1 1 auto; }
.scr .sec-shell .num { white-space: nowrap; }

/* ── 1. access ── */
.scr-access .content { gap: calc(var(--u) * 16); padding: calc(var(--u) * 22) calc(var(--u) * 24) calc(var(--u) * 24); }
.scr-access .pagehead { align-items: center; }
.scr-access .pagehead .sm { margin-top: calc(var(--u) * 4); }
.scr-access .ac-cards { display: grid; grid-template-columns: 1.32fr 1fr 1fr 1fr; gap: calc(var(--u) * 12); }
.scr-access .ac-card { display: flex; flex-direction: column; gap: calc(var(--u) * 4); padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 12); }
.scr-access .ac-lb { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 12.5); font-weight: 600; color: var(--tx2); white-space: nowrap; }
.scr-access .ac-lb .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); color: var(--acc-tx); }
.scr-access .ac-v { display: flex; align-items: center; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 24); font-weight: 700; letter-spacing: calc(var(--u) * -.5); line-height: 1.2; white-space: nowrap; }
.scr-access .ac-ok { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: 50%; background: var(--ok); color: #fff; }
.scr-access .ac-ok .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); stroke-width: 3; }
.scr-access .ac-sub { font-size: calc(var(--u) * 12.5); color: var(--tx2); white-space: nowrap; }
.scr-access .ac-ft { display: flex; align-items: center; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 8); padding-top: calc(var(--u) * 10); border-top: 1px solid var(--line2); font-size: calc(var(--u) * 11.5); color: var(--tx3); white-space: nowrap; min-height: calc(var(--u) * 31); }
.scr-access .ac-ft .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.scr-access .ac-pg { flex: 1 1 auto; min-width: 0; }

.scr-access .ac-mx { padding: 0; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.scr-access .ac-mh { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 14) calc(var(--u) * 20); border-bottom: 1px solid var(--line); }
.scr-access .ac-mh .xs { margin-top: calc(var(--u) * 2); }
.scr-access .ac-hov { background: var(--sur2); border-color: #cfd4db; box-shadow: 0 1px calc(var(--u) * 2) rgba(16, 24, 40, .08); }
.scr-access .ac-mx .tbl { position: relative; flex: 1 1 auto; }
.scr-access .ac-mx .tr { grid-template-columns: minmax(0, 1fr) repeat(5, calc(var(--u) * 78)) calc(var(--u) * 156) calc(var(--u) * 112) calc(var(--u) * 20); gap: calc(var(--u) * 10); padding: 0 calc(var(--u) * 20); min-height: calc(var(--u) * 50); }
.scr-access .ac-mx .tr.th { min-height: calc(var(--u) * 36); }
.scr-access .ac-mx .tr.sel { background: var(--sur2); position: relative; }
.scr-access .ac-mx .tr.sel::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--u) * 3); background: var(--acc); }
.scr-access .ac-cc { justify-self: center; display: inline-flex; overflow: visible; }
.scr-access .ac-role { display: flex; flex-direction: column; line-height: 1.3; }
.scr-access .ac-role .xs { overflow: hidden; text-overflow: ellipsis; }
.scr-access .ac-c { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%; flex: 0 0 auto; }
.scr-access .ac-c.y { background: var(--acc-soft); color: var(--acc-tx); }
.scr-access .ac-c.y .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); stroke-width: 2.6; }
.scr-access .ac-c.c { background: var(--warn-soft); color: var(--warn); }
.scr-access .ac-c.c .ac-half { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.scr-access .ac-half circle { fill: none; stroke: currentColor; stroke-width: 1.8; }
.scr-access .ac-half path { fill: currentColor; }
.scr-access .ac-c.n i { display: block; width: calc(var(--u) * 10); height: calc(var(--u) * 2); border-radius: 1px; background: var(--tx3); opacity: .55; }
.scr-access .ac-c.sm { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.scr-access .ac-c.sm .ic { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.scr-access .ac-c.sm .ac-half { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.scr-access .ac-scope { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 12.5); color: var(--tx); font-weight: 500; }
.scr-access .ac-scope .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: var(--tx3); }
.scr-access .ac-codes { font-size: calc(var(--u) * 11); font-weight: 600; color: var(--tx3); letter-spacing: calc(var(--u) * .3); }
.scr-access .ac-mem { display: inline-flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 12.5); }
.scr-access .ac-mem .avs .av + .av { margin-inline-start: calc(var(--u) * -3); }
.scr-access .ac-mem > .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); color: var(--tx3); margin-inline-start: calc(var(--u) * 4); }
.scr-access .tr.sel .avs .av, .scr-access .tr.sel .ac-c.y { box-shadow: 0 0 0 calc(var(--u) * 2) var(--sur2); }
.scr-access .ac-more { color: var(--tx3); display: inline-flex; }
.scr-access .ac-more .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
/* the hovered cell: Commercial Golfe × Approuver (column 3: starts at 20 + 200 + 2 × 88 = 406, centre 445) */
.scr-access .ac-tip { position: absolute; z-index: 6; top: calc(var(--u) * 192); inset-inline-start: calc(var(--u) * 319); width: calc(var(--u) * 252); padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 9); background: var(--ink); color: var(--bg); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) calc(var(--u) * -8) rgba(16, 24, 40, .45); display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.scr-access .ac-tip::before { content: ""; position: absolute; top: calc(var(--u) * -4); inset-inline-start: calc(var(--u) * 121); width: calc(var(--u) * 10); height: calc(var(--u) * 10); background: var(--ink); transform: rotate(45deg); border-radius: calc(var(--u) * 2); }
.scr-access .ac-tipm { color: #aab1bc; margin-top: calc(var(--u) * 2); }
.scr-access .ac-ptr { top: calc(var(--u) * 164); inset-inline-start: calc(var(--u) * 450); }
[dir="rtl"] .scr-access .ac-ptr { inset-inline-start: calc(var(--u) * 428); }
.in .scr-access .ac-ptr { animation: ac-ptr 1.1s cubic-bezier(.3, .7, .2, 1) 1.6s both; }
@keyframes ac-ptr { from { opacity: 0; transform: translate(calc(var(--u) * 70), calc(var(--u) * 60)); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
.scr-access .ac-mf { display: flex; align-items: center; gap: calc(var(--u) * 16); height: calc(var(--u) * 46); padding: 0 calc(var(--u) * 20); border-top: 1px solid var(--line); }
.scr-access .ac-lg { display: inline-flex; align-items: center; gap: calc(var(--u) * 7); font-size: calc(var(--u) * 12); color: var(--tx2); white-space: nowrap; }
.scr-access .ac-link { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 12.5); font-weight: 600; color: var(--acc-tx); white-space: nowrap; }
.scr-access .ac-link .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }

/* ── 2. audit (dark) ── */
.scr-audit .content { gap: calc(var(--u) * 14); padding: calc(var(--u) * 20) calc(var(--u) * 24); }
.scr-audit .pagehead { align-items: center; gap: calc(var(--u) * 10); }
.scr-audit .pagehead .sm { margin-top: calc(var(--u) * 4); }
.scr-audit .btn.pri, .scr-integrations .btn.pri { color: #04140f; }
.scr-audit .au-live { display: inline-flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 15); background: var(--ok-soft); color: var(--ok); font-size: calc(var(--u) * 12.5); font-weight: 600; white-space: nowrap; margin-inline-end: calc(var(--u) * 4); }
.scr-audit .au-live i, .scr-integrations .ig-live i { position: relative; width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.scr-audit .au-live i::after, .scr-integrations .ig-live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ok); opacity: 0; }
.in .scr-audit .au-live i::after, .in .scr-integrations .ig-live i::after { animation: sec-ping 1.5s ease-out .4s 4; }
@keyframes sec-ping { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }
.scr-audit .au-filters { display: flex; align-items: center; gap: calc(var(--u) * 8); }
.scr-audit .au-filters .chip { height: calc(var(--u) * 32); gap: calc(var(--u) * 5); flex: 0 0 auto; }
.scr-audit .au-filters .chip b { color: var(--tx); font-weight: 600; }
.scr-audit .au-filters .chip > .ic:last-child { width: calc(var(--u) * 13); height: calc(var(--u) * 13); color: var(--tx3); margin-inline-start: calc(var(--u) * 2); }
.scr-audit .au-filters .chip.on { border-color: var(--acc2); background: var(--acc-soft); color: var(--acc-tx); }
.scr-audit .au-filters .chip.on b { color: var(--acc-tx); }
.scr-audit .au-filters .inp { flex: 1 1 auto; min-width: 0; height: calc(var(--u) * 32); margin-inline-start: calc(var(--u) * 8); }
.scr-audit .au-card { padding: 0; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.scr-audit .au-ch { display: flex; align-items: center; gap: calc(var(--u) * 12); height: calc(var(--u) * 46); flex: 0 0 auto; padding: 0 calc(var(--u) * 12) 0 calc(var(--u) * 16); border-bottom: 1px solid var(--line); }
.scr-audit .au-stat { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 12); color: var(--tx2); white-space: nowrap; }
.scr-audit .au-card .tbl { flex: 1 1 auto; }
.scr-audit .au-card .tr { grid-template-columns: calc(var(--u) * 72) calc(var(--u) * 160) calc(var(--u) * 150) minmax(0, 1fr) calc(var(--u) * 58) calc(var(--u) * 104) calc(var(--u) * 98) calc(var(--u) * 14); gap: calc(var(--u) * 10); padding: 0 calc(var(--u) * 16); min-height: calc(var(--u) * 38); }
.scr-audit .au-card .tr.th { min-height: calc(var(--u) * 34); }
.scr-audit .au-t { font-family: var(--mono); font-size: calc(var(--u) * 12); color: var(--tx2); }
.scr-audit .au-who, .scr-audit .au-act, .scr-audit .au-res { display: flex; align-items: center; gap: calc(var(--u) * 8); }
.scr-audit .au-who .ell { font-weight: 500; }
.scr-audit .au-sys { background: #3a414c; color: #fff; }
.scr-audit .au-sys .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); stroke-width: 2.2; }
.scr-audit .au-ai { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 6); flex: 0 0 auto; }
.scr-audit .au-ai .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); stroke-width: 2; }
.scr-audit .au-ai.ok { background: var(--ok-soft); color: var(--ok); } .scr-audit .au-ai.info { background: var(--info-soft); color: var(--info); }
.scr-audit .au-ai.acc { background: var(--acc-soft); color: var(--acc-tx); } .scr-audit .au-ai.warn { background: var(--warn-soft); color: var(--warn); }
.scr-audit .au-ai.bad { background: var(--bad-soft); color: var(--bad); }
.scr-audit .au-res .ell { color: var(--tx); }
.scr-audit .au-code { font-family: var(--mono); font-size: calc(var(--u) * 11.5); color: var(--tx3); white-space: nowrap; }
.scr-audit .au-reg { display: inline-flex; align-items: center; height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 6); border-radius: calc(var(--u) * 5); border: 1px solid var(--line); font-family: var(--mono); font-size: calc(var(--u) * 11); font-weight: 600; color: var(--tx2); }
.scr-audit .au-ip { font-family: var(--mono); font-size: calc(var(--u) * 12); color: var(--tx2); }
.scr-audit .au-chev { color: var(--tx3); display: inline-flex; }
.scr-audit .au-chev .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.scr-audit .tr.au-hov { background: var(--sur2); }
.scr-audit .tr.au-hov .au-chev { color: var(--tx); }
.in .scr-audit .tr.au-new { animation: scr-up .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both, au-new 2.6s ease 2.4s both; }
@keyframes au-new { from { background: var(--acc-soft); } to { background: transparent; } }
.scr-audit .au-pg { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 48); flex: 0 0 auto; padding: 0 calc(var(--u) * 12) 0 calc(var(--u) * 16); border-top: 1px solid var(--line); }
.scr-audit .au-pg .chip { height: calc(var(--u) * 28); }
.scr-audit .au-pg .chip .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.scr-audit .au-pages { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); margin-inline-start: calc(var(--u) * 8); }
.scr-audit .au-pages > span { min-width: calc(var(--u) * 28); height: calc(var(--u) * 28); display: inline-flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 7); font-size: calc(var(--u) * 12.5); color: var(--tx2); }
.scr-audit .au-pages .on { background: var(--acc-soft); color: var(--acc-tx); font-weight: 700; }
.scr-audit .au-pages .icb { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
.scr-audit .au-pages .icb .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }

/* ── 3. status (a public page, light) ── */
.scr-status { height: calc(var(--u) * 720); background: var(--sur); }
.scr-status .st-wrap { width: calc(var(--u) * 1120); margin: 0 auto; }
.scr-status .st-top { height: calc(var(--u) * 60); border-bottom: 1px solid var(--line); }
.scr-status .st-top .st-wrap { height: 100%; display: flex; align-items: center; gap: calc(var(--u) * 12); }
.scr-status .st-name { font-size: calc(var(--u) * 15); font-weight: 700; letter-spacing: calc(var(--u) * -.2); white-space: nowrap; }
.scr-status .st-sep { width: 1px; height: calc(var(--u) * 18); background: var(--line); }
.scr-status .st-link { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 13); font-weight: 500; color: var(--tx2); white-space: nowrap; margin-inline-end: calc(var(--u) * 8); }
.scr-status .st-link .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.scr-status .st-body { padding-top: calc(var(--u) * 24); display: flex; flex-direction: column; gap: calc(var(--u) * 20); }
.scr-status .st-banner { display: flex; align-items: center; gap: calc(var(--u) * 14); height: calc(var(--u) * 64); padding: 0 calc(var(--u) * 22); border-radius: calc(var(--u) * 12); background: var(--ok); color: #fff; box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 20) calc(var(--u) * -10) rgba(22, 163, 74, .6); }
.scr-status .st-banner .h2 { color: #fff; white-space: nowrap; }
.scr-status .st-banner .sm { opacity: .9; white-space: nowrap; }
.scr-status .st-bi { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%; background: #fff; color: var(--ok); }
.scr-status .st-bi .ic { width: calc(var(--u) * 17); height: calc(var(--u) * 17); stroke-width: 3; }
.scr-status .st-grid { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 344); gap: calc(var(--u) * 20); align-items: start; }
.scr-status .st-comp { padding: 0; }
.scr-status .st-ch { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 12) calc(var(--u) * 20); border-bottom: 1px solid var(--line); }
.scr-status .st-row { display: flex; flex-direction: column; gap: calc(var(--u) * 7); padding: calc(var(--u) * 10) calc(var(--u) * 20) calc(var(--u) * 11); border-bottom: 1px solid var(--line2); }
.scr-status .st-row .sb { font-size: calc(var(--u) * 13.5); white-space: nowrap; }
.scr-status .st-i { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: var(--tx3); }
.scr-status .st-ok { font-size: calc(var(--u) * 12.5); font-weight: 600; color: var(--ok); white-space: nowrap; margin-inline-start: calc(var(--u) * 6); }
.scr-status .st-bw { position: relative; height: calc(var(--u) * 28); }
.scr-status .st-bars { display: block; width: 100%; height: calc(var(--u) * 28); }
.scr-status .st-bars g { transform-box: fill-box; }
.scr-status .st-bars rect { fill: var(--ok); }
.scr-status .st-bars rect.w { fill: var(--warn); }
.scr-status .st-bars rect.b { fill: var(--bad); }
.scr-status .st-bars rect.hv { opacity: .7; }
/* the hovered day: Paiements, 17 September (bar 76 of 90); the bars stay left to right (dir="ltr"), so does the tooltip's anchor */
.scr-status .st-tip { position: absolute; z-index: 6; top: 50%; inset-inline-end: calc(33.2% + calc(var(--u) * 10)); transform: translateY(-50%); width: calc(var(--u) * 248); padding: calc(var(--u) * 9) calc(var(--u) * 12); border-radius: calc(var(--u) * 9); background: var(--ink); color: var(--bg); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) calc(var(--u) * -8) rgba(16, 24, 40, .45); display: flex; flex-direction: column; gap: calc(var(--u) * 2); text-align: start; }
.scr-status .st-tip::after { content: ""; position: absolute; top: 50%; inset-inline-end: calc(var(--u) * -4); width: calc(var(--u) * 10); height: calc(var(--u) * 10); margin-top: calc(var(--u) * -5); background: var(--ink); transform: rotate(45deg); border-radius: calc(var(--u) * 2); }
.scr-status .st-tipc { display: flex; flex-direction: column; gap: calc(var(--u) * 2); text-align: start; }
.scr-status .st-tip .xs { display: flex; align-items: center; gap: calc(var(--u) * 6); white-space: nowrap; }
.scr-status .st-sq { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: calc(var(--u) * 2); flex: 0 0 auto; }
.scr-status .st-tipm { color: #aab1bc; }
.scr-status .st-ptr { top: calc(var(--u) * 12); inset-inline-start: 67.3%; }
.in .scr-status .st-ptr { animation: st-ptr 1s cubic-bezier(.3, .7, .2, 1) 1.6s both; }
@keyframes st-ptr { from { opacity: 0; transform: translate(calc(var(--u) * -40), calc(var(--u) * 40)); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
.scr-status .st-axis { padding: calc(var(--u) * 10) calc(var(--u) * 20) calc(var(--u) * 12); align-items: center; }
.scr-status .st-lgd { display: inline-flex; gap: calc(var(--u) * 14); }
.scr-status .st-lgd span { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); }
.scr-status .st-lgd i { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: calc(var(--u) * 2); background: var(--ok); }
.scr-status .st-lgd i.w { background: var(--warn); } .scr-status .st-lgd i.b { background: var(--bad); }
.scr-status .st-side { display: flex; flex-direction: column; gap: calc(var(--u) * 16); }
.scr-status .st-card { display: flex; flex-direction: column; gap: calc(var(--u) * 6); padding: calc(var(--u) * 16) calc(var(--u) * 18); }
.scr-status .st-card > .row:first-child { margin-bottom: calc(var(--u) * 4); }
.scr-status .st-card .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.scr-status .st-inc { display: flex; flex-direction: column; gap: calc(var(--u) * 4); padding-top: calc(var(--u) * 12); margin-top: calc(var(--u) * 4); border-top: 1px solid var(--line2); }
.scr-status .st-card > .row + .st-inc { border-top: 0; padding-top: 0; margin-top: 0; }
.scr-status .st-inc .sb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-status .st-tl { display: flex; flex-direction: column; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 4); padding-inline-start: calc(var(--u) * 14); border-inline-start: calc(var(--u) * 2) solid var(--line2); }
.scr-status .st-tl li { position: relative; }
.scr-status .st-dotl { position: absolute; top: calc(var(--u) * 5); inset-inline-start: calc(var(--u) * -19); width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 calc(var(--u) * 2) var(--sur); }
.scr-status .st-tl li + li .st-dotl { background: var(--warn); }
.scr-status .st-sq { background: var(--bad); }
.scr-status .st-perf { gap: calc(var(--u) * 8); }
.scr-status .st-big { font-size: calc(var(--u) * 20); font-weight: 700; letter-spacing: calc(var(--u) * -.4); line-height: 1.1; white-space: nowrap; }
.scr-status .st-spark { display: block; width: calc(var(--u) * 120); height: calc(var(--u) * 30); flex: 0 0 auto; }
.scr-status .num { white-space: nowrap; }

/* ── 4. integrations (dark) ── */
.scr-integrations { height: calc(var(--u) * 800); }
.scr-integrations .ig-top { height: calc(var(--u) * 56); display: flex; align-items: center; gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 24); background: var(--sur); border-bottom: 1px solid var(--line); }
.scr-integrations .ig-brand { font-size: calc(var(--u) * 14.5); font-weight: 700; letter-spacing: calc(var(--u) * -.2); white-space: nowrap; }
.scr-integrations .ig-sep { width: 1px; height: calc(var(--u) * 18); background: var(--line); }
.scr-integrations .ig-prod { font-size: calc(var(--u) * 13.5); font-weight: 600; color: var(--tx2); white-space: nowrap; }
.scr-integrations .ig-nav { display: flex; align-items: center; gap: calc(var(--u) * 2); margin-inline-start: calc(var(--u) * 16); }
.scr-integrations .ig-nav > span { height: calc(var(--u) * 32); display: inline-flex; align-items: center; gap: calc(var(--u) * 6); padding: 0 calc(var(--u) * 11); border-radius: calc(var(--u) * 8); font-size: calc(var(--u) * 13); font-weight: 500; color: var(--tx2); white-space: nowrap; }
.scr-integrations .ig-nav > .on { background: var(--line); color: var(--tx); font-weight: 600; }
.scr-integrations .ig-n { font-size: calc(var(--u) * 11); font-weight: 600; color: var(--tx3); }
.scr-integrations .ig-top .seg .dot { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.scr-integrations .ig-content { height: calc(100% - calc(var(--u) * 56)); padding: calc(var(--u) * 20) calc(var(--u) * 24) calc(var(--u) * 24); display: flex; flex-direction: column; gap: calc(var(--u) * 16); }
.scr-integrations .pagehead { align-items: center; gap: calc(var(--u) * 10); }
.scr-integrations .pagehead .sm { margin-top: calc(var(--u) * 4); }
.scr-integrations .ig-live { display: inline-flex; align-items: center; gap: calc(var(--u) * 7); height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 9); border-radius: calc(var(--u) * 11); background: var(--ok-soft); color: var(--ok); font-size: calc(var(--u) * 11.5); font-weight: 600; white-space: nowrap; }
.scr-integrations .ig-live i { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.scr-integrations .ig-flow { padding: calc(var(--u) * 14) calc(var(--u) * 20) calc(var(--u) * 18); flex: 0 0 auto; }
.scr-integrations .ig-flow .card-h { margin-bottom: calc(var(--u) * 14); }
.scr-integrations .ig-flow .card-h .h4 { flex: 0 0 auto; }
.scr-integrations .ig-chain { display: flex; align-items: center; }
.scr-integrations .ig-node { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 2); padding: calc(var(--u) * 12) calc(var(--u) * 14); border: 1px solid var(--line); border-radius: calc(var(--u) * 12); background: var(--sur2); }
.scr-integrations .ig-node > .row { margin-bottom: calc(var(--u) * 8); }
.scr-integrations .ig-node .sb { font-size: calc(var(--u) * 13.5); }
.scr-integrations .ig-ni { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: calc(var(--u) * 8); }
.scr-integrations .ig-ni .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.scr-integrations .ig-ni.t1 { background: rgba(43, 196, 156, .14); color: #5fd9b6; } .scr-integrations .ig-ni.t2 { background: rgba(139, 139, 240, .16); color: #a7a7f5; }
.scr-integrations .ig-ni.t3 { background: rgba(242, 182, 50, .14); color: #f2c65a; } .scr-integrations .ig-ni.t4 { background: rgba(79, 179, 240, .15); color: #79c4f3; }
.scr-integrations .ig-ni.t5 { background: rgba(240, 117, 151, .15); color: #f493ae; } .scr-integrations .ig-ni.t6 { background: rgba(164, 171, 182, .14); color: #c3c8d0; }
.scr-integrations .ig-on { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); font-size: calc(var(--u) * 11); font-weight: 600; color: var(--ok); white-space: nowrap; }
.scr-integrations .ig-on .dot { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.scr-integrations .ig-rate { margin-top: calc(var(--u) * 6); font-family: var(--mono); font-size: calc(var(--u) * 11.5); color: var(--tx2); white-space: nowrap; }
.scr-integrations .ig-link { flex: 0 0 calc(var(--u) * 64); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); }
.scr-integrations .ig-link svg { width: calc(var(--u) * 64); height: calc(var(--u) * 28); overflow: visible; }
[dir="rtl"] .scr-integrations .ig-link svg { transform: scaleX(-1); }
.scr-integrations .ig-ln { fill: none; stroke: var(--acc); stroke-width: 1.7; stroke-dasharray: 4 6; stroke-linecap: round; }
.scr-integrations .ig-ln.b { stroke: var(--s2); }
.scr-integrations .ig-hd { fill: none; stroke: var(--acc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.scr-integrations .ig-hd.b { stroke: var(--s2); }
.in .scr-integrations .ig-ln { animation: ig-flow .8s linear 8 both; }
.in .scr-integrations .ig-ln.b { animation-duration: 1s; animation-iteration-count: 6; }
@keyframes ig-flow { from { stroke-dashoffset: 10; } to { stroke-dashoffset: 0; } }
.scr-integrations .ig-lat { font-family: var(--mono); font-size: calc(var(--u) * 10.5); color: var(--tx3); white-space: nowrap; }
.scr-integrations .ig-bot { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 470); gap: calc(var(--u) * 16); flex: 1 1 auto; min-height: 0; }
.scr-integrations .ig-evc, .scr-integrations .ig-con { padding: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.scr-integrations .ig-ch { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 46); flex: 0 0 auto; padding: 0 calc(var(--u) * 12) 0 calc(var(--u) * 16); border-bottom: 1px solid var(--line); }
.scr-integrations .ig-ch .chip { height: calc(var(--u) * 28); }
.scr-integrations .ig-ch .chip .ic:last-child { width: calc(var(--u) * 13); height: calc(var(--u) * 13); color: var(--tx3); }
.scr-integrations .ig-evc .tbl { flex: 1 1 auto; }
.scr-integrations .ig-evc .tr { grid-template-columns: calc(var(--u) * 70) minmax(0, 1fr) calc(var(--u) * 196) calc(var(--u) * 136) calc(var(--u) * 60); gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 16); min-height: calc(var(--u) * 36); }
.scr-integrations .ig-evc .tr.th { min-height: calc(var(--u) * 32); }
.scr-integrations .ig-evc .tr.ig-sel { background: var(--warn-soft); }
.scr-integrations .ig-mono { font-family: var(--mono); font-size: calc(var(--u) * 12); }
.scr-integrations .ig-ev { font-family: var(--mono); font-size: calc(var(--u) * 12.5); color: var(--tx); }
.scr-integrations .ig-flowc { display: flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 12.5); color: var(--tx2); }
.scr-integrations .ig-flowc .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); color: var(--tx3); }
.scr-integrations .ig-foot { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 40); flex: 0 0 auto; padding: 0 calc(var(--u) * 16); border-top: 1px solid var(--line); }
.scr-integrations .ig-more { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 12.5); font-weight: 600; color: var(--acc-tx); white-space: nowrap; }
.scr-integrations .ig-more .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.scr-integrations .ig-ci { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: calc(var(--u) * 7); background: var(--line2); color: var(--tx2); }
.scr-integrations .ig-ci .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.scr-integrations .ig-req { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 12) calc(var(--u) * 16); flex: 0 0 auto; }
.scr-integrations .ig-url { flex: 1 1 auto; min-width: 0; height: calc(var(--u) * 34); display: flex; align-items: center; gap: calc(var(--u) * 10); border: 1px solid var(--line); border-radius: calc(var(--u) * 8); background: var(--bg); overflow: hidden; }
.scr-integrations .ig-m { height: 100%; display: inline-flex; align-items: center; padding: 0 calc(var(--u) * 10); background: var(--acc-soft); color: var(--acc-tx); font: 700 calc(var(--u) * 12)/1 var(--mono); border-inline-end: 1px solid var(--line); }
.scr-integrations .ig-path { font-family: var(--mono); font-size: calc(var(--u) * 12.5); color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-integrations .ig-send { height: calc(var(--u) * 34); }
.scr-integrations .ig-send .ic { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.scr-integrations .ig-ptr { top: calc(var(--u) * 34); inset-inline-end: calc(var(--u) * 12); }
[dir="rtl"] .scr-integrations .ig-ptr { inset-inline-end: calc(var(--u) * 86); }
.in .scr-integrations .ig-ptr { animation: ig-ptr 1.2s cubic-bezier(.3, .7, .2, 1) .6s both, ig-click .25s ease 1.25s both; }
@keyframes ig-ptr { from { opacity: 0; transform: translate(calc(var(--u) * -90), calc(var(--u) * 70)); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes ig-click { 50% { scale: .82; } }
.scr-integrations .ig-meta { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: 0 calc(var(--u) * 16) calc(var(--u) * 10); flex: 0 0 auto; border-bottom: 1px solid var(--line); }
.scr-integrations .ig-200 { display: inline-flex; align-items: center; gap: calc(var(--u) * 12); color: var(--tx2); }
.scr-integrations .ig-200 .bd .dot { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.scr-integrations .ig-meta .seg span { height: calc(var(--u) * 24); font-size: calc(var(--u) * 12); }
.scr-integrations .ig-code { flex: 1 1 auto; padding: calc(var(--u) * 10) 0; background: var(--bg); font-family: var(--mono); font-size: calc(var(--u) * 12); line-height: calc(var(--u) * 18); color: var(--tx2); overflow: hidden; text-align: start; }
.scr-integrations .ig-l { display: flex; white-space: pre; }
.scr-integrations .ig-gut { width: calc(var(--u) * 34); flex: 0 0 auto; padding-inline-end: calc(var(--u) * 12); text-align: end; color: var(--tx3); opacity: .6; }
.in .scr-integrations .ig-code .a-type { animation-name: scr-type; animation-duration: .9s; }
.scr-integrations .jk { color: #8fb4ff; } .scr-integrations .js { color: #5fd9b6; } .scr-integrations .jn { color: #f2b632; } .scr-integrations .jp { color: #7d8592; }
.scr-integrations .num { white-space: nowrap; }

/* ── 5. residency (a dark panel) ── */
.scr-residency { box-sizing: border-box; height: calc(var(--u) * 420); display: flex; flex-direction: column; padding: calc(var(--u) * 20) calc(var(--u) * 24) 0; background: var(--sur); }
.scr-residency .rs-h { display: flex; align-items: center; gap: calc(var(--u) * 12); padding-bottom: calc(var(--u) * 14); border-bottom: 1px solid var(--line); }
.scr-residency .rs-h .xs { margin-top: calc(var(--u) * 2); }
.scr-residency .rs-ico { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: calc(var(--u) * 11); background: var(--acc-soft); color: var(--acc-tx); flex: 0 0 auto; }
.scr-residency .rs-ico .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.scr-residency .rs-row { display: grid; grid-template-columns: calc(var(--u) * 38) minmax(0, 1fr) calc(var(--u) * 18) calc(var(--u) * 196); align-items: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 13) 0; border-bottom: 1px solid var(--line2); }
.scr-residency .rs-code { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 38); height: calc(var(--u) * 38); border-radius: calc(var(--u) * 10); border: 1px solid var(--line); background: var(--sur2); font: 700 calc(var(--u) * 12.5)/1 var(--mono); color: var(--tx); letter-spacing: .5px; }
.scr-residency .rs-m { display: flex; flex-direction: column; gap: calc(var(--u) * 3); min-width: 0; }
.scr-residency .rs-enc { display: flex; align-items: center; gap: calc(var(--u) * 5); white-space: nowrap; }
.scr-residency .rs-enc .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); color: var(--ok); }
.scr-residency .rs-arrow { display: inline-flex; color: var(--tx3); }
.scr-residency .rs-arrow .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.scr-residency .rs-d { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 5); min-width: 0; }
.scr-residency .rs-d .sm { white-space: nowrap; color: var(--tx); font-weight: 500; }
.scr-residency .rs-reg { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 21); padding: 0 calc(var(--u) * 7); border-radius: calc(var(--u) * 6); background: var(--acc-soft); color: var(--acc-tx); font: 600 calc(var(--u) * 11)/1 var(--mono); white-space: nowrap; }
.scr-residency .rs-reg .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.scr-residency .rs-f { margin-top: auto; display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 58); flex: 0 0 auto; border-top: 1px solid var(--line); }
.scr-residency .rs-ok { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%; background: var(--ok); color: #0b0d10; flex: 0 0 auto; }
.scr-residency .rs-ok .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); stroke-width: 3; }
.scr-residency .num { white-space: nowrap; }