:root {
  --bg: #2b2b2f;
  --bar: #1e1e22;
  --fg: #f3f0ea;
  --muted: #a9a49c;
  --btn: #3a3a40;
  --btn-h: #4a4a52;
  --acento: #c9a86a;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  overflow: hidden;
}
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  background: var(--bar);
  border-bottom: 1px solid #000;
  flex: 0 0 auto;
}
.grp { display: flex; align-items: center; gap: 6px; }
.btn {
  min-width: 34px;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: var(--btn);
  color: var(--fg);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.btn:hover { background: var(--btn-h); }
.btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.btn:disabled { opacity: .4; cursor: default; }
.btn-txt { font-size: 13px; }
.info { color: var(--muted); min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
.stage {
  flex: 1 1 auto;
  overflow: auto;
  padding: 20px 0 40px;
  outline: none;
  scroll-behavior: smooth;
}
.status {
  margin: 60px auto;
  max-width: 480px;
  padding: 0 20px;
  text-align: center;
  color: var(--muted);
}
.status.err { color: #e6b1a6; }
.pages { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.page {
  background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
  max-width: 100%;
}
.page canvas { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .stage { scroll-behavior: auto; } }