.cabinet-activity { container: cabinet / inline-size; }
.cabinet-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12); }
.cabinet-device { --cabinet-metal: #777773; --cabinet-heat-opacity: 0; --cabinet-warm: #efa776; margin-top: var(--space-16); border: 1px solid var(--field-line); border-radius: var(--radius-panel); background: var(--surface); }
.cabinet-nameplate { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-8) var(--space-24); padding: var(--space-16) var(--space-24); border-bottom: 1px solid var(--line-strong); font-size: 12px; }
.cabinet-nameplate > span:first-child { color: var(--muted); letter-spacing: .06em; }
.cabinet-alarm { display: inline-flex; align-items: center; gap: var(--space-8); }
.cabinet-alarm i, .cabinet-output-lamp { display: inline-block; width: 10px; height: 10px; flex-shrink: 0; border: 1px solid var(--cabinet-metal); border-radius: 50%; background: var(--surface-raised); }
.cabinet-body { display: grid; grid-template-columns: minmax(0, 1fr) 200px; align-items: center; gap: var(--space-24); padding: var(--space-24); }
.cabinet-chamber { min-width: 0; margin: 0; }
.cabinet-drawing { display: block; width: 100%; height: auto; }
.cabinet-chamber figcaption { margin-top: var(--space-8); text-align: center; }
.cabinet-door { fill: var(--surface-raised); stroke: var(--cabinet-metal); stroke-width: 2; }
.cabinet-window { fill: var(--background); stroke: var(--cabinet-metal); stroke-width: 2; }
.cabinet-heat { fill: var(--cabinet-warm); opacity: var(--cabinet-heat-opacity); }
.cabinet-metal, .cabinet-racks, .cabinet-vents { stroke: var(--cabinet-metal); }
.cabinet-load { stroke: var(--muted); }
.cabinet-fan-rotor { fill: var(--cabinet-metal); }
.cabinet-fan-rotor > circle { fill: var(--surface); stroke: var(--cabinet-metal); stroke-width: 2; }
.cabinet-heater { stroke: var(--cabinet-metal); }
.cabinet-air { stroke: var(--muted); opacity: 0; }
.cabinet-console { min-width: 0; padding-left: var(--space-24); border-left: 1px solid var(--line-strong); }
.cabinet-temperature { margin: 0; padding: var(--space-12); background: var(--background); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.cabinet-temperature dt, .cabinet-temperature small { color: var(--muted); font-size: 12px; }
.cabinet-temperature dd { margin: var(--space-4) 0; font: 32px/1.25 "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-variant-numeric: tabular-nums; }
.cabinet-temperature small { display: block; }
.cabinet-indicators { display: grid; gap: var(--space-16); margin: var(--space-24) 0; }
.cabinet-indicators > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-8); }
.cabinet-indicators dt { display: flex; align-items: center; gap: var(--space-8); color: var(--muted); font-size: 12px; }
.cabinet-indicators dd { margin: 0; font-size: 13px; }
.cabinet-indicators small { grid-column: 1 / -1; margin-top: var(--space-4); color: var(--muted); font-size: 11px; }
.cabinet-indicators svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.cabinet-lock-shackle { transform: translateY(-3px); }
.cabinet-buzzer-waves { visibility: hidden; }
.cabinet-controls { display: grid; gap: var(--space-8); margin: 0; }
.cabinet-controls .button { width: 100%; padding-inline: var(--space-12); }
.cabinet-device[data-connected="true"][data-output="on"] .cabinet-fan-rotor { animation: cabinet-fan-turn 1.8s linear infinite; }
.cabinet-device[data-output="on"] .cabinet-output-lamp { border-color: var(--text); background: var(--text); }
.cabinet-device[data-output="on"] .cabinet-heater { stroke: var(--cabinet-warm); }
.cabinet-device[data-output="on"] .cabinet-air { opacity: 1; }
.cabinet-device[data-unsafe="true"] .cabinet-alarm { color: #ffad9d; }
.cabinet-device[data-unsafe="true"] .cabinet-alarm i { background: #f07862; border-color: #ffad9d; }
.cabinet-device[data-unsafe="true"] .cabinet-temperature { color: #ffad9d; }
.cabinet-device[data-unsafe="true"] .cabinet-temperature :is(dt, small) { color: #e2ad9f; }
.cabinet-device[data-unsafe="true"] .cabinet-chamber figcaption { color: #ffad9d; }
.cabinet-device[data-latched="true"] .cabinet-lock-shackle { transform: none; }
.cabinet-device[data-latched="true"] .cabinet-latch-reading dd { color: #edc590; }
.cabinet-device[data-buzzer="on"] .cabinet-buzzer-waves { visibility: visible; }
.cabinet-device[data-buzzer="on"] .cabinet-buzzer-reading dd { color: #edc590; }
.cabinet-device[data-connected="false"] .cabinet-drawing { opacity: .55; }
.cabinet-clock { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); margin-bottom: var(--space-24); font-variant-numeric: tabular-nums; }
.cabinet-clock dd { font-size: 18px; }
.cabinet-history-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-8); }
.cabinet-process .cabinet-history-heading h3 { margin: 0; }
.cabinet-history { display: block; width: 100%; height: 172px; margin-top: var(--space-12); overflow: visible; }
.cabinet-history text { fill: var(--muted); font-family: inherit; font-size: 12px; font-variant-numeric: tabular-nums; }
.cabinet-history-grid { stroke: var(--line-strong); stroke-width: 1; }
.cabinet-history-limit { stroke: #bd9775; stroke-width: 1; stroke-dasharray: 4 4; }
.cabinet-history .cabinet-history-limit-label { fill: #edc590; }
.cabinet-history-line { stroke: var(--text); stroke-width: 2; stroke-linejoin: round; }
.cabinet-history-point { fill: var(--background); stroke: var(--text); stroke-width: 2; }
.cabinet-history-point[data-current="true"] { fill: var(--text); }
.cabinet-history-point[data-unsafe="true"] { fill: #f07862; stroke: #ffad9d; }
.cabinet-events { padding-top: var(--space-16); border-top: 1px solid var(--line-strong); }
.cabinet-events summary { min-height: 44px; padding-block: var(--space-8); font-size: 15px; }
.cabinet-events > p { margin-top: var(--space-8); }
.cabinet-events .lab-events { scrollbar-color: var(--field-line) var(--surface); }
@container cabinet (max-width: 520px) {
  .cabinet-nameplate { padding: var(--space-12) var(--space-16); }
  .cabinet-body { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); padding: var(--space-16); }
  .cabinet-chamber { width: min(100%, 280px); justify-self: center; }
  .cabinet-console { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--space-16); padding: var(--space-16) 0 0; border-left: 0; border-top: 1px solid var(--line-strong); }
  .cabinet-temperature { grid-column: 1 / -1; }
  .cabinet-temperature > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-12); align-items: center; }
  .cabinet-temperature dd { grid-column: 2; grid-row: 1 / 3; }
  .cabinet-temperature small { grid-column: 1; }
  .cabinet-indicators { margin: var(--space-4) 0 0; }
  .cabinet-indicators > div { grid-template-columns: minmax(0, 1fr); }
  .cabinet-indicators dd { margin-left: var(--space-24); }
  .cabinet-controls .button { min-height: 48px; }
}
@media (max-width: 420px) {
  .cabinet-clock { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
  .cabinet-clock dd { font-size: 16px; }
}
@keyframes cabinet-fan-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cabinet-device[data-connected="true"][data-output="on"] .cabinet-fan-rotor { animation: none; } }
.cabinet-controls > p { margin-top: var(--space-4); }
.mqtt-workspace { container: mqtt-console / inline-size; }
.mqtt-workspace .cabinet-heading .device-actions { margin: 0; }
.mqtt-profile { margin-top: var(--space-16); padding-block: var(--space-8); border-block: 1px solid var(--line-strong); }
.mqtt-profile summary { min-height: 44px; padding-block: var(--space-8); font-size: 13px; }
.mqtt-profile dl { display: grid; gap: var(--space-16); margin: var(--space-12) 0; }
.mqtt-profile dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-12); }
.mqtt-profile dt { color: var(--muted); font-size: 12px; }
.mqtt-profile dd { margin: 0; overflow-wrap: anywhere; }
.mqtt-workspace .mqtt-form { margin-top: var(--space-24); }
.mqtt-form h3 { margin: 0 0 var(--space-12); }
.mqtt-form fieldset { display: grid; min-width: 0; gap: var(--space-8); margin: 0; padding: 0; border: 0; }
.mqtt-form label { font-size: 12px; color: var(--muted); }
.mqtt-form :is(input:not([type="checkbox"]), textarea) { width: 100%; }
.mqtt-form textarea { min-height: 120px; padding: var(--space-12); resize: vertical; color: var(--text); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); font: 13px/1.6 "SFMono-Regular", Consolas, "Liberation Mono", monospace; caret-color: var(--text); }
.mqtt-form textarea::placeholder { color: var(--quiet); }
.mqtt-form textarea:disabled, .mqtt-form input:disabled { color: var(--muted); opacity: .7; }
.mqtt-form label[for="mqtt-payload"] { margin-top: var(--space-8); }
.mqtt-input-action { display: flex; gap: var(--space-12); }
.mqtt-input-action > input { min-width: 0; flex: 1; }
.mqtt-input-action > .button { flex-shrink: 0; }
.mqtt-publish-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16); margin-top: var(--space-8); }
.mqtt-publish-actions label { display: flex; align-items: center; gap: var(--space-8); min-height: 44px; }
.mqtt-publish-actions > .button { margin-left: auto; }
.mqtt-publish-actions select { min-width: 64px; }
.mqtt-retain input { width: 18px; height: 18px; min-height: 18px; margin: 0; accent-color: var(--text); }
.mqtt-form .form-message { min-height: 20px; margin-top: var(--space-8); }
.mqtt-subscriptions { margin: 0; padding-left: var(--space-24); overflow-wrap: anywhere; }
.mqtt-subscriptions li { margin-block: var(--space-8); font-size: 12px; }
.mqtt-workspace .mqtt-messages-heading { margin-top: var(--space-32); }
.mqtt-workspace .mqtt-messages-heading h3 { margin: 0; }
.mqtt-messages { max-height: 480px; padding: 0; margin: var(--space-12) 0 0; list-style: none; overflow-y: auto; scrollbar-color: var(--field-line) var(--surface); }
.mqtt-messages:empty { display: none; }
.mqtt-messages li { padding: var(--space-16) 0; border-top: 1px solid var(--line-strong); }
.mqtt-messages .mqtt-message-topic { display: block; overflow-wrap: anywhere; font-size: 12px; }
.mqtt-messages pre { margin: var(--space-8) 0 0; padding: var(--space-12); background: var(--surface); border-radius: var(--radius); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
@container mqtt-console (max-width: 420px) {
  .mqtt-profile dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .mqtt-input-action { flex-wrap: wrap; }
  .mqtt-input-action > input { flex-basis: 100%; }
}