.deck-detach-button {
  width: 30px;
  height: 24px;
  min-height: 0;
  padding: 0 !important;
  border: 1px solid var(--deck) !important;
  border-radius: 5px !important;
  color: var(--deck) !important;
  background: linear-gradient(180deg, #303740, #090c10) !important;
  font-size: 13px !important;
  cursor: pointer;
}

.deck-detach-button.active {
  color: #071014 !important;
  background: var(--deck) !important;
}

.deck-floating-placeholder {
  min-width: 0;
  min-height: 420px;
  border: 1px dashed #485361;
  border-radius: 10px;
  background: #080b0f88;
}

.hardware-layout .deck.floating-deck {
  position: fixed !important;
  z-index: 80 !important;
  width: min(560px, 46vw) !important;
  min-width: 390px !important;
  max-width: calc(100vw - 20px) !important;
  max-height: calc(100vh - 20px) !important;
  overflow: auto !important;
  resize: both !important;
  box-shadow: 0 24px 70px #000, 0 0 0 2px var(--deck), 0 0 25px color-mix(in srgb, var(--deck) 45%, transparent) !important;
}

.floating-deck .deck-head {
  cursor: grab;
  user-select: none;
}

.floating-deck.deck-dragging .deck-head {
  cursor: grabbing;
}

@media (max-width: 900px) {
  .hardware-layout .deck.floating-deck {
    width: calc(100vw - 20px) !important;
    min-width: 0 !important;
  }
}