/* ============================================================
 * AI 导览页面样式
 * 严格按 Frame251.css 原始样式 1:1 还原（背景图 100% 100% 填满，
 * 不拉伸不裁切，与 Frame251 原版视觉一致）
 * 图片引用已替换为 ../img/AI/...
 * 适配底部导航栏（在 .app-container 手机容器内 absolute 定位）
 * ============================================================ */

/* —— AI 导览页面：覆盖 .page 的默认 height: 100%（100% 会算到 .app-container
   的 812px）。改用 height: 100vh 让页面严格等于视口高度。 —— */
.ai-guide-page {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

/* 状态栏：背景 #F4DCCE（淡米桃色），文字深色以保证可读性
   width: 100% 撑满整个 .ai-guide-page 宽度（避免被 align-items: center 居中收缩） */
.ai-guide-page .status-bar {
    position: relative;
    z-index: 102;
    width: 100%;
    background: #F4DCCE;
    color: #1a1a1a;
    flex-shrink: 0;
}

/* —— 滚动容器：撑满 .page 高度，
   底部 padding 83px 给底部导航栏预留空间（避免最后一行被遮） —— */
.ai-guide-page .scroll-container {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-bottom: 83px;
    -webkit-overflow-scrolling: touch;
}

/* —— 底部导航栏：保持 common.css 中的 position: absolute; bottom: 0;
   在 .app-container 手机容器（375×812）内绝对定位。 —— */
/* （不再覆盖 position:fixed，避免脱离 .app-container 容器） */

/* —— 主框架 25_1：原始设计高度 664px（Frame251.css 原始设计），
   —— 为容纳 2x2 卡片（148x170 + 20px 行间距 = 360px），min-height 设为 840px
   —— 计算：精选推荐标题 top:435 + 容器 top:470 + 容器高 360 = 830px，
   —— 加上 transform 上移 18px 后视觉底部约 812px，故设 840px 留 10px 余量
   —— background-size 用 100% 664px 保持原图不被压缩/拉伸
   —— 框架底部 176px（840-664）不显示背景图，透出 .ai-guide-page 的 #EFE8E8 背景色
   transform: translateY(-18px) 让所有内容（图片/卡片/文字/图标）整体上移 18px —— */
.ai-guide-page .Pixso-frame-25_1 {
    width: 100%;
    min-height: 840px;
    overflow: hidden;
    position: relative;
    background-size: 100% 664px;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../img/AI/6ce2e222709fa58e66f3535115fda3a366941f44.png);
    mix-blend-mode: normal;
    transform: translateY(-18px);
}

/* —— 主框架 25_1 容器其他属性（位置/字体等）见下下方 .Pixso-paragraph-* 各选择器 —— */

/* —— 视频通话导览 —— */
.ai-guide-page .Pixso-paragraph-25_4 {
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    letter-spacing: 0px;
    text-decoration: none;
    color: rgba(250, 238, 236, 1);
    width: 97px;
    height: 21px;
    position: absolute;
    left: 27px;
    top: 368px;
    mix-blend-mode: normal;
}

/* —— 视频通话副标题 —— */
.ai-guide-page .Pixso-paragraph-25_5 {
    font-size: 10px;
    font-weight: 600;
    text-align: left;
    letter-spacing: 0px;
    text-decoration: none;
    color: rgba(207, 116, 111, 1);
    width: 97px;
    height: 15px;
    position: absolute;
    left: 28px;
    top: 388px;
    mix-blend-mode: normal;
}

/* —— 语音通话导览 —— */
.ai-guide-page .Pixso-paragraph-25_6 {
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    letter-spacing: 0px;
    text-decoration: none;
    color: rgba(115, 67, 38, 1);
    width: 97px;
    height: 21px;
    position: absolute;
    left: 197px;
    top: 368px;
    mix-blend-mode: normal;
}

/* —— 语音通话副标题 —— */
.ai-guide-page .Pixso-paragraph-25_7 {
    font-size: 10px;
    font-weight: 600;
    text-align: left;
    letter-spacing: 0px;
    text-decoration: none;
    color: rgba(159, 135, 118, 1);
    width: 97px;
    height: 15px;
    position: absolute;
    left: 198px;
    top: 389px;
    mix-blend-mode: normal;
}

/* —— 精选推荐标题行容器 —— */
.ai-guide-page .Pixso-frame-25_20 {
    width: 325px;
    height: 21px;
    position: absolute;
    left: 17px;
    top: 435px;
    mix-blend-mode: normal;
}

/* —— 精选推荐标题 —— */
.ai-guide-page .Pixso-paragraph-25_8 {
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    letter-spacing: 0px;
    text-decoration: none;
    color: rgba(87, 84, 84, 1);
    width: 91px;
    height: 21px;
    position: absolute;
    left: 0px;
    top: 0px;
    mix-blend-mode: normal;
}

/* —— 查看更多 —— */
.ai-guide-page .Pixso-paragraph-25_10 {
    font-size: 11px;
    font-weight: 500;
    text-align: left;
    letter-spacing: 0px;
    text-decoration: none;
    color: rgba(175, 175, 174, 1);
    width: 56px;
    height: 21px;
    position: absolute;
    left: 268px;
    top: 0px;
    mix-blend-mode: normal;
    cursor: pointer;
}

/* —— 装饰线 —— */
.ai-guide-page .Pixso-vector-25_9 {
    width: 21px;
    height: 3px;
    background-image: url(../img/AI/Line_25_9.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 2px;
    top: 20px;
}

/* —— 右箭头（查看更多） —— */
.ai-guide-page .Pixso-vector-25_17 {
    width: 4.92%;
    height: 76.19%;
    background-image: url(../img/AI/Bace3Iconchevronright.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 95.08%;
    right: 0%;
    top: 0%;
    bottom: 23.81%;
}

/* —— 4个推荐卡片容器（2行2列布局，总高度360px） —— */
.ai-guide-page .Pixso-frame-26_15 {
    width: 321px;
    height: 360px;
    overflow: hidden;
    position: absolute;
    left: 15px;
    top: 470px;
    mix-blend-mode: normal;
}

/* —— 卡片1：长沙毛泽东雕像（左上） —— */
.ai-guide-page .Pixso-frame-25_33 {
    width: 148px;
    height: 170px;
    position: absolute;
    left: 0px;
    top: 0px;
    mix-blend-mode: normal;
    cursor: pointer;
}
.ai-guide-page .Pixso-rectangle-25_34 {
    width: 148px;
    height: 170px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 8px 8px 8px 8px;
    background-color: rgba(248, 246, 243, 1);
    mix-blend-mode: normal;
}
.ai-guide-page .Pixso-rectangle-25_35 {
    width: 148px;
    height: 110px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 8px 8px 0px 0px;
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../img/AI/969f913464be319d833baa661ee26b41ef40d077.png);
    mix-blend-mode: normal;
}
.ai-guide-page .Pixso-paragraph-25_36 {
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    letter-spacing: 0px;
    text-decoration: none;
    color: rgba(64, 63, 61, 1);
    width: 134px;
    height: 20px;
    position: absolute;
    left: 7px;
    top: 119px;
    mix-blend-mode: normal;
}
.ai-guide-page .Pixso-paragraph-25_37 {
    font-size: 10px;
    font-weight: 500;
    text-align: left;
    letter-spacing: 0px;
    text-decoration: none;
    color: rgba(64, 63, 61, 1);
    width: 80px;
    height: 14px;
    position: absolute;
    left: 7px;
    top: 145px;
    mix-blend-mode: normal;
}
.ai-guide-page .Pixso-vector-25_38 {
    width: 18px;
    height: 18px;
    background-image: url(../img/AI/customerservicefill2.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 124px;
    top: 142px;
}

/* —— 卡片2：永州李达故居（右上） —— */
.ai-guide-page .Pixso-frame-26_16 {
    width: 148px;
    height: 170px;
    position: absolute;
    left: 173px;
    top: 0px;
    mix-blend-mode: normal;
    cursor: pointer;
}
.ai-guide-page .Pixso-rectangle-26_17 {
    width: 148px;
    height: 170px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 8px 8px 8px 8px;
    background-color: rgba(248, 246, 243, 1);
    mix-blend-mode: normal;
}
.ai-guide-page .Pixso-rectangle-26_18 {
    width: 148px;
    height: 110px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 8px 8px 0px 0px;
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../img/AI/9b66d352998e635ad0a6e34fc9c315ab0867aa51.png);
    mix-blend-mode: normal;
}
.ai-guide-page .Pixso-paragraph-26_19 {
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    letter-spacing: 0px;
    text-decoration: none;
    color: rgba(64, 63, 61, 1);
    width: 134px;
    height: 20px;
    position: absolute;
    left: 7px;
    top: 119px;
    mix-blend-mode: normal;
}
.ai-guide-page .Pixso-paragraph-26_20 {
    font-size: 10px;
    font-weight: 500;
    text-align: left;
    letter-spacing: 0px;
    text-decoration: none;
    color: rgba(64, 63, 61, 1);
    width: 100px;
    height: 14px;
    position: absolute;
    left: 7px;
    top: 145px;
    mix-blend-mode: normal;
}
.ai-guide-page .Pixso-vector-26_21 {
    width: 18px;
    height: 18px;
    background-image: url(../img/AI/customerservicefill1.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 124px;
    top: 142px;
}

/* —— 卡片3：韶山毛泽东故居（左下） —— */
.ai-guide-page .Pixso-frame-26_1 {
    width: 148px;
    height: 170px;
    position: absolute;
    left: 0px;
    top: 190px;
    mix-blend-mode: normal;
    cursor: pointer;
}
.ai-guide-page .Pixso-rectangle-26_2 {
    width: 148px;
    height: 170px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 8px 8px 8px 8px;
    background-color: rgba(248, 246, 243, 1);
    mix-blend-mode: normal;
}
.ai-guide-page .Pixso-rectangle-26_3 {
    width: 148px;
    height: 110px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 8px 8px 0px 0px;
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../img/AI/480a13c56e4edc2fa14a45fe21befed7b46664d1.jpg);
    mix-blend-mode: normal;
}
.ai-guide-page .Pixso-paragraph-26_4 {
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    letter-spacing: 0px;
    text-decoration: none;
    color: rgba(64, 63, 61, 1);
    width: 134px;
    height: 20px;
    position: absolute;
    left: 7px;
    top: 119px;
    mix-blend-mode: normal;
}
.ai-guide-page .Pixso-paragraph-26_5 {
    font-size: 10px;
    font-weight: 500;
    text-align: left;
    letter-spacing: 0px;
    text-decoration: none;
    color: rgba(64, 63, 61, 1);
    width: 80px;
    height: 14px;
    position: absolute;
    left: 7px;
    top: 145px;
    mix-blend-mode: normal;
}
.ai-guide-page .Pixso-vector-26_6 {
    width: 18px;
    height: 18px;
    background-image: url(../img/AI/customerservicefill0.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 124px;
    top: 142px;
}

/* —— 卡片4：长沙许光达故居（右下） —— */
.ai-guide-page .Pixso-frame-26_8 {
    width: 148px;
    height: 170px;
    position: absolute;
    left: 173px;
    top: 190px;
    mix-blend-mode: normal;
    cursor: pointer;
}
.ai-guide-page .Pixso-rectangle-26_9 {
    width: 148px;
    height: 170px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 8px 8px 8px 8px;
    background-color: rgba(248, 246, 243, 1);
    mix-blend-mode: normal;
}
.ai-guide-page .Pixso-rectangle-26_10 {
    width: 148px;
    height: 110px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 8px 8px 0px 0px;
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../img/AI/53b35994666600ea875e04226bb7824544329346.jpg);
    mix-blend-mode: normal;
}
.ai-guide-page .Pixso-paragraph-26_11 {
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    letter-spacing: 0px;
    text-decoration: none;
    color: rgba(64, 63, 61, 1);
    width: 134px;
    height: 20px;
    position: absolute;
    left: 7px;
    top: 119px;
    mix-blend-mode: normal;
}
.ai-guide-page .Pixso-paragraph-26_12 {
    font-size: 10px;
    font-weight: 500;
    text-align: left;
    letter-spacing: 0px;
    text-decoration: none;
    color: rgba(64, 63, 61, 1);
    width: 100px;
    height: 14px;
    position: absolute;
    left: 7px;
    top: 145px;
    mix-blend-mode: normal;
}
.ai-guide-page .Pixso-vector-26_13 {
    width: 18px;
    height: 18px;
    background-image: url(../img/AI/customerservicefill.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 124px;
    top: 142px;
}

/* —— 返回箭头（左上角） —— */
.ai-guide-page .Pixso-vector-26_48 {
    width: 4.72%;
    height: 2.56%;
    background-image: url(../img/AI/Bace3Iconarrowleft.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 4.17%;
    right: 91.11%;
    top: 7.53%;
    bottom: 89.91%;
    cursor: pointer;
    z-index: 10;
    /* 图标自身相对定位位置上移 10px，与主框架 translateY(-18px) 叠加
       视觉位置：原本约 45px → 上移至约 35px（更靠近状态栏中部） */
    transform: translateY(-10px);
}

/* —— 卡片可点击反馈 —— */
.ai-guide-page .Pixso-frame-25_33,
.ai-guide-page .Pixso-frame-26_16,
.ai-guide-page .Pixso-frame-26_1,
.ai-guide-page .Pixso-frame-26_8 {
    cursor: pointer;
    transition: transform 0.15s ease;
}
.ai-guide-page .Pixso-frame-25_33:active,
.ai-guide-page .Pixso-frame-26_16:active,
.ai-guide-page .Pixso-frame-26_1:active,
.ai-guide-page .Pixso-frame-26_8:active {
    transform: scale(0.96);
}

/* ============================================================
 * 视频通话 / 语音通话 卡片外层点击热区（独立覆盖层，不包裹文字）
 * 覆盖背景图上的相机图标 + 标题 + 副标题整块区域
 * 热区本身不显示内容，只捕获点击；下方文字/图标正常显示
 *
 *  背景图尺寸：100% × 664px，两张卡片并排布局
 *  左卡（视频通话）： 图标在卡片顶部，文字在卡片底部 (top 368 ~ 403)
 *                   → 卡片范围约  left:20, top:260, w:155, h:150
 *  右卡（语音通话）：图标+文字镜像
 *                   → 卡片范围约  left:190, top:260, w:155, h:150
 *  z-index: 20 高于返回箭头(z-10)，防止用户点边缘误触返回
 * ============================================================ */
.ai-guide-page .vc-card-hit {
    position: absolute;
    cursor: pointer;
    z-index: 20;                 /* 比返回箭头 z-index:10 更高，防止边缘误触 */
    border-radius: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    background: transparent;      /* 不遮挡下方文字/图标 */
}
.ai-guide-page .vc-card-hit:active {
    transform: scale(0.96);
    /* 按压时给一层极淡的蒙层提示，不遮挡文字 */
    box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.10);
}
/* 视频通话卡：左侧（含背景图中的相机图标的红色卡片整块） */
.ai-guide-page .vc-card-video {
    left: 18px;
    top: 258px;
    width: 160px;
    height: 155px;
}
/* 语音通话卡：右侧（含背景图中的麦克风图标的米色卡片整块） */
.ai-guide-page .vc-card-voice {
    left: 188px;
    top: 258px;
    width: 160px;
    height: 155px;
}

/* 恢复文字可点击穿透提示（热区在上，文字样式保持原样） */
.ai-guide-page .Pixso-paragraph-25_4,
.ai-guide-page .Pixso-paragraph-25_5,
.ai-guide-page .Pixso-paragraph-25_6,
.ai-guide-page .Pixso-paragraph-25_7 {
    cursor: pointer;
}

/* ============================================================
   🔥 v4.82 AI景点介绍弹窗（点击耳机图标后弹出）
   弹窗限制在手机容器（app-container）内部
   ============================================================ */
.ai-spot-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    animation: aiSpotFadeIn 0.25s ease;
}
@keyframes aiSpotFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.ai-spot-modal-content {
    width: 85%;
    max-width: 320px;
    max-height: 70%;
    background: #fff;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    animation: aiSpotSlideUp 0.3s ease;
}
@keyframes aiSpotSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.ai-spot-modal-header {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    background: linear-gradient(135deg, #C8161D 0%, #A01218 100%);
    color: #fff;
    flex-shrink: 0;
}
.ai-spot-modal-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-right: 8px;
    background-image: url(../img/AI/customerservicefill2.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    filter: brightness(0) invert(1);
}
.ai-spot-modal-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-spot-modal-close {
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    margin-left: 8px;
}
.ai-spot-modal-close:active { color: #fff; }

.ai-spot-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.8;
    color: #2c2c2c;
    text-align: justify;
}
.ai-spot-modal-body .ai-spot-text {
    margin: 0;
    text-indent: 2em;
    letter-spacing: 0.3px;
    word-break: break-all;
}
.ai-spot-modal-body::-webkit-scrollbar {
    width: 3px;
}
.ai-spot-modal-body::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}

/* 加载中动画 */
.ai-spot-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    color: #999;
    font-size: 13px;
}
.ai-spot-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #f0f0f0;
    border-top-color: #C8161D;
    border-radius: 50%;
    animation: aiSpotSpin 0.8s linear infinite;
    margin-bottom: 10px;
}
@keyframes aiSpotSpin {
    to { transform: rotate(360deg); }
}

.ai-spot-modal-footer {
    flex-shrink: 0;
    padding: 10px 14px 12px;
    border-top: 1px solid #f0f0f0;
}
.ai-spot-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 38px;
    background: linear-gradient(135deg, #C8161D 0%, #A01218 100%);
    color: #fff;
    border: none;
    border-radius: 19px;
    font-size: 13px;
    cursor: pointer;
    gap: 6px;
}
.ai-spot-play-btn:active {
    opacity: 0.85;
}
.ai-spot-play-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 耳机图标增加点击手势提示 */
.ai-guide-page .spot-ai-btn {
    cursor: pointer;
    z-index: 50;
}

/* ============================================================
   🔥 v4.82 更多精选景点页面（专业UI设计）
   ============================================================ */

/* 页面基础 */
.more-spots-page {
    width: 100%;
    height: 100%;
    background: #f5f5f7;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 状态栏 - 与导航栏同色 */
.more-spots-page .status-bar {
    background: linear-gradient(135deg, #C41E3A 0%, #E8384F 100%);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 101;
}

/* 顶部导航栏（固定高度） */
.more-spots-page .ms-nav-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 52px !important;
    min-height: 52px;
    max-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: linear-gradient(135deg, #C41E3A 0%, #E8384F 100%);
    box-shadow: 0 2px 12px rgba(196, 30, 58, 0.3);
}
.more-spots-page .ms-nav-back {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
}
.more-spots-page .ms-nav-back:active {
    background: rgba(255,255,255,0.2);
}
.more-spots-page .ms-nav-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.more-spots-page .ms-nav-search {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
}
.more-spots-page .ms-nav-search:active {
    background: rgba(255,255,255,0.2);
}

/* 搜索框（绝对定位，不影响标题位置） */
.more-spots-page .ms-search-box {
    position: absolute;
    left: 48px;
    right: 48px;
    top: 8px;
    height: 36px;
    background: rgba(255,255,255,0.2);
    border-radius: 18px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
    z-index: 10;
}
.more-spots-page .ms-search-icon {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    margin-right: 8px;
}
.more-spots-page .ms-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 14px;
}
.more-spots-page .ms-search-input::placeholder {
    color: rgba(255,255,255,0.6);
}
.more-spots-page .ms-search-close {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    cursor: pointer;
    border-radius: 50%;
    margin-left: 8px;
}
.more-spots-page .ms-search-close:active {
    background: rgba(255,255,255,0.2);
}

/* 顶部数据概览区 */
.more-spots-page .ms-hero {
    position: relative;
    height: 160px;
    background: linear-gradient(135deg, #C41E3A 0%, #E8384F 50%, #FF6B6B 100%);
    overflow: hidden;
    margin-bottom: 0;
}
.more-spots-page .ms-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.15) 0%, transparent 50%),
                radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 40%);
}
.more-spots-page .ms-hero-content {
    position: relative;
    z-index: 2;
    padding: 20px 20px 16px;
    color: #fff;
}
.more-spots-page .ms-hero-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 4px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.more-spots-page .ms-hero-sub {
    font-size: 12px;
    opacity: 0.85;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}
.more-spots-page .ms-hero-stats {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 12px 8px;
    border: 1px solid rgba(255,255,255,0.2);
}
.more-spots-page .ms-stat-item {
    text-align: center;
    flex: 1;
}
.more-spots-page .ms-stat-num {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 2px;
}
.more-spots-page .ms-stat-label {
    font-size: 10px;
    opacity: 0.8;
}
.more-spots-page .ms-stat-divider {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.3);
}

/* 装饰元素 */
.more-spots-page .ms-hero-deco {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    background: #fff;
}
.more-spots-page .ms-hero-deco.deco1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}
.more-spots-page .ms-hero-deco.deco2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: 20px;
}
.more-spots-page .ms-hero-deco.deco3 {
    width: 50px;
    height: 50px;
    top: 30px;
    left: 60%;
    opacity: 0.08;
}

/* 分类标签栏（透明背景） */
.more-spots-page .ms-category-wrap {
    width: 100%;
    background: transparent;
    padding: 12px 16px;
    box-sizing: border-box;
}
.more-spots-page .ms-category-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
}
.more-spots-page .ms-category-scroll::-webkit-scrollbar {
    display: none;
}
.more-spots-page .ms-cat-item {
    flex-shrink: 0;
    padding: 6px 16px;
    font-size: 13px;
    color: #666;
    background: transparent;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    font-weight: 500;
    border: 1px solid #ddd;
}
.more-spots-page .ms-cat-item:active {
    transform: scale(0.95);
}
.more-spots-page .ms-cat-item.active {
    background: linear-gradient(135deg, #C41E3A 0%, #E8384F 100%);
    color: #fff;
    font-weight: 600;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(196, 30, 58, 0.25);
}

/* 筛选排序栏 */
.more-spots-page .ms-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    margin-top: 0;
    border-bottom: 1px solid #f0f0f0;
}
.more-spots-page .ms-filter-count {
    font-size: 12px;
    color: #999;
}
.more-spots-page .ms-count-num {
    color: #C41E3A;
    font-weight: 600;
    font-size: 14px;
}
.more-spots-page .ms-filter-sort {
    display: flex;
    gap: 12px;
}
.more-spots-page .ms-sort-item {
    font-size: 12px;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: color 0.2s;
    padding: 4px 0;
}
.more-spots-page .ms-sort-item:active {
    opacity: 0.7;
}
.more-spots-page .ms-sort-item.active {
    color: #C41E3A;
    font-weight: 600;
}
.more-spots-page .ms-sort-item i {
    font-size: 11px;
}

/* 景点卡片容器 */
.more-spots-page .ms-spots-container {
    padding: 12px 16px;
}
.more-spots-page .ms-spots-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* 景点卡片（与AI导览页卡片样式完全一致） */
.more-spots-page .ms-spot-card {
    width: 100%;
    aspect-ratio: 148 / 170;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: rgba(248, 246, 243, 1);
}
.more-spots-page .ms-spot-card:active {
    transform: scale(0.97);
}
.more-spots-page .ms-card-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 8px;
    background-color: rgba(248, 246, 243, 1);
}
.more-spots-page .ms-card-img {
    width: 100%;
    height: 64.7%; /* 110/170 ≈ 64.7% */
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 8px 8px 0px 0px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.more-spots-page .ms-card-title {
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    letter-spacing: 0px;
    text-decoration: none;
    color: rgba(64, 63, 61, 1);
    width: calc(100% - 14px);
    height: 20px;
    position: absolute;
    left: 7px;
    top: 70%; /* 119/170 ≈ 70% */
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.more-spots-page .ms-card-location {
    font-size: 10px;
    font-weight: 500;
    text-align: left;
    letter-spacing: 0px;
    text-decoration: none;
    color: rgba(64, 63, 61, 1);
    width: 80px;
    height: 14px;
    position: absolute;
    left: 7px;
    top: 85.3%; /* 145/170 ≈ 85.3% */
    margin: 0;
}
.more-spots-page .ms-card-ai {
    width: 18px;
    height: 18px;
    background-image: url(../img/AI/customerservicefill2.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    right: 7px; /* 148-124-18 = 6px, 用7px对齐 */
    top: 83.5%; /* 142/170 ≈ 83.5% */
    cursor: pointer;
    z-index: 50;
}

/* 加载更多 */
.more-spots-page .ms-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 0;
    color: #999;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.2s;
}
.more-spots-page .ms-load-more:active {
    color: #C41E3A;
}
.more-spots-page .ms-load-icon {
    font-size: 11px;
    animation: ms-bounce 2s infinite;
}
@keyframes ms-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

/* 底部安全区 */
.more-spots-page .ms-bottom-safe {
    height: 20px;
}

/* 弹窗在更多页面中也生效（覆盖ai-guide-page限定） */
.more-spots-page .ai-spot-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}
.more-spots-page .ai-spot-modal-content {
    width: 85%;
    max-width: 320px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    max-height: 70%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.more-spots-page .ai-spot-modal-header {
    display: flex;
    align-items: center;
    padding: 16px;
    background: linear-gradient(135deg, #C41E3A 0%, #E8384F 100%);
    color: #fff;
    flex-shrink: 0;
}
.more-spots-page .ai-spot-modal-icon {
    width: 24px;
    height: 24px;
    background-image: url(../img/AI/customerservicefill2.svg);
    background-size: 100% 100%;
    margin-right: 10px;
    filter: brightness(0) invert(1);
}
.more-spots-page .ai-spot-modal-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
}
.more-spots-page .ai-spot-modal-close {
    font-size: 24px;
    cursor: pointer;
    opacity: 0.8;
    line-height: 1;
    padding: 0 4px;
}
.more-spots-page .ai-spot-modal-close:active { color: #fff; }
.more-spots-page .ai-spot-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    font-size: 14px;
    line-height: 1.8;
    color: #333;
}
.more-spots-page .ai-spot-modal-body .ai-spot-text {
    margin: 0;
    text-indent: 2em;
    text-align: justify;
}
.more-spots-page .ai-spot-modal-body::-webkit-scrollbar {
    width: 4px;
}
.more-spots-page .ai-spot-modal-body::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}
.more-spots-page .ai-spot-modal-footer {
    padding: 12px 16px 16px;
    flex-shrink: 0;
    border-top: 1px solid #f0f0f0;
}
.more-spots-page .ai-spot-play-btn {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 22px;
    background: linear-gradient(135deg, #C41E3A 0%, #E8384F 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}
.more-spots-page .ai-spot-play-btn:active {
    transform: scale(0.97);
    opacity: 0.9;
}
.more-spots-page .ai-spot-play-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}