/* ============================================================
   home.css — 元朔AI 首页专属重设计（scoped 到 body.home-redesign）
   方向：framed-sheet 改版 —— 丁香紫纯色底 + 白色"纸"表单 + 嫣红单色强调。
   原则：只改视觉（颜色 / 边框 / 阴影 / 字号），绝不碰几何布局
         （表单高度、对齐、提交钮尺寸都是亮哥精调的，动则破版）。
   作用域：仅首页 index.html；其余 15 个子页不受影响。
   ============================================================ */

/* 0. 作用域 + 去掉 4 层渐变背景，改纯色丁香紫 */
body.home-redesign {
  background: #d8dcfc;
  background-attachment: scroll;
}

/* 1. 顶部导航：去掉毛玻璃（glass 是被禁设备），改实色白底 + 1px 细线 */
body.home-redesign .topnav {
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(176, 42, 82, 0.12);
}

/* 1.5 站点名（亮哥 2026-11-02：「在输入框上面加一下网站名称：YUANSOL AI」）。
        大标题已整块隐掉（见下面第 2 段），这里补一行小字当身份标识：
        全大写 + 拉开字距 + 品牌粉，13px 压在输入框上方，不跟输入框抢注意力。
        text-indent 抵消 letter-spacing 加在最后一个字母右侧的那点空隙，
        否则整行会看着偏左半个字距。 */
body.home-redesign .brandline {
  margin: 0 0 14px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  text-indent: .14em;
  color: var(--brand);
  /* 渐变流光：品牌粉 → 暖橙 → 再回到品牌粉，沿文字方向缓缓滑动，6s 一循环 */
  background-image: linear-gradient(100deg,
    var(--brand) 0%,
    var(--brand) 35%,
    #ff8a5c 50%,
    var(--brand) 65%,
    var(--brand) 100%);
  background-size: 200% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: brandline-flow 6s ease-in-out infinite;
}
@keyframes brandline-flow {
  0%   { background-position: 0% 0; }
  50%  { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
@media (max-width: 720px) {
  body.home-redesign .brandline { margin-bottom: 12px; font-size: 22px; }
}

/* 2. 标题 + 说明：2026-11-02 亮哥要求整块去掉（首页只留工具本身，不要大标题）。
       节点保留、只做视觉隐藏（clip 那套）—— ① app.js 还要往 #title / #subtitle 里写文案，
       删 DOM 会让它取到 null；② 页面仍需要一个 h1 给读屏和搜索引擎，只是不占版面。
       想让它重新显出来：删掉下面这几条 display / clip 声明即可。 */
body.home-redesign #title {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  /* 它不占版面，字号只影响读屏层的语义，不必留 55px（app.css 里那句 55px 是给
     可见大标题用的；留着会被当成"app 屏幕标题过大"报出来） */
  font-size: 16px !important;
}
body.home-redesign .subtitle,
body.home-redesign .topbar > br {
  display: none !important;
}
/* 抽屉/弹窗里的 .col-title 是同一套渐变字（#title 那套 background-clip 写法），
   一并转实色，清掉 gradient-text */
body.home-redesign .col-title {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--title-1) !important;
}

/* 3. 副标题的旧规则（已随标题一起隐藏，留着备查：原本是"靛蓝描边药丸 + 呼吸光晕 +
       图标"的三件套，改成一行无底无框的说明文字）。 */
body.home-redesign .subtitle {
  width: auto;
  max-width: 100%;
  margin: 10px auto 0;
  padding: 0;
  gap: 0;
  display: block;
  white-space: normal;
  text-align: center;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.55;
  animation: none !important;
  box-shadow: none !important;
}
body.home-redesign .subtitle::before {
  content: none;
}

/* 4. 卖点标签（"无需注册登录 · 免费使用 · …"）：2026-11-02 亮哥要求去掉。
       标题拿掉后它一个人在顶上吊着，上面什么都没有，看着像没写完。
       #taglines 节点留着（app.js 按 id 取、往里塞 config 里的文案），只是不显示。 */
body.home-redesign .taglines,
body.home-redesign .topbar > br {
  display: none !important;
}

/* 4b. 标题和卖点那两行都拿掉后，白卡直接顶到导航栏下沿（只剩 12px），
       给卡顶补一点呼吸，别像粘在导航上 */
body.home-redesign .card {
  padding-top: 16px;
}

/* 5. 表单外壳：去掉阴影，留 1px 细边（白纸感），不做浮起 */
body.home-redesign .form-shell {
  box-shadow: none;
  border-color: rgba(176, 42, 82, 0.16);
}

/* 6. 主提示词框：保证清晰可读（不动高度/内边距，避免破版） */
body.home-redesign .form-shell .field-primary textarea {
  color: var(--text);
  font-size: 17px;
}

/* 7. "优化提示词"按钮：字色从浅玫红(#f07a9d, 2.6:1)改深玫红(#b02a52, 6.37:1) 过 AA */
body.home-redesign .opt-prompt-btn {
  color: var(--text);
}

/* 8. 积分合计：靛蓝(#7c5cff)改嫣红，去掉被禁色相 */
body.home-redesign #form .credit-line .credit-total {
  color: var(--brand);
}

/* 9. 抽屉：把重阴影(-24px 0 70px / .16)压到轻一档，细边留着 */
body.home-redesign .drawer {
  box-shadow: -10px 0 40px rgba(58, 47, 110, 0.10);
}

/* 10. 弹窗：阴影同样压轻一档（浮层允许有影，但别太重） */
body.home-redesign .modal {
  box-shadow: 0 14px 40px rgba(58, 47, 110, 0.14);
}

/* 11. 首页专属：分区标题（社区提示词）—— iframe 走 ?embed=1 抹掉了自己的页头，
       这一大片卡片上方没有文字锚点会像"页面没写完"。标题与 iframe 同宽（全卡片宽），
       字号收到 18px、颜色走正文深玫红，是"区块标签"而不是第二个主标题。 */
body.home-redesign .home-section-title {
  width: 100%;
  max-width: 100%;
  margin: 36px auto 0;
  /* 亮哥 2026-11-02：「这个对齐」。标题原来贴卡片左边缘，而下面 iframe 里的
     搜索框和卡片列各自带 22px 内边距（prompts.html 的 html.embed 段：.bar / main），
     于是标题比它们整整往左多出 22px，看着像漏了一格缩进 —— 补同样一份。
     ⚠️ 父页面读不到 iframe 里的 padding，只能照抄这个数：那边在 iframe 宽度
        ≤640px 时收到 14px；iframe 宽 = 视口 - 2×.card padding - 28（body 左右各 14），
        换算下来视口 ≤704px 起是 14px（实测 1440/1024/800/720 都是 22，700/600/480 都是 14）。 */
  padding-left: 22px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--title-1);
}
@media (max-width: 704px) {
  body.home-redesign .home-section-title { padding-left: 14px; }
}
/* 标题到 iframe 的间距由 iframe 自己那 22px margin-top 承担，这里不叠加 */

/* 13. 页脚：12.5px 的浅灰(--muted)在丁香紫底上只有 4.34:1，差一点点过不了 AA，
       压深到石墨色 5.9:1 */
body.home-redesign .foot {
  color: #4b4e6b;
}

/* 14. 「全部下载 / 下载到本地」这类次要按钮：字色 --accent-text(#e95581) 在
       浅粉底上只有 3.5:1，改深一档到 6.37:1（形状、尺寸、边框一律不动） */
body.home-redesign .save-btn {
  color: var(--text);
}

/* 15. 顶栏图标组居中（亮哥 2026-11-02）。
       原来是 margin-left:auto 顶到最右，跟左边的品牌 logo 一头一尾吊着。
       改成相对 .topnav 绝对居中：left:50% + translateX(-50%)，是**视口正中**，
       不是"扣掉 logo 后剩下的那段的正中"——后者会偏右半个 logo 宽，看着仍然不居中。
       .topnav 是 position:fixed，天然是绝对定位的包含块。
       窄屏（≤720）维持原样靠右：那里图标已经收成 30px 纯图标，绝对居中会压到 logo 上。 */
@media (min-width: 721px) {
  body.home-redesign .topnav .entry-icons {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0;
  }
}

/* 15.5 菜单名前面的图标去掉（亮哥 2026-11-02）。
       这排变成「文字 + ▾」的纯文字导航，比「图标 + 文字 + ▾」干净，也不跟左上角
       那条 logo 抢注意力。
       ⚠️ 只在宽屏生效：≤720 那档 .entry-ico__text 是 display:none（见 app.css），
          入口全靠图标表达，这边再藏就等于把按钮清空了 —— 所以必须用 min-width 圈住。
       ⚠️ 排除 #btnTaskList：它的角标是挂在图标上的状态提示，图标就是它的识别符。 */
@media (min-width: 721px) {
  body.home-redesign .topnav .entry-ico:not(#btnTaskList) > svg:first-child {
    display: none;
  }
}

/* 16. 有子菜单的入口加一个向下小箭头（亮哥 2026-11-02）。
       实用工具 / 下载 / 文档 / 账号 这四颗点下去（或 hover）会出子菜单，但现在光看
       图标 + 文字完全看不出来。用 border 拼一个 5px 的 chevron 挂在文字后面，
       color 走 currentColor（未登录是灰、登录后跟品牌色一起变），不额外引入图标文件。
       ⚠️ 用 :has() 选「里面真的有 .entry-menu 的那几个 wrap」——将来加一个带子菜单的
       入口，箭头自动出现，不用回来同步选择器。 */
body.home-redesign .entry-ico-wrap:has(> .entry-menu) > .entry-ico::after {
  content: "";
  flex: none;
  /* 亮哥 2026-11-02：「菜单的向下箭头加粗一下」。
     原来是 5×5 / 1.4px / opacity .55，在导航栏那排 15px 字旁边细得快看不见；
     现在 5.5×5.5 / 2.2px / .7 —— 臂粗加了一半多，尺寸只微调（尺寸一大就不像 chevron、
     容易糊成一块三角），靠边框粗细立住。 */
  width: 5.5px;
  height: 5.5px;
  margin-left: 5px;
  margin-top: -3px;
  border-right: 2.2px solid currentColor;
  border-bottom: 2.2px solid currentColor;
  transform: rotate(45deg);
  opacity: .7;
  transition: transform .16s, opacity .16s;
}
/* 展开时翻成向上，跟菜单开关对应（aria-expanded 是 app.js 自己在维护的） */
body.home-redesign .entry-ico-wrap:has(> .entry-menu) > .entry-ico[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  margin-top: 3px;
  opacity: .9;
}
/* 手机上这几颗收成 30×30 的纯图标，文字都没了，箭头会挤成一坨 ⇒ 一并藏掉 */
@media (max-width: 720px) {
  body.home-redesign .entry-ico-wrap:has(> .entry-menu) > .entry-ico::after {
    content: none;
  }
}

/* 17.5 未登录不画下拉箭头（亮哥 2026-11-03）。
       账号那颗未登录点下去是「直接开登录弹窗」，压根没有下拉菜单，
       顶着一个 ▾ 会让人以为点了要展开。app.js 的 refreshAccount() 只给登录态
       加 .is-user（同时渲染昵称与菜单项），这里就认这个类 —— 登录后箭头照常出现。
       ⚠️ 用 #userWrap 精确点名，不要写成「没有 .entry-menu 就不画」：
          未登录时 #userMenu 这个节点仍在 DOM 里（子项才是 hidden 的），
          按 :has() 判断会照样命中。 */
body.home-redesign #userWrap > .entry-ico:not(.is-user)::after {
  content: none;
}

/* 17. 账号 + 任务回到右上角（亮哥 2026-11-02）。
       它们本来是 .entry-icons 里的最后两项，跟着整组一起被居中了；现在在 index.html
       里单独包成 .entry-icons-right（.entry-icons 的兄弟节点，仍在 .topnav 里），
       靠 margin-left:auto 顶到最右。id / class 一个没动，app.js 按 id 取节点，不受影响。
       ⚠️ 不放在 .entry-icons 里面做绝对定位：那个容器自己是 absolute + transform，
          会把子元素的 absolute 变成相对它定位，反而顶不到最右。 */
body.home-redesign .entry-icons-right {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

/* 窄屏那一档 .entry-icons 回到普通流（靠 margin-left:auto 顶右），这一组跟在它后面，
   gap 也跟着收到 5px，别多出一截 */
@media (max-width: 720px) {
  body.home-redesign .entry-icons-right {
    gap: 5px;
    /* ⚠️ 必须跟 .entry-icons 同一个 order：那个容器在 app.css 的窄屏档里是 order:2，
       这一组默认 order:0 会排到它前面去（实测：账号跑到「实用工具」左边）。
       同 order 时按 DOM 顺序，正好是「图标组 → 账号/任务」。 */
    order: 2;
  }
}

/* ============================================================
   18. 提示词示例跑马灯（2026-11-03 亮哥：输入框下面加一行跑马灯，只展示图片；
       点图片把提示词填进上面的输入框；鼠标悬停提示「点击做同款」）。

   ⚠️ 无缝循环靠结构，不靠 JS 算宽度：轨道里放「一份原版 + 一份副本」（app.js 的
      bindPicks 负责），动画走 translateX(-50%) 恰好是一份的宽度，接缝处看到的
      还是同一张图，所以不会跳。
   ⚠️ 所以卡片间距**必须用 margin-right，不能用 gap**：gap 在 2N 张卡之间有 2N-1 个，
      首尾不对称，-50% 会差半个 gap（12px 的缝看得见）。用 margin-right 时
      轨道宽 = 2N×(卡宽+间距)，-50% 正好是一份，严丝合缝。
   ⚠️ 这两个类不挂在 body.home-redesign 下：跑马灯只在首页出现，但将来挪到别的页面
      也该继续能用，别写死作用域。
   ============================================================ */
.picks {
  position: relative;
  /* 通栏（2026-11-03 亮哥：不用跟输入框对齐，宽度为整个屏幕宽度）。
     这里只给「满父级」，真正顶到视口两边由 app.js 的 bleed() 按实测距离补负边距 ——
     不用 100vw：页面出现竖向滚动条时 100vw 比可视区宽 17px，会多一条横向滚动条。 */
  width: 100%;
  margin: 18px 0 2px;
  overflow: hidden;
  /* 两端淡出：卡片走到边上不会硬生生被切断 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
.picks-track {
  display: flex;
  width: max-content;
  /* 72s：28 条时一份是 28×(132+12)=4032px，走完约 56px/s；
     改判据就顺手改这个值，别让滚动忽快忽慢。 */
  animation: picks-scroll 72s linear infinite;
}
/* 悬停 / 键盘聚焦时暂停：动画停在中间帧上，暂停不会回跳，方便点 */
.picks:hover .picks-track,
.picks:focus-within .picks-track {
  animation-play-state: paused;
}
@keyframes picks-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.pick {
  position: relative;
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
  margin-right: 12px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #eef0ff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 1px 3px rgba(58, 47, 110, .10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pick img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.pick:hover,
.pick:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(58, 47, 110, .20);
  outline: none;
}
.pick:hover img,
.pick:focus-visible img {
  transform: scale(1.06);
}

/* 悬停提示：半透明压暗 + 一枚白色小药丸「点击做同款」。
   放在卡片内部（inset:0）而不是浮到外面 —— .picks 是 overflow:hidden，
   浮出去的气泡会被裁掉。 */
.pick-tip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 18, 48, .42);
  opacity: 0;
  transition: opacity .18s ease;
}
.pick:hover .pick-tip,
.pick:focus-visible .pick-tip {
  opacity: 1;
}
.pick-tip__pill {
  padding: 6px 12px;
  border-radius: 999px;
  background: #ffffff;
  /* ⚠️ 不用 var(--brand)（#e95581 在纯白上只有 3.5:1，12.5px 小字过不了 AA）；
     取同色系压深一档的 #b02a52（6.37:1），跟本文件第 7 段那处修法同一个色值。 */
  color: #b02a52;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
  transform: translateY(3px);
  transition: transform .2s ease;
}
.pick:hover .pick-tip__pill,
.pick:focus-visible .pick-tip__pill {
  transform: translateY(0);
}

/* 悬停看原图（2026-11-03 亮哥：鼠标放上去后展示原图）。
   ⚠️ 这张浮层由 app.js 挂到 <body> 上、position:fixed —— 卡片所在的 .picks 是
      overflow:hidden，放里面会被裁掉一半。
   ⚠️ 尺寸交给图片自己算：max-width / max-height 双限制，宽高都 auto，所以竖图不会被
      拉成横图（主图是 900px 宽、比例各异，硬给宽高会变形）。
   ⚠️ pointer-events:none：浮层常常盖住卡片，能点击就等于把「点击做同款」挡死了。 */
.pick-preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9990;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(30, 20, 60, .28), 0 0 0 1px rgba(176, 42, 82, .10);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(.985);
  transition: opacity .16s ease, transform .16s ease;
}
.pick-preview.is-on {
  opacity: 1;
  transform: none;
}
.pick-preview img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(320px, 42vw);
  max-height: 46vh;
}

/* ⚠️ 手机上 .form-shell 会变成 100% 宽，但跑马灯现在本来就通栏，
   这条只在「父级比视口窄」时才起作用（由 bleed() 兜），标签留着说明来历。 */
@media (max-width: 880px) {
  .picks { width: 100%; }
}

@media (max-width: 720px) {
  .picks { margin-top: 14px; }
  .pick { width: 104px; height: 104px; margin-right: 10px; border-radius: 12px; }
  .pick-tip__pill { font-size: 11.5px; padding: 5px 10px; }
}

/* 关掉动效的用户：轨道不滚，改成可以手滑的横向滚动条 */
@media (prefers-reduced-motion: reduce) {
  .picks { overflow-x: auto; }
  .picks-track { animation: none; }
}