@media (max-width: 768px){.top-menu .title{display:none}}body{margin:0;font-family:Segoe UI,sans-serif;background-color:#f5f6fa;color:#2c3e50}a{color:inherit;text-decoration:none}ul{list-style:none;padding:0;margin:0}.layout{display:flex;flex-direction:column;min-height:100vh}.layout.menu-open{padding-left:200px}.main{padding:20px}.main-container{flex:1;background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 0 8px #0000000d;box-sizing:border-box;width:auto}.main-content{flex:1;display:flex;flex-direction:column;margin-left:60px;margin-top:50px;padding:20px;transition:margin-left .3s ease}.main-content.expanded{margin-left:200px}.top-menu{position:fixed;top:0;left:0;height:50px;width:100%;background-color:#4caf50;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:1001;box-shadow:0 4px 4px #0000001a}.top-menu .left{display:flex;align-items:center}.top-menu .right{display:flex;align-items:center;margin-right:20px}.menu-button{background:none;border:none;color:#fff;font-size:24px;margin-right:10px;cursor:pointer}.title{font-size:18px;font-weight:700}.title-link{text-decoration:none;color:inherit;transition:text-decoration .3s ease}.title-link:hover{text-decoration:underline}.top-user-info{display:flex;align-items:center;font-size:16px;color:#fff}.top-user-info *{text-decoration:none}.user-role{font-weight:500}.separator{margin:0 8px;color:#e8f5e8}.user-name{font-weight:500}.logout-link{margin-left:15px;padding:4px 8px;border-radius:4px;cursor:pointer;transition:background-color .3s ease,text-decoration .3s ease;font-weight:500;text-decoration:none}.logout-link:hover{background-color:#ffffff1a;text-decoration:underline}.left-menu{position:fixed;top:50px;left:0;height:calc(100% - 50px);width:250px;background-color:#fff;border-right:1px solid #ddd;box-shadow:2px 0 4px #0000001a;transition:width .5s ease;z-index:1000;overflow-y:auto;overflow-x:hidden}.left-menu.collapsed{width:60px}.left-menu ul{padding:0;margin:0;list-style:none}.left-menu>ul>li{margin:0;border-bottom:1px solid #f0f0f0}.left-menu li a,.left-menu li .menu-item{display:flex;align-items:center;padding:12px 15px;color:#555;text-decoration:none;transition:background-color .3s ease,color .3s ease;cursor:pointer;position:relative}.left-menu li a:hover,.left-menu li .menu-item:hover{background-color:#f8f9fa;color:#333}.left-menu li.active>a,.left-menu li.active>.menu-item{background-color:#f06292;color:#fff}.left-menu li.expanded>.menu-item{background-color:#fff;color:#333}.left-menu .icon{width:30px;text-align:center;flex-shrink:0;font-size:16px}.left-menu.collapsed .icon{margin:auto}.left-menu .label{white-space:nowrap;overflow:hidden;opacity:1;max-width:180px;transition:opacity .4s ease,max-width .5s ease,padding .5s ease;padding-left:8px;flex:1}.left-menu.collapsed .label{opacity:0;max-width:0;padding-left:0}.left-menu .arrow{margin-left:auto;font-size:12px;transition:transform .5s ease,opacity .4s ease;color:#888}.left-menu.collapsed .arrow{opacity:0}.submenu{background-color:#fff;max-height:0;overflow:hidden;transition:max-height .6s ease-out}.left-menu li.expanded .submenu{max-height:500px;border-top:1px solid #e9ecef}.submenu li{border-bottom:none;margin:0}.submenu li a{padding:8px 15px 8px 50px;font-size:13px;color:#666;border-left:3px solid transparent}.submenu li a:hover{background-color:#f8f9fa;color:#333;border-left-color:#f06292}.left-menu.collapsed .submenu{display:none}.left-menu li.active .arrow{color:#fff}.left-menu li.expanded .arrow{color:#333;transform:rotate(180deg)}.left-menu li.active-parent>a,.left-menu li.active-parent>.menu-item{background-color:#e3f2fd;color:#1976d2;border-left:3px solid #1976d2}.left-menu li.active-parent .arrow{color:#1976d2}.submenu li a.router-link-active{background-color:#f06292;color:#fff;border-left-color:#d81b60;font-weight:500}.left-menu::-webkit-scrollbar{width:4px}.left-menu::-webkit-scrollbar-track{background:#f1f1f1}.left-menu::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:2px}.left-menu::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.main-content{flex:1;display:flex;flex-direction:column;margin-left:60px;margin-top:50px;padding:20px;transition:margin-left .5s ease}.main-content.expanded{margin-left:250px}.main-content.overlay-mode,.main-content.overlay-mode.expanded{margin-left:60px!important}.footer{background-color:#2c3e50;color:#fff;text-align:center;padding:10px;font-size:13px}.user-info{padding:10px;border-bottom:1px solid #eee}.avatar-wrapper{display:flex;align-items:center}.avatar-wrapper .icon{font-size:24px;width:30px;text-align:center;flex-shrink:0}.avatar-wrapper .user-details{margin-left:10px;transition:opacity .2s ease,max-width .3s ease,margin-left .3s ease;overflow:hidden;max-width:140px}.left-menu.collapsed .user-details{opacity:0;max-width:0;margin-left:0}.user-details{display:flex;flex-direction:column;font-size:12px}.user-details .name{font-weight:700;font-size:13px}.user-details .email{font-size:11px;color:#888}