.create-design-page{background-color:#fff;height:100vh;overflow:hidden}.create-design-page .page-content{height:calc(100% - 50px);display:flex;flex-direction:column}.create-design-page .tabs{padding:0 16px;display:flex;margin-bottom:24px;justify-content:space-between;border-bottom:1px solid #ebeef5}.create-design-page .tabs .tab-button{flex:1 1;background:none;border:none;padding:8px 12px 12px;font-size:16px;cursor:pointer;color:#505a71;position:relative}.create-design-page .tabs .tab-button.active{font-weight:700;color:#000}.create-design-page .tabs .tab-button.active:after{content:"";position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:24px;height:2px;background-color:#0773fc}.create-design-page .blank-canvas-creator{margin-bottom:24px;padding:0 16px}.create-design-page .blank-canvas-creator .size-inputs{width:100%;display:grid;grid-template-columns:1fr 1fr 60px;gap:8px;margin-bottom:16px}.create-design-page .blank-canvas-creator .size-inputs .text-input{box-sizing:border-box;min-width:0;border:2px solid #ebeef5;border-radius:8px;padding:12px;font-size:14px;font-weight:500;background-color:#ebeef5;color:#000}.create-design-page .blank-canvas-creator .size-inputs .text-input:focus{outline:none;border:2px solid #0773fc}.create-design-page .blank-canvas-creator .create-button{width:100%;padding:14px;background-color:rgba(7,115,252,.2);color:#fff;font-weight:600;border:none;border-radius:8px;font-size:16px;cursor:pointer}.create-design-page .blank-canvas-creator .create-button.active{background-color:#0773fc}.create-design-page .unit-selector{box-sizing:border-box;width:60px;display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#ebeef5}.create-design-page .unit-selector.selector-box-header{height:44px;border-radius:12px;border:2px solid #0773fc;background-color:#fff;position:absolute;right:16px;top:83px}.create-design-page .unit-selector .arrow-down{width:16px;height:16px;background:url(/_next/static/media/arrow-down-gray-solid.e8f803b0.svg) no-repeat 50%;background-size:100% 100%}.create-design-page .search-icon{width:24px;height:24px;background:url(/_next/static/media/search.fa31aec6.svg) no-repeat 50%;background-size:100% 100%}.create-design-page .design-scenes{flex:1 1;padding:0 16px;overflow:hidden;display:flex;flex-direction:column}.create-design-page .design-scenes .scenes-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.create-design-page .design-scenes .scenes-header h2{font-size:16px;font-weight:600}.create-design-page .design-scenes .scenes-header .scene-search{display:flex;align-items:center;justify-self:start;color:#8693ab;background-color:#f3f4f9;padding:8px 12px 8px 6px;border-radius:10px;font-size:12px}.create-design-page .scene-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding-bottom:156px}.create-design-page .scene-grid .scene-item{background-color:#f3f4f9;border-radius:12px;padding:6px;display:flex;align-items:center;gap:4px}.create-design-page .scene-grid .scene-item .scene-icon{background-color:#fff;border-radius:8px;width:44px;height:44px;color:#666;display:flex;align-items:center;justify-content:center;margin-right:8px}.create-design-page .scene-grid .scene-item .scene-icon .scene-icon-img{width:20px;height:20px}.create-design-page .scene-grid .scene-item .scene-name{font-weight:500}.create-design-page .scene-grid .scene-item .search-highlight{color:#0773fc;font-weight:700}.create-design-page .scene-grid .scene-item .scene-size{font-size:12px;color:#999}.create-design-page .search-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(27,35,55,.2);z-index:20}.create-design-page .search-modal .search-scene-container{width:100%;height:calc(100% - 100px);background-color:#fff;border-radius:16px 16px 0 0;padding:0 16px;display:flex;flex-direction:column;overflow:hidden;transform:translateY(100vh);transition:transform .3s ease-in-out}.create-design-page .search-modal .search-scene-container.visible{transform:translateY(100px)}.create-design-page .search-modal .search-scene-close-btn{display:flex;align-items:center;justify-content:center;width:100%;height:44px;margin-bottom:8px}.create-design-page .search-modal .search-scene-close-btn .close-icon{width:47px;height:24px;background:url(/_next/static/media/modal-close-btn.babcad23.svg) no-repeat 50%;background-size:100% 100%}.create-design-page .search-modal .search-scene-header{display:flex;align-items:center;justify-content:space-between;width:100%;height:44px;padding:0 12px;border-radius:12px;border:1px solid #ebeef5;margin-bottom:16px}.create-design-page .search-modal .search-scene-header.focus{border:1px solid #0773fc}.create-design-page .search-modal .search-scene-header .search-clear-icon{width:28px;height:28px;background:url(/_next/static/media/clear-icon.c8c2a7a1.svg) no-repeat 50%;background-size:100% 100%}.create-design-page .search-modal .search-scene-header .search-scene-input{flex:1 1;height:100%;font-size:14px;line-height:20px;color:#1b2337;border:none;outline:none;background-color:rgba(0,0,0,0)}.create-design-page .search-modal .scene-empty-container{height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center}.create-design-page .search-modal .scene-empty-container .scene-empty-icon{width:56px;height:56px;background:url(/_next/static/media/empty-icon.26f34363.svg) no-repeat 50%;background-size:100% 100%}.create-design-page .search-modal .scene-empty-container .scene-empty-title{font-size:16px;line-height:22px;color:#1b2337;margin-top:16px}.create-design-page .search-modal .scene-empty-container .scene-empty-desc{font-size:12px;line-height:16px;color:#8693ab;margin-top:8px}.create-design-page .selector-box{position:fixed;top:0;left:0;width:100%;height:100%;z-index:20}.create-design-page .selector-box .selector-box-bg{width:100%;height:100%;background-color:rgba(27,35,55,.2)}.create-design-page .selector-box .selector-box-content{width:110px;padding:0 24px;display:flex;flex-direction:column;background-color:#fff;border-radius:14px;position:absolute;top:132px;right:16px}.create-design-page .selector-box .selector-box-content .selector-box-item{padding:14px 0;border-bottom:1px solid #ebeef5;line-height:20px;font-size:14px;font-weight:600;color:#1b2337}.create-design-page .selector-box .selector-box-content .selector-box-item:last-child{border-bottom:none}.create-design-page .selector-box .selector-box-content .selector-box-item.active{color:#0773fc}