/* ====== 基础 ====== */
:root {
    --primary: #c9302c;
    --primary-dark: #a32623;
    --accent: #e8a85a;
    --gold: #d4af37;
    --bg: #fff8f0;
    --bg-2: #fef3e2;
    --ink: #2d1810;
    --ink-soft: #5a4a3a;
    --line: #e8d9c4;
    --white: #ffffff;
    /* 别名：有些地方习惯写 --border / --danger / --success，缺定义会让整条样式失效（2026-09-29 体检修复） */
    --border: var(--line);
    --danger: #c0392b;
    --success: #16a085;
    --shadow: 0 10px 30px -10px rgba(201, 48, 44, 0.15);
    --shadow-lg: 0 20px 60px -20px rgba(45, 24, 16, 0.25);
    --radius: 16px;
    --radius-sm: 10px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ====== 导航 ====== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 248, 240, 0.85);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid rgba(232, 217, 196, 0.6);
}
.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    gap: 32px;
}
.logo { display: flex; align-items: baseline; gap: 8px; }
.logo-icon { font-size: 28px; }
.logo-text {
    font-size: 22px; font-weight: 800; color: var(--primary);
    letter-spacing: 1px; font-family: "STKaiti", "KaiTi", serif;
}
.logo-en {
    font-size: 11px; letter-spacing: 2px; color: var(--ink-soft);
    text-transform: uppercase; font-weight: 600;
}
.nav-links { display: flex; gap: 26px; flex: 1; align-items: center; }
.nav-links li { display: flex; }
/* 横排（2026-10-09）：导航项恢复单行（「分区打卡」「探索全国」各占一行排开）。
   min-height 保留，让各项文字落在同一水平中线上；span 的 nowrap 防止窄屏折行。 */
.nav-links a {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    min-height: 2.7em; text-align: center;
    font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ink-soft);
    transition: color .2s; position: relative;
}
.nav-links a span { display: block; white-space: nowrap; letter-spacing: 1px; }
.nav-links a:hover { color: var(--primary); }
.nav-links a::after {
    content: ''; position: absolute; bottom: -6px; left: 0; right: 0;
    height: 2px; background: var(--primary);
    transform: scaleX(0); transition: transform .25s;
}
.nav-links a:hover::after { transform: scaleX(1); }
/* 中等宽度窗口：横排后导航更宽，窗口小就先收间距和字距，别让它挤到搜索框 */
@media (max-width: 1120px) {
    .nav-links { gap: 16px; }
    .nav-links a span { letter-spacing: 0; }
}
@media (max-width: 1000px) {
    .nav-links { gap: 10px; }
    .nav-links a { font-size: 13.5px; }
}
.nav-actions { display: flex; gap: 12px; align-items: center; }
.nav-actions input {
    border: 1px solid var(--line); background: var(--white);
    padding: 10px 16px; border-radius: 100px; font-size: 14px;
    outline: none; min-width: 200px; transition: border-color .2s;
}
.nav-actions input:focus { border-color: var(--primary); }

/* ====== 通用按钮 ====== */
.btn-primary {
    background: var(--primary); color: var(--white);
    padding: 10px 22px; border-radius: 100px;
    font-size: 14px; font-weight: 600;
    transition: all .25s;
}
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn-ghost {
    background: transparent; color: var(--ink);
    padding: 10px 22px; border-radius: 100px;
    border: 1.5px solid var(--ink); font-size: 14px; font-weight: 600;
    transition: all .25s;
}
.btn-ghost:hover { background: var(--ink); color: var(--white); }
.btn-large { padding: 16px 36px; font-size: 16px; }

/* ====== 英雄区 ====== */
.hero {
    position: relative; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 120px 32px 80px;
    overflow: hidden;
}
.hero-bg {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at top left, #ffe9d6 0%, transparent 50%),
                radial-gradient(ellipse at bottom right, #ffd9b8 0%, transparent 50%),
                linear-gradient(135deg, #fff8f0 0%, #fef3e2 100%);
    z-index: -1;
}
.bg-gradient {
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(232, 168, 90, 0.04) 40px, rgba(232, 168, 90, 0.04) 41px),
        repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(201, 48, 44, 0.04) 40px, rgba(201, 48, 44, 0.04) 41px);
}
.floating-food {
    position: absolute; font-size: 60px;
    animation: float 6s ease-in-out infinite;
    opacity: 0.6;
}
.food-1 { top: 15%; left: 8%; animation-delay: 0s; }
.food-2 { top: 20%; right: 12%; animation-delay: 1s; font-size: 80px; }
.food-3 { bottom: 25%; left: 10%; animation-delay: 2s; font-size: 70px; }
.food-4 { top: 40%; right: 8%; animation-delay: 3s; }
.food-5 { bottom: 15%; right: 20%; animation-delay: 4s; font-size: 90px; }
.food-6 { top: 60%; left: 20%; animation-delay: 1.5s; }

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-30px) rotate(10deg); }
}

.hero-content {
    max-width: 980px; text-align: center; position: relative; z-index: 2;
}
.hero-tag {
    display: inline-block;
    background: rgba(201, 48, 44, 0.1);
    color: var(--primary);
    padding: 8px 20px; border-radius: 100px;
    font-size: 12px; font-weight: 700; letter-spacing: 3px;
    margin-bottom: 28px;
}
.hero-title {
    font-size: clamp(48px, 9vw, 110px);
    font-weight: 900; line-height: 1.05;
    margin-bottom: 32px;
    font-family: "STKaiti", "KaiTi", "Songti SC", serif;
    letter-spacing: -2px;
}
.hero-title-accent {
    display: block;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
    margin-top: 8px;
}

.hero-subtitle {
    font-size: 18px; color: var(--ink-soft);
    max-width: 680px; margin: 0 auto 48px; line-height: 1.8;
}
.hero-subtitle strong {
    color: var(--primary); font-weight: 700;
}
/* 首屏核心主张（2026-10-04）：用户要求把「帮你少踩坑、不花冤枉钱」直接写出来。
   原来这一块只有免费/会员的对比 —— 那是「差在哪」，不是「我为什么要看这个」。
   现在把主张放最上、字号最大，下方小字补「凭什么」，再接原来的两行对比。 */
.hero-subtitle .hs-core {
    display: block;
    font-size: 26px; font-weight: 900; letter-spacing: .5px; line-height: 1.35;
    color: var(--ink);
}
.hero-subtitle .hs-core em {
    font-style: normal;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-subtitle .hs-core-sub {
    display: block;
    font-size: 14.5px; color: var(--ink-soft); line-height: 1.7;
    margin: 6px 0 18px;
}
.hero-subtitle .hs-line { display: block; }
/* 邀请句（2026-10-04o）：「成为会员，一起玩转上海滩」是全站唯一的核心句式，
   在副标题里给它单独一档 —— 比主张小一档、比普通说明大一档，金色实心。
   前两版把这里写成了「免费 vs 会员」的功能对比，用户一句「我是用户就不会买单」推翻，
   改成年卡式的召唤句。别再退回对比式文案。 */
.hero-subtitle .hs-join {
    display: block;
    margin: 0 0 10px;
    font-size: 20px; font-weight: 900; letter-spacing: .3px; line-height: 1.45;
    color: var(--ink);
}
.hero-subtitle .hs-join strong {
    color: #a97c16; font-weight: 900;
}
/* 门槛 + 半径：一张月卡进门，全国探路者带你玩（2026-10-05r 起不再写上海本地三件事）。
   用极淡金底 + 虚线框收住，抬高一点层级，但不做成一个抢主 CTA 的色块。 */
.hero-subtitle .hs-why {
    display: block;
    margin-top: 12px; padding: 9px 14px;
    border: 1px dashed rgba(212, 175, 55, .55);
    border-radius: 10px;
    background: rgba(212, 175, 55, .09);
    font-size: 14.5px; line-height: 1.75; color: var(--ink);
}
.hero-subtitle .hs-why strong { color: #a97c16; font-weight: 800; }
/* ====== 首屏版本说明条（2026-10-09）======
   胶囊条：左边「免费版」徽章 + 中间一句话 + 右边会员版入口。
   负 margin-top 是为了吃掉 .hero-subtitle 那 48px 的下边距，
   让这条紧贴副标题（视觉间距约 14px），不然中间会空一大块。 */
.hero-edition {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px; flex-wrap: wrap;
    margin: -34px auto 32px;
    padding: 8px 18px;
    max-width: 720px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 8px 22px -16px rgba(45, 24, 16, .45);
    font-size: 13.5px; line-height: 1.6; color: var(--ink-soft);
}
.hero-edition .ed-badge {
    flex: 0 0 auto;
    background: var(--primary); color: #fff;
    font-size: 12px; font-weight: 800; letter-spacing: .5px;
    padding: 3px 11px; border-radius: 999px;
}
.hero-edition .ed-text { flex: 0 1 auto; }
.hero-edition .ed-text em { font-style: normal; font-weight: 700; color: var(--ink); }
.hero-edition .ed-text b { color: var(--ink); font-weight: 800; }
.hero-edition .ed-link {
    flex: 0 0 auto;
    color: var(--primary); font-weight: 800; text-decoration: none;
    border-bottom: 1px dashed currentColor;
    transition: color .2s;
}
.hero-edition .ed-link:hover { color: var(--accent); }
/* 手机端：整条收窄，别让它占掉三行 */
@media (max-width: 768px) {
    .hero-edition {
        margin: -22px auto 24px;
        padding: 7px 13px; gap: 8px;
        font-size: 12.5px;
    }
    .hero-edition .ed-badge { font-size: 11px; padding: 2px 9px; }
}

/* 数据信任状（2026-10-04 二次改版）：原来四格巨型数字占满一整屏，
   把首屏最贵的位置花在「我们有多少内容」上。现在收成一行小字，在副标题下方当背书。 */
.hero-facts {
    display: flex; align-items: baseline; justify-content: center;
    gap: 10px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--ink-soft);
    margin: 0 0 32px;
}
.hero-facts b {
    font-size: 16px; font-weight: 900;
    color: var(--primary); letter-spacing: .5px;
}
.hero-facts .hf-sep { color: #d9c3ad; }
/* 统计数字旁的会员补充说明（如「90 个会员专属」） */
.stat-sub {
    font-size: 11.5px; color: var(--accent, #d4a24a);
    letter-spacing: 0.5px; font-weight: 600;
}
.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ====== 首屏 · 打码前 / 打码后对比（2026-10-04 新增）======
   全站都在用文字说「打码」，但访客没见过打码长什么样。
   这里把同一个点位按「免费看到的」和「会员看到的」并排放出来，一眼看懂差别。
   ⚠️ 内容必须是示例数据（示意路 / 示例接待点），真实地址写进 HTML 等于把付费墙公开。 */
.demo-compare {
    max-width: 760px; margin: -18px auto 30px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid #f0dcc8; border-radius: 18px;
    padding: 14px 16px 16px;
    backdrop-filter: blur(6px);
    box-shadow: 0 20px 40px -30px rgba(45, 24, 16, .75);
}
.dc-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.dc-title { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.dc-note { font-size: 10.5px; color: var(--ink-soft); opacity: .75; }
.dc-grid { display: flex; align-items: stretch; gap: 12px; }
.dc-card {
    flex: 1 1 0; min-width: 0; border-radius: 14px; padding: 12px 13px;
    border: 1px solid var(--line); background: var(--white);
}
.dc-card.is-vip {
    background: linear-gradient(150deg, #fff6e2, #fffdf8);
    border-color: rgba(212, 175, 55, .6);
}
.dc-arrow { align-self: center; flex: 0 0 auto; font-size: 18px; color: #d9c3ad; }
.dc-tag { display: block; font-size: 11px; font-weight: 800; margin-bottom: 9px; }
.dc-card.is-free .dc-tag { color: var(--ink-soft); }
.dc-card.is-vip .dc-tag { color: #a97c16; }
.dc-spot-name { font-size: 13px; font-weight: 800; color: var(--ink); }
.dc-spot-meta { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; }
.dc-line { display: flex; align-items: center; gap: 8px; font-size: 11.5px; margin-top: 6px; }
.dc-line > span { flex: 0 0 52px; color: var(--ink-soft); }
.dc-line > b { font-weight: 700; color: var(--ink); }
.dc-mask { letter-spacing: 1px; color: #c9b8a5; }
.dc-lock, .dc-open {
    margin-top: 10px; font-size: 11px; font-weight: 700;
    padding: 6px 8px; border-radius: 9px; text-align: center;
}
.dc-lock { background: var(--bg-2); color: var(--ink-soft); }
.dc-open { background: linear-gradient(135deg, #a97c16, #dcae45); color: #fff; }
@media (max-width: 768px) {
    .demo-compare { margin: -6px 0 22px; padding: 12px 12px 14px; }
    .dc-grid { flex-direction: column; }
    .dc-arrow { transform: rotate(90deg); align-self: center; }
}

/* 首屏的会员入口按钮（金色，与「看看附近」区分） */
.btn-vip-cta {
    background: linear-gradient(135deg, #a97c16, #e0b34a);
    color: #fff; border: 0; border-radius: 100px;
    font-family: inherit; font-weight: 800; cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 16px 34px -18px rgba(169, 124, 22, .95);
}
.btn-vip-cta:hover { transform: translateY(-1px); }
.btn-vip-cta .hl-sub { display: block; font-size: 11px; font-weight: 600; opacity: .92; margin-top: 1px; }

/* ====== 通用 section ====== */
section { padding: 100px 0; }
.section-head { text-align: center; margin-bottom: 64px; }
.section-kicker {
    display: inline-block;
    color: var(--primary); font-size: 12px; font-weight: 800;
    letter-spacing: 4px; margin-bottom: 16px;
}
.section-title {
    font-size: clamp(36px, 5vw, 56px); font-weight: 900;
    margin-bottom: 16px; line-height: 1.2;
    font-family: "STKaiti", "KaiTi", "Songti SC", serif;
}
.section-desc {
    font-size: 17px; color: var(--ink-soft); max-width: 600px;
    margin: 0 auto;
}

/* ====== 地图 ====== */
.map-section { background: var(--white); }
.map-wrap {
    display: grid; grid-template-columns: 1fr 400px;
    gap: 40px; align-items: start;
}
/* 无活动横幅时右侧栏收起，地图单列铺满 */
.map-wrap.no-banner { grid-template-columns: 1fr; }
.map-wrap.no-banner .map-svg svg { width: 100%; height: auto; }
.map-svg {
    background: linear-gradient(135deg, #faf3e7 0%, #f5e6d3 100%);
    border-radius: var(--radius); padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
}
.map-svg svg { width: 100%; height: auto; display: block; }
.district {
    cursor: pointer;
    transition: all .3s ease;
    transform-origin: center;
    transform-box: fill-box;
}
.district:hover {
    fill: #ffd180 !important;
    stroke: var(--primary) !important;
    stroke-width: 3 !important;
    filter: drop-shadow(0 4px 12px rgba(201, 48, 44, 0.3));
}
.district.active {
    fill: var(--primary) !important;
    stroke: var(--primary-dark) !important;
}
.district-label {
    font-size: 12px; font-weight: 700;
    fill: var(--ink); pointer-events: none;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}

.map-legend {
    background: var(--bg-2);
    border-radius: var(--radius);
    padding: 24px;
    border: 1px solid var(--line);
}
.legend-title {
    font-size: 16px; font-weight: 800; color: var(--primary);
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 2px solid var(--accent);
}
.legend-list { display: flex; flex-direction: column; gap: 12px; }
.legend-list li { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.legend-color {
    width: 24px; height: 18px; border-radius: 4px;
    display: inline-block; flex-shrink: 0;
    font-size: 14px; line-height: 18px; text-align: center;
}
.map-tip {
    margin-top: 24px; padding: 16px;
    background: rgba(201, 48, 44, 0.06);
    border-left: 3px solid var(--primary);
    font-size: 13px; color: var(--ink-soft);
    border-radius: 6px; line-height: 1.6;
}

/* ====== 16区筛选 ====== */
.districts-section { background: var(--bg); }
.filter-bar {
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center; margin-bottom: 48px;
}
.filter-chip {
    padding: 10px 20px; border-radius: 100px;
    background: var(--white); border: 1.5px solid var(--line);
    font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all .2s;
    color: var(--ink-soft);
}
.filter-chip:hover {
    border-color: var(--primary); color: var(--primary);
    transform: translateY(-2px);
}
.filter-chip.active {
    background: var(--primary); color: var(--white);
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(201, 48, 44, 0.3);
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
}
.district-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    transition: all .35s;
    cursor: pointer;
    display: flex; flex-direction: column;
}
.district-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
}
.card-cover {
    height: 160px;
    background: linear-gradient(135deg, var(--c, #ffb88c) 0%, var(--c2, #de6262) 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 72px; position: relative; overflow: hidden;
}
.card-cover::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.3) 0%, transparent 60%);
}
.card-district-tag {
    position: absolute; top: 16px; left: 16px;
    background: rgba(255,255,255,0.95); color: var(--primary);
    padding: 6px 14px; border-radius: 100px;
    font-size: 12px; font-weight: 800; letter-spacing: 1px;
}
.card-fav {
    position: absolute; top: 16px; right: 16px;
    background: rgba(255,255,255,0.95);
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; cursor: pointer;
    transition: transform .2s;
}
.card-fav:hover { transform: scale(1.15); }
.card-fav.liked { color: var(--primary); }

.card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.card-title {
    font-size: 22px; font-weight: 800; margin-bottom: 6px;
    font-family: "STKaiti", "KaiTi", serif;
}
.card-tagline {
    font-size: 13px; color: var(--primary); font-weight: 600;
    letter-spacing: 1px; margin-bottom: 14px;
}
.card-desc {
    font-size: 14px; color: var(--ink-soft); line-height: 1.7;
    margin-bottom: 18px; flex: 1;
}
.card-places {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding-top: 18px; border-top: 1px dashed var(--line);
}
.place-chip {
    background: var(--bg-2); color: var(--ink);
    padding: 5px 12px; border-radius: 100px;
    font-size: 12px; font-weight: 600;
    transition: all .2s;
}
.place-chip:hover {
    background: var(--primary); color: var(--white);
}

/* ====== 菜系流派 ====== */
.cuisine-section { background: var(--white); }

/* ====== 本期精选（3 张 Banner）====== */
.banners-section { background: var(--bg); }
.hl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.hl-card {
    position: relative;
    border-radius: 18px;
    padding: 26px 24px 22px;
    cursor: pointer;
    overflow: hidden;
    transition: all .22s;
    color: var(--white);
    min-height: 280px;
    display: flex;
    flex-direction: column;
}
.hl-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(60, 52, 137, .18); }
.hl-promo { background: linear-gradient(150deg, #c9302c 0%, #e8743b 55%, #f0a35e 100%); }
.hl-vip    { background: linear-gradient(150deg, #2b2350 0%, #534ab7 60%, #7f77dd 100%); }
.hl-scout  { background: linear-gradient(150deg, #6b4f17 0%, #a3782a 55%, #d4af37 100%); }
.hl-promo:hover { box-shadow: 0 14px 30px rgba(201, 48, 44, .3); }
.hl-vip:hover    { box-shadow: 0 14px 30px rgba(83, 74, 183, .35); }
.hl-scout:hover  { box-shadow: 0 14px 30px rgba(163, 120, 42, .35); }
.hl-badge {
    position: absolute; top: 16px; right: 16px;
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .38);
    padding: 3px 11px; border-radius: 999px;
    backdrop-filter: blur(2px);
}
.hl-emoji { font-size: 34px; line-height: 1; }
.hl-title {
    font-size: 20px; font-weight: 800; margin-top: 12px;
    font-family: "STKaiti", "KaiTi", serif; letter-spacing: 1px;
}
.hl-headline {
    font-size: 15px; font-weight: 800; margin-top: 6px;
    color: #ffe9c8;
}
.hl-desc { font-size: 12.5px; line-height: 1.8; margin-top: 10px; opacity: .92; flex: 1; }
.hl-desc b { color: #ffe9c8; }
/* 嗨选跨区提示（2026-10-04i）：在卡片里补一句「别的区也有」，半透明胶囊，不抢 CTA 的位置 */
.hl-note {
    margin-top: 10px; padding: 7px 10px;
    font-size: 12px; font-weight: 700; line-height: 1.55;
    color: #fff4dd; background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px;
}
.hl-list {
    list-style: none; margin-top: 12px; flex: 1;
    display: flex; flex-direction: column; gap: 7px;
}
.hl-list li {
    font-size: 12.5px; padding-left: 20px; position: relative; opacity: .95;
}
.hl-list li::before {
    content: "✓"; position: absolute; left: 0;
    font-weight: 800; color: #ffe9c8;
}
.hl-cta {
    margin-top: 14px; font-size: 13.5px; font-weight: 800;
    text-align: right; color: var(--white);
    border-top: 1px dashed rgba(255, 255, 255, .35);
    padding-top: 12px;
}
@media (max-width: 900px) { .hl-grid { grid-template-columns: 1fr; } .hl-card { min-height: 0; } }


/* ====== 探索全国 ====== */
.national-section { background: linear-gradient(180deg, var(--bg), var(--white)); }
.national-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.nat-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all .2s;
    position: relative;
    overflow: hidden;
}
.nat-card::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--c, #5d6d7e), var(--c2, #7f8c8d));
}
.nat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(93, 109, 126, .14); border-color: var(--c, #5d6d7d); }
.nat-card.is-ghost { cursor: default; border-style: dashed; background: transparent; }
.nat-card.is-ghost::before { background: repeating-linear-gradient(90deg, #c8c2b4 0 8px, transparent 8px 16px); }
.nat-card.is-ghost:hover { transform: none; box-shadow: none; }
.nat-head { display: flex; align-items: center; gap: 12px; }
.nat-emoji { font-size: 30px; line-height: 1; }
.nat-name { font-size: 17px; font-weight: 800; color: var(--ink); font-family: "STKaiti", "KaiTi", serif; }
.nat-en { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; letter-spacing: .5px; }
.nat-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; margin: 12px 0; }
.nat-stats { font-size: 12.5px; color: var(--ink-soft); }
.nat-stats b { font-size: 15px; color: var(--ink); }
.nat-dot { margin: 0 6px; color: #c8c2b4; }
.nat-areas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.nat-areas i {
    font-style: normal; font-size: 11.5px; padding: 3px 10px;
    background: var(--bg); border-radius: 999px; color: var(--ink-soft);
}
.nat-cta {
    margin-top: 14px; font-size: 13px; font-weight: 700;
    color: var(--c, #5d6d7e); text-align: right;
}
.nat-card.is-ghost .nat-cta { display: none; }
@media (max-width: 640px) {
    .national-grid { grid-template-columns: 1fr; }
}

.cuisine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
.cuisine-card {
    background: var(--bg);
    border-radius: var(--radius); padding: 32px 24px;
    text-align: center; transition: all .35s;
    border: 2px solid transparent;
    position: relative; overflow: hidden;
}
.cuisine-card::before {
    content: ''; position: absolute;
    top: -50%; left: -50%; right: -50%; bottom: -50%;
    background: radial-gradient(circle, var(--c, #c9302c) 0%, transparent 60%);
    opacity: 0; transition: opacity .3s;
    z-index: 0;
}
.cuisine-card:hover {
    transform: translateY(-8px);
    border-color: var(--c, var(--primary));
    box-shadow: 0 16px 40px -16px var(--c, var(--primary));
}
.cuisine-card:hover::before { opacity: 0.05; }
.cuisine-card > * { position: relative; z-index: 1; }
.cuisine-emoji {
    font-size: 56px; margin-bottom: 12px;
    transition: transform .35s;
}
.cuisine-card:hover .cuisine-emoji {
    transform: scale(1.15) rotate(-8deg);
}
.cuisine-card h4 {
    font-size: 19px; font-weight: 800; margin-bottom: 10px;
    color: var(--c, var(--primary));
    font-family: "STKaiti", "KaiTi", serif;
}
.cuisine-card p {
    font-size: 13px; color: var(--ink-soft); line-height: 1.7;
}

/* ====== 美食路线 ====== */
.route-section { background: var(--bg); }
.route-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}
.route-card {
    background: var(--white); padding: 36px 32px;
    border-radius: var(--radius); border: 1px solid var(--line);
    box-shadow: var(--shadow); transition: all .35s;
    position: relative; overflow: hidden;
}
.route-card::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 100px;
    background: linear-gradient(180deg, rgba(201,48,44,0.06) 0%, transparent 100%);
}
.route-card-2::before {
    background: linear-gradient(180deg, rgba(232,168,90,0.1) 0%, transparent 100%);
}
.route-card-3::before {
    background: linear-gradient(180deg, rgba(39,174,96,0.08) 0%, transparent 100%);
}
.route-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.route-day {
    display: inline-block;
    background: var(--primary); color: var(--white);
    padding: 6px 14px; border-radius: 6px;
    font-size: 12px; font-weight: 800; letter-spacing: 2px;
    margin-bottom: 16px;
}
.route-card h3 {
    font-size: 24px; font-weight: 900; margin-bottom: 24px;
    font-family: "STKaiti", "KaiTi", serif;
}
.route-list {
    display: flex; flex-direction: column; gap: 12px;
    margin-bottom: 24px;
}
.route-list li {
    font-size: 14px; color: var(--ink); padding-left: 8px;
    border-left: 2px solid var(--accent); padding: 4px 12px;
    background: var(--bg-2); border-radius: 0 6px 6px 0;
}
.route-meta {
    font-size: 12px; color: var(--ink-soft); font-weight: 600;
    padding-top: 16px; border-top: 1px dashed var(--line);
}

/* ====== 页脚 ====== */
.footer {
    background: var(--ink); color: var(--bg-2); padding: 64px 0 32px;
}
.footer .container { padding: 0 32px; }
.footer-top {
    display: grid; grid-template-columns: 1fr 2fr; gap: 48px;
    padding-bottom: 48px; border-bottom: 1px solid rgba(232,217,196,0.2);
}
.footer-brand .logo-text { color: var(--accent); }
.footer-brand p {
    font-size: 14px; line-height: 2; margin-top: 16px; opacity: 0.8;
}
.footer-cols {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.footer-cols h5 {
    font-size: 14px; font-weight: 800; color: var(--accent);
    margin-bottom: 16px; letter-spacing: 2px;
}
.footer-cols ul { display: flex; flex-direction: column; gap: 10px; }
.footer-cols li {
    font-size: 13px; opacity: 0.7; cursor: pointer;
    transition: opacity .2s, color .2s;
}
.footer-cols li:hover { opacity: 1; color: var(--accent); }
.footer-bottom {
    padding-top: 24px;
    display: flex; justify-content: space-between;
    font-size: 12px; opacity: 0.6; flex-wrap: wrap; gap: 12px;
}

/* ====== 弹窗 ====== */
.modal {
    position: fixed; inset: 0; z-index: 1000;
    display: none; align-items: center; justify-content: center;
}
.modal.active, .modal.show { display: flex; }
.modal-mask {
    position: absolute; inset: 0;
    background: rgba(45, 24, 16, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.modal-box {
    position: relative;
    background: var(--white);
    border-radius: var(--radius);
    width: min(680px, 92vw);
    max-height: 88vh; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 30px 80px -20px rgba(45, 24, 16, 0.5);
    animation: modalIn .35s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(40px) scale(0.96); }
    to { opacity: 1; transform: none; }
}
.modal-close {
    position: absolute; top: 16px; right: 16px;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.95); font-size: 22px;
    color: var(--ink); z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform .2s;
}
.modal-close:hover { transform: rotate(90deg); }
.modal-body {
    overflow-y: auto; padding: 0;
}
.modal-cover {
    height: 200px;
    background: linear-gradient(135deg, var(--c, #ffb88c) 0%, var(--c2, #de6262) 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 96px; position: relative;
}
.modal-cover::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.3) 0%, transparent 60%);
}
.modal-content { padding: 32px; }
.modal-content h2 {
    font-size: 28px; font-weight: 900; margin-bottom: 4px;
    font-family: "STKaiti", "KaiTi", serif;
}
.modal-content .modal-tag {
    font-size: 13px; color: var(--primary); font-weight: 700;
    letter-spacing: 2px; margin-bottom: 20px;
}
.modal-content p {
    font-size: 15px; line-height: 1.8; color: var(--ink-soft);
    margin-bottom: 24px;
}
.modal-places-title {
    font-size: 16px; font-weight: 800; color: var(--primary);
    margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 2px solid var(--accent);
}
.modal-places {
    display: flex; flex-direction: column; gap: 12px;
}
.modal-place {
    background: var(--bg-2); padding: 16px; border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
}
.modal-place-name {
    font-size: 15px; font-weight: 700; margin-bottom: 4px;
    color: var(--ink);
}
.modal-place-info {
    font-size: 13px; color: var(--ink-soft); line-height: 1.6;
}
.modal-place-info strong { color: var(--primary); }

/* ====== 返回顶部 ====== */
.back-top {
    position: fixed; bottom: 32px; right: 32px;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--primary); color: var(--white);
    font-size: 22px; font-weight: 700;
    box-shadow: 0 8px 24px -4px rgba(201,48,44,0.4);
    opacity: 0; pointer-events: none;
    transition: all .3s; z-index: 50;
}
.back-top.visible { opacity: 1; pointer-events: auto; }
.back-top:hover { transform: translateY(-4px); }

/* ====== 响应式 ====== */
@media (max-width: 1024px) {
    .map-wrap { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .container { padding: 0 20px; }
    section { padding: 64px 0; }
    .nav-container { gap: 16px; padding: 14px 20px; flex-wrap: wrap; }
    .nav-links { display: none; }
    .nav-actions input { min-width: 0; flex: 1; }
    .hero { padding: 100px 20px 60px; min-height: auto; }
    .hero-title { letter-spacing: -1px; }
    .hero-subtitle { font-size: 15px; }
    /* 手机端核心主张：仍是首屏最大的正文，但不至于把标题压下去 */
    .hero-subtitle .hs-core { font-size: 21px; line-height: 1.4; }
    .hero-subtitle .hs-core-sub { font-size: 13px; margin: 5px 0 12px; }
    .hero-subtitle .hs-join { font-size: 17px; }
    .hero-subtitle .hs-why { font-size: 13px; padding: 8px 11px; margin-top: 10px; }
    .hero-facts { gap: 7px; font-size: 12px; margin-bottom: 24px; }
    .hero-facts b { font-size: 15px; }
    .hero-cta { gap: 12px; }
    .floating-food { font-size: 40px !important; }
    .section-head { margin-bottom: 40px; }
    .cards-grid, .cuisine-grid, .route-grid {
        grid-template-columns: 1fr;
    }
    .footer-cols { grid-template-columns: repeat(2, 1fr); }
    .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
}
@media (max-width: 480px) {
    .hero-cta { flex-direction: column; }
    .hero-cta a { width: 100%; text-align: center; }
}

/* ====== 10月地图版 · 新增组件样式 ====== */

/* 工具栏 */
.toolbar {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 32px;
    box-shadow: var(--shadow);
}
.tool-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
}
.tool-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tool-label { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.filter-chip.small {
    padding: 4px 12px;
    font-size: 13px;
    border-radius: 999px;
}
.sort-select {
    font-family: inherit;
    font-size: 14px;
    padding: 6px 12px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
    cursor: pointer;
}
.sort-select:focus { outline: 2px solid var(--accent); }
.tool-result {
    margin-left: auto;
    font-size: 13px;
    color: var(--primary);
    font-weight: 700;
    background: #fdeceb;
    border-radius: 999px;
    padding: 4px 14px;
}

/* 区域卡片 · 点位列表 */
.spot-card { grid-column: 1 / -1; }
.spot-card .card-cover { min-height: 90px; height: 90px; }
.spot-card .card-count {
    position: absolute;
    right: 16px;
    top: 16px;
    background: rgba(255,255,255,0.92);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 999px;
}
.spot-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 区域卡片折叠：默认只显示区概览，点击才展开点位（页面不再随城市变长） */
.js-card-toggle { cursor: pointer; }
.card-toggle-icon {
    float: right;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    background: #fff5f5;
    border: 1px solid #f3c9c9;
    padding: 2px 10px;
    border-radius: 999px;
}
.card-expand-btn {
    margin-top: 14px;
    width: 100%;
    padding: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    background: var(--bg);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all .2s;
}
.card-expand-btn:hover {
    background: #fff5f5;
    border-color: var(--primary);
    color: var(--primary);
}
.spot-card.is-open { border-color: var(--accent); }
.spot-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}
.spot-item:hover {
    border-color: var(--accent);
    background: #fff5e6;
    transform: translateX(4px);
}
.spot-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 260px;
}
.spot-area {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    background: #fdeceb;
    padding: 2px 10px;
    border-radius: 999px;
}
.spot-addr {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.spot-host {
    font-size: 12px;
    color: var(--ink-soft);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.spot-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.content-tag {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    letter-spacing: 1px;
}
.type-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-soft);
    border: 1px solid var(--line);
    padding: 1px 8px;
    border-radius: 6px;
}
.star-tag { font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.energy-badge {
    position: relative;
    width: 72px;
    height: 16px;
    background: #f0e4d0;
    border-radius: 999px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.energy-badge i {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #f5b041, #e85a5a);
    border-radius: 999px;
}
.energy-badge em {
    position: relative;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.spot-fav {
    font-size: 16px;
    color: #c9a06a;
    transition: transform 0.15s ease, color 0.15s ease;
    padding: 2px 6px;
}
.spot-fav:hover { transform: scale(1.3); }
.spot-fav.liked { color: var(--primary); }

/* 点位评分小标 */
.score-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(184, 152, 95, 0.12);
    color: #6b4f1d;
    transition: background .15s ease;
}
.score-chip b { font-size: 13px; color: var(--primary); }
.score-chip i { font-style: normal; opacity: .7; font-weight: 600; font-size: 11px; }
.score-chip.has-user {
    background: linear-gradient(135deg, #fff4d4, #ffe5a8);
    box-shadow: 0 0 0 1px rgba(232, 168, 90, 0.4);
}
.score-chip.no-user { opacity: .75; }

/* 打分按钮 */
.spot-rate {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff9a3c, #ff7a18);
    color: #fff;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 2px 6px rgba(255, 122, 24, 0.32);
    cursor: pointer;
    border: none;
}
.spot-rate:hover { transform: translateY(-1px) scale(1.05); box-shadow: 0 4px 10px rgba(255,122,24,.5); }
.empty-tip {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    font-size: 16px;
    color: var(--ink-soft);
    background: var(--white);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}

/* 地图图例按钮 */
.legend-btns { margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.legend-extra {
    width: 100%;
    padding: 10px 14px;
    background: linear-gradient(135deg, #fff5e6, #ffe0b2);
    border: 1.5px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.2s ease;
}
.legend-extra:hover {
    background: linear-gradient(135deg, #ffe0b2, #ffd699);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* 弹窗 · 点位详情 */
.modal-spot-head {
    background: linear-gradient(135deg, var(--c, #e85a5a), color-mix(in srgb, var(--c, #e85a5a) 70%, #fff));
    margin: -28px -32px 20px;
    padding: 30px 32px 24px;
    border-radius: 20px 20px 0 0;
    color: #fff;
}
.modal-region { font-size: 13px; font-weight: 700; opacity: 0.92; letter-spacing: 1px; }
.modal-addr { font-size: 24px; margin-top: 6px; font-weight: 800; line-height: 1.35; }
.modal-tags { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.modal-tags .content-tag { background: rgba(255,255,255,0.95); }
.modal-tags .type-tag { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.5); color: #fff; }
.modal-info { display: flex; flex-direction: column; gap: 10px; }
.info-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: var(--radius-sm);
}
.info-label { flex-shrink: 0; font-size: 13px; color: var(--ink-soft); font-weight: 600; width: 82px; }
.info-value { font-size: 15px; font-weight: 600; }
.energy-num { color: var(--primary); font-size: 22px; }
.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.modal-actions .btn-ghost.spot-fav.liked { color: var(--primary); border-color: var(--primary); }

/* 搜索高亮 */
mark {
    background: linear-gradient(transparent 55%, #ffe08a 55%);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .spot-addr { max-width: 100%; white-space: normal; }
    .spot-meta { width: 100%; justify-content: flex-start; }
    .tool-result { margin-left: 0; }
    .modal-spot-head { margin: -20px -20px 16px; padding: 24px 20px 18px; }
    .modal-addr { font-size: 19px; }
    .modal-box { margin: 0 12px; }
}

/* ====== 地图右侧 · 活动 Banner 页 ====== */
.map-side { display: flex; flex-direction: column; }

.banner-stage {
    position: relative;
    min-height: 410px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.banner-slide {
    position: absolute;
    inset: 0;
    padding: 30px 28px 28px;
    display: flex;
    flex-direction: column;
    color: #fff;
    opacity: 0;
    transform: translateX(24px) scale(0.98);
    transition: opacity .5s ease, transform .5s ease;
    pointer-events: none;
    overflow: hidden;
}
.banner-slide.active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
/* 背景光斑装饰 */
.banner-slide::before,
.banner-slide::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    pointer-events: none;
}
.banner-slide::before { width: 220px; height: 220px; right: -70px; top: -80px; }
.banner-slide::after { width: 150px; height: 150px; left: -60px; bottom: -60px; background: rgba(255,255,255,0.1); }

.banner-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 26px;
}
.banner-badge {
    background: rgba(255, 255, 255, 0.96);
    color: #b03030;
    font-size: 14px;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 999px;
    letter-spacing: 2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.banner-badge.info { color: #1a6b57; }
.banner-region {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    opacity: .95;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    padding: 5px 16px;
    backdrop-filter: blur(4px);
}

.banner-emoji {
    position: relative;
    font-size: 52px;
    line-height: 1;
    margin-bottom: 14px;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
}
.banner-headline {
    position: relative;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.22;
    letter-spacing: 1.5px;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.22);
}
.banner-subline {
    position: relative;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;
    opacity: .95;
    margin-top: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.banner-desc {
    position: relative;
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: .5px;
    opacity: .92;
    margin-top: 14px;
    max-width: 94%;
}

/* 倒计时 */
.banner-countdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: 18px;
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(4px);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
}
.banner-countdown b {
    font-size: 22px;
    font-weight: 900;
    color: #ffe08a;
    line-height: 1;
}
.banner-countdown.ended { background: rgba(0,0,0,0.35); }
.banner-countdown.ended b { color: #ffd0d0; }

.banner-cta {
    position: relative;
    margin-top: auto;
    align-self: flex-start;
    padding: 13px 28px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.97);
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}
.banner-cta:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 28px rgba(0,0,0,0.3); }

/* 轮播圆点 */
.banner-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 16px;
}
.banner-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--line);
    cursor: pointer;
    padding: 0;
    transition: all .25s ease;
}
.banner-dot.active {
    width: 24px;
    border-radius: 999px;
    background: var(--primary);
}

/* 精简图例 */
.legend-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 12px 14px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.legend-mini-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-soft);
    font-weight: 600;
}
.legend-mini-item i {
    width: 16px; height: 12px;
    border-radius: 3px;
    display: inline-block;
}
.legend-mini-item b { color: var(--primary); font-size: 13px; }

@media (max-width: 900px) {
    .banner-stage { min-height: 340px; }
    .banner-headline { font-size: 28px; }
    .banner-emoji { font-size: 44px; }
    .banner-subline { font-size: 15px; }
    .banner-desc { font-size: 14px; }
}

/* ====== 用户评价系统 ====== */
/* 详情弹窗内综合分展示 */
.modal-score {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 18px 24px 6px;
    padding: 16px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff8e8, #ffe9c8);
    box-shadow: inset 0 0 0 1px rgba(232, 168, 90, 0.25);
}
.modal-score.empty {
    background: linear-gradient(135deg, #f4f4f6, #e9e9ef);
    box-shadow: none;
}
.modal-score-num {
    font-size: 38px;
    font-weight: 900;
    background: linear-gradient(135deg, #ff9a3c, #c9302c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
}
.modal-score-num i { font-size: 16px; font-style: normal; color: var(--ink-soft); -webkit-text-fill-color: var(--ink-soft); }
.modal-score-meta { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.modal-score-dims { display: flex; gap: 12px; flex-wrap: wrap; }
.dim-mini {
    display: inline-flex; align-items: center; gap: 3px;
    background: rgba(255, 255, 255, 0.7);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
}
.dim-mini b { font-weight: 800; color: var(--primary); }

/* 打分弹窗 */
.rating-box { max-width: 480px; }
.rating-summary {
    margin: 18px 24px 6px;
    padding: 16px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff8e8, #ffe9c8);
    box-shadow: inset 0 0 0 1px rgba(232, 168, 90, 0.25);
    display: flex;
    align-items: center;
    gap: 18px;
}
.rating-summary.empty {
    background: linear-gradient(135deg, #f4f4f6, #e9e9ef);
    box-shadow: none;
    justify-content: center;
    color: var(--ink-soft);
    font-size: 14px;
    padding: 22px;
}
.rating-summary-main { text-align: center; min-width: 110px; }
.rating-summary-num {
    font-size: 32px; font-weight: 900;
    background: linear-gradient(135deg, #ff9a3c, #c9302c);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    line-height: 1;
}
.rating-summary-num i { font-size: 13px; font-style: normal; color: var(--ink-soft); -webkit-text-fill-color: var(--ink-soft); }
.rating-summary-meta { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.rating-summary-hint { flex: 1; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }

/* 打分表单 */
.rating-form { padding: 18px 24px 8px; }
.rating-form-title {
    font-size: 14px; font-weight: 800; color: var(--ink);
    margin-bottom: 12px;
}
.rating-row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.06);
}
.rating-row:last-child { border-bottom: none; }
.rating-row-label { flex: 0 0 76px; font-size: 14px; font-weight: 600; color: var(--ink); }
.rating-row-val {
    flex: 0 0 50px;
    text-align: right;
    font-size: 13px; font-weight: 800; color: var(--primary);
}
.rating-stars { display: inline-flex; gap: 4px; }
.rating-star {
    background: transparent; border: none; cursor: pointer;
    font-size: 24px; color: #d4c8b0;
    transition: transform .12s ease, color .12s ease;
    padding: 0; line-height: 1;
}
.rating-star:hover { transform: scale(1.15); }
.rating-star.active, .rating-star.hover { color: #ff9a3c; }
.rating-star.active { text-shadow: 0 0 8px rgba(255,154,60,0.5); }

.rate-btn {
    background: linear-gradient(135deg, #ff9a3c, #ff7a18) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.rate-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,122,24,0.4); }

@media (max-width: 600px) {
    .modal-score { flex-direction: column; align-items: flex-start; gap: 10px; }
    .modal-score-dims { gap: 6px; }
    .rating-summary { flex-direction: column; gap: 10px; }
}

/* 实时预览区 */
.rating-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fff8e8, #ffe9c8);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(232, 168, 90, 0.25);
    margin-bottom: 6px;
}
.rating-preview-text {
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    margin-right: 8px;
}
.rating-preview-sub {
    font-size: 12px;
    color: var(--ink-soft);
    margin-left: auto;
}

.rating-form-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 12px;
}
.rating-form-hint { font-size: 12px; font-weight: 600; color: var(--ink-soft); }

.score-chip .stars-row { letter-spacing: -1px; }
.score-chip .stars-row .dim-stars { color: #d4c8b0; }
.score-chip i { margin-left: 4px; }

@media (max-width: 600px) {
    .rating-preview { flex-direction: column; align-items: flex-start; }
    .rating-preview-sub { margin-left: 0; }
}

/* ===================================================== */
/* ====== 顶部滚动公告条 ====== */
.notice-bar {
    position: relative;
    z-index: 99;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 16px;
    background: linear-gradient(135deg, #2c1e3f 0%, #4a1e3f 60%, #c9302c 100%);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transition: height .3s ease, padding .3s ease, opacity .25s ease;
}
.notice-bar.collapsed {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    pointer-events: none;
}
.notice-icon {
    flex: 0 0 auto;
    font-size: 16px;
    filter: drop-shadow(0 0 4px rgba(255, 200, 0, 0.5));
}
.notice-track-wrap {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    /* 左右淡出蒙层 */
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.notice-track {
    display: inline-flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    animation: noticeScroll 35s linear infinite;
    will-change: transform;
}
.notice-bar:hover .notice-track { animation-play-state: paused; }
@keyframes noticeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.notice-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color .15s ease;
}
.notice-item:hover { color: #ffe08a; }
.notice-item.urgent .notice-text { color: #fff; }
.notice-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    border: 1px solid rgba(255, 255, 255, 0.32);
}
.notice-tag.urgent {
    background: linear-gradient(135deg, #ff9a3c, #ff7a18);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 122, 24, 0.5);
}
.notice-text { letter-spacing: .3px; }
.notice-sep {
    color: rgba(255, 255, 255, 0.45);
    margin: 0 4px;
    font-size: 7px;
}
.notice-end {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 8px;
    transition: color .15s ease;
}
.notice-end:hover { color: #fff; }

@media (max-width: 600px) {
    .notice-bar { height: 36px; padding: 0 10px; }
    .notice-item { padding: 0 12px; font-size: 12.5px; }
    .notice-tag { padding: 2px 8px; font-size: 10px; }
    .notice-icon { font-size: 14px; }
}

/* ===================================================== */
/* ====== 道友须知滚动栏（第二条）2026-09-22 ====== */
/* 顶部公告条上方留出导航栏高度，避免被 fixed 导航盖住（--nav-h 由 app.js syncNavbarOffset 实测写入） */
.notice-bar { margin-top: var(--nav-h, 76px); }
/* 锚点跳转同理：目标停在导航栏下方，不再被压住 */
html { scroll-padding-top: calc(var(--nav-h, 76px) + 12px); }

.guide-bar {
    position: relative;
    z-index: 99;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 16px;
    background: linear-gradient(90deg, #fffaf0 0%, #fff3dc 50%, #ffeecd 100%);
    border-bottom: 1px solid rgba(212, 175, 55, .38);
    color: #7a5c14;
    overflow: hidden;
    transition: height .3s ease, padding .3s ease, opacity .25s ease;
}
.guide-bar.collapsed {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    pointer-events: none;
}
.guide-label {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f3d9a4, #e6bf6d);
    border: 1px solid rgba(138, 109, 31, .35);
    box-shadow: 0 2px 6px rgba(212, 175, 55, .28);
}
.guide-icon { font-size: 14px; }
.guide-label-text {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #6b4f10;
    font-family: "STKaiti", "KaiTi", serif;
}
.guide-track-wrap {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.guide-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: noticeScroll 42s linear infinite;
    will-change: transform;
}
.guide-bar:hover .guide-track { animation-play-state: paused; }
.guide-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: #8a6d1f;
}
.guide-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(212, 175, 55, .18);
    border: 1px solid rgba(212, 175, 55, .45);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    color: #8a6d1f;
}
.guide-tag.urgent {
    background: linear-gradient(135deg, #ff9a3c, #ff7a18);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 122, 24, .45);
}
.guide-item.urgent .guide-text { color: #c0392b; font-weight: 700; }
.guide-text { letter-spacing: .3px; }
.guide-sep { color: rgba(138, 109, 31, .35); margin: 0 4px; font-size: 7px; }
.guide-end {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: rgba(122, 92, 20, .55);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    transition: color .15s ease;
}
.guide-end:hover { color: #8a6d1f; }

@media (max-width: 600px) {
    .guide-bar { height: 34px; padding: 0 8px; gap: 6px; }
    .guide-label { padding: 2px 8px; }
    .guide-label-text { font-size: 11px; letter-spacing: .5px; }
    .guide-icon { font-size: 12px; }
    .guide-item { padding: 0 10px; font-size: 12px; }
    .guide-tag { padding: 1px 7px; font-size: 10px; }
}

/* ===================================================== */
/* ====== 卡片内联 5 星打分 ====== */
.inline-rating {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    margin-left: 4px;
    padding: 3px 8px 3px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff8e8, #fff3da);
    box-shadow: inset 0 0 0 1px rgba(232, 168, 90, 0.22);
    position: relative;
    transition: box-shadow .15s ease;
}
.inline-rating:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 154, 60, 0.5), 0 2px 8px rgba(255, 154, 60, 0.15);
}
.inline-rating-hint {
    font-size: 10.5px;
    font-weight: 800;
    color: #c08550;
    letter-spacing: .3px;
    margin-right: 5px;
    line-height: 1;
    white-space: nowrap;
}
.inline-stars {
    display: inline-flex;
    gap: 0;
    line-height: 1;
}
.inline-star {
    appearance: none;
    background: transparent;
    border: none;
    padding: 1px;
    margin: 0;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #d4c8b0;
    transition: transform .12s ease, color .12s ease;
    border-radius: 4px;
    -webkit-tap-highlight-color: transparent;
}
.inline-star:hover {
    transform: scale(1.22);
}
.inline-star.is-on {
    color: #ff9a3c;
    text-shadow: 0 1px 3px rgba(255, 154, 60, 0.45);
    animation: inlineStarPop .35s ease;
}
.inline-star.is-preview {
    color: #ffb874;
    text-shadow: 0 1px 3px rgba(255, 154, 60, 0.35);
}
@keyframes inlineStarPop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* 已打分时整个 inline-rating 容器亮起来 */
.inline-rating.has-on {
    background: linear-gradient(135deg, #fff4e3, #ffe5c2);
    box-shadow: inset 0 0 0 1.5px #ff9a3c, 0 2px 8px rgba(255, 154, 60, 0.2);
}
.inline-rating.has-on .inline-rating-hint {
    color: #c9302c;
}

/* 弹窗里的大号 5 星 */
.big-stars {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 18px 0 14px;
}
.big-star {
    appearance: none;
    background: transparent;
    border: none;
    padding: 4px 6px;
    margin: 0;
    cursor: pointer;
    font-size: 42px;
    line-height: 1;
    color: #e2d8c0;
    transition: transform .12s ease, color .12s ease;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}
.big-star:hover {
    transform: scale(1.18);
    color: #ffc587;
}
.big-star.is-on {
    color: #ff9a3c;
    text-shadow: 0 2px 8px rgba(255, 154, 60, 0.5);
    animation: bigStarPop .4s ease;
}
@keyframes bigStarPop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* 卡片较窄时隐藏 hint 文字 */
@media (max-width: 900px) {
    .inline-rating-hint { display: none; }
    .inline-rating { padding: 3px 5px; }
    .inline-star { font-size: 17px; }
}
@media (max-width: 600px) {
    .inline-star { font-size: 16px; }
    .spot-meta { flex-wrap: wrap; gap: 4px 6px; }
    .inline-rating { margin-left: 0; }
    .big-star { font-size: 36px; padding: 2px 4px; }
}
/* ===================================================== */
/* ====== Toast 提示 ====== */
.toast {
    position: fixed;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%) translateY(20px);
    background: rgba(28, 28, 30, 0.92);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 11px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 9999;
    max-width: 80vw;
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================ */
/* 会员体系样式 · VIP Button / Modal / Badge */
/* ============================================ */

.btn-vip {
    appearance: none;
    background: linear-gradient(135deg, #8e44ad, #c9302c);
    color: white;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease;
    box-shadow: 0 4px 12px rgba(142, 68, 173, 0.25);
    white-space: nowrap;
}
.btn-vip:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(142, 68, 173, 0.4);
}
.btn-vip.is-member {
    background: linear-gradient(135deg, #ffb84d, #ff7a45);
    box-shadow: 0 4px 12px rgba(255, 122, 69, 0.3);
}

.vip-hidden-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #8e44ad, #c9302c);
    color: white;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}

/* 会员弹窗 */
.vip-box {
    max-width: 480px;
    width: 92vw;
    max-height: 92vh;
    overflow-y: auto;
    padding: 0;
}
.vip-pitch {
    padding: 24px 26px 20px;
}
.vip-pitch-head {
    text-align: center;
    margin-bottom: 20px;
}
.vip-pitch-emoji {
    font-size: 42px;
    margin-bottom: 4px;
}
.vip-pitch-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
}
.vip-pitch-price {
    font-size: 30px;
    font-weight: 900;
    color: #c9302c;
    line-height: 1;
}
.vip-pitch-price i {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
    font-style: normal;
    margin-left: 4px;
}
.vip-pitch-sub {
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 8px;
}

/* 档位切换样式（.vip-plan-tabs / .vip-plan-tab）随半年卡一起撤下。
   2026-10-04m：站内只卖月卡 ¥188，弹窗不再有档位可选。 */

/* ===== 会员档位对比卡（季卡 / 年卡）===== */
.vip-plans {
    display: flex;
    gap: 10px;
    margin: 4px 0 18px;
}
.vip-plan {
    position: relative;
    flex: 1;
    padding: 14px 10px 12px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: all .18s ease;
}
.vip-plan:hover { border-color: #f0b8b8; }
.vip-plan.active {
    border-color: var(--primary);
    background: #fff6f5;
    box-shadow: 0 3px 12px rgba(232, 90, 90, .14);
}
.vip-plan-badge {
    position: absolute;
    top: -9px; right: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
}
.vip-plan-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-soft);
}
.vip-plan.active .vip-plan-name { color: var(--primary); }
.vip-plan-price {
    font-size: 22px;
    font-weight: 900;
    color: var(--ink);
    line-height: 1.2;
    margin-top: 2px;
}
.vip-plan-price i {
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    color: var(--ink-soft);
    margin-left: 2px;
}
.vip-plan.active .vip-plan-price { color: #c9302c; }
.vip-plan-days {
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 2px;
}
.vip-benefits-head {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-soft);
    margin-bottom: 6px;
}
.vip-upgrade-tip {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: linear-gradient(135deg, #fff1ec, #ffe8e4);
    border: 1px dashed #f0b8b8;
    border-radius: 10px;
    font-size: 12.5px;
    color: #b8462f;
    line-height: 1.6;
}
.vip-upgrade-tip b { color: #c9302c; font-weight: 800; }

.vip-benefits {
    background: #faf7f2;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 18px;
}
.vip-benefit {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed #e8e2d8;
}
.vip-benefit:last-child { border-bottom: none; }
.vip-benefit-icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1.4;
}
.vip-benefit-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ink);
}
.vip-benefit-desc {
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 2px;
}

/* 回本账模块（VIP 弹窗 · 非会员） */
.vip-payback {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fdf6e3;
    border: 1px solid #f0dfae;
    border-left: 4px solid #e8b931;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
}
.vip-payback-icon { font-size: 20px; flex-shrink: 0; line-height: 1.4; }
.vip-payback-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #8a6d1f;
}
.vip-payback-desc {
    font-size: 12px;
    color: #9a7f42;
    margin-top: 3px;
    line-height: 1.6;
}
.vip-payback-desc b { color: #7a5f18; }

/* 顶部激活区（紧贴标题价格下方，金底高亮） */
.vip-top-activate {
    margin: 14px 0 4px;
    padding: 14px 14px 12px;
    background: #fdf6e3;
    border: 1.5px solid #f0d890;
    border-radius: 10px;
}
.vip-top-activate .vip-activate-row input {
    background: #fff;
}

/* ===== 开通申请（2026-10-04 新增） =====
   原来弹窗第一屏就是「输入卡密」，可新用户手里根本没有卡密 —— 顺序反了。
   现在第一动作改成「我要开通」，留联系方式；卡密输入框收进次级入口。 */
.vip-apply-cta {
    display: block;
    width: 100%;
    padding: 13px 14px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #c9302c, #a8231f);
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(168, 35, 31, .22);
}
.vip-apply-cta:active { transform: translateY(1px); }
/* 已点开：按钮让位给下面的卡密输入框，别再占着位置 */
.vip-apply-cta.opened { display: none; }
.vip-apply-sub {
    margin-top: 7px;
    font-size: 12px;
    color: #8a7250;
    text-align: center;
    line-height: 1.6;
}
.vip-apply-form {
}
/* 卡密输入区：点「我要开通」后展开（2026-10-04m 定型） */
.vip-code-area { margin-top: 10px; }

.vip-howto-open {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e6cf8f;
    font-size: 12.5px;
}
.vip-howto-open-title {
    font-weight: 700;
    color: #7a5f18;
    margin-bottom: 4px;
}
.vip-howto-open ol {
    margin: 0;
    padding-left: 20px;
    color: var(--ink-soft);
    line-height: 1.8;
}
.vip-howto-open ol li b { color: var(--ink); }

/* 联系管理员开卡区块（不放收款码，纯文字引导） */
.vip-paybox {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e6cf8f;
}
.vip-paybox-title {
    font-weight: 700;
    color: #7a5f18;
    font-size: 12.5px;
    margin-bottom: 8px;
}
.vip-paybox-steps {
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.85;
}
.vip-paybox-steps li b { color: var(--ink); }
.vip-paybox-steps .hl-price { color: var(--primary); font-size: 13.5px; }
.vip-paybox-wechat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink-soft);
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #efe2bd;
    border-radius: 8px;
}
.vip-paybox-wechat-label { flex: none; }
.vip-paybox-wechat b {
    color: var(--ink);
    font-family: 'SF Mono', Monaco, monospace;
    letter-spacing: 0.5px;
    flex: 1;
    word-break: break-all;
}
.js-pay-copy {
    flex: none;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    background: #fff5f5;
    border: 1px solid #f3c9c9;
    border-radius: 6px;
    cursor: pointer;
}
.js-pay-copy:active { background: #ffecec; }
.vip-paybox-promise {
    margin-top: 8px;
    font-size: 12px;
    color: #7a5f18;
    line-height: 1.6;
}

/* 锁定点位弹窗里的联系方式一行 */
.modal-pay-contact {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.7;
}
.modal-pay-contact b {
    color: var(--ink);
    font-family: 'SF Mono', Monaco, monospace;
    letter-spacing: 0.5px;
}
.modal-pay-contact .js-pay-copy { margin: 0 2px; }
.modal-pay-contact-time {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--primary);
}

/* 兼容保留：旧版底部激活区（已不再使用） */
.vip-activate {
    border-top: 1px solid var(--border);
    padding-top: 16px;
}
.vip-activate-label {
    font-size: 12px;
    color: var(--ink-soft);
    margin-bottom: 8px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.vip-activate-row {
    display: flex;
    gap: 8px;
}
.vip-activate-row input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: 'SF Mono', Monaco, monospace;
    letter-spacing: 1px;
    outline: none;
    transition: border-color .15s ease;
    text-align: center;
}
.vip-activate-row input:focus {
    border-color: var(--primary);
}
.vip-activate-row button {
    padding: 10px 18px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease;
}
.vip-activate-row button:hover { background: #c9302c; }
.vip-activate-row button:disabled { background: #ccc; cursor: not-allowed; }
.vip-activate-tip {
    font-size: 12.5px;
    margin-top: 8px;
    min-height: 18px;
    font-weight: 600;
}
.vip-activate-tip.warn { color: #d35400; }
.vip-activate-tip.error { color: var(--danger); }
.vip-activate-tip.success { color: var(--success); }

/* 旧版折叠说明（已被顶部 vip-howto-open 取代，保留样式防回退） */
.vip-howto {
    margin-top: 14px;
    padding: 12px 14px;
    background: #f6f3ee;
    border-radius: 8px;
    font-size: 12.5px;
}
.vip-howto summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--ink);
}
.vip-howto ol {
    margin: 10px 0 0;
    padding-left: 20px;
    color: var(--ink-soft);
    line-height: 1.8;
}
.vip-howto ol li b { color: var(--ink); }

/* 已激活状态 */
.vip-active-state {
    padding: 30px 26px 22px;
    text-align: center;
}
.vip-active-icon {
    font-size: 48px;
    margin-bottom: 8px;
}
.vip-active-title {
    margin: 0 0 18px;
    font-size: 20px;
    color: var(--ink);
    font-weight: 900;
}
.vip-active-info {
    background: linear-gradient(135deg, #fff4e3, #ffe5c2);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 18px;
    text-align: left;
    font-size: 13px;
    color: var(--ink);
    line-height: 2;
}
.vip-active-info b { color: #c9302c; font-weight: 800; }
.vip-active-benefits {
    text-align: left;
    margin-bottom: 16px;
}
.vip-action-btn {
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--ink-soft);
    font-size: 13px;
    cursor: pointer;
    font-weight: 600;
}
.vip-action-btn:hover {
    color: var(--danger);
    border-color: var(--danger);
}

@media (max-width: 600px) {
    .btn-vip { padding: 6px 12px; font-size: 12px; }
    .vip-hidden-badge { font-size: 10px; padding: 1px 8px; }
    .vip-pitch-price { font-size: 26px; }
}

/* ====== 足迹打卡（footprint.js）====== */
.btn-fp.done {
    background: rgba(212, 175, 55, .14);
    border-color: var(--gold);
    color: #8a6d1f;
}
#fpBtn.has-data {
    border-color: var(--gold);
    background: rgba(212, 175, 55, .12);
    color: #8a6d1f;
}

.spot-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--gold); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1; flex: 0 0 auto;
}
.spot-item.is-visited { background: rgba(212, 175, 55, .08); }
.spot-item.is-visited .spot-addr { color: #8a6d1f; }

.fp-box { width: min(620px, 92vw); }
.fp-head { padding: 28px 26px 20px; text-align: center; }
.fp-title { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 18px; }
.fp-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.fp-big-item {
    background: var(--bg-2); border-radius: var(--radius-sm);
    padding: 14px 8px; display: flex; flex-direction: column; gap: 4px;
}
.fp-big-item b { font-size: 24px; color: var(--primary); line-height: 1.1; }
.fp-big-item span { font-size: 12px; color: var(--ink-soft); }
.fp-bar { height: 10px; background: var(--bg-2); border-radius: 100px; overflow: hidden; }
.fp-bar i {
    display: block; height: 100%; border-radius: 100px;
    background: linear-gradient(90deg, var(--accent), var(--primary));
    transition: width .5s;
}
.fp-hint { font-size: 13px; color: var(--ink-soft); margin-top: 12px; line-height: 1.6; }

.fp-sec { padding: 0 26px 18px; }
.fp-sec-title {
    font-size: 13px; font-weight: 700; color: var(--ink);
    margin-bottom: 10px; padding-left: 9px; border-left: 3px solid var(--primary);
}
.fp-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; }
.fp-row-name {
    flex: 0 0 88px; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-row-bar { flex: 1; height: 7px; background: var(--bg-2); border-radius: 100px; overflow: hidden; }
.fp-row-bar i { display: block; height: 100%; background: var(--accent); border-radius: 100px; }
.fp-row-num { flex: 0 0 auto; color: var(--ink-soft); font-size: 12px; }

.fp-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.fp-item:last-child { border-bottom: none; }
.fp-item-dot { flex: 0 0 10px; margin-top: 5px; }
.fp-item-dot::before {
    content: ''; width: 9px; height: 9px; border-radius: 50%;
    background: var(--gold); display: block;
}
.fp-item-main { flex: 1; min-width: 0; }
.fp-item-title {
    font-size: 14px; color: var(--ink); font-weight: 600;
    display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.fp-item-title em { font-style: normal; font-size: 12px; color: var(--ink-soft); font-weight: 400; }
.fp-item-meta { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }

.fp-actions { display: flex; gap: 10px; padding: 16px 26px 24px; border-top: 1px solid var(--line); }
.fp-actions .btn-primary, .fp-actions .btn-ghost { flex: 1; text-align: center; }
.btn-danger { border-color: #d9534f; color: #d9534f; }
.btn-danger.armed { background: #d9534f; color: #fff; }

@media (max-width: 600px) {
    .fp-head, .fp-sec, .fp-actions { padding-left: 18px; padding-right: 18px; }
    .fp-big-item b { font-size: 20px; }
    .fp-row-name { flex-basis: 70px; }
}

/* ============ 2026-09-20 · 会员打码（点位隐藏 60%）============ */
.spot-item.is-locked {
    background: repeating-linear-gradient(135deg, #fffdf6, #fffdf6 10px, #fff8e8 10px, #fff8e8 20px);
    border-color: rgba(212, 175, 55, .38);
    border-left: 3px solid var(--gold, #d4af37);
}
.spot-item.is-locked:hover {
    background: #fff5e0;
    border-color: var(--gold, #d4af37);
}
.spot-addr.is-masked {
    color: #a08b5b;
    font-weight: 500;
    letter-spacing: .3px;
}
.unlock-mini {
    font-size: 11px;
    font-weight: 700;
    color: #8a6d1f;
    background: linear-gradient(135deg, #ffe9c8, #ffd98a);
    padding: 3px 10px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .35);
}
.modal-dehydrated {
    margin: 16px 24px 0;
    padding: 16px 18px;
    border-radius: 14px;
    background: #fffdf6;
    box-shadow: inset 0 0 0 1px rgba(232, 168, 90, .22);
}
.modal-dehy-title {
    font-size: 13px;
    font-weight: 700;
    color: #a08b5b;
    letter-spacing: .3px;
    margin-bottom: 8px;
}
.modal-dehy-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
    line-height: 2.1;
    border-bottom: 1px dashed rgba(160, 139, 91, .25);
}
.modal-dehy-row:last-of-type { border-bottom: none; }
.modal-dehy-row > span { color: var(--ink-soft); font-size: 12.5px; }
.modal-dehy-row > b { color: var(--ink); font-weight: 700; }
.modal-dehy-note {
    margin-top: 9px;
    font-size: 11.5px;
    line-height: 1.7;
    color: #a08b5b;
}

.modal-locked {
    margin: 18px 24px 6px;
    padding: 22px 20px;
    border-radius: 14px;
    text-align: center;
    background: linear-gradient(135deg, #fff8e8, #ffe9c8);
    box-shadow: inset 0 0 0 1px rgba(232, 168, 90, .25);
}
.modal-locked-icon { font-size: 30px; line-height: 1; }
.modal-locked-title {
    font-size: 16px; font-weight: 800; color: #8a6d1f; margin: 10px 0 8px;
}
.modal-locked-desc {
    font-size: 13px; color: #7a6a4f; line-height: 1.75; margin-bottom: 16px;
}
.modal-locked-desc b { color: #8a6d1f; }
.modal-locked .btn-primary { display: inline-block; padding: 10px 28px; }

/* 回本账一行（锁定点位弹窗） */
.modal-payback {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .65);
    border: 1px dashed #e8c877;
    border-radius: 10px;
    font-size: 12px;
    color: #7a6a4f;
    text-align: left;
    line-height: 1.7;
}
.modal-payback-icon { flex-shrink: 0; line-height: 1.6; }
.modal-payback b { color: #8a6d1f; }

/* ============ 2026-09-22 · 探路中心（会员专属）============ */
.btn-scout {
    padding: 8px 12px;
    background: transparent;
    border: 1px solid rgba(212, 175, 55, .45);
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    transition: all .2s;
}
.btn-scout:hover { background: rgba(212, 175, 55, .12); }
.scout-box {
    max-width: 480px;
    width: 92vw;
    max-height: 92vh;
    overflow-y: auto;
    padding: 0;
}
.scout-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }

/* 非会员 · 社区打码预览 */
.sc-pv { padding: 20px; }
.sc-pv-head { text-align: center; margin-bottom: 16px; }
.sc-pv-emoji { font-size: 34px; line-height: 1; }
.sc-pv-title {
    font-size: 18px; font-weight: 800; color: var(--ink);
    font-family: "STKaiti", "KaiTi", serif; margin-top: 8px;
}
.sc-pv-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; }
.sc-pv-sec {
    font-size: 13px; font-weight: 800; color: #8a6d1f;
    margin: 16px 0 8px; display: flex; align-items: center; gap: 6px;
}
.sc-pv-cards { display: flex; flex-direction: column; gap: 8px; }
.sc-pv-card {
    background: linear-gradient(135deg, #fff8e8, #ffefcf);
    border: 1px solid rgba(232, 168, 90, .3);
    border-radius: 12px; padding: 11px 14px;
}
.sc-pv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-pv-area { font-size: 13px; font-weight: 700; color: var(--ink); }
.sc-pv-ok { font-size: 11px; font-weight: 700; color: #0f6e56; background: #e1f5ee; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }
.sc-pv-meta { font-size: 12px; color: var(--ink-soft); margin-top: 5px; }
.sc-pv-addr { font-size: 12px; color: #a08a5c; margin-top: 4px; letter-spacing: .3px; }
.sc-pv-list { display: flex; flex-direction: column; gap: 8px; }
.sc-pv-list > div {
    display: flex; gap: 8px; font-size: 12.5px; color: var(--ink-soft);
    line-height: 1.7; align-items: flex-start;
}
.sc-pv-list span { flex-shrink: 0; }
.sc-pv-list b { color: #8a6d1f; }
.sc-pv-cta {
    display: block; width: 100%; margin-top: 18px;
    padding: 12px 0; font-size: 14px; font-weight: 800;
}
.sc-pv-tip {
    margin-top: 10px; text-align: center; font-size: 11.5px;
    color: #9a7f42; line-height: 1.6;
}

.scout-title {
    font-size: 18px; font-weight: 800; color: var(--ink);
    font-family: "STKaiti", "KaiTi", serif;
    display: flex; align-items: center; gap: 8px;
}
.scout-badge {
    font-size: 11px; font-weight: 700; color: #8a6d1f;
    background: linear-gradient(135deg, #ffe9c8, #ffd98a);
    padding: 2px 9px; border-radius: 999px;
}
.scout-sub { font-size: 12px; color: var(--ink-soft); margin-top: 6px; line-height: 1.6; }
.scout-tabs { display: flex; border-bottom: 1px solid var(--line); }
.scout-tab {
    flex: 1; padding: 11px 0; font-size: 13px; font-weight: 600;
    color: var(--ink-soft); background: none; border: none;
    cursor: pointer; position: relative;
}
.scout-tab.active { color: var(--primary); font-weight: 800; }
.scout-tab.active::after {
    content: ''; position: absolute; left: 25%; right: 25%; bottom: 0;
    height: 2.5px; border-radius: 2px; background: var(--primary);
}
.scout-tab-body { padding: 14px 16px 20px; min-height: 200px; }
.scout-empty {
    text-align: center; padding: 40px 12px; color: var(--ink-soft);
    font-size: 13px; line-height: 2;
}
.scout-retry {
    margin-top: 8px; padding: 6px 22px; font-size: 13px;
    border: 1px solid var(--primary); color: var(--primary);
    background: none; border-radius: 8px; cursor: pointer;
}
.scout-card {
    background: var(--white, #fff); border: 1px solid var(--line);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
}
.scout-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.scout-loc { font-size: 14px; font-weight: 800; color: var(--ink); }
.scout-meta { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.scout-note { font-size: 13px; color: var(--ink); line-height: 1.7; margin: 6px 0; }
.scout-card-bottom {
    display: flex; justify-content: space-between; font-size: 11px;
    color: var(--ink-soft); border-top: 1px dashed var(--line); padding-top: 7px;
}
.scout-form label {
    display: block; font-size: 12px; color: var(--ink-soft);
    margin: 10px 2px 4px; font-weight: 600;
}
.scout-form select, .scout-form input, .scout-form textarea {
    width: 100%; box-sizing: border-box; padding: 9px 11px;
    border: 1px solid var(--line); border-radius: 9px;
    font-size: 13px; background: #fff; color: var(--ink);
}
.scout-form textarea { min-height: 60px; resize: vertical; }
.sc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-submit-btn {
    width: 100%; margin-top: 16px; padding: 11px;
    background: var(--primary); color: #fff; font-size: 14px; font-weight: 800;
    border: none; border-radius: 10px; cursor: pointer;
}
.sc-submit-btn:disabled { opacity: .6; }
.sc-form-tip {
    font-size: 11px; color: var(--ink-soft); line-height: 1.8;
    margin-top: 10px; background: var(--bg, #fdf9f0);
    padding: 8px 10px; border-radius: 8px;
}
.sc-progress { background: var(--bg, #fdf9f0); border-radius: 12px; padding: 12px 14px; }
.sc-progress-head {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px;
    font-size: 12px; color: var(--ink-soft); margin-bottom: 8px;
}
.sc-progress-head b { color: var(--primary); }
.sc-bar {
    height: 9px; border-radius: 999px; background: rgba(0,0,0,.07);
    overflow: hidden; margin: 4px 0 10px;
}
.sc-bar i {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--accent, #e8a85a));
    transition: width .4s;
}
.sc-miles { display: flex; gap: 6px; }
.sc-mile {
    flex: 1; text-align: center; font-size: 11px;
    border: 1px solid var(--line); border-radius: 9px; padding: 6px 2px;
    color: var(--ink-soft); background: #fff;
}
.sc-mile.on { border-color: var(--primary); color: var(--primary); font-weight: 700; }
.sc-mile-n { display: block; font-size: 12px; font-weight: 800; }
.sc-mile-r { display: block; margin-top: 2px; }
.sc-mile-ok { display: block; margin-top: 2px; color: #16a085; font-weight: 700; }
.sc-my-list { margin-top: 12px; }
.sc-my-row {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 9px 2px; border-bottom: 1px dashed var(--line); font-size: 12.5px;
}
.sc-my-loc { color: var(--ink); line-height: 1.5; }
.sc-pill {
    font-size: 10.5px; font-weight: 700; padding: 2px 8px;
    border-radius: 999px; white-space: nowrap;
}
.sc-pill.ok { background: #e6f7ef; color: #16a085; }
.sc-pill.wait { background: #fff4dd; color: #b8860b; }
.sc-pill.no { background: #fdecea; color: #c0392b; }

/* ===================================================== */
/* ====== 手机端导航适配 2026-09-22 ====== */
/* 问题：搜索框 flex:1 会吃掉剩余宽度，把「开通会员」按钮压扁到看不见。
   做法：整条导航不换行 + logo 收缩 + 搜索框/按钮等比缩小，保证会员按钮永远露出来。 */
@media (max-width: 768px) {
    .nav-container {
        flex-wrap: nowrap;
        gap: 10px;
        padding: 10px 14px;
    }
    .logo { flex: 0 1 auto; min-width: 0; gap: 5px; }
    .logo-icon { font-size: 20px; }
    .logo-text { font-size: 16px; letter-spacing: 0; white-space: nowrap; }
    .logo-en { display: none; }

    .nav-actions { flex: 1 1 auto; min-width: 0; gap: 6px; }
    .nav-actions input {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        padding: 7px 12px;
        font-size: 13px;
    }
    .nav-actions #searchBtn {
        flex: 0 0 auto;
        padding: 7px 13px;
        font-size: 12.5px;
    }
    .nav-actions .btn-vip {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 7px 12px;
        font-size: 12px;
    }
}

/* 小屏（iPhone SE / 安卓小屏）再缩一档 */
@media (max-width: 400px) {
    .nav-container { gap: 6px; padding: 9px 10px; }
    .logo-icon { font-size: 18px; }
    .logo-text { font-size: 14px; }
    .nav-actions { gap: 5px; }
    .nav-actions input { padding: 6px 10px; font-size: 12px; }
    .nav-actions #searchBtn { padding: 6px 10px; font-size: 12px; }
    .nav-actions .btn-vip { padding: 6px 10px; font-size: 11.5px; }
}

/* ===================================================== */
/* ====== 看看附近 · 结果面板 2026-09-25 ====== */
.nearby-panel {
    margin: 28px auto 0;
    max-width: 860px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 20px 22px 18px;
    text-align: left;
    animation: nearbyIn .22s ease-out;
}
@keyframes nearbyIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}
.nearby-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 12px;
}
.nearby-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.nearby-close {
    font-size: 12.5px; color: var(--ink-soft);
    border: 1px solid var(--line); border-radius: 999px;
    padding: 4px 12px; background: var(--bg-2);
}
.nearby-close:hover { color: var(--primary); border-color: var(--primary); }

.nearby-tip { font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; }
.nearby-tip.is-member { color: #0f6e56; font-weight: 600; }

.nearby-list { display: flex; flex-direction: column; gap: 10px; }

.nearby-card {
    display: flex; align-items: center; gap: 14px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 12px 14px; background: var(--bg-2);
    cursor: pointer; transition: border-color .15s, transform .15s, background .15s;
}
.nearby-card:hover { border-color: var(--primary); background: #fff; transform: translateY(-1px); }
.nearby-card.is-locked { background: #fff; border-style: dashed; }

.nearby-dist {
    flex: 0 0 auto; min-width: 78px; text-align: center;
    font-size: 15px; font-weight: 800; color: var(--primary);
}
.nearby-main { flex: 1 1 auto; min-width: 0; }
.nearby-place { font-size: 14px; font-weight: 700; color: var(--ink); }
.nearby-addr { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; word-break: break-all; }
.nearby-locked { font-size: 12.5px; color: var(--accent); margin-top: 2px; font-weight: 600; }
.nearby-tags { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.nearby-stars { font-size: 12px; color: var(--accent); letter-spacing: 1px; }
.nearby-go {
    flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--primary); white-space: nowrap;
}
.nearby-card.is-locked .nearby-go { color: var(--accent); }

.nearby-region-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nearby-chip {
    font-size: 13px; padding: 6px 14px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--white); color: var(--ink);
}
.nearby-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--bg-2); }

.nearby-actions { margin-top: 14px; text-align: center; }
.nearby-retry {
    font-size: 13px; color: var(--ink-soft);
    border: 1px dashed var(--line); border-radius: 999px; padding: 6px 18px; background: none;
}
.nearby-retry:hover { color: var(--primary); border-color: var(--primary); }

@media (max-width: 600px) {
    .nearby-panel { padding: 16px 14px; margin-top: 20px; }
    .nearby-title { font-size: 15px; }
    .nearby-card { gap: 10px; padding: 10px 12px; }
    .nearby-dist { min-width: 62px; font-size: 14px; }
    .nearby-go { font-size: 12px; }
}


/* ===================================================== */
/* ====== 会员成长阶梯 2026-09-25 ====== */
/* 四档：道友 → 月卡会员 → 玩伴 → 挚友
   档位定义在 membership.js 的 MB_LEVELS，这里只管外观 */

/* --- banner 第 4 张卡（4 列网格）--- */
.hl-grid { grid-template-columns: repeat(4, 1fr); }
.hl-level { background: linear-gradient(150deg, #134e4a 0%, #0f766e 55%, #14b8a6 100%); }
.hl-level:hover { box-shadow: 0 14px 30px rgba(15, 118, 110, .35); }

.hl-chain {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 12px 0 14px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
}
.hl-dot { font-size: 17px; line-height: 1; opacity: .55; filter: grayscale(.5); }
.hl-dot.is-target {
    opacity: 1;
    filter: none;
    font-size: 22px;
    text-shadow: 0 0 12px rgba(255, 255, 255, .6);
}
.hl-arrow { font-size: 14px; opacity: .4; }

@media (max-width: 1200px) { .hl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .hl-grid { grid-template-columns: 1fr; } }

/* --- 独立「会员成长阶梯」板块 --- */
.levels-section { background: linear-gradient(180deg, var(--bg), var(--white)); padding: 70px 0; }
.lv-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.lv-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
    transition: all .22s;
}
.lv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.lv-card.is-reached { border-color: rgba(212, 175, 55, .5); background: #fffdf7; }
.lv-card.is-current {
    border-color: #c9302c;
    box-shadow: 0 8px 24px -8px rgba(201, 48, 44, .28);
}
.lv-flag {
    position: absolute;
    top: -10px;
    right: 14px;
    background: #c9302c;
    color: #fff;
    font-size: 11.5px;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: .5px;
}
.lv-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lv-emoji { font-size: 30px; line-height: 1; }
.lv-head-text { min-width: 0; }
.lv-name { font-size: 17px; font-weight: 600; color: var(--ink); }
.lv-tag { font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; }
.lv-summary {
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--line);
}
.lv-perks { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.lv-perks li {
    font-size: 13px;
    color: var(--ink);
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
}
.lv-perks li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #1d9e75;
    font-size: 12px;
}
.lv-up-btn {
    margin-top: auto;
    padding-top: 14px;
    background: none;
    border: none;
    color: #c9302c;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.lv-up-btn:hover { text-decoration: underline; }

/* --- 当前等级进度条 --- */
.lv-progress {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 24px;
}
.lv-now { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.lv-now-badge {
    flex: 0 0 auto;
    background: linear-gradient(135deg, #c9302c, #e8743b);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 999px;
    white-space: nowrap;
}
.lv-now-text { min-width: 0; }
.lv-now-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.lv-now-sub { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.lv-bar {
    height: 10px;
    background: var(--bg-2);
    border-radius: 999px;
    overflow: hidden;
}
.lv-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #d4af37, #e8a85a);
    transition: width .4s ease;
}
.lv-bar-fill.is-max { background: linear-gradient(90deg, #534ab7, #7f77dd); }
.lv-legend {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 7px;
}

@media (max-width: 1000px) { .lv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
    .lv-grid { grid-template-columns: 1fr; }
    .lv-now { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* --- 会员弹窗内的成长进度条 --- */
.mb-grow {
    background: var(--bg-2);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.mb-grow-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.mb-grow-badge {
    background: linear-gradient(135deg, #c9302c, #e8743b);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
}
.mb-grow-tip { font-size: 13px; color: var(--ink-soft); }
.mb-grow-bar {
    height: 8px;
    background: rgba(201, 48, 44, .12);
    border-radius: 999px;
    overflow: hidden;
}
.mb-grow-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #d4af37, #e8a85a);
}
.mb-grow-fill.is-max { background: linear-gradient(90deg, #534ab7, #7f77dd); }
.mb-grow-chain {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}
.mb-dot { font-size: 15px; opacity: .35; filter: grayscale(1); transition: all .2s; }
.mb-dot.on { opacity: 1; filter: none; transform: scale(1.25); }
.mb-sep { font-size: 12px; opacity: .3; }

/* --- 顶部会员按钮：玩伴及以上用专属色 --- */
.btn-vip.is-member.is-partner {
    background: linear-gradient(135deg, #c9302c, #e8743b);
    border-color: transparent;
}

/* ===================================================== */
/* ====== 手机端底部导航栏（App 式）2026-09-29 新增 ====== */
/* 背景：手机用户占多数，页面很长、要一直往下翻 → 底部固定 5 个入口，一点直达。
   桌面端不显示（.tabbar 默认 display:none），只在 ≤768px 打开；
   同时给 body 留出底部空间（页脚不被盖住）并把返回顶部按钮上移。 */
:root { --tabbar-h: 58px; }

.tabbar { display: none; }

@media (max-width: 768px) {
    body {
        padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    }

    .tabbar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 900;                /* 高于 navbar(100) 与 back-top(50)，低于弹窗(1000) */
        height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        background: rgba(255, 248, 240, 0.96);
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        border-top: 1px solid rgba(232, 217, 196, 0.9);
        box-shadow: 0 -8px 28px -14px rgba(45, 24, 16, 0.35);
    }
    .tabbar-item {
        position: relative;
        flex: 1 1 0; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px;
        height: var(--tabbar-h);
        color: var(--ink-soft);
        font-size: 11px; line-height: 1.1;
        transition: color .15s;
        -webkit-tap-highlight-color: transparent;
    }
    .tabbar-icon { font-size: 19px; line-height: 1; filter: grayscale(75%); opacity: .78; transition: all .15s; }
    .tabbar-label { font-weight: 600; white-space: nowrap; }
    .tabbar-item.on { color: var(--primary); }
    .tabbar-item.on .tabbar-icon { filter: none; opacity: 1; transform: translateY(-1px) scale(1.12); }
    .tabbar-item.on::after {
        content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
        width: 26px; height: 3px; border-radius: 0 0 4px 4px;
        background: var(--primary);
    }
    .tabbar-item:active .tabbar-icon { transform: scale(.9); }

    /* 返回顶部按钮上移，别压到导航栏 */
    .back-top {
        bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 14px);
        right: 14px;
        width: 42px; height: 42px; font-size: 19px;
    }
}

/* ===================================================== */
/* ====== 手机端 App 式视图切换（2026-09-29 改版） ====== */
/* 底部导航不再只是"滚到某处"，而是像 App 一样整屏切换：
   body[data-mview] = home | feed | districts | mine，规则只在 ≤768px 生效。
   「会员」不再单独占一个入口 —— 会员成长阶梯跟在「我的」页下面（DOM 里 #levels 就在 #mine 之后）。
   桌面端 JS 压根不写这个属性 → 桌面排版一字不变。 */
#mine { display: none; }   /* 「我的」是手机端专属页，桌面走顶栏与首屏按钮 */

@media (max-width: 768px) {
    /* 手机端首页精简（2026-09-29）：只留「顶部公告/须知 + 首屏 + 开会员的优势」，
       本期精选(#banners) / 分区点位(#districts) / 动态社区(#feed) / 数据概览 全部隐掉，
       它们在底部导航各有专属视图。 */
    body[data-mview="home"] #banners,
    body[data-mview="home"] #districts,
    body[data-mview="home"] #feed,
    body[data-mview="home"] #mine,
    body[data-mview="home"] #levels,
    body[data-mview="home"] .cuisine-section,
    body[data-mview="feed"] #hero,
    body[data-mview="feed"] #banners,
    body[data-mview="feed"] #districts,
    body[data-mview="feed"] #mine,
    body[data-mview="feed"] #levels,
    body[data-mview="feed"] .cuisine-section,
    body[data-mview="districts"] #hero,
    body[data-mview="districts"] #banners,
    body[data-mview="districts"] #feed,
    body[data-mview="districts"] #mine,
    body[data-mview="districts"] #levels,
    body[data-mview="districts"] .cuisine-section,
    body[data-mview="mine"] #hero,
    body[data-mview="mine"] #banners,
    body[data-mview="mine"] #feed,
    body[data-mview="mine"] #districts,
    body[data-mview="mine"] .cuisine-section { display: none !important; }

    /* 成为会员专区（2026-10-09）：手机端只在首页视图出现，
       feed / districts / mine 视图各自有自己的内容，别让它漏进去 */
    body[data-mview="feed"] #membership,
    body[data-mview="districts"] #membership,
    body[data-mview="mine"] #membership { display: none !important; }
    body[data-mview="home"] #membership { display: block !important; }

    body[data-mview="mine"] #mine,
    body[data-mview="mine"] #levels { display: block !important; }

    /* 动态社区：整屏就是动态流，section 自带的内边距在手机端收一点 */
    body[data-mview="feed"] #feed { display: block !important; }
    body[data-mview="feed"] .feed-section { padding-top: 12px; }

    /* 「我的」页里的会员成长阶梯：压掉它自己的大间距，看起来像我页面的一段 */
    body[data-mview="mine"] .levels-section { padding-top: 10px; padding-bottom: 24px; }
    body[data-mview="mine"] .levels-section .section-head { margin-bottom: 18px; }

    /* 「会员权益」在手机端只在首页出现（其余视图各有各的内容）。
       ⚠️ 桌面端默认就是显示（2026-10-04 改的），所以这里必须把手机端其它视图显式隐藏 */
    body[data-mview="home"] .vip-perks { display: block; }
    body[data-mview="feed"] #vipPerks,
    body[data-mview="districts"] #vipPerks,
    body[data-mview="mine"] #vipPerks { display: none !important; }

    /* 会员权益卡：手机上两栏对比挤，缩字号但保留对比（对比本身最大程度说服人） */
    .vp-compare { gap: 8px; }
    .vp-col { padding: 11px 10px 9px; }
    .vp-col-head { font-size: 11.5px; }
    .vp-col li { font-size: 12px; padding-left: 18px; }
    .vp-cta-row { flex-direction: column; }

    /* 手机端隐藏"只给桌面看"的元素（首屏里指向已隐藏板块的按钮等） */
    .only-desktop { display: none !important; }
}

/* ===================================================== */
/* ====== 首页 · 开会员的优势（2026-09-29 新增） ====== */
/* 手机端首页首屏正下方的转化模块；桌面端不出现（桌面走「本期精选」里的会员卡）。 */
/* 桌面端也显示（2026-10-04）：原来只在手机端 home 视图出现，桌面访客从头滚到尾
   看不到任何会员卖点 —— 这是转化最大的漏点。手机端其余视图的隐藏规则在下方 @media 里。 */
.vip-perks { display: block; padding: 0 0 46px; }

.vp-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, #fff4e8 0%, #fffdfb 52%, #fff0e4 100%);
    border: 1px solid #f2dcc8;
    border-radius: 22px;
    padding: 24px 20px 20px;
    box-shadow: 0 22px 48px -34px rgba(45, 24, 16, .62);
}
.vp-card::after {
    content: '';
    position: absolute; right: -48px; top: -62px;
    width: 172px; height: 172px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 48, 44, .13), rgba(201, 48, 44, 0) 70%);
    pointer-events: none;
}

.vp-kicker {
    display: inline-block;
    font-size: 10.5px; font-weight: 800; letter-spacing: 2px;
    color: var(--primary); opacity: .8;
}
.vp-title {
    font-size: 21px; font-weight: 800; color: var(--ink);
    margin: 7px 0 8px; line-height: 1.35; position: relative;
}
.vp-desc { font-size: 13px; line-height: 1.8; color: var(--ink-soft); position: relative; }
.vp-desc strong { color: var(--primary); }
/* 探路者价值那一句的行内强调：呼应首屏 hs-why，别让读者把它当成普通说明扫过去 */
.vp-desc .vp-em {
    color: #a97c16; font-weight: 700;
    border-bottom: 1.5px dashed rgba(212, 175, 55, .7);
    padding-bottom: 1px;
}

/* ====== 免费 vs 会员 两栏对比（2026-10-04）====== */
.vp-compare {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin: 18px 0 0; position: relative;
}
.vp-col {
    border-radius: 14px; padding: 13px 13px 11px;
    border: 1px solid #f0dcc8; background: #fffdfb;
}
.vp-col.is-vip {
    border-color: rgba(201, 48, 44, .32);
    background: linear-gradient(160deg, #fff8f1, #fff);
    box-shadow: 0 14px 30px -24px rgba(201, 48, 44, .7);
}
.vp-col-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 800; color: var(--ink);
    padding-bottom: 9px; margin-bottom: 4px; border-bottom: 1px dashed #eddac7;
}
.vp-col.is-free .vp-col-head { color: var(--ink-soft); }
.vp-col-emoji { font-size: 15px; }
.vp-col ul { list-style: none; margin: 8px 0 0; padding: 0; }
.vp-col li {
    font-size: 12.5px; line-height: 1.55; padding: 4px 0 4px 20px;
    position: relative; color: var(--ink-soft);
}
.vp-col li::before {
    position: absolute; left: 0; top: 4px; font-size: 11px; font-weight: 900;
}
.vp-col li.no::before { content: '✕'; color: #c8b6a4; }
.vp-col li.yes::before { content: '✓'; color: #1f9d55; }
.vp-col.is-vip li.yes { color: var(--ink); font-weight: 600; }
.vp-col.is-vip li em { font-style: normal; color: var(--primary); font-weight: 800; }

/* ====== 进阶提示：玩伴 / 挚友 两档（2026-10-04）====== */
.vp-more { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; position: relative; }
.vp-more-title {
    font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
    color: var(--ink-soft); opacity: .8; text-align: center;
}
.vp-more-row {
    display: flex; align-items: flex-start; gap: 10px;
    border-radius: 13px; padding: 11px 12px;
    background: #fffaf4; border: 1px solid #f2e3d3;
}
.vp-more-row.is-bosom {
    background: linear-gradient(135deg, #fff6e2, #fffdf8);
    border-color: rgba(212, 175, 55, .55);
    box-shadow: 0 12px 26px -22px rgba(160, 120, 20, .8);
}
.vp-more-emoji { font-size: 19px; line-height: 1.2; flex: 0 0 auto; }
.vp-more-txt { min-width: 0; }
.vp-more-txt b { display: block; font-size: 13px; font-weight: 800; color: var(--ink); }
.vp-more-txt b em { font-style: normal; color: var(--primary); }
.vp-more-txt span { display: block; font-size: 12px; line-height: 1.65; color: var(--ink-soft); margin-top: 2px; }

.vp-list {
    list-style: none; margin: 18px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 13px; position: relative;
}
.vp-list li { display: flex; align-items: flex-start; gap: 11px; }
.vp-ico {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; background: var(--white); border: 1px solid #f4e2d1;
    box-shadow: 0 6px 14px -10px rgba(45, 24, 16, .5);
}
.vp-txt { min-width: 0; display: block; }
.vp-txt b { display: block; font-size: 14px; font-weight: 800; color: var(--ink); }
.vp-txt b em { font-style: normal; color: var(--primary); }
.vp-txt > span { display: block; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); margin-top: 2px; }

.vp-foot {
    margin-top: 20px; padding-top: 17px; border-top: 1px dashed #eddac7;
    display: flex; flex-direction: column; gap: 12px; position: relative;
}
.vp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.vp-price-num { font-size: 30px; font-weight: 900; color: var(--primary); line-height: 1; letter-spacing: -1px; }
.vp-price-unit { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.vp-price-note { flex: 1 1 100%; font-size: 11.5px; line-height: 1.7; color: var(--ink-soft); margin-top: 5px; }

.vp-cta {
    width: 100%; padding: 15px 18px; border: 0; border-radius: 999px;
    background: linear-gradient(135deg, #c9302c, #e2612f);
    color: #fff; font-size: 15.5px; font-weight: 800; font-family: inherit;
    cursor: pointer; letter-spacing: .5px;
    box-shadow: 0 14px 30px -16px rgba(201, 48, 44, .85);
}
.vp-cta:active { transform: translateY(1px); }
.vp-cta.is-member { background: linear-gradient(135deg, #3a2318, #6b5344); box-shadow: none; }

/* CTA 行：2026-10-04m 起只剩月卡一个按钮（半年卡次要入口已撤）。
   .vp-cta-row 保留 flex，单按钮时自动撑满一行。 */
.vp-cta-row { display: flex; gap: 10px; }
.vp-cta-row .vp-cta { flex: 1 1 0; width: auto; }
.vp-cta.is-gold {
    background: linear-gradient(135deg, #a97c16, #dcae45);
    box-shadow: 0 14px 30px -16px rgba(169, 124, 22, .95);
}

/* ====== 「我的」页 · 会员状态卡 ====== */
.mine-section { padding: 26px 0 10px; }
.mine-card {
    background: linear-gradient(135deg, #fff6ec, #fffdfa);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: 0 6px 20px -14px rgba(45, 24, 16, .45);
}
.mc-top { display: flex; align-items: center; gap: 12px; }
.mc-emoji { font-size: 34px; line-height: 1; }
.mc-info { min-width: 0; }
.mc-name { font-size: 17px; font-weight: 800; color: var(--ink); }
.mc-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.5; }
.mc-bar {
    height: 6px; border-radius: 999px; background: var(--bg-2);
    margin: 12px 0 6px; overflow: hidden;
}
.mc-bar-in { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), #e8743b); }
.mc-next { font-size: 12px; color: var(--ink-soft); }
.mc-btn {
    margin-top: 12px; width: 100%;
    background: linear-gradient(135deg, var(--primary), #e8743b);
    color: #fff; font-weight: 700; font-size: 14px;
    border: none; border-radius: var(--radius-sm); padding: 12px 14px;
    transition: transform .12s;
}
.mc-btn:active { transform: scale(.98); }
/* 次级按钮：生成专属登录链接（不抢主 CTA 的注意力） */
.mc-btn.ghost {
    background: #fff; color: var(--primary);
    border: 1px solid var(--border); font-weight: 600; font-size: 13px;
    padding: 10px 14px; margin-top: 8px;
}

/* ====== 专属登录链接（2026-09-29） ====== */
.mc-link { margin-top: 10px; }
.mc-link-tip { font-size: 12px; color: var(--ink-soft); line-height: 1.6; }
.mc-link-row { display: flex; gap: 8px; margin-top: 8px; }
.mc-link-row input {
    flex: 1; min-width: 0; font-size: 12px; color: var(--ink);
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 9px 10px;
}
.mc-link-copy {
    flex: none; padding: 0 14px; border: none; border-radius: var(--radius-sm);
    background: var(--primary); color: #fff; font-size: 13px; font-weight: 700;
}
.mc-link-copy:active { transform: scale(.97); }
.mc-link-warn { margin-top: 6px; font-size: 11.5px; color: var(--danger); }
.mc-link-err { font-size: 12.5px; color: var(--danger); }

/* ====== 轻提示（登录链接失效等） ====== */
.fp-toast {
    position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(12px);
    z-index: 2000; max-width: 86vw; padding: 10px 16px;
    background: rgba(28, 28, 30, .94); color: #fff; font-size: 13px; line-height: 1.5;
    border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
}
.fp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ====== 「我的」页 · 四个快捷入口 ====== */
.mine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
/* 三个入口横排时字号收一点，避免「探路中心」折行 */
.mine-grid .mine-item { padding: 11px 10px; }
.mine-grid .mine-ico { font-size: 18px; }
.mine-grid .mine-txt { font-size: 12.5px; }
.mine-grid .mine-sub { font-size: 10.5px; }
.mine-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 12px 13px; text-align: left;
    transition: border-color .15s;
}
.mine-item:active { border-color: var(--primary); }
.mine-ico { font-size: 20px; line-height: 1; }
.mine-txt { font-size: 14px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.mine-sub { font-size: 11.5px; color: var(--ink-soft); }

/* ====== 「我的」页 · 收藏列表 ====== */
.mine-fav-list { margin-top: 12px; }
.mf-title { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.mf-list { display: flex; flex-direction: column; gap: 8px; }
.mf-item {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 10px 12px;
}
.mf-area {
    flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--primary);
    background: rgba(201, 48, 44, .08); border-radius: 999px; padding: 3px 8px;
}
.mf-host {
    flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mf-item.is-locked .mf-host { color: var(--ink-soft); }
.mf-go { flex: 0 0 auto; color: var(--ink-soft); font-size: 15px; }
.mf-empty {
    font-size: 13px; color: var(--ink-soft); text-align: center;
    background: var(--bg-2); border: 1px dashed var(--line);
    border-radius: var(--radius-sm); padding: 14px 12px;
}

/* ====== 「我的」页 · 须知与播报 ====== */
.mine-notice { margin-top: 18px; }
.mn-title { font-size: 13px; font-weight: 800; color: var(--ink); margin: 14px 0 8px; }
.mn-title:first-child { margin-top: 0; }
.mn-list { display: flex; flex-direction: column; gap: 8px; }
.mn-list li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13.5px; color: var(--ink-soft); line-height: 1.55;
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 10px 12px;
}
.mn-list li.is-link { cursor: pointer; }
.mn-tag {
    flex: 0 0 auto; font-size: 11px; font-weight: 700; margin-top: 1px;
    padding: 2px 7px; border-radius: 999px;
    background: rgba(201, 48, 44, .1); color: var(--primary);
}
.mn-tag.urgent { background: var(--primary); color: #fff; }
.mn-go { flex: 0 0 auto; margin-left: auto; color: var(--primary); font-weight: 700; font-size: 12.5px; }

/* ====== 分区点位里的「上海 / 全国」分段（2026-09-29） ====== */
.spot-seg { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.seg-badge {
    flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #fff;
    padding: 4px 11px; border-radius: 999px; letter-spacing: 1px;
}
.spot-seg.is-sh .seg-badge { background: var(--primary); }
.spot-seg.is-nat .seg-badge { background: #2b6cb0; }
.seg-text { min-width: 0; }
.seg-title { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0; }
.seg-desc { font-size: 12px; color: var(--ink-soft); margin: 3px 0 0; }

/* ====== 探索全国（2026-09-29 起并入「分区打卡点位」板块） ====== */
.national-block {
    margin-top: 34px; padding: 20px 18px 18px;
    border-top: 1px dashed var(--line);
    border-radius: var(--radius);
    background: #fbf8f3;
}
.national-block .spot-seg { margin-bottom: 12px; }
/* ===================================================== */
/* ====== 动态社区（2026-09-29 新增） ====== */
/* 管理员在 /admin 发布「文字 + 图片」；手机端底部第 2 个入口，桌面端是独立板块。 */
.feed-section { background: var(--white); padding: 60px 0; }
.feed-list { display: flex; flex-direction: column; gap: 14px; }

.feed-post {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: 0 10px 26px -22px rgba(45, 24, 16, .5);
}
/* 动态位置条：点一下跳到该点位 */
.fd-place {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 10px; margin-bottom: 10px; border-radius: 8px;
    background: #fdf3ea; cursor: pointer; transition: background .15s;
}
.fd-place:hover { background: #fbe8d8; }
.fd-place-l { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fd-place-ico { font-size: 12px; flex: none; }
.fd-place-txt {
    font-size: 12.5px; font-weight: 700; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fd-place-go { font-size: 11.5px; color: var(--primary); flex: none; }
.feed-post.is-locked .fd-place { text-align: left; }
/* 非会员：位置只到「区 · 板块」，右侧提示具体位置要会员 */
.fd-place.is-blur { background: #f6f1ec; }
.fd-place.is-blur .fd-place-txt { color: var(--ink-soft); font-weight: 600; }
.fd-place.is-blur .fd-place-go { color: #b3261e; font-weight: 700; }

/* 从动态跳过来时，目标点位描边高亮 */
.spot-item.is-flash { box-shadow: inset 0 0 0 2px var(--primary); border-radius: 8px; }

/* ---- 微博说说式头部：头像 + 昵称 + 认证 ---- */
.fd-user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fd-avatar {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary), #ff9d6e);
    color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0;
    box-shadow: 0 4px 10px -4px rgba(201, 48, 44, .6);
}
.fd-umeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fd-name {
    display: flex; align-items: center; gap: 4px;
    font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.3;
}
.fd-v {
    flex: none; width: 14px; height: 14px; border-radius: 50%;
    background: #2b6cb0; color: #fff; font-size: 9px; font-style: normal;
    display: inline-flex; align-items: center; justify-content: center;
}
.fd-sub { font-size: 11.5px; color: var(--ink-soft); }
.fd-badge {
    flex: none; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    background: #fdeee4; color: var(--primary);
}
.fd-badge.open { background: #eaf2fd; color: #2b6cb0; }
.fd-badge.peek { background: #fdf1e9; color: var(--primary); }
/* 置顶：金色实心 + 左侧金色竖条，一眼能看出这条被管理员钉住了 */
.fd-badge.top { background: #f7d774; color: #7a4d05; box-shadow: 0 0 0 1px rgba(122,77,5,.18) inset; }
.feed-post.is-top {
    position: relative;   /* 左侧金色竖条是 absolute，必须在这里定锚点 */
    border-color: #e8c877;
    box-shadow: 0 2px 14px -6px rgba(200, 150, 40, .45);
}
.feed-post.is-top::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; border-radius: 14px 0 0 14px; background: #f7d774;
}

.fd-text {
    font-size: 15px; line-height: 1.9; color: var(--ink);
    white-space: pre-wrap; word-break: break-word;
}
.fd-topic { color: #2b6cb0; }

/* 试读（2026-10-06）：非会员只拿到正文前段，末尾用渐隐收尾，下面挂引导条 */
.feed-post.is-peek { background: #fffdfa; }
.fd-text.is-peek { position: relative; }
.fd-fade {
    position: absolute; right: 0; bottom: 0; height: 1.9em; width: 40%;
    background: linear-gradient(to right, rgba(255, 253, 250, 0), #fffdfa 90%);
    pointer-events: none;
}

/* 配图：跟随图片自身比例，宽图铺满、长图完整显示，一律不裁切 */
.fd-imgs { display: grid; gap: 6px; margin-top: 10px; position: relative; }
/* 试读时还有 N 张没放出来 → 右下角挂个角标，比一句文字更直观 */
.fd-imgs[data-fd-more]::after {
    content: attr(data-fd-more);
    position: absolute; right: 8px; bottom: 8px;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(59, 43, 34, .72); color: #fff;
    font-size: 11.5px; font-weight: 700;
}
.fd-imgs.is-1 { grid-template-columns: 1fr; }
.fd-imgs.is-2 { grid-template-columns: repeat(2, 1fr); max-width: 520px; }
.fd-imgs.is-3 { grid-template-columns: repeat(3, 1fr); }
.fd-imgs.is-4 { grid-template-columns: repeat(2, 1fr); max-width: 520px; }
.fd-imgs img {
    width: 100%; height: auto; display: block;
    border-radius: 10px; cursor: zoom-in;
    background: #f7f1ea;
}
/* 单图：宽图撑满整行；长图按原比例缩到限高内完整可见（contain 保证不变形不裁切） */
.fd-imgs.is-1 img { max-height: 620px; object-fit: contain; }
/* 多图：格子比例由 JS 按本组首图真实宽高比写入 --ar，高度自动 → 不裁切 */
.fd-imgs.is-2 img, .fd-imgs.is-3 img, .fd-imgs.is-4 img {
    aspect-ratio: var(--ar, 4 / 3);
    min-height: 96px;
    object-fit: cover;
}
/* 超长图提示（图片本身已完整显示，点开只是看得更清） */
.fd-long {
    margin-top: 5px; font-size: 11.5px; color: var(--ink-soft);
    display: inline-flex; align-items: center; gap: 4px;
}

/* 底部工具条 */
.fd-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 12px; padding-top: 9px; border-top: 1px solid #f2e8dc;
}
.fd-act {
    border: 0; background: transparent; font-family: inherit; cursor: pointer;
    font-size: 12.5px; color: var(--ink-soft); padding: 4px 10px; border-radius: 999px;
    transition: background .15s, color .15s;
}
.fd-act:hover { background: #fdf1e9; color: var(--primary); }
.fd-act.on { color: var(--primary); font-weight: 700; }
.fd-stamp { font-size: 11.5px; color: var(--ink-soft); }

/* 试读引导条：点整条都能去开通会员（data-fd-vip 由 render 统一绑定） */
.fd-more {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; margin-top: 11px; padding: 9px 13px;
    border: 1px dashed #e6cfc0; border-radius: 12px;
    background: #fffaf5; cursor: pointer; font-family: inherit; text-align: left;
    transition: border-color .15s, background .15s;
}
.fd-more:hover { border-color: var(--primary); background: #fdf1e9; }
.fd-more-l { font-size: 12.5px; color: var(--ink-soft); }
.fd-more-r { font-size: 12.5px; font-weight: 700; color: var(--primary); flex: none; }

.feed-empty, .feed-loading {
    text-align: center; color: var(--ink-soft); font-size: 13px; padding: 26px 0; line-height: 1.9;
}
.feed-post.is-locked { border-style: dashed; background: #fffaf5; }
.fd-lockbox { text-align: center; padding: 6px 0 2px; }
.fd-lock-ico { font-size: 22px; display: block; margin-bottom: 4px; }
.fd-lock-t { font-size: 13px; color: var(--ink-soft); }
.fd-unlock {
    margin-top: 10px; padding: 8px 16px; border: 0; border-radius: 999px;
    background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
    font-family: inherit;
}
.fd-retry {
    margin-top: 8px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--white); color: var(--primary); font-size: 12.5px; cursor: pointer;
    font-family: inherit;
}

/* 图片放大层：z-index 高于弹窗(1000)与底部导航(900) */
.feed-lb {
    position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 1200;
    background: rgba(24, 14, 8, .88);
    display: none; align-items: center; justify-content: center; padding: 18px;
}
.feed-lb.on { display: flex; }
.feed-lb img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.feed-lb .lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .16); color: #fff; font-size: 26px; line-height: 1;
    cursor: pointer; font-family: inherit;
}
.feed-lb .lb-prev { left: 12px; }
.feed-lb .lb-next { right: 12px; }
.feed-lb.single .lb-nav { display: none; }
.feed-lb .lb-count {
    position: absolute; bottom: 22px; left: 0; right: 0; text-align: center;
    color: #fff; font-size: 13px; opacity: .85;
}
.feed-lb.single .lb-count { display: none; }
.feed-lb .lb-close {
    position: absolute; top: 14px; right: 16px;
    width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .16); color: #fff; font-size: 17px; cursor: pointer;
    font-family: inherit;
}

@media (max-width: 768px) {
    .feed-section { padding: 24px 0; }
    .feed-post { padding: 12px 13px; }
    .fd-avatar { width: 36px; height: 36px; font-size: 15px; }
    .fd-text { font-size: 14.5px; }
    /* 手机端：单图限高放宽但别占满整屏；多图格子保底高度，防止宽图被压成细条 */
    .fd-imgs.is-1 img { max-height: 460px; }
    .fd-imgs.is-2 img, .fd-imgs.is-3 img, .fd-imgs.is-4 img { min-height: 84px; }
    .fd-imgs.is-2, .fd-imgs.is-4 { max-width: 100%; }
    .feed-lb .lb-nav { width: 38px; height: 38px; font-size: 22px; }
}

/* ============ 2026-10-02 · 探路中心：栏目切换 ============ */
.scout-channels { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.scout-ch {
    flex: 1; text-align: left; cursor: pointer;
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 12px; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 3px;
    transition: all .18s;
}
.scout-ch.active {
    background: linear-gradient(135deg, #fff8e8, #ffefcf);
    border-color: var(--accent);
    box-shadow: 0 4px 14px -6px rgba(232, 168, 90, .6);
}
.sc-ch-ico { font-size: 18px; line-height: 1; }
.sc-ch-n { font-size: 14px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.sc-ch-bosom {
    font-size: 10.5px; font-weight: 800; white-space: nowrap;
    color: #8a5a00; background: linear-gradient(135deg, #ffe9a8, #ffd76e);
    padding: 2px 7px; border-radius: 999px; border: 1px solid #e9c46a;
}
.sc-ch-bosom.is-on { color: #0a6b3d; background: linear-gradient(135deg, #d6f5e4, #a8e6c3); border-color: #7fd1a6; }
.sc-ch-d { font-size: 11px; color: var(--ink-soft); line-height: 1.5; }
.sc-pv-other {
    font-size: 12px; color: var(--ink-soft); margin-top: 8px;
    background: var(--bg-2); border-radius: 8px; padding: 7px 10px;
}

/* ============ 2026-10-02 · 探店先锋 ============ */
.tk-head { padding: 14px 16px 10px; }
.tk-title { font-size: 16px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.tk-badge {
    font-size: 11px; font-weight: 700; color: #8a6d1f;
    background: linear-gradient(135deg, #ffe9b8, #ffd97a);
    border-radius: 999px; padding: 2px 9px;
}
.tk-sub { font-size: 12px; color: var(--ink-soft); margin-top: 5px; line-height: 1.6; }
.tk-nav { display: flex; gap: 8px; padding: 0 16px 10px; }
.tk-nav-btn {
    flex: 1; padding: 7px 0; font-size: 13px; cursor: pointer;
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 999px; color: var(--ink-soft);
}
.tk-nav-btn.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
.tk-body { padding: 0 16px 18px; }
.tk-empty {
    text-align: center; font-size: 13px; color: var(--ink-soft);
    padding: 34px 12px; line-height: 1.9;
}
.tk-retry, .tk-submit {
    margin-top: 10px; padding: 8px 16px; border: none; border-radius: 8px;
    background: var(--primary); color: #fff; font-size: 13px; cursor: pointer;
}
.tk-list { display: flex; flex-direction: column; gap: 10px; }
.tk-card {
    background: var(--white); border: 1px solid var(--line);
    border-radius: 12px; padding: 12px 13px;
}
.tk-card.is-lock { cursor: pointer; background: linear-gradient(135deg, #fffaf0, #fff3df); }
.tk-card-top { display: flex; align-items: center; gap: 8px; }
.tk-card-top .tk-date { margin-left: auto; }
.tk-city { font-size: 12.5px; font-weight: 800; color: var(--primary); }
.tk-official {
    font-size: 10.5px; font-weight: 800; color: #8a5a00; white-space: nowrap;
    background: linear-gradient(135deg, #ffe9a8, #ffd76e);
    padding: 2px 7px; border-radius: 999px; border: 1px solid #e9c46a;
}
.tk-date { font-size: 11px; color: var(--ink-soft); }
.tk-h {
    font-size: 14.5px; font-weight: 800; color: var(--ink);
    margin: 7px 0 5px; line-height: 1.5;
}
.tk-txt { font-size: 13.5px; color: var(--ink); line-height: 1.85; white-space: pre-wrap; }
.tk-by { font-size: 11.5px; color: var(--ink-soft); margin-top: 8px; }
/* 非会员封面：40px 缩略图放大 + 重模糊，看得见"有内容"但什么都看不清 */
.tk-cover {
    height: 118px; border-radius: 10px; margin-bottom: 9px;
    background-color: #efe2cc; background-size: cover; background-position: center;
    position: relative; overflow: hidden;
}
.tk-cover::before {
    content: ''; position: absolute; inset: -20px;
    background-image: inherit; background-size: cover; background-position: center;
    filter: blur(18px) saturate(1.4);
}
.tk-cover-mask {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 26px; background: rgba(255, 255, 255, .28); backdrop-filter: blur(2px);
}
.tk-lockline { font-size: 12px; color: #a08a5c; margin-top: 6px; }
/* 配图：不裁切，按首图真实比例（--ar 由 JS 写入） */
.tk-imgs { display: grid; gap: 4px; margin-top: 8px; }
.tk-imgs.is-1 { grid-template-columns: 1fr; }
.tk-imgs.is-2 { grid-template-columns: 1fr 1fr; }
.tk-imgs.is-3 { grid-template-columns: 1fr 1fr 1fr; }
.tk-imgs img {
    width: 100%; display: block; border-radius: 8px; background: #f6f1e8;
    object-fit: contain;
}
.tk-imgs.is-1 img { max-height: 520px; }
.tk-imgs.is-2 img, .tk-imgs.is-3 img { aspect-ratio: var(--ar, 4 / 3); }
.tk-cta { margin-top: 14px; text-align: center; }
.tk-cta-t { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 5px; }
.tk-cta-sub { font-size: 11.5px; color: var(--ink-soft); opacity: .85; margin-bottom: 9px; }
.tk-cta-btn { padding: 10px 22px; border: none; border-radius: 999px; font-size: 14px; }
/* 发帖表单 */
.tk-form label { display: block; font-size: 12px; color: var(--ink-soft); margin: 10px 0 5px; }
.tk-form input[type=text], .tk-form textarea {
    width: 100%; box-sizing: border-box; font-size: 16px; /* iOS 聚焦不放大 */
    padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--white); color: var(--ink); font-family: inherit;
}
.tk-form textarea { min-height: 120px; resize: vertical; line-height: 1.8; }
.tk-row2 { display: flex; gap: 10px; }
.tk-row2 > div { flex: 1; }
.tk-form input[type=file] { font-size: 12px; margin-top: 4px; }
.tk-pvs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.tk-pv { position: relative; width: 84px; }
.tk-pv img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.tk-pv-x {
    position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
    border: none; border-radius: 50%; background: var(--danger); color: #fff;
    font-size: 12px; cursor: pointer; line-height: 1;
}
.tk-pv-meta { display: block; font-size: 10.5px; color: var(--ink-soft); margin-top: 3px; text-align: center; }
.tk-submit { width: 100%; margin-top: 16px; padding: 12px 0; font-size: 15px; font-weight: 700; border-radius: 10px; }
.tk-tip { font-size: 11.5px; color: var(--ink-soft); line-height: 1.85; margin-top: 10px; }
/* 我的进度 */
.tk-progress { background: var(--bg-2); border-radius: 12px; padding: 12px 13px; }
.tk-progress-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-soft); gap: 8px; flex-wrap: wrap; }
.tk-bar { height: 8px; background: #eadfcb; border-radius: 999px; margin: 9px 0; overflow: hidden; }
.tk-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--primary)); border-radius: 999px; }
.tk-miles { display: flex; gap: 8px; }
.tk-mile {
    flex: 1; text-align: center; background: var(--white); border: 1px solid var(--line);
    border-radius: 10px; padding: 8px 4px; display: flex; flex-direction: column; gap: 2px;
}
.tk-mile.on { border-color: var(--accent); background: linear-gradient(135deg, #fff8e8, #ffefcf); }
.tk-mile-n { font-size: 12px; font-weight: 800; color: var(--ink); }
.tk-mile-r { font-size: 11px; color: var(--ink-soft); }
.tk-mile-ok { font-size: 10px; color: var(--success); font-weight: 700; }
.tk-my-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.tk-my-row {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    background: var(--white); border: 1px solid var(--line); border-radius: 10px;
    padding: 9px 11px; font-size: 12.5px; color: var(--ink);
}
.tk-pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }
.tk-pill.ok { color: #0f6e56; background: #e1f5ee; }
.tk-pill.wait { color: #8a6d1f; background: #fff3d6; }
.tk-pill.no { color: var(--danger); background: #fdecea; }

@media (max-width: 768px) {
    .scout-channels { gap: 8px; padding: 10px 12px; }
    .sc-ch-d { display: none; }
    .scout-ch { padding: 9px 10px; }
    .tk-imgs.is-1 img { max-height: 380px; }
    .tk-cover { height: 100px; }
}

/* ====== 成为会员专区（2026-10-09 新增）====== */
.membership-section { background: linear-gradient(180deg, var(--bg) 0%, #fff 100%); }
.membership-section .section-head { margin-bottom: 48px; }
.membership-body { display: flex; justify-content: center; }
.membership-card {
    max-width: 680px; width: 100%;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 36px 40px;
    text-align: center;
}
.membership-price {
    display: flex; align-items: baseline; justify-content: center;
    gap: 6px; margin-bottom: 8px;
}
.membership-price .mp-amount {
    font-size: 56px; font-weight: 900; color: var(--primary);
    line-height: 1; letter-spacing: -2px;
}
.membership-price .mp-unit {
    font-size: 18px; font-weight: 700; color: var(--ink-soft);
}
.membership-name {
    font-size: 22px; font-weight: 800; color: var(--ink);
    margin-bottom: 4px;
}
.membership-tag {
    font-size: 14px; color: var(--ink-soft);
    margin-bottom: 28px;
}
.membership-perks {
    list-style: none; text-align: left;
    display: flex; flex-direction: column; gap: 14px;
    margin-bottom: 28px;
}
.membership-perks li {
    display: flex; align-items: flex-start; gap: 14px;
    background: var(--bg); border-radius: var(--radius-sm);
    padding: 16px 18px;
}
.membership-perks .mp-icon {
    font-size: 24px; line-height: 1; flex-shrink: 0;
}
.membership-perks li div { flex: 1; min-width: 0; }
.membership-perks li b {
    display: block; font-size: 15px; font-weight: 800; color: var(--ink);
    margin-bottom: 4px;
}
.membership-perks li p {
    font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin: 0;
}
.membership-cta { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.membership-cta .btn-primary { font-size: 16px; padding: 14px 32px; }
.membership-cta-tip {
    font-size: 12px; color: var(--ink-soft); line-height: 1.6;
}
/* 管理员联系方式（2026-10-09）：QQ 号 + 一键复制 */
.membership-contact {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 999px; padding: 12px 22px;
}
.mc-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.mc-qq { font-size: 20px; font-weight: 900; color: var(--primary); letter-spacing: 1px; }
.mc-copy {
    font-size: 12px; font-weight: 700; color: var(--white);
    background: var(--primary); border-radius: 999px;
    padding: 5px 14px; transition: background .2s;
}
.mc-copy:hover { background: var(--primary-dark); }
.mc-copy:active { transform: translateY(1px); }
@media (max-width: 768px) {
    .membership-card { padding: 26px 22px; }
    .membership-price .mp-amount { font-size: 46px; }
}
@media (max-width: 480px) {
    .membership-perks li { padding: 14px; }
    .membership-perks .mp-icon { font-size: 20px; }
    .membership-perks li b { font-size: 14px; }
    .membership-perks li p { font-size: 12.5px; }
}