/* ============================================
   详情页样式 - detail.css
   ============================================
   作用：
   1. 负责详情页首屏、正文、地图、套餐、评论、推荐与页脚的整体视觉结构。
   2. 让详情页看起来像“进入一片海”，而不是普通景点详情模板。
   3. 配合详情页脚本承接弹层、反馈层和切换动画的视觉状态。
   阅读顺序：
   1. 页面骨架
   2. 首屏与正文
   3. 套餐、评论和地图
   4. 推荐区、页脚、弹层与响应式
*/

/* 文件导读：详情页是全站信息最密的一层，先抓区域分层，再看每个模块的细节样式。 */

/* ------- CSS @property 注册：让浏览器把自定义属性当作可动画类型处理 ------- */
/* --booking-copy-stick-top / --booking-copy-stick-height：
   右侧套餐侧栏 sticky 模式的顶部位置和高度。
   注册为 <length> 类型后，JS 可以通过修改这两个值来驱动侧栏的平滑过渡动画
   （CSS transition 在 @property 注册后才对自定义属性生效）。 */
@property --booking-copy-stick-top {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --booking-copy-stick-height {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

/* --booking-sticky-stack-gap：侧栏 sticky 状态下各区块之间的间距 */
@property --booking-sticky-stack-gap {
    syntax: "<length>";
    inherits: false;
    initial-value: 18px;
}

/* ------- 详情页全局 CSS 自定义属性：控制首屏、侧栏、过渡动画和响应式断点 ------- */
.detail-page {
    /* 安全边距：为左右深度计预留的空间（各 53px），防止内容被深度计遮挡 */
    --detail-safe-side: 106px;
    /* 侧栏 sticky 定位：距离顶部 94px（navbar 高度 + 间距），底部留 28px 避免贴底 */
    --detail-sidebar-stick-top: 94px;
    --detail-sidebar-stick-bottom: 28px;
    /* 套餐切换动画：各阶段位移/缩放参数，模拟"海流推移"的过渡效果。
       swap-* 系列变量控制向前/向后切换时卡片的不同运动轨迹。
       duration 640ms 是经过测试的最优时长：太快像突兀跳转，太慢拖沓。 */
    --detail-swap-duration: 640ms;
    --detail-swap-exit-x: -76px;         /* 当前卡片向左退出 */
    --detail-swap-enter-x: 86px;         /* 新卡片从右侧进入 */
    --detail-swap-back-enter-x: -68px;   /* 回退时新卡片从左侧进入 */
    --detail-swap-exit-y: 10px;          /* 退出时略微下沉，模拟水流下沉 */
    --detail-swap-enter-y: 8px;          /* 进入时略微上浮 */
    --detail-swap-back-enter-y: -6px;    /* 回退时微上移 */
    --detail-swap-enter-scale: 1.016;    /* 进入时微放大，制造"靠近感" */
    --detail-swap-back-scale: 1.01;      /* 回退时弱放大 */
    /* 首屏高度：clamp(420px, 34vw, 520px) 保证大屏不超过 520px，小屏不低于 420px */
    --detail-hero-height: clamp(420px, 34vw, 520px);
    /* 首屏图片微缩放 + 平移：制造缓慢的 Ken Burns 效果，让静态图片有"正在漂浮"的感觉 */
    --detail-hero-image-scale: 1.04;
    --detail-hero-pan-x: 2.6%;
    --detail-hero-pan-y: 1.5%;
    --detail-hero-pan-duration: 22s;
    --detail-hero-drift-duration: 18s;
    --detail-hero-overlay-opacity: 0.24;
    --detail-hero-atmosphere-opacity: 0.18;
    --detail-reading-section-lift: 0px;
    /* 给正文、相关推荐和页脚额外留出左右“安全边”。
       这样内容不会和两侧固定深度计、悬浮导览挤在一起。 */
    padding-top: 0;
    background: linear-gradient(180deg, #6f95aa 0%, #89abbd 32%, #adc6d4 100%);
}

.detail-page[data-detail-hero-profile="surge"] {
    --detail-hero-image-scale: 1.08;
    --detail-hero-pan-x: 4.2%;
    --detail-hero-pan-y: 1.8%;
    --detail-hero-pan-duration: 16s;
    --detail-hero-drift-duration: 14s;
    --detail-hero-overlay-opacity: 0.34;
    --detail-hero-atmosphere-opacity: 0.24;
}

.detail-page[data-detail-hero-profile="lagoon"] {
    --detail-hero-image-scale: 1.03;
    --detail-hero-pan-x: 1.4%;
    --detail-hero-pan-y: 0.8%;
    --detail-hero-pan-duration: 30s;
    --detail-hero-drift-duration: 24s;
    --detail-hero-overlay-opacity: 0.2;
    --detail-hero-atmosphere-opacity: 0.16;
}

.detail-page[data-detail-hero-profile="abyss"] {
    --detail-hero-height: clamp(440px, 36vw, 560px);
    --detail-hero-image-scale: 1.11;
    --detail-hero-pan-x: 1.8%;
    --detail-hero-pan-y: 3.2%;
    --detail-hero-pan-duration: 26s;
    --detail-hero-drift-duration: 20s;
    --detail-hero-overlay-opacity: 0.38;
    --detail-hero-atmosphere-opacity: 0.22;
}

.detail-page[data-detail-hero-profile="garden"] {
    --detail-hero-image-scale: 1.05;
    --detail-hero-pan-x: 2.1%;
    --detail-hero-pan-y: 1.2%;
    --detail-hero-pan-duration: 24s;
    --detail-hero-drift-duration: 21s;
    --detail-hero-overlay-opacity: 0.24;
    --detail-hero-atmosphere-opacity: 0.18;
}

.detail-page.detail-swap-flow-forward {
    --detail-swap-exit-x: -76px;
    --detail-swap-enter-x: 86px;
    --detail-swap-back-enter-x: -68px;
}

.detail-page.detail-swap-flow-backward {
    --detail-swap-exit-x: 76px;
    --detail-swap-enter-x: -86px;
    --detail-swap-back-enter-x: 68px;
}

/* 控制 html.has-overlay-lock, 的布局、视觉和状态表现 */
html.has-overlay-lock,
body.has-overlay-lock {
    overflow: hidden;
}

/* 控制 .detail-page.detail-swap-active 的布局、视觉和状态表现 */
.detail-page.detail-swap-active {
    overflow-x: hidden;
    --ocean-cover-opacity: 0.16;
}

/* 控制 .detail-page.detail-swap-active .page-stage 的布局、视觉和状态表现 */
.detail-page.detail-swap-active .page-stage {
    will-change: transform, opacity, filter;
    transform-origin: 50% 42%;
}

/* 控制 .detail-page.detail-swap-enter .page-stage, 的布局、视觉和状态表现 */
.detail-page.detail-swap-enter .page-stage,
.detail-page.detail-swap-back-enter .page-stage {
    pointer-events: none;
}

/* 控制 .detail-page.detail-swap-exit .page-stage 的布局、视觉和状态表现 */
.detail-page.detail-swap-exit .page-stage {
    animation: detailSwapDriftOut var(--detail-swap-duration) cubic-bezier(0.2, 0.76, 0.22, 1) both;
}

/* 控制 .detail-page.detail-swap-enter .page-stage 的布局、视觉和状态表现 */
.detail-page.detail-swap-enter .page-stage {
    animation: detailSwapGlideIn var(--detail-swap-duration) cubic-bezier(0.16, 0.8, 0.2, 1) both;
}

/* 控制 .detail-page.detail-swap-back-enter .page-stage 的布局、视觉和状态表现 */
.detail-page.detail-swap-back-enter .page-stage {
    animation: detailSwapReturnIn var(--detail-swap-duration) cubic-bezier(0.16, 0.8, 0.2, 1) both;
}

/* 定义 detailSwapDriftOut 动画关键帧 */
@keyframes detailSwapDriftOut {
/* 控制动画在 0% 阶段的状态 */
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
/* 控制动画在 44% 阶段的状态 */
    44% {
        opacity: 0.66;
        transform: translate3d(calc(var(--detail-swap-exit-x) * 0.52), calc(var(--detail-swap-exit-y) * 0.5), 0) scale(0.992);
        filter: blur(2px);
    }
/* 控制动画在 100% 阶段的状态 */
    100% {
        opacity: 0;
        transform: translate3d(var(--detail-swap-exit-x), var(--detail-swap-exit-y), 0) scale(0.968);
        filter: blur(5px);
    }
}

/* 定义 detailSwapGlideIn 动画关键帧 */
@keyframes detailSwapGlideIn {
/* 控制动画在 0% 阶段的状态 */
    0% {
        opacity: 0;
        transform: translate3d(var(--detail-swap-enter-x), var(--detail-swap-enter-y), 0) scale(var(--detail-swap-enter-scale));
        filter: blur(5px);
    }
/* 控制动画在 56% 阶段的状态 */
    56% {
        opacity: 0.84;
        filter: blur(1px);
    }
/* 控制动画在 100% 阶段的状态 */
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

/* 定义 detailSwapReturnIn 动画关键帧 */
@keyframes detailSwapReturnIn {
/* 控制动画在 0% 阶段的状态 */
    0% {
        opacity: 0;
        transform: translate3d(var(--detail-swap-back-enter-x), var(--detail-swap-back-enter-y), 0) scale(var(--detail-swap-back-scale));
        filter: blur(5px);
    }
/* 控制动画在 54% 阶段的状态 */
    54% {
        opacity: 0.82;
        filter: blur(1px);
    }
/* 控制动画在 100% 阶段的状态 */
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

/* ============================================
   详情页英雄区
   ============================================ */

/* 控制 .detail-hero 的布局、视觉和状态表现 */
.detail-hero {
    position: relative;
    height: var(--detail-hero-height);
    overflow: hidden;
    overflow: clip;
    contain: paint;
    margin-bottom: var(--spacing-2xl);
}

/* 控制 .hero-image-wrapper 的布局、视觉和状态表现 */
.hero-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    overflow: clip;
    contain: paint;
    clip-path: inset(0);
}

.hero-image-motion {
    position: absolute;
    inset: -4%;
    will-change: transform;
    animation: detailHeroProfilePan var(--detail-hero-pan-duration) cubic-bezier(0.42, 0.08, 0.28, 0.98) infinite alternate;
}

.hero-atmosphere-layer {
    position: absolute;
    inset: -7%;
    pointer-events: none;
    opacity: var(--detail-hero-atmosphere-opacity);
    background:
        radial-gradient(circle at 18% 28%, rgba(210, 242, 255, 0.14), transparent 22%),
        radial-gradient(circle at 76% 34%, rgba(136, 214, 235, 0.08), transparent 26%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
    mix-blend-mode: screen;
    filter: blur(6px);
    animation: detailHeroAtmosphereDrift var(--detail-hero-drift-duration) ease-in-out infinite alternate;
}

/* .hero-image-wrapper::after 的后置装饰层 */
.hero-image-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    background:
        linear-gradient(180deg, rgba(217, 240, 251, 0) 0%, rgba(7, 31, 48, 0.18) 44%, rgba(4, 19, 31, 0.82) 100%);
    pointer-events: none;
}

/* 控制 .hero-image 的布局、视觉和状态表现 */
.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(var(--detail-hero-image-scale));
    animation: heroImageZoom 0.9s ease-out;
}

/* 定义 heroImageZoom 动画关键帧 */
@keyframes heroImageZoom {
/* 控制动画在 from 阶段的状态 */
    from {
        transform: scale(1.1);
        opacity: 0;
    }
/* 控制动画在 to 阶段的状态 */
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* 控制 .hero-overlay 的布局、视觉和状态表现 */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 50% 18%, rgba(220, 245, 255, 0.06), rgba(220, 245, 255, 0) 24%),
        linear-gradient(180deg, rgba(4, 19, 30, 0.02) 0%, rgba(7, 32, 49, 0.08) 26%, rgba(5, 24, 38, var(--detail-hero-overlay-opacity)) 72%, rgba(3, 16, 27, 0.72) 100%);
    animation: detailHeroOverlayBreath calc(var(--detail-hero-drift-duration) * 1.15) ease-in-out infinite alternate;
}

/* 控制 .detail-page.spot-mabul .detail-hero 的布局、视觉和状态表现 */
.detail-page.spot-mabul .detail-hero {
    height: clamp(430px, 36vw, 520px);
}

/* .detail-page.spot-mabul .hero-image-wrapper::after 的后置装饰层 */
.detail-page.spot-mabul .hero-image-wrapper::after {
    height: 42%;
    background:
        linear-gradient(180deg, rgba(217, 240, 251, 0) 0%, rgba(7, 31, 48, 0.16) 44%, rgba(4, 19, 31, 0.78) 100%);
}

/* 控制 .detail-page.spot-mabul .hero-image 的布局、视觉和状态表现 */
.detail-page.spot-mabul .hero-image {
    --hero-pan-x-start: -2.4%;
    --hero-pan-x-end: 2.4%;
    width: auto;
    min-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.03);
    animation: heroMabulPan 24s ease-in-out infinite alternate;
    will-change: transform;
}

.detail-page.spot-racha .hero-image {
    object-position: 50% 84%;
}

.detail-page:not(.spot-mabul)[data-detail-hero-profile="surge"] .hero-overlay {
    background:
        linear-gradient(180deg, rgba(5, 23, 37, 0.05) 0%, rgba(6, 31, 46, 0.12) 24%, rgba(5, 27, 43, 0.42) 100%),
        radial-gradient(circle at 22% 22%, rgba(220, 246, 255, 0.06), rgba(220, 246, 255, 0) 28%);
}

.detail-page:not(.spot-mabul)[data-detail-hero-profile="lagoon"] .hero-overlay {
    background:
        linear-gradient(180deg, rgba(11, 38, 54, 0.02) 0%, rgba(10, 48, 68, 0.08) 32%, rgba(6, 34, 50, 0.26) 100%),
        radial-gradient(circle at 54% 16%, rgba(236, 248, 253, 0.08), rgba(236, 248, 253, 0) 26%);
}

.detail-page:not(.spot-mabul)[data-detail-hero-profile="abyss"] .hero-overlay {
    background:
        linear-gradient(180deg, rgba(2, 14, 24, 0.14) 0%, rgba(3, 19, 33, 0.2) 24%, rgba(2, 14, 24, 0.48) 100%),
        radial-gradient(circle at 50% 12%, rgba(154, 206, 231, 0.06), rgba(154, 206, 231, 0) 22%);
}

.detail-page:not(.spot-mabul)[data-detail-hero-profile="garden"] .hero-overlay {
    background:
        linear-gradient(180deg, rgba(8, 31, 42, 0.04) 0%, rgba(6, 36, 47, 0.1) 30%, rgba(7, 27, 38, 0.3) 100%),
        radial-gradient(circle at 18% 20%, rgba(212, 244, 236, 0.06), rgba(212, 244, 236, 0) 26%);
}

.detail-page[data-detail-hero-profile="surge"] .hero-atmosphere-layer {
    background:
        radial-gradient(circle at 12% 26%, rgba(220, 245, 255, 0.24), transparent 22%),
        radial-gradient(circle at 78% 32%, rgba(116, 198, 233, 0.16), transparent 26%),
        linear-gradient(115deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.08) 44%, rgba(255, 255, 255, 0) 68%);
}

.detail-page[data-detail-hero-profile="lagoon"] .hero-atmosphere-layer {
    background:
        radial-gradient(circle at 28% 24%, rgba(239, 250, 255, 0.2), transparent 26%),
        radial-gradient(circle at 68% 40%, rgba(180, 230, 242, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
}

.detail-page[data-detail-hero-profile="abyss"] .hero-atmosphere-layer {
    background:
        radial-gradient(circle at 50% 18%, rgba(176, 214, 236, 0.14), transparent 18%),
        radial-gradient(circle at 50% 68%, rgba(29, 78, 106, 0.18), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
}

.detail-page[data-detail-hero-profile="garden"] .hero-atmosphere-layer {
    background:
        radial-gradient(circle at 22% 24%, rgba(215, 244, 236, 0.16), transparent 24%),
        radial-gradient(circle at 76% 34%, rgba(153, 223, 206, 0.12), transparent 28%),
        linear-gradient(132deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
}

/* 控制 .detail-page.spot-mabul .hero-overlay 的布局、视觉和状态表现 */
.detail-page.spot-mabul .hero-overlay {
    background:
        linear-gradient(180deg, rgba(5, 24, 38, 0.08) 0%, rgba(7, 31, 47, 0.1) 30%, rgba(7, 33, 49, 0.18) 58%, rgba(239, 246, 251, 0.02) 100%),
        radial-gradient(circle at 48% 18%, rgba(234, 244, 249, 0.05), rgba(234, 244, 249, 0) 24%);
}

/* 定义 heroMabulPan 动画关键帧 */
@keyframes heroMabulPan {
/* 控制动画在 0% 阶段的状态 */
    0% {
        transform: translate3d(var(--hero-pan-x-start, -2.4%), 0, 0) scale(1.04);
    }
/* 控制动画在 100% 阶段的状态 */
    100% {
        transform: translate3d(var(--hero-pan-x-end, 2.4%), 0, 0) scale(1.015);
    }
}

@keyframes detailHeroProfilePan {
    0% {
        transform: translate3d(calc(var(--detail-hero-pan-x) * -1), calc(var(--detail-hero-pan-y) * -0.65), 0);
    }

    100% {
        transform: translate3d(var(--detail-hero-pan-x), var(--detail-hero-pan-y), 0);
    }
}

@keyframes detailHeroAtmosphereDrift {
    0% {
        transform: translate3d(-2.4%, -1.4%, 0) scale(0.98);
    }

    100% {
        transform: translate3d(2.2%, 1.6%, 0) scale(1.02);
    }
}

@keyframes detailHeroOverlayBreath {
    0% {
        opacity: 0.86;
        filter: saturate(0.98);
    }

    100% {
        opacity: 0.94;
        filter: saturate(1.02);
    }
}

/* 控制 .hero-content 的布局、视觉和状态表现 */
.hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    padding: var(--spacing-2xl) calc(var(--spacing-lg) + var(--detail-safe-side));
    color: white;
    z-index: 10;
}

/* 控制 .detail-title 的布局、视觉和状态表现 */
.detail-title {
    font-size: 2.5rem;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.12em;
    margin-bottom: var(--spacing-md);
    color: rgba(245, 251, 255, 0.97);
    -webkit-text-fill-color: rgba(245, 251, 255, 0.97);
    text-shadow:
        0 16px 34px rgba(3, 14, 23, 0.24),
        0 4px 12px rgba(0, 0, 0, 0.34);
}

/* ============================================
   First Group Enhancement
   ============================================ */

/* 深海英雄区：顶部留白控制，为整体场景定下呼吸节奏。 */
.detail-hero {
    margin-bottom: clamp(22px, 4vw, 42px);
}

/* 准备就绪桥接容器：用多层径向渐变与毛玻璃制造舱体悬浮感，作为水下出发状态的视觉入口。 */
.detail-readiness-bridge {
    position: relative;
    z-index: 3;
    max-width: none;
    margin: clamp(24px, 3vw, 36px) 0 clamp(30px, 4vw, 46px);
    padding: 0 6px;
}

/* 准备就绪主卡片：Grid 三行两列布局（状态/面板/操作），深海渐变基底 + 毛玻璃，模拟水下观察窗的视觉层次。 */
.detail-readiness-card {
    --readiness-accent: rgba(139, 211, 230, 0.72);
    --readiness-glow: rgba(125, 207, 231, 0.14);
    --readiness-rim: rgba(190, 231, 242, 0.14);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.74fr);
    grid-template-areas:
        "status status"
        "panels profile"
        "actions actions";
    gap: 16px 18px;
    align-items: stretch;
    min-width: 0;
    padding: 22px clamp(18px, 2.8vw, 28px);
    border-radius: 26px;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 12%, var(--readiness-glow), transparent 34%),
        radial-gradient(circle at 88% 4%, rgba(236, 250, 254, 0.08), transparent 30%),
        linear-gradient(150deg, rgba(4, 19, 32, 0.91), rgba(7, 36, 55, 0.86) 48%, rgba(9, 59, 82, 0.74) 100%);
    border: 1px solid var(--readiness-rim);
    box-shadow:
        0 20px 42px rgba(2, 16, 27, 0.18),
        0 0 0 1px rgba(244, 251, 254, 0.05) inset,
        inset 0 1px 0 rgba(246, 252, 255, 0.1),
        inset 0 -34px 60px rgba(73, 137, 167, 0.1);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

/* 色调变体：ready（青绿偏亮） / check（标准蓝） / caution（暖沙色），分别对应不同的出发前状态。 */
.detail-readiness-card[data-readiness-tone="ready"] {
    --readiness-accent: rgba(137, 226, 221, 0.8);
    --readiness-glow: rgba(99, 210, 200, 0.26);
    --readiness-rim: rgba(176, 238, 232, 0.28);
}

.detail-readiness-card[data-readiness-tone="check"] {
    --readiness-accent: rgba(151, 206, 232, 0.82);
    --readiness-glow: rgba(112, 179, 219, 0.26);
    --readiness-rim: rgba(178, 226, 246, 0.26);
}

.detail-readiness-card[data-readiness-tone="caution"] {
    --readiness-accent: rgba(224, 204, 157, 0.82);
    --readiness-glow: rgba(206, 178, 117, 0.18);
    --readiness-rim: rgba(230, 214, 175, 0.24);
}

/* 伪装表面覆盖：横向光流 + 横纹扫描线，模拟透过海水观察时的光学折射纹理。 */
.detail-readiness-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(145, 211, 232, 0) 0%, rgba(145, 211, 232, 0.12) 38%, rgba(145, 211, 232, 0) 76%),
        repeating-linear-gradient(180deg, rgba(238, 250, 253, 0.08) 0 1px, transparent 1px 34px),
        linear-gradient(180deg, rgba(248, 253, 255, 0.08), rgba(248, 253, 255, 0) 48%);
    pointer-events: none;
    opacity: 0.74;
}

/* 底部发光边线：根据 readiness-accent 色彩强调当前警告等级，连接舱体与下方内容。 */
.detail-readiness-card::after {
    content: "";
    position: absolute;
    left: clamp(22px, 3vw, 34px);
    right: clamp(22px, 3vw, 34px);
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(141, 208, 232, 0), var(--readiness-accent), rgba(141, 208, 232, 0));
    pointer-events: none;
    opacity: 0.72;
}

/* 入场动画：卡片整体从模糊/裁切状切入，子元素交错显现，营造水下舱体逐步清晰的启动感。 */
.detail-readiness-card.is-settling {
    animation: detailReadinessSettle 880ms cubic-bezier(0.18, 0.78, 0.22, 1) both;
}

.detail-readiness-card.is-settling .detail-readiness-state,
.detail-readiness-card.is-settling .detail-readiness-kicker,
.detail-readiness-card.is-settling .detail-readiness-title,
.detail-readiness-card.is-settling .detail-readiness-copy,
.detail-readiness-card.is-settling .detail-readiness-chips,
.detail-readiness-card.is-settling .detail-readiness-panels,
.detail-readiness-card.is-settling .detail-readiness-profile,
.detail-readiness-card.is-settling .detail-readiness-actions {
    animation: detailReadinessReveal 760ms cubic-bezier(0.18, 0.78, 0.22, 1) both;
}

/* 动画延时阶梯：每个子元素依次延迟出场，制造序列化展开的呼吸节奏。 */
.detail-readiness-card.is-settling .detail-readiness-kicker {
    animation-delay: 60ms;
}

.detail-readiness-card.is-settling .detail-readiness-title,
.detail-readiness-card.is-settling .detail-readiness-copy {
    animation-delay: 110ms;
}

.detail-readiness-card.is-settling .detail-readiness-chips,
.detail-readiness-card.is-settling .detail-readiness-panels {
    animation-delay: 170ms;
}

.detail-readiness-card.is-settling .detail-readiness-profile,
.detail-readiness-card.is-settling .detail-readiness-actions {
    animation-delay: 240ms;
}

/* 子区域层级提升 / 独占 z-index，确保内容在装饰伪元素之上。 */
.detail-readiness-status,
.detail-readiness-panels,
.detail-readiness-profile,
.detail-readiness-cert-panel,
.detail-readiness-actions {
    position: relative;
    z-index: 1;
    min-width: 0;
}

/* 状态头区块：占据 status 网格区域，轻透背景 + 浅水蓝字色，传达当前潜点就绪情况。 */
.detail-readiness-status {
    grid-area: status;
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 4px 0;
}

/* 背光光晕：根据 readiness-accent 色值渲染柔焦圆形，加深水下环境的光源层次。 */
.detail-readiness-glow {
    position: absolute;
    left: -12px;
    top: 12px;
    width: 84px;
    height: 84px;
    border-radius: 999px;
    background: radial-gradient(circle, var(--readiness-accent), rgba(144, 219, 236, 0) 68%);
    opacity: 0.18;
    filter: blur(10px);
    pointer-events: none;
}

/* 状态胶囊：行内标签 + 圆点指示器，毛玻璃基底 + 下阴影，模拟仪表盘状态指示灯。 */
.detail-readiness-state {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(239, 250, 253, 0.13), rgba(116, 189, 216, 0.07)),
        rgba(244, 251, 253, 0.04);
    border: 1px solid rgba(190, 229, 241, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 20px rgba(2, 16, 26, 0.12);
    color: rgba(227, 245, 250, 0.9);
}

/* 状态指示圆点：根据 readiness-accent 自发光的小圆点，模拟水下仪表盘的 LED。 */
.detail-readiness-state-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--readiness-accent);
    box-shadow: 0 0 16px var(--readiness-accent);
}

/* 状态文本：等宽标签，不折行保持胶囊内干净排版。 */
.detail-readiness-state-label {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* 状态副文本：截断的补充说明，灰蓝调与主状态区分层次。 */
.detail-readiness-state-copy {
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
    color: rgba(198, 228, 238, 0.66);
}

/* 节目标题的前导标签：小字大写 + 宽间距，模拟航海日志的章节编号。 */
.detail-readiness-kicker {
    margin: 2px 0 0;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(190, 228, 240, 0.66);
}

/* 主标题：衬线字体，大号浅蓝白，带深阴影——模拟水下远处透光的文字效果。 */
.detail-readiness-title {
    margin: 0;
    max-width: 24ch;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.32rem, 2.2vw, 1.96rem);
    line-height: 1.36;
    color: rgba(241, 250, 253, 0.98);
    text-shadow: 0 16px 34px rgba(2, 14, 24, 0.34);
}

/* 描述正文：灰蓝通透手感，宽松行高适配长文本阅读。 */
.detail-readiness-copy {
    margin: 0;
    max-width: 58ch;
    font-size: 0.96rem;
    line-height: 1.9;
    color: rgba(207, 231, 240, 0.8);
}

/* 标签簇：弹性换行容器，承载多个胶囊标签，形成“技术指标仪表盘”。 */
.detail-readiness-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-top: 2px;
}

/* 标签胶囊：深色半透明基底 + 细边框，模拟水下仪器上的参数标签。 */
.detail-readiness-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    max-width: 100%;
    padding: 0 10px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(239, 250, 253, 0.12), rgba(116, 189, 216, 0.07)),
        rgba(244, 251, 253, 0.035);
    border: 1px solid rgba(180, 226, 240, 0.16);
    font-size: 0.73rem;
    line-height: 1.3;
    color: rgba(218, 240, 247, 0.78);
}

/* 信息面板区：占据 panels 网格区域，放置详细指标卡片组。 */
.detail-readiness-panels {
    grid-area: panels;
    display: grid;
    gap: 12px;
}

/* 面板卡片：毛玻璃嵌套卡片，左侧有竖条强调线，展示水下状态的具体参数。 */
.detail-readiness-panel {
    position: relative;
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 16px 18px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(245, 252, 254, 0.13), rgba(104, 178, 207, 0.07)),
        rgba(242, 250, 253, 0.04);
    border: 1px solid rgba(190, 229, 241, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 18px 28px rgba(2, 16, 26, 0.12);
}

/* 左侧强调竖线：用渐变透明度模拟水面折射的光条纹。 */
.detail-readiness-panel::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    bottom: 15px;
    width: 1px;
    background: linear-gradient(180deg, rgba(176, 235, 248, 0), var(--readiness-accent), rgba(176, 235, 248, 0));
    opacity: 0.5;
}

/* 面板 / 资料区共用标签：小字大写宽间距，保持航海仪表风格统一。 */
.detail-readiness-panel-label,
.detail-readiness-profile-label {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(186, 225, 238, 0.58);
}

/* 面板内粗体：强调关键数值，浅色高对比。 */
.detail-readiness-panel strong {
    font-size: 0.98rem;
    line-height: 1.48;
    color: rgba(242, 250, 253, 0.94);
}

/* 面板内段落：灰蓝辅助色，与强调文本形成层次。 */
.detail-readiness-panel p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.72;
    color: rgba(199, 228, 238, 0.7);
}

/* 潜者资料 / 认证面板：占据 profile 网格区域，单独容纳潜水员的级别、证书与个人调节信息。 */
.detail-readiness-profile,
.detail-readiness-cert-panel {
    grid-area: profile;
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 12%, rgba(223, 247, 253, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(245, 252, 254, 0.11), rgba(104, 178, 207, 0.05)),
        rgba(242, 250, 253, 0.035);
    border: 1px solid rgba(190, 229, 241, 0.15);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 18px 30px rgba(2, 16, 26, 0.1);
}

/* 资料网格：紧凑间距，存放多行键值对信息。 */
.detail-readiness-profile-grid {
    display: grid;
    gap: 10px;
}

/* 资料顶栏：flex 左右布局，标题与操作按钮同行。 */
.detail-readiness-profile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

/* 操作按钮统一样式：调整 / 保存 / 取消——毛玻璃胶囊，带悬停抬起效果。 */
.detail-readiness-adjust,
.detail-readiness-save,
.detail-readiness-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    min-width: 0;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(190, 229, 241, 0.18);
    background:
        linear-gradient(180deg, rgba(239, 250, 253, 0.12), rgba(116, 189, 216, 0.06)),
        rgba(244, 251, 253, 0.035);
    color: rgba(229, 246, 251, 0.86);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 10px 18px rgba(2, 16, 26, 0.1);
    font-size: 0.74rem;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        opacity 220ms ease;
}

/* 按钮交互态：悬停或聚焦时微抬起，边框变亮，模拟触控反馈。 */
.detail-readiness-adjust:hover,
.detail-readiness-save:hover,
.detail-readiness-cancel:hover,
.detail-readiness-adjust:focus-visible,
.detail-readiness-save:focus-visible,
.detail-readiness-cancel:focus-visible {
    transform: translate3d(0, -1px, 0);
    border-color: rgba(201, 241, 250, 0.3);
    outline: none;
}

/* 禁用态：降低透明度，取消悬停效果。 */
.detail-readiness-save:disabled {
    cursor: default;
    opacity: 0.42;
    transform: none;
}

/* 资料条目行：两列 Grid（标签 + 值），底部浅色分隔线，模拟航海日志的条目格式。 */
.detail-readiness-profile-item {
    display: grid;
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    min-width: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(186, 229, 242, 0.12);
}

.detail-readiness-profile-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/* 条目标签：灰蓝辅助色小字。 */
.detail-readiness-profile-item small {
    font-size: 0.72rem;
    color: rgba(184, 220, 232, 0.62);
}

/* 条目值：浅色高对比粗体，突出显示关键数据。 */
.detail-readiness-profile-item strong {
    min-width: 0;
    font-size: 0.9rem;
    line-height: 1.48;
    color: rgba(241, 250, 253, 0.92);
}

/* 认证说明文字：引导用户选择证书级别。 */
.detail-readiness-cert-intro {
    margin: 0;
    font-size: 0.83rem;
    line-height: 1.74;
    color: rgba(203, 232, 241, 0.76);
}

/* 选项组容器：纵向排列的标题 + 证书卡片网格。 */
.detail-readiness-choice-group {
    display: grid;
    gap: 8px;
}

/* 选项标签：小字大写宽间距，保持航海仪表风格。 */
.detail-readiness-choice-label {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(186, 225, 238, 0.58);
}

/* 证书卡片网格：两列布局，展示可选的潜水认证级别。 */
.detail-readiness-cert-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* 最近一次证书：单列布局，突出显示当前认证。 */
.detail-readiness-cert-grid-recent {
    grid-template-columns: minmax(0, 1fr);
}

/* 证书卡片：带入场动画的可点击项，左侧竖色条标记，模拟潜水证章。 */
.detail-readiness-cert {
    position: relative;
    display: grid;
    gap: 3px;
    min-width: 0;
    min-height: 52px;
    padding: 10px 12px 10px 17px;
    border-radius: 16px;
    border: 1px solid rgba(183, 228, 241, 0.11);
    background:
        linear-gradient(180deg, rgba(241, 251, 253, 0.07), rgba(102, 177, 207, 0.04)),
        rgba(244, 251, 253, 0.026);
    color: rgba(235, 248, 252, 0.9);
    text-align: left;
    cursor: pointer;
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    animation: detailReadinessLayerIn 620ms cubic-bezier(0.2, 0.74, 0.22, 1) forwards;
    animation-delay: var(--readiness-cert-delay, 0ms);
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;
}

/* 证书左侧竖色条：渐变透明度，区分不同认证层级。 */
.detail-readiness-cert::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 11px;
    bottom: 11px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(145, 215, 236, 0), rgba(145, 215, 236, 0.5), rgba(145, 215, 236, 0));
}

/* 证书文字不溢出容器。 */
.detail-readiness-cert span,
.detail-readiness-cert small {
    min-width: 0;
}

/* 证书名称：粗体加深。 */
.detail-readiness-cert span {
    font-size: 0.86rem;
    font-weight: 600;
}

/* 证书辅助信息：灰蓝小字。 */
.detail-readiness-cert small {
    font-size: 0.68rem;
    line-height: 1.36;
    color: rgba(190, 224, 235, 0.66);
}

/* 证书交互态：悬停/聚焦/选中时微抬升，边框和背景提亮，增加光晕效果。 */
.detail-readiness-cert:hover,
.detail-readiness-cert:focus-visible,
.detail-readiness-cert.is-current {
    transform: translate3d(0, -2px, 0);
    border-color: rgba(201, 241, 250, 0.24);
    background:
        linear-gradient(180deg, rgba(220, 248, 253, 0.12), rgba(75, 162, 197, 0.07)),
        rgba(19, 84, 116, 0.16);
    box-shadow:
        0 10px 20px rgba(2, 16, 26, 0.12),
        0 0 14px rgba(124, 210, 233, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    outline: none;
}

/* 编辑操作行：flex 换行放置多个操作按钮。 */
.detail-readiness-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-top: 2px;
}

/* 主要保存按钮：深海蓝渐变背景 + 浅蓝边框，区别于普通调节按钮。 */
.detail-readiness-save {
    color: #f3fbff;
    background:
        linear-gradient(135deg, rgba(31, 104, 142, 0.88), rgba(65, 147, 176, 0.68));
    border-color: rgba(205, 239, 248, 0.22);
}

/* 底部操作区：占据 actions 网格区域，顶部横线分隔，承载主要 CTA 按钮。 */
.detail-readiness-actions {
    grid-area: actions;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    align-self: stretch;
    min-width: 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(181, 226, 240, 0.14);
    border-left: 0;
}

/* 操作区顶部渐变分隔线：均匀过渡到两侧透明。 */
.detail-readiness-actions::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(176, 235, 248, 0), var(--readiness-accent), rgba(176, 235, 248, 0));
    opacity: 0.5;
    pointer-events: none;
}

/* 主要行动链接：深海蓝渐变按钮，外发光 + 内高光，模拟潜水舱门的启动按键。 */
.detail-readiness-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    min-width: 0;
    padding: 0 18px;
    border-radius: 18px;
    text-decoration: none;
    color: #f3fbff;
    -webkit-text-fill-color: #f3fbff;
    background:
        linear-gradient(135deg, rgba(31, 104, 142, 0.88), rgba(65, 147, 176, 0.68));
    border: 1px solid rgba(205, 239, 248, 0.2);
    box-shadow:
        0 16px 30px rgba(2, 17, 28, 0.24),
        0 0 18px rgba(121, 207, 232, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    white-space: nowrap;
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease,
        background 220ms ease;
}

.detail-readiness-link:visited,
.detail-readiness-link:hover,
.detail-readiness-link:focus-visible,
.detail-readiness-link:active {
    color: #f3fbff;
    -webkit-text-fill-color: #f3fbff;
}

.detail-readiness-link:hover,
.detail-readiness-link:focus-visible {
    transform: translate3d(0, -2px, 0);
    box-shadow:
        0 20px 36px rgba(10, 41, 60, 0.2),
        0 0 18px rgba(117, 184, 212, 0.12);
    text-decoration: none;
    outline: none;
}

.detail-readiness-link-secondary {
    color: rgba(224, 244, 250, 0.9);
    -webkit-text-fill-color: rgba(224, 244, 250, 0.9);
    background:
        linear-gradient(180deg, rgba(238, 250, 253, 0.12), rgba(116, 189, 216, 0.06)),
        rgba(244, 251, 253, 0.02);
    border-color: rgba(185, 229, 242, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 12px 24px rgba(2, 17, 28, 0.14);
}

.detail-readiness-link-secondary:visited,
.detail-readiness-link-secondary:hover,
.detail-readiness-link-secondary:focus-visible,
.detail-readiness-link-secondary:active {
    color: rgba(224, 244, 250, 0.9);
    -webkit-text-fill-color: rgba(224, 244, 250, 0.9);
}

@keyframes detailReadinessLayerIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
        filter: blur(7px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes detailReadinessSettle {
    0% {
        transform: translate3d(0, 4px, 0) scale(0.992);
        box-shadow:
            0 18px 42px rgba(2, 16, 27, 0.18),
            0 0 0 1px rgba(244, 251, 254, 0.06) inset,
            inset 0 1px 0 rgba(246, 252, 255, 0.1),
            inset 0 -34px 58px rgba(73, 137, 167, 0.1);
        filter: saturate(0.96) brightness(0.98);
    }

    44% {
        transform: translate3d(0, -2px, 0) scale(1.004);
        box-shadow:
            0 30px 68px rgba(2, 16, 27, 0.28),
            0 0 30px var(--readiness-glow),
            0 0 0 1px rgba(244, 251, 254, 0.1) inset,
            inset 0 1px 0 rgba(246, 252, 255, 0.16),
            inset 0 -48px 82px rgba(73, 137, 167, 0.16);
        filter: saturate(1.08) brightness(1.03);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: saturate(1) brightness(1);
    }
}

@keyframes detailReadinessReveal {
    0% {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

.content-wrapper {
    overflow: visible;
}

.content-wrapper::after {
    display: none;
}

.booking-sticky {
    --booking-zone-accent: rgba(145, 208, 230, 0.2);
    position: relative;
    isolation: isolate;
}

.booking-sticky::before {
    content: "";
    position: absolute;
    inset: 12px 12px auto;
    height: 110px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 18%, rgba(241, 249, 253, 0.54), transparent 34%),
        radial-gradient(circle at 82% 18%, var(--booking-zone-accent), transparent 28%);
    opacity: 0.74;
    pointer-events: none;
}

.booking-sticky::after {
    content: "";
    position: absolute;
    top: 104px;
    left: 17px;
    bottom: 20px;
    width: 1px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(112, 168, 193, 0), rgba(112, 168, 193, 0.5), rgba(112, 168, 193, 0.08), rgba(112, 168, 193, 0));
    box-shadow: 0 0 16px rgba(136, 196, 219, 0.14);
    opacity: 0.72;
    pointer-events: none;
}

.booking-sticky[data-reading-zone="overview"] {
    --booking-zone-accent: rgba(170, 223, 240, 0.18);
}

.booking-sticky[data-reading-zone="map"] {
    --booking-zone-accent: rgba(151, 220, 233, 0.26);
}

.booking-sticky[data-reading-zone="reviews"] {
    --booking-zone-accent: rgba(184, 232, 244, 0.32);
}

.booking-sticky[data-reading-zone="related"] {
    --booking-zone-accent: rgba(196, 226, 239, 0.24);
}

.price-badge,
.booking-match,
.booking-copy,
.booking-focus-panel,
.itinerary-list,
.booking-note {
    position: relative;
    z-index: 1;
}

.price-badge {
    overflow: hidden;
    border: 1px solid rgba(214, 239, 248, 0.18);
    background:
        radial-gradient(circle at 16% 18%, rgba(214, 241, 251, 0.22), transparent 28%),
        linear-gradient(135deg, rgba(10, 52, 79, 0.96), rgba(22, 85, 117, 0.88) 58%, rgba(14, 61, 92, 0.96));
}

.price-badge::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 42%);
    pointer-events: none;
}

.booking-match {
    padding-left: 8px;
}

.booking-match-chip,
.booking-match-link {
    background:
        linear-gradient(180deg, rgba(247, 252, 255, 0.9), rgba(230, 244, 250, 0.8)),
        rgba(255, 255, 255, 0.76);
    box-shadow:
        0 10px 18px rgba(20, 60, 84, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.booking-copy {
    background:
        linear-gradient(145deg, rgba(251, 254, 255, 0.86), rgba(228, 242, 248, 0.6)),
        rgba(255, 255, 255, 0.28);
    border-color: rgba(193, 220, 232, 0.54);
    box-shadow:
        0 18px 34px rgba(13, 43, 63, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.22) inset;
}

.booking-copy::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, var(--booking-zone-accent), rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 42%);
    opacity: 0.52;
    pointer-events: none;
}

.booking-sticky[data-reading-zone="map"] .booking-copy {
    border-color: rgba(177, 216, 229, 0.62);
}

.booking-sticky[data-reading-zone="reviews"] .booking-copy {
    box-shadow:
        0 20px 38px rgba(12, 41, 60, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.24) inset,
        0 0 24px rgba(175, 221, 236, 0.08);
}

.booking-focus-panel {
    border-color: rgba(176, 221, 238, 0.24);
    box-shadow:
        0 24px 44px rgba(4, 20, 34, 0.24),
        0 0 0 1px rgba(210, 236, 245, 0.08) inset,
        0 0 34px rgba(108, 182, 210, 0.08);
}

.booking-focus-panel::before {
    opacity: 0.94;
}

.booking-sticky[data-reading-zone="map"] .booking-focus-panel {
    border-color: rgba(184, 228, 240, 0.28);
    box-shadow:
        0 24px 46px rgba(4, 20, 34, 0.22),
        0 0 0 1px rgba(214, 240, 248, 0.1) inset,
        0 0 38px rgba(117, 196, 214, 0.14);
}

.booking-sticky[data-reading-zone="map"] .booking-focus-panel::after,
.booking-sticky[data-reading-zone="reviews"] .booking-focus-panel::after,
.booking-sticky[data-reading-zone="related"] .booking-focus-panel::after {
    opacity: 0.62;
    transform: translate3d(0, 0, 0) scale(1);
}

.booking-sticky[data-reading-zone="reviews"] .booking-focus-panel {
    box-shadow:
        0 28px 52px rgba(4, 20, 34, 0.28),
        0 0 0 1px rgba(218, 242, 248, 0.1) inset,
        0 0 42px rgba(164, 222, 238, 0.16);
}

.booking-sticky[data-reading-zone="related"] .booking-focus-panel {
    border-color: rgba(196, 232, 244, 0.26);
    box-shadow:
        0 30px 56px rgba(4, 20, 34, 0.26),
        0 0 0 1px rgba(217, 240, 248, 0.1) inset,
        0 0 44px rgba(164, 211, 228, 0.14);
}

.itinerary-list {
    position: relative;
    padding: 14px 6px 4px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(248, 252, 255, 0.34), rgba(226, 240, 247, 0.12)),
        rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(188, 216, 228, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 18px 34px rgba(15, 45, 66, 0.06);
}

.booking-note {
    background:
        linear-gradient(180deg, rgba(244, 251, 255, 0.88), rgba(225, 240, 248, 0.76)),
        rgba(255, 255, 255, 0.72);
    border-color: rgba(188, 215, 227, 0.74);
    box-shadow:
        0 16px 28px rgba(14, 51, 74, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.related-head {
    padding-bottom: 20px;
}

.related-head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(100%, 540px);
    height: 1px;
    background: linear-gradient(90deg, rgba(108, 166, 191, 0.42), rgba(108, 166, 191, 0));
    opacity: 0.7;
}

.related-closing-ledge {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 20px;
    align-items: start;
    padding: 22px 24px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(248, 252, 255, 0.68), rgba(226, 241, 248, 0.52)),
        rgba(255, 255, 255, 0.52);
    border: 1px solid rgba(182, 216, 229, 0.38);
    box-shadow:
        0 22px 44px rgba(18, 54, 78, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.related-closing-kicker {
    margin: 0;
    padding-top: 3px;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(86, 123, 144, 0.62);
}

.related-closing-copy {
    display: grid;
    gap: 8px;
}

.related-closing-title {
    margin: 0;
    font-size: clamp(1.04rem, 1.8vw, 1.28rem);
    line-height: 1.58;
    color: #17384f;
}

.related-closing-text {
    margin: 0;
    max-width: 68ch;
    font-size: 0.92rem;
    line-height: 1.8;
    color: rgba(77, 109, 127, 0.86);
}

.detail-footer {
    padding-top: 112px;
    margin-top: -14px;
}

.detail-footer-shell {
    gap: 32px;
}

.detail-footer-shell::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -34px;
    height: 1px;
    background: linear-gradient(90deg, rgba(173, 221, 238, 0), rgba(173, 221, 238, 0.38), rgba(173, 221, 238, 0));
    opacity: 0.82;
    pointer-events: none;
}

.detail-footer-echo {
    background:
        radial-gradient(circle at 14% 16%, rgba(161, 220, 238, 0.18), transparent 28%),
        linear-gradient(148deg, rgba(11, 39, 56, 0.9), rgba(8, 31, 46, 0.84));
    box-shadow:
        0 32px 64px rgba(3, 14, 24, 0.3),
        0 0 42px rgba(126, 193, 219, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.detail-footer-explore {
    position: relative;
    padding-top: 10px;
}

.detail-footer-explore::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(183, 217, 231, 0), rgba(183, 217, 231, 0.22), rgba(183, 217, 231, 0));
    opacity: 0.8;
}

.detail-footer-group,
.detail-footer-next-card {
    box-shadow:
        0 22px 40px rgba(3, 14, 24, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

@media (max-width: 1180px) {
    .detail-readiness-card {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 0.78fr);
        grid-template-areas:
            "status status"
            "panels profile"
            "actions actions";
    }
}

@media (max-width: 960px) {
    .detail-readiness-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "status"
            "panels"
            "profile"
            "actions";
        gap: 18px;
    }

    .booking-sticky::after {
        top: 92px;
        left: 15px;
    }

    .related-closing-ledge {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .detail-readiness-bridge {
        margin-top: 0;
        margin-bottom: 34px;
    }

    .detail-readiness-card {
        padding: 18px 18px 20px;
        border-radius: 26px;
    }

    .detail-readiness-title {
        max-width: none;
    }

    .detail-readiness-state {
        width: 100%;
        justify-content: flex-start;
    }

    .detail-readiness-state-copy {
        max-width: none;
    }

    .detail-readiness-panels {
        gap: 10px;
    }

    .detail-readiness-panel,
    .detail-readiness-profile,
    .detail-readiness-cert-panel {
        padding: 14px;
        border-radius: 20px;
    }

    .detail-readiness-cert-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .detail-readiness-profile-head,
    .detail-readiness-edit-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .detail-readiness-adjust,
    .detail-readiness-save,
    .detail-readiness-cancel {
        width: 100%;
    }

    .detail-readiness-actions {
        gap: 10px;
        flex-direction: column;
    }

    .detail-readiness-link {
        width: 100%;
        white-space: normal;
        text-align: center;
    }

    .booking-sticky::after {
        display: none;
    }

    .related-closing-ledge {
        padding: 18px;
        border-radius: 24px;
    }
}

/* 详情页标题拆成短单位后，先保持轻微模糊和下沉，再被海面光线慢慢照亮 */
.detail-title-unit {
    color: rgba(245, 251, 255, 0.97);
    -webkit-text-fill-color: rgba(245, 251, 255, 0.97);
    opacity: 0;
    filter: blur(16px);
    transform: translate3d(0, 10px, 0);
    will-change: opacity, transform, filter;
    transition:
        opacity 0.84s ease,
        transform 0.96s cubic-bezier(0.18, 0.82, 0.22, 1),
        filter 0.96s ease;
}

/* 控制 .detail-subtitle 的布局、视觉和状态表现 */
.detail-subtitle {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-lg);
    opacity: 0.95;
    color: rgba(231, 242, 249, 0.94);
    -webkit-text-fill-color: rgba(231, 242, 249, 0.94);
    text-shadow:
        0 12px 28px rgba(3, 14, 23, 0.18),
        0 2px 10px rgba(0, 0, 0, 0.24);
}

/* 详情页首屏副标题沿用 bootstrap spot 标记锁住浅色旁白，避免高对比度环境把它回收到系统黑字。 */
html[data-detail-spot-id] #spotTagline,
html[data-detail-spot-id] #spotTagline .detail-subtitle-line,
.detail-page #spotTagline,
.detail-page #spotTagline .detail-subtitle-line {
    color: rgba(231, 242, 249, 0.94);
    -webkit-text-fill-color: rgba(231, 242, 249, 0.94);
    forced-color-adjust: none;
}

/* 副标题作为整句旁白更轻地显形，避免和主标题一起抢第一眼 */
.detail-subtitle-line {
    display: block;
    color: rgba(231, 242, 249, 0.94);
    -webkit-text-fill-color: rgba(231, 242, 249, 0.94);
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(0, 8px, 0);
    will-change: opacity, transform, filter;
    transition:
        opacity 0.82s ease,
        transform 0.94s cubic-bezier(0.2, 0.78, 0.22, 1),
        filter 0.94s ease;
}

/* 标签作为第三层信息，在标题和副标题建立后再轻轻到位 */
.detail-tags {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(0, 14px, 0);
    transition:
        opacity 0.78s ease,
        transform 0.92s cubic-bezier(0.2, 0.78, 0.22, 1),
        filter 0.92s ease;
}

/* 首屏 醒来后，标题单位依次清晰、上浮，形成更安静的潜入式显现 */
.detail-hero.detail-hero-awakened .detail-title-unit {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: calc(180ms + var(--detail-unit-delay, 0ms));
    animation: detailHeroCopySettle 1.7s ease-out calc(960ms + var(--detail-unit-delay, 0ms)) 1 both;
}

/* 副标题在主标题站稳后再浮现，像水里晚半拍传来的旁白 */
.detail-hero.detail-hero-awakened .detail-subtitle-line {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 580ms;
}

/* 标签最后建立，帮助用户在第一眼情绪之后再读到难度、深度和季节 */
.detail-hero.detail-hero-awakened .detail-tags {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 760ms;
}

/* 标题完全显形后给一次很轻的停稳感，让字像在水里站住 */
@keyframes detailHeroCopySettle {
    0% {
        transform: translate3d(0, 0, 0);
    }

    42% {
        transform: translate3d(0, -2px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

/* ============================================
   标签与关键信息
   ============================================ */

/* 控制 .detail-tags 的布局、视觉和状态表现 */
.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

/* 控制 .tag 的布局、视觉和状态表现 */
.tag {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    white-space: nowrap;
}

/* 控制 .tag strong 的布局、视觉和状态表现 */
.tag strong {
    font-weight: 700;
}

/* ============================================
   正文内容区
   ============================================ */

/* 控制 .detail-content 的布局、视觉和状态表现 */
.detail-content {
    max-width: 1580px;
    margin: 0 auto;
    padding: 0 calc(var(--spacing-lg) + var(--detail-safe-side));
}

/* 控制 .content-wrapper 的布局、视觉和状态表现 */
.content-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.14fr) minmax(270px, 320px);
    align-items: start;
    gap: var(--spacing-2xl);
    padding: 28px 30px 34px;
    margin-bottom: var(--spacing-2xl);
    border-radius: 36px;
}

.content-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 14% 0%, rgba(251, 254, 255, 0.42), transparent 30%),
        linear-gradient(180deg, rgba(247, 251, 254, 0.56) 0%, rgba(240, 248, 252, 0.34) 48%, rgba(232, 243, 249, 0.18) 100%);
    border: 1px solid rgba(186, 217, 230, 0.3);
    box-shadow:
        0 24px 56px rgba(78, 123, 148, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
}

.content-wrapper > * {
    position: relative;
    z-index: 1;
}

.detail-reading-section {
    position: relative;
    isolation: isolate;
    --detail-reading-section-lift: 0px;
    --detail-reading-current-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --detail-reading-current-glow-opacity: 0.34;
    --detail-reading-current-glow-inset: -18px -12px -18px -26px;
    --detail-reading-current-glow-radius: 34px;
    transition:
        transform 720ms cubic-bezier(0.18, 0.78, 0.22, 1),
        filter 620ms ease,
        opacity 420ms ease,
        box-shadow 720ms cubic-bezier(0.18, 0.78, 0.22, 1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.detail-reading-section > * {
    position: relative;
    z-index: 1;
}

.detail-reading-section::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px -20px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(138, 199, 223, 0), rgba(138, 199, 223, 0.66), rgba(138, 199, 223, 0));
    opacity: 0;
    transform: scaleY(0.72);
    transform-origin: center;
    transition:
        opacity 420ms ease,
        transform 560ms cubic-bezier(0.18, 0.78, 0.22, 1),
        box-shadow 420ms ease;
}

.detail-reading-section::after {
    content: "";
    position: absolute;
    inset: var(--detail-reading-current-glow-inset);
    border-radius: var(--detail-reading-current-glow-radius);
    background:
        radial-gradient(circle at 12% 18%, rgba(214, 242, 250, 0.24), transparent 34%),
        linear-gradient(180deg, rgba(205, 236, 246, 0.08), rgba(97, 155, 184, 0.18) 52%, rgba(8, 34, 50, 0.02) 100%);
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.985);
    filter: blur(22px);
    transition:
        opacity 560ms ease,
        transform 760ms cubic-bezier(0.18, 0.78, 0.22, 1),
        filter 620ms ease;
    pointer-events: none;
    z-index: 0;
}

.detail-reading-section.is-reading-current {
    transform: translate3d(0, calc(var(--detail-reading-section-lift) * -1), 0);
    filter: saturate(1.03) brightness(1.01);
    box-shadow: var(--detail-reading-current-shadow);
}

.detail-reading-section.is-reading-current::before {
    opacity: 1;
    transform: scaleY(1);
    box-shadow: 0 0 18px rgba(143, 207, 228, 0.24);
}

.detail-reading-section.is-reading-current::after {
    opacity: var(--detail-reading-current-glow-opacity);
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.detail-reading-section.is-reading-current.is-reading-awakened::before {
    animation: detailReadingRailAwaken 860ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.detail-reading-section.is-reading-current.is-reading-awakened::after {
    animation: detailReadingGlowAwaken 860ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.intro-section.detail-reading-section {
    --detail-reading-section-lift: 8px;
    --detail-reading-current-shadow:
        0 28px 62px rgba(12, 39, 58, 0.14),
        0 0 0 1px rgba(175, 219, 234, 0.14);
    --detail-reading-current-glow-opacity: 0.42;
}

.detail-reading-section-map {
    --detail-reading-section-lift: 10px;
    --detail-reading-current-shadow:
        0 30px 68px rgba(10, 35, 51, 0.16),
        0 0 0 1px rgba(174, 220, 236, 0.16);
    --detail-reading-current-glow-opacity: 0.48;
    --detail-reading-current-glow-inset: -24px -18px -30px -30px;
    --detail-reading-current-glow-radius: 42px;
}

.detail-reading-section-reviews {
    --detail-reading-section-lift: 12px;
    --detail-reading-current-shadow:
        0 34px 74px rgba(7, 29, 44, 0.18),
        0 0 0 1px rgba(173, 219, 236, 0.16);
    --detail-reading-current-glow-opacity: 0.56;
    --detail-reading-current-glow-inset: -26px -20px -34px -32px;
    --detail-reading-current-glow-radius: 44px;
    margin-top: clamp(46px, 4.2vw, 72px);
}

.related-spots.detail-reading-section {
    --detail-reading-section-lift: 9px;
    --detail-reading-current-shadow:
        0 30px 66px rgba(11, 36, 52, 0.16),
        0 0 0 1px rgba(175, 220, 235, 0.14);
    --detail-reading-current-glow-opacity: 0.44;
}

@keyframes detailReadingRailAwaken {
    0% {
        opacity: 0;
        transform: scaleY(0.38);
        box-shadow: 0 0 0 rgba(143, 207, 228, 0);
    }

    58% {
        opacity: 1;
        transform: scaleY(1.18);
        box-shadow: 0 0 26px rgba(183, 230, 244, 0.34);
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
        box-shadow: 0 0 18px rgba(143, 207, 228, 0.24);
    }
}

@keyframes detailReadingGlowAwaken {
    0% {
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(0.94);
        filter: blur(24px);
    }

    60% {
        opacity: calc(var(--detail-reading-current-glow-opacity) + 0.12);
        transform: translate3d(0, -2px, 0) scale(1.02);
        filter: blur(6px);
    }

    100% {
        opacity: var(--detail-reading-current-glow-opacity);
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

/* ============================================
   潜点介绍
   ============================================ */

/* 控制 .intro-section 的布局、视觉和状态表现 */
.intro-section {
    grid-column: 1;
    display: grid;
    gap: 22px;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none;
    transition:
        opacity 720ms ease,
        transform 860ms cubic-bezier(0.18, 0.78, 0.22, 1),
        filter 620ms ease;
}

.intro-section:not(.is-shell-visible) {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    filter: blur(18px);
}

.intro-section.is-shell-visible:not(.is-visible) {
    opacity: 0.94;
    transform: translate3d(0, 14px, 0);
    filter: blur(8px) saturate(1.01) brightness(1);
}

.intro-section.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none;
}

.intro-section.detail-reading-section.is-reading-current.is-shell-visible:not(.is-visible) {
    opacity: 0.96;
    transform: translate3d(0, 10px, 0);
    filter: blur(6px) saturate(1.03) brightness(1.01);
}

/* 潜点介绍的章节头：
   先用一组更像“海域档案章节”的头部把用户接住，再往下进入四张档案卡。 */
.intro-section-head {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 28px 30px 0;
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    filter: blur(14px);
    transition:
        opacity 620ms ease,
        transform 760ms cubic-bezier(0.22, 0.72, 0.2, 1),
        filter 560ms ease;
}

.intro-section.is-shell-visible:not(.is-visible) .intro-section-head {
    opacity: 0.86;
    transform: translate3d(0, 10px, 0);
    filter: blur(8px);
}

.intro-section-head::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 0;
    width: 96px;
    height: 1px;
    background: linear-gradient(90deg, rgba(113, 170, 197, 0.68), rgba(113, 170, 197, 0));
    opacity: 0.72;
}

.intro-section-kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(87, 120, 142, 0.62);
}

.intro-section-title {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    font-weight: 600;
    line-height: 1.16;
    color: #14344c;
}

.intro-section-lead {
    max-width: 760px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.88;
    color: rgba(69, 98, 118, 0.8);
}

/* spotMapSection：
   “潜点位置”这一层是海域定位台的章节标题，语义上和“潜点介绍 / 用户评价”是同一层级。
   这里单独提深颜色和一点轻微阴影，避免在海雾背景上发灰看不清。 */
.detail-reading-section-map {
    display: grid;
    gap: 8px;
    margin-top: 2px;
    padding: 4px 0 2px;
    border-radius: 42px 42px 24px 24px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.24), transparent 30%),
        radial-gradient(circle at 82% 8%, rgba(186, 220, 233, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(248, 252, 255, 0.1) 0%, rgba(237, 245, 249, 0.05) 20%, rgba(173, 208, 223, 0.08) 42%, rgba(42, 91, 118, 0.12) 66%, rgba(9, 45, 67, 0.1) 84%, rgba(9, 45, 67, 0) 100%);
}

.spot-map-head {
    position: relative;
    display: grid;
    gap: 8px;
    max-width: none;
    padding: 4px 22px 10px 8px;
}

.spot-map-head::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    width: 132px;
    height: 1px;
    background: linear-gradient(90deg, rgba(79, 138, 165, 0.74), rgba(79, 138, 165, 0.2) 42%, rgba(79, 138, 165, 0));
    opacity: 0.74;
}

.spot-map-head::after {
    content: "";
    position: absolute;
    left: -48px;
    right: -72px;
    top: -38px;
    height: 220px;
    background:
        radial-gradient(ellipse at 24% 16%, rgba(255, 255, 255, 0.48), transparent 48%),
        radial-gradient(ellipse at 74% 18%, rgba(197, 232, 240, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(248, 252, 255, 0.24), rgba(236, 244, 248, 0.16) 34%, rgba(182, 214, 228, 0.1) 58%, rgba(17, 73, 102, 0.06) 82%, rgba(17, 73, 102, 0) 100%);
    filter: blur(22px);
    opacity: 0.88;
    pointer-events: none;
    z-index: -1;
}

.spot-map-kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(88, 123, 145, 0.64);
}

#spotMapSection {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(2.04rem, 3.1vw, 2.72rem);
    font-weight: 600;
    line-height: 1.12;
    color: #143852;
    text-shadow: 0 14px 30px rgba(10, 29, 43, 0.1);
    transition:
        transform 720ms cubic-bezier(0.18, 0.78, 0.22, 1),
        text-shadow 520ms ease,
        color 420ms ease;
}

.spot-map-lead {
    margin: 0;
    max-width: 900px;
    color: rgba(73, 104, 123, 0.8);
    line-height: 1.76;
}

/* 潜点介绍正文层：
   用档案卡代替普通段落堆叠，让“地理位置 / 生物 / 注意事项 / 天气”更像四段被安静打开的记录。 */
.intro-text {
    display: grid;
}

/* 档案卡网格：两列等宽布局，用于排列地理位置 / 生物 / 注意事项 / 天气四张记录卡。 */
.intro-archive-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* 档案卡片：浅色毛玻璃基底，带 3D 倾斜与模糊入场，模拟从水下浮出的档案卷宗。 */
.intro-archive-card {
    --intro-card-delay: calc(140ms + (var(--intro-card-order, 0) * 110ms));
    --intro-card-radius: 28px;
    --intro-card-shell-tilt: 6deg;
    --intro-card-shell-delay: 0ms;
    --intro-card-content-delay: 0ms;
    position: relative;
    display: grid;
    gap: 18px;
    padding: 24px 24px 22px;
    border-radius: var(--intro-card-radius);
    background:
        radial-gradient(circle at 15% 18%, rgba(141, 198, 220, 0.16), transparent 26%),
        linear-gradient(155deg, rgba(198, 217, 229, 0.84), rgba(180, 201, 214, 0.76));
    border: 1px solid rgba(122, 159, 179, 0.34);
    box-shadow:
        0 22px 42px rgba(13, 35, 52, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    opacity: 0;
    clip-path: inset(0 0 100% 0 round var(--intro-card-radius));
    transform: perspective(1600px) translate3d(0, 26px, 0) scale(0.985) rotateX(var(--intro-card-shell-tilt));
    transform-origin: center top;
    filter: blur(8px) saturate(0.96) brightness(0.98);
    transition:
        opacity 620ms ease,
        transform 860ms cubic-bezier(0.22, 0.72, 0.2, 1),
        filter 620ms ease,
        clip-path 860ms cubic-bezier(0.18, 0.78, 0.22, 1),
        box-shadow 320ms ease;
    transition-delay: var(--intro-card-shell-delay);
}

/* 卡片外骨骼可见态：清除所有入场效果，展现完全展开的档案内容。 */
.intro-archive-card.is-shell-visible {
    opacity: 1;
    clip-path: inset(0 0 0 0 round var(--intro-card-radius));
    transform: perspective(1600px) translate3d(0, 0, 0) scale(1) rotateX(0deg);
    filter: blur(0) saturate(1) brightness(1);
    box-shadow:
        0 24px 46px rgba(13, 35, 52, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

/* 顶层光泽覆盖：斜向渐变白色条纹，模拟光从水面折射到卡片表面的效果。 */
.intro-archive-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 36%, rgba(255, 255, 255, 0.08) 60%, transparent 82%);
    opacity: 0.18;
    transform: translate3d(0, 14px, 0);
    transition:
        opacity 620ms ease,
        transform 820ms cubic-bezier(0.22, 0.72, 0.2, 1);
    transition-delay: calc(var(--intro-card-shell-delay) + 120ms);
    pointer-events: none;
    z-index: 0;
}

.intro-archive-card.is-shell-visible::before {
    opacity: 0.46;
    transform: translate3d(0, 0, 0);
}

/* 内层覆盖蒙层：白色渐变模拟潮湿档案纸的质感，在可见态下逐渐消隐露出真实背景。 */
.intro-archive-card::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(246, 251, 253, 0.9), rgba(227, 240, 246, 0.62) 42%, rgba(215, 230, 238, 0.18) 72%, rgba(215, 230, 238, 0)),
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.42), transparent 46%);
    opacity: 0.92;
    clip-path: inset(0 0 0 0 round var(--intro-card-radius));
    transform-origin: center top;
    transform: translate3d(0, 0, 0) scaleY(1.02);
    filter: blur(0);
    transition:
        opacity 560ms ease,
        transform 820ms cubic-bezier(0.18, 0.78, 0.22, 1),
        clip-path 900ms cubic-bezier(0.18, 0.78, 0.22, 1),
        filter 560ms ease;
    transition-delay: calc(var(--intro-card-shell-delay) + 30ms);
    pointer-events: none;
    z-index: 0;
}

/* 蒙层消失：当卡片可见时，内层覆盖向上收缩并模糊淡出，揭示下方卡片正文。 */
.intro-archive-card.is-shell-visible::after {
    opacity: 0;
    clip-path: inset(0 0 100% 0 round var(--intro-card-radius));
    transform: translate3d(0, -20%, 0) scaleY(0.76);
    filter: blur(6px);
}

.intro-card-location,
.intro-card-weather {
    grid-column: 1 / -1;
}

.intro-card-head,
.intro-card-body {
    position: relative;
    z-index: 1;
}

/* 卡片头部：flex 水平排列序号与标题。 */
.intro-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 序号胶囊：带入场动画的圆形标签，灰蓝底色表示档案编号。 */
.intro-card-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: rgba(80, 114, 134, 0.72);
    background: rgba(221, 236, 243, 0.52);
    border: 1px solid rgba(150, 189, 206, 0.24);
    opacity: 0;
    clip-path: inset(0 0 100% 0 round 999px);
    transform: translate3d(0, 10px, 0);
    filter: blur(6px);
    transition:
        opacity 420ms ease,
        transform 620ms cubic-bezier(0.22, 0.72, 0.2, 1),
        filter 480ms ease,
        clip-path 620ms cubic-bezier(0.22, 0.72, 0.2, 1);
    transition-delay: calc(var(--intro-card-content-delay) + 0ms);
}

/* 卡片标题：深蓝色正文，从左侧滑入 + 模糊入场。 */
.intro-card-title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 600;
    color: #163b54;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(-8px, 12px, 0);
    filter: blur(8px);
    transition:
        opacity 520ms ease,
        transform 680ms cubic-bezier(0.22, 0.72, 0.2, 1),
        filter 500ms ease,
        clip-path 700ms cubic-bezier(0.22, 0.72, 0.2, 1);
    transition-delay: calc(var(--intro-card-content-delay) + 40ms);
}

/* 卡片正文容器：纵向排列段落与列表。 */
.intro-card-body {
    display: grid;
    gap: 14px;
}

/* 段落文字：灰蓝色正文，带入场动画。 */
.intro-card-paragraph {
    margin: 0;
    color: rgba(61, 90, 109, 0.88);
    font-size: 0.96rem;
    line-height: 1.9;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 12px, 0);
    filter: blur(8px);
    transition:
        opacity 560ms ease,
        transform 720ms cubic-bezier(0.22, 0.72, 0.2, 1),
        filter 520ms ease,
        clip-path 720ms cubic-bezier(0.22, 0.72, 0.2, 1);
    transition-delay: calc(var(--intro-card-content-delay) + 120ms + var(--intro-item-delay, 0ms));
}

/* 要点列表：无样式网格列表，用于呈现水下地形的注意事项。 */
.intro-bullet-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 要点列表项：图标列 + 文本列两列 Grid，带入场动画和悬停变深色效果。 */
.intro-bullet-item {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    color: rgba(59, 87, 107, 0.86);
    font-size: 0.94rem;
    line-height: 1.82;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 12px, 0);
    filter: blur(8px);
    transition:
        opacity 520ms ease,
        transform 680ms cubic-bezier(0.22, 0.72, 0.2, 1),
        filter 480ms ease,
        clip-path 680ms cubic-bezier(0.22, 0.72, 0.2, 1),
        color 220ms ease;
    transition-delay: calc(var(--intro-card-content-delay) + 170ms + var(--intro-item-delay, 0ms));
}

/* 列表项悬停：颜色加深，增强可交互感。 */
.intro-bullet-item:hover {
    color: #214a66;
}

/* 要点圆点指示器：增加外光晕，模拟水下荧光标记点。 */
.intro-bullet-dot {
    width: 8px;
    height: 8px;
    margin-top: 10px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 35%, rgba(247, 252, 255, 0.9), rgba(113, 171, 196, 0.9) 48%, rgba(73, 120, 145, 0.8) 100%);
    box-shadow:
        0 0 0 4px rgba(117, 174, 199, 0.08),
        0 0 14px rgba(119, 183, 208, 0.18);
}

/* 警示要点的圆点：配色偏灰蓝暗调，与普通要点区区分。 */
.intro-bullet-item-warning .intro-bullet-dot {
    background:
        radial-gradient(circle at 35% 35%, rgba(248, 252, 255, 0.86), rgba(133, 174, 196, 0.82) 48%, rgba(88, 124, 144, 0.82) 100%);
}

/* 天气网格：三列等宽，展示水温 / 能见度 / 流速等关键指标。 */
.intro-weather-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* 天气指标卡片：浅色毛玻璃基底 + 白色高光，带入场动画。 */
.intro-weather-card {
    display: grid;
    gap: 8px;
    padding: 16px 16px 15px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(243, 249, 252, 0.72), rgba(223, 238, 246, 0.58)),
        rgba(227, 239, 246, 0.62);
    border: 1px solid rgba(176, 208, 221, 0.2);
    box-shadow:
        0 14px 28px rgba(12, 31, 46, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.52);
    opacity: 0;
    clip-path: inset(0 0 100% 0 round 20px);
    transform: translate3d(0, 12px, 0);
    filter: blur(8px);
    transition:
        opacity 520ms ease,
        transform 700ms cubic-bezier(0.22, 0.72, 0.2, 1),
        filter 500ms ease,
        clip-path 720ms cubic-bezier(0.22, 0.72, 0.2, 1),
        box-shadow 240ms ease;
    transition-delay: calc(var(--intro-card-content-delay) + 150ms + var(--intro-item-delay, 0ms));
}

/* 天气卡片悬停：微微上抬，强化面板之间的可操作感。 */
.intro-weather-card:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow:
        0 18px 30px rgba(12, 31, 46, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

/* 天气指标标签：小字大写宽间距，模拟仪表盘的参数名称。 */
.intro-weather-label {
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(89, 120, 139, 0.7);
}

/* 天气指标数值：加粗深蓝色，突出显示关键水下数据。 */
.intro-weather-value {
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.35;
    color: #163952;
}

.intro-section.is-visible .intro-section-head {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

.intro-archive-card.is-content-visible .intro-card-index {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 999px);
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

.intro-archive-card.is-content-visible .intro-card-title,
.intro-archive-card.is-content-visible .intro-card-paragraph,
.intro-archive-card.is-content-visible .intro-bullet-item,
.intro-archive-card.is-content-visible .intro-weather-card {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

/* ============================================
   海域定位台
   ============================================ */

/* 控制 .map-container 的布局、视觉和状态表现 */
.map-container {
    --sea-map-core-bg: linear-gradient(180deg, rgba(8, 38, 58, 0.94), rgba(5, 26, 41, 0.96));
    --sea-map-tint: linear-gradient(165deg, rgba(6, 37, 56, 0.56), rgba(8, 52, 77, 0.42) 42%, rgba(2, 20, 32, 0.48) 100%);
    --sea-map-fog-top: rgba(210, 241, 250, 0.15);
    --sea-map-fog-mid: rgba(117, 178, 201, 0.07);
    --sea-map-fog-bottom: rgba(4, 17, 28, 0.28);
    --sea-map-glow: rgba(174, 229, 242, 0.24);
    --sea-map-route-soft: rgba(183, 229, 240, 0.24);
    --sea-map-route-main: rgba(235, 250, 255, 0.9);
    width: 100%;
    min-height: clamp(780px, 82vh, 900px);
    display: flex;
    align-items: stretch;
    justify-content: center;
    border-radius: 30px;
    overflow: hidden;
    box-shadow:
        0 28px 58px rgba(11, 34, 52, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    margin: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(112, 186, 219, 0.16), transparent 32%),
        radial-gradient(circle at 82% 14%, rgba(134, 213, 224, 0.12), transparent 30%),
        linear-gradient(160deg, rgba(8, 35, 54, 0.96), rgba(12, 58, 84, 0.92) 44%, rgba(9, 79, 109, 0.88) 100%);
    border: 1px solid rgba(147, 200, 220, 0.2);
    position: relative;
    transition:
        transform 780ms cubic-bezier(0.18, 0.78, 0.22, 1),
        box-shadow 620ms ease,
        filter 520ms ease;
}

.map-container::before {
    content: "";
    position: absolute;
    left: 64px;
    right: 64px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(209, 235, 244, 0), rgba(209, 235, 244, 0.58) 18%, rgba(209, 235, 244, 0.18) 50%, rgba(209, 235, 244, 0.58) 82%, rgba(209, 235, 244, 0));
    z-index: 2;
    pointer-events: none;
}

.map-container::after {
    content: "";
    position: absolute;
    left: 34px;
    right: 34px;
    top: 0;
    height: 92px;
    background: linear-gradient(180deg, rgba(219, 240, 247, 0.12), rgba(118, 178, 201, 0.12) 30%, rgba(9, 47, 69, 0.05) 72%, rgba(9, 47, 69, 0));
    filter: blur(16px);
    z-index: 1;
    pointer-events: none;
}

.detail-reading-section-map.is-reading-current #spotMapSection {
    transform: translate3d(0, -3px, 0);
    text-shadow: 0 16px 30px rgba(8, 25, 38, 0.12);
    color: #133a53;
}

.detail-reading-section-map.is-reading-current .spot-map-head {
    transform: translate3d(0, -1px, 0);
}

.detail-reading-section-map.is-reading-current .spot-map-kicker {
    color: rgba(84, 126, 151, 0.82);
}

.detail-reading-section-map.is-reading-current .spot-map-lead {
    color: rgba(63, 96, 116, 0.88);
}

.detail-reading-section-map.is-reading-current .map-container {
    transform: translate3d(0, -4px, 0);
    filter: saturate(1.03) brightness(1.01);
    box-shadow:
        0 36px 76px rgba(9, 31, 47, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* sea-atlas-shell：
   这一层是海域定位台的可调尺寸外壳。
   用户拖拽边缘时，只改它的宽高，里面的定位台内容继续按现有布局重排。 */
.sea-atlas-shell {
    --sea-atlas-shell-shift-x: 0px;
    position: relative;
    width: 100%;
    min-height: clamp(720px, 76vh, 840px);
    margin: 0 auto;
    flex: 0 1 auto;
    isolation: isolate;
    transform: translate3d(var(--sea-atlas-shell-shift-x), 0, 0);
    transition: transform 220ms ease;
}

.sea-atlas-shell::before {
    content: "";
    position: absolute;
    inset: -18px -18px -24px;
    border-radius: 38px;
    background:
        radial-gradient(circle at 18% 16%, rgba(154, 219, 234, 0.18), transparent 32%),
        radial-gradient(circle at 82% 14%, rgba(191, 232, 243, 0.14), transparent 28%),
        linear-gradient(180deg, rgba(214, 242, 249, 0.08), rgba(5, 24, 37, 0));
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.986);
    filter: blur(24px);
    transition:
        opacity 860ms ease,
        transform 1080ms cubic-bezier(0.18, 0.78, 0.22, 1),
        filter 820ms ease;
    pointer-events: none;
}

.sea-atlas-shell.is-atlas-awakening::before,
.sea-atlas-shell.is-atlas-awake::before {
    opacity: 0.92;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

/* sea-atlas-resize-layer：
   拖拽句柄层默认几乎隐身，只在 hover 或拖拽时稍微露出来。 */
.sea-atlas-resize-layer {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.yanqi-stage-debug .sea-atlas-resize-layer {
    display: block;
}

.sea-atlas-resize-handle {
    position: absolute;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    pointer-events: auto;
    touch-action: none;
    opacity: 0;
    transition: opacity 220ms ease, transform 220ms ease;
}

.sea-atlas-shell:hover .sea-atlas-resize-handle,
.sea-atlas-shell.is-resizing .sea-atlas-resize-handle {
    opacity: 1;
}

.sea-atlas-resize-handle::before {
    content: "";
    position: absolute;
    inset: 50%;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(209, 236, 248, 0.3), rgba(101, 156, 181, 0.18));
    box-shadow:
        0 0 0 1px rgba(185, 222, 239, 0.18),
        0 10px 22px rgba(6, 20, 32, 0.12);
}

.sea-atlas-resize-handle.is-east,
.sea-atlas-resize-handle.is-west {
    top: 32px;
    bottom: 32px;
    width: 18px;
}

.sea-atlas-resize-handle.is-east {
    right: 0;
    cursor: ew-resize;
}

.sea-atlas-resize-handle.is-west {
    left: 0;
    cursor: ew-resize;
}

.sea-atlas-resize-handle.is-east::before,
.sea-atlas-resize-handle.is-west::before {
    width: 4px;
    height: 76px;
}

.sea-atlas-resize-handle.is-south {
    left: 42px;
    right: 42px;
    bottom: 0;
    height: 18px;
    cursor: ns-resize;
}

.sea-atlas-resize-handle.is-south::before {
    width: 92px;
    height: 4px;
}

.sea-atlas-resize-handle.is-south-east,
.sea-atlas-resize-handle.is-south-west {
    width: 26px;
    height: 26px;
    bottom: 0;
}

.sea-atlas-resize-handle.is-south-east {
    right: 0;
    cursor: nwse-resize;
}

.sea-atlas-resize-handle.is-south-west {
    left: 0;
    cursor: nesw-resize;
}

.sea-atlas-resize-handle.is-south-east::before,
.sea-atlas-resize-handle.is-south-west::before {
    width: 14px;
    height: 14px;
}

.sea-atlas-shell.is-resizing {
    user-select: none;
    transition: none;
}

.detail-page.is-resizing-sea-atlas {
    cursor: default;
}

/* 控制 .sea-atlas 的布局、视觉和状态表现 */
.sea-atlas {
    position: relative;
    padding: 32px;
    min-height: 100%;
    height: 100%;
    color: rgba(238, 247, 252, 0.94);
    container-type: inline-size;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
    transition:
        opacity 780ms ease,
        transform 1080ms cubic-bezier(0.18, 0.78, 0.22, 1),
        filter 820ms ease;
}

.sea-atlas-shell:not(.is-atlas-awakening):not(.is-atlas-awake) .sea-atlas {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(0.986);
    filter: blur(18px) saturate(0.92);
}

/* .sea-atlas::before, 的前置装饰层 */
.sea-atlas::before,
.sea-atlas::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* .sea-atlas::before 的前置装饰层 */
.sea-atlas::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.06)),
        linear-gradient(120deg, rgba(255, 255, 255, 0.02), transparent 34%, rgba(255, 255, 255, 0.06) 52%, transparent 72%);
    mix-blend-mode: screen;
}

/* .sea-atlas::after 的后置装饰层 */
.sea-atlas::after {
    background:
        radial-gradient(circle at 50% 18%, rgba(165, 220, 233, 0.15), transparent 28%),
        radial-gradient(circle at 50% 92%, rgba(2, 18, 31, 0.28), transparent 42%);
}

/* 控制 .sea-atlas-head 的布局、视觉和状态表现 */
.sea-atlas-head {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 22px;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none;
    transition:
        opacity 620ms ease,
        transform 860ms cubic-bezier(0.18, 0.78, 0.22, 1),
        filter 720ms ease;
}

.sea-atlas-shell:not(.is-atlas-awakening):not(.is-atlas-awake) .sea-atlas-head {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    filter: blur(16px);
}

.sea-atlas-shell.is-atlas-awakening .sea-atlas-head,
.sea-atlas-shell.is-atlas-awake .sea-atlas-head {
    transition-delay: 140ms;
}

/* 控制 .sea-atlas-kicker 的布局、视觉和状态表现 */
.sea-atlas-kicker {
    margin: 0;
    font-size: 0.74rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(194, 228, 239, 0.72);
}

/* 控制 .sea-atlas-lead 的布局、视觉和状态表现 */
.sea-atlas-lead {
    margin: 0;
    max-width: 760px;
    color: rgba(236, 246, 251, 0.9);
    line-height: 1.8;
}

/* 控制 .sea-atlas-tabs 的布局、视觉和状态表现 */
.sea-atlas-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sea-atlas-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sea-atlas-kicker,
.sea-atlas-lead,
.sea-atlas-controls {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none;
    transition:
        opacity 520ms ease,
        transform 760ms cubic-bezier(0.18, 0.78, 0.22, 1),
        filter 620ms ease;
}

.sea-atlas-shell:not(.is-atlas-awakening):not(.is-atlas-awake) .sea-atlas-kicker,
.sea-atlas-shell:not(.is-atlas-awakening):not(.is-atlas-awake) .sea-atlas-lead,
.sea-atlas-shell:not(.is-atlas-awakening):not(.is-atlas-awake) .sea-atlas-controls {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    filter: blur(12px);
}

.sea-atlas-shell.is-atlas-awakening .sea-atlas-kicker,
.sea-atlas-shell.is-atlas-awake .sea-atlas-kicker {
    transition-delay: 200ms;
}

.sea-atlas-shell.is-atlas-awakening .sea-atlas-lead,
.sea-atlas-shell.is-atlas-awake .sea-atlas-lead {
    transition-delay: 260ms;
}

.sea-atlas-shell.is-atlas-awakening .sea-atlas-controls,
.sea-atlas-shell.is-atlas-awake .sea-atlas-controls {
    transition-delay: 340ms;
}

.sea-atlas-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.sea-atlas-reset-view,
.sea-atlas-open-map,
.sea-atlas-map-fallback-action {
    appearance: none;
    border: 1px solid rgba(184, 225, 236, 0.18);
    background:
        linear-gradient(180deg, rgba(242, 251, 254, 0.11), rgba(221, 243, 249, 0.04)),
        rgba(6, 27, 41, 0.44);
    color: rgba(235, 248, 252, 0.88);
    border-radius: 999px;
    padding: 10px 16px;
    font: inherit;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    cursor: pointer;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition:
        border-color 220ms ease,
        background 220ms ease,
        transform 220ms ease,
        color 220ms ease;
}

.sea-atlas-reset-view:hover,
.sea-atlas-reset-view:focus-visible,
.sea-atlas-open-map:hover,
.sea-atlas-open-map:focus-visible,
.sea-atlas-map-fallback-action:hover,
.sea-atlas-map-fallback-action:focus-visible {
    border-color: rgba(200, 236, 245, 0.3);
    background:
        linear-gradient(180deg, rgba(246, 253, 255, 0.16), rgba(227, 246, 251, 0.06)),
        rgba(8, 34, 51, 0.56);
    color: rgba(246, 252, 255, 0.96);
    transform: translateY(-1px);
}

.sea-atlas-reset-view[disabled],
.sea-atlas-open-map[disabled] {
    opacity: 0.42;
    cursor: default;
    transform: none;
    pointer-events: none;
}

/* 控制 .sea-atlas-tab 的布局、视觉和状态表现 */
.sea-atlas-tab {
    all: unset;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(244, 251, 255, 0.08);
    border: 1px solid rgba(188, 224, 235, 0.18);
    color: rgba(243, 249, 252, 0.9);
    transition: transform 260ms ease, color 260ms ease, background-color 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

/* .sea-atlas-tab:hover, 鼠标移入时的样式 */
.sea-atlas-tab:hover,
.sea-atlas-tab:focus-visible {
    transform: translateY(-1px);
    color: rgba(245, 251, 255, 0.92);
    background: rgba(244, 251, 255, 0.12);
    box-shadow: 0 10px 22px rgba(2, 18, 31, 0.16);
    outline: none;
}

/* .sea-atlas-tab.is-active 在对应状态下的样式 */
.sea-atlas-tab.is-active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(115, 190, 219, 0.18), rgba(116, 212, 227, 0.14));
    border-color: rgba(177, 225, 238, 0.4);
    box-shadow:
        0 12px 26px rgba(2, 18, 31, 0.18),
        0 0 0 1px rgba(180, 225, 236, 0.16);
}

/* 控制 .sea-atlas-stage 的布局、视觉和状态表现 */
.sea-atlas-stage {
    position: relative;
    z-index: 1;
    min-height: clamp(720px, 74vh, 820px);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none;
    transition:
        opacity 660ms ease,
        transform 900ms cubic-bezier(0.18, 0.78, 0.22, 1),
        filter 760ms ease;
}

.sea-atlas-shell:not(.is-atlas-awakening):not(.is-atlas-awake) .sea-atlas-stage {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    filter: blur(18px);
}

.sea-atlas-shell.is-atlas-awakening .sea-atlas-stage,
.sea-atlas-shell.is-atlas-awake .sea-atlas-stage {
    transition-delay: 260ms;
}

/* 控制 .sea-atlas-panel 的布局、视觉和状态表现 */
.sea-atlas-panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.68fr) minmax(300px, 0.62fr);
    align-items: stretch;
    gap: 28px;
    opacity: 0;
    transform: translateY(22px) scale(0.986);
    filter: blur(12px);
    pointer-events: none;
    transition: opacity 520ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1), filter 520ms ease;
}

.sea-atlas-map-panel {
    align-items: start;
}

/* .sea-atlas-panel.is-active 在对应状态下的样式 */
.sea-atlas-panel.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    pointer-events: auto;
}

@container (max-width: 920px) {
    .sea-atlas-stage {
        min-height: 0;
    }

    .sea-atlas-panel {
        position: relative;
        inset: auto;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 18px;
        margin-bottom: 18px;
    }

    .sea-atlas-panel:not(.is-active) {
        display: none;
    }

    .sea-atlas-visual {
        min-height: clamp(480px, 54vh, 540px);
    }

    .sea-atlas-dossier {
        min-height: auto;
        padding: 24px 22px 22px;
    }
}

/* 控制 .sea-atlas-visual, 的布局、视觉和状态表现 */
.sea-atlas-visual,
.sea-atlas-dossier {
    position: relative;
    border-radius: 26px;
    background:
        linear-gradient(150deg, rgba(248, 252, 255, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(5, 32, 50, 0.34);
    border: 1px solid rgba(186, 223, 235, 0.16);
    box-shadow:
        0 20px 40px rgba(4, 18, 31, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none;
    transition:
        opacity 660ms ease,
        transform 860ms cubic-bezier(0.18, 0.78, 0.22, 1),
        filter 760ms ease,
        background 280ms ease,
        border-color 280ms ease,
        box-shadow 280ms ease;
}

.sea-atlas-shell:not(.is-atlas-awakening):not(.is-atlas-awake) .sea-atlas-panel.is-active .sea-atlas-visual,
.sea-atlas-shell:not(.is-atlas-awakening):not(.is-atlas-awake) .sea-atlas-panel.is-active .sea-atlas-dossier {
    opacity: 0;
    transform: translate3d(0, 30px, 0) scale(0.986);
    filter: blur(18px);
}

.sea-atlas-shell.is-atlas-awakening .sea-atlas-panel.is-active .sea-atlas-visual,
.sea-atlas-shell.is-atlas-awake .sea-atlas-panel.is-active .sea-atlas-visual {
    transition-delay: 360ms;
}

.sea-atlas-shell.is-atlas-awakening .sea-atlas-panel.is-active .sea-atlas-dossier,
.sea-atlas-shell.is-atlas-awake .sea-atlas-panel.is-active .sea-atlas-dossier {
    transition-delay: 460ms;
}

.sea-atlas-shell.is-atlas-awakening .sea-atlas-panel[data-sea-panel="underwater"].is-active .sea-atlas-visual,
.sea-atlas-shell.is-atlas-awake .sea-atlas-panel[data-sea-panel="underwater"].is-active .sea-atlas-visual {
    transition-delay: 60ms;
}

.sea-atlas-shell.is-atlas-awakening .sea-atlas-panel[data-sea-panel="underwater"].is-active .sea-atlas-dossier,
.sea-atlas-shell.is-atlas-awake .sea-atlas-panel[data-sea-panel="underwater"].is-active .sea-atlas-dossier {
    transition-delay: 120ms;
}

/* 控制 .sea-atlas-visual 的布局、视觉和状态表现 */
.sea-atlas-visual {
    min-height: 580px;
    padding: 28px 20px;
    overflow: hidden;
}

.sea-atlas-visual-map {
    display: grid;
}

.sea-atlas-visual-map > * {
    grid-area: 1 / 1;
}

.sea-atlas-visual-view {
    position: relative;
    min-height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 10px, 0);
    transition:
        opacity 360ms ease,
        transform 420ms cubic-bezier(0.2, 0.78, 0.22, 1),
        visibility 0s linear 420ms;
}

.sea-atlas-visual-view.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
}

.sea-atlas-map-slot,
.sea-route-board-slot {
    width: 100%;
    min-height: 0;
}

.sea-route-board {
    width: 100%;
    height: auto;
    min-height: 0;
    align-self: start;
}

/* 控制 .sea-atlas-dossier 的布局、视觉和状态表现 */
.sea-atlas-dossier {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
    padding: 28px 28px 24px;
    background:
        linear-gradient(160deg, rgba(4, 24, 38, 0.88), rgba(9, 39, 58, 0.82) 100%),
        rgba(4, 26, 40, 0.82);
    border-color: rgba(206, 233, 242, 0.2);
    box-shadow:
        0 24px 44px rgba(2, 14, 24, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: visible;
}

@container (max-width: 920px) {
    .sea-atlas-visual {
        min-height: clamp(480px, 54vh, 540px);
    }

    .sea-atlas-dossier {
        min-height: auto;
        padding: 24px 22px 22px;
    }
}

/* 控制 .sea-atlas-card-title 的布局、视觉和状态表现 */
.sea-atlas-card-title {
    margin: 0;
    font-size: 1.34rem;
    color: #ffffff;
    text-shadow: 0 8px 18px rgba(2, 12, 20, 0.22);
    letter-spacing: 0.01em;
}

/* 控制 .sea-atlas-card-copy 的布局、视觉和状态表现 */
.sea-atlas-card-copy {
    margin: 0;
    color: rgba(244, 250, 253, 0.96);
    font-size: 1rem;
    line-height: 1.92;
}

/* 控制 .sea-atlas-meta-grid 的布局、视觉和状态表现 */
.sea-atlas-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* 控制 .sea-atlas-meta-item 的布局、视觉和状态表现 */
.sea-atlas-meta-item {
    padding: 15px 16px;
    border-radius: 18px;
    background: rgba(238, 248, 252, 0.12);
    border: 1px solid rgba(214, 236, 244, 0.18);
}

/* 控制 .sea-atlas-meta-label 的布局、视觉和状态表现 */
.sea-atlas-meta-label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(232, 244, 249, 0.82);
}

/* 控制 .sea-atlas-meta-value 的布局、视觉和状态表现 */
.sea-atlas-meta-value {
    color: rgba(255, 255, 255, 0.98);
    font-size: 0.98rem;
    line-height: 1.78;
    word-break: break-word;
}

/* 控制 .sea-atlas-tags 的布局、视觉和状态表现 */
.sea-atlas-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* 控制 .sea-atlas-tag 的布局、视觉和状态表现 */
.sea-atlas-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(236, 248, 252, 0.16);
    border: 1px solid rgba(206, 233, 242, 0.22);
    color: rgba(250, 253, 255, 0.98);
    font-size: 0.82rem;
}

/* 控制 .sea-atlas-map 的布局、视觉和状态表现 */
.sea-atlas-map {
    position: relative;
    height: 100%;
    min-height: 520px;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    contain: paint;
    background:
        radial-gradient(circle at 28% 24%, rgba(129, 195, 219, 0.2), transparent 22%),
        radial-gradient(circle at 70% 36%, rgba(92, 177, 206, 0.16), transparent 24%),
        linear-gradient(180deg, rgba(14, 55, 82, 0.92), rgba(7, 34, 51, 0.92));
}

/* .sea-atlas-map::before, 的前置装饰层 */
.sea-atlas-map::before,
.sea-atlas-map::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* .sea-atlas-map::before 的前置装饰层 */
.sea-atlas-map:not(.is-live-map)::before {
    background:
        linear-gradient(rgba(199, 230, 240, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(199, 230, 240, 0.08) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.22;
}

/* .sea-atlas-map::after 的后置装饰层 */
.sea-atlas-map:not(.is-live-map)::after {
    background:
        radial-gradient(circle at 50% 50%, rgba(170, 225, 239, 0.16), transparent 42%),
        linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
}

/* 真地图态下，原有网格假海图退为兼容层，不再承担主视觉。 */
.sea-atlas-map.is-live-map {
    background: var(--sea-map-core-bg);
}

.sea-atlas-map.is-live-map:not(.sea-route-map)::before,
.sea-atlas-map.is-live-map:not(.sea-route-map)::after {
    opacity: 0;
}

.sea-atlas-map.is-live-map.sea-route-map {
    contain: none;
}

/* Leaflet 主舞台容器 */
.sea-atlas-map-base {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
}

.sea-atlas-map-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    border-radius: inherit;
    background: var(--sea-map-core-bg);
    opacity: 0;
    filter: saturate(0.82) brightness(0.86) contrast(1.04);
    transform: scale(1.01);
    transition:
        opacity 480ms ease,
        filter 900ms ease,
        transform 780ms cubic-bezier(0.2, 0.78, 0.22, 1);
}

.sea-atlas-map.is-live-map.is-map-awake .sea-atlas-map-canvas,
.sea-atlas-map.is-live-map.is-map-route-drawn .sea-atlas-map-canvas {
    opacity: 1;
    filter: saturate(0.98) brightness(0.93) contrast(1.08);
    transform: scale(1);
}

/* 深海 tint、雾感和轻海流纹理，专门负责把真实底图收进盐憩语境。 */
.sea-atlas-map-tint,
.sea-atlas-map-fog,
.sea-atlas-map-currents,
.sea-atlas-map-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
}

.sea-atlas-map-tint {
    z-index: 2;
    background: var(--sea-map-tint);
    mix-blend-mode: multiply;
    opacity: 0.86;
}

.sea-atlas-map-fog {
    z-index: 3;
    background:
        radial-gradient(circle at 16% 10%, var(--sea-map-fog-top), transparent 28%),
        radial-gradient(circle at 78% 22%, var(--sea-map-fog-mid), transparent 34%),
        linear-gradient(180deg, rgba(225, 247, 253, 0.08), transparent 18%, transparent 70%, var(--sea-map-fog-bottom));
    mix-blend-mode: screen;
    opacity: 0.72;
    filter: blur(0.5px);
}

.sea-atlas-map-currents {
    z-index: 4;
    background:
        radial-gradient(120% 56% at 10% 12%, rgba(171, 223, 236, 0.1), transparent 62%),
        radial-gradient(120% 56% at 92% 68%, rgba(145, 209, 227, 0.08), transparent 58%),
        repeating-linear-gradient(116deg, rgba(199, 233, 244, 0.08) 0 1px, transparent 1px 34px);
    opacity: 0.2;
    animation: seaAtlasCurrentDrift 32s linear infinite;
}

.sea-atlas-map-vignette {
    z-index: 5;
    background: radial-gradient(circle at 50% 48%, rgba(0, 0, 0, 0), rgba(3, 15, 26, 0.42) 82%);
    opacity: 0.66;
}

/* Leaflet 默认控件弱化，避免“地图产品 UI”跳出页面语境。 */
.sea-atlas-map .leaflet-container {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #0a3248;
    color: rgba(226, 241, 248, 0.9);
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
}

.sea-atlas-map .leaflet-pane,
.sea-atlas-map .leaflet-control-container {
    z-index: 6;
}

.sea-atlas-map .leaflet-tile-pane {
    filter: saturate(0.78) brightness(0.84) contrast(1.1);
}

.sea-atlas-map .leaflet-control-zoom {
    display: none;
}

.sea-atlas-map .leaflet-control-attribution {
    margin: 0 10px 8px 0;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(218, 241, 248, 0.26);
    background:
        linear-gradient(180deg, rgba(244, 251, 254, 0.1), rgba(229, 245, 250, 0.04)),
        rgba(3, 12, 21, 0.9);
    color: rgba(252, 255, 255, 0.96);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-shadow: 0 1px 8px rgba(2, 12, 20, 0.38);
    box-shadow:
        inset 0 1px 0 rgba(248, 253, 255, 0.16),
        0 14px 26px rgba(1, 10, 18, 0.3);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.sea-atlas-map .leaflet-control-attribution a {
    color: rgba(255, 255, 255, 0.98);
    text-decoration-color: rgba(255, 255, 255, 0.62);
}

.sea-atlas-map .leaflet-popup {
    display: none;
}

/* Marker 设计：非 pin 语义，保留深海浮标感与呼吸感。 */
.sea-atlas-marker {
    --sea-marker-core-size: 14px;
    --sea-marker-ring-size: 34px;
    --sea-marker-halo-size: 56px;
    --sea-marker-core: rgba(236, 250, 255, 0.95);
    --sea-marker-ring: rgba(178, 228, 240, 0.44);
    --sea-marker-halo: rgba(164, 223, 237, 0.2);
    position: relative;
    width: var(--sea-marker-halo-size);
    height: var(--sea-marker-halo-size);
    --sea-marker-transform: translate(-50%, -50%);
    transform: var(--sea-marker-transform);
    pointer-events: auto;
    opacity: 0;
    filter: blur(7px);
}

.sea-atlas-marker::before,
.sea-atlas-marker::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 999px;
    transform: translate(-50%, -50%);
}

.sea-atlas-marker::before {
    width: var(--sea-marker-ring-size);
    height: var(--sea-marker-ring-size);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.06), rgba(167, 224, 238, 0.2) 56%, rgba(167, 224, 238, 0) 82%);
    box-shadow: 0 0 0 1px var(--sea-marker-ring);
}

.sea-atlas-marker::after {
    width: var(--sea-marker-core-size);
    height: var(--sea-marker-core-size);
    background: var(--sea-marker-core);
    box-shadow:
        0 0 0 10px var(--sea-marker-halo),
        0 12px 24px rgba(2, 16, 27, 0.22);
}

.sea-atlas-marker.is-port {
    --sea-marker-core-size: 10px;
    --sea-marker-ring-size: 24px;
    --sea-marker-halo-size: 44px;
    --sea-marker-core: rgba(222, 240, 247, 0.92);
    --sea-marker-ring: rgba(160, 209, 224, 0.32);
    --sea-marker-halo: rgba(146, 203, 219, 0.14);
}

.sea-atlas-marker.is-spot {
    --sea-marker-core-size: 14px;
    --sea-marker-ring-size: 34px;
    --sea-marker-halo-size: 56px;
}

.sea-atlas-marker.is-active {
    animation: seaAtlasMarkerPulse 8.6s ease-in-out infinite;
}

.sea-atlas-map.is-live-map.is-map-awake .sea-atlas-marker,
.sea-atlas-map.is-live-map.is-map-route-drawn .sea-atlas-marker {
    opacity: 1;
    filter: blur(0);
    animation-name: seaAtlasMarkerRise;
    animation-duration: 680ms;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.2, 0.78, 0.22, 1);
    animation-delay: var(--sea-marker-delay, 280ms);
}

.sea-atlas-map.is-live-map.is-map-awake .sea-atlas-marker.is-active,
.sea-atlas-map.is-live-map.is-map-route-drawn .sea-atlas-marker.is-active {
    animation-name: seaAtlasMarkerRise, seaAtlasMarkerPulse;
    animation-duration: 680ms, 8.6s;
    animation-delay: var(--sea-marker-delay, 280ms), calc(var(--sea-marker-delay, 280ms) + 760ms);
    animation-iteration-count: 1, infinite;
}

.sea-atlas-marker-label {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    max-width: 154px;
    transform: translateY(-50%);
    padding: 6px 10px 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(199, 234, 243, 0.28);
    background:
        linear-gradient(180deg, rgba(231, 247, 252, 0.12), rgba(198, 232, 241, 0.04)),
        rgba(3, 18, 30, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(248, 252, 255, 0.12),
        0 10px 24px rgba(0, 11, 20, 0.24);
    color: rgba(235, 249, 253, 0.9);
    font-size: 0.62rem;
    line-height: 1.1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow:
        0 1px 2px rgba(0, 8, 14, 0.82),
        0 0 14px rgba(166, 226, 240, 0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        opacity 260ms ease,
        transform 280ms ease,
        filter 260ms ease,
        background 260ms ease;
}

.sea-atlas-marker[data-sea-atlas-label-side="left"] .sea-atlas-marker-label {
    left: auto;
    right: calc(100% + 10px);
    transform: translateY(-50%);
}

.sea-atlas-marker[data-sea-atlas-label-side="top"] .sea-atlas-marker-label {
    left: 50%;
    top: auto;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
}

.sea-atlas-marker[data-sea-atlas-label-side="bottom"] .sea-atlas-marker-label {
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
}

.sea-atlas-marker.is-spot .sea-atlas-marker-label {
    z-index: 2;
    max-width: 190px;
    padding: 7px 13px;
    border-color: rgba(223, 244, 250, 0.38);
    background:
        linear-gradient(180deg, rgba(243, 251, 254, 0.2), rgba(206, 236, 245, 0.08)),
        rgba(3, 20, 33, 0.82);
    color: rgba(250, 254, 255, 0.98);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

.sea-atlas-marker.is-port .sea-atlas-marker-label {
    max-width: 138px;
    color: rgba(226, 244, 250, 0.86);
}

.sea-atlas-marker.is-label-subdued .sea-atlas-marker-label {
    opacity: 0.56;
    filter: saturate(0.82);
}

.sea-atlas-marker.is-label-hidden .sea-atlas-marker-label {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 统一路线叠层命名，兼容旧 .sea-route-line* 语汇与新地图叠层。 */
.sea-atlas-route-overlay {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    opacity: 0;
    transition: opacity 480ms ease;
}

.sea-atlas-map.is-live-map.is-map-awake .sea-atlas-route-overlay,
.sea-atlas-map.is-live-map.is-map-route-drawn .sea-atlas-route-overlay {
    opacity: 1;
    transition-delay: 220ms;
}

.sea-atlas-route-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sea-atlas-route-label {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    max-width: min(240px, 38%);
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(199, 235, 244, 0.24);
    background:
        linear-gradient(180deg, rgba(235, 249, 253, 0.13), rgba(184, 225, 237, 0.05)),
        rgba(3, 18, 30, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(248, 252, 255, 0.12),
        0 12px 26px rgba(0, 10, 18, 0.24);
    color: rgba(228, 246, 251, 0.86);
    font-size: 0.6rem;
    line-height: 1.22;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow:
        0 1px 2px rgba(0, 8, 14, 0.78),
        0 0 12px rgba(166, 226, 240, 0.12);
    transform: translate(-50%, -50%);
    opacity: 0;
    filter: blur(4px);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    transition:
        opacity 360ms ease,
        filter 360ms ease,
        transform 420ms cubic-bezier(0.2, 0.78, 0.22, 1);
}

.sea-atlas-map.is-live-map.is-map-awake .sea-atlas-route-label,
.sea-atlas-map.is-live-map.is-map-route-drawn .sea-atlas-route-label {
    opacity: 0.88;
    filter: blur(0);
    transition-delay: 360ms;
}

.sea-atlas-route-label.is-subdued {
    opacity: 0.38;
}

.sea-atlas-map.is-live-map:not(.is-route-emphasis) .sea-atlas-route-label {
    opacity: 0;
    visibility: hidden;
}

.sea-atlas-dossier-map {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    align-content: start;
    align-self: start;
    gap: 0;
    min-height: auto;
    height: auto;
    overflow: hidden;
    isolation: isolate;
}

.sea-atlas-dossier-map::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(246, 251, 253, 0.18), rgba(225, 240, 246, 0.08) 46%, rgba(6, 26, 40, 0) 100%),
        radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.16), transparent 40%);
    opacity: 0;
    transform: translate3d(0, 0, 0) scaleY(1.02);
    transform-origin: center top;
    filter: blur(0);
    transition:
        opacity 520ms ease,
        transform 820ms cubic-bezier(0.18, 0.78, 0.22, 1),
        filter 620ms ease;
    pointer-events: none;
    z-index: 0;
}

.sea-atlas-shell:not(.is-atlas-awakening):not(.is-atlas-awake) .sea-atlas-dossier-map::before {
    opacity: 0.92;
}

.sea-atlas-shell.is-atlas-awakening .sea-atlas-dossier-map::before {
    opacity: 0;
    transform: translate3d(0, -16%, 0) scaleY(0.82);
    filter: blur(6px);
    transition-delay: 520ms;
}

.sea-atlas-shell.is-atlas-awake .sea-atlas-dossier-map::before {
    opacity: 0;
    transform: translate3d(0, -16%, 0) scaleY(0.82);
    filter: blur(6px);
}

.sea-atlas-dossier-map .sea-atlas-dossier-view {
    position: relative;
    display: grid;
    grid-area: 1 / 1;
    gap: 20px;
    align-content: start;
    min-width: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 16px, 0) scale(0.985);
    filter: blur(10px);
    transition:
        opacity 360ms ease,
        transform 460ms cubic-bezier(0.18, 0.78, 0.22, 1),
        filter 420ms ease,
        visibility 0s linear 420ms;
    z-index: 1;
}

.sea-atlas-dossier-map .sea-atlas-dossier-view:not(.is-active) {
    position: absolute;
    inset: 0;
}

.sea-atlas-dossier-map .sea-atlas-dossier-view.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    transition-delay: 0s;
}

.sea-atlas-shell:not(.is-atlas-awakening):not(.is-atlas-awake) .sea-atlas-dossier-map .sea-atlas-dossier-view.is-active {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 22px, 0) scale(0.976);
    filter: blur(12px);
}

.sea-atlas-shell.is-atlas-awakening .sea-atlas-dossier-map .sea-atlas-dossier-view.is-active {
    transition-delay: 540ms, 540ms, 540ms, 0s;
}

.sea-atlas-dossier-map .sea-atlas-card-title,
.sea-atlas-dossier-map .sea-atlas-card-copy,
.sea-atlas-dossier-map .sea-atlas-meta-grid,
.sea-atlas-dossier-map .sea-atlas-tags,
.sea-atlas-dossier-map .sea-route-journey {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    filter: blur(8px);
    transition:
        opacity 320ms ease,
        transform 420ms cubic-bezier(0.18, 0.78, 0.22, 1),
        filter 360ms ease;
}

.sea-atlas-shell:not(.is-atlas-awakening):not(.is-atlas-awake) .sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-atlas-card-title,
.sea-atlas-shell:not(.is-atlas-awakening):not(.is-atlas-awake) .sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-atlas-card-copy,
.sea-atlas-shell:not(.is-atlas-awakening):not(.is-atlas-awake) .sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-atlas-meta-grid,
.sea-atlas-shell:not(.is-atlas-awakening):not(.is-atlas-awake) .sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-atlas-tags,
.sea-atlas-shell:not(.is-atlas-awakening):not(.is-atlas-awake) .sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-route-journey {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    filter: blur(10px);
}

.sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-atlas-card-title,
.sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-atlas-card-copy,
.sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-atlas-meta-grid,
.sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-atlas-tags,
.sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-route-journey {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

.sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-atlas-card-title {
    transition-delay: 40ms;
}

.sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-atlas-card-copy {
    transition-delay: 90ms;
}

.sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-atlas-meta-grid,
.sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-route-journey {
    transition-delay: 150ms;
}

.sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-atlas-tags {
    transition-delay: 210ms;
}

.sea-atlas-shell.is-atlas-awakening .sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-atlas-card-title {
    transition-delay: 660ms;
}

.sea-atlas-shell.is-atlas-awakening .sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-atlas-card-copy {
    transition-delay: 730ms;
}

.sea-atlas-shell.is-atlas-awakening .sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-atlas-meta-grid,
.sea-atlas-shell.is-atlas-awakening .sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-route-journey {
    transition-delay: 810ms;
}

.sea-atlas-shell.is-atlas-awakening .sea-atlas-dossier-map .sea-atlas-dossier-view.is-active .sea-atlas-tags {
    transition-delay: 890ms;
}

.sea-atlas-route-line-glow,
.sea-route-line-glow,
.sea-atlas-route-line-base,
.sea-route-line-base,
.sea-atlas-route-line,
.sea-route-line,
.sea-atlas-route-line-sheen,
.sea-route-line-sheen {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.sea-atlas-route-line-glow,
.sea-route-line-glow {
    stroke: var(--sea-map-route-soft);
}

.sea-atlas-route-line-base,
.sea-route-line-base {
    stroke: rgba(166, 222, 235, 0.2);
}

.sea-atlas-route-line,
.sea-route-line {
    stroke: var(--sea-map-route-main);
    stroke-dasharray: var(--sea-route-length, 1);
    stroke-dashoffset: var(--sea-route-length, 1);
}

.sea-atlas-route-line-sheen,
.sea-route-line-sheen {
    stroke-dasharray: var(--sea-route-sheen-length, 88) var(--sea-route-length, 1);
}

.sea-atlas-info-root {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
}

.sea-atlas-map.is-fallback-active .sea-atlas-info-root {
    display: none;
}

/* 玻璃信息卡：不使用默认 popup。 */
.sea-atlas-info-card {
    position: absolute;
    left: 20px;
    top: 22px;
    bottom: auto;
    z-index: 8;
    width: min(290px, calc(100% - 256px));
    padding: 14px 14px 12px;
    border-radius: 18px;
    border: 1px solid rgba(189, 229, 239, 0.24);
    background:
        linear-gradient(180deg, rgba(240, 250, 254, 0.12), rgba(238, 249, 253, 0.04)),
        rgba(4, 22, 35, 0.52);
    box-shadow:
        inset 0 1px 0 rgba(245, 252, 255, 0.15),
        0 14px 28px rgba(1, 14, 23, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    filter: blur(8px);
    transition:
        opacity 420ms ease,
        transform 620ms cubic-bezier(0.2, 0.78, 0.22, 1),
        filter 520ms ease;
}

.sea-atlas-map.is-live-map.is-map-awake .sea-atlas-info-card,
.sea-atlas-map.is-live-map.is-map-route-drawn .sea-atlas-info-card {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    transition-delay: 520ms;
}

.sea-atlas-map.is-live-map.is-route-emphasis .sea-atlas-info-card {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    filter: blur(10px);
    transition-delay: 0s;
}

.sea-atlas-map.is-live-map.is-map-interacting .sea-atlas-info-card {
    opacity: 0.12;
    filter: blur(10px);
    transform: translate3d(0, 10px, 0) scale(0.985);
}

.sea-atlas-info-title {
    margin: 0 0 10px;
    color: rgba(245, 252, 255, 0.98);
    font-size: 0.98rem;
    line-height: 1.38;
}

.sea-atlas-info-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 9px;
}

.sea-atlas-info-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(199, 233, 243, 0.2);
    background: rgba(228, 246, 252, 0.08);
    color: rgba(233, 247, 252, 0.9);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sea-atlas-info-route {
    margin: 0;
    color: rgba(222, 241, 248, 0.84);
    font-size: 0.82rem;
    line-height: 1.64;
}

.sea-atlas-info-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 11px;
}

.sea-atlas-info-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(196, 230, 241, 0.18);
    background: rgba(226, 245, 251, 0.07);
    color: rgba(230, 246, 251, 0.86);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.sea-atlas-info-chip.is-legend {
    color: rgba(245, 251, 254, 0.96);
    border-color: rgba(208, 238, 246, 0.24);
}

.sea-atlas-info-caption {
    margin: 8px 0 0;
    color: rgba(199, 228, 239, 0.66);
    font-size: 0.73rem;
    line-height: 1.48;
}

.sea-atlas-info-card.is-port-card {
    left: auto;
    right: 18px;
    bottom: auto;
    top: 22px;
    width: min(206px, calc(100% - 52px));
    opacity: 0;
    transform: translate3d(0, -8px, 0);
    pointer-events: none;
}

@media (max-width: 980px) {
    .sea-atlas-info-card {
        width: min(270px, calc(100% - 40px));
    }
}

.sea-atlas-info-card.is-port-card.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    pointer-events: auto;
}

/* 状态切换时压低闪烁感，维持"潜游到另一片海"的稳定过渡。 */
.sea-atlas-map.is-live-map.is-map-switching .sea-atlas-map-canvas {
    opacity: 0.82;
    filter: saturate(0.88) brightness(0.88) blur(0.5px);
}

/* 路径/信息卡/标记同步降低透明度，避免视觉跳跃。 */
.sea-atlas-map.is-live-map.is-map-switching .sea-atlas-route-overlay,
.sea-atlas-map.is-live-map.is-map-switching .sea-atlas-info-card,
.sea-atlas-map.is-live-map.is-map-switching .sea-atlas-marker {
    opacity: 0.38;
    transition-duration: 220ms;
}

/* 路线强调模式：路径完全显现，便于用户追踪潜游路线。 */
.sea-atlas-map.is-live-map.is-route-emphasis .sea-atlas-route-overlay {
    opacity: 1;
}

/* 强调模式下压低洋流线，减少视觉干扰。 */
.sea-atlas-map.is-live-map.is-route-emphasis .sea-atlas-map-currents {
    opacity: 0.28;
}

/* 非路线强调模式：隐藏锚点与节点标记，保持地图界面干净。 */
.sea-atlas-map.is-live-map:not(.is-route-emphasis) .sea-route-anchor-dot,
.sea-atlas-map.is-live-map:not(.is-route-emphasis) .sea-route-node {
    opacity: 0 !important;
    animation: none !important;
}

/* 地图失败降级：仍保持盐憩语境，不回到普通错误块。 */
.sea-atlas-map-fallback {
    position: absolute;
    inset: 16px;
    z-index: 9;
    display: grid;
    gap: 10px;
    align-content: end;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(189, 226, 237, 0.22);
    background:
        radial-gradient(circle at 20% 20%, rgba(190, 231, 243, 0.14), transparent 34%),
        linear-gradient(160deg, rgba(5, 29, 44, 0.8), rgba(5, 22, 35, 0.62));
    box-shadow:
        inset 0 1px 0 rgba(245, 252, 255, 0.14),
        0 18px 30px rgba(2, 14, 24, 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto;
}

/* 降级面板隐藏态。 */
.sea-atlas-map-fallback[hidden] {
    display: none !important;
}

/* 降级面板标题：浅色醒目，提示用户地图未加载。 */
.sea-atlas-map-fallback-title {
    margin: 0;
    color: rgba(241, 250, 254, 0.96);
    font-size: 0.94rem;
}

/* 降级面板说明文字：灰蓝色辅助描述，保持深海语境。 */
.sea-atlas-map-fallback-copy {
    margin: 0;
    color: rgba(218, 240, 247, 0.82);
    font-size: 0.82rem;
    line-height: 1.65;
}

/* 降级面板操作按钮：居左对齐，可点击重试。 */
.sea-atlas-map-fallback-action {
    justify-self: start;
    pointer-events: auto;
}

/* 全屏地图模态窗：固定定位覆盖整个视口，初始隐藏。 */
.sea-atlas-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: clamp(18px, 3vw, 34px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 320ms ease,
        visibility 0s linear 320ms;
}

/* 打开状态：淡入显现，恢复交互。 */
.sea-atlas-fullscreen.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 320ms ease;
}

.sea-atlas-fullscreen[aria-hidden="true"] {
    visibility: hidden !important;
}

.sea-atlas-fullscreen[aria-hidden="true"] *,
.sea-atlas-fullscreen:not(.is-open) * {
    pointer-events: none !important;
}

/* 全屏背景蒙层：深色毛玻璃底色，径向蓝光模拟深海环境。 */
.sea-atlas-fullscreen-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 18%, rgba(134, 201, 224, 0.1), transparent 28%),
        rgba(2, 12, 21, 0.76);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* 全屏面板容器：深海渐变圆角卡片，纵向分为头部与地图两大区域。 */
.sea-atlas-fullscreen-panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    width: min(1260px, 100%);
    height: min(92vh, 920px);
    padding: clamp(16px, 1.8vw, 20px);
    border-radius: 32px;
    border: 1px solid rgba(187, 228, 239, 0.16);
    background:
        linear-gradient(165deg, rgba(6, 28, 42, 0.92), rgba(5, 20, 32, 0.9)),
        rgba(5, 21, 33, 0.9);
    box-shadow:
        0 30px 80px rgba(1, 10, 18, 0.46),
        inset 0 1px 0 rgba(246, 252, 255, 0.08);
}

/* 全屏头部：flex 换行布局，容纳标题与关闭按钮。 */
.sea-atlas-fullscreen-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

/* 全屏标题文字容器：网格排列，展示位置名称与元信息。 */
.sea-atlas-fullscreen-copy {
    display: grid;
    gap: 6px;
    max-width: 640px;
}

/* 全屏前导标签：小字大写，标记地图区域名称。 */
.sea-atlas-fullscreen-kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(192, 228, 239, 0.68);
}

/* 全屏标题：大号浅色文字，突出显示当前位置。 */
.sea-atlas-fullscreen-title {
    margin: 0;
    color: rgba(246, 252, 255, 0.98);
    font-size: clamp(1.16rem, 1.55vw, 1.46rem);
}

/* 全屏元信息：灰蓝辅助色，展示深度 / 坐标等细节。 */
.sea-atlas-fullscreen-meta {
    margin: 0;
    color: rgba(220, 239, 247, 0.82);
    line-height: 1.56;
}

/* 全屏操作区：行内 flex，放置关闭按钮等控件。 */
.sea-atlas-fullscreen-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* 全屏关闭按钮：胶囊形毛玻璃按钮，悬停微抬升。 */
.sea-atlas-fullscreen-close {
    appearance: none;
    border: 1px solid rgba(190, 228, 239, 0.16);
    background:
        linear-gradient(180deg, rgba(240, 250, 254, 0.1), rgba(221, 243, 249, 0.04)),
        rgba(5, 21, 33, 0.48);
    color: rgba(238, 249, 253, 0.9);
    border-radius: 999px;
    padding: 10px 16px;
    font: inherit;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition:
        border-color 220ms ease,
        background 220ms ease,
        color 220ms ease,
        transform 220ms ease;
}

/* 关闭按钮交互态：边框和文字提亮，微上抬。 */
.sea-atlas-fullscreen-close:hover,
.sea-atlas-fullscreen-close:focus-visible {
    border-color: rgba(207, 238, 246, 0.28);
    background:
        linear-gradient(180deg, rgba(246, 253, 255, 0.14), rgba(227, 246, 251, 0.06)),
        rgba(7, 30, 45, 0.58);
    color: rgba(247, 252, 255, 0.98);
    transform: translateY(-1px);
}

/* 全屏地图外壳：占满剩余空间，作为地图的定位容器。 */
.sea-atlas-fullscreen-map-shell {
    position: relative;
    min-height: 0;
}

/* 全屏地图插槽：确保地图组件填满可用空间。 */
.sea-atlas-fullscreen-map-slot,
.sea-atlas-fullscreen-map-shell .sea-atlas-map {
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* 全屏态地图：撑满容器并调整圆角，适配全屏面板风格。 */
.sea-atlas-map.is-fullscreen {
    min-height: 100%;
    border-radius: 26px;
}

/* 全屏态信息卡片：缩小宽度和内边距，适应较大尺寸的地图显示。 */
.sea-atlas-map.is-fullscreen .sea-atlas-info-card {
    width: min(268px, calc(100% - 56px));
    padding: 12px 12px 11px;
}

/* 控制 .sea-atlas-flowline 的布局、视觉和状态表现 */
.sea-atlas-flowline {
    position: absolute;
    inset: 10% 8%;
    opacity: 0.35;
    z-index: 2;
    pointer-events: none;
}

/* 控制 .sea-atlas-flowline path 的布局、视觉和状态表现 */
.sea-atlas-flowline path {
    fill: none;
    stroke: rgba(186, 223, 235, 0.36);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 7 11;
}

/* 控制 .sea-atlas-node 的布局、视觉和状态表现 */
.sea-atlas-node {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 120px;
    transform: translate(-50%, -50%);
    z-index: 3;
}

/* .sea-atlas-node::before, 的前置装饰层 */
.sea-atlas-node::before,
.sea-atlas-node::after {
    content: "";
    position: absolute;
    border-radius: 999px;
}

/* .sea-atlas-node::before 的前置装饰层 */
.sea-atlas-node::before {
    width: 12px;
    height: 12px;
    left: -18px;
    top: 10px;
    background: rgba(205, 238, 247, 0.92);
    box-shadow: 0 0 0 6px rgba(171, 223, 237, 0.12);
}

/* .sea-atlas-node::after 的后置装饰层 */
.sea-atlas-node::after {
    width: 30px;
    height: 30px;
    left: -27px;
    top: 1px;
    border: 1px solid rgba(187, 231, 241, 0.4);
    animation: seaRipple 3.8s ease-out infinite;
}

/* 控制 .sea-atlas-node-label 的布局、视觉和状态表现 */
.sea-atlas-node-label {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(184, 223, 235, 0.54);
}

/* 控制 .sea-atlas-node-value 的布局、视觉和状态表现 */
.sea-atlas-node-value {
    color: rgba(245, 251, 255, 0.94);
    line-height: 1.5;
}

/* 控制 .sea-atlas-position-note 的布局、视觉和状态表现 */
.sea-atlas-position-note {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(4, 22, 34, 0.36);
    border: 1px solid rgba(184, 223, 235, 0.14);
    color: rgba(241, 248, 252, 0.92);
    line-height: 1.72;
    z-index: 3;
}

/* 控制 .sea-route-map 的布局、视觉和状态表现 */
.sea-route-map {
    --sea-route-length: 1;
    --sea-route-sheen-length: 48;
    position: relative;
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
    gap: 18px;
    height: auto;
    min-height: 0;
    width: 100%;
    padding: 20px 18px 18px;
    border-radius: 28px;
    overflow: visible;
    background:
        radial-gradient(circle at 14% 16%, rgba(153, 223, 241, 0.12), transparent 28%),
        radial-gradient(circle at 82% 22%, rgba(120, 188, 216, 0.1), transparent 32%),
        linear-gradient(180deg, rgba(11, 43, 66, 0.96), rgba(6, 25, 38, 0.98)),
        rgba(9, 39, 59, 0.92);
    border: 1px solid rgba(189, 229, 240, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(236, 248, 252, 0.14),
        0 24px 46px rgba(2, 18, 31, 0.18);
}

.sea-route-board {
    contain: none;
}

/* .sea-route-map::before 用极淡的流线和等压纹理，把路线图从“空底板”收成更像海面路径板。 */
.sea-route-map::before,
.sea-route-map::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

/* 顶层是大尺度的水体纹理和海流线，只做气氛，不抢路线本身。 */
.sea-route-map::before {
    background:
        radial-gradient(circle at 24% 70%, rgba(198, 235, 244, 0.08), transparent 24%),
        radial-gradient(circle at 72% 66%, rgba(129, 203, 224, 0.08), transparent 26%),
        linear-gradient(rgba(197, 229, 240, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(197, 229, 240, 0.05) 1px, transparent 1px);
    background-size: auto, auto, 58px 58px, 58px 58px;
    opacity: 0.42;
}

/* 再叠一层很淡的海面光带，让路径不像机械示意图，而像静水里的一块航线板。 */
.sea-route-map::after {
    background:
        linear-gradient(140deg, transparent 24%, rgba(255, 255, 255, 0.06) 46%, transparent 66%),
        radial-gradient(circle at 50% -10%, rgba(216, 244, 249, 0.08), transparent 48%);
    opacity: 0.72;
}

/* 路径板左上角的小标题，作用是先告诉用户“这是靠近这片海的过程”，而不是普通路线图。 */
.sea-route-heading {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 8px;
    max-width: 272px;
}

/* 固定 16:9 舞台，避免 SVG 为了撑满容器而被横向或纵向拉伸。 */
.sea-route-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
    max-height: 760px;
    overflow: visible;
}

/* 英文 overline 只做极轻的海图标记，不抢节点卡。 */
.sea-route-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(191, 228, 238, 0.54);
}

/* 小段说明文字帮助用户理解“抵达本身也是潜水体验的一部分”。 */
.sea-route-murmur {
    margin: 0;
    color: rgba(226, 239, 245, 0.8);
    line-height: 1.68;
}

/* 控制 .sea-route-svg 的布局、视觉和状态表现 */
.sea-route-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 5;
}

.sea-route-svg path {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 路径背后只保留贴线柔雾，避免超宽光晕把主线挤成忽粗忽细。 */
.sea-route-line-glow {
    stroke: rgba(178, 231, 242, 0.82);
    stroke-width: 6;
    opacity: 0.16;
    filter: blur(6px);
}

/* 底层先放一条已经存在的海流轨迹，真正描亮的主线会从它身上慢慢浮出来。 */
.sea-route-line-base {
    stroke: rgba(173, 225, 238, 0.52);
    stroke-width: 1.8;
    opacity: 0.16;
    transition: opacity 360ms ease, filter 360ms ease;
}

/* 控制 .sea-route-line 的布局、视觉和状态表现 */
.sea-route-line {
    stroke: rgba(233, 249, 253, 0.94);
    stroke-width: 2.5;
    opacity: 0.96;
    stroke-dasharray: var(--sea-route-length);
    stroke-dashoffset: var(--sea-route-length);
    transition: filter 320ms ease, opacity 320ms ease;
    filter: drop-shadow(0 0 10px rgba(176, 231, 243, 0.18));
}

/* 描线完成后，让一小段很淡的光沿路径慢慢走一次，像海面光线掠过航线。 */
.sea-route-line-sheen {
    stroke: rgba(246, 252, 255, 0.94);
    stroke-width: 1.1;
    stroke-dasharray: var(--sea-route-sheen-length) var(--sea-route-length);
    stroke-dashoffset: calc(var(--sea-route-length) + (var(--sea-route-sheen-length) * 0.2));
    opacity: 0;
    transition: stroke-width 220ms ease, filter 220ms ease;
    filter: drop-shadow(0 0 8px rgba(232, 247, 252, 0.2));
}

/* 沿路径滑行的海流光珠，比之前更小、更安静。 */
.sea-route-current {
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%) rotate(var(--sea-route-current-angle, 0deg));
    transform-origin: 50% 50%;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    mix-blend-mode: screen;
    transition: width 220ms ease, height 220ms ease, filter 220ms ease;
    filter: drop-shadow(0 0 10px rgba(191, 236, 246, 0.24));
}

.sea-route-map.is-route-awakened .sea-route-line-base {
    opacity: 0.22;
}

.sea-route-map.is-route-passing .sea-route-line-base {
    opacity: 0.1;
    filter: drop-shadow(0 0 8px rgba(168, 224, 238, 0.12));
}

.sea-route-map.is-route-passing .sea-route-line {
    opacity: 1;
    filter: drop-shadow(0 0 16px rgba(198, 238, 247, 0.3));
}

.sea-route-map.is-route-passing .sea-route-line-glow {
    opacity: 0.24;
    filter: blur(8px);
}

.sea-route-map.is-route-passing .sea-route-line-sheen {
    stroke-width: 1.35;
    filter: drop-shadow(0 0 11px rgba(240, 250, 254, 0.32));
}

.sea-route-map.is-route-passing .sea-route-current {
    width: 14px;
    height: 14px;
    filter: drop-shadow(0 0 16px rgba(206, 242, 249, 0.38));
}

.sea-route-current::before,
.sea-route-current::after {
    content: "";
    position: absolute;
    top: 50%;
    border-radius: 999px;
}

.sea-route-current::before {
    inset: 0;
    top: 0;
    left: 0;
    transform: none;
    background: radial-gradient(circle, rgba(251, 255, 255, 0.98), rgba(226, 247, 252, 0.9) 48%, rgba(167, 227, 241, 0.4) 74%, rgba(167, 227, 241, 0) 100%);
    box-shadow: 0 0 0 3px rgba(173, 229, 241, 0.12);
}

.sea-route-current::after {
    right: calc(100% - 1px);
    width: 10px;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(173, 228, 240, 0), rgba(196, 236, 246, 0.38), rgba(244, 251, 254, 0.82));
}

.sea-route-map.is-route-drawn .sea-route-line {
    animation: seaRouteLineBreath 6.4s ease-in-out infinite alternate;
}

.sea-route-map.is-route-drawn .sea-route-line-glow {
    animation: seaRouteGlowBreath 6.4s ease-in-out infinite alternate;
}

/* 控制 .sea-route-anchor-dot 的布局、视觉和状态表现 */
.sea-route-anchor-dot {
    pointer-events: none;
    opacity: 0;
    z-index: 2;
    transform-box: fill-box;
    transform-origin: center;
    filter: drop-shadow(0 8px 18px rgba(4, 18, 30, 0.16));
}

.sea-route-anchor-dot-halo {
    fill: rgba(120, 197, 219, 0.24);
}

.sea-route-anchor-dot-core {
    fill: rgba(220, 243, 249, 0.98);
    stroke: rgba(244, 251, 254, 0.56);
    stroke-width: 1.2;
}

/* .sea-route-anchor-dot.is-final 在终点锚点上稍微加重存在感 */
.sea-route-anchor-dot.is-final {
    filter: drop-shadow(0 10px 22px rgba(4, 18, 30, 0.18));
}

.sea-route-anchor-dot.is-final .sea-route-anchor-dot-halo {
    fill: rgba(158, 220, 236, 0.22);
}

.sea-route-anchor-dot.is-final .sea-route-anchor-dot-core {
    fill: rgba(235, 248, 252, 0.98);
}

/* 控制 .sea-route-node 的布局、视觉和状态表现 */
.sea-route-node {
    position: absolute;
    left: calc((var(--route-x, 0) / 640) * 100% + var(--route-shift-x, 0px));
    top: calc((var(--route-y, 0) / 360) * 100%);
    transform: translate(-50%, calc(-100% - var(--route-node-gap, 16px)));
    transform-origin: 50% 100%;
    width: var(--route-node-width, 132px);
    min-width: var(--route-node-width, 132px);
    padding: 11px 13px 12px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(239, 249, 253, 0.12), rgba(239, 249, 253, 0.06)),
        rgba(238, 249, 253, 0.08);
    border: 1px solid rgba(194, 228, 239, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(245, 252, 255, 0.12),
        0 14px 30px rgba(2, 18, 31, 0.18);
    backdrop-filter: blur(14px);
    opacity: 0;
    z-index: 2;
}

/* .sea-route-node.is-below 把终点卡片放到锚点下方，避免和上一张节点卡在宽屏下重叠 */
.sea-route-node.is-below {
    transform: translate(-50%, var(--route-node-gap, 18px));
    transform-origin: 50% 0;
}

/* .sea-route-node::before 的前置装饰层 */
.sea-route-node::before {
    content: "";
    position: absolute;
    left: calc(50% - var(--route-shift-x, 0px));
    top: 100%;
    width: 2px;
    height: var(--route-node-gap, 16px);
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(205, 237, 246, 0.7), rgba(205, 237, 246, 0.08));
}

/* .sea-route-node.is-below::before 把连接线改到卡片顶部，保持仍然回到同一个锚点 */
.sea-route-node.is-below::before {
    top: auto;
    bottom: 100%;
    background: linear-gradient(180deg, rgba(205, 237, 246, 0.08), rgba(205, 237, 246, 0.72));
}

/* .sea-atlas-panel[data-sea-panel="route"] .sea-atlas-visual 让路线卡片在宽屏下可轻微溢出，避免边缘裁切 */
.sea-atlas-panel[data-sea-panel="route"] .sea-atlas-visual {
    overflow: visible;
    padding-left: 20px;
    padding-right: 20px;
}

/* 控制 .sea-route-step 的布局、视觉和状态表现 */
.sea-route-step {
    display: block;
    margin-bottom: 4px;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(187, 223, 235, 0.56);
}

/* 控制 .sea-route-value 的布局、视觉和状态表现 */
.sea-route-value {
    display: block;
    color: rgba(245, 251, 255, 0.94);
    line-height: 1.52;
}

/* 节点下面补一句更轻的提示，让它更像“靠近海的阶段”，而不是冷冰冰的交通标签。 */
.sea-route-note {
    display: block;
    margin-top: 8px;
    color: rgba(214, 232, 239, 0.7);
    font-size: 0.76rem;
    line-height: 1.62;
}

/* 第一次进入路线视图时，节点和锚点跟着航线一层层亮起来。 */
.sea-route-map.is-route-awakened .sea-route-anchor-dot {
    animation: seaRouteDotReveal 0.7s ease forwards;
    animation-delay: calc(0.32s + (var(--route-index, 0) * 0.16s));
}

.sea-route-map.is-route-awakened .sea-route-node {
    animation: seaRouteNodeReveal 0.9s cubic-bezier(0.2, 0.78, 0.22, 1) forwards;
    animation-delay: calc(0.42s + (var(--route-index, 0) * 0.16s));
}

/* 航线完全建立后，流光再很慢地沿路径走一次，不做频繁循环。 */
/* 控制 .sea-route-journey 的布局、视觉和状态表现 */
.sea-route-journey {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 控制 .sea-route-journey-item 的布局、视觉和状态表现 */
.sea-route-journey-item {
    position: relative;
    padding-left: 18px;
    color: rgba(226, 240, 246, 0.8);
    line-height: 1.72;
}

/* .sea-route-journey-item::before 的前置装饰层 */
.sea-route-journey-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(177, 226, 238, 0.92);
    box-shadow: 0 0 0 6px rgba(177, 226, 238, 0.12);
}

/* 控制 .sea-profile 的布局、视觉和状态表现 */
.sea-profile {
    --sea-profile-settle-duration: 8.8s;
    --sea-profile-surface-drift-duration: 11.6s;
    --sea-profile-grid-drift-duration: 14.8s;
    --sea-profile-glow-breath-duration: 7.4s;
    --sea-profile-layer-drift-distance: 8px;
    --sea-profile-marker-drift-distance: 9px;
    --sea-profile-breath-scale: 1.014;
    --sea-profile-breath-brightness: 1.08;
    position: relative;
    height: 100%;
    min-height: 420px;
    border-radius: 26px;
    overflow: hidden;
    padding: 110px 24px 28px 28px;
    display: grid;
    align-content: end;
    background:
        radial-gradient(circle at 16% 8%, rgba(236, 249, 253, 0.26), transparent 18%),
        radial-gradient(circle at 74% 20%, rgba(126, 207, 228, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(124, 207, 230, 0.28) 0%, rgba(46, 118, 154, 0.5) 16%, rgba(10, 55, 79, 0.84) 54%, rgba(4, 20, 33, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -22px 44px rgba(2, 10, 18, 0.18);
}

/* .sea-profile::before 的前置装饰层 */
.sea-profile::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 14%, transparent 82%, rgba(0, 0, 0, 0.16)),
        linear-gradient(110deg, rgba(255, 255, 255, 0.02), transparent 34%, rgba(255, 255, 255, 0.06) 58%, transparent 84%);
    pointer-events: none;
}

.sea-profile::after {
    content: "";
    position: absolute;
    inset: auto 18px 24px 18px;
    height: 34%;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 50%, rgba(3, 14, 25, 0.16), rgba(3, 14, 25, 0));
    opacity: 0.72;
    filter: blur(18px);
    pointer-events: none;
}

/* 控制 .sea-profile-surface 的布局、视觉和状态表现 */
.sea-profile-surface {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 0;
    height: 86px;
    border-radius: 0 0 28px 28px;
    background:
        linear-gradient(180deg, rgba(233, 249, 253, 0.42), rgba(164, 217, 233, 0.12) 44%, rgba(164, 217, 233, 0));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        0 12px 24px rgba(11, 42, 61, 0.12);
}

.sea-profile-surface::before,
.sea-profile-surface::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sea-profile-surface::before {
    background: linear-gradient(96deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 20%, rgba(255, 255, 255, 0.48) 48%, rgba(212, 240, 247, 0.2) 66%, rgba(255, 255, 255, 0) 100%);
    opacity: 0.48;
    transform: translate3d(8%, 0, 0) scaleX(1);
    filter: blur(14px);
    mix-blend-mode: screen;
}

.sea-profile-surface::after {
    inset: auto 8% 18px 8%;
    height: 18px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(239, 249, 253, 0.56) 28%, rgba(197, 232, 242, 0.24) 60%, rgba(255, 255, 255, 0)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
    opacity: 0.4;
    transform: translate3d(0, 0, 0) scaleX(1);
    filter: blur(12px);
}

.sea-profile-grid,
.sea-profile-depth-rail {
    position: absolute;
    pointer-events: none;
    opacity: 0.84;
}

.sea-profile-grid {
    inset: 104px 22px 26px 22px;
    border-radius: 26px;
    background:
        linear-gradient(rgba(197, 231, 240, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(197, 231, 240, 0.05) 1px, transparent 1px);
    background-size: 100% 74px, 64px 100%;
    background-position: 0 0, 0 0;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.52) 78%, rgba(0, 0, 0, 0));
}

.sea-profile-depth-rail {
    left: 62px;
    top: 118px;
    bottom: 34px;
    width: 1px;
    background: linear-gradient(180deg, rgba(226, 246, 252, 0.82), rgba(162, 211, 226, 0.26) 18%, rgba(111, 176, 199, 0.22) 74%, rgba(111, 176, 199, 0));
    box-shadow: 0 0 14px rgba(157, 217, 232, 0.2);
}

/* 控制 .sea-profile-arrow 的布局、视觉和状态表现 */
.sea-profile-arrow {
    position: absolute;
    top: 34px;
    right: 26px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(189, 230, 240, 0.24);
    background:
        linear-gradient(180deg, rgba(243, 251, 254, 0.12), rgba(218, 243, 250, 0.04)),
        rgba(7, 32, 48, 0.34);
    background-size: 180% 100%, 100% 100%;
    background-position: 0% 50%, 0 0;
    color: rgba(240, 249, 253, 0.88);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* 控制 .sea-profile-arrow svg 的布局、视觉和状态表现 */
.sea-profile-arrow svg {
    width: 74px;
    height: 16px;
    fill: none;
    stroke: rgba(202, 235, 244, 0.82);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 控制 .sea-profile-layers 的布局、视觉和状态表现 */
.sea-profile-layers {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 16px;
}

/* 控制 .sea-profile-layer 的布局、视觉和状态表现 */
.sea-profile-layer {
    position: relative;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    min-height: 100px;
}

.sea-profile-layer::before {
    content: "";
    position: absolute;
    left: 63px;
    top: 50%;
    width: 46px;
    height: 1px;
    background: linear-gradient(90deg, rgba(211, 241, 249, 0.7), rgba(211, 241, 249, 0));
    opacity: 0.72;
}

/* 控制 .sea-profile-depth 的布局、视觉和状态表现 */
.sea-profile-depth {
    position: relative;
    padding-left: 16px;
    color: rgba(242, 249, 252, 0.94);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: 0.02em;
}

.sea-profile-depth::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 50%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    transform: translateY(-50%);
    background:
        radial-gradient(circle at 35% 35%, rgba(251, 255, 255, 0.98), rgba(203, 237, 245, 0.88) 52%, rgba(120, 183, 205, 0.84) 100%);
    box-shadow:
        0 0 0 6px rgba(166, 219, 232, 0.1),
        0 0 16px rgba(186, 232, 242, 0.28);
}

/* 控制 .sea-profile-band 的布局、视觉和状态表现 */
.sea-profile-band {
    position: relative;
    overflow: hidden;
    padding: 18px 22px 18px;
    border-radius: 24px;
    background:
        linear-gradient(152deg, rgba(243, 251, 254, 0.1), rgba(218, 243, 250, 0.04)),
        rgba(8, 35, 52, 0.34);
    border: 1px solid rgba(194, 228, 239, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 18px 34px rgba(3, 16, 27, 0.18);
}

.sea-profile-band-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.2), transparent 30%),
        linear-gradient(112deg, rgba(186, 235, 245, 0.1), transparent 42%, rgba(255, 255, 255, 0.08) 70%, transparent 100%);
    opacity: 0.84;
    pointer-events: none;
}

/* 控制 .sea-profile-band strong 的布局、视觉和状态表现 */
.sea-profile-band strong {
    position: relative;
    display: block;
    margin-bottom: 8px;
    font-size: 1.08rem;
    color: rgba(245, 251, 255, 0.94);
}

/* 控制 .sea-profile-band span 的布局、视觉和状态表现 */
.sea-profile-band span {
    position: relative;
    display: block;
    color: rgba(226, 240, 246, 0.82);
    line-height: 1.68;
}

.sea-profile-markers {
    position: absolute;
    inset: 136px 24px 34px 154px;
    z-index: 3;
    pointer-events: none;
}

.sea-profile-marker {
    position: absolute;
    top: var(--sea-profile-marker-top);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transform: translate3d(0, -50%, 0);
}

.sea-profile-marker.is-left {
    left: clamp(120px, 28%, 220px);
}

.sea-profile-marker.is-right {
    right: 14px;
    flex-direction: row-reverse;
    text-align: right;
}

.sea-profile-marker::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 42px;
    height: 1px;
    background: linear-gradient(90deg, rgba(204, 238, 247, 0.74), rgba(204, 238, 247, 0));
    opacity: 0.7;
}

.sea-profile-marker.is-left::before {
    right: -34px;
}

.sea-profile-marker.is-right::before {
    left: -34px;
    transform: scaleX(-1);
}

.sea-profile-marker-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 35%, rgba(252, 255, 255, 0.98), rgba(206, 239, 246, 0.9) 50%, rgba(133, 198, 218, 0.9) 100%);
    box-shadow:
        0 0 0 8px rgba(175, 226, 239, 0.08),
        0 0 22px rgba(201, 239, 248, 0.28);
    animation: seaProfileMarkerPulse 6.8s ease-in-out infinite;
    animation-delay: calc(var(--sea-profile-index, 0) * 0.46s);
}

.sea-profile-marker-copy {
    display: grid;
    gap: 4px;
    min-width: 112px;
    padding: 10px 12px 9px;
    border-radius: 18px;
    border: 1px solid rgba(193, 229, 239, 0.18);
    background:
        linear-gradient(180deg, rgba(243, 251, 254, 0.1), rgba(219, 243, 250, 0.04)),
        rgba(6, 28, 43, 0.38);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 24px rgba(2, 15, 25, 0.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.sea-profile-marker-copy em {
    font-style: normal;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(191, 228, 238, 0.68);
}

.sea-profile-marker-copy strong {
    font-size: 0.82rem;
    color: rgba(245, 251, 255, 0.92);
}

/* 控制 .sea-profile-hotspots 的布局、视觉和状态表现 */
.sea-profile-hotspots,
.sea-atlas-levels {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 控制 .sea-profile-hotspot 的布局、视觉和状态表现 */
.sea-profile-hotspot,
.sea-atlas-level {
    position: relative;
    overflow: hidden;
    padding: 16px 18px 15px 20px;
    border-radius: 20px;
    background:
        linear-gradient(150deg, rgba(239, 249, 253, 0.1), rgba(219, 241, 248, 0.04)),
        rgba(7, 29, 44, 0.44);
    border: 1px solid rgba(194, 228, 239, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 24px rgba(2, 15, 25, 0.14);
}

.sea-profile-hotspot::before,
.sea-atlas-level::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(197, 233, 243, 0), rgba(197, 233, 243, 0.84), rgba(197, 233, 243, 0));
    opacity: 0.72;
}

/* 控制 .sea-profile-hotspot strong 的布局、视觉和状态表现 */
.sea-profile-hotspot strong,
.sea-atlas-level strong {
    display: block;
    margin-bottom: 7px;
    color: rgba(245, 251, 255, 0.94);
}

/* 控制 .sea-profile-hotspot span 的布局、视觉和状态表现 */
.sea-profile-hotspot span,
.sea-atlas-level span {
    color: rgba(226, 240, 246, 0.82);
    line-height: 1.68;
}

.sea-atlas-panel[data-sea-panel="underwater"] .sea-atlas-dossier {
    min-height: clamp(540px, 58vh, 620px);
    padding-bottom: clamp(18px, 2vw, 24px);
}

.sea-atlas-dossier-underwater {
    display: grid;
    align-content: start;
    gap: 18px;
}

.sea-atlas-panel[data-sea-panel="underwater"] .sea-profile-surface,
.sea-atlas-panel[data-sea-panel="underwater"] .sea-profile-grid,
.sea-atlas-panel[data-sea-panel="underwater"] .sea-profile-depth-rail,
.sea-atlas-panel[data-sea-panel="underwater"] .sea-profile-arrow,
.sea-atlas-panel[data-sea-panel="underwater"] .sea-profile-layer,
.sea-atlas-panel[data-sea-panel="underwater"] .sea-profile-marker,
.sea-atlas-panel[data-sea-panel="underwater"] .sea-atlas-card-title,
.sea-atlas-panel[data-sea-panel="underwater"] .sea-atlas-card-copy,
.sea-atlas-panel[data-sea-panel="underwater"] .sea-profile-hotspot,
.sea-atlas-panel[data-sea-panel="underwater"] .sea-atlas-level {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
}

.sea-atlas-panel[data-sea-panel="underwater"] .sea-profile {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0) saturate(1);
    transform-origin: center;
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active:not(.is-profile-awakening):not(.is-profile-settled) .sea-profile {
    opacity: 0.68;
    transform: translate3d(0, 30px, 0) scale(0.968);
    filter: blur(20px) saturate(0.86) brightness(0.82);
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active:not(.is-profile-awakening):not(.is-profile-settled) .sea-profile::before {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.95);
    filter: blur(24px);
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active:not(.is-profile-awakening):not(.is-profile-settled) .sea-profile::after {
    opacity: 0;
    transform: translate3d(0, 36px, 0) scale(0.84);
    filter: blur(28px);
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active:not(.is-profile-awakening):not(.is-profile-settled) .sea-profile-surface {
    opacity: 0;
    transform: translate3d(0, -44px, 0) scaleX(0.84) scaleY(0.72);
    filter: blur(26px);
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active:not(.is-profile-awakening):not(.is-profile-settled) .sea-profile-surface::before {
    opacity: 0;
    transform: translate3d(-34%, -12px, 0) scaleX(1.2);
    filter: blur(24px);
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active:not(.is-profile-awakening):not(.is-profile-settled) .sea-profile-surface::after {
    opacity: 0;
    transform: translate3d(0, -16px, 0) scaleX(1.14);
    filter: blur(22px);
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active:not(.is-profile-awakening):not(.is-profile-settled) .sea-profile-grid,
.sea-atlas-panel[data-sea-panel="underwater"].is-active:not(.is-profile-awakening):not(.is-profile-settled) .sea-profile-depth-rail {
    opacity: 0;
    transform: translate3d(0, 26px, 0) scaleY(0.68);
    filter: blur(20px);
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active:not(.is-profile-awakening):not(.is-profile-settled) .sea-profile-arrow,
.sea-atlas-panel[data-sea-panel="underwater"].is-active:not(.is-profile-awakening):not(.is-profile-settled) .sea-atlas-card-title,
.sea-atlas-panel[data-sea-panel="underwater"].is-active:not(.is-profile-awakening):not(.is-profile-settled) .sea-atlas-card-copy {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    filter: blur(18px);
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active:not(.is-profile-awakening):not(.is-profile-settled) .sea-profile-layer,
.sea-atlas-panel[data-sea-panel="underwater"].is-active:not(.is-profile-awakening):not(.is-profile-settled) .sea-profile-hotspot,
.sea-atlas-panel[data-sea-panel="underwater"].is-active:not(.is-profile-awakening):not(.is-profile-settled) .sea-atlas-level {
    opacity: 0;
    transform: translate3d(0, 54px, 0) scale(0.936);
    filter: blur(26px);
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active:not(.is-profile-awakening):not(.is-profile-settled) .sea-profile-marker {
    opacity: 0;
    transform: translate3d(0, calc(-50% + 42px), 0) scale(0.72);
    filter: blur(20px);
}

.sea-atlas-panel[data-sea-panel="underwater"].is-profile-awakening .sea-profile {
    animation: seaProfileStageWake 1220ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.sea-atlas-panel[data-sea-panel="underwater"].is-profile-awakening .sea-profile::before {
    animation: seaProfileStageVeil 1180ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.sea-atlas-panel[data-sea-panel="underwater"].is-profile-awakening .sea-profile::after {
    animation: seaProfileFloorGather 1220ms cubic-bezier(0.18, 0.84, 0.22, 1) 80ms both;
}

.sea-atlas-panel[data-sea-panel="underwater"].is-profile-awakening .sea-profile-surface {
    animation: seaProfileSurfaceWake 1180ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.sea-atlas-panel[data-sea-panel="underwater"].is-profile-awakening .sea-profile-surface::before {
    animation: seaProfileSurfaceShimmer 1260ms cubic-bezier(0.18, 0.84, 0.22, 1) 40ms both;
}

.sea-atlas-panel[data-sea-panel="underwater"].is-profile-awakening .sea-profile-surface::after {
    animation: seaProfileSurfaceRipple 980ms cubic-bezier(0.18, 0.84, 0.22, 1) 90ms both;
}

.sea-atlas-panel[data-sea-panel="underwater"].is-profile-awakening .sea-profile-grid,
.sea-atlas-panel[data-sea-panel="underwater"].is-profile-awakening .sea-profile-depth-rail {
    animation: seaProfileVeilLift 860ms cubic-bezier(0.18, 0.84, 0.22, 1) 90ms both;
}

.sea-atlas-panel[data-sea-panel="underwater"].is-profile-awakening .sea-profile-arrow {
    animation: seaProfileCurrentSweep 900ms cubic-bezier(0.18, 0.84, 0.22, 1) 170ms both;
}

.sea-atlas-panel[data-sea-panel="underwater"].is-profile-awakening .sea-profile-layer {
    animation: seaProfileLayerRise 940ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
    animation-delay: calc(200ms + (var(--sea-profile-index, 0) * 120ms));
}

.sea-atlas-panel[data-sea-panel="underwater"].is-profile-awakening .sea-profile-band-glow {
    animation: seaProfileBandPulse 1220ms ease-out both;
    animation-delay: calc(260ms + (var(--sea-profile-index, 0) * 120ms));
}

.sea-atlas-panel[data-sea-panel="underwater"].is-profile-awakening .sea-profile-marker {
    animation: seaProfileMarkerSettle 900ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
    animation-delay: calc(520ms + (var(--sea-profile-index, 0) * 120ms));
}

.sea-atlas-panel[data-sea-panel="underwater"].is-profile-awakening .sea-atlas-card-title {
    animation: seaProfileCopyReveal 760ms cubic-bezier(0.18, 0.84, 0.22, 1) 560ms both;
}

.sea-atlas-panel[data-sea-panel="underwater"].is-profile-awakening .sea-atlas-card-copy {
    animation: seaProfileCopyReveal 760ms cubic-bezier(0.18, 0.84, 0.22, 1) 640ms both;
}

.sea-atlas-panel[data-sea-panel="underwater"].is-profile-awakening .sea-profile-hotspot,
.sea-atlas-panel[data-sea-panel="underwater"].is-profile-awakening .sea-atlas-level {
    animation: seaProfileCardSettle 780ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
    animation-delay: calc(760ms + (var(--sea-profile-copy-index, 0) * 100ms));
}

/* 入场完成后保留极轻的水流呼吸，让海层继续缓慢活动。 */
.sea-atlas-panel[data-sea-panel="underwater"].is-active.is-profile-settled .sea-profile {
    animation: seaProfileStageBreath var(--sea-profile-settle-duration) ease-in-out infinite alternate;
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active.is-profile-settled .sea-profile::before {
    animation: seaProfileVeilDrift calc(var(--sea-profile-settle-duration) * 1.18) ease-in-out infinite alternate;
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active.is-profile-settled .sea-profile::after {
    animation: seaProfileFloorBreath calc(var(--sea-profile-settle-duration) * 1.06) ease-in-out infinite alternate;
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active.is-profile-settled .sea-profile-surface::before {
    animation: seaProfileSurfaceDrift var(--sea-profile-surface-drift-duration) ease-in-out infinite alternate;
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active.is-profile-settled .sea-profile-surface::after {
    animation: seaProfileSurfaceGlide calc(var(--sea-profile-surface-drift-duration) * 0.9) ease-in-out infinite alternate;
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active.is-profile-settled .sea-profile-grid {
    animation: seaProfileGridDrift var(--sea-profile-grid-drift-duration) linear infinite;
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active.is-profile-settled .sea-profile-depth-rail {
    animation: seaProfileRailGlow var(--sea-profile-glow-breath-duration) ease-in-out infinite alternate;
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active.is-profile-settled .sea-profile-arrow {
    animation: seaProfileArrowDrift calc(var(--sea-profile-settle-duration) * 0.94) ease-in-out infinite;
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active.is-profile-settled .sea-profile-layer {
    animation: seaProfileLayerFloat calc(var(--sea-profile-settle-duration) + 3.8s) ease-in-out infinite alternate;
    animation-delay: calc(var(--sea-profile-index, 0) * -1.4s);
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active.is-profile-settled .sea-profile-band-glow {
    animation: seaProfileBandBreath calc(var(--sea-profile-glow-breath-duration) + 1.4s) ease-in-out infinite alternate;
    animation-delay: calc(var(--sea-profile-index, 0) * -0.9s);
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active.is-profile-settled .sea-profile-marker.is-left {
    animation: seaProfileMarkerDriftLeft calc(var(--sea-profile-settle-duration) * 0.86) ease-in-out infinite;
    animation-delay: calc(var(--sea-profile-index, 0) * -1.1s);
}

.sea-atlas-panel[data-sea-panel="underwater"].is-active.is-profile-settled .sea-profile-marker.is-right {
    animation: seaProfileMarkerDriftRight calc(var(--sea-profile-settle-duration) * 0.86) ease-in-out infinite;
    animation-delay: calc(var(--sea-profile-index, 0) * -1.1s);
}

@keyframes seaProfileStageWake {
    0% {
        opacity: 0.68;
        transform: translate3d(0, 30px, 0) scale(0.968);
        filter: blur(20px) saturate(0.86) brightness(0.82);
    }

    58% {
        opacity: 1;
        transform: translate3d(0, -8px, 0) scale(1.026);
        filter: blur(6px) saturate(1.08) brightness(1.08);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0) saturate(1);
    }
}

@keyframes seaProfileStageBreath {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0) saturate(1) brightness(1);
    }

    100% {
        transform: translate3d(0, -6px, 0) scale(var(--sea-profile-breath-scale));
        filter: blur(0) saturate(1.04) brightness(var(--sea-profile-breath-brightness));
    }
}

@keyframes seaProfileStageVeil {
    0% {
        opacity: 0;
        transform: translate3d(0, 28px, 0) scale(0.95);
        filter: blur(24px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes seaProfileVeilDrift {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0.88;
        transform: translate3d(0, -12px, 0) scale(1.018);
        filter: blur(6px);
    }
}

@keyframes seaProfileFloorGather {
    0% {
        opacity: 0;
        transform: translate3d(0, 36px, 0) scale(0.84);
        filter: blur(28px);
    }

    100% {
        opacity: 0.72;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(18px);
    }
}

@keyframes seaProfileFloorBreath {
    0% {
        opacity: 0.68;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(18px);
    }

    100% {
        opacity: 0.84;
        transform: translate3d(0, -8px, 0) scale(1.08);
        filter: blur(26px);
    }
}

@keyframes seaProfileSurfaceWake {
    0% {
        opacity: 0;
        transform: translate3d(0, -44px, 0) scaleX(0.84) scaleY(0.72);
        filter: blur(26px);
    }

    52% {
        opacity: 1;
        transform: translate3d(0, 6px, 0) scaleX(1.08) scaleY(1.06);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scaleX(1);
        filter: blur(0);
    }
}

@keyframes seaProfileSurfaceShimmer {
    0% {
        opacity: 0;
        transform: translate3d(-34%, -12px, 0) scaleX(1.2);
        filter: blur(24px);
    }

    56% {
        opacity: 0.78;
        transform: translate3d(8%, 2px, 0) scaleX(1.08);
        filter: blur(12px);
    }

    100% {
        opacity: 0.48;
        transform: translate3d(8%, 0, 0) scaleX(1);
        filter: blur(14px);
    }
}

@keyframes seaProfileSurfaceDrift {
    0% {
        opacity: 0.42;
        transform: translate3d(6%, 0, 0) scaleX(0.98);
        filter: blur(14px);
    }

    100% {
        opacity: 0.62;
        transform: translate3d(18%, -4px, 0) scaleX(1.08);
        filter: blur(18px);
    }
}

@keyframes seaProfileSurfaceRipple {
    0% {
        opacity: 0;
        transform: translate3d(0, -16px, 0) scaleX(1.14);
        filter: blur(22px);
    }

    60% {
        opacity: 0.72;
        transform: translate3d(0, 4px, 0) scaleX(1.06);
        filter: blur(12px);
    }

    100% {
        opacity: 0.4;
        transform: translate3d(0, 0, 0) scaleX(1);
        filter: blur(12px);
    }
}

@keyframes seaProfileSurfaceGlide {
    0% {
        opacity: 0.32;
        transform: translate3d(-1%, 0, 0) scaleX(0.98);
        filter: blur(12px);
    }

    100% {
        opacity: 0.54;
        transform: translate3d(5%, 4px, 0) scaleX(1.08);
        filter: blur(17px);
    }
}

@keyframes seaProfileVeilLift {
    0% {
        opacity: 0;
        transform: translate3d(0, 26px, 0) scaleY(0.68);
        filter: blur(20px);
    }

    58% {
        opacity: 0.92;
        transform: translate3d(0, -4px, 0) scaleY(1.06);
        filter: blur(8px);
    }

    100% {
        opacity: 0.84;
        transform: scaleY(1);
        filter: blur(0);
    }
}

@keyframes seaProfileGridDrift {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 0 34px, 42px 0;
    }
}

@keyframes seaProfileRailGlow {
    0% {
        opacity: 0.8;
        box-shadow: 0 0 12px rgba(157, 217, 232, 0.14);
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 28px rgba(157, 217, 232, 0.34);
    }
}

@keyframes seaProfileCurrentSweep {
    0% {
        opacity: 0;
        transform: translate3d(48px, -22px, 0) scale(0.88);
        filter: blur(18px);
    }

    54% {
        opacity: 1;
        transform: translate3d(-6px, 2px, 0) scale(1.05);
        filter: blur(6px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes seaProfileArrowDrift {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
        background-position: 0% 50%, 0 0;
        box-shadow: 0 10px 22px rgba(3, 16, 27, 0.12);
    }

    50% {
        transform: translate3d(8px, -2px, 0);
        background-position: 100% 50%, 0 0;
        box-shadow: 0 16px 28px rgba(3, 16, 27, 0.22);
    }
}

@keyframes seaProfileLayerRise {
    0% {
        opacity: 0;
        transform: translate3d(0, 54px, 0) scale(0.936);
        filter: blur(26px);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -10px, 0) scale(1.04);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes seaProfileLayerFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }

    100% {
        transform: translate3d(0, calc(var(--sea-profile-layer-drift-distance) * -1), 0) scale(1.012);
        filter: blur(0);
    }
}

@keyframes seaProfileBandPulse {
    0% {
        opacity: 0;
        transform: scale(0.94);
    }

    56% {
        opacity: 0.96;
        transform: scale(1.04);
    }

    100% {
        opacity: 0.84;
        transform: scale(1);
    }
}

@keyframes seaProfileBandBreath {
    0% {
        opacity: 0.76;
        transform: scale(0.99);
    }

    100% {
        opacity: 0.98;
        transform: scale(1.05);
    }
}

@keyframes seaProfileMarkerSettle {
    0% {
        opacity: 0;
        transform: translate3d(0, calc(-50% + 42px), 0) scale(0.72);
        filter: blur(20px);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, calc(-50% - 8px), 0) scale(1.08);
        filter: blur(6px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, -50%, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes seaProfileMarkerDriftLeft {
    0%,
    100% {
        transform: translate3d(0, -50%, 0) scale(1);
    }

    50% {
        transform: translate3d(var(--sea-profile-marker-drift-distance), calc(-50% - 3px), 0) scale(1.02);
    }
}

@keyframes seaProfileMarkerDriftRight {
    0%,
    100% {
        transform: translate3d(0, -50%, 0) scale(1);
    }

    50% {
        transform: translate3d(calc(var(--sea-profile-marker-drift-distance) * -1), calc(-50% - 3px), 0) scale(1.02);
    }
}

@keyframes seaProfileMarkerPulse {
    0%,
    100% {
        box-shadow:
            0 0 0 8px rgba(175, 226, 239, 0.08),
            0 0 22px rgba(201, 239, 248, 0.2);
    }

    50% {
        box-shadow:
            0 0 0 11px rgba(175, 226, 239, 0.04),
            0 0 28px rgba(201, 239, 248, 0.3);
    }
}

@keyframes seaProfileCopyReveal {
    0% {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
        filter: blur(16px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes seaProfileCardSettle {
    0% {
        opacity: 0;
        transform: translate3d(0, 30px, 0) scale(0.958);
        filter: blur(18px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

/* 定义 seaAtlasReveal 动画关键帧 */
@keyframes seaAtlasReveal {
/* 控制动画在 from 阶段的状态 */
    from {
        opacity: 0;
        transform: translateY(18px);
    }
/* 控制动画在 to 阶段的状态 */
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 定义 seaRipple 动画关键帧 */
@keyframes seaRipple {
/* 控制动画在 0% 阶段的状态 */
    0% {
        transform: scale(0.78);
        opacity: 0.7;
    }
/* 控制动画在 65% 阶段的状态 */
    65% {
        transform: scale(1.28);
        opacity: 0;
    }
/* 控制动画在 100% 阶段的状态 */
    100% {
        transform: scale(1.28);
        opacity: 0;
    }
}

@keyframes seaAtlasMarkerRise {
    0% {
        opacity: 0;
        transform: var(--sea-marker-transform, translate(-50%, -50%)) scale(0.62);
        filter: blur(6px);
    }

    100% {
        opacity: 1;
        transform: var(--sea-marker-transform, translate(-50%, -50%)) scale(1);
        filter: blur(0);
    }
}

@keyframes seaAtlasMarkerPulse {
    0%,
    100% {
        transform: var(--sea-marker-transform, translate(-50%, -50%)) scale(1);
        filter: drop-shadow(0 0 0 rgba(172, 227, 240, 0));
    }

    50% {
        transform: var(--sea-marker-transform, translate(-50%, -50%)) scale(1.04);
        filter: drop-shadow(0 0 10px rgba(172, 227, 240, 0.32));
    }
}

@keyframes seaAtlasCurrentDrift {
    from {
        background-position: 0 0, 0 0, 0 0;
    }

    to {
        background-position: -40px 20px, 34px -26px, 160px -70px;
    }
}

@keyframes seaRouteLineBreath {
    0% {
        opacity: 0.82;
        filter: drop-shadow(0 0 7px rgba(176, 231, 243, 0.12));
    }

    100% {
        opacity: 0.96;
        filter: drop-shadow(0 0 12px rgba(186, 236, 246, 0.24));
    }
}

@keyframes seaRouteGlowBreath {
    0% {
        opacity: 0.08;
        filter: blur(4px);
    }

    100% {
        opacity: 0.16;
        filter: blur(6px);
    }
}

/* 锚点亮起时只做一次很轻的显形，像路径经过时浮标被海光点亮。 */
@keyframes seaRouteDotReveal {
    0% {
        opacity: 0;
        transform: scale(0.68);
        filter: blur(4px) drop-shadow(0 8px 18px rgba(4, 18, 30, 0.12));
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: drop-shadow(0 8px 18px rgba(4, 18, 30, 0.16));
    }
}

/* 节点卡从轻微下沉和模糊中显形，让它更像一张被海图慢慢托出来的铭牌。 */
@keyframes seaRouteNodeReveal {
    0% {
        opacity: 0;
        filter: blur(12px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
    }
}

/* ============================================
   用户评价
   ============================================ */

/* 评论区标题：
   “用户评价”在这里更像一章新的阅读层，所以单独提一档层级和显现节奏。 */
#spotReviews {
    position: relative;
    margin: 8px 0 0;
    padding-top: 10px;
    color: #0d2d43;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.86rem, 3vw, 2.34rem);
    font-weight: 600;
    line-height: 1.16;
    text-shadow: 0 1px 0 rgba(245, 251, 255, 0.38);
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    filter: blur(14px);
    transition:
        opacity 620ms ease,
        transform 760ms cubic-bezier(0.22, 0.72, 0.2, 1),
        filter 560ms ease;
}

#spotReviews::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 88px;
    height: 1px;
    background: linear-gradient(90deg, rgba(92, 147, 174, 0.68), rgba(92, 147, 174, 0));
}

/* 控制 评论容器的 containment */
#spotReviews,
.reviews-stage {
    contain: layout paint style;
    isolation: isolate;
}

/* 控制 .reviews-stage 的布局、视觉和状态表现 */
.reviews-stage {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: var(--spacing-lg);
    will-change: opacity, transform, filter;
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    filter: blur(14px);
    transition:
        opacity 620ms ease,
        transform 780ms cubic-bezier(0.22, 0.72, 0.2, 1),
        filter 560ms ease;
    transition-delay: 0ms;
}

/* 控制 .reviews-intro 的布局、视觉和状态表现 */
.reviews-intro {
    max-width: 760px;
}

/* 控制 .reviews-kicker 的布局、视觉和状态表现 */
.reviews-kicker {
    margin: 0 0 8px;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(28, 70, 97, 0.8);
}

/* 控制 .reviews-lead 的布局、视觉和状态表现 */
.reviews-lead {
    margin: 0;
    color: rgba(43, 72, 92, 0.94);
    line-height: 1.86;
}

/* 控制 .reviews-filters 的布局、视觉和状态表现 */
.reviews-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* 控制 .review-filter 的布局、视觉和状态表现 */
.review-filter {
    all: unset;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(190, 216, 230, 0.8);
    color: #4f6d83;
    font-size: 0.84rem;
    line-height: 1;
    transition: transform 220ms ease, box-shadow 220ms ease, color 220ms ease, background-color 220ms ease;
}

/* .review-filter:hover 鼠标移入时的样式 */
.review-filter:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(22, 55, 80, 0.08);
}

/* .review-filter.is-active 在对应状态下的样式 */
.review-filter.is-active {
    color: #10395a;
    background: rgba(223, 242, 252, 0.9);
    box-shadow: 0 12px 22px rgba(22, 55, 80, 0.1);
    border-color: rgba(153, 203, 227, 0.9);
}

/* 控制 .reviews-section 的布局、视觉和状态表现 */
.reviews-section {
    display: grid;
    gap: 18px;
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
        opacity 640ms ease,
        transform 820ms cubic-bezier(0.22, 0.72, 0.2, 1);
    transition-delay: 0ms;
    contain: layout paint style;
    isolation: isolate;
    will-change: opacity, transform;
}

/* 控制 .review-card 的布局、视觉和状态表现 */
.review-card {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.82fr);
    gap: 20px;
    padding: 20px;
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.44)),
        rgba(234, 246, 252, 0.56);
    border: 1px solid rgba(201, 220, 232, 0.72);
    box-shadow:
        0 18px 36px rgba(22, 55, 80, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    overflow: hidden;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity 540ms ease,
        transform 720ms cubic-bezier(0.22, 0.72, 0.2, 1),
        box-shadow 260ms ease;
    transition-delay: var(--review-card-shell-delay, 0ms);
    position: relative;
    isolation: isolate;
    contain: layout paint style;
    will-change: opacity, transform;
}

.review-card > * {
    position: relative;
    z-index: 1;
}

.review-card[data-review-primary-focus="diving"] {
    transform: translate3d(-14px, 22px, 0) rotate(-1.2deg);
}

.review-card[data-review-primary-focus="stay"] {
    transform: translate3d(0, 26px, 0) scale(0.985);
}

.review-card[data-review-primary-focus="food"] {
    transform: translate3d(16px, 22px, 0) rotate(1deg);
}

.review-card[data-review-primary-focus="scenery"] {
    transform: translate3d(0, 30px, 0) scale(1.01);
}

/* 控制 .review-card.is-hidden 的布局、视觉和状态表现 */
.review-card.is-hidden {
    display: none;
}

.review-card.is-shell-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}

#spotReviews.is-visible,
.reviews-stage.is-visible,
.reviews-section.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

.detail-reading-section-reviews #spotReviews,
.detail-reading-section-reviews .reviews-stage,
.detail-reading-section-reviews .reviews-section {
    transition:
        opacity 620ms ease,
        transform 780ms cubic-bezier(0.18, 0.78, 0.22, 1),
        filter 560ms ease,
        box-shadow 620ms ease;
}

.detail-reading-section-reviews.is-reading-current #spotReviews.is-visible {
    transform: translate3d(0, -6px, 0);
    text-shadow: 0 14px 28px rgba(8, 27, 40, 0.12);
}

.detail-reading-section-reviews.is-reading-current .reviews-stage.is-visible {
    transform: translate3d(0, -5px, 0);
    filter: saturate(1.03) brightness(1.01);
}

.detail-reading-section-reviews.is-reading-current .reviews-section.is-visible {
    transform: translate3d(0, -6px, 0);
    filter: saturate(1.04) brightness(1.01);
}

/* 控制 .review-body 的布局、视觉和状态表现 */
.review-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* 控制 .review-header 的布局、视觉和状态表现 */
.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 0;
}

/* 控制 .review-author 的布局、视觉和状态表现 */
.review-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* 控制 .review-avatar 的布局、视觉和状态表现 */
.review-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(218, 238, 248, 0.94);
    box-shadow: 0 8px 18px rgba(27, 62, 88, 0.12);
}

/* 控制 .review-meta 的布局、视觉和状态表现 */
.review-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* 控制 .review-user 的布局、视觉和状态表现 */
.review-user {
    font-weight: 700;
    font-size: 1rem;
    color: #0c314a;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 控制 .review-subline 的布局、视觉和状态表现 */
.review-subline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.82rem;
    color: #6c8396;
}

/* 控制 .review-level 的布局、视觉和状态表现 */
.review-level {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(227, 242, 250, 0.88);
    border: 1px solid rgba(189, 216, 229, 0.92);
    color: #27506d;
    font-weight: 600;
}

/* 控制 .review-rating 的布局、视觉和状态表现 */
.review-rating {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    color: #244a67;
}

.review-rating-label {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(54, 105, 130, 0.12);
    background: rgba(13, 77, 102, 0.055);
    color: #365b72;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
}

/* 控制 .review-rating-stars 的布局、视觉和状态表现 */
.review-rating-stars {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-size: 0.94rem;
    letter-spacing: 0.08em;
    line-height: 1;
    color: rgba(240, 180, 60, 0.24);
}

.review-rating-stars::after {
    content: '★★★★★';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--rating-fill, 100%);
    overflow: hidden;
    white-space: nowrap;
    color: #f0b43c;
    text-shadow: 0 0 12px rgba(240, 180, 60, 0.18);
    pointer-events: none;
}

/* 控制 .review-rating-score 的布局、视觉和状态表现 */
.review-rating-score {
    font-size: 0.84rem;
    color: #5e788c;
}

/* 控制 .review-date 的布局、视觉和状态表现 */
.review-date {
    font-size: 0.85rem;
    color: #6c8396;
}

/* 控制 .review-summary 的布局、视觉和状态表现 */
.review-summary {
    color: #45647a;
    line-height: 1.72;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 控制 .review-card.is-expanded .review-summary 的布局、视觉和状态表现 */
.review-card.is-expanded .review-summary {
    display: block;
    overflow: visible;
}

/* 控制 .review-scene 的布局、视觉和状态表现 */
.review-scene {
    display: grid;
    gap: 8px;
}

/* 控制 .review-scene-kicker 的布局、视觉和状态表现 */
.review-scene-kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(42, 92, 124, 0.54);
}

/* 控制 .review-scene-title 的布局、视觉和状态表现 */
.review-scene-title {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: 1.28rem;
    line-height: 1.22;
    color: #143a55;
}

/* 控制 .review-scene-subtitle 的布局、视觉和状态表现 */
.review-scene-subtitle {
    margin: 0;
    color: #56748b;
    line-height: 1.76;
}

/* 控制 .review-actions 的布局、视觉和状态表现 */
.review-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* 控制 .review-expand 的布局、视觉和状态表现 */
.review-expand {
    all: unset;
    cursor: pointer;
    width: fit-content;
    color: #1f5578;
    font-size: 0.84rem;
    font-weight: 600;
    transition: color 220ms ease, transform 220ms ease;
}

.review-expand[hidden] {
    display: none !important;
}

/* .review-expand:hover 鼠标移入时的样式 */
.review-expand:hover {
    color: #0f3c5e;
    transform: translateX(2px);
}

/* 控制 .review-detail-trigger 的布局、视觉和状态表现 */
.review-detail-trigger {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(18, 71, 104, 0.12);
    border: 1px solid rgba(156, 201, 223, 0.66);
    color: #174d71;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease, border-color 220ms ease;
}

/* .review-detail-trigger:hover 鼠标移入时的样式 */
.review-detail-trigger:hover {
    transform: translateY(-2px);
    background: rgba(18, 71, 104, 0.16);
    border-color: rgba(140, 192, 219, 0.88);
    box-shadow: 0 12px 24px rgba(19, 56, 80, 0.12);
}

/* 控制 .review-dimensions 的布局、视觉和状态表现 */
.review-dimensions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* 控制 .review-dimension 的布局、视觉和状态表现 */
.review-dimension {
    min-height: 120px;
    padding: 14px 15px;
    border-radius: 18px;
    background: rgba(244, 250, 255, 0.68);
    border: 1px solid rgba(201, 220, 232, 0.62);
}

/* 控制 .review-dimension-title 的布局、视觉和状态表现 */
.review-dimension-title {
    display: block;
    margin-bottom: 8px;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2c5878;
}

/* 控制 .review-dimension-text 的布局、视觉和状态表现 */
.review-dimension-text {
    margin: 0;
    color: #47667d;
    line-height: 1.7;
    font-size: 0.9rem;
}

/* 控制评论卡内部文字的 reveal 节奏 */
.review-header,
.review-scene,
.review-summary,
.review-actions,
.review-dimension {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    transition:
        opacity 480ms ease,
        transform 680ms cubic-bezier(0.2, 0.82, 0.24, 1),
        filter 520ms ease;
}

.review-header {
    transition-delay: 0ms;
}

.review-scene {
    transition-delay: 60ms;
}

.review-summary {
    transition-delay: 120ms;
}

.review-actions {
    transition-delay: 180ms;
}

.review-dimension:nth-child(1) { transition-delay: 220ms; }
.review-dimension:nth-child(2) { transition-delay: 280ms; }
.review-dimension:nth-child(3) { transition-delay: 340ms; }
.review-dimension:nth-child(4) { transition-delay: 400ms; }

.review-card:not(.is-copy-visible) .review-header,
.review-card:not(.is-copy-visible) .review-scene,
.review-card:not(.is-copy-visible) .review-summary,
.review-card:not(.is-copy-visible) .review-actions,
.review-card:not(.is-copy-visible) .review-dimension {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
}

.review-card.is-copy-visible .review-header,
.review-card.is-copy-visible .review-scene,
.review-card.is-copy-visible .review-summary,
.review-card.is-copy-visible .review-actions,
.review-card.is-copy-visible .review-dimension {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* 控制 .review-gallery 的布局、视觉和状态表现 */
.review-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-content: start;
}

/* 控制 .review-gallery.has-featured-photo 的布局、视觉和状态表现 */
.review-gallery.has-featured-photo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
}

.review-gallery.review-gallery-solo,
.review-gallery.review-gallery-pair {
    grid-template-columns: minmax(0, 1fr);
}

.review-gallery.review-gallery-trio .review-photo-button:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 1 / 0.66;
}

/* 控制 .review-photo-button 的布局、视觉和状态表现 */
.review-photo-button {
    all: unset;
    display: block;
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    aspect-ratio: 1 / 0.82;
    border-radius: 18px;
    overflow: hidden;
    cursor: zoom-in;
    --review-photo-hidden-scale: 1.075;
    --review-photo-visible-scale: 1.012;
    box-shadow: 0 14px 26px rgba(22, 55, 80, 0.12);
}

.review-gallery .review-photo-button {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.986);
    transition:
        opacity 620ms ease,
        transform 760ms cubic-bezier(0.2, 0.84, 0.24, 1),
        box-shadow 260ms ease;
    transition-delay: 0ms;
    min-height: 0;
    contain: layout paint style;
    isolation: isolate;
}

.review-gallery .review-photo-button:nth-child(1) { transition-delay: 120ms; }
.review-gallery .review-photo-button:nth-child(2) { transition-delay: 220ms; }
.review-gallery .review-photo-button:nth-child(3) { transition-delay: 300ms; }
.review-gallery .review-photo-button:nth-child(4) { transition-delay: 380ms; }

.review-gallery .review-photo-button.is-photo-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* 控制 .review-photo 的布局、视觉和状态表现 */
.review-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 320ms ease, filter 320ms ease, opacity 320ms ease;
}

.review-gallery .review-photo-button .review-photo {
    opacity: 0.74;
    transform: scale(var(--review-photo-hidden-scale));
    filter: saturate(0.88) brightness(0.88);
    display: block;
    aspect-ratio: inherit;
}

.review-gallery .review-photo-button.is-photo-visible .review-photo {
    opacity: 1;
    transform: scale(var(--review-photo-visible-scale));
    filter: saturate(1) brightness(1);
}

/* .review-photo-button::before 的底部暗雾，只照顾照片文字可读性 */
.review-photo-button::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    height: 54%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(6, 26, 42, 0), rgba(6, 26, 42, 0.16) 48%, rgba(5, 21, 34, 0.42));
    opacity: 0.82;
}

/* .review-photo-button::after 的流光层默认收在照片外，避免形成静态幕布 */
.review-photo-button::after {
    content: "";
    position: absolute;
    top: -18%;
    bottom: -18%;
    left: 0;
    z-index: 2;
    width: 34%;
    pointer-events: none;
    background: linear-gradient(108deg, rgba(255, 255, 255, 0), rgba(229, 248, 255, 0.1) 42%, rgba(255, 255, 255, 0.28) 50%, rgba(182, 230, 243, 0.08) 58%, rgba(255, 255, 255, 0));
    filter: blur(16px);
    mix-blend-mode: screen;
    opacity: 0;
    transform: translate3d(-150%, 0, 0) skewX(-10deg);
    transition:
        opacity 420ms ease,
        transform 760ms cubic-bezier(0.2, 0.78, 0.24, 1);
}

/* .review-photo-button:hover .review-photo 鼠标移入时的样式 */
.review-photo-button:hover .review-photo,
.review-photo-button:focus-visible .review-photo {
    transform: scale(calc(var(--review-photo-visible-scale) + 0.038));
    filter: saturate(1.04);
}

/* .review-photo-button:hover::after 的流光层 */
.review-photo-button:hover::after,
.review-photo-button:focus-visible::after {
    opacity: 0.68;
    transform: translate3d(330%, 0, 0) skewX(-10deg);
}

/* 控制 .review-featured-photo-button 的布局、视觉和状态表现 */
.review-featured-photo-button {
    --review-photo-hidden-scale: 1.1;
    --review-photo-visible-scale: 1.02;
    grid-column: 1 / -1;
    aspect-ratio: 1 / 0.66;
}

/* .review-featured-photo-button:hover .review-featured-photo 鼠标移入时的样式 */
.review-featured-photo-button:hover .review-featured-photo {
    transform: scale(calc(var(--review-photo-visible-scale) + 0.03));
}

/* 控制 .review-photo-caption-featured 的布局、视觉和状态表现 */
.review-photo-caption-featured {
    left: 16px;
    right: 16px;
    bottom: 16px;
    font-size: 0.84rem;
}

/* 控制 .review-photo-caption 的布局、视觉和状态表现 */
.review-photo-caption {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    font-size: 0.78rem;
    color: rgba(244, 249, 255, 0.92);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.34);
}

/* ============================================
   预订与能力匹配
   ============================================ */

/* 控制 .booking-sidebar 的布局、视觉和状态表现 */
.booking-sidebar {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: var(--detail-sidebar-stick-top);
    align-self: start;
    z-index: 6;
}

/* 控制 .booking-sticky 的布局、视觉和状态表现 */
.booking-sticky {
    --booking-copy-stick-top: 0px;
    --booking-copy-stick-height: 0px;
    --booking-sticky-stack-gap: 18px;
    --booking-focus-panel-stick-top: calc(
        var(--booking-copy-stick-top, 0px) +
        var(--booking-copy-stick-height, 0px) +
        var(--booking-sticky-stack-gap, 18px)
    );
    --booking-sticky-focus-context-duration: 560ms;
    --booking-sticky-focus-context-easing: cubic-bezier(0.18, 0.82, 0.22, 1);
    --booking-sticky-focus-shift: 0px;
    --booking-sticky-reading-translate-y: 0px;
    --booking-sticky-focus-motion-translate-y: 0px;
    position: static;
    max-height: calc(100vh - var(--detail-sidebar-stick-top) - var(--detail-sidebar-stick-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(110, 159, 184, 0.42) transparent;
    background:
        linear-gradient(145deg, rgba(204, 223, 233, 0.8), rgba(174, 195, 208, 0.66)),
        rgba(162, 187, 201, 0.8);
    border-radius: 28px;
    padding: 28px 24px;
    box-shadow:
        0 22px 46px rgba(22, 55, 80, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
    border: 1px solid rgba(128, 160, 178, 0.76);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform: translate3d(
        0,
        calc(var(--booking-sticky-reading-translate-y, 0px) + var(--booking-sticky-focus-motion-translate-y, 0px)),
        0
    );
    transition:
        --booking-copy-stick-top var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        --booking-copy-stick-height var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        --booking-sticky-stack-gap var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        background 420ms ease,
        border-color 320ms ease,
        box-shadow 420ms ease,
        transform var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing);
}

.booking-sticky[data-reading-zone="overview"] {
    background:
        linear-gradient(145deg, rgba(201, 220, 231, 0.82), rgba(173, 194, 207, 0.68)),
        rgba(164, 189, 203, 0.8);
}

.booking-sticky[data-reading-zone="map"] {
    background:
        linear-gradient(152deg, rgba(199, 219, 230, 0.82), rgba(171, 191, 204, 0.68)),
        rgba(160, 182, 196, 0.8);
    border-color: rgba(128, 160, 178, 0.84);
}

.booking-sticky[data-reading-zone="reviews"] {
    background:
        linear-gradient(165deg, rgba(195, 216, 227, 0.82), rgba(166, 187, 201, 0.66)),
        rgba(156, 180, 194, 0.8);
    box-shadow:
        0 28px 52px rgba(18, 45, 66, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.booking-sticky[data-reading-zone="related"] {
    background:
        linear-gradient(162deg, rgba(188, 208, 220, 0.8), rgba(160, 181, 195, 0.62)),
        rgba(152, 175, 190, 0.78);
    --booking-sticky-reading-translate-y: -6px;
}

.booking-sticky::-webkit-scrollbar {
    width: 7px;
}

.booking-sticky::-webkit-scrollbar-track {
    background: transparent;
}

.booking-sticky::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(133, 182, 205, 0.42), rgba(84, 133, 161, 0.28));
}

.booking-sticky::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(123, 175, 200, 0.58), rgba(77, 128, 158, 0.42));
}

/* 控制 .price-badge 的布局、视觉和状态表现 */
.price-badge {
    background: linear-gradient(135deg, #1d5d88 0%, #0f3f63 100%);
    color: white;
    padding: 18px 20px;
    border-radius: 22px;
    text-align: center;
    margin-bottom: 18px;
    box-shadow: 0 18px 34px rgba(15, 49, 73, 0.2);
}

.booking-sticky .price-badge,
.booking-sticky .booking-match,
.booking-sticky .booking-note {
    transform-origin: top center;
    overflow: hidden;
    transition:
        max-height var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        margin-top var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        margin-bottom var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        padding-top var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        padding-bottom var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        border-color 320ms ease,
        opacity var(--booking-sticky-focus-context-duration) ease,
        transform var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing);
}

.booking-sticky .price-badge {
    max-height: 220px;
}

.booking-sticky .booking-match {
    max-height: 150px;
}

.booking-sticky .booking-note {
    max-height: 520px;
}

/* 控制 .price-label 的布局、视觉和状态表现 */
.price-label {
    display: block;
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: var(--spacing-sm);
}

/* 控制 .price-amount 的布局、视觉和状态表现 */
.price-amount {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* 控制 .price-period 的布局、视觉和状态表现 */
.price-period {
    display: block;
    font-size: 0.85rem;
    opacity: 0.9;
    margin-top: var(--spacing-sm);
}

/* 控制 .booking-match 的布局、视觉和状态表现 */
.booking-match {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.booking-sticky[data-focus-context-phase="entering"],
.booking-sticky[data-focus-context-phase="leaving"] {
    max-height: calc(100vh - var(--detail-sidebar-stick-top) - var(--detail-sidebar-stick-bottom));
    overflow-y: auto;
}

.booking-sticky.is-focus-only-context {
    --booking-focus-panel-stick-top: 0px;
    scrollbar-width: none;
}

.booking-sticky.is-focus-only-context[data-reading-zone="reviews"]:not(.is-booking-copy-collapsed),
.booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="entering-prep"]:not(.is-booking-copy-collapsed),
.booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="entering"]:not(.is-booking-copy-collapsed),
.booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="settling"]:not(.is-booking-copy-collapsed) {
    --booking-focus-panel-stick-top: calc(
        var(--booking-copy-stick-top, 0px) +
        var(--booking-copy-stick-height, 0px) +
        var(--booking-sticky-stack-gap, 18px)
    );
}

.booking-sticky[data-reading-zone="reviews"].is-booking-copy-collapsed {
    --booking-focus-panel-stick-top: 0px;
}

.booking-sticky.is-focus-only-context[data-reading-zone="reviews"] {
    overflow-y: hidden;
    overscroll-behavior-y: contain;
}

.booking-sticky.is-focus-only-context::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.booking-sticky.is-focus-only-context .price-badge,
.booking-sticky.is-focus-only-context .booking-match,
.booking-sticky.is-focus-only-context .booking-note {
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    max-height: 0;
    overflow: hidden;
    transform: translate3d(0, -12px, 0) scale(0.988);
    pointer-events: none;
}

.booking-sticky:not(.is-focus-only-context):not([data-focus-context-phase]) .booking-copy {
    position: relative;
    top: auto;
    z-index: auto;
}

.booking-sticky:not(.is-focus-only-context):not([data-focus-context-phase]) .booking-focus-panel {
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    opacity: 0;
    box-shadow: none;
    transform: translate3d(0, 16px, 0) scale(0.992);
    pointer-events: none;
}

.booking-sticky[data-focus-context-motion="entering-prep"],
.booking-sticky[data-focus-context-motion="entering"] {
    --booking-focus-panel-stick-top: 0px;
    --booking-sticky-focus-motion-translate-y: 0px;
}

.booking-sticky[data-focus-context-motion="leaving-prep"] {
    --booking-focus-panel-stick-top: 0px;
    --booking-sticky-focus-motion-translate-y: 0px;
}

.booking-sticky[data-focus-context-motion="leaving"] {
    --booking-sticky-focus-motion-translate-y: 0px;
}

.booking-sticky[data-focus-context-motion="entering"],
.booking-sticky[data-focus-context-motion="leaving"] {
    will-change: transform;
}

.booking-sticky[data-focus-context-motion="entering-prep"] .price-badge,
.booking-sticky[data-focus-context-motion="entering-prep"] .booking-match,
.booking-sticky[data-focus-context-motion="entering-prep"] .booking-note,
.booking-sticky[data-focus-context-motion="entering-prep"] .booking-copy {
    opacity: 0;
    pointer-events: none;
    filter: blur(8px) saturate(0.92);
    transform: translate3d(0, -12px, 0) scale(0.988);
    transition:
        opacity 300ms ease,
        filter 360ms ease,
        transform 420ms var(--booking-sticky-focus-context-easing);
}

.booking-sticky[data-focus-context-motion="entering-prep"] .itinerary-list {
    opacity: 0;
    pointer-events: none;
    filter: blur(8px) saturate(0.92);
    transform: translate3d(0, 16px, 0) scale(0.988);
    transition:
        opacity 300ms ease,
        filter 360ms ease,
        transform 420ms var(--booking-sticky-focus-context-easing);
}

.booking-sticky[data-focus-context-motion="entering-prep"] .booking-focus-panel {
    max-height: 760px;
    margin-bottom: var(--booking-sticky-stack-gap, 18px);
    padding-top: 16px;
    padding-bottom: 16px;
    border-width: 1px;
    opacity: 0.16;
    filter: blur(10px) saturate(0.9);
    overflow: visible;
    pointer-events: none;
    --booking-focus-panel-motion-translate-y: 22px;
    --booking-focus-panel-motion-scale: 0.986;
    transition:
        max-height 520ms var(--booking-sticky-focus-context-easing),
        margin-bottom 520ms var(--booking-sticky-focus-context-easing),
        padding-top 520ms var(--booking-sticky-focus-context-easing),
        padding-bottom 520ms var(--booking-sticky-focus-context-easing),
        opacity 360ms ease,
        filter 420ms ease,
        transform 620ms var(--booking-sticky-focus-context-easing),
        border-width 520ms var(--booking-sticky-focus-context-easing);
}

.booking-sticky[data-focus-context-motion="entering-prep"]:not(.is-focus-only-context):not([data-focus-context-phase]) .booking-focus-panel {
    opacity: 0.14;
    filter: blur(10px) saturate(0.9);
    box-shadow:
        0 14px 28px rgba(4, 20, 34, 0.12),
        inset 0 1px 0 rgba(243, 249, 252, 0.08);
}

.booking-sticky[data-focus-context-motion="entering"] .price-badge,
.booking-sticky[data-focus-context-motion="entering"] .booking-match,
.booking-sticky[data-focus-context-motion="entering"] .booking-note,
.booking-sticky[data-focus-context-motion="entering"] .booking-focus-panel,
.booking-sticky[data-focus-context-motion="entering"] .itinerary-list,
.booking-sticky[data-focus-context-motion="leaving"] .price-badge,
.booking-sticky[data-focus-context-motion="leaving"] .booking-match,
.booking-sticky[data-focus-context-motion="leaving"] .booking-note,
.booking-sticky[data-focus-context-motion="leaving"] .booking-focus-panel,
.booking-sticky[data-focus-context-motion="leaving"] .itinerary-list {
    will-change: opacity, transform;
}

.booking-sticky[data-focus-context-motion="entering"] .price-badge,
.booking-sticky[data-focus-context-motion="entering"] .booking-match,
.booking-sticky[data-focus-context-motion="entering"] .booking-note,
.booking-sticky[data-focus-context-motion="leaving-prep"] .price-badge,
.booking-sticky[data-focus-context-motion="leaving-prep"] .booking-match,
.booking-sticky[data-focus-context-motion="leaving-prep"] .booking-note {
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translate3d(0, -12px, 0) scale(0.988);
}

.booking-sticky[data-focus-context-motion="leaving"] .price-badge,
.booking-sticky[data-focus-context-motion="leaving"] .booking-match,
.booking-sticky[data-focus-context-motion="leaving"] .booking-note {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
}

.booking-sticky[data-focus-context-motion="entering"] .booking-copy,
.booking-sticky[data-focus-context-motion="settling"] .booking-copy,
.booking-sticky[data-focus-context-motion="leaving-prep"] .booking-copy,
.booking-sticky.is-focus-only-context .booking-copy {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, -16px, 0) scale(0.986);
}

.booking-sticky[data-focus-context-motion="entering"] .booking-copy,
.booking-sticky[data-focus-context-motion="leaving-prep"] .booking-copy,
.booking-sticky.is-focus-only-context .booking-copy {
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    box-shadow: none;
    background: rgba(255, 255, 255, 0);
}

.booking-sticky[data-focus-context-motion="leaving"] .booking-copy {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
}

.booking-sticky.is-focus-only-context[data-reading-zone="reviews"] .booking-copy:not(.is-collapsed-for-focus),
.booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="entering-prep"] .booking-copy:not(.is-collapsed-for-focus),
.booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="entering"] .booking-copy:not(.is-collapsed-for-focus),
.booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="settling"] .booking-copy:not(.is-collapsed-for-focus) {
    position: relative;
    top: auto;
    z-index: 4;
    opacity: 1;
    max-height: 320px;
    margin-bottom: var(--booking-sticky-stack-gap, 18px);
    padding-top: 14px;
    padding-bottom: 16px;
    border-color: rgba(194, 220, 232, 0.48);
    box-shadow:
        0 18px 34px rgba(13, 43, 63, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
    background:
        linear-gradient(148deg, rgba(250, 253, 255, 0.78), rgba(228, 242, 248, 0.52)),
        rgba(255, 255, 255, 0.18);
    filter: none;
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: auto;
}

.booking-sticky.is-focus-only-context[data-reading-zone="reviews"]:not(.is-booking-copy-collapsed) .booking-focus-panel.is-review-context,
.booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="entering"]:not(.is-booking-copy-collapsed) .booking-focus-panel.is-review-context,
.booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="settling"]:not(.is-booking-copy-collapsed) .booking-focus-panel.is-review-context {
    position: relative;
    top: auto;
    z-index: 5;
    gap: 12px;
    min-height: clamp(290px, 34svh, 360px);
    padding-block: 14px;
}

.booking-sticky.is-focus-only-context[data-reading-zone="reviews"].is-booking-copy-collapsed .booking-focus-panel.is-review-context {
    position: sticky;
    top: 0;
}

.booking-sticky.is-focus-only-context[data-reading-zone="reviews"]:not(.is-booking-copy-collapsed) .booking-focus-summary,
.booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="entering"]:not(.is-booking-copy-collapsed) .booking-focus-summary,
.booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="settling"]:not(.is-booking-copy-collapsed) .booking-focus-summary {
    font-size: 0.84rem;
    line-height: 1.62;
}

.booking-sticky[data-focus-context-motion="leaving-prep"] .price-badge,
.booking-sticky[data-focus-context-motion="leaving-prep"] .booking-match,
.booking-sticky[data-focus-context-motion="leaving-prep"] .booking-note,
.booking-sticky[data-focus-context-motion="leaving-prep"] .booking-copy {
    transition: none !important;
}

/* 控制 .booking-match-chip 的布局、视觉和状态表现 */
.booking-match-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(230, 244, 252, 0.9);
    border: 1px solid rgba(185, 217, 232, 0.88);
    color: #27506d;
    font-size: 0.78rem;
    line-height: 1;
}

/* 控制 .booking-match-link 的布局、视觉和状态表现 */
.booking-match-link {
    all: unset;
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    background: rgba(230, 244, 252, 0.9);
    border: 1px solid rgba(185, 217, 232, 0.88);
    color: #27506d;
    font-size: 0.78rem;
    line-height: 1;
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

/* .booking-match-link:hover 鼠标移入时的样式 */
.booking-match-link:hover {
    transform: translate3d(0, -2px, 0);
    border-color: rgba(129, 182, 209, 0.96);
    box-shadow: 0 10px 18px rgba(14, 55, 82, 0.14);
}

.booking-match-floating-root {
    position: fixed;
    inset: 0;
    z-index: 1840;
    pointer-events: none;
}

.booking-sticky[data-focus-return-phase="returning"] .booking-focus-panel {
    max-height: 520px;
    margin-bottom: var(--booking-sticky-stack-gap, 18px);
    padding-top: 16px;
    padding-bottom: 16px;
    border-width: 1px;
    border-color: rgba(164, 213, 232, 0.2);
    opacity: 1;
    box-shadow:
        0 18px 36px rgba(4, 20, 34, 0.22),
        inset 0 1px 0 rgba(243, 249, 252, 0.14);
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
    overflow: hidden;
    transition: none;
    will-change: transform, opacity, filter;
    z-index: 5;
    pointer-events: none;
}

.booking-focus-panel.is-receiving-modal-return {
    opacity: 0.52 !important;
    transform: translate3d(0, 6px, 0) scale(0.988) !important;
    filter: blur(1.4px) saturate(0.92) brightness(1.01);
    box-shadow:
        0 14px 28px rgba(4, 20, 34, 0.16),
        0 0 0 1px rgba(173, 216, 236, 0.08) !important;
    pointer-events: none;
}

.booking-match-floating-root[aria-hidden="true"] {
    display: none;
}

.booking-match-floating-confirm {
    position: absolute;
    min-width: 240px;
    max-width: 320px;
    padding: 12px 18px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 22% 20%, rgba(175, 221, 238, 0.35), transparent 45%),
        linear-gradient(160deg, rgba(10, 28, 45, 0.95), rgba(5, 16, 24, 0.9));
    border: 1px solid rgba(165, 214, 232, 0.3);
    box-shadow:
        0 24px 48px rgba(2, 9, 18, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 8px, 0) scale(0.98);
    transition:
        opacity 220ms ease,
        transform 260ms cubic-bezier(0.22, 0.78, 0.3, 1),
        visibility 0s linear 220ms;
    z-index: 1850;
}

.booking-match-floating-confirm.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
}

.booking-match-floating-confirm.is-closing {
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    transform: translate3d(0, 10px, 0) scale(0.972);
}

.booking-match-floating-confirm::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: inherit;
    border: inherit;
    border-radius: 4px;
    transform: rotate(45deg);
    right: 22px;
    top: 100%;
    box-shadow:
        0 12px 24px rgba(3, 10, 18, 0.25);
    opacity: 0.95;
}

.booking-match-floating-confirm[data-placement='top']::after {
    top: auto;
    bottom: 100%;
    transform: rotate(45deg);
}

.booking-match-floating-confirm > * {
    color: rgba(235, 247, 255, 0.92);
    font-size: 0.85rem;
    line-height: 1.4;
}

.booking-match-floating-confirm p {
    margin: 0;
}

.booking-match-floating-confirm .booking-match-floating-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.booking-match-floating-confirm .booking-match-floating-actions {
    margin-top: 6px;
    display: flex;
    gap: 8px;
}

.booking-match-floating-confirm .booking-match-floating-actions button {
    flex: 1;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(181, 212, 226, 0.5);
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease;
}

.booking-match-floating-confirm .booking-match-floating-actions button:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 960px) {
    .booking-match-floating-confirm {
        left: auto;
        right: 16px;
        min-width: 200px;
        max-width: 260px;
    }
    .booking-match-floating-confirm::after {
        right: 16px;
    }
}

/* 控制 .booking-copy 的布局、视觉和状态表现 */
.booking-copy {
    position: sticky;
    top: var(--booking-copy-stick-top, 0px);
    z-index: 5;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: var(--booking-sticky-stack-gap, 18px);
    max-height: 320px;
    padding: 14px 16px 16px;
    border-radius: 24px;
    background:
        linear-gradient(148deg, rgba(250, 253, 255, 0.78), rgba(228, 242, 248, 0.52)),
        rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(194, 220, 232, 0.48);
    box-shadow:
        0 16px 30px rgba(13, 43, 63, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform-origin: top center;
    transition:
        max-height var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        margin-bottom var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        padding-top var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        padding-bottom var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        opacity var(--booking-sticky-focus-context-duration) ease,
        transform var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        top var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        border-color 320ms ease,
        box-shadow 420ms ease,
        background 420ms ease,
        filter var(--booking-sticky-focus-context-duration) ease;
}

.booking-copy.is-reading-current {
    box-shadow:
        0 18px 34px rgba(13, 43, 63, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.booking-copy[data-reading-zone="map"] {
    background:
        linear-gradient(148deg, rgba(247, 251, 255, 0.82), rgba(223, 237, 244, 0.58)),
        rgba(255, 255, 255, 0.18);
}

.booking-copy[data-reading-zone="reviews"] {
    background:
        linear-gradient(148deg, rgba(244, 249, 253, 0.76), rgba(217, 233, 241, 0.56)),
        rgba(255, 255, 255, 0.18);
    border-color: rgba(172, 206, 224, 0.56);
}

.booking-copy > * {
    position: relative;
    z-index: 1;
}

.booking-copy::after {
    content: "";
    position: absolute;
    inset: -10px -14px;
    z-index: 0;
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 30%, rgba(214, 241, 250, 0.54), transparent 34%),
        linear-gradient(118deg, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0.34) 46%, rgba(255, 255, 255, 0) 68%);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-20px, 12px, 0) scale(0.98);
    filter: blur(18px);
}

.booking-copy.is-swapping-out {
    opacity: 0.76;
    transform: translate3d(0, 8px, 0) scale(0.988);
    filter: saturate(0.94);
}

.booking-copy.is-swapping-in {
    animation: bookingGuideBlockIn 780ms cubic-bezier(0.18, 0.78, 0.22, 1) both;
}

/* 潜水匹配文案作为套餐侧栏的第一层说明。
   这里不再是整句一起淡入，而是像有人在安静地把文字一行一行敲出来。 */
.booking-kicker-line,
.booking-title-line,
.booking-intro-line {
    display: block;
    min-height: 1em;
    will-change: opacity, transform;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

.booking-kicker-line {
    --booking-copy-line-delay: 0ms;
}

.booking-title-line {
    --booking-copy-line-delay: 65ms;
}

.booking-intro-line {
    --booking-copy-line-delay: 130ms;
}

/* 控制 .booking-kicker 的布局、视觉和状态表现 */
.booking-kicker {
    margin: 0 0 8px;
    font-size: 0.72rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(46, 91, 120, 0.56);
}

/* 控制 .booking-title 的布局、视觉和状态表现 */
.booking-title {
    font-size: 1.28rem;
    margin-bottom: 12px;
    color: #10344d;
    letter-spacing: 0.01em;
}

/* 控制 .booking-intro 的布局、视觉和状态表现 */
.booking-intro {
    margin: 0;
    color: #3f627a;
    line-height: 1.78;
}

/* 逐字敲出的最小字符单元。
   默认稍微模糊、稍微下沉，出现时再轻轻上浮并变清晰。 */
.booking-type-char {
    display: inline-block;
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(0, 10px, 0);
    transition:
        opacity 0.5s ease,
        transform 0.82s cubic-bezier(0.2, 0.78, 0.22, 1),
        filter 0.78s ease;
}

/* 空格本身不需要占成一个“漂浮字符”，直接保持自然间距即可。 */
.booking-type-char.is-space {
    min-width: 0.3em;
}

/* 当前字符真正被“敲出来”时的状态。 */
.booking-type-char.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
}

/* 标题完全显形后给一次很轻的停稳感，让这组文案像在静水里站住 */
@keyframes bookingCopySettle {
    0% {
        transform: translate3d(0, 0, 0);
    }

    42% {
        transform: translate3d(0, -2px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

/* 当整段文字都打完后，只给标题一层极轻的停稳感，不做明显弹跳。 */
.booking-copy.is-typed .booking-title-line {
    animation: bookingCopySettle 1.7s ease-out 1 both;
}

@keyframes bookingGuideLineOut {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
        filter: blur(10px);
    }
}

@keyframes bookingGuideLineIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
        filter: blur(12px);
    }

    58% {
        opacity: 1;
        transform: translate3d(0, -2px, 0);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes bookingGuideGlow {
    0% {
        opacity: 0;
        transform: translate3d(-24px, 12px, 0) scale(0.98);
        filter: blur(20px);
    }

    36% {
        opacity: 0.78;
    }

    100% {
        opacity: 0;
        transform: translate3d(12px, -3px, 0) scale(1.04);
        filter: blur(10px);
    }
}

@keyframes bookingGuideBlockIn {
    0% {
        opacity: 0.72;
        transform: translate3d(0, 14px, 0) scale(0.986);
        filter: saturate(0.92);
    }

    56% {
        opacity: 1;
        transform: translate3d(0, -2px, 0) scale(1);
        filter: saturate(1.03);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: saturate(1);
    }
}

.booking-copy.is-swapping-out .booking-kicker-line,
.booking-copy.is-swapping-out .booking-title-line,
.booking-copy.is-swapping-out .booking-intro-line {
    animation: bookingGuideLineOut 300ms ease both;
    animation-delay: calc(var(--booking-copy-line-delay) * 0.35);
}

.booking-copy.is-swapping-in .booking-kicker-line,
.booking-copy.is-swapping-in .booking-title-line,
.booking-copy.is-swapping-in .booking-intro-line {
    animation: bookingGuideLineIn 860ms cubic-bezier(0.18, 0.78, 0.22, 1) both;
    animation-delay: var(--booking-copy-line-delay);
}

.booking-copy.is-swapping-in::after {
    animation: bookingGuideGlow 980ms cubic-bezier(0.18, 0.78, 0.22, 1) both;
}

.booking-copy.is-collapsed-for-focus {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    box-shadow: none;
    background: rgba(255, 255, 255, 0);
    transform: translate3d(0, -18px, 0) scale(0.985);
    pointer-events: none;
}

.booking-copy.is-collapsed-for-focus::after {
    opacity: 0;
}

/* 评论阅读中的套餐焦点舱：
   让价格、当前套餐名和适合人群在侧栏内部持续停驻，
   用户读评论时不需要只靠高亮卡片猜现在对应的是哪一套安排。 */
.booking-focus-panel {
    --booking-focus-panel-reading-translate-y: 0px;
    --booking-focus-panel-reading-scale: 1;
    --booking-focus-panel-motion-translate-y: 0px;
    --booking-focus-panel-motion-scale: 1;
    --booking-focus-panel-commit-translate-y: 0px;
    position: sticky;
    contain: layout paint style;
    isolation: isolate;
    top: var(--booking-focus-panel-stick-top, 0px);
    z-index: 4;
    isolation: isolate;
    display: grid;
    gap: 14px;
    margin-bottom: var(--booking-sticky-stack-gap, 18px);
    padding: 16px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 18%, rgba(136, 210, 233, 0.18), transparent 34%),
        linear-gradient(165deg, rgba(17, 54, 79, 0.96), rgba(8, 34, 52, 0.94) 58%, rgba(10, 45, 66, 0.92) 100%);
    border: 1px solid rgba(164, 213, 232, 0.2);
    max-height: 760px;
    opacity: 1;
    box-shadow:
        0 18px 36px rgba(4, 20, 34, 0.22),
        inset 0 1px 0 rgba(243, 249, 252, 0.14);
    overflow: hidden;
    transform-origin: top center;
    transform: translate3d(
        0,
        calc(
            var(--booking-focus-panel-reading-translate-y, 0px) +
            var(--booking-focus-panel-motion-translate-y, 0px) +
            var(--booking-focus-panel-commit-translate-y, 0px)
        ),
        0
    ) scale(calc(
        var(--booking-focus-panel-reading-scale, 1) *
        var(--booking-focus-panel-motion-scale, 1)
    ));
    transition:
        top var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        max-height var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        margin-bottom var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        padding-top var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        padding-bottom var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        opacity var(--booking-sticky-focus-context-duration) ease,
        transform var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        border-width var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        box-shadow 420ms ease,
        border-color 320ms ease,
        background 620ms ease;
}

.booking-focus-panel[data-reading-zone="overview"] {
    border-color: rgba(164, 213, 232, 0.22);
}

.booking-focus-panel[data-reading-zone="map"] {
    border-color: rgba(179, 222, 237, 0.28);
    box-shadow:
        0 20px 38px rgba(4, 20, 34, 0.2),
        inset 0 1px 0 rgba(243, 249, 252, 0.16);
}

.booking-focus-panel[data-reading-zone="reviews"] {
    --booking-focus-panel-reading-translate-y: 14px;
    border-color: rgba(193, 232, 247, 0.32);
    box-shadow:
        0 24px 42px rgba(4, 20, 34, 0.26),
        inset 0 1px 0 rgba(243, 249, 252, 0.18);
}

.booking-focus-panel[data-reading-zone="related"] {
    --booking-focus-panel-reading-translate-y: -8px;
    --booking-focus-panel-reading-scale: 1.01;
    border-color: rgba(196, 232, 244, 0.24);
}

.booking-sticky[data-focus-context-phase="entering"] .booking-focus-panel,
.booking-sticky[data-focus-context-phase="leaving"] .booking-focus-panel {
    max-height: 760px;
    margin-bottom: var(--booking-sticky-stack-gap, 18px);
    padding-top: 16px;
    padding-bottom: 16px;
    border-width: 1px;
    opacity: 1;
    overflow: visible;
}

.booking-sticky[data-focus-context-motion="entering"] .booking-focus-panel {
    opacity: 1 !important;
    filter: blur(0) saturate(1);
    pointer-events: none;
    --booking-focus-panel-motion-translate-y: 8px;
    --booking-focus-panel-motion-scale: 0.998;
}

.booking-sticky[data-focus-context-motion="entering"] .booking-focus-panel {
    transition:
        top var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        max-height var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        margin-bottom var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        padding-top var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        padding-bottom var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        opacity 520ms ease 180ms,
        transform var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        border-width var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        box-shadow 620ms ease,
        border-color 520ms ease,
        background 680ms ease;
}

.booking-sticky[data-focus-context-motion="leaving-prep"] .booking-focus-panel {
    opacity: 0;
    pointer-events: none;
    --booking-focus-panel-motion-translate-y: 0px;
    --booking-focus-panel-motion-scale: 1;
    transition:
        opacity 180ms ease,
        transform 260ms var(--booking-sticky-focus-context-easing);
}

.booking-sticky[data-focus-context-motion="leaving"] .booking-focus-panel {
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    border-color: transparent;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    --booking-focus-panel-motion-translate-y: 16px;
    --booking-focus-panel-motion-scale: 0.992;
    box-shadow: none;
    transition:
        top var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        max-height var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        margin-bottom var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        padding-top var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        padding-bottom var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        opacity 180ms ease,
        transform var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        border-width var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        box-shadow 420ms ease,
        border-color 320ms ease;
}

.booking-focus-panel.is-originating {
    opacity: 0.22 !important;
    transform: translate3d(0, 0, 0) scale(0.994) !important;
    filter: saturate(0.82) brightness(0.98);
    box-shadow:
        0 12px 24px rgba(22, 55, 80, 0.05),
        0 0 0 1px rgba(173, 216, 236, 0.04) !important;
}

.booking-focus-panel::before {
    content: "";
    position: absolute;
    inset: -32% 24% auto -18%;
    height: 74%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(173, 229, 243, 0.28), transparent 72%);
    opacity: 0.82;
    pointer-events: none;
    filter: blur(10px);
}

.booking-focus-panel::after {
    content: "";
    position: absolute;
    inset: -22% 16% 22% -14%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 28% 48%, rgba(173, 229, 243, 0.26), transparent 48%),
        linear-gradient(118deg, rgba(255, 255, 255, 0) 26%, rgba(219, 242, 248, 0.24) 50%, rgba(255, 255, 255, 0) 74%);
    opacity: 0;
    pointer-events: none;
    filter: blur(20px);
    transform: translate3d(-18px, 14px, 0) scale(0.98);
}

.booking-focus-panel > * {
    position: relative;
    z-index: 1;
}

.booking-focus-head,
.booking-focus-copy {
    display: grid;
    gap: 8px;
}

.booking-focus-head {
    --booking-focus-swap-delay: 0ms;
}

.booking-focus-state,
.booking-focus-overline,
.booking-focus-summary {
    margin: 0;
}

.booking-focus-state {
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    color: rgba(211, 236, 245, 0.82);
}

.booking-focus-overline {
    font-size: 0.64rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(176, 220, 234, 0.58);
}

.booking-focus-main {
    --booking-focus-swap-delay: 65ms;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.booking-focus-title {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.48;
    color: rgba(244, 250, 253, 0.98);
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
}

.booking-focus-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.booking-focus-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(180, 223, 237, 0.2);
    background: rgba(244, 250, 253, 0.08);
    color: rgba(228, 244, 249, 0.84);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.booking-focus-chip-booked {
    background:
        linear-gradient(180deg, rgba(231, 247, 252, 0.2), rgba(140, 202, 228, 0.1)),
        rgba(255, 255, 255, 0.06);
    border-color: rgba(184, 228, 241, 0.28);
    color: rgba(242, 249, 252, 0.96);
    box-shadow:
        inset 0 1px 0 rgba(247, 251, 253, 0.14),
        0 10px 20px rgba(6, 25, 39, 0.12);
}

.booking-focus-price-wrap {
    display: grid;
    gap: 5px;
    min-width: 112px;
    padding: 10px 12px 9px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(240, 249, 252, 0.1), rgba(155, 208, 228, 0.055)),
        rgba(255, 255, 255, 0.028);
    border: 1px solid rgba(180, 223, 237, 0.12);
    box-shadow: inset 0 1px 0 rgba(247, 251, 253, 0.08);
}

.booking-focus-price-label {
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(187, 224, 236, 0.58);
}

.booking-focus-price {
    font-size: 1.14rem;
    font-weight: 650;
    color: rgba(238, 248, 252, 0.88);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.booking-focus-summary {
    --booking-focus-swap-delay: 125ms;
    color: rgba(217, 238, 246, 0.86);
    font-size: 0.88rem;
    line-height: 1.76;
}

.booking-focus-echo-slot {
    --booking-focus-swap-delay: 155ms;
    display: grid;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    border-top: 1px solid transparent;
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition:
        max-height 360ms cubic-bezier(0.18, 0.78, 0.22, 1),
        padding-top 320ms ease,
        border-color 320ms ease,
        opacity 320ms ease,
        transform 420ms cubic-bezier(0.18, 0.78, 0.22, 1);
}

.booking-focus-panel.has-booking-focus-echo .booking-focus-echo-slot {
    max-height: 112px;
    padding-top: 10px;
    border-top-color: rgba(181, 223, 237, 0.16);
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.booking-focus-echo {
    display: grid;
    gap: 4px;
    padding: 11px 12px 10px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(246, 251, 254, 0.1), rgba(142, 204, 227, 0.08)),
        rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(177, 221, 236, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(247, 251, 253, 0.1),
        0 12px 24px rgba(4, 20, 34, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.booking-focus-echo[data-booking-focus-echo-status="viewed"] {
    border-color: rgba(171, 214, 230, 0.18);
    background:
        linear-gradient(180deg, rgba(245, 251, 254, 0.09), rgba(137, 198, 221, 0.07)),
        rgba(255, 255, 255, 0.04);
}

.booking-focus-echo[data-booking-focus-echo-status="adjusted"] {
    border-color: rgba(186, 230, 243, 0.24);
    background:
        linear-gradient(180deg, rgba(246, 251, 254, 0.14), rgba(156, 220, 238, 0.1)),
        rgba(255, 255, 255, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(247, 251, 253, 0.12),
        0 14px 28px rgba(6, 25, 39, 0.14);
}

.booking-focus-echo-label {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(195, 228, 239, 0.64);
}

.booking-focus-echo-summary {
    margin: 0;
    color: rgba(238, 247, 251, 0.92);
    font-size: 0.82rem;
    line-height: 1.58;
}

.booking-focus-action {
    --booking-focus-swap-delay: 185ms;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(183, 223, 236, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border-radius: 16px;
    color: rgba(244, 249, 252, 0.96);
    background:
        linear-gradient(180deg, rgba(249, 252, 254, 0.1), rgba(204, 232, 243, 0.06)),
        rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 0 rgba(248, 251, 253, 0.12);
    cursor: pointer;
    transition:
        transform 280ms ease,
        border-color 280ms ease,
        box-shadow 280ms ease,
        background-color 280ms ease;
}

.booking-focus-action svg {
    width: 16px;
    height: 16px;
    transition: transform 280ms ease;
}

.booking-focus-action:hover {
    transform: translate3d(0, -2px, 0);
    border-color: rgba(192, 230, 242, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(248, 251, 253, 0.14),
        0 14px 24px rgba(6, 23, 36, 0.14);
}

.booking-focus-action:hover svg {
    transform: translateX(3px);
}

.booking-focus-panel.is-review-context {
    min-height: clamp(320px, 38svh, 390px);
    align-content: start;
    padding-block: 18px 16px;
    border-color: rgba(182, 225, 239, 0.28);
    box-shadow:
        0 22px 40px rgba(4, 20, 34, 0.24),
        0 0 24px rgba(126, 198, 222, 0.12),
        inset 0 1px 0 rgba(243, 249, 252, 0.16);
}

.booking-focus-panel.is-review-context .booking-focus-state {
    color: rgba(229, 244, 249, 0.92);
}

/* 评价区 focus-only 需要优先保证底部 CTA 可达：
   高度充足时保留上方陪读卡；高度不足时让焦点舱接管这层语境。 */
.booking-sticky.is-focus-only-context[data-reading-zone="reviews"] {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(153, 204, 224, 0.42) transparent;
}

.booking-sticky.is-focus-only-context[data-reading-zone="reviews"]::-webkit-scrollbar {
    width: 6px;
}

.booking-sticky.is-focus-only-context[data-reading-zone="reviews"]::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(157, 207, 226, 0.46), rgba(91, 145, 174, 0.28));
}

@media (max-height: 820px) {
    .booking-sticky.is-focus-only-context[data-reading-zone="reviews"],
    .booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="entering-prep"],
    .booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="entering"],
    .booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="settling"] {
        --booking-focus-panel-stick-top: 0px;
    }

    .booking-sticky.is-focus-only-context[data-reading-zone="reviews"] .booking-copy:not(.is-collapsed-for-focus),
    .booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="entering-prep"] .booking-copy:not(.is-collapsed-for-focus),
    .booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="entering"] .booking-copy:not(.is-collapsed-for-focus),
    .booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="settling"] .booking-copy:not(.is-collapsed-for-focus) {
        opacity: 0;
        max-height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-color: transparent;
        box-shadow: none;
        overflow: hidden;
        transform: translate3d(0, -12px, 0) scale(0.988);
        pointer-events: none;
    }

    .booking-sticky.is-focus-only-context[data-reading-zone="reviews"]:not(.is-booking-copy-collapsed) .booking-focus-panel.is-review-context,
    .booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="entering"]:not(.is-booking-copy-collapsed) .booking-focus-panel.is-review-context,
    .booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="settling"]:not(.is-booking-copy-collapsed) .booking-focus-panel.is-review-context {
        position: sticky;
        top: 0;
        gap: 10px;
        min-height: clamp(280px, calc(100svh - 190px), 390px);
        padding-block: 14px;
    }

    .booking-sticky.is-focus-only-context[data-reading-zone="reviews"]:not(.is-booking-copy-collapsed) .booking-focus-summary,
    .booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="entering"]:not(.is-booking-copy-collapsed) .booking-focus-summary,
    .booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="settling"]:not(.is-booking-copy-collapsed) .booking-focus-summary {
        font-size: 0.82rem;
        line-height: 1.56;
    }
}

.booking-focus-panel.is-booked {
    border-color: rgba(192, 231, 243, 0.34);
    box-shadow:
        0 24px 44px rgba(4, 20, 34, 0.26),
        0 0 28px rgba(126, 198, 222, 0.14),
        inset 0 1px 0 rgba(248, 251, 253, 0.18);
}

.booking-focus-panel.is-booked .booking-focus-state {
    color: rgba(240, 248, 252, 0.96);
}

.booking-focus-panel.is-booked .booking-focus-summary {
    color: rgba(226, 242, 248, 0.92);
}

.booking-focus-panel.is-booked .booking-focus-action {
    border-color: rgba(191, 230, 242, 0.28);
    background:
        linear-gradient(180deg, rgba(249, 252, 254, 0.14), rgba(204, 232, 243, 0.08)),
        rgba(255, 255, 255, 0.05);
    box-shadow:
        inset 0 1px 0 rgba(248, 251, 253, 0.14),
        0 14px 28px rgba(5, 20, 32, 0.12);
}

@keyframes bookingFocusSwapOut {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
        filter: blur(12px);
    }
}

@keyframes bookingFocusSwapIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
        filter: blur(14px);
    }

    58% {
        opacity: 1;
        transform: translate3d(0, -2px, 0);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes bookingFocusSwapGlow {
    0% {
        opacity: 0;
        transform: translate3d(-22px, 16px, 0) scale(0.98);
        filter: blur(22px);
    }

    34% {
        opacity: 0.76;
    }

    100% {
        opacity: 0;
        transform: translate3d(14px, -4px, 0) scale(1.04);
        filter: blur(12px);
    }
}

.booking-focus-panel.is-swapping-out > * {
    animation: bookingFocusSwapOut 220ms ease both;
    animation-delay: calc(var(--booking-focus-swap-delay, 0ms) * 0.24);
}

.booking-focus-panel.is-swapping-in > * {
    animation: bookingFocusSwapIn 820ms cubic-bezier(0.18, 0.78, 0.22, 1) both;
    animation-delay: var(--booking-focus-swap-delay, 0ms);
}

.booking-focus-panel.is-swapping-in::after {
    animation: bookingFocusSwapGlow 940ms cubic-bezier(0.18, 0.78, 0.22, 1) both;
}

@keyframes bookingFocusReturnIn {
    0% {
        opacity: 0.42;
        transform: translate3d(0, 26px, 0) scale(0.964);
        filter: blur(18px) saturate(0.82);
    }

    56% {
        opacity: 1;
        transform: translate3d(0, -4px, 0) scale(1.014);
        filter: blur(0px) saturate(1.06);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0px) saturate(1);
    }
}

@keyframes bookingFocusReturnGlow {
    0% {
        opacity: 0;
        transform: translate3d(-26px, 24px, 0) scale(0.94);
        filter: blur(28px);
    }

    38% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: translate3d(18px, -6px, 0) scale(1.06);
        filter: blur(18px);
    }
}

.booking-focus-panel.is-returning {
    animation: bookingFocusReturnIn 680ms cubic-bezier(0.18, 0.78, 0.22, 1) both;
}

.booking-focus-panel.is-returning::after {
    animation: bookingFocusReturnGlow 740ms cubic-bezier(0.18, 0.78, 0.22, 1) both;
}

@keyframes bookingFocusPulse {
    0% {
        transform: translate3d(0, 10px, 0);
        opacity: 0.82;
        filter: saturate(0.92);
    }

    58% {
        transform: translate3d(0, -2px, 0);
        opacity: 1;
        filter: saturate(1.04);
    }

    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        filter: saturate(1);
    }
}

.booking-focus-panel.is-pulsing {
    animation: bookingFocusPulse 820ms cubic-bezier(0.18, 0.78, 0.22, 1) both;
}

/* 调试态回声清理入口：
   只在 detail 页的舞台调试模式中露出，方便演示前把“刚刚看过 / 调整过”的痕迹一键收干净。 */
.detail-debug-echo-reset[hidden] {
    display: none !important;
}

.detail-debug-echo-reset {
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 7px 12px 7px 10px;
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font: inherit;
    color: rgba(216, 236, 244, 0.86);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(244, 251, 255, 0.06) 0%, rgba(126, 168, 188, 0.04) 100%),
        rgba(7, 23, 35, 0.4);
    border: 1px solid rgba(182, 217, 231, 0.1);
    box-shadow:
        0 10px 18px rgba(4, 16, 25, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px) saturate(118%);
    -webkit-backdrop-filter: blur(12px) saturate(118%);
    transition:
        opacity 220ms ease,
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        background-color 220ms ease;
}

.yanqi-stage-debug .detail-debug-echo-reset:not([hidden]) {
    display: inline-flex;
}

.detail-debug-echo-reset:not(:disabled):hover,
.detail-debug-echo-reset:not(:disabled):focus-visible {
    transform: translate3d(0, -2px, 0);
    border-color: rgba(202, 229, 240, 0.22);
    box-shadow:
        0 14px 24px rgba(4, 16, 25, 0.12),
        0 0 18px rgba(114, 180, 209, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.detail-debug-echo-reset:focus-visible {
    outline: none;
}

.detail-debug-echo-reset:disabled {
    cursor: default;
    opacity: 0.56;
    box-shadow:
        0 8px 14px rgba(4, 16, 25, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.detail-debug-echo-reset.is-feedback {
    border-color: rgba(190, 233, 245, 0.28);
    background:
        linear-gradient(180deg, rgba(244, 251, 255, 0.12) 0%, rgba(129, 185, 213, 0.08) 100%),
        rgba(8, 34, 50, 0.56);
    box-shadow:
        0 16px 28px rgba(4, 16, 25, 0.14),
        0 0 20px rgba(126, 200, 230, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    opacity: 1;
}

.detail-debug-echo-reset-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(164, 194, 208, 0.66);
    box-shadow: 0 0 0 4px rgba(141, 193, 218, 0.05);
    transition: background-color 220ms ease, box-shadow 220ms ease;
}

.detail-debug-echo-reset:not(:disabled) .detail-debug-echo-reset-dot {
    background: rgba(181, 232, 243, 0.88);
    box-shadow:
        0 0 0 4px rgba(141, 193, 218, 0.08),
        0 0 14px rgba(160, 228, 244, 0.2);
}

.detail-debug-echo-reset.is-feedback .detail-debug-echo-reset-dot {
    background: rgba(190, 240, 248, 0.96);
    box-shadow:
        0 0 0 4px rgba(141, 193, 218, 0.12),
        0 0 16px rgba(160, 228, 244, 0.28);
}

.detail-debug-echo-reset-copy {
    display: grid;
    gap: 1px;
    text-align: left;
}

.detail-debug-echo-reset-label {
    font-size: 0.68rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.detail-debug-echo-reset-state {
    font-size: 0.56rem;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(190, 219, 231, 0.62);
}

.detail-debug-echo-reset.is-feedback .detail-debug-echo-reset-state {
    color: rgba(226, 241, 248, 0.9);
}

/* ============================================
   套餐卡片列表
   ============================================ */

/* 套餐卡片入场动画：
   右侧套餐列表依赖 fadeInUp 从轻微下沉中显形。
   这里单独补回 keyframes，避免卡片因为初始 opacity: 0 却找不到动画定义而整块不可见。 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* 控制 .itinerary-list 的布局、视觉和状态表现 */
.itinerary-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: calc(var(--booking-sticky-stack-gap, 18px) + 10px);
    max-height: var(--booking-itinerary-list-open-height, 3200px);
    width: 100%;
    padding-left: 0;
    opacity: 1;
    overflow: visible;
    transform: translate3d(0, 0, 0);
    transform-origin: top center;
    transition:
        max-height var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        margin-bottom var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        opacity var(--booking-sticky-focus-context-duration) ease,
        transform var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing);
}

.itinerary-list[hidden] {
    display: none !important;
}

.itinerary-list.is-focus-only-context {
    max-height: 0;
    margin-bottom: 0;
    padding-left: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translate3d(0, 18px, 0) scale(0.986);
}

.booking-sticky[data-focus-context-motion="entering"] .itinerary-list,
.booking-sticky[data-focus-context-motion="leaving-prep"] .itinerary-list {
    max-height: var(--booking-itinerary-list-open-height, 3200px);
    margin-bottom: calc(var(--booking-sticky-stack-gap, 18px) + 10px);
    opacity: 0;
    overflow: visible;
    pointer-events: none;
    transform: translate3d(0, 18px, 0) scale(0.986);
}

.booking-sticky[data-focus-context-motion="entering"] .itinerary-list {
    transition:
        max-height var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        margin-bottom var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        opacity 180ms ease,
        transform 300ms var(--booking-sticky-focus-context-easing);
}

.booking-sticky[data-focus-context-motion="leaving"] .itinerary-list {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transition:
        max-height var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        margin-bottom var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing),
        opacity 320ms ease 90ms,
        transform var(--booking-sticky-focus-context-duration) var(--booking-sticky-focus-context-easing);
}

.itinerary-list::before {
    display: none;
}

.booking-sticky[data-focus-context-motion="entering"] .itinerary-list::before,
.booking-sticky[data-focus-context-motion="leaving-prep"] .itinerary-list::before,
.itinerary-list.is-focus-only-context::before {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
}

/* 控制 .package-group 的布局、视觉和状态表现 */
.package-group {
    display: grid;
    gap: 14px;
}

/* 控制 .package-group-title 的布局、视觉和状态表现 */
.package-group-title {
    margin: 0;
    font-size: 0.74rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(29, 80, 112, 0.48);
}

/* 控制 .package-card 的布局、视觉和状态表现 */
.package-card {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.84), transparent 28%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(244, 251, 255, 0.56) 42%, rgba(215, 233, 243, 0.44) 100%);
    padding: 18px;
    width: 100%;
    margin-left: 0;
    border-radius: 26px;
    border: 1px solid rgba(187, 216, 230, 0.76);
    box-shadow:
        0 16px 34px rgba(15, 44, 67, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition:
        transform 520ms cubic-bezier(0.18, 0.78, 0.22, 1),
        box-shadow 520ms cubic-bezier(0.18, 0.78, 0.22, 1),
        border-color 380ms ease,
        background 520ms ease,
        filter 420ms ease;
    cursor: pointer;
    opacity: 0;
    animation: fadeInUp 0.64s ease-out forwards;
}

.package-card > * {
    position: relative;
    z-index: 1;
}

/* .package-card::before 的前置装饰层 */
.package-card::before {
    content: "";
    position: absolute;
    inset: -22% -20% auto 34%;
    height: 78%;
    border-radius: inherit;
    background:
        radial-gradient(circle at 36% 34%, rgba(198, 235, 246, 0.5), transparent 42%),
        radial-gradient(circle at 72% 26%, rgba(121, 190, 218, 0.18), transparent 34%);
    opacity: 0.56;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition: opacity 520ms ease, transform 760ms cubic-bezier(0.18, 0.78, 0.22, 1);
}

.package-card::after {
    content: "";
    position: absolute;
    inset: -26% -18%;
    border-radius: inherit;
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0.16) 49%, rgba(255, 255, 255, 0) 64%),
        radial-gradient(circle at 16% 100%, rgba(111, 178, 206, 0.12), transparent 36%);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-8%, 10%, 0) scale(0.98);
    transition: opacity 480ms ease, transform 760ms cubic-bezier(0.18, 0.78, 0.22, 1);
}

/* .package-card:hover 鼠标移入时的样式 */
.package-card:hover {
    transform: translate3d(0, -6px, 0);
    box-shadow:
        0 24px 46px rgba(12, 42, 63, 0.14),
        0 0 24px rgba(148, 206, 230, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    border-color: rgba(164, 206, 226, 0.88);
    filter: saturate(1.03);
}

/* .package-card:focus-visible 聚焦时的样式 */
.package-card:focus-visible {
    outline: none;
    transform: translate3d(0, -4px, 0);
    border-color: rgba(150, 202, 227, 0.94);
    box-shadow:
        0 24px 46px rgba(12, 42, 63, 0.14),
        0 0 0 1px rgba(173, 216, 236, 0.42),
        0 0 30px rgba(152, 208, 229, 0.14);
}

/* .package-card.is-active 在对应状态下的样式 */
.package-card.is-active {
    opacity: 1;
    transform: translate3d(0, -8px, 0) scale(1.012);
    background:
        radial-gradient(circle at 14% 14%, rgba(214, 241, 250, 0.84), transparent 30%),
        radial-gradient(circle at 84% 8%, rgba(131, 196, 222, 0.18), transparent 24%),
        linear-gradient(160deg, rgba(252, 255, 255, 0.92), rgba(234, 247, 253, 0.72) 48%, rgba(211, 232, 242, 0.6) 100%);
    border-color: rgba(153, 203, 224, 0.9);
    box-shadow:
        0 24px 48px rgba(9, 35, 54, 0.16),
        0 0 26px rgba(141, 204, 227, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.package-card:hover::before,
.package-card:focus-visible::before,
.package-card.is-active::before {
    opacity: 1;
    transform: translate3d(4%, -2%, 0) scale(1.02);
}

.package-card:hover::after,
.package-card:focus-visible::after,
.package-card.is-active::after {
    opacity: 1;
    transform: translate3d(12%, -6%, 0) scale(1);
}

.package-card.is-originating {
    opacity: 0.22 !important;
    transform: translate3d(0, 0, 0) scale(0.994) !important;
    filter: saturate(0.82) brightness(0.98);
    box-shadow:
        0 12px 24px rgba(22, 55, 80, 0.05),
        0 0 0 1px rgba(173, 216, 236, 0.04) !important;
}

.itinerary-list.is-modal-open .package-card {
    animation: none !important;
    opacity: 1;
    transform: none !important;
}

.itinerary-list.is-modal-open .package-card::before {
    opacity: 0.28 !important;
    transform: none !important;
}

.itinerary-list.is-modal-open .package-card::after {
    opacity: 0 !important;
    transform: none !important;
}

.itinerary-list.is-modal-open .package-card.is-active {
    border-color: rgba(166, 209, 230, 0.24);
    box-shadow:
        0 18px 38px rgba(6, 20, 33, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* 控制 .package-card-head 的布局、视觉和状态表现 */
.package-card-head {
    display: grid;
    gap: 14px;
}

.package-card-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.package-card-topline-main {
    display: grid;
    gap: 8px;
    align-items: flex-start;
}

.package-card-index {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 0.64rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(64, 104, 127, 0.52);
    transition: color 320ms ease, opacity 320ms ease;
}

/* 控制 .package-card-badge 的布局、视觉和状态表现 */
.package-card-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(163, 205, 223, 0.46);
    background:
        linear-gradient(180deg, rgba(251, 254, 255, 0.82), rgba(227, 242, 249, 0.56)),
        rgba(255, 255, 255, 0.2);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #184764;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
    transition: color 320ms ease, border-color 320ms ease, background 320ms ease, box-shadow 320ms ease;
}

.package-card-state-stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.package-card-state {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(174, 211, 228, 0.34);
    background: rgba(255, 255, 255, 0.24);
    color: rgba(35, 79, 107, 0.64);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: opacity 320ms ease, transform 420ms cubic-bezier(0.18, 0.78, 0.22, 1), border-color 320ms ease, color 320ms ease, background-color 320ms ease;
}

.package-card-audience {
    display: grid;
    width: 100%;
    box-sizing: border-box;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(248, 252, 255, 0.62), rgba(222, 239, 248, 0.34)),
        rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(191, 219, 232, 0.54);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    transition: background 360ms ease, border-color 360ms ease, box-shadow 360ms ease;
}

.package-card-section-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(59, 95, 119, 0.6);
    transition: color 320ms ease;
}

.package-card-audience-copy {
    margin: 0;
    color: #173f5a;
    font-size: 1rem;
    line-height: 1.6;
    transition: color 320ms ease;
}

.package-tag-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.package-tag-cluster-fit {
    gap: 10px;
}

.package-plate {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 28px;
    white-space: nowrap;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
        transform 320ms ease,
        border-color 320ms ease,
        background-color 320ms ease,
        color 320ms ease,
        box-shadow 320ms ease,
        opacity 320ms ease;
}

.package-plate-fit {
    padding: 7px 14px;
    clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
    background:
        linear-gradient(180deg, rgba(236, 248, 253, 0.82), rgba(207, 231, 242, 0.5)),
        rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(157, 202, 223, 0.56);
    color: #225977;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        0 8px 18px rgba(23, 60, 84, 0.08);
}

.package-plate-rhythm {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px 6px 18px;
    border-radius: 13px;
    background: rgba(18, 76, 106, 0.08);
    border: 1px solid rgba(162, 204, 223, 0.4);
    color: #355b72;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.package-plate-rhythm::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 4px;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(73, 121, 146, 0.68);
    box-shadow: 0 0 0 3px rgba(188, 220, 232, 0.22);
}

.package-card:hover .package-plate,
.package-card:hover .package-card-state,
.package-card:focus-visible .package-plate,
.package-card:focus-visible .package-card-state {
    transform: translate3d(0, -1px, 0);
}

/* 控制 .package-card-title 的布局、视觉和状态表现 */
.package-card-title {
    margin: 0;
    font-size: 1.14rem;
    line-height: 1.32;
    color: #17364e;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    min-height: 1.5em;
    transition: color 320ms ease;
}

.package-card-title-wrap {
    display: grid;
    gap: 10px;
}

/* 套餐标题的可见文本层。
   标题本身仍保留原有语义，这一层只负责逐字敲出的视觉表现。 */
.package-card-title-line {
    display: block;
    min-height: 1.5em;
}

/* 套餐卡标题里的单个字符。
   默认轻微模糊、轻微下沉，出现时再清晰站住。 */
.package-title-char {
    display: inline-block;
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 7px, 0);
    transition:
        opacity 0.28s ease,
        transform 0.46s cubic-bezier(0.2, 0.78, 0.22, 1),
        filter 0.46s ease;
}

/* 空格本身不需要占成一个完整字符块，只保留正常阅读间距即可。 */
.package-title-char.is-space {
    min-width: 0.3em;
}

/* 当前字符真正“被敲出来”后的状态。 */
.package-title-char.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
}

/* 标题完全打完后，只给一层很轻的停稳感，不抢卡片整体 hover。 */
.package-card-title-line.is-typed {
    animation: bookingCopySettle 1.2s ease-out 1 both;
}

/* 控制 .package-card-mood 的布局、视觉和状态表现 */
.package-card-mood {
    margin: 0;
    color: #4d6d84;
    line-height: 1.78;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 320ms ease;
}

.package-card-archive {
    display: grid;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
    padding: 16px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(220, 239, 248, 0.18)),
        rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(188, 218, 231, 0.48);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        0 10px 24px rgba(18, 49, 68, 0.05);
    transition: background 360ms ease, border-color 360ms ease, box-shadow 360ms ease;
}

.package-card-signal {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
}

/* 控制 .package-price-wrap 的布局、视觉和状态表现 */
.package-price-wrap {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(180, 214, 229, 0.38);
    transition: border-color 320ms ease;
}

/* 控制 .package-price-label 的布局、视觉和状态表现 */
.package-price-label {
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #6b889a;
    transition: color 320ms ease;
}

/* 控制 .package-price-value 的布局、视觉和状态表现 */
.package-price-value {
    font-size: 1.42rem;
    font-weight: 700;
    color: #0f4263;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    transition: color 320ms ease;
}

.package-cadence-stack {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.package-cadence-primary,
.package-cadence-secondary,
.package-card-focus-copy,
.package-card-guidance {
    margin: 0;
}

.package-cadence-primary {
    color: #1c4c67;
    font-size: 0.94rem;
    line-height: 1.6;
    transition: color 320ms ease;
}

.package-cadence-secondary {
    color: #648397;
    font-size: 0.82rem;
    line-height: 1.64;
    transition: color 320ms ease;
}

.package-card-focus {
    display: grid;
    gap: 8px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translate3d(0, 8px, 0);
    border-top: 1px solid transparent;
    transition:
        max-height 520ms cubic-bezier(0.18, 0.78, 0.22, 1),
        opacity 360ms ease,
        transform 520ms cubic-bezier(0.18, 0.78, 0.22, 1),
        padding-top 360ms ease,
        border-color 360ms ease;
}

.package-card-focus.has-package-card-echo {
    position: relative;
}

.package-card-echo-slot {
    border-top: 1px solid transparent;
    padding-top: 0;
    display: grid;
    gap: 4px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition:
        max-height 320ms ease,
        padding-top 320ms ease,
        border-color 320ms ease,
        opacity 320ms ease,
        transform 320ms ease;
}

.package-card.is-active .package-card-focus.has-package-card-echo .package-card-echo-slot {
    max-height: 96px;
    padding-top: 8px;
    border-top-color: rgba(151, 213, 231, 0.3);
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.package-card-echo {
    border-radius: 14px;
    padding: 8px 12px;
    background:
        linear-gradient(180deg, rgba(241, 249, 255, 0.96), rgba(214, 233, 242, 0.68));
    border: 1px solid rgba(168, 210, 226, 0.6);
    box-shadow: 0 8px 18px rgba(18, 52, 69, 0.18);
    display: grid;
    gap: 2px;
    transition: transform 240ms ease, box-shadow 320ms ease;
    transform: translate3d(0, 0, 0);
}

.package-card-echo[data-package-card-echo-status="viewed"] {
    background:
        linear-gradient(180deg, rgba(247, 253, 255, 0.95), rgba(229, 245, 250, 0.6));
    border-color: rgba(156, 205, 223, 0.56);
}

.package-card-echo[data-package-card-echo-status="adjusted"] {
    background:
        linear-gradient(180deg, rgba(231, 241, 248, 0.98), rgba(207, 237, 246, 0.7));
    border-color: rgba(111, 186, 216, 0.7);
    box-shadow: 0 10px 24px rgba(15, 56, 85, 0.22);
}

.package-card-echo-label {
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(59, 102, 132, 0.7);
}

.package-card-echo-summary {
    font-size: 0.82rem;
    color: #0f3b58;
    line-height: 1.4;
    min-height: 1.2em;
}

.package-card[data-package-card-echo-status="adjusted"] .package-card-echo,
.package-card[data-package-card-echo-status="viewed"] .package-card-echo {
    transform: translate3d(0, 0, 0);
}

.package-card-focus-copy {
    color: #3f6177;
    font-size: 0.88rem;
    line-height: 1.72;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 320ms ease;
}

.package-card.is-active .package-card-focus {
    max-height: 160px;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    padding-top: 16px;
    border-top-color: rgba(161, 212, 231, 0.16);
}

.package-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.package-card-guidance {
    flex: 1 1 auto;
    min-width: 0;
    color: #57768b;
    font-size: 0.84rem;
    line-height: 1.75;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 320ms ease;
}

/* 控制 .package-card-action 的布局、视觉和状态表现 */
.package-card-action {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(136, 189, 212, 0.36);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 16px;
    cursor: pointer;
    color: #1b5678;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(223, 240, 248, 0.22)),
        rgba(15, 74, 103, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        0 10px 20px rgba(20, 58, 82, 0.08);
    white-space: nowrap;
    position: relative;
    z-index: 2;
    pointer-events: auto;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 280ms ease,
        box-shadow 280ms ease,
        border-color 280ms ease,
        background-color 280ms ease,
        color 280ms ease;
}

/* 控制 .package-card-action svg 的布局、视觉和状态表现 */
.package-card-action svg {
    width: 16px;
    height: 16px;
    transition: transform 280ms ease;
}

/* .package-card-action:hover 鼠标移入时的样式 */
.package-card-action:hover {
    transform: translate3d(0, -2px, 0);
    border-color: rgba(121, 183, 209, 0.52);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.68),
        0 14px 26px rgba(16, 55, 82, 0.14);
}

/* .package-card-action:hover svg 鼠标移入时的样式 */
.package-card-action:hover svg {
    transform: translateX(3px);
}

.package-card.is-active .package-card-badge {
    background:
        linear-gradient(180deg, rgba(250, 254, 255, 0.92), rgba(221, 240, 249, 0.62)),
        rgba(255, 255, 255, 0.24);
    border-color: rgba(152, 202, 224, 0.52);
    color: #123f5d;
}

.package-card.is-active .package-card-index {
    color: rgba(32, 79, 106, 0.72);
}

.package-card.is-active .package-card-state {
    background: rgba(240, 250, 255, 0.46);
    border-color: rgba(145, 198, 222, 0.4);
    color: rgba(26, 84, 115, 0.78);
}

.package-card.is-active .package-card-audience {
    background:
        linear-gradient(180deg, rgba(250, 254, 255, 0.74), rgba(218, 238, 248, 0.42)),
        rgba(255, 255, 255, 0.14);
    border-color: rgba(171, 214, 231, 0.52);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.package-card.is-active .package-card-section-label {
    color: rgba(70, 111, 136, 0.66);
}

.package-card.is-active .package-card-audience-copy,
.package-card.is-active .package-card-title,
.package-card.is-active .package-price-value,
.package-card.is-active .package-cadence-primary {
    color: #123e5a;
}

.package-card.is-active .package-card-mood,
.package-card.is-active .package-cadence-secondary,
.package-card.is-active .package-card-guidance {
    color: rgba(62, 96, 119, 0.84);
}

.package-card.is-active .package-card-archive {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(219, 239, 248, 0.26)),
        rgba(255, 255, 255, 0.08);
    border-color: rgba(168, 213, 230, 0.44);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.68),
        0 12px 28px rgba(12, 42, 63, 0.08);
}

.package-card.is-active .package-price-wrap {
    border-bottom-color: rgba(164, 210, 229, 0.48);
}

.package-card.is-active .package-price-label {
    color: rgba(87, 127, 150, 0.74);
}

.package-card.is-active .package-plate-fit {
    background:
        linear-gradient(180deg, rgba(240, 251, 255, 0.88), rgba(214, 236, 246, 0.56)),
        rgba(255, 255, 255, 0.18);
    border-color: rgba(149, 203, 225, 0.56);
    color: #1b5574;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        0 8px 18px rgba(20, 58, 82, 0.08);
}

.package-card.is-active .package-plate-rhythm {
    background: rgba(240, 250, 255, 0.48);
    border-color: rgba(155, 205, 227, 0.38);
    color: rgba(43, 88, 113, 0.8);
}

.package-card.is-active .package-plate-rhythm::before {
    background: rgba(95, 142, 166, 0.74);
    box-shadow: 0 0 0 3px rgba(177, 215, 231, 0.24);
}

.package-card.is-active .package-card-action {
    color: #184d6d;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(223, 240, 248, 0.34)),
        rgba(255, 255, 255, 0.08);
    border-color: rgba(135, 193, 218, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 12px 24px rgba(18, 54, 78, 0.1);
}

/* 控制 .booking-note 的布局、视觉和状态表现 */
.booking-note {
    position: relative;
    z-index: 2;
    margin-top: 8px;
    background: rgba(236, 248, 254, 0.78);
    padding: 14px 15px;
    border-radius: 18px;
    border: 1px solid rgba(198, 220, 232, 0.78);
    font-size: 0.86rem;
    color: #50708a;
    line-height: 1.68;
}

/* 控制 .booking-note.is-success 的布局、视觉和状态表现 */
.booking-note.is-success {
    color: #1d567b;
    background: rgba(225, 244, 252, 0.9);
    border-color: rgba(165, 210, 230, 0.92);
}

/* ============================================
   还可以继续看的海
   ============================================ */

/* 控制 .related-spots 的布局、视觉和状态表现 */
.related-spots {
    padding: var(--spacing-2xl) calc(var(--spacing-lg) + var(--detail-safe-side));
    background: var(--bg-light);
    margin-top: clamp(24px, 5vw, 84px);
}

.related-spots::before {
    content: "";
    display: block;
    height: clamp(56px, 6vw, 94px);
    margin: 0 auto clamp(18px, 2vw, 28px);
    max-width: 980px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 50%, rgba(168, 221, 239, 0.18), rgba(168, 221, 239, 0) 64%),
        linear-gradient(90deg, rgba(168, 221, 239, 0), rgba(168, 221, 239, 0.36), rgba(168, 221, 239, 0));
    opacity: 0.58;
    filter: blur(20px);
    transform: translate3d(0, -12px, 0) scaleX(0.88);
    transition: opacity 680ms ease, transform 860ms cubic-bezier(0.16, 0.8, 0.2, 1);
}

.related-spots.is-sea-shift-awake::before {
    opacity: 0.82;
    transform: translate3d(0, 0, 0) scaleX(1);
}

/* 控制 .related-grid 的布局、视觉和状态表现 */
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-lg);
    max-width: 1180px;
    margin: 0 auto;
}

/* 控制 .related-card 的布局、视觉和状态表现 */
.related-card {
    --related-card-lift: 0px;
    --related-card-scale: 1;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transform: translate3d(0, var(--related-card-lift), 0) scale(var(--related-card-scale));
    transition: transform 280ms ease, box-shadow 280ms ease, opacity 180ms ease;
    cursor: pointer;
    will-change: transform;
}

/* .related-card:hover 鼠标移入时的样式 */
.related-card:hover {
    --related-card-lift: -8px;
    box-shadow: var(--shadow-lg);
}

/* .related-card:active, 按下时的样式 */
.related-card:active,
.related-card.is-pressed {
    --related-card-lift: -2px;
    --related-card-scale: 0.98;
}

/* 控制 .related-image 的布局、视觉和状态表现 */
.related-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: transform 0.5s ease-out;
}

/* .related-card:hover .related-image 鼠标移入时的样式 */
.related-card:hover .related-image {
    transform: scale(1.1);
}

/* 控制 .related-info 的布局、视觉和状态表现 */
.related-info {
    padding: var(--spacing-lg);
}

/* 控制 .related-name 的布局、视觉和状态表现 */
.related-name {
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

/* 控制 .related-desc 的布局、视觉和状态表现 */
.related-desc {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: var(--spacing-md);
}

/* 控制 .related-footer 的布局、视觉和状态表现 */
.related-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

/* 控制 .related-price 的布局、视觉和状态表现 */
.related-price {
    color: var(--accent);
    font-weight: 700;
}

/* 控制 .related-spots 的布局、视觉和状态表现 */
.related-spots {
    position: relative;
    overflow: hidden;
    padding: calc(var(--spacing-2xl) + 12px) calc(var(--spacing-lg) + var(--detail-safe-side)) calc(var(--spacing-2xl) + 8px);
    background:
        radial-gradient(circle at 16% 18%, rgba(132, 191, 216, 0.16), transparent 24%),
        radial-gradient(circle at 86% 22%, rgba(120, 177, 203, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(241, 249, 253, 0.82) 0%, rgba(226, 241, 248, 0.9) 22%, rgba(219, 236, 245, 0.98) 100%);
}

/* 控制 .related-shell 的布局、视觉和状态表现 */
.related-shell {
    position: relative;
    z-index: 1;
    max-width: 1260px;
    margin: 0 auto;
    display: grid;
    gap: 28px;
}

/* 控制 .related-head 的布局、视觉和状态表现 */
.related-head {
    max-width: 720px;
    display: grid;
    gap: 12px;
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    filter: blur(14px);
    transition:
        opacity 560ms ease,
        transform 760ms cubic-bezier(0.18, 0.78, 0.2, 1),
        filter 520ms ease;
}

/* 控制 .related-kicker 的布局、视觉和状态表现 */
.related-kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(86, 123, 144, 0.68);
}

/* 控制 .related-title 的布局、视觉和状态表现 */
.related-title {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    line-height: 1.18;
    color: #14364d;
}

/* 控制 .related-lead 的布局、视觉和状态表现 */
.related-lead {
    margin: 0;
    max-width: 660px;
    font-size: 0.98rem;
    line-height: 1.9;
    color: rgba(71, 103, 123, 0.88);
}

/* 控制 .related-grid 的布局、视觉和状态表现 */
.related-grid {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
}

/* 控制 .related-stage-shell 的布局、视觉和状态表现 */
.related-stage-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(300px, 0.82fr);
    gap: 24px;
    align-items: stretch;
    min-height: var(--related-stage-height, auto);
    contain: layout paint style;
    isolation: isolate;
    --related-flow-sign: 1;
    --related-feature-tilt: 1.2deg;
    --related-feature-exit-tilt: -0.9deg;
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition:
        opacity 760ms ease,
        transform 900ms cubic-bezier(0.16, 0.8, 0.2, 1);
    will-change: transform, opacity;
}

.related-grid.is-stage-switching {
    perspective: 1600px;
    isolation: isolate;
}

.related-grid.is-stage-switching .related-stage-shell {
    pointer-events: none;
}

.related-stage-shell.is-flow-backward {
    --related-flow-sign: -1;
    --related-feature-tilt: -2.8deg;
    --related-feature-exit-tilt: 2deg;
}

.related-stage-shell::after {
    content: "";
    position: absolute;
    inset: 14% 5% 15% 42%;
    border-radius: 36px;
    background:
        radial-gradient(circle at 18% 30%, rgba(189, 234, 255, 0.28), transparent 42%),
        linear-gradient(135deg, rgba(146, 212, 241, 0.18), rgba(146, 212, 241, 0));
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    filter: blur(22px);
    transform: translate3d(calc(var(--related-flow-sign) * 24px), 20px, 0) scale(0.92);
    transition:
        opacity 680ms ease,
        transform 860ms cubic-bezier(0.18, 0.78, 0.2, 1),
        filter 680ms ease;
}

.related-stage-shell.is-stacked-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 1;
    pointer-events: none;
    transition:
        transform 820ms cubic-bezier(0.16, 0.8, 0.2, 1),
        opacity 620ms ease;
}

.related-stage-shell.is-stage-outgoing {
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    filter: blur(9px) saturate(0.86);
    transform: translate3d(calc(var(--outgo-x, -64px) * 1.04), -8px, 0) scale(0.982);
    transition:
        opacity 300ms ease,
        filter 360ms ease,
        transform 860ms cubic-bezier(0.16, 0.8, 0.2, 1);
}

.related-stage-shell.is-stage-incoming {
    z-index: 2;
    opacity: 0.5;
    transform: translate3d(calc(var(--incoming-x, 72px) * 0.72), 6px, 0) scale(0.996);
}

.related-stage-shell.is-stage-active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: auto;
}

.related-stage-shell.is-stage-incoming.is-flow-forward {
    --incoming-x: 72px;
}

.related-stage-shell.is-stage-incoming.is-flow-backward {
    --incoming-x: -72px;
}

.related-stage-shell.is-stage-outgoing.is-flow-forward {
    --outgo-x: -72px;
}

.related-stage-shell.is-stage-outgoing.is-flow-backward {
    --outgo-x: 72px;
}

.related-stage-shell.is-stage-incoming::after {
    opacity: 0.18;
    transform: translate3d(calc(var(--related-flow-sign) * 18px), 10px, 0) scale(0.975);
}

.related-stage-shell.is-stage-incoming.is-stage-active::after,
.related-stage-shell.is-stage-active::after {
    opacity: 0.12;
    filter: blur(18px);
    transform: translate3d(0, 0, 0) scale(1);
}

.related-stage-shell.is-stage-outgoing::after {
    opacity: 0.04;
    filter: blur(24px);
    transform: translate3d(calc(var(--related-flow-sign) * -16px), -10px, 0) scale(0.92);
}

/* 控制 .related-feature-card 的布局、视觉和状态表现 */
.related-feature-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    height: 100%;
    min-height: 448px;
    border-radius: 34px;
    overflow: hidden;
    border: 1px solid rgba(177, 214, 230, 0.44);
    background:
        linear-gradient(150deg, rgba(248, 252, 254, 0.9), rgba(229, 241, 247, 0.82)),
        rgba(244, 250, 253, 0.86);
    box-shadow:
        0 30px 60px rgba(9, 38, 58, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    cursor: pointer;
    transition:
        transform 420ms cubic-bezier(0.18, 0.78, 0.2, 1),
        box-shadow 420ms cubic-bezier(0.18, 0.78, 0.2, 1),
        border-color 320ms ease,
        filter 420ms ease,
        opacity 320ms ease;
    will-change: transform, opacity, filter;
}

/* .related-feature-card:hover 鼠标移入时的样式 */
.related-feature-card:hover {
    transform: translate3d(0, -8px, 0) scale(1.008);
    border-color: rgba(146, 199, 220, 0.72);
    box-shadow:
        0 38px 66px rgba(8, 34, 54, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.related-stage-shell.is-stage-incoming .related-feature-card {
    opacity: 0.98;
    filter: saturate(0.96);
    transform: translate3d(calc(var(--incoming-x, 72px) * 0.12), 5px, 0) scale(0.998) rotate(calc(var(--related-feature-tilt) * 0.58));
    box-shadow:
        0 24px 50px rgba(9, 38, 58, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.74);
    transition-duration: 620ms;
}

.related-stage-shell.is-stage-incoming.is-stage-active .related-feature-card,
.related-stage-shell.is-stage-active .related-feature-card {
    opacity: 1;
    filter: saturate(1);
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}

.related-stage-shell.is-stage-outgoing .related-feature-card {
    opacity: 0;
    filter: blur(10px) saturate(0.82);
    transform: translate3d(calc(var(--outgo-x, -72px) * 0.14), -6px, 0) scale(0.982) rotate(calc(var(--related-feature-exit-tilt) * 0.78));
    box-shadow:
        0 20px 38px rgba(9, 38, 58, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.66);
    transition-duration: 300ms;
}

/* 控制 .related-feature-media 的布局、视觉和状态表现 */
.related-feature-media {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    contain: layout paint;
    isolation: isolate;
    transition:
        transform 820ms cubic-bezier(0.16, 0.8, 0.2, 1),
        opacity 520ms ease;
    will-change: transform, opacity;
}

/* 控制 .related-feature-image 的布局、视觉和状态表现 */
.related-feature-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 780ms cubic-bezier(0.18, 0.78, 0.2, 1), filter 420ms ease;
    display: block;
}

/* .related-feature-card:hover .related-feature-image 鼠标移入时的样式 */
.related-feature-card:hover .related-feature-image {
    transform: scale(1.05);
}

/* 控制 .related-feature-overlay 的布局、视觉和状态表现 */
.related-feature-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6, 26, 39, 0.12), transparent 32%),
        linear-gradient(180deg, rgba(6, 28, 41, 0.04), rgba(6, 28, 41, 0.24));
    pointer-events: none;
}

/* 控制 .related-feature-copy 的布局、视觉和状态表现 */
.related-feature-copy {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    gap: 14px;
    padding: 32px 30px 30px;
    transition:
        transform 720ms cubic-bezier(0.16, 0.8, 0.2, 1),
        opacity 520ms ease,
        filter 520ms ease;
    will-change: transform, opacity, filter;
}

.related-stage-shell.is-stage-incoming .related-feature-media {
    filter: saturate(0.97);
    transform: translate3d(calc(var(--incoming-x, 72px) * -0.05), 0, 0) scale(1.012);
}

.related-stage-shell.is-stage-incoming.is-stage-active .related-feature-media,
.related-stage-shell.is-stage-active .related-feature-media {
    filter: saturate(1);
    transform: translate3d(0, 0, 0) scale(1);
}

.related-stage-shell.is-stage-outgoing .related-feature-media {
    opacity: 0.08;
    filter: blur(2px) saturate(0.84);
    transform: translate3d(calc(var(--outgo-x, -72px) * 0.1), 0, 0) scale(0.982);
    transition-duration: 300ms;
}

.related-stage-shell.is-stage-incoming .related-feature-copy {
    opacity: 0.28;
    transform: translate3d(calc(var(--incoming-x, 72px) * 0.1), 10px, 0);
    transition-delay: 20ms;
}

.related-stage-shell.is-stage-incoming.is-stage-active .related-feature-copy,
.related-stage-shell.is-stage-active .related-feature-copy {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.related-stage-shell.is-stage-outgoing .related-feature-copy {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(calc(var(--outgo-x, -72px) * 0.12), 10px, 0);
    transition-duration: 240ms;
}

/* 控制 .related-feature-kicker 的布局、视觉和状态表现 */
.related-feature-kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(91, 126, 145, 0.74);
}

/* 控制 .related-feature-title 的布局、视觉和状态表现 */
.related-feature-title {
    display: grid;
    gap: 6px;
    margin: 0;
    font-size: clamp(1.5rem, 2vw, 2.18rem);
    color: #113349;
}

/* 控制 .related-feature-title small 的布局、视觉和状态表现 */
.related-feature-title small {
    font-size: 0.88rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(78, 115, 136, 0.72);
}

/* 控制 .related-feature-desc 的布局、视觉和状态表现 */
.related-feature-desc {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.86;
    color: rgba(56, 86, 106, 0.88);
}

/* 控制 .related-feature-tags 的布局、视觉和状态表现 */
.related-feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* 控制 .related-feature-tag 的布局、视觉和状态表现 */
.related-feature-tag {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(16, 58, 82, 0.07);
    border: 1px solid rgba(159, 201, 219, 0.48);
    font-size: 0.78rem;
    color: rgba(28, 73, 99, 0.86);
}

/* 控制 .related-feature-why 的布局、视觉和状态表现 */
.related-feature-why {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.78;
    color: rgba(78, 108, 128, 0.84);
}

/* 控制 .related-feature-action 的布局、视觉和状态表现 */
.related-feature-action {
    all: unset;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    cursor: pointer;
    background:
        linear-gradient(140deg, rgba(18, 70, 99, 0.92), rgba(11, 47, 70, 0.9));
    color: #eef8fb;
    box-shadow: 0 18px 28px rgba(8, 35, 54, 0.16);
    transition: transform 260ms ease, box-shadow 260ms ease, filter 260ms ease;
}

/* .related-feature-action:hover 鼠标移入时的样式 */
.related-feature-action:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 22px 32px rgba(8, 35, 54, 0.2);
}

/* 控制 .related-feature-action svg 的布局、视觉和状态表现 */
.related-feature-action svg {
    width: 16px;
    height: 16px;
    transition: transform 240ms ease;
}

/* .related-feature-action:hover svg 鼠标移入时的样式 */
.related-feature-action:hover svg {
    transform: translateX(3px);
}

/* 控制 .related-neighbor-stack 的布局、视觉和状态表现 */
.related-neighbor-stack {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 18px;
    height: 100%;
    align-self: stretch;
    transition:
        transform 760ms cubic-bezier(0.16, 0.8, 0.2, 1),
        opacity 560ms ease,
        filter 560ms ease;
    will-change: transform, opacity, filter;
}

/* 控制 .related-neighbor-card 的布局、视觉和状态表现 */
.related-neighbor-card {
    position: relative;
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 16px;
    border-radius: 28px;
    border: 1px solid rgba(176, 213, 228, 0.34);
    background:
        linear-gradient(160deg, rgba(246, 251, 254, 0.88), rgba(230, 241, 246, 0.74)),
        rgba(244, 249, 252, 0.84);
    box-shadow:
        0 22px 38px rgba(12, 40, 59, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    cursor: pointer;
    text-align: left;
    opacity: 0.9;
    transform: translate3d(0, 0, 0) scale(0.985);
    transition:
        transform 320ms ease,
        box-shadow 320ms ease,
        opacity 320ms ease,
        border-color 260ms ease,
        filter 320ms ease;
    will-change: transform, opacity, filter;
}

.related-grid.is-stage-switching .related-neighbor-card {
    backface-visibility: hidden;
}

.related-stage-shell.is-stage-incoming .related-neighbor-stack {
    opacity: 0.48;
    filter: saturate(0.94);
    transform: translate3d(calc(var(--incoming-x, 72px) * 0.16), 6px, 0) scale(0.996);
}

.related-stage-shell.is-stage-incoming.is-stage-active .related-neighbor-stack,
.related-stage-shell.is-stage-active .related-neighbor-stack {
    opacity: 1;
    filter: saturate(1);
    transform: translate3d(0, 0, 0) scale(1);
}

.related-stage-shell.is-stage-outgoing .related-neighbor-stack {
    opacity: 0;
    filter: blur(8px) saturate(0.8);
    transform: translate3d(calc(var(--outgo-x, -72px) * 0.28), -4px, 0) scale(0.99);
    transition-duration: 300ms;
}

.related-stage-shell.is-stage-incoming .related-neighbor-card {
    opacity: 0.92;
    filter: none;
    transition:
        transform 620ms cubic-bezier(0.16, 0.8, 0.2, 1),
        opacity 420ms ease,
        box-shadow 520ms ease,
        border-color 420ms ease;
}

.related-stage-shell.is-stage-outgoing .related-neighbor-card {
    opacity: 0;
    filter: blur(8px);
    transition-duration: 240ms;
}

.related-stage-shell.is-stage-incoming .related-neighbor-card[data-neighbor-index="0"] {
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 18ms;
}

.related-stage-shell.is-stage-incoming .related-neighbor-card[data-neighbor-index="1"] {
    transform: translate3d(0, 5px, 0) scale(0.992);
    transition-delay: 44ms;
}

.related-stage-shell.is-stage-incoming.is-stage-active .related-neighbor-card,
.related-stage-shell.is-stage-active .related-neighbor-card {
    opacity: 0.9;
    filter: blur(0) saturate(1);
}

.related-stage-shell.is-stage-incoming.is-stage-active .related-neighbor-card[data-neighbor-index="0"],
.related-stage-shell.is-stage-active .related-neighbor-card[data-neighbor-index="0"] {
    transform: translate3d(0, 0, 0) scale(1);
}

.related-stage-shell.is-stage-incoming.is-stage-active .related-neighbor-card[data-neighbor-index="1"],
.related-stage-shell.is-stage-active .related-neighbor-card[data-neighbor-index="1"] {
    transform: translate3d(0, 0, 0) scale(0.992);
}

.related-stage-shell.is-stage-outgoing .related-neighbor-card[data-neighbor-index="0"] {
    transform: translate3d(0, -4px, 0) scale(0.996);
}

.related-stage-shell.is-stage-outgoing .related-neighbor-card[data-neighbor-index="1"] {
    transform: translate3d(0, 4px, 0) scale(0.988);
}

.related-neighbor-card::before {
    content: "";
    position: absolute;
    inset: auto 12px 12px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(123, 196, 255, 0), rgba(123, 196, 255, 0.28), rgba(123, 196, 255, 0));
    opacity: 0;
    transition: opacity 520ms ease, transform 520ms ease;
}

.related-neighbor-card.is-pressed::before,
.related-stage-shell.is-stage-active .related-neighbor-card::before {
    opacity: 1;
    transform: translate3d(0, -4px, 0) scale(1.08);
}

/* .related-neighbor-card:hover 鼠标移入时的样式 */
.related-neighbor-card:hover {
    opacity: 1;
    transform: translate3d(0, -6px, 0) scale(1);
    border-color: rgba(150, 201, 222, 0.62);
    box-shadow:
        0 26px 42px rgba(9, 36, 54, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

/* 控制 .related-neighbor-media 的布局、视觉和状态表现 */
.related-neighbor-media {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 20px;
    overflow: hidden;
    contain: layout paint style;
}

/* 控制 .related-neighbor-image 的布局、视觉和状态表现 */
.related-neighbor-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 520ms ease;
    display: block;
}

/* .related-neighbor-card:hover .related-neighbor-image 鼠标移入时的样式 */
.related-neighbor-card:hover .related-neighbor-image {
    transform: scale(1.05);
}

/* 控制 .related-neighbor-copy 的布局、视觉和状态表现 */
.related-neighbor-copy {
    display: grid;
    align-content: center;
    gap: 8px;
}

/* 控制 .related-neighbor-name 的布局、视觉和状态表现 */
.related-neighbor-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #17384f;
}

/* 控制 .related-neighbor-name span 的布局、视觉和状态表现 */
.related-neighbor-name span {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(86, 120, 139, 0.7);
}

/* 控制 .related-neighbor-desc 的布局、视觉和状态表现 */
.related-neighbor-desc {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.74;
    color: rgba(84, 113, 131, 0.86);
}

/* 控制 .related-neighbor-tags 的布局、视觉和状态表现 */
.related-neighbor-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 控制 .related-neighbor-tag 的布局、视觉和状态表现 */
.related-neighbor-tag {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(17, 64, 92, 0.06);
    border: 1px solid rgba(171, 210, 225, 0.4);
    font-size: 0.72rem;
    color: rgba(30, 73, 98, 0.84);
}

/* 控制 .related-neighbor-why 的布局、视觉和状态表现 */
.related-neighbor-why {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.68;
    color: rgba(92, 118, 133, 0.78);
}

/* .related-spots.is-visible .related-head 在对应状态下的样式 */
.related-spots.is-visible .related-head {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

/* .related-spots.is-visible .related-stage-shell 在对应状态下的样式 */
.related-spots.is-visible .related-grid:not(.is-stage-switching) .related-stage-shell.is-entry-reveal {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 120ms;
}

/* .related-spots.is-visible .related-neighbor-card 在对应状态下的样式 */
.related-spots.is-visible .related-grid:not(.is-stage-switching) .related-stage-shell.is-entry-reveal .related-neighbor-card {
    animation: relatedNeighborReveal 880ms cubic-bezier(0.18, 0.78, 0.2, 1) both;
}

/* 控制 .related-grid.is-switching.is-flow-forward .related-feature-card.is-leaving 的布局、视觉和状态表现 */
.related-grid.is-switching.is-flow-forward .related-feature-card.is-leaving {
    opacity: 0.14;
    filter: blur(12px);
    transform: translate3d(-58px, 8px, 0) scale(0.952);
}

/* 控制 .related-grid.is-switching.is-flow-backward .related-feature-card.is-leaving 的布局、视觉和状态表现 */
.related-grid.is-switching.is-flow-backward .related-feature-card.is-leaving {
    opacity: 0.14;
    filter: blur(12px);
    transform: translate3d(58px, 8px, 0) scale(0.952);
}

/* 控制 .related-grid.is-switching .related-neighbor-card 的布局、视觉和状态表现 */
.related-grid.is-switching .related-neighbor-card {
    opacity: 0.26;
    filter: blur(5px);
    transform: translate3d(0, 8px, 0) scale(0.974);
}

/* 控制 .related-grid.is-entering.is-flow-forward .related-feature-card 的布局、视觉和状态表现 */
.related-grid.is-entering.is-flow-forward .related-feature-card {
    animation: relatedFeatureEnterFromRight 720ms cubic-bezier(0.18, 0.78, 0.2, 1) both;
}

/* 控制 .related-grid.is-entering.is-flow-backward .related-feature-card 的布局、视觉和状态表现 */
.related-grid.is-entering.is-flow-backward .related-feature-card {
    animation: relatedFeatureEnterFromLeft 720ms cubic-bezier(0.18, 0.78, 0.2, 1) both;
}

/* 控制 .related-grid.is-entering .related-neighbor-card 的布局、视觉和状态表现 */
.related-grid.is-entering .related-neighbor-card {
    animation: relatedNeighborSettle 620ms cubic-bezier(0.18, 0.78, 0.2, 1) both;
}

/* 控制 .related-grid.is-navigating .related-feature-card 的布局、视觉和状态表现 */
.related-grid.is-navigating .related-feature-card {
    border-color: rgba(152, 204, 224, 0.78);
    box-shadow:
        0 36px 64px rgba(8, 34, 54, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    transform: translate3d(20px, -10px, 0) scale(1.016);
}

/* 控制 .related-grid.is-navigating .related-feature-image 的布局、视觉和状态表现 */
.related-grid.is-navigating .related-feature-image {
    transform: scale(1.08);
}

/* 控制 .related-grid.is-navigating .related-neighbor-card 的布局、视觉和状态表现 */
.related-grid.is-navigating .related-neighbor-card {
    opacity: 0.24;
    filter: blur(6px);
    transform: translate3d(0, 16px, 0) scale(0.96);
}

/* 定义 relatedStageReveal 动画关键帧 */
@keyframes relatedStageReveal {
    0% {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
        filter: blur(16px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

/* 定义 relatedNeighborReveal 动画关键帧 */
@keyframes relatedNeighborReveal {
    0% {
        opacity: 0;
        transform: translate3d(0, 22px, 0) scale(0.97);
        filter: blur(12px);
    }

    100% {
        opacity: 0.9;
        transform: translate3d(0, 0, 0) scale(0.985);
        filter: blur(0);
    }
}

/* 定义 relatedFeatureEnterFromRight 动画关键帧 */
@keyframes relatedFeatureEnterFromRight {
    0% {
        opacity: 0.22;
        transform: translate3d(46px, 0, 0) scale(0.984);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

/* 定义 relatedFeatureEnterFromLeft 动画关键帧 */
@keyframes relatedFeatureEnterFromLeft {
    0% {
        opacity: 0.22;
        transform: translate3d(-46px, 0, 0) scale(0.984);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

/* 定义 relatedNeighborSettle 动画关键帧 */
@keyframes relatedNeighborSettle {
    0% {
        opacity: 0.58;
        transform: translate3d(0, 10px, 0) scale(0.978);
        filter: blur(5px);
    }

    100% {
        opacity: 0.9;
        transform: translate3d(0, 0, 0) scale(0.985);
        filter: blur(0);
    }
}

/* ============================================
   Detail Footer
   ============================================ */

/* 控制 .detail-footer 的布局、视觉和状态表现 */
.detail-footer {
    position: relative;
    overflow: hidden;
    padding: 92px calc(var(--spacing-lg) + var(--detail-safe-side)) 46px;
    background:
        radial-gradient(circle at 18% 18%, rgba(88, 152, 182, 0.16), transparent 28%),
        radial-gradient(circle at 82% 24%, rgba(112, 175, 202, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(237, 246, 251, 0) 0%, rgba(11, 38, 55, 0.06) 14%, rgba(6, 28, 41, 0.94) 42%, rgba(5, 22, 34, 1) 100%);
}

/* .detail-footer::before 的前置装饰层 */
.detail-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -36px;
    height: 108px;
    background: linear-gradient(180deg, rgba(244, 250, 254, 0.92) 0%, rgba(244, 250, 254, 0.24) 46%, rgba(244, 250, 254, 0) 100%);
    filter: blur(24px);
    pointer-events: none;
}

/* .detail-footer::after 的后置装饰层 */
.detail-footer::after {
    content: "";
    position: absolute;
    inset: auto 0 -18px;
    height: 140px;
    background:
        radial-gradient(circle at 50% 0%, rgba(150, 214, 233, 0.08), transparent 48%),
        linear-gradient(180deg, rgba(5, 22, 34, 0) 0%, rgba(4, 17, 27, 0.86) 100%);
    pointer-events: none;
}

/* 控制 .detail-footer-shell 的布局、视觉和状态表现 */
.detail-footer-shell {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    gap: 28px;
}

/* 控制 .detail-footer-reveal 的布局、视觉和状态表现 */
.detail-footer-reveal {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition:
        opacity 560ms ease,
        transform 760ms cubic-bezier(0.22, 0.72, 0.2, 1);
    contain: layout paint style;
    isolation: isolate;
    will-change: opacity, transform;
}

/* .detail-footer.is-visible .detail-footer-reveal 在对应状态下的样式 */
.detail-footer.is-visible .detail-footer-reveal {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.detail-footer.is-harbor-awake::before {
    opacity: 0.96;
}

.detail-footer.is-harbor-awake .detail-footer-shell {
    animation: detailFooterHarborSettle 1.2s cubic-bezier(0.18, 0.78, 0.22, 1) both;
}

@keyframes detailFooterHarborSettle {
    0% {
        transform: translate3d(0, 18px, 0);
        filter: blur(10px);
    }

    100% {
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

/* 控制 .detail-footer-echo 的布局、视觉和状态表现 */
.detail-footer-echo {
    transition-delay: 0ms;
}

.detail-footer-explore {
    transition-delay: 120ms;
}

.detail-footer-bottom {
    transition-delay: 240ms;
}

/* 控制 .detail-footer-echo 的布局、视觉和状态表现 */
.detail-footer-echo {
    position: relative;
    display: grid;
    gap: 14px;
    padding: clamp(28px, 4vw, 42px);
    border-radius: 34px;
    background:
        radial-gradient(circle at 14% 16%, rgba(142, 205, 225, 0.14), transparent 28%),
        linear-gradient(148deg, rgba(13, 43, 61, 0.82), rgba(8, 32, 47, 0.78));
    border: 1px solid rgba(180, 220, 235, 0.14);
    box-shadow:
        0 30px 60px rgba(3, 14, 24, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* .detail-footer-echo::after 的后置装饰层 */
.detail-footer-echo::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(242, 249, 253, 0.1), transparent 46%, rgba(242, 249, 253, 0.05));
    opacity: 0.44;
    pointer-events: none;
}

/* 控制 .detail-footer-kicker 的布局、视觉和状态表现 */
.detail-footer-kicker {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(204, 227, 237, 0.58);
}

/* 控制 .detail-footer-title 的布局、视觉和状态表现 */
.detail-footer-title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 600;
    line-height: 1.12;
    color: #f4fbff;
}

/* 控制 .detail-footer-lead 的布局、视觉和状态表现 */
.detail-footer-lead {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.9;
    color: rgba(226, 239, 246, 0.84);
}

/* 控制 .detail-footer-murmur 的布局、视觉和状态表现 */
.detail-footer-murmur {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.82;
    color: rgba(193, 217, 229, 0.72);
}

/* 控制 .detail-footer-actions 的布局、视觉和状态表现 */
.detail-footer-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

/* 控制 .detail-footer-chip 的布局、视觉和状态表现 */
.detail-footer-chip {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border-radius: 999px;
    cursor: pointer;
    background:
        linear-gradient(180deg, rgba(244, 250, 253, 0.08), rgba(188, 220, 233, 0.04)),
        rgba(17, 54, 74, 0.32);
    border: 1px solid rgba(191, 226, 239, 0.16);
    color: #eef8fb;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    transition:
        transform 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease,
        background-color 240ms ease;
}

/* .detail-footer-chip:hover 鼠标移入时的样式 */
.detail-footer-chip:hover {
    transform: translate3d(0, -2px, 0);
    border-color: rgba(210, 235, 244, 0.26);
    box-shadow: 0 14px 28px rgba(3, 14, 24, 0.16);
}

/* 控制 .detail-footer-explore 的布局、视觉和状态表现 */
.detail-footer-explore {
    display: grid;
    gap: 22px;
}

/* 控制 .detail-footer-explore-head 的布局、视觉和状态表现 */
.detail-footer-explore-head {
    display: grid;
    gap: 10px;
    max-width: 720px;
}

/* 控制 .detail-footer-overline 的布局、视觉和状态表现 */
.detail-footer-overline {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(194, 220, 232, 0.5);
}

/* 控制 .detail-footer-explore-title 的布局、视觉和状态表现 */
.detail-footer-explore-title {
    margin: 0;
    font-size: clamp(1.34rem, 2vw, 1.82rem);
    color: #f0f9fc;
}

/* 控制 .detail-footer-explore-copy 的布局、视觉和状态表现 */
.detail-footer-explore-copy {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.76;
    color: rgba(192, 216, 228, 0.68);
}

/* 控制 .detail-footer-grid 的布局、视觉和状态表现 */
.detail-footer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(280px, 0.95fr);
    gap: 18px;
    align-items: start;
}

/* 控制 .detail-footer-group 的布局、视觉和状态表现 */
.detail-footer-group {
    display: grid;
    gap: 14px;
    min-height: 100%;
    padding: 20px 18px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(244, 250, 253, 0.06), rgba(166, 204, 219, 0.03)),
        rgba(9, 31, 46, 0.38);
    border: 1px solid rgba(168, 208, 223, 0.12);
    box-shadow:
        0 18px 36px rgba(3, 14, 24, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* 控制 .detail-footer-group-title 的布局、视觉和状态表现 */
.detail-footer-group-title {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #eef8fb;
}

/* 控制 .detail-footer-links 的布局、视觉和状态表现 */
.detail-footer-links {
    display: grid;
    gap: 10px;
}

/* 控制 .detail-footer-link 的布局、视觉和状态表现 */
.detail-footer-link {
    color: rgba(204, 225, 235, 0.76);
    text-decoration: none;
    font-size: 0.88rem;
    line-height: 1.62;
    transition: color 220ms ease, transform 220ms ease, opacity 220ms ease;
}

/* 控制 .detail-footer-link-button 的布局、视觉和状态表现 */
.detail-footer-link-button {
    all: unset;
    color: rgba(204, 225, 235, 0.76);
    cursor: pointer;
    font-size: 0.88rem;
    line-height: 1.62;
    transition: color 220ms ease, transform 220ms ease, opacity 220ms ease;
}

/* .detail-footer-link:hover, 鼠标移入时的样式 */
.detail-footer-link:hover,
.detail-footer-link-button:hover {
    color: #f5fbff;
    transform: translate3d(0, -1px, 0);
    text-decoration: none;
}

/* 控制 .detail-footer-next 的布局、视觉和状态表现 */
.detail-footer-next {
    min-height: 100%;
}

/* 控制 .detail-footer-next-kicker 的布局、视觉和状态表现 */
.detail-footer-next-kicker {
    margin: 0 0 10px;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(196, 220, 231, 0.48);
}

/* 控制 .detail-footer-next-card 的布局、视觉和状态表现 */
.detail-footer-next-card {
    display: grid;
    gap: 10px;
    min-height: calc(100% - 22px);
    padding: 22px 20px;
    border-radius: 26px;
    text-decoration: none;
    background:
        radial-gradient(circle at 84% 18%, rgba(141, 207, 228, 0.16), transparent 26%),
        linear-gradient(155deg, rgba(14, 47, 66, 0.84), rgba(8, 31, 46, 0.82));
    border: 1px solid rgba(175, 216, 231, 0.16);
    box-shadow:
        0 22px 44px rgba(3, 14, 24, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: inherit;
    transition:
        transform 260ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

/* .detail-footer-next-card:hover 鼠标移入时的样式 */
.detail-footer-next-card:hover {
    transform: translate3d(0, -4px, 0);
    border-color: rgba(204, 233, 244, 0.24);
    box-shadow:
        0 28px 52px rgba(3, 14, 24, 0.24),
        0 0 18px rgba(138, 203, 225, 0.08);
    text-decoration: none;
}

/* 控制 .detail-footer-next-label 的布局、视觉和状态表现 */
.detail-footer-next-label {
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(198, 222, 233, 0.58);
}

/* 控制 .detail-footer-next-name 的布局、视觉和状态表现 */
.detail-footer-next-name {
    font-size: 1.16rem;
    line-height: 1.4;
    color: #f3fbff;
}

/* 控制 .detail-footer-next-copy 的布局、视觉和状态表现 */
.detail-footer-next-copy {
    font-size: 0.9rem;
    line-height: 1.74;
    color: rgba(205, 224, 234, 0.72);
}

/* 控制 .detail-footer-bottom 的布局、视觉和状态表现 */
.detail-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(183, 217, 231, 0.12);
}

/* 控制 .detail-footer-bottom p 的布局、视觉和状态表现 */
.detail-footer-bottom p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(166, 191, 205, 0.52);
}

/* ============================================
   海图导览与浮层系统
   ============================================ */

/* ============================================
   Sea Guide
   ============================================ */

/* 控制 .sea-guide 的布局、视觉和状态表现 */
.sea-guide {
    position: fixed;
    right: 26px;
    bottom: 24px;
    z-index: 1380;
    display: grid;
    justify-items: end;
    gap: 14px;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 20px, 0);
    transition:
        opacity 300ms ease,
        transform 420ms cubic-bezier(0.22, 0.72, 0.2, 1);
}

/* .sea-guide.is-visible 在对应状态下的样式 */
.sea-guide.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* 控制 .sea-guide.is-deep .sea-guide-trigger 的布局、视觉和状态表现 */
.sea-guide.is-deep .sea-guide-trigger {
    border-color: rgba(176, 220, 237, 0.34);
    box-shadow:
        0 22px 44px rgba(6, 20, 31, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 22px rgba(128, 191, 219, 0.12);
}

/* 控制 .sea-guide-trigger 的布局、视觉和状态表现 */
.sea-guide-trigger {
    all: unset;
    position: relative;
    min-width: 116px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px 14px;
    border-radius: 999px;
    cursor: pointer;
    color: #eef7fb;
    background:
        radial-gradient(circle at 18% 18%, rgba(134, 202, 224, 0.14), transparent 34%),
        linear-gradient(145deg, rgba(10, 34, 51, 0.78), rgba(10, 44, 62, 0.72));
    border: 1px solid rgba(176, 220, 237, 0.22);
    box-shadow:
        0 18px 36px rgba(6, 20, 31, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition:
        transform 240ms ease,
        box-shadow 240ms ease,
        border-color 240ms ease,
        background-color 240ms ease;
    animation: seaGuideDrift 8.6s ease-in-out infinite;
    pointer-events: auto;
}

/* .sea-guide-trigger::after 的后置装饰层 */
.sea-guide-trigger::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 10%, rgba(233, 247, 253, 0.12) 48%, transparent 86%);
    opacity: 0.36;
    transform: translateX(-24%);
    transition: transform 620ms ease, opacity 260ms ease;
    pointer-events: none;
}

/* .sea-guide-trigger:hover 鼠标移入时的样式 */
.sea-guide-trigger:hover {
    transform: translate3d(0, -3px, 0);
    border-color: rgba(191, 229, 242, 0.34);
    box-shadow:
        0 24px 44px rgba(6, 20, 31, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 20px rgba(144, 202, 226, 0.12);
}

/* .sea-guide-trigger:hover::after, 的后置装饰层 */
.sea-guide-trigger:hover::after,
.sea-guide.is-open .sea-guide-trigger::after {
    transform: translateX(22%);
    opacity: 0.52;
}

/* .sea-guide-trigger:active 按下时的样式 */
.sea-guide-trigger:active {
    transform: translate3d(0, -1px, 0);
}

/* 控制 .sea-guide-trigger-icon 的布局、视觉和状态表现 */
.sea-guide-trigger-icon {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: rgba(235, 247, 252, 0.88);
    flex: 0 0 auto;
}

/* 控制 .sea-guide-trigger-icon svg 的布局、视觉和状态表现 */
.sea-guide-trigger-icon svg {
    width: 100%;
    height: 100%;
}

/* 控制 .sea-guide-trigger-copy 的布局、视觉和状态表现 */
.sea-guide-trigger-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

/* 控制 .sea-guide-trigger-copy strong 的布局、视觉和状态表现 */
.sea-guide-trigger-copy strong {
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* 控制 .sea-guide-trigger-copy small 的布局、视觉和状态表现 */
.sea-guide-trigger-copy small {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(215, 234, 243, 0.58);
}

/* 控制 .sea-guide-panel 的布局、视觉和状态表现 */
.sea-guide-panel {
    order: -1;
    width: min(320px, calc(100vw - 28px));
    /* 面板理想宽度是 320px；若屏幕更窄，就按“视口宽度减去 28px”收住，
       也就是左右总共留 28px 安全边距，避免浮标面板贴边。 */
    max-height: min(62vh, 560px);
    /* 高度优先不要超过视口的 62%，同时也不给它超过 560px，
       这样导览面板始终像悬浮海图，而不是整块铺满屏幕。 */
    overflow: auto; /* 条目过多时允许面板自己滚动 */
    overscroll-behavior-y: auto; /* 面板触到边缘后，继续把滚动交回详情页阅读流 */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 18px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 16% 14%, rgba(113, 187, 214, 0.14), transparent 28%),
        linear-gradient(150deg, rgba(8, 31, 47, 0.84), rgba(10, 45, 64, 0.78));
    border: 1px solid rgba(171, 218, 236, 0.2);
    box-shadow:
        0 28px 56px rgba(6, 20, 31, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    opacity: 0;
    pointer-events: none;
    filter: blur(8px);
    transform: translate3d(0, 16px, 0) scale(0.985);
    transform-origin: 100% 100%;
    transition:
        opacity 300ms ease,
        transform 360ms cubic-bezier(0.22, 0.72, 0.2, 1),
        filter 320ms ease;
}

.sea-guide-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* .sea-guide.is-open .sea-guide-panel 在对应状态下的样式 */
.sea-guide.is-open .sea-guide-panel {
    opacity: 1;
    pointer-events: auto;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

/* 控制 .sea-guide-kicker 的布局、视觉和状态表现 */
.sea-guide-kicker {
    margin: 0 0 14px;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(214, 234, 242, 0.52);
}

/* 控制 .sea-guide-list 的布局、视觉和状态表现 */
.sea-guide-list {
    display: grid;
    gap: 10px;
}

/* 控制 .sea-guide-entry 的布局、视觉和状态表现 */
.sea-guide-entry {
    all: unset;
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
    padding: 13px 14px;
    border-radius: 18px;
    border: 1px solid rgba(172, 217, 233, 0.1);
    background: rgba(243, 250, 255, 0.03);
    box-sizing: border-box;
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition:
        transform 240ms ease,
        opacity 280ms ease,
        border-color 240ms ease,
        background-color 240ms ease,
        box-shadow 240ms ease;
}

/* .sea-guide.is-open .sea-guide-entry 在对应状态下的样式 */
.sea-guide.is-open .sea-guide-entry {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* .sea-guide.is-open .sea-guide-entry:nth-child(1) { transition-delay: 20ms; } 在对应状态下的样式 */
.sea-guide.is-open .sea-guide-entry:nth-child(1) { transition-delay: 20ms; }
.sea-guide.is-open .sea-guide-entry:nth-child(2) { transition-delay: 45ms; }
.sea-guide.is-open .sea-guide-entry:nth-child(3) { transition-delay: 70ms; }
.sea-guide.is-open .sea-guide-entry:nth-child(4) { transition-delay: 95ms; }
.sea-guide.is-open .sea-guide-entry:nth-child(5) { transition-delay: 120ms; }
.sea-guide.is-open .sea-guide-entry:nth-child(6) { transition-delay: 145ms; }
.sea-guide.is-open .sea-guide-entry:nth-child(7) { transition-delay: 170ms; }

/* .sea-guide-entry::before 的前置装饰层 */
.sea-guide-entry::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 3px;
    height: 26px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(153, 213, 233, 0.08), rgba(153, 213, 233, 0.7));
    transform: translateY(-50%) scaleY(0.35);
    opacity: 0;
    transition: transform 260ms ease, opacity 260ms ease;
}

/* .sea-guide-entry:hover 鼠标移入时的样式 */
.sea-guide-entry:hover {
    transform: translate3d(0, -2px, 0);
    border-color: rgba(178, 223, 238, 0.22);
    background: rgba(243, 250, 255, 0.07);
    box-shadow: 0 14px 28px rgba(4, 18, 29, 0.18);
}

/* 控制 .sea-guide-entry.is-current 的布局、视觉和状态表现 */
.sea-guide-entry.is-current {
    border-color: rgba(180, 223, 238, 0.28);
    background: rgba(243, 250, 255, 0.09);
    box-shadow: 0 16px 28px rgba(5, 18, 29, 0.2);
}

/* .sea-guide-entry.is-current::before 的前置装饰层 */
.sea-guide-entry.is-current::before {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
}

/* 控制 .sea-guide-entry-copy 的布局、视觉和状态表现 */
.sea-guide-entry-copy {
    display: grid;
    gap: 4px;
    padding-left: 10px;
}

/* 控制 .sea-guide-entry-copy strong 的布局、视觉和状态表现 */
.sea-guide-entry-copy strong {
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(244, 251, 255, 0.94);
}

/* 控制 .sea-guide-entry-copy small 的布局、视觉和状态表现 */
.sea-guide-entry-copy small {
    font-size: 0.78rem;
    line-height: 1.58;
    color: rgba(208, 229, 239, 0.6);
}

/* 控制 .sea-guide-entry.is-current .sea-guide-entry-copy strong 的布局、视觉和状态表现 */
.sea-guide-entry.is-current .sea-guide-entry-copy strong {
    color: #f5fbfe;
}

/* 控制 .sea-guide-entry.is-current .sea-guide-entry-copy small 的布局、视觉和状态表现 */
.sea-guide-entry.is-current .sea-guide-entry-copy small {
    color: rgba(223, 239, 247, 0.7);
}

/* 定义 seaGuideDrift 动画关键帧 */
@keyframes seaGuideDrift {
    0%,
    100% {
        box-shadow:
            0 18px 36px rgba(6, 20, 31, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.11);
    }
    50% {
        box-shadow:
            0 22px 40px rgba(6, 20, 31, 0.26),
            inset 0 1px 0 rgba(255, 255, 255, 0.13),
            0 0 18px rgba(136, 198, 223, 0.08);
    }
}

/* 控制 .modal 的布局、视觉和状态表现 */
.modal {
    --booking-overlay-alpha: 100%;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    background: transparent;
    background-color: color-mix(in srgb, rgba(4, 18, 29, 0.82), transparent var(--booking-overlay-alpha));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        opacity 420ms ease,
        visibility 0s linear 420ms,
        background-color 520ms ease;
}

/* .modal.active 在对应状态下的样式 */
.modal.active {
    --booking-overlay-alpha: 44%;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition:
        opacity 420ms ease,
        visibility 0s linear 0s,
        background-color 560ms ease;
}

.modal.is-closing {
    --booking-overlay-alpha: 100%;
    opacity: 0;
    pointer-events: none;
}

.booking-modal.is-closing.is-returning-to-focus-panel {
    --booking-overlay-alpha: 0%;
    opacity: 1;
    visibility: visible;
    background: transparent;
    background-color: transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition:
        background-color 220ms ease,
        backdrop-filter 220ms ease,
        -webkit-backdrop-filter 220ms ease,
        visibility 0s linear 520ms;
}

/* 控制 .modal-content 的布局、视觉和状态表现 */
.modal-content {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: modalSlideUp 0.3s ease-out;
}

/* 控制 .booking-modal-content 的布局、视觉和状态表现 */
.booking-modal-content {
    display: flex;
    flex-direction: column;
    max-width: min(920px, calc(100vw - 32px));
    width: min(920px, calc(100vw - 32px));
    /* 宽度想维持在 920px 内，但如果屏幕更小，就按视口宽度减 32px 收住，
       等于左右各留 16px 缓冲，不让弹层边缘顶到屏幕。 */
    max-height: calc(100vh - 44px);
    /* 把弹层最大高度限制在视口高度减 44px，
       目的是上下都留一点呼吸空间，而不是让弹层直接顶满整个屏幕。 */
    overflow-x: hidden;
    overflow-y: auto; /* 弹层整体自己滚动，避免内部多层滚动链在某些浏览器里失效 */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 24px 24px 20px;
    border-radius: 30px;
    background-color: #082638;
    background:
        radial-gradient(circle at 18% 18%, rgba(136, 210, 233, 0.16), transparent 34%),
        linear-gradient(165deg, rgba(17, 54, 79, 0.96), rgba(8, 34, 52, 0.94) 58%, rgba(10, 45, 66, 0.92) 100%);
    border: 1px solid rgba(164, 213, 232, 0.22);
    box-shadow:
        0 30px 70px rgba(4, 20, 34, 0.28),
        0 0 30px rgba(126, 198, 222, 0.08),
        inset 0 1px 0 rgba(243, 249, 252, 0.14);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.988);
    filter: none;
    transform-origin: center center;
    animation: none;
    position: relative;
    z-index: 2;
    transition:
        opacity 440ms ease,
        transform 580ms cubic-bezier(0.2, 0.82, 0.2, 1),
        background 680ms cubic-bezier(0.18, 0.82, 0.2, 1),
        border-color 680ms cubic-bezier(0.18, 0.82, 0.2, 1),
        box-shadow 680ms cubic-bezier(0.18, 0.82, 0.2, 1),
        visibility 0s linear 440ms;
    will-change: transform, opacity;
    scrollbar-width: thin;
    scrollbar-color: rgba(153, 206, 226, 0.44) rgba(255, 255, 255, 0.02);
}

#bookingModalBody {
    display: block;
}

.booking-modal.active .booking-modal-content {
    visibility: visible;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition:
        opacity 480ms ease,
        transform 640ms cubic-bezier(0.16, 0.84, 0.18, 1),
        visibility 0s linear 0s;
}

.booking-modal-content.is-confirm-scrolling {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 22px 48px rgba(4, 20, 34, 0.2),
        0 0 18px rgba(126, 198, 222, 0.05),
        inset 0 1px 0 rgba(243, 249, 252, 0.1);
}

.booking-modal-content.is-confirm-scrolling .package-modal-actions.is-guided-focus,
.booking-modal-content.is-confirm-scrolling .package-modal-grid.is-guided-focus {
    animation: none;
}

.booking-modal.active .booking-modal-content.is-morphing {
    visibility: visible;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.booking-modal.is-closing .booking-modal-content {
    visibility: visible;
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.992);
    filter: blur(6px);
}

.booking-modal.is-closing.is-returning-to-focus-panel .booking-modal-content {
    visibility: visible;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    will-change: transform, opacity, filter;
    transition:
        opacity 460ms cubic-bezier(0.18, 0.78, 0.26, 1),
        transform 520ms cubic-bezier(0.14, 0.88, 0.18, 1),
        filter 460ms ease,
        visibility 0s linear 0s;
}

.booking-modal.is-navigating-away .booking-modal-content {
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    transform: translate3d(0, 18px, 0) scale(0.986);
    filter: blur(6px);
    transition:
        opacity 280ms ease,
        transform 320ms cubic-bezier(0.22, 0.78, 0.3, 1),
        filter 320ms ease;
}

.booking-modal-content::-webkit-scrollbar {
    width: 8px;
}

.booking-modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 999px;
}

.booking-modal-content::-webkit-scrollbar-thumb {
    background:
        linear-gradient(180deg, rgba(175, 223, 239, 0.62), rgba(94, 160, 186, 0.46));
    border-radius: 999px;
    border: 1px solid rgba(181, 225, 239, 0.14);
}

.booking-modal-content::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, rgba(195, 232, 243, 0.72), rgba(106, 174, 201, 0.58));
}

/* 套餐卡共享元素过渡的 ghost：
   这张影子卡负责从原卡位置放大到弹层中心，
   让打开详情的过程更像“展开一张卡”，而不是普通弹窗。 */
.booking-card-morph-ghost {
    position: fixed;
    margin: 0;
    z-index: 1;
    pointer-events: none;
    transform-origin: top left;
    will-change: transform, opacity, filter;
    animation: none !important;
    opacity: 1 !important;
}

.booking-card-morph-ghost,
.booking-card-morph-ghost * {
    transition: none !important;
}

.booking-card-morph-ghost::before {
    opacity: 0 !important;
    transform: none !important;
}

/* 定义 modalSlideUp 动画关键帧 */
@keyframes modalSlideUp {
/* 控制动画在 from 阶段的状态 */
    from {
        transform: translateY(50px);
        opacity: 0;
    }
/* 控制动画在 to 阶段的状态 */
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 控制 .modal-close 的布局、视觉和状态表现 */
.modal-close {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: rgba(220, 239, 247, 0.76);
    transition: color var(--transition-fast);
}

/* .modal-close:hover 鼠标移入时的样式 */
.modal-close:hover {
    color: #f5fbff;
}

/* 控制 .package-modal-shell 的布局、视觉和状态表现 */
.package-modal-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100%;
    max-height: none;
}

/* 控制 .package-modal-head 的布局、视觉和状态表现 */
.package-modal-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    padding-right: 44px;
}

.package-modal-head-copy {
    min-width: 0;
}

.package-modal-overline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.package-modal-state {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(173, 229, 243, 0.14);
    border: 1px solid rgba(173, 229, 243, 0.28);
    color: rgba(236, 248, 253, 0.94);
    font-size: 0.76rem;
    line-height: 1;
}

/* 控制 .package-modal-kicker 的布局、视觉和状态表现 */
.package-modal-kicker {
    margin: 0;
    font-size: 0.74rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(187, 224, 236, 0.7);
}

/* 控制 .package-modal-title 的布局、视觉和状态表现 */
.package-modal-title {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: 2rem;
    line-height: 1.18;
    color: rgba(245, 251, 254, 0.98);
}

/* 控制 .package-modal-subtitle 的布局、视觉和状态表现 */
.package-modal-subtitle {
    margin: 12px 0 0;
    color: rgba(217, 238, 246, 0.84);
    line-height: 1.78;
}

/* 控制 .package-modal-price 的布局、视觉和状态表现 */
.package-modal-price {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    padding: 16px 18px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(184, 227, 239, 0.1), rgba(39, 101, 130, 0.12)),
        rgba(7, 28, 42, 0.24);
    border: 1px solid rgba(183, 223, 236, 0.16);
    color: #f8fdff;
    box-shadow:
        inset 0 1px 0 rgba(248, 251, 253, 0.1),
        0 12px 24px rgba(6, 23, 36, 0.16);
}

.package-modal-price-duration {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(217, 238, 246, 0.68);
}

/* 控制 .package-modal-price strong 的布局、视觉和状态表现 */
.package-modal-price strong,
.package-modal-price-amount {
    display: block;
    margin-top: 8px;
    font-size: 1.48rem;
    color: rgba(245, 251, 254, 0.98);
}

/* 控制 .package-modal-match 的布局、视觉和状态表现 */
.package-modal-match {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.booking-modal-content .package-modal-match .booking-match-chip,
.booking-modal-content .package-modal-match .booking-match-link {
    background:
        linear-gradient(180deg, rgba(240, 249, 252, 0.14), rgba(155, 208, 228, 0.08)),
        rgba(255, 255, 255, 0.04);
    border-color: rgba(180, 223, 237, 0.18);
    color: rgba(228, 244, 249, 0.92);
    box-shadow: inset 0 1px 0 rgba(247, 251, 253, 0.12);
}

.booking-match-confirm {
    position: relative;
    margin-top: 12px;
    padding: 16px 20px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 15% 0%, rgba(132, 209, 239, 0.2), transparent 42%),
        linear-gradient(175deg, rgba(12, 35, 58, 0.95), rgba(8, 22, 33, 0.88));
    border: 1px solid rgba(173, 227, 244, 0.28);
    box-shadow:
        0 28px 60px rgba(4, 13, 24, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 10px, 0) scale(0.992);
    transition:
        opacity 280ms ease,
        transform 360ms cubic-bezier(0.2, 0.82, 0.2, 1),
        filter 360ms ease,
        visibility 0s linear 280ms;
    pointer-events: none;
}

.booking-match-confirm.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
}

.booking-match-confirm.is-closing {
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    transform: translate3d(0, 12px, 0) scale(0.98);
}

.booking-match-confirm-heading {
    margin: 0;
    font-size: 0.9rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(204, 235, 247, 0.86);
}

.booking-match-confirm-copy {
    margin: 6px 0 0;
    font-size: 1rem;
    color: rgba(232, 244, 252, 0.94);
    line-height: 1.4;
}

.booking-match-confirm-actions {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.booking-match-confirm-primary,
.booking-match-confirm-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.82rem;
    line-height: 1;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.booking-match-confirm-primary {
    background: linear-gradient(145deg, rgba(176, 226, 241, 0.96), rgba(143, 207, 236, 0.94));
    color: #052040;
    box-shadow: 0 14px 30px rgba(8, 34, 66, 0.28);
}

.booking-match-confirm-primary:hover {
    transform: translateY(-1px) scale(1.01);
}

.booking-match-confirm-secondary {
    border-color: rgba(193, 211, 222, 0.5);
    color: rgba(219, 239, 247, 0.94);
    background: rgba(14, 36, 55, 0.4);
}

.booking-match-confirm-secondary:hover {
    transform: translateY(-1px);
}

@media (max-width: 960px) {
    .booking-match-confirm {
        padding: 14px 16px;
        border-radius: 22px;
    }
    .booking-match-confirm-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* 套餐弹层顶部的“展开卡面”：
   保持和原套餐卡同一种深海材质，让共享文字有稳定的落点，
   打开时更像原卡继续往里展开，而不是切进另一套白色弹窗。 */
.package-modal-head {
    display: block;
    padding-right: 44px;
}

.package-modal-archive {
    display: grid;
    gap: 16px;
    padding: 22px 22px 20px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 16% 12%, rgba(131, 209, 232, 0.18), transparent 32%),
        linear-gradient(180deg, rgba(149, 208, 229, 0.1), rgba(22, 78, 104, 0.2)),
        rgba(7, 28, 42, 0.34);
    border: 1px solid rgba(180, 223, 237, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(247, 251, 253, 0.09),
        0 18px 36px rgba(3, 15, 24, 0.16);
}

.package-modal-head-copy {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.package-modal-overline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0;
}

.package-modal-state,
.package-modal-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 7px 14px;
    border-radius: 999px;
    white-space: nowrap;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.package-modal-state {
    background: rgba(244, 250, 253, 0.1);
    border: 1px solid rgba(180, 223, 237, 0.16);
    color: rgba(228, 244, 249, 0.84);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
}

.package-modal-kicker {
    margin: 0;
    background:
        linear-gradient(180deg, rgba(240, 249, 252, 0.14), rgba(155, 208, 228, 0.08)),
        rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(180, 223, 237, 0.18);
    box-shadow: inset 0 1px 0 rgba(247, 251, 253, 0.12);
    color: rgba(228, 244, 249, 0.92);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.package-modal-title {
    margin: 0;
    max-width: 18em;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.42rem, 2.1vw, 1.78rem);
    line-height: 1.26;
    color: rgba(245, 251, 254, 0.98);
}

.package-modal-subtitle {
    margin: 0;
    max-width: 40rem;
    color: rgba(217, 238, 246, 0.84);
    line-height: 1.78;
}

.package-modal-rhythm {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.package-modal-rhythm .package-plate-rhythm {
    background: rgba(18, 76, 106, 0.18);
    border-color: rgba(162, 204, 223, 0.3);
    color: rgba(214, 236, 246, 0.78);
    box-shadow: inset 0 1px 0 rgba(247, 251, 253, 0.07);
}

.package-modal-rhythm .package-plate-rhythm::before {
    background: rgba(173, 229, 243, 0.74);
    box-shadow: 0 0 0 3px rgba(188, 220, 232, 0.14);
}

.package-modal-signal {
    display: grid;
    grid-template-columns: minmax(220px, 252px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.package-modal-price {
    display: grid;
    align-items: stretch;
    gap: 12px;
    justify-content: stretch;
    min-width: 0;
    padding: 18px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 12%, rgba(173, 229, 243, 0.12), transparent 42%),
        linear-gradient(180deg, rgba(184, 227, 239, 0.08), rgba(39, 101, 130, 0.1)),
        rgba(5, 23, 36, 0.3);
    border: 1px solid rgba(183, 223, 236, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(248, 251, 253, 0.08),
        0 12px 24px rgba(6, 23, 36, 0.14);
    color: rgba(245, 251, 254, 0.98);
}

.package-modal-price-core,
.package-modal-price-copy {
    display: grid;
    gap: 8px;
}

.package-modal-price-label {
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(187, 224, 236, 0.62);
}

.package-modal-price strong,
.package-modal-price-amount {
    margin-top: 0;
    font-size: 1.68rem;
    line-height: 1.06;
    color: rgba(245, 251, 254, 0.98);
}

.package-modal-price-note {
    margin: 0;
    color: rgba(217, 238, 246, 0.78);
    font-size: 0.84rem;
    line-height: 1.72;
}

.package-modal-price-toggle {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(180, 223, 237, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: 10px 14px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(240, 249, 252, 0.12), rgba(155, 208, 228, 0.06)),
        rgba(255, 255, 255, 0.04);
    color: rgba(236, 248, 253, 0.92);
    font-size: 0.84rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition:
        transform 280ms ease,
        border-color 280ms ease,
        background-color 280ms ease,
        box-shadow 280ms ease,
        color 280ms ease;
}

.package-modal-price-toggle:hover,
.package-modal-price-toggle:focus-visible {
    transform: translate3d(0, -1px, 0);
    border-color: rgba(183, 223, 236, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(247, 251, 253, 0.12),
        0 12px 20px rgba(6, 23, 36, 0.14);
}

.package-modal-price-editor {
    display: grid;
    gap: 14px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translate3d(0, -4px, 0);
    padding-top: 0;
    border-top: 1px solid transparent;
    transition:
        max-height 440ms cubic-bezier(0.18, 0.78, 0.22, 1),
        opacity 260ms ease,
        transform 440ms cubic-bezier(0.18, 0.78, 0.22, 1),
        padding-top 260ms ease,
        border-color 260ms ease;
}

.package-modal-price-editor.is-open {
    max-height: 760px;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    padding-top: 14px;
    border-top-color: rgba(180, 223, 237, 0.12);
}

.package-modal-option-group {
    display: grid;
    gap: 8px;
}

.package-modal-option-label,
.package-modal-summary-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(187, 224, 236, 0.62);
}

.package-modal-option-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.package-modal-option {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(180, 223, 237, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(217, 238, 246, 0.82);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition:
        transform 260ms ease,
        border-color 260ms ease,
        background-color 260ms ease,
        color 260ms ease,
        box-shadow 260ms ease;
}

.package-modal-option:hover,
.package-modal-option:focus-visible {
    transform: translate3d(0, -1px, 0);
    border-color: rgba(183, 223, 236, 0.22);
    color: rgba(244, 250, 253, 0.96);
}

.package-modal-option.is-selected {
    background:
        linear-gradient(180deg, rgba(240, 249, 252, 0.14), rgba(155, 208, 228, 0.08)),
        rgba(255, 255, 255, 0.04);
    border-color: rgba(183, 223, 236, 0.26);
    color: rgba(244, 250, 253, 0.98);
    box-shadow: inset 0 1px 0 rgba(247, 251, 253, 0.12);
}

.package-modal-custom-duration {
    display: grid;
    gap: 10px;
    padding: 12px 14px 14px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 14% 12%, rgba(184, 232, 245, 0.14), transparent 46%),
        linear-gradient(180deg, rgba(184, 227, 239, 0.08), rgba(17, 64, 88, 0.2)),
        rgba(5, 23, 36, 0.24);
    border: 1px solid rgba(180, 223, 237, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(248, 251, 253, 0.08),
        0 10px 20px rgba(5, 19, 29, 0.12);
}

.package-modal-custom-duration-copy {
    display: grid;
    gap: 4px;
}

.package-modal-custom-duration-kicker {
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(187, 224, 236, 0.64);
}

.package-modal-custom-duration-note {
    margin: 0;
    color: rgba(217, 238, 246, 0.76);
    font-size: 0.78rem;
    line-height: 1.7;
}

.package-modal-custom-duration-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.package-modal-custom-duration-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(151, 206, 226, 0.04)),
        rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(180, 223, 237, 0.14);
}

.package-modal-custom-duration-field input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(244, 250, 253, 0.98);
    font: inherit;
    font-size: 0.96rem;
    line-height: 1;
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
}

.package-modal-custom-duration-field input::placeholder {
    color: rgba(187, 224, 236, 0.44);
}

.package-modal-custom-duration-field input::-webkit-inner-spin-button,
.package-modal-custom-duration-field input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.package-modal-custom-duration-field span {
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    color: rgba(187, 224, 236, 0.58);
}

.package-modal-custom-duration-apply {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(180, 223, 237, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(240, 249, 252, 0.12), rgba(155, 208, 228, 0.06)),
        rgba(255, 255, 255, 0.04);
    color: rgba(236, 248, 253, 0.92);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition:
        transform 260ms ease,
        border-color 260ms ease,
        background-color 260ms ease,
        color 260ms ease,
        box-shadow 260ms ease;
}

.package-modal-custom-duration-apply:hover,
.package-modal-custom-duration-apply:focus-visible {
    transform: translate3d(0, -1px, 0);
    border-color: rgba(183, 223, 236, 0.24);
    color: rgba(244, 250, 253, 0.98);
    box-shadow:
        inset 0 1px 0 rgba(247, 251, 253, 0.12),
        0 10px 18px rgba(5, 19, 29, 0.12);
}

.package-modal-price-support {
    margin: 0;
    color: rgba(187, 224, 236, 0.68);
    font-size: 0.8rem;
    line-height: 1.72;
}

.package-modal-editor-cta {
    display: grid;
    gap: 8px;
    padding-top: 0;
    margin-top: 0;
    border-top: 1px solid transparent;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translate3d(0, -10px, 0);
    filter: blur(4px);
    transition:
        max-height 420ms cubic-bezier(0.18, 0.78, 0.22, 1),
        opacity 260ms ease,
        transform 420ms cubic-bezier(0.18, 0.78, 0.22, 1),
        filter 260ms ease,
        padding-top 260ms ease,
        margin-top 260ms ease,
        border-color 260ms ease;
}

.package-modal-editor-cta.is-visible {
    max-height: 160px;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    padding-top: 14px;
    margin-top: 2px;
    border-top-color: rgba(180, 223, 237, 0.12);
}

.package-modal-editor-cta-button {
    justify-self: start;
}

.package-modal-editor-cta-note {
    margin: 0;
    color: rgba(192, 229, 240, 0.68);
    font-size: 0.78rem;
    line-height: 1.68;
}

.package-modal-grid {
    position: relative;
}

.package-modal-grid.is-guided-focus {
    animation: packageModalConfirmAreaGlow 920ms cubic-bezier(0.18, 0.78, 0.22, 1);
}

.package-modal-summary-block {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 18px 18px 16px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(149, 208, 229, 0.08), rgba(22, 78, 104, 0.18)),
        rgba(7, 28, 42, 0.28);
    border: 1px solid rgba(180, 223, 237, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(247, 251, 253, 0.07),
        0 12px 24px rgba(3, 15, 24, 0.12);
}

.package-modal-journey-primary,
.package-modal-journey-secondary,
.package-modal-current-copy {
    margin: 0;
}

.package-modal-journey-primary {
    color: rgba(245, 251, 254, 0.98);
    font-size: 0.95rem;
    line-height: 1.64;
}

.package-modal-journey-secondary,
.package-modal-current-copy {
    color: rgba(217, 238, 246, 0.84);
    line-height: 1.74;
}

.package-modal-journey-secondary {
    font-size: 0.84rem;
}

.package-modal-current-copy {
    font-size: 0.9rem;
}

@media (min-width: 901px) {
    .package-modal-signal {
        position: relative;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
        gap: 18px;
        padding: 16px;
        border-radius: 30px;
        background:
            radial-gradient(circle at 12% 18%, rgba(144, 216, 238, 0.14), transparent 46%),
            radial-gradient(circle at 84% 68%, rgba(113, 183, 212, 0.12), transparent 52%),
            linear-gradient(158deg, rgba(13, 47, 69, 0.54), rgba(7, 30, 45, 0.4) 60%, rgba(7, 30, 45, 0.32) 100%);
        border: 1px solid rgba(172, 219, 235, 0.16);
        box-shadow:
            inset 0 1px 0 rgba(248, 251, 253, 0.08),
            0 22px 42px rgba(4, 18, 30, 0.16);
        overflow: hidden;
        isolation: isolate;
    }

    .package-modal-signal::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(108deg, rgba(193, 232, 243, 0.12) 0%, rgba(193, 232, 243, 0) 44%),
            linear-gradient(180deg, rgba(172, 219, 235, 0.08), rgba(172, 219, 235, 0));
        pointer-events: none;
    }

    .package-modal-price {
        position: relative;
        z-index: 1;
        gap: 14px;
        padding: 20px 20px 18px;
        border-radius: 26px;
        background:
            radial-gradient(circle at 14% 10%, rgba(177, 230, 244, 0.18), transparent 40%),
            linear-gradient(180deg, rgba(184, 227, 239, 0.14), rgba(34, 94, 122, 0.18)),
            rgba(5, 25, 38, 0.46);
        border: 1px solid rgba(183, 223, 236, 0.2);
        box-shadow:
            inset 0 1px 0 rgba(248, 251, 253, 0.1),
            0 14px 28px rgba(5, 19, 30, 0.18);
        transition:
            border-color 360ms ease,
            box-shadow 360ms ease,
            background-color 360ms ease;
    }

    .package-modal-price:focus-within {
        border-color: rgba(191, 229, 242, 0.34);
        box-shadow:
            inset 0 1px 0 rgba(248, 251, 253, 0.14),
            0 18px 32px rgba(4, 18, 30, 0.2),
            0 0 0 1px rgba(168, 215, 232, 0.1);
    }

    .package-modal-price-editor {
        position: relative;
        margin-top: 2px;
        padding-top: 0;
        padding-right: 2px;
        padding-left: 2px;
        border-top: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translate3d(0, -10px, 0) scale(0.985);
        transform-origin: top center;
        transition:
            max-height 580ms cubic-bezier(0.17, 0.77, 0.22, 1),
            opacity 320ms ease,
            transform 520ms cubic-bezier(0.17, 0.77, 0.22, 1),
            padding-top 320ms ease;
    }

    .package-modal-price-editor.is-open {
        max-height: 940px;
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        padding-top: 14px;
    }

    .package-modal-price-editor.is-open::before {
        content: "";
        position: absolute;
        top: 0;
        left: 4px;
        right: 4px;
        border-top: 1px solid rgba(183, 223, 236, 0.18);
        box-shadow: 0 1px 0 rgba(247, 251, 253, 0.06);
        pointer-events: none;
    }

    .package-modal-price-editor .package-modal-option-group {
        position: relative;
        gap: 10px;
        padding: 14px 14px 12px;
        border-radius: 18px;
        background:
            linear-gradient(180deg, rgba(226, 245, 252, 0.08), rgba(121, 185, 212, 0.04)),
            rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(175, 218, 234, 0.14);
        box-shadow:
            inset 0 1px 0 rgba(247, 251, 253, 0.08),
            0 10px 20px rgba(4, 18, 30, 0.12);
        opacity: 0;
        transform: translate3d(0, 14px, 0);
        filter: blur(3px);
        transition:
            opacity 340ms ease,
            transform 420ms cubic-bezier(0.18, 0.78, 0.22, 1),
            filter 360ms ease;
    }

    .package-modal-price-editor.is-open .package-modal-option-group {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }

    .package-modal-price-editor.is-open .package-modal-option-group:nth-child(1) {
        transition-delay: 80ms;
    }

    .package-modal-price-editor.is-open .package-modal-option-group:nth-child(2) {
        transition-delay: 150ms;
    }

    .package-modal-price-editor.is-open .package-modal-option-group:nth-child(3) {
        transition-delay: 220ms;
    }

    .package-modal-price-editor .package-modal-option-list {
        gap: 10px;
    }

    .package-modal-price-editor .package-modal-option {
        opacity: 0;
        transform: translate3d(0, 9px, 0);
        transition:
            opacity 260ms ease,
            transform 320ms cubic-bezier(0.18, 0.78, 0.22, 1),
            border-color 260ms ease,
            background-color 260ms ease,
            color 260ms ease,
            box-shadow 260ms ease;
    }

    .package-modal-price-editor.is-open .package-modal-option {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .package-modal-price-editor.is-open .package-modal-option:nth-child(1) {
        transition-delay: 130ms;
    }

    .package-modal-price-editor.is-open .package-modal-option:nth-child(2) {
        transition-delay: 160ms;
    }

    .package-modal-price-editor.is-open .package-modal-option:nth-child(3) {
        transition-delay: 190ms;
    }

    .package-modal-price-editor.is-open .package-modal-option:nth-child(4) {
        transition-delay: 220ms;
    }

    .package-modal-price-editor.is-open .package-modal-option:nth-child(5) {
        transition-delay: 250ms;
    }

    .package-modal-price-editor.is-open .package-modal-option:nth-child(6) {
        transition-delay: 280ms;
    }

    .package-modal-price-editor .package-modal-custom-duration,
    .package-modal-price-editor .package-modal-price-support {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
        transition:
            opacity 280ms ease,
            transform 360ms cubic-bezier(0.18, 0.78, 0.22, 1);
    }

    .package-modal-price-editor.is-open .package-modal-custom-duration,
    .package-modal-price-editor.is-open .package-modal-price-support {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .package-modal-price-editor.is-open .package-modal-custom-duration {
        transition-delay: 250ms;
    }

    .package-modal-price-editor.is-open .package-modal-price-support {
        transition-delay: 290ms;
    }

    .package-modal-signal > .package-modal-summary-block.package-modal-journey {
        position: relative;
        z-index: 1;
        align-self: start;
        display: grid;
        grid-template-rows: auto auto;
        align-content: start;
        gap: 14px;
        min-height: auto;
        padding: 20px 20px 18px;
        border-radius: 24px;
        background:
            radial-gradient(circle at 72% 8%, rgba(182, 227, 241, 0.14), transparent 50%),
            linear-gradient(180deg, rgba(149, 208, 229, 0.11), rgba(22, 78, 104, 0.24)),
            rgba(7, 28, 42, 0.4);
        border: 1px solid rgba(180, 223, 237, 0.16);
        box-shadow:
            inset 0 1px 0 rgba(247, 251, 253, 0.08),
            0 14px 24px rgba(3, 15, 24, 0.14);
        overflow: hidden;
    }

    .package-modal-signal > .package-modal-summary-block.package-modal-journey::before {
        content: "";
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 16px;
        height: 36%;
        background:
            linear-gradient(180deg, rgba(194, 232, 243, 0.08), rgba(194, 232, 243, 0)),
            radial-gradient(circle at 50% 100%, rgba(125, 190, 216, 0.14), transparent 70%);
        border-radius: 16px;
        pointer-events: none;
    }

    .package-modal-signal .package-modal-journey-primary,
    .package-modal-signal .package-modal-journey-secondary {
        position: relative;
        z-index: 1;
        max-width: 28ch;
    }

    .package-modal-price.is-editor-open {
        border-color: rgba(197, 232, 243, 0.28);
        box-shadow:
            inset 0 1px 0 rgba(248, 251, 253, 0.14),
            0 20px 34px rgba(5, 19, 30, 0.22),
            0 0 0 1px rgba(151, 209, 230, 0.08);
    }

    .package-modal-price-layout {
        display: block;
    }

    .package-modal-price-main {
        display: grid;
        gap: 14px;
        min-width: 0;
    }

    .package-modal-price-core {
        gap: 12px;
    }

    .package-modal-price-note {
        max-width: 32ch;
    }

    .package-modal-price-toggle {
        width: auto;
        min-width: 188px;
        justify-self: start;
        padding-inline: 18px;
    }

    .package-modal-price-editor-track {
        display: grid;
        gap: 12px;
    }

    .package-modal-price-summary {
        display: none;
    }

    .package-modal-price-summary::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(180deg, rgba(193, 232, 243, 0.08), rgba(193, 232, 243, 0) 36%),
            radial-gradient(circle at 50% 100%, rgba(120, 188, 215, 0.12), transparent 62%);
        pointer-events: none;
    }

    .package-modal-price-summary-kicker,
    .package-modal-price-summary-note,
    .package-modal-price-summary-list {
        position: relative;
        z-index: 1;
    }

    .package-modal-price-summary-kicker {
        margin: 0;
        font-size: 0.68rem;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: rgba(192, 229, 240, 0.64);
    }

    .package-modal-price-summary-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 10px;
    }

    .package-modal-price-summary-item {
        display: grid;
        gap: 5px;
        padding: 12px 13px;
        border-radius: 16px;
        background:
            linear-gradient(180deg, rgba(232, 247, 252, 0.08), rgba(112, 180, 209, 0.05)),
            rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(176, 219, 234, 0.12);
        box-shadow: inset 0 1px 0 rgba(248, 251, 253, 0.07);
    }

    .package-modal-price-summary-item.is-shifted,
    .package-modal-price-summary-item[data-summary-tone="shifted"] {
        border-color: rgba(191, 229, 242, 0.22);
        background:
            linear-gradient(180deg, rgba(238, 249, 253, 0.12), rgba(118, 185, 213, 0.08)),
            rgba(255, 255, 255, 0.03);
    }

    .package-modal-price-summary-item.is-filled,
    .package-modal-price-summary-item[data-summary-tone="filled"] {
        border-color: rgba(183, 223, 236, 0.2);
        box-shadow:
            inset 0 1px 0 rgba(248, 251, 253, 0.09),
            0 8px 18px rgba(5, 19, 29, 0.1);
    }

    .package-modal-price-summary-item.is-empty,
    .package-modal-price-summary-item[data-summary-tone="empty"] {
        opacity: 0.82;
    }

    .package-modal-price-summary-label {
        font-size: 0.64rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(188, 225, 238, 0.58);
    }

    .package-modal-price-summary-value {
        color: rgba(244, 250, 253, 0.96);
        font-size: 0.96rem;
        line-height: 1.4;
    }

    .package-modal-price-summary-note {
        margin: 0;
        color: rgba(214, 236, 246, 0.8);
        font-size: 0.82rem;
        line-height: 1.72;
    }

    .package-modal-price.is-opening {
        animation: packageModalPriceBloom 820ms cubic-bezier(0.16, 0.84, 0.22, 1) both;
    }

    .package-modal-price.is-opening .package-modal-price-core {
        animation: packageModalPriceCoreRise 620ms cubic-bezier(0.16, 0.84, 0.22, 1) both;
    }

    .package-modal-price.is-opening .package-modal-price-summary {
        animation: packageModalPriceSummaryLift 700ms cubic-bezier(0.16, 0.84, 0.22, 1) 80ms both;
    }

    .package-modal-price.is-opening .package-modal-editor-layer.is-open {
        animation: packageModalEditorShellOpen 620ms cubic-bezier(0.16, 0.84, 0.22, 1) 60ms both;
    }

    .package-modal-price.is-opening .package-modal-editor-fragment,
    .package-modal-price.is-opening .package-modal-editor-subfragment,
    .package-modal-price.is-opening .package-modal-price-summary-item,
    .package-modal-price.is-opening .package-modal-price-summary-kicker,
    .package-modal-price.is-opening .package-modal-price-summary-note {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
        filter: blur(4px);
        animation: packageModalEditorFragmentIn 520ms cubic-bezier(0.18, 0.8, 0.22, 1) both;
    }

    .package-modal-price.is-opening .package-modal-editor-fragment {
        animation-delay: calc(140ms + (var(--package-modal-editor-order, 0) * 80ms));
    }

    .package-modal-price.is-opening .package-modal-editor-subfragment {
        animation-delay: 300ms;
    }

    .package-modal-price.is-opening .package-modal-price-summary-kicker {
        animation-delay: 180ms;
    }

    .package-modal-price.is-opening .package-modal-price-summary-item:nth-child(1) {
        animation-delay: 220ms;
    }

    .package-modal-price.is-opening .package-modal-price-summary-item:nth-child(2) {
        animation-delay: 280ms;
    }

    .package-modal-price.is-opening .package-modal-price-summary-item:nth-child(3) {
        animation-delay: 340ms;
    }

    .package-modal-price.is-opening .package-modal-price-summary-note {
        animation-delay: 380ms;
    }
}

@keyframes packageModalPriceBloom {
    0% {
        border-color: rgba(183, 223, 236, 0.2);
        box-shadow:
            inset 0 1px 0 rgba(248, 251, 253, 0.1),
            0 12px 24px rgba(5, 19, 30, 0.16);
    }

    55% {
        border-color: rgba(200, 234, 244, 0.32);
        box-shadow:
            inset 0 1px 0 rgba(248, 251, 253, 0.16),
            0 24px 38px rgba(5, 19, 30, 0.22),
            0 0 0 1px rgba(166, 217, 233, 0.1);
    }

    100% {
        border-color: rgba(197, 232, 243, 0.28);
        box-shadow:
            inset 0 1px 0 rgba(248, 251, 253, 0.14),
            0 20px 34px rgba(5, 19, 30, 0.22),
            0 0 0 1px rgba(151, 209, 230, 0.08);
    }
}

@keyframes packageModalPriceCoreRise {
    0% {
        opacity: 0.32;
        transform: translate3d(0, 16px, 0) scale(0.988);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes packageModalPriceSummaryLift {
    0% {
        opacity: 0;
        transform: translate3d(18px, 18px, 0) scale(0.97);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes packageModalEditorShellOpen {
    0% {
        opacity: 0;
        transform: translate3d(0, -16px, 0) scale(0.985);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes packageModalEditorFragmentIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

/* Detail modal signal v2.6 patch:
   1) The signal area follows the current dual-cabin DOM instead of the old hidden-summary layout.
   2) Slip blocks use real meta/text rows, not overlay pseudo headings.
   3) The price toggle animates with real labels and a tide rail tied to JS state. */
.package-modal-signal {
    grid-template-columns: 1fr;
    gap: 12px;
}

.package-modal-price-layout,
.package-modal-price-main,
.package-modal-signal-aside {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.package-modal-price {
    align-content: start;
}

.package-modal-price-layout {
    align-content: start;
}

.package-modal-price-main {
    align-content: start;
}

.package-modal-price-core {
    align-items: start;
}

.package-modal-price-copy {
    gap: 6px;
}

.package-modal-price-mini-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.package-modal-price-mini-chip {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    gap: 3px;
    min-width: 0;
    min-height: 46px;
    padding: 6px 9px 7px;
    border-radius: 12px;
    border: 1px solid rgba(180, 223, 237, 0.12);
    background:
        linear-gradient(180deg, rgba(240, 249, 252, 0.08), rgba(112, 181, 208, 0.05)),
        rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 1px 0 rgba(248, 251, 253, 0.05);
    text-align: left;
    cursor: pointer;
    transition:
        transform 260ms ease,
        border-color 260ms ease,
        background-color 260ms ease,
        box-shadow 260ms ease;
}

.package-modal-price-mini-chip:hover,
.package-modal-price-mini-chip:focus-visible {
    transform: translate3d(0, -0.5px, 0);
    border-color: rgba(190, 229, 242, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(248, 251, 253, 0.08),
        0 6px 12px rgba(5, 19, 29, 0.1);
}

.package-modal-price-mini-label {
    font-size: 0.54rem;
    line-height: 1.12;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(187, 224, 236, 0.58);
}

.package-modal-price .package-modal-price-mini-value {
    min-width: 0;
    color: rgba(244, 250, 253, 0.96);
    font-size: 0.76rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.package-modal-price-mini-chip.is-shifted,
.package-modal-price-mini-chip[data-summary-tone="shifted"],
.package-modal-price-mini-chip.is-set,
.package-modal-price-mini-chip[data-summary-tone="set"],
.package-modal-price-mini-chip.is-custom,
.package-modal-price-mini-chip[data-summary-tone="custom"] {
    border-color: rgba(188, 228, 241, 0.2);
    background:
        linear-gradient(180deg, rgba(240, 249, 252, 0.12), rgba(118, 186, 213, 0.07)),
        rgba(255, 255, 255, 0.04);
}

.package-modal-price-mini-chip.is-empty,
.package-modal-price-mini-chip[data-summary-tone="empty"] {
    opacity: 0.88;
}

.package-modal-price-summary {
    position: relative;
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 14px 14px 12px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 72% 8%, rgba(182, 227, 241, 0.14), transparent 50%),
        linear-gradient(180deg, rgba(149, 208, 229, 0.11), rgba(22, 78, 104, 0.24)),
        rgba(7, 28, 42, 0.4);
    border: 1px solid rgba(180, 223, 237, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(247, 251, 253, 0.07),
        0 10px 18px rgba(3, 15, 24, 0.12);
    overflow: hidden;
}

.package-modal-price-summary::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(193, 232, 243, 0.08), rgba(193, 232, 243, 0) 36%),
        radial-gradient(circle at 50% 100%, rgba(120, 188, 215, 0.12), transparent 62%);
    pointer-events: none;
}

.package-modal-price-summary-kicker,
.package-modal-price-summary-note,
.package-modal-price-summary-list {
    position: relative;
    z-index: 1;
}

.package-modal-price-summary-kicker {
    margin: 0;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(192, 229, 240, 0.64);
}

.package-modal-price-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.package-modal-price-summary-item {
    display: grid;
    gap: 4px;
    padding: 9px 10px;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(232, 247, 252, 0.08), rgba(112, 180, 209, 0.05)),
        rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(176, 219, 234, 0.12);
    box-shadow: inset 0 1px 0 rgba(248, 251, 253, 0.06);
}

.package-modal-price-summary-item.is-shifted,
.package-modal-price-summary-item[data-summary-tone="shifted"] {
    border-color: rgba(191, 229, 242, 0.22);
    background:
        linear-gradient(180deg, rgba(238, 249, 253, 0.12), rgba(118, 185, 213, 0.08)),
        rgba(255, 255, 255, 0.03);
}

.package-modal-price-summary-item.is-set,
.package-modal-price-summary-item[data-summary-tone="set"],
.package-modal-price-summary-item.is-custom,
.package-modal-price-summary-item[data-summary-tone="custom"] {
    border-color: rgba(183, 223, 236, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(248, 251, 253, 0.09),
        0 8px 18px rgba(5, 19, 29, 0.1);
}

.package-modal-price-summary-item.is-empty,
.package-modal-price-summary-item[data-summary-tone="empty"] {
    opacity: 0.86;
}

.package-modal-price-summary-label {
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(188, 225, 238, 0.58);
}

.package-modal-price-summary-value {
    color: rgba(244, 250, 253, 0.96);
    font-size: 0.86rem;
    line-height: 1.32;
}

.package-modal-price-summary-note {
    margin: 0;
    color: rgba(214, 236, 246, 0.8);
    font-size: 0.75rem;
    line-height: 1.58;
}

.package-modal-route-echo {
    gap: 10px;
}

.package-modal-route-echo-label,
.package-modal-journey-label {
    opacity: 0.94;
}

.package-modal-route-echo-route {
    margin: 0;
    color: rgba(245, 251, 254, 0.98);
    font-size: 0.9rem;
    line-height: 1.36;
}

.package-modal-route-echo-note {
    margin: 0;
    color: rgba(214, 236, 246, 0.78);
    font-size: 0.74rem;
    line-height: 1.56;
}

.package-modal-route-echo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.package-modal-route-echo-chip {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 7px 9px;
    border-radius: 11px;
    border: 1px solid rgba(176, 219, 234, 0.12);
    background:
        linear-gradient(180deg, rgba(232, 247, 252, 0.08), rgba(112, 180, 209, 0.05)),
        rgba(255, 255, 255, 0.02);
}

.package-modal-route-echo-chip.is-shifted,
.package-modal-route-echo-chip[data-summary-tone="shifted"],
.package-modal-route-echo-chip.is-set,
.package-modal-route-echo-chip[data-summary-tone="set"],
.package-modal-route-echo-chip.is-custom,
.package-modal-route-echo-chip[data-summary-tone="custom"] {
    border-color: rgba(188, 228, 241, 0.2);
}

.package-modal-route-echo-chip.is-empty,
.package-modal-route-echo-chip[data-summary-tone="empty"] {
    opacity: 0.86;
}

.package-modal-route-echo-chip-label {
    font-size: 0.53rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(188, 225, 238, 0.56);
}

.package-modal-route-echo-chip-value {
    color: rgba(244, 250, 253, 0.96);
    font-size: 0.73rem;
    line-height: 1.28;
}

.package-modal-price-summary-footnote::after,
.package-modal-route-echo-tail::after,
.package-modal-journey-secondary::after {
    content: none !important;
}

.package-modal-price-summary-footnote,
.package-modal-route-echo-tail,
.package-modal-journey-secondary {
    position: relative;
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 9px 10px 10px 11px;
    border-radius: 13px;
    background:
        linear-gradient(126deg, rgba(206, 240, 250, 0.11), rgba(206, 240, 250, 0) 48%),
        linear-gradient(180deg, rgba(179, 223, 237, 0.08), rgba(22, 77, 103, 0.14)),
        rgba(5, 24, 37, 0.32);
    border: 1px solid rgba(177, 221, 236, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(248, 251, 253, 0.07),
        0 6px 12px rgba(3, 15, 24, 0.1);
}

.package-modal-price-summary-footnote .package-modal-slip-meta,
.package-modal-route-echo-tail .package-modal-slip-meta,
.package-modal-journey-secondary .package-modal-slip-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    min-height: 17px;
    margin: 0;
    padding: 3px 7px 2px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(229, 246, 252, 0.12), rgba(126, 192, 218, 0.06)),
        rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(181, 223, 237, 0.16);
    color: rgba(192, 226, 238, 0.72);
    font-size: 0.5rem;
    line-height: 1;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
}

.package-modal-price-summary-footnote .package-modal-slip-text,
.package-modal-route-echo-tail .package-modal-slip-text,
.package-modal-journey-secondary .package-modal-slip-text {
    display: block;
    min-width: 0;
    margin: 0;
    color: rgba(205, 232, 242, 0.84);
    font-size: 0.66rem;
    line-height: 1.5;
    letter-spacing: 0.008em;
}

.package-modal-price-summary-footnote {
    z-index: 1;
}

.package-modal-route-echo-tail,
.package-modal-journey-secondary {
    justify-self: stretch;
}

.package-modal-signal-aside .package-modal-summary-block {
    gap: 7px;
    padding: 14px 14px 12px;
    border-radius: 18px;
}

.package-modal-signal-aside .package-modal-journey-primary {
    font-size: 0.88rem;
    line-height: 1.54;
}

.package-modal-signal-aside .package-modal-journey-secondary {
    font-size: 0.74rem;
    line-height: 1.52;
}

.package-modal-price .package-modal-price-toggle {
    position: relative;
    overflow: hidden;
    font-size: 0;
    line-height: 1;
    color: transparent;
    --package-toggle-rail-progress: 0.18;
    background:
        radial-gradient(circle at 14% 10%, rgba(214, 243, 252, 0.14), rgba(214, 243, 252, 0) 34%),
        linear-gradient(180deg, rgba(233, 247, 252, 0.12), rgba(124, 188, 214, 0.06)),
        rgba(255, 255, 255, 0.03);
}

.package-modal-price .package-modal-price-toggle-shell {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 20px;
    padding: 1px 18px 8px;
}

.package-modal-price .package-modal-price-toggle-label {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    display: block;
    font-size: 0.79rem;
    line-height: 1.12;
    letter-spacing: 0.08em;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

.package-modal-price .package-modal-price-toggle-label[data-package-price-toggle-label="closed"] {
    color: rgba(237, 248, 252, 0.94);
}

.package-modal-price .package-modal-price-toggle-label[data-package-price-toggle-label="open"] {
    color: rgba(201, 231, 241, 0.8);
}

.package-modal-price .package-modal-price-toggle-rail {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 1px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(171, 217, 233, 0.26), rgba(171, 217, 233, 0.06));
    overflow: hidden;
}

.package-modal-price .package-modal-price-toggle-rail::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(199, 236, 248, 0.92), rgba(144, 205, 227, 0.82));
    transform-origin: left center;
    transform: scaleX(var(--package-toggle-rail-progress));
    opacity: 0.82;
    transition:
        transform 360ms cubic-bezier(0.2, 0.74, 0.22, 1),
        opacity 260ms ease;
}

.package-modal-price .package-modal-price-toggle[data-package-price-toggle-state="closed"] {
    --package-toggle-rail-progress: 0.18;
}

.package-modal-price .package-modal-price-toggle[data-package-price-toggle-state="open"],
.package-modal-price .package-modal-price-toggle[data-package-price-toggle-state="opening"] {
    --package-toggle-rail-progress: 1;
    border-color: rgba(190, 229, 242, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(248, 251, 253, 0.12),
        0 8px 16px rgba(4, 17, 27, 0.12),
        0 0 0 1px rgba(161, 214, 232, 0.08);
}

.package-modal-price .package-modal-price-toggle[data-package-price-toggle-state="closed"] .package-modal-price-toggle-label[data-package-price-toggle-label="closed"],
.package-modal-price .package-modal-price-toggle[data-package-price-toggle-state="closing"] .package-modal-price-toggle-label[data-package-price-toggle-label="closed"] {
    opacity: 1;
    transform: translate3d(0, -50%, 0);
    filter: blur(0);
}

.package-modal-price .package-modal-price-toggle[data-package-price-toggle-state="closed"] .package-modal-price-toggle-label[data-package-price-toggle-label="open"],
.package-modal-price .package-modal-price-toggle[data-package-price-toggle-state="closing"] .package-modal-price-toggle-label[data-package-price-toggle-label="open"] {
    opacity: 0;
    transform: translate3d(0, calc(-50% + 8px), 0);
    filter: blur(1.6px);
}

.package-modal-price .package-modal-price-toggle[data-package-price-toggle-state="open"] .package-modal-price-toggle-label[data-package-price-toggle-label="closed"],
.package-modal-price .package-modal-price-toggle[data-package-price-toggle-state="opening"] .package-modal-price-toggle-label[data-package-price-toggle-label="closed"] {
    opacity: 0;
    transform: translate3d(0, calc(-50% - 8px), 0);
    filter: blur(1.6px);
}

.package-modal-price .package-modal-price-toggle[data-package-price-toggle-state="open"] .package-modal-price-toggle-label[data-package-price-toggle-label="open"],
.package-modal-price .package-modal-price-toggle[data-package-price-toggle-state="opening"] .package-modal-price-toggle-label[data-package-price-toggle-label="open"] {
    opacity: 1;
    transform: translate3d(0, -50%, 0);
    filter: blur(0);
}

.package-modal-price .package-modal-price-toggle[data-package-price-toggle-state="opening"] .package-modal-price-toggle-label[data-package-price-toggle-label="closed"] {
    animation: packageModalToggleLabelOutV26 300ms cubic-bezier(0.24, 0.68, 0.22, 1) both;
}

.package-modal-price .package-modal-price-toggle[data-package-price-toggle-state="opening"] .package-modal-price-toggle-label[data-package-price-toggle-label="open"] {
    animation: packageModalToggleLabelInV26 380ms cubic-bezier(0.18, 0.8, 0.22, 1) both;
}

.package-modal-price .package-modal-price-toggle[data-package-price-toggle-state="opening"] .package-modal-price-toggle-rail::before {
    animation: packageModalToggleRailSweepV26 420ms cubic-bezier(0.18, 0.8, 0.22, 1) both;
}

.package-modal-price .package-modal-price-toggle[data-package-price-toggle-state="closing"] {
    --package-toggle-rail-progress: 0.18;
}

.package-modal-price .package-modal-price-toggle[data-package-price-toggle-state="closing"] .package-modal-price-toggle-label[data-package-price-toggle-label="closed"] {
    animation: packageModalToggleLabelInV26 340ms cubic-bezier(0.2, 0.74, 0.22, 1) both;
}

.package-modal-price .package-modal-price-toggle[data-package-price-toggle-state="closing"] .package-modal-price-toggle-label[data-package-price-toggle-label="open"] {
    animation: packageModalToggleLabelOutV26 280ms cubic-bezier(0.24, 0.68, 0.22, 1) both;
}

.package-modal-price .package-modal-price-toggle[data-package-price-toggle-state="closing"] .package-modal-price-toggle-rail::before {
    animation: packageModalToggleRailRetractV26 320ms cubic-bezier(0.22, 0.76, 0.2, 1) both;
}

.package-modal-price .package-modal-price-toggle:hover,
.package-modal-price .package-modal-price-toggle:focus-visible {
    transform: none;
}

@keyframes packageModalToggleLabelInV26 {
    0% {
        opacity: 0.28;
        transform: translate3d(0, calc(-50% + 8px), 0);
        filter: blur(1.6px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, -50%, 0);
        filter: blur(0);
    }
}

@keyframes packageModalConfirmAreaGlow {
    0% {
        box-shadow: 0 0 0 rgba(118, 186, 213, 0);
        transform: translate3d(0, 14px, 0);
    }

    38% {
        box-shadow:
            0 0 0 1px rgba(188, 228, 241, 0.18),
            0 18px 42px rgba(31, 92, 121, 0.18);
        transform: translate3d(0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 rgba(118, 186, 213, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes packageModalToggleLabelOutV26 {
    0% {
        opacity: 0.88;
        transform: translate3d(0, -50%, 0);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, calc(-50% - 8px), 0);
        filter: blur(1.8px);
    }
}

@keyframes packageModalToggleRailSweepV26 {
    0% {
        transform: scaleX(0.22);
        opacity: 0.48;
    }

    58% {
        transform: scaleX(1.06);
        opacity: 0.92;
    }

    100% {
        transform: scaleX(1);
        opacity: 0.82;
    }
}

@keyframes packageModalToggleRailRetractV26 {
    0% {
        transform: scaleX(1);
        opacity: 0.82;
    }

    100% {
        transform: scaleX(0.18);
        opacity: 0.64;
    }
}

@media (min-width: 901px) {
    .package-modal-signal {
        grid-template-columns: minmax(0, 1.16fr) minmax(252px, 312px);
        gap: 16px;
    }

    .package-modal-signal[data-package-signal-state="compact"] {
        grid-template-areas:
            "price summary"
            "route journey";
        align-items: start;
        row-gap: 10px;
    }

    .package-modal-price-layout {
        display: block;
    }

    .package-modal-signal[data-package-signal-state="compact"] > .package-modal-price {
        grid-area: price;
        align-self: start;
    }

    .package-modal-signal[data-package-signal-state="compact"] > .package-modal-price.is-editor-closed {
        min-height: clamp(214px, 20.4vw, 238px);
        padding-bottom: 16px;
    }

    .package-modal-signal[data-package-signal-state="compact"] > .package-modal-price.is-editor-closed .package-modal-price-main {
        min-height: 100%;
        align-content: space-between;
    }

    .package-modal-price-core {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
    }

    .package-modal-price-toggle {
        width: auto;
        min-width: 168px;
        justify-self: start;
    }

    .package-modal-signal-aside {
        align-content: start;
        gap: 10px;
    }

    .package-modal-signal[data-package-signal-state="compact"] > .package-modal-signal-aside {
        display: contents;
    }

    .package-modal-signal[data-package-signal-state="compact"] > .package-modal-signal-aside > .package-modal-price-summary {
        grid-area: summary;
    }

    .package-modal-signal[data-package-signal-state="compact"] > .package-modal-signal-aside > .package-modal-route-echo {
        grid-area: route;
        align-self: start;
        min-height: clamp(232px, 21.2vw, 258px);
        margin-top: clamp(-96px, -6.2vw, -82px);
        align-content: space-between;
    }

    .package-modal-signal[data-package-signal-state="compact"] > .package-modal-signal-aside > .package-modal-journey {
        grid-area: journey;
        align-self: start;
    }

    .package-modal-price:not(.is-editor-open) {
        padding-bottom: 12px;
    }

    .package-modal-signal .package-modal-journey-primary,
    .package-modal-signal .package-modal-journey-secondary {
        max-width: none;
    }

    .package-modal-journey-secondary .package-modal-slip-text {
        white-space: nowrap;
        max-width: none;
    }
}

/* 控制 .package-modal-body 的布局、视觉和状态表现 */
.package-modal-body {
    overflow: visible;
    padding-right: 0;
    display: grid;
    gap: 14px;
}

/* 控制 .package-modal-grid 的布局、视觉和状态表现 */
.package-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 14px;
}

/* 控制 .package-modal-section 的布局、视觉和状态表现 */
.package-modal-section {
    padding: 16px 18px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(149, 208, 229, 0.12), rgba(22, 78, 104, 0.24)),
        rgba(7, 28, 42, 0.26);
    border: 1px solid rgba(180, 223, 237, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(247, 251, 253, 0.08),
        0 12px 24px rgba(3, 15, 24, 0.14);
}

/* 控制 .package-modal-section h3 的布局、视觉和状态表现 */
.package-modal-section h3 {
    margin: 0 0 12px;
    font-size: 1rem;
    color: rgba(245, 251, 254, 0.94);
}

/* 控制 .package-modal-section p, 的布局、视觉和状态表现 */
.package-modal-section p,
.package-modal-section li {
    color: rgba(217, 238, 246, 0.84);
    line-height: 1.72;
}

/* 控制 .package-modal-section ul 的布局、视觉和状态表现 */
.package-modal-section ul {
    margin-left: 18px;
}

/* 控制 .package-modal-section li 的布局、视觉和状态表现 */
.package-modal-section li {
    margin-bottom: 8px;
}

/* 控制 .package-modal-schedule 的布局、视觉和状态表现 */
.package-modal-schedule {
    display: grid;
    gap: 10px;
}

/* 控制 .package-modal-day 的布局、视觉和状态表现 */
.package-modal-day {
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(10, 41, 60, 0.54);
    border: 1px solid rgba(173, 210, 228, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 22px rgba(3, 15, 24, 0.14);
}

/* 控制 .package-modal-day strong 的布局、视觉和状态表现 */
.package-modal-day strong {
    display: block;
    margin-bottom: 6px;
    color: rgba(245, 251, 254, 0.92);
    font-size: 0.98rem;
}

/* 控制 .package-modal-day span 的布局、视觉和状态表现 */
.package-modal-day span {
    color: rgba(217, 238, 246, 0.8);
    line-height: 1.78;
}

/* 控制 .package-modal-actions 的布局、视觉和状态表现 */
.package-modal-actions {
    position: relative;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 4px;
}

.package-modal-actions.is-guided-focus {
    animation: packageModalConfirmAreaGlow 920ms cubic-bezier(0.18, 0.78, 0.22, 1);
}

/* 控制 .package-modal-secondary, 的布局、视觉和状态表现 */
.package-modal-secondary,
.package-modal-primary {
    all: unset;
    cursor: pointer;
    padding: 11px 18px;
    border-radius: 999px;
    font-weight: 600;
    transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

/* 控制 .package-modal-secondary 的布局、视觉和状态表现 */
.package-modal-secondary {
    background: rgba(244, 250, 253, 0.08);
    border: 1px solid rgba(180, 223, 237, 0.2);
    color: rgba(228, 244, 249, 0.84);
}

/* 控制 .package-modal-primary 的布局、视觉和状态表现 */
.package-modal-primary {
    background:
        linear-gradient(180deg, rgba(184, 227, 239, 0.16), rgba(86, 150, 181, 0.14)),
        rgba(255, 255, 255, 0.05);
    color: #f6fbff;
    border: 1px solid rgba(151, 214, 236, 0.32);
    box-shadow: 0 14px 24px rgba(6, 23, 36, 0.18);
}

/* .package-modal-secondary:hover, 鼠标移入时的样式 */
.package-modal-secondary:hover,
.package-modal-primary:hover {
    transform: translateY(-2px);
}

/* 控制 .review-detail-modal 的布局、视觉和状态表现 */
.review-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: grid;
    justify-items: center;
    align-items: start;
    padding: 24px;
    background: rgba(3, 14, 24, 0.46);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 340ms ease, visibility 0s linear 340ms;
}

/* .review-detail-modal.active 在对应状态下的样式 */
.review-detail-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 340ms ease;
}

/* 控制 .review-detail-modal.is-closing 的布局、视觉和状态表现 */
.review-detail-modal.is-closing {
    opacity: 0;
    pointer-events: none;
}

/* 控制 .review-detail-panel 的布局、视觉和状态表现 */
.review-detail-panel {
    position: relative;
    width: min(980px, calc(100vw - 40px));
    max-height: 84vh;
    min-height: min(560px, calc(100vh - 72px));
    margin: max(12px, 4vh) 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    border-radius: 32px;
    background:
        radial-gradient(circle at 18% 14%, rgba(110, 180, 214, 0.12), transparent 28%),
        radial-gradient(circle at 80% 10%, rgba(149, 215, 230, 0.1), transparent 24%),
        linear-gradient(155deg, rgba(11, 33, 49, 0.94), rgba(12, 48, 68, 0.92) 46%, rgba(9, 72, 98, 0.9) 100%);
    border: 1px solid rgba(156, 205, 224, 0.2);
    box-shadow:
        0 34px 78px rgba(2, 14, 23, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(158, 214, 232, 0.42) rgba(255, 255, 255, 0.04);
    transform: translate3d(0, 18px, 0) scale(0.984);
    opacity: 0;
    transition: transform 300ms cubic-bezier(0.2, 0.72, 0.2, 1), opacity 280ms ease;
}

.review-detail-panel::-webkit-scrollbar {
    width: 10px;
}

.review-detail-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    margin: 18px 10px 18px 0;
}

.review-detail-panel::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(196, 235, 246, 0.54), rgba(95, 172, 198, 0.34));
    border: 2px solid rgba(10, 34, 49, 0.18);
}

.review-detail-panel::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, rgba(214, 242, 250, 0.64), rgba(111, 189, 215, 0.42));
}

/* .review-detail-modal.active .review-detail-panel 在对应状态下的样式 */
.review-detail-modal.active .review-detail-panel {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
}

/* 控制 .review-detail-modal.is-closing .review-detail-panel 的布局、视觉和状态表现 */
.review-detail-modal.is-closing .review-detail-panel {
    transform: translate3d(0, 12px, 0) scale(0.988);
    opacity: 0;
}

/* 控制 .review-detail-close 的布局、视觉和状态表现 */
.review-detail-close {
    all: unset;
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: rgba(237, 247, 252, 0.88);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(194, 223, 236, 0.18);
    transition: transform 220ms ease, background-color 220ms ease, color 220ms ease;
}

/* .review-detail-close:hover 鼠标移入时的样式 */
.review-detail-close:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.12);
    color: #f7fcff;
}

/* 控制 .review-detail-body 的布局、视觉和状态表现 */
.review-detail-body {
    min-height: 0;
    flex: 1;
    display: block;
    overflow: visible;
}

/* 控制 .review-detail-shell 的布局、视觉和状态表现 */
.review-detail-shell {
    min-height: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}

/* 控制 .review-detail-header 的布局、视觉和状态表现 */
.review-detail-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    padding: 30px 32px 22px;
    border-bottom: 1px solid rgba(194, 223, 236, 0.12);
}

/* 控制 .review-detail-author 的布局、视觉和状态表现 */
.review-detail-author {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

/* 控制 .review-detail-avatar 的布局、视觉和状态表现 */
.review-detail-avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(227, 242, 250, 0.34);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
}

/* 控制 .review-detail-meta 的布局、视觉和状态表现 */
.review-detail-meta {
    min-width: 0;
}

/* 控制 .review-detail-kicker 的布局、视觉和状态表现 */
.review-detail-kicker {
    margin: 0 0 8px;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(202, 226, 238, 0.56);
}

/* 控制 .review-detail-title 的布局、视觉和状态表现 */
.review-detail-title {
    margin: 0;
    font-size: 1.88rem;
    line-height: 1.18;
    color: #f2f9fd;
}

/* 控制 .review-detail-subtitle 的布局、视觉和状态表现 */
.review-detail-subtitle {
    margin: 12px 0 0;
    color: rgba(223, 237, 246, 0.76);
    line-height: 1.74;
}

/* 控制 .review-detail-subline 的布局、视觉和状态表现 */
.review-detail-subline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    color: rgba(220, 235, 244, 0.68);
    font-size: 0.84rem;
}

/* 控制 .review-detail-rating 的布局、视觉和状态表现 */
.review-detail-rating {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
}

.review-detail-rating-label {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(202, 232, 242, 0.16);
    background: rgba(202, 232, 242, 0.07);
    color: rgba(239, 250, 253, 0.9);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
}

/* 控制 .review-detail-rating-stars 的布局、视觉和状态表现 */
.review-detail-rating-stars {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-size: 1rem;
    letter-spacing: 0.12em;
    line-height: 1;
    color: rgba(242, 195, 96, 0.24);
}

.review-detail-rating-stars::after {
    content: '★★★★★';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--rating-fill, 100%);
    overflow: hidden;
    white-space: nowrap;
    color: #f2c360;
    text-shadow: 0 0 12px rgba(242, 195, 96, 0.22);
    pointer-events: none;
}

/* 控制 .review-detail-rating-copy 的布局、视觉和状态表现 */
.review-detail-rating-copy {
    color: rgba(220, 235, 244, 0.62);
    font-size: 0.8rem;
}

/* 控制 .review-detail-scroll 的布局、视觉和状态表现 */
.review-detail-scroll {
    flex: none;
    min-height: auto;
    overflow: visible;
    padding: 24px 32px 30px;
    display: grid;
    gap: 22px;
}

/* 控制 .review-detail-lead 的布局、视觉和状态表现 */
.review-detail-lead {
    display: grid;
    gap: 14px;
    padding: 22px 24px;
    border-radius: 24px;
    background: rgba(236, 247, 253, 0.08);
    border: 1px solid rgba(179, 214, 229, 0.14);
}

/* 控制 .review-detail-summary 的布局、视觉和状态表现 */
.review-detail-summary {
    margin: 0;
    color: rgba(238, 247, 252, 0.9);
    line-height: 1.84;
    font-size: 1rem;
}

/* 控制 .review-detail-note 的布局、视觉和状态表现 */
.review-detail-note {
    margin: 0;
    color: rgba(211, 229, 239, 0.62);
    line-height: 1.8;
    font-size: 0.9rem;
}

/* 控制 .review-detail-gallery 的布局、视觉和状态表现 */
.review-detail-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

/* 控制 .review-detail-photo-button 的布局、视觉和状态表现 */
.review-detail-photo-button {
    all: unset;
    position: relative;
    aspect-ratio: 1 / 0.8;
    border-radius: 22px;
    overflow: hidden;
    cursor: zoom-in;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

/* 控制 .review-detail-photo 的布局、视觉和状态表现 */
.review-detail-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 320ms ease, filter 320ms ease;
}

/* .review-detail-photo-button::before 的底部暗雾，只照顾照片文字可读性 */
.review-detail-photo-button::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    height: 52%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4, 18, 29, 0), rgba(4, 18, 29, 0.18) 48%, rgba(4, 18, 29, 0.46));
    opacity: 0.84;
}

/* .review-detail-photo-button::after 的流光层默认收在照片外，避免形成静态幕布 */
.review-detail-photo-button::after {
    content: "";
    position: absolute;
    top: -18%;
    bottom: -18%;
    left: 0;
    z-index: 2;
    width: 34%;
    pointer-events: none;
    background: linear-gradient(108deg, rgba(255, 255, 255, 0), rgba(229, 248, 255, 0.08) 42%, rgba(255, 255, 255, 0.24) 50%, rgba(182, 230, 243, 0.08) 58%, rgba(255, 255, 255, 0));
    filter: blur(18px);
    mix-blend-mode: screen;
    opacity: 0;
    transform: translate3d(-150%, 0, 0) skewX(-10deg);
    transition:
        opacity 420ms ease,
        transform 820ms cubic-bezier(0.2, 0.78, 0.24, 1);
}

/* .review-detail-photo-button:hover .review-detail-photo 鼠标移入时的样式 */
.review-detail-photo-button:hover .review-detail-photo,
.review-detail-photo-button:focus-visible .review-detail-photo {
    transform: scale(1.05);
    filter: saturate(1.06);
}

/* .review-detail-photo-button:hover::after 的流光层 */
.review-detail-photo-button:hover::after,
.review-detail-photo-button:focus-visible::after {
    opacity: 0.62;
    transform: translate3d(330%, 0, 0) skewX(-10deg);
}

/* 控制 .review-detail-photo-button.is-featured 的布局、视觉和状态表现 */
.review-detail-photo-button.is-featured {
    grid-column: 1 / -1;
    aspect-ratio: 1 / 0.54;
}

/* 控制 .review-detail-photo-caption 的布局、视觉和状态表现 */
.review-detail-photo-caption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 3;
    font-size: 0.78rem;
    color: rgba(245, 250, 255, 0.92);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.34);
}

/* 控制 .review-detail-grid 的布局、视觉和状态表现 */
.review-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* 控制 .review-detail-section 的布局、视觉和状态表现 */
.review-detail-section {
    padding: 18px 20px;
    border-radius: 24px;
    background: rgba(236, 247, 253, 0.08);
    border: 1px solid rgba(179, 214, 229, 0.14);
}

/* 控制 .review-detail-section-title 的布局、视觉和状态表现 */
.review-detail-section-title {
    display: block;
    margin-bottom: 10px;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(191, 220, 232, 0.72);
}

/* 控制 .review-detail-section p 的布局、视觉和状态表现 */
.review-detail-section p {
    margin: 0;
    color: rgba(233, 244, 250, 0.86);
    line-height: 1.82;
}

/* 控制 .review-lightbox 的布局、视觉和状态表现 */
.review-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1650;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 18%, rgba(170, 214, 234, 0.12), rgba(170, 214, 234, 0) 28%),
        rgba(3, 14, 24, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 360ms ease, visibility 0s linear 360ms;
}

/* .review-lightbox.active 在对应状态下的样式 */
.review-lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 360ms ease;
}

/* 控制 .review-lightbox.is-closing 的布局、视觉和状态表现 */
.review-lightbox.is-closing {
    opacity: 0;
    pointer-events: none;
}

/* 控制 .review-lightbox-close 的布局、视觉和状态表现 */
.review-lightbox-close {
    all: unset;
    position: absolute;
    top: 18px;
    right: 24px;
    cursor: pointer;
    color: rgba(245, 251, 255, 0.92);
    font-size: 2rem;
    z-index: 1;
    opacity: 0;
    transform: translate3d(0, -10px, 0);
    transition: opacity 320ms ease, transform 360ms cubic-bezier(0.18, 0.84, 0.22, 1), color 220ms ease;
}

/* .review-lightbox.active .review-lightbox-close 在对应状态下的样式 */
.review-lightbox.active .review-lightbox-close {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 90ms;
}

/* .review-lightbox-close:hover 鼠标移入时的样式 */
.review-lightbox-close:hover {
    color: #ffffff;
    transform: translate3d(0, -2px, 0);
}

/* 控制 .review-lightbox-shell 的布局、视觉和状态表现 */
.review-lightbox-shell {
    max-width: min(960px, calc(100vw - 48px));
    width: min(960px, calc(100vw - 48px));
    display: flex;
    flex-direction: column;
    gap: 14px;
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(0, 18px, 0) scale(0.978);
    transition:
        opacity 300ms ease,
        transform 360ms cubic-bezier(0.18, 0.84, 0.22, 1),
        filter 360ms ease;
}

/* .review-lightbox.active .review-lightbox-shell 在对应状态下的样式 */
.review-lightbox.active .review-lightbox-shell {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

/* 控制 .review-lightbox.is-closing .review-lightbox-shell 的布局、视觉和状态表现 */
.review-lightbox.is-closing .review-lightbox-shell {
    opacity: 0;
    filter: blur(6px);
    transform: translate3d(0, 12px, 0) scale(0.986);
}

/* 控制 .review-lightbox-image 的布局、视觉和状态表现 */
.review-lightbox-image {
    width: 100%;
    max-height: calc(100vh - 140px);
    object-fit: contain;
    border-radius: 24px;
    box-shadow:
        0 28px 62px rgba(0, 0, 0, 0.32),
        0 0 34px rgba(146, 205, 231, 0.08);
    transform: scale(1.012);
    transition: transform 540ms cubic-bezier(0.18, 0.84, 0.22, 1);
}

/* .review-lightbox.active .review-lightbox-image 在对应状态下的样式 */
.review-lightbox.active .review-lightbox-image {
    transform: scale(1);
}

/* 控制 .review-lightbox-caption 的布局、视觉和状态表现 */
.review-lightbox-caption {
    margin: 0;
    text-align: center;
    color: rgba(236, 246, 252, 0.88);
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition: opacity 280ms ease, transform 320ms cubic-bezier(0.18, 0.84, 0.22, 1);
}

/* .review-lightbox.active .review-lightbox-caption 在对应状态下的样式 */
.review-lightbox.active .review-lightbox-caption {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 130ms;
}

/* ============================================
   响应式适配
   ============================================ */

/* 当前屏幕条件下的响应式样式 */
@media (max-width: 1024px) {
/* 控制 .detail-page 的布局、视觉和状态表现 */
    .detail-page {
        --detail-safe-side: 84px;
    }

/* 控制 .detail-footer 的布局、视觉和状态表现 */
    .detail-footer {
        padding: 84px calc(var(--spacing-md) + var(--detail-safe-side)) 42px;
    }

    .sea-atlas-resize-layer {
        display: none;
    }

    .detail-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail-footer-next {
        grid-column: 1 / -1;
    }

    .detail-footer-next-card {
        min-height: 0;
    }

    .related-stage-shell {
        grid-template-columns: 1fr;
    }

    .related-neighbor-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

/* 控制 .content-wrapper 的布局、视觉和状态表现 */
    .content-wrapper {
        grid-template-columns: 1fr;
    }
    
/* 控制 .intro-section 的布局、视觉和状态表现 */
    .intro-section {
        grid-column: 1;
    }

    .intro-section-head {
        padding: 24px 24px 0;
    }

    .intro-archive-grid {
        grid-template-columns: 1fr;
    }

    .intro-card-location,
    .intro-card-weather {
        grid-column: auto;
    }

    .intro-weather-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
/* 控制 .booking-sidebar 的布局、视觉和状态表现 */
    .booking-sidebar {
        grid-column: 1;
        grid-row: auto;
        position: static;
        top: auto;
        z-index: auto;
    }
    
/* 控制 .booking-sticky 的布局、视觉和状态表现 */
    .booking-sticky {
        position: static;
        top: auto;
        max-height: none;
        overflow: visible;
        scrollbar-width: auto;
    }

    .booking-focus-panel {
        position: static;
        top: auto;
    }

    .booking-copy {
        position: static;
        top: auto;
    }

/* 控制 .review-card 的布局、视觉和状态表现 */
    .review-card {
        grid-template-columns: 1fr;
    }

/* 控制 .review-featured-photo-button 的布局、视觉和状态表现 */
    .review-featured-photo-button {
        aspect-ratio: 1 / 0.72;
    }

/* 控制 .package-modal-grid 的布局、视觉和状态表现 */
    .package-modal-grid {
        grid-template-columns: 1fr;
    }

/* 控制 .review-detail-header, 的布局、视觉和状态表现 */
    .review-detail-header,
    .review-detail-grid {
        grid-template-columns: 1fr;
    }

/* 控制 .review-detail-rating 的布局、视觉和状态表现 */
    .review-detail-rating {
        align-items: flex-start;
    }

/* 控制 .review-detail-gallery 的布局、视觉和状态表现 */
    .review-detail-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

/* 控制 .map-container, 的布局、视觉和状态表现 */
    .map-container,
    .sea-atlas {
        min-height: 0;
    }

    .sea-atlas-shell {
        min-height: 860px;
    }

/* 控制 .sea-atlas-stage 的布局、视觉和状态表现 */
    .sea-atlas-stage {
        min-height: 0;
    }

/* 控制 .sea-atlas-panel 的布局、视觉和状态表现 */
    .sea-atlas-panel {
        position: relative;
        grid-template-columns: 1fr;
        inset: auto;
        gap: 18px;
        margin-bottom: 18px;
    }

/* .sea-atlas-panel:not(.is-active) 在对应状态下的样式 */
    .sea-atlas-panel:not(.is-active) {
        display: none;
    }

}

/* 当前屏幕条件下的响应式样式 */
@media (max-width: 900px) {
    .sea-guide {
        right: 18px;
        bottom: 18px;
    }

    .sea-guide-panel {
        width: min(296px, calc(100vw - 20px));
    }

    .detail-footer {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .detail-footer-grid {
        grid-template-columns: 1fr;
    }

    .related-spots {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .related-feature-card {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .related-feature-media {
        height: auto;
        min-height: 300px;
    }

    .related-feature-copy {
        padding-top: 26px;
    }
}

@media (max-width: 900px) {
/* 控制 .detail-page 的布局、视觉和状态表现 */
    .detail-page {
        --detail-safe-side: 0px;
    }
}

/* 当前屏幕条件下的响应式样式 */
@media (max-width: 600px) {
/* 控制 .sea-guide 的布局、视觉和状态表现 */
    .sea-guide {
        right: 12px;
        bottom: 14px;
    }

    .sea-guide-trigger {
        min-width: 102px;
        padding: 11px 14px 11px 13px;
    }

    .sea-guide-panel {
        width: calc(100vw - 24px);
        /* 手机端改成“视口宽度减 24px”，也就是左右各留 12px，
           让悬浮面板在窄屏上仍然有边距，不像整屏抽屉。 */
        max-height: min(54vh, 420px);
        /* 手机上进一步压低最大高度，避免导览面板打开后盖住太多正文。 */
        padding: 16px;
        border-radius: 22px;
    }

    .sea-guide-entry {
        padding: 12px 13px;
    }

    .detail-footer {
        padding: 72px var(--spacing-md) 36px;
    }

    .detail-footer-shell {
        gap: 22px;
    }

    .related-shell {
        gap: 22px;
    }

    .related-head {
        gap: 10px;
    }

    .related-title {
        font-size: 1.6rem;
    }

    .related-feature-copy {
        padding: 24px 20px 22px;
    }

    .related-neighbor-stack {
        grid-template-columns: 1fr;
    }

    .related-neighbor-card {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 14px;
        padding: 14px;
        border-radius: 24px;
    }

    .detail-footer-echo,
    .detail-footer-group,
    .detail-footer-next-card {
        border-radius: 24px;
    }

    .detail-footer-title {
        font-size: 1.86rem;
    }

    .detail-footer-lead {
        font-size: 1rem;
        line-height: 1.82;
    }

    .detail-footer-murmur,
    .detail-footer-explore-copy {
        font-size: 0.92rem;
    }

    .detail-footer-actions {
        gap: 10px;
    }

    .detail-footer-chip {
        width: 100%;
    }

    .detail-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

/* 控制 .detail-hero 的布局、视觉和状态表现 */
    .detail-hero {
        height: 250px;
    }

/* 控制 .detail-page.spot-mabul .detail-hero 的布局、视觉和状态表现 */
    .detail-page.spot-mabul .detail-hero {
        height: 300px;
    }

/* 控制 .detail-page.spot-mabul .hero-image 的布局、视觉和状态表现 */
    .detail-page.spot-mabul .hero-image {
        --hero-pan-x-start: -1.1%;
        --hero-pan-x-end: 1.1%;
        animation-duration: 26s;
    }
    
/* 控制 .detail-title 的布局、视觉和状态表现 */
    .detail-title {
        font-size: 1.5rem;
        gap: 0.08em;
    }

    .intro-section-head {
        padding: 22px 0 0;
    }

    .intro-section-title {
        font-size: 1.72rem;
    }

    .intro-section-lead {
        font-size: 0.95rem;
        line-height: 1.84;
    }

    .detail-reading-section-map {
        gap: 8px;
        margin-top: 0;
        padding-top: 2px;
    }

    .spot-map-head {
        gap: 8px;
        padding: 2px 8px 8px 4px;
    }

    .spot-map-head::before {
        left: 4px;
        top: 2px;
        width: 64px;
    }

    .spot-map-head::after {
        left: -18px;
        right: -24px;
        top: -20px;
        height: 150px;
    }

    .spot-map-kicker {
        font-size: 0.68rem;
        letter-spacing: 0.22em;
    }

    .spot-map-lead {
        font-size: 0.95rem;
        line-height: 1.82;
    }

    .intro-archive-card {
        --intro-card-radius: 24px;
        --intro-card-shell-tilt: 4deg;
        padding: 20px 18px 18px;
    }

    .intro-card-head {
        align-items: flex-start;
    }

    .intro-weather-grid {
        grid-template-columns: 1fr;
    }
    
/* 控制 .detail-subtitle 的布局、视觉和状态表现 */
    .detail-subtitle {
        font-size: 1rem;
    }
    
/* 控制 .detail-tags 的布局、视觉和状态表现 */
    .detail-tags {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .sea-atlas-controls {
        align-items: stretch;
    }

    .sea-atlas-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .sea-atlas-reset-view,
    .sea-atlas-open-map {
        flex: 0 1 auto;
        padding: 9px 14px;
        font-size: 0.74rem;
        letter-spacing: 0.1em;
    }

    .sea-atlas-fullscreen {
        padding: 10px;
    }

    .sea-atlas-fullscreen-panel {
        width: 100%;
        height: min(100vh - 20px, 1000px);
        padding: 16px;
        border-radius: 24px;
    }

    .sea-atlas-fullscreen-head {
        gap: 14px;
    }

    .sea-atlas-fullscreen-actions {
        width: 100%;
        justify-content: space-between;
    }

    .sea-atlas-fullscreen-close,
    .sea-atlas-fullscreen .sea-atlas-reset-view {
        padding: 9px 14px;
    }

/* 控制 .detail-content, 的布局、视觉和状态表现 */
    .detail-content,
    .related-spots {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    
/* 控制 .tag 的布局、视觉和状态表现 */
    .tag {
        display: inline-block;
    }

/* 控制 .booking-sticky 的布局、视觉和状态表现 */
    .booking-sticky {
        padding: 20px 16px;
        border-radius: 22px;
    }

    .itinerary-list {
        padding-left: 0;
    }

    .package-card {
        width: 100%;
        margin-left: 0;
        padding: 16px;
        gap: 16px;
        border-radius: 24px;
    }

    .package-card-topline-main {
        gap: 6px;
    }

    .package-card-index {
        font-size: 0.6rem;
        letter-spacing: 0.22em;
    }

    .package-card-audience,
    .package-card-archive {
        padding: 14px;
        border-radius: 20px;
    }

    .package-card-title {
        font-size: 1.06rem;
    }

    .package-card-state-stack {
        gap: 6px;
    }

/* 控制 .review-actions 的布局、视觉和状态表现 */
    .review-actions {
        gap: 10px;
    }

/* 控制 .review-detail-modal 的布局、视觉和状态表现 */
    .review-detail-modal {
        padding: 10px; /* 给评论详情层四周留出最小安全边距，避免手机上贴屏 */
    }

/* 控制 .review-detail-panel 的布局、视觉和状态表现 */
    .review-detail-panel {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        min-height: 0;
        border-radius: 24px;
    }

/* 控制 .review-detail-header 的布局、视觉和状态表现 */
    .review-detail-header {
        padding: 22px 20px 18px;
    }

/* 控制 .review-detail-author 的布局、视觉和状态表现 */
    .review-detail-author {
        align-items: flex-start;
    }

/* 控制 .review-detail-title 的布局、视觉和状态表现 */
    .review-detail-title {
        font-size: 1.42rem;
    }

/* 控制 .review-detail-scroll 的布局、视觉和状态表现 */
    .review-detail-scroll {
        padding: 18px 20px 22px;
    }

/* 控制 .review-detail-gallery, 的布局、视觉和状态表现 */
    .review-detail-gallery,
    .review-detail-grid {
        grid-template-columns: 1fr;
    }

/* 控制 .map-container 的布局、视觉和状态表现 */
    .map-container {
        border-radius: 24px;
    }

    .map-container::before {
        left: 18px;
        right: 18px;
    }

    .map-container::after {
        left: 12px;
        right: 12px;
        height: 72px;
    }

    .sea-atlas-resize-layer {
        display: none;
    }

/* 控制 .sea-atlas 的布局、视觉和状态表现 */
    .sea-atlas {
        padding: 18px;
    }

/* 控制 .sea-atlas-visual, 的布局、视觉和状态表现 */
    .sea-atlas-visual,
    .sea-atlas-dossier {
        border-radius: 20px;
    }

/* 控制 .sea-atlas-visual, 的布局、视觉和状态表现 */
    .sea-atlas-visual,
    .sea-route-map,
    .sea-profile,
    .sea-atlas-map {
        min-height: 340px;
    }

/* 控制 .sea-atlas-meta-grid 的布局、视觉和状态表现 */
    .sea-atlas-meta-grid {
        grid-template-columns: 1fr;
    }

/* 控制 .sea-atlas-node, 的布局、视觉和状态表现 */
    .sea-atlas-node,
    .sea-route-node {
        min-width: 92px;
        max-width: 120px;
    }

/* 控制 .sea-atlas-node 的布局、视觉和状态表现 */
    .sea-atlas-node {
        font-size: 0.8rem;
    }

/* 控制 .sea-route-node 的布局、视觉和状态表现 */
    .sea-route-node {
        padding: 8px 10px;
    }

    .sea-atlas-map-currents {
        opacity: 0.14;
    }

    .sea-atlas-marker-label {
        display: none;
    }

    .sea-atlas-info-card {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        padding: 12px 12px 11px;
        border-radius: 16px;
    }

    .sea-atlas-info-card.is-port-card {
        display: none;
    }

    .sea-atlas-map .leaflet-control-attribution {
        margin: 0 8px 8px 0;
        padding: 6px 11px;
        font-size: 0.68rem;
        letter-spacing: 0.06em;
    }

/* 控制 .sea-profile-arrow 的布局、视觉和状态表现 */
    .sea-profile-arrow {
        top: 20px;
        right: 14px;
        padding: 8px 10px;
        font-size: 0.7rem;
    }

/* 控制 .sea-profile-layers 的布局、视觉和状态表现 */
    .sea-profile-layers {
        gap: 12px;
    }

/* 控制 .sea-profile-layer 的布局、视觉和状态表现 */
    .sea-profile-layer {
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 12px;
        min-height: 84px;
    }

    .sea-profile {
        min-height: 380px;
        padding: 92px 16px 22px 18px;
    }

    .sea-profile-grid {
        inset: 94px 12px 20px 12px;
        background-size: 100% 62px, 48px 100%;
    }

    .sea-profile-depth-rail {
        left: 36px;
        top: 102px;
        bottom: 26px;
    }

    .sea-profile-layer::before {
        left: 40px;
        width: 26px;
    }

    .sea-profile-depth {
        padding-left: 10px;
        font-size: 0.9rem;
    }

    .sea-profile-depth::before {
        left: -4px;
        width: 9px;
        height: 9px;
        box-shadow:
            0 0 0 5px rgba(166, 219, 232, 0.08),
            0 0 12px rgba(186, 232, 242, 0.22);
    }

    .sea-profile-band {
        padding: 15px 16px 14px;
        border-radius: 20px;
    }

    .sea-profile-band strong {
        font-size: 0.98rem;
    }

    .sea-profile-markers {
        inset: 116px 10px 22px 88px;
    }

    .sea-profile-marker {
        gap: 8px;
    }

    .sea-profile-marker.is-left {
        left: 12px;
    }

    .sea-profile-marker.is-right {
        right: 0;
    }

    .sea-profile-marker::before {
        width: 22px;
    }

    .sea-profile-marker.is-left::before {
        right: -16px;
    }

    .sea-profile-marker.is-right::before {
        left: -16px;
    }

    .sea-profile-marker-copy {
        min-width: 88px;
        padding: 8px 10px 7px;
        border-radius: 14px;
    }

    .sea-profile-marker-copy em {
        font-size: 0.56rem;
    }

    .sea-profile-marker-copy strong {
        font-size: 0.74rem;
    }

/* 控制 .package-card-topline, 的布局、视觉和状态表现 */
    .package-card-topline,
    .package-card-footer,
    .package-modal-head,
    .package-modal-actions {
        flex-direction: column;
        align-items: flex-start;
    }

/* 控制 .package-card-state-stack, 的布局、视觉和状态表现 */
    .package-card-state-stack,
    .package-modal-match {
        justify-content: flex-start;
    }

/* 控制 .package-card-signal, 的布局、视觉和状态表现 */
    .package-card-signal,
    .package-modal-signal,
    .review-dimensions,
    .review-gallery,
    .review-gallery.has-featured-photo,
    .review-gallery.review-gallery-solo,
    .review-gallery.review-gallery-pair,
    .review-gallery.review-gallery-trio {
        grid-template-columns: 1fr;
    }

    .package-card-action {
        width: 100%;
        justify-content: space-between;
    }

    .package-modal-editor-cta-button {
        width: 100%;
        justify-content: center;
    }

/* 控制 .review-card 的布局、视觉和状态表现 */
    .review-card {
        padding: 16px;
        border-radius: 22px;
    }

/* 控制 .review-featured-photo-button 的布局、视觉和状态表现 */
    .review-featured-photo-button {
        aspect-ratio: 1 / 0.78;
    }

    .review-gallery.review-gallery-trio .review-photo-button:first-child {
        aspect-ratio: 1 / 0.78;
    }

/* 控制 .booking-modal-content 的布局、视觉和状态表现 */
    .booking-modal-content {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        /* 手机上直接按“视口宽度减 20px”来算，也就是左右各留 10px，
           比桌面端更贴近屏幕，但仍保留基本呼吸空间。 */
        max-height: calc(100vh - 20px);
        /* 高度同理留出上下各 10px，避免弹层贴住刘海区或系统手势边缘。 */
        padding: 18px 16px 16px;
        border-radius: 22px;
    }

    .package-modal-head {
        padding-right: 38px;
    }

    .package-modal-archive {
        padding: 18px 16px 16px;
        border-radius: 24px;
    }

    .package-modal-summary-block,
    .package-modal-price {
        padding: 16px;
        border-radius: 22px;
    }

    .package-modal-custom-duration-controls {
        grid-template-columns: 1fr;
    }

    .package-modal-custom-duration-apply {
        width: 100%;
    }

/* 控制 .package-modal-title 的布局、视觉和状态表现 */
    .package-modal-title {
        font-size: 1.5rem;
    }

/* 控制 .review-lightbox 的布局、视觉和状态表现 */
    .review-lightbox {
        padding: 14px;
    }
    
/* 控制 .related-grid 的布局、视觉和状态表现 */
    .related-grid {
        grid-template-columns: 1fr;
    }
}

/* 套餐已收进行程状态：让已确认的套餐在当前详情页保持柔和的完成感。 */
.package-card.is-booked {
    border-color: rgba(136, 198, 223, 0.44);
    box-shadow:
        0 18px 32px rgba(10, 43, 64, 0.14),
        0 0 22px rgba(104, 173, 206, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.package-card-state-booked {
    color: rgba(27, 88, 121, 0.84);
    background: rgba(219, 241, 250, 0.46);
    border-color: rgba(130, 193, 221, 0.34);
}

.package-card.is-active .package-card-state-booked {
    color: rgba(24, 82, 112, 0.84);
    background: rgba(236, 248, 253, 0.58);
    border-color: rgba(145, 199, 222, 0.42);
}

.package-card-action.is-booked {
    background:
        linear-gradient(180deg, rgba(233, 246, 252, 0.2), rgba(111, 173, 201, 0.14)),
        rgba(255, 255, 255, 0.02);
    border-color: rgba(133, 198, 224, 0.32);
}

/* 已选中 / 已收进行程的套餐卡：
   保留原来的信息层级，但把视觉气质收拢到和 booking-focus-panel 同一片深海里。 */
.package-card:is(.is-active, .is-booked) {
    background:
        radial-gradient(circle at 18% 18%, rgba(136, 210, 233, 0.18), transparent 34%),
        linear-gradient(165deg, rgba(17, 54, 79, 0.96), rgba(8, 34, 52, 0.94) 58%, rgba(10, 45, 66, 0.92) 100%);
    border-color: rgba(164, 213, 232, 0.24);
    box-shadow:
        0 20px 40px rgba(4, 20, 34, 0.22),
        0 0 24px rgba(126, 198, 222, 0.08),
        inset 0 1px 0 rgba(243, 249, 252, 0.14);
    filter: saturate(1.02);
}

/* 已收藏未激活：仅微抬起 + 轻微投影，标记已关注但未最终选定的卡片。 */
.package-card.is-booked:not(.is-active) {
    transform: translate3d(0, -2px, 0);
}

/* 已选中态：明显抬起 + 蓝光外发光，表示当前聚焦的套餐卡。 */
.package-card.is-active {
    transform: translate3d(0, -6px, 0);
    box-shadow:
        0 24px 46px rgba(4, 20, 34, 0.24),
        0 0 28px rgba(126, 198, 222, 0.12),
        inset 0 1px 0 rgba(243, 249, 252, 0.16);
}

/* 已选中 + 已收藏：边框和光晕加深，合成双重状态的高亮效果。 */
.package-card.is-booked.is-active {
    border-color: rgba(182, 225, 239, 0.34);
    box-shadow:
        0 26px 52px rgba(4, 20, 34, 0.26),
        0 0 32px rgba(126, 198, 222, 0.14),
        inset 0 1px 0 rgba(243, 249, 252, 0.18);
}

/* 激活态伪元素：前置强化径向蓝光，模拟深海舱体被激活时的照明效果。 */
.package-card:is(.is-active, .is-booked)::before {
    opacity: 1;
    background:
        radial-gradient(circle at 30% 32%, rgba(173, 229, 243, 0.24), transparent 42%),
        radial-gradient(circle at 74% 20%, rgba(121, 190, 218, 0.18), transparent 34%);
    transform: translate3d(4%, -2%, 0) scale(1.02);
}

/* 激活态后置伪元素：斜向流光 + 底部光晕，增加立体深度感。 */
.package-card:is(.is-active, .is-booked)::after {
    opacity: 0.3;
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0) 36%, rgba(192, 231, 242, 0.09) 50%, rgba(255, 255, 255, 0) 66%),
        radial-gradient(circle at 16% 100%, rgba(111, 178, 206, 0.08), transparent 36%);
    transform: translate3d(8%, -4%, 0) scale(1);
}

/* 激活态徽章：深色基底 + 浅蓝文字 + 内高光，与普通态区分。 */
.package-card:is(.is-active, .is-booked) .package-card-badge {
    background:
        linear-gradient(180deg, rgba(240, 249, 252, 0.14), rgba(155, 208, 228, 0.08)),
        rgba(255, 255, 255, 0.04);
    border-color: rgba(180, 223, 237, 0.18);
    color: rgba(228, 244, 249, 0.92);
    box-shadow: inset 0 1px 0 rgba(247, 251, 253, 0.12);
}

/* 激活态序号：灰蓝低对比，融入深色背景。 */
.package-card:is(.is-active, .is-booked) .package-card-index {
    color: rgba(187, 224, 236, 0.66);
}

/* 激活态状态标签：透明深色基底，文字配深海蓝调。 */
.package-card:is(.is-active, .is-booked) .package-card-state {
    background: rgba(244, 250, 253, 0.08);
    border-color: rgba(180, 223, 237, 0.16);
    color: rgba(228, 244, 249, 0.84);
}

/* 激活态受众 / 档案信息卡片：深蓝半透明基底 + 微边框，与普通卡片区分。 */
.package-card:is(.is-active, .is-booked) .package-card-audience,
.package-card:is(.is-active, .is-booked) .package-card-archive {
    background:
        linear-gradient(180deg, rgba(149, 208, 229, 0.12), rgba(22, 78, 104, 0.24)),
        rgba(7, 28, 42, 0.26);
    border-color: rgba(180, 223, 237, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(247, 251, 253, 0.08),
        0 12px 24px rgba(3, 15, 24, 0.14);
}

/* 激活态章节 / 价格标签：灰蓝色调，弱对比适应深色背景。 */
.package-card:is(.is-active, .is-booked) .package-card-section-label,
.package-card:is(.is-active, .is-booked) .package-price-label {
    color: rgba(187, 224, 236, 0.62);
}

/* 激活态主要文字：高亮浅色，确保在深色背景上的可读性。 */
.package-card:is(.is-active, .is-booked) .package-card-audience-copy,
.package-card:is(.is-active, .is-booked) .package-card-title,
.package-card:is(.is-active, .is-booked) .package-price-value,
.package-card:is(.is-active, .is-booked) .package-cadence-primary {
    color: rgba(245, 251, 254, 0.98);
}

/* 激活态次要文字：灰蓝冷调，与主文字形成层次。 */
.package-card:is(.is-active, .is-booked) .package-card-mood,
.package-card:is(.is-active, .is-booked) .package-cadence-secondary,
.package-card:is(.is-active, .is-booked) .package-card-guidance,
.package-card:is(.is-active, .is-booked) .package-card-focus-copy {
    color: rgba(217, 238, 246, 0.84);
}

/* 激活态价格分隔线：浅蓝淡色，延续深海蓝调。 */
.package-card:is(.is-active, .is-booked) .package-price-wrap {
    border-bottom-color: rgba(180, 223, 237, 0.16);
}

/* 激活态适合度标签：透明深基底 + 内高光 + 浅蓝边框。 */
.package-card:is(.is-active, .is-booked) .package-plate-fit {
    background: rgba(244, 250, 253, 0.08);
    border-color: rgba(180, 223, 237, 0.2);
    color: rgba(228, 244, 249, 0.84);
    box-shadow:
        inset 0 1px 0 rgba(247, 251, 253, 0.12),
        0 8px 18px rgba(6, 23, 36, 0.14);
}

/* 激活态节奏标签：蓝绿色调更明显，表示活跃的日程状态。 */
.package-card:is(.is-active, .is-booked) .package-plate-rhythm {
    background: rgba(18, 76, 106, 0.18);
    border-color: rgba(162, 204, 223, 0.3);
    color: rgba(214, 236, 246, 0.78);
}

/* 激活态节奏指示点：亮蓝色圆点，表示活跃行程。 */
.package-card:is(.is-active, .is-booked) .package-plate-rhythm::before {
    background: rgba(173, 229, 243, 0.74);
    box-shadow: 0 0 0 3px rgba(188, 220, 232, 0.14);
}

/* 激活态焦点面板：完全展开，取消折叠限制。 */
.package-card:is(.is-active, .is-booked) .package-card-focus {
    max-height: none;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    padding-top: 16px;
    border-top-color: rgba(180, 223, 237, 0.16);
}

/* 激活态展开文本：取消文字裁剪，完整显示所有内容。 */
.package-card:is(.is-active, .is-booked) .package-card-mood,
.package-card:is(.is-active, .is-booked) .package-cadence-secondary,
.package-card:is(.is-active, .is-booked) .package-card-guidance,
.package-card:is(.is-active, .is-booked) .package-card-focus-copy {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: visible;
}

/* 激活态操作按钮：深蓝透明基底 + 浅色文字，融入深海舱体风格。 */
.package-card:is(.is-active, .is-booked) .package-card-action {
    color: rgba(244, 249, 252, 0.96);
    background:
        linear-gradient(180deg, rgba(184, 227, 239, 0.1), rgba(39, 101, 130, 0.12)),
        rgba(7, 28, 42, 0.24);
    border-color: rgba(183, 223, 236, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(248, 251, 253, 0.1),
        0 12px 24px rgba(6, 23, 36, 0.16);
}

/* 激活态按钮悬停：边框和阴影微提，反馈可操作性。 */
.package-card:is(.is-active, .is-booked) .package-card-action:hover {
    border-color: rgba(192, 230, 242, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(248, 251, 253, 0.14),
        0 14px 24px rgba(6, 23, 36, 0.16);
}

/* 已收藏状态的"已预订"标签：蓝绿色胶囊，与普通状态明显区分。 */
.package-card.is-booked .package-card-state-booked {
    color: rgba(236, 248, 253, 0.94);
    background: rgba(173, 229, 243, 0.14);
    border-color: rgba(173, 229, 243, 0.28);
}

/* 已收藏态操作按钮：柔和蓝绿色调，表示已确认的操作入口。 */
.package-card.is-booked .package-card-action.is-booked {
    background:
        linear-gradient(180deg, rgba(173, 229, 243, 0.16), rgba(86, 150, 181, 0.14)),
        rgba(255, 255, 255, 0.05);
    border-color: rgba(151, 214, 236, 0.32);
}

/* 第一阶段套餐卡整体改成深海舱风格，并把详细信息完整展开。
   用户此时靠右侧手动滑动查看套餐，所以每一张都应该像一只完整的小舱体。 */
.booking-sticky:not(.is-focus-only-context) .package-card {
    overflow: visible;
    isolation: isolate;
    background:
        radial-gradient(circle at 18% 18%, rgba(136, 210, 233, 0.18), transparent 34%),
        linear-gradient(165deg, rgba(17, 54, 79, 0.96), rgba(8, 34, 52, 0.94) 58%, rgba(10, 45, 66, 0.92) 100%);
    border-color: rgba(164, 213, 232, 0.18);
    box-shadow:
        0 18px 36px rgba(4, 20, 34, 0.2),
        inset 0 1px 0 rgba(243, 249, 252, 0.14);
    filter: saturate(1.01);
}

.booking-sticky:not(.is-focus-only-context) .package-card::before {
    inset: 0;
    height: auto;
    opacity: 0.92;
    background:
        radial-gradient(circle at 28% 22%, rgba(173, 229, 243, 0.18), transparent 28%),
        radial-gradient(circle at 78% 16%, rgba(121, 190, 218, 0.14), transparent 24%);
    transform: translate3d(0, 0, 0) scale(1);
}

.booking-sticky:not(.is-focus-only-context) .package-card::after {
    inset: 0;
    opacity: 0.24;
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0) 22%, rgba(192, 231, 242, 0.08) 48%, rgba(255, 255, 255, 0) 72%),
        radial-gradient(circle at 20% 100%, rgba(111, 178, 206, 0.08), transparent 28%);
    transform: translate3d(0, 0, 0) scale(1);
}

.booking-sticky:not(.is-focus-only-context) .package-card .package-card-badge {
    background:
        linear-gradient(180deg, rgba(240, 249, 252, 0.14), rgba(155, 208, 228, 0.08)),
        rgba(255, 255, 255, 0.04);
    border-color: rgba(180, 223, 237, 0.18);
    color: rgba(228, 244, 249, 0.92);
    box-shadow: inset 0 1px 0 rgba(247, 251, 253, 0.12);
}

.booking-sticky:not(.is-focus-only-context) .package-card .package-card-index {
    color: rgba(187, 224, 236, 0.66);
}

.booking-sticky:not(.is-focus-only-context) .package-card .package-card-state {
    background: rgba(244, 250, 253, 0.08);
    border-color: rgba(180, 223, 237, 0.16);
    color: rgba(228, 244, 249, 0.84);
}

.booking-sticky:not(.is-focus-only-context) .package-card .package-card-audience,
.booking-sticky:not(.is-focus-only-context) .package-card .package-card-archive {
    overflow: visible;
    min-width: 0;
    background:
        linear-gradient(180deg, rgba(149, 208, 229, 0.12), rgba(22, 78, 104, 0.24)),
        rgba(7, 28, 42, 0.26);
    border-color: rgba(180, 223, 237, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(247, 251, 253, 0.08),
        0 12px 24px rgba(3, 15, 24, 0.14);
}

.booking-sticky:not(.is-focus-only-context) .package-card .package-card-head,
.booking-sticky:not(.is-focus-only-context) .package-card .package-card-title-wrap,
.booking-sticky:not(.is-focus-only-context) .package-card .package-card-signal,
.booking-sticky:not(.is-focus-only-context) .package-card .package-price-wrap,
.booking-sticky:not(.is-focus-only-context) .package-card .package-cadence-stack,
.booking-sticky:not(.is-focus-only-context) .package-card .package-card-footer {
    width: 100%;
    min-width: 0;
}

.booking-sticky:not(.is-focus-only-context) .package-card .package-card-footer {
    display: grid;
    gap: 12px;
    align-items: stretch;
}

.booking-sticky:not(.is-focus-only-context) .package-card .package-card-section-label,
.booking-sticky:not(.is-focus-only-context) .package-card .package-price-label {
    color: rgba(187, 224, 236, 0.62);
}

.booking-sticky:not(.is-focus-only-context) .package-card .package-card-audience-copy,
.booking-sticky:not(.is-focus-only-context) .package-card .package-card-title,
.booking-sticky:not(.is-focus-only-context) .package-card .package-price-value,
.booking-sticky:not(.is-focus-only-context) .package-card .package-cadence-primary {
    color: rgba(245, 251, 254, 0.98);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.booking-sticky:not(.is-focus-only-context) .package-card .package-card-mood,
.booking-sticky:not(.is-focus-only-context) .package-card .package-cadence-secondary,
.booking-sticky:not(.is-focus-only-context) .package-card .package-card-guidance,
.booking-sticky:not(.is-focus-only-context) .package-card .package-card-focus-copy {
    color: rgba(217, 238, 246, 0.84);
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.booking-sticky:not(.is-focus-only-context) .package-card .package-card-guidance {
    font-size: 0.86rem;
    line-height: 1.82;
    letter-spacing: 0.01em;
    text-wrap: pretty;
}

.booking-sticky:not(.is-focus-only-context) .package-card .package-price-wrap {
    border-bottom-color: rgba(180, 223, 237, 0.16);
}

.booking-sticky:not(.is-focus-only-context) .package-card .package-plate-fit {
    background: rgba(244, 250, 253, 0.08);
    border-color: rgba(180, 223, 237, 0.2);
    color: rgba(228, 244, 249, 0.84);
    box-shadow:
        inset 0 1px 0 rgba(247, 251, 253, 0.12),
        0 8px 18px rgba(6, 23, 36, 0.14);
}

.booking-sticky:not(.is-focus-only-context) .package-card .package-plate-rhythm {
    background: rgba(18, 76, 106, 0.18);
    border-color: rgba(162, 204, 223, 0.3);
    color: rgba(214, 236, 246, 0.78);
}

.booking-sticky:not(.is-focus-only-context) .package-card .package-plate-rhythm::before {
    background: rgba(173, 229, 243, 0.74);
    box-shadow: 0 0 0 3px rgba(188, 220, 232, 0.14);
}

.booking-sticky:not(.is-focus-only-context) .package-card .package-card-focus {
    max-height: none;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    padding-top: 16px;
    border-top-color: rgba(180, 223, 237, 0.16);
}

.booking-sticky:not(.is-focus-only-context) .package-card .package-card-action {
    color: rgba(244, 249, 252, 0.96);
    width: 100%;
    justify-content: space-between;
    background:
        linear-gradient(180deg, rgba(184, 227, 239, 0.1), rgba(39, 101, 130, 0.12)),
        rgba(7, 28, 42, 0.24);
    border-color: rgba(183, 223, 236, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(248, 251, 253, 0.1),
        0 12px 24px rgba(6, 23, 36, 0.16);
}

.booking-sticky:not(.is-focus-only-context) .package-card .package-card-action:hover {
    border-color: rgba(192, 230, 242, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(248, 251, 253, 0.14),
        0 14px 24px rgba(6, 23, 36, 0.16);
}

.booking-note-feedback {
    display: grid;
    gap: 14px;
}

.booking-note-feedback-inner {
    display: grid;
    gap: 10px;
}

.booking-note-state {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(28, 99, 141, 0.12);
    border: 1px solid rgba(129, 189, 219, 0.28);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #2b6c93;
}

.booking-note-feedback p {
    margin: 0;
}

.booking-note-pending {
    color: #4b6f88;
}

.booking-note-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 0.8rem;
    color: #4d7189;
}

.booking-note-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 11px 16px;
    border-radius: 999px;
    background: rgba(26, 92, 133, 0.1);
    border: 1px solid rgba(129, 189, 219, 0.24);
    color: #1f6288;
    text-decoration: none;
    transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.booking-note-link:hover {
    transform: translateY(-2px);
    border-color: rgba(129, 189, 219, 0.36);
    background: rgba(26, 92, 133, 0.14);
}

.booking-confirm-chip.is-pending {
    background: rgba(247, 198, 138, 0.14);
    border-color: rgba(246, 191, 124, 0.24);
    color: rgba(252, 229, 200, 0.94);
}

.booking-confirm-feedback {
    position: fixed;
    inset: 0;
    z-index: 1650;
    display: grid;
    place-items: center;
    padding: 26px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 280ms ease, visibility 0s linear 280ms;
}

body.page-transition-active .booking-confirm-feedback {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease, visibility 0s linear 160ms;
}

body.page-transition-active .booking-modal,
body.page-transition-active .booking-modal-content,
body.page-transition-active .booking-match-floating-root,
body.page-transition-active .booking-match-confirm,
body.page-transition-active .booking-match-floating-confirm {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition: none;
}

.booking-confirm-feedback.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 280ms ease;
}

.booking-confirm-feedback.is-closing {
    opacity: 0;
    pointer-events: none;
}

.booking-confirm-feedback-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 28%, rgba(126, 181, 208, 0.16), transparent 38%),
        rgba(6, 20, 33, 0.26);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.booking-confirm-feedback-dialog {
    position: relative;
    width: min(580px, calc(100vw - 36px));
    padding: 28px 28px 24px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 16% 0%, rgba(185, 227, 246, 0.12), transparent 30%),
        linear-gradient(155deg, rgba(9, 33, 49, 0.92), rgba(10, 45, 64, 0.9) 48%, rgba(10, 67, 90, 0.86) 100%);
    border: 1px solid rgba(190, 227, 241, 0.12);
    box-shadow:
        0 28px 60px rgba(4, 14, 24, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translate3d(0, 14px, 0) scale(0.99);
    filter: blur(6px);
    opacity: 0;
    transition: transform 300ms ease, opacity 300ms ease, filter 300ms ease;
}

.booking-confirm-feedback.active .booking-confirm-feedback-dialog {
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    opacity: 1;
}

.booking-confirm-feedback.is-closing .booking-confirm-feedback-dialog {
    transform: translate3d(0, 12px, 0) scale(0.99);
    filter: blur(6px);
    opacity: 0;
}

.booking-confirm-feedback-inner {
    display: grid;
    gap: 14px;
    color: rgba(234, 245, 250, 0.88);
}

.booking-confirm-kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(190, 222, 236, 0.58);
}

.booking-confirm-title {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", serif;
    font-size: clamp(1.46rem, 2.2vw, 1.92rem);
    line-height: 1.3;
    color: #f5fbff;
}

.booking-confirm-copy {
    margin: 0;
    line-height: 1.84;
    color: rgba(209, 228, 238, 0.76);
}

.booking-confirm-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.booking-confirm-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(190, 227, 241, 0.1);
    color: rgba(233, 245, 250, 0.84);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.booking-confirm-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 6px;
}

.booking-confirm-primary,
.booking-confirm-secondary {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 999px;
    padding: 12px 18px;
    text-decoration: none;
    line-height: 1;
    transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease, color 220ms ease;
}

.booking-confirm-primary,
.booking-confirm-primary:link,
.booking-confirm-primary:visited {
    border: 1px solid rgba(185, 227, 246, 0.16);
    background: linear-gradient(135deg, rgba(34, 102, 140, 0.78), rgba(19, 74, 106, 0.9));
    color: #f5fbff;
    text-decoration: none;
}

.booking-confirm-secondary {
    border: 1px solid rgba(185, 227, 246, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(229, 241, 248, 0.84);
}

.booking-confirm-primary:hover,
.booking-confirm-primary:active,
.booking-confirm-primary:focus-visible,
.booking-confirm-secondary:hover {
    transform: translateY(-2px);
}

.booking-confirm-primary:hover {
    border-color: rgba(185, 227, 246, 0.24);
}

.booking-confirm-primary:hover,
.booking-confirm-primary:active,
.booking-confirm-primary:focus-visible {
    color: #f5fbff;
    text-decoration: none;
}

.booking-confirm-secondary:hover {
    border-color: rgba(185, 227, 246, 0.18);
    background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 600px) {
    .booking-confirm-feedback {
        padding: 14px;
    }

    .booking-confirm-feedback-dialog {
        width: calc(100vw - 28px);
        padding: 22px 18px 18px;
        border-radius: 24px;
    }

    .booking-confirm-actions {
        flex-direction: column;
    }

    .booking-confirm-primary,
    .booking-confirm-secondary {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 1200px) {

/* 控制大屏下 .sea-route-node 的布局、视觉和状态表现 */
    .sea-route-node {
        max-width: 160px;
    }
}

.package-card-fit-note {
    margin: 2px 0 0;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(168, 209, 229, 0.32);
    background: rgba(255, 255, 255, 0.28);
    color: #275977;
    font-size: 0.84rem;
    line-height: 1.68;
}

.package-card-fit-note.is-fit {
    border-color: rgba(123, 197, 183, 0.34);
    background: rgba(210, 242, 236, 0.44);
    color: #215a5e;
}

.package-card-fit-note.is-caution {
    border-color: rgba(220, 175, 126, 0.36);
    background: rgba(250, 236, 214, 0.54);
    color: #7a5633;
}

.package-card-fit-note.is-check-dive {
    border-color: rgba(149, 191, 222, 0.36);
    background: rgba(219, 236, 247, 0.56);
    color: #2f6283;
}

.package-card-window-note {
    margin: 10px 0 0;
    color: rgba(61, 97, 122, 0.74);
    font-size: 0.82rem;
    line-height: 1.74;
}

.package-modal-personal-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0 18px;
}

.package-modal-personal-card {
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid rgba(172, 214, 232, 0.14);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(140, 183, 204, 0.04)),
        rgba(7, 28, 42, 0.5);
    box-shadow:
        0 18px 30px rgba(4, 16, 28, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.package-modal-personal-card.is-fit {
    border-color: rgba(133, 208, 192, 0.2);
    background:
        radial-gradient(circle at 18% 12%, rgba(143, 219, 201, 0.16), rgba(143, 219, 201, 0) 30%),
        rgba(7, 28, 42, 0.54);
}

.package-modal-personal-card.is-caution {
    border-color: rgba(242, 198, 139, 0.22);
    background:
        radial-gradient(circle at 18% 12%, rgba(242, 198, 139, 0.16), rgba(242, 198, 139, 0) 30%),
        rgba(7, 28, 42, 0.54);
}

.package-modal-personal-card.is-check-dive {
    border-color: rgba(153, 198, 228, 0.22);
    background:
        radial-gradient(circle at 18% 12%, rgba(153, 198, 228, 0.16), rgba(153, 198, 228, 0) 30%),
        rgba(7, 28, 42, 0.54);
}

.package-modal-personal-kicker {
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(186, 221, 237, 0.56);
}

.package-modal-personal-title {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", serif;
    font-size: 1.18rem;
    color: #f2fbff;
}

.package-modal-personal-copy {
    margin: 0;
    color: rgba(218, 235, 244, 0.78);
    line-height: 1.8;
}

.package-modal-personal-meta,
.package-modal-personal-footnote {
    margin: 0;
    color: rgba(188, 219, 234, 0.62);
    font-size: 0.78rem;
    line-height: 1.74;
}

@media (max-width: 900px) {
    .package-modal-personal-panel {
        grid-template-columns: 1fr;
    }
}

/* 详情页高对比度保护层：统一守住 hero 文案、信息标签和 footer 里的深海品牌文字。 */
@media (forced-colors: active) {
    .detail-page :is(
        .detail-title,
        .detail-title-unit,
        .detail-footer-title,
        .detail-footer-explore-title,
        .detail-footer-group-title,
        .detail-footer-next-name
    ) {
        forced-color-adjust: none;
        color: var(--yanqi-forced-title);
        -webkit-text-fill-color: var(--yanqi-forced-title);
    }

    .detail-page :is(
        .detail-subtitle,
        .detail-subtitle-line,
        .detail-footer-lead,
        .detail-footer-murmur,
        .detail-footer-explore-copy,
        .detail-footer-next-copy
    ) {
        forced-color-adjust: none;
        color: var(--yanqi-forced-copy);
        -webkit-text-fill-color: var(--yanqi-forced-copy);
    }

    .detail-page :is(
        .tag,
        .tag strong,
        .detail-footer-overline,
        .detail-footer-next-kicker,
        .detail-footer-next-label,
        .detail-footer-bottom p
    ) {
        forced-color-adjust: none;
        color: var(--yanqi-forced-kicker);
        -webkit-text-fill-color: var(--yanqi-forced-kicker);
    }

    .detail-page :is(
        .detail-footer-chip,
        .detail-footer-link,
        .detail-footer-link-button,
        .detail-footer-next-card
    ),
    .detail-page :is(
        .detail-footer-chip,
        .detail-footer-link,
        .detail-footer-link-button,
        .detail-footer-next-card
    ):visited,
    .detail-page :is(
        .detail-footer-chip,
        .detail-footer-link,
        .detail-footer-link-button,
        .detail-footer-next-card
    ):hover,
    .detail-page :is(
        .detail-footer-chip,
        .detail-footer-link,
        .detail-footer-link-button,
        .detail-footer-next-card
    ):focus-visible,
    .detail-page :is(
        .detail-footer-chip,
        .detail-footer-link,
        .detail-footer-link-button,
        .detail-footer-next-card
    ):active {
        forced-color-adjust: none;
        color: var(--yanqi-forced-link);
        -webkit-text-fill-color: var(--yanqi-forced-link);
    }

    .detail-page :is(
        .detail-footer-chip,
        .detail-footer-next-card
    ) {
        border-color: var(--yanqi-forced-border);
    }

    .detail-page :is(
        .detail-footer-chip,
        .detail-footer-link,
        .detail-footer-link-button,
        .detail-footer-next-card
    ):focus-visible {
        outline: 2px solid var(--yanqi-forced-ring);
        outline-offset: 3px;
    }
}

/* First Group Enhancement Late Overrides */

.detail-page .detail-hero {
    margin-bottom: clamp(22px, 4vw, 42px);
}

.detail-page .content-wrapper {
    overflow: visible;
}

.detail-page .content-wrapper::after {
    display: none;
}

.detail-page .booking-sticky {
    --booking-zone-accent: rgba(145, 208, 230, 0.2);
    position: relative;
    isolation: isolate;
}

.detail-page .booking-sticky::before {
    content: "";
    position: absolute;
    inset: 12px 12px auto;
    height: 110px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 18%, rgba(241, 249, 253, 0.54), transparent 34%),
        radial-gradient(circle at 82% 18%, var(--booking-zone-accent), transparent 28%);
    opacity: 0.74;
    pointer-events: none;
}

.detail-page .booking-sticky::after {
    content: "";
    position: absolute;
    top: 104px;
    left: 17px;
    bottom: 20px;
    width: 1px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(112, 168, 193, 0), rgba(112, 168, 193, 0.5), rgba(112, 168, 193, 0.08), rgba(112, 168, 193, 0));
    box-shadow: 0 0 16px rgba(136, 196, 219, 0.14);
    opacity: 0.72;
    pointer-events: none;
}

.detail-page .booking-sticky[data-reading-zone="overview"] {
    --booking-zone-accent: rgba(170, 223, 240, 0.18);
}

.detail-page .booking-sticky[data-reading-zone="map"] {
    --booking-zone-accent: rgba(151, 220, 233, 0.26);
}

.detail-page .booking-sticky[data-reading-zone="reviews"] {
    --booking-zone-accent: rgba(184, 232, 244, 0.32);
}

.detail-page .booking-sticky[data-reading-zone="related"] {
    --booking-zone-accent: rgba(196, 226, 239, 0.24);
}

/* 价格徽章：深海蓝渐变 + 径向光晕，固定在侧边栏显示当前所选套餐的价格。 */
.detail-page .price-badge {
    overflow: hidden;
    border: 1px solid rgba(214, 239, 248, 0.18);
    background:
        radial-gradient(circle at 16% 18%, rgba(214, 241, 251, 0.22), transparent 28%),
        linear-gradient(135deg, rgba(10, 52, 79, 0.96), rgba(22, 85, 117, 0.88) 58%, rgba(14, 61, 92, 0.96));
}

/* 价格徽章内光层：白色斜向渐变，模拟玻璃表面反光。 */
.detail-page .price-badge::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 42%);
    pointer-events: none;
}

/* 匹配信息容器：左侧留白抬起层级，避免与价格徽章重叠。 */
.detail-page .booking-match {
    position: relative;
    z-index: 1;
    padding-left: 8px;
}

/* 匹配标签 / 链接：白色毛玻璃基底，用于展示用户的偏好匹配度。 */
.detail-page :is(.booking-match-chip, .booking-match-link) {
    background:
        linear-gradient(180deg, rgba(247, 252, 255, 0.9), rgba(230, 244, 250, 0.8)),
        rgba(255, 255, 255, 0.76);
    box-shadow:
        0 10px 18px rgba(20, 60, 84, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

/* 预订信息卡片：白色半透明基底 + 浅蓝灰边框，展示当前区域的摘要文本。 */
.detail-page .booking-copy {
    background:
        linear-gradient(145deg, rgba(251, 254, 255, 0.86), rgba(228, 242, 248, 0.6)),
        rgba(255, 255, 255, 0.28);
    border-color: rgba(193, 220, 232, 0.54);
    box-shadow:
        0 18px 34px rgba(13, 43, 63, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.22) inset;
}

/* 信息卡片左侧强调光：根据当前阅读区域（overview/map/reviews/related）变换 accent 色值。 */
.detail-page .booking-copy::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, var(--booking-zone-accent), rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 42%);
    opacity: 0.52;
    pointer-events: none;
}

/* 地图区卡片：边框加深，与地图的深海蓝色调呼应。 */
.detail-page .booking-sticky[data-reading-zone="map"] .booking-copy {
    border-color: rgba(177, 216, 229, 0.62);
}

/* 评价区卡片：增加蓝光外光晕，提升在评价段落的视觉存在感。 */
.detail-page .booking-sticky[data-reading-zone="reviews"] .booking-copy {
    box-shadow:
        0 20px 38px rgba(12, 41, 60, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.24) inset,
        0 0 24px rgba(175, 221, 236, 0.08);
}

/* 焦点面板：左侧边栏中展示活跃套餐的深色卡片，带内发光与外投影。 */
.detail-page .booking-focus-panel {
    box-shadow:
        0 24px 44px rgba(4, 20, 34, 0.24),
        0 0 0 1px rgba(210, 236, 245, 0.08) inset,
        0 0 34px rgba(108, 182, 210, 0.08);
}

/* 焦点面板前置装饰：提高透明度，强化深海舱体质感。 */
.detail-page .booking-focus-panel::before {
    opacity: 0.94;
}

/* 地图区域的焦点面板：边框 + 蓝绿光晕，与地图深海视觉一致。 */
.detail-page .booking-sticky[data-reading-zone="map"] .booking-focus-panel {
    border-color: rgba(184, 228, 240, 0.28);
    box-shadow:
        0 24px 46px rgba(4, 20, 34, 0.22),
        0 0 0 1px rgba(214, 240, 248, 0.1) inset,
        0 0 38px rgba(117, 196, 214, 0.14);
}

/* 评价区域的焦点面板：外光晕加强，适应用户浏览评价时的视觉焦点转移。 */
.detail-page .booking-sticky[data-reading-zone="reviews"] .booking-focus-panel {
    box-shadow:
        0 28px 52px rgba(4, 20, 34, 0.28),
        0 0 0 1px rgba(218, 242, 248, 0.1) inset,
        0 0 42px rgba(164, 222, 238, 0.16);
}

/* 推荐区域的焦点面板：边框 + 柔蓝光，与底部推荐相呼应。 */
.detail-page .booking-sticky[data-reading-zone="related"] .booking-focus-panel {
    border-color: rgba(196, 232, 244, 0.26);
    box-shadow:
        0 30px 56px rgba(4, 20, 34, 0.26),
        0 0 0 1px rgba(217, 240, 248, 0.1) inset,
        0 0 44px rgba(164, 211, 228, 0.14);
}

/* 各区域焦点面板的后置装饰统一样式：提高透明度并取消偏移。 */
.detail-page :is(
    .booking-sticky[data-reading-zone="map"] .booking-focus-panel,
    .booking-sticky[data-reading-zone="reviews"] .booking-focus-panel,
    .booking-sticky[data-reading-zone="related"] .booking-focus-panel
)::after {
    opacity: 0.62;
    transform: translate3d(0, 0, 0) scale(1);
}

/* 行程列表容器：浅色毛玻璃圆角卡片，展示每日行程安排。 */
.detail-page .itinerary-list {
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(248, 252, 255, 0.34), rgba(226, 240, 247, 0.12)),
        rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(188, 216, 228, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 18px 34px rgba(15, 45, 66, 0.06);
}

/* 预订备注卡片：白色实感基底，用于显示特惠说明或注意事项。 */
.detail-page .booking-note {
    background:
        linear-gradient(180deg, rgba(244, 251, 255, 0.88), rgba(225, 240, 248, 0.76)),
        rgba(255, 255, 255, 0.72);
    border-color: rgba(188, 215, 227, 0.74);
    box-shadow:
        0 16px 28px rgba(14, 51, 74, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

/* 推荐区域标题：底部渐变分隔线，与详情页尾部无缝衔接。 */
.detail-page .related-head {
    padding-bottom: 20px;
}

.detail-page .related-head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(100%, 540px);
    height: 1px;
    background: linear-gradient(90deg, rgba(108, 166, 191, 0.42), rgba(108, 166, 191, 0));
    opacity: 0.7;
}

/* 页脚容器：顶部大间距与负外边距，用于视觉上拉页脚。 */
.detail-page .detail-footer {
    padding-top: 112px;
    margin-top: -14px;
}

/* 页脚内壳：增大间距，顶部渐变分隔线。 */
.detail-page .detail-footer-shell {
    gap: 32px;
}

.detail-page .detail-footer-shell::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -34px;
    height: 1px;
    background: linear-gradient(90deg, rgba(173, 221, 238, 0), rgba(173, 221, 238, 0.38), rgba(173, 221, 238, 0));
    opacity: 0.82;
    pointer-events: none;
}

/* 页脚深海回声区：深蓝渐变 + 柔光，延续水下氛围至页面底部。 */
.detail-page .detail-footer-echo {
    background:
        radial-gradient(circle at 14% 16%, rgba(161, 220, 238, 0.18), transparent 28%),
        linear-gradient(148deg, rgba(11, 39, 56, 0.9), rgba(8, 31, 46, 0.84));
    box-shadow:
        0 32px 64px rgba(3, 14, 24, 0.3),
        0 0 42px rgba(126, 193, 219, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* 页脚探索区：顶部渐变分隔线，引导用户继续浏览。 */
.detail-page .detail-footer-explore {
    position: relative;
    padding-top: 10px;
}

.detail-page .detail-footer-explore::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(183, 217, 231, 0), rgba(183, 217, 231, 0.22), rgba(183, 217, 231, 0));
    opacity: 0.8;
}

/* 页脚卡片统一样式：深色投影 + 内高光，延续深海舱体卡片质感。 */
.detail-page :is(.detail-footer-group, .detail-footer-next-card) {
    box-shadow:
        0 22px 40px rgba(3, 14, 24, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* 桌面端布局：双栏网格 + 粘性侧边栏，正文区域与预订面板分列左右。 */
@media (min-width: 1025px) {
    body.detail-page {
        overflow-x: clip;
    }

    .detail-page .detail-content {
        max-width: 1720px;
    }

    .detail-page .content-wrapper {
        grid-template-columns: minmax(0, 1fr) clamp(330px, 23vw, 380px);
        gap: clamp(36px, 3.2vw, var(--spacing-2xl));
        padding-inline: clamp(24px, 2vw, 30px);
    }

    .detail-page .booking-sidebar,
    .detail-page .booking-sticky,
    .detail-page .itinerary-list,
    .detail-page .package-group,
    .detail-page .package-card,
    .detail-page .booking-copy,
    .detail-page .booking-focus-panel,
    .detail-page .booking-note {
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
    }

    .detail-page .booking-sidebar {
        justify-self: stretch;
        position: relative;
        top: auto;
        align-self: stretch;
    }

    .detail-page .booking-sticky {
        position: sticky;
        top: var(--detail-sidebar-stick-top);
        height: calc(100svh - var(--detail-sidebar-stick-top) - var(--detail-sidebar-stick-bottom));
        max-height: calc(100svh - var(--detail-sidebar-stick-top) - var(--detail-sidebar-stick-bottom));
        overflow-x: clip;
        padding-inline: clamp(20px, 1.5vw, 24px);
    }

    .detail-page .itinerary-list {
        padding-inline: 2px;
    }
}

@media (min-width: 1025px) and (max-width: 1279px) {
    .detail-page .content-wrapper {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 350px);
        gap: 30px;
        padding-inline: 22px;
    }

    .detail-page .booking-sticky {
        padding-inline: 20px;
    }
}

@media (min-width: 1800px) {
    .detail-page .content-wrapper {
        grid-template-columns: minmax(0, 1fr) 380px;
    }
}

@media (max-width: 960px) {
    .detail-page .booking-sticky::after {
        top: 92px;
        left: 15px;
    }
}

@media (max-width: 720px) {
    .detail-page .booking-sticky::after {
        display: none;
    }
}

/* Detail Atlas Refinement */

/* 地图容器：深海渐变背景，双层径向蓝光模拟水下环境。 */
.detail-page .map-container {
    position: relative;
    background:
        radial-gradient(circle at 20% 18%, rgba(175, 225, 239, 0.16), transparent 22%),
        radial-gradient(circle at 78% 22%, rgba(103, 178, 204, 0.16), transparent 26%),
        linear-gradient(180deg, rgba(6, 28, 43, 0.96), rgba(4, 20, 32, 0.98));
}

/* 首次渲染（加载前）：双栏布局展示占位图文，非交互。 */
.detail-page .sea-atlas-first-paint {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.62fr);
    gap: 24px;
    align-items: center;
    padding: clamp(24px, 3vw, 36px);
    color: rgba(236, 246, 251, 0.92);
    pointer-events: none;
}

/* 占位图文容器：网格排列，展示加载前的标题与说明。 */
.detail-page .sea-atlas-first-paint-copy {
    display: grid;
    gap: 12px;
    max-width: 420px;
}

/* 前导 / 加载 / 降级共用标签样式：小字大写宽间距，保持一致的地图信息层级。 */
.detail-page .sea-atlas-first-paint-kicker,
.detail-page .sea-atlas-loading-kicker,
.detail-page .sea-atlas-map-fallback-eyebrow {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(198, 231, 241, 0.68);
}

/* 占位 / 加载共用标题：大号浅色文字。 */
.detail-page .sea-atlas-first-paint-title,
.detail-page .sea-atlas-loading-title {
    margin: 0;
    font-size: clamp(1.18rem, 1.7vw, 1.54rem);
    color: rgba(247, 252, 255, 0.98);
}

/* 占位 / 加载共用描述：灰蓝正文，宽松行高。 */
.detail-page .sea-atlas-first-paint-text,
.detail-page .sea-atlas-loading-text {
    margin: 0;
    line-height: 1.78;
    color: rgba(220, 241, 248, 0.82);
}

/* 占位 / 加载 / 降级共用板：网格底纹 + 深海渐变，模拟海图等待时的视觉背景。 */
.detail-page .sea-atlas-first-paint-board,
.detail-page .sea-atlas-loading-board,
.detail-page .sea-atlas-map-fallback-board {
    position: relative;
    min-height: 280px;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(188, 226, 238, 0.16);
    background:
        linear-gradient(rgba(201, 231, 241, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 231, 241, 0.08) 1px, transparent 1px),
        linear-gradient(160deg, rgba(6, 32, 47, 0.88), rgba(7, 39, 58, 0.58));
    background-size: 54px 54px, 54px 54px, auto;
    box-shadow:
        inset 0 1px 0 rgba(246, 252, 255, 0.08),
        0 18px 40px rgba(2, 16, 27, 0.18);
}

/* 占位 / 加载同心圆环：脉冲动画模拟声纳扫描效果。 */
.detail-page .sea-atlas-first-paint-ring,
.detail-page .sea-atlas-loading-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 999px;
    border: 1px solid rgba(180, 226, 238, 0.16);
    transform: translate(-50%, -50%);
    animation: seaAtlasHoldingPulse 6.8s ease-in-out infinite;
}

/* 外圈：最大尺寸，模拟海图轮廓。 */
.detail-page .sea-atlas-first-paint-ring.is-outer,
.detail-page .sea-atlas-loading-ring.is-outer {
    width: 72%;
    height: 72%;
}

/* 中圈：中等尺寸，延迟脉冲制造层次感。 */
.detail-page .sea-atlas-first-paint-ring.is-mid,
.detail-page .sea-atlas-loading-ring.is-mid {
    width: 48%;
    height: 48%;
    animation-delay: 0.9s;
}

/* 内圈：最小尺寸，最晚脉冲。 */
.detail-page .sea-atlas-first-paint-ring.is-inner,
.detail-page .sea-atlas-loading-ring.is-inner {
    width: 28%;
    height: 28%;
    animation-delay: 1.8s;
}

/* 占位 / 加载 / 降级共用陆地形轮廓：椭圆形虚线边框，模拟海底地形简图。 */
.detail-page .sea-atlas-first-paint-land,
.detail-page .sea-atlas-loading-contour,
.detail-page .sea-atlas-map-fallback-shore {
    position: absolute;
    inset: auto;
    border-radius: 999px;
    border: 1px solid rgba(196, 231, 242, 0.18);
    opacity: 0.86;
}

.detail-page .sea-atlas-first-paint-land.is-main {
    left: 12%;
    top: 26%;
    width: 38%;
    height: 34%;
    transform: rotate(-12deg);
}

.detail-page .sea-atlas-first-paint-land.is-reef {
    right: 16%;
    bottom: 22%;
    width: 24%;
    height: 18%;
    transform: rotate(11deg);
}

.detail-page .sea-atlas-loading-contour.is-primary,
.detail-page .sea-atlas-map-fallback-shore.is-main {
    left: 12%;
    top: 22%;
    width: 42%;
    height: 38%;
    transform: rotate(-10deg);
}

.detail-page .sea-atlas-loading-contour.is-secondary,
.detail-page .sea-atlas-map-fallback-shore.is-secondary {
    right: 14%;
    bottom: 20%;
    width: 26%;
    height: 20%;
    transform: rotate(12deg);
}

.detail-page .sea-atlas-first-paint-route,
.detail-page .sea-atlas-loading-route,
.detail-page .sea-atlas-map-fallback-route {
    position: absolute;
    left: 14%;
    right: 12%;
    top: 52%;
    height: 1px;
    border-top: 1px dashed rgba(215, 243, 250, 0.72);
    transform: rotate(-12deg);
    opacity: 0.82;
}

.detail-page .sea-atlas-first-paint-ping,
.detail-page .sea-atlas-loading-scan,
.detail-page .sea-atlas-map-fallback-ping {
    position: absolute;
    inset: auto;
}

.detail-page .sea-atlas-first-paint-ping,
.detail-page .sea-atlas-map-fallback-ping {
    left: 62%;
    top: 38%;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: rgba(241, 251, 255, 0.98);
    box-shadow:
        0 0 0 10px rgba(166, 223, 237, 0.18),
        0 0 0 24px rgba(166, 223, 237, 0.08);
}

/* 加载扫描条：水平方向反复扫过，模拟海图雷达正在获取数据。 */
.detail-page .sea-atlas-loading-scan {
    inset: 0 auto 0 0;
    width: 44%;
    background: linear-gradient(90deg, rgba(244, 251, 255, 0), rgba(244, 251, 255, 0.12), rgba(244, 251, 255, 0));
    transform: translateX(-20%);
    animation: seaAtlasHoldingSweep 4.6s ease-in-out infinite;
}

/* 未唤醒状态的地图外壳：整体略微下移 + 轻微饱和度调整，保持待机姿态。 */
.detail-page .sea-atlas-shell:not(.is-atlas-awakening):not(.is-atlas-awake) .sea-atlas {
    opacity: 0.98;
    transform: translate3d(0, 10px, 0) scale(0.994);
    filter: saturate(0.98);
}

/* 未唤醒态的内容子元素：保持完全可见，仅去掉入场效果。 */
.detail-page .sea-atlas-shell:not(.is-atlas-awakening):not(.is-atlas-awake) :is(
    .sea-atlas-head,
    .sea-atlas-kicker,
    .sea-atlas-lead,
    .sea-atlas-controls,
    .sea-atlas-stage,
    .sea-atlas-panel.is-active .sea-atlas-visual,
    .sea-atlas-panel.is-active .sea-atlas-dossier
) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none;
}

/* 加载状态浮层：毛玻璃信息面板，展示加载进度和位置提示。 */
.detail-page .sea-atlas-loading-state {
    position: absolute;
    inset: 14px;
    z-index: 8;
    display: grid;
    align-content: end;
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(188, 227, 239, 0.12);
    background:
        linear-gradient(180deg, rgba(5, 25, 38, 0.14), rgba(4, 18, 29, 0.56)),
        rgba(3, 18, 28, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(247, 252, 255, 0.08),
        0 18px 34px rgba(1, 12, 21, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
    opacity: 1;
    transition: opacity 360ms ease, transform 420ms ease, visibility 0s linear 360ms;
}

/* 地图就绪态：隐藏加载浮层，向下淡出。 */
.detail-page .sea-atlas-map[data-map-stage-state="ready"] .sea-atlas-loading-state {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 12px, 0) scale(0.985);
}

/* 地图降级态：直接隐藏加载浮层。 */
.detail-page .sea-atlas-map[data-map-stage-state="fallback"] .sea-atlas-loading-state {
    opacity: 0;
    visibility: hidden;
}

/* 加载文字容器：网格排列加载状态下的位置提示。 */
.detail-page .sea-atlas-loading-copy {
    display: grid;
    gap: 8px;
    max-width: 360px;
}

/* 加载状态定位标记：通过 CSS 变量设置坐标，在预览图上展示潜点位置。 */
.detail-page .sea-atlas-loading-marker {
    position: absolute;
    left: var(--sea-preview-left);
    top: var(--sea-preview-top);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transform: translate(-50%, -50%);
    color: rgba(235, 248, 252, 0.92);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* 标记圆点：白色自发光，模拟声纳定位的亮点。 */
.detail-page .sea-atlas-loading-marker em {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(245, 252, 255, 0.98);
    box-shadow:
        0 0 0 8px rgba(169, 226, 239, 0.12),
        0 0 12px rgba(203, 240, 249, 0.26);
}

/* 主标记点：增强光晕，突出显示当前位置。 */
.detail-page .sea-atlas-loading-marker.is-primary em {
    box-shadow:
        0 0 0 10px rgba(169, 226, 239, 0.18),
        0 0 18px rgba(203, 240, 249, 0.34);
}

/* 标记文字：中等字重 + 深阴影，确保在浅色底图上可读。 */
.detail-page .sea-atlas-loading-marker strong {
    font-weight: 500;
    text-shadow: 0 8px 18px rgba(3, 16, 26, 0.34);
}

/* 加载 / 降级公用元信息行：flex 换行，展示深度 / 距离等数据。 */
.detail-page .sea-atlas-loading-meta,
.detail-page .sea-atlas-map-fallback-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.detail-page .sea-atlas-loading-pill,
.detail-page .sea-atlas-map-fallback-pill,
.detail-page .sea-atlas-legend-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid rgba(193, 230, 241, 0.18);
    background:
        linear-gradient(180deg, rgba(246, 252, 255, 0.12), rgba(225, 244, 250, 0.04)),
        rgba(4, 25, 38, 0.46);
    color: rgba(232, 246, 251, 0.9);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
}

.detail-page .sea-atlas-loading-region,
.detail-page .sea-atlas-legend-note {
    margin: 0;
    color: rgba(214, 238, 246, 0.72);
    font-size: 0.8rem;
    line-height: 1.68;
}

.detail-page .sea-atlas-legend-rail {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 9;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    padding: 12px 14px 11px;
    border-radius: 18px;
    border: 1px solid rgba(191, 228, 240, 0.16);
    background:
        linear-gradient(180deg, rgba(10, 39, 58, 0.78), rgba(5, 24, 37, 0.82)),
        rgba(5, 22, 34, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(247, 252, 255, 0.08),
        0 18px 28px rgba(2, 12, 21, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.detail-page .sea-atlas-legend-group,
.detail-page .sea-atlas-legend-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.detail-page .sea-atlas-legend-group {
    min-width: 0;
}

.detail-page .sea-atlas-legend-chip.is-legend {
    color: rgba(245, 251, 254, 0.96);
    border-color: rgba(208, 238, 246, 0.24);
}

.detail-page .sea-atlas-info-action,
.detail-page .sea-atlas-legend-action,
.detail-page .sea-atlas-map-fallback-action,
.detail-page .sea-atlas-map-fallback-action.is-link {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(198, 232, 243, 0.18);
    background:
        linear-gradient(180deg, rgba(246, 252, 255, 0.12), rgba(225, 244, 250, 0.04)),
        rgba(4, 25, 38, 0.46);
    color: rgba(238, 249, 253, 0.92);
    font: inherit;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 220ms ease, background 220ms ease, transform 220ms ease, color 220ms ease;
}

.detail-page .sea-atlas-info-action {
    width: 100%;
    margin-top: 12px;
}

.detail-page .sea-atlas-info-action:hover,
.detail-page .sea-atlas-info-action:focus-visible,
.detail-page .sea-atlas-legend-action:hover,
.detail-page .sea-atlas-legend-action:focus-visible,
.detail-page .sea-atlas-map-fallback-action:hover,
.detail-page .sea-atlas-map-fallback-action:focus-visible,
.detail-page .sea-atlas-map-fallback-action.is-link:hover,
.detail-page .sea-atlas-map-fallback-action.is-link:focus-visible {
    border-color: rgba(214, 239, 247, 0.3);
    background:
        linear-gradient(180deg, rgba(250, 253, 255, 0.18), rgba(232, 246, 251, 0.06)),
        rgba(7, 31, 47, 0.62);
    color: rgba(248, 252, 255, 0.98);
    transform: translateY(-1px);
}

.detail-page .sea-atlas-map-fallback {
    inset: 14px;
    z-index: 10;
    gap: 14px;
    padding: 18px;
    align-content: end;
    border-radius: 20px;
    background:
        radial-gradient(circle at 20% 18%, rgba(190, 231, 243, 0.12), transparent 30%),
        linear-gradient(165deg, rgba(5, 28, 43, 0.92), rgba(4, 18, 29, 0.84));
}

.detail-page .sea-atlas-map-fallback-copy-wrap {
    display: grid;
    gap: 8px;
    max-width: 420px;
}

.detail-page .sea-atlas-map-fallback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.detail-page .sea-atlas-map-fallback-title {
    margin: 0;
    font-size: 1.02rem;
    color: rgba(247, 252, 255, 0.98);
}

.detail-page .sea-atlas-map-fallback-copy {
    margin: 0;
    color: rgba(221, 241, 248, 0.84);
}

.detail-page .sea-atlas-legend-note {
    grid-column: 1 / -1;
    font-size: 0.74rem;
    line-height: 1.42;
    color: rgba(199, 228, 239, 0.62);
}

.detail-page .sea-atlas-marker.is-waypoint {
    --sea-marker-core-size: 8px;
    --sea-marker-ring-size: 18px;
    --sea-marker-halo-size: 36px;
    --sea-marker-core: rgba(226, 244, 250, 0.9);
    --sea-marker-ring: rgba(167, 221, 236, 0.24);
    --sea-marker-halo: rgba(155, 214, 230, 0.08);
}

.detail-page .sea-atlas-marker.is-waypoint::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.04), rgba(167, 224, 238, 0.12) 56%, rgba(167, 224, 238, 0) 82%);
    box-shadow: none;
    border: 1px dashed rgba(182, 225, 238, 0.28);
}

.detail-page .sea-atlas-marker.is-waypoint .sea-atlas-marker-label {
    padding: 5px 9px;
    font-size: 0.58rem;
    max-width: 128px;
    color: rgba(216, 238, 245, 0.72);
    border-color: rgba(178, 224, 237, 0.18);
    background:
        linear-gradient(180deg, rgba(210, 237, 246, 0.08), rgba(170, 216, 230, 0.03)),
        rgba(3, 19, 31, 0.56);
}

.detail-page .sea-atlas-route-line-glow {
    stroke: rgba(178, 230, 242, 0.8);
    stroke-width: 5.2;
    opacity: 0.16;
    filter: blur(5px);
}

.detail-page .sea-atlas-route-line-base {
    stroke: rgba(178, 228, 240, 0.28);
    stroke-width: 1.4;
    opacity: 0.44;
    stroke-dasharray: 5 11;
}

.detail-page .sea-atlas-route-line {
    stroke: rgba(241, 250, 255, 0.92);
    stroke-width: 1.8;
    opacity: 0.94;
    stroke-dasharray: 7 10;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 10px rgba(179, 230, 242, 0.18));
}

.detail-page .sea-atlas-route-line-sheen {
    stroke: rgba(248, 252, 255, 0.88);
    stroke-width: 1;
    opacity: 0.34;
    stroke-dasharray: 18 28;
    stroke-dashoffset: 0;
}

/* 详情页内档案卡片重写：浅色毛玻璃 + 增强透明感。 */
.detail-page .intro-archive-card {
    background:
        radial-gradient(circle at 15% 18%, rgba(166, 214, 232, 0.18), transparent 24%),
        linear-gradient(152deg, rgba(224, 238, 245, 0.94), rgba(205, 224, 234, 0.9));
    border-color: rgba(119, 158, 180, 0.42);
    box-shadow:
        0 24px 42px rgba(12, 32, 48, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.46);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.detail-page .intro-card-index {
    min-width: 48px;
    height: 28px;
    color: rgba(53, 88, 110, 0.9);
    background: rgba(232, 243, 248, 0.8);
    border-color: rgba(143, 185, 204, 0.36);
}

.detail-page .intro-card-title {
    color: #123850;
}

.detail-page .intro-card-paragraph,
.detail-page .intro-bullet-item {
    color: rgba(48, 74, 92, 0.94);
}

.detail-page .intro-bullet-item:hover {
    color: #163f5a;
}

.detail-page .intro-weather-card {
    background:
        linear-gradient(180deg, rgba(248, 252, 254, 0.9), rgba(231, 242, 248, 0.78)),
        rgba(233, 242, 247, 0.8);
    border-color: rgba(172, 205, 219, 0.32);
    box-shadow:
        0 14px 26px rgba(10, 28, 41, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.detail-page .intro-weather-label {
    color: rgba(74, 104, 123, 0.84);
}

.detail-page .intro-weather-value {
    color: #153a53;
}

.detail-page .booking-sticky {
    --booking-sticky-stack-gap: 14px;
}

.detail-page .itinerary-list {
    margin-bottom: calc(var(--booking-sticky-stack-gap, 14px) + 30px);
}

.detail-page .booking-sticky::before {
    inset: 14px 14px auto;
    height: 94px;
    opacity: 0.58;
}

.detail-page .booking-sticky::after {
    top: 96px;
    left: 16px;
    opacity: 0.58;
}

.detail-page .price-badge {
    padding: 18px 18px 16px;
    border-color: rgba(202, 232, 242, 0.16);
    background:
        radial-gradient(circle at 16% 18%, rgba(196, 233, 245, 0.16), transparent 28%),
        linear-gradient(145deg, rgba(7, 35, 53, 0.88), rgba(9, 48, 70, 0.8) 58%, rgba(6, 31, 49, 0.9));
    box-shadow:
        0 18px 34px rgba(3, 18, 29, 0.18),
        inset 0 1px 0 rgba(245, 252, 255, 0.08);
}

.detail-page .price-brief,
.detail-page .price-layer {
    margin: 0;
    text-transform: uppercase;
}

.detail-page .price-brief {
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    color: rgba(202, 233, 242, 0.68);
}

.detail-page .price-layer {
    margin-top: 6px;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: rgba(232, 246, 251, 0.84);
}

.detail-page .price-figure {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    padding: 8px 12px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(232, 247, 252, 0.095), rgba(139, 202, 226, 0.04)),
        rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(190, 229, 241, 0.11);
    box-shadow: inset 0 1px 0 rgba(249, 253, 255, 0.07);
}

.detail-page .price-label,
.detail-page .price-period {
    margin: 0;
    color: rgba(212, 237, 245, 0.62);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}

.detail-page .price-amount {
    font-size: clamp(1.24rem, 1.52vw, 1.48rem);
    line-height: 1;
    font-weight: 650;
    color: rgba(240, 249, 253, 0.9);
}

.detail-page .price-note {
    margin: 12px 0 0;
    color: rgba(214, 237, 245, 0.74);
    line-height: 1.68;
}

/* 展示前侧栏小修：把 Dive Brief 再压成航线摘要，减少购买卡的价格压迫感。 */
.detail-page .price-badge {
    padding: 16px 18px 15px;
    border-radius: 28px;
    border-color: rgba(193, 226, 238, 0.12);
    background:
        radial-gradient(circle at 18% 18%, rgba(187, 228, 241, 0.12), transparent 30%),
        linear-gradient(145deg, rgba(6, 29, 45, 0.9), rgba(7, 42, 62, 0.78) 58%, rgba(5, 25, 40, 0.92));
    box-shadow:
        0 14px 28px rgba(3, 16, 27, 0.14),
        inset 0 1px 0 rgba(245, 252, 255, 0.065);
}

.detail-page .price-badge::after {
    opacity: 0.42;
}

.detail-page .price-brief {
    color: rgba(200, 232, 242, 0.58);
}

.detail-page .price-layer {
    color: rgba(226, 243, 249, 0.74);
}

.detail-page .price-figure {
    margin-top: 12px;
    padding: 7px 10px;
    border-color: rgba(188, 228, 240, 0.09);
    background:
        linear-gradient(180deg, rgba(232, 247, 252, 0.07), rgba(139, 202, 226, 0.025)),
        rgba(255, 255, 255, 0.018);
}

.detail-page .price-label,
.detail-page .price-period {
    color: rgba(205, 234, 243, 0.54);
    font-size: 0.68rem;
}

.detail-page .price-amount {
    font-size: clamp(1.12rem, 1.34vw, 1.34rem);
    font-weight: 560;
    color: rgba(235, 247, 252, 0.84);
}

.detail-page .booking-copy {
    padding: 18px 18px 16px;
    background:
        linear-gradient(145deg, rgba(249, 252, 254, 0.78), rgba(228, 241, 247, 0.54)),
        rgba(255, 255, 255, 0.24);
    border-color: rgba(188, 216, 228, 0.48);
    box-shadow:
        0 14px 28px rgba(12, 39, 57, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}

.detail-page .booking-focus-panel {
    padding: 20px 20px 18px;
    border-color: rgba(191, 228, 240, 0.2);
    box-shadow:
        0 18px 34px rgba(4, 18, 30, 0.18),
        0 0 0 1px rgba(212, 237, 245, 0.08) inset,
        0 0 22px rgba(105, 182, 210, 0.08);
}

.detail-page .booking-focus-price-wrap {
    min-width: 104px;
    padding: 9px 11px 8px;
    border-color: rgba(180, 223, 237, 0.1);
    background:
        linear-gradient(180deg, rgba(240, 249, 252, 0.075), rgba(155, 208, 228, 0.035)),
        rgba(255, 255, 255, 0.02);
}

.detail-page .booking-focus-price-label {
    color: rgba(187, 224, 236, 0.5);
}

.detail-page .booking-focus-price {
    font-size: 1.04rem;
    font-weight: 560;
    color: rgba(234, 247, 252, 0.82);
}

.detail-page .booking-note {
    margin-top: 18px;
    z-index: 1;
    padding: 14px 16px;
    background:
        linear-gradient(180deg, rgba(245, 251, 254, 0.8), rgba(228, 241, 247, 0.7)),
        rgba(255, 255, 255, 0.62);
    border-color: rgba(186, 214, 226, 0.58);
    box-shadow:
        0 12px 24px rgba(13, 44, 63, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

/* 详情页深海档案收束：只压深外层水域和侧栏权重，保留浅蓝玻璃内容层。 */
.detail-page {
    background:
        radial-gradient(ellipse at 50% -8%, rgba(202, 229, 240, 0.18), rgba(202, 229, 240, 0) 42%),
        radial-gradient(ellipse at 12% 34%, rgba(124, 190, 214, 0.12), rgba(124, 190, 214, 0) 34%),
        linear-gradient(180deg, #507b91 0%, #315e76 34%, #1b415a 68%, #12334d 100%);
}

.detail-page .detail-hero {
    margin-bottom: clamp(18px, 3.4vw, 34px);
    box-shadow: 0 34px 76px rgba(4, 20, 32, 0.22);
}

.detail-page .hero-image-wrapper::after {
    height: 52%;
    background:
        linear-gradient(180deg, rgba(217, 240, 251, 0) 0%, rgba(7, 31, 48, 0.24) 40%, rgba(4, 19, 31, 0.9) 100%);
}

.detail-page .content-wrapper::before {
    background:
        radial-gradient(circle at 16% 0%, rgba(247, 253, 255, 0.34), transparent 30%),
        linear-gradient(180deg, rgba(230, 244, 250, 0.42) 0%, rgba(207, 228, 238, 0.27) 44%, rgba(111, 162, 187, 0.16) 100%),
        rgba(6, 31, 48, 0.08);
    border-color: rgba(153, 197, 216, 0.26);
    box-shadow:
        0 30px 68px rgba(4, 20, 32, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.detail-page .content-wrapper::after {
    content: "";
    display: block;
    position: absolute;
    inset: 42px clamp(18px, 2vw, 30px) 18px;
    border-radius: 30px;
    background:
        radial-gradient(ellipse at 84% 14%, rgba(177, 222, 236, 0.11), rgba(177, 222, 236, 0) 34%),
        linear-gradient(180deg, rgba(3, 22, 36, 0) 0%, rgba(3, 22, 36, 0.07) 46%, rgba(2, 16, 29, 0.16) 100%);
    opacity: 0.72;
    pointer-events: none;
    z-index: 0;
}

.detail-page .detail-reading-section {
    --detail-reading-current-glow-opacity: 0.26;
    --detail-reading-current-glow-inset: -18px -10px -18px -22px;
}

.detail-page .detail-reading-section::before {
    background: linear-gradient(180deg, rgba(126, 191, 215, 0), rgba(126, 191, 215, 0.48), rgba(126, 191, 215, 0));
    box-shadow: 0 0 16px rgba(100, 176, 205, 0.14);
}

.detail-page .detail-reading-section::after {
    background:
        radial-gradient(circle at 12% 18%, rgba(194, 231, 244, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(176, 218, 233, 0.06), rgba(42, 92, 118, 0.14) 54%, rgba(3, 20, 34, 0.04) 100%);
}

.detail-page .intro-section.detail-reading-section {
    --detail-reading-current-shadow:
        0 24px 58px rgba(4, 22, 35, 0.14),
        0 0 0 1px rgba(145, 196, 216, 0.12);
}

.detail-page .intro-section-head,
.detail-page .spot-map-head {
    position: relative;
}

.detail-page .intro-section-head::after {
    content: "";
    position: absolute;
    left: -30px;
    right: -44px;
    top: -34px;
    height: 178px;
    background:
        radial-gradient(ellipse at 18% 0%, rgba(202, 234, 244, 0.16), transparent 38%),
        linear-gradient(180deg, rgba(7, 34, 51, 0), rgba(7, 34, 51, 0.1) 100%);
    filter: blur(22px);
    opacity: 0.82;
    pointer-events: none;
    z-index: -1;
}

.detail-page .spot-map-head::after {
    background:
        radial-gradient(ellipse at 18% 0%, rgba(202, 234, 244, 0.16), transparent 38%),
        linear-gradient(180deg, rgba(7, 34, 51, 0), rgba(7, 34, 51, 0.1) 100%);
    opacity: 0.82;
}

.detail-page .intro-archive-card {
    background:
        radial-gradient(circle at 14% 12%, rgba(163, 218, 235, 0.14), transparent 30%),
        linear-gradient(148deg, rgba(26, 80, 104, 0.68), rgba(11, 49, 70, 0.72)),
        rgba(5, 31, 48, 0.62);
    border-color: rgba(154, 209, 226, 0.22);
    box-shadow:
        0 22px 42px rgba(3, 20, 33, 0.18),
        inset 0 1px 0 rgba(239, 250, 253, 0.12);
}

.detail-page .intro-archive-card.is-shell-visible::before {
    opacity: 0.26;
}

.detail-page .intro-card-index {
    color: rgba(207, 235, 244, 0.78);
    background: rgba(159, 211, 228, 0.08);
    border-color: rgba(171, 221, 236, 0.18);
}

.detail-page .intro-card-title {
    color: rgba(242, 250, 253, 0.96);
}

.detail-page .intro-card-paragraph,
.detail-page .intro-bullet-item {
    color: rgba(216, 235, 243, 0.86);
}

.detail-page .intro-bullet-item:hover {
    color: rgba(242, 250, 253, 0.96);
}

.detail-page .intro-weather-card {
    background:
        radial-gradient(circle at 14% 12%, rgba(191, 231, 242, 0.11), transparent 34%),
        linear-gradient(180deg, rgba(82, 142, 164, 0.3), rgba(20, 70, 91, 0.38)),
        rgba(8, 42, 61, 0.56);
    border-color: rgba(164, 214, 230, 0.18);
    box-shadow:
        0 14px 26px rgba(3, 19, 31, 0.14),
        inset 0 1px 0 rgba(240, 250, 253, 0.1);
}

.detail-page .intro-weather-card:hover {
    box-shadow:
        0 18px 30px rgba(3, 19, 31, 0.18),
        0 0 16px rgba(124, 199, 222, 0.08),
        inset 0 1px 0 rgba(240, 250, 253, 0.14);
}

.detail-page .intro-weather-label {
    color: rgba(190, 222, 233, 0.68);
}

.detail-page .intro-weather-value {
    color: rgba(242, 250, 253, 0.94);
}

.detail-page .detail-readiness-bridge {
    margin-top: clamp(36px, 4vw, 58px);
    margin-bottom: clamp(40px, 4.4vw, 64px);
}

.detail-page .detail-readiness-card {
    background:
        radial-gradient(circle at 10% 10%, rgba(131, 205, 226, 0.18), transparent 32%),
        radial-gradient(circle at 88% 4%, rgba(220, 245, 252, 0.08), transparent 30%),
        linear-gradient(150deg, rgba(4, 22, 36, 0.94), rgba(8, 43, 63, 0.88) 52%, rgba(10, 65, 88, 0.76) 100%);
    border-color: rgba(150, 205, 224, 0.24);
    box-shadow:
        0 26px 52px rgba(3, 18, 30, 0.2),
        0 0 0 1px rgba(240, 250, 253, 0.045) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.detail-page .detail-readiness-cert {
    padding-right: 32px;
    background:
        linear-gradient(180deg, rgba(239, 250, 253, 0.1), rgba(91, 166, 196, 0.055)),
        rgba(3, 28, 45, 0.42);
    border-color: rgba(164, 216, 233, 0.16);
}

.detail-page .detail-readiness-cert::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 13px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(180, 226, 240, 0.22);
    background: rgba(183, 232, 244, 0.04);
    box-shadow: 0 0 0 3px rgba(151, 217, 235, 0);
    opacity: 0.56;
    transition:
        opacity 220ms ease,
        border-color 220ms ease,
        background-color 220ms ease,
        box-shadow 220ms ease;
}

.detail-page .detail-readiness-cert:hover,
.detail-page .detail-readiness-cert:focus-visible {
    border-color: rgba(195, 234, 245, 0.3);
    background:
        linear-gradient(180deg, rgba(225, 247, 252, 0.14), rgba(81, 166, 197, 0.08)),
        rgba(4, 39, 59, 0.58);
}

.detail-page .detail-readiness-cert.is-current,
.detail-page .detail-readiness-cert[aria-pressed="true"] {
    border-color: rgba(190, 238, 248, 0.62);
    background:
        radial-gradient(circle at 86% 18%, rgba(132, 220, 239, 0.2), rgba(132, 220, 239, 0) 28%),
        linear-gradient(145deg, rgba(21, 94, 123, 0.78), rgba(5, 48, 70, 0.88)),
        rgba(4, 36, 55, 0.84);
    box-shadow:
        0 14px 24px rgba(2, 16, 26, 0.18),
        0 0 20px rgba(116, 207, 231, 0.14),
        inset 0 1px 0 rgba(247, 253, 255, 0.18),
        inset 0 0 0 1px rgba(203, 243, 250, 0.09);
}

.detail-page .detail-readiness-cert.is-current::before,
.detail-page .detail-readiness-cert[aria-pressed="true"]::before {
    width: 3px;
    background: linear-gradient(180deg, rgba(176, 238, 248, 0.18), rgba(192, 244, 250, 0.96), rgba(176, 238, 248, 0.18));
    box-shadow: 0 0 14px rgba(139, 222, 239, 0.52);
}

.detail-page .detail-readiness-cert.is-current::after,
.detail-page .detail-readiness-cert[aria-pressed="true"]::after {
    border-color: rgba(215, 249, 253, 0.92);
    background: rgba(178, 239, 248, 0.96);
    box-shadow:
        0 0 0 3px rgba(151, 217, 235, 0.14),
        0 0 14px rgba(139, 222, 239, 0.72);
    opacity: 1;
}

.detail-page .detail-readiness-cert.is-current span,
.detail-page .detail-readiness-cert[aria-pressed="true"] span {
    color: rgba(247, 253, 255, 0.98);
}

.detail-page .detail-readiness-cert.is-current small,
.detail-page .detail-readiness-cert[aria-pressed="true"] small {
    color: rgba(210, 239, 247, 0.88);
}

.detail-page .detail-reading-section-map {
    margin-top: clamp(52px, 5vw, 76px);
    padding-top: clamp(18px, 2.6vw, 34px);
}

.detail-page .spot-map-head {
    padding-bottom: clamp(14px, 2vw, 22px);
}

.detail-page .spot-map-kicker {
    color: rgba(26, 76, 102, 0.82);
}

.detail-page .spot-map-lead {
    color: rgba(34, 67, 88, 0.92);
}

.detail-page .map-container {
    border-color: rgba(118, 176, 201, 0.36);
    box-shadow:
        0 30px 64px rgba(3, 18, 30, 0.2),
        0 0 0 1px rgba(230, 247, 252, 0.08) inset;
}

.detail-page .detail-reading-section-reviews {
    margin-top: clamp(62px, 5.8vw, 88px);
}

.detail-page .detail-reading-section-reviews #spotReviews {
    color: rgba(230, 246, 251, 0.94);
    text-shadow: 0 16px 34px rgba(2, 14, 24, 0.32);
}

.detail-page .detail-reading-section-reviews #spotReviews::before {
    background: linear-gradient(90deg, rgba(177, 224, 239, 0.58), rgba(177, 224, 239, 0));
}

.detail-page .detail-reading-section-reviews .reviews-kicker {
    color: rgba(199, 229, 240, 0.72);
}

.detail-page .detail-reading-section-reviews .reviews-lead {
    color: rgba(218, 238, 246, 0.82);
}

.detail-page .reviews-stage {
    gap: 20px;
}

.detail-page .review-card {
    background:
        linear-gradient(145deg, rgba(242, 249, 252, 0.68), rgba(211, 230, 239, 0.42)),
        rgba(221, 240, 248, 0.38);
    border-color: rgba(157, 194, 213, 0.46);
    box-shadow:
        0 22px 44px rgba(5, 24, 39, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.detail-page .related-spots {
    margin-top: clamp(60px, 6vw, 92px);
}

.detail-page .related-shell {
    background:
        linear-gradient(180deg, rgba(220, 238, 246, 0.18), rgba(8, 34, 52, 0.12)),
        rgba(255, 255, 255, 0.06);
    border-color: rgba(142, 190, 211, 0.18);
}

.detail-page .detail-footer {
    padding-top: clamp(94px, 8vw, 126px);
}

.detail-page .detail-footer-shell::before {
    background: linear-gradient(90deg, rgba(149, 205, 225, 0), rgba(149, 205, 225, 0.28), rgba(149, 205, 225, 0));
}

.detail-page .booking-sticky {
    --booking-zone-accent: rgba(126, 197, 222, 0.16);
    --booking-sticky-stack-gap: 13px;
}

.detail-page .booking-sticky::before {
    opacity: 0.38;
    background:
        radial-gradient(circle at 18% 18%, rgba(216, 244, 252, 0.28), transparent 34%),
        radial-gradient(circle at 82% 18%, var(--booking-zone-accent), transparent 28%);
}

.detail-page .booking-sticky::after {
    opacity: 0.42;
    background: linear-gradient(180deg, rgba(107, 170, 197, 0), rgba(107, 170, 197, 0.42), rgba(107, 170, 197, 0.08), rgba(107, 170, 197, 0));
}

.detail-page .price-badge {
    padding: 15px 18px 14px;
    border-color: rgba(180, 219, 232, 0.1);
    background:
        radial-gradient(circle at 18% 18%, rgba(184, 226, 240, 0.1), transparent 32%),
        linear-gradient(148deg, rgba(5, 25, 41, 0.91), rgba(7, 38, 58, 0.76) 60%, rgba(4, 22, 36, 0.9));
    box-shadow:
        0 12px 26px rgba(3, 15, 26, 0.14),
        inset 0 1px 0 rgba(245, 252, 255, 0.055);
}

.detail-page .price-badge::after {
    opacity: 0.28;
}

.detail-page .price-brief {
    color: rgba(198, 232, 242, 0.5);
}

.detail-page .price-layer {
    color: rgba(232, 247, 252, 0.84);
    font-weight: 600;
}

.detail-page .price-figure {
    margin-top: 10px;
    padding: 6px 10px;
    border-color: rgba(184, 226, 239, 0.075);
    background:
        linear-gradient(180deg, rgba(232, 247, 252, 0.048), rgba(139, 202, 226, 0.02)),
        rgba(255, 255, 255, 0.012);
}

.detail-page .price-label,
.detail-page .price-period {
    color: rgba(206, 235, 244, 0.46);
}

.detail-page .price-amount {
    font-size: clamp(1rem, 1.18vw, 1.18rem);
    font-weight: 520;
    color: rgba(233, 247, 252, 0.72);
}

.detail-page .price-note {
    color: rgba(211, 237, 246, 0.62);
}

.detail-page :is(.booking-match-chip, .booking-match-link) {
    background:
        linear-gradient(180deg, rgba(239, 249, 253, 0.72), rgba(210, 231, 240, 0.56)),
        rgba(255, 255, 255, 0.36);
    border-color: rgba(165, 204, 222, 0.34);
    box-shadow:
        0 10px 18px rgba(5, 25, 39, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.detail-page .booking-copy {
    background:
        linear-gradient(145deg, rgba(239, 249, 253, 0.66), rgba(207, 229, 239, 0.45)),
        rgba(10, 40, 58, 0.08);
    border-color: rgba(156, 195, 213, 0.36);
    box-shadow:
        0 14px 28px rgba(5, 24, 38, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.13) inset;
}

.detail-page .booking-copy::before {
    opacity: 0.38;
}

.detail-page .booking-focus-panel {
    background:
        radial-gradient(circle at 18% 18%, rgba(132, 205, 230, 0.15), transparent 34%),
        linear-gradient(165deg, rgba(12, 45, 68, 0.96), rgba(5, 28, 46, 0.94) 60%, rgba(8, 38, 58, 0.9) 100%);
    border-color: rgba(169, 218, 235, 0.18);
    box-shadow:
        0 20px 38px rgba(3, 15, 27, 0.22),
        0 0 0 1px rgba(212, 237, 245, 0.07) inset,
        0 0 18px rgba(105, 182, 210, 0.06);
}

.detail-page .booking-focus-state {
    color: rgba(230, 246, 251, 0.92);
    font-weight: 600;
}

.detail-page .booking-focus-summary {
    color: rgba(213, 238, 246, 0.82);
}

.detail-page .booking-focus-price-wrap {
    min-width: 98px;
    padding: 8px 10px 7px;
    border-color: rgba(180, 223, 237, 0.085);
    background:
        linear-gradient(180deg, rgba(240, 249, 252, 0.055), rgba(155, 208, 228, 0.024)),
        rgba(255, 255, 255, 0.014);
}

.detail-page .booking-focus-price-label {
    color: rgba(187, 224, 236, 0.44);
}

.detail-page .booking-focus-price {
    font-size: 0.98rem;
    font-weight: 520;
    color: rgba(234, 247, 252, 0.72);
}

.detail-page .booking-focus-action {
    border-color: rgba(183, 223, 236, 0.18);
    background:
        linear-gradient(180deg, rgba(249, 252, 254, 0.078), rgba(204, 232, 243, 0.04)),
        rgba(255, 255, 255, 0.028);
    box-shadow: inset 0 1px 0 rgba(248, 251, 253, 0.09);
}

.detail-page .booking-note {
    background:
        linear-gradient(180deg, rgba(240, 249, 253, 0.68), rgba(211, 232, 241, 0.56)),
        rgba(255, 255, 255, 0.42);
    border-color: rgba(160, 197, 214, 0.44);
    box-shadow:
        0 12px 24px rgba(5, 24, 38, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

@keyframes seaAtlasHoldingPulse {
    0%,
    100% {
        opacity: 0.38;
        transform: translate(-50%, -50%) scale(0.96);
    }

    50% {
        opacity: 0.78;
        transform: translate(-50%, -50%) scale(1.02);
    }
}

@keyframes seaAtlasHoldingSweep {
    0% {
        transform: translateX(-22%);
        opacity: 0.12;
    }

    46%,
    54% {
        opacity: 0.48;
    }

    100% {
        transform: translateX(142%);
        opacity: 0.08;
    }
}

/* 详情页舒缓调色：降低浅蓝白雾与深卡硬边，让档案和简报留在同一层海水里。 */
.detail-page {
    background:
        radial-gradient(ellipse at 50% -8%, rgba(188, 219, 231, 0.14), rgba(188, 219, 231, 0) 42%),
        radial-gradient(ellipse at 12% 34%, rgba(111, 177, 201, 0.1), rgba(111, 177, 201, 0) 34%),
        linear-gradient(180deg, #466f85 0%, #2c5870 34%, #1a4058 68%, #113149 100%);
}

.detail-page .content-wrapper::before {
    background:
        radial-gradient(circle at 16% 0%, rgba(226, 241, 246, 0.22), transparent 30%),
        linear-gradient(180deg, rgba(205, 227, 236, 0.3) 0%, rgba(174, 205, 218, 0.22) 44%, rgba(91, 146, 170, 0.14) 100%),
        rgba(5, 29, 45, 0.11);
    border-color: rgba(145, 190, 209, 0.2);
    box-shadow:
        0 28px 62px rgba(4, 20, 32, 0.17),
        inset 0 1px 0 rgba(247, 252, 254, 0.15);
}

.detail-page .content-wrapper::after {
    background:
        radial-gradient(ellipse at 84% 14%, rgba(163, 210, 226, 0.085), rgba(163, 210, 226, 0) 34%),
        linear-gradient(180deg, rgba(3, 22, 36, 0) 0%, rgba(3, 22, 36, 0.085) 46%, rgba(2, 16, 29, 0.18) 100%);
    opacity: 0.68;
}

.detail-page .intro-archive-card {
    background:
        radial-gradient(circle at 14% 12%, rgba(151, 208, 226, 0.1), transparent 30%),
        linear-gradient(148deg, rgba(26, 78, 101, 0.56), rgba(11, 49, 69, 0.6)),
        rgba(5, 30, 46, 0.52);
    border-color: rgba(154, 209, 226, 0.16);
    box-shadow:
        0 18px 34px rgba(3, 20, 33, 0.14),
        inset 0 1px 0 rgba(239, 250, 253, 0.075);
}

.detail-page .intro-card-title {
    color: rgba(239, 248, 251, 0.93);
}

.detail-page .intro-card-paragraph,
.detail-page .intro-bullet-item {
    color: rgba(211, 232, 240, 0.82);
}

.detail-page .intro-weather-card {
    background:
        radial-gradient(circle at 14% 12%, rgba(184, 225, 238, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(76, 137, 158, 0.23), rgba(19, 68, 89, 0.3)),
        rgba(8, 41, 59, 0.48);
    border-color: rgba(164, 214, 230, 0.13);
    box-shadow:
        0 12px 22px rgba(3, 19, 31, 0.11),
        inset 0 1px 0 rgba(240, 250, 253, 0.07);
}

.detail-page .detail-readiness-card {
    background:
        radial-gradient(circle at 10% 10%, rgba(125, 197, 218, 0.14), transparent 32%),
        radial-gradient(circle at 88% 4%, rgba(213, 240, 248, 0.06), transparent 30%),
        linear-gradient(150deg, rgba(4, 22, 36, 0.88), rgba(8, 43, 63, 0.8) 52%, rgba(10, 65, 88, 0.7) 100%);
    border-color: rgba(150, 205, 224, 0.18);
    box-shadow:
        0 22px 44px rgba(3, 18, 30, 0.16),
        0 0 0 1px rgba(240, 250, 253, 0.035) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.detail-page .booking-sticky {
    background:
        linear-gradient(145deg, rgba(151, 190, 206, 0.54), rgba(108, 157, 177, 0.44)),
        rgba(79, 132, 155, 0.48);
    border-color: rgba(132, 177, 196, 0.4);
    box-shadow:
        0 20px 42px rgba(15, 45, 66, 0.18),
        inset 0 1px 0 rgba(245, 252, 254, 0.12);
}

.detail-page .booking-sticky::before {
    opacity: 0.28;
}

.detail-page .booking-sticky::after {
    opacity: 0.32;
}

.detail-page .price-badge {
    border-color: rgba(180, 219, 232, 0.075);
    background:
        radial-gradient(circle at 18% 18%, rgba(178, 221, 235, 0.075), transparent 32%),
        linear-gradient(148deg, rgba(5, 25, 41, 0.83), rgba(7, 38, 58, 0.68) 60%, rgba(4, 22, 36, 0.82));
    box-shadow:
        0 10px 22px rgba(3, 15, 26, 0.11),
        inset 0 1px 0 rgba(245, 252, 255, 0.04);
}

.detail-page :is(.booking-match-chip, .booking-match-link) {
    background:
        linear-gradient(180deg, rgba(222, 239, 245, 0.56), rgba(191, 219, 231, 0.42)),
        rgba(231, 245, 249, 0.24);
    border-color: rgba(158, 199, 216, 0.25);
    box-shadow:
        0 8px 16px rgba(5, 25, 39, 0.055),
        inset 0 1px 0 rgba(247, 252, 254, 0.26);
}

.detail-page .booking-copy {
    background:
        linear-gradient(145deg, rgba(217, 236, 243, 0.5), rgba(182, 213, 226, 0.35)),
        rgba(7, 36, 53, 0.13);
    border-color: rgba(151, 193, 211, 0.26);
    box-shadow:
        0 12px 24px rgba(5, 24, 38, 0.075),
        0 0 0 1px rgba(247, 252, 254, 0.075) inset;
}

.detail-page .booking-focus-panel {
    background:
        radial-gradient(circle at 18% 18%, rgba(126, 199, 223, 0.11), transparent 34%),
        linear-gradient(165deg, rgba(12, 45, 68, 0.88), rgba(5, 28, 46, 0.86) 60%, rgba(8, 38, 58, 0.82) 100%);
    border-color: rgba(169, 218, 235, 0.135);
    box-shadow:
        0 16px 32px rgba(3, 15, 27, 0.15),
        0 0 0 1px rgba(212, 237, 245, 0.045) inset,
        0 0 16px rgba(105, 182, 210, 0.04);
}

.detail-page .booking-note {
    background:
        linear-gradient(180deg, rgba(219, 237, 244, 0.52), rgba(190, 219, 231, 0.42)),
        rgba(225, 241, 246, 0.28);
    border-color: rgba(154, 195, 212, 0.3);
    box-shadow:
        0 10px 20px rgba(5, 24, 38, 0.06),
        inset 0 1px 0 rgba(247, 252, 254, 0.28);
}

/* 详情页投屏可读性校准：只提稳文字层级，不改变水域背景、布局或 reveal 节奏。 */
.detail-page :is(
    .intro-section-kicker,
    .spot-map-kicker,
    .related-kicker,
    .related-closing-kicker,
    .related-feature-kicker,
    .review-scene-kicker
) {
    color: rgba(37, 82, 106, 0.84);
}

.detail-page :is(
    .intro-section-title,
    #spotMapSection,
    .related-title,
    .related-closing-title
) {
    color: rgba(15, 54, 79, 0.98);
}

.detail-page :is(
    .intro-section-lead,
    .spot-map-lead,
    .related-lead,
    .related-closing-text
) {
    color: rgba(42, 76, 97, 0.94);
}

.detail-page .intro-card-paragraph,
.detail-page .intro-bullet-item {
    color: rgba(220, 239, 245, 0.9);
}

.detail-page .intro-weather-label {
    color: rgba(202, 230, 239, 0.78);
}

.detail-page .detail-readiness-kicker {
    color: rgba(202, 234, 243, 0.78);
}

.detail-page .detail-readiness-copy {
    color: rgba(218, 238, 245, 0.88);
}

.detail-page .detail-readiness-state-copy {
    color: rgba(207, 234, 242, 0.76);
}

.detail-page .detail-readiness-chip {
    color: rgba(226, 243, 248, 0.86);
}

.detail-page :is(
    .detail-readiness-panel-label,
    .detail-readiness-profile-label,
    .detail-readiness-choice-label
) {
    color: rgba(199, 231, 241, 0.72);
}

.detail-page .detail-readiness-panel p {
    color: rgba(211, 235, 243, 0.82);
}

.detail-page .detail-readiness-profile-item small {
    color: rgba(200, 229, 239, 0.76);
}

.detail-page .detail-readiness-cert-intro {
    color: rgba(215, 238, 245, 0.84);
}

.detail-page .detail-readiness-cert small {
    color: rgba(202, 232, 241, 0.76);
}

.detail-page .sea-atlas-kicker {
    color: rgba(207, 236, 244, 0.82);
}

.detail-page .sea-atlas-lead {
    color: rgba(240, 248, 251, 0.94);
}

.detail-page .detail-reading-section-reviews .reviews-kicker {
    color: rgba(209, 235, 243, 0.82);
}

.detail-page .detail-reading-section-reviews .reviews-lead {
    color: rgba(224, 241, 247, 0.88);
}

.detail-page :is(
    .review-date,
    .review-rating-score
) {
    color: rgba(83, 116, 137, 0.94);
}

.detail-page .review-scene-subtitle {
    color: rgba(69, 105, 128, 0.96);
}

.detail-page .review-summary {
    color: rgba(62, 95, 117, 0.96);
}

.detail-page .review-dimension-text {
    color: rgba(64, 96, 118, 0.96);
}

.detail-page .related-feature-title small,
.detail-page .related-neighbor-name span {
    color: rgba(59, 98, 119, 0.86);
}

.detail-page .related-feature-desc {
    color: rgba(43, 78, 100, 0.94);
}

.detail-page .related-feature-why {
    color: rgba(58, 91, 112, 0.92);
}

.detail-page .related-neighbor-desc {
    color: rgba(55, 89, 110, 0.92);
}

.detail-page .related-neighbor-why {
    color: rgba(65, 98, 117, 0.88);
}

.detail-page .price-brief {
    color: rgba(208, 236, 244, 0.64);
}

.detail-page .price-layer {
    color: rgba(237, 248, 252, 0.9);
}

.detail-page .price-note {
    color: rgba(220, 240, 247, 0.74);
}

.detail-page .booking-kicker-line {
    color: rgba(36, 82, 108, 0.76);
}

.detail-page .booking-title-line {
    color: rgba(14, 53, 77, 0.98);
}

.detail-page .booking-intro-line {
    color: rgba(48, 83, 105, 0.96);
}

.detail-page .booking-focus-overline {
    color: rgba(193, 228, 239, 0.7);
}

.detail-page .booking-focus-summary {
    color: rgba(222, 241, 247, 0.88);
}

.detail-page .booking-focus-price-label {
    color: rgba(202, 232, 241, 0.58);
}

.detail-page .booking-focus-price {
    color: rgba(239, 248, 252, 0.8);
}

.detail-page .booking-note {
    color: rgba(52, 87, 109, 0.96);
}

.detail-page :is(
    .package-card-index,
    .package-card-section-label,
    .package-price-label
) {
    color: rgba(52, 91, 113, 0.74);
}

.detail-page :is(
    .package-card-mood,
    .package-cadence-secondary,
    .package-card-focus-copy,
    .package-card-window-note,
    .package-card-guidance
) {
    color: rgba(68, 101, 122, 0.94);
}

.detail-page .detail-footer-kicker {
    color: rgba(216, 236, 243, 0.7);
}

.detail-page .detail-footer-lead {
    color: rgba(232, 243, 248, 0.9);
}

.detail-page .detail-footer-murmur {
    color: rgba(205, 226, 235, 0.8);
}

.detail-page .detail-footer-overline {
    color: rgba(207, 230, 239, 0.66);
}

.detail-page .detail-footer-explore-copy {
    color: rgba(205, 226, 235, 0.78);
}

.detail-page :is(
    .detail-footer-link,
    .detail-footer-link-button
) {
    color: rgba(214, 232, 239, 0.82);
}

.detail-page .detail-footer-next-kicker {
    color: rgba(207, 228, 236, 0.62);
}

.detail-page .detail-footer-next-label {
    color: rgba(211, 231, 239, 0.7);
}

.detail-page .detail-footer-next-copy {
    color: rgba(215, 232, 239, 0.8);
}

/* 详情页连续海层收束：
   先消除 Sea Atlas 往下阅读时的浅白断层，再缩短仍会遮住文字的 reveal 长尾。 */
.detail-page .content-wrapper::before {
    background:
        radial-gradient(circle at 16% 0%, rgba(215, 235, 242, 0.18), transparent 30%),
        linear-gradient(
            180deg,
            rgba(186, 215, 225, 0.24) 0%,
            rgba(145, 188, 204, 0.2) 42%,
            rgba(69, 126, 151, 0.22) 66%,
            rgba(18, 69, 92, 0.34) 100%
        ),
        rgba(5, 29, 45, 0.16);
    border-color: rgba(136, 183, 201, 0.17);
    box-shadow:
        0 28px 62px rgba(4, 20, 32, 0.15),
        inset 0 1px 0 rgba(241, 249, 252, 0.11);
}

.detail-page .detail-reading-section-reviews {
    background:
        radial-gradient(circle at 10% 12%, rgba(142, 202, 220, 0.1), transparent 30%),
        linear-gradient(180deg, rgba(18, 70, 92, 0.16), rgba(6, 40, 59, 0.26));
    box-shadow:
        0 24px 52px rgba(3, 20, 33, 0.1),
        inset 0 1px 0 rgba(229, 244, 249, 0.06);
}

.detail-page .review-card {
    background:
        radial-gradient(circle at 14% 10%, rgba(226, 241, 246, 0.2), transparent 30%),
        linear-gradient(145deg, rgba(211, 230, 237, 0.62), rgba(172, 204, 216, 0.44)),
        rgba(150, 191, 207, 0.34);
    border-color: rgba(143, 187, 204, 0.34);
    box-shadow:
        0 20px 40px rgba(4, 24, 38, 0.12),
        inset 0 1px 0 rgba(244, 250, 252, 0.28);
}

.detail-page .related-spots {
    background:
        radial-gradient(circle at 16% 12%, rgba(125, 190, 211, 0.12), transparent 26%),
        radial-gradient(circle at 84% 20%, rgba(111, 170, 195, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(37, 87, 108, 0.98) 0%, rgba(20, 64, 84, 0.99) 48%, rgba(10, 42, 60, 1) 100%);
}

.detail-page .related-spots::before {
    background:
        radial-gradient(circle at 50% 50%, rgba(143, 205, 224, 0.1), rgba(143, 205, 224, 0) 62%),
        linear-gradient(90deg, rgba(143, 205, 224, 0), rgba(143, 205, 224, 0.18), rgba(143, 205, 224, 0));
    opacity: 0.3;
    filter: blur(14px);
}

.detail-page .related-spots.is-sea-shift-awake::before {
    opacity: 0.48;
}

.detail-page .related-shell {
    background:
        linear-gradient(180deg, rgba(159, 202, 216, 0.08), rgba(5, 34, 50, 0.12)),
        rgba(4, 32, 48, 0.06);
    border-color: rgba(137, 188, 206, 0.14);
}

.detail-page .related-head .related-kicker {
    color: rgba(193, 224, 233, 0.76);
}

.detail-page #relatedSpots .related-head .related-title {
    color: rgba(239, 248, 251, 0.96);
    text-shadow: 0 16px 32px rgba(2, 16, 27, 0.2);
}

.detail-page .related-head .related-lead {
    color: rgba(215, 235, 241, 0.88);
}

.detail-page .detail-footer::before {
    top: -10px;
    height: 34px;
    background: linear-gradient(180deg, rgba(176, 214, 227, 0.16) 0%, rgba(176, 214, 227, 0.04) 48%, rgba(176, 214, 227, 0) 100%);
    filter: blur(10px);
    opacity: 0.38;
}

.detail-page .detail-footer-shell::before {
    background: linear-gradient(90deg, rgba(132, 187, 206, 0), rgba(132, 187, 206, 0.12), rgba(132, 187, 206, 0));
    opacity: 0.42;
}

/* Dive Brief 外壳直接回收到中深海青蓝，避免内部卡片之外仍残留浅白购买栏。 */
.detail-page .booking-sticky {
    background:
        radial-gradient(circle at 18% 10%, rgba(149, 204, 220, 0.13), transparent 34%),
        linear-gradient(145deg, rgba(42, 100, 120, 0.68), rgba(18, 64, 83, 0.72)),
        rgba(8, 42, 59, 0.66);
    border-color: rgba(129, 181, 198, 0.26);
    box-shadow:
        0 20px 42px rgba(4, 25, 39, 0.16),
        inset 0 1px 0 rgba(231, 246, 250, 0.07);
}

.detail-page .booking-sticky::before {
    opacity: 0.18;
    background:
        radial-gradient(circle at 18% 18%, rgba(207, 235, 243, 0.16), transparent 34%),
        radial-gradient(circle at 82% 18%, var(--booking-zone-accent), transparent 28%);
}

.detail-page .booking-sticky::after {
    opacity: 0.22;
    background: linear-gradient(180deg, rgba(95, 157, 181, 0), rgba(95, 157, 181, 0.3), rgba(95, 157, 181, 0.05), rgba(95, 157, 181, 0));
    box-shadow: 0 0 12px rgba(126, 187, 208, 0.08);
}

.detail-page .booking-copy {
    background:
        linear-gradient(145deg, rgba(188, 219, 229, 0.42), rgba(148, 193, 209, 0.28)),
        rgba(7, 36, 53, 0.18);
    border-color: rgba(143, 187, 203, 0.22);
    box-shadow:
        0 12px 24px rgba(4, 23, 36, 0.07),
        0 0 0 1px rgba(238, 249, 252, 0.055) inset;
}

.detail-page .booking-copy::before {
    opacity: 0.3;
    background:
        linear-gradient(90deg, var(--booking-zone-accent), rgba(235, 247, 250, 0) 34%),
        linear-gradient(180deg, rgba(235, 247, 250, 0.18), rgba(235, 247, 250, 0) 42%);
}

.detail-page .booking-sticky.is-focus-only-context[data-reading-zone="reviews"] .booking-copy:not(.is-collapsed-for-focus),
.detail-page .booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="entering-prep"] .booking-copy:not(.is-collapsed-for-focus),
.detail-page .booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="entering"] .booking-copy:not(.is-collapsed-for-focus),
.detail-page .booking-sticky[data-reading-zone="reviews"][data-focus-context-motion="settling"] .booking-copy:not(.is-collapsed-for-focus) {
    border-color: rgba(146, 190, 205, 0.24);
    background:
        linear-gradient(148deg, rgba(177, 211, 221, 0.54), rgba(132, 179, 195, 0.4)),
        rgba(8, 48, 66, 0.2);
    box-shadow:
        0 14px 28px rgba(4, 24, 38, 0.09),
        inset 0 1px 0 rgba(238, 249, 252, 0.16);
}

/* 终审修复：右侧焦点舱在套餐列表向上贴近时仍保持可点击。 */
.detail-page .booking-focus-panel {
    z-index: 32;
}

.detail-page .booking-sticky:not(.is-focus-only-context):not([data-focus-context-phase]):not([data-focus-context-motion]):not([data-focus-return-phase]) .booking-focus-panel {
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    opacity: 0;
    box-shadow: none;
    transform: translate3d(0, 18px, 0) scale(0.99);
    pointer-events: none;
}

.detail-page .booking-focus-action {
    position: relative;
    z-index: 3;
    pointer-events: auto;
}

.detail-page .itinerary-list {
    position: relative;
    z-index: 1;
}

.detail-page .booking-note {
    background:
        linear-gradient(180deg, rgba(194, 222, 231, 0.42), rgba(157, 197, 211, 0.32)),
        rgba(207, 232, 238, 0.18);
    border-color: rgba(145, 187, 202, 0.24);
    box-shadow:
        0 10px 20px rgba(4, 23, 36, 0.05),
        inset 0 1px 0 rgba(240, 249, 251, 0.18);
}

.detail-page .review-card {
    background:
        radial-gradient(circle at 14% 10%, rgba(219, 237, 243, 0.16), transparent 30%),
        linear-gradient(145deg, rgba(201, 224, 232, 0.52), rgba(160, 197, 211, 0.36)),
        rgba(132, 180, 198, 0.28);
    border-color: rgba(137, 181, 198, 0.28);
    box-shadow:
        0 18px 36px rgba(4, 24, 38, 0.11),
        inset 0 1px 0 rgba(240, 249, 251, 0.2);
}

.detail-page .review-dimension {
    background: rgba(207, 227, 235, 0.48);
    border-color: rgba(151, 190, 205, 0.42);
}

.detail-page .review-filter {
    background: rgba(188, 218, 228, 0.56);
    border-color: rgba(151, 191, 206, 0.54);
}

.detail-page .review-filter.is-active {
    background: rgba(205, 231, 238, 0.74);
    border-color: rgba(151, 202, 219, 0.72);
}

/* 档案、评论和页尾保留浮现语义，但更快进入可读稳定态。 */
.detail-page .intro-section-head {
    filter: blur(8px);
    transition:
        opacity 460ms ease,
        transform 620ms cubic-bezier(0.22, 0.72, 0.2, 1),
        filter 420ms ease;
}

.detail-page .intro-section.is-shell-visible:not(.is-visible) .intro-section-head {
    filter: blur(4px);
}

.detail-page .intro-section.is-visible .intro-section-head {
    filter: blur(0);
}

.detail-page .intro-archive-card {
    filter: blur(4px) saturate(0.98) brightness(0.99);
    transition:
        opacity 460ms ease,
        transform 680ms cubic-bezier(0.22, 0.72, 0.2, 1),
        filter 440ms ease,
        clip-path 680ms cubic-bezier(0.18, 0.78, 0.22, 1),
        box-shadow 280ms ease;
}

.detail-page .intro-archive-card.is-shell-visible {
    filter: blur(0) saturate(1) brightness(1);
}

.detail-page .intro-card-index {
    filter: blur(3px);
    transition:
        opacity 340ms ease,
        transform 480ms cubic-bezier(0.22, 0.72, 0.2, 1),
        filter 360ms ease,
        clip-path 480ms cubic-bezier(0.22, 0.72, 0.2, 1);
}

.detail-page .intro-card-title,
.detail-page .intro-card-paragraph,
.detail-page .intro-bullet-item,
.detail-page .intro-weather-card {
    filter: blur(4px);
}

.detail-page .intro-card-title {
    transition:
        opacity 400ms ease,
        transform 520ms cubic-bezier(0.22, 0.72, 0.2, 1),
        filter 380ms ease,
        clip-path 520ms cubic-bezier(0.22, 0.72, 0.2, 1);
}

.detail-page .intro-card-paragraph,
.detail-page .intro-bullet-item,
.detail-page .intro-weather-card {
    transition-duration: 420ms, 540ms, 400ms, 540ms, 220ms;
}

.detail-page .reviews-section {
    transition:
        opacity 460ms ease,
        transform 620ms cubic-bezier(0.22, 0.72, 0.2, 1);
}

.detail-page .detail-reading-section-reviews #spotReviews,
.detail-page .detail-reading-section-reviews .reviews-stage,
.detail-page .detail-reading-section-reviews .reviews-section {
    transition:
        opacity 460ms ease,
        transform 620ms cubic-bezier(0.18, 0.78, 0.22, 1),
        filter 420ms ease,
        box-shadow 460ms ease;
}

.detail-page .review-card {
    transition:
        opacity 440ms ease,
        transform 580ms cubic-bezier(0.22, 0.72, 0.2, 1),
        box-shadow 240ms ease;
}

.detail-page :is(
    .review-header,
    .review-scene,
    .review-summary,
    .review-actions,
    .review-dimension
) {
    transition:
        opacity 360ms ease,
        transform 480ms cubic-bezier(0.2, 0.82, 0.24, 1),
        filter 360ms ease;
}

.detail-page .review-scene { transition-delay: 40ms; }
.detail-page .review-summary { transition-delay: 80ms; }
.detail-page .review-actions { transition-delay: 120ms; }
.detail-page .review-dimension:nth-child(1) { transition-delay: 140ms; }
.detail-page .review-dimension:nth-child(2) { transition-delay: 180ms; }
.detail-page .review-dimension:nth-child(3) { transition-delay: 220ms; }
.detail-page .review-dimension:nth-child(4) { transition-delay: 260ms; }

.detail-page .related-head {
    filter: blur(8px);
    transition:
        opacity 460ms ease,
        transform 620ms cubic-bezier(0.18, 0.78, 0.2, 1),
        filter 420ms ease;
}

.detail-page .detail-footer-reveal {
    transition:
        opacity 460ms ease,
        transform 620ms cubic-bezier(0.22, 0.72, 0.2, 1);
}

.detail-page .detail-footer.is-harbor-awake .detail-footer-shell {
    animation: detailFooterHarborSettleCalm 760ms cubic-bezier(0.18, 0.78, 0.22, 1) both;
}

@keyframes detailFooterHarborSettleCalm {
    0% {
        transform: translate3d(0, 12px, 0);
        filter: blur(4px);
    }

    100% {
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

/* 地图完成加载或进入降级态后，隐藏层不再继续占用扫描动画。 */
.detail-page .sea-atlas-map[data-map-stage-state="ready"] .sea-atlas-loading-state :is(
    .sea-atlas-loading-scan,
    .sea-atlas-loading-ring
),
.detail-page .sea-atlas-map[data-map-stage-state="fallback"] .sea-atlas-loading-state :is(
    .sea-atlas-loading-scan,
    .sea-atlas-loading-ring
) {
    animation-play-state: paused;
}

/* 只对详情页提供克制的减弱动态模式，不改变 Sea Atlas 的功能状态。 */
@media (prefers-reduced-motion: reduce) {
    .detail-page :is(
        .hero-image,
        .hero-image-motion,
        .hero-atmosphere-layer,
        .hero-overlay,
        .sea-atlas-map-currents,
        .sea-atlas-marker.is-active,
        .sea-atlas-loading-scan,
        .sea-atlas-loading-ring,
        .sea-guide-trigger
    ) {
        animation: none !important;
    }

    .detail-page :is(
        .intro-section-head,
        .intro-archive-card,
        .intro-card-index,
        .intro-card-title,
        .intro-card-paragraph,
        .intro-bullet-item,
        .intro-weather-card,
        #spotReviews,
        .reviews-stage,
        .reviews-section,
        .review-card,
        .review-header,
        .review-scene,
        .review-summary,
        .review-actions,
        .review-dimension,
        .related-head,
        .detail-footer-reveal
    ) {
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }

    .detail-page .detail-reading-section.is-reading-current.is-reading-awakened::before,
    .detail-page .detail-reading-section.is-reading-current.is-reading-awakened::after,
    .detail-page .related-spots.is-visible .related-grid:not(.is-stage-switching) .related-stage-shell.is-entry-reveal .related-neighbor-card,
    .detail-page .detail-footer.is-harbor-awake .detail-footer-shell {
        animation: none !important;
    }
}

/* 详情页下半段最后收束：
   推荐卡仍保留浅色可读层，但不再从深海背景里跳成白卡；Sea Shift 回到同一层海水。 */
.detail-page #relatedSpots .related-feature-card {
    border-color: rgba(148, 192, 207, 0.3);
    background:
        linear-gradient(150deg, rgba(207, 226, 233, 0.82), rgba(169, 200, 211, 0.72)),
        rgba(137, 180, 196, 0.54);
    box-shadow:
        0 20px 38px rgba(3, 24, 38, 0.11),
        inset 0 1px 0 rgba(242, 249, 251, 0.28);
}

.detail-page #relatedSpots .related-feature-card:hover {
    border-color: rgba(151, 201, 217, 0.48);
    box-shadow:
        0 26px 44px rgba(3, 23, 37, 0.14),
        inset 0 1px 0 rgba(243, 250, 252, 0.34);
}

.detail-page #relatedSpots .related-neighbor-card {
    border-color: rgba(148, 190, 205, 0.28);
    background:
        linear-gradient(160deg, rgba(202, 222, 230, 0.78), rgba(163, 195, 207, 0.68)),
        rgba(133, 177, 193, 0.5);
    box-shadow:
        0 16px 30px rgba(3, 24, 38, 0.1),
        inset 0 1px 0 rgba(242, 249, 251, 0.24);
}

.detail-page #relatedSpots .related-neighbor-card:hover {
    border-color: rgba(151, 200, 216, 0.46);
    box-shadow:
        0 20px 34px rgba(3, 23, 37, 0.13),
        inset 0 1px 0 rgba(243, 250, 252, 0.3);
}

.detail-page #relatedSpots .related-stage-shell.is-stage-incoming.is-stage-active::after,
.detail-page #relatedSpots .related-stage-shell.is-stage-active::after {
    opacity: 0.07;
    filter: blur(16px);
}

.detail-page #relatedSpots .related-closing-ledge {
    background:
        linear-gradient(145deg, rgba(78, 132, 151, 0.72), rgba(40, 91, 111, 0.64)),
        rgba(10, 50, 68, 0.68);
    border-color: rgba(134, 185, 201, 0.26);
    box-shadow:
        0 14px 28px rgba(3, 23, 37, 0.11),
        inset 0 1px 0 rgba(231, 245, 249, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.detail-page #relatedSpots .related-closing-kicker {
    color: rgba(193, 224, 233, 0.76);
}

.detail-page #relatedSpots .related-closing-title {
    color: rgba(236, 246, 249, 0.96);
}

.detail-page #relatedSpots .related-closing-text {
    color: rgba(211, 232, 238, 0.88);
}

/* Sea Atlas 标题区投屏可读性收束：
   只提稳浅海玻璃上的墨蓝文字，不改变海图外壳、背景亮度或地图状态。 */
.detail-page .spot-map-head .spot-map-kicker,
.detail-page .detail-reading-section-map.is-reading-current .spot-map-head .spot-map-kicker {
    color: rgba(24, 69, 94, 0.94);
}

.detail-page .spot-map-head #spotMapSection,
.detail-page .detail-reading-section-map.is-reading-current .spot-map-head #spotMapSection {
    color: rgba(11, 50, 75, 0.99);
    text-shadow: 0 12px 26px rgba(7, 28, 43, 0.1);
}

.detail-page .spot-map-head .spot-map-lead,
.detail-page .detail-reading-section-map.is-reading-current .spot-map-head .spot-map-lead {
    color: rgba(28, 65, 87, 0.96);
}

/* Sea Atlas 标题区进入当前阅读层时，随外围海层一起轻轻浮现。
   节奏保持短促克制，避免标题区直接跳出，也不拖慢地图阅读。 */
.detail-page .detail-reading-section-map.is-reading-current.is-reading-awakened .spot-map-head {
    animation: spotMapHeadAwaken 620ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

.detail-page .detail-reading-section-map.is-reading-current.is-reading-awakened .spot-map-head::before {
    animation: spotMapHeadLineAwaken 560ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

.detail-page .detail-reading-section-map.is-reading-current.is-reading-awakened .spot-map-kicker,
.detail-page .detail-reading-section-map.is-reading-current.is-reading-awakened #spotMapSection,
.detail-page .detail-reading-section-map.is-reading-current.is-reading-awakened .spot-map-lead {
    animation: spotMapHeadCopyAwaken 520ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

.detail-page .detail-reading-section-map.is-reading-current.is-reading-awakened .spot-map-kicker {
    animation-delay: 40ms;
}

.detail-page .detail-reading-section-map.is-reading-current.is-reading-awakened #spotMapSection {
    animation-delay: 90ms;
}

.detail-page .detail-reading-section-map.is-reading-current.is-reading-awakened .spot-map-lead {
    animation-delay: 150ms;
}

@keyframes spotMapHeadAwaken {
    0% {
        opacity: 0.76;
        transform: translate3d(0, 10px, 0);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, -1px, 0);
        filter: blur(0);
    }
}

@keyframes spotMapHeadLineAwaken {
    0% {
        opacity: 0;
        transform: scaleX(0.36);
    }

    100% {
        opacity: 0.74;
        transform: scaleX(1);
    }
}

@keyframes spotMapHeadCopyAwaken {
    0% {
        opacity: 0;
        transform: translate3d(0, 7px, 0);
        filter: blur(3px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .detail-page .detail-reading-section-map.is-reading-current.is-reading-awakened .spot-map-head,
    .detail-page .detail-reading-section-map.is-reading-current.is-reading-awakened .spot-map-head::before,
    .detail-page .detail-reading-section-map.is-reading-current.is-reading-awakened .spot-map-kicker,
    .detail-page .detail-reading-section-map.is-reading-current.is-reading-awakened #spotMapSection,
    .detail-page .detail-reading-section-map.is-reading-current.is-reading-awakened .spot-map-lead {
        animation: none !important;
    }
}

/* 相邻海域进入视口时，外层舞台先轻轻浮稳。
   内部标题和卡片继续沿用原有错峰显形，避免整段内容像静态模块突然出现。 */
.detail-page .related-spots.is-visible.is-sea-shift-awake .related-shell {
    animation: relatedShellAwaken 720ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

@keyframes relatedShellAwaken {
    0% {
        opacity: 0.72;
        transform: translate3d(0, 18px, 0);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .detail-page .related-spots.is-visible.is-sea-shift-awake .related-shell {
        animation: none !important;
    }
}