.app-container{height:100vh;display:flex;flex-direction:column}.app-header{background-color:#2c3e50;color:#fff;padding:1rem 2rem;text-align:center;box-shadow:0 2px 4px #0000001a}.app-body{flex:1;display:flex;overflow:hidden}.sidebar{width:200px;background-color:#34495e;padding:2rem 0;overflow-y:auto}.sidebar ul{list-style:none}.sidebar li{margin-bottom:.5rem}.sidebar a{display:block;color:#ecf0f1;text-decoration:none;padding:.8rem 1.5rem;transition:all .3s ease;position:relative}.sidebar a:hover{background-color:#2c3e50;padding-left:1.7rem}.sidebar a.router-link-active{background-color:#2c3e50;border-left:4px solid #3498db;padding-left:1.5rem}.main-content{flex:1;padding:2rem;overflow-y:auto;background-color:#f9f9f9}@media (max-width: 768px){.app-header{padding:.75rem 1rem}.app-header h1{font-size:1.5rem}.app-body{flex-direction:column}.sidebar{width:100%;padding:.75rem 0}.sidebar ul{display:flex;overflow-x:auto;padding:0 .5rem}.sidebar li{margin-bottom:0;margin-right:.25rem}.sidebar a{white-space:nowrap;padding:.5rem .75rem;border-left:none;font-size:.9rem}.sidebar a:hover{padding-left:.75rem;background-color:#2c3e504d}.sidebar a.router-link-active{border-left:none;border-bottom:3px solid #3498db;background-color:#2c3e5033;padding-left:.75rem}.main-content{padding:1rem}}@media (max-width: 480px){.app-header h1{font-size:1.25rem}.sidebar a{font-size:.85rem;padding:.4rem .6rem}.main-content{padding:.75rem}}