/** * 灵涵 · 工具内页设计系统（与「爆款详情图」样板对齐） * * 使用方式：在工具内页增加 class="tool-page"（可与其余 body class 并存）。 * 现有 DOM 可继续用 .nav-header / .section-card / .chip-btn 等；以下 .tool-* 为可选语义类，便于新页与文档统一。 * * 命名对照（可选）： * .tool-page → 根：body 上挂载 * .tool-header → 建议与

同用或二选一 * .tool-brand-tag → 与 .nav-brand-mark 一致（由 _brand_meta 输出） * .tool-section-card → 与 .section-card 同级卡片 * .tool-tab-card → 与 .tab-nav / .detail-tabs 容器 * .tool-tab-active → 与 .tab-nav-item.active / .detail-tab.active * .tool-upload-box → 与 .upload-zone * .tool-option-pill → 与 .chip-btn / .csp-card 等选项 * .tool-option-active → 选中态 * .tool-info-box → 与 .section-hint / .lh-info-hint 等 * .tool-primary-btn → 与 .submit-btn 主操作 * .tool-primary-btn-disabled → 禁用主按钮视觉（非提交中） */ /* ── 设计令牌（仅 body.tool-page subtree，不污染首页等） ── */ body.tool-page { --tool-txt: var(--as-primary, #0f172a); --tool-txt-muted: color-mix(in srgb, var(--as-primary, #0f172a) 45%, #64748b); --tool-txt-soft: #94a3b8; --tool-primary: var(--as-blue, #2563eb); --tool-primary-soft: color-mix(in srgb, var(--as-blue, #2563eb) 10%, #ffffff); --tool-page-bg: linear-gradient( 180deg, #fafbfc 0%, color-mix(in srgb, var(--as-blue, #2563eb) 4%, #f1f5f9) 100% ); --tool-gradient-cta: linear-gradient( 135deg, var(--as-primary, #0f172a) 0%, color-mix(in srgb, var(--as-blue, #2563eb) 55%, var(--as-primary, #0f172a)) 52%, var(--as-blue, #2563eb) 100% ); --tool-card-border: rgba(15, 23, 42, 0.06); --tool-card-shadow: 0 4px 20px rgba(15, 23, 42, 0.045); --tool-option-active-bg: color-mix(in srgb, var(--as-blue, #2563eb) 11%, #ffffff); --tool-option-active-border: color-mix(in srgb, var(--as-blue, #2563eb) 30%, transparent); --tool-primary-btn-shadow: 0 12px 28px color-mix(in srgb, var(--as-blue, #2563eb) 22%, transparent); --tool-disabled-btn-bg: linear-gradient(135deg, #e8eef6 0%, #d7e0ec 100%); --tool-disabled-btn-txt: #8a97a8; --tool-disabled-ico: #9aa4b2; } /* 可选：独立使用语义类（与现有结构并存） */ body.tool-page .tool-section-card, body.tool-page.tool-section-card { background: #ffffff; border: 1px solid var(--tool-card-border); border-radius: 20px; box-shadow: var(--tool-card-shadow); color: var(--tool-txt); } body.tool-page .tool-primary-btn:not(:disabled), body.tool-page.tool-primary-btn:not(:disabled) { background: var(--tool-gradient-cta); color: #ffffff; box-shadow: var(--tool-primary-btn-shadow); border: none; border-radius: 16px; font-weight: 600; } body.tool-page .tool-primary-btn:disabled:not(.is-generating), body.tool-page .tool-primary-btn-disabled:disabled:not(.is-generating), body.tool-page.tool-primary-btn:disabled:not(.is-generating) { background: var(--tool-disabled-btn-bg) !important; color: var(--tool-disabled-btn-txt) !important; opacity: 1 !important; box-shadow: none !important; border: none !important; } body.tool-page .tool-primary-btn:disabled:not(.is-generating) svg, body.tool-page .tool-primary-btn:disabled:not(.is-generating) .h5-ico-tab, body.tool-page .tool-primary-btn:disabled:not(.is-generating) i { color: var(--tool-disabled-ico) !important; opacity: 1 !important; } body.tool-page .tool-option-pill.tool-option-active, body.tool-page .tool-option-active { background: var(--tool-option-active-bg) !important; border-color: var(--tool-option-active-border) !important; color: var(--tool-primary) !important; font-weight: 700 !important; } /* ═══════════════════════════════════════════════════════════ 「自有产品」ecom_env_image.php?iw=1（body.page-ecom-iw-product.tool-page）与爆款详情图一致的蓝系；覆盖页内旧紫/灰黑选中块与主按钮。 ═══════════════════════════════════════════════════════════ */ body.tool-page.page-ecom-iw-product { /* 全站「界面主题」在 html 上提供 --as-blue；无主题时回落默认蓝 */ --iw-accent: var(--as-blue, #2f5bff); } body.tool-page.page-ecom-iw-product .section-card--copy-pref { background: linear-gradient( 168deg, #ffffff 0%, color-mix(in srgb, var(--bg-primary, #f8fafc) 92%, var(--iw-accent, #2f5bff)) 52%, color-mix(in srgb, var(--bg-primary, #f1f5f9) 88%, var(--iw-accent, #2f5bff)) 100% ) !important; border: 1px solid color-mix(in srgb, var(--iw-accent, #2f5bff) 12%, transparent) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.92) inset, 0 12px 36px rgba(15, 23, 42, 0.06), 0 0 0 1px color-mix(in srgb, var(--iw-accent, #2f5bff) 6%, transparent) !important; } body.tool-page.page-ecom-iw-product .section-card--copy-pref .csp-section { background: linear-gradient(175deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%); border: 1px solid rgba(15, 23, 42, 0.055); box-shadow: 0 2px 14px rgba(15, 23, 42, 0.045); padding: 10px 12px 11px; } body.tool-page.page-ecom-iw-product .section-card--copy-pref .csp-section:not(:last-child) { margin-bottom: 12px; } body.tool-page.page-ecom-iw-product .csp-swipe-hint { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: rgba(248, 250, 252, 0.98); border: 1px solid rgba(15, 23, 42, 0.06); font-size: 10px; font-weight: 500; color: var(--tool-txt-soft); letter-spacing: 0.02em; animation: none; } body.tool-page.page-ecom-iw-product .csp-collapse-head { border-radius: 12px; padding: 10px 6px; transition: background 0.2s ease; } body.tool-page.page-ecom-iw-product .csp-collapse-head:active { background: rgba(248, 250, 252, 0.85); } body.tool-page.page-ecom-iw-product .csp-section-title { letter-spacing: -0.01em; } body.tool-page.page-ecom-iw-product .csp-icon-brand, body.tool-page.page-ecom-iw-product .csp-icon-gradient { background: var(--tool-gradient-cta) !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 6px color-mix(in srgb, var(--iw-accent, #2f5bff) 16%, transparent) !important; } body.tool-page.page-ecom-iw-product .csp-scroll-row--iw .csp-card { min-height: 72px; padding: 6px 8px 8px; gap: 5px; border-radius: 16px !important; } body.tool-page.page-ecom-iw-product .csp-scroll-row--iw .csp-card-t { font-size: 11px; } /* chip 图标外框：结构共用 */ body.tool-page.page-ecom-iw-product .csp-scroll-row--iw .csp-card-ico, body.tool-page.page-ecom-iw-product .csp-scroll-row--iw .iw-chip-ico-shell { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 auto; border-radius: 12px; line-height: 0; } body.tool-page.page-ecom-iw-product .csp-scroll-row--iw .csp-card-ico-svg { display: block; color: #64748b; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55)); } /* 风格 / 场景 chip：统一蓝紫灰壳（与文件头「蓝系」说明一致） */ body.tool-page.page-ecom-iw-product .csp-scroll-row--iw-style .iw-chip-ico-shell, body.tool-page.page-ecom-iw-product .csp-scroll-row--iw-scene .iw-chip-ico-shell { background: linear-gradient( 160deg, color-mix(in srgb, var(--bg-primary, #f8fafc) 94%, var(--iw-accent, #2f5bff)) 0%, color-mix(in srgb, var(--bg-primary, #f1f5f9) 90%, var(--iw-accent, #2f5bff)) 55%, var(--bg-primary, #fafafa) 100% ); border: 1px solid color-mix(in srgb, var(--iw-accent, #2f5bff) 15%, transparent); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85); } body.tool-page.page-ecom-iw-product .csp-scroll-row--iw-style .csp-card:not(.active) .iw-chip-ico-shell, body.tool-page.page-ecom-iw-product .csp-scroll-row--iw-scene .csp-card:not(.active) .iw-chip-ico-shell { background: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 100%); border-color: rgba(15, 23, 42, 0.08); } body.tool-page.page-ecom-iw-product .csp-scroll-row--iw-style .csp-card.active .iw-chip-ico-shell, body.tool-page.page-ecom-iw-product .csp-scroll-row--iw-scene .csp-card.active .iw-chip-ico-shell { background: linear-gradient( 150deg, color-mix(in srgb, var(--iw-accent, #2f5bff) 14%, #ffffff) 0%, color-mix(in srgb, var(--iw-accent, #2f5bff) 18%, var(--bg-primary, #eff6ff)) 45%, color-mix(in srgb, var(--iw-accent, #2f5bff) 10%, var(--bg-primary, #eef2ff)) 100% ); border-color: color-mix(in srgb, var(--iw-accent, #2f5bff) 36%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--iw-accent, #2f5bff) 12%, transparent), 0 6px 18px color-mix(in srgb, var(--iw-accent, #2f5bff) 20%, transparent); } body.tool-page.page-ecom-iw-product .csp-scroll-row--iw-style .csp-card.active .csp-card-ico-svg, body.tool-page.page-ecom-iw-product .csp-scroll-row--iw-scene .csp-card.active .csp-card-ico-svg { color: var(--iw-accent, #1d4fff); } body.tool-page.page-ecom-iw-product .csp-card.active { border: 1px solid color-mix(in srgb, var(--iw-accent, #2f5bff) 32%, transparent) !important; background: linear-gradient( 165deg, #ffffff 0%, color-mix(in srgb, var(--iw-accent, #2f5bff) 8%, var(--bg-primary, #f8fafc)) 100% ) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--iw-accent, #2f5bff) 8%, transparent), 0 10px 24px color-mix(in srgb, var(--iw-accent, #2f5bff) 14%, transparent) !important; color: var(--tool-primary) !important; } body.tool-page.page-ecom-iw-product .csp-card.active .csp-card-t { color: var(--tool-primary) !important; font-weight: 700 !important; } body.tool-page.page-ecom-iw-product .csp-card:not(.active) { background: #ffffff !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; color: #334155 !important; } body.tool-page.page-ecom-iw-product .csp-card:not(.active) .csp-card-t { color: #334155 !important; } body.tool-page.page-ecom-iw-product .csp-num-card.active { border: 1px solid color-mix(in srgb, var(--iw-accent, #2f5bff) 32%, transparent) !important; background: linear-gradient( 165deg, #ffffff 0%, color-mix(in srgb, var(--iw-accent, #2f5bff) 9%, var(--bg-primary, #f8fafc)) 100% ) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--iw-accent, #2f5bff) 8%, transparent), 0 10px 24px color-mix(in srgb, var(--iw-accent, #2f5bff) 12%, transparent) !important; } body.tool-page.page-ecom-iw-product .csp-num-card.active .csp-num { color: var(--tool-primary) !important; font-weight: 600 !important; } body.tool-page.page-ecom-iw-product .csp-num-card.active .csp-num-sub { color: var(--tool-txt-muted) !important; } body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) { background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important; border: 1px solid rgba(15, 23, 42, 0.07) !important; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important; } body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .csp-num { color: #334155 !important; font-weight: 600 !important; } body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .csp-num-sub { font-weight: 500; } body.tool-page.page-ecom-iw-product .csp-num-card { min-height: 92px; padding-top: 8px; gap: 5px; } /* 文案字数：档位图标统一为蓝灰阶（不彩虹） */ body.tool-page.page-ecom-iw-product .iw-word-ico { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 auto 1px; border-radius: 14px; flex-shrink: 0; transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.88); } body.tool-page.page-ecom-iw-product .iw-word-ico svg { display: block; } /* 未选中：五档统一柔白壳，避免一行内深蓝块与浅块混杂 */ body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--50, body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--100, body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--200, body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--500, body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--1000 { background: linear-gradient(165deg, #ffffff 0%, #f1f5f9 100%); border: 1px solid rgba(15, 23, 42, 0.07); } body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--50 svg, body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--100 svg, body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--200 svg, body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--500 svg, body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--1000 svg { color: #64748b; } /* 选中：图标与卡片同为浅底，蓝环 + 主色图形（避免「整卡深蓝 + 白字」像误触块） */ body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--50, body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--100, body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--200, body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--500, body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--1000 { background: linear-gradient( 165deg, #ffffff 0%, color-mix(in srgb, var(--iw-accent, #2f5bff) 10%, var(--bg-primary, #f1f5f9)) 100% ); border: 2px solid color-mix(in srgb, var(--iw-accent, #2f5bff) 42%, transparent); box-shadow: 0 2px 10px color-mix(in srgb, var(--iw-accent, #2f5bff) 14%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.9); transform: translateY(-1px); } body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--50 svg, body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--100 svg, body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--200 svg, body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--500 svg, body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--1000 svg { color: var(--iw-accent, #1d4fff); } /* 平台切换：小红书主红 #FF2442；抖音青粉渐变 #25F4EE → #FE2C55（与官方识别色一致，非商标素材） */ body.tool-page.page-ecom-iw-product .iw-platform-btn { border: 2px solid rgba(15, 23, 42, 0.08) !important; background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important; color: #64748b !important; font-weight: 600; } body.tool-page.page-ecom-iw-product .iw-platform-btn[data-platform="xhs"].active { border: 2px solid #ff2442 !important; background: #ff2442 !important; color: #ffffff !important; font-weight: 700 !important; box-shadow: 0 0 0 3px rgba(255, 36, 66, 0.2), 0 8px 22px rgba(255, 36, 66, 0.28) !important; } body.tool-page.page-ecom-iw-product .iw-platform-btn[data-platform="xhs"].active .iw-platform-ico svg { color: #ffffff !important; filter: none; } body.tool-page.page-ecom-iw-product .iw-platform-btn[data-platform="douyin"].active { border: 2px solid transparent !important; border-radius: 14px !important; color: #ffffff !important; font-weight: 700 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); background: linear-gradient(105deg, #25f4ee 0%, #25f4ee 18%, #fe2c55 55%, #fe2c55 100%) !important; box-shadow: 0 0 0 3px rgba(37, 244, 238, 0.18), 0 8px 26px rgba(254, 44, 85, 0.28) !important; } body.tool-page.page-ecom-iw-product .iw-platform-btn[data-platform="douyin"].active .iw-platform-ico svg { color: #ffffff !important; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2)); } body.tool-page.page-ecom-iw-product .iw-platform-btn[data-platform="xhs"]:not(.active) { border-color: rgba(255, 36, 66, 0.2) !important; } body.tool-page.page-ecom-iw-product .iw-platform-btn[data-platform="xhs"]:not(.active) .iw-platform-ico svg { color: #ff2442 !important; } body.tool-page.page-ecom-iw-product .iw-platform-btn[data-platform="douyin"]:not(.active) .iw-platform-ico svg { color: #0ea5a5 !important; } body.tool-page.page-ecom-iw-product .iw-platform-ico { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } body.tool-page.page-ecom-iw-product .iw-platform-ico svg { display: block; } body.tool-page.page-ecom-iw-product .iw-platform-hint { color: var(--tool-txt-muted) !important; } body.tool-page.page-ecom-iw-product .iw-platform-hint--inline { font-size: 12px; line-height: 1.5; margin: 0 0 10px; } body.tool-page.page-ecom-iw-product .csp-section--iw-platform { margin-top: 2px; } body.tool-page.page-ecom-iw-product .iw-paste-btn { color: #64748b !important; font-weight: 500 !important; border: 1px solid rgba(15, 23, 42, 0.06) !important; background: #f8fafc !important; box-shadow: none !important; } body.tool-page.page-ecom-iw-product .iw-paste-btn i { color: #94a3b8 !important; } body.tool-page.page-ecom-iw-product .iw-sup-textarea, body.tool-page.page-ecom-iw-product .csp-textarea.iw-sup-textarea { border: 1px solid rgba(15, 23, 42, 0.08) !important; border-radius: 16px !important; } body.tool-page.page-ecom-iw-product .iw-sup-textarea::placeholder, body.tool-page.page-ecom-iw-product .csp-textarea.iw-sup-textarea::placeholder { color: #9aa4b2 !important; opacity: 1; } body.tool-page.page-ecom-iw-product .iw-sup-textarea:focus, body.tool-page.page-ecom-iw-product .csp-textarea.iw-sup-textarea:focus { outline: none !important; border-color: color-mix(in srgb, var(--iw-accent, #2f5bff) 26%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--iw-accent, #2f5bff) 5%, transparent) !important; } body.tool-page.page-ecom-iw-product .submit-btn--iw-gradient:not(:disabled) { background: var(--tool-gradient-cta) !important; color: #ffffff !important; box-shadow: var(--tool-primary-btn-shadow) !important; opacity: 1 !important; } body.tool-page.page-ecom-iw-product .submit-btn--iw-gradient:disabled:not(.is-generating) { background: linear-gradient(135deg, #e8eef6 0%, #d7e0ec 100%) !important; color: #8a97a8 !important; opacity: 1 !important; box-shadow: none !important; cursor: not-allowed !important; } body.tool-page.page-ecom-iw-product .submit-btn--iw-gradient:disabled:not(.is-generating) i { color: #9aa4b2 !important; } body.tool-page.page-ecom-iw-product .submit-hint { color: #64748b !important; text-align: center; font-size: 13px; line-height: 1.55; } body.tool-page.page-ecom-iw-product .section-title .hint { color: var(--tool-primary) !important; background: var(--tool-primary-soft) !important; border: 1px solid color-mix(in srgb, var(--iw-accent, #2f5bff) 12%, transparent) !important; } /* 自有产品 · 上传区：与电商详情图页同一套 upload 气质（略强调主色边即可） */ body.tool-page.page-ecom-iw-product .upload-zone:not(.has-image) { border-color: color-mix(in srgb, var(--iw-accent, #2f5bff) 20%, transparent) !important; background: color-mix(in srgb, var(--bg-primary, #f8fafc) 96%, var(--iw-accent, #2f5bff)) !important; box-shadow: none; } body.tool-page.page-ecom-iw-product .upload-icon-wrap { width: 46px !important; height: 46px !important; border-radius: 50% !important; background: linear-gradient( 135deg, color-mix(in srgb, var(--iw-accent, #2f5bff) 14%, transparent) 0%, rgba(11, 18, 32, 0.05) 100% ) !important; border: 1px solid color-mix(in srgb, var(--iw-accent, #2f5bff) 18%, transparent) !important; box-shadow: none !important; } body.tool-page.page-ecom-iw-product .upload-icon-wrap svg { width: 20px !important; height: 20px !important; color: var(--iw-accent, #2f5bff) !important; filter: none; } /* 自有产品 · 页面氛围、流程条、传图卡、提交前说明 */ html:not([data-h5-skin]) body.ecom-page.page-ecom-env-image-tool.page-ecom-iw-product.tool-page { background: radial-gradient(ellipse 125% 72% at 50% -12%, rgba(79, 110, 247, 0.12) 0%, transparent 52%), linear-gradient(180deg, #f4f8ff 0%, #edf1f9 52%, #f1f4fb 100%) !important; } /* 有界面主题时：在全局 --as-page-bg 上叠一层与当前主题主色一致的弱高光（与「我的」所选皮肤同步） */ html[data-h5-skin]:not([data-h5-skin="default"]) body.ecom-page.page-ecom-env-image-tool.page-ecom-iw-product.tool-page { background: radial-gradient(ellipse 125% 72% at 50% -12%, color-mix(in srgb, var(--as-blue, #4f6ef7) 11%, transparent) 0%, transparent 52%), var(--as-page-bg) !important; background-attachment: fixed !important; } body.tool-page.page-ecom-iw-product .ecom-pro-bar--iw-product { margin-bottom: 6px; } body.tool-page.page-ecom-iw-product .iw-hero-stepper { margin: 0 0 12px; } body.tool-page.page-ecom-iw-product .iw-hero-stepper__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0; padding: 13px 10px 11px; border-radius: 18px; background: linear-gradient( 168deg, rgba(255, 255, 255, 0.97) 0%, color-mix(in srgb, var(--bg-primary, #f8fafc) 88%, var(--iw-accent, #2f5bff)) 100% ); border: 1px solid color-mix(in srgb, var(--iw-accent, #2f5bff) 14%, transparent); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.92) inset, 0 8px 22px rgba(15, 23, 42, 0.048); } body.tool-page.page-ecom-iw-product .iw-hero-stepper__step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; } body.tool-page.page-ecom-iw-product .iw-hero-stepper__dash { flex: 1 1 8px; min-width: 6px; max-width: 32px; align-self: flex-start; margin-top: 10px; height: 2px; background: repeating-linear-gradient( 90deg, color-mix(in srgb, var(--iw-accent, #2f5bff) 30%, transparent) 0 3px, transparent 3px 7px ); opacity: 0.88; } body.tool-page.page-ecom-iw-product .iw-hero-stepper__dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(148, 163, 184, 0.5); background: #ffffff; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.tool-page.page-ecom-iw-product .iw-hero-stepper__step--current .iw-hero-stepper__dot { border-color: color-mix(in srgb, var(--iw-accent, #2f5bff) 78%, transparent); background: #ffffff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--iw-accent, #2f5bff) 12%, transparent), 0 6px 16px color-mix(in srgb, var(--iw-accent, #2f5bff) 20%, transparent); transform: scale(1.05); } body.tool-page.page-ecom-iw-product .iw-hero-stepper__step--current .iw-hero-stepper__dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient( 145deg, color-mix(in srgb, var(--iw-accent, #3b82f6) 88%, #fff) 0%, var(--iw-accent, #1d4fff) 100% ); } body.tool-page.page-ecom-iw-product .iw-hero-stepper__step--done .iw-hero-stepper__dot { border-color: transparent; background: linear-gradient( 145deg, color-mix(in srgb, var(--iw-accent, #3b82f6) 88%, #fff) 0%, var(--iw-accent, #1d4fff) 100% ); box-shadow: 0 0 0 2px color-mix(in srgb, var(--iw-accent, #2f5bff) 16%, transparent); } body.tool-page.page-ecom-iw-product .iw-hero-stepper__step--done .iw-hero-stepper__dot::after { content: '\2713'; font-size: 11px; font-weight: 700; color: #ffffff; line-height: 1; } body.tool-page.page-ecom-iw-product .iw-hero-stepper__text { font-size: 11px; font-weight: 600; color: #64748b; letter-spacing: 0.02em; line-height: 1.2; } body.tool-page.page-ecom-iw-product .iw-hero-stepper__step--current .iw-hero-stepper__text { color: var(--iw-accent, #1d4fff); font-weight: 700; } body.tool-page.page-ecom-iw-product .iw-hero-stepper__step--done .iw-hero-stepper__text { color: #475569; } body.tool-page.page-ecom-iw-product .section-card--iw-upload { background: linear-gradient( 165deg, #ffffff 0%, color-mix(in srgb, var(--bg-primary, #fafcff) 92%, var(--iw-accent, #2f5bff)) 100% ) !important; border: 1px solid color-mix(in srgb, var(--iw-accent, #2f5bff) 11%, transparent) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.92) inset, 0 10px 28px rgba(15, 23, 42, 0.052) !important; } body.tool-page.page-ecom-iw-product .section-card--iw-upload .upload-zone:not(.has-image) { border-style: dashed !important; border-width: 2px !important; border-radius: 16px !important; min-height: 152px !important; background: rgba(255, 255, 255, 0.72) !important; } body.tool-page.page-ecom-iw-product .section-card--iw-upload .upload-text { font-weight: 600; letter-spacing: 0.02em; } body.tool-page.page-ecom-iw-product .iw-preflight-summary { margin: 0 0 14px; padding: 14px 16px 15px; border-radius: 16px; background: linear-gradient( 125deg, color-mix(in srgb, var(--bg-primary, #eff6ff) 96%, var(--iw-accent, #2f5bff)) 0%, color-mix(in srgb, var(--bg-primary, #e0e7ff) 78%, var(--iw-accent, #2f5bff)) 100% ); border: 1px solid color-mix(in srgb, var(--iw-accent, #2f5bff) 15%, transparent); box-shadow: 0 6px 18px color-mix(in srgb, var(--iw-accent, #2f5bff) 6%, transparent); } body.tool-page.page-ecom-iw-product .iw-preflight-summary__tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--iw-accent, #1d4fff); background: rgba(255, 255, 255, 0.88); border: 1px solid color-mix(in srgb, var(--iw-accent, #2f5bff) 20%, transparent); padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; letter-spacing: 0.03em; } body.tool-page.page-ecom-iw-product .iw-preflight-summary__text { margin: 0; font-size: 13px; line-height: 1.65; color: #475569; } body.tool-page.page-ecom-iw-product .iw-generate-anchor { margin-bottom: 14px; } body.tool-page.page-ecom-iw-product .iw-generate-anchor .submit-btn { width: 100%; } body.tool-page.page-ecom-iw-product #iwContentMarketingBlock > .section-title { margin-bottom: 4px; padding-bottom: 2px; border-bottom: 1px solid rgba(15, 23, 42, 0.05); } /* ── 自有产品：去右侧灰线/异常滚动条 + 顶区留白（不影响爆款详情图） ── */ html:has(body.page-ecom-iw-product) { overflow-x: hidden !important; max-width: 100%; } body.page-ecom-iw-product { overflow-x: hidden !important; max-width: 100%; } @media (min-width: 431px) { body.page-ecom-iw-product .app-container { box-shadow: none !important; } } body.page-ecom-iw-product .ecom-page .main-content { scrollbar-width: none; -ms-overflow-style: none; padding-top: 12px; } body.page-ecom-iw-product .ecom-page .main-content::-webkit-scrollbar { width: 0; height: 0; display: none; } body.page-ecom-iw-product .csp-scroll-row, body.page-ecom-iw-product .csp-scroll-row--iw, body.page-ecom-iw-product .scroll-row, body.page-ecom-iw-product .scene-scroll-row, body.page-ecom-iw-product .chip-row { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } body.page-ecom-iw-product .csp-scroll-row::-webkit-scrollbar, body.page-ecom-iw-product .csp-scroll-row--iw::-webkit-scrollbar, body.page-ecom-iw-product .scroll-row::-webkit-scrollbar, body.page-ecom-iw-product .scene-scroll-row::-webkit-scrollbar, body.page-ecom-iw-product .chip-row::-webkit-scrollbar { display: none; width: 0; height: 0; } body.page-ecom-iw-product .csp-scroll-row--nums { scrollbar-width: none; -ms-overflow-style: none; } body.page-ecom-iw-product .csp-scroll-row--nums::-webkit-scrollbar { display: none; width: 0; height: 0; } /* 兼容文档中的类名（本页未使用时不生效） */ body.page-ecom-iw-product .option-scroll, body.page-ecom-iw-product .horizontal-scroll, body.page-ecom-iw-product .style-scroll, body.page-ecom-iw-product .scene-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } body.page-ecom-iw-product .option-scroll::-webkit-scrollbar, body.page-ecom-iw-product .horizontal-scroll::-webkit-scrollbar, body.page-ecom-iw-product .style-scroll::-webkit-scrollbar, body.page-ecom-iw-product .scene-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; } body.page-ecom-iw-product .ecom-inset, body.page-ecom-iw-product .tool-page-content, body.page-ecom-iw-product .tool-main, body.page-ecom-iw-product .page-content { padding-top: 14px; } /* 自有产品 · 深色（与 ecom-env-image-brand-ui 深色顶栏协调） */ html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .section-card--copy-pref { background: linear-gradient(168deg, rgba(30, 27, 75, 0.58) 0%, rgba(15, 23, 42, 0.65) 100%) !important; border-color: rgba(167, 139, 250, 0.2) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 14px 42px rgba(0, 0, 0, 0.38) !important; } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .section-card--copy-pref .csp-section { background: linear-gradient(175deg, rgba(30, 27, 75, 0.5) 0%, rgba(15, 23, 42, 0.55) 100%); border-color: rgba(167, 139, 250, 0.14); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25); } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-swipe-hint { background: rgba(30, 27, 75, 0.65); border-color: rgba(167, 139, 250, 0.2); color: #94a3b8; } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-collapse-head:active { background: rgba(30, 27, 75, 0.5); } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--50, html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--100, html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--200, html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--500, html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--1000 { background: linear-gradient(165deg, rgba(30, 27, 75, 0.55) 0%, rgba(15, 23, 42, 0.58) 100%); border-color: rgba(167, 139, 250, 0.14); } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--50 svg, html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--100 svg, html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--200 svg, html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--500 svg, html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card:not(.active) .iw-word-ico--1000 svg { color: #a5b4fc; } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--50, html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--100, html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--200, html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--500, html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--1000 { background: linear-gradient(165deg, rgba(30, 27, 75, 0.65) 0%, rgba(49, 46, 129, 0.4) 100%); border: 2px solid rgba(167, 139, 250, 0.45); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--50 svg, html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--100 svg, html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--200 svg, html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--500 svg, html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .csp-num-card.active .iw-word-ico--1000 svg { color: #c4d4ff; } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .iw-platform-btn { background: linear-gradient(180deg, rgba(30, 27, 75, 0.58) 0%, rgba(15, 23, 42, 0.52) 100%) !important; border-color: rgba(148, 163, 184, 0.16) !important; color: #cbd5e1 !important; } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .iw-platform-btn[data-platform="xhs"].active { border: 2px solid #ff2442 !important; background: #ff2442 !important; color: #ffffff !important; box-shadow: 0 0 0 3px rgba(255, 36, 66, 0.22), 0 10px 28px rgba(0, 0, 0, 0.4) !important; } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .iw-platform-btn[data-platform="xhs"].active .iw-platform-ico svg { color: #ffffff !important; } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .iw-platform-btn[data-platform="douyin"].active { border: 2px solid transparent !important; border-radius: 14px !important; color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); background: linear-gradient(105deg, #25f4ee 0%, #25f4ee 18%, #fe2c55 55%, #fe2c55 100%) !important; box-shadow: 0 0 0 3px rgba(37, 244, 238, 0.16), 0 0 22px rgba(254, 44, 85, 0.22), 0 12px 32px rgba(0, 0, 0, 0.45) !important; } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .iw-platform-btn[data-platform="douyin"].active .iw-platform-ico svg { color: #ffffff !important; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.25)); } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .iw-platform-btn[data-platform="xhs"]:not(.active) { border-color: rgba(255, 36, 66, 0.22) !important; } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .iw-platform-btn[data-platform="xhs"]:not(.active) .iw-platform-ico svg { color: #ff6b7a !important; } html[data-h5-appearance='dark'] body.ecom-page.page-ecom-env-image-tool.page-ecom-iw-product.tool-page { background: radial-gradient(ellipse 125% 70% at 50% -10%, rgba(99, 102, 241, 0.18) 0%, transparent 50%), linear-gradient(180deg, #0f172a 0%, #111827 100%) !important; } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .iw-hero-stepper__row { background: linear-gradient(168deg, rgba(30, 27, 75, 0.55) 0%, rgba(15, 23, 42, 0.62) 100%); border-color: rgba(167, 139, 250, 0.22); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35); } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .iw-hero-stepper__dash { background: repeating-linear-gradient( 90deg, rgba(167, 139, 250, 0.35) 0 3px, transparent 3px 7px ); } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .iw-hero-stepper__dot { background: rgba(15, 23, 42, 0.65); border-color: rgba(148, 163, 184, 0.35); } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .iw-hero-stepper__text { color: #94a3b8; } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .iw-hero-stepper__step--current .iw-hero-stepper__text { color: #a5b4fc; } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .iw-hero-stepper__step--done .iw-hero-stepper__text { color: #cbd5e1; } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .section-card--iw-upload { background: linear-gradient(165deg, rgba(30, 27, 75, 0.42) 0%, rgba(15, 23, 42, 0.55) 100%) !important; border-color: rgba(167, 139, 250, 0.18) !important; } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .section-card--iw-upload .upload-zone:not(.has-image) { background: rgba(15, 23, 42, 0.45) !important; border-color: rgba(167, 139, 250, 0.22) !important; } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .iw-preflight-summary { background: linear-gradient(125deg, rgba(30, 27, 75, 0.52) 0%, rgba(49, 46, 129, 0.28) 100%); border-color: rgba(167, 139, 250, 0.22); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28); } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .iw-preflight-summary__tag { background: rgba(15, 23, 42, 0.55); border-color: rgba(167, 139, 250, 0.28); color: #c4d4ff; } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product .iw-preflight-summary__text { color: #cbd5e1; } html[data-h5-appearance='dark'] body.tool-page.page-ecom-iw-product #iwContentMarketingBlock > .section-title { border-bottom-color: rgba(167, 139, 250, 0.12); }