/* ============================================================
JomGuide.my — 手机版 app 界面（只在 ≤767px 生效：）
不是桌面版缩小：顶栏 + 底部 tab bar + 底部抽屉；
内容像刷社交 app 的信息流 —— 每篇文章都是一条 post。
style.css 的页面布局都包在 @media (min-width: 768px) 里，
手机上的页面结构全部由这里接手；按钮、表单、正文排版等仍共用 style.css。
============================================================ */
:root {
--gutter: 16px;
--appbar-h: 56px;
--tabbar-h: 60px;
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--header-h: calc(var(--appbar-h) + var(--safe-top)); /* 锚点跳转时让出顶栏 */
--band: #F2F4F3; /* 模块之间的灰色隔条；也是关于页的底色 */
--card: #FFFFFF;
--r-card: 18px;
--r-media: 14px;
--shadow-card: 0 1px 2px rgba(17, 24, 39, .05), 0 6px 18px -10px rgba(17, 24, 39, .16);
}
html { font-size: 15px; scroll-padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); } /* 手机字号整体小一号（rem 都跟着缩） */
.input, input, select, textarea { font-size: 16px; } /* 输入框保持 16px，iOS 聚焦时才不会放大页面 */
body { background: #fff; padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); -webkit-tap-highlight-color: transparent; }
body:has(.about-split), body:has(.contact-grid) { background: var(--band); } /* 关于、联系：像设置页，灰底白卡片 */
.sheet-open, .sheet-open body { overflow: hidden; } /* 抽屉打开时背景不滚 */
.btn:hover { transform: none; } /* 触屏没有悬停 */
.js .reveal { opacity: 1; transform: none; transition: none; animation: none; } /* app 里内容直接出现 */
.site-header { display: none; } /* 桌面顶栏与抽屉菜单：手机改用 app 顶栏 + tab bar */
/* ---------- 页面切换：顶栏和 tab bar 不动，只有内容过场 ---------- */
@view-transition { navigation: auto; }
.appbar { view-transition-name: appbar; }
.tabbar { view-transition-name: tabbar; }
::view-transition-old(root) { animation: vt-out 120ms ease-in both; }
::view-transition-new(root) { animation: vt-in 240ms cubic-bezier(.2, .7, .2, 1) 60ms both; }
::view-transition-group(appbar) { animation-duration: 180ms; }
::view-transition-old(tabbar), ::view-transition-new(tabbar) { animation: none; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* ---------- 顶栏：一级页面 logo + 语言；二级页面 返回 + 标题 + 操作 ---------- */
.appbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 2px; height: calc(var(--appbar-h) + var(--safe-top)); padding: var(--safe-top) max(6px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left)); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.appbar.scrolled { border-bottom-color: var(--line); }
.appbar-brand { display: inline-flex; align-items: center; padding: 0 10px; }
.appbar-brand img { width: auto; height: 30px; }
.appbar-title { flex: 1; min-width: 0; padding: 0 4px; font-size: 1rem; font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s var(--ease); }
.appbar.show-title .appbar-title { opacity: 1; transform: none; } /* 页面自己的大标题滚出去后才显示 */
.appbar-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; padding-right: 2px; }
.appbar-btn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); text-decoration: none; cursor: pointer; }
.appbar-btn:hover { color: var(--ink); }
.appbar-btn:active { background: var(--bg-mute); }
.appbar-btn .ic { width: 22px; height: 22px; }
.appbar-back .ic { width: 28px; height: 28px; }
.appbar-btn.copied { color: var(--green-deep); }
.appbar .lang { margin-right: 8px; }
.appbar-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--green); transform: scaleX(0); transform-origin: 0 50%; }
/* ---------- 底部 tab bar ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: calc(var(--tabbar-h) + var(--safe-bottom)); padding: 0 env(safe-area-inset-right, 0px) var(--safe-bottom) env(safe-area-inset-left, 0px); background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-top: 1px solid var(--line); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; color: var(--ink-3); font-size: .6875rem; font-weight: 800; line-height: 1.2; text-decoration: none; }
.tab:hover { color: var(--ink-3); }
.tab-ic { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; transition: background-color .2s; }
.tab .ic { width: 22px; height: 22px; }
.tab:active .tab-ic { background: var(--bg-mute); }
.tab[aria-current] { color: var(--green-ink); }
.tab[aria-current] .tab-ic { background: var(--green-tint); }
.tab[aria-current] .ic { stroke-width: 2.3; }
/* ---------- 底部抽屉（