/* ============================================================
   PWA38 — banner de instalação · Fase 5 (usa tokens do :root do core)
   ============================================================ */
.pwa38-banner{
  position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));
  z-index:1600;display:flex;align-items:center;gap:12px;
  background:var(--surface,#191c22);border:1px solid var(--accent,#dd9933);
  border-radius:14px;padding:12px 14px;box-shadow:0 14px 40px rgba(0,0,0,.5);
  max-width:520px;margin:0 auto;
}
.pwa38-ico{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:10px;
  background:var(--accent-soft,rgba(221,153,51,.14));color:var(--accent,#dd9933);
}
.pwa38-ico svg{width:22px;height:22px}
.pwa38-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:12.5px;color:var(--text2,#b6bcc8);line-height:1.35}
.pwa38-txt b{color:var(--text,#f2f3f5);font-size:13.5px;font-weight:700}
.pwa38-txt span{color:var(--muted,#8a919e)}
.pwa38-btn{
  align-self:flex-start;margin-top:6px;background:var(--accent,#dd9933);color:#141008;
  border:none;border-radius:8px;padding:9px 16px;font:inherit;font-size:13px;font-weight:700;
  cursor:pointer;min-height:40px;
}
.pwa38-btn:hover{filter:brightness(1.08)}
.pwa38-x{
  flex:none;background:none;border:none;color:var(--muted,#8a919e);
  font-size:22px;line-height:1;cursor:pointer;padding:2px 6px;align-self:flex-start;
}
.pwa38-x:hover{color:var(--text,#f2f3f5)}

/* no celular o botão ocupa a linha toda, abaixo do texto */
@media(max-width:520px){
  .pwa38-banner{align-items:flex-start}
  .pwa38-btn{align-self:stretch;width:100%;text-align:center;min-height:44px}
}