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