style/style.css

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: #24292f;
}

/* GitHub-like textarea */
.github-textarea {
  width: 100%;
  min-height: 200px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #24292f;
  background-color: #ffffff;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
  resize: vertical;
}

.github-textarea:focus {
  border-color: #0969da;
  outline: none;
  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
}

/* GitHub-like select */
.github-select {
  padding: 5px 12px;
  font-size: 14px;
  line-height: 20px;
  color: #24292f;
  background-color: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  outline: none;
  box-shadow: 0 1px 0 rgba(27,31,36,0.04);
  min-width: 200px;
  cursor: pointer;
}

.github-select:focus {
  border-color: #0969da;
  outline: none;
  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
}

.github-select:hover {
  background-color: #f3f4f6;
  border-color: #b1bac4;
}

/* GitHub-like button */
.github-button {
  color: #ffffff;
  background-color: #2da44e;
  padding: 5px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  border: 1px solid rgba(27,31,36,0.15);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
  transition: all 0.2s;
}

.github-button:hover {
  background-color: #2c974b;
}

.github-button:active {
  background-color: #298e46;
  box-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
}

/* GitHub-like octicon */
.octicon {
  fill: currentColor;
  color: #57606a;
}

#output {
  min-height: 100px;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

#stats {
  color: #57606a;
  border-top: 1px solid #d0d7de;
  margin-top: 16px;
  padding-top: 16px;
}

/* Ace editor customizations */
.ace_editor {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important;
  font-size: 12px !important;
  background-color: #f6f8fa !important;
}

/* Add styles for the label */
.github-select-label {
  font-size: 14px;
  color: #57606a;
  margin-right: 8px;
}

.loading {
  color: #57606a;
  font-size: 14px;
  padding: 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.loading::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 2px solid #e5e7eb;
  border-top-color: #0969da;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-top: 2px;
}

.error {
  color: #cf222e;
  background-color: #ffebe9;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Improve Ace editor appearance */
#schema {
  height: 400px !important;
  border: 1px solid #d0d7de;
  border-radius: 6px;
}

.ace_editor {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important;
  font-size: 12px !important;
  background-color: #f6f8fa !important;
  border-radius: 6px;
}

.ace_gutter {
  background: #f6f8fa !important;
}

/* Make the textarea more GitHub-like */
.github-textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px !important;
  line-height: 1.5 !important;
  padding: 12px !important;
  min-height: 300px !important;
  max-height: 600px;
}

/* Improve output formatting */
#output {
  min-height: 300px;
  max-height: 500px;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  padding: 16px !important;
  background-color: #f6f8fa !important;
}

#output .hljs {
  background-color: transparent !important;
  padding: 0 !important;
}

/* Improve the container padding on mobile */
@media (max-width: 768px) {
  .max-w-7xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Priority badges */
.priority-critical {
  background-color: #cf222e;
  color: white;
}

.priority-high {
  background-color: #bc4c00;
  color: white;
}

.priority-medium {
  background-color: #bf8700;
  color: white;
}

.priority-low {
  background-color: #1a7f37;
  color: white;
}

/* Label styles */
.issue-label {
  padding: 2px 8px;
  border-radius: 2em;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.label-bug {
  background-color: #ffebe9;
  color: #cf222e;
}

.label-enhancement {
  background-color: #ddf4ff;
  color: #0969da;
}

.label-documentation {
  background-color: #fff8c5;
  color: #9a6700;
}

.label-security {
  background-color: #ffeff7;
  color: #bf3989;
}

.label-high-priority {
  background-color: #fff1e5;
  color: #bc4c00;
}

/* Assignee avatars */
.assignee-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #f6f8fa;
  border: 2px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #57606a;
  font-weight: 500;
}

/* Issue description styling */
.issue-description {
  font-size: 14px;
  line-height: 1.5;
  color: #24292f;
}

/* Transition for the preview */
#issue-preview {
  transition: all 0.3s ease-in-out;
  opacity: 0;
  transform: translateY(10px);
}

#issue-preview.visible {
  opacity: 1;
  transform: translateY(0);
}