:root{--m3-surface:#f3f4f9;--m3-primary:#6750a4;--m3-on-surface-variant:#49454f;--m3-secondary-container:#e8def8;--m3-on-secondary-container:#1d192b}#app{box-sizing:border-box;min-height:100dvh;padding:16px 16px 90px}#bottom-nav{background-color:var(--m3-surface);z-index:1000;width:100%;height:80px;padding-bottom:env(safe-area-inset-bottom);border-top:1px solid #0000000d;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0}.nav-item{cursor:pointer;-webkit-tap-highlight-color:transparent;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;transition:all .2s;display:flex}.nav-item .nav-icon-container{border-radius:16px;justify-content:center;align-items:center;width:64px;height:32px;transition:background-color .2s;display:flex}.nav-item.active .nav-icon-container{background-color:var(--m3-secondary-container)}.nav-icon{filter:grayscale();font-size:22px}.nav-item.active .nav-icon{filter:grayscale(0)}.nav-label{color:var(--m3-on-surface-variant);font-family:Roboto,sans-serif;font-size:12px;font-weight:500}.nav-item.active .nav-label{color:var(--m3-on-secondary-container);font-weight:700}.bottom-nav{z-index:1000;background:#fff;border-top:1px solid #e0e0e0;justify-content:space-around;align-items:center;height:65px;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -2px 10px #0000000d}.nav-item{cursor:pointer;color:#5f6368;flex-direction:column;align-items:center;transition:all .2s;display:flex}.nav-icon{font-size:20px}.nav-label{margin-top:4px;font-size:12px}.nav-item.active{color:#1a73e8;font-weight:700}.nav-item.active .nav-icon{transform:scale(1.1)}