/* Mugato interactive demo player
   Tour chrome follows the Mugato brand (Josefin Sans 700 caps for statements,
   Source Sans for explanation, square corners, beige containers, red structure,
   one yellow proof mark). The portal recreation keeps the product's own look. */

:root {
  --md-power: #252525;
  --md-beige: #F2F0DE;
  --md-yellow: #FFE987;
  --md-gray: #726E66;
  --md-red: #BF5959;
  --md-white: #FFFFFF;
  --md-beige-muted: #BFBBA9;
  --md-ink-faint: #A9A597;
  --md-hairline: #D6D2B8;
  --md-frame: #3A3935;

  --md-display: 'Josefin Sans', 'Century Gothic', 'Futura', sans-serif;
  --md-body: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', system-ui, sans-serif;

  /* Portal recreation. Montserrat matches the product UI; swap to var(--md-body) if you prefer. */
  --p-font: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --p-title: 'Josefin Sans', 'Century Gothic', sans-serif;
  --p-bg: #FAFAF8;
  --p-head: #F2F0DE;
  --p-th: #F1EFDF;
  --p-line: #E6E4D8;
  --p-text: #1E1E1E;
  --p-muted: #6E6B64;
  --p-select: #ECECEA;
  --p-green: #67B84A;
  --p-server: #A9C3F5;
  --p-server-line: #5079D6;
  --p-edge: #8C8C8C;
  --p-edge-blue: #3F6FE0;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--md-power); }
.md-root:fullscreen { width: 100vw; height: 100vh; }
body { overflow: hidden; -webkit-font-smoothing: antialiased; }

.md-root {
  position: relative; width: 100%; height: 100%;
  /* full screen: the player fills the screen and rescales */
  display: flex; flex-direction: column;
  background: var(--md-frame); color: var(--md-power);
  font-family: var(--md-body); overflow: hidden;
  outline: none;
}

/* ---------- Top bar ---------- */
.md-bar {
  position: relative; flex: 0 0 40px; height: 40px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 8px 0 14px; background: var(--md-power); color: var(--md-beige);
  z-index: 30;
}
.md-dots { flex: 0 0 auto; display: flex; gap: 8px; }
.md-dots i { display: block; width: 12px; height: 12px; border-radius: 50%; background: #E0605A; }
.md-dots i:nth-child(2) { background: #E6B84A; }
.md-dots i:nth-child(3) { background: #5DB55E; }
.md-bar__spacer { flex: 1 1 auto; }
.md-count {
  font: 600 11px/1 var(--md-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--md-beige-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.md-count b { color: var(--md-beige); font-weight: 600; }
.md-iconbtn {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--md-beige-muted); cursor: pointer; border-radius: 0;
}
.md-iconbtn:hover { color: var(--md-beige); background: rgba(242,240,222,.08); }
.md-cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 28px; padding: 0 14px;
  background: var(--md-beige); color: var(--md-power); text-decoration: none;
  font: 700 12px/1 var(--md-display); letter-spacing: .02em; text-transform: uppercase;
  padding-top: 2px; white-space: nowrap;
}
.md-cta:hover { background: var(--md-yellow); }
.md-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(242,240,222,.12); }
.md-progress i { display: block; height: 100%; width: 0; background: var(--md-red); transition: width .45s ease; }

/* ---------- Viewport, stage, screens ---------- */
.md-viewport { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--md-frame); }
.md-stage {
  position: absolute; left: 0; top: 0; width: 1280px; height: 696px;
  transform-origin: 0 0; background: var(--p-bg); overflow: hidden;
  transition: transform .6s cubic-bezier(.3,.7,.2,1);
}
.md-root.is-instant .md-stage { transition: none; }
.md-screen {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.md-screen.is-active { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }

/* ---------- Overlay: spotlight, beacon, tooltip ---------- */
.md-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.md-spot {
  position: absolute; border: 2px solid var(--md-beige);
  box-shadow: 0 0 0 9999px rgba(37,37,37,.5);
  opacity: 0; transition: opacity .3s ease;
}
.md-spot.is-on { opacity: 1; }

.md-beacon {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0;
  border: 3px solid var(--md-beige); border-radius: 50%; background: var(--md-red);
  cursor: pointer; pointer-events: auto; opacity: 0; transform: scale(.4);
  transition: opacity .25s ease, transform .25s ease;
}
.md-beacon.is-on { opacity: 1; transform: scale(1); }
.md-beacon::before, .md-beacon::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--md-red); animation: md-pulse 1.8s ease-out infinite;
}
.md-beacon::after { animation-delay: .9s; }
.md-beacon.is-nudge { animation: md-nudge .5s ease; }
@keyframes md-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes md-nudge { 0%,100% { transform: scale(1); } 30% { transform: scale(1.5); } 60% { transform: scale(.9); } }

.md-tip {
  position: absolute; left: 0; top: 0; width: 320px; max-width: calc(100% - 16px);
  background: var(--md-beige); color: var(--md-power); border: 1px solid var(--md-power);
  padding: 14px 18px 14px; pointer-events: auto;
  opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease;
}
.md-tip.is-on { opacity: 1; transform: none; }
.md-tip__label {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 600 11px/1 var(--md-body); letter-spacing: .12em; text-transform: uppercase; color: var(--md-gray);
  margin-bottom: 10px; font-variant-numeric: tabular-nums;
}
.md-tip__label b { color: var(--md-red); font-weight: 600; }
.md-tip__body p { margin: 0 0 8px; font: 400 15px/1.4 var(--md-body); text-wrap: pretty; }
.md-tip__body p:last-child { margin-bottom: 0; }
.md-tip mark, .md-modal mark {
  background: var(--md-yellow); color: var(--md-power); padding: 0 3px; margin: 0 -1px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.md-tip__action {
  display: flex; align-items: center; gap: 9px; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--md-hairline);
  font: 700 14px/1.3 var(--md-body);
}
.md-tip__action::before {
  content: ""; flex: 0 0 10px; height: 10px; border-radius: 50%; background: var(--md-red);
  box-shadow: 0 0 0 3px rgba(191,89,89,.22);
}
.md-tip__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 10px; }
.md-tip__nav:empty { display: none; }
.md-btn {
  border: 0; border-radius: 0; cursor: pointer; text-decoration: none;
  font: 700 13px/1 var(--md-display); letter-spacing: .02em; text-transform: uppercase;
  padding: 10px 16px 8px; background: var(--md-power); color: var(--md-beige);
  display: inline-flex; align-items: center; gap: 8px;
}
.md-btn:hover { background: #000; }
.md-btn--ghost {
  background: transparent; color: var(--md-gray); padding-left: 0; padding-right: 0;
  font: 600 11px/1 var(--md-body); letter-spacing: .12em;
}
.md-btn--ghost:hover { background: transparent; color: var(--md-power); }
.md-btn--ghost[disabled] { visibility: hidden; }
.md-tip__caret {
  position: absolute; width: 12px; height: 12px; background: var(--md-beige);
  border: 1px solid var(--md-power); transform: rotate(45deg);
}
.md-tip[data-side="right"] .md-tip__caret { left: -7px; border-top-color: transparent; border-right-color: transparent; }
.md-tip[data-side="left"] .md-tip__caret { right: -7px; border-bottom-color: transparent; border-left-color: transparent; }
.md-tip[data-side="bottom"] .md-tip__caret { top: -7px; border-bottom-color: transparent; border-right-color: transparent; }
.md-tip[data-side="top"] .md-tip__caret { bottom: -7px; border-top-color: transparent; border-left-color: transparent; }
.md-tip[data-side="center"] .md-tip__caret, .md-root.is-compact .md-tip__caret { display: none; }

/* ---------- Modal (intro / outro) ---------- */
.md-scrim {
  position: absolute; inset: 40px 0 0 0; background: rgba(37,37,37,.55); z-index: 20;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s;
}
.md-scrim.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.md-modal {
  position: absolute; z-index: 21; left: 50%; top: calc(50% + 20px);
  width: min(580px, calc(100% - 32px)); max-height: calc(100% - 64px); overflow: hidden auto;
  transform: translate(-50%, -46%); opacity: 0; visibility: hidden;
  background: var(--md-white); color: var(--md-power); padding: 38px 40px 30px;
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.md-modal.is-on { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition: opacity .35s ease, transform .35s ease, visibility 0s; }
.md-modal__symbol { position: absolute; right: -78px; top: -78px; width: 230px; height: 230px; pointer-events: none; }
.md-modal__inner { position: relative; }
.md-modal h2 {
  margin: 0 0 16px; max-width: 15ch; font: 700 34px/1.12 var(--md-display);
  letter-spacing: .01em; text-transform: uppercase; color: var(--md-power); text-wrap: balance;
}
.md-modal h2 mark { padding: 4px 6px 0; }
.md-modal p { margin: 0 0 12px; max-width: 46ch; font: 400 17px/1.45 var(--md-body); color: var(--md-power); text-wrap: pretty; }
.md-modal p.md-modal__muted { color: #454338; }
.md-modal ul { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 9px; }
.md-modal li { position: relative; padding-left: 22px; font: 400 16px/1.4 var(--md-body); color: var(--md-power); }
.md-modal li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; background: var(--md-red); }
.md-modal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 22px; }
.md-modal .md-btn { background: var(--md-power); color: var(--md-beige); padding: 14px 22px 12px; font-size: 14px; }
.md-modal .md-btn:hover { background: #000; }
.md-modal .md-btn--outline { background: transparent; color: var(--md-power); box-shadow: inset 0 0 0 1px var(--md-power); }
.md-modal .md-btn--outline:hover { background: var(--md-beige); color: var(--md-power); }
.md-modal .md-btn--text { background: transparent; color: var(--md-gray); padding-left: 4px; padding-right: 4px; font: 600 11px/1 var(--md-body); letter-spacing: .12em; }
.md-modal .md-btn--text:hover { background: transparent; color: var(--md-power); }
.md-modal__meta {
  margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--md-hairline);
  font: 600 11px/1 var(--md-body); letter-spacing: .12em; text-transform: uppercase; color: var(--md-gray);
}

/* ---------- Compact (phone) layout: tooltip docks under the stage ---------- */
.md-dock { display: none; }
.md-root.is-compact .md-dock {
  display: block; flex: 0 0 auto; position: relative; z-index: 15;
  background: var(--md-beige); border-top: 1px solid var(--md-power);
}
.md-root.is-compact .md-tip {
  position: static; width: auto; max-width: none; border: 0; padding: 14px 16px 14px;
  transform: none; min-height: 196px; display: flex; flex-direction: column;
}
.md-root.is-compact .md-tip__nav { margin-top: auto; padding-top: 12px; }
.md-root.is-compact .md-tip__body p { font-size: 15px; }
.md-root.is-compact .md-modal {
  left: 0; right: 0; top: 40px; bottom: 0; width: auto; max-height: none;
  transform: translateY(12px); padding: 26px 20px 22px;
}
.md-root.is-compact .md-modal.is-on { transform: none; }
.md-root.is-compact .md-modal h2 { font-size: 26px; }
.md-root.is-compact .md-modal p { font-size: 15px; }
.md-root.is-compact .md-modal li { font-size: 15px; }
.md-root.is-compact .md-modal__symbol { width: 170px; height: 170px; right: -60px; top: -60px; }
.md-root.is-compact .md-scrim { bottom: 0; }
.md-root.is-narrow .md-bar { gap: 6px; }
.md-root.is-narrow .md-dots { gap: 6px; }
.md-root.is-narrow .md-dots i { width: 10px; height: 10px; }

/* ---------- Focus and motion ---------- */
.md-root :focus-visible { outline: 2px solid var(--md-yellow); outline-offset: 2px; }
.md-modal :focus-visible, .md-tip :focus-visible { outline-color: var(--md-power); }
.md-hot { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .md-root *, .md-root *::before, .md-root *::after { transition-duration: 0s !important; animation: none !important; }
}

/* =====================================================================
   Portal recreation (stage coordinates: 1280 x 696)
   Sizes are measured from the portal at 1280 px wide.
   ===================================================================== */
.p { position: absolute; inset: 0; font-family: var(--p-font); color: var(--p-text); background: var(--p-bg); font-size: 9.5px; }
.p-head {
  position: absolute; left: 0; right: 0; top: 0; height: 36px; background: var(--p-head);
  display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 8px;
}
.p-head__logo { height: 18.5px; width: auto; display: block; }
.p-head__right { display: flex; align-items: center; gap: 6px; font: 400 11px/1 var(--p-font); color: #2a2a2a; }
.p-head__right svg { display: block; }
.p-head__right .gap { width: 4px; }

/* Tables */
.p-table { border-collapse: collapse; width: 100%; table-layout: fixed; background: #fff; }
.p-table th {
  background: var(--p-th); text-align: left; font: 700 9.4px/1 var(--p-font); color: #1b1b1b;
  padding: 0 7px; height: 21.5px; white-space: nowrap; position: relative;
}
.p-table th .p-sort { position: absolute; right: 9px; top: 7px; opacity: .5; }
.p-table td {
  padding: 0 7px; height: 23px; border-top: 1px solid var(--p-line); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font: 400 9.5px/1 var(--p-font); color: #3a3a3a;
}
.p-table td.b { font-weight: 700; color: #151515; }
.p-table tbody tr:hover td { background: #F6F6F3; }
.p-table tr.is-selected td { background: var(--p-select); }
.p-table tr.md-hot td { background: #F7F5E8; box-shadow: inset 0 1px 0 #E2DFC9, inset 0 -1px 0 #E2DFC9; }
.p-table--tall td { height: 24.2px; }
.p-table--compact td { height: 22.3px; }
.p-table .p-icon { display: inline-block; vertical-align: middle; margin-right: 6px; }
.p-scrollbar { position: absolute; width: 4px; background: #8d8d8d; border-radius: 2px; }

/* Application services list */
.p-apps__title { position: absolute; left: 15px; top: 47px; height: 24px; display: flex; align-items: center; gap: 6px; }
.p-apps__title h1 { margin: 0; font: 400 19.2px/1 var(--p-title); color: #232323; padding-top: 4px; }
.p-btn-small { font: 400 9.9px/1 var(--p-font); border: 1px solid #5a5a5a; border-radius: 4px; background: #fff; padding: 6px 6px 5px; color: #222; }
.p-search { position: absolute; left: 1044px; top: 46px; height: 25px; display: flex; align-items: center; gap: 9px; font: 400 9.5px/1 var(--p-font); color: #444; }
.p-search i { display: block; width: 182px; height: 25px; background: #fff; border: 1px solid #ddd; border-radius: 3px; }
.p-apps__table { position: absolute; left: 15px; width: 1252px; top: 79px; }

/* Application service detail */
.p-zone { position: absolute; left: 960px; right: 0; top: 36px; bottom: 0; background: #F1EFE0; }
.p-detail__title { position: absolute; left: 132px; top: 68px; display: flex; align-items: flex-end; gap: 10px; }
.p-detail__title h1 { margin: 0; font: 700 48px/1 var(--p-title); color: #222; text-transform: uppercase; }
.p-detail__title svg { margin-bottom: 7px; }
.p-detail__sum {
  position: absolute; left: 132px; top: 183px; display: flex; align-items: center; gap: 10px;
  font: 400 21.9px/1 var(--p-title); color: #6E6B64; text-transform: uppercase;
}
.p-detail__sum [data-anchor="map-icon"] { display: inline-flex; padding: 6px; margin: -6px; margin-top: -3px; }
.p-tabs { position: absolute; left: 132px; width: 1036px; top: 262px; display: grid; grid-template-columns: repeat(4, 1fr); }
.p-tab { font: 700 16.5px/1 var(--p-font); color: #7a7670; text-transform: uppercase; transition: color .3s; }
.p-tab.is-on { color: #111; }
.p-tab .plus { display: none; }
.p-tab.is-on .plus { display: inline; }
.p-pane { position: absolute; left: 132px; width: 1017px; top: 300px; transition: opacity .3s ease; }
.p-pane--split { top: 294px; width: 1017px; display: grid; grid-template-columns: 504px 510px; gap: 0 3px; }
.p-pane.is-hidden { opacity: 0; pointer-events: none; }
.p-scrollbox { position: relative; max-height: 362px; overflow: hidden; }

/* Dependency map */
.p-canvas { position: absolute; left: 25px; top: 50px; width: 1023px; height: 634px; border: 1px solid #444; background: #FAFAF9; overflow: hidden; }
.p-map { position: absolute; left: 0; top: 0; width: 1023px; height: 634px; overflow: visible; }
.p-map text { font-family: Arial, 'Helvetica Neue', sans-serif; font-size: 9.3px; fill: #222; pointer-events: none; }
.p-map .lbl-dark { fill: #EDEDED; }
.p-node { transition: transform .9s cubic-bezier(.3,.7,.2,1), opacity .6s ease; }
.p-node.is-hidden { opacity: 0; }
.p-node--server rect { fill: var(--p-server); stroke: var(--p-server-line); stroke-width: 1; transition: all .6s ease; }
.p-node--server text { font-size: 10.5px; transition: font-size .6s ease; }
.p-node--focus text { font-weight: 700; }
.p-edges path { fill: none; }
.p-edges .e { stroke: var(--p-edge); }
.p-edges .e--blue { stroke: var(--p-edge-blue); }
.p-edges .h { fill: var(--p-edge); }
.p-edges .h--blue { fill: var(--p-edge-blue); }
.p-edges { transition: opacity .25s ease; }
.p-edges.is-out { opacity: 0; }
.p-edge-hit { stroke: transparent; stroke-width: 20; fill: none; pointer-events: stroke; }
.p-ports { position: absolute; left: 513px; top: 327px; min-width: 66px; white-space: nowrap; background: #fff; border: 1px solid #cfcfcf; box-shadow: 1px 2px 4px rgba(0,0,0,.18); font: 400 10px/1 var(--p-font); color: #222; transition: opacity .3s; }
.p-ports div { padding: 9px 12px; }
.p-ports div + div { border-top: 1px solid #e6e6e6; }
.p-ports.is-hidden { opacity: 0; }
.p-mapnav { position: absolute; }
.p-panel > * { position: absolute; left: 1068px; width: 190px; }
.p-lbl { font: 400 9.5px/1 var(--p-font); color: #333; }
.p-select {
  height: 28px; background: #fff; border: 1px solid #e2e2e2; border-radius: 4px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 10px 0 11px; font: 400 12.5px/1 var(--p-font); color: #222;
}
.p-toggle { display: flex; align-items: center; gap: 6px; }
.p-switch {
  position: relative; width: 40px; height: 25px; border: 1px solid #cfc9a5; border-radius: 4px; background: #FDE98C;
  font: 400 10px/23px var(--p-font); padding-left: 7px; color: #222; transition: background .3s;
}
.p-switch::after { content: ""; position: absolute; right: 1px; top: 1px; width: 11px; height: 21px; background: #fff; border: 1px solid #cfc9a5; border-radius: 3px; transition: right .3s, left .3s; }
.p-switch.is-off { background: #fff; padding-left: 15px; }
.p-switch.is-off::after { right: auto; left: 1px; }
.p-date { display: flex; justify-content: space-between; font: 400 8.6px/1 var(--p-font); color: #444; }
.p-range { height: 9px; border: 1px solid #dcdcdc; background: #fff; border-radius: 5px; }
.p-range i { position: absolute; top: -3px; width: 12px; height: 13px; background: #F4F3EE; border: 1px solid #c8c8c8; border-radius: 2px; }
.p-range b { position: absolute; top: 1px; height: 5px; background: #FDE98C; }
.p-btn-cal { width: auto !important; padding: 8px 9px 7px; background: #F9EEB9; border: 1px solid #555; border-radius: 5px; font: 400 12.5px/1 var(--p-font); color: #222; }
.p-collapse { position: absolute; left: 1068px; top: 648px; padding: 7px 10px 6px; background: #F9EEB9; border: 1px solid #555; border-radius: 5px; font: 400 12.5px/1 var(--p-font); color: #222; }

/* Communication timeline */
.p-tl-scrim { position: absolute; inset: 0; background: rgba(60,60,60,.55); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s linear .35s; }
.p-tl {
  position: absolute; left: 13px; top: 13px; width: 1253px; height: 672px; background: #fff; border-radius: 6px;
  opacity: 0; visibility: hidden; transform: translateY(10px); overflow: hidden;
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.p-tl.is-on, .p-tl-scrim.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .35s ease, visibility 0s; }
.p-tl__head { height: 49px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 13px; border-bottom: 1px solid #e9e9e9; }
.p-tl__head h2 { margin: 0; font: 700 15.4px/1 var(--p-title); color: #222; text-transform: uppercase; padding-top: 3px; }
.p-tl__svg { position: absolute; left: 0; top: 0; width: 1253px; height: 672px; }
.p-tl__svg text { font-family: var(--p-font); font-size: 9px; fill: #555; }
.p-tl__svg .yr { fill: #444; }
.p-tl__svg .lane-lbl { font-size: 8.7px; fill: #333; }
.p-tl__lane { fill: none; stroke-width: 7.4; stroke-linecap: butt; }
.p-tl__lane--a { stroke: #7C95D1; }
.p-tl__lane--b { stroke: #85B6D2; }

/* =====================================================================
   Kit v1.1 screens: home, status, compute, service detail, service map.
   Measured in the portal at 1600 x 870 and scaled by 0.8 to the stage.
   ===================================================================== */
.p-zone2 { position: absolute; left: 960px; right: 0; top: 36px; bottom: 0; background: #F2F0DE; }

/* Home: deployment progress status */
.p-home__symbol { position: absolute; left: 273.9px; top: -18.1px; width: 732.2px; height: 732.2px; opacity: .2; }
.p-home__card { position: absolute; left: 25.6px; top: 52px; width: 1036.8px; height: 288px; box-sizing: border-box; background: #fff; border: 1px solid #DEE2E6; border-radius: 4.8px; overflow: hidden; }
.p-home__bar { position: relative; height: 41.6px; padding-left: 16px; background: rgba(255,233,135,.6); font: 400 12.8px/41.6px var(--p-title); color: #252525; }
.p-home__chev { position: absolute; right: 16px; top: 12.8px; width: 16px; height: 16px; transform: rotate(180deg); line-height: 0; }
.p-home__ring, .p-home__inner { position: absolute; }
.p-home__inner { display: flex; align-items: center; justify-content: center; }
.p-home__upgrade { margin: 3.1px 0 0 1.9px; font: 700 12.8px/19.2px Arial, 'Helvetica Neue', sans-serif; color: #252525; text-align: center; }
.p-home__pct { margin: 3px 0 0 4.9px; font: 700 24.3px/1 Arial, 'Helvetica Neue', sans-serif; color: #252525; }
.p-home__inner svg { display: block; }
.p-home__col { position: absolute; }
.p-home__arrows { position: absolute; width: 32px; height: 13px; }
.p-home__arrows i { position: absolute; top: 0; width: 12.8px; height: 12.8px; box-sizing: border-box; border-right: 1.6px solid #000; border-bottom: 1.6px solid #000; transform: rotate(-45deg); }
.p-home__label { position: absolute; text-align: center; font: 600 16px/24px var(--p-font); color: #252525; }
.p-home__hr { position: absolute; height: 1px; background: rgba(33,37,41,.25); }
.p-home__media { position: absolute; font: 400 15.2px/24.4px var(--p-font); color: #212529; }
.p-home__media span { position: absolute; left: 168.6px; top: 4.6px; line-height: 0; }

/* Status: installation size */
.p-status__title { position: absolute; left: 121.6px; top: 191.2px; margin: 0; font: 700 48.6px/58.4px var(--p-title); color: #252525; text-transform: uppercase; white-space: nowrap; }
.p-status__found { position: absolute; left: 121.6px; top: 286px; font: 600 21.8px/21.6px var(--p-title); color: #726E66; text-transform: uppercase; white-space: nowrap; }
.p-status__h { position: absolute; font: 700 16.6px/19.95px var(--p-title); color: #726E66; text-transform: uppercase; white-space: nowrap; }
.p-status__ico { display: inline-block; vertical-align: -1.5px; line-height: 0; }
.p-status__v { position: absolute; margin-top: 1.2px; font: 500 14.1px var(--p-title); color: #212529; text-transform: uppercase; white-space: nowrap; }

/* Compute instances list */
.p-cmp__title { position: absolute; left: 16px; top: 48px; font: 500 19.2px/23px var(--p-title); color: #212529; white-space: nowrap; }
.p-cmp__title b { font-weight: 500; }
.p-cmp__pie { position: absolute; left: 220.1px; top: 56px; line-height: 0; }
.p-cmp__search { position: absolute; left: 1054px; top: 45.4px; height: 24.8px; font: 400 9.6px/24.8px var(--p-font); color: #212529; }
.p-cmp__search i { position: absolute; left: 40.4px; top: 0; width: 169.6px; height: 24.8px; box-sizing: border-box; background: #fff; border: 1px solid #DEE2E6; border-radius: 3.2px; }
.p-cmp__head { position: absolute; left: 16px; top: 79px; width: 1248px; overflow: hidden; }
.p-cmp__body { position: absolute; left: 16px; top: 111.8px; width: 1244px; height: 567.2px; overflow: hidden; transition: opacity .2s ease; }
.p-cmp__body.is-out { opacity: .1; }
.p-cmp__table { border-collapse: collapse; table-layout: fixed; background: #fff; }
.p-cmp__table th, .p-cmp__table td {
  box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
  font: 400 9.6px/9.6px var(--p-font); color: #000;
}
.p-cmp__table thead th {
  position: relative; height: 32.8px; padding: 6.4px 24px 6.4px 6.4px; vertical-align: bottom; white-space: normal;
  background: #F2F0DE; font-weight: 700; border-bottom: 1px solid #A6B5CC;
}
.p-cmp__table thead th { overflow: visible; text-overflow: clip; }
.p-cmp__table thead th i { position: absolute; bottom: 8.6px; font: 700 9.6px/9.6px var(--p-font); font-style: normal; opacity: .3; }
.p-cmp__table thead th i.up { right: 9.6px; }
.p-cmp__table thead th i.dn { right: 4.8px; }
.p-cmp__table thead th.is-asc i.up { opacity: 1; }
.p-cmp__table tbody th, .p-cmp__table tbody td { height: 23.2px; padding: 6.4px 4px 0 6.4px; vertical-align: top; border-bottom: 1px solid #DEE2E6; background: #fff; }
.p-cmp__table tbody th, .p-cmp__table td.b { font-weight: 700; }
.p-cmp__table td.p-cmp__os { position: relative; padding-left: 24.8px; }
.p-cmp__table .p-os { position: absolute; left: 1.6px; top: 1.6px; }
.p-cmp__thumb { left: 1260.5px; width: 3.5px; transition: top .3s ease; }

/* Application service detail */
.p-svc__title { position: absolute; left: 121.6px; top: 65.9px; margin: 0; font: 700 48.6px/58.4px var(--p-title); color: #252525; text-transform: uppercase; white-space: nowrap; }
.p-svc__pencil { display: inline-block; margin-left: 9px; line-height: 0; vertical-align: 1px; }
.p-svc__sum { position: absolute; left: 121.6px; top: 181.9px; display: flex; align-items: center; font: 600 21.8px/26.1px var(--p-title); color: #726E66; text-transform: uppercase; white-space: nowrap; }
.p-svc__map { display: inline-flex; margin: -4px 0 0 4px; padding: 5px; }
.p-svc__tab { position: absolute; top: 264.8px; font: 700 16.6px/20px var(--p-font); color: #726E66; text-transform: uppercase; white-space: nowrap; }
.p-svc__tab.is-on { color: #000; }
.p-svc__table { position: absolute; left: 121.6px; top: 303.2px; width: 1036.8px; }
.p-svc__table .p-cmp__table { width: 100%; }
.p-cmp__table--svc thead th { height: 23.2px; }
.p-cmp__table--svc tbody th, .p-cmp__table--svc tbody td { height: 25.1px; }
.p-svc__view { line-height: 0 !important; padding-top: 7px !important; }
.p-svc__view svg { display: inline-block; margin-right: 5px; }

/* Service dependency map */
.p-smap__canvas { position: absolute; left: 25.6px; top: 48.8px; width: 1020.8px; height: 632px; box-sizing: border-box; border: 1px solid #000; overflow: hidden; }
.p-smap__svg { position: absolute; left: -.2px; top: -.2px; width: 1019.2px; height: 630.4px; overflow: visible; }
.p-smap__svg text { font-family: Arial, 'Helvetica Neue', sans-serif; fill: #343434; pointer-events: none; }
.p-smap__srv rect { fill: #97C2FC; stroke: #2B7CE9; stroke-width: .8; }
.p-smap__bubble circle { stroke: rgba(0,0,0,.18); stroke-width: .7; }
.p-smap__panel > * { position: absolute; left: 1065.6px; width: 188.8px; }
.p-smap__panel .p-smap__lbl { width: auto; font: 400 9.6px/14.4px var(--p-font); color: #212529; white-space: nowrap; }
.p-smap__select, .p-smap__drop { height: 30.4px; box-sizing: border-box; background: #fff; border: 1px solid #DEE2E6; border-radius: 4.8px; font: 400 12.8px/28.4px var(--p-font); color: #212529; padding-left: 9.6px; white-space: nowrap; }
.p-smap__drop { border-color: #CED4DA; padding-left: 13.6px; }
.p-smap__select span { position: absolute; right: 9.6px; top: 9.4px; line-height: 0; }
.p-smap__drop span { position: absolute; right: 12px; top: 12.5px; border-top: 3.8px solid #212529; border-left: 3.8px solid transparent; border-right: 3.8px solid transparent; }
.p-smap__panel .p-smap__toggle { width: 40px; height: 24.8px; box-sizing: border-box; overflow: hidden; border: 1px solid rgba(0,0,0,.15); border-radius: 3.2px; background: #F8F9FA; }
.p-smap__toggle span { position: absolute; top: 0; width: 38.4px; height: 23.2px; font: 400 11.2px/23.2px var(--p-font); color: #000; transition: left .3s ease; }
.p-smap__toggle .on { left: -38.4px; background: #FFE987; color: #252525; padding-left: 7.4px; box-sizing: border-box; }
.p-smap__toggle .off { left: 0; padding-left: 13.4px; box-sizing: border-box; }
.p-smap__toggle i { position: absolute; top: 0; left: -6.4px; width: 14.4px; height: 23.2px; box-sizing: border-box; background: #fff; border: 1px solid rgba(0,0,0,.15); border-width: 0 1px; transition: left .3s ease; }
.p-smap__toggle.is-on { border-color: #E2CF79; }
.p-smap__toggle.is-on .on { left: 0; }
.p-smap__toggle.is-on .off { left: 38.4px; }
.p-smap__toggle.is-on i { left: 24.8px; }
.p-smap__dates { display: flex; justify-content: space-between; font: 400 8.8px/13.2px var(--p-font); color: #212529; }
.p-smap__slider { height: 7.7px; box-sizing: border-box; background: #fff; border: 1px solid #C5C5C5; border-radius: 2.4px; }
.p-smap__slider b { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(255,233,135,.6); }
.p-smap__slider i { position: absolute; top: -2.9px; width: 11.5px; height: 11.5px; box-sizing: border-box; background: #F6F6F6; border: 1px solid #C5C5C5; border-radius: 2.4px; }
.p-smap__slider.is-at-end b { left: auto; width: 0; }
.p-smap__slider.is-at-end i:first-of-type { left: auto !important; right: -5.8px; }
.p-smap__panel .p-smap__source { width: 96px; height: 24.8px; box-sizing: border-box; overflow: hidden; background: #6C757D; border: 1px solid #6C757D; border-radius: 3.2px; font: 400 11.2px/22.8px var(--p-font); color: #fff; text-align: center; padding-left: 6.4px; }
.p-smap__source i { position: absolute; left: -6.4px; top: 0; width: 14.4px; height: 22.8px; background: #fff; }
.p-smap__panel .p-smap__btn { width: auto; height: 30.4px; box-sizing: border-box; padding: 0 9.6px; background: #FCF1BD; border: 1px solid #252525; border-radius: 4.8px; font: 400 12.8px/28.4px var(--p-font); color: #252525; white-space: nowrap; }
.p-smap__ports { position: absolute; min-width: 62px; background: #fff; border: 1px solid #c9c9c9; border-radius: 2.4px; box-shadow: 2px 3px 7px rgba(0,0,0,.18); font: 400 9.6px/1 var(--p-font); color: #212529; transition: opacity .3s ease; }
.p-smap__ports div { padding: 7.6px 16px 7.4px 12.8px; border-bottom: 1px solid #F2F0DE; }
.p-smap__ports div:last-child { border-bottom: 0; }
.p-smap__ports.is-hidden { opacity: 0; }

/* Service map timeline (amCharts serpentine in a Bootstrap modal) */
.p-tl.p-smap__tl { left: 12.8px; top: 12.8px; width: 1250.4px; height: 676.2px; box-sizing: border-box; border: 1px solid rgba(0,0,0,.175); border-radius: 6.4px; }
.p-smap__tl .p-tl__head { position: relative; z-index: 1; height: 50.4px; padding: 0 13.6px 0 12.8px; border-bottom: 1px solid #DEE2E6; }
.p-smap__tl .p-tl__head h2 { font: 500 16px/24px var(--p-title); text-transform: none; padding-top: 1px; color: #212529; }
.p-smap__tl .p-tl__svg { left: -1px; top: -1px; width: 1250.4px; height: 676.2px; }
.p-smap__tl .p-tl__svg text { font-size: 8.8px; fill: #000; }
.p-smap__tl .p-tl__months text { fill-opacity: .55; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.p-smap__tl .p-tl__ticks line { stroke: #000; stroke-opacity: .12; stroke-width: .8; }
.p-smap__tl .p-tl__date { fill: #212529; }
.p-smap__tl .lane-lbl { font-size: 8.8px; fill: #000; }
.p-smap__tl .p-tl__lane { stroke-width: 5.2; }
.p-tl-scrim.p-smap__scrim { background: rgba(0,0,0,.5); }
.p-smap__svg .p-edge-hit { stroke-width: 26; }
.p-smap__box text { fill: #212529; }

/* ---------- Kit v1.2: compute list hover, Devices and Unknown connections (pivot) ---------- */
.p.is-hover .p-cmp__table tr.is-hot th, .p.is-hover .p-cmp__table tr.is-hot td { background: #ECECEC; }
.p-pv__title { position: absolute; top: 52px; font: 300 14.4px/21.6px 'Raleway', var(--p-font); letter-spacing: .96px; color: #000; white-space: nowrap; }
.p-pv__flbl { position: absolute; top: 85.6px; font: 400 9.6px/14.4px var(--p-font); color: #212529; white-space: nowrap; }
.p-pv__btn { position: absolute; box-sizing: border-box; min-height: 24.8px; padding: 0 22px 0 6.4px; background: #fff; border: 1px solid #CED4DA; border-radius: 3.2px; font: 400 11.2px/22.8px var(--p-font); color: #212529; white-space: nowrap; overflow: hidden; }
.p-pv__btn.is-wrap { white-space: normal; line-height: 14.4px; padding-top: 3.6px; padding-bottom: 3.6px; }
.p-pv__btn span { position: absolute; right: 7.2px; top: 7.2px; line-height: 0; }
.p-pv__btn.is-wrap span { top: 13px; }
.p-pv__th, .p-pv__td { position: absolute; height: 17.6px; box-sizing: border-box; padding: 0 3.2px; font: 400 9.6px/17.6px Arial, 'Helvetica Neue', sans-serif; color: #000; white-space: nowrap; overflow: hidden; }
.p-pv__th.r, .p-pv__td.r { text-align: right; padding-right: 8px; }
.p-pv__td.z { background: #F5F5F5; }
.p-pv__td.s b { font-weight: 700; margin-right: 4px; }
.p-pv__caret { vertical-align: -1px; }
.p-pv__sep { position: absolute; height: 0; border-top: 1px solid #E2E2E2; }
.p-pv__clip { position: absolute; left: 0; right: 0; bottom: 0; background: var(--p-bg); }

/* ---------- Kit v1.4: snapshot screens ---------- */
.p-snap__page { position: absolute; left: 0; top: 0; width: 1600px; height: 870px; transform: scale(.8); transform-origin: 0 0; overflow: hidden; }
.p-snap__page > * { position: absolute; display: block; box-sizing: border-box; margin: 0; }
.p-snap .s-t { white-space: pre; overflow: visible; }
.p-snap .s-s { line-height: 0; }
.p-snap .s-s > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.p-snap .s-cb { border: 1px solid #767676; border-radius: 2.5px; background: #fff; }
.p-snap .s-cb.is-on { border-color: #0075FF; background: #0075FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.6-5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center/100% no-repeat; }
.p-snap .s-sb { background: #8d8d8d; border-radius: 3px; }
.p-snap__hl { background: #FFE14D; mix-blend-mode: multiply; opacity: 0; transition: opacity .5s ease .15s; pointer-events: none; }
.p-snap__hl.is-on { opacity: 1; }
.p-smap__panel .p-smap__source.is-protocol { background: #FFE987; border-color: #0D6EFD; color: #252525; }

/* ---------- Kit v1.5: AI assistant chat (chatScreen). A generic assistant, styled to look like no real product. ---------- */
.c { position: absolute; inset: 0; background: #FFFFFF; color: #232323; font-family: var(--md-body); }
.c-sym { display: inline-block; width: 16px; height: 16px; flex: 0 0 auto; }
.c-sym svg { display: block; }
.c-side { position: absolute; left: 0; top: 0; bottom: 0; width: 232px; background: #F7F6F2; border-right: 1px solid #E8E6DF; padding: 18px 14px; }
.c-side__app { display: flex; align-items: center; gap: 9px; margin: 3px 8px 22px; font: 600 15px/1 var(--md-body); }
.c-side__row { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 8px; font: 400 14px/1 var(--md-body); color: #3A3A3A; }
.c-side__row.is-on { background: #ECEAE3; }
.c-side__row svg { flex: 0 0 auto; color: #55524B; }
.c-side__lbl { margin: 24px 10px 8px; font: 600 11px/1 var(--md-body); letter-spacing: .08em; text-transform: uppercase; color: #8D8A82; }
.c-side__conn em { margin-left: auto; display: flex; align-items: center; gap: 5px; font: 400 12px/1 var(--md-body); font-style: normal; color: #3E8F5A; }
.c-side__conn em::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #3E9B5F; }
.c-main { position: absolute; left: 232px; right: 0; top: 0; bottom: 0; }
.c-scroll { position: absolute; left: 0; right: 0; top: 0; bottom: 104px; overflow: hidden; }
.c-scroll::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(rgba(255,255,255,0), #FFFFFF); }
.c-thread { position: absolute; left: 248px; top: 0; width: 560px; padding-top: 24px; transition: transform .5s cubic-bezier(.3,.7,.2,1); }
.c-thread.is-instant { transition: none; }
.c-ex { padding-bottom: 34px; }
.c-day { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 600 11px/1 var(--md-body); letter-spacing: .1em; text-transform: uppercase; color: #8D8A82; }
.c-day::before, .c-day::after { content: ''; flex: 1; height: 1px; background: #ECEAE3; }
.c-user { display: flex; justify-content: flex-end; margin-bottom: 12px; transition: opacity .25s ease, transform .25s ease; }
.c-bubble { max-width: 440px; padding: 9px 14px; border-radius: 16px; background: #EFEDE6; font: 400 14.5px/1.4 var(--md-body); }
.c-look { display: flex; align-items: center; gap: 7px; height: 18px; margin-bottom: 9px; font: 400 12.5px/1 var(--md-body); color: #6B6860; transition: opacity .25s ease; }
.c-look .c-sym { width: 14px; height: 14px; }
.c-look__chev { color: #A3A097; }
.c-look__busy { display: none; align-items: center; }
.c-look__busy i { width: 3px; height: 3px; margin-left: 3px; border-radius: 50%; background: currentColor; animation: c-dot 1s ease-in-out infinite; }
.c-look__busy i:nth-child(2) { animation-delay: .15s; } .c-look__busy i:nth-child(3) { animation-delay: .3s; }
@keyframes c-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.c-ex.is-busy .c-look__busy { display: inline-flex; }
.c-ex.is-busy .c-look__done, .c-ex.is-busy .c-look__check, .c-ex.is-busy .c-look__chev { display: none; }
.c-ans { font: 400 14.5px/1.45 var(--md-body); transition: opacity .35s ease, transform .35s ease; }
.c-ans p { margin: 0 0 9px; }
.c-ans b { font-weight: 600; }
.c-ex.is-hidden-ans .c-ans, .c-ex.is-hidden-ans .c-task { opacity: 0; transform: translateY(6px); }
.c-ex.is-wait .c-user { opacity: 0; transform: translateY(8px); }
.c-ex.is-wait .c-look, .c-ex.is-wait .c-task, .c-ex.is-wait .c-ans { opacity: 0; }
.c-task { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 11px 14px; border: 1px solid #E6E3DA; border-radius: 10px; background: #FAF9F6; transition: opacity .35s ease, transform .35s ease; }
.c-task svg { color: #55524B; flex: 0 0 auto; }
.c-task b { display: block; font: 600 13.5px/1.2 var(--md-body); }
.c-task span { display: block; margin-top: 3px; font: 400 13px/1.2 var(--md-body); color: #6B6860; }
.c-tablewrap { margin: 2px 0 10px; border: 1px solid #E6E3DA; border-radius: 8px; overflow: hidden; }
.c-table { width: 100%; border-collapse: collapse; font: 400 12.5px/1.3 var(--md-body); }
.c-table th { padding: 6px 9px; text-align: left; font-weight: 600; color: #55524B; background: #F7F6F2; border-bottom: 1px solid #E6E3DA; }
.c-table td { padding: 5px 9px; vertical-align: top; border-bottom: 1px solid #F0EEE8; }
.c-table tr:last-child td { border-bottom: 0; }
.c-t-certs th:nth-child(1) { width: 78px; } .c-t-certs th:nth-child(2) { width: 196px; } .c-t-certs td:nth-child(1) { white-space: nowrap; }
.c-t-os th:nth-child(2) { width: 80px; } .c-t-os th:nth-child(3) { width: 130px; }
.c-t-rare th:nth-child(1) { width: 70px; } .c-t-rare th:nth-child(3) { width: 178px; } .c-t-rare td:nth-child(1) { white-space: nowrap; }
.c-empty { position: absolute; left: 248px; top: 222px; width: 560px; text-align: center; display: none; }
.c.is-empty .c-empty { display: block; }
.c-empty__badge { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border: 1px solid #E6E3DA; border-radius: 999px; background: #FFFFFF; font: 400 15px/1 var(--md-body); }
.c-empty__badge .c-sym { width: 20px; height: 20px; }
.c-empty__badge b { font-weight: 600; }
.c-empty p { margin: 14px 0 0; font: 400 14px/1.4 var(--md-body); color: #8D8A82; }
.c-fade { position: absolute; left: 0; right: 0; bottom: 104px; height: 96px; background: linear-gradient(rgba(255,255,255,0), #FFFFFF 62%); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.c.has-chip .c-fade { opacity: 1; }
.c-chips { position: absolute; left: 248px; bottom: 112px; width: 560px; display: flex; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.c.has-chip .c-chips { opacity: 1; transform: none; pointer-events: auto; }
.c-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 40px 9px 15px; border: 1px solid #D9D6CB; border-radius: 999px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,.05); font: 400 14.5px/1 var(--md-body); color: #232323; }
.c-chip svg { color: #8D8A82; flex: 0 0 auto; }
.c-chip.md-hot:hover { background: #F7F6F2; border-color: #BDB9AC; }
.c-compose { position: absolute; left: 248px; bottom: 20px; width: 560px; height: 78px; padding: 13px 16px 10px; border: 1px solid #DAD7CD; border-radius: 16px; background: #FFFFFF; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.c-compose__text { height: 20px; overflow: hidden; white-space: nowrap; font: 400 14.5px/1.35 var(--md-body); }
.c-compose__ph { color: #A3A097; }
.c-compose.is-typing .c-compose__ph { display: none; }
.c-compose__row { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.c-conn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border: 1px solid #E6E3DA; border-radius: 999px; font: 400 12.5px/1 var(--md-body); color: #3A3A3A; }
.c-conn .c-sym { width: 13px; height: 13px; }
.c-conn i { width: 6px; height: 6px; border-radius: 50%; background: #3E9B5F; }
.c-send { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #CFCCC2; transition: background .2s ease; }
.c-compose.is-typing .c-send { background: #252525; }