body {
  margin: 0;
  background: #0b1225;
  color: #e5eefb;
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}

.wrap {
  max-width: 840px;
  margin: 24px auto;
  padding: 0 16px;
}

h1 {
  margin: 0 0 18px;
  font-size: 24px;
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.field span {
  color: #9fb0c9;
  font-size: 13px;
}

input,
textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: #121c38;
  color: #f1f5ff;
  padding: 10px 12px;
  font-size: 14px;
}

textarea {
  resize: vertical;
}

.actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

button {
  border: 1px solid rgba(34, 211, 238, 0.4);
  background: rgba(34, 211, 238, 0.12);
  color: #ccf7ff;
  border-radius: 9px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
}

button.ghost {
  border-color: rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.14);
  color: #dbe4ff;
}

.result {
  margin-top: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 56px;
  color: #9fb0c9;
}