/* ══════════════════════════════════════════════════════════════
   ELLY OS — UNIVERSAL BOTTOM NAV (shared across every page)
   Include with: <link rel="stylesheet" href="nav.css">
   Flat, horizontally-scrolling bar — one button per page.
   ══════════════════════════════════════════════════════════════ */

.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);background:rgba(255,255,255,0.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid #e8e8e8;display:flex;align-items:center;justify-content:flex-start;gap:2px;z-index:300;padding:0 6px;padding-bottom:env(safe-area-inset-bottom,0);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-width:none}
.bottom-nav::-webkit-scrollbar{display:none}
.nav-slot{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:58px;height:100%;font-size:9px;font-weight:600;color:#a3a3a3;padding:6px 4px;border-radius:12px;cursor:pointer;border:none;background:none;font-family:inherit;transition:color .18s;text-decoration:none;white-space:nowrap}
.nav-slot svg{width:19px;height:19px;flex-shrink:0}
.nav-slot.active{color:#c084fc}