*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;overflow:hidden}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;height:100vh;width:100vw;position:relative;overflow:hidden}.sidebar{width:250px;height:100vh;background-color:#2c3e50;color:#fff;display:flex;flex-direction:column;transition:transform .3s ease;z-index:100;position:absolute;left:0;top:0}.sidebar-hidden{transform:translate(-100%)}.sidebar-header{padding:16px;border-bottom:1px solid #34495e;position:sticky;top:0;background-color:#2c3e50;z-index:10}.search-input{width:100%;padding:8px 12px;border:1px solid #34495e;border-radius:4px;background-color:#34495e;color:#fff;font-size:14px}.search-input::placeholder{color:#95a5a6}.search-input:focus{outline:none;border-color:#3498db}.sidebar-menu{flex:1;overflow-y:auto;padding:8px 0}.menu-item{display:block;padding:12px 16px;color:#ecf0f1;text-decoration:none;transition:background-color .2s ease;white-space:nowrap}.menu-item:hover{background-color:#34495e}.menu-item-active{background-color:#3498db;color:#fff}.main-content{position:absolute;top:0;left:250px;right:0;bottom:0;height:100vh;width:calc(100vw - 250px);padding:0;overflow-y:auto;transition:all .3s ease;z-index:1;margin:0}.content-expanded{left:0!important;width:100vw!important;margin:0!important;padding:0}.main-content>router-view{width:100%;height:100%;display:block}.main-content *{max-width:100%}.toggle-btn{position:fixed;border:none;border-radius:50%;background-color:#3498db;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0003}@media (min-width: 769px){.toggle-btn{left:260px;top:10px;width:40px;height:40px;transition:left .3s ease,background-color .2s ease;z-index:101}}@media (min-width: 769px){.toggle-btn.toggle-btn-left{left:10px}}.toggle-btn:hover{background-color:#2980b9}@media (max-width: 768px){.toggle-btn{position:fixed;bottom:20px;right:20px;left:auto;z-index:900;width:56px;height:56px;border-radius:50%;box-shadow:0 4px 12px #0000004d;display:flex;align-items:center;justify-content:center;transition:transform .3s ease,background-color .2s ease,box-shadow .2s ease}.toggle-btn.toggle-btn-left{left:auto!important;right:20px!important;bottom:20px!important}.toggle-btn:hover{box-shadow:0 6px 16px #0006}.toggle-btn:active{transform:scale(.95)}.sidebar{position:fixed;transform:translate(-50%,-50%) scale(.9);opacity:0;visibility:hidden;height:auto;max-height:80vh;width:80%;max-width:280px;left:50%;top:50%;border-radius:12px;box-shadow:0 10px 40px #0000004d;z-index:1000;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s ease,visibility .3s ease;overflow-y:auto}@media (max-width: 480px){.sidebar{width:90%;max-width:none;padding:16px}.toggle-btn{width:48px;height:48px;bottom:16px;right:16px}.logo h2{font-size:16px}.nav-item{padding:10px 12px;font-size:14px}.toggle-btn{width:36px;height:36px}.btn-icon,.btn-icon:before,.btn-icon:after{width:18px}}.sidebar:not(.sidebar-hidden){transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible}#app:after{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;opacity:0;visibility:hidden;z-index:999;transition:opacity .3s ease,visibility .3s ease}#app:has(.sidebar:not(.sidebar-hidden)):after{opacity:1;visibility:visible}.main-content{width:100vw!important;left:0!important;margin-left:0!important}.close-menu-btn{position:absolute;top:16px;right:16px;background:none;border:none;color:#fff;font-size:24px;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease,transform .2s ease}.close-menu-btn:hover{background-color:#ffffff1a}.close-menu-btn:active{transform:scale(.9)}.close-icon{display:inline-block;width:20px;height:2px;background-color:#fff;position:relative;transform:rotate(45deg)}.close-icon:after{content:"";display:inline-block;width:20px;height:2px;background-color:#fff;position:absolute;transform:rotate(-90deg)}.nav-item{padding:12px 16px;margin-bottom:8px;border-radius:8px;display:block;transition:all .2s ease;transform-origin:left center}.nav-item:hover{background-color:#ffffff1a;transform:translate(4px)}.nav-item.active{background-color:#42b983cc;transform:translate(4px)}.logo{text-align:center;margin-bottom:24px;padding-top:16px}.logo h2{font-size:18px;margin:0;letter-spacing:1px}.btn-icon{display:inline-block;width:20px;height:2px;background-color:#fff;position:relative;transition:transform .3s ease}.btn-icon:before,.btn-icon:after{content:"";position:absolute;width:20px;height:2px;background-color:#fff;transition:transform .3s ease}.btn-icon:before{top:-6px}.btn-icon:after{top:6px}.btn-icon-open:before{transform:rotate(0)}.btn-icon-open:after{transform:rotate(0)}.btn-icon-close{transform:rotate(45deg)}.btn-icon-close:before{transform:rotate(90deg) translate(6px)}.btn-icon-close:after{transform:rotate(0);opacity:0}}