/* ==========================================================================
   云筑建站门户 — 全部样式（唯一 CSS 文件）
   结构：公共基座 → 首页专属（.page-home 作用域）→ 详情页专属（.page-detail 作用域）
   页面专属样式统一加 body 类前缀，避免两页选择器互相污染。
   ========================================================================== */

/* ---------- 基础 ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"PingFang SC","Microsoft YaHei",sans-serif; color:#1e1b4b; background:#f8faff; }
a { text-decoration:none; color:inherit; }
.wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
.grad { background:linear-gradient(120deg,#6366f1,#8b5cf6 55%,#06b6d4); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- 顶部导航 ---------- */
header { position:sticky; top:0; z-index:10; background:#f8faffcc; backdrop-filter:blur(10px); border-bottom:1px solid #e4e9fb; }
.nav { display:flex; align-items:center; height:68px; gap:34px; }
.logo { display:flex; align-items:center; gap:10px; font-size:19px; font-weight:700; }
.logo .logo-img { height:28px; width:auto; display:block; }
.nav .links { display:flex; gap:26px; font-size:14px; color:#64748b; }
.nav .links a:hover { color:#6366f1; }
.nav .cta { margin-left:auto; background:linear-gradient(120deg,#6366f1,#8b5cf6); color:#fff; padding:10px 22px; border-radius:12px; font-size:14px; box-shadow:0 8px 20px #6366f144; }

/* ---------- 按钮 ---------- */
.btn { display:inline-block; padding:14px 32px; border-radius:13px; font-size:15px; }
.btn.primary { background:linear-gradient(120deg,#6366f1,#8b5cf6); color:#fff; box-shadow:0 12px 28px #6366f155; }
.btn.ghost { border:1px solid #dbe2f5; color:#475569; background:#fff; }

/* ---------- 假浏览器窗口（公共基座） ---------- */
.browser { background:#fff; border:1px solid #e4e9fb; border-radius:18px; overflow:hidden; box-shadow:0 30px 80px #4338ca22; }
.browser .bar { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid #eef1fa; background:#fbfcff; }
.browser .bar i { width:11px; height:11px; border-radius:99px; }
.browser .bar i:nth-child(1) { background:#fca5a5; }
.browser .bar i:nth-child(2) { background:#fcd34d; }
.browser .bar i:nth-child(3) { background:#86efac; }
.browser .bar .url { flex:1; margin-left:10px; background:#f1f5f9; border-radius:8px; font-size:12px; color:#94a3b8; padding:6px 14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.browser .shot { display:block; background-size:cover; background-position:center 20%; position:relative; background-color:#eef2ff; }

/* ---------- 区块标题 ---------- */
.sec-head h2 { font-weight:700; }
.sec-head p { color:#64748b; font-size:15px; }

/* ---------- 模板卡片 ---------- */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.card { background:#fff; border:1px solid #e8edf9; border-radius:18px; padding:12px 12px 18px; transition:.22s; }
.card:hover { transform:translateY(-6px); box-shadow:0 22px 44px #4338ca1f; }
.card .shot { display:block; height:250px; border-radius:11px; background-size:cover; background-position:center; position:relative; overflow:hidden; background-color:#eef2ff; }
.card .badge { position:absolute; right:10px; top:10px; z-index:2; max-width:calc(100% - 20px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:#fff; padding:4px 10px; border-radius:7px; }
.card .body { padding:14px 8px 0; }
.card h3 { font-size:16px; }
.card .meta { font-size:13px; color:#94a3b8; margin-top:5px; }
.card .ops { display:flex; gap:8px; }
.card .ops a { flex:1; text-align:center; font-size:13px; padding:9px 0; border-radius:10px; }
.card .ops .view { background:#eef2ff; color:#6366f1; font-weight:600; }
.card .ops .more { border:1px solid #e4e9fb; color:#64748b; }
.card .ops .more:hover { border-color:#c7d2fe; color:#6366f1; background:#f8faff; }
.empty { text-align:center; color:#94a3b8; padding:60px 0; grid-column:1/-1; }

/* ---------- 页脚 ---------- */
footer { border-top:1px solid #e4e9fb; padding:40px 0; font-size:14px; color:#94a3b8; }
footer .wrap { display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; }
footer b { color:#1e1b4b; font-size:16px; display:block; margin-bottom:8px; }

/* ==========================================================================
   首页专属（body.page-home）
   ========================================================================== */

/* hero 标语区 */
.page-home .hero { text-align:center; padding:40px 0 16px; }
.page-home .hero .tag { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#6366f1; background:#eef2ff; border:1px solid #e0e7ff; padding:7px 18px; border-radius:99px; }
.page-home .hero .tag i { width:7px; height:7px; border-radius:99px; background:#22c55e; }
.page-home .hero h1 { font-size:52px; line-height:1.25; font-weight:700; letter-spacing:-1px; margin-top:24px; }
.page-home .hero p { margin:20px auto 0; font-size:17px; color:#64748b; max-width:560px; line-height:1.8; }
.page-home .hero .btns { margin-top:34px; display:flex; gap:14px; justify-content:center; }

/* hero 首屏背景层（全宽伪元素，底部渐隐到页面底色；内容区块整体提层） */
body.page-home { position:relative; }
body.page-home::before {
  content:''; position:absolute; top:0; left:0; right:0; height:560px;
  background:
    linear-gradient(180deg, rgba(248,250,255,0) 0%, rgba(248,250,255,.45) 55%, #f8faff 82%, #f8faff 100%),
    url('/img/hero-bg.webp') top center / cover no-repeat;
  z-index:0; pointer-events:none;
}
.page-home header, .page-home .hero, .page-home section, .page-home footer { position:relative; z-index:1; }

/* 首屏案例大图 */
.page-home .browser { max-width:960px; margin:52px auto 0; }
.page-home .browser .shot { height:420px; }
.page-home .browser .shot .go { position:absolute; right:18px; bottom:18px; background:#ffffffe6; backdrop-filter:blur(4px); color:#6366f1; font-weight:600; font-size:14px; padding:10px 20px; border-radius:11px; box-shadow:0 8px 24px #1e1b4b22; }
.page-home .logos { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 44px; padding:34px 0 10px; font-size:13px; color:#a5b0c8; letter-spacing:1px; }

/* 模板库标题与分类 tab */
.page-home .sec-head { text-align:center; margin:72px 0 36px; }
.page-home .sec-head h2 { font-size:32px; }
.page-home .sec-head p { margin-top:10px; }
.page-home .tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:64px 0 34px; }
.page-home .tabs a { font-size:13px; padding:8px 20px; border-radius:99px; color:#64748b; background:#fff; border:1px solid #e4e9fb; }
.page-home .tabs a.on { background:#6366f1; color:#fff; border-color:#6366f1; }

/* 三步流程 */
.page-home .how { margin:80px 0; background:#fff; border:1px solid #e8edf9; border-radius:24px; padding:56px; }
.page-home .how h2 { text-align:center; font-size:28px; }
.page-home .how .flow { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.page-home .how .step { text-align:center; padding:0 20px; position:relative; }
.page-home .how .step i { display:grid; place-items:center; width:52px; height:52px; margin:0 auto; border-radius:16px; background:linear-gradient(135deg,#6366f1,#06b6d4); color:#fff; font-style:normal; font-weight:700; font-size:19px; box-shadow:0 10px 24px #6366f144; }
.page-home .how .step h3 { font-size:16px; margin:16px 0 8px; }
.page-home .how .step p { font-size:13px; color:#64748b; line-height:1.7; }

/* ==========================================================================
   详情页专属（body.page-detail）
   ========================================================================== */

/* 布局与面包屑 */
.page-detail .hero { display:grid; grid-template-columns:1.25fr 1fr; gap:40px; padding:24px 0 56px; align-items:start; }
.page-detail .crumb { padding:26px 0 0; font-size:13px; color:#94a3b8; }
.page-detail .crumb a:hover { color:#6366f1; }
.page-detail .crumb span { margin:0 8px; color:#cbd5e1; }

/* 预览大图（详情页更紧凑，右下角「点击查看」） */
.page-detail .browser { border-radius:16px; box-shadow:0 24px 60px #4338ca1f; }
.page-detail .browser .bar { padding:11px 14px; }
.page-detail .browser .bar i { width:10px; height:10px; }
.page-detail .browser .bar .url { border-radius:7px; padding:5px 12px; }
.page-detail .browser .shot { height:340px; }
.page-detail .browser .shot .zoom { position:absolute; right:14px; bottom:14px; background:#ffffffe6; color:#6366f1; font-weight:600; font-size:13px; padding:8px 16px; border-radius:10px; backdrop-filter:blur(4px); }
.page-detail .pages { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.page-detail .pages a { font-size:13px; padding:8px 16px; border-radius:99px; background:#fff; border:1px solid #e4e9fb; color:#64748b; }
.page-detail .pages a:hover { border-color:#c7d2fe; color:#6366f1; }

/* 信息栏 */
.page-detail .btn { padding:13px 28px; border-radius:12px; }
.page-detail .btn.primary { box-shadow:0 12px 26px #6366f14d; }
.page-detail .info h1 { font-size:30px; line-height:1.3; }
.page-detail .info .cat { display:inline-block; margin-top:12px; font-size:12px; color:#6366f1; background:#eef2ff; border:1px solid #e0e7ff; padding:5px 14px; border-radius:99px; }
.page-detail .info .desc { margin-top:18px; font-size:15px; color:#64748b; line-height:1.9; }
.page-detail .info .specs { margin-top:24px; border-top:1px solid #e8edf9; padding-top:18px; }
.page-detail .info .specs div { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f1f5f9; font-size:14px; }
.page-detail .info .specs span { color:#94a3b8; }
.page-detail .info .btns { margin-top:26px; display:flex; gap:12px; }

/* 相关推荐 */
.page-detail .sec-head { margin:60px 0 26px; display:flex; align-items:baseline; justify-content:space-between; }
.page-detail .sec-head h2 { font-size:24px; }
.page-detail .sec-head a { font-size:14px; color:#6366f1; }
.page-detail .grid { gap:24px; padding-bottom:72px; }

/* ==========================================================================
   响应式
   ========================================================================== */

/* ---------- 平板（两页共有） ---------- */
@media (max-width:900px) {
  .wrap { padding:0 20px; }
  .grid { grid-template-columns:repeat(2,1fr); gap:22px; }
}

/* ---------- 首页平板 ---------- */
@media (max-width:900px) {
  .page-home .hero { padding:60px 0 44px; }
  .page-home .hero h1 { font-size:38px; letter-spacing:-.5px; }
  .page-home .how { padding:44px 36px; }
  .page-home .how .flow { gap:20px; }
}

/* ---------- 详情页平板 ---------- */
@media (max-width:880px) {
  .page-detail .hero { grid-template-columns:1fr; gap:28px; padding:20px 0 40px; }
  .page-detail .grid { grid-template-columns:1fr 1fr; gap:20px; }
  .page-detail .browser .shot { height:300px; }
  .page-detail .sec-head { margin:48px 0 22px; }
}

/* ---------- 首页小屏 ---------- */
@media (max-width:700px) {
  .page-home .how .flow { grid-template-columns:1fr; gap:28px; }
  .page-home .how { padding:36px 24px; margin:56px 0; }
  .page-home .sec-head { margin:52px 0 28px; }
}

/* ---------- 手机（两页共有） ---------- */
@media (max-width:600px) {
  .nav { height:60px; gap:16px; }
  .nav .links { display:none; }
  .nav .cta { padding:9px 16px; font-size:13px; }
  .logo { font-size:17px; }
  .logo .logo-img { height:24px; }
  .btn { display:block; text-align:center; padding:13px 20px; }
  .browser { border-radius:14px; }
  .grid { grid-template-columns:1fr; gap:18px; }
  footer { padding:32px 0; }
  footer .wrap { flex-direction:column; gap:22px; }
}

/* ---------- 首页手机 ---------- */
@media (max-width:600px) {
  .page-home .hero { padding:44px 0 36px; }
  body.page-home::before { height:440px; }
  .page-home .hero h1 { font-size:29px; line-height:1.35; }
  .page-home .hero .tag { font-size:12px; padding:6px 14px; }
  .page-home .hero p { font-size:15px; margin-top:16px; }
  .page-home .hero .btns { flex-direction:column; align-items:stretch; margin-top:26px; }
  .page-home .browser { margin-top:34px; }
  .page-home .browser .shot { height:230px; }
  .page-home .browser .shot .go { right:12px; bottom:12px; padding:8px 14px; font-size:13px; }
  .page-home .sec-head h2 { font-size:24px; }
  .page-home .sec-head p { font-size:14px; }
  .page-home .tabs { gap:8px; margin:40px 0 26px; }
  .page-home .tabs a { padding:7px 15px; }
  .page-home .how h2 { font-size:22px; }
}

/* 手机端分类 tab 改横向滑动：单行不换行、可左右滑（隐藏滚动条保留惯性滚动） */
@media (max-width:600px) {
  .page-home .tabs {
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* 抵消 .wrap 的 20px 内边距，让 tab 行能顶到屏幕边缘起滑，尾部再补 20px 空白 */
    margin-left:-20px;
    margin-right:-20px;
    padding:2px 20px 10px;
    scroll-padding:0 20px;
  }
  .page-home .tabs::-webkit-scrollbar { display:none; }
  .page-home .tabs a { flex:0 0 auto; white-space:nowrap; }
}

/* ---------- 详情页手机 ---------- */
@media (max-width:600px) {
  .page-detail .crumb { padding:18px 0 0; font-size:12px; line-height:1.9; }
  .page-detail .browser .shot { height:210px; }
  .page-detail .browser .shot .zoom { right:10px; bottom:10px; padding:7px 13px; font-size:12px; }
  .page-detail .pages { gap:8px; margin-top:12px; }
  .page-detail .pages a { font-size:12px; padding:7px 13px; }
  .page-detail .info h1 { font-size:23px; }
  .page-detail .info .desc { font-size:14px; line-height:1.85; }
  .page-detail .info .specs div { font-size:13px; }
  .page-detail .info .btns { flex-direction:column; align-items:stretch; gap:10px; }
  .page-detail .sec-head { flex-direction:column; align-items:flex-start; gap:8px; margin:40px 0 18px; }
  .page-detail .sec-head h2 { font-size:20px; }
  .page-detail .grid { grid-template-columns:1fr; gap:16px; padding-bottom:52px; }
}

/* ---------- 分类无刷新切换：卡片栅格淡出/淡入过渡（.fading 由 JS 切换） ---------- */
.page-home #siteGrid { transition:opacity .18s ease, transform .18s ease; }
.page-home #siteGrid.fading { opacity:.15; transform:translateY(6px); }

/* 页内锚点（页头「模板库」「浏览模板」→ #tpl）平滑滚动 */
html { scroll-behavior:smooth; }

/* 卡片封面改 <img loading=lazy>：填满卡片框，加载前露出 shimmer 骨架 */
.card .shot .shot-img { width:100%; height:100%; object-fit:cover; display:block; }

/* 懒加载骨架：图片未就绪时用 shimmer 扫光替代空白，加载完淡入（loading 类由 JS 控制） */
.card .shot.loading { background:linear-gradient(90deg,#eef2ff 25%,#e2e8fa 37%,#eef2ff 63%); background-size:400% 100%; animation:shotShimmer 1.2s ease-in-out infinite; }
.card .shot .shot-img { opacity:0; transition:opacity .35s ease; }
.card .shot .shot-img.is-loaded { opacity:1; }
@keyframes shotShimmer {
  0% { background-position:100% 50%; }
  100% { background-position:0 50%; }
}
@media (prefers-reduced-motion:reduce) {
  .card .shot.loading { animation:none; }
  .card .shot .shot-img { transition:none; }
}

/* ---------- 返回顶部悬浮按钮 ---------- */
/* 尺寸与右下角客服气泡（Crisp 54×54）保持一致；水平与气泡右缘对齐（同为 right:24），
   垂直方向落在气泡正上方、留 24px 间隙。Crisp 若改了尺寸/位置，这里同步跟一下。 */
.to-top {
  position:fixed; right:24px; bottom:98px; z-index:60;
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#6366f1; border:1px solid #e4e9fb;
  box-shadow:0 8px 24px #1e1b4b1f;
  cursor:pointer;
  opacity:0; transform:translateY(10px) scale(.94); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, box-shadow .22s ease;
}
.to-top.is-show { opacity:1; transform:none; pointer-events:auto; }
.to-top:hover { box-shadow:0 10px 28px #6366f13d; transform:translateY(-2px); color:#4f46e5; }
.to-top:focus-visible { outline:3px solid #6366f166; outline-offset:2px; }
@media (max-width:600px) {
  .to-top { right:14px; bottom:92px; }
}
@media (prefers-reduced-motion:reduce) {
  .to-top { transition:none; }
  .to-top:hover { transform:none; }
}