/* Parallel service scopes; shared controls and the original detail tables remain native. */
#public-main #b-diagram-cloud-roles {
  --cr-bg:#fff;--cr-text:#183850;--cr-muted:#496278;--cr-blue:#3c79a8;--cr-line:#c7d7e5;
  --cr-device:#d8e8f5;--cr-top:#edf6fd;--cr-side:#acc6dc;--cr-face:#fafdff;
  --cr-shadow:#234e741c;--cr-orange:#a95119;
  --cr-pill-bg:#fff;--cr-pill-line:#bdd3ec;--cr-pill-active:#edf6fd;
  color:var(--cr-text);font-size:14px;line-height:1.65;font-weight:400;
}
html[data-theme="dark"] #public-main #b-diagram-cloud-roles {
  --cr-bg:#070b12;--cr-text:#e4effb;--cr-muted:#aec2d6;--cr-blue:#8dbbe3;--cr-line:#34516a;
  --cr-device:#24435c;--cr-top:#3a5f7b;--cr-side:#1a344d;--cr-face:#173247;
  --cr-shadow:#0004;--cr-orange:#ffbb88;
  --cr-pill-bg:#102337;--cr-pill-line:#345676;--cr-pill-active:#1c3855;
}
#public-main #b-diagram-cloud-roles * {box-sizing:border-box;min-width:0;}
#public-main #b-diagram-cloud-roles .cr-responsive :where(h4,p) {margin:0;font-weight:400;word-break:keep-all;}
#public-main #b-diagram-cloud-roles .cr-responsive {width:100%;margin-inline:auto;container:cloud-roles / inline-size;}
#public-main #b-diagram-cloud-roles .cr-map {position:relative;display:grid;grid-template-columns:130px minmax(0,1fr);gap:62px;align-items:center;max-width:760px;margin:30px auto 0;--cr-mobile:0;}
#public-main #b-diagram-cloud-roles .cr-wires {position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1;}
#public-main #b-diagram-cloud-roles .cr-wire {fill:none;stroke:var(--cr-blue);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;}
#public-main #b-diagram-cloud-roles .cr-wire--origin {stroke:var(--cr-muted);stroke-width:1.2;}
#public-main #b-diagram-cloud-roles .cr-wire--protect {stroke:var(--cr-orange);}
#public-main #b-diagram-cloud-roles .cr-current {position:relative;z-index:2;text-align:center;}
#public-main #b-diagram-cloud-roles .cr-current h4 {font-size:14px;line-height:1.6;font-weight:500;}
#public-main #b-diagram-cloud-roles .cr-current p {font-size:11px;line-height:1.7;color:var(--cr-muted);margin-top:4px;}
#public-main #b-diagram-cloud-roles .cr-current-art {position:relative;width:116px;height:142px;margin:22px auto 0;}
#public-main #b-diagram-cloud-roles .cr-depth::before {content:'';position:absolute;top:-6px;left:-1px;width:calc(100% + 7px);height:6px;clip-path:polygon(0 100%,12% 0,100% 0,88% 100%);background:linear-gradient(160deg,var(--cr-top),var(--cr-side));}
#public-main #b-diagram-cloud-roles .cr-depth::after {content:'';position:absolute;left:calc(100% - 1px);top:-6px;width:7px;height:calc(100% + 6px);clip-path:polygon(0 6px,100% 0,100% calc(100% - 6px),0 100%);background:var(--cr-side);}
#public-main #b-diagram-cloud-roles .cr-rack {position:absolute;left:2px;top:26px;width:58px;height:99px;border:1px solid var(--cr-blue);border-radius:3px;background:linear-gradient(120deg,var(--cr-top),var(--cr-device));padding:8px 6px;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:4px;box-shadow:0 6px 10px var(--cr-shadow);}
#public-main #b-diagram-cloud-roles .cr-rack > i {position:relative;border:1px solid var(--cr-blue);background:var(--cr-face);border-radius:1px;}
#public-main #b-diagram-cloud-roles .cr-rack > i::before {content:'';position:absolute;left:4px;top:4px;width:24px;height:4px;background:repeating-linear-gradient(90deg,var(--cr-blue) 0 1px,transparent 1px 3px);opacity:.65;}
#public-main #b-diagram-cloud-roles .cr-rack > i::after {content:'';position:absolute;right:3px;top:4px;width:2px;height:2px;border-radius:50%;background:var(--cr-orange);}
#public-main #b-diagram-cloud-roles .cr-current-cloud {position:absolute;right:0;top:0;width:52px;height:42px;color:var(--cr-blue);}
#public-main #b-diagram-cloud-roles .cr-current-cloud > svg {width:52px !important;height:42px !important;stroke-width:1.1;}
#public-main #b-diagram-cloud-roles .cr-current-window {position:absolute;right:0;bottom:6px;width:66px;height:42px;border:1px solid var(--cr-blue);border-radius:3px;background:linear-gradient(135deg,var(--cr-face),var(--cr-top));display:flex;align-items:center;justify-content:center;box-shadow:0 5px 9px var(--cr-shadow);}
#public-main #b-diagram-cloud-roles .cr-current-window > svg {width:24px !important;height:24px !important;stroke:var(--cr-blue);stroke-width:1.2;}
#public-main #b-diagram-cloud-roles .cr-origin-socket {position:absolute;right:-3px;top:calc(50% - 2.5px);width:5px;height:5px;border:1px solid var(--cr-muted);border-radius:50%;background:var(--cr-bg);}
#public-main #b-diagram-cloud-roles .cr-lanes {display:grid;gap:35px;position:relative;z-index:2;}
#public-main #b-diagram-cloud-roles .cr-lane {min-width:0;}
#public-main #b-diagram-cloud-roles .cv-route-select {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:240px;max-width:100%;min-height:62px;margin-inline:auto;padding:8px 14px;border:1px solid var(--cr-pill-line);border-radius:999px;background:var(--cr-pill-bg);color:var(--cr-text);font-family:inherit;}
#public-main #b-diagram-cloud-roles .cv-route-select small {font-size:11px;line-height:1.5;font-weight:400;color:var(--cr-muted);}
#public-main #b-diagram-cloud-roles .cv-route-select b {display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;line-height:1.6;font-weight:500;white-space:nowrap;}
#public-main #b-diagram-cloud-roles .cv-route-select b::before {content:'';display:block;width:5px;height:5px;flex-shrink:0;border-radius:50%;background:var(--cr-orange);box-shadow:0 0 0 4px color-mix(in srgb,var(--cr-orange) 8%,transparent);}
#public-main #b-diagram-cloud-roles .cv-route-select em {font-size:11px;line-height:1.6;font-weight:400;font-style:normal;color:var(--cr-orange);}
#public-main #b-diagram-cloud-roles .cv-route-select[aria-pressed="true"] {border-color:var(--cr-blue);background:var(--cr-pill-active);}
#public-main #b-diagram-cloud-roles .cv-route-select:hover {border-color:var(--cr-blue);}
#public-main #b-diagram-cloud-roles .cr-steps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:18px;}
#public-main #b-diagram-cloud-roles .cr-step {text-align:center;}
#public-main #b-diagram-cloud-roles .cr-step-art {position:relative;display:flex;align-items:center;justify-content:center;width:72px;max-width:100%;height:62px;margin-inline:auto;}
#public-main #b-diagram-cloud-roles .cr-step h4 {font-size:12px;line-height:1.6;font-weight:400;margin-top:9px;}
#public-main #b-diagram-cloud-roles .cr-board {position:relative;width:64px;height:46px;border:1px solid var(--cr-blue);border-radius:3px;background:linear-gradient(135deg,var(--cr-face),var(--cr-top));display:flex;align-items:center;justify-content:center;padding-top:7px;box-shadow:0 5px 9px var(--cr-shadow);}
#public-main #b-diagram-cloud-roles .cr-board::before {content:'';position:absolute;top:8px;left:0;right:0;border-top:1px solid var(--cr-line);}
#public-main #b-diagram-cloud-roles .cr-board::after {content:'';position:absolute;left:6px;top:3px;width:2px;height:2px;border-radius:50%;background:var(--cr-orange);box-shadow:5px 0 0 var(--cr-blue),10px 0 0 var(--cr-line);}
#public-main #b-diagram-cloud-roles .cr-board > svg {width:25px !important;height:25px !important;stroke:var(--cr-blue);stroke-width:1.2;}
#public-main #b-diagram-cloud-roles .cr-block {position:relative;width:62px;height:35px;transform:translateX(-3px);border:1px solid var(--cr-blue);border-radius:3px;background:linear-gradient(125deg,var(--cr-top),var(--cr-device));display:flex;align-items:center;justify-content:center;box-shadow:0 5px 9px var(--cr-shadow);}
#public-main #b-diagram-cloud-roles .cr-block > svg {width:29px !important;height:29px !important;stroke:var(--cr-blue);stroke-width:1.2;}
#public-main #b-diagram-cloud-roles .cr-document {position:relative;width:45px;height:55px;border:1px solid var(--cr-blue);border-radius:2px;background:linear-gradient(130deg,var(--cr-face),var(--cr-top));display:flex;align-items:center;justify-content:center;box-shadow:0 5px 9px var(--cr-shadow);}
#public-main #b-diagram-cloud-roles .cr-document::after {content:'';position:absolute;right:-1px;top:-1px;width:10px;height:10px;clip-path:polygon(0 0,100% 100%,0 100%);border-left:1px solid var(--cr-blue);border-bottom:1px solid var(--cr-blue);background:var(--cr-device);}
#public-main #b-diagram-cloud-roles .cr-document > svg {width:25px !important;height:25px !important;stroke:var(--cr-blue);stroke-width:1.2;}
#public-main #b-diagram-cloud-roles .cv-scene-detail {max-width:760px;min-height:68px;margin:24px auto 0;font-size:12px;line-height:1.85;color:var(--cr-muted);text-align:center;}
#public-main #b-diagram-cloud-roles .cv-scene-detail[hidden] {display:none;}
#public-main #b-diagram-cloud-roles[data-active="adopt"] .cr-wire--adopt,#public-main #b-diagram-cloud-roles[data-active="protect"] .cr-wire--protect {stroke-width:2;}
@container cloud-roles (max-width:620px) {
  #public-main #b-diagram-cloud-roles .cr-map {grid-template-columns:minmax(0,1fr);gap:40px;max-width:380px;margin-top:26px;padding-inline:24px;--cr-mobile:1;}
  #public-main #b-diagram-cloud-roles .cr-current-art {height:126px;margin-top:20px;}
  #public-main #b-diagram-cloud-roles .cr-rack {top:20px;height:94px;}
  #public-main #b-diagram-cloud-roles .cr-current-window {height:38px;}
  #public-main #b-diagram-cloud-roles .cr-origin-socket {right:auto;top:auto;bottom:-3px;left:calc(50% - 2.5px);}
  #public-main #b-diagram-cloud-roles .cr-lanes {gap:32px;}
  #public-main #b-diagram-cloud-roles .cv-route-select {width:240px;min-height:60px;padding:7px 10px;}
  #public-main #b-diagram-cloud-roles .cv-route-select b {font-size:12px;}
  #public-main #b-diagram-cloud-roles .cr-steps {gap:12px;margin-top:17px;}
  #public-main #b-diagram-cloud-roles .cr-step-art {width:62px;height:60px;}
  #public-main #b-diagram-cloud-roles .cr-step h4 {font-size:11px;}
  #public-main #b-diagram-cloud-roles .cr-board {width:57px;height:42px;}
  #public-main #b-diagram-cloud-roles .cr-block {width:53px;height:32px;}
  #public-main #b-diagram-cloud-roles .cv-scene-detail {max-width:380px;text-align:left;min-height:90px;margin-top:23px;}
}
#public-main #b-diagram-cloud-roles .cv-route-select {position:static;inset:auto;transform:none;text-align:center;}
#public-main #b-diagram-cloud-roles .cv-route-select small {margin:0;letter-spacing:0;display:block;}
#public-main #b-diagram-cloud-roles .cv-route-select b {color:inherit;letter-spacing:0;}
#public-main #b-diagram-cloud-roles .cv-route-select em {margin:0;}
#public-main #b-diagram-cloud-roles .cv-scene-panels {margin:0;max-width:none;min-height:0;}
#public-main #b-diagram-cloud-roles .cv-scene-detail {width:100%;}