.reception-monitor {
  --monitor-cyan: #67e8f9;
  min-width: 0; min-height: 0; width: 100%; height: 100%; overflow: hidden;
  display: flex; flex-direction: column; color: var(--text); font-size: 13px;
  letter-spacing: .01em; background: linear-gradient(145deg, rgba(11,28,39,.96), rgba(7,16,22,.98));
}
.reception-monitor-bar { display: flex; gap: 14px; align-items: center; padding: 10px 14px; border-bottom: 1px solid rgba(103,232,249,.16); background: rgba(7,18,27,.72); backdrop-filter: blur(14px); flex: 0 0 auto; }
.reception-monitor-bar > div { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.reception-monitor-bar strong { color: #e6fbff; font-weight: 650; letter-spacing: .02em; }
.reception-monitor-bar span { color: var(--muted); }
.reception-monitor-bar span[data-rm-connection] { color: var(--monitor-cyan); }
.reception-monitor-bar button { flex-shrink: 0; border-color: rgba(103,232,249,.32); background: rgba(34,211,238,.1); }
.reception-monitor-context-menu { position: relative; flex-shrink: 0; }
.reception-monitor-context-menu summary { cursor: pointer; color: #b9d8df; padding: 6px 9px; border: 1px solid rgba(103,232,249,.2); border-radius: 6px; background: rgba(255,255,255,.045); list-style: none; }
.reception-monitor-context-menu summary::-webkit-details-marker { display: none; }
.reception-monitor-context-menu summary::before { content: "⌁"; margin-right: 6px; color: var(--monitor-cyan); }
.reception-monitor-context { position: absolute; z-index: 10; right: 0; top: calc(100% + 8px); width: min(380px,calc(100vw - 34px)); box-sizing: border-box; display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 8px 12px; padding: 14px; margin: 0; background: rgba(8,22,32,.9); border: 1px solid rgba(103,232,249,.28); border-radius: 10px; box-shadow: 0 16px 44px rgba(0,0,0,.32); backdrop-filter: blur(18px); max-height: min(280px,calc(100dvh - 180px)); overflow: auto; }
.reception-monitor-context dt { color: #86aab3; }
.reception-monitor-context dd { margin: 0; overflow-wrap: anywhere; font-size: 12px; color: #e0f4f7; }
.reception-monitor-mismatch { padding: 8px 14px; color: #f8d889; border-bottom: 1px solid rgba(245,158,11,.16); background: rgba(245,158,11,.07); overflow-wrap: anywhere; flex: 0 0 auto; }
.reception-monitor-mismatch.reception-monitor-hint { color: #a9dce5; border-bottom-color: rgba(103,232,249,.14); background: rgba(34,211,238,.045); }
.reception-monitor-options { padding: 8px 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid rgba(103,232,249,.1); background: rgba(255,255,255,.018); flex: 0 0 auto; }
.reception-monitor-options label { display: flex; align-items: center; gap: 6px; color: #a9c8cf; }
.reception-monitor-options output { margin-left: auto; color: #8eb3bb; font-variant-numeric: tabular-nums; }
.reception-monitor-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; min-height: 0; flex: 1 1 0; overflow: hidden; }
.reception-monitor-media { min-width: 0; min-height: 0; padding: 14px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: minmax(0,1fr); gap: 14px; }
.reception-monitor-view { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.reception-monitor-view > .reception-monitor-stage { border: 1px solid rgba(103,232,249,.14); border-radius: 10px; background: rgba(3,12,18,.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025),0 12px 28px rgba(0,0,0,.16); }
.reception-monitor-stage { display: grid; place-items: start center; flex: 1 1 0; min-height: 0; min-width: 0; overflow: hidden; }
.reception-monitor-section-title { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; flex: 0 0 auto; min-width: 0; padding: 0 2px; }
.reception-monitor h3 { margin: 0; font-size: 13px; font-weight: 600; color: #d8f5f8; letter-spacing: .03em; }
.reception-monitor-section-title span { font-size: 11px; color: #89b2ba; overflow-wrap: anywhere; text-align: right; }
.reception-monitor-image { position: relative; width: 1px; background: #07141c; overflow: hidden; }
.reception-monitor-image canvas,.reception-monitor-image img,.reception-monitor-image svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.reception-monitor-image canvas { filter: saturate(.96) contrast(1.03); }
.reception-monitor-image [data-rm-geometry] { cursor: pointer; }
.reception-monitor-stale { position: absolute; inset: auto 10px 10px; padding: 7px 10px; font-size: 11px; color: #d9f5f7; background: rgba(4,18,26,.64); border: 1px solid rgba(103,232,249,.2); border-radius: 6px; text-align: center; backdrop-filter: blur(8px); }
.reception-monitor-stale[hidden] { display: none; }
.reception-monitor-inspector { padding: 14px; border-left: 1px solid rgba(103,232,249,.12); min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; background: rgba(5,17,25,.42); }
.reception-monitor-inspector > * { flex-shrink: 0; }
.reception-monitor-region { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid transparent; padding: 8px 7px; text-align: left; color: var(--text); background: transparent; border-radius: 7px; transition: background .15s ease,border-color .15s ease; }
.reception-monitor-region:hover { background: rgba(103,232,249,.06); }
.reception-monitor-region > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.reception-monitor-region small { color: #86aab3; flex-shrink: 0; }
.reception-monitor-region.active { border-color: rgba(103,232,249,.38); background: rgba(34,211,238,.1); }
.reception-monitor-events { list-style: none; padding: 0; margin: 0; }
.reception-monitor-events li { padding: 8px 0; border-bottom: 1px solid rgba(103,232,249,.1); overflow-wrap: anywhere; }
.reception-monitor-events li > div { display: flex; justify-content: space-between; gap: 8px; }
.reception-monitor-events strong { font-weight: 550; color: #d7f3f5; }
.reception-monitor-events p { margin: 5px 0; color: #a7c6cc; }
.reception-monitor-events small { color: #759aa3; }
.reception-monitor-help { margin: 0 0 10px; color: #8eafb6; font-size: 12px; line-height: 1.55; }
.reception-monitor-help b { color: #d7f3f5; font-weight: 600; }
#spatial-workbench.spatial-monitor-mode .spatial-work-area { display: block; overflow: hidden; }
#spatial-workbench.spatial-monitor-mode .spatial-top-actions > button:not([data-spatial-action="close"]) { display: none; }
#spatial-workbench.spatial-monitor-mode .spatial-message { display: none; }
@media (max-width: 760px) {
  .reception-monitor-grid { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,3fr) minmax(0,2fr); }
  .reception-monitor-inspector { border-left: 0; border-top: 1px solid rgba(103,232,249,.12); padding: 10px; }
  .reception-monitor-options { gap: 9px; padding: 7px 10px; }
  .reception-monitor-options output { margin-left: 0; width: 100%; }
  .reception-monitor-media { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,2fr) minmax(0,1fr); padding: 10px; gap: 8px; }
  .reception-monitor-bar { gap: 8px; padding: 8px 10px; }
  .reception-monitor-bar strong { display: none; }
  .reception-monitor-bar > div { gap: 0; }
  .reception-monitor-bar button { min-height: 32px; padding: 0 9px; font-size: 12px; }
  .reception-monitor-context { right: -8px; }
}