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