html{overflow-y:hidden}.main-container{display:flex;height:100vh;overflow:hidden}.sidebar{background:linear-gradient(90deg,#fffafc,#ffe4ec 50%);border-right:2px dotted #f8bbd0;box-shadow:4px 0 15px #f8bbd04d;height:100vh;min-width:280px;overflow-x:hidden;overflow-y:auto;padding:30px 0;position:relative;transition:width .3s ease;width:280px;z-index:1000}.sidebar.collapsed{width:80px}.sidebar-content{padding:0 25px}.sidebar.collapsed .sidebar-content{padding:0 15px}.sidebar-content h3{border-bottom:2px dashed #f8bbd0;color:#d63384;font-size:20px;font-weight:700;margin-bottom:5px;padding-bottom:5px;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.collapsed-title{font-size:24px!important;margin-bottom:15px!important}.sidebar-content h4{color:#d63384;font-size:16px;font-weight:500;margin-bottom:25px;overflow:hidden;text-align:center;text-overflow:ellipsis;text-shadow:1px 1px 2px rgba(0,0,0,.1);white-space:nowrap}.sidebar-menu{list-style:none;margin:0;padding:0}.menu-item{margin-bottom:8px}.sidebar-link{align-items:center;background-color:#fff0f5;border:1px solid #f8bbd0;border-radius:10px;color:#d63384;cursor:pointer;display:flex;font-weight:500;justify-content:flex-start;min-height:48px;padding:15px 20px;position:relative;text-decoration:none;transition:all .3s ease}.sidebar.collapsed .sidebar-link{justify-content:center;padding:15px 10px}.sidebar-link:hover{background:#ffe4ec;border:1px dashed #ff99c8;box-shadow:0 4px 12px #f8bbd04d;color:#d63384;transform:translateY(-2px)}.sidebar-link.router-link-active{background:#ffd3e3;border:1px dashed #ff99c8;box-shadow:0 4px 12px #ff69b433;color:#d63384}.menu-icon{flex-shrink:0;font-size:20px;height:20px;margin-right:12px;width:20px}.sidebar.collapsed .menu-icon{margin-right:0}.dropdown-icon{flex-shrink:0;font-size:20px;margin-left:auto;transition:transform .3s ease}.dropdown-icon.rotate{transform:rotate(180deg)}.submenu{background:#fff0f5cc;border:1px dashed #f8bbd0;border-radius:8px;list-style:none!important;margin:8px 0 0;overflow:hidden;padding:0}.submenu-link{align-items:center;color:#b67272;display:flex;font-size:14px;font-weight:400;min-height:48px;padding:15px 20px 15px 35px;position:relative;text-decoration:none;transition:all .3s ease}.submenu-link:hover{background:#ffe4ec;color:#d63384;transform:translate(5px)}.submenu-link.router-link-active{background:#ffd3e3;color:#d63384;font-weight:500}.submenu-icon{flex-shrink:0;font-size:16px;height:16px;margin-right:8px;width:16px}.content-area{display:flex;flex:1;flex-direction:column;height:100%;overflow:hidden;transition:margin-left .3s ease}.navbar{background:linear-gradient(90deg,#ffe4ec,#fff0f5);border-bottom:2px dotted #f8bbd0;box-shadow:0 2px 8px #f8bbd033;flex-shrink:0;height:60px;justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:2000}.navbar,.user-name{align-items:center;display:flex}.user-name{color:#d63384;font-size:18px;font-weight:500}.logout-btn{align-items:center;background:#d63384;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:14px;gap:5px;padding:8px 12px;transition:all .3s ease}.logout-btn:hover{background:#b02a5b;transform:translateY(-1px)}.sidebar-toggle{align-items:center;background:#fff0f5;border:1px solid #f8bbd0;border-radius:8px;color:#d63384;cursor:pointer;display:flex;height:40px;justify-content:center;padding:10px;transition:all .3s ease;width:40px}.sidebar-toggle:hover{background:#ffe4ec;border:1px dashed #ff99c8}.main-content{background:#fff0f5;border-left:2px dotted #f8bbd0;border-top:2px dotted #f8bbd0;border-top-left-radius:32px;box-shadow:0 8px 24px #ff69b433;flex:1;height:calc(100vh - 76px);margin:16px 0 0 16px;overflow-x:hidden;overflow-y:auto;padding:8px 8px 0;width:100%}.mobile-backdrop{display:none;z-index:999}.dialog-overlay,.mobile-backdrop{background:#00000080;inset:0;position:fixed}.dialog-overlay{align-items:center;display:flex;justify-content:center;z-index:2000}.dialog{background:#fff;border-radius:16px;box-shadow:0 8px 24px #0003;max-width:400px;padding:30px;text-align:center;width:90%}.dialog h3{color:#d63384;font-size:18px;margin-bottom:15px}.dialog p{color:#666;font-size:16px;margin-bottom:25px}.dialog-buttons{display:flex;gap:10px;justify-content:center}.btn-cancel,.btn-confirm{border:none;border-radius:8px;cursor:pointer;font-size:14px;padding:10px 20px;transition:all .3s ease}.btn-cancel{background:#f8f9fa;border:1px solid #dee2e6;color:#666}.btn-cancel:hover{background:#e9ecef}.btn-confirm{background:#d63384;color:#fff}.btn-confirm:hover{background:#b02a5b}.slide-fade-enter-active{transition:all .3s ease-out}.slide-fade-leave-active{transition:all .3s cubic-bezier(1,.5,.8,1)}.slide-fade-enter-from,.slide-fade-leave-to{max-height:0;opacity:0;transform:translateY(-10px)}.slide-fade-enter-to,.slide-fade-leave-from{max-height:300px}@media (max-width:768px){.sidebar{height:100vh;left:-280px;position:fixed;top:0;transition:left .3s ease;width:280px;z-index:1000}.sidebar.mobile-open{left:0}.sidebar.collapsed{width:280px}.mobile-backdrop{display:block}.content-area{margin-left:0;max-width:100%}.navbar{padding:0 15px}.logout-btn{font-size:12px;padding:6px 10px}.main-content{border:none;border-radius:0;margin:0;padding:15px}}@media (max-width:480px){.main-content{border:none;margin:0;padding:0}.sidebar{margin-top:45px}.logout-btn{font-size:12px;padding:6px 8px}.content-area{margin-left:0;max-width:100%}.dialog{padding:20px}}