:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #18241f;
  background: #edf4f0;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.shell { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.card {
  width: min(760px, 100%);
  padding: 32px;
  border: 1px solid #d2dfd8;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 60px rgb(22 55 39 / 10%);
}
.eyebrow { margin: 0 0 8px; color: #16805a; font-size: 12px; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(28px, 5vw, 42px); }
.description { color: #5d6d65; line-height: 1.65; }
label { display: block; margin: 24px 0 8px; font-weight: 700; }
textarea {
  width: 100%;
  resize: vertical;
  padding: 14px;
  border: 1px solid #b8c9c0;
  border-radius: 12px;
  background: #f9fcfa;
  font: 13px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
}
textarea:focus { outline: 3px solid rgb(27 153 106 / 16%); border-color: #1b996a; }
.actions { display: flex; gap: 10px; margin-top: 16px; }
button { border: 0; border-radius: 10px; padding: 11px 20px; background: #16805a; color: #fff; font-weight: 750; cursor: pointer; }
button.secondary { background: #e9f1ed; color: #30483d; }
button:disabled { opacity: .55; cursor: wait; }
.status { margin: 20px 0 0; padding: 12px 14px; border-radius: 10px; }
.status.pending { background: #fff7df; color: #745812; }
.status.success { background: #eaf8f1; color: #116544; }
.status.error { background: #fff0ed; color: #963b2f; }
.results { display: grid; gap: 10px; margin-top: 14px; }
.result { display: flex; justify-content: space-between; gap: 16px; padding: 14px; border: 1px solid; border-radius: 12px; }
.result.plus { border-color: #9bd3ba; background: #effaf4; color: #126343; }
.result.free { border-color: #e7c47b; background: #fff8e8; color: #795411; }
.result.unknown, .result.error { border-color: #e5b6ad; background: #fff4f1; color: #913b30; }
.result span { overflow-wrap: anywhere; text-align: right; }
.group-actions { display: grid; gap: 12px; margin-top: 22px; }
.group-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border: 1px solid #d7e2dc; border-radius: 12px; }
.group-action > div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.group-action button { padding: 9px 13px; }
.plus-action { background: #f3fbf7; }
.free-action { background: #fffaf0; }
.free-at-action { background: #f3f7ff; }
@media (max-width: 560px) {
  .card { padding: 22px; border-radius: 14px; }
  .result { flex-direction: column; }
  .result span { text-align: left; }
  .group-action { align-items: flex-start; flex-direction: column; }
  .group-action > div { justify-content: flex-start; }
}