body{ color: #efefef;}
/*文生图主画布*/
.main-content{flex:1;margin-right:20px;position:relative}

.render-area{position:relative;width:100%;height:100%;border:1px solid #2f2f2f;background-color:#171717;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-direction:column}
.render-area .content-title{font-size:13px; color: #999;position: absolute; z-index: 9; top: 0; left: 0; padding:5px 15px; padding-right: 35px; background-color:rgba(153,153,153,0.25); line-height: 35px; border-top-left-radius:3px; border-bottom-right-radius:30% 100%}
.render-area .genarate-tips{ color:#fff; position: absolute; z-index: 999; top: 10px; left: 50%; padding:5px 15px; border-radius:4px; font-size:13px; transform: translateX(-50%); animation:gtips 1s infinite; display: none;}
.render-area .success-tips{background-color:#4cae4c; font-size:12px;}
.render-area .fail-tips{background-color:#ff0000; font-size:12px;}
@keyframes gtips{
    0%,100%{transform:translateX(-50%) scale(1)}
    50%{transform:translateX(-50%) scale(1.15)}
}

.render-area .render-container{display:flex;align-items:center;flex-direction: column;justify-content: center;align-items: center;}
.render-area .render-placeholder{width:80px;height:80px;border-radius:4px;margin-bottom:5px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.render-area .render-tips{font-size:14px;color:#999;}
.render-area .render-tips-btn{border-radius:24px;font-size:14px;color:#999;padding:5px 20px;border:1px solid #9A9A9A;cursor:pointer}
.render-area .file-input{display:none}

.render-area .first-last-frame{width:100%;height:100%;display:flex; align-items:center;justify-content:center;}
.render-area .first-last-frame .first-last-frame__first,.render-area .first-last-frame .first-last-frame__last{width:50%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;}
.render-area .first-last-frame .first-last-frame__last{border-left:1px solid #2f2f2f; display: none;}
.render-area .genarateVideo{width:100%; height:100%; display:none; align-items:center;justify-content:center;}
.render-area .genarateVideo video{width:100%; height:100%;}

.render-area .image-shell{width:100%;height:100%; display:none;}
.render-area .image-shell .image-display{position:relative;width:100%;height:100%;min-width:0;min-height:0;border:1px solid #333;border-radius:4px;overflow:hidden;}
.render-area .image-shell .image-display .image-stage{position:absolute;left:50%;top:50%;transform-origin:center center;will-change:transform}
.render-area .image-shell .image-display .image-stage .image-display img{display:block;opacity:0}
.render-area .image-shell .image-display.is-ready img{opacity:1}

.render-area .card-main-img{width:100%; height:100%; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.1); align-Items:center; justify-Content:center; position:relative; display:none; background:#171717}
.render-area .img-compare{position:relative;overflow:hidden;--split-pos:50%;flex-shrink:0}
.render-area .img-compare img{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-drag:none;user-drag:none;pointer-events:none;display:block}
.render-area .img-compare__base{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center center;transition:opacity 0.4s ease}
.render-area .img-compare__overlay{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center center;clip-path:polygon(0 0,var(--split-pos) 0,var(--split-pos) 100%,0 100%);transition:opacity 0.4s ease}
.render-area .img-compare__line{position:absolute;top:0;left:var(--split-pos);width:1px;height:100%;background:#ffffff;transform:translateX(-50%);z-index:10;box-shadow:0 0 6px rgba(0,0,0,0.3);transition:background 0.2s;pointer-events:none}
.render-area .img-compare__handle{position:absolute;top:50%;left:var(--split-pos);align-items:center;border:1px solid #fff;border-radius:100%;z-index:11;box-shadow:rgba(0,0,0,0.2) 0px 3px 1px -2px,rgba(0,0,0,0.14) 0px 2px 2px 0px,rgba(0,0,0,0.12) 0px 1px 5px 0px;box-sizing:border-box;display:flex;flex:1 0 auto;height:30px;justify-content:center;width:30px;transform:translateX(-50%) translateY(-50%);background: linear-gradient(135deg, hsla(0, 0%, 100%, 0.08), hsla(0, 0%, 100%, 0.04));backdrop-filter: blur(12px);cursor:ew-resize;pointer-events:auto}
.render-area .img-compare__handle--left{border-width:6px;border-style:inset solid inset inset;border-color:rgba(0,0,0,0) rgb(255,255,255) rgba(0,0,0,0) rgba(0,0,0,0);border-image:initial;height:0px;margin-left:-10px;margin-right:10px;width:0px}
.render-area .img-compare__handle--right{border-width:6px;border-style:inset inset inset solid;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) rgb(255,255,255);border-image:initial;height:0px;margin-right:-10px;width:0px}
/* .render-area .img-compare.dragging .img-compare__line{background:#0099cc}
.render-area .img-compare.dragging .img-compare__handle{border-color:#0099cc} */

.render-area .menu-group-edit{position:absolute; top:0; right:0; background:rgba(153,153,153,0.5); display: none; border-top-right-radius:3px;  border-bottom-left-radius: 5px;}
.render-area .menu-group-edit div{height:30px; font-size:12px; padding:5px 8px; text-align:center; cursor:pointer; border-right: 1px solid rgba(0,0,0,0.25);}
.render-area .menu-group-edit div:last-child{ border-right: none;}

.render-area .menu-group{position:absolute;top:0;right:0;width:44px;background:#3B3B3B; display:none;}
.render-area .menu-group .menu-group-item{position:relative;font-size:12px;border-bottom:1px solid #868686;padding:4px 10px;text-align:center;cursor:pointer}
.render-area .menu-group .menu-group-item:hover .float-menu{display:block}
.render-area .menu-group .menu-group-item:last-child{border:0}
.render-area .menu-group .menu-group-item .float-menu{position:absolute;top:0;right:44px;width:88px;background:#3B3B3B;display:none}
.render-area .menu-group .menu-group-item .float-menu .float-menu-item{border-bottom:1px solid #868686;padding:10px}
.render-area .menu-group .menu-group-item .float-menu .float-menu-item:last-child{border:0}

/*右侧面板*/
.param-panel{position:relative; border-radius:5px; width:360px; border:1px solid #2f2f2f; background-color:#171717;display:flex;flex-direction:column;}
.param-tab{display:flex;flex-direction:row; list-style:none}
.param-tab .tab{flex:1 0 50%; font-size:15px; padding:10px 0; background:linear-gradient(to bottom, #333, #262626); color:#AAA; cursor:pointer; transition:all .2s ease; letter-spacing:2px; text-align:center}
.param-tab .tab.activate{background:transparent;; color:#efefef; box-shadow:0 1px 2px rgba(0,20,50,.04);}
.param-tab .tab:first-child{border-top-left-radius:3px; border-bottom-right-radius: 9px;}
.param-tab .tab:last-child{border-top-right-radius:3px; border-bottom-left-radius: 9px;}
.param-tab .tab.activate:last-child{border-bottom-left-radius:0;}
.param-panel .param-panel-container{overflow-y:auto; overflow-x:hidden;  flex:1; padding:15px; padding-bottom: 0;}

.panel-row .panel-label{margin-bottom:8px;color:#aaa;display:flex;align-items:center;justify-content:space-between}
.panel-row .text-area-container{position:relative;height:420px;background:#232323;border:1px solid #2f2f2f}
.panel-row .text-area-container .text-area-box{position:absolute;top:0;left:0;width:100%; font-size:13px; height:385px;color:#999;padding:10px;resize:none;outline:none;border:none;border-radius:4px;line-height:1.6;background:#232323}
.panel-row .text-area-container button{position:absolute;bottom:0;width:fit-content;padding:8px 0;text-align:center;font-size:12px; width: 50%;color:#efefef;background:#0f0f0f;cursor:pointer}
.panel-row .text-area-container .text-area-btn{right:0;background:#0f0f0f;}
.panel-row .text-area-container .txt-opt-btn{left:0;background:#ad7809;}

.panel-group{margin-bottom:20px}
.panel-group:last-child{margin:0}
.panel-group .panel-title{font-size:13px;margin-bottom:5px;color:#ccc}
.panel-group .desc-input{width:100%; background-color:transparent; color:#999; border:1px solid #2f2f2f; line-height: 1.6; font-size:13px; padding:8px; border-radius:3px; min-height:150px; resize:vertical}
.panel-group .desc-input::placeholder {color: #555;opacity: 1;}

.custom-select{position:relative;width:100%;margin-bottom:15px}
.custom-select .select-input{width:100%; background: linear-gradient(to bottom,#333333,#1a1a1a); color:#fff;border:1px solid #2f2f2f;padding:8px 12px;border-radius:4px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:14px;box-sizing:border-box}
.custom-select .select-input:hover{border-color:#555}
.custom-select .select-input .select-arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #999;transition:transform 0.2s}
.custom-select .select-input .select-arrow.active{transform:rotate(180deg)}
.custom-select .select-input .select-text{display:flex;align-items:center;gap:10px}

.custom-select .select-dropdown{position:absolute;top:calc(100% + 5px);left:0;width:100%;background-color:#2d2d2d;border:1px solid #2f2f2f;border-radius:4px;z-index:999;max-height:250px;overflow-y:auto;display:none}
.custom-select .select-dropdown .dropdown-item{padding:8px 12px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.custom-select .select-dropdown .dropdown-item:hover{background-color:#24588e;color:#fff}
.custom-select .select-dropdown .dropdown-item.active{background-color:#1e4976;color:#fff}
.custom-select .select-dropdown .dropdown-item .dropdown-container{display:flex;align-items:center;gap:10px}
.custom-select .left-container{display:flex;align-items:center;}
.custom-select .left-container img{width:35px;height:35px;}
.custom-select .right-container .top{display:flex;gap:10px; color:#d9d9d9;}
.custom-select .right-container .top .hot{color:#fff; font-size:10px; padding:0px 8px; line-height:16px; height:16px; border-radius:8px;background:#F50A06}
.custom-select .right-container .top .title{font-size:13px}
.custom-select .right-container .bottom{font-size:11px; color:#8c8c8c;}

.images-grid .image-item{position:relative; width:100%; aspect-ratio:2/1; overflow:hidden; border:1px solid #2f2f2f; background: #222;}
.images-grid .image-item img{width:100%; height:100%; object-fit:contain}
.images-grid .image-item .label{position:absolute;top:0;left:0;background:#232323;color:#fff;font-size:12px;padding:2px 4px}
.images-grid .image-item .close-btn{position:absolute;top:0;right:0;background:#282828;color:#fff;font-size:12px;padding:2px 8px;cursor:pointer; font-size:14px;}
.images-grid .image-item.add-btn{display:flex;align-items:center;justify-content:center;cursor:pointer}
.images-grid .image-item.add-btn span{font-size:32px; color:#555; text-align:center; width:50px; height:50px; background:#222; border-radius:25px; line-height:50px;}
.images-grid .image-item .ref-btn{ display:none;}

.tag-group{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:15px}
.tag-group5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0px;margin-bottom:15px}
.tag-group3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0px;margin-bottom:15px}
.tag-group38{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:15px}
.tag-group2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0px;margin-bottom:15px}
.tag-group6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0px;margin-bottom:15px}
.tag-item{width:100%;padding:3.98px 0;background-color:#232323;border:1px solid #2f2f2f;font-size:12px;cursor:pointer;text-align:center; color:#999;}
.tag-item.active{background-color:#0099CC;color:#fff}

.btn-group{display:flex;gap:10px; padding: 15px;}
.btn-group .btn-history{flex:1;background-color:#333;color:#fff;border:1px solid #444;height:50px; line-height:50px; border-radius:4px;cursor:pointer; font-size:17px;}
.btn-group .btn-history:hover{background-color:#444}
.btn-group .btn-generate{flex:2; background:linear-gradient(135deg,#00c853,#007a2f); height:50px; line-height:50px; color:#fff;border:none;border-radius:25px;cursor:pointer; font-size:17px; letter-spacing: 2px; animation: textPulse 5s ease-in-out infinite; }
.btn-group .btn-generate span{color:#ffc09f;margin-left:10px}
.btn-group .btn-generate:hover{background-color:#0080ff; box-shadow:0 0 25px rgba(0,153,51,0.5); animation:none}
@keyframes textPulse {
    0% { box-shadow:0 0 25px rgba(0,153,51,0.1) }
    25% { box-shadow:0 0 25px rgba(0,153,51,0.25) }
    50% { box-shadow:0 0 25px rgba(0,153,51,5) }
    75% { box-shadow:0 0 25px rgba(0,153,51,0.25) }
    100% { box-shadow:0 0 25px rgba(0,153,51,0.1) }
}

#frame1-control-type{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap:0;}
#frame2-control-type{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap:0;}
.camera-control-type{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap:8px;}

/*历史记录*/
.history-item{display:flex;align-items:center; padding:15px; margin-bottom:8px; border-radius:4px; cursor:pointer; border-bottom: 1px solid #262626; transition:background-color 0.2s}
.history-item:hover{background-color:#333}
.history-item .thumbnail{width:110px; height:67.5px; margin-right:12px; border-radius:2px; overflow:hidden}
.history-item .thumbnail img{width:100%; height:100%; object-fit:cover}
.history-item .history-info div{font-size:13px; color:#ddd; display:flex; align-items: center;}
.history-item .history-info span{color:#999; margin-left:5px; font-size:12px; display: inline-block; margin-top: 3px; }
.history-item:last-child{border-bottom: none;}

/*加载动画*/
.loading-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;min-height: 100vh;display: flex;justify-content: center;align-items: center;background-color:rgba(0,0,0,0.65); display: none;}
.loading-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2rem;padding:2rem 2.8rem;border-radius:4rem;background: linear-gradient(135deg, hsla(0, 0%, 100%, 0.08), hsla(0, 0%, 100%, 0.04));backdrop-filter: blur(12px);box-shadow:0 30px 50px -30px rgba(0,0,0,0.9);transform: translateX(-80px) translateY(20px);}
.loading-wrapper .loader-scene{position:relative;width:200px;height:200px;display:flex;align-items:center;justify-content:center}
.loading-wrapper .loader-scene .ring-track{position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid transparent;border-top:2.5px solid rgba(80,200,255,0.35);border-bottom:2.5px solid rgba(80,200,255,0.10);animation:spinTrack 3.2s linear infinite;filter:drop-shadow(0 0 20px rgba(60,180,255,0.20))}
.loading-wrapper .loader-scene .ring-track::after{content:'';position:absolute;bottom:-4px;left:30%;width:14px;height:14px;background:radial-gradient(circle,#b0e8ff,#3a8cff);border-radius:50%;box-shadow:0 0 30px #3a8cff,0 0 60px #3a8cff44;opacity:0.9}
.loading-wrapper .loader-scene .ring-track-inner{position:absolute;width:76%;height:76%;border-radius:50%;border:1.8px solid transparent;border-right:2.5px solid rgba(130,210,255,0.25);border-left:2.5px solid rgba(130,210,255,0.08);animation:spinTrackReverse 5.5s linear infinite;filter:drop-shadow(0 0 14px rgba(70,190,255,0.12))}
.loading-wrapper .loader-scene .ring-track-inner::after{content:'';position:absolute;top:-4px;right:20%;width:10px;height:10px;background:radial-gradient(circle,#90d8ff,#2068c0);border-radius:50%;box-shadow:0 0 24px #4090ff66;opacity:0.6}
.loading-wrapper .loader-scene .core-pulse{position:relative;width:68px;height:68px;background:radial-gradient(circle at 45% 30%,#d0f0ff,#2a7ac0 65%,#0a2a4a);border-radius:50%;box-shadow:0 0 40px #2a8aff66,0 0 90px #1a6bb044,inset 0 -8px 16px rgba(0,10,30,0.7),inset 0 8px 16px rgba(180,230,255,0.3);animation:breathePulse 1.8s ease-in-out infinite;z-index:4;display:flex;align-items:center;justify-content:center;font-family:'Segoe UI','Inter',system-ui,sans-serif}
.loading-wrapper .loader-scene .core-pulse img{position:relative; display: block; margin: auto;}
.loading-wrapper .loader-scene .core-pulse::before{content:'';position:absolute;top:20%;left:26%;width:20px;height:20px;background:radial-gradient(circle,#ffffff 10%,#80d0ff 80%);border-radius:50%;filter:blur(1.5px);box-shadow:0 0 30px #b0e8ff,0 0 60px #4090ff88;opacity:0.9;z-index:0}
.loading-wrapper .loader-scene .core-pulse::after{content:'';position:absolute;inset:-16px;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(80,200,255,0.15),transparent 30%,rgba(80,200,255,0.06) 60%,transparent 80%);animation:spinTrack 4s linear infinite;z-index:-1;filter:blur(3px)}
.loading-wrapper .text-group{display:flex;flex-direction:column;align-items:center;gap:0.5rem}
.loading-wrapper .text-group .main-label{font-size:1.2rem;font-weight:300;letter-spacing:5px;background:linear-gradient(120deg,#b0dcff,#e0f4ff,#b0dcff);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmerText 2.8s linear infinite;text-transform:uppercase}
.loading-wrapper .text-group .loading-subtext{font-size:0.75rem;letter-spacing:3px;color:rgba(150,200,240,0.35);font-weight:200;}
@keyframes spinTrack{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}
@keyframes spinTrackReverse{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(-360deg)}
}
@keyframes breathePulse{
    0%{transform:scale(0.94);box-shadow:0 0 30px #2a8aff44,0 0 60px #1a6bb022}
    50%{transform:scale(1.07);box-shadow:0 0 60px #4a9aff77,0 0 110px #2a7aff44}
    100%{transform:scale(0.94);box-shadow:0 0 30px #2a8aff44,0 0 60px #1a6bb022}
}
@keyframes shimmerText{
    0%{background-position:0% center}
    100%{background-position:200% center}
}
@keyframes fadePulse{
    0%{opacity:0.2;transform:scale(0.98)}
    50%{opacity:0.75;transform:scale(1.03)}
    100%{opacity:0.2;transform:scale(0.98)}
}
@media (max-width:480px){
    .loading-wrapper{transform:scale(0.8);padding:1rem}
}