.xmon {
  --xm-bg: #0A0A0B; --xm-card: #141417; --xm-raised: #1B1B1E;
  --xm-line: #27272A; --xm-line2: #3F3F46;
  --xm-tx: #FAFAFA; --xm-tx2: #A1A1AA;
  --xm-blue: #50A2FF; --xm-ok: #4ADE80;
  --xm-adv: #FCD34D; --xm-warn: #F59E0B; --xm-warn2: #FCD34D; --xm-crit: #F87171;
  --xm-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  --xm-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  --xm-dur: var(--dur-slow, 420ms);
  --xm-lvl: var(--xm-crit); --xm-lvl-tx: var(--xm-crit);
}
.xmon[data-level="none"] { --xm-lvl: var(--xm-blue); --xm-lvl-tx: var(--xm-tx); }
.xmon[data-level="ror"]  { --xm-lvl: var(--xm-warn); --xm-lvl-tx: var(--xm-warn2); }
.xmon[data-level="adv"]  { --xm-lvl: var(--xm-adv);  --xm-lvl-tx: var(--xm-adv); }
.xmon[data-level="warn"] { --xm-lvl: var(--xm-warn); --xm-lvl-tx: var(--xm-warn2); }
.xmon[data-level="crit"] { --xm-lvl: var(--xm-crit); --xm-lvl-tx: var(--xm-crit); }

.xmon__sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.xmon__head { max-width: 720px; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.xmon__lede { margin: 0.875rem 0 0; font-size: var(--fs-lede, 1.125rem); line-height: 1.5; color: var(--xm-tx2); }
.xmon__lede span { color: var(--xm-tx); white-space: nowrap; }

.xmon__fig { margin: 0; border: 1px solid var(--xm-line); border-radius: 14px; background: var(--xm-card); overflow: hidden; }
.xmon__bar {
  display: flex; align-items: center; gap: 0.75rem; min-height: 52px;
  padding: 0.375rem 0.5rem 0.375rem 1rem; border-bottom: 1px solid var(--xm-line); background: var(--xm-raised);
  font-family: var(--xm-mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--xm-tx2);
}
.xmon__tag { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.xmon__ok { width: 7px; height: 7px; border-radius: 50%; background: var(--xm-ok); flex: none; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.14); }
.xmon__now { margin-left: auto; color: var(--xm-tx); font-variant-numeric: tabular-nums; }
.xmon__toggle {
  appearance: none; display: inline-flex; align-items: center; gap: 0.375rem; height: 40px; padding: 0 0.75rem; cursor: pointer;
  border: 1px solid var(--xm-line2); border-radius: 8px; background: var(--xm-card); color: var(--xm-tx);
  font: inherit; letter-spacing: 0.04em; text-transform: uppercase;
  transition: border-color var(--dur-fast, 160ms) var(--xm-ease);
}
.xmon__toggle:hover { border-color: var(--xm-blue); }
.xmon__toggle:focus-visible { outline: 2px solid var(--xm-blue); outline-offset: 3px; }
.xmon__toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.xmon__toggle .i-play { display: none; fill: currentColor; stroke: none; }
.xmon.is-paused .xmon__toggle .i-play { display: block; }
.xmon.is-paused .xmon__toggle .i-pause { display: none; }
.xmon:not(.is-js) .xmon__toggle, .xmon__toggle[hidden] { display: none; }

.xmon__stage {
  display: grid; gap: 1px; background: var(--xm-line);
  grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr) minmax(0, 19rem);
  grid-template-areas: "assets trend alert" "assets trend log";
  transition: opacity 600ms var(--xm-ease);
}
.xmon.is-fade .xmon__stage { opacity: 0.25; }
.xmon__stage > * { background: var(--xm-card); padding: clamp(1rem, 2vw, 1.375rem); min-width: 0; }

.xmon__assets { grid-area: assets; list-style: none; margin: 0; display: grid; gap: 0.125rem; align-content: start; }
.xmon__assets li {
  display: flex; align-items: center; gap: 0.625rem; padding: 0.4375rem 0.5rem; border-radius: 7px;
  font-size: 0.875rem; line-height: 1.3; color: var(--xm-tx2);
  transition: color var(--xm-dur) var(--xm-ease), background-color var(--xm-dur) var(--xm-ease);
}
.xmon__assets i { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--xm-line2); transition: all var(--xm-dur) var(--xm-ease); }
.xmon__assets li.is-on { color: var(--xm-tx); }
.xmon__assets li.is-on i { border-color: var(--xm-blue); background: var(--xm-blue); box-shadow: 0 0 0 3px rgba(80, 162, 255, 0.16); }
.xmon__assets li.is-hot { background: rgba(245, 158, 11, 0.09); color: var(--xm-lvl-tx); }
.xmon__assets li.is-hot i { border-color: var(--xm-lvl); background: var(--xm-lvl); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2); }
.xmon__cid { margin-left: auto; padding-left: 0.375rem; font-family: var(--xm-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; color: var(--xm-warn2); opacity: 0; transition: opacity var(--xm-dur) var(--xm-ease); }
.xmon__assets li.is-hot .xmon__cid { opacity: 1; }
.xmon.is-live .xmon__assets li.is-hot i { animation: xmon-pulse 1.1s var(--xm-ease) infinite; }

.xmon__trend { grid-area: trend; display: flex; flex-direction: column; gap: 0.75rem; }
.xmon__read { display: flex; align-items: baseline; gap: 0.375rem; font-family: var(--xm-mono); }
.xmon__sid { font-size: 0.75rem; letter-spacing: 0.06em; color: var(--xm-tx2); margin-right: 0.25rem; }
.xmon__read b { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; font-weight: 500; color: var(--xm-lvl-tx); font-variant-numeric: tabular-nums; transition: color var(--xm-dur) var(--xm-ease); }
.xmon__unit { font-size: 1rem; color: var(--xm-tx2); }
.xmon__plot { position: relative; flex: 1; min-height: 15rem; margin-right: 4.75rem; }
.xmon__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xmon__trace { fill: none; stroke: none; }
.xmon__seg { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.xmon__seg--none { stroke: var(--xm-blue); }
.xmon__seg--ror, .xmon__seg--warn { stroke: var(--xm-warn); }
.xmon__seg--adv { stroke: var(--xm-adv); }
.xmon__seg--crit { stroke: var(--xm-crit); }
.xmon__area { fill: var(--xm-lvl); fill-opacity: 0.1; transition: fill var(--xm-dur) var(--xm-ease); }
.xmon__th, .xmon__base { position: absolute; left: 0; right: -4.75rem; height: 0; border-top: 1px dashed var(--xm-line2); }
.xmon__base { right: 0; border-top-style: dotted; }
.xmon__th em {
  position: absolute; right: 0; bottom: 3px; font-style: normal; font-family: var(--xm-mono); font-size: 0.6875rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--xm-tx2); transition: color var(--xm-dur) var(--xm-ease);
}
.xmon__th--adv.is-hit  { border-top-color: var(--xm-adv); }
.xmon__th--warn.is-hit { border-top-color: var(--xm-warn); }
.xmon__th--crit.is-hit { border-top-color: var(--xm-crit); }
.xmon__th--adv.is-hit em  { color: var(--xm-adv); }
.xmon__th--warn.is-hit em { color: var(--xm-warn2); }
.xmon__th--crit.is-hit em { color: var(--xm-crit); }
.xmon__head-dot {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--xm-lvl); box-shadow: 0 0 0 4px rgba(250, 250, 250, 0.08), 0 0 16px var(--xm-lvl); opacity: 0;
}
.xmon__head-dot.is-on { opacity: 1; }
.xmon__ror { position: absolute; width: 0; height: 0; opacity: 0; transition: opacity var(--xm-dur) var(--xm-ease); }
.xmon__ror::before { content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--xm-warn2); background: var(--xm-card); }
.xmon__ror::after { content: ""; position: absolute; left: 0; bottom: 6px; height: 2.25rem; border-left: 1px solid var(--xm-warn2); }
.xmon__ror em {
  position: absolute; left: -0.5rem; bottom: 2.5rem; white-space: nowrap; padding: 0.1875rem 0.5rem; border-radius: 5px;
  font-style: normal; font-family: var(--xm-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--xm-bg); background: var(--xm-warn2);
}
.xmon__ror.is-on { opacity: 1; }

.xmon__alert { grid-area: alert; position: relative; }
.xmon__alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--xm-lvl); transform: scaleY(0); transform-origin: top; transition: transform var(--xm-dur) var(--xm-ease), background-color var(--xm-dur) var(--xm-ease); }
.xmon__alert.is-on::before { transform: none; }
.xmon.is-live .xmon__alert.is-on { animation: xmon-in var(--xm-dur) var(--xm-ease); }
.xmon__lvl {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.875rem; font-family: var(--xm-mono); font-size: 0.75rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--xm-lvl-tx); transition: color var(--xm-dur) var(--xm-ease);
}
.xmon__lvl::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.xmon.is-acked .xmon__lvl, .xmon[data-level="none"] .xmon__lvl { color: var(--xm-ok); }
.xmon.is-acked .xmon__lvl::before, .xmon[data-level="none"] .xmon__lvl::before { border-radius: 50%; }
.xmon__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; margin: 0; }
.xmon__fields dt { font-family: var(--xm-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--xm-tx2); }
.xmon__fields dd { margin: 0.125rem 0 0; font-family: var(--xm-mono); font-size: 0.9375rem; color: var(--xm-tx); font-variant-numeric: tabular-nums; white-space: nowrap; }
.xmon__fields div:nth-child(2) dd, .xmon__fields div:nth-child(3) dd { color: var(--xm-lvl-tx); transition: color var(--xm-dur) var(--xm-ease); }
.xmon__chain { list-style: none; margin: 1.125rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.xmon__chain::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 6px; border-top: 1px solid var(--xm-line2); }
.xmon__chain::after { content: ""; position: absolute; left: 12.5%; width: 75%; top: 6px; border-top: 2px solid var(--xm-lvl); margin-top: -0.5px; transform: scaleX(var(--xm-chain, 1)); transform-origin: left; transition: transform var(--xm-dur) var(--xm-ease), border-color var(--xm-dur) var(--xm-ease); }
.xmon.is-acked .xmon__chain::after { border-top-color: var(--xm-crit); }
.xmon__chain li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4375rem; font-size: 0.75rem; color: var(--xm-tx2); text-align: center; transition: color var(--xm-dur) var(--xm-ease); }
.xmon__chain i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--xm-line2); background: var(--xm-card); transition: all var(--xm-dur) var(--xm-ease); }
.xmon__chain li.is-on { color: var(--xm-tx); }
.xmon__chain li[data-xmon-step="dash"].is-on i   { background: var(--xm-adv); border-color: var(--xm-adv); }
.xmon__chain li[data-xmon-step="email"].is-on i  { background: var(--xm-warn); border-color: var(--xm-warn); }
.xmon__chain li[data-xmon-step="sms"].is-on i,
.xmon__chain li[data-xmon-step="oncall"].is-on i { background: var(--xm-crit); border-color: var(--xm-crit); }
.xmon.is-live .xmon__chain li.is-on i { animation: xmon-pop 520ms var(--xm-ease); }
.xmon__scope { margin: 0.75rem 0 0; text-align: center; font-family: var(--xm-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--xm-tx2); }

.xmon__log { grid-area: log; display: flex; flex-direction: column; gap: 0.75rem; }
.xmon__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-family: var(--xm-mono); font-size: 0.75rem; }
.xmon__rows li {
  display: flex; gap: 0.75rem; align-items: center; padding: 0.25rem 0.5rem; border-radius: 5px; background: var(--xm-raised);
  opacity: 0; transform: translateY(4px); transition: opacity var(--xm-dur) var(--xm-ease), transform var(--xm-dur) var(--xm-ease);
}
.xmon__rows li.is-on { opacity: 1; transform: none; }
.xmon__rows time { color: var(--xm-tx2); font-variant-numeric: tabular-nums; }
.xmon__rows span { color: var(--xm-tx); font-variant-numeric: tabular-nums; }
.xmon__rows i { flex: none; width: 3px; height: 0.875rem; border-radius: 2px; }
.xmon__rows .k-ror { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--xm-warn); background: transparent; }
.xmon__rows .k-adv { background: var(--xm-adv); }
.xmon__rows .k-warn { background: var(--xm-warn); }
.xmon__rows .k-crit { background: var(--xm-crit); }
.xmon__rows .k-ack { background: var(--xm-ok); }
.xmon__rows .xmon__tick { color: var(--xm-ok); }
.xmon__rows .t-ror, .xmon__rows .t-warn { color: var(--xm-warn2); }
.xmon__rows .t-adv { color: var(--xm-adv); }
.xmon__rows .t-crit { color: var(--xm-crit); }
.xmon__export b { font-weight: inherit; white-space: nowrap; }
.xmon__export { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0; font-size: 0.75rem; line-height: 1.4; color: var(--xm-tx2); }
.xmon__csv { flex: none; padding: 0; font-family: var(--xm-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--xm-tx); }
.xmon__dev {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0; padding: 0.4375rem 0.625rem;
  border: 1px dashed var(--xm-line2); border-radius: 7px; font-size: 0.75rem; color: var(--xm-tx2);
}
.xmon__dev span { font-family: var(--xm-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--xm-tx2); }

@keyframes xmon-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25); } 50% { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); } }
@keyframes xmon-in { from { transform: translateY(6px); } to { transform: none; } }
@keyframes xmon-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.25); } 100% { transform: none; } }

@media (max-width: 1100px) {
  .xmon__cid { display: none; }
  .xmon__stage { grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr) minmax(0, 0.8fr); grid-template-areas: "assets trend trend" "alert alert log"; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .xmon__alert { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.5rem; align-content: start; }
  .xmon__lvl { grid-column: 1 / -1; }
  .xmon__fields { grid-row: 2 / 4; }
  .xmon__chain { margin-top: 0.5rem; }
}
@media (max-width: 720px) {
  .xmon__stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "assets" "trend" "alert" "log"; }
  .xmon__assets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.125rem 0.25rem; }
  .xmon__assets li { font-size: 0.8125rem; padding: 0.375rem 0.375rem; gap: 0.5rem; }
  .xmon__plot { min-height: 11rem; margin-right: 4.25rem; }
  .xmon__th { right: -4.25rem; }
  .xmon__bar { font-size: 0.6875rem; padding-left: 0.875rem; }
  .xmon__now { display: none; }
  .xmon__toggle { margin-left: auto; }
  .xmon__lede span { white-space: normal; }
}
@media (max-width: 380px) {
  .xmon__assets li { font-size: 0.75rem; }
  .xmon__fields dd { font-size: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .xmon *, .xmon *::before, .xmon *::after { animation: none !important; transition: none !important; }
  .xmon.is-fade .xmon__stage { opacity: 1; }
}