.ut-result-panel {
  width: 100%;
  max-width: 900px;
  margin: 18px auto 0;
  padding: 22px 26px;
  border: 1px solid #dce5f4;
  border-radius: 18px;
  background: #f8fafd;
  box-shadow: 0 10px 28px rgba(30, 64, 175, 0.08);
  text-align: center;
}

.ut-result-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
  color: #1f9d4c;
  font-size: 1.12rem;
  font-weight: 800;
}

.ut-result-preview {
  display: block;
  max-width: 100%;
  margin: 18px auto 0;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}

.ut-result-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 160px 160px;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 0;
}

.ut-result-row + .ut-result-row {
  border-top: 1px solid #e2e8f0;
}

.ut-result-row--single {
  grid-template-columns: minmax(220px, 1fr) 160px;
}

.ut-result-label {
  min-width: 0;
  margin: 0;
  color: #12213a;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  overflow-wrap: anywhere;
}

.ut-result-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin: 14px auto 0;
}

.ut-result-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 48px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}

.ut-result-button i {
  margin-right: 7px;
}

.ut-result-button--copy,
.ut-result-button--secondary {
  border-color: #bfd0f4;
  background: #eef4ff;
  color: #2453a6;
}

.ut-result-button--download,
.ut-result-button--primary {
  background: linear-gradient(135deg, #3266f5, #7440ed);
  color: #fff;
  box-shadow: 0 8px 18px rgba(74, 77, 231, 0.20);
}

.ut-result-button:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.ut-result-button--copy:hover,
.ut-result-button--secondary:hover {
  background: #e2ecff;
  color: #173f84;
}

.ut-result-button--download:hover,
.ut-result-button--primary:hover {
  color: #fff;
  box-shadow: 0 10px 22px rgba(74, 77, 231, 0.28);
}

.ut-result-button:focus-visible {
  outline: 3px solid rgba(50, 102, 245, 0.28);
  outline-offset: 2px;
}

.ut-result-button:disabled,
.ut-result-button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (max-width: 767px) {
  .ut-result-panel {
    padding: 18px 14px;
  }

  .ut-result-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 0;
  }

  .ut-result-label {
    grid-column: 1 / -1;
    text-align: center;
  }

  .ut-result-row--single {
    grid-template-columns: 1fr;
  }

  .ut-result-row--single .ut-result-button {
    width: min(100%, 280px);
    justify-self: center;
  }

  .ut-result-button {
    width: 100%;
  }

  .ut-result-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ut-result-actions > .ut-result-button:only-child {
    grid-column: 1 / -1;
    width: min(100%, 280px);
    justify-self: center;
  }
}