/* ===== P2: ajustes do croqui para a página real ===== */
html,body{height:100%}
body{width:auto;height:100%;min-height:100vh;overflow:hidden}
.app{height:100vh;transition:grid-template-columns .35s cubic-bezier(.2,.8,.2,1)}
.side{overflow-y:auto;scrollbar-width:none}
.side::-webkit-scrollbar{display:none}
.main{overflow-y:auto;scrollbar-width:thin;min-width:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.nav,.sc,.lnk,.arr,.ib,.pill,.fold,.theme span,.me,.tk,.bk,.seg span,.st,.off .ok{cursor:pointer;transition:background .2s,color .2s,transform .25s,box-shadow .2s,opacity .2s}
.nav:not(.on):hover{background:#1c1c1f;color:#fff}
.nav{white-space:nowrap}
button,.btn,.sc,.seg span{letter-spacing:normal}
.bk .au{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav.breve{opacity:.42}
.nav.breve:hover{background:transparent;color:#c9c9ce}
.nav .em{margin-left:auto;font-size:9.5px;font-weight:600;letter-spacing:.04em;color:#77777e;border:1px solid #2c2c30;border-radius:99px;padding:1px 7px}
html.fechado .nav .em{display:none}
.fold:hover{background:#26262a;color:#fff}
.sc:hover,.ib:hover,.arr:hover{box-shadow:0 0 0 1px var(--tx3);transform:translateY(-1px)}
.pill:hover{transform:translateY(-1px);opacity:.9}
.lnk:hover svg{transform:translateX(3px)}
.lnk svg{transition:transform .2s}
.me:hover{background:#1d1d20}
.tk:hover .tt{text-decoration:underline;text-underline-offset:3px}
.av{background-size:cover;background-position:center}
.av.foto{color:transparent}
/* livros: rolagem horizontal real */
.shelf{overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding-top:10px;margin-top:10px}
.shelf::-webkit-scrollbar{display:none}
/* capas: PNG como na loja (transparência preservada, sem caixa); hover estilo Apple */
.bk,.bk .bg,.bk img.cv,.bk .sem,.bk .tx{transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s cubic-bezier(.2,.8,.2,1),background .5s}
.bk .bg{transform-origin:50% 100%}
.bk img.cv{object-fit:contain;object-position:50% 100%;border-radius:0;box-shadow:none;background:transparent;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.18)) drop-shadow(0 2px 3px rgba(0,0,0,.08))!important;transform-origin:50% 100%;will-change:transform}
.bk:hover img.cv,.bk:hover .sem{transform:translateX(-50%) translateY(-12px) scale(1.045);filter:drop-shadow(0 26px 26px rgba(0,0,0,.22)) drop-shadow(0 3px 4px rgba(0,0,0,.08))!important}
.bk:hover .bg{transform:scaleY(1.025)}
.bk:hover .tx{transform:translateY(-4px)}
.bk:active img.cv,.bk:active .sem{transform:translateX(-50%) translateY(-6px) scale(1.02);transition-duration:.15s}
/* livro sem capa: capa chapada, como os PNGs da loja */
.bk .sem{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:162px;height:216px;border-radius:2px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;
  padding:22px 16px;text-align:center;color:var(--semtx);background:var(--semfundo);transform-origin:50% 100%;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.18)) drop-shadow(0 2px 3px rgba(0,0,0,.08))}
.bk .sem b{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:19px;line-height:1.15;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.bk .sem i{display:block;width:22px;height:1px;background:currentColor;opacity:.45}
.bk .sem small{font-family:var(--fs),sans-serif;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bk{--semfundo:color-mix(in srgb,var(--c) 34%,#fbfaf7);--semtx:#17171a}
html[data-theme=dark] .bk{--semfundo:color-mix(in srgb,var(--c) 38%,#232327);--semtx:#f1f1f3}
.bk.semcapa{--c:var(--cs,#9a9aa0)}
.vazio{margin-top:18px;padding:26px;border-radius:18px;background:var(--pan);color:var(--tx2);font-size:14px}
/* agenda */
.ev .b small{display:block;margin-top:2px}
.ev .meet:hover{opacity:.85}
.agcon{margin-top:18px;border-radius:20px;background:var(--pan);padding:22px;display:flex;flex-direction:column;gap:12px}
.agcon b{font-size:15px}
.agcon p{font-size:13px;color:var(--tx2);line-height:1.5}
.btn{height:40px;border-radius:99px;background:var(--inv);color:var(--invtx);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;font-size:13.5px;font-weight:600;transition:opacity .2s,transform .2s}
.btn:hover{opacity:.88;transform:translateY(-1px)}
.btn.sec{background:var(--card);color:var(--tx);box-shadow:0 0 0 1px var(--ln)}
.agvazio{margin-top:16px;font-size:13px;color:var(--tx3)}
/* atalhos extras */
.short{flex-wrap:wrap}
.short .mais{display:none;order:50}
.short .sc.more{order:99}
.short.aberto .mais{display:flex;animation:sobe .4s cubic-bezier(.2,.8,.2,1) both}
.short.aberto .sc.more svg{transform:rotate(180deg)}
.sc.more svg{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
/* onboarding: passo feito */
.passo .btn{transition:opacity .3s,transform .3s}
.passo.ok .btn{display:none}
.passo .feito{display:none;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#3f7a52}
html[data-theme=dark] .passo .feito{color:#9ed4ae}
.passo.ok .feito{display:flex}
.passo.ok .n{font-size:0}
.passo.ok .n:after{content:"";width:7px;height:12px;border:solid #0c0c0d;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
/* animação de entrada */
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.anim{animation:sobe .55s cubic-bezier(.2,.8,.2,1) both}
.carregando .card,.carregando .hero,.carregando .short{opacity:.0}
/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;background:#0c0c0d;color:#fff;font-size:13.5px;font-weight:500;
  padding:12px 20px;border-radius:99px;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:all .3s cubic-bezier(.2,.8,.2,1);z-index:60;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
html[data-theme=dark] .toast{background:#f1f1f3;color:#0c0c0d}