/*
 * home-menu.css —— 创作首页（根路径 `/`）正文皮肤 · 简洁版 v4.1
 *
 * 只作用于 .ic-home 这一块（image-chat.html 空态区里的新容器），游客与登录后共用同一套正文布局：
 *   · 游客态：body 也是白底（image-chat-home.css），.ic-home 与页面融为一体；
 *   · 登录态：外面仍是原深色工作室（侧栏 / 顶栏照旧），.ic-home 作为一块白色内容面板落在其中。
 * 令牌：白底 #ffffff / 墨 #111827 / 次 #6b7280 / 淡 #9ca3af / 线 #e5e7eb / 底 #f9fafb / 品牌蓝 #5b5cf0。
 * 无渐变、无编号眉标、无卡片阴影堆叠。
 */

.ic-home {
  --hm-paper: #ffffff;
  --hm-ink: #111827;
  --hm-muted: #6b7280;
  --hm-faint: #9ca3af;
  --hm-line: #e5e7eb;
  --hm-soft: #f9fafb;
  --hm-accent: #5b5cf0;
  --hm-accent-ink: #4f46e5;

  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px 8px;
  color: var(--hm-ink);
  background: var(--hm-paper);
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
}

/* 空态区原有的深色排版 / 光晕在新首页里全部让位（本文件在内联 <style> 之后加载，同特异度后写者赢） */
.ic-empty {
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.ic-empty::before,
.ic-empty::after {
  display: none;
}

/* 登录态：外层是深色工作室，.ic-home 收成一块白面板 */
body:not([data-guest="1"]) .ic-home {
  margin: 6px auto 28px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(2, 6, 18, .32);
}

.ic-home a {
  color: inherit;
  text-decoration: none;
}

.ic-home img {
  display: block;
  max-width: 100%;
}

/* ---------- hero ---------- */
.ic-home .hm-hero {
  padding: 68px 0 4px;
  text-align: center;
}

.ic-home .hm-hero h1 {
  margin: 0;
  color: var(--hm-ink);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.6px;
  line-height: 1.25;
  text-wrap: balance;
}

.ic-home .hm-hero .sub {
  max-width: 560px;
  margin: 14px auto 0;
  color: var(--hm-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- composer（复用 #icComposer 原 DOM，仅换皮） ---------- */
.ic-home .ic-composer {
  width: 100%;
  max-width: 720px;
  min-height: 0;
  margin: 34px auto 0;
  padding: 0;
  color: var(--hm-ink);
  background: var(--hm-paper);
  border: 1px solid var(--hm-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
  text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.ic-home .ic-composer:focus-within {
  border-color: #c7c8f5;
  box-shadow: 0 0 0 3px rgba(91, 92, 240, .10);
  transform: none;
}

.ic-home .ic-composer textarea {
  min-height: 92px;
  padding: 16px 16px 8px;
  color: var(--hm-ink);
  caret-color: var(--hm-accent-ink);
  font-size: 15px;
  line-height: 1.6;
}

.ic-home .ic-composer textarea::placeholder {
  color: var(--hm-faint);
}

.ic-home .ic-composer .ic-refs {
  padding: 14px 16px 0;
}

/* 白底上的错误红字（基线 #fca5a5 是给深色工作室用的） */
.ic-home .ic-error {
  margin: 0;
  padding: 0 16px 10px;
  color: #b91c1c;
  font-size: 12.5px;
}

.ic-home .ic-composer .ic-refs img {
  border-color: var(--hm-line);
}

.ic-home .ic-composer .ic-bar {
  gap: 8px;
  padding: 6px 10px 10px 12px;
  border-top: 0;
}

.ic-home .ic-tools {
  gap: 4px;
}

/* 定稿的工具条是「上传商品图 / 平台 / 语言」。
   workflow-gallery.js 的 transformToolbars 会把 语言 / 比例 / 档位 三个 picker 一起打上 inline
   display:none（它的本意是「前端不再露出线路/模型」，语言是被顺带牵连的）——那之后全站就没有
   任何入口能改语言了，LANGUAGE_OPTIONS 里的 zh/ru/en/es 等于摆设。
   这里只把【首页 composer 的语言按钮】拿回来（inline 样式只能用 !important 盖）；比例 / 档位
   仍按画廊的口径收起，登录后由它自己的「画质」pill 承担。不改 workflow-gallery.js。 */
.ic-home #icComposer .ic-tools > [data-pick="language"] {
  display: inline-flex !important;
}

.ic-home .ic-tool {
  height: 30px;
  min-height: 30px;
  gap: 6px;
  padding: 0 10px;
  color: var(--hm-muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
}

.ic-home .ic-tool:hover {
  color: var(--hm-ink);
  background: var(--hm-soft);
  border: 0;
}

.ic-home .ic-tool .ci {
  width: 16px;
  height: 16px;
  color: var(--hm-faint);
}

.ic-home .ic-tool b {
  color: var(--hm-ink);
  font-weight: 500;
}

.ic-home .ic-tool .ic-flag-img {
  width: 15px;
  height: 15px;
  border-radius: 4px;
}

/* 画廊注入的 张数 / 画质 / 模板 pill 是深色工作室配色，落到白面板上要跟左边的工具条同一套皮 */
.ic-home .ic-composer .wf-pill {
  height: 30px;
  padding: 0 10px;
  color: var(--hm-muted);
  background: transparent;
  border: 1px solid var(--hm-line);
  border-radius: 8px;
  font-size: 12.5px;
}

.ic-home .ic-composer .wf-pill:hover {
  color: var(--hm-ink);
  background: var(--hm-soft);
  border-color: #c7c8f5;
}

.ic-home .ic-composer .wf-pill-lb,
.ic-home .ic-composer .wf-pill-dn {
  color: var(--hm-faint);
}

.ic-home .ic-composer .wf-pill-val {
  color: var(--hm-ink);
}

.ic-home .ic-composer .wf-preset {
  color: var(--hm-accent-ink);
  background: #eef2ff;
}

.ic-home .ic-composer .wf-tpl-pill {
  color: #b45309;
  background: #fffbeb;
  border-color: #fde68a;
  font-weight: 500;
}

.ic-home .ic-send {
  width: auto;
  height: 34px;
  min-width: 0;
  padding: 0 16px;
  color: #fff;
  background: var(--hm-accent);
  border: 0;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: none;
  animation: none;
}

.ic-home .ic-send:hover:not([disabled]) {
  background: var(--hm-accent-ink);
  transform: none;
  box-shadow: none;
  animation: none;
}

.ic-home .ic-send[disabled] {
  opacity: .45;
}

/* ---------- 试试 / 提示 / 最近 ---------- */
.ic-home .hm-try {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-top: 16px;
  color: var(--hm-muted);
  font-size: 13px;
}

.ic-home .hm-try .hm-try-lead {
  color: var(--hm-faint);
}

.ic-home .hm-try .hm-ex {
  color: var(--hm-muted);
  border-bottom: 1px solid transparent;
  cursor: pointer;
}

.ic-home .hm-try .hm-ex:hover {
  color: var(--hm-ink);
  border-bottom-color: var(--hm-line);
}

.ic-home .hm-note {
  margin: 12px 0 0;
  color: var(--hm-faint);
  font-size: 12.5px;
  text-align: center;
}

/* 「试试」三条示例 + 那句计费提示只给访客看；登录后同一位置换成「最近」列表
   （「最近」在游客态由 image-chat-home.css 关掉，两者恒互斥）。 */
body:not([data-guest="1"]) .ic-home .hm-try,
body:not([data-guest="1"]) .ic-home .hm-note {
  display: none;
}

.ic-home .hm-recent {
  max-width: 720px;
  margin: 18px auto 0;
  text-align: left;
}

/* R-B-L-9：标题层级 h1（hero）→ h2（最近 / 常用），不跳级；视觉仍是那行灰色小字 */
.ic-home .hm-recent h2 {
  margin: 0 0 6px;
  color: var(--hm-faint);
  font-size: 12.5px;
  font-weight: 500;
}

.ic-home .hm-recent-empty {
  margin: 0;
  padding: 9px 2px;
  border-top: 1px solid var(--hm-line);
  border-bottom: 1px solid var(--hm-line);
  color: var(--hm-faint);
  font-size: 13px;
}

.ic-home .hm-recent-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 2px;
  border-top: 1px solid var(--hm-line);
  font-size: 13.5px;
}

.ic-home .hm-recent-row:last-child {
  border-bottom: 1px solid var(--hm-line);
}

.ic-home .hm-recent-row span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ic-home .hm-recent-row span:last-child {
  flex: none;
  color: var(--hm-faint);
  font-size: 12.5px;
}

.ic-home .hm-recent-row:hover {
  color: var(--hm-accent-ink);
}

/* 我的风格快选条（登录态，存过风格才出现）——跟随白底皮肤 */
.ic-home .ic-my-styles {
  max-width: 720px;
  margin: 18px auto 0;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: left;
}

.ic-home .ic-my-styles-head {
  color: var(--hm-faint);
  font-size: 12.5px;
  font-weight: 500;
}

/* ---------- 常用 ---------- */
.ic-home .hm-featured {
  padding: 44px 0 0;
}

.ic-home .hm-sec-title {
  margin-bottom: 12px;
  color: var(--hm-faint);
  font-size: 13px;
  font-weight: 500;
}

.ic-home .hm-frow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ic-home .hm-fcard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 10px;
  border: 1px solid var(--hm-line);
  border-radius: 10px;
}

.ic-home .hm-fcard:hover {
  background: #fbfbff;
  border-color: #c7c8f5;
}

.ic-home .hm-fthumb {
  flex: none;
  display: block;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--hm-soft);
}

.ic-home .hm-fthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* R-B-M-1：封面 404 时 bindCoverFallback 把 is-coverless 加在【图片容器】上（.hm-ph / .hm-fthumb），
   这里给「常用」的小方图补上对应的纯色底 —— 否则常用卡会留一个白洞。 */
.ic-home .hm-fthumb.is-coverless {
  background: #eef0f4;
}

.ic-home .hm-ftext {
  min-width: 0;
}

.ic-home .hm-fcard b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}

.ic-home .hm-fcard small {
  display: block;
  margin-top: 3px;
  color: var(--hm-muted);
  font-size: 12px;
  line-height: 1.4;
}

/* ---------- 四页签菜单 ---------- */
.ic-home .hm-menu {
  padding: 44px 0 8px;
}

/* R-B-L-2 · 2026-09-11：那句灰色提示从 role="tablist" 里搬出来了（tablist 只能装 role=tab），
   所以细线与「页签靠左 / 提示靠右」的排布挪到外层 .hm-tabbar，.hm-tabs 只剩纯粹的页签行。 */
.ic-home .hm-tabbar {
  display: flex;
  align-items: baseline;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hm-line);
}

.ic-home .hm-tabs {
  display: flex;
  align-items: baseline;
  gap: 22px;
  min-width: 0;
  overflow-x: auto;
}

.ic-home .hm-tab {
  flex: none;
  padding: 0 0 10px;
  margin-bottom: -1px;
  color: var(--hm-faint);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.ic-home .hm-tab:hover {
  color: var(--hm-muted);
}

.ic-home .hm-tab.on {
  color: var(--hm-ink);
  border-bottom-color: var(--hm-ink);
}

.ic-home .hm-tabbar .hm-hint {
  flex: none;
  margin-left: auto;
  padding-left: 16px;
  color: var(--hm-faint);
  font-size: 12.5px;
}

.ic-home .hm-pane {
  display: none;
}

.ic-home .hm-pane.on {
  display: block;
}

.ic-home .hm-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px 12px;
}

.ic-home .hm-tile {
  position: relative;
  display: block;
  min-width: 0;
}

.ic-home .hm-ph {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 8px;
  background: var(--hm-soft);
}

.ic-home .hm-ph.is-coverless {
  background: #eef0f4;
}

.ic-home .hm-ph > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}

.ic-home .hm-tile:hover .hm-ph > img {
  transform: scale(1.03);
}

.ic-home .hm-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}

.ic-home .hm-ba img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ic-home .hm-ba img:first-child {
  border-right: 1px solid #fff;
}

.ic-home .hm-ba i {
  position: absolute;
  bottom: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  color: #fff;
  background: rgba(17, 24, 39, .6);
  font-size: 10.5px;
  font-style: normal;
  line-height: 1;
}

.ic-home .hm-ba i.l { left: 8px; }
.ic-home .hm-ba i.r { right: 8px; }

.ic-home .hm-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 14px 12px;
  background: #f8f9fb;
}

.ic-home .hm-copy b {
  font-size: 12.5px;
  line-height: 1.35;
}

.ic-home .hm-copy span {
  color: var(--hm-muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.ic-home .hm-copy em {
  margin-top: auto;
  color: var(--hm-faint);
  font-size: 11px;
  font-style: normal;
}

.ic-home .hm-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--hm-muted);
  background: #f8f9fb;
}

.ic-home .hm-t-flow .hm-ph {
  aspect-ratio: 5 / 3;
}

.ic-home .hm-go {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(17, 24, 39, .18);
  opacity: 0;
  transition: opacity .15s;
}

.ic-home .hm-go span {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--hm-ink);
  background: #fff;
  font-size: 12.5px;
  font-weight: 500;
}

.ic-home .hm-tile:hover .hm-go,
.ic-home .hm-tile:focus-visible .hm-go {
  opacity: 1;
}

.ic-home .hm-tile b {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 600;
}

.ic-home .hm-tile small {
  display: block;
  color: var(--hm-muted);
  font-size: 12.5px;
}

/* ---------- 更多工作流（登录后折叠；游客态整块隐藏） ---------- */
.ic-home .hm-wf-more {
  margin-top: 18px;
  border-top: 1px solid var(--hm-line);
}

.ic-home .hm-wf-more > summary {
  padding: 12px 2px;
  color: var(--hm-muted);
  font-size: 13px;
  list-style: none;
  cursor: pointer;
}

.ic-home .hm-wf-more > summary::-webkit-details-marker {
  display: none;
}

.ic-home .hm-wf-more > summary::after {
  content: " ›";
  color: var(--hm-faint);
}

.ic-home .hm-wf-more[open] > summary::after {
  content: " ⌄";
}

.ic-home .hm-wf-more > summary:hover {
  color: var(--hm-ink);
}

/* 画廊自带 full-bleed（94vw + 负 margin），在白面板里要收回容器宽度 */
.ic-home .hm-wf-more .wf-gallery-mount {
  width: 100%;
  margin: 0 0 12px;
  padding-top: 0;
  border-top: 0;
}

/* ---------- 三句话 ---------- */
.ic-home .hm-props {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 52px 0 0;
  border-top: 1px solid var(--hm-line);
  border-bottom: 1px solid var(--hm-line);
}

.ic-home .hm-prop {
  padding: 22px 24px 24px;
}

.ic-home .hm-prop + .hm-prop {
  border-left: 1px solid var(--hm-line);
}

.ic-home .hm-prop b {
  display: block;
  margin-bottom: 4px;
  font-size: 14.5px;
  font-weight: 600;
}

.ic-home .hm-prop span {
  color: var(--hm-muted);
  font-size: 13.5px;
}

/* ---------- 页脚 ---------- */
.ic-home .ic-brand-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 18px;
  margin: 0;
  padding: 28px 0 40px;
  border: 0;
  background: transparent;
  color: var(--hm-faint);
  font-size: 12.5px;
  text-align: left;
}

.ic-home .ic-brand-footer p {
  margin: 0;
}

.ic-home .ic-brand-footer b {
  color: var(--hm-muted);
  font-weight: 500;
}

.ic-home .ic-brand-footer .hm-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.ic-home .ic-brand-footer a {
  color: var(--hm-faint);
}

.ic-home .ic-brand-footer a:hover {
  color: var(--hm-ink);
}

.ic-home .hm-foot-seo {
  flex: 1 0 100%;
  color: var(--hm-faint);
  font-size: 11.5px;
  line-height: 1.6;
  opacity: .85;
}

/* ---------- 焦点可见 ---------- */
.ic-home :is(a, button, textarea, input, summary):focus-visible {
  outline: 2px solid var(--hm-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- 响应式 ---------- */
/* R-B-L-7：1025–1200 补一档 4 列，别从 5 列一步跳到 3 列（那一跳格子宽度会突然涨 60%） */
@media (max-width: 1200px) {
  .ic-home .hm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .ic-home .hm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* R-B-M-2 · 2026-09-11：登录态左边还杵着一根 ~240px 的侧栏，媒体查询量的却是【视口】宽度。
   1280 视口下正文容器只有 ~1000px、1100 视口下只有 ~820px，却仍按 5 列 / 4 列排 —— 格子被压到
   150px 上下，封面糊、两行标题挤成一坨。这里给登录态单独提前一档（游客态没有侧栏，不受影响）。
   注：容器查询（@container）更准，但登录态外层容器没有 container-type，全站也没有这套约定，
   本期先按 body[data-guest] 分叉，等有容器查询基建再收敛。 */
@media (max-width: 1280px) {
  body:not([data-guest="1"]) .ic-home .hm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body:not([data-guest="1"]) .ic-home .hm-frow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  body:not([data-guest="1"]) .ic-home .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .ic-home { padding: 0 16px 8px; }
  .ic-home .hm-hero { padding-top: 52px; }
  .ic-home .hm-hero h1 { font-size: 27px; }
  .ic-home .hm-frow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ic-home .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ic-home .hm-props { grid-template-columns: 1fr; }
  .ic-home .hm-prop + .hm-prop { border-left: 0; border-top: 1px solid var(--hm-line); }
  .ic-home .ic-composer .ic-bar { flex-wrap: wrap; }
  /* 工具条换行后「开始」会掉到行首；推到右边，保持和宽屏一样的「左参数 / 右开始」读法 */
  .ic-home .ic-composer .ic-bar .ic-send { margin-left: auto; }
  .ic-home .hm-tabbar .hm-hint { display: none; }
}

@media (max-width: 560px) {
  .ic-home .hm-hero { padding-top: 36px; }
  .ic-home .hm-hero h1 { font-size: 24px; letter-spacing: -.4px; }
  .ic-home .hm-hero .sub { font-size: 14px; }
  .ic-home .hm-frow { grid-template-columns: 1fr; }
  .ic-home .hm-featured, .ic-home .hm-menu { padding-top: 32px; }
  .ic-home .hm-props { margin-top: 36px; }
  .ic-home .hm-prop { padding: 18px 0 20px; }
}

/* R-B-L-5 · 2026-09-11：触屏没有 hover，蒙层要么永不出现（用户不知道点了会怎样），要么按 :hover
   的写法在手指按下时糊住整张图。改成常显的小角标：贴右下、不遮主体、看一眼就知道这格点了干什么。 */
@media (hover: none) {
  .ic-home .hm-go {
    inset: auto 6px 6px auto;
    display: inline-flex;
    border-radius: 6px;
    background: transparent;
    opacity: 1;
  }
  .ic-home .hm-go span {
    height: 22px;
    padding: 0 7px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 3px rgba(17, 24, 39, .18);
    font-size: 11.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ic-home * { transition: none !important; animation: none !important; }
}