@charset "utf-8";
/* ============================================================
 * home-redesign.css — 首页 UI 改版专用样式（仅 index.html 引用）
 * 所有规则以 .home-v2 前缀锁定首页作用域；不覆盖 common.css/home.css
 * 既有规则的语义，只调整首页自己的视觉层。业务 id 与层级零改动。
 * 全站按钮统一布景橙：.btn-primary（common.css）已是 booth 橙，本文件不覆盖按钮色。
 * ============================================================ */

.home-v2 {
    --hv2-ink: #0c0a08;          /* 暖黑底 */
    --hv2-booth: rgb(var(--brand-rgb));        /* 录影棚橙：只当灯光，不当按钮 */
    --hv2-booth-dim: rgb(var(--brand-rgb) / 0.32);
    --hv2-cream: #f2ead9;        /* 大标题与主文字 */
    --hv2-panel: #16100b;        /* 卡片底（暖棕黑） */
    --hv2-panel-line: rgba(242, 234, 217, 0.10);
    --hv2-faint: #a89f92;        /* 次级文字，对暖黑 ≥4.5:1 */
    background-color: var(--hv2-ink) !important;
    font-feature-settings: "tnum" 1; /* 数字等宽：价格/时长不跳动 */
}

/* ---------- 字体 ----------
 * Oswald 的 @font-face 已移到 common.css（顶栏 wordmark 全站要用同一份字体，@font-face
 * 是全局声明，放两份会漂）。首页原先经 fonts.googleapis.com 外链引入，实测把 FCP 拖到
 * 2.5s，自托管后本页不再有任何第三方 render-blocking CSS。 */
.home-v2 .hv2-display {
    font-family: "Oswald", "Inter", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.01em;
}

/* ---------- 首屏标题层 ---------- */
/* 66rem 与控制台列同轨（1056px），规格带得以单行；sub 自带 46rem 行长保护 */
.home-v2 .hv2-hero { max-width: 66rem; margin-inline: auto; text-align: center; }
.home-v2 .hv2-kicker {
    color: var(--hv2-booth);
    font-family: "Oswald", sans-serif;
    letter-spacing: 0.18em;
    font-size: 0.8rem;
    text-transform: uppercase;
}
.home-v2 h1.hv2-h1 {
    color: var(--hv2-cream);
    font-family: "Oswald", "Inter", sans-serif;
    font-weight: 600;
    font-size: clamp(2.4rem, 6.5vw, 4.6rem);
    line-height: 1.04;
    text-wrap: balance;
    margin-top: 0.4rem;
    /* 大字只给柔影会发糊：紧贴的 1px 硬影定笔画边缘，外圈柔影把字从高光背景上抬起来。
       kicker/sub 用的是单层轻投影，这里更重是因为 H1 正压在聚光遮罩最亮的中心区。 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 6px 26px rgba(0, 0, 0, 0.5);
}
.home-v2 .hv2-sub {
    color: #d8d2c6;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.65;
    max-width: 46rem;
    margin: 0.9rem auto 0;
}
/* 规格带（方案A）：原 chips + facts 两条 meta 合并为一条五段横带，
   宽度锁定与卡片列同轨，文案原文只挪位；换行时点号前缀不孤悬 */
.home-v2 .hv2-specs {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 0.35rem 0.7rem;
    max-width: 66rem; margin: 1.1rem auto 0;
    padding: 0.42rem 1.1rem;
    border: 1px solid var(--hv2-panel-line);
    border-radius: 999px;
    background: rgba(22, 16, 11, 0.65);
    color: var(--hv2-faint);
    font-size: 0.75rem; line-height: 1.6;
}
.home-v2 .hv2-specs b { color: var(--hv2-cream); font-weight: 600; }
.home-v2 .hv2-specs span + span::before { content: "·"; color: var(--hv2-booth); margin-right: 0.6em; }

/* 上传决策点旁的 likeness 提示（自文案区迁入） */
.home-v2 .hv2-slotnote { margin: 0.15rem 0 1.1rem; font-size: 0.78rem; line-height: 1.6; color: #8f867a; }

/* ---------- 控制台卡片（id 结构不动，只换皮） ---------- */
.home-v2 .hv2-console {
    background: linear-gradient(180deg, rgb(var(--brand-rgb) / 0.05), transparent 55%), var(--hv2-panel) !important;
    border: 1px solid var(--hv2-panel-line) !important;
    border-radius: 1.1rem;
}
/* 上传槽：虚线待客，橙色应答 */
.home-v2 .hv2-slot { border-color: rgba(242, 234, 217, 0.16) !important; background: rgba(12, 10, 8, 0.5) !important; }
.home-v2 .hv2-slot:hover { border-color: var(--hv2-booth-dim) !important; }
.home-v2 .hv2-slot .home-slot-placeholder { color: var(--hv2-faint); }
.home-v2 .hv2-slot [data-role-label] { color: var(--hv2-cream); }
/* 参考图缩略图（0-10 张）。#upload_thumbs 只显示与滚动，显隐完全交给 .hidden 类：
   这里刻意不写 display，否则同权重的 .hv2-thumbs 会按文件顺序顶掉后加载的 .hidden，
   空态占位图就会被压在宫格底下。字号归零是为了吃掉 inline-block 格子之间的空白符。 */
.home-v2 .hv2-thumbs { padding: 0.3rem; font-size: 0; }
/* 选上图后把卡片从 8rem 抬到刚好装下两行（5 列 × 2 行）：10 张图要能一眼数完，
   藏在滚动条后面就没人知道自己传到第几张。卡片里的孩子全是 absolute，
   height:auto 会塌成 4px 边框，所以只能抬 min-height，让绝对层跟着长。 */
.home-v2 .hv2-slot--has-files { min-height: 11rem; }
.home-v2 .hv2-thumb {
    position: relative;
    display: inline-block;
    width: 20%;
    aspect-ratio: 1 / 1;
    padding: 0.18rem;
    font-size: 0.8rem;
}
.home-v2 .hv2-thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid var(--hv2-panel-line);
    background: rgba(12, 10, 8, 0.6);
}
.home-v2 .hv2-thumb-remove {
    position: absolute;
    top: 0.32rem;
    right: 0.32rem;
    width: 1.15rem;
    height: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.6rem;
    line-height: 1;
    color: #fff;
    background: rgba(12, 10, 8, 0.72);
    border: 0;
    border-radius: 9999px;
    cursor: pointer;
}
.home-v2 .hv2-thumb-remove:hover { background: var(--hv2-booth); }
/* 表单控件换肤：只收编两个下拉触发钮——
   曾经的 [id$="_btn"] 通配把 #home_generate_btn 的 .btn-primary 品牌绿
   用 !important 压成了深灰（CTA 看起来像禁用态），教训：后缀通配 + 强优先级 = 事故 */
.home-v2 .hv2-console textarea,
.home-v2 .hv2-console select,
.home-v2 .hv2-console #home_resolution_btn,
.home-v2 .hv2-console #home_aspect_btn {
    background: rgba(12, 10, 8, 0.6) !important;
    border-color: var(--hv2-panel-line) !important;
    color: #e9e4da !important;
}
/* 加载转圈：最后一个产品紫残留 → booth 橙 */
.home-v2 .hv2-console textarea:focus { outline: 2px solid var(--hv2-booth-dim); outline-offset: 1px; }
.home-v2 .hv2-console label { color: var(--hv2-faint) !important; }
.home-v2 .hv2-console [id$="_count"], .home-v2 .hv2-console .hv2-micro { color: #8f867a; }
/* 卡底小字：模型署名 + 隐私一句 */
.home-v2 .hv2-foot {
    margin-top: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem;
    justify-content: space-between; color: #8f867a; font-size: 0.78rem;
}
/* 结果卡 */
.home-v2 .hv2-stage {
    background: var(--hv2-panel) !important;
    border: 1px solid var(--hv2-panel-line) !important;
    border-radius: 1.1rem;
    box-shadow: 0 0 90px -40px var(--hv2-booth-dim); /* 一盏顶光落在舞台上 */
}
.home-v2 .hv2-stage > div { color: var(--hv2-faint); }

/* ---------- 中部：平台带 ---------- */
.home-v2 .hv2-platform { text-align: center; max-width: 64rem; margin-inline: auto; }
.home-v2 .hv2-platform h2 { color: var(--hv2-cream); }
.home-v2 .hv2-platform p { color: var(--hv2-faint) !important; font-size: 1rem !important; }
.home-v2 .hv2-modelicon { background: var(--hv2-panel) !important; border-color: var(--hv2-panel-line) !important; }

/* ---------- 示例带：居中堆叠 → 左右交替双栏 ---------- */
.home-v2 .hv2-example {
    display: grid; align-items: center; gap: 1.2rem 2.5rem;
    grid-template-columns: 1fr; max-width: 72rem; margin-inline: auto;
    padding-inline: 1rem;
}
@media (min-width: 1024px) { .home-v2 .hv2-example { grid-template-columns: 1fr 1.15fr; } }
.home-v2 .hv2-example .hv2-copy { text-align: left; }
.home-v2 .hv2-example h2 { color: var(--hv2-cream); font-size: 1.6rem; line-height: 1.25; font-weight: 600; }
.home-v2 .hv2-example p.hv2-lead { color: var(--hv2-faint); margin-top: 0.7rem; font-size: 0.98rem; line-height: 1.7; }
.home-v2 .hv2-example .hv2-media { display: flex; align-items: center; gap: 0.8rem; }
.home-v2 .hv2-example .hv2-media > * { flex: 1; min-width: 0; }
.home-v2 .hv2-example .hv2-media img.hv2-arrow { flex: 0 0 auto; width: 2rem; }
.home-v2 .hv2-example:nth-of-type(even) .hv2-copy { order: 2; }
@media (max-width: 1023px) { .home-v2 .hv2-example:nth-of-type(even) .hv2-copy { order: 0; } }

/* ---------- Explore / 步骤 / 数据 / Why：节奏收紧 ---------- */
.home-v2 .hv2-explore h2 { color: var(--hv2-cream); }
.home-v2 .hv2-explore p { color: var(--hv2-faint) !important; }
.home-v2 .hv2-stats { border-block: 1px solid var(--hv2-panel-line); border-radius: 0; padding-block: 2.2rem; }
.home-v2 .hv2-stepcard {
    background: var(--hv2-panel) !important; border-color: var(--hv2-panel-line) !important;
}
/* 只洗卡片自己的底色（上轮 * 误伤图标圈的 bg-primary/10） */
.home-v2 .hv2-stepcard.bg-background { background-color: var(--hv2-panel); }

/* ---------- 四个左右功能行：沿用示例带的呼吸，文案瘦身 ---------- */
/* 根治：功能行的列上还挂着 flex 时代的 lg:w-1/2 / pl-6 / mr-4——
   放进 grid 后 w-1/2 在半宽轨道里再对折（实测 517px 轨道只剩 229px），
   旧列距与 grid gap 双重留白。宽度交还网格，间距只认 gap。 */
.home-v2 .hv2-altrow .hv2-example > div {
    width: auto;       /* grid 项默认拉伸填满轨道 */
    margin: 0;
    padding-left: 0;
}
.home-v2 .hv2-altrow h2 { color: var(--hv2-cream); font-size: 1.55rem; line-height: 1.25; font-weight: 600; }
.home-v2 .hv2-altrow h3 { color: var(--hv2-faint); font-size: 1rem; line-height: 1.7; font-weight: 400; }
.home-v2 .hv2-altrow ul li { color: #cfc8bc; font-size: 0.92rem; }
.home-v2 .hv2-altrow ul li span { color: var(--hv2-cream); }
.home-v2 .hv2-altrow video, .home-v2 .hv2-altrow .rounded-lg { border: 1px solid var(--hv2-panel-line); }

/* ---------- Why-choose：去编号装饰，收紧成小卡 ---------- */
.home-v2 .hv2-why { background: var(--hv2-panel) !important; border-color: var(--hv2-panel-line) !important; padding: 1.5rem; }
.home-v2 .hv2-why h2 { color: var(--hv2-cream); }
.home-v2 .hv2-why h3 { font-size: 1.05rem; }
.home-v2 .hv2-why p { color: var(--hv2-faint); font-size: 0.9rem; line-height: 1.65; }

/* 收尾 CTA 标题也归戏院字色（背景图带外资产，线上有） */
.home-v2 .hv2-finale h2 { color: var(--hv2-cream); font-family: "Oswald", "Inter", sans-serif; font-weight: 500; letter-spacing: 0.01em; }

/* 收尾区背景：用本站 AI 生成的山景实拍风格图，顶部留白适合叠深色遮罩 + 居中文字。
 * background-attachment: fixed 在 iOS Safari 上不被支持（还会让整个 section
 * 每帧重绘），所以视差只在"桌面宽 + 有 hover"时才开。 */
.home-v2 .hv2-finale {
    background-image: url('/static/image/image_content0.webp?v=3086e4986c35');
    background-size: cover;
    background-position: center;
}
@media (min-width: 1024px) and (hover: hover) {
    .home-v2 .hv2-finale { background-attachment: fixed; }
}

/* ---------- FAQ / 收尾：只调外壳节奏 ---------- */
.home-v2 #accordion-container { max-width: 52rem; margin-inline: auto; }

/* 全页 h2 统一归暖白（text-white 类同特异性，此处靠层级胜出） */
.home-v2 main h2 { color: var(--hv2-cream); }

/* 声音统一：main 内所有 h2 换 Oswald——之前只有 hero 一种字，
   中段全是 Inter，远看像两个站缝合；正文(h3/p)保持 Inter 不抢戏 */
.home-v2 main h2 {
    font-family: "Oswald", "Inter", ui-sans-serif, sans-serif;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1.2;
}


/* 移动端边距：旧站主容器 px-20(80px×2) 把小屏内容挤到 ~230px；
   ≥768 保持团队原布局不动 */
@media (max-width: 767px) {
    .home-v2 main > div { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ============================================================
 * 配色统一：下半页（功能行/Explore/步骤/数据/Why/FAQ/收尾）
 * 与首屏同一色温。冷灰类 → 暖色 tokens，JS 注入区（videoList/
 * FAQ 手风琴）共用同名类，一并覆盖。仅作用于本页 main。
 * ============================================================ */
/* 正文与标题字色：冷灰/纯白 → 暖灰/奶油（令牌化后类名为 text-1..4，见 tailwind.input.css） */
.home-v2 main .text-1,
.home-v2 main .text-2 { color: #cfc8bc; }
.home-v2 main .text-3,
.home-v2 main .text-4 { color: var(--hv2-faint); }
.home-v2 main .text-white { color: var(--hv2-cream); }
/* 卡片与控件底：蓝灰盒 → 暖棕板 */
.home-v2 main .bg-gray-800\/50 { background-color: rgba(22, 16, 11, 0.6); }
.home-v2 main .bg-gray-800 { background-color: var(--hv2-panel); }
.home-v2 main .bg-gray-900\/40,
.home-v2 main .bg-gray-900\/60 { background-color: rgba(12, 10, 8, 0.55); }
.home-v2 main .bg-white\/5 { background-color: rgba(242, 234, 217, 0.05); }
.home-v2 main .bg-white\/10 { background-color: rgba(242, 234, 217, 0.09); }
/* 边框线统一 */
.home-v2 main .border-gray-600,
.home-v2 main .border-gray-700 { border-color: var(--hv2-panel-line); }
/* 步骤卡图标：产品紫 → booth 橙 */
.home-v2 .hv2-stepcard [class*="bg-primary\/10"] { background-color: rgb(var(--brand-rgb) / 0.14); }

/* ---------- 首屏遮罩：剧场聚光 + 台前纱幕（v3） ----------
 * 聚光照旧打在展品上（图片是生成质量的本体，不压暗）；
 * 可读性改由「跟着文字块走的暖黑纱幕」承担——中心 0.72 落在 kicker/H1/sub
 * 一带（50% 30%），向外 68% 半径淡出为 0，不遮两侧展品。
 * v2 教训：全局中心透明 + 奶油字压在浅灰墙上 ≈1.9:1，双投影救不了亮区；
 * v1 教训：全局压暗中心把展品压没了。v3 = 幕布只管字，灯只管画。
 * 纱幕色取 brand-ink（#170902）暖近黑，与奶油字/booth 橙同族，不发脏。 */
body.home-v2 > .home-hero-overlay {
    background-image:
        radial-gradient(ellipse 58% 46% at 50% 30%, rgba(23, 9, 2, 0.72) 0%, rgba(23, 9, 2, 0.55) 42%, rgba(23, 9, 2, 0) 68%),
        radial-gradient(ellipse 62% 52% at 50% 40%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.16) 58%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.2) 60%, rgb(var(--night-rgb)) 98%);
}
/* 纱幕已抬高底座亮度差，文字投影减回轻量一档（H1 的双影保留：笔画边缘仍需定住） */
.home-v2 .hv2-kicker, .home-v2 .hv2-sub { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }

/* ---------- 主按钮色 ----------
 * 全站 .btn-primary（common.css）已统一为 booth 橙 + 深字 + 橙色光晕，
 * 首页 Generate/Download 不再需要单独覆盖，此处保留注释备查。 */

/* ---------- 可达性与动效预算 ---------- */
.home-v2 :focus-visible { outline: 2px solid var(--hv2-booth); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .home-v2 [class*="animate-spin"] { animation-duration: 3s; }
}

/* ---------- 甩裙舞试验台：挑母版那一排横滑 ----------
 * 经典滚动条（macOS 外接鼠标 / Windows）会占掉约 8px 并把卡片下面顶出一条灰杠，
 * 这里只藏滚动条本身，触摸、滚轮、方向键都照常。 */
.home-v2 #skirt_template_list { scrollbar-width: none; }
.home-v2 #skirt_template_list::-webkit-scrollbar { display: none; }

/* ---------- Twirl：这条动作产品自己的标识 ----------
 * 内联 SVG + fill="currentColor"，不用位图：换主题只改 tailwind.input.css 里那一行
 * 品牌橙令牌，标识自己跟着变。同一几何的源文件是 static/image/brand/twirl-mark.svg，
 * 顶栏与页脚用的实心方块底版是 twirl-tile.svg（已接进 my-header.js / my-footer.js）。
 * 裙形 = 一道裙头 + 一片实心裙面，下摆两个扇贝整体朝同一方向扫过去 —— 那个不对称
 * 就是转速。三笔废稿记在这：①「顶点 + 对称裙肋 + 圆底」在 30px 下读起来是热气球；
 * ②描边版（细线裙肋 + 波浪底）在 40px 以下会糊成一团，所以最终选实心剪影，
 * 和站点旧 logo.png「圆角方块 + 实心图形」是同一套构造；
 * ③三个扇贝 + 4.6 单位细裙头的初版，16px 实测裙头被切成 2,0,2 三行碎屑，
 * 于是裙头加粗到 9、扇贝减到两个、图形撑满画布（占格从 17.6% 提到 26.6%）。
 * 画布统一 0 0 64 64，所以这里的 32/44 就是最终显示尺寸，不再另算视觉框比例。 */
.home-v2 .twirl-mark { width: 32px; height: 32px; flex: 0 0 auto; color: var(--hv2-booth); }
.home-v2 .twirl-mark--ghost { width: 44px; height: 44px; color: rgb(var(--brand-rgb) / 0.22); }
/* 名字的字形定在 common.css 的 #id_nav_logo_text / .site-wordmark（全站顶栏与页脚共用）。
 * 首页曾经自己摆过一条 0.26em 的 wordmark，顶栏换成 Twirl 后同屏两个 logo，已撤。 */
.home-v2 .twirl-kicker {
    font-family: "Oswald", "Inter", ui-sans-serif, sans-serif;
    font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
}
/* 结果框借首页舞台卡同一盏顶光：原来那块 9:16 黑框是纯平的，
   和左栏的暖棕面板比，像是从别的站贴过来的。 */
.home-v2 .twirl-stage { box-shadow: 0 0 90px -40px var(--hv2-booth-dim); }