:root {
            --ins-pink: #ffb6c1;
            --ins-pink-light: #ffe4e8;
            --ins-gray: #999999;
            --ins-text: #333333;
            --ins-bg: #ffffff;
            --ins-border: rgba(0,0,0,0.05);
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            -webkit-tap-highlight-color: transparent;
            tap-highlight-color: transparent;
            -webkit-text-size-adjust: 100% !important;
            -moz-text-size-adjust: 100% !important;
            text-size-adjust: 100% !important;
        }
        /* 基础设置 */
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            -webkit-text-size-adjust: 100%;
            -moz-text-size-adjust: 100%;
            text-size-adjust: 100%;
            background-color: #000;
        }
        body {
            width: 100%;
            height: 100%;
            min-height: 100vh; /* 🔧 确保 body 背景覆盖整个 viewport（含 iOS safe area） */
            margin: 0;
            padding: 0;
            overflow: hidden;
            -webkit-text-size-adjust: 100%;
            -moz-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }
        /* 通用 SVG 图标样式 */
        .svg-icon {
            width: 24px;
            height: 24px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: all 0.2s ease;
        }
body {
    background: #ffffff;
    touch-action: manipulation;
    transition: background 0.3s ease;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.phone {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 8px;
    margin: 0;
}

/* 🔧 已移除 standalone 模式下的 height:auto!important 覆盖规则
   原因：所有全屏页面已统一使用 top:0;bottom:0 撑满屏幕，无需额外覆盖 height。
   部分安卓浏览器会将显式的 height:auto 误解为"内容高度"，导致底部漏出桌面壁纸。 */
        
        /* #home-page 样式已移除，以便恢复默认文档流和滚动行为 */
        /* 顶部磨砂小组件 */
        .top-widget {
            flex-shrink: 0;
            margin: 60px 24px 30px; /* 增加底部间距 */
            background: rgba(255, 255, 255, 0.92);
            /* backdrop-filter: blur(10px);    ← 性能优化：移除毛玻璃，改用高不透明度背景 */
            /* -webkit-backdrop-filter: blur(10px); */
            border-radius: 2rem;
            padding: 16px;
            display: flex;
            align-items: center;
            z-index: 10;
            position: relative;
        }
        /* 当背景完全透明时，移除毛玻璃效果以透出背景图 */
        /* 注意：如果通过自定义CSS设置透明，需要同时设置 backdrop-filter: none !important; */
        .top-widget[style*="background: transparent"],
        .top-widget[style*="background:transparent"],
        .top-widget[style*="background: none"],
        .top-widget[style*="background:none"],
        .top-widget[style*="background-color: transparent"],
        .top-widget[style*="background-color:transparent"] {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        /* 底栏透明处理 - 当背景完全透明时，移除毛玻璃效果以透出背景图 */
        .dock[style*="background: transparent"],
        .dock[style*="background:transparent"],
        .dock[style*="background: none"],
        .dock[style*="background:none"],
        .dock[style*="background-color: transparent"],
        .dock[style*="background-color:transparent"] {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        .top-widget .icon {
            width: 48px;
            height: 48px;
            background: #FFF7FA;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: transparent;
            background-size: cover;
            background-position: center;
        }
        .top-widget .text {
            flex: 1;
        }
        /* 全局文字灰色 #999999 */
        .top-widget .text .title,
        .top-widget .text .subtext,
        .app-icon .name,
        .circle-photo .name,
        .circle-photo .bubble,
        .days-capsule .capsule,
        .dock-icon .name,
        .custom-item-text,
        .save-btn,
        .back-btn,
        .custom-edit-input,
        .custom-edit-tip {
            color: #999999 !important;
            font-weight: 400;
        }
        .top-widget .text .title {
            font-size: 14px;
            font-style: italic;
        }
        .top-widget .text .subtext {
            font-size: 12px;
            margin-top: 4px;
        }
        /* 多页桌面容器 */
        .desktop-pages-wrapper {
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            width: 100%;
            position: relative;
            z-index: 10;
            touch-action: pan-y pinch-zoom;
            flex: 1;
            min-height: 0;
        }
        .desktop-pages-track {
            display: flex;
            will-change: transform;
            transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .desktop-pages-track.dragging {
            transition: none;
        }
        .desktop-page {
            min-width: 100%;
            width: 100%;
            flex-shrink: 0;
        }
        /* 页面指示点 */
        .page-dots {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            padding: 8px 0;
            z-index: 15;
            position: relative;
            flex-shrink: 0;
        }
        .page-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: rgba(180, 180, 180, 0.4);
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .page-dot.active {
            background: rgba(150, 150, 150, 0.8);
            transform: scale(1.2);
        }
        /* 应用容器 */
        .app-container {
            margin: 50px 24px 0; /* 增加上方间距，整体下移 */
            padding-bottom: 20px;
            z-index: 10;
            position: relative;
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px 8px; /* 恢复紧凑间距 */
            min-width: 0; /* 防止 grid 溢出 */
        }
/* 拍立得组件 */
.photo-widget {
    grid-column: span 2;
    grid-row: span 2;
    height: 176px;
    position: relative;
    cursor: move; /* 添加拖拽手势 */
}
/* 情侣组件 (头像+倒数日) */
.couple-widget {
    grid-column: span 2;
    grid-row: span 2;
    height: 176px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: move; /* 添加拖拽手势 */
}
.couple-widget .avatars-row {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
}
        .photo-item {
            width: 85px;
            height: 105px;
            background: #ffffff;
            border: 1px solid #f5f5f5;
            border-radius: 4px;
            padding: 8px;
            position: absolute;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .photo-item.right {
            top: 20px;
            right: 0;
            transform: rotate(5deg);
        }
        .photo-item.left {
            top: 50px;
            left: 0;
            transform: rotate(-3deg);
        }
        .photo-item .tape {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 35px;
            height: 14px;
            background: #FFF7FA;
            border-radius: 2px;
            z-index: 2;
        }
        .photo-item .img-box {
            width: 100%;
            height: 75px;
            border-radius: 2px;
            overflow: hidden;
            background: #FFF7FA;
            display: flex;
            align-items: center;
            justify-content: center;
            background-size: cover;
            background-position: center;
        }
        /* 应用图标 - 可自定义图片 */
        .app-icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            min-width: 0; /* 防止 grid 列溢出 */
            max-width: 100%; /* 限制最大宽度 */
        }
        .app-icon .icon {
            width: 56px;
            height: 56px;
            background: #FFF7FA;
            border-radius: 1.2rem;
            border: none;
            box-shadow: none;
            background-size: cover;
            background-position: center;
            flex-shrink: 0; /* 图标不收缩 */
        }
        .app-icon .name {
            font-size: 10px;
            text-align: center;
            width: 100%; /* 占满容器宽度 */
            overflow: hidden; /* 隐藏溢出 */
            text-overflow: ellipsis; /* 显示省略号 */
            white-space: nowrap; /* 不换行 */
            max-width: 100%; /* 限制最大宽度 */
        }
        /* 头像样式 */
        .circle-photo {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            position: relative;
            margin-top: 8px;
            min-width: 0; /* 防止 grid 列溢出 */
            max-width: 100%; /* 限制最大宽度 */
        }
        .circle-photo .bubble {
            position: absolute;
            top: -10px;
            z-index: 10;
            background: var(--bubble-bg, #FFF7FA);
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 8px;
        }
        .circle-photo .img {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: #ffffff;
            border: 1px solid #f0f0f0;
            position: relative;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            flex-shrink: 0; /* 头像不收缩 */
        }
        .circle-photo .img.has-image::before,
        .circle-photo .img.has-image::after {
            display: none;
        }
        .circle-photo .name {
            width: 100%; /* 占满容器宽度 */
            overflow: hidden; /* 隐藏溢出 */
            text-overflow: ellipsis; /* 显示省略号 */
            white-space: nowrap; /* 不换行 */
            max-width: 100%; /* 限制最大宽度 */
        }
/* 倒数日胶囊 */
.days-capsule {
    grid-column: span 2;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4px;
}
.couple-widget .days-capsule {
    grid-column: auto;
    margin-top: 0;
    width: 100%;
}
        .days-capsule .capsule {
            background: var(--capsule-bg, #FFF7FA);
            font-size: 12px;
            padding: 4px 12px;
            border-radius: 1rem;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        /* 底部磨砂Dock栏 */
        .dock {
            width: calc(100% - 32px);
            height: 90px;
            background: rgba(255, 255, 255, 0.92);
            border-radius: 2.5rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 20;
            flex-shrink: 0;
            /* 🔧 底部间距：浏览器模式默认 0，PWA 独立模式下用 env() 避开 Home Indicator */
            margin: 0 auto 0;
            align-self: center;
            overflow: hidden;
        }
        body.standalone-mode .dock {
            margin-bottom: env(safe-area-inset-bottom, 0px);
        }
        .dock-icon .icon {
            width: 56px;
            height: 56px;
            background: #FFF7FA;
            border-radius: 1.2rem;
            border: none;
            box-shadow: none;
            background-size: cover;
            background-position: center;
        }
        .dock-icon .name {
            font-size: 10px;
            text-align: center;
        }
        /* 隐藏所有上传input */
        .photo-input, .avatar-input, .custom-input {
            display: none;
        }

        /* 拖拽相关样式 */
        .sortable-ghost {
            opacity: 0.3;
            transform: scale(0.95);
            filter: grayscale(0.2);
            transition: all 0.2s ease;
        }
        .sortable-drag {
            cursor: grabbing;
            opacity: 1;
            transform: scale(1.1); /* 放大更多，强调浮起感 */
            z-index: 100;
            /* 强烈的阴影，营造悬浮感 */
            box-shadow: 0 15px 30px rgba(0,0,0,0.25);
            /* 确保背景不透明，否则阴影效果不好 */
            background: transparent;
            transition: none !important; /* 关键：跟随鼠标不能有延迟 */
        }
        /* iOS 风格抖动动画 */
        @keyframes jiggle {
            0% { transform: rotate(-1.5deg); }
            50% { transform: rotate(1.5deg); }
            100% { transform: rotate(-1.5deg); }
        }
        /* 拖拽模式下，所有未被拖拽的图标进行抖动 */
        body.dragging-mode .grid > div:not(.sortable-drag) {
            animation: jiggle 0.25s infinite linear;
            will-change: transform; /* 性能优化：提升到合成层，让 GPU 处理动画避免 CPU repaint */
            cursor: move;
        }
        /* 防止长按选中文字/图片，优化拖拽体验 */
        .grid > div, .dock > div {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            touch-action: none; /* 交给 SortableJS 处理触摸 */
            transition: transform 0.2s; /* 平滑变换 */
        }
        
        .grid > div {
            touch-action: pan-y; /* 允许垂直滚动 */
        }

        /* 个性化设置 - 纯折叠展开式 核心样式 */
        .custom-page {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            background: #ffffff;
            display: none;
            flex-direction: column;
            z-index: 100;
        }
        .custom-page-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-end; /* 内容靠下 */
            padding: 50px 24px 16px; /* 加高顶栏 */
            background: #fff;
            z-index: 99;
        }
        /* 个性化设置页面 - 独立滚动容器（block布局确保手机滚动兼容） */
        .custom-page-body {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
            overscroll-behavior: contain; /* 防止滚动穿透 */
            padding: 100px 24px 40px;
        }
        body.standalone-mode .custom-page-body {
            padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
        }
        .custom-page-title {
            font-size: 20px;
            color: #666;
            font-weight: 500;
            text-align: center;
            flex: 1;
            margin-left: -40px;
        }
        .back-btn {
            width: 36px;
            height: 36px;
            background: #FFF7FA;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px;
            z-index: 100;
        }
        .save-btn {
            padding: 6px 14px;
            background: #FFF7FA;
            border-radius: 1rem;
            cursor: pointer;
            font-size: 14px;
            z-index: 100;
        }
        /* 折叠项样式 */
        .custom-item {
            background: #f9f9f9;
            border-radius: 1.2rem;
            padding: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            margin-top: 8px;
        }
        .custom-item-arrow {
            color: #999;
            font-size: 16px;
            transition: transform 0.3s ease;
        }
        .custom-item-arrow.active {
            transform: rotate(180deg);
        }
        /* 展开区域样式 - 隐藏默认，点击展开 */
        .custom-expand {
            background: #fdfdfd;
            border-radius: 0 0 1.2rem 1.2rem;
            padding: 16px;
            display: none;
            flex-direction: column;
            gap: 12px;
            margin-top: -8px;
            border-top: 1px solid #f5f5f5;
        }
        /* 桌面设置合并栏 - 子分区标题 */
        .custom-sub-title {
            font-size: 13px;
            font-weight: 600;
            color: #666;
            padding: 10px 0 4px;
            margin-top: 8px;
            border-top: 1px solid #eee;
        }
        .custom-sub-title:first-child {
            margin-top: 0;
            border-top: none;
            padding-top: 0;
        }

        /* ===== 图片选择弹窗 ===== */
        .image-picker-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.45);
            z-index: 10000;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .image-picker-card {
            background: #fff;
            border-radius: 16px 16px 0 0;
            width: 100%;
            max-width: 420px;
            padding: 20px 16px 24px;
            display: flex;
            flex-direction: column;
            gap: 0;
            animation: pickerSlideUp 0.25s ease;
            flex-shrink: 0;
            margin-top: auto;
        }
        body.standalone-mode .image-picker-card {
            padding-bottom: calc(env(safe-area-inset-bottom, 12px) + 12px);
        }
        @keyframes pickerSlideUp {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }
        /* 线下模式加载动画 */
        @keyframes offlineDotPulse {
            0%, 80%, 100% { transform: scale(0.4); opacity: 0.3; }
            40% { transform: scale(1); opacity: 1; }
        }

        /* ==================== 线下模式气泡样式 ==================== */
        .offline-msg-timestamp {
            text-align: center;
            padding: 8px 0;
            color: #999;
            font-size: 12px;
            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        }
        .offline-msg-row {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 12px;
            padding: 0 16px;
        }
        .offline-msg-row.offline-self {
            flex-direction: row-reverse;
        }
        .offline-msg-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            flex-shrink: 0;
            background-size: cover;
            background-position: center;
        }
        .offline-msg-bubble {
            max-width: 70%;
            padding: 10px 14px;
            border-radius: 6px;
            font-size: 14px;
            line-height: 1.8;
            word-wrap: break-word;
            white-space: pre-wrap;
            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
            color: #333;
            -webkit-user-select: none;
            user-select: none;
            background: #fff;
            border: 1px solid #e0e0e0;
            position: relative;
        }
        .offline-msg-bubble.offline-bubble-other {
            border-bottom-left-radius: 2px;
        }
        .offline-msg-bubble.offline-bubble-self {
            border-bottom-right-radius: 2px;
        }
        .image-picker-title {
            font-size: 15px;
            font-weight: 600;
            color: #333;
            text-align: center;
            padding-bottom: 14px;
            border-bottom: 1px solid #f0f0f0;
        }
        .image-picker-option {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 15px 8px;
            cursor: pointer;
            border-bottom: 1px solid #f5f5f5;
            transition: background 0.15s;
        }
        .image-picker-option:hover {
            background: #f9f9f9;
        }
        .image-picker-option span:last-child {
            font-size: 15px;
            color: #333;
        }
        .image-picker-url-area {
            display: none;
            flex-direction: column;
            gap: 10px;
            padding: 12px 4px;
        }
        .image-picker-url-input {
            width: 100%;
            padding: 10px 12px;
            border: 1.5px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            outline: none;
            box-sizing: border-box;
            transition: border-color 0.2s;
        }
        .image-picker-url-input:focus {
            border-color: var(--ins-pink);
        }
        .image-picker-preview-box {
            width: 100%;
            height: 160px;
            border-radius: 10px;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            color: #bbb;
            background-size: cover;
            background-position: center;
            overflow: hidden;
        }
        .image-picker-confirm {
            padding: 10px;
            background: var(--ins-pink);
            color: #fff;
            border-radius: 8px;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }
        .image-picker-cancel {
            margin-top: 8px;
            padding: 12px;
            text-align: center;
            font-size: 15px;
            color: #999;
            cursor: pointer;
            border-top: 1px solid #f0f0f0;
        }

        /* 预览&编辑通用样式 */
        .wallpaper-preview {
            width: 100%;
            height: 180px;
            background: #f9f9f9;
            border-radius: 1rem;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
        }
        .custom-preview-box {
            width: 100%;
            border-radius: 1rem;
            background: #f9f9f9;
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .custom-preview-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #fff;
            border: 1px solid #f0f0f0;
            background-size: cover;
            background-position: center;
        }
        .custom-preview-photo {
            width: 60px;
            height: 60px;
            border-radius: 4px;
            background: #FFF7FA;
            background-size: cover;
            background-position: center;
        }
        .custom-preview-widget {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: #FFF7FA;
            background-size: cover;
            background-position: center;
        }
        .custom-edit-input {
            width: 100%;
            padding: 12px 14px;
            border: none;
            background: #f9f9f9;
            border-radius: 1rem;
            font-size: 14px;
            outline: none;
        }
        .custom-edit-tip {
            font-size: 12px;
            color: #999;
        }
        /* 字体预览样式 */
        .font-preview-box {
            width: 100%;
            padding: 20px;
            background: linear-gradient(135deg, #f9f9f9 0%, #fff 100%);
            border-radius: 1rem;
            text-align: center;
            border: 1px dashed #e0e0e0;
        }
        .font-preview-text {
            font-size: 18px;
            color: #333;
            line-height: 1.6;
        }
        .icon-select-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-top: 5px;
        }
        .icon-select-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            cursor: pointer;
        }
        .icon-select-item .icon {
            width: 50px;
            height: 50px;
            background: #FFF7FA;
            border-radius: 1rem;
            background-size: cover;
            background-position: center;
        }
        .icon-select-item .name {
            font-size: 10px;
            color: #999;
        }
        /* 保存提示 */
        .save-tip {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.3);
            color: #fff;
            padding: 8px 16px;
            border-radius: 0.5rem;
            font-size: 14px;
            display: none;
            z-index: 999;
        }

        /* --- 新增：通知系统相关样式 --- */
        /* 通知红点 */
        .notification-badge {
            position: absolute;
            top: -2px;
            right: -2px;
            width: 10px;
            height: 10px;
            background: #ff4d4f;
            border-radius: 50%;
            border: 2px solid #fff;
            display: none; /* 默认隐藏 */
            z-index: 20;
        }

        /* 设置页面 (系统设置) - iOS Inset Grouped 风格 */
        .setting-page {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            background: #f2f2f7; /* iOS 设置背景色 */
            z-index: 100;
            display: none;
            flex-direction: column;
            animation: slideUp 0.3s ease;
        }
        @keyframes slideUp {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .setting-header {
            background: rgba(242, 242, 247, 0.98); /* 性能优化：去掉blur，用更高不透明度替代 */
            padding: 50px 24px 12px; /* 加高顶栏 */
            display: flex;
            align-items: flex-end;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .setting-title {
            flex: 1;
            text-align: center;
            font-size: 17px;
            font-weight: 600;
            color: #000;
            margin-left: -50px; /* 补偿返回按钮宽度 */
        }
        .setting-content {
            flex: 1;
            overflow-y: auto;
            padding: 20px 16px;
        }
        .setting-group-title {
            font-size: 13px;
            color: #6d6d72;
            margin: 0 0 6px 16px;
            text-transform: uppercase;
        }
        .setting-group {
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 24px;
        }
        .setting-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            margin-left: 16px; /* 分割线不通栏 */
            border-bottom: 0.5px solid #c6c6c8;
            min-height: 48px;
            cursor: pointer;
        }
        .setting-item:last-child {
            border-bottom: none;
        }
        .setting-item:active {
            background: #e5e5e5;
        }
        .setting-item-text {
            font-size: 17px;
            color: #000;
            flex: 1;
        }
        .setting-item-desc {
            font-size: 17px;
            color: #8e8e93;
            margin-right: 8px;
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .setting-arrow {
            color: #c7c7cc;
            font-size: 18px;
            font-weight: 600;
        }
        
        /* 折叠式 API 设置面板 */
        .api-setting-card {
            background: #fff;
            border-radius: 12px;
            margin-bottom: 24px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        .api-header {
            padding: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            background: #fff;
        }
        .api-title {
            font-size: 17px;
            font-weight: 600;
            color: #000;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .api-arrow {
            font-size: 14px;
            color: #c7c7cc;
            transition: transform 0.3s ease;
        }
        .api-arrow.expanded {
            transform: rotate(180deg);
        }
        .api-body {
            display: none; /* 默认折叠 */
            padding: 0 16px 24px;
            animation: fadeIn 0.3s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* API 表单样式 */
        .api-label {
            font-size: 14px;
            color: #8e8e93;
            margin: 16px 0 8px;
            font-weight: 500;
        }
        .api-input-group {
            position: relative;
            background: #f2f2f7;
            border-radius: 10px;
            display: flex;
            align-items: center;
            padding: 4px 12px;
        }
        .api-input {
            width: 100%;
            padding: 10px 0;
            border: none;
            background: transparent;
            font-size: 16px;
            color: #000;
            outline: none;
        }
        .api-input::placeholder {
            color: #c7c7cc;
        }
        .eye-icon {
            color: #007aff;
            font-size: 14px;
            padding: 8px;
            cursor: pointer;
            user-select: none;
        }
        
        /* 模型选择行 */
        .model-row {
            display: flex;
            gap: 10px;
        }
        .model-select-wrapper {
            flex: 1;
            background: #f2f2f7;
            border-radius: 10px;
            position: relative;
            display: flex;
            align-items: center;
        }
        .model-select {
            width: 100%;
            padding: 10px 12px;
            border: none;
            background: transparent;
            font-size: 16px;
            color: #000;
            outline: none;
            appearance: none;
        }
        .fetch-btn {
            background: #e5e5ea; /* 浅灰按钮 */
            color: #000;
            border: none;
            border-radius: 10px;
            padding: 0 16px;
            font-size: 15px;
            cursor: pointer;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .fetch-btn:active {
            background: #d1d1d6;
        }
        
        /* 测试连接按钮 */
        .test-btn {
            width: 100%;
            background: #FFF7FA; /* 呼应主题的淡粉色背景 */
            color: #ff2d55;
            font-weight: 600;
            padding: 14px;
            border-radius: 12px;
            border: none;
            margin-top: 24px;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .test-btn:active {
            opacity: 0.8;
        }

        /* 温度滑块 */
        .temp-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }
        .temp-val {
            color: #007aff;
            font-weight: 600;
        }
        .slider-container {
            margin-top: 10px;
            position: relative;
        }
        .temp-slider {
            -webkit-appearance: none;
            width: 100%;
            height: 4px;
            background: #e5e5e5;
            border-radius: 2px;
            outline: none;
        }
        .temp-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 24px;
            height: 24px;
            background: #ffffff;
            border: 0.5px solid rgba(0,0,0,0.04);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
            border-radius: 50%;
            cursor: pointer;
        }
        .temp-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
            font-size: 12px;
            color: #999;
        }
        
        .loading-spinner {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid #007aff;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 1s linear infinite;
            display: none;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        /* iOS 风格开关 */
        .ios-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 30px;
        }
        .ios-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #e5e5e5;
            transition: .4s;
            border-radius: 34px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        input:checked + .slider {
            background-color: var(--ins-pink);
        }
        input:checked + .slider:before {
            transform: translateX(20px);
        }

        /* 通知中心弹窗 */
        .notification-center {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 200;
            display: none;
            backdrop-filter: blur(5px);
        }
        .notification-box {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 80%;
            background: #fff;
            border-radius: 20px 20px 0 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            animation: slideUpBox 0.3s ease;
        }
        @keyframes slideUpBox {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }
        .notif-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        .notif-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }
        .close-notif {
            font-size: 24px;
            color: #999;
            cursor: pointer;
            padding: 5px;
        }
        .notif-list {
            flex: 1;
            overflow-y: auto;
            padding-bottom: 20px;
        }
        .notif-item {
            padding: 16px;
            background: #f9f9f9;
            border-radius: 12px;
            margin-bottom: 10px;
            position: relative;
            transition: background 0.2s;
            cursor: pointer;
        }
        .notif-item.unread {
            background: #FFF7FA;
            border: 1px solid #ffdde8;
        }
        .notif-item.unread::after {
            content: '';
            position: absolute;
            top: 16px;
            right: 16px;
            width: 8px;
            height: 8px;
            background: #ff4d4f;
            border-radius: 50%;
        }
        .notif-time {
            font-size: 11px;
            color: #999;
            margin-bottom: 6px;
        }
        .notif-content-title {
            font-size: 15px;
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
        }
        .notif-desc {
            font-size: 13px;
            color: #666;
            line-height: 1.5;
        }
        .empty-tip {
            text-align: center;
            color: #999;
            margin-top: 60px;
            font-size: 14px;
        }

        /* Debug Toast */
        .debug-toast {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            font-size: 13px;
            z-index: 9999;
            max-width: 80%;
            word-wrap: break-word;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }
        .debug-toast.show {
            opacity: 1;
        }

        /* API 错误提示弹窗 */
        .api-error-toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            background: rgba(0, 0, 0, 0.85);
            color: white;
            padding: 16px 24px;
            border-radius: 12px;
            font-size: 14px;
            z-index: 10000;
            max-width: 85%;
            word-wrap: break-word;
            opacity: 0;
            transition: all 0.3s ease;
            pointer-events: none;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        }
        .api-error-toast.show {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
            pointer-events: auto;
        }
        .api-error-toast .error-icon {
            font-size: 32px;
            margin-bottom: 10px;
        }
        .api-error-toast .error-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #ff6b6b;
        }
        .api-error-toast .error-msg {
            font-size: 13px;
            color: #ddd;
            line-height: 1.5;
            max-height: 150px;
            overflow-y: auto;
        }

        /* 微信页面样式 */
.wechat-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #ffffff; /* 纯白背景 */
            z-index: 150;
            display: none;
            flex-direction: column;
            animation: appLaunch 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        /* 🔧 iOS修复：聊天窗口打开时，只隐藏wechat-page的子元素内容，
           保留容器本身的白色背景作为安全底层，防止iOS Safari在地址栏
           收起/展开、页面过渡动画等场景中露出系统桌面 */
        .wechat-page.content-hidden > * {
            visibility: hidden;
        }
        @keyframes appLaunch {
            from { transform: scale(0.8); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        .wechat-header {
            height: 88px; /* 包含状态栏高度 */
            background: rgba(255,255,255,0.98); /* 性能优化：去掉blur，用更高不透明度替代 */
            padding-top: 44px; /* 避让状态栏 */
            padding-bottom: 10px;
            padding-left: 16px;
            padding-right: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--ins-border);
            flex-shrink: 0;
            z-index: 10;
        }
        .wechat-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--ins-text);
            letter-spacing: 0.5px;
        }
        .wechat-add {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            color: var(--ins-text);
            cursor: pointer;
            position: relative; /* 为下拉菜单定位 */
        }
        /* 微信下拉菜单 */
        .wechat-menu {
            position: absolute;
            top: 50px;
            right: 10px;
            background: #4c4c4c;
            border-radius: 8px;
            padding: 0;
            display: none;
            flex-direction: column;
            z-index: 200;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            width: 140px;
        }
        .wechat-menu-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            color: #fff;
            font-size: 16px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            cursor: pointer;
        }
        .wechat-menu-item:last-child {
            border-bottom: none;
        }
        .wechat-menu-item:active {
            background: #5c5c5c;
            border-radius: 8px;
        }
        .wechat-menu-icon {
            font-size: 18px;
        }
        
        /* 搜索好友弹窗 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.4);
            z-index: 300;
            display: none;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }
        .modal-box {
            background: #fff;
            width: 80%;
            max-width: calc(100vw - 32px); /* 🔧 安卓大字体兜底：弹窗不超出屏幕 */
            border-radius: 12px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        @keyframes popIn {
            from { transform: scale(0.9); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        .modal-title {
            font-size: 18px;
            font-weight: 600;
            text-align: center;
            color: #333;
        }
        .modal-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            background: #f9f9f9;
            outline: none;
            box-sizing: border-box;
        }
        .modal-input:focus {
            border-color: var(--ins-pink);
            box-shadow: 0 0 0 2px rgba(255, 107, 157, 0.15);
        }
        textarea.modal-input {
            min-height: 120px;
            max-height: 50vh;
            resize: vertical;
            font-family: inherit;
            line-height: 1.6;
        }
        .modal-btns {
            display: flex;
            gap: 10px;
        }
        .modal-btn {
            flex: 1;
            padding: 10px;
            border-radius: 8px;
            border: none;
            font-size: 16px;
            cursor: pointer;
        }
        .btn-cancel { background: #f2f2f7; color: #000; }
        .btn-confirm { background: var(--ins-pink); color: #fff; }

        /* 心声弹窗专用样式 */
        .thoughts-modal-box {
            width: 85%;
            max-width: 340px;
            max-height: 80%;
            display: flex;
            flex-direction: column;
        }
        .thoughts-header {
            display: flex;
            align-items: center;
            padding: 14px 16px;
            border-bottom: 1px solid #f0f0f0;
        }
        .thoughts-close {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: #999;
            cursor: pointer;
        }
        .thoughts-title {
            flex: 1;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        .thoughts-actions {
            display: flex;
            gap: 12px;
        }
        .thoughts-action-btn {
            font-size: 13px;
            color: #666;
            cursor: pointer;
        }
        .thoughts-action-btn:active {
            opacity: 0.6;
        }
        .thoughts-current {
            padding: 20px 16px;
            background: #fff;
        }
        .thoughts-current-text {
            font-size: 15px;
            line-height: 1.7;
            color: #333;
            margin-bottom: 10px;
        }
        .thoughts-current-time {
            font-size: 12px;
            color: #999;
        }
        .thoughts-history-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 12px;
            border-top: 1px solid #f0f0f0;
            cursor: pointer;
            font-size: 13px;
            color: #666;
        }
        .thoughts-history-btn:active {
            background: #f5f5f5;
        }
        .thoughts-arrow {
            width: 16px;
            height: 16px;
            stroke: #999;
            fill: none;
            stroke-width: 2;
            transition: transform 0.2s;
        }
        .thoughts-arrow.expanded {
            transform: rotate(180deg);
        }
        .thoughts-history {
            flex: 1;
            overflow-y: auto;
            padding: 0 16px 16px;
            max-height: 200px;
        }
        .thoughts-history-item {
            padding: 12px;
            margin-bottom: 8px;
            background: #fff;
            border-radius: 8px;
            border: 1px solid #eee;
        }
        .thoughts-history-item:last-child {
            margin-bottom: 0;
        }
        .thoughts-history-text {
            font-size: 14px;
            line-height: 1.5;
            color: #333;
            margin-bottom: 6px;
        }
        .thoughts-history-time {
            font-size: 11px;
            color: #999;
        }

        /* 搜索结果卡片 */
        .search-result-card {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px;
            background: #f9f9f9;
            border-radius: 8px;
            display: none; /* 默认隐藏 */
        }
        .result-avatar {
            width: 50px;
            height: 50px;
            border-radius: 6px;
            background-size: cover;
            background-position: center;
            background-color: #ddd;
        }

        /* 表情包管理相关样式 - INS 简约风 */
        #sticker-page {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100vw;
            padding: 0;
            overflow: hidden;
            display: none;
            flex-direction: column;
            background: #fff;
            z-index: 200;
        }
        #sticker-page[style*="flex"] {
            display: flex !important;
        }
        #sticker-list-view,
        #sticker-detail-view {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        #sticker-list-view .custom-page-header,
        #sticker-detail-view .custom-page-header {
            flex-shrink: 0;
        }
        /* 分类列表项样式 */
        .sticker-category-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px;
            background: #fff;
            border-radius: 12px;
            margin-bottom: 12px;
            border: 1px solid #f0f0f0;
            cursor: pointer;
            transition: all 0.2s;
        }
        .sticker-category-item:active {
            background: #f9f9f9;
            transform: scale(0.98);
        }
        .sticker-category-action {
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .sticker-category-action:active {
            opacity: 0.7;
        }
        #sticker-page .custom-page-header {
            position: relative;
            top: 0;
            padding-top: 50px;
            padding-bottom: 10px;
            background: #fff;
            flex-shrink: 0;
            z-index: 10;
        }
        .sticker-nav-bar {
            display: flex;
            overflow-x: auto;
            background: #fff;
            padding: 10px 16px;
            border-bottom: 1px solid #f5f5f5;
            flex-shrink: 0;
            gap: 10px;
            scrollbar-width: none;
        }
        .sticker-nav-bar::-webkit-scrollbar {
            display: none;
        }
        #avatar-tabs-container::-webkit-scrollbar {
            display: none;
        }
        #avatar-subtags-container::-webkit-scrollbar {
            display: none;
        }
        .sticker-nav-item {
            padding: 6px 14px;
            font-size: 14px;
            color: #999;
            background: #f9f9f9;
            border-radius: 16px;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.2s;
        }
        .sticker-nav-item.active {
            color: #333;
            background: #f0f0f0;
            font-weight: 600;
        }
        .sticker-content {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            background: #fff;
            padding: 0;
            -webkit-overflow-scrolling: touch;
            min-height: 0; /* 重要：让flex子元素可以滚动 */
        }
        .sticker-content-container {
            padding: 16px;
        }
        .sticker-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .sticker-category-title {
            font-size: 20px;
            font-weight: 600;
            color: #333;
        }
        .sticker-actions {
            display: flex;
            gap: 8px;
        }
        .sticker-action-btn {
            font-size: 12px;
            padding: 6px 12px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-weight: 500;
            transition: opacity 0.2s;
        }
        .btn-export {
            color: var(--ins-pink);
            background: var(--ins-pink-light);
        }
        .btn-delete-cat {
            color: #ff3b30;
            background: #ffe5e5;
        }
        .sticker-grid-view {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        .sticker-grid-item {
            aspect-ratio: 1;
            background: #f9f9f9;
            border-radius: 12px;
            position: relative;
            cursor: pointer;
            overflow: hidden;
            border: 1px solid #f5f5f5;
        }
        .sticker-grid-item.add-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed #ddd;
            color: #ccc;
            cursor: pointer;
        }
        .sticker-img {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            object-fit: cover;
            border-radius: 8px;
        }
        .sticker-desc-tag {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0,0,0,0.4);
            color: #fff;
            font-size: 9px;
            padding: 2px 0;
            text-align: center;
            backdrop-filter: blur(2px);
        }
        .sticker-del-btn {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 20px;
            height: 20px;
            background: rgba(255,255,255,0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ff3b30;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
            backdrop-filter: blur(2px);
        }
        .sticker-empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 300px;
            padding-bottom: 50px;
            color: #999;
        }
        .sticker-empty-text {
            margin-top: 16px;
            font-size: 14px;
        }
        .sticker-empty-btn {
            margin-top: 20px;
            padding: 10px 24px;
            background: var(--ins-pink);
            color: #fff;
            border: none;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }
        .sticker-import-btn {
            margin-top: 10px;
            padding: 8px 20px;
            background: #f2f2f7;
            color: #666;
            border: none;
            border-radius: 20px;
            font-size: 13px;
            cursor: pointer;
        }

        /* 弹窗样式 */
        .sticker-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }
        .sticker-modal-box {
            background: #fff;
            width: 85%;
            max-width: 320px;
            border-radius: 20px;
            padding: 24px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.15);
            animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .sticker-modal-title {
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
        }
        .sticker-form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .sticker-label {
            font-size: 13px;
            color: #666;
            font-weight: 500;
        }
        .sticker-input {
            width: 100%;
            padding: 12px;
            border-radius: 10px;
            background: #f5f5f5;
            border: none;
            font-size: 15px;
            outline: none;
            color: #333;
        }
        .sticker-file-row {
            display: flex;
            gap: 10px;
        }
        .sticker-upload-btn {
            flex: 1;
            padding: 12px;
            background: #f5f5f5;
            border-radius: 10px;
            color: #333;
            font-size: 14px;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sticker-preview-box {
            margin-top: 10px;
            height: 120px;
            background: #f9f9f9;
            border-radius: 10px;
            display: none;
            align-items: center;
            justify-content: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            border: 1px solid #f0f0f0;
        }
        .sticker-btn-row {
            display: flex;
            gap: 12px;
            margin-top: 8px;
        }
        .sticker-modal-btn {
            flex: 1;
            padding: 12px;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 600;
            border: none;
            cursor: pointer;
        }
        .btn-secondary { background: #f2f2f7; color: #666; }
        .btn-primary { background: var(--ins-pink); color: #fff; }

        /* 总结页面 z-index 需高于聊天详情页(210) */
        #chat-summaries-page.wechat-page {
            z-index: 220;
        }
        #summary-detail-page.wechat-page {
            z-index: 230;
        }

        /* ===== 查手机页面样式（白色INS风） ===== */
        .findphone-account-card {
            background: #fff;
            border-radius: 14px;
            padding: 14px 16px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .findphone-account-card:active {
            transform: scale(0.98);
            background: #f9f9f9;
        }
        .findphone-account-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            background-color: #f0f0f0;
            flex-shrink: 0;
        }
        .findphone-account-info {
            flex: 1;
            min-width: 0;
        }
        .findphone-account-name {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 3px;
        }
        .findphone-account-sub {
            font-size: 12px;
            color: #bbb;
        }
        .findphone-account-arrow {
            color: #ccc;
            font-size: 18px;
            flex-shrink: 0;
        }
        .findphone-friends-row {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-top: 4px;
        }
        .findphone-friend-dot {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            background-color: #eee;
            border: 2px solid #fff;
        }
        .findphone-friend-dot:not(:first-child) {
            margin-left: -8px;
        }
        .findphone-friends-count {
            font-size: 11px;
            color: #bbb;
            margin-left: 4px;
        }

        /* ===== 查手机 - 仿真手机桌面 ===== */
        .findphone-desktop-page {
            background: #f2f2f7;
        }
        .findphone-wp {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: 0;
            background: linear-gradient(160deg, #fdf6f0 0%, #fce4ec 40%, #e8daef 70%, #d5daf5 100%);
        }
        .findphone-statusbar {
            position: relative; z-index: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 24px 0;
            color: #333;
        }
        .findphone-statusbar-time {
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }
        .findphone-statusbar-icons {
            display: flex;
            gap: 6px;
            color: #666;
        }
        .findphone-datetime {
            position: relative; z-index: 1;
            text-align: center;
            padding: 40px 0 0;
        }
        .findphone-lock-time {
            font-size: 64px;
            font-weight: 200;
            color: #333;
            letter-spacing: 2px;
            line-height: 1;
        }
        .findphone-lock-date {
            font-size: 16px;
            color: #888;
            margin-top: 6px;
            font-weight: 400;
        }
        .findphone-app-area {
            position: relative; z-index: 1;
            flex: 1;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 20px;
            padding: 50px 30px 0;
            flex-wrap: wrap;
        }
        .findphone-app-icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            transition: transform 0.15s;
            -webkit-tap-highlight-color: transparent;
        }
        .findphone-app-icon:active {
            transform: scale(0.88);
        }
        .findphone-icon-img {
            width: 58px;
            height: 58px;
            border-radius: 14px;
            background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .findphone-app-label {
            margin-top: 6px;
            font-size: 11px;
            color: #555;
            font-weight: 500;
        }
        .findphone-bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0 0 20px;
            gap: 6px;
            pointer-events: none;
        }
        .findphone-owner-label {
            font-size: 12px;
            color: #aaa;
            letter-spacing: 0.5px;
        }
        .findphone-home-bar {
            width: 134px;
            height: 5px;
            background: rgba(0,0,0,0.3);
            border-radius: 3px;
            cursor: pointer;
            transition: background 0.2s;
            pointer-events: auto;
        }
        .findphone-home-bar:active {
            background: rgba(0,0,0,0.5);
        }
        
        /* ===== 查手机 - 百度搜索历史页面（白色INS风） ===== */
        .fp-baidu-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 88px;
            padding-top: 44px;
            padding-bottom: 10px;
            padding-left: 16px;
            padding-right: 16px;
            background: #fff;
            border-bottom: 1px solid #f0f0f0;
            flex-shrink: 0;
        }
        .fp-baidu-header-title {
            font-size: 17px;
            font-weight: 600;
            color: #333;
            letter-spacing: 0.5px;
        }
        .fp-baidu-search-bar {
            margin: 16px 16px 0;
            padding: 10px 14px;
            background: #fff;
            border-radius: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
        }
        .fp-baidu-content {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        }
        .fp-baidu-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 80px 0;
        }
        .fp-baidu-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .fp-baidu-item {
            background: #fff;
            border-radius: 12px;
            padding: 14px 16px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.03);
            transition: transform 0.15s;
        }
        .fp-baidu-item:active {
            transform: scale(0.98);
        }
        .fp-baidu-item-index {
            width: 22px;
            height: 22px;
            border-radius: 6px;
            background: #f0f0f0;
            color: #999;
            font-size: 12px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 1px;
        }
        .fp-baidu-item-index.top1 { background: #ff4d4f; color: #fff; }
        .fp-baidu-item-index.top2 { background: #ff7a45; color: #fff; }
        .fp-baidu-item-index.top3 { background: #ffa940; color: #fff; }
        .fp-baidu-item-body {
            flex: 1;
            min-width: 0;
        }
        .fp-baidu-item-keyword {
            font-size: 15px;
            font-weight: 500;
            color: #333;
            line-height: 1.4;
            word-break: break-all;
        }
        .fp-baidu-item-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 6px;
            font-size: 12px;
            color: #bbb;
        }
        .fp-baidu-item-tag {
            padding: 1px 6px;
            background: #f5f5f5;
            border-radius: 4px;
            font-size: 11px;
            color: #aaa;
        }
        .fp-baidu-footer {
            padding: 12px 16px 20px;
            background: #fafafa;
        }
        .fp-baidu-generate-btn {
            width: 100%;
            padding: 12px 0;
            border: none;
            border-radius: 22px;
            background: linear-gradient(135deg, #4e6ef2 0%, #2932e1 100%);
            color: #fff;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: opacity 0.2s, transform 0.15s;
            letter-spacing: 0.5px;
        }
        .fp-baidu-generate-btn:active {
            transform: scale(0.97);
        }
        .fp-baidu-generate-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .fp-baidu-generate-btn .loading-spinner-sm {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .fp-baidu-section-title {
            font-size: 13px;
            color: #bbb;
            font-weight: 500;
            margin-bottom: 10px;
            letter-spacing: 0.5px;
        }

        /* 查手机 - WeChat登录弹窗 */
        .findphone-login-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.45);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 50;
            animation: findphoneLoginFadeIn 0.3s ease;
        }
        @keyframes findphoneLoginFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .findphone-login-card {
            background: #fff;
            border-radius: 20px;
            padding: 36px 28px 28px;
            width: 280px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 20px 60px rgba(0,0,0,0.15);
        }
        .findphone-login-logo {
            margin-bottom: 12px;
        }
        .findphone-login-title {
            font-size: 22px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 4px;
        }
        .findphone-login-subtitle {
            font-size: 13px;
            color: #999;
            margin-bottom: 24px;
        }
        .findphone-login-input {
            width: 100%;
            height: 44px;
            border: 1.5px solid #e8e8e8;
            border-radius: 10px;
            padding: 0 14px;
            font-size: 15px;
            color: #333;
            background: #fafafa;
            outline: none;
            box-sizing: border-box;
            margin-bottom: 12px;
            transition: border-color 0.2s;
        }
        .findphone-login-input:focus {
            border-color: #07C160;
            background: #fff;
        }
        .findphone-login-input::placeholder {
            color: #bbb;
        }
        .findphone-login-error {
            font-size: 13px;
            color: #ff3b30;
            margin-bottom: 12px;
            text-align: center;
        }
        .findphone-login-btn {
            width: 100%;
            height: 44px;
            background: #07C160;
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            margin-bottom: 10px;
            transition: opacity 0.2s;
        }
        .findphone-login-btn:active {
            opacity: 0.85;
        }
        .findphone-login-cancel {
            width: 100%;
            height: 38px;
            background: none;
            color: #999;
            border: none;
            font-size: 14px;
            cursor: pointer;
        }
        .findphone-login-cancel:active {
            color: #666;
        }
        @keyframes findphoneShake {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-8px); }
            40% { transform: translateX(8px); }
            60% { transform: translateX(-5px); }
            80% { transform: translateX(5px); }
        }

        /* 自定义CSS编辑器 */
        .custom-css-editor {
            width: 100%;
            min-height: 200px;
            max-height: 400px;
            padding: 14px;
            font-family: 'Courier New', 'Consolas', 'Monaco', monospace;
            font-size: 13px;
            line-height: 1.6;
            color: #333;
            background: #fafafa;
            border: 1.5px solid #eee;
            border-radius: 10px;
            resize: vertical;
            outline: none;
            box-sizing: border-box;
            tab-size: 4;
            white-space: pre;
            overflow-x: auto;
            transition: border-color 0.2s;
        }
        .custom-css-editor:focus {
            border-color: var(--ins-pink);
            background: #fff;
        }
        .custom-css-editor::placeholder {
            color: #ccc;
            font-size: 12px;
        }

        /* 聊天详情页样式 */
        .chat-detail-page {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            background: #f2f2f7;
            z-index: 210; /* 比聊天窗口高 */
            display: none;
            flex-direction: column;
            animation: slideLeft 0.3s ease;
        }
        /* 🔧 修复查手机模式下聊天详情页和群聊详情页的顶栏高度 */
        .chat-detail-page .wechat-header,
        #group-detail-page .wechat-header,
        #group-member-manage-page .wechat-header {
            height: 88px !important; /* 包含状态栏高度 */
            padding-top: 44px !important; /* 避让状态栏 */
            padding-bottom: 10px !important;
            box-sizing: border-box;
        }
        .detail-group {
            background: #fff;
            margin-top: 20px;
            padding: 0 16px;
        }
        .detail-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 0;
            border-bottom: 0.5px solid #c6c6c8;
            font-size: 16px;
            color: #000;
        }
        .detail-item:last-child {
            border-bottom: none;
        }
        .detail-arrow {
            color: #c7c7cc;
            font-size: 16px;
            margin-left: 8px;
        }
        .detail-avatar-box {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 24px 20px;
            gap: 16px;
            background: #fff;
            margin-bottom: 8px;
        }
        .detail-avatar {
            width: 64px;
            height: 64px;
            border-radius: 10px;
            background-size: cover;
            background-position: center;
            background-color: #eee;
            position: relative;
            flex-shrink: 0;
        }
        .detail-name-input {
            text-align: center;
            border: none;
            font-size: 18px;
            font-weight: 600;
            outline: none;
            width: 80%;
            background: transparent;
        }
        
        /* 账号下线弹窗动画 */
        @keyframes bounce {
            0%, 80%, 100% { 
                transform: scale(0.6);
                opacity: 0.4;
            }
            40% { 
                transform: scale(1);
                opacity: 1;
            }
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }
            50% {
                transform: scale(1.15);
                opacity: 0.4;
            }
            100% {
                transform: scale(1.3);
                opacity: 0;
            }
        }
        
        /* 下线弹窗按钮hover效果 */
        #account-offline-mask button:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 12px 32px rgba(255,182,193,0.6);
        }
        
        #account-offline-mask button:active {
            transform: translateY(-1px) scale(0.98);
        }
        
        /* 弹窗滑入动画 */
        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-20px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes batterySlideIn {
            from {
                opacity: 0;
                transform: translateY(-16px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        @keyframes batterySlideOut {
            from {
                opacity: 1;
                transform: translateY(0);
            }
            to {
                opacity: 0;
                transform: translateY(-16px);
            }
        }
        
        /* 密码错误弹窗按钮hover */
        #password-error-modal button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(255,182,193,0.5);
        }
        
        #password-error-modal button:active {
            transform: translateY(0);
        }
        
        .sticker-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            padding: 10px 0;
        }
        .sticker-item {
            aspect-ratio: 1;
            background: #f9f9f9;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background-size: cover;
            background-position: center;
            border: 1px solid #eee;
        }
        .sticker-add {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ccc;
            cursor: pointer;
        }
        .sticker-del {
            position: absolute;
            top: -6px;
            right: -6px;
            width: 16px;
            height: 16px;
            background: #ff3b30;
            color: #fff;
            border-radius: 50%;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        /* 聊天窗口样式 */
        .chat-window {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0; /* 🔧 用 top+bottom 撑满屏幕，彻底避免 100vh 在手机上不准导致底栏不贴底 */
            width: 100%;
            background: #ffffff; /* 聊天背景改白 */
            z-index: 200;
            display: none;
            flex-direction: column;
            animation: slideLeft 0.3s ease;
            overflow: hidden;
        }
        @keyframes slideLeft {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
        }
        .chat-header {
            height: 88px;
            background: rgba(255,255,255,0.98); /* 性能优化：去掉blur，用更高不透明度替代 */
            padding-top: 44px;
            padding-left: 10px;
            padding-right: 16px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid var(--ins-border);
            flex-shrink: 0;
            z-index: 10;
        }
        .chat-back {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            cursor: pointer;
            color: var(--ins-text);
            position: relative;
            z-index: 2;
        }
        .chat-title {
            font-size: 17px;
            font-weight: 600;
            color: var(--ins-text);
            position: absolute;
            left: 50%;
            top: 44px;
            height: 44px;
            line-height: 44px;
            transform: translateX(-50%);
            max-width: calc(100% - 176px);
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            z-index: 1;
        }
        .chat-more {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            color: var(--ins-text);
            cursor: pointer;
            position: relative;
            z-index: 2;
        }
        .chat-body {
            flex: 1;
            min-height: 0; /* flex 子项收缩关键：保证 overflow-y 正常工作 */
            overflow-y: auto;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 20px; /* 增加消息间距 */
            background: #ffffff;
        }
.chat-footer {
    background: #ffffff;
    border-top: 1px solid var(--ins-border);
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    flex-shrink: 0; /* 键盘弹起时底栏不被压缩 */
    transition: padding-bottom 0.15s ease;
}

/* 🔧 仅 PWA 独立模式下添加安全区域 padding（避开 iPhone Home Indicator）
   普通浏览器中，浏览器自身 toolbar 已处理安全区域，无需额外 padding
   这样所有设备在浏览器模式下底栏高度一致 */
body.standalone-mode .chat-footer {
    padding-bottom: env(safe-area-inset-bottom);
}

/* 键盘弹起时去掉安全区域 padding（Home指示条已被键盘遮住，不需要留空） */
.keyboard-up .chat-footer {
    padding-bottom: 0 !important;
}

/* 🔧 修复 iOS PWA 模式下键盘上方的操作栏（Accessory Bar）遮挡输入框的 Bug */
body.standalone-mode .keyboard-up .chat-footer {
    padding-bottom: calc(env(safe-area-inset-bottom) + 10px) !important;
}
        
        /* 线下模式输入框区域 - 与线上私聊页面保持一致 */
        #offline-chat-footer {
            /* 继承 .chat-footer 的样式，不做额外覆盖 */
        }
        /* 引用预览区域 */
        .quote-preview {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            background: #f8f8f8;
            border-bottom: 1px solid #eee;
        }
        .quote-preview-content {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
            min-width: 0;
        }
        .quote-preview-line {
            width: 3px;
            height: 32px;
            background: var(--ins-pink);
            border-radius: 2px;
            flex-shrink: 0;
        }
        .quote-preview-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
            flex: 1;
        }
        .quote-preview-name {
            font-size: 12px;
            color: var(--ins-pink);
            font-weight: 500;
        }
        .quote-preview-msg {
            font-size: 13px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .quote-preview-close {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #999;
            flex-shrink: 0;
        }
        .quote-preview-close:hover {
            color: #666;
        }
        /* 引用消息样式 - 统一私聊和群聊 */
        .quoted-message {
            border-left: 2px solid rgba(0,0,0,0.15);
            padding: 2px 6px;
            margin-bottom: 4px;
            font-size: 11px;
            line-height: 1.3;
            max-width: 180px;
        }
        .quoted-message-name {
            color: #555;
            font-weight: 500;
            font-size: 10px;
            margin-bottom: 1px;
        }
        .quoted-message-text {
            color: #666;
            font-size: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 160px;
            display: block;
        }
        /* 群聊引用样式（使用内联style的div） */
        .group-msg-content .quoted-message {
            border-left: 2px solid rgba(0,0,0,0.15);
            padding: 2px 6px;
            margin-bottom: 4px;
            font-size: 11px;
            line-height: 1.3;
            max-width: 180px;
        }
.chat-input-bar {
    min-height: 60px;
    padding: 10px 12px;
    padding-bottom: 10px; /* 默认状态，如果面板没开 */
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    overflow: hidden;
    flex-shrink: 0; /* 键盘弹起时输入栏不被压缩 */
}
        
        .chat-input {
            flex: 1;
            min-width: 0;
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 20px;
            padding: 10px 16px;
            font-size: 15px;
            max-height: 100px;
            overflow-y: auto;
            outline: none;
            color: var(--ins-text);
        }
        .chat-icon-btn {
            width: 32px;
            height: 32px;
            flex-shrink: 0;
            color: var(--ins-gray);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            touch-action: manipulation; /* 🔧 手机端：消除300ms点击延迟，防止双击缩放 */
            -webkit-tap-highlight-color: transparent; /* 🔧 去掉手机端点击高亮 */
            user-select: none; /* 🔧 防止意外选中 */
            border-radius: 50%;
        }
        .chat-icon-btn:active {
            background: #f5f5f5;
        }
        .chat-send-btn {
            display: none; /* 默认隐藏，有字显示 */
            background: var(--ins-pink);
            color: #fff;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
        }
        
        /* 底部面板区域 */
.chat-panel-container {
    height: 0;
    overflow: hidden;
    transition: height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    background: #fff;
}
.chat-panel-container.open {
    height: 280px; /* 面板高度 */
    padding-bottom: 34px; /* Home indicator */
}
        
        /* 表情面板 */
        .emoji-panel {
            height: 100%;
            grid-template-columns: repeat(8, 1fr);
            gap: 10px;
            padding: 20px 10px;
            overflow-y: auto;
            display: none;
        }
        .emoji-item {
            font-size: 24px;
            text-align: center;
            cursor: pointer;
            user-select: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        /* 更多菜单面板 */
        .action-panel {
            height: 100%;
            display: none;
            flex-direction: column;
            overflow: hidden;
        }
        .action-panel-swiper {
            flex: 1;
            overflow: hidden;
            position: relative;
        }
        .action-panel-track {
            display: flex;
            width: 200%;
            height: 100%;
            transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
            transform: translateX(0);
        }
        .action-panel-page {
            width: 50%;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            padding: 24px;
            align-content: start;
            flex-shrink: 0;
        }
        .action-panel-dots {
            display: flex;
            justify-content: center;
            gap: 6px;
            padding: 6px 0 10px;
        }
        .action-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #ddd;
            transition: all 0.3s;
        }
        .action-dot.active {
            background: #999;
            width: 16px;
            border-radius: 3px;
        }
        .action-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }
        .action-icon-box {
            width: 60px;
            height: 60px;
            background: #fff;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            color: var(--ins-gray);
        }
        .action-name {
            font-size: 12px;
            color: var(--ins-gray);
        }
        /* 气泡样式重构 - INS 风格 */
        /* 禁止手机端长按消息时弹出浏览器默认选择菜单 */
        .message-row,
        .group-message-row {
            -webkit-user-select: none !important;
            user-select: none !important;
            -webkit-touch-callout: none !important;
            -ms-user-select: none !important;
            -moz-user-select: none !important;
            touch-action: manipulation;
        }
        /* 确保所有子元素也禁用选择 - 修复iOS/Android长按弹出浏览器菜单 */
        .message-row *,
        .group-message-row * {
            -webkit-user-select: none !important;
            user-select: none !important;
            -webkit-touch-callout: none !important;
            -ms-user-select: none !important;
            -moz-user-select: none !important;
        }
        .message-row {
            display: flex;
            gap: 8px;
            align-items: flex-start; /* 顶部对齐 - 头像跟随气泡顶部 */
        }
        /* 🔧 群聊消息行统一使用 message-row，但覆盖对齐方式（群聊有发送者名称，需要底部对齐） */
        .message-row.group-message-row {
            align-items: flex-end;
        }
        /* 群聊气泡取消 message-content 的 max-width 限制（由外层容器控制宽度） */
        .message-row.group-message-row .message-content {
            max-width: none;
        }
        .message-row.self {
            flex-direction: row-reverse;
        }
        /* 增加特异性，防止被后面message-page的样式覆盖 */
        .chat-window .message-avatar,
        .message-row .message-avatar {
            width: 32px !important; /* 强制微信聊天头像小一点 */
            height: 32px !important;
            border-radius: 50%; /* 圆形头像 */
            background-size: cover;
            background-position: center;
            background-color: #f0f0f0;
            flex-shrink: 0;
            margin-bottom: 2px;
        }
        .message-content {
            max-width: 75%;
            padding: 6px 10px; /* 更紧凑的内边距 */
            border-radius: 18px; /* 大圆角 */
            font-size: 15px;
            line-height: 1.5;
            position: relative;
            word-wrap: break-word;
            box-shadow: 0 1px 2px rgba(0,0,0,0.02); /* 极淡阴影 */
            /* 保护URL不被拆分 */
            overflow-wrap: break-word;
            word-break: break-word;
            white-space: pre-wrap;
            /* 防止手机端长按触发浏览器默认选择 */
            -webkit-user-select: none !important;
            user-select: none !important;
            -webkit-touch-callout: none !important;
        }
        /* ✅ 图片专用样式 - 防止URL被拆分 */
        .message-content .chat-image {
            max-width: 180px;
            border-radius: 12px;
            display: block;
            word-break: normal !important;
            white-space: normal !important;
            margin: 0;
            pointer-events: auto;
        }
        /* 🔧 纯图片消息 - 移除气泡样式 */
        .message-content.image-only {
            padding: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            border-radius: 12px !important;
        }
        .message-content.image-only .chat-image {
            margin: 0;
        }
        /* 🔧 卡片消息样式（外卖卡片等） */
        .message-content.card-message {
            padding: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            max-width: 300px !important;
            white-space: normal !important; /* 修复：覆盖pre-wrap，防止换行符导致显示异常 */
            overflow: visible !important; /* 允许锯齿边溢出 */
            margin-top: 8px !important;
            margin-bottom: 14px !important;
        }
        .message-content.card-message > div {
            width: 260px !important;
            max-width: 260px !important;
            box-sizing: border-box !important;
        }
        .message-content.card-message * {
            white-space: normal !important; /* 确保所有子元素也正常处理空白 */
        }
        /* 消息中的链接保护 - 保持URL完整 */
        .message-content a {
            word-break: break-all;
            white-space: normal;
            display: inline;
        }
        .message-row.other .message-content {
            background: #f2f2f7; /* 对方浅灰 */
            color: #000;
            border-bottom-left-radius: 4px; /* 小尾巴效果 */
        }
        .message-row.self .message-content {
            background: var(--ins-pink-light); /* 自己浅粉 */
            color: #000;
            border-bottom-right-radius: 4px; /* 小尾巴效果 */
        }
        /* 移除原来的三角形尾巴（仅在默认气泡样式下生效，自定义CSS时不限制伪元素） */
        .bubble-style-default .message-row.other .message-content::before,
        .bubble-style-default .message-row.self .message-content::after {
            display: none;
        }
        
        /* ========== 仿微信气泡样式 ========== */
        .bubble-style-wechat .message-content {
            border-radius: 6px !important; /* 稍微圆一点的方圆角 */
            position: relative;
            box-shadow: none;
            background: #fff !important; /* 白色背景 */
            border: 1px solid #e0e0e0 !important; /* 灰色描边 */
        }
        .bubble-style-wechat .message-row.other .message-content {
            margin-left: 6px;
        }
        .bubble-style-wechat .message-row.self .message-content {
            margin-right: 6px;
        }
        /* 对方消息的小尾巴（左侧） - 使用圆角小三角 */
        .bubble-style-wechat .message-row.other .message-content::before {
            content: '';
            display: block !important;
            position: absolute;
            left: -4px;
            top: 10px;
            width: 7px;
            height: 7px;
            background: #fff;
            border: 1px solid #e0e0e0;
            border-right: none;
            border-top: none;
            transform: rotate(45deg);
            border-radius: 0 0 0 2px; /* 小圆角 */
        }
        /* 自己消息的小尾巴（右侧） - 使用圆角小三角 */
        .bubble-style-wechat .message-row.self .message-content::after {
            content: '';
            display: block !important;
            position: absolute;
            right: -4px;
            top: 10px;
            width: 7px;
            height: 7px;
            background: #fff;
            border: 1px solid #e0e0e0;
            border-left: none;
            border-bottom: none;
            transform: rotate(45deg);
            border-radius: 0 2px 0 0; /* 小圆角 */
        }
        
        /* ===== 卡片消息：无论什么气泡主题，均去掉气泡包裹 ===== */
        .message-row .message-content:has(.transfer-card),
        .message-row .message-content:has(.redpacket-card),
        .message-row .message-content:has(.family-card-msg),
        .message-row .message-content:has(.spr-card),
        .message-row .message-content:has(.intimate-req-card),
        .message-row .message-content:has(.location-card) {
            padding: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            border: none !important;
            border-radius: 0 !important;
            white-space: normal !important;
            max-width: fit-content !important;
        }
        /* 去掉小尾巴三角（对任何主题） */
        .message-row .message-content:has(.transfer-card)::before,
        .message-row .message-content:has(.transfer-card)::after,
        .message-row .message-content:has(.redpacket-card)::before,
        .message-row .message-content:has(.redpacket-card)::after,
        .message-row .message-content:has(.family-card-msg)::before,
        .message-row .message-content:has(.family-card-msg)::after,
        .message-row .message-content:has(.spr-card)::before,
        .message-row .message-content:has(.spr-card)::after,
        .message-row .message-content:has(.intimate-req-card)::before,
        .message-row .message-content:has(.intimate-req-card)::after,
        .message-row .message-content:has(.location-card)::before,
        .message-row .message-content:has(.location-card)::after {
            display: none !important;
        }

        /* 气泡样式选择器 */
        .bubble-style-option.selected {
            border-color: var(--ins-pink) !important;
            background: #fff5f7;
        }

        /* 群聊气泡预览基础样式（移除 inline style 以便用户 CSS 可正常覆盖） */
        #group-bubble-preview .group-preview-bubble {
            padding: 6px 10px;
            font-size: 14px;
            line-height: 1.5;
            display: inline-block;
            border-radius: 18px;
            word-wrap: break-word;
        }
        #group-bubble-preview .group-preview-bubble.other-bubble {
            background: #f2f2f7;
            color: #000;
            border-bottom-left-radius: 4px;
        }
        #group-bubble-preview .group-preview-bubble.self-bubble {
            background: var(--ins-pink-light);
            color: #000;
            border-bottom-right-radius: 4px;
        }
        
        /* 消息时间戳 */
        .message-timestamp {
            width: 100%;
            text-align: center;
            font-size: 11px;
            color: #999;
            padding: 4px 0;
            margin: 4px 0;
            clear: both;
        }
        
        .wechat-content {
            flex: 1;
            min-height: 0; /* flex 子项收缩关键：让 overflow 正常裁剪 */
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            background: #fff;
        }
        .wechat-empty-state {
            color: #999;
            font-size: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            flex: 1;
            height: 100%;
        }
        .wechat-tabbar {
            height: 83px; /* 包含 Home Indicator 区域 */
            background: #ffffff;
            border-top: 1px solid var(--ins-border);
            display: flex;
            padding-bottom: 34px; /* Home Indicator 避让 */
            width: 100%;
            flex-shrink: 0;
            overflow: hidden;
        }
        .wechat-tab-item {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 4px;
            color: var(--ins-gray);
            cursor: pointer;
        }
        .wechat-tab-item.active {
            color: var(--ins-pink); /* 粉色主题 */
        }
        .wechat-tab-item .tab-icon {
            color: var(--ins-gray);
        }
        .wechat-tab-item.active .tab-icon {
            color: var(--ins-pink);
        }
        .wechat-tab-item.active .tab-name {
            color: var(--ins-pink);
            font-weight: 500;
        }
        .tab-icon {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .tab-name {
            font-size: 10px;
            font-weight: 400;
        }
        
        /* 🔧 安卓大字体兜底：所有按钮/标签文字不受系统字体缩放影响 */
        .modal-btn,
        .btn-cancel,
        .btn-confirm,
        .back-btn,
        .save-btn,
        .context-menu-item,
        .action-item,
        .wechat-tab-item,
        .tab-name,
        .dock-icon .name,
        .chat-icon-btn,
        .sticker-modal-btn {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        /* 底部 Home 条退出区域 */
        .home-indicator-area {
            display: none; /* 移除底部退出条 */
        }
        
        /* 角色卡片样式 */
        .char-card {
            background: #f9f9f9;
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            aspect-ratio: 3/4; /* 竖长卡片 */
            border: 1px solid #eee;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .char-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            border-color: var(--ins-pink);
        }
        .char-card::after {
            content: '✏️';
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        .char-card:hover::after {
            opacity: 1;
        }
        .char-card-img {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
        }
        .char-card-info {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
            padding: 20px 10px 10px;
            color: #fff;
        }
        .char-name {
            font-size: 14px;
            font-weight: 600;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        .char-nick {
            font-size: 10px;
            opacity: 0.9;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

        /* 微信列表项滑动操作样式 */
        .wechat-list-item-container {
            position: relative;
            overflow: hidden;
            background-color: #fff; /* 背景色 */
        }
        .wechat-list-item-content {
            position: relative;
            z-index: 2;
            background-color: #fff;
            transition: transform 0.2s ease-out;
            width: 100%;
        }
        .wechat-item-actions {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            display: flex;
            z-index: 1;
        }
        .wechat-action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            color: #fff;
            font-size: 16px;
            font-weight: 500;
            border: none;
            cursor: pointer;
        }
        .btn-pin {
            background-color: #c7c7cc; /* 灰色置顶 */
        }
        .btn-delete {
            background-color: #ff3b30; /* 红色删除 */
        }

        /* 微信个人中心样式 (INS风) */
        .wechat-me-container {
            padding: 0;
            background: #fff;
            height: 100%;
            overflow-y: auto;
        }
        .wechat-profile {
            display: flex;
            align-items: center;
            padding: 30px 24px 40px;
            background: #fff;
        }
        .wechat-profile-avatar {
            width: 70px;
            height: 70px;
            border-radius: 12px;
            background-color: #f2f2f7;
            background-size: cover;
            background-position: center;
            margin-right: 20px;
            border: 1px solid #f0f0f0;
        }
        .wechat-profile-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .wechat-profile-name {
            font-size: 20px;
            font-weight: 600;
            color: #333; /* 昵称稍微深一点，保持可读性 */
            margin-bottom: 6px;
        }
        .wechat-profile-id {
            font-size: 14px;
            color: #999;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .wechat-qrcode-icon {
            color: #999;
            margin-left: 10px;
        }
        
        .wechat-cell-group {
            margin-bottom: 12px;
            padding: 0 16px;
        }
        .wechat-cell {
            display: flex;
            align-items: center;
            padding: 16px;
            background: #fff;
            border-bottom: 0.5px solid #f5f5f5;
            color: #999; /* 全局灰色字体 */
            font-size: 16px;
            cursor: pointer;
        }
        .wechat-cell:last-child {
            border-bottom: none;
        }
        .wechat-cell:active {
            background-color: #fafafa;
        }
        .wechat-cell-icon {
            width: 24px;
            height: 24px;
            margin-right: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .wechat-cell-text {
            flex: 1;
            font-weight: 400;
        }
        .wechat-cell-arrow {
            color: #ccc;
            font-size: 14px;
        }
        /* 图标颜色点缀 */
        .icon-service { color: #07c160; }
        .icon-emoji { color: #ffc300; }
        .icon-collect { color: #fa5151; }
        .icon-settings { color: #10aeff; }
        
        /* 切换账号弹窗列表 */
        .account-switch-list {
            max-height: 300px;
            overflow-y: auto;
        }
        .account-item {
            display: flex;
            align-items: center;
            padding: 12px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
        }
        .account-item:active { background: #f9f9f9; }
        .account-avatar {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            background-size: cover;
            background-position: center;
            margin-right: 10px;
            background-color: #eee;
        }

        /* App Store 样式 */
        .appstore-tab {
            font-size: 16px;
            font-weight: 500;
            color: #999;
            cursor: pointer;
            padding: 8px 0;
            border-bottom: 2px solid transparent;
            transition: all 0.3s;
        }
        .appstore-tab.active {
            color: #007aff;
            border-bottom-color: #007aff;
        }
        .app-card {
            background: #fff;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
            display: flex;
            gap: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .app-icon-large {
            width: 80px;
            height: 80px;
            border-radius: 16px;
            background: #f0f0f5;
            flex-shrink: 0;
            background-size: cover;
            background-position: center;
        }
        .app-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .app-name {
            font-size: 16px;
            font-weight: 600;
            color: #000;
            margin-bottom: 4px;
        }
        .app-subtitle {
            font-size: 13px;
            color: #999;
            margin-bottom: 8px;
        }
        .app-rating {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: #999;
        }
        .app-stars {
            color: #ffb800;
        }
        .app-get-btn {
            background: #f0f0f5;
            color: #007aff;
            border: none;
            border-radius: 16px;
            padding: 6px 16px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            align-self: flex-start;
        }
        .app-get-btn.installed {
            background: #007aff;
            color: #fff;
        }
        .app-get-btn.installed:hover {
            background: #0056b3;
        }

        /* 世界书卡片样式 */
        .lorebook-card {
            background: #f9f9f9;
            border-radius: 12px;
            padding: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #eee;
        }
        .lorebook-info h3 {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
        }
        .lorebook-info p {
            font-size: 12px;
            color: #999;
        }
        .lorebook-actions {
            display: flex;
            gap: 8px;
        }
        .lorebook-btn {
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
        }
        .lb-edit { background: var(--ins-pink-light); color: var(--ins-pink); }
        .lb-del { background: #ffe5e5; color: #ff3b30; }

        /* 世界书作用域徽章 */
        .lb-scope-badge {
            display: inline-block;
            font-size: 10px;
            color: #fff;
            padding: 2px 8px;
            border-radius: 10px;
            cursor: pointer;
            white-space: nowrap;
            user-select: none;
            transition: opacity 0.2s;
        }
        .lb-scope-badge:hover {
            opacity: 0.8;
        }

        /* 世界书条目开关 */
        .lb-entry-toggle {
            position: relative;
            display: inline-block;
            width: 40px;
            min-width: 40px;
            height: 22px;
            margin-right: 10px;
            cursor: pointer;
        }
        .lb-entry-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .lb-toggle-slider {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: #ccc;
            border-radius: 22px;
            transition: 0.3s;
        }
        .lb-toggle-slider::before {
            content: '';
            position: absolute;
            height: 18px;
            width: 18px;
            left: 2px;
            bottom: 2px;
            background: white;
            border-radius: 50%;
            transition: 0.3s;
        }
        .lb-entry-toggle input:checked + .lb-toggle-slider {
            background: var(--ins-pink);
        }
        .lb-entry-toggle input:checked + .lb-toggle-slider::before {
            transform: translateX(18px);
        }

        /* 关系卡片样式 */
        .relation-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 10px;
        }
        .relation-item {
            display: flex;
            align-items: center;
            background: #f9f9f9;
            padding: 10px;
            border-radius: 10px;
            gap: 10px;
            position: relative;
        }
        .relation-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #eee;
            background-size: cover;
            background-position: center;
        }
        .relation-info {
            flex: 1;
        }
        .relation-name {
            font-size: 14px;
            font-weight: 500;
        }
        .relation-desc {
            font-size: 12px;
            color: #999;
        }
        .relation-tag {
            background: var(--ins-pink-light);
            color: var(--ins-pink);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            margin-left: 4px;
        }
        .relation-item .relation-actions {
            display: flex;
            gap: 6px;
            margin-left: auto;
            flex-shrink: 0;
        }
        .relation-item .relation-actions button {
            background: none;
            border: none;
            font-size: 14px;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            opacity: 0.5;
            transition: opacity 0.2s;
        }
        .relation-item .relation-actions button:hover {
            opacity: 1;
        }
        .relation-type-tag {
            display: inline-block;
            padding: 6px 12px;
            border: 1px solid #ddd;
            border-radius: 20px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
            background: #fff;
            user-select: none;
        }
        .relation-type-tag:hover {
            border-color: #007aff;
            color: #007aff;
        }
        .relation-type-tag.active {
            background: #007aff;
            color: #fff;
            border-color: #007aff;
        }
        

        /* 世界书作用域选择器 */
        .lb-scope-selector {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            background: #fff;
            border-bottom: 1px solid #f0f0f0;
        }
        .lb-scope-option {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 13px;
            color: #666;
            background: #f2f2f7;
            cursor: pointer;
            transition: all 0.2s;
            border: 2px solid transparent;
        }
        .lb-scope-option.active {
            background: #fff;
            border-color: var(--ins-pink);
            color: #333;
            font-weight: 600;
        }
        .lb-scope-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }
        .lb-scope-desc {
            font-size: 10px;
            color: #999;
            margin-left: 2px;
        }
        .lb-scope-option.active .lb-scope-desc {
            color: #666;
        }

        /* 世界书编辑器样式 */
        .lb-editor-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: #f2f2f7;
        }
        .lb-entry-list {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        }
        .lb-entry-item {
            background: #fff;
            padding: 12px 16px;
            border-radius: 10px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            transition: opacity 0.2s;
        }
        .lb-entry-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .lb-entry-keys {
            font-size: 12px;
            color: #999;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        /* 词条编辑页 */
        .entry-editor-page {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            background: #fff;
            z-index: 160;
            display: none;
            flex-direction: column;
            animation: slideRight 0.3s ease;
        }
        @keyframes slideRight {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
        }
        .editor-form {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        }
        .editor-group {
            margin-bottom: 20px;
        }
        .editor-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
            display: block;
        }
        .editor-input {
            width: 100%;
            padding: 12px;
            background: #f9f9f9;
            border: 1px solid #eee;
            border-radius: 8px;
            font-size: 16px;
            outline: none;
        }
        .editor-textarea {
            width: 100%;
            height: 200px;
            padding: 12px;
            background: #f9f9f9;
            border: 1px solid #eee;
            border-radius: 8px;
            font-size: 16px;
            resize: none;
            outline: none;
            font-family: monospace;
        }

        /* --- 长按菜单与多选样式 --- */
        .context-menu {
            position: fixed;
            background: #ffffff;
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 6px;
            display: none;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            z-index: 9999;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            gap: 4px;
            animation: menuFadeIn 0.2s ease;
            border: 1px solid #f0f0f0;
            max-width: calc(100vw - 20px);
        }
        @keyframes menuFadeIn {
            from { opacity: 0; transform: scale(0.95) translateY(-5px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        .context-menu-item {
            padding: 8px 14px;
            color: #666;
            font-size: 14px;
            border: none;
            border-radius: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.2s ease;
            white-space: nowrap;
            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        }
        .context-menu-item:last-child {
            border: none;
        }
        .context-menu-item:active,
        .context-menu-item:hover {
            background: #fafafa;
            color: #333;
        }
        .context-menu-item svg {
            stroke: currentColor;
            stroke-width: 2;
        }
        
        /* 消息长按反馈 */
        .message-content.active {
            transform: scale(0.98);
            filter: brightness(0.9);
        }
        
        /* ========== 消息翻译样式 ========== */
        .msg-translation {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px dashed rgba(0,0,0,0.1);
            font-size: 13px;
            color: #666;
        }

        /* 撤回消息 - 居中系统提示样式（与群聊系统消息一致） */
        .recalled-system-row {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            padding: 8px 0 !important;
        }
        .recalled-system-tip {
            background: #fff;
            color: #999;
            font-size: 12px;
            padding: 4px 12px;
            border-radius: 4px;
            border: 1px solid #ddd;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .recalled-system-tip:hover,
        .recalled-system-tip:active {
            background: #f9f9f9;
            color: #666;
        }
        
        /* 兼容旧的撤回样式 */
        .recalled-msg {
            font-size: 12px;
            color: #999;
            font-style: italic;
            background: transparent !important;
            padding: 8px 0 !important;
            box-shadow: none !important;
            cursor: pointer;
        }

        /* 多选模式样式 */
        .message-row {
            position: relative;
            transition: padding-left 0.3s ease;
        }
        .selection-mode .message-row {
            padding-left: 40px; 
        }
        
        .msg-checkbox {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 2px solid #ccc;
            background: #fff;
            position: absolute;
            left: 6px;
            top: 50%;
            transform: translateY(-50%);
            display: none; /* 默认隐藏 */
            z-index: 10;
            box-sizing: border-box; /* 边框包含在22px内，防止手机端溢出遮挡头像 */
        }
        .msg-checkbox.checked {
            background: var(--ins-pink);
            border-color: var(--ins-pink);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
            background-size: 16px;
            background-repeat: no-repeat;
            background-position: center;
        }
        
        .selection-mode .msg-checkbox {
            display: block;
            animation: slideInLeft 0.3s ease;
        }
        
        /* 多选模式下给聊天区域添加底部内边距，避免被底部操作栏遮挡 */
        .chat-body.selection-mode {
            padding-bottom: 80px;
        }
        body.standalone-mode .chat-body.selection-mode {
            padding-bottom: calc(80px + env(safe-area-inset-bottom));
        }
        @keyframes slideInLeft {
            from { transform: translate(-30px, -50%); opacity: 0; }
            to { transform: translate(0, -50%); opacity: 1; }
        }

        /* 底部多选操作栏 */
        .selection-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background: #fff;
            border-top: 1px solid #eee;
            display: none;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            z-index: 300; /* 高于 chat-footer */
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            padding-bottom: 0;
            height: 60px;
        }
        body.standalone-mode .selection-bar {
            padding-bottom: env(safe-area-inset-bottom);
            height: calc(60px + env(safe-area-inset-bottom));
        }
        .selection-btn {
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
        }
        .btn-delete-all {
            color: #ff3b30;
        }
        .btn-cancel-sel {
            color: #333;
        }

        /* 语音气泡样式 */
        .voice-bubble {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 20px;
            border-radius: 20px;
            cursor: pointer;
            min-width: 100px;
            max-width: 200px;
            transition: all 0.2s;
            position: relative;
        }
        .message-row.other .voice-bubble {
            background: #f5f5f5;
        }
        .message-row.self .voice-bubble {
            background: #ffe8f0;
        }
        .voice-bubble:active {
            transform: scale(0.98);
        }
        
        /* 语音波纹图标（纯CSS，无图片） */
        .voice-icon {
            display: flex;
            gap: 2px;
            align-items: center;
            height: 16px;
        }
        .voice-icon i {
            width: 3px;
            border-radius: 3px;
            background: #999;
            animation: voiceWave 1.2s infinite ease-in-out;
        }
        .message-row.self .voice-icon i {
            background: #e69fc8;
        }
        .voice-icon i:nth-child(1) {
            height: 6px;
        }
        .voice-icon i:nth-child(2) {
            height: 12px;
            animation-delay: 0.2s;
        }
        .voice-icon i:nth-child(3) {
            height: 8px;
            animation-delay: 0.4s;
        }
        @keyframes voiceWave {
            0%, 100% {
                height: 6px;
                opacity: 0.6;
            }
            50% {
                height: 16px;
                opacity: 1;
            }
        }
        
        /* 语音时长 */
        .voice-duration {
            font-size: 12px;
            color: #999;
            margin-left: auto;
        }
        .message-row.self .voice-duration {
            color: #c880a8;
        }
        
        /* 语音转文内容（默认隐藏） */
        .voice-text-content {
            margin-top: 6px;
            padding: 10px 15px;
            border-radius: 12px;
            font-size: 14px;
            color: #333;
            background: #fdfdfd;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            display: none;
            line-height: 1.5;
            word-wrap: break-word;
        }
        .voice-bubble.expanded .voice-text-content {
            display: block;
        }
        .voice-bubble.expanded {
            max-width: 75%;
            flex-direction: column;
            align-items: flex-start;
        }
        .voice-bubble-header {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
        }
        
        /* 点击后波纹暂停 */
        .voice-bubble.expanded .voice-icon i {
            animation: none;
            height: 10px;
        }

        /* 语音输入弹窗样式 */
        .voice-input-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            z-index: 400;
            display: none;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }
        .voice-input-box {
            background: #fff;
            width: 85%;
            max-width: 320px;
            border-radius: 20px;
            padding: 30px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .voice-icon-container {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: var(--ins-pink-light);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .voice-icon-container.recording {
            animation: pulse 1.5s ease-in-out infinite;
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }
        .voice-icon-container .svg-icon {
            width: 48px;
            height: 48px;
            stroke: var(--ins-pink);
            stroke-width: 2.5;
        }
        .voice-status-text {
            font-size: 16px;
            color: #333;
            font-weight: 500;
            text-align: center;
        }
        .voice-transcript {
            width: 100%;
            min-height: 60px;
            max-height: 120px;
            overflow-y: auto;
            padding: 12px;
            background: #f5f5f5;
            border-radius: 12px;
            font-size: 15px;
            color: #333;
            line-height: 1.5;
            text-align: center;
        }
        .voice-transcript.empty {
            color: #999;
            font-style: italic;
        }
        .voice-btns {
            display: flex;
            gap: 12px;
            width: 100%;
        }
        .voice-btn {
            flex: 1;
            padding: 12px;
            border-radius: 12px;
            border: none;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        .voice-btn-cancel {
            background: #f2f2f7;
            color: #333;
        }
        .voice-btn-cancel:active {
            background: #e5e5ea;
        }
        .voice-btn-send {
            background: var(--ins-pink);
            color: #fff;
        }
        .voice-btn-send:active {
            opacity: 0.8;
        }
        .voice-btn-send:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .voice-error {
            color: #ff3b30;
            font-size: 13px;
            text-align: center;
        }

        /* 图片卡片样式 - 简洁浅色系 */
        .img-card-bubble {
            padding: 0;
            background: transparent !important;
            box-shadow: none !important;
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s;
            min-width: 160px;
            max-width: 200px;
            width: 200px; /* 固定宽度，展开后不变 */
        }
        .img-card-bubble:active {
            transform: scale(0.98);
        }
        
        /* 卡片占位符（未展开状态） - 纯白简洁风 */
        .img-card-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 24px 20px;
            background: #ffffff;
            border: 1px solid #e8e8e8;
            border-radius: 12px;
            min-height: 120px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        .message-row.self .img-card-placeholder {
            background: #ffffff;
            border-color: #e8e8e8;
        }
        
        /* 图片图标 - 统一灰色 */
        .img-card-icon {
            width: 36px;
            height: 36px;
            stroke: #bbb;
            stroke-width: 1.5;
        }
        .message-row.self .img-card-icon {
            stroke: #bbb;
        }
        
        /* 提示文字 - 统一灰色 */
        .img-card-hint {
            font-size: 13px;
            color: #aaa;
            font-weight: 400;
        }
        .message-row.self .img-card-hint {
            color: #aaa;
        }
        
        /* 展开后的文字内容 - 保持相同大小 */
        .img-card-text {
            padding: 16px;
            font-size: 15px;
            line-height: 1.6;
            color: #333;
            background: #ffffff;
            border: 1px solid #e8e8e8;
            border-radius: 12px;
            word-wrap: break-word;
            white-space: pre-wrap;
            min-height: 120px; /* 与占位符相同高度 */
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        .message-row.self .img-card-text {
            background: #ffffff;
            border-color: #e8e8e8;
        }

        /* 微信个人中心样式 (INS风) */
        .wechat-me-container {
            padding: 0;
            background: #fff;
            height: 100%;
            overflow-y: auto;
        }
        .wechat-profile {
            display: flex;
            align-items: center;
            padding: 30px 24px 40px;
            background: #fff;
        }
        .wechat-profile-avatar {
            width: 70px;
            height: 70px;
            border-radius: 12px;
            background-color: #f2f2f7;
            background-size: cover;
            background-position: center;
            margin-right: 20px;
            border: 1px solid #f0f0f0;
        }
        .wechat-profile-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .wechat-profile-name {
            font-size: 20px;
            font-weight: 600;
            color: #333; /* 昵称稍微深一点，保持可读性 */
            margin-bottom: 6px;
        }
        .wechat-profile-id {
            font-size: 14px;
            color: #999;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .wechat-qrcode-icon {
            color: #999;
            margin-left: 10px;
        }
        
        .wechat-cell-group {
            margin-bottom: 12px;
            padding: 0 16px;
        }
        .wechat-cell {
            display: flex;
            align-items: center;
            padding: 16px;
            background: #fff;
            border-bottom: 0.5px solid #f5f5f5;
            color: #999; /* 全局灰色字体 */
            font-size: 16px;
            cursor: pointer;
        }
        .wechat-cell:last-child {
            border-bottom: none;
        }
        .wechat-cell:active {
            background-color: #fafafa;
        }
        .wechat-cell-icon {
            width: 24px;
            height: 24px;
            margin-right: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .wechat-cell-text {
            flex: 1;
            font-weight: 400;
        }
        .wechat-cell-arrow {
            color: #ccc;
            font-size: 14px;
        }
        /* 图标颜色点缀 */
        .icon-service { color: #07c160; }
        .icon-emoji { color: #ffc300; }
        .icon-collect { color: #fa5151; }
        .icon-settings { color: #10aeff; }
        
        /* 切换账号弹窗列表 */
        .account-switch-list {
            max-height: 300px;
            overflow-y: auto;
        }
        .account-item {
            display: flex;
            align-items: center;
            padding: 12px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
        }
        .account-item:active { background: #f9f9f9; }
        .account-avatar {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            background-size: cover;
            background-position: center;
            margin-right: 10px;
            background-color: #eee;
        }

/* =================
   服务页面样式 (From 服务2.html)
   ================= */

/* 页面容器适配 - 使用 wechat-page 的基础，这里补充特定样式 */
.service-sub-page {
    background: linear-gradient(180deg, #fffbfc 0%, #f7f7f7 100%);
    overflow-y: auto;
}

.svc-nav-bar {
    height: 88px; /* 与微信页面顶栏一致 */
    padding-top: 44px; /* 避让状态栏 */
    padding-left: 16px;
    padding-right: 16px;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    background: transparent;
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.svc-container {
    padding: 0 16px 40px 16px;
}

.header-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 24px rgba(255, 192, 203, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.8);
    margin-bottom: 24px;
}

.header-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.header-item:active { transform: scale(0.96); }

.divider-vertical {
    width: 1px;
    height: 40px;
    background: rgba(0,0,0,0.05);
    margin: 0 10px;
}

.icon-lg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: #555;
    stroke-width: 1.5;
    margin-bottom: 12px;
}

.item-title {
    font-size: 15px;
    color: #666;
    font-weight: 500;
    margin-bottom: 4px;
}

.item-subtitle {
    font-size: 11px;
    color: #aaa;
    text-transform: uppercase;
}

/* 钱包区域 */
.section-title {
    font-size: 12px;
    color: #b0b0b0;
    margin: 0 0 12px 8px;
    letter-spacing: 1px;
}

.grid-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* 手机充值页面样式 */
.recharge-amount-btn {
    padding: 16px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 12px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.recharge-amount-btn:hover {
    background: #f0f0f0;
}

.recharge-amount-btn.selected {
    background: #e8f5e9;
    border-color: #07c160;
    color: #07c160;
}

.icon-box {
    width: 44px;
    height: 44px;
    background: #fff5f7; /* 极淡粉底 */
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-icon {
    width: 22px;
    height: 22px;
    stroke: #666;
    stroke-width: 1.5;
    fill: none;
}

.grid-text {
    font-size: 12px;
    color: #666;
    text-align: center;
}

/* =================
   借钱页面样式 (白色INS风格)
   ================= */

/* 可借额度卡片 */
.loan-header-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 32px 24px;
    margin-bottom: 24px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(255, 192, 203, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.loan-header-icon {
    width: 80px;
    height: 80px;
    background: #fff5f7;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.loan-header-title {
    font-size: 14px;
    color: #999;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.loan-header-amount {
    font-size: 42px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
    letter-spacing: -1px;
}

.loan-header-subtitle {
    font-size: 12px;
    color: #bbb;
}

/* 借款金额选择区域 */
.loan-amount-section {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.loan-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

.loan-amount-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.loan-amount-btn {
    background: #f8f8f8;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.loan-amount-btn:active {
    transform: scale(0.98);
}

.loan-amount-btn.selected {
    background: #fff5f7;
    border-color: #ffb3c6;
    box-shadow: 0 4px 12px rgba(255, 179, 198, 0.2);
}

.loan-amount-value {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 6px;
}

.loan-amount-desc {
    font-size: 12px;
    color: #999;
}

.loan-amount-btn.selected .loan-amount-value {
    color: #ff6b9d;
}

.loan-amount-btn.selected .loan-amount-desc {
    color: #ff6b9d;
}

/* 自定义金额输入 */
.loan-custom-amount {
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.loan-custom-label {
    font-size: 14px;
    color: #999;
    margin-bottom: 12px;
}

.loan-custom-input-wrapper {
    display: flex;
    align-items: center;
    background: #f8f8f8;
    border-radius: 12px;
    padding: 0 16px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.loan-custom-input-wrapper:focus-within {
    background: #fff5f7;
    border-color: #ffb3c6;
}

.loan-currency {
    font-size: 18px;
    font-weight: 600;
    color: #666;
    margin-right: 8px;
}

.loan-custom-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    padding: 16px 0;
    outline: none;
}

.loan-custom-input::placeholder {
    color: #ccc;
    font-weight: 400;
}

/* 借款信息卡片 */
.loan-info-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.loan-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
}

.loan-info-item:not(:last-child) {
    border-bottom: 1px solid #f7f7f7;
}

.loan-info-label {
    font-size: 15px;
    color: #666;
}

.loan-info-value {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.loan-info-value.loan-highlight {
    font-size: 18px;
    color: #ff6b9d;
}

.loan-select {
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    outline: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}

.loan-select:hover {
    background: #f8f8f8;
}

/* 借款提交按钮 */
.loan-submit-btn {
    width: 100%;
    padding: 18px;
    background: #ff6b9d;
    color: #ffffff;
    border: none;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);
}

.loan-submit-btn:active {
    transform: scale(0.98);
}

.loan-submit-btn:disabled {
    background: #e0e0e0;
    color: #999;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.6;
}

/* 温馨提示 */
.loan-tips {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.loan-tips-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.loan-tips-content {
    font-size: 13px;
    color: #999;
    line-height: 1.8;
}

.loan-tip-item {
    margin-bottom: 6px;
}

.loan-tip-item:last-child {
    margin-bottom: 0;
}

/* 借款记录 */
.loan-history-section {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.loan-history-list {
    margin-top: 16px;
}

.loan-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #ccc;
    font-size: 14px;
}

.loan-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f7f7f7;
}

.loan-history-item:last-child {
    border-bottom: none;
}

.loan-history-info {
    flex: 1;
}

.loan-history-amount {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.loan-history-date {
    font-size: 12px;
    color: #999;
}

.loan-history-status {
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 12px;
    font-weight: 500;
}

.loan-history-status.pending {
    background: #fff5e6;
    color: #ff9800;
}

.loan-history-status.repaid {
    background: #e8f5e9;
    color: #4caf50;
}

.loan-history-status.overdue {
    background: #ffebee;
    color: #f44336;
}

.loan-history-status.profit {
    background: #e8f5e9;
    color: #4caf50;
}

.loan-history-status.loss {
    background: #fff3e0;
    color: #ff9800;
}

.loan-repay-btn-small {
    font-size: 12px;
    padding: 4px 12px;
    background: var(--ins-pink);
    color: #fff;
    border-radius: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.loan-repay-btn-small:active {
    transform: scale(0.95);
    opacity: 0.8;
}

/* =================
   刮刮乐页面样式 (白色INS风格)
   ================= */

/* 余额显示卡片 */
.scratch-balance-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(255, 192, 203, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.scratch-balance-label {
    font-size: 14px;
    color: #999;
    margin-bottom: 8px;
}

.scratch-balance-amount {
    font-size: 32px;
    font-weight: 700;
    color: #333;
}

/* 刮刮乐卡片容器 */
.scratch-card-container {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
}

.scratch-card-wrapper {
    width: 100%;
    max-width: 320px;
}

.scratch-card {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(255, 192, 203, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.8);
    cursor: pointer;
    user-select: none;
    touch-action: none;
    background: #ffffff;
}

/* 刮刮乐覆盖层 */
.scratch-card-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ffe4e8 0%, #fff5f7 50%, #fffbfc 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: opacity 0.3s ease;
    overflow: hidden;
}

.scratch-card-cover.scratched {
    opacity: 0;
    pointer-events: none;
}

.scratch-card-cover canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}

.scratch-cover-pattern {
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px),
        repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px);
    position: absolute;
    top: 0;
    left: 0;
}

.scratch-cover-text {
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-weight: 600;
    color: #ffb6c1;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
    letter-spacing: 2px;
}

/* 刮刮乐内容层 */
.scratch-card-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding: 20px;
    box-sizing: border-box;
}

.scratch-result-icon {
    font-size: 40px;
    margin-bottom: 16px;
    opacity: 0.9;
    display: none;
}

.scratch-result-text {
    font-size: 15px;
    font-weight: 500;
    color: #999;
    margin-bottom: 12px;
    text-align: center;
    letter-spacing: 0.5px;
}

.scratch-result-amount {
    font-size: 42px;
    font-weight: 700;
    color: #333;
    letter-spacing: -1px;
    transition: color 0.3s ease;
}

/* 购买按钮 */
.scratch-buy-btn {
    width: 100%;
    padding: 18px;
    background: var(--ins-pink);
    color: #ffffff;
    border: none;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(255, 182, 193, 0.3);
}

.scratch-buy-btn:active {
    transform: scale(0.98);
}

.scratch-buy-btn:disabled {
    background: #e0e0e0;
    color: #999;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.6;
}

/* 中奖记录区域 */
.scratch-history-section {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* 钱包详情页样式 */
.wallet-nav {
    height: 88px; /* 与微信页面顶栏一致 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 44px; /* 避让状态栏 */
    padding-left: 16px;
    padding-right: 16px;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 10;
    box-sizing: border-box;
}

/* 覆盖一下 wallet-nav 里的 back-btn */
.wallet-nav .back-btn {
    position: static;
    background: transparent;
    width: 40px;
    height: 40px;
    border-radius: 0;
    color: #333;
    justify-content: flex-start;
}

.list-group {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin: 12px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.list-item {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    position: relative;
    cursor: pointer;
}

.list-item:active { background-color: #fcfcfc; }

.list-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 60px;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: #f7f7f7;
}

.item-icon-box {
    width: 28px;
    height: 28px;
    background: #fff0f3; /* 粉色图标块 */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
}

.item-icon-svg {
    width: 16px;
    height: 16px;
    stroke: #555;
    stroke-width: 1.8;
    fill: none;
}

.item-tag {
    font-size: 12px;
    color: #c5a47e; /* 奶咖金 */
    margin-left: 8px;
}

.item-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* =================
   页面切换动画优化
   ================= */

/* 子页面容器 - 用于从右侧滑入的页面 */
.sub-page-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    z-index: 160; /* 比普通 service-main-page (150) 高 */
    display: none; /* 初始隐藏 */
    flex-direction: column;
    transform: translateX(100%); /* 初始在右侧屏幕外 */
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1); /* iOS 风格平滑曲线 */
    box-shadow: -5px 0 15px rgba(0,0,0,0.05); /* 左侧阴影，增加层次感 */
}

/* 激活状态 - 滑入屏幕 */
.sub-page-container.active {
    transform: translateX(0);
}

/* 优化 Service Page 的进入动画，使其也从右侧滑入 (类似微信原生体验) */
#service-main-page,
#fp-service-page {
    /* 覆盖 .wechat-page 的默认动画 */
    animation: none;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: none; /* JS 控制 display flex/none */
}
#service-main-page.slide-in,
#fp-service-page.slide-in {
    transform: translateX(0);
}

/* =================
   零钱页面样式 (Ins风)
   ================= */

/* 复用 sub-page-container 实现滑入效果 */

.balance-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0 40px;
    background: #ffffff;
}

.balance-icon-large {
    width: 64px;
    height: 64px;
    fill: #FFF7FA; /* 和生成余额按钮一样的浅粉 */
    stroke: #f0e8ea;
    stroke-width: 1;
    margin-bottom: 24px;
}

.balance-label {
    font-size: 14px;
    color: #999;
    margin-bottom: 12px;
}

.balance-amount {
    font-size: 48px;
    font-weight: 600;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
}

.balance-action-area {
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 40px;
}

.balance-btn {
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s;
    border: none;
}

.btn-recharge {
    background: var(--ins-pink);
    color: #ffffff;
}

.btn-withdraw {
    background: #f7f7f7;
    color: #333;
}

.btn-generate {
    background: #FFF7FA; /* 与桌面图标一致的浅粉 */
    color: #666; /* 深灰色字体 */
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.balance-footer-link {
    position: absolute;
    bottom: 40px;
    width: 100%;
    text-align: center;
    font-size: 13px;
    color: #b0b0b0;
}

/* =================
   修正零钱页面样式 (UI优化版)
   ================= */

/* 覆盖之前的 .balance-header */
.balance-header {
    background: transparent; /* 去掉纯白背景，透出 service-sub-page 的渐变 */
    padding: 40px 0 20px;
}

/* 金额显示优化 */
.balance-amount {
    font-size: 40px;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
}

/* 操作区域样式优化 - 使用白色卡片风格，与 Service 页一致 */
.balance-action-area {
    margin: 0 16px;
    padding: 24px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(255, 192, 203, 0.15); /* 与服务页一致的粉色阴影 */
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.balance-btn {
    border-radius: 14px; /* 圆角加大 */
    padding: 14px;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.btn-recharge {
    background: #FFF7FA;
    color: #333;
    border: 1px solid #f0e8ea;
}

.btn-withdraw {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    color: #333;
}

/* 生成按钮优化 */
.btn-generate {
    background: #FFF7FA; /* 与桌面图标一致的浅粉 */
    color: #666; /* 深灰色字体 */
    border: 1px solid #ffe4e8;
    font-weight: 500;
}
.btn-generate:active {
    transform: scale(0.98);
    background: #fff0f3;
}

/* 底部链接颜色调整 */
.balance-footer-link {
    color: #c5a47e; /* 奶咖金，与 Service 页 tag 颜色呼应 */
    opacity: 0.6;
}

/* =================
   转账相关样式 (Ins 风)
   ================= */

/* 1. 聊天面板图标 - 仿照其他图标 */
.action-icon-box.transfer-icon {
    color: var(--ins-pink);
    background: #fff0f5; /* 浅粉底色 */
}

/* 2. 转账卡片样式 (聊天气泡内) */
.transfer-card {
    width: 220px;
    border-radius: 12px;
    padding: 14px 16px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(0,0,0,0.03); 
    display: flex;
    flex-direction: column;
    margin: 0; /* 确保无额外外边距 */
}

/* 对方发来的（纯白风格） */
.message-row.other .transfer-card {
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* 我发出的（极浅粉风格） */
.message-row.self .transfer-card {
    background: linear-gradient(135deg, #fff0f3 0%, #ffffff 100%);
    box-shadow: 0 2px 8px rgba(255, 192, 203, 0.1);
}

/* 转账消息减小头像与卡片的间距 */
.message-row .message-content:has(.transfer-card) {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.t-amount {
    font-size: 22px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.t-desc {
    font-size: 13px;
    color: #999;
    margin-bottom: 12px;
}

.t-line {
    height: 1px;
    background-color: rgba(0,0,0,0.04);
    width: 100%;
    margin-bottom: 8px;
}

.t-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.t-footer-text {
    font-size: 11px;
    color: #b0b0b0;
}

/* 粉色点缀 (状态点) */
.t-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ffb7c5; 
}
/* 已收款状态 */
.transfer-card.done .t-dot {
    background-color: #c0c0c0;
}
.transfer-card.done .t-amount {
    color: #999;
}

/* 3. 转账输入弹窗 (全屏或模态) */
.transfer-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #f2f2f7; /* iOS 背景灰 */
    z-index: 300;
    display: none;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

.transfer-page-header {
    background: #fff;
    padding: 50px 20px 15px;
    display: flex;
    align-items: center;
}

.transfer-page-title {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
}

.transfer-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.transfer-avatar {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: #ddd;
    margin-bottom: 10px;
    background-size: cover;
    background-position: center;
}

.transfer-target-name {
    font-size: 16px;
    color: #333;
    margin-bottom: 30px;
}

.transfer-input-box {
    background: #fff;
    width: 100%;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.t-input-label {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.t-input-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

.t-currency {
    font-size: 30px;
    font-weight: 600;
    color: #333;
    margin-right: 10px;
}

.t-input {
    flex: 1;
    border: none;
    font-size: 40px;
    font-weight: 600;
    outline: none;
    color: #333;
    background: transparent;
    height: 50px;
}

.t-note-input {
    border: none;
    outline: none;
    font-size: 14px;
    color: #666;
    background: transparent;
    width: 100%;
}

.t-btn-confirm {
    margin-top: 40px;
    width: 100%;
    background: var(--ins-pink); /* 之前定义的 #ffb6c1 */
    color: #fff;
    padding: 14px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}
.t-btn-confirm:disabled {
    background: #f0f0f0; /* 极浅灰 */
    color: #ccc; /* 灰色字 */
}

/* =================
   位置功能样式 - INS白色简约风
   ================= */

/* 位置输入弹窗遮罩 */
.location-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 999;
    display: none;
    justify-content: center;
    align-items: center;
}

/* 弹窗主体 */
.location-popup {
    background: #fff;
    width: 280px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.location-popup-header {
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}

.location-close-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #999;
    cursor: pointer;
}

.location-popup-body {
    padding: 16px 20px;
}

.location-popup-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #eee;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    outline: none;
    margin-bottom: 12px;
    transition: border-color 0.2s;
}

.location-popup-input:last-child {
    margin-bottom: 0;
}

.location-popup-input:focus {
    border-color: #333;
}

.location-popup-input::placeholder {
    color: #bbb;
}

.location-popup-footer {
    display: flex;
    border-top: 1px solid #f0f0f0;
}

.location-popup-btn {
    flex: 1;
    padding: 14px;
    border: none;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.location-popup-btn.cancel {
    background: #fff;
    color: #666;
    border-right: 1px solid #f0f0f0;
}

.location-popup-btn.confirm {
    background: #fff;
    color: #333;
    font-weight: 600;
}

.location-popup-btn:active {
    background: #f5f5f5;
}

/* 位置卡片样式 - 微信风格 */
.message-content:has(.location-card) {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: normal !important;
    max-width: none !important;
}

.location-card {
    width: 200px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8e8e8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.location-card:active {
    opacity: 0.9;
}

/* 上半部分：文字区 */
.location-card-text {
    padding: 10px 12px;
    background: #fff;
}

.location-card-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    line-height: 1.3;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-card-sub {
    font-size: 11px;
    color: #999;
}

/* 下半部分：地图区 */
.location-card-map {
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #e3f2e1 0%, #f0faf0 100%);
    border-top: 1px solid #e8e8e8;
}

.location-card-pin {
    display: flex;
    align-items: center;
    justify-content: center;
}

.location-card-pin svg {
    width: 28px;
    height: 28px;
    fill: #4CAF50;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
}

/* 收款确认弹窗 (Card 中间小弹窗) */
.confirm-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(4px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}
.confirm-box {
    background: #fff;
    width: 280px;
    padding: 24px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* =================
   账单页面样式
   ================= */
.bill-filter-btn {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    color: #666;
    background: #f5f5f5;
    cursor: pointer;
    transition: all 0.2s;
}
.bill-filter-btn.active {
    background: #07c160;
    color: #fff;
}
.bill-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.bill-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}
.bill-icon.income {
    background: #e8f5e9;
    color: #4caf50;
}
.bill-icon.expense {
    background: #ffebee;
    color: #f44336;
}
.bill-info {
    flex: 1;
    min-width: 0;
}
.bill-title {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}
.bill-desc {
    font-size: 12px;
    color: #999;
}
.bill-amount {
    font-size: 17px;
    font-weight: 600;
    text-align: right;
}
.bill-amount.income {
    color: #4caf50;
}
.bill-amount.expense {
    color: #333;
}

/* =================
   亲属卡页面样式
   ================= */
.family-card-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 12px;
}
.family-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin-right: 12px;
    flex-shrink: 0;
}
.family-card-info {
    flex: 1;
    min-width: 0;
}
.family-card-name {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}
.family-card-detail {
    font-size: 12px;
    color: #999;
}
.family-card-actions {
    display: flex;
    gap: 8px;
}
.family-card-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    border: none;
}
.family-card-btn.view {
    background: #FFF7FA;
    color: #333;
    border: 1px solid #f0e8ea;
}
.family-card-btn.cancel {
    background: #f5f5f5;
    color: #999;
}
.family-card-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: #FFF7FA;
    border: 2px dashed #f0e8ea;
    border-radius: 12px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.family-card-add:hover {
    background: #fff0f3;
}
.family-card-friend-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}
.family-card-friend-item:hover {
    background: #f5f5f5;
}
.family-card-friend-item.selected {
    background: var(--ins-pink-light);
}
.family-card-friend-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin-right: 12px;
}
.family-card-friend-name {
    flex: 1;
    font-size: 14px;
    color: #333;
}
.family-card-friend-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
}
.family-card-friend-item.selected .family-card-friend-check {
    background: var(--ins-pink);
    border-color: var(--ins-pink);
}
.family-card-record-item {
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.family-card-record-item:last-child {
    border-bottom: none;
}
.family-card-record-title {
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}
.family-card-record-time {
    font-size: 12px;
    color: #999;
}
.family-card-record-amount {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    float: right;
    margin-top: -20px;
}

/* 亲属卡消息卡片样式 - 跟转账卡片风格统一 */
.family-card-msg {
    width: 220px;
    border-radius: 12px;
    padding: 14px 16px;
    position: relative;
    border: 1px solid rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    margin: 0;
}
.message-row.self .family-card-msg {
    background: linear-gradient(135deg, #fffafa 0%, #ffffff 100%);
    box-shadow: 0 2px 8px rgba(255, 192, 203, 0.08);
}
.family-card-msg-title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin-bottom: 2px;
    letter-spacing: -0.5px;
}
.family-card-msg-desc {
    font-size: 11px;
    color: #999;
    margin-bottom: 6px;
}
.family-card-msg-line {
    height: 1px;
    background-color: rgba(0,0,0,0.04);
    width: 100%;
    margin-bottom: 4px;
}
.family-card-msg-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.family-card-msg-status {
    font-size: 10px;
    color: #b0b0b0;
}
.family-card-msg-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ffb6c1;
}

/* =================
   购物卡片样式 (白色简约INS风)
   ================= */
/* ====== 购物卡片 — 紧凑自适应 ====== */
.spr-card {
    width: 220px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    white-space: normal;
    word-break: break-all;
}
.message-row .message-content:has(.spr-card) {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: normal !important;
    max-width: 230px !important;
}
.spr-top { padding: 10px 14px 0; }
.spr-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: #666;
    letter-spacing: 0.5px;
    background: #f5f5f5;
    padding: 2px 8px;
    border-radius: 10px;
}
.spr-body { padding: 6px 14px 6px; }
.spr-amount-row {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-bottom: 2px;
}
.spr-currency { font-size: 14px; font-weight: 400; color: #222; }
.spr-amount-num { font-size: 22px; font-weight: 300; color: #222; letter-spacing: -0.5px; line-height: 1; }
.spr-items-text {
    font-size: 11px;
    color: #aaa;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}
.spr-meta {
    font-size: 10px;
    color: #bbb;
    line-height: 1.4;
    margin-top: 2px;
}
.spr-divider { height: 1px; background: #f0f0f0; margin: 0 14px; }
.spr-bottom { padding: 6px 14px 8px; display: flex; justify-content: flex-end; align-items: center; }
.spr-status-text { font-size: 10px; font-weight: 500; color: #bbb; letter-spacing: 0.3px; }
/* 变体 */
.spr-card.gift .spr-badge { background: #fafafa; color: #555; }
.spr-card.gift .spr-status-text { color: #aaa; }
.spr-card.share .spr-badge { background: #fafafa; color: #555; }
.spr-card.done { opacity: 0.65; }
.spr-card.done .spr-status-text { color: #ccc; }
.spr-card.declined .spr-amount-num { text-decoration: line-through; color: #ccc; }
.spr-card.declined .spr-status-text { color: #e0e0e0; }

/* =================
   修正转账图标样式 (黑灰色)
   ================= */
.action-icon-box.transfer-icon {
    color: var(--ins-gray); /* 恢复默认的深灰色 */
    background: #fff; /* 恢复默认白底 */
}

/* =================
   信息页面样式 (iOS iMessage 风格)
   ================= */

/* 基础设置 */
:root {
    --ios-blue: #007AFF;
    --ios-gray-bg: #F2F2F7;
    --ios-bubble-receive: #E9E9EB;
    --ios-text-gray: #8E8E93;
    --ios-border: #C6C6C8;
}

/* 信息页面容器 */
.message-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #ffffff; /* 🔧 从 #000 改为白色，防止页面过渡时露出黑色/桌面 */
    z-index: 200;
    display: none;
}

.message-page.active {
    display: flex;
}

/* 页面转场通用 */
.message-page-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: none;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

#message-list-page {
    display: flex;
}

/* 从底部弹出的动画 (模态视图) */
.message-page-content.message-modal {
    transform: translateY(100%);
    z-index: 50;
}

.message-page-content.message-modal.active {
    transform: translateY(0);
}

/* 从右侧推入的动画 (导航视图) */
.message-page-content.message-nav {
    transform: translateX(100%);
    z-index: 20;
    display: none;
}

.message-page-content.message-nav.active {
    transform: translateX(0);
    display: flex;
}

.message-scroll-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
    min-height: 0; /* 🔧 flex子元素需要min-height:0才能正确收缩 */
}

.message-scroll-content::-webkit-scrollbar {
    display: none;
}

/* Header 通用 */
.message-header {
    height: 88px;
    padding: 44px 16px 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    border-bottom: 0.5px solid rgba(0,0,0,0.1);
}

/* 列表页 */
#message-list-page {
    z-index: 10;
}

.message-header-top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: var(--ios-blue);
    font-size: 17px;
}

.message-page-title-area {
    padding: 100px 20px 10px 20px;
}

.message-page-title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 10px;
}

.message-search-bar {
    background: #E3E3E8;
    border-radius: 10px;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: var(--ios-text-gray);
}

.message-chat-list {
    padding-left: 20px;
}

.message-chat-item {
    display: flex;
    align-items: center;
    padding: 10px 15px 10px 0;
    border-bottom: 0.5px solid #C6C6C8;
    cursor: pointer;
    position: relative;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.message-chat-item:active {
    background-color: #F2F2F7;
    margin-left: -20px;
    padding-left: 20px;
}

.message-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
    overflow: hidden;
    background: #ddd;
    position: relative;
}

/* CSS绘制的默认头像 */
.message-avatar.default-avatar {
    background: #a0a0a0;
}
.message-avatar.default-avatar::before {
    content: '';
    position: absolute;
    width: 36%;
    height: 36%;
    background: #e8e8e8;
    border-radius: 50%;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
}
.message-avatar.default-avatar::after {
    content: '';
    position: absolute;
    width: 64%;
    height: 50%;
    background: #e8e8e8;
    border-radius: 50% 50% 0 0;
    bottom: -10%;
    left: 50%;
    transform: translateX(-50%);
}
.message-avatar.default-avatar img {
    display: none;
}

.message-chat-info {
    flex: 1;
    min-width: 0;
}

.message-chat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.message-chat-name {
    font-weight: 600;
    font-size: 17px;
}

.message-chat-time {
    font-size: 15px;
    color: var(--ios-text-gray);
    display: flex;
    align-items: center;
    gap: 4px;
}

.message-chat-bottom {
    display: flex;
    align-items: center;
    gap: 4px;
}

.message-chat-preview {
    color: var(--ios-text-gray);
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
}

.message-unread .message-chat-name {
    font-weight: 700;
}

.message-unread .message-chat-preview {
    color: #000;
    font-weight: 500;
}

.message-unread-dot {
    width: 10px;
    height: 10px;
    background: var(--ios-blue);
    border-radius: 50%;
    margin-left: 5px;
}

/* 详情页 & 新建页 通用 */
.message-container {
    flex: 1;
    padding: 100px 15px 60px 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.message-ts-group {
    text-align: center;
    margin: 15px 0 25px 0;
}

.message-ts-label {
    color: var(--ios-text-gray);
    font-size: 11px;
    font-weight: 500;
    display: block;
    margin-bottom: 2px;
}

.message-ts-time {
    color: var(--ios-text-gray);
    font-size: 11px;
    font-weight: 400;
    display: block;
}

.message-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.message-bubble {
    max-width: 75%;
    padding: 8px 14px;
    font-size: 17px;
    line-height: 1.35;
    position: relative;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.message-received {
    align-self: flex-start;
    background-color: var(--ios-bubble-receive);
    color: #000;
    border-radius: 18px;
    border-bottom-left-radius: 4px;
}

.message-sent {
    align-self: flex-end;
    background-color: var(--ios-blue);
    color: white;
    border-radius: 18px;
    border-bottom-right-radius: 4px;
}

.message-delivery-text {
    align-self: flex-end;
    font-size: 11px;
    color: var(--ios-text-gray);
    margin-right: 2px;
    margin-top: 2px;
    font-weight: 500;
    opacity: 0;
    animation: messageFadeIn 0.3s forwards;
}

@keyframes messageFadeIn {
    to {
        opacity: 1;
    }
}

/* 详情页独有 Header */
.message-back-btn {
    display: flex;
    align-items: center;
    color: var(--ios-blue);
    cursor: pointer;
    z-index: 200;
    font-size: 17px;
}

.message-chat-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: absolute;
    left: 0;
    pointer-events: none;
}

.message-header-avatar-small {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 2px;
    background: #ccc;
    position: relative;
}

/* 详情页CSS默认头像 */
.message-header-avatar-small.default-avatar {
    background: #a0a0a0;
}
.message-header-avatar-small.default-avatar::before {
    content: '';
    position: absolute;
    width: 36%;
    height: 36%;
    background: #e8e8e8;
    border-radius: 50%;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
}
.message-header-avatar-small.default-avatar::after {
    content: '';
    position: absolute;
    width: 64%;
    height: 50%;
    background: #e8e8e8;
    border-radius: 50% 50% 0 0;
    bottom: -10%;
    left: 50%;
    transform: translateX(-50%);
}

/* ==================== 消息长按操作菜单 ==================== */
.message-action-menu {
    position: fixed;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 8px;
    display: flex;
    gap: 8px;
    z-index: 10000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: messageMenuFadeIn 0.2s ease-out;
}

@keyframes messageMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-5px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.message-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    color: #fff;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    min-width: 60px;
}

.message-action-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

.message-action-item:active {
    background: rgba(255, 255, 255, 0.25);
}

.message-action-item svg {
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.message-action-item span {
    font-size: 12px;
    font-weight: 500;
}

/* ==================== 消息多选模式 ==================== */
.message-wrapper.multi-select-mode {
    position: relative;
    padding-left: 50px;
    transition: padding 0.2s;
}

.message-wrapper.multi-select-mode::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 2px solid #d0d0d0;
    border-radius: 50%;
    background: #fff;
    transition: all 0.2s;
}

.message-wrapper.multi-select-mode.selected::before {
    background: #07c160;
    border-color: #07c160;
}

.message-wrapper.multi-select-mode.selected::after {
    content: '✓';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.message-bubble.selected {
    opacity: 0.7;
    transform: scale(0.98);
}

.message-bubble {
    cursor: pointer;
    transition: transform 0.1s, opacity 0.1s;
}

.message-wrapper.multi-select-mode .message-bubble {
    cursor: pointer;
}

/* ==================== 多选工具栏 ==================== */
.message-multi-select-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e8e8e8;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.multi-select-toolbar-left,
.multi-select-toolbar-right {
    flex: 1;
}

.multi-select-toolbar-center {
    flex: 1;
    text-align: center;
}

.multi-select-count {
    font-size: 15px;
    color: #333;
    font-weight: 500;
}

.multi-select-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.multi-select-btn.cancel-btn {
    background: #f5f5f5;
    color: #333;
}

.multi-select-btn.cancel-btn:active {
    background: #e8e8e8;
}

.multi-select-btn.delete-btn {
    background: #ff3b30;
    color: #fff;
    float: right;
}

.multi-select-btn.delete-btn:disabled {
    background: #d0d0d0;
    color: #999;
    cursor: not-allowed;
}

.multi-select-btn.delete-btn:not(:disabled):active {
    background: #d70015;
}

/* 多选模式下调整输入框位置 */
#message-detail-page:has(.message-multi-select-toolbar) .message-input-area {
    bottom: 60px;
}

/* ==================== 提示Toast ==================== */
.message-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 15px;
    z-index: 10001;
    display: none;
    animation: toastFadeIn 0.2s ease-out;
}

@keyframes toastFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
.message-header-avatar-small.default-avatar img {
    display: none;
}

.message-header-name {
    font-size: 12px;
    color: #000;
    font-weight: 500;
}

.message-header-actions {
    position: absolute;
    right: 15px;
    color: var(--ios-blue);
    z-index: 200;
}

/* 新建页独有 (Compose Page) */
#message-compose-page .message-scroll-content {
    padding-top: 88px;
    background: #f2f2f7;
}

/* 联系人选择列表项 */
.compose-contact-item {
    display: flex;
    align-items: center;
    padding: 6px 16px;
    background: #fff;
    cursor: pointer;
    transition: background 0.15s;
}
.compose-contact-item:active {
    background: #f0f0f0;
}

/* 收件人栏 */
.message-recipient-bar {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 0.5px solid #C6C6C8;
    position: relative;
    z-index: 5;
}

.message-label-to {
    color: var(--ios-text-gray);
    font-size: 17px;
    margin-right: 10px;
}

.message-input-to {
    flex: 1;
    border: none;
    outline: none;
    font-size: 17px;
    color: #000;
}

.message-btn-add-contact {
    color: var(--ios-blue);
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 新建页 Header 样式 */
.message-center-title {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    font-weight: 600;
    font-size: 17px;
    pointer-events: none;
}

.message-right-action {
    position: absolute;
    right: 16px;
    color: var(--ios-blue);
    font-size: 17px;
    cursor: pointer;
}

/* 底部输入区域 (复用) */
.message-input-area {
    /* 🔧 iOS键盘修复：从 position:absolute 改为 flex 子元素，与 WeChat 的 chat-footer 一致
       这样键盘弹起时，父容器高度缩小后输入框自然跟着上移 */
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px 10px 10px 10px;
    border-top: 0.5px solid rgba(0,0,0,0.1);
    display: flex;
    align-items: flex-end;
    z-index: 101;
    flex-shrink: 0; /* 键盘弹起时底栏不被压缩 */
    transition: padding-bottom 0.15s ease;
}

/* 🔧 仅 PWA 独立模式下添加安全区域 padding（与 .chat-footer 同理） */
body.standalone-mode .message-input-area {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

/* 🔧 键盘弹起时去掉安全区域 padding（与 WeChat 的 .keyboard-up .chat-footer 一致） */
.keyboard-up .message-input-area {
    padding-bottom: 0 !important;
}

/* 🔧 iOS PWA 模式下键盘上方的操作栏遮挡修复 */
body.standalone-mode .keyboard-up .message-input-area {
    padding-bottom: calc(env(safe-area-inset-bottom) + 10px) !important;
}

.message-input-plus {
    color: var(--ios-text-gray);
    margin-bottom: 2px;
    margin-right: 10px;
    cursor: pointer;
    margin-top: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.message-input-wrapper {
    flex: 1;
    min-height: 36px;
    border-radius: 18px;
    border: 1px solid #C6C6C8;
    padding: 2px 4px 2px 14px;
    display: flex;
    align-items: center;
    background: #fff;
    transition: all 0.2s;
}

.message-input-field {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 17px;
    padding: 5px 0;
    height: 32px;
}

.message-input-action-btn {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 4px;
    cursor: pointer;
}

.message-mic-icon {
    color: var(--ios-text-gray);
}

.message-send-btn {
    background-color: var(--ios-blue);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: none;
    justify-content: center;
    align-items: center;
    color: white;
}

.message-send-btn:active {
    transform: scale(0.9);
}

.message-icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 底部 Home Indicator (iPhone 横线) */
.message-home-indicator {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 134px;
    height: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    cursor: pointer;
    z-index: 200;
    transition: background 0.2s;
}

.message-home-indicator:active {
    background: rgba(0, 0, 0, 0.5);
}

/* 适配安全区域 - 仅 PWA 独立模式 */
body.standalone-mode .message-home-indicator {
    bottom: calc(8px + env(safe-area-inset-bottom));
}

/* 短信编辑模式样式 */
.message-chat-list.edit-mode .message-chat-item {
    padding-left: 50px;
    position: relative;
}

.message-chat-checkbox {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 2px solid #c6c6c8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.message-chat-checkbox.checked {
    background: var(--ios-blue);
    border-color: var(--ios-blue);
    color: #fff;
}

.message-chat-item.message-chat-selected {
    background: rgba(0, 122, 255, 0.1);
}

.message-delete-btn {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: #ff3b30;
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin: 0 16px 12px;
}

#message-edit-actions {
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

/* =================
   朋友圈样式 (INS白色极简风)
   ================= */

/* 沉浸式顶部栏 */
.moments-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88px;
    z-index: 200;
    display: flex;
    align-items: flex-end;
    padding: 0 16px 12px;
    transition: background 0.3s ease;
}
.moments-nav-bar.scrolled {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.moments-nav-bar.scrolled .back-btn {
    background: transparent;
    color: #333;
    backdrop-filter: none;
}
.moments-nav-bar.scrolled .moments-nav-title {
    opacity: 1 !important;
}
.moments-nav-bar.scrolled .moments-camera-btn svg {
    stroke: #333;
}

.moments-nav-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15px;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #333;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.moments-camera-btn {
    margin-left: auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 201;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* 封面区域 */
.moments-cover-area {
    width: 100%;
    height: 320px;
    background-color: #eee;
    background-size: cover;
    background-position: center;
    position: relative;
    cursor: pointer;
    margin-bottom: 60px; /* 给头像留空间 */
}
.moments-user-info {
    position: absolute;
    right: 20px;
    bottom: -40px; /* 悬挂效果 */
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.moments-user-name {
    margin-top: 16px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.moments-user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background-color: #fff;
    background-size: cover;
    background-position: center;
}

/* 置顶区域样式 - 仿真实微信 */
.moments-pinned-section {
    display: none;
    background: #fff;
    padding: 16px 0;
    border-bottom: 1px solid #e5e5e5;
    align-items: stretch;
}
.moments-pinned-section.show {
    display: flex;
}
.moments-pinned-label {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    padding: 0 16px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    writing-mode: horizontal-tb;
}
.moments-pinned-scroll {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}
.moments-pinned-list {
    display: flex;
    gap: 6px;
    overflow: hidden;
}
.moments-pinned-arrow {
    font-size: 28px;
    color: #ccc;
    font-weight: 300;
    padding: 0 12px;
    cursor: pointer;
    flex-shrink: 0;
}
/* 置顶卡片样式 */
.pinned-moment-card {
    width: 105px;
    height: 105px;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    background-color: #f5f5f5;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pinned-moment-text {
    font-size: 13px;
    color: #999;
    line-height: 1.4;
    text-align: center;
    padding: 8px;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 列表容器 */
.moments-list {
    padding-bottom: 40px;
    background: #fff;
}

/* 单条动态 */
.moment-item {
    display: flex;
    gap: 12px;
    padding: 20px 16px;
    border-bottom: 1px solid #f9f9f9;
}
.moment-avatar {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background-color: #f2f2f7;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.moment-content {
    flex: 1;
    min-width: 0; /* 防止文字撑开 */
}
.moment-name {
    font-size: 16px;
    font-weight: 600;
    color: #3b5998; /* 经典深蓝，或用 #333 保持 INS 极简黑 */
    margin-bottom: 6px;
}
.moment-text {
    font-size: 15px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 10px;
    white-space: pre-wrap;
}

/* 图片网格 - INS 风格 */
.moment-grid {
    display: grid;
    gap: 4px;
    max-width: 280px; /* 限制最大宽度 */
    margin-top: 8px;
}
/* 1张图：大图模式 */
.moment-grid.cols-1 {
    grid-template-columns: 1fr;
}
.moment-grid.cols-1 .moment-img {
    width: 200px; /* 限制单图最大宽度 */
    height: 200px;
    max-height: 280px;
}
/* 4张图：2x2 */
.moment-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
    width: 200px;
}
/* 9张图：3x3 */
.moment-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.moment-img {
    width: 100%;
    aspect-ratio: 1; /* 正方形 */
    background-color: #f2f2f7;
    background-size: cover;
    background-position: center;
    cursor: zoom-in;
    min-height: 80px;
}

/* 朋友圈图片九宫格样式 */
.moment-image-grid {
    display: grid;
    gap: 4px;
    margin-top: 8px;
    max-width: 280px;
}
.moment-image-grid.grid-1 {
    grid-template-columns: 1fr;
    max-width: 180px;
}
.moment-image-grid.grid-2 {
    grid-template-columns: 1fr 1fr;
    max-width: 200px;
}
.moment-image-grid.grid-3,
.moment-image-grid.grid-6,
.moment-image-grid.grid-9 {
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 280px;
}
.moment-image-grid.grid-4 {
    grid-template-columns: 1fr 1fr;
    max-width: 200px;
}
.moment-image-grid.grid-5 {
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 280px;
}
.moment-image-grid.grid-7,
.moment-image-grid.grid-8 {
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 280px;
}

/* 单个图片占位方块 */
.moment-img-placeholder {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 正方形 */
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.moment-img-placeholder:active {
    transform: scale(0.96);
}
.moment-img-placeholder-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.moment-img-placeholder-inner svg {
    width: 28px;
    height: 28px;
    stroke: #bbb;
    stroke-width: 1.5;
    fill: none;
}
.moment-img-placeholder-hint {
    font-size: 10px;
    color: #bbb;
}

/* 点击展开后的图片描述浮层 */
.moment-img-desc-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.75);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}
.moment-img-desc-content {
    background: #fff;
    border-radius: 12px;
    padding: 24px 20px;
    max-width: 320px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.moment-img-desc-content svg {
    width: 36px;
    height: 36px;
    stroke: #bbb;
    stroke-width: 1.5;
    fill: none;
    margin-bottom: 12px;
}
.moment-img-desc-content p {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin: 0;
}
.moment-img-desc-content .close-hint {
    font-size: 12px;
    color: #aaa;
    margin-top: 16px;
}

/* 底部信息栏 */
.moment-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    height: 24px;
    position: relative; /* 相对定位，用于放置弹出菜单 */
}
.moment-time {
    font-size: 12px;
    color: #999;
}
.moment-delete {
    font-size: 12px;
    color: #576b95;
    margin-left: 10px;
    cursor: pointer;
}

/* 交互按钮 (两点图标) */
.moment-action-area {
    position: relative;
    display: flex;
    align-items: center;
}
.moment-action-btn {
    width: 32px;
    height: 24px;
    background: #f7f7f7;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    color: #576b95;
    z-index: 10; /* 确保在菜单之上 */
}
.moment-action-dot {
    width: 4px;
    height: 4px;
    background-color: #576b95;
    border-radius: 50%;
}

/* 评论点赞区 */
.moment-interactions {
    background: #f9f9f9;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
    display: none; /* 默认隐藏，有内容时显示 */
}
.moment-likes {
    padding: 6px 10px;
    color: #576b95;
    border-bottom: 1px solid #f0f0f0;
    display: none; /* 有点赞时显示 flex */
    align-items: center;
    flex-wrap: wrap;
}
.moment-likes svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #576b95;
    margin-right: 4px;
    stroke-width: 1.5;
}
.moment-comments {
    padding: 6px 10px;
    display: none;
}
.comment-item {
    margin-bottom: 2px;
    padding: 3px 0;
    border-radius: 3px;
    transition: background 0.15s;
}
.comment-item[onclick]:hover {
    background: rgba(0,0,0,0.05);
}
.comment-item[onclick]:active {
    background: rgba(0,0,0,0.1);
}
.comment-user {
    color: #576b95;
    font-weight: 500;
}
.comment-content {
    color: #333;
}

/* 点赞评论弹出菜单 (仿微信，左侧滑出) */
.moment-popup-menu {
    position: absolute;
    right: 40px; /* 在按钮左侧 */
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 5px;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    pointer-events: none;
}
.moment-popup-menu.show {
    opacity: 1;
    width: 210px; /* 展开宽度（3个菜单项：赞、评论、删除） */
    pointer-events: auto;
}
.moment-menu-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    padding: 0 10px;
}
.moment-menu-item svg {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}
.moment-menu-divider {
    width: 1px;
    height: 16px;
    background-color: #eee;
}

/* 发布页面样式 */
.moments-pub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 20px;
}
.moments-pub-img {
    width: 100%;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    position: relative;
}
.moments-pub-img-del {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.moments-add-btn {
    width: 100%;
    aspect-ratio: 1;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
}

/* 朋友圈权限选择样式 */
.privacy-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
}
.privacy-option:active {
    background: #f8f8f8;
}
.privacy-option-content {
    flex: 1;
}
.privacy-option-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 4px;
}
.privacy-option-desc {
    font-size: 12px;
    color: #999;
}
.privacy-option-check {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #07c160;
    font-size: 18px;
    font-weight: bold;
}

/* 好友选择列表样式 */
.friend-select-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
}
.friend-select-item:active {
    background: #f8f8f8;
}
.friend-select-checkbox {
    width: 22px;
    height: 22px;
    border: 2px solid #ddd;
    border-radius: 50%;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}
.friend-select-checkbox.checked {
    background: #07c160;
    border-color: #07c160;
    color: #fff;
}
.friend-select-avatar {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-color: #f5f5f5;
    margin-right: 12px;
    flex-shrink: 0;
}
.friend-select-name {
    font-size: 16px;
    color: #333;
}

/* =================
   电话页面样式 (iPhone 风格)
   ================= */
.phone-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    z-index: 150;
    display: flex;
    flex-direction: column;
    animation: appLaunch 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.phone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    padding-top: 44px; /* 往下移动，避让状态栏 */
    min-height: 88px; /* 和微信页面高度一致 */
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 10;
    box-sizing: border-box;
}

.phone-back-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ins-pink);
    cursor: pointer;
}

.phone-title {
    font-size: 17px;
    font-weight: 600;
    color: #000;
}

.phone-search-bar {
    display: flex;
    align-items: center;
    background: #f2f2f7;
    border-radius: 10px;
    padding: 8px 12px;
    margin: 8px 16px;
    gap: 8px;
}

.phone-search-icon {
    width: 16px;
    height: 16px;
    color: #999;
}

.phone-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    outline: none;
    color: #000;
}

.phone-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.phone-tab-bar {
    display: flex;
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 8px 0;
    width: 100%;
    overflow: hidden;
}

.phone-tab-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    cursor: pointer;
    color: #8e8e93;
    transition: color 0.2s;
}

.phone-tab-item.active {
    color: var(--ins-pink);
}

.phone-tab-icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.phone-tab-item span {
    font-size: 11px;
    font-weight: 500;
}

.phone-tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
}

.phone-tab-content.active {
    display: block;
}

.phone-list {
    padding: 0;
}

.phone-list-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    cursor: pointer;
    transition: background 0.2s;
}

.phone-list-item:active {
    background: #f2f2f7;
}

.phone-list-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ins-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    margin-right: 12px;
}

.phone-list-info {
    flex: 1;
}

.phone-list-name {
    font-size: 17px;
    font-weight: 500;
    color: #000;
    margin-bottom: 2px;
}

.phone-list-subtitle {
    font-size: 15px;
    color: #8e8e93;
}

.phone-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #8e8e93;
}

.phone-empty-icon {
    width: 48px;
    height: 48px;
    color: #c7c7cc;
    margin-bottom: 16px;
}

/* 拨号键盘样式 */
.phone-keypad-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
}

.phone-number-display {
    text-align: center;
    font-size: 36px;
    font-weight: 300;
    color: #000;
    padding: 20px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 2px;
}

.phone-keypad {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    max-width: 320px;
    margin: 0 auto;
    padding: 20px 0;
}

.phone-keypad-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.phone-key {
    flex: 1;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid rgba(0,0,0,0.1);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.phone-key:active {
    background: #e5e5ea;
    transform: scale(0.95);
}

.phone-key-number {
    font-size: 32px;
    font-weight: 300;
    color: #000;
    line-height: 1;
}

.phone-key-letters {
    font-size: 11px;
    color: #8e8e93;
    margin-top: 4px;
    letter-spacing: 1px;
}

.phone-keypad-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding: 20px 0;
}

.phone-call-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #34c759;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);
}

.phone-call-btn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 4px rgba(52, 199, 89, 0.3);
}

.phone-call-icon {
    width: 32px;
    height: 32px;
    stroke: #fff;
    stroke-width: 2.5;
    fill: none;
}

.phone-delete-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #8e8e93;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.phone-delete-btn:active {
    transform: scale(0.95);
    background: #6e6e73;
}

.phone-delete-icon {
    width: 24px;
    height: 24px;
    stroke: #fff;
    stroke-width: 2.5;
    fill: none;
}

/* 被拉黑角色的电话通知样式 */
.blocked-call-notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    width: calc(100% - 32px);
    max-width: 400px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden;
}

.blocked-call-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.blocked-call-content {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 12px;
}

.blocked-call-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--ins-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 20px;
    flex-shrink: 0;
}

.blocked-call-info {
    flex: 1;
    min-width: 0;
}

.blocked-call-name {
    font-size: 17px;
    font-weight: 600;
    color: #000;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blocked-call-time {
    font-size: 14px;
    color: #8e8e93;
    margin-bottom: 2px;
}

.blocked-call-status {
    font-size: 13px;
    color: #ff3b30;
    font-weight: 500;
}

.blocked-call-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 网易云音乐页面样式 */
.music-app-page {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #ffffff;
    z-index: 20;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    overflow: hidden;
}

.music-app-page.active {
    transform: translateX(0);
}

/* 网易云音乐播放器样式 */
.wyy-app-wrapper {
    background: #ffffff;
    width: 100%;
    height: 100%;
    color: #333333;
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
}

.wyy-app-wrapper * {
    box-sizing: border-box;
}

.wyy-page {
    display: none !important;
    animation: wyyFadeIn 0.3s ease;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.wyy-page.active {
    display: block !important;
    z-index: 2;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.wyy-main-page.active {
    z-index: 1;
}
.wyy-player-page {
    z-index: 1;
}
.wyy-player-page.active {
    z-index: 3;
}
@keyframes wyyFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 播放详情页面 */
.wyy-player-page {
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    color: white;
    display: flex;
    flex-direction: column;
}
.wyy-player-header {
    padding: 0 20px 30px;
    padding-top: 88px;
    color: white;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 播放页顶栏 */
.wyy-player-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88px;
    padding-top: 44px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 16px;
    z-index: 100;
    box-sizing: border-box;
}
.wyy-player-top-bar-back {
    background: none;
    border: none;
    font-size: 20px;
    color: white;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}
.wyy-player-top-bar-title {
    font-size: 17px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}
.wyy-player-top-bar-right {
    background: none;
    border: none;
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.wyy-back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255,255,255,0.2);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: none; /* 已移到顶栏 */
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.wyy-together-listen-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255,255,255,0.2);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: none; /* 已移到顶栏 */
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s;
}
.wyy-together-listen-btn:hover {
    background: rgba(255,255,255,0.3);
}
.wyy-together-listen-btn.active {
    background: rgba(255,255,255,0.4);
    color: #ff6b6b;
}
.wyy-song-info-large {
    text-align: center;
    margin-top: 10px;
    padding: 0 20px;
    flex-shrink: 0;
}
.wyy-song-name-large {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 8px;
}
.wyy-singer-name-large {
    font-size: 16px;
    color: rgba(255,255,255,0.8);
}
.wyy-album-art-container {
    text-align: center;
    margin: auto 0;
    padding: 40px 20px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.wyy-album-art-large {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: #f5f5f5 center/cover no-repeat;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    transition: opacity 0.3s ease;
    cursor: pointer;
}
.wyy-album-art-large.hidden {
    opacity: 0;
    pointer-events: none;
}
.wyy-progress-container {
    padding: 0 30px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}
.wyy-progress-bar {
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    margin-bottom: 10px;
    position: relative;
    cursor: pointer;
}
.wyy-progress {
    height: 100%;
    background: #ffffff;
    border-radius: 2px;
    width: 0%;
}
.wyy-time-info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255,255,255,0.8);
}
.wyy-player-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 20px 0;
    padding: 0 20px 40px;
    flex-shrink: 0;
}
.wyy-album-art-container {
    transition: opacity 0.3s ease;
}
.wyy-album-art-container.hidden {
    display: none;
}
.wyy-lyrics-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    text-align: center;
    color: rgba(255,255,255,0.9);
    font-size: 16px;
    line-height: 2;
    background: transparent;
    z-index: 10;
    -webkit-overflow-scrolling: touch;
}
.wyy-lyrics-container.active {
    display: flex;
}
.wyy-lyrics-container::-webkit-scrollbar {
    width: 4px;
}
.wyy-lyrics-container::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
}
.wyy-loop-mode-single {
    color: #ff6b6b !important;
}
.wyy-control-btn-large {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wyy-play-btn-large {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    color: #333333;
    font-size: 28px;
}
.wyy-quality-tag {
    background: rgba(255,255,255,0.2);
    color: white;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
}

/* 主页面样式 */
.wyy-main-page {
    background: #ffffff;
    width: 100%;
    min-height: 100%;
    padding-bottom: 70px; /* Space for play bar */
    padding-top: 88px; /* Space for top bar */
    overflow-x: hidden;
}

/* 网易云主页面顶栏 */
.wyy-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88px;
    padding-top: 44px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 16px;
    z-index: 100;
    border-bottom: 0.5px solid rgba(0,0,0,0.1);
    box-sizing: border-box;
}
.wyy-top-bar-back {
    background: none;
    border: none;
    font-size: 20px;
    color: #333;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}
.wyy-top-bar-title {
    font-size: 17px;
    font-weight: 600;
    color: #333;
}
.wyy-top-bar-right {
    width: 36px;
    height: 36px;
}

.wyy-user-header {
    width: 100%;
    max-width: 100%;
    padding: 20px 15px 10px;
    position: relative;
    box-sizing: border-box;
    overflow-x: hidden;
}
.wyy-avatar-wrapper {
    text-align: center;
    margin: 15px 0 15px;
    position: relative;
}
.wyy-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto;
    border: 1px solid #eeeeee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    background: #f5f5f5 center/cover no-repeat;
}
.wyy-nickname {
    font-size: 17px;
    font-weight: 500;
    color: #333333;
    text-align: center;
    margin-bottom: 5px;
}
.wyy-vip-tag {
    display: inline-block;
    background: #f5f5f5;
    color: #666666;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
}
.wyy-user-stats {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin: 8px 0 15px;
    font-size: 13px;
    color: #666666;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.wyy-stat-item { 
    text-align: center;
    cursor: pointer;
    position: relative;
}
.wyy-stat-value {
    min-height: 18px;
}
.wyy-stat-label { 
    font-size: 11px; 
    margin-top: 2px; 
    color: #999999;
}
.wyy-func-tab {
    display: flex;
    background: #f5f5f5;
    border-radius: 12px;
    margin: 0 15px;
    padding: 6px;
    border: 1px solid #eeeeee;
    width: calc(100% - 30px);
    max-width: 100%;
    box-sizing: border-box;
}
.wyy-func-item {
    flex: 1;
    text-align: center;
    padding: 6px 0;
    border-radius: 8px;
    font-size: 12px;
    color: #666666;
    cursor: pointer;
    transition: all 0.3s;
}
.wyy-func-item.active {
    background: #ffffff;
    color: #333333;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}
.wyy-playlist-placeholder {
    display: flex;
    margin: 15px auto 0;
    gap: 15px;
    overflow-x: hidden;
    padding-bottom: 5px;
    justify-content: center;
    max-width: 100%;
    width: 100%;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.wyy-placeholder-card {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: #f5f5f5 center/cover no-repeat;
    border: 1px solid #eeeeee;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s;
}
.wyy-placeholder-card:hover {
    transform: scale(1.05);
}
.wyy-music-section {
    margin: 20px 15px 100px;
    width: calc(100% - 30px);
    max-width: 100%;
    box-sizing: border-box;
}
.wyy-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.wyy-section-title {
    font-size: 15px;
    font-weight: bold;
    color: #333333;
}
.wyy-music-tab-group {
    display: flex;
    gap: 8px;
    font-size: 12px;
}
.wyy-music-tab {
    padding: 4px 10px;
    border-radius: 12px;
    color: #666666;
    background: #f5f5f5;
    cursor: pointer;
}
.wyy-music-tab.active {
    background: #333333;
    color: #ffffff;
}
.wyy-playlist-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid #eeeeee;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: background 0.2s;
}
.wyy-playlist-card:hover {
    background: #f9f9f9;
}
.wyy-playlist-actions {
    margin-left: auto;
}
.wyy-new-playlist-card:hover {
    background: #f5f5f5;
    border-color: #ccc;
}
.wyy-playlist-selector-item:hover {
    background: #f9f9f9;
}
.wyy-playlist-selector-item:active {
    background: #f0f0f0;
}
.wyy-playlist-cover {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    background: #f5f5f5;
}
.wyy-playlist-info {
    flex: 1;
    min-width: 0;
}
.wyy-playlist-name {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wyy-playlist-desc {
    font-size: 11px;
    color: #999999;
}

/* 底部播放栏 */
.wyy-play-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: #ffffff;
    border-top: 1px solid #eeeeee;
    padding: 8px 15px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-sizing: border-box;
}
.wyy-record-container {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f5f5 center/cover no-repeat;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
.wyy-record-cover {
    width: 100%;
    height: 100%;
    animation: wyyRotate 8s linear infinite;
    animation-play-state: paused;
    background: inherit;
    border-radius: 50%;
}
.wyy-record-cover.playing {
    animation-play-state: running;
}
@keyframes wyyRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.wyy-play-info {
    flex: 1;
    min-width: 0;
}
.wyy-song-name {
    font-size: 13px;
    font-weight: 500;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.wyy-singer-name {
    font-size: 11px;
    color: #999999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wyy-play-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}
.wyy-control-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666666;
    font-size: 15px;
    padding: 0;
}
.wyy-play-btn {
    width: 28px;
    height: 28px;
    background: #333333;
    border-radius: 50%;
    color: #ffffff;
    font-size: 12px;
}

/* 模态框样式 */
.wyy-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    align-items: center;
    justify-content: center;
    animation: wyyFadeIn 0.3s ease;
}
.wyy-modal-overlay.active {
    display: flex;
}
.wyy-modal-content {
    background: white;
    border-radius: 12px;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    animation: wyySlideUp 0.3s ease;
}
@keyframes wyySlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.wyy-modal-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}
.wyy-avatar-upload-section {
    text-align: center;
    margin-bottom: 20px;
}
.wyy-avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f5f5f5 center/cover no-repeat;
    margin: 0 auto 10px;
    border: 2px solid #eeeeee;
}
.wyy-upload-btn {
    background: #333333;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    margin: 5px;
    transition: background 0.3s;
}
.wyy-upload-btn:hover {
    background: #555555;
}
.wyy-info-edit-section {
    margin-bottom: 20px;
}
.wyy-edit-group {
    margin-bottom: 15px;
}
.wyy-edit-label {
    display: block;
    font-size: 12px;
    color: #666666;
    margin-bottom: 5px;
}
.wyy-edit-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #eeeeee;
    border-radius: 8px;
    font-size: 13px;
    background: #f9f9f9;
}
.wyy-cards-edit-section {
    margin-bottom: 20px;
}
.wyy-cards-preview-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}
.wyy-card-preview-item {
    text-align: center;
}
.wyy-card-preview {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background: #f5f5f5 center/cover no-repeat;
    border: 1px solid #eeeeee;
    margin-bottom: 8px;
}
.wyy-card-upload-btn {
    background: #f5f5f5;
    color: #333333;
    font-size: 11px;
    padding: 4px 8px;
}
.wyy-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.wyy-cancel-btn {
    background: #f5f5f5;
    color: #333333;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.3s;
}
.wyy-cancel-btn:hover {
    background: #e5e5e5;
}
.wyy-save-btn {
    background: #333333;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.3s;
}
.wyy-save-btn:hover {
    background: #555555;
}
.wyy-file-input {
    display: none;
}
/* 歌曲列表模态框样式 */
.wyy-playlist-modal-content {
    background: white;
    border-radius: 12px;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 70vh;
    overflow-y: auto;
    animation: wyySlideUp 0.3s ease;
}
.wyy-songs-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 20px;
    border: 1px solid #eeeeee;
    border-radius: 8px;
}
.wyy-song-item {
    padding: 10px 12px;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.wyy-song-item:hover {
    background: #f9f9f9;
}
.wyy-song-item.active {
    background: #f0f0f0;
}
.wyy-song-item:last-child {
    border-bottom: none;
}
.wyy-song-item-icon {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: #f5f5f5 center/cover no-repeat;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    flex-shrink: 0;
    position: relative;
}
.wyy-song-item-icon.default {
    background: #333333;
}
.wyy-song-item-info {
    flex: 1;
    min-width: 0;
}
.wyy-song-item-name {
    font-size: 13px;
    font-weight: 500;
    color: #333333;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wyy-song-item-singer {
    font-size: 11px;
    color: #999999;
}
.wyy-song-item-actions {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-shrink: 0;
}
.wyy-song-item-add {
    color: #333;
    background: none;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s;
}
.wyy-song-item-add:hover {
    background: #f0f0f0;
    color: #666;
}
.wyy-song-item-remove {
    color: #ff4444;
    background: none;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.wyy-song-item-remove:hover {
    background: #ffeeee;
}
.wyy-add-song-form {
    border-top: 1px solid #eeeeee;
    padding-top: 20px;
}
.wyy-form-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.wyy-add-song-btn {
    background: #333333;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    flex: 1;
}
.wyy-clear-all-btn {
    background: #f5f5f5;
    color: #333333;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    flex: 1;
}
.wyy-empty-playlist {
    text-align: center;
    padding: 30px 20px;
    color: #999999;
    font-size: 13px;
}
.wyy-upload-options {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.wyy-upload-option-btn {
    flex: 1;
    background: #f5f5f5;
    color: #666666;
    border: 1px solid #eeeeee;
    padding: 8px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
}
.wyy-upload-option-btn.active {
    background: #333333;
    color: white;
}
.wyy-upload-section {
    display: none;
}
.wyy-upload-section.active {
    display: block;
}
.wyy-cover-upload-section {
    text-align: center;
    margin-bottom: 15px;
}
.wyy-cover-preview {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    background: #f5f5f5 center/cover no-repeat;
    margin: 0 auto 10px;
    border: 1px solid #eeeeee;
}
.wyy-playlist-selector-item {
    padding: 10px 12px;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

/* 小屋页面样式 - 白色简约+粉色点缀 */
/* 🔧 @import 已移到 HTML 中异步加载，避免放在CSS中间导致后续规则被浏览器忽略 */

#cabin-page .custom-page-header {
    background: #fefefe;
    border-bottom: 3px solid #ffe4e9;
    box-shadow: 0 2px 8px rgba(255, 228, 233, 0.3);
}

#cabin-page .custom-page-title {
    color: #666666;
}

#cabin-page .back-btn {
    color: #999999;
}

#cabin-page .back-btn:hover {
    color: #ffb3c1;
}

.coin-display-cabin {
    background: #fef9ff;
    border: 2px solid #ffe4e9;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 10px;
    color: #999999;
    display: flex;
    align-items: center;
    gap: 5px;
    position: absolute;
    right: 15px;
}

/* 小屋图标样式 */
.cabin-icon {
    width: 16px;
    height: 16px;
    stroke: #999999;
    fill: none;
}

.cabin-icon-small {
    width: 12px;
    height: 12px;
    stroke: #999999;
    fill: none;
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
}

.cabin-display-icon {
    width: 80px;
    height: 80px;
    stroke: #cccccc;
    fill: none;
}

.cabin-btn-icon {
    width: 18px;
    height: 18px;
    stroke: #999999;
    fill: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.cabin-main-container {
    padding: 80px 15px 80px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    min-height: calc(100% - 60px);
}

/* 屏幕切换 */
.cabin-screen {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.cabin-screen.active {
    display: flex;
}

/* 像素风格基础样式 */
.cabin-pixel-box {
    background: #ffffff;
    border: 3px solid #ffe4e9;
    box-shadow: 3px 3px 0 rgba(255, 228, 233, 0.3);
    border-radius: 6px;
}

.cabin-pixel-btn {
    font-family: 'Press Start 2P', cursive;
    background: #ffffff;
    border: 3px solid #ffb3c1;
    box-shadow: 3px 3px 0 #ffe4e9;
    color: #666666;
    padding: 12px 15px;
    font-size: 11px;
    cursor: pointer;
    text-align: center;
    margin: 10px 0;
    position: relative;
    transition: all 0.2s;
    border-radius: 4px;
}

.cabin-pixel-btn:active {
    top: 2px;
    left: 2px;
    box-shadow: 1px 1px 0 #ffe4e9;
}

.cabin-ai-btn {
    background: linear-gradient(135deg, #fefefe 0%, #fff5f7 100%);
    border-color: #ffe4e9;
}

/* 扭蛋机样式 */
.cabin-gacha-machine {
    width: 280px;
    height: 340px;
    background: #ffffff;
    border: 4px solid #ffe4e9;
    border-radius: 30px 30px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    box-shadow: 6px 6px 0 rgba(255, 228, 233, 0.2);
    position: relative;
    margin-bottom: 15px;
}

.cabin-machine-window {
    width: 220px;
    height: 160px;
    background: #fefefe;
    border: 3px solid #ffe4e9;
    border-radius: 50% 50% 10px 10px / 40% 40% 10px 10px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 2px 8px rgba(255, 228, 233, 0.3);
}

.cabin-loading-text {
    font-size: 9px;
    color: #999999;
    animation: cabin-blink 1.5s infinite;
    display: none;
    text-align: center;
}

@keyframes cabin-blink {
    50% { opacity: 0.4; }
}

.cabin-knob-area {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
    flex-direction: column;
}

.cabin-gacha-knob {
    width: 60px;
    height: 60px;
    background: #ffffff;
    border: 3px solid #ffb3c1;
    border-radius: 50%;
    box-shadow: 3px 3px 0 #ffe4e9;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s;
    color: #666666;
    font-family: 'Press Start 2P', cursive;
}

.cabin-gacha-knob:active {
    transform: rotate(15deg) scale(0.95);
}

.cabin-ten-draw {
    background: #fff5f7;
    color: #ffb3c1;
    font-size: 9px;
}

/* 统计信息框 */
.cabin-stats-box {
    width: 90%;
    padding: 12px;
    text-align: center;
    margin-top: 12px;
    font-size: 9px;
    background: #ffffff;
    border: 3px solid #ffe4e9;
    color: #999999;
    box-shadow: 3px 3px 0 rgba(255, 228, 233, 0.2);
    border-radius: 6px;
}

.cabin-stats-highlight {
    color: #ffb3c1;
    font-weight: bold;
}

/* 机器标题栏 */
.cabin-machine-title-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
    width: 100%;
}

.cabin-machine-title {
    font-size: 11px;
    font-weight: bold;
    color: #666666;
    font-family: 'Press Start 2P', cursive;
}

.cabin-switch-btn {
    padding: 5px 12px;
    font-size: 8px;
    background: #ffffff;
    border: 2px solid #ffe4e9;
    color: #999999;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.cabin-switch-btn:hover {
    background: #fff5f7;
    color: #ffb3c1;
}

.cabin-info-text {
    font-size: 9px;
    color: #999999;
    margin: 5px 0;
}

/* 占位内容 */
.cabin-placeholder-content {
    width: 100%;
    padding: 40px 20px;
    text-align: center;
    color: #cccccc;
    font-size: 10px;
}

.cabin-page-title {
    font-size: 14px;
    color: #666666;
    margin-bottom: 20px;
    text-align: center;
    font-family: 'Press Start 2P', cursive;
}

/* 底部导航栏 - 无emoji版本 */
.cabin-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 3px solid #ffe4e9;
    display: flex;
    justify-content: space-around;
    padding: 12px 0 8px 0;
    box-shadow: 0 -2px 8px rgba(255, 228, 233, 0.2);
    z-index: 1000;
}

.cabin-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 8px 15px;
    border-radius: 8px;
    transition: all 0.2s;
    min-width: 60px;
}

.cabin-nav-item.active {
    background: #fff5f7;
}

.cabin-nav-icon {
    width: 22px;
    height: 22px;
    margin-bottom: 5px;
    stroke: #cccccc;
    fill: none;
    transition: stroke 0.2s;
}

.cabin-nav-item.active .cabin-nav-icon {
    stroke: #ffb3c1;
}

.cabin-nav-item-text {
    font-size: 8px;
    color: #999999;
    font-weight: bold;
}

.cabin-nav-item.active .cabin-nav-item-text {
    color: #ffb3c1;
}

/* 房间容器样式 - 白色简约版本 */
.cabin-room-container {
    width: 352px;
    height: 320px;
    background-color: #ffffff;
    border: 4px solid #ffe4e9;
    position: relative;
    overflow: visible;
    margin-bottom: 15px;
    flex-shrink: 0;
    z-index: 10;
    transform: translateZ(0);
    border-radius: 8px;
    box-shadow: 4px 4px 0 rgba(255, 228, 233, 0.2);
}

/* 墙面区域 - 上方2行 */
.cabin-room-wall {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background-color: #fff5f7;
    border-bottom: 3px solid #ffe4e9;
    opacity: 0.9;
    box-shadow: 
        0 8px 12px rgba(255, 228, 233, 0.2),
        inset 0 -3px 6px rgba(255, 228, 233, 0.1);
    pointer-events: none;
}

/* 地面区域 - 下方8行 */
.cabin-room-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 256px;
    background-color: #fefefe;
    box-shadow: 
        inset 0 3px 6px rgba(255, 228, 233, 0.1),
        0 -5px 8px rgba(255, 228, 233, 0.15);
    pointer-events: none;
}

/* 格子网格 - 视觉辅助 */
.cabin-room-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 32px 32px;
    background-image: 
        linear-gradient(to right, rgba(255, 228, 233, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 228, 233, 0.1) 1px, transparent 1px);
    pointer-events: none;
    z-index: 100;
}

/* 已放置的家具 */
.placed-furniture {
    position: absolute;
    z-index: 50;
    cursor: move;
    touch-action: none;
    image-rendering: pixelated;
    pointer-events: auto !important;
}

.placed-furniture * {
    pointer-events: none;
}

/* 已放置的角色 */
.placed-character {
    pointer-events: auto !important;
    touch-action: none;
    z-index: 60 !important;
}

.placed-character * {
    pointer-events: none;
}

/* 分类过滤器 */
.cabin-filter-btn {
    padding: 5px 10px;
    font-size: 8px;
    border: 2px solid #ffe4e9;
    border-radius: 4px;
    background: #ffffff;
    color: #999999;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Press Start 2P', cursive;
}

.cabin-filter-btn.active {
    background: #fff5f7;
    color: #ffb3c1;
    border-color: #ffb3c1;
}

.cabin-filter-btn:hover {
    background: #fff5f7;
}

/* 背包样式 */
.cabin-inventory-bar {
    scrollbar-width: thin;
    scrollbar-color: #ffe4e9 #ffffff;
}

.cabin-inventory-bar::-webkit-scrollbar {
    height: 6px;
}

.cabin-inventory-bar::-webkit-scrollbar-track {
    background: #ffffff;
}

.cabin-inventory-bar::-webkit-scrollbar-thumb {
    background: #ffe4e9;
    border-radius: 3px;
}

.cabin-inventory-bar::-webkit-scrollbar-thumb:hover {
    background: #ffb3c1;
}

/* 行内图标样式 */
.cabin-icon-inline {
    width: 14px;
    height: 14px;
    stroke: #999999;
    fill: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
}

/* 图鉴样式 */
.catalog-tab {
    transition: all 0.2s;
}

.catalog-tab:hover {
    background: #fff5f7 !important;
}

.catalog-tab.active {
    background: #fff5f7 !important;
    border-color: #ffb3c1 !important;
    color: #ffb3c1 !important;
}

.rarity-filter-btn {
    transition: all 0.2s;
}

.rarity-filter-btn:hover {
    opacity: 0.8;
}

.rarity-filter-btn.active {
    box-shadow: 0 0 0 2px #ffb3c1;
}

.catalog-grid {
    scrollbar-width: thin;
    scrollbar-color: #ffe4e9 #ffffff;
}

.catalog-grid::-webkit-scrollbar {
    width: 6px;
}

.catalog-grid::-webkit-scrollbar-track {
    background: #ffffff;
}

.catalog-grid::-webkit-scrollbar-thumb {
    background: #ffe4e9;
    border-radius: 3px;
}

.catalog-grid::-webkit-scrollbar-thumb:hover {
    background: #ffb3c1;
}

/* 支付方式选择弹窗 */
.payment-method-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.payment-method-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.payment-method-content {
    position: relative;
    width: 90%;
    max-width: 400px;
    background: white;
    border-radius: 16px 16px 0 0;
    padding: 20px;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.payment-method-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}

.payment-method-amount {
    color: #ff4444;
    font-size: 20px;
}

.payment-method-desc {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
}

.payment-method-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.payment-method-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 12px;
    background: #f5f5f5;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.payment-method-item:hover {
    background: #e8e8e8;
}

.payment-method-icon {
    font-size: 32px;
    margin-right: 15px;
}

.payment-method-name {
    flex: 1;
}

.payment-method-name > div:first-child {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
}

.payment-method-sub {
    font-size: 13px;
    color: #999;
}

.payment-method-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    position: relative;
    transition: all 0.3s;
}

.payment-method-radio.selected {
    border-color: #07c160;
    background: #07c160;
}

.payment-method-radio.selected::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.payment-method-buttons {
    display: flex;
    gap: 10px;
}

.payment-method-cancel,
.payment-method-confirm {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.payment-method-cancel {
    background: #f5f5f5;
    color: #333;
}

.payment-method-cancel:hover {
    background: #e8e8e8;
}

.payment-method-confirm {
    background: #07c160;
    color: white;
}

.payment-method-confirm:hover {
    background: #06ad56;
}

/* ==================== 闲鱼App样式 ==================== */

/* 闲鱼 账号选择页面 */
.xy-select-page {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe0e6 100%);
    display: flex;
    flex-direction: column;
    z-index: 25;
    overflow-y: auto;
}
.xy-select-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88px;
    padding-top: 44px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 10px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    border-bottom: 0.5px solid rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 10;
}
.xy-select-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
    color: #333;
}
.xy-select-back:hover {
    background: rgba(0,0,0,0.05);
}
.xy-select-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}
.xy-select-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 30px;
}
.xy-select-logo-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, #e89ab0 0%, #f0b8c8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(232,154,176,0.4);
    margin-bottom: 16px;
}
.xy-select-logo-title {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}
.xy-select-logo-desc {
    font-size: 14px;
    color: #999;
}
.xy-select-list {
    padding: 0 20px 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.xy-account-item {
    background: #fff;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.xy-account-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    border-color: #e89ab0;
}
.xy-account-item:active {
    transform: translateY(0);
}
.xy-account-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #999;
    overflow: hidden;
}
.xy-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xy-account-info {
    flex: 1;
    min-width: 0;
}
.xy-account-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}
.xy-account-desc {
    font-size: 12px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xy-account-arrow {
    color: #ccc;
    font-size: 20px;
    flex-shrink: 0;
}
.xy-select-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 14px;
}
.xy-select-empty .empty-hint {
    font-size: 12px;
    margin-top: 8px;
    color: #ccc;
}

.xianyu-app-page {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #f8f8f8;
    z-index: 20;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #999999;
}
.xianyu-app-page.active {
    transform: translateX(0);
}

.xy-page {
    display: none;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 60px;
    background-color: #f8f8f8;
    position: relative;
}
.xy-page.active {
    display: block;
}
#xyChatPage.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
}

.xy-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    height: 88px;
    padding-top: 44px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 10px;
    border-bottom: 0.5px solid rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.xy-header-home {
    justify-content: center;
}
.xy-header-detail {
    justify-content: space-between;
}
.xy-header-chat {
    justify-content: space-between;
    flex-shrink: 0;
    position: relative;
}
.xy-header-my {
    justify-content: space-between;
}
.xy-back-btn {
    font-size: 20px;
    color: #e89ab0;
    cursor: pointer;
    padding: 5px;
}
.xy-page-title {
    font-size: 18px;
    color: #333333;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.xy-search-box {
    flex: 1;
    height: 36px;
    background-color: #fcfcfc;
    border-radius: 18px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    max-width: 500px;
}
.xy-search-box input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #999999;
    margin-left: 8px;
    width: 100%;
}
.xy-search-icon {
    font-size: 16px;
    color: #dddddd;
}
.xy-header-icon {
    display: flex;
    gap: 15px;
}
.xy-header-icon i {
    font-size: 18px;
    color: #999999;
    cursor: pointer;
}
.xy-generate-btn {
    background-color: #e89ab0;
    color: white;
    border: none;
    border-radius: 18px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.xy-generate-btn:hover {
    background-color: #d88aa0;
}
.xy-generate-btn i {
    font-size: 14px;
}
.xy-chat-header-name {
    font-size: 16px;
    color: #666666;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}
.xy-credit-tag {
    font-size: 10px;
    color: #ffffff;
    background-color: #ffcc00;
    padding: 2px 5px;
    border-radius: 3px;
}

.xy-category-nav {
    display: flex;
    justify-content: space-around;
    padding: 15px 0;
    background-color: #ffffff;
    border-bottom: 1px solid #f9f9f9;
}
.xy-category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}
.xy-category-icon {
    width: 28px;
    height: 28px;
    background-color: #FFF2F8;
    border-radius: 50%;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e89ab0;
    font-size: 14px;
}

.xy-goods-list {
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.xy-goods-item {
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    cursor: pointer;
    transition: transform 0.2s ease;
}
.xy-goods-item:hover {
    transform: translateY(-2px);
}
.xy-goods-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    background-color: #FFF2F8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e89ab0;
    font-size: 24px;
}
.xy-goods-info {
    padding: 8px;
}
.xy-goods-title {
    font-size: 13px;
    color: #999999;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 5px;
}
.xy-goods-price {
    font-size: 14px;
    color: #e89ab0;
    font-weight: 500;
}
.xy-goods-category {
    font-size: 11px;
    color: #cccccc;
    margin-top: 3px;
}
.xy-goods-seller-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}
.xy-goods-seller-name {
    font-size: 11px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}
.xy-goods-category-tag {
    font-size: 10px;
    color: #e89ab0;
    background: #fff0f3;
    padding: 1px 6px;
    border-radius: 8px;
    flex-shrink: 0;
}

.xy-seller-info {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f9f9f9;
}
.xy-seller-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #FFF2F8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e89ab0;
}
.xy-seller-name-box {
    flex: 1;
}
.xy-seller-name {
    font-size: 14px;
    color: #666666;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.xy-seller-desc {
    font-size: 12px;
    color: #999999;
    display: flex;
    justify-content: space-between;
}
.xy-goods-detail-header {
    padding: 15px;
    border-bottom: 1px solid #f9f9f9;
}
.xy-goods-detail-title {
    font-size: 18px;
    color: #666666;
    margin-bottom: 10px;
}
.xy-goods-detail-meta {
    font-size: 12px;
    color: #999999;
    margin-bottom: 15px;
    display: flex;
    gap: 15px;
}
.xy-goods-price-box {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}
.xy-goods-price {
    font-size: 28px;
    color: #e89ab0;
    font-weight: 600;
}
.xy-postage-tag {
    font-size: 12px;
    color: #ffffff;
    background-color: #e89ab0;
    padding: 2px 8px;
    border-radius: 3px;
}
.xy-goods-meta-list {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999999;
    margin-top: 15px;
}
.xy-goods-detail-desc {
    padding: 15px;
    border-bottom: 1px solid #f9f9f9;
}
.xy-desc-title {
    font-size: 14px;
    color: #666666;
    margin-bottom: 10px;
}
.xy-desc-content {
    font-size: 14px;
    color: #999999;
    line-height: 1.6;
}
.xy-tips-box {
    padding: 15px;
    border-bottom: 1px solid #f9f9f9;
}
.xy-tips-title {
    font-size: 14px;
    color: #666666;
    margin-bottom: 5px;
}
.xy-tips-content {
    font-size: 12px;
    color: #999999;
}
.xy-goods-detail-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    background-color: #FFF2F8;
    border-bottom: 1px solid #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e89ab0;
    font-size: 48px;
}
.xy-operate-bar {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #ffffff;
    border-top: 1px solid #f9f9f9;
    display: flex;
    align-items: center;
    padding: 0 15px;
    gap: 10px;
    z-index: 5;
}
.xy-operate-btn {
    flex: 1;
    height: 36px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
}
.xy-btn-collect {
    border: 1px solid #e89ab0;
    color: #e89ab0;
}
.xy-btn-buy {
    border: 1px solid #e89ab0;
    color: #e89ab0;
}
.xy-btn-chat {
    background-color: #ffcc00;
    color: #ffffff;
    font-weight: 500;
}

.xy-chat-goods-bar {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f9f9f9;
    background-color: #ffffff;
    flex-shrink: 0;
}
.xy-chat-goods-avatar {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background-color: #FFF2F8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e89ab0;
}
.xy-chat-goods-info {
    flex: 1;
}
.xy-chat-goods-price {
    font-size: 16px;
    color: #ff6666;
    font-weight: 500;
    margin-bottom: 3px;
}
.xy-chat-goods-desc {
    font-size: 12px;
    color: #999999;
    margin-bottom: 3px;
}
.xy-chat-buy-btn {
    width: 80px;
    height: 30px;
    background-color: #ff6666;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}
.xy-chat-content {
    padding: 15px;
    flex: 1;
    overflow-y: auto;
    margin-bottom: 0;
}
.xy-chat-quick-ask {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.xy-quick-ask-btn {
    padding: 8px 15px;
    background-color: #f5f5f5;
    border-radius: 20px;
    font-size: 14px;
    color: #666666;
    cursor: pointer;
    border: 1px solid #eeeeee;
}
.xy-chat-input-box {
    flex-shrink: 0;
    padding: 10px 15px;
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 5;
    min-height: 60px;
}
.xy-chat-voice-btn {
    font-size: 20px;
    color: #e89ab0;
    cursor: pointer;
}
.xy-chat-input {
    flex: 1;
    height: 36px;
    background-color: #fcfcfc;
    border: 1px solid #f9f9f9;
    border-radius: 18px;
    padding: 0 15px;
    outline: none;
    color: #999999;
    font-size: 14px;
}
.xy-chat-send-btn {
    height: 36px;
    padding: 0 14px;
    background-color: #e89ab0;
    color: #fff;
    border: none;
    border-radius: 18px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.xy-chat-send-btn:active {
    background-color: #d4849a;
}
.xy-chat-receive-btn {
    height: 36px;
    padding: 0 10px;
    background-color: #f0f0f0;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 18px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.xy-chat-receive-btn:active {
    background-color: #e0e0e0;
}
.xy-chat-receive-btn.loading {
    opacity: 0.6;
    pointer-events: none;
}

.xy-tab-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #f9f9f9;
    z-index: 10;
}
.xy-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: #999999;
    flex: 1;
    cursor: pointer;
}
.xy-tab-item.active {
    color: #e89ab0;
}
.xy-tab-icon {
    font-size: 20px;
    margin-bottom: 3px;
}
.xy-publish-tab {
    width: 40px;
    height: 40px;
    background-color: #e89ab0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 22px;
    margin-top: -15px;
    box-shadow: 0 2px 6px rgba(232,154,176,0.2);
    cursor: pointer;
}

.xy-my-header {
    background: linear-gradient(135deg, #ff9db0 0%, #e89ab0 100%);
    padding: 20px 15px;
    color: white;
    position: relative;
}
.xy-my-user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.xy-my-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: white;
    border: 3px solid rgba(255, 255, 255, 0.3);
}
.xy-my-user-details {
    flex: 1;
}
.xy-my-username {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
}
.xy-my-user-id {
    font-size: 12px;
    opacity: 0.8;
}
.xy-my-edit-btn {
    position: absolute;
    top: 20px;
    right: 15px;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 12px;
    cursor: pointer;
}
.xy-my-stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.xy-my-stat-item {
    flex: 1;
}
.xy-my-stat-number {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 3px;
}
.xy-my-stat-label {
    font-size: 12px;
    opacity: 0.8;
}
.xy-my-menu {
    background-color: white;
    padding: 10px 0;
}
.xy-my-menu-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f9f9f9;
    cursor: pointer;
    transition: background-color 0.2s;
}
.xy-my-menu-item:hover {
    background-color: #FFF2F8;
}
.xy-my-menu-icon {
    width: 24px;
    height: 24px;
    background-color: #FFF2F8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e89ab0;
    margin-right: 15px;
}
.xy-my-menu-text {
    flex: 1;
    font-size: 14px;
    color: #666666;
}
.xy-my-menu-arrow {
    color: #cccccc;
}
.xy-my-subpage {
    padding: 15px;
}
.xy-my-subpage-title {
    font-size: 16px;
    color: #666666;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f9f9f9;
}

.xy-data-status {
    position: absolute;
    top: 60px;
    right: 10px;
    background-color: #e89ab0;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    z-index: 100;
    opacity: 0.8;
    transition: opacity 0.3s;
}
.xy-data-status:hover {
    opacity: 1;
}

/* 消息列表页面样式 */
.xy-msg-list-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: #ffffff;
    border-bottom: 1px solid #f9f9f9;
    cursor: pointer;
}
.xy-msg-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #FFF2F8;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e89ab0;
    font-size: 24px;
    position: relative;
}
.xy-msg-info {
    flex: 1;
}
.xy-msg-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.xy-msg-name {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}
.xy-msg-time {
    font-size: 12px;
    color: #ccc;
}
.xy-msg-content {
    font-size: 13px;
    color: #999;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.xy-msg-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #ff6666;
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 10px;
    border: 1px solid white;
}

.xy-message-item {
    margin-bottom: 15px;
    max-width: 80%;
}
.xy-message-user {
    margin-left: auto;
}
.xy-message-seller {
    margin-right: auto;
}
.xy-message-bubble {
    padding: 10px 15px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.4;
}
.xy-message-user .xy-message-bubble {
    background-color: #FFF2F8;
    color: #666666;
    border-bottom-right-radius: 5px;
}
.xy-message-seller .xy-message-bubble {
    background-color: #f5f5f5;
    color: #666666;
    border-bottom-left-radius: 5px;
}
.xy-message-system {
    width: 100%;
    text-align: center;
    margin: 10px 0;
}
.xy-message-system .xy-message-bubble {
    background-color: #fff3cd;
    color: #856404;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 12px;
    display: inline-block;
}
.xy-message-time {
    font-size: 11px;
    color: #cccccc;
    margin-top: 5px;
    text-align: center;
}

.xy-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}
.xy-modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
}
.xy-modal-title {
    color: #e89ab0;
    margin-bottom: 15px;
    font-size: 18px;
}
.xy-modal-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #f9f9f9;
    border-radius: 5px;
    font-size: 14px;
}
.xy-modal-textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #f9f9f9;
    border-radius: 5px;
    font-size: 14px;
    height: 100px;
    resize: vertical;
}
.xy-modal-select {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #f9f9f9;
    border-radius: 5px;
    font-size: 14px;
}
.xy-modal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}
.xy-modal-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
}
.xy-modal-btn-primary {
    background-color: #e89ab0;
    color: white;
}
.xy-modal-btn-secondary {
    background-color: #f9f9f9;
    color: #666;
}

.xy-empty-state {
    text-align: center;
    padding: 50px 15px;
    color: #cccccc;
}
.xy-empty-icon {
    font-size: 50px;
    margin-bottom: 15px;
    color: #e89ab0;
}
.xy-empty-text {
    font-size: 14px;
}

/* ==================== icity 应用样式 ==================== */
.icity-app-page {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #fafafa;
    z-index: 20;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.icity-app-page.active {
    transform: translateX(0);
}

/* icity 账号/角色选择页面 */
.icity-select-page {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    display: flex;
    flex-direction: column;
    z-index: 5;
    overflow-y: auto;
}
.icity-select-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    padding-top: 44px;
    min-height: 88px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 10;
    box-sizing: border-box;
}
.icity-select-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
    color: #333;
}
.icity-select-back:hover {
    background: rgba(0,0,0,0.05);
}
.icity-select-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}
.icity-select-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 30px;
}
.icity-select-logo-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, #4096ff 0%, #69b4ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(64,150,255,0.4);
    margin-bottom: 16px;
}
.icity-select-logo-title {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}
.icity-select-logo-desc {
    font-size: 14px;
    color: #999;
}
.icity-select-list {
    padding: 0 20px 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.icity-account-item {
    background: #fff;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.icity-account-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    border-color: #4096ff;
}
.icity-account-item:active {
    transform: translateY(0);
}
.icity-account-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #999;
    overflow: hidden;
}
.icity-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.icity-account-info {
    flex: 1;
    min-width: 0;
}
.icity-account-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}
.icity-account-desc {
    font-size: 12px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.icity-account-arrow {
    color: #ccc;
    font-size: 20px;
    flex-shrink: 0;
}
.icity-select-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 14px;
}
.icity-select-empty .empty-hint {
    font-size: 12px;
    margin-top: 8px;
    color: #ccc;
}

/* icity 应用内部样式 - 添加作用域避免冲突 */
.icity-app-page .icity-inner {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #fafafa;
    color: #333;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.icity-app-page .icity-inner * {
    box-sizing: border-box;
}

.icity-app-page .page {
    display: none;
}

.icity-app-page .page.active {
    display: block;
}

.icity-app-page .top-bar {
    background-color: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    padding: 10px 10px;
    padding-top: 44px;
    min-height: 88px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 90;
    width: 100%;
    box-sizing: border-box;
}

.icity-app-page .back-btn {
    color: #666;
    font-size: 20px;
    cursor: pointer;
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
}

.icity-app-page .back-btn svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.icity-app-page .page-title {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    flex: 1;
    text-align: center;
}

.icity-app-page .top-icons {
    display: flex;
    gap: 20px;
    align-items: center;
}

.icity-app-page .top-icon {
    width: 22px;
    height: 22px;
    color: #666;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icity-app-page .icon-svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.icity-app-page .diary-list {
    padding: 10px 0;
}

.icity-app-page .diary-item {
    background-color: #fff;
    padding: 20px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s;
}

.icity-app-page .diary-item:hover {
    background-color: #f9f9f9;
}

.icity-app-page .diary-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.icity-app-page .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icity-app-page .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #ddd;
}

.icity-app-page .user-name-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.icity-app-page .user-name {
    font-size: 15px;
    font-weight: 500;
    color: #000;
}

.icity-app-page .user-id {
    font-size: 12px;
    color: #999;
}

.icity-app-page .diary-date {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
}

.icity-app-page .diary-content {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1a1a;
    margin-bottom: 15px;
    white-space: pre-wrap;
}

.icity-app-page .diary-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    font-size: 14px;
    color: #999;
}

.icity-app-page .action-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.icity-app-page .action-item svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.icity-app-page .more-btn {
    color: #999;
}

.icity-app-page .more-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.icity-app-page .bottom-tab {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 600px;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0 15px;
    border-top: 1px solid #eee;
    z-index: 100;
}

.icity-app-page .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #999;
    font-size: 12px;
    cursor: pointer;
}

.icity-app-page .tab-item.active {
    color: #4096ff;
}

.icity-app-page .tab-icon {
    font-size: 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icity-app-page .tab-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.icity-app-page .tab-publish {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #4096ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -20px;
    box-shadow: 0 2px 8px rgba(64, 150, 255, 0.3);
    color: #fff;
    cursor: pointer;
}

.icity-app-page .tab-publish svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.icity-app-page .detail-page {
    background-color: #fafafa;
    padding-bottom: 70px;
}

.icity-app-page .detail-card {
    background-color: #fff;
    margin: 0;
    padding: 20px 15px;
    width: 100%;
}

.icity-app-page .detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}

.icity-app-page .detail-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #ddd;
}

.icity-app-page .detail-user {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.icity-app-page .detail-username {
    font-size: 17px;
    font-weight: 500;
}

.icity-app-page .detail-userid {
    font-size: 13px;
    color: #999;
}

.icity-app-page .detail-content {
    font-size: 20px;
    line-height: 2.2;
    color: #1a1a1a;
    margin-bottom: 25px;
    white-space: pre-wrap;
    padding: 0 5px;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    cursor: text;
}

.icity-app-page .detail-time {
    font-size: 14px;
    color: #999;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
    padding-left: 5px;
}

.icity-app-page .detail-actions {
    display: flex;
    align-items: center;
    gap: 35px;
    font-size: 16px;
    color: #999;
    padding-left: 5px;
}

.icity-app-page .detail-action {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.icity-app-page .detail-action svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.icity-app-page #icityDeleteBtn {
    color: #ff4d4f;
}

.icity-app-page #icityDeleteBtn:hover {
    color: #ff7875;
}

.icity-app-page .comment-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 600px;
    background-color: #fff;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #eee;
}

.icity-app-page .comment-input {
    flex: 1;
    padding: 12px 20px;
    border: 1px solid #eee;
    border-radius: 25px;
    outline: none;
    font-size: 15px;
}

.icity-app-page .send-btn {
    background-color: #00c853;
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    font-size: 15px;
    cursor: pointer;
}

.icity-app-page .publish-page {
    background-color: #fff;
    width: 100%;
    height: 100%;
    padding-bottom: 60px;
}

.icity-app-page .publish-top {
    padding: 10px 10px;
    padding-top: 44px;
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}

.icity-app-page .publish-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ddd;
}

.icity-app-page .title-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    color: #333;
}

.icity-app-page .close-publish {
    color: #999;
    font-size: 20px;
    cursor: pointer;
    margin-right: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.icity-app-page .close-publish svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.icity-app-page .content-input {
    width: 100%;
    min-height: calc(100dvh - 180px);
    border: none;
    outline: none;
    padding: 15px 10px;
    font-size: 18px;
    line-height: 2;
    resize: none;
}

.icity-app-page .publish-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 600px;
    background-color: #fff;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #eee;
}

.icity-app-page .tool-icons {
    display: flex;
    gap: 25px;
    color: #4096ff;
    font-size: 20px;
}

.icity-app-page .tool-icons svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.icity-app-page .publish-setting {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #999;
    font-size: 14px;
}

.icity-app-page .publish-setting svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.icity-app-page .publish-submit {
    background-color: #00c853;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
}

.icity-app-page .my-page {
    background-color: #fafafa;
    min-height: 100%;
    padding-bottom: 80px;
}

.icity-app-page .user-profile {
    background-color: #fff;
    padding: 20px 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #eee;
}

.icity-app-page .profile-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #ddd;
}

.icity-app-page .profile-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.icity-app-page .profile-name {
    font-size: 18px;
    font-weight: 600;
    color: #000;
}

.icity-app-page .profile-id {
    font-size: 14px;
    color: #999;
}

.icity-app-page .profile-edit {
    margin-left: auto;
    color: #4096ff;
    font-size: 14px;
    cursor: pointer;
}

.icity-app-page .my-diary-stat {
    background-color: #fff;
    margin-top: 10px;
    padding: 15px 20px;
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #eee;
}

.icity-app-page .my-diary-list {
    background-color: #fff;
    margin-top: 10px;
}

.icity-app-page .my-diary-item {
    padding: 20px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s;
}

.icity-app-page .my-diary-item:hover {
    background-color: #f9f9f9;
}

.icity-app-page .my-diary-time {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}

.icity-app-page .my-diary-content {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* icity 角色选择模态框样式 */
.icity-role-modal {
    position: fixed;
    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: 10001;
}

.icity-role-modal:not([style*="none"]) {
    display: flex;
}

.icity-role-modal-content {
    background: #fff;
    width: 90%;
    max-width: 400px;
    border-radius: 15px;
    padding: 20px;
    max-height: 80vh;
    overflow-y: auto;
}

.icity-role-modal-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
}

.icity-role-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.icity-role-item {
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.icity-role-item:hover {
    background-color: #f9f9f9;
    border-color: #4096ff;
}

.icity-role-item.selected {
    background-color: #e6f4ff;
    border-color: #4096ff;
}

.icity-role-name {
    font-size: 16px;
    font-weight: 500;
    color: #000;
    margin-bottom: 5px;
}

.icity-role-desc {
    font-size: 13px;
    color: #999;
}

.icity-role-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.icity-role-btn-cancel {
    padding: 10px 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
    color: #666;
    cursor: pointer;
    font-size: 14px;
}

.icity-role-btn-cancel:hover {
    background: #f9f9f9;
}

/* icity 标注弹窗样式 */
.icity-annotation-popup {
    position: fixed;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 15px;
    width: 300px;
    max-width: calc(100vw - 40px);
    z-index: 10002;
}

.icity-annotation-popup .annotation-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    word-break: break-word;
}

.icity-annotation-popup .annotation-input {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.icity-annotation-popup .annotation-input:focus {
    border-color: #4096ff;
}

.icity-annotation-popup .annotation-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.icity-annotation-popup .annotation-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    outline: none;
}

.icity-annotation-popup .annotation-btn-cancel {
    background: #f5f5f5;
    color: #666;
}

.icity-annotation-popup .annotation-btn-cancel:hover {
    background: #e0e0e0;
}

.icity-annotation-popup .annotation-btn-save {
    background: #4096ff;
    color: #fff;
}

.icity-annotation-popup .annotation-btn-save:hover {
    background: #1677ff;
}

/* 标注高亮样式 */
.annotation-highlight {
    background-color: #fff3cd;
    border-bottom: 2px solid #ffc107;
    cursor: pointer;
    padding: 0 2px;
}

.annotation-highlight:hover {
    background-color: #ffe8a1;
}

/* 标注提示框样式 */
.icity-annotation-tooltip {
    position: fixed;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    padding: 12px;
    max-width: 300px;
    z-index: 10003;
    font-size: 14px;
    color: #333;
}

.icity-annotation-item {
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #f9f9f9;
}

.icity-annotation-item .annotation-quote {
    font-size: 13px;
    color: #666;
    font-style: italic;
    margin-bottom: 8px;
    padding-left: 10px;
    border-left: 3px solid #ffc107;
}

.icity-annotation-item .annotation-comment {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
}

.icity-annotation-item .annotation-time {
    font-size: 12px;
    color: #999;
}

.icity-annotation-item .annotation-delete {
    color: #ff4d4f;
    cursor: pointer;
    font-size: 12px;
    margin-left: 10px;
}

.icity-annotation-item .annotation-delete:hover {
    text-decoration: underline;
}

.icity-annotation-list {
    margin-top: 20px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 12px;
}

.icity-annotation-item:first-child {
    margin-top: 0;
}

/* =================
   默契绘画游戏
   ================= */
.moqi-draw-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #fff;
    z-index: 10000;
    display: flex;
    flex-direction: column;
}
.moqi-draw-page {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    position: relative;
}
.moqi-draw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88px;
    padding: 44px 16px 10px;
    box-sizing: border-box;
    background: #fff;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.moqi-draw-back {
    width: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.moqi-draw-title {
    font-size: 17px;
    font-weight: 600;
    color: #333;
}
.moqi-draw-topic-area {
    text-align: center;
    padding: 16px 16px 12px;
    background: #fff;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.moqi-draw-topic-label {
    font-size: 12px;
    color: #999;
    margin-bottom: 6px;
}
.moqi-draw-topic {
    font-size: 28px;
    font-weight: 700;
    color: var(--ins-text);
    margin-bottom: 12px;
}
.moqi-draw-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: var(--ins-pink);
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.moqi-draw-new-btn:active {
    opacity: 0.8;
}
.moqi-draw-canvas-area {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #f9f9f9;
}
.moqi-draw-section {
    position: relative;
}
.moqi-draw-section-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #999;
    margin-bottom: 6px;
}
.moqi-draw-section-label.moqi-label-bottom {
    margin-bottom: 0;
    margin-top: 6px;
}
.moqi-section-top {
    margin-bottom: 0;
}
.moqi-section-bottom {
    margin-top: 0;
}
.moqi-canvas {
    width: 100%;
    aspect-ratio: 2/1;
    border-radius: 12px;
    background: #fff;
    display: block;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    touch-action: none;
}
.moqi-ai-canvas {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.moqi-user-canvas {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.moqi-ai-draw-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -20%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: var(--ins-pink);
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255,182,193,0.4);
    z-index: 2;
}
.moqi-ai-draw-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.moqi-ai-draw-btn:not(:disabled):active {
    transform: translate(-50%, -20%) scale(0.95);
}
.moqi-draw-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    line-height: 1;
}
.moqi-draw-divider-line {
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(90deg, #ccc 0, #ccc 4px, transparent 4px, transparent 8px);
}
.moqi-draw-divider-text {
    font-size: 11px;
    color: #bbb;
    white-space: nowrap;
    letter-spacing: 1px;
}

/* 保存/分享按钮区域 */
.moqi-draw-save-area {
    display: flex;
    gap: 12px;
    padding: 14px 0 4px;
    justify-content: center;
}
.moqi-save-btn,
.moqi-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border: none;
    border-radius: 22px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.moqi-save-btn {
    background: #333;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.moqi-share-btn {
    background: var(--ins-pink, #ffb6c1);
    box-shadow: 0 2px 10px rgba(255,182,193,0.4);
}
.moqi-save-btn:active,
.moqi-share-btn:active {
    transform: scale(0.95);
}

/* 分享好友选择弹窗 */
.moqi-share-picker-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10001;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.moqi-share-picker-mask {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
}
.moqi-share-picker-panel {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 400px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s forwards;
}
.moqi-share-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}
.moqi-share-picker-list {
    overflow-y: auto;
    padding: 8px 0;
    flex: 1;
}
.moqi-share-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 15px;
    color: #333;
}
.moqi-share-picker-item:active {
    background: #f5f5f5;
}

.moqi-draw-toolbar {
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.standalone-mode .moqi-draw-toolbar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.moqi-tool-colors {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.moqi-color-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}
.moqi-color-btn.active {
    border-color: var(--ins-pink);
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(255,182,193,0.4);
}
.moqi-tool-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
}
.moqi-tool-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #f5f5f5;
    color: #666;
    transition: all 0.2s;
}
.moqi-tool-btn.active {
    background: var(--ins-pink);
    color: #fff;
}
.moqi-tool-btn.active .svg-icon {
    stroke: #fff;
}
.moqi-tool-size {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}
.moqi-tool-size input[type="range"] {
    width: 100%;
    max-width: 200px;
    accent-color: var(--ins-pink);
}

/* ========== 购物页面 INS 风格 ========== */
#shopping-page {
    z-index: 350;
    background: #fafafa;
}
.shop-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88px;
    padding: 44px 16px 10px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.shop-nav-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #222;
}
.shop-cart-icon {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.shop-cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    background: #ff3b5c;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
.shop-search-bar {
    margin: 12px 16px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.shop-search-input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 14px;
    color: #333;
    background: transparent;
}
.shop-search-input::placeholder { color: #bbb; }

/* 分类导航 */
.shop-category-bar {
    display: flex;
    gap: 0;
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 12px;
}
.shop-category-bar::-webkit-scrollbar { display: none; }
.shop-cat-item {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 13px;
    color: #888;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.25s;
    letter-spacing: 0.5px;
}
.shop-cat-item.active {
    color: #222;
    font-weight: 600;
    border-bottom-color: #222;
}

/* 商品网格 - 瀑布流双列 */
.shop-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 12px 100px;
}
.shop-product-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.shop-product-card:active { transform: scale(0.97); }
.shop-product-img {
    width: 100%;
    aspect-ratio: 1;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #ddd;
    overflow: hidden;
    position: relative;
}
.shop-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop-product-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 10px;
    border-radius: 10px;
    letter-spacing: 0.5px;
}
.shop-product-info {
    padding: 10px 12px 14px;
}
.shop-product-name {
    font-size: 13px;
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}
.shop-product-price {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    letter-spacing: -0.5px;
}
.shop-product-price .shop-origin-price {
    font-size: 11px;
    color: #bbb;
    text-decoration: line-through;
    font-weight: 400;
    margin-left: 6px;
}
.shop-product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}
.shop-product-sold {
    font-size: 11px;
    color: #bbb;
}
.shop-quick-add {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #222;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s;
}
.shop-quick-add:active { transform: scale(0.85); }

/* 购物车抽屉 */
.shop-cart-drawer {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.shop-cart-mask {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    animation: shopFadeIn 0.25s ease;
}
.shop-cart-panel {
    position: relative;
    background: #fff;
    border-radius: 20px 20px 0 0;
    max-height: 65vh;
    display: flex;
    flex-direction: column;
    animation: shopSlideUp 0.3s ease;
}
@keyframes shopFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes shopSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.shop-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #f0f0f0;
}
.shop-cart-title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
}
.shop-cart-clear {
    font-size: 13px;
    color: #999;
    cursor: pointer;
}
.shop-cart-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px;
    min-height: 120px;
}
.shop-cart-empty {
    text-align: center;
    color: #ccc;
    font-size: 14px;
    padding: 40px 0;
}
.shop-cart-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
    gap: 12px;
}
.shop-cart-item-img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    overflow: hidden;
}
.shop-cart-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop-cart-item-info {
    flex: 1;
    min-width: 0;
}
.shop-cart-item-name {
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shop-cart-item-spec {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}
.shop-cart-item-price {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    margin-top: 4px;
}
.shop-cart-qty {
    display: flex;
    align-items: center;
    gap: 10px;
}
.shop-qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #666;
    cursor: pointer;
    transition: all 0.15s;
}
.shop-qty-btn:active { background: #f5f5f5; }
.shop-qty-num {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    min-width: 20px;
    text-align: center;
}
.shop-cart-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid #f0f0f0;
    background: #fff;
}
.shop-cart-total {
    font-size: 14px;
    color: #666;
}
.shop-total-price {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin-left: 4px;
}
.shop-checkout-btn {
    padding: 10px 28px;
    background: #222;
    color: #fff;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 1px;
    transition: opacity 0.2s;
}
.shop-checkout-btn:active { opacity: 0.8; }

/* 商品详情弹窗 */
.shop-detail-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 510;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: shopFadeIn 0.2s ease;
}
.shop-detail-content {
    background: #fff;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    animation: shopSlideUp 0.3s ease;
}
.shop-detail-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}
.shop-detail-img {
    width: 100%;
    aspect-ratio: 1;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    overflow: hidden;
}
.shop-detail-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop-detail-info {
    padding: 20px;
}
.shop-detail-name {
    font-size: 17px;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
    margin-bottom: 8px;
}
.shop-detail-desc {
    font-size: 13px;
    color: #999;
    line-height: 1.5;
    margin-bottom: 14px;
}
.shop-detail-price {
    font-size: 24px;
    font-weight: 700;
    color: #222;
    margin-bottom: 20px;
}
.shop-detail-specs {
    margin-bottom: 20px;
}
.shop-spec-label {
    font-size: 13px;
    color: #999;
    margin-bottom: 10px;
}
.shop-spec-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.shop-spec-btn {
    padding: 6px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
}
.shop-spec-btn.active {
    border-color: #222;
    color: #222;
    font-weight: 600;
    background: #f8f8f8;
}
.shop-detail-actions {
    padding-top: 10px;
}
.shop-add-cart-btn {
    width: 100%;
    padding: 14px;
    background: #222;
    color: #fff;
    border-radius: 28px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 1px;
    transition: opacity 0.2s;
}
.shop-add-cart-btn:active { opacity: 0.8; }

/* 结算页面 */
.shop-checkout-page {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #f7f7f7;
    z-index: 520;
    display: flex;
    flex-direction: column;
    animation: shopSlideIn 0.3s ease;
}
@keyframes shopSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.shop-checkout-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 100px;
}
.shop-checkout-section {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.shop-section-icon {
    width: 36px;
    height: 36px;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.shop-address-info { flex: 1; }
.shop-address-name {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    margin-bottom: 4px;
}
.shop-address-detail {
    font-size: 12px;
    color: #999;
    line-height: 1.4;
}
.shop-checkout-items {
    background: #fff;
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 12px;
}
.shop-checkout-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
}
.shop-checkout-item:last-child { border-bottom: none; }
.shop-checkout-item-img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    overflow: hidden;
}
.shop-checkout-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop-checkout-item-info { flex: 1; }
.shop-checkout-item-name {
    font-size: 13px;
    color: #333;
    margin-bottom: 4px;
}
.shop-checkout-item-spec {
    font-size: 11px;
    color: #aaa;
}
.shop-checkout-item-right {
    text-align: right;
}
.shop-checkout-item-price {
    font-size: 14px;
    font-weight: 600;
    color: #222;
}
.shop-checkout-item-qty {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

/* 送给谁 */
.shop-buyfor-section {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
}
.shop-buyfor-options {
    display: flex;
    gap: 12px;
}
.shop-buyfor-self,
.shop-buyfor-friend {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border-radius: 12px;
    border: 2px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.2s;
    background: #fafafa;
}
.shop-buyfor-self:hover,
.shop-buyfor-friend:hover {
    border-color: #ddd;
}
.shop-buyfor-self.active {
    border-color: #f5a623;
    background: #fff8f0;
}
.shop-buyfor-friend.active {
    border-color: #f5a623;
    background: #fff8f0;
}
.shop-buyfor-icon {
    font-size: 24px;
}
.shop-buyfor-label {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}
.shop-buyfor-selected {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 14px;
    background: #fff8f0;
    border-radius: 10px;
    border: 1px solid rgba(245, 166, 35, 0.2);
    font-size: 13px;
    color: #666;
}
.shop-buyfor-selected-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #e0e0e0;
    flex-shrink: 0;
}

/* 付款方式 */
.shop-pay-section {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
}
.shop-pay-title {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    margin-bottom: 14px;
}
.shop-pay-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.shop-pay-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 14px;
    color: #333;
}
.shop-pay-option:hover { background: #f9f9f9; }
.shop-pay-option input[type="radio"] { display: none; }
.shop-pay-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ddd;
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
}
.shop-pay-option input[type="radio"]:checked + .shop-pay-radio {
    border-color: #222;
}
.shop-pay-option input[type="radio"]:checked + .shop-pay-radio::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #222;
}

/* 分期选项 */
.shop-installment-section {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
}
.shop-installment-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.shop-inst-item {
    padding: 14px 12px;
    border: 1.5px solid #eee;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.shop-inst-item.active {
    border-color: #222;
    background: #fafafa;
}
.shop-inst-label {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    margin-bottom: 2px;
}
.shop-inst-desc {
    font-size: 11px;
    color: #999;
}

/* 金额汇总 */
.shop-summary-section {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
}
.shop-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #666;
    padding: 6px 0;
}
.shop-summary-row.shop-summary-total {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    padding-top: 12px;
    margin-top: 6px;
    border-top: 1px solid #f0f0f0;
}
.shop-installment-info {
    text-align: center;
    font-size: 12px;
    color: #888;
    margin-top: 8px;
    padding: 8px;
    background: #f9f9f9;
    border-radius: 8px;
}
.shop-installment-info span {
    font-weight: 600;
    color: #222;
}

/* 底部支付栏 */
.shop-checkout-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    position: sticky;
    bottom: 0;
}
.shop-checkout-total-bar {
    font-size: 14px;
    color: #666;
}
.shop-final-price {
    font-size: 22px;
    font-weight: 700;
    color: #222;
}
.shop-submit-btn {
    padding: 12px 32px;
    background: #222;
    color: #fff;
    border-radius: 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 1px;
    transition: opacity 0.2s;
}
.shop-submit-btn:active { opacity: 0.8; }

/* 支付成功弹窗 */
.shop-success-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 600;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: shopFadeIn 0.25s ease;
}
.shop-success-content {
    background: #fff;
    border-radius: 20px;
    padding: 40px 32px;
    text-align: center;
    width: 280px;
    animation: shopPopIn 0.35s ease;
}
@keyframes shopPopIn { from { transform: scale(0.8); opacity:0; } to { transform: scale(1); opacity:1; } }
.shop-success-icon { margin-bottom: 16px; }
.shop-success-text {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 8px;
}
.shop-success-amount {
    font-size: 28px;
    font-weight: 700;
    color: #07c160;
    margin-bottom: 24px;
}
.shop-success-btn {
    padding: 12px 40px;
    background: #222;
    color: #fff;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    transition: opacity 0.2s;
}
.shop-success-btn:active { opacity: 0.8; }
.shop-success-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}
.shop-success-share-btn {
    padding: 12px 24px;
    background: #fff;
    color: #333;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    transition: all 0.2s;
}
.shop-success-share-btn:active { background: #f5f5f5; }

/* ====== 自定义商品浮动按钮 + 弹窗 ====== */
.shop-custom-fab {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    cursor: pointer;
    z-index: 200;
    transition: transform 0.2s;
}
.shop-custom-fab:active { transform: scale(0.9); }
.shop-custom-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.35);
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shop-custom-panel {
    width: 320px;
    max-height: 80vh;
    background: #fff;
    border-radius: 16px;
    overflow-y: auto;
    padding: 24px 20px 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.shop-custom-title {
    font-size: 17px;
    font-weight: 600;
    color: #222;
    text-align: center;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
}
.shop-custom-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.shop-custom-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.shop-custom-field label {
    font-size: 12px;
    font-weight: 500;
    color: #666;
}
.shop-custom-field input,
.shop-custom-field select {
    padding: 10px 12px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    font-size: 14px;
    color: #222;
    background: #fafafa;
    outline: none;
    transition: border 0.2s;
    -webkit-appearance: none;
}
.shop-custom-field input:focus,
.shop-custom-field select:focus {
    border-color: #333;
    background: #fff;
}
.shop-custom-field input::placeholder { color: #ccc; }
.shop-custom-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.shop-custom-btn {
    flex: 1;
    padding: 12px 0;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.shop-custom-btn.cancel {
    background: #f5f5f5;
    color: #666;
}
.shop-custom-btn.cancel:active { background: #eee; }
.shop-custom-btn.confirm {
    background: #222;
    color: #fff;
}
.shop-custom-btn.confirm:active { background: #444; }
.shop-success-inst-info {
    font-size: 13px;
    color: #888;
    margin-bottom: 20px;
    line-height: 1.6;
    padding: 10px 16px;
    background: #f9f9f9;
    border-radius: 8px;
    text-align: left;
}

/* 好友选择弹窗 / 亲属卡选择弹窗 */
.shop-friend-picker, .shop-family-card-picker {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 550;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.shop-friend-picker-mask {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    animation: shopFadeIn 0.2s ease;
}
.shop-friend-picker-panel {
    position: relative;
    background: #fff;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    animation: shopSlideUp 0.3s ease;
}
.shop-friend-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 16px;
    font-weight: 600;
    color: #222;
}
.shop-friend-picker-close {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.shop-friend-picker-list, .shop-family-card-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.shop-friend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.15s;
}
.shop-friend-item:active { background: #f5f5f5; }
.shop-friend-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #f0f0f0;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.shop-friend-name {
    flex: 1;
    font-size: 15px;
    color: #333;
}
.shop-friend-select-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.shop-friend-item.selected .shop-friend-select-icon {
    border-color: #07c160;
    background: #07c160;
}
.shop-friend-confirm-btn {
    margin: 12px 20px 20px;
    padding: 12px;
    background: #222;
    color: #fff;
    border-radius: 24px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.shop-friend-confirm-btn:active { opacity: 0.8; }

/* 亲属卡项 */
.shop-fc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f8f8f8;
}
.shop-fc-item:active { background: #f5f5f5; }
.shop-fc-item.selected { background: #f0faf4; }
.shop-fc-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #f0f0f0;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.shop-fc-info { flex: 1; }
.shop-fc-name { font-size: 14px; font-weight: 600; color: #333; }
.shop-fc-limit { font-size: 12px; color: #999; margin-top: 2px; }
.shop-fc-remain { font-size: 12px; color: #07c160; margin-top: 2px; }
.shop-fc-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex; align-items: center; justify-content: center;
}
.shop-fc-item.selected .shop-fc-check {
    border-color: #07c160;
    background: #07c160;
}
.shop-fc-empty {
    text-align: center;
    padding: 40px 20px;
    color: #bbb;
    font-size: 14px;
}

/* 分期管理弹窗 */
.shop-installment-mgr {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 560;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: shopFadeIn 0.2s ease;
}
.shop-installment-mgr-content {
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 360px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    animation: shopPopIn 0.3s ease;
}
.shop-installment-mgr-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}
.shop-inst-record {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
}
.shop-inst-record-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}
.shop-inst-record-title {
    font-size: 14px;
    font-weight: 600;
    color: #222;
}
.shop-inst-record-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
}
.shop-inst-record-status.active {
    background: #e6f7ff;
    color: #1890ff;
}
.shop-inst-record-status.done {
    background: #f0faf4;
    color: #07c160;
}
.shop-inst-progress {
    display: flex;
    gap: 3px;
    margin-bottom: 8px;
}
.shop-inst-dot {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #e8e8e8;
}
.shop-inst-dot.paid {
    background: #07c160;
}
.shop-inst-dot.current {
    background: #1890ff;
}
.shop-inst-record-info {
    font-size: 12px;
    color: #999;
    line-height: 1.6;
}

/* 代付已选提示 */
.shop-pay-selected-friend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #f9f9f9;
    border-radius: 8px;
    font-size: 13px;
    color: #666;
}
.shop-pay-selected-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}
.shop-pay-selected-fc {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #f0faf4;
    border-radius: 8px;
    font-size: 13px;
    color: #07c160;
}

/* ===== 亲密空间样式 ===== */
.intimate-type-card:hover {
    border-color: #d5d5d5 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.intimate-type-card:active {
    transform: scale(0.97);
    border-color: #c0c0c0 !important;
}
.intimate-relation-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.04);
    transition: all 0.2s;
}
.intimate-relation-card:active {
    transform: scale(0.98);
}
.intimate-board-item {
    padding: 14px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.intimate-board-item:last-child {
    border-bottom: none;
}
.intimate-stat-item {
    text-align: center;
    flex: 1;
}
.intimate-stat-num {
    font-size: 18px;
    font-weight: 700;
    color: #262626;
    letter-spacing: -0.3px;
}
.intimate-stat-label {
    font-size: 11px;
    color: #b0b0b0;
    margin-top: 2px;
    letter-spacing: 0.3px;
}
.intimate-action-cell {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: #fff;
    cursor: pointer;
    transition: background 0.15s;
}
.intimate-action-cell:active {
    background: #f8f8f8;
}
.intimate-action-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    font-size: 18px;
    flex-shrink: 0;
}
.intimate-action-text {
    flex: 1;
    font-size: 15px;
    color: #262626;
    font-weight: 400;
}
.intimate-action-arrow {
    color: #d0d0d0;
    font-size: 13px;
}
.intimate-progress-bar {
    height: 4px;
    background: #f0f0f0;
    border-radius: 2px;
    overflow: hidden;
}
.intimate-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}
.intimate-manage-cell {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    transition: background 0.15s;
}
.intimate-manage-cell:active {
    background: #f8f8f8;
}
.intimate-manage-cell:last-child {
    border-bottom: none;
}

/* ===== 亲密关系邀请卡片（仿转账卡片白色简约风） ===== */
.intimate-req-card {
    width: 220px;
    border-radius: 12px;
    padding: 14px 16px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
}
.message-row.other .intimate-req-card {
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.message-row.self .intimate-req-card {
    background: linear-gradient(135deg, #fff0f3 0%, #ffffff 100%);
    box-shadow: 0 2px 8px rgba(255,192,203,0.1);
}
.intimate-req-card.done {
    opacity: 0.75;
}
.intimate-req-card .ir-title {
    font-size: 17px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
    letter-spacing: -0.3px;
}
.intimate-req-card.done .ir-title {
    color: #999;
}
.intimate-req-card .ir-desc {
    font-size: 13px;
    color: #999;
    margin-bottom: 12px;
}
.intimate-req-card .ir-line {
    height: 1px;
    background-color: rgba(0,0,0,0.04);
    width: 100%;
    margin-bottom: 8px;
}
.intimate-req-card .ir-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.intimate-req-card .ir-footer-text {
    font-size: 12px;
    color: #b0b0b0;
    font-weight: 400;
}
.intimate-req-card .ir-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e8b4c8;
}
.intimate-req-card.done .ir-dot {
    background: #c0c0c0;
}
/* 催回复按钮（已废弃，保留兼容旧卡片） */
.intimate-req-card .ir-action {
    display: none;
}
/* 接受/婉拒按钮组 */
.intimate-req-card .ir-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.intimate-req-card .ir-btn {
    flex: 1;
    text-align: center;
    padding: 7px 0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.intimate-req-card .ir-accept {
    background: #333;
    color: #fff;
}
.intimate-req-card .ir-accept:active {
    background: #555;
}
.intimate-req-card .ir-reject {
    background: #f5f5f5;
    color: #999;
}
.intimate-req-card .ir-reject:active {
    background: #eee;
}