:root{
  --brand-purple:#6d1f6f;
  --brand-magenta:#a81e86;
  --brand-teal:#0d7d73;
  --ui-bg:#f3f4f6;
  --ui-text:#3a3a44;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--ui-bg);
  color:var(--ui-text);
  display:flex;flex-direction:column;
  min-height:100vh;min-height:100dvh;
  overflow:hidden;
}
.stage{
  flex:1 1 auto;
  display:flex;align-items:center;justify-content:center;
  padding:18px 12px 6px;
  width:100%;
  min-height:0;
}
.book-wrap{
  width:100%;
  max-width:1040px;
  display:flex;align-items:center;justify-content:center;
}
#flipbook{width:100%;margin:0 auto;}
#flipbook .stf__item{background:#fff;}
#flipbook img{width:100%;height:100%;display:block;}
#flipbook .stf__parent{filter:drop-shadow(0 12px 26px rgba(40,20,50,.22));}

.loader{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;background:var(--ui-bg);
  z-index:20;transition:opacity .4s ease;
}
.loader.hidden{opacity:0;pointer-events:none}
.spinner{
  width:42px;height:42px;border-radius:50%;
  border:4px solid #d9d2df;border-top-color:var(--brand-magenta);
  animation:spin .8s linear infinite;
}
.loader span{font-size:14px;color:#8a8592;letter-spacing:.02em}
@keyframes spin{to{transform:rotate(360deg)}}

.toolbar{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:12px 16px calc(14px + env(safe-area-inset-bottom));
}
.btn{
  -webkit-appearance:none;appearance:none;border:0;cursor:pointer;
  width:48px;height:48px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand-purple),var(--brand-magenta));
  color:#fff;box-shadow:0 4px 12px rgba(120,30,110,.35);
  transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(120,30,110,.45)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.35;cursor:default;box-shadow:none;transform:none}
.btn svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.btn.small{width:40px;height:40px;background:#fff;color:var(--brand-purple);
  box-shadow:0 2px 8px rgba(60,40,70,.16)}
.btn.small svg{stroke:var(--brand-purple);width:18px;height:18px}

.counter{
  min-width:96px;text-align:center;font-size:14px;font-weight:600;
  color:var(--brand-purple);letter-spacing:.02em;user-select:none;
}
.fs-btn{position:absolute;top:12px;right:12px;z-index:15}

@media (max-width:640px){
  .stage{padding:10px 6px 4px}
  .btn{width:44px;height:44px}
  .counter{min-width:76px;font-size:13px}
}