/* Scoped to .pixelkit-scope so nothing here leaks onto the rest of the host
   theme, and every class/variable is prefixed pk- / pixelkit- so it can't
   collide with the theme's own .card, .btn, --brand, etc. */
.pixelkit-scope {
  --pk-ink: #1a2b3c;
  --pk-ink-soft: #55677a;
  --pk-paper: #ffffff;
  --pk-paper-soft: #f4f6f8;
  --pk-line: #e3e8ee;
  --pk-brand: #e2574c;
  --pk-brand-dark: #c8443a;
  --pk-brand-soft: #fdece9;
  --pk-ok: #1f9d55;
  --pk-radius: 14px;

  color: var(--pk-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  max-width: 640px;
}

.pixelkit-scope *,
.pixelkit-scope *::before,
.pixelkit-scope *::after {
  box-sizing: border-box;
}

.pixelkit-scope a {
  color: inherit;
}

.pixelkit-card {
  background: var(--pk-paper);
  border: 1px solid var(--pk-line);
  border-radius: var(--pk-radius);
  padding: 24px;
}

.pixelkit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: none;
  transition: transform 0.05s ease, opacity 0.15s ease, background 0.15s ease;
}

.pixelkit-btn:active {
  transform: translateY(1px);
}

.pixelkit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pixelkit-btn-primary {
  background: var(--pk-brand);
  color: white;
}

.pixelkit-btn-primary:hover:not(:disabled) {
  background: var(--pk-brand-dark);
}

.pixelkit-btn-secondary {
  background: var(--pk-paper-soft);
  color: var(--pk-ink);
  border: 1px solid var(--pk-line);
}

.pixelkit-btn-secondary:hover:not(:disabled) {
  background: var(--pk-line);
}

.pixelkit-dropzone {
  border: 2px dashed var(--pk-line);
  border-radius: var(--pk-radius);
  background: var(--pk-paper);
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.pixelkit-dropzone.pixelkit-dragover {
  border-color: var(--pk-brand);
  background: var(--pk-brand-soft);
}

.pixelkit-scope input[type="range"] {
  accent-color: var(--pk-brand);
  width: 100%;
}

.pixelkit-footnote {
  font-size: 13px;
  color: var(--pk-ink-soft);
  margin-top: 12px;
}