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