.drawer-overlay{z-index:1000;opacity:0;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#00000080;width:100vw;height:100vh;position:fixed;top:0;left:0}.drawer-overlay.open{animation:.3s forwards fadeIn}.drawer-overlay.closing{animation:.3s forwards fadeOut}@keyframes fadeIn{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}@keyframes fadeOut{0%{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}.drawer-content{z-index:1001;background:#111922;border-right:1px solid #2d2d2d;flex-direction:column;height:100vh;display:flex;position:fixed;top:0;box-shadow:0 0 20px #00000080}.drawer-content.left{left:0;transform:translate(-100%)}.drawer-content.left.open{animation:.3s forwards slideInLeft}.drawer-content.left.closing{animation:.3s forwards slideOutLeft}.drawer-content.right{border-left:1px solid #2d2d2d;border-right:none;right:0;transform:translate(100%)}.drawer-content.right.open{animation:.3s forwards slideInRight}.drawer-content.right.closing{animation:.3s forwards slideOutRight}.drawer-content .drawer-header{border-bottom:1px solid #2d2d2d;justify-content:space-between;align-items:center;padding:20px;display:flex}.drawer-content .drawer-header h3{color:#fff;margin:0;font-size:18px;font-weight:600}.drawer-content .drawer-header .close-btn{color:#fff;cursor:pointer;opacity:.7;background:0 0;border:none;padding:0;font-size:24px;line-height:1}.drawer-content .drawer-header .close-btn:hover{opacity:1}.drawer-content .drawer-body{flex:1;padding:20px;overflow-y:auto}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideOutLeft{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutRight{0%{transform:translate(0)}to{transform:translate(100%)}}