/* 厨味地图 · 网页版（菜谱交换 E6，10/27）：首页「厨味地图」「菜谱故事」两个标签 + 省 / 市 / 县 / 故事详情。
   Owner 硬规矩：地图方块一律正方形（grid 每格等宽，aspect-ratio 1），不画真实地图边界、不要长方形。
   改稿 2（10/27）：省 / 市 / 县 / 故事详情画在发现页内容区里（顶部标签、底部浮层导航都在），底部两个主按钮固定在导航上面；
   按钮、卡片标题 / 说明、页面大标题、头图都用 exchange-web.css 顶部的共用类（.u-btn-main / .u-btn-sm / .u-card-title / .u-card-sub / .u-page-title / .u-hero），这里不再写尺寸。 */

/* 首页标签多了两个，放不下就横向滚动；「分类」贴在右边 */
.discovery-entry-page .discover-channel-tabs--scroll .discover-channel-row.discover-channel-row--left { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.discovery-entry-page .discover-channel-tabs--scroll .discover-channel-row::-webkit-scrollbar { display: none; }
.discovery-entry-page .discover-channel-tabs--scroll .discover-channel-row > button[data-channel] { flex: none; }
.discovery-entry-page .discover-channel-tabs--scroll .discover-category-entry { position: sticky; right: 0; z-index: 1; padding-left: 10px; background: linear-gradient(90deg, rgba(253, 252, 251, 0), rgba(253, 252, 251, .98) 10px); }
/* 顶部标签和内容间距紧凑（Owner 多次要求） */
.discovery-entry-page:has(.htw-tab) .discover-sticky-stack, .discovery-entry-page:has(.htw-subpage) .discover-sticky-stack { padding-bottom: 4px; }

.htw-tab { display: flex; flex-direction: column; gap: 10px; padding-bottom: 96px; color: #29243a; }
.htw-card { padding: 14px; border: 1px solid #f0e8e1; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgba(41, 36, 58, .04); }
.htw-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.htw-sechead small { text-align: right; }
.htw-sub { margin: 4px 0 10px; }
.htw-muted { color: #9c96a8; font-size: 13px; }
.htw-big { color: #ec6b3a; font-size: 22px; font-weight: 800; }
.htw-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 16px; color: #7a7284; font-size: 14px; text-align: center; }
.htw-state p { margin: 0; }
.htw-state .u-btn-main { flex: none; min-width: 160px; }

/* 按钮一律用共用 .u-btn-main / .u-btn-sm（exchange-web.css），这里只管摆放 */
.htw-wide { width: 100%; }
.u-btn-main.htw-wide { flex: none; }

/* 头图（共用 .u-hero）+ 紧跟的换菜主按钮 + 一行小字 */
.htw-swaprow { display: flex; flex-direction: column; gap: 6px; }
.htw-swaprow .htw-swapbtn { display: flex; flex: none; width: fit-content; min-width: 180px; margin: 0 auto; padding: 0 32px; } /* 不要通栏（Owner 10/27 18:35） */
.htw-note { text-align: center; }

/* 地图卡 */
.htw-maphead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.htw-maptitle { white-space: nowrap; }
.htw-seg { display: inline-flex; flex: none; padding: 3px; border-radius: 20px; background: #f3f0f7; }
.htw-seg button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 16px; background: none; color: #7a7284; font-size: 13px; font-weight: 600; cursor: pointer; }
.htw-seg button.is-on { background: #fff; color: #29243a; font-weight: 800; box-shadow: 0 1px 4px rgba(41, 36, 58, .1); }

/* 方块网格：列宽相等、行高 = 列宽，格子 aspect-ratio 1 → 一定是正方形 */
.htw-grid { display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); grid-auto-rows: auto; gap: 5px; width: 100%; margin: 0 auto; }
.htw-grid.is-city { gap: 8px; grid-template-columns: repeat(var(--cols, 4), minmax(0, 64px)); justify-content: center; } /* 省页方块按地理位置排（Owner 10/27），列数跟着省的形状变，方块边长最多 64px */
.htw-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1; width: 100%; min-width: 0; min-height: 0; padding: 0; border: 1.5px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 700; line-height: 1.15; cursor: pointer; box-sizing: border-box; }
span.htw-tile { cursor: default; }
.htw-tile.is-t0 { border: 1.5px dashed #d8cfdf; background: #fbf9fc; color: #b2aabd; font-weight: 600; }
.htw-tile.is-t1 { background: #fde3cc; color: #b8652a; }
.htw-tile.is-t2 { background: #f6a564; color: #fff; }
.htw-tile.is-t3 { background: #e5672c; color: #fff; }
.htw-tile.is-sel { outline: 2.5px solid #6c4cf1; outline-offset: 1.5px; }
.htw-tile.is-home { background: #6c4cf1; color: #fff; }
.htw-tile.is-swapped { background: #fde0c7; color: #c0652b; }
.htw-tile.is-checked { background: #f39548; color: #fff; }
.htw-tile.is-off { background: #efecf2; color: #aaa3b4; font-weight: 600; }
.htw-ctile { border-radius: 12px; }
.htw-ctile b { font-size: 14px; }
.htw-ctile small { margin-top: 2px; font-size: 11px; font-weight: 600; opacity: .9; }

.htw-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 10px; color: #8b8296; font-size: 12px; }
.htw-legend span + .htw-sw { margin-left: 6px; }
.htw-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.htw-sw.is-t0 { border: 1px dashed #cfc5d8; background: #fbf9fc; }
.htw-sw.is-t1 { background: #fde3cc; }
.htw-sw.is-t2 { background: #f6a564; }
.htw-sw.is-t3 { background: #e5672c; }
.htw-sw.is-home { background: #6c4cf1; }
.htw-sw.is-swapped { background: #fde0c7; }
.htw-sw.is-checked { background: #f39548; }
.htw-sw.is-off { background: #efecf2; }
.htw-sw + .htw-sw { margin-left: 0; }

.htw-pickrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #f7f4fd; font-size: 14px; font-weight: 600; }
.htw-loginbox { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 8px; color: #7a7284; font-size: 14px; }
.htw-loginbox p { margin: 0; }
/* 三枚勋章（效果图 16b）：勋章图（没拿到变灰）+ 名字 + 打卡几省 + 奖金小标签 */
.htw-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.htw-badge { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px 9px; border: 1px solid #efe9f3; border-radius: 14px; background: #faf9fc; color: #8a8496; text-align: center; }
.htw-badge-img { display: block; width: 56px; height: 56px; margin-bottom: 2px; filter: grayscale(1); opacity: .5; }
.htw-badge b { color: #29243a; font-size: 13.5px; }
.htw-badge small { font-size: 11px; }
.htw-badge-tag { display: inline-block; margin-top: 5px; padding: 1px 7px; border-radius: 9px; background: #fff1e4; color: #d0611f; font-size: 11px; font-style: normal; font-weight: 800; white-space: nowrap; }
.htw-badge-tag.is-ok { background: #e6f5ec; color: #2b7c4d; }
.htw-badge.is-got { border-color: #f6d2b0; background: #fff7ec; }
.htw-badge.is-got .htw-badge-img { filter: none; opacity: 1; }
/* 勋章奖金那一条（效果图 16 ②） */
.htw-prize { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 10px; border: 1px solid #f8d7b8; border-radius: 12px; background: linear-gradient(100deg, #fff4e6, #fdeaf0); }
.htw-prize-ic { flex: none; width: 36px; height: 36px; }
.htw-prize-tx { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.htw-prize-tx b { color: #29243a; font-size: 14px; }
.htw-prize-tx small { color: #8a8496; font-size: 12px; }
.htw-pill { flex: none; padding: 2px 8px; border-radius: 10px; background: #f1edf7; color: #6b6480; font-size: 12px; font-style: normal; font-weight: 800; }
.htw-pill.is-p { background: #fff1e4; color: #d0611f; }
.htw-pill.is-ok { background: #e6f5ec; color: #2b7c4d; }
.htw-pill.is-bad { background: #fdecec; color: #c0392b; }

.htw-rowcard { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.htw-rowcard > div { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.htw-ico { display: flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; background: #fff1e4; font-size: 18px; font-style: normal; line-height: 1; }
.htw-call { display: flex; flex-direction: column; gap: 4px; background: linear-gradient(160deg, #fff8f1, #fff 60%); }
.htw-kicker { color: #e5672c; font-size: 12px; font-weight: 800; letter-spacing: 2px; }
.htw-call p { margin: 0 0 6px; }
.htw-two, .htw-bar { display: flex; gap: 10px; }
.htw-two .u-btn-sm { flex: 1 1 0; }
.htw-freshrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 0; border: 0; border-top: 1px solid #f3eee9; background: none; color: inherit; text-align: left; cursor: pointer; }
.htw-freshrow:first-of-type { border-top: 0; }
.htw-freshrow > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.htw-freshrow small { color: #8b8296; font-size: 12px; }
.htw-fresh-tile { display: flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: #f6a564; color: #fff; font-weight: 800; }
.htw-chev { flex: none; color: #b2aabd; font-style: normal; font-size: 18px; }
.htw-sharebar { display: flex; justify-content: center; padding: 2px 0; }

/* 菜谱故事 */
.htw-chips { display: flex; gap: 8px; margin: 0 -14px; padding: 2px 14px 2px; overflow-x: auto; scrollbar-width: none; }
.htw-chips::-webkit-scrollbar { display: none; }
.htw-chip { flex: none; min-height: 34px; padding: 0 16px; border: 1px solid #e6dfe9; border-radius: 18px; background: #fff; color: #4a4358; font-size: 14px; font-weight: 600; cursor: pointer; }
.htw-chip.is-on { border-color: #29243a; background: #29243a; color: #fff; }
.htw-stories { display: flex; flex-direction: column; gap: 12px; }
.htw-story { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid #f0e8e1; border-radius: 16px; background: #fff; color: inherit; text-align: left; cursor: pointer; box-shadow: 0 2px 8px rgba(41, 36, 58, .04); }
.htw-story-img { position: relative; display: block; aspect-ratio: 16 / 9; background: #f6efe8; }
.htw-story-cover { display: block; width: 100%; height: 100%; object-fit: cover; }
.htw-story-cover.is-empty, .htw-hero-img.is-empty, .htw-rank-img.is-empty { display: flex; align-items: center; justify-content: center; color: #d1a37f; font-size: 28px; font-weight: 800; }
.htw-pin { position: absolute; top: 10px; left: 10px; max-width: calc(100% - 20px); padding: 3px 10px 3px 20px; overflow: hidden; border-radius: 12px; background: rgba(255, 255, 255, .94); color: #29243a; font-size: 12px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.htw-pin::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; border-radius: 50% 50% 50% 0; background: #ec6b3a; transform: translateY(-60%) rotate(-45deg); }
.htw-story-tx { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.htw-story-tx q { color: #5a5366; font-size: 14px; line-height: 1.6; }
.htw-story-by { display: flex; align-items: center; gap: 6px; color: #7a7284; font-size: 13px; }
.htw-story-by em { margin-left: auto; color: #8b8296; font-style: normal; }
.htw-stories.is-compact .htw-story-img { aspect-ratio: 2 / 1; }
.htw-ava { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #f39548; color: #fff; font-size: 12px; font-style: normal; font-weight: 700; }

/* 省 / 市 / 县 / 故事详情：画在发现页内容区里（标签行下面），不盖住顶部标签和底部浮层导航 */
.htw-subpage { display: flex; flex-direction: column; gap: 10px; color: #29243a; }
.htw-crumbs { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.htw-crumbs .u-page-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.htw-subbody { display: flex; flex-direction: column; gap: 10px; }
/* 底部两个主按钮：固定在浮层导航上面（导航 58 高、离底 10px），宽度和导航一样 */
.htw-bar { position: fixed; z-index: 69; right: max(0px, calc((100vw - 480px) / 2)); bottom: 0; left: max(0px, calc((100vw - 480px) / 2)); padding: 10px 14px calc(max(10px, env(safe-area-inset-bottom)) + 66px); background: linear-gradient(180deg, rgba(253, 252, 251, 0), #fdfcfb 10px); }
.htw-bar .u-btn-main.is-ghost { flex: .8 1 0; }
.htw-bar .u-btn-main:not(.is-ghost) { flex: 1.2 1 0; }
.page.discovery-entry-page:has(.htw-bar) { padding-bottom: calc(150px + env(safe-area-inset-bottom)); } /* 比 floating-nav.css 的 .page:has(> .bottom-nav) 116px 优先 */
.htw-sum { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; font-size: 15px; font-weight: 700; }
.htw-path { color: #7a7284; font-size: 13px; font-weight: 600; }
.htw-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.htw-tag { padding: 3px 10px; border-radius: 12px; background: #fff0e3; color: #c4612a; font-size: 12px; font-weight: 700; }
.htw-tag.is-lighter { background: #efeafe; color: #6b4ce6; }
.htw-tag.is-plain { background: #f5f2f7; color: #4a4358; font-weight: 600; }
.htw-gridcard { padding: 16px 12px; }

.htw-rank { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 0; border: 0; border-top: 1px solid #f3eee9; background: none; color: inherit; text-align: left; cursor: pointer; }
.htw-sechead + .htw-rank { border-top: 0; }
.htw-rank-n { flex: none; width: 18px; color: #ec6b3a; font-size: 18px; font-weight: 800; text-align: center; }
.htw-rank-img { flex: none; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: #f6efe8; }
.htw-rank-tx { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.htw-rank-tx b { overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.htw-rank-tx b small { color: #5a5366; font-size: 14px; font-weight: 600; }
.htw-rank-tx > small { color: #8b8296; font-size: 12px; }

.htw-counties { padding: 4px 14px; }
.htw-county { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 54px; padding: 6px 0; border: 0; border-top: 1px solid #f3eee9; background: none; color: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.htw-county:first-child { border-top: 0; }
div.htw-county { cursor: default; }
.htw-county > b { flex: none; min-width: 64px; }
.htw-county > small { flex: none; min-width: 44px; color: #8b8296; font-size: 13px; }
.htw-county-dish { flex: 1; min-width: 0; overflow: hidden; color: #4a4358; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.htw-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #d8cfdf; }
.htw-dot.is-on { background: #ec6b3a; }
.u-btn-sm.htw-more { display: flex; width: fit-content; margin: 6px auto 8px; }

.htw-suglist { margin: 0; padding: 0; list-style: none; }
.htw-sug { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid #f3eee9; }
.htw-sug:first-child { border-top: 0; }
.htw-sug .htw-ava { width: 28px; height: 28px; background: #8f7ae8; }
.htw-sug b { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.htw-sug b small { color: #9c96a8; font-size: 12px; font-weight: 400; }
.htw-sug p { margin: 3px 0 0; color: #4a4358; font-size: 14px; line-height: 1.55; word-break: break-word; }
.htw-pending { padding: 1px 6px; border-radius: 8px; background: #fff0e3; color: #c4612a; font-size: 11px; font-style: normal; }
.htw-sform { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.htw-input { flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid #e6dfe9; border-radius: 12px; background: #fdfbfe; color: #29243a; font: inherit; font-size: 15px; resize: vertical; }
.u-btn-main.htw-send { flex: none; }
.htw-ok { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: #eefaf2; color: #2f8a52; font-size: 13px; }
.htw-suggests { scroll-margin-top: 64px; }
.htw-suggests > .u-btn-main { margin-top: 10px; }

/* 故事详情 */
.htw-hero-photo { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 18px; background: #f6efe8; }
.htw-hero-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.htw-hero-photo .htw-pin { top: auto; bottom: 12px; left: 12px; }
.htw-title { margin-top: 2px; }
.htw-origin p { margin: 0; color: #4a4358; font-size: 15px; line-height: 1.75; }
.htw-author { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.htw-author small { margin-left: auto; color: #8b8296; font-size: 13px; }
.htw-journey { display: flex; margin: 0; padding: 4px 0 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
.htw-journey li { position: relative; display: flex; flex: 1 0 64px; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.htw-journey li i { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: #f39548; }
.htw-journey li.is-home i { background: #6c4cf1; }
.htw-journey li + li::before { content: ""; position: absolute; top: 5px; right: 50%; width: 100%; border-top: 2px dashed #f6c79d; }
.htw-journey b { font-size: 13px; }
.htw-journey small { color: #9c96a8; font-size: 11px; }
.htw-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.htw-photos img { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; object-fit: cover; }
.htw-lock p { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px; border-radius: 12px; background: #f6f3f9; color: #5a5366; font-size: 14px; }
.htw-lockicon { position: relative; flex: none; width: 14px; height: 11px; margin-top: 5px; border-radius: 2px; background: #8b8296; }
.htw-lockicon::before { content: ""; position: absolute; left: 2px; top: -7px; width: 6px; height: 7px; border: 2px solid #8b8296; border-bottom: 0; border-radius: 6px 6px 0 0; }

@media (max-width: 370px) {
  .htw-grid { gap: 4px; }
  .htw-tile { font-size: 12px; border-radius: 6px; }
  .htw-seg button { padding: 0 9px; }
}

/* 10/27：菜谱故事单列信息流（像微博，Owner 10/27 12:27）：左头像，右边名字 / 地方日期 / 来历 4 行 / 菜名 / 1–3 张图 / 做过几家 + 换菜 */
.htw-feed { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.htw-post { display: flex; gap: 9px; padding: 13px 12px 11px; border: 1px solid #f0e8e1; border-radius: 16px; background: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(41, 36, 58, .04); }
.htw-post > .htw-ava { width: 36px; height: 36px; font-size: 15px; }
.htw-post-main { display: flex; flex: 1; flex-direction: column; align-items: flex-start; min-width: 0; }
.htw-post-name { color: #29243a; font-size: 15px; font-weight: 800; }
.htw-post-meta { margin-top: 2px; color: #8a8496; font-size: 12px; }
.htw-post-story { display: -webkit-box; overflow: hidden; margin: 6px 0 0; color: #29243a; font-size: 14px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.htw-post-dish { margin-top: 6px; padding: 2px 8px; border-radius: 10px; background: #fff4ea; color: #c0652b; font-size: 12px; font-weight: 700; }
.htw-post-pics { display: flex; gap: 4px; margin-top: 7px; }
.htw-post-pics img { display: block; width: 90px; height: 90px; border-radius: 8px; object-fit: cover; background: #f6efe8; }
.htw-post-pics.is-one img { width: 200px; height: 150px; border-radius: 10px; }
.htw-post-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; align-self: stretch; margin-top: 8px; color: #8a8496; font-size: 12px; }
.htw-sechead-out { margin: 14px 2px 0; }
/* 省页 / 市页「邀请山西老乡」 */
.htw-invite { display: flex; align-items: center; gap: 10px; background: #fff6ee; border-color: #fbe3cf; }
.htw-invite .htw-ico { flex: none; font-size: 18px; font-style: normal; }
.htw-invite p { flex: 1; min-width: 0; margin: 0; }

/* v3（10/27）：独门做法徽章 / 题目、等人来换、打卡城市（和小程序 hometown common.wxss 一样） */
.htw-waiting { display: inline-flex; margin-left: 5px; padding: 1px 6px; border-radius: 5px; background: #efeafd; color: #4a33b8; font-size: 11px; font-style: normal; font-weight: 700; }
.htw-post-teaser { display: block; margin-top: 4px; color: #4a33b8; font-size: 12.5px; font-weight: 600; }
.htw-title-badge { margin: 2px 0 0; }
.htw-secret { margin-top: 10px; padding: 11px 14px; border-radius: 14px; background: linear-gradient(135deg, #2f2850, #4a33b8); color: #fff; }
.htw-secret small { display: block; font-size: 11px; font-weight: 700; opacity: .85; }
.htw-secret b { display: block; margin-top: 3px; font-size: 15px; font-weight: 800; }
.htw-secret span { display: block; margin-top: 3px; font-size: 11px; opacity: .75; }
.htw-cities { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.htw-city { padding: 3px 9px; border-radius: 7px; background: #f39548; color: #fff; font-size: 12px; font-weight: 700; }
.htw-city.is-home { border: 1px solid #f6c49c; background: #fff6e8; color: #b8621c; }
/* 最上面「我的换菜」、征集令里的首批征集一行（Owner 10/27 21:02，效果图 13 ⑤） */
/* 头图下一行功能按钮（Owner 10/27 23:54，效果图 15e 第 2 版）：一张白卡并排四个，小渐变圆 + 白色线条图标 + 名字 */
.htw-fns { display: flex; margin-top: 12px; padding: 10px 4px 9px; border: 1px solid #f1ebe4; border-radius: 18px; background: #fff; }
.htw-fn { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.htw-fn-ic { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font-style: normal; box-shadow: 0 3px 8px rgba(107, 76, 230, .16); }
.htw-fn-ic.is-p { background: linear-gradient(140deg, #8a6cf0, #6b4ce6); }
.htw-fn-ic.is-o { background: linear-gradient(140deg, #f6a259, #ec6b3a); box-shadow: 0 3px 8px rgba(236, 107, 58, .16); }
.htw-fn-ic img { width: 18px; height: 18px; }
.htw-fn b { color: #29243a; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.htw-fn-tag { position: absolute; top: -6px; left: 22px; padding: 0 5px; border: 1.5px solid #fff; border-radius: 8px; background: #ec5b3a; color: #fff; font-size: 9.5px; font-style: normal; font-weight: 800; line-height: 15px; white-space: nowrap; }
.htw-fn-tag.is-p { background: #6b4ce6; }
.htw-call { position: relative; }
.htw-bounty-line { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: #fff6e8; color: #b8621c; font-size: 12.5px; font-weight: 700; line-height: 1.6; }

/* ===== 各家怎么做（活动对话 10/30，效果图 22 / 23b / 26b；和小程序 dish-ways 组件同款） ===== */
.dww { padding:4px 0 12px; color:#29243a; }
.dww-head { display:flex; width:100%; align-items:baseline; justify-content:space-between; padding:8px 0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
.dww-head b { font-size:15px; font-weight:800; }
.dww-head small { color:#8a8496; font-size:12px; }
.dww-ask { margin-bottom:8px; padding:12px; border-radius:14px; background:#fff3e6; }
.dww-ask small { display:block; color:#c95a1c; font-size:11px; font-weight:700; }
.dww-ask > b { display:block; margin-top:3px; font-size:16px; font-weight:900; }
.dww-board { display:grid; grid-template-columns:repeat(8, 32px); grid-template-rows:repeat(var(--rows, 8), 32px); gap:3px; justify-content:center; margin:4px 0 8px; }
.dww-tile { display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:5px; font-size:11px; font-weight:700; cursor:pointer; }
.dww-tile.lv0 { background:#f3eff6; color:#c3bccb; cursor:default; }
.dww-tile.lv1 { background:#fde4cf; color:#c0652b; }
.dww-tile.lv2 { background:#f6a96d; color:#fff; }
.dww-tile.lv3 { background:#e2622f; color:#fff; }
.dww-tile.on { box-shadow:0 0 0 2px #fff, 0 0 0 4px #6b4ce6; }
.dww-poll { margin:2px 0 8px; }
.dww-poll b { font-size:13px; }
.dww-bar { display:flex; height:22px; margin-top:5px; overflow:hidden; border-radius:11px; }
.dww-bar span { display:flex; align-items:center; padding:0 8px; color:#fff; font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; }
.dww-bar .o0 { background:#ec6b3a; } .dww-bar .o1 { background:#6b4ce6; justify-content:flex-end; } .dww-bar .o2 { background:#f3a35c; } .dww-bar .o3 { background:#9a86ee; }
.dww-chips { display:flex; gap:6px; overflow-x:auto; margin-bottom:4px; }
.dww-chips.is-wrap { flex-wrap:wrap; overflow:visible; }
.dww-chip { flex:none; height:28px; padding:0 12px; border:1px solid #ebe5f2; border-radius:14px; background:#fff; color:#514b5e; font-size:12px; cursor:pointer; }
.dww-chip.on { border-color:#6b4ce6; background:#6b4ce6; color:#fff; font-weight:700; }
.dww .dww-chip.on { border-color:#29243a; background:#29243a; }
.dww-mine { margin:4px 0; color:#8a8496; font-size:12px; }
.dww-item { display:flex; gap:9px; margin-top:8px; padding:11px; border:1px solid #f1ebe4; border-radius:14px; background:#fff; }
.dww-av { flex:none; width:32px; height:32px; border-radius:50%; object-fit:cover; background:#f3eee8; }
.dww-av.is-txt { display:flex; align-items:center; justify-content:center; color:#8a7a6e; font-size:13px; font-style:normal; }
.dww-main { flex:1; min-width:0; }
.dww-who { display:flex; align-items:center; gap:5px; }
.dww-who b { font-size:13px; }
.dww-tag { padding:1px 6px; border-radius:4px; background:#fff1e4; color:#c95a1c; font-size:10px; font-style:normal; font-weight:700; }
.dww-body { margin:3px 0 0; font-size:13px; line-height:1.55; }
.dww-useful { margin-top:4px; padding:0; border:0; background:none; color:#8a8496; font-size:11px; cursor:pointer; }
.dww-useful.on { color:#ec6b3a; font-weight:700; }
.dww-pic { flex:none; width:64px; height:64px; border-radius:10px; object-fit:cover; }
.dww-empty { padding:12px 0 4px; color:#8a8496; font-size:12px; text-align:center; }
.dww-act { display:flex; justify-content:center; margin-top:14px; }
.dww-write, .dww-send { position:relative; overflow:visible; }
.dww-write { min-width:180px; padding:0 32px; }
.dww-badge { position:absolute; top:-10px; right:-4px; padding:2px 6px; border-radius:7px 7px 7px 0; background:#e8412c; color:#fff; font-size:10px; font-style:normal; font-weight:800; line-height:1.3; }
.dww-write .dww-badge { right:-4px; }
/* 写我家的做法页 */
.htw-waywrite .dww-q { margin:4px 0 0; font-size:15px; font-weight:900; }
.dww-input { box-sizing:border-box; width:100%; min-height:76px; margin-top:9px; padding:11px 12px; border:1.5px solid #6b4ce6; border-radius:12px; background:#fff; font:inherit; font-size:14px; line-height:1.6; }
.dww-tools { display:flex; margin-top:8px; }
.dww-tools .is-rec { background:#e8412c; }
.dww-add { display:flex; align-items:center; gap:10px; margin-top:12px; padding:12px; border:1.5px dashed #f3b48a; border-radius:12px; background:#fff7ef; cursor:pointer; }
.dww-add > i { display:flex; flex:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; background:#fde4cf; color:#ec6b3a; font-size:26px; font-style:normal; }
.dww-add b { display:block; font-size:14px; } .dww-add small { display:block; color:#c0652b; font-size:11px; }
.dww-photo { position:relative; width:100px; height:100px; margin-top:12px; }
.dww-photo img { width:100px; height:100px; border-radius:10px; object-fit:cover; }
.dww-photo button { position:absolute; top:-7px; right:-7px; width:22px; height:22px; border:0; border-radius:50%; background:#29243a; color:#fff; font-size:11px; cursor:pointer; }
.dww-full { display:flex; width:100%; align-items:center; gap:8px; margin-top:10px; padding:12px; border:0; border-radius:12px; background:#f1edfd; text-align:left; font:inherit; cursor:pointer; }
.dww-full > span { flex:1; min-width:0; } .dww-full b { display:block; color:#3b2a8a; font-size:14px; } .dww-full small { display:block; margin-top:2px; color:#6b6480; font-size:11px; }
.dww-full > em { position:relative; flex:none; padding:7px 15px; border-radius:16px; background:#6b4ce6; color:#fff; font-size:13px; font-style:normal; font-weight:800; }
.dww-full > em i { position:absolute; top:-11px; right:-3px; padding:1px 5px; border-radius:6px 6px 6px 0; background:#e8412c; font-size:9px; font-style:normal; white-space:nowrap; }
.dww-label { margin:16px 0 0; font-size:13px; font-weight:800; }
.dww-select { margin-top:7px; height:32px; padding:0 10px; border:1px solid #ebe5f2; border-radius:16px; background:#fff; font:inherit; font-size:13px; }
.htw-waywrite .dww-chips { margin-top:7px; }
.dww-tiers { margin:18px 0 0; padding:9px 10px; border-radius:10px; background:#fff1e4; color:#8a5a3a; font-size:11px; text-align:center; }
.dww-mask { position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; background:rgba(26,20,40,.45); }
.dww-sheet { position:relative; box-sizing:border-box; width:100%; max-width:520px; padding:22px 16px 22px; border-radius:20px 20px 0 0; background:#fff; text-align:center; }
.dww-sheet h3 { margin:4px 0 0; font-size:17px; font-weight:900; }
.dww-sheet > small { display:block; margin-top:4px; color:#8a8496; font-size:12px; }
.dww-ico { margin:0; font-size:36px; }
.dww-row { display:flex; align-items:center; gap:9px; margin-top:10px; padding:11px; border:1px solid #f1ebe4; border-radius:12px; text-align:left; }
.dww-row > i { flex:none; width:32px; height:32px; border-radius:9px; background:#f4f1fb; font-size:17px; font-style:normal; line-height:32px; text-align:center; }
.dww-row > b { flex:1; font-size:14px; }
.dww-row .is-green { background:#2bb85c; }
.dww-rule { margin:12px 0 0; padding:9px 10px; border-radius:9px; background:#f8f6fa; color:#8a8496; font-size:11px; line-height:1.6; text-align:left; }
/* 省页「山西人家怎么做」 */
.htw-wrow { display:flex; width:100%; align-items:center; gap:9px; margin-top:9px; padding:10px; border:1px solid #f1ebe4; border-radius:12px; background:#fff; text-align:left; font:inherit; cursor:pointer; }
.htw-wrow.is-empty { border-style:dashed; border-color:#f3c6a3; }
.htw-wrow > i { flex:none; width:32px; height:32px; border:1px dashed #f3b48a; border-radius:8px; color:#ec6b3a; font-size:20px; font-style:normal; line-height:30px; text-align:center; }
.htw-wrow > span { flex:1; min-width:0; } .htw-wrow b { display:block; font-size:14px; } .htw-wrow small { display:block; margin-top:2px; overflow:hidden; color:#8a8496; font-size:11px; white-space:nowrap; text-overflow:ellipsis; }
.htw-wrow.is-empty small { color:#c95a1c; }
.htw-wrow > em { position:relative; flex:none; font-style:normal; }
.htw-wbadge { position:absolute; top:-11px; right:-3px; padding:1px 5px; border-radius:6px 6px 6px 0; background:#e8412c; color:#fff; font-size:9px; font-style:normal; white-space:nowrap; }

/* 11/01 Owner 确认效果图「各地做法地图置顶」v5：做法标签最上面一块（和小程序 dish-ways 同款） */
.dww-hero { padding:14px 12px; border:1.5px solid #ffe2cc; border-radius:20px; background:linear-gradient(180deg,#fff 0%,#fff7ef 100%); box-shadow:0 6px 18px rgba(255,122,47,.10); }
.dww-h1 { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dww-h1 b { font-size:17px; font-weight:900; }
.dww-sub { margin:3px 0 10px; color:#8a7a6c; font-size:13px; }
.dww-sub em { color:#ff6a1f; font-size:16px; font-style:normal; font-weight:900; }
.dww-hero .dww-bar { height:26px; margin:0 0 10px; border-radius:13px; }
.dww-hero .dww-bar span { justify-content:center; font-size:13px; font-weight:800; }
.dww-hero .dww-bar .o0 { background:#ff6a1f; } .dww-hero .dww-bar .o1 { background:#7b5cf5; justify-content:center; }
.dww-hero .dww-board { grid-template-columns:repeat(8, 34px); grid-template-rows:repeat(var(--rows, 8), 34px); gap:5px; margin:4px 0 6px; }
.dww-hero .dww-tile { position:relative; border-radius:8px; font-size:13px; }
.dww-tile.lv0 { background:#f0ebf3; }
.dww-tile.lv1 { background:#ffe0c9; color:#c4561a; } .dww-tile.lv2 { background:#ffab73; } .dww-tile.lv3 { background:#ff6a1f; }
.dww-tile.lv1.c1 { background:#e5dcff; color:#6b4cf1; } .dww-tile.lv2.c1 { background:#a38bff; color:#fff; } .dww-tile.lv3.c1 { background:#6b4cf1; color:#fff; }
.dww-tile.is-bub { z-index:3; overflow:visible; }
.dww-tile.is-bub.is-home { background:#fff; color:#ff6a1f; border:2px solid #ff6a1f; box-shadow:0 0 0 5px rgba(255,106,31,.18),0 0 0 10px rgba(255,106,31,.08); font-weight:900; }
.dww-tile.is-bub.is-pick { border:2px solid #fff; box-shadow:0 0 0 3px #7b5cf5,0 4px 10px rgba(107,76,241,.35); }
.dww-bub { position:absolute; bottom:42px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; padding:4px 9px; border-radius:10px; background:#ff6a1f; color:#fff; font-size:13px; font-weight:800; line-height:1.3; white-space:nowrap; pointer-events:none; }
.dww-bub::after { content:""; position:absolute; left:50%; bottom:-5px; margin-left:-5px; border:5px solid transparent; border-bottom:0; border-top-color:#ff6a1f; }
.dww-bub small { font-size:11px; font-weight:600; opacity:.92; }
.dww-bub.is-pick { background:#7b5cf5; } .dww-bub.is-pick::after { border-top-color:#7b5cf5; }
.dww-askpoll { margin-top:4px; text-align:center; }
.dww-askpoll b { font-size:15px; }
.dww-askpoll > div { display:flex; gap:10px; margin-top:8px; }
.dww-askpoll button { flex:1; height:40px; border:1.5px solid #ffc9a6; border-radius:20px; background:#fff; color:#c4561a; font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.dww-minecard { margin-top:8px; padding:10px 12px; border:1.5px solid #ffd2b3; border-radius:14px; background:#fff; }
.dww-mine-h { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.dww-mine-h b { font-size:15px; }
.dww-mine-h em { padding:2px 8px; border-radius:999px; background:#fff1e2; color:#c4561a; font-size:13px; font-style:normal; font-weight:800; }
.dww-mine-h em.is-wait { background:#f3eff6; color:#8a8496; }
.dww-minecard small { display:block; margin-top:3px; color:#9a8b7c; font-size:13px; } .dww-minecard small.is-bad { color:#c95a1c; }
.dww-hero .dww-act { flex-direction:column; align-items:center; }
.dww-hero .dww-write { flex:none; height:48px; border-radius:24px; font-size:17px; }
.dww-write.is-ghost { border:1.5px solid #ff6a1f; background:#fff; color:#ff6a1f; box-shadow:none; }
.dww-rw { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:9px 0 0; }
.dww-rw span { padding:2px 9px; border:1px solid transparent; border-radius:999px; color:#b3a698; font-size:13px; }
.dww-rw span.on { border-color:#ffc9a6; background:#fff1e2; color:#c4561a; font-weight:800; }
.dww-hero + .dww-head { margin-top:10px; }
.dww-head b { font-size:15px; }
.dww-head small { font-size:13px; }
.dww-hon { padding:1px 6px; border-radius:6px; background:#ff6a1f; color:#fff; font-size:11px; font-style:normal; font-weight:800; }
.dww-hon.is-first { background:#7b5cf5; }
.dww-who { flex-wrap:wrap; }