:root{
 --fundo:#fbf6ec;--fundo2:#f3ecdc;--cartao:#ffffff;--texto:#2b2f45;--suave:#6b6f86;--borda:#ebe3d2;
 --destaque:#3d4aa8;--destaque-texto:#ffffff;--ouro:#d9a53c;--chip:#efe8f9;--chip-texto:#4a3f7a;--sombra:0 6px 20px rgba(43,47,69,.08);
 --raio:20px;--fonte:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,-apple-system,sans-serif;--leitura:Georgia,"Iowan Old Style","Palatino Linotype",serif;
 --tam-texto:19px;
}
body.noite{
 --fundo:#10163a;--fundo2:#0b1030;--cartao:#1b2350;--texto:#e9ecff;--suave:#aab0d8;--borda:#2a3366;
 --destaque:#f6d77a;--destaque-texto:#1b2347;--ouro:#f6d77a;--chip:#26306a;--chip-texto:#d9dcff;--sombra:0 6px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden}
body{background:var(--fundo);color:var(--texto);font-family:var(--fonte);-webkit-font-smoothing:antialiased;transition:background .6s,color .6s;min-height:100vh}
body.noite{background:radial-gradient(120% 70% at 50% 0%,#1d2660 0%,#10163a 55%,#0b1030 100%) fixed}
#ceu{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .8s;z-index:0}
body.noite #ceu{opacity:1}
#app{position:relative;z-index:1;max-width:620px;margin:0 auto;padding:0 16px calc(120px + env(safe-area-inset-bottom))}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
.ico{flex:none;display:block}

/* Topo */
.topo{display:flex;align-items:center;gap:10px;padding:calc(14px + env(safe-area-inset-top)) 0 10px;position:sticky;top:0;z-index:5;background:linear-gradient(var(--fundo) 70%,transparent)}
body.noite .topo{background:linear-gradient(rgba(16,22,58,.96) 70%,transparent)}
.marca{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.2px;margin-right:auto}
.marca .selo{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#1b2347;color:#f6d77a}
body.noite .marca .selo{background:#f6d77a;color:#1b2347}
.botao-redondo{width:44px;height:44px;border-radius:50%;border:1px solid var(--borda);background:var(--cartao);display:grid;place-items:center;box-shadow:var(--sombra)}
.botao-redondo[aria-pressed="true"]{background:var(--destaque);color:var(--destaque-texto);border-color:transparent}

/* Biblioteca */
.saudacao{margin:8px 0 4px;font-size:28px;line-height:1.15;font-weight:800;letter-spacing:-.5px}
.sub{margin:0 0 16px;color:var(--suave);font-size:15.5px;line-height:1.45}
.faixa-previa{display:flex;gap:12px;align-items:center;background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio);padding:14px;margin:0 0 18px;box-shadow:var(--sombra)}
.faixa-previa .ic{width:40px;height:40px;border-radius:12px;background:var(--chip);color:var(--chip-texto);display:grid;place-items:center;flex:none}
.faixa-previa p{margin:0;font-size:14.5px;line-height:1.4}
.faixa-previa strong{display:block;font-size:15px}
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:14px 22px;font-weight:800;font-size:16px;text-decoration:none;background:var(--destaque);color:var(--destaque-texto);box-shadow:var(--sombra)}
.botao.pequeno{padding:10px 16px;font-size:14px}
.botao.claro{background:var(--chip);color:var(--chip-texto);box-shadow:none}
.filtros{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;margin:0 -16px 6px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--borda);background:var(--cartao);color:var(--texto);border-radius:999px;padding:9px 15px;font-size:14.5px;font-weight:700;text-transform:capitalize}
.chip[aria-pressed="true"]{background:var(--destaque);color:var(--destaque-texto);border-color:transparent}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cartao{position:relative;display:flex;flex-direction:column;text-align:left;border:1px solid var(--borda);background:var(--cartao);border-radius:var(--raio);overflow:hidden;padding:0;box-shadow:var(--sombra);transition:transform .2s}
.cartao:active{transform:scale(.98)}
.cartao .capa{width:100%;aspect-ratio:4/3;display:block}
.cartao .info{padding:10px 12px 13px;display:flex;flex-direction:column;gap:6px}
.cartao h3{margin:0;font-size:15.5px;line-height:1.25}
.meta{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--suave);flex-wrap:wrap}
.tema{background:var(--chip);color:var(--chip-texto);border-radius:999px;padding:2px 9px;font-weight:700;text-transform:capitalize}
.selo-cartao{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800;background:rgba(255,255,255,.92);color:#1b2347}
.selo-cartao.gratis{background:#f6d77a}
.cartao.trancada .capa{filter:saturate(.75) brightness(.92)}
.destaque-cartao{grid-column:1/-1}
.destaque-cartao .capa{aspect-ratio:16/9}
.destaque-cartao h3{font-size:19px}
.vazio{color:var(--suave);text-align:center;padding:30px 0}

/* Leitor */
.leitor .capa-grande{width:100%;aspect-ratio:4/3;border-radius:24px;overflow:hidden;box-shadow:var(--sombra);margin:4px 0 18px}
.leitor .capa-grande .capa{width:100%;height:100%;display:block}
.leitor h1{font-size:30px;line-height:1.12;margin:0 0 8px;letter-spacing:-.5px}
.leitor .meta{font-size:14px;margin-bottom:22px}
.texto{font-family:var(--leitura);font-size:var(--tam-texto);line-height:1.75}
.texto p{margin:0 0 1.05em;border-radius:10px;padding:2px 6px;margin-left:-6px;margin-right:-6px;transition:background .5s,color .5s}
.texto p.fala{padding-left:14px;border-left:3px solid var(--ouro);border-radius:0 10px 10px 0;margin-left:0}
.texto p.lendo{background:rgba(246,215,122,.22)}
body:not(.noite) .texto p.lendo{background:rgba(61,74,168,.1)}
.final{margin:28px 0 10px;padding:22px 20px;border-radius:24px;background:var(--cartao);border:1px solid var(--borda);text-align:center;box-shadow:var(--sombra)}
.final .ic{width:46px;height:46px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;background:var(--chip);color:var(--ouro)}
.final h2{margin:0 0 6px;font-size:16px;color:var(--suave);font-weight:700}
.final p{margin:0;font-family:var(--leitura);font-size:20px;line-height:1.5}
.ref{margin-top:16px;color:var(--suave);font-size:13.5px;text-align:center}

/* Barra de narração */
.player{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--fundo) 30%)}
body.noite .player{background:linear-gradient(transparent,rgba(11,16,48,.97) 30%)}
.player-caixa{max-width:588px;margin:0 auto;display:flex;align-items:center;gap:10px;background:var(--cartao);border:1px solid var(--borda);border-radius:999px;padding:8px 8px 8px 10px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.player .principal{display:flex;align-items:center;gap:10px;border:0;background:var(--destaque);color:var(--destaque-texto);border-radius:999px;padding:12px 20px;font-weight:800;font-size:16px}
.player .rotulo{flex:1;min-width:0;font-size:13px;color:var(--suave);line-height:1.25}
.player .rotulo b{display:block;color:var(--texto);font-size:14px}
.player .rotulo span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .botao-redondo{width:42px;height:42px;box-shadow:none}
.ondas-som{display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.ondas-som i{width:3px;background:currentColor;border-radius:2px;animation:som 1.1s ease-in-out infinite}
.ondas-som i:nth-child(2){animation-delay:-.3s}.ondas-som i:nth-child(3){animation-delay:-.6s}
@keyframes som{0%,100%{height:4px}50%{height:14px}}

/* Folha de opções / bloqueio */
.fundo-folha{position:fixed;inset:0;background:rgba(10,14,40,.55);z-index:30;display:flex;align-items:flex-end;justify-content:center;animation:aparece .25s}
.folha{width:100%;max-width:620px;background:var(--cartao);color:var(--texto);border-radius:26px 26px 0 0;padding:22px 20px calc(24px + env(safe-area-inset-bottom));animation:sobe .3s;max-height:85vh;overflow:auto}
.folha h2{margin:0 0 8px;font-size:21px}
.folha p{color:var(--suave);line-height:1.5;margin:0 0 16px}
.folha .capa{width:100%;aspect-ratio:16/9;border-radius:18px;display:block;margin-bottom:14px}
.folha label{display:block;font-weight:700;font-size:14px;margin:14px 0 6px}
.folha select,.folha input[type=range]{width:100%}
.folha select{padding:12px;border-radius:12px;border:1px solid var(--borda);background:var(--fundo);color:var(--texto);font:inherit}
.linha-botoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
@keyframes aparece{from{opacity:0}}
@keyframes sobe{from{transform:translateY(40px);opacity:.4}}

#aviso{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top));transform:translate(-50%,-20px);opacity:0;z-index:40;background:#1b2347;color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;font-size:14.5px;display:flex;gap:8px;align-items:center;transition:.35s;pointer-events:none;max-width:calc(100% - 32px)}
#aviso.ver{opacity:1;transform:translate(-50%,0)}
body.noite #aviso{background:#f6d77a;color:#1b2347}

/* Animações das capas em motion */
.capa *{transform-box:fill-box;transform-origin:center}
.m-pisca{animation:pisca 3.5s ease-in-out infinite}
.m-brilho{animation:brilho 5s ease-in-out infinite}
.m-deriva{animation:deriva 60s linear infinite}
.m-respira{animation:respira 4.5s ease-in-out infinite;transform-origin:50% 100%}
.m-balanca{animation:balanca 5s ease-in-out infinite;transform-origin:50% 100%}
.m-onda{animation:onda 6s linear infinite}
.m-onda2{animation-duration:9s}
.m-flutua{animation:flutua 5s ease-in-out infinite}
.m-some{animation:some 12s ease-in-out infinite}
.m-voa{animation:voa 7s ease-in-out infinite}
.m-asa{animation:asa .9s ease-in-out infinite;transform-origin:0% 100%}
.m-chama{animation:chama 1.4s ease-in-out infinite;transform-origin:50% 100%}
.m-jato{animation:jato 3s ease-in-out infinite;transform-origin:50% 100%}
.m-zz{animation:zz 3.5s ease-in-out infinite}
@keyframes pisca{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes brilho{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes deriva{from{transform:translateX(-60px)}to{transform:translateX(120px)}}
@keyframes respira{0%,100%{transform:scale(1)}50%{transform:scale(1.025,1.04)}}
@keyframes balanca{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes onda{from{transform:translateX(0)}to{transform:translateX(40px)}}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes some{0%,15%{opacity:1}55%,80%{opacity:.08}100%{opacity:1}}
@keyframes voa{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-10px)}}
@keyframes asa{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-.4)}}
@keyframes chama{0%,100%{transform:scale(1,1)}50%{transform:scale(.92,1.1)}}
@keyframes jato{0%,60%,100%{opacity:0;transform:scaleY(.4)}75%{opacity:1;transform:scaleY(1)}}
@keyframes zz{0%{opacity:0;transform:translate(0,0)}40%{opacity:.8}100%{opacity:0;transform:translate(8px,-14px)}}
@media (prefers-reduced-motion: reduce){.capa *,.ondas-som i{animation:none!important}}
@media (min-width:560px){.grade{grid-template-columns:repeat(3,1fr)}.destaque-cartao{grid-column:span 3}}