.wb-filebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px dashed #b7c8d9;
  background: #f8fafc;
  font-size: 13px;
}
.wb-filebar input[type=file] {
  max-width: 100%;
  min-width: 0;
}
.wb-filebar .kit-sel {
  width: auto;
}

.wb-note {
  font-size: 12px;
  color: #64748b;
  line-height: 1.8;
}

.wb-options {
  margin-top: 16px;
}

.wb-checks {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px 20px;
}
.wb-checks label {
  letter-spacing: normal;
}

.wb-color {
  display: flex;
  gap: 8px;
  align-items: center;
}
.wb-color input[type=color] {
  width: 48px;
  height: 36px;
  padding: 2px;
  flex-shrink: 0;
  border: 1px solid #cbd5e1;
  background: #fff;
}

.wb-sample {
  padding: 24px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
}
.wb-sample strong {
  font-size: 26px;
}
.wb-sample p {
  margin: 12px 0 0;
}

.wb-preview {
  margin: 16px 0;
  overflow-x: auto;
}
.wb-preview table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.wb-preview th, .wb-preview td {
  text-align: left;
  padding: 8px 10px;
  border: 1px solid #dbe3ec;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 360px;
}
.wb-preview th {
  background: #f1f5f9;
}
.wb-preview button {
  white-space: nowrap;
}
.wb-preview ul {
  padding-left: 22px;
  list-style: disc;
}
.wb-preview li {
  margin: 6px 0;
}
.wb-preview a {
  color: #22509a;
}

.wb-ratio {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  color: #16294b;
}

.wb-pass {
  color: #166534;
  font-weight: 600;
}

.wb-fail {
  color: #b42318;
  font-weight: 600;
}

.wb-output {
  min-height: 210px;
  max-height: 560px;
  margin: 0 !important;
  border-top: 0 !important;
}

#workbench .kit-out > .hd:before {
  display: none;
}

.wb-help p {
  font-size: 14px;
  line-height: 1.9;
  color: #526174;
  margin: 0 0 12px;
}

.wb-related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

#workbench button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .wb-filebar {
    align-items: flex-start;
    flex-direction: column;
  }
  .wb-filebar .kit-sel {
    width: 100%;
  }
  .wb-checks {
    flex-direction: column;
  }
  .wb-sample {
    padding: 16px;
  }
  .wb-sample strong {
    font-size: 22px;
  }
  #workbench .kit-out > .hd {
    flex-wrap: wrap;
    gap: 8px;
  }
  #workbench .kit-out > .hd .a {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
}