/* O fundo cobre a tela; controles e texto ficam dentro da area segura. */
:root{
  --app-safe-top:env(safe-area-inset-top,0px);
  --app-safe-right:env(safe-area-inset-right,0px);
  --app-safe-bottom:env(safe-area-inset-bottom,0px);
  --app-safe-left:env(safe-area-inset-left,0px);
}
html:has(#splash.active),body.app-splash-active,body:has(#splash.active){background:#0A3D91!important;background-color:#0A3D91!important}
body.app-splash-active .install-banner,body.app-splash-active .install-fab{display:none!important}
#splash{box-sizing:border-box;background:#0A3D91!important;min-height:100svh}
#splash::before{top:50%;left:50%;right:auto;width:min(150vw,760px);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(72,151,255,.48) 0%,rgba(34,105,215,.25) 35%,transparent 70%);animation:naSplashGlow 3.2s ease-in-out infinite alternate}
#splash::after{top:-15%;bottom:auto;left:-25%;background:radial-gradient(circle,rgba(58,139,247,.22),transparent 68%);animation:naSplashDrift 5s ease-in-out infinite alternate}
#splash .splash-logo-wrap{animation:naSplashEnter .7s cubic-bezier(.22,1.4,.3,1) both,naSplashBreath 2.5s ease-in-out .7s infinite alternate}
#splash .splash-logo-ring{border-color:rgba(255,255,255,.22)}
@keyframes naSplashGlow{from{transform:translate(-50%,-50%) scale(.88);opacity:.65}to{transform:translate(-50%,-50%) scale(1.12);opacity:1}}
@keyframes naSplashDrift{from{transform:translateY(0)}to{transform:translateY(-35px)}}
@keyframes naSplashEnter{from{transform:scale(.74);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes naSplashBreath{from{transform:scale(1)}to{transform:scale(1.055)}}
.splash-loader{left:calc(24px + var(--app-safe-left));right:calc(24px + var(--app-safe-right));bottom:calc(28px + var(--app-safe-bottom))}
@media(max-width:699px){
#home .home-clean{padding-right:calc(16px + var(--app-safe-right));padding-left:calc(16px + var(--app-safe-left));padding-bottom:calc(100px + var(--app-safe-bottom))}
#courses>.app-shared-home-header,#sosAdmin>.app-shared-home-header,#adsAdmin>.app-shared-home-header{margin-top:calc(16px + var(--app-safe-top))}
#library .library-grid,#achievements .achievements-body{padding-bottom:calc(24px + var(--app-safe-bottom))}
#bookReader .br-bottom{padding-right:calc(16px + var(--app-safe-right));padding-bottom:calc(12px + var(--app-safe-bottom));padding-left:calc(16px + var(--app-safe-left))}
.story-view-layer .story-progress{margin-top:calc(12px + var(--app-safe-top));margin-right:calc(12px + var(--app-safe-right));margin-left:calc(12px + var(--app-safe-left));width:calc(100% - 24px - var(--app-safe-right) - var(--app-safe-left))}
.story-view-layer .story-view-head{padding-right:calc(12px + var(--app-safe-right));padding-left:calc(12px + var(--app-safe-left))}
.story-view-layer .story-view-bottom{padding-right:calc(16px + var(--app-safe-right));padding-bottom:calc(15px + var(--app-safe-bottom));padding-left:calc(16px + var(--app-safe-left))}
#storyEditor .story-head{height:auto;min-height:calc(56px + var(--app-safe-top));padding-top:calc(8px + var(--app-safe-top));padding-right:calc(12px + var(--app-safe-right));padding-left:calc(12px + var(--app-safe-left))}
#storyEditor .story-tools,#storyEditor .story-tool-panel,#storyEditor .story-bottom{padding-right:calc(10px + var(--app-safe-right));padding-left:calc(10px + var(--app-safe-left))}
#storyEditor .story-bottom{padding-bottom:calc(11px + var(--app-safe-bottom))}
  .community-room-modal{align-items:stretch}
  .community-room-panel{width:100%;height:100dvh;max-height:none;border-radius:0}
  .community-room-head{padding-top:calc(12px + var(--app-safe-top));padding-right:calc(16px + var(--app-safe-right));padding-left:calc(16px + var(--app-safe-left))}
  .community-room-form{padding-right:calc(13px + var(--app-safe-right));padding-left:calc(13px + var(--app-safe-left));padding-bottom:calc(10px + var(--app-safe-bottom))}
}
@media(max-height:560px){.splash-loader{bottom:calc(18px + var(--app-safe-bottom))}}
@media(prefers-reduced-motion:reduce){#splash{transition:none!important}}
@media(prefers-reduced-motion:reduce){#splash::before,#splash::after,#splash .splash-logo-wrap{animation:none!important}}