/* ============ Promptory — 紫色主题 · 简约内容优先 ============ */
:root {
  --purple: #7c3aed;
  --purple-dark: #5b21b6;
  --purple-light: #a78bfa;
  --purple-50: #f5f3ff;
  --purple-100: #ede9fe;
  --purple-200: #ddd6fe;
  --ink: #1e1b2e;
  --ink-2: #4b4763;
  --ink-3: #8a87a0;
  --bg: #fbfaff;
  --card: #ffffff;
  --border: #ece9f5;
  --radius: 16px;
  --shadow: 0 1px 3px rgba(76, 29, 149, .06), 0 8px 24px rgba(76, 29, 149, .08);
  --shadow-hover: 0 4px 12px rgba(76, 29, 149, .12), 0 16px 40px rgba(76, 29, 149, .16);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--ink); line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------- 顶部导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 250, 255, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 8px; height: 64px;
}
.logo { display: flex; align-items: center; gap: 0; font-family: "Poppins", Arial, Helvetica, sans-serif; font-weight: 700; font-size: 23px; letter-spacing: -.8px; margin-right: 12px; flex-shrink: 0; }
.logo-name { display: inline-block; white-space: nowrap; }
.logo-mark {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: -.4px;
  box-shadow: 0 3px 10px rgba(124, 58, 237, .35);
}
.logo em { font-style: normal; color: var(--purple); }
.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav-links a, .nav-drop-btn {
  padding: 8px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  transition: all .18s; white-space: nowrap;
}
.nav-links a:hover, .nav-drop-btn:hover { color: var(--purple); background: var(--purple-50); }
.nav-links a.active { color: var(--purple-dark); background: var(--purple-50); }
.nav-links a.active:hover { color: var(--purple-dark); background: var(--purple-100); }
.nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-icon-link {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px;
  color: var(--ink-2); transition: background .18s, color .18s, transform .18s;
}
.nav-icon-link:hover { background: var(--purple-50); color: var(--purple); transform: translateY(-1px); }
.nav-icon-link:focus-visible { outline: 3px solid var(--purple-100); outline-offset: 1px; }
.nav-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--purple-50); border: 1px solid transparent; border-radius: 999px;
  padding: 8px 16px; width: 210px; transition: all .2s;
}
.nav-search:focus-within { background: #fff; border-color: var(--purple-light); box-shadow: 0 0 0 3px var(--purple-100); }
.nav-search input { border: none; outline: none; background: none; font-size: 14px; width: 100%; color: var(--ink); }
.nav-search svg { flex-shrink: 0; color: var(--ink-3); }

/* 下拉 */
.nav-drop { position: relative; }
.nav-drop-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-hover);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .18s;
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-drop-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; }
.nav-drop-menu a:hover { background: var(--purple-50); color: var(--purple); }
.nav-drop-menu .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--purple-light); }

/* 移动端菜单按钮 */
.nav-burger { display: none; padding: 8px; border-radius: 10px; color: var(--ink-2); }

/* ---------- 布局容器 ---------- */
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 24px; }

/* ---------- Tab 与筛选 ---------- */
.explore-head { padding: 28px 0 6px; }
.page-title { font-size: 28px; font-weight: 800; letter-spacing: -.5px; }
.page-desc { color: var(--ink-3); font-size: 15px; margin-top: 4px; max-width: 640px; }
.search-page { padding-bottom: 56px; }
.search-hero {
  margin-top: 38px; padding: 34px 0 10px;
}
.search-page .explore-head { padding: 0; text-align: center; }
.search-page .page-title { font-size: clamp(34px, 4.5vw, 52px); line-height: 1.08; letter-spacing: -1.5px; }
.search-page .page-desc { max-width: 620px; margin: 12px auto 0; font-size: 16px; line-height: 1.55; }
.search-page-form {
  width: min(820px, 100%); display: flex; align-items: center; gap: 12px;
  margin: 30px auto 0; padding: 8px 9px 8px 17px; background: #fff;
  border: 1px solid #ded8ec; border-radius: 18px; box-shadow: 0 12px 32px rgba(76,29,149,.1);
  transition: border-color .18s, box-shadow .18s;
}
.search-page-form:focus-within { border-color: var(--purple-light); box-shadow: 0 0 0 4px var(--purple-100), var(--shadow); }
.search-page-form svg { flex: 0 0 auto; color: var(--ink-3); }
.search-page-form input {
  min-width: 0; flex: 1; border: 0; outline: 0; background: transparent;
  color: var(--ink); font: inherit; font-size: 16px;
}
.search-page-form input::placeholder { color: var(--ink-3); }
.search-page-form .btn { flex: 0 0 auto; min-height: 44px; padding: 10px 22px; border-radius: 12px; }
.search-page .search-state { padding: 27px 0 0; }
.search-page:not(.has-query) .search-state { padding-top: 20px; }
.search-page:not(.has-query) .search-state-copy { display: none; }
.search-page .search-state h3 { margin: 12px 0 4px; }
.search-page .search-state p { margin-bottom: 15px; }
.search-suggestion-chips { justify-content: center; gap: 8px; }
.search-suggestion-chips .chip { padding: 8px 14px; background: rgba(255,255,255,.78); }
.search-page.has-query .search-hero {
  display: grid; grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.2fr);
  align-items: end; gap: 30px; margin-top: 26px; padding: 26px 0 10px;
}
.search-page.has-query .explore-head { text-align: left; }
.search-page.has-query .page-title { font-size: clamp(25px, 2.4vw, 34px); letter-spacing: -.8px; }
.search-page.has-query .page-desc { margin: 6px 0 0; font-size: 14px; }
.search-page.has-query .search-page-form { width: 100%; margin: 0; box-shadow: none; }
.search-page.has-query .search-state { grid-column: 1 / -1; padding: 26px 0 4px; border-top: 1px solid var(--border); }
.search-page.has-query #search-grid { padding-top: 28px; }
.search-load-more-wrap { display: flex; justify-content: center; padding: 28px 0 4px; }
.search-load-more-wrap .btn[hidden] { display: none; }
.eyebrow { display: inline-block; margin-bottom: 8px; color: var(--purple); font-size: 11px; font-weight: 850; letter-spacing: 1.1px; }
.eyebrow.light { color: rgba(255,255,255,.76); }
.home-seo-head { padding: 22px 0 2px; }
.home-seo-head .page-title { max-width: 760px; font-size: clamp(30px, 4vw, 42px); line-height: 1.08; letter-spacing: -1.2px; }
.home-seo-head .page-desc { max-width: 720px; margin-top: 7px; font-size: 15.5px; line-height: 1.5; }
.home-value { padding-top: 26px; padding-bottom: 0; }
.home-value h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1.14; letter-spacing: -.8px; font-weight: 820; }
.home-value p { max-width: 760px; margin-top: 7px; color: var(--ink-3); font-size: 15px; line-height: 1.55; }

/* ---------- 首页热门案例横向滑轨 ---------- */
.popular-showcase { padding: 22px 0 8px; overflow: hidden; }
.popular-case-rail {
  --popular-edge: max(24px, calc((100vw - 1440px) / 2 + 24px));
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(340px, 29vw, 430px); gap: 16px;
  overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scroll-padding-left: var(--popular-edge);
  padding: 0 var(--popular-edge) 10px;
  scrollbar-width: none; cursor: grab; user-select: none; -webkit-overflow-scrolling: touch;
}
.popular-case-rail::-webkit-scrollbar { display: none; }
.popular-case-rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.popular-case-rail:focus-visible { outline: 3px solid var(--purple-200); outline-offset: -3px; }
.popular-case {
  position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; scroll-snap-align: start;
  border-radius: 15px; background: #dedde3; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(30,27,46,.05);
}
.popular-case-image { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.popular-case-compare { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 100%; background: #1c1924; }
.popular-case-compare picture { display: block; width: 100%; height: 100%; min-width: 0; overflow: hidden; }
.card-compare picture { display: block; width: 100%; min-width: 0; overflow: hidden; }
.popular-case-compare img { width: 100%; height: 100%; object-fit: cover; min-width: 0; transition: transform .45s; }
.popular-case-compare picture:first-child img { border-right: 1px solid rgba(255,255,255,.7); }
.popular-case:hover .popular-case-image,
.popular-case:hover .popular-case-compare img { transform: scale(1.025); }
.popular-case-arrow {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  background: #fff; color: var(--purple); font-size: 23px; font-weight: 900; box-shadow: 0 5px 18px rgba(30,27,46,.26);
}
.popular-case-shade { position: absolute; z-index: 2; inset: 40% 0 0; background: linear-gradient(transparent, rgba(20,17,31,.82)); pointer-events: none; }
.popular-case-copy { position: absolute; z-index: 4; left: 16px; right: 16px; bottom: 15px; display: flex; align-items: center; gap: 9px; color: #fff; pointer-events: none; }
.popular-case-copy strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 1.25; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.popular-case-model { flex: none; padding: 4px 9px; border-radius: 999px; background: rgba(30,27,46,.66); backdrop-filter: blur(6px); font-size: 10.5px; font-weight: 750; }
.popular-case-model.s5 { background: rgba(124,58,237,.88); }
.home-explore .explore-prompts-head { padding-top: 10px; }
.filter-bar {
  position: sticky; top: 64px; z-index: 90;
  background: rgba(251, 250, 255, .9); backdrop-filter: blur(12px);
  padding: 10px 0 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.filter-spacer { flex: 1; }
.filter-select-label { display: flex; align-items: center; gap: 8px; }
.filter-select {
  min-width: 154px; padding: 8px 36px 8px 13px; border-radius: 999px; border: 1px solid var(--border);
  background: #fff; color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 650; outline: none; cursor: pointer;
}
.filter-select:focus { border-color: var(--purple-light); box-shadow: 0 0 0 3px var(--purple-100); }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip-label { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .6px; margin-right: 2px; }
.chip {
  padding: 7px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  background: #fff; border: 1px solid var(--border); color: var(--ink-2); transition: all .18s;
}
.chip:hover { border-color: var(--purple-light); color: var(--purple); }
.chip.active { background: var(--purple-50); border-color: var(--purple-200); color: var(--purple-dark); box-shadow: none; }
.chip-divider { width: 1px; height: 22px; background: var(--border); margin: 0 6px; }

/* ---------- 瀑布流 ---------- */
.masonry { columns: 5 240px; column-gap: 18px; padding: 22px 0 10px; }
.card {
  break-inside: avoid; margin-bottom: 18px; background: var(--card);
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
  transition: transform .22s, box-shadow .22s; position: relative; display: block;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.card-img-wrap { position: relative; overflow: hidden; background: var(--purple-100); }
.card-img-wrap img { width: 100%; height: auto; transition: transform .5s; }
.card:hover .card-img-wrap img { transform: scale(1.04); }
.card-compare { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; background: #eeeaf7; }
.card-compare img,
.card-compare .compare-before-image,
.card-compare .compare-after-image { position: static; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; background: #17151f; transition: none; }
.card:hover .card-compare img { transform: none; }
.card-compare picture:first-child .compare-before-image { border-right: 1px solid rgba(255,255,255,.8); }
.compare-arrow { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--purple); font-size: 20px; font-weight: 900; box-shadow: 0 4px 16px rgba(30,27,46,.24); }
.card-overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: flex-end; padding: 10px;
  background: linear-gradient(to bottom, rgba(30,27,46,.28), transparent 40%);
  opacity: 0; transition: opacity .2s;
}
.card:hover .card-overlay { opacity: 1; }
.card-model {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  font-size: 11px; font-weight: 700; color: #fff; padding: 4px 10px; border-radius: 999px;
  background: rgba(30,27,46,.55); backdrop-filter: blur(6px);
}
.card-model.s5 { background: rgba(124,58,237,.8); }
.card-body { padding: 12px 14px 14px; }
.card-title { font-size: 14.5px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.card-cat { font-size: 12px; color: var(--purple); font-weight: 600; background: var(--purple-50); padding: 3px 9px; border-radius: 999px; }
.card-actions { display: flex; gap: 2px; }
.icon-btn {
  width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3); transition: all .16s; position: relative;
}
.icon-btn:hover { background: var(--purple-50); color: var(--purple); }
.icon-btn.saved { color: var(--purple); }
.icon-btn.saved svg { fill: var(--purple); }
.overlay-actions { display: flex; gap: 6px; }
.overlay-actions .icon-btn { background: rgba(255,255,255,.92); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.overlay-actions .icon-btn:hover { background: #fff; color: var(--purple); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px;
  font-size: 14.5px; font-weight: 700; transition: all .18s; border: 1px solid transparent;
}
.btn-primary { background: var(--purple); color: #fff; box-shadow: 0 3px 12px rgba(124,58,237,.35); }
.btn-primary:hover { background: var(--purple-dark); transform: translateY(-1px); }
.btn-outline { background: #fff; border-color: var(--border); color: var(--ink-2); }
.btn-outline:hover { border-color: var(--purple-light); color: var(--purple); }
.btn-outline.saved { border-color: var(--purple); color: var(--purple); background: var(--purple-50); }

/* ---------- 详情页 ---------- */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 36px; padding: 32px 0; align-items: start; }
.detail-img { border-radius: 20px; overflow: hidden; border: 1px solid var(--border); position: sticky; top: 90px; background: var(--purple-50); }
.detail-img img { width: 100%; height: auto; max-height: calc(100vh - 190px); object-fit: contain; }
.detail-compare { position: relative; overflow: hidden; background: #191625; user-select: none; touch-action: pan-y; }
.detail-compare .detail-after { display: block; width: 100%; max-height: calc(100vh - 190px); object-fit: contain; }
.detail-before { position: absolute; z-index: 2; inset: 0; width: 100%; overflow: hidden; background: #191625; clip-path: inset(0 calc(100% - var(--compare)) 0 0); }
.detail-before img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.detail-compare-handle { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--compare); width: 3px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 0 1px rgba(30,27,46,.18); pointer-events: none; }
.detail-compare-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--purple); font-weight: 900; box-shadow: 0 4px 18px rgba(30,27,46,.28); }
.detail-compare-range { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }
.badge.generation-type { color: #fff; background: linear-gradient(135deg, #2563eb, var(--purple)); }
.detail-panel h1 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; line-height: 1.3; margin: 12px 0 16px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--purple-50); color: var(--purple-dark); }
.badge.model { background: var(--purple); color: #fff; }
.prompt-box {
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin: 20px 0;
  position: relative;
}
.prompt-box-label { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 8px; }
.prompt-text { font-size: 15px; line-height: 1.75; color: var(--ink); font-family: "SF Mono", Menlo, Consolas, monospace; white-space: pre-wrap; }
.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 8px; }
.detail-page [data-save-slug]:not(.detail-save-btn) { display: none !important; }
.meta-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.meta-table td { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.meta-table td:first-child { color: var(--ink-3); font-weight: 600; width: 130px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.tag { font-size: 12.5px; color: var(--ink-2); background: var(--purple-50); padding: 4px 12px; border-radius: 999px; }
.tag:hover { background: var(--purple-100); color: var(--purple); }

/* 面包屑 */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--ink-3); padding-top: 22px; }
.breadcrumb a:hover { color: var(--purple); }
.breadcrumb span::before { content: "/"; margin-right: 6px; color: var(--border); }

/* ---------- 区块标题 ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; padding: 34px 0 4px; }
.section-title { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.section-link { font-size: 13.5px; font-weight: 600; color: var(--purple); }
.section-link:hover { text-decoration: underline; }
.section-head.compact { padding-top: 16px; }
.explore-prompts-head { padding: 18px 0 0; }

/* ---------- SEO Collections ---------- */
.collection-pill-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px 0 2px; }
.collection-pill {
  display: flex; align-items: center; justify-content: flex-start; gap: 5px;
  min-height: 48px; padding: 9px 13px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.collection-pill:hover { transform: translateY(-2px); border-color: var(--purple-200); box-shadow: var(--shadow); }
.collection-pill b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; line-height: 1.3; }
.collection-pill span { flex: none; color: var(--purple); font-size: 12px; font-weight: 750; }
.collection-hero { max-width: 760px; padding: 34px 0 18px; }
.collection-hero h1 { font-size: clamp(32px, 4vw, 44px); line-height: 1.05; letter-spacing: -1.2px; }
.collection-hero p { margin-top: 10px; color: var(--ink-3); font-size: 15.5px; line-height: 1.65; }
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 10px 0 28px; }
.collection-card {
  display: block; padding: 22px; min-height: 220px; border: 1px solid var(--border); border-radius: 18px; background: #fff;
  box-shadow: 0 1px 0 rgba(40,30,80,.02); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.collection-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--purple-200); }
.collection-card h2 { margin: 14px 0 8px; font-size: 19px; line-height: 1.25; letter-spacing: -.3px; }
.collection-card p { color: var(--ink-3); font-size: 13.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.collection-count { display: inline-block; margin-top: 16px; color: var(--purple); font-size: 12.5px; font-weight: 750; }
.collection-detail-hero { max-width: 850px; padding: 30px 0 12px; }
.collection-detail-hero h1 { margin: 12px 0 8px; font-size: clamp(30px, 4vw, 42px); line-height: 1.08; letter-spacing: -1px; }
.collection-detail-hero p { max-width: 760px; color: var(--ink-3); font-size: 15.5px; line-height: 1.7; }
.collection-meta-row { display: flex; gap: 10px 18px; flex-wrap: wrap; padding: 8px 0 0; color: var(--ink-3); font-size: 12.5px; font-weight: 650; }
.trend-topic-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 4px; }
.collection-related { padding-bottom: 24px; }
.model-topic-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; position: relative; z-index: 2; }
.model-topic-links .chip { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.24); color: #fff; }
.model-topic-links .chip:hover { background: rgba(255,255,255,.23); color: #fff; border-color: rgba(255,255,255,.5); }
.model-hero-seo p { max-width: 740px; }

/* ---------- 模型专题页 Hero ---------- */
.model-hero {
  margin: 26px 0 16px; border-radius: 20px; padding: 32px 36px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(120deg, #4c1d95 0%, #6d28d9 45%, #8b5cf6 100%);
}
.model-hero::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
}
.model-hero .badge { background: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(4px); }
.model-hero h1 { font-size: 30px; font-weight: 900; letter-spacing: -1px; margin: 0 0 8px; }
.model-hero p { max-width: 760px; color: rgba(255,255,255,.85); font-size: 14.5px; }

/* ---------- 分类卡片 ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; padding: 20px 0 10px; }
.cat-card {
  border-radius: 18px; overflow: hidden; position: relative; height: 150px; display: flex; align-items: flex-end;
  color: #fff; border: 1px solid var(--border); transition: transform .2s, box-shadow .2s;
}
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(46,16,101,.75), transparent 65%); }
.cat-card-body { position: relative; z-index: 2; padding: 16px 18px; }
.cat-card-body b { font-size: 17px; font-weight: 800; display: block; }
.cat-card-body span { font-size: 12.5px; opacity: .85; }

/* ---------- 工具页 ---------- */
.tool-hero { text-align: center; padding: 52px 0 12px; }
.tool-hero .badge { margin: 0 auto; }
.tool-hero h1 { font-size: 34px; font-weight: 900; letter-spacing: -1px; margin: 14px 0 8px; }
.tool-hero h1 { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.tool-hero-no-badge h1 { margin-top: 0; }
.tool-hero h1 em { font-style: normal; color: var(--ink); }
.tool-free-label { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border: 1px solid #fed7aa; border-radius: 999px; background: #fff7ed; color: #c2410c; font-size: 11.5px; font-weight: 800; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.tool-hero p { color: var(--ink-3); max-width: 560px; margin: 0 auto; font-size: 15.5px; }
.tool-panel {
  max-width: 860px; margin: 30px auto 60px; background: #fff; border: 1px solid var(--border);
  border-radius: 22px; box-shadow: var(--shadow); padding: 32px;
}
.upload-zone {
  border: 2px dashed var(--purple-200); border-radius: 16px; padding: 44px 24px; text-align: center;
  background: var(--purple-50); transition: all .2s; cursor: pointer;
}
.upload-zone:hover, .upload-zone.drag { border-color: var(--purple); background: var(--purple-100); }
.upload-zone svg { color: var(--purple); margin-bottom: 10px; }
.upload-zone b { display: block; font-size: 16px; }
.upload-zone span { font-size: 13px; color: var(--ink-3); }
.upload-preview {
  position: relative; display: none; align-items: center; justify-content: center;
  height: clamp(280px, 34vw, 380px); overflow: hidden; padding: 0 56px;
  border: 2px dashed var(--border); border-radius: 16px; background: var(--bg);
}
.upload-preview img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; border: 0; border-radius: 0; object-fit: contain; }
.upload-preview-remove {
  position: absolute; z-index: 2; top: 14px; right: 14px; width: 40px; height: 40px;
  display: grid; place-items: center; padding: 0; border: 1px solid var(--border);
  border-radius: 12px; background: rgba(255,255,255,.92); color: var(--ink-3);
  cursor: pointer; box-shadow: 0 3px 12px rgba(30,27,46,.06); transition: .18s;
}
.upload-preview-remove:hover { border-color: #cfc6dd; background: #fff; color: var(--ink); }
.upload-preview-remove:focus-visible { outline: 0; border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-100); }
.tool-seo { max-width: 860px; margin: -24px auto 72px; }
.tool-seo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tool-seo-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 24px; }
.tool-seo-card h2 { font-size: 21px; line-height: 1.25; margin-bottom: 10px; letter-spacing: -.35px; }
.tool-seo-card h3 { font-size: 16px; margin: 16px 0 7px; }
.tool-seo-card p, .tool-seo-card li { color: var(--ink-3); font-size: 14px; line-height: 1.72; }
.tool-seo-card ul, .tool-seo-card ol { margin: 8px 0 0 20px; }
.tool-seo-card.wide { grid-column: 1 / -1; }
.tool-seo-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tool-seo-links a { color: var(--purple); font-size: 13px; font-weight: 750; }
.tool-faq { max-width: 860px; margin: -28px auto 88px; padding: 32px 34px; background: #fff; border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 10px 28px rgba(42, 32, 76, .045); }
.tool-faq-head { margin-bottom: 24px; }
.tool-faq-head h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -.8px; margin: 0 0 8px; }
.tool-faq-head p { color: var(--ink-3); font-size: 13px; line-height: 1.65; margin: 0; }
.tool-faq-list { border-top: 1px solid var(--border); }
.tool-faq-item { border-bottom: 1px solid var(--border); }
.tool-faq-item summary { position: relative; list-style: none; cursor: pointer; padding: 21px 48px 21px 0; color: var(--ink); font-size: 15px; font-weight: 760; line-height: 1.45; }
.tool-faq-item summary::-webkit-details-marker { display: none; }
.tool-faq-item summary span { position: absolute; right: 4px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); }
.tool-faq-item summary span::before, .tool-faq-item summary span::after { content: ""; position: absolute; left: 5px; top: 10px; width: 12px; height: 2px; border-radius: 2px; background: var(--purple); transition: transform .2s ease; }
.tool-faq-item summary span::after { transform: rotate(90deg); }
.tool-faq-item[open] summary span::after { transform: rotate(0); }
.tool-faq-item > div { padding: 0 48px 21px 0; }
.tool-faq-item p { max-width: 760px; color: var(--ink-3); font-size: 13px; line-height: 1.75; margin: 0; }
.tool-faq-item summary:hover { color: var(--purple); }
.tool-faq-item summary:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; border-radius: 4px; }
.form-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0; }
.form-field { flex: 1; min-width: 180px; }
.form-field label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 7px; }
.form-field .form-hint { margin: 8px 2px 0; color: var(--ink-3); font-size: 12px; line-height: 1.5; }
.prompt-style-select { position: relative; }
.prompt-style-select-button { position: relative; width: 100%; min-height: 48px; padding: 10px 56px 10px 14px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.prompt-style-select-button:hover { background: #fff; border-color: #cfc6dd; }
.prompt-style-select.open .prompt-style-select-button { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-100); background: #fff; }
.prompt-style-select-button i { position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-68%) rotate(45deg); transition: transform .18s ease; }
.prompt-style-select.open .prompt-style-select-button i { transform: translateY(-28%) rotate(225deg); }
.prompt-style-select-menu { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; padding: 7px; border: 1px solid #ded7e8; border-radius: 13px; background: #fff; box-shadow: 0 16px 38px rgba(43,32,64,.16); }
.prompt-style-select-menu[hidden] { display: none !important; }
.prompt-style-select-menu button { position: relative; display: block; width: 100%; padding: 11px 38px 11px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.prompt-style-select-menu button:hover { background: #f7f3ff; }
.prompt-style-select-menu button.selected { color: var(--purple); background: #f4efff; font-weight: 750; }
.prompt-style-select-menu button.selected::after { content: "✓"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--purple); font-weight: 900; }
.form-field input[type="text"], .form-field textarea, .form-field select {
  width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; font-size: 14.5px;
  font-family: inherit; outline: none; transition: all .18s; background: var(--bg); color: var(--ink);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-100); background: #fff; }
.form-field textarea { resize: vertical; min-height: 96px; }
.tool-result { margin-top: 26px; display: none; }
.result-card { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.result-card-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--purple-50); }
.result-card-head b { font-size: 14px; color: var(--purple-dark); }
.result-card-body { padding: 16px; font-size: 14px; font-family: "SF Mono", Menlo, Consolas, monospace; line-height: 1.7; white-space: pre-wrap; color: var(--ink); }
.tool-error { display: none; margin-top: 16px; padding: 13px 18px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 14px; }
.enhance-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
.api-status { min-height: 22px; margin: -7px 0 14px; color: #b45309; font-size: 12.5px; font-weight: 650; }
.api-status.ready { color: #15803d; }
.mini-upload {
  min-height: 108px; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  border: 2px dashed var(--purple-200); border-radius: 14px; background: var(--purple-50);
  color: var(--ink-3); font-size: 13.5px; text-align: center; padding: 16px; transition: .18s;
}
.mini-upload:hover { border-color: var(--purple); background: var(--purple-100); }
.mini-upload img { display: none; max-height: 240px; max-width: 100%; border-radius: 10px; }
.text-btn { margin-top: 8px; color: var(--purple); font-size: 13px; font-weight: 700; }
.generated-image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.generated-image-card { overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--purple-50); }
.generated-image-card img { width: 100%; max-height: 680px; object-fit: contain; background: #18151f; cursor: zoom-in; }
.generated-image-card img:focus-visible { outline: 3px solid var(--purple-light); outline-offset: -3px; }
.generated-image-meta { padding: 10px 13px; color: var(--ink-3); font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.loading-dots::after { content: ""; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* ---------- AI 图片工作台 ---------- */
.studio-page { max-width: 1540px; margin: 0 auto; padding: 18px 24px 42px; }
.studio-app {
  min-height: min(860px, calc(100vh - 100px)); display: grid; grid-template-columns: 410px minmax(0, 1fr);
  overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 24px;
  box-shadow: 0 18px 55px rgba(47, 35, 76, .09);
}
.studio-compose {
  display: flex; flex-direction: column; gap: 18px; padding: 26px; border-right: 1px solid var(--border);
  background: rgba(255,255,255,.98);
}
.studio-compose-head .eyebrow { margin-bottom: 4px; }
.studio-compose-head h1 { font-size: 26px; line-height: 1.15; letter-spacing: -.7px; }
.studio-compose-head p { margin-top: 6px; color: var(--ink-3); font-size: 13.5px; line-height: 1.45; }
.studio-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; background: #f3f1f8; border-radius: 12px; }
.studio-mode-tabs button { padding: 9px 12px; border-radius: 9px; color: var(--ink-3); font-size: 13.5px; font-weight: 750; transition: .18s; }
.studio-mode-tabs button:hover { color: var(--purple); }
.studio-mode-tabs button.active { color: var(--purple-dark); background: #fff; box-shadow: 0 2px 9px rgba(48,34,79,.1); }
.studio-field-card { padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); transition: .18s; }
.studio-field-card:focus-within { border-color: var(--purple-light); box-shadow: 0 0 0 3px var(--purple-100); background: #fff; }
.studio-field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.studio-field-head label, .studio-section-label b { color: var(--ink-2); font-size: 13px; font-weight: 800; }
.studio-field-head span { color: var(--ink-3); font-size: 11px; }
.studio-field-card textarea { width: 100%; min-height: 148px; margin-top: 7px; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; line-height: 1.6; }
.studio-field-card textarea::placeholder { color: #aaa6b7; }
.studio-inspiration { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.studio-inspiration button { padding: 5px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--border); color: var(--ink-3); font-size: 11.5px; }
.studio-inspiration button:hover { color: var(--purple); border-color: var(--purple-200); background: var(--purple-50); }
.studio-reference-section[hidden] { display: none; }
.studio-section-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.studio-section-label span { color: var(--ink-3); font-size: 11.5px; }
.studio-reference-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.studio-reference-upload {
  aspect-ratio: 1 / 1; min-height: 0; display: grid; place-items: center; overflow: hidden; cursor: pointer; border: 1.5px dashed var(--purple-200);
  border-radius: 14px; background: var(--purple-50); color: var(--ink-3); transition: .18s;
}
.studio-reference-upload[hidden] { display: none; }
.studio-reference-upload:hover, .studio-reference-upload:focus, .studio-reference-upload.drag-over { border-color: var(--purple); background: var(--purple-100); outline: 0; }
.studio-upload-plus { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; }
.studio-upload-plus b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #fff; color: var(--purple); font-size: 20px; box-shadow: 0 3px 10px rgba(76,29,149,.1); }
.studio-reference-item { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 2px solid transparent; border-radius: 14px; background: #24202c; cursor: grab; transition: .16s; }
.studio-reference-item:first-child { border-color: var(--purple); }
.studio-reference-item.dragging { opacity: .4; cursor: grabbing; }
.studio-reference-item.drag-over { border-color: var(--purple-light); transform: scale(.97); }
.studio-reference-item.is-unused { opacity: .48; filter: grayscale(.45); }
.studio-reference-item img { width: 100%; height: 100%; object-fit: cover; }
.studio-reference-order { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 3px 7px; overflow: hidden; border-radius: 7px; background: rgba(24,20,31,.78); color: #fff; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; backdrop-filter: blur(5px); }
.studio-reference-item:first-child .studio-reference-order { background: var(--purple); }
.studio-reference-remove { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(24,20,31,.72); color: #fff; font-size: 18px; line-height: 1; opacity: 0; transition: .15s; }
.studio-reference-item:hover .studio-reference-remove, .studio-reference-remove:focus-visible { opacity: 1; }
.studio-reference-limit { margin-top: 7px; color: var(--ink-3); font-size: 11px; }
.studio-reference-limit.warning { color: #b45309; font-weight: 650; }
.studio-parameters { margin-top: 0; }
.studio-control-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(105px, .7fr); gap: 10px; }
.studio-control-row label { min-width: 0; }
.studio-control-row label > span { display: block; margin-bottom: 6px; color: var(--ink-3); font-size: 11.5px; font-weight: 700; }
.studio-control-row select { width: 100%; min-width: 0; padding: 11px 32px 11px 12px; border: 1px solid var(--border); border-radius: 11px; outline: 0; background: var(--bg); color: var(--ink); font: inherit; font-size: 13px; font-weight: 650; }
.studio-control-row select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-100); }
.studio-generate-btn { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 13px; background: linear-gradient(120deg, var(--purple), #9656f5); color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 8px 20px rgba(124,58,237,.24); transition: .18s; }
.studio-generate-btn:hover { transform: translateY(-1px); box-shadow: 0 11px 25px rgba(124,58,237,.32); }
.studio-generate-btn:disabled { cursor: wait; opacity: .7; transform: none; }
.studio-generate-btn > span { font-size: 17px; }
.studio-note { margin-top: -10px; text-align: center; color: var(--ink-3); font-size: 11.5px; }
.studio-error { margin-top: -4px; }
.studio-canvas { min-width: 0; display: flex; flex-direction: column; padding: 26px; background: radial-gradient(circle at 78% 7%, rgba(221,214,254,.45), transparent 27%), #f7f6fa; }
.studio-canvas-head { min-height: 45px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.studio-canvas-head h2 { font-size: 18px; letter-spacing: -.35px; }
.studio-canvas-head p { margin-top: 2px; color: var(--ink-3); font-size: 12.5px; }
.studio-clear-results { padding: 7px 11px; border-radius: 9px; color: var(--ink-3); background: rgba(255,255,255,.8); border: 1px solid var(--border); font-size: 12px; font-weight: 700; }
.studio-clear-results:hover { color: var(--purple); border-color: var(--purple-200); }
.studio-empty { flex: 1; min-height: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: 48px 20px; }
.studio-empty-art { position: relative; width: 108px; height: 88px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid #e5e1ed; border-radius: 22px; background: rgba(255,255,255,.76); box-shadow: 0 13px 36px rgba(55,43,81,.08); }
.studio-empty-art span { color: var(--purple); font-size: 30px; }
.studio-empty-art i { position: absolute; width: 18px; height: 18px; border-radius: 6px; background: var(--purple-100); transform: rotate(14deg); }
.studio-empty-art i:first-of-type { top: -9px; right: 9px; }
.studio-empty-art i:last-of-type { width: 11px; height: 11px; left: -5px; bottom: 15px; background: #ede7f7; }
.studio-empty h3 { font-size: 17px; }
.studio-empty p { max-width: 390px; margin-top: 5px; color: var(--ink-3); font-size: 13px; }
.studio-generating { flex: 1; display: grid; justify-items: center; align-content: center; min-height: 0; padding: 36px 20px 28px; text-align: center; }
.studio-generating[hidden] { display: none; }
.studio-generating-preview { width: min(340px, 68%, calc(100vh - 330px)); aspect-ratio: 1 / 1; display: grid; place-items: center; margin-bottom: 18px; overflow: hidden; border-radius: 20px; background: linear-gradient(105deg, #eeebf4 25%, #faf9fc 42%, #eeebf4 60%); background-size: 220% 100%; animation: studio-shimmer 1.6s linear infinite; }
.studio-generating-preview span { color: var(--purple); font-size: 30px; animation: studio-pulse 1.2s ease-in-out infinite; }
.studio-generating b { font-size: 15px; }
.studio-generating p { margin-top: 4px; color: var(--ink-3); font-size: 12.5px; }
@keyframes studio-shimmer { to { background-position: -220% 0; } }
@keyframes studio-pulse { 50% { transform: scale(1.2) rotate(12deg); opacity: .6; } }
.studio-results.tool-result { margin-top: 18px; }
.studio-results .generated-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.studio-results .generated-image-card { border-radius: 17px; background: #fff; box-shadow: 0 7px 22px rgba(44,32,69,.08); }
.studio-results .generated-image-card img { aspect-ratio: 1 / 1; max-height: none; object-fit: contain; }
.studio-results .generated-image-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; }
.generated-image-download { padding: 4px 2px; color: var(--purple); font: inherit; font-weight: 800; white-space: nowrap; transition: color .16s ease, opacity .16s ease; }
.generated-image-download:hover { color: var(--purple-dark); }
.generated-image-download:focus-visible { outline: 2px solid var(--purple-light); outline-offset: 3px; border-radius: 4px; }
.generated-image-download:disabled { cursor: wait; opacity: .58; }
.studio-image-lightbox[hidden] { display: none; }
.studio-image-lightbox {
  position: fixed; inset: 0; z-index: 10020; display: flex; align-items: center; justify-content: center;
  padding: 30px; background: rgba(20, 16, 29, .82); backdrop-filter: blur(10px); cursor: zoom-out;
}
.studio-image-lightbox-dialog { position: relative; max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; cursor: default; }
.studio-image-lightbox-dialog > img {
  display: block; max-width: calc(100vw - 60px); max-height: calc(100dvh - 60px); object-fit: contain;
  border-radius: 14px; background: #18151f; box-shadow: 0 24px 80px rgba(0,0,0,.38);
}
.studio-image-lightbox-close {
  position: absolute; top: 14px; right: 14px; z-index: 1; width: 44px; height: 44px; display: flex;
  align-items: center; justify-content: center; border-radius: 12px; background: rgba(255,255,255,.92);
  color: #282231; box-shadow: 0 5px 18px rgba(0,0,0,.18); backdrop-filter: blur(8px);
}
.studio-image-lightbox-close:hover { background: #fff; }
.studio-image-lightbox-close:focus-visible { outline: 3px solid var(--purple-light); outline-offset: 3px; }
body.studio-lightbox-open { overflow: hidden; }

@media (max-width: 700px) {
  .studio-image-lightbox { padding: 12px; }
  .studio-image-lightbox-dialog > img { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 10px; }
  .studio-image-lightbox-close { top: 10px; right: 10px; width: 40px; height: 40px; }
}

/* ---------- 顶部加载进度条 ---------- */
.top-progress {
  position: fixed; top: 0; left: 0; z-index: 9999; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--purple), var(--purple-light));
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 10px rgba(124, 58, 237, .55);
  transition: width .3s ease, opacity .35s ease;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: #fff; padding: 12px 24px; border-radius: 999px; font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-hover); z-index: 999; transition: transform .3s cubic-bezier(.2,.9,.3,1.2); display: flex; gap: 8px; align-items: center;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--purple-light); }

/* ---------- 空状态 ---------- */
.empty-state { text-align: center; padding: 70px 20px; }
.empty-state .emoji { font-size: 44px; }
.empty-state h3 { font-size: 19px; font-weight: 800; margin: 12px 0 6px; }
.empty-state p { color: var(--ink-3); font-size: 14.5px; margin-bottom: 22px; }

/* ---------- 分页 ---------- */
.pagination { display: flex; justify-content: center; gap: 8px; padding: 30px 0 50px; }
.pagination a, .pagination span {
  min-width: 40px; height: 40px; padding: 0 14px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; background: #fff; border: 1px solid var(--border); color: var(--ink-2);
}
.pagination a:hover { border-color: var(--purple); color: var(--purple); }
.pagination .cur { background: var(--purple); border-color: var(--purple); color: #fff; }
/* 无限滚动页的分页链接仅保留在 DOM 中供搜索引擎抓取，用户不可见 */
.seo-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ---------- 页脚 ---------- */
.footer { border-top: 1px solid var(--border); margin-top: 60px; background: #fff; }
.footer-inner { max-width: 1440px; margin: 0 auto; padding: 44px 24px 30px; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 30px; }
.footer h4 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-3); margin-bottom: 14px; }
.footer a { display: block; font-size: 14px; color: var(--ink-2); padding: 4px 0; }
.footer a:hover { color: var(--purple); }
.footer-brand p { font-size: 13.5px; color: var(--ink-3); margin-top: 10px; max-width: 300px; }
.footer-bottom { text-align: center; padding: 18px; font-size: 12.5px; color: var(--ink-3); border-top: 1px solid var(--border); }

/* ---------- 响应式 ---------- */
@media (max-width: 1000px) {
  .search-page.has-query .search-hero { display: block; }
  .search-page.has-query .search-page-form { margin-top: 18px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-img { position: static; }
  .studio-app { grid-template-columns: 360px minmax(0, 1fr); }
  .studio-compose, .studio-canvas { padding: 20px; }
  .studio-results .generated-image-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-pill-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; padding: 12px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-hover); }
  .nav-links.open { display: flex; }
  .nav-links a, .nav-drop-btn { padding: 12px 16px; }
  .nav-drop-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding: 0 0 0 16px; }
  .nav-burger { display: block; }
  .nav-right { gap: 5px; }
  .nav-icon-link { width: 36px; height: 36px; }
  .nav-search { width: 140px; }
  .masonry { columns: 2 150px; column-gap: 12px; }
  .card { margin-bottom: 12px; }
  .model-hero { padding: 36px 24px; }
  .model-hero h1 { font-size: 28px; }
  .tool-panel { padding: 22px; }
  .tool-seo { margin-top: -20px; }
  .tool-seo-grid { grid-template-columns: 1fr; }
  .tool-seo-card.wide { grid-column: auto; }
  .tool-faq { margin: -24px auto 64px; padding: 24px 20px; border-radius: 18px; }
  .tool-faq-head { margin-bottom: 16px; }
  .tool-faq-item summary { padding: 18px 40px 18px 0; font-size: 14px; }
  .tool-faq-item > div { padding: 0 40px 18px 0; }
  .studio-page { padding: 12px 12px 32px; }
  .studio-app { display: block; min-height: 0; overflow: visible; }
  .studio-compose { border-right: 0; border-bottom: 1px solid var(--border); }
  .studio-canvas { min-height: 520px; }
  .studio-empty, .studio-generating { min-height: 410px; }
  .studio-results .generated-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-reference-remove { opacity: 1; }
  .filter-bar { top: 64px; }
  .filter-spacer { display: none; }
  .filter-select-label { width: 100%; }
  .filter-select { flex: 1; }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-pill-row { grid-template-columns: 1fr; }
  .collection-pill { min-height: 46px; }
  .popular-showcase { padding-top: 14px; }
  .home-value { padding-top: 20px; }
  .home-value h1 { font-size: 26px; }
  .popular-case-rail { grid-auto-columns: min(82vw, 390px); gap: 12px; padding-left: 16px; padding-right: 16px; scroll-padding-left: 16px; }
  .popular-case-copy { left: 12px; right: 12px; bottom: 12px; }
  .popular-case-copy strong { font-size: 13.5px; }
  .popular-case-arrow { width: 38px; height: 38px; font-size: 20px; }
}

@media (max-width: 560px) {
  .search-page { padding-left: 14px; padding-right: 14px; }
  .search-hero, .search-page.has-query .search-hero { margin-top: 18px; padding: 28px 0 12px; }
  .search-page .page-title { font-size: 30px; letter-spacing: -.8px; }
  .search-page .page-desc { font-size: 14px; }
  .search-page-form { margin-top: 22px; padding-left: 14px; gap: 8px; }
  .search-page-form .btn { min-height: 42px; padding: 9px 14px; }
  .search-page .search-state { padding-top: 22px; }
  .search-suggestion-chips .chip { padding: 7px 11px; font-size: 12px; }
  .studio-compose, .studio-canvas { padding: 17px; }
  .studio-control-row, .studio-results .generated-image-grid { grid-template-columns: 1fr; }
  .studio-field-card textarea { min-height: 125px; }
  .upload-preview { height: 280px; padding: 0 44px; }
  .upload-preview-remove { top: 10px; right: 10px; width: 36px; height: 36px; }
}

/* Language switcher */
.lang-switch { position:relative; min-width:72px; white-space:nowrap; }
.lang-switch-button { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 9px 7px 11px; border:1px solid var(--border); border-radius:11px; outline:0; background:#fff; color:var(--purple); font:inherit; font-size:12px; font-weight:700; cursor:pointer; transition:border-color .18s, box-shadow .18s, background .18s; }
.lang-switch-button:hover { background:var(--purple-50); }
.lang-switch-button:focus-visible,
.lang-switch.open .lang-switch-button { border-color:var(--purple-light); box-shadow:0 0 0 3px var(--purple-100); }
.lang-switch-button svg { flex:0 0 auto; color:var(--ink-3); transition:transform .18s; }
.lang-switch.open .lang-switch-button svg { transform:rotate(180deg); }
.lang-switch-menu[hidden] { display:none; }
.lang-switch-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:140; min-width:112px; padding:6px; border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:0 12px 32px rgba(34,25,55,.16); }
.lang-switch-option { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:36px; padding:8px 10px; border-radius:8px; color:var(--ink-2); font-size:13px; font-weight:650; text-decoration:none; }
.lang-switch-option:hover,
.lang-switch-option:focus-visible { background:var(--purple-50); color:var(--purple); outline:0; }
.lang-switch-option.active { color:var(--purple); }
.lang-switch-check { font-size:14px; line-height:1; }
@media (max-width: 760px) {
  .lang-switch { min-width:68px; }
  .lang-switch-button { padding-left:9px; }
  .nav-search { display:none; }
}


/* --- Before / After layout fix v2: force true left-right comparison --- */
.popular-case-compare,
.card-compare {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
}

.popular-case-compare > picture,
.card-compare > picture {
  display: block !important;
  flex: 0 0 50%;
  width: 50%;
  min-width: 0;
  overflow: hidden;
}

.popular-case-compare > picture:first-of-type,
.card-compare > picture:first-of-type {
  order: 1;
}

.popular-case-compare > picture:nth-of-type(2),
.card-compare > picture:nth-of-type(2) {
  order: 2;
}

.popular-case-compare > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-compare > picture > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
}

.popular-case-arrow,
.compare-arrow {
  z-index: 5;
}


/* --- Custom filter dropdown: menu opens below the control instead of covering it --- */
.filter-select-label { overflow: visible; }
.custom-filter-select { position: relative; flex: none; min-width: 154px; }
.filter-select.customized-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.custom-filter-trigger {
  width: 100%; min-width: 154px; min-height: 38px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 8px 13px 8px 14px;
  border-radius: 999px; border: 1px solid var(--border);
  background: #fff; color: var(--ink-2); font: inherit;
  font-size: 13.5px; font-weight: 650; cursor: pointer;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.custom-filter-trigger:hover { border-color: var(--purple-light); }
.custom-filter-trigger:focus-visible,
.custom-filter-select.open .custom-filter-trigger {
  outline: none; border-color: var(--purple-light); box-shadow: 0 0 0 3px var(--purple-100);
}
.custom-filter-chevron {
  width: 9px; height: 9px; flex: none;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .16s ease;
  color: var(--ink-3);
}
.custom-filter-select.open .custom-filter-chevron { transform: rotate(225deg) translate(-1px, -1px); }
.custom-filter-menu {
  position: absolute; z-index: 180; top: calc(100% + 8px); left: 0;
  min-width: 100%; width: max-content; max-width: min(280px, calc(100vw - 32px));
  padding: 6px; border: 1px solid var(--border); border-radius: 16px;
  background: rgba(255,255,255,.98); box-shadow: 0 14px 34px rgba(30,27,46,.14);
  backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.985);
  transform-origin: top; pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.custom-filter-select.open .custom-filter-menu {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto;
}
.custom-filter-option {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border: 0; border-radius: 10px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 560;
  text-align: left; white-space: nowrap; cursor: pointer;
}
.custom-filter-option:hover,
.custom-filter-option:focus-visible { outline: none; background: var(--purple-50, #f5f0ff); color: var(--purple); }
.custom-filter-option[aria-selected="true"] { background: var(--purple-100); color: var(--purple); font-weight: 700; }
.custom-filter-option[aria-selected="true"]::before { content: "✓"; font-weight: 800; }
.custom-filter-option:not([aria-selected="true"])::before { content: ""; width: 10px; }

@media (max-width: 820px) {
  .custom-filter-select { flex: 1; min-width: 0; }
  .custom-filter-trigger { width: 100%; min-width: 0; }
  .custom-filter-menu { left: 0; right: auto; min-width: 100%; }
}

/* --- UI fix v5: remove dark hairline around comparison thumbnails --- */
.card-compare > picture {
  aspect-ratio: 3 / 4;
  background: transparent !important;
}

.card-compare > picture > img,
.card-compare .compare-before-image,
.card-compare .compare-after-image {
  display: block;
  width: 100%;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  background: transparent !important;
}

/* Keep only the intentional center divider, never a dark outer edge. */
.card-compare picture:first-child .compare-before-image {
  border-right: 1px solid rgba(255,255,255,.8);
}


/* --- UI fix v6: top popular showcase as explicit horizontal carousel --- */
.popular-showcase { position: relative; }
.popular-rail-controls {
  position: absolute; inset: 0 max(10px, calc((100vw - 1440px) / 2 + 8px)) auto max(10px, calc((100vw - 1440px) / 2 + 8px));
  height: 0; pointer-events: none; z-index: 6;
}
.popular-rail-btn {
  position: absolute; top: 145px; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(120, 103, 185, .18);
  background: rgba(255,255,255,.96); color: var(--ink-1); box-shadow: 0 8px 22px rgba(28,25,36,.12);
  font-size: 28px; line-height: 1; display: grid; place-items: center; pointer-events: auto; cursor: pointer;
}
.popular-rail-btn.prev { left: 6px; }
.popular-rail-btn.next { right: 6px; }
.popular-rail-btn:hover { background: #fff; }
.popular-rail-btn:disabled { opacity: 0; pointer-events: none; }
.popular-showcase:not(.has-popular-overflow) .popular-rail-controls { display: none; }
@media (max-width: 760px) {
  .popular-rail-controls { display: none; }
}

/* --- Collection page redesign: Prompt Discovery Hub --- */
.collection-index-page { padding-bottom: 36px; }
.collection-index-page .collection-hero { max-width: 820px; padding: 30px 0 10px; }
.collection-index-page .collection-hero h1 { max-width: 720px; }
.collection-index-page .collection-hero p { max-width: 700px; margin-top: 8px; }
.collection-quick-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.collection-quick-chip { min-height: 34px; padding: 7px 12px; background: #fff; }
.collection-hub-section { padding-top: 2px; }
.collection-index-section-head { padding-top: 24px; padding-bottom: 8px; }
.collection-index-section-head .section-title { font-size: 19px; }

.collection-featured-grid,
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.collection-featured-grid { padding: 0 0 8px; }
.collection-goal-grid { padding: 0 0 8px; }
.collection-card {
  min-height: 0; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 18px;
  display: flex; flex-direction: column; background: #fff;
  box-shadow: 0 1px 0 rgba(40,30,80,.02); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.collection-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--purple-200); }
.collection-card.featured { border-color: rgba(124,58,237,.16); }
.collection-cover {
  display: grid; grid-template-columns: 1.45fr .85fr; gap: 2px;
  height: 190px; background: #f0eef8; overflow: hidden;
}
.collection-card.featured .collection-cover { height: 222px; }
.collection-cover.single { display: block; }
.collection-cover-primary,
.collection-cover-stack { min-width: 0; min-height: 0; overflow: hidden; }
.collection-cover-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 2px; }
.collection-cover picture { display: block; width: 100%; height: 100%; overflow: hidden; }
.collection-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.collection-card:hover .collection-cover img { transform: scale(1.025); }
.collection-card-body { display: flex; flex-direction: column; flex: 1; padding: 17px 18px 18px; }
.collection-card-kicker { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.collection-card-kicker .badge { max-width: 68%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collection-card .collection-count { margin: 0; color: var(--ink-3); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.collection-card h2 { margin: 12px 0 7px; font-size: 19px; line-height: 1.25; letter-spacing: -.25px; }
.collection-card p { margin: 0; color: var(--ink-3); font-size: 13.25px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.collection-open { margin-top: auto; padding-top: 14px; color: var(--purple); font-size: 12.5px; font-weight: 780; }
.collection-open span { display: inline-block; transition: transform .18s ease; }
.collection-card:hover .collection-open span { transform: translateX(3px); }

.collection-guides-section { padding-top: 4px; }
.collection-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 10px; }
.collection-guide-card {
  min-height: 74px; display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  border: 1px solid var(--border); border-radius: 15px; background: #fff;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.collection-guide-card:hover { border-color: var(--purple-200); box-shadow: var(--shadow); transform: translateY(-1px); }
.collection-guide-card .badge { flex: none; }
.collection-guide-copy { min-width: 0; display: grid; gap: 3px; }
.collection-guide-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.3; }
.collection-guide-copy small { color: var(--ink-3); font-size: 11.5px; font-weight: 650; }
.collection-guide-arrow { margin-left: auto; flex: none; color: var(--purple); font-size: 18px; font-weight: 800; }

.collection-detail-page .collection-detail-hero { max-width: 930px; padding: 28px 0 10px; }
.collection-detail-page .collection-detail-hero h1 { margin-top: 11px; }
.collection-detail-page .collection-detail-hero p { max-width: 820px; }
.collection-detail-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 13px; color: var(--ink-3); font-size: 12.5px; font-weight: 650; }
.collection-detail-stats strong { color: var(--ink-1); }
.collection-context-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.collection-context-label { margin-right: 2px; color: var(--ink-3); font-size: 12px; font-weight: 750; }
.collection-context-chip { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.collection-prompts-head { align-items: center; padding-top: 18px; margin-bottom: 4px; border-top: 1px solid var(--border); }
.collection-section-note { color: var(--ink-3); font-size: 12px; font-weight: 650; }

@media (max-width: 1000px) {
  .collection-featured-grid,
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-card.featured .collection-cover,
  .collection-cover { height: 190px; }
}
@media (max-width: 820px) {
  .collection-index-page .collection-hero { padding-top: 26px; }
  .collection-featured-grid,
  .collection-grid { grid-template-columns: 1fr; gap: 14px; }
  .collection-guide-grid { grid-template-columns: 1fr; }
  .collection-card.featured .collection-cover,
  .collection-cover { height: min(56vw, 270px); }
  .collection-section-note { display: none; }
}
@media (max-width: 560px) {
  .collection-quick-links { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .collection-quick-links::-webkit-scrollbar { display: none; }
  .collection-quick-chip { flex: none; }
  .collection-card-body { padding: 15px 16px 17px; }
  .collection-card.featured .collection-cover,
  .collection-cover { height: 58vw; min-height: 185px; max-height: 255px; }
  .collection-guide-card { min-height: 68px; }
}



/* --- UI fix v8: remove prominent visual arrows --- */
.popular-case-arrow,
.compare-arrow,
.detail-compare-handle > span,
.popular-rail-controls,
.collection-guide-arrow,
.collection-open > span {
  display: none !important;
}

/* Keep the Before / After divider itself subtle; only remove the circular arrow handle. */
.detail-compare-handle {
  width: 1px !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: none !important;
}


/* --- UI fix v11: simplify list-card actions --- */
.card .card-actions { display: none !important; }
.card .overlay-actions [data-remix] { display: none !important; }


/* ================================================================
   V15 — Image skeleton / shimmer loading
   Only active while an image is still loading. Removed on load/error.
================================================================ */
.promptory-img-loading {
  background-color: #f1edfb !important;
  background-image: linear-gradient(
    100deg,
    rgba(241, 237, 251, 1) 0%,
    rgba(241, 237, 251, 1) 34%,
    rgba(255, 255, 255, .78) 48%,
    rgba(241, 237, 251, 1) 62%,
    rgba(241, 237, 251, 1) 100%
  ) !important;
  background-repeat: no-repeat !important;
  background-size: 220% 100% !important;
  animation: promptory-image-shimmer 1.25s ease-in-out infinite;
  opacity: .92;
}

.promptory-img-ready {
  animation: none !important;
  background-image: none !important;
  transition: opacity .22s ease;
  opacity: 1;
}

.promptory-img-error {
  animation: none !important;
  background-image: none !important;
  background-color: #f5f2fa !important;
  opacity: .58;
}

@keyframes promptory-image-shimmer {
  0% { background-position: 110% 0; }
  100% { background-position: -110% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .promptory-img-loading { animation: none; }
  .promptory-img-ready { transition: none; }
}


/* ================================================================
   V16 — Pinterest-style continuous feed loader
   提前加载下一批，底部 loader 只在实际补数据时显示。
================================================================ */
#feed-sentinel.pinterest-feed-sentinel {
  position: relative;
  width: 100%;
  height: 76px !important;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  clear: both;
  pointer-events: none;
}
#feed-sentinel .feed-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
#feed-sentinel.feed-loading .feed-loader {
  opacity: 1;
  transform: translateY(0);
}
#feed-sentinel .feed-loader i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--purple-light);
  animation: promptory-feed-dot 1s ease-in-out infinite;
}
#feed-sentinel .feed-loader i:nth-child(2) { animation-delay: .12s; }
#feed-sentinel .feed-loader i:nth-child(3) { animation-delay: .24s; }
@keyframes promptory-feed-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .42; }
  30% { transform: translateY(-5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #feed-sentinel .feed-loader i { animation: none; }
}


/* ================================================================
   V16.1 — Stable Pinterest masonry
   CSS multi-column layout rebalances when content is appended and can
   visually jump the viewport. Cards are now positioned by JS and keep
   their assigned column during normal scrolling.
================================================================ */
.masonry.feed-stable-masonry {
  position: relative;
  display: block !important;
  columns: auto !important;
  column-count: auto !important;
  column-gap: 0 !important;
  padding: 22px 0 10px;
  min-height: 1px;
  contain: layout style;
}
.masonry.feed-stable-masonry > .card {
  position: absolute;
  margin: 0 !important;
  break-inside: auto;
  will-change: left, top;
}
@media (max-width: 820px) {
  .masonry.feed-stable-masonry {
    columns: auto !important;
    column-gap: 0 !important;
  }
}

/* ================================================================
   V18 — Prompt detail split-view
   Desktop: fixed image pane + independently scrollable right pane.
   Prompt is collapsed to 4 lines by default; actions stay at panel bottom.
================================================================ */
@media (min-width: 961px) {
  .detail-page .detail-grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(460px, .94fr);
    gap: 38px;
    padding: 20px 0 28px;
    height: calc(100vh - 138px);
    min-height: 560px;
    align-items: stretch;
  }
  .detail-page .detail-img {
    position: sticky;
    top: 90px;
    height: 100%;
    max-height: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--purple-50);
  }
  .detail-page .detail-img > img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }
  .detail-page .detail-compare {
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .detail-page .detail-compare .detail-after,
  .detail-page .detail-before img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }
  .detail-page .detail-panel {
    position: sticky;
    top: 90px;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .detail-page .detail-panel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 0 8px 24px 0;
  }
  .detail-page .detail-panel-scroll::-webkit-scrollbar { width: 8px; }
  .detail-page .detail-panel-scroll::-webkit-scrollbar-thumb {
    background: var(--purple-100);
    border-radius: 999px;
  }
  .detail-page .detail-actions {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin: 0;
    padding: 12px 8px 2px 0;
    border-top: 1px solid var(--border);
    background: rgba(251,250,255,.96);
    backdrop-filter: blur(14px);
    z-index: 12;
  }
  .detail-page .detail-actions .btn { justify-content: center; }
}

.detail-page .prompt-box {
  margin: 18px 0 12px;
}
.detail-page .prompt-text.is-collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.detail-page .prompt-text.is-expanded {
  display: block;
  overflow: visible;
}
.detail-page .prompt-expand {
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--purple);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  padding: 8px 0 0;
  cursor: pointer;
}
.detail-page .prompt-expand.is-visible { display: inline-flex; }
.detail-page .prompt-expand:hover { text-decoration: underline; }

.detail-page .detail-related { margin-top: 8px; }
.detail-page .detail-related .section-head {
  padding: 18px 0 2px;
  align-items: center;
}
.detail-page .detail-related .section-title { font-size: 18px; }
.detail-page .detail-related .masonry {
  columns: 2 190px;
  column-gap: 12px;
  padding: 10px 0 4px;
}
.detail-page .detail-related .card { margin-bottom: 12px; }
.detail-page .detail-related .card-body { padding: 10px 11px 11px; }
.detail-page .detail-related .card-title { font-size: 13.5px; }
.detail-page .detail-related .card-cat { font-size: 11px; }
.detail-page .tag-row { margin-top: 12px; padding-bottom: 2px; }

@media (max-width: 960px) {
  .detail-page .detail-grid {
    height: auto;
    min-height: 0;
    padding-top: 22px;
  }
  .detail-page .detail-img {
    position: static;
    height: auto;
    max-height: none;
  }
  .detail-page .detail-img > img,
  .detail-page .detail-compare .detail-after {
    height: auto;
    max-height: none;
  }
  .detail-page .detail-panel {
    position: static;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .detail-page .detail-panel-scroll {
    overflow: visible;
    padding-right: 0;
  }
  .detail-page .detail-actions {
    position: sticky;
    bottom: 8px;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 16px 0 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 28px rgba(30,27,46,.12);
  }
  .detail-page .detail-actions .btn { justify-content: center; }
  .detail-page .detail-related .masonry { columns: 2 150px; }
}


/* ================================================================
   V19 — Jimeng-inspired detail actions
   Copy is tertiary. Primary actions are Create Similar / Use as Reference.
================================================================ */
.detail-page .detail-actions {
  align-items: center;
}
.detail-page .detail-primary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}
.detail-page .detail-copy-quiet {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  padding: 8px 6px;
  border-radius: 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.detail-page .detail-copy-quiet:hover {
  color: var(--ink-2);
  background: var(--purple-50);
}
.detail-page .detail-same-btn,
.detail-page .detail-reference-btn {
  min-height: 42px;
  padding-inline: 18px;
  white-space: nowrap;
}
.detail-page .detail-same-btn {
  min-width: 112px;
  box-shadow: 0 7px 20px rgba(124,58,237,.20);
}
.detail-page .detail-reference-btn {
  background: #fff;
  border-color: var(--purple-100);
  color: var(--ink);
}
.detail-page .detail-reference-btn:hover {
  border-color: var(--purple-light);
  background: var(--purple-50);
  color: var(--purple-dark);
}

@media (min-width: 961px) {
  .detail-page .detail-actions {
    grid-template-columns: auto minmax(0, 1fr);
    padding-top: 12px;
  }
}

@media (max-width: 960px) {
  .detail-page .detail-actions {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .detail-page .detail-primary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .detail-page .detail-same-btn,
  .detail-page .detail-reference-btn {
    min-width: 0;
    padding-inline: 12px;
  }
}

@media (max-width: 620px) {
  .detail-page .detail-actions {
    grid-template-columns: 1fr;
  }
  .detail-page .detail-copy-quiet {
    justify-self: end;
    order: 2;
  }
  .detail-page .detail-primary-actions {
    order: 1;
    width: 100%;
  }
}


/* ================================================================
   V20 — Immersive fullscreen prompt detail
   No site nav / breadcrumb / footer on detail pages.
   Left media fills the viewport; right panel is independently scrollable.
================================================================ */
body.detail-focus-body {
  margin: 0;
  min-height: 100dvh;
  overflow: hidden;
  background: #fbfaff;
}

.detail-focus-page {
  width: 100vw;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.detail-focus-page .detail-focus-grid {
  display: grid;
  grid-template-columns: minmax(0, 58%) minmax(420px, 42%);
  width: 100%;
  height: 100dvh;
  min-height: 0;
  gap: 0;
  padding: 0;
  align-items: stretch;
}

.detail-focus-page .detail-focus-media {
  position: relative;
  inset: auto;
  top: auto;
  height: 100dvh;
  min-height: 0;
  max-height: none;
  border: 0;
  border-radius: 0;
  background: #f5f3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 24px;
}

.detail-focus-page .detail-focus-media > picture {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.detail-focus-page .detail-focus-media > img,
.detail-focus-page .detail-focus-media > picture > img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 48px);
  object-fit: contain;
  object-position: center;
  border-radius: 14px;
}

.detail-focus-page .detail-focus-media .detail-compare {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
}

.detail-focus-page .detail-focus-media .detail-compare .detail-after,
.detail-focus-page .detail-focus-media .detail-before img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.detail-focus-page .detail-close {
  position: absolute;
  z-index: 30;
  top: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  display: block;
  border: 0;
  border-radius: 15px;
  background: rgba(238,238,240,.96);
  color: transparent;
  font-size: 0;
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: blur(10px);
  transition: background .16s ease, transform .16s ease;
}
.detail-focus-page .detail-close::before,
.detail-focus-page .detail-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 2px;
  border-radius: 999px;
  background: #17171b;
  transform-origin: center;
}
.detail-focus-page .detail-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.detail-focus-page .detail-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.detail-focus-page .detail-close:hover {
  background: #e4e4e7;
  transform: scale(1.03);
}
.detail-focus-page .detail-close:active {
  transform: scale(.97);
}

.detail-focus-page .detail-save-btn {
  position: absolute;
  z-index: 30;
  top: 88px;
  right: 24px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(92,82,122,.055);
  border-radius: 15px;
  background: #ebe8f3;
  color: #17171b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: none;
  transition: background .16s ease, transform .16s ease, color .16s ease;
}
.detail-focus-page .detail-save-btn svg { width: 22px; height: 22px; }
.detail-focus-page .detail-save-btn:hover { background: #e3dfed; transform: scale(1.03); }
.detail-focus-page .detail-save-btn:active { transform: scale(.97); }
.detail-focus-page .detail-save-btn.saved { color: var(--purple); background: #f3efff; }
.detail-focus-page .detail-save-btn.saved svg { fill: var(--purple); }

.detail-focus-page .detail-focus-panel {
  position: relative;
  top: auto;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: #fbfaff;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.detail-focus-page .detail-panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 34px 36px 116px;
}

.detail-focus-page .detail-panel-scroll::-webkit-scrollbar { width: 8px; }
.detail-focus-page .detail-panel-scroll::-webkit-scrollbar-thumb {
  background: var(--purple-100);
  border-radius: 999px;
}

/* Keep the semantic H1 for SEO/accessibility, but remove the visual title. */
.detail-focus-page .detail-seo-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.detail-focus-page .detail-focus-badges {
  margin: 0 0 18px;
  gap: 8px;
}

.detail-focus-page .prompt-box {
  margin: 0;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 1px 0 rgba(30,27,46,.02);
}

.detail-focus-page .prompt-box-label {
  margin-bottom: 10px;
}

.detail-focus-page .prompt-text {
  font-size: 14.5px;
  line-height: 1.78;
}

.detail-focus-page .detail-related {
  margin-top: 22px;
}

.detail-focus-page .detail-related .section-head {
  padding-top: 0;
}

.detail-focus-page .tag-row {
  padding-bottom: 18px;
}

/* True fixed footer inside the right panel. */
.detail-focus-page .detail-focus-actions {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 82px;
  margin: 0;
  padding: 14px 28px;
  border-top: 1px solid var(--border);
  background: rgba(251,250,255,.96);
  backdrop-filter: blur(18px);
  box-shadow: 0 -10px 28px rgba(30,27,46,.04);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.detail-focus-page .detail-primary-actions {
  justify-content: flex-end;
}

.detail-focus-page .detail-reference-btn,
.detail-focus-page .detail-same-btn {
  min-height: 46px;
  padding-inline: 22px;
}

.detail-focus-page .detail-copy-quiet {
  align-self: center;
  color: var(--ink-3);
}

/* Tablet/mobile: still immersive, but stack vertically and keep only close +
   bottom action bar. */
@media (max-width: 960px) {
  body.detail-focus-body {
    overflow: auto;
    padding-bottom: 82px;
  }
  .detail-focus-page {
    width: 100%;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  .detail-focus-page .detail-focus-grid {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
  }
  .detail-focus-page .detail-focus-media {
    position: relative;
    height: min(72dvh, 760px);
    min-height: 420px;
    padding: 16px;
  }
  .detail-focus-page .detail-focus-media > img,
  .detail-focus-page .detail-focus-media > picture > img {
    max-height: calc(min(72dvh, 760px) - 32px);
  }
  .detail-focus-page .detail-close {
    position: fixed;
    top: 14px;
    right: 14px;
  }
  .detail-focus-page .detail-save-btn {
    position: fixed;
    top: 76px;
    right: 14px;
  }
  .detail-focus-page .detail-focus-panel {
    position: static;
    height: auto;
    min-height: 0;
    overflow: visible;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .detail-focus-page .detail-panel-scroll {
    overflow: visible;
    padding: 24px 18px 38px;
  }
  .detail-focus-page .detail-focus-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 76px;
    padding: 10px 14px;
    border-radius: 0;
  }
}

@media (max-width: 620px) {
  .detail-focus-page .detail-focus-media {
    height: 60dvh;
    min-height: 360px;
  }
  .detail-focus-page .detail-focus-actions {
    grid-template-columns: 1fr;
    gap: 6px;
    min-height: 116px;
  }
  body.detail-focus-body {
    padding-bottom: 116px;
  }
  .detail-focus-page .detail-copy-quiet {
    display: none;
  }
  .detail-focus-page .detail-primary-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}


/* ================================================================
   V20.3 — Detail visual refinement
================================================================ */

/* 1) Metadata badges are supporting information, not primary CTAs. */
.detail-focus-page .detail-focus-badges .badge {
  min-height: 30px;
  padding: 5px 11px;
  background: rgba(124,58,237,.055);
  border: 1px solid rgba(124,58,237,.06);
  color: #6f6985;
  font-size: 12px;
  font-weight: 650;
  box-shadow: none;
}
.detail-focus-page .detail-focus-badges .badge.model,
.detail-focus-page .detail-focus-badges .badge.generation-type {
  background: rgba(124,58,237,.09);
  border-color: rgba(124,58,237,.08);
  color: #655a86;
}
.detail-focus-page .detail-focus-badges .badge:hover {
  background: rgba(124,58,237,.09);
  color: #514968;
}

/* Don't render empty metadata pills such as missing Style / Use Case. */
.detail-focus-page .detail-focus-badges .badge:empty {
  display: none !important;
}

/* 2) Close button: slightly deeper lavender than the media background. */
.detail-focus-page .detail-close {
  width: 46px;
  height: 46px;
  background: #ebe8f3;
  border: 1px solid rgba(92,82,122,.055);
  color: #201d28;
  border-radius: 15px;
  box-shadow: none;
  backdrop-filter: none;
  font-size: 30px;
  font-weight: 350;
}
.detail-focus-page .detail-close:hover {
  background: #e3dfed;
  color: #17151d;
  transform: none;
}

/* 3) "View all" is tertiary navigation, so keep it quiet gray. */
.detail-focus-page .detail-related .section-link {
  color: #8e899d;
  font-weight: 600;
}
.detail-focus-page .detail-related .section-link:hover {
  color: #686274;
  text-decoration: none;
}

/* 4) Copy prompt: clearer text, quieter visual hierarchy, cleaner icon. */
.detail-focus-page .detail-copy-quiet {
  color: #8e899d;
  font-size: 12.5px;
  font-weight: 650;
  gap: 7px;
  padding: 8px 8px;
}
.detail-focus-page .detail-copy-quiet:hover {
  color: #666071;
  background: rgba(124,58,237,.045);
}
.detail-focus-page .detail-copy-icon {
  flex: none;
  display: block;
}

/* Keep primary actions clearly stronger than copy/navigation. */
.detail-focus-page .detail-reference-btn {
  box-shadow: none;
}
.detail-focus-page .detail-same-btn {
  box-shadow: 0 6px 18px rgba(124,58,237,.16);
}


/* V20.3.1 — single close icon fix
   The X is drawn only by ::before/::after. Hide any literal button text. */
.detail-focus-page .detail-close {
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px;
  overflow: hidden;
}
.detail-focus-page .detail-close::before,
.detail-focus-page .detail-close::after {
  text-indent: 0;
}

/* ================================================================
   V21 — Trending Prompts hub
================================================================ */
.trending-prompts-page { padding-bottom: 42px; }
.trending-prompts-hero {
  max-width: 880px;
  padding: 38px 0 18px;
}
.trending-prompts-hero h1 {
  margin-top: 10px;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.02;
  letter-spacing: -1.8px;
}
.trending-prompts-hero p {
  max-width: 820px;
  margin-top: 14px;
  color: var(--ink-3);
  font-size: 16px;
  line-height: 1.72;
}
.trending-prompts-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.trending-prompts-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 650;
}
.trending-topics-strip {
  margin: 8px 0 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
}
.trend-topic-strip-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.trend-topic-strip-head > span {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-2);
}
.trend-topic-strip-head > small {
  color: var(--ink-3);
  font-size: 12px;
}
.trend-topic-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.trend-topic-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--purple-50);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 700;
  transition: background .16s ease, color .16s ease;
}
.trend-topic-chip small {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 750;
}
.trend-topic-chip:hover {
  background: var(--purple-100);
  color: var(--purple-dark);
}
.trending-section-head {
  padding-top: 28px;
  padding-bottom: 2px;
}
.trending-section-head > div > p {
  margin-top: 5px;
  color: var(--ink-3);
  font-size: 13px;
}
.legacy-redirect-page { min-height: 55vh; display: grid; align-items: center; }

@media (max-width: 720px) {
  .trending-prompts-hero { padding-top: 26px; }
  .trending-prompts-hero h1 { font-size: 38px; }
  .trend-topic-strip-head { display: block; }
  .trend-topic-strip-head > small { display: block; margin-top: 3px; }
}


/* ================================================================
   V22 — Trending Prompts as trend-article / blog index
================================================================ */
.trending-articles-page {
  padding-bottom: 54px;
}
.trending-articles-hero {
  max-width: 820px;
  padding-bottom: 26px;
}
.trending-articles-hero h1 {
  max-width: 760px;
}
.trend-article-section {
  padding: 8px 0 26px;
}
.trend-article-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.trend-article-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(30,27,46,.055);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.trend-article-card:hover {
  transform: translateY(-3px);
  border-color: var(--purple-100);
  box-shadow: 0 12px 30px rgba(30,27,46,.09);
}
.trend-article-cover-link {
  display: block;
  color: inherit;
}
.trend-article-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--purple-50);
}
.trend-cover-grid {
  display: grid;
  width: 100%;
  height: 100%;
  gap: 2px;
  background: #fff;
}
.trend-article-cover.count-1 .trend-cover-grid { grid-template-columns: 1fr; }
.trend-article-cover.count-2 .trend-cover-grid { grid-template-columns: repeat(2,1fr); }
.trend-article-cover.count-3 .trend-cover-grid,
.trend-article-cover.count-4 .trend-cover-grid { grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); }
.trend-article-cover.count-3 .trend-cover-grid img:first-child { grid-row: 1 / span 2; }
.trend-cover-grid img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  display: block;
}
.trend-cover-label {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(124,58,237,.92);
  color: #fff;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .35px;
  box-shadow: 0 4px 14px rgba(76,29,149,.18);
}
.trend-article-body {
  flex: 1 1 auto;
  padding: 22px 22px 18px;
}
.trend-article-body h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.32;
  letter-spacing: -.35px;
}
.trend-article-body h2 a {
  color: #3730a3;
  transition: color .15s ease;
}
.trend-article-card:hover .trend-article-body h2 a {
  color: var(--purple);
}
.trend-article-body p {
  margin: 12px 0 16px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trend-read-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--purple);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .25px;
}
.trend-article-meta {
  flex: 0 0 auto;
  padding: 13px 22px 15px;
  border-top: 1px solid var(--border);
  color: #aaa6b5;
  font-size: 12px;
}
.trend-article-detail-date {
  margin-top: 12px;
  color: var(--ink-3);
  font-size: 12.5px;
}
@media (max-width: 1180px) {
  .trend-article-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
}
@media (max-width: 820px) {
  .trend-article-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
  .trend-article-body { padding: 18px; }
  .trend-article-body h2 { font-size: 18px; }
}
@media (max-width: 540px) {
  .trend-article-grid { grid-template-columns: 1fr; }
  .trend-article-cover { aspect-ratio: 16 / 9; }
}

/* ================================================================
   V23 — Trending as an editable blog/article system
================================================================ */
.trending-blog-index { padding-bottom: 56px; }
.trending-blog-hero { max-width: 760px; padding: 34px 0 24px; }
.trending-blog-hero h1 { font-size: clamp(36px,5vw,54px); line-height:1.02; letter-spacing:-1.4px; margin:0 0 12px; }
.trending-blog-hero p { color:var(--ink-3); font-size:15.5px; line-height:1.7; max-width:720px; }
.trend-blog-section { padding: 8px 0 30px; }
.trend-blog-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; align-items:stretch; }
.trend-blog-card { min-width:0; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:#fff; display:flex; flex-direction:column; box-shadow:0 3px 14px rgba(31,24,58,.05); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.trend-blog-card:hover { transform:translateY(-3px); border-color:var(--purple-100); box-shadow:0 10px 26px rgba(31,24,58,.09); }
.trend-blog-card-cover { display:block; aspect-ratio:16/10; overflow:hidden; background:var(--purple-50); }
.trend-blog-card-cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.trend-blog-card:hover .trend-blog-card-cover img { transform:scale(1.02); }
.trend-blog-cover-empty { width:100%; height:100%; background:linear-gradient(135deg,var(--purple-50),#eeeaf8); }
.trend-blog-card-body { padding:22px 22px 18px; flex:1; display:flex; flex-direction:column; }
.trend-blog-card-body h2 { margin:0 0 12px; font-size:22px; line-height:1.28; letter-spacing:-.45px; }
.trend-blog-card-body h2 a { color:var(--ink); }
.trend-blog-card-body p { color:var(--ink-3); font-size:13.5px; line-height:1.65; margin:0 0 18px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.trend-blog-read-more { margin-top:auto; color:var(--purple); font-size:12.5px; font-weight:750; }
.trend-blog-card-meta { padding:12px 22px; border-top:1px solid var(--border); color:#aaa5b6; font-size:12.5px; }
.trend-blog-empty { grid-column:1/-1; padding:70px 20px; text-align:center; color:var(--ink-3); border:1px dashed var(--border); border-radius:16px; }

/* Normal readable blog article detail. */
.trend-blog-article-page { padding: 34px 24px 90px; }
.trend-blog-article { width:min(900px,100%); margin:0 auto; }
.trend-blog-breadcrumb { display:flex; align-items:center; gap:7px; color:var(--ink-3); font-size:12.5px; margin-bottom:28px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trend-blog-breadcrumb a:hover { color:var(--purple); }
.trend-blog-article-header { max-width:860px; margin:0 auto 28px; }
.trend-blog-article-header h1 { font-size:clamp(34px,5vw,56px); line-height:1.08; letter-spacing:-1.7px; margin:0 0 16px; }
.trend-blog-article-meta { color:#aaa5b6; font-size:13px; }
.trend-blog-hero-image { margin:30px auto 42px; border-radius:18px; overflow:hidden; background:var(--purple-50); }
.trend-blog-hero-image img { width:100%; max-height:620px; display:block; object-fit:cover; }
.trend-blog-prose { width:min(760px,100%); margin:0 auto; color:var(--ink); font-size:17px; line-height:1.85; }
.trend-blog-prose p { margin:0 0 24px; }
.trend-blog-prose h2 { margin:48px 0 18px; font-size:30px; line-height:1.2; letter-spacing:-.7px; }
.trend-blog-prose h3 { margin:36px 0 14px; font-size:23px; line-height:1.3; letter-spacing:-.4px; }
.trend-blog-prose strong { font-weight:800; }
.trend-blog-prose code { padding:2px 6px; border-radius:6px; background:var(--purple-50); font-family:Menlo,Consolas,monospace; font-size:.9em; }
.trend-blog-prose blockquote { margin:28px 0; padding:18px 22px; border-left:3px solid var(--purple-light); border-radius:0 12px 12px 0; background:var(--purple-50); color:var(--ink-2); }
.trend-blog-prose hr { border:0; border-top:1px solid var(--border); margin:42px 0; }
.trend-blog-figure { margin:34px -70px; }
.trend-blog-figure img { width:100%; max-height:720px; object-fit:contain; display:block; border-radius:14px; background:#faf9fd; }
.trend-blog-figure figcaption { margin-top:9px; color:var(--ink-3); text-align:center; font-size:12.5px; line-height:1.5; }

@media(max-width:1180px){.trend-blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:860px){.trend-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.trend-blog-figure{margin:28px 0}.trend-blog-article-page{padding-inline:18px}.trend-blog-article-header h1{font-size:38px}}
@media(max-width:580px){.trend-blog-grid{grid-template-columns:1fr}.trend-blog-card-body h2{font-size:20px}.trend-blog-prose{font-size:16px}.trend-blog-prose h2{font-size:26px}.trend-blog-article-header h1{font-size:32px}.trend-blog-hero-image{margin-top:20px}}

/* ================================================================
   V24 — Trending article editor styles + Recent Prompts sidebar
================================================================ */
.trend-blog-article-page {
  background: #f8f9fc;
}
.trend-blog-article-layout {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 900px) minmax(270px, 320px);
  gap: 40px;
  align-items: start;
}
.trend-blog-article-layout .trend-blog-article {
  width: 100%;
  margin: 0;
  min-width: 0;
  padding: 30px 36px 62px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #fff;
}
.trend-blog-article-layout .trend-blog-article-header,
.trend-blog-article-layout .trend-blog-prose {
  max-width: 760px;
}
.trend-blog-article-layout .trend-blog-hero-image {
  max-width: 820px;
}

/* Prompt callout inserted from the CMS toolbar. */
.trend-blog-prompt-block {
  margin: 28px 0;
  padding: 22px 24px 24px;
  border: 1px solid #dfe1ef;
  border-radius: 18px;
  background: #f8f8fd;
  box-shadow: 0 1px 0 rgba(31,24,58,.015);
}
.trend-blog-prompt-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
.trend-blog-prompt-label {
  margin-bottom: 0;
  color: #8c879c;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.trend-blog-prompt-copy { flex:none; border:1px solid #d4d0e5; border-radius:999px; background:#fff; color:var(--purple); padding:6px 10px; font:inherit; font-size:11.5px; font-weight:750; cursor:pointer; }
.trend-blog-prompt-copy:hover { border-color:var(--purple-light); background:var(--purple-50); }
.trend-blog-prompt-text {
  color: #252235;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.82;
  overflow-wrap: anywhere;
}
.trend-blog-prompt-explanation { margin:20px -4px -5px; padding:18px 4px 2px; border-top:1px solid #dedbea; }
.trend-blog-prompt-explanation-label { margin-bottom:8px; color:var(--purple); font-size:11.5px; font-weight:800; letter-spacing:.35px; text-transform:uppercase; }
.trend-blog-prompt-explanation-text { color:var(--ink-2); font-family:inherit; font-size:15.5px; line-height:1.75; }

.trend-blog-local-guide { max-width:820px; margin:30px 0 42px; padding:26px; border:1px solid #dedbea; border-radius:20px; background:linear-gradient(145deg,#fbfaff,#f6f4fc); }
.trend-blog-local-guide > h2 { margin:0 0 18px; font-size:23px; letter-spacing:-.35px; }
.trend-blog-local-guide-grid { display:grid; gap:18px; }
.trend-blog-local-guide-grid > div { padding:17px 18px; border:1px solid rgba(111,88,190,.13); border-radius:14px; background:rgba(255,255,255,.82); }
.trend-blog-local-guide-grid h3 { margin:0 0 8px; font-size:15px; }
.trend-blog-local-guide-grid p { margin:0; color:var(--ink-2); font-size:14.5px; line-height:1.7; }
.trend-blog-local-guide-grid ol { margin:0; padding-left:21px; color:var(--ink-2); font-size:14.5px; line-height:1.7; }
.trend-blog-local-guide-grid li + li { margin-top:6px; }
@media(max-width:580px){.trend-blog-local-guide{padding:18px}.trend-blog-prompt-block{padding:18px}.trend-blog-prompt-head{align-items:flex-start}.trend-blog-prompt-copy{white-space:nowrap}}

/* Recent 5 articles. */
.trend-blog-recent {
  min-width: 0;
  position: sticky;
  top: 92px;
}
.trend-blog-recent-card {
  padding: 20px 18px 16px;
  border: 1px solid #e4e5ed;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(31,24,58,.035);
}
.trend-blog-recent-card h2 {
  margin: 0 0 13px;
  color: var(--ink);
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: -.6px;
}
.trend-blog-recent-list {
  display: grid;
  gap: 0;
}
.trend-blog-recent-item {
  display: block;
  padding: 10px 0;
  border-top: 1px solid #ececf2;
}
.trend-blog-recent-item:first-child {
  padding-top: 0;
  border-top: 0;
}
.trend-blog-recent-item span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: #5b52d9;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.36;
}
.trend-blog-recent-item:hover span {
  color: var(--purple);
}
.trend-blog-recent-empty {
  color: var(--ink-3);
  font-size: 13px;
}

@media (max-width: 1060px) {
  .trend-blog-article-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
  }
  .trend-blog-article-layout .trend-blog-article {
    padding-inline: 26px;
  }
}
@media (max-width: 860px) {
  .trend-blog-article-layout {
    display: block;
  }
  .trend-blog-recent {
    position: static;
    margin-top: 24px;
  }
  .trend-blog-recent-card h2 {
    font-size: 22px;
  }
  .trend-blog-article-layout .trend-blog-article {
    padding: 24px 20px 44px;
  }
}

/* ================================================================
   V24.1 — Cleaner/smaller images inside Trending articles
================================================================ */
/* Inline images inserted in the article editor */
.trend-blog-figure {
  margin: 30px auto 34px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: center;
}
.trend-blog-figure img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: min(76%, 640px) !important;
  max-height: 680px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 10px;
}

/* Article cover image: no tinted backing panel; keep vertical covers compact. */
.trend-blog-article-layout .trend-blog-hero-image,
.trend-blog-hero-image {
  width: 100%;
  max-width: 760px !important;
  margin: 28px auto 38px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  text-align: center;
}
.trend-blog-hero-image img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: min(82%, 700px) !important;
  max-height: 720px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  background: transparent !important;
  border-radius: 10px;
}

@media (max-width: 860px) {
  .trend-blog-figure img,
  .trend-blog-hero-image img {
    max-width: min(90%, 680px) !important;
  }
}

@media (max-width: 580px) {
  .trend-blog-figure,
  .trend-blog-hero-image {
    margin: 24px auto 30px !important;
  }
  .trend-blog-figure img,
  .trend-blog-hero-image img {
    max-width: 100% !important;
    max-height: none !important;
    border-radius: 8px;
  }
}

/* V25 — AI Studio model status */
.studio-model-status{
  min-height:18px;
  margin-top:8px;
  color:var(--ink-3);
  font-size:11.5px;
  line-height:1.5;
}


/* V26.1 — AI Studio resolution selector */
@media (min-width: 901px) {
  .studio-control-row { grid-template-columns: minmax(0, 1.35fr) minmax(105px, .72fr) minmax(105px, .72fr); }
}


/* ================================================================
   V26.3 — Generation settings layout + custom dropdowns
================================================================ */
.studio-control-row.studio-control-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 10px;
  overflow: visible;
}
.studio-control-layout .studio-control {
  min-width: 0;
  position: relative;
  overflow: visible;
}
.studio-control-layout .studio-control-model {
  grid-column: 1 / -1;
}

/* The native select remains the data source for JS/API logic but is no longer
   the visible control. This avoids macOS native menus opening over the field. */
.studio-control-layout select.studio-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}
.studio-custom-select {
  position: relative;
  width: 100%;
  z-index: 1;
}
.studio-custom-select.open { z-index: 90; }
.studio-custom-select-trigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.studio-custom-select-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-custom-select-trigger svg { flex: none; transition: transform .16s ease; }
.studio-custom-select.open .studio-custom-select-trigger {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-100);
  background: #fff;
}
.studio-custom-select.open .studio-custom-select-trigger svg { transform: rotate(180deg); }
.studio-custom-select-trigger:disabled { cursor: default; opacity: .6; }
.studio-custom-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: none;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(38,28,64,.16);
  z-index: 100;
}
.studio-custom-select.open .studio-custom-select-menu { display: block; }
.studio-custom-select-option {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.studio-custom-select-option:hover { background: var(--purple-50); color: var(--purple-dark); }
.studio-custom-select-option.selected {
  background: var(--purple-50);
  color: var(--purple);
  font-weight: 750;
}
.studio-custom-select-option.selected::after {
  content: "✓";
  margin-left: auto;
  padding-left: 12px;
}
.studio-custom-select-option:disabled { opacity: .45; cursor: default; }

@media (max-width: 620px) {
  .studio-control-row.studio-control-layout { grid-template-columns: 1fr 1fr; }
}


/* ================================================================
   V26.7 — Stable Studio custom dropdowns
   Body-level portal: no layout stretch, no clipping, no native blue outline.
================================================================ */
.studio-control-row.studio-control-layout,
.studio-control-layout .studio-control,
.studio-parameters,
.studio-compose {
  overflow: visible !important;
}

.studio-custom-select {
  position: relative;
  width: 100%;
  z-index: 1;
}

.studio-custom-select-trigger {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
.studio-custom-select-trigger:focus,
.studio-custom-select-trigger:focus-visible {
  outline: none !important;
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 3px var(--purple-100) !important;
}
.studio-custom-select.open .studio-custom-select-trigger {
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 3px var(--purple-100) !important;
  background: #fff;
}

/* The menu lives under <body> while open, so it must not depend on .open ancestry. */
.studio-custom-select-menu.studio-select-portal {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 6px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 38px rgba(38,28,64,.18) !important;
  z-index: 2147483000 !important;
}
.studio-custom-select-menu.studio-select-portal::-webkit-scrollbar { width: 7px; }
.studio-custom-select-menu.studio-select-portal::-webkit-scrollbar-thumb {
  background: var(--purple-100);
  border-radius: 999px;
}

/* V26.9 - Popular rail keeps normal vertical page scrolling */
.popular-case-rail {
  touch-action: pan-x pan-y;
  overscroll-behavior-y: auto;
}