/* ============================================
   行程页样式 - trip.css
   ============================================
   作用：
   1. 负责行程页首屏、行程控制台、摘要区、已收进行程和准备系统的完整视觉结构。
   2. 把行程页做成更深、更静、更私密的规划空间，而不是普通预订表单页。
   3. 配合行程脚本承接浮层、摘要联动、卡片状态和移动端收束。
   阅读顺序：
   1. 首屏
   2. 行程控制台与摘要区
   3. 已收进行程
   4. 准备系统与响应式
*/

/* 文件导读：行程页的样式重点不是“字段长什么样”，而是整块控制台如何维持深海、安静和可持续操作的节奏。 */
/* 行程页整体背景与页面层级 */
.trip-page {
    padding-top: 70px;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% -8%, rgba(205, 236, 255, 0.2) 0%, rgba(205, 236, 255, 0) 26%),
        linear-gradient(180deg, #0f3754 0%, #123a56 24%, #0f2f47 54%, #0a2133 100%);
}

/* page-stage：行程页主舞台容器，负责承载整个页面的海层过渡。 */
.trip-page .page-stage {
    min-height: 100vh;
}

/* 首屏外层海域：这是行程页进入“规划层”后的第一块深海背景，情绪比首页更深、更静。 */
/* 这一层负责给首屏上半部分铺出更沉静的深海氛围，而不是普通页面头图。 */
.trip-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 8vw, 112px) var(--spacing-lg) clamp(56px, 7vw, 92px);
    /* 这里用 clamp(最小值、跟随视口变化的理想值、最大值)。
       作用是：大屏时保留更舒展的上下空间，小屏时又不会把首屏压得过高。 */
    background:
        radial-gradient(circle at 16% 8%, rgba(204, 233, 247, 0.18) 0%, rgba(204, 233, 247, 0) 24%),
        radial-gradient(circle at 82% 14%, rgba(97, 153, 186, 0.12) 0%, rgba(97, 153, 186, 0) 24%),
        linear-gradient(180deg, rgba(14, 52, 76, 0.96) 0%, rgba(10, 36, 54, 0.98) 38%, rgba(8, 27, 42, 1) 100%);
}

/* 首屏 顶层流光：纯装饰层，用很慢的亮带漂移去模拟海流，不承接任何点击。 */
.trip-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 22%, rgba(211, 236, 250, 0.16) 0%, rgba(211, 236, 250, 0) 18%),
        radial-gradient(circle at 74% 34%, rgba(112, 182, 214, 0.1) 0%, rgba(112, 182, 214, 0) 20%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 28%, rgba(143, 210, 238, 0.06) 54%, rgba(255, 255, 255, 0) 82%);
    opacity: 0.8; /* 保留存在感，但不盖过正文和行程控制台。 */
    mix-blend-mode: screen; /* 用 screen 混合模式把亮带融进背景，保住海流发光感。 */
    animation: trip-hero-current 24s ease-in-out infinite alternate; /* 慢速漂移，保持“海在呼吸”的感。*/
    pointer-events: none; /* 纯装饰层，避免挡住按钮和链接点击 */
}

/* 首屏 底部雾层：用模糊渐变把首屏自然接到下方内容，而不是硬切到下一段。 */
.trip-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -46px;
    height: 138px;
    background: linear-gradient(180deg, rgba(12, 45, 67, 0) 0%, rgba(14, 47, 69, 0.72) 44%, rgba(18, 67, 96, 0.94) 100%);
    filter: blur(28px);
    pointer-events: none;
}

/* 首屏内容限宽壳层：把大屏内容收在可控宽度里，避免文字和行程控制台 被拉得过散。 */
.trip-hero-shell {
    position: relative;
    z-index: 1;
    max-width: 1380px;
    margin: 0 auto;
}

/* 首屏 内部主舞台。
   这是文案区和行程控制台共同所在的玻璃舱。
   这里既要有雾感，也要足够稳，才能让“安排行程”像在海里慢慢展开。 */
.trip-hero-stage {
    position: relative;
    overflow: hidden;
    padding: clamp(30px, 4vw, 50px) clamp(26px, 4.6vw, 58px); /* 跟随屏幕变化调节内边距，小屏不拥挤，大屏不空。 */
    border-radius: 38px;
    background:
        radial-gradient(circle at 16% 0%, rgba(212, 239, 250, 0.11) 0%, rgba(212, 239, 250, 0) 30%),
        radial-gradient(circle at 86% 10%, rgba(101, 176, 207, 0.08) 0%, rgba(101, 176, 207, 0) 28%),
        linear-gradient(180deg, rgba(9, 36, 55, 0.38) 0%, rgba(5, 20, 34, 0.58) 100%),
        rgba(4, 17, 29, 0.34);
    border: 1px solid rgba(209, 232, 244, 0.08);
    box-shadow:
        0 34px 74px rgba(3, 14, 23, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -28px 64px rgba(2, 12, 22, 0.2);
    backdrop-filter: blur(16px) saturate(118%); /* 背景内容被轻柔虚化，强调玻璃舱感 */
    -webkit-backdrop-filter: blur(16px) saturate(118%);
    opacity: 0; /* 初始先隐藏，等待入场动画把整块玻璃舱慢慢托起来。 */
    transform: translate3d(0, 28px, 0); /* 先略微下沉，入场时会有“从海下抬起”的感。*/
    filter: blur(20px);
    animation: trip-hero-stage-rise 1100ms cubic-bezier(0.16, 0.82, 0.2, 1) forwards, trip-hero-breath 12s ease-in-out 1.2s infinite;
}

/* 首屏 主舞台内层装饰：
   before 提供柔和高光，after 提供一层更克制的内边框。
   让整块玻璃舱看起来更有厚度，而不是一张平面卡片。 */
.trip-hero-stage::before,
.trip-hero-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.trip-hero-stage::before {
    background:
        radial-gradient(circle at 20% 18%, rgba(225, 244, 252, 0.09) 0%, rgba(225, 244, 252, 0) 24%),
        radial-gradient(circle at 80% 16%, rgba(129, 200, 230, 0.08) 0%, rgba(129, 200, 230, 0) 18%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 42%);
    opacity: 0.72;
}

.trip-hero-stage::after {
    inset: clamp(18px, 2.6vw, 34px);
    background:
        linear-gradient(180deg, rgba(217, 240, 250, 0), rgba(217, 240, 250, 0.16), rgba(217, 240, 250, 0)) left top / 1px 100% no-repeat,
        repeating-linear-gradient(180deg, rgba(217, 240, 250, 0.12) 0 1px, transparent 1px 54px) left top / 34px 100% no-repeat;
    opacity: 0.62;
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 18%, rgba(0, 0, 0, 0.86) 78%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 18%, rgba(0, 0, 0, 0.86) 78%, transparent 100%);
}

/* 首屏 文案区：
   和右下方的行程控制台分组摆放。
   这里控制文字本身的最大阅读宽度，避免长句子拖得太长。 */
.trip-hero-copy {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(260px, 0.62fr);
    grid-template-areas:
        "kicker current"
        "title current"
        "subtitle current"
        "actions current";
    column-gap: clamp(30px, 5vw, 78px);
    align-items: end;
    max-width: none;
    margin-bottom: 32px;
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.992);
    filter: blur(16px);
    animation: trip-hero-copy-tide-in 980ms cubic-bezier(0.18, 0.78, 0.16, 1) 80ms forwards;
    transform-origin: 50% 58%;
}

/* 首屏 与分区通用 kicker：这些英文小标题负责建立“档案标签感”，帮助层级更清楚。 */
.trip-hero-kicker,
.trip-section-kicker {
    margin: 0 0 12px;
    font-size: 0.72rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(196, 223, 240, 0.62);
}

/* 首屏 主标题：
   标题字号用 clamp 跟着屏幕变化，避免手机太大、桌面又显得偏小。 */
.trip-hero-title {
    margin: 0 0 18px;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(2.2rem, 4.8vw, 4rem);
    font-weight: 600;
    line-height: 1.16;
    color: #f4fbff;
    text-shadow: 0 10px 24px rgba(4, 14, 24, 0.24);
}

/* 首屏 副文案：
   这里控制正文说明的阅读宽度和行距，让长句子仍然有呼吸感。 */
.trip-hero-subtitle {
    margin: 0 0 26px;
    max-width: 760px;
    font-size: 1.02rem;
    line-height: 1.9;
    color: rgba(219, 234, 243, 0.82);
}

/* 首屏 动作区：
   两个入口并排放置，形成“继续下潜 / 回到上一层”的并行选择。 */
.trip-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* trip 页里的返回首页是链接按钮，需要压住全局 a:hover 的默认蓝色和下划线。 */
.trip-hero-actions .sea-action,
.trip-hero-actions .sea-action:hover,
.trip-hero-actions .sea-action:focus-visible,
.trip-hero-actions .sea-action:active,
.trip-hero-actions .sea-action:visited {
    text-decoration: none;
}

.trip-hero-actions .sea-action-secondary,
.trip-hero-actions .sea-action-secondary:hover,
.trip-hero-actions .sea-action-secondary:focus-visible,
.trip-hero-actions .sea-action-secondary:active,
.trip-hero-actions .sea-action-secondary:visited {
    color: #eef7fd;
}

/* 首屏 文案分层入场：让 kicker、标题、副文案和按钮依次显现，而不是一次全部出现。 */
.trip-hero-kicker,
.trip-hero-title,
.trip-hero-subtitle,
.trip-hero-actions {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    filter: blur(8px);
    animation: trip-hero-copy-current-in 780ms cubic-bezier(0.18, 0.78, 0.16, 1) forwards;
}

.trip-hero-kicker {
    animation-delay: 180ms;
    grid-area: kicker;
}

.trip-hero-title {
    animation-delay: 260ms;
    grid-area: title;
}

.trip-hero-subtitle {
    animation-delay: 380ms;
    grid-area: subtitle;
}

.trip-hero-actions {
    animation-delay: 520ms;
    grid-area: actions;
}

body.trip-page.trip-depth-entry-waiting :is(
    .trip-hero-stage,
    .trip-hero-copy,
    .trip-hero-kicker,
    .trip-hero-title,
    .trip-hero-subtitle,
    .trip-hero-actions,
    .trip-hero-current,
    .planner-capsule,
    .planner-desk-tide-flow,
    .planner-field,
    .planner-submit-btn
) {
    animation-play-state: paused !important;
    transition-delay: 0ms !important;
    transition-duration: 0ms !important;
}

body.trip-page.page-transition-active .page-stage * {
    animation-play-state: paused !important;
}

/* 行程控制台主容器：
   这里不是普通搜索栏，而是 行程页核心的行程安排面板。 */
.trip-page-planner {
    position: relative;
    z-index: 2;
    overflow: visible; /* 允许后续浮层视觉上超出舱体，不会被父层裁切。 */
    padding-top: 0;
    background: transparent;
}

/* 去掉继承下来的 ::after 装饰，避免行程控制台重复叠一层无关光效。 */
.trip-page-planner::after {
    content: none;
}

/* 行程控制台双栏结构：左侧是摘要回读，右侧是可操作字段；用 grid areas 明确空间角色。 */
.trip-page-planner .trip-planner-shell {
    position: relative;
    z-index: 2;
    overflow: visible; /* 摘要和字段卡允许阴影、浮层超出自身盒子。 */
    display: grid;
    grid-template-areas:
        "confirmed"
        "search"
        "summary";
    grid-template-columns: minmax(0, 1fr);
    /* 行程页先读当前行程，再看已经收进来的海，最后继续整理控制台。 */
    gap: 28px;
    align-items: start;
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 旧版文案区占位：
   这里保留选择器但直接隐藏，避免影响当前双栏行程控制台结构。 */
.trip-page-planner .trip-planner-copy {
    display: none;
}

/* 行程控制台：
   这里用 grid 把“海域 / 日期 / 人数 / 提交动作”排成一块有层次的操作台。
   不直接用普通表单纵排，是为了保留海图式的空间感。 */
.trip-page-planner .trip-search-bar {
    grid-area: search;
    align-self: stretch;
    position: relative;
    z-index: 4;
    overflow: visible; /* 允许 hover 阴影和选项浮层超出控制台外框，不被裁切。 */
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
    /* 海域字段信息量最大，所以左列略宽；日期和人数放右列，更像次级决策。 */
    grid-template-areas:
        "head head"
        "tide tide"
        "spot date"
        "spot people"
        "action action";
    gap: 18px;
    padding: 22px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 18% 0%, rgba(196, 226, 244, 0.16) 0%, rgba(196, 226, 244, 0) 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(166, 201, 222, 0.08) 100%),
        rgba(10, 33, 49, 0.56);
    border: 1px solid rgba(205, 229, 242, 0.14);
    box-shadow:
        0 28px 48px rgba(4, 16, 25, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px) saturate(138%); /* 轻雾化背景并补一点饱和度，让控制台层次更像深海玻璃。 */
    -webkit-backdrop-filter: blur(18px) saturate(138%);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

/* Planner 控制台改为“进入视口时再从更高一层缓慢落下”，
   这样用户真正滑到这一层时，才会看到完整的下潜入场。 */
.trip-page-planner .trip-search-bar.trip-reveal-block {
    opacity: 0;
    transform: translate3d(0, -42px, 0) scale(0.986);
    filter: blur(20px);
    transition:
        opacity 820ms cubic-bezier(0.16, 0.82, 0.2, 1),
        transform 1080ms cubic-bezier(0.16, 0.82, 0.2, 1),
        filter 1080ms ease,
        box-shadow 360ms ease,
        border-color 360ms ease;
}

.trip-page-planner .trip-search-bar.trip-reveal-block.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.trip-page-planner .planner-capsule.trip-reveal-block {
    opacity: 1;
    transform: translate3d(0, -34px, 0) scale(0.986);
    filter: blur(0);
}

.trip-page-planner .planner-capsule.trip-reveal-block.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.trip-page-planner .planner-capsule.trip-reveal-block .planner-console-head {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

.trip-page-planner .planner-capsule.trip-reveal-block:not(.is-visible)
    :is(.planner-desk-tide-flow, .planner-field, .planner-submit-btn) {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.992);
    filter: blur(16px);
}

.trip-page-planner .planner-capsule.trip-reveal-block.is-visible
    :is(.planner-desk-tide-flow, .planner-field, .planner-submit-btn) {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.trip-page-planner .planner-capsule.trip-reveal-block
    :is(.planner-desk-tide-flow, .planner-field, .planner-submit-btn) {
    transition:
        opacity 720ms cubic-bezier(0.16, 0.82, 0.2, 1),
        transform 920ms cubic-bezier(0.16, 0.82, 0.2, 1),
        filter 920ms ease,
        box-shadow 320ms ease,
        border-color 320ms ease,
        background 320ms ease;
}

.trip-page-planner .planner-capsule.trip-reveal-block.is-visible .planner-desk-tide-flow {
    transition-delay: 180ms;
}

.trip-page-planner .planner-capsule.trip-reveal-block.is-visible .planner-field[data-planner-field="spot"] {
    transition-delay: 300ms;
}

.trip-page-planner .planner-capsule.trip-reveal-block.is-visible .planner-field[data-planner-field="date"] {
    transition-delay: 400ms;
}

.trip-page-planner .planner-capsule.trip-reveal-block.is-visible .planner-field[data-planner-field="people"] {
    transition-delay: 500ms;
}

.trip-page-planner .planner-capsule.trip-reveal-block.is-visible .planner-submit-btn {
    transition-delay: 610ms;
}

.trip-page-planner .planner-summary-dock.trip-summary-reveal {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(0.988);
    filter: blur(18px);
    transition:
        opacity 760ms cubic-bezier(0.16, 0.82, 0.2, 1),
        transform 960ms cubic-bezier(0.16, 0.82, 0.2, 1),
        filter 960ms ease,
        box-shadow 320ms ease,
        border-color 320ms ease,
        background 320ms ease;
}

.trip-page-planner .planner-summary-dock.trip-summary-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.trip-page-planner .planner-summary-dock.trip-summary-reveal
    :is(.planner-summary-head, .planner-summary-intro, .planner-summary-stage-note, .planner-summary-meter, .planner-summary-dock-body) {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    filter: blur(12px);
    transition:
        opacity 620ms cubic-bezier(0.16, 0.82, 0.2, 1),
        transform 780ms cubic-bezier(0.16, 0.82, 0.2, 1),
        filter 780ms ease;
}

.trip-page-planner .planner-summary-dock.trip-summary-reveal.is-visible
    :is(.planner-summary-head, .planner-summary-intro, .planner-summary-stage-note, .planner-summary-meter, .planner-summary-dock-body) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

.trip-page-planner .planner-summary-dock.trip-summary-reveal.is-visible .planner-summary-head {
    transition-delay: 130ms;
}

.trip-page-planner .planner-summary-dock.trip-summary-reveal.is-visible .planner-summary-intro {
    transition-delay: 210ms;
}

.trip-page-planner .planner-summary-dock.trip-summary-reveal.is-visible .planner-summary-stage-note {
    transition-delay: 290ms;
}

.trip-page-planner .planner-summary-dock.trip-summary-reveal.is-visible .planner-summary-meter {
    transition-delay: 370ms;
}

.trip-page-planner .planner-summary-dock.trip-summary-reveal.is-visible .planner-summary-dock-body {
    transition-delay: 470ms;
}

.trip-brief-deck.trip-brief-reveal {
    opacity: 0;
    transform: translate3d(0, 36px, 0) scale(0.988);
    filter: blur(18px);
    transition:
        opacity 780ms cubic-bezier(0.16, 0.82, 0.2, 1),
        transform 980ms cubic-bezier(0.16, 0.82, 0.2, 1),
        filter 980ms ease;
}

.trip-brief-deck.trip-brief-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.trip-brief-deck.trip-brief-reveal
    :is(.trip-brief-order, .confirmed-bookings-stage, .sea-brief-stage) {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.992);
    filter: blur(14px);
    transition:
        opacity 680ms cubic-bezier(0.16, 0.82, 0.2, 1),
        transform 860ms cubic-bezier(0.16, 0.82, 0.2, 1),
        filter 860ms ease,
        box-shadow 320ms ease,
        border-color 320ms ease;
}

.trip-brief-deck.trip-brief-reveal.is-visible
    :is(.trip-brief-order, .confirmed-bookings-stage, .sea-brief-stage) {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.trip-brief-deck.trip-brief-reveal.is-visible .trip-brief-order {
    transition-delay: 120ms;
}

.trip-brief-deck.trip-brief-reveal.is-visible .confirmed-bookings-stage {
    transition-delay: 260ms;
}

.trip-brief-deck.trip-brief-reveal.is-visible .sea-brief-stage {
    transition-delay: 380ms;
}

/* 规划控制台头部：grid 布局承载标题和简介，max-width: 40rem 限制阅读行宽，
   入场动效通过 opacity/transform/filter 过渡实现"从模糊到清晰"的浮现。 */
.planner-console-head {
    grid-area: head;
    display: grid;
    gap: 10px;
    padding: 4px 4px 8px;
    max-width: 40rem;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    animation: none;
    transition:
        opacity 620ms cubic-bezier(0.16, 0.82, 0.2, 1),
        transform 860ms cubic-bezier(0.16, 0.82, 0.2, 1),
        filter 860ms ease;
}

/* 预订切换器容器：默认隐藏，只在 Planner Desk 有多条预订记录时由 JS 打开。
   内部包含 header（标签+提示）+ track（水平滚动芯片列表）。 */
.planner-booking-switcher {
    grid-area: switcher;
    display: none;
    gap: 6px;
    padding: 0;
}

/* 切换器头部：标签在左、提示在右，基线对齐。 */
.planner-booking-switcher-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

/* 切换器标签：小号全大写，宽字距，像设备面板上的功能标识。 */
.planner-booking-switcher-kicker {
    margin: 0;
    font-size: 0.62rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(194, 221, 236, 0.62);
}

/* 切换器提示文字：略大的正文号，说明当前预订数量或状态。 */
.planner-booking-switcher-note {
    margin: 0;
    font-size: 0.84rem;
    color: rgba(209, 229, 243, 0.7);
}

/* 芯片滚动轨道：flex 横向排列，scroll-snap 吸附让芯片停在中间。 */
.planner-booking-switcher-track {
    display: flex;
    gap: 10px;
    padding-bottom: 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

/* 仅一条预订时关闭滚动，芯片居中。 */
.planner-booking-switcher-track.is-single {
    overflow: hidden;
}

.planner-booking-switcher-track::-webkit-scrollbar {
    height: 6px;
}

.planner-booking-switcher-track::-webkit-scrollbar-thumb {
    background: rgba(193, 221, 236, 0.38);
    border-radius: 999px;
}

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

/* 预订芯片卡片：scroll-snap 居中吸附，两列 grid（左侧圆点 + 右侧文字）。
   暗底玻璃质感，hover 时边框提亮并上浮。 */
.planner-booking-switcher-chip {
    scroll-snap-align: center;
    flex: 0 0 auto;
    min-width: 160px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(194, 221, 236, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(6, 20, 32, 0.85)),
        rgba(6, 21, 32, 0.8);
    box-shadow: inset 0 0 0 1px rgba(162, 199, 219, 0.04);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px;
    color: #f7fbff;
    transition: border-color 280ms ease, box-shadow 280ms ease, transform 280ms ease;
}

.planner-booking-switcher-chip:hover,
.planner-booking-switcher-chip:focus-visible {
    border-color: rgba(204, 236, 255, 0.4);
    transform: translateY(-2px);
}

/* 激活态芯片：更强的边框、外投影、径向暖光叠加，表示当前正在查看的预订。 */
.planner-booking-switcher-chip-active {
    border-color: rgba(196, 230, 251, 0.6);
    box-shadow:
        0 12px 26px rgba(5, 16, 26, 0.45),
        inset 0 0 0 1px rgba(166, 214, 239, 0.3);
    background:
        radial-gradient(circle at 20% 30%, rgba(210, 238, 251, 0.3), rgba(210, 238, 251, 0)),
        linear-gradient(180deg, rgba(29, 76, 122, 0.72), rgba(7, 20, 32, 0.95));
}

/* 芯片左侧发光圆点：跨三行，带青色投影，像状态指示灯。 */
.planner-booking-switcher-chip-dot {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    margin-top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 255, 255, 0.92), rgba(126, 207, 235, 0.9));
    box-shadow: 0 0 12px rgba(129, 203, 239, 0.5);
}

/* 芯片右侧文字列统一占第 2 列。 */
.planner-booking-switcher-chip-title,
.planner-booking-switcher-chip-package,
.planner-booking-switcher-chip-status {
    grid-column: 2;
}

/* 芯片标题：纯白高亮，600 字重。 */
.planner-booking-switcher-chip-title {
    font-size: 0.98rem;
    font-weight: 600;
    color: #f6fdff;
}

/* 芯片套餐名：小号全大写，宽字距。 */
.planner-booking-switcher-chip-package {
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(200, 224, 238, 0.72);
}

.planner-booking-switcher-chip-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    color: rgba(192, 214, 226, 0.68);
}

.planner-booking-switcher-chip-status-text {
    white-space: nowrap;
}

.planner-booking-switcher-status-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.planner-booking-switcher-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(183, 206, 219, 0.32);
    box-shadow: inset 0 0 0 1px rgba(226, 238, 246, 0.08);
}

.planner-booking-switcher-status-dot.is-ready {
    background: radial-gradient(circle, rgba(236, 252, 255, 0.96), rgba(119, 206, 236, 0.88));
    box-shadow:
        0 0 10px rgba(126, 205, 233, 0.42),
        0 0 0 1px rgba(214, 235, 245, 0.14);
}

/* 潮汐流三步指示器：三列 grid 排列"选潜点 → 定日期 → 定人数"三个节点，
   底部一条横穿的微光潮线串联三步。 */
.planner-desk-tide-flow {
    grid-area: tide;
    position: relative;
    margin-top: 4px;
    padding: 0 clamp(8px, 1.6vw, 16px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 12px;
}

/* 潮线：绝对定位横穿三个节点下方，中间亮两端暗，模拟一道海流。 */
.planner-desk-tide-line {
    position: absolute;
    inset: auto 20px 13px 20px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(199, 231, 250, 0.36), rgba(255, 255, 255, 0.04));
    border-radius: 999px;
    filter: blur(0.5px);
    z-index: 0;
}

/* 潮汐节点：胶囊形标签，::after 伪元素画下方小圆点表示当前位置。 */
.planner-desk-tide-node {
    position: relative;
    z-index: 1;
    width: max-content;
    min-width: 36px;
    height: 28px;
    border-radius: 999px;
    border: 0;
    background: rgba(8, 28, 42, 0.34);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(225, 244, 255, 0.72);
    box-shadow: none;
}

/* 节点下方圆点指示器：绝对定位在节点正下方 4px。 */
.planner-desk-tide-node::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    border: 0;
    background: rgba(208, 236, 248, 0.54);
    opacity: 0.7;
    transform: translateX(-50%);
}

/* 已绑定预订的字段：边框微亮 + 暗底渐变标识不可再编辑。 */
.planner-field.is-booking-bound {
    border-color: rgba(209, 234, 246, 0.14);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(9, 29, 45, 0.88)),
        rgba(10, 30, 44, 0.66);
}

.planner-field.is-booking-bound .planner-field-trigger {
    cursor: default;
}

/* 控制台标签：全大写、宽字距，作为标题区上方的小标识。 */
.planner-console-kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(194, 221, 236, 0.52);
}

/* 控制台标题：衬线字体、流体字号，text-wrap: balance 让多行标题均匀分布。 */
.planner-console-title {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.42rem, 2.1vw, 1.9rem);
    line-height: 1.32;
    color: #f2fbff;
    text-wrap: balance;
}

/* 控制台简介：38ch 行宽限制 + 高行高，适合中文段落。 */
.planner-console-intro {
    margin: 0;
    max-width: 38ch;
    font-size: 0.92rem;
    line-height: 1.82;
    color: rgba(210, 226, 237, 0.7);
}

/* Planner 浮层总承载层：统一挂到页面上层，避免被局部布局、overflow 或 transform 裁切。 */
.planner-floating-layer {
    position: fixed;
    inset: 0;
    z-index: 120;
    pointer-events: none; /* 默认不拦截页面点击，只有真正打开的浮层自己接管交互。 */
    opacity: 0;
    transition: opacity 320ms ease;
}

.planner-floating-layer::before,
.planner-floating-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 360ms ease, transform 560ms cubic-bezier(0.16, 0.82, 0.2, 1), filter 560ms ease;
}

.planner-floating-layer::before {
    background:
        radial-gradient(circle at 50% 26%, rgba(193, 230, 246, 0.18), rgba(193, 230, 246, 0) 30%),
        linear-gradient(180deg, rgba(4, 16, 26, 0.12), rgba(4, 16, 26, 0.42));
    filter: blur(20px);
}

.planner-floating-layer::after {
    inset: 10% 12% auto;
    height: min(54vh, 440px);
    border-radius: 34px;
    background:
        radial-gradient(circle at 50% 20%, rgba(235, 247, 252, 0.12), rgba(235, 247, 252, 0) 42%),
        linear-gradient(180deg, rgba(6, 22, 34, 0.28), rgba(6, 22, 34, 0));
    transform: translate3d(0, 18px, 0) scale(0.98);
    filter: blur(28px);
}

.planner-floating-layer.is-active {
    opacity: 1;
}

.planner-floating-layer.is-active::before,
.planner-floating-layer.is-active::after {
    opacity: 1;
}

.planner-floating-layer.is-active::after {
    transform: translate3d(0, 0, 0) scale(1);
}

body.trip-planner-submerge-active .trip-page-planner .trip-search-bar {
    box-shadow:
        0 34px 62px rgba(2, 12, 20, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.trip-planner-submerge-active .planner-console-head {
    opacity: 0.92;
    transform: translate3d(0, -4px, 0);
}

body.trip-planner-submerge-active .planner-field:not(.is-open) {
    opacity: 0.76;
    filter: saturate(0.84);
    transform: translate3d(0, 8px, 0) scale(0.985);
}

body.trip-planner-submerge-active .planner-field.is-submerging {
    transform: translate3d(0, -8px, 0) scale(1.018);
    border-color: rgba(214, 238, 248, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 28px 48px rgba(4, 15, 24, 0.24),
        0 0 34px rgba(118, 191, 222, 0.12);
}

body.trip-planner-submerge-active .planner-field.is-submerging::after {
    opacity: 1;
    filter: blur(8px);
    transform: translate3d(0, 2px, 0) scale(1.02);
}

/* 设置行程控制台字段舱的玻璃外观、边框和交互层次。 */
.planner-field {
    position: relative;
    min-height: 132px;
    padding: 18px 18px 16px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(136, 174, 196, 0.08) 100%),
        rgba(9, 28, 43, 0.48);
    border: 1px solid rgba(205, 229, 242, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 18px 30px rgba(4, 15, 24, 0.16);
    transition:
        transform 340ms ease,
        border-color 340ms ease,
        box-shadow 340ms ease,
        background-color 340ms ease;
    overflow: visible;
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    filter: blur(12px);
    animation: planner-console-rise 760ms cubic-bezier(0.18, 0.8, 0.22, 1) forwards;
}

.planner-field-select[data-planner-field="spot"] {
    grid-area: spot;
    min-height: 282px;
    padding: 22px 20px 20px;
    animation-delay: 980ms;
}

.planner-field-date {
    grid-area: date;
    animation-delay: 1060ms;
}

.planner-field-select[data-planner-field="people"] {
    grid-area: people;
    animation-delay: 1140ms;
}

/* 给行程控制台字段舱加一层很轻的潮光扫过层，增强玻璃表面的流动感。 */
.planner-field::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 34%, rgba(145, 220, 255, 0.08) 68%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transform: translateX(-18%);
    transition: opacity 340ms ease, transform 480ms ease;
    pointer-events: none;
}

.planner-field::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 18% 14%, rgba(222, 239, 247, 0.14) 0%, rgba(222, 239, 247, 0) 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    opacity: 0;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: none;
    transition:
        opacity 360ms ease,
        filter 620ms ease,
        transform 620ms ease,
        backdrop-filter 620ms ease,
        -webkit-backdrop-filter 620ms ease;
}

/* 字段 hover 或展开时轻微上浮，并增强边缘高光，像这一格海流被选中。 */
.planner-field:not(.is-locked):hover,
.planner-field.is-open,
.planner-field.is-active {
    z-index: 18;
    transform: translateY(-3px);
    border-color: rgba(214, 238, 248, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 24px 40px rgba(4, 15, 24, 0.22),
        0 0 24px rgba(118, 191, 222, 0.08);
}

/* 字段 hover 或展开时显示扫光，让当前操作区域比旁边更清晰一点。 */
.planner-field:not(.is-locked):hover::before,
.planner-field.is-open::before,
.planner-field.is-active::before {
    opacity: 1;
    transform: translateX(0);
}

.planner-field.is-locked {
    border-color: rgba(205, 229, 242, 0.06);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(120, 160, 184, 0.04) 100%),
        rgba(9, 28, 43, 0.36);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 14px 24px rgba(4, 15, 24, 0.08);
}

.planner-field.is-locked::after {
    opacity: 0.86;
    animation: planner-field-mist-breath 7.6s ease-in-out infinite;
}

.planner-field.is-locked .planner-field-trigger {
    filter: saturate(0.76);
}

.planner-field.is-locked .planner-field-label {
    color: rgba(190, 214, 226, 0.44);
}

.planner-field.is-locked .planner-field-value {
    color: rgba(221, 234, 242, 0.72);
}

.planner-field.is-locked .planner-field-note {
    color: rgba(198, 216, 227, 0.5);
}

.planner-field-trigger {
    transition: filter 620ms ease, opacity 420ms ease, transform 620ms ease;
}

.planner-field-label,
.planner-field-value,
.planner-field-note,
.planner-field[data-planner-step] .planner-field-label::before {
    transition:
        color 520ms ease,
        opacity 520ms ease,
        background-color 520ms ease,
        border-color 520ms ease,
        transform 620ms ease,
        filter 620ms ease;
}

/* 日期字段在未解锁时单独加重一点海雾感，让“下一层还没展开”更明显。 */
.planner-field-date.is-locked {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(120, 160, 184, 0.07) 100%),
        rgba(9, 28, 43, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 16px 28px rgba(4, 15, 24, 0.1);
}

.planner-field-date.is-locked::after {
    opacity: 0.98;
    filter: blur(10px);
    backdrop-filter: blur(6px) saturate(88%);
    -webkit-backdrop-filter: blur(6px) saturate(88%);
    animation-duration: 6.8s;
}

.planner-field-date.is-locked .planner-field-trigger {
    filter: saturate(0.68) brightness(0.9);
}

.planner-field-date.is-locked .planner-field-value {
    color: rgba(221, 234, 242, 0.68);
}

.planner-field-date.is-locked .planner-field-note {
    color: rgba(198, 216, 227, 0.44);
}

/* 同行人数在未解锁时沿用同一层海雾逻辑，形成连续下潜的层级关系。 */
.planner-field-select[data-planner-field="people"].is-locked {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(120, 160, 184, 0.075) 100%),
        rgba(9, 28, 43, 0.44);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 16px 28px rgba(4, 15, 24, 0.1);
}

.planner-field-select[data-planner-field="people"].is-locked::after {
    opacity: 0.98;
    filter: blur(10px);
    backdrop-filter: blur(6px) saturate(84%);
    -webkit-backdrop-filter: blur(6px) saturate(84%);
    animation-duration: 6.6s;
}

.planner-field-select[data-planner-field="people"].is-locked .planner-field-trigger {
    filter: saturate(0.66) brightness(0.88);
}

.planner-field-select[data-planner-field="people"].is-locked .planner-field-value {
    color: rgba(221, 234, 242, 0.66);
}

.planner-field-select[data-planner-field="people"].is-locked .planner-field-note {
    color: rgba(198, 216, 227, 0.42);
}

/* 解封时保留一层短暂残雾，再慢慢把视野让出来，避免突然从遮罩切到清晰。 */
.planner-field.is-unlocking {
    overflow: hidden;
}

.planner-field.is-unlocking::before {
    opacity: 0.86;
    transform: translateX(0);
    transition-duration: 620ms;
}

.planner-field.is-unlocking::after {
    opacity: 0.92;
    filter: blur(9px);
    transform: translate3d(0, 0, 0) scale(1.015);
    backdrop-filter: blur(5px) saturate(90%);
    -webkit-backdrop-filter: blur(5px) saturate(90%);
    animation: planner-field-mist-release 920ms cubic-bezier(0.16, 0.84, 0.24, 1) forwards;
}

.planner-field.is-unlocking .planner-field-trigger {
    animation: planner-field-copy-release 880ms cubic-bezier(0.16, 0.84, 0.24, 1) forwards;
}

.planner-field.is-unlocking .planner-field-label,
.planner-field.is-unlocking .planner-field-value,
.planner-field.is-unlocking .planner-field-note,
.planner-field.is-unlocking[data-planner-step] .planner-field-label::before {
    animation: planner-field-copy-fade-in 820ms cubic-bezier(0.16, 0.84, 0.24, 1) forwards;
}

/* 字段标题标签：告诉用户这一格是在整理海域、时间还是同行。 */
.planner-field-label {
    margin: 0 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(194, 221, 236, 0.58);
}

.planner-field[data-planner-step] .planner-field-label::before {
    content: attr(data-planner-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(205, 229, 242, 0.08);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: rgba(208, 228, 239, 0.52);
}

.planner-field.is-locked[data-planner-step] .planner-field-label::before {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(205, 229, 242, 0.05);
    color: rgba(189, 211, 223, 0.42);
}

/* 将字段主体做成无默认按钮样式的深海信息展示面 */
.planner-field-trigger {
    width: 100%;
    min-height: 86px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    text-align: left;
}

.planner-field-select[data-planner-field="spot"] .planner-field-trigger {
    min-height: 198px;
    justify-content: flex-end;
}

.planner-field-select[data-planner-field="spot"] .planner-field-value {
    font-size: 1.32rem;
    line-height: 1.5;
    max-width: 18ch;
}

.planner-field-select[data-planner-field="spot"] .planner-field-note {
    max-width: 34ch;
}

/* 字段主值：显示当前选择结果，或在空状态下承担主要阅读内容。 */
.planner-field-value {
    display: block;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: 1.08rem;
    line-height: 1.45;
    color: #f4fbff;
}

/* 字段辅助说明：替代普通 placeholder，让空状态也有盐憩自己的语气。 */
.planner-field-note {
    display: block;
    max-width: 28ch;
    font-size: 0.84rem;
    line-height: 1.7;
    color: rgba(210, 226, 237, 0.58);
}

/* 原生日期输入只负责调起能力，不直接参与视觉呈现，真正展示的是自定义字段。 */
.planner-date-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Planner 选项浮层：
   这组样式控制海域 / 同行人数面板在桌面端的尺寸、列数和玻璃质感。
   重点是让浮层像一块悬在字段旁边的海图面板，而不是普通下拉菜单。 */
.planner-option-panel {
    position: fixed;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 桌面端默认两列：信息更舒展，也能减少面板向下拉得过长 */
    gap: 10px;
    padding: 14px;
    width: min(560px, calc(100vw - 32px));
    /* width 先给理想宽度 560px；如果视口更窄，就退到“屏幕宽度减去 32px”。
       这里的 32px = 左右各留 16px 安全边距，避免浮层贴住屏幕边缘。 */
    max-width: calc(100vw - 32px); /* 再补一层最大宽度限制，防止定位修正后仍然超出可视区。 */
    max-height: min(520px, calc(100vh - 32px));
    /* max-height 同时比较两个值：
       1. 理想上最后520px
       2. 但如果屏幕更矮，就按“视口高度 - 32px”收住，给上下各 16px 余地。 */
    overflow-y: auto; /* 选项过多时先让面板内部滚动，触到边界后再交回页面。 */
    overscroll-behavior-y: auto; /* 面板滚到边界时，允许外层页面继续顺着海层下潜。 */
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(166, 201, 222, 0.08) 100%),
        rgba(7, 24, 38, 0.88);
    border: 1px solid rgba(205, 229, 242, 0.12);
    box-shadow:
        0 24px 40px rgba(2, 12, 20, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    opacity: 0; /* 默认不可见，打开时再淡入，避免页面初始闪现浮层。 */
    transform: translate3d(0, 14px, 0); /* 初始微微下沉，展开时像从静水里浮上来。 */
    filter: blur(12px);
    transition:
        opacity 320ms ease,
        transform 360ms cubic-bezier(0.16, 0.82, 0.2, 1),
        filter 360ms ease;
    pointer-events: none; /* 没打开前不接管点击，避免透明面板挡住页面其他交互 */
    z-index: 40;
    scrollbar-width: thin;
    scrollbar-color: rgba(188, 222, 240, 0.22) rgba(255, 255, 255, 0.04);
}

.planner-option-panel.is-submerged-panel {
    transform: translate3d(0, 26px, 0) scale(0.965);
    filter: blur(18px);
    transform-origin: 50% 0;
    box-shadow:
        0 30px 48px rgba(2, 12, 20, 0.32),
        0 0 30px rgba(112, 188, 224, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* 紧凑型选项浮层：
   专门给“同行人数”使用，因为人数项更短，不需要海域面板那么宽。 */
.planner-option-panel-compact {
    width: min(420px, calc(100vw - 32px)); /* 人数项文案更短，所以把理想宽度收窄到 420px。 */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 两列刚好能排出 2x2 的轻量选择面板。 */
    gap: 8px;
}
/* 自定义选项入口：跨整行（1 / -1）放置，作为"其他"入口。 */
.planner-option-custom {
    grid-column: 1 / -1;
}

/* 自定义人数面板：grid 纵向排列标签 + 输入行，微亮背景区分于选项列表。 */
.planner-custom-people {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(205, 229, 242, 0.08);
}

/* 自定义人数标签：小号全大写。 */
.planner-custom-people-label {
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(194, 221, 236, 0.54);
}

/* 输入行：输入框 + 确认按钮，两列 grid。 */
.planner-custom-people-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

/* 人数输入框：暗底 + 半透明边框，聚焦时微亮。 */
.planner-custom-people-input {
    min-height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(205, 229, 242, 0.12);
    background: rgba(9, 28, 43, 0.56);
    color: #f4fbff;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}

.planner-custom-people-input::placeholder {
    color: rgba(194, 221, 236, 0.34);
}

.planner-custom-people-input:focus {
    border-color: rgba(214, 238, 248, 0.22);
    box-shadow: 0 0 0 3px rgba(120, 185, 215, 0.08);
}

/* 自定义人数确认按钮：与输入框等高、右对齐，hover 时上浮 1px。 */
.planner-custom-people-apply {
    min-height: 46px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(205, 229, 242, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(138, 178, 201, 0.05) 100%),
        rgba(10, 33, 49, 0.56);
    color: #eef6ff;
    transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.planner-custom-people-apply:hover {
    transform: translateY(-1px);
    border-color: rgba(214, 238, 248, 0.18);
    box-shadow: 0 12px 18px rgba(2, 12, 20, 0.16);
}

.planner-custom-people-note {
    margin: 0;
    line-height: 1.65;
    color: rgba(194, 221, 236, 0.58);
}

.planner-custom-people-note.is-error {
    color: rgba(255, 214, 181, 0.92);
}

.planner-custom-people-input[aria-invalid="true"] {
    border-color: rgba(243, 185, 128, 0.42);
    box-shadow: 0 0 0 3px rgba(243, 185, 128, 0.12);
}

/* 面板向上展开时：
   位置改成往上轻抬，避免靠近底部时浮层掉出视口。 */
.planner-option-panel.opens-upward {
    transform: translate3d(0, -14px, 0);
}

/* 潮汐日历浮层：
   日期不直接走浏览器默认 date picker，而是在页面里展开一张自定义时间面板。
   这样才能把“当前月份 / 推荐窗口 / 已选日期”都纳入同一套盐憩视觉语言。 */
.planner-calendar-panel {
    width: min(392px, calc(100vw - 32px)); /* 日历不需要过宽，但在小屏上仍然要保留左右 16px 安全边距 */
    grid-template-columns: 1fr; /* 日历面板是纵向阅读流，所以这里强制单列。 */
    gap: 16px;
    padding: 18px;
    max-height: none; /* 日历按自身内容自然撑开，不像海域面板那样主要靠滚动容纳 */
    overflow: hidden; /* 防止切换月份时的滑动和高光跑出圆角面板。 */
}

/* 日历浮层顶部：布置月份标题和前后切月按钮。 */
.planner-calendar-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 12px;
}

/* 日期面板标题区：显示“潮汐窗口”这层语义和当前月份。 */
.planner-calendar-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.planner-calendar-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(194, 221, 236, 0.48);
}

.planner-calendar-heading strong {
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #f4fbff;
}

/* 月份切换按钮：保持轻量和安静的玻璃感，不做普通系统箭头按钮。 */
.planner-calendar-nav {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(205, 229, 242, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(238, 246, 255, 0.9);
    font-size: 1.15rem;
    line-height: 1;
    transition:
        transform 240ms ease,
        border-color 240ms ease,
        background-color 240ms ease,
        box-shadow 240ms ease;
}

.planner-calendar-nav:hover {
    transform: translateY(-2px);
    border-color: rgba(214, 238, 248, 0.24);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 20px rgba(2, 12, 20, 0.14);
}

/* 星期栏：弱化显示，避免日历一眼看上去像后台组件。 */
.planner-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.planner-calendar-weekdays span {
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(194, 221, 236, 0.52);
}

/* 日期网格：把每天排成一张安静的“时间海图”。 */
.planner-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    transition: opacity 220ms ease, transform 260ms ease, filter 260ms ease;
}

.planner-calendar-grid.is-transitioning {
    opacity: 0.36; /* 切月时先淡一点，暗示旧月份正在退。*/
    transform: translateX(8px); /* 轻微水平偏移，帮助用户感知“翻页”而不是突然重。*/
    filter: blur(6px);
}

/* 日期格：做成可点的玻璃日期块，而不是普通表格按钮。 */
.planner-calendar-day {
    position: relative;
    min-height: 46px; /* 保证每个日期格有可点面积，也给底部发光点留出空间。 */
    border-radius: 16px;
    border: 1px solid rgba(205, 229, 242, 0.1);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(120, 160, 184, 0.05) 100%),
        rgba(10, 33, 49, 0.48);
    color: rgba(238, 246, 255, 0.9);
    font-size: 0.9rem;
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background-color 220ms ease,
        box-shadow 220ms ease;
}

.planner-calendar-day::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transform: translateX(-50%);
    opacity: 0;
    background: rgba(162, 225, 255, 0.74);
    box-shadow: 0 0 10px rgba(122, 196, 228, 0.34);
}

.planner-calendar-day:hover {
    transform: translateY(-2px);
    border-color: rgba(214, 238, 248, 0.22);
    box-shadow: 0 14px 24px rgba(2, 12, 20, 0.12);
}

.planner-calendar-day.is-outside {
    color: rgba(171, 191, 205, 0.38);
    background: rgba(255, 255, 255, 0.02);
}

.planner-calendar-day.is-today {
    border-color: rgba(205, 229, 242, 0.2);
}

.planner-calendar-day.is-today::after,
.planner-calendar-day.is-recommended::after {
    opacity: 1;
}

.planner-calendar-day.is-selected {
    border-color: rgba(214, 238, 248, 0.3);
    background:
        radial-gradient(circle at 50% 20%, rgba(185, 227, 247, 0.2) 0%, rgba(185, 227, 247, 0) 42%),
        linear-gradient(180deg, rgba(132, 188, 214, 0.24) 0%, rgba(36, 78, 102, 0.52) 100%);
    box-shadow:
        0 16px 26px rgba(2, 12, 20, 0.16),
        0 0 22px rgba(112, 188, 224, 0.16);
}

/* 浮层加上 is-open 后才真正可见、可点；
   默认先隐藏，避免还没展开就遮挡页面。 */
.planner-option-panel.is-open {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    pointer-events: auto;
}

/* 单个选项做成小型海域档案卡，而不是普通下拉菜单的一行文字。 */
.planner-option {
    width: 100%;
    min-height: 92px;
    padding: 14px 14px 13px;
    border-radius: 18px;
    text-align: left;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(201, 226, 239, 0.08);
    color: inherit;
    transition:
        transform 260ms ease,
        border-color 260ms ease,
        background-color 260ms ease,
        box-shadow 260ms ease;
}

/* 人数面板里的选项改成 4 个直接点选的玻璃块，不需要滚动式选择。 */
.planner-option-panel-compact .planner-option {
    min-height: 116px;
    padding: 16px 14px;
}

/* hover 时像轻轻碰到一张海域档案卡：上浮一点，但不过度互联网化。 */
.planner-option:hover,
.planner-option.is-selected {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(214, 238, 248, 0.22);
    box-shadow: 0 14px 26px rgba(2, 12, 20, 0.16);
}

/* 选项卡内部文案排版：把标题和说明拆成清楚的两层。 */
.planner-option-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 选项主标题：优先承担选择结果的主阅读层。 */
.planner-option-copy strong {
    font-size: 0.96rem;
    font-weight: 600;
    color: #f4fbff;
}

/* 閺勫墽銇氶柅澶愩€嶉幓蹇氬牚 */
.planner-option-copy small {
    font-size: 0.8rem;
    line-height: 1.65;
    color: rgba(204, 223, 235, 0.68);
}

/* 行程控制台主行动按钮：承担“继续把这次下潜往下排”的动作。 */
.planner-submit-btn {
    grid-area: action;
    position: relative;
    align-self: stretch;
    min-height: 92px;
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: transparent;
    overflow: hidden;
    transition: transform 280ms ease;
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    filter: blur(12px);
    animation: planner-console-rise 760ms cubic-bezier(0.18, 0.8, 0.22, 1) 1220ms forwards;
}

.planner-submit-btn:disabled {
    cursor: default;
    opacity: 1;
}

.planner-submit-btn:disabled:hover {
    transform: none;
}

/* 提供按钮外层的低调阴影与边缘轮廓 */
.planner-submit-btn-outer {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    padding: 1px;
    background:
        linear-gradient(135deg, rgba(200, 232, 244, 0.26), rgba(104, 151, 176, 0.08) 58%, rgba(255, 255, 255, 0.08));
    box-shadow:
        0 24px 40px rgba(4, 16, 25, 0.22),
        0 0 24px rgba(109, 176, 208, 0.08);
}

/* 提供按钮内层的深海推进感和低饱和青蓝层次 */
.planner-submit-btn-inner {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background:
        radial-gradient(circle at 30% 20%, rgba(194, 233, 246, 0.14) 0%, rgba(194, 233, 246, 0) 32%),
        linear-gradient(180deg, rgba(18, 67, 96, 0.88) 0%, rgba(8, 30, 46, 0.96) 100%);
    overflow: hidden;
    transition:
        background 420ms ease,
        box-shadow 420ms ease,
        transform 420ms ease;
}

/* 按钮表面的淡潮光层：hover 时缓慢扫过，不做强烈炫光。 */
.planner-submit-btn-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(118deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 36%, rgba(136, 216, 255, 0.12) 72%, rgba(255, 255, 255, 0) 100%);
    opacity: 0.58;
    transform: translateX(-18%);
    transition: transform 520ms ease, opacity 320ms ease;
}

.planner-submit-btn-inner::after {
    content: "";
    position: absolute;
    inset: -18%;
    background:
        radial-gradient(circle at 50% 50%, rgba(199, 234, 246, 0.24) 0%, rgba(199, 234, 246, 0) 58%),
        radial-gradient(circle at 78% 26%, rgba(145, 214, 241, 0.16) 0%, rgba(145, 214, 241, 0) 44%);
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 320ms ease, transform 620ms cubic-bezier(0.16, 0.82, 0.2, 1);
}

/* 按钮主文案：作为整块行动按钮的视觉锚点。 */
.planner-submit-btn-label {
    display: block;
    position: relative;
    z-index: 1;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: 1.04rem;
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: #f4fbff;
    width: 100%;
    padding-inline: clamp(16px, 2.6vw, 24px);
    box-sizing: border-box;
    text-align: center;
    transition:
        color 320ms ease,
        letter-spacing 320ms ease,
        text-shadow 320ms ease,
        transform 420ms ease;
}

/* hover 时让整块按钮轻微上浮，像被海流轻轻托起。 */
.planner-submit-btn:hover {
    transform: translateY(-3px);
}

/* hover 时推进感更明显，但不过度互联网化 */
.planner-submit-btn:hover .planner-submit-btn-inner::before {
    transform: translateX(0);
    opacity: 0.78;
}

/* 点击按钮时轻微下沉，像往下一层海域轻推一步。 */
.planner-submit-btn:active {
    transform: translateY(1px);
}

.planner-submit-btn.is-feedback {
    transform: translateY(-1px);
    pointer-events: none;
}

.planner-submit-btn.is-feedback .planner-submit-btn-inner {
    background:
        radial-gradient(circle at 34% 18%, rgba(206, 238, 248, 0.2) 0%, rgba(206, 238, 248, 0) 34%),
        linear-gradient(180deg, rgba(22, 82, 116, 0.92) 0%, rgba(10, 39, 59, 0.98) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(219, 241, 250, 0.08),
        0 20px 36px rgba(4, 18, 30, 0.18);
}

.planner-submit-btn.is-feedback .planner-submit-btn-inner::before {
    transform: translateX(8%);
    opacity: 0.88;
}

.planner-submit-btn.is-feedback .planner-submit-btn-inner::after {
    opacity: 1;
    transform: scale(1.02);
}

.planner-submit-btn.is-feedback .planner-submit-btn-label {
    color: #f8fdff;
    letter-spacing: 0.11em;
    text-shadow: 0 10px 24px rgba(3, 18, 29, 0.24);
    transform: translateY(-1px);
}

.planner-submit-btn.is-feedback-warning .planner-submit-btn-inner {
    background:
        radial-gradient(circle at 28% 12%, rgba(246, 217, 182, 0.18) 0%, rgba(246, 217, 182, 0) 34%),
        linear-gradient(180deg, rgba(83, 63, 40, 0.94) 0%, rgba(33, 23, 16, 0.98) 100%);
}

.planner-submit-btn.is-feedback-warning .planner-submit-btn-inner::after {
    background:
        radial-gradient(circle at 50% 50%, rgba(247, 216, 182, 0.24) 0%, rgba(247, 216, 182, 0) 56%),
        radial-gradient(circle at 82% 24%, rgba(255, 197, 135, 0.18) 0%, rgba(255, 197, 135, 0) 40%);
}

.planner-submit-btn.is-feedback-confirmed .planner-submit-btn-inner {
    background:
        radial-gradient(circle at 32% 14%, rgba(220, 244, 251, 0.24) 0%, rgba(220, 244, 251, 0) 32%),
        linear-gradient(180deg, rgba(30, 98, 136, 0.94) 0%, rgba(12, 48, 70, 0.98) 100%);
}

.planner-submit-btn.is-feedback-confirmed .planner-submit-btn-inner::after {
    background:
        radial-gradient(circle at 50% 50%, rgba(210, 240, 249, 0.28) 0%, rgba(210, 240, 249, 0) 56%),
        radial-gradient(circle at 80% 24%, rgba(162, 224, 246, 0.22) 0%, rgba(162, 224, 246, 0) 42%);
}

/* 行程控制台舞台入场动画：从轻微下沉和模糊中慢慢浮现。 */
@keyframes trip-hero-stage-rise {
    0% {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
        filter: blur(20px);
    }

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

@keyframes trip-hero-copy-tide-in {
    0% {
        opacity: 0;
        transform: translate3d(0, 22px, 0) scale(0.992);
        filter: blur(16px);
    }

    58% {
        opacity: 0.82;
        transform: translate3d(0, 4px, 0) scale(0.998);
        filter: blur(5px);
    }

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

@keyframes trip-hero-copy-current-in {
    0% {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
        filter: blur(8px);
    }

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

@keyframes trip-hero-copy-rise {
    0% {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
        filter: blur(10px);
    }

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

@keyframes trip-hero-breath {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes trip-hero-current {
    0% {
        transform: translate3d(-2%, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(2%, -1.5%, 0) scale(1.02);
    }
}

@keyframes planner-desk-rise {
    0% {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
        filter: blur(18px);
    }

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

@keyframes planner-console-rise {
    0% {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
        filter: blur(14px);
    }

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

@keyframes planner-field-mist-breath {
    0%,
    100% {
        opacity: 0.72;
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        opacity: 0.94;
        transform: translate3d(0, -2px, 0) scale(1.015);
    }
}

@keyframes planner-field-mist-release {
    0% {
        opacity: 0.94;
        filter: blur(10px);
        transform: translate3d(0, 0, 0) scale(1.015);
    }

    55% {
        opacity: 0.52;
        filter: blur(6px);
        transform: translate3d(0, -3px, 0) scale(1.008);
    }

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

@keyframes planner-field-copy-release {
    0% {
        filter: saturate(0.72) brightness(0.9);
        transform: translate3d(0, 2px, 0);
    }

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

@keyframes planner-field-copy-fade-in {
    0% {
        opacity: 0.54;
        filter: blur(5px);
        transform: translate3d(0, 4px, 0);
    }

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

@keyframes planner-summary-item-glow {
    0% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    50% {
        box-shadow:
            0 12px 24px rgba(8, 26, 39, 0.18),
            0 0 22px rgba(127, 197, 225, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    100% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }
}

@keyframes planner-summary-shell-glow {
    0% {
        opacity: 0;
        transform: scale(0.986);
        box-shadow:
            0 0 0 rgba(128, 196, 223, 0),
            inset 0 0 0 rgba(173, 220, 241, 0);
    }

    45% {
        opacity: 0.96;
        transform: scale(1);
        box-shadow:
            0 0 0 1px rgba(196, 231, 244, 0.18),
            0 0 34px rgba(128, 196, 223, 0.2),
            inset 0 0 24px rgba(173, 220, 241, 0.08);
    }

    100% {
        opacity: 0;
        transform: scale(1.012);
        box-shadow:
            0 0 0 rgba(128, 196, 223, 0),
            inset 0 0 0 rgba(173, 220, 241, 0);
    }
}

@keyframes prep-detail-panel-refresh {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }

    38% {
        transform: translate3d(0, 10px, 0) scale(0.992);
        filter: blur(10px);
    }

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

@keyframes prep-detail-panel-glow {
    0% {
        opacity: 0;
    }

    42% {
        opacity: 0.92;
    }

    100% {
        opacity: 0;
    }
}

@keyframes prep-detail-head-refresh {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }

    34% {
        opacity: 0.32;
        transform: translate3d(0, 8px, 0);
        filter: blur(12px);
    }

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

@keyframes confirmed-booking-card-rise {
    0% {
        opacity: 0;
        transform: translate3d(0, 26px, 0) scale(0.988);
        filter: blur(18px);
    }

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

@keyframes confirmed-booking-card-rise-left {
    0% {
        opacity: 0;
        transform: translate3d(-28px, 34px, 0) scale(0.984);
        filter: blur(18px);
    }

    55% {
        opacity: 1;
        transform: translate3d(4px, -3px, 0) scale(1.006);
        filter: blur(4px);
    }

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

@keyframes confirmed-booking-card-rise-right {
    0% {
        opacity: 0;
        transform: translate3d(28px, 34px, 0) scale(0.984);
        filter: blur(18px);
    }

    55% {
        opacity: 1;
        transform: translate3d(-4px, -3px, 0) scale(1.006);
        filter: blur(4px);
    }

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

@keyframes confirmed-booking-card-sheen {
    0% {
        opacity: 0;
        transform: translate3d(-12%, 0, 0);
    }

    44% {
        opacity: 0.92;
    }

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

/* 草稿层：保留 summary 锚点，但把它压成附着在控制台下方的一层轻草稿。 */
.planner-summary {
    grid-area: summary;
    position: relative;
    display: grid;
    gap: 10px;
    margin: -10px clamp(18px, 3vw, 32px) 0;
    padding: 14px 18px 18px;
    border-radius: 24px 24px 28px 28px;
    background:
        linear-gradient(180deg, rgba(192, 224, 239, 0.08) 0%, rgba(124, 168, 191, 0.04) 32%, rgba(7, 22, 34, 0.52) 100%),
        rgba(6, 20, 31, 0.24);
    border: 1px solid rgba(202, 227, 239, 0.06);
    box-shadow:
        0 14px 28px rgba(4, 15, 24, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px) saturate(118%);
    -webkit-backdrop-filter: blur(16px) saturate(118%);
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    filter: blur(18px);
    animation: planner-desk-rise 960ms cubic-bezier(0.16, 0.82, 0.2, 1) 760ms forwards;
    transition:
        border-color 420ms ease,
        box-shadow 420ms ease,
        background-color 420ms ease,
        transform 420ms ease,
        opacity 320ms ease;
}

.planner-summary::before {
    content: "";
    position: absolute;
    left: 30px;
    right: 30px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(210, 233, 244, 0) 0%, rgba(210, 233, 244, 0.28) 18%, rgba(210, 233, 244, 0.08) 82%, rgba(210, 233, 244, 0) 100%);
    opacity: 0.54;
}

.planner-summary::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    box-shadow:
        0 0 0 rgba(128, 196, 223, 0),
        inset 0 0 0 rgba(173, 220, 241, 0);
}

.planner-summary-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 18px;
    align-items: start;
}

.planner-summary-active-identity {
    display: grid;
    justify-self: end;
    gap: 4px;
    text-align: right;
}

.planner-summary-active-index-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.planner-summary-active-index {
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(239, 248, 255, 0.95);
}

.planner-summary-active-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(144, 199, 236, 0.8));
    box-shadow: 0 0 16px rgba(118, 203, 237, 0.6);
}

.planner-summary-active-label {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(204, 219, 233, 0.6);
}

.trip-proof-flow {
    position: relative;
    display: grid;
    gap: 18px;
    margin: 10px clamp(18px, 3vw, 32px) 0;
    padding: 24px 24px 22px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 14% 0%, rgba(196, 231, 245, 0.14) 0%, rgba(196, 231, 245, 0) 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(136, 178, 201, 0.03) 100%),
        rgba(6, 21, 33, 0.44);
    border: 1px solid rgba(204, 228, 239, 0.1);
    box-shadow:
        0 18px 32px rgba(4, 17, 28, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.trip-proof-flow-head {
    display: grid;
    gap: 10px;
}

.trip-proof-flow-kicker,
.trip-proof-flow-title,
.trip-proof-flow-intro,
.trip-proof-flow-status-copy,
.trip-proof-flow-step-copy p {
    margin: 0;
}

.trip-proof-flow-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(195, 220, 235, 0.54);
}

.trip-proof-flow-title {
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.28rem, 1.9vw, 1.64rem);
    line-height: 1.42;
    color: #f4fbff;
}

.trip-proof-flow-intro {
    max-width: 64ch;
    line-height: 1.76;
    color: rgba(205, 223, 234, 0.72);
}

.trip-proof-flow-status {
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(205, 229, 242, 0.08);
}

.trip-proof-flow-status-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(177, 222, 241, 0.1);
    border: 1px solid rgba(197, 231, 246, 0.16);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(231, 244, 250, 0.84);
}

.trip-proof-flow-status-copy {
    line-height: 1.74;
    color: rgba(224, 238, 247, 0.82);
}

.trip-proof-flow-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
}

.trip-proof-flow-step {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 18px 18px 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(205, 229, 242, 0.06);
    transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease, background-color 260ms ease;
}

.trip-proof-flow-step:not(.is-complete):not(.is-active) {
    opacity: 0.62;
    background: rgba(255, 255, 255, 0.024);
    border-color: rgba(205, 229, 242, 0.045);
}

.trip-proof-flow-step.is-complete {
    border-color: rgba(184, 225, 239, 0.16);
    background: rgba(255, 255, 255, 0.05);
}

.trip-proof-flow-step.is-active {
    transform: translateY(-2px);
    border-color: rgba(198, 231, 246, 0.22);
    box-shadow:
        0 18px 30px rgba(4, 17, 28, 0.14),
        0 0 18px rgba(110, 182, 214, 0.08);
}

.trip-proof-flow-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(176, 221, 239, 0.08);
    border: 1px solid rgba(198, 231, 246, 0.1);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    color: rgba(238, 248, 252, 0.84);
}

.trip-proof-flow-step-copy {
    display: grid;
    gap: 8px;
}

.trip-proof-flow-step-copy strong {
    color: #f2f9fd;
}

.trip-proof-flow-step-copy p {
    line-height: 1.7;
    color: rgba(203, 221, 232, 0.7);
}

.trip-proof-flow-step-state {
    grid-column: 1 / -1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(205, 229, 242, 0.08);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: rgba(214, 231, 240, 0.78);
}

.trip-proof-flow-step.is-active .trip-proof-flow-step-state {
    background: rgba(172, 220, 241, 0.14);
    border-color: rgba(197, 231, 246, 0.18);
    color: rgba(240, 248, 252, 0.92);
}

.planner-summary-meter {
    position: relative;
    display: grid;
    gap: 12px;
    margin: 6px 0 4px;
}

.planner-summary-meter-track {
    position: relative;
    width: 100%;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.planner-summary-meter-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--planner-summary-progress, 0) * 100%);
    min-width: 7px;
    border-radius: inherit;
    background:
        linear-gradient(90deg, rgba(150, 214, 236, 0.42), rgba(231, 246, 252, 0.92) 52%, rgba(150, 214, 236, 0.52));
    box-shadow:
        0 0 20px rgba(151, 212, 235, 0.24),
        0 0 30px rgba(151, 212, 235, 0.1);
    transition: width 720ms cubic-bezier(0.16, 0.82, 0.2, 1), box-shadow 420ms ease, opacity 320ms ease;
}

.planner-summary-meter-orbs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.planner-summary-meter-orb {
    position: relative;
    display: block;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(198, 223, 237, 0.08);
    overflow: hidden;
    transition: border-color 320ms ease, background-color 320ms ease, box-shadow 320ms ease, transform 320ms ease;
}

.planner-summary-meter-orb::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(243, 251, 255, 0.82), rgba(153, 214, 236, 0.44));
    opacity: 0;
    transform: scaleX(0.3);
    transform-origin: left center;
    transition: opacity 320ms ease, transform 420ms cubic-bezier(0.16, 0.82, 0.2, 1);
}

.planner-summary-meter-orb.is-complete {
    border-color: rgba(201, 231, 244, 0.18);
    background: rgba(109, 178, 208, 0.12);
    box-shadow: 0 0 18px rgba(151, 212, 235, 0.18);
    transform: translate3d(0, -1px, 0);
}

.planner-summary-meter-orb.is-complete::before {
    opacity: 1;
    transform: scaleX(1);
}

.planner-summary-meter-orb.is-current {
    border-color: rgba(209, 236, 247, 0.24);
    background: rgba(130, 193, 220, 0.1);
    box-shadow:
        0 0 16px rgba(151, 212, 235, 0.16),
        inset 0 0 10px rgba(232, 246, 252, 0.04);
    animation: planner-summary-orb-pulse 2.4s ease-in-out infinite;
}

.planner-summary-meter-orb.is-current::before {
    opacity: 0.48;
    transform: scaleX(0.56);
}

.planner-summary-heading {
    display: grid;
    gap: 4px;
}

.planner-summary-kicker {
    margin: 0;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(194, 221, 236, 0.46);
}

.planner-summary-title {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: 0.98rem;
    line-height: 1.42;
    color: rgba(231, 243, 250, 0.72);
}

.planner-summary-intro {
    margin: 0;
    max-width: 56ch;
    max-height: 4.5em;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.72;
    color: rgba(198, 217, 229, 0.5);
    opacity: 1;
    transform: translateY(0);
    transition:
        max-height 320ms ease,
        opacity 320ms ease,
        transform 320ms ease;
}

.planner-summary-status-note {
    position: relative;
    margin: 0;
    min-height: 1.7em;
    padding-left: 18px;
    font-size: 0.88rem;
    line-height: 1.74;
    color: rgba(210, 226, 235, 0.68);
    transition:
        color 320ms ease,
        opacity 320ms ease,
        transform 320ms ease;
}

.planner-summary-status-note::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(139, 200, 225, 0.5);
    box-shadow: 0 0 18px rgba(120, 184, 211, 0.18);
    transition: background-color 320ms ease, box-shadow 320ms ease;
}

.planner-summary-swim-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
    min-width: 0;
    touch-action: pan-y;
    --planner-summary-swipe-shift: 0px;
    --planner-summary-flow-sign: 1;
    --planner-summary-incoming-x: 74px;
    --planner-summary-outgoing-x: -74px;
}

.planner-summary-swim-stage.has-multiple {
    grid-template-columns: minmax(156px, 0.44fr) minmax(0, 1fr) minmax(156px, 0.44fr);
    gap: clamp(10px, 1.8vw, 18px);
}

.planner-summary-swim-stage.is-flow-backward {
    --planner-summary-flow-sign: -1;
    --planner-summary-incoming-x: -74px;
    --planner-summary-outgoing-x: 74px;
}

.planner-summary-swim-stage.is-dragging {
    cursor: grabbing;
}

.planner-summary-swim-stage.has-multiple .planner-summary-swim-viewport {
    grid-column: 2;
}

.planner-summary-swim-stage:focus-visible {
    outline: none;
}

.planner-summary-swim-stage:focus-visible .planner-summary-swim-viewport {
    box-shadow:
        0 0 0 1px rgba(211, 237, 248, 0.26),
        0 0 0 6px rgba(114, 186, 216, 0.08);
}

.planner-summary-swim-viewport {
    position: relative;
    min-width: 0;
    border-radius: 30px;
    transition:
        height 620ms cubic-bezier(0.16, 0.82, 0.2, 1),
        transform 320ms ease,
        box-shadow 320ms ease;
}

.planner-summary-swim-stage.is-dragging .planner-summary-swim-viewport {
    transform: translate3d(calc(var(--planner-summary-swipe-shift, 0px) * 0.08), 0, 0);
}

.planner-summary-swim-viewport.is-stage-switching {
    overflow: hidden;
}

.planner-summary-swim-deck {
    position: relative;
    display: grid;
    gap: 14px;
    min-width: 0;
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
    transition:
        opacity 620ms ease,
        transform 780ms cubic-bezier(0.16, 0.82, 0.2, 1),
        filter 620ms ease;
    will-change: transform, opacity, filter;
}

.planner-summary-swim-deck.is-deck-outgoing,
.planner-summary-swim-deck.is-deck-incoming {
    position: absolute;
    inset: 0;
}

.planner-summary-swim-deck.is-deck-outgoing {
    z-index: 1;
    pointer-events: none;
    opacity: 0.14;
    filter: blur(16px) saturate(0.84);
    transform: translate3d(calc(var(--planner-summary-outgoing-x) * 0.82), 18px, 0) scale(0.986);
}

.planner-summary-swim-deck.is-deck-incoming {
    z-index: 2;
    pointer-events: none;
    opacity: 0.42;
    filter: blur(16px) saturate(0.94);
    transform: translate3d(calc(var(--planner-summary-incoming-x) * 0.78), 8px, 0) scale(0.994);
}

.planner-summary-swim-deck.is-deck-incoming.is-deck-active,
.planner-summary-swim-deck.is-deck-active {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

.planner-summary-neighbor {
    position: relative;
    display: none;
    align-content: end;
    gap: 8px;
    min-width: 0;
    min-height: 100%;
    padding: 18px 16px;
    border-radius: 26px;
    border: 1px solid rgba(200, 226, 239, 0.1);
    background:
        radial-gradient(circle at 50% 0%, rgba(201, 233, 246, 0.14), rgba(201, 233, 246, 0)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(8, 24, 37, 0.88)),
        rgba(7, 21, 34, 0.68);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 16px 28px rgba(2, 10, 18, 0.34);
    color: rgba(231, 244, 250, 0.86);
    text-align: left;
    opacity: 0.72;
    cursor: pointer;
    transition:
        transform 320ms ease,
        opacity 320ms ease,
        border-color 320ms ease,
        box-shadow 320ms ease,
        filter 320ms ease;
}

.planner-summary-swim-stage.has-multiple .planner-summary-neighbor {
    display: grid;
}

.planner-summary-swim-stage.is-stage-switching .planner-summary-neighbor {
    pointer-events: none;
}

.planner-summary-swim-stage.is-dragging .planner-summary-neighbor {
    transform: translate3d(calc(var(--planner-summary-swipe-shift, 0px) * 0.05), 0, 0);
}

.planner-summary-neighbor[hidden] {
    display: none !important;
}

.confirmed-bookings-switch[hidden],
.confirmed-bookings-empty[hidden],
.sea-brief-empty[hidden],
.sea-brief-card[hidden] {
    display: none !important;
}

.planner-summary-neighbor:hover,
.planner-summary-neighbor:focus-visible {
    opacity: 0.96;
    transform: translateY(-3px);
    border-color: rgba(208, 235, 248, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 20px 34px rgba(2, 10, 18, 0.42),
        0 0 18px rgba(103, 179, 212, 0.08);
}

.planner-summary-neighbor:focus-visible {
    outline: none;
}

.planner-summary-neighbor:disabled {
    opacity: 0.48;
    cursor: default;
}

.planner-summary-neighbor-prev {
    grid-column: 1;
    text-align: right;
}

.planner-summary-neighbor-next {
    grid-column: 3;
}

.planner-summary-neighbor-kicker {
    margin: 0;
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(190, 221, 237, 0.42);
}

.planner-summary-neighbor-name {
    display: block;
    font-size: 1rem;
    line-height: 1.36;
    color: rgba(245, 251, 255, 0.94);
}

.planner-summary-neighbor-package {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(199, 220, 233, 0.64);
}

.planner-summary-neighbor-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: rgba(193, 216, 228, 0.66);
    font-size: 0.74rem;
}

.planner-summary-neighbor-prev .planner-summary-neighbor-status {
    justify-self: end;
}

.planner-summary-neighbor-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.planner-summary-neighbor-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(187, 211, 224, 0.28);
    box-shadow: inset 0 0 0 1px rgba(230, 241, 247, 0.06);
    transition: background-color 260ms ease, box-shadow 260ms ease;
}

.planner-summary-neighbor-dot.is-ready {
    background: radial-gradient(circle, rgba(236, 252, 255, 0.96), rgba(119, 206, 236, 0.9));
    box-shadow:
        0 0 10px rgba(126, 205, 233, 0.34),
        0 0 0 1px rgba(214, 235, 245, 0.1);
}

.planner-summary-neighbor-status-text {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.planner-summary.is-empty {
    border-color: rgba(202, 227, 239, 0.04);
    box-shadow:
        0 12px 22px rgba(4, 15, 24, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.planner-summary.is-empty .planner-summary-intro {
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
}

.planner-summary.has-progress {
    border-color: rgba(205, 229, 242, 0.08);
    box-shadow:
        0 16px 30px rgba(4, 16, 25, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.planner-summary.has-progress .planner-summary-meter-fill {
    opacity: 1;
}

.planner-summary.is-confirmed {
    border-color: rgba(210, 235, 247, 0.1);
    box-shadow:
        0 18px 34px rgba(4, 16, 25, 0.16),
        0 0 20px rgba(128, 196, 223, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.planner-summary.is-confirmed .planner-summary-meter-fill {
    box-shadow:
        0 0 18px rgba(151, 212, 235, 0.22),
        0 0 28px rgba(151, 212, 235, 0.1);
}

.planner-summary.is-breathing .planner-summary-meter-fill {
    animation: planner-summary-meter-breath 3.6s ease-in-out infinite;
}

.planner-summary.is-confirmed .planner-summary-status-note {
    color: rgba(232, 244, 250, 0.84);
}

.planner-summary.is-confirmed .planner-summary-status-note::before {
    background: rgba(182, 224, 241, 0.72);
    box-shadow: 0 0 20px rgba(146, 209, 233, 0.26);
}

.planner-summary.is-updated-confirmed::after {
    animation: planner-summary-shell-glow 1100ms ease;
}

.planner-summary.is-submit-feedback {
    border-color: rgba(213, 237, 248, 0.1);
    box-shadow:
        0 18px 36px rgba(4, 16, 25, 0.16),
        0 0 18px rgba(126, 194, 220, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.planner-summary.is-submit-feedback::after {
    animation: planner-summary-shell-glow 980ms ease;
}

.planner-summary.is-submit-feedback .planner-summary-status-note {
    color: rgba(233, 244, 250, 0.88);
}

.planner-summary.is-submit-feedback .planner-summary-status-note::before {
    background: rgba(188, 228, 242, 0.8);
    box-shadow: 0 0 22px rgba(152, 214, 236, 0.3);
}

.planner-summary.is-swim-switching::after {
    animation: planner-summary-shell-glow 900ms ease;
}

.planner-summary.is-progress-shifting::after {
    animation: planner-summary-shell-glow 760ms ease;
}

.planner-summary.is-progress-ready .planner-summary-status-note {
    color: rgba(223, 239, 248, 0.82);
}

.planner-summary-draft-shell {
    position: relative;
    display: grid;
    gap: 12px;
    padding: clamp(14px, 2vw, 18px);
    border-radius: 30px;
    background:
        radial-gradient(circle at 20% 8%, rgba(217, 237, 248, 0.16), rgba(217, 237, 248, 0)),
        linear-gradient(180deg, rgba(8, 23, 36, 0.76), rgba(6, 18, 30, 0.9));
    border: 1px solid rgba(210, 234, 250, 0.08);
    box-shadow:
        0 18px 34px rgba(2, 8, 16, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px) saturate(124%);
    -webkit-backdrop-filter: blur(18px) saturate(124%);
}

.planner-summary-draft-shell::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.018);
    pointer-events: none;
    opacity: 0.42;
    box-shadow: 0 0 18px rgba(47, 122, 198, 0.14);
}

.planner-summary-draft-rail {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr) minmax(190px, 0.88fr);
    gap: 12px;
    padding: 14px 16px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(11, 28, 44, 0.8)),
        rgba(7, 19, 34, 0.68);
    border: 1px solid rgba(209, 234, 249, 0.09);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 20px rgba(3, 10, 18, 0.24);
}

.planner-summary-draft-segment {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.planner-summary-draft-segment--spot {
    padding-right: 4px;
}

.planner-summary-draft-label {
    margin: 0;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(184, 214, 229, 0.5);
}

.planner-summary-draft-spot {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(243, 249, 253, 0.92);
}

.planner-summary-draft-segment--rhythm {
    min-height: 58px;
}

.planner-summary-draft-rhythm {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.68;
    color: rgba(211, 227, 236, 0.74);
}

.planner-summary-draft-tags {
    display: grid;
    gap: 8px;
    align-content: start;
}

.planner-summary-draft-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 14px;
    border: 1px solid rgba(225, 241, 250, 0.1);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(9, 33, 48, 0.68)),
        rgba(11, 27, 41, 0.54);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(214, 230, 242, 0.8);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 8px 16px rgba(3, 11, 18, 0.18);
}

.planner-summary-draft-tag::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.16);
}

.planner-summary-draft-tag-package::before {
    background: radial-gradient(circle, rgba(146, 205, 234, 0.9), rgba(115, 194, 233, 0.3));
}

.planner-summary-draft-tag-companion::before {
    background: radial-gradient(circle, rgba(249, 214, 143, 0.9), rgba(249, 214, 143, 0.3));
}

.planner-summary-draft-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 360ms ease,
        transform 360ms ease;
}

.planner-summary.has-progress .planner-summary-draft-rail {
    border-color: rgba(208, 235, 249, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 14px 26px rgba(4, 10, 18, 0.24),
        0 0 18px rgba(118, 204, 237, 0.1);
}

/* 确认后的草稿导轨加亮边框与发光阴影，突出“已确认”状态的水下质感。 */
.planner-summary.is-confirmed .planner-summary-draft-rail {
    border-color: rgba(198, 233, 247, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 30px rgba(3, 9, 15, 0.28),
        0 0 20px rgba(125, 215, 241, 0.14);
}

/* 各阶段草稿导轨的垂直偏移微动，用 translateY 的细微差别呼应交互进度。 */
.planner-summary[data-summary-stage="idle"] .planner-summary-draft-rail {
    transform: translateY(0);
}

.planner-summary[data-summary-stage="date"] .planner-summary-draft-rail,
.planner-summary[data-summary-stage="people"] .planner-summary-draft-rail {
    transform: translateY(-1px);
}

/* “同伴数量”阶段中伴随标签获得暖色金边，引导用户关注人数选择。 */
.planner-summary[data-summary-stage="people"] .planner-summary-draft-tag-companion {
    border-color: rgba(243, 223, 170, 0.2);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 10px 20px rgba(7, 15, 22, 0.22),
        0 0 16px rgba(242, 205, 124, 0.08);
}

/* 确认后地点名称增加柔和的光晕文字阴影，强化最终选定感。 */
.planner-summary[data-summary-stage="confirmed"] .planner-summary-draft-spot {
    text-shadow: 0 0 16px rgba(149, 219, 246, 0.12);
}

/* 草稿里的三项明细不再做大卡，而是收成轻量条目。 */
.planner-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "index state"
        "copy copy";
    align-items: start;
    gap: 8px 10px;
    min-height: 78px;
    padding: 12px 13px 13px;
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(138, 178, 201, 0.018) 100%),
        rgba(7, 22, 34, 0.28);
    border: 1px solid rgba(205, 229, 242, 0.05);
    transition:
        opacity 320ms ease,
        transform 320ms ease,
        box-shadow 320ms ease,
        border-color 320ms ease,
        background-color 320ms ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

/* 每项顶部的渐变高光线，模拟海面反射光，增加层次感。 */
.planner-item::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(214, 234, 243, 0.16), rgba(214, 234, 243, 0.04), rgba(214, 234, 243, 0));
    pointer-events: none;
}

/* 已确认项目的边框与背景略微提亮，与普通草稿区分。 */
.planner-item.is-confirmed {
    border-color: rgba(196, 228, 242, 0.1);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(148, 190, 211, 0.03) 100%),
        rgba(8, 25, 38, 0.34);
}

/* 空项目用虚线边框和较低不透明度表示“待填写”状态。 */
.planner-item.is-empty {
    opacity: 0.88;
    border-style: dashed;
}

/* 已确认时序号标签获得更亮的文字和浅青底，强化完成感。 */
.planner-item.is-confirmed .planner-item-index {
    color: rgba(241, 249, 253, 0.88);
    background: rgba(120, 184, 211, 0.12);
    border-color: rgba(194, 227, 241, 0.16);
}

/* 已确认时状态标签样式与序号保持一致，形成统一的确认态视觉。 */
.planner-item.is-confirmed .planner-item-state {
    color: rgba(236, 247, 251, 0.88);
    background: rgba(120, 184, 211, 0.12);
    border-color: rgba(194, 227, 241, 0.14);
}

/* 项目被更新时播放一次微光动画，吸引用户注意变化。 */
.planner-item.is-updated {
    animation: planner-summary-item-glow 920ms ease;
}

/* 悬停时轻微上浮并增加阴影，赋予卡片可交互的立体感。 */
.planner-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
    border-color: rgba(202, 231, 244, 0.08);
}

/* 序号徽章：居左显示在 grid 的 index 区域，半透底 + 小字号序号。 */
.planner-item-index {
    grid-area: index;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    align-self: start;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    color: rgba(219, 237, 247, 0.68);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(209, 231, 243, 0.07);
}

/* 文本区：放置于 grid 的 copy 区域，容纳标题与描述文字。 */
.planner-item-copy {
    grid-area: copy;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding-top: 2px;
}

/* 状态标签：居右显示在 grid 的 state 区域，药丸造型、半透底。 */
.planner-item-state {
    grid-area: state;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    align-self: start;
    max-width: 100%;
    min-width: auto;
    margin-top: 0;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    white-space: nowrap;
    color: rgba(224, 238, 245, 0.72);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(204, 227, 239, 0.07);
}

/* .planner-label 的主要视觉与布局效果*/
.planner-label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(188, 213, 227, 0.46);
}

/* 项目标题文字：加粗、大字号、亮白，展示潜点或套餐名称。 */
.planner-item strong {
    display: block;
    font-size: 0.96rem;
    line-height: 1.52;
    color: rgba(238, 246, 255, 0.92);
    text-wrap: pretty;
}

/* 项目描述文字：小字号、低对比度，并限制最大高度防止溢出。 */
.planner-item small {
    display: block;
    max-width: 28ch;
    max-height: 2.9em;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.5;
    color: rgba(194, 214, 226, 0.48);
    opacity: 0.78;
    transition:
        max-height 320ms ease,
        opacity 320ms ease,
        transform 320ms ease;
}

/* 空项目标题颜色略降，与内容占位符风格统一。 */
.planner-item.is-empty strong {
    color: rgba(222, 235, 243, 0.78);
}

/* 空项目的描述透明度更低，弱化占位文字的存在感。 */
.planner-item.is-empty small {
    opacity: 0.62;
    transform: none;
}

/* .trip-focus-section, .trip-prep-section 的主要视觉与布局效果*/
.trip-focus-section,
.trip-prep-section {
    position: relative;
    overflow: hidden;
    padding: clamp(54px, 6vw, 84px) var(--spacing-lg);
}

/* .trip-focus-section 的主要视觉与布局效果*/
.trip-focus-section {
    background:
        radial-gradient(circle at 82% 12%, rgba(164, 202, 225, 0.12) 0%, rgba(164, 202, 225, 0) 22%),
        linear-gradient(180deg, #133a55 0%, #0d2a3f 100%);
}

/* .trip-prep-section 的主要视觉与布局效果*/
.trip-prep-section {
    background:
        radial-gradient(circle at 20% 16%, rgba(199, 226, 240, 0.08) 0%, rgba(199, 226, 240, 0) 20%),
        linear-gradient(180deg, #0d273a 0%, #081a27 100%);
}

/* .trip-section-head 的主要视觉与布局效果*/
.trip-section-head {
    max-width: 820px;
    margin: 0 auto 30px;
    text-align: center;
}

.trip-section-lead {
    max-width: 720px;
    margin: 0 auto 20px;
    font-size: 0.96rem;
    line-height: 1.82;
    color: rgba(205, 222, 234, 0.66);
    letter-spacing: 0.04em;
    text-align: center;
}

/* Trip 页区块显现系统：
   这组样式专门服务于行程页中后段内容的“进入视口后再慢慢被海托出来”的节奏。
   和首屏一次性入场不同，这里强调用户滚动到某一层时，内容才开始显形，
   这样 Planning Notes、准备系统和已收进行程里的卡片不会在用户还没看到时就把动画播完。 */
.trip-reveal-block,
.trip-reveal-head,
.trip-reveal-card,
.trip-reveal-panel {
    opacity: 0;
    transform: translate3d(0, 26px, 0) scale(0.988);
    filter: blur(18px);
    will-change: opacity, transform, filter;
}

/* 章节标题块更像先被海雾照亮，所以位移更小、节奏更稳。 */
.trip-reveal-head {
    transform: translate3d(0, 18px, 0);
    filter: blur(14px);
    transition:
        opacity 760ms cubic-bezier(0.16, 0.82, 0.2, 1),
        transform 920ms cubic-bezier(0.16, 0.82, 0.2, 1),
        filter 920ms ease;
}

/* 卡片比标题更轻一点地浮起，像一张张资料卡被海流带到面前。 */
.trip-reveal-card {
    transform: translate3d(0, 22px, 0) scale(0.992);
    filter: blur(16px);
    transition:
        opacity 720ms cubic-bezier(0.16, 0.82, 0.2, 1),
        transform 860ms cubic-bezier(0.16, 0.82, 0.2, 1),
        filter 860ms ease,
        box-shadow 320ms ease,
        border-color 320ms ease,
        background 320ms ease;
}

/* 详情面板本身更像一整块玻璃板被抬起，所以模糊和位移略大一些。 */
.trip-reveal-panel {
    transform: translate3d(0, 28px, 0) scale(0.986);
    filter: blur(18px);
    transition:
        opacity 780ms cubic-bezier(0.16, 0.82, 0.2, 1),
        transform 980ms cubic-bezier(0.16, 0.82, 0.2, 1),
        filter 980ms ease;
}

.trip-reveal-block {
    transition:
        opacity 760ms cubic-bezier(0.16, 0.82, 0.2, 1),
        transform 940ms cubic-bezier(0.16, 0.82, 0.2, 1),
        filter 940ms ease;
}

.trip-reveal-descent {
    transform: translate3d(0, -34px, 0) scale(0.984);
    filter: blur(20px);
}

.trip-reveal-current {
    transform: translate3d(0, 18px, 0) scale(0.994);
    filter: blur(12px);
}

.trip-focus-grid .trip-reveal-current {
    transform: translate3d(0, 14px, 0) scale(0.995);
    filter: blur(8px);
}

.trip-reveal-ascent {
    transform: translate3d(0, 34px, 0) scale(0.99);
    filter: blur(20px);
}

.trip-reveal-card.trip-reveal-current:nth-child(even) {
    transform: translate3d(0, 20px, 0) scale(0.994);
}

.trip-focus-grid .trip-reveal-card.trip-reveal-current:nth-child(even) {
    transform: translate3d(0, 16px, 0) scale(0.995);
}

.trip-focus-grid .trip-reveal-card.trip-reveal-current:nth-child(1) {
    transform: translate3d(0, 18px, 0) scale(0.992);
}

.trip-focus-grid .trip-reveal-card.trip-reveal-current:nth-child(2) {
    transform: translate3d(0, 12px, 0) scale(0.996);
}

.trip-focus-grid .trip-reveal-card.trip-reveal-current:nth-child(3) {
    transform: translate3d(0, 20px, 0) scale(0.992);
}

.trip-focus-grid .trip-reveal-card.trip-reveal-current:nth-child(4) {
    transform: translate3d(0, 16px, 0) scale(0.994);
}

.trip-focus-grid .trip-reveal-card {
    transform-origin: center bottom;
}

.trip-reveal-panel.trip-reveal-ascent {
    transform: translate3d(0, 36px, 0) scale(0.982);
}

.trip-reveal-block.is-visible,
.trip-reveal-head.is-visible,
.trip-reveal-card.is-visible,
.trip-reveal-panel.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

@keyframes planner-summary-meter-breath {
    0%,
    100% {
        box-shadow:
            0 0 20px rgba(151, 212, 235, 0.24),
            0 0 30px rgba(151, 212, 235, 0.1);
    }

    50% {
        box-shadow:
            0 0 26px rgba(182, 229, 247, 0.34),
            0 0 42px rgba(151, 212, 235, 0.16);
    }
}

@keyframes planner-summary-orb-pulse {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -1px, 0);
    }
}

/* 错落延迟：
   不让一整组卡一起亮，而是让用户滑到哪里，哪里的卡片再一张张慢慢被看见。 */
.trip-focus-grid .trip-reveal-card:nth-child(1),
.prep-card-grid .trip-reveal-card:nth-child(1),
.confirmed-bookings-list .trip-reveal-card:nth-child(1) {
    transition-delay: 40ms;
}

.trip-focus-grid .trip-reveal-card:nth-child(2),
.prep-card-grid .trip-reveal-card:nth-child(2),
.confirmed-bookings-list .trip-reveal-card:nth-child(2) {
    transition-delay: 120ms;
}

.trip-focus-grid .trip-reveal-card:nth-child(3),
.prep-card-grid .trip-reveal-card:nth-child(3),
.confirmed-bookings-list .trip-reveal-card:nth-child(3) {
    transition-delay: 200ms;
}

.trip-focus-grid .trip-reveal-card:nth-child(4),
.prep-card-grid .trip-reveal-card:nth-child(4),
.confirmed-bookings-list .trip-reveal-card:nth-child(4) {
    transition-delay: 280ms;
}

/* .trip-section-title 的主要视觉与布局效果*/
.trip-section-title {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
    font-weight: 600;
    line-height: 1.32;
    color: #f2fbff;
}

/* .trip-focus-grid, .trip-prep-grid 的主要视觉与布局效果*/
.trip-focus-grid,
.trip-prep-grid {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    gap: 24px;
}

/* .trip-focus-grid 的主要视觉与布局效果*/
.trip-focus-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* .trip-prep-grid 的主要视觉与布局效果*/
.trip-prep-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* .trip-focus-card, .trip-prep-card 的主要视觉与布局效果*/
.trip-focus-card,
.trip-prep-card {
    border-radius: 28px;
    padding: 24px 24px 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(169, 205, 226, 0.08) 100%),
        rgba(126, 165, 191, 0.08);
    border: 1px solid rgba(196, 223, 240, 0.16);
    box-shadow:
        0 18px 30px rgba(5, 16, 25, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px) saturate(128%);
    -webkit-backdrop-filter: blur(16px) saturate(128%);
}

/* .trip-focus-label 的主要视觉与布局效果*/
.trip-focus-label {
    margin: 0 0 12px;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(189, 218, 235, 0.62);
}

/* .trip-focus-card h3, .trip-prep-card h3 的主要视觉与布局效果*/
.trip-focus-card h3,
.trip-prep-card h3 {
    margin: 0 0 12px;
    font-size: 1.18rem;
    color: #f4fbff;
}

/* .trip-focus-card p, .trip-prep-card p 的主要视觉与布局效果*/
.trip-focus-card p,
.trip-prep-card p {
    margin: 0;
    line-height: 1.82;
    color: rgba(208, 225, 235, 0.74);
}

/* .prep-system 的主要视觉与布局效果*/
.prep-system {
    max-width: 1240px;
    margin: 0 auto;
}

/* .prep-card-grid 的主要视觉与布局效果*/
.prep-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 26px;
}

/* 下潜准备卡片：控制卡片外观、层次和激活反馈。 */
.prep-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 22px 22px 20px;
    border-radius: 28px;
    text-align: left;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(169, 205, 226, 0.08) 100%),
        rgba(126, 165, 191, 0.08);
    border: 1px solid rgba(196, 223, 240, 0.14);
    box-shadow:
        0 18px 30px rgba(5, 16, 25, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px) saturate(128%);
    -webkit-backdrop-filter: blur(16px) saturate(128%);
    transition:
        transform 320ms ease,
        box-shadow 320ms ease,
        border-color 320ms ease,
        background 320ms ease,
        opacity 320ms ease,
        filter 320ms ease;
    overflow: hidden;
    opacity: 0.8;
    filter: saturate(0.9) brightness(0.94);
}

/* .prep-card::before：卡片表面的扫光层，hover 或激活时会更明显。 */
.prep-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.08) 72%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transform: translateX(-16%);
    transition: opacity 320ms ease, transform 420ms ease;
    pointer-events: none;
}

/* 选中态的海流高光条：
   不用按钮式实心高亮，而是在卡片顶部给一条更像“当前这层准备被照亮”的流光。 */
.prep-card::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(132, 202, 224, 0), rgba(198, 234, 247, 0.94), rgba(132, 202, 224, 0));
    opacity: 0;
    transform: translate3d(0, -6px, 0) scaleX(0.78);
    transform-origin: center;
    transition: opacity 320ms ease, transform 420ms cubic-bezier(0.2, 0.78, 0.22, 1);
    pointer-events: none;
}

/* .prep-card:hover, .prep-card.is-active 鼠标移入时的样式 */
.prep-card:hover,
.prep-card.is-active {
    opacity: 1;
    filter: saturate(1) brightness(1);
    transform: translateY(-4px);
    border-color: rgba(218, 239, 250, 0.46);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(181, 217, 236, 0.12) 100%),
        rgba(126, 165, 191, 0.12);
    box-shadow:
        0 28px 44px rgba(6, 19, 30, 0.2),
        0 0 28px rgba(174, 221, 245, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* hover / 激活时让扫光显现，提示这张准备卡正在被查看。 */
.prep-card:hover::before,
.prep-card.is-active::before {
    opacity: 1;
    transform: translateX(0);
}

.prep-card:hover::after,
.prep-card.is-active::after {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleX(1);
}

/* .prep-card-kicker 的主要视觉与布局效果*/
.prep-card-kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(187, 216, 233, 0.58);
}

.prep-card.is-active .prep-card-kicker {
    color: rgba(221, 241, 249, 0.86);
}

/* .prep-card-title 的主要视觉与布局效果*/
.prep-card-title {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: 1.24rem;
    color: #f4fbff;
}

.prep-card.is-active .prep-card-title {
    color: #ffffff;
    text-shadow: 0 10px 22px rgba(3, 18, 31, 0.18);
}

/* .prep-card-summary 的主要视觉与布局效果*/
.prep-card-summary {
    margin: 0;
    min-height: 7.1em;
    max-height: 7.1em;
    overflow: hidden;
    line-height: 1.78;
    color: rgba(205, 223, 234, 0.76);
}

.prep-card.is-active .prep-card-summary {
    color: rgba(233, 244, 250, 0.92);
}

/* 准备系统右侧详情面板：负责展开后的说明内容和玻璃质感。 */
.prep-detail-panel {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    padding: 28px 28px 24px;
    border-radius: 32px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(169, 205, 226, 0.08) 100%),
        rgba(126, 165, 191, 0.08);
    border: 1px solid rgba(196, 223, 240, 0.16);
    box-shadow:
        0 24px 40px rgba(6, 19, 30, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(18px) saturate(132%);
    -webkit-backdrop-filter: blur(18px) saturate(132%);
}

/* 准备详情面板的首次出现也跟着海层一起“落下来”，
   避免它在内容已写入后直接静止出现。 */
.prep-detail-panel.trip-reveal-panel {
    opacity: 0;
    transform: translate3d(0, -26px, 0) scale(0.986);
    filter: blur(20px);
    transition:
        opacity 800ms cubic-bezier(0.16, 0.82, 0.2, 1),
        transform 1040ms cubic-bezier(0.16, 0.82, 0.2, 1),
        filter 1040ms ease,
        box-shadow 360ms ease;
}

.prep-detail-panel.trip-reveal-panel.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

/* 切换准备主题时，整块详情面板先轻微沉回海里，再把新内容托起来。
   这样用户会感觉是在同一块玻璃板里换到另一种准备层，而不是内容被硬替换。 */
.prep-detail-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    background:
        radial-gradient(circle at 18% 14%, rgba(214, 239, 250, 0.18) 0%, rgba(214, 239, 250, 0) 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 34%, rgba(145, 208, 234, 0.1) 72%, rgba(255, 255, 255, 0) 100%);
    filter: blur(14px);
}

.prep-detail-panel.is-switching {
    animation: prep-detail-panel-refresh 760ms cubic-bezier(0.16, 0.82, 0.2, 1);
}

.prep-detail-panel.is-switching::after {
    animation: prep-detail-panel-glow 760ms ease;
}

/* .prep-detail-head 的主要视觉与布局效果*/
.prep-detail-head {
    margin-bottom: 24px;
}

.prep-detail-panel.is-switching .prep-detail-head {
    animation: prep-detail-head-refresh 760ms cubic-bezier(0.16, 0.82, 0.2, 1);
}

/* .prep-detail-kicker 的主要视觉与布局效果*/
.prep-detail-kicker {
    margin: 0 0 10px;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(188, 217, 234, 0.56);
}

/* .prep-detail-title 的主要视觉与布局效果*/
.prep-detail-title {
    margin: 0 0 12px;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    color: #f4fbff;
}

/* .prep-detail-summary 的主要视觉与布局效果*/
.prep-detail-summary {
    margin: 0;
    max-width: 820px;
    line-height: 1.86;
    color: rgba(205, 223, 234, 0.76);
}

/* .prep-detail-content 的主要视觉与布局效果*/
.prep-detail-content {
    display: grid;
    gap: 16px;
}

/* .prep-detail-block 的主要视觉与布局效果*/
.prep-detail-block {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    filter: blur(10px);
    padding: 18px 18px 16px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(196, 223, 240, 0.08);
    transition:
        opacity 620ms ease,
        transform 720ms cubic-bezier(0.16, 0.8, 0.2, 1),
        filter 720ms ease;
}

/* 详情块改成独立的内容显现类：
   面板本身保持稳定，切换时只让新内容一层层托出来，
   不再靠面板整体反复退场/进场，避免你看到的“抖一下”。 */
.prep-detail-block.is-ready {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

/* 详情块按顺序追加延迟，让阅读节奏更像一层层展开。 */
.prep-detail-block.is-ready:nth-child(1) { transition-delay: 40ms; }
.prep-detail-block.is-ready:nth-child(2) { transition-delay: 130ms; }
.prep-detail-block.is-ready:nth-child(3) { transition-delay: 220ms; }
.prep-detail-block.is-ready:nth-child(4) { transition-delay: 310ms; }
.prep-detail-block.is-ready:nth-child(5) { transition-delay: 400ms; }

/* 已收进行程里的两张卡不再只是普通 reveal，而是左右轻错落地被海流托出来。 */
.confirmed-bookings-list.is-refreshing .confirmed-booking-card {
    pointer-events: none;
}

.confirmed-booking-card.is-entering {
    animation: confirmed-booking-card-rise 860ms cubic-bezier(0.16, 0.82, 0.2, 1) both;
}

.confirmed-booking-card.is-entering:nth-child(odd) {
    animation-name: confirmed-booking-card-rise-left;
}

.confirmed-booking-card.is-entering:nth-child(even) {
    animation-name: confirmed-booking-card-rise-right;
}

.confirmed-booking-card.is-entering::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 24% 16%, rgba(227, 244, 252, 0.14) 0%, rgba(227, 244, 252, 0) 30%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 34%, rgba(160, 219, 241, 0.08) 70%, rgba(255, 255, 255, 0) 100%);
    animation: confirmed-booking-card-sheen 820ms ease both;
}

.prep-detail-block h4 {
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 600;
    color: #f4fbff;
}

/* .prep-detail-block p 的主要视觉与布局效果*/
.prep-detail-block p {
    margin: 0;
    line-height: 1.82;
    color: rgba(207, 224, 234, 0.74);
}

/* .prep-detail-list 的主要视觉与布局效果*/
.prep-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* .prep-detail-item 的主要视觉与布局效果*/
.prep-detail-item {
    padding: 14px 14px 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(196, 223, 240, 0.08);
}

/* .prep-detail-item h5 的主要视觉与布局效果*/
.prep-detail-item h5 {
    margin: 0 0 8px;
    font-size: 0.96rem;
    color: #f5fbff;
}

/* .prep-detail-item p 的主要视觉与布局效果*/
.prep-detail-item p {
    font-size: 0.92rem;
}

/* .prep-rhythm-list, .prep-timeline 的主要视觉与布局效果*/
.prep-rhythm-list,
.prep-timeline {
    display: grid;
    gap: 10px;
}

/* .prep-rhythm-list span, .prep-timeline span 的主要视觉与布局效果*/
.prep-rhythm-list span,
.prep-timeline span {
    display: block;
    padding: 10px 12px;
    border-radius: 999px;
    color: rgba(229, 242, 249, 0.84);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(196, 223, 240, 0.08);
}

/* 二级内容入口按钮：控制折叠子内容的展开入口。 */
.prep-subtoggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    color: #f5fbff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(210, 234, 247, 0.12);
    transition: transform 220ms ease, background-color 220ms ease, border-color 220ms ease;
}

/* .prep-subtoggle:hover 鼠标移入时的样式 */
.prep-subtoggle:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(210, 234, 247, 0.2);
}

/* 二级子面板默认折叠：先收起高度、透明度和位移。 */
.prep-subpanel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition:
        max-height 420ms ease,
        opacity 320ms ease,
        transform 420ms ease,
        margin-top 320ms ease;
}

/* 子面板打开后恢复高度和透明度，让内容自然滑出。 */
.prep-subpanel.is-open {
    max-height: 1400px;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    margin-top: 14px;
}

.prep-path-grid,
.prep-cert-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.prep-path-step,
.prep-cert-link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100%;
    padding: 14px 14px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(196, 223, 240, 0.08);
}

.prep-path-step-label,
.prep-cert-link-agency {
    margin: 0;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(147, 196, 220, 0.78);
}

.prep-path-step h5,
.prep-cert-link strong {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.5;
    color: #f5fbff;
}

.prep-path-step p,
.prep-cert-link span:last-child {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.76;
    color: rgba(207, 224, 234, 0.74);
}

.prep-cert-link {
    text-decoration: none;
    transition:
        transform 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.prep-cert-link:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(186, 221, 240, 0.18);
    box-shadow: 0 18px 36px rgba(3, 20, 32, 0.2);
}

.prep-cert-note {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 18px;
    line-height: 1.78;
    color: rgba(221, 236, 245, 0.78);
    background: rgba(121, 169, 194, 0.08);
    border: 1px solid rgba(180, 217, 235, 0.12);
}

/* 行程页 footer：给首屏和页脚之间留出更自然的收束空间。 */
.trip-page .footer {
    padding-top: 70px;
}

@media (max-width: 1279px) {
    .prep-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 中屏断点：开始把 行程页从大舞台收成更适合平板阅读的结构。 */
@media (max-width: 980px) {
    /* 先把大块区域改成单列，避免横向内容过挤。 */
    .trip-focus-grid,
    .trip-prep-grid {
        grid-template-columns: 1fr;
    }

    /* 首屏 舞台在中屏下收紧内边距和圆角，保持完整但不过重。 */
    .trip-hero-stage {
        padding: 30px;
        border-radius: 32px;
    }

    .trip-hero-copy {
        grid-template-columns: 1fr;
        grid-template-areas:
            "kicker"
            "title"
            "subtitle"
            "current"
            "actions";
        row-gap: 0;
        margin-bottom: 28px;
    }

    /* 准备卡与详情列表都改成单列，优先保证可读性。 */
    .prep-card-grid,
    .prep-detail-list,
    .prep-path-grid,
    .prep-cert-link-grid {
        grid-template-columns: 1fr;
    }

    .prep-card-summary {
        min-height: auto;
        max-height: none;
    }

    /* Planner 总壳层在中屏下改成单列堆叠：摘要、已收进行程、控制台依次排开。 */
    .trip-page-planner .trip-planner-shell {
        grid-template-areas:
            "confirmed"
            "search"
            "summary";
        grid-template-columns: 1fr;
        gap: 22px;
    }

    /* 中屏下继续把回执托盘收窄，避免它重新长成第三块主模块。 */
    .planner-summary {
        margin: -6px 12px 0;
    }

    .planner-summary-head,
    .planner-summary-draft-steps {
        grid-template-columns: 1fr;
    }

    .planner-summary-draft-rail {
        grid-template-columns: 1fr;
    }

    .planner-summary-swim-stage.has-multiple {
        grid-template-columns: 104px minmax(0, 1fr) 104px;
        gap: 12px;
    }

    .planner-summary-neighbor {
        padding: 16px 12px;
        border-radius: 22px;
    }

    .planner-summary-neighbor-name {
        font-size: 0.88rem;
    }

    .planner-summary-neighbor-status-text {
        display: none;
    }

    /* Planner 控制台在中屏下仍保留两列，但把海域放整行，防止信息太满。 */
    .trip-page-planner .trip-search-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "head head"
            "spot spot"
            "date people"
            "action action";
    }

    /* 按钮横跨整行，形成更自然的“收束动作”结尾。 */
    .planner-submit-btn {
        min-height: 92px;
    }
}

/* 小屏断点：继续收紧首屏留白，保证 首屏 和功能区不贴边。 */
@media (max-width: 768px) {
    /* 手机前的过渡断点：先压缩 首屏 左右边距。 */
    .trip-hero {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    /* 其它分区同步收紧左右留白，保持页面边缘一致。 */
    .trip-focus-section,
    .trip-prep-section {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
}

/* 手机端行程控制台：
   重点不是缩得更小，而是保留完整可读性和点击空间。 */
@media (max-width: 600px) {
    /* 手机端 首屏 按钮改纵向堆叠，避免横向挤压。 */
    .trip-hero-actions {
        flex-direction: column;
    }

    /* 让按钮在手机端占满宽度，更像一条安静的流向。 */
    .trip-hero-actions .sea-action {
        width: 100%;
    }

    /* 手机端控制台改成单列，海域、日期、人数依次排开。 */
    .trip-page-planner .trip-search-bar {
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "spot"
            "date"
            "people"
            "action";
        padding: 18px;
    }

    .planner-summary {
        margin: 0;
        padding: 14px 16px 16px;
        border-radius: 22px;
        gap: 10px;
    }

    .planner-summary-head {
        gap: 8px;
    }

    .planner-summary-status-note {
        font-size: 0.84rem;
    }

    .planner-summary-draft-steps {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .planner-summary-draft-rail {
        grid-template-columns: 1fr;
    }

    .planner-summary-swim-stage.has-multiple {
        grid-template-columns: 68px minmax(0, 1fr) 68px;
        gap: 8px;
    }

    .planner-summary-neighbor {
        padding: 14px 8px;
        align-content: center;
        justify-items: center;
        border-radius: 18px;
        text-align: center;
    }

    .planner-summary-neighbor-kicker,
    .planner-summary-neighbor-package,
    .planner-summary-neighbor-status-text {
        display: none;
    }

    .planner-summary-neighbor-name {
        font-size: 0.72rem;
        line-height: 1.4;
        text-wrap: balance;
    }

    .planner-summary-neighbor-status {
        justify-content: center;
    }

    /* 手机端适当缩小字段最小高度，保留层级但不让整体过长。 */
    .planner-field,
    .planner-submit-btn {
        min-height: 116px;
    }

    .planner-field-select[data-planner-field="spot"] {
        min-height: 198px;
    }

/* 手机端浮层尺寸说明：
   这里专门解释你提到的 `100vw - 24px`、`min(...)` 这一类计算。
   目标是让面板在小屏里尽量完整显示，同时始终给屏幕边缘留出呼吸空间。 */
    .planner-option-panel {
        grid-template-columns: 1fr; /* 手机上改成单列，避免两列卡片挤在一起看不清 */
        width: calc(100vw - 24px); /* 面板宽度 = 屏幕宽度减去 24px，也就是左右各留 12px */
        max-width: calc(100vw - 24px); /* 再补一层最大宽度限制，避免某些定位场景下仍超出屏幕 */
        max-height: min(58vh, calc(100vh - 24px));
        /* 这里比较两个值，取更小的那个。
           1. 58vh：别让浮层在手机上占掉太多垂直空间。
           2. 100vh - 24px：同时保证上下各 12px，不会顶住屏幕边缘。 */
        padding: 12px; /* 手机端把内边距收紧一点，但仍然保留面板的留白。 */
    }

    .planner-option-panel-compact {
        grid-template-columns: 1fr; /* 人数面板也改单列，避免小屏里两列选项显得局促。 */
    }

    .planner-calendar-panel {
        width: calc(100vw - 24px); /* 日历面板和选项面板沿用同一套左右边距规则，看起来更统一 */
        padding: 14px; /* 日历要比普通选项卡留更多内边距，避免月份标题和日期格太挤 */
    }

    .planner-calendar-day {
        min-height: 42px; /* 手机上把单元格高度收一点，这样整个月更容易在一屏里看完 */
    }

    /* 手机端进一步收紧 首屏 / 焦点卡 / 准备卡的内边距和圆角。 */
    .trip-hero-stage,
    .trip-focus-card,
    .trip-prep-card {
        padding: 20px 18px;
        border-radius: 24px;
    }

    /* 手机端同步收紧准备卡和详情面板，让整段内容不会过长。 */
    .prep-card,
    .prep-detail-panel {
        padding: 20px 18px;
        border-radius: 24px;
    }

    /* 窄屏下 planner-item 转为扁平列表线分隔，去除卡片背景与圆角，仅保留底部边框。 */
    .planner-item {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "index state"
            "copy copy";
        gap: 8px 10px;
        min-height: auto;
        padding: 12px 0;
        border-width: 0 0 1px;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .planner-item::before {
        content: none;
    }

    .planner-item:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .planner-item-index {
        width: 34px;
        height: 34px;
        border-radius: 11px;
    }

    .planner-item-state {
        justify-self: end;
    }
}
.planner-option-custom {
    grid-column: 1 / -1;
}

.planner-custom-people {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(205, 229, 242, 0.08);
}

.planner-custom-people-label {
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(194, 221, 236, 0.54);
}

.planner-custom-people-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.planner-custom-people-input {
    min-height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(205, 229, 242, 0.12);
    background: rgba(9, 28, 43, 0.56);
    color: #f4fbff;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}

.planner-custom-people-input::placeholder {
    color: rgba(194, 221, 236, 0.34);
}

.planner-custom-people-input:focus {
    border-color: rgba(214, 238, 248, 0.22);
    box-shadow: 0 0 0 3px rgba(120, 185, 215, 0.08);
}

/* 自定义人数确认按钮：与输入框等高、右对齐，hover 时上浮 1px。 */
.planner-custom-people-apply {
    min-height: 46px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(205, 229, 242, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(138, 178, 201, 0.05) 100%),
        rgba(10, 33, 49, 0.56);
    color: #eef6ff;
    transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.planner-custom-people-apply:hover {
    transform: translateY(-1px);
    border-color: rgba(214, 238, 248, 0.18);
    box-shadow: 0 12px 18px rgba(2, 12, 20, 0.16);
}

.planner-custom-people-note {
    margin: 0;
    line-height: 1.65;
    color: rgba(194, 221, 236, 0.58);
}

/* 已收进行程区域：让 行程页确认过的套餐，以更安静的海域档案方式停留在 行程页里。 */
.confirmed-bookings-stage {
    grid-area: confirmed;
    position: relative;
    display: grid;
    gap: 18px;
    padding: 24px 24px 22px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 16% 0%, rgba(192, 228, 243, 0.12) 0%, rgba(192, 228, 243, 0) 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(138, 178, 201, 0.04) 100%),
        rgba(7, 24, 38, 0.48);
    border: 1px solid rgba(205, 229, 242, 0.1);
    box-shadow:
        0 18px 30px rgba(4, 17, 28, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    filter: blur(18px);
    animation: planner-desk-rise 960ms cubic-bezier(0.16, 0.82, 0.2, 1) 560ms forwards;
}

/* 头部区域：flex 布局将标题文字与切换按钮分列两端。 */
.confirmed-bookings-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

/* 头部文本容器：grid 堆叠，限制阅读宽度以获得舒适的换行。 */
.confirmed-bookings-copy {
    display: grid;
    gap: 10px;
    max-width: 60ch;
}

/* 小标题（kicker）：大写、字距宽松、低对比度，作为 section 的引导标签。 */
.confirmed-bookings-kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(194, 221, 236, 0.5);
}

/* 区域主标题：衬线字体、亮白，传达品牌感与沉稳气质。 */
.confirmed-bookings-title {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.34rem, 1.8vw, 1.7rem);
    line-height: 1.34;
    color: #f4fbff;
}

/* 引导描述：稍大的行高与柔和文字颜色，方便阅读段落内容。 */
.confirmed-bookings-intro {
    margin: 0;
    line-height: 1.78;
    color: rgba(208, 224, 235, 0.72);
}

/* 切换按钮（如“查看全部 / 仅看当前”）：药丸造型、半透毛玻璃，悬浮感。 */
.confirmed-bookings-switch {
    flex: 0 0 auto;
    align-self: flex-start;
    padding: 12px 18px;
    border: 1px solid rgba(205, 229, 242, 0.1);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(138, 178, 201, 0.04) 100%),
        rgba(7, 24, 38, 0.44);
    color: rgba(236, 246, 250, 0.84);
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        0 14px 26px rgba(4, 17, 28, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition:
        transform 280ms ease,
        border-color 280ms ease,
        color 280ms ease,
        box-shadow 280ms ease,
        opacity 280ms ease;
}

/* 切换按钮悬停：上浮并增加边框亮度与发光，强调可点击。 */
.confirmed-bookings-switch:hover {
    transform: translateY(-2px);
    border-color: rgba(216, 239, 248, 0.18);
    color: #f4fbff;
    box-shadow:
        0 18px 30px rgba(4, 17, 28, 0.16),
        0 0 18px rgba(111, 180, 210, 0.08);
}

/* 切换按钮按下：轻压下压模拟真实按键反馈。 */
.confirmed-bookings-switch:active {
    transform: translateY(1px);
}

/* 激活提示文字：用于说明当前筛选或展示状态。 */
.confirmed-bookings-active-note {
    margin: 0;
    line-height: 1.7;
    color: rgba(222, 237, 245, 0.78);
}

/* “回显”提示卡：flex 将左侧文本与右侧标签组分开，浅色半透底边框。 */
.confirmed-bookings-echo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(205, 229, 242, 0.08);
}

/* 回显文本容器：grid 堆叠提示词与具体行。 */
.confirmed-bookings-echo-copy {
    display: grid;
    gap: 8px;
}

/* 回显内的标签与正文行统一重置 margin。 */
.confirmed-bookings-echo-kicker,
.confirmed-bookings-echo-line {
    margin: 0;
}

/* 回显标签：大写、小字、低对比度，不抢主信息。 */
.confirmed-bookings-echo-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(193, 220, 235, 0.5);
}

/* 回显正文：稍大行高，柔和亮色阅读舒适。 */
.confirmed-bookings-echo-line {
    line-height: 1.72;
    color: rgba(223, 238, 246, 0.82);
}

/* 回显右侧标签组：flex 换行、右对齐，可容纳多个小 Chip。 */
.confirmed-bookings-echo-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/* 回显小标签：药丸造型、浅青底，展示简短元信息如人数／天数。 */
.confirmed-bookings-echo-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(177, 222, 241, 0.08);
    border: 1px solid rgba(197, 231, 246, 0.12);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(232, 244, 250, 0.82);
}

/* Trip 页沿用首页的海图导览样式，但这里的导览项更多。
   稍微加高面板，并给第 7 项补一个更自然的延迟，避免展开时最后一项突兀挤出来。 */
.trip-page .sea-guide-home .sea-guide-panel {
    max-height: min(68vh, 620px);
}

.trip-page .sea-guide-home.is-open .sea-guide-entry:nth-child(7) {
    transition-delay: 170ms;
}

/* 空状态提示：浅底、圆角、低对比文字，温和地告知暂无确认订单。 */
.confirmed-bookings-empty {
    padding: 18px 18px 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(205, 229, 242, 0.08);
    line-height: 1.76;
    color: rgba(198, 217, 229, 0.62);
}

/* 确认卡片网格：两列等宽布局，间距均匀，适合展示多张卡片。 */
.confirmed-bookings-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* 列表准备切换或初次进入时，先由父层把两张卡统一收在海雾里。
   这样卡片不会先裸露一帧再被压回去，能避免“短暂显示一会又消失”的问题。 */
.confirmed-bookings-list.is-refreshing .confirmed-booking-card:not(.is-entering) {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.988);
    filter: blur(18px);
}

.confirmed-bookings-list.is-refreshing .confirmed-booking-card:nth-child(odd):not(.is-entering) {
    transform: translate3d(-20px, 30px, 0) scale(0.986);
}

.confirmed-bookings-list.is-refreshing .confirmed-booking-card:nth-child(even):not(.is-entering) {
    transform: translate3d(20px, 30px, 0) scale(0.986);
}

/* 单张确认卡片：圆角毛玻璃卡片、grid 布局堆叠内部信息，模拟水下档案卡质感。 */
.confirmed-booking-card {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 20px 20px 18px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(137, 178, 200, 0.05) 100%),
        rgba(8, 26, 40, 0.6);
    border: 1px solid rgba(204, 228, 239, 0.1);
    box-shadow:
        0 16px 28px rgba(4, 17, 28, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition: transform 320ms ease, border-color 320ms ease, box-shadow 320ms ease, opacity 320ms ease, filter 320ms ease;
}

/* 卡片悬停：上浮 3px 并增加发光阴影，强化可交互的潜水档案感。 */
.confirmed-booking-card:hover {
    transform: translateY(-3px);
    border-color: rgba(214, 238, 248, 0.16);
    box-shadow:
        0 22px 34px rgba(4, 17, 28, 0.18),
        0 0 22px rgba(104, 171, 203, 0.08);
}

/* 卡片激活态：边框与阴影显著加亮，用于标记当前选中的订单。 */
.confirmed-booking-card.is-active {
    border-color: rgba(196, 230, 251, 0.28);
    box-shadow:
        0 24px 42px rgba(4, 17, 28, 0.22),
        0 0 30px rgba(118, 199, 232, 0.14),
        inset 0 0 0 1px rgba(203, 234, 247, 0.12);
}

/* 卡片顶部行：flex 将元信息与状态徽章分列左右。 */
.confirmed-booking-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

/* 元信息区：grid 堆叠分类标签、地点名、副标题。 */
.confirmed-booking-meta {
    display: grid;
    gap: 8px;
}

/* 卡片分类标签：大写、低对比度，用于标识“行程”或“附加服务”。 */
.confirmed-booking-kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(191, 218, 233, 0.56);
}

/* 潜点／套餐名称：衬线字体、亮白，卡片的视觉重心。 */
.confirmed-booking-spot {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: 1.18rem;
    color: #f4fbff;
}

/* 简短副标题：描述行程亮点或简要说明。 */
.confirmed-booking-tagline {
    margin: 0;
    line-height: 1.7;
    color: rgba(208, 224, 235, 0.72);
}

/* 状态药丸标识：如“已确认”、“进行中”，浅青底强调完成态。 */
.confirmed-booking-state {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(180, 233, 248, 0.12);
    border: 1px solid rgba(196, 230, 251, 0.18);
    color: rgba(233, 246, 251, 0.84);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
}

/* 通用小标签（chip / tag）：药丸造型，用于展示分类或关键词。 */
.confirmed-booking-chip,
.confirmed-booking-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(205, 229, 242, 0.08);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(233, 244, 249, 0.82);
}

/* 卡片主体内容容器：grid 堆叠价格、说明、标签等模块。 */
.confirmed-booking-body {
    display: grid;
    gap: 10px;
}

/* 价格展示区域：grid 堆叠多行价格信息。 */
.confirmed-booking-price-wrap {
    display: grid;
    gap: 6px;
}

/* 价格行：flex 让主价格与币种／备注同行排列。 */
.confirmed-booking-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

/* 主价格数字：大字号粗体、亮白色，视觉重点突出。 */
.confirmed-booking-price {
    font-size: 1.36rem;
    font-weight: 700;
    color: #eff8ff;
}

/* 人民币标识（CNY）：次于主价的小字注释。 */
.confirmed-booking-price-cny {
    font-size: 0.86rem;
    letter-spacing: 0.02em;
    color: rgba(198, 224, 236, 0.74);
}

/* 价格备注：如“每人每晚”，低对比度小字不干扰价格阅读。 */
.confirmed-booking-price-note {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(194, 221, 236, 0.58);
}

/* 额外备注段落：用于说明取消政策或温馨提示。 */
.confirmed-booking-note {
    margin: 0;
    line-height: 1.76;
    color: rgba(207, 223, 235, 0.72);
}

/* 标签集合：flex 换行排列多个小标签。 */
.confirmed-booking-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 详情网格：三列等宽展示日期、人数、时长等字段。 */
.confirmed-booking-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* 单个详情按钮：去除原生外观、grid 内堆叠标签与数值，可点击切换。 */
.confirmed-booking-detail {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(205, 229, 242, 0.06);
    text-align: left;
    cursor: pointer;
    transition:
        transform 240ms ease,
        border-color 240ms ease,
        background-color 240ms ease,
        box-shadow 240ms ease;
}

/* 详情按钮悬停／聚焦：上浮并加亮边框，提供点击反馈。 */
.confirmed-booking-detail:hover,
.confirmed-booking-detail:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(205, 229, 242, 0.18);
    background: rgba(255, 255, 255, 0.065);
    box-shadow: 0 14px 24px rgba(4, 16, 26, 0.12);
    outline: none;
}

/* 详情字段的标签文字：大写、字间距宽松、低对比度。 */
.confirmed-booking-detail-label {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(189, 213, 227, 0.48);
}

/* 详情字段内的值：加粗、亮白，突出显示具体数字或摘要。 */
.confirmed-booking-detail strong {
    font-size: 0.94rem;
    line-height: 1.55;
    color: #eef6ff;
}

/* 静态详情（不可点击）：禁用指针样式，区别于可编辑项。 */
.confirmed-booking-detail-static {
    cursor: default;
}

/* 静态详情去除悬停和聚焦效果，保持视觉一致但不反馈交互。 */
.confirmed-booking-detail-static:hover,
.confirmed-booking-detail-static:focus-visible {
    transform: none;
    border-color: rgba(205, 229, 242, 0.06);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
}

/* 操作按钮行：flex 排列链接、简报、删除等操作。 */
.confirmed-booking-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* 通用操作按钮：药丸造型、半透底，统一样式用于链接／简报／删除。 */
.confirmed-booking-link,
.confirmed-booking-brief,
.confirmed-booking-remove {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(205, 229, 242, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #f3fbff;
    border-radius: 999px;
    padding: 11px 16px;
    line-height: 1;
    transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

/* “简报”按钮：独立的渐变背景与较亮边框，视觉上更突出。 */
.confirmed-booking-brief {
    background:
        linear-gradient(180deg, rgba(191, 231, 247, 0.16), rgba(139, 201, 225, 0.08)),
        rgba(255, 255, 255, 0.08);
    border-color: rgba(190, 227, 241, 0.18);
}

/* 操作按钮悬停：统一上浮并增加边框亮度。 */
.confirmed-booking-link:hover,
.confirmed-booking-brief:hover,
.confirmed-booking-remove:hover {
    transform: translateY(-2px);
    border-color: rgba(214, 238, 248, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 980px) {
    .trip-proof-flow-list {
        grid-template-columns: 1fr;
    }

    /* 窄屏回显卡改为纵向堆叠，标签左对齐。 */
    .confirmed-bookings-echo {
        flex-direction: column;
    }

    .confirmed-bookings-echo-meta {
        justify-content: flex-start;
    }

    /* 确认卡片列表由双列改为单列。 */
    .confirmed-bookings-list {
        grid-template-columns: 1fr;
    }

    /* 头部改为纵向排列，按钮自然换行。 */
    .confirmed-bookings-head {
        flex-direction: column;
        align-items: stretch;
    }

    .confirmed-bookings-switch {
        align-self: flex-start;
    }
}

@media (max-width: 600px) {
    .trip-proof-flow {
        margin-inline: 18px;
        padding: 18px;
        border-radius: 24px;
    }

    .trip-proof-flow-step {
        padding: 16px;
        border-radius: 18px;
    }

    /* 小屏下确认区域与卡片缩小平滑过渡。 */
    .confirmed-bookings-stage {
        padding: 18px;
        border-radius: 24px;
    }

    .confirmed-booking-card {
        padding: 18px 16px 16px;
        border-radius: 22px;
    }

    /* 顶部行与详情网格在小屏改为单列。 */
    .confirmed-booking-top,
    .confirmed-booking-details {
        grid-template-columns: 1fr;
        display: grid;
    }

    /* 操作按钮纵向堆叠并撑满宽度。 */
    .confirmed-booking-actions {
        flex-direction: column;
    }

    .confirmed-booking-link,
    .confirmed-booking-brief,
    .confirmed-booking-remove {
        width: 100%;
        justify-content: center;
    }
}

.planner-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 4px;
}

.planner-calendar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(205, 229, 242, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(228, 240, 247, 0.78);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
}

.planner-calendar-legend-item::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(190, 224, 239, 0.7);
    box-shadow: 0 0 0 4px rgba(154, 204, 229, 0.08);
}

.planner-calendar-legend-item.is-recommended::before {
    background: rgba(154, 232, 220, 0.92);
    box-shadow: 0 0 0 4px rgba(118, 219, 204, 0.1);
}

.planner-calendar-legend-item.is-available::before {
    background: rgba(148, 211, 241, 0.86);
}

.planner-calendar-legend-item.is-caution::before {
    background: rgba(245, 197, 132, 0.92);
    box-shadow: 0 0 0 4px rgba(245, 197, 132, 0.1);
}

.planner-calendar-day.is-available {
    border-color: rgba(180, 225, 245, 0.12);
}

.planner-calendar-day.is-available::after {
    opacity: 0.68;
    background: rgba(145, 214, 243, 0.78);
}

.planner-calendar-day.is-recommended {
    border-color: rgba(160, 229, 219, 0.24);
    background:
        radial-gradient(circle at 50% 18%, rgba(143, 219, 201, 0.22), rgba(143, 219, 201, 0) 42%),
        linear-gradient(180deg, rgba(84, 134, 127, 0.16), rgba(15, 54, 58, 0.58));
    box-shadow: inset 0 1px 0 rgba(214, 247, 240, 0.12);
}

.planner-calendar-day.is-recommended::after {
    background: rgba(155, 235, 222, 0.96);
    box-shadow: 0 0 14px rgba(122, 218, 205, 0.36);
}

.planner-calendar-day.is-caution {
    border-color: rgba(243, 197, 132, 0.2);
    background:
        radial-gradient(circle at 50% 18%, rgba(248, 202, 146, 0.16), rgba(248, 202, 146, 0) 40%),
        linear-gradient(180deg, rgba(95, 71, 38, 0.18), rgba(45, 30, 16, 0.48));
    color: rgba(247, 232, 213, 0.92);
}

.planner-calendar-day.is-caution::after {
    opacity: 1;
    background: rgba(247, 203, 139, 0.88);
    box-shadow: 0 0 12px rgba(245, 187, 108, 0.32);
}

.confirmed-booking-signal-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.confirmed-booking-signal {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(178, 221, 241, 0.14);
    background: rgba(155, 214, 236, 0.08);
    color: rgba(226, 242, 249, 0.84);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
}

.sea-brief-stage {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 20px;
    padding: 28px 30px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 14% 0%, rgba(204, 234, 247, 0.14), rgba(204, 234, 247, 0) 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(146, 188, 209, 0.02)),
        rgba(5, 18, 29, 0.82);
    border: 1px solid rgba(203, 230, 242, 0.14);
    box-shadow:
        0 30px 56px rgba(4, 16, 26, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.sea-brief-copy,
.sea-brief-card {
    position: relative;
    z-index: 1;
}

.sea-brief-kicker {
    margin: 0 0 10px;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(193, 221, 236, 0.58);
}

.sea-brief-title {
    margin: 0 0 12px;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.48rem, 2.2vw, 2rem);
    color: #f5fbff;
}

.sea-brief-intro {
    margin: 0;
    max-width: 860px;
    line-height: 1.84;
    color: rgba(211, 228, 237, 0.7);
}

.sea-brief-empty {
    padding: 20px 22px;
    border-radius: 24px;
    border: 1px solid rgba(201, 228, 240, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(213, 230, 240, 0.68);
    line-height: 1.8;
}

.sea-brief-card {
    display: grid;
    gap: 20px;
    padding: 24px 24px 22px;
    border-radius: 30px;
    border: 1px solid rgba(203, 230, 242, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(140, 183, 204, 0.03)),
        rgba(6, 22, 35, 0.74);
    box-shadow:
        0 24px 42px rgba(3, 14, 23, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sea-brief-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 16px;
}

.sea-brief-card-kicker {
    margin: 0 0 10px;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(190, 220, 235, 0.62);
}

.sea-brief-card-title {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.28rem, 1.8vw, 1.72rem);
    color: #f4fbff;
}

.sea-brief-card-identity {
    margin: 10px 0 0;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(191, 220, 235, 0.54);
}

.sea-brief-card-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    align-self: start;
}

.sea-brief-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(190, 227, 241, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(233, 245, 250, 0.86);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
}

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

.sea-brief-item {
    display: grid;
    gap: 6px;
    min-height: 86px;
    padding: 14px 14px 13px;
    border-radius: 20px;
    border: 1px solid rgba(203, 230, 242, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.sea-brief-item-label {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(186, 214, 229, 0.52);
}

.sea-brief-item-value {
    color: #eff8ff;
    font-size: 0.94rem;
    line-height: 1.68;
}

.sea-brief-prep {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 14px;
}

.sea-brief-prep-block {
    display: grid;
    gap: 12px;
    padding: 16px 16px 15px;
    border-radius: 22px;
    border: 1px solid rgba(203, 230, 242, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.sea-brief-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(206, 230, 241, 0), rgba(206, 230, 241, 0.18), rgba(206, 230, 241, 0));
}

.sea-brief-prep-label {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(188, 219, 234, 0.56);
}

.sea-brief-prep-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sea-brief-prep-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(157, 214, 239, 0.08);
    border: 1px solid rgba(190, 227, 241, 0.12);
    color: rgba(235, 246, 252, 0.84);
    font-size: 0.76rem;
    line-height: 1.4;
}

.sea-brief-prep-copy {
    margin: 0;
    color: rgba(220, 236, 244, 0.78);
    line-height: 1.82;
}

.sea-brief-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.sea-brief-action {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(205, 229, 242, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #f2fbff;
    transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.sea-brief-action:hover,
.sea-brief-action:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(214, 238, 248, 0.22);
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

.sea-brief-action[disabled] {
    opacity: 0.46;
    pointer-events: none;
}

.sea-brief-action-primary {
    background:
        linear-gradient(180deg, rgba(191, 231, 247, 0.16), rgba(139, 201, 225, 0.08)),
        rgba(255, 255, 255, 0.08);
    border-color: rgba(190, 227, 241, 0.18);
}

@media print {
    html,
    body {
        background: #ffffff !important;
    }

    body * {
        visibility: hidden !important;
    }

    #seaBriefStage,
    #seaBriefStage * {
        visibility: visible !important;
    }

    #seaBriefStage {
        position: absolute;
        inset: 0 auto auto 0;
        width: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: #ffffff !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #seaBriefStage .sea-brief-empty,
    #seaBriefStage .sea-brief-actions,
    #seaBriefLive {
        display: none !important;
    }

    #seaBriefStage .sea-brief-card,
    #seaBriefStage .sea-brief-stage,
    #seaBriefStage .sea-brief-prep-block,
    #seaBriefStage .sea-brief-item {
        background: #ffffff !important;
        border-color: rgba(25, 51, 68, 0.16) !important;
        box-shadow: none !important;
        color: #163041 !important;
    }

    #seaBriefStage .sea-brief-kicker,
    #seaBriefStage .sea-brief-card-kicker,
    #seaBriefStage .sea-brief-card-identity,
    #seaBriefStage .sea-brief-item-label,
    #seaBriefStage .sea-brief-prep-label,
    #seaBriefStage .sea-brief-intro {
        color: rgba(34, 63, 82, 0.72) !important;
    }

    #seaBriefStage .sea-brief-title,
    #seaBriefStage .sea-brief-card-title,
    #seaBriefStage .sea-brief-item-value,
    #seaBriefStage .sea-brief-prep-copy,
    #seaBriefStage .sea-brief-badge,
    #seaBriefStage .sea-brief-prep-chip {
        color: #163041 !important;
    }

    #seaBriefStage .sea-brief-badge,
    #seaBriefStage .sea-brief-prep-chip {
        background: rgba(22, 48, 65, 0.04) !important;
        border-color: rgba(25, 51, 68, 0.12) !important;
    }

    #seaBriefStage .sea-brief-divider {
        background: rgba(25, 51, 68, 0.12) !important;
    }
}

.prep-detail-dynamic {
    background:
        radial-gradient(circle at 18% 18%, rgba(204, 234, 246, 0.12), rgba(204, 234, 246, 0) 28%),
        rgba(255, 255, 255, 0.06);
    border-color: rgba(189, 223, 239, 0.12);
}

.prep-detail-inline-note {
    margin: 2px 0 0;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(194, 222, 236, 0.1);
    color: rgba(214, 232, 241, 0.72);
    line-height: 1.78;
}

@media (max-width: 1024px) {
    .sea-brief-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sea-brief-prep {
        grid-template-columns: 1fr;
    }

    .sea-brief-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sea-brief-action {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .planner-calendar-legend {
        gap: 8px;
    }

    .planner-calendar-legend-item {
        width: 100%;
        justify-content: flex-start;
    }

    .sea-brief-stage,
    .sea-brief-card {
        padding: 18px;
        border-radius: 24px;
    }

    .sea-brief-card-head {
        grid-template-columns: 1fr;
    }

    .sea-brief-card-badges,
    .sea-brief-grid {
        justify-content: flex-start;
        grid-template-columns: 1fr;
    }
}

/* Trip 状态证明区重构：
   把原来的三张同级玻璃卡压成“左侧轨道 + 右侧主舱”的 master-detail 结构。
   Sea Brief 继续作为主舞台，proof 信息只附着在上缘，不再单独占一整张卡。 */
.trip-page-planner .trip-planner-shell {
    grid-template-areas:
        "search"
        "summary"
        "confirmed";
}

.trip-brief-deck {
    grid-area: confirmed;
    display: grid;
    grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1.26fr);
    gap: 18px;
    align-items: start;
}

.confirmed-bookings-stage {
    grid-area: auto;
    gap: 14px;
    min-width: 0;
    padding: 22px 18px 18px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 50% 0%, rgba(198, 229, 244, 0.14), rgba(198, 229, 244, 0) 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(95, 135, 158, 0.03)),
        rgba(6, 20, 32, 0.66);
    border: 1px solid rgba(204, 229, 241, 0.08);
    box-shadow:
        0 24px 36px rgba(3, 12, 20, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none;
    animation: none;
}

.confirmed-bookings-head {
    align-items: flex-start;
    gap: 12px;
}

.confirmed-bookings-copy {
    gap: 8px;
    max-width: none;
}

.confirmed-bookings-title {
    font-size: clamp(1.16rem, 1.4vw, 1.4rem);
    line-height: 1.38;
}

.confirmed-bookings-switch {
    padding: 11px 14px;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
}

.confirmed-bookings-empty {
    padding: 16px 16px 15px;
    border-radius: 20px;
    font-size: 0.92rem;
    line-height: 1.72;
}

.confirmed-bookings-list {
    grid-template-columns: 1fr;
    gap: 12px;
}

.confirmed-bookings-list.is-refreshing .confirmed-booking-card:not(.is-entering) {
    opacity: 0;
    transform: translate3d(-14px, 18px, 0) scale(0.986);
    filter: blur(16px);
}

.confirmed-bookings-list.is-refreshing .confirmed-booking-card:nth-child(even):not(.is-entering) {
    transform: translate3d(14px, 18px, 0) scale(0.986);
}

.confirmed-booking-card {
    gap: 12px;
    padding: 16px 16px 15px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 0%, rgba(208, 236, 248, 0.12), rgba(208, 236, 248, 0) 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(128, 168, 191, 0.03)),
        rgba(8, 25, 39, 0.66);
    border: 1px solid rgba(202, 229, 240, 0.08);
    box-shadow:
        0 18px 28px rgba(3, 11, 18, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    cursor: pointer;
}

.confirmed-booking-card:hover {
    transform: translateY(-2px);
    border-color: rgba(214, 238, 248, 0.14);
    box-shadow:
        0 24px 34px rgba(3, 11, 18, 0.22),
        0 0 20px rgba(98, 167, 201, 0.08);
}

.confirmed-booking-card.is-active {
    transform: translate3d(4px, 0, 0);
    border-color: rgba(197, 231, 246, 0.22);
    box-shadow:
        0 26px 42px rgba(3, 11, 18, 0.24),
        0 0 26px rgba(114, 194, 227, 0.12),
        inset 0 0 0 1px rgba(208, 236, 248, 0.08);
}

.confirmed-booking-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.confirmed-booking-meta {
    gap: 6px;
}

.confirmed-booking-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
}

.confirmed-booking-spot {
    font-size: 1.08rem;
    line-height: 1.4;
}

.confirmed-booking-tagline {
    font-size: 0.84rem;
    line-height: 1.68;
    color: rgba(203, 222, 233, 0.68);
}

.confirmed-booking-chip {
    align-self: flex-start;
    justify-content: flex-start;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.045);
}

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

.confirmed-booking-track-item {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 11px 12px 10px;
    border-radius: 18px;
    border: 1px solid rgba(203, 230, 242, 0.08);
    background: rgba(255, 255, 255, 0.035);
}

.confirmed-booking-track-item.is-ready {
    border-color: rgba(190, 229, 244, 0.16);
    background:
        radial-gradient(circle at 50% 0%, rgba(182, 228, 245, 0.12), rgba(182, 228, 245, 0)),
        rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 18px rgba(117, 191, 223, 0.08);
}

.confirmed-booking-track-label {
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(187, 214, 227, 0.48);
}

.confirmed-booking-track-item strong {
    min-width: 0;
    font-size: 0.88rem;
    line-height: 1.56;
    color: rgba(236, 246, 251, 0.88);
}

.confirmed-booking-note {
    margin: 0;
    line-height: 1.72;
    color: rgba(215, 231, 240, 0.72);
}

.confirmed-booking-signal-row {
    gap: 7px;
}

.confirmed-booking-signal {
    min-height: 26px;
    padding: 5px 10px;
    font-size: 0.7rem;
}

.confirmed-booking-actions {
    gap: 10px;
}

.confirmed-booking-brief,
.confirmed-booking-link,
.confirmed-booking-remove,
.confirmed-booking-detail {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(205, 229, 242, 0.1);
    background: rgba(255, 255, 255, 0.045);
    color: rgba(238, 247, 252, 0.88);
    width: auto;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background-color 220ms ease,
        color 220ms ease;
}

.confirmed-booking-detail {
    background: rgba(255, 255, 255, 0.035);
}

.confirmed-booking-brief {
    background:
        linear-gradient(180deg, rgba(191, 231, 247, 0.16), rgba(139, 201, 225, 0.08)),
        rgba(255, 255, 255, 0.08);
    border-color: rgba(190, 227, 241, 0.18);
}

.confirmed-booking-link:hover,
.confirmed-booking-brief:hover,
.confirmed-booking-remove:hover,
.confirmed-booking-detail:hover,
.confirmed-booking-link:focus-visible,
.confirmed-booking-brief:focus-visible,
.confirmed-booking-remove:focus-visible,
.confirmed-booking-detail:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(214, 238, 248, 0.18);
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

.confirmed-booking-state {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.72;
    color: rgba(226, 240, 247, 0.78);
}

.sea-brief-stage {
    min-width: 0;
    gap: 18px;
}

.sea-brief-head {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 16px;
}

.sea-brief-copy {
    display: grid;
    gap: 10px;
    max-width: 68ch;
}

.sea-brief-proof-shell {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 16px 18px 18px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 0%, rgba(202, 234, 247, 0.12), rgba(202, 234, 247, 0) 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(142, 186, 207, 0.02)),
        rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(203, 230, 242, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 16px 28px rgba(3, 12, 20, 0.12);
}

.sea-brief-proof-head {
    display: grid;
    gap: 8px;
}

.sea-brief-proof-heading {
    display: grid;
    gap: 6px;
}

.trip-proof-flow-kicker,
.trip-proof-flow-title,
.trip-proof-flow-intro,
.trip-proof-flow-status-copy,
.trip-proof-flow-step-copy p {
    margin: 0;
}

.trip-proof-flow-kicker {
    font-size: 0.66rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(190, 219, 234, 0.5);
}

.trip-proof-flow-title {
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.44;
    color: rgba(243, 250, 255, 0.92);
}

.trip-proof-flow-intro {
    max-width: 62ch;
    line-height: 1.76;
    color: rgba(205, 224, 234, 0.68);
}

.trip-proof-flow-status {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 14px;
    align-items: start;
    padding: 0;
    border: 0;
    background: none;
}

.trip-proof-flow-status-badge {
    min-height: 28px;
    padding: 0 11px;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
}

.trip-proof-flow-status-copy {
    padding-top: 3px;
    line-height: 1.72;
    color: rgba(224, 238, 246, 0.84);
}

.trip-proof-flow-meta {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.trip-proof-flow-meta-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(190, 227, 241, 0.12);
    background: rgba(158, 216, 240, 0.08);
    color: rgba(234, 245, 251, 0.84);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}

.trip-proof-flow-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
}

.trip-proof-flow-step {
    gap: 10px;
    padding: 14px 14px 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(205, 229, 242, 0.06);
}

.trip-proof-flow-step:not(.is-complete):not(.is-active) {
    opacity: 0.62;
    background: rgba(255, 255, 255, 0.022);
    border-color: rgba(205, 229, 242, 0.045);
}

.trip-proof-flow-step.is-complete {
    border-color: rgba(184, 225, 239, 0.14);
    background: rgba(255, 255, 255, 0.045);
}

.trip-proof-flow-step.is-active {
    transform: translateY(-2px);
    border-color: rgba(198, 231, 246, 0.18);
    box-shadow:
        0 14px 24px rgba(4, 17, 28, 0.14),
        0 0 16px rgba(110, 182, 214, 0.06);
}

.trip-proof-flow-step-index {
    width: 32px;
    height: 32px;
    font-size: 0.72rem;
}

.trip-proof-flow-step-copy {
    gap: 6px;
}

.trip-proof-flow-step-copy strong {
    color: rgba(241, 249, 253, 0.92);
}

.trip-proof-flow-step-copy p {
    font-size: 0.82rem;
    line-height: 1.66;
    color: rgba(203, 221, 232, 0.68);
}

.trip-proof-flow-step-state {
    min-height: 24px;
    padding: 0 9px;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
}

@media (max-width: 1180px) {
    .trip-brief-deck {
        grid-template-columns: minmax(248px, 0.72fr) minmax(0, 1.28fr);
    }

    .trip-proof-flow-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .trip-page-planner .trip-planner-shell {
        grid-template-areas:
            "search"
            "summary"
            "confirmed";
    }

    .trip-brief-deck {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .confirmed-bookings-stage {
        padding: 20px 18px 18px;
    }

    .confirmed-bookings-head {
        flex-direction: row;
        align-items: center;
    }

    .sea-brief-stage {
        padding: 24px 24px 22px;
    }
}

@media (max-width: 600px) {
    .trip-brief-deck {
        gap: 14px;
    }

    .confirmed-bookings-stage,
    .sea-brief-stage,
    .sea-brief-proof-shell {
        padding: 18px;
        border-radius: 24px;
    }

    .confirmed-bookings-head {
        flex-direction: column;
        align-items: stretch;
    }

    .confirmed-bookings-switch {
        align-self: flex-start;
    }

    .confirmed-booking-card {
        padding: 15px 15px 14px;
        border-radius: 20px;
    }

    .confirmed-booking-card.is-active {
        transform: none;
    }

    .confirmed-booking-track {
        grid-template-columns: 1fr;
    }

    .confirmed-booking-actions {
        flex-direction: column;
    }

    .confirmed-booking-brief,
    .confirmed-booking-link,
    .confirmed-booking-remove,
    .confirmed-booking-detail {
        width: 100%;
    }

    .trip-proof-flow-status {
        grid-template-columns: 1fr;
    }

    .trip-proof-flow-list {
        grid-template-columns: 1fr;
    }
}

/* Planner Capsule + Left Rail Dock：
   让 Trip Console 和 Live Draft 读成同一套舱体，
   左轨底部再补一层更低矮的回声底舱，避免列表下方留空。 */
.trip-page-planner .trip-planner-shell {
    grid-template-areas:
        "capsule"
        "confirmed";
    gap: 20px;
}

.planner-capsule {
    grid-area: capsule;
    position: relative;
    display: grid;
    gap: 0;
    overflow: hidden;
    min-width: 0;
    border-radius: 32px;
    background:
        radial-gradient(circle at 18% 0%, rgba(210, 235, 246, 0.12), rgba(210, 235, 246, 0) 34%),
        radial-gradient(circle at 82% 14%, rgba(105, 177, 207, 0.07), rgba(105, 177, 207, 0) 30%),
        linear-gradient(180deg, rgba(8, 31, 48, 0.68), rgba(4, 17, 29, 0.74)),
        rgba(4, 17, 29, 0.58);
    border: 1px solid rgba(204, 229, 241, 0.07);
    box-shadow:
        0 24px 44px rgba(3, 12, 20, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(18px) saturate(112%);
    -webkit-backdrop-filter: blur(18px) saturate(112%);
}

.planner-capsule::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(194, 228, 242, 0.055), rgba(194, 228, 242, 0) 26%),
        radial-gradient(circle at 80% 0%, rgba(193, 226, 241, 0.06), rgba(193, 226, 241, 0) 28%);
    pointer-events: none;
}

.planner-capsule::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.planner-capsule > .trip-search-bar {
    grid-area: auto;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: clamp(26px, 3vw, 34px) clamp(24px, 3vw, 34px) 22px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.trip-planner-submerge-active .planner-capsule > .trip-search-bar {
    box-shadow: none;
}

.planner-summary-dock {
    grid-area: auto;
    position: relative;
    z-index: 1;
    min-width: 0;
    margin: 0;
    padding: 18px clamp(22px, 3vw, 32px) clamp(22px, 3vw, 30px);
    border: 0;
    border-top: 1px solid rgba(202, 229, 241, 0.08);
    border-radius: 0 0 36px 36px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(96, 136, 159, 0.02)),
        rgba(255, 255, 255, 0.02);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.planner-summary-dock::before,
.planner-summary-dock::after {
    content: none;
}

.planner-summary-dock .planner-summary-head {
    align-items: end;
    gap: 14px;
    margin-bottom: 8px;
}

.planner-summary-dock .planner-summary-title {
    font-size: clamp(1.22rem, 1.7vw, 1.48rem);
}

.planner-summary-dock .planner-summary-intro {
    max-width: 58ch;
    margin-bottom: 16px;
    font-size: 0.94rem;
    line-height: 1.78;
    color: rgba(208, 226, 236, 0.72);
}

.planner-summary-dock.is-empty .planner-summary-intro {
    max-height: none;
    opacity: 1;
    transform: none;
}

.planner-summary-dock .planner-summary-meter {
    margin-bottom: 16px;
}

.planner-summary-dock-body,
.planner-summary-dock-inner {
    display: grid;
    gap: 16px;
}

.planner-summary-dock .planner-summary-status-note {
    margin: 0;
}

.planner-summary-dock .planner-summary-draft-rail {
    padding: 16px 18px 17px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 0% 0%, rgba(200, 232, 244, 0.1), rgba(200, 232, 244, 0) 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(125, 165, 188, 0.02)),
        rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(202, 229, 241, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.planner-summary-dock .planner-summary-draft-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.planner-summary-dock .planner-item {
    min-width: 0;
}

.planner-capsule[data-capsule-state="progress"] .planner-summary-status-note {
    border-color: rgba(189, 225, 239, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(233, 244, 250, 0.88);
}

.planner-capsule[data-capsule-state="progress"] .planner-summary-status-note::before {
    background: rgba(182, 224, 240, 0.88);
}

.planner-capsule[data-capsule-state="confirmed"] .planner-summary-status-note {
    border-color: rgba(184, 227, 241, 0.18);
    background:
        radial-gradient(circle at 0% 0%, rgba(190, 229, 243, 0.12), rgba(190, 229, 243, 0) 36%),
        rgba(255, 255, 255, 0.05);
    color: rgba(239, 248, 252, 0.92);
}

.planner-capsule[data-capsule-state="confirmed"] .planner-summary-status-note::before {
    background: rgba(194, 233, 246, 0.94);
}

.planner-capsule[data-capsule-state="confirmed"] .planner-summary-draft-rail {
    border-color: rgba(190, 227, 241, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 18px rgba(104, 176, 208, 0.08);
}

.planner-capsule.is-progress-shifting::after,
.planner-capsule.is-updated-confirmed::after,
.planner-capsule.is-submit-feedback::after {
    opacity: 1;
}

.planner-capsule.is-progress-shifting::after {
    animation: planner-summary-shell-glow 760ms ease;
}

.planner-capsule.is-updated-confirmed::after {
    animation: planner-summary-shell-glow 1100ms ease;
}

.planner-capsule.is-submit-feedback::after {
    animation: planner-summary-shell-glow 980ms ease;
}

.trip-brief-deck {
    align-items: stretch;
}

.confirmed-bookings-stage {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-self: stretch;
}

.confirmed-bookings-list {
    align-content: start;
}

.confirmed-bookings-echo-dock {
    display: grid;
    gap: 10px;
    margin-top: 8px;
    padding: 14px 15px 15px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(113, 154, 178, 0.02)),
        rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(198, 228, 240, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 12px 22px rgba(2, 10, 18, 0.12);
}

.confirmed-bookings-echo-dock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.confirmed-bookings-echo-dock-kicker,
.confirmed-bookings-echo-dock-state,
.confirmed-bookings-echo-dock-copy {
    margin: 0;
}

.confirmed-bookings-echo-dock-kicker {
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(190, 219, 234, 0.52);
}

.confirmed-bookings-echo-dock-state {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(190, 227, 241, 0.11);
    background: rgba(158, 216, 240, 0.08);
    color: rgba(236, 246, 251, 0.88);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

.confirmed-bookings-echo-dock-copy {
    line-height: 1.72;
    color: rgba(219, 233, 241, 0.76);
}

.confirmed-bookings-echo-dock-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.confirmed-bookings-echo-dock-meta .trip-proof-flow-meta-chip {
    min-height: 26px;
    padding: 0 9px;
    font-size: 0.68rem;
    background: rgba(158, 216, 240, 0.06);
}

@media (max-width: 980px) {
    .trip-page-planner .trip-planner-shell {
        grid-template-areas:
            "capsule"
            "confirmed";
    }

    .planner-capsule {
        border-radius: 30px;
    }

    .planner-capsule > .trip-search-bar {
        padding: 24px 24px 20px;
    }

    .planner-summary-dock {
        padding: 18px 24px 22px;
        border-radius: 0 0 30px 30px;
    }

    .planner-summary-dock .planner-summary-head {
        align-items: start;
    }

    .planner-summary-dock .planner-summary-draft-steps {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .planner-capsule {
        border-radius: 24px;
    }

    .planner-capsule > .trip-search-bar {
        padding: 20px 18px 18px;
    }

    .planner-summary-dock {
        padding: 16px 18px 18px;
        border-radius: 0 0 24px 24px;
    }

    .planner-summary-dock .planner-summary-head {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .planner-summary-dock .planner-summary-intro {
        margin-bottom: 14px;
    }

    .planner-summary-dock .planner-summary-draft-rail {
        padding: 14px 14px 15px;
        border-radius: 20px;
    }

    .confirmed-bookings-echo-dock {
        padding: 14px;
        border-radius: 18px;
    }

    .confirmed-bookings-echo-dock-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media print {
    #seaBriefStage .sea-brief-proof-shell {
        display: none !important;
    }
}






/* 第二组增强：
   在不重做结构的前提下，把 Trip 首屏、摘要到回执的顺序感和空态完成度再收紧一层。 */
.trip-hero-current {
    grid-area: current;
    justify-self: end;
    align-self: end;
    display: grid;
    gap: 16px;
    width: min(100%, 360px);
    margin: 4px 0 2px;
    padding: 4px 0 2px clamp(20px, 2.8vw, 32px);
    border-left: 1px solid rgba(203, 231, 243, 0.11);
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    filter: blur(10px);
    animation: trip-hero-copy-rise 820ms cubic-bezier(0.16, 0.82, 0.2, 1) 470ms forwards;
}

.trip-hero-current-head {
    display: grid;
    gap: 8px;
}

.trip-hero-current-kicker,
.trip-hero-current-copy {
    margin: 0;
}

.trip-hero-current-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(196, 223, 240, 0.52);
}

.trip-hero-current-copy {
    max-width: 38ch;
    line-height: 1.74;
    color: rgba(217, 232, 240, 0.7);
}

.trip-hero-current-track {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 2px 0 0 20px;
}

.trip-hero-current-track::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 6px;
    width: 1px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(203, 231, 243, 0.08), rgba(203, 231, 243, 0.34), rgba(203, 231, 243, 0.08));
}

.trip-hero-current-step {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    padding: 9px 0 9px 12px;
    border-radius: 16px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.trip-hero-current-step::before {
    content: "";
    position: absolute;
    top: 17px;
    left: -17px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(203, 231, 243, 0.36);
    box-shadow: 0 0 0 1px rgba(203, 231, 243, 0.08);
}

.trip-hero-current-step strong,
.trip-hero-current-step small {
    display: block;
}

.trip-hero-current-step strong {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    color: rgba(240, 248, 253, 0.82);
}

.trip-hero-current-step small {
    font-size: 0.82rem;
    color: rgba(206, 225, 235, 0.6);
}

.trip-hero-current-step.is-current {
    background: linear-gradient(90deg, rgba(188, 228, 245, 0.08), rgba(188, 228, 245, 0));
    box-shadow: 0 0 18px rgba(110, 190, 223, 0.04);
}

.trip-hero-current-step.is-current::before {
    background: rgba(232, 250, 255, 0.9);
    box-shadow:
        0 0 12px rgba(135, 214, 240, 0.38),
        0 0 0 1px rgba(203, 231, 243, 0.22);
}

.planner-summary-stage-note {
    margin: -4px 0 0;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(191, 218, 232, 0.44);
}

.trip-brief-deck {
    grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1.26fr);
    align-items: stretch;
}

.trip-brief-order {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
    gap: 18px;
    padding: 18px 20px 20px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 14% 0%, rgba(205, 235, 247, 0.12), rgba(205, 235, 247, 0) 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(119, 161, 184, 0.03)),
        rgba(6, 21, 33, 0.52);
    border: 1px solid rgba(202, 228, 240, 0.1);
    box-shadow:
        0 20px 34px rgba(3, 12, 20, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.trip-brief-order-copy {
    display: grid;
    gap: 8px;
}

.trip-brief-order-kicker,
.trip-brief-order-title,
.trip-brief-order-intro {
    margin: 0;
}

.trip-brief-order-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(190, 219, 233, 0.5);
}

.trip-brief-order-title {
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.18rem, 1.9vw, 1.52rem);
    line-height: 1.48;
    color: rgba(243, 250, 254, 0.94);
}

.trip-brief-order-intro {
    max-width: 68ch;
    line-height: 1.78;
    color: rgba(208, 226, 236, 0.72);
}

.trip-brief-order-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-self: end;
}

.trip-brief-order-step {
    position: relative;
    display: grid;
    gap: 6px;
    align-content: start;
    min-height: 100%;
    padding: 16px 14px 14px;
    border-radius: 18px;
    border: 1px solid rgba(201, 228, 240, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(9, 28, 43, 0.82)),
        rgba(7, 21, 34, 0.58);
}

.trip-brief-order-step strong,
.trip-brief-order-step small {
    display: block;
}

.trip-brief-order-step strong {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    color: rgba(240, 247, 252, 0.9);
}

.trip-brief-order-step small {
    font-size: 0.82rem;
    color: rgba(205, 224, 234, 0.68);
}

.trip-brief-order-step.is-complete,
.trip-brief-order-step.is-current {
    border-color: rgba(196, 230, 244, 0.16);
}

.trip-brief-order-step.is-current {
    box-shadow:
        0 14px 24px rgba(3, 12, 20, 0.18),
        0 0 16px rgba(104, 178, 210, 0.08);
}

.confirmed-bookings-empty,
.sea-brief-empty {
    display: grid;
    gap: 10px;
}

.confirmed-bookings-empty-kicker,
.confirmed-bookings-empty-title,
.confirmed-bookings-empty-copy,
.sea-brief-empty-kicker,
.sea-brief-empty-title,
.sea-brief-empty-copy {
    margin: 0;
}

.confirmed-bookings-empty-kicker,
.sea-brief-empty-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(193, 220, 235, 0.5);
}

.confirmed-bookings-empty-title,
.sea-brief-empty-title {
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.02rem, 1.6vw, 1.3rem);
    line-height: 1.5;
    color: rgba(240, 248, 252, 0.92);
}

.confirmed-bookings-empty-copy,
.sea-brief-empty-copy {
    max-width: 62ch;
    line-height: 1.8;
    color: rgba(211, 228, 237, 0.68);
}

.confirmed-bookings-empty-tags,
.sea-brief-empty-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    opacity: 0.7;
}

.confirmed-bookings-empty-tags span,
.sea-brief-empty-signals span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(194, 227, 240, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(228, 241, 248, 0.76);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.sea-brief-stage-note {
    margin: 12px 0 0;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(191, 219, 233, 0.48);
}

@media (max-width: 980px) {
    .trip-hero-current {
        justify-self: stretch;
        width: 100%;
        margin: 4px 0 24px;
        padding: 16px 0 0;
        border-top: 1px solid rgba(203, 231, 243, 0.1);
        border-left: 0;
    }

    .trip-hero-current-copy {
        max-width: 58ch;
    }

    .trip-hero-current-track,
    .trip-brief-order-track {
        grid-template-columns: 1fr;
    }

    .trip-brief-order {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .trip-hero-current {
        margin-bottom: 22px;
        padding-top: 14px;
    }

    .trip-brief-order {
        padding: 16px;
        border-radius: 22px;
    }

    .trip-page-planner .trip-search-bar,
    .planner-capsule > .trip-search-bar {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "tide"
            "spot"
            "date"
            "people"
            "action";
        width: 100%;
        min-width: 0;
    }

    .planner-console-head,
    .planner-field,
    .planner-submit-btn,
    .planner-desk-tide-flow {
        min-width: 0;
    }

    .planner-desk-tide-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 0 0 2px;
        padding: 0 6px;
    }

    .planner-desk-tide-line {
        inset: auto 18px 10px 18px;
    }

    .planner-desk-tide-node {
        width: max-content;
        min-width: 32px;
        height: 28px;
    }

    .trip-brief-deck,
    .trip-brief-order {
        grid-template-columns: minmax(0, 1fr);
    }

    .trip-brief-order-track {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 行程控制台后半段的入场需要独立于上方 Trip Console：
   summary 要等用户继续下潜到草稿层才显形，brief deck 则等下一层海域回执进入视口后再展开。 */
.trip-page-planner .planner-summary-dock.trip-summary-reveal:not(.is-visible),
.trip-brief-deck.trip-brief-reveal:not(.is-visible) {
    opacity: 0 !important;
}

.trip-page-planner .planner-summary-dock.trip-summary-reveal:not(.is-visible) {
    transform: translate3d(0, 34px, 0) scale(0.988) !important;
    filter: blur(18px) !important;
}

.trip-page-planner .planner-summary-dock.trip-summary-reveal:not(.is-visible)
    :is(.planner-summary-head, .planner-summary-intro, .planner-summary-stage-note, .planner-summary-meter, .planner-summary-dock-body) {
    opacity: 0 !important;
    transform: translate3d(0, 16px, 0) !important;
    filter: blur(12px) !important;
}

.trip-brief-deck.trip-brief-reveal:not(.is-visible) {
    transform: translate3d(0, 36px, 0) scale(0.988) !important;
    filter: blur(18px) !important;
}

.trip-brief-deck.trip-brief-reveal:not(.is-visible)
    :is(.trip-brief-order, .confirmed-bookings-stage, .sea-brief-stage) {
    opacity: 0 !important;
    transform: translate3d(0, 22px, 0) scale(0.992) !important;
    filter: blur(14px) !important;
}

/* 展示前三段关系小修：让 Planner / Booked Waters / Sea Brief 更像一条潮线，而不是三个并列面板。 */
@media (min-width: 981px) {
    .trip-page .trip-brief-order-intro {
        max-width: 68ch;
        color: rgba(207, 226, 237, 0.7);
    }

    .trip-page .trip-brief-order-track {
        position: relative;
        isolation: isolate;
    }

    .trip-page .trip-brief-order-track::before {
        content: "";
        position: absolute;
        left: 12%;
        right: 12%;
        top: 50%;
        height: 1px;
        background: linear-gradient(90deg, rgba(172, 214, 232, 0), rgba(172, 214, 232, 0.22), rgba(172, 214, 232, 0));
        transform: translateY(-50%);
        opacity: 0.72;
        pointer-events: none;
        z-index: 0;
    }

    .trip-page .trip-brief-order-step {
        position: relative;
        z-index: 1;
        min-height: 82px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(113, 154, 178, 0.022)),
            rgba(7, 24, 38, 0.5);
        border-color: rgba(199, 228, 240, 0.08);
    }

    .trip-page .trip-brief-order-step:not(.is-current):not(.is-complete) {
        opacity: 0.56;
    }

    .trip-page .confirmed-bookings-empty,
    .trip-page .sea-brief-empty {
        background:
            radial-gradient(circle at 16% 0%, rgba(188, 224, 240, 0.08), rgba(188, 224, 240, 0) 38%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(103, 143, 166, 0.018)),
            rgba(6, 22, 35, 0.44);
        border-color: rgba(199, 228, 240, 0.07);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            0 12px 22px rgba(2, 10, 18, 0.1);
    }

    .trip-page .confirmed-bookings-empty-tags,
    .trip-page .sea-brief-empty-signals {
        opacity: 0.46;
    }

    .trip-page .confirmed-bookings-empty-tags span,
    .trip-page .sea-brief-empty-signals span {
        background: rgba(255, 255, 255, 0.032);
        border-color: rgba(194, 227, 240, 0.075);
        color: rgba(220, 238, 246, 0.58);
    }
}

/* 行程页高对比度保护层：锁住规划层首屏、控制台和关键区块标题的浅色阅读层次。 */
@media (forced-colors: active) {
    .trip-page :is(
        .trip-hero-kicker,
        .trip-section-kicker,
        .planner-console-kicker,
        .confirmed-bookings-kicker,
        .sea-brief-kicker
    ) {
        forced-color-adjust: none;
        color: var(--yanqi-forced-kicker);
        -webkit-text-fill-color: var(--yanqi-forced-kicker);
    }

    .trip-page :is(
        .trip-hero-title,
        .planner-console-title,
        .trip-section-title,
        .confirmed-bookings-title,
        .prep-card-title,
        .prep-detail-title,
        .sea-brief-title
    ) {
        forced-color-adjust: none;
        color: var(--yanqi-forced-title);
        -webkit-text-fill-color: var(--yanqi-forced-title);
    }

    .trip-page :is(
        .trip-hero-subtitle,
        .planner-console-intro,
        .sea-brief-intro
    ) {
        forced-color-adjust: none;
        color: var(--yanqi-forced-copy);
        -webkit-text-fill-color: var(--yanqi-forced-copy);
    }
}

/* Planner Desk 单一主线收束：
   已收进行程存在时先停在当前摘要，只有用户主动调整才重新展开桌面。 */
.planner-current-summary {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    padding: clamp(24px, 3vw, 32px);
    border-bottom: 1px solid rgba(202, 229, 241, 0.08);
    background:
        radial-gradient(circle at 12% 0%, rgba(200, 233, 246, 0.11), rgba(200, 233, 246, 0) 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(112, 155, 178, 0.018));
}

.planner-current-summary[hidden] {
    display: none;
}

.planner-current-summary-head {
    display: grid;
    grid-template-columns: minmax(0, 0.84fr) minmax(280px, 1.16fr);
    gap: 18px;
    align-items: end;
}

.planner-current-summary-kicker,
.planner-current-summary-title,
.planner-current-summary-copy,
.planner-current-summary-item span,
.planner-current-summary-item strong {
    margin: 0;
}

.planner-current-summary-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(191, 220, 234, 0.52);
}

.planner-current-summary-title {
    margin-top: 8px;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.34rem, 2vw, 1.72rem);
    line-height: 1.42;
    color: rgba(242, 249, 253, 0.94);
}

.planner-current-summary-copy {
    max-width: 56ch;
    line-height: 1.76;
    color: rgba(211, 229, 238, 0.72);
}

.planner-current-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.planner-current-summary-item {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 13px 14px 14px;
    border-radius: 18px;
    border: 1px solid rgba(201, 229, 241, 0.08);
    background: rgba(255, 255, 255, 0.035);
}

.planner-current-summary-item span {
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    color: rgba(188, 216, 230, 0.52);
}

.planner-current-summary-item strong {
    min-width: 0;
    font-size: 0.9rem;
    line-height: 1.58;
    color: rgba(236, 246, 251, 0.9);
    overflow-wrap: anywhere;
}

.planner-current-summary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.planner-current-summary-action {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1px solid rgba(200, 229, 242, 0.12);
    background: rgba(255, 255, 255, 0.045);
    color: rgba(236, 246, 251, 0.88);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background-color 220ms ease;
}

.planner-current-summary-action-primary {
    border-color: rgba(190, 228, 242, 0.18);
    background:
        linear-gradient(180deg, rgba(191, 231, 247, 0.14), rgba(139, 201, 225, 0.07)),
        rgba(255, 255, 255, 0.06);
}

.planner-current-summary-action:hover,
.planner-current-summary-action:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(214, 238, 248, 0.2);
    background-color: rgba(255, 255, 255, 0.08);
    outline: none;
}

.planner-capsule > .trip-search-bar,
.planner-capsule > .planner-summary-dock {
    overflow: hidden;
    transition:
        max-height 420ms cubic-bezier(0.16, 0.82, 0.2, 1),
        opacity 320ms ease,
        transform 420ms cubic-bezier(0.16, 0.82, 0.2, 1),
        padding 420ms cubic-bezier(0.16, 0.82, 0.2, 1),
        border-color 320ms ease,
        visibility 0s linear 0s;
}

.planner-capsule > .trip-search-bar {
    max-height: 1320px;
}

.planner-capsule > .planner-summary-dock {
    max-height: 280px;
}

.trip-page-planner .planner-capsule.is-planner-collapsed > .trip-search-bar {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: translate3d(0, -8px, 0);
    visibility: hidden;
    pointer-events: none;
    transition:
        max-height 420ms cubic-bezier(0.16, 0.82, 0.2, 1),
        opacity 280ms ease,
        transform 420ms cubic-bezier(0.16, 0.82, 0.2, 1),
        padding 420ms cubic-bezier(0.16, 0.82, 0.2, 1),
        visibility 0s linear 420ms;
}

.trip-page-planner .planner-capsule.is-planner-collapsed > .planner-summary-dock.trip-summary-reveal {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-color: transparent;
    opacity: 0 !important;
    transform: translate3d(0, -8px, 0) !important;
    visibility: hidden;
    pointer-events: none;
    transition:
        max-height 360ms cubic-bezier(0.16, 0.82, 0.2, 1),
        opacity 240ms ease,
        transform 360ms cubic-bezier(0.16, 0.82, 0.2, 1),
        padding 360ms cubic-bezier(0.16, 0.82, 0.2, 1),
        border-color 240ms ease,
        visibility 0s linear 360ms;
}

.planner-summary-dock {
    padding-top: 16px;
    padding-bottom: 18px;
}

.planner-summary-dock .planner-summary-head {
    margin-bottom: 6px;
}

.planner-summary-dock .planner-summary-intro {
    margin-bottom: 12px;
}

.planner-summary-dock .planner-summary-meter {
    margin-bottom: 12px;
}

.planner-summary-dock-body {
    gap: 10px;
}

.planner-summary-compact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.planner-summary-compact-meta .planner-summary-draft-tag {
    min-height: 26px;
    padding: 0 10px;
    font-size: 0.68rem;
}

.sea-brief-proof-shell {
    gap: 10px;
    padding: 14px 16px 15px;
}

.sea-brief-proof-head {
    grid-template-columns: minmax(0, auto) minmax(240px, 1fr);
    gap: 14px;
    align-items: end;
}

.trip-proof-flow-intro {
    max-width: none;
}

.trip-proof-flow-status {
    padding-top: 2px;
}

@media (max-width: 980px) {
    .planner-current-summary-head,
    .sea-brief-proof-head {
        grid-template-columns: 1fr;
    }

    .planner-current-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .planner-current-summary {
        gap: 15px;
        padding: 20px 18px;
    }

    .planner-current-summary-grid {
        grid-template-columns: 1fr;
    }

    .planner-current-summary-action {
        width: 100%;
    }
}