.pages { margin-bottom: 10px; }
.stage {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 4px var(--line-strong), 0 22px 44px rgba(0, 0, 0, 0.5);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#paint { cursor: crosshair; }
#lines { pointer-events: none; }

.tools { max-width: 820px; margin: 14px auto 0; display: grid; gap: 12px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lbl { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tool {
  font: 700 0.95rem "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  cursor: pointer;
  touch-action: manipulation;
}
.tool[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); }
.palette { gap: 6px; }
.swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #fff;
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
  box-shadow: 0 0 0 1px var(--line), 0 3px 6px rgba(42, 36, 51, 0.25);
}
.swatch[aria-pressed="true"] { border-color: #fff; transform: scale(1.18); box-shadow: 0 0 0 3px var(--gold), 0 3px 6px rgba(42, 36, 51, 0.25); }
.custom { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); margin-left: auto; }
.custom input { width: 38px; height: 34px; padding: 0; border: 2px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.stamps .stamp { font-size: 1.7rem; padding: 4px 10px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; touch-action: manipulation; }
.stamps .stamp[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); }

#cats { margin-bottom: 8px; }
#pages { margin-bottom: 4px; }
.pages .tip { margin: 8px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--gold-soft); font-size: 0.88rem; line-height: 1.45; }
.tip:empty { display: none; }