.app-footer { position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--bg-color); border-top: 1px solid var(--border-color, #ccc); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); z-index: 100; padding: 0.2rem 0; margin: 0; }
.footer-content { display: flex; justify-content: center; align-items: center; max-width: 100%; margin: 0 auto; }
.footer-nav { display: flex; justify-content: space-around; align-items: center; width: 100%; max-width: 600px; }
.nav-icon { display: flex; justify-content: center; align-items: center; background: none; border: none; cursor: pointer; padding: 0.7rem; color: var(--text-color); transition: color 0.3s, transform 0.2s; text-decoration: none; }
.nav-icon:hover, .nav-icon:focus { color: var(--accent-color); transform: scale(1.1); }
.nav-icon svg { width: 40px; height: 40px; }
main { padding-bottom: 70px; min-height: calc(100vh - 70px); }
@media (max-width: 480px) { .nav-icon svg { width: 45px; height: 35px; } .app-footer { padding: 0.2rem 0; } }