/* App shell: bottom tab bar on phones, left sidebar on wide screens. */
.app{max-width:460px;margin:0 auto;padding:12px 0 110px;display:flex;flex-direction:column;gap:20px}
.tabbar{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);
  padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
.tabbar nav{max-width:460px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);gap:2px}
.tab{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;font-size:12px;color:var(--muted);border-radius:8px;text-decoration:none}
.tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab[aria-current="page"]{color:var(--accent);font-weight:700}
.tab:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

@media (min-width:900px){
  body{padding-left:230px;padding-right:24px}
  .app{max-width:640px;padding:28px 0 60px}
  .tabbar{top:0;right:auto;bottom:0;width:214px;border-top:0;border-right:1px solid var(--line);padding:24px 10px}
  .tabbar nav{max-width:none;display:flex;flex-direction:column;gap:4px}
  .tab{flex-direction:row;gap:12px;padding:10px 12px;font-size:15px;justify-content:flex-start}
}

/* Signed-out screens (login, signup): no tab bar or sidebar. */
body.auth .tabbar{display:none}
body.auth .app{padding-top:48px}
@media (min-width:900px){body.auth{padding-left:24px}}