.install-intro {
  padding: 13px 16px;
  background: #eaf4ed;
  border: 1px solid #d0e6d8;
  border-radius: 7px;
  color: #426859;
  line-height: 1.55;
  margin-bottom: 16px;
}
.standards-section {
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}
.standards-section > summary {
  cursor: pointer;
  padding: 16px;
  color: var(--ink);
}
.standards-section > summary h2 {
  display: inline;
  margin: 0 12px;
  font-size: 18px;
}
.standards-section > summary span {
  display: inline-block;
  color: #426859;
  font-size: 12px;
}
.standards-section > summary:hover,
.standards-section[open] > summary {
  background: #eef6f0;
}
.standards-section > summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.standards-section-body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--line);
}
.standard-save-status {
  display: block;
  min-height: 2.5em;
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #426859;
}
.standard-save-status[data-state='pending'] {
  color: #71521e;
}
.standard-save-status[data-state='error'] {
  color: #a33727;
}
.install-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 20px;
}
.install-toolbar label {
  min-width: 170px;
}
.install-global {
  padding: 18px;
  margin-bottom: 20px;
  border-top: 4px solid #78a98b;
}
.install-global h3,
.box-editor h3 {
  margin: 0 0 12px;
}
.install-disclosure > summary,
.box-text-section > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
}
.install-disclosure > summary {
  margin: -18px;
  padding: 18px;
  background: #f3f8f4;
}
.install-disclosure[open] > summary {
  margin-bottom: 0;
  border-bottom: 2px solid #d7e6dc;
}
.install-disclosure-body {
  padding-top: 12px;
}
.box-text-section {
  margin-top: 18px;
  border: 1px solid #d6e3da;
  border-radius: 7px;
  background: #fbfdfb;
}
.box-text-section > summary {
  padding: 11px 13px;
  background: #eef6f0;
}
.box-text-section[open] > summary {
  border-bottom: 2px solid #d6e3da;
}
.box-text-section .install-scroll-list,
.box-text-section .install-disclosure-body {
  padding: 0 13px;
}
.install-scroll-list {
  max-height: min(20rem, 45vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.capacity-row {
  max-width: 850px;
  margin: 10px 0;
}
.capacity-row > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  margin-bottom: 4px;
}
.capacity-row .meter {
  height: 6px;
}
.capacity-row.over {
  color: #ae553e;
}
.capacity-row.over .meter i {
  background: #bd6246;
}
.box-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 245px;
  gap: 18px;
  align-items: start;
}
.box-panel-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.box-layout.library-collapsed {
  grid-template-columns: minmax(0, 1fr) 245px;
}
.box-layout.inspector-collapsed {
  grid-template-columns: 200px minmax(0, 1fr);
}
.box-layout.library-collapsed.inspector-collapsed {
  grid-template-columns: minmax(0, 1fr);
}
.box-layout > [hidden] {
  display: none;
}
.install-palette,
.part-inspector,
.box-editor {
  padding: 18px;
  min-width: 0;
}
.install-palette {
  max-height: 750px;
  overflow: auto;
  border-top: 4px solid #7f9eb3;
  background: #f7fafc;
}
.part-inspector {
  position: sticky;
  top: 12px;
  max-height: min(750px, calc(100vh - 24px));
  overflow: auto;
  overscroll-behavior: contain;
  border-top: 4px solid #d4a65b;
  background: #fffbf4;
}
.box-editor {
  border-top: 4px solid #78a98b;
  background: #fbfdfb;
}
.box-details {
  margin: 0 0 18px;
  border-bottom: 1px solid #dce7de;
  padding-bottom: 14px;
}
.box-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  padding: 2px 0;
}
.box-details summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}
.box-details-body {
  padding-top: 4px;
}
.component-details h3 {
  margin: 0 0 12px;
}
.palette-item {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 12px;
  margin: 5px 0;
  padding: 8px;
}
.box-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}
.box-heading h2 {
  font-size: 20px;
  margin: 0;
}
.box-heading p {
  font-size: 12px;
  color: #6e8e7b;
}
.box-canvas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}
.box-canvas-toolbar > div {
  display: flex;
  align-items: center;
}
.box-zoom-button {
  min-width: 36px;
}
.box-zoom-readout {
  min-width: 68px;
  border-radius: 0;
}
.box-stage-scroll {
  max-height: 650px;
  margin: 10px 0 16px;
  overflow: auto;
  border: 2px solid #769a84;
  border-radius: 7px;
  background: #eaf2ec;
  scrollbar-gutter: stable;
}
.box-stage-scroll:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}
.box-stage {
  position: relative;
  min-height: 700px;
  background-color: #f5faf6;
  background-image:
    linear-gradient(#e6eee8 1px, transparent 1px), linear-gradient(90deg, #e6eee8 1px, transparent 1px);
  background-size: 25px 25px;
  border: 0;
  border-radius: 0;
  margin: 0;
  overflow: hidden;
}
.box-stage > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}
.box-wire {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
  transition:
    filter 180ms,
    opacity 180ms,
    stroke-width 180ms;
}
.box-wire.preview {
  stroke-width: 2;
  stroke-dasharray: 7 5;
  pointer-events: none;
}
.box-wire.warning {
  stroke-width: 4;
  stroke-dasharray: 9 4;
  filter: drop-shadow(0 0 2px #c04c35);
}
.box-wire-node {
  stroke: #254c3c;
  stroke-width: 1.5;
}
.box-wire.connection-highlight {
  stroke-width: 5;
  filter: drop-shadow(0 0 5px #61c795);
}
.interface-port {
  position: absolute;
  z-index: 3;
  max-width: 140px;
  padding: 4px 7px;
  border: 3px solid var(--port-color, var(--orange));
  border-radius: 4px;
  background: white;
  color: var(--ink);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  cursor: crosshair;
  transform: translate(-50%, 4px) scale(var(--schematic-zoom, 1));
  transform-origin: top center;
}
.interface-port.left {
  transform: translate(4px, -50%) scale(var(--schematic-zoom, 1));
  transform-origin: center left;
}
.interface-port.right {
  transform: translate(-4px, -50%) scale(var(--schematic-zoom, 1));
  transform-origin: center right;
}
.interface-port.bottom {
  transform: translate(-50%, -4px) scale(var(--schematic-zoom, 1));
  transform-origin: bottom center;
}
.interface-port.linked {
  background: var(--mint);
}
.box-part {
  position: absolute;
  z-index: 1;
  width: 230px;
  max-width: 42%;
  background: white;
  border: 2px solid var(--part-color, #4b8a76);
  border-radius: 7px;
  box-shadow: 0 4px 12px #12382425;
  user-select: none;
  transform: scale(var(--schematic-zoom, 1));
  transform-origin: top left;
}
.box-part.selected {
  box-shadow:
    0 0 0 3px #d6a34d,
    0 4px 12px #12382425;
}
.part-title {
  padding: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
  cursor: grab;
  background: color-mix(in srgb, var(--part-color, #4b8a76) 13%, white);
  font-size: 12px;
}
.part-title:active {
  cursor: grabbing;
}
.box-part > small {
  display: block;
  padding: 3px 8px;
  color: #708879;
  font-size: 10px;
  overflow-wrap: anywhere;
}
.box-part > .part-subname {
  padding-top: 6px;
  color: #365f4a;
  font-weight: 600;
}
.hardware-face {
  position: relative;
  margin: 6px;
  padding: 27px 8px 8px;
  border: 1px solid #285f4b;
  border-radius: 5px;
  background:
    linear-gradient(28deg, transparent 48%, #b9dfc329 49% 51%, transparent 52%) 0 0 / 35px 28px,
    #397e61;
  box-shadow: inset 0 0 0 2px #8dc0a250;
}
.box-part.power .hardware-face {
  border-color: #8c989a;
  background: repeating-linear-gradient(90deg, #d8dcdb 0 5px, #c0c7c5 5px 7px);
}
.box-part.network .hardware-face {
  background-color: #47759a;
}
.box-part.module .hardware-face {
  background-color: #826947;
}
.box-part.generic .hardware-face {
  background-color: #697c72;
}
.hardware-silk {
  position: absolute;
  left: 22px;
  top: 6px;
  right: 22px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  color: white;
  font-size: 8px;
  line-height: 1.2;
}
.hardware-silk small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mount-hole {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 7px;
  border: 2px solid #cad6ce;
  border-radius: 50%;
  background: #405049;
}
.mount-hole.top-left {
  left: 5px;
  top: 5px;
}
.mount-hole.top-right {
  right: 5px;
  top: 5px;
}
.mount-hole.bottom-left {
  left: 5px;
  bottom: 5px;
}
.mount-hole.bottom-right {
  right: 5px;
  bottom: 5px;
}
.hardware-detail {
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
}
.hardware-chip {
  display: block;
  width: 35px;
  height: 16px;
  border: 2px solid #c6c2a4;
  background: repeating-linear-gradient(90deg, #272c2b 0 5px, #a7a179 5px 7px);
  box-shadow: inset 0 0 0 5px #252928;
}
.hardware-capacitor,
.hardware-coil {
  width: 12px;
  height: 17px;
  border-radius: 4px;
  background: #273c50;
  box-shadow: inset 3px 0 #8ca3ad;
}
.hardware-coil {
  width: 24px;
  background: repeating-linear-gradient(90deg, #8a5b29 0 3px, #d29851 3px 5px);
}
.hardware-fan {
  width: 22px;
  height: 22px;
  border: 4px double #697375;
  border-radius: 50%;
  background: radial-gradient(circle, #566164 0 3px, transparent 4px);
}
.hardware-vent {
  width: 58px;
  height: 18px;
  background: repeating-linear-gradient(90deg, #697375 0 3px, transparent 3px 7px);
}
.hardware-socket {
  width: 27px;
  height: 20px;
  border: 2px solid #d8d5c6;
  background: repeating-linear-gradient(90deg, #273d46 0 4px, #c5a84c 4px 6px);
}
.part-ports {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}
.part-port {
  display: flex;
  gap: 4px;
  align-items: center;
  text-align: left;
  min-width: 0;
  border: 1px solid #c5d0c8;
  border-radius: 3px;
  background: #f4f8f5;
  padding: 2px 3px;
  color: #254c3c;
  font-size: 9px;
  line-height: 1.1;
  cursor: crosshair;
  position: relative;
}
.part-port.in {
  margin-left: -15px;
}
.part-port.out,
.part-port.bidirectional {
  margin-right: -15px;
}
.button-size-preview.illuminated {
  outline: 3px solid #fff3ad;
  outline-offset: -5px;
}
.part-port i {
  position: relative;
  width: 12px;
  height: 10px;
  border: 2px solid #da914e;
  border-radius: 2px;
  background: #303a36;
  flex: none;
}
.part-port i::before,
.part-port i::after,
.part-port i b {
  content: '';
  position: absolute;
  top: 2px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #f0d77c;
}
.part-port i::before {
  left: 1px;
}
.part-port i b {
  left: 4px;
}
.part-port i::after {
  right: 1px;
}
.part-port.in i {
  border-color: #62a7c6;
}
.part-port.power i {
  border-color: #d96a54;
}
.part-port.pixel i {
  border-color: #d99b42;
}
.part-port.ethernet i {
  border-color: #9eb6bc;
  background: #45575c;
}
.part-port.usb i {
  border-color: #d2d2cd;
}
.part-port.audio i,
.part-port.dmx i {
  border-radius: 50%;
  border-color: #9b83bd;
}
.part-port > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.part-port small {
  display: block;
  overflow: hidden;
  color: #617b6d;
  font-size: 7px;
  text-overflow: ellipsis;
}
.part-port.wire-start {
  background: #ffe9bb;
  outline: 2px solid #d9982d;
  outline-offset: 1px;
}
.part-port.linked i {
  background: currentColor;
  box-shadow:
    inset 0 0 0 2px #ffffff80,
    0 0 0 1px currentColor;
}
.part-port,
.part-port i {
  transition:
    box-shadow 180ms,
    filter 180ms,
    background 180ms;
}
.part-port:hover,
.part-port.connection-highlight {
  background: #e8fff2;
  box-shadow: 0 0 9px #61c795aa;
  filter: saturate(1.15);
}
.box-wire-help {
  font-size: 12px;
  color: #6e8476;
  margin-bottom: 18px;
}
.box-connection {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 6px;
  border-top: 1px solid #e0e8e2;
  padding: 7px 0;
  font-size: 12px;
}
.box-connection b {
  color: #ae613d;
}
.part-inspector label {
  display: block;
  margin: 10px 0;
}
.part-inspector h4 {
  margin: 15px 0 6px;
}
.standards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 15px;
}
.standard-card {
  padding: 15px;
}
.standard-card h3 {
  font-size: 15px;
  line-height: 1.35;
}
.standard-card label {
  display: block;
  margin: 10px 0;
}
.hardware-defs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  max-height: min(46rem, 72vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 2px 7px 2px 2px;
}
.definition-card {
  padding: 13px;
}
.definition-card:nth-child(3n + 1) {
  border-left: 4px solid #78a98b;
  background: #f8fcf9;
}
.definition-card:nth-child(3n + 2) {
  border-left: 4px solid #d4a65b;
  background: #fffbf4;
}
.definition-card:nth-child(3n) {
  border-left: 4px solid #7f9eb3;
  background: #f7fafc;
}
.definition-card summary {
  cursor: pointer;
  font-weight: 600;
}
.definition-card summary small {
  display: block;
  color: #7c9384;
  font-weight: 400;
}
.definition-edit {
  margin-top: 15px;
}
.definition-edit label {
  display: block;
  margin: 8px 0;
}
.definition-edit h4 {
  margin: 18px 0 7px;
}
.def-port {
  border: 1px solid #d9e7dd;
  border-radius: 5px;
  padding: 7px;
  margin-bottom: 8px;
}
.help-page {
  padding: 25px;
  max-width: 900px;
}
.help-page h2 small {
  font-size: 15px;
  color: #678b76;
}
.help-step,
.help-release {
  border-top: 1px solid #dce9df;
  padding: 12px 0;
}
.help-step p {
  margin: 5px 0;
  color: #5c7567;
}
.install-empty {
  padding: 35px;
  text-align: center;
}
.route-pulse {
  r: calc(2.5px * var(--room-unit, 1));
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .route-pulse {
    display: none;
  }
}
@media (max-width: 1150px) {
  .box-layout,
  .box-layout.library-collapsed {
    grid-template-columns: minmax(0, 1fr) 240px;
  }
  .box-layout.inspector-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }
  .install-palette {
    grid-column: 1/-1;
    display: flex;
    gap: 6px;
    overflow: auto;
    max-height: none;
  }
  .install-palette h3,
  .install-palette p {
    display: none;
  }
  .palette-item {
    min-width: 130px;
  }
}
@media (max-width: 760px) {
  .box-layout,
  .box-layout.library-collapsed,
  .box-layout.inspector-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }
  .install-palette {
    grid-column: auto;
  }
  .part-inspector {
    position: static;
    grid-row: auto;
    max-height: 60vh;
  }
}

.capacity-row.near {
  color: #a57422;
}
.capacity-row.near .meter i {
  background: #d6a946;
}
.help-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #dce9df;
  margin: 18px 0;
}
.help-tabs button {
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  padding: 10px 14px;
  cursor: pointer;
  color: #567969;
}
.help-tabs button.active {
  border-color: #2e8461;
  color: #1f6348;
  font-weight: 700;
}

.external-targets {
  border: 1px solid #d6e6db;
  background: #f7fbf8;
  padding: 11px;
  border-radius: 6px;
}
.interface-editor {
  border: 1px solid #d6e6db;
  background: #f7fbf8;
  padding: 11px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.interface-editor > div:first-child,
.interface-row {
  display: flex;
  align-items: end;
  gap: 8px;
}
.interface-group {
  border-top: 1px solid var(--line);
}
.interface-group summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 2px;
  cursor: pointer;
}
.interface-group summary small {
  color: var(--muted);
}
.interface-editor p {
  font-size: 11px;
  color: var(--muted);
}
.interface-row {
  flex-wrap: wrap;
  padding: 7px 0;
  border-top: 1px solid #dfeae3;
}
.interface-row label {
  margin: 0;
}
.interface-row label:first-child {
  flex: 1 1 130px;
}
.interface-row .check,
.interface-row > span {
  font-size: 11px;
}
.port-list {
  margin-top: 12px;
}
.port-list label,
.port-list .micro,
.port-list-group summary small {
  color: var(--ink);
}
.port-list-group > summary::before {
  content: '+';
}
.port-list-group[open] > summary::before {
  content: '-';
}
.port-list-group > summary strong {
  flex: 1;
}
.port-list-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  padding: 10px;
  margin-bottom: 6px;
  border-left: 4px solid var(--orange);
  color: var(--ink);
  background: #fff;
}
.port-list-row.complete {
  border-color: var(--green);
  background: var(--mint);
}
.port-list-row > label {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
}
.port-list-row select {
  width: 100%;
  min-width: 0;
  color: var(--ink);
}
.port-list-row select:disabled {
  opacity: 1;
}
.port-list-status {
  font-size: 11px;
}
.port-list-row .interface-row {
  width: 100%;
}
.external-targets strong {
  font-size: 12px;
}
.external-targets p {
  font-size: 11px;
  color: #6d8777;
  margin: 4px 0;
}
.external-targets > div {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  max-height: 105px;
  overflow: auto;
}
.external-targets button {
  border: 1px solid #b7d2c2;
  background: white;
  color: #365f4a;
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 10px;
  cursor: crosshair;
}
.external-targets button:hover {
  background: #e5f4e9;
}

.notification-btn {
  margin-left: auto;
}
.notification-btn.has-tickets {
  border-color: #9b671d;
  background: #fff4d8;
  color: #70460c;
}
.measurement-tickets {
  padding: 14px 18px;
  margin: -8px 0 18px;
  border-left: 4px solid #d6a946;
}
.measurement-tickets h3 {
  margin: 0 0 8px;
}
.measurement-tickets button {
  display: block;
  border: 0;
  background: none;
  color: #315f4a;
  text-decoration: underline;
  text-align: left;
  padding: 5px 0;
  cursor: pointer;
}
.box-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 14px 0 0;
  border-bottom: 1px solid #d6e4da;
}
.box-view-tabs button {
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: #567969;
  padding: 9px 12px;
}
.box-view-tabs button.active {
  border-color: #2e8461;
  color: #1f6348;
  font-weight: 700;
}
.box-builder-tabs {
  margin: 0 0 18px;
}
.button-box-card {
  border-top: 4px solid var(--green);
}
.button-box-controls {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.button-box-control {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f7faf8;
}
.button-box-control > div {
  display: grid;
  gap: 7px;
}
.button-box-control small {
  color: var(--muted);
}
.button-size-preview {
  display: block;
  margin: auto;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 0 0 2px var(--ink);
}
.button-size-preview.small {
  width: 22px;
  height: 22px;
}
.button-size-preview.medium {
  width: 32px;
  height: 32px;
}
.button-size-preview.large {
  width: 44px;
  height: 44px;
}
.physical-status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  margin: 12px 0 -7px;
  color: #567969;
}
.physical-status .warn,
.layout-warning {
  color: #8a5414;
}
.physical-stage {
  min-height: 300px;
  max-height: 650px;
  background-size: 5% 5%;
  background-color: #e3e7e4;
  border: 8px solid #76847b;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px #f8faf8;
}
.physical-part {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
  min-width: 34px;
  min-height: 28px;
  border: 2px solid #365f4a;
  border-radius: 3px;
  padding: 3px;
  background: #f5f7f5;
  color: #203e32;
  box-shadow: 0 2px 5px #173c2b38;
  cursor: grab;
  user-select: none;
}
.physical-part.selected {
  outline: 3px solid #d6a34d;
  outline-offset: 2px;
}
.physical-part strong,
.physical-part small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.physical-part small {
  font-size: 8px;
}
.physical-part.board {
  background: #4f936b;
  border-color: #28583e;
  color: #fff;
}
.physical-part.psu {
  background: #aeb5b2;
  border-color: #626d68;
}
.physical-part.unknown {
  border-style: dashed;
  background: #fff4d8;
  color: #6b460f;
}
.physical-mark {
  height: 22px;
  display: grid;
  place-items: center;
}
.fan {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #5d6863;
  border-radius: 50%;
  background: repeating-conic-gradient(#69736f 0 12deg, transparent 12deg 45deg);
}
.pcb {
  display: block;
  width: 25px;
  height: 16px;
  border: 1px solid #d5e8da;
  background:
    radial-gradient(circle at 20% 30%, #d8b858 0 2px, transparent 3px),
    radial-gradient(circle at 75% 70%, #d8b858 0 2px, transparent 3px),
    linear-gradient(90deg, transparent 45%, #bcd6c3 46% 50%, transparent 51%);
}
.layout-warning {
  font-size: 11px;
  margin: 4px 0;
}
.three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 760px) {
  .physical-stage {
    min-height: 260px;
  }
  .three {
    grid-template-columns: 1fr;
  }
  .notification-btn {
    margin-left: 0;
  }
}