/* ============ AI启晨 · 主题变量 ============ */
:root {
  --primary: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --ink: #111827;
  --ink-2: #1f2937;
  --gray-900: #111827;
  --gray-700: #374151;
  --gray-600: #4b5563;
  --gray-500: #6b7280;
  --gray-400: #9ca3af;
  --gray-300: #d1d5db;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --gray-50: #f9fafb;
  --line: #f0f1f3;
  --green: #78e08f;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, .08);
  --shadow-lg: 0 20px 50px rgba(16, 24, 40, .16);
  --container: 1400px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  color: var(--ink-2);
  background: #fff;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 仅供辅助技术与抓取器读取的章节标题，不占视觉空间 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
[hidden] { display: none !important; }

/* ============ 顶部推广条 ============ */
.promo-bar {
  background: linear-gradient(90deg, #fffbeb, #fff7ed);
  border-bottom: 1px solid #fde9c8;
  transition: height .25s ease, opacity .25s ease;
  overflow: hidden;
}
.promo-bar.collapsed { height: 0; opacity: 0; border: 0; }
.promo-inner { position: relative; display: flex; align-items: center; justify-content: center; min-height: 36px; }
.promo-link { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; padding: 7px 28px; color: #92400e; font-size: 13px; }
.promo-tag { padding: 1px 6px; background: #f59e0b; color: #fff; font-size: 11px; font-weight: 600; border-radius: 3px; flex: none; }
.promo-logo { width: 16px; height: 16px; border-radius: 4px; overflow: hidden; flex: none; }
.promo-logo img, .brand-logo img, .search-logo img { width: 100%; height: 100%; object-fit: cover; }
.promo-link strong { font-weight: 600; white-space: nowrap; }
.promo-desc { color: #c27530; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promo-close { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: #c9a06a; display: flex; padding: 4px; border-radius: 4px; }
.promo-close:hover { background: #fde9c8; color: #92400e; }
.promo-close .icon { width: 13px; height: 13px; }

/* ============ 导航 ============ */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--gray-100); isolation: isolate; }
.header-inner { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.brand-logo { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #fff; padding: 3px; box-sizing: border-box; box-shadow: 0 2px 8px rgba(59,130,246,.22); }
.brand-logo img { object-fit: contain; }
.brand-name { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; white-space: nowrap; }
.main-nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow: hidden; }
.main-nav a { padding: 7px 13px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--gray-600); white-space: nowrap; transition: .18s; }
.main-nav a:hover { color: var(--primary); background: var(--primary-50); }
.main-nav a.active { color: var(--primary); background: var(--primary-50); font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--gray-600); transition: .18s; }
.icon-btn:hover { background: var(--gray-100); color: var(--ink); }
/* 右侧「提交工具」沿用原登录按钮的深色胶囊色块 */
.header-submit { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 17px; border-radius: 999px; background: var(--gray-900); color: #fff; font-size: 13px; font-weight: 600; transition: .18s; white-space: nowrap; box-shadow: 0 2px 6px rgba(17,24,39,.12); }
.header-submit:hover { background: var(--gray-700); color: #fff; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(17,24,39,.18); }
.header-submit .icon { width: 15px; height: 15px; }
.mobile-menu-btn { display: none; }
/* 菜单按钮：收起时三条杠，展开时换成叉号，给出明确的关闭暗示 */
.mobile-menu-btn .icon-close { display: none; }
.mobile-menu-btn[aria-expanded="true"] .icon-menu { display: none; }
.mobile-menu-btn[aria-expanded="true"] .icon-close { display: block; }
/* 移动端导航的遮罩：仅在小屏菜单打开时出现，桌面端常驻隐藏 */
.nav-scrim { display: none; }

/* ============ Hero ============ */
.hero { position: relative; overflow: hidden; padding-top: 22px; }
.hero-bg { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(249,250,251,.95), rgba(255,255,255,.72) 55%, #fff); }
.marquee-wrap { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.marquee-row { display: flex; white-space: nowrap; opacity: .22; overflow: hidden; }
.marquee-row.reverse .marquee-track { animation-direction: reverse; }
.marquee-track { display: flex; align-items: center; gap: 16px; padding-right: 16px; animation: marquee 70s linear infinite; }
.marquee-row:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mini-logo { width: 30px; height: 30px; border-radius: 7px; flex: none; background: rgba(255,255,255,.85); box-shadow: var(--shadow-sm); overflow: hidden; }
.mini-logo img { width: 100%; height: 100%; object-fit: cover; }
.hero-fade-side { position: absolute; top: 0; bottom: 0; right: 0; width: 180px; background: linear-gradient(270deg, rgba(249,250,251,.95), transparent); z-index: 1; }
.hero-bg::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 150px; background: linear-gradient(90deg, rgba(249,250,251,.9), transparent); z-index: 1; }
.hero-fade-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(0deg, #fff, transparent); z-index: 1; }
.hero-content { position: relative; z-index: 2; text-align: center; padding-top: 46px; padding-bottom: 20px; }
.hero h1 { font-size: clamp(32px, 3.6vw, 48px); font-weight: 800; letter-spacing: -1.4px; line-height: 1.22; color: var(--ink); margin-bottom: 12px; }
.hero h1 em { font-style: normal; color: var(--primary); }
.hero-sub { color: var(--gray-500); font-size: 15.5px; margin-bottom: 30px; }
.hero-sub b { color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; }
/* 两行文案：主副标题 + 原有数据统计行，统计行保持原样但字号略小以拉开层次 */
.hero-copy .hero-sub { margin-bottom: 8px; }
.hero-copy .hero-stat { font-size: 13px; color: var(--gray-400); margin-bottom: 14px; }
.search-wrap { max-width: 720px; margin: 0 auto; position: relative; }
.search-box { display: flex; align-items: center; gap: 0; background: #fff; border: 1px solid var(--gray-200); border-radius: 999px; box-shadow: var(--shadow-sm); padding: 8px 8px 8px 10px; transition: box-shadow .2s, border-color .2s; }
.search-box:focus-within { box-shadow: 0 6px 24px rgba(59,130,246,.12); border-color: #bfdbfe; }
.search-logo { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none; }
.search-box input { flex: 1; min-width: 0; margin: 0 12px; padding: 8px 0; border: 0; outline: none; background: transparent; font-size: 15.5px; color: var(--gray-700); }
.search-box input::placeholder { color: var(--gray-400); }
.search-go { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; flex: none; transition: .18s; }
.search-go:hover { background: var(--primary-600); transform: scale(1.04); }
.search-go .icon { width: 18px; height: 18px; stroke-width: 2.1; }
.search-suggest { position: absolute; left: 12px; right: 12px; top: calc(100% + 8px); z-index: 30; background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; text-align: left; max-height: 340px; overflow: auto; }
.suggest-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 9px; text-align: left; transition: .15s; }
.suggest-item:hover, .suggest-item.cursor { background: var(--gray-50); }
.suggest-item img { width: 30px; height: 30px; border-radius: 8px; }
.suggest-item span { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-item small { color: var(--gray-400); font-size: 12px; flex: none; }
.suggest-empty { padding: 16px; color: var(--gray-400); font-size: 13px; text-align: center; }
.hot-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.hot-word { padding: 5px 13px; font-size: 13px; color: var(--gray-500); background: #fff; border: 1px solid var(--gray-200); border-radius: 999px; transition: .18s; }
.hot-word:hover { border-color: #93c5fd; color: var(--primary-600); transform: translateY(-1px); }

/* ============ 主体布局 ============ */
.content-section { padding: 22px 0 64px; }
.main-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 32px; }
.left-col { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.block { min-width: 0; }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.block-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.block-title h2 { font-size: 20px; font-weight: 700; color: var(--ink-2); letter-spacing: -.3px; }
.date-stamp { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 16px; color: var(--gray-400); }
.result-note, .head-note { font-size: 12.5px; color: var(--gray-400); }
.link-more { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--primary); white-space: nowrap; transition: .18s; }
.link-more:hover { color: var(--primary-700); gap: 5px; }
.link-more .icon { width: 14px; height: 14px; }
.link-more.small { font-size: 12px; }

/* Tab */
.tab-row { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-bottom: 16px; scrollbar-width: none; }
.tab-row::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 8px; background: var(--gray-100); color: var(--gray-600); font-size: 13px; font-weight: 500; white-space: nowrap; transition: .18s; }
.tab .icon { width: 14px; height: 14px; }
.tab:hover { background: var(--gray-200); color: var(--ink-2); }
.tab.active { background: var(--primary); color: #fff; font-weight: 600; }
.promo-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* 4 列时卡片竖排，但图标与标题同一行：既省纵向空间，标题也不会窄到只剩两三个字 */
.promo-cards .tool-card { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; min-height: 124px; }
.promo-cards .tool-card .tc-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.promo-cards .tool-card .tc-logo { width: 34px; height: 34px; border-radius: 8px; }
.promo-cards .tool-card .tc-name { flex: 1; min-width: 0; font-size: 13px; }
.promo-cards .tool-card .tc-body { flex: 1; min-width: 0; }
.promo-cards .tool-card .tc-desc { margin-top: 0; font-size: 11.5px; line-height: 1.55; -webkit-line-clamp: 2; }
.promo-cards .tool-card .tc-meta { margin-top: 6px; gap: 6px; font-size: 11px; flex-wrap: wrap; }

/* 通用紧凑工具卡 */
.tool-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: .2s; min-width: 0; cursor: pointer; }
.tool-card:hover { border-color: #bfdbfe; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.tool-card .tc-logo { width: 40px; height: 40px; border-radius: 9px; flex: none; object-fit: cover; border: 1px solid var(--gray-100); }
.tool-card .tc-body { min-width: 0; flex: 1; }
.tool-card .tc-name { font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: .18s; }
.tool-card:hover .tc-name { color: var(--primary-600); }
.tool-card .tc-desc { font-size: 12px; color: var(--gray-500); line-height: 1.6; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tool-card .tc-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 11.5px; color: var(--gray-400); }
.tool-card .tc-meta .tag { color: var(--primary); }

/* 最新收录 · 封面卡 */
.cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cover-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .22s, transform .22s; cursor: pointer; min-width: 0; }
.cover-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cover-img { position: relative; height: 156px; overflow: hidden; background: var(--gray-100); }
.cover-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.cover-card:hover .cover-img img { transform: scale(1.04); }
.cover-badge { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.9); backdrop-filter: blur(4px); font-size: 11px; font-weight: 600; color: var(--primary-600); }
.cover-body { padding: 14px; }
.cover-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cover-title-row img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gray-100); flex: none; }
.cover-title-row h3 { font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cover-desc { font-size: 12px; color: var(--gray-500); line-height: 1.6; height: 38px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 12px; }
.cover-foot { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--gray-400); }
.cover-foot .tag { color: var(--primary); }
.cover-foot .metrics { display: flex; align-items: center; gap: 12px; }
.cover-foot .metrics span { display: inline-flex; align-items: center; gap: 3px; }
.cover-foot .icon { width: 13px; height: 13px; }
.card-hover { position: absolute; inset: 0; background: #fff; transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; padding: 18px; z-index: 2; }
.cover-card:hover .card-hover { transform: translateY(0); }
.ch-top { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.ch-top img { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--gray-100); object-fit: cover; }
.ch-top h3 { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.ch-top .ch-cat { font-size: 12px; color: var(--gray-400); margin-top: 2px; }
.ch-desc { font-size: 12.5px; color: var(--gray-500); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 12px; }
.ch-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: auto; }
.ch-tags span { padding: 3px 8px; background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 5px; font-size: 11px; color: var(--gray-500); }
.ch-actions { display: flex; gap: 8px; margin-top: 14px; }
.ch-actions button, .ch-actions a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 600; transition: .18s; }
.ch-actions .btn-solid { background: var(--primary); color: #fff; }
.ch-actions .btn-solid:hover { background: var(--primary-600); }
.ch-actions .btn-ghost { background: var(--gray-50); color: var(--gray-600); border: 1px solid var(--gray-200); }
.ch-actions .btn-ghost:hover { border-color: #bfdbfe; color: var(--primary); }
.ch-actions .icon { width: 14px; height: 14px; }
.ch-actions .fav-btn { flex: none; width: 38px; padding: 0; background: var(--gray-50); border: 1px solid var(--gray-200); color: var(--gray-400); }
.ch-actions .fav-btn.on { color: #ef4444; background: #fef2f2; border-color: #fecaca; }
.ch-actions .fav-btn.on .icon { fill: currentColor; }

/* 分类方块 */
.category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.category-tile { display: flex; align-items: center; gap: 10px; padding: 13px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; transition: .2s; min-width: 0; }
.category-tile:hover { border-color: #bfdbfe; box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.cat-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; font-size: 16px; }
.cat-text { min-width: 0; }
.cat-text strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-text small { font-size: 11.5px; color: var(--gray-400); }

/* 精选工具 */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; margin-bottom: 2px; }
.chip { padding: 6px 13px; border-radius: 999px; background: var(--gray-100); color: var(--gray-600); font-size: 12.5px; white-space: nowrap; transition: .18s; flex: none; }
.chip:hover { background: var(--gray-200); }
.chip.active { background: var(--primary); color: #fff; font-weight: 600; }
.tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.load-more-wrap { text-align: center; margin-top: 20px; }
.load-more-wrap .btn-outline { display: inline-flex; align-items: center; gap: 6px; padding: 9px 24px; }
.load-more-wrap .btn-outline .icon { width: 14px; height: 14px; transform: rotate(90deg); }
/* 信息流广告：与上方「加载更多」按钮拉开呼吸空间，避免两者贴连成一块 */
.feed-ad { margin-top: 28px; }
.feed-ad:empty { display: none; }
.feed-ad .ad-inline { min-height: 68px; }
/* 搜索结果中的资讯 */
.search-articles { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--gray-100); }
.search-articles-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.search-articles-head h2 { font-size: 18px; font-weight: 700; color: var(--ink-2); }
.search-article-list { display: flex; flex-direction: column; gap: 8px; }
.search-article { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: .18s; }
.search-article:hover { border-color: #bfdbfe; background: var(--gray-50); }
.sa-date { flex: none; font-size: 11.5px; color: var(--gray-400); font-variant-numeric: tabular-nums; padding-top: 2px; }
.sa-body { flex: 1; min-width: 0; }
.sa-body b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); line-height: 1.5; transition: .15s; }
.search-article:hover .sa-body b { color: var(--primary-600); }
.sa-body small { display: block; margin-top: 3px; font-size: 12px; color: var(--gray-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-article .icon { color: var(--gray-300); flex: none; margin-top: 3px; }
.suggest-item .s-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--primary-50); color: var(--primary); display: grid; place-items: center; font-size: 14px; flex: none; }
.suggest-item.article small { color: var(--primary); }

.empty-state { padding: 60px 20px; text-align: center; color: var(--gray-400); }
.empty-state .icon { width: 34px; height: 34px; margin-bottom: 12px; }
.empty-state p { margin-bottom: 16px; font-size: 14px; }
.btn-outline { padding: 8px 18px; border: 1px solid var(--gray-200); border-radius: 8px; color: var(--gray-600); font-size: 13px; }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }

/* ============ 右侧栏 ============ */
.side-sticky { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 84px; }
.side-card { background: #fff; border: 1px solid rgba(243,244,246,.9); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid #fafafa; }
.side-title { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.flame { width: 15px; height: 15px; color: #f97316; }
.rank-list { padding: 10px 18px 14px; }
.rank-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 2px; border-radius: 8px; text-align: left; transition: .18s; }
.rank-item:hover { background: var(--gray-50); padding-left: 6px; }
.rank-num { width: 16px; flex: none; font-size: 13px; font-weight: 700; font-style: italic; color: var(--gray-400); font-family: Georgia, serif; }
.rank-item:nth-child(1) .rank-num { color: #f59e0b; }
.rank-item:nth-child(2) .rank-num { color: #94a3b8; }
.rank-item:nth-child(3) .rank-num { color: #d97706; }
.rank-item img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex: none; }
.rank-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-hot { font-size: 11px; color: var(--primary); flex: none; }

/* AI 推荐卡 */
.ai-card-top { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: linear-gradient(125deg, var(--primary), var(--primary-600) 55%, #4338ca); color: #fff; overflow: hidden; }
.ai-card-top .bubble { position: absolute; border-radius: 50%; background: rgba(255,255,255,.1); }
.ai-card-top .b1 { width: 96px; height: 96px; right: -24px; top: -26px; }
.ai-card-top .b2 { width: 64px; height: 64px; right: -8px; bottom: -28px; background: rgba(255,255,255,.06); }
.ai-top-icon { position: relative; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.2); display: grid; place-items: center; flex: none; }
.ai-top-icon .icon { width: 21px; height: 21px; }
.ai-top-text { position: relative; flex: 1; min-width: 0; }
.ai-top-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.ai-top-title small { padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.22); font-size: 10px; font-weight: 600; }
.rolling { display: block; height: 16px; overflow: hidden; margin-top: 4px; }
.rolling-track { display: block; animation: roll 8s infinite; }
.rolling-track p { height: 16px; line-height: 16px; font-size: 12px; color: rgba(255,255,255,.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes roll { 0%,20% { transform: translateY(0); } 25%,45% { transform: translateY(-16px); } 50%,70% { transform: translateY(-32px); } 75%,95% { transform: translateY(-48px); } 100% { transform: translateY(-64px); } }
.ai-arrow { position: relative; width: 16px; height: 16px; opacity: .8; }
.ai-card-top:hover .ai-arrow { transform: translateX(3px); }
.ai-card-body { padding: 14px 18px 18px; }
.ai-hint { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--gray-400); margin-bottom: 10px; }
.ai-hint .icon { width: 13px; height: 13px; }
.quick-ask { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 11px; margin-bottom: 6px; border-radius: 10px; background: rgba(249,250,251,.9); font-size: 13px; color: var(--gray-600); text-align: left; transition: .18s; }
.quick-ask:hover { background: var(--primary-50); color: var(--primary-600); transform: translateX(2px); }
.qa-emoji { width: 20px; height: 20px; border-radius: 50%; background: var(--primary-100); color: var(--primary); display: grid; place-items: center; font-size: 11px; flex: none; transition: .18s; }
.quick-ask:hover .qa-emoji { background: var(--primary); color: #fff; }
.quick-ask span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-card { padding: 16px 18px; }
.stat-row { display: flex; justify-content: space-between; margin: 16px 0 12px; }
.stat-row span { text-align: center; flex: 1; }
.stat-row span + span { border-left: 1px solid var(--gray-100); }
.stat-row b { display: block; font-size: 19px; color: var(--ink); font-weight: 700; }
.stat-row small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--gray-400); }
.stat-tip { font-size: 11.5px; color: var(--gray-400); line-height: 1.6; border-top: 1px dashed var(--gray-100); padding-top: 10px; }

/* ============ CTA ============ */
.cta-section { padding: 64px 0 70px; background: linear-gradient(120deg, #eff6ff, #f5f3ff 60%, #fdf4ff); }
.cta-inner { max-width: 900px; text-align: center; }
.cta-icon { width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 20px; display: grid; place-items: center; background: #fff; box-shadow: var(--shadow-sm); color: var(--primary); }
.cta-icon .icon { width: 30px; height: 30px; }
.cta-inner h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.cta-inner p { color: var(--gray-600); margin-bottom: 26px; }
.btn-dark { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; border-radius: 8px; background: linear-gradient(90deg, #374151, #111827); color: #fff; font-weight: 600; box-shadow: 0 6px 16px rgba(17,24,39,.18); transition: .2s; }
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(17,24,39,.24); }
.btn-dark .icon { width: 16px; height: 16px; }

/* ============ 页脚 ============ */
.site-footer { background: var(--gray-900); color: var(--gray-400); }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 40px; padding: 48px 0 40px; }
.footer-brand { margin-bottom: 16px; }
.footer-brand .brand-logo { width: 32px; height: 32px; }
.footer-brand .brand-name { color: #fff; font-size: 17px; }
.footer-desc { font-size: 13px; line-height: 1.8; max-width: 330px; }
.footer-grid h3, .footer-grid h4 { color: #fff; font-size: 13.5px; font-weight: 600; margin-bottom: 16px; }
.footer-grid li { margin-bottom: 10px; font-size: 13px; }
.footer-grid li a:hover, .footer-bottom a:hover { color: #fff; }
/* 首页只加载 styles.css，审核台入口样式在这里兜底 */
.footer-review-link { color: #93c5fd; }
.footer-review-link:hover { color: #fff; }
.social-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.social { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); color: #cbd5e1; transition: .18s; }
.social:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.26); color: #fff; }
.social .icon { width: 16px; height: 16px; flex: none; }
/* 桌面只显示图标方块；手机端展开成「图标+文字」胶囊，深色页脚上才看得懂 */
.social-txt { display: none; font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap; }
.btn-primary-sm { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 9px 15px; border-radius: 8px; background: var(--primary-600); color: #fff; font-size: 13px; font-weight: 600; transition: .18s; }
.btn-primary-sm:hover { background: var(--primary); }
.btn-primary-sm .icon { width: 14px; height: 14px; }
/* 底部安全区：全面屏手机与浏览器底栏不再压住版权行 */
.footer-bottom { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #1f2937; padding: 16px 0 calc(22px + env(safe-area-inset-bottom, 0px)); font-size: 12px; color: #6b7280; }

/* ============ 浮动按钮 ============ */
.float-ai { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: block; transition: opacity .26s, transform .26s; }
/* 滚动到页脚区域时收起，避免浮球压住「提交工具 / 广告合作」等页脚按钮 */
.float-ai.is-foot { opacity: 0; transform: translateY(14px); pointer-events: none; }
.float-ping { position: absolute; inset: 0; border-radius: 999px; background: var(--green); opacity: .35; animation: ping 2.4s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 75%, 100% { opacity: 0; transform: scale(1.7); } }
.float-body { position: relative; display: flex; align-items: center; gap: 0; padding: 13px 14px; border-radius: 999px; background: var(--green); color: #fff; box-shadow: 0 8px 24px rgba(120,224,143,.4); transition: .3s; }
.float-ai:hover .float-body { transform: scale(1.05); }
.float-body .icon { width: 19px; height: 19px; }
.float-text { max-width: 0; overflow: hidden; white-space: nowrap; font-size: 13px; font-weight: 600; transition: max-width .3s, margin .3s; }
.float-ai:hover .float-text { max-width: 90px; margin-left: 7px; }

/* ============ 模态框 ============ */
.modal-root { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal-mask { position: absolute; inset: 0; background: rgba(17,24,39,.5); backdrop-filter: blur(3px); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow: auto; background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); padding: 28px; animation: pop .24s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.modal.small { max-width: 410px; text-align: center; }
.modal-close { position: absolute; right: 14px; top: 14px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--gray-400); z-index: 2; }
.modal-close:hover { background: var(--gray-100); color: var(--ink); }
.modal-close.inline { position: static; margin-left: auto; }
.modal h3 { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.modal-sub { font-size: 13px; color: var(--gray-500); line-height: 1.7; margin-bottom: 22px; }
.modal form { display: flex; flex-direction: column; gap: 14px; }
.modal label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--gray-700); text-align: left; }
.modal input, .modal select, .modal textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: 9px; outline: none; font-size: 14px; font-weight: 400; resize: vertical; transition: .18s; background: #fff; }
.modal input:focus, .modal select:focus, .modal textarea:focus { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.modal input::placeholder, .modal textarea::placeholder { color: var(--gray-400); }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 18px; border-radius: 9px; background: var(--primary); color: #fff; font-size: 14px; font-weight: 600; transition: .18s; }
.btn-primary:hover { background: var(--primary-600); }
.btn-primary .icon { width: 15px; height: 15px; }

/* 详情弹窗 */
.detail-modal { max-width: 620px; }
.detail-hero { display: flex; gap: 16px; align-items: flex-start; padding-right: 30px; }
.detail-hero img { width: 68px; height: 68px; border-radius: 16px; border: 1px solid var(--gray-100); object-fit: cover; }
.detail-hero h3 { margin-bottom: 4px; }
.detail-hero .d-cat { display: inline-block; padding: 3px 9px; border-radius: 6px; background: var(--primary-50); color: var(--primary-600); font-size: 12px; font-weight: 600; }
.detail-cover { width: 100%; height: 190px; object-fit: cover; border-radius: 12px; margin: 20px 0; border: 1px solid var(--gray-100); }
.detail-desc { font-size: 14px; line-height: 1.85; color: var(--gray-600); }
.detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 20px; }
.detail-tags span { padding: 4px 10px; border-radius: 6px; background: var(--gray-50); border: 1px solid var(--gray-100); font-size: 12px; color: var(--gray-500); }
.detail-stats { display: flex; gap: 26px; padding: 14px 0; border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); margin-bottom: 20px; }
.detail-stats div { font-size: 12px; color: var(--gray-400); }
.detail-stats b { display: block; font-size: 17px; color: var(--ink-2); margin-bottom: 2px; }
.detail-actions { display: flex; gap: 10px; }
.detail-actions a, .detail-actions button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px; border-radius: 9px; font-size: 14px; font-weight: 600; transition: .18s; }
.detail-actions .primary { background: var(--primary); color: #fff; }
.detail-actions .primary:hover { background: var(--primary-600); }
.detail-actions .ghost { background: var(--gray-50); border: 1px solid var(--gray-200); color: var(--gray-600); }
.detail-actions .ghost:hover { border-color: var(--primary); color: var(--primary); }
.detail-actions .ghost.on { color: #ef4444; border-color: #fecaca; background: #fef2f2; }
.detail-actions .ghost.on .icon { fill: currentColor; }

/* 对话弹窗 */
.chat-modal { max-width: 600px; height: min(680px, calc(100vh - 40px)); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--gray-100); background: linear-gradient(90deg, #f8fbff, #fff); }
.chat-avatar { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), #4338ca); color: #fff; display: grid; place-items: center; flex: none; }
.chat-avatar .icon { width: 20px; height: 20px; }
.chat-head h3 { font-size: 15px; margin: 0; }
.chat-head p { font-size: 12px; color: var(--gray-400); margin: 0; }
.chat-body { flex: 1; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; background: #fcfcfd; }
.msg { display: flex; gap: 9px; max-width: 88%; }
.msg .m-avatar { width: 28px; height: 28px; border-radius: 9px; background: var(--primary-50); color: var(--primary); display: grid; place-items: center; flex: none; }
.msg .m-avatar .icon { width: 15px; height: 15px; }
.msg .bubble-msg { padding: 10px 13px; border-radius: 12px 12px 12px 3px; background: #fff; border: 1px solid var(--gray-100); font-size: 13.5px; line-height: 1.7; color: var(--gray-700); }
.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg.user .m-avatar { background: var(--gray-200); color: var(--gray-600); }
.msg.user .bubble-msg { border-radius: 12px 12px 3px 12px; background: var(--primary); border-color: var(--primary); color: #fff; }
.msg.user .m-avatar .icon { display: none; }
.rec-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rec-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px; border: 1px solid var(--gray-100); border-radius: 10px; background: #fff; text-align: left; transition: .18s; }
.rec-item:hover { border-color: #bfdbfe; background: var(--primary-50); }
.rec-item img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.rec-item div { min-width: 0; flex: 1; }
.rec-item strong { display: block; font-size: 13px; color: var(--ink-2); }
.rec-item small { display: block; font-size: 11.5px; color: var(--gray-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-item .icon { width: 14px; height: 14px; color: var(--gray-400); }
.bubble-msg.typing-outer { padding: 0; background: transparent; border: 0; }
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px !important; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-400); animation: bounce 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.chat-quick { display: flex; gap: 7px; padding: 10px 16px 0; overflow-x: auto; scrollbar-width: none; background: #fcfcfd; }
.chat-quick::-webkit-scrollbar { display: none; }
.chat-quick button { flex: none; padding: 6px 11px; border: 1px solid var(--gray-200); border-radius: 999px; background: #fff; font-size: 12px; color: var(--gray-600); }
.chat-quick button:hover { border-color: var(--primary); color: var(--primary); }
.chat-input { flex-direction: row !important; gap: 8px !important; padding: 14px 16px; border-top: 1px solid var(--gray-100); background: #fff; }
.chat-input input { flex: 1; }
.chat-input button { width: 42px; height: 42px; flex: none; border-radius: 10px; background: var(--primary); color: #fff; display: grid; place-items: center; transition: .18s; }
.chat-input button:hover { background: var(--primary-600); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 200; padding: 11px 20px; border-radius: 10px; background: rgba(17,24,39,.92); color: #fff; font-size: 13.5px; box-shadow: var(--shadow-lg); animation: toastIn .25s; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ============ 响应式 ============ */
@media (max-width: 1180px) {
  .main-nav a { padding: 7px 9px; font-size: 13px; }
  .header-submit { padding: 8px 13px; }
  .header-submit span { display: none; }
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 中等宽度下 4 列过窄，回到 2 列；图标 + 标题同行的紧凑版式保持不变 */
  .promo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .promo-cards .tool-card { gap: 9px; min-height: 0; }
  .promo-cards .tool-card .tc-logo { width: 38px; height: 38px; }
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .main-grid { grid-template-columns: minmax(0, 1fr); }
  .right-col { order: 2; }
  .side-sticky { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .stat-card { grid-column: 1 / -1; }
  .main-nav {
    /* 小屏菜单：改成 fixed 覆盖层，不再挂在吸顶页头里做 absolute。
       旧版 iOS Safari（iPad mini 2 / iOS 12）不会让 position:sticky 建立层叠上下文，
       页头里的 z-index 因此失效，面板会被后面的 hero 内容压住（搜索框盖在菜单上），
       这里用自身 z-index + 遮罩彻底摆脱对页头层叠的依赖。 */
    position: fixed; left: 0; right: 0; top: var(--nav-top, 100px); z-index: 90;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 2px;
    flex: none; min-width: 0;
    max-height: calc(100vh - var(--nav-top, 100px)); max-height: calc(100dvh - var(--nav-top, 100px));
    overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 10px 16px 14px; background: #fff; border-bottom: 1px solid var(--gray-100);
    border-radius: 0 0 16px 16px; box-shadow: 0 20px 44px rgba(17,24,39,.16);
    visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .main-nav.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .18s ease, transform .18s ease, visibility 0s; }
  .main-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 14.5px; }
  .nav-scrim { display: block; position: fixed; top: var(--nav-top, 100px); right: 0; bottom: 0; left: 0; z-index: 80;
    background: rgba(17,24,39,.34); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
  .nav-scrim.show { opacity: 1; pointer-events: auto; }
  .mobile-menu-btn { display: grid; }
  .mobile-menu-btn[aria-expanded="true"] { background: var(--primary-50); color: var(--primary); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 640px) {
  /* 手机端左右留白 16 → 20px：卡片与正文贴屏幕边缘的观感问题 */
  .container { padding: 0 20px; }
  .promo-desc, .header-search-btn { display: none; }
  /* 手机上「提交工具」只剩图标，纯黑方块观感突兀，改品牌蓝并与页头圆角统一 */
  .header-submit { width: 36px; height: 36px; padding: 0; border-radius: 10px; background: var(--primary-600); box-shadow: 0 3px 10px rgba(37,99,235,.26); }
  .header-submit:hover { background: var(--primary-700); }
  .header-submit .icon { width: 17px; height: 17px; }
  .hero { padding-top: 16px; }
  .hero-content { padding-top: 40px; }
  .hero h1 { font-size: clamp(26px, 7.4vw, 32px); letter-spacing: -.8px; line-height: 1.35; }
  .hero-sub { font-size: 13px; }
  .hero-copy .hero-stat { font-size: 12px; }
  .content-section { padding: 18px 0 44px; }
  .left-col { gap: 32px; }
  .feed-ad { margin-top: 22px; }
  .promo-cards, .cards-grid, .tools-grid { grid-template-columns: minmax(0, 1fr); }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side-sticky { grid-template-columns: minmax(0, 1fr); }
  .stat-card { grid-column: auto; }
  .cover-img { height: 172px; }
  .cta-section { padding: 48px 0; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 36px 0 28px; }
  .footer-bottom { flex-direction: column; gap: 6px; }
  .float-ai { right: 14px; bottom: 18px; }
  .float-body { padding: 11px 12px; box-shadow: 0 6px 18px rgba(120,224,143,.32); }
  .float-body .icon { width: 17px; height: 17px; }
  .modal { padding: 22px 18px; }
  .chat-modal { padding: 0; }
  .detail-hero img { width: 54px; height: 54px; }
}

/* ============ 广告位 ============ */
/* 侧栏推广卡：与 .side-card 同一套白卡语言。图标+标题+徽标同排、描述铺满整行、
   底栏一行放披露说明与按钮；只用左侧细色条区分 tone，去掉原先的大圆装饰与右半幅留白。 */
.ad-card {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid rgba(243,244,246,.9);
  background: #fff;
  padding: 16px 18px 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ad-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ad-accent, var(--primary)); opacity: .8; }
.ad-card > * { position: relative; z-index: 1; }
.ad-head { display: flex; align-items: center; gap: 11px; }
.ad-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px; background: #fff; border: 1px solid var(--ad-line, var(--gray-200)); color: var(--ad-accent, var(--gray-500)); font-size: 10.5px; font-weight: 600; line-height: 1.6; }
.ad-icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #fff; color: var(--ad-accent, var(--primary)); border: 1px solid var(--ad-line, var(--gray-200)); margin: 12px 0 10px; }
.ad-icon .icon { width: 17px; height: 17px; }
.ad-title { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 5px; letter-spacing: -.2px; }
.ad-desc { font-size: 12.5px; line-height: 1.7; color: var(--gray-500); margin-bottom: 12px; }
.ad-cta { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--ad-accent, var(--primary)); transition: .16s; }
a.ad-cta:hover { gap: 7px; }
.ad-cta .icon { width: 13px; height: 13px; }
.ad-note { display: block; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--ad-line, var(--gray-200)); font-size: 10.5px; color: var(--gray-300); }
.ad-card .ad-icon { width: 38px; height: 38px; flex: none; margin: 0; background: var(--ad-soft, #f1f5f9); }
.ad-card .ad-icon .icon { width: 18px; height: 18px; }
.ad-head-body { flex: 1; min-width: 0; }
.ad-card .ad-title { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-card .ad-badge { flex: none; }
.ad-card .ad-desc { margin: 12px 0 14px; }
.ad-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 11px; border-top: 1px dashed var(--ad-line, var(--gray-200)); }
.ad-card .ad-note { margin: 0; padding: 0; border: 0; color: var(--gray-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-card .ad-cta { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 7px 13px; border-radius: 8px; background: var(--ad-accent, var(--primary)); color: #fff; font-size: 12px; }
.ad-card .ad-cta:hover { gap: 7px; opacity: .92; }
.ad-card .ad-cta .icon { width: 13px; height: 13px; }

.tone-blue { --ad-accent: #2563eb; --ad-soft: #eff6ff; --ad-line: #dbeafe; }
.tone-violet { --ad-accent: #7c3aed; --ad-soft: #f5f3ff; --ad-line: #ede9fe; }
.tone-amber { --ad-accent: #b45309; --ad-soft: #fffbeb; --ad-line: #fde68a; }
.tone-teal { --ad-accent: #0f766e; --ad-soft: #f0fdfa; --ad-line: #ccfbf1; }

/* 信息流横条广告 */
.ad-inline { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--ad-line, var(--gray-200)); background: linear-gradient(100deg, var(--ad-soft, #f8fafc), #fff 72%); transition: .2s; }
.ad-inline:hover { border-style: solid; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.ad-inline .ad-icon { margin: 0; width: 38px; height: 38px; flex: none; }
.ad-inline-body { flex: 1; min-width: 0; }
.ad-inline-body b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ad-inline-body small { display: block; margin-top: 3px; font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-inline .ad-cta { flex: none; padding: 7px 12px; border-radius: 8px; background: var(--ad-accent, var(--primary)); color: #fff; font-size: 12px; }
.ad-inline .ad-cta:hover { gap: 3px; opacity: .92; }
.ad-inline .ad-badge { flex: none; }
.ad-inline.grid-ad { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .ad-inline { gap: 10px; padding: 12px 13px; }
  .ad-inline .ad-icon { display: none; }
  .ad-inline .ad-cta { padding: 6px 10px; font-size: 11.5px; }
  .ad-card { padding: 14px 16px 12px; }
  .ad-foot { flex-wrap: wrap; gap: 8px; }
  .ad-card .ad-note { white-space: normal; }
}

/* =========================================================
   首页 SEO 静态区块：AI资讯（构建时注入）
   ========================================================= */
.home-news { padding: 30px 0 8px; }
.home-news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.home-news-head h2 { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.3px; }
.home-news-head p { margin-top: 4px; font-size: 12.5px; color: var(--gray-400); }
.home-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-news-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: .2s; }
.home-news-card:hover { border-color: #bfd3f8; box-shadow: 0 10px 24px rgba(15, 23, 42, .08); transform: translateY(-2px); }
.home-news-card a { display: block; padding: 16px 18px; height: 100%; }
.home-news-card time { font-size: 11.5px; font-weight: 600; color: var(--gray-400); }
/* 资源卡的「类型」胶囊：替代资讯卡的日期位，颜色取资源栏目主色 */
.hn-kicker { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; line-height: 1.6; color: #6d28d9; background: #f5f3ff; }
.home-res { padding-top: 12px; }
.home-news-card h3 { margin: 6px 0 8px; font-size: 14px; line-height: 1.5; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-news-card p { font-size: 12.5px; line-height: 1.7; color: var(--gray-500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hn-meta { display: flex; gap: 12px; margin-top: 10px; font-size: 11px; color: var(--gray-400); }
.hn-meta span:first-child { color: var(--primary-600); }

@media (max-width: 900px) {
  .home-news-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .home-news-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* =========================================================
   智能推荐 · 随机逛一款工具（lucky.js 驱动）
   ========================================================= */
.nav-lucky-tag { display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 4px; background: var(--primary-50); color: var(--primary-600); font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .2px; vertical-align: 1px; }
.main-nav a:hover .nav-lucky-tag { background: #fff; }

.lucky-banner { border-bottom: 1px solid #dbeafe; background: #eff6ff; }
.lucky-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; font-size: 12.5px; line-height: 1.6; color: #1e40af; }
.lucky-inner p { flex: 1; min-width: 190px; margin: 0; }
.lucky-mark { flex: none; padding: 2px 8px; border-radius: 99px; background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 700; }
.lucky-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.lucky-again { padding: 6px 12px; border: 1px solid #bfdbfe; border-radius: 8px; background: #fff; color: #1d4ed8; font-size: 12px; font-weight: 600; cursor: pointer; transition: .16s; }
.lucky-again:hover { background: #dbeafe; }
.lucky-actions a { color: #1d4ed8; white-space: nowrap; }
@media (max-width: 520px) {
  .lucky-inner { align-items: flex-start; }
  .lucky-actions { width: 100%; }
}

/* =========================================================
   品牌预留广告位（首页 / 列表页 / 内容页 / 全站通栏）
   虚线框表示「预留」，编号对应 advertise.html#inventory
   ========================================================= */
.ad-zone { padding: 34px 0 26px; border-top: 1px solid var(--line); background: #fafbff; }
.ad-zone-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.ad-zone-head h2 { font-size: 18px; font-weight: 800; color: var(--ink); }
.ad-zone-head h2 small { margin-left: 7px; padding: 2px 8px; border-radius: 99px; background: var(--primary-50); color: var(--primary-600); font-size: 10.5px; font-weight: 700; vertical-align: 2px; }
.ad-zone-head p { margin-top: 5px; font-size: 12px; color: var(--gray-500); }
.ad-zone-more { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--primary-600); white-space: nowrap; }
.ad-zone-more .icon { width: 13px; height: 13px; }

/* 首页 / 列表页 / 内容页三个页型页底统一 4 个品牌位 */
.brand-ad-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.brand-ad { --ba: #2563eb; --ba-bg: #eff6ff; display: flex; flex-direction: column; min-width: 0; padding: 14px 16px; border: 1px dashed var(--ba); border-radius: 12px; background: var(--ba-bg); transition: .18s; }
.brand-ad:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, .08); }
.ba-qwen { --ba: #7c3aed; --ba-bg: #f6f3ff; }
.ba-workbuddy { --ba: #2563eb; --ba-bg: #eff6ff; }
.ba-doubao { --ba: #ea580c; --ba-bg: #fff7ed; }
.ba-xinghuo { --ba: #0d9488; --ba-bg: #f0fdfa; }
.ba-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ba-badge { padding: 2px 7px; border-radius: 4px; background: var(--ba); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .3px; }
.ba-pos, .ag-pos { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 700; color: var(--ba, var(--primary-600)); }
.ba-body { display: flex; align-items: center; gap: 10px; }
.ba-mark { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--ba); color: #fff; font-size: 17px; font-weight: 800; }
.ba-brand { font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.ba-brand small { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .2px; color: var(--ba); }
.ba-desc { display: block; margin: 10px 0 12px; font-size: 12px; line-height: 1.6; color: var(--gray-500); }
.ba-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 9px; border-top: 1px dashed rgba(15, 23, 42, .12); font-size: 11px; color: var(--gray-500); }
.ba-status { font-weight: 700; color: var(--ba); }
.ba-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 11.5px; font-weight: 700; color: var(--ba); }
.ba-cta .icon { width: 12px; height: 12px; }
.ad-zone-note { margin-top: 12px; font-size: 11px; line-height: 1.6; color: var(--gray-400); }

.ad-zone-global { padding: 6px 0 28px; background: #fafbff; }
.ad-global { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px dashed #93c5fd; border-radius: 11px; background: #fff; transition: .18s; }
.ad-global:hover { border-color: var(--primary); box-shadow: 0 8px 20px rgba(15, 23, 42, .06); }
.ag-badge { padding: 2px 8px; border-radius: 4px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; }
.ag-pos { color: var(--primary-600); }
.ag-text { flex: 1; min-width: 0; }
.ag-text b { display: block; font-size: 13px; color: var(--ink); }
.ag-text small { font-size: 11.5px; color: var(--gray-500); }
.ag-cta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--primary-600); white-space: nowrap; }
.ag-cta .icon { width: 13px; height: 13px; }

/* 广告位地图（advertise.html） */
.adv-inventory { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.adv-inventory table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 12.5px; }
.adv-inventory th, .adv-inventory td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--gray-600); }
.adv-inventory th { background: var(--gray-100); color: var(--ink); font-weight: 700; white-space: nowrap; }
.adv-inventory tr:last-child td { border-bottom: 0; }
.adv-inventory td b { color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.inv-open, .inv-hold, .inv-sold { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.inv-open { background: #ecfdf5; color: #047857; }
.inv-hold { background: #fff7ed; color: #c2410c; }
.inv-sold { background: #eef2ff; color: #4338ca; }
.adv-inv-note { margin-top: 12px; font-size: 11.5px; line-height: 1.7; color: var(--gray-500); }
.adv-inv-note a { color: var(--primary-600); }

@media (max-width: 900px) {
  .brand-ad-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .brand-ad-grid { grid-template-columns: minmax(0, 1fr); }
  .ad-zone-head { flex-direction: column; align-items: flex-start; }
  .ad-global { flex-wrap: wrap; }
  .ag-text { flex-basis: 100%; order: 3; }
}

/* =========================================================
   首页左右栏小型广告位：AD-HL1~3（左）/ AD-HR1~3（右）
   扁条预留位，插在内容版块之间的自然停顿处，不遮挡正文与操作
   ========================================================= */
.mini-ad { --ma: #2563eb; --ma-bg: #eff6ff; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 16px; border: 1px dashed var(--ma); border-radius: 10px; background: var(--ma-bg); transition: .18s; }
.mini-ad:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15, 23, 42, .07); }
.ma-left { min-height: 90px; }
.ma-right { min-height: 60px; gap: 8px; padding: 10px 12px; }
.ma-qwen { --ma: #7c3aed; --ma-bg: #f6f3ff; }
.ma-workbuddy { --ma: #2563eb; --ma-bg: #eff6ff; }
.ma-doubao { --ma: #ea580c; --ma-bg: #fff7ed; }
.ma-tag { display: flex; align-items: center; gap: 8px; flex: none; }
.ma-badge { padding: 2px 7px; border-radius: 4px; background: var(--ma); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .3px; }
.ma-pos { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 700; color: var(--ma); }
.ma-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ma-text b { font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-text small { font-size: 11.5px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-where { flex: none; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--ma); font-size: 10.5px; font-weight: 700; color: var(--ma); white-space: nowrap; }
.ma-cta { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--ma); white-space: nowrap; }
.ma-cta .icon { width: 12px; height: 12px; }
/* 右栏较窄：只保留编号、标题与认领，避免挤压换行 */
.ma-right .ma-text small, .ma-right .ma-where { display: none; }
.ma-right .ma-text b { font-size: 12.5px; }

@media (max-width: 980px) {
  /* 右栏在单列布局下变成两列网格，小条需横跨整行保持横幅形态 */
  .ma-right { grid-column: 1 / -1; min-height: 72px; padding: 12px 16px; gap: 12px; }
  .ma-right .ma-text small, .ma-right .ma-where { display: block; }
  .ma-left .ma-text small { display: none; }
}
@media (max-width: 640px) {
  .mini-ad { flex-wrap: wrap; gap: 8px 10px; padding: 11px 13px; }
  .ma-left, .ma-right { min-height: 0; }
  .ma-text { flex: 1 1 calc(100% - 150px); }
  .ma-text small, .ma-where { display: none !important; }
  .ma-cta { margin-left: auto; }
}

/* 生成页页脚比首页多一列「关于我们」；放在末尾以覆盖上方同特异性的响应式规则 */
.footer-grid-5 { grid-template-columns: 1.5fr .95fr .95fr .95fr 1.15fr; gap: 28px; }
@media (max-width: 1080px) { .footer-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 平板：品牌区独占一行，其余四组 2×2，避免品牌区被挤成窄条 */
@media (max-width: 900px) {
  .footer-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .footer-grid-5 > div:first-child { grid-column: 1 / -1; }
  /* 触摸设备没有 hover，社交入口展开成「图标+文字」胶囊才看得懂 */
  .social { width: auto; height: 34px; padding: 0 12px; }
  .social-txt { display: inline; }
}
/* 手机：品牌区/参与我们 各占一行，中间三组链接并排三列，页脚整屏过长的问题一并解决 */
@media (max-width: 640px) {
  .footer-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 14px; padding: 34px 0 26px; }
  .footer-grid-5 > div:first-child, .footer-grid-5 > div:last-child { grid-column: 1 / -1; }
  .footer-grid h3 { margin-bottom: 12px; }
  .footer-grid li { margin-bottom: 8px; font-size: 12.5px; }
}
/* =========================================================
   首页 AD-HL1 合作素材：整条图片横幅（已售出位置渲染成真实素材）
   底图 assets/img/invite-banner.jpg；文案保留为 HTML 文本以便抓取与无障碍
   注意：首页只加载 styles.css，这段必须留在本文件，不能写进 pages.css
   ========================================================= */
.mini-ad.ma-campaign {
  position: relative;
  overflow: hidden;
  height: 132px;
  min-height: 132px;
  padding: 16px 22px;
  gap: 18px;
  border: 1px solid #2c3f8f;
  border-radius: 14px;
  background: #0b1236;
  box-shadow: 0 8px 24px rgba(20, 32, 90, .14);
}
.mini-ad.ma-campaign:hover { transform: translateY(-2px); border-color: #4a63c0; box-shadow: 0 14px 32px rgba(20, 32, 90, .26); }
.mc-art {
  position: absolute; right: 0; top: 50%;
  height: 300%; width: auto; max-width: none;
  transform: translateY(-50%);
  pointer-events: none; user-select: none;
}
.mc-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #080e2c 0%, rgba(8, 14, 44, .96) 34%, rgba(8, 14, 44, .62) 58%, rgba(8, 14, 44, .08) 84%, rgba(8, 14, 44, 0) 100%);
}
.mc-inner, .mc-cta { position: relative; z-index: 1; }
.mc-inner { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.mc-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mc-tag { display: inline-flex; align-items: center; gap: 7px; }
.mc-badge { padding: 2px 8px; border-radius: 5px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .38); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .5px; }
.mc-pos, .mc-kicker { font-size: 10.5px; color: rgba(255, 255, 255, .66); letter-spacing: .3px; }
.mc-pos { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mc-headline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .3); }
.mc-headline em { font-style: normal; padding: 4px 10px; border-radius: 99px; background: rgba(255, 193, 7, .14); border: 1px solid rgba(255, 209, 102, .42); color: #ffd479; font-size: 12px; font-weight: 700; white-space: nowrap; text-shadow: none; }
.mc-short { font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-cta { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px; border-radius: 99px; background: linear-gradient(135deg, #ffd979, #ffb524); color: #2a1a00; font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 18px rgba(255, 181, 36, .32); }
.mc-cta .icon { width: 13px; height: 13px; }
@media (max-width: 980px) {
  .mini-ad.ma-campaign { height: 122px; min-height: 122px; }
  .mc-headline { font-size: 19px; }
  .mc-art { height: 270%; }
}
@media (max-width: 640px) {
  .mini-ad.ma-campaign { height: auto; min-height: 152px; flex-wrap: wrap; gap: 12px; padding: 16px; }
  /* 容器改为自适应高度后百分比会失效，改用绝对像素保证底图仍被裁成横幅 */
  .mc-art { height: 300px; opacity: .85; }
  .mc-shade { background: linear-gradient(90deg, rgba(8, 14, 44, .95) 0%, rgba(8, 14, 44, .82) 62%, rgba(8, 14, 44, .35) 100%); }
  .mc-inner { flex: 1 1 100%; gap: 7px; }
  .mc-headline { font-size: 18px; gap: 8px; }
  .mc-headline em { font-size: 11px; }
  .mc-short { white-space: normal; font-size: 11.5px; }
  .mc-cta { padding: 8px 14px; font-size: 12px; }
}