*{box-sizing:border-box}
:root{--bg-deep:#14261b;--bg-mid:#1e3a29;--bg-darker:#0e1a12;--accent:#c6a45a;--accent-soft:rgba(198,164,90,.28);--ink:#f3efe4;--muted:#b7c4b4;--panel:rgba(10,22,14,.55);--shadow:0 28px 80px rgba(0,0,0,.45);--radius:18px;--font-display:Georgia,"Times New Roman",serif;--font-body:"Segoe UI",Tahoma,sans-serif}
html,body{margin:0;min-height:100%;font-family:var(--font-body);color:var(--ink);background:radial-gradient(ellipse 90% 60% at 15% 10%,rgba(30, 58, 41, 0.38),transparent 55%),radial-gradient(ellipse 70% 50% at 90% 85%,rgba(198,164,90,0.18),transparent 50%),linear-gradient(160deg,var(--bg-deep),var(--bg-mid) 45%,var(--bg-darker) 100%)}
.stage{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;gap:.85rem;padding:1rem 1.25rem 1.25rem}
.masthead{display:grid;gap:.7rem;padding:.85rem 1rem;border-radius:var(--radius);background:linear-gradient(135deg,rgba(12,28,18,.72),rgba(20,46,30,.5));border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 40px rgba(0,0,0,.22);backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:1rem;min-width:0}
.brand-logo{width:3.4rem;height:3.4rem;object-fit:contain;border-radius:14px;background:rgba(255,255,255,.06);padding:.28rem;border:1px solid rgba(232,215,164,.22);box-shadow:0 0 0 3px var(--accent-soft);flex-shrink:0}
.brand-mark{width:3.2rem;height:3.2rem;border-radius:50% 45% 55% 48%;background:radial-gradient(circle at 35% 30%,#e8d7a4,transparent 45%),linear-gradient(145deg,#6fad63,#2d6a3a 60%,#1a3d24);box-shadow:0 0 0 3px var(--accent-soft);flex-shrink:0}
.brand-copy{min-width:0}
.brand-name{margin:0;font-family:var(--font-display);font-size:clamp(1.2rem,2.6vw,1.85rem);font-weight:700;letter-spacing:.01em;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-sub{margin:.28rem 0 0;color:var(--muted);font-size:.9rem}
.progress-wrap{height:4px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.progress-bar{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#7db86d,var(--accent));transition:width .28s ease}
.viewer{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;min-height:0}
.book-shell{position:relative;display:grid;place-items:center;min-height:min(68vh,740px);padding:.5rem;overflow:hidden;width:100%}
.book-shell.is-panning-mode{cursor:grab;user-select:none}
.pan-surface{position:absolute;inset:0;z-index:6;cursor:grab;touch-action:none;background:transparent}
.pan-surface.is-dragging,.book-shell.is-panning-mode:active{cursor:grabbing}
.flipbook .stf__parent{margin:0 auto}
.book-glow{position:absolute;inset:12% 8%;border-radius:40%/35%;background:radial-gradient(circle,rgba(198,164,90,.22),transparent 70%);filter:blur(28px);pointer-events:none}
.book-zoom{position:relative;z-index:1;transform-origin:center center;transition:transform .18s ease}
.book-shell.is-panning-mode .book-zoom{transition:none}
.flipbook{box-shadow:var(--shadow);border-radius:6px}
.page-img{display:block;width:100%;height:100%;object-fit:contain;background:#0b140e;user-select:none;-webkit-user-drag:none}
.nav-btn,.ctrl{appearance:none;border:1px solid rgba(255,255,255,.14);background:var(--panel);color:var(--ink);cursor:pointer;backdrop-filter:blur(10px)}
.nav-btn{width:3rem;height:3rem;border-radius:999px;display:grid;place-items:center}
.nav-btn:disabled,.ctrl:disabled{opacity:.35;cursor:not-allowed}
.controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 1rem;padding:.65rem 1rem;border-radius:var(--radius);background:var(--panel);border:1px solid rgba(255,255,255,.08)}
.ctrl{padding:.45rem .95rem;border-radius:999px;font:600 .9rem/1 var(--font-body)}
.zoom-group{display:inline-flex;align-items:center;gap:.35rem}
.page-label,.zoom-label{margin:0;min-width:4.5rem;text-align:center;font-variant-numeric:tabular-nums}
.jump{display:inline-flex;align-items:center;gap:.45rem;color:var(--muted);font-size:.92rem}
.jump input{width:4.2rem;padding:.4rem .5rem;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.28);color:var(--ink);font:600 .95rem/1 var(--font-body)}
@media (max-width:800px){.viewer{grid-template-columns:1fr}.nav-btn{display:none}.book-shell{min-height:min(56vh,520px)}.brand-name{white-space:normal}}