:root {
  --bg: #f4f6fb;
  --card: #ffffff;
  --shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
  --purple-hue: 270;
  --orange-hue: 30;
  --focus: #2d6cdf;
  --pto-col-bg: hsl(var(--purple-hue) 60% 96%);
  --fto-col-bg: hsl(var(--orange-hue) 80% 96%);
}

/* ─ base layout ─ */
html, body {
  margin: 0;
  background: var(--bg);
  font-family: system-ui, sans-serif;
  color: #222;
}
.shell      { max-width: 900px; margin: 0 auto 4rem; padding: 1rem }
h1          { margin: 1.2rem 0; text-align: center; font-size: 1.55rem }
.card       { background: var(--card); box-shadow: var(--shadow); border-radius: .6rem; padding: 1rem; margin: 1rem 0 }

/* ─ remove native number spinners cross-browser ─ */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;   /* Firefox */
  appearance: textfield;        /* Standard */
}

/* ─ visual styling for grid ─ */
.ptoCell { background: var(--pto-col-bg); }
.ftoCell { background: var(--fto-col-bg); }
.emoji   { font-size: 1rem; line-height: 1; margin-left: .15rem; }

input[type=number]:focus {
  outline: none;
  border-bottom: 2px solid var(--focus);
}