/* cat_vue site.css 快照 2026-08-21（49页/57模板版） */
/* ==========================================================================
   CA9 工艺资源网 · 多页面 Vue 重写版样式
   所有尺寸、颜色、间距均按原站（React 编译产物）真实渲染值还原。
   ========================================================================== */

:root {
  --brand: #ffc300;
  --brand-hover: #e6b000;
  --ink: #101010;
  --page: #fafafa;
  --page-alt: #f0f0f3;
  --line: #e5e7eb;
  --line-soft: #f3f4f6;
  --gray-900: #111827;
  --gray-800: #1f2937;
  --gray-700: #374151;
  --gray-600: #4b5563;
  --gray-500: #6b7280;
  --gray-400: #9ca3af;
  --gray-300: #d1d5db;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --gray-50: #f9fafb;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, .06);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, .12);
  --header-h: 144px;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif;
  color: var(--ink);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--page); color: var(--gray-900); font-size: 14px; }
body[data-page="home"] { background: #fff; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
[v-cloak] { display: none; }
.noscript { padding: 16px; margin: 0; background: #fff0c7; text-align: center; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.line-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.line-1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }

/* ==========================================================================
   顶部：公告条 + 主导航（滚动 60px 后整体浮动 fixed + 毛玻璃）
   ========================================================================== */
.site-header { position: relative; width: 100%; z-index: 50; transition: all .5s; }
.site-header.is-fixed { position: fixed; top: 0; left: 0; right: 0; }
.header-glass-top,
.header-glass-nav {
  position: absolute; left: 0; right: 0; opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.header-glass-top {
  top: 0; height: 40px;
  background-color: rgba(246, 246, 246, .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(16, 16, 16, .05);
}
.header-glass-nav {
  top: 40px; height: 104px;
  background-color: rgba(16, 16, 16, .78);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 2px solid var(--brand);
}
.site-header.is-fixed .header-glass-top,
.site-header.is-fixed .header-glass-nav { opacity: 1; }
.site-header.is-vip .header-glass-nav { background-color: rgba(255, 195, 0, .82); }
.header-inner { position: relative; z-index: 10; }
/* 浮动后用等高占位撑住文档流，正文不跳动 */
.header-spacer { height: 0; transition: none; }

/* 公告条 */
.notice-bar {
  height: 40px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; overflow: hidden;
  background-color: #f6f6f6;
  border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgba(16, 16, 16, .05);
  transition: background-color .5s;
}
.site-header.is-fixed .notice-bar { background: transparent; border-bottom-color: transparent; }
.notice-left { display: flex; align-items: center; flex: 1; min-width: 0; height: 100%; }
.notice-slogan {
  display: flex; align-items: center; max-width: 100%;
}
.notice-slogan img { display: block; height: 28px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.notice-right { display: flex; align-items: center; gap: 12px; flex: none; margin-left: 16px; }
.login-pill {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: var(--ink);
  background: var(--brand); box-shadow: var(--shadow-sm); transition: background-color .2s;
}
.login-pill:hover { background: var(--brand-hover); }
.notice-right > a,
.notice-right > button { display: flex; align-items: center; gap: 4px; font-size: 14px; color: #505050; transition: color .2s; }
.notice-right > a { font-weight: 600; }
.notice-right > a:hover, .notice-right > button:hover { color: var(--ink); }
.notice-right > .notice-logout .icon { width: 12px; height: 12px; }
.notice-right > .notice-logout:hover { color: #ef4444; }

/* 主导航 */
.primary-nav {
  height: 104px; display: flex; align-items: center; gap: 16px; padding: 0 16px;
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; line-height: 1.5;
  background-color: #101010;
  border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #ffc300;
  transition: background-color .5s;
}
.site-header.is-fixed .primary-nav { background: transparent; border-bottom-color: transparent; }
.site-header.is-vip .primary-nav { background-color: #ffc300; }
.nav-brand { flex: none; display: flex; align-items: center; }
.nav-brand img { height: 52px; width: auto; }
.nav-menu { display: flex; align-items: center; justify-content: flex-start; gap: 2px; flex: 1; padding-left: 8px; min-width: 0; }
.nav-menu a {
  position: relative; padding: 8px 10px; font-size: 21px; font-weight: 600;
  white-space: nowrap; color: #b8b8b8; transition: color .2s;
}
.nav-menu a.is-home, .nav-menu a.is-highlight { color: #ffc300; }
.nav-menu a:hover { color: #f6f6f6; }
.nav-menu a.is-home, .nav-menu a.is-highlight { color: var(--brand); font-weight: 700; }
.nav-menu a.is-highlight:hover { color: var(--brand-hover); }
.nav-menu a.active { color: #f6f6f6; font-weight: 700; }
.nav-menu a.active.is-home, .nav-menu a.active.is-highlight { color: var(--brand); }
.nav-menu a.active::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 24px; height: 2px; border-radius: 999px; background: var(--brand);
}
.site-header.is-vip .nav-menu a { color: var(--ink); }
.site-header.is-vip .nav-menu a:hover { color: #4a4a4a; }
.site-header.is-vip .nav-menu a.active::after { background: var(--ink); }

.header-search { flex: none; position: relative; width: 308px; }
@media (min-width: 1024px) { .header-search { width: 374px; } }
.header-search-box {
  display: flex; align-items: center; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(184, 184, 184, .4);
  background: rgba(246, 246, 246, .05); transition: box-shadow .2s, background-color .2s;
}
.header-search-box:hover { box-shadow: inset 0 0 0 1px rgba(255, 195, 0, .5); }
.header-search-box:focus-within { box-shadow: inset 0 0 0 2px var(--brand); background: rgba(246, 246, 246, .1); }
.header-search input {
  flex: 1; min-width: 0; padding: 10px 12px; border: 0; outline: none;
  font-size: 12.5px; color: #f6f6f6; background: transparent;
}
.header-search input::placeholder { color: #999; }
.header-search .imgsearch,
.header-search .dosearch { display: flex; align-items: center; padding: 10px 8px; color: #b8b8b8; transition: color .2s; }
.header-search .imgsearch { padding: 10px 4px 10px 8px; }
.header-search .dosearch { padding: 10px 16px; }
.header-search .imgsearch .icon { width: 15px; height: 15px; }
.header-search .dosearch .icon { width: 16px; height: 16px; }
.header-search .imgsearch:hover, .header-search .dosearch:hover { color: var(--brand); }
.site-header.is-vip .header-search input { color: #101010; }
.site-header.is-vip .header-search input::placeholder { color: #505050; }
.site-header.is-vip .header-search-box { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); background: rgba(255, 255, 255, .4); }

/* ==========================================================================
   自定义下拉（仿 CA9：dark=头部搜索范围 PrimaryNav；light=VIP 子页 ui/select.tsx Radix）
   ========================================================================== */
.dd-sel { position: relative; flex: none; }
.dd-trigger { display: flex; align-items: center; border: 0; background: transparent; cursor: pointer; white-space: nowrap; user-select: none; font-family: inherit; }
.dd-chevron { flex: none; }

/* dark —— CA9 PrimaryNav 搜索范围（深色弹层，chevron 展开旋转 180°） */
.dd-dark .dd-trigger {
  gap: 2px; padding: 10px 12px; font-size: 12.5px; font-weight: 500;
  color: var(--brand); border-right: 1px solid rgba(184, 184, 184, .2); transition: color .2s;
}
.dd-dark .dd-trigger:not(.sel) { color: #b8b8b8; }
.dd-dark .dd-trigger:not(.sel):hover { color: #f6f6f6; }
.dd-dark .dd-chevron { width: 13px; height: 13px; transition: transform .2s; }
.dd-dark .dd-trigger.open .dd-chevron { transform: rotate(180deg); }
.dd-dark .dd-pop {
  position: absolute; top: 100%; left: 0; margin-top: 8px; width: 100px; z-index: 9999;
  background: #1a1a1a; border: 1px solid #333; border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5); padding: 6px 0;
}
.dd-dark .dd-opt {
  display: block; width: 100%; padding: 6px 12px; border: 0; background: transparent;
  font-size: 13px; color: #b8b8b8; text-align: left; cursor: pointer; transition: background-color .15s, color .15s;
}
.dd-dark .dd-opt:hover { background: #333; }
.dd-dark .dd-opt.on { color: var(--brand); font-weight: 500; }
/* is-vip 浅色头部可读性（沿用原原生 select 的深色文字处理；弹层与 CA9 一致保持深色） */
.site-header.is-vip .dd-dark .dd-trigger:not(.sel) { color: #505050; }
.site-header.is-vip .dd-dark .dd-trigger:not(.sel):hover { color: #101010; }

/* light —— CA9 ui/select.tsx（Radix）：VIP 子页季节/专题/产品 */
.dd-light .dd-trigger {
  gap: 8px; justify-content: space-between; height: 36px; min-width: 140px; padding: 0 12px;
  font-size: 14px; color: #101010; background: #fff; border: 1px solid #e5e5e5; border-radius: 6px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); transition: border-color .2s, box-shadow .2s; outline: none;
}
.dd-light .dd-trigger:hover { border-color: var(--brand); }
.dd-light .dd-trigger:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 195, 0, .4); }
.dd-light .dd-chevron { width: 16px; height: 16px; opacity: .5; }
.dd-light .dd-pop {
  position: absolute; top: 100%; left: 0; min-width: 100%; margin-top: 4px; z-index: 50;
  max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid #e4e4e7; border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); padding: 4px;
}
.dd-light .dd-opt {
  position: relative; display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 32px 6px 8px; border: 0; border-radius: 4px; background: transparent;
  font-size: 14px; color: #101010; text-align: left; white-space: nowrap; cursor: pointer;
}
.dd-light .dd-opt:hover, .dd-light .dd-opt:focus-visible { background: #f4f4f5; outline: none; }
.dd-light .dd-check { position: absolute; right: 8px; width: 16px; height: 16px; }

@media (min-width: 768px) {
  .notice-bar, .primary-nav { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 1279px) {
  .nav-menu { display: none; }
  .header-search { flex: 1; width: auto; }
}
/* 1280-1599px 时完整导航与 374px 搜索框总宽度超过视口，右侧链接会被搜索框覆盖。
   保留全部入口但收紧字号/间距与搜索宽度，确保每个链接都有独立点击区域。 */
@media (min-width: 1280px) and (max-width: 1599px) {
  .primary-nav { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .nav-brand img { height: 44px; }
  .nav-menu { gap: 0; padding-left: 4px; }
  .nav-menu a { padding: 7px 6px; font-size: 16px; }
  .header-search { width: 300px; }
}

/* ==========================================================================
   首页
   ========================================================================== */
.home-hero { position: relative; width: 100%; background: #fff; }
.home-hero-viewport { position: relative; width: 100%; height: 55vh; overflow: hidden; }
.home-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.home-hero-slide.active { opacity: 1; }
.home-hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; background: rgba(0, 0, 0, .2); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background-color .2s;
}
.hero-arrow:hover { background: rgba(0, 0, 0, .4); }
.hero-arrow.prev { left: 16px; }
.hero-arrow.next { right: 16px; }
.hero-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 8px; }
.hero-dots button { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .5); transition: all .3s; }
.hero-dots button:hover { background: rgba(255, 255, 255, .7); }
.hero-dots button.active { width: 28px; background: var(--brand); }

.home-section, .home-section.first { padding: 24px 0; background: #fff; overflow: hidden; }
.home-shell { max-width: 1600px; margin: 0 auto; padding: 0 16px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.section-head-title { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.section-head-title h2 { font-size: 30px; font-weight: 700; color: var(--gray-900); letter-spacing: -.01em; }
.section-head-title p { color: var(--gray-500); font-size: 16px; }
@media (min-width: 768px) {
  .section-head-title h2 { font-size: 36px; }
  .section-head-title p { font-size: 18px; }
}
.section-stats { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.section-stats > div { display: flex; align-items: center; gap: 6px; color: var(--gray-600); font-size: 14px; }
@media (min-width: 768px) { .section-stats { gap: 32px; } .section-stats > div { font-size: 16px; } }
.section-stats .icon { width: 16px; height: 16px; color: var(--brand); }
.section-stats b { font-weight: 600; }
.section-stats span { color: var(--gray-400); }
.section-more {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500;
  color: var(--gray-600); background: var(--gray-100); transition: all .2s;
}
.section-more:hover { color: var(--brand); background: rgba(255, 195, 0, .1); }
.section-more .icon { width: 14px; height: 14px; }

.home-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 0 8px; }
.home-card { cursor: pointer; }
.home-card-inner {
  position: relative; border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: var(--shadow-card);
  transition: box-shadow .3s;
}
.home-card.big .home-card-inner { box-shadow: var(--shadow-card), 0 0 0 1px rgba(0, 0, 0, .05); }
.home-card:hover .home-card-inner { box-shadow: var(--shadow-card-hover); }
.home-card.big:hover .home-card-inner { box-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(0, 0, 0, .05); }
.home-card-media { position: relative; overflow: hidden; }
.home-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.home-card:hover .home-card-media img { transform: scale(1.05); }
.home-card-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .4), transparent); }
/* 卡片两档规格（与 CA9 一致：首个「前沿」区大规格，其余区小规格） */
.home-card-tag {
  position: absolute; left: 12px; top: 16px; padding: 6px 12px; border-radius: 999px;
  color: #fff; font-size: 14px; font-weight: 500;
}
.home-card.big .home-card-tag { padding: 6px 14px; font-size: 16px; }
.home-card-title { position: absolute; left: 12px; right: 12px; bottom: 16px; }
.home-card-title h3 { color: #fff; font-size: 16px; font-weight: 600; line-height: 1.4; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.home-card.big .home-card-title h3 { font-size: 18px; }
.home-card-foot { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; }
.home-card.big .home-card-foot { padding: 20px 24px; }
.home-card-foot .views { display: flex; align-items: center; gap: 4px; color: var(--gray-400); font-size: 14px; }
.home-card.big .home-card-foot .views { font-size: 16px; }
.home-card-foot .go { display: flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 500; transition: gap .2s; }
.home-card.big .home-card-foot .go { font-size: 16px; }
.home-card:hover .home-card-foot .go { gap: 6px; }
.home-card-foot .icon { width: 12px; height: 12px; }
.home-card.big .home-card-foot .icon { width: 14px; height: 14px; }

/* 首页底部三栏目介绍 */
.ls-section { padding: 24px 0 48px; background: #fff; }
.ls-container { max-width: 1600px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 48px; }
.ls-row { display: flex; align-items: center; gap: 72px; }
.ls-row.reverse { flex-direction: row-reverse; }
.ls-text { flex: 0 0 36%; }
.ls-title { font-size: 29.6px; font-weight: 700; color: var(--ink); margin-bottom: 24px; }
.ls-desc { font-size: 15.2px; line-height: 2; color: #555; margin-bottom: 32px; }
.ls-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14.7px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; transition: color .2s; }
.ls-link:hover { color: #d9a800; }
.ls-image { flex: 1 1 auto; min-width: 0; }
.ls-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; }

@media (min-width: 768px) { .home-shell { padding: 0 24px; } .home-grid { padding: 0 20px; } }
@media (max-width: 900px) {
  .ls-row, .ls-row.reverse { flex-direction: column; gap: 32px; }
  .ls-text { flex: none; width: 100%; }
  .ls-container { gap: 48px; }
}
@media (max-width: 640px) {
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-head { flex-direction: column; align-items: flex-start; }
  .section-head-title h2 { font-size: 30px; }
}

/* ==========================================================================
   频道列表页（顶部筛选条型：前沿 / 市场 / 技术）
   ========================================================================== */
.list-page { min-height: 100vh; background: var(--page); padding-bottom: 64px; }
.filter-panel { background: #fff; border-bottom: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); }
.filter-panel-inner { padding: 12px 16px; }
.filter-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.filter-row:last-child { border-bottom: 0; }
.filter-row > .label { flex: none; width: 64px; padding-top: 4px; text-align: right; font-size: 13px; color: var(--gray-500); white-space: nowrap; }
.filter-row.custom > .label { color: var(--gray-700); font-weight: 500; }
.chip-set { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 4px 12px; border-radius: 4px; font-size: 13px; color: var(--gray-600); background: var(--gray-100); transition: all .2s; }
.chip:hover { background: var(--gray-200); }
.chip.active { color: var(--ink); background: var(--brand); font-weight: 500; }
.inline-search { display: flex; align-items: center; gap: 8px; flex: 1; }
.inline-search input { width: 320px; max-width: 100%; padding: 4px 8px; font-size: 13px; border: 1px solid var(--line); border-radius: 4px; outline: none; }
.inline-search input:focus { border-color: var(--brand); }
.inline-search button { display: flex; align-items: center; gap: 4px; padding: 4px 12px; font-size: 13px; color: var(--ink); background: var(--brand); border-radius: 4px; transition: background-color .2s; }
.inline-search button:hover { background: var(--brand-hover); }

/* 频道色条 */
.channel-strip { border-bottom: 1px solid var(--line-soft); }
.channel-strip-inner { padding: 6px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.channel-strip-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.channel-strip-meta > .name { font-size: 14px; font-weight: 700; color: var(--gray-900); white-space: nowrap; }
.channel-strip-meta > .intro { font-size: 12px; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow-btn {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--ink); background: var(--brand); box-shadow: var(--shadow-sm); transition: all .2s;
}
.follow-btn:hover { background: var(--brand-hover); }
.follow-btn.active { color: #fff; background: var(--ink); }
.strip-link { flex: none; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ink); background: var(--brand); }
.strip-link:hover { background: var(--brand-hover); }

.tint-purple { background: rgba(250, 245, 255, .7); }
.tint-blue { background: rgba(239, 246, 255, .7); }
.tint-amber { background: rgba(255, 251, 235, .7); }
.tint-sky { background: rgba(240, 249, 255, .7); }
.tint-rose { background: rgba(255, 241, 242, .7); }
.tint-emerald { background: rgba(236, 253, 245, .7); }
.tint-orange { background: rgba(255, 247, 237, .7); }

/* 排序条 */
.sort-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #fff; border: 1px solid var(--line-soft); border-radius: 999px; box-shadow: var(--shadow-sm); }
.sort-bar select {
  -webkit-appearance: none; appearance: none; border: 0; outline: none; cursor: pointer;
  padding: 6px 26px 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500;
  color: var(--gray-700); background: var(--gray-50);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 12px;
}
.sort-divider { width: 1px; height: 20px; background: var(--line); }
.sort-bar button { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--gray-600); transition: all .2s; }
.sort-bar button:hover { background: var(--gray-50); }
.sort-bar button.active { color: var(--ink); background: var(--brand); box-shadow: var(--shadow-sm); }
.sort-bar .icon { width: 13px; height: 13px; }

/* 内容网格与卡片 */
.grid-area { padding: 16px; }
.grid-area.roomy { padding: 20px 16px; }
.card-grid { display: grid; gap: 12px; }
.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.list-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .3s; cursor: pointer; }
.list-card:hover { box-shadow: var(--shadow-card); }
.list-card .media { position: relative; overflow: hidden; }
.list-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.list-card:hover .media img { transform: scale(1.05); }
.list-card .media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background-color .2s; }
.list-card:hover .media::after { background: rgba(0, 0, 0, .1); }
.list-card .fav {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s;
  color: var(--gray-500); background: rgba(255, 255, 255, .9);
}
.list-card:hover .fav { opacity: 1; }
.list-card .fav.selected { opacity: 1; color: #e8a000; }
.list-card .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--ink); background: rgba(255, 195, 0, .92);
}
.list-card .body { padding: 12px; }
.list-card .body.tight { padding: 8px; }
.list-card h3 { font-size: 14px; font-weight: 600; color: var(--gray-900); line-height: 1.45; margin-bottom: 4px; transition: color .2s; }
.list-card .body.tight h3 { font-size: 12px; line-height: 1.35; margin-bottom: 0; }
.list-card:hover h3 { color: #b98c00; }
.list-card .meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--gray-400); }

.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 32px 0; }
.pagination button { min-width: 32px; height: 32px; padding: 0 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color: #4b5563; border: 1px solid #d1d5db; background: #fff; transition: all .2s; }
.pagination button:hover:not(:disabled):not(.active) { border-color: #ff4d0d; color: #ff4d0d; }
.pagination button.active { color: #fff; background: #ff4d0d; border-color: #ff4d0d; }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
.pagination .dots { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #9ca3af; }
.pagination .jump { display: flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 14px; color: #4b5563; }
.pagination .jump input { width: 40px; height: 32px; padding: 0 4px; text-align: center; font-size: 14px; border: 1px solid #d1d5db; border-radius: 4px; outline: none; }
.pagination .jump input:focus { border-color: #ff4d0d; }
.pagination .jump input::-webkit-outer-spin-button, .pagination .jump input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pagination .jump input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.pagination .jump-btn { padding: 0 12px; }
.pagination .kbd-hint { margin-left: 8px; font-size: 12px; color: #9ca3af; }

.empty-state { grid-column: 1 / -1; min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--gray-500); border: 1px dashed var(--line); border-radius: 16px; background: #fff; }
.empty-state h2 { font-size: 16px; color: var(--gray-800); }
.empty-state a { margin-top: 8px; padding: 8px 16px; border-radius: 999px; font-weight: 700; color: var(--ink); background: var(--brand); }

@media (min-width: 640px) {
  .cols-5, .cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cols-5, .cols-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cols-7 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .card-grid { gap: 16px; }
}
@media (min-width: 1280px) {
  .cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .filter-panel-inner, .channel-strip-inner, .grid-area { padding-left: 24px; padding-right: 24px; }
}

/* ==========================================================================
   频道列表页（左侧栏型：卖场 / 展会 / 图库 / 素材 / 集锦 / 目录）
   ========================================================================== */
.side-layout { min-height: 100vh; background: var(--page); display: flex; }
.side-panel {
  position: sticky; top: 120px; align-self: flex-start;
  width: 240px; flex: none; height: calc(100vh - 120px); overflow-y: auto;
  background: #fff; box-shadow: 2px 0 8px rgba(0, 0, 0, .04); scrollbar-width: thin;
}
.side-panel-inner { padding: 16px; }
.side-block { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.side-block h4 { font-size: 14px; font-weight: 600; color: var(--gray-900); margin-bottom: 8px; }
.mode-switch { display: flex; gap: 8px; }
.mode-switch button { flex: 1; padding: 8px 0; border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--gray-600); background: var(--gray-100); transition: all .2s; }
.mode-switch button.active { color: var(--ink); background: var(--brand); box-shadow: 0 4px 6px -1px rgba(255, 195, 0, .2); }
.side-search { display: flex; align-items: center; gap: 6px; padding: 6px 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.side-search input { flex: 1; min-width: 0; padding: 3px 8px; font-size: 12px; border: 1px solid var(--line); border-radius: 4px; outline: none; }
.side-search input:focus { border-color: var(--brand); }
.side-search button { flex: none; width: 28px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--ink); background: var(--brand); }
.letter-block { padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--line-soft); }
.letter-block h3 { font-size: 12px; font-weight: 700; color: var(--gray-900); text-align: center; margin-bottom: 6px; }
.letter-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; margin-bottom: 8px; }
.letter-grid button { height: 20px; border-radius: 2px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--gray-700); background: var(--gray-100); transition: all .2s; }
.letter-grid button:hover { color: #b98c00; background: rgba(255, 195, 0, .1); }
.letter-grid button.active { color: var(--ink); background: var(--brand); }
.letter-grid button.void { color: var(--gray-300); background: var(--gray-50); cursor: default; }
.filter-accordion { margin-bottom: 8px; }
.filter-accordion > button.head { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; padding: 4px 0; }
.filter-accordion h4 { font-size: 14px; font-weight: 600; color: var(--gray-900); display: flex; align-items: center; gap: 6px; }
.filter-accordion .caret { color: var(--gray-400); display: flex; transition: transform .2s; }
.filter-accordion.closed .caret { transform: rotate(-90deg); }
.filter-accordion.closed .body { display: none; }
.filter-accordion .body { padding-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.filter-accordion .body .chip { font-size: 12px; }
.logo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 430px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.logo-grid button { height: 48px; border: 1px solid var(--line-soft); border-radius: 6px; padding: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; transition: all .2s; }
.logo-grid button:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.logo-grid button.active { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(255, 195, 0, .3); }
.logo-grid img { max-height: 100%; max-width: 100%; object-fit: contain; }
.side-resizer { display: none; }
.side-main { flex: 1; min-width: 0; }

@media (min-width: 768px) {
  .side-resizer { display: flex; align-items: center; justify-content: center; position: sticky; top: 120px; align-self: flex-start; height: calc(100vh - 120px); width: 5px; flex: none; cursor: col-resize; z-index: 40; }
  .side-resizer i { width: 3px; height: 32px; border-radius: 999px; background: var(--gray-300); }
  .side-resizer:hover { background: rgba(255, 195, 0, .1); }
}
@media (max-width: 767px) {
  .side-panel { display: none; }
}

/* ==========================================================================
   面包屑 / 页头
   ========================================================================== */
.crumb-bar { background: #fff; border-bottom: 1px solid var(--line-soft); }
.crumb-inner { max-width: 1280px; margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gray-400); }
.crumb-inner a:hover { color: #b98c00; }
.crumb-inner .now { color: var(--gray-800); }
.page-head { max-width: 1280px; margin: 0 auto; padding: 16px 24px; }
.page-head h1 { font-size: 24px; font-weight: 700; color: var(--gray-900); }
.shell-1280 { max-width: 1280px; margin: 0 auto; padding: 24px; }
@media (min-width: 768px) { .shell-1280, .crumb-inner, .page-head, .updates-toolbar-inner { padding-left: 40px; padding-right: 40px; } }

/* ==========================================================================
   最近更新
   ========================================================================== */
.updates-toolbar { position: sticky; top: 110px; z-index: 30; background: #fff; border-bottom: 1px solid var(--line-soft); }
.updates-toolbar-inner { max-width: 1280px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.updates-toolbar .lead { font-size: 14px; font-weight: 700; color: var(--gray-900); margin-right: 8px; }
.updates-tabs { display: flex; align-items: center; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.updates-tabs::-webkit-scrollbar { display: none; }
.updates-tabs button { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px 16px; border-radius: 999px; font-size: 14px; color: var(--gray-600); transition: all .2s; }
.updates-tabs button .icon { width: 12px; height: 12px; }
.updates-tabs button:hover { background: var(--gray-100); }
.updates-tabs button.active { color: var(--ink); background: var(--brand); font-weight: 500; }
.updates-tabs button.mine { color: var(--ink); font-weight: 600; }
.updates-tabs button.mine:hover { background: rgba(255, 195, 0, .12); }
.updates-tabs button.mine.active { font-weight: 700; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .15); }
.updates-sortbox { flex: none; display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--gray-100); border-radius: 999px; padding: 6px 8px; box-shadow: var(--shadow-sm); }
.updates-sortbox .sel-wrap { position: relative; display: flex; align-items: center; }
.updates-sortbox select { appearance: none; -webkit-appearance: none; border: 0; outline: none; cursor: pointer; background: var(--gray-50, #f9fafb); border-radius: 999px; padding: 6px 28px 6px 12px; font-size: 13px; font-weight: 500; color: var(--gray-700); }
.updates-sortbox .sel-wrap > .icon { position: absolute; right: 8px; width: 14px; height: 14px; color: var(--gray-400); pointer-events: none; }
.updates-sortbox .divider { width: 1px; height: 20px; background: var(--gray-200, #e5e7eb); }
.updates-sortbox .order-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink); background: var(--brand); box-shadow: var(--shadow-sm); transition: all .2s; }
.updates-sortbox .order-btn .icon { width: 14px; height: 14px; }
.follow-bar { background: #fff; border-bottom: 1px solid var(--gray-100, #f3f4f6); }
.follow-bar-inner { max-width: 1280px; margin: 0 auto; padding: 12px 24px; }
.fb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fb-head .icon { width: 13px; height: 13px; color: var(--ink); }
.fb-head .t { font-size: 12px; font-weight: 600; color: var(--gray-700); }
.fb-head .n { font-size: 10px; color: var(--gray-400); }
.fb-list { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.fb-list::-webkit-scrollbar { display: none; }
.fb-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 12px; cursor: pointer; border: 1px solid var(--gray-200, #e5e7eb); background: var(--gray-50, #f9fafb); color: var(--gray-500); transition: all .2s; }
.fb-pill.on { border-color: var(--brand); background: rgba(255, 195, 0, .06); color: var(--ink); }
.fb-pill > .icon { width: 13px; height: 13px; }
.fb-pill .fb-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .5; }
.fb-pill .sec { font-weight: 700; }
.fb-pill .sep { color: var(--gray-300, #d1d5db); }
.fb-pill .x { display: inline-flex; align-items: center; justify-content: center; color: inherit; opacity: .55; border-radius: 50%; transition: all .2s; }
.fb-pill .x:hover { opacity: 1; color: #dc2626; }
.fb-pill .x .icon { width: 11px; height: 11px; }
.update-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px; }
.update-card { background: #fff; border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .3s; cursor: pointer; }
.update-card:hover { box-shadow: var(--shadow-card); }
.update-card .inner { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.update-card h3 { font-size: 14px; font-weight: 700; color: var(--gray-900); line-height: 1.5; margin-bottom: 8px; }
.update-card:hover h3 { color: #b98c00; }
.update-card .lines { flex: 1; margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.update-card .lines p { font-size: 12px; color: var(--gray-500); line-height: 1.6; }
.update-card .foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--gray-400); border-top: 1px solid var(--line-soft); padding-top: 10px; margin-top: auto; }
.update-card .author { display: flex; align-items: center; gap: 6px; color: var(--gray-500); }
.update-card .author .avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--gray-200, #e5e7eb); display: flex; align-items: center; justify-content: center; color: var(--gray-500); }
.update-card .author .avatar .icon { width: 12px; height: 12px; }
.updates-more { padding: 40px 0; display: flex; justify-content: center; }
.updates-more .more-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--gray-200, #e5e7eb); color: var(--gray-700); padding: 12px 32px; border-radius: 999px; font-size: 14px; font-weight: 500; box-shadow: var(--shadow-sm); transition: all .2s; }
.updates-more .more-btn:hover { border-color: var(--brand); color: #b98c00; }
.updates-more .more-btn .icon { width: 16px; height: 16px; }
.updates-more .all-shown { margin: 0; font-size: 12px; color: var(--gray-400); }
@media (min-width: 640px) { .update-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .update-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================================
   视频列表页（与 CA9 /videos 一致）
   ========================================================================== */
.vd-page { min-height: 100vh; background: #fafafa; display: flex; }
/* 与卖场/照片侧栏共用样式；分类较少时仍预留滚动条位置，保持搜索框宽度一致。 */
.vd-page .side-panel { scrollbar-gutter: stable; }
.vd-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.vd-cats button { padding: 4px 12px; border-radius: 4px; font-size: 12px; background: var(--gray-100); color: var(--gray-600); transition: all .2s; }
.vd-cats button:hover { background: var(--gray-200); }
.vd-cats button.on { background: var(--brand); color: var(--ink); }
.vd-more { margin-top: 6px; font-size: 12px; color: #b98c00; }
.vd-more:hover { text-decoration: underline; }
.vd-main { flex: 1; min-width: 0; }
.vd-head { background: rgba(255, 251, 235, .7); border-bottom: 1px solid var(--gray-100); padding: 8px 16px; }
.vd-head-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vd-head .t { font-size: 14px; font-weight: 700; color: var(--gray-900); }
.vd-head .n { font-size: 12px; color: var(--gray-400); }
.vd-head .d { font-size: 13px; color: var(--gray-500); }
.vd-body { padding: 20px 16px; }
.vd-active { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.vd-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; background: rgba(255, 195, 0, .1); color: #b98c00; padding: 6px 12px; border-radius: 999px; }
.vd-pill button { display: inline-flex; margin-left: 4px; color: inherit; transition: color .2s; }
.vd-pill button:hover { color: #ef4444; }
.vd-pill button .icon { width: 12px; height: 12px; }
.vd-count { font-size: 12px; color: var(--gray-400); }
.vd-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .vd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .vd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vd-card { display: block; cursor: pointer; }
.vd-card-media { position: relative; border-radius: 12px; overflow: hidden; background: var(--gray-100); margin-bottom: 10px; }
.vd-card-media .ar { aspect-ratio: 16 / 9; }
.vd-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.vd-card:hover .vd-card-media img { transform: scale(1.05); }
.vd-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .2); opacity: 0; transition: opacity .2s; }
.vd-card:hover .vd-play { opacity: 1; }
.vd-play span { width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 195, 0, .9); color: #fff; display: flex; align-items: center; justify-content: center; }
.vd-play .icon { width: 20px; height: 20px; }
.vd-dur { position: absolute; bottom: 8px; right: 8px; background: rgba(0, 0, 0, .8); color: #fff; font-size: 11px; font-weight: 500; padding: 2px 6px; border-radius: 4px; }
.vd-season { position: absolute; top: 8px; left: 8px; background: rgba(255, 195, 0, .9); color: #fff; font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 999px; }
.vd-card h3 { font-size: 14px; font-weight: 600; color: var(--gray-900); line-height: 1.4; margin-bottom: 4px; transition: color .2s; }
.vd-card:hover h3 { color: #b98c00; }
.vd-card-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--gray-400); }
.vd-card-meta .s { font-weight: 500; color: var(--gray-500); }
.vd-card-meta .v { display: inline-flex; align-items: center; gap: 2px; }
.vd-card-meta .v .icon { width: 10px; height: 10px; }
.vd-empty { text-align: center; padding: 80px 0; color: var(--gray-400); }
.vd-empty .icon { width: 32px; height: 32px; margin: 0 auto 12px; opacity: .4; }
@media (max-width: 860px) {
  .vd-page { flex-direction: column; }
  .vd-page .side-panel { display: block; width: 100%; position: static; height: auto; scrollbar-gutter: auto; }
}

/* ==========================================================================
   实拍精选页（PhotoListPage，对齐 CA9 /photos；bg/text-photo = #0891B2）
   ========================================================================== */
.pp-page { min-height: 100vh; background: #fafafa; padding-bottom: 64px; }
.pp-head { background: linear-gradient(to right, rgba(8, 145, 178, .1), rgba(6, 182, 212, .1)); padding: 32px 0; }
.pp-head-inner, .pp-tabs-inner, .pp-main { padding-left: 16px; padding-right: 16px; }
@media (min-width: 768px) { .pp-head-inner, .pp-tabs-inner, .pp-main { padding-left: 24px; padding-right: 24px; } }
.pp-title { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pp-title .icon { width: 28px; height: 28px; color: #0891b2; }
.pp-title h1 { font-size: 24px; font-weight: 700; color: var(--gray-900); }
@media (min-width: 768px) { .pp-title h1 { font-size: 30px; } }
.pp-head p { font-size: 14px; color: var(--gray-600); }
@media (min-width: 768px) { .pp-head p { font-size: 16px; } }
.pp-tabs { background: #fff; border-bottom: 1px solid var(--gray-100); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.pp-tabs-inner { padding-top: 12px; padding-bottom: 12px; }
.pp-tabrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pp-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; background: var(--gray-100); color: var(--gray-600); transition: all .2s; }
.pp-tab .icon { width: 14px; height: 14px; }
a.pp-tab:hover { background: var(--brand); color: #fff; }
button.pp-tab:hover { background: var(--gray-200); }
.pp-tab.on { background: #0891b2; color: #fff; }
.pp-total { font-size: 14px; color: var(--gray-400); }
.pp-main { padding-top: 32px; }
.pp-grid { columns: 2; column-gap: 16px; }
@media (min-width: 640px) { .pp-grid { columns: 3; } }
@media (min-width: 1024px) { .pp-grid { columns: 4; } }
@media (min-width: 1280px) { .pp-grid { columns: 5; } }
.pp-card { break-inside: avoid; margin-bottom: 16px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); cursor: pointer; transition: box-shadow .3s; animation: pp-in .35s both; }
.pp-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
@keyframes pp-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.pp-media { position: relative; overflow: hidden; }
.pp-media img { display: block; width: 100%; min-height: 200px; max-height: 340px; object-fit: cover; transition: transform .5s; }
.pp-card:hover .pp-media img { transform: scale(1.05); }
.pp-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0); transition: background .2s; }
.pp-card:hover .pp-veil { background: rgba(0, 0, 0, .2); }
.pp-veil span { background: rgba(255, 255, 255, .9); color: #0891b2; font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 999px; opacity: 0; transition: opacity .2s; }
.pp-card:hover .pp-veil span { opacity: 1; }
.pp-info { padding: 12px; }
.pp-info h3 { font-size: 14px; font-weight: 600; color: var(--gray-900); margin-bottom: 4px; }
.pp-meta { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gray-400); }
.pp-meta .icon { width: 11px; height: 11px; }
.pp-pager { display: flex; justify-content: center; margin-top: 40px; }

/* ==========================================================================
   前沿频道页（InsightPage，对齐 CA9 TrendsListPage /insight）
   ========================================================================== */
.tl-page { min-height: 100vh; background: #fafafa; padding-bottom: 64px; }
.tl-filters { background: #fff; border-bottom: 1px solid var(--gray-100); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.tl-filters-inner, .tl-strip-inner, .tl-main { padding-left: 16px; padding-right: 16px; }
@media (min-width: 768px) { .tl-filters-inner, .tl-strip-inner, .tl-main { padding-left: 24px; padding-right: 24px; } }
.tl-filters-inner { padding-top: 12px; padding-bottom: 12px; }
.tl-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--gray-100); }
.tl-row.tl-custom { border-bottom: 0; }
.tl-label { flex-shrink: 0; width: 64px; padding-top: 4px; font-size: 13px; color: var(--gray-500); text-align: right; white-space: nowrap; }
.tl-label.strong { color: var(--gray-700); font-weight: 500; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-chip { padding: 4px 12px; border-radius: 4px; font-size: 13px; background: var(--gray-100); color: var(--gray-600); transition: all .2s; cursor: pointer; }
.tl-chip:hover { background: var(--gray-200); }
.tl-chip.on { background: var(--brand); color: #101010; font-weight: 500; }
.tl-custom-bar { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.tl-input { width: 256px; padding: 4px 8px; font-size: 13px; border: 1px solid var(--gray-200); border-radius: 4px; outline: none; }
@media (min-width: 768px) { .tl-input { width: 320px; } }
.tl-input:focus { border-color: var(--brand); }
.tl-search-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; font-size: 13px; background: var(--brand); color: #101010; border-radius: 4px; cursor: pointer; transition: background .2s; }
.tl-search-btn:hover { background: var(--brand-hover); }
.tl-search-btn .icon { width: 11px; height: 11px; }
.tl-kw-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-kw-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; font-size: 13px; background: var(--brand); color: #101010; font-weight: 500; cursor: pointer; transition: opacity .2s; }
.tl-kw-chip:hover { opacity: .8; }
.tl-kw-chip .icon { width: 12px; height: 12px; }
.tl-strip { background: rgba(250, 245, 255, .7); border-bottom: 1px solid var(--gray-100); }
.tl-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; }
.tl-strip-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-strip-title { font-size: 14px; font-weight: 700; color: var(--gray-900); }
.tl-strip-sub { font-size: 12px; color: var(--gray-500); }
.tl-follow { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--brand); color: #101010; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); cursor: pointer; transition: background .2s; }
.tl-follow:hover { background: var(--brand-hover); }
.tl-follow .icon { width: 9px; height: 9px; }
.tl-sort-capsule { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--gray-100); border-radius: 999px; padding: 6px 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.tl-select-wrap { position: relative; }
.tl-select-wrap select { appearance: none; -webkit-appearance: none; font-size: 13px; font-weight: 500; color: var(--gray-700); background: var(--gray-50, #f9fafb); border: 0; border-radius: 999px; padding: 6px 28px 6px 12px; cursor: pointer; outline: none; }
.tl-select-wrap select:focus { box-shadow: 0 0 0 2px rgba(255, 195, 0, .4); }
.tl-select-wrap .icon { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--gray-400); pointer-events: none; }
.tl-divider { width: 1px; height: 20px; background: var(--gray-200); }
.tl-sort-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--gray-600); cursor: pointer; transition: all .2s; }
.tl-sort-btn:hover { background: var(--gray-50, #f9fafb); }
.tl-sort-btn.on { background: var(--brand); color: #101010; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.tl-sort-btn .icon { width: 14px; height: 14px; }
.tl-main { padding-top: 16px; }
.tl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .tl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .tl-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 1280px) { .tl-grid { grid-template-columns: repeat(5, 1fr); } }
.tl-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); cursor: pointer; transition: box-shadow .3s; animation: tl-in .35s both; }
.tl-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .1); }
@keyframes tl-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.tl-media { position: relative; overflow: hidden; }
.tl-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tl-body { padding: 12px; }
.tl-body h3 { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--gray-900); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.tl-card:hover .tl-body h3 { color: var(--brand); }
.tl-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; line-height: 1.5; color: var(--gray-400); }
.tl-banner { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--gray-900); color: #fff; font-size: 14px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.tl-banner .icon { width: 16px; height: 16px; color: #4ade80; }
.tl-pager { display: flex; justify-content: center; padding-bottom: 32px; margin-top: 24px; }

/* ==========================================================================
   视频播放页（与 CA9 VideoPlayerPage 一致）
   ========================================================================== */
.vp-page { min-height: 100vh; background: #fff; }
.vp-stage { position: relative; background: #000; border-radius: 8px; overflow: hidden; }
.vp-stage.fs { position: fixed; inset: 0; z-index: 100; }
.vp-stage.fs, .vp-stage:fullscreen { display: flex; align-items: center; justify-content: center; border-radius: 0; }
.vp-box { position: relative; aspect-ratio: var(--vp-aspect-ratio, 1.777777778); width: 100%; }
.vp-stage.fs .vp-box, .vp-stage:fullscreen .vp-box { width: min(100vw, calc(100vh * var(--vp-aspect-ratio, 1.777777778))); max-height: 100vh; }
.vp-box > img, .vp-box > video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.vp-box > video { object-fit: contain; }
.vp-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .3); }
.vp-bigplay { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 195, 0, .9); color: #fff; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.vp-bigplay:hover { background: var(--brand); transform: scale(1.05); }
.vp-bigplay .icon { width: 28px; height: 28px; }
.vp-lock { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0, 0, 0, .6); color: #fff; text-align: center; }
.vp-lock > .icon { width: 32px; height: 32px; color: var(--brand); margin-bottom: 8px; }
.vp-lock .t { font-size: 14px; margin-bottom: 4px; }
.vp-lock .s { font-size: 12px; color: rgba(255, 255, 255, .6); }
.vp-upgrade { margin-top: 12px; padding: 6px 16px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; transition: background .2s; }
.vp-upgrade:hover { background: var(--brand-hover, #e6b000); }
.vp-controls { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 16px 12px; background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent); }
.vp-progress { width: 100%; height: 6px; background: rgba(255, 255, 255, .2); border-radius: 999px; margin-bottom: 12px; cursor: pointer; }
.vp-progress-fill { position: relative; height: 100%; background: var(--brand); border-radius: 999px; }
.vp-knob { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--brand); opacity: 0; transition: opacity .2s; }
.vp-progress:hover .vp-knob { opacity: 1; }
.vp-bar { display: flex; align-items: center; justify-content: space-between; }
.vp-bar-l, .vp-bar-r { display: flex; align-items: center; gap: 12px; }
.vp-bar-r { position: relative; }
.vp-btn { color: #fff; display: inline-flex; align-items: center; transition: color .2s; }
.vp-btn:hover { color: var(--brand); }
.vp-btn .icon { width: 20px; height: 20px; }
.vp-btn.half { color: rgba(255, 255, 255, .5); }
.vp-btn.half:hover { color: #fff; }
.vp-btn.half .icon { width: 18px; height: 18px; }
.vp-btn.dim { color: rgba(255, 255, 255, .7); }
.vp-btn.dim:hover { color: #fff; }
.vp-btn.dim .icon { width: 18px; height: 18px; }
.vp-vol { display: flex; align-items: center; gap: 8px; }
.vp-vol .vp-btn .icon { width: 18px; height: 18px; }
.vp-vol-bar { width: 64px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .2); overflow: hidden; cursor: pointer; }
.vp-vol-fill { height: 100%; background: #fff; border-radius: 999px; }
.vp-time { color: rgba(255, 255, 255, .7); font-size: 12px; }
.vp-res { position: relative; }
.vp-res-btn { display: inline-flex; align-items: center; gap: 4px; color: rgba(255, 255, 255, .7); font-size: 12px; transition: color .2s; }
.vp-res-btn:hover { color: #fff; }
.vp-res-btn .icon { width: 12px; height: 12px; }
.vp-res-menu { position: absolute; bottom: 100%; right: 0; margin-bottom: 8px; min-width: 100px; background: rgba(0, 0, 0, .9); border-radius: 8px; padding: 4px 0; z-index: 20; }
.vp-res-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; font-size: 12px; color: rgba(255, 255, 255, .7); text-align: left; transition: all .2s; }
.vp-res-item:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.vp-res-item.on { color: var(--brand); background: rgba(255, 195, 0, .1); }
.vp-res-item.locked { color: rgba(255, 255, 255, .3); cursor: not-allowed; }
.vp-res-item.locked:hover { background: transparent; color: rgba(255, 255, 255, .3); }
.vp-res-item .icon { width: 10px; height: 10px; }
.vp-body { --vp-body-padding: 48px; --vp-related-width: clamp(300px, 24vw, 360px); max-width: min(1480px, calc(var(--vp-player-max-height, 700px) * var(--vp-aspect-ratio, 1.777777778) + var(--vp-body-padding))); margin: 0 auto; padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "main" "related"; gap: 16px 28px; align-items: start; }
.vp-heading { grid-area: heading; min-width: 0; }
.vp-heading h1 { font-size: 22px; line-height: 1.45; font-weight: 600; color: var(--gray-900); margin-bottom: 10px; overflow-wrap: anywhere; }
.vp-main { grid-area: main; min-width: 0; }
.vp-meta { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: 12px; color: var(--gray-500); }
.vp-meta .pill { background: rgba(255, 195, 0, .1); color: #b98c00; padding: 2px 8px; border-radius: 999px; font-weight: 500; }
.vp-meta .mi { display: inline-flex; align-items: center; gap: 4px; }
.vp-meta .mi .icon { width: 12px; height: 12px; }
.vp-actions { display: flex; align-items: center; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--gray-100); }
.vp-fav, .vp-share { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; background: var(--gray-100); color: var(--gray-600); transition: all .2s; }
.vp-fav:hover, .vp-share:hover { background: var(--gray-200); }
.vp-fav .icon, .vp-share .icon { width: 16px; height: 16px; }
.vp-fav.on { background: #fef2f2; color: #ef4444; }
.vp-desc { padding: 20px 0; }
.vp-desc > h2 { font-size: 16px; font-weight: 600; margin: 0 0 12px; color: var(--gray-900); }
.vp-desc > p { font-size: 14px; color: var(--gray-700); line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.vp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gray-100); }
.vp-tags a { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--gray-100); color: var(--gray-600); transition: all .2s; }
.vp-tags a:hover { background: rgba(255, 195, 0, .15); color: #b98c00; }
.vp-side { grid-area: related; min-width: 0; }
.vp-side h3 { font-size: 16px; font-weight: 600; color: var(--gray-900); margin-bottom: 16px; }
.vp-rel-list { display: flex; flex-direction: column; gap: 20px; }
.vp-rel { display: flex; gap: 12px; }
.vp-rel .thumb { position: relative; flex: none; width: 46%; max-width: 180px; align-self: flex-start; border-radius: 6px; overflow: hidden; background: var(--gray-100); aspect-ratio: 16 / 9; display: block; }
.vp-rel-duration { position: absolute; bottom: 4px; right: 4px; padding: 1px 4px; border-radius: 3px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 11px; line-height: 1.5; }
.vp-rel .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.vp-rel:hover .thumb img { transform: scale(1.05); }
.vp-rel .txt { min-width: 0; }
.vp-rel h4 { font-size: 14px; font-weight: 600; color: var(--gray-900); line-height: 1.4; transition: color .2s; }
.vp-rel:hover h4 { color: #b98c00; }
.vp-rel .s { font-size: 12px; color: var(--gray-500); margin-top: 6px; overflow-wrap: anywhere; }
.vp-rel .m { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gray-400); margin-top: 4px; }
.vp-rel .m .icon { width: 9px; height: 9px; }
.vp-related-empty { font-size: 13px; color: var(--gray-400); padding: 16px 0; }
@media (min-width: 1024px) {
  .vp-body { max-width: min(1480px, calc(var(--vp-player-max-height, 700px) * var(--vp-aspect-ratio, 1.777777778) + var(--vp-related-width) + 28px + var(--vp-body-padding))); grid-template-columns: minmax(0, 1fr) var(--vp-related-width); grid-template-areas: "heading heading" "main related"; }
}
@media (max-width: 639px) {
  .vp-body { --vp-body-padding: 24px; padding: 16px 12px; }
  .vp-heading h1 { font-size: 18px; }
  .vp-controls { padding: 32px 10px 10px; }
  .vp-bar-l, .vp-bar-r { gap: 8px; }
  .vp-vol-bar { display: none; }
}

/* ==========================================================================
   趋势分析（VIP）
   ========================================================================== */
.vip-page { min-height: 100vh; background: var(--page-alt); }
.vip-hero { position: relative; height: 55vh; display: flex; align-items: center; overflow: hidden; }
.vip-hero-bg { position: absolute; inset: 0; }
.vip-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.vip-hero-slide.active { opacity: 1; }
.vip-hero-main { position: absolute; right: 0; top: 0; width: 100%; height: 100%; }
.vip-hero-main img { width: 100%; height: 100%; object-fit: cover; }
.vip-hero-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, #2d1b4e, rgba(45, 27, 78, .85) 55%, transparent); }
.vip-hero-thumb { display: none; position: absolute; right: 8%; bottom: 12%; width: 320px; height: 220px; border-radius: 8px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .45); border: 1px solid rgba(0, 0, 0, .1); }
.vip-hero-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vip-hero-veil { position: absolute; inset: 0; background: var(--vip-tone, #2d1b4e); opacity: .2; transition: background-color .8s ease; }
.vip-hero-body { position: relative; z-index: 10; width: 100%; }
.vip-hero-copy { max-width: 700px; padding: 32px 24px; }
.vip-hero-copy .kicker { display: inline-block; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: #9ca3af; margin-bottom: 8px; }
.vip-hero-copy h1 { font-size: 36px; font-weight: 700; color: #1a1a2e; line-height: 1.1; margin-bottom: 8px; letter-spacing: -.025em; }
.vip-hero-copy .en { font-size: 18px; font-weight: 300; color: #9ca3af; margin-bottom: 16px; letter-spacing: .025em; }
.vip-hero-copy .desc { font-size: 14px; color: #6b7280; line-height: 1.625; max-width: 420px; margin-bottom: 24px; }
.vip-hero-copy .cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: #1a1a2e; transition: background-color .2s; }
.vip-hero-copy .cta:hover { background: #2a2a3e; }
.vip-hero-dots { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.vip-hero-dots button { height: 4px; width: 16px; border-radius: 999px; background: #d1d5db; cursor: pointer; transition: all .3s; }
.vip-hero-dots button.active { width: 40px; background: #1a1a2e; }
.ca9-parity-vip .vip-hero { background: #fafafa; }
.ca9-parity-vip .vip-hero-backdrop { position: absolute; right: 0; top: 0; width: 100%; height: 100%; }
.ca9-parity-vip .vip-hero-backdrop img { width: 100%; height: 100%; object-fit: cover; }
.ca9-parity-vip .vip-hero-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--vip-tone), color-mix(in srgb, var(--vip-tone) 85%, transparent) 50%, transparent); }
.ca9-parity-vip .vip-hero-cover { display: none; position: absolute; right: 8%; bottom: 12%; width: 320px; height: 220px; border-radius: 8px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); border: 1px solid rgba(0, 0, 0, .1); }
.ca9-parity-vip .vip-hero-cover img { width: 100%; height: 100%; object-fit: cover; }
.ca9-parity-vip .vip-hero-copy { box-sizing: border-box; }
.ca9-parity-vip .vip-hero-dots button:focus-visible { outline: 2px solid #1a1a2e; outline-offset: 5px; }
@media (max-width: 1023px) {
  .ca9-parity-vip .vip-hero-backdrop { opacity: .18; }
  .ca9-parity-vip .vip-hero-copy .kicker,
  .ca9-parity-vip .vip-hero-copy .en { color: #6b7280; }
  .ca9-parity-vip .vip-hero-copy .desc { color: #4b5563; }
}
.vip-entries { background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid rgba(0, 0, 0, .05); border-bottom: 1px solid rgba(0, 0, 0, .05); }
.vip-entries-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vip-entries a { position: relative; display: block; padding: 40px 32px; border-right: 1px solid rgba(0, 0, 0, .05); transition: background-color .3s; }
.vip-entries a:last-child { border-right: 0; }
.vip-entries a:hover { background: rgba(255, 195, 0, .05); }
.vip-entries .entry-icon { display: block; width: 32px; height: 32px; margin-bottom: 16px; color: var(--brand); }
.vip-entries .entry-arrow { position: absolute; top: 40px; right: 40px; width: 18px; height: 18px; color: #707070; }
.vip-entries h3 { font-size: 20px; line-height: 32px; font-weight: 700; color: var(--ink); margin-bottom: 4px; transition: color .2s; }
.vip-entries a:hover h3 { color: var(--brand); }
.vip-entries .en { font-size: 10px; line-height: 15px; letter-spacing: .15em; color: #707070; margin-bottom: 8px; }
.vip-entries .desc { font-size: 12px; color: #707070; line-height: 19.5px; }
.vip-entries i { position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--brand); transition: width .5s; }
.vip-entries a:hover i { width: 100%; }

.vip-block { padding: 48px 0; }
.vip-block.alt { background: rgba(255, 255, 255, .4); }
.vip-block-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.vip-block-head { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 40px; }
.vip-block-head i { display: block; width: 96px; height: 1px; background: rgba(16, 16, 16, .2); }
.vip-block-head h2 { font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: .04em; }
.vip-block-more { text-align: center; margin-bottom: 32px; }
.vip-block-more a { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: #707070; transition: color .2s; }
.vip-block-more a:hover { color: var(--brand); }
.vip-thumb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vip-thumb-grid article { cursor: pointer; }
.ca9-parity-vip .vip-thumb-grid .vip-card-reveal { opacity: 0; transform: translateY(20px); transition: opacity .3s ease-out, transform .4s ease-out; transition-delay: var(--vip-reveal-delay, 0ms); }
.ca9-parity-vip .vip-thumb-grid .vip-card-visible,
.ca9-parity-vip .vip-thumb-grid .vip-card-reveal:focus-within { opacity: 1; transform: none; }
.vip-thumb-grid .shot { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 12px; }
.vip-thumb-grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s ease; }
.vip-thumb-grid article:hover img { transform: scale(1.05); }
.vip-thumb-grid p { font-size: 12px; color: #707070; text-align: center; line-height: 1.5; }

/* vip 落地页第 7 区块「最新趋势」CTA 横幅（CA9 VipPage.tsx:378-395） */
.vip-latest { position: relative; min-height: 400px; display: flex; align-items: center; overflow: hidden; }
.vip-latest-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.vip-latest-veil { position: absolute; inset: 0; background: linear-gradient(to right, #f0f0f3, rgba(240, 240, 243, .9) 50%, rgba(240, 240, 243, .7)); }
.vip-latest-inner { position: relative; z-index: 10; width: 100%; max-width: 1280px; margin: 0 auto; padding: 80px 24px; }
.vip-latest-inner .kicker { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--brand); }
.vip-latest-inner h2 { font-size: 36px; font-weight: 700; color: #1a1a2e; margin: 16px 0; line-height: 1.25; }
.vip-latest-inner .desc { font-size: 16px; color: var(--gray-500); max-width: 500px; margin-bottom: 32px; line-height: 1.625; }
.vip-latest-inner button { padding: 16px 32px; border: 0; border-radius: 999px; background: #1a1a2e; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .3s; }
.vip-latest-inner button:hover { background: #2a2a3e; }

@media (min-width: 768px) {
  .vip-hero-main { width: 60%; }
  .ca9-parity-vip .vip-hero-backdrop { width: 60%; }
  .ca9-parity-vip .vip-hero-copy { padding: 32px 48px; }
  .ca9-parity-vip .vip-hero-copy h1 { font-size: 48px; }
  .ca9-parity-vip .vip-hero-copy .en { font-size: 20px; }
  .vip-block-head h2 { font-size: 30px; }
  .vip-thumb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vip-latest-inner h2 { font-size: 48px; }
}
@media (min-width: 1024px) {
  .vip-entries-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vip-entries a { padding: 40px; }
  .vip-entries h3 { font-size: 24px; }
  .vip-hero-thumb { display: block; }
  .vip-hero-copy { padding: 32px 80px; }
  .ca9-parity-vip .vip-hero-cover { display: block; }
  .ca9-parity-vip .vip-hero-copy { padding: 32px 80px; }
  .ca9-parity-vip .vip-hero-copy h1 { font-size: 60px; }
}

/* ==========================================================================
   VIP 子页（黑导航条 / 子栏目列表 / 图集 / 趋势详情）
   ========================================================================== */
.vipbar { background: #101010; }
.vipbar-inner { max-width: 1280px; margin: 0 auto; padding: 8px 24px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.vipbar-left { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; align-items: center; gap: 4px; }
.vipbar-brand { display: flex; align-items: center; gap: 6px; margin-right: 16px; }
.vipbar-brand img { height: 32px; width: auto; }
.vipbar-brand span { color: var(--brand); font-weight: 700; font-size: 16px; letter-spacing: .05em; }
.vipbar-item { display: flex; align-items: center; }
.vipbar-item i { color: rgba(184, 184, 184, .3); margin: 0 4px; font-size: 12px; font-style: normal; }
.vipbar-item a { padding: 4px 8px; border-radius: 4px; font-size: 14px; font-weight: 500; color: #b8b8b8; white-space: nowrap; transition: color .2s; }
.vipbar-item a:hover { color: #f6f6f6; }
.vipbar-item a.on { color: var(--brand); }
.vipbar .vipbar-back { flex: none; white-space: nowrap; font-size: 14px; color: #b8b8b8; transition: color .2s; }
.vipbar .vipbar-back:hover { color: #f6f6f6; }

.vipsub-page { min-height: 100vh; background: #f0f0f3; }
.vipsub-head { background: #fff; border-bottom: 1px solid rgba(0, 0, 0, .05); }
.vipsub-head-inner { max-width: 1280px; margin: 0 auto; padding: 32px 24px; animation: mc-in .4s ease both; }
.vipsub-head-inner h1 { font-size: 24px; font-weight: 700; color: #101010; margin-bottom: 4px; }
.vipsub-head-inner p { font-size: 14px; color: #707070; }
.vipsub-body { max-width: 1280px; margin: 0 auto; padding: 32px 24px; }
.vipsub-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
/* 季节/专题/产品下拉样式见 dd-light（仿 CA9 ui/select.tsx Radix 形态） */
.vipsub-count { margin-bottom: 16px; font-size: 12px; color: #707070; }
.vipsub-empty { display: flex; align-items: center; justify-content: center; padding: 80px 0; }
.vipsub-empty p { color: #707070; font-size: 14px; }
.vipsub-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .vipsub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vipsub-head-inner h1 { font-size: 30px; } }
@media (min-width: 1024px) { .vipsub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vipsub-card { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); cursor: pointer; transition: box-shadow .3s; }
.vipsub-card:hover { box-shadow: var(--shadow-card-hover); }
.vipsub-card .vs-media { position: relative; overflow: hidden; }
.vipsub-card .vs-media::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background-color .3s; }
.vipsub-card:hover .vs-media::after { background: rgba(0, 0, 0, .1); }
.vipsub-card .vs-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center top; display: block; transition: transform .5s ease; }
.vipsub-card:hover .vs-media img { transform: scale(1.05); }
.vipsub-card .vs-body { padding: 16px; }
.vipsub-card h3 { font-size: 14px; font-weight: 700; color: #101010; line-height: 1.5; transition: color .2s; }
.vipsub-card:hover h3 { color: var(--brand); }
.vipsub-card .vs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vipsub-card .vs-tags span { font-size: 10px; color: #707070; background: #f0f0f3; padding: 2px 8px; border-radius: 999px; }

/* 图集页 */
.vipg-missing { min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.vipg-missing p { color: #707070; }
/* VIP 图集正文按原型随宽屏铺开；只有上方黑色 VIP 导航保留 1280px 内层。 */
.vipg-body { width: 100%; padding: 16px 24px 40px; margin: 0; }
.vipg-head { background: #fff; border-radius: 16px; box-shadow: var(--shadow-sm); border: 1px solid #e5e5e5; padding: 24px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 768px) { .vipg-head { flex-direction: row; } }
.vipg-cover { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vipg-cover .shot { width: 280px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid #e5e5e5; }
.vipg-cover .shot img { width: 100%; height: 100%; object-fit: cover; }
.vipg-dl { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--brand); cursor: pointer; transition: color .2s; }
.vipg-dl:hover { color: var(--brand-hover); }
.vipg-dl .icon { width: 14px; height: 14px; }
.vipg-info { flex: 1; min-width: 0; }
.vipg-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.vipg-titlerow h1 { font-size: 20px; font-weight: 700; color: #101010; }
@media (min-width: 768px) { .vipg-titlerow h1 { font-size: 24px; } }
.vipg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-bottom: 12px; font-size: 12px; color: #707070; }
.vipg-desc { font-size: 14px; color: #505050; line-height: 1.8; margin-bottom: 12px; max-width: 560px; }
.vipg-desc b { color: #101010; }
.vipg-total { font-size: 14px; color: #707070; }
.vipg-total b { color: #101010; }
.vipg-masonry { position: relative; }
.vipg-item { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; background: #efece7; border: 1px solid #f0f0f3; transition: all .3s; }
.vipg-item:hover { box-shadow: var(--shadow-card-hover); border-color: rgba(255, 195, 0, .3); }
.vipg-item img { width: 100%; height: auto; display: block; transition: transform .5s; }
.vipg-item:hover img { transform: scale(1.02); }
.vipg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .vipg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .vipg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vipg-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.vipg-cell { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; background: #efece7; border: 1px solid #f0f0f3; transition: all .3s; }
.vipg-cell:hover { box-shadow: var(--shadow-card-hover); border-color: rgba(255, 195, 0, .3); }
.vipg-cell .frame { position: relative; overflow: hidden; aspect-ratio: 297 / 210; }
.vipg-cell .blur { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.3); filter: blur(24px) brightness(.8) saturate(1.25); }
.vipg-cell .frame img { position: relative; width: 100%; height: 100%; object-fit: contain; transition: transform .5s; }
.vipg-cell:hover .frame img { transform: scale(1.05); }
.vipg-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; }
.vipg-pager button { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: #fff; border: 1px solid #e5e5e5; color: #707070; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .2s; }
.vipg-pager button:hover:not(:disabled):not(.on) { background: #f0f0f3; }
.vipg-pager button.on { background: #ff4d0d; color: #fff; border-color: #ff4d0d; }
.vipg-pager button:disabled { opacity: .4; cursor: not-allowed; }
.vipg-pager .jump { font-size: 12px; color: #707070; margin-left: 8px; display: flex; align-items: center; }
.vipg-pager .jump input { width: 40px; text-align: center; border: 1px solid #e5e5e5; border-radius: 4px; padding: 2px 4px; font-size: 12px; margin: 0 4px; outline: none; }
.vipg-hint { text-align: center; font-size: 11px; color: #707070; margin-top: 16px; }

/* 趋势详情页 */
.vc-body { padding: 12px 24px 40px; max-width: 1280px; margin: 0 auto; }
.vc-crumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #707070; margin-bottom: 8px; }
.vc-crumb .icon { width: 12px; height: 12px; }
.vc-crumb a:hover { color: var(--brand); }
.vc-crumb .now { color: #101010; font-weight: 500; max-width: 300px; }
.vc-titlebar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
@media (min-width: 768px) { .vc-titlebar { flex-direction: row; align-items: flex-start; justify-content: space-between; } }
.vc-titlemain { flex: 1; min-width: 0; }
.vc-badges { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.vc-badges .cat { padding: 2px 8px; background: rgba(255, 195, 0, .15); color: #b38600; font-size: 10px; font-weight: 700; border-radius: 4px; }
.vc-badges .season { padding: 2px 8px; background: #f0f0f3; color: #707070; font-size: 10px; border-radius: 4px; }
.vc-titlemain h1 { font-size: 20px; font-weight: 700; color: #101010; }
@media (min-width: 768px) { .vc-titlemain h1 { font-size: 24px; } }
.vc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; font-size: 12px; color: #707070; }
.vc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.vc-meta .icon { width: 12px; height: 12px; }
.vc-fav { flex: none; display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid #ef4444; color: #ef4444; background: #fff; box-shadow: 0 0 6px rgba(239, 68, 68, .35); transition: all .2s; }
.vc-fav .icon { width: 13px; height: 13px; }
.vc-fav:hover { background: rgba(255, 195, 0, .1); color: var(--brand); border-color: var(--brand); }
.vc-fav.on { background: var(--brand); border-color: var(--brand); color: #ef4444; font-weight: 700; box-shadow: none; }
.vc-fav.on:hover { background: var(--brand-hover); color: #ef4444; }
.vc-fav.on .icon { fill: currentColor; }
.vc-layout { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1024px) { .vc-layout { flex-direction: row; } .vc-side { width: 420px; } }
.vc-side { flex: none; background: #fff; border-radius: 16px; padding: 16px; box-shadow: var(--shadow-sm); border: 1px solid #e5e5e5; align-self: flex-start; position: sticky; top: 16px; width: 100%; }
.vc-side h3 { font-size: 14px; font-weight: 700; color: #101010; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.vc-side h3 .icon { width: 14px; height: 14px; color: var(--brand); }
.vc-desc { position: relative; }
.vc-desc.closed { max-height: 200px; overflow: hidden; }
.vc-desc p { font-size: 14px; color: #707070; line-height: 1.8; margin-bottom: 8px; }
.vc-desc .fade { position: absolute; bottom: 0; left: 0; right: 0; height: 48px; background: linear-gradient(to top, #fff, transparent); }
.vc-toggle { font-size: 12px; color: var(--brand); font-weight: 500; margin-top: 4px; cursor: pointer; display: flex; align-items: center; gap: 2px; }
.vc-toggle:hover { text-decoration: underline; }
.vc-toggle .icon { width: 12px; height: 12px; }
.vc-tags { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e5e5e5; }
.vc-tags h3 { margin-bottom: 8px; }
.vc-tags > div { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-tags span { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #f0f0f3; color: #707070; cursor: pointer; transition: all .2s; }
.vc-tags span:hover { background: rgba(255, 195, 0, .1); color: #b38600; }
.vc-stats { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e5e5e5; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.vc-stats b { display: block; font-size: 18px; font-weight: 700; color: #101010; }
.vc-stats span { font-size: 10px; color: #707070; }
.vc-viewer { flex: 1; min-width: 0; }
.vc-stage { position: relative; background: #111; border-radius: 16px 16px 0 0; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 300px; max-height: 60vh; border: 1px solid #374151; border-bottom: 0; }
.vc-stage img { width: 100%; max-height: 60vh; object-fit: contain; cursor: pointer; animation: vc-in .35s cubic-bezier(.22, 1, .36, 1); }
@keyframes vc-in { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
.vc-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent); padding: 16px 24px; }
.vc-caption p { color: #fff; font-weight: 600; font-size: 14px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.vc-caption span { color: rgba(255, 255, 255, .7); font-size: 12px; margin-top: 2px; display: block; }
.vc-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .9); border: 0; box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; color: #374151; cursor: pointer; z-index: 10; transition: all .2s; }
.vc-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.vc-arrow.left { left: 12px; }
.vc-arrow.right { right: 12px; }
.vc-arrow .icon { width: 20px; height: 20px; }
.vc-count { position: absolute; top: 12px; left: 12px; background: rgba(0, 0, 0, .4); color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.vc-thumbs { background: #1a1a1a; border: 1px solid #374151; border-top: 0; border-radius: 0 0 16px 16px; padding: 12px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.vc-thumbs::-webkit-scrollbar { display: none; }
.vc-thumbs button { flex: none; width: 64px; border-radius: 8px; overflow: hidden; border: 0; padding: 0; background: none; cursor: pointer; opacity: .6; transition: all .2s; }
.vc-thumbs button:hover { opacity: 1; }
.vc-thumbs button.on { width: 72px; opacity: 1; box-shadow: 0 0 0 2px var(--brand), 0 0 0 3px #1a1a1a; }
.vc-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.vc-hint { text-align: center; font-size: 11px; color: #707070; margin-top: 8px; }

/* VIP 图片详情：约束真实 VipContent 双栏，避免大图固有宽度撑开页面。 */
.vipsub-page { width: 100%; max-width: 100%; overflow-x: hidden; }
.vipsub-page .vc-body { width: 100%; max-width: 1280px; }
.vipsub-page .vc-layout,
.vipsub-page .vc-viewer,
.vipsub-page .vc-stage,
.vipsub-page .vc-main { min-width: 0; max-width: 100%; }
.vipsub-page .vc-viewer { overflow: hidden; }
.vipsub-page .vc-main { display: flex; width: 100%; padding: 0; border: 0; background: transparent; align-items: center; justify-content: center; cursor: pointer; }
.vipsub-page .vc-main img { pointer-events: none; }
.vipsub-page .vc-thumbs button { flex: none; width: 64px; border-radius: 8px; overflow: hidden; opacity: .6; transition: all .2s; }
.vipsub-page .vc-thumbs button:hover { opacity: 1; }
.vipsub-page .vc-thumbs button.on { width: 72px; opacity: 1; box-shadow: 0 0 0 2px var(--brand), 0 0 0 3px #1a1a1a; }
@media (min-width: 1024px) {
  .vipsub-page .vc-side { width: min(420px, 34vw); }
}

/* 趋势分析详情对齐 VipContentPage：白底通栏，420px 说明卡 + 自适应看图器。 */
.vip-content-page { background: #fff; }
.vip-content-page .vc-body { width: 100%; max-width: none; margin: 0; padding: 12px 24px 40px; }
.vip-content-page .vc-layout { gap: 16px; }
.vip-content-page .vc-badges .season,
.vip-content-page .vc-tags span { background: #fff; }
.vip-content-page .vipbar-back { color: #b8b8b8; }
.vip-content-page .vipbar-back:hover { color: #f6f6f6; }
.vip-content-page .vc-viewer { overflow: visible; }
.vip-content-page .vc-frame { overflow: hidden; background: #1a1a1a; border: 1px solid #374151; border-radius: 16px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); }
.vip-content-page .vc-stage { border: 0; border-radius: 0; }
.vip-content-page .vc-thumbs { align-items: center; border: 0; border-top: 1px solid #374151; border-radius: 0; padding-bottom: 16px; }
.vip-content-page .vc-arrow:disabled,
.vip-content-page .vc-thumbs button:disabled { cursor: wait; }
.vip-content-page .vc-loading { position: absolute; top: 12px; right: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; }
@media (min-width: 1024px) {
  .vip-content-page .vc-side { width: 420px; }
}
@media (max-width: 1023px) {
  .vip-content-page .vc-side { position: static; }
  .vip-content-page .vc-viewer { width: 100%; }
}
@media (max-width: 767px) {
  .vip-content-page .vc-body { padding: 12px 16px 32px; }
}

/* ==========================================================================
   认识我们 / 联系我们 / 会员服务 / 网站导航 / 免责声明（ab-*：对齐 CA9 AboutUsCombinedPage）
   ========================================================================== */
.ab-page { min-height: 100vh; background: #f0f0f3; }
.ab-shell { max-width: 1280px; margin: 0 auto; padding: 32px 24px; }
.ab-layout { display: flex; flex-direction: column; gap: 24px; }
.ab-side { flex: none; }
.ab-side-card { background: #fff; border-radius: 12px; border: 1px solid #e5e5e5; box-shadow: var(--shadow-sm); overflow: hidden; position: sticky; top: 24px; }
.ab-side-head { padding: 16px; border-bottom: 1px solid #e5e5e5; }
.ab-side-head h2 { font-size: 16px; font-weight: 700; color: #101010; }
.ab-side-card nav { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.ab-side-card nav button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; border-radius: 8px; font-size: 14px; font-weight: 500; color: #707070; cursor: pointer; transition: all .2s; text-align: left; font-family: inherit; }
.ab-side-card nav button .icon { width: 16px; height: 16px; }
.ab-side-card nav button:hover { background: #f0f0f3; color: #101010; }
.ab-side-card nav button.active { background: #101010; color: #fff; }
.ab-main { flex: 1; min-width: 0; }
.ab-stack-8 > * + * { margin-top: 32px; }
.ab-stack-6 > * + * { margin-top: 24px; }
.ab-stack-4 > * + * { margin-top: 16px; }
@media (min-width: 1024px) {
  .ab-layout { flex-direction: row; }
  .ab-side { width: 220px; }
}

/* 通用卡 / 网格 */
.ab-card { background: #fff; border-radius: 12px; border: 1px solid #e5e5e5; padding: 24px; }
.ab-card h3 { font-size: 18px; font-weight: 700; color: #101010; margin-bottom: 16px; }
.ab-card p { font-size: 14px; color: #505050; line-height: 1.625; }
.ab-card-lg { padding: 32px; }
.ab-mb4 { margin-bottom: 16px; }
.ab-mb3 { margin-bottom: 12px; }
.ab-hq p + p { margin-top: 12px; }
.ab-grid-2 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px; }
.ab-grid-3 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px; }
.ab-grid-md3 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 640px) {
  .ab-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) { .ab-grid-md3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ab-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* about */
.ab-hero { background: linear-gradient(135deg, #1a1a2e, #2d2d44 50%, #1a1a2e); border-radius: 16px; padding: 32px; text-align: center; }
.ab-hero img { height: 80px; margin: 0 auto 16px; }
.ab-hero h1 { font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.ab-hero p { color: #ffc300; font-weight: 500; }
.ab-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-tags span { padding: 6px 12px; border-radius: 999px; font-size: 12px; color: #505050; background: #f0f0f3; border: 1px solid #e5e5e5; }
.ab-block { background: #f8f8f8; border-radius: 8px; padding: 16px; }
.ab-block-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ab-block-ico { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.ab-block-ico .icon { width: 14px; height: 14px; }
.ab-block-head span { font-size: 14px; font-weight: 700; color: #101010; }
.ab-block-items { display: flex; flex-wrap: wrap; gap: 4px; }
.ab-block-items span { padding: 2px 8px; background: #fff; border-radius: 4px; font-size: 10px; color: #707070; border: 1px solid #e5e5e5; }
.ab-card-ai { background: linear-gradient(135deg, #ecfeff, #eff6ff); border-color: #cffafe; }
.ab-ai-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ab-ai-head .icon { width: 20px; height: 20px; color: #0891b2; }
.ab-ai-head h3 { margin-bottom: 0; }
.ab-tags-ai span { background: #fff; border-color: #cffafe; padding: 4px 10px; }
.ab-svc { display: flex; align-items: center; gap: 8px; background: #f8f8f8; border-radius: 8px; padding: 12px; }
.ab-svc-no { flex: none; width: 24px; height: 24px; border-radius: 999px; background: rgba(255, 195, 0, .15); color: #b38600; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.ab-svc-name { font-size: 14px; color: #505050; }
.ab-culture { background: #f8f8f8; border-radius: 8px; padding: 16px; text-align: center; }
.ab-culture .icon { width: 24px; height: 24px; color: #ffc300; margin: 0 auto 8px; display: block; }
.ab-culture-label { font-size: 12px; color: #707070; margin-bottom: 4px; }
.ab-culture-value { font-size: 14px; font-weight: 700; color: #101010; }
.ab-closing { background: linear-gradient(90deg, rgba(255, 195, 0, .1), rgba(255, 195, 0, .05)); border-radius: 12px; border: 1px solid rgba(255, 195, 0, .2); padding: 24px; text-align: center; }
.ab-closing .icon { width: 28px; height: 28px; color: #ffc300; margin: 0 auto 12px; display: block; }
.ab-closing p { font-size: 14px; color: #505050; line-height: 1.625; }

/* contact */
.ab-hotline { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.ab-hotline-ico { width: 56px; height: 56px; border-radius: 999px; background: rgba(255, 195, 0, .15); display: flex; align-items: center; justify-content: center; color: #ffc300; flex: none; }
.ab-hotline-ico .icon { width: 28px; height: 28px; }
.ab-hotline-label { font-size: 14px; color: #707070; }
.ab-hotline-num { font-size: 24px; font-weight: 700; color: #101010; }
.ab-contact-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px; border-top: 1px solid #e5e5e5; padding-top: 24px; }
@media (min-width: 768px) { .ab-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ab-ci-label { font-size: 12px; color: #707070; }
.ab-ci-value { font-size: 14px; font-weight: 500; color: #101010; }
.ab-office { padding: 20px; }
.ab-office h3 { font-size: 16px; font-weight: 700; color: #101010; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #ffc300; }
.ab-office-items > * + * { margin-top: 8px; }

/* membership */
.ab-lv-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-lv-btn { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .2s; background: #fff; color: #707070; border: 1px solid #e5e5e5; font-family: inherit; }
.ab-lv-btn:hover { background: #f9fafb; }
.ab-lv-btn.active { color: #fff; border-color: transparent; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); }
.ab-lv-btn.active:hover { background: inherit; }
.ab-lv-btn .icon { width: 16px; height: 16px; }
.ab-lv-head { border-radius: 12px; padding: 24px; color: #fff; }
.ab-lv-head p { font-size: 12px; opacity: .8; letter-spacing: .05em; }
.ab-lv-head h2 { font-size: 24px; font-weight: 700; }
.ab-sec { background: #fff; border-radius: 12px; border: 1px solid #e5e5e5; overflow: hidden; }
.ab-sec-head { display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: #f8f8f8; border-bottom: 1px solid #e5e5e5; }
.ab-sec-head .icon { width: 16px; height: 16px; color: #ffc300; }
.ab-sec-head h3 { font-size: 14px; font-weight: 700; color: #101010; }
.ab-sec-head-dark .icon { color: #101010; }
.ab-sec-body > * + * { border-top: 1px solid #f0f0f3; }
.ab-sec-row { padding: 12px 20px; display: flex; flex-direction: column; }
.ab-sec-name { font-size: 14px; font-weight: 700; flex: none; }
.ab-sec-row p { font-size: 14px; color: #707070; }
@media (min-width: 768px) {
  .ab-sec-row { flex-direction: row; gap: 12px; }
  .ab-sec-name { width: 100px; }
}
.ab-ai-banner { background: linear-gradient(135deg, #22d3ee, #3b82f6); border-radius: 12px; padding: 24px; color: #fff; }
.ab-ai-banner h2 { font-size: 24px; font-weight: 700; }
.ab-ai-banner p { font-size: 14px; opacity: .9; }
.ab-ai-card { padding: 20px; }
.ab-ai-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ab-ai-ico { width: 40px; height: 40px; border-radius: 8px; background: #ecfeff; display: flex; align-items: center; justify-content: center; color: #06b6d4; flex: none; }
.ab-ai-ico .icon { width: 20px; height: 20px; }
.ab-ai-card-head h3 { font-size: 16px; font-weight: 700; color: #101010; margin-bottom: 0; }
.ab-ai-feats > * + * { margin-top: 8px; }
.ab-ai-feat { display: flex; align-items: flex-start; gap: 6px; }
.ab-ai-feat .icon { width: 14px; height: 14px; color: #ffc300; margin-top: 2px; flex: none; }
.ab-ai-feat p { font-size: 14px; color: #707070; }
.ab-contact-cta { padding: 20px; text-align: center; }
.ab-contact-cta p { font-size: 14px; color: #707070; margin-bottom: 4px; }
.ab-contact-cta .ab-cta-num { font-size: 18px; font-weight: 700; color: #101010; margin-bottom: 0; }

/* sitemap */
.ab-table-wrap { background: #fff; border-radius: 12px; border: 1px solid #e5e5e5; overflow: hidden; }
.ab-table-scroll { overflow-x: auto; }
.ab-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ab-table thead tr { background: #101010; color: #fff; }
.ab-table th { padding: 12px 16px; text-align: left; font-weight: 700; }
.ab-table th.c { text-align: center; }
.ab-table th.w80 { width: 80px; }
.ab-table th.w120 { width: 120px; }
.ab-table th.w100 { width: 100px; }
.ab-table td { padding: 12px 16px; border-bottom: 1px solid #e5e5e5; }
.ab-table tbody tr:hover { background: #f8f8f8; }
.ab-table tr.ab-cat-end td { border-bottom: 2px solid #d0d0d0; }
.ab-td-cat { font-weight: 700; color: #101010; background: #f8f8f8; vertical-align: middle; text-align: center; border-right: 1px solid #e5e5e5; }
.ab-td-name { font-weight: 500; color: #101010; border-right: 1px solid #e5e5e5; white-space: nowrap; }
.ab-dash { color: #b0b0b0; }
.ab-td-freq { color: #707070; text-align: center; border-right: 1px solid #e5e5e5; white-space: nowrap; }
.ab-td-desc { color: #707070; line-height: 1.625; }

/* disclaimer */
.ab-updated { padding: 16px; text-align: center; }
.ab-updated p { font-size: 12px; color: #707070; }
.ab-sec-text { padding: 20px; font-size: 14px; color: #505050; line-height: 1.625; white-space: pre-line; }
.ab-terms { padding: 20px; }
.ab-terms > * + * { margin-top: 16px; }
.ab-terms h4 { font-size: 14px; font-weight: 700; color: #101010; margin-bottom: 4px; }
.ab-terms p { font-size: 14px; color: #505050; line-height: 1.625; }

/* ==========================================================================
   会员中心
   ========================================================================== */
.member-page { background: #f4f5f7; padding: 32px 0 56px; min-height: 60vh; }
.member-shell { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }

/* 左侧菜单 */
.member-side { background: #fff; border-radius: 12px; box-shadow: var(--shadow-card); padding: 8px 0; }
.member-side-group + .member-side-group { border-top: 1px solid #f0f0f3; margin-top: 8px; padding-top: 8px; }
.member-side-head { display: flex; align-items: center; gap: 8px; padding: 10px 20px; }
.member-side-head.clickable { cursor: pointer; }
.member-side-head .icon { width: 16px; height: 16px; color: #8a8a93; }
.member-side-head h3 { font-size: 15px; font-weight: 700; color: #2b2b33; }
.member-side-group nav { display: flex; flex-direction: column; padding: 2px 12px 8px; }
.member-side-group nav a { padding: 8px 12px 8px 36px; border-radius: 8px; font-size: 14px; color: #55555e; transition: background-color .2s, color .2s; }
.member-side-group nav a:hover { background: #f6f6f8; color: #101010; }
.member-side-group nav a.active { background: #f0f0f3; color: #101010; font-weight: 600; }

/* 右侧主区 */
.member-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* 用户卡片 */
.member-user-card {
  display: flex; align-items: center; gap: 20px;
  padding: 28px 32px; border-radius: 16px;
  background: linear-gradient(120deg, #23232e, #35354a);
  box-shadow: var(--shadow-card);
}
.member-user-avatar {
  flex: none; width: 64px; height: 64px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 195, 0, .12); border: 1px solid rgba(255, 195, 0, .35);
}
.member-user-avatar .icon { width: 30px; height: 30px; color: #ffc300; }
.member-user-info { flex: 1; min-width: 0; }
.member-user-info .row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.member-user-info h1 { font-size: 22px; font-weight: 700; color: #fff; }
.member-level { font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 999px; color: #3a2c00; background: #ffc300; }
.member-user-info p { font-size: 14px; color: rgba(255, 255, 255, .65); }
.member-user-info p b { color: #ffc300; font-weight: 600; }
.member-upgrade {
  flex: none; padding: 10px 24px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: #3a2c00; background: #ffc300;
  transition: background-color .2s;
}
.member-upgrade:hover { background: #ffcf33; }

/* 白色面板 */
.member-panel { background: #fff; border-radius: 16px; padding: 24px 28px; box-shadow: var(--shadow-card); }
.member-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.member-panel-head h2 { font-size: 16px; font-weight: 700; color: #1f1f26; }
.member-panel-head span { font-size: 13px; color: #9a9aa3; }

/* 前台允许查看 */
.member-channels { display: flex; flex-wrap: wrap; gap: 10px; }
.member-channels span {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  font-size: 14px; color: #3c3c44; background: #fafafa; border: 1px solid #eeeeF2;
}
.member-channels .icon { width: 14px; height: 14px; color: #d97706; }

/* 点数与下载额度 */
.quota-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.quota-card { padding: 20px; border-radius: 12px; background: #fafafa; border: 1px solid #f0f0f3; }
.quota-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.quota-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; }
.quota-ico .icon { width: 20px; height: 20px; }
.quota-ico.teal { background: #14b8a6; }
.quota-ico.red { background: #ef4444; }
.quota-ico.green { background: #22c55e; }
.quota-ico.blue { background: #3b82f6; }
.quota-head h3 { font-size: 15px; font-weight: 700; color: #1f1f26; }
.quota-head p { font-size: 12px; color: #9a9aa3; margin-top: 2px; }
.quota-num { font-size: 26px; font-weight: 700; color: #1f1f26; }
.quota-num small { font-size: 13px; font-weight: 400; color: #9a9aa3; margin-left: 4px; }

/* 已绑定微信 */
.wechat-row { display: flex; align-items: center; gap: 14px; }
.wechat-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; background: #22c55e; }
.wechat-ico .icon { width: 20px; height: 20px; }
.wechat-meta { flex: 1; min-width: 0; }
.wechat-meta b { font-size: 15px; color: #1f1f26; }
.wechat-meta p { font-size: 13px; color: #9a9aa3; margin-top: 2px; }
.wechat-row button { flex: none; padding: 8px 20px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #55555e; background: #f0f0f3; transition: background-color .2s; }
.wechat-row button:hover { background: #e4e4e9; }

@media (max-width: 900px) {
  .member-shell { grid-template-columns: 1fr; }
  .quota-grid { grid-template-columns: 1fr; }
  .member-user-card { flex-wrap: wrap; }
}

/* ==========================================================================
   我的收藏
   ========================================================================== */
.fav-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.fav-head h1 { font-size: 20px; font-weight: 700; color: var(--gray-900); }
.fav-head p { font-size: 12px; color: var(--gray-400); margin-top: 4px; }
.fav-new { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--gray-900); background: var(--brand); }
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.folder-card { background: #fff; border-radius: 16px; padding: 12px; box-shadow: var(--shadow-card); transition: box-shadow .2s; }
.folder-card:hover { box-shadow: var(--shadow-card-hover); }
.folder-card .cover { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--gray-50); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; color: #e8a000; }
.folder-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.folder-card .count { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 999px; font-size: 10px; color: #fff; background: rgba(0, 0, 0, .45); }
.folder-card .name { font-size: 14px; font-weight: 500; color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-card .sub { font-size: 11px; color: var(--gray-400); }
.folder-add { border: 2px dashed var(--line); border-radius: 16px; padding: 12px; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--gray-400); transition: all .2s; }
.folder-add:hover { border-color: var(--brand); color: #b98c00; }

/* ==========================================================================
   采购商主题详情
   ========================================================================== */
.buyer-page { min-height: 60vh; background: #fafafa; }
.buyer-head { background: #fff; border-bottom: 1px solid var(--gray-100); }
.buyer-head-inner { padding: 16px 24px; }
.buyer-crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12px; color: var(--gray-400); }
.buyer-crumb a { transition: color .2s; }
.buyer-crumb a:hover { color: #b98c00; }
.buyer-crumb .icon { width: 12px; height: 12px; }
.buyer-crumb span { color: var(--gray-500); }
.buyer-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.buyer-title-main { flex: 1; min-width: 0; }
.buyer-kicker { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; font-weight: 500; color: #b98c00; }
.buyer-kicker .icon { width: 16px; height: 16px; }
.buyer-title-main h1 { font-size: 24px; font-weight: 700; color: var(--gray-900); }
.buyer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--gray-500); }
.buyer-meta > span { display: flex; align-items: center; gap: 4px; }
.buyer-meta .icon { width: 12px; height: 12px; }
.buyer-meta .rating i { display: inline-flex; }
.buyer-meta .rating .icon { width: 11px; height: 11px; fill: #fbbf24; stroke: none; }
.buyer-side-meta { display: flex; align-items: center; gap: 8px; flex: none; font-size: 12px; color: var(--gray-500); }
.buyer-side-meta > span { display: flex; align-items: center; gap: 4px; }
.buyer-side-meta .icon { width: 12px; height: 12px; }
.buyer-fav { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--gray-600); background: var(--gray-100); transition: all .2s; }
.buyer-fav .icon { width: 13px; height: 13px; }
.buyer-fav:hover { background: rgba(255, 195, 0, .12); color: #b98c00; }
.buyer-fav.on { color: #b98c00; background: rgba(255, 195, 0, .12); }
.buyer-fav.on .icon { fill: currentColor; }
.buyer-body { padding: 24px; }
.buyer-layout { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 24px; max-width: 1600px; margin: 0 auto; align-items: start; }
.buyer-info { background: #fff; border-radius: 16px; padding: 20px; box-shadow: var(--shadow-card); position: sticky; top: 96px; }
.buyer-info h3 { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--gray-900); margin-bottom: 12px; }
.buyer-info h3 .icon { width: 14px; height: 14px; color: #b98c00; }
.buyer-desc { overflow-wrap: anywhere; }
.buyer-desc p { font-size: 14px; line-height: 1.75; color: var(--gray-600); margin-bottom: 8px; }
.buyer-tags { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--gray-100); }
.buyer-tags > div { display: flex; flex-wrap: wrap; gap: 6px; }
.buyer-tags span { padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--gray-600); background: var(--gray-100); cursor: pointer; transition: all .2s; }
.buyer-tags span:hover { background: rgba(255, 195, 0, .18); color: #b98c00; }
.buyer-stats { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--gray-100); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.buyer-stats b { display: block; font-size: 18px; font-weight: 700; color: var(--gray-900); }
.buyer-stats span { font-size: 10px; color: var(--gray-400); }
.buyer-viewer-wrap { min-width: 0; }
.buyer-viewer { background: #1a1a1a; border: 1px solid #374151; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); }
.buyer-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px; max-height: 60vh; background: #111; }
.buyer-stage > img { width: 100%; max-height: 60vh; object-fit: contain; cursor: pointer; display: block; }
.buyer-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 24px; background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent); }
.buyer-caption p { font-size: 14px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.buyer-caption span { display: block; margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .7); }
.buyer-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gray-700); background: rgba(255, 255, 255, .9); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .2); transition: all .2s; }
.buyer-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.buyer-arrow .icon { width: 20px; height: 20px; }
.buyer-arrow.prev { left: 12px; }
.buyer-arrow.next { right: 12px; }
.buyer-counter { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: #fff; background: rgba(0, 0, 0, .4); }
.buyer-thumbs { display: flex; gap: 8px; padding: 12px; overflow-x: auto; border-top: 1px solid rgba(255, 255, 255, .12); scrollbar-width: none; }
.buyer-thumbs::-webkit-scrollbar { display: none; }
.buyer-thumbs button { flex: none; width: 64px; border-radius: 8px; overflow: hidden; opacity: .6; transition: all .2s; }
.buyer-thumbs button:hover { opacity: 1; }
.buyer-thumbs button.on { width: 72px; opacity: 1; box-shadow: 0 0 0 2px var(--brand); }
.buyer-thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.buyer-hint { margin-top: 12px; text-align: center; font-size: 11px; color: var(--gray-400); }
@media (max-width: 1024px) {
  .buyer-layout { grid-template-columns: 1fr; }
  .buyer-info { position: static; }
}

/* ==========================================================================
   搜索结果（瀑布流）
   ========================================================================== */
.search-head { padding: 16px 20px 4px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.search-head h1 { font-size: 22px; line-height: 32px; font-weight: 600; color: var(--ink); }
.search-head span { font-size: 13px; color: var(--gray-400); }
.search-result-form { margin: 20px; display: flex; justify-content: center; gap: 8px; }
.search-result-form select,
.search-result-form input { min-height: 40px; border: 1px solid var(--gray-200); border-radius: 8px; padding: 0 12px; background: #fff; }
.search-result-form input { width: min(520px, 60vw); }
.search-result-form button { min-height: 40px; border: 0; border-radius: 8px; padding: 0 22px; background: var(--yellow); color: var(--ink); font-weight: 600; cursor: pointer; }
.ca9-parity-search .search-toolbar { margin: 16px 24px 0; padding: 8px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; font-size: 13px; color: var(--gray-500, #6b7280); }
.ca9-parity-search .search-head { padding: 0; min-width: 0; }
.ca9-parity-search .search-head h1 { overflow-wrap: anywhere; }
.ca9-parity-search .search-results { padding: 16px 24px 40px; align-items: start; }
.ca9-parity-search .search-results .media { aspect-ratio: 1 / 1; }
.ca9-parity-search .search-results .media > a { display: block; width: 100%; height: 100%; }
.ca9-parity-search .search-results .media img { display: block; width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: cover; }
.ca9-parity-search .search-toolbar-group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ca9-parity-search .search-toolbar a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 6px; color: inherit; text-decoration: none; }
.ca9-parity-search .search-toolbar a.active { background: var(--brand, #ffc300); color: var(--ink); font-weight: 600; }
.ca9-parity-search .search-toolbar a:hover { color: var(--ink); background: var(--gray-100, #f3f4f6); }
.ca9-parity-search .search-toolbar a:focus-visible, .ca9-parity-search .search-toolbar select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ca9-parity-search .search-toolbar label { display: inline-flex; align-items: center; gap: 4px; }
.ca9-parity-search .search-toolbar select { min-height: 34px; max-width: 140px; padding: 0 8px; border: 1px solid var(--gray-200); border-radius: 6px; background: #fff; color: var(--ink); }
@media (max-width: 640px) { .ca9-parity-search .search-toolbar { margin: 12px 12px 0; } .ca9-parity-search .search-toolbar-filters { width: 100%; } .ca9-parity-search .search-results { padding-left: 12px; padding-right: 12px; } }
.masonry { padding: 24px 20px 64px; column-gap: 16px; columns: 2; }
.masonry > * { break-inside: avoid; margin-bottom: 16px; }
.masonry-card { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--shadow-card); transition: box-shadow .3s; cursor: pointer; }
.masonry-card:hover { box-shadow: var(--shadow-card-hover); }
.masonry-card .media { position: relative; overflow: hidden; }
.masonry-card .media::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0); transition: background-color .3s; pointer-events: none; }
.masonry-card:hover .media::after { background: rgba(0, 0, 0, .1); }
.masonry-card .media img { width: 100%; object-fit: cover; max-height: 240px; min-height: 180px; transition: transform .5s ease; }
.masonry-card.tall .media img { max-height: 360px; min-height: 280px; }
.masonry-card:hover .media img { transform: scale(1.05); }
.masonry-card .mc-fav { position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 999px; border: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .9); color: var(--gray-500, #6b7280); cursor: pointer; opacity: 0; transition: all .3s; }
.masonry-card:hover .mc-fav { opacity: 1; }
.masonry-card .mc-fav:hover { background: #fff; }
.masonry-card .mc-fav.on { background: #ef4444; color: #fff; }
.masonry-card .mc-fav.on .icon { fill: currentColor; }
.masonry-card .mc-fav .icon { width: 16px; height: 16px; }
.masonry-card .tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.masonry-card .tag .icon { width: 11px; height: 11px; }
.masonry-card .body { padding: 12px; }
.masonry-card h3 { font-size: 14px; font-weight: 600; color: var(--gray-900); line-height: 1.5; transition: color .2s; }
.masonry-card:hover h3 { color: var(--brand); }
.masonry-card .meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--gray-400); }
.masonry-card .meta span { display: inline-flex; align-items: center; gap: 4px; }
.masonry-card .meta .icon { width: 11px; height: 11px; }
.mc-in { animation: mc-in .4s ease both; }
@keyframes mc-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.search-empty { padding: 64px 20px; text-align: center; }
.search-empty p { font-size: 14px; color: var(--gray-400); }
.search-empty p.tip { margin-top: 8px; font-size: 12px; }
.ca9-parity-search .search-empty p:not(.tip) { font-size: 24px; font-weight: 700; line-height: 1.5; color: var(--gray-900); }
.ca9-parity-search .search-empty p.tip { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--gray-600); }
@media (min-width: 640px) { .masonry { columns: 3; } }
@media (min-width: 1024px) { .masonry { columns: 4; } }
@media (min-width: 1280px) { .masonry { columns: 5; } }

/* ==========================================================================
   图搜图
   ========================================================================== */
.imgsearch-layout { display: flex; flex-direction: column; gap: 24px; }
.imgsearch-drop { position: relative; width: 100%; min-height: 320px; border: 2px solid #e5e7eb; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; transition: all .3s; }
.imgsearch-drop:hover { border-color: #d1d5db; }
.imgsearch-drop.dragging { border-color: var(--brand); background: rgba(255, 195, 0, .05); }
.imgsearch-drop.filled:hover { border-color: #e5e7eb; }
.imgsearch-drop input[type="file"] { display: none; }
.imgsearch-drop img { width: 100%; height: 100%; max-height: 360px; object-fit: contain; animation: lb-fade .25s ease; }
.imgsearch-drop .ph { padding: 64px 24px; font-size: 18px; letter-spacing: .3em; color: var(--gray-300); text-align: center; line-height: 2.2; }
.imgsearch-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.imgsearch-row > .label { font-size: 14px; color: var(--gray-600); flex: none; }
.imgsearch-row input[type="text"] { flex: 1; min-width: 0; padding: 6px 12px; font-size: 14px; border: 1px solid var(--line); border-radius: 4px; outline: none; }
.imgsearch-row input[type="text"]:focus { border-color: var(--brand); }
.btn-pick { padding: 6px 16px; border-radius: 4px; font-size: 14px; font-weight: 500; color: #7c3aed; background: rgba(168, 85, 247, .2); transition: background-color .2s; }
.btn-pick:hover { background: rgba(168, 85, 247, .3); }
.btn-go { padding: 6px 32px; border-radius: 4px; font-size: 14px; font-weight: 500; color: #fff; background: #a855f7; transition: background-color .2s; }
.btn-go:hover:not([disabled]) { background: #9333ea; }
.btn-go[disabled] { background: #d8b4fe; cursor: not-allowed; }
.imgsearch-kw { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; animation: lb-fade .3s ease; }
.imgsearch-kw > .label { font-size: 14px; color: var(--gray-600); flex: none; margin-top: 4px; }
.imgsearch-kw .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.imgsearch-kw .chips button { padding: 2px 8px; border-radius: 2px; font-size: 12px; color: var(--gray-600); border: 1px solid #e5e7eb; background: #fff; cursor: pointer; transition: all .2s; }
.imgsearch-kw .chips button:hover { border-color: var(--brand); color: var(--brand); }
.imgsearch-results { margin-top: 32px; animation: mc-in .4s ease both; }
.imgsearch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (min-width: 640px) { .imgsearch-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .imgsearch-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1280px) { .imgsearch-grid { grid-template-columns: repeat(7, 1fr); } }
.is-card { cursor: pointer; }
.is-card .is-media { position: relative; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); aspect-ratio: 3 / 4; transition: box-shadow .3s; }
.is-card:hover .is-media { box-shadow: 0 4px 8px rgba(0, 0, 0, .1); }
.is-card .is-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.is-card:hover .is-media img { transform: scale(1.05); }
.is-title { font-size: 12px; color: var(--gray-500); margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.is-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 2px; font-size: 10px; font-weight: 500; background: #ffedd5; color: #f97316; }
.is-score { font-size: 10px; color: var(--gray-400); }
.is-again { display: flex; justify-content: center; margin-top: 32px; }
.is-again button { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e5e7eb; color: var(--gray-600); padding: 10px 24px; border-radius: 999px; font-size: 14px; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); transition: all .2s; }
.is-again button:hover { border-color: var(--brand); color: var(--brand); }
.is-again .icon { width: 15px; height: 15px; }
.imgsearch-hint { margin-top: 40px; text-align: center; padding: 48px 0; }
.imgsearch-hint p { color: var(--gray-400); font-size: 14px; }
.imgsearch-loading { margin-top: 40px; text-align: center; padding: 48px 0; }
.is-spinner { width: 40px; height: 40px; border: 3px solid rgba(255, 195, 0, .2); border-top-color: var(--brand); border-radius: 50%; margin: 0 auto 12px; animation: is-spin 1s linear infinite; }
@keyframes is-spin { to { transform: rotate(360deg); } }
.imgsearch-loading p { color: var(--gray-500); font-size: 14px; }
@media (min-width: 1024px) { .imgsearch-layout { flex-direction: row; } .imgsearch-side { width: 360px; flex: none; } .imgsearch-main { flex: 1; } }
.crumb-inner.between { justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.crumb-inner .crumb-left { display: flex; align-items: center; gap: 8px; }
.crumb-inner .crumb-left .icon { width: 12px; height: 12px; }
.crumb-inner .crumb-left .now { color: var(--gray-500); }
.crumb-inner .guide { color: var(--gray-400); }

/* ==========================================================================
   目录订阅
   ========================================================================== */
.sub-page { min-height: 100vh; background: var(--gray-50); }
.sub-shell { max-width: 1280px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 32px; }
.sub-note { background: #fff; border-radius: 12px; border: 1px solid var(--line); padding: 24px; font-size: 14px; color: var(--gray-600); line-height: 1.9; }
.sub-note p + p { margin-top: 8px; }
.sub-block { background: #fff; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; }
.sub-block > .head { text-align: center; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.sub-block > .head h2 { font-size: 18px; font-weight: 700; color: var(--gray-900); }
.sub-block > .head i { display: block; width: 48px; height: 2px; background: var(--brand); margin: 4px auto 0; }
.sub-block > .body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
/* 产品类别行（CA9：组名 w-10 + 全选 + 逐项 checkbox） */
.cs-row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cs-row > .label { flex: none; width: 40px; margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--gray-700); }
.cs-row .opts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cs-row label { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; font-size: 14px; color: var(--gray-600); }
.cs-row label.all span { font-weight: 500; color: var(--gray-900); }
.cs-row input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--brand); }
/* 采购商目录：分区标题 + 2/4/6/8 列网格卡 */
.sub-block > .body.cs-buyers { gap: 32px; }
.cs-region h3 { text-align: center; font-size: 16px; font-weight: 700; color: var(--brand); margin-bottom: 16px; }
.cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 640px) { .cs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) { .cs-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cs-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.cs-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border-radius: 8px; border: 1px solid #f3f4f6; cursor: pointer; user-select: none; transition: all .2s; }
.cs-card:hover { border-color: #e5e7eb; background: #f9fafb; }
.cs-card.on, .cs-card.on:hover { border-color: var(--brand); background: rgba(255, 195, 0, .05); }
.cs-card-top { display: flex; align-items: center; gap: 4px; width: 100%; }
.cs-card-top input[type="checkbox"] { flex: none; width: 14px; height: 14px; accent-color: var(--brand); }
.cs-card-name { font-size: 12px; color: var(--gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-card-logo { width: 100%; height: 40px; border-radius: 4px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: #9ca3af; }
/* 订阅信息块（CA9 无块头，直接 p-6） */
.sub-block > .body.cs-info { gap: 20px; }
.cs-search-label { display: block; text-align: center; font-size: 16px; font-weight: 700; color: var(--gray-900); margin-bottom: 8px; }
.cs-search-box { position: relative; max-width: 672px; margin: 0 auto; }
.cs-search-box .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #9ca3af; }
.cs-search-box input { width: 100%; padding: 10px 16px 10px 36px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; outline: none; }
.cs-search-box input:focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.cs-tip { margin-top: 4px; text-align: center; font-size: 12px; color: var(--brand); }
.cs-picked { max-width: 672px; margin: 0 auto; border: 1px solid #d1d5db; border-radius: 8px; padding: 12px; min-height: 60px; }
.cs-picked-label { font-size: 14px; color: var(--gray-500); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cs-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 195, 0, .1); color: var(--brand); font-size: 12px; }
.cs-chip button { color: rgba(255, 195, 0, .6); cursor: pointer; transition: color .2s; }
.cs-chip button:hover { color: var(--brand); }
.cs-chip.gray { background: #f3f4f6; color: var(--gray-600); }
.cs-email { display: flex; align-items: center; justify-content: center; gap: 12px; }
.cs-email span { font-size: 14px; color: var(--gray-600); }
.cs-email input { width: 288px; padding: 8px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; outline: none; }
.cs-email input:focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.cs-submit-row { display: flex; justify-content: center; }
.cs-submit { padding: 8px 40px; border-radius: 8px; font-size: 16px; font-weight: 500; color: #fff; background: var(--brand); box-shadow: var(--shadow-sm); cursor: pointer; transition: background-color .2s; }
.cs-submit:hover { background: var(--brand-hover); }
/* 成功胶囊（CA9 页内固定 3 秒提示，非全站 toast） */
.cs-ok { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px; font-size: 14px; color: #fff; background: #111827; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); }
.cs-ok .icon { width: 16px; height: 16px; color: #4ade80; }

/* ==========================================================================
   内容详情
   ========================================================================== */
/* 内容详情（与 React 版详情页一致） */
.dt-page { min-height: 60vh; background: #fafafa; padding-bottom: 64px; }
.dt-crumb { border-bottom: 1px solid; }
.dt-crumb-inner { display: flex; align-items: center; gap: 8px; padding: 8px 24px; font-size: 12px; font-weight: 600; }
.dt-crumb-inner a { transition: opacity .2s; }
.dt-crumb-inner a:hover { opacity: .75; }
.dt-crumb-inner b { font-weight: 600; }
.dt-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 24px; background: #fff; border-bottom: 1px solid var(--gray-100); }
.dt-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dt-title h1 { font-size: 18px; font-weight: 700; color: var(--gray-900); }
.dt-title span { flex: none; font-size: 14px; color: var(--gray-500); }
.dt-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dt-actions a, .dt-actions button { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 500; transition: all .2s; }
.dt-actions .icon { width: 13px; height: 13px; }
.dt-ai { color: #fff; font-weight: 700; background: #9333ea; box-shadow: 0 0 12px rgba(147, 51, 234, .4); }
.dt-ai:hover { background: #7e22ce; box-shadow: 0 0 20px rgba(147, 51, 234, .6); }
.dt-similar:hover { filter: brightness(.96); }
.dt-fav { color: #ef4444; border: 1px solid #ef4444; background: #fff; box-shadow: 0 0 6px rgba(239, 68, 68, .35); }
.dt-fav:hover { background: rgba(255, 195, 0, .1); color: #b98c00; border-color: transparent; }
.dt-fav.on { color: #ef4444; font-weight: 700; background: var(--brand); border-color: var(--brand); box-shadow: none; }
.dt-fav.on .icon { fill: currentColor; }
.dt-big { color: #2563eb; background: #eff6ff; }
.dt-big:hover { background: #dbeafe; }
.dt-main { display: flex; gap: 0; min-height: calc(100vh - 200px); }
.dt-stage { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; padding: 16px; background: #f5f5f5; min-width: 0; }
.dt-stage > img { max-width: 900px; width: 100%; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1); cursor: pointer; transition: box-shadow .2s; }
.dt-stage > img:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .15); }
.dt-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gray-600); background: rgba(255, 255, 255, .8); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1); transition: all .2s; }
.dt-arrow:hover { color: #b98c00; background: #fff; }
.dt-arrow .icon { width: 20px; height: 20px; }
.dt-arrow.prev { left: 12px; }
.dt-arrow.next { right: 12px; }
.dt-thumbs { flex: none; width: 400px; background: #fff; box-shadow: -2px 0 8px rgba(0, 0, 0, .04); overflow-y: auto; max-height: calc(100vh - 200px); }
.dt-thumbs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; }
.dt-thumbs-grid a { border-radius: 8px; overflow: hidden; aspect-ratio: 3 / 4; transition: all .2s; }
.dt-thumbs-grid a:hover { opacity: .8; }
.dt-thumbs-grid a.on { box-shadow: 0 0 0 2px var(--brand), 0 0 0 3px #fff; }
.dt-thumbs-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-tags { padding: 16px 24px; background: #fff; border-top: 1px solid var(--gray-100); }
.dt-tags h3 { font-size: 16px; font-weight: 700; color: var(--gray-900); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--gray-100); }
.dt-tags > div { display: flex; flex-wrap: wrap; gap: 8px; }
.dt-tags a { padding: 6px 12px; border-radius: 999px; font-size: 12px; color: var(--gray-600); border: 1px solid var(--gray-200); transition: all .2s; }
.dt-tags a:hover { border-color: var(--brand); color: #b98c00; }
.dt-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 24px; background: #fafafa; border-top: 1px solid var(--gray-100); font-size: 12px; color: var(--gray-500); }
.dt-foot-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dt-stars { display: flex; align-items: center; gap: 2px; }
.dt-stars > span { margin-right: 4px; }
.dt-stars .icon { width: 12px; height: 12px; color: var(--gray-300); transition: color .15s; }
.dt-stars .icon.lit { color: #fbbf24; fill: #fbbf24; }
@media (max-width: 1023px) {
  .dt-main { flex-direction: column; min-height: 0; }
  .dt-thumbs { width: 100%; max-height: none; }
}

/* ==========================================================================
   Banner 管理后台
   ========================================================================== */
.admin-page { min-height: 100vh; background: #f9fafb; }
.admin-header { background: var(--ink); border-bottom: 2px solid var(--brand); }
.admin-header-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; }
.admin-header-left { display: flex; align-items: center; gap: 16px; }
.admin-back { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #b8b8b8; transition: color .2s; }
.admin-back .icon { width: 16px; height: 16px; }
.admin-back:hover { color: #f6f6f6; }
.admin-sep { color: rgba(184, 184, 184, .3); }
.admin-header h1 { font-size: 18px; font-weight: 700; color: #fff; }
.admin-vip-link { font-size: 14px; color: var(--brand); transition: color .2s; }
.admin-vip-link:hover { color: var(--brand-hover); }
.admin-main { max-width: 1280px; margin: 0 auto; padding: 32px 24px; }
.admin-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.admin-title h2 { font-size: 20px; font-weight: 700; color: #111827; }
.admin-title p { font-size: 14px; color: var(--gray-500); margin-top: 2px; }
.admin-new { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--ink); background: var(--brand); transition: background-color .2s; }
.admin-new .icon { width: 16px; height: 16px; }
.admin-new:hover { background: var(--brand-hover); }
.admin-form-wrap { margin-bottom: 32px; }
.admin-form { background: #fff; border-radius: 12px; border: 1px solid var(--line); padding: 24px; }
.af-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.af-head h3 { font-size: 18px; font-weight: 700; color: #111827; }
.af-head-actions { display: flex; align-items: center; gap: 8px; }
.af-preview-btn { display: flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 14px; color: var(--gray-600); border: 1px solid var(--line); border-radius: 8px; transition: all .2s; }
.af-preview-btn .icon { width: 14px; height: 14px; }
.af-preview-btn:hover { color: #111827; background: #f9fafb; }
.af-close { color: var(--gray-400); transition: color .2s; }
.af-close .icon { width: 20px; height: 20px; }
.af-close:hover { color: var(--gray-600); }
.af-preview { margin-bottom: 24px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); height: 300px; position: relative; }
.af-preview > img { width: 100%; height: 100%; object-fit: cover; }
.af-preview-veil { position: absolute; inset: 0; }
.af-preview-body { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 32px; }
.af-preview-copy { flex: 1; min-width: 0; }
.af-preview-tag { display: inline-block; padding: 4px 12px; background: var(--brand); color: var(--ink); font-size: 12px; font-weight: 700; border-radius: 999px; margin-bottom: 12px; }
.af-preview h2 { font-size: 30px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.af-preview .en { color: rgba(255, 255, 255, .6); font-size: 14px; font-weight: 500; margin-bottom: 12px; }
.af-preview .desc { color: rgba(255, 255, 255, .8); font-size: 14px; max-width: 448px; }
.af-preview-thumb { width: 192px; height: 128px; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); margin-left: 16px; flex: none; }
.af-preview-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .af-preview-thumb { display: none; } }
.af-fields { display: flex; flex-direction: column; gap: 20px; }
.af-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.af-fields label { display: block; font-size: 14px; font-weight: 500; color: #374151; margin-bottom: 6px; }
.af-fields .req { color: #ef4444; }
.af-fields input[type="text"], .af-fields textarea { width: 100%; padding: 8px 12px; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; outline: none; transition: border-color .2s, box-shadow .2s; }
.af-fields input[type="text"]:focus, .af-fields textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 1px rgba(255, 195, 0, .3); }
.af-fields textarea { resize: none; }
.af-file { display: none; }
.af-upload { position: relative; height: 128px; border-radius: 8px; border: 2px dashed #d1d5db; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f9fafb; overflow: hidden; transition: all .2s; }
.af-upload:hover { border-color: var(--brand); background: rgba(255, 195, 0, .05); }
.af-upload > img { width: 100%; height: 100%; object-fit: cover; }
.af-upload .icon { width: 20px; height: 20px; color: var(--gray-400); margin-bottom: 4px; }
.af-upload > span { font-size: 12px; color: var(--gray-500); }
.af-uploading { position: absolute; inset: 0; background: rgba(0, 0, 0, .3); display: flex; align-items: center; justify-content: center; }
.af-uploading span { color: #fff; font-size: 12px; }
.af-themes { display: flex; flex-wrap: wrap; gap: 8px; }
.af-themes button { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; font-size: 12px; border: 1px solid var(--line); transition: all .2s; }
.af-themes button:hover { border-color: #d1d5db; }
.af-themes button.active { border-color: var(--brand); background: rgba(255, 195, 0, .1); font-weight: 500; }
.af-themes .dot { width: 16px; height: 16px; border-radius: 999px; }
.af-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 8px; }
.af-cancel { padding: 8px 16px; font-size: 14px; color: var(--gray-600); border: 1px solid var(--line); border-radius: 8px; transition: all .2s; }
.af-cancel:hover { color: #111827; background: #f9fafb; }
.af-save { padding: 8px 20px; font-size: 14px; font-weight: 500; background: var(--brand); color: var(--ink); border-radius: 8px; transition: background-color .2s; }
.af-save:hover { background: var(--brand-hover); }
.af-save:disabled { opacity: .4; cursor: not-allowed; }
.banner-list { display: flex; flex-direction: column; gap: 12px; }
.banner-list article { display: flex; align-items: stretch; background: #fff; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; transition: border-color .2s; }
.banner-list article:hover { border-color: #d1d5db; }
.banner-thumb { width: 192px; height: 112px; flex: none; position: relative; }
.banner-thumb img { width: 100%; height: 100%; object-fit: cover; }
.banner-thumb-veil { position: absolute; inset: 0; opacity: .6; }
.banner-info { flex: 1; min-width: 0; padding: 12px 16px; display: flex; flex-direction: column; justify-content: space-between; }
.banner-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.banner-tag { font-size: 11px; padding: 2px 8px; background: var(--brand); color: var(--ink); font-weight: 700; border-radius: 999px; }
.banner-no { font-size: 12px; color: var(--gray-400); }
.banner-info h3 { font-size: 16px; font-weight: 700; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner-en { font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner-desc { font-size: 12px; color: var(--gray-400); margin-top: 4px; }
.banner-order { width: 48px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px solid var(--line-soft); gap: 4px; }
.banner-order button { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--gray-400); transition: all .2s; }
.banner-order button .icon { width: 16px; height: 16px; }
.banner-order button:hover { background: var(--line-soft); color: var(--gray-600); }
.banner-order button:disabled { opacity: .2; cursor: not-allowed; }
.banner-grip { width: 14px; height: 14px; color: #d1d5db; }
.banner-actions { width: 96px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px solid var(--line-soft); gap: 8px; }
.banner-actions button { display: flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 12px; color: var(--gray-600); border: 1px solid var(--line); border-radius: 8px; transition: all .2s; }
.banner-actions button .icon { width: 12px; height: 12px; }
.banner-actions button:hover { color: #111827; background: #f9fafb; }
.banner-actions .danger { color: #ef4444; border-color: #fecaca; }
.banner-actions .danger:hover { color: #b91c1c; background: #fef2f2; }
.banner-empty { text-align: center; padding: 64px 0; }
.banner-empty p { color: var(--gray-400); font-size: 14px; }

/* ==========================================================================
   页脚
   ========================================================================== */
.site-footer { background: #fff; border-top: 1px solid var(--line); }
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 40px 24px; color: var(--gray-700); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.footer-desc { font-size: 14px; line-height: 1.8; margin-bottom: 16px; color: var(--gray-600); }
.footer-contact { display: flex; flex-direction: column; gap: 8px; }
.footer-contact div { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gray-600); }
.footer-contact .icon { width: 14px; height: 14px; color: var(--gray-400); }
.footer-right { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-qr { display: flex; align-items: flex-start; gap: 20px; }
.footer-qr div { text-align: center; }
.footer-qr img { width: 110px; height: 110px; border-radius: 8px; border: 1px solid var(--line); object-fit: cover; }
.footer-qr p { font-size: 12px; color: var(--gray-500); margin-top: 8px; }
.footer-copy { font-size: 12px; color: var(--gray-400); }
.footer-copy a:hover { color: #b98c00; }
.footer-rule { border-top: 1px solid var(--line); }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-right { align-items: flex-end; }
  .footer-copy { text-align: right; }
}

/* ==========================================================================
   弹窗 / 提示
   ========================================================================== */
.modal-backdrop { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(16, 16, 16, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); padding: 16px; }
.modal-backdrop.dark { background: rgba(0, 0, 0, .82); }
.dialog-close { position: absolute; top: 12px; right: 16px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #999; transition: all .2s; }
.dialog-close:hover { color: var(--ink); background: #f3f3f3; }
.dialog-close.light { color: #fff; }
/* 登录弹窗（与 React 版一比一还原） */
.ls-wrap { width: 100%; max-width: 448px; margin: 0 16px; }
.ls-wrap.wide { max-width: 672px; }
.ls-panel { position: relative; background: #fff; border: 1px solid var(--gray-100); border-radius: 24px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1); max-height: 92vh; overflow-y: auto; }
.ls-close { position: absolute; top: 12px; right: 16px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; color: #999; transition: color .2s, background-color .2s; }
.ls-close:hover { color: var(--ink); background: #f3f3f3; }
.ls-head { text-align: center; padding: 32px 0 16px; }
.ls-head img { height: 56px; width: auto; margin: 0 auto 12px; }
.ls-head h2 { font-size: 20px; font-weight: 700; color: var(--gray-900); }
.ls-head p { font-size: 14px; color: var(--gray-500); margin-top: 4px; }
.ls-tabs { display: flex; padding: 0 24px; margin-bottom: 16px; }
.ls-tabs button { flex: 1; padding: 10px 0; font-size: 14px; font-weight: 500; color: var(--gray-500); background: var(--gray-100); transition: background-color .2s, color .2s; }
.ls-tabs button:first-child { border-radius: 8px 0 0 8px; }
.ls-tabs button:last-child { border-radius: 0 8px 8px 0; }
.ls-tabs button.active { color: var(--gray-900); background: var(--brand); }
.ls-tabs button:not(.active):hover { background: var(--gray-200); }
.ls-body { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.ls-field { position: relative; }
.ls-field > .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--gray-400); }
.ls-input { width: 100%; padding: 12px 16px; border: 1px solid var(--gray-200); border-radius: 12px; font-size: 14px; outline: none; transition: border-color .2s, box-shadow .2s; }
.ls-field > .ls-input { padding-left: 40px; }
.ls-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 195, 0, .2); }
/* 该 .ls-row 仅供登录/注册弹窗验证码行使用（gap: 8px）；
   必须限定在 .ls-body 内，否则会覆盖首页底部「趋势分析 / AIGC / 定制咨询」
   landing 行的同名类（.ls-container > .ls-row，原型排版为 gap: 72px）。 */
.ls-body .ls-row { display: flex; gap: 8px; }
.ls-cap { flex: none; display: flex; align-items: center; padding: 0 16px; border-radius: 12px; background: var(--gray-100); border: 1px solid var(--gray-200); font-weight: 700; font-style: italic; color: var(--gray-700); cursor: pointer; user-select: none; font-family: Georgia, serif; text-decoration: line-through; letter-spacing: .3em; }
.ls-sms-btn { flex: none; padding: 0 12px; border: 1px solid var(--brand); border-radius: 12px; font-size: 12px; font-weight: 500; color: var(--gray-900); transition: background-color .2s; }
.ls-sms-btn:hover { background: var(--brand); }
.ls-keep { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--gray-500); }
.ls-keep label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.ls-keep input { accent-color: var(--brand); }
.ls-keep .forgot { margin-left: auto; cursor: pointer; transition: color .2s; }
.ls-keep .forgot:hover { color: var(--gray-900); }
.ls-submit { width: 100%; padding: 12px 0; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--gray-900); background: var(--brand); box-shadow: 0 10px 15px -3px rgba(255, 195, 0, .25); transition: background-color .2s; }
.ls-submit:hover { background: var(--brand-hover); }
.ls-submit:disabled { background: var(--gray-200); color: var(--gray-400); cursor: not-allowed; box-shadow: none; }
.ls-wx-check { padding: 56px 0; text-align: center; font-size: 14px; color: var(--gray-400); }
.ls-wx-quick { padding: 32px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ls-wx-avatar { width: 64px; height: 64px; border-radius: 50%; background: #f0fdf4; display: flex; align-items: center; justify-content: center; }
.ls-wx-name { font-size: 14px; font-weight: 600; color: var(--gray-900); }
.ls-wx-hint { font-size: 12px; color: var(--gray-400); }
.ls-wx-btn { width: 100%; padding: 12px 0; border-radius: 12px; font-size: 14px; font-weight: 600; color: #fff; background: #07c160; transition: filter .2s; }
.ls-wx-btn:hover { filter: brightness(.95); }
.ls-wx-links { display: flex; align-items: center; gap: 16px; }
.ls-wx-links span { font-size: 12px; color: var(--gray-900); cursor: pointer; }
.ls-wx-links span:hover { text-decoration: underline; }
.ls-wx-qr { padding: 24px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ls-wx-qr img { width: 176px; height: 176px; border-radius: 8px; border: 1px solid var(--gray-100); object-fit: cover; }
.ls-wx-qr p { font-size: 12px; color: var(--gray-500); text-align: center; }
.ls-wx-qr span { font-size: 12px; color: var(--gray-900); cursor: pointer; }
.ls-wx-qr span:hover { text-decoration: underline; }
.ls-methods { padding-top: 12px; border-top: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; }
.ls-methods > div { display: flex; align-items: center; gap: 16px; }
.ls-methods button { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gray-400); transition: color .2s; }
.ls-methods button:hover { color: var(--gray-900); }
.ls-methods button.on { color: var(--gray-900); font-weight: 600; }
.ls-methods .icon { width: 13px; height: 13px; }
.ls-reg { max-height: 56vh; overflow-y: auto; padding-right: 4px; display: flex; flex-direction: column; gap: 16px; }
.ls-reg-roles { display: flex; align-items: center; gap: 16px; }
.ls-reg-roles > span { font-size: 14px; font-weight: 500; color: var(--gray-700); }
.ls-reg-roles label, .ls-reg-sex label { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--gray-600); cursor: pointer; }
.ls-reg input[type=radio], .ls-agree input { accent-color: var(--brand); }
.ls-reg .lb { display: block; font-size: 14px; font-weight: 500; color: var(--gray-700); margin-bottom: 4px; }
.ls-reg .ls-input { padding: 10px 16px; font-size: 16px; }
.ls-reg .hint { font-size: 12px; color: var(--gray-400); margin-top: 4px; }
.ls-reg-sex { display: flex; align-items: center; gap: 16px; }
.ls-reg-sex > span { font-size: 12px; font-weight: 500; color: var(--gray-600); }
.ls-agree { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; color: var(--gray-600); }
.ls-agree .link { color: var(--gray-900); }
.ls-agree .link:hover { text-decoration: underline; }
.ls-agree .todo { color: var(--gray-400); }
.ls-terms-mask { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); padding: 16px; }
.ls-terms { width: 100%; max-height: 100%; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); }
.ls-terms-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--gray-100); }
.ls-terms-head h3 { font-size: 14px; font-weight: 700; color: var(--gray-900); }
.ls-terms-head button { font-size: 18px; line-height: 1; color: var(--gray-400); }
.ls-terms-head button:hover { color: var(--gray-600); }
.ls-terms-body { padding: 16px 20px; overflow-y: auto; font-size: 12px; line-height: 1.9; color: var(--gray-600); }
.ls-terms-body h4 { margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--gray-900); }
.ls-terms-body h4:first-child { margin-top: 0; }
.ls-terms-body p { margin-bottom: 10px; }
.ls-terms-body p.li { margin-bottom: 4px; padding-left: 14px; }
.ls-terms-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--gray-100); }
.ls-terms-foot span { font-size: 12px; color: var(--gray-400); }
.ls-terms-foot button { padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--gray-900); background: var(--brand); transition: background-color .2s; }
.ls-terms-foot button:hover { background: var(--brand-hover); }
.ls-terms-foot button:disabled { background: var(--gray-100); color: var(--gray-400); cursor: not-allowed; }
.primary-action { padding: 11px 18px; border-radius: 999px; font-weight: 700; color: var(--ink); background: var(--brand); }
/* 全屏灯箱（对齐 CA9 FullscreenViewer） */
.lb-mask { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, .95); display: flex; flex-direction: column; animation: lb-fade .25s ease; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lb-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; color: rgba(255, 255, 255, .8); }
.lb-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lb-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-count { font-size: 14px; color: rgba(255, 255, 255, .5); flex: none; }
.lb-actions { display: flex; align-items: center; gap: 8px; }
.lb-round { width: 36px; height: 36px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .7); cursor: pointer; transition: background-color .2s; }
.lb-round:hover { background: rgba(255, 255, 255, .2); }
.lb-round .icon { width: 16px; height: 16px; }
.lb-round.liked { color: #f87171; }
.lb-round.liked .icon { fill: currentColor; }
.lb-stage { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; padding: 16px 64px; }
.lb-imgwrap { max-width: 100%; max-height: 100%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; animation: lb-in .2s ease; }
@keyframes lb-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.lb-imgbox { max-width: 100%; max-height: 100%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lb-imgbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-select: none; pointer-events: none; }
.lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .8); cursor: pointer; z-index: 10; transition: all .2s; }
.lb-arrow:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.lb-arrow.left { left: 16px; }
.lb-arrow.right { right: 16px; }
.lb-arrow .icon { width: 24px; height: 24px; }
.lb-hint { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 20; padding: 8px 16px; border-radius: 9999px; background: rgba(0, 0, 0, .7); color: rgba(255, 255, 255, .9); font-size: 14px; white-space: nowrap; pointer-events: none; user-select: none; }
.lb-zoom { position: absolute; bottom: 12px; right: 16px; z-index: 10; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, .6); color: rgba(255, 255, 255, .8); font-size: 12px; pointer-events: none; user-select: none; }
.lb-strip { padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
.lb-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.lb-thumbs::-webkit-scrollbar { display: none; }
.lb-thumb { flex-shrink: 0; width: 64px; height: 80px; border-radius: 8px; overflow: hidden; border: 0; padding: 0; background: none; cursor: pointer; opacity: .6; transition: all .2s; }
.lb-thumb:hover { opacity: 1; }
.lb-thumb.on { opacity: 1; box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--brand); }
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.toast-stack { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast-stack div { padding: 10px 20px; border-radius: 999px; font-size: 14px; color: #fff; background: rgba(16, 16, 16, .88); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); display: flex; align-items: center; gap: 6px; }
.toast-stack a { font-size: 12px; color: var(--brand); text-decoration: underline; pointer-events: auto; }

/* ==========================================================================
   市场文章页（对应 CA9 MarketArticlePage）
   ========================================================================== */
.ca9-newpc-page.ca9-market-article { width: 100%; margin: 0; padding: 0 0 64px; background: #fff; }
.ma-page { min-height: 100vh; background: #fff; }
.ma-crumbbar { background: #fff; border-bottom: 1px solid var(--gray-100); }
.ma-crumb { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 12px; color: var(--gray-400); }
.ma-crumb a { transition: color .2s; }
.ma-crumb a:hover { color: var(--brand); }
.ma-crumb .icon { width: 11px; height: 11px; }
.ma-crumb .cur { color: var(--gray-500); }
.ma-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
.ma-layout { display: flex; flex-direction: column; gap: 24px; }
.ma-main { flex: 1; min-width: 0; }
.ma-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ma-head h1 { margin: 0; font-size: 20px; font-weight: 700; color: var(--gray-900); line-height: 1.375; }
.ma-fav { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; font-size: 12px; color: #ef4444; background: #fff; border: 1px solid #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, .35); cursor: pointer; transition: all .2s; }
.ma-fav:hover { background: rgba(255, 195, 0, .1); color: var(--brand); }
.ma-fav.on { background: var(--brand); color: #ef4444; font-weight: 700; border-color: var(--brand); }
.ma-fav.on:hover { background: var(--brand-hover); color: #ef4444; }
.ma-fav .icon { width: 13px; height: 13px; }
.ma-fav.on .icon { fill: currentColor; }
.ma-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-200); font-size: 12px; color: var(--gray-400); }
.ma-meta .stars { display: inline-flex; align-items: center; gap: 4px; }
.ma-meta .stars i { display: inline-flex; }
.ma-meta .stars .icon { width: 11px; height: 11px; fill: #d99000; stroke: none; }
.ma-content { font-size: 14px; color: var(--gray-700); line-height: 1.625; }
.ma-content p { margin: 0; }
.ma-content p + p { margin-top: 16px; }
.ma-figure { margin: 20px 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.ma-figure img { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.ma-list { margin-top: 20px; }
.ma-list .lead { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--gray-900); }
.ma-list .items { display: flex; flex-direction: column; gap: 6px; }
.ma-list .row { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--gray-700); line-height: 1.625; }
.ma-list .dot { flex-shrink: 0; margin-top: 2px; color: var(--brand); }
.ma-side { width: 100%; flex-shrink: 0; }
.ma-side-inner { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 16px; }
.ma-card { background: #fff; border-radius: 12px; box-shadow: var(--shadow-sm); padding: 16px; }
.ma-card h3 { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--gray-900); }
.ca9-market-article .ma-related-list { display: flex; flex-direction: column; }
.ca9-market-article .ma-related-list a { display: block; padding: 12px 0; background: transparent; color: var(--gray-700); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; text-decoration: none; transition: color .2s; }
.ca9-market-article .ma-related-list a + a { border-top: 1px solid var(--gray-200); }
.ca9-market-article .ma-related-list a:first-child { padding-top: 0; }
.ca9-market-article .ma-related-list a:last-child { padding-bottom: 0; }
.ca9-market-article .ma-related-list a:hover { color: #997300; }
.ca9-market-article .ma-related-list a:focus-visible { color: #997300; outline: 2px solid var(--brand); outline-offset: 3px; }
.ma-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ma-tags span, .ma-tags a { max-width: 100%; overflow-wrap: anywhere; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--gray-600); background: var(--gray-100); border: 1px solid var(--gray-200); }
.ma-info { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--gray-500); }
.ma-info span { display: inline-flex; align-items: center; gap: 4px; }
.ma-info .icon { width: 11px; height: 11px; }
.ma-empty-page { min-height: 100vh; background: var(--page); display: flex; align-items: center; justify-content: center; }
.ma-empty { text-align: center; color: var(--gray-400); }
.ma-empty p { margin: 0; font-size: 14px; }
.ma-empty a { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--brand); }
.ma-empty a:hover { text-decoration: underline; }
@media (min-width: 768px) {
  .ma-crumb { padding: 8px 24px; }
  .ma-wrap { padding: 24px; }
  .ma-head h1 { font-size: 24px; }
}
@media (min-width: 1024px) {
  .ma-layout { flex-direction: row; }
  .ma-side { width: 240px; }
  .ca9-market-article .ma-main { padding-right: 24px; border-right: 1px solid var(--gray-200); }
}
/* 普通文章实际由 MarketArticle 渲染；只增加正文宽度，侧栏仍为 240px。
   桌面基准保留 1100px，高分辨率增加 100px；窄屏继续自适应。 */
@media (min-width: 1600px) {
  .ca9-market-article .ma-wrap { min-width: 1100px; max-width: 1200px; }
}
/* ==========================================================================
   卖场频道页（StoresPage，对齐 CA9 StorePage）
   ========================================================================== */
.mode-switch a { flex: 1; padding: 8px 0; border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--gray-600); background: var(--gray-100); transition: all .2s; display: flex; align-items: center; justify-content: center; }
.mode-switch a:hover { background: var(--gray-200); }
.side-resizer.on { background: rgba(255, 195, 0, .15); }
.side-resizer.on i { background: rgba(255, 195, 0, .6); }

/* 已选面板（关键词+标签 chips） */
.st-picked { margin-bottom: 12px; padding: 10px; border-radius: 8px; background: rgba(255, 195, 0, .05); }
.st-picked-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.st-picked-head span { font-size: 12px; font-weight: 500; color: var(--ink); }
.st-picked-head button { font-size: 12px; color: var(--gray-400); }
.st-picked-head button:hover { color: #b98c00; }
.st-picked-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.st-picked-chips button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink); background: var(--brand); transition: opacity .2s; }
.st-picked-chips button:hover { opacity: .8; }
.st-picked-chips .icon { width: 10px; height: 10px; }

/* 找卖场字母浮层 */
.st-letter-panel { position: fixed; top: 132px; z-index: 71; width: 360px; max-height: calc(100vh - 152px); display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line-soft); border-radius: 0 12px 12px 0; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1); }
.st-letter-panel-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.st-letter-panel-head p { margin: 0; font-size: 12px; font-weight: 700; color: var(--gray-800); }
.st-letter-panel-head .ltr { color: #ef4444; }
.st-letter-panel-head button { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 16px; line-height: 1; color: var(--gray-400); }
.st-letter-panel-head button:hover { background: var(--gray-100); color: var(--gray-700); }
.st-letter-panel-grid { overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; scrollbar-width: thin; }
.st-letter-panel-grid > button { min-width: 0; padding: 8px 6px; border: 1px solid var(--line-soft); border-radius: 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: all .2s; }
.st-letter-panel-grid > button:hover { border-color: var(--brand); background: rgba(255, 195, 0, .08); }
.st-letter-panel-grid .logo-box { width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; }
.st-letter-panel-grid .logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-letter-panel-grid .nm { display: block; width: 100%; text-align: center; font-size: 10px; line-height: 1.25; color: var(--gray-600); }

/* 琥珀头条 */
.st-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 16px; background: rgba(255, 251, 235, .7); border-bottom: 1px solid var(--line-soft); }
.st-strip-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.st-strip-l .t { font-size: 14px; font-weight: 700; color: var(--gray-900); white-space: nowrap; }
.st-strip-l .intro { font-size: 13px; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-follow { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--brand); box-shadow: var(--shadow-sm); transition: background-color .2s; white-space: nowrap; }
.st-follow:hover { background: var(--brand-hover); }
.st-follow .icon { width: 10px; height: 10px; }
.st-strip-r { flex: none; display: flex; align-items: center; gap: 12px; }
.st-zip { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ink); background: var(--brand); transition: background-color .2s; display: inline-flex; align-items: center; }
.st-zip:hover { background: var(--brand-hover); }
.st-body { padding: 20px 16px; }
.st-empty { padding: 80px 0; text-align: center; }
.st-empty p { margin: 0 0 8px; font-size: 18px; color: var(--gray-500); }
.st-empty button { margin-top: 16px; padding: 8px 20px; border-radius: 999px; font-size: 14px; color: var(--ink); background: var(--brand); }
.st-empty button:hover { background: var(--brand-hover); }
.st-saved { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-size: 14px; color: #fff; background: var(--gray-900); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1); }
.st-saved .icon { width: 16px; height: 16px; color: #4ade80; }

/* 展会频道页（ExpoPage，对齐 CA9 ExpoPage）——结构复用卖场组 side-st-* 类，
   仅头条底色不同（CA9 为 sky-50/70），找展会 logo 格复用 .logo-grid */
.ep-strip { background: rgba(240, 249, 255, .7); }
.ep-finder-title { font-weight: 700; }
.ep-logo-grid {
  width: 100%;
  max-height: none;
  overflow-y: visible;
  padding: 4px 0 0;
}
.ca9-newpc-channel .card-grid { gap: 12px; }
.ca9-newpc-channel .card-grid > .list-card { border-radius: 16px; }
.ca9-expo-channel .card-grid > .list-card > .media img {
  object-fit: cover;
  object-position: center;
}
.ca9-newpc-channel .card-grid > .list-card > .body.tight { height: 46px; }
.ca9-newpc-channel .card-grid > .list-card > .body.tight h3 { line-height: 1.25; }
.ca9-stores-channel .card-grid > .list-card > .media img,
.ca9-catalog-channel .card-grid > .list-card > .media img,
.ca9-material-channel .card-grid > .list-card > .media img,
.ca9-highlights-channel .card-grid > .list-card > .media img {
  object-fit: cover;
  object-position: center;
}
.ca9-catalog-channel .card-grid > .list-card > .body.tight,
.ca9-material-channel .card-grid > .list-card > .body.tight,
.ca9-highlights-channel .card-grid > .list-card > .body.tight {
  display: block;
  height: auto;
  min-height: 31px;
}
@media (max-width: 767px) {
  .st-letter-panel { display: none; }
  .st-strip { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* 目录频道页（CatalogPage，对齐 CA9 CatalogPage）——结构复用卖场组 side-*st-* 类，
   仅头条底色（CA9 为 emerald-50/70）、找公司浮层（330px 文本卡，无 logo）与卡片心形收藏为新增 */
.cp-strip { background: rgba(236, 253, 245, .7); }
.cp-company-panel { width: 330px; }
.cp-company-empty { grid-column: 1 / -1; padding: 28px 12px; text-align: center; color: var(--gray-400); }
.cp-company-grid { overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; scrollbar-width: thin; }
.cp-company-grid > button { min-width: 0; padding: 4px; border: 1px solid var(--line-soft); border-radius: 4px; font-size: 11px; color: var(--gray-700); text-align: center; transition: all .2s; }
.cp-company-grid > button:hover { border-color: var(--brand); background: rgba(255, 195, 0, .08); color: #b98c00; }
.cp-company-grid .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; line-height: 1.25; }
.cp-company-grid .hot { margin-left: 4px; padding: 0 4px; border-radius: 4px; background: #ef4444; color: #fff; font-size: 9px; line-height: 14px; display: inline-block; vertical-align: middle; }
.cp-company-grid .cnt { display: block; font-size: 9px; color: var(--gray-300); }
.cp-company-grid .cnt.on { color: #f87171; }
.cp-card .cp-fav { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--gray-500); background: rgba(255, 255, 255, .9); opacity: 0; transition: all .2s; z-index: 2; }
.cp-card:hover .cp-fav { opacity: 1; }
.cp-card .cp-fav.on { opacity: 1; color: #fff; background: #ef4444; }
.cp-card .cp-fav .icon { width: 12px; height: 12px; }
.cp-back { margin-top: 12px; }
.cp-back a { font-size: 12px; color: #b98c00; }
.cp-back a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .cp-company-panel { display: none; }
}

/* ==========================================================================
   卖场图册页（StoreThumbnailPage，对齐 CA9 StoreThumbnailPage）
   ========================================================================== */
.sth-page { min-height: 100vh; background: var(--page); padding-bottom: 64px; }
.sth-page .crumb-inner { max-width: none; padding: 6px 16px; }
.sth-page .crumb-inner .icon { width: 14px; height: 14px; }
.sth-head { background: #fff; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.sth-head-inner { padding: 0 16px; display: flex; flex-direction: column; gap: 16px; }
.sth-cover { width: 100%; max-width: 240px; flex: none; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 3 / 4; }
.sth-cover img { width: 100%; height: 100%; object-fit: cover; }
.sth-info { flex: 1; min-width: 0; }
.sth-badges { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sth-badges .badge { font-size: 10px; padding: 2px 8px; border-radius: 4px; font-weight: 500; color: #b98c00; background: rgba(255, 195, 0, .1); }
.sth-badges .src { font-size: 10px; color: var(--gray-400); }
.sth-info h1 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: var(--gray-900); line-height: 1.3; }
.sth-info .sum { margin: 0 0 8px; max-width: 560px; font-size: 12px; color: var(--gray-500); line-height: 1.625; }
.sth-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sth-actions .total { font-size: 12px; color: var(--gray-600); }
.sth-actions .act { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gray-500); background: var(--gray-50); padding: 4px 10px; border-radius: 8px; transition: color .2s; }
.sth-actions .act:hover { color: #b98c00; }
.sth-actions .act .icon { width: 12px; height: 12px; }
.sth-actions .fav { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 6px 16px; border-radius: 999px; border: 1px solid #ef4444; color: #ef4444; background: #fff; box-shadow: 0 0 6px rgba(239, 68, 68, .35); transition: all .2s; }
.sth-actions .fav:hover { background: rgba(255, 195, 0, .1); color: var(--brand); }
.sth-actions .fav.on { background: var(--brand); border-color: var(--brand); color: #ef4444; font-weight: 700; }
.sth-actions .fav.on:hover { background: var(--brand-hover); }
.sth-actions .fav .icon { width: 12px; height: 12px; }
.sth-actions .zip { font-size: 14px; padding: 6px 16px; border-radius: 999px; font-weight: 500; color: var(--ink); background: var(--brand); transition: background-color .2s; display: inline-flex; align-items: center; }
.sth-actions .zip:hover { background: var(--brand-hover); }

.sth-filter { background: #fff; border-bottom: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); }
.sth-filter-inner { padding: 12px 16px; }
.sth-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.sth-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
.sth-search .lbl { font-size: 12px; color: var(--gray-500); flex: none; }
.sth-search input { width: 240px; padding: 4px 8px; font-size: 12px; border: 1px solid var(--line); border-radius: 4px; outline: none; }
.sth-search input:focus { border-color: var(--brand); }
.sth-search > button { flex: none; width: 28px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 4px; color: #fff; background: var(--brand); }
.sth-search > button:hover { background: var(--brand-hover); }
.sth-search .kw-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 500; color: #b98c00; background: rgba(255, 195, 0, .1); }
.sth-filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--gray-600); background: var(--gray-100); transition: all .2s; }
.sth-filter-btn.on { color: #fff; background: var(--brand); }
.sth-filter-btn .icon { width: 14px; height: 14px; }
.sth-filter-btn .cnt { font-size: 12px; color: #fff; background: rgba(255, 255, 255, .25); padding: 2px 6px; border-radius: 999px; }
.sth-clear { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--gray-500); }
.sth-clear:hover { color: #b98c00; }
.sth-clear .icon { width: 14px; height: 14px; }
.sth-picked { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sth-picked .lbl { font-size: 12px; color: var(--gray-400); }
.sth-picked button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: #b98c00; background: rgba(255, 195, 0, .1); }
.sth-picked button:hover { background: rgba(255, 195, 0, .2); }
.sth-picked .icon { width: 12px; height: 12px; }
.sth-cloud { display: flex; align-items: flex-start; gap: 12px; border-top: 1px solid var(--line-soft); padding-top: 12px; margin-bottom: 12px; }
.sth-cloud .lbl { flex: none; width: 40px; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--gray-400); }
.sth-cloud .cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.sth-cloud .cloud button, .sth-hot button { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; font-size: 14px; color: var(--gray-600); background: var(--gray-100); transition: all .2s; }
.sth-cloud .cloud button:hover, .sth-hot button:hover { background: var(--gray-200); }
.sth-cloud .cloud button.on, .sth-hot button.on { color: #fff; background: var(--brand); }
.sth-cloud .n, .sth-hot .n { font-size: 12px; color: var(--gray-400); }
.sth-cloud .on .n, .sth-hot .on .n { color: rgba(255, 255, 255, .7); }
.sth-hot { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-top: 4px; scrollbar-width: none; }
.sth-hot button { flex: none; white-space: nowrap; }
.sth-hot .more { flex: none; font-size: 14px; color: var(--brand); background: none; padding: 6px 0; }
.sth-hot .more:hover { text-decoration: underline; background: none; }

.sth-body { padding: 32px 16px 0; }
.sth-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sth-card { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow-card); transition: box-shadow .3s; cursor: pointer; }
.sth-card:hover { box-shadow: var(--shadow-card-hover); }
.sth-card-media { position: relative; overflow: hidden; aspect-ratio: 1 / 1; }
.sth-card-media img { width: 100%; height: 100%; object-fit: cover; }
.sth-card-media .veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .4), transparent 50%, transparent); opacity: 0; transition: opacity .2s; }
.sth-card:hover .veil { opacity: 1; }
.sth-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px; }
.sth-card-foot h4 { flex: 1; min-width: 0; margin: 0; font-size: 12px; font-weight: 500; color: var(--gray-800); }
.sth-card-foot .sim { flex: none; font-size: 10px; padding: 2px 8px; border-radius: 4px; color: #b98c00; background: rgba(255, 195, 0, .1); }
@media (min-width: 640px) { .sth-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .sth-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sth-head-inner { flex-direction: row; }
  .sth-cover { width: 140px; max-width: none; }
}
@media (min-width: 1280px) { .sth-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* ==========================================================================
   卖场实拍查看页（StoreDetailPage，对齐 CA9 StoreDetailPage）
   ========================================================================== */
.std-page { min-height: 100vh; background: var(--page); padding-bottom: 64px; }
.std-crumb { background: #fff; border-bottom: 1px solid #fed7aa; }
.std-crumb-inner { padding: 8px 16px; display: flex; align-items: center; gap: 8px; font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; font-size: 12px; line-height: 16px; font-weight: 600; }
.std-crumb-inner a { color: #c2410c; }
.std-crumb-inner a:hover { color: #7c2d12; }
.std-crumb-inner .sep { color: #f97316; }
.std-crumb-inner .now { color: #7c2d12; }
.std-head { background: #fff; border-bottom: 1px solid var(--line-soft); padding: 12px 16px; }
.std-head-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.std-head-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.std-head-l h1 { margin: 0; font-size: 18px; font-weight: 700; color: var(--gray-900); }
.std-head-l .n { font-size: 14px; color: var(--gray-500); white-space: nowrap; }
.std-head-r { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.std-ai { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; font-size: 12px; line-height: 16px; font-weight: 700; color: #fff; background: #9333ea; box-shadow: 0 0 12px rgba(147, 51, 234, .4); transition: all .2s; }
.ca9-newpc a.std-ai { color: #fff; }
.std-ai:hover { background: #7e22ce; box-shadow: 0 0 20px rgba(147, 51, 234, .6); }
.std-ai .icon { width: 14px; height: 14px; }
.std-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; font-size: 12px; line-height: 16px; font-weight: 500; transition: all .2s; }
.std-btn .icon { width: 13px; height: 13px; }
.std-btn.similar { color: #ea580c; background: #fff; }
.std-btn.similar:hover { background: #ffedd5; }
.std-btn.fav { color: #ef4444; background: #fff; border: 1px solid #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, .35); }
.std-btn.fav:hover { background: rgba(255, 195, 0, .1); color: var(--brand); }
.std-btn.fav.on { background: var(--brand); border-color: var(--brand); color: #ef4444; font-weight: 700; }
.std-btn.big { color: #2563eb; background: #fff; }
.std-btn.big:hover { background: #dbeafe; }
.std-body { display: flex; flex-direction: column; min-height: calc(100vh - 200px); }
.std-main { flex: 1 1 auto; min-width: 0; }
.std-stage { flex: 1; display: flex; flex-direction: column; background: #f5f5f5; }
.std-info { padding: 16px 20px; background: #f8fbff; border-top: 1px solid var(--line-soft); }
.std-info-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; color: var(--gray-500); font-size: 12px; }
.std-info-copy { color: var(--gray-600); font-size: 13px; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
.std-info .std-stars button.on .icon { fill: currentColor; }
.std-stage-inner { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 16px; }
.std-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1); display: flex; align-items: center; justify-content: center; color: var(--gray-600); transition: all .2s; }
.std-nav:hover { color: #b98c00; background: #fff; }
.std-nav .icon { width: 20px; height: 20px; }
.std-nav.prev { left: 12px; }
.std-nav.next { right: 12px; }
.std-photo { max-width: 900px; width: 100%; cursor: pointer; }
.std-photo img { width: 100%; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1); transition: box-shadow .2s; }
.std-photo:hover img { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1); }
.std-thumbs { width: 100%; background: #fff; box-shadow: -2px 0 8px rgba(0, 0, 0, .04); display: flex; flex-direction: column; }
.std-thumbs-grid { flex: 1; overflow-y: auto; padding: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 10px; align-content: start; }
.std-thumbs-grid button { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 3 / 4; transition: all .2s; }
.std-thumbs-grid button:hover { opacity: .8; }
.std-thumbs-grid button.on { box-shadow: 0 0 0 2px var(--brand), 0 0 0 4px #fff; }
.std-thumbs-grid img { width: 100%; height: 100%; object-fit: cover; }
.std-thumbs-status { grid-column: 1 / -1; margin: 4px 0; text-align: center; font-size: 12px; color: var(--gray-400); }
.std-tags { background: #fff; border-top: 1px solid var(--line-soft); padding: 16px; }
.std-tags h3 { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); font-size: 16px; font-weight: 700; color: var(--gray-900); }
.std-tags-list { display: flex; flex-wrap: wrap; gap: 8px; }
.std-tags-list a { padding: 6px 12px; border-radius: 999px; font-size: 12px; color: var(--gray-600); border: 1px solid var(--line); transition: all .2s; }
.std-tags-list a:hover { border-color: var(--brand); color: #b98c00; }
.std-foot { background: var(--page); border-top: 1px solid var(--line-soft); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--gray-500); }
.std-foot-l { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.std-stars { display: flex; align-items: center; gap: 2px; }
.std-stars .lbl { margin-right: 4px; }
.std-stars button { color: var(--gray-300); }
.std-stars button.on { color: #fbbf24; }
.std-stars .icon { width: 12px; height: 12px; }
@media (min-width: 768px) {
  .std-crumb-inner { padding-left: 24px; padding-right: 24px; }
  .std-head, .std-tags, .std-foot { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1024px) {
  .std-body { flex-direction: row; min-height: 0; align-items: flex-start; }
  .std-stage, .std-thumbs { height: clamp(320px, calc(100vh - 180px), 740px); }
  .std-stage { flex: 1 1 auto; min-width: 0; }
  .std-stage-inner { min-height: 0; }
  .std-photo { height: 100%; display: flex; align-items: center; justify-content: center; }
  .std-photo img { width: auto; max-width: 100%; max-height: 100%; }
  .std-thumbs { width: 380px; flex: none; align-self: flex-start; }
}
@media (min-width: 1280px) { .std-thumbs { width: 440px; } }

.lb-loading { color: rgba(255, 255, 255, .72); font-size: 14px; }
.lb-full-error { color: rgba(255, 255, 255, .9); text-align: center; font-size: 14px; }
.lb-full-error button { margin-top: 16px; padding: 8px 20px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 6px; background: transparent; color: #fff; cursor: pointer; }
.lb-arrow:disabled, .lb-thumb:disabled { cursor: wait; }
@media (max-height: 700px) {
  .lb-top { padding: 6px 12px; }
  .lb-stage { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  .lb-strip { padding: 6px 12px; }
  .lb-thumb { width: 48px; height: 60px; }
  .lb-hint { display: none; }
}

/* 回到顶部（CA9 ScrollToTop：fixed bottom-8 right-8 z-50，48px 圆，品牌黄底白 arrow-up） */
.scroll-top { position: fixed; bottom: 32px; right: 32px; z-index: 50; width: 48px; height: 48px; border-radius: 999px; background: var(--brand); color: #fff; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); display: flex; align-items: center; justify-content: center; transition: background-color .2s; }
.scroll-top:hover { background: var(--brand-hover); }
.scroll-top .icon { width: 20px; height: 20px; }
.stop-enter-active, .stop-leave-active { transition: opacity .2s, transform .2s; }
.stop-enter-from, .stop-leave-to { opacity: 0; transform: scale(.8); }

/* ==========================================================================
   素材/集锦频道页（MaterialPage/HighlightsPage，对齐 CA9 HR/u8）
   结构复用 side-* / st-* / filter-accordion / list-card；新增：素材 3/4/6 列网格、
   栏目类别纵向按钮、侧栏搜索「自定义」标签、免责声明、素材卡心形收藏（本地态）、
   集锦卡 hover 渐变罩（不放大）与标题变黄、集锦图册 3/4 卡。
   ========================================================================== */
.side-search .lbl { font-size: 12px; color: var(--gray-500); flex: none; }
.mt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { .mt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mt-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mt-cats { display: flex; flex-direction: column; gap: 6px; }
.mt-cats button { width: 100%; text-align: left; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--gray-700); background: var(--gray-100); transition: all .2s; }
.mt-cats button:hover { background: var(--gray-200); }
.mt-cats button.on { color: var(--ink); background: var(--brand); }
.mt-disclaimer { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.mt-disclaimer p { margin: 0; font-size: 10px; line-height: 1.6; color: var(--gray-400); }
.mt-disclaimer strong { font-weight: 500; color: var(--gray-500); }
.mt-fav { position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--gray-500); background: rgba(255, 255, 255, .9); opacity: 0; transition: all .2s; }
.list-card:hover .mt-fav { opacity: 1; }
.mt-fav.on { opacity: 1; color: #fff; background: #ef4444; }
.mt-fav .icon { width: 12px; height: 12px; }
.hl-cat-head { display: flex; align-items: center; gap: 6px; }
.hl-cat-head .icon { width: 14px; height: 14px; color: var(--ink); }
.hl-card .media img { transition: none; }
.hl-card:hover .media img { transform: none; }
.hl-card .media::after { background: linear-gradient(to top, rgba(0, 0, 0, .4), transparent 50%, transparent); opacity: 0; transition: opacity .2s; }
.hl-card:hover .media::after { background: linear-gradient(to top, rgba(0, 0, 0, .4), transparent 50%, transparent); opacity: 1; }
.hl-card:hover h3 { color: #b98c00; }
.hl-album .sth-card-media { aspect-ratio: 3 / 4; }

/* ==========================================================================
   技术/市场频道（TechPage/TechDetailPage/MarketPage，对齐 CA9 TP9/TA9/N8）
   结构复用 tl-* / std-*；新增：头条底色（技术橙 orange-50/70、市场蓝 blue-50/70）、
   网格 md 起 gap-4、市场 xl 6 列与卡片标题间距、技术详情图下信息条（Madam/点数/正文/
   listData）、缩略图 4/3、切图淡入、空态页。
   ========================================================================== */
.tc-strip { background: rgba(255, 247, 237, .7); }
.ca9-gallery-channel .st-strip-l { max-width: 100%; }
.mk-strip { background: rgba(239, 246, 255, .7); }
.mk-strip .tl-strip-inner { padding-top: 8px; padding-bottom: 8px; }
.mk-strip .tl-strip-sub { font-size: 11px; }
.mk-follow { padding: 4px 8px; font-size: 13px; }
.mk-follow .icon { width: 10px; height: 10px; }
@media (min-width: 768px) { .tc-grid, .mk-grid { gap: 16px; } }
@media (min-width: 1280px) { .tc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .mk-grid { grid-template-columns: repeat(6, 1fr); } }
.mk-card .tl-body h3 { margin-bottom: 8px; }
.tc-fade { animation: tc-fade-in .2s both; }
@keyframes tc-fade-in { from { opacity: .5; } to { opacity: 1; } }
.tc-info { background: #fff; border-top: 1px solid var(--gray-100); padding: 16px 20px; }
.tc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--gray-400); margin-bottom: 12px; }
.tc-meta > .author { color: var(--gray-500); }
.tc-content p { margin: 0 0 8px; font-size: 13px; color: var(--gray-600); line-height: 1.625; }
.tc-list { margin-top: 8px; }
.tc-list .row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; font-size: 13px; color: var(--gray-600); line-height: 1.625; }
.tc-list .dot { flex-shrink: 0; margin-top: 2px; color: var(--brand); }
.tc-suit { margin: 8px 0 0; font-size: 13px; color: var(--gray-600); line-height: 1.625; }
.tc-thumbs .std-thumbs-grid button { aspect-ratio: 4 / 3; }
.tc-empty-page { min-height: 100vh; background: #fafafa; display: flex; align-items: center; justify-content: center; }
.tc-empty { text-align: center; color: var(--gray-400); }
.tc-empty p { margin: 0 0 8px; font-size: 14px; }
.tc-empty a { color: var(--brand); font-size: 12px; }
.tc-empty a:hover { text-decoration: underline; }


/* ==========================================================================
   相册详情页（AlbumDetailPage，对齐 CA9 AR /album/:id）
   ========================================================================== */
.ald-page { min-height: 100vh; background: #fafafa; padding-bottom: 64px; }
.ald-page .crumb-inner .icon { width: 14px; height: 14px; }
.ald-crumb-now { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ald-head { background: #fff; padding: 24px 0; border-bottom: 1px solid var(--gray-100); }
.ald-head-inner { padding: 0 16px; }
.ald-back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--gray-500); margin-bottom: 16px; transition: color .2s; }
.ald-back:hover { color: #b98c00; }
.ald-back .icon { width: 14px; height: 14px; }
.ald-head-row { display: flex; flex-direction: column; gap: 24px; }
.ald-cover { width: 100%; flex: none; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 4 / 3; }
.ald-cover img { width: 100%; height: 100%; object-fit: cover; }
.ald-info { flex: 1; min-width: 0; }
.ald-badge-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ald-badge-icon { width: 18px; height: 18px; color: #b98c00; }
.ald-badge { font-size: 12px; background: rgba(255, 195, 0, .1); color: #b98c00; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
.ald-source { font-size: 12px; color: var(--gray-400); }
.ald-info h1 { font-size: 20px; font-weight: 700; color: var(--gray-900); margin-bottom: 12px; }
.ald-category { font-size: 14px; color: var(--gray-500); margin-bottom: 16px; }
.ald-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ald-total { font-size: 14px; color: var(--gray-600); }
.ald-copy { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--gray-500); background: var(--gray-50); padding: 6px 12px; border-radius: 8px; transition: color .2s; }
.ald-copy:hover { color: #b98c00; }
.ald-copy .icon { width: 14px; height: 14px; }
.ald-copy .ald-ok { color: #22c55e; }
.ald-copy-all { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #fff; background: var(--brand); padding: 6px 16px; border-radius: 8px; transition: background .2s; }
.ald-copy-all:hover { background: var(--brand-hover); }
.ald-copy-all .icon { width: 14px; height: 14px; }
.ald-filterbar { background: #fff; border-bottom: 1px solid var(--gray-100); box-shadow: var(--shadow-sm); }
.ald-filterbar-inner { padding: 12px 16px; }
.ald-filter-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ald-search { flex: 1; max-width: 448px; position: relative; display: flex; align-items: center; }
.ald-search > .icon { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--gray-400); pointer-events: none; }
.ald-search input { width: 100%; padding: 8px 16px 8px 36px; background: var(--gray-50); border: 0; border-radius: 999px; font-size: 14px; outline: none; transition: all .2s; }
.ald-search input:focus { background: #fff; box-shadow: 0 0 0 2px rgba(255, 195, 0, .3); }
.ald-search button { position: absolute; right: 12px; display: flex; color: var(--gray-400); }
.ald-search button:hover { color: var(--gray-600); }
.ald-search button .icon { width: 14px; height: 14px; }
.ald-filter-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; background: var(--gray-100); color: var(--gray-600); transition: all .2s; }
.ald-filter-btn .icon { width: 14px; height: 14px; }
.ald-filter-btn.on { background: var(--brand); color: #fff; }
.ald-filter-count { background: rgba(255, 255, 255, .25); color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 999px; }
.ald-clear { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--gray-500); transition: color .2s; }
.ald-clear:hover { color: #b98c00; }
.ald-clear .icon { width: 14px; height: 14px; }
.ald-selected { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ald-selected > span { font-size: 12px; color: var(--gray-400); }
.ald-selected button { display: flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; background: rgba(255, 195, 0, .1); color: #b98c00; transition: background .2s; }
.ald-selected button:hover { background: rgba(255, 195, 0, .2); }
.ald-selected button .icon { width: 12px; height: 12px; }
.ald-panel { border-top: 1px solid var(--gray-100); padding-top: 12px; }
.ald-panel-group { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.ald-panel-group:last-child { margin-bottom: 0; }
.ald-panel-name { font-size: 12px; color: var(--gray-400); font-weight: 500; margin-top: 6px; flex: none; width: 32px; }
.ald-panel-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ald-panel-tags button { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; font-size: 14px; background: var(--gray-100); color: var(--gray-600); transition: all .2s; }
.ald-panel-tags button:hover { background: var(--gray-200); }
.ald-panel-tags button.on { background: var(--brand); color: #fff; }
.ald-panel-tags .n { font-size: 12px; color: var(--gray-400); }
.ald-panel-tags button.on .n { color: rgba(255, 255, 255, .7); }
.ald-strip { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-top: 4px; scrollbar-width: none; }
.ald-strip::-webkit-scrollbar { display: none; }
.ald-strip button:not(.ald-strip-more) { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; font-size: 14px; white-space: nowrap; flex: none; background: var(--gray-100); color: var(--gray-600); transition: all .2s; }
.ald-strip button.on { background: var(--brand); color: #fff; }
.ald-strip .n { font-size: 12px; color: var(--gray-400); }
.ald-strip button.on .n { color: rgba(255, 255, 255, .7); }
.ald-strip-more { font-size: 14px; color: #b98c00; white-space: nowrap; flex: none; }
.ald-strip-more:hover { text-decoration: underline; }
.ald-main { padding: 32px 16px; }
.ald-grid { columns: 2; column-gap: 16px; }
.ald-card { break-inside: avoid; margin-bottom: 16px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); background: #fff; cursor: pointer; transition: box-shadow .3s; }
.ald-card:hover { box-shadow: var(--shadow-card-hover); }
.ald-media { position: relative; overflow: hidden; }
.ald-media img { width: 100%; object-fit: cover; transition: transform .3s; }
.ald-card:hover .ald-media img { transform: scale(1.05); }
.ald-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .4), transparent 50%, transparent); opacity: 0; transition: opacity .3s; }
.ald-card:hover .ald-veil { opacity: 1; }
.ald-body { padding: 12px; }
.ald-body h4 { font-size: 12px; font-weight: 500; color: var(--gray-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ald-tags { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ald-tags span { font-size: 10px; padding: 2px 6px; border-radius: 4px; cursor: pointer; background: var(--gray-100); color: var(--gray-500); transition: all .2s; }
.ald-tags span:hover { background: rgba(255, 195, 0, .1); }
.ald-tags span.on { background: var(--brand); color: #fff; }
.ald-empty { text-align: center; padding: 80px 0; }
.ald-empty > .icon { width: 40px; height: 40px; color: var(--gray-300); margin: 0 auto 16px; }
.ald-empty .t1 { color: var(--gray-500); font-size: 18px; margin-bottom: 8px; }
.ald-empty .t2 { color: var(--gray-400); font-size: 14px; }
.ald-empty button { margin-top: 16px; background: var(--brand); color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 14px; transition: background .2s; }
.ald-empty button:hover { background: var(--brand-hover); }
@media (min-width: 640px) { .ald-grid { columns: 3; } }
@media (min-width: 768px) {
  .ald-head-inner, .ald-filterbar-inner, .ald-main { padding-left: 24px; padding-right: 24px; }
  .ald-head-row { flex-direction: row; }
  .ald-cover { width: 280px; }
  .ald-info h1 { font-size: 24px; }
}
@media (min-width: 1024px) { .ald-grid { columns: 4; } }
@media (min-width: 1280px) { .ald-grid { columns: 5; } }

/* ==========================================================================
   图片详情页（ImageDetailPage，对齐 CA9 pL /image/:id）
   ========================================================================== */
.imd-page { min-height: 100vh; background: #fafafa; }
.imd-page .crumb-inner { padding-top: 12px; padding-bottom: 12px; }
.imd-page .crumb-inner .icon { width: 12px; height: 12px; }
.imd-main { max-width: 1280px; margin: 0 auto; padding: 20px 24px; }
.imd-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.imd-title-row h1 { font-size: 20px; font-weight: 700; color: var(--gray-900); }
.imd-ops { display: flex; align-items: center; gap: 12px; }
.imd-pink { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: #ec4899; transition: color .2s; }
.imd-pink:hover { color: #db2777; }
.imd-pink .icon { width: 15px; height: 15px; }
.imd-fav { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; font-size: 12px; border: 1px solid #ef4444; color: #ef4444; background: #fff; box-shadow: 0 0 6px rgba(239, 68, 68, .35); transition: all .2s; }
.imd-fav:hover { background: rgba(255, 195, 0, .1); color: #e6b000; }
.imd-fav .icon { width: 13px; height: 13px; }
.imd-fav.on { background: #ffc300; color: #ef4444; font-weight: 700; border-color: #ffc300; box-shadow: none; }
.imd-fav.on:hover { background: #e6b000; }
.imd-fav.on .icon { fill: currentColor; }
.imd-cols { display: flex; flex-direction: column; gap: 20px; }
.imd-left { flex: 1; min-width: 0; }
.imd-viewer { position: relative; background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; }
.imd-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; }
.imd-stage img { max-width: 100%; object-fit: contain; }
.imd-fade { animation: imd-in .2s both; }
@keyframes imd-in { from { opacity: .5; } to { opacity: 1; } }
.imd-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .8); backdrop-filter: blur(8px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1); display: flex; align-items: center; justify-content: center; color: var(--gray-600); transition: all .2s; }
.imd-arrow:hover { color: #b98c00; background: #fff; }
.imd-arrow .icon { width: 20px; height: 20px; }
.imd-arrow.left { left: 12px; }
.imd-arrow.right { right: 12px; }
.imd-info { margin-top: 16px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); padding: 20px; }
.imd-meta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--gray-600); margin-bottom: 16px; }
.imd-meta-row > span { display: flex; align-items: center; gap: 4px; }
.imd-meta-row .icon { width: 13px; height: 13px; color: var(--gray-400); }
.imd-meta-row b { font-weight: 500; color: var(--gray-900); }
.imd-rating i { display: inline-flex; }
.imd-rating .icon { width: 13px; height: 13px; fill: currentColor; stroke: none; color: #facc15; }
.imd-download { color: #b98c00; font-weight: 500; font-size: 14px; }
.imd-download:hover { text-decoration: underline; }
.imd-format { border-top: 1px solid var(--gray-100); padding-top: 16px; font-size: 14px; color: var(--gray-500); line-height: 1.625; }
.imd-format p { white-space: pre-line; }
.imd-related { margin-top: 20px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); padding: 20px; }
.imd-related h3 { font-size: 16px; font-weight: 700; color: var(--gray-900); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.imd-related h3 i { width: 4px; height: 20px; background: var(--brand); border-radius: 999px; }
.imd-related-list { display: flex; flex-direction: column; gap: 12px; }
.imd-related-list a { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--gray-600); transition: color .2s; }
.imd-related-list a:hover { color: #b98c00; }
.imd-related-list a:hover .t { text-decoration: underline; }
.imd-related-list .n { flex: none; width: 20px; height: 20px; border-radius: 4px; background: rgba(255, 195, 0, .1); color: #b98c00; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; margin-top: 2px; }
.imd-related-list .t { line-height: 1.5; }
.imd-side { width: 100%; flex: none; }
.imd-sim, .imd-tags-card { background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); padding: 16px; }
.imd-sim { margin-bottom: 16px; }
.imd-sim h3, .imd-tags-card h3 { font-size: 14px; font-weight: 700; color: var(--gray-900); margin-bottom: 12px; }
.imd-sim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 480px; overflow-y: auto; scrollbar-width: none; }
.imd-sim-grid::-webkit-scrollbar { display: none; }
.imd-sim-grid button { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; }
.imd-sim-grid img { width: 100%; height: 100%; object-fit: cover; transition: all .2s; }
.imd-sim-grid button:hover img { opacity: .8; }
.imd-sim-grid img.on { box-shadow: inset 0 0 0 2px var(--brand); border-radius: 8px; }
.imd-sim-grid span { position: absolute; top: 2px; left: 2px; background: rgba(255, 195, 0, .8); color: #fff; font-size: 9px; font-weight: 500; padding: 1px 4px; border-radius: 4px; }
.imd-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.imd-tags a { padding: 4px 12px; border-radius: 999px; font-size: 12px; background: var(--gray-100); color: var(--gray-600); transition: all .2s; }
.imd-tags a:hover { background: var(--brand); color: #fff; }
.imd-foot { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 12px; color: var(--gray-400); }
.imd-foot span { display: flex; align-items: center; gap: 4px; }
.imd-foot .icon { width: 12px; height: 12px; }
@media (min-width: 768px) {
  .imd-main { padding-left: 40px; padding-right: 40px; }
  .imd-title-row h1 { font-size: 24px; }
}
@media (min-width: 1024px) { .imd-cols { flex-direction: row; } .imd-side { width: 280px; } }

/* ==========================================================================
   我的收藏（FavoritesPage，对齐 CA9 FAVD /favorites[/:folderId]）
   列表模式复用既有 folder-grid/folder-card/folder-add/fav-head；以下为文件夹模式与表单新增。
   ========================================================================== */
.fvd-page { min-height: 100vh; background: #fafafa; padding-bottom: 64px; }
.fvd-page .crumb-inner .icon { width: 14px; height: 14px; }
.fvd-shell { padding-top: 24px; }
.fvd-folder-ops { display: flex; gap: 8px; flex: none; }
.fvd-rename { font-size: 14px; color: var(--gray-600); border: 1px solid var(--gray-200); padding: 6px 12px; border-radius: 999px; transition: border-color .2s; }
.fvd-rename:hover { border-color: var(--brand); }
.fvd-delete { font-size: 14px; color: #ef4444; border: 1px solid #fee2e2; padding: 6px 12px; border-radius: 999px; transition: background .2s; }
.fvd-delete:hover { background: #fef2f2; }
.folder-card .count { display: flex; align-items: center; gap: 4px; }
.folder-card .count .icon { width: 10px; height: 10px; }
.folder-add .plus { font-size: 24px; line-height: 1; }
.fvd-newform { background: #fff; border-radius: 16px; padding: 12px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.fvd-newform input { border: 1px solid var(--gray-200); border-radius: 8px; padding: 8px 12px; font-size: 14px; outline: none; width: 100%; }
.fvd-newform input:focus { border-color: var(--brand); }
.fvd-newform-row { display: flex; gap: 8px; }
.fvd-newform-row .ok { flex: 1; background: var(--brand); color: var(--gray-900); font-size: 14px; font-weight: 600; padding: 8px 0; border-radius: 8px; }
.fvd-newform-row .cancel { flex: 1; font-size: 14px; color: var(--gray-500); border: 1px solid var(--gray-200); padding: 8px 0; border-radius: 8px; }
.fvd-renameform { background: #fff; border-radius: 16px; padding: 16px; box-shadow: var(--shadow-card); margin-bottom: 16px; display: flex; gap: 8px; }
.fvd-renameform input { flex: 1; border: 1px solid var(--gray-200); border-radius: 8px; padding: 8px 12px; font-size: 14px; outline: none; }
.fvd-renameform input:focus { border-color: var(--brand); }
.fvd-renameform .ok { background: var(--brand); color: var(--gray-900); font-size: 14px; font-weight: 600; padding: 0 16px; border-radius: 8px; }
.fvd-renameform .cancel { font-size: 14px; color: var(--gray-500); border: 1px solid var(--gray-200); padding: 0 16px; border-radius: 8px; }
.fvd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.fvd-card { background: #fff; border-radius: 16px; padding: 8px; box-shadow: var(--shadow-card); position: relative; }
.fvd-card .shot { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--gray-50); }
.fvd-card .shot img { width: 100%; height: 100%; object-fit: cover; }
.fvd-card .t { font-size: 12px; color: var(--gray-700); margin-top: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.fvd-card .x { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 999px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; }
.fvd-card:hover .x { opacity: 1; }
.fvd-empty { background: #fff; border-radius: 16px; padding: 40px; box-shadow: var(--shadow-card); text-align: center; }
.fvd-empty > .icon { width: 48px; height: 48px; color: var(--gray-300); margin: 0 auto; }
.fvd-empty p { font-size: 14px; color: var(--gray-400); margin-top: 12px; }
.fvd-empty a { display: inline-block; margin-top: 16px; color: #b98c00; font-size: 14px; font-weight: 500; }

/* vip 轮播空态（对齐 CA9 E8 空分支） */
.vip-hero-empty { height: 55vh; display: flex; align-items: center; justify-content: center; background: #1a1a2e; }
.vip-hero-empty-inner { text-align: center; }
.vip-hero-empty-inner p { color: rgba(255, 255, 255, .6); font-size: 18px; margin-bottom: 12px; }
.vip-hero-empty-inner a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: #ffc300; color: #101010; font-size: 14px; font-weight: 500; border-radius: 8px; transition: background .2s; }
.vip-hero-empty-inner a:hover { background: #e6b000; }

/* /newpc 相似图入口：始终可见，兼顾键盘与触屏。 */
.ca9-newpc .ca9-similar-button { display: inline-flex; align-items: center; justify-content: center; padding: 5px 11px; border: 1px solid #fdba74; border-radius: 999px; background: #fff; color: #c2410c; font: inherit; font-size: 12px; line-height: 1.4; cursor: pointer; }
.ca9-newpc .ca9-similar-button:hover { background: #fff7ed; }
.ca9-newpc .ca9-similar-button:focus-visible, .ca9-newpc .ca9-similar-images img:focus-visible { outline: 2px solid #ea580c; outline-offset: 2px; }
.ca9-newpc .ca9-similar-overlay { position: absolute; z-index: 3; left: 10px; bottom: 10px; box-shadow: 0 1px 4px #0002; }
.ca9-newpc .ca9-newpc-card__media { position: relative; }
.ca9-newpc .ca9-similar-images img { cursor: pointer; }
.ca9-newpc .bk-thumb { position: relative; }
.ca9-newpc .ca9-similar-media { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.ca9-newpc .ca9-similar-media > img { display: block; }
.ca9-newpc .ca9-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; width: 100%; min-width: 0; box-sizing: border-box; }
.ca9-newpc .ca9-card-heading > h3, .ca9-newpc .ca9-card-heading > .is-title { flex: 1; min-width: 0; }
.ca9-newpc .ca9-consume-points { flex: none; margin-left: auto; white-space: nowrap; font-size: 12px; font-weight: 400; line-height: 1.4; color: #6b7280; }
.ca9-newpc .is-card .ca9-card-heading { margin-top: 8px; }
.ca9-newpc .is-card .ca9-card-heading > .is-title { margin-top: 0; }