/* ============================================================
   anam 创作入口(紫罗兰系) — 输入区 + 筛选 + 白卡瀑布流。
   依赖 tokens.css。功能钩子: #prompt-input #prompt-submit
   .prompt-chip[data-prompt] .m-card[data-prompt] .reuse-btn
   ============================================================ */

.stage { max-width: 1240px; margin: 0 auto; padding: 140px 24px 96px; }

/* —— 输入区 —— */
.invoke { max-width: 720px; margin: 0 auto 56px; text-align: center; position: relative; }
.invoke .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; pointer-events: none; z-index: -1; }
.invoke .blob.b1 { width: 340px; height: 340px; background: var(--blob-violet); top: -120px; left: -160px; }
.invoke .blob.b2 { width: 300px; height: 300px; background: var(--blob-pink); top: -60px; right: -180px; }
.invoke h1 { font-size: 36px; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 10px; }
.invoke h1 .accent { color: var(--violet-600); }
.invoke .sub { color: var(--ink-600); font-size: 15.5px; margin-bottom: 30px; }

.prompt-box {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 999px;
  padding: 10px 10px 10px 24px;
  box-shadow: 0 16px 40px rgba(76, 54, 160, 0.14);
  transition: box-shadow 0.2s var(--ease-out);
  text-align: left;
}
.prompt-box:focus-within { box-shadow: 0 20px 48px rgba(76, 54, 160, 0.22), 0 0 0 3px var(--violet-100); }
.prompt-box input {
  flex: 1; border: 0; outline: none; background: none;
  font: inherit; font-size: 15.5px; color: var(--ink-900);
  min-width: 0;
}
.prompt-box input::placeholder { color: var(--ink-400); }
.prompt-box .send-btn {
  flex: none; width: 48px; height: 48px;
  border: 0; border-radius: 999px;
  background: var(--grad-violet); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 18px rgba(109, 74, 255, 0.4);
  transition: transform 0.2s var(--ease-out);
}
.prompt-box .send-btn:hover { transform: scale(1.06); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.prompt-chip {
  background: rgba(255, 255, 255, 0.72); border: 1px solid var(--ink-200);
  border-radius: 999px; padding: 7px 15px;
  font-size: 13px; font-weight: 600; color: var(--ink-600);
  transition: all 0.2s var(--ease-out);
}
.prompt-chip:hover { border-color: var(--violet-300); color: var(--violet-700); background: #fff; }

/* —— 筛选 —— */
.filters { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; gap: 16px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab {
  padding: 9px 18px; border-radius: 999px;
  background: transparent; border: 1.5px solid transparent;
  color: var(--ink-500); font-size: 14px; font-weight: 700;
  transition: all 0.2s var(--ease-out);
}
.tab:hover { color: var(--ink-800); }
.tab.active { background: #fff; color: var(--violet-700); box-shadow: var(--shadow-sm); }
.sort { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-500); font-size: 14px; font-weight: 700; background: none; border: 0; }
.sort:hover { color: var(--ink-800); }

/* —— 瀑布流(横向全屏铺满:跳出 .stage 的 1240px 限宽) —— */
.masonry { columns: 4 250px; column-gap: 18px; }
.masonry-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0 28px;
  box-sizing: border-box;
  columns: auto 290px;
}
.m-card {
  break-inside: avoid;
  margin-bottom: 18px;
  display: block;
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 24px; padding: 8px;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.m-card:hover { transform: translateY(-4px); box-shadow: 0 18px 42px rgba(76, 54, 160, 0.16); }
.m-card .art { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 17px; }
.m-card .art img,
.m-card .art video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-out); }
.m-card:hover .art img,
.m-card:hover .art video { transform: scale(1.04); }
.m-card .video-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(10, 10, 18, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.r34 { aspect-ratio: 3/4; } .r11 { aspect-ratio: 1/1; }
.r45 { aspect-ratio: 4/5; } .r169 { aspect-ratio: 16/9; }
.r35 { aspect-ratio: 3/5; }

/* hover 浮层:提示词 + 复用 */
.m-card .overlay {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px);
  border-radius: 18px; padding: 14px 16px;
  opacity: 0; transform: translateY(10px);
  transition: all 0.28s var(--ease-out);
}
.m-card:hover .overlay { opacity: 1; transform: translateY(0); }
.prompt-text {
  font-size: 12.5px; color: var(--ink-600); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 10px;
}
.overlay-row { display: flex; align-items: center; justify-content: space-between; }
.kind {
  padding: 3px 10px; border-radius: 999px;
  background: var(--violet-50); color: var(--violet-700);
  font-size: 11px; font-weight: 700;
}
.reuse-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--grad-violet); border: 0; color: #fff;
  font-size: 12.5px; font-weight: 700;
  box-shadow: 0 6px 14px rgba(109, 74, 255, 0.32);
  transition: transform 0.2s var(--ease-out);
}
.reuse-btn:hover { transform: scale(1.04); }

/* 底部信息条 */
.m-card .foot { display: flex; align-items: center; justify-content: space-between; padding: 11px 10px 5px; font-size: 12.5px; color: var(--ink-500); font-weight: 600; }
.m-card .foot .who { display: flex; align-items: center; gap: 8px; }
.avatar { width: 20px; height: 20px; border-radius: 50%; display: inline-block; background: linear-gradient(135deg, #9B6BFF, #F8C4DD); }
.m-card:nth-child(2n) .avatar { background: linear-gradient(135deg, #B8E8CD, #6D4AFF); }
.m-card:nth-child(3n) .avatar { background: linear-gradient(135deg, #FCE0AE, #7C5CFC); }

.load-more { text-align: center; margin-top: 40px; }

/* 媒体筛选(图片/视频)与无限加载哨兵 */
.media-tabs { flex: none; }
.load-sentinel { display: flex; justify-content: center; gap: 7px; padding: 34px 0 10px; }
.load-sentinel .dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--violet-300);
  animation: sentinelPulse 1.1s ease-in-out infinite;
}
.load-sentinel .dot:nth-child(2) { animation-delay: 0.15s; }
.load-sentinel .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes sentinelPulse { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

/* —— 作品详情弹层:大图 + 提示词 + 工作流 —— */
.detail-overlay {
  position: fixed; inset: 0; z-index: 180;
  display: grid; place-items: center; padding: 22px;
  background: rgba(26, 23, 38, 0.5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none; transition: opacity 160ms ease;
}
.detail-overlay.open { opacity: 1; pointer-events: auto; }
.detail-lock { overflow: hidden; }

.detail-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr);
  width: min(940px, 94vw); max-height: 86vh; overflow: hidden;
  border-radius: 26px; background: #fff;
  box-shadow: 0 30px 90px rgba(47, 26, 122, 0.3);
  transform: translateY(8px) scale(0.985); transition: transform 180ms var(--ease-out, ease);
}
.detail-overlay.open .detail-card { transform: none; }

.detail-media { background: var(--ink-100); min-height: 320px; }
.detail-media img, .detail-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

.detail-info { padding: 26px 24px 22px; overflow-y: auto; }
.detail-info h3 { margin: 0 0 10px; font-size: 21px; font-weight: 900; letter-spacing: -0.02em; }
.detail-info h4 { margin: 18px 0 8px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; color: var(--ink-500); text-transform: uppercase; }
.detail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-chips span {
  padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--violet-700); background: var(--violet-50); border: 1px solid var(--violet-200);
}
.detail-prompt {
  margin: 0; padding: 12px 14px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.7; color: var(--ink-700);
  background: var(--ink-50); border: 1px solid var(--ink-200);
}
.detail-copy {
  margin-top: 8px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--violet-700);
  background: #fff; border: 1px solid var(--violet-200);
}
.detail-copy:hover { border-color: var(--violet-600); }
.detail-flow { margin: 0; padding-left: 20px; display: grid; gap: 7px; font-size: 13.5px; color: var(--ink-700); }
.detail-cta {
  width: 100%; margin-top: 20px; padding: 12px 16px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 14.5px; font-weight: 800; color: #fff; background: var(--violet-600);
  transition: background 140ms ease;
}
.detail-cta:hover { background: var(--violet-700); }
.detail-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--ink-200); border-radius: 999px;
  font-size: 17px; color: var(--ink-600); background: rgba(255, 255, 255, 0.92); cursor: pointer;
}
.detail-close:hover { color: var(--violet-700); border-color: var(--violet-300); }

@media (max-width: 760px) {
  .detail-card { grid-template-columns: 1fr; max-height: 90vh; overflow-y: auto; }
  .detail-media { min-height: 220px; max-height: 44vh; }
}

@media (max-width: 720px) {
  .nav-links { display: none; }
  .filters { flex-direction: column; align-items: flex-start; }
  .invoke h1 { font-size: 28px; }
}