*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:radial-gradient(ellipse at 50% 30%,#2a2f4a 0%,#14172a 60%,#0b0d18 100%);color:#f3ece0;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;display:flex;flex-direction:column;overflow:hidden}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:rgba(8,10,20,.6);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,200,140,.15);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}.brand img{width:28px;height:42px;border-radius:2px;box-shadow:0 1px 4px #000}
.brand strong{display:block;font-family:Georgia,serif;font-size:16px}.brand span{font-size:12px;color:#ffc88c;letter-spacing:.08em;text-transform:uppercase}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
select,.btn{font:inherit;font-size:14px;color:#f3ece0;background:#232845;border:1px solid #3c4370;border-radius:8px;padding:7px 12px;text-decoration:none;cursor:pointer}
select{max-width:min(60vw,360px)}.btn:hover,select:hover{background:#2f3560;border-color:#ffb46e}
.btn.icon{padding:7px 10px}
.sr{position:absolute;left:-9999px}
#stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:14px 56px;min-height:0}
#book{width:100%;height:100%;max-width:1400px;display:flex;align-items:center;justify-content:center}
.page{background:#fff;overflow:hidden}
.page img{width:100%;height:100%;object-fit:contain;display:block;background:#fff;user-select:none;-webkit-user-drag:none}
.page.loading{background:#fbf8f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='6' fill='%23d9c3a3'/%3E%3C/svg%3E") center no-repeat}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#ffd7a8;font-size:40px;line-height:1;cursor:pointer;z-index:5}
.nav:hover{background:rgba(255,180,110,.22)}.prev{left:8px}.next{right:8px}
.foot{display:flex;align-items:center;gap:14px;padding:8px 18px 12px;font-size:13px;color:#cfc6b8}
#slider{flex:1;accent-color:#ff9a4d}#pinfo{min-width:84px;text-align:right;font-variant-numeric:tabular-nums}
.hint{opacity:.7}
.nojs{position:fixed;inset:auto 0 0 0;background:#000;padding:12px;text-align:center}
.nojs a{color:#ffc88c}
@media (max-width:700px){.brand span,.hint{display:none}#stage{padding:8px 4px}.nav{display:none}.bar{padding:8px}select{max-width:46vw}.btn{padding:6px 9px;font-size:13px}}

.banner-rascunho{background:#f5e6a8;color:#5c4813;text-align:center;font:600 12px/1.4 system-ui,sans-serif;padding:8px 12px;letter-spacing:.02em}
@media (max-width:640px){.banner-rascunho{font-size:11px;padding:6px 8px}}
.draftnote{background:#3a3016;color:#ffe9b8;border-bottom:1px solid #6b5414;font-size:13px;padding:6px 16px;text-align:center;line-height:1.4}
.draftnote .tag{background:#FFF6D6;color:#6b5414;border:1px dashed #D9B44A;border-radius:3px;padding:0 4px;font-size:11px;font-weight:bold;letter-spacing:.03em}
@media (max-width:700px){.draftnote{font-size:11.5px;padding:5px 8px}}