/**
 * 爆款详情图 · 灵涵蓝黑科技风（与首页 / 智能体壳一致）
 * 仅 body.page-detail-image-tool（detail_image.php）
 */

html:not([data-h5-skin]) body.detail-page.page-detail-image-tool {
    background: linear-gradient(180deg, #f8faff 0%, #f3f6fb 100%) !important;
    background-image: none !important;
    color: #0f172a;
}

html body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) {
    --page-hero-gradient: linear-gradient(
        135deg,
        var(--as-primary, #07111f) 0%,
        color-mix(in srgb, var(--as-blue, #3730A3) 58%, var(--as-primary, #07111f)) 55%,
        var(--as-blue, #4F46E5) 100%
    );
    --accent: var(--as-blue, #4338CA);
    --accent-subtle: color-mix(in srgb, var(--as-blue, #4338CA) 16%, transparent);
    --tool-brand: var(--as-blue, #4338CA);
    --tool-brand-rgb: 29, 79, 255;
    --tool-brand-soft: color-mix(in srgb, var(--as-blue, #4338CA) 12%, transparent);
    --tool-brand-border: color-mix(in srgb, var(--as-blue, #4338CA) 32%, transparent);
    --tool-brand-ring: color-mix(in srgb, var(--as-blue, #4338CA) 20%, transparent);
}

html body.detail-page.page-detail-image-tool .app-container {
    background: transparent !important;
}

/* 顶栏：随界面主题底色 / 主色 */
html body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .nav-header {
    position: sticky;
    top: 0;
    z-index: 400;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-page, #ffffff) 88%, #ffffff) 0%,
        color-mix(in srgb, var(--bg-page, #f8fafc) 94%, var(--as-blue, #4F46E5)) 100%
    ) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--as-primary, #0f172a) 6%, transparent) !important;
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--as-primary, #0f172a) 4%, transparent),
        0 8px 24px color-mix(in srgb, var(--as-blue, #4F46E5) 6%, transparent) !important;
    color: var(--as-primary, #0f172a) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .nav-back {
    color: var(--as-primary, #0f172a) !important;
}

html body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .nav-title {
    color: var(--as-primary, #0f172a) !important;
}

html body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .nav-brand-mark {
    display: none !important;
}

/* 精修：步骤条压缩（不占首屏） */
html body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .detail-wizard-track {
    margin: 0 0 10px !important;
    padding: 4px 10px !important;
    background: rgba(47, 91, 255, 0.06) !important;
    border: 1px solid rgba(47, 91, 255, 0.16) !important;
    border-radius: 18px !important;
}

html body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .detail-wiz-item {
    padding: 3px 2px !important;
    gap: 2px !important;
}

html body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .detail-wiz-num {
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    font-size: 11px !important;
    border-color: rgba(47, 91, 255, 0.2) !important;
}

html body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .detail-wiz-t {
    font-size: 10px !important;
}

html body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .detail-wiz-line {
    background: rgba(47, 91, 255, 0.14) !important;
    margin-top: 11px !important;
}

/* 创作 / 历史 Tab：压薄、减轻阴影 */
html body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .detail-tabs {
    display: flex !important;
    align-items: center !important;
    min-height: 58px !important;
    padding: 6px !important;
    gap: 6px !important;
    background: color-mix(in srgb, var(--bg-page, #ffffff) 90%, #ffffff) !important;
    border: 1px solid color-mix(in srgb, var(--as-primary, #0f172a) 6%, transparent) !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--as-primary, #0f172a) 3%, transparent) !important;
    margin-bottom: 14px !important;
}

html body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .detail-tab {
    min-height: 46px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
}

html body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .detail-tab .h5-ico-tab {
    width: 16px !important;
    height: 16px !important;
}

/* 创作/历史 Tab 选中态与未选色：由 h5-songyun-tool-shell.css 全站统一 */

/* 卡片：随主题页底色轻描边 */
html body.detail-page.page-detail-image-tool .section-card {
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        color-mix(in srgb, var(--bg-page, #f8fafc) 82%, #ffffff) 100%
    ) !important;
    border: 1px solid color-mix(in srgb, var(--as-primary, #0f172a) 6%, transparent) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--as-primary, #0f172a) 5%, transparent) !important;
}

html body.detail-page.page-detail-image-tool .section-title .hint {
    color: #52525b;
    background: #f4f4f5;
    border: 1px solid #e4e4e7;
}

/* 主按钮：indigo 品牌渐变 */
html body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .submit-btn:not(:disabled) {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important;
    color: #ffffff !important;
    border-radius: 13px !important;
    min-height: 54px !important;
    box-shadow: 0 6px 18px rgba(79, 70, 229, .22) !important;
}

/* 主按钮 · 禁用态（排除提交中 .is-generating，逻辑仍为 disabled 不可点） */
html body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .submit-btn:disabled:not(.is-generating) {
    background: linear-gradient(135deg, #e8eef6 0%, #d7e0ec 100%) !important;
    color: #8a97a8 !important;
    opacity: 1 !important;
    box-shadow: none !important;
    border: none !important;
}

html body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .submit-btn:disabled:not(.is-generating) svg,
html body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .submit-btn:disabled:not(.is-generating) .h5-ico-tab {
    color: #9aa4b2 !important;
    opacity: 1 !important;
}

/* 底部说明（压缩为单段） */
body.page-detail-image-tool .usage-tips ul {
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #64748b !important;
    padding: 0 20px !important;
    text-align: center !important;
}

body.page-detail-image-tool .usage-tips li {
    display: block !important;
    margin: 0 !important;
}

html body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .form-title-icon {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, .3) !important;
}

/* 选项胶囊：indigo 选中态 */
body.page-detail-image-tool .chip-btn.active {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(79, 70, 229, .45) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, .3) !important;
}

body.page-detail-image-tool .chip-btn:not(.active) {
    background: color-mix(in srgb, var(--bg-page, #ffffff) 78%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--as-primary, #0f172a) 8%, transparent) !important;
    color: color-mix(in srgb, var(--as-primary, #334155) 72%, #64748b) !important;
}

/* 创作 / 历史 主 Tab：indigo 选中态（覆盖全局中性灰） */
html body.detail-page.page-detail-image-tool .detail-tabs .detail-tab.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important;
    border: 1px solid rgba(79, 70, 229, .45) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, .3) !important;
}

/* 上传区 */
body.page-detail-image-tool .upload-zone {
    border: 1px dashed color-mix(in srgb, var(--as-blue, #4F46E5) 22%, transparent);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-page, #ffffff) 55%, #ffffff) 0%,
        color-mix(in srgb, var(--bg-page, #f8faff) 92%, var(--as-blue, #4F46E5)) 100%
    );
}

body.page-detail-image-tool .upload-zone:hover,
body.page-detail-image-tool .upload-zone:active {
    border-color: var(--as-blue, #4338CA);
    background: color-mix(in srgb, var(--as-blue, #4338CA) 6%, transparent);
}

body.page-detail-image-tool .upload-zone.has-image {
    border-color: var(--as-blue, #4338CA);
}

body.page-detail-image-tool .upload-icon-wrap {
    background: color-mix(in srgb, var(--as-blue, #4F46E5) 8%, var(--bg-page, #eef4ff));
    border: 1px solid color-mix(in srgb, var(--as-blue, #4F46E5) 14%, transparent);
    color: var(--as-blue, #4338CA);
}

/* 上传卡片：减 padding / 上传框高度、icon 缩小 */
body.page-detail-image-tool #detailSectionUpload.section-card {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

body.page-detail-image-tool #detailSectionUpload .upload-zone:not(.has-image) {
    padding: 18px 16px !important;
}

body.page-detail-image-tool #detailSectionUpload .upload-icon-wrap {
    width: 52px !important;
    height: 52px !important;
    margin: 0 auto 10px !important;
    border-radius: 14px !important;
}

body.page-detail-image-tool #detailSectionUpload .upload-icon-wrap svg {
    width: 24px !important;
    height: 24px !important;
}

body.page-detail-image-tool #detailSectionUpload .upload-text {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
}

body.page-detail-image-tool #detailSectionUpload .upload-desc {
    font-size: 12px !important;
    color: #64748b !important;
}

/* 区块标题：标签 + 问号说明 */
body.page-detail-image-tool .section-title-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

body.page-detail-image-tool .section-title-label > span {
    font-size: inherit;
    font-weight: inherit;
}

body.page-detail-image-tool .detail-section-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(29, 79, 255, 0.08);
    color: rgba(29, 79, 255, 0.72);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}

body.page-detail-image-tool .detail-section-help:active {
    transform: scale(0.94);
    background: rgba(29, 79, 255, 0.14);
    color: #4338CA;
}

body.page-detail-image-tool .detail-section-help svg {
    display: block;
}

.detail-section-help-pop {
    position: fixed;
    z-index: 10050;
    max-width: 280px;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.65;
    color: #334155;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    pointer-events: none;
}

.detail-section-help-pop.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* 产品补充：清爽输入区 */
body.page-detail-image-tool .detail-note-head {
    margin-bottom: 12px !important;
}

body.page-detail-image-tool .detail-note-field {
    display: flex;
    flex-direction: column;
    gap: 0;
}

body.page-detail-image-tool .detail-note-field .product-note-textarea {
    min-height: 108px;
    padding: 14px 14px;
    border-radius: 14px;
    border: 1px solid #e4e4e7;
    background: #fafafa;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

body.page-detail-image-tool .detail-note-field .product-note-textarea:focus {
    background: #fff;
    border-color: rgba(29, 79, 255, 0.35);
    box-shadow: 0 0 0 3px rgba(29, 79, 255, 0.08);
    outline: none;
}

body.page-detail-image-tool .detail-note-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding: 0 2px;
}

body.page-detail-image-tool .detail-note-meta-hint {
    font-size: 11px;
    color: #94a3b8;
}

body.page-detail-image-tool .detail-note-count {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

/* 平台说明（已收进问号，保留类名兼容旧缓存） */
body.page-detail-image-tool .detail-bench-hint {
    display: none !important;
}

/* —— 本次配置：可折叠摘要条 —— */
body.page-detail-image-tool .detail-config-fold {
    margin: 0 0 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

body.page-detail-image-tool .detail-config-fold__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    list-style: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body.page-detail-image-tool .detail-config-fold__head::-webkit-details-marker {
    display: none;
}

body.page-detail-image-tool .detail-config-fold__title {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

body.page-detail-image-tool .detail-config-fold__preview {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

body.page-detail-image-tool .detail-config-fold__chev {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #94a3b8;
    border-bottom: 1.5px solid #94a3b8;
    transform: rotate(45deg);
    margin-top: -2px;
    transition: transform 0.2s ease, border-color 0.2s;
}

body.page-detail-image-tool .detail-config-fold[open] .detail-config-fold__chev {
    transform: rotate(-135deg);
    margin-top: 2px;
    border-color: #4338CA;
}

body.page-detail-image-tool .detail-config-fold__body {
    padding: 0 12px 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
}

body.page-detail-image-tool .detail-config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

body.page-detail-image-tool .detail-config-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.05);
}

body.page-detail-image-tool .detail-config-cell--warn {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.22);
}

body.page-detail-image-tool .detail-config-cell__k {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #94a3b8;
    text-transform: uppercase;
}

body.page-detail-image-tool .detail-config-cell__v {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    word-break: break-word;
}

body.page-detail-image-tool .detail-config-cell--warn .detail-config-cell__v {
    color: #b45309;
}

body.page-detail-image-tool .detail-config-fold__hint {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: #94a3b8;
}

/* —— 合规声明：折叠条（仅爆款详情图） —— */
body.page-detail-image-tool .lh-tool-ai-legal-fold {
    margin: 10px 0 0 !important;
}

body.page-detail-image-tool .lh-tool-ai-legal-fold__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.06);
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body.page-detail-image-tool .lh-tool-ai-legal-fold__summary::-webkit-details-marker {
    display: none;
}

body.page-detail-image-tool .lh-tool-ai-legal-fold__ico {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #64748b;
    background: rgba(100, 116, 139, 0.1);
}

body.page-detail-image-tool .lh-tool-ai-legal-fold__label {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

body.page-detail-image-tool .lh-tool-ai-legal-fold__action {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
}

body.page-detail-image-tool .lh-tool-ai-legal-fold__action::before {
    content: '展开';
}

body.page-detail-image-tool .lh-tool-ai-legal-fold[open] .lh-tool-ai-legal-fold__action::before {
    content: '收起';
}

body.page-detail-image-tool .lh-tool-ai-legal-fold__panel {
    margin-top: 8px;
}

body.page-detail-image-tool .lh-tool-ai-legal--folded {
    margin: 0 !important;
}

body.page-detail-image-tool .lh-tool-ai-legal__box--in-fold {
    border-radius: 12px !important;
    padding: 12px 13px 13px !important;
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: none !important;
}

body.page-detail-image-tool .lh-tool-ai-legal__box--in-fold::before {
    display: none !important;
}

body.page-detail-image-tool .lh-tool-ai-legal__box--in-fold .lh-tool-ai-legal__compact-badge {
    display: none !important;
}

body.page-detail-image-tool .lh-tool-ai-legal__box--in-fold .lh-tool-ai-legal__p {
    font-size: 11px !important;
    line-height: 1.55 !important;
    color: #64748b !important;
}

body.page-detail-image-tool .lh-tool-ai-legal__box--in-fold .lh-tool-ai-legal__muted-txt {
    font-size: 10px !important;
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-config-fold {
    background: #1e293b;
    border-color: #334155;
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-config-fold__title,
html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-config-cell__v {
    color: #f1f5f9;
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-config-fold__preview,
html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-config-fold__hint {
    color: #94a3b8;
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-config-fold__body {
    border-top-color: #334155;
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-config-cell {
    background: rgba(15, 23, 42, 0.45);
    border-color: #334155;
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .lh-tool-ai-legal-fold__summary {
    background: #1e293b;
    border-color: #334155;
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .lh-tool-ai-legal-fold__label {
    color: #cbd5e1;
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .lh-tool-ai-legal__box--in-fold {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* 顶栏下介绍条 */
body.page-detail-image-tool .h5-tool-intro {
    border: 1px solid rgba(29, 79, 255, 0.14);
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 255, 0.88) 100%);
    box-shadow: 0 6px 22px rgba(29, 79, 255, 0.07);
}

/* 创作页：观感与易用（不改 JS / 表单逻辑） */
html body.detail-page.page-detail-image-tool .main-content {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-behavior: smooth;
}

body.page-detail-image-tool .section-hint-swipe {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: rgba(29, 79, 255, 0.52);
    white-space: nowrap;
}

/* 横向选项带两侧渐隐，暗示可滑动 */
body.page-detail-image-tool .section-card .scroll-row {
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

body.page-detail-image-tool .chip-btn {
    transition:
        transform 0.16s ease,
        background 0.2s,
        color 0.2s,
        border-color 0.2s,
        box-shadow 0.2s;
}

@media (prefers-reduced-motion: no-preference) {
    body.page-detail-image-tool .chip-btn:active {
        transform: scale(0.97);
    }

    body.page-detail-image-tool .upload-zone:not(.has-image) {
        animation: detail-image-upload-border-breathe 5s ease-in-out infinite;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-detail-image-tool .upload-zone:not(.has-image) {
        animation: none;
    }
}

@keyframes detail-image-upload-border-breathe {
    0%,
    100% {
        border-color: rgba(47, 91, 255, 0.2);
        box-shadow: 0 0 0 0 rgba(29, 79, 255, 0);
    }
    50% {
        border-color: rgba(47, 91, 255, 0.32);
        box-shadow: 0 6px 18px rgba(29, 79, 255, 0.06);
    }
}

/* 历史区 */
body.page-detail-image-tool .history-title i,
body.page-detail-image-tool .history-header-left i {
    color: #4338CA;
}

body.page-detail-image-tool .history-refresh-btn {
    border-color: rgba(29, 79, 255, 0.22);
    color: #4F46E5;
    background: rgba(255, 255, 255, 0.85);
}

body.page-detail-image-tool .history-refresh-btn:active {
    background: rgba(29, 79, 255, 0.08);
}

body.page-detail-image-tool .history-scroll-container {
    overflow: visible;
}

body.page-detail-image-tool .history-scroll-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
    width: 100%;
    max-width: 100%;
}

body.page-detail-image-tool .history-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border-color: rgba(29, 79, 255, 0.1);
    box-shadow: 0 4px 16px rgba(29, 79, 255, 0.08);
}

body.page-detail-image-tool .history-status-tag.completed {
    background: #eef4ff;
    color: #4338CA;
    border: 1px solid rgba(47, 91, 255, 0.2);
    font-weight: 700;
}

body.page-detail-image-tool .history-status-tag.missing {
    background: linear-gradient(135deg, rgba(254, 215, 170, 0.98) 0%, rgba(251, 146, 60, 0.95) 100%);
    color: #7c2d12;
    border: 1px solid rgba(234, 88, 12, 0.35);
    font-weight: 700;
}

body.page-detail-image-tool .history-card-hint {
    color: #9a3412;
    background: rgba(255, 251, 235, 0.96);
    border-color: rgba(251, 191, 36, 0.4);
}

body.page-detail-image-tool .history-stat-card--done .history-stat-num {
    color: #4F46E5;
}

body.page-detail-image-tool .history-stat-card--done {
    border-color: rgba(29, 79, 255, 0.18);
    box-shadow: 0 4px 16px rgba(29, 79, 255, 0.1);
}

body.page-detail-image-tool .history-card-title {
    color: #1a1a1a;
}

/* 历史详情顶栏 */
body.page-detail-image-tool .detail-view-header {
    background: linear-gradient(118deg, #eef4ff 0%, #ffffff 55%);
    border-bottom-color: rgba(29, 79, 255, 0.12);
}

body.page-detail-image-tool .detail-view-title {
    color: #1a1a1a;
}

/* ===============================================
   结果页增强样式（对标同行爆款风格）
   =============================================== */

/* 详情图区块 - 卡片风格 */
body.page-detail-image-tool .detail-card-block {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(29, 79, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

body.page-detail-image-tool .detail-card-block .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-detail-image-tool .detail-card-block .section-title .hint {
    background: linear-gradient(135deg, #4338CA 0%, #4F46E5 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
    margin-left: auto;
}

body.page-detail-image-tool .section-title-icon {
    color: #4338CA;
    flex-shrink: 0;
}

/* 一键保存按钮 */
body.page-detail-image-tool .detail-save-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    margin-top: 12px;
    background: linear-gradient(135deg, #07111f 0%, #3730A3 55%, #4F46E5 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 8px 20px rgba(29, 79, 255, 0.16);
}

body.page-detail-image-tool .detail-save-all-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(29, 79, 255, 0.25);
}

body.page-detail-image-tool .detail-save-all-btn svg {
    flex-shrink: 0;
}

/* 爆款标题列表 - 精致卡片式 */
body.page-detail-image-tool .detail-titles-scroll {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

body.page-detail-image-tool .detail-title-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

body.page-detail-image-tool .detail-title-item:hover {
    background: #eef4ff;
    border-color: rgba(29, 79, 255, 0.3);
}

body.page-detail-image-tool .detail-title-item.selected {
    background: linear-gradient(135deg, rgba(29, 79, 255, 0.08) 0%, rgba(47, 91, 255, 0.05) 100%);
    border-color: #4338CA;
    box-shadow: 0 2px 12px rgba(29, 79, 255, 0.15);
}

body.page-detail-image-tool .detail-title-num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #07111f 0%, #3730A3 55%, #4F46E5 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 50%;
    flex-shrink: 0;
}

body.page-detail-image-tool .detail-title-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

body.page-detail-image-tool .detail-title-copy {
    flex-shrink: 0;
    padding: 6px;
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

body.page-detail-image-tool .detail-title-copy:hover {
    background: rgba(29, 79, 255, 0.1);
    color: #4338CA;
}

/* 文案内容 - 标签切换 */
body.page-detail-image-tool .detail-content-tabs-wrap {
    margin-bottom: 12px;
}

body.page-detail-image-tool .detail-content-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.page-detail-image-tool .detail-content-tag {
    padding: 8px 16px;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

body.page-detail-image-tool .detail-content-tag:hover {
    background: #eef4ff;
    border-color: rgba(29, 79, 255, 0.3);
}

body.page-detail-image-tool .detail-content-tag.active {
    background: linear-gradient(135deg, #4338CA 0%, #4F46E5 100%);
    color: #fff;
    border-color: transparent;
    font-weight: 500;
}

body.page-detail-image-tool .detail-content-box {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 16px;
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    white-space: pre-wrap;
    max-height: 300px;
    overflow-y: auto;
}

body.page-detail-image-tool .detail-content-box.detail-content-box--rich {
    white-space: normal;
}

body.page-detail-image-tool .detail-content-box .detail-content-para {
    margin: 0 0 12px;
    padding: 0 0 0 10px;
    border-left: 3px solid rgba(29, 79, 255, 0.35);
    font-size: 14px;
    line-height: 1.82;
    color: #333;
}

body.page-detail-image-tool .detail-content-box .detail-content-para:last-child {
    margin-bottom: 0;
}

body.page-detail-image-tool .detail-content-box .detail-content-para--lead {
    font-weight: 400;
    color: #334155;
}

body.page-detail-image-tool .detail-content-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px;
    margin-top: 12px;
    background: #fff;
    border: 1px solid rgba(29, 79, 255, 0.3);
    border-radius: 10px;
    color: #4F46E5;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

body.page-detail-image-tool .detail-content-copy-btn:hover {
    background: #eef4ff;
}

/* 话题标签列表 - 精致卡片式 */
body.page-detail-image-tool .detail-topics-scroll {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

body.page-detail-image-tool .detail-topic-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

body.page-detail-image-tool .detail-topic-item:hover {
    background: #f5f0ff;
    border-color: rgba(139, 92, 246, 0.3);
}

body.page-detail-image-tool .detail-topic-item.selected {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(167, 139, 250, 0.05) 100%);
    border-color: #8b5cf6;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.15);
}

body.page-detail-image-tool .detail-topic-num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50%;
    flex-shrink: 0;
}

body.page-detail-image-tool .detail-topic-text {
    flex: 1;
    font-size: 14px;
    color: #333;
}

body.page-detail-image-tool .detail-topic-copy {
    flex-shrink: 0;
    padding: 5px;
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.2s;
}

body.page-detail-image-tool .detail-topic-copy:hover {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

/* 详情图网格 - 横向滚动 */
body.page-detail-image-tool .detail-image-select-hint {
    margin: 0 0 10px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.55;
    color: #555;
    background: rgba(29, 79, 255, 0.06);
    border-radius: 10px;
    border: 1px solid rgba(29, 79, 255, 0.12);
}

body.page-detail-image-tool .detail-image-select-hint strong {
    color: #1a1a1a;
    font-weight: 700;
}

body.page-detail-image-tool .detail-image-item:not(.detail-stitch-entry) .detail-image-pick {
    background: linear-gradient(180deg, #6366F1 0%, #4338CA 100%);
}

body.page-detail-image-tool .detail-image-item:not(.detail-stitch-entry) .detail-image-pick:active {
    background: linear-gradient(180deg, #4338CA 0%, #153ecc 100%);
}

body.page-detail-image-tool .detail-images-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    width: 100%;
    padding: 8px 0;
    overflow: visible;
}

body.page-detail-image-tool .detail-image-item {
    position: relative;
    width: 100%;
    min-width: 0;
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

body.page-detail-image-tool .detail-image-item:not(.detail-stitch-entry) .detail-image-thumb {
    aspect-ratio: 9 / 16;
}

body.page-detail-image-tool .detail-stitch-entry {
    grid-column: 1 / -1;
    min-height: 108px;
}

body.page-detail-image-tool .detail-image-item:not(.detail-stitch-entry) .detail-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

/* 缩略图不再叠数字角标（保留类名以免旧缓存 HTML 报错，仅占位不显示） */
body.page-detail-image-tool .detail-image-item .img-index {
    display: none !important;
}

/* 拼接长图入口卡片 */
body.page-detail-image-tool .detail-stitch-entry {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(29, 79, 255, 0.08) 0%, rgba(47, 91, 255, 0.04) 100%);
    border: 2px dashed rgba(29, 79, 255, 0.3);
    cursor: pointer;
}

body.page-detail-image-tool .stitch-entry-content {
    text-align: center;
}

body.page-detail-image-tool .stitch-entry-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
    background: linear-gradient(135deg, #4338CA 0%, #4F46E5 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

body.page-detail-image-tool .stitch-entry-text {
    font-size: 13px;
    font-weight: 600;
    color: #4F46E5;
}

body.page-detail-image-tool .stitch-entry-sub {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

/* 发布区块 */
body.page-detail-image-tool .detail-publish-section {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(29, 79, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

body.page-detail-image-tool .detail-publish-block-title {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

body.page-detail-image-tool .detail-publish-block-icon {
    font-size: 16px;
    margin-right: 6px;
}

body.page-detail-image-tool .detail-publish-block-desc {
    font-size: 12px;
    color: #999;
    margin-left: auto;
}

body.page-detail-image-tool .detail-publish-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

body.page-detail-image-tool .detail-publish-btn.xhs {
    background: linear-gradient(135deg, #ff2442 0%, #e91e3a 100%);
    color: #fff;
}

body.page-detail-image-tool .detail-publish-btn.dy {
    background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
    color: #fff;
}

/* 深色模式 */
html[data-h5-appearance='dark'] body.detail-page.page-detail-image-tool {
    background: linear-gradient(185deg, #0b1220 0%, #0f172a 50%, #0b1220 100%) !important;
    color: #e2e8f0;
}

html[data-h5-appearance='dark'] body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) {
    --accent: #4F46E5;
    --accent-subtle: rgba(47, 91, 255, 0.18);
    --tool-brand: #4F46E5;
    --tool-brand-rgb: 47, 91, 255;
    --tool-brand-soft: rgba(47, 91, 255, 0.14);
    --tool-brand-border: rgba(47, 91, 255, 0.35);
    --tool-brand-ring: rgba(47, 91, 255, 0.22);
}

html[data-h5-appearance='dark'] body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .nav-header {
    background: linear-gradient(118deg, #0f172a 0%, #312E81 45%, #4338CA 100%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-h5-appearance='dark'] body.detail-page.page-detail-image-tool .section-card {
    background: rgba(28, 25, 23, 0.85) !important;
    border-color: rgba(47, 91, 255, 0.14) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
    color: #e2e8f0;
}

html[data-h5-appearance='dark'] body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .detail-tabs {
    background: rgba(28, 25, 23, 0.55) !important;
    border-color: rgba(47, 91, 255, 0.12) !important;
}

html[data-h5-appearance='dark'] body.detail-page.page-detail-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .submit-btn:not(:disabled) {
    background: linear-gradient(135deg, #4F46E5 0%, #07111f 100%) !important;
    box-shadow: 0 6px 22px rgba(29, 79, 255, 0.35) !important;
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .h5-tool-intro {
    border-color: rgba(47, 91, 255, 0.18);
    background: linear-gradient(125deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 43, 100, 0.35) 100%);
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-view-header {
    background: linear-gradient(118deg, #1c1917 0%, #292524 100%);
    border-bottom-color: rgba(47, 91, 255, 0.15);
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-view-title {
    color: #f1f5f9;
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .section-hint-swipe {
    color: rgba(148, 163, 184, 0.72);
}

html[data-h5-appearance='dark'] .detail-section-help-pop {
    color: #e2e8f0;
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-note-field .product-note-textarea {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(148, 163, 184, 0.18);
    color: #f1f5f9;
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-note-field .product-note-textarea:focus {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(47, 91, 255, 0.45);
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .history-notice-bar--prominent {
    background: linear-gradient(105deg, rgba(15, 43, 100, 0.45) 0%, rgba(15, 23, 42, 0.78) 100%);
    border-color: rgba(47, 91, 255, 0.28);
    color: #cbd5e1;
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .history-stat-card--run {
    background: rgba(15, 23, 42, 0.65);
    border-color: rgba(47, 91, 255, 0.22);
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .history-stat-card--done {
    background: rgba(28, 25, 23, 0.65);
    border-color: rgba(47, 91, 255, 0.2);
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .history-stat-label {
    color: #94a3b8;
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .history-poll-foot {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(47, 91, 255, 0.2);
    color: #94a3b8;
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .history-card-title {
    color: #f1f5f9;
}

/* 深色模式下的结果页卡片 */
html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-card-block {
    background: rgba(28, 25, 23, 0.9);
    border-color: rgba(47, 91, 255, 0.15);
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-card-block .section-title {
    color: #f1f5f9;
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-title-item,
html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-topic-item {
    background: rgba(41, 37, 36, 0.8);
    border-color: rgba(68, 64, 60, 0.5);
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-title-text,
html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-topic-text {
    color: #e2e8f0;
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-content-box {
    background: rgba(41, 37, 36, 0.8);
    border-color: rgba(68, 64, 60, 0.5);
    color: #e2e8f0;
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-content-box .detail-content-para {
    color: #e2e8f0;
    border-left-color: rgba(47, 91, 255, 0.45);
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-content-box .detail-content-para--lead {
    color: #f1f5f9;
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-content-tag {
    background: rgba(41, 37, 36, 0.8);
    border-color: rgba(68, 64, 60, 0.5);
    color: #a1a1aa;
}

html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-publish-section {
    background: rgba(28, 25, 23, 0.9);
    border-color: rgba(47, 91, 255, 0.15);
}

/* 仅「自有产品MAX」历史：隐藏 Tab 条（仅「历史」单 Tab 时全站选中态过重，与下方「生成记录」重复） */
body.page-detail-image-tool--product-max .detail-tabs {
    display: none !important;
}
body.page-detail-image-tool--product-max .history-section {
    margin-top: 2px;
}
body.page-detail-image-tool--product-max .history-card-info .otb-id-chip,
.history-card-info .otb-id-chip {
    display: inline-flex;
    max-width: 100%;
    margin-top: 8px;
}

/* ========== 开始生成 → 切历史：电影感全屏过场（无大视频，纯动效） ========== */
html.detail-cinematic-no-scroll,
body.detail-cinematic-no-scroll {
    overflow: hidden !important;
    /* 勿用 touch-action:none：切后台/异常时若类未卸下，部分 WebView 会导致全页链接（含顶栏返回）点不动 */
}
body.page-detail-image-tool .detail-cinematic-handoff {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom);
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: none;
}
/* 过场层始终不拦截点击/滚动解锁逻辑，避免上传失败时全屏卡住 */
body.page-detail-image-tool.detail-cinematic-playing .detail-cinematic-handoff {
    pointer-events: none;
}
body.page-detail-image-tool .detail-cinematic-handoff__aurora {
    position: absolute;
    inset: -20%;
    background: conic-gradient(from 200deg at 50% 50%, rgba(29, 79, 255, 0.35), rgba(245, 158, 11, 0.2), rgba(168, 85, 247, 0.25), rgba(29, 79, 255, 0.35));
    filter: blur(48px);
    opacity: 0;
    animation: detailCinAurora 2.4s ease-in-out infinite;
    pointer-events: none;
}
body.page-detail-image-tool .detail-cinematic-handoff--active .detail-cinematic-handoff__aurora {
    opacity: 0.55;
}
body.page-detail-image-tool .detail-cinematic-handoff__particles {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, 0.45), transparent),
        radial-gradient(1px 1px at 78% 18%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1.5px 1.5px at 44% 68%, rgba(253, 230, 138, 0.5), transparent),
        radial-gradient(1px 1px at 88% 72%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 28% 82%, rgba(147, 197, 253, 0.45), transparent);
    opacity: 0;
    pointer-events: none;
    animation: detailCinParticles 3s linear infinite;
}
body.page-detail-image-tool .detail-cinematic-handoff--active .detail-cinematic-handoff__particles {
    opacity: 1;
}
@keyframes detailCinAurora {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(12deg) scale(1.06); }
}
@keyframes detailCinParticles {
    from { transform: translateY(0); }
    to { transform: translateY(-12px); }
}
body.page-detail-image-tool .detail-cinematic-handoff--brief.detail-cinematic-handoff--active {
    animation: detailCinEnt 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
body.page-detail-image-tool .detail-cinematic-handoff--brief.detail-cinematic-handoff--exit {
    animation: detailCinExit 0.36s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
body.page-detail-image-tool .detail-cinematic-handoff[hidden] {
    display: none;
}
body.page-detail-image-tool .detail-cinematic-handoff--active {
    display: flex;
    opacity: 1;
    visibility: visible;
    animation: detailCinEnt 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
body.page-detail-image-tool .detail-cinematic-handoff--exit {
    animation: detailCinExit 0.52s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
body.page-detail-image-tool .detail-cinematic-handoff__eyebrow,
body.page-detail-image-tool .detail-cinematic-handoff__title,
body.page-detail-image-tool .detail-cinematic-handoff__line,
body.page-detail-image-tool .detail-cinematic-handoff__bar {
    z-index: 1;
    position: relative;
}
body.page-detail-image-tool .detail-cinematic-handoff__shade {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 40%, #0c0a09 0%, #020617 55%, #000 100%);
}
body.page-detail-image-tool .detail-cinematic-handoff__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 30%, rgba(0, 0, 0, 0.85) 100%);
    pointer-events: none;
}
body.page-detail-image-tool .detail-cinematic-handoff__frame {
    position: relative;
    width: min(100%, 400px);
    max-width: 96vw;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(165deg, rgba(20, 18, 16, 0.92) 0%, rgba(8, 8, 12, 0.95) 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 32px 80px rgba(0, 0, 0, 0.65),
        0 0 100px rgba(29, 79, 255, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 18px 16px;
    text-align: center;
    transform-origin: 50% 50%;
    overflow: hidden;
}
body.page-detail-image-tool .detail-cinematic-handoff__glow {
    position: absolute;
    width: 140%;
    height: 70%;
    left: -20%;
    top: -20%;
    background: radial-gradient(closest-side, rgba(29, 79, 255, 0.2) 0%, transparent 75%);
    filter: blur(24px);
    pointer-events: none;
    animation: detailCinGlow 2.2s ease-in-out infinite;
}
body.page-detail-image-tool .detail-cinematic-handoff__grain {
    position: absolute;
    inset: 0;
    opacity: 0.14;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    pointer-events: none;
    mix-blend-mode: soft-light;
}
body.page-detail-image-tool .detail-cinematic-handoff__scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 28%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 250, 245, 0.04) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateY(-100%);
    pointer-events: none;
    animation: detailCinScan 1.6s ease-in-out infinite;
}
body.page-detail-image-tool .detail-cinematic-handoff__ring {
    position: absolute;
    width: 120px;
    height: 120px;
    left: 50%;
    top: 38%;
    margin: -60px 0 0 -60px;
    z-index: 0;
    transform-origin: 50% 50%;
    border: 1px solid rgba(29, 79, 255, 0.2);
    border-top-color: rgba(249, 180, 120, 0.5);
    border-radius: 50%;
    pointer-events: none;
    animation: detailCinSpin 2.8s linear infinite;
    opacity: 0.4;
}
body.page-detail-image-tool .detail-cinematic-handoff__eyebrow {
    position: relative;
    margin: 0 0 4px;
    font-size: 9px;
    letter-spacing: 0.38em;
    font-weight: 700;
    color: rgba(253, 230, 138, 0.5);
    text-transform: uppercase;
    opacity: 0;
    animation: detailCinTextIn 0.45s ease 0.05s both;
}
body.page-detail-image-tool .detail-cinematic-handoff__title {
    position: relative;
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 0 40px rgba(29, 79, 255, 0.32), 0 2px 0 rgba(0, 0, 0, 0.3);
    opacity: 0;
    animation: detailCinTextIn 0.5s ease 0.12s both;
}
body.page-detail-image-tool .detail-cinematic-handoff__title-m,
body.page-detail-image-tool .detail-cinematic-handoff__title-s {
    display: inline;
}
body.page-detail-image-tool .detail-cinematic-handoff__title-s {
    font-size: 0.72em;
    font-weight: 700;
    color: #fdba74;
    margin-left: 4px;
    letter-spacing: 0.12em;
    vertical-align: 0.08em;
}
body.page-detail-image-tool .detail-cinematic-handoff__line {
    position: relative;
    margin: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(248, 250, 255, 0.78);
    opacity: 0;
}
body.page-detail-image-tool .detail-cinematic-handoff--active .detail-cinematic-handoff__line--1 {
    animation: detailCinTextIn 0.5s ease 0.4s both;
}
body.page-detail-image-tool .detail-cinematic-handoff--active .detail-cinematic-handoff__line--2 {
    margin-top: 6px;
    animation: detailCinTextIn 0.5s ease 0.7s both;
}
body.page-detail-image-tool .detail-cinematic-handoff__en {
    display: block;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
    font-weight: 500;
}
body.page-detail-image-tool .detail-cinematic-handoff__zh {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(254, 240, 230, 0.9);
}
body.page-detail-image-tool .detail-cinematic-handoff__bar {
    position: relative;
    margin-top: 14px;
    width: 100%;
    max-width: 220px;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 1px;
    overflow: hidden;
    opacity: 0;
    animation: detailCinTextIn 0.4s ease 0.25s both;
}
body.page-detail-image-tool .detail-cinematic-handoff--active .detail-cinematic-handoff__bar {
    animation: detailCinTextIn 0.4s ease 0.3s both;
}
body.page-detail-image-tool .detail-cinematic-handoff__bar-fill {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    max-width: 100%;
    background: linear-gradient(90deg, #4F46E5, #f59e0b, #4338CA);
    box-shadow: 0 0 16px rgba(29, 79, 255, 0.55);
    border-radius: 1px;
    animation: detailCinBar 1.55s ease-in-out 0.15s both;
}
@keyframes detailCinEnt {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes detailCinExit {
    to {
        opacity: 0;
        transform: scale(1.03);
    }
}
@keyframes detailCinTextIn {
    from {
        opacity: 0;
        filter: blur(2px);
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        filter: none;
        transform: translateY(0);
    }
}
@keyframes detailCinScan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(420%); }
}
@keyframes detailCinSpin {
    to { transform: rotate(360deg); }
}
@keyframes detailCinGlow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(2%, 3%) scale(1.04); }
}
@keyframes detailCinBar {
    0% { width: 0; }
    100% { width: 100%; }
}
@media (max-width: 400px) {
    body.page-detail-image-tool .detail-cinematic-handoff__title {
        font-size: 20px;
    }
}
html[data-h5-appearance='dark'] body.page-detail-image-tool .detail-cinematic-handoff__frame {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 32px 80px rgba(0, 0, 0, 0.75);
}

/* ========== 自有产品 MAX · 切历史电影过场增强（仅 --product-max） ========== */
body.page-detail-image-tool--product-max .detail-cinematic-handoff__shade {
    background:
        radial-gradient(ellipse 95% 75% at 50% 30%, rgba(109, 40, 217, 0.35) 0%, transparent 52%),
        radial-gradient(120% 90% at 50% 40%, #0c0a14 0%, #020617 55%, #000 100%);
}
body.page-detail-image-tool--product-max .detail-cinematic-handoff__warp {
    position: absolute;
    inset: -30%;
    background: repeating-linear-gradient(
        100deg,
        transparent 0,
        transparent 40px,
        rgba(167, 139, 250, 0.08) 40px,
        rgba(167, 139, 250, 0.08) 42px
    );
    animation: detailPmCinWarp 0.5s linear infinite;
    mask-image: radial-gradient(ellipse 85% 70% at 50% 50%, #000 10%, transparent 75%);
    pointer-events: none;
}
body.page-detail-image-tool--product-max .detail-cinematic-handoff__burst {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 40%, rgba(251, 191, 36, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 18% 78%, rgba(56, 189, 248, 0.08) 0%, transparent 34%);
    animation: detailPmCinBurst 1.8s ease-in-out infinite alternate;
    pointer-events: none;
}
body.page-detail-image-tool--product-max .detail-cinematic-handoff__aurora {
    background: conic-gradient(from 200deg at 50% 50%, rgba(109, 40, 217, 0.4), rgba(251, 191, 36, 0.22), rgba(56, 189, 248, 0.2), rgba(109, 40, 217, 0.4));
}
body.page-detail-image-tool--product-max .detail-cinematic-handoff__frame {
    border-color: rgba(196, 181, 253, 0.22);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 32px 80px rgba(0, 0, 0, 0.65),
        0 0 120px rgba(109, 40, 217, 0.2);
}
body.page-detail-image-tool--product-max .detail-cinematic-handoff__orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(196, 181, 253, 0.28);
    pointer-events: none;
}
body.page-detail-image-tool--product-max .detail-cinematic-handoff__orbit--a {
    width: 130px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: detailPmCinOrbit 2.4s ease-in-out infinite;
}
body.page-detail-image-tool--product-max .detail-cinematic-handoff__orbit--b {
    width: 96px;
    height: 96px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-style: dashed;
    border-color: rgba(251, 191, 36, 0.25);
    animation: detailCinSpin 3.4s linear infinite;
}
body.page-detail-image-tool--product-max .detail-cinematic-handoff__title-s {
    background: linear-gradient(90deg, #fbbf24, #fde68a, #fbbf24);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.45));
}
body.page-detail-image-tool--product-max .detail-cinematic-handoff__bar-fill {
    background: linear-gradient(90deg, #a78bfa, #fbbf24, #38bdf8, #a78bfa);
    box-shadow: 0 0 20px rgba(167, 139, 250, 0.55);
}
@keyframes detailPmCinWarp {
    from { transform: translateX(-8%) skewX(-4deg); }
    to { transform: translateX(8%) skewX(-4deg); }
}
@keyframes detailPmCinBurst {
    from { opacity: 0.65; transform: scale(1); }
    to { opacity: 1; transform: scale(1.05); }
}
@keyframes detailPmCinOrbit {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
    50% { transform: translate(-50%, -50%) scale(1.07); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    body.page-detail-image-tool--product-max .detail-cinematic-handoff__warp,
    body.page-detail-image-tool--product-max .detail-cinematic-handoff__burst,
    body.page-detail-image-tool--product-max .detail-cinematic-handoff__orbit {
        animation: none !important;
    }
}

/* 强制覆盖 global layout-unify 的中性 active 态 */
html body.detail-page.page-detail-image-tool .section-card .chip-btn.active {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(79, 70, 229, 0.45) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
    font-weight: 700 !important;
}