:root{
  --bg:#fbfaf9; --fg:#1b1b1f; --mut:#6b6b76; --line:#e6e3df;
  --acc:#b4553f; --card:#fff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
       "Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--acc)}
main{max-width:1180px;margin:0 auto;padding:20px 16px 56px}
h1{font-size:22px;line-height:1.35;margin:14px 0 6px;font-weight:650}
h2{font-size:17px;margin:30px 0 12px;font-weight:650}
.meta{color:var(--mut);font-size:13px;margin:0 0 14px}
.desc{background:var(--card);border:1px solid var(--line);border-radius:8px;
      padding:10px 13px;color:#3c3c46;font-size:14px;margin:0 0 16px}
.intro{background:var(--card);border:1px solid var(--line);border-radius:8px;
       padding:13px 15px;color:#3c3c46;font-size:14px;margin:0 0 18px}

/* 顶栏 / 页脚 */
.hdr{display:flex;align-items:center;gap:22px;padding:12px 16px;
     background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:9}
.hdr .logo{font-weight:750;letter-spacing:.2px;font-size:17px}
.hdr nav{display:flex;gap:16px;font-size:14px;color:#4a4a54;flex-wrap:wrap}
.ftr{border-top:1px solid var(--line);background:#fff;padding:22px 16px 34px;
     color:var(--mut);font-size:13px;text-align:center}
.ftr-links a{margin:0 6px;color:#4a4a54}
.ftr-note{max-width:780px;margin:10px auto 6px}

/* 版本徽标（OpenKoala practical_guide_pwa_release_versioning.md §二①）
   作用：打开页面就能肉眼确认线上是不是新版；也是 check-release.sh 的锚点。
   注意：必须显式还原普通小字，否则若父元素用了渐变文字会继承成透明看不清。 */
.app-version{
  font-size:.7rem;font-weight:400;margin-left:8px;color:#9a958f;
  background:none;-webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:#9a958f;white-space:nowrap;user-select:none;
  vertical-align:middle;
}

/* 面包屑 */
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:8px 0 0;
          font-size:12.5px;color:var(--mut)}
.crumb li+li::before{content:"/";margin-right:6px;color:#c9c5c0}

/* 卡片网格 */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:9px;
      overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;height:auto;display:block;aspect-ratio:2/3;object-fit:cover;background:#efece9}
.card-t{font-size:12.5px;line-height:1.45;padding:8px 10px 0;color:#2c2c34;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-m{font-size:11.5px;color:var(--mut);padding:3px 10px 10px}

/* 详情页图库 */
.gallery{display:grid;gap:16px;grid-template-columns:1fr}
.gallery figure{margin:0;background:var(--card);border:1px solid var(--line);
                border-radius:9px;overflow:hidden}
.gallery img{width:100%;height:auto;display:block;background:#efece9}
.gallery figcaption{font-size:11.5px;color:var(--mut);padding:6px 10px;text-align:right}
@media(min-width:760px){
  .gallery{grid-template-columns:1fr 1fr}
}

/* 列表 / 分页 / 芯片 */
.list{list-style:none;padding:0;display:grid;gap:8px;
      grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.list li{background:var(--card);border:1px solid var(--line);border-radius:8px;
         padding:9px 12px;display:flex;justify-content:space-between;font-size:14px}
.list li span{color:var(--mut);font-size:12.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--card);border:1px solid var(--line);border-radius:999px;
      padding:6px 13px;font-size:13.5px}
.chip b{color:var(--mut);font-weight:500;font-size:12px;margin-left:4px}
.more{display:inline-block;margin-top:12px;color:var(--acc);font-size:14px}
.pager{display:flex;gap:14px;justify-content:center;align-items:center;
       margin:26px 0 0;font-size:14px;color:var(--mut)}
.pager a{color:var(--acc)}
.rel{margin:20px 0 0;font-size:13.5px;color:var(--mut)}
.rel a{color:var(--acc)}