/**
 * H5 全站界面主题（我的 → 界面主题）
 * 依赖 html[data-h5-skin]，由 _h5_skin_assets.php 首屏脚本写入
 *
 * 注意：assets/h5-background-normalize.css 在 :root 使用 --as-page-bg:#F6F8FC !important，
 * 并用 html:has(body.page-tab-*) 等为壳层强制灰底；非默认皮肤下变量与壳层背景须带 !important
 * 且选择器特异性需不低于 normalize，否则会出现「点了主题无变化」。
 *
 * 注：主题字体由 _h5_skin_assets.php h5_skin_print_fonts() 输出（工具页经 _common_css_links 一并加载）
 */
html[data-h5-skin="cloud"] {
    --as-page-bg: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 42%, #e2e8f0 100%) !important;
    --as-blue: #64748b;
    --as-primary: #0f172a;
    --sy-bg-main: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 42%, #e2e8f0 100%) !important;
    --bg-page: #f8fafc !important;
    --lh-bg: #f8fafc !important;
    --h5-canvas: #f8fafc !important;
    --ds-bg-page: #f8fafc !important;
}
html[data-h5-skin="mist"] {
    --as-page-bg: linear-gradient(170deg, #ecfdf5 0%, #d1fae5 38%, #ccfbf1 100%) !important;
    --as-blue: #0d9488;
    --as-primary: #134e4a;
    --sy-bg-main: linear-gradient(170deg, #ecfdf5 0%, #d1fae5 38%, #ccfbf1 100%) !important;
    --bg-page: #ecfdf5 !important;
    --lh-bg: #ecfdf5 !important;
    --h5-canvas: #ecfdf5 !important;
    --ds-bg-page: #ecfdf5 !important;
}
html[data-h5-skin="lilac"] {
    --as-page-bg: linear-gradient(168deg, #faf5ff 0%, #ede9fe 45%, #fae8ff 100%) !important;
    --as-blue: #7c3aed;
    --as-primary: #4c1d95;
    --sy-bg-main: linear-gradient(168deg, #faf5ff 0%, #ede9fe 45%, #fae8ff 100%) !important;
    --bg-page: #faf5ff !important;
    --lh-bg: #faf5ff !important;
    --h5-canvas: #faf5ff !important;
    --ds-bg-page: #faf5ff !important;
}
html[data-h5-skin="peach"] {
    --as-page-bg: linear-gradient(168deg, #fff7ed 0%, #ffedd5 48%, #fecaca 100%) !important;
    --as-blue: #ea580c;
    --as-primary: #7c2d12;
    --sy-bg-main: linear-gradient(168deg, #fff7ed 0%, #ffedd5 48%, #fecaca 100%) !important;
    --bg-page: #fff7ed !important;
    --lh-bg: #fff7ed !important;
    --h5-canvas: #fff7ed !important;
    --ds-bg-page: #fff7ed !important;
}
html[data-h5-skin="honey"] {
    --as-page-bg: linear-gradient(168deg, #fffbeb 0%, #fef3c7 50%, #fff7ed 100%) !important;
    --as-blue: #d97706;
    --as-primary: #78350f;
    --sy-bg-main: linear-gradient(168deg, #fffbeb 0%, #fef3c7 50%, #fff7ed 100%) !important;
    --bg-page: #fffbeb !important;
    --lh-bg: #fffbeb !important;
    --h5-canvas: #fffbeb !important;
    --ds-bg-page: #fffbeb !important;
}
html[data-h5-skin="mint"] {
    --as-page-bg: linear-gradient(172deg, #ecfdf5 0%, #bbf7d0 42%, #f0fdf4 100%) !important;
    --as-blue: #059669;
    --as-primary: #064e3b;
    --sy-bg-main: linear-gradient(172deg, #ecfdf5 0%, #bbf7d0 42%, #f0fdf4 100%) !important;
    --bg-page: #ecfdf5 !important;
    --lh-bg: #ecfdf5 !important;
    --h5-canvas: #ecfdf5 !important;
    --ds-bg-page: #ecfdf5 !important;
}
html[data-h5-skin="lagoon"] {
    --as-page-bg: linear-gradient(172deg, #ecfeff 0%, #bae6fd 45%, #f0f9ff 100%) !important;
    --as-blue: #0284c7;
    --as-primary: #0c4a6e;
    --sy-bg-main: linear-gradient(172deg, #ecfeff 0%, #bae6fd 45%, #f0f9ff 100%) !important;
    --bg-page: #ecfeff !important;
    --lh-bg: #ecfeff !important;
    --h5-canvas: #ecfeff !important;
    --ds-bg-page: #ecfeff !important;
}
html[data-h5-skin="sakura"] {
    --as-page-bg: linear-gradient(170deg, #fff1f2 0%, #ffe4e6 40%, #fdf2f8 100%) !important;
    --as-blue: #db2777;
    --as-primary: #831843;
    --sy-bg-main: linear-gradient(170deg, #fff1f2 0%, #ffe4e6 40%, #fdf2f8 100%) !important;
    --bg-page: #fff1f2 !important;
    --lh-bg: #fff1f2 !important;
    --h5-canvas: #fff1f2 !important;
    --ds-bg-page: #fff1f2 !important;
}
html[data-h5-skin="moss"] {
    --as-page-bg: linear-gradient(175deg, #f0fdf4 0%, #dcfce7 45%, #ecfccb 100%) !important;
    --as-blue: #15803d;
    --as-primary: #14532d;
    --sy-bg-main: linear-gradient(175deg, #f0fdf4 0%, #dcfce7 45%, #ecfccb 100%) !important;
    --bg-page: #f0fdf4 !important;
    --lh-bg: #f0fdf4 !important;
    --h5-canvas: #f0fdf4 !important;
    --ds-bg-page: #f0fdf4 !important;
}
html[data-h5-skin="sand"] {
    --as-page-bg: linear-gradient(168deg, #faf8f5 0%, #f5f0e8 48%, #ebe4dc 100%) !important;
    --as-blue: #a16207;
    --as-primary: #44403c;
    --sy-bg-main: linear-gradient(168deg, #faf8f5 0%, #f5f0e8 48%, #ebe4dc 100%) !important;
    --bg-page: #faf8f5 !important;
    --lh-bg: #faf8f5 !important;
    --h5-canvas: #faf8f5 !important;
    --ds-bg-page: #faf8f5 !important;
}
html[data-h5-skin="plum"] {
    --as-page-bg: linear-gradient(168deg, #fef2f2 0%, #fecdd3 42%, #ffe4e6 100%) !important;
    --as-blue: #be123c;
    --as-primary: #450a0a;
    --sy-bg-main: linear-gradient(168deg, #fef2f2 0%, #fecdd3 42%, #ffe4e6 100%) !important;
    --bg-page: #fef2f2 !important;
    --lh-bg: #fef2f2 !important;
    --h5-canvas: #fef2f2 !important;
    --ds-bg-page: #fef2f2 !important;
}
html[data-h5-skin="slate"] {
    --as-page-bg: linear-gradient(165deg, #f5f5f4 0%, #e7e5e4 35%, #d6d3d1 100%) !important;
    --as-blue: #57534e;
    --as-primary: #1c1917;
    --sy-bg-main: linear-gradient(165deg, #f5f5f4 0%, #e7e5e4 35%, #d6d3d1 100%) !important;
    --bg-page: #f5f5f4 !important;
    --lh-bg: #f5f5f4 !important;
    --h5-canvas: #f5f5f4 !important;
    --ds-bg-page: #f5f5f4 !important;
}
html[data-h5-skin="pearl"] {
    --as-page-bg: linear-gradient(180deg, #ffffff 0%, #fafafa 50%, #f4f4f5 100%) !important;
    --as-blue: #71717a;
    --as-primary: #18181b;
    --sy-bg-main: linear-gradient(180deg, #ffffff 0%, #fafafa 50%, #f4f4f5 100%) !important;
    --bg-page: #fafafa !important;
    --lh-bg: #fafafa !important;
    --h5-canvas: #fafafa !important;
    --ds-bg-page: #fafafa !important;
}
html[data-h5-skin="noir"] {
    --as-page-bg: linear-gradient(168deg, #f5f5f5 0%, #e5e5e5 45%, #d4d4d4 100%) !important;
    --as-blue: #404040;
    --as-primary: #171717;
    --sy-bg-main: linear-gradient(168deg, #f5f5f5 0%, #e5e5e5 45%, #d4d4d4 100%) !important;
    --bg-page: #f5f5f5 !important;
    --lh-bg: #f5f5f5 !important;
    --h5-canvas: #f5f5f5 !important;
    --ds-bg-page: #f5f5f5 !important;
}

/* 暗黑模式：真·纯黑 + iOS 蓝强调，配合 data-h5-appearance=dark */
html[data-h5-skin="midnight"] {
    --as-page-bg: #000000 !important;
    --as-group-bg: #1c1c1e;
    --as-row-bg: #1c1c1e;
    --as-row-press: #2c2c2e;
    --as-icon-slot: #2c2c2e;
    --as-border: rgba(84, 84, 88, 0.55);
    --as-border-soft: rgba(84, 84, 88, 0.4);
    --as-sep: rgba(84, 84, 88, 0.55);
    --as-label: #ffffff;
    --as-secondary: rgba(235, 235, 245, 0.6);
    --as-tertiary: rgba(235, 235, 245, 0.75);
    --as-chevron: rgba(235, 235, 245, 0.28);
    --as-blue: #0a84ff;
    --as-primary: #f5f5f7;
    --as-tab-bar-bg: rgba(28, 28, 30, 0.94);
    --as-tab-muted: rgba(235, 235, 245, 0.45);
    --as-section-heading: rgba(235, 235, 245, 0.58);
    --as-card-shadow: none;
    --sy-bg-main: #000000 !important;
    --bg-page: #000000 !important;
    --lh-bg: #000000 !important;
    --h5-canvas: #000000 !important;
    --ds-bg-page: #000000 !important;
    --bg-card: #1c1c1e !important;
    --theme-font: "SF Pro Text", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "SF Pro Display", "PingFang SC", "Noto Sans SC", sans-serif;
    color-scheme: dark;
    background: #000000 !important;
    background-image: none !important;
    background-color: #000000 !important;
}

/* 色谱主题配套字体（与「我的」里各主题一一对应；变量由下方统一应用到正文/标题） */
html[data-h5-skin="cloud"] {
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "Noto Serif SC", "Songti SC", "STSong", "PingFang SC", serif;
}
html[data-h5-skin="mist"] {
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "ZCOOL XiaoWei", "Noto Serif SC", "Songti SC", serif;
}
html[data-h5-skin="lilac"] {
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "ZCOOL KuaiLe", "Noto Sans SC", "PingFang SC", sans-serif;
}
html[data-h5-skin="peach"] {
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "Noto Serif SC", "ZCOOL XiaoWei", "Songti SC", serif;
}
html[data-h5-skin="honey"] {
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "ZCOOL XiaoWei", "Noto Serif SC", "Songti SC", serif;
}
html[data-h5-skin="mint"] {
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "Noto Serif SC", "Songti SC", "PingFang SC", serif;
}
html[data-h5-skin="lagoon"] {
    --theme-font: "Roboto Condensed", "Noto Sans SC", "PingFang SC", sans-serif;
    --theme-font-title: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
}
html[data-h5-skin="sakura"] {
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "ZCOOL KuaiLe", "ZCOOL XiaoWei", "PingFang SC", sans-serif;
}
html[data-h5-skin="moss"] {
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "Noto Serif SC", "ZCOOL XiaoWei", "Songti SC", serif;
}
html[data-h5-skin="sand"] {
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "Noto Serif SC", "STKaiti", "KaiTi", "Songti SC", serif;
}
html[data-h5-skin="plum"] {
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "ZCOOL QingKe HuangYou", "Noto Serif SC", "Songti SC", serif;
}
html[data-h5-skin="slate"] {
    --theme-font: "Roboto Condensed", "Noto Sans SC", "PingFang SC", sans-serif;
    --theme-font-title: "Noto Serif SC", "Songti SC", "PingFang SC", serif;
}
html[data-h5-skin="pearl"] {
    --theme-font: "Noto Sans SC", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    --theme-font-title: "Noto Serif SC", "Songti SC", "PingFang SC", serif;
}
html[data-h5-skin="noir"] {
    --theme-font: "Roboto Condensed", "Noto Sans SC", "PingFang SC", sans-serif;
    --theme-font-title: "Bebas Neue", "Noto Sans SC", "Arial Narrow", sans-serif;
}

/* ========== 风格主题（带专属字体） ========== */

/* 钢铁黑 - 硬核科技风，适合喜欢简洁有力的用户 */
html[data-h5-skin="steel"] {
    --as-page-bg: linear-gradient(165deg, #f8fafc 0%, #e2e8f0 40%, #cbd5e1 100%) !important;
    --as-blue: #1e293b;
    --as-primary: #0f172a;
    --sy-bg-main: linear-gradient(165deg, #f8fafc 0%, #e2e8f0 40%, #cbd5e1 100%) !important;
    --bg-page: #f1f5f9 !important;
    --lh-bg: #f1f5f9 !important;
    --h5-canvas: #f1f5f9 !important;
    --ds-bg-page: #f1f5f9 !important;
    --theme-font: "DIN Alternate", "Roboto Condensed", "Source Han Sans CN", "PingFang SC", sans-serif;
    --theme-font-title: "DIN Alternate", "Bebas Neue", "Impact", "Source Han Sans CN", sans-serif;
}

/* 花漾粉 - 甜美浪漫风，适合喜欢柔美风格的用户 */
html[data-h5-skin="blossom"] {
    --as-page-bg: linear-gradient(168deg, #fdf2f8 0%, #fce7f3 40%, #fbcfe8 100%) !important;
    --as-blue: #ec4899;
    --as-primary: #831843;
    --sy-bg-main: linear-gradient(168deg, #fdf2f8 0%, #fce7f3 40%, #fbcfe8 100%) !important;
    --bg-page: #fdf2f8 !important;
    --lh-bg: #fdf2f8 !important;
    --h5-canvas: #fdf2f8 !important;
    --ds-bg-page: #fdf2f8 !important;
    --theme-font: "ZCOOL KuaiLe", "PingFang SC", "Noto Sans SC", sans-serif;
    --theme-font-title: "ZCOOL KuaiLe", "ZCOOL QingKe HuangYou", sans-serif;
}

/* 红木棕 - 稳重商务风，适合追求沉稳大气的用户 */
html[data-h5-skin="mahogany"] {
    --as-page-bg: linear-gradient(168deg, #faf5f0 0%, #f5ebe0 42%, #e8ddd0 100%) !important;
    --as-blue: #78350f;
    --as-primary: #451a03;
    --sy-bg-main: linear-gradient(168deg, #faf5f0 0%, #f5ebe0 42%, #e8ddd0 100%) !important;
    --bg-page: #faf5f0 !important;
    --lh-bg: #faf5f0 !important;
    --h5-canvas: #faf5f0 !important;
    --ds-bg-page: #faf5f0 !important;
    --theme-font: "Noto Serif SC", "Source Han Serif CN", "SimSun", "PingFang SC", serif;
    --theme-font-title: "Noto Serif SC", "Source Han Serif CN", "SimSun", serif;
}

/* 玫瑰檀 - 优雅知性风，适合追求品质感的用户 */
html[data-h5-skin="rosewood"] {
    --as-page-bg: linear-gradient(170deg, #fef7f5 0%, #fce8e4 45%, #f5d0d0 100%) !important;
    --as-blue: #be185d;
    --as-primary: #500724;
    --sy-bg-main: linear-gradient(170deg, #fef7f5 0%, #fce8e4 45%, #f5d0d0 100%) !important;
    --bg-page: #fef7f5 !important;
    --lh-bg: #fef7f5 !important;
    --h5-canvas: #fef7f5 !important;
    --ds-bg-page: #fef7f5 !important;
    --theme-font: "LXGW WenKai", "ZCOOL XiaoWei", "PingFang SC", "Noto Sans SC", sans-serif;
    --theme-font-title: "LXGW WenKai", "ZCOOL XiaoWei", "PingFang SC", sans-serif;
}

/* 暮光金 - 尊贵典雅风，适合追求高端品味的用户 */
html[data-h5-skin="twilight"] {
    --as-page-bg: linear-gradient(165deg, #fffbeb 0%, #fef3c7 38%, #fde68a 100%) !important;
    --as-blue: #b45309;
    --as-primary: #78350f;
    --sy-bg-main: linear-gradient(165deg, #fffbeb 0%, #fef3c7 38%, #fde68a 100%) !important;
    --bg-page: #fffbeb !important;
    --lh-bg: #fffbeb !important;
    --h5-canvas: #fffbeb !important;
    --ds-bg-page: #fffbeb !important;
    --theme-font: "Noto Serif SC", "Source Han Serif CN", "STKaiti", "PingFang SC", serif;
    --theme-font-title: "Noto Serif SC", "Source Han Serif CN", "STKaiti", serif;
}

/* 潮玩紫 - 潮流玩家风，适合追求个性潮流的用户 */
html[data-h5-skin="hypepop"] {
    --as-page-bg: linear-gradient(155deg, #faf5ff 0%, #e9d5ff 35%, #d8b4fe 70%, #c084fc 100%) !important;
    --as-blue: #9333ea;
    --as-primary: #581c87;
    --sy-bg-main: linear-gradient(155deg, #faf5ff 0%, #e9d5ff 35%, #d8b4fe 70%, #c084fc 100%) !important;
    --bg-page: #faf5ff !important;
    --lh-bg: #faf5ff !important;
    --h5-canvas: #faf5ff !important;
    --ds-bg-page: #faf5ff !important;
    --theme-font: "ZCOOL QingKe HuangYou", "ZCOOL KuaiLe", "PingFang SC", sans-serif;
    --theme-font-title: "ZCOOL QingKe HuangYou", "ZCOOL KuaiLe", sans-serif;
}

/* —— 用户定制渐变配色（克莱因蓝系 / 群青 / 黛绿 / 兰紫 / 朱砂煤黑）—— */

html[data-h5-skin="klein_cyan"] {
    --as-page-bg: linear-gradient(165deg, #e8f4ff 0%, #cffafe 42%, #ecfeff 100%) !important;
    --as-blue: #0b3289;
    --as-primary: #061428;
    --sy-bg-main: linear-gradient(165deg, #e8f4ff 0%, #cffafe 42%, #ecfeff 100%) !important;
    --bg-page: #e8f4ff !important;
    --lh-bg: #e8f4ff !important;
    --h5-canvas: #e8f4ff !important;
    --ds-bg-page: #e8f4ff !important;
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "Noto Serif SC", "PingFang SC", serif;
}
html[data-h5-skin="klein_peach"] {
    --as-page-bg: linear-gradient(165deg, #fff1f2 0%, #ffe4e6 40%, #fdf2f8 100%) !important;
    --as-blue: #ff606c;
    --as-primary: #3f0d1a;
    --sy-bg-main: linear-gradient(165deg, #fff1f2 0%, #ffe4e6 40%, #fdf2f8 100%) !important;
    --bg-page: #fff1f2 !important;
    --lh-bg: #fff1f2 !important;
    --h5-canvas: #fff1f2 !important;
    --ds-bg-page: #fff1f2 !important;
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "Noto Serif SC", "PingFang SC", serif;
}
html[data-h5-skin="klein_ivory"] {
    --as-page-bg: linear-gradient(165deg, #f8fafc 0%, #fffbf0 48%, #fdf8f0 100%) !important;
    --as-blue: #0b3289;
    --as-primary: #0f172a;
    --sy-bg-main: linear-gradient(165deg, #f8fafc 0%, #fffbf0 48%, #fdf8f0 100%) !important;
    --bg-page: #fffbf0 !important;
    --lh-bg: #fffbf0 !important;
    --h5-canvas: #fffbf0 !important;
    --ds-bg-page: #fffbf0 !important;
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "Noto Serif SC", "PingFang SC", serif;
}
html[data-h5-skin="klein_orange"] {
    --as-page-bg: linear-gradient(165deg, #fff4e6 0%, #ffedd5 45%, #fff7ed 100%) !important;
    --as-blue: #ff8a00;
    --as-primary: #431407;
    --sy-bg-main: linear-gradient(165deg, #fff4e6 0%, #ffedd5 45%, #fff7ed 100%) !important;
    --bg-page: #fff4e6 !important;
    --lh-bg: #fff4e6 !important;
    --h5-canvas: #fff4e6 !important;
    --ds-bg-page: #fff4e6 !important;
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "Noto Serif SC", "PingFang SC", serif;
}
html[data-h5-skin="klein_gold"] {
    --as-page-bg: linear-gradient(165deg, #fffdf6 0%, #fef9c3 42%, #fffbeb 100%) !important;
    --as-blue: #0b3289;
    --as-primary: #1c1917;
    --sy-bg-main: linear-gradient(165deg, #fffdf6 0%, #fef9c3 42%, #fffbeb 100%) !important;
    --bg-page: #fffdf6 !important;
    --lh-bg: #fffdf6 !important;
    --h5-canvas: #fffdf6 !important;
    --ds-bg-page: #fffdf6 !important;
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "Noto Serif SC", "PingFang SC", serif;
}
html[data-h5-skin="klein_blush"] {
    --as-page-bg: linear-gradient(165deg, #fff7f7 0%, #ffe4e6 40%, #fff1f2 100%) !important;
    --as-blue: #0b3289;
    --as-primary: #4c0519;
    --sy-bg-main: linear-gradient(165deg, #fff7f7 0%, #ffe4e6 40%, #fff1f2 100%) !important;
    --bg-page: #fff7f7 !important;
    --lh-bg: #fff7f7 !important;
    --h5-canvas: #fff7f7 !important;
    --ds-bg-page: #fff7f7 !important;
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "Noto Serif SC", "PingFang SC", serif;
}
html[data-h5-skin="cinnabar"] {
    --as-page-bg: linear-gradient(165deg, #faf6f5 0%, #f5ebe8 40%, #fceae6 100%) !important;
    --as-blue: #ff461f;
    --as-primary: #312520;
    --sy-bg-main: linear-gradient(165deg, #faf6f5 0%, #f5ebe8 40%, #fceae6 100%) !important;
    --bg-page: #faf6f5 !important;
    --lh-bg: #faf6f5 !important;
    --h5-canvas: #faf6f5 !important;
    --ds-bg-page: #faf6f5 !important;
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "Noto Serif SC", "Source Han Serif CN", serif;
}
html[data-h5-skin="qun_cream"] {
    --as-page-bg: linear-gradient(165deg, #f0f7fb 0%, #f5efe3 50%, #faf8f2 100%) !important;
    --as-blue: #1772b4;
    --as-primary: #0c3d5c;
    --sy-bg-main: linear-gradient(165deg, #f0f7fb 0%, #f5efe3 50%, #faf8f2 100%) !important;
    --bg-page: #f0f7fb !important;
    --lh-bg: #f0f7fb !important;
    --h5-canvas: #f0f7fb !important;
    --ds-bg-page: #f0f7fb !important;
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "Noto Serif SC", "PingFang SC", serif;
}
html[data-h5-skin="pine_canary"] {
    --as-page-bg: linear-gradient(170deg, #f3faf8 0%, #f7fce8 45%, #fefce8 100%) !important;
    --as-blue: #426666;
    --as-primary: #134e4a;
    --sy-bg-main: linear-gradient(170deg, #f3faf8 0%, #f7fce8 45%, #fefce8 100%) !important;
    --bg-page: #f3faf8 !important;
    --lh-bg: #f3faf8 !important;
    --h5-canvas: #f3faf8 !important;
    --ds-bg-page: #f3faf8 !important;
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "Noto Serif SC", "PingFang SC", serif;
}
html[data-h5-skin="orchid_jade"] {
    --as-page-bg: linear-gradient(165deg, #faf5ff 0%, #ecfccb 42%, #f7fee7 100%) !important;
    --as-blue: #9932cc;
    --as-primary: #3b0764;
    --sy-bg-main: linear-gradient(165deg, #faf5ff 0%, #ecfccb 42%, #f7fee7 100%) !important;
    --bg-page: #faf5ff !important;
    --lh-bg: #faf5ff !important;
    --h5-canvas: #faf5ff !important;
    --ds-bg-page: #faf5ff !important;
    --theme-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --theme-font-title: "Noto Serif SC", "PingFang SC", serif;
}

/*
 * 电商详情图 / 等多处使用 var(--bg-primary)（common.css 默认偏冷灰蓝），
 * 若不映射到当前皮肤的 --bg-page，主滚动区会一直「发冷」盖不住主题。
 */
html[data-h5-skin="cloud"],
html[data-h5-skin="mist"],
html[data-h5-skin="lilac"],
html[data-h5-skin="peach"],
html[data-h5-skin="honey"],
html[data-h5-skin="mint"],
html[data-h5-skin="lagoon"],
html[data-h5-skin="sakura"],
html[data-h5-skin="moss"],
html[data-h5-skin="sand"],
html[data-h5-skin="plum"],
html[data-h5-skin="slate"],
html[data-h5-skin="pearl"],
html[data-h5-skin="noir"],
html[data-h5-skin="steel"],
html[data-h5-skin="blossom"],
html[data-h5-skin="mahogany"],
html[data-h5-skin="rosewood"],
html[data-h5-skin="twilight"],
html[data-h5-skin="hypepop"],
html[data-h5-skin="klein_cyan"],
html[data-h5-skin="klein_peach"],
html[data-h5-skin="klein_ivory"],
html[data-h5-skin="klein_orange"],
html[data-h5-skin="klein_gold"],
html[data-h5-skin="klein_blush"],
html[data-h5-skin="cinnabar"],
html[data-h5-skin="qun_cream"],
html[data-h5-skin="pine_canary"],
html[data-h5-skin="orchid_jade"] {
    --bg-primary: var(--bg-page) !important;
}

/* 首页 / 各 Tab：覆盖内联灰底 */
html[data-h5-skin]:not([data-h5-skin="default"]) body.lh-redesign,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create.lh-home-shelf,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-template,
html[data-h5-skin]:not([data-h5-skin="default"]) html:has(body.lh-redesign) {
    background: var(--as-page-bg) !important;
    background-color: transparent !important;
    background-image: var(--as-page-bg) !important;
    color: var(--as-primary, #0f172a) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.lh-create-songyun {
    background: var(--as-page-bg) !important;
    background-image: var(--as-page-bg) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.lh-redesign .lh2-root,
html[data-h5-skin]:not([data-h5-skin="default"]) body.lh-redesign #app {
    background: transparent !important;
}

/* 独立工具页 body：统一铺底（覆盖各页 inline 浅色） */
html[data-h5-skin]:not([data-h5-skin="default"]) body {
    background: var(--as-page-bg) !important;
    background-image: var(--as-page-bg) !important;
    background-attachment: fixed !important;
}

/* ========== 工具子页壳层（h5-songyun-tool-shell / *-brand-ui / inner unified）：html body.xxx 特异性高于上一段裸 body，须带 body class ========== */
html[data-h5-skin]:not([data-h5-skin="default"]) body.detail-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.ecom-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-nova-video,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-ai-video-prompt,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-creator-studio,
html[data-h5-skin]:not([data-h5-skin="default"]) body.watermark-tool-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.tuwen-page-clean,
html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.golden-quote-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.vrp-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.linghui-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-agent-center.ac-root,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-i2v,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv,
html[data-h5-skin]:not([data-h5-skin="default"]) body.product-max-page {
    background: var(--as-page-bg) !important;
    background-image: var(--as-page-bg) !important;
    background-color: transparent !important;
    color: var(--as-primary, #0f172a) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.ecom-page.page-ecom-env-image-tool,
html[data-h5-skin]:not([data-h5-skin="default"]) body.detail-page.page-detail-image-tool,
html[data-h5-skin]:not([data-h5-skin="default"]) body.product-max-page.page-product-max.tool-page {
    background: var(--as-page-bg) !important;
    background-image: var(--as-page-bg) !important;
    background-color: transparent !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.linghui-page:not(.page-agent-center):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template):not(.page-tab-assistant) {
    background: var(--as-page-bg) !important;
    background-image: var(--as-page-bg) !important;
    background-color: transparent !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]):has(body:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template):not(.page-tab-assistant)) {
    background: var(--as-page-bg) !important;
    background-image: var(--as-page-bg) !important;
    background-attachment: fixed !important;
}

/* 图生万物 linghui-page.css .main-content 带 !important；产品图视频 / 图生视频 内联 .main-content */
html[data-h5-skin]:not([data-h5-skin="default"]) body.linghui-page .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-i2v .main-content {
    background: var(--as-page-bg) !important;
    background-image: var(--as-page-bg) !important;
    background-color: transparent !important;
}

/* ========== 覆盖 h5-background-normalize.css（高优先级 :root / html:has / #mainContent 灰底）========== */
html[data-h5-skin]:not([data-h5-skin="default"]) {
    background: var(--as-page-bg) !important;
    background-image: var(--as-page-bg) !important;
    background-attachment: fixed !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body,
html[data-h5-skin]:not([data-h5-skin="default"]) #app,
html[data-h5-skin]:not([data-h5-skin="default"]) .uni-page,
html[data-h5-skin]:not([data-h5-skin="default"]) .uni-page-body,
html[data-h5-skin]:not([data-h5-skin="default"]) .page,
html[data-h5-skin]:not([data-h5-skin="default"]) .home-page,
html[data-h5-skin]:not([data-h5-skin="default"]) .main-container,
html[data-h5-skin]:not([data-h5-skin="default"]) .tab-page,
html[data-h5-skin]:not([data-h5-skin="default"]) .app-container {
    background: var(--as-page-bg) !important;
    background-image: var(--as-page-bg) !important;
    background-color: transparent !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body::before,
html[data-h5-skin]:not([data-h5-skin="default"]) body::after,
html[data-h5-skin]:not([data-h5-skin="default"]) .app-container::before,
html[data-h5-skin]:not([data-h5-skin="default"]) .app-container::after,
html[data-h5-skin]:not([data-h5-skin="default"]) .main-content::before,
html[data-h5-skin]:not([data-h5-skin="default"]) .main-content::after,
html[data-h5-skin]:not([data-h5-skin="default"]) .lh2-root::before,
html[data-h5-skin]:not([data-h5-skin="default"]) .lh2-root::after,
html[data-h5-skin]:not([data-h5-skin="default"]) .lh2-page::before,
html[data-h5-skin]:not([data-h5-skin="default"]) .lh2-page::after {
    background: transparent !important;
    background-image: none !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create.lh-home-shelf,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create.lh-home-shelf.lh-create-songyun,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent.h5-shelf-mirror,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent.h5-shelf-mirror.lh-create-songyun,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-assistant,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine.lh-create-songyun {
    background: var(--as-page-bg) !important;
    background-image: var(--as-page-bg) !important;
    background-color: transparent !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create #mainContent,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent #mainContent,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-assistant #mainContent,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine #mainContent,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-assistant .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create .lh2-root,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent .lh2-root,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .lh2-root,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create .lh2-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent .lh2-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .lh2-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create .create-dash,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent .create-dash,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create .home-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent .home-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create .create-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent .agent-page {
    background: var(--as-page-bg) !important;
    background-image: var(--as-page-bg) !important;
    background-color: transparent !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create .lh-new-home,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create .create-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent #agentToolsRoot .lh2-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent #agentToolsRoot .create-dash,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent #agentToolsRoot .create-dash__inner,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent .agent-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create .main-container,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent .main-container {
    background: var(--as-page-bg) !important;
    background-image: var(--as-page-bg) !important;
    background-color: transparent !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create.lh-home-shelf,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create.lh-home-shelf.lh-create-songyun,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create.lh-home-shelf.lh-create-songyun.lh-redesign,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent.h5-shelf-mirror,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent.h5-shelf-mirror.lh-create-songyun,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine.lh-create-songyun {
    background: var(--as-page-bg) !important;
    background-image: var(--as-page-bg) !important;
    background-color: transparent !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create.lh-home-shelf .app-container,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create.lh-home-shelf #mainContent,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create.lh-home-shelf .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create.lh-home-shelf .lh2-root,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create.lh-home-shelf .lh2-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create.lh-home-shelf #createToolsSheet,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create.lh-home-shelf #homeDashScrollLayer,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create.lh-home-shelf .create-dash,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent.h5-shelf-mirror .app-container,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent.h5-shelf-mirror #mainContent,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent.h5-shelf-mirror .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent.h5-shelf-mirror .lh2-root,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent.h5-shelf-mirror .lh2-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent.h5-shelf-mirror #agentToolsRoot {
    background: var(--as-page-bg) !important;
    background-image: var(--as-page-bg) !important;
    background-color: transparent !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create.lh-home-shelf .lh-new-home,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create.lh-home-shelf.lh-create-songyun .lh-new-home,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create.lh-home-shelf .lh-redesign-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent.h5-shelf-mirror #agentToolsRoot .lh2-page,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent.h5-shelf-mirror #agentToolsRoot .create-dash,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent.h5-shelf-mirror #agentToolsRoot .create-dash__inner {
    background: var(--as-page-bg) !important;
    background-image: var(--as-page-bg) !important;
    background-color: transparent !important;
}

/* normalize 末尾 html:has(body.page-tab-*) —— 须同时带 data-h5-skin 才压过 */
html[data-h5-skin]:not([data-h5-skin="default"]):has(body.page-tab-create),
html[data-h5-skin]:not([data-h5-skin="default"]):has(body.page-tab-agent),
html[data-h5-skin]:not([data-h5-skin="default"]):has(body.page-tab-assistant),
html[data-h5-skin]:not([data-h5-skin="default"]):has(body.page-tab-mine),
html[data-h5-skin]:not([data-h5-skin="default"]):has(body.page-tab-create) body,
html[data-h5-skin]:not([data-h5-skin="default"]):has(body.page-tab-agent) body,
html[data-h5-skin]:not([data-h5-skin="default"]):has(body.page-tab-assistant) body,
html[data-h5-skin]:not([data-h5-skin="default"]):has(body.page-tab-mine) body,
html[data-h5-skin]:not([data-h5-skin="default"]):has(body.page-tab-create) .app-container,
html[data-h5-skin]:not([data-h5-skin="default"]):has(body.page-tab-agent) .app-container,
html[data-h5-skin]:not([data-h5-skin="default"]):has(body.page-tab-assistant) .app-container,
html[data-h5-skin]:not([data-h5-skin="default"]):has(body.page-tab-mine) .app-container,
html[data-h5-skin]:not([data-h5-skin="default"]):has(body.page-tab-create) .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]):has(body.page-tab-agent) .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]):has(body.page-tab-assistant) .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]):has(body.page-tab-mine) .main-content {
    background: var(--as-page-bg) !important;
    background-image: var(--as-page-bg) !important;
    background-color: transparent !important;
}

/* index-page.css：html body.page-tab-mine .main-content 等硬编码渐变 */
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .main-content {
    background: var(--as-page-bg) !important;
    background-image: var(--as-page-bg) !important;
    background-color: transparent !important;
}

/* 「我的」顶部深蓝身份卡：勿继承 body 的 as-primary（否则链接/字在深蓝底上不可读） */
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .mine-vip-card,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .mine-vip-card .mine-vip-card__name,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .mine-vip-card .mine-vip-card__tag,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .mine-vip-card .mine-vip-card__tag-text,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .mine-vip-card .mine-vip-card__settings,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .mine-vip-card .mine-vip-card__settings-text {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .mine-vip-card .mine-vip-card__id,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .mine-vip-card .mine-vip-card__status {
    color: rgba(255, 255, 255, 0.88) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .mine-vip-card a,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .mine-vip-card a:visited {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .mine-vip-card a.mine-vip-card__link--danger,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .mine-vip-card .mine-vip-card__logout {
    color: #fecaca !important;
    -webkit-text-fill-color: #fecaca !important;
}
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .mine-vip-card .mine-vip-card__settings-ico.lh-lucide svg.lucide {
    stroke: #ffffff !important;
    color: #ffffff !important;
}

/* ===== 我的：主题选择器 ===== */
.mine-section-card--skin {
    overflow: hidden;
}

/* 「我的」：界面主题区块（静态标题 + 色块网格） */
.mine-details-skin > .mine-details-skin__header {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
    padding: 2px 0;
}
.mine-details-skin__summary-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
}
.mine-details-skin__title {
    letter-spacing: -0.02em;
}
.mine-details-skin__panel {
    padding-top: 10px;
}

/* 「我的」：创作记录 — 汇总入口行（克制白底 + 左侧主色条，避免大紫块） */
.mine-creations-hub {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 2px;
    padding: 12px 14px;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    background: var(--bg-card, #ffffff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left-width: 3px;
    border-left-color: #4f46e5;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 18px rgba(15, 23, 42, 0.05);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.mine-creations-hub:active {
    transform: scale(0.99);
}
.mine-creations-hub__ico.lh-lucide svg.lucide {
    width: 22px;
    height: 22px;
    color: #6366f1;
    stroke: #6366f1;
    flex-shrink: 0;
}
.mine-creations-hub__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.mine-creations-hub__t {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary, #0f172a);
}
.mine-creations-hub__s {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    line-height: 1.35;
}
.mine-creations-hub__chev.lh-lucide svg.lucide {
    width: 18px;
    height: 18px;
    color: #94a3b8;
    stroke: #94a3b8;
    flex-shrink: 0;
}

/* 「我的」：界面主题 — 汇总条 + 可折叠色板 */
.mine-skin-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.mine-skin-bar__copy {
    flex: 1;
    min-width: 0;
}
.mine-section-card__title--skin-inline {
    margin: 0 0 4px;
    font-size: 15px;
}
.mine-section-card__lead--skin-inline {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary, #64748b);
    font-weight: 500;
}
.mine-skin-expand-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 46%;
    padding: 8px 10px;
    margin: 0;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 14px;
    background: var(--bg-card, #fff);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.mine-skin-expand-btn:active {
    transform: scale(0.98);
}
.mine-skin-expand-btn__dot.mine-skin-chip__preview {
    width: 28px;
    max-width: 28px;
    height: 28px;
    border-radius: 9px;
    flex-shrink: 0;
}
.mine-skin-expand-btn__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.mine-skin-expand-btn__cur {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mine-skin-expand-btn__hint {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
    letter-spacing: 0.02em;
}
.mine-skin-expand-btn__chev {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mine-skin-expand-btn__chev-ico.lh-lucide svg.lucide {
    width: 16px;
    height: 16px;
    color: #94a3b8;
    stroke: #94a3b8;
    transition: transform 0.28s ease;
}
.mine-details-skin--open .mine-skin-expand-btn__chev-ico.lh-lucide svg.lucide {
    transform: rotate(180deg);
}
.mine-details-skin__panel--expandable {
    display: grid;
    grid-template-rows: 0fr;
    padding-top: 0;
    transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.mine-details-skin--open .mine-details-skin__panel--expandable {
    grid-template-rows: 1fr;
    padding-top: 10px;
}
.mine-details-skin__panel--expandable > .mine-skin-panel-inner {
    overflow: hidden;
    min-height: 0;
}
.mine-details-skin:not(.mine-details-skin--open) .mine-details-skin__panel--expandable > .mine-skin-panel-inner {
    pointer-events: none;
}
.mine-skin-panel-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mine-skin-group__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #64748b;
    margin: 0 2px 8px;
    line-height: 1.2;
}

/* 极窄屏：主题标题与「当前主题」胶囊纵向排布，避免标题与按钮抢一行 */
@media (max-width: 380px) {
    .mine-skin-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .mine-skin-expand-btn {
        max-width: none;
        width: 100%;
        justify-content: space-between;
    }
}
@media (prefers-reduced-motion: reduce) {
    .mine-details-skin__panel--expandable {
        transition: none;
    }
    .mine-skin-expand-btn__chev-ico.lh-lucide svg.lucide {
        transition: none;
    }
    .mine-creations-hub {
        transition: none;
    }
}

.mine-skin-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 4px;
}
@media (max-width: 360px) {
    .mine-skin-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.mine-skin-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: var(--bg-card, #fff);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}
.mine-skin-chip:active {
    transform: scale(0.98);
}
.mine-skin-chip--active {
    border-color: rgba(79, 70, 229, 0.45);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
.mine-skin-chip__preview {
    width: 100%;
    aspect-ratio: 1;
    max-width: 44px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.mine-skin-chip__preview--default {
    background: linear-gradient(145deg, #f3f6fb, #e2e8f0);
}
.mine-skin-chip__preview--cloud {
    background: linear-gradient(145deg, #f1f5f9, #cbd5e1);
}
.mine-skin-chip__preview--mist {
    background: linear-gradient(145deg, #ccfbf1, #5eead4);
}
.mine-skin-chip__preview--lilac {
    background: linear-gradient(145deg, #ede9fe, #d8b4fe);
}
.mine-skin-chip__preview--peach {
    background: linear-gradient(145deg, #ffedd5, #fdba74);
}
.mine-skin-chip__preview--honey {
    background: linear-gradient(145deg, #fef3c7, #fcd34d);
}
.mine-skin-chip__preview--mint {
    background: linear-gradient(145deg, #bbf7d0, #34d399);
}
.mine-skin-chip__preview--lagoon {
    background: linear-gradient(145deg, #bae6fd, #38bdf8);
}
.mine-skin-chip__preview--sakura {
    background: linear-gradient(145deg, #fce7f3, #f472b6);
}
.mine-skin-chip__preview--moss {
    background: linear-gradient(145deg, #bbf7d0, #4ade80);
}
.mine-skin-chip__preview--sand {
    background: linear-gradient(145deg, #f5f0e8, #d6d3d1);
}
.mine-skin-chip__preview--plum {
    background: linear-gradient(145deg, #fecdd3, #fb7185);
}
.mine-skin-chip__preview--slate {
    background: linear-gradient(145deg, #e7e5e4, #a8a29e);
}
.mine-skin-chip__preview--pearl {
    background: linear-gradient(145deg, #ffffff, #e4e4e7);
}
.mine-skin-chip__preview--noir {
    background: linear-gradient(145deg, #e5e5e5, #a3a3a3);
}
.mine-skin-chip__preview--midnight {
    background:
        radial-gradient(120% 90% at 20% 20%, rgba(10, 132, 255, 0.55), transparent 55%),
        linear-gradient(145deg, #1c1c1e 0%, #000000 70%, #0a84ff 160%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
/* 风格主题预览色块 */
.mine-skin-chip__preview--steel {
    background: linear-gradient(145deg, #cbd5e1, #475569);
}
.mine-skin-chip__preview--blossom {
    background: linear-gradient(145deg, #fbcfe8, #ec4899);
}
.mine-skin-chip__preview--mahogany {
    background: linear-gradient(145deg, #e8ddd0, #78350f);
}
.mine-skin-chip__preview--rosewood {
    background: linear-gradient(145deg, #fce8e4, #be185d);
}
.mine-skin-chip__preview--twilight {
    background: linear-gradient(145deg, #fde68a, #d97706);
}
.mine-skin-chip__preview--hypepop {
    background: linear-gradient(145deg, #d8b4fe, #9333ea);
}
.mine-skin-chip__preview--klein_cyan {
    background: linear-gradient(90deg, #0b3289, #70f3ff);
}
.mine-skin-chip__preview--klein_peach {
    background: linear-gradient(135deg, #0b3289, #ff606c);
}
.mine-skin-chip__preview--klein_ivory {
    background: linear-gradient(90deg, #0b3289, #fffbf0);
}
.mine-skin-chip__preview--klein_orange {
    background: linear-gradient(90deg, #0b3289, #ff8a00);
}
.mine-skin-chip__preview--klein_gold {
    background: linear-gradient(90deg, #0b3289, #fbdc92);
}
.mine-skin-chip__preview--klein_blush {
    background: linear-gradient(90deg, #0b3289, #ffdad2);
}
.mine-skin-chip__preview--cinnabar {
    background: linear-gradient(90deg, #312520, #ff461f);
}
.mine-skin-chip__preview--qun_cream {
    background: linear-gradient(90deg, #1772b4, #f5e9c1);
}
.mine-skin-chip__preview--pine_canary {
    background: linear-gradient(90deg, #426666, #fff143);
}
.mine-skin-chip__preview--orchid_jade {
    background: linear-gradient(90deg, #9932cc, #8cc269);
}

/* 风格主题卡片徽章 */
.mine-skin-chip--featured {
    position: relative;
}
.mine-skin-chip__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 16px;
    padding: 0 5px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
    white-space: nowrap;
}
.mine-skin-chip__name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    text-align: center;
    line-height: 1.25;
    max-width: 100%;
}

/* ========== 工具页主滚动区：专页内联 <style> 常为 .main-content 铺固定灰蓝，须跟 --as-page-bg ========== */
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-nova-video .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-i2v .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-dwp .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-creator-studio .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.golden-quote-page .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.tuwen-page-clean .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.vrp-page .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.pir-page .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.bt-page .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.bw-page .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.tg-page .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.kpb-page .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.arv-page .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.ipd-page .main-content {
    background: var(--as-page-bg) !important;
    background-image: var(--as-page-bg) !important;
    background-color: transparent !important;
}

/* 爆款详情图 / 电商详情图：专页 .main-content 曾靠 --bg-primary 铺底，须显式跟主题 */
html[data-h5-skin]:not([data-h5-skin="default"]) body.detail-page.page-detail-image-tool .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.ecom-page.page-ecom-env-image-tool .main-content,
html[data-h5-skin]:not([data-h5-skin="default"]) body.ecom-page.page-ecom-env-image-tool #mainContent,
html[data-h5-skin]:not([data-h5-skin="default"]) body.ecom-page.page-ecom-env-image-tool #mainContent.main-content {
    background: var(--as-page-bg) !important;
    background-image: var(--as-page-bg) !important;
    background-color: transparent !important;
}

/* 自媒体工作台：内联 ::before/::after 铺灰底，非默认皮肤让主区跟主题 */
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-creator-studio .main-content::before,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-creator-studio .main-content::after {
    display: none !important;
    content: none !important;
}

/* ========== 详情图 / 电商环境 / 图生万物：顶栏、介绍条、Tab 轨道与壳层对齐主题（压过 *-brand-ui、linghui-page、h5-songyun-tool-shell）========== */
html[data-h5-skin]:not([data-h5-skin="default"]) 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,
html[data-h5-skin]:not([data-h5-skin="default"]) body.ecom-page.page-ecom-env-image-tool:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template) .nav-header,
html[data-h5-skin]:not([data-h5-skin="default"]) body.linghui-page:not(.page-agent-center):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template):not(.page-tab-assistant) .nav-header {
    background: var(--bg-page) !important;
    border-bottom-color: rgba(15, 23, 42, 0.07) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.detail-page.page-detail-image-tool .h5-tool-intro,
html[data-h5-skin]:not([data-h5-skin="default"]) body.ecom-page.page-ecom-env-image-tool .h5-tool-intro,
html[data-h5-skin]:not([data-h5-skin="default"]) body.linghui-page .h5-tool-intro {
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.96) 0%, var(--bg-page) 100%) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template):not(.page-tab-assistant) .tab-nav,
html[data-h5-skin]:not([data-h5-skin="default"]) body:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template):not(.page-tab-assistant) .detail-tabs {
    background: var(--bg-page) !important;
    border-color: rgba(15, 23, 42, 0.07) !important;
}

/* 创作/历史选中 Tab：与比例 3:4 一致的中性灰 pill（换肤也不改回蓝渐变） */
html[data-h5-skin]:not([data-h5-skin="default"]) body:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template):not(.page-tab-assistant) .tab-nav-item.active,
html[data-h5-skin]:not([data-h5-skin="default"]) body:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template):not(.page-tab-assistant) .detail-tab.active {
    color: #0a0a0a !important;
    background: #e4e4e7 !important;
    border: 1px solid #52525b !important;
    box-shadow: none !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template):not(.page-tab-assistant) .tab-nav-item.active::before,
html[data-h5-skin]:not([data-h5-skin="default"]) body:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template):not(.page-tab-assistant) .detail-tab.active::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template):not(.page-tab-assistant) .tab-nav-item.active .h5-ico-tab,
html[data-h5-skin]:not([data-h5-skin="default"]) body:not(.page-auth):not(.page-tab-create):not(.page-tab-agent):not(.page-tab-mine):not(.page-tab-template):not(.page-tab-assistant) .detail-tab.active .h5-ico-tab {
    color: #0a0a0a !important;
}

/* ── 自有产品（ecom_env_image.php?iw=1）：工具设计令牌跟当前皮肤主色（与首页「界面主题」一致）── */
html[data-h5-skin]:not([data-h5-skin="default"]) body.tool-page.page-ecom-iw-product {
    --tool-primary: var(--as-blue);
    --tool-primary-soft: color-mix(in srgb, var(--as-blue) 12%, var(--bg-page, #ffffff));
    --tool-option-active-bg: color-mix(in srgb, var(--as-blue) 11%, var(--bg-page, #ffffff));
    --tool-option-active-border: color-mix(in srgb, var(--as-blue) 32%, transparent);
    --tool-primary-btn-shadow: 0 12px 28px color-mix(in srgb, var(--as-blue) 22%, transparent);
    --tool-gradient-cta: linear-gradient(135deg, var(--as-primary) 0%, color-mix(in srgb, var(--as-blue) 52%, var(--as-primary)) 50%, var(--as-blue) 100%);
    --tool-txt: var(--as-primary);
    --tool-txt-muted: color-mix(in srgb, var(--as-primary) 50%, #64748b);
    --tool-txt-soft: color-mix(in srgb, var(--as-primary) 38%, #94a3b8);
}

/* ── 产品图视频 product_image_video.php：内联青绿/ teal，换肤与 --as-blue 对齐（加载顺序晚于内联）── */
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv {
    --piv-a: var(--as-blue);
    --piv-a2: color-mix(in srgb, var(--as-blue) 72%, #0891b2);
    --piv-violet: color-mix(in srgb, var(--as-blue) 35%, #6366f1);
    --piv-soft: color-mix(in srgb, var(--as-blue) 12%, transparent);
    --piv-ink: var(--as-primary, #0c1222);
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .piv-tab-top.is-on {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--as-blue) 12%, var(--bg-page, #ffffff)) 0%,
        color-mix(in srgb, var(--as-blue) 6%, #ffffff) 100%
    ) !important;
    border-color: color-mix(in srgb, var(--as-blue) 40%, transparent) !important;
    color: var(--as-blue) !important;
    box-shadow:
        0 6px 20px color-mix(in srgb, var(--as-blue) 18%, transparent),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .piv-strip-mark,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .piv-badge {
    color: var(--as-blue) !important;
    background: color-mix(in srgb, var(--as-blue) 10%, var(--bg-page, #ffffff)) !important;
    border-color: color-mix(in srgb, var(--as-blue) 28%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .piv-chip-toggle {
    color: var(--as-blue) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .piv-preset.is-active {
    border-color: color-mix(in srgb, var(--as-blue) 50%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--as-blue) 25%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .piv-drop {
    border-color: color-mix(in srgb, var(--as-blue) 28%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .piv-drop:hover {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--as-blue) 8%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .piv-drop.has-file {
    box-shadow: 0 8px 28px color-mix(in srgb, var(--as-blue) 12%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .piv-drop-plus {
    background: linear-gradient(145deg, #94a3b8, var(--as-blue)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .piv-chip.is-on {
    background: color-mix(in srgb, var(--as-blue) 10%, var(--bg-page, #ffffff)) !important;
    border-color: color-mix(in srgb, var(--as-blue) 55%, transparent) !important;
    color: var(--as-blue) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .piv-cta {
    background: linear-gradient(135deg, var(--as-primary) 0%, var(--as-blue) 100%) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--as-blue) 22%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .piv-link-hist {
    border-color: color-mix(in srgb, var(--as-blue) 25%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .piv-chip:focus-visible,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .piv-preset:focus-visible,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .piv-cta:focus-visible,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .piv-tab-top:focus-visible,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .piv-chip-toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--as-blue) 65%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .piv-digest-hit:focus-visible .piv-digest-compact {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--as-blue) 35%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .piv-digest-pill--ok {
    background: color-mix(in srgb, var(--as-blue) 10%, var(--bg-page, #ffffff)) !important;
    color: color-mix(in srgb, var(--as-blue) 55%, #064e3b) !important;
    border-color: color-mix(in srgb, var(--as-blue) 28%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .nova-hist-card-top--busy {
    background: linear-gradient(
        160deg,
        var(--as-blue) 0%,
        color-mix(in srgb, var(--as-blue) 55%, #155e75) 55%,
        color-mix(in srgb, var(--as-blue) 72%, #0e7490) 100%
    ) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-piv .nova-hist-act-btn--pri {
    background: linear-gradient(135deg, var(--as-blue), color-mix(in srgb, var(--as-blue) 78%, #0891b2)) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--as-blue) 22%, transparent) !important;
}

/* ── 灵涵获客外链：非默认皮肤下与 --as-blue 对齐（内联已用 --hk-accent，此处补令牌与 !important 压栈）── */
html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro {
    --hk-accent: var(--as-blue);
    --hk-primary: var(--as-blue);
    --hk-teal-soft: color-mix(in srgb, var(--as-blue) 14%, transparent);
    --hk-accent-glow: color-mix(in srgb, var(--as-blue) 22%, transparent);
    --hk-ink: var(--as-primary, #0f172a);
    --hk-muted: color-mix(in srgb, var(--as-primary) 45%, #64748b);
    --hk-bg: var(--bg-page, #e8eef0);
    --hk-line: color-mix(in srgb, var(--as-blue) 12%, transparent);
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro::before {
    background:
        radial-gradient(ellipse 130% 70% at 50% -15%, color-mix(in srgb, var(--as-blue) 18%, transparent) 0%, transparent 52%),
        radial-gradient(ellipse 80% 45% at 100% 35%, color-mix(in srgb, var(--as-blue) 9%, transparent) 0%, transparent 48%),
        radial-gradient(ellipse 60% 40% at 0% 80%, color-mix(in srgb, var(--as-blue) 12%, transparent) 0%, transparent 45%),
        var(--as-page-bg) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro .nav-header {
    border-bottom-color: color-mix(in srgb, var(--as-blue) 10%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro .h5-tool-intro {
    border-color: color-mix(in srgb, var(--as-blue) 14%, transparent) !important;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.96) 0%,
        color-mix(in srgb, var(--as-blue) 8%, var(--bg-page, #ffffff)) 100%
    ) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 10px 40px rgba(15, 23, 42, 0.06),
        0 2px 8px color-mix(in srgb, var(--as-blue) 5%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro .h5-tool-intro__badge {
    background: linear-gradient(
        145deg,
        var(--as-blue),
        color-mix(in srgb, var(--as-blue) 68%, var(--as-primary, #0f172a))
    ) !important;
    box-shadow: 0 8px 26px color-mix(in srgb, var(--as-blue) 28%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro .hk-tabs {
    border-color: color-mix(in srgb, var(--as-blue) 14%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro .hk-tabs button.active {
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        color-mix(in srgb, var(--as-blue) 8%, var(--bg-page, #ffffff)) 100%
    ) !important;
    color: var(--as-blue) !important;
    border-color: color-mix(in srgb, var(--as-blue) 35%, transparent) !important;
    box-shadow:
        0 4px 16px color-mix(in srgb, var(--as-blue) 14%, transparent),
        0 1px 0 rgba(255, 255, 255, 0.95) inset !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro .hk-banner--info {
    color: var(--as-primary, #134e4a) !important;
    background: linear-gradient(
        125deg,
        rgba(255, 255, 255, 0.98) 0%,
        color-mix(in srgb, var(--as-blue) 10%, var(--bg-page, #ffffff)) 55%,
        color-mix(in srgb, var(--as-blue) 6%, #ffffff) 100%
    ) !important;
    border-color: color-mix(in srgb, var(--as-blue) 38%, transparent) !important;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--as-blue) 8%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro .hk-banner--info::before {
    color: var(--as-blue) !important;
    border-color: color-mix(in srgb, var(--as-blue) 45%, transparent) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--as-blue) 12%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro .hk-input,
html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro .hk-textarea {
    border-color: color-mix(in srgb, var(--as-blue) 18%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro .hk-input:focus,
html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro .hk-textarea:focus {
    border-color: color-mix(in srgb, var(--as-blue) 55%, transparent) !important;
    box-shadow: 0 0 0 3px var(--hk-teal-soft) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro .hk-mode-btn {
    border-color: color-mix(in srgb, var(--as-blue) 14%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro .hk-mode-btn.active {
    border-color: color-mix(in srgb, var(--as-blue) 45%, transparent) !important;
    color: var(--as-blue) !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--as-blue) 12%, transparent) !important;
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--as-blue) 10%, var(--bg-page, #ffffff)) 0%,
        color-mix(in srgb, var(--as-blue) 16%, var(--bg-page, #ffffff)) 55%,
        color-mix(in srgb, var(--as-blue) 8%, #ffffff) 100%
    ) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro .hk-mode-btn.active i {
    color: var(--as-blue) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro .hk-upload-slot {
    border-color: color-mix(in srgb, var(--as-blue) 28%, transparent) !important;
    background: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.95) 0%,
        color-mix(in srgb, var(--as-blue) 6%, var(--bg-page, #ffffff)) 100%
    ) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro .hk-upload-slot.add:hover {
    border-color: color-mix(in srgb, var(--as-blue) 45%, transparent) !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--as-blue) 10%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro .hk-upload-slot.filled {
    border-color: color-mix(in srgb, var(--as-blue) 38%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro .hk-submit {
    background: linear-gradient(
        135deg,
        var(--as-primary) 0%,
        var(--as-blue) 52%,
        color-mix(in srgb, var(--as-blue) 78%, #ffffff) 100%
    ) !important;
    box-shadow:
        0 10px 32px color-mix(in srgb, var(--as-blue) 38%, transparent),
        0 2px 0 rgba(255, 255, 255, 0.25) inset !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.hk-page-pro .hk-submit:active:not(:disabled) {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--as-primary) 88%, #000) 0%,
        var(--as-blue) 55%,
        color-mix(in srgb, var(--as-blue) 72%, var(--as-primary)) 100%
    ) !important;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--as-blue) 28%, transparent) !important;
}

/* ========== 全站主题字体（非默认皮肤：正文 + 标题，保留 Font Awesome / SVG 不受影响） ========== */
html[data-h5-skin]:not([data-h5-skin="default"]) body {
    font-family: var(--theme-font, "PingFang SC", "Microsoft YaHei", sans-serif) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body *:not(svg):not(pre):not(code):not(kbd):not(samp):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa):not(.fas):not(.far):not(.fab) {
    font-family: var(--theme-font, "PingFang SC", "Microsoft YaHei", sans-serif) !important;
}

/* 首页智能体顶栏内联曾强制无衬线，此处用主题正文字体压过 */
html[data-h5-skin]:not([data-h5-skin="default"]) body .cd-hero-mast__text {
    font-family: var(--theme-font, "PingFang SC", "Microsoft YaHei", sans-serif) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body .mine-section-card__title,
html[data-h5-skin]:not([data-h5-skin="default"]) body .lh-tool-card__title,
html[data-h5-skin]:not([data-h5-skin="default"]) body .cd-hero-banner__title,
html[data-h5-skin]:not([data-h5-skin="default"]) body .mine-vip-card__name,
html[data-h5-skin]:not([data-h5-skin="default"]) body .nav-header__title,
html[data-h5-skin]:not([data-h5-skin="default"]) body .nav-title,
html[data-h5-skin]:not([data-h5-skin="default"]) body .mine-details-skin__summary-text,
html[data-h5-skin]:not([data-h5-skin="default"]) body .cd-func-item__title,
html[data-h5-skin]:not([data-h5-skin="default"]) body h1,
html[data-h5-skin]:not([data-h5-skin="default"]) body h2,
html[data-h5-skin]:not([data-h5-skin="default"]) body h3 {
    font-family: var(--theme-font-title, var(--theme-font), "PingFang SC", sans-serif) !important;
}

/* ========== 主题色联动 UI（非默认：不只换底，主操作/Tab/底栏/分段/步骤条随主题主色变化）========== */

html[data-h5-skin]:not([data-h5-skin="default"]) {
    --h5-cta-gradient: linear-gradient(
        132deg,
        var(--as-primary, #0f172a) 0%,
        color-mix(in srgb, var(--as-blue) 58%, var(--as-primary)) 52%,
        var(--as-blue) 100%
    );
    --h5-chip-on-bg: #e4e4e7;
    --h5-chip-on-border: #52525b;
    --h5-subnav-track: color-mix(in srgb, var(--as-primary) 8%, var(--bg-page, #e8edf3));
    --h5-wizard-rail: color-mix(in srgb, var(--as-blue) 11%, var(--bg-page, #ffffff));
    --h5-wizard-rail-border: color-mix(in srgb, var(--as-blue) 26%, transparent);
}

/* 主 CTA：纯深色（换肤也不再用渐变） */
html[data-h5-skin]:not([data-h5-skin="default"]) body .submit-btn:not(:disabled),
html[data-h5-skin]:not([data-h5-skin="default"]) body .ps-submit-btn:not(:disabled),
html[data-h5-skin]:not([data-h5-skin="default"]) body .action-btn.primary:not(:disabled),
html[data-h5-skin]:not([data-h5-skin="default"]) body .linghui-submit-btn:not(:disabled) {
    background: #18181b !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* 创作/历史 · 工具内 Tab 选中：中性灰 pill（与默认壳一致） */
html[data-h5-skin]:not([data-h5-skin="default"]) body .detail-tab.active,
html[data-h5-skin]:not([data-h5-skin="default"]) body .ps-tab.active,
html[data-h5-skin]:not([data-h5-skin="default"]) body .ecom-tab.active,
html[data-h5-skin]:not([data-h5-skin="default"]) body .nova-tab.active {
    background: var(--h5-chip-on-bg) !important;
    border: 1px solid var(--h5-chip-on-border) !important;
    color: #0a0a0a !important;
    font-weight: 700 !important;
}

/* Chip / 画质 / 比例 等选中 */
html[data-h5-skin]:not([data-h5-skin="default"]) body .chip-btn.active,
html[data-h5-skin]:not([data-h5-skin="default"]) body .ratio-btn.active,
html[data-h5-skin]:not([data-h5-skin="default"]) body .nova-ratio-btn.active,
html[data-h5-skin]:not([data-h5-skin="default"]) body .quality-btn.active {
    background: var(--h5-chip-on-bg) !important;
    border: 1px solid var(--h5-chip-on-border) !important;
    color: #0a0a0a !important;
    font-weight: 700 !important;
}

/* 步骤条：圆点与连线 */
html[data-h5-skin]:not([data-h5-skin="default"]) body .detail-wiz-num,
html[data-h5-skin]:not([data-h5-skin="default"]) body .hec-step-num {
    background: var(--as-blue) !important;
    color: #ffffff !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body .detail-wiz-line,
html[data-h5-skin]:not([data-h5-skin="default"]) body .hec-step-line {
    background: color-mix(in srgb, var(--as-blue) 28%, #e5e5e5) !important;
}

/* 爆款详情图：步骤轨道 + 角标（压过 brand-ui 固定靛蓝） */
html[data-h5-skin]:not([data-h5-skin="default"])
    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 {
    background: var(--h5-wizard-rail) !important;
    border-color: var(--h5-wizard-rail-border) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"])
    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: color-mix(in srgb, var(--as-blue) 32%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"])
    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 {
    color: #27272a !important;
    background: #f4f4f5 !important;
    border: 1px solid #e4e4e7 !important;
}

/* 首页壳底栏：选中态用主题主色（原多为固定深蓝/近黑） */
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create .tab-item.active,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent .tab-item.active,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-assistant .tab-item.active,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-template .tab-item.active,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .tab-item.active {
    color: var(--as-blue) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create .tab-item.active .tab-icon,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create .tab-item.active .tab-label,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent .tab-item.active .tab-icon,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent .tab-item.active .tab-label,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-assistant .tab-item.active .tab-icon,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-assistant .tab-item.active .tab-label,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-template .tab-item.active .tab-icon,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-template .tab-item.active .tab-label,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .tab-item.active .tab-icon,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .tab-item.active .tab-label {
    color: var(--as-blue) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create .tab-bar,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent .tab-bar,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-assistant .tab-bar,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-template .tab-bar,
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .tab-bar {
    border-top-color: color-mix(in srgb, var(--as-blue) 18%, rgba(15, 23, 42, 0.08)) !important;
}

/* 创作页：全 / 图文 / 视频 — 轨道与三个选中 icon 区随主题偏移，仍保留「全 / 图 / 视」差异 */
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create .lh-shelf-cat-card .lh-shelf-tabbar__inner {
    background: var(--h5-subnav-track) !important;
    border-color: color-mix(in srgb, var(--as-blue) 10%, rgba(15, 23, 42, 0.08)) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create .lh-shelf-cat-card .lh-shelf-tab.is-active {
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--as-blue) 12%, rgba(15, 23, 42, 0.06)),
        0 4px 14px color-mix(in srgb, var(--as-blue) 18%, rgba(15, 23, 42, 0.08)) !important;
    outline: 1px solid color-mix(in srgb, var(--as-blue) 24%, transparent);
    outline-offset: 0;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create .lh-shelf-cat-card .lh-shelf-tab--all.is-active .lh-shelf-tab__ico-wrap {
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--as-blue) 28%, #ffffff) 0%,
        var(--as-blue) 48%,
        color-mix(in srgb, var(--as-primary) 40%, var(--as-blue)) 100%
    ) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--as-blue) 34%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create .lh-shelf-cat-card .lh-shelf-tab--tw.is-active .lh-shelf-tab__ico-wrap {
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--as-blue) 25%, #ddd6fe) 0%,
        color-mix(in srgb, var(--as-blue) 52%, #7c3aed) 52%,
        #5b21b6 100%
    ) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--as-blue) 28%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create .lh-shelf-cat-card .lh-shelf-tab--vid.is-active .lh-shelf-tab__ico-wrap {
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--as-blue) 20%, #fecdd3) 0%,
        color-mix(in srgb, var(--as-blue) 42%, #ec4899) 50%,
        color-mix(in srgb, var(--as-primary) 38%, #be185d) 100%
    ) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--as-blue) 26%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create .lh-shelf-cat-card .lh-shelf-tab.is-active .lh-shelf-tab__label {
    color: var(--as-primary) !important;
}

/* 「我的」里主题 chip 选中环随主色 */
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .mine-skin-chip--active {
    border-color: color-mix(in srgb, var(--as-blue) 50%, rgba(79, 70, 229, 0.35)) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--as-blue) 24%, transparent) !important;
}

html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .mine-creations-hub {
    background: var(--bg-card, #ffffff) !important;
    border-color: color-mix(in srgb, var(--as-blue) 12%, rgba(15, 23, 42, 0.08)) !important;
    border-left-color: var(--as-blue) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.88) inset,
        0 6px 18px color-mix(in srgb, var(--as-blue) 6%, transparent) !important;
}
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .mine-creations-hub__ico.lh-lucide svg.lucide {
    color: var(--as-blue) !important;
    stroke: var(--as-blue) !important;
}
html[data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .mine-skin-expand-btn {
    border-color: color-mix(in srgb, var(--as-blue) 18%, rgba(15, 23, 42, 0.1)) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--as-blue) 7%, transparent) !important;
}

/* 工具顶栏底边微染（与页面主色一致） */
html[data-h5-skin]:not([data-h5-skin="default"]) body:not(.page-auth) .nav-header {
    border-bottom-color: color-mix(in srgb, var(--as-blue) 14%, rgba(15, 23, 42, 0.07)) !important;
}

/* ========== 暗黑外观优先：皮肤只保留强调色，不再铺浅色底 ========== */
html[data-h5-appearance='dark'][data-h5-skin],
html[data-h5-appearance='dark'][data-h5-skin]:not([data-h5-skin="default"]),
html[data-h5-skin="midnight"] {
    --as-page-bg: #000000 !important;
    --sy-bg-main: #000000 !important;
    --bg-page: #000000 !important;
    --lh-bg: #000000 !important;
    --h5-canvas: #000000 !important;
    --ds-bg-page: #000000 !important;
    --bg-card: #1c1c1e !important;
    --as-primary: #f5f5f7 !important;
    background: #000000 !important;
    background-image: none !important;
    background-color: #000000 !important;
}

html[data-h5-skin="midnight"] {
    --as-blue: #0a84ff !important;
}

html[data-h5-appearance='dark'][data-h5-skin] body,
html[data-h5-appearance='dark'][data-h5-skin]:not([data-h5-skin="default"]) body,
html[data-h5-appearance='dark'][data-h5-skin]:not([data-h5-skin="default"]) .app-container,
html[data-h5-appearance='dark'][data-h5-skin]:not([data-h5-skin="default"]) .main-content,
html[data-h5-appearance='dark'][data-h5-skin]:not([data-h5-skin="default"]) .lh2-root,
html[data-h5-appearance='dark'][data-h5-skin]:not([data-h5-skin="default"]) .lh2-page,
html[data-h5-appearance='dark'][data-h5-skin]:not([data-h5-skin="default"]) .create-dash,
html[data-h5-appearance='dark'][data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-create,
html[data-h5-appearance='dark'][data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-agent,
html[data-h5-appearance='dark'][data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine {
    background: #000000 !important;
    background-image: none !important;
    background-color: #000000 !important;
}

html[data-h5-appearance='dark'][data-h5-skin]:not([data-h5-skin="default"]) body.page-tab-mine .mine-creations-hub {
    background: #1c1c1e !important;
    border-color: rgba(84, 84, 88, 0.45) !important;
    box-shadow: none !important;
}