/* ─── PAGES ──────────────────────────────────────────────────────────────────── */
.pages {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0; /* Required for CSS grid 1fr row to work correctly */
}

.pages::-webkit-scrollbar {
  width: 3px;
}

.pages::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.page {
  display: none;
  padding: var(--page-padding);
  animation: fadeUp 0.2s ease;
}

.page.active {
  display: block;
  min-height: 200px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}


/* ── Gear button ─────────────────────────────────────────────────────────── */
.gear-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0.5px solid var(--border);
  background: var(--card);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.15s, transform 0.25s var(--ease-precise);
}
.gear-btn:hover { border-color: var(--gold-border); color: var(--gold); transform: translateY(-4px); }