/* Patchpaneel — copper bay */
.patchpanel {
  background:
    linear-gradient(180deg, #243440 0%, #1b2833 100%);
  border: 1px solid #3a5260;
  border-radius: 16px;
  padding: 14px;
  margin: 1.5rem 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, auto);
  gap: 8px;
  width: 100%;
  max-width: 520px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 18px 40px rgba(0, 0, 0, .35);
  contain: layout style;
}

.patchpanel .port {
  min-height: 56px;
  min-width: 0;
  background: #121a22;
  border: 1px solid #2f4452;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-family: "JetBrains Mono", Consolas, monospace;
  color: #e8eef2;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
  line-height: 1.2;
  text-align: center;
  padding: 6px 4px;
  font-size: 0.75rem;
  word-break: break-word;
}

.patchpanel .port .num {
  font-size: 0.65rem;
  color: #8fa0ab;
  margin-bottom: 2px;
  letter-spacing: .04em;
}

.patchpanel .port:hover {
  background: #182430;
  border-color: #d4844a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(212, 132, 74, .2);
}

.patchpanel .port.chosen { cursor: default; }

.patchpanel .port.correct {
  background: #7eb8a8;
  border-color: #7eb8a8;
  color: #0e151c;
  box-shadow: 0 0 0 1px #7eb8a8;
}

.patchpanel .port.wrong {
  background: #d65a4a;
  border-color: #d65a4a;
  color: #1a0c0a;
}

@keyframes port-pulse-correct {
  0% { box-shadow: 0 0 0 0 rgba(126, 184, 168, .7); }
  60% { box-shadow: 0 0 0 14px rgba(126, 184, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(126, 184, 168, 0); }
}
@keyframes port-pulse-wrong {
  0% { box-shadow: 0 0 0 0 rgba(214, 90, 74, .7); }
  60% { box-shadow: 0 0 0 14px rgba(214, 90, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(214, 90, 74, 0); }
}

.patchpanel .port.port--pulse.correct { animation: port-pulse-correct .7s ease-out; }
.patchpanel .port.port--pulse.wrong { animation: port-pulse-wrong .7s ease-out; }

.patchpanel .port.zone-pc { border-color: #4a8fd4; }
.patchpanel .port.zone-server { border-color: #5aad6e; }
.patchpanel .port.zone-camera { border-color: #d4a84a; }
.patchpanel .port.zone-ap { border-color: #8b7cc9; }
.patchpanel .port.zone-printer { border-color: #d4844a; }
.patchpanel .port.zone-blank { border-color: #3a5260; color: #8fa0ab; }

@media (prefers-reduced-motion: reduce) {
  .patchpanel .port.port--pulse.correct,
  .patchpanel .port.port--pulse.wrong { animation: none; }
}