.sidebar{position:fixed;top:80px;left:0;width:240px;height:100vh;background-color:#2c3e50;color:#fff;z-index:20;overflow-y:auto;overflow-x:hidden;padding:20px 0;transition:width .3s ease;display:flex;flex-direction:column;max-height:calc(100vh - 80px)}.sidebar.collapsed{width:80px}.sidebar nav{padding:0 15px;flex:1}.sidebar ul{list-style:none;padding:0;margin:0}.sidebar li{margin-bottom:8px}.sidebar a{display:flex;align-items:center;gap:12px;padding:12px 16px;color:#ecf0f1;text-decoration:none;border-radius:8px;transition:all .3s ease;font-weight:500;font-size:14px;position:relative}.sidebar a:hover{background-color:#34495e;color:#fff;transform:translate(5px);box-shadow:0 2px 8px #0003}.sidebar a.active{background-color:#34495e;color:#fff}.sidebar a.active:before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:4px;height:100%;background-color:#e74c3c;border-radius:0 2px 2px 0}.sidebar a svg{flex-shrink:0;opacity:.8;transition:opacity .3s ease}.sidebar a:hover svg,.sidebar a.active svg{opacity:1}.sidebar a span{white-space:nowrap;overflow:hidden}.sidebar.collapsed a span{display:none}.sidebar.collapsed a{justify-content:center;padding:12px}.sidebar-toggle{padding:0 15px;margin-top:auto}.toggle-btn{width:100%;padding:12px;background:none;border:none;color:#ecf0f1;cursor:pointer;border-radius:8px;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.toggle-btn:hover{background-color:#34495e;color:#fff}.sidebar.collapsed .toggle-btn{padding:12px}