* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --phone-width: 385px;
    --phone-height: 790px;
    --phone-radius: 50px;
    --phone-border: 4px;
    --island-width: 115px;
    --island-height: 34px;
    --island-top: 10px;

    /* ===== 主题变量（由 system-data.js 的 theme 字段切换）===== */
    --wallpaper: url('wallpaper.jpg');          /* 壁纸，applySystemData() 会覆盖 */
    --battery-level: 64%;                       /* 状态栏电量条宽度，applySystemData() 会覆盖 */
    --accent-blue: #007AFF;                     /* iOS 系统蓝：返回箭头/链接，所有主题不变 */
    --wechat-primary: #07C160;                  /* 微信主色：发送按钮/菜单图标 */
    --wechat-link: #576B95;                     /* 微信链接/导航返回色 */
    --wechat-bubble-sent: #95EC69;              /* 微信发出的消息气泡 */
    --cover-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  /* 朋友圈封面/抖音头图 */
}

/* 粉色系主题：system-data.js 里 theme: "pink" */
[data-theme="pink"] {
    --wechat-primary: #FF6B9D;
    --wechat-link: #E0679B;
    --wechat-bubble-sent: #FFB6C1;
    --cover-gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

/* 天蓝系主题：system-data.js 里 theme: "blue" */
[data-theme="blue"] {
    --wechat-primary: #4DABF7;
    --wechat-link: #4D96D9;
    --wechat-bubble-sent: #87CEEB;
    --cover-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

/* ===== 屏幕适配（参考/屏幕适配.doc：大屏显示手机边框，手机全屏无边框） ===== */
body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 深色径向渐变"展台"背景：只在电脑/Pad 等大屏可见 */
    background: radial-gradient(ellipse at 50% 30%, #2a2a30, #0b0b0d 70%);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
}

/* iPhone 外框：尺寸随内容（屏幕）自适应 */
.phone-frame {
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    border-radius: calc(var(--phone-radius) + var(--phone-border));
    padding: var(--phone-border);
    box-shadow:
        0 0 0 2px #3a3a3a,
        0 25px 60px rgba(0,0,0,0.6),
        0 0 100px rgba(0,0,0,0.4);
    position: relative;
}

.phone-frame::before {
    content: '';
    position: absolute;
    right: -3px;
    top: 180px;
    width: 3px;
    height: 90px;
    background: #2a2a2a;
    border-radius: 0 2px 2px 0;
}

.phone-frame::after {
    content: '';
    position: absolute;
    left: -3px;
    top: 120px;
    width: 3px;
    height: 60px;
    background: #2a2a2a;
    border-radius: 2px 0 0 2px;
    box-shadow: 
        0 80px 0 #2a2a2a,
        0 140px 0 #2a2a2a;
}

.phone-screen {
    /* 关键：宽度取三个值中的最小值 ——
       1) 视口宽（减去左右边框）  2) 按视口高换算的机宽（保证整机不超出屏幕）  3) 设计最大宽 385px
       大屏 = 385px 上限生效（边框可见）；矮窗口 = 高度换算生效（整机等比缩小不裁切）
       注：0.4873 = 屏幕比例 385/790；先写 vh 回退、再写 dvh（支持的浏览器自动采用后者） */
    width: min(
        calc(100vw - var(--phone-border) * 2 - 4px),
        calc((100vh - 48px) * 0.4873),
        var(--phone-width)
    );
    width: min(
        calc(100vw - var(--phone-border) * 2 - 4px),
        calc((100dvh - 48px) * 0.4873),
        var(--phone-width)
    );
    aspect-ratio: 385 / 790;   /* 屏幕比例（纯数字） */
    background: #000;
    border-radius: var(--phone-radius);
    overflow: hidden;
    position: relative;
}

/* 手机打开（≤500px）：全屏无边框 —— 外壳装饰关闭，屏幕撑满整个可视区 */
@media (max-width: 500px) {
    body {
        padding: 0;
        background: #000;
    }

    .phone-frame {
        padding: 0;
        background: none;
        border-radius: 0;
        box-shadow: none;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
    }

    /* 侧边按键在大屏才可见 */
    .phone-frame::before,
    .phone-frame::after {
        display: none;
    }

    .phone-screen {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
    }
}

/* 灵动岛 */
.dynamic-island {
    position: absolute;
    top: var(--island-top);
    left: 50%;
    transform: translateX(-50%);
    width: var(--island-width);
    height: var(--island-height);
    background: #000;
    border-radius: 20px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    overflow: hidden;
    /* 灵动岛整体迟滞感 */
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.3s ease, height 0.3s ease;
    transform-origin: top center;
}

/* 点击灵动岛时整体轻微放大（带迟滞回弹） */
.dynamic-island:active {
    transform: translateX(-50%) scale(1.15);
}

.island-camera {
    width: 12px;
    height: 12px;
    background: #1a1a2e;
    border-radius: 50%;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.8);
    transition: opacity 0.3s;
}

/* 灵动岛音乐显示 */
.island-music {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    cursor: pointer;
}

.island-music.active {
    display: flex;
}

.island-music.active + .island-camera {
    opacity: 0;
}

.island-music img {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: cover;
}

/* 音频波形动画 */
.island-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 16px;
}

.wave-bar {
    width: 3px;
    background: #FF3B30;
    border-radius: 2px;
    animation: wave 1s ease-in-out infinite;
}

.wave-bar:nth-child(1) {
    height: 8px;
    animation-delay: 0s;
}

.wave-bar:nth-child(2) {
    height: 14px;
    animation-delay: 0.2s;
}

.wave-bar:nth-child(3) {
    height: 10px;
    animation-delay: 0.4s;
}

.wave-bar:nth-child(4) {
    height: 12px;
    animation-delay: 0.6s;
}

@keyframes wave {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.5);
    }
}

/* 暂停时波形静止 */
.island-music.paused .wave-bar {
    animation-play-state: paused;
    background: #8E8E93;
}

/* 锁屏界面 */
.lock-screen {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s;
}

.lock-screen.hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.wallpaper {
    position: absolute;
    inset: 0;
    background: var(--wallpaper) center/cover no-repeat;
    z-index: -1;
}

.wallpaper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.3) 0%,
        rgba(0,0,0,0) 30%,
        rgba(0,0,0,0) 60%,
        rgba(0,0,0,0.4) 100%
    );
}

/* 状态栏 */
.status-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    z-index: 20;
    color: white;
}

.status-time {
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.status-icons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.signal-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}

.signal-bar {
    width: 3px;
    background: white;
    border-radius: 1px;
}

.signal-bar:nth-child(1) { height: 4px; }
.signal-bar:nth-child(2) { height: 6px; }
.signal-bar:nth-child(3) { height: 8px; }
.signal-bar:nth-child(4) { height: 10px; }

.wifi-icon {
    width: 16px;
    height: 12px;
    position: relative;
}

.wifi-icon::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
}

.wifi-icon::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 8px;
    border: 2px solid white;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    opacity: 0.8;
}

.battery-icon {
    width: 25px;
    height: 12px;
    border: 1.5px solid white;
    border-radius: 4px;
    position: relative;
    padding: 1.5px;
}

.battery-icon::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 6px;
    background: white;
    border-radius: 0 2px 2px 0;
}

.battery-level {
    height: 100%;
    width: var(--battery-level);
    background: white;
    border-radius: 2px;
}

/* 锁屏时间 */
.lock-content {
    margin-top: 90px;
    text-align: center;
    color: white;
}

.lock-date {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 8px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.lock-time {
    font-size: 88px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -2px;
    line-height: 1;
    text-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* 锁屏通知 */
.lock-notification {
    position: absolute;
    top: 240px;
    left: 20px;
    right: 20px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 25;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.5s ease;
}

.lock-notification.show {
    opacity: 1;
    transform: translateY(0);
}

.lock-notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    overflow: hidden;
}

.lock-notification-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lock-notification-content {
    flex: 1;
}

.lock-notification-title {
    font-size: 15px;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
}

.lock-notification-subtitle {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

.lock-notification-time {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    flex-shrink: 0;
}

/* ===== 消息推送模拟（#15） ===== */
/* 锁屏推送堆栈：原锁屏通知下方，可叠加多条，点击后消失 */
.lock-push-stack {
    position: absolute;
    top: 320px;
    left: 20px;
    right: 20px;
    z-index: 25;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lock-push-card {
    position: static;       /* 覆盖 .lock-notification 的绝对定位，改由堆栈排布 */
    opacity: 0;
    transform: translateY(-20px);
    cursor: pointer;
}

.lock-push-card.show {
    opacity: 1;
    transform: translateY(0);
}

.lock-push-card.dismiss {
    opacity: 0;
    transform: translateY(-20px);
}

.lock-notification-app {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* 解锁状态顶部横幅：滑入停留 1.5s 自动消失 */
.push-banner-host {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.push-banner {
    pointer-events: auto;
    margin-top: 60px;
    width: calc(100% - 20px);
    background: rgba(250, 250, 250, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    opacity: 0;
    transform: translateY(-110%);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
    cursor: pointer;
}

.push-banner.show {
    opacity: 1;
    transform: translateY(0);
}

/* 横幅内文字用深色（复用锁屏通知结构） */
.push-banner .lock-notification-icon {
    background: rgba(0,0,0,0.06);
}
.push-banner .lock-notification-app {
    color: #8E8E93;
}
.push-banner .lock-notification-title {
    color: #000;
}
.push-banner .lock-notification-subtitle {
    color: #666;
}
.push-banner .lock-notification-time {
    color: #999;
}

/* 锁屏底部 */
.lock-bottom {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.lock-hint {
    color: rgba(255,255,255,0.8);
    font-size: 15px;
    font-weight: 500;
    text-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

.lock-shortcuts {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 50px;
}

.lock-shortcut {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}

.lock-shortcut:active {
    transform: scale(0.9);
    background: rgba(255,255,255,0.3);
}

/* 上滑指示条 */
.home-indicator {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 134px;
    height: 5px;
    background: rgba(255,255,255,0.8);
    border-radius: 3px;
    z-index: 50;
}

/* 密码输入界面 */
.passcode-screen {
    position: absolute;
    inset: 0;
    z-index: 15;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(30px);
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.passcode-screen.active {
    opacity: 1;
    pointer-events: all;
}

.passcode-title {
    margin-top: 100px;
    color: white;
    font-size: 20px;
    font-weight: 600;
}

.passcode-dots {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.passcode-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.5);
    transition: all 0.2s;
}

.passcode-dot.filled {
    background: white;
    border-color: white;
}

.passcode-dot.error {
    background: #ff3b30;
    border-color: #ff3b30;
}

.passcode-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 50px;
    justify-items: center;
}

.passcode-key-empty {
    width: 78px;
    height: 78px;
}

.passcode-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 0 44px;
}

.passcode-back-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 17px;
    font-family: inherit;
    cursor: pointer;
    padding: 12px 20px;
    transition: color 0.2s ease, transform 0.15s ease;
}

.passcode-back-btn:active {
    color: #fff;
    transform: scale(0.92);
}

.passcode-bottom .passcode-emergency {
    margin: 0;
    color: rgba(255,255,255,0.5);
    font-size: 17px;
    transition: color 0.2s ease, transform 0.15s ease;
}

.passcode-bottom .passcode-emergency:active {
    color: #fff;
    transform: scale(0.92);
}

.passcode-key {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    font-size: 32px;
    font-weight: 400;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    backdrop-filter: blur(10px);
}

.passcode-key:active {
    background: rgba(255,255,255,0.3);
    transform: scale(0.95);
}



.passcode-key.back {
    font-size: 20px;
}

.passcode-emergency {
    margin-top: 30px;
    color: white;
    font-size: 16px;
    opacity: 0.8;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.15s ease;
}

.passcode-emergency:active {
    color: #fff;
    transform: scale(0.92);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-10px); }
    40%, 80% { transform: translateX(10px); }
}

.passcode-dots.shake {
    animation: shake 0.5s;
}

@keyframes unlockGlow {
    0% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
    50% { box-shadow: 0 0 40px 10px rgba(255,255,255,0.3); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.phone-screen.unlocking {
    animation: unlockGlow 0.6s;
}

/* ===== 主屏幕 ===== */
.home-screen {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--wallpaper) center/cover no-repeat;
    display: none;
    flex-direction: column;
}

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

.app-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 15px;
    padding: 14px 20px 16px;
    flex: 1;
    align-content: start;   /* 图标整体靠上排列，不随剩余空间分散 */
}

.app-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.app-icon:active {
    transform: scale(0.88);
    filter: brightness(0.7) grayscale(0.3);
}

.app-icon-img {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    overflow: visible; /* 不裁剪子元素，让未读红点完整叠在图标边缘上方 */
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.app-icon:active .app-icon-img {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.app-icon-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit; /* 图片自身裁圆角（容器已改为 overflow: visible） */
}

/* 照片 App 纯 CSS 图标（仿 iOS 照片渐变花朵） */
.photos-icon-css {
    background: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photos-icon-petal {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity: 0.85;
}

.photos-icon-petal.petal-1 { background: #FF9500; transform: rotate(0deg)   translateY(-13px); }
.photos-icon-petal.petal-2 { background: #FFCC00; transform: rotate(45deg)  translateY(-13px); }
.photos-icon-petal.petal-3 { background: #34C759; transform: rotate(90deg)  translateY(-13px); }
.photos-icon-petal.petal-4 { background: #00C7BE; transform: rotate(135deg) translateY(-13px); }
.photos-icon-petal.petal-5 { background: var(--accent-blue); transform: rotate(180deg) translateY(-13px); }
.photos-icon-petal.petal-6 { background: #5856D6; transform: rotate(225deg) translateY(-13px); }
.photos-icon-petal.petal-7 { background: #AF52DE; transform: rotate(270deg) translateY(-13px); }
.photos-icon-petal.petal-8 { background: #FF2D55; transform: rotate(315deg) translateY(-13px); }

/* 日历图标 - 修复：无红条，显示周四/1 */
.app-calendar {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-icon {
    text-align: center;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.calendar-weekday {
    font-size: 10px;
    color: #FF3B30;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 2px;
    line-height: 1;
}

.calendar-day-num {
    font-size: 28px;
    color: #1a1a1a;
    font-weight: 300;
    line-height: 1;
}

.app-icon-name {
    font-size: 12px;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    font-weight: 500;
}

/* 小组件 */
.widget {
    grid-column: span 2;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 15px;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.widget-title {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.8;
    margin-bottom: 8px;
}

.widget-content {
    font-size: 24px;
    font-weight: 700;
}

.widget-subcontent {
    font-size: 14px;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 4px;
}

/* ===== 主屏分页（#18 多页） ===== */
.home-pages-wrap {
    position: relative;
    z-index: 1;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.home-pages-track {
    flex: 1;
    display: flex;
    transition: transform 0.3s ease;
    will-change: transform;
}

.home-page {
    flex: 0 0 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* 页数圆点 */
.page-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding: 2px 0 10px;
}

.page-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
}

.page-dot.active {
    background: #fff;
}

/* ===== 小部件扩展类型（#3） ===== */
.widget-event {
    font-size: 13px;
    margin-top: 6px;
    opacity: 0.9;
}

.widget-battery-bar {
    margin-top: 8px;
    height: 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.25);
    overflow: hidden;
}

.widget-battery-fill {
    height: 100%;
    background: #34C759;
    border-radius: 4px;
}

.widget-battery-fill.low {
    background: #FF3B30;
}

.widget-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.widget.widget-photo {
    padding: 0;
    overflow: hidden;
    position: relative;
    min-height: 80px;
}

.widget.widget-photo.widget-photo-missing::after {
    content: '照片加载失败';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    opacity: 0.8;
}

/* Dock 栏 */
.dock {
    position: relative;
    z-index: 1;
    margin: 0 15px 25px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(20px);
    border-radius: 25px;
    padding: 12px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.dock .app-icon-img {
    width: 55px;
    height: 55px;
}

/* 搜索栏 */
.search-bar {
    position: relative;
    z-index: 1;
    margin: 0 20px 10px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
}

.search-bar svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* 状态栏时间颜色自适应 */
.status-bar {
    mix-blend-mode: difference;
    color: white;
}

/* ===== 电话 App ===== */
.phone-app {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #F2F2F7;
    display: none;
    flex-direction: column;
}

.phone-app.active {
    display: flex;
}

.phone-nav {
    padding: 60px 20px 10px;
    background: #F2F2F7;
}

.phone-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.phone-nav-title {
    font-size: 34px;
    font-weight: 700;
    color: #000;
}

.phone-edit-btn {
    color: var(--accent-blue);
    font-size: 16px;
    cursor: pointer;
}

.phone-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.phone-tab {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    background: rgba(120,120,128,0.12);
    color: #000;
    transition: all 0.2s;
}

.phone-tab.active {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.phone-search {
    background: rgba(120,120,128,0.12);
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8E8E93;
    font-size: 16px;
    margin-bottom: 10px;
}

.phone-search svg {
    width: 16px;
    height: 16px;
    fill: #8E8E93;
}

.call-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
}

.call-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    cursor: pointer;
}

.call-info {
    flex: 1;
}

.call-name {
    font-size: 17px !important;
    font-weight: 500;
    color: #000;
}

.call-name.missed {
    color: #FF3B30;
}

.call-type {
    font-size: 14px;
    color: #8E8E93;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.call-type svg {
    width: 12px;
    height: 12px;
    fill: #8E8E93;
}

.call-type.missed svg {
    fill: #FF3B30;
}

.call-time {
    font-size: 14px;
    color: #8E8E93;
    margin-right: 8px;
}

.call-info-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--accent-blue);
    color: var(--accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
}

.phone-tab-bar {
    display: flex;
    justify-content: space-around;
    padding: 10px 0 25px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0,0,0,0.05);
}

.phone-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #8E8E93;
    font-size: 10px;
    cursor: pointer;
}

.phone-tab-item svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.phone-tab-item.active {
    color: var(--accent-blue);
}

.phone-back-btn {
    color: var(--accent-blue);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ===== 通话界面 ===== */
.call-screen {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: linear-gradient(to bottom, #4a5568, #2d3748);
    display: none;
    flex-direction: column;
    align-items: center;
    color: white;
}

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

.call-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 500;
    margin-top: 100px;
    overflow: hidden;
}

/* 联系人头像图片（来电联系人有头像时显示） */
.call-avatar img,
.incoming-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.call-name {
    font-size: 32px;
    font-weight: 600;
    margin-top: 20px;
}

.call-status {
    font-size: 18px;
    opacity: 0.8;
    margin-top: 8px;
}

.call-timer {
    font-size: 20px;
    font-weight: 500;
    margin-top: 8px;
    display: none;
}

.call-messages {
    flex: 1;
    width: 100%;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.call-message {
    background: rgba(255,255,255,0.15);
    border-radius: 18px;
    padding: 12px 16px;
    max-width: 80%;
    align-self: flex-start;
}

.call-message-sender {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 4px;
}

.call-message-text {
    font-size: 16px;
    line-height: 1.4;
}

.call-controls {
    width: 100%;
    padding: 20px 40px 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.call-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.call-btn-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.call-btn-icon:active {
    background: rgba(255,255,255,0.3);
    transform: scale(0.95);
}

.call-btn-icon svg {
    width: 28px;
    height: 28px;
    fill: white;
}

.call-btn-label {
    font-size: 13px;
    opacity: 0.8;
}

.call-btn.end .call-btn-icon {
    background: #FF3B30;
}

.call-btn.end .call-btn-icon:active {
    background: #d32f2f;
}

/* 来电界面 */
.incoming-call {
    position: absolute;
    inset: 0;
    z-index: 40;
    background: rgba(0,0,0,0.9);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 150px;
    color: white;
}

.incoming-call.active {
    display: flex;
}

.incoming-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 500;
    margin-bottom: 20px;
    overflow: hidden;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.incoming-name {
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 10px;
    margin-top: 0;
}

.incoming-status {
    font-size: 18px;
    opacity: 0.8;
    margin-bottom: 250px;
}

.incoming-actions {
    display: flex;
    gap: 120px;
}

.incoming-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.incoming-btn-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.incoming-btn-circle svg {
    width: 28px;
    height: 28px;
    fill: white;
}

.incoming-btn.decline .incoming-btn-circle {
    background: #FF3B30;
}

.incoming-btn.accept .incoming-btn-circle {
    background: #34C759;
}

.incoming-btn-label {
    font-size: 14px;
    opacity: 0.8;
}

/* ===== 微信 App ===== */
.wechat-app {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #EDEDED;
    display: none;
    flex-direction: column;
}

.wechat-app.active {
    display: flex;
}

/* 顶部导航 */
.wechat-header {
    padding: 60px 15px 10px;
    background: #EDEDED;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #D8D8D8;
}

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

.wechat-header-actions {
    display: flex;
    gap: 16px;
}

.wechat-header-icon {
    width: 22px;
    height: 22px;
    fill: #000;
    cursor: pointer;
}

/* 页面容器 */
.wechat-pages {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.wechat-page {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    overflow-y: auto;
}

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

/* 底部 TabBar */
.wechat-tabbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0 25px;
    background: #F7F7F7;
    border-top: 1px solid #D8D8D8;
}

.wechat-tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    position: relative;
    padding: 4px 12px;
}

.wechat-tabbar-item svg {
    width: 26px;
    height: 26px;
    fill: #999;
}

.wechat-tabbar-item span {
    font-size: 11px;
    color: #999;
}

.wechat-tabbar-item.active svg,
.wechat-tabbar-item.active span {
    fill: var(--wechat-primary);
    color: var(--wechat-primary);
}

.wechat-tabbar-badge {
    position: absolute;
    top: 0;
    right: 4px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #FA5151;
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.wechat-tabbar-dot {
    position: absolute;
    top: 2px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FA5151;
}

/* 通讯录 */
.wechat-contact-section {
    flex: 1;
    overflow-y: auto;
}

.wechat-contact-group-title {
    padding: 8px 15px;
    font-size: 13px;
    color: #888;
    background: #EDEDED;
}

.wechat-contact-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: #fff;
    border-bottom: 1px solid #F0F0F0;
    cursor: pointer;
}

.wechat-contact-item:active {
    background: #E5E5E5;
}

.wechat-contact-avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: #D8D8D8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    margin-right: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.wechat-contact-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wechat-contact-name {
    font-size: 16px;
    color: #000;
}

.wechat-contact-index {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 10;
}

.wechat-contact-index-item {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--wechat-link);
    cursor: pointer;
}

/* 发现页 */
.wechat-discover-list {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
}

.wechat-discover-group {
    margin-top: 8px;
    background: #fff;
}

.wechat-discover-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: #fff;
    border-bottom: 1px solid #F0F0F0;
    cursor: pointer;
}

.wechat-discover-item:active {
    background: #E5E5E5;
}

.wechat-discover-icon {
    width: 28px;
    height: 28px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wechat-discover-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wechat-discover-icon svg {
    width: 24px;
    height: 24px;
}

.wechat-discover-name {
    flex: 1;
    font-size: 16px;
    color: #000;
}

.wechat-discover-arrow {
    width: 16px;
    height: 16px;
    fill: #C7C7CC;
}

.wechat-discover-badge {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FA5151;
    margin-right: 8px;
}

/* 我页面 */
.wechat-me-profile {
    display: flex;
    align-items: center;
    padding: 20px 15px;
    background: #fff;
    margin-top: 8px;
    cursor: pointer;
}

.wechat-me-avatar {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: #D8D8D8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    margin-right: 15px;
    overflow: hidden;
}

.wechat-me-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wechat-me-info {
    flex: 1;
}

.wechat-me-nickname {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin-bottom: 4px;
}

.wechat-me-wechatId {
    font-size: 14px;
    color: #888;
}

.wechat-me-qrcode {
    width: 20px;
    height: 20px;
    fill: #999;
    margin-right: 8px;
}

.wechat-me-arrow {
    width: 16px;
    height: 16px;
    fill: #C7C7CC;
}

.wechat-me-menu {
    margin-top: 8px;
}

.wechat-me-menu-item {
    display: flex;
    align-items: center;
    padding: 13px 15px;
    background: #fff;
    border-bottom: 1px solid #F0F0F0;
    cursor: pointer;
}

.wechat-me-menu-item:active {
    background: #E5E5E5;
}

.wechat-me-menu-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wechat-me-menu-icon svg {
    width: 22px;
    height: 22px;
}

.wechat-me-menu-name {
    flex: 1;
    font-size: 16px;
    color: #000;
}

/* 朋友圈 */
.wechat-moments-screen {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: #fff;
    display: none;
    flex-direction: column;
}

.wechat-moments-screen.active {
    display: flex;
}

.wechat-moments-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 50px 15px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
}

.wechat-moments-title {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* 参考真实微信：朋友圈顶部不显示标题文字 */
.wechat-moments-screen .wechat-moments-title {
    display: none;
}

/* 个人相册（自己的朋友圈）盖在朋友圈之上 */
#wechatOwnMomentsScreen {
    z-index: 35;
}

#wechatOwnMomentsScreen .wechat-moments-title {
    display: block;
}

.wechat-moments-empty {
    padding: 70px 0;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.wechat-moments-cover {
    position: relative;
    height: 300px;
    background: #1a1a2e;
    flex-shrink: 0;
    /* 不设 overflow:hidden——头像需要骑跨在封面下缘之外 */
}

.wechat-moments-cover-bg {
    position: absolute;
    inset: 0;
    background: var(--cover-gradient);
}

/* 参考真实微信：昵称白色大字压在封面右下，头像骑跨封面/列表交界 */
.wechat-moments-user {
    position: absolute;
    bottom: -30px;
    right: 12px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    z-index: 3;
}

.wechat-moments-nickname {
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    text-shadow: 0 2px 6px rgba(0,0,0,0.45);
    margin-bottom: 46px;
}

.wechat-moments-avatar {
    width: 84px;
    height: 84px;
    border-radius: 10px;
    background: #D8D8D8;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
    cursor: pointer;
}

.wechat-moments-avatar:active {
    opacity: 0.85;
}

.wechat-moments-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wechat-moments-list {
    flex: 1;
    overflow-y: auto;
    padding-top: 56px;
}

.wechat-moment-item {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #F0F0F0;
}

.wechat-moment-avatar {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: #D8D8D8;
    margin-right: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
}

.wechat-moment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wechat-moment-content {
    flex: 1;
}

.wechat-moment-author {
    font-size: 15px;
    color: var(--wechat-link);
    font-weight: 600;
    margin-bottom: 5px;
}

.wechat-moment-text {
    font-size: 15px;
    color: #000;
    line-height: 1.4;
    margin-bottom: 8px;
}

.wechat-moment-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 8px;
    max-width: 240px;
}

.wechat-moment-images.single {
    grid-template-columns: 1fr;
    max-width: 180px;
}

.wechat-moment-images img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
}

.wechat-moment-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.wechat-moment-time {
    font-size: 12px;
    color: #888;
}

.wechat-moment-actions {
    display: flex;
    gap: 15px;
}

.wechat-moment-action {
    font-size: 13px;
    color: var(--wechat-link);
    cursor: pointer;
}

.wechat-moment-likes {
    background: #F7F7F7;
    padding: 8px 10px;
    border-radius: 4px;
    margin-top: 8px;
    font-size: 14px;
    color: var(--wechat-link);
}

.wechat-moment-likes-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    fill: var(--wechat-link);
    margin-right: 5px;
    vertical-align: middle;
}

.wechat-moment-comments {
    background: #F7F7F7;
    padding: 8px 10px;
    border-radius: 4px;
    margin-top: 4px;
}

.wechat-moment-comment {
    font-size: 14px;
    color: #000;
    line-height: 1.5;
}

.wechat-moment-comment-author {
    color: var(--wechat-link);
}

.wechat-moment-comment-reply {
    color: var(--wechat-link);
}

/* 联系人名片 */
.wechat-contact-card-screen {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: #EDEDED;
    display: none;
    flex-direction: column;
}

.wechat-contact-card-screen.active {
    display: flex;
}

.wechat-contact-card-content {
    flex: 1;
    overflow-y: auto;
}

.wechat-contact-card-profile {
    display: flex;
    align-items: center;
    padding: 20px 15px;
    background: #fff;
    margin-top: 8px;
}

.wechat-contact-card-avatar {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: #D8D8D8;
    margin-right: 15px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
}

.wechat-contact-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wechat-contact-card-info {
    flex: 1;
}

.wechat-contact-card-name {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin-bottom: 4px;
}

.wechat-contact-card-region {
    font-size: 14px;
    color: #888;
}

.wechat-contact-card-signature {
    padding: 15px;
    background: #fff;
    margin-top: 8px;
    font-size: 15px;
    color: #000;
}

.wechat-contact-card-label {
    font-size: 13px;
    color: #888;
    margin-bottom: 5px;
}

.wechat-contact-card-btn {
    margin: 20px 15px;
    padding: 12px;
    background: var(--wechat-primary);
    color: #fff;
    text-align: center;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

.wechat-nav {
    padding: 60px 15px 10px;
    background: #EDEDED;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.wechat-nav-back {
    color: var(--wechat-link);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.wechat-chat-list {
    flex: 1;
    overflow-y: auto;
}

.wechat-chat-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: #fff;
    border-bottom: 1px solid #E5E5E5;
    cursor: pointer;
}

.wechat-chat-item:active {
    background: #E5E5E5;
}

.wechat-avatar {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #D8D8D8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    margin-right: 12px;
    overflow: hidden;
}

.wechat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wechat-chat-info {
    flex: 1;
}

.wechat-chat-name {
    font-size: 16px;
    font-weight: 500;
    color: #000;
    margin-bottom: 4px;
}

.wechat-chat-preview {
    font-size: 14px;
    color: #8E8E93;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wechat-chat-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.wechat-chat-time {
    font-size: 12px;
    color: #B2B2B2;
}

.wechat-badge {
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #FA5151;
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* 聊天界面 */
.wechat-chat-screen {
    position: absolute;
    inset: 0;
    z-index: 25;
    background: #EDEDED;
    display: none;
    flex-direction: column;
}

.wechat-chat-screen.active {
    display: flex;
}

.wechat-chat-header {
    padding: 60px 15px 10px;
    background: #EDEDED;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #D8D8D8;
}

.wechat-chat-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #D8D8D8;
    overflow: hidden;
}

.wechat-chat-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wechat-chat-header-name {
    font-size: 17px;
    font-weight: 600;
    color: #000;
}

.wechat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wechat-date-divider {
    text-align: center;
    margin: 10px 0;
}

.wechat-date-divider span {
    background: rgba(0,0,0,0.1);
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
}

.wechat-message {
    display: flex;
    gap: 10px;
    max-width: 80%;
}

.wechat-message.received {
    align-self: flex-start;
}

.wechat-message.sent {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.wechat-message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #D8D8D8;
    overflow: hidden;
    flex-shrink: 0;
}

.wechat-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wechat-message-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wechat-message-sender {
    font-size: 12px;
    color: #8E8E93;
}

.wechat-message-bubble {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.4;
    max-width: 100%;
    word-break: break-word;
}

.wechat-message.received .wechat-message-bubble {
    background: #fff;
    color: #000;
}

.wechat-message.sent .wechat-message-bubble {
    background: var(--wechat-bubble-sent);
    color: #000;
}

.wechat-message-time {
    font-size: 11px;
    color: #B2B2B2;
    margin-top: 4px;
}

.wechat-message.received .wechat-message-time {
    align-self: flex-start;
}

.wechat-message.sent .wechat-message-time {
    align-self: flex-end;
}

/* 输入栏 */
.wechat-input-bar {
    padding: 10px 15px 25px;
    background: #F7F7F7;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wechat-input {
    flex: 1;
    background: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 16px;
    outline: none;
}

.wechat-send-btn {
    background: var(--wechat-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

.wechat-send-btn:active {
    background: #06AD56;
}

.wechat-plus-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #D8D8D8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.wechat-plus-btn svg {
    width: 20px;
    height: 20px;
    fill: var(--wechat-link);
}

/* ===== 日历 App ===== */
.calendar-app {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #fff;
    display: none;
    flex-direction: column;
}

.calendar-app.active {
    display: flex;
}

.calendar-header {
    padding: 50px 15px 8px;
    background: #fff;
}

.calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.calendar-year {
    color: var(--accent-blue);
    font-size: 17px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.calendar-month-nav {
    display: flex;
    gap: 20px;
}

.calendar-nav-btn {
    color: var(--accent-blue);
    font-size: 20px;
    cursor: pointer;
    padding: 5px 10px;
}

.calendar-month-title {
    font-size: 28px;
    font-weight: 700;
    color: #000;
    margin-bottom: 2px;
}

.calendar-year-title {
    font-size: 15px;
    font-weight: 400;
    color: #8E8E93;
    margin-bottom: 10px;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    padding: 8px 0;
    border-bottom: 1px solid #E5E5E5;
}

.calendar-weekday {
    font-size: 12px;
    color: #8E8E93;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 5px 0;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.calendar-day-number {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border-radius: 50%;
}

.calendar-day.selected .calendar-day-number {
    background: #000;
    color: #fff;
}

/* 今天：红色圆圈高亮（选中态为黑圈，优先显示选中样式） */
.calendar-day.today:not(.selected) .calendar-day-number {
    background: #FF3B30;
    color: #fff;
    font-weight: 600;
}

.calendar-day.other-month .calendar-day-number {
    color: #C7C7CC;
}

.calendar-day-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8E8E93;
    margin-top: 2px;
}

.calendar-events {
    flex: 1;
    overflow-y: auto;
    padding: 10px 15px;
    border-top: 1px solid #E5E5E5;
}

.calendar-event-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #F2F2F7;
}

.calendar-event-color {
    width: 3px;
    height: 20px;
    background: #AF52DE;
    border-radius: 2px;
}

.calendar-event-title {
    flex: 1;
    font-size: 14px;
    color: #000;
}

.calendar-event-time {
    font-size: 12px;
    color: #8E8E93;
}

.calendar-no-events {
    text-align: center;
    color: #8E8E93;
    font-size: 14px;
    padding: 30px 0;
}

.calendar-tab-bar {
    display: flex;
    justify-content: space-around;
    padding: 10px 0 25px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(20px);
    border-top: 1px solid #E5E5E5;
}

.calendar-tab-item {
    font-size: 14px;
    color: #FF3B30;
    cursor: pointer;
}

/* ===== 音乐 App ===== */
.music-app {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #fff;
    display: none;
    flex-direction: column;
}

.music-app.active {
    display: flex;
}

.music-header {
    padding: 60px 20px 10px;
    background: #fff;
}

.music-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.music-nav-title {
    color: var(--accent-blue);
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.music-title {
    font-size: 34px;
    font-weight: 700;
    color: #000;
    margin-bottom: 15px;
}

.music-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.music-btn {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.music-btn.play {
    background: rgba(255,59,48,0.1);
    color: #FF3B30;
}

.music-btn.shuffle {
    background: rgba(255,59,48,0.1);
    color: #FF3B30;
}

.music-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
}

.music-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #F2F2F7;
    cursor: pointer;
}

.music-item:active {
    opacity: 0.7;
}

.music-item-cover {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background: #F2F2F7;
    overflow: hidden;
    flex-shrink: 0;
}

.music-item-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.music-item-info {
    flex: 1;
}

.music-item-title {
    font-size: 16px;
    color: #000;
    margin-bottom: 2px;
}

.music-item-title.playing {
    color: #FF3B30;
}

.music-item-artist {
    font-size: 14px;
    color: #8E8E93;
}

.music-item-more {
    color: #8E8E93;
    font-size: 20px;
    padding: 0 5px;
}

/* 播放界面 */
.player-screen {
    position: absolute;
    inset: 0;
    z-index: 25;
    background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
    display: none;
    flex-direction: column;
    padding: 60px 30px 40px;
}

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

.player-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.player-back {
    color: var(--accent-blue);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.player-cover {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.player-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-info {
    margin-bottom: 30px;
}

.player-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.player-artist {
    font-size: 18px;
    color: rgba(255,255,255,0.7);
}

.player-progress {
    margin-bottom: 20px;
}

.player-time {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 8px;
}

.player-bar {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.player-bar-fill {
    height: 100%;
    background: #fff;
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.player-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.player-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
}

.player-btn svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

.player-btn.play-pause svg {
    width: 48px;
    height: 48px;
}

/* 迷你播放器 */
/* ========== 相册 App ========== */

.photos-app {
    position: absolute;
    inset: 0;
    background: #fff;
    z-index: 10;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.photos-app.active {
    opacity: 1;
    pointer-events: auto;
}

.photos-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px 16px 0;
}

.photos-nav-back {
    display: flex;
    align-items: center;
    color: var(--accent-blue);
    font-size: 17px;
    cursor: pointer;
}

.photos-nav-select {
    color: var(--accent-blue);
    font-size: 17px;
    cursor: pointer;
}

.photos-header {
    padding: 20px 16px 0;
}

.photos-title {
    font-size: 34px;
    font-weight: 700;
    color: #000;
}

.photos-count {
    font-size: 17px;
    color: #8E8E93;
    margin-top: 2px;
}

.photos-grid {
    flex: 1;
    overflow-y: auto;
    padding: 0 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}

.photos-grid::-webkit-scrollbar {
    width: 3px;
}

.photos-grid::-webkit-scrollbar-track {
    background: transparent;
}

.photos-grid::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
}

.photos-grid::-webkit-scrollbar-button {
    display: none;
}

.photos-month-section {
    margin-bottom: 4px;
}

.photos-month-header {
    font-size: 22px;
    font-weight: 700;
    color: #000;
    padding: 20px 14px 10px;
}

.photos-month-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.photos-grid-item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: pointer;
    background: #F2F2F7;
}

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

.photos-tab-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0 30px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
    border-top: 0.5px solid #E5E5EA;
}

.photos-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #8E8E93;
    font-size: 11px;
    cursor: pointer;
}

.photos-tab-item.active {
    color: var(--accent-blue);
}

.photos-tab-item svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* 照片查看器 */
.photo-viewer {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 20;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.photo-viewer.active {
    opacity: 1;
    pointer-events: auto;
}

.photo-viewer-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px 16px 10px;
    z-index: 2;
}

.photo-viewer-back {
    cursor: pointer;
    padding: 8px;
}

.photo-viewer-date {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}

.photo-viewer-edit {
    color: #fff;
    font-size: 17px;
    cursor: pointer;
}

.photo-viewer-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.photo-viewer-content img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    will-change: transform;
}

.photo-viewer-content img.dragging {
    transition: none;
}

.photo-viewer-toolbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px 30px 40px;
    z-index: 2;
}

.photo-viewer-toolbar svg {
    width: 24px;
    height: 24px;
    fill: #fff;
    cursor: pointer;
}

/* 查看器 UI 隐藏模式（点击照片时） */
.photo-viewer.hide-ui .photo-viewer-nav,
.photo-viewer.hide-ui .photo-viewer-toolbar {
    opacity: 0;
    pointer-events: none;
}

.photo-viewer-nav,
.photo-viewer-toolbar {
    transition: opacity 0.25s ease;
}

/* ========== 设置 App ========== */

.settings-app {
    position: absolute;
    inset: 0;
    background: #F2F2F7;
    z-index: 10;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.settings-app.active {
    opacity: 1;
    pointer-events: auto;
}

.settings-nav {
    padding: 12px 16px 0;
}

.settings-nav-back {
    display: flex;
    align-items: center;
    color: var(--accent-blue);
    font-size: 14px;
    cursor: pointer;
}

.settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 16px 40px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.1) transparent;
}

.settings-content::-webkit-scrollbar {
    width: 3px;
}

.settings-content::-webkit-scrollbar-track {
    background: transparent;
}

.settings-content::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 2px;
}

.settings-content::-webkit-scrollbar-button {
    display: none;
}

.settings-title {
    font-size: 34px;
    font-weight: 700;
    color: #000;
    margin-bottom: 16px;
}

.settings-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(120,120,128,0.12);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 16px;
    color: #8E8E93;
    font-size: 16px;
}

.settings-search svg {
    width: 18px;
    height: 18px;
    fill: #8E8E93;
}

.settings-card {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.settings-account {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.settings-account:active {
    opacity: 0.6;
    transform: scale(0.98);
}

.settings-account-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #8E8E93;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 500;
    margin-right: 12px;
    flex-shrink: 0;
    overflow: hidden;
}

.settings-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-account-info {
    flex: 1;
}

.settings-account-name {
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

.settings-account-sub {
    font-size: 13px;
    color: #8E8E93;
    margin-top: 1px;
}

.settings-row {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.settings-row:active {
    opacity: 0.5;
    transform: scale(0.97);
}

.settings-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.settings-icon svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}

.settings-label {
    flex: 1;
    font-size: 17px;
    color: #000;
}

.settings-value {
    font-size: 17px;
    color: #8E8E93;
    margin-right: 6px;
}

.settings-chevron {
    width: 16px;
    height: 16px;
    fill: #C7C7CC;
    flex-shrink: 0;
}

.settings-divider {
    height: 0.5px;
    background: #E5E5EA;
    margin-left: 58px;
}

/* 飞行模式开关 */
.settings-toggle {
    width: 51px;
    height: 31px;
    border-radius: 16px;
    background: #E9E9EA;
    position: relative;
    cursor: pointer;
    transition: background 0.25s ease;
    flex-shrink: 0;
}

.settings-toggle.active {
    background: #34C759;
}

.settings-toggle-knob {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.25s ease;
}

.settings-toggle.active .settings-toggle-knob {
    transform: translateX(20px);
}

/* ========== 屏幕使用时间 ========== */

.screentime-app {
    position: absolute;
    inset: 0;
    background: #F2F2F7;
    z-index: 11;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.screentime-app.active {
    opacity: 1;
    pointer-events: auto;
}

.screentime-nav {
    padding: 12px 16px 0;
}

.screentime-nav-back {
    display: flex;
    align-items: center;
    color: var(--accent-blue);
    font-size: 14px;
    cursor: pointer;
}

.screentime-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 16px 40px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.1) transparent;
}

.screentime-content::-webkit-scrollbar {
    width: 3px;
}

.screentime-content::-webkit-scrollbar-track {
    background: transparent;
}

.screentime-content::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 2px;
}

.screentime-content::-webkit-scrollbar-button {
    display: none;
}

.screentime-title {
    font-size: 34px;
    font-weight: 700;
    color: #000;
}

.screentime-device {
    font-size: 15px;
    color: #8E8E93;
    margin-top: 2px;
    margin-bottom: 20px;
}

.screentime-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.screentime-daily-label {
    font-size: 13px;
    color: #8E8E93;
}

.screentime-daily-value {
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin-top: 2px;
}

.screentime-daily-change {
    font-size: 14px;
    color: #8E8E93;
    margin-bottom: 20px;
}

.screentime-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 120px;
    padding: 0 4px;
    gap: 6px;
}

.screentime-bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.screentime-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: var(--accent-blue);
    min-height: 8px;
    transition: height 0.6s ease;
}

.screentime-bar.today {
    background: #5AC8FA;
}

.screentime-chart-labels {
    display: flex;
    justify-content: space-between;
    padding: 8px 4px 0;
    gap: 6px;
}

.screentime-chart-labels span {
    flex: 1;
    text-align: center;
    font-size: 12px;
    color: #8E8E93;
}

.screentime-section-title {
    font-size: 13px;
    color: #8E8E93;
    margin-bottom: 8px;
    padding-left: 4px;
}

.screentime-app-row {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.screentime-app-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 12px;
    flex-shrink: 0;
}

.screentime-app-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.screentime-app-info {
    flex: 1;
}

.screentime-app-name {
    font-size: 16px;
    color: #000;
    margin-bottom: 4px;
}

.screentime-app-bar {
    height: 4px;
    background: #E9E9EA;
    border-radius: 2px;
    overflow: hidden;
}

.screentime-app-bar-fill {
    height: 100%;
    background: var(--accent-blue);
    border-radius: 2px;
}

.screentime-app-time {
    font-size: 15px;
    color: #8E8E93;
    margin-left: 12px;
    flex-shrink: 0;
}

.screentime-divider {
    height: 1px;
    background: rgba(0,0,0,0.06);
}

.screentime-pickup-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: #000;
}

.screentime-pickup-value {
    color: #8E8E93;
    font-size: 14px;
}

/* ========== 抖音 App ========== */

.douyin-app {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 20;
    display: none;
    flex-direction: column;
}

.douyin-app.active {
    display: flex;
}

/* 个人主页 */
.douyin-profile {
    flex: 1;
    overflow-y: auto;
    background: #000;
    color: #fff;
    padding-bottom: 60px;
}

/* 顶部背景 */
.douyin-header {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.douyin-header-bg {
    position: absolute;
    inset: 0;
    background: var(--cover-gradient);
    background-size: cover;
    background-position: center;
}

.douyin-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent, rgba(0,0,0,0.8));
}

.douyin-header-actions {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    z-index: 10;
}

.douyin-header-right {
    display: flex;
    gap: 10px;
}

.douyin-header-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.douyin-header-btn svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

/* 用户信息 */
.douyin-user-info {
    position: absolute;
    bottom: -30px;
    left: 15px;
    right: 15px;
    display: flex;
    align-items: flex-end;
    gap: 15px;
    z-index: 10;
}

.douyin-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.douyin-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #333;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
}

.douyin-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.douyin-add-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #FE2C55;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #fff;
}

.douyin-user-details {
    flex: 1;
    padding-bottom: 5px;
}

.douyin-nickname-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.douyin-nickname {
    font-size: 20px;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.douyin-verified {
    width: 18px;
    height: 18px;
    fill: #FFD700;
}

.douyin-dropdown-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}

.douyin-dropdown-btn svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

.douyin-id-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 8px;
}

.douyin-qr-icon {
    width: 16px;
    height: 16px;
    fill: #fff;
    opacity: 0.8;
}

.douyin-ai-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 15px;
    padding: 6px 12px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.douyin-ai-btn svg {
    width: 14px;
    height: 14px;
    fill: #fff;
}

/* 数据统计 */
.douyin-stats {
    display: flex;
    align-items: center;
    padding: 45px 20px 15px;
    gap: 25px;
}

.douyin-stat-item {
    text-align: center;
}

.douyin-stat-value {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 2px;
}

.douyin-stat-label {
    font-size: 12px;
    opacity: 0.7;
}

.douyin-edit-btn {
    margin-left: auto;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    padding: 8px 20px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

/* 简介 */
.douyin-bio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 15px;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
}

.douyin-bio svg {
    width: 16px;
    height: 16px;
    fill: rgba(255,255,255,0.6);
}

.douyin-bio-placeholder {
    color: rgba(255,255,255,0.5);
}

/* 标签 */
.douyin-tags {
    display: flex;
    gap: 10px;
    padding: 0 20px 10px;
}

.douyin-tag {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    color: rgba(255,255,255,0.8);
}

.douyin-add-tag-btn {
    margin: 0 20px 15px;
    background: rgba(255,255,255,0.1);
    border: 1px dashed rgba(255,255,255,0.3);
    border-radius: 4px;
    padding: 8px 15px;
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    cursor: pointer;
}

/* 功能入口 */
.douyin-features {
    display: flex;
    justify-content: space-around;
    padding: 15px 10px;
    background: rgba(255,255,255,0.05);
    margin: 0 15px 15px;
    border-radius: 10px;
}

.douyin-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.douyin-feature-item svg {
    width: 24px;
    height: 24px;
    fill: rgba(255,255,255,0.8);
}

.douyin-feature-item span {
    font-size: 11px;
    color: rgba(255,255,255,0.8);
}

/* 活动横幅 */
.douyin-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 15px 15px;
    padding: 12px 15px;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
}

.douyin-banner-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
}

.douyin-banner-subtitle {
    font-size: 12px;
    opacity: 0.7;
}

.douyin-banner-btn {
    background: #FE2C55;
    border: none;
    border-radius: 15px;
    padding: 6px 15px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

/* Tab 栏 */
.douyin-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 0 15px;
}

.douyin-tab {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    position: relative;
}

.douyin-tab.active {
    color: #fff;
    font-weight: 600;
}

.douyin-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
}

/* 内容网格 */
.douyin-content {
    padding: 2px;
}

.douyin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.douyin-grid-item {
    position: relative;
    aspect-ratio: 3/4;
    background: #1a1a1a;
    overflow: hidden;
    cursor: pointer;
}

.douyin-grid-item img,
.douyin-grid-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.douyin-grid-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    display: flex;
    align-items: center;
    gap: 5px;
}

.douyin-grid-overlay svg {
    width: 14px;
    height: 14px;
    fill: #fff;
}

.douyin-grid-overlay span {
    font-size: 12px;
    color: #fff;
}

.douyin-grid-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    opacity: 0.8;
}

.douyin-grid-play svg {
    width: 100%;
    height: 100%;
    fill: #fff;
}

/* 抖音空栏提示 */
.douyin-grid-empty {
    grid-column: 1 / -1;
    padding: 40px 0;
    text-align: center;
    color: #888;
    font-size: 13px;
}

/* 视频播放页 */
.douyin-player {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 30;
    display: none;
    flex-direction: column;
}

.douyin-player.active {
    display: flex;
}

.douyin-player-header {
    display: flex;
    align-items: center;
    padding: 50px 15px 10px;
    gap: 15px;
}

.douyin-player-back {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}

.douyin-player-back svg {
    width: 24px;
    height: 24px;
    fill: #fff;
}

.douyin-player-title {
    font-size: 16px;
    font-weight: 600;
}

.douyin-player-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.douyin-player-content video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.douyin-player-info {
    padding: 15px;
    background: rgba(0,0,0,0.5);
}

.douyin-player-stats {
    display: flex;
    justify-content: space-around;
}

.douyin-player-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.douyin-player-stat svg {
    width: 24px;
    height: 24px;
    fill: #fff;
}

.douyin-player-stat span {
    font-size: 14px;
    color: #fff;
}

/* 底部导航 */
.douyin-tabbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0 25px;
    background: #000;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.douyin-tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    color: rgba(255,255,255,0.6);
}

.douyin-tabbar-item svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.douyin-tabbar-item span {
    font-size: 11px;
}

.douyin-tabbar-item.active {
    color: #fff;
}

.douyin-tabbar-publish {
    flex: 1;
    max-width: 60px;
}

.douyin-publish-btn {
    width: 45px;
    height: 32px;
    background: linear-gradient(90deg, #25F4EE, #FE2C55);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.douyin-publish-btn svg {
    width: 24px;
    height: 24px;
    fill: #fff;
}

/* 音乐标签栏 */
.music-tab-bar {
    display: flex;
    justify-content: space-around;
    padding: 10px 0 25px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(20px);
    border-top: 1px solid #E5E5E5;
}

.music-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #8E8E93;
    font-size: 10px;
    cursor: pointer;
}

.music-tab-item svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.music-tab-item.active {
    color: #FF3B30;
}

/* 底部主页键 */
.home-bar {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 5px;
    background: rgba(255,255,255,0.9);
    border-radius: 3px;
    cursor: pointer;
    z-index: 50;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.2s ease, opacity 0.2s ease;
}

.home-bar:active {
    transform: translateX(-50%) scale(1.3);
    width: 140px;
    opacity: 0.7;
}

/* 主页键按下时屏幕内容缩小效果 */
.phone-screen.home-pressed .passcode-pad,
.phone-screen.home-pressed .passcode-key,
.phone-screen.home-pressed .app-icon,
.phone-screen.home-pressed .widget,
.phone-screen.home-pressed .settings-card,
.phone-screen.home-pressed .photos-grid-item,
.phone-screen.home-pressed .screentime-card {
    transform: scale(0.96);
    transition: transform 0.2s ease;
}

/* Home 指示条 */
.home-indicator-bar {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 134px;
    height: 5px;
    border-radius: 3px;
    z-index: 999;
    cursor: pointer;
    transition: background 0.3s;
}

.home-indicator-bar.light {
    background: rgba(255,255,255,0.8);
}

.home-indicator-bar.dark {
    background: rgba(0,0,0,0.8);
}

/* ===== 主屏幕加强版主页键（横条加宽加亮 + 「主页」提示） ===== */
.home-key-label {
    position: absolute;
    bottom: 17px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 3px;
    text-indent: 3px;   /* 抵消最后一个字的字距，保证视觉居中 */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

/* 仅在主屏幕时显示提示文字并加强横条 */
.phone-screen.on-home-screen .home-key-label {
    opacity: 1;
}

.phone-screen.on-home-screen .home-indicator-bar {
    width: 170px;
    height: 6px;
    background: #ffffff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.55);
}

/* 屏幕缩小动画（仅缩放主屏图标层，壁纸大小不变） */
.phone-screen {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s;
}

.phone-screen.minimized {
    border-radius: 40px;
}

.phone-screen.minimized .app-grid,
.phone-screen.minimized .dock {
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-grid,
.dock {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* App 界面显示黑色指示条 */
.phone-app .home-indicator-bar,
.wechat-app .home-indicator-bar,
.wechat-chat-screen .home-indicator-bar,
.call-screen .home-indicator-bar,
.calendar-app .home-indicator-bar,
.music-app .home-indicator-bar,
.player-screen .home-indicator-bar {
    background: rgba(0,0,0,0.8) !important;
}
/* 轻提示 Toast */
/* 主屏图标未读角标（#16 小红点，数字胶囊） */
.app-icon-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 11px;
    height: 18px;
    padding: 0 5px;
    background: #FF3B30;
    border-radius: 9px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-sizing: content-box;
    z-index: 3;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
}

.app-icon-img {
    position: relative;
}

.app-toast {
    position: absolute;
    left: 50%;
    bottom: 120px;
    transform: translateX(-50%) translateY(10px);
    max-width: 70%;
    padding: 10px 18px;
    background: rgba(30, 30, 30, 0.88);
    color: #fff;
    font-size: 14px;
    border-radius: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 9999;
}

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

/* 微信顶栏返回键 */
.wechat-header-back {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--wechat-link);
    font-size: 15px;
    cursor: pointer;
    flex-shrink: 0;
}

.wechat-header-back svg {
    width: 20px;
    height: 20px;
    fill: var(--wechat-link);
}

.wechat-header-back:active {
    opacity: 0.6;
}

/* 抖音网格封面占位（无封面图时） */
.douyin-grid-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #2a2a3a 0%, #1a1a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================= 微博 App ================= */
.weibo-app {
    position: absolute;
    inset: 0;
    background: #F2F2F4;
    z-index: 20;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

/* 折叠式顶部栏（#11）：下滑过封面后出现 ← 昵称 在线 */
.weibo-collapsed-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 52px 15px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #F0F0F0;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.weibo-collapsed-bar.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.weibo-collapsed-back {
    cursor: pointer;
    display: flex;
}

.weibo-collapsed-name {
    flex: 1;
    font-size: 17px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weibo-collapsed-online {
    font-size: 12px;
    color: #2BA245;
    background: #E8F6EC;
    border-radius: 9px;
    padding: 2px 9px;
    flex-shrink: 0;
}

.weibo-app.active {
    display: flex;
}

/* 顶部封面 */
.weibo-cover {
    height: 150px;
    background: linear-gradient(180deg, #8FB8BA 0%, #AFC5BC 45%, #D6C3A3 100%);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.weibo-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 56px 15px 0;
}

.weibo-back {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.weibo-back svg {
    width: 24px;
    height: 24px;
    fill: #3a3a3a;
}

.weibo-topbar-actions {
    display: flex;
    gap: 10px;
}

.weibo-topbar-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.weibo-topbar-btn svg {
    width: 18px;
    height: 18px;
    fill: #555;
}

.weibo-topbar-btn:active {
    background: rgba(255, 255, 255, 0.95);
}

/* 资料卡（上移盖住封面下缘） */
.weibo-profile {
    background: #fff;
    border-radius: 14px 14px 0 0;
    margin-top: -26px;
    position: relative;
    z-index: 2;
    padding-bottom: 4px;
    flex-shrink: 0;
}

.weibo-profile-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 0 15px;
}

.weibo-avatar {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 3px solid #fff;
    margin-top: -37px;
    background: #C8C8CC;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    flex-shrink: 0;
    box-sizing: border-box;
}

.weibo-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.weibo-profile-names {
    padding-top: 10px;
    flex: 1;
    min-width: 0;
}

.weibo-nickname {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weibo-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.weibo-badge-vip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.weibo-vip-icon {
    font-size: 15px;
}

.weibo-vip-btn {
    background: linear-gradient(135deg, #FFC53D 0%, #FF9800 100%);
    color: #fff;
    font-size: 10px;
    padding: 1px 8px;
    border-radius: 8px 8px 8px 2px;
    cursor: pointer;
}

.weibo-online {
    background: #E8F7EE;
    color: #35B56A;
    font-size: 11px;
    padding: 2px 9px;
    border-radius: 10px;
    cursor: pointer;
}

.weibo-stats {
    display: flex;
    gap: 22px;
    padding: 12px 15px 4px;
    font-size: 14px;
    color: #333;
}

.weibo-stats b {
    font-size: 17px;
    color: #000;
    font-weight: 700;
    margin-right: 2px;
}

.weibo-bio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
}

.weibo-bio svg {
    width: 16px;
    height: 16px;
    fill: #999;
    flex-shrink: 0;
}

.weibo-bio-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weibo-bio-arrow {
    width: 18px !important;
    height: 18px !important;
    fill: #bbb !important;
}

.weibo-edit-btn {
    margin: 8px auto 12px;
    width: 200px;
    text-align: center;
    padding: 9px 0;
    border: 1px solid #E0E0E0;
    border-radius: 20px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.weibo-edit-btn:active {
    background: #F5F5F5;
}

/* 精选/微博/相册 标签 */
.weibo-tabs {
    display: flex;
    align-items: center;
    border-top: 1px solid #F0F0F0;
    padding: 0 10px;
    /* 折叠式头部（#11）：tab 栏吸附在滚动容器顶部 */
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
}

.weibo-tab {
    flex: 1;
    text-align: center;
    padding: 12px 0 10px;
    font-size: 15px;
    color: #666;
    cursor: pointer;
    position: relative;
}

.weibo-tab.active {
    color: #000;
    font-weight: 700;
}

.weibo-tab.active::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5px;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: #FF8200;
}

.weibo-tab-add {
    padding: 8px 6px 8px 14px;
    font-size: 18px;
    color: #666;
    cursor: pointer;
    border-left: 1px solid #F0F0F0;
}

/* 内容滚动区 */
/* 整页滚动容器：封面 + 资料卡 + 内容一起滚动 */
.weibo-scroll {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
}

.weibo-scroll::-webkit-scrollbar {
    display: none;
}

.weibo-content {
    overflow: visible;
}

/* 右侧滚动指示条（细、半透明，滚动时淡入，页面静止后隐藏） */
.weibo-scrollbar {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2px;
    width: 3px;
    z-index: 15;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.weibo-scrollbar.visible {
    opacity: 1;
}

.weibo-scrollbar-thumb {
    position: absolute;
    left: 0;
    width: 100%;
    min-height: 30px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.25);
}

.weibo-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    font-size: 13px;
    color: #888;
    background: #F2F2F4;
}

.weibo-filter {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #888;
    cursor: pointer;
}

.weibo-filter svg {
    width: 14px;
    height: 14px;
    fill: #888;
}

/* 管理定时发博 / 草稿箱 */
.weibo-tools {
    display: flex;
    background: #fff;
    margin-bottom: 8px;
}

.weibo-tools span {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    color: #4A6A8F;
    cursor: pointer;
}

.weibo-tools span:first-child {
    border-right: 1px solid #F0F0F0;
}

.weibo-tools span:active {
    background: #F7F7F7;
}

/* 微博卡片 */
.weibo-post {
    background: #fff;
    margin-bottom: 8px;
    padding: 12px 15px 0;
}

.weibo-post-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.weibo-post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #C8C8CC;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #fff;
    flex-shrink: 0;
}

.weibo-post-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.weibo-post-headinfo {
    flex: 1;
    min-width: 0;
}

.weibo-post-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weibo-post-sub {
    font-size: 12px;
    color: #999;
    margin-top: 3px;
}

.weibo-post-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.weibo-reads {
    position: relative;
    border: 1px solid #E5E5E5;
    border-radius: 12px;
    padding: 2px 12px;
    text-align: center;
    line-height: 1.2;
}

.weibo-reads b {
    display: block;
    font-size: 13px;
    color: #666;
}

.weibo-reads span {
    display: block;
    font-size: 10px;
    color: #999;
}

.weibo-promo {
    position: absolute;
    top: -7px;
    right: -6px;
    background: #F24A3E;
    color: #fff;
    font-size: 9px;
    font-style: normal;
    padding: 1px 5px;
    border-radius: 7px 7px 7px 2px;
}

.weibo-post-drop {
    width: 18px;
    height: 18px;
    fill: #bbb;
    cursor: pointer;
}

.weibo-post-text {
    font-size: 15px;
    color: #000;
    line-height: 1.55;
    margin-top: 8px;
    word-break: break-word;
}

.weibo-mention {
    color: #5B7BD5;
}

/* 引用框 */
.weibo-quote {
    background: #F7F8FA;
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 10px;
    cursor: pointer;
}

.weibo-quote-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.weibo-quote-text {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    white-space: pre-line;
}

/* 操作栏 */
.weibo-post-actions {
    display: flex;
    margin-top: 10px;
    border-top: 1px solid #F5F5F5;
    padding: 9px 0;
}

.weibo-post-actions span {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
}

.weibo-post-actions span:active {
    opacity: 0.5;
}

.weibo-post-actions svg {
    width: 17px;
    height: 17px;
    fill: #666;
}

/* 空状态 */
.weibo-empty {
    padding: 60px 0;
    text-align: center;
    font-size: 14px;
    color: #999;
}

/* ===== 备忘录 App ===== */
.notes-app {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #F2F2F7;
    display: none;
    flex-direction: column;
}

.notes-app.active {
    display: flex;
}

.notes-header {
    padding: 60px 20px 10px;
    background: #F2F2F7;
    flex-shrink: 0;
}

.notes-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.notes-back {
    color: var(--accent-blue);
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.notes-title {
    font-size: 34px;
    font-weight: 700;
    color: #000;
}

.notes-add {
    color: var(--accent-blue);
    font-size: 16px;
    cursor: pointer;
}

.notes-add:active,
.notes-back:active {
    opacity: 0.5;
}

.notes-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.notes-tab {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    background: rgba(120,120,128,0.12);
    color: #000;
    transition: all 0.2s;
}

.notes-tab.active {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.notes-search {
    background: rgba(120,120,128,0.12);
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8E8E93;
    font-size: 16px;
    margin-bottom: 10px;
}

.notes-search svg {
    width: 16px;
    height: 16px;
    fill: #8E8E93;
    flex-shrink: 0;
}

.notes-search input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 16px;
    color: #000;
    font-family: inherit;
}

.notes-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 15px 20px;
}

.notes-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.notes-card:active {
    transform: scale(0.98);
}

.notes-card-title {
    font-size: 17px;
    font-weight: 600;
    color: #000;
    margin-bottom: 6px;
}

.notes-card-preview {
    font-size: 14px;
    color: #8E8E93;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notes-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #F2F2F7;
}

.notes-card-date {
    font-size: 12px;
    color: #8E8E93;
}

.notes-card-tag {
    font-size: 12px;
    color: var(--accent-blue);
    background: rgba(0,122,255,0.1);
    padding: 3px 8px;
    border-radius: 10px;
}

.notes-card-checkbox {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #C7C7CC;
    margin-right: 12px;
    flex-shrink: 0;
    cursor: pointer;
    box-sizing: border-box;
}

.notes-card-checkbox.checked {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    position: relative;
}

.notes-card-checkbox.checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.notes-card.todo {
    display: flex;
    align-items: flex-start;
}

.notes-card.todo .notes-card-content {
    flex: 1;
    min-width: 0;
}

.notes-card.todo.completed .notes-card-title {
    text-decoration: line-through;
    color: #8E8E93;
}

.notes-empty {
    text-align: center;
    color: #8E8E93;
    font-size: 16px;
    padding: 60px 0;
}

/* 备忘录编辑页 */
.notes-editor {
    position: absolute;
    inset: 0;
    z-index: 25;
    background: #F2F2F7;
    display: none;
    flex-direction: column;
}

.notes-editor.active {
    display: flex;
}

.notes-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 58px 20px 12px;
    flex-shrink: 0;
}

.notes-editor-cancel,
.notes-editor-save {
    color: var(--accent-blue);
    font-size: 16px;
    cursor: pointer;
}

.notes-editor-title {
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.notes-editor-cancel:active,
.notes-editor-save:active {
    opacity: 0.5;
}

.notes-editor-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 15px 20px;
}

.notes-editor-field {
    background: #fff;
    border-radius: 12px;
    padding: 12px 15px;
    margin-bottom: 12px;
}

.notes-editor-field label {
    display: block;
    font-size: 12px;
    color: #8E8E93;
    margin-bottom: 6px;
}

.notes-editor-field input,
.notes-editor-field textarea {
    width: 100%;
    border: none;
    outline: none;
    background: none;
    font-size: 16px;
    color: #000;
    font-family: inherit;
    resize: none;
}

.notes-editor-check {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 12px;
    padding: 14px 15px;
    margin-bottom: 12px;
    font-size: 15px;
    color: #000;
    cursor: pointer;
}

.notes-editor-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-blue);
}

.notes-editor-delete {
    background: #fff;
    border-radius: 12px;
    padding: 14px 15px;
    text-align: center;
    font-size: 15px;
    color: #FF3B30;
    cursor: pointer;
}

.notes-editor-delete:active {
    background: #FFF0F0;
}

/* ===== Safari 浏览器 App ===== */
.safari-app {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #F2F2F7;
    display: none;
    flex-direction: column;
}

.safari-app.active {
    display: flex;
}

.safari-header {
    padding: 60px 20px 10px;
    background: #F2F2F7;
    flex-shrink: 0;
}

.safari-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.safari-back {
    color: var(--accent-blue);
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.safari-search-bar {
    background: #fff;
    border-radius: 12px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    cursor: pointer;
}

.safari-search-bar svg {
    width: 18px;
    height: 18px;
    fill: #8E8E93;
}

.safari-search-text {
    flex: 1;
    color: #8E8E93;
    font-size: 17px;
}

.safari-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 20px;
}

.safari-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #000;
    margin-bottom: 15px;
    margin-top: 20px;
}

.safari-favorites-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 15px;
    margin-bottom: 10px;
}

.safari-favorite-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.safari-favorite-item:active .safari-favorite-icon {
    transform: scale(0.92);
}

.safari-favorite-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.15s ease;
}

.safari-favorite-name {
    font-size: 12px;
    color: #000;
    text-align: center;
}

.safari-privacy-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.safari-privacy-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(0,122,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.safari-privacy-text {
    flex: 1;
    font-size: 14px;
    color: #000;
    line-height: 1.4;
}

.safari-privacy-count {
    font-weight: 700;
}

.safari-reading-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    cursor: pointer;
}

.safari-reading-card:active {
    background: #F7F7F7;
}

.safari-reading-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: #E5E5E5;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.safari-reading-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.safari-reading-content {
    flex: 1;
    min-width: 0;
}

.safari-reading-title {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin-bottom: 4px;
}

.safari-reading-desc {
    font-size: 14px;
    color: #8E8E93;
    margin-bottom: 4px;
}

.safari-reading-url {
    font-size: 13px;
    color: #8E8E93;
}

/* 搜索界面（最近搜索） */
.safari-search-view {
    position: absolute;
    inset: 0;
    background: #F2F2F7;
    z-index: 25;
    display: none;
    flex-direction: column;
}

.safari-search-view.active {
    display: flex;
}

.safari-search-header {
    padding: 60px 20px 10px;
    background: #F2F2F7;
}

.safari-search-input-bar {
    background: #fff;
    border-radius: 12px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.safari-search-input-bar svg {
    width: 18px;
    height: 18px;
    fill: #8E8E93;
    flex-shrink: 0;
}

.safari-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 17px;
    background: transparent;
    font-family: inherit;
    color: #000;
    min-width: 0;
}

.safari-search-cancel-btn {
    color: var(--accent-blue);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.safari-search-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
}

.safari-recent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    margin-top: 10px;
}

.safari-recent-title {
    font-size: 22px;
    font-weight: 700;
    color: #000;
}

.safari-clear-btn {
    color: var(--accent-blue);
    font-size: 16px;
    cursor: pointer;
}

.safari-recent-list {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.safari-recent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border-bottom: 1px solid #F2F2F7;
    cursor: pointer;
}

.safari-recent-item:last-child {
    border-bottom: none;
}

.safari-recent-item:active {
    background: #F2F2F7;
}

.safari-recent-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #E5E5E5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.safari-recent-text {
    flex: 1;
    font-size: 16px;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.safari-recent-empty {
    padding: 30px 0;
    text-align: center;
    color: #8E8E93;
    font-size: 14px;
}

/* 底部工具栏 */
.safari-toolbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px 20px 30px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(20px);
    border-top: 1px solid #E5E5E5;
    flex-shrink: 0;
}

.safari-tool-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--accent-blue);
}

.safari-tool-btn:active {
    background: rgba(0,122,255,0.1);
}

.safari-tool-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.safari-tool-btn.disabled {
    color: #C7C7CC;
}

/* 网页演示页 */
.safari-page-view {
    position: absolute;
    inset: 0;
    background: #fff;
    z-index: 26;
    display: none;
    flex-direction: column;
}

.safari-page-view.active {
    display: flex;
}

.safari-page-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 58px 15px 10px;
    border-bottom: 1px solid #F0F0F0;
    flex-shrink: 0;
}

.safari-page-back {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.safari-page-back svg {
    width: 22px;
    height: 22px;
    fill: var(--accent-blue);
}

.safari-page-url {
    flex: 1;
    background: #F2F2F7;
    border-radius: 10px;
    padding: 7px 14px;
    font-size: 14px;
    color: #333;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.safari-page-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
}

.safari-page-icon {
    width: 84px;
    height: 84px;
    border-radius: 20px;
    background: #F2F2F7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.safari-page-title {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    text-align: center;
}

.safari-page-desc {
    font-size: 14px;
    color: #8E8E93;
}

/* 左侧悬浮边栏：窄短、贴左居中；页面静止时藏起，滑动时滑入 */
.safari-sidebar {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-110%, -50%);
    width: 42px;
    padding: 8px 5px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-radius: 0 12px 12px 0;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 15;
    transition: transform 0.25s ease;
    pointer-events: none;
}

.safari-sidebar.visible {
    transform: translate(0, -50%);
    pointer-events: auto;
}

/* 右侧滚动指示条（细、半透明，滚动时淡入，页面静止后隐藏） */
.safari-content {
    scrollbar-width: none;
}

.safari-content::-webkit-scrollbar {
    display: none;
}

.safari-scrollbar {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2px;
    width: 3px;
    z-index: 24; /* 高于侧栏(15)，低于网页演示页(26)：打开网页时不显示 */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.safari-scrollbar.visible {
    opacity: 1;
}

.safari-scrollbar-thumb {
    position: absolute;
    left: 0;
    width: 100%;
    min-height: 30px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.25);
}

.safari-sidebar-btn {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
}

.safari-sidebar-btn:active {
    background: rgba(0, 122, 255, 0.12);
}

/* ===== 地图 App ===== */
.maps-app {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #fff;
    display: none;
    flex-direction: column;
}

.maps-app.active {
    display: flex;
}

.maps-container {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.maps-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 无底图时的内置占位地图（道路 + 草地 + 水域） */
.maps-image-placeholder {
    width: 100%;
    height: 100%;
    cursor: grab;
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.95) 30%, rgba(255,255,255,0.95) 36%, transparent 36%),
        linear-gradient(90deg, transparent 62%, rgba(255,255,255,0.9) 62%, rgba(255,255,255,0.9) 66%, transparent 66%),
        linear-gradient(0deg, transparent 24%, rgba(255,255,255,0.95) 24%, rgba(255,255,255,0.95) 30%, transparent 30%),
        linear-gradient(0deg, transparent 58%, rgba(255,255,255,0.9) 58%, rgba(255,255,255,0.9) 62%, transparent 62%),
        linear-gradient(0deg, transparent 84%, #A8D3F0 84%),
        radial-gradient(circle at 78% 30%, #CBE3B8 0%, #CBE3B8 14%, transparent 15%),
        linear-gradient(160deg, #EDEFE4 0%, #E4E8D8 55%, #DDE4CF 100%);
}

.maps-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 60px 20px 10px;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.maps-back {
    color: var(--accent-blue);
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.9);
    padding: 8px 12px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.maps-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.maps-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.maps-btn svg {
    width: 22px;
    height: 22px;
    fill: var(--accent-blue);
}

.maps-btn:active {
    background: #fff;
}

.maps-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25%;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    transition: height 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 9;
}

/* 展开浏览历史地点/搜索时，面板减少至 20%，留出更多地图视野 */
.maps-panel.expanded {
    height: 20%;
}

.maps-panel-handle {
    width: 40px;
    height: 5px;
    background: #D1D1D6;
    border-radius: 3px;
    margin: 10px auto;
    cursor: pointer;
    flex-shrink: 0;
}

.maps-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 20px;
}

.maps-search-bar {
    background: #F2F2F7;
    border-radius: 12px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    cursor: pointer;
}

.maps-search-bar svg {
    width: 18px;
    height: 18px;
    fill: #8E8E93;
}

.maps-search-text {
    flex: 1;
    color: #8E8E93;
    font-size: 17px;
}

.maps-section {
    margin-bottom: 25px;
}

.maps-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.maps-section-title {
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

.maps-section-more {
    color: var(--accent-blue);
    font-size: 15px;
    cursor: pointer;
}

.maps-favorites {
    display: flex;
    gap: 20px;
}

.maps-favorite-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.maps-favorite-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
}

.maps-favorite-name {
    font-size: 13px;
    color: #000;
}

.maps-favorite-sub {
    font-size: 12px;
    color: #8E8E93;
}

.maps-favorite-item.add .maps-favorite-icon {
    background: #F2F2F7;
    color: var(--accent-blue);
}

.maps-recent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #F2F2F7;
    cursor: pointer;
}

.maps-recent-item:last-child {
    border-bottom: none;
}

.maps-recent-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.maps-recent-content {
    flex: 1;
    min-width: 0;
}

.maps-recent-title {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin-bottom: 2px;
}

.maps-recent-sub {
    font-size: 14px;
    color: #8E8E93;
}

/* ===== 信息 App ===== */
.messages-app {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #fff;
    display: none;
    flex-direction: column;
}

.messages-app.active {
    display: flex;
}

.messages-header {
    padding: 60px 20px 10px;
    background: #fff;
    flex-shrink: 0;
    border-bottom: 1px solid #F2F2F7;
}

.messages-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.messages-back {
    color: var(--accent-blue);
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.messages-edit {
    color: var(--accent-blue);
    font-size: 16px;
    cursor: pointer;
}

.messages-back:active,
.messages-edit:active {
    opacity: 0.5;
}

.messages-title {
    font-size: 34px;
    font-weight: 700;
    color: #000;
    margin-bottom: 15px;
}

.messages-search {
    background: #F2F2F7;
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8E8E93;
    font-size: 16px;
    margin-bottom: 10px;
}

.messages-search svg {
    width: 16px;
    height: 16px;
    fill: #8E8E93;
    flex-shrink: 0;
}

.messages-search input {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-size: 16px;
    color: #000;
    font-family: inherit;
    min-width: 0;
}

.messages-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 20px;
}

.messages-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid #F2F2F7;
    cursor: pointer;
}

.messages-item:active {
    background: #F2F2F7;
}

.messages-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #8E8E93;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
    position: relative;
    /* 不设 overflow:hidden——未读红点需要超出头像边缘显示 */
}

.messages-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.messages-unread-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: #FF3B30;
    border-radius: 50%;
    border: 2px solid #fff;
    box-sizing: content-box;
    z-index: 2;
}

.messages-content {
    flex: 1;
    min-width: 0;
}

.messages-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.messages-name {
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.messages-name.unread {
    font-weight: 700;
}

.messages-time {
    font-size: 14px;
    color: #8E8E93;
    flex-shrink: 0;
    margin-left: 8px;
}

.messages-preview {
    font-size: 14px;
    color: #8E8E93;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.messages-empty {
    text-align: center;
    color: #8E8E93;
    font-size: 15px;
    padding: 50px 0;
}

/* 信息详情 */
.messages-detail {
    position: absolute;
    inset: 0;
    background: #fff;
    z-index: 25;
    display: none;
    flex-direction: column;
}

.messages-detail.active {
    display: flex;
}

.messages-detail-header {
    padding: 58px 15px 10px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #F2F2F7;
    flex-shrink: 0;
}

.messages-detail-back {
    color: var(--accent-blue);
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.messages-detail-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #8E8E93;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    overflow: hidden;
    flex-shrink: 0;
}

.messages-detail-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.messages-detail-name {
    font-size: 17px;
    font-weight: 600;
    color: #000;
}

.messages-detail-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #F2F2F7;
    display: flex;
    flex-direction: column;
}

.messages-bubble {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 18px;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.4;
    word-break: break-word;
}

.messages-bubble.received {
    background: #E9E9EB;
    color: #000;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.messages-bubble.sent {
    background: var(--accent-blue);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.messages-bubble-time {
    font-size: 11px;
    opacity: 0.6;
    margin-top: 4px;
}

.messages-detail-input {
    padding: 10px 15px 25px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #F2F2F7;
    flex-shrink: 0;
}

.messages-input-field {
    flex: 1;
    background: #F2F2F7;
    border: none;
    border-radius: 20px;
    padding: 10px 15px;
    font-size: 16px;
    outline: none;
    font-family: inherit;
    color: #000;
    min-width: 0;
}

.messages-send-btn {
    color: var(--accent-blue);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.messages-send-btn:active {
    opacity: 0.5;
}

/* ===== 全局滚动条隐藏（保留滚动能力，滚动条指示器由 JS 自绘的微博/Safari 不受影响） ===== */
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* ===== emoji 兜底 App 图标（闹钟/购物/天气/学习通等无 PNG 图标的 App） ===== */
.app-icon-emoji {
    background: linear-gradient(145deg, #E8EDF5, #C6CEDC);
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-icon-emoji .app-emoji {
    font-size: 34px;
    line-height: 1;
}

/* ===== 闹钟 App（#5） ===== */
.alarm-app {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #fff;
    display: none;
    flex-direction: column;
}

.alarm-app.active {
    display: flex;
}

.alarm-nav {
    padding: 60px 20px 10px;
    background: #fff;
}

.alarm-back {
    color: #007AFF;
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.alarm-header {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
}

.alarm-title {
    font-size: 34px;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px;
}

.alarm-empty {
    padding: 40px 0;
    text-align: center;
    color: #8E8E93;
    font-size: 15px;
}

.alarm-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #F2F2F7;
}

.alarm-item-info.off .alarm-item-time,
.alarm-item-info.off .alarm-item-label {
    color: #C7C7CC;
}

.alarm-item-time {
    font-size: 40px;
    font-weight: 300;
    color: #000;
    line-height: 1.1;
}

.alarm-item-label {
    font-size: 14px;
    color: #8E8E93;
    margin-top: 2px;
}

.alarm-toggle {
    width: 51px;
    height: 31px;
    border-radius: 16px;
    background: #E9E9EA;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.25s ease;
}

.alarm-toggle.on {
    background: #34C759;
}

.alarm-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    transition: left 0.25s ease;
}

.alarm-toggle.on .alarm-toggle-knob {
    left: 22px;
}

/* 闹钟响铃全屏提醒（覆盖锁屏在内的所有界面） */
.alarm-overlay {
    position: absolute;
    inset: 0;
    z-index: 9500;
    background: rgba(20, 20, 22, 0.96);
    display: none;
    align-items: center;
    justify-content: center;
}

.alarm-overlay.active {
    display: flex;
}

.alarm-overlay-inner {
    width: 100%;
    padding: 0 30px;
    text-align: center;
    color: #fff;
}

.alarm-overlay-sub {
    font-size: 16px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 6px;
}

.alarm-overlay-time {
    font-size: 64px;
    font-weight: 200;
    line-height: 1.1;
}

.alarm-overlay-label {
    font-size: 20px;
    font-weight: 500;
    margin-top: 8px;
}

.alarm-overlay-actions {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin-top: 90px;
}

.alarm-overlay-actions button {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    font-family: inherit;
}

.alarm-overlay-actions button span {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.75;
}

.alarm-snooze-btn {
    background: rgba(255,255,255,0.18);
    color: #fff;
}

.alarm-stop-btn {
    background: rgba(255,255,255,0.32);
    color: #fff;
}

.alarm-overlay-actions button:active {
    opacity: 0.7;
}

/* ===== 购物 App（#4） ===== */
.shopping-app {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #F5F6F8;
    display: none;
    flex-direction: column;
}

.shopping-app.active {
    display: flex;
}

.shopping-nav {
    padding: 60px 20px 6px;
    background: linear-gradient(135deg, #FF5000, #FF6A00);
}

.shopping-back {
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.shopping-back svg {
    fill: #fff;
}

.shopping-header {
    background: linear-gradient(135deg, #FF5000, #FF6A00);
    padding: 6px 20px 14px;
}

.shopping-tabs {
    display: flex;
    gap: 24px;
}

.shopping-tab {
    color: rgba(255,255,255,0.75);
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    padding-bottom: 6px;
    position: relative;
}

.shopping-tab.active {
    color: #fff;
    font-weight: 700;
}

.shopping-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background: #fff;
}

.shopping-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
}

.shopping-empty {
    text-align: center;
    color: #999;
    font-size: 14px;
    padding: 50px 0;
}

.shopping-order-card {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
}

.shopping-order-shop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    padding-bottom: 10px;
    border-bottom: 1px solid #F2F2F7;
}

.shopping-order-status {
    font-size: 12px;
    font-weight: 500;
}

.shopping-order-status.done { color: #999; }
.shopping-order-status.waiting { color: #FF5000; }
.shopping-order-status.shipping { color: #1F8DFB; }

.shopping-order-body {
    display: flex;
    gap: 10px;
    padding: 10px 0;
}

.shopping-item-img {
    width: 74px;
    height: 74px;
    border-radius: 8px;
    flex-shrink: 0;
    overflow: hidden;
    background: #F5F6F8;
}

.shopping-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shopping-item-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #C0C6CF;
    background: linear-gradient(145deg, #F2F4F8, #E4E8EF);
}

.shopping-order-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.shopping-item-name {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shopping-item-price {
    font-size: 16px;
    font-weight: 700;
    color: #FF5000;
}

.shopping-order-time {
    font-size: 12px;
    color: #999;
}

.shopping-cart-row {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
}

.shopping-cart-shop {
    font-size: 12px;
    color: #999;
    margin: 2px 0 6px;
}

.shopping-cart-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shopping-qty {
    font-size: 13px;
    color: #999;
}

/* ===== 天气 App（#6） ===== */
.weather-app {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: linear-gradient(180deg, #4A90D9 0%, #7FB2E5 55%, #A8CCEE 100%);
    display: none;
    flex-direction: column;
    color: #fff;
}

.weather-app.active {
    display: flex;
}

.weather-nav {
    padding: 60px 20px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.weather-back {
    color: rgba(255,255,255,0.9);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.weather-back svg {
    fill: rgba(255,255,255,0.9);
}

.weather-dots {
    display: flex;
    gap: 6px;
}

.weather-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
}

.weather-dot.active {
    background: #fff;
}

/* 城市横滑视口（#6 左右滑动切换城市） */
.weather-viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.weather-track {
    display: flex;
    height: 100%;
    transition: transform 0.3s ease;
    will-change: transform;
}

.weather-city-page {
    flex: 0 0 100%;
    min-width: 0;
    padding: 10px 20px 30px;
    overflow-y: auto;
    box-sizing: border-box;
}

.weather-city-name {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
}

.weather-temp {
    text-align: center;
    font-size: 80px;
    font-weight: 200;
    line-height: 1.15;
}

.weather-cond {
    text-align: center;
    font-size: 18px;
    opacity: 0.9;
}

.weather-hilo {
    text-align: center;
    font-size: 15px;
    opacity: 0.8;
    margin-top: 4px;
}

.weather-aqi {
    width: fit-content;
    margin: 12px auto 0;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 4px 14px;
    font-size: 13px;
}

.weather-hourly,
.weather-daily {
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 12px;
    margin-top: 18px;
}

.weather-hourly-title,
.weather-daily-title {
    font-size: 12px;
    opacity: 0.75;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.weather-hourly-strip {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.weather-hour {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.weather-hour-time,
.weather-hour-temp {
    font-size: 13px;
}

.weather-hour-icon {
    font-size: 20px;
}

.weather-day {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    font-size: 15px;
}

.weather-day:last-child {
    border-bottom: none;
}

.weather-day-name {
    width: 48px;
}

.weather-day-icon {
    font-size: 18px;
    width: 28px;
    text-align: center;
}

.weather-day-temp {
    margin-left: auto;
    opacity: 0.9;
}

/* ===== QQ App（#7） ===== */
.qq-app {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #F5F6F8;
    display: none;
    flex-direction: column;
}

.qq-app.active {
    display: flex;
}

.qq-page {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #F5F6F8;
}

.qq-header {
    padding: 60px 15px 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #EEEEEE;
}

.qq-back {
    color: #0099FF;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 70px;
}

.qq-back svg {
    fill: #0099FF;
}

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

.qq-header-right {
    width: 70px;
}

.qq-body {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

.qq-list {
    padding: 0 15px;
}

.qq-empty {
    text-align: center;
    color: #999;
    font-size: 14px;
    padding: 50px 0;
}

.qq-chat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #F0F0F0;
    cursor: pointer;
}

.qq-chat-item:active {
    background: #EFEFEF;
}

.qq-avatar {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: linear-gradient(135deg, #12B7F5, #0D8AC9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.qq-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qq-avatar-group {
    background: linear-gradient(135deg, #5CA8FF, #3D7EF7);
}

.qq-avatar-sm {
    width: 34px;
    height: 34px;
    font-size: 15px;
    border-radius: 8px;
}

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

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

.qq-chat-name {
    font-size: 16px;
    font-weight: 500;
    color: #000;
    display: flex;
    align-items: center;
    gap: 5px;
}

.qq-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3DC93D;
    display: inline-block;
}

.qq-chat-time {
    font-size: 12px;
    color: #B2B2B2;
}

.qq-chat-preview {
    font-size: 14px;
    color: #9B9B9B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qq-unread-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #FF4B4B;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    flex-shrink: 0;
}

.qq-group-title {
    font-size: 13px;
    color: #999;
    padding: 14px 0 6px;
}

.qq-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #F0F0F0;
}

.qq-contact-info {
    flex: 1;
    min-width: 0;
}

.qq-contact-name {
    font-size: 16px;
    color: #000;
    display: flex;
    align-items: center;
    gap: 5px;
}

.qq-contact-sig {
    font-size: 13px;
    color: #9B9B9B;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qq-online-text {
    font-size: 12px;
    color: #3DC93D;
}

.qq-tabbar {
    display: flex;
    background: #fff;
    border-top: 1px solid #EEEEEE;
    padding: 6px 0 22px;
}

.qq-tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #9B9B9B;
    font-size: 11px;
    cursor: pointer;
}

.qq-tabbar-item svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.qq-tabbar-item.active {
    color: #0099FF;
}

/* QQ 聊天屏 */
.qq-chat-screen {
    position: absolute;
    inset: 0;
    background: #F5F6F8;
    z-index: 25;
    display: none;
    flex-direction: column;
}

.qq-chat-screen.active {
    display: flex;
}

.qq-chat-header {
    padding: 58px 15px 10px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #EEEEEE;
}

.qq-chat-back {
    color: #0099FF;
    cursor: pointer;
    display: flex;
}

.qq-chat-back svg {
    fill: #0099FF;
}

.qq-chat-name {
    font-size: 17px;
    font-weight: 600;
    color: #000;
}

.qq-chat-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
}

.qq-bubble-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 12px;
}

.qq-bubble-row.sent {
    flex-direction: row-reverse;
}

.qq-bubble {
    max-width: 72%;
    padding: 10px 13px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.45;
    word-break: break-word;
}

.qq-bubble-row.received .qq-bubble {
    background: #fff;
    color: #000;
    border-top-left-radius: 4px;
}

.qq-bubble-row.sent .qq-bubble {
    background: #0099FF;
    color: #fff;
    border-top-right-radius: 4px;
}

.qq-chat-input {
    padding: 10px 15px 25px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #EEEEEE;
}

.qq-input-field {
    flex: 1;
    background: #F2F2F2;
    border: none;
    border-radius: 18px;
    padding: 9px 14px;
    font-size: 15px;
    outline: none;
    font-family: inherit;
    min-width: 0;
}

.qq-send-btn {
    color: #0099FF;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* ===== 学习通 App（#8） ===== */
.xuexitong-app {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #F4F6FA;
    display: none;
    flex-direction: column;
}

.xuexitong-app.active {
    display: flex;
}

.xt-page {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #F4F6FA;
}

.xt-header {
    padding: 58px 15px 10px;
    background: linear-gradient(135deg, #3A7BFE, #5B8DFF);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}

.xt-back {
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 80px;
}

.xt-back svg {
    fill: rgba(255,255,255,0.9);
}

.xt-header-title {
    font-size: 17px;
    font-weight: 600;
}

.xt-header-right {
    width: 80px;
}

.xt-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
}

.xt-section {
    margin-bottom: 18px;
}

.xt-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin-bottom: 10px;
}

.xt-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 24px 0;
}

.xt-course-card {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.xt-course-bar {
    width: 4px;
    height: 40px;
    border-radius: 2px;
    background: #3A7BFE;
    flex-shrink: 0;
}

.xt-course-info {
    flex: 1;
    min-width: 0;
}

.xt-course-name {
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.xt-course-teacher {
    font-size: 12px;
    color: #999;
    margin: 3px 0 7px;
}

.xt-progress {
    height: 5px;
    border-radius: 3px;
    background: #EDF0F5;
    overflow: hidden;
}

.xt-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #3A7BFE, #6FA5FF);
}

.xt-progress-num {
    font-size: 12px;
    color: #3A7BFE;
    font-weight: 600;
    flex-shrink: 0;
}

.xt-todo-item {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.xt-todo-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #C9D2E0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
}

.xt-todo-check.done {
    background: #34C759;
    border-color: #34C759;
}

.xt-todo-info {
    flex: 1;
    min-width: 0;
}

.xt-todo-title {
    font-size: 14px;
    font-weight: 500;
    color: #222;
}

.xt-todo-meta {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

.xt-notice-card {
    background: #fff;
    border-radius: 12px;
    padding: 13px;
    margin-bottom: 10px;
}

.xt-notice-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.xt-notice-course {
    font-size: 12px;
    color: #3A7BFE;
    background: #EBF1FF;
    border-radius: 4px;
    padding: 2px 8px;
}

.xt-notice-time {
    font-size: 12px;
    color: #B2B2B2;
}

.xt-notice-title {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    margin-bottom: 5px;
}

.xt-notice-content {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.xt-profile-card {
    background: linear-gradient(135deg, #3A7BFE, #5B8DFF);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    margin-bottom: 18px;
}

.xt-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    overflow: hidden;
}

.xt-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xt-profile-name {
    font-size: 18px;
    font-weight: 700;
}

.xt-profile-school {
    font-size: 13px;
    opacity: 0.85;
    margin-top: 3px;
}

.xt-stat-row {
    background: #fff;
    border-radius: 14px;
    padding: 16px 0;
    display: flex;
}

.xt-stat {
    flex: 1;
    text-align: center;
}

.xt-stat-num {
    font-size: 22px;
    font-weight: 700;
    color: #3A7BFE;
}

.xt-stat-label {
    font-size: 12px;
    color: #999;
    margin-top: 3px;
}

.xt-tabbar {
    display: flex;
    background: #fff;
    border-top: 1px solid #E8E8E8;
    padding: 6px 0 22px;
}

.xt-tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #9B9B9B;
    font-size: 11px;
    cursor: pointer;
}

.xt-tabbar-item svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.xt-tabbar-item.active {
    color: #3A7BFE;
}

/* ===== 音乐 App · 网易云风格"我的"页（#9） ===== */
.music-root {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #F8F8F8;
}

.music-my-header {
    position: relative;
    padding: 0 18px 16px;
    color: #fff;
}

.music-my-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(160deg, #3A3D46 0%, #555863 55%, #7A7D88 100%);
    z-index: 0;
}

.music-my-nav {
    position: relative;
    z-index: 1;
    padding-top: 58px;
}

.music-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

.music-back-btn.dark {
    color: #E6E6E6;
}

.music-my-profile {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.music-my-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    overflow: hidden;
}

.music-my-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.music-my-info {
    min-width: 0;
}

.music-my-nickname {
    font-size: 20px;
    font-weight: 700;
}

.music-my-vip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #3D2E12;
    background: linear-gradient(90deg, #F7E6B8, #E8C87E);
    border-radius: 10px;
    padding: 3px 10px;
}

.music-vip-crown {
    font-size: 12px;
}

.music-my-stats {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 34px;
    margin-top: 18px;
    padding-bottom: 4px;
}

.music-stat-num {
    font-size: 17px;
    font-weight: 700;
}

.music-stat-label {
    font-size: 12px;
    opacity: 0.75;
    margin-top: 2px;
}

.music-my-tabs {
    display: flex;
    background: #fff;
    border-bottom: 1px solid #EFEFEF;
}

.music-my-tab {
    flex: 1;
    text-align: center;
    font-size: 15px;
    color: #666;
    padding: 11px 0;
    cursor: pointer;
    position: relative;
}

.music-my-tab.active {
    color: #C20C0C;
    font-weight: 700;
}

.music-my-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: #C20C0C;
}

.music-my-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
}

.music-my-empty {
    text-align: center;
    color: #999;
    font-size: 14px;
    padding: 60px 0;
}

.music-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 13px 14px;
    margin-bottom: 9px;
    cursor: pointer;
}

.music-entry:active {
    background: #F0F0F0;
}

.music-entry-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.music-entry-icon.red { background: #FDEBEB; color: #C20C0C; }
.music-entry-icon.blue { background: #EAF2FF; color: #3A7BFE; }
.music-entry-icon.orange { background: #FFF3E5; color: #FF8A00; }

.music-entry-info {
    flex: 1;
    min-width: 0;
}

.music-entry-title {
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.music-entry-sub {
    font-size: 12px;
    color: #999;
    margin-top: 3px;
}

.music-entry-arrow {
    color: #C7C7CC;
    font-size: 20px;
    flex-shrink: 0;
}

.music-playlists-title {
    font-size: 13px;
    color: #999;
    margin: 14px 2px 8px;
}

.music-playlist-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 2px;
    cursor: pointer;
}

.music-playlist-row:active {
    opacity: 0.7;
}

.music-playlist-cover {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: linear-gradient(135deg, #DDD3C3, #C7BCA9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    flex-shrink: 0;
    overflow: hidden;
}

.music-playlist-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 歌曲列表页（我喜欢的/我的发布/歌单详情） */
.music-list-page {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: #1D1F24;
    display: none;
    flex-direction: column;
}

.music-list-page.active {
    display: flex;
}

.music-list-nav {
    padding: 58px 16px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1D1F24;
}

.music-list-page-title {
    flex: 1;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-list-play {
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 14px;
    padding: 2px 14px;
}

.music-songs {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px 20px;
}

.music-songs-empty {
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    padding: 60px 0;
}

.music-song-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 2px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    cursor: pointer;
}

.music-song-row.playing .music-song-title {
    color: #C20C0C;
}

.music-song-idx {
    width: 22px;
    text-align: center;
    color: rgba(255,255,255,0.45);
    font-size: 13px;
    flex-shrink: 0;
}

.music-song-info {
    flex: 1;
    min-width: 0;
}

.music-song-title {
    font-size: 15px;
    color: #F0F0F0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-song-artist {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    margin-top: 2px;
}

.music-song-play {
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    flex-shrink: 0;
}

/* ===== 地图标注（#14：倒水滴标签 + 详情弹层） ===== */
.map-marker {
    position: absolute;
    transform: translate(-50%, -100%);
    cursor: pointer;
    z-index: 2;
}

.map-marker-pin {
    width: 36px;
    height: 36px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-marker-icon {
    transform: rotate(45deg);
    font-size: 17px;
    line-height: 1;
}

.map-marker:active .map-marker-pin {
    filter: brightness(0.85);
}

.maps-marker-popup {
    position: absolute;
    top: 100px;
    left: 16px;
    right: 16px;
    z-index: 50;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    padding: 13px 14px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.maps-marker-popup.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.maps-marker-popup-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.maps-marker-popup-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.maps-marker-popup-titles {
    flex: 1;
    min-width: 0;
}

.maps-marker-popup-title {
    font-size: 15px;
    font-weight: 600;
    color: #000;
}

.maps-marker-popup-sub {
    font-size: 13px;
    color: #8E8E93;
    margin-top: 2px;
}

.maps-marker-popup-close {
    color: #999;
    font-size: 15px;
    cursor: pointer;
    padding: 2px 4px;
    flex-shrink: 0;
}

/* ===== 抖音消息页 + 小火人（#10） ===== */
.douyin-messages-screen {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: #121212;
    display: none;
    flex-direction: column;
}

.douyin-messages-screen.active {
    display: flex;
}

.douyin-messages-header {
    padding: 58px 15px 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.douyin-messages-back {
    cursor: pointer;
    display: flex;
}

.douyin-messages-title {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}

.douyin-chat-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px;
}

.douyin-chat-empty {
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    padding: 60px 0;
}

.douyin-chat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    cursor: pointer;
}

.douyin-chat-item:active {
    opacity: 0.75;
}

.douyin-chat-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #2E2E2E;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
}

.douyin-chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.douyin-chat-flame {
    position: absolute;
    bottom: -4px;
    right: -6px;
    background: #FE2C55;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 9px;
    padding: 1px 6px;
    border: 2px solid #121212;
    white-space: nowrap;
}

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

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

.douyin-chat-name {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.douyin-chat-time {
    color: rgba(255,255,255,0.45);
    font-size: 12px;
}

.douyin-chat-preview {
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.douyin-unread-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #FE2C55;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* 抖音聊天屏 */
.douyin-chat-screen {
    position: absolute;
    inset: 0;
    z-index: 15;
    background: #121212;
    display: none;
    flex-direction: column;
}

.douyin-chat-screen.active {
    display: flex;
}

.douyin-chat-header {
    padding: 58px 15px 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.douyin-chat-back {
    cursor: pointer;
    display: flex;
}

.douyin-chat-name {
    flex: 1;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.douyin-flame-chip {
    background: rgba(254, 44, 85, 0.18);
    color: #FE2C55;
    font-size: 12px;
    font-weight: 700;
    border-radius: 12px;
    padding: 4px 10px;
    cursor: pointer;
    flex-shrink: 0;
}

.douyin-chat-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
}

.douyin-bubble-row {
    display: flex;
    margin-bottom: 10px;
}

.douyin-bubble-row.received {
    justify-content: flex-start;
}

.douyin-bubble-row.sent {
    justify-content: flex-end;
}

.douyin-bubble {
    max-width: 72%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 15px;
    line-height: 1.45;
    word-break: break-word;
}

.douyin-bubble-row.received .douyin-bubble {
    background: #2A2A2A;
    color: #fff;
    border-bottom-left-radius: 4px;
}

.douyin-bubble-row.sent .douyin-bubble {
    background: #FE2C55;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.douyin-chat-input {
    padding: 10px 14px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #2A2A2A;
}

.douyin-input-field {
    flex: 1;
    background: #2A2A2A;
    border: none;
    border-radius: 18px;
    padding: 9px 14px;
    font-size: 15px;
    outline: none;
    color: #fff;
    font-family: inherit;
    min-width: 0;
}

.douyin-send-btn {
    color: #FE2C55;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* 小火人详情弹窗 */
.flame-popup {
    position: absolute;
    inset: 0;
    z-index: 60;
    background: rgba(0,0,0,0.6);
    display: none;
    align-items: center;
    justify-content: center;
}

.flame-popup.active {
    display: flex;
}

.flame-popup-card {
    width: 76%;
    background: #1E1E1E;
    border-radius: 18px;
    padding: 26px 20px 20px;
    text-align: center;
    color: #fff;
}

.flame-popup-fire {
    font-size: 40px;
}

.flame-popup-days {
    font-size: 44px;
    font-weight: 700;
    color: #FE2C55;
    line-height: 1.2;
    margin-top: 6px;
}

.flame-popup-label {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    margin-top: 2px;
}

.flame-popup-detail {
    margin-top: 16px;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    line-height: 1.8;
}

.flame-popup-btn {
    margin-top: 18px;
    width: 100%;
    padding: 10px 0;
    border: none;
    border-radius: 10px;
    background: #FE2C55;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}