/* 小灵市集 · 改版设计
   CocoLoop 版式 × 原配色（米白编辑感）
   共享样式：被 index / projects / membership / community / auth / submit 复用 */
:root {
  --canvas: #f5f0e6;
  --paper: #fffdf7;
  --ink: #181914;
  --muted: #66675f;
  --line: #262720;
  --lime: #c7f36b;
  --lime-deep: #91c53b;
  --coral: #ff7c68;
  --coral-deep: #d95042;
  --sky: #7ed7e6;
  --sky-deep: #3aa4b6;
  --yellow: #ffd85a;
  --pink: #f3a7be;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-hard: 4px 4px 0 var(--ink);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, video { max-width: 100%; display: block; }
input, textarea { font-family: inherit; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* 深色主题（保留原站 data-theme=dark 的能力） */
:root[data-theme="dark"] {
  --canvas: #171a16;
  --paper: #20241e;
  --ink: #f3f0e6;
  --muted: #9a9c92;
  --line: #e6e2d2;
  --shadow-hard: 4px 4px 0 #000;
}
:root[data-theme="dark"] .cta,
:root[data-theme="dark"] .featured__cta,
:root[data-theme="dark"] .card__top .tag,
:root[data-theme="dark"] .search-btn,
:root[data-theme="dark"] .brand__mark {
  color: var(--ink);
}
:root[data-theme="dark"] .nav-search,
:root[data-theme="dark"] .search-row { background: #262a23; }
:root[data-theme="dark"] .search-row input::placeholder { color: #8a8c82; }

/* ============ 顶部胶囊导航（CocoLoop 版式） ============ */
.nav-bar {
  position: relative; z-index: 20;
  max-width: 1240px; margin: 18px auto 0; padding: 10px 18px;
  display: flex; align-items: center; gap: 20px;
  border: 2px solid var(--ink); border-radius: 999px;
  background: var(--paper);
  box-shadow: var(--shadow-hard);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; white-space: nowrap; }
.brand__mark {
  display: grid; width: 32px; height: 32px; place-items: center;
  border: 2px solid var(--ink); border-radius: 8px;
  background: var(--lime); font-weight: 900; font-size: 17px;
  box-shadow: 2px 2px 0 var(--ink);
}
.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; overflow-x: auto; }
.nav-links a {
  padding: 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted);
  white-space: nowrap; transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--ink); background: rgba(24,25,20,0.06); }
.nav-links a.is-hot { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.nav-links a.is-hot em {
  font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 999px;
  background: var(--coral); color: var(--paper); border: 1.5px solid var(--ink);
}
.nav-search {
  display: flex; align-items: center; gap: 7px; flex: 0 1 246px; min-width: 170px;
  border: 2px solid var(--line); border-radius: 999px; padding: 5px 7px 5px 12px;
  background: var(--canvas); color: var(--muted); font-size: 13px; font-weight: 600;
  white-space: nowrap; transition: border-color .15s, background .15s;
}
.nav-search:focus-within { border-color: var(--ink); background: var(--paper); }
.nav-search__icon { flex: none; }
.nav-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; }
.nav-search input::placeholder { color: var(--muted); }
.nav-search__submit { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); cursor: pointer; }
.nav-search__submit:hover { background: var(--lime-deep); color: var(--ink); }
.nav-search kbd { font: 11px/1 ui-monospace, monospace; color: var(--muted); border: 1.5px solid var(--line); border-radius: 5px; padding: 3px 6px; }
.theme-btn {
  display: grid; width: 38px; height: 38px; place-items: center; flex: none;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink); cursor: pointer;
}
.theme-btn__icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cta {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; flex: none;
  border: 2px solid var(--ink); background: var(--lime); color: var(--ink); font-weight: 800; font-size: 14px;
  box-shadow: var(--shadow-hard); transition: transform .12s, box-shadow .12s;
}
.cta:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.cta:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.cta--coral { background: var(--coral); color: var(--paper); }
.cta--sky { background: var(--sky); }
.nav-account { position: relative; display: inline-flex; align-items: stretch; flex: none; }
.nav-account > .cta { border-radius: 999px 0 0 999px; padding-right: 12px; max-width: 230px; overflow: hidden; }
.nav-account > .cta span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-account__toggle { width: 34px; border: 2px solid var(--ink); border-left: 0; border-radius: 0 999px 999px 0; background: var(--lime); color: var(--ink); font-size: 18px; font-weight: 900; cursor: pointer; box-shadow: var(--shadow-hard); }
.nav-account__toggle:hover, .nav-account.is-open .nav-account__toggle { background: var(--sky); }
.nav-account__menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 80; width: 250px; padding: 8px; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--shadow-hard); }
.nav-account__menu a, .nav-account__menu button { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.nav-account__menu a:hover, .nav-account__menu button:hover { background: var(--lime); }
.nav-account__menu small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.nav-account__membership { display: grid; gap: 3px; margin: 4px 0; padding: 10px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.45; }
.nav-account__membership span, .nav-account__membership small { color: var(--muted); }

/* 移动端胶囊导航交给抽屉，避免挤压 */
.nav-toggle {
  display: none; flex: none; place-items: center; width: 38px; height: 38px;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
.mobile-drawer {
  display: none; max-width: 1240px; margin: 8px auto 0; padding: 14px 18px;
  border: 2px solid var(--ink); border-radius: 16px; background: var(--paper);
  box-shadow: var(--shadow-hard); flex-direction: column; gap: 4px;
}
.mobile-drawer a { padding: 12px 14px; border-radius: 10px; font-weight: 700; font-size: 15px; }
.mobile-drawer a:hover { background: rgba(24,25,20,0.06); }
.mobile-drawer.open { display: flex; }

/* ============ 居中品牌区 ============ */
.hero { position: relative; }
.hero__inner { position: relative; z-index: 2; }

/* 可拖拽布局容器 + 网格背景（原本的 hero 网格背景移至此） */
.layout-root { position: relative; isolation: isolate; }
.layout-root::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(24,25,20,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,25,20,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 50% at 50% 8%, #000 25%, transparent 100%);
          mask-image: radial-gradient(80% 50% at 50% 8%, #000 25%, transparent 100%);
}
.hero__center { grid-column: 1 / -1; text-align: left; padding: 0; }
.search-panel { text-align: left; }
.hero__wordmark {
  font-size: clamp(50px, 9vw, 90px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05;
  color: var(--ink);
}
.hero__tagline { margin-top: 14px; font-size: clamp(16px, 2vw, 21px); font-weight: 600; color: var(--muted); }
.hero__tagline b { color: var(--ink); font-weight: 900; }

/* ============ 搜索面板 ============ */
.search-panel {
  width: min(900px, 100%); max-width: 900px; margin: 30px auto 0; padding: 22px 24px 24px;
  border: 2px solid var(--ink); border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--ink);
}
.mode-switch {
  display: inline-flex; margin: 2px auto 16px; position: relative;
  border: 2px solid var(--ink); border-radius: 999px; padding: 3px; background: var(--canvas);
}
.mode-switch button {
  min-width: 144px;
  padding: 9px 22px; border: 0; border-radius: 999px; background: transparent; color: var(--muted);
  font-size: 14px; font-weight: 700; cursor: pointer; transition: color .15s, background .15s;
}
.mode-switch button.is-active { background: var(--ink); color: var(--paper); }
.search-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px;
  border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas);
  transition: border-color .15s, background .15s;
}
.search-row:focus-within { border-color: var(--ink); background: var(--paper); }
.search-row svg { color: var(--muted); flex: none; }
.search-row input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 16px; }
.search-row input::placeholder { color: #999a8f; }
.search-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 11px 20px; border: 2px solid var(--ink); border-radius: var(--radius-sm);
  background: var(--sky); color: var(--ink); font-weight: 800; font-size: 15px;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .12s, box-shadow .12s;
}
.search-btn:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.search-row .mode-avatar { display: none; width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--ink); flex: none; background: var(--lime); place-items: center; }
.search-panel[data-mode="agent"] .mode-avatar { display: grid; }

/* 智能体模式：搜索框换成安装链接输入框 */
.install-row { display: none; }
.search-panel[data-mode="agent"] .install-row {
  display: flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 8px 8px 8px 16px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--paper); box-shadow: 4px 4px 0 var(--ink);
}
.search-panel .search-row,.search-panel .install-row{width:100%;min-height:62px}
.search-panel[data-mode="agent"] .search-row { display: none; }
.search-panel[data-mode="agent"] .chips { display: none; }
.install-row input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--ink); font-size: 14px; font-weight: 700; cursor: default;
}
.install-row__copy {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 11px 20px; border-radius: 999px; border: 2px solid var(--ink);
  background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 900;
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.install-row__copy:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 rgba(24,25,20,.35); }
.install-row__copy.is-copied { background: var(--lime); color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.chips button {
  padding: 7px 14px; border: 2px solid transparent; border-radius: 999px; background: transparent;
  color: var(--muted); font-size: 13px; font-weight: 700; transition: all .15s;
}
.chips button:hover { color: var(--ink); background: var(--lime); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* 产品指标标签：热度 + 下载量 */
.m-tags { display: inline-flex; gap: 6px; margin-top: 7px; vertical-align: middle; }
.m-tag {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  border: 1.5px solid rgba(24,25,20,.22); background: rgba(24,25,20,.04);
  font-size: 11.5px; font-weight: 800; color: var(--muted); white-space: nowrap;
}
.m-tag--heat { border-color: rgba(255,124,104,.55); background: rgba(255,124,104,.12); color: #c4442f; }
.m-tag--new { border-color: rgba(46,160,110,.55); background: rgba(46,160,110,.13); color: #1f7a4d; }

/* 企业 AI 案例：仅保留「企业落地案例」面板（视频推荐模块已按需求移除） */
.case-pane__lead { margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.7; }
.case-pane__lead code {
  padding: 1px 6px; border-radius: 6px; background: rgba(24,25,20,.07);
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
}
.case-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.case-count { flex: none; font-size: 12.5px; font-weight: 800; color: var(--muted); }

/* 智能体平台图标行 */
.platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.platforms a {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink); transition: transform .15s, box-shadow .15s;
}
.platforms a:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.platforms svg { width: 22px; height: 22px; }
.platforms .ph { font-size: 15px; font-weight: 900; }

/* ============ 精选项目 + 统计条 ============ */
.featured {
  position: relative; z-index: 2;
  max-width: 1140px; margin: 80px auto 0; padding: 30px 26px;
  border-top: 2px solid var(--line);
  display: grid; grid-template-columns: minmax(0,1.4fr) auto; gap: 28px; align-items: center;
}
.featured__thumb {
  position: relative; width: 72px; height: 72px; border-radius: var(--radius-md); flex: none;
  display: grid; place-items: center; font-size: 28px; font-weight: 900; color: var(--paper);
  border: 2px solid var(--ink); background: var(--coral);
  box-shadow: var(--shadow-hard);
}
.featured__body { display: flex; gap: 18px; align-items: flex-start; }
.featured__title { font-size: 21px; font-weight: 900; }
.featured__meta { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.featured__cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; padding: 10px 18px;
  border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); font-size: 14px; font-weight: 800;
  background: var(--lime); box-shadow: var(--shadow-hard); transition: transform .12s, box-shadow .12s;
}
.featured__cta:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.stats { display: flex; gap: 40px; }
.stat b { display: block; font-size: 34px; font-weight: 900; letter-spacing: -0.02em; }
.stat b em { font-style: normal; color: var(--coral-deep); }
.stat span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 600; }

/* ============ 内容区块通用 ============ */
.section { max-width: 1140px; margin: 0 auto; padding: 52px 24px 0; }
.section-kicker { color: var(--sky-deep); font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 2px solid var(--line); }
.section-head h2 { margin-top: 10px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 900; letter-spacing: -0.01em; line-height: 1.12; }
.section-head p { max-width: 380px; color: var(--muted); font-size: 14px; line-height: 1.7; }

/* ============ 大分类标签（FR-04：办公/做视频，中文大字） ============ */
.tag-rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 26px; }
.tagp {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 12px; border: 2px solid var(--ink); border-radius: var(--radius-sm);
  background: var(--paper); box-shadow: var(--shadow-hard);
  transition: transform .15s, box-shadow .15s;
}
.tagp:hover { transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--ink); }
.tagp .tagp-ico { font-size: 24px; }
.tagp b { font-size: 15px; font-weight: 900; }
.tagp span { font-size: 12px; color: var(--muted); }

/* ============ 卡片网格 ============ */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.card {
  display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 2px solid var(--ink); border-radius: var(--radius-sm);
  background: var(--paper); box-shadow: var(--shadow-hard); transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--ink); }
.card__top { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); flex-wrap: wrap; }
.card__top .tag { padding: 3px 9px; border-radius: 999px; font-weight: 900; border: 1.5px solid var(--ink); }
.tag-skill { color: var(--ink); background: var(--lime); }
.tag-mcp { color: var(--ink); background: var(--sky); }
.tag-proj { color: var(--ink); background: var(--yellow); }
.card h3 { font-size: 17px; font-weight: 900; line-height: 1.35; }
.card p { color: var(--muted); font-size: 14px; line-height: 1.65; flex: 1; }
.card__foot { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; font-weight: 600; }
.card__foot b { color: var(--ink); }
.card--play { cursor: pointer; }

/* ============ 案例视频（FR-12：视频 > 文字） ============ */
.case {
  display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 24px;
  padding: 24px; border: 2px solid var(--ink); border-radius: var(--radius-sm);
  background: var(--paper); box-shadow: var(--shadow-hard);
}
.case__video {
  position: relative; aspect-ratio: 16/9; border: 2px solid var(--ink); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--canvas);
}
.case__video iframe, .case__video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.case__play {
  position: absolute; inset: 0; display: grid; place-items: center; background: rgba(24,25,20,0.12);
}
.case__play span {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 999px;
  background: var(--coral); color: var(--paper); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  font-size: 26px; padding-left: 5px;
}
.case__score { display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.case__score h3 { font-size: 22px; font-weight: 900; }
.case__score p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.statrow { display: flex; gap: 18px; }
.statbox {
  flex: 1; padding: 16px; border: 2px solid var(--ink); border-radius: var(--radius-sm);
  background: var(--lime); box-shadow: var(--shadow-hard);
}
.statbox--sky { background: var(--sky); }
.statbox--yellow { background: var(--yellow); }
.statbox b { display: block; font-size: 26px; font-weight: 900; letter-spacing: -0.02em; }
.statbox span { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--ink); }

/* ============ 栏目（教程/案例/服务） ============ */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.col {
  padding: 24px 20px; border: 2px solid var(--ink); border-radius: var(--radius-sm);
  background: var(--paper); box-shadow: var(--shadow-hard); transition: transform .15s, box-shadow .15s;
}
.col:hover { transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--ink); }
.col h3 { font-size: 18px; font-weight: 900; }
.col p { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.col__more { display: inline-flex; margin-top: 14px; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--ink); }

/* ============ 拉新三件套（FR-08/13：免费资料 + 社群 + 活动） ============ */
.hook {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px;
}
.hook-item {
  padding: 24px 20px; border: 2px solid var(--ink); border-radius: var(--radius-sm);
  background: var(--paper); box-shadow: var(--shadow-hard); text-align: center;
  transition: transform .15s, box-shadow .15s;
}
.hook-item:hover { transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--ink); }
.hook-item .hook-num {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  background: var(--coral); color: var(--paper); border: 2px solid var(--ink); font-size: 18px; font-weight: 900;
}
.hook-item h3 { margin-top: 12px; font-size: 17px; font-weight: 900; }
.hook-item p { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* ============ 会员对比 ============ */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 28px; }
.plan {
  padding: 26px 22px; border: 2px solid var(--ink); border-radius: var(--radius-sm);
  background: var(--paper); box-shadow: var(--shadow-hard); display: flex; flex-direction: column; gap: 14px;
}
.plan--featured { background: var(--lime); }
.plan__badge {
  align-self: flex-start; padding: 3px 10px; border-radius: 999px; border: 2px solid var(--ink);
  background: var(--coral); color: var(--paper); font-size: 12px; font-weight: 900;
}
.plan h3 { font-size: 20px; font-weight: 900; }
.plan__price { display: flex; align-items: baseline; gap: 6px; }
.plan__price b { font-size: 42px; font-weight: 900; letter-spacing: -0.02em; }
.plan__price span { color: var(--muted); font-size: 14px; font-weight: 700; }
.plan ul { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.plan li { display: flex; gap: 8px; align-items: flex-start; }
.plan li::before { content: "✓"; color: var(--ink); font-weight: 900; }
.plan li.off { color: var(--muted); }
.plan li.off::before { content: "—"; }

/* ============ 社区 ============ */
.social-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.social-card {
  padding: 22px 20px; border: 2px solid var(--ink); border-radius: var(--radius-sm);
  background: var(--paper); box-shadow: var(--shadow-hard); text-align: center;
}
.social-card .tag { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; border: 2px solid var(--ink); font-size: 26px; box-shadow: 3px 3px 0 var(--ink); }
.social-card h3 { margin-top: 12px; font-size: 17px; font-weight: 900; }
.social-card p { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.social-card .social-meta { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--sky-deep); }

/* ============ 联系/表单（FR-06：每页底部留联系方式） ============ */
.contact {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px;
  padding: 22px 22px; border: 2px solid var(--ink); border-radius: var(--radius-sm);
  background: var(--paper); box-shadow: var(--shadow-hard);
}
.contact__wecom { text-align: center; }
.contact__wecom img {
  width: 160px; height: 160px; margin: 0 auto; border: 2px solid var(--ink); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hard); object-fit: cover; background: var(--canvas);
}
.contact__wecom b { display: block; margin-top: 12px; font-size: 16px; font-weight: 900; }
.contact__wecom p { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.contact__form { display: flex; flex-direction: column; gap: 12px; }
.contact__form input, .contact__form textarea {
  width: 100%; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: var(--canvas); color: var(--ink); font-size: 14px; outline: 0; transition: border-color .15s, background .15s;
}
.contact__form input:focus, .contact__form textarea:focus { border-color: var(--ink); background: var(--paper); }
.contact__form textarea { resize: vertical; min-height: 110px; }
.contact__submit {
  align-self: flex-start; padding: 12px 22px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--coral); color: var(--paper); font-weight: 800; font-size: 15px; box-shadow: var(--shadow-hard);
  transition: transform .12s, box-shadow .12s;
}
.contact__submit:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }

/* ============ 一键分享（FR-11） ============ */
.share-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 800; box-shadow: 2px 2px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.share-btn:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
.share-btn--wechat { background: var(--lime); }
.share-btn--qq { background: var(--sky); }
.share-btn--link { background: var(--yellow); }

/* ============ 提示 / 条幅 ============ */
.banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 22px; border: 2px solid var(--ink); border-radius: var(--radius-sm);
  background: var(--yellow); box-shadow: var(--shadow-hard); font-size: 15px; font-weight: 800;
}
.banner--coral { background: var(--coral); color: var(--paper); }
.banner--sky { background: var(--sky); }
.banner small { display: block; font-weight: 600; font-size: 13px; margin-top: 2px; }
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px);
  padding: 13px 22px; border: 2px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper);
  font-size: 14px; font-weight: 700; box-shadow: var(--shadow-hard); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ 面包屑 ============ */
.crumbs { padding: 28px 24px 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs span { margin: 0 6px; }

/* ============ 页脚 ============ */
footer { margin-top: 90px; border-top: 2px solid var(--line); padding: 48px 24px 64px; background: var(--canvas); }
.foot-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
.foot-brand b { font-size: 17px; font-weight: 900; }
.foot-brand p { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.foot-col h4 { font-size: 13px; font-weight: 900; letter-spacing: .06em; color: var(--muted); margin-bottom: 12px; }
.foot-col a { display: block; padding: 5px 0; color: var(--muted); font-size: 14px; font-weight: 600; }
.foot-col a:hover { color: var(--ink); }
.foot-bottom { max-width: 1140px; margin: 34px auto 0; padding-top: 20px; border-top: 1.5px solid var(--line); color: var(--muted); font-size: 12px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ============ 首页顶部：品牌 + 今日热榜 对齐 ============ */
.hero__top {
  max-width: 1140px; margin: 0 auto; padding: 26px 24px 0;
  display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 28px; align-items: start;
  width: 100%; min-width: 0; box-sizing: border-box;
}
.hero__brand { padding-top: 6px; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hero__brand .hero__wordmark { font-size: clamp(44px, 7vw, 76px); }
.hero__brand .hero__tagline { margin-top: 10px; }
/* 搜索面板：紧跟字标之下，与左列同宽 */
.hero__brand .search-panel { width: 100%; max-width: 900px; min-width: 0; margin: 22px 0 0; }
.hero__brand .mode-switch { margin: 2px 0 16px; }
.hero__brand .chips { justify-content: flex-start; }
/* 安装代码块：与搜索面板同宽、左对齐 */
/* 热门 Skill 榜单（与主导航同高）：右栏，跨过容器右缘半个边框 */
.hero__rail { margin-right: -2px; }
@media (max-width: 960px) {
  .hero__top { grid-template-columns: minmax(0, 1fr); }
  .hero__brand { padding-top: 0; }
  .hero__rail { margin-right: 0; }
}

/* 平台卡片（图标 + 名字 + 简介）：跟随左列、左对齐 */
.hero__brand .platform-grid {
  width: 100%; max-width: 720px; min-width: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 16px 0 0;
}
.platform-card {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; text-align: left;
  border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink); transition: transform .15s, box-shadow .15s;
}
.platform-card:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.platform-card__ico {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  border: 2px solid var(--ink); background: var(--lime); color: var(--ink);
}
.platform-card__ico svg { width: 16px; height: 16px; }
.platform-card b { font-size: 14px; font-weight: 900; }
.platform-card span { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* 模式提示条 */
.mode-note { width: 100%; margin: 0 0 16px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }

/* 智能体终端安装代码块（CocoLoop 版式） */
.term { max-width: 680px; margin: 0 auto; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: #10120f; box-shadow: var(--shadow-hard); overflow: hidden; text-align: left; }
.term__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #1c1f1a; border-bottom: 2px solid var(--ink); }
.term__dot { width: 11px; height: 11px; border-radius: 999px; }
.term__dot--r { background: #ff5f57; }
.term__dot--y { background: #febc2e; }
.term__dot--g { background: #28c840; }
.term__title { margin-left: 8px; color: #9db6a0; font-family: ui-monospace, monospace; font-size: 12px; }
.term__body { position: relative; padding: 14px 16px; }
/* 「复制给智能体」主入口：做成显眼的橙色按钮，不再是一个小图标 */
.term__badge { margin-left: auto; padding: 2px 9px; border-radius: 999px; background: var(--coral); color: var(--paper); font-size: 11px; font-weight: 900; }
.term__acts { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin: -2px 0 12px; padding-bottom: 10px; border-bottom: 1.5px solid rgba(255,255,255,.1); }
.term__copy {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
  border: 2px solid var(--paper); border-radius: 999px; background: var(--coral); color: var(--paper);
  font-size: 14px; font-weight: 900; box-shadow: 0 0 0 3px rgba(255,124,104,.25), 3px 3px 0 rgba(0,0,0,.5);
  transition: transform .12s, box-shadow .12s, background .2s;
}
.term__copy:hover { transform: translate(-2px,-2px); box-shadow: 0 0 0 4px rgba(255,124,104,.3), 5px 5px 0 rgba(0,0,0,.55); }
.term__copy.is-copied { background: var(--lime); color: var(--ink); border-color: var(--ink); }
.term__acts-tip { color: #9db6a0; font-size: 12px; }
.term__body pre { white-space: pre-wrap; word-break: break-all; }
.term__body code { display: block; color: #7ce3a1; font-family: ui-monospace, monospace; font-size: 13px; line-height: 1.7; }
.term__body code:nth-child(n+2) { color: #7cd0e6; }
.term__body .term__url { color: #7ce3a1; text-decoration: underline; }
.term__hint { max-width: 680px; margin: 14px auto 0; color: var(--muted); font-size: 12.5px; text-align: center; }

/* 统计条 */
.stats-bar {
  display: flex; gap: 40px; flex-wrap: wrap; margin: 48px auto 0; max-width: 1140px; padding: 0 24px;
  padding-bottom: 22px; border-bottom: 2px solid var(--line);
}

/* 分类 Tab（榜单/热门） */
.tab-rail { display: flex; flex-wrap: wrap; gap: 8px; }
.tabp {
  padding: 8px 16px; border: 2px solid var(--line); border-radius: 999px; background: var(--paper);
  color: var(--muted); font-size: 13px; font-weight: 800; cursor: pointer; transition: all .15s;
}
.tabp:hover { border-color: var(--ink); color: var(--ink); }
.tabp.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tabp--new { border-color: rgba(46,160,110,.6); color: #1f7a4d; }
.tabp--new.is-active { background: #1f7a4d; border-color: #1f7a4d; color: var(--paper); }
.section-head__more { font-size: 13px; font-weight: 800; color: var(--ink); white-space: nowrap; }

/* 榜单条目（精选 Skill 榜单） */
.board { display: flex; flex-direction: column; gap: 10px; }
.board-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper);
  box-shadow: var(--shadow-hard); transition: transform .15s, box-shadow .15s;
}
.board-row:hover { transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--ink); }
.board__num {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 900;
}
.board__num--top { background: var(--coral); }
.board__emoji { flex: none; font-size: 24px; }
.board__body { min-width: 0; flex: 1; }
.board__body b { display: block; font-size: 16px; font-weight: 900; }
.board__body p { margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.board__meta { flex: none; display: flex; align-items: center; gap: 10px; }
.board__meta span { color: var(--muted); font-size: 12px; font-weight: 700; }
.board__lvl {
  font-style: normal; padding: 2px 8px; border-radius: 999px; border: 1.5px solid var(--ink);
  background: var(--lime); font-size: 11px; font-weight: 900;
}

/* 专题网格 */
.topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.topic {
  display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 2px solid var(--ink);
  border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--shadow-hard);
  transition: transform .15s, box-shadow .15s;
}
.topic:hover { transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--ink); }
.topic__emoji { font-size: 28px; }
.topic__body b { font-size: 17px; font-weight: 900; }
.topic__body p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.topic__count { margin-top: auto; font-size: 12px; font-weight: 800; color: var(--sky-deep); }

/* 热门 Skill 榜单（双列） */
.hot-tabs { display: flex; gap: 8px; }
.picks-cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
@media (max-width: 960px) { .picks-cols { grid-template-columns: 1fr; } }
.hot-big { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.hot-big a {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper);
  box-shadow: var(--shadow-hard); transition: transform .15s, box-shadow .15s;
}
.hot-big a:hover { transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--ink); }
.hot-big .rank__num {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 900;
}
.hot-big .rank__num--top { background: var(--coral); }
.hot-big .rank__body { min-width: 0; flex: 1; }
.hot-big .rank__body h3 { font-size: 15px; font-weight: 900; }
.hot-big .rank__body p { margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.hot-big .rank__heat { flex: none; color: var(--coral-deep); font-size: 13px; font-weight: 800; font-style: normal; }

/* 抖音案例视频卡 */
.cases { padding: 22px; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--shadow-hard); }
.cases__h { font-size: 17px; font-weight: 900; }
.cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
@media (max-width: 960px) { .cases__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cases__grid { grid-template-columns: 1fr; } }
.video-card {
  display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 2px solid var(--line);
  border-radius: var(--radius-sm); background: var(--canvas); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.video-card:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); border-color: var(--ink); }
.video-card__play {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  background: var(--coral); color: var(--paper); border: 2px solid var(--ink); font-size: 16px; padding-left: 3px;
}
.video-card__body b { font-size: 14px; font-weight: 900; line-height: 1.4; }
.video-card__body p { margin-top: 4px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.video-card__go { margin-top: auto; font-size: 12.5px; font-weight: 800; color: var(--ink); }

/* 热榜卡片（顶部右栏） */
.hot { padding: 22px 20px; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--shadow-hard); }
.hot__head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; border-bottom: 2px solid var(--line); }
.hot__head h3 { font-size: 18px; font-weight: 900; }
.hot__head span { color: var(--muted); font-size: 12px; font-weight: 600; }
.hot__list { list-style: none; margin-top: 6px; }
.hot__list a { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1.5px solid rgba(24,25,20,0.08); }
.hot__list a:hover b { color: var(--coral-deep); }
.hot__rank {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  background: var(--canvas); border: 1.5px solid var(--line); font-size: 12px; font-weight: 900; color: var(--muted);
}
.hot__rank--top { background: var(--coral); border-color: var(--ink); color: var(--paper); }
.hot__body { min-width: 0; }
.hot__body b { display: block; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hot__body span { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.hot__heat { flex: none; margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 700; font-style: normal; }
.hot__more { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 800; color: var(--ink); }

/* ============ 响应式 ============ */
@media (max-width: 960px) {
  .card-grid, .cols, .social-row { grid-template-columns: repeat(2, 1fr); }
  .tag-rail { grid-template-columns: repeat(3, 1fr); }
  .featured { grid-template-columns: 1fr; gap: 20px; }
  .stats { gap: 26px; flex-wrap: wrap; }
  .case { grid-template-columns: 1fr; }
  .hook, .plans { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .foot-inner { grid-template-columns: 1fr 1fr; }
  .topic-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .nav-links, .nav-search, .theme-btn, .nav .cta { display: none; }
  .nav-toggle { display: grid; }
  .brand__mark { width: 30px; height: 30px; }
  .card-grid, .cols, .social-row, .tag-rail { grid-template-columns: 1fr; }
  .topic-grid { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .foot-inner { grid-template-columns: 1fr; }
  /* 窄屏下搜索行更紧凑，避免按钮溢出 */
  .search-panel { padding: 12px; }
  .search-row { gap: 6px; padding: 5px 5px 5px 12px; }
  .search-row .mode-avatar { width: 26px; height: 26px; }
  .search-row > svg { flex: none; width: 15px; height: 15px; }
  .search-row input { min-width: 0; }
  .search-btn { flex: none; padding: 10px 13px; font-size: 14px; }
  .chips { gap: 6px; }
  .chips button { padding: 6px 11px; font-size: 12px; }
  /* 平台卡片固定 2 列，最后一张（Hermes）跨满整行对齐 */
  .hero__brand .platform-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__brand .platform-card:last-child { grid-column: 1 / -1; }
  /* 移动端导航吸顶：滚动时菜单常驻顶部 */
  .nav-bar { position: sticky; top: 8px; margin: 8px auto 0; z-index: 50; }
  /* 抽屉展开时固定到视口顶部（不受滚动位置影响） */
  .mobile-drawer.open { position: fixed; top: 64px; left: 12px; right: 12px; z-index: 60; }
}
@media (max-width: 420px) {
  .search-row svg { display: none; }
}

/* ===== 新增：智能体推荐折叠 ===== */
.platform-grid__title { grid-column: 1 / -1; font-size: 14px; font-weight: 900; color: var(--ink); margin: 2px 0 4px; }
.platform-card--more { display: none; }
.platform-card--more.is-shown { display: flex; }
.agents-more {
  grid-column: 1 / -1; justify-self: start; align-self: center;
  padding: 9px 18px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--paper); color: var(--ink); font-weight: 800; font-size: 13px;
  box-shadow: 2px 2px 0 var(--ink); cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.agents-more:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }

/* ===== 新增：联系区三平台二维码 ===== */
.contact__qr-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.contact__qr { text-align: center; padding: 18px 12px; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--shadow-hard); }
.contact__qr img { display: block; width: 140px; height: 140px; margin: 0 auto; border: 2px solid var(--ink); border-radius: 8px; object-fit: cover; background: var(--canvas); }
.contact__qr b { display: block; margin-top: 12px; font-size: 15px; font-weight: 900; }
.contact__qr p { margin-top: 6px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }

/* ===== 新增：一键分享浮动按钮 + 弹层 ===== */
.share-fab {
  position: fixed; right: 20px; bottom: 22px; z-index: 60;
  width: 52px; height: 52px; display: grid; place-items: center;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--lime); color: var(--ink);
  box-shadow: var(--shadow-hard); cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.share-fab:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.share-mask {
  position: fixed; inset: 0; z-index: 80; display: none; place-items: center;
  background: rgba(24,25,20,.55); padding: 20px;
}
.share-mask.show { display: grid; }
.share-modal {
  width: min(420px, 100%); padding: 22px; border: 2px solid var(--ink); border-radius: var(--radius-md);
  background: var(--paper); box-shadow: 6px 6px 0 var(--ink);
}
.share-modal__head { display: flex; align-items: center; justify-content: space-between; }
.share-modal__head b { font-size: 17px; font-weight: 900; }
.share-modal__close { width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); font-weight: 900; cursor: pointer; }
.share-modal__title { margin-top: 12px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.share-modal__link { display: flex; gap: 8px; margin-top: 14px; }
.share-modal__link input { flex: 1; min-width: 0; padding: 10px 12px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); font-size: 13px; color: var(--ink); }
.share-modal__tip { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--sky-deep); font-weight: 700; }
.share-modal__acts { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.share-modal__acts .share-btn { padding: 10px 16px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); font-weight: 800; font-size: 13px; box-shadow: 2px 2px 0 var(--ink); cursor: pointer; }
.share-modal__acts .share-btn:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }

/* ===== 新增：移动端适配 ===== */
@media (max-width: 640px) {
  .contact__qr-row { grid-template-columns: 1fr; }
  .share-fab { right: 14px; bottom: 16px; width: 48px; height: 48px; }
}

/* ===== 首页重构：顶部竖版布局 ===== */
.hero__stack {
  max-width: 1080px; margin: 0 auto; padding: 34px 24px 0;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.hero__brand--center { align-items: center; text-align: center; padding-top: 6px; }
.hero__brand--center .hero__wordmark { font-size: clamp(48px, 8vw, 84px); }
.hero__brand--center .hero__tagline { margin-top: 12px; }
.hero__tutorial-link { display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:7px 12px; border:1.5px solid var(--ink); border-radius:999px; background:var(--lime); color:var(--ink); font-size:12px; font-weight:800; text-decoration:none; box-shadow:2px 2px 0 var(--ink); }
.hero__tutorial-link:hover { transform:translateY(-1px); box-shadow:3px 3px 0 var(--ink); }

/* 大标题两侧的贴纸徽标：填空白 + 直接说清卖点 */
.brand-row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 3.2vw, 52px); width: 100%;
}
.brand-core { flex: 0 1 auto; min-width: 0; }
.brand-deco { display: flex; flex-direction: column; gap: 12px; flex: none; }
.brand-deco--l { align-items: flex-end; }
.brand-deco--r { align-items: flex-start; }
.brand-deco__item {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 8px 15px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--paper); box-shadow: 3px 3px 0 var(--ink);
  font-size: 13px; font-weight: 800; color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.brand-deco--l .brand-deco__item:nth-child(1) { background: var(--lime); transform: rotate(-2.5deg); }
.brand-deco--l .brand-deco__item:nth-child(2) { background: var(--paper); transform: rotate(2deg); }
.brand-deco--r .brand-deco__item:nth-child(1) { background: var(--yellow); transform: rotate(2.5deg); }
.brand-deco--r .brand-deco__item:nth-child(2) { background: var(--lime); transform: rotate(-2deg); }
.brand-deco__item:hover { transform: translate(-2px,-2px) rotate(0deg); box-shadow: 5px 5px 0 var(--ink); }
@media (max-width: 900px) {
  .brand-row { flex-direction: column; gap: 16px; }
  .brand-deco, .brand-deco--l, .brand-deco--r { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
  .brand-deco__item { font-size: 12px; padding: 6px 12px; }
}

.agent-rec { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.platform-list { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 10px; }
.platform-list__title { width: 100%; text-align: left; font-size: 15px; font-weight: 900; color: var(--ink); margin: 2px 0 4px; }
.platform-list__group { width: 100%; margin: 6px 0 -2px; padding: 6px 10px; border-left: 4px solid var(--lime-deep); background: rgba(194,244,92,.18); font-size: 12px; font-weight: 900; letter-spacing: .04em; }
.platform-list__group--foreign { display:none; border-left-color: var(--coral); background: rgba(255,126,102,.12); }
.platform-list[data-expanded="true"] .platform-list__group--foreign { display:block; }
.platform-list .platform-card { flex-direction: row; align-items: center; gap: 12px; width: 100%; }
.platform-list .platform-card__ico { flex: none; }
.platform-list .platform-card b { font-size: 15px; }
.platform-list .platform-card span { font-size: 13px; }
.platform-list .platform-card--more { display: none; }
.platform-list .platform-card--more.is-shown { display: flex; }
.platform-list .agents-more { align-self: flex-start; }
.agent-rec .platform-list[data-expanded="true"]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:1040px}
.agent-rec .platform-list[data-expanded="true"] .platform-list__title,.agent-rec .platform-list[data-expanded="true"] .platform-list__group,.agent-rec .platform-list[data-expanded="true"] .agents-more{grid-column:1/-1}
.agent-rec .platform-list[data-expanded="true"] .platform-card--more{width:100%;min-width:0}
@media(max-width:760px){.agent-rec .platform-list[data-expanded="true"]{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 今日热榜：3 视频轮播（中间全览，左右箭头切换） */
.hot-videos { width: 100%; max-width: 1040px; }
.hot-videos__head { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-bottom: 18px; }
.hot-videos__head h3 { font-size: 22px; font-weight: 900; }
.hot-videos__head span { color: var(--muted); font-size: 13px; font-weight: 600; }
.hot-videos__stage { display: flex; align-items: center; justify-content: center; gap: 10px; }
.hv-arrow {
  flex: none; width: 46px; height: 46px; border-radius: 999px; border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-hard);
  font-size: 24px; font-weight: 900; line-height: 1; cursor: pointer; transition: transform .12s, box-shadow .12s;
  -webkit-tap-highlight-color: transparent;
}
.hv-arrow:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
/* 无限循环 3D 轮播：中间放大，两侧缩小后退；一直往一个方向转不会到头 */
.hv-track {
  position: relative; flex: 1; min-width: 0;
  height: clamp(280px, 30vw, 400px);
  perspective: 1300px; overflow: hidden; touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
body.inline-page-edit #hotVideos .hv-track,
body.inline-page-edit #start .tc-track { height: auto !important; align-items: start; }
body.inline-page-edit #hotVideos .hv-card,
body.inline-page-edit #start .tc-card { align-self: start; min-height: 0; }
.hv-card {
  position: absolute; top: 0; left: 50%; width: 52%; margin-left: -26%;
  transform-style: preserve-3d; transform-origin: 50% 50%; cursor: pointer;
  will-change: transform, opacity;
  transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* 只有中间那张是「可看」的：两侧淡化、播放按钮藏起来 */
.hv-card:not(.is-current) .hv-cap { opacity: .4; }
@media (max-width: 860px) {
  .hv-card { width: 85%; margin-left: -42.5%; }
  .hv-track { height: clamp(160px, 35vw, 220px); }
  .hv-arrow { width: 32px; height: 32px; font-size: 18px; }
  .hv-frame { border-width: 1.5px; }
  .hv-cap { padding: 0 8px; margin-top: 8px; }
  .hv-cap b { font-size: 12px; }
  .hv-cap p { font-size: 10.5px; }
}

/* Final cascade for the Cola-style project catalogue. */
.picks-showcase .flat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px}
.picks-showcase .flat-card{display:block;padding:0;overflow:hidden;border:1px solid #e1e4de;border-radius:10px;background:#fff;box-shadow:0 3px 12px rgba(26,36,27,.04)}
.picks-showcase .project-cover{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1.52/1;overflow:hidden;background:#eef2ec}
.picks-showcase .project-cover img{display:block;width:100%;height:100%;object-fit:cover}
.picks-showcase .flat-card__bd{padding:15px 15px 14px}
.picks-showcase .flat-card__bd h3{margin:0;font-size:17px;line-height:1.3}
.picks-showcase .flat-card__bd>p:not(.project-card__repo){margin:8px 0 0;min-height:39px;font-size:12px;line-height:1.6;-webkit-line-clamp:2}
.project-pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin:30px auto 4px;min-height:38px}
.project-pagination[hidden]{display:none}
.project-pagination__more{padding:10px 24px;border:1px solid #1f7a4d;border-radius:999px;background:#1f7a4d;color:#fff;font:800 13px/1 inherit;cursor:pointer;transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
.project-pagination__more:hover{background:#17633d;transform:translateY(-1px);box-shadow:0 5px 14px rgba(31,122,77,.18)}
.project-pagination__label{margin-right:8px;color:#71756d;font-size:13px;font-weight:700}
.project-pagination__button{min-width:36px;height:36px;padding:0 10px;border:1px solid #e1e4de;border-radius:8px;background:#fff;color:#4f584f;font:700 13px/1 inherit;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease}
.project-pagination__button:hover:not(:disabled){border-color:#1f7a4d;color:#1f7a4d;transform:translateY(-1px)}
.project-pagination__button.is-active{border-color:#1f7a4d;background:#1f7a4d;color:#fff}
.project-pagination__button:disabled{cursor:default;opacity:.38}
@media(max-width:1050px){.picks-showcase .flat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.picks-showcase .flat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}}
@media(max-width:520px){.picks-showcase .flat-grid{grid-template-columns:1fr}.picks-showcase .project-cover{aspect-ratio:1.65/1}}

/* Cola catalogue: image first, concise metadata below, responsive four-column grid. */
.cola-directory .cola-catalog-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 18px; }
.cola-skill-card { display:block; overflow:hidden; color:var(--ink); text-decoration:none; border:1px solid #e1e4de; border-radius:12px; background:#fff; box-shadow:0 3px 12px rgba(26,36,27,.04); transition:transform .18s ease, box-shadow .18s ease; }
.cola-skill-card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(26,36,27,.1); }
.cola-skill-card__visual { aspect-ratio:1.55/1; overflow:hidden; display:grid; place-items:center; background:#eef2ec; color:#657067; font-weight:800; }
.cola-skill-card__visual img { width:100%; height:100%; display:block; object-fit:cover; }
.cola-skill-card__body { padding:15px 15px 14px; }
.cola-skill-card__body h2 { margin:0; font-size:17px; line-height:1.35; font-weight:850; }
.cola-skill-card__name { margin:5px 0 0; color:#687169; font:600 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; }
.cola-skill-card__summary { margin:9px 0 0; min-height:40px; color:#5e675f; font-size:12px; line-height:1.65; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.cola-skill-card__footer { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; color:#667068; font-size:11px; }
.cola-skill-card__footer span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cola-skill-card__tag { margin-left:auto; padding:3px 7px; border-radius:999px; background:#f0f3ed; color:#4d5b50; }
.cola-detail__cover { box-shadow:0 12px 30px rgba(26,36,27,.08); }
.cola-detail .detail__gen { margin-top:10px; }
@media(max-width:1050px){.cola-directory .cola-catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:760px){.cola-directory .cola-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;}}
@media(max-width:520px){.cola-directory .cola-catalog-grid{grid-template-columns:1fr;}.cola-detail__cover{aspect-ratio:1.45/1;border-radius:12px;}.cola-detail__identity{font-size:13px;}}
.hv-frame { position: relative; aspect-ratio: 16/9; border: 2px solid var(--ink); border-radius: var(--radius-sm); overflow: hidden; background: var(--canvas); box-shadow: var(--shadow-hard); }
.hv-card-link { display: block; color: inherit; text-decoration: none; }
.hv-detail-link { display: block; color: inherit; text-decoration: none; }
.hv-cover-link { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
.hv-cover { width: 100%; height: 100%; display: block; object-fit: cover; background: var(--lime); }
.hv-card:not(.is-current) .hv-cover-link { pointer-events: none; }
.hv-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; color: var(--muted); background: var(--canvas); font-size: 13px; font-weight: 900; text-align: center; }
.hv-frame.has-external .hv-empty { display: none; }
.hv-frame:not(.has-external) .hv-cover-link { pointer-events: none; }
.hv-cap { margin-top: 10px; text-align: center; padding: 0 10px; }
.hv-cap b { font-size: 14px; font-weight: 900; }
.hv-cap p { margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 860px) {
  .hv-cap b { font-size: 13px; }
  .hv-cap p { font-size: 11.5px; }
}
.hv-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.hv-dot { width: 10px; height: 10px; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper); cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
.hv-dot.is-on { background: var(--coral); }

/* 新手教程轮播 */
.tutorial-carousel { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 700px; margin: 0 auto; }
.tc-arrow {
  flex: none; width: 38px; height: 38px; border-radius: 999px; border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-hard);
  font-size: 20px; font-weight: 900; line-height: 1; cursor: pointer; transition: transform .12s, box-shadow .12s;
  -webkit-tap-highlight-color: transparent;
}
.tc-arrow:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.tc-track {
  position: relative; flex: 1; min-width: 0;
  height: 240px;
  perspective: 1000px; overflow: hidden; touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.tc-card {
  position: absolute; top: 0; left: 50%; width: 50%; margin-left: -25%;
  display: flex; flex-direction: column;
  transform-style: preserve-3d; transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
  text-decoration: none; color: inherit;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.tc-card:not(.is-current) { opacity: 0.4; }
.tc-card:not(.is-current) .tc-card__bd { opacity: 0; pointer-events: none; }
.tc-card .tc-cover { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--yellow); box-shadow: var(--shadow-hard); }
.tc-card__bd { margin-top: 10px; text-align: center; padding: 0 16px; }
.tc-card__bd h3 { font-size: 14px; font-weight: 900; margin-bottom: 6px; }
.tc-card__bd p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.tc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.tc-dot { width: 10px; height: 10px; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper); cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
.tc-dot.is-on { background: var(--coral); }

@media (max-width: 860px) {
  .tc-card { width: 85%; margin-left: -42.5%; }
  .tc-track { height: clamp(320px, 42vw, 390px); }
  .tc-card__bd {
    padding: 16px 12px;
    border-width: 2px;
    position: relative;
  }
  .tc-card__bd::before {
    content: '▶';
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: var(--coral);
    color: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 50%;
    font-size: 12px;
    padding-left: 2px;
    box-shadow: 2px 2px 0 var(--ink);
  }
  .tc-card__bd h3 {
    font-size: 14px;
    font-weight: 900;
    color: var(--ink);
    margin-bottom: 6px;
    padding-right: 40px;
  }
  .tc-card__bd p {
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
    padding-right: 40px;
  }
  .tc-arrow { width: 32px; height: 32px; font-size: 18px; }
}

@media (max-width: 600px) {
  .tutorial-carousel { gap: 6px; padding: 0 8px; }
  .tc-track { height: clamp(360px, 94vw, 430px); }
  .tc-card { width: 88%; margin-left: -44%; }
  .tc-arrow { width: 30px; height: 30px; font-size: 16px; }
  .tc-card__bd { padding: 14px 10px; position: relative; }
  .tc-card__bd::before {
    width: 28px;
    height: 28px;
    font-size: 11px;
    right: 10px;
  }
  .tc-card__bd h3 { font-size: 13px; padding-right: 36px; }
  .tc-card__bd p { font-size: 11px; padding-right: 36px; }
}

/* 大家都在用 / GitHub 目录 条目 */
.cat-rail { display: flex; flex-wrap: wrap; gap: 8px; }
/* 方框宽度减半：双列栅格（窄屏回落单列） */
.rec-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* 注意用 minmax(0,1fr)：否则 grid 轨道最小值取内容 min-content，窄屏会撑破容器 */
@media (max-width: 860px) { .rec-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
  .rec-row { gap: 10px; padding: 12px; }
  .rec-emoji, .rec-cat { display: none; }
}
.rec-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--shadow-hard); transition: transform .15s, box-shadow .15s; }
.rec-row:hover { transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--ink); }
.rec-row[hidden] { display: none; }
/* TOP10 排名徽标 */
.rec-rank { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 900; }
.rec-rank--top { background: var(--coral); border: 1.5px solid var(--ink); }
.rec-type { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; border: 1.5px solid var(--ink); }
.rec-emoji { flex: none; font-size: 22px; }
.rec-body { min-width: 0; flex: 1; }
.rec-body b { display: block; font-size: 16px; font-weight: 900; }
.rec-body p { margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.rec-cat { flex: none; font-size: 12px; font-weight: 800; color: var(--sky-deep); }
.rec-play { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: var(--coral); color: var(--paper); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-size: 15px; padding-left: 3px; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.rec-play:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }

/* A. 企业落地案例卡：项目介绍 + 源码 */
.case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 18px; }
.case-card {
  display: flex; flex-direction: column; gap: 8px; padding: 14px;
  border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper);
  box-shadow: 2px 2px 0 var(--ink); transition: transform .15s, box-shadow .15s;
}
.case-card:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.case-tag { align-self: flex-start; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 900; border: 1.5px solid var(--ink); background: var(--yellow); }
.case-card .rec-body { flex: 1; }
.case-card .rec-body b { font-size: 14.5px; }
.case-card .rec-body p { margin-top: 4px; font-size: 12.5px; line-height: 1.6; }
.case-card__acts { display: flex; gap: 8px; margin-top: 2px; }
.case-act {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 10px; border: 2px solid var(--ink); border-radius: 999px;
  font-size: 12px; font-weight: 900; color: var(--ink); background: var(--paper);
  transition: background .15s, transform .15s;
}
.case-act:hover { background: var(--lime); transform: translate(-1px,-1px); }
.case-act--code { background: var(--ink); color: var(--paper); }
.case-act--code:hover { background: var(--sky-deep); color: var(--paper); }

/* B. 视频推荐卡：封面 + 标题 + 简介 + 跳抖音 */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 18px; }
.vcard {
  display: flex; flex-direction: column; gap: 9px; padding: 10px;
  border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper);
  box-shadow: 2px 2px 0 var(--ink); transition: transform .15s, box-shadow .15s;
}
.vcard:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--ink); }
.vcard__cover {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border: 2px solid var(--ink); border-radius: 10px;
  background: linear-gradient(135deg, var(--lime), var(--yellow));
}
.vcard__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard__ph {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-size: 12px; font-weight: 800; color: rgba(24,25,20,.62); line-height: 1.7;
}
.vcard__ph em { font-style: normal; display: block; font-size: 10.5px; font-weight: 700; opacity: .8; }
.vcard__tag {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  padding: 2px 9px; border-radius: 999px; border: 1.5px solid var(--ink);
  background: var(--paper); font-size: 11px; font-weight: 900;
}
.vcard__play {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  display: grid; place-items: center; width: 32px; height: 32px; padding-left: 3px;
  border-radius: 999px; border: 2px solid var(--ink); background: var(--coral); color: var(--paper);
  font-size: 14px; box-shadow: 2px 2px 0 var(--ink);
}
.vcard__body b { display: block; font-size: 14px; font-weight: 900; line-height: 1.45; }
.vcard__body p { margin-top: 4px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.vcard__go { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; color: var(--coral); }

/* 联系区四二维码（2×2） */
.contact__qr-row--four { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 640px) {
  .case-grid { grid-template-columns: 1fr; }
  .vgrid { grid-template-columns: 1fr; }
  .contact__qr-row--four { grid-template-columns: 1fr; }
}

/* ===== 可视化布局编辑器：拖动模块位置/大小 ===== */
body.lm-edit .lm, body.lm-placed .lm { position: absolute; z-index: 5; }
body.lm-edit .lm { outline: 2px dashed var(--coral); outline-offset: 2px; }
body.lm-dragging { user-select: none; }
.lm-handle { display: none; }
body.lm-edit .lm-handle {
  display: flex; position: absolute; top: 0; left: 0; right: 0; height: 24px;
  align-items: center; justify-content: center; gap: 6px;
  background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 800;
  border-radius: 6px 6px 0 0; cursor: move; user-select: none; z-index: 50;
  letter-spacing: .04em;
}
.lm-resize { display: none; }
body.lm-edit .lm-resize {
  display: block; position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px;
  background: var(--coral); border: 2px solid var(--ink); border-radius: 6px 0 6px 0;
  cursor: nwse-resize; z-index: 50;
}
.lm-bar { position: fixed; left: 16px; bottom: 16px; z-index: 70; display: flex; gap: 8px; flex-wrap: wrap; max-width: calc(100vw - 32px); }
.lm-bar button {
  padding: 10px 16px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--paper); color: var(--ink); font-weight: 800; font-size: 13px;
  box-shadow: var(--shadow-hard); cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.lm-bar button:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.lm-bar button.lm-primary { background: var(--lime); }
.lm-bar button.lm-danger { background: var(--coral); color: var(--paper); }

/* 窄屏：关闭拖拽，回归正常竖向排版 */
@media (max-width: 900px) {
  .lm-bar { display: none; }
  body.lm-edit .lm, body.lm-placed .lm { position: static !important; width: auto !important; height: auto !important; z-index: auto !important; }
}

/* 拖拽对齐参考线 */
.lm-guide { position: absolute; background: var(--coral); z-index: 60; display: none; pointer-events: none; }
.lm-guide--v { top: 0; bottom: 0; width: 2px; }
.lm-guide--h { left: 0; right: 0; height: 2px; }
.lm-guide.show { display: block; }

/* ===== 右上角一键分享（导航内按钮） ===== */
.share-nav {
  display: grid; width: 34px; height: 34px; place-items: center; flex: none;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--lime); color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink); cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.share-nav:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
.share-nav svg { width: 17px; height: 17px; }

/* 微信分享：二维码 + 文案 */
.share-modal__wx { display: flex; gap: 14px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1.5px solid rgba(24,25,20,.12); }
.share-modal__wx img { width: 116px; height: 116px; flex: none; border: 2px solid var(--ink); border-radius: 8px; background: #fff; }
.share-modal__wx p { font-size: 12.5px; color: var(--muted); line-height: 1.65; }
.share-modal__wx b { display: block; margin-bottom: 4px; font-size: 13px; color: var(--ink); }

/* ===== 最近更新（今日热榜下方） ===== */
.recent-updates { width: 100%; max-width: 1040px; }
.recent-updates__head { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-bottom: 18px; }
.recent-updates__head h3 { font-size: 22px; font-weight: 900; }
.recent-updates__head span { color: var(--muted); font-size: 13px; font-weight: 600; }
.recent-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .recent-list { grid-template-columns: minmax(0, 1fr); } }
.recent-item {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper);
  box-shadow: var(--shadow-hard); transition: transform .15s, box-shadow .15s;
}
.recent-item:hover { transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--ink); }
.recent-item__time { flex: none; min-width: 74px; font-size: 12px; font-weight: 800; color: var(--sky-deep); }
.recent-item__new { flex: none; padding: 2px 8px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--coral); color: var(--paper); font-size: 11px; font-weight: 900; }
.recent-item .rec-body b { font-size: 15px; }
.recent-item .rec-body p { font-size: 12.5px; }
.recent-item[hidden] { display: none; }
/* 分页器 */
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.pg-btn, .pg-num {
  padding: 7px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper);
  font-size: 13px; font-weight: 900; color: var(--ink); box-shadow: 2px 2px 0 var(--ink);
  transition: transform .12s, box-shadow .12s, background .15s;
}
.pg-num { min-width: 36px; padding: 7px 0; text-align: center; }
.pg-btn:hover:not(:disabled), .pg-num:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
.pg-btn:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
.pg-num.is-on { background: var(--coral); color: var(--paper); }
.pg-nums { display: flex; gap: 6px; }
.pg-info { flex: none; margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
/* 榜单说明行 */
.rec-note { margin-top: 18px; font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* ===== super-i 风格：大家都在用 ===== */
.picks-superi { padding-top: 52px; }
.picks-superi__head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.picks-superi__head h2 { font-size: clamp(32px, 5vw, 52px); font-weight:900; letter-spacing:-0.02em; margin:0; }
.picks-superi__more { font-size:14px; font-weight:800; color:var(--muted); }
.picks-superi__more:hover { color:var(--ink); }

.superi-pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.picks-superi .superi-pills .tabp {
  padding:7px 16px; border:1.5px solid #e2e2df; border-radius:999px; background:#fff;
  color:#666; font-size:13px; font-weight:700; box-shadow:none;
}
.picks-superi .superi-pills .tabp:hover { border-color:#1b1d18; color:#1b1d18; }
.picks-superi .superi-pills .tabp.is-active { background:#1f7a4d; border-color:#1f7a4d; color:#fff; }
.picks-superi .superi-pills .tabp--new { border-color:rgba(31,122,77,.55); color:#1f7a4d; }
.picks-superi .superi-pills .tabp--new.is-active { background:#1f7a4d; color:#fff; }

.superi-note { margin-top:18px; font-size:13px; color:var(--muted); }

.superi-grid {
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-top:18px;
}
@media (max-width:1100px){ .superi-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:820px){ .superi-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .superi-grid { grid-template-columns:1fr; } }

.superi-card {
  display:flex; flex-direction:column; gap:0;
  border:1px solid #e9eae6; border-radius:16px; background:#fff; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05);
  transition:transform .15s, box-shadow .15s;
}
.superi-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.09); }

.superi-thumb { position:relative; aspect-ratio:16/10; display:grid; place-items:center; overflow:hidden; }
.superi-thumb__emoji { font-size:46px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.12)); }
.superi-badge { position:absolute; left:10px; top:10px; padding:4px 8px; border-radius:6px; background:#ff6b35; color:#fff; font-size:11px; font-weight:900; }
.superi-badge--new { background:#1f7a4d; }

.superi-card__body { padding:14px; display:flex; flex-direction:column; gap:8px; }
.superi-card__body h3 { font-size:15px; font-weight:800; line-height:1.35; margin:0; color:#1b1d18; }
.superi-tags { display:flex; flex-wrap:wrap; gap:6px; }
.superi-tag { padding:3px 9px; border-radius:999px; font-size:11px; font-weight:800; border:1px solid #e9eae6; color:#666; background:#fff; }
.superi-tag--skill { background:#eaf9e6; color:#1f7a4d; border-color:#bfe7c9; }
.superi-tag--proj { background:#fff7e6; color:#b45f06; border-color:#ffe0a3; }
.superi-tag--mcp { background:#e6f4ff; color:#0066cc; border-color:#b3d9ff; }
.superi-card__body p { font-size:12.5px; color:#666; line-height:1.55; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.superi-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:4px; }
.superi-foot .m-tags { margin-top:0; }
.superi-foot .m-tag { font-size:11px; padding:2px 8px; border-color:#e9eae6; background:#f6f7f5; color:#666; }
.superi-foot .m-tag--heat { background:#fff0ec; color:#c4442f; border-color:#ffd5cc; }
.superi-foot .m-tag--new { background:#eaf9e6; color:#1f7a4d; border-color:#bfe7c9; }
.superi-go { width:26px; height:26px; display:grid; place-items:center; border-radius:999px; background:#f6f7f5; color:#999; font-size:18px; font-weight:800; }
.superi-card:hover .superi-go { background:#1b1d18; color:#fff; }

/* ==========================================================
   super-i / 刺猬星球 排版层
   只换「外壳」：区块头、卡片、药丸、阴影、圆角。
   模块数量、顺序、文案、交互一律不动。
   ========================================================== */
:root{
  --si-green:#1f7a4d;
  --si-line:#e9eae6;
  --si-ink:#1b1d18;
  --si-muted:#71756d;
  --si-card-shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05);
  --si-card-shadow-hover:0 12px 28px rgba(0,0,0,.09);
}

/* --- A. 区块头：kicker 绿标 + 大标题 + 右侧说明，细分隔线 --- */
.section-kicker{
  color:var(--si-green)!important; font-size:12px!important; font-weight:900!important;
  letter-spacing:.06em!important; text-transform:none!important;
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:#eaf9e6; border:1px solid #bfe7c9;
}
.section.lm .section-head{
  align-items:flex-end; padding-bottom:18px;
  border-bottom:1px solid #efefec;
}
.section.lm .section-head h2{ font-size:clamp(26px,3.2vw,38px); letter-spacing:-.02em; }
.section.lm .section-head p{ color:var(--si-muted); font-size:13.5px; }

/* --- B. 通用卡片外壳（被各模块复用） --- */
.si-card,
.section .col,
.section .hook-item,
.section .platform-list .platform-card,
.section .case-card{
  border:1px solid var(--si-line)!important;
  border-radius:16px!important;
  background:#fff;
  box-shadow:var(--si-card-shadow)!important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.section .col:hover,
.section .hook-item:hover,
.section .platform-list .platform-card:hover,
.section .case-card:hover{
  transform:translateY(-3px)!important;
  box-shadow:var(--si-card-shadow-hover)!important;
  border-color:#dcded8!important;
}

/* --- C. 药丸筛选条（企业案例 / 任何 .cat-rail） --- */
.cat-rail.tabp--si{ gap:10px; }
.cat-rail.tabp--si .tabp{
  padding:7px 16px; border:1.5px solid var(--si-line); border-radius:999px;
  background:#fff; color:#666; font-size:13px; font-weight:700;
}
.cat-rail.tabp--si .tabp:hover{ border-color:var(--si-ink); color:var(--si-ink); }
.cat-rail.tabp--si .tabp.is-active{ background:var(--si-green); border-color:var(--si-green); color:#fff; }

/* --- D. 统计条：三张白卡 --- */
.stats-bar{
  gap:16px; margin-top:36px; padding:0 24px; border-bottom:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
}
.stats-bar .stat{
  padding:20px 22px; border:1px solid var(--si-line); border-radius:16px; background:#fff;
  box-shadow:var(--si-card-shadow);
}
.stats-bar .stat b{ font-size:30px; color:var(--si-ink); }
.stats-bar .stat b em{ color:var(--si-green); }
.stats-bar .stat span{ font-size:13px; color:var(--si-muted); }

/* --- E. 智能体推荐：竖版列表 → 4 列卡片网格 --- */
.agent-rec .platform-list{
  max-width:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
}
.agent-rec .platform-list__title{
  grid-column:1/-1; font-size:clamp(22px,2.6vw,30px); font-weight:900; letter-spacing:-.02em;
  margin:0 0 2px; color:var(--si-ink);
}
.agent-rec .platform-list .platform-card{
  flex-direction:column; align-items:flex-start; gap:10px; width:auto;
  padding:14px; text-align:left;
}
.agent-rec .platform-list .platform-card__ico{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg,#eaf9e6,#d6f0e2); color:var(--si-green); border:1px solid #bfe7c9;
}
.agent-rec .platform-list .platform-card__ico svg{ width:20px; height:20px; }
.agent-rec .platform-list .platform-card b{ font-size:14.5px; }
.agent-rec .platform-list .platform-card span{ font-size:12.5px; color:var(--si-muted); line-height:1.55; }
.agent-rec .agents-more{
  grid-column:1/-1; justify-self:start; margin-top:6px;
  padding:8px 18px; border:1.5px solid var(--si-line); border-radius:999px;
  background:#fff; color:#666; font-size:13px; font-weight:800; cursor:pointer;
}
.agent-rec .agents-more:hover{ border-color:var(--si-ink); color:var(--si-ink); }

/* --- F. 今日热榜：卡片化，去掉硬黑边硬阴影 --- */
.hot-videos{ max-width:none; }
.hot-videos__head{ justify-content:flex-start; gap:10px; margin-bottom:16px; }
.hot-videos__head h3{ font-size:clamp(22px,2.6vw,30px); font-weight:900; letter-spacing:-.02em; }
.hot-videos__head span{ font-size:13px; }
.hot-videos__stage{ gap:14px; }
.hv-arrow{
  width:40px; height:40px; flex:none; border:1px solid var(--si-line); border-radius:999px;
  background:#fff; color:var(--si-muted); font-size:22px; font-weight:800; line-height:1;
  box-shadow:var(--si-card-shadow); transition:.15s;
}
.hv-arrow:hover{ transform:none; box-shadow:var(--si-card-shadow-hover); border-color:var(--si-ink); color:var(--si-ink); }
.hv-track{ gap:14px; }
.hv-card{
  padding:0; border:1px solid var(--si-line); border-radius:16px; background:#fff; overflow:hidden;
  box-shadow:var(--si-card-shadow); transition:transform .16s, box-shadow .16s;
}
.hv-card:hover{ transform:translateY(-3px); box-shadow:var(--si-card-shadow-hover); }
.hv-card .hv-frame{ border:0; border-radius:0; box-shadow:none; }
.hv-card .hv-cap{ padding:14px; text-align:left; }
.hv-card .hv-cap b{ font-size:14.5px; }
.hv-card .hv-cap p{ font-size:12.5px; color:var(--si-muted); }
.hv-dot{ width:8px; height:8px; border:0; background:#dcded8; }
.hv-dot.is-on{ background:var(--si-green); width:20px; border-radius:999px; }

/* --- G. 企业案例：卡片 + 封面条 + 角标 --- */
.case-toolbar{ align-items:center; }
.case-pane__lead{ font-size:13.5px; color:var(--si-muted); }
.case-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.section .case-card{
  flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; text-align:left;
}
.section .case-card .case-thumb{
  position:relative; aspect-ratio:16/7; display:grid; place-items:center;
}
.section .case-card .case-thumb__ico{ font-size:34px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.12)); }
.section .case-card .case-tag{
  position:absolute; left:10px; top:10px; padding:4px 8px; border-radius:6px;
  background:rgba(255,255,255,.94); color:var(--si-ink); font-size:11px; font-weight:900;
}
.section .case-card .rec-body{ padding:14px 14px 4px; }
.section .case-card .rec-body b{ font-size:15px; }
.section .case-card .rec-body p{
  margin-top:6px; font-size:12.5px; color:var(--si-muted); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.section .case-card__acts{ padding:8px 14px 14px; }
.case-act{
  border:1.5px solid var(--si-line); border-radius:999px; background:#fff;
  color:#666; font-size:12.5px; font-weight:800; padding:7px 14px;
}
.case-act:hover{ border-color:var(--si-ink); color:var(--si-ink); }
.case-count{ font-size:12.5px; color:var(--si-muted); }

/* --- H. 新手入门（.cols）与拉新三件套（.hook）：卡片 + 封面块 --- */
.cols{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:20px; }
.section .col{ padding:0; overflow:hidden; text-align:left; display:flex; flex-direction:column; }
.section .col .col__body{ padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.section .col h3{ font-size:16px; font-weight:800; line-height:1.35; }
.section .col p{ margin:0; font-size:13px; color:var(--si-muted); line-height:1.6; }
.section .col .col__more{ margin-top:auto; padding-top:6px; font-size:13px; font-weight:800; color:var(--si-green); }
.hook{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:20px; }
.section .hook-item{ position:relative; padding:0; overflow:hidden; text-align:left; display:flex; flex-direction:column; }
.section .hook-item .hook-body{ padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.section .hook-item h3{ margin:0; font-size:16px; }
.section .hook-item p{ margin:0; font-size:13px; color:var(--si-muted); line-height:1.6; }
.section .hook-item .featured__cta{
  margin-top:auto; align-self:flex-start; border-radius:999px; background:var(--si-green);
  border:1.5px solid var(--si-green); color:#fff; font-size:13px; font-weight:800; padding:8px 18px;
  box-shadow:none; transition:.15s;
}
.section .hook-item .featured__cta:hover{ background:#186440; border-color:#186440; transform:none; box-shadow:none; }
.hook-num{
  position:absolute; left:10px; top:10px; z-index:2;
  width:26px; height:26px; border-radius:999px; background:rgba(255,255,255,.94);
  color:var(--si-ink); font-size:12px; font-weight:900; display:grid; place-items:center;
}

/* 封面块（新手入门 / 拉新三件套 / 通用） */
.si-thumb{
  position:relative; aspect-ratio:16/7; display:grid; place-items:center; overflow:hidden;
}
.si-thumb__ico{ font-size:34px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.12)); }

/* --- I. 联系我们：二维码白卡 + 表单白卡 --- */
.contact__qr-row--four{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.contact__qr{
  border:1px solid var(--si-line); border-radius:16px; background:#fff;
  box-shadow:var(--si-card-shadow); padding:16px 12px; transition:.16s;
}
.contact__qr:hover{ transform:translateY(-3px); box-shadow:var(--si-card-shadow-hover); }
.contact__qr img{ width:120px; height:120px; border:1px solid var(--si-line); border-radius:12px; box-shadow:none; }
.contact__qr b{ font-size:14px; }
.contact__qr p{ font-size:12px; color:var(--si-muted); }
.contact__form{
  gap:12px; padding:18px; border:1px solid var(--si-line); border-radius:16px;
  background:#fff; box-shadow:var(--si-card-shadow);
}
.contact__form input, .contact__form textarea{
  border:1.5px solid var(--si-line); border-radius:10px; background:#fbfbfa;
  font-size:13.5px; padding:11px 13px;
}
.contact__form input:focus, .contact__form textarea:focus{ border-color:var(--si-green); background:#fff; box-shadow:0 0 0 3px rgba(31,122,77,.10); }
.contact__submit{
  border-radius:999px; background:var(--si-green); border:1.5px solid var(--si-green);
  color:#fff; font-size:14px; font-weight:800; padding:11px 18px; box-shadow:none;
}
.contact__submit:hover{ transform:none; box-shadow:0 8px 20px rgba(31,122,77,.22); background:#186440; }

/* --- J. 响应式 --- */
@media(max-width:1100px){
  .agent-rec .platform-list{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .case-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contact__qr-row--four{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:860px){
  .agent-rec .platform-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats-bar{ grid-template-columns:1fr; }
  .cols,.hook{ grid-template-columns:1fr; }
}
@media(max-width:560px){
  .case-grid{ grid-template-columns:1fr; }
  .agent-rec .platform-list{ grid-template-columns:1fr; }
  .contact__qr-row--four{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contact__qr img{ width:100%; height:auto; aspect-ratio:1/1; }
}

/* ==========================================================
   下半页紧凑排版（从新手教程往后）+ 四宫格二维码 + 问题反馈
   ========================================================== */
.section.lm.is-compact{ padding-top:34px; }
.section.lm.is-compact .section-head{ padding-bottom:12px; }
.section.lm.is-compact .section-head h2{ font-size:clamp(20px,2.2vw,26px); }
.section.lm.is-compact .section-head p{ font-size:12.5px; line-height:1.6; }

/* 新手教程 / 注册就送：卡片更小更紧 */
.is-compact .cols,.is-compact .hook{ gap:12px; margin-top:14px; }
.is-compact .si-thumb{ aspect-ratio:16/6; }
.is-compact .si-thumb__ico{ font-size:26px; }
.is-compact .section .col .col__body,
.is-compact .section .hook-item .hook-body{ padding:12px; gap:6px; }
.is-compact .section .col h3,
.is-compact .section .hook-item h3{ font-size:15px; }
.is-compact .section .col p,
.is-compact .section .hook-item p{ font-size:12.5px; line-height:1.55; }
.is-compact .section .col .col__more{ font-size:12.5px; }
.is-compact .section .hook-item .featured__cta{ font-size:12.5px; padding:6px 14px; }
.is-compact .hook-num{ width:22px; height:22px; font-size:11px; left:8px; top:8px; }
.is-compact .superi-badge{ padding:3px 6px; font-size:10px; left:8px; top:8px; }

/* 联系我们：再收紧 */
.is-compact .contact{ margin-top:16px !important; gap:14px; }
.is-compact .contact__qr{ padding:12px 10px; }
.is-compact .contact__qr img{ width:104px; height:104px; }
.is-compact .contact__qr b{ font-size:13px; margin-top:8px; }
.is-compact .contact__qr p{ font-size:11.5px; line-height:1.5; }
.is-compact .contact__form{ padding:14px; gap:10px; }
.is-compact .contact__form input,
.is-compact .contact__form textarea{ font-size:13px; padding:9px 11px; }
.is-compact .contact__form textarea{ min-height:88px; }
.is-compact .contact__submit{ font-size:13px; padding:9px 16px; }

/* 四个二维码：2×2 四宫格 */
.contact__qr-row--grid4{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;
  max-width:420px; margin:0 auto;
}
.contact__qr-row--grid4 .contact__qr{ display:flex; flex-direction:column; align-items:center; }
.contact__qr-row--grid4 .contact__qr img{ width:100%; max-width:150px; height:auto; aspect-ratio:1/1; }

/* 问题反馈条 */
.fb-box{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:14px; padding:18px 20px; border:1px solid var(--si-line); border-radius:16px;
  background:linear-gradient(135deg,#f3fbf6 0%,#eef8fb 100%); box-shadow:var(--si-card-shadow);
}
.fb-box__txt h2{ font-size:clamp(20px,2.2vw,26px); font-weight:900; letter-spacing:-.02em; }
.fb-box__txt p{ margin-top:6px; font-size:12.5px; color:var(--si-muted); line-height:1.6; }
.fb-box__acts{ display:flex; gap:10px; flex-wrap:wrap; }
.fb-btn{
  display:inline-flex; align-items:center; padding:9px 18px; border-radius:999px;
  border:1.5px solid var(--si-line); background:#fff; color:#666;
  font-size:13px; font-weight:800; transition:.15s;
}
.fb-btn:hover{ border-color:var(--si-ink); color:var(--si-ink); }
.fb-btn--primary{ background:var(--si-green); border-color:var(--si-green); color:#fff; }
.fb-btn--primary:hover{ background:#186440; border-color:#186440; color:#fff; }

@media(max-width:640px){
  .fb-box{ flex-direction:column; align-items:flex-start; }
  .contact__qr-row--grid4{ gap:12px; }
}

/* ==========================================================
   后半页统一重构：更小 · 无图 · 扁平
   作用范围：#picks 起到页脚前（大家都在用 / 案例 / 教程 /
   注册就送 / 联系我们）。全部走 .si-flat-sec + .flat-card。
   ========================================================== */

/* --- 区块：内边距、标题都收小 --- */
.section.lm.si-flat-sec{ max-width:960px; padding:26px 20px 0; }
.section.lm.si-flat-sec .section-head,
.section.lm.si-flat-sec .section-head p{ display:none; }

.sec-head-s{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-bottom:7px; margin-bottom:10px; border-bottom:1px solid #eceee9;
}
.sec-head-s h2{ margin:0; font-size:17px; font-weight:900; letter-spacing:-.01em; color:#1b1d18; }
.sec-head-title{display:flex;align-items:baseline;justify-content:flex-start;gap:10px;min-width:0;width:auto;flex:0 1 auto}.sec-head-title .section-subtitle{font-size:12px;font-weight:800;color:var(--muted);padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--paper);white-space:nowrap;position:static}
.sec-more{ font-size:12px; font-weight:800; color:#1f7a4d; white-space:nowrap; text-decoration:none; }
.sec-more:hover{ text-decoration:underline; }

/* --- 分类药丸：更小更薄 --- */
.cat-rail.mini-pills{ gap:6px; margin:0 0 10px; flex-wrap:wrap; }
.cat-rail.mini-pills .tabp{
  padding:3px 10px; font-size:12px; font-weight:700; border-radius:999px;
  border:1px solid #e5e7e1; background:#fff; color:#71756d;
}
.cat-rail.mini-pills .tabp:hover{ border-color:#1b1d18; color:#1b1d18; }
.cat-rail.mini-pills .tabp.is-active{ background:#1f7a4d; border-color:#1f7a4d; color:#fff; }

/* --- 扁平小卡网格 --- */
.flat-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.flat-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }

.flat-card{
  display:flex; align-items:flex-start; gap:8px;
  padding:9px 11px; border:1px solid #e9eae6; border-radius:8px;
  background:#fff; color:inherit; text-decoration:none;
  transition:border-color .15s, background .15s;
}
a.flat-card:hover{ border-color:#1f7a4d; background:#fafdfb; }
.flat-card__no{
  flex:none; font-size:11px; font-weight:900; color:#c2c6bf; line-height:1.7;
  font-variant-numeric:tabular-nums;
}
.flat-card__bd{ min-width:0; flex:1; }
.section-subtitle{ color:var(--muted); font-size:13px; font-weight:800; padding:4px 9px; border:1px solid var(--line); border-radius:999px; background:var(--canvas); }
.flat-card .material-cover{ width:100%; max-width:240px; aspect-ratio:16/9; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:var(--canvas); flex:none; }
.flat-card__bd h3{
  margin:0; font-size:13px; font-weight:800; line-height:1.4; color:#1b1d18;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.flat-card__bd p{
  margin:2px 0 0; font-size:11.5px; line-height:1.5; color:#868b84;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.flat-card__ft{ display:flex; align-items:center; gap:5px; margin-top:5px; flex-wrap:wrap; }
.flat-tag{
  padding:1px 6px; border-radius:999px; font-size:10.5px; font-weight:800;
  border:1px solid #eceee9; color:#868b84; background:#fff; white-space:nowrap;
}
.flat-tag--skill{ background:#eaf9e6; color:#1f7a4d; border-color:#bfe7c9; }
.flat-tag--proj{ background:#fff7e6; color:#b45f06; border-color:#ffe0a3; }
.flat-tag--mcp{ background:#e6f4ff; color:#0066cc; border-color:#b3d9ff; }
.flat-card .m-tags{ margin:0; display:flex; gap:5px; }
.flat-card .m-tag{ font-size:10.5px; padding:1px 6px; border-color:#eceee9; background:#f6f7f5; color:#868b84; }
.flat-card .m-tag--heat{ background:#fff0ec; color:#c4442f; border-color:#ffd5cc; }
.flat-card .m-tag--new{ background:#eaf9e6; color:#1f7a4d; border-color:#bfe7c9; }
.flat-card__link{ font-size:11.5px; font-weight:800; color:#1f7a4d; text-decoration:none; }
.flat-card__link:hover{ text-decoration:underline; }
.flat-go{ margin-left:auto; font-size:13px; color:#c2c6bf; line-height:1; }
a.flat-card:hover .flat-go{ color:#1f7a4d; }

/* --- 联系我们：只有二维码，扁平 --- */
.contact.is-flat{
  display:grid; grid-template-columns:300px 1fr; gap:16px; align-items:start;
  margin-top:0 !important;
}
.qr-row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.qr-row img{
  width:100%; height:auto; aspect-ratio:1/1; display:block;
  border:1px solid #e9eae6; border-radius:6px; background:#fff;
}
.contact.is-flat .contact__form{
  display:flex; flex-direction:column; gap:8px; padding:11px 12px;
  border:1px solid #e9eae6; border-radius:8px; background:#fff; box-shadow:none;
}
.contact.is-flat .contact__form input,
.contact.is-flat .contact__form textarea{
  font-size:12.5px; padding:7px 10px; border-radius:6px;
  border:1px solid #e5e7e1; background:#fbfbfa;
}
.contact.is-flat .contact__form textarea{ min-height:64px; resize:vertical; }
.contact.is-flat .contact__submit{
  align-self:flex-start; font-size:12.5px; font-weight:800; padding:6px 16px;
  border-radius:999px; background:#1f7a4d; border:1px solid #1f7a4d; color:#fff; box-shadow:none;
}

/* --- 页脚也收紧一档 --- */
footer{ padding:26px 20px 22px; }
footer .foot-inner{ max-width:960px; }
footer .foot-brand b{ font-size:13px; }
footer a, footer p, footer span{ font-size:11.5px; }

/* --- 响应式 --- */
@media(max-width:860px){
  .flat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .flat-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contact.is-flat{ grid-template-columns:1fr; }
  .qr-row{ max-width:300px; }
}
@media(max-width:520px){
  .flat-grid,.flat-grid--2{ grid-template-columns:1fr; }
  .section.lm.si-flat-sec{ padding:20px 14px 0; }
}

/* Cola Skill inspired project catalogue: large editorial cards with useful metadata. */
.picks-showcase{ max-width:1320px !important; }
.picks-showcase__head{ align-items:flex-end; }
.picks-showcase__head .eyebrow{ margin:0 0 8px; color:#8a8f87; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.picks-showcase__head h2{ font-size:clamp(28px,3.2vw,42px); letter-spacing:-.04em; }
.picks-tabs-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 20px; }
.picks-tabs{ display:flex; align-items:center; gap:28px; }
.picks-tabs .tabp{ padding:0 0 11px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:#8a8f87; font-size:16px; font-weight:900; cursor:pointer; }
.picks-tabs .tabp:hover{ color:var(--ink); background:transparent; }
.picks-tabs .tabp.is-active{ border-bottom-color:var(--ink); color:var(--ink); background:transparent; }
.picks-search{ display:flex; align-items:center; gap:8px; width:min(260px,42vw); padding:9px 12px; border:1px solid #dedfd9; border-radius:8px; background:#fff; color:#8a8f87; }
.picks-search input{ width:100%; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:13px; }
.picks-search input::placeholder{ color:#a4a8a1; }
.picks-showcase .cat-rail{ padding-bottom:2px; border-bottom:1px solid #eceee9; }
.picks-showcase .cat-rail .tabp{ border:0; background:transparent; border-radius:999px; color:#72776f; font-size:12px; }
.picks-showcase .cat-rail .tabp:hover{ background:#f1f4ef; color:var(--ink); }
.picks-showcase .cat-rail .tabp.is-active{ background:#1f7a4d; color:#fff; }
.picks-showcase .flat-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 18px; }
.picks-showcase .flat-card{ display:block; padding:0; min-width:0; overflow:hidden; border:1px solid #e1e4de; border-radius:10px; background:#fff; box-shadow:0 3px 12px rgba(26,36,27,.04); }
.picks-showcase a.flat-card:hover{ transform:translateY(-3px); border-color:#b9c9bb; background:#fff; box-shadow:0 12px 25px rgba(26,36,27,.10); }
.picks-showcase .project-cover{ position:relative; display:grid; place-items:center; width:100%; aspect-ratio:1.52/1; overflow:hidden; background:#eef2ec; }
.picks-showcase .project-cover img{ display:block; width:100%; height:100%; object-fit:cover; }
.project-cover__badge{ position:absolute; left:12px; bottom:10px; padding:4px 7px; border-radius:5px; background:rgba(255,255,255,.9); color:#4e574f; font-size:10px; font-weight:800; }
.project-cover--placeholder{ align-content:center; gap:5px; color:#496a51; background:linear-gradient(135deg,#e9f2e8,#f5f6ef); }
.project-cover--placeholder span{ font-size:34px; line-height:1; }
.project-cover--placeholder small{ font-size:11px; font-weight:900; letter-spacing:.08em; }
.project-cover--video{ background:linear-gradient(135deg,#e5f1f2,#f7f2e8); }
.project-cover--copy{ background:linear-gradient(135deg,#f1eaf4,#f8f3e9); }
.project-cover--office{ background:linear-gradient(135deg,#e8edf6,#f5f1e7); }
.picks-showcase .flat-card__bd{ padding:15px 15px 14px; }
.project-card__eyebrow{ display:flex; gap:6px; margin-bottom:9px; }
.project-card__eyebrow .flat-tag{ padding:3px 7px; border:0; font-size:10px; }
.picks-showcase .flat-card__bd h3{ margin:0; font-size:17px; line-height:1.3; font-weight:900; letter-spacing:-.02em; }
.project-card__repo{ margin:5px 0 0 !important; color:#8e958d !important; font-size:11px !important; line-height:1.3 !important; }
.picks-showcase .flat-card__bd > p:not(.project-card__repo){ margin:8px 0 0; min-height:39px; color:#626b62; font-size:12px; line-height:1.6; -webkit-line-clamp:2; }
.project-card__meta{ display:flex; align-items:center; gap:9px; min-width:0; margin-top:14px; padding-top:11px; border-top:1px solid #eef0eb; color:#8a918a; font-size:11px; }
.project-card__author{ display:flex; align-items:center; gap:5px; min-width:0; margin-right:auto; color:#566158; font-weight:800; }
.project-avatar{ display:grid; place-items:center; width:21px; height:21px; border-radius:50%; background:#dce9dc; color:#32623a; font-size:10px; font-weight:900; }
.project-card__license{ display:none; }
.picks-showcase .flat-go{ margin-left:0; color:#98a099; font-size:16px; }
@media(max-width:1050px){ .picks-showcase .flat-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px){
  .picks-tabs-row{ align-items:stretch; flex-direction:column; gap:14px; }
  .picks-search{ width:100%; }
  .picks-showcase .flat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }
}
@media(max-width:520px){
  .picks-showcase .flat-grid{ grid-template-columns:1fr; }
  .picks-showcase .project-cover{ aspect-ratio:1.65/1; }
}

/* 首页项目详情：在大家都在用区域内打开，保留项目列表上下文。 */
.home-project-modal[hidden]{display:none}
.home-project-video video[hidden]{display:none}
.home-project-modal{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:3.2vh 3vw;background:rgba(15,19,16,.72);backdrop-filter:blur(5px)}
.home-project-dialog{position:relative;display:flex;flex-direction:column;width:min(1320px,96vw);height:min(820px,93vh);min-height:0;overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 28px 90px rgba(0,0,0,.36);animation:home-project-enter .24s cubic-bezier(.2,.8,.2,1) both}
@keyframes home-project-enter{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
.home-project-dialog__head{position:relative;z-index:1;flex:0 0 54px;display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 20px;border-bottom:1px solid #e2e6e1;background:#fff}
.home-project-dialog__name{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:820}.home-project-dialog__play{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:#eef4ea;color:#3d6130}.home-project-close{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:#f0f1ee;color:#4e554f;font-size:23px;line-height:1;cursor:pointer}.home-project-close:hover{background:#e4e8e1}
.home-project-dialog__body{display:grid;flex:1;min-height:0;grid-template-columns:minmax(0,1.65fr) minmax(330px,.85fr)}
.home-project-media{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;min-width:0;min-height:0;padding:20px;background:#111411}.home-project-tabs{display:flex;gap:6px}.home-project-tabs button{min-width:88px;min-height:34px;padding:0 13px;border:1px solid #435047;border-radius:6px;background:transparent;color:#cbd2cc;font:inherit;font-size:12px;font-weight:760;cursor:pointer}.home-project-tabs button[aria-selected="true"]{border-color:#9bdc55;background:#9bdc55;color:#1e2b1b}.home-project-gallery,.home-project-video-panel{min-width:0;min-height:0}.home-project-gallery{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px}.home-project-gallery[hidden],.home-project-video-panel[hidden]{display:none}.home-project-gallery__stage{position:relative;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;border-radius:7px;background:#f3f4f0}.home-project-gallery__stage img{display:block;width:100%;height:100%;object-fit:contain}.home-project-gallery__stage img[hidden]{display:none}.home-project-gallery__empty{color:#70786f;font-size:13px}.home-project-gallery__arrow{position:absolute;top:50%;z-index:1;display:grid;place-items:center;width:36px;height:36px;transform:translateY(-50%);border:1px solid rgba(27,37,29,.14);border-radius:50%;background:rgba(255,255,255,.92);color:#263429;font-size:24px;line-height:1;cursor:pointer}.home-project-gallery__arrow:first-child{left:10px}.home-project-gallery__arrow:last-child{right:10px}.home-project-gallery__arrow[hidden]{display:none}.home-project-thumbnails{display:flex;gap:8px;min-height:58px;overflow-x:auto;padding:2px 1px 4px}.home-project-thumbnails:empty{display:none}.home-project-thumbnails button{flex:0 0 78px;height:54px;overflow:hidden;padding:0;border:2px solid transparent;border-radius:5px;background:#202820;cursor:pointer}.home-project-thumbnails button[aria-current="true"]{border-color:#9bdc55}.home-project-thumbnails img{display:block;width:100%;height:100%;object-fit:cover}.home-project-video{position:relative;width:100%;height:100%;min-height:160px;overflow:hidden;border-radius:7px;background:#080a08}.home-project-video video{display:block;width:100%;height:100%;object-fit:contain;background:#090b09}.home-project-video__empty{position:absolute;inset:0;display:grid;place-items:center;background:#171e19;color:#e5e9e4;font-size:14px}.home-project-video__empty[hidden]{display:none}.home-project-media__note{display:flex;justify-content:space-between;gap:10px;color:#b9c0ba;font-size:11px}
.home-project-info{min-width:0;overflow-y:auto;padding:24px 25px 28px;background:#fff}.home-project-kicker{display:flex;align-items:center;gap:8px;color:#748078;font-size:12px;font-weight:750}.home-project-dot{width:7px;height:7px;border-radius:50%;background:#79bf54}.home-project-info h2{margin:13px 0 0;font-size:25px;line-height:1.25}.home-project-slug{margin:7px 0 0;color:#879089;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.home-project-summary{margin:17px 0 0;color:#5f6962;font-size:14px;line-height:1.8}.home-project-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}.home-project-tags span{padding:5px 9px;border-radius:5px;background:#f2f5f0;color:#586756;font-size:11px;font-weight:720}.home-project-info hr{height:1px;margin:21px 0;border:0;background:#e2e6e1}.home-project-link-label{margin:0 0 9px;color:#657068;font-size:12px;font-weight:780}.home-project-repo{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:12px;border:1px solid #e2e6e1;border-radius:7px;color:#2c4732;text-decoration:none}.home-project-repo:hover{border-color:#9db58e;background:#f8faf6}.home-project-repo span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.home-project-copy{width:100%;min-height:42px;margin-top:10px;border:0;border-radius:7px;background:#9bdc55;color:#1e2b1b;font-size:13px;font-weight:820;cursor:pointer}.home-project-copy:hover{background:#abe866}.home-project-more{display:block;margin-top:16px;color:#657068;font-size:12px;font-weight:760;text-decoration:none}.home-project-more:hover{color:#1f7a4d}
@media(max-width:900px){.home-project-dialog{width:min(760px,96vw);height:min(900px,94vh)}.home-project-dialog__body{grid-template-columns:1fr;grid-template-rows:minmax(250px,46vh) minmax(0,1fr)}.home-project-media{padding:14px}.home-project-info{padding:19px 20px 24px}}
@media(max-width:600px){.home-project-modal{padding:0}.home-project-dialog{width:100%;height:100%;max-height:none;border-radius:0}.home-project-dialog__head{flex-basis:50px}.home-project-dialog__body{grid-template-rows:minmax(260px,42vh) minmax(0,1fr)}.home-project-media{gap:8px;padding:10px}.home-project-thumbnails button{flex-basis:66px;height:46px}.home-project-info{padding:17px 17px 24px}.home-project-info h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){.home-project-dialog{animation:none}}

/* ==========================================================
   第十六轮：回归米白编辑风主题 + 放大一档 + 四宫格二维码
   覆盖第十五轮的「极小扁平绿」层，回到站点原生配色：
   canvas #f5f0e6 / paper #fffdf7 / ink #181914 / 4px 硬阴影
   ========================================================== */

/* --- 区块头：回到站点标题规格 --- */
.section.lm.si-flat-sec{ max-width:1280px; padding:46px 24px 0; }
.sec-head-s{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  padding-bottom:14px; margin-bottom:18px; border-bottom:2px solid var(--line);
}
.sec-head-s h2{ font-size:clamp(22px,2.6vw,28px); font-weight:900; letter-spacing:-.02em; line-height:1.15; }
.sec-more{
  font-size:13px; font-weight:800; color:var(--ink); white-space:nowrap;
  border-bottom:2px solid var(--lime); padding-bottom:2px;
}
.sec-more:hover{ background:var(--lime); border-radius:2px; }

/* --- 分类药丸：编辑风黑边 --- */
.cat-rail.mini-pills{ gap:8px; margin:0 0 16px; }
.cat-rail.mini-pills .tabp{
  padding:6px 14px; font-size:13px; font-weight:800; border-radius:999px;
  border:2px solid var(--line); background:var(--paper); color:var(--ink);
}
.cat-rail.mini-pills .tabp:hover{ background:var(--lime); }
.cat-rail.mini-pills .tabp.is-active{ background:var(--ink); color:var(--paper); }

/* --- 卡片：变大 + 硬阴影编辑风 --- */
.flat-grid{ gap:18px; }
.check-row{display:flex;flex-wrap:wrap;gap:10px}.check-row label{display:flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-size:13px;font-weight:700;cursor:pointer}.check-row input{accent-color:var(--lime-deep)}
.flat-grid--2{ gap:18px; }
.flat-card{
  align-items:center; gap:12px;
  padding:14px 16px; border:2px solid var(--line); border-radius:14px;
  background:var(--paper); box-shadow:3px 3px 0 var(--line);
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
a.flat-card:hover{
  transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--line);
  background:#fff; border-color:var(--ink);
}
.flat-card__no{ display:none; }
.flat-ico{
  flex:none; width:44px; height:44px; border-radius:12px; border:2px solid var(--line);
  display:grid; place-items:center; font-size:22px; line-height:1; background:var(--lime);
}
.flat-card[data-cat="job"] .flat-ico,.flat-ico--job{ background:var(--lime); }
.flat-ico--video{ background:var(--coral); }
.flat-ico--copy{ background:var(--pink); }
.flat-ico--office{ background:var(--sky); }
.flat-ico--design{ background:#c4b5fd; }
.flat-ico--study{ background:var(--sky-deep); color:#fff; }
.flat-ico--money{ background:var(--yellow); }
.flat-ico--life{ background:var(--lime-deep); }
.flat-ico--other{ background:#e7e5df; }
.flat-card__bd h3{
  font-size:15.5px; font-weight:900; line-height:1.35; color:var(--ink);
  white-space:normal; overflow:visible; text-overflow:clip;
}
.flat-card__bd p{
  margin-top:4px; font-size:13px; line-height:1.6; color:var(--muted);
  -webkit-line-clamp:2;
}
.flat-card__ft{ margin-top:8px; gap:6px; }
.flat-tag{
  padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:800;
  border:1.5px solid var(--line); color:var(--muted); background:#fff;
}
.flat-tag--skill{ background:var(--lime); color:var(--ink); }
.flat-tag--proj{ background:var(--yellow); color:var(--ink); }
.flat-tag--mcp{ background:var(--sky); color:var(--ink); }
.flat-card .m-tag{ font-size:11.5px; padding:2px 9px; border:1.5px solid var(--line); background:#fff; color:var(--muted); }
.flat-card .m-tag--heat{ background:var(--coral); color:#fff; }
.flat-card .m-tag--new{ background:var(--lime); color:var(--ink); }
.flat-card__link{
  font-size:13px; font-weight:900; color:var(--ink);
  border-bottom:2px solid var(--lime); padding-bottom:1px;
}
.flat-go{ font-size:18px; color:var(--muted); }
a.flat-card:hover .flat-go{ color:var(--ink); }

/* --- 竖版卡（新手教程用）：1:1 封面 --- */
.flat-grid--v .flat-card{
  flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden;
}
.cover-1x1{
  position:relative; aspect-ratio:1/1; width:100%; display:grid; place-items:center;
  border-bottom:2px solid var(--line); background:var(--lime);
}
.cover-1x1 img{ width:100%; height:100%; object-fit:cover; display:block; }
.cover-1x1__ph{ font-size:52px; line-height:1; }
.cover-1x1__tip{
  position:absolute; left:10px; bottom:10px; padding:3px 8px; border-radius:999px;
  background:rgba(255,253,247,.92); border:1.5px solid var(--line);
  font-size:11px; font-weight:800; color:var(--muted);
}
.flat-grid--v .flat-card .flat-card__bd{ padding:14px 16px 16px; }
.flat-grid--v .flat-card h3{ font-size:17px; }

/* --- 二维码：2×2 四宫格 --- */
.contact.is-flat{
  display:grid; grid-template-columns:260px 1fr; gap:24px; align-items:start;
}
.qr-grid4{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:260px;
}
.qr-grid4 img{
  width:100%; aspect-ratio:1/1; object-fit:contain; display:block;
  border:2px solid var(--line); border-radius:12px; background:var(--paper);
  box-shadow:3px 3px 0 var(--line); padding:5px;
}
.contact.is-flat .contact__form{
  gap:12px; padding:18px; border:2px solid var(--line); border-radius:14px;
  background:var(--paper); box-shadow:3px 3px 0 var(--line);
}
.contact.is-flat .contact__form input,
.contact.is-flat .contact__form textarea{
  font-size:13.5px; padding:10px 12px; border-radius:8px;
  border:2px solid var(--line); background:#fff;
}
.contact.is-flat .contact__form textarea{ min-height:92px; }
.contact.is-flat .contact__submit{
  font-size:13.5px; padding:10px 22px; border-radius:999px;
  background:var(--lime); border:2px solid var(--line); color:var(--ink);
  box-shadow:3px 3px 0 var(--line);
}
.contact.is-flat .contact__submit:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--line); }

/* --- 智能体推荐：居中卡片行，不再偏 --- */
.agent-rec .platform-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  max-width:1080px; margin:0 auto; padding:0 24px;
}
.agent-rec .platform-list__title{
  width:100%;
  text-align:center; margin:0 0 16px;
  font-size:clamp(22px,2.6vw,28px); font-weight:900; letter-spacing:-.02em; color:var(--ink);
}
.agent-rec .platform-list .platform-card{
  width:calc(25% - 12px);
  min-width:220px;
  max-width:280px;
  display:flex;
  flex-direction:column; align-items:flex-start; gap:10px;
  padding:18px; text-align:left;
  border:2px solid var(--line); border-radius:14px; background:var(--paper);
  box-shadow:3px 3px 0 var(--line);
  transition:transform .14s ease, box-shadow .14s ease;
}
.agent-rec .platform-list .platform-card:hover{
  transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--line);
}
.agent-rec .platform-list .platform-card__ico{
  width:48px; height:48px; border-radius:12px; border:2px solid var(--line);
  display:grid; place-items:center; background:var(--lime);
}
.agent-rec .platform-list .platform-card__ico svg{ width:24px; height:24px; }
.agent-rec .platform-list .platform-card b{ font-size:16px; font-weight:900; }
.agent-rec .platform-list .platform-card span{ font-size:13px; color:var(--muted); line-height:1.6; }
/* 隐藏 more 卡片 */
.agent-rec .platform-list .platform-card--more{ display:none; }
.agent-rec .platform-list .platform-card--more.is-shown{ display:flex; }
/* 不同卡片不同颜色 */
.agent-rec .platform-list a.platform-card:nth-of-type(1) .platform-card__ico{ background:var(--lime); }
.agent-rec .platform-list a.platform-card:nth-of-type(2) .platform-card__ico{ background:var(--sky); }
.agent-rec .platform-list a.platform-card:nth-of-type(3) .platform-card__ico{ background:var(--yellow); }
.agent-rec .platform-list a.platform-card:nth-of-type(4) .platform-card__ico{ background:var(--pink); }
.agent-rec .platform-list a.platform-card:nth-of-type(5) .platform-card__ico{ background:var(--coral); }
.agent-rec .platform-list a.platform-card:nth-of-type(6) .platform-card__ico{ background:var(--lime-deep); }
.agent-rec .platform-list a.platform-card:nth-of-type(7) .platform-card__ico{ background:var(--sky-deep); color:#fff; }
.agent-rec .agents-more{
  width:100%;
  text-align:center;
  margin:8px auto 0;
  padding:10px 24px; border:2px solid var(--line); border-radius:999px;
  background:var(--paper); color:var(--ink); font-size:14px; font-weight:800;
  box-shadow:3px 3px 0 var(--line);
  transition:all .14s ease;
}
.agent-rec .agents-more:hover{ background:var(--lime); transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--line); }

/* --- 小字说明一律不显示 --- */
.rec-note, .case-pane__lead, .contact__qr p, .case-count{ display:none !important; }

@media(max-width:900px){
  .agent-rec .platform-list{
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:12px;
  }
  .agent-rec .platform-list .platform-card:first-of-type:nth-last-of-type(2){
    max-width:320px;
  }
  .contact.is-flat{ grid-template-columns:1fr; }
  .qr-grid4{ max-width:280px; }
}
@media(max-width:560px){
  .flat-grid,.flat-grid--2,.flat-grid--v{ grid-template-columns:1fr; }
  .agent-rec .platform-list .platform-card{ flex:1 1 100%; }
  .section.lm.si-flat-sec{ padding:34px 16px 0; }
}

/* 修正：原 .platform-list 是竖排 flex，需要显式改成横向换行 */
.agent-rec .platform-list{ flex-direction:row; align-items:stretch; }
.agent-rec .platform-list .platform-card{
  flex:1 1 calc(25% - 11px); max-width:250px; min-width:0;
}

/* 移动端：智能体卡片回到 2 列 / 1 列（放在最后，覆盖上面的桌面规则） */
@media(max-width:900px){
  .agent-rec .platform-list .platform-card{ flex:1 1 44% !important; max-width:none !important; }
}
@media(max-width:560px){
  .agent-rec .platform-list .platform-card{ flex:1 1 100% !important; }
}

/* 展开前国产区双列；展开后国产卡仍占半行，国外区四列，避免卡片被挤窄。 */
.agent-rec .platform-list,
.agent-rec .platform-list[data-expanded="true"] {
  width:100%; max-width:1080px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch; gap:14px; padding:0 16px;
}
.agent-rec .platform-list .platform-list__title,
.agent-rec .platform-list .platform-list__group,
.agent-rec .platform-list .agents-more { grid-column:1/-1; }
.agent-rec .platform-list .platform-card {
  width:100%; min-width:0; max-width:none; margin:0; flex:none;
}
.agent-rec .platform-list > a.platform-card:nth-of-type(1),
.agent-rec .platform-list > a.platform-card:nth-of-type(2) { grid-column:span 2; }
@media(max-width:760px){
  .agent-rec .platform-list,
  .agent-rec .platform-list[data-expanded="true"] { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0; }
  .agent-rec .platform-list > a.platform-card:nth-of-type(1),
  .agent-rec .platform-list > a.platform-card:nth-of-type(2) { grid-column:span 1; }
}
@media(max-width:480px){
  .agent-rec .platform-list,
  .agent-rec .platform-list[data-expanded="true"] { grid-template-columns:1fr; }
}

/* ========== 移动端优化（手机适配） ========== */
@media (max-width: 768px) {
  /* 导航栏优化 */
  .nav-bar {
    margin: 12px 16px 0;
    padding: 8px 12px;
    gap: 12px;
    flex-wrap: wrap;
  }

  .brand__mark {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }

  .brand span {
    font-size: 14px;
  }

  .nav-links {
    width: 100%;
    order: 3;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  .nav-links a {
    padding: 6px 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  .nav-search { display: flex; order: 2; flex: 1 1 100%; min-width: 0; width: 100%; max-width: none; }
  .nav-search kbd { display: none; }

  .theme-btn {
    width: 32px;
    height: 32px;
  }

  .cta {
    padding: 7px 14px;
    font-size: 13px;
  }

  /* 品牌区优化 */
  .hero__brand {
    padding: 32px 20px !important;
  }

  .brand-row {
    flex-direction: column;
    gap: 16px;
  }

  .brand-deco {
    width: 100%;
    justify-content: center;
  }

  .brand-deco--l,
  .brand-deco--r {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .brand-deco__item {
    font-size: 12px;
    padding: 4px 10px;
  }

  .hero__wordmark {
    font-size: 42px !important;
  }

  .hero__tagline {
    font-size: 16px !important;
  }

  /* 搜索面板优化 */
  .search-panel {
    width: calc(100% - 32px);
    max-width: none;
    padding: 20px 16px;
    margin: 24px 16px;
  }

  .mode-switch {
    gap: 6px;
  }

  .mode-switch button {
    padding: 9px 16px;
    font-size: 13px;
  }

  .mode-note {
    font-size: 12px;
    line-height: 1.5;
  }

  .search-row {
    flex-direction: column;
    gap: 10px;
  }

  .search-row input {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
  }

  .search-row button {
    width: 100%;
    padding: 12px;
    font-size: 15px;
  }

  .chips {
    gap: 6px;
  }

  .chips button {
    font-size: 12px;
    padding: 6px 12px;
  }

  /* 智能体推荐区优化 */
  .platform-list__title {
    font-size: 20px !important;
    margin-bottom: 12px;
  }

  .platform-card {
    padding: 14px !important;
  }

  .platform-card__ico {
    width: 38px !important;
    height: 38px !important;
  }

  .platform-card b {
    font-size: 14px !important;
  }

  .platform-card span {
    font-size: 12px !important;
  }

  /* 今日热榜优化 */
  .hot-videos {
    padding: 24px 16px;
    margin: 24px 16px;
  }

  .hot-videos__head h3 {
    font-size: 20px;
  }

  .hot-videos__head span {
    font-size: 13px;
  }

  .hot-videos__stage {
    gap: 6px;
    padding: 0 4px;
  }

  .hv-arrow {
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    flex-shrink: 0;
  }

  .hv-track {
    height: clamp(200px, 42vw, 260px) !important;
  }

  .hv-card {
    width: 85% !important;
    margin-left: -42.5% !important;
  }

  .hv-frame {
    border-width: 1.5px;
  }

  .hv-cap {
    padding: 0 10px;
    margin-top: 10px;
    min-height: 50px;
  }

  .hv-cap b {
    font-size: 12px !important;
    line-height: 1.4;
    display: block;
  }

  .hv-cap p {
    font-size: 10.5px !important;
    line-height: 1.4;
    margin-top: 4px;
  }

  /* 新手教程轮播优化 */
  .tutorial-carousel {
    gap: 6px;
    padding: 0 4px;
  }

  .tc-arrow {
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    flex-shrink: 0;
  }

  .tc-track {
    height: clamp(120px, 28vw, 160px) !important;
  }

  .tc-card {
    width: 85% !important;
    margin-left: -42.5% !important;
  }

  .tc-card .cover-1x1 {
    display: none !important;
  }

  .tc-card__bd {
    padding: 16px 12px !important;
    background: var(--paper) !important;
    border: 2px solid var(--ink) !important;
    border-radius: var(--radius-sm);
    box-shadow: 2px 2px 0 var(--ink) !important;
    position: relative;
  }

  .tc-card__bd::before {
    content: '▶';
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: var(--coral);
    color: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 50%;
    font-size: 12px;
    padding-left: 2px;
    box-shadow: 2px 2px 0 var(--ink);
  }

  .tc-card__bd h3 {
    font-size: 14px !important;
    font-weight: 900 !important;
    color: var(--ink) !important;
    margin-bottom: 6px !important;
    padding-right: 40px;
  }

  .tc-card__bd p {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--muted) !important;
    padding-right: 40px;
  }

  /* 区块标题优化 */
  .sec-head-s h2 {
    font-size: 22px !important;
  }

  .sec-head-s .sec-more {
    font-size: 13px;
  }

  /* 扁平卡片优化 */
  .flat-card {
    padding: 18px;
  }

  .flat-ico {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .flat-card h3 {
    font-size: 16px;
  }

  .flat-card p {
    font-size: 13px;
  }

  .flat-card__link {
    font-size: 13px;
  }

  /* 新手教程轮播优化 */
  .tutorial-carousel {
    gap: 6px;
    padding: 0 4px;
  }

  .tc-arrow {
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    flex-shrink: 0;
  }

  .tc-track {
    height: 340px !important;
  }

  .tc-card {
    width: 100% !important;
    margin-left: -50% !important;
  }

  .tc-card .tc-cover {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
  }

  .tc-card__bd {
    padding: 16px 12px !important;
    background: var(--paper) !important;
    border: 2px solid var(--ink) !important;
    border-radius: var(--radius-sm);
    box-shadow: 2px 2px 0 var(--ink) !important;
    position: relative;
  }

  .tc-card__bd::before {
    content: '▶';
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: var(--coral);
    color: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 50%;
    font-size: 12px;
    padding-left: 2px;
    box-shadow: 2px 2px 0 var(--ink);
  }

  .tc-card__bd h3 {
    font-size: 14px !important;
    font-weight: 900 !important;
    color: var(--ink) !important;
    margin-bottom: 6px !important;
    padding-right: 40px;
  }

  .tc-card__bd p {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--muted) !important;
    padding-right: 40px;
  }

  /* 分类标签优化 */
  .cat-rail {
    gap: 6px;
    padding: 0 16px;
  }

  .tabp {
    font-size: 12px;
    padding: 6px 12px;
  }

  /* 联系我们优化 */
  .contact.is-flat {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .qr-grid4 {
    max-width: 100%;
    gap: 10px;
  }

  .contact__form {
    padding: 16px;
  }

  .contact__form input,
  .contact__form textarea {
    font-size: 15px;
  }

  .contact__submit {
    width: 100%;
    padding: 12px;
    font-size: 15px;
  }

  /* 页脚优化 */
  footer {
    padding: 20px 16px;
  }

  .foot-bottom {
    font-size: 12px !important;
  }

  .foot-bottom a {
    display: inline-block;
    margin: 0 4px !important;
    font-size: 12px;
  }

  .foot-bottom p {
    line-height: 1.8;
  }
}

/* 超小屏幕（< 420px）额外优化 */
@media (max-width: 420px) {
  .nav-bar {
    margin: 10px 12px 0;
    padding: 6px 10px;
  }

  .hero__wordmark {
    font-size: 36px !important;
  }

  .search-panel {
    width: calc(100% - 24px);
    max-width: none;
    margin: 20px 12px;
    padding: 16px 12px;
  }

  .hot-videos,
  .section.lm {
    margin: 20px 12px;
    padding: 20px 12px;
  }

  .brand-deco__item {
    font-size: 11px;
    padding: 3px 8px;
  }

  .hv-card {
    min-width: 240px;
  }

  .flat-card {
    padding: 14px;
  }

  .qr-grid4 img {
    border-radius: 8px;
  }
}

/* 首页首屏：品牌承担主要视觉，热榜作为可扫描的侧栏；窄屏恢复单列。 */
@media (min-width: 861px) {
  .hero__stack {
    width: min(1320px, calc(100% - 32px));
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
    align-items: stretch;
    gap: clamp(26px, 3.4vw, 52px);
    padding: 34px 0 0;
  }

  .hero__stack > .hero__brand {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-height: 420px;
    justify-content: center;
    padding: 30px 26px;
    border: 2px solid var(--ink);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow-hard);
  }

  .hero__stack > .hero__brand .brand-row { gap: clamp(22px, 3.4vw, 68px); }
  .hero__stack > .hero__brand .hero__wordmark { white-space: nowrap; font-size: clamp(54px, 6vw, 76px); }
  .hero__stack > .hero__brand .hero__tagline { white-space: nowrap; font-size: 16px; }

  .hero__stack > #hotVideos {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 28px 16px;
    border: 2px solid var(--ink);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow-hard);
  }

  .hero__stack > #hotVideos .hot-videos__head {
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
  }

  .hero__stack > #hotVideos .hot-videos__head h3 { font-size: 28px; }
  .hero__stack > #hotVideos .hot-videos__head span { font-size: 14px; }
  .hero__stack > #hotVideos .hot-videos__stage { gap: 6px; }
  .hero__stack > #hotVideos .hv-track { height: 390px; }
  .hero__stack > #hotVideos .hv-card { width: 90%; margin-left: -45%; }
  .hero__stack > #hotVideos .hv-cap { padding: 0 6px; text-align: left; }
  .hero__stack > #hotVideos .hv-cap b { font-size: 17px; }
  .hero__stack > #hotVideos .hv-cap p { font-size: 13px; }
  .hero__stack > #hotVideos .hv-arrow { width: 42px; height: 42px; font-size: 24px; }

  .hero__stack > .agent-rec {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  /* 编辑态仍展示三张卡，控件不会被轮播定位规则覆盖。 */
  body.inline-page-edit .hero__stack > #hotVideos .hv-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    height: auto;
    overflow: visible;
  }

  body.inline-page-edit .hero__stack > #hotVideos .hv-card {
    position: relative;
    inset: auto;
    width: auto;
    margin: 0;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Shared standalone destinations use the same public shell as the homepage. */
.section-page { max-width: 1140px; margin: 0 auto; padding: 54px 24px 80px; }
.section-page .pg-head { max-width: 720px; margin-bottom: 28px; }
.section-page .pg-head h1 { margin: 8px 0 12px; font-size: clamp(32px, 5vw, 58px); line-height: 1.08; font-weight: 900; }
.section-page .pg-head p:not(.section-kicker) { color: var(--muted); line-height: 1.7; }
.tutorial-list { display: grid; gap: 16px; }
.tutorial-list .tutorial-card { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 22px; align-items: center; padding: 18px; border: 2px solid var(--ink); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow-hard); }
.tutorial-list .tutorial-card h2 { margin: 0 0 8px; font-size: 24px; }
.tutorial-list .tutorial-card p { color: var(--muted); margin: 0 0 16px; }
.tutorial-list .cover-1x1 { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); background: var(--lime); display: grid; place-items: center; font-size: 38px; }
.platform-grid--page { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 26px; }
.platform-grid--page .platform-card { min-height: 120px; align-items: center; justify-content: center; text-align: center; }
.platform-grid--page .platform-card .platform-icon { display: block; font-size: 34px; margin-bottom: 8px; }
.admin-toolbar { display:flex; align-items:center; gap:18px; min-height:72px; padding:10px 24px; border-bottom:2px solid var(--line); background:var(--paper); }
.admin-toolbar nav { display:flex; gap:8px; margin-left:auto; }
.admin-loading { max-width:720px; margin:80px auto; padding:24px; text-align:center; color:var(--muted); }
@media (max-width: 700px) { .tutorial-list .tutorial-card { grid-template-columns: 1fr; } .platform-grid--page { grid-template-columns: repeat(2, minmax(0,1fr)); } .admin-toolbar { padding:10px 14px; } .admin-toolbar strong { display:none; } }

/* 首屏品牌与热榜使用开放式版式，内容边界由留白和内部媒体层次表达。 */
@media (min-width: 861px) {
  .hero__stack > .hero__brand,
  .hero__stack > #hotVideos {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

@media (max-width: 860px) {
  .hero__stack > .hero__brand,
  .hero__stack > #hotVideos {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

@media (max-width: 860px) {
  .hero__stack {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 16px 0;
  }

  .hero__stack > .hero__brand,
  .hero__stack > #hotVideos,
  .hero__stack > .agent-rec {
    width: 100%;
    grid-column: auto;
    grid-row: auto;
  }
}

/* Final cascade for the Cola-style project catalogue. */
.picks-showcase .flat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px}
.picks-showcase .flat-card{display:block;padding:0;overflow:hidden;border:1px solid #e1e4de;border-radius:10px;background:#fff;box-shadow:0 3px 12px rgba(26,36,27,.04)}
.picks-showcase .project-cover{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1.52/1;overflow:hidden;background:#eef2ec}
.picks-showcase .project-cover img{display:block;width:100%;height:100%;object-fit:cover}
.picks-showcase .flat-card__bd{padding:15px 15px 14px}
.picks-showcase .flat-card__bd h3{margin:0;font-size:17px;line-height:1.3}
.picks-showcase .flat-card__bd>p:not(.project-card__repo){margin:8px 0 0;min-height:39px;font-size:12px;line-height:1.6;-webkit-line-clamp:2}
@media(max-width:1050px){.picks-showcase .flat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.picks-showcase .flat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}}
@media(max-width:520px){.picks-showcase .flat-grid{grid-template-columns:1fr}.picks-showcase .project-cover{aspect-ratio:1.65/1}}