/* Stacker Spread — custom styles on top of Tailwind */
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background-image:
    radial-gradient(ellipse at top left, rgba(247,147,26,0.08), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(247,147,26,0.05), transparent 60%);
  background-attachment: fixed;
}

.calc-cell {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgb(38,38,38);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}
.calc-cell .lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(163,163,163);
}
.calc-cell .val {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0.25rem;
}

.range-btn.active {
  background: #f7931a;
  color: #000;
  border-color: #f7931a;
}

select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23777'><path d='M5.5 7.5l4.5 4.5 4.5-4.5z'/></svg>"); background-repeat: no-repeat; background-position: right 0.7rem center; padding-right: 2rem; }

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }