/* guotiai（nude2）暗色主题下的 FaceFusion 换脸选项 + 多张人脸照片
 * 必须在 css/faceswap-ff.css 之后加载；nude2faceswap.html / nude2faceswapvideo.html 共用。
 * 页面内联样式与 nude2-common.css 对 #face_image-container / #face_image-wrapper / .placeholder-text
 * 大量使用 !important 且定死高度、绝对定位，这里用更高优先级的选择器 + !important 逐项复位。 */

/* ===== 换脸设置卡片 ===== */
.nude2-app .n2d-ff-card #ff-options.ff-options { margin: 0; }
.nude2-app #ff-options .ff-opt-group {
    background: var(--n2-surface, #1e2438);
    border: 1px solid var(--n2-border, rgba(139, 92, 246, 0.15));
}
.nude2-app #ff-options .ff-opt-title { color: var(--n2-text, #eef2f7); font-size: 14px; }
.nude2-app #ff-options .ff-chip {
    background: transparent;
    border: 1.5px solid rgba(139, 92, 246, 0.35);
    color: var(--n2-text-light, #c0cad6);
}
.nude2-app #ff-options .ff-chip:hover { background: rgba(139, 92, 246, 0.08); }
.nude2-app #ff-options .ff-chip.is-on {
    border-color: var(--n2-primary, #8b5cf6);
    background: var(--n2-gradient-primary, linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%));
    color: #fff;
    box-shadow: 0 3px 10px rgba(139, 92, 246, 0.3);
}
.nude2-app #ff-options .ff-chip small {
    background: rgba(249, 115, 22, 0.15);
    color: var(--n2-accent, #f97316);
}
.nude2-app #ff-options .ff-chip.is-on small { background: rgba(255, 255, 255, 0.22); color: #fff; }
.nude2-app #ff-options .ff-opt-desc { color: var(--n2-text-muted, #97a5b8); font-size: 13px; }

/* ===== 模型选择（图片换脸 V1 / V2） ===== */
.nude2-app .n2d-model-select {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-bottom: 10px;
    color: var(--n2-text-light, #c0cad6);
    font-size: 14px;
}
.nude2-app .n2d-model-select .fs-model-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--n2-text, #eef2f7);
}
.nude2-app .n2d-model-select .fs-model-option input { margin: 0; cursor: pointer; accent-color: var(--n2-primary, #8b5cf6); }
.nude2-app .n2d-model-select .fs-model-hint { flex: 0 0 100%; font-size: 13px; color: var(--n2-text-muted, #97a5b8); }
.nude2-app .n2d-model-select .fs-model-hint a { color: var(--n2-secondary, #06d6a0) !important; text-decoration: underline; font-weight: 600; }

.nude2-app .fs-face-shape-tip {
    background: rgba(249, 115, 22, 0.08);
    border-color: rgba(249, 115, 22, 0.35);
    color: var(--n2-text-light, #c0cad6);
}
.nude2-app .fs-face-shape-tip strong { color: var(--n2-accent, #f97316); }

/* ===== 排队中的「取消任务」按钮（插在 .n2d-action-bar 的 #fs-processing-bar 之后），同 nude2videoundress.html ===== */
.nude2-app .main-container .n2d-action-bar button.zib-task-cancel-btn.zib-task-cancel-btn {
    display: block;
    width: auto;
    min-width: 0;
    margin: 10px auto 0;
    padding: 7px 22px;
    border: 1px solid rgba(239, 68, 68, 0.45);
    border-radius: 20px;
    background: rgba(239, 68, 68, 0.12);
    color: #f87171 !important;
    -webkit-text-fill-color: #f87171;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    z-index: auto;
    overflow: visible;
    animation: none;
}
.nude2-app .main-container .n2d-action-bar button.zib-task-cancel-btn.zib-task-cancel-btn::before { display: none; }
.nude2-app .main-container .n2d-action-bar button.zib-task-cancel-btn.zib-task-cancel-btn:hover {
    background: #ef4444;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    transform: none;
    box-shadow: none;
    animation: none;
}
.nude2-app .main-container .n2d-action-bar button.zib-task-cancel-btn.zib-task-cancel-btn:disabled { opacity: 0.6; filter: none; box-shadow: none !important; }

/* ===== 人脸预览框：随照片数量增高 ===== */
.nude2-app #face_image-container.ff-face-box {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 240px;
    max-height: none !important;
    overflow: visible !important;
    cursor: default !important;
}
.nude2-app #face_image-container.ff-face-box .placeholder-text {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    padding: 12px 12px 0 !important;
    margin: 0 !important;
}
.nude2-app #face_image-container.ff-face-box #face_image-wrapper {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    padding: 10px;
    box-sizing: border-box;
    overflow: visible !important;
}
.nude2-app #face_image-wrapper .ff-face-group {
    background: rgba(139, 92, 246, 0.05);
    border: 1.5px dashed rgba(139, 92, 246, 0.35);
}
.nude2-app #face_image-wrapper .ff-face-groups.is-two .ff-face-group.is-active {
    border-color: var(--n2-primary, #8b5cf6);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}
.nude2-app #face_image-wrapper .ff-face-group-title { color: var(--n2-text, #eef2f7); }
.nude2-app #face_image-wrapper .ff-face-group-title em {
    background: var(--n2-surface, #1e2438);
    border-color: rgba(139, 92, 246, 0.3);
    color: var(--n2-text-muted, #97a5b8);
}
.nude2-app #face_image-wrapper .ff-face-thumb {
    background: var(--n2-surface, #1e2438);
    border-color: rgba(139, 92, 246, 0.3);
}
.nude2-app #face_image-wrapper .ff-face-thumb img {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    border-radius: 0 !important;
    opacity: 1 !important;
}
.nude2-app #face_image-wrapper .ff-face-del:hover { background: var(--n2-primary, #8b5cf6); }
.nude2-app #face_image-wrapper .ff-face-add {
    background: transparent;
    border-color: rgba(139, 92, 246, 0.5);
    color: var(--n2-primary, #8b5cf6);
}
.nude2-app #face_image-wrapper .ff-face-add:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: var(--n2-primary, #8b5cf6);
}
.nude2-app #face_image-wrapper .ff-face-add small { color: var(--n2-text-muted, #97a5b8); }

@media screen and (max-width: 768px) {
    .nude2-app #face_image-container.ff-face-box { min-height: 180px; }
}