.hid-panel {
  margin: 12px 0 18px;
  padding: 16px;
  border: 1px solid #cddde2;
  border-radius: 14px;
  background: #f7fafb;
  box-shadow: 0 10px 30px rgba(16, 42, 67, 0.08);
}

.hid-panel-header,
.hid-actions,
.hid-mapping-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hid-panel-header {
  justify-content: space-between;
  margin-bottom: 12px;
}

.hid-panel-header h2 {
  margin: 0;
  font-size: 1rem;
  color: #123c53;
}

.hid-panel-header button {
  min-width: 34px;
  padding: 5px 9px;
}

.hid-status {
  margin: 8px 0 12px;
  padding: 9px 11px;
  border-radius: 9px;
  background: #e8f2f4;
  color: #264653;
  font-size: 0.9rem;
}

.hid-status[data-kind="ok"] {
  background: #e1f4ed;
  color: #17624d;
}

.hid-status[data-kind="error"] {
  background: #fae8e8;
  color: #8a2835;
}

.hid-actions {
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.hid-actions button {
  flex: 1 1 190px;
}

.hid-device-list {
  margin: 8px 0 14px;
  font-size: 0.9rem;
}

.hid-device-list ul {
  margin: 5px 0 0;
  padding-left: 20px;
}

.hid-mappings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 14px;
}

.hid-mapping-row {
  justify-content: space-between;
  font-size: 0.86rem;
}

.hid-mapping-row select {
  min-width: 125px;
}

.hid-generic {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #d8e4e7;
}

.hid-generic summary {
  cursor: pointer;
  color: #315b6c;
  font-weight: 600;
}

.hid-learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.hid-report {
  display: block;
  min-height: 1.4em;
  margin-top: 9px;
  overflow-wrap: anywhere;
  color: #5c6f78;
  font: 0.76rem ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (max-width: 640px) {
  .hid-mappings {
    grid-template-columns: 1fr;
  }
}