@media (max-width: 800px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  .app { display:block; width:100%; min-height:0; }
  .app > aside, .app > main { width:100%; min-width:0; max-width:100%; }
  .app > aside { height:auto; padding:14px; }
  .app > aside nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; width:100%; overflow:visible; }
  .app > aside nav a { display:flex; align-items:center; justify-content:center; min-width:0; min-height:42px; margin:0; padding:7px 3px; white-space:normal; overflow-wrap:anywhere; text-align:center; font-size:11px; line-height:1.15; }
  .app > aside .logout { display:inline-flex; margin:12px 0 0; }
  .app > main { padding:15px; overflow:hidden; }
  main > .top { align-items:flex-start; flex-direction:column; gap:14px; }
  main > .top .button { align-self:flex-start; min-height:44px; }
  .panel { max-width:100%; }
}