/* ================= 灵感广场（r367）=================
   灵感广场：瀑布流卡片 + 分区标签 + 类型/分类/搜索 + 详情弹层。
   主题变量沿用 app.css 同一套（--bg-card / --text / --text-2 / --border / --color-primary …），
   保证深色站点风格一致；卡片用 CSS columns 做真瀑布流（上游同观感，且不需要 JS 计算列高）。
   ================================================== */

/* ★ .view.active 基类是 display:flex !important（row 向），必须显式压回块级布局，
   否则 header/tabs/grid 会被横着排成一列「竖排胶囊」（r367 实测踩坑） */
.inspire-view.active {
  display: block !important;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.inspire-view { padding: var(--sp-6, 28px) var(--sp-6, 28px) 60px; }

.insp-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.insp-head .view-title { margin: 0; }
.insp-head .view-sub { margin: 4px 0 0; color: var(--text-3); font-size: var(--fs-sm, 13px); }

.insp-search { display: flex; align-items: center; gap: 8px; }
.insp-search input {
  width: 260px; max-width: 52vw; height: 38px; padding: 0 14px;
  background: var(--bg-input, rgba(255, 255, 255, .05));
  border: 1px solid var(--border); border-radius: var(--r-pill, 999px);
  color: var(--text); font-size: var(--fs-sm, 13px); outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.insp-search input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 212, 181, .12); }
.insp-search button {
  height: 38px; padding: 0 18px; border: none; cursor: pointer;
  border-radius: var(--r-pill, 999px); background: var(--grad-cta, var(--color-primary));
  color: #06110f; font-weight: 600; font-size: var(--fs-sm, 13px);
  transition: filter var(--t-fast), transform var(--t-fast);
}
.insp-search button:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* 分区标签：灵感广场 / 我的收藏 / 使用记录 / 我的灵感 */
.insp-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 12px; }
.insp-tab {
  padding: 8px 16px; border: none; cursor: pointer; font-size: var(--fs-sm, 13px);
  background: transparent; color: var(--text-3); border-radius: var(--r-md, 10px);
  transition: color var(--t-fast), background var(--t-fast);
}
.insp-tab:hover { color: var(--text); background: var(--bg-hover, rgba(255, 255, 255, .05)); }
.insp-tab.active { color: var(--color-primary); background: var(--grad-primary-soft, rgba(0, 212, 181, .1)); font-weight: 600; }

/* 类型：全部 / 图片 / 视频 / 音频 */
.insp-types { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.insp-type {
  padding: 5px 14px; cursor: pointer; font-size: var(--fs-xs, 12px);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-pill, 999px);
  color: var(--text-2); transition: all var(--t-fast);
}
.insp-type:hover { border-color: var(--border-strong); color: var(--text); }
.insp-type.active { border-color: var(--color-primary); background: var(--grad-primary-soft, rgba(0, 212, 181, .12)); color: var(--color-primary); }

/* 分类候选（多选 chips） */
.insp-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; max-height: 92px; overflow-y: auto; padding-bottom: 4px; }
.insp-cat {
  padding: 4px 12px; cursor: pointer; white-space: nowrap;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-sm, 8px);
  color: var(--text-3); font-size: var(--fs-xs, 12px); transition: all var(--t-fast);
}
.insp-cat:hover { color: var(--text); border-color: var(--border-strong); }
.insp-cat.active { border-color: var(--color-primary); color: var(--color-primary); background: var(--grad-primary-soft, rgba(0, 212, 181, .1)); }
.insp-cats-sel { padding: 4px 10px; font-size: var(--fs-xs, 12px); color: var(--text-4, var(--text-3)); }

/* 瀑布流网格 */
/* ★ r369f 弃用 CSS 多列瀑布流（columns）换 Grid：
   ① 作品少时多列平衡算法会把卡片拆进不相邻的列 → 中间空出一大条；
   ② 多列布局重绘 bug 连环（hover 消失 / 点击出黑色残影条）。
   Grid 网格 + align-items:start，卡片高度随内容、永不互拉。 */
.insp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; align-items: start; }

.insp-card {
  cursor: pointer; overflow: hidden;
  max-width: 100%;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg, 14px);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
/* ★ hover 禁用任何 transform：多列瀑布流里 Chromium 会重绘失效导致图片消失
   （r369d 试过 translateZ(0) 提层仍复发），只动描边/阴影最稳 */
.insp-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
/* ★ r369k 封面框统一 4:5 画幅：无论原图什么尺寸，卡片图框永远等高对齐（裁切显示） */
.insp-card-media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: rgba(255, 255, 255, .04);
}
.insp-card-media img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; }
.insp-card-badge {
  position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: var(--r-pill, 999px);
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; backdrop-filter: blur(4px);
}
.insp-card-nopic {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-4, var(--text-3)); font-size: var(--fs-xs, 12px); background: rgba(127, 127, 127, .1);
}
.insp-card-body { padding: 10px 12px 12px; }
.insp-card-title {
  font-size: var(--fs-sm, 13px); color: var(--text); line-height: 1.4; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.insp-card-meta { display: flex; align-items: center; gap: 10px; color: var(--text-4, var(--text-3)); font-size: 11px; }
.insp-card-author { max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp-card-stat { white-space: nowrap; }
/* ★ r480 卡片标签行：分类/语义标签已不上卡（信息由发布页 + 详情页承载，系统照旧识别）。
   这一行现在只可能放「模型标签」，所以：
   ① nowrap + overflow:hidden —— 模型名再长也不换行，永远只占一行；
   ② 固定 min-height —— 没有模型标签的卡片也照样占一行，同排卡片高度完全一致；
   ③ 子项 flex:none —— 不让 chip 被窄卡挤压变形。 */
.insp-card-tags {
  display: flex; gap: 4px; align-items: center;
  flex-wrap: nowrap; overflow: hidden;
  margin-top: 8px; min-height: 18px;
}
.insp-card-tags > .insp-tag { flex: none; }
.insp-tag {
  padding: 2px 7px; border-radius: var(--r-sm, 6px); font-size: 11px;
  background: rgba(127, 127, 127, .16); color: var(--text-3);
}
/* ★ r472 语义标签：与「分类」同形但换色 —— 分类是作者选的篮子，标签是画面内容，
   两者并排出现时要能一眼区分（分类灰 / 标签主色描边）。 */
.insp-tag-auto {
  background: var(--grad-primary-soft, rgba(0, 212, 181, .1));
  color: var(--color-primary);
}
/* 详情标签行（比卡片宽松，不截断） */
.insp-detail-tags { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0 2px; }

/* ★ r472 广场顶部「标签」chips 行：与分类 chips 并列，点选即按标签筛 */
.insp-tags-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; width: 100%; }
.insp-tags-lab { font-size: var(--fs-xs, 12px); color: var(--text-4, var(--text-3)); margin-right: 2px; }
.insp-tag-chip {
  padding: 3px 10px; cursor: pointer; white-space: nowrap;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-sm, 8px);
  color: var(--text-3); font-size: 11px; transition: all var(--t-fast);
}
.insp-tag-chip:hover { color: var(--text); border-color: var(--border-strong); }
.insp-tag-chip.active { border-color: var(--color-primary); color: var(--color-primary); background: var(--grad-primary-soft, rgba(0, 212, 181, .1)); }

/* ★ r472 发布弹窗的标签行：已选标签 chips + 修改按钮 + 展开的候选标签池 */
.insp-pub-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.insp-pub-tags-view { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; min-width: 120px; }
.insp-pub-tags-pick {
  display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px;
  max-height: 120px; overflow-y: auto; width: 100%;
}
.insp-tag-pick {
  padding: 3px 10px; cursor: pointer; white-space: nowrap;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-sm, 8px);
  color: var(--text-3); font-size: 11px; transition: all var(--t-fast);
}
.insp-tag-pick.on { border-color: var(--color-primary); color: var(--color-primary); background: var(--grad-primary-soft, rgba(0, 212, 181, .1)); }

.insp-creator-bar {
  break-inside: avoid; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; grid-column: 1 / -1; margin-bottom: 14px; padding: 10px 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg, 14px);
  font-size: var(--fs-sm, 13px); color: var(--text-2);
}

.insp-empty, .insp-need-token {
  padding: 60px 20px; text-align: center; color: var(--text-3); font-size: var(--fs-sm, 13px);
}
.insp-need-token { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.insp-need-token-t { color: var(--text); font-size: var(--fs-base, 15px); font-weight: 600; }
.insp-need-token-d { max-width: 520px; color: var(--text-3); line-height: 1.6; }

.insp-foot { display: none; justify-content: center; margin-top: 22px; }
.insp-more {
  padding: 9px 26px; cursor: pointer; font-size: var(--fs-sm, 13px);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-pill, 999px);
  color: var(--text-2); transition: all var(--t-fast);
}
.insp-more:hover { border-color: var(--color-primary); color: var(--color-primary); }
.insp-foot-msg { color: var(--text-3); font-size: var(--fs-sm, 13px); }
.insp-loading { padding: 40px; text-align: center; color: var(--text-3); font-size: var(--fs-sm, 13px); }

/* ---------- 详情弹层 ---------- */
.insp-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; }
.insp-modal[hidden] { display: none; }
.insp-modal-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px); }
.insp-modal-box {
  position: relative; width: min(1080px, 92vw); max-height: 88vh; overflow: auto;
  box-sizing: border-box;
  background: var(--bg-pop, var(--bg-card)); border: 1px solid var(--border);
  border-radius: var(--r-xl, 18px); box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.insp-modal-x {
  position: absolute; right: 12px; top: 10px; z-index: 2;
  width: 30px; height: 30px; min-height: 0; max-height: 30px; flex: 0 0 auto;
  box-sizing: border-box; padding: 0;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 18px; line-height: 1;
  /* r439：mobile.css 的 button{min-height:44px} 会把它撑成 30×44 的椭圆（与 r436 修的登录弹窗同病） */
}
.insp-modal-x:hover { background: rgba(0, 0, 0, .7); }

/* ★ r369g 详情 = 上游同款 viewer：几乎全屏弹出，左半媒体铺满，右侧 430px 信息栏内部滚动 */
.insp-detail { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 430px; }
.insp-detail-prev { position: relative; background: #05090b; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 0; }
.insp-detail-prev img, .insp-detail-prev video { display: block; width: 100%; height: 100%; object-fit: contain; }
.insp-detail-info {
  min-height: 0; overflow-y: auto; box-sizing: border-box;
  padding: 24px 24px 24px; display: flex; flex-direction: column; gap: 16px;
  border-left: 1px solid var(--border);
}
@media (max-width: 900px) {
  .insp-detail { grid-template-columns: 1fr; }
  .insp-modal-box.insp-viewer { height: 96vh; }
  .insp-detail-prev { height: 44vh; flex: none; }
  .insp-detail-info { border-left: none; }
}

.insp-modal-box.insp-viewer {
  width: min(1480px, 96vw); height: min(940px, 94vh); max-height: none;
  overflow: hidden; display: flex; flex-direction: column; padding: 0;
}
.insp-viewer .insp-modal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ★ r471：详情关闭键从「左上角 ‹ 灵感广场」改为「右上角圆形 ✕」（同一动作：关闭详情回广场）。
   形状/描边/底色/热区全部复用全站统一的 .modal-close —— r467 定下的那套值：
     32px 正圆 + 1px rgba(255,255,255,.16) 描边 + rgba(255,255,255,.06) 底 + ::after inset:-6px（热区 44px）。
   这里只补两件事：
     ① 绝对定位到弹层【右上角】（原来的 insp-modal-x 是左上角，已不再用于 viewer）；
     ② 颜色提成纯白 —— 详情弹层底比普通弹窗更暗，--text-2 的浅灰对比不够。
   两点必须锁死，否则手机端会变形：
     · mobile.css 的 button{min-height:44px}（≤700px）会把圆钮撑成竖椭圆 → .modal-close 已含 min/max-height；
     · 手机端媒体区（.insp-detail-prev）也在弹层顶部，右上角另有「浮动赞」→ 由 mobile.css 把它左移让位。 */
.insp-viewer .insp-viewer-x {
  position: absolute; right: 14px; top: 14px; z-index: 3;
  color: #fff;
}
/* 长标题不许钻到 ✕ 底下：桌面端信息栏右内边距 24px、手机 14px，而 ✕ 占到距弹层右边 46px →
   标题右侧统一留 34px，任何宽度下都不会被压字。 */
.insp-viewer .insp-detail-title { padding-right: 34px; }

/* r424 手机端：下载角标隐藏（长按图片下载） */
@media (max-width: 700px) {
  .insp-dl-badge { display: none !important; }
}

/* r423 手机端：弹层整体上移，底边停在底部导航之上（内容不再被导航遮挡） */
@media (max-width: 700px) {
  .insp-modal { align-items: flex-start; padding: 10px 0 calc(72px + env(safe-area-inset-bottom, 0px)); }
  .insp-modal-box.insp-viewer { height: calc(100dvh - 96px - env(safe-area-inset-bottom, 0px)); max-height: none; }
  .insp-detail-prev { height: 38vh; }
}

.insp-detail-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.35; }
.insp-detail-author { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: var(--fs-sm, 13px); }
.insp-detail-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.insp-detail-time { color: var(--text-4, var(--text-3)); font-size: 11px; }

.insp-detail-tags { margin-top: 0; }

.insp-kv { display: flex; gap: 10px; font-size: var(--fs-sm, 13px); }
.insp-k { color: var(--text-4, var(--text-3)); min-width: 62px; }
.insp-v { color: var(--text); }

.insp-detail-params { display: flex; flex-direction: column; gap: 6px; }
.insp-param-list { display: flex; gap: 6px; flex-wrap: wrap; }
.insp-param {
  padding: 4px 10px; border-radius: var(--r-sm, 8px); font-size: 11px;
  background: rgba(127, 127, 127, .14); color: var(--text-2); font-family: var(--ff-mono, monospace);
}

.insp-prompt { display: flex; flex-direction: column; gap: 6px; }
.insp-prompt-text {
  padding: 12px 14px; max-height: 190px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  background: rgba(127, 127, 127, .08); border: 1px solid var(--border); border-radius: var(--r-md, 10px);
  color: var(--text-2); font-size: var(--fs-xs, 12px); line-height: 1.7;
}

.insp-detail-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.insp-btn {
  padding: 9px 18px; cursor: pointer; font-size: var(--fs-sm, 13px);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-pill, 999px);
  color: var(--text-2); transition: all var(--t-fast);
}
.insp-btn:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); }
.insp-btn:disabled { opacity: .6; cursor: default; }
.insp-btn.on { border-color: var(--color-primary); color: var(--color-primary); background: var(--grad-primary-soft, rgba(0, 212, 181, .1)); }
.insp-btn.primary {
  border-color: transparent; background: var(--grad-cta, var(--color-primary));
  color: #06110f; font-weight: 600;
}
.insp-btn.primary:hover:not(:disabled) { filter: brightness(1.08); color: #06110f; }

/* ================= r368 社区作品市场 =================
   本站用户上传 + 积分定价 + 下载分成。视觉沿用上面同一套变量，
   只新增：上传按钮 / 排序行 / 积分价角标 / 收益概览 / 上传弹层 / 管理按钮。 */

.insp-up-btn {
  height: 38px; padding: 0 18px; cursor: pointer;
  border: 1px solid var(--color-primary); border-radius: var(--r-pill, 999px);
  background: var(--grad-primary-soft, rgba(0, 212, 181, .1));
  color: var(--color-primary); font-weight: 600; font-size: var(--fs-sm, 13px);
  transition: filter var(--t-fast), transform var(--t-fast);
}
.insp-up-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }

.insp-sorts { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; flex-wrap: wrap; }
.insp-sort {
  padding: 5px 14px; cursor: pointer; font-size: var(--fs-xs, 12px);
  background: transparent; border: 1px solid var(--border); border-radius: var(--r-pill, 999px);
  color: var(--text-3); transition: all var(--t-fast);
}
.insp-sort:hover { color: var(--text); border-color: var(--border-strong); }
.insp-sort.active { border-color: var(--color-primary); color: var(--color-primary); background: var(--grad-primary-soft, rgba(0, 212, 181, .1)); }
.insp-mine-sum { margin-left: auto; color: var(--text-3); font-size: var(--fs-xs, 12px); }
.insp-mine-sum b { color: var(--color-primary); font-weight: 600; }

/* 卡片积分角标：右下角压在封面上的小胶囊 */
.insp-card-price {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  padding: 3px 9px; border-radius: var(--r-pill, 999px);
  background: rgba(6, 17, 15, .78); color: #fff; font-size: 11px; font-weight: 600;
  backdrop-filter: blur(4px);
}
.insp-card-price.free { background: rgba(0, 212, 181, .9); color: #06110f; }
.insp-card-media { position: relative; }

/* 我的上传：卡片右上角的管理条（改价 / 上下架 / 删除） */
.insp-card-manage {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; gap: 6px; padding: 6px;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent);
  opacity: 0; transition: opacity var(--t-fast);
}
.insp-card:hover .insp-card-manage { opacity: 1; }
.insp-card-mbtn {
  flex: 1; padding: 4px 0; cursor: pointer; font-size: 11px; text-align: center;
  background: rgba(255, 255, 255, .92); border: none; border-radius: 6px; color: #101010;
}
.insp-card-mbtn:hover { background: #fff; }
.insp-card-mbtn.danger { background: rgba(255, 92, 92, .92); color: #fff; }
.insp-card-off { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; letter-spacing: 1px; }

/* 上传弹层 */
.insp-up-box { max-width: 520px; }
.insp-up-title { margin: 0 0 14px; font-size: 16px; color: var(--text); }
.insp-up-drop {
  display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 18px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-md, 10px);
  background: rgba(127, 127, 127, .05); color: var(--text-3); font-size: var(--fs-sm, 13px);
  cursor: pointer; text-align: center; transition: all var(--t-fast);
}
.insp-up-drop:hover, .insp-up-drop.over { border-color: var(--color-primary); color: var(--color-primary); background: var(--grad-primary-soft, rgba(0, 212, 181, .08)); }
.insp-up-prev { display: none; margin: 10px 0 0; }
.insp-up-prev.on { display: block; }
.insp-up-prev img, .insp-up-prev video {
  width: 100%; max-height: 240px; object-fit: contain; border-radius: var(--r-md, 10px);
  background: rgba(0, 0, 0, .25);
}
.insp-up-prev .insp-up-meta { margin-top: 6px; color: var(--text-3); font-size: var(--fs-xs, 12px); }
.insp-up-row { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.insp-up-row > span { color: var(--text-3); font-size: var(--fs-xs, 12px); }
.insp-up-row input, .insp-up-row textarea {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px; background: var(--bg-input, rgba(255, 255, 255, .05));
  border: 1px solid var(--border); border-radius: var(--r-md, 10px);
  color: var(--text); font-size: var(--fs-sm, 13px); font-family: inherit; outline: none; resize: vertical;
}
.insp-up-row input:focus, .insp-up-row textarea:focus { border-color: var(--color-primary); }
.insp-up-row em { font-style: normal; color: var(--text-3); font-size: var(--fs-xs, 12px); }

/* ★ r374 自动分类行：默认只显示「系统识别：XX」，点「修改」才展开下拉 —— 不打扰，但必须可纠正 */
.insp-pub-cat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.insp-pub-cat-auto {
  padding: 6px 10px; border-radius: 999px;
  background: rgba(56, 189, 248, .12); border: 1px solid rgba(56, 189, 248, .32);
  color: var(--color-primary, #38bdf8); font-size: var(--fs-xs, 12px);
}
.insp-pub-cat-auto.muted {
  background: rgba(255, 255, 255, .05); border-color: var(--border); color: var(--text-3);
}
.insp-pub-cat-edit {
  border: none; background: none; padding: 0; font-family: inherit;
  color: var(--text-3); font-size: var(--fs-xs, 12px);
  text-decoration: underline; cursor: pointer;
}
.insp-pub-cat-edit:hover { color: var(--color-primary, #38bdf8); }
.insp-pub-cat-sel {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px; background: var(--bg-input, rgba(255, 255, 255, .05));
  border: 1px solid var(--border); border-radius: var(--r-md, 10px);
  color: var(--text); font-size: var(--fs-sm, 13px); font-family: inherit; outline: none;
}
.insp-pub-cat-sel:focus { border-color: var(--color-primary); }

.insp-up-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.insp-up-tip { flex: 1; color: var(--text-3); font-size: var(--fs-xs, 12px); }
.insp-up-tip.error { color: #ff6b6b; }

/* 详情底部操作条（r423：改为流内块不再 sticky，下载已移至图片右下角角标，彻底消除与文字重叠） */
.insp-dl-bar {
  margin: 4px -24px 0; padding: 4px 24px 0;
}
.insp-dl-mine-note { margin-top: 0; }
/* 图片右下角下载角标（r423） */
.insp-dl-badge {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .26); background: rgba(8, 14, 12, .62);
  color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: all var(--t-fast);
}
.insp-dl-badge:hover { background: rgba(8, 14, 12, .85); border-color: rgba(255, 255, 255, .5); }
.insp-dl-badge:disabled { opacity: .5; cursor: default; }
.insp-dl-badge:active { transform: scale(.92); }
.insp-dl-row { display: flex; align-items: center; gap: 10px; }

/* r424 图片全屏预览：点击放大，再点缩小 */
.insp-lightbox {
  position: fixed; inset: 0; z-index: 4000; cursor: zoom-out;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .93);
  -webkit-animation: inspLbIn .18s ease-out; animation: inspLbIn .18s ease-out;
}
/* r439：禁掉原生拖拽/文本选中 —— 否则桌面端按住图片拖一下就会拖出「幽灵图」，
   且浏览器永不派发 click，表现为「放大后关不掉」 */
.insp-lightbox img {
  display: block; max-width: 100vw; max-height: 100vh; object-fit: contain;
  -webkit-user-drag: none; user-drag: none;
  user-select: none; -webkit-user-select: none;
}
/* r439 显式关闭按钮：旧版只有「点一下任意处」这条唯一路径，拖一下就再也关不掉，界面上也没有可点的关闭入口 */
.insp-lb-x {
  position: absolute; right: 18px; top: 18px; z-index: 2;
  width: 42px; height: 42px; min-height: 0; max-height: 42px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; padding: 0; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .15s ease, transform .12s ease;
}
.insp-lb-x:hover { background: rgba(255, 255, 255, .28); }
.insp-lb-x:active { transform: scale(.94); }
.insp-lb-x svg { display: block; pointer-events: none; }
@media (max-width: 700px) {
  .insp-lb-x { right: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); }
}
@keyframes inspLbIn { from { opacity: 0; } to { opacity: 1; } }
.insp-dl-main { flex: 1; padding: 12px 18px; font-size: 14px; white-space: nowrap; }
.insp-dl-file { flex: none; }
.insp-dl-note { margin-top: 8px; color: var(--text-3); font-size: var(--fs-xs, 12px); }

/* ================= r369 社区版（对齐用户截图） ================= */

/* 卡片：参数行 / 作者行 / 点赞 / 模型标签 */
.insp-card-tuned { margin-top: 2px; color: var(--text-3); font-size: 11px; }
.insp-card-creator { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.insp-card-creator-l { display: flex; align-items: center; gap: 6px; cursor: pointer; min-width: 0; }
.insp-card-creator-l:hover .insp-card-author { color: var(--color-primary); }
.insp-card-author { color: var(--text-2, var(--text)); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp-ava {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #7c5cff, #00d4b5);
  color: #fff; font-size: 12px; font-weight: 700;
}
.insp-ava-lg { width: 52px; height: 52px; font-size: 24px; }
.insp-like {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
  padding: 2px 8px; border: none; background: transparent; border-radius: 999px;
  color: var(--text-3); font-size: 12px; transition: all var(--t-fast);
}
.insp-like:hover { color: #ff5c8a; background: rgba(255, 92, 138, .08); }
.insp-like.on { color: #ff5c8a; font-weight: 600; }
.insp-like-lg { font-size: 14px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; }

/* ================= r460 点赞：心形线性图标 + 点一下的心跳反馈 =================
   未赞 = 描边心（细线，克制）；已赞 = 填色心 + 一点粉光（一眼看出"我赞过"）。
   图标走 inline SVG（不依赖 Iconify 字体是否加载好），颜色统一继承 currentColor。 */
.insp-like-ico {
  display: block; flex: none; width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round;
  transition: transform var(--t-fast);
}
.insp-like.on .insp-like-ico { fill: currentColor; filter: drop-shadow(0 0 6px rgba(255, 92, 138, .45)); }
.insp-like-lg .insp-like-ico { width: 16px; height: 16px; }
.insp-like:hover .insp-like-ico { transform: scale(1.12); }
.insp-like-n { font-variant-numeric: tabular-nums; }   /* 数字变化时宽度不跳 */
@keyframes inspLikePop {
  0% { transform: scale(1); }
  38% { transform: scale(1.32); }
  68% { transform: scale(.93); }
  100% { transform: scale(1); }
}
.insp-like.pop .insp-like-ico { animation: inspLikePop .34s cubic-bezier(.34, 1.56, .64, 1); }
.insp-like-lg.on { border-color: rgba(255, 92, 138, .55); background: rgba(255, 92, 138, .08); }
/* 详情数据行里的点赞（与「👁 0 查看 · ⚡ 0 次使用」齐平的第三项，首屏可见） */
.insp-like-stat {
  padding: 0 3px; gap: 4px; font-size: 13px; border-radius: 6px;
  color: var(--text-3); font-weight: inherit;
}
.insp-like-stat.on { font-weight: 600; }
.insp-like-stat .insp-like-ico { width: 13px; height: 13px; }
.insp-like-stat:hover { background: rgba(255, 92, 138, .10); }

@media (max-width: 700px) {
  /* ★ 老坑（MEMORY 记过 N 次）：mobile.css 的 button{min-height:44px} 会把这种小胶囊
     直接撑成 44px 高的竖条椭圆，视觉上完全不像点赞。这里锁死高度，
     再用 ::after 把触摸热区外扩到 44px —— 好点又不撑版面。 */
  .insp-like { position: relative; min-height: 0; max-height: 28px; height: 28px; }
  .insp-like::after { content: ''; position: absolute; inset: -8px; border-radius: 999px; }
  .insp-like-lg { max-height: 40px; height: 40px; }
  .insp-like-lg::after { inset: -4px; }
}
.insp-tag-model { border-color: rgba(124, 92, 255, .45); color: #a78bfa; }

/* 作者主页头部（r369d：位于瀑布流上方，头像+信息一行，作品在其下） */
.insp-author-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.insp-author-head-info { flex: 1; min-width: 0; }
.insp-author-head-name { font-size: 16px; font-weight: 600; color: var(--text); }
.insp-author-head-sub { margin-top: 3px; color: var(--text-3); font-size: 12px; }
.insp-author-sub { margin: 6px 0 10px; color: var(--text-3); font-size: 12px; }
.insp-author-sub::before { content: ''; display: inline-block; width: 3px; height: 12px; margin-right: 6px; border-radius: 2px; background: var(--color-primary); vertical-align: -1px; }

/* 详情：作者卡 / 数据行 / 模型 chip / 锁定提示词 */
.insp-author-card {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: rgba(127, 127, 127, .05);
}
.insp-author-card .insp-ava { width: 36px; height: 36px; font-size: 16px; }
.insp-author-card-i { flex: 1; min-width: 0; }
.insp-author-card-n { font-weight: 600; color: var(--text); font-size: 14px; }
.insp-author-card-d { margin-top: 2px; color: var(--text-3); font-size: 12px; }
.insp-author-home {
  padding: 5px 14px; cursor: pointer; border-radius: 999px;
  border: 1px solid rgba(126, 232, 155, .55);
  background: rgba(126, 232, 155, .10); color: #8df09b;
  box-shadow: 0 0 14px rgba(126, 232, 155, .22), inset 0 0 8px rgba(126, 232, 155, .10);
  font-size: 12px; font-weight: 600; transition: filter var(--t-fast);
}
.insp-author-home:hover { filter: brightness(1.15); }
.insp-detail-stats { display: flex; align-items: center; gap: 8px; margin-top: -2px; color: var(--text-3); font-size: 13px; flex-wrap: wrap; }
.insp-detail-stat b { color: var(--text); font-weight: 600; }
.insp-detail-stat-sep { color: var(--text-4, var(--text-3)); opacity: .6; }
.insp-param-model { border-color: rgba(124, 92, 255, .5) !important; color: #a78bfa !important; background: rgba(124, 92, 255, .08); }

.insp-prompt { position: relative; }
.insp-prompt .insp-prompt-copy { margin-top: 8px; }
.insp-refline { margin-top: 8px; }
.insp-dim { opacity: .55; }

/* 信息栏小节（r369g）：✏ 提示词 / 🖼 参考图 / ≡ 生成参数 统一节头 */
.insp-sec { display: flex; flex-direction: column; gap: 8px; }
.insp-sec-k { color: var(--text-2, var(--text)); font-size: 13px; font-weight: 600; min-width: 0; }

/* 锁定提示词：模糊占位文字 + 居中锁蒙层（对齐上游截图） */
.insp-lock-wrap { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(124, 92, 255, .35); }
.insp-lock-bars { display: flex; flex-direction: column; gap: 11px; padding: 14px 16px; filter: blur(6px); opacity: .45; }
.insp-lock-bars i { display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(160, 170, 185, .8), rgba(160, 170, 185, .25)); }
.insp-lock-bars i:nth-child(2) { width: 82%; }
.insp-lock-bars i:nth-child(3) { width: 64%; }
.insp-lock-bars i:nth-child(4) { width: 90%; }
.insp-lock-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; text-align: center; padding: 12px;
  background: rgba(8, 12, 16, .45);
}
.insp-lock-ico {
  display: flex; align-items: center; justify-content: center; margin-bottom: 2px;
  width: 40px; height: 40px; border-radius: 50%; font-size: 18px;
  background: linear-gradient(135deg, #7c5cff, #5b3df0); color: #fff;
  box-shadow: 0 4px 14px rgba(124, 92, 255, .4);
}
.insp-lock-t { color: var(--text); font-size: 13px; font-weight: 600; }
.insp-lock-note { color: #ffb020; font-size: 12px; }

/* 锁定参考图：紫色锁缩略图 + 「解锁后随复刻自动填入」提示 */
.insp-ref-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.insp-ref-hint { color: var(--text-4, var(--text-3)); font-size: 11px; font-weight: 400; }
.insp-ref-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.insp-ref-lock {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 12px; font-size: 20px;
  background: linear-gradient(135deg, #8a6bff, #5b3df0); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.insp-dl-main {
  background: linear-gradient(135deg, #ffb020, #ff8a00) !important;
  color: #231a05 !important; border: none !important; font-weight: 700 !important;
}
.insp-dl-main:hover { filter: brightness(1.06); }

/* 发布弹窗（1:1 复刻截图） */
.insp-pub-box {
  width: min(760px, 94vw); max-width: 94vw; max-height: 88vh; overflow-y: auto;
  padding: 22px 28px 24px; box-sizing: border-box;
}
.insp-pub-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.insp-pub-notice {
  padding: 14px 16px; border: 1px solid rgba(255, 92, 92, .55); border-radius: 12px;
  background: rgba(255, 92, 92, .06);
}
.insp-pub-notice-t { color: #ff5c5c; font-weight: 700; font-size: 14px; }
.insp-pub-notice-sub { margin: 8px 0 6px; color: #ff7a7a; font-size: 12px; }
.insp-pub-notice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 4px 18px; }
.insp-pub-notice-i { color: var(--text-2, var(--text)); font-size: 12px; }
.insp-pub-notice-red {
  margin-top: 10px; padding: 9px 12px; border-radius: 8px; text-align: center;
  background: rgba(255, 92, 92, .14); color: #ff5c5c; font-weight: 700; font-size: 13px;
}
.insp-pub-notice-foot { margin-top: 8px; text-align: center; color: #ff9a9a; font-size: 12px; }
.insp-pub-prev { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.insp-pub-thumb {
  position: relative; width: 86px; height: 86px; border-radius: 10px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; opacity: .45; transition: all var(--t-fast);
}
.insp-pub-thumb.on { border-color: var(--color-primary); opacity: 1; }
.insp-pub-thumb input { position: absolute; left: 4px; top: 4px; z-index: 2; }
.insp-pub-thumb img { width: 100%; height: 100%; object-fit: cover; }
.insp-pub-price { position: relative; }
.insp-pub-price input { width: 100%; padding-right: 40px !important; }
.insp-pub-bolt { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #ffb020; font-size: 16px; }
.insp-up-row select {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px; background: var(--bg-input, rgba(255, 255, 255, .05));
  border: 1px solid var(--border); border-radius: var(--r-md, 10px);
  color: var(--text); font-size: var(--fs-sm, 13px); outline: none;
}
.insp-pub-gain {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(0, 160, 220, .3); background: rgba(0, 160, 220, .06);
}
.insp-pub-gain-t { color: #37b6ff; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.insp-pub-gain-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.insp-pub-gain-list li { color: var(--text-2, var(--text)); font-size: 12px; }
.insp-pub-gain-list b { color: #37b6ff; font-weight: 600; }
.insp-pub-gain-hot {
  margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: rgba(255, 176, 32, .1);
  color: #ffb020; font-size: 12px;
}