.remote-scenes .remote-workspace { padding: 22px 28px 20px; }
.remote-scenes .remote-scene { height: 228px; }
.remote-scenes .remote-scene[hidden] { display: none; }
.remote-scenes .remote-scene:not([hidden]) { animation: scene-enter .35s ease both; }
.remote-scenes .remote-app { height: 228px; }
.scene-summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 10px; color: #516581; font-size: 11px; }
.scene-summary strong { color: #1a2b4a; font-size: 13px; }
.scene-demo { color: #8794aa; font-size: 9px; font-weight: 400; margin-left: auto; }
.shop-environments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 14px; }
.shop-environment { min-width: 0; padding: 11px 8px; border: 1px solid #dce6f5; border-radius: 7px; background: #f8faff; text-align: center; }
.shop-environment .shop-symbol { display: grid; width: 30px; height: 30px; place-items: center; margin: 0 auto 8px; border-radius: 7px; color: #2364e8; background: #e7efff; font-size: 16px; }
.shop-environment:nth-child(2) .shop-symbol { color: #c47b21; background: #fff0da; }
.shop-environment:nth-child(3) .shop-symbol { color: #168c68; background: #dff6ef; }
.shop-environment strong, .shop-environment small { display: block; }
.shop-environment strong { color: #243957; font-size: 12px; }
.shop-environment small { margin-top: 4px; color: #71809a; font-size: 10px; }
.scene-footnote { margin: 11px 14px 0; color: #73839c; font-size: 10px; text-align: center; }
.task-monitor { padding: 0 14px; }
.task-monitor-row { display: grid; grid-template-columns: minmax(0, 1fr) 65px 54px; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #edf1f7; color: #526581; font-size: 11px; }
.task-monitor-row span:nth-child(2) { color: #168c68; }
.task-monitor-row span:nth-child(2)::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #22c55e; }
.task-monitor-row small { color: #8895a9; font-size: 10px; text-align: right; }
.uptime-track { display: flex; align-items: end; gap: 3px; height: 20px; margin-top: 6px; }
.uptime-track i { flex: 1; height: 15px; border-radius: 2px; background: #b9e8d5; }
.uptime-track i:nth-child(3n) { height: 20px; background: #61cba1; }
.uptime-label { display: flex; justify-content: space-between; margin-top: 4px; color: #8493aa; font-size: 9px; }
.scene-controls { display: flex; align-items: center; gap: 5px; padding: 10px 12px; border-top: 1px solid #e2e9f4; background: #fff; }
.scene-controls button { padding: 6px 10px; border: 0; border-radius: 5px; color: #71809a; background: transparent; font: inherit; font-size: 11px; cursor: pointer; }
.scene-controls button[aria-pressed="true"] { color: #1b5dff; background: #eaf1ff; font-weight: 700; }
.scene-controls button:hover { background: #f0f5ff; }
.scene-controls button:focus-visible { outline: 2px solid #1b5dff; outline-offset: 2px; }
.scene-controls .scene-play { margin-left: auto; color: #536783; }
@keyframes scene-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
  .remote-scenes .remote-workspace { padding: 16px; }
  .remote-scenes .remote-chart { height: 150px; }
}
@media (max-width: 430px) {
  .remote-scenes .remote-workspace { padding: 12px; }
  .shop-environments { gap: 6px; padding: 0 10px; }
  .scene-summary { padding-right: 10px; padding-left: 10px; }
  .scene-summary strong { font-size: 12px; }
  .scene-controls { gap: 2px; padding: 9px 8px; }
  .scene-controls button { padding: 6px 7px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .remote-scenes .remote-scene:not([hidden]) { animation: none; }
}