.timed-process-scene {
  background: linear-gradient(180deg, #f5f9fb 0%, #e5eef2 100%);
  border: 1px solid #c7d6de;
  border-radius: 18px;
  overflow: hidden;
}

.timed-process-scene svg { display: block; width: 100%; height: auto; }
.timed-process-scene .tp-title { fill: #173746; font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.timed-process-scene .tp-control > rect { fill: #18343f; stroke: #0d252f; stroke-width: 3; }
.timed-process-scene .tp-panel-title { fill: #eaf4f7; font-size: 15px; font-weight: 900; }
.timed-process-scene .tp-time { fill: #76e2b2; font-size: 32px; font-weight: 900; }
.timed-process-scene .tp-preset { fill: #a9c1cc; font-size: 12px; font-weight: 700; }
.timed-process-scene .tp-progress-bg { fill: #415a65; }
.timed-process-scene .tp-progress-fill { fill: #36bf83; }
.timed-process-scene.fault .tp-progress-fill { fill: #dc5d55; }
.timed-process-scene .tp-control text { fill: #dbe7ec; font-size: 10px; font-weight: 700; }
.timed-process-scene .tp-led { fill: #6d7d84; }
.timed-process-scene .tp-led.on { fill: #31ca85; filter: drop-shadow(0 0 5px rgba(49,202,133,.8)); }
.timed-process-scene .tp-led.done.on { fill: #f1bd4e; filter: drop-shadow(0 0 5px rgba(241,189,78,.8)); }

.timed-process-scene .tp-machine-body { stroke: #142a34; stroke-width: 4; }
.timed-process-scene .tp-window { fill: #dce9ee; stroke: #7f9aa6; stroke-width: 4; }
.timed-process-scene .tp-bed { stroke: #6d858f; stroke-width: 6; stroke-linecap: round; }
.timed-process-scene .tp-actuator circle { fill: #6f8792; stroke: #bed0d7; stroke-width: 4; }
.timed-process-scene .tp-actuator path { stroke: #28434f; stroke-width: 4; stroke-linecap: round; }
.timed-process-scene .tp-actuator text { fill: #e7f1f4; font-size: 11px; font-weight: 900; }
.timed-process-scene .tp-actuator.active { animation: timed-process-pulse .8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.timed-process-scene .tp-actuator.active circle { fill: #e8ad4d; }

.timed-process-scene .tp-piece rect { fill: #d99f55; stroke: #8a6332; stroke-width: 3; }
.timed-process-scene .tp-piece path { fill: none; stroke: #f3cf91; stroke-width: 3; }
.timed-process-scene .tp-piece text { fill: #5f431e; font-size: 10px; font-weight: 900; }
.timed-process-scene.release .tp-piece { transition: transform .35s ease; }
.timed-process-scene .tp-gate rect { fill: #b7c6cd; stroke: #657983; stroke-width: 3; transform-origin: top center; transform-box: fill-box; transition: transform .25s ease; }
.timed-process-scene .tp-gate.open rect { transform: rotate(-72deg); }
.timed-process-scene .tp-gate text { fill: #dce8ed; font-size: 10px; font-weight: 900; }
.timed-process-scene .tp-machine-caption { fill: #d9e7eb; font-size: 11px; font-weight: 800; letter-spacing: .06em; }

.timed-process-scene .tp-flow-line, .timed-process-scene .tp-flow-arrow { stroke: #6e8793; stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.timed-process-scene .tp-flow text { fill: #47616d; font-size: 10px; font-weight: 700; }
.timed-process-scene .tp-status rect { fill: rgba(18, 39, 49, .95); }
.timed-process-scene .tp-status circle { fill: #7a8d96; }
.timed-process-scene.timing .tp-status circle { fill: #36bf83; }
.timed-process-scene.release .tp-status circle { fill: #efbd50; }
.timed-process-scene.fault .tp-status circle { fill: #e25b53; }
.timed-process-scene .tp-status text { fill: #edf5f7; font-size: 12px; font-weight: 800; }
.timed-process-scene .tp-status .emergency { fill: #ff8b83; }
.timed-process-scene .tp-alert rect { fill: #a72c29; opacity: .96; }
.timed-process-scene .tp-alert text { fill: #fff; font-size: 12px; font-weight: 900; }

@keyframes timed-process-pulse {
  from { transform: scale(.96) rotate(-4deg); }
  to { transform: scale(1.04) rotate(4deg); }
}

@media (max-width: 760px) {
  .timed-process-scene .tp-title { font-size: 11px; }
  .timed-process-scene .tp-status text { font-size: 10px; }
}