:root{
  /* Layout */
  --toolbar-h: 56px;
  --max-w: 1400px;
  --gutter: 12px;

  /* Farben */
  --bg: #ffffff;
  --ui: #f5f5f7;
  --ui-border: rgba(0,0,0,0.10);
  --text: #111;

  /* Radius */
  --r: 14px;
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

body{ overflow: hidden; }

/* ---------------- Toolbar ---------------- */

.toolbar{
  height: var(--toolbar-h);
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  background: var(--ui);
  border-bottom: 1px solid var(--ui-border);

  position: sticky;
  top: 0;
  z-index: 5;

  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.toolbar > *{ flex: 0 0 auto; }
.toolbar .spacer{ flex: 1; }

.toolbar::-webkit-scrollbar{ height: 6px; }
.toolbar::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}
.toolbar::-webkit-scrollbar-track{ background: transparent; }

.btn{
  height: 38px;
  min-width: 42px;
  padding: 0 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  color: #111;

  font-size: 14px;
  line-height: 1;
  cursor: pointer;

  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:disabled{ opacity: 0.45; cursor: default; }
.btn:active{ transform: translateY(1px); }

.pageLabel{
  font-size: 14px;
  opacity: 0.8;
  white-space: nowrap;
}

/* Render-Spinner */
.renderSpinner{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.16);
  border-top-color: rgba(0,0,0,0.55);
  display: none;
  animation: spin 0.9s linear infinite;
}
.renderSpinner.on{ display: inline-block; }

@keyframes spin{ to { transform: rotate(360deg); } }

.toc{
  height: 38px;
  max-width: 320px;
  padding: 0 10px;

  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  color: #111;
  font-size: 14px;

  -webkit-tap-highlight-color: transparent;
}

.pageJump{
  height: 38px;
  width: 110px;
  padding: 0 10px;

  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  color: #111;
  font-size: 14px;

  outline: none;
}

.pageJump:focus{ border-color: rgba(0,0,0,0.22); }

/* ---------------- Stage / Viewer ---------------- */

#stage{
  height: calc(100vh - var(--toolbar-h));
  height: calc(100dvh - var(--toolbar-h));

  display: grid;
  place-items: center;

  padding: 12px;
  overflow: hidden;

  touch-action: pan-y;
  position: relative;
}

/* Wenn gezoomt: panning via scroll erlauben */
#stage.zoomed{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

/* ---------------- Spread Layout ---------------- */

#spread{
  width: min(var(--max-w), 100%);
  height: 100%;

  display: grid;
  grid-template-columns: 1fr var(--gutter) 1fr;
  align-items: center;

  background: transparent;
}

#spread.single{
  grid-template-columns: 1fr;
}

#spread.single #slotLeft,
#spread.single .gutter{
  display: none;
}

.gutter{
  width: var(--gutter);
  height: 100%;
  background: transparent;
}

.pageSlot{
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Wenn gezoomt: Slots dürfen überlaufen */
#stage.zoomed .pageSlot{
  overflow: visible;
}

/* Canvas */
canvas{
  display: block;

  max-width: 100%;
  max-height: 100%;

  width: auto;
  height: auto;

  background: #fff;

  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  border-radius: 6px;
}

/* Wenn gezoomt: kein Clamping */
#stage.zoomed canvas{
  max-width: none;
  max-height: none;
}

/* Innere Kante (Falz) */
#spread:not(.single) #slotLeft canvas{ border-right-color: rgba(0,0,0,0.11); }
#spread:not(.single) #slotRight canvas{ border-left-color: rgba(0,0,0,0.11); }

/* Solo (Cover/letzte Seite) mittig + groß */
#spread.solo-right .gutter,
#spread.solo-left .gutter{
  display: none;
}
#spread.solo-right #slotLeft{ display: none; }
#spread.solo-left  #slotRight{ display: none; }

#spread.solo-right #slotRight,
#spread.solo-left  #slotLeft{
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
}

#spread.solo-right #slotRight canvas,
#spread.solo-left  #slotLeft canvas{
  max-width: 100%;
}

/* ---------------- Hint ---------------- */

#hint{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);

  background: rgba(0,0,0,0.75);
  color: #fff;

  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;

  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------- Loading Overlay ---------------- */

.loadingOverlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(2px);

  z-index: 10;
}

.loadingOverlay.hidden{ display: none; }

.loadingCard{
  width: min(360px, calc(100% - 24px));
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.10), 0 2px 10px rgba(0,0,0,0.06);
  padding: 16px 16px 14px;
  text-align: center;
}

.spinner{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 3px solid rgba(0,0,0,0.12);
  border-top-color: rgba(0,0,0,0.55);
  margin: 0 auto 10px;
  animation: spin 0.9s linear infinite;
}

.loadingText{
  font-size: 14px;
  margin-bottom: 10px;
  opacity: 0.9;
}

.progress{
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
}

.progressBar{
  height: 100%;
  width: 0%;
  background: rgba(0,0,0,0.45);
  border-radius: 999px;
  transition: width 0.15s ease;
}

.loadingMeta{
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.7;
}

.progress.indeterminate .progressBar{
  width: 40%;
  animation: indet 1.0s ease-in-out infinite;
}

@keyframes indet{
  0%   { transform: translateX(-120%); }
  50%  { transform: translateX(60%); }
  100% { transform: translateX(220%); }
}

/* ---------------- Mobile Tweaks ---------------- */

@media (max-width: 600px){
  :root{
    --toolbar-h: 52px;
    --gutter: 0px;
  }

  .toolbar{
    padding: 8px 10px;
    gap: 8px;
  }

  .toolbar .spacer{ display: none; }

  #stage{ padding: 6px; }

  .btn{
    height: 36px;
    min-width: 40px;
    padding: 0 10px;
  }

  .toc{
    height: 36px;
    max-width: 200px;
  }

  .pageJump{
    height: 36px;
    width: 90px;
  }

  .pageLabel{ font-size: 13px; }

  #spread #slotLeft canvas,
  #spread #slotRight canvas{
    border-left-color: rgba(0,0,0,0.08);
    border-right-color: rgba(0,0,0,0.08);
  }
}

@supports (-webkit-touch-callout: none){
  #stage, #spread, .pageSlot, canvas{
    -webkit-touch-callout: none;
  }
}