/* ============================================================================
灵境孝义 · 页面补丁（背景 + 布局）
----------------------------------------------------------------------------
覆盖页面（9 个）：
3D 图鉴 /3d · /3d/assets/:id · /3d/scenes/:slug
视觉工坊 /creative-studio · /creative-studio/:jobId · /me/style-creations
路书规划 /trips/new · /trips/:id · /me/trips
⚠️ 回滚：删除 index.html 里引用本文件的那一行 ，或直接删本文件。
站点其余文件完全未改动。
============================================================================ */
/* ============================================================================
第 1 部分 · 场景背景
----------------------------------------------------------------------------
实现方式说明（重要）：
早先的版本用 ::before + z-index:-1 + isolation:isolate 铺图，并且整段放在
@media (min-width:1024px) 里 —— 一旦视口宽度不足 1024px，图就完全不铺，
而容器已被改成透明，页面于是变成一片纯色（就是"没有图片背景"的现象）。
现在改为把背景图直接设在页面容器【自身】的 background-image 上：
· 元素自身的背景永远绘制在内容之下，不依赖层叠上下文 / z-index / 伪元素
· 不设宽度门槛，任何视口宽度都会铺图
· 叠一层半透明暗色渐变，保证正文可读
background-attachment:fixed 让背景像固定幕布，不随内容滚动。
============================================================================ */
.gallery-page,
.asset-page,
.scene-page,
.creative-page,
.creation-detail,
.style-history,
.itinerary-page,
.plan-page,
.history-page {
background-color: var(--app-bg, #071114) !important;
background-image:
linear-gradient(
180deg,
color-mix(in srgb, var(--app-bg, #071114) 72%, transparent),
color-mix(in srgb, var(--app-bg, #071114) 58%, transparent)
),
var(--desktop-scene-image, none) !important;
background-size: cover, cover !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
background-attachment: fixed, fixed !important;
}
/* 窄屏换用移动端竖图，观感更好；注意这里只是换图源，背景始终存在 */
@media (max-width: 1023px) {
.gallery-page,
.asset-page,
.scene-page,
.creative-page,
.creation-detail,
.style-history,
.itinerary-page,
.plan-page,
.history-page {
background-image:
linear-gradient(
180deg,
color-mix(in srgb, var(--app-bg, #071114) 70%, transparent),
color-mix(in srgb, var(--app-bg, #071114) 56%, transparent)
),
var(--mobile-scene-image, var(--desktop-scene-image, none)) !important;
background-attachment: scroll, scroll !important;
}
}
/* ============================================================================
第 2 部分 · 布局：返回按钮钉左上角，标题与内容块居中
----------------------------------------------------------------------------
页面根容器已设 position:relative，header / .page-top / .plan-header 都未定位，
因此按钮的 absolute 会相对「页面根容器」解析，正好钉在页面左上角。
页面用的是 scoped 样式、特异性更高，故必须 !important 才能覆盖。
============================================================================ */
/* ── 2.0 页面根容器需要定位，按钮才能相对它钉住 ───────────────────────── */
.gallery-page,
.asset-page,
.scene-page,
.creative-page,
.creation-detail,
.style-history,
.itinerary-page,
.plan-page,
.history-page {
position: relative !important;
}
/* ── 2.1 返回按钮：钉到页面左上角 ─────────────────────────────────────── */
.gallery-page > header > button:first-child,
.asset-page > header > button:first-child,
.scene-page > header > button:first-child,
.creative-page > header > button:first-child,
.creation-detail > header > button:first-child,
.style-history > header > button:first-child,
.itinerary-page > .page-top > button:first-child,
.plan-page > .plan-header > button:first-child,
.history-page > header > button:first-child {
position: absolute !important;
left: 20px !important;
top: 20px !important;
margin: 0 !important;
z-index: 5 !important;
}
/* ── 2.2 标题块居中（按钮已脱离文档流） ───────────────────────────────── */
.gallery-page > header,
.asset-page > header,
.scene-page > header,
.creative-page > header,
.creation-detail > header,
.style-history > header,
.itinerary-page > .page-top {
justify-content: center !important;
text-align: center !important;
}
/* ── 2.3 路书详情页 /trips/:id：header 原是 grid 三列，按钮脱离后须改块级 ── */
.plan-page > .plan-header {
display: block !important;
text-align: center !important;
}
/* ── 2.4 我的路书 /me/trips：同样改块级，标题才能真正居中 ─────────────── */
.history-page > header {
display: block !important;
text-align: center !important;
gap: 0 !important;
}
/* ── 2.5 第三元素（天数 / 新建路书）钉右上角，与左侧按钮左右对称 ──────── */
.plan-page > .plan-header > span:last-child,
.history-page > header > a:last-child {
position: absolute !important;
right: 20px !important;
top: 20px !important;
margin: 0 !important;
z-index: 5 !important;
}
/* ── 2.6 窄屏兜底：按钮回到常规流，避免与居中标题重叠 ─────────────────── */
@media (max-width: 767px) {
.gallery-page > header > button:first-child,
.asset-page > header > button:first-child,
.scene-page > header > button:first-child,
.creative-page > header > button:first-child,
.creation-detail > header > button:first-child,
.style-history > header > button:first-child,
.itinerary-page > .page-top > button:first-child,
.plan-page > .plan-header > button:first-child,
.history-page > header > button:first-child,
.plan-page > .plan-header > span:last-child,
.history-page > header > a:last-child {
position: static !important;
}
.gallery-page > header,
.asset-page > header,
.scene-page > header,
.creative-page > header,
.creation-detail > header,
.style-history > header,
.itinerary-page > .page-top,
.plan-page > .plan-header,
.history-page > header {
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 12px !important;
text-align: left !important;
}
.plan-page > .plan-header,
.history-page > header {
align-items: flex-start !important;
}
}
/* ============================================================================
第 3 部分 · 路书页返回按钮样式对齐
----------------------------------------------------------------------------
基准：其他内容页统一为 min-height:38px / padding:0 12px / 1px 主题色描边 / 7px 圆角
============================================================================ */
/* /trips/new：原本 border:0，且从 .page-top 继承了 10px 字号 + 2px 字距 */
.itinerary-page .page-top button {
min-height: 38px !important;
padding: 0 12px !important;
font-size: 11px !important;
letter-spacing: normal !important;
color: var(--theme-primary, #c9a063) !important;
background: transparent !important;
border: 1px solid color-mix(in srgb, var(--theme-primary, #c9a063) 30%, transparent) !important;
border-radius: 7px !important;
}
/* /me/trips：原本 header 用 justify-content:space-between，把「返回」推到容器最左、
「我的路书」推到中间。已由 2.4 改为块级居中；最右侧「新建路书」由 2.5 钉到右上。 */
/* ============================================================================
第 4 部分 · /trips/new（开始规划）内容组件居中
----------------------------------------------------------------------------
根因：该页两个内容组件的 scoped 样式都设了 max-width:820px，
但【都没有 margin:0 auto】，于是宽度受限却左对齐。
同页面的 .page-top（margin:0 auto 22px）和 .page-error（margin:12px auto）
都是居中的，偏偏这两个组件漏了 —— 属于原代码的疏漏。
.trip-form —— ，提交条件表单
.trip-progress—— ，规划进行中面板
============================================================================ */
.itinerary-page .trip-form,
.itinerary-page .trip-progress {
margin-left: auto !important;
margin-right: auto !important;
}
/* ============================================================================
第 5 部分 · AI 视觉工坊 · 风格选择按钮统一大小
----------------------------------------------------------------------------
组件：components/creative/StylePresetGrid.vue（仅 /creative-studio 使用）
症状：6 个风格按钮大小各不相同。
★ 真正根因：CSS 特异性冲突，组件的网格布局从未生效 ★
线上实际并存两条规则：
A) .creative-page>section[data-v-6c60d312] { …; display:block }
—— 父页面 CreativeStudioPage 的 scoped 样式，本意只是给子元素做居中
—— 特异性 = (0,2,1)
B) .preset-grid[data-v-1a1b1c17] { display:grid; grid-template-columns:repeat(3,1fr) }
—— 子组件 StylePresetGrid 自己的 scoped 样式
—— 特异性 = (0,2,0)
属性选择器与类选择器同属 b 位，所以 A 的 (0,2,1) 胜过 B 的 (0,2,0)。
结果：.preset-grid 的 display 被算成 block，【网格布局根本没应用】，
那些