/* ========================================
   樺雲智聯 - 手机版专属样式
   设计原则：触摸友好、垂直布局、快速加载
   ======================================== */

@font-face {
    font-family: 'YouShe';
    src: url('https://birchcloud.s3.bitiful.net/website_cn/ttf/DingTalk%20JinBuTi.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 樺雲智聯 四个繁体字专用字体，unicode-range 精确匹配，不影响其他文字 */
@font-face {
    font-family: 'YouShe';
    src: url('https://birchcloud.s3.bitiful.net/website_cn/ttf/jf-openhuninn-2.1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+6A3A, U+96F2, U+667A, U+806F; /* 樺 雲 智 聯 */
}

/* ===== CSS 变量 ===== */
:root {
    --color-primary: #ff9933;
    --color-primary-light: #ffaa55;
    --color-bg-dark: #0a1a2e;
    --color-bg-section: #0d2240;
    --color-bg-card: rgba(255, 255, 255, 0.05);
    --color-text-white: #ffffff;
    --color-text-muted: rgba(255, 255, 255, 0.7);
    --color-border: rgba(255, 255, 255, 0.1);
    --gradient-primary: linear-gradient(135deg, #ff9933 0%, #ffaa55 100%);
    --gradient-hero: linear-gradient(135deg, #1a3a5c 0%, #2d5a7b 50%, #ff9966 100%);
    --header-height: 56px;
    --touch-min: 44px; /* 最小触摸目标尺寸 */
    --radius-card: 16px;
    --radius-btn: 12px;
    --section-padding: 60px 20px;
}

/* ===== 重置 & 基础 ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    /* 防止 iOS 字体自动缩放 */
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'YouShe', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
                 'Microsoft YaHei', 'Segoe UI', sans-serif;
    color: var(--color-text-white);
    overflow-x: hidden;
    line-height: 1.6;
    /* 平滑滚动惯性（iOS） */
    -webkit-overflow-scrolling: touch;
}

/* ===== 悬浮汉堡按钮（固定在左上角，浮在图片上）===== */
.m-menu-btn {
    position: fixed;
    top: 12px;
    left: 16px;
    z-index: 1000;
    width: 39px;
    height: 39px;
    background: rgba(10, 26, 46, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4.5px;
    padding: 7.5px;
    opacity: 0.5;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.m-menu-btn:active {
    background: rgba(10, 26, 46, 0.85);
}

.m-menu-btn span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--color-text-white);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* 汉堡菜单激活状态 → X */
.m-menu-btn.active span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.m-menu-btn.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.m-menu-btn.active span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ===== 抽屉遮罩 ===== */
.m-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.m-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ===== 抽屉导航 ===== */
.m-drawer {
    position: fixed;
    top: 0;
    right: calc(-1 * min(182px, 52vw));
    width: min(182px, 52vw);
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(30, 80, 140, 1.0) 0%,
        rgba(30, 80, 140, 0.20) 100%
    );
    z-index: 1002;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.m-drawer.active {
    right: 0;
}

.m-drawer-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 28px;
    border-bottom: 1px solid var(--color-border);
    min-height: calc(var(--header-height) * 1.4);
}

.m-drawer-logo {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    flex: 1;
    font-family: 'YouShe', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: linear-gradient(135deg, #2e6db4 0%, #4d8fd1 35%, #c8922a 65%, #e8b84b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter:
        drop-shadow(0.5px 0 1px rgba(0,0,0,0.35))
        drop-shadow(-0.5px 0 1px rgba(0,0,0,0.35))
        drop-shadow(0 0.5px 1px rgba(0,0,0,0.35))
        drop-shadow(0 -0.5px 1px rgba(0,0,0,0.35));
}

.m-drawer-close {
    width: calc(var(--touch-min) * 1.4);
    height: calc(var(--touch-min) * 1.4);
    background: transparent;
    border: none;
    color: var(--color-text-white);
    font-size: 31.4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s ease;
    line-height: 1;
}

.m-drawer-close:active {
    background: rgba(255, 255, 255, 0.1);
}

.m-drawer-nav {
    list-style: none;
    padding: 17px 0;
    flex: 1;
}

.m-drawer-nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.m-drawer-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 17px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 17.9px;
    font-family: 'YouShe', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    min-height: calc(var(--touch-min) * 1.4);
    transition: background 0.2s ease, color 0.2s ease;
    gap: 8px;
    text-align: center;
}

.m-drawer-link:active {
    background: rgba(255, 153, 51, 0.15);
    color: var(--color-primary);
}

.m-drawer-footer {
    padding: 28px;
    border-top: 1px solid var(--color-border);
}

.m-switch-desktop {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 17px 28px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 15.7px;
    min-height: calc(var(--touch-min) * 1.4);
    transition: all 0.2s ease;
    gap: 8px;
    text-align: center;
}

.m-switch-desktop:active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-text-white);
}

/* ===== Hero 区域 ===== */
.m-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 56vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    overflow: hidden;
    background-color: #1a5878;
    padding: 0 24px 0;
    /* 底部留出箭头空间，用 padding-bottom 撑开 */
    padding-bottom: 48px;
}

/* Hero 底部向水体延伸的渐变舌头，覆盖在水体顶部 */
.m-hero::after {
    content: '';
    position: absolute;
    bottom: -24px;
    left: 0;
    right: 0;
    height: 48px;
    background: linear-gradient(
        to bottom,
        rgba(26, 88, 120, 0.65) 0%,
        rgba(26, 88, 120, 0.0) 100%
    );
    z-index: 5;
    pointer-events: none;
}

/* 背景图片 */
.m-hero-bg {
    position: absolute;
    inset: 0;
    width: calc(100% + 30px);
    height: 100%;
    object-fit: cover;
    /*
     * 原图 7660×3284，左侧是雪地建筑群，右侧是天空
     * x=0% 锁定最左侧，y=75% 偏下露出地景而非天空
     */
    object-position: 0% 75%;
    transform: translateX(-30px);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
    user-select: none;
}

.m-hero-bg.loaded {
    opacity: 1;
}

/* 图片加载失败时的渐变兜底 */
.m-hero.image-error {
    background: var(--gradient-hero);
}

/* 渐变遮罩：顶部90%透明，中部70%透明，底部与水体同色30%透明，平滑过渡 */
.m-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(26, 88, 120, 0.10)  0%,
        rgba(26, 88, 120, 0.30) 50%,
        rgba(26, 88, 120, 0.50) 100%
    );
    pointer-events: none;
}

/* 星星容器 */
.m-star-container {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

/* 单颗星星 */
.m-star {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(255, 245, 220, 0.9) 0%,
        rgba(255, 235, 200, 0.6) 40%,
        transparent 100%
    );
    box-shadow:
        0 0 4px 1px rgba(255, 245, 220, 0.5),
        0 0 8px 2px rgba(255, 220, 180, 0.2);
}

.m-star.active {
    animation: mStarLife 10s ease-out forwards;
}

@keyframes mStarLife {
    0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.5); }
    5%   { opacity: 0.7;  transform: translate(-50%, -50%) scale(1.1); }
    15%  { opacity: 0.2;  transform: translate(-50%, -50%) scale(0.85); }
    30%  { opacity: 0.8;  transform: translate(-50%, -50%) scale(1.15); }
    50%  { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
    75%  { opacity: 0.3;  transform: translate(-50%, -50%) scale(0.9); }
    100% { opacity: 0;    transform: translate(-50%, -50%) scale(0.6); }
}

/* Hero 主内容：右上角定位 */
.m-hero-content {
    position: absolute;
    top: 32px;
    right: 0;
    left: 0;
    z-index: 10;
    text-align: right;
    padding: 0 16px;
}

.m-hero-title {
    font-size: clamp(20px, 5.5vw, 30px);
    font-weight: 700;
    font-family: 'YouShe', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    color: var(--color-text-white);
    line-height: 1.2;
    margin-bottom: 8px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
    word-break: keep-all;
}

.m-hero-subtitle {
    font-size: clamp(9.6px, 2.94vw, 12.6px); /* clamp(8px,2.45vw,10.5px) × 1.2 */
    font-family: 'YouShe', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 20px;
    line-height: 1.6;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* 探索按钮（同步缩小 30%） */
.m-btn-explore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7.7px 19.6px; /* 原值 × 0.7 */
    background: var(--gradient-primary);
    color: var(--color-text-white);
    text-decoration: none;
    font-size: 13.65px; /* 10.5px × 1.3 */
    font-family: 'YouShe', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-weight: 600;
    border-radius: var(--radius-btn);
    min-height: calc(var(--touch-min) * 0.7); /* 44px × 0.7 = 30.8px */
    box-shadow: 0 4px 20px rgba(255, 153, 51, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    letter-spacing: 0.5px;
}

.m-btn-explore:active {
    transform: scale(0.97);
    box-shadow: 0 2px 12px rgba(255, 153, 51, 0.3);
}

/* 向下滚动提示（可点击链接） */
/* 向下滚动提示（在 Hero 内部底部绝对居中） */
.m-scroll-hint {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    text-decoration: none;
    animation: scrollBounce 2s ease-in-out infinite;
    background: transparent;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0);   opacity: 0.7; }
    50%       { transform: translateX(-50%) translateY(5px); opacity: 1;   }
}

.m-scroll-arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid rgba(255, 255, 255, 0.75);
    border-bottom: 2px solid rgba(255, 255, 255, 0.75);
    transform: rotate(45deg) translate(-3px, -3px);
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0);   opacity: 0.7; }
    50%       { transform: translateX(-50%) translateY(5px); opacity: 1;   }
}

/* ===== 页脚 ===== */
.m-footer {
    background: #060f1e;
    padding: 32px 20px;
    border-top: 1px solid var(--color-border);
}

.m-footer-inner {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.m-footer-logo {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-white);
    letter-spacing: 1px;
}

.m-footer-copy {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

.m-footer-desktop-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 13px;
    min-height: var(--touch-min);
    transition: all 0.2s ease;
    margin-top: 4px;
}

.m-footer-desktop-link:active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-white);
}

/* ===== 减少动画（用户偏好）===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .m-scroll-hint {
        display: none;
    }
}

/* ===== 横屏适配 ===== */
@media (orientation: landscape) and (max-height: 500px) {
    .m-hero {
        aspect-ratio: auto;
        height: 100vh;
        max-height: none;
        padding: 0 24px 20px;
    }

    .m-hero-title {
        font-size: 18px; /* 15px × 1.2 */
        margin-bottom: 6px;
    }

    .m-hero-subtitle {
        font-size: 9.6px; /* 8px × 1.2 */
        margin-bottom: 14px;
    }

    .m-scroll-hint {
        display: none;
    }
}

/* ===== 大屏手机适配（≥ 414px）===== */
@media (min-width: 414px) {
    .m-water-content {
        padding: 72px 28px 96px;
    }
}

/* ===== 平板适配（≥ 600px，仍在手机版范围内）===== */
@media (min-width: 600px) {
    .m-card-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .m-card-list .m-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .m-contact-actions {
        flex-direction: row;
    }

    .m-contact-btn {
        flex: 1;
    }
}

/* ===== ICP 备案号 ===== */
.m-footer-icp {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
}

.m-footer-icp a {
    color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
    transition: color 0.2s ease;
}

.m-footer-icp a:hover,
.m-footer-icp a:active {
    color: rgba(255, 255, 255, 0.65);
}

/* =============================================
   水体区域 - 手机版
   高端机：Canvas 焦散 + 粒子
   低端机：CSS 光斑 + 粒子
   ============================================= */

/* ── 区域容器 ── */
.m-water-section {
    position: relative;
    width: 100%;
    min-height: 160vh;
    overflow: hidden;

    /* 深蓝色调，亮度适度提升 */
    background:
        linear-gradient(
            180deg,
            #1a5878 0%,
            #185470 15%,
            #164e68 30%,
            #144860 50%,
            #124258 70%,
            #103c50 85%,
            #0e3648 100%
        ),
        radial-gradient(ellipse 55% 40% at 12% 75%, rgba(20,70,110,0.25) 0%, transparent 60%),
        radial-gradient(ellipse 45% 35% at 82% 65%, rgba(18,65,105,0.20) 0%, transparent 60%),
        radial-gradient(ellipse 30% 18% at 35% 30%, rgba(60,130,200,0.10) 0%, transparent 50%);

    background-size: 100% 100%;
}

/* 体积光散射层 */
.m-water-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 25% at 50% 95%, rgba(245,175,50,0.07) 0%, transparent 55%),
        radial-gradient(ellipse 65% 15% at 50% 15%, rgba(180,205,235,0.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* ── Canvas（高端机） ── */
#mWaterCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    opacity: 0.82;
    mix-blend-mode: screen;
}

/* 低端机隐藏 Canvas（data-perf="low" 时 JS 不会初始化，但保险起见也用 CSS 隐藏） */
.m-water-section[data-perf="low"] #mWaterCanvas {
    display: none;
}

/* ── 内容层：承载产品/关于/联系所有内容 ── */
.m-water-content {
    position: relative;
    z-index: 10;
    padding: 60px 20px 80px;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 64px;
    text-align: center;
}

/* 水体内容块：每个主题区域 */
.m-wc-block {
    /* 无背景，直接叠在水体动画上 */
}

/* 水体内区域标题 */
.m-wc-title {
    font-size: clamp(20px, 5.5vw, 28px);
    font-weight: 700;
    color: var(--color-text-white);
    margin-bottom: 10px;
    text-align: center;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* 水体内区域副标题 */
.m-wc-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
    margin-bottom: 28px;
    line-height: 1.7;
}

/* ===== 卡片列表 ===== */
.m-card-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.m-card {
    /* 半透明毛玻璃，叠在水体上更好看 */
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-card);
    padding: 22px 18px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform 0.2s ease, background 0.2s ease;
    cursor: default;
}

.m-card:active {
    transform: scale(0.99);
    background: rgba(255, 255, 255, 0.10);
}

.m-card-icon {
    font-size: 34px;
    margin-bottom: 12px;
    line-height: 1;
}

.m-card-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-white);
    margin-bottom: 8px;
}

.m-card-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.7;
}

/* ===== 数据统计格 ===== */
.m-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 28px;
}

.m-stat {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-card);
    padding: 18px 14px;
    text-align: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.m-stat-num {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
    margin-bottom: 5px;
}

.m-stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.m-about-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.85;
    text-align: center;
}

/* ===== 联系按钮 ===== */
.m-contact-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}

.m-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 24px;
    border-radius: var(--radius-btn);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    min-height: var(--touch-min);
    transition: transform 0.2s ease, opacity 0.2s ease;
    letter-spacing: 0.3px;
}

.m-contact-btn:active {
    transform: scale(0.97);
    opacity: 0.85;
}

.m-contact-btn-primary {
    background: var(--gradient-primary);
    color: var(--color-text-white);
    box-shadow: 0 4px 20px rgba(255, 153, 51, 0.35);
}

.m-contact-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-white);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.m-contact-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.m-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.m-contact-icon {
    font-size: 16px;
}

/* ─────────────────────────────────────────
   粒子系统（高端 40个 / 低端 20个）
   类名前缀 mp- 避免与电脑版 p- 冲突
   ───────────────────────────────────────── */
.mp {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.mp.mp-small {
    width: 7px;
    height: 7px;
    bottom: 5%;
    filter: blur(0.3px);
    background: radial-gradient(circle, rgba(255,211,115,0.76) 0%, rgba(247,187,83,0.55) 40%, rgba(247,175,71,0.22) 75%, transparent 95%);
    animation-name: mpRiseSmall;
}

.mp.mp-medium {
    width: 14px;
    height: 14px;
    bottom: 4%;
    filter: blur(1.5px);
    background: radial-gradient(circle, rgba(255,207,107,0.62) 0%, rgba(247,183,79,0.40) 40%, rgba(247,171,67,0.12) 75%, transparent 95%);
    animation-name: mpRiseMedium;
}

.mp.mp-large {
    width: 24px;
    height: 24px;
    bottom: 3%;
    filter: blur(3.5px);
    background: radial-gradient(circle, rgba(255,203,103,0.46) 0%, rgba(247,179,75,0.26) 40%, rgba(247,163,63,0.05) 75%, transparent 95%);
    animation-name: mpRiseLarge;
}

.mp.mp-xl {
    width: 40px;
    height: 40px;
    bottom: 2%;
    filter: blur(8px);
    background: radial-gradient(circle, rgba(255,199,95,0.30) 0%, rgba(247,171,71,0.12) 40%, transparent 75%);
    animation-name: mpRiseXL;
}

/* 上升动画：高度缩短为 160vh（对应 min-height:160vh） */
@keyframes mpRiseSmall {
    0%    { transform: translateY(0)      scale(0.3); opacity: 0.36; }
    3%    { transform: translateY(0)      scale(0.3); opacity: 0.36; }
    95%   { transform: translateY(-155vh) scale(2.4); opacity: 0.78; }
    100%  { transform: translateY(-165vh) scale(2.8); opacity: 0;    }
}
@keyframes mpRiseMedium {
    0%    { transform: translateY(0)      scale(0.25); opacity: 0.32; }
    2.5%  { transform: translateY(0)      scale(0.25); opacity: 0.32; }
    95%   { transform: translateY(-150vh) scale(2.0);  opacity: 0.78; }
    100%  { transform: translateY(-160vh) scale(2.3);  opacity: 0;    }
}
@keyframes mpRiseLarge {
    0%    { transform: translateY(0)      scale(0.2); opacity: 0.28; }
    2%    { transform: translateY(0)      scale(0.2); opacity: 0.28; }
    95%   { transform: translateY(-145vh) scale(1.6); opacity: 0.78; }
    100%  { transform: translateY(-155vh) scale(1.9); opacity: 0;    }
}
@keyframes mpRiseXL {
    0%    { transform: translateY(0)      scale(0.15); opacity: 0.24; }
    1.5%  { transform: translateY(0)      scale(0.15); opacity: 0.24; }
    95%   { transform: translateY(-140vh) scale(1.2);  opacity: 0.78; }
    100%  { transform: translateY(-150vh) scale(1.4);  opacity: 0;    }
}

/* ─────────────────────────────────────────
   低端机：CSS 光斑（替代 Canvas 焦散）
   ───────────────────────────────────────── */
.m-css-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    /* 模糊光晕 */
    background: radial-gradient(circle,
        rgba(140, 210, 255, 0.18) 0%,
        rgba(100, 180, 240, 0.10) 40%,
        rgba(80,  160, 220, 0.04) 70%,
        transparent 100%
    );
    filter: blur(18px);
    animation: cssGlowDrift 20s ease-in-out infinite;
    mix-blend-mode: screen;
}

/* 三个光斑各自错开相位，形成自然漂移感 */
.m-css-glow.mg-1 { animation-duration: 18s; animation-delay: 0s; }
.m-css-glow.mg-2 { animation-duration: 24s; animation-delay: -8s; }
.m-css-glow.mg-3 { animation-duration: 20s; animation-delay: -4s; }

@keyframes cssGlowDrift {
    0%   { transform: translate(0,    0)    scale(1.0); opacity: 0.6; }
    25%  { transform: translate(30px, -20px) scale(1.15); opacity: 0.9; }
    50%  { transform: translate(-20px, 15px) scale(0.9);  opacity: 0.5; }
    75%  { transform: translate(15px,  25px) scale(1.1);  opacity: 0.8; }
    100% { transform: translate(0,    0)    scale(1.0); opacity: 0.6; }
}

/* ── 减少动画（用户偏好）── */
@media (prefers-reduced-motion: reduce) {
    .mp,
    .m-css-glow {
        animation: none !important;
        opacity: 0 !important;
    }
}

/* ========================================================
   潜入深海过渡动画（手机版）
   ======================================================== */

.dive-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background:
        linear-gradient(180deg,
            #0D4B6E 0%,
            #0A5A7A 15%,
            #064A6B 45%,
            #022342 75%,
            #01162E 100%
        );
    overflow: hidden;
}

.dive-overlay.active {
    pointer-events: all;
    visibility: visible;
    animation: diveOverlayAnim 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes diveOverlayAnim {
    0%   { opacity: 0;   clip-path: inset(100% 0 0 0); }
    10%  { opacity: 1;   clip-path: inset(0% 0 0 0); }
    85%  { opacity: 1;   clip-path: inset(0% 0 0 0); }
    100% { opacity: 0;   clip-path: inset(0 0 100% 0); }
}

.dive-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    mix-blend-mode: screen;
}

.dive-wave {
    position: absolute;
    left: -10%;
    width: 120%;
    height: 80px;
    pointer-events: none;
}

.dive-wave-top {
    top: -20px;
    background: radial-gradient(ellipse 60% 100% at 50% 0%,
        rgba(100, 200, 255, 0.12) 0%, transparent 70%);
    animation: diveWaveTop 2s ease-in-out infinite;
}

.dive-wave-bottom {
    bottom: -20px;
    background: radial-gradient(ellipse 60% 100% at 50% 100%,
        rgba(20, 60, 100, 0.4) 0%, transparent 70%);
    animation: diveWaveBottom 1.8s ease-in-out infinite;
}

@keyframes diveWaveTop {
    0%, 100% { transform: translateX(0) scaleY(1); }
    50%       { transform: translateX(3%) scaleY(1.15); }
}

@keyframes diveWaveBottom {
    0%, 100% { transform: translateX(0) scaleY(1); }
    50%       { transform: translateX(-3%) scaleY(1.2); }
}

.dive-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle,
        rgba(255, 211, 115, 0.85) 0%,
        rgba(247, 175, 71, 0.4) 50%,
        transparent 100%
    );
    animation: diveParticleRise linear forwards;
}

@keyframes diveParticleRise {
    0%   { transform: translateY(0)     scale(0.4); opacity: 0; }
    10%  { opacity: 0.8; }
    85%  { transform: translateY(-110vh) scale(1.8); opacity: 0.6; }
    100% { transform: translateY(-120vh) scale(2.2); opacity: 0; }
}

.dive-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 24px;
    animation: diveTextAnim 1.5s ease forwards;
}

@keyframes diveTextAnim {
    0%   { opacity: 0; transform: translateY(16px); }
    12%  { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-16px); }
}

.dive-text-line {
    display: block;
    color: rgba(180, 220, 255, 0.75);
    font-size: 29px;
    font-weight: 400;
    letter-spacing: 2px;
    text-align: center;
    text-shadow: 0 0 20px rgba(100, 200, 255, 0.5);
}

.dive-text-highlight {
    color: rgba(255, 255, 255, 0.95);
    font-size: 29px;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
    text-shadow:
        0 0 12px rgba(100, 200, 255, 0.8),
        0 0 30px rgba(60, 160, 240, 0.4);
}

.dive-text-dots {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.dive-text-dots span {
    display: inline-block;
    color: rgba(180, 220, 255, 0.6);
    font-size: 32px;
    line-height: 1;
    animation: diveDotBounce 1.2s ease-in-out infinite;
}

.dive-text-dots span:nth-child(2) { animation-delay: 0.2s; }
.dive-text-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes diveDotBounce {
    0%, 80%, 100% { transform: translateY(0);    opacity: 0.4; }
    40%            { transform: translateY(-5px); opacity: 1;   }
}

/* ========== 功能开发中 Toast 提示 ========== */
.dev-toast {
    position: fixed;
    top: 65%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    z-index: 99998;
    padding: 11px 24px;
    background: rgba(15, 35, 65, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 153, 51, 0.3);
    border-radius: 40px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.dev-toast.dev-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ========================================
   公众号文章底部弹窗（Bottom Sheet）
   ======================================== */

/* 遮罩层 */
.wx-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.wx-sheet-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 底部弹窗主体 */
.wx-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    background: linear-gradient(
        to bottom,
        rgba(18, 45, 85, 0.98) 0%,
        rgba(10, 26, 46, 0.99) 100%
    );
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px); /* iPhone 底部安全区 */
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.wx-sheet.active {
    transform: translateY(0);
}

/* 顶部拖拽把手 */
.wx-sheet-handle {
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 12px auto 0;
}

/* 内容区 */
.wx-sheet-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 28px 8px;
    gap: 12px;
}

/* 二维码图片 */
.wx-qr-img {
    width: 180px;
    height: 180px;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
    padding: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    display: block;
}

/* 标题 */
.wx-sheet-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-white);
    letter-spacing: 1px;
    font-family: 'YouShe', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: linear-gradient(135deg, #2e6db4 0%, #4d8fd1 35%, #c8922a 65%, #e8b84b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 说明文字 */
.wx-sheet-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    line-height: 1.6;
    max-width: 260px;
}

/* 保存二维码按钮（次要样式，在复制按钮上方） */
.wx-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 300px;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-btn);
    color: var(--color-text-white);
    font-size: 15px;
    font-weight: 600;
    font-family: 'YouShe', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    letter-spacing: 0.5px;
    cursor: pointer;
    min-height: var(--touch-min);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.wx-save-btn:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.14);
}

/* 复制按钮 */
.wx-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 300px;
    padding: 14px 24px;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-btn);
    color: var(--color-text-white);
    font-size: 15px;
    font-weight: 600;
    font-family: 'YouShe', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    letter-spacing: 0.5px;
    cursor: pointer;
    min-height: var(--touch-min);
    box-shadow: 0 4px 20px rgba(255, 153, 51, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.wx-copy-btn:active {
    transform: scale(0.97);
    box-shadow: 0 2px 10px rgba(255, 153, 51, 0.25);
}

.wx-copy-icon {
    font-size: 17px;
    line-height: 1;
}

/* 复制成功 Toast */
.wx-copy-toast {
    font-size: 13px;
    color: rgba(100, 220, 140, 0.9);
    text-align: center;
    letter-spacing: 0.3px;
    height: 20px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.wx-copy-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* 关闭按钮 */
.wx-sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    cursor: pointer;
    min-height: var(--touch-min);
    letter-spacing: 1px;
    transition: color 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.wx-sheet-close:active {
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.04);
}

/* 探索产品按钮改为 button 后的重置（保持与 .m-btn-explore 视觉一致） */
button.m-btn-explore {
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 抽屉 logo 改为 button 后的重置 */
button.m-drawer-logo {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: filter 0.15s ease;
    /* 修复 button 默认样式覆盖渐变文字的问题 */
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    font-family: 'YouShe', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: linear-gradient(135deg, #2e6db4 0%, #4d8fd1 35%, #c8922a 65%, #e8b84b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* 兜底：非 webkit 内核也生效 */
    filter:
        drop-shadow(0.5px 0 1px rgba(0,0,0,0.35))
        drop-shadow(-0.5px 0 1px rgba(0,0,0,0.35))
        drop-shadow(0 0.5px 1px rgba(0,0,0,0.35))
        drop-shadow(0 -0.5px 1px rgba(0,0,0,0.35));
}

button.m-drawer-logo:active {
    filter:
        drop-shadow(0.5px 0 1px rgba(0,0,0,0.35))
        drop-shadow(-0.5px 0 1px rgba(0,0,0,0.35))
        drop-shadow(0 0.5px 1px rgba(0,0,0,0.35))
        drop-shadow(0 -0.5px 1px rgba(0,0,0,0.35))
        brightness(1.25);
}

/* ========================================
   产品选择页（全屏覆盖层）
   ======================================== */

.product-page {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
    overflow: hidden;
}

.product-page.active {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

/* 背景：由左向右紫色到黄色渐变，浅色加深30% */
.product-page-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #a06af2 0%, #c27ef9 35%, #f8b83c 70%, #f8d45a 100%);
    backdrop-filter: blur(0px);
    z-index: 0;
}

/* 内容层 */
.product-page-inner {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 420px;
    padding: 0 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: -4vh;
}

/* 返回按钮 - 固定在右下角 */
.product-page-back {
    position: fixed;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    right: 24px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(30, 20, 60, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 24px;
    color: rgba(255, 255, 255, 0.90);
    font-size: 15px;
    padding: 10px 22px;
    cursor: pointer;
    min-height: var(--touch-min);
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    z-index: 99999;
    text-decoration: none;
}

.product-page-back:active {
    background: rgba(30, 20, 60, 0.75);
    color: #ffffff;
    transform: scale(0.96);
}

.product-page-back-arrow {
    font-size: 20px;
    line-height: 1;
    margin-top: -1px;
}

/* 标题 */
.product-page-title {
    font-size: clamp(22px, 6vw, 30px);
    font-weight: 700;
    font-family: 'YouShe', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    color: #1a1a1a;
    letter-spacing: 1px;
    text-align: center;
    text-shadow: none;
    margin-bottom: 2px;
}

.product-page-subtitle {
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.60);
    text-align: center;
    margin-bottom: 20px;
}

/* 产品卡片网格 */
.product-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
}

/* 单个产品卡片 */
.product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 16px 22px;
    background: rgba(217, 217, 217, 0.30);
    border: 1px solid rgba(0, 0, 0, 0.40);
    border-radius: 20px;
    cursor: pointer;
    min-height: 160px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 20;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 6px 16px rgba(0, 0, 0, 0.13),
        0 12px 32px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.product-card:hover {
    transform: scale(1.06);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.60),
        0 0 16px 4px rgba(255, 255, 255, 0.55),
        0 0 40px 10px rgba(255, 255, 255, 0.30),
        0 8px 32px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.50);
    background: rgba(255, 255, 255, 0.40);
}

.product-card:active {
    transform: scale(1.04);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.60),
        0 0 16px 4px rgba(255, 255, 255, 0.55),
        0 0 40px 10px rgba(255, 255, 255, 0.30),
        0 8px 32px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.50);
    background: rgba(255, 255, 255, 0.40);
}

/* 图标容器 */
.product-card-icon {
    width: 94px;
    height: 94px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.product-card-icon--purple {
    background: none;
    box-shadow: none;
}

.product-card-icon--yellow {
    background: none;
    box-shadow: none;
}

.product-card-img {
    width: 94px;
    height: 94px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 8px rgba(0, 0, 0, 0.16))
        drop-shadow(0 4px 12px rgba(0, 0, 0, 0.13));
}

.product-card-emoji {
    font-size: 36px;
    line-height: 1;
    align-items: center;
    justify-content: center;
}

/* 文字 */
.product-card-label {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    font-family: 'YouShe', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    letter-spacing: 0.5px;
    text-align: center;
    text-shadow: none;
}

.product-card-desc {
    font-size: 11px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.65);
    text-align: center;
    line-height: 1.4;
    text-shadow: none;
    background: rgba(255, 255, 255, 0.30);
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    padding: 3px 10px;
    letter-spacing: 0.5px;
}

/* ========================================
   微信小程序二维码弹窗
   ======================================== */
.wxmini-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.wxmini-modal-content {
    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,249,196,0.98) 100%);
    padding: 20px 20px;
    border-radius: 16px;
    width: 100%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(255, 152, 0, 0.4);
    animation: wxMiniModalAppear 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes wxMiniModalAppear {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.wxmini-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.wxmini-modal-subtitle {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
}

.wxmini-image-container {
    width: 200px;
    height: 200px;
    margin: 0 auto 12px;
    background: white;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 长按提示文字 */
.wxmini-longpress-hint {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    color: #e67e22;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    animation: hintFadeIn 0.5s ease forwards;
    pointer-events: none;
}

@keyframes hintFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-5px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes hintFadeOut {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to   { opacity: 0; transform: translateX(-50%) translateY(-5px); }
}

/* 跑马灯容器 */
.wxmini-marquee-container {
    width: 100%;
    overflow: hidden;
    background: rgba(255, 152, 0, 0.1);
    border-radius: 6px;
    padding: 6px 0;
    margin-bottom: 12px;
}

/* 跑马灯内容 */
.wxmini-marquee {
    display: flex;
    white-space: nowrap;
    animation: marqueeScroll 10s linear infinite;
}

.wxmini-marquee span {
    color: #e67e22;
    font-size: 13px;
    font-weight: 500;
    padding: 0 40px;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.wxmini-qr-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 脉冲提示动画 - 引导用户长按 */
.wxmini-qr-img.pulse-hint {
    animation: qrPulseHint 1.5s ease-in-out infinite;
}

@keyframes qrPulseHint {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255, 152, 0, 0),
                    0 0 20px 5px rgba(255, 152, 0, 0.3);
    }
}

.wxmini-tip {
    color: #e67e22;
    font-size: 13px;
    padding: 8px 12px;
    background: rgba(254,249,243,0.95);
    border-radius: 6px;
    border: 1px solid #fdebd0;
    margin-bottom: 14px;
    animation: wxMiniPulse 2s infinite;
}

@keyframes wxMiniPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.75; }
}

.wxmini-save-success {
    color: #27ae60;
    background: rgba(234,250,241,0.95);
    border: 1px solid #d4efdf;
    font-size: 14px;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 14px;
}

.wxmini-save-btn {
    background: linear-gradient(135deg, #07c160, #06ad56);
    color: white;
    border: none;
    padding: 8px 13px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
    box-shadow: 0 3px 8px rgba(7,193,96,0.3);
    transition: all 0.3s;
}

.wxmini-save-btn:active {
    transform: scale(0.98);
}

.wxmini-close-btn {
    background: rgba(245,245,245,0.9);
    color: #666;
    border: none;
    padding: 7px 13px;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    font-size: 12px;
    margin-bottom: 10px;
    transition: background 0.2s;
}

.wxmini-close-btn:active {
    background: rgba(225,225,225,0.95);
}

.wxmini-guide {
    color: #666;
    font-size: 12px;
    line-height: 1.6;
    padding-top: 12px;
    border-top: 1px solid rgba(240,240,240,0.8);
    text-align: center;
}

.wxmini-guide strong {
    color: #333;
}


/* ========================================
   骑手配送端提示弹窗
   ======================================== */
.runner-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 24px;
}

.runner-modal[hidden] {
    display: none;
}

.runner-modal__box {
    background: #fff;
    border-radius: 12px;
    padding: 24px 20px 16px;
    max-width: 320px;
    width: 100%;
    text-align: center;
    position: relative;
}

.runner-modal__text {
    font-size: 14px;
    color: #333;
    line-height: 1.7;
    margin: 0 0 20px;
}

.runner-modal__text strong {
    color: #111;
    font-weight: 600;
}

/* 右上角倒计时 */
.runner-modal__countdown {
    position: absolute;
    top: 12px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    color: #999;
    line-height: 1;
}

.runner-modal__hourglass {
    font-size: 15px;
    display: inline-block;
    transform-origin: center;
}

.runner-modal__hourglass.spinning {
    animation: hourglassSpin 2s linear infinite;
}

@keyframes hourglassSpin {
    0%   { transform: rotate(0deg);   }
    50%  { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}

.runner-modal__count {
    font-size: 13px;
    font-weight: 600;
    color: #f5a623;
    min-width: 28px;
    text-align: left;
    display: inline-block;
}

.runner-modal__actions {
    display: flex;
    gap: 10px;
}

.runner-modal__cancel {
    flex: 1;
    background: #f0f0f0;
    color: #555;
    border: none;
    border-radius: 8px;
    padding: 10px 0;
    font-size: 15px;
    cursor: pointer;
}

.runner-modal__cancel:active {
    background: #e0e0e0;
}

.runner-modal__confirm {
    flex: 1;
    background: #f5a623;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 0;
    font-size: 15px;
    cursor: pointer;
}

.runner-modal__confirm:active {
    background: #e09510;
}