.task-detail-page{min-height:100vh;background-color:#f5f5f5}.task-detail-page .loading-state{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:#f5f5f5}.task-detail-page .loading-spinner{width:40px;height:40px;border:3px solid #FFE2E8;border-top-color:#ec1f78;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.task-detail-page .error-state{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;background-color:#f5f5f5;color:#999}.task-detail-page .error-icon{font-size:48px;margin-bottom:16px}.task-detail-page .error-message{font-size:14px}.task-detail-page .task-info-section{padding:16px 0}.task-detail-page .task-info-card{background-color:#fff;border:1px solid #F1F1F1;overflow:hidden}.task-detail-page .product-info-header{padding:16px;display:flex;gap:12px;align-items:flex-start}.task-detail-page .product-image-wrapper{flex-shrink:0;width:80px;height:80px;background-color:#f5f5f5;border-radius:4px;overflow:hidden}.task-detail-page .product-image{width:100%;height:100%;object-fit:cover}.task-detail-page .product-info-right{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}.task-detail-page .product-name{font-size:13px;font-weight:400;color:#000;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task-detail-page .category-tag #categoryName{display:inline-block;border-radius:18px;padding:4px 8px;background-color:#ffe2e8;font-size:10px;font-weight:400;color:#3d3d3d}.task-detail-page .commission-badge{display:flex;align-items:center;background-color:#ec1f78;border-radius:18px;padding:6px;gap:12px}.task-detail-page .commission-item{display:flex;align-items:baseline;gap:4px}.task-detail-page .commission-label{font-size:11px;font-weight:400;color:#fff}.task-detail-page .commission-value{font-size:14px;font-weight:700;color:#fff}.task-detail-page .commission-divider{width:1px;height:12px;background-color:#fff}.task-detail-page .progress-section{padding:40px 16px 16px;position:relative;border-top:1px solid #F1F1F1}.task-detail-page .progress-bar-wrapper{position:relative;margin-bottom:8px;display:flex;align-items:center;height:32px;gap:8px}.task-detail-page .progress-track{flex:1;height:8px;background-color:#ffe7ec;border-radius:4px;position:relative;min-width:0}.task-detail-page .progress-fill{position:absolute;left:0;top:0;height:8px;background-color:#ec1f78;border-radius:4px;width:0;transition:width .3s ease-out}.task-detail-page .progress-bubble-wrapper{position:absolute;top:-36px;left:0;width:50px;height:28px;display:flex;justify-content:center;align-items:center;z-index:10;transform:translate(-50%);transition:left .3s ease-out}.task-detail-page .progress-bubble{position:relative;background-color:#ec1f78;color:#fff;padding:5px 10px;border-radius:8px;font-size:11px;font-weight:500;box-shadow:0 2px 4px #0000001a;white-space:nowrap}.task-detail-page .progress-bubble:after{content:"";position:absolute;bottom:-5px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #EC1F78}.task-detail-page .progress-info{display:flex;align-items:center;gap:4px}.task-detail-page .progress-label{font-size:12px;font-weight:400;color:#666}.task-detail-page .progress-total{font-size:12px;font-weight:400;color:#666;margin-left:auto}.task-detail-page .progress-amount{font-size:16px;font-weight:700;color:#000;width:auto;flex-shrink:0;white-space:nowrap}.task-detail-page .activity-section{margin-bottom:16px;background-color:#fff;border:1px solid #F1F1F1;padding:16px}.task-detail-page .activity-item{margin-bottom:16px}.task-detail-page .activity-item:last-child{margin-bottom:0}.task-detail-page .activity-title{display:flex;align-items:center;gap:8px;margin-bottom:6px}.task-detail-page .activity-dot{width:10px;height:10px;background-color:#ec1f78;border-radius:50%}.task-detail-page .activity-title-text{font-size:14px;font-weight:700;color:#000;white-space:normal;line-height:1.3}.task-detail-page .activity-content{padding-left:18px;font-size:12px;font-weight:400;color:#666;line-height:1.2}.task-detail-page .process-section{margin:16px 0;background-color:#fff;padding:16px 16px 36px}.task-detail-page .process-section .section-header{margin-bottom:0}.task-detail-page .section-header{display:flex;align-items:center;gap:3px;flex-wrap:wrap}.task-detail-page .section-bar{width:3px;height:13px;background-color:#ec1f78;border-radius:2px}.task-detail-page .section-title{font-size:14px;font-weight:500;color:#000;white-space:normal;line-height:1.3}.task-detail-page .process-timeline{display:flex;gap:0;height:100px;padding-bottom:2px}.task-detail-page .process-step{flex:1;display:flex;align-items:center;justify-content:center;position:relative}.task-detail-page .process-indicator{width:16px;height:16px;background-color:#ec1f78;border-radius:50%;position:relative;z-index:1}.task-detail-page .process-indicator:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background-color:#fff;border-radius:50%}.task-detail-page .process-line{position:absolute;height:8px;background-color:#ffeaee}.task-detail-page .process-step:first-child .process-line{left:50%;right:0}.task-detail-page .process-step:last-child .process-line{left:0;right:50%}.task-detail-page .process-step:not(:first-child):not(:last-child) .process-line{left:0;right:0}.task-detail-page .process-content{position:absolute;bottom:-20px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:4px}.task-detail-page .process-text{font-size:12px;font-weight:500;color:#000;text-align:center;line-height:1.2;height:28.8px;display:flex;align-items:center;justify-content:center;white-space:normal}.task-detail-page .process-step-label{font-size:10px;font-weight:400;color:#666}.task-detail-page .tabs-section{background-color:#fff;margin-top:16px}.task-detail-page .tabs-header{display:flex;border-bottom:1px solid #DFDFDF;flex-wrap:wrap}.task-detail-page .tab-item{flex:1;display:flex;justify-content:center;align-items:center;padding:12px 0;font-size:14px;font-weight:400;color:#666;cursor:pointer;position:relative;border-bottom:2px solid transparent;transition:color .3s;white-space:normal;line-height:1.3}.task-detail-page .tab-item.active{color:#ec1f78;border-bottom-color:#ec1f78}.task-detail-page .tabs-content{padding:16px;min-height:400px}.task-detail-page .tab-content{display:none}.task-detail-page .tab-content.active{display:block}.task-detail-page .overview-title{display:flex;align-items:center;gap:3px;margin-bottom:10px}.task-detail-page .overview-bar{width:3px;height:13px;background-color:#ec1f78;border-radius:2px}.task-detail-page .product-metrics{display:flex;gap:8px;background:#f5f5f5;border-radius:4px;padding:20px 8px}.task-detail-page .metric{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}.task-detail-page .metric-icon{width:24px;height:24px;flex-shrink:0}.task-detail-page .metric-content{flex:1;width:100%;text-align:center}.task-detail-page .metric-value{font-size:.875rem;font-weight:700;color:#000;margin-bottom:2px;word-break:break-word}.task-detail-page .metric-label{font-size:12px;color:#6b7280;word-break:break-word;line-height:1.3}.task-detail-page .rules-container{background-color:#f5f5f5;border-radius:4px;padding:16px}.task-detail-page .rule-item{margin-bottom:8px}.task-detail-page .rule-item:last-child{margin-bottom:0}.task-detail-page .rule-title{font-size:12px;font-weight:400;color:#000;margin-bottom:4px;white-space:normal;line-height:1.3}.task-detail-page .rule-content{font-size:11px;font-weight:400;color:#000000b3;line-height:1.5;white-space:pre-line}.task-detail-page .selling-points{margin-bottom:16px;background-color:#f5f5f5;border-radius:4px;padding:16px}.task-detail-page .selling-points-title{font-size:12px;font-weight:700;color:#000;margin-bottom:8px;white-space:normal;line-height:1.3}.task-detail-page .selling-points-content{font-size:11px;font-weight:400;color:#000000b3;line-height:1.5;white-space:pre-line}.task-detail-page .product-image-large{margin-bottom:16px;width:100%;aspect-ratio:343/228;background-color:#f5f5f5;border-radius:4px;overflow:hidden}.task-detail-page .large-product-image{width:100%;height:100%;object-fit:cover}.task-detail-page .similar-videos-section{margin-bottom:16px}.task-detail-page .videos-section-title{display:flex;align-items:center;gap:5px;margin-bottom:10px;padding:0 16px;flex-wrap:wrap}.task-detail-page .videos-section-bar{width:3px;height:13px;background-color:#ec1f78;border-radius:2px}.task-detail-page .videos-list{padding:0 16px;min-height:300px;display:flex;flex-direction:column}.task-detail-page .no-videos{display:flex;justify-content:center;align-items:center;height:100px;font-size:12px;color:#999}.task-detail-page .video-item{display:flex;gap:10px;background-color:#fff;border:1px solid #ECECEC;border-radius:4px;padding:10px;margin-bottom:10px}.task-detail-page .video-item:last-child{margin-bottom:0}.task-detail-page .video-thumbnail{flex-shrink:0;width:75px;height:75px;background-color:#f5f5f5;border-radius:4px;display:flex;align-items:center;justify-content:center}.task-detail-page .video-play-icon{font-size:32px;color:#ec1f78}.task-detail-page .video-info{flex:1;display:flex;flex-direction:column;gap:10px}.task-detail-page .video-name{font-size:11px;font-weight:400;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task-detail-page .video-stats{display:flex;gap:0}.task-detail-page .video-stat-item{flex:1;background-color:#ffeaee;border-radius:4px;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.task-detail-page .video-stats .video-stat-item:nth-child(1){margin-right:5px}.task-detail-page .video-stats .video-stat-item:nth-child(2){margin:0 2.5px}.task-detail-page .video-stats .video-stat-item:nth-child(3){margin-left:5px}.task-detail-page .video-stat-value{font-size:13px;font-weight:900;color:#ec1f78}.task-detail-page .video-stat-label{font-size:10px;font-weight:400;color:#0009;line-height:1;text-align:center;white-space:normal;line-height:1.3;min-height:20px;display:flex;align-items:center;justify-content:center}