:root {
  --bg: #eaf4ee;
  --card: #f7fcf8;
  --ink: #1f3a2a;
  --muted: #527460;
  --accent: #2f7a4d;
  --accent-2: #5e9b77;
  --border: #cbe2d3;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Roboto Mono", "Segoe UI", monospace;
  color: var(--ink);
  background: radial-gradient(circle at 10% 0%, #f4fbf6, var(--bg));
}

header {
  padding: 24px 18px 6px;
}

h1 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: 0.4px;
  font-weight: 800;
}

header p {
  margin: 4px 0 0;
  color: var(--muted);
}

main.grid {
  padding: 18px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.02rem;
}

form {
  display: grid;
  gap: 8px;
}

input,
textarea,
select,
button {
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid #bed5c6;
  font-size: 0.95rem;
}

textarea {
  resize: vertical;
}

button {
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

button:hover {
  filter: brightness(0.96);
}

.actions {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 8px;
}

.actions button:last-child {
  background: var(--accent-2);
  border-color: var(--accent-2);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.checkbox-row input {
  width: auto;
}

pre {
  margin: 0;
  max-height: 260px;
  overflow: auto;
  background: #f1f8f3;
  border: 1px solid #d5e7db;
  border-radius: 8px;
  padding: 10px;
  font-size: 0.8rem;
}

@media (max-width: 720px) {
  header {
    padding: 18px 12px 0;
  }

  main.grid {
    padding: 12px;
  }

  .actions {
    grid-template-columns: 1fr;
  }
}