.hvv-capakey-tool {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}

.hvv-capakey-title {
  margin: 0 0 8px 0;
  font-size: 28px;
  line-height: 1.2;
}

.hvv-capakey-intro {
  margin: 0 0 16px 0;
  color: #333;
}

.hvv-capakey-panel {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 220px minmax(260px, 0.75fr);
  gap: 18px 24px;
  align-items: start;
  background: #ffffff;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.hvv-capakey-input-block,
.hvv-capakey-actions,
.hvv-capakey-tips {
  box-sizing: border-box;
}

.hvv-capakey-label {
  display: block;
  margin: 0 0 10px 0;
  font-weight: 700;
  color: #111;
}

.hvv-capakey-input {
  width: 100%;
  min-height: 130px;
  box-sizing: border-box;
  border: 1px solid #bfc5cc;
  border-radius: 8px;
  padding: 12px;
  font-family: monospace;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  background: #fff;
}

.hvv-capakey-input:focus {
  outline: none;
  border-color: #F77A2C;
  box-shadow: 0 0 0 3px rgba(247, 122, 44, 0.18);
}

.hvv-capakey-small-help {
  margin-top: 8px;
  color: #666;
  font-size: 14px;
}

.hvv-capakey-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 36px;
}

.hvv-capakey-submit,
.hvv-capakey-clear {
  border: none;
  border-radius: 8px;
  padding: 13px 18px;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  min-height: 48px;
}

.hvv-capakey-submit {
  background: #F77A2C;
  color: #fff;
  box-shadow: 0 2px 5px rgba(247, 122, 44, 0.25);
}

.hvv-capakey-submit:hover,
.hvv-capakey-submit:focus {
  background: #E06900;
}

.hvv-capakey-submit:disabled {
  opacity: 0.65;
  cursor: wait;
}

.hvv-capakey-clear {
  background: #f5f5f5;
  color: #333;
  border: 1px solid #d2d2d2;
}

.hvv-capakey-clear:hover,
.hvv-capakey-clear:focus {
  background: #eeeeee;
}

.hvv-capakey-tips {
  border: 1px solid #9bbce6;
  border-radius: 10px;
  background: #f4f9ff;
  padding: 16px 18px;
  color: #15385c;
}

.hvv-capakey-tips strong {
  display: block;
  margin-bottom: 8px;
}

.hvv-capakey-tips ul {
  margin: 0;
  padding-left: 18px;
}

.hvv-capakey-tips li {
  margin: 5px 0;
}

.hvv-capakey-status {
  grid-column: 1 / -1;
  margin-top: -4px;
  font-weight: 700;
}

.hvv-capakey-status.error {
  color: #b00020;
}

.hvv-capakey-status.success {
  color: #0B5D1E;
}

.hvv-capakey-map {
  width: 100%;
  min-height: 360px;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  overflow: hidden;
}

.hvv-capakey-results {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) 1fr 1fr;
  gap: 0;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
  background: #fff;
}

.hvv-capakey-result-summary,
.hvv-capakey-result-block {
  padding: 4px 20px;
}

.hvv-capakey-result-summary {
  border-right: 1px solid #ddd;
}

.hvv-capakey-result-summary strong,
.hvv-capakey-result-block strong {
  display: block;
  margin-bottom: 10px;
  font-size: 17px;
}

.hvv-capakey-found-count,
.hvv-capakey-total-count {
  color: #E06900;
  font-weight: 800;
}

.hvv-capakey-missing-count {
  color: #d00000;
  font-weight: 800;
}

.hvv-capakey-chip {
  display: inline-block;
  margin: 4px 4px 0 0;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 13px;
  background: #f0f0f0;
}

.hvv-capakey-chip.found {
  background: rgba(247, 122, 44, 0.18);
  border: 1px solid rgba(224, 105, 0, 0.55);
}

.hvv-capakey-chip.missing {
  background: rgba(208,0,0,0.1);
  border: 1px solid rgba(208,0,0,0.35);
}

.hvv-capakey-note {
  margin: 12px 0 0 0;
  color: #666;
  font-size: 14px;
}


.hvv-capakey-kaart-jachtgebied {
  stroke: #1F7A2E !important;
  stroke-width: 1.4px !important;
  stroke-opacity: 0.85 !important;
  fill: #7FEA6B !important;
  fill-opacity: 0.32 !important;
}

.hvv-capakey-kaart-niet-bejaagbaar {
  stroke: #B00000 !important;
  stroke-width: 1.4px !important;
  stroke-opacity: 0.9 !important;
  fill: #E53935 !important;
  fill-opacity: 0.32 !important;
}

.hvv-capakey-kaart-polygon {
  stroke: #E06900 !important;
  stroke-width: 3px !important;
  stroke-opacity: 1 !important;
  fill: #FF8C1A !important;
  fill-opacity: 0.55 !important;
}

.hvv-capakey-kaart-highlight {
  stroke: #CC4D00 !important;
  stroke-width: 4px !important;
  stroke-opacity: 1 !important;
  fill: #FF7A00 !important;
  fill-opacity: 0.65 !important;
}

@media (max-width: 900px) {
  .hvv-capakey-panel {
    grid-template-columns: 1fr;
  }

  .hvv-capakey-actions {
    padding-top: 0;
  }

  .hvv-capakey-results {
    grid-template-columns: 1fr;
  }

  .hvv-capakey-result-summary {
    border-right: none;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
    padding-bottom: 14px;
  }

  .hvv-capakey-result-block {
    padding: 12px 0 0 0;
  }
}