.token-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: var(--groupui-sys-spacing-600);
}
.token-workspace > groupui-card {
  min-width: 0;
  box-shadow: var(--app-shadow-sm);
  border-radius: var(--groupui-sys-border-radius-m);
}
.token-generator,
.token-result {
  display: grid;
  gap: var(--groupui-sys-spacing-400);
  min-width: 0;
  justify-items: start;
}
.token-result {
  width: 100%;
}
.token-generator form {
  width: 100%;
  margin-block: var(--groupui-sys-spacing-300);
}
.token-result > textarea {
  width: 100%;
}
.token-result [hidden] {
  display: none;
}
.vcf-output {
  width: 100%;
  max-height: 65vh;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.token-result > label {
  margin-bottom: 0;
}
.token-workspace .result-empty {
  gap: var(--groupui-sys-spacing-500);
  min-height: 320px;
  max-width: 440px;
  padding-block: 24px;
}
.token-workspace .result-empty > groupui-text {
  max-width: 34ch;
}

@media (max-width: 1100px) {
  .token-workspace {
    grid-template-columns: 1fr;
  }
  .token-workspace .result-empty {
    min-height: 200px;
  }
}
.vcf-endpoint {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--groupui-sys-color-line-weak);
  border-radius: var(--groupui-sys-border-radius-s);
  background: var(--groupui-sys-color-background-base);
}
.vcf-endpoint > code {
  display: block;
  margin: 8px 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.vcf-endpoint small {
  color: var(--groupui-sys-color-text-weak);
}