:root {
  --bg: #f4f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --primary: #0f766e;
  --primary-hover: #115e59;
  --secondary: #1d4ed8;
  --secondary-hover: #1e40af;
  --tertiary: #a16207;
  --tertiary-hover: #854d0e;
  --quaternary: #7c3aed;
  --quaternary-hover: #6d28d9;
  --ok-bg: #ecfdf3;
  --ok-text: #166534;
  --err-bg: #fef2f2;
  --err-text: #991b1b;
  --border: #dbe2ea;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", -apple-system, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 15%, #dbeafe 0, transparent 35%),
    radial-gradient(circle at 85% 85%, #ccfbf1 0, transparent 35%),
    var(--bg);
  display: grid;
  place-items: center;
  padding: 24px;
}

.card {
  width: 100%;
  max-width: 640px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  padding: 28px;
}

h1 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  line-height: 1.2;
}

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

.actions {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

button {
  border: 0;
  border-radius: 10px;
  padding: 13px 16px;
  color: #fff;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .08s ease, opacity .2s ease, background .2s ease;
}

button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

#triggerProducts {
  background: var(--primary);
}

#triggerProducts:hover:not(:disabled) {
  background: var(--primary-hover);
}

#triggerStock {
  background: var(--secondary);
}

#triggerStock:hover:not(:disabled) {
  background: var(--secondary-hover);
}

#triggerProductsVariations {
  background: var(--quaternary);
}

#triggerProductsVariations:hover:not(:disabled) {
  background: var(--quaternary-hover);
}

#triggerProductsReverse {
  background: var(--tertiary);
}

#triggerProductsReverse:hover:not(:disabled) {
  background: var(--tertiary-hover);
}

#result {
  margin-top: 16px;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: .95rem;
  display: none;
  white-space: pre-wrap;
  word-break: break-word;
}

#result.ok {
  display: block;
  background: var(--ok-bg);
  color: var(--ok-text);
  border: 1px solid #bbf7d0;
}

#result.err {
  display: block;
  background: var(--err-bg);
  color: var(--err-text);
  border: 1px solid #fecaca;
}