/**
 * 首页 V2（站点首页 /）样式
 *
 * 由 haitan-pages 插件提供，仅在首页（Haitan_Home_Page::is_home_page() 命中）加载。
 * 约定（与 assets/css/pingtan.css、haitanai.css 保持一致）：
 *   - 所有选择器都带 hpn- 前缀或挂在 .hpn-page 下，不覆盖 JustNews 全局样式
 *   - 不复用主题的 .container / .row / .card 等通用类
 *   - 不引入任何第三方 CSS 框架，字体不写死、继承站点 body
 *   - Mobile First：默认写手机，媒体查询只做增强
 *
 * 目录：
 *   1. 变量与基础
 *   2. 容器与分区
 *   3. 首屏（居中定位 + 搜索 + 快捷词，深色实景图）
 *   4. 今天的平潭（白色毛玻璃浮岛，骑在首屏图与白底交界）
 *   5. 金刚区（轻量化：彩色微渐变圆底 + SVG，无卡片盒）
 *   6. 去平潭怎么玩（纯 CSS Tab + 风景封面卡）
 *   7. 平潭旅行必备（彩色微标三栏）
 *   8. 认识平潭
 *   9. 平潭最新内容
 *  10. 海坛AI（海蓝底）+ 微信小程序（白底）
 *  11. 响应式
 */

/* ------------------------------------------------------------------ 1. 变量 */

.hpn-page {
    --hpn-blue: #1684d8;
    --hpn-blue-deep: #0d6aa8;
    --hpn-blue-soft: #eaf4fd;
    --hpn-ink: #16324a;
    --hpn-text: #46647a;
    --hpn-muted: #7d97a9;
    --hpn-line: #e4eef6;
    --hpn-line-soft: #eef5fa;
    --hpn-surface: #ffffff;
    /* 页面大背景：极淡冷灰（任务书 §5） */
    --hpn-surface-soft: #f8fafc;
    --hpn-tag-bg: #edf6fd;
    --hpn-tag-ink: #2c6a94;
    --hpn-radius-l: 16px;
    --hpn-radius-m: 12px;
    --hpn-radius-s: 8px;
    --hpn-gap: 12px;

    /* 卡片投影：从生硬细线换成柔和弥散阴影（任务书 §5） */
    --hpn-shadow: 0 2px 12px rgba(15, 23, 42, .04);
    --hpn-shadow-hover: 0 4px 20px rgba(15, 23, 42, .08);
    --hpn-shadow-float: 0 4px 20px rgba(0, 0, 0, .05);

    /* 首屏深色区（Hero + 今日平潭共用同一套深蓝色，保证两块之间无缝） */
    --hpn-deep: #16324a;
    --hpn-deep-2: #1b3d5c;
    /* 首屏背景图由模板通过 --hpn-hero-img 注入；拿不到图时下面用 none 兜底 */
    --hpn-hero-img: none;

    display: block;
    width: 100%;
    max-width: 100%;
    /* 防止任何子元素把页面撑出横向滚动条 */
    overflow-x: clip;
    padding-bottom: 24px;
    color: var(--hpn-text);
    background: var(--hpn-surface-soft);
}

/* 作用域内的 box-sizing 复位，让本页样式自洽，不依赖外部前提 */
.hpn-page,
.hpn-page *,
.hpn-page *::before,
.hpn-page *::after {
    box-sizing: border-box;
}

.hpn-page img {
    max-width: 100%;
    height: auto;
    display: block;
}

/*
 * ============================================================================
 * 元素基线重置
 * ============================================================================
 *
 * ⚠️⚠️ 规矩：基线重置**只能写一条**，而且必须用 `:where()` 把特异性压到最低。
 *
 * 原因：`.hpn-page p` 这种写法特异性是 **0,1,1**，而组件自己的 `.hpn-xxx { … }`
 * 只有 **0,1,0** —— 基线会**反过来盖住组件**，让组件里写在 a / p / ul / h* 上的声明
 * **整条静默失效**（源码看着完全正常，只有 computed style 能看出来）。
 *
 * 2026-10-08 一天之内踩到三次，症状各不相同：
 *   ① `.hpn-page a { color: inherit }` → 快捷词的白字被换成继承的深灰 #46647a，
 *      在深色胶囊底上读不出来；
 *   ② `.hpn-page ul { margin: 0 }` → **所有 <ul> 的 margin-top 归零**，
 *      「认识平潭」6 个文字入口、首屏快捷词、AI 问句、必备列表的间距全部消失；
 *   ③ `.hpn-page p { margin: 0 }` → 「查看更多平潭文章」按钮的 margin-top 归零，
 *      紧贴在文章卡片下方。
 *
 * ⚠️ 曾经想「加一条 `.hpn-page p{margin:0}` 给老浏览器兜底、再加一条 `:where()` 版」——
 * **这是错的**：兜底那条本身就是 0,1,1，会把组件连同 `:where()` 版一起盖掉，等于没修。
 * 所以这里只保留 `:where()` 版。
 *
 * 为什么用 `:where(.hpn-page) p` 而不是 `.hpn-page :where(p)`：
 *   前者特异性 = 0,0,1（只有元素），**任何** `.hpn-xxx`（0,1,0）都稳赢，不依赖源码顺序；
 *   后者 = 0,1,0，与组件同分，只能靠「组件规则写在后面」取胜，太脆弱。
 *
 * 新增「直接写在 a / p / ul / h* 上」的样式后，**必须用 Playwright 核对 computed style**。
 */

:where(.hpn-page) a {
    color: inherit;
    text-decoration: none;
}

:where(.hpn-page) ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(.hpn-page) p,
:where(.hpn-page) h1,
:where(.hpn-page) h2,
:where(.hpn-page) h3 {
    margin: 0;
    padding: 0;
}

:where(.hpn-page) h1,
:where(.hpn-page) h2,
:where(.hpn-page) h3 {
    color: var(--hpn-ink);
    font-weight: 700;
    line-height: 1.35;
}

.hpn-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------- 2. 容器与分区 */

.hpn-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 15px;
}

.hpn-section {
    padding: 30px 0;
}

.hpn-head {
    margin-bottom: 18px;
}

.hpn-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.hpn-title {
    font-size: 21px;
    letter-spacing: .01em;
}

/* 标题里的补充说明（如「平潭旅行必备 自驾 · 吃住 · 便民」），弱化一档 */
.hpn-title-aside {
    display: inline-block;
    margin-left: 6px;
    font-size: .68em;
    font-weight: 600;
    color: var(--hpn-muted);
    letter-spacing: .02em;
}

.hpn-desc {
    margin-top: 6px;
    font-size: 13.5px;
    color: var(--hpn-muted);
    line-height: 1.65;
}

.hpn-more {
    display: inline-flex;
    align-items: center;
    /* 触摸热区：视觉上仍是小字，实际点击区域撑到 40px 高 */
    min-height: 40px;
    padding: 0 4px;
    margin: 0 -4px -10px;
    font-size: 13.5px;
    color: var(--hpn-blue);
    white-space: nowrap;
}

.hpn-more:hover {
    color: var(--hpn-blue-deep);
}

/* -------------------------------------------------------------- 3. 首屏 */
/*
 * 视觉方向：文旅沉浸感 —— 深色实景大图 + 暗色渐变蒙层，**内容全部水平居中**。
 *
 * 底部留白（padding-bottom）刻意给到 56px：给「今天的平潭」白色毛玻璃浮岛压上来留位置，
 * 浮岛用负 margin 上移，正好骑在「深色图」与「页面白底」的交界线上，
 * 把原来那道深蓝→纯白的硬切用一层毛玻璃过渡掉。
 *
 * 图片通过 --hpn-hero-img 注入（模板里输出）。拿不到图时该变量是 none，
 * 只剩渐变色 —— 页面照常可读，不会出现破图或空白。
 */
.hpn-hero {
    position: relative;
    /*
     * 底部只留深色区自己的收尾留白，**不再为浮岛预留上移空间** ——
     * 浮岛改为落在首屏图下方（.hpn-today 用正的 margin-top），不再骑在实景图上。
     */
    padding: 30px 0 30px;
    background-color: var(--hpn-deep);
    background-image:
        linear-gradient(180deg,
            rgba(16, 37, 66, .62) 0%,
            rgba(16, 37, 66, .46) 42%,
            rgba(16, 37, 66, .74) 78%,
            var(--hpn-deep) 100%),
        var(--hpn-hero-img);
    background-size: cover, cover;
    background-position: center top, center 38%;
    background-repeat: no-repeat, no-repeat;
    border-bottom: 0;
    overflow: hidden;
}

/* 浅色模式下的柔光斑保留，但改成白色微光，避免在深色图上发脏 */
.hpn-hero::after {
    content: "";
    position: absolute;
    top: -90px;
    right: -70px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.hpn-hero .hpn-container {
    position: relative;
    z-index: 1;
}

/* 首屏内容整体居中 */
.hpn-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hpn-hero-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* 首屏文字一律纯白 + 轻微文字投影，保证压在实景图上也有足够对比度 */
.hpn-hero-title-main {
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: .04em;
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(8, 22, 40, .45);
}

.hpn-hero-title-sub {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: .02em;
    text-shadow: 0 1px 10px rgba(8, 22, 40, .5);
}

.hpn-hero-lead {
    margin-top: 10px;
    font-size: 14.5px;
    color: rgba(255, 255, 255, .88);
    line-height: 1.7;
    text-shadow: 0 1px 8px rgba(8, 22, 40, .5);
}

/* 搜索框：保持圆角白底、水平居中，在深色图上自然成为视觉焦点 */
.hpn-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 560px;
    margin: 16px auto 0;
    padding: 6px 6px 6px 12px;
    background: var(--hpn-surface);
    border: 1px solid transparent;
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(8, 22, 40, .22);
}

.hpn-search:focus-within {
    border-color: var(--hpn-blue);
    box-shadow: 0 0 0 3px rgba(22, 132, 216, .12);
}

.hpn-search-icon {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
}

.hpn-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    padding: 0 2px;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 14.5px;
    color: var(--hpn-ink);
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.hpn-search-input::placeholder {
    color: #9db2c2;
}

.hpn-search-btn {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--hpn-blue);
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease;
}

.hpn-search-btn:hover {
    background: var(--hpn-blue-deep);
}

/* 海坛AI 入口 + 快捷词 —— 都压在深色实景图上，所以改成「白底 / 半透明深底」两档，整体居中 */
.hpn-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 12px;
    width: 100%;
}

.hpn-ai-entry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--hpn-deep);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(8, 22, 40, .18);
    transition: transform .15s ease, box-shadow .15s ease;
}

.hpn-ai-entry:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(8, 22, 40, .26);
}

.hpn-ai-entry-icon {
    font-size: 15px;
    line-height: 1;
}

/*
 * 快捷词：手机上单行横向滑动（6 个词全部换行会把首屏顶到 400px 以上，
 * 「今天的平潭」就掉出第一屏了）。右侧渐隐提示「还能往右滑」。
 * 640px 起改为换行铺满，不再需要滑动。
 */
.hpn-quick {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    /* 溢出时自动退化为 start，否则居中会让左侧的头几个词滑不到（flex 居中滚动的经典坑） */
    justify-content: safe center;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 22px 2px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}

.hpn-quick::-webkit-scrollbar {
    display: none;
}

/*
 * 快捷词压在实景图上，背景明暗不可控（图上是天空/海面时很亮）。
 * 所以不能用「浅白底 + 白字」——在亮区会糊成一片。
 * 改成**深色半透明底 + 白字**，任何明暗背景上都能读清。
 */
.hpn-quick-item {
    display: inline-block;
    flex: 0 0 auto;
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 999px;
    background: rgba(16, 37, 66, .54);
    font-size: 13px;
    color: #ffffff;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease;
}

.hpn-quick-item:hover {
    background: rgba(16, 37, 66, .66);
    border-color: rgba(255, 255, 255, .62);
}

/* AI 类快捷词用海岛蓝区分。底要够深 —— 半透明的亮蓝压在浅色海面上会发白，白字就读不出来了 */
.hpn-quick-ai {
    background: rgba(13, 92, 150, .86);
    border-color: rgba(255, 255, 255, .5);
}

.hpn-quick-ai:hover {
    background: rgba(10, 72, 120, .94);
}

/* ---------------------------------------------------- 4. 今天的平潭 */
/*
 * 白色毛玻璃浮岛，落在首屏实景图**下方**，用正的 margin-top 与首屏拉开间距。
 * 浮岛是浅色底，所以内部文字用深色（不是白字）。
 *
 * 浮岛底色：半透明白 + backdrop-filter 毛玻璃。
 * 先给一份**不依赖 backdrop-filter 的降级**（近乎不透明的白），支持时再升级成真毛玻璃 ——
 * 老浏览器不会出现「半透明底 + 深色字」看不清的情况。
 */
.hpn-today {
    position: relative;
    z-index: 2;
    margin-top: 20px;
    padding: 0 0 40px;
    background: transparent;
}

.hpn-today-panel {
    padding: 22px 20px;
    background: rgba(255, 255, 255, .94);
    /* 浅灰描边：浮岛落在浅色页面底上，纯白边框会看不见轮廓 */
    border: 1px solid rgba(22, 50, 74, .07);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, .1);
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
    .hpn-today-panel {
        background: rgba(255, 255, 255, .85);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
}

.hpn-today-head {
    margin-bottom: 16px;
}

/* 浮岛是浅色底，标题与说明回到深色文字 */
.hpn-today .hpn-title {
    color: var(--hpn-ink);
    text-shadow: none;
}

.hpn-today .hpn-desc {
    color: var(--hpn-muted);
}

.hpn-today-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* 浮岛内部的 4 个数据格：极淡蓝底，与白色浮岛拉开一点点层次 */
.hpn-today-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 12px;
    background: #f7fbff;
    border: 1px solid rgba(22, 132, 216, .1);
    border-radius: var(--hpn-radius-m);
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
}

a.hpn-today-card:hover {
    background: #eef6fd;
    border-color: rgba(22, 132, 216, .26);
    transform: translateY(-2px);
}

.hpn-today-emoji {
    font-size: 18px;
    line-height: 1.2;
}

.hpn-today-label {
    font-size: 12.5px;
    color: var(--hpn-muted);
}

.hpn-today-value {
    font-size: 18px;
    /* Semi-Bold：游客一眼能抓取关键数字（比周围的 label / note 重一档，但不至于 Bold 那么粗） */
    font-weight: 600;
    color: var(--hpn-ink);
    line-height: 1.35;
    word-break: break-word;
    min-height: 1.35em;
}

/* 说明行统一占两行高：4 块卡片的文字长度不同，不锁高度就会出现「一行比另一行高」 */
.hpn-today-note {
    font-size: 12px;
    color: var(--hpn-muted);
    line-height: 1.55;
    word-break: break-word;
    min-height: 3.1em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hpn-today-empty .hpn-today-value {
    font-size: 14px;
    color: var(--hpn-muted);
    font-weight: 600;
}

/* -------------------------------------------------------- 5. 金刚区 */
/*
 * 轻量化：**去掉外层卡片的边框、白底和投影**，只留「彩色微渐变圆底 + 线性图标 + 粗体标题」。
 * 原来的卡片盒子是「后台管理面板」既视感的来源，去掉之后整块立刻变成 App 金刚区。
 *
 * 排布：移动端 4 列 × 2 行；1024px 起单行 8 等分（任务书要求）。
 * 说明文字只在 1024px 起显示 —— 手机端每列只有约 80px 宽，塞不下。
 */
.hpn-tools-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 2px;
}

.hpn-tool-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 12px 4px;
    background: transparent;
    border: 0;
    border-radius: 14px;
    text-align: center;
    transition: transform .18s ease, background .18s ease;
}

/* 悬停轻微上浮 + 极淡的底，不再有卡片边框 */
.hpn-tool-link:hover {
    transform: translateY(-4px);
    background: rgba(22, 132, 216, .05);
}

/* 44×44 彩色微渐变圆底 */
.hpn-tool-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0f2fe 0%, #cfe9fd 100%);
    color: var(--hpn-blue-deep);
    transition: transform .18s ease;
}

.hpn-tool-link:hover .hpn-tool-icon {
    transform: scale(1.06);
}

/* 内联 SVG 统一尺寸 */
.hpn-svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* 8 个入口各给一套低饱和微渐变，保持海岛清爽调性又不至于全灰 */
.hpn-tool:nth-child(1) .hpn-tool-icon { background: linear-gradient(135deg, #e0f2fe, #cbe8fd); color: #0d6aa8; }
.hpn-tool:nth-child(2) .hpn-tool-icon { background: linear-gradient(135deg, #d9f5f0, #c0ece4); color: #0f766e; }
.hpn-tool:nth-child(3) .hpn-tool-icon { background: linear-gradient(135deg, #e0e7ff, #cbd8fd); color: #4338ca; }
.hpn-tool:nth-child(4) .hpn-tool-icon { background: linear-gradient(135deg, #dbeafe, #c3dbfd); color: #1d4ed8; }
.hpn-tool:nth-child(5) .hpn-tool-icon { background: linear-gradient(135deg, #ffedd5, #fedcbe); color: #c2410c; }
.hpn-tool:nth-child(6) .hpn-tool-icon { background: linear-gradient(135deg, #fef3c7, #fbe6a8); color: #a16207; }
.hpn-tool:nth-child(7) .hpn-tool-icon { background: linear-gradient(135deg, #dcfce7, #c5f5d6); color: #15803d; }
.hpn-tool:nth-child(8) .hpn-tool-icon { background: linear-gradient(135deg, #ffe4e6, #fdd0d6); color: #be123c; }

.hpn-tool-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--hpn-ink);
    line-height: 1.3;
}

/* 说明默认隐藏，1024px 起（单行 8 等分、每列约 147px）才有空间显示 */
.hpn-tool-desc {
    display: none;
    font-size: 11.5px;
    color: var(--hpn-muted);
    line-height: 1.5;
    margin-top: 2px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------- 6. 去平潭怎么玩 */

.hpn-routes {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 12px;
    /* 路线卡片可以横向滑动，但页面整体不能横向滚动 */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}

.hpn-route {
    scroll-snap-align: start;
}

/*
 * 路线卡：白底 + 柔和高级投影 + 圆角裁切，顶部一张风景封面（任务书 §2）。
 * 封面用 **16/9 的 aspect-ratio** —— 3 张卡的原图比例各不相同（横 4:3 / 16:9 / 竖 2:3），
 * 用固定高会偏矮，用固定宽高比让卡片随容器宽按比例长高，**视觉冲击力更饱满**；
 * 移动横滑单卡宽约 315px → 封面高约 177px，桌面三列每列约 383px → 封面高约 215px。
 */
.hpn-route-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--hpn-surface);
    border: 1px solid var(--hpn-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--hpn-shadow-float);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.hpn-route-link:hover {
    border-color: #cfe6f8;
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .1);
}

.hpn-route-cover {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #dbeafe 0%, #eef6fd 100%);
}

/* 没有 POI 封面的卡片（如塘屿岛 / 草屿岛）：渐变底 + 图标，不拿别的照片冒充 */
.hpn-route-cover-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #cfe9fd 0%, #eaf4fd 60%, #e0f2fe 100%);
}

.hpn-route-cover-emoji {
    font-size: 34px;
    line-height: 1;
    opacity: .9;
}

.hpn-route-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

/* 悬停时封面轻微放大 */
.hpn-route-link:hover .hpn-route-cover img {
    transform: scale(1.05);
}

.hpn-route-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    padding: 14px 15px 16px;
}

.hpn-route-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hpn-route-emoji {
    font-size: 18px;
    line-height: 1;
}

.hpn-route-title {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--hpn-ink);
}

.hpn-route-meta {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--hpn-tag-bg);
    color: var(--hpn-tag-ink);
    font-size: 11.5px;
    font-weight: 600;
}

.hpn-route-desc {
    font-size: 13px;
    color: var(--hpn-text);
    line-height: 1.65;
}

.hpn-route-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hpn-route-tag {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--hpn-surface-soft);
    border: 1px solid var(--hpn-line-soft);
    color: var(--hpn-tag-ink);
    font-size: 11.5px;
}

.hpn-route-cta {
    margin-top: auto;
    padding-top: 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hpn-blue);
}

/*
 * 纯 CSS Tab（radio + label 实现，零 JS）。
 *
 * 结构：三个 <input type=radio> 与 .hpn-tab-nav / .hpn-tab-panels 同级，
 * 用 `:checked ~ …` 控制面板显隐与标签选中态。这样即使 JS 完全没加载，
 * Tab 也能正常切换；radio 本身可聚焦，键盘上下/左右方向键即可切换。
 *
 * 卡片不再堆 tag 列表：原来挤在卡片底部的「风车公路 / 长江澳 / 北港村…」
 * 已经由 Tab 维度承接，卡片只留标题、说明和入口，恢复呼吸感。
 */
.hpn-tabs {
    /* 刻意不设 position:relative —— 宽屏下要让 .hpn-tab-nav 相对 .hpn-container 定位，
       才能把它摆到标题行的右上角（见下面的响应式规则）。 */
    display: block;
}

/* 视觉隐藏但仍可聚焦（不要用 display:none，那样键盘就切不动了） */
.hpn-tab-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.hpn-tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.hpn-tab {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--hpn-line);
    border-radius: 999px;
    background: var(--hpn-surface);
    color: var(--hpn-text);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.hpn-tab:hover {
    border-color: #bcdcf5;
    color: var(--hpn-blue-deep);
}

/*
 * 选中态：海岛蓝实底。
 *
 * 选择器用 `:nth-of-type` / `:nth-child` 通用化（而不是写死 `#hpn-tab-route`），
 * 这样「去平潭怎么玩」和「旅行必备」两组 Tab 共用同一套规则 ——
 * 页面里 radio 与面板一一对应（第 1 个 radio 管第 1 个面板），无需为每组单独写。
 */
.hpn-tab-input:nth-of-type(1):checked ~ .hpn-tab-nav > .hpn-tab:nth-child(1),
.hpn-tab-input:nth-of-type(2):checked ~ .hpn-tab-nav > .hpn-tab:nth-child(2),
.hpn-tab-input:nth-of-type(3):checked ~ .hpn-tab-nav > .hpn-tab:nth-child(3) {
    background: var(--hpn-blue);
    border-color: var(--hpn-blue);
    color: #ffffff;
}

/* 键盘聚焦可见 */
.hpn-tab-input:nth-of-type(1):focus-visible ~ .hpn-tab-nav > .hpn-tab:nth-child(1),
.hpn-tab-input:nth-of-type(2):focus-visible ~ .hpn-tab-nav > .hpn-tab:nth-child(2),
.hpn-tab-input:nth-of-type(3):focus-visible ~ .hpn-tab-nav > .hpn-tab:nth-child(3) {
    outline: 2px solid var(--hpn-blue);
    outline-offset: 2px;
}

.hpn-tab-panel {
    display: none;
}

.hpn-tab-input:nth-of-type(1):checked ~ .hpn-tab-panels > .hpn-tab-panel:nth-child(1),
.hpn-tab-input:nth-of-type(2):checked ~ .hpn-tab-panels > .hpn-tab-panel:nth-child(2),
.hpn-tab-input:nth-of-type(3):checked ~ .hpn-tab-panels > .hpn-tab-panel:nth-child(3) {
    display: block;
}

/* ------------------------------------------- 6. 平潭旅行必备 */
/*
 * 三组（自驾出行 / 吃住平潭 / 旅途便民）在桌面端并排三列，
 * 移动端收成药丸 Tab —— 布局规则见文件末尾「移动端专项」与 `@media (min-width:640px)`。
 */

.hpn-life-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--hpn-surface);
    border: 1px solid var(--hpn-line);
    border-radius: var(--hpn-radius-l);
    box-shadow: var(--hpn-shadow);
}

.hpn-life-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

/*
 * 三栏各配一个彩色微标（44×44 圆角 12px + 微渐变 + 线性图标），
 * 与金刚区同一套视觉语言，把这一保障板块从「三张白卡」撑饱满。
 */
.hpn-life-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe 0%, #c3dbfd 100%);
    color: #1d4ed8;
}

.hpn-life-card:nth-child(2) .hpn-life-icon {
    background: linear-gradient(135deg, #ffedd5 0%, #fedcbe 100%);
    color: #c2410c;
}

.hpn-life-card:nth-child(3) .hpn-life-icon {
    background: linear-gradient(135deg, #dcfce7 0%, #c5f5d6 100%);
    color: #15803d;
}

.hpn-life-title {
    font-size: 16px;
}

.hpn-life-desc {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--hpn-muted);
    line-height: 1.6;
}

.hpn-life-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
}

.hpn-life-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 0;
    border-top: 1px solid var(--hpn-line-soft);
    font-size: 13.5px;
    color: var(--hpn-text);
}

.hpn-life-list li:first-child .hpn-life-link {
    border-top: 0;
}

.hpn-life-link:hover {
    color: var(--hpn-blue-deep);
}

/* ------------------------------------------------------- 8. 认识平潭 */

.hpn-know-topics {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.hpn-know-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--hpn-surface);
    border: 1px solid var(--hpn-line);
    border-radius: var(--hpn-radius-l);
    overflow: hidden;
    box-shadow: var(--hpn-shadow);
    transition: border-color .15s ease, transform .15s ease;
}

.hpn-know-link:hover {
    border-color: var(--hpn-blue);
    transform: translateY(-1px);
}

.hpn-know-cover {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #dceafa 0%, #eef6fd 100%);
    overflow: hidden;
}

.hpn-know-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hpn-know-cover-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.hpn-know-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px;
}

.hpn-know-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--hpn-ink);
}

.hpn-know-desc {
    font-size: 12.5px;
    color: var(--hpn-muted);
    line-height: 1.6;
    min-height: 3.2em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hpn-know-cta {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hpn-blue);
}

/*
 * 6 个文字入口（平潭历史 / 文化 / 地理 / 岛屿 / 海岛故事 / 南岛语族）。
 *
 * margin-top 给到 28px：上面那排专题卡带 `0 2px 12px` 的投影，阴影向下扩散约 14px，
 * 原来 14px 的间距会被阴影吃掉，视觉上两行几乎贴在一起。28px 留出约 14px 净空。
 */
.hpn-know-entries {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 28px;
}

.hpn-know-entry {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    height: 100%;
    padding: 12px;
    background: var(--hpn-surface);
    border: 1px solid var(--hpn-line);
    border-radius: var(--hpn-radius-m);
    box-shadow: var(--hpn-shadow);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.hpn-know-entry:hover {
    border-color: #cfe6f8;
    transform: translateY(-2px);
    box-shadow: var(--hpn-shadow-hover);
}

.hpn-know-entry-emoji {
    flex: 0 0 auto;
    font-size: 17px;
    line-height: 1.3;
}

.hpn-know-entry-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hpn-know-entry-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--hpn-ink);
}

.hpn-know-entry-desc {
    font-size: 11.5px;
    color: var(--hpn-muted);
    line-height: 1.5;
}

/* --------------------------------------------------- 9. 平潭最新内容 */

.hpn-posts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.hpn-post-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--hpn-surface);
    border: 1px solid var(--hpn-line);
    border-radius: var(--hpn-radius-l);
    overflow: hidden;
    box-shadow: var(--hpn-shadow);
    transition: border-color .15s ease, transform .15s ease;
}

.hpn-post-link:hover {
    border-color: var(--hpn-blue);
    transform: translateY(-1px);
}

.hpn-post-cover {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #e6f1fb 0%, #f2f8fe 100%);
    overflow: hidden;
}

.hpn-post-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hpn-post-cover-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #a9c2d4;
    letter-spacing: .3em;
}

.hpn-post-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 13px 14px 15px;
}

.hpn-post-cat {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--hpn-tag-bg);
    color: var(--hpn-tag-ink);
    font-size: 11.5px;
    font-weight: 600;
}

.hpn-post-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--hpn-ink);
    line-height: 1.5;
    /* 标题最多 3 行，超出省略，卡片高度才稳 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hpn-post-date {
    font-size: 12px;
    color: var(--hpn-muted);
}

/*
 * 6 篇最新内容卡片下方的居中幽灵按钮 —— 留给有深度阅读需求的用户一个明确出口。
 * 站内没有专门的"全站文章归档"页，最接近的是海岛风情分类（/haidao/），已实测 200，
 * 文案保持中性"查看更多平潭文章"。
 */
/*
 * 6 篇最新内容卡片下方的居中幽灵按钮 —— 留给有深度阅读需求的用户一个明确出口。
 * 站内没有专门的"全站文章归档"页，最接近的是海岛风情分类（/haidao/），已实测 200，
 * 文案保持中性"查看更多平潭文章"。
 *
 * margin-top 给到 28px：上面卡片带 `0 2px 12px` 投影，阴影向下扩散约 14px，
 * 间距小于 28px 会被阴影吃掉，视觉上按钮像贴在卡片上。
 */
.hpn-posts-more {
    margin-top: 28px;
    text-align: center;
}

.hpn-more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 22px;
    border: 1px solid var(--hpn-blue);
    border-radius: 999px;
    background: transparent;
    color: var(--hpn-blue);
    font-size: 14px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}

.hpn-more-link:hover {
    background: var(--hpn-blue);
    color: #ffffff;
}

/* ------------------------------------------- 10. 海坛AI + 微信小程序 */
/*
 * 收尾模块：左右**等高拉平**，视觉上刻意与上方所有白底卡片拉开层次 ——
 * 左侧海坛AI 用平潭海蓝实色底 + 白字（产品专属容器），右侧小程序卡保持白底干净。
 * 一张有颜色、一张留白，形成收尾的节奏感。
 */
.hpn-ai-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.hpn-ai-card,
.hpn-mp-card {
    display: flex;
    flex-direction: column;
    padding: 22px 20px;
    border-radius: var(--hpn-radius-l);
    border: 1px solid var(--hpn-line);
    box-shadow: var(--hpn-shadow);
}

/* 左侧：海蓝实色底，文字全部反白 */
.hpn-ai-card {
    background: linear-gradient(135deg, #1e8fd8 0%, #0d6aa8 100%);
    border-color: rgba(255, 255, 255, .18);
}

.hpn-ai-card .hpn-title {
    color: #ffffff;
}

.hpn-ai-card .hpn-desc {
    color: rgba(255, 255, 255, .86);
}

.hpn-mp-card {
    background: var(--hpn-surface);
}

.hpn-ai-questions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.hpn-ai-question {
    display: inline-block;
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-size: 13px;
    color: #ffffff;
}

.hpn-ai-question:hover {
    background: rgba(255, 255, 255, .28);
    border-color: rgba(255, 255, 255, .66);
    color: #ffffff;
}

/* 按钮沉底，左右两张卡等高时底部对齐 */
.hpn-ai-btn {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    height: 42px;
    margin-top: auto;
    padding: 0 22px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--hpn-blue-deep);
    font-size: 14.5px;
    font-weight: 700;
}

.hpn-ai-btn:hover {
    background: rgba(255, 255, 255, .88);
}

/* 小程序 */
.hpn-mp-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--hpn-blue);
}

.hpn-mp-title {
    margin-top: 6px;
    font-size: 17px;
}

.hpn-mp-desc {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--hpn-muted);
    line-height: 1.65;
}

/* 右侧卡内部撑满，保证与左侧海坛AI 卡等高时底部不空一截 */
.hpn-mp-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    flex: 1 1 auto;
}

/* 边距收拢：二维码区域不再套一圈大留白 */
.hpn-mp-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px;
    border: 1px dashed var(--hpn-line);
    border-radius: var(--hpn-radius-m);
    background: var(--hpn-surface-soft);
    transition: box-shadow .2s ease, border-color .2s ease;
}

.hpn-mp-qr.is-hint {
    border-color: var(--hpn-blue);
    box-shadow: 0 0 0 3px rgba(22, 132, 216, .15);
}

.hpn-mp-qr-img {
    width: 148px;
    height: 148px;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
}

.hpn-mp-qr-cap {
    font-size: 12px;
    color: var(--hpn-muted);
    text-align: center;
}

.hpn-mp-qr-empty-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--hpn-ink);
}

.hpn-mp-qr-empty-note {
    font-size: 12px;
    color: var(--hpn-muted);
    text-align: center;
    line-height: 1.6;
}

.hpn-mp-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hpn-mp-name {
    font-size: 13.5px;
    color: var(--hpn-text);
}

.hpn-mp-name b {
    color: var(--hpn-ink);
}

/*
 * 小程序操作条：从「细边框幽灵按钮」升级为**实底醒目操作条**（任务书 §4）。
 * 这是这一屏唯一的行动点，要一眼看到。
 */
.hpn-mp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 10px 20px;
    border: 0;
    border-radius: 12px;
    background: var(--hpn-blue);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.35;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 6px 18px rgba(22, 132, 216, .26);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.hpn-mp-btn:hover {
    background: var(--hpn-blue-deep);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(22, 132, 216, .32);
}

.hpn-mp-btn-icon {
    font-size: 16px;
    line-height: 1;
}

.hpn-mp-hint {
    font-size: 12.5px;
    color: var(--hpn-blue-deep);
    line-height: 1.6;
}

.hpn-mp-note {
    font-size: 11.5px;
    color: var(--hpn-muted);
    line-height: 1.6;
}

/* ------------------------------------------------------------ 11. 响应式 */

/* ==========================================================================
 * 移动端专项（<640px）
 *
 * 手机屏幕窄、竖向空间贵。以下三条只在手机上生效，桌面端保持原有版式：
 *   ① 「认识平潭」4 张专题卡 → 横滑画廊（原来单列竖排要占 3~4 屏）
 *   ② 「平潭最新内容」→ 左文右小图紧凑列表，只展示 4 篇（原来 6 张大海报要 3 屏）
 *   ③ 「旅行必备」→ 三组收成药丸 Tab（原来三张卡竖排要占三段高度）
 * ========================================================================== */
@media (max-width: 639px) {
    /* ① 认识平潭：横滑画廊，露出下一张边缘提示可滑（复用「去平潭怎么玩」的机制） */
    .hpn-know-topics {
        grid-auto-flow: column;
        grid-auto-columns: 75%;
        grid-template-columns: none;
        gap: 12px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }

    .hpn-know-card {
        scroll-snap-align: start;
    }

    /* ② 最新内容：左文右小图列表 */
    .hpn-posts {
        gap: 0;
    }

    /* 手机只留 4 篇；桌面端仍是 6 篇（DOM 里 6 篇都在，搜索引擎照常读到） */
    .hpn-post:nth-child(n+5) {
        display: none;
    }

    .hpn-post-link {
        flex-direction: row-reverse;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--hpn-line-soft);
        border-radius: 0;
        box-shadow: none;
    }

    .hpn-post-link:hover {
        transform: none;
        border-color: var(--hpn-line-soft);
        box-shadow: none;
    }

    .hpn-post-cover {
        flex: 0 0 auto;
        width: 90px;
        height: 60px;
        aspect-ratio: auto;
        border-radius: 6px;
    }

    .hpn-post-body {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
        gap: 5px;
    }

    .hpn-post-title {
        font-size: 14.5px;
        -webkit-line-clamp: 2;
    }

    /* 列表形态下按钮不需要留投影的余量 */
    .hpn-posts-more {
        margin-top: 20px;
    }

    /* ③ 旅行必备：移动端才出现药丸 Tab */
    .hpn-life-tabs .hpn-tab-nav {
        display: flex;
    }
}

/* 小屏（<360px）：金刚区降到 3 列，避免 4 列时标题被挤成竖排 */
@media (max-width: 359px) {
    .hpn-tools-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hpn-know-entries {
        grid-template-columns: minmax(0, 1fr);
    }

    .hpn-container {
        padding: 0 12px;
    }

    .hpn-tool-title {
        font-size: 13px;
    }
}

/* 平板及以上 */
@media (min-width: 640px) {
    .hpn-hero {
        padding: 40px 0 40px;
    }

    .hpn-hero-title-main {
        font-size: 42px;
    }

    .hpn-hero-title-sub {
        font-size: 18px;
    }

    /* 屏幕够宽了：快捷词换行铺开，不再需要横向滑动与两侧渐隐 */
    .hpn-quick {
        flex-wrap: wrap;
        overflow-x: visible;
        padding: 2px 0;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .hpn-today {
        margin-top: 25px;
    }

    .hpn-today-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .hpn-tools-grid {
        gap: 10px 4px;
    }

    .hpn-routes {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow-x: visible;
        padding-bottom: 0;
    }

    /*
     * 旅行必备：桌面端不需要 Tab —— 三组直接并排三列，Tab 导航隐藏。
     *
     * ⚠️ 面板这条必须 `!important`：移动端的 `:checked ~ …` 选择器带了
     * 3 个类 + 3 个伪类，特异性 (0,6,0)，普通规则（哪怕堆到 0,5,0）都压不住。
     * 用 !important 比堆一长串无意义选择器更好读，也让意图一目了然。
     */
    .hpn-life-tabs .hpn-tab-panel {
        display: block !important;
    }

    .hpn-life-tabs .hpn-tab-nav {
        display: none;
    }

    .hpn-life-tabs .hpn-tab-panels {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .hpn-know-topics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .hpn-know-entries {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hpn-posts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .hpn-mp-body {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }

    .hpn-mp-qr {
        flex: 0 0 auto;
        min-width: 190px;
    }

    .hpn-mp-side {
        flex: 1 1 auto;
    }
}

/* 宽屏：Tab 摆到「去平潭怎么玩？」标题行的右上角（任务书 §3） */
@media (min-width: 640px) {
    .hpn-play .hpn-container {
        position: relative;
    }

    /* 给右上角的 Tab 留位，避免标题与 Tab 重叠 */
    .hpn-play .hpn-head {
        padding-right: 330px;
    }

    .hpn-play .hpn-tab-nav {
        position: absolute;
        top: 0;
        right: 15px;
        margin-bottom: 0;
        justify-content: flex-end;
        max-width: 60%;
    }
}

/* 桌面 */
@media (min-width: 1024px) {
    .hpn-section {
        padding: 40px 0;
    }

    .hpn-today {
        padding-bottom: 44px;
    }

    .hpn-title {
        font-size: 23px;
    }

    /* 金刚区：单行 8 等分（任务书要求），此时每列约 147px，说明文字才放得下 */
    .hpn-tools-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 12px 6px;
    }

    .hpn-tool-desc {
        display: -webkit-box;
    }

    .hpn-ai-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: 16px;
    }

    .hpn-know-topics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hpn-know-entries {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .hpn-know-entry {
        flex-direction: column;
        gap: 6px;
    }
}

/* 深色模式：跟随主题的 style-for-dark，只调整本页自己的底色与文字 */
body.style-for-dark .hpn-page {
    --hpn-ink: #e8f1f8;
    --hpn-text: #b9ccda;
    --hpn-muted: #8ba4b6;
    --hpn-line: #24384a;
    --hpn-line-soft: #1e2f3f;
    --hpn-surface: #16232f;
    --hpn-surface-soft: #111b24;
    --hpn-tag-bg: #1d3242;
    --hpn-tag-ink: #8cc4ea;
    --hpn-blue-soft: #1d3242;
    --hpn-shadow: none;
    --hpn-shadow-hover: none;
    --hpn-shadow-float: none;
    --hpn-deep: #101d2b;
    --hpn-deep-2: #132534;
    background: var(--hpn-surface-soft);
}

/*
 * 首屏本来就是深色实景图 + 白字，深色模式下只需把蒙层压得更实一点
 * （深色主题的页面底色更暗，浅蒙层会显得发灰）。
 */
body.style-for-dark .hpn-hero {
    background-color: var(--hpn-deep);
    background-image:
        linear-gradient(180deg,
            rgba(9, 18, 30, .68) 0%,
            rgba(9, 18, 30, .54) 42%,
            rgba(9, 18, 30, .8) 78%,
            var(--hpn-deep) 100%),
        var(--hpn-hero-img);
}

/* 今日平潭浮岛：深色模式下换成深色毛玻璃，文字回到浅色 */
body.style-for-dark .hpn-today-panel {
    background: rgba(22, 35, 47, .94);
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
    body.style-for-dark .hpn-today-panel {
        background: rgba(22, 35, 47, .82);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
}

body.style-for-dark .hpn-today-card {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .1);
}

body.style-for-dark a.hpn-today-card:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(140, 196, 234, .4);
}

/* 金刚区：去掉卡片后只剩图标圆底与文字，深色模式下把圆底压暗、hover 底换成极淡白 */
body.style-for-dark .hpn-tool-link:hover {
    background: rgba(255, 255, 255, .05);
}

body.style-for-dark .hpn-tool:nth-child(1) .hpn-tool-icon,
body.style-for-dark .hpn-tool:nth-child(2) .hpn-tool-icon,
body.style-for-dark .hpn-tool:nth-child(3) .hpn-tool-icon,
body.style-for-dark .hpn-tool:nth-child(4) .hpn-tool-icon,
body.style-for-dark .hpn-tool:nth-child(5) .hpn-tool-icon,
body.style-for-dark .hpn-tool:nth-child(6) .hpn-tool-icon,
body.style-for-dark .hpn-tool:nth-child(7) .hpn-tool-icon,
body.style-for-dark .hpn-tool:nth-child(8) .hpn-tool-icon {
    background: linear-gradient(135deg, #1d3242 0%, #223a4d 100%);
    color: #8cc4ea;
}

body.style-for-dark .hpn-life-icon {
    background: linear-gradient(135deg, #1d3242 0%, #223a4d 100%);
    color: #8cc4ea;
}

body.style-for-dark .hpn-know-entry:hover,
body.style-for-dark .hpn-route-link:hover {
    border-color: #2d5474;
}

/* Tab：深色模式下未选中态用深底浅字 */
body.style-for-dark .hpn-tab {
    background: var(--hpn-surface);
    border-color: var(--hpn-line);
    color: var(--hpn-text);
}

body.style-for-dark .hpn-tab:hover {
    border-color: #2d5474;
    color: #8cc4ea;
}

body.style-for-dark .hpn-route-cover {
    background: linear-gradient(135deg, #1b2c3c 0%, #16232f 100%);
}

body.style-for-dark .hpn-route-cover-fallback {
    background: linear-gradient(135deg, #1d3242 0%, #16232f 100%);
}

/* 幽灵按钮：深色模式下边框与文字色用海岛蓝，hover 实底深一档避免纯白太刺 */
body.style-for-dark .hpn-more-link {
    border-color: #2d6b95;
    color: #8cc4ea;
}

body.style-for-dark .hpn-more-link:hover {
    background: #2d6b95;
    color: #ffffff;
}

/* 海坛AI 卡在深色模式下保留海蓝底，只压暗一档，仍与右侧白/深卡拉开层次 */
body.style-for-dark .hpn-ai-card {
    background: linear-gradient(135deg, #1668a3 0%, #0b4d7d 100%);
    border-color: rgba(255, 255, 255, .14);
}

body.style-for-dark .hpn-know-cover,
body.style-for-dark .hpn-post-cover {
    background: linear-gradient(135deg, #1b2c3c 0%, #16232f 100%);
}

body.style-for-dark .hpn-post-cover-empty {
    color: #46637a;
}