/* ==========================================================================
   Ostemio · App shell layout
   Pannello ristoratore — viewport piena, mobile-first.
   Su schermi larghi resta centrato in una colonna "device-width"
   per coerenza visiva (l'app è pensata per l'uso da smartphone).
   ========================================================================== */
.ost-app{
  display:flex;
  flex-direction:column;
  height:100dvh;
  max-width:560px;
  margin-inline:auto;
  background:var(--bg3);
  position:relative;
  isolation:isolate;
}
@media (min-width:560px){
  body{background:var(--bg2)}
  .ost-app{box-shadow:0 0 0 1px var(--border),0 24px 64px rgba(28,20,16,.12)}
}

/* ── header (uno per view, dentro la view stessa) ── */
.ost-header{
  flex-shrink:0;
  padding:calc(var(--sp-3) + var(--safe-top)) var(--sp-4) var(--sp-3);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  border-bottom:.5px solid var(--border);
  background:var(--bg3);
}
.ost-header-title{font-size:14px;font-weight:600;color:var(--txt)}
.ost-header-sub{font-size:11px;color:var(--txt3)}
.ost-header-avatar{
  width:32px;height:32px;border-radius:50%;
  background:rgba(169,65,27,.12);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:var(--terra);
  flex-shrink:0;
}

/* ── main / view switching ── */
.ost-main{flex:1;min-height:0;position:relative}
.ost-view{
  display:none;
  flex-direction:column;
  height:100%;
}
.ost-view.is-active{display:flex}
.ost-view-body{
  flex:1;
  min-height:0;
  padding-bottom:var(--sp-6);
}

/* ── bottom nav ── */
.ost-bottomnav{
  flex-shrink:0;
  display:flex;
  align-items:stretch;
  padding:0 var(--sp-1) var(--safe-bottom);
  background:var(--bg3);
  border-top:.5px solid var(--border);
}
.ost-navbtn{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  padding:8px 4px 10px;
  border:none;background:transparent;cursor:pointer;
  text-decoration:none;
  position:relative;
  -webkit-tap-highlight-color:transparent;
}
.ost-navbtn i{font-size:21px;color:var(--txt3);transition:color var(--dur-fast) var(--ease-smooth)}
.ost-navbtn span{font-size:9px;font-weight:500;color:var(--txt3);transition:color var(--dur-fast) var(--ease-smooth)}
.ost-navbtn.is-active i,.ost-navbtn.is-active span{color:var(--terra)}
.ost-navbtn-pip{
  position:absolute;top:3px;left:50%;transform:translateX(-50%);
  width:16px;height:3px;border-radius:99px;background:var(--terra);
  opacity:0;transition:opacity var(--dur-fast) var(--ease-smooth);
}
.ost-navbtn.is-active .ost-navbtn-pip{opacity:1}
.ost-navbtn-badge{
  position:absolute;top:4px;left:calc(50% + 8px);
  width:14px;height:14px;border-radius:50%;
  background:var(--terra);color:var(--crema);
  font-size:8px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--bg3);
  transition:transform var(--dur-medium) var(--ease-spring),opacity var(--dur-medium) var(--ease-smooth);
}
.ost-navbtn-badge.is-hidden{transform:scale(0);opacity:0}