/* ==========================================================================
   mytripsmap — brand.css
   品牌变量、Bootstrap 定制覆盖、mobile-first 应用布局。
   规则：品牌元素不使用 gradient / box-shadow / text-shadow；系统字体；无外部字体。
   Logo 配色（以 wwwroot/brand/*.svg 为准）：mytrips 实心 #004259，map 实心 #FF6600，
   i 的圆点 #FF6600，图钉路线终点 #FF6600；reverse 版 mytrips 白色、map 仍为 #FF6600。
   ========================================================================== */

:root {
    --brand-primary: #004259;
    --brand-primary-hover: #00364a;
    --brand-accent: #FF6600;
    --brand-background: #F7FAFB;
    --brand-surface: #FFFFFF;
    --brand-text: #17232E;
    --brand-text-muted: #4A5A66;
    --brand-border: #D7E2E6;

    --app-header-height: 3.5rem;      /* 56px mobile */
    --app-header-height-lg: 4rem;     /* 64px desktop */
    --app-mobile-nav-height: 3.75rem; /* 60px, 触控目标 ≥ 44px */
    --app-content-max-width: 72rem;   /* 1152px */
    --app-gutter: 1rem;

    --font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
                   "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;

    /* Bootstrap 主题变量对齐品牌色 */
    --bs-body-bg: var(--brand-background);
    --bs-body-color: var(--brand-text);
    --bs-body-font-family: var(--font-system);
    --bs-border-color: var(--brand-border);
    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: var(--brand-primary-hover);
    --bs-link-color-rgb: 0, 66, 89;
    --bs-link-hover-color-rgb: 0, 54, 74;
    --bs-focus-ring-color: transparent;
}

html, body {
    font-family: var(--font-system);
    background-color: var(--brand-background);
    color: var(--brand-text);
}

/* --------------------------------------------------------------------------
   可访问性：键盘 focus 样式（用 outline，不用 box-shadow）
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 2px;
}

.btn:focus, .btn:focus-visible, .btn:active:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus,
.btn-link.nav-link:focus {
    box-shadow: none;
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary);
    outline: 2px solid var(--brand-primary);
    outline-offset: 0;
}

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* --------------------------------------------------------------------------
   Bootstrap 按钮定制（主要按钮：#004259 背景 + 白字，对比度 ≈ 10.9:1）
   #FF6600 只作高亮点/图标/装饰，不做普通文字按钮背景
   -------------------------------------------------------------------------- */
.btn {
    min-height: 2.75rem; /* 44px 触控目标 */
    border-radius: 0.5rem;
    font-weight: 600;
    /* inline-block 下 min-height 撑高后文字会贴顶；用 flex 让文字在按钮内垂直居中 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: var(--brand-primary-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-primary);
    --bs-btn-active-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
}

.btn-link {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-hover-color: var(--brand-primary-hover);
}

a {
    color: var(--brand-primary);
}

.text-brand-accent { color: var(--brand-accent); }
.text-muted, .text-body-secondary { color: var(--brand-text-muted) !important; }

/* 分享缩略图兜底图：不占布局、不可见，但保留在 DOM 供微信等抓取 */
.share-thumb-seed {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   应用外壳布局（mobile-first）
   -------------------------------------------------------------------------- */
.app-shell {
    min-height: 100vh;  /* 旧浏览器回退 */
    min-height: 100dvh; /* 优先：随手机浏览器工具栏收起/展开变化 */
    display: flex;
    flex-direction: column;
}

.app-main {
    flex: 1 0 auto;
}

/* 手机端：底部导航是 fixed 的，为它留出的空间放在页脚下方（页脚在 main 之后），
   否则页脚会被导航盖住。只有导航实际渲染（已登录）时才留（含 iPhone safe area）。 */
.app-shell:has(.app-nav-mobile) .app-footer {
    margin-bottom: calc(var(--app-mobile-nav-height) + env(safe-area-inset-bottom, 0px));
}

/* 两种内容宽度 */
.content-container {
    width: 100%;
    max-width: var(--app-content-max-width);
    margin-inline: auto;
    padding-inline: var(--app-gutter);
    padding-block: 1.25rem;
}

.content-full {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.app-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: var(--brand-surface);
    border-bottom: 1px solid var(--brand-border);
}

.app-header-inner {
    /* min-height 而不是 height：浏览器只放大文字（200%）时允许行高增长和换行，不裁切 */
    min-height: var(--app-header-height);
    max-width: var(--app-content-max-width);
    margin-inline: auto;
    padding-inline: var(--app-gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 1rem;
}

.app-brand {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    text-decoration: none;
    border-radius: 0.375rem;
}

.app-brand-logo { display: none; height: 2.25rem; width: auto; }
.app-brand-icon { display: block; height: 2.25rem; width: auto; }

/* 桌面主导航（手机端隐藏） */
.app-nav-desktop {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.app-nav-desktop .nav-link {
    color: var(--brand-text-muted);
    font-weight: 600;
    padding: 0.5rem 0.875rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    border-radius: 0.5rem;
    text-decoration: none;
}

.app-nav-desktop .nav-link:hover {
    color: var(--brand-primary);
    background-color: var(--brand-background);
}

.app-nav-desktop .nav-link.active {
    color: var(--brand-primary);
    border-bottom: 3px solid var(--brand-accent);
    border-radius: 0;
}

.app-nav-desktop .app-nav-divider {
    width: 1px;
    height: 1.5rem;
    background-color: var(--brand-border);
    margin-inline: 0.5rem;
}

/* Header 右侧紧凑账户操作（手机端显示，桌面并入主导航） */
.app-header-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.app-header-actions .btn {
    min-height: 2.75rem;
    padding-inline: 0.875rem;
}

/* Header 内的文字型账户操作按导航项呈现：无下划线，hover 才加 */
.app-header-actions .btn-link,
.app-nav-desktop .btn-link {
    text-decoration: none;
    font-weight: 600;
}

.app-header-actions .btn-link:hover,
.app-nav-desktop .btn-link:hover {
    text-decoration: underline;
}

/* 桌面 Header 中的主按钮：与相邻 nav-link 字号一致 */
.app-nav-desktop .btn-primary {
    font-size: 0.9375rem;
    padding-inline: 1rem;
}

/* 无边框按钮形式的 nav 项（如 Sign out 的 form 按钮） */
.app-nav-button {
    background: none;
    border: 0;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Footer + 语言选择器（English / 简体中文 / 繁體中文，不用国旗）
   -------------------------------------------------------------------------- */
.app-footer {
    border-top: 1px solid var(--brand-border);
    background-color: var(--brand-surface);
    margin-top: auto;
}

.app-footer-inner {
    max-width: var(--app-content-max-width);
    margin-inline: auto;
    padding: 1rem var(--app-gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.app-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--brand-text-muted);
    font-size: 0.875rem;
}

.app-footer-logo {
    height: 1.5rem;
    width: auto;
}

/* 未登录手机端没有底部导航时，页脚自己吃掉 iPhone 底部安全区 */
.app-shell:not(:has(.app-nav-mobile)) .app-footer-inner {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

/* --------------------------------------------------------------------------
   Header 语言菜单
   手机：地球图标 + 透明原生 <select>（iOS 原生选择器）
   桌面：品牌样式下拉（<details>），向下展开，z-index 高于地图
   -------------------------------------------------------------------------- */
.lang-switcher {
    display: inline-flex;
    align-items: center;
}

.lang-form {
    display: inline-flex;
    align-items: center;
}

.lang-form-desktop { display: none; }
.lang-form-mobile  { display: inline-flex; }

/* 共用：44×44 按钮外观 */
.lang-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding-inline: 0.625rem;
    border-radius: 0.5rem;
    color: var(--brand-text-muted);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.lang-menu:hover {
    color: var(--brand-primary);
    background-color: var(--brand-background);
}

.lang-menu-globe,
.lang-menu-chevron {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.lang-menu-globe { width: 1.375rem; height: 1.375rem; }
.lang-menu-chevron { width: 1rem; height: 1rem; transition: transform 120ms ease-out; }

/* ---- 手机：透明 select 叠层 ---- */
.lang-menu-face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    pointer-events: none; /* 点击穿透到 select */
}

.lang-menu-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font-size: 16px; /* 防止 iOS 聚焦时自动放大页面 */
    z-index: 1;
}

.lang-menu-select:focus { outline: none; }

.lang-form-mobile .lang-menu:focus-within {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* ---- 桌面：<details> 下拉 ---- */
.lang-dd {
    position: relative;
}

.lang-dd > summary {
    list-style: none; /* 去掉默认三角 */
}

.lang-dd > summary::-webkit-details-marker { display: none; }
.lang-dd > summary::marker { content: ""; }

.lang-dd > summary:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.lang-dd[open] > summary {
    color: var(--brand-primary);
    background-color: var(--brand-background);
}

.lang-dd[open] .lang-menu-chevron {
    transform: rotate(180deg);
}

.lang-dd-menu {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 1030; /* > Header(1020) > MapLibre 控件 */
    min-width: 8.5rem; /* 136px：略宽于按钮即可，不做成宽面板 */
    padding: 0.25rem;
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
}

.lang-dd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 0.375rem;
    background: none;
    color: var(--brand-text);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.lang-dd-item:hover {
    background-color: var(--brand-background);
    color: var(--brand-primary);
}

.lang-dd-item:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}

.lang-dd-item[aria-checked="true"] {
    color: var(--brand-primary);
}

/* 当前语言：右侧橙色圆点标记（品牌强调色作为高亮点） */
.lang-dd-item[aria-checked="true"]::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--brand-accent);
    flex: none;
}

/* --------------------------------------------------------------------------
   手机底部导航
   -------------------------------------------------------------------------- */
.app-nav-mobile {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1020;
    display: flex;
    background-color: var(--brand-surface);
    border-top: 1px solid var(--brand-border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.app-nav-mobile .app-nav-mobile-link {
    flex: 1 1 0;
    min-height: var(--app-mobile-nav-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    color: var(--brand-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.app-nav-mobile .app-nav-mobile-link svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-nav-mobile .app-nav-mobile-link.active {
    color: var(--brand-primary);
}

.app-nav-mobile .app-nav-mobile-link.active::after {
    content: "";
    display: block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background-color: var(--brand-accent);
    margin-top: 0.125rem;
}

.app-nav-mobile .app-nav-mobile-link:focus-visible {
    outline-offset: -3px;
}

/* --------------------------------------------------------------------------
   Mobile Quick Check-in 入口（Trip 详情页渲染）
   只在窄屏 + 触控设备显示（响应式 + 能力检测，不用 UA）；PC 端隐藏。
   -------------------------------------------------------------------------- */
.mobile-checkin-action {
    display: none;
    position: fixed;
    right: var(--app-gutter);
    bottom: calc(var(--app-mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 1rem);
    z-index: 1021;
    gap: 0.5rem;
    min-height: 3rem;
    padding-inline: 1.125rem;
    border-radius: 1.5rem;
    font-size: 1rem;
}

.mobile-checkin-action svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.mobile-checkin-action svg circle {
    fill: var(--brand-accent);
    stroke: none;
}

@media (max-width: 767.98px) and (pointer: coarse) {
    .mobile-checkin-action {
        display: inline-flex;
    }

    /* 悬浮按钮（3rem）+ 间距，叠加在 .app-main 已为底部导航预留的 padding 之上；最后一张卡片能完整滚到按钮上方 */
    .has-checkin-fab {
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    }
}

/* 打卡详情 / 编辑 / 删除页：底部留白（底部导航的空间由 .app-main 提供，这里再加一点呼吸空间 + safe area） */
.place-page {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

/* --------------------------------------------------------------------------
   Trip 概览：地图 + 按天分组的时间线（编号圆点两边一致；选中 = 橙底深青字 + 深青外圈，无阴影无渐变）
   手机：地图在上（300px，随页面滚走）→ 时间线；桌面 ≥992px：左时间线 42% / 右 sticky 地图 58%
   -------------------------------------------------------------------------- */
.trip-overview {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.trip-map-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.trip-map-tools .btn,
.timeline-details {
    min-height: 2.75rem; /* 44px 触控 */
}

.trip-map-wrap {
    position: relative;
    height: 18.75rem; /* 300px */
    border: 1px solid var(--brand-border);
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: #E9F2F6;
}

/* 两个 class：maplibre-gl.css 会给容器加 .maplibregl-map { position: relative }，单 class 会被覆盖导致高度塌成 0 */
.trip-map-wrap .trip-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.trip-map-section.is-expanded .trip-map-wrap {
    height: 70vh;
    height: 70dvh;
}

.trip-map .maplibregl-ctrl-group {
    box-shadow: none;
    border: 1px solid var(--brand-border);
    border-radius: 0.5rem;
}

.trip-map .maplibregl-ctrl-attrib {
    font-size: 0.6875rem;
}

.trip-map-empty {
    margin: 0;
    padding: 1rem 1.25rem;
    color: var(--brand-text-muted);
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 0.75rem;
}

/* 地图加载失败：覆盖在地图框内，时间线不受影响 */
.trip-map-failed {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    text-align: center;
    background-color: var(--brand-surface);
}

.trip-map-failed p {
    margin: 0;
    color: var(--brand-text-muted);
}

/* marker：外层 44×44 透明按钮，内层 28px 圆点 */
.trip-map-marker {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.trip-map-marker-dot,
.seq-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.3125rem;
    border-radius: 999px;
    background-color: var(--brand-primary);
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    font-weight: 700;
    font-size: 0.8125rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
    transition: transform 120ms ease-out, background-color 120ms ease-out;
}

/* 三位数：胶囊形，不压缩字体 */
.trip-map-marker.is-wide .trip-map-marker-dot,
.seq-badge.is-wide {
    min-width: 2.25rem;
}

/* 选中：橙底 + 深青外圈。数字用 --brand-text（#17232E）而不是 #004259：在 #FF6600 上分别约 5.4:1 与 3.7:1，13px 小字需 ≥4.5:1 */
.trip-map-marker.is-selected .trip-map-marker-dot {
    background-color: var(--brand-accent);
    color: var(--brand-text);
    outline: 2px solid var(--brand-primary); /* 深青外圈：非颜色的选中状态 */
    outline-offset: 2px;
}

@media (hover: hover) {
    .trip-map-marker:hover .trip-map-marker-dot {
        transform: scale(1.1);
    }
}

.trip-map-marker:focus-visible {
    outline: none;
}

.trip-map-marker:focus-visible .trip-map-marker-dot {
    outline: 3px solid var(--brand-primary);
    outline-offset: 3px;
}

/* popup：品牌边框，无阴影 */
.trip-map-popup .maplibregl-popup-content {
    box-shadow: none;
    border: 1px solid var(--brand-border);
    border-radius: 0.5rem;
    padding: 0.625rem 2rem 0.625rem 0.875rem;
    font-family: var(--font-system);
    color: var(--brand-text);
}

.trip-map-popup .maplibregl-popup-close-button {
    width: 2rem;
    height: 2rem;
    font-size: 1.125rem;
    color: var(--brand-text-muted);
    border-radius: 0.375rem;
}

.trip-map-popup-body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-width: 14rem;
}

.trip-map-popup-title {
    color: var(--brand-primary);
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}

.trip-map-popup-meta {
    color: var(--brand-text-muted);
    font-size: 0.8125rem;
}

.trip-map-popup-thumb {
    display: block;
    width: 100%;
    max-width: 12rem;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0.375rem;
    background-color: var(--brand-background);
}

.trip-map-popup-link {
    align-self: flex-start;
    min-height: 2.25rem;
}

/* 时间线 */
.timeline-day-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0;
    margin: 1rem 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--brand-text);
}

.timeline-day-header .place-badge {
    margin: 0 0 0 0.5rem;
    align-self: center;
}

.timeline-day-number {
    color: var(--brand-primary);
    font-weight: 700;
}

.timeline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 边框始终 2px，选中只改颜色，避免布局跳动 */
.timeline-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-right: 0.5rem;
    background-color: var(--brand-surface);
    border: 2px solid var(--brand-border);
    border-radius: 0.75rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.timeline-item.is-selected {
    border-color: var(--brand-primary);
}

.timeline-select {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 4.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.5rem 0.625rem 0.75rem;
    border: 0;
    border-radius: 0.625rem;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.timeline-select:hover {
    background-color: var(--brand-background);
}

.timeline-select:active {
    background-color: #E6F0F2;
}

.timeline-select:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: -3px;
}

.timeline-select .seq-badge {
    flex: 0 0 auto;
    min-width: 1.625rem;
    height: 1.625rem;
    font-size: 0.75rem;
}

.timeline-item.is-selected .seq-badge {
    background-color: var(--brand-accent);
    color: var(--brand-text);
}

.timeline-select .place-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

/* 时间线卡片里缩略图略小（序号 + 缩略图 + 文字 + 详情按钮要在 390px 内放下） */
.timeline-select .place-thumb {
    width: 3.5rem;
    height: 3.5rem;
}

.timeline-select .place-thumb-empty {
    display: flex;
}

.timeline-select .place-thumb-empty svg {
    width: 1.5rem;
    height: 1.5rem;
}

.trip-map-section .trip-section-header {
    align-items: center;
}

.timeline-details {
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   整理地点（私人 Trip 概览页）：入口低强调；整理模式下显示复选框（44px 触控区）、隐藏"详情"、勾选高亮；底部吸底操作条
   -------------------------------------------------------------------------- */
.trip-section-header-right {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
}

.trip-organize-toggle {
    padding: 0;
    min-height: 2.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--brand-primary);
}

.trip-organize-toggle[aria-pressed="true"] {
    color: var(--brand-accent);
}

.timeline-pick {
    display: none;
}

.trip-timeline.is-organizing .timeline-pick {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.75rem;
    min-height: 2.75rem;
    align-self: stretch;
    margin: 0;
    cursor: pointer;
}

.timeline-pick input {
    width: 1.375rem;
    height: 1.375rem;
    margin: 0;
    accent-color: var(--brand-primary);
    cursor: pointer;
}

.timeline-pick input:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 2px;
}

.trip-timeline.is-organizing .timeline-details {
    display: none;
}

.trip-timeline.is-organizing .timeline-select {
    padding-left: 0.25rem;
}

.trip-timeline.is-organizing .timeline-item:has(.timeline-pick input:checked) {
    border-color: var(--brand-primary);
    background-color: #E6F0F2;
}

.trip-organize-bar {
    position: sticky;
    bottom: env(safe-area-inset-bottom, 0px);
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background-color: var(--brand-surface);
    border: 2px solid var(--brand-border);
    border-radius: 0.75rem;
}

.trip-organize-hint {
    flex: 1 1 100%;
    color: var(--brand-text-muted);
    font-size: 0.875rem;
}

@media (max-width: 767.98px) {
    /* 手机：避开悬浮打卡按钮 */
    .has-checkin-fab .trip-organize-bar {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 4.75rem);
    }
}

/* 合并确认页：保留地点 / 位置来源的单选卡片 */
.merge-members {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.merge-member {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--brand-surface);
    border: 2px solid var(--brand-border);
    border-radius: 0.75rem;
    cursor: pointer;
}

.merge-member.is-selected {
    border-color: var(--brand-primary);
}

.merge-member input {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--brand-primary);
}

.merge-member .place-thumb {
    width: 3rem;
    height: 3rem;
}

.merge-member-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.merge-member .place-meta {
    overflow-wrap: anywhere;
}

.merge-switch-confirm {
    margin-top: 0.75rem;
}

.trip-notes-details > summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
}

.trip-notes-details > summary::-webkit-details-marker {
    display: none;
}

.trip-notes-details > summary .trip-section-title {
    margin-bottom: 0;
}

.trip-notes-toggle {
    color: var(--brand-primary);
    font-size: 0.9375rem;
    text-decoration: underline;
}

.trip-notes-details[open] .trip-notes-toggle {
    display: none;
}

.trip-notes-details[open] > summary {
    margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   Trip 详情：通用 section 头 / 旧地点列表样式（详情页照片、编辑页仍在用）
   -------------------------------------------------------------------------- */
.trip-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.trip-section-header .trip-section-title {
    margin-bottom: 0;
}

.trip-section-count {
    color: var(--brand-text-muted);
    font-size: 0.9375rem;
}

.place-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.place-item {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    padding: 0.625rem 0.75rem;
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 0.75rem;
}

/* 整张卡片可点击：明确的 hover / active / focus 反馈，右侧箭头提示可进入 */
.place-card {
    color: inherit;
    text-decoration: none;
    min-height: 4.5rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.place-card:hover {
    background-color: var(--brand-background);
    border-color: var(--brand-primary);
}

.place-card:hover .place-name {
    text-decoration: underline;
}

.place-card:active {
    background-color: #E6F0F2;
}

.place-card:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 2px;
}

.place-card-chevron {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    fill: none;
    stroke: var(--brand-text-muted);
    stroke-width: 2;
}

/* 详情页 */
.place-photo {
    margin: 0 0 1rem;
}

.place-photo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 0.75rem;
}

.place-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1rem;
    margin: 0 0 1rem;
    padding: 0.875rem 1rem;
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 0.75rem;
}

.place-facts dt {
    color: var(--brand-text-muted);
    font-weight: 600;
    font-size: 0.9375rem;
}

.place-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.place-coords {
    font-size: 0.9375rem;
    color: var(--brand-text);
    background-color: var(--brand-background);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    user-select: all;
}

.place-map {
    height: 18.75rem; /* 300px */
    border: 1px solid var(--brand-border);
    border-radius: 0.75rem;
    overflow: hidden;
}

.place-map .maplibregl-ctrl-group {
    box-shadow: none;
    border: 1px solid var(--brand-border);
    border-radius: 0.5rem;
}

.place-map .maplibregl-ctrl-attrib {
    font-size: 0.6875rem;
}

.place-map-pin {
    width: 2rem;
    height: 2.625rem;
}

.place-map-pin svg {
    width: 100%;
    height: 100%;
    fill: var(--brand-primary);
    stroke: #fff;
    stroke-width: 1.2;
}

.place-map-pin svg circle {
    fill: var(--brand-accent);
    stroke: none;
}

.place-location-empty {
    padding: 1.5rem 1.25rem;
}

/* 删除确认页摘要 / 编辑页照片行 */
.place-delete-summary,
.place-edit-photo {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.place-edit-photo.is-removed .place-thumb {
    opacity: 0.4;
}

.place-thumb {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 0.5rem;
    background-color: var(--brand-background);
}

.place-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--brand-border);
}

.place-thumb-empty svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: none;
    stroke: var(--brand-text-muted);
    stroke-width: 1.6;
}

.place-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.place-name {
    font-weight: 700;
    color: var(--brand-primary);
    overflow-wrap: anywhere;
}

.place-meta {
    color: var(--brand-text-muted);
    font-size: 0.875rem;
}

.place-meta-sep {
    margin-inline: 0.3rem;
}

.place-badge {
    align-self: flex-start;
    margin-top: 0.125rem;
    padding: 0.0625rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #9A3D00;
    background-color: #FFF1E6;
    border-radius: 0.75rem;
}

/* --------------------------------------------------------------------------
   Quick Check-in 页面（Interactive Server）
   -------------------------------------------------------------------------- */
.checkin-page {
    max-width: 36rem;
}

.checkin-intro {
    color: var(--brand-text-muted);
    margin-top: -0.5rem;
    margin-bottom: 1.25rem;
}

.checkin-section {
    margin-bottom: 1.5rem;
}

.checkin-section-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--brand-text);
    margin-bottom: 0.5rem;
}

.checkin-preview {
    margin-bottom: 0.75rem;
}

.checkin-preview.is-hidden {
    display: none;
}

.checkin-preview img {
    display: block;
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 0.75rem;
}

.checkin-photo-meta,
.checkin-map-hint {
    color: var(--brand-text-muted);
    font-size: 0.875rem;
    margin: 0.375rem 0 0;
}

.checkin-photo-actions,
.checkin-location-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

.checkin-photo-actions .btn,
.checkin-location-actions .btn {
    min-height: 2.75rem;
}

.checkin-file-btn {
    margin: 0;
    cursor: pointer;
}

.checkin-remove {
    padding-inline: 0.25rem;
}

.checkin-notice {
    color: var(--brand-text-muted);
    font-size: 0.8125rem;
    margin: 0.25rem 0 0;
}

.checkin-status {
    margin: 0 0 0.625rem;
    color: var(--brand-text);
}

.checkin-status-warn {
    color: #9A3D00;
}

.checkin-status-error {
    color: #b3261e;
}

.checkin-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.checkin-chip {
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--brand-primary);
    border-radius: 1.5rem;
    background-color: var(--brand-surface);
    color: var(--brand-primary);
    font-weight: 600;
}

.checkin-chip.active {
    background-color: var(--brand-primary);
    color: #fff;
}

.checkin-chip:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 2px;
}

.checkin-map-wrap {
    position: relative;
    height: 18.75rem; /* 300px */
    border: 1px solid var(--brand-border);
    border-radius: 0.75rem;
    overflow: hidden;
    margin-top: 0.5rem;
}

/* 两个 class 的选择器：maplibre-gl.css 会给容器加 .maplibregl-map { position: relative }，
   单 class 的 .checkin-map 会被后加载的它覆盖，容器高度塌成 0，控件 / attribution 就跑到框外被裁掉。 */
.checkin-map-wrap .checkin-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* 中心固定图钉：尖端对准地图中心 */
.checkin-map-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2rem;
    height: 2.625rem;
    transform: translate(-50%, -100%);
    pointer-events: none;
    z-index: 2;
}

.checkin-map-pin svg {
    width: 100%;
    height: 100%;
    fill: var(--brand-primary);
    stroke: #fff;
    stroke-width: 1.2;
}

.checkin-map-pin svg circle {
    fill: var(--brand-accent);
    stroke: none;
}

.checkin-map .maplibregl-ctrl-group {
    box-shadow: none;
    border: 1px solid var(--brand-border);
    border-radius: 0.5rem;
}

.checkin-map .maplibregl-ctrl-attrib {
    font-size: 0.6875rem;
}

/* 照片托盘（编辑页 / 导入组卡）：缩略图 + 主照片标识 + 操作；无阴影无渐变 */
.photo-tray-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.photo-tray-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.5rem;
    background-color: var(--brand-surface);
    border: 2px solid var(--brand-border);
    border-radius: 0.75rem;
}

.photo-tray-item.is-primary {
    border-color: var(--brand-primary);
}

.photo-tray-item.is-removed {
    opacity: 0.7;
}

.photo-tray-item.is-removed .photo-tray-thumb img {
    filter: grayscale(1);
}

.photo-tray-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 5rem;
    height: 5rem;
}

.photo-tray-thumb img,
.photo-tray-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
    background-color: var(--brand-background);
}

.photo-tray-placeholder {
    border: 1px dashed var(--brand-border);
}

.photo-tray-badge {
    position: absolute;
    left: 0.25rem;
    bottom: 0.25rem;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #FFFFFF;
    background-color: var(--brand-primary);
    border-radius: 0.375rem;
}

.photo-tray-badge-new {
    left: auto;
    right: 0.25rem;
    color: var(--brand-primary);
    background-color: #FFFFFF;
    border: 1px solid var(--brand-primary);
}

.photo-tray-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.photo-tray-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.photo-tray-actions .btn {
    min-height: 2.75rem; /* 44px 触控 */
}

.photo-tray-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 地点详情：主照片下方的其他照片缩略图 */
.place-gallery {
    list-style: none;
    padding: 0;
    margin: -0.5rem 0 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.place-gallery-link {
    display: block;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px solid var(--brand-border);
}

.place-gallery-link:focus-visible {
    outline: 3px solid var(--brand-accent);
    outline-offset: 2px;
}

.place-gallery-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Trip 概览：添加操作区（从照片添加） */
.trip-add-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* 只读分享面板（Trip 详情页） */
.trip-share {
    border: 2px solid var(--brand-border);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.share-includes {
    margin: 0.5rem 0 0.75rem 1.1rem;
    padding: 0;
    color: var(--brand-text-muted);
    font-size: 0.9rem;
}

.share-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.share-warning {
    margin: 0;
    padding: 0.5rem 0.75rem;
    background-color: var(--brand-background);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--brand-text);
}

.share-link-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.share-link-row .form-control {
    flex: 1 1 16rem;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
}

.share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.share-qr {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
}

.share-qr img {
    width: 220px;
    height: 220px;
    background-color: #ffffff;
    border: 1px solid var(--brand-border);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.share-qr-note {
    font-size: 0.85rem;
    color: var(--brand-text-muted);
}

.share-disable {
    margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   公开只读分享页（/s/{token}）
   统一容器：max-width 1440，居中，border-box；Header / 正文 / Footer 边缘对齐。
   左右留白：手机 16px、平板 24px、桌面 32px。
   -------------------------------------------------------------------------- */
.share-container {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: 16px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .share-container { padding-inline: 24px; }
}

@media (min-width: 1200px) {
    .share-container { padding-inline: 32px; }
}

/* 注意：外壳不设 overflow-x:hidden——那会把它变成滚动容器，让后代 position:sticky 失效（地图不吸顶）。
   横向溢出靠 .share-container 的 border-box + 各元素 min-width:0 / 换行本身避免。 */

/* Header 与私人页一致 sticky；地图 sticky top 用 JS 实测的 --share-header-h（含 safe-area），不写死像素 */
.share-shell .share-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    border-bottom: 1px solid var(--brand-border);
    background-color: var(--brand-surface);
}

.share-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.75rem;
    padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
}

.share-brand img {
    display: block;
    height: 30px;
    width: auto;
}

.share-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding-block: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

/* 正文纵向留白：导航栏下 → 标题（手机 24px），标题 → 日期，摘要 → 地图/时间线 */
.share-page {
    padding-block: 1.5rem;
}

.share-page .page-header {
    margin-bottom: 1.5rem;   /* 摘要 → 地图/时间线 24px */
}

.share-page .page-title {
    margin-bottom: 0.5rem;   /* 标题 → 日期 8px */
}

.share-page .trip-detail-dates {
    margin: 0;
}

/* 地图标题行固定高度：隐藏"查看全部地点"时地图不上下跳动（吸顶块实测高度也保持稳定） */
.share-page .trip-map-section .trip-section-header {
    min-height: 2.75rem;
}

/* 顶部摘要 + 拼图封面：手机 = 较矮横幅（横向版）在标题上方；桌面 = 方形小图与标题并排。保持紧凑，不推开地图 / 时间线 */
.share-summary.has-cover {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

.share-cover {
    display: block;
    width: 100%;
    max-width: 100%;
}

.share-cover img {
    display: block;
    width: 100%;
    height: clamp(7rem, 26vw, 9rem);
    object-fit: cover;
    border-radius: 0.75rem;
    background-color: var(--brand-background);
}

.share-summary-text { min-width: 0; }

@media (min-width: 992px) {
    .share-summary.has-cover {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;   /* 标题紧贴封面，不被 page-header 的 space-between 推到最右 */
        gap: 1.25rem;
    }

    .share-cover { width: 8.5rem; flex: 0 0 auto; }

    .share-cover img {
        width: 8.5rem;
        height: 8.5rem;
    }
}

/* 调整封面页 */
.cover-page { max-width: 48rem; }

.cover-current { margin-bottom: 1.5rem; }

.cover-current .trip-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.cover-preview {
    display: block;
    width: min(100%, 18rem);
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0.75rem;
    border: 1px solid var(--brand-border);
    background-color: var(--brand-background);
}

.cover-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cover-preview-empty img { width: 3rem; height: 3rem; }

.cover-toolbar { margin-bottom: 0.75rem; }
.cover-count { margin: 0 0 0.25rem; font-weight: 600; }
.cover-hint { margin: 0; }

.cover-group {
    border: 0;
    padding: 0;
    margin: 0 0 1.25rem;
    min-width: 0;
}

.cover-group-title {
    float: none;
    width: auto;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cover-group-date {
    color: var(--brand-text-muted);
    font-weight: 400;
    font-size: 0.9375rem;
    margin-left: 0.25rem;
}

.cover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 0.5rem;
}

.cover-pick {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background-color: var(--brand-background);
}

.cover-pick img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-pick input {
    position: absolute;
    top: 0.375rem;
    left: 0.375rem;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0;
    accent-color: var(--brand-accent);
    z-index: 1;
}

.cover-pick.is-selected { border-color: var(--brand-accent); }
.cover-pick.is-disabled { opacity: 0.45; cursor: not-allowed; }

.cover-pick:has(input:focus-visible) {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.cover-pick-order {
    position: absolute;
    right: 0.375rem;
    bottom: 0.375rem;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background-color: var(--brand-accent);
    color: var(--brand-text);
    font-size: 0.8125rem;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
}

.cover-pick.is-selected .cover-pick-order { display: inline-flex; }

.cover-actions { margin-top: 1rem; }
.cover-reset { margin-top: 1rem; }

/* 卡片间距 12px、日期分组间距 24px（覆盖概览默认，仅分享页） */
.share-page .timeline-list {
    gap: 0.75rem;
}

.share-page .timeline-day-header {
    margin: 1.5rem 0 0.5rem;
}

.share-page .timeline-day-header:first-of-type {
    margin-top: 0.25rem;
}

/* 条目滚动定位：分享页手机端由 share-page.js 写入 --timeline-scroll-offset（Header + 吸顶地图块实测高度） */
.share-page .timeline-item {
    scroll-margin-top: var(--timeline-scroll-offset, 0px);
}

@media (min-width: 992px) {
    /* 桌面：导航栏下 → 标题 32px */
    .share-page { padding-block: 2rem; }

    /* 桌面两栏：复用私人页 sticky 地图，只把 top / 高度里的 Header 高度换成分享 Header 的实测值 */
    .share-page .trip-map-section {
        top: calc(var(--share-header-h, 3.5rem) + 1rem);
    }

    .share-page .trip-map-wrap {
        height: calc(100vh - var(--share-header-h, 3.5rem) - 6.5rem);
        height: calc(100dvh - var(--share-header-h, 3.5rem) - 6.5rem);
    }
}

/* 手机 / 平板单栏：地图块（标题行 + 查看全部地点 + 地图）到 Header 下方后吸顶；高度随可用屏高 220–260px */
@media (max-width: 991.98px) {
    .share-page .trip-map-section {
        position: sticky;
        top: var(--share-header-h, 3.5rem);
        z-index: 5;
        background-color: var(--brand-background);
        padding-bottom: 0.5rem;
    }

    .share-page .trip-map-wrap {
        height: clamp(220px, 32vh, 260px);
        height: clamp(220px, 32dvh, 260px);
    }
}

/* 分享页时间线卡片文字：分类与时间可分行，但完整时间（2:15 PM）是一个整体 */
.share-page .place-meta {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0;
}

.share-page .place-time {
    white-space: nowrap;
}

/* 桌面 / 平板：保留文字按钮，图标与徽标不显示 */
.share-page .timeline-details-mark {
    display: none;
}

/* 手机：三列（序号 24px · 缩略图 56px · 文字 minmax(0,1fr)），列间距 10px，卡片内边距 12px；
   "查看照片"链接改为覆盖在缩略图上（同一个 a.timeline-details，绝对定位到缩略图格子），无照片的地点没有这个链接。
   只作用于 .share-page，私人 Trip 页时间线不变。 */
@media (max-width: 767.98px) {
    .share-page .timeline-item {
        position: relative;
        display: block;
        padding: 12px;
    }

    .share-page .timeline-select {
        display: grid;
        grid-template-columns: 24px 56px minmax(0, 1fr);
        column-gap: 10px;
        align-items: center;
        width: 100%;
        min-height: 56px;
        padding: 0;
        border-radius: 0.5rem;
    }

    .share-page .timeline-select .seq-badge {
        min-width: 24px;
        width: 24px;
        height: 24px;
        padding: 0;
        font-size: 0.6875rem;
        justify-self: center;
    }

    .share-page .timeline-select .seq-badge.is-wide {
        min-width: 24px;
        font-size: 0.625rem;
    }

    .share-page .timeline-select .place-thumb {
        width: 56px;
        height: 56px;
    }

    .share-page .timeline-select .place-body {
        min-width: 0;
    }

    .share-page .timeline-select .place-name {
        overflow-wrap: anywhere;   /* 长地名正常换行，不缩小字号 */
    }

    /* 覆盖缩略图的照片链接：与缩略图同一格（左 12px 内边距 + 24px 序号 + 10px 间距），56×56 ≥ 44px 触控区 */
    .share-page a.timeline-details {
        position: absolute;
        left: calc(12px + 24px + 10px);
        top: 50%;
        transform: translateY(-50%);
        width: 56px;
        height: 56px;
        min-height: 56px;
        padding: 0;
        border: 0;
        border-radius: 0.5rem;
        background: transparent;
        color: #FFFFFF;
    }

    .share-page a.timeline-details:hover,
    .share-page a.timeline-details:active {
        background: rgba(0, 66, 89, 0.12);
        color: #FFFFFF;
    }

    .share-page a.timeline-details:focus-visible {
        outline: 3px solid var(--brand-accent);
        outline-offset: 0;
    }

    .share-page .timeline-details-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .share-page .timeline-details-mark {
        position: absolute;
        right: 3px;
        bottom: 3px;
        display: inline-flex;
        align-items: center;
        gap: 2px;
        height: 18px;
        padding: 0 4px;
        border-radius: 5px;
        background-color: var(--brand-primary);
        color: #FFFFFF;
        line-height: 1;
    }

    .share-page .timeline-details-icon {
        width: 12px;
        height: 12px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .share-page .timeline-details-count {
        font-size: 0.6875rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
}

/* --------------------------------------------------------------------------
   私人 Trip 页：分享面板默认折叠（原生 details/summary，可键盘操作、带展开语义）
   -------------------------------------------------------------------------- */
details.trip-share > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.75rem; /* 44px 触控 */
    cursor: pointer;
    user-select: none;
}

details.trip-share > summary::-webkit-details-marker { display: none; }

details.trip-share > summary:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: 0.375rem;
}

details.trip-share > summary .trip-section-title { margin: 0; }

.share-summary-right {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.share-summary-chevron {
    width: 1rem;
    height: 1rem;
    transition: transform 0.15s ease;
}

details.trip-share[open] > summary .share-summary-chevron { transform: rotate(180deg); }

details.trip-share > .share-body { margin-top: 0.75rem; }

/* --------------------------------------------------------------------------
   分享照片浏览页（/s/{token}/media/{photoId}）
   -------------------------------------------------------------------------- */
.share-media {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.share-media-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.share-media-stage {
    position: relative;
    background-color: #0f1b22;
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 14rem;
    height: calc(100vh - var(--share-header-h, 3.5rem) - 15rem);
    height: calc(100dvh - var(--share-header-h, 3.5rem) - 15rem);
    max-height: 48rem;
    touch-action: pan-y pinch-zoom; /* 纵向滚动 / 双指缩放交给浏览器，水平滑动由脚本识别 */
}

.share-media-stage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* 完整照片，不裁切 */
    background: transparent;
}

.share-media.is-loading .share-media-stage img { opacity: 0.6; }
.share-media.is-failed .share-media-stage img { visibility: hidden; }

/* 翻页按钮：白底 + 深色箭头 + 边框，任何状态（hover / focus / active / 触摸后残留的 :hover）都不变透明。
   根因：Bootstrap `.btn:hover` / `.btn:active` 的 --bs-btn-hover-bg 默认 transparent，且选择器特异性高于 `.share-media-nav`；
   iOS 上点过的按钮会保持 :hover，右箭头因此"消失"在照片上。这里把 Bootstrap 的按钮变量全部指定，并显式写出各状态。 */
.share-media-stage .share-media-nav {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--brand-border);
    --bs-btn-hover-color: var(--brand-primary);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-color: var(--brand-primary);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: var(--brand-primary);
    --bs-btn-disabled-color: var(--brand-text-muted);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: var(--brand-border);
    --bs-btn-focus-shadow-rgb: 0, 66, 89;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;                 /* 位于图片之上；舞台 overflow:hidden 但按钮完全在舞台内，不被裁切 */
    width: 2.75rem;             /* 44px 触控区，左右对称 */
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border-radius: 999px;
    background-color: #fff;
    border: 1px solid var(--brand-border);
    color: var(--brand-primary);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    opacity: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.share-media-stage .share-media-nav:hover,
.share-media-stage .share-media-nav:focus,
.share-media-stage .share-media-nav:focus-visible,
.share-media-stage .share-media-nav:active,
.share-media-stage .share-media-nav:first-child:active {
    background-color: #fff;
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    opacity: 1;
}

.share-media-stage .share-media-nav:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* 禁用（第一张 / 最后一张）：位置不变，白底保留，箭头变灰 */
.share-media-stage .share-media-nav:disabled,
.share-media-stage .share-media-nav.disabled {
    background-color: #fff;
    color: #9AA8B1;
    border-color: var(--brand-border);
    opacity: 0.85;
    cursor: default;
}

.share-media-nav.is-prev { left: 0.5rem; }
.share-media-nav.is-next { right: 0.5rem; }

.share-media-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.share-media-name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.share-media-meta {
    color: var(--brand-text-muted);
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: center;
}

.share-media-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.share-media-actions .btn { min-height: 2.75rem; }

.share-media-notice {
    padding: 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

/* 从照片添加（批量导入）：概览行 + 组卡 */
.import-page .import-group {
    border: 2px solid var(--brand-border);
    border-radius: 0.75rem;
    padding: 0.75rem;
}

.import-page .import-group.is-saved {
    border-color: var(--brand-primary);
    opacity: 0.85;
}

.import-page .import-group.is-failed {
    border-color: #B42318;
}

.import-photo-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.import-photo-row {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.5rem;
    background-color: var(--brand-surface);
    border-radius: 0.625rem;
}

.import-photo-row.is-error {
    border: 1px solid #B42318;
}

.import-select {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 1.75rem;
}

.import-photo-time,
.import-photo-location {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
    font-size: 0.875rem;
}

.import-photo-time .form-control,
.import-tz-select {
    width: auto;
    min-width: 7rem;
    max-width: 100%;
}

.import-tz-select {
    max-width: 16rem;
}

.import-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand-primary);
    text-transform: none;
}

.import-tz {
    color: var(--brand-text-muted);
}

.import-ambiguous {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.import-tz-tools {
    margin-bottom: 0.75rem;
}

/* 简化后的时间说明：默认只有日期时间，估计时给出简短说明 + "修改"折叠 */
.import-time-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    font-size: 0.8125rem;
}

.import-estimate {
    color: var(--brand-text-muted);
}

.import-adjust {
    padding: 0.125rem 0.25rem;
    min-height: auto;
}

.import-advanced {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.25rem 0 0.25rem 0;
    padding: 0.625rem;
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 0.5rem;
}

.import-advanced .form-select {
    max-width: 20rem;
}

.import-manual-offset summary {
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--brand-text-muted);
}

.import-manual-offset .form-select {
    margin-top: 0.375rem;
}

.import-dst {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.import-group-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.import-location-candidates {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.import-candidate {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
}

.import-candidate-thumb {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: 0.375rem;
}

.checkin-progress {
    height: 0.5rem;
    background-color: var(--brand-border);
    border-radius: 0.25rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.checkin-progress-bar {
    height: 100%;
    background-color: var(--brand-primary);
    transition: width 0.15s ease;
}

/* --------------------------------------------------------------------------
   页面元素
   -------------------------------------------------------------------------- */
.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: 1rem;
}

/* 标题 + 右侧操作按钮（手机端换行堆叠） */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.page-header .page-title {
    margin-bottom: 0;
}

.breadcrumb-back {
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
}

.breadcrumb-back a {
    text-decoration: none;
    font-weight: 600;
}

.breadcrumb-back a:hover,
.breadcrumb-back a:focus-visible {
    text-decoration: underline;
}

/* Trip 详情页面包屑行：左"‹ 我的旅行"，右低强调"管理旅行"（齿轮 + 文字，44px 触控区）。手机与桌面同一位置；
   允许换行（文字放大 / 极窄屏时右侧入口落到下一行，不横向溢出） */
.trip-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    min-height: 2.75rem;
}

.trip-manage-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    padding: 0 0.5rem;
    margin-right: -0.5rem;
    border-radius: 0.5rem;
    color: var(--brand-text-muted);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.trip-manage-link svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.breadcrumb-back .trip-manage-link:hover,
.breadcrumb-back .trip-manage-link:focus-visible {
    color: var(--brand-primary);
    text-decoration: underline;
}

/* 管理旅行页 */
.manage-page { max-width: 40rem; }

.manage-section {
    margin-bottom: 2rem;
}

.manage-section .trip-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.manage-cover {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

.manage-cover-thumb {
    flex: 0 0 auto;
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: 0.75rem;
    border: 1px solid var(--brand-border);
    background-color: var(--brand-background);
}

.manage-cover-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.manage-cover-empty img { width: 2.25rem; height: 2.25rem; }

.manage-cover-body {
    flex: 1 1 14rem;
    min-width: 0;
}

.manage-cover-body .form-text { margin: 0 0 0.75rem; }

/* 分享设置（面板内表单） */
.share-settings { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--brand-border); }
.share-settings-group { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.share-settings-group legend { float: none; width: auto; font-size: inherit; margin-bottom: 0.375rem; }
.share-radio, .share-check { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; cursor: pointer; }
.share-radio input, .share-check input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--brand-primary); }
.share-password-field { margin: 0.25rem 0 0 1.75rem; max-width: 24rem; }
.share-homepage-status { margin: 0.25rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.share-homepage-reason { color: var(--brand-text-muted); font-size: 0.9375rem; }
.share-resubmit { margin-top: 0.75rem; }

/* 密码分享页 */
.share-locked { display: flex; justify-content: center; }
.share-locked-card {
    width: min(100%, 26rem);
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
}
.share-locked-icon { width: 3rem; height: 3rem; margin-bottom: 0.75rem; }
.share-unlock-form { display: flex; flex-direction: column; gap: 0.5rem; text-align: left; margin-top: 1rem; }
.share-locked-note { margin-top: 0.75rem; }

/* 首页：网友分享的旅程 */
.featured-section { padding: 2rem 1rem 2.5rem; }
.featured-inner { max-width: 72rem; margin: 0 auto; }
.featured-header { margin-bottom: 1rem; }
.featured-heading { font-size: 1.25rem; font-weight: 700; color: var(--brand-primary); margin: 0 0 0.25rem; }
.featured-lead { color: var(--brand-text-muted); margin: 0; }
@media (min-width: 768px) { .featured-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .featured-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 管理后台 */
.nav-link-admin { color: var(--brand-accent) !important; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 1.25rem; border-bottom: 1px solid var(--brand-border); }
.admin-nav-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; color: var(--brand-text-muted); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; }
.admin-nav-link.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.admin-stat { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.875rem 1rem; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 0.75rem; color: inherit; text-decoration: none; }
.admin-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--brand-primary); }
.admin-stat-label { color: var(--brand-text-muted); font-size: 0.9375rem; }
.admin-section { margin-bottom: 2rem; }
.admin-search { display: flex; gap: 0.5rem; margin-bottom: 1rem; max-width: 32rem; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 0.75rem; }
.admin-table th, .admin-table td { padding: 0.625rem 0.75rem; text-align: left; border-bottom: 1px solid var(--brand-border); vertical-align: top; }
.admin-table th { color: var(--brand-text-muted); font-weight: 600; white-space: nowrap; }
.admin-table tr.is-disabled td { color: var(--brand-text-muted); }
.place-badge.is-danger { background-color: #fbe9e7; color: #b3261e; }
.admin-pager { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.admin-pager-text { color: var(--brand-text-muted); }
.admin-dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.375rem 1rem; margin: 0 0 1.5rem; }
.admin-dl dt { color: var(--brand-text-muted); }
.admin-dl dd { margin: 0; }
.admin-status-form, .admin-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; margin-bottom: 0.75rem; }
.admin-status-form .form-control, .admin-inline-form .form-control { flex: 1 1 16rem; }
.admin-status-form .form-label, .admin-inline-form .form-label { width: 100%; margin: 0; }
.admin-photo-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.75rem; }
.admin-photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0.5rem; background: var(--brand-background); }
.admin-photo-meta { display: flex; flex-direction: column; font-size: 0.8125rem; margin-top: 0.25rem; }
.admin-photo-place { font-weight: 600; overflow-wrap: anywhere; }
.admin-photo-date { color: var(--brand-text-muted); }
.admin-preview .timeline-select { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; }
.admin-preview .page-title { font-size: 1.25rem; margin: 0; }

/* 危险区：页面最下方，边框弱化的红色，只放一个 outline 危险按钮（确认在独立页面） */
.trip-danger-zone {
    border: 1px solid rgba(179, 38, 30, 0.35);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
}

.trip-danger-zone .form-text { margin: 0 0 0.75rem; }

/* --------------------------------------------------------------------------
   通用表单页（Trip 新建 / 编辑 / 删除确认）：单列、label 在上、限宽
   -------------------------------------------------------------------------- */
.form-page {
    max-width: 36rem; /* 576px */
}

.form-page-subtitle {
    color: var(--brand-text-muted);
    margin-top: -0.5rem;
    margin-bottom: 1.25rem;
}

.app-form .form-label {
    font-weight: 600;
    color: var(--brand-text);
    margin-bottom: 0.375rem;
}

.app-form .form-control {
    min-height: 2.75rem; /* 44px 触控目标 */
    border-color: var(--brand-border);
}

.app-form textarea.form-control {
    min-height: 6rem;
}

.trip-form-dates {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1rem;
}

.trip-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.trip-form-actions .btn-lg {
    min-height: 3rem;
    font-size: 1rem;
    flex: 1 1 10rem;
}

/* --------------------------------------------------------------------------
   Trip 列表 / 详情
   -------------------------------------------------------------------------- */
.trip-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.trip-card {
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 0.75rem;
}

.trip-card-link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    min-height: 4.5rem;
    color: inherit;
    text-decoration: none;
    border-radius: inherit;
}

/* 拼图封面（方形，服务器生成的 JPEG；没有则品牌占位） */
.trip-card-cover {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 0.5rem;
    background-color: var(--brand-background);
}

.trip-card-cover-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--brand-border);
}

.trip-card-cover-empty img {
    width: 2rem;
    height: 2rem;
}

.trip-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

@media (min-width: 768px) {
    .trip-card-cover { width: 5.5rem; height: 5.5rem; }
}

.trip-card-link:hover,
.trip-card-link:focus-visible {
    border-color: var(--brand-primary);
    background-color: var(--brand-background);
}

.trip-card-link:hover .trip-card-title {
    text-decoration: underline;
}

.trip-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--brand-primary);
    overflow-wrap: anywhere;
}

.trip-dates {
    color: var(--brand-text-muted);
    font-size: 0.9375rem;
}

.trip-dates-sep {
    margin-inline: 0.375rem;
}

.trip-detail-header .page-title {
    overflow-wrap: anywhere;
}

.trip-detail-dates {
    margin: 0.25rem 0 0;
}

.trip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.trip-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-text);
    margin-bottom: 0.375rem;
}

.trip-notes {
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.trip-notes-text {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.trip-delete-card {
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.trip-delete-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: 0.25rem;
    overflow-wrap: anywhere;
}

.trip-delete-dates {
    margin-bottom: 1rem;
}

.trip-delete-warning {
    color: #9a2f13;
    font-weight: 600;
}

.btn-danger,
.btn-outline-danger {
    --bs-btn-color: #b3261e;
    --bs-btn-border-color: #b3261e;
    --bs-btn-hover-bg: #b3261e;
    --bs-btn-hover-border-color: #b3261e;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #8e1e17;
    --bs-btn-active-border-color: #8e1e17;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #b3261e;
}

/* --------------------------------------------------------------------------
   账户管理（Account/Manage/*）：标题、次级标题、操作按钮行、2FA QR Code
   菜单本身在 ManageNavMenu.razor.css（scoped）
   -------------------------------------------------------------------------- */
.manage-subtitle {
    color: var(--brand-text-muted);
    margin-top: -0.5rem;
    margin-bottom: 1.25rem;
}

.manage-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-text);
    margin-bottom: 0.75rem;
}

.manage-content {
    max-width: 40rem;
}

.manage-subsection-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--brand-text);
    margin: 1.5rem 0 0.625rem;
}

.manage-text p:last-child {
    margin-bottom: 1.25rem;
}

/* 并排操作按钮：同高（.btn min-height 44px）、统一间距，窄屏换行 */
.manage-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.manage-actions form {
    display: contents;
}

/* 表单底部按钮：<576px 全宽堆叠；≥576px 按内容宽度，不占满整行 */
.manage-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.manage-form-actions .btn-lg {
    min-height: 3rem;
    font-size: 1rem;
    flex: 1 1 100%;
}

.manage-steps {
    padding-left: 1.25rem;
}

.manage-steps > li {
    margin-bottom: 1.25rem;
}

.manage-steps > li > p:first-child {
    margin-bottom: 0.5rem;
}

/* 2FA QR Code：本地生成的内联 SVG，尺寸由此控制；白底 + 边框，无阴影 */
.manage-qr {
    width: 12.5rem;   /* 200px */
    max-width: 100%;
    padding: 0.5rem;
    background-color: #fff;
    border: 1px solid var(--brand-border);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
}

.manage-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.manage-key-label {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.manage-key {
    display: inline-block;
    padding: 0.375rem 0.625rem;
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--brand-text);
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 0.375rem;
    overflow-wrap: anywhere;
    user-select: all;
}

/* 验证码 / 恢复码输入：与其他字段一样 100% 宽，只放大字号和字距 */
.manage-code-input {
    font-size: 1.25rem;
    letter-spacing: 0.15em;
}

@media (min-width: 576px) {
    .manage-form-actions .btn-lg {
        flex: 0 0 auto;
        min-width: 8rem;
    }
}

/* --------------------------------------------------------------------------
   首页：紧凑 Hero（mobile-first）
   -------------------------------------------------------------------------- */
.home-hero {
    padding-block: 1.25rem 1rem;
}

.home-hero-inner {
    max-width: var(--app-content-max-width);
    margin-inline: auto;
    padding-inline: var(--app-gutter);
    text-align: center;
}

.home-hero-logo {
    height: 2.75rem; /* 44px 手机 */
    width: auto;
    margin-bottom: 0.625rem;
}

.home-hero-title {
    font-size: 1.75rem; /* 28px 手机 */
    font-weight: 800;
    color: var(--brand-primary);
    letter-spacing: -0.01em;
    margin-bottom: 0.375rem;
}

.home-hero-lead {
    font-size: 1rem;
    color: var(--brand-text-muted);
    max-width: 34rem;
    margin-inline: auto;
    margin-bottom: 0.875rem;
}

.home-hero-actions {
    display: flex;
    justify-content: center;
}

.home-hero-actions .btn {
    min-width: 11rem;
}

/* --------------------------------------------------------------------------
   首页 Sample Map（MapLibre + OpenFreeMap，style 来自 Map:StyleUrl）
   手机：左右 0.5rem 近全宽，高 55vh（≥380px）；桌面：左右 1.75rem，高 clamp(440px, 100vh-270px, 650px)
   -------------------------------------------------------------------------- */
.home-map-section {
    --home-map-gutter: 0.5rem;
    padding: 0 var(--home-map-gutter) var(--home-map-gutter);
}

/* 地图 section header：普通标题 + 文字标签，不做成胶囊按钮 */
.home-map-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding: 0.25rem 0.5rem 0.5rem;
}

.home-map-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin: 0;
}

.home-map-tag {
    color: #9A3D00; /* 深橙文字，浅底对比度达标；不用橙底白字 */
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-map {
    height: 55vh;  /* 旧浏览器回退 */
    height: 55dvh;
    min-height: 23.75rem; /* 380px */
    border: 1px solid var(--brand-border);
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: #E9F2F6; /* 瓦片加载前的海洋色 */
}

/* Marker：可见图钉约 30px，按钮点击/触控区域 44×44 */
.home-map-marker {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
}

.home-map-marker svg {
    width: 1.875rem;  /* 30px */
    height: 2.0625rem; /* 33px, 与 144×160 viewBox 比例一致 */
    display: block;
    transition: transform 120ms ease-out;
}

@media (hover: hover) {
    .home-map-marker:hover svg {
        transform: translateY(-2px) scale(1.08);
    }
}

.home-map-marker:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 0;
}

/* Popup：品牌边框，无阴影 */
.home-map-popup .maplibregl-popup-content {
    box-shadow: none;
    border: 1px solid var(--brand-border);
    border-radius: 0.5rem;
    padding: 0.625rem 2rem 0.625rem 0.875rem;
    font-family: var(--font-system);
    color: var(--brand-text);
}

.home-map-popup .maplibregl-popup-close-button {
    width: 2rem;
    height: 2rem;
    font-size: 1.125rem;
    color: var(--brand-text-muted);
    border-radius: 0.375rem;
}

.home-map-popup .maplibregl-popup-close-button:hover {
    background-color: var(--brand-background);
}

.home-map-popup-title {
    display: block;
    color: var(--brand-primary);
    font-size: 0.9375rem;
}

.home-map-popup-meta {
    color: var(--brand-text-muted);
    font-size: 0.8125rem;
    margin-top: 0.125rem;
}

.home-map-popup-sample {
    color: #9A3D00;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 0.375rem;
}

/* MapLibre 控件：去掉默认阴影，对齐品牌 */
.home-map .maplibregl-ctrl-group {
    box-shadow: none;
    border: 1px solid var(--brand-border);
    border-radius: 0.5rem;
}

.home-map .maplibregl-ctrl-group button {
    width: 2.25rem;
    height: 2.25rem;
}

.home-map .maplibregl-ctrl-attrib {
    font-size: 0.6875rem;
}

.empty-state {
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 0.75rem;
    padding: 2rem 1.25rem;
    text-align: center;
}

.empty-state-icon {
    height: 3.5rem;
    width: auto;
    margin-bottom: 1rem;
}

.empty-state-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--brand-text);
    margin-bottom: 0.375rem;
}

.empty-state-text {
    color: var(--brand-text-muted);
    margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   Identity 表单统一布局：Label / Input / Validation 纵向堆叠（flex column，无绝对定位、无 form-floating）。
   输入框 100% 宽、≥44px 高；字段间距一致；文字放大 200% 也不会重叠。
   -------------------------------------------------------------------------- */
.account-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.account-field .form-label {
    margin-bottom: 0;
    font-weight: 600;
    color: var(--brand-text);
}

.account-field .form-control {
    width: 100%;
    min-height: 2.75rem; /* 44px */
    border-color: var(--brand-border);
}

.account-field .form-text {
    color: var(--brand-text-muted);
    font-size: 0.9rem;
}

.account-field .validation-message {
    color: #b3261e;
    font-size: 0.9375rem;
}

/* 只读值（当前邮箱、用户名）：同样的纵向结构，值用静态样式 */
.account-field .account-static {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.375rem 0.75rem;
    background-color: var(--brand-background);
    border: 1px solid var(--brand-border);
    border-radius: 0.375rem;
    overflow-wrap: anywhere;
}

.account-verified {
    color: #1a7f4b;
    font-weight: 700;
}

/* 复选框行：整行 ≥44px 触控目标 */
.account-check {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    margin-bottom: 1rem;
}

.account-check .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    flex: 0 0 auto;
}

.account-check .form-check-label {
    margin: 0;
}

/* 表单按钮行：手机全宽堆叠，≥576px 按内容宽度 */
.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.account-actions .btn {
    flex: 1 1 100%;
    min-height: 3rem;
    font-size: 1rem;
}

.account-actions--stretch .btn {
    flex: 1 1 100%;
}

/* 说明文字与提示 */
.account-text {
    color: var(--brand-text);
}

.account-text p:last-child {
    margin-bottom: 1.25rem;
}

.account-links {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    color: var(--brand-text-muted);
}

.account-links p {
    margin-bottom: 0.375rem;
}

.account-links a {
    text-decoration: none;
    font-weight: 600;
}

.account-links a:hover,
.account-links a:focus-visible {
    text-decoration: underline;
}

/* 恢复码列表 */
.recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.5rem;
    margin: 1rem 0 1.25rem;
    padding: 0;
    list-style: none;
}

.recovery-codes code {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--brand-text);
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 0.375rem;
    text-align: center;
    user-select: all;
}

/* 登录方式列表（外部登录 / 已关联登录） */
.account-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.account-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 1rem;
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 0.5rem;
}

@media (min-width: 576px) {
    .account-actions .btn {
        flex: 0 0 auto;
        min-width: 8rem;
    }

    .account-actions--stretch .btn {
        flex: 1 1 100%;
    }
}

/* --------------------------------------------------------------------------
   认证页面（Sign in / Create account）：单列、label 在输入框上方、限宽 ~460px
   -------------------------------------------------------------------------- */
.auth-page {
    max-width: 28.75rem; /* 460px */
    margin-inline: auto;
    padding-block: 0.5rem;
}

.auth-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: 0.25rem;
}

.auth-subtitle {
    color: var(--brand-text-muted);
    margin-bottom: 1.5rem;
}

.auth-page .form-label {
    font-weight: 600;
    color: var(--brand-text);
    margin-bottom: 0.375rem;
}

.auth-page .form-control {
    min-height: 2.75rem; /* 44px 触控目标 */
    border-color: var(--brand-border);
}

.auth-page .btn-lg {
    min-height: 3rem;
    font-size: 1rem;
}

.auth-links {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    color: var(--brand-text-muted);
}

.auth-links p {
    margin-bottom: 0.375rem;
}

/* 认证页底部链接：默认不加下划线，hover / focus 时加 */
.auth-links a {
    text-decoration: none;
    font-weight: 600;
}

.auth-links a:hover,
.auth-links a:focus-visible {
    text-decoration: underline;
}

.auth-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-text-muted);
    margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   桌面端 ≥ 768px
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .app-header-inner {
        min-height: var(--app-header-height-lg);
    }

    .app-brand-logo { display: block; height: 2.5rem; }
    .app-brand-icon { display: none; }

    .lang-form-desktop { display: inline-flex; } /* 桌面：品牌下拉 */
    .lang-form-mobile  { display: none; }        /* 手机原生 select 隐藏 */

    .app-nav-desktop { display: flex; }
    .app-header-actions { display: none; }
    .app-nav-mobile { display: none; }

    .app-footer {
        margin-bottom: 0;
    }

    .content-container {
        padding-inline: 1.5rem;
        padding-block: 2rem;
    }

    .mobile-checkin-action {
        display: none !important;
    }

    /* 紧凑 Hero 桌面尺寸：上下 padding 约 32px，Logo 52px，标题 36px，副标题 17px；不显示按钮 */
    .home-hero {
        padding-block: 2rem 1.75rem;
    }

    .home-hero-logo { height: 3.25rem; }
    .home-hero-title { font-size: 2.25rem; }
    .home-hero-lead { font-size: 1.0625rem; margin-bottom: 0; }
    .home-hero-actions { display: none; }

    .home-map-section {
        --home-map-gutter: 1.75rem; /* 28px：桌面左右边距 24–32px */
    }

    .home-map-header {
        padding-inline: 0.25rem;
    }

    .home-map {
        height: clamp(27.5rem, calc(100vh - 270px), 40.625rem); /* 440px … 650px */
    }

    .page-title { font-size: 1.75rem; }

    .trip-form-dates {
        grid-template-columns: 1fr 1fr;
    }

    .trip-form-actions .btn-lg {
        flex: 0 0 auto;
        min-width: 8rem;
    }

    .trip-list {
        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    }

    .place-map,
    .checkin-map-wrap,
    .trip-map-wrap {
        height: 22.5rem; /* 360px */
    }
}

/* Trip 概览桌面两栏：左时间线 42% / 右地图 58%；地图在内容区内 sticky，top 留出 sticky Header 的高度，不覆盖 Header 与操作区 */
@media (min-width: 992px) {
    .trip-overview {
        display: grid;
        grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
        gap: 1.5rem;
        align-items: start;
    }

    .trip-timeline {
        order: 1;
    }

    .trip-map-section {
        order: 2;
        position: sticky;
        top: calc(var(--app-header-height-lg) + 1rem);
    }

    .trip-map-wrap,
    .trip-map-section.is-expanded .trip-map-wrap {
        height: calc(100vh - var(--app-header-height-lg) - 6.5rem);
        height: calc(100dvh - var(--app-header-height-lg) - 6.5rem);
        min-height: 22.5rem;
        max-height: 52rem;
    }

    /* 桌面只有 sticky 地图 + 查看全部地点，不做高度切换 */
    .trip-map-expand {
        display: none;
    }

    .timeline-day-header:first-of-type {
        margin-top: 0.25rem;
    }
}