/* 张掖美食地图 · 平台样式 V4.6
   结构：菜品（文化IP层）→ 门店（地图点位层）双层架构
   设计口径：沙色底 / 火色主调 / 墨色字；顶栏深赭橘（V4.5 由正红 #0F6E56 改来）

   ⚠⚠⚠ V4.6 修复：:root 整块丢失 —— 全站配色失效（本轮最严重的问题）
   事故经过：某个版本的 app.css 从中间被截断，文件开头只剩半句话
   「flow-x:hidden; overflow-y:auto}」——这段本身就是证据：
   说明是从注释中间被切开的，前面还有内容。
   后果：--sand/--fire/--ink/--line 等 20 个颜色变量全部为空，
   所有 var(--sand) 解析失败 → 属性回退初始值 →
   背景全变透明（body / 抽屉 / 整屏二级页 / 场景条实测全是 rgba(0,0,0,0)），
   页面靠浏览器默认白底撑着，橘色主调只剩硬编码的那几处还在。

   怎么发现的：截图里景区页顶部叠着主页面的橘色县区条，
   逐层排查后确认 —— 不是 z-index（把 pageSpot 提到 z=999 像素级无变化），
   而是景区页容器本身透明，压根盖不住底下的主页面。

   这条是"验证器比 bug 更该怀疑"的又一例：
   元素"有没有尺寸"和"看起来在不在"是两回事，
   透明元素的 rect 完全正常，getBoundingClientRect 量不出来，
   必须看 computed backgroundColor 或直接看截图。

   ⚠ 教训：改 app.css 时不要整段覆盖写入 —— 会把文件头连同 :root 一起吃掉。
     要改就 Edit 精确替换，保留文件首部。 */

:root{
  /* 墨色：文字层级 */
  --ink:#2A2118; --ink2:#5A4B3A; --ink3:#6E5D48;
  /* 沙色：底色层级 */
  --sand:#FAF6EE; --sand2:#F2EADC; --line:#7FB89B; --line2:#A8CDBA;
  /* 火色：V6.0 政务红系（2026-11-03 全站换色）
     主色 #0F6E56 对纯白对比 5.95（AA 达标）；与既有 --gold 金、
     --sand 米白构成「政务红+金+米白」体系，与其他平台视觉统一。
     历史口径：V4.5 深赭橘 #B5502A → V6.0 政务红 #0F6E56。
     ⚠ 全站硬编码橙红已同步映射：C8452C/B5502A→B8322A、
       8E3B2E/8A3A16/8E3D1F→7E211B、E0703F→CC4638、
       FFF0DC→FBE9E6（浅红底）等，后续改色请沿用同族色值。 */
  --fire:#0F6E56; --fire2:#1B8A6B; --fire-d:#0A4A3A;
  /* 金：勋章/评分 */
  --gold:#D9A441; --gold2:#F0CE86;
  /* 绿：营业中/健康提示 */
  --green:#3B6D11; --greenbg:#F2F8EC;
  /* 警示：券码核销相关 */
  --warn:#C08A2E;
  --appetite:#D96C2C; --appetite-d:#A84E14;
  /* V5.4 官方认证类目配色兜底（实际值由 JS 按 CERT_CATS 内联覆盖为 --cgc/--cgb）。
     这里给中性默认，保证 var() 解析失败时不会静默透明/变黑。 */
  --cgc:#5F5E5A; --cgb:#F1EFE8;
  /* 高度变量：--h-tab 有静态值；--h-county 由 app.js 实测后写进 inline style。
     ⚠⚠ V4.7：这里删掉了 --h-scenes 与 --h-tag 两个变量的定义。
       它们原本是给「场景条 / 标签面板 / 品类条」三级吸顶用的
       （各自作为下一级 sticky top 的累加项），而吸顶链本轮已收敛为
       countybar → scenes 两级 —— 只剩 .scenes 的 top 需要 --h-county，
       后两级的 top 全部随元素一起下线了。
       ⚠ 保留定义会埋雷：--h-tag:43px 看着像"还有个第四级在用"，
         下次改样式时极可能照着它去对数字。删掉才算把这条链真正收敛。
       ⚠ 兜底值同步检查过：--h-scenes 的旧兜底 97px 是"两行时代"的值，
         若留着而 app.js 又没跑（例如脚本报错），.scenes 的 top 仍会取
         --h-county(93px) 的兜底，与 --h-scenes 无关，故删除安全。 */
  --h-top:52px; --h-tab:58px;
  --h-county:93px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* ⚠ html,body 必须显式给背景 —— 上面 :root 的 --sand 只在 html 上生效，
   但整屏二级页（.pagespot 等）是 fixed 容器，需要自己的 background 才盖得住主页面。 */
html,body{background:var(--sand);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:15px;line-height:1.6}
/* ⚠ 这里【只能挂 html】，不能挂 body —— body 上任何一个 overflow 非 visible，
   都会让 body 升级为滚动容器；而 body 没有 height、其高度=内容高度，
   于是永远不产生滚动条，sticky 元素（countybar/scenes/cats）就定位到
   一个"永不滚动的容器"上，吸顶彻底失效（实测滚 600px 后 countybar top=-479）。
   同一批文件里 body 挂 overflow-x:hidden 也是错的：overflow-x 非 visible 时
   overflow-y 会被计算成 auto，同样触发上面的问题。 */
html{overflow-x:hidden}
body{padding-bottom:var(--h-tab)}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}

/* ---------- 顶栏 ----------
   V3.4 改色：顶部原先是「此刻」条 + 县区条共 167px 的近黑棕色
   （--ink #2A2118），在整页橘红体系里显得沉重且割裂。
   改为与 --fire 同族的正红 #0F6E56。

   V4.2 再改色（用户反馈「红色不舒服」）：正红 #0F6E56 的问题不是难看，
   是【大面积高饱和红铺满 167px 视觉压迫强】，且与页面沙色底 #FAF6EE
   形成冷暖对撞（色相 3deg vs 40deg），整页看着打架。
   实测结论——把红往橘调（提亮）这条路走不通：
     #C85A2A 类提亮到 4.2-4.6，白字直接跌破 AA；#BE5A2E 只有 4.48 FAIL。
   橘色本身亮度高，一提亮就飘。故改为【深赭橘】：色相 3deg → 16deg，
   饱和 77% 保持不变，亮度压低换柔和感，同时向沙色底色相靠拢消除对撞。
   取色逻辑：色相落在 16-20deg（红与橘的过渡带），是「食欲暖色」但不过饱和。
   实测 #0F6E56 对纯白 5.07（AA 达标）、县区小字白 85% 复合 4.15+ 达标。 */
/* V6.6 顶栏丹霞背景：张掖七彩丹霞航拍（平台图床直链，1536×1024 JPEG）。
   米白渐变从左到右由浓到淡 —— 品牌文字区 nearly 实底保可读，
   右侧透出丹霞彩丘；文字加白描边阴影再兜一层底。 */
/* V6.15 秀色可餐整改：丹霞图被 92% 白遮罩盖没 = 素。换暖光美食拼桌图 + 深暖遮罩，
   白字压左深区（对比度由遮罩保证），右侧渐透露食物——「馋」在右，「字」在左。 */
.topbar{background:linear-gradient(100deg,rgba(46,22,6,.82) 0%,rgba(46,22,6,.5) 50%,rgba(46,22,6,.12) 100%),url("https://workbuddy-space-static.codebuddy.work/image/0RZ4DghufcJ4qFsd2VxCtw.jpg") center 45%/cover no-repeat;
  border-bottom:1px solid #3E2A14;padding:15px 14px 18px;
  padding-top:calc(15px + env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:9px}
.logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#E08A2A,#D96C2C);color:#fff;border:1.5px solid rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;flex:0 0 30px}
.bt{font-size:16px;font-weight:800;letter-spacing:.02em;color:#FFF7EC;
  text-shadow:0 1px 4px rgba(20,8,0,.55),0 0 12px rgba(20,8,0,.35)}
.bs{font-size:11px;color:#FFE3C2;letter-spacing:.06em;
  text-shadow:0 1px 3px rgba(20,8,0,.6)}
/* 此刻条：用上浅下深的赭橘渐变，替代原来的纯色块。
   纯色大色块在 167px 顶栏里显硬，渐变的下压深边相当于自然阴影，
   白字始终落在浅端 #0F6E56（4.63 AA）之上，不随渐变走到深端读不清。 */
/* ⚠⚠ V4.8：margin-top 9 → 7px、内边距 9px 12px → 8px 12px，
   顶栏整体省 4px。这是为场景条涨回 97px 找空间的最后一刀 ——
   360 档实测缺 10px，地图与菜品卡收完后仍差，只能从这里补。
   为什么敢动这里：顶栏是"环境提示"（此刻是几点、推荐几道），
   不是操作区；它下面紧挨的 .countybar 才是用户真正要点的那一条。
   4px 的留白差异在视觉上不可辨，但对 780px 的小屏就是门店列表能否露头。 */
/* V6.2 浅色化：此刻条由深绿渐变改为浅绿底 + 绿描边 ——
   大面积深色块退场，绿色只出现在边框与徽标，整屏以米白浅色为主。 */
/* V6.15b 佳佳反馈：此刻框在美食 hero 上是"一大块浅绿"不协调。
   改暖色毛玻璃：半透明底 + blur，框变轻变大去——内容浮在图上而非挡住图。 */
.now{margin-top:8px;background:rgba(46,22,6,.34);border:1px solid rgba(255,224,190,.38);
  color:#FFF3E4;border-radius:10px;padding:5px 11px;
  display:flex;align-items:center;gap:10px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* 顶栏赭橘底后，时刻徽标改用浅色底 + 深橘字，保证在暖底上仍够跳且不刺眼
   （#E3F1EA 底 + #0A4A3A 字 = 6.95，远超 AA）。
   左侧 3px 色条承载时段语义色（app.js 只写 borderLeftColor）——
   徽标不再被内联整块刷色，歇一歇的灰蓝不会在暖底上显脏。 */
.nowt{font-size:13px;font-weight:800;flex:0 0 auto;padding:2.5px 9px;border-radius:6px;
  background:rgba(255,247,236,.94);color:#7A3A0E;border:1px solid rgba(255,255,255,.5);border-left:3px solid var(--appetite);box-sizing:border-box}
/* ⚠⚠ V4.7：文案必须限 2 行 —— 360px 窄屏实测顶栏被撑到 165px（比 390px 档高 19px）。
   原因是 #nowTip 的文案 = 场景描述 + "　此刻推荐 N 道。"，
   长描述（如「黄河水灌溉的绿洲农业，面食与羊肉最见功夫。」）在 360px 下要折 3 行，
   每多一行顶栏就长 ~19px，而顶栏涨高的代价是首屏整体下移 ——
   小屏本来就最缺纵向空间，这块不能成为变量。
   用 -webkit-line-clamp 硬限 2 行（配合 display:-webkit-box），
   超出的部分省略号收尾。⚠ 同时 JS 侧已把文案精简短句化（见 renderNow），
   两层保障：JS 保证常见情况本就 2 行内，CSS 保证异常长的描述不失控。 */
.nowr{font-size:12px;line-height:1.5;color:rgba(255,243,228,.94);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;min-width:0;flex:1 1 auto}

/* ---------- 定位切换条：县区下拉 + 自动定位（V6.1） ---------- */
/* V6.2 浅色化：定位条由深绿实底改为米白底 + 绿描边 ——
   绿色只承担「边框 / 图标 / 强调字」角色，大面回归浅色。
   吸顶链不变：.scenes 的 top 仍读 --h-county（app.js 实测回写，自动适应）。 */
.countybar{position:sticky;top:0;z-index:46;background:#FDFBF5;
  border-bottom:1px solid #7FB89B;padding-top:env(safe-area-inset-top);
  box-shadow:0 1px 4px rgba(10,74,58,.06)}
.cbar-wrap{position:relative}
.cbar-loc{display:flex;align-items:center;gap:8px;padding:7px 12px 7px;color:#0F6E56}
.cbar-loc .pin{flex:0 0 auto;opacity:.92}
/* 下拉选择器：白底 + 绿描边 + 绿字，自绘绿色 V 形箭头（内联 SVG data URI，无外链）。
   option 文字色显式回深色 —— 部分安卓 webview 会继承前景色。 */
.csel{flex:1 1 auto;min-width:0;appearance:none;-webkit-appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230F6E56' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center/10px 7px;
  color:#0A4A3A;border:1.5px solid #6FAE8D;border-radius:9px;
  padding:6px 28px 6px 11px;font-size:13.5px;font-weight:700;line-height:1.3}
.csel:focus{outline:none;border-color:#0F6E56}
.csel option{color:#2A2118;background:#fff;font-weight:600}
.csel optgroup{color:#0F6E56;font-weight:700}
/* 定位按钮：白底绿描边，与下拉同一套轻语言 */
.cgeo{flex:0 0 auto;display:flex;align-items:center;gap:4px;
  background:#fff;color:#0F6E56;border:1.5px solid #6FAE8D;
  border-radius:9px;padding:6px 11px;font-size:12.5px;font-weight:600;transition:.16s}
.cgeo:active{background:#E3F1EA}
/* 县区说明条：浅绿底 + 深绿字，作为定位条的弱化延伸 */
.cbar-info{background:#E9F4EE;color:#3D5A4C;font-size:11.5px;padding:5px 16px 6px;
  line-height:1.5;display:flex;gap:7px;align-items:baseline}
.cbar-info b{color:#0A4A3A;font-weight:700;flex:0 0 auto}
.cbar-info span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 一级：用餐场景 ---------- */
/* 一级场景导航条：手机侧【3 列 × 2 排网格】（V4.8 由单行横滚改回）
   这一栏的改法前后翻过三次，每次的取舍不同，一并记下：

   · V4.1 横滚 → 网格：理由是"6 个 tab 单排需 636px，横滚会把
     「小吃街区」藏在屏幕外，用户根本不知道它存在"。
     改为 3 列 × 2 排，每格约 113px（390px 档），6 个入口一屏看全。
   · V4.7 网格 → 单行横滚：前提变了 —— 顶部还压着一条 .countybar（也带横滚），
     两排实测占 97px、吃掉首屏 12%，首屏主角（地图与菜品横排）被挤到 336px 后。
     靠【右侧同色渐隐】+【完整露出前 4 个场景】化解"藏内容"风险，省 43px。
   · ⚠⚠ V4.8 单行 → 回到两排网格：用户看截图后明确要求「早餐那行导航条排成两行」。
     这与用户在 V4.1 时期的原始偏好（「按照手机舒服的排列导航条试试两排」）
     一致 —— 对本平台的 6 个场景来说，「一眼看全 6 个入口」的价值
     高于省下的 43px：横滚把「非遗美食」「小吃街区」两个入口藏到屏外，
     而这两个恰恰是游客最需要被告知的。
     两排实际占 97px，门店列表由 y=738 退到 y≈781（390×844 档仍 < 786 可用高），
     仍在首屏内但已接近临界 —— 这是本版刻意接受的代价。

   ⚠ 两端布局现在【同构】（都是 grid），PC 断点不再需要"改回 grid"的覆写；
     但下方 900 断点仍保留显式 display:grid —— 显式声明比隐式继承更抗改。

   配色：统一橘红系，不给 6 个 tab 各用一种色相。
   实测同色相下「6 阶全过 AA 白字」与「两两可区分」不可兼得，故靠文字而非色相区分。 */
/* top 由 app.js 实测 .countybar 高度后写进 --h-county（默认 93px 是 390px 档实测值）。
   ⚠ 不能写 0 也不能写 --h-top：countybar 才是 scenes 真正要躲开的那一块。 */
.scenes{position:sticky;top:var(--h-county, 93px);z-index:42;background:var(--sand);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px 12px;
  border-bottom:1px solid var(--line)}
/* ⚠⚠⚠ V4.8 已删除两处 V4.7 遗留（两排不需要它们，留着反而是隐患）：
   ① .scenes 的 overflow-x:auto / overflow-y:hidden / scrollbar-width:none
      / -webkit-overflow-scrolling / scroll-behavior —— grid 两排不横滚，
        留着会让"万一某断点列数算多了"变成静默横滚而不是溢出错位。
   ② @media (max-width:899px) 里的 .scenes::after 右侧渐隐 ——
        两排铺满，不存在"右边还有内容"，渐隐反而让最后一列看着被切角。
   ⚠ 若将来又改回单行横滚，这两块必须一起加回来，缺一不可：
      缺① → 溢出撑破版面；缺② → 用户不知道右边还有东西。 */
/* 未选中：浅橘底 + 深橘字。安静、连续，横向排开是一整条暖色带。
   ⚠ V4.8 起两端都是 grid 子项，宽度由列宽决定，不需要任何 flex 尺寸约束。
     手机侧 3 列 ≈ 113px/格（390px 档），四字场景名「宴席大餐」完全放得下
     （V4.7 单行横滚时代曾用 flex:0 0 auto 让它自然撑开；
      更早还写过 width:84px，实测四字场景被 ellipsis 截断 —— 那段教训见 git 历史）。
   ⚠ .tx 的 ellipsis 保留 —— 它是"万一某断点列数算多"时的兜底，
     而不是主用形态：两端每格实测都 ≥110px（手机）/≥148px（PC）。 */
.sc{padding:7px 6px;border-radius:9px;border:1px solid #7FB89B;
  background:#fff;color:#0A4A3A;font-size:13px;transition:.15s;
  display:flex;align-items:center;justify-content:center;gap:4px;
  min-width:0;text-align:center;white-space:nowrap;overflow:hidden}
.sc .i{width:6px;height:6px;border-radius:50%;flex:0 0 6px}
.sc .tx{overflow:hidden;text-overflow:ellipsis}
.sc small{opacity:.65;font-size:10.5px;font-variant-numeric:tabular-nums}
.sc:active{transform:scale(.97)}
/* 选中：V6.2 改为「绿描边 + 白底 + 深绿字」——不再整块刷实色。
   场景语义色只留在边框与小圆点上（renderScenes 内联 border-color）。 */
.sc.on{color:#0A4A3A;font-weight:700;border-color:#0F6E56;box-shadow:0 1px 5px rgba(15,110,86,.16)}

/* ---------- 标签筛选面板 ----------
   ⚠⚠⚠ sticky 链的 top 改用 CSS 变量，且由 app.js 【运行时实测回写】。
   起因是一个被硬编码值掩盖了三个月的老 bug：

   原来三个 top 是写死的魔数（.scenes top:78px / .tagpanel top:175px /
   .cats top:218px），注释里标着"实测值 顶栏 --h-top = 78px"。
   但 78px 是【顶栏】的高度，而 .scenes 真正要躲开的是它上面那块
   .countybar —— 后者实测 93px（县区按钮行 + 县区说明条）。
   差 15px，滚动时场景条会插进县区条里。

   为什么一直没被发现：html,body 上的 overflow-x:hidden 让 body 成了
   滚动容器（overflow-y 被计算成 auto），sticky 全部相对一个
   "永不滚动"的容器定位 —— 也就是说【吸顶从来没生效过】，
   三块一起随内容滚走，视觉上像是"整体上移"，看不出边界错位。
   V4.5 修了 overflow 之后，这个被掩盖的 15px 误差立刻显形。

   现在 app.js 的 syncStickyOffsets() 在启动与 resize 时实测各块高度，
   写进 --h-county 这一个变量（V4.7 起只剩它），CSS 这里只消费变量。
   改导航条样式时不再需要同步改任何 top 值。

   ⚠ V4.7：原文写的是"写进 --h-county / --h-scenes / --h-tag 这几个变量"，
     后两个已随各自的消费端（.tagpanel / .cats 的 sticky top）一起删除，
     这里同步订正，避免读者以为还有三个变量在联动。 */
/* ⚠⚠ V4.7 已下线：标签筛选面板 + 菜品品类条两块的 CSS 已移除。
   原来的吸顶链是四级 —— countybar(46) → scenes(42) → tagpanel(41) → cats(40)，
   现在收敛为两级 —— countybar(46) → scenes(42)。
   两条一并去掉的理由（版面层面）：
     · 标签筛选：15 个标签铺在首屏，决策成本高于收益，且与场景选择是两套并行心智
     · 菜品品类：第一个按钮「全部」+ 6 个品类，但场景本身已在做品类分流，
       两行并列会出现"先选场景又选品类"的重复动作
   保留的能力：state.cat / state.tags 的多维叠加筛选逻辑仍在 app.js 的
   curDishes 里生效，只是不再有 UI 入口。恢复方式见 index.html 的对应注释。
   （验证入口：window.__ZY_PROBE__.filterBy()，见 app.js 收尾处的能力探针） */

/* ---------- 三级：菜品横卡 ---------- */
/* ⚠⚠ V4.8 压缩：卡片由 153px 收到 137px（每张省 16px），横排块 177 → 161px。
   这是为场景条涨回 97px（两排）腾空间的一部分，压的都是"可读但不必宽"的留白：
     · .dcard padding 11px → 9px（上下各省 2px）
     · .dc 行高 1.55 → 1.45（两行 36 → 34px）——文字仍清晰，
       11.5px 字号 ×1.45 = 16.7px 行高，高于 14px 的可读下限
     · .df margin-top 7 → 6px、padding-top 7 → 6px（省 2px）
     · .dmini margin-top 7 → 6px（省 1px）
   ⚠ 没有压缩的：h4 菜品名（15px 是标题，不能再小）、.dp 价格
     （¥ 价格是决策关键信息）、.dc 的两行上限（一行放不下"产地"信息）。
     一句话：压的是"呼吸感"，不压"信息量"。 */
.dishrow{display:flex;gap:9px;overflow-x:auto;padding:10px 14px 11px;
  scroll-snap-type:x proximity;scrollbar-width:none;border-bottom:1px solid var(--line2)}
.dishrow::-webkit-scrollbar{display:none}
.dcard{flex:0 0 158px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:9px 12px;cursor:pointer;transition:.15s;position:relative;overflow:hidden}
.dcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line)}
.dcard:active{transform:scale(.98)}
/* V6.15 食欲顶带：菜品卡顶部 3px 暖橙渐变，横滚一排时形成一条「菜流」暖线 */
.dcard::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#E08A2A,#D96C2C 55%,rgba(217,108,44,0))}
.dcard h4{font-size:15px;font-weight:700;margin-bottom:3px;letter-spacing:.01em}
.dcard .dp{font-size:11.5px;color:var(--fire);font-weight:700;margin-bottom:4px}
.dcard .dc{font-size:11.5px;color:var(--ink3);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dcard .df{display:flex;align-items:center;gap:5px;margin-top:6px;padding-top:6px;
  border-top:1px dashed var(--line2)}
.dcard .df .n{font-size:10.5px;color:var(--ink3);flex:1}
.dcard .df .go{font-size:10.5px;color:var(--fire);font-weight:700}
.dmini{display:flex;gap:3px;flex-wrap:wrap}
.dmini span{width:16px;height:4px;border-radius:2px}
.coupon-ok{background:var(--greenbg)!important;color:var(--green)!important}

/* ---------- 地图 ---------- */
/* ⚠⚠ V4.7：高度由 38vh / min 230px 收到 34vh / min 200px。
   实测 390×844 上原为 321px（38vh=320.7），几乎与整屏的 38% 齐平，
   而首屏真正的任务是"让人一眼看到有什么吃的 + 地图提示在哪"，
   地图占到 38% 是喧宾夺主。收到 34vh 后在 390 档是 287px，
   385px 的差值（321-287=34px）让门店列表的首张卡露出小半个标题 ——
   这一条"露出下一块"的暗示比"地图更大"更重要，它告诉用户"下面还有"。

   ⚠⚠ V4.8：再收到 31.5vh / min 190px —— 因为场景条按用户要求由 54px
     涨回 97px（两排），首屏被吃掉 43px，必须从别处找回来。
     实测三档取舍（390×844 / 430×932 / 360×780）：
       · 390 档：34vh=287 → 31.5vh=266，省 21px。门店列表 y 781 → 738（< 786 ✓）
       · 430 档：34vh=317 → 31.5vh=294，省 23px
       · 360 档：34vh=265 → 31.5vh=246，省 19px。门店列表 y 759 → 718（< 722 ✓）
     ⚠ 为什么是 31.5 而不是 32：360 档实测 32vh = 249.6px，
       加上上面各块正好把 .list 顶到 722.0 = 可用高【恰好相等】，
       而断言要求严格小于（listTop < h-58）。差 0px 就是这个断点红的原因。
       31.5vh = 245.7px，留出 4px 余量。
       —— 教训：断点临界值不要用"刚好够"的整数，要留 2-4px 抗字体/DPR 波动。
     ⚠ 为什么不再往下收到 30vh：地图是"这一片在哪"的唯一视觉锚点，
       低于 30vh（360 档 234px）时示意图里的三个片区环挤在一起，
       反而看不出相对位置，功能就废了。
     配套的三处收口（都在本文件，同属这一轮"为两排找空间"）：
       · .dcard 153 → 137px（横排块 177 → 166px）
       · .now 上边距与内边距各收 2px（顶栏 128 → 124px）
       · .cbtn / .cbar-info / .list 的 padding 各收 2px（县区条 93 → 87px）
     四处合计省下 43px，正好抵消两排场景条涨回去的高度。 */
.mapwrap{position:relative;height:31.5vh;min-height:190px;background:var(--sand2);
  border-bottom:1px solid var(--line)}
#map{width:100%;height:100%}
/* ⚠ 降级卡的内边距从 48px 14px 14px 收到 14px：
   48px 是当年为了躲开 .mapwrap 顶部一条不存在的工具条加的，
   实际顶部没有东西可躲，白占了 34px 纵向空间。 */
.mapfallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--sand2);z-index:1;transition:opacity .4s;overflow-y:auto;padding:14px}
.mapfallback.hide{opacity:0;pointer-events:none}
.fb-inner{text-align:center;max-width:340px}
.fb-icon{width:26px;height:26px;margin:0 auto 8px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--fire);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fb-t{font-size:13px;color:var(--ink2);font-weight:600}
.fb-s{font-size:11.5px;color:var(--ink3);margin-top:3px}

/* 未接入 key 时：示意图作为底，指示卡浮在上面。区域可纵向滚动，
   保证小屏上 4 步指引不会被裁掉。 */
.mapph{position:absolute;inset:0;z-index:0;display:none;overflow:hidden;
  background:linear-gradient(165deg,#F7F1E4,#EFE6D3)}
.mapph.on{display:block}
.mapfallback{z-index:2;background:linear-gradient(180deg,rgba(247,241,228,.55),rgba(247,241,228,.9) 42%)}
.mapph .ph-title{position:absolute;left:12px;top:11px;font-size:11.5px;font-weight:700;
  color:var(--ink2);background:rgba(255,255,255,.86);border:1px solid var(--line);
  padding:3px 9px;border-radius:6px}
.mapph .ph-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line2) 1px,transparent 1px);
  background-size:34px 34px}
.mapph .ph-ring{position:absolute;left:var(--px);top:var(--py);transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;border:1.5px dashed var(--fire);
  background:rgba(15,110,86,.09);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px}
.mapph .ph-ring b{font-size:11px;font-weight:700;color:var(--fire);line-height:1.2;text-align:center}
.mapph .ph-ring i{font-style:normal;font-size:9.5px;color:var(--ink3)}
.mapph .ph-note{position:absolute;left:0;right:0;bottom:44px;text-align:center;
  font-size:10.5px;color:var(--ink3)}

/* ⚠⚠ V4.7：这一块整体压缩 + 4 步指引收进 <details> 折叠。
   原来铺开时实测占 ~186px（地图块总高仅 321px），
   首屏最大的方块里一多半在讲"怎么申请 key"而不是"张掖有什么吃的"。
   现在收起态只剩一行标题 + 一行"不受影响"说明，约 62px。 */
.fb-key{margin-top:9px;background:#fff;border:1px solid var(--line);border-radius:9px;
  padding:0 11px;text-align:left;max-width:300px;margin-left:auto;margin-right:auto;
  box-shadow:0 2px 8px rgba(42,33,24,.08)}
/* <details> 收起时 <summary> 就是那一行标题；
   ⚠ summary 必须 list-style:none + ::-webkit-details-marker{display:none}，
     否则 Chrome/Safari 会在左侧渲染一个原生三角，与自绘的 <i> 箭头重复。
   ⚠ summary 的 padding 要放在 summary 上而不是 .fb-key 上 ——
     展开后内容区也需要左右内边距，故 .fb-key 给 padding 0 11px 统一承载。 */
.fb-key summary{display:flex;align-items:center;gap:6px;justify-content:space-between;
  cursor:pointer;list-style:none;padding:9px 0}
.fb-key summary::-webkit-details-marker{display:none}
.fb-key summary b{font-size:11.5px;color:var(--fire);display:block;margin:0;flex:1 1 auto;
  text-align:left;line-height:1.4}
/* 自绘箭头：收起时朝下，展开时旋转 180°。
   ⚠ 用 transform 而不是换字符 ▾/▴ —— 字符在两个状态间会闪一下宽度差。 */
.fb-key summary i{font-style:normal;font-size:10px;color:var(--ink3);flex:0 0 auto;
  white-space:nowrap;transition:transform .2s}
.fb-key details[open] summary i{transform:rotate(180deg)}
/* 展开后的内容区：因为 summary 已占 9px 上边距，这里只需下边距。
   ⚠ .fb-key 的 padding:0 11px 意味着内容区左右已有 11px，
     而 summary 的 b/i 也吃同样的 11px，两者左边缘自动对齐。 */
.fb-key details[open]{padding-bottom:9px}
.fb-key ol{margin:0;padding-left:15px}
.fb-key li{font-size:10.5px;color:var(--ink2);line-height:1.7;white-space:nowrap}
.fb-key li:nth-child(3){white-space:normal}
.fb-key li b{color:var(--fire);font-weight:700;display:inline}
.fb-key a{color:var(--fire)}
.fb-key code{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--sand2);
  border-radius:3px;padding:0 4px;font-size:9.5px;word-break:break-all}
.fb-try{margin-top:6px;background:var(--greenbg);border-radius:6px;padding:5px 8px;
  font-size:10px;color:var(--green);line-height:1.55}
.fb-try code{background:#fff;color:var(--green);font-size:10px}
.fb-key>span{display:block;font-size:9.5px;color:var(--ink3);line-height:1.5;
  padding-bottom:8px}  /* ⚠ 原来有 border-top:1px dashed + margin-top:5px + padding-top:5px，
                          折叠态下这条虚线紧贴 summary，把"一行说明"切成了两块，故去掉 */
/* ⚠ 若未来 <details> 被换成普通 div（比如做自定义动画），上面这些
   summary/details 选择器会全部失效，卡片会突然"展开"—— 换的时候记得同步。 */

.mbtn{position:absolute;right:12px;bottom:12px;z-index:5;width:38px;height:38px;border-radius:9px;
  background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(42,33,24,.14)}
.mstat{position:absolute;left:12px;bottom:12px;z-index:5;background:rgba(255,255,255,.95);color:#2A2118;border:1px solid var(--line);
  font-size:11.5px;padding:4px 9px;border-radius:6px;backdrop-filter:blur(4px)}
.mbtn-my{right:58px;position:relative}
.mbtn-my em{position:absolute;top:-5px;right:-5px;font-style:normal;background:var(--fire);color:#fff;
  font-size:9.5px;min-width:15px;height:15px;border-radius:8px;display:none;
  align-items:center;justify-content:center;padding:0 3px;font-weight:700}
.mbtn-my em.has{display:flex}

/* ---------- 门店列表 ---------- */
/* ⚠⚠ V4.8：padding 由 12px 14px 18px 收到 10px 14px 18px（上边省 2px）。
   这一条直接决定"门店列表"这条块的首行 y 坐标 ——
   verify-layoutopt 断言量的是 .list 的 getBoundingClientRect().y，
   即包含这块自己的 padding-top。360×780 档原本恰好卡在 722 = 阈值，
   收 2px 后有 2px 余量。视觉上"标题离上一块近了一点"，反而更像一体的分区。
   ⚠ 下边距 18px 不动 —— 那是滚动到底时与底导航之间的呼吸空间。 */
.list{padding:10px 14px 18px}
.lhead{display:flex;align-items:baseline;gap:8px;margin-bottom:9px;padding:0 2px}
.lhead b{font-size:15px;font-weight:800;position:relative;padding-left:10px}
.lhead b::before{content:"";position:absolute;left:0;top:2.5px;bottom:2.5px;width:4px;border-radius:2px;
  background:linear-gradient(180deg,#E08A2A,#D96C2C)}
.lhead span{font-size:11.5px;color:var(--ink3)}
.empty{text-align:center;padding:40px 20px;color:var(--ink3)}
.empty b{display:block;font-size:15px;color:var(--ink2);margin-bottom:6px}

.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 13px;
  margin-bottom:10px;cursor:pointer;transition:.15s;position:relative;overflow:hidden}
.card:active{transform:scale(.99)}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line)}
.card.z-QZ::before{background:#0F6E56}.card.z-SC::before{background:#C98A2E}
.card.z-OS::before{background:#0A4A3A}.card.z-XQ::before{background:#7A8B5A}
.ct{display:flex;align-items:baseline;gap:7px;margin-bottom:5px;flex-wrap:wrap}
.ct h3{font-size:15.5px;font-weight:700;letter-spacing:.01em}
.badge{font-size:10.5px;padding:1.5px 6px;border-radius:4px;color:#fff;font-weight:600;flex:0 0 auto}
.vv{font-size:10.5px;padding:1.5px 5px;border-radius:4px;border:1px solid var(--line);
  color:var(--ink3);font-weight:600;flex:0 0 auto}
.vv.v2{color:var(--green);border-color:#BFD8A8;background:var(--greenbg)}
.cmeta{font-size:12px;color:var(--ink3);display:flex;flex-wrap:wrap;gap:3px 10px;margin-bottom:6px}
.cmeta em{font-style:normal}
.cmeta em.cprice{color:var(--appetite-d);font-weight:700}
.ctags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.ctag{font-size:10.5px;padding:1.5px 6px;border-radius:4px;border:1px solid transparent}
.cdishes{font-size:12px;color:var(--ink2);margin-bottom:5px;display:flex;flex-wrap:wrap;gap:4px}
.cdishes b{color:var(--fire);font-weight:600}
.cfoot{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;
  border-top:1px dashed var(--line2)}
.cgo{font-size:11.5px;color:var(--appetite-d);font-weight:700;margin-left:auto}
/* V6.3 导航前往是 <a>：去掉链接默认样式，视觉与其他卡脚一致 */
.cfoot a.cgo{text-decoration:none;color:var(--appetite-d)}
.cfoot a.cgo:active{opacity:.7}

/* ---------- 抽屉 ---------- */
.mask{position:fixed;inset:0;background:rgba(42,33,24,.45);z-index:60;opacity:0;
  pointer-events:none;transition:.25s;backdrop-filter:blur(2px)}
.mask.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--sand);
  border-radius:16px 16px 0 0;max-height:84vh;overflow-y:auto;
  transform:translateY(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:0 -4px 24px rgba(42,33,24,.2);padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.sheet.on{transform:translateY(0)}
.dh{position:sticky;top:0;z-index:2;background:var(--sand);border-bottom:1px solid var(--line);
  padding:13px 16px;display:flex;align-items:center;gap:10px}
.dt{font-size:12px;font-weight:700;color:#fff;background:var(--fire);padding:3px 9px;border-radius:5px}
.dx{margin-left:auto;width:30px;height:30px;border-radius:50%;background:var(--sand2);
  color:var(--ink2);font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center}
.db{padding:16px}
.dh2{font-size:21px;font-weight:800;margin-bottom:5px;line-height:1.25}
.dsub{font-size:12.5px;color:var(--ink3);margin-bottom:11px}
.dmeta{display:flex;flex-wrap:wrap;gap:5px 8px;margin-bottom:13px}
.dmeta span{font-size:11.5px;background:#fff;border:1px solid var(--line);
  border-radius:5px;padding:2.5px 7px;color:var(--ink2)}
.sec{margin-bottom:15px}
.sec-t{font-size:12px;font-weight:700;color:var(--fire);margin-bottom:6px;
  display:flex;align-items:center;gap:6px}
.sec-t::after{content:"";flex:1;height:1px;background:var(--line2)}
.sec p{margin:0;font-size:14px;line-height:1.75;color:var(--ink2)}
.tagrow{display:flex;flex-wrap:wrap;gap:5px}
.tg-pill{font-size:11.5px;padding:2.5px 8px;border-radius:999px;color:#fff;font-weight:600}
.culture{background:#FBF6EA;border-left:3px solid var(--gold);border-radius:0 8px 8px 0;
  padding:11px 13px;font-size:13.5px;line-height:1.8;color:var(--ink2)}
.dishes{display:flex;flex-wrap:wrap;gap:6px}
.slots{display:flex;flex-direction:column;gap:7px}
.slotrow{background:var(--sand2);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.sh{font-size:13.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;
  gap:6px;flex-wrap:wrap}
.sh em{font-style:normal;font-size:11.5px;font-weight:400;color:var(--ink3)}
.sh .dt{width:8px;height:8px;border-radius:50%;flex:none}
.slotrow .st{font-size:12.5px;line-height:1.7;color:var(--ink2);margin-top:3px;padding-left:14px}
.dish{background:var(--sand2);border-radius:6px;padding:5px 10px;font-size:13px;
  font-weight:600;color:var(--ink2);cursor:pointer}
.dish:active{background:var(--line2)}
.scriptbox{background:#FFFDF8;border:1px dashed var(--line);border-radius:9px;padding:12px 13px}
.scriptbox .sl{font-size:12px;font-weight:700;color:var(--ink);margin:9px 0 3px;
  display:flex;align-items:center;gap:6px}
.scriptbox .sl:first-child{margin-top:0}
.scriptbox .sl::before{content:"";width:3px;height:12px;background:var(--fire);border-radius:2px}
.scriptbox .sv{font-size:12.5px;line-height:1.7;color:var(--ink2);padding-left:9px}

/* ---------- 菜品图片区（V3.3 新增） ----------
   图放详情抽屉顶部而非窄卡片内：卡片宽仅 158px，塞图会挤到看不清菜名。
   占位块做成「明确告知缺图 + 给出文件名规则」，采集组照着做就行。 */
.dhero{width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
  margin-bottom:12px;background:var(--sand2);border:1px solid var(--line)}
.dhero img{width:100%;height:100%;object-fit:cover;display:block}
.dimgsrc{margin:-6px 0 12px;font-size:11px;line-height:1.5;color:#8A7A6C;letter-spacing:.2px}
.dhero-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:16px 18px;gap:5px;
  border-style:dashed;border-color:var(--line);background:#FBF6EC}
/* 占位图标：用 CSS 画一个相机轮廓，避免 emoji 各机型渲染不一致 */
.ph-ico{width:30px;height:22px;border:2px solid var(--line);border-radius:4px;
  position:relative;margin-bottom:2px}
.ph-ico::before{content:"";position:absolute;left:8px;top:-6px;width:10px;height:6px;
  border:2px solid var(--line);border-bottom:none;border-radius:2px 2px 0 0}
.ph-ico::after{content:"";position:absolute;left:10px;top:4px;width:6px;height:6px;
  border:2px solid var(--line);border-radius:50%}
.ph-t{font-size:13px;font-weight:700;color:var(--ink2)}
.ph-s{font-size:11.5px;color:var(--ink3);line-height:1.65}

/* ---------- 分镜时间轴（V3.3 新增） ----------
   把已有 shots 的「时间区间 + 画面描述」拆成可读的两栏，
   让商家/短视频团队照着拍，而不是读一串文字。 */
.sc-why{font-size:10.5px;font-weight:500;color:var(--ink3);margin-left:6px;
  letter-spacing:0;vertical-align:1px}
.scriptbox .sv-hook{color:var(--fire);font-weight:500}
.scriptbox .sv-vo{color:var(--ink);font-weight:500}
.scriptbox .sv-sub{color:var(--green);font-weight:500}
.timeline{display:flex;flex-direction:column;gap:8px;padding-left:9px}
.tl-row{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center}
.tl-seg{display:flex;align-items:center;gap:5px;white-space:nowrap}
.tl-dot{width:7px;height:7px;border-radius:50%;background:var(--fire);flex:0 0 7px}
.tl-t{font-size:11px;font-weight:700;color:var(--fire);
  font-variant-numeric:tabular-nums}
.tl-bar{height:4px;background:var(--line2);border-radius:3px;overflow:hidden}
.tl-bar i{display:block;height:100%;background:var(--gold);border-radius:3px}
/* 画面描述占满整行，避免与时间轴挤在一行导致长文案折行错位 */
.tl-d{grid-column:1 / -1;font-size:12.5px;line-height:1.65;color:var(--ink2);
  padding-left:15px}
.shotlist{padding-left:9px;font-size:12.5px;line-height:1.8;color:var(--ink2)}
.warnbox{background:#EAF4EE;border:1px solid #EFC4BA;border-radius:9px;padding:10px 12px;
  font-size:12px;line-height:1.7;color:var(--ink2)}
.tipsbox{background:#FFF8EC;border:1px solid var(--gold2);border-radius:9px;padding:10px 12px;
  font-size:13px;line-height:1.7;color:var(--ink2)}
.dact{display:flex;gap:8px;margin-top:8px}
.dact button,.dact a{flex:1;padding:11px;border-radius:9px;font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.b-nav{background:#E3F1EA;color:#0A4A3A;border:1px solid #6FAE8D}
.b-copy{background:#fff;border:1px solid var(--line);color:var(--ink2)}
.b-coupon{background:var(--greenbg);color:var(--green);border:1px solid #BFD8A8}
.b-coupon.used{background:#F0EDE6;color:var(--ink3);border-color:var(--line)}
.dsrc{font-size:11.5px;color:var(--ink3);line-height:1.7;margin-top:14px;
  padding-top:12px;border-top:1px dashed var(--line2)}

/* ---------- 街区电话聚合（V3.3 新增） ---------- */
.sttel{background:var(--greenbg);color:var(--green)}
.sttel.none{background:var(--sand2);color:var(--ink3)}
.stteli{font-weight:400;margin-left:3px;color:var(--green);font-size:11px}

/* ---------- 电话块（V3.3新增） ----------
   电话核验与地址核验是两条独立线，故 P 级标签与 V 级视觉要能区分开。 */
.phonebox{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.phone-none{color:var(--ink3);font-size:13px}
.b-tel{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  padding:9px 14px 9px 12px;border-radius:9px;
  background:var(--greenbg);border:1px solid #BFD8A8}
.b-tel:active{background:#E4F0D8}
/* 不用 emoji 图标，用 CSS 画听筒，避免不同机型 emoji 渲染不一致 */
.b-tel .tic{width:15px;height:15px;flex:0 0 15px;border-radius:50%;
  background:var(--green);position:relative}
.b-tel .tic::after{content:"";position:absolute;left:4px;top:4px;width:7px;height:7px;
  border-radius:50%;background:var(--greenbg)}
.b-tel .tnum{color:var(--green);font-size:15px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ph-tip{font-size:11.5px;color:var(--ink3)}
.pv-tag{font-size:10.5px;font-weight:500;padding:1.5px 6px;border-radius:20px;
  margin-left:6px;vertical-align:1px;letter-spacing:0}
.pv-P1{background:#FDF0E4;color:#0A4A3A;border:1px solid #7FB89B}
.pv-P2{background:#F2F8EC;color:var(--green);border:1px solid #BFD8A8}
.pv-P3{background:var(--fire);color:#fff;border:1px solid transparent}
.ph-note{font-size:12px;color:#0A4A3A;background:#FDF0E4;border:1px solid #7FB89B;
  border-radius:8px;padding:8px 10px;margin-top:8px;line-height:1.65}
/* 来源URL可长到撑破窄屏，强制换行并允许断词 */
.ph-src{font-size:11px;color:var(--ink3);line-height:1.6;margin-top:7px;
  word-break:break-all;opacity:.85}

/* 承接门店小卡 */
.slist{display:flex;flex-direction:column;gap:8px}
.sitem{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 11px;
  cursor:pointer;transition:.15s}
.sitem:active{background:var(--sand2)}
.sitem .sh{font-size:14.5px;font-weight:700;margin-bottom:4px;display:flex;align-items:baseline;gap:6px}
.sitem .sh em{font-style:normal;font-size:11px;font-weight:600;color:var(--ink3)}
.sitem .sm{font-size:11.5px;color:var(--ink3);line-height:1.6}
.sitem .sd{font-size:12px;color:var(--ink2);margin-top:4px}

/* ---------- 底部导航 ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;
  background:rgba(255,253,248,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);height:var(--h-tab);padding-bottom:env(safe-area-inset-top)}
.tb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:10.5px;color:var(--ink3);position:relative}
.tb i{width:19px;height:19px;border:1.8px solid currentColor;border-radius:5px;position:relative;transition:.15s}
.tb.on{color:var(--fire);font-weight:700}
.tb.on i{background:currentColor;border-color:currentColor}
.tb.on i::after{content:"";position:absolute;inset:3.5px;background:var(--sand);border-radius:1.5px}
.tb[data-view="now"].on i{border-radius:50%}
.tb .badge-n{position:absolute;top:0;right:24%;background:var(--fire);color:#fff;font-size:9px;
  min-width:14px;height:14px;border-radius:7px;display:none;align-items:center;justify-content:center;padding:0 3px}
.tb.hascoupon .badge-n{display:flex}

/* ---------- 入驻 / 区县 / 我的券 ---------- */
.pagejoin,.pagezone,.pagemy,.pagespot,.pageproduce{position:fixed;inset:0;z-index:80;background:var(--sand);
  display:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pagejoin.on,.pagezone.on,.pagemy.on,.pagespot.on,.pageproduce.on{display:block}
.pj-in,.pz-in,.pm-in,.ps-in,.pr-in{max-width:520px;margin:0 auto;padding:20px 18px 44px;
  padding-top:calc(20px + env(safe-area-inset-top))}
.pj-in h2,.pz-in h2,.pm-in h2{font-size:21px;font-weight:800;margin-bottom:5px}
.pj-s,.pz-s,.pm-s{font-size:13px;color:var(--ink3);line-height:1.7;margin-bottom:18px}
.pj-in label{display:block;font-size:12.5px;color:var(--ink2);font-weight:600;margin-bottom:12px}
.pj-in input,.pj-in select,.pj-in textarea{display:block;width:100%;margin-top:5px;padding:10px 12px;
  border:1px solid var(--line);border-radius:8px;background:#fff;font-size:15px;font-weight:400;outline:none;transition:.15s}
.pj-in input:focus,.pj-in select:focus,.pj-in textarea:focus{border-color:var(--fire);
  box-shadow:0 0 0 3px rgba(15,110,86,.09)}
.pj-in textarea{resize:vertical;line-height:1.65}
.two{display:flex;gap:10px}
.two label{flex:1;min-width:0}
.pj-sub{width:100%;padding:13px;background:var(--fire);color:#fff;border-radius:9px;
  font-size:15px;font-weight:700;margin-top:6px}
.pj-sub:active{background:#A8371F}
.pj-ok{display:none;margin-top:20px;background:var(--greenbg);border:1px solid #BFD8A8;
  border-radius:10px;padding:14px}
.pj-ok b{display:block;font-size:15px;color:var(--green);margin-bottom:5px}
.pj-ok span{font-size:13px;color:var(--ink2);line-height:1.7}
.pzback,.pmback{margin-top:22px}
.pzback button,.pmback button{width:100%;padding:11px;border-radius:9px;font-size:14px;font-weight:600}

.zcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 14px;
  margin-bottom:10px;cursor:pointer;position:relative;overflow:hidden}
.zcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line)}
.zcard h3{font-size:16px;font-weight:700;margin-bottom:3px}
.zcard .zn{font-size:12px;color:var(--ink3);line-height:1.65;margin-bottom:7px}
.zcard .zc{display:flex;flex-wrap:wrap;gap:4px}
.zchip{font-size:11px;padding:2.5px 7px;border-radius:5px;background:var(--sand2);color:var(--ink2)}

.cpn{background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px 13px;
  margin-bottom:10px;position:relative;overflow:hidden}
.cpn.used{opacity:.5}
.cpn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green)}
.cpn .ch{display:flex;align-items:baseline;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.cpn .ch b{font-size:15px;font-weight:700}
.cpn .cd{font-size:11.5px;color:var(--ink3)}
.cpn .code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;font-weight:700;
  letter-spacing:.12em;color:var(--ink);background:var(--sand2);border-radius:6px;
  padding:7px 11px;display:inline-block;margin:5px 0}
.cpn .cs{font-size:12px;color:var(--ink2);line-height:1.6}
.cpn .cst{font-size:11px;color:var(--ink3);margin-top:5px}

.pmall{background:var(--sand2);border-radius:9px;padding:13px;text-align:center;
  font-size:13px;color:var(--ink2);line-height:1.7}

.pmverify{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:14px;margin-bottom:20px}
.pmverify h3{font-size:14.5px;font-weight:700;margin-bottom:4px}
.pmverify p{font-size:12px;color:var(--ink3);line-height:1.65;margin-bottom:11px}
.pmv-row{display:flex;gap:8px}
.pmv-row input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;font-size:14px;font-family:ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.06em;outline:none;text-transform:uppercase}
.pmv-row input:focus{border-color:var(--fire);box-shadow:0 0 0 3px rgba(15,110,86,.09)}
.pmv-row button{flex:0 0 72px;padding:10px;border-radius:8px;font-size:14px}
.pmv-log{margin-top:11px;font-size:12px;line-height:1.7;display:none}
.pmv-log.show{display:block}
.pmv-log div{padding:6px 9px;border-radius:6px;margin-bottom:5px;background:var(--sand2);color:var(--ink2)}
.pmv-log div.ok{background:var(--greenbg);color:var(--green)}
.pmv-log div.err{background:#EAF4EE;color:var(--warn)}

/* ============================================================================
 * V3 新增：景区页（按游览时段排） + 农特产品页（按食材溯源） + 景区弹层
 * 设计口径与菜品页统一：沙色底 / 火色主调 / 卡片白底细边
 * ========================================================================== */

/* ---------- 景区页 ----------
   头图原为近黑棕渐变，与赭橘顶栏不搭，同步换成赭橘系深浅渐变
   （对白 5.07 / 7.68，两端均 AA）。 */
.ps-hero{margin-bottom:16px;padding:16px 15px;border-radius:13px;position:relative;overflow:hidden;
  background:linear-gradient(140deg,rgba(13,99,79,.92),rgba(9,78,61,.88)),url("https://workbuddy-space-static.codebuddy.work/image/iUruY4BfBDFNie2nSjKznQ.jpg") center 38%/cover no-repeat;color:#fff}
.ps-hero h2{text-shadow:0 1px 4px rgba(0,0,0,.35)}
.ps-hero::after{content:"";position:absolute;right:-28px;top:-28px;width:120px;height:120px;
  border-radius:50%;background:radial-gradient(circle,rgba(217,164,65,.34),transparent 70%)}
.ps-hero h2{font-size:20px;font-weight:800;margin-bottom:6px;letter-spacing:.01em}
.ps-hero p{font-size:12.5px;line-height:1.75;color:#D6C9B4}
.ps-hero p b{color:var(--gold2);font-weight:700}

/* ---------- 景区页 V5.0：三板块切换条 ----------
   旧的时段导航（.ps-nav/.psn）已随「上午/下午/傍晚/夜游」下线，
   改为「景区总览 / 旅游攻略 / 旅游线路」三个板块的切换。
   ⚠ 与 .scenes（早餐那行）不同，这里是 3 个按钮不是 6 个，
     单排宽度足够，不横滚也不折行。 */
.sp-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
  padding-bottom:11px;margin-bottom:13px;border-bottom:1px solid var(--line)}
.spt{padding:9px 6px;border-radius:9px;border:1px solid var(--line);background:#fff;
  text-align:center;transition:.15s;min-width:0;overflow:hidden}
.spt b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spt span{display:block;font-size:10.5px;color:var(--ink3);margin-top:2px;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spt.on{background:var(--fire);border-color:transparent}
.spt.on b{color:#fff}
.spt.on span{color:rgba(255,255,255,.82)}
.spt:active{transform:scale(.97)}

/* 三块面板：默认隐藏，带 .on 的显示 */
.sppanel{display:none}
.sppanel.on{display:block}

/* 筛选行（县区 / 等级 / 天数）—— 横向可滚，因为县区最多 6 个 */
.spo-f{margin-bottom:13px}
.spo-fr{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
.spo-fr:last-child{padding-bottom:0}
.spo-fr::-webkit-scrollbar{display:none}
.sfl{flex:0 0 auto;padding:6px 11px;border-radius:8px;border:1px solid var(--line);
  background:#fff;color:var(--ink2);font-size:12.5px;font-weight:600;
  white-space:nowrap;transition:.15s}
.sfl i{font-style:normal;font-size:11px;color:var(--ink3);font-weight:700;margin-left:2px}
.sfl.on{background:var(--fire);border-color:transparent;color:#fff}
.sfl.on i{color:rgba(255,255,255,.8)}
.sfl.lv.on{background:var(--gold);color:#3A2410}
.sfl.lv.on i{color:rgba(58,36,16,.7)}
.sfl:active{transform:scale(.97)}
.spo-empty{font-size:13px;color:var(--ink3);line-height:1.7;padding:18px 14px;
  background:var(--sand2);border-radius:10px;text-align:center}

/* 县区分组头：取消时段分组后，改成按县区聚合，
   让游客看到「这一带还有什么」 */
.sgroup{margin-bottom:20px}
.sgh{display:flex;align-items:baseline;gap:9px;margin-bottom:9px}
.sgh b{font-size:15.5px;font-weight:800;color:var(--cc)}
.sgh b::before{content:"";display:inline-block;width:4px;height:14px;background:var(--cc);
  border-radius:2px;margin-right:8px;vertical-align:-2px}
.sgh span{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums}

/* 卡片上的县区 / 建议时段标签（V5.0 新增，取代原来的时段分组头） */
.scounty{font-size:10.5px;font-weight:700;color:var(--ink2);background:var(--sand2);
  padding:2.5px 7px;border-radius:5px}
.sbest{font-size:10.5px;font-weight:600;color:var(--ink3)}
.slevel.none{background:#6E5D48}

/* ---------- 旅游攻略 ---------- */
.gintro{background:var(--sand2);border-radius:10px;padding:12px 13px;margin-bottom:14px}
.gintro b{display:block;font-size:14px;font-weight:800;color:var(--ink);margin-bottom:5px}
.gintro p{font-size:12.5px;color:var(--ink2);line-height:1.75}
.rtag{display:inline-block;font-size:11px;font-weight:700;padding:1px 6px;border-radius:4px;
  vertical-align:1px}
.rtag.off{background:var(--fire);color:#fff}
.rtag.cur{background:var(--gold);color:#3A2410}

.gcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 14px;
  margin-bottom:12px;position:relative;overflow:hidden}
.gcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gc)}
.gch{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.gicon{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--sand2);
  display:flex;align-items:center;justify-content:center;font-size:17px}
.gch b{display:block;font-size:16px;font-weight:800;color:var(--ink);line-height:1.3}
.gch span{display:block;font-size:11px;color:var(--ink3);margin-top:2px}
.glead{font-size:13px;color:var(--ink2);line-height:1.75;margin-bottom:10px;
  padding:8px 10px;background:var(--sand2);border-radius:8px;border-left:3px solid var(--gc)}
.gitems{margin-bottom:10px}
.gitem{display:flex;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line2)}
.gitem:last-child{border-bottom:none}
.gitem b{flex:0 0 58px;font-size:12px;font-weight:800;color:var(--gc);line-height:1.65}
.gitem p{flex:1 1 auto;font-size:12.5px;color:var(--ink2);line-height:1.7;min-width:0}
.gspots{background:var(--greenbg);border-radius:8px;padding:8px 10px;margin-bottom:8px}
.gspots b{display:block;font-size:11px;color:var(--green);font-weight:700;
  margin-bottom:5px;letter-spacing:.04em}
.gspot{display:inline-block;font-size:11.5px;color:var(--ink2);background:#fff;
  border:1px solid var(--line2);border-radius:5px;padding:2.5px 8px;margin:0 5px 4px 0;
  cursor:pointer}
.gspot:active{border-color:var(--fire);color:var(--fire)}
.gsrc{font-size:10.5px;color:var(--ink3);line-height:1.65;padding-top:8px;
  border-top:1px solid var(--line2);word-break:break-word}

/* ---------- 旅游线路 ---------- */
.rtcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 14px;
  margin-bottom:12px}
.rtcard.cur{border-style:dashed}
.rth{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.rtier{font-size:10.5px;font-weight:800;color:#fff;background:var(--fire);
  padding:2.5px 7px;border-radius:5px;letter-spacing:.04em}
.rtcard.cur .rtier{background:var(--gold);color:#3A2410}
.rtdays{font-size:10.5px;font-weight:700;color:var(--ink2);background:var(--sand2);
  padding:2.5px 7px;border-radius:5px}
.rtmode{font-size:11px;color:var(--ink3)}
.rtcard h3{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.5;margin-bottom:5px}
.rtsub{font-size:12.5px;color:var(--ink2);line-height:1.7;margin-bottom:10px}
.rtstops{list-style:none;margin-bottom:10px;padding-left:2px}
.rtstop{display:flex;align-items:center;gap:8px;padding:5px 0 5px 4px;cursor:pointer;
  position:relative}
.rtstop::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:1px;background:var(--line2)}
.rtstop:first-child::before{top:50%}
.rtstop:last-child::before{bottom:50%}
.rtdot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--kc);position:relative;
  z-index:1;margin-left:3px}
.rtname{flex:1 1 auto;font-size:12.5px;color:var(--ink2);line-height:1.6;min-width:0}
.rtstop:active .rtname{color:var(--fire)}
.rtlv{flex:0 0 auto;font-size:10px;font-weight:800;color:#fff;background:var(--kc);
  padding:1.5px 5px;border-radius:4px;opacity:.85}
.rtnote{font-size:12px;color:var(--ink3);line-height:1.7;margin-bottom:8px}

.scard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 14px;
  margin-bottom:11px;position:relative;overflow:hidden;cursor:pointer;transition:.16s}
.scard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kc,var(--line))}
.scard:active{transform:scale(.99);border-color:var(--gold)}
/* 景区实拍图：有 sp.img 才渲染，边到边出血，与卡片圆角对齐 */
.sphoto{margin:-13px -14px 11px;height:134px;overflow:hidden;background:var(--sand2)}
.sphoto img{width:100%;height:100%;object-fit:cover;display:block}
.sch{display:flex;align-items:center;gap:6px;margin-bottom:7px;flex-wrap:wrap}
.skind{font-size:11px;font-weight:700;color:var(--kc);background:var(--sand2);
  padding:2.5px 8px;border-radius:5px}
.slevel{font-size:10.5px;font-weight:800;color:#fff;background:var(--fire);
  padding:2px 6px;border-radius:4px;letter-spacing:.04em}
.scard h3{font-size:16.5px;font-weight:700;margin-bottom:6px;line-height:1.35}
.smeta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--ink2);margin-bottom:6px}
.smeta span{font-variant-numeric:tabular-nums}
.saddr{font-size:11.5px;color:var(--ink3);line-height:1.6;margin-bottom:7px}
.srec{font-size:13px;color:var(--ink2);line-height:1.72;margin-bottom:9px}
.seat{background:var(--greenbg);border-radius:8px;padding:8px 10px;margin-bottom:10px}
.seat b{display:block;font-size:11px;color:var(--green);font-weight:700;margin-bottom:5px;letter-spacing:.04em}
.sdish{display:inline-block;font-size:11.5px;color:var(--ink2);background:#fff;
  border:1px solid var(--line2);border-radius:5px;padding:2.5px 8px;margin:0 5px 4px 0;cursor:pointer}
.sdish:active{border-color:var(--fire);color:var(--fire)}
.sdish.none{color:var(--ink3);background:transparent;border-style:dashed;cursor:default}
.sact{display:flex;gap:8px}
.sact button{flex:1;padding:9px;border-radius:8px;font-size:13px;font-weight:600}
.b-nav{background:#E3F1EA;color:#0A4A3A;border:1px solid #6FAE8D}
.b-nav:active{background:#7FB89B}
.b-copy{background:var(--sand2);color:var(--ink2);border:1px solid var(--line)}
.b-copy:active{background:var(--line2)}

.ps-note,.pr-note{background:var(--sand2);border-radius:9px;padding:11px 12px;
  font-size:11.5px;color:var(--ink3);line-height:1.75;margin:18px 0}
.ps-note b,.pr-note b{color:var(--ink2);display:block;margin-bottom:3px;font-size:12px}
.psback,.prback{margin-top:20px;text-align:center}
.psback button,.prback button{width:100%;padding:11px;border-radius:9px;font-size:13.5px}

/* ---------- 农特产品页 ---------- */
.pr-hero{margin-bottom:16px;padding:16px 15px;border-radius:13px;position:relative;overflow:hidden;
  background:linear-gradient(140deg,rgba(59,109,17,.9),rgba(75,102,38,.88)),url("https://workbuddy-space-static.codebuddy.work/image/TPpoyuunXf8YzCZb4eXPV0.jpg") center 42%/cover no-repeat;color:#fff}
.pr-hero h2{text-shadow:0 1px 4px rgba(0,0,0,.35)}
.pr-hero::after{content:"";position:absolute;right:-24px;bottom:-30px;width:130px;height:130px;
  border-radius:50%;background:radial-gradient(circle,rgba(240,206,134,.3),transparent 70%)}
.pr-hero h2{font-size:20px;font-weight:800;margin-bottom:6px}
.pr-hero p{font-size:12.5px;line-height:1.75;color:#E2EEDA}
.pr-hero p b{color:var(--gold2);font-weight:700}

/* V5.1：8 个 tab（全部+6 类+特产店铺）改 4 列两排网格。
   原横滚样式把「特产店铺」藏在排尾——横滑入口在真机等于不存在
   （第十三轮场景条同款教训），硬需求 tab 必须首屏可见。 */
/* V5.3：9 个 tab（全部+6 类+特产店铺+认证企业）改 3 列三排——
   4 列两排会变成 4+4+1，第 9 个 tab 孤零零掉第三行（截图实测） */
.pr-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
  padding-bottom:11px;margin-bottom:13px;border-bottom:1px solid var(--line)}
.prn{padding:6.5px 4px;border-radius:20px;border:1px solid var(--line);
  background:#fff;font-size:12.5px;color:var(--ink2);white-space:nowrap;transition:.15s;
  text-align:center;overflow:hidden;text-overflow:ellipsis}
.prn i{font-style:normal;opacity:.6;font-size:11px;margin-left:2px;font-variant-numeric:tabular-nums}
.prn.on{background:var(--pc,var(--fire));color:#fff;border-color:transparent;font-weight:700}
.prn.on i{opacity:.9}
.prn.prn-shop{border-style:dashed;border-color:#C98A2E;color:#7A5210}
.prn.prn-shop.on{background:#C98A2E;color:#fff;border-style:solid;border-color:transparent}
/* V5.3 认证企业 tab：绿色系与店铺 tab（琥珀）区分开 */
.prn.prn-cert{border-style:dashed;border-color:#3B6D11;color:#2C5309}
.prn.prn-cert.on{background:#3B6D11;color:#fff;border-style:solid;border-color:transparent}

/* ---------- V5.4 官方认证类目筛选条 ----------
   口径：政府 62 号文（绿色食品/有机产品/无公害农产品/地理标志 + 甘味）。
   与品类导航区分：品类 tab 是实线胶囊，认证 chip 是更小的浅色标签 */
.cg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 0 12px;
  padding:8px 10px;background:#FBF2E3;border-radius:9px;border:1px solid #F0E2C8}
.cg-bar-t{font-size:11px;font-weight:700;color:#7A5210;letter-spacing:.03em;flex:0 0 auto}
.cgf{font-size:11.5px;padding:4px 9px;border-radius:14px;cursor:pointer;
  border:1px solid var(--cgc,#D3D1C7);background:#fff;color:var(--cgc,#5F5E5A);
  font-weight:600;transition:.15s}
.cgf i{font-style:normal;opacity:.65;font-size:10.5px;margin-left:2px;font-variant-numeric:tabular-nums}
.cgf.on{background:var(--cgc,#444441);color:#fff;border-color:transparent}
.cgf.on i{opacity:.9}
.cgf:disabled{opacity:.35;cursor:not-allowed;border-style:dashed}

/* 产品卡认证标签行 */
.pcgr{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 7px}
.cgpill{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:5px;
  color:var(--cgc,#5F5E5A);background:var(--cgb,#F1EFE8);
  border:1px solid var(--cgc,#D3D1C7);line-height:1.5}

/* 认证筛选后无结果 */
.pempty{padding:22px 16px;text-align:center;color:var(--ink3);font-size:13px;line-height:1.8}
.pempty-clr{display:block;margin:10px auto 0;font-size:12.5px;padding:7px 16px;
  border-radius:16px;border:1px solid var(--fire);background:#fff;color:var(--fire);cursor:pointer;font-weight:600}

/* ===========================================================================
   V5.5 游客模式（外地游客买特产）
   ---------------------------------------------------------------------------
   与溯源模式共用数据层，只换组织方式。用户诉求原话：
   「外地游客想买特产，想了解张掖农产品」——两类人两种问法：
     溯源模式问「这是什么、哪来的」→ 按食品品类逛
     游客模式问「买来送谁、怎么带走」→ 按伴手礼清单逛
   =========================================================================== */

/* ---------- 模式切换条 ----------
   放在 hero 下方、品类导航上方。不做成底部第 5 个 tab（手机底部 4 tab 已满），
   用页内分流条做显眼切换，避免挤爆底部导航。 */
.pr-mode{display:grid;grid-template-columns:1fr 1.35fr;gap:6px;margin:12px 0 10px}
.pmo{padding:9px 8px;border-radius:9px;border:1px solid var(--line);background:#fff;
  font-size:12.5px;color:var(--ink2);cursor:pointer;font-weight:600;transition:.15s;
  text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmo.on{background:var(--fire);color:#fff;border-color:transparent}
/* 游客视角是"新增卖点"，未选中时也给一点视觉分量（虚线 + 琥珀色，与店铺 tab 同族） */
.pmo[data-pmode="gift"]:not(.on){border-style:dashed;border-color:#C98A2E;color:#7A5210}

/* ---------- 游客模式导航条（清单维度）---------- */
.pr-nav-gift{grid-template-columns:repeat(3,minmax(0,1fr))}
.prn.prn-gift{border-style:dashed;border-color:#8E6BB0;color:#5C3B7A}
.prn.prn-gift.on{background:#8E6BB0;color:#fff;border-style:solid;border-color:transparent}

/* ---------- 怎么带走：三条总则（全部清单视图顶部）---------- */
.gf-away{background:#FBF2E3;border:1px solid #F0E2C8;border-radius:11px;
  padding:12px 13px;margin-bottom:13px}
.gf-away>b{display:block;font-size:13.5px;color:#7A5210;margin-bottom:9px}
.gf-aw-row{display:flex;gap:9px;align-items:flex-start;margin-bottom:8px}
.gf-aw-row:last-child{margin-bottom:0}
.gf-aw-i{flex:0 0 auto;width:19px;height:19px;border-radius:50%;background:#C98A2E;color:#fff;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.gf-aw-row b{display:block;font-size:12.5px;color:var(--ink);margin-bottom:2px}
.gf-aw-row span{font-size:12px;color:var(--ink2);line-height:1.65}

/* ---------- 清单总览卡片（八类）---------- */
.gf-lists{display:grid;grid-template-columns:1fr;gap:9px;margin-bottom:15px}
.gfl{background:#fff;border:1px solid var(--line);border-left:3px solid #8E6BB0;
  border-radius:11px;padding:12px 13px;cursor:pointer;transition:.15s}
.gfl:hover{border-color:#8E6BB0;box-shadow:0 2px 10px rgba(142,107,176,.12)}
.gfl-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px}
.gfl-h h3{font-size:14.5px;font-weight:700;color:var(--ink)}
.gfl-n{font-size:11.5px;color:#5C3B7A;font-weight:700;white-space:nowrap}
.gfl p{font-size:12px;color:var(--ink2);line-height:1.65;margin-bottom:8px}
.gfl-p{display:flex;flex-wrap:wrap;gap:5px}
.gflp{font-size:11px;padding:2.5px 8px;border-radius:5px;background:var(--sand2);color:var(--ink2)}
.gflp-more{background:#EDE6F5;color:#5C3B7A;font-weight:700}
.gf-all-t{font-size:12.5px;font-weight:700;color:var(--ink2);margin:0 0 10px;
  padding-top:12px;border-top:1px solid var(--line)}
.gf-intro{background:#F5F1FA;border:1px solid #E4DAF0;border-radius:10px;
  padding:11px 12px;margin-bottom:12px}
.gf-intro b{display:block;font-size:13.5px;color:#4A2C63;margin-bottom:3px}
.gf-intro span{font-size:12px;color:var(--ink2);line-height:1.65}

/* ---------- 卡片三行带走信息（游客模式核心）---------- */
.gfty{margin:8px 0 9px;padding:9px 10px;background:#FAF8FD;border-radius:9px;
  border:1px solid #EDE6F5}
.gfr{display:flex;gap:8px;align-items:flex-start;margin-bottom:6px;line-height:1.6}
.gfr:last-of-type{margin-bottom:0}
.gfr b{flex:0 0 74px;font-size:11.5px;color:#5C3B7A;font-weight:700}
.gfr span{flex:1;font-size:12px;color:var(--ink2);line-height:1.65}
.gfn{font-size:10.5px;color:var(--ink3);margin-top:7px;padding-top:6px;
  border-top:1px dashed #E4DAF0;line-height:1.5}

/* ---------- 游客「在哪买」：按动线场景分组 ---------- */
.gs-intro{background:#FBF2E3;border:1px solid #F0E2C8;border-radius:10px;
  padding:11px 12px;margin-bottom:13px}
.gs-intro b{display:block;font-size:13.5px;color:#7A5210;margin-bottom:3px}
.gs-intro span{font-size:12px;color:var(--ink2);line-height:1.65}
.gs-group{margin-bottom:16px}
.gs-gt{display:flex;align-items:baseline;gap:8px;padding-bottom:6px;
  border-bottom:2px solid #C98A2E;margin-bottom:7px}
.gs-gt b{font-size:14px;font-weight:700;color:#7A5210}
.gs-gn{font-size:11.5px;color:#7A5210;font-weight:700;margin-left:auto;
  background:#FBF2E3;padding:1.5px 8px;border-radius:10px}
.gs-gd{font-size:12px;color:var(--ink2);line-height:1.65;margin-bottom:9px}

/* ---- V5.6 产品实拍图：来源角标 + 图库横滚条 ----
   图片全部来自政府网站/中国张掖网公开报道配图，角标标注来源（合规要求）；
   .pimgbox 本体样式在下方 pcard 区，这里只补角标定位与图库条 */
.pimgbox{position:relative}
.pimgsrc{position:absolute;right:6px;bottom:6px;font-size:10px;line-height:1;
  padding:3px 6px;border-radius:4px;background:rgba(28,26,20,.58);color:#FFF;
  font-style:normal;letter-spacing:.3px;pointer-events:none;backdrop-filter:blur(2px)}
.pimgstrip{display:flex;gap:6px;overflow-x:auto;margin-top:7px;padding-bottom:2px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.pimgstrip img{width:132px;height:88px;object-fit:cover;border-radius:8px;
  flex:0 0 auto;scroll-snap-align:start;border:1px solid var(--line)}

.pcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 14px;
  margin-bottom:11px;position:relative;overflow:hidden}.pcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pc,var(--line))}
.pch{display:flex;align-items:center;gap:7px;margin-bottom:7px;flex-wrap:wrap}
.pcat{font-size:11px;font-weight:700;color:var(--pc);background:var(--sand2);padding:2.5px 8px;border-radius:5px}
.parea{font-size:11px;color:#fff;background:var(--ink2);padding:2.5px 8px;border-radius:5px}
.pcard h3{font-size:16.5px;font-weight:700;margin-bottom:6px;line-height:1.35}
.pgeo{font-size:11.5px;color:var(--green);background:var(--greenbg);border-radius:6px;
  padding:5px 9px;margin-bottom:5px;line-height:1.6}
.pbrand{font-size:11.5px;color:var(--fire);margin-bottom:6px}
/* ⚠ V5.2：原 .pfact（卡片正面特点段）已删除——正文收进 .pdet 折叠区后无消费者 */
.psec{margin-bottom:8px}
.psec b{display:block;font-size:11px;color:var(--ink3);font-weight:700;margin-bottom:3px;letter-spacing:.04em}
.psec p{font-size:12.5px;color:var(--ink2);line-height:1.7}
.pdishes{display:flex;flex-wrap:wrap;gap:5px}
.pdish{font-size:11.5px;color:var(--ink2);background:var(--sand2);border:1px solid var(--line2);
  border-radius:5px;padding:3px 9px;cursor:pointer}
.pdish:active{border-color:var(--fire);color:var(--fire)}
/* ⚠ V5.2：原 .psrc（卡片底部来源行）已删除——来源移入 .pdet 的「认证与来源」段 */

/* ---------- V5.2 产品卡「详细介绍」折叠区 ----------
   背景：原卡片正面把 fact(特点) + how(怎么挑) + 菜品 + 来源全铺开，像"标签清单"
   不像"产品介绍"，且 28 张卡每张都长，一屏翻不过去。改法：正面精简为
   图 + 名 + 认证 + 导购按钮，正文收进 details，点开是四角度（产地风土/怎么挑/
   怎么吃/做成这些菜/认证来源）。details 原生折叠，无需 JS 状态。 */
.pdet{margin-top:9px;border-top:1px dashed var(--line2);padding-top:2px}
.pdet-sum{display:flex;align-items:center;gap:6px;padding:7px 0 2px;cursor:pointer;
  list-style:none;user-select:none;font-size:12px;font-weight:700;color:var(--fire)}
.pdet-sum::-webkit-details-marker{display:none}
.pchev{width:0;height:0;border-left:5px solid currentColor;
  border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .18s}
.pdet[open] .pchev{transform:rotate(90deg)}
.pdet-body{padding-top:8px;animation:pdetIn .22s ease}
@keyframes pdetIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.pdet-geo{font-size:12px;color:var(--ink2);line-height:1.66}
.pdet-src{font-size:10.5px;color:var(--ink3);line-height:1.6;margin-top:3px}

/* ---------- 景区详情弹层 ---------- */
.spotov{position:fixed;inset:0;z-index:95;display:none}
.spotov.on{display:block}
.ov-mask{position:absolute;inset:0;background:rgba(42,33,24,.55);animation:fadeIn .2s}
.ov-panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;background:var(--sand);border-radius:17px 17px 0 0;
  animation:slideUp .28s cubic-bezier(.32,.72,.32,1);padding-bottom:calc(20px + env(safe-area-inset-bottom))}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.ov-x{position:absolute;right:13px;top:13px;width:29px;height:29px;border-radius:50%;
  background:rgba(0,0,0,.34);color:#fff;font-size:19px;line-height:1;z-index:3;display:flex;
  align-items:center;justify-content:center}
/* 弹层头图：原为「类型色 --kc → 时段色 --sc」双色渐变。
   改统一暖色的原因有两条，都是实测出来的：
   1) 时段色含金 #D9A441、灰蓝 #2C3A45，与暖顶栏并置显脏；
   2) 类型色做渐变起点时白字多半不达标——自然风光 #7A8B5A 只有 3.70、
      石窟寺院 #A8894C 只有 3.31（AA 要 4.5）。
   现统一 #0F6E56 → #0A4A3A，白字最差端 5.07，全类型达标。
   类型语义不丢：降级为 .ov-k 前的类型色点。 */
.ov-hero{padding:26px 18px 16px;color:#fff;position:relative;
  background:linear-gradient(150deg,#0F6E56,#0A4A3A)}
/* 有实拍图时用图做头图，压一层暗幕保证白字可读 */
.ov-hero.has-img{background-size:cover;background-position:center 45%;background-repeat:no-repeat}
.ov-hero.has-img h2{text-shadow:0 2px 12px rgba(0,0,0,.55)}
/* 类型色点：5px 实心圆，保留「这是自然风光还是石窟寺院」的语义识别 */
.ov-k{font-size:11.5px;opacity:.92;letter-spacing:.05em;display:flex;align-items:center;gap:6px}
.ov-k::before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;
  background:var(--kc,#fff);box-shadow:0 0 0 1.5px rgba(255,255,255,.45)}
.ov-hero h2{font-size:21px;font-weight:800;margin-top:5px;line-height:1.3}
.ov-lv{display:inline-block;margin-top:8px;font-size:11px;font-weight:800;letter-spacing:.05em;
  background:rgba(255,255,255,.94);color:var(--fire);padding:3px 9px;border-radius:5px}
.ov-b{padding:15px 17px 20px}
.ov-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:15px}
.ov-info div{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  font-size:12.5px;line-height:1.55}
.ov-info div:last-child{grid-column:1 / -1}
.ov-info b{display:block;font-size:10.5px;color:var(--ink3);font-weight:600;margin-bottom:1px}
.ov-sec{margin-bottom:14px}
.ov-sec>b{font-size:12.5px;font-weight:800;display:block;margin-bottom:5px;
  padding-left:8px;border-left:3px solid var(--gold)}
.ov-sec p{font-size:13px;color:var(--ink2);line-height:1.75}
.ov-dishes{display:flex;flex-direction:column;gap:7px}
.ovd{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 11px;cursor:pointer}
.ovd:active{border-color:var(--fire)}
.ovd b{font-size:14px;font-weight:700;display:block}
.ovd span{display:block;font-size:11.5px;color:var(--ink3);margin:2px 0}
.ovd em{font-style:normal;font-size:11.5px;color:var(--ink2)}
.ov-none{font-size:12.5px;color:var(--ink3);background:var(--sand2);border-radius:8px;padding:10px 12px;line-height:1.7}
/* 街区弹层内的操作提示。与 .ov-say（核验级别说明）语义不同，class 分开，
   避免按 class 取值的自动化断言抓到错误的那一条。 */
.ov-hint{font-size:11.5px;color:var(--ink3);line-height:1.65;margin-top:8px}
.ov-src{font-size:10.5px;color:var(--ink3);line-height:1.65;padding:9px 11px;background:var(--sand2);
  border-radius:8px;margin-bottom:13px}
.ov-act button{width:100%;padding:12px;border-radius:9px;font-size:14.5px;font-weight:700}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--h-tab) + 18px);transform:translate(-50%,14px);
  z-index:90;background:rgba(42,33,24,.93);color:#fff;font-size:13px;padding:9px 16px;
  border-radius:8px;opacity:0;pointer-events:none;transition:.25s;max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- 二级页导航（.snav）----------
   为什么二级页必须自带一套底部导航：
   抽屉 z-index:70 / 景区遮罩 60，而页面的 .tabbar 只有 z-index:50 ——
   二级页天然盖住主导航，这不是漏配而是层级设计的必然结果。
   若不在二级页里补一套，用户看完一道菜想切「景区」就找不到入口了。
   结构：返回键 + 与主导航一致的 4 个 tab，视觉上与 .tabbar 同款，
   差别只在左侧多一个返回键（返回上一级，而不是切换 tab）。

   ⚠ 全宽做法（此处改过两轮，一并记下）：
      .snav 是 .db 的子元素，.db 有 16px 左右内边距。
      - 负 margin 单独用会让 .snav 比抽屉宽 16px → 横向溢出 16px（L3 抓过）。
      - position:sticky 不能配left偏移 —— sticky 的 left 指的是滚动容器
        内的定位，会把它推出可视区而不是贴到抽屉边。
      正确解法：.snav 负 margin 撑满，.db 同时用 padding 横向收窄来补偿，
      两者一起改才既贴边又不溢出。 */
.snav{position:sticky;bottom:0;z-index:5;display:flex;align-items:stretch;
  background:rgba(255,253,248,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-sizing:border-box;
  /* ⚠ 最终解（实测得出，前两版都错）：
       实测 .db 收窄后 scrollW 已正常 390，但 .snav 自身被负 margin 拉到
       left=-16/w=422，父级 .sheet 的 scrollWidth 仍被撑到 406。
       所以负 margin 只能要一个：左负 -16 右负 0（用 padding-right 补），
       且必须显式 width:100% 让它回到父级内容宽，否则两边负margin 会叠加。
     实测口径：left=0 / right=390 / 抽屉 scrollWidth=390 才算通过。 */
  margin:0 -16px -16px 0;padding:0 16px 0 0;padding-bottom:env(safe-area-inset-bottom);
  width:100%;
  box-shadow:0 -2px 10px rgba(42,33,24,.06)}
/* 补偿：.db 的 16px 横向内边距会让撑满的 .snav 溢出，这里收窄。
   ⚠ 不用 .db:has(> .snav) —— :has() 在旧版WebView 上不生效，
     一旦失效导航就会溢出 16px（这问题本身就踩过）。
     改为给两个抽屉的 .db 显式加 .dbs 类，稳定可靠。 */
.db.dbs{padding-left:0;padding-right:0}
.db.dbs > *:not(.snav){padding-left:16px;padding-right:16px}
/* 景区/街区弹层同理：.ov-b 有 18px 横向内边距，同样收窄来补偿导航撑满。
   ⚠ 这里用 :has() 是为了只对"带 .snav 的弹层"生效，避免影响无导航的弹层。
   若将来发现旧 WebView 上不生效，退回给 .ov-b 显式加类（与 .db.dbs 同一做法）。 */
.ov-b{padding-left:0;padding-right:0}
.ov-b > *:not(.snav){padding-left:18px;padding-right:18px}
.snav .sb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;height:var(--h-tab);font-size:10.5px;color:var(--ink3);position:relative}
/* 返回键：单独一档，宽度是 tab 的 0.8 倍并加左分隔线，视觉上明确"不是 tab" */
.snav .sb[data-back]{flex:0 0 auto;width:64px;min-width:64px;color:var(--ink2);
  font-weight:700;border-right:1px solid var(--line2)}
.snav .sb[data-back]:active{background:var(--sand2)}

/* ---------- 页面级二级导航（.pgsn）----------
   补的是上一轮漏掉的一类容器：景区 / 农特产品 / 商家入驻 / 我的券。
   它们不是抽屉，是 position:fixed;inset:0;z-index:80 的整屏浮层 ——
   z-index 比底部导航（50）高，所以这四页【天然盖住】.tabbar。
   也就是说用户在景区页里既看不到也点不到主导航，必须自带一套。

   为什么不能直接复用 .snav 的 margin:0 -16px -16px 0：
   抽屉里 .snav 的父级是 .db（有 16px 内边距），负 margin 正好抵消；
   而这四页 .snav 是 .pageX 的直接子元素，父级【没有】内边距
   （内边距在下一层的 .ps-in/.pr-in 上），照抄负 margin 会让它左右溢出 16px。
   所以页面级导航 margin 全归零、width:100%，另由下一节给 .xx-in 补底部留白。

   ⚠⚠ 这里必须用 position:fixed，不能用 sticky —— 这是实测踩出来的：
   sticky bottom:0 只在【内容能滚动】时才吸到视口底；内容不足一屏时
   它会停在内容末尾。实测券包页内容仅 445px（视口 932px、不可滚动），
   导航停在 y=445、距视口底 428px —— 看着像"导航掉在页面中间"。
   景区页内容 3679px 可滚动，sticky 正常（gap=0），所以【只有短页面会犯病】，
   静态检查和长页面截图都发现不了，必须量短页面的几何。

   fixed 方案：.pageX 本身就是 position:fixed;inset:0 的整屏浮层，
   导航对它 fixed 时，相对的是视口（页面没有transform 祖先形成包含块），
   于是恒定贴在视口底部，与内容长短无关。
   ⚠ left/right 必须显式给 0：   fixed 元素默认按 static 位置定位，
     省略时会受父级内边距影响而左右缩进。
   ⚠⚠ width 必须显式写 auto，不能继承 .snav 的 width:100% ——
     对 position:fixed 而言 width:100% 参照的是【视口】而不是 left/right 之间的区间，
     桌面端叠加 left:264px 后实测 right=1544 而视口只有 1280（导航横出屏幕 264px）。
     写 width:auto 后由 left/right 决定宽度，桌面端实测 l=264 r=1280 正确。 */
/* ⚠⚠⚠ z-index 必须是 90，不能沿用 .snav 的 5 —— 本轮实测修掉的真 bug。
   .pgsn 是 .snav 的兄弟节点（HTML 上是 .snav.pgsn），所以它继承了
   .snav 的 z-index:5。而 z-index:5 是为【抽屉内】的导航准备的：
     抽屉 .sheet z-index:70 > tabbar 50，
   在抽屉这个上下文里 5 够用（同一父层内比兄弟高即可）。

   但 .pgsn 是【页面级】的 fixed 元素，而整屏页面是
     .pagejoin/.pagespot/.pageproduce/.pagemy { z-index:80 }
   5 < 80 → 底部导航连同返回键被整页压在下面，完全看不见。

   实测症状（手机端 390×844）：
     · 景区页/农特产品页的 .pgsn 量到 h=0、返回键量到 0×0
     · elementFromPoint 探导航中心点，最顶层是 NAV.tabbar（主导航）或 SPAN
     · 点返回键点不到 —— 视觉上"按钮在那儿"，但命中测试打不到
   ⚠ 为什么 .vendor入驻与 .pagemy（券包）当时看起来正常：
     它们的内容区较高、页面滚动位置不同，探针恰好落在别的元素上，
     但 z-index 5 的问题对四页是一样的，只是先被测到的那两页更明显。

   取值依据：
     · 必须 > 80（页面容器）
     · 必须 < 90（.toast）—— 否则 toast 提示会被导航压住看不见
     · 与 .spotov（景区详情弹层 95）无关，那是另一层，导航本来就该被它盖住 */
.pgsn{position:fixed;left:0;right:0;bottom:0;z-index:90;margin:0;padding:0;width:auto;
  box-sizing:border-box;
  padding-bottom:env(safe-area-inset-bottom)}
/* fixed 之后导航不再占文档流高度，所以这四页内容的底部留白
   必须手动补上（原来靠 sticky 占位是自动的）。
   高度取 --h-tab 与 .sb 实际高度中的较大值，两种写法都兜住。 */
.pj-in,.pz-in,.pm-in,.ps-in,.pr-in{padding-bottom:calc(var(--h-tab) + 22px)}
/* 返回箭头用 CSS 画，避免 emoji/字符各机型渲染不一致 */
.ic-back{width:9px;height:9px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);border-radius:1px;margin-left:3px}
/* 图标与 .tb i 保持同一套视觉（圆角方框 + 选中态填充） */
.snav .sb i:not(.ic-back){width:19px;height:19px;border:1.8px solid currentColor;
  border-radius:5px;position:relative;transition:.15s}
.snav .sb.on{color:var(--fire);font-weight:700}
.snav .sb.on i:not(.ic-back){background:currentColor;border-color:currentColor}
.snav .sb.on i:not(.ic-back)::after{content:"";position:absolute;inset:3.5px;
  background:var(--sand);border-radius:1.5px}
.snav .sb.on[data-back]{background:var(--sand2)}

/* ---------- 桌面 ---------- */
@media (min-width:900px){
  :root{--h-tab:0px}
  body{padding-bottom:0;padding-left:264px}
  /* ⚠ V4.7：原为 .scenes,.tagpanel,.cats 三条并列 —— tagpanel 与 cats 已下线，
     只留 .scenes 一条（它的 left 让开 264px 侧栏）。
     原 .scenes,.cats{padding-left:278px} 也已删除：
     ① .cats 没了；② .scenes 的 padding 在下方自己的规则里给足
     （padding:7px 14px 8px，其中 left 14px 由 left:264px 补齐侧栏偏移），
     再叠一条 padding-left 只会让"到底哪条生效"变得难查。 */
  .scenes{left:264px}
  .dishrow{padding-left:288px}
  .mapwrap{height:40vh}
  .list{padding-left:288px;max-width:820px}
  .tabbar{top:0;bottom:0;left:0;right:auto;width:264px;height:100vh;flex-direction:column;
    border-top:none;border-right:1px solid var(--line);padding-top:130px;background:var(--sand)}
  .tb{flex:0 0 60px;flex-direction:row;justify-content:flex-start;gap:12px;padding-left:26px;
    font-size:14px;border-left:3px solid transparent;position:relative}
  .tb.on{border-left-color:var(--fire);background:#FFFDF8}
  .tb .badge-n{right:auto;left:120px;top:20px}
  /* 抽屉在桌面端从左侧滑出，left 必须让开 264px 的侧栏 ——
     原来写的是 left:264px 但 .sheet 同时有 right:auto，宽度 470px，
     实际正好贴住侧栏右缘；但二级页导航 .snav 是 sticky bottom，
     桌面端抽屉是 100vh 满高、底部导航会压在内容滚动区之外，故改为贴在底缘。 */
  .sheet{left:264px;right:auto;width:470px;max-height:100vh;border-radius:0;transform:translateX(-100%);
    box-shadow:none;border-right:1px solid var(--line);display:flex;flex-direction:column;
    /* ⚠ 关闭态必须 visibility:hidden —— transform:translateX(-100%) 只是把它
       移出视口，元素本身仍参与命中测试与绘制，桌面上 translateX(-100%) 的位移
       恰好等于宽度，左边缘会停在 x=0，于是关闭的抽屉会在左侧栏底部
       露出内容（实测：侧栏底部出现第二个「返回」）。 */
    visibility:hidden}
  .sheet.on{transform:translateX(0);visibility:visible}
  /* 桌面端抽屉本身是 flex 纵向容器：头固定 + 身体滚动 + 导航吸底。
     不这样做的话 .snav 的 position:sticky 不会生效（无滚动容器）。 */
  .sheet .dh{flex:0 0 auto}
  .sheet .db{flex:1 1 auto;overflow-y:auto;min-height:0}
  /* 桌面端抽屉是 100vh 满高的 flex 列容器（头固定 / 身滚动 / 导航吸底），
     导航不再是"贴在滚动内容末尾"，所以不需要任何负 margin ——
     保留负值会让它溢出到下缘之外，跑到左侧栏上露出第二个返回键（实测过）。 */
  /* 桌面端抽屉是满高 flex 列，导航本身就在容器内、不需要撑满，
     故把 .db 的横向内边距还原（手机上那套是为负 margin 服务的补偿）。 */
  /* 桌面端抽屉是满高 flex 列（头固定 / 身滚动 / 导航吸底），
     导航不再贴在滚动内容末尾，故【不需要任何负 margin】——
     保留负值会让它溢出下缘、跑到左侧栏上露出第二个返回键（实测过）。 */
  /* 桌面端只剩一个横排「返回」键（4 个 tab 已隐藏，换页靠左侧常驻侧栏），
     不需要手机那样的 46px 触控高度，40px 紧凑但仍可点。 */
  .sheet .snav{flex:0 0 auto;margin:0;padding-bottom:0}
  .sheet .snav .sb, .ov-panel .snav .sb{height:40px}
  .sheet .db.dbs{padding-left:16px;padding-right:16px}
  .sheet .db.dbs > *:not(.snav){padding-left:0;padding-right:0}
  .ov-panel .ov-b{padding-left:18px;padding-right:18px}
  .ov-panel .ov-b > *:not(.snav){padding-left:0;padding-right:0}
  .mask{left:264px}
  .pagejoin,.pagezone,.pagemy,.pagespot,.pageproduce{left:264px;padding-bottom:40px}
  .pj-in,.pz-in,.pm-in,.ps-in,.pr-in{margin:0;padding-left:40px;padding-right:40px;max-width:760px}
  .spotov{left:264px}
  .ov-panel{left:auto;right:24px;bottom:24px;top:80px;width:470px;max-height:none;border-radius:14px;
    box-shadow:0 18px 50px rgba(42,33,24,.28);animation:slideIn .26s cubic-bezier(.32,.72,.32,1);
    display:flex;flex-direction:column;padding-bottom:0}
  .ov-panel .ov-b{flex:1 1 auto;overflow-y:auto;min-height:0}
  .ov-panel .snav{flex:0 0 auto;margin:0;padding-bottom:0}
  /* 桌面端抽屉内同样保留 4 个 tab。
     起初想只留返回键、换页靠左侧侧栏，但实测两处取舍不对：
     用户的视线在抽屉（屏幕中部偏左），要切页得把视线拉到屏幕最左边的侧栏；
     且 470px 宽放「返回 64 + 4×101」完全够用，并不拥挤。
     左侧侧栏是常驻全局导航，抽屉内这套是"就近可点"的补充，两者不冲突。 */
  .snav .sb[data-back]{width:60px;min-width:60px}
  /* 桌面端同样要给页面级导航显式高度 —— 侧栏化后 :root{--h-tab:0px}，
     .snav .sb 的 height:var(--h-tab) 会算成 0，导航塌成 1px、按钮文字溢出。
     这与抽屉内 .snav 是同一个坑（上一轮实测到侧栏底部露出第二个「返回」）。
     同时把 .xx-in 的底部留白从 --h-tab 换成固定值，否则会多留 22px 空白。 */
  .pgsn .sb{height:44px}
  .pj-in,.pz-in,.pm-in,.ps-in,.pr-in{padding-bottom:24px}
  /* .pgsn 是 fixed，而上面 .pageX 在桌面端是 left:264px（让开左侧栏）。
     fixed 元素按视口定位，不会自动继承父级的 left ——
     不显式给 left:264px 的话，导航会横穿左侧栏、压在侧栏 tab 上面。 */
  .pgsn{left:264px}
  @keyframes slideIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
}


@media (max-width:360px){
  .dcard{flex:0 0 142px}
  .dh2{font-size:19px}
}

/* ============================================================================
 * 小吃街区（STREETS 层）
 * 与 .scard（景区卡）保持同一套视觉语言，但用左侧色条+类型标签区分层次：
 * 景区卡=「去看」，街区卡=「去吃」，一眼能分辨。
 * ========================================================================== */
.streetwrap{display:none;padding:2px 0 4px}
.streetwrap.on{display:block}

.st-intro{margin:0 0 11px;padding:10px 12px;background:var(--greenbg);
  border-radius:10px;border-left:3px solid #5C8A6B}
.st-intro b{display:block;font-size:12.5px;color:#3F6B4C;font-weight:700;margin-bottom:4px}
.st-intro span{font-size:11.5px;color:var(--ink2);line-height:1.68}

.streetrow{display:block}

/* ---------- 非遗谱系（FY 场景专属，2026-10-05） ----------
   与 .streetwrap 同一套「场景专属块」模式：基础隐藏，.on 才显示。
   显隐切换由 app.js renderHeritage() 负责，与 renderStreets 对称。 */
.hgw{display:none;padding:2px 0 4px}
.hgw.on{display:block}

.hg-intro{margin:0 0 11px;padding:10px 12px;background:var(--greenbg);
  border-radius:10px;border-left:3px solid #5C8A6B}
.hg-intro b{display:block;font-size:12.5px;color:#3F6B4C;font-weight:700;margin-bottom:4px}
.hg-intro span{font-size:11.5px;color:var(--ink2);line-height:1.68}
.hg-intro u{text-decoration:underline dotted #3F6B4C;text-underline-offset:2px}

/* 手机 1 列；PC 断点显式给多列（防渗透教训：断点里必须写 display:grid 的列变化） */
.hg-grid{display:grid;grid-template-columns:1fr;gap:9px;padding:0 0 4px}

.hg-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 13px;
  position:relative;overflow:hidden}
.hg-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kc,var(--line))}
.hg-card h4{margin:0 0 9px;font-size:13.5px;color:var(--kc);font-weight:800}

.hg-lv{margin-bottom:8px}
.hg-lv:last-child{margin-bottom:0}
.hg-lv>b{display:inline-block;font-size:10.5px;font-weight:700;color:var(--ink2);
  background:var(--sand2);padding:1.5px 7px;border-radius:5px;margin-bottom:5px}
.hg-items{display:flex;flex-wrap:wrap;gap:5px 6px}
.hgitem{font-size:12px;color:var(--ink);line-height:1.55;
  padding:2.5px 8px;background:var(--sand);border-radius:6px}
/* 命中菜品 IP 的条目：虚线下划线 + 可点击；纯名录条目弱化显示 */
.hgitem:not(.plain){text-decoration:underline dotted var(--kc);text-underline-offset:2.5px;
  cursor:pointer;font-weight:600}
.hgitem:not(.plain):active{transform:scale(.97)}
.hgitem.plain{color:var(--ink2);background:transparent;border:1px dashed var(--line)}

.hg-src{padding:7px 2px 0;font-size:10.5px;color:var(--ink3);line-height:1.6}

/* ---------- 农特产谱系矩阵（V5.1 建，V5.2 改可折叠） ----------
   挂农特页顶部：基础隐藏，renderSpecialty() 加 .on 显示，dataset.built 防重建。
   ⚠ V5.2：整块改 <details> 默认收起——原常驻形态会把产品列表顶出一屏，
     用户点「果品」想看的却是全市域 43 项名录（"点开这个类目却没看到这个类目"）。
     收起态只占一行（.pg-sum），点品类 tab / 谱系条目时自动收起（app.js 三处）。 */
.pgw{display:none;padding:2px 0 4px}
.pgw.on{display:block}

.pg-det{margin:6px 0 10px;border:1px solid #E8D5AE;border-radius:10px;background:#FDF8EF;
  overflow:hidden}
.pg-sum{display:flex;align-items:center;gap:7px;padding:9px 12px;cursor:pointer;
  list-style:none;user-select:none;background:#FBF2E3;border-left:3px solid #C98A2E}
.pg-sum::-webkit-details-marker{display:none}
.pg-sum b{font-size:12.5px;color:#7A5210;font-weight:700;flex:0 0 auto}
.pg-sum>span{font-size:11.5px;color:var(--ink2);flex:1 1 auto;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* 箭头：默认指向右（收起），展开后转 90 度 */
.pg-chev{flex:0 0 auto;width:0;height:0;border-left:5px solid #7A5210;
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .18s}
.pg-det[open] .pg-chev{transform:rotate(90deg)}
.pg-det[open] .pg-sum{border-bottom:1px solid #E8D5AE}
.pg-det>.pg-intro{margin:11px 12px}
.pg-det>.pg-grid{padding:0 12px 4px}

.pg-intro{margin:10px 0 11px;padding:10px 12px;background:#FBF2E3;
  border-radius:10px;border-left:3px solid #C98A2E}
.pg-intro b{display:block;font-size:12.5px;color:#7A5210;font-weight:700;margin-bottom:4px}
.pg-intro span{font-size:11.5px;color:var(--ink2);line-height:1.68}
.pg-intro u{text-decoration:underline dotted #7A5210;text-underline-offset:2px}

/* 手机 1 列；PC 断点显式给多列（防渗透教训） */
.pg-grid{display:grid;grid-template-columns:1fr;gap:9px;padding:0 0 4px}

.pg-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 13px;
  position:relative;overflow:hidden}
.pg-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kc,var(--line))}
.pg-card h4{margin:0 0 9px;font-size:13.5px;color:var(--kc);font-weight:800}

.pg-lv{margin-bottom:8px}
.pg-lv:last-child{margin-bottom:0}
.pg-lv>b{display:inline-block;font-size:10.5px;font-weight:700;padding:1.5px 7px;
  border-radius:5px;margin-bottom:5px}
/* 认证四级配色：地标=绿 / 甘味=琥珀 / 名优=蓝 / 特色=灰 */
.pg-lv>b.lv-b{color:#3F6B4C;background:#E7F1E8}
.pg-lv>b.lv-g{color:#7A5210;background:#F8ECD4}
.pg-lv>b.lv-y{color:#2C5A8A;background:#E5EEF7}
.pg-lv>b.lv-s{color:var(--ink2);background:var(--sand2)}
.pg-items{display:flex;flex-wrap:wrap;gap:5px 6px}
.pgitem{font-size:12px;color:var(--ink);line-height:1.55;
  padding:2.5px 8px;background:var(--sand);border-radius:6px}
/* 命中产品库的条目：虚线下划线可点击；纯名录条目弱化 */
.pgitem:not(.plain){text-decoration:underline dotted #C98A2E;text-underline-offset:2.5px;
  cursor:pointer;font-weight:600}
.pgitem:not(.plain):active{transform:scale(.97)}
.pgitem.plain{color:var(--ink2);background:transparent;border:1px dashed var(--line)}

.pg-src{padding:7px 2px 0;font-size:10.5px;color:var(--ink3);line-height:1.6}
/* V5.2：折叠面板内 .pg-src 需左右内缩，与 intro/grid 对齐 */
.pg-det .pg-src{padding:7px 12px 11px}

/* ---------- 产品卡导购改造（V5.1） ---------- */
/* 图片位：卡顶部 4:3；无图占位写明文件名规则（与菜品层同纪律） */
.pimgbox{width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
  margin-bottom:11px;background:var(--sand2);border:1px solid var(--line)}
.pimgbox img{width:100%;height:100%;object-fit:cover;display:block}
.pimgbox.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:14px 16px;gap:5px;border-style:dashed;background:#FBF6EC}
.pimgbox.ph small{font-size:11px;color:var(--ink3);line-height:1.6}
/* 高亮闪烁（谱系条目/点位按钮跳转的落点提示） */
.pcard.hit,.skcard.hit{animation:pcardHit 2.4s ease}
@keyframes pcardHit{0%,60%{box-shadow:0 0 0 3px #E8A44C,0 8px 20px rgba(10,74,58,.14)}
  100%{box-shadow:0 4px 14px rgba(10,74,58,.08)}}
/* 导购行：购买点位 + 视频跳转 */
.pact{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.pbtn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  padding:6.5px 13px;border-radius:999px;border:1.5px solid #0A4A3A;color:#0A4A3A;
  background:#fff;cursor:pointer}
.pbtn:active{transform:scale(.97)}
.pbtn-video{border-color:#0F6E56;color:#0F6E56;text-decoration:none}
.pbtn-video em{font-style:normal;font-weight:500;font-size:11px;opacity:.75}

/* ---------- 特产店铺视图（V5.1） ---------- */
.sk-intro{margin:2px 0 12px;padding:10px 12px;background:#FBF2E3;border-radius:10px;
  border-left:3px solid #C98A2E}
.sk-intro b{display:block;font-size:12.5px;color:#7A5210;font-weight:700;margin-bottom:4px}
.sk-intro span{font-size:11.5px;color:var(--ink2);line-height:1.68}

.sk-group{margin-bottom:14px}
.sk-gt{font-size:12.5px;font-weight:800;color:#7A5210;margin-bottom:8px}
.skcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 13px;
  margin-bottom:9px;position:relative;overflow:hidden}
.skcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#C98A2E}
.skcard.v1::before{background:var(--line)}
.skh{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.skh b{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.4;flex:1}
.skv{font-size:10.5px;font-weight:700;flex:0 0 auto;padding:1.5px 7px;border-radius:5px;
  color:#0F6E56;background:#E1F5EE}
.skcard.v1 .skv{color:var(--ink2);background:var(--sand2)}
.skshort{font-size:11.5px;color:#7A5210;margin-bottom:3px}
.skaddr{font-size:12px;color:var(--ink2);line-height:1.6}
.sknote{font-size:11.5px;color:var(--ink3);line-height:1.65;margin-top:3px}
.sksells{display:flex;flex-wrap:wrap;gap:5px 6px;margin-top:7px}
.ppill{font-size:11.5px;padding:2.5px 9px;background:#F8ECD4;color:#7A5210;border-radius:6px;
  text-decoration:underline dotted #7A5210;text-underline-offset:2.5px;cursor:pointer;font-weight:600}
.ppill:active{transform:scale(.97)}
.sksrc{padding-top:6px;margin-top:7px;border-top:1px dashed var(--line);
  font-size:10.5px;color:var(--ink3);line-height:1.6}

/* ---------- V5.3 认证企业名录视图（.cf-*）----------
   数据源 62 号文两附件 150 家；只显示企业名/县区/主营/认证/地址（隐去姓名电话） */
.cf-intro{margin:2px 0 12px;padding:10px 12px;background:#EDF6E4;border-radius:10px;
  border-left:3px solid #3B6D11}
.cf-intro b{display:block;font-size:12.5px;color:#2C5309;font-weight:700;margin-bottom:4px}
.cf-intro span{font-size:11.5px;color:var(--ink2);line-height:1.68}

.cf-group{margin-bottom:14px}
.cf-gt{font-size:12.5px;font-weight:700;color:var(--kc,#3B6D11);margin-bottom:8px;
  padding-left:8px;border-left:3px solid var(--kc,#3B6D11)}

.cfcard{background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 12px;
  margin-bottom:9px}
.cfh{display:flex;align-items:flex-start;gap:7px;margin-bottom:6px}
.cfh b{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.4}
.cfcg{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px}
.cfbadge{font-size:10.5px;font-weight:700;padding:1.5px 7px;border-radius:5px;
  background:#EAF3DE;color:#2C5309;border:1px solid #C0DD97}
.cfbadge.b-0{background:#E1F5EE;color:#085041;border-color:#9FE1CB}
.cfbadge.b-1{background:#FBF2E3;color:#7A5210;border-color:#E8D5AE}
.cfbadge.b-2{background:#EDF6E4;color:#2C5309;border-color:#C0DD97}
.cfbadge.b-3{background:#EAF3DE;color:#3B6D11;border-color:#C0DD97}
.cfbadge.b-4{background:#F1EFE8;color:#444441;border-color:#D3D1C7}
.cfprod{font-size:12px;color:var(--ink2);line-height:1.65;margin-bottom:5px}
.cfprod em{font-style:normal;font-size:10.5px;font-weight:700;color:#3B6D11;
  background:#EAF3DE;padding:1px 6px;border-radius:4px;margin-right:6px}
.cfaddr{font-size:11.5px;color:var(--ink3);line-height:1.6;margin-bottom:6px}
.cfsells{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.cfgap{font-size:11px;color:var(--ink3);background:var(--sand2);border:1px dashed var(--line2);
  border-radius:5px;padding:3px 8px;display:inline-block;margin-bottom:6px}
.cfsrc{font-size:10.5px;color:var(--ink3);line-height:1.55;padding-top:6px;
  border-top:1px dashed var(--line2)}

/* 产品卡内「谁在生产」企业清单 */
.pcfs{display:flex;flex-direction:column;gap:5px}
.pcf{font-size:11.5px;color:var(--ink2);line-height:1.55;padding:5px 8px;
  background:var(--sand2);border-radius:6px;border-left:2px solid #97C459}
.pcf i{font-style:normal;font-size:10px;font-weight:700;color:#2C5309;
  background:#EAF3DE;padding:1px 5px;border-radius:4px;margin-right:6px}

.stcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 14px;
  margin-bottom:11px;position:relative;overflow:hidden;cursor:pointer;transition:.16s}
.stcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kc,var(--line))}
.stcard:active{transform:scale(.99);border-color:var(--gold)}

.sth{display:flex;align-items:center;gap:6px;margin-bottom:7px;flex-wrap:wrap}
.stkind{font-size:11px;font-weight:700;color:var(--kc);background:var(--sand2);
  padding:2.5px 8px;border-radius:5px}
/* 时段标签用实色底，与景区的等级标签区分开——街区更需要先看时段 */
.stslot{font-size:10.5px;font-weight:700;color:#fff;padding:2.5px 7px;border-radius:5px;
  font-variant-numeric:tabular-nums}

.stcard h3{font-size:16.5px;font-weight:700;margin-bottom:6px;line-height:1.35}
.stmeta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--ink2);margin-bottom:6px}
.stmeta span{font-variant-numeric:tabular-nums}
.staddr{font-size:11.5px;color:var(--ink3);line-height:1.6;margin-bottom:7px}

.stscale{display:inline-block;font-size:11px;color:#fff;background:var(--kc,var(--ink3));
  padding:2px 8px;border-radius:5px;margin-bottom:8px;font-weight:600}
.strec{font-size:13px;color:var(--ink2);line-height:1.72;margin-bottom:9px}

.stseat{background:var(--greenbg);border-radius:8px;padding:8px 10px;margin-bottom:9px}
.stseat b{display:block;font-size:11px;color:var(--green);font-weight:700;margin-bottom:5px;letter-spacing:.04em}
.stdish{display:inline-block;font-size:11.5px;color:var(--ink2);background:#fff;
  border:1px solid var(--line2);border-radius:5px;padding:2.5px 8px;margin:0 5px 4px 0;cursor:pointer}
.stdish:active{border-color:var(--fire);color:var(--fire)}
.stdish.none{color:var(--ink3);background:transparent;border-style:dashed;cursor:default}
/* 弹层里的「里面有什么」不需要再套一层绿底，避免视觉过重 */
.ov-seat{background:transparent;padding:0;margin:0}
.ov-seat .stdish{background:var(--sand2)}

.stcnt{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--ink2);
  margin-bottom:10px;font-variant-numeric:tabular-nums}

.stact{display:flex;gap:8px}
.stact button{flex:1;padding:9px;border-radius:8px;font-size:13px;font-weight:600}


/* ============================================================================
   PC 大屏布局（V4.5）—— 1920×1080 投影 / 1440×900 会议室 / 2560×1440
   ============================================================================
   ⚠⚠⚠ 先记一次踩坑：这一版【推翻重做过一次】。
   最初用的是 body{display:grid} 三栏（264px / 1fr / 34%），
   1920×1080 实测直接崩了两处：

     ① sticky 链【物理上不可能生效】
        countyTop = -379（滚 600px 后整条链飞出视口）。
        根因不是 top 值写错，而是 CSS Grid 规范：grid item 的包含块是
        【grid area】。我把 countybar 放在 grid-row:2，而行高由内容决定
        （= countybar 自身高度 93px），于是它的包含块高度就等于自身高度，
        没有任何"可移动空间" —— sticky 的定义是"在包含块内偏移"，
        包含块不动 = 永远没东西可粘。手机上 sticky 正常是因为
        body 是普通流，包含块是整个文档。
        ⚠ 结论：sticky 与 grid item 在同一容器里【互斥】，
          想用 sticky 就不能把它变成 grid item。

     ② .mapwrap 高度塌成 40px
        grid-row:2/9 + height:auto，而 #map{height:100%} ——
        父高 auto 时百分比高度按内容算，#map 无内容（未接 key）→ 0。

   改用的方案（全部实测通过）：
     ❌ 不用 grid。用【普通文档流 + fixed 地图】。
     · 左侧 264px  既有常驻侧栏（position:fixed，本来就不参与流）
     · 中间列      筛选/菜品/列表，保持普通流 → sticky 恢复正常
     · 右侧 34vw   地图 position:fixed 常驻，比 sticky 更可靠：
                   投影讲解时地图不能被"内容太短导致吸顶范围不足"坑掉
     · 两列的分界靠 body 的 padding-right 让位，不需要 grid。

   为什么断点是 1100 而不是 900：
   900—1099px 是"手机横屏/平板"区间，横向余量不足 34vw 给地图，
   强行上三栏会把中间列压到 600px 以下、卡片挤成一条。
   1100px 起中间列最少还有 730px，双列门店卡放得下。 */

@media (min-width:1100px){
  /* ---------- 骨架：让出两侧 ---------- */
  body{
    /* 左侧让开常驻侧栏；右侧让开常驻地图。
       ⚠ padding-right 用 calc(34vw + 28px)：28px 是地图左边框外的呼吸位，
         少给一点门店卡会紧贴地图边框，看着像粘连。 */
    padding-left:264px;
    padding-right:calc(34vw + 28px);
    padding-bottom:0;
  }

  /* ---------- 地图：固定常驻，右侧整列 ---------- */
  .mapwrap{
    position:fixed;        /* 不是 sticky —— 见开头「为什么不用 sticky」 */
    top:0;right:0;bottom:0;left:auto;
    width:34vw;height:auto;
    border-left:1px solid var(--line);
    border-radius:0;
    z-index:30;            /* 低于 countybar(46)，筛选条压过地图是对的 */
    box-shadow:none;
    /* 覆盖两处旧值：桌面 900 断点里的 height:40vh（fixed 下由 top/bottom 决定）
       与基础样式里的 height:38vh/min-height:230px（min-height 会把
       小视口下的地图顶出下边界）。 */
    height:auto;min-height:0;
  }
  #map{height:100%}
  /* 地图内的浮动按钮在 fixed 下同样按视口定位，
     .mbtn 的 bottom/top 沿用原值即可，但要去掉桌面 900 断点里
     为「地图夹在流中」写的偏移（padding-left:278px 那套）。 */
  .mapwrap .mbtn{right:18px}
  .mapwrap .mstat{left:18px;right:18px}

  /* ---------- 头部：PC 端压扁 ---------- */
  /* 900 断点里给头部每块都加了 padding-left:278px（当时靠 body padding 让位），
     现在 body 已经 padding-left:264px，这层额外缩进就成了双重让位 ——
     实测中间列内容左缘在 x=288 而非 x=264，右侧又贴住地图，很难看。
     全部归零。 */
  /* 顶栏改左右并排：手机是「品牌」上一行、「此刻」下一行（118px），
     PC 横向有 1000px+，并排后只占 62px，省下的 56px 全给内容。
     ⚠ margin-top:0 必须显式清掉 —— 基础样式给 .now 加了 margin-top:9px，
       不清的话并排布局下会多出 9px 的错位间隙。 */
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding:12px 20px}
  .topbar .logo{width:36px;height:36px;flex:0 0 36px;font-size:19px;border-radius:10px}
  .topbar .bt{font-size:17px}
  .topbar .bs{font-size:11px}
  .brand{gap:11px}
  /* ⚠ .nowr 必须 nowrap + min-width:0，否则 1440px 档（中间列仅 658px）
     提示语会折成两行，顶栏从 62px 撑到 99px —— 实测头部合计 265px，
     占 900 视口的 29%，投影时内容被挤到屏外。 */
  .now{margin-top:0;flex:0 1 auto;min-width:0;max-width:58%;padding:8px 16px;gap:12px}
  .nowt{font-size:14.5px;flex:0 0 auto}
  .nowr{font-size:12.5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .bs{white-space:nowrap}

  /* 县区条：PC 上一行放得下 7 个入口，不用横向滚动 */
  .countybar{padding-top:0}
  .cbar-scroll{justify-content:flex-start;padding:0 10px}
  .cbtn{padding:7px 13px 6px;font-size:13.5px}
  .cbtn small{font-size:10px;margin-top:0}
  .cbtn small{display:inline;margin-left:5px}   /* 菜品数与县区名同行，省一整行 */
  /* 说明条压成一行细条：省下的 8px 直接给内容区。
     ⚠ 1440px 档说明文字会折行，实测 countybar 从 64px 涨到 68px，
       nowrap 后稳定在 54px。 */
  .cbar-info{padding:3px 16px 4px;font-size:10.5px;white-space:nowrap;overflow:hidden}
  .cbar-info span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* 场景条：手机 3 列两排 → PC 一排平铺，列数按可用宽度自适应。

     ⚠⚠ 列数不能一律写死 6 —— 这是本轮看 1440 截图才发现的。
       每格宽度 = (中间列 − 16 内边距 − 5×6 间距) / 列数，
       而中间列随视口变化（地图占 34vw）：
         1280 → 552px → 6 列时每格仅  84px
         1440 → 658px → 6 列时每格仅 102px
         1920 → 975px → 6 列时每格  155px ✓
       1440 实测截图：「宴席大餐 6」「非遗美食 3」「小吃街区 8」
       全被截成「宴席大…」「非遗…」「小吃…」，
       右侧的菜品计数根本看不见 ——
       而那个数字正是判断"该点哪个"的唯一依据。

       一格至少要 148px 才放得下「宴席大餐」（4 字 ×14.5px ≈ 58px
       + 计数 + gap + 左右内边距 16px + 图标 17px）。
       所以列数按断点分档，每档都保证每格 ≥148px：
         1100—1339 → 3 列（1280 档每格 171px）
         1340—1679 → 4 列（1440 档 147px、1560 档 165px）
         1680—1959 → 5 列（1800 档中间列 968px，每格 181px）
         1960+      → 6 列（1920 档每格 155px、2560 档 238px）

     ⚠ top 用 var(--h-county) 而不写死 66px —— 那个 66 是折中值
       （实测 1440 档 60px、1920 档 63px、2560 档 63px），
       差几像素场景条与县区条之间就裂开一条缝。
       改为与手机端共用同一个运行时实测变量（见 tagpanel 处的说明），
       两端永远一致，改样式时也不必再手动对数字。 */
/* ⚠⚠ 900 断点这里显式再写一次 display:grid ——
   V4.7 时代基础样式是 flex 单行横滚，这里【必须】覆写 display，
   否则 1100/1400/1680/1880 四档的 grid-template-columns 会全部失效
   （父级不是 grid，属性被忽略），PC 场景条退化为单行横滚 ——
   属性值合法、无报错、前几格看着也对，只有把 6 个场景全数出来
   才发现后两个永远看不见。这是典型的"基础样式改了、断点没跟上"。

   ⚠ V4.8 起基础样式已改回 grid，两端同构，这条覆写【不再是必需的】。
     仍保留的理由：① 显式声明比隐式继承更抗改 —— 将来谁把基础样式
     又改成 flex，这里不用同步改（PC 端永远不会被渗透）；
     ② 它与下方四档 grid-template-columns 同处一个语义组，
     删掉会让读者以为 PC 侧没有布局声明。
     一句话：留着是刻意的冗余，不是忘了删。 */
.scenes{
  display:grid;
  position:sticky;top:var(--h-county, 62px);z-index:42;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
  padding:7px 14px 8px;
  left:264px;right:calc(34vw + 28px);
}
/* PC 侧不使用 .scenes::after（网格铺满，没有"右边还有内容"）。
   ⚠ V4.8：手机侧的渐隐已随单行横滚一起删除，这条现在是对全体生效的
     "清空"声明 —— 保留它，将来谁在基础样式里加回 ::after（例如又改回横滚）
     也只会在 PC 断点被清掉，PC 端观感不会被带偏。 */
.scenes::after{content:none}
/* PC 侧 .sc 由 grid 列宽决定宽度，收回任何可能的 flex 尺寸约束 */
.sc{flex:initial;width:auto;padding:7px 8px;font-size:13.5px;border-radius:8px}
  .sc i{width:17px;height:17px;font-size:11px}

  /* ⚠ V4.7：原此处有一条"标签面板与品类条不再吸顶"的规则组
     （.tagpanel / .cats / .ct2 / .tagbar-btn / .taggrid 五条）。
     两块 UI 已在 index.html 下线，这五条规则一并删除 ——
     留着它们的唯一效果是让"到底还有没有第三、四级吸顶"变得可疑，
     而实际上吸顶链已经收敛为 countybar + scenes 两级（见文件头说明）。
     ⚠ countybar + scenes 两块吸顶是刻意的：这两个是"我现在在哪、
       正在看哪类" 的定位信息，滚走了观众就失去坐标。 */

  /* ---------- 菜品横卡：加大，一屏看更多 ---------- */
  .dishrow{padding:12px 18px 14px;gap:11px}
  .dh2{font-size:16px;margin-bottom:9px}
  .dcard{flex:0 0 190px;padding:11px 13px}
  .dcard h4{font-size:15.5px}
  .dcard .dp,.dcard .dc{font-size:12px}

  /* ---------- 门店列表：双列瀑布 ---------- */
  .list{padding:12px 18px 30px;max-width:none}
  .lhead b{font-size:15px}
  .lhead span{font-size:12px}
  .card{padding:13px 15px}
  .card h3{font-size:15.5px}

  /* ---------- 街区（小吃街）PC 化：两列 ---------- */
  .streetwrap{padding:2px 0 6px}
  .streetrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .stcard{flex:0 0 auto;margin-bottom:0}
  .stcard h3{font-size:16px}
  .st-intro{padding:11px 14px}
  .st-intro span{font-size:12px}
  /* 非遗谱系 PC 化：三列（甘州/民乐条目多，用 3 列摊平高度） */
  .hgw{padding:2px 0 6px}
  .hg-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .hg-intro{padding:11px 14px}
  .hg-intro span{font-size:12px}
  .hgitem{font-size:12.5px}
  /* V5.1 农特产谱系矩阵：PC 三列；店铺视图分组内两列网格 */
  .pg-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .pg-intro{padding:11px 14px}
  .pg-intro span{font-size:12px}
  .pgitem{font-size:12.5px}
  /* PC 导航列数：V5.3 起 tab 数从 8 增到 9（+认证企业），4 列会变 4+4+1、
     第 9 个 tab 孤零零掉第三行（截图实测）。改用 3 列三排，手机/PC 一致；
     农特页内容列实测仅 680px，3 列每列约 220px，计数不会被截断 */
  .pr-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  /* V5.5 游客模式：清单总览卡 PC 两列（8 张卡摊平，不用滚很久） */
  .gf-lists{grid-template-columns:1fr 1fr;gap:11px}
  .pr-nav-gift{grid-template-columns:repeat(3,minmax(0,1fr))}
  .prlist .sk-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .prlist .sk-gt{grid-column:1/-1}
  .prlist .skcard{margin-bottom:0}
  .prlist .sk-intro{margin-bottom:14px}
}
/* ---------------------------------------------------------------------------
   门店列表列数：按「每张卡 320—380px」这个目标反推断点
   ---------------------------------------------------------------------------
   ⚠⚠⚠ 原来的断点是错的（1560px 才三列），本轮实测发现并重排。
   起因：PC 段被第 17 轮的街区基础样式覆盖（见文件末尾红线注释），
   街区卡恢复成三列后，我顺手量了门店卡在 1440 下的实际观感 ——
   1440×900 是会议室最主流的投影分辨率，而它落在 1100—1560 区间里
   只能单列，中间列 658px 全给一张卡，一行能塞 30 多个字，
   投影时行长过长、眼睛从行尾扫回行首容易漏行。

   反推各档的中间列宽（= 视口 − 264 侧栏 − 地图宽 − 28 呼吸位）：
     1280 → 552   单列 552px  偏宽但可接受（1366 笔记本投影常见）
     1440 → 658   单列 658px  太宽 ← 会议室主流，必须解决
     1560 → 737   两列 362px  刚好
     1920 → 1052  三列 342px  刚好
     2560 → 1500  四列 366px  刚好

   所以断点定在 1340（两列）与 1800（三列）：
     · 1340—1799 两列，每张 315—478px
     · 1800 起三列（此时地图已收窄到 30vw，中间列回到 968px，每张 314px）
     · 2400 起四列（2560 下每张 366px，再多就每张太窄、标签行要折三行）
   ⚠ 为什么 1340 而不是 1280：1280 档两列只有 270px，
     门店卡里「清真/本地特色/可直播打卡/本地人推荐/适合早餐」5 个标签
     会折成 3 行，卡片比单列还高。留 60px 余量到 1340（两列 296px 起）。

   ⚠ 1560 那个旧断点已删除。原来它在 1560 就跳三列，
     实测每张只有 237px —— 比两列的 362px 明显更挤，属于"数字看着对、观感错"。 */
/* 门店列表两列 + 场景条四列。
   ⚠ 断点 1400 而不是 1340：1340 档场景条四列时每格只有 137px，
   放不下「宴席大餐」（实测每格 ≥148px 才够，见 1100 断点 .scenes 处的推导）。 */
@media (min-width:1400px){
  .list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
  .list .lhead,.list .empty{grid-column:1/-1}
  /* 街区卡内容更长（营业时间+介绍段+里面有什么），
     1340 起与门店卡同步放两列 */
  .streetrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 场景条四列（1440 档每格 147px，1560 档 165px）——
     见 1100 断点 .scenes 处的「每格 ≥148px」推导 */
  .scenes{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* ---- 1440px 档：会议室投影，字号轻量上调 -------------------------------
   只放大「文字」，不动任何横向尺寸（菜品卡仍 190px，保证 3 张并排）。
   会议室（1440×900）与 1080p 投影是同一批使用场景，观看距离 2—5 米，
   实测原字号（菜品标题 15.5px、门店名 15.5px）在 3m 外相当于手机的 8px。 */
@media (min-width:1440px){
  .topbar .bt{font-size:18px}
  .nowt{font-size:15.5px}
  .nowr{font-size:13px}
  .cbtn{font-size:14px;padding:8px 14px 7px}
  .cbtn small{font-size:10.5px}
  .sc{font-size:14.5px;padding:8px 10px}
  .dh2{font-size:17px}
  .dcard h4{font-size:16.5px}
  .dcard .dp,.dcard .dc{font-size:12.5px}
  .list .lhead b{font-size:16px}
  .card{padding:14px 16px}
  .card h3{font-size:16.5px}
  .card .cm,.card .ca,.card .cs{font-size:12.5px}
  .stcard h3{font-size:17px}
  .stcard .stmeta,.stcard .staddr,.stcard .strec{font-size:12.5px}
  .st-intro span{font-size:12.5px}
}
/* ---- 1600px 档：1080p 投影，字号完整上调一档 --------------------------- */
@media (min-width:1600px){
  .topbar .bt{font-size:19px}
  .topbar .bs{font-size:12px}
  .nowt{font-size:16px}
  .nowr{font-size:13.5px}
  .cbtn{font-size:14.5px;padding:9px 15px 8px}
  .cbtn small{font-size:11px}
  .sc{font-size:15px;padding:9px 10px}
  .dh2{font-size:17.5px}
  /* ⚠ 这里才把菜品卡加宽到 204px：1600 档可用 764-30=734px，
     204px 能放 3 张（3×204+2×11=634 < 734），1440 档放不下所以不加。 */
  .dcard{flex:0 0 204px;padding:13px 15px}
  .dcard h4{font-size:17px}
  .dcard .dp,.dcard .dc{font-size:13px}
  .list .lhead b{font-size:16.5px}
  .card{padding:15px 17px}
  .card h3{font-size:17px}
  .card .cm,.card .ca,.card .cs{font-size:13px}
  .stcard h3{font-size:17.5px}
  .stcard .stmeta,.stcard .staddr,.stcard .strec{font-size:13px}
  .st-intro span{font-size:13px}
}
/* ---- 1680px 起：场景条五列（1800 档每格 181px）------------------------- */
@media (min-width:1680px){
  .scenes{grid-template-columns:repeat(5,minmax(0,1fr))}
}
/* 1800px 起：地图收窄到 30vw，中间列宽裕到能放三列卡
   2560px 下 34vw=870 太大，收到 30vw=768px 后中间列回到 1495px。 */
@media (min-width:1800px){
  body{padding-right:calc(30vw + 28px)}
  .mapwrap{width:30vw}
  .scenes{right:calc(30vw + 28px)}
  .dcard{flex:0 0 206px}
  /* 三列：1920 下每张 342px、1800 下 314px，都在目标区间内 */
  .list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .streetrow{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* 抽屉/弹层跟着加宽，288px 侧栏下 470px 抽屉比例失衡 */
  .sheet{width:540px}
  .ov-panel{width:540px}
}
/* ---- 1960px 起：场景条六列（1920 档每格 155px、2560 档 238px）---------
   1920×1080 是投影主场景，六个场景平铺一排最爽，
   讲解时"张掖一天怎么吃"不用点开就能看全。
   断点设在 1960 而不是 1920：1920 整宽时每格 155px 已达标，
   但 1959（某些 2K 笔记本缩放后）会掉回五列、每格 175px 也够，
   两档差别不大，取个整数好记。 */
/* 1880px 起：场景条六列平铺。
   ⚠ 断点 1880 而不是 1920：1800 断点已把地图收窄到 30vw，
     1880 档中间列就有 1024px、每格 163px 已达标 ——
     而 1920×1080 是投影主场景，必须让它正好六列一排
     （实测 5 列时第 6 个「小吃街区」被挤到第二排独占一格，右侧留大片空白）。 */
@media (min-width:1880px){
  .scenes{grid-template-columns:repeat(6,minmax(0,1fr))}
}
/* 2K 及以上：四列。
   2560 下三列每张 492px，比 1920 的 342px 宽了近 150px ——
   门店卡里「清真/本地特色/可直播打卡/本地人推荐/适合早餐」这类标签行
   会被拉得很长，标签之间出现大片空白（截图上一眼就能看出来）。
   四列每张 366px，与 1920 档观感一致。 */
@media (min-width:2400px){
  .list{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ============================================================================
 * V6.8 美食文化页（cultureRow）& 美食攻略区（guideRow）
 * 配色沿用 :root 主题变量；浅色底 + 绿描边（V6.7 边框纪律）。
 * ========================================================================== */
/* ---- 美食文化：文章卡 ---- */
.cul-grid{display:grid;gap:12px}
@media (min-width:760px){.cul-grid{grid-template-columns:1fr 1fr}}
.cul-card{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:14px 15px;position:relative;overflow:hidden}
.cul-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--kc,var(--fire))}
.cul-tag{display:inline-block;font-size:10.5px;font-weight:700;color:#fff;
  background:var(--kc,var(--fire));padding:2px 9px;border-radius:6px;margin-bottom:8px}
.cul-card h3{margin:0 0 4px;font-size:16px;line-height:1.4;color:var(--fire-d);font-weight:800}
.cul-sub{font-size:11.5px;color:var(--ink3);margin-bottom:8px}
.cul-quote{margin:0 0 10px;padding:7px 11px;font-size:12.5px;color:var(--fire);
  background:var(--sand);border-left:3px solid var(--line);border-radius:0 8px 8px 0;
  line-height:1.6}
.cul-card p{margin:0 0 8px;font-size:13px;line-height:1.75;color:var(--ink)}
.cul-src{margin-top:9px;padding-top:8px;border-top:1px dashed var(--line2);
  font-size:10.5px;color:var(--ink3)}
/* ---- 美食攻略：折叠卡 ---- */
.gw{margin-bottom:14px}
.gw-head{display:flex;align-items:baseline;gap:8px;margin:0 0 9px}
.gw-head>b{font-size:14.5px;color:var(--fire-d)}
.gw-head>span{font-size:11px;color:var(--ink3)}
.g-grid{display:grid;gap:9px}
.g-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.g-card summary{display:flex;align-items:center;gap:8px;padding:11px 13px;
  cursor:pointer;list-style:none;user-select:none}
.g-card summary::-webkit-details-marker{display:none}
.g-card[open] summary{border-bottom:1px dashed var(--line2)}
.g-tag{flex:none;font-size:10.5px;font-weight:700;color:var(--fire);
  background:var(--greenbg, #E3F1EA);border:1px solid var(--line2);
  padding:2px 8px;border-radius:6px}
.g-card summary>b{flex:1;font-size:13.5px;color:var(--fire-d);line-height:1.4}
.g-chev{flex:none;width:8px;height:8px;border-right:2px solid var(--ink3);
  border-bottom:2px solid var(--ink3);transform:rotate(45deg);transition:transform .18s}
.g-card[open] .g-chev{transform:rotate(-135deg)}
.g-sub{padding:8px 13px 0;font-size:11.5px;color:var(--ink3)}
.g-card>p{padding:0 13px;margin:7px 0 0;font-size:13px;line-height:1.75;color:var(--ink)}
.g-card>p:last-of-type{margin-bottom:0}
.g-tips{margin:9px 13px 0;padding:7px 11px;font-size:12px;color:var(--fire-d);
  background:var(--greenbg, #E3F1EA);border-radius:8px;line-height:1.6}
.g-tips::before{content:"💡 "}
.g-src{margin:9px 13px 12px;padding-top:8px;border-top:1px dashed var(--line2);
  font-size:10.5px;color:var(--ink3)}
/* ---- V6.8 板块互链（美食文化 ↔ 美食攻略）---- */
.xlink-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:12px;padding:11px 14px;background:#fff;border:1px solid var(--line);
  border-radius:12px}
.xlink-bar>span{font-size:12.5px;color:var(--ink2)}
.xlink{flex:none;border:1.5px solid var(--fire);color:var(--fire-d);background:var(--greenbg,#E3F1EA);
  font-size:13px;font-weight:700;padding:7px 14px;border-radius:9px;cursor:pointer}
.xlink:active{background:var(--fire);color:#fff}
/* ---- V6.9 六县一馆：场景横幅 + 县区入口条 + 溯源档案徽章 ---- */
.pbanner{margin-bottom:12px;padding:34px 16px 16px;border-radius:13px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(42,60,30,.1) 0%,rgba(30,42,22,.78) 78%),url("https://workbuddy-space-static.codebuddy.work/image/fOIHEDVwsGGGZMgMMQ3PQ0.jpg") center 45%/cover no-repeat;
  border:1px solid var(--line)}
.pbanner-in b{display:block;font-size:16.5px;font-weight:800;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.45)}
.pbanner-in span{display:block;margin-top:3px;font-size:11.5px;color:#F2EADA;
  text-shadow:0 1px 3px rgba(0,0,0,.45);line-height:1.6}
.pc-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px;
  padding:9px 11px;background:#fff;border:1px solid var(--line);border-radius:11px}
.pc-bar-t{flex:none;font-size:11px;font-weight:800;color:var(--fire-d);margin-right:2px}
.pcc{border:1px solid var(--line2);background:var(--sand,#FAF6EE);color:var(--ink2);
  font-size:12px;padding:4.5px 10px;border-radius:8px;cursor:pointer}
.pcc i{font-style:normal;font-size:10.5px;color:var(--ink3);margin-left:2px}
.pcc.on{background:var(--fire);border-color:var(--fire);color:#fff;font-weight:700}
.pcc.on i{color:rgba(255,255,255,.75)}
.pcc:disabled{opacity:.4;cursor:not-allowed}
.ptrace{flex:none;margin-left:auto;border:1px solid var(--fire2);color:var(--fire);
  background:#fff;font-size:10.5px;font-weight:700;padding:2.5px 8px;border-radius:7px;cursor:pointer}
.ptrace:active{background:var(--fire);color:#fff}
/* ---- V6.10 美食攻略独立页：按需选攻略 chips + 一日食程时间轴 ---- */
.gneed-bar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.gneed{border:1px solid var(--line2);background:#fff;color:var(--ink2);
  font-size:12.5px;padding:6.5px 13px;border-radius:18px;cursor:pointer}
.gneed.on{background:var(--fire);border-color:var(--fire);color:#fff;font-weight:700}
.g-tl{display:flex;flex-wrap:wrap;gap:6px;margin:9px 13px 0}
.g-tl-it{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--fire-d);
  background:var(--greenbg,#E3F1EA);border:1px solid var(--line2);border-radius:8px;
  padding:4px 9px;line-height:1.4}
.g-tl-it i{font-style:normal;font-weight:800;color:var(--fire)}

/* ============================================================================
 * V6.14 美鉴整改：标签三色制 + 农特页筛选区合并
 * ========================================================================== */
/* +N 收纳标签：中性、不参与彩色竞争 */
.ctag-more{background:#F1EFE8 !important;color:#6E5D48 !important;font-weight:700}

/* 农特页合并筛选区：县区条 + 认证条 + 当前筛选 chips 同住一张卡，
   两条之间用细分隔线——替代原先「四条横条连续堆叠」的无主次布局 */
.pfilter{background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:10px 11px 9px;margin:0 0 14px}
.pfilter .pc-bar{margin:0;padding:0;background:transparent;border:none}
.pfilter .cg-bar{margin:9px 0 0;padding:8px 10px 7px}
.pf-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:9px;
  padding-top:8px;border-top:1px dashed var(--line2)}
.pf-chips:empty{display:none}
.pf-t{font-size:11px;font-weight:700;color:var(--ink3);flex:0 0 auto}
.pf-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:14px;border:1px solid var(--line2);
  background:var(--sand);color:var(--fire-d);cursor:pointer;transition:.15s}
.pf-chip i{font-style:normal;font-size:10px;opacity:.7}
.pf-chip:hover{border-color:var(--fire);background:#fff}
.pf-all{border-style:dashed;color:var(--ink3);font-weight:500}
.pf-all:hover{color:var(--ink)}
/* 谱系矩阵后移到列表之后，作为「深挖区」给一个区隔标题感的上间距 */
.pgw{margin-top:20px}
/* ============================================================================
 * V6.17 张掖农业绿·纹路系统（2026-11-03 佳佳指定方向）
 * 「张掖的农业绿」：主绿 #0F6E56 框架不动，底色注入绿意，底部导航绿底带纹路。
 * 纹路 = 双向斜纹（草编/面编）+ 金色谷粒点阵（麦穗意象），纯 CSS 渐变零外链。
 * ========================================================================== */
/* ---- 1. 底色绿化：米黄 → 农业绿奶油（全站氛围） ---- */
:root{--sand:#F0F5EE;--sand2:#E7F0E4}
/* ---- 2. 底部导航：农业绿底 + 编织斜纹 + 谷粒金点 ---- */
.tabbar{
  background:
    radial-gradient(rgba(217,164,65,.16) 1px, transparent 1.4px),
    repeating-linear-gradient(48deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-48deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
    linear-gradient(180deg,#116348 0%,#0A4A3A 100%);
  background-size:15px 15px,auto,auto,auto;
  border-top:1.5px solid #D9A441}
.tb{color:rgba(214,236,220,.72)}
.tb.on{color:#F5C563;font-weight:800}
.tb.on i::after{background:#0B4F3C}
.tb .badge-n{background:#E08A2A;color:#fff}
/* 桌面端左侧栏同步绿纹（覆盖 900px 断点白底） */
@media (min-width:900px){
  .tabbar{
    background:
      radial-gradient(rgba(217,164,65,.16) 1px, transparent 1.4px),
      repeating-linear-gradient(48deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px),
      repeating-linear-gradient(-48deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
      linear-gradient(180deg,#116348 0%,#0A4A3A 100%);
    background-size:15px 15px,auto,auto,auto;
    border-right:1.5px solid #D9A441;border-top:none}
  .tb.on{color:#F5C563;background:rgba(245,197,99,.1);border-left-color:#F5C563}
  .tb.on i::after{background:#0B4F3C}
}
/* ---- 3. 场景条选中态：实心农业绿渐变（呼应绿主题） ---- */
.scenes .sc.on{background:linear-gradient(135deg,#1B8A6B,#0F6E56)!important;
  color:#fff!important;border-color:transparent!important;
  box-shadow:0 3px 12px rgba(15,110,86,.38)!important}
.scenes .sc.on .tx{color:#fff!important}
.scenes .sc.on small{color:rgba(255,255,255,.88)!important}
.scenes .sc.on .i{background:#fff!important;box-shadow:none}
/* ---- 4. 顶栏与底部同色同纹：农业绿渐变 + 编织斜纹 + 谷粒金点 + 金边（V6.18 佳佳要求顶尾一致） ---- */
.topbar{
  background:
    radial-gradient(rgba(217,164,65,.16) 1px, transparent 1.4px),
    repeating-linear-gradient(48deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-48deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
    linear-gradient(180deg,#116348 0%,#0A4A3A 100%);
  background-size:15px 15px,auto,auto,auto;
  border-bottom:1.5px solid #D9A441}
/* ---- 5. 此刻框与列表标题随绿系微调 ---- */
.now{background:rgba(10,60,42,.4);border-color:rgba(255,224,190,.4)}
.nowt{border-left-color:#0F6E56}
.lhead b::before{background:linear-gradient(180deg,#1B8A6B,#0F6E56)}

/* ============================================================================
 * V6.19R 美食文化 / 美食攻略 顶尾同色·恢复版（2026-11-03 佳佳修正）
 * 两页顶部 hero 恢复各自原横幅（文化=绿底照片 / 攻略=橄榄绿照片），
 * 页面级底部导航 .pgsn 不再全站绿纹，改为【分别与所在页顶部同色】。
 * 其他页（农特/入驻/券包）底栏恢复原米白。
 * ========================================================================== */
#pageSpot .pgsn{background:linear-gradient(180deg,#0D634F 0%,#094E3D 100%);
  border-top:1.5px solid rgba(217,164,65,.55);
  box-shadow:0 -4px 14px rgba(9,50,40,.3)}
#pageSpot .pgsn .sb{color:rgba(219,240,229,.78)}
#pageSpot .pgsn .sb[data-back]{color:#EFF8F3;
  border-right:1px solid rgba(255,255,255,.16)}
#pageSpot .pgsn .sb[data-back]:active{background:rgba(255,255,255,.1)}
#pageSpot .pgsn .sb.on{color:#F5C563;font-weight:800}
#pageSpot .pgsn .sb.on i:not(.ic-back){background:currentColor;border-color:currentColor}
#pageGuide .pgsn{background:linear-gradient(180deg,#3E6E14 0%,#4B6626 100%);
  border-top:1.5px solid rgba(240,206,134,.55);
  box-shadow:0 -4px 14px rgba(43,66,18,.3)}
#pageGuide .pgsn .sb{color:rgba(233,240,214,.8)}
#pageGuide .pgsn .sb[data-back]{color:#F4F8EA;
  border-right:1px solid rgba(255,255,255,.16)}
#pageGuide .pgsn .sb[data-back]:active{background:rgba(255,255,255,.1)}
#pageGuide .pgsn .sb.on{color:#F5C563;font-weight:800}
#pageGuide .pgsn .sb.on i:not(.ic-back){background:currentColor;border-color:currentColor}

/* ============================================================================
 * V6.20 首页淡绿化 + 隐约丹霞层理（2026-11-03 佳佳：太绿、方格纹太实）
 * 顶栏/底栏改淡绿，纹路换成两层极淡近水平「丹霞层理」+ 一抹暖光晕，
 * 隐隐约约不抢内容；文字改深绿系保证淡底可读。
 * ========================================================================== */
/* ---- 1. 底部导航：淡绿 + 隐约层理 ---- */
.tabbar{
  background:
    radial-gradient(130% 110% at 88% -10%, rgba(217,164,65,.09), transparent 55%),
    repeating-linear-gradient(178deg, rgba(15,110,86,.05) 0 5px, transparent 5px 21px),
    repeating-linear-gradient(182deg, rgba(255,255,255,.06) 0 4px, transparent 4px 27px),
    linear-gradient(180deg,#EAF3EB 0%,#D8EBDC 100%);
  border-top:1.5px solid rgba(217,164,65,.5);
  box-shadow:0 -4px 16px rgba(15,110,86,.1)}
.tb{color:#5F7264}
.tb.on{color:#0F6E56;font-weight:800}
.tb.on i::after{background:#EAF3EB}
.tb .badge-n{background:#E08A2A;color:#fff}
/* ---- 2. 顶栏：同款淡绿 + 隐约层理 ---- */
.topbar{
  background:
    radial-gradient(130% 130% at 88% -20%, rgba(217,164,65,.1), transparent 60%),
    repeating-linear-gradient(178deg, rgba(15,110,86,.045) 0 6px, transparent 6px 24px),
    linear-gradient(180deg,#EAF3EB 0%,#D8EBDC 100%);
  border-bottom:1.5px solid rgba(217,164,65,.5)}
.topbar .bt{color:#123A2B;text-shadow:none}
.topbar .bs{color:#4A6A57;text-shadow:none}
/* 此刻推荐玻璃卡：淡绿底上保持深绿玻璃焦点卡 */
/* ---- 3. 桌面左侧栏同步淡绿 ---- */
@media (min-width:900px){
  .tabbar{
    background:
      radial-gradient(130% 110% at 88% -10%, rgba(217,164,65,.09), transparent 55%),
      repeating-linear-gradient(178deg, rgba(15,110,86,.05) 0 5px, transparent 5px 21px),
      repeating-linear-gradient(182deg, rgba(255,255,255,.06) 0 4px, transparent 4px 27px),
      linear-gradient(180deg,#EAF3EB 0%,#D8EBDC 100%);
    border-right:1.5px solid rgba(217,164,65,.5);border-top:none}
  .tb.on{color:#0F6E56;background:rgba(15,110,86,.08);border-left-color:#0F6E56}
  .tb.on i::after{background:#EAF3EB}
}

/* ============================================================================
 * V6.21 方案B上线：绿底加深 + 祁连山峦勾线（2026-11-03 佳佳拍板）
 * 三层山影：远山藏丹霞暖红、中近两层农业绿；绿底比 V6.20 加深一档。
 * 纯内联 SVG data-uri，零外链。
 * ========================================================================== */
.topbar{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='56' viewBox='0 0 340 56' preserveAspectRatio='none'%3E%3Cpath d='M0 56 L50 30 L95 46 L150 16 L205 42 L260 26 L305 44 L340 32 L340 56 Z' fill='%23B4552D' fill-opacity='.10'/%3E%3Cpath d='M0 56 L60 36 L115 50 L170 28 L225 48 L285 34 L340 44 L340 56 Z' fill='%230F6E56' fill-opacity='.10'/%3E%3Cpath d='M0 56 L70 46 L130 56 L195 42 L255 54 L310 46 L340 50 L340 56 Z' fill='%230F6E56' fill-opacity='.18'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat,
    linear-gradient(180deg,#D9EADE 0%,#C3DECC 100%);
  border-bottom:1.5px solid rgba(217,164,65,.55)}
.tabbar{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='52' viewBox='0 0 340 52' preserveAspectRatio='none'%3E%3Cpath d='M0 52 L55 28 L105 44 L160 18 L215 40 L270 24 L320 40 L340 30 L340 52 Z' fill='%23B4552D' fill-opacity='.09'/%3E%3Cpath d='M0 52 L65 38 L120 50 L180 30 L235 46 L295 34 L340 42 L340 52 Z' fill='%230F6E56' fill-opacity='.10'/%3E%3Cpath d='M0 52 L75 46 L135 52 L200 42 L260 50 L315 44 L340 48 L340 52 Z' fill='%230F6E56' fill-opacity='.17'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat,
    linear-gradient(180deg,#DCEBE0 0%,#C6E0CF 100%);
  border-top:1.5px solid rgba(217,164,65,.55);
  box-shadow:0 -4px 16px rgba(15,110,86,.12)}
.tb.on i::after{background:#DCEBE0}
@media (min-width:900px){
  .tabbar{
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='52' viewBox='0 0 340 52' preserveAspectRatio='none'%3E%3Cpath d='M0 52 L55 28 L105 44 L160 18 L215 40 L270 24 L320 40 L340 30 L340 52 Z' fill='%23B4552D' fill-opacity='.09'/%3E%3Cpath d='M0 52 L65 38 L120 50 L180 30 L235 46 L295 34 L340 42 L340 52 Z' fill='%230F6E56' fill-opacity='.10'/%3E%3Cpath d='M0 52 L75 46 L135 52 L200 42 L260 50 L315 44 L340 48 L340 52 Z' fill='%230F6E56' fill-opacity='.17'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat,
      linear-gradient(180deg,#DCEBE0 0%,#C6E0CF 100%);
    border-right:1.5px solid rgba(217,164,65,.55);border-top:none}
  .tb.on i::after{background:#DCEBE0}
}

/* ============================================================================
 * V6.22 哑光高大上绿 + 顶栏美食图（2026-11-03 佳佳）+ 菜卡实拍缩略图
 * 顶/底栏：哑光灰绿（低饱和、不发亮），顶栏右侧透出牛肉小饭实拍，
 * 底栏保留三层山峦（丹霞暖红远山在哑光绿上更沉稳）。
 * ========================================================================== */
/* ---- 1. 菜卡实拍缩略图：等比缩放贴菜名左侧，卡框比例不变 ---- */
.dhead{display:flex;align-items:center;gap:10px;min-width:0}
.dht{min-width:0;flex:1}
.dthumb{height:52px;width:auto;max-width:44%;object-fit:contain;
  border-radius:10px;border:1px solid rgba(217,164,65,.4);flex:0 0 auto;
  background:#fff}
/* ---- 2. 顶栏：哑光灰绿 + 右侧七彩丹霞透出（V6.23 佳佳：不放吃的，放丹霞） ---- */
.topbar{
  background:
    linear-gradient(90deg,#4F7A66 0%,#4F7A66 40%,rgba(79,122,102,.74) 66%,rgba(79,122,102,.38) 100%),
    url("https://workbuddy-space-static.codebuddy.work/image/QKWvsnCQo58cLZSsrW5cHB.jpg") right center/cover no-repeat;
  border-bottom:1.5px solid rgba(217,164,65,.6)}
.topbar .bt{color:#F7F3E8;text-shadow:0 1px 3px rgba(15,35,26,.4)}
.topbar .bs{color:rgba(247,243,232,.8);text-shadow:none}
/* ---- 3. 底部导航：哑光灰绿 + 沉稳山峦 ---- */
.tabbar{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='52' viewBox='0 0 340 52' preserveAspectRatio='none'%3E%3Cpath d='M0 52 L55 28 L105 44 L160 18 L215 40 L270 24 L320 40 L340 30 L340 52 Z' fill='%23C97B4A' fill-opacity='.14'/%3E%3Cpath d='M0 52 L65 38 L120 50 L180 30 L235 46 L295 34 L340 42 L340 52 Z' fill='%2317392C' fill-opacity='.22'/%3E%3Cpath d='M0 52 L75 46 L135 52 L200 42 L260 50 L315 44 L340 48 L340 52 Z' fill='%23122E24' fill-opacity='.34'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat,
    linear-gradient(180deg,#537D69 0%,#3F6553 100%);
  border-top:1.5px solid rgba(217,164,65,.6);
  box-shadow:0 -3px 12px rgba(20,40,32,.18)}
.tb{color:rgba(228,240,232,.78)}
.tb.on{color:#F5C563;font-weight:800}
.tb.on i::after{background:#35594A}
.tb .badge-n{background:#E08A2A;color:#fff}
@media (min-width:900px){
  .tabbar{
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='52' viewBox='0 0 340 52' preserveAspectRatio='none'%3E%3Cpath d='M0 52 L55 28 L105 44 L160 18 L215 40 L270 24 L320 40 L340 30 L340 52 Z' fill='%23C97B4A' fill-opacity='.14'/%3E%3Cpath d='M0 52 L65 38 L120 50 L180 30 L235 46 L295 34 L340 42 L340 52 Z' fill='%2317392C' fill-opacity='.22'/%3E%3Cpath d='M0 52 L75 46 L135 52 L200 42 L260 50 L315 44 L340 48 L340 52 Z' fill='%23122E24' fill-opacity='.34'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat,
      linear-gradient(180deg,#537D69 0%,#3F6553 100%);
    border-right:1.5px solid rgba(217,164,65,.6);border-top:none}
  .tb.on{background:rgba(245,197,99,.1);border-left-color:#F5C563}
  .tb.on i::after{background:#35594A}
}

/* ============================================================================
 * V6.24 滚回方案B配色 + 上下弧度 + 顶栏加高 + 标题右移（2026-11-03 佳佳拍板）
 * 配色回到 v24 方案B（淡绿+远山勾线+深绿字），哑光深灰绿弃用；
 * 顶栏保留丹霞图但罩在淡绿之下（右侧隐约透出暖色）。
 * ========================================================================== */
/* ---- 1. 顶栏：加高 + 下缘弧度 + 淡绿罩丹霞 ---- */
.topbar{
  padding:22px 14px 20px;
  padding-top:calc(22px + env(safe-area-inset-top));
  background:
    linear-gradient(90deg,rgba(217,234,222,.98) 0%,rgba(217,234,222,.96) 36%,rgba(217,234,222,.8) 64%,rgba(217,234,222,.4) 100%),
    linear-gradient(180deg,rgba(217,234,222,.25),rgba(199,222,206,.55)),
    url("https://workbuddy-space-static.codebuddy.work/image/QKWvsnCQo58cLZSsrW5cHB.jpg") right 40%/cover no-repeat;
  background-color:#D9EADE;
  border-radius:0 0 24px 24px;
  border-bottom:none;
  box-shadow:0 5px 16px rgba(15,110,86,.13)}
.brand{margin-left:8px}
.topbar .bt{font-size:17px;color:#17453A;text-shadow:none}
.topbar .bs{font-size:11.5px;color:#4A6A57;text-shadow:none}
/* ---- 2. 底部导航：回淡绿+山纹 + 上缘弧度 ---- */
.tabbar{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='52' viewBox='0 0 340 52' preserveAspectRatio='none'%3E%3Cpath d='M0 52 L55 28 L105 44 L160 18 L215 40 L270 24 L320 40 L340 30 L340 52 Z' fill='%23B4552D' fill-opacity='.09'/%3E%3Cpath d='M0 52 L65 38 L120 50 L180 30 L235 46 L295 34 L340 42 L340 52 Z' fill='%230F6E56' fill-opacity='.10'/%3E%3Cpath d='M0 52 L75 46 L135 52 L200 42 L260 50 L315 44 L340 48 L340 52 Z' fill='%230F6E56' fill-opacity='.17'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat,
    linear-gradient(180deg,#DCEBE0 0%,#C6E0CF 100%);
  border-top:1.5px solid rgba(217,164,65,.55);
  border-radius:20px 20px 0 0;
  box-shadow:0 -4px 16px rgba(15,110,86,.12)}
.tb{color:#5F7264}
.tb.on{color:#0F6E56;font-weight:800}
.tb.on i::after{background:#DCEBE0}
.tb .badge-n{background:#E08A2A;color:#fff}
@media (min-width:900px){
  .tabbar{
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='52' viewBox='0 0 340 52' preserveAspectRatio='none'%3E%3Cpath d='M0 52 L55 28 L105 44 L160 18 L215 40 L270 24 L320 40 L340 30 L340 52 Z' fill='%23B4552D' fill-opacity='.09'/%3E%3Cpath d='M0 52 L65 38 L120 50 L180 30 L235 46 L295 34 L340 42 L340 52 Z' fill='%230F6E56' fill-opacity='.10'/%3E%3Cpath d='M0 52 L75 46 L135 52 L200 42 L260 50 L315 44 L340 48 L340 52 Z' fill='%230F6E56' fill-opacity='.17'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat,
      linear-gradient(180deg,#DCEBE0 0%,#C6E0CF 100%);
    border-right:1.5px solid rgba(217,164,65,.55);border-top:none;
    border-radius:0}
  .tb.on{background:rgba(15,110,86,.08);border-left-color:#0F6E56}
  .tb.on i::after{background:#DCEBE0}
  .topbar{border-radius:0}
}

/* ============================================================================
 * V6.25 定稿：顶底统一回方案B（纯绿底+山峦勾线，撤丹霞照片），颜色加深提鲜一档
 * 佳佳：这一稿最好看；颜色稍微鲜亮一点/深一点点，度由助手把控。
 * 底色从 #D9EADE→#C3DECC 加深提鲜为 #C7E2CE→#ABD0B8（顶）/ #CBE4D1→#AFD2BB（底）。
 * ========================================================================== */
.topbar{
  padding:22px 14px 20px;
  padding-top:calc(22px + env(safe-area-inset-top));
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='56' viewBox='0 0 340 56' preserveAspectRatio='none'%3E%3Cpath d='M0 56 L50 30 L95 46 L150 16 L205 42 L260 26 L305 44 L340 32 L340 56 Z' fill='%23B4552D' fill-opacity='.12'/%3E%3Cpath d='M0 56 L60 36 L115 50 L170 28 L225 48 L285 34 L340 44 L340 56 Z' fill='%230F6E56' fill-opacity='.13'/%3E%3Cpath d='M0 56 L70 46 L130 56 L195 42 L255 54 L310 46 L340 50 L340 56 Z' fill='%230F6E56' fill-opacity='.20'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat,
    linear-gradient(180deg,#C7E2CE 0%,#ABD0B8 100%);
  border-radius:0 0 24px 24px;
  border-bottom:none;
  box-shadow:0 5px 16px rgba(15,110,86,.14)}
.brand{margin-left:8px}
.topbar .bt{font-size:17px;color:#17453A;text-shadow:none}
.topbar .bs{font-size:11.5px;color:#3E6151;text-shadow:none}
.tabbar{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='52' viewBox='0 0 340 52' preserveAspectRatio='none'%3E%3Cpath d='M0 52 L55 28 L105 44 L160 18 L215 40 L270 24 L320 40 L340 30 L340 52 Z' fill='%23B4552D' fill-opacity='.11'/%3E%3Cpath d='M0 52 L65 38 L120 50 L180 30 L235 46 L295 34 L340 42 L340 52 Z' fill='%230F6E56' fill-opacity='.12'/%3E%3Cpath d='M0 52 L75 46 L135 52 L200 42 L260 50 L315 44 L340 48 L340 52 Z' fill='%230F6E56' fill-opacity='.19'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat,
    linear-gradient(180deg,#CBE4D1 0%,#AFD2BB 100%);
  border-top:1.5px solid rgba(217,164,65,.6);
  border-radius:20px 20px 0 0;
  box-shadow:0 -4px 16px rgba(15,110,86,.14)}
.tb{color:#3E6151}
.tb.on{color:#0A4A3A;font-weight:800}
.tb.on i::after{background:#CBE4D1}
.tb .badge-n{background:#E08A2A;color:#fff}
@media (min-width:900px){
  .tabbar{
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='52' viewBox='0 0 340 52' preserveAspectRatio='none'%3E%3Cpath d='M0 52 L55 28 L105 44 L160 18 L215 40 L270 24 L320 40 L340 30 L340 52 Z' fill='%23B4552D' fill-opacity='.11'/%3E%3Cpath d='M0 52 L65 38 L120 50 L180 30 L235 46 L295 34 L340 42 L340 52 Z' fill='%230F6E56' fill-opacity='.12'/%3E%3Cpath d='M0 52 L75 46 L135 52 L200 42 L260 50 L315 44 L340 48 L340 52 Z' fill='%230F6E56' fill-opacity='.19'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat,
      linear-gradient(180deg,#CBE4D1 0%,#AFD2BB 100%);
    border-right:1.5px solid rgba(217,164,65,.6);border-top:none;
    border-radius:0}
  .tb.on{background:rgba(10,74,58,.1);border-left-color:#0A4A3A}
  .tb.on i::after{background:#CBE4D1}
}

/* V6.26 顶栏标题精修：「食」字logo复位后，字级层次微调 */
.topbar .bt{font-size:17.5px;color:#143F33;letter-spacing:.03em}
.topbar .bs{font-size:11.5px;color:#41685A;letter-spacing:.08em;margin-top:2px}
.logo{box-shadow:0 2px 8px rgba(190,90,30,.28);border-color:rgba(255,255,255,.85)}

/* V6.27 详情页精简配套：文化折叠框 + 门店条目直达导航按钮 */
.fold{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:rgba(255,255,255,.6)}
.fold summary{list-style:none;cursor:pointer;padding:11px 13px;font-size:13px;font-weight:700;
  color:#17453A;display:flex;align-items:center;justify-content:space-between;gap:8px}
.fold summary::-webkit-details-marker{display:none}
.fold summary i{font-style:normal;font-size:11.5px;color:#4A6A57;font-weight:400}
.fold[open] summary i::after{content:''}
.fold summary i{transition:.15s}
.fold[open] summary{border-bottom:1px solid var(--line)}
.fold .culture{padding:12px 13px}
.snav-btn{display:block;width:100%;margin-top:8px;padding:8px 0;text-align:center;
  font-size:12.5px;font-weight:700;color:#0F6E56;background:rgba(15,110,86,.08);
  border:1px solid rgba(15,110,86,.25);border-radius:9px;cursor:pointer}
.snav-btn:active{background:#0F6E56;color:#fff}

/* V6.28 营业状态徽标（门店详情实时判断） */
.obadge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  padding:2px 9px;border-radius:20px}
.obadge i{width:6px;height:6px;border-radius:50%;flex:0 0 6px}
.obadge.on{color:#0F6E56;background:rgba(15,110,86,.1)}
.obadge.on i{background:#0F6E56}
.obadge.off{color:#8A7862;background:rgba(110,93,72,.1)}
.obadge.off i{background:#8A7862}

/* V6.31 顶底栏文字加深：底色定稿不动，字色加深加重提对比 */
.topbar .bt{font-size:17.5px;color:#0A3529;letter-spacing:.03em}
.topbar .bs{font-size:12px;color:#2A5443;letter-spacing:.08em;margin-top:2px;font-weight:500}
.tb{color:#2C5646}
.tb.on{color:#083D30;font-weight:800}
.tb.on i::after{background:#CBE4D1}
@media (min-width:900px){
  .tb.on{color:#083D30;background:rgba(8,61,48,.08);border-left-color:#083D30}
  .tb.on i::after{background:#CBE4D1}
}

/* V6.32 手机端收紧：顶栏高度回调 + 圆角收敛（小屏协调性） */
@media (max-width:899px){
  .topbar{
    padding:16px 14px 15px;
    padding-top:calc(16px + env(safe-area-inset-top));
    border-radius:0 0 18px 18px}
  .brand{margin-left:4px}
  .topbar .bt{font-size:17px}
  .topbar .bs{font-size:11.5px}
  .tabbar{border-radius:14px 14px 0 0}
}

/* ============================================================================
 * V6.33 留言墙（一级导航新页）+ 美食攻略二级入口卡
 * ========================================================================== */
/* ---- 攻略入口卡（美食文化页内，二级页面入口） ---- */
.guide-entry{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  border:1px solid rgba(217,164,65,.45);border-radius:13px;padding:13px 15px;
  margin-bottom:16px;cursor:pointer;box-shadow:0 2px 10px rgba(15,110,86,.07)}
.guide-entry .gi{width:38px;height:38px;border-radius:10px;flex:0 0 38px;
  background:linear-gradient(135deg,#2C7A8C,#0A4A3A);display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:17px;font-weight:800}
.guide-entry .gt{flex:1;min-width:0}
.guide-entry b{display:block;font-size:14.5px;color:var(--ink)}
.guide-entry small{display:block;margin-top:2px;font-size:11px;color:var(--ink3)}
.guide-entry .go{flex:0 0 auto;color:#0F6E56;font-weight:700;font-size:13px}
/* ---- 留言墙便签流 ---- */
.lhero{background:
  radial-gradient(120% 130% at 85% -10%, rgba(217,164,65,.22), transparent 55%),
  linear-gradient(140deg,#2C7A8C 0%,#0A4A3A 100%)}
.lform{background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px;margin-bottom:16px}
.lform input,.lform textarea{width:100%;box-sizing:border-box;border:1px solid var(--line2);
  border-radius:9px;padding:9px 11px;font-size:13px;font-family:inherit;margin-bottom:8px;
  background:var(--sand);color:var(--ink)}
.lform textarea{height:64px;resize:none}
.lform input:focus,.lform textarea:focus{outline:2px solid rgba(15,110,86,.35);border-color:#0F6E56}
.ly-submit{width:100%;padding:11px 0;background:linear-gradient(135deg,#1B8A6B,#0F6E56);
  color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer}
.ly-submit:active{transform:translateY(1px)}
.lwall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  padding-bottom:var(--h-tab)}
.lnote{padding:12px;border-radius:4px 12px 4px 12px;
  box-shadow:0 3px 9px rgba(42,33,24,.09);position:relative;min-height:74px;
  display:flex;flex-direction:column;justify-content:space-between}
.lnote::before{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:26px;height:7px;border-radius:3px;background:rgba(42,33,24,.1)}
.lnote p{font-size:12.5px;line-height:1.7;color:#3A2F1E;margin:8px 0 8px;word-break:break-word}
.lnote span{font-size:11px;color:#8A7862;text-align:right}
@media (min-width:900px){.lwall{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* V6.35 留言墙升级：话题chips + 便签话题标签 + 点赞 */
.lhero{background:
  radial-gradient(120% 130% at 85% -10%, rgba(217,164,65,.2), transparent 55%),
  repeating-linear-gradient(178deg, rgba(255,255,255,.04) 0 6px, transparent 6px 24px),
  linear-gradient(140deg,#1B8A6B 0%,#0A4A3A 100%)}
.lychips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.lychip{padding:6px 13px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;
  background:#fff;border:1px solid var(--line2);color:var(--ink2)}
.lychip.on{color:#fff!important;box-shadow:0 2px 8px rgba(15,110,86,.18)}
.ltag{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:5px;
  margin-bottom:6px;align-self:flex-start}
.lnote .lfoot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:2px}
.lnote .lfoot span{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lheart{flex:0 0 auto;border:none;background:none;font-size:12px;color:#B4A896;cursor:pointer;padding:2px 4px}
.lheart.on{color:#D85A30;font-weight:700}
.lyempty{grid-column:1/-1;text-align:center;padding:26px 12px;color:var(--ink3);font-size:12.5px;
  background:rgba(255,255,255,.6);border:1px dashed var(--line2);border-radius:12px}
.lytagpick{padding:5px 12px;border-radius:18px;font-size:12px;font-weight:700;cursor:pointer;
  background:#fff;border:1px solid var(--line2);color:var(--ink2)}
.lytagpick.on{background:rgba(15,110,86,.1);border-color:#0F6E56;color:#0F6E56}

/* ============================================================================
 * V6.37 留言墙页 snav 定制（2026-11-03 · 方案B：专属图标 + 浅绿染底 + 金细边）
 * 作用域仅 #pageLiuyan，其余 6 处 snav 不受影响。
 * 图标已内联 SVG（stroke=currentColor），此处只管配色与高亮。
 * ========================================================================== */
#pageLiuyan .snav{background:#EAF3EB;border-top:1.2px solid rgba(217,164,65,.55)}
#pageLiuyan .snav .sb{color:#2C5646}
#pageLiuyan .snav .sb[data-back]{color:#2C5646;border-right:1px solid #D3E3D6}
#pageLiuyan .snav .sb:active{background:#D8EBDC}
#pageLiuyan .snav .sb svg{width:19px;height:19px;display:block}
#pageLiuyan .guide-entry{transition:box-shadow .35s}
#pageLiuyan .guide-entry.guide-flash{box-shadow:0 0 0 2px #0F6E56,0 10px 26px rgba(15,110,86,.28)}

/* ============================================================================
 * V6.41 手绘寻味图（2026-11-03 · 美食文化页首屏 + 六县热区直达）
 * 图：AI 生成文创插画（CDN 1200×800）；热区：百分比绝对定位覆盖县区，:active 高亮
 * ========================================================================== */
.handmap{margin:14px 0 4px;padding:0}
.handmap .hm-img{position:relative;border-radius:14px;overflow:hidden;
  border:1.2px solid rgba(217,164,65,.55);box-shadow:0 6px 20px rgba(31,58,47,.12)}
.handmap .hm-img img{display:block;width:100%;height:auto}
.handmap .hm-hot{position:absolute;margin:0;padding:0;border:0;border-radius:10px;
  background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.handmap .hm-hot:active{background:rgba(15,110,86,.18);box-shadow:inset 0 0 0 2px rgba(15,110,86,.55)}
.handmap figcaption{text-align:center;font-size:11.5px;color:var(--ink3);
  margin-top:6px;letter-spacing:.04em}

/* ============================================================================
 * V6.42 首页手绘寻味图入口卡（场景条下方 · 点击跳文化页手绘图）
 * ========================================================================== */
.hmentry{display:flex;align-items:center;gap:12px;width:calc(100% - 32px);
  margin:10px auto 2px;padding:8px 12px 8px 8px;border-radius:12px;
  background:#fff;border:1px solid var(--line2);cursor:pointer;text-align:left;
  box-shadow:0 3px 12px rgba(31,58,47,.08);-webkit-tap-highlight-color:transparent}
.hmentry:active{background:#EAF3EB}
.hmentry img{width:86px;height:57px;object-fit:cover;border-radius:8px;flex:0 0 auto;display:block}
.hmentry .hme-t{flex:1;min-width:0}
.hmentry .hme-t b{display:block;font-size:14.5px;color:#123A2B;letter-spacing:.02em}
.hmentry .hme-t i{display:block;font-style:normal;font-size:11px;color:var(--ink3);
  margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmentry .hme-a{flex:0 0 auto;width:9px;height:9px;border-top:2px solid var(--ink3);
  border-right:2px solid var(--ink3);transform:rotate(45deg);margin-right:4px}

/* ============================================================================
 * V6.45 内容板块三连：攻略页「季节限定+节庆花历」 / 文化页「游张掖」三面板复活
 * ========================================================================== */
/* ---- 文化页尾：游张掖段 ---- */
.trip-sec{margin:18px 14px 8px;padding:14px 12px;background:#fff;border:1.2px solid var(--line);border-radius:14px}
.trip-bar{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.trip-bar b{font-size:15.5px;color:var(--ink)}
.trip-bar span{font-size:11.5px;color:var(--ink3)}
.stabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px}
.trip-sec .sppanel{padding-top:4px}
/* ---- 攻略页尾：季节/节庆段 ---- */
.sec-sec{margin:20px 14px 2px}
.sec-t{font-size:15px;color:var(--ink);margin:0 2px 9px;padding-left:9px;border-left:3.5px solid var(--fire,#C25E00);line-height:1.3}
#seasonRow,#eventRow{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px}
.scard{background:#fff;border:1.2px solid var(--line);border-radius:12px;padding:12px 13px;position:relative}
.scard.now{border-color:var(--fire,#C25E00);background:linear-gradient(0,#FFF9F0,#fff)}
.sc-m{font-size:11.5px;color:var(--ink3);margin-bottom:4px}
.sc-m i{font-style:normal;display:inline-block;margin-left:6px;background:var(--fire,#C25E00);color:#fff;font-size:10px;border-radius:4px;padding:0 6px;line-height:1.6}
.scard b{display:block;font-size:14.5px;color:var(--ink);line-height:1.35}
.sc-f{margin:7px 0 0;display:flex;flex-wrap:wrap;gap:5px}
.sc-f span{font-size:11.5px;color:#7A4A06;background:#F7ECD8;border-radius:5px;padding:1px 7px}
.sc-v{margin:7px 0 0;font-size:12px;color:var(--ink3);line-height:1.5}
.sc-n{margin:7px 0 0;font-size:12.5px;color:var(--ink2,#4A443C);line-height:1.65}
.ecard{background:#fff;border:1.2px solid var(--line);border-radius:12px;padding:12px 13px}
.ec-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ec-tag{font-size:11px;color:#0F6E56;background:#E7F2EE;border-radius:5px;padding:1px 7px}
.ec-when{font-size:11.5px;color:var(--fire,#C25E00);font-weight:700}
.ecard b{display:block;font-size:14px;color:var(--ink);line-height:1.4}
.ec-where{margin:5px 0 0;font-size:12px;color:var(--ink3)}
.ec-desc{margin:6px 0 0;font-size:12.5px;color:var(--ink2,#4A443C);line-height:1.65}
.ec-note{margin:6px 0 0;font-size:11px;color:#B8AD9A}

/* ===== V6.5 农特 FAQ 问答卡 ===== */
.pfaq{background:var(--paper2,#F7F4EC);border:1px solid #EAE3D2;border-radius:10px;padding:10px 12px;margin-top:2px}
.pfaq>b{display:block;font-size:12px;color:var(--fire,#C25E00);margin-bottom:4px}
.pfaq-i{border-top:1px dashed #E3DAC5;padding:2px 0}
.pfaq-i:first-of-type{border-top:none}
.pfaq-q{display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink,#33302B);padding:6px 0}
.pfaq-q::-webkit-details-marker{display:none}
.pfaq-q .pchev{width:7px;height:7px;border-right:1.6px solid #B8AD9A;border-bottom:1.6px solid #B8AD9A;transform:rotate(45deg);transition:transform .18s;flex:none}
.pfaq-i[open] .pfaq-q .pchev{transform:rotate(-135deg)}
.pfaq-a{margin:0 0 8px;font-size:12.5px;line-height:1.75;color:var(--ink2,#4A443C)}

/* ===== V6.5 顶部通栏「数据大屏」入口 =====
   手机端：绝对定位右上角（topbar 默认块级，brand 不受影响）；
   桌面端（>=900px）：topbar 本身是 flex space-between，改回文档流自动贴右。 */
.topbar{position:relative}
.dashlink{position:absolute;right:14px;top:calc(14px + env(safe-area-inset-top) + 10px);
  display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;
  border:1px solid rgba(240,190,110,.8);
  background:linear-gradient(135deg,rgba(158,42,43,.92),rgba(194,94,0,.92));
  color:#FFF3DC;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap;
  box-shadow:0 2px 10px rgba(20,8,0,.4)}
.dashlink:active{transform:scale(.96)}
@media(min-width:900px){
  .dashlink{position:static;font-size:13px;padding:8px 16px}
}

/* ==================== V6.46 留言墙：照片投稿 + 作品页入口 ====================
   照片选择器由 app.js 注入到 .lform（不改 index.html，避免与发布产物冲突）。
   卡片照片走 4:3 裁切，两列小图；点击整块进 /meishi/u/<id>.html 独立页。 */
.lyphoto{margin:0 0 10px}
.lyph-add{width:100%;padding:9px 0;border:1px dashed var(--line2);border-radius:9px;background:#FBF8F1;
  color:#4A6A57;font-size:12.5px;font-family:inherit;cursor:pointer}
.lyph-add:disabled{opacity:.55;cursor:default}
.lyph-prev{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.lyph-i{position:relative;width:76px;height:76px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.lyph-i img{width:100%;height:100%;object-fit:cover;display:block}
.lyph-i b{position:absolute;top:2px;right:2px;width:18px;height:18px;line-height:16px;text-align:center;
  background:rgba(0,0,0,.55);color:#fff;border-radius:50%;font-size:12px;font-weight:400;cursor:pointer}
.lyph-tip{font-size:11px;color:#8A7862;margin-top:7px;line-height:1.6}
.lypics{display:flex;gap:6px;margin:2px 0 8px;flex-wrap:wrap}
.lypics img{width:calc(50% - 3px);aspect-ratio:4/3;object-fit:cover;border-radius:7px;display:block;background:#EDE6D8}
.lypics a{display:contents}
.lnote .lfoot .lact{flex:0 0 auto;display:flex;align-items:center;gap:6px;overflow:visible;text-align:right}
.lmore{font-size:11.5px;color:#0F6E56;font-weight:700;white-space:nowrap}
@media(max-width:400px){.lypics img{width:100%}}