/**
 * 喵呜小手机 - 页面样式
 * 各个页面的特定样式
 */

/* --- 引入中文字体 (对齐 downloaded_site) --- */
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&display=swap');

/* --- 主题字体：阿里巴巴普惠体 --- */
@font-face {
    font-family: 'Alibaba PuHuiTi';
    src: url('../assets/Alibaba-PuHuiTi-Regular.ttf');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ========== 通用页面布局 ========== */
.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--background-gray);
}

.screen-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 70px; /* 为底部导航栏留出空间 */
}

/* ========== 锁屏界面 ========== */
.lock-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-lock-screen);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex;
    flex-direction: column;
    color: white;
}

.lock-screen-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.lock-screen-content {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-xl);
    padding-top: calc(var(--spacing-xl) + var(--safe-area-top));
}

.lock-time {
    font-size: 72px;
    font-weight: 200;
    text-align: center;
    margin-top: 60px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.lock-date {
    font-size: var(--font-size-lg);
    text-align: center;
    opacity: 0.8;
    margin-top: var(--spacing-sm);
}

.lock-widgets {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.lock-widget {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.lock-widget-title {
    font-size: var(--font-size-xs);
    opacity: 0.7;
    margin-bottom: var(--spacing-sm);
}

.lock-widget-content {
    font-size: var(--font-size-sm);
}

.lock-footer {
    text-align: center;
    padding: var(--spacing-xl);
    padding-bottom: calc(var(--spacing-xl) + var(--safe-area-bottom));
    font-size: var(--font-size-sm);
    opacity: 0.6;
}

/* 密码键盘 */
.passcode-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.passcode-title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xl);
}

.passcode-dots {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xxl);
}

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

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

.passcode-keypad {
    display: grid;
    grid-template-columns: repeat(3, 70px);
    gap: var(--spacing-md);
}

.keypad-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.keypad-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

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

.keypad-btn.empty {
    background-color: transparent;
    cursor: default;
}

.keypad-btn.text {
    font-size: var(--font-size-sm);
}

/* ========== 手机桌面（精美版） ========== */
.phone-home-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #0a0a0f;
}

/* 壁纸遮罩层 */
.phone-wallpaper-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

/* 状态栏 */
.phone-status-bar {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    padding-top: calc(14px + var(--safe-area-top, 0px));
    color: white;
}

.status-left .status-time-mini {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.status-notch {
    width: 120px;
    height: 28px;
    background: #000;
    border-radius: 20px;
}

.status-right {
    display: flex;
    gap: 8px;
    font-size: 15px;
}

.status-right i {
    opacity: 0.95;
}

/* 时间日期显示 */
.phone-datetime {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 50px 20px 60px;
    color: white;
}

.datetime-time {
    font-size: 76px;
    font-weight: 100;
    letter-spacing: -3px;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 4px 30px rgba(255,255,255,0.1));
}

.datetime-info {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

.datetime-date {
    font-size: 18px;
    font-weight: 400;
    opacity: 0.9;
    letter-spacing: 1px;
}

.datetime-weekday {
    font-size: 18px;
    font-weight: 300;
    opacity: 0.7;
}

/* 应用图标容器 */
.phone-apps-container {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* 应用图标网格 */
.phone-apps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 40px;
    max-width: 320px;
}

.phone-app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.phone-app-item:hover {
    transform: scale(1.08);
}

.phone-app-item:active {
    transform: scale(0.92);
}

/* 应用图标 - 正方形 */
.app-icon-wrapper {
    width: 68px;
    height: 68px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.app-icon-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 50%);
    pointer-events: none;
}

.app-icon-wrapper::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
    border-radius: 15px 15px 50% 50%;
    pointer-events: none;
}

.app-icon-wrapper i {
    font-size: 30px;
    color: white;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.app-name {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    letter-spacing: 0.3px;
}

/* 底部Home指示器 */
.phone-home-indicator {
    position: relative;
    z-index: 2;
    padding: 20px 0;
    padding-bottom: calc(10px + var(--safe-area-bottom, 0px));
    display: flex;
    justify-content: center;
}

.home-bar {
    width: 140px;
    height: 5px;
    background: rgba(255,255,255,0.4);
    border-radius: 3px;
}

/* ========== Home指示条（返回桌面） ========== */
.home-indicator-bar {
    position: fixed;
    bottom: 8px; /* 下移一点，避免和tabbar太近 */
    left: 0;
    right: 0;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding-bottom: var(--safe-area-bottom, 0px);
    pointer-events: none; /* 容器不响应点击 */
}

.home-indicator {
    width: 134px;
    height: 5px;
    background: var(--text-gray, rgba(0,0,0,0.3));
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.6;
    pointer-events: auto; /* 只有黑条本身响应点击 */
}

.home-indicator:hover {
    opacity: 1;
    transform: scaleX(1.1);
}

.home-indicator:active {
    transform: scaleY(1.5);
}

/* ========== 小手机系统页面主题隔离 ========== */
/* 防止喵呜主题影响小手机的系统页面 */

/* 手机桌面 - 白色文字（仅默认主题和浅色状态栏主题） */
.phone-home-screen:not(.theme-active),
.phone-home-screen:not(.theme-active) * {
    color: #fff !important;
}

.phone-home-screen:not(.theme-active) .datetime-time {
    -webkit-text-fill-color: transparent !important;
}

/* 天气页面 - 白色文字 */
.weather-screen,
.weather-screen * {
    color: #fff !important;
}

.weather-screen .weather-header,
.weather-screen .weather-title,
.weather-screen .weather-back-btn,
.weather-screen .weather-refresh-btn,
.weather-screen .weather-temp,
.weather-screen .weather-desc,
.weather-screen .weather-detail-item,
.weather-screen .forecast-item,
.weather-screen .detail-item,
.weather-screen .detail-label,
.weather-screen .detail-value {
    color: #fff !important;
}

/* 天气页面详情卡片 - 修复背景和文字颜色 */
.weather-screen .detail-item {
    background: transparent !important;
    border-bottom: none !important;
    padding: 0 !important;
}

.weather-screen .detail-label {
    color: rgba(255,255,255,0.7) !important;
}

.weather-screen .detail-value {
    color: #fff !important;
    font-weight: 600 !important;
}

/* 备忘录页面 - 深色文字 */
.notes-screen {
    background: #f5f5f7 !important;
}

.notes-screen,
.notes-screen * {
    color: #333 !important;
}

.notes-screen .notes-header,
.notes-screen .notes-title,
.notes-screen .notes-back-btn,
.notes-screen .notes-add-btn,
.notes-screen .note-card,
.notes-screen .note-content,
.notes-screen .note-date {
    color: #333 !important;
}

.notes-screen .note-date {
    color: #888 !important;
}

/* 日历页面 - 深色文字 */
.calendar-screen {
    background: #f5f5f7 !important;
}

.calendar-screen,
.calendar-screen * {
    color: #333 !important;
}

.calendar-screen .calendar-header,
.calendar-screen .calendar-title,
.calendar-screen .calendar-back-btn,
.calendar-screen .calendar-today-btn,
.calendar-screen .calendar-nav,
.calendar-screen .calendar-month,
.calendar-screen .calendar-weekday,
.calendar-screen .calendar-day,
.calendar-screen .event-item {
    color: #333 !important;
}

.calendar-screen .calendar-day.other-month {
    color: #ccc !important;
}

/* 小手机设置页面 - 深色文字 */
.settings-screen-full {
    background: #f5f5f7 !important;
}

.settings-screen-full,
.settings-screen-full * {
    color: #333 !important;
}

.settings-screen-full .settings-header-modern,
.settings-screen-full .setting-item,
.settings-screen-full .item-label,
.settings-screen-full .item-title,
.settings-screen-full .section-title {
    color: #333 !important;
}

.settings-screen-full .item-subtitle,
.settings-screen-full .item-value {
    color: #666 !important;
}

/* 锁屏相册页面 - 深色文字 */
.lock-screen-photos-page {
    background: #f5f5f5 !important;
}

.lock-screen-photos-page,
.lock-screen-photos-page * {
    color: #333 !important;
}

.lock-screen-photos-page .screen-header {
    color: #333 !important;
    background: #fff !important;
}

/* 账号页面 - 深色文字 */
.account-screen {
    background: #f5f5f7 !important;
}

.account-screen,
.account-screen * {
    color: #333 !important;
}

.account-screen .account-header {
    color: #333 !important;
}

/* ========== 账号页面样式 ========== */
.account-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f5f5f7;
    display: flex;
    flex-direction: column;
}

.account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    padding-top: calc(16px + var(--safe-area-top, 0px));
    background: #fff;
    border-bottom: 1px solid #eee;
}

.account-back-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-title {
    font-size: 18px;
    font-weight: 600;
}

.account-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 40px;
}

/* 未登录状态 */
.account-not-logged {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.login-prompt-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    max-width: 300px;
}

.login-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-icon i {
    font-size: 36px;
    color: #fff !important;
}

.login-prompt-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.login-prompt-card p {
    font-size: 14px;
    color: #888 !important;
    margin-bottom: 24px;
}

.login-btn {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff !important;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(17, 153, 142, 0.4);
}

/* 已登录状态 */
.user-info-card {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.user-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

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

.user-avatar i {
    font-size: 28px;
    color: #fff !important;
}

.user-details {
    flex: 1;
}

.user-name {
    font-size: 20px;
    font-weight: 600;
    color: #fff !important;
    margin-bottom: 6px;
}

.user-level .level-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    font-size: 12px;
    color: #fff !important;
}

.level-badge.is-member {
    background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
}

/* Token余额卡片 */
.token-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.token-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.token-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.token-label {
    font-size: 14px;
    color: #888 !important;
}

.token-label i {
    color: #f5af19 !important;
    margin-right: 6px;
}

.token-balance {
    font-size: 28px;
    font-weight: 700;
    color: #333 !important;
}

.token-action {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #11998e !important;
    font-size: 14px;
    font-weight: 500;
}

/* 账号设置区块 */
.account-section {
    margin-bottom: 20px;
}

.account-section .section-title {
    font-size: 13px;
    color: #888 !important;
    margin-bottom: 10px;
    padding-left: 4px;
}

.account-menu {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.account-menu .menu-item {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
}

.account-menu .menu-item:last-child {
    border-bottom: none;
}

.account-menu .menu-item:hover {
    background: #f9f9f9;
}

.account-menu .copy-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: #f0f0f0;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.account-menu .copy-btn:hover {
    background: #e0e0e0;
    color: #333;
}

.account-menu .copy-btn:active {
    background: #d0d0d0;
}

.account-menu .menu-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
}

.account-menu .menu-icon i {
    font-size: 18px;
    color: #fff !important;
}

.account-menu .menu-text {
    flex: 1;
}

.account-menu .menu-label {
    font-size: 15px;
    font-weight: 500;
    color: #333 !important;
}

.account-menu .menu-desc {
    font-size: 12px;
    color: #888 !important;
    margin-top: 2px;
}

.account-menu .fa-chevron-right {
    color: #ccc !important;
    font-size: 14px;
}

/* 退出登录按钮 */
.logout-btn {
    width: 100%;
    padding: 16px;
    background: #fff;
    color: #ff3b30 !important;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.logout-btn:hover {
    background: #fff5f5;
}

/* ==========================================
   VIP 充值卡片 — 奶油暖金
   ========================================== */
@keyframes vip-glow {
    0% { left: -80%; }
    100% { left: 180%; }
}

.vip-card {
    position: relative;
    border-radius: 16px;
    background: linear-gradient(135deg, #FFF6E9 0%, #FFECD2 40%, #FFE0B2 100%);
    cursor: pointer;
    overflow: hidden;
    margin-bottom: 14px;
    transition: transform 0.2s;
    box-shadow: 0 4px 16px rgba(210, 160, 80, 0.18);
    border: 1px solid rgba(210, 170, 100, 0.2);
}

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

.vip-card-glow {
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: vip-glow 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.vip-card-content {
    position: relative;
    z-index: 2;
    padding: 18px 18px 16px;
}

.vip-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.vip-card-crown {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #D4880F, #B8860B);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
}

.vip-card-label {
    font-size: 12px;
    font-weight: 700;
    color: #A0722A;
    background: rgba(160, 114, 42, 0.1);
    padding: 3px 10px;
    border-radius: 10px;
    letter-spacing: 1px;
}

.vip-card-main {
    margin-bottom: 14px;
}

.vip-card-offer {
    font-size: 20px;
    font-weight: 800;
    color: #5C3D14;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.vip-card-offer em {
    font-style: normal;
    color: #C67B1A;
    font-size: 24px;
}

.vip-card-desc {
    font-size: 12px;
    color: #A08050;
}

.vip-card-bottom {
    display: flex;
    justify-content: flex-end;
}

.vip-card-btn {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #C67B1A, #A0631A);
    padding: 8px 20px;
    border-radius: 20px;
    box-shadow: 0 3px 10px rgba(166, 99, 26, 0.25);
    transition: transform 0.15s;
}

.vip-card-btn:active {
    transform: scale(0.96);
}


/* ==========================================
   充值确认弹窗 — 干净白底 + 暖色点缀
   ========================================== */
.rc-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rc-dialog {
    width: 88%;
    max-width: 330px;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
    animation: rc-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

@keyframes rc-pop {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.rc-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 28px; height: 28px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #999;
    font-size: 12px;
    z-index: 5;
    transition: background 0.2s;
}

.rc-close:active {
    background: rgba(0, 0, 0, 0.1);
}

.rc-body {
    padding: 24px 20px 20px;
}

/* 顶部 hero */
.rc-hero {
    text-align: center;
    margin-bottom: 20px;
}

.rc-hero-icon {
    width: 52px; height: 52px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFECD2, #FFE0B2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #C67B1A;
}

.rc-hero-title {
    font-size: 17px;
    font-weight: 700;
    color: #333;
}

/* 买赠展示 */
.rc-offer-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 14px 8px;
    background: #FAFAF7;
    border-radius: 14px;
}

.rc-offer-item {
    text-align: center;
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff;
    min-width: 58px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.rc-offer-free {
    background: linear-gradient(135deg, #FFF8EE, #FFF2DF);
    border: 1px solid #FFE0B2;
}

.rc-offer-total {
    background: linear-gradient(135deg, #C67B1A, #A0631A);
}

.rc-offer-num {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    color: #333;
}

.rc-offer-free .rc-offer-num {
    color: #C67B1A;
}

.rc-offer-total .rc-offer-num {
    color: #fff;
}

.rc-offer-label {
    font-size: 10px;
    color: #999;
    margin-top: 2px;
    font-weight: 500;
}

.rc-offer-free .rc-offer-label {
    color: #B08030;
}

.rc-offer-total .rc-offer-label {
    color: rgba(255,255,255,0.75);
}

.rc-offer-symbol {
    font-size: 14px;
    font-weight: 700;
    color: #ccc;
    flex-shrink: 0;
}

/* 权益 */
.rc-perks {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 18px;
}

.rc-perk {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #888;
}

.rc-perk i {
    font-size: 12px;
    color: #D4980F;
}

/* 价格 */
.rc-price {
    text-align: center;
    padding: 14px 0;
    margin-bottom: 16px;
    background: #FAFAF7;
    border-radius: 12px;
}

.rc-price-tag {
    font-size: 11px;
    color: #aaa;
    display: block;
    margin-bottom: 4px;
}

.rc-price-amount {
    font-size: 36px;
    font-weight: 900;
    color: #C67B1A;
    line-height: 1;
}

.rc-price-amount small {
    font-size: 16px;
    font-weight: 700;
}

.rc-price-unit {
    display: block;
    font-size: 11px;
    color: #bbb;
    margin-top: 4px;
}

/* 支付方式 */
.rc-pay-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid #eee;
    margin-bottom: 14px;
}

.rc-pay-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #444;
}

/* 支付按钮 */
.rc-pay-btn {
    width: 100%;
    padding: 14px 0;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #C67B1A, #A0631A);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s;
    box-shadow: 0 4px 14px rgba(166, 99, 26, 0.25);
}

.rc-pay-btn:active {
    transform: translateY(1px);
}

.rc-tip {
    text-align: center;
    font-size: 11px;
    color: #bbb;
    margin: 12px 0 0;
}

/* 等待支付确认页 */
.rc-waiting {
    text-align: center;
    padding: 10px 0 6px;
}

.rc-waiting-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFF6E9, #FFECD2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #C67B1A;
}

.rc-waiting-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.rc-waiting-desc {
    font-size: 13px;
    color: #999;
    line-height: 1.6;
    margin-bottom: 24px;
}

.rc-confirm-btn {
    width: 100%;
    padding: 14px 0;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #C67B1A, #A0631A);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 4px 14px rgba(166, 99, 26, 0.25);
    transition: transform 0.15s;
    margin-bottom: 10px;
}

.rc-confirm-btn:active {
    transform: translateY(1px);
}

.rc-confirm-btn:disabled {
    opacity: 0.7;
}

.rc-cancel-btn {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #aaa;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
}

.rc-cancel-btn:active {
    color: #888;
}

/* 登录弹窗 */
.login-modal {
    background: #fff;
    border-radius: 20px;
    width: 90%;
    max-width: 340px;
    overflow: hidden;
}

.login-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.login-modal .modal-header h2 {
    font-size: 18px;
    font-weight: 600;
}

.login-modal .modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-modal .modal-body {
    padding: 20px;
}

.login-modal .form-group {
    margin-bottom: 16px;
}

.login-modal .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #333 !important;
}

.login-modal .form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    transition: border-color 0.3s;
}

.login-modal .form-group input:focus {
    outline: none;
    border-color: #11998e;
}

.login-modal .modal-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px 20px;
}

.login-modal .btn-cancel,
.login-modal .btn-confirm {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.login-modal .btn-cancel {
    background: #f5f5f5;
    color: #666 !important;
}

.login-modal .btn-confirm {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff !important;
}

.login-modal .btn-confirm:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========== 公告页面样式 ========== */

/* 公告页面 - 深色文字 */
.announcement-screen {
    background: #f5f5f7 !important;
}

.announcement-screen,
.announcement-screen * {
    color: #333 !important;
}

.announcement-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f5f5f7;
    display: flex;
    flex-direction: column;
}

.announcement-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    padding-top: calc(16px + var(--safe-area-top, 0px));
    background: #fff;
    border-bottom: 1px solid #eee;
}

.announcement-back-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.announcement-title {
    font-size: 18px;
    font-weight: 600;
}

.announcement-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 40px;
}

/* 快捷入口区 */
.quick-entry-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.quick-entry-card {
    background: #fff;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.quick-entry-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

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

.entry-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.entry-icon i {
    font-size: 22px;
    color: #fff !important;
}

.entry-info {
    flex: 1;
}

.entry-title {
    font-size: 17px;
    font-weight: 600;
    color: #333 !important;
    margin-bottom: 4px;
}

.entry-desc {
    font-size: 13px;
    color: #888 !important;
}

.entry-arrow {
    color: #ccc !important;
    font-size: 14px;
}

/* 更新公告区 */
.announcements-section {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.announcements-section .section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 16px;
    font-weight: 600;
}

.announcements-section .section-header i {
    color: #f5576c !important;
}

.announcements-list {
    padding: 0;
}

.announcement-item {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
}

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

.announcement-item:hover {
    background: #f9f9f9;
}

.announcement-item.expanded {
    background: #fafafa;
}

.announcement-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.announcement-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.new-badge {
    display: inline-block;
    padding: 2px 8px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff !important;
    font-size: 10px;
    font-weight: 600;
    border-radius: 10px;
}

.announcement-date {
    font-size: 12px;
    color: #999 !important;
}

.announcement-header-row .fa-chevron-down,
.announcement-header-row .fa-chevron-up {
    font-size: 12px;
    color: #ccc !important;
}

.announcement-item-title {
    font-size: 15px;
    font-weight: 500;
    color: #333 !important;
    line-height: 1.4;
}

.announcement-item-content {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #eee;
    font-size: 14px;
    color: #666 !important;
    line-height: 1.6;
}

/* QQ群弹窗 */
.qq-group-modal {
    background: #fff;
    border-radius: 20px;
    width: 85%;
    max-width: 320px;
    overflow: hidden;
    text-align: center;
}

.qq-modal-header {
    padding: 30px 20px 16px;
    background: linear-gradient(135deg, #12b7f5 0%, #0099ff 100%);
}

.qq-modal-header .qq-icon {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.qq-modal-header .qq-icon i {
    font-size: 28px;
    color: #fff !important;
}

.qq-modal-header h3 {
    color: #fff !important;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.qq-modal-body {
    padding: 24px 20px;
}

.qq-modal-body .group-number {
    font-size: 32px;
    font-weight: 700;
    color: #333 !important;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.qq-modal-body .group-hint {
    font-size: 13px;
    color: #888 !important;
    margin: 0;
}

.qq-modal-footer {
    display: flex;
    gap: 12px;
    padding: 0 20px 20px;
}

.qq-modal-footer .btn-copy,
.qq-modal-footer .btn-close {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.qq-modal-footer .btn-copy {
    background: linear-gradient(135deg, #12b7f5 0%, #0099ff 100%);
    color: #fff !important;
}

.qq-modal-footer .btn-copy:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(18, 183, 245, 0.4);
}

.qq-modal-footer .btn-close {
    background: #f5f5f5;
    color: #666 !important;
}

.qq-modal-footer .btn-close:hover {
    background: #eee;
}

/* ========== 天气页面 ========== */
.weather-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: white;
    overflow-y: auto;
}

.weather-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    padding-top: calc(16px + var(--safe-area-top, 0px));
}

.weather-back-btn,
.weather-refresh-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.weather-back-btn:hover,
.weather-refresh-btn:hover {
    background: rgba(255,255,255,0.3);
}

.weather-title {
    font-size: 18px;
    font-weight: 600;
}

.weather-main {
    text-align: center;
    padding: 30px 20px 40px;
}

.weather-city {
    font-size: 28px;
    font-weight: 300;
    margin-bottom: 10px;
}

.weather-temp-big {
    font-size: 96px;
    font-weight: 100;
    line-height: 1;
}

.weather-condition {
    font-size: 22px;
    opacity: 0.9;
    margin-top: 10px;
}

.weather-temp-range {
    font-size: 16px;
    opacity: 0.8;
    margin-top: 8px;
}

.weather-cards-container {
    flex: 1;
    padding: 0 16px 30px;
}

.weather-card {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.1);
}

.weather-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.hourly-forecast {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.hourly-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 50px;
}

.hourly-time {
    font-size: 13px;
    opacity: 0.8;
}

.hourly-icon {
    font-size: 22px;
}

.hourly-temp {
    font-size: 16px;
    font-weight: 500;
}

.weekly-forecast {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.weekly-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.weekly-day {
    width: 50px;
    font-size: 15px;
}

.weekly-icons {
    display: flex;
    gap: 8px;
    font-size: 18px;
}

.weekly-icons .night-icon {
    opacity: 0.6;
}

.weekly-temps {
    display: flex;
    align-items: center;
    gap: 8px;
}

.temp-high {
    font-size: 15px;
    width: 30px;
    text-align: right;
}

.temp-low {
    font-size: 15px;
    opacity: 0.6;
    width: 30px;
}

.temp-bar {
    width: 80px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    overflow: hidden;
}

.temp-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd54f 0%, #ff8a65 100%);
    border-radius: 2px;
}

.weather-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.detail-item i {
    font-size: 18px;
    opacity: 0.7;
}

.detail-label {
    font-size: 13px;
    opacity: 0.7;
}

.detail-value {
    font-size: 18px;
    font-weight: 500;
}

/* 天气加载和错误状态 */
.weather-loading,
.weather-error {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    padding: 40px;
}

.weather-loading i,
.weather-error i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.8;
}

.weather-loading p,
.weather-error p {
    font-size: 16px;
    opacity: 0.9;
    margin: 0;
}

.weather-error button {
    margin-top: 20px;
    padding: 12px 30px;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 15px;
    cursor: pointer;
}

/* 城市选择弹窗 */
.city-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: flex-end;
    z-index: 1000;
}

.city-picker-modal {
    width: 100%;
    max-height: 70%;
    background: white;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

.city-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.city-picker-header h3 {
    font-size: 17px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.city-picker-header button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f5f5f5;
    border: none;
    color: #666;
    cursor: pointer;
}

.city-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.city-search i {
    color: #999;
}

.city-search input {
    flex: 1;
    border: none;
    font-size: 15px;
    outline: none;
}

.city-list {
    flex: 1;
    overflow-y: auto;
    padding-bottom: var(--safe-area-bottom, 20px);
}

.city-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: background 0.2s;
}

.city-item:hover {
    background: #fafafa;
}

.city-item.active {
    background: #e8f5e9;
}

.city-item span {
    font-size: 16px;
    color: #333;
}

.city-item i {
    color: #4caf50;
}

/* ========== 备忘录页面 ========== */
.notes-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #ffecd2 0%, #fcb69f 100%);
}

.notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    padding-top: calc(16px + var(--safe-area-top, 0px));
}

.notes-back-btn,
.notes-add-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: none;
    color: #5d4037;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.notes-back-btn:hover,
.notes-add-btn:hover {
    background: rgba(255,255,255,0.7);
}

.notes-title {
    font-size: 20px;
    font-weight: 600;
    color: #5d4037;
}

.notes-search {
    margin: 0 16px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.6);
    border-radius: 12px;
    color: #5d4037;
}

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

.notes-search input::placeholder {
    color: #8d6e63;
}

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

.notes-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: #8d6e63;
}

.notes-empty i {
    font-size: 60px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.notes-empty p {
    font-size: 16px;
    margin-bottom: 20px;
}

.notes-empty button {
    padding: 12px 24px;
    background: #5d4037;
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 15px;
    cursor: pointer;
}

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

.note-card {
    background: white;
    border-radius: 12px;
    padding: 14px;
    border-left: 4px solid;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.note-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}

.note-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.note-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-delete-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
}

.note-card:hover .note-delete-btn {
    opacity: 1;
}

.note-delete-btn:hover {
    background: #fee;
    color: #e74c3c;
}

.note-card-content {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.note-card-footer {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}

.note-card-date {
    font-size: 12px;
    color: #999;
}

/* 备忘录编辑器 */
.notes-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    margin: 0 16px 30px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.editor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
}

.editor-toolbar button {
    padding: 8px 16px;
    border: none;
    background: transparent;
    font-size: 15px;
    cursor: pointer;
}

.editor-cancel {
    color: #666;
}

.editor-save {
    color: #4facfe;
    font-weight: 600;
}

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

.editor-color-picker {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.editor-color-picker .color-option {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.editor-color-picker .color-option.active {
    border-color: #333;
    transform: scale(1.1);
}

.editor-color-picker .color-option i {
    font-size: 12px;
    color: #333;
}

.editor-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.editor-title-input {
    border: none;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    background: transparent;
    margin-bottom: 12px;
    outline: none;
}

.editor-textarea {
    flex: 1;
    border: none;
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    background: transparent;
    resize: none;
    outline: none;
    min-height: 200px;
}

/* ========== 日历页面 ========== */
.calendar-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    padding-top: calc(16px + var(--safe-area-top, 0px));
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.calendar-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

.calendar-title {
    font-size: 20px;
    font-weight: 600;
}

.calendar-today-btn {
    padding: 8px 16px;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 14px;
    cursor: pointer;
}

.calendar-month-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.calendar-month-nav button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
}

.month-name {
    font-size: 18px;
    font-weight: 500;
}

.calendar-grid-container {
    padding: 16px;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 8px;
}

.weekday-cell {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    padding: 8px 0;
}

.weekday-cell.weekend {
    color: #e74c3c;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.day-cell {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.day-cell:hover {
    background: #f5f5f5;
}

.day-cell.other-month .day-number {
    color: #ccc;
}

.day-cell.today {
    background: #667eea;
}

.day-cell.today .day-number {
    color: white;
}

.day-cell.selected {
    background: #e8e0ff;
}

.day-cell.selected.today {
    background: #667eea;
}

.day-number {
    font-size: 15px;
    color: #333;
}

.event-dots {
    display: flex;
    gap: 3px;
    position: absolute;
    bottom: 6px;
}

.event-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.calendar-events {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: #f8f9fa;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    margin-top: -20px;
    overflow-y: auto;
}

.events-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.events-date {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.add-event-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #667eea;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.add-event-btn:hover {
    transform: scale(1.1);
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.event-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: white;
    border-radius: 12px;
    border-left: 4px solid;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.event-item:hover {
    transform: translateX(4px);
}

.event-time {
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
    min-width: 50px;
}

.event-title {
    flex: 1;
    font-size: 15px;
    color: #333;
}

.event-delete {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #999;
    font-size: 13px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
}

.event-item:hover .event-delete {
    opacity: 1;
}

.event-delete:hover {
    background: #fee;
    color: #e74c3c;
}

.events-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
}

.events-empty i {
    font-size: 50px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.events-empty p {
    font-size: 15px;
}

/* 事件编辑器弹窗 */
.event-editor-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: flex-end;
    z-index: 1000;
}

.event-editor {
    width: 100%;
    background: white;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding-bottom: var(--safe-area-bottom, 20px);
    animation: slideUp 0.3s ease;
}

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

.event-editor .editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.event-editor .editor-header button {
    padding: 8px 16px;
    background: transparent;
    border: none;
    font-size: 15px;
    cursor: pointer;
    color: #666;
}

.event-editor .editor-header .save-btn {
    color: #667eea;
    font-weight: 600;
}

.event-editor .editor-header span {
    font-size: 17px;
    font-weight: 600;
    color: #333;
}

.editor-form {
    padding: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="time"] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s;
}

.form-group input:focus {
    border-color: #667eea;
}

.color-options {
    display: flex;
    gap: 12px;
}

.color-options .color-option {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.color-options .color-option.active {
    border-color: #333;
    transform: scale(1.1);
}

.color-options .color-option i {
    font-size: 14px;
    color: white;
}

/* ========== 设置页面（现代风格） ========== */
.settings-screen-full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f5f5f7;
}

.settings-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    padding-top: calc(16px + var(--safe-area-top, 0px));
    background: white;
    border-bottom: 1px solid #e5e5e5;
}

.settings-header-modern h1 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.settings-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0f0f0;
    border: none;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.settings-back-btn:hover {
    background: #e0e0e0;
}

.settings-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: 40px;
}

.settings-section-modern {
    margin-bottom: 24px;
}

.settings-section-modern .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin-bottom: 12px;
    padding-left: 4px;
}

.settings-section-modern .section-title i {
    font-size: 14px;
}

.section-items {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.setting-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #f5f5f5;
}

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

.setting-item:hover {
    background: #fafafa;
}

.setting-item:active {
    background: #f0f0f0;
}

.setting-item .item-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
}

.setting-item .item-icon i {
    font-size: 18px;
    color: white;
}

.setting-item .item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.setting-item .item-title {
    font-size: 16px;
    color: #333;
}

.setting-item .item-subtitle {
    font-size: 13px;
    color: #999;
}

.setting-item .item-arrow {
    color: #ccc;
    font-size: 14px;
}

/* 设置弹窗 */
.settings-modal {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 360px;
    overflow: hidden;
    animation: modalPop 0.3s ease;
}

@keyframes modalPop {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.modal-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.modal-header-modern h3 {
    font-size: 17px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.modal-header-modern button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f5f5f5;
    border: none;
    color: #666;
    cursor: pointer;
}

.modal-body-modern {
    padding: 20px;
}

.modal-body-modern .form-group {
    margin-bottom: 16px;
}

.modal-body-modern .form-group:last-child {
    margin-bottom: 0;
}

.modal-body-modern label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.modal-body-modern input[type="text"],
.modal-body-modern input[type="password"] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s;
    text-align: center;
    letter-spacing: 6px;
}

.modal-body-modern input:focus {
    border-color: #667eea;
}

.modal-footer-modern {
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-footer-modern .btn-save {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.modal-footer-modern .btn-danger {
    width: 100%;
    padding: 14px;
    background: #f44336;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.select-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: background 0.2s;
}

.select-option:last-child {
    border-bottom: none;
}

.select-option:hover {
    background: #fafafa;
}

.select-option.active {
    background: #e8f5e9;
}

.select-option i {
    color: #4caf50;
}

/* 壁纸选择弹窗 */
.wallpaper-modal {
    max-width: 400px;
}

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

.wallpaper-item {
    aspect-ratio: 9/16;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 3px solid transparent;
    transition: all 0.2s;
}

.wallpaper-item:hover {
    transform: scale(1.05);
}

.wallpaper-item.active {
    border-color: #667eea;
}

.wallpaper-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 4px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
    font-size: 10px;
    text-align: center;
}

.wallpaper-check {
    position: absolute;
    top: 6px;
    right: 6px;
    color: #4caf50;
    font-size: 18px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.wallpaper-custom {
    border-top: 1px solid #f0f0f0;
    padding-top: 16px;
}

.custom-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.custom-options {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.custom-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: #f5f5f5;
    border: none;
    border-radius: 10px;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.custom-btn:hover {
    background: #e8e8e8;
}

.custom-url {
    display: flex;
    gap: 8px;
}

.custom-url input {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
}

.custom-url input:focus {
    border-color: #667eea;
}

.custom-url button {
    padding: 12px 20px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
}

/* 关于弹窗 */
.about-modal {
    max-width: 320px;
}

.about-content {
    padding: 40px 30px;
    text-align: center;
}

.about-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.about-icon i {
    font-size: 36px;
    color: white;
}

.about-content h2 {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px;
}

.about-content .version {
    font-size: 14px;
    color: #999;
    margin: 0 0 16px;
}

.about-content .desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 24px;
}

.about-content .btn-close {
    padding: 12px 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 15px;
    cursor: pointer;
}

/* ========== 主屏幕（聊天列表）对齐原版 ========== */
.main-screen {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--background-gray);
}

/* 主页面头部 */
.app-header {
    background-color: rgba(220, 237, 200, 0.7);
    backdrop-filter: blur(12px);
    color: var(--text-dark);
    padding: 10px 15px;
    padding-top: calc(10px + var(--safe-area-top));
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    flex-shrink: 0;
    position: relative;
}

.app-header .app-title {
    font-size: 20px;
    font-weight: 700;
}

.app-header .header-actions {
    display: flex;
    align-items: center;
}

.app-header .action-btn {
    cursor: pointer;
    font-size: 18px;
    color: var(--text-dark);
    padding: 5px;
    transition: color 0.2s;
}

.app-header .action-btn:hover {
    color: var(--theme-primary);
}

/* 联系人容器 */
.contacts-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px 0;
    padding-bottom: 70px; /* 为底部TabBar留出空间 */
}

/* 分组标题 */
.section-title {
    padding: 10px 15px;
    font-size: 14px;
    color: var(--text-gray);
    background-color: transparent;
    font-weight: 600;
}

/* 【对齐 downloaded_site】可折叠的分组标题 */
.section-title.collapsible-title {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.section-title.collapsible-title:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.section-title .collapse-icon {
    transition: transform 0.2s ease-in-out;
    font-size: 12px;
    color: #999;
}

.section-title.collapsed .collapse-icon {
    transform: rotate(-90deg);
}

/* 联系人项（对齐原版） */
.contact-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 0 8px 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
}

.contact-item:hover {
    background-color: rgba(255, 255, 255, 0.7);
}

.contact-item.pinned {
    background-color: rgba(255, 243, 224, 0.5);
}

/* 联系人头像 */
.contact-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ddd;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-gray);
    overflow: hidden;
    flex-shrink: 0;
}

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

/* 联系人信息 */
.contact-info {
    flex-grow: 1;
    min-width: 0;
}

.contact-name {
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
}

.contact-last-message {
    font-size: 14px;
    color: var(--text-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 联系人元信息（时间、未读） */
.contact-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 10px;
    flex-shrink: 0;
}

.contact-time {
    font-size: 12px;
    color: var(--text-gray);
    margin-bottom: 4px;
}

.contact-badge {
    background-color: #f44336;
    color: white;
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* 联系人更多按钮（对齐 downloaded_site） */
.contact-options-btn {
    color: #b0b0b0;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 16px;
    margin-right: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-options-btn:hover {
    color: var(--theme-primary);
}

/* 联系人右键菜单（对齐 downloaded_site） */
.contact-item-menu {
    background-color: rgba(248, 249, 250, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
    width: 200px;
}

.contact-item-menu .menu-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-dark);
    transition: background-color 0.2s;
}

.contact-item-menu .menu-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.contact-item-menu .menu-item i {
    margin-right: 12px;
    color: var(--text-gray);
    width: 16px;
    text-align: center;
}

/* ========== 聊天界面（对齐原版） ========== */
.chat-screen {
    background-image: url('../assets/聊天背景.png');
    background-size: cover;
    background-position: center;
}

/* 聊天头部 */
.chat-header {
    background-color: rgba(200, 175, 145, 0.85);
    backdrop-filter: blur(12px);
    color: white;
    padding: 8px 15px;
    padding-top: calc(8px + var(--safe-area-top));
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    flex-shrink: 0;
}

.chat-header .back-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.chat-header .back-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.chat-header .chat-info {
    flex: 1;
    text-align: center;
    cursor: pointer;
}

.chat-header .chat-name {
    font-weight: 700;
    font-size: 18px;
}

.chat-header .chat-status {
    font-size: 13px;
    opacity: 0.8;
}

.chat-header .chat-header-actions {
    display: flex;
    gap: 15px;
}

.chat-header .action-btn {
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.chat-header .action-btn:hover {
    opacity: 1;
}

/* 更多菜单 */
.chat-options-menu {
    position: absolute;
    top: 60px;
    right: 15px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 100;
    overflow: hidden;
    min-width: 180px;
}

.chat-option-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    color: #333;
    font-size: 14px;
}

.chat-option-item:hover {
    background-color: #f5f5f5;
}

.chat-option-item i {
    margin-right: 12px;
    color: #666;
    width: 20px;
    text-align: center;
}

.chat-option-divider {
    height: 1px;
    background-color: #eee;
    margin: 5px 0;
}

/* 心声面板 */
.heart-voice-panel {
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.9), rgba(255, 218, 185, 0.9));
    backdrop-filter: blur(10px);
    padding: 12px 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.hv-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #333;
}

.hv-icon {
    font-size: 16px;
}

.hv-label {
    font-weight: 500;
    color: #666;
}

.hv-value {
    flex: 1;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 聊天宠物 */
.chat-pet-container {
    position: absolute;
    bottom: 80px;
    right: 15px;
    text-align: center;
    cursor: pointer;
    z-index: 50;
    animation: pet-float 3s ease-in-out infinite;
}

@keyframes pet-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.pet-avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ffecd2, #fcb69f);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.pet-avatar:hover {
    transform: scale(1.1);
}

.pet-avatar.happy { background: linear-gradient(135deg, #ffecd2, #fcb69f); }
.pet-avatar.sleepy { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }
.pet-avatar.excited { background: linear-gradient(135deg, #f093fb, #f5576c); }
.pet-avatar.curious { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.pet-avatar.hungry { background: linear-gradient(135deg, #fa709a, #fee140); }

.pet-status {
    margin-top: 5px;
    font-size: 11px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2px 8px;
    border-radius: 10px;
}

/* 消息列表 */
.chat-messages {
    flex-grow: 1;
    padding: 8px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* 【对齐 downloaded_site】叙事模式样式 */
.chat-messages.narrative-mode-active .message-wrapper {
    max-width: 95%; /* 叙事模式下气泡加宽 */
}

/* 叙事模式文本美化（对齐 downloaded_site） */
.narrative-speech {
    background-color: #e6f5c9;
    padding: 2px 8px;
    border-radius: 8px;
    display: inline-block;
    margin: 1px 0;
}

.narrative-psychology {
    background-color: #e6f5c9;
    color: #66bb6a;
    padding: 2px 6px;
    border-radius: 6px;
}

.narrative-action {
    color: #517655;
    font-style: italic; /* 用斜体增强与对话的区分 */
}

/* 消息气泡动画 */
@keyframes bubble-fade-in {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 消息包装 */
.message-wrapper {
    display: flex;
    max-width: 90%;
    margin-bottom: 1px;
    position: relative;
    animation: bubble-fade-in 0.35s ease-out;
}

.message-wrapper.received {
    align-self: flex-start;
    flex-direction: row;
}

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

/* 头像 */
.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
    visibility: hidden;
}

.message-wrapper.is-first-in-sequence .message-avatar {
    visibility: visible;
    margin-top: 10px;
}

.message-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
}

/* 消息体 */
.message-body {
    display: flex;
    flex-direction: column;
    margin: 0 10px;
}

.message-wrapper.sent .message-body {
    align-items: flex-end;
}

.message-wrapper.received .message-body {
    align-items: flex-start;
}

/* 发送者名字 */
.message-author-name {
    font-size: 13px;
    color: #888;
    margin-bottom: 4px;
    display: none;
}

.message-wrapper.is-first-in-sequence .message-author-name {
    display: block;
    margin-top: 10px;
}

/* 消息气泡 */
.message {
    padding: 6px 10px;
    border-radius: 22px;
    position: relative;
    word-wrap: break-word;
    min-width: 50px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    white-space: pre-wrap;
    background-color: white;
    color: #333;
}

.message.sent {
    background-color: var(--sent-message-bg);
    color: #333;
}

/* 消息时间戳 */
.message-timestamp {
    font-size: 11px;
    color: #aaa;
    margin-top: 4px;
    padding: 0 5px;
}

/* 消息选中状态 */
.message-wrapper.selected .message {
    background-color: #bde0fe !important;
}

/* 消息高亮动画 */
.message-wrapper.highlighted .message {
    animation: highlight-anim 1.5s ease;
}

@keyframes highlight-anim {
    0% { background-color: #fff3cd; }
    100% { background-color: inherit; }
}

/* 编辑模式选择框 */
.message-checkbox {
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--theme-primary);
}

.message-wrapper.sent .message-checkbox {
    left: auto;
    right: -30px;
}

/* 系统通知消息（对齐原版） */
.message-wrapper.system-wrapper {
    align-self: center;
    max-width: 100%;
    justify-content: center;
    margin: 8px 0;
}

.system-notification {
    background-color: rgba(0, 0, 0, 0.08);
    color: #666;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 12px;
    text-align: center;
}

/* 【对齐 downloaded_site】撤回消息样式 */
.system-notification.recall-ai-placeholder {
    background-color: #e0e0e0;
    color: #888;
    font-style: italic;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s, color 0.2s;
}
.system-notification.recall-ai-placeholder:hover {
    background-color: #d5d5d5;
    color: #555;
}
.system-notification.recall-ai-revealed {
    background-color: #f5f5f5;
    color: #444;
    font-style: normal;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    max-width: 80%;
}
.recall-prefix {
    color: #999;
    margin-right: 4px;
}

/* 引用回复样式 */
.reply-quote {
    background-color: rgba(0, 0, 0, 0.05);
    border-left: 3px solid var(--theme-primary);
    padding: 6px 10px;
    border-radius: 8px;
    margin-bottom: 4px;
    font-size: 12px;
    cursor: pointer;
    max-width: 200px;
}

.reply-quote .reply-sender {
    color: var(--theme-primary);
    font-weight: 500;
}

.reply-quote .reply-content {
    color: #666;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 红包消息样式（完全对齐 downloaded_site） */
.message.red-packet {
    background: linear-gradient(135deg, #fa5252, #e53935);
    color: white;
    display: flex;
    flex-direction: column;
    width: 240px;
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.2s;
}

.message.red-packet:hover {
    transform: scale(1.02);
}

.message.red-packet.opened {
    background: linear-gradient(135deg, #b0b0b0, #9e9e9e);
}

.red-packet-header {
    display: flex;
    align-items: center;
    padding: 15px;
    gap: 12px;
}

.red-packet-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.red-packet-blessing {
    font-size: 14px;
    flex: 1;
    word-break: break-word;
}

.red-packet-status {
    font-size: 13px;
    opacity: 0.9;
    flex: 1;
}

.red-packet-footer {
    background: rgba(0, 0, 0, 0.15);
    padding: 8px 15px;
    font-size: 12px;
    opacity: 0.9;
}

/* 【对齐 downloaded_site】红包开启弹窗样式 */
.red-packet-open-modal {
    background-color: #DB5A48;
    width: 85%;
    max-width: 300px;
    border-radius: 10px;
    text-align: center;
    color: #FADFC6;
    position: relative;
    padding-bottom: 30px;
}

.red-packet-close {
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 24px;
    color: #FADFC6;
    cursor: pointer;
}

.red-packet-open-content {
    padding: 40px 0 20px;
}

.red-packet-sender-avatar {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.red-packet-sender-name {
    font-size: 16px;
}

.red-packet-blessing-text {
    font-size: 22px;
    margin-top: 15px;
    font-weight: bold;
    padding: 0 20px;
}

.red-packet-open-btn {
    background-color: #FADDC4;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #C35645;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    transform: rotate(0deg);
    transition: transform 0.5s ease;
}

.red-packet-open-btn:hover {
    transform: scale(1.05);
}

.red-packet-open-btn.opening {
    transform: rotate(720deg);
    pointer-events: none;
}

.red-packet-result {
    padding-top: 20px;
}

.red-packet-amount-text {
    font-size: 40px;
    font-weight: bold;
    color: white;
}

.red-packet-collected-by {
    font-size: 14px;
    margin-top: 10px;
}

.view-red-packet-details {
    font-size: 12px;
    color: #FADFC4;
    text-decoration: none;
    margin-top: 15px;
    display: inline-block;
}

.view-red-packet-details:hover {
    text-decoration: underline;
}

/* 红包详情弹窗领取人列表样式 */
.red-packet-claimer-list {
    padding: 10px 0;
}

.claimer-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
}

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

.claimer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    margin-right: 12px;
}

.claimer-info {
    flex: 1;
}

.claimer-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.claim-time {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

.claim-amount {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.best-luck-badge {
    display: inline-block;
    background: #ff9800;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
}

/* 转账消息样式（对齐 downloaded_site） */
.message.transfer {
    background-color: var(--theme-primary, #007bff);
    color: white;
    width: 240px;
    padding: 0;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
}

.message.transfer.sent {
    border-top-right-radius: 0;
}

.message.transfer:not(.sent) {
    border-top-left-radius: 0;
}

/* 已收款状态 */
.message.transfer.completed {
    background-color: #C8E6C9;
}

.message.transfer.completed .transfer-info .transfer-text,
.message.transfer.completed .transfer-info .transfer-amount {
    color: #388E3C;
}

.message.transfer.completed .transfer-icon i {
    color: #388E3C;
}

.message.transfer.completed::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #388E3C;
}

/* 已退还状态 */
.message.transfer.returned {
    background-color: #bdc3c7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.message.transfer.returned .transfer-info .transfer-text,
.message.transfer.returned .transfer-info .transfer-amount,
.message.transfer.returned .transfer-footer {
    color: #6c757d;
    text-decoration: line-through;
}

.message.transfer.returned .transfer-icon i {
    color: #6c757d;
}

.message.transfer.returned::after {
    content: '\f0e2';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #6c757d;
}

/* 转账头部 */
.message.transfer .transfer-header {
    padding: 10px 15px;
    display: flex;
    align-items: center;
}

.message.transfer .transfer-icon {
    font-size: 24px;
    margin-right: 10px;
}

.message.transfer .transfer-info .transfer-text {
    font-size: 15px;
    font-weight: 500;
}

.message.transfer .transfer-info .transfer-amount {
    font-size: 18px;
    font-weight: bold;
}

/* 转账底部 */
.message.transfer .transfer-footer {
    background-color: transparent;
    color: white;
    font-size: 12px;
    padding: 5px 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    opacity: 0.9;
}

.message.transfer.completed .transfer-footer {
    color: #388E3C;
    border-top: 1px solid rgba(102, 187, 106, 0.2);
}

.message.transfer.returned .transfer-footer {
    border-top: 1px solid rgba(108, 117, 125, 0.2);
}

/* 表情选择器（类似微信）*/
.emoticon-picker {
    background-color: #f7f7f7;
    border-top: 1px solid #e0e0e0;
    height: 240px;
    overflow-y: auto;
    padding: 12px;
    flex-shrink: 0; /* 防止被压缩 */
}

.emoticon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.emoticon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background-color: white;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    min-height: 80px;
}

.emoticon-item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-bottom: 4px;
}

.emoticon-item .emoticon-emoji {
    font-size: 36px;
    margin-bottom: 4px;
}

.emoticon-item .emoticon-name {
    font-size: 11px;
    color: #999;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 添加表情按钮 */
.emoticon-item.add-emoticon-btn {
    background: linear-gradient(135deg, #81c784, #66bb6a);
    color: white;
}

.emoticon-item.add-emoticon-btn i {
    font-size: 28px;
    margin-bottom: 4px;
}

.emoticon-item.add-emoticon-btn .emoticon-name {
    color: white;
}

.emoticon-item.add-emoticon-btn:hover {
    background: linear-gradient(135deg, #66bb6a, #4caf50);
    transform: scale(1.05);
}

/* 空状态提示 */
.emoticon-empty-hint {
    grid-column: span 4;
    text-align: center;
    padding: 24px;
    color: #999;
    font-size: 13px;
}

.emoticon-item:hover {
    transform: scale(1.1);
}

/* 附件菜单（对齐 downloaded_site） */
.attachment-menu {
    background-color: white;
    border-top: 1px solid #eee;
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

/* 旧版兼容 */
.attachment-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.attachment-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #666;
    transition: transform 0.2s;
}

.attachment-item:hover .attachment-icon {
    transform: scale(1.05);
}

.attachment-label {
    font-size: 12px;
    color: #666;
}

/* 新版附件菜单项（对齐 downloaded_site） */
.attachment-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.attachment-menu-item:hover {
    background-color: #f5f5f5;
}

.attachment-menu-item .icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background-color: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--theme-primary);
    transition: transform 0.2s;
}

.attachment-menu-item:hover .icon-wrapper {
    transform: scale(1.05);
}

.attachment-menu-item .label {
    font-size: 12px;
    color: var(--text-gray);
    text-align: center;
}

/* 回复预览栏 */
.reply-preview-bar {
    background-color: #f5f5f5;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #ddd;
}

.reply-preview-content {
    flex: 1;
    font-size: 13px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reply-preview-content .sender {
    color: var(--theme-primary);
    font-weight: 500;
}

.reply-cancel {
    padding: 5px;
    cursor: pointer;
    color: #999;
}

/* 输入区域（对齐原版） */
.chat-input-area {
    background-color: #f8f9fa;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--border-color);
    gap: 8px;
}

.chat-input-area .emoji-btn {
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 5px;
}

.chat-input-area .attachment-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--theme-primary);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
}

.chat-input-area textarea {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 8px 15px;
    font-size: 14px;
    resize: none;
    outline: none;
    max-height: 100px;
    background-color: white;
}

.chat-input-area .input-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s, opacity 0.2s;
}

#send-btn {
    background-color: var(--theme-primary);
    color: white;
}

#send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#request-reply-btn {
    background-color: #ff6b6b;
    color: white;
}

#request-reply-btn:disabled {
    opacity: 0.5;
}

/* 编辑模式工具栏 */
.edit-mode-bar {
    background-color: white;
    padding: 10px 15px;
    display: flex;
    gap: 10px;
    border-top: 1px solid #eee;
}

.edit-action-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    background-color: #f5f5f5;
    color: #333;
    transition: background-color 0.2s;
}

.edit-action-btn:hover {
    background-color: #eee;
}

#delete-selected-btn {
    background-color: #ffebee;
    color: #d32f2f;
}

/* 聊天搜索覆盖层 */
.chat-search-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    z-index: 200;
    display: flex;
    flex-direction: column;
}

.search-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    padding-top: calc(10px + var(--safe-area-top));
    border-bottom: 1px solid #eee;
    gap: 10px;
}

.search-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 20px;
    padding: 8px 15px;
}

.search-input-wrapper .search-icon {
    color: #999;
    margin-right: 8px;
}

.search-input-wrapper input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 14px;
}

.search-input-wrapper .clear-btn {
    color: #999;
    cursor: pointer;
}

.search-cancel-btn {
    background: none;
    border: none;
    color: var(--theme-primary);
    font-size: 14px;
    cursor: pointer;
}

.search-results {
    flex: 1;
    overflow-y: auto;
}

.search-empty,
.search-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #999;
}

.search-empty i,
.search-placeholder i {
    font-size: 48px;
    margin-bottom: 15px;
}

.search-result-item {
    padding: 12px 15px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
}

.search-result-item:hover {
    background-color: #f9f9f9;
}

.result-sender {
    font-size: 13px;
    color: var(--theme-primary);
    margin-bottom: 4px;
}

.result-content {
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-time {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

/* ========== 个人资料页（现代化重设计 + 主题兼容） ========== */
#profile-screen,
.profile-screen,
.profile-screen-modern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-gray, #f8f9fa);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 现代化头部区域 */
.profile-hero {
    position: relative;
    padding: 40px 20px 30px;
    text-align: center;
    flex-shrink: 0;
}

.profile-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(135deg, var(--sent-message-bg, #e6f5c9), #dcedc8);
    background-size: cover;
    background-position: center;
    opacity: 1;
}

/* 当作为 profile-header 被主题CSS覆盖时，确保不被旧版padding影响 */
.profile-hero-bg.profile-header {
    padding: 0;
    text-align: unset;
    flex-shrink: unset;
}

.profile-hero-content {
    position: relative;
    z-index: 1;
}

/* 头像包装器 */
.profile-avatar-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-bottom: 16px;
}

.avatar-glow {
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    background: var(--theme-primary, #4CAF50);
    border-radius: 50%;
    opacity: 0.15;
}

.profile-avatar-img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--card-background, white);
    box-shadow: 0 4px 16px var(--shadow-color, rgba(0,0,0,0.1));
    position: relative;
    z-index: 1;
}

.avatar-camera {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    background: var(--card-background, white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 2;
}

.avatar-camera i {
    font-size: 12px;
    color: var(--theme-primary, #667eea);
}

.profile-hero-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark, #333);
    margin-bottom: 8px;
}

.profile-hero-status {
    display: inline-flex;
    align-items: center;
    background: var(--hover-background, rgba(0,0,0,0.05));
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-gray, #666);
    cursor: pointer;
    transition: all 0.3s;
}

.profile-hero-status:hover {
    background: var(--active-background, rgba(0,0,0,0.08));
}

/* 微信风格头部 */
.profile-hero-wechat {
    padding: 50px 20px 40px;
    text-align: left;
    cursor: pointer;
}

.profile-hero-wechat:active {
    opacity: 0.85;
}

.profile-hero-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-hero-row .profile-avatar-wrapper {
    margin-bottom: 0;
    flex-shrink: 0;
}

.profile-hero-info {
    flex: 1;
    min-width: 0;
}

.profile-hero-info .profile-hero-name {
    margin-bottom: 4px;
    text-align: left;
}

.profile-hero-signature {
    font-size: 13px;
    color: var(--text-gray, #999);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-hero-arrow {
    font-size: 14px;
    color: var(--text-gray, #ccc);
    flex-shrink: 0;
}

/* 个人信息页面 */
.personal-info-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.personal-info-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background-color: var(--background-gray, transparent);
}

.personal-info-card {
    background: var(--card-background, white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px var(--shadow-color, rgba(0,0,0,0.06));
}

.personal-info-card .info-row {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.06));
    cursor: pointer;
    transition: background 0.2s;
}

.personal-info-card .info-row:last-child {
    border-bottom: none;
}

.personal-info-card .info-row:active {
    background: var(--hover-background, rgba(0,0,0,0.03));
}

.personal-info-card .info-label {
    font-size: 15px;
    color: var(--text-dark, #333);
    width: 80px;
    flex-shrink: 0;
}

.personal-info-card .info-value {
    flex: 1;
    text-align: right;
    font-size: 14px;
    color: var(--text-gray, #999);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
}

.personal-info-card .fa-chevron-right {
    font-size: 12px;
    color: var(--text-gray, #ccc);
    flex-shrink: 0;
}

/* 应用功能设置页面 */
.app-feature-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 内容区域 */
.profile-content-modern {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: 90px;
    background-color: var(--background-gray, transparent);
}

/* 卡片样式 - 兼容主题 */
.profile-card {
    background: var(--card-background, white);
    border-radius: var(--soft-radius, 16px);
    margin-bottom: 12px;
    box-shadow: 0 2px 12px var(--shadow-color, rgba(0,0,0,0.06));
    overflow: hidden;
}

.profile-card .card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark, #333);
    border-bottom: 1px solid var(--border-color, #f5f5f5);
}

.profile-card .card-header i {
    color: var(--theme-primary, #667eea);
    font-size: 16px;
}

.profile-card .card-body {
    padding: 0;
}

/* 信息行 - 兼容主题 */
.info-row {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color, #f8f8f8);
    cursor: pointer;
    transition: background 0.2s;
    background: var(--card-background, transparent);
}

.info-row:last-child {
    border-bottom: none;
}

.info-row:hover {
    background: var(--hover-background, #fafafa);
}

.info-row:active {
    background: var(--active-background, #f5f5f5);
}

.info-label {
    width: 80px;
    font-size: 14px;
    color: var(--text-gray, #666);
    flex-shrink: 0;
}

.info-value {
    flex: 1;
    font-size: 14px;
    color: var(--text-dark, #333);
    text-align: right;
    margin-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info-row > i {
    color: var(--text-gray, #ccc);
    font-size: 12px;
}

/* 菜单行 - 兼容主题 */
.menu-row {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color, #f8f8f8);
    cursor: pointer;
    transition: all 0.2s;
    background: var(--card-background, transparent);
}

.menu-row:last-child {
    border-bottom: none;
}

.menu-row:hover {
    background: var(--hover-background, #fafafa);
}

.menu-row:active {
    background: var(--active-background, #f5f5f5);
}

.menu-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex-shrink: 0;
}

.menu-icon i {
    color: white;
    font-size: 18px;
}

.menu-text {
    flex: 1;
}

.menu-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-dark, #333);
    margin-bottom: 2px;
}

.menu-desc {
    font-size: 12px;
    color: var(--text-gray, #999);
}

.menu-row > i {
    color: var(--text-gray, #ccc);
    font-size: 12px;
}

/* 钱包卡片 - 使用普通卡片样式 */
.wallet-card {
    cursor: pointer;
}

.wallet-bg {
    display: none;
}

.wallet-content {
    display: flex;
    align-items: center;
    padding: 16px;
}

.wallet-icon {
    width: 44px;
    height: 44px;
    background: var(--theme-primary, #4CAF50);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
}

.wallet-icon i {
    font-size: 20px;
    color: white;
}

.wallet-info {
    flex: 1;
}

.wallet-label {
    font-size: 13px;
    color: var(--text-gray, #999);
    margin-bottom: 2px;
}

.wallet-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--theme-primary, #E6A23C);
}

.wallet-arrow {
    color: var(--text-gray, #ccc);
    font-size: 12px;
}

/* 危险操作卡片 */
.danger-card {
    background: var(--danger-bg, #fff5f5);
    border: 1px solid var(--danger-border, #ffe0e0);
}

.danger-row:hover {
    background: var(--danger-hover, #ffeeee) !important;
}

/* ========== 旧版个人资料页兼容 ========== */

.profile-header {
    background-image: linear-gradient(135deg, var(--sent-message-bg), #dcedc8);
    padding: 30px 20px 15px;
    text-align: center;
    color: var(--text-dark);
    position: relative;
    flex-shrink: 0;
}

.avatar-container {
    position: relative;
    margin: 0 auto 15px;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.change-avatar-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-gray);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.change-avatar-btn:hover {
    background-color: #f5f5f5;
}

.profile-name {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
}

.profile-status {
    font-size: 16px;
    opacity: 0.9;
}

.profile-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 10px 0;
    background-color: white;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.action-item {
    text-align: center;
    cursor: pointer;
}

.action-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--theme-primary);
    margin: 0 auto 10px;
    transition: all 0.3s;
}

.action-icon:hover {
    background-color: #e0f2f1;
    transform: scale(1.05);
}

.action-label {
    font-size: 14px;
    color: var(--text-gray);
}

.profile-details {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
    padding-bottom: 80px; /* 为底部TabBar留出空间 */
    background-color: #f0f2f5;
}

.detail-item {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: white;
}

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

.detail-label {
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

.detail-value {
    font-size: 16px;
    color: var(--text-gray);
    max-width: 60%;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edit-btn {
    color: var(--theme-primary);
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
}

.edit-btn:hover {
    opacity: 0.8;
}

/* 兼容旧样式 */
.profile-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    padding-bottom: 70px; /* 为底部TabBar留出空间 */
}

.profile-section {
    background-color: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 15px;
}

.profile-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.profile-item:hover {
    background-color: #f5f5f5;
}

.profile-item + .profile-item {
    border-top: 1px solid #f0f0f0;
}

.profile-item-label {
    font-size: 16px;
    color: #333;
}

.profile-item-value {
    font-size: 16px;
    color: var(--text-gray);
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-item-arrow {
    color: #ccc;
}

/* ========== 发现页面 ========== */
.discover-screen {
    background-color: var(--background-gray);
}

.discover-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
    padding-bottom: 70px; /* 为底部TabBar留出空间 */
}

.discover-section {
    background-color: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
}

.discover-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.discover-item:hover {
    background-color: var(--background-gray);
}

.discover-item + .discover-item {
    border-top: 1px solid var(--border-light);
}

.discover-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background-color: var(--background-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--theme-primary);
    margin-right: var(--spacing-md);
}

.discover-info {
    flex: 1;
}

.discover-name {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-dark);
}

.discover-desc {
    font-size: var(--font-size-sm);
    color: var(--text-gray);
    margin-top: 2px;
}

.discover-arrow {
    color: var(--text-light);
}

/* ========== 短信页面 ========== */
.sms-screen {
    background-color: white;
}

.sms-tabs {
    display: flex;
    background-color: white;
    border-bottom: 1px solid var(--border-light);
}

.sms-tab {
    flex: 1;
    padding: var(--spacing-md);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-gray);
    cursor: pointer;
    position: relative;
    transition: all var(--transition-fast);
}

.sms-tab.active {
    color: var(--theme-primary);
    font-weight: 500;
}

.sms-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background-color: var(--theme-primary);
    border-radius: 1px;
}

.sms-tab i {
    margin-right: var(--spacing-xs);
}

/* 短信聊天界面样式（对齐 downloaded_site） */
.sms-row {
    padding: 2px 0;
    cursor: pointer;
}

.sms-row.selected {
    background-color: #e0f2fe;
    border-radius: 8px;
}

.sms-bubble {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    word-wrap: break-word;
    word-break: break-word;
}

.sms-bubble.received {
    background-color: #E5E5EA;
    color: #000000;
}

.sms-bubble.sent {
    background-color: #0B81FF;
    color: #ffffff;
}

/* 短信图片样式 */
.sms-bubble.image-message {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    max-width: 150px;
    overflow: hidden;
}

.sms-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 16px;
}

/* 短信时间戳 */
.sms-timestamp {
    text-align: center;
    color: #999;
    font-size: 12px;
    padding: 10px 0;
}

.sms-timestamp span {
    background-color: rgba(0,0,0,0.05);
    padding: 3px 10px;
    border-radius: 10px;
}

/* 编辑模式样式 */
.sms-edit-mode .sms-row {
    cursor: pointer;
}

.sms-edit-mode #sms-input-area {
    display: none;
}

.sms-edit-mode #sms-edit-mode-bar {
    display: flex !important;
}

/* ========== 联系人详情页 ========== */
.contact-detail-screen {
    background-color: var(--background-gray);
}

.contact-detail-header {
    background-color: white;
    padding: var(--spacing-xl);
    display: flex;
    align-items: center;
}

.contact-detail-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: var(--spacing-lg);
}

.contact-detail-info {
    flex: 1;
}

.contact-detail-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-dark);
}

.contact-detail-signature {
    font-size: var(--font-size-sm);
    color: var(--text-gray);
    margin-top: var(--spacing-xs);
}

/* 资料页展开动画 */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 我和TA 卡片网格 */
.relationship-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.relationship-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    min-height: 120px;
}

.relationship-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.relationship-card:active {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.relationship-card .card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: white;
    font-size: 24px;
}

.relationship-card .card-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-align: center;
}

/* ========== 设置页面通用 ========== */
.settings-screen {
    background-color: var(--background-gray);
}

.settings-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
    padding-bottom: 70px; /* 为底部TabBar留出空间 */
}

.settings-section {
    background-color: white;
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
}

.settings-section-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--theme-primary);
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--background-gray);
}

.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-light);
}

.settings-item:first-child {
    border-top: none;
}

.settings-item-label {
    flex: 1;
}

.settings-item-title {
    font-size: var(--font-size-base);
    color: var(--text-dark);
}

.settings-item-desc {
    font-size: var(--font-size-xs);
    color: var(--text-gray);
    margin-top: var(--spacing-xs);
}

/* ========== 海龟汤游戏 ========== */
.turtle-soup-screen .game-menu { padding: 20px; }
.turtle-soup-screen .menu-header { text-align: center; padding: 40px 20px; }
.turtle-soup-screen .menu-icon { width: 80px; height: 80px; background: linear-gradient(135deg, #e0f7fa, #80deea); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #0097a7; margin: 0 auto 20px; }
.turtle-soup-screen .start-random-btn { width: 100%; padding: 16px; background: linear-gradient(135deg, #0097a7, #00838f); color: white; border: none; border-radius: 12px; font-size: 16px; cursor: pointer; margin-bottom: 24px; }
.turtle-soup-screen .story-item { background: white; padding: 16px; border-radius: 12px; margin-bottom: 12px; cursor: pointer; }
.turtle-soup-screen .story-title { font-weight: 600; margin-bottom: 4px; }
.turtle-soup-screen .story-preview { font-size: 13px; color: #666; margin-bottom: 8px; }
.turtle-soup-screen .game-playing { display: flex; flex-direction: column; height: 100%; }
.turtle-soup-screen .story-card { background: linear-gradient(135deg, #e0f7fa, #b2ebf2); padding: 20px; margin: 16px; border-radius: 12px; }
.turtle-soup-screen .story-badge { display: inline-block; background: #0097a7; color: white; padding: 4px 12px; border-radius: 12px; font-size: 12px; margin-bottom: 12px; }
.turtle-soup-screen .game-chat { flex: 1; padding: 16px; overflow-y: auto; }
.turtle-soup-screen .game-hint { text-align: center; padding: 12px; background: #fff8e1; border-radius: 8px; margin-bottom: 16px; font-size: 13px; color: #f57c00; }
.turtle-soup-screen .question-bubble { background: var(--theme-primary); color: white; padding: 12px 16px; border-radius: 18px 18px 4px 18px; display: inline-block; max-width: 80%; float: right; clear: both; }
.turtle-soup-screen .answer-bubble { background: white; padding: 12px 16px; border-radius: 18px 18px 18px 4px; display: inline-block; font-weight: 600; clear: both; }
.turtle-soup-screen .game-input-area { display: flex; padding: 12px 16px; background: white; border-top: 1px solid #eee; gap: 12px; }
.turtle-soup-screen .game-input-area input { flex: 1; padding: 12px 16px; border: 1px solid #ddd; border-radius: 24px; outline: none; }
.turtle-soup-screen .ask-btn { width: 48px; height: 48px; background: var(--theme-primary); color: white; border: none; border-radius: 50%; cursor: pointer; }
.turtle-soup-screen .reveal-btn { margin: 16px; padding: 14px; background: #ff9800; color: white; border: none; border-radius: 12px; cursor: pointer; }
.turtle-soup-screen .game-result { padding: 20px; text-align: center; }
.turtle-soup-screen .truth-card { background: white; padding: 20px; border-radius: 12px; text-align: left; margin-bottom: 24px; }
.turtle-soup-screen .truth-badge { display: inline-block; background: #4caf50; color: white; padding: 4px 12px; border-radius: 12px; font-size: 12px; margin-bottom: 12px; }
.turtle-soup-screen .play-again-btn { padding: 14px 32px; background: var(--theme-primary); color: white; border: none; border-radius: 24px; cursor: pointer; }

/* ========== 情侣默契挑战 ========== */
.couples-challenge-screen .challenge-menu { padding: 20px; }
.couples-challenge-screen .heart-icon { width: 80px; height: 80px; background: linear-gradient(135deg, #fce4ec, #f8bbd9); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #e91e63; margin: 0 auto 20px; }
.couples-challenge-screen .rules-card { background: white; padding: 20px; border-radius: 12px; margin: 24px 0; }
.couples-challenge-screen .start-btn { width: 100%; padding: 16px; background: linear-gradient(135deg, #e91e63, #c2185b); color: white; border: none; border-radius: 12px; font-size: 16px; cursor: pointer; }
.couples-challenge-screen .progress-bar { height: 4px; background: #eee; margin: 16px; border-radius: 2px; }
.couples-challenge-screen .progress-fill { height: 100%; background: #e91e63; border-radius: 2px; transition: width 0.3s; }
.couples-challenge-screen .question-card { text-align: center; padding: 40px 20px; }
.couples-challenge-screen .question-number { font-size: 14px; color: #e91e63; margin-bottom: 12px; }
.couples-challenge-screen .question-text { font-size: 20px; font-weight: 600; }
.couples-challenge-screen .options-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 20px; }
.couples-challenge-screen .option-item { padding: 16px; background: white; border: 2px solid #eee; border-radius: 12px; text-align: center; cursor: pointer; }
.couples-challenge-screen .option-item.selected { border-color: #e91e63; background: #fce4ec; }
.couples-challenge-screen .confirm-btn { margin: 24px 20px; padding: 16px; background: #e91e63; color: white; border: none; border-radius: 12px; cursor: pointer; }
.couples-challenge-screen .confirm-btn:disabled { background: #ccc; }
.couples-challenge-screen .match-circle { width: 150px; height: 150px; background: linear-gradient(135deg, #fce4ec, #f8bbd9); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 24px auto; }
.couples-challenge-screen .circle-value { font-size: 36px; font-weight: 600; color: #e91e63; }
.couples-challenge-screen .answers-comparison { background: white; padding: 16px; border-radius: 12px; margin: 24px 0; }
.couples-challenge-screen .compare-item { padding: 12px; border-bottom: 1px solid #eee; }
.couples-challenge-screen .compare-item.match { background: #e8f5e9; }

/* ========== 手机模拟器 ========== */
.phone-simulator-screen { background: #222; }
.simulator-tabs { display: flex; background: #333; padding: 8px; }
.sim-tab { flex: 1; padding: 12px; text-align: center; color: #888; cursor: pointer; border-radius: 8px; }
.sim-tab.active { background: #444; color: white; }
.sim-tab i { display: block; font-size: 20px; margin-bottom: 4px; }
.simulator-content { flex: 1; overflow-y: auto; background: #1a1a1a; }
.sim-contact-item { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid #333; cursor: pointer; }
.sim-contact-item .contact-avatar { width: 48px; height: 48px; background: #444; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #888; margin-right: 12px; }
.sim-contact-item .contact-name { color: white; margin-bottom: 4px; }
.sim-contact-item .contact-last-msg { font-size: 13px; color: #888; }
.sim-chat-header { padding: 16px; background: #333; color: white; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.sim-messages { padding: 16px; min-height: 300px; }
.sim-message { margin-bottom: 12px; clear: both; }
.sim-message.sent { text-align: right; }
.sim-message .sim-bubble { display: inline-block; padding: 10px 14px; border-radius: 16px; max-width: 70%; }
.sim-message.sent .sim-bubble { background: #0084ff; color: white; }
.sim-message.received .sim-bubble { background: #333; color: white; }
.sim-actions { display: flex; padding: 16px; gap: 12px; }
.sim-actions button { flex: 1; padding: 12px; background: #333; color: white; border: none; border-radius: 8px; cursor: pointer; }

/* ========== 虚拟伴侣/番茄钟 ========== */
.companion-screen .mode-tabs { display: flex; background: white; border-bottom: 1px solid #eee; }
.companion-screen .mode-tab { flex: 1; padding: 14px; text-align: center; cursor: pointer; color: #666; }
.companion-screen .mode-tab.active { color: var(--theme-primary); border-bottom: 2px solid var(--theme-primary); }
.companion-screen .companion-view { padding: 20px; text-align: center; }
.companion-screen .character-avatar { width: 120px; height: 120px; background: linear-gradient(135deg, #e3f2fd, #bbdefb); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 60px; color: #2196f3; cursor: pointer; }
.companion-screen .speech-bubble { background: white; padding: 16px 24px; border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 20px auto; max-width: 280px; }
.companion-screen .companion-btn { padding: 12px 24px; background: var(--theme-primary); color: white; border: none; border-radius: 24px; cursor: pointer; }
.companion-screen .timer-circle { width: 200px; height: 200px; margin: 40px auto; position: relative; }
.companion-screen .timer-circle svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.companion-screen .timer-bg { fill: none; stroke: #eee; stroke-width: 8; }
.companion-screen .timer-progress { fill: none; stroke: var(--theme-primary); stroke-width: 8; stroke-linecap: round; }
.companion-screen .timer-display { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.companion-screen .timer-time { font-size: 36px; font-weight: 600; }
.companion-screen .control-btn { padding: 14px 28px; border: none; border-radius: 24px; cursor: pointer; }
.companion-screen .control-btn.start { background: #4caf50; color: white; }

/* ========== 锁屏相册 ========== */
.lock-screen-gallery .gallery-info { padding: 12px 16px; background: #e3f2fd; color: #1976d2; font-size: 13px; }
.lock-screen-gallery .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; }
.lock-screen-gallery .photo-item { aspect-ratio: 1; position: relative; overflow: hidden; cursor: pointer; }
.lock-screen-gallery .photo-item img { width: 100%; height: 100%; object-fit: cover; }
.lock-screen-gallery .photo-item.add-btn { background: #f5f5f5; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #999; }
.lock-screen-gallery .cover-badge { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); color: white; font-size: 11px; text-align: center; padding: 4px; }

/* ========== API调试台 ========== */
.api-debug-screen .debug-tabs { display: flex; background: white; border-bottom: 1px solid #eee; }
.api-debug-screen .debug-tab { flex: 1; padding: 14px; text-align: center; cursor: pointer; color: #666; }
.api-debug-screen .debug-tab.active { color: var(--theme-primary); border-bottom: 2px solid var(--theme-primary); }
.api-debug-screen .log-item { background: white; padding: 12px; border-radius: 8px; margin-bottom: 12px; border-left: 3px solid #4caf50; }
.api-debug-screen .log-item.error { border-left-color: #f44336; }
.api-debug-screen .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; }
.api-debug-screen .stat-card { background: white; padding: 20px; border-radius: 12px; text-align: center; }
.api-debug-screen .test-btn { width: 100%; padding: 14px; background: var(--theme-primary); color: white; border: none; border-radius: 12px; cursor: pointer; }

/* ========== 记忆核心 ========== */
.memory-core-screen .memory-usage-bar { padding: 12px 16px; background: white; }
.memory-core-screen .usage-progress { height: 4px; background: #e0e0e0; border-radius: 2px; margin-top: 8px; }
.memory-core-screen .usage-fill { height: 100%; background: #AB47BC; border-radius: 2px; }
.memory-core-screen .memory-list { padding: 16px; }
.memory-core-screen .memory-item { background: white; padding: 16px; border-radius: 12px; margin-bottom: 12px; border-left: 4px solid #AB47BC; }
.memory-core-screen .memory-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.memory-core-screen .memory-importance { font-size: 11px; color: white; padding: 2px 8px; border-radius: 10px; }
.memory-core-screen .memory-content { font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
.memory-core-screen .memory-footer { display: flex; justify-content: space-between; align-items: center; }
.memory-core-screen .memory-actions button { background: none; border: none; color: #999; padding: 4px 8px; cursor: pointer; }
.memory-core-screen .category-options, .memory-core-screen .importance-options { display: flex; gap: 8px; flex-wrap: wrap; }
.memory-core-screen .category-option, .memory-core-screen .importance-option { padding: 8px 16px; background: #f5f5f5; border-radius: 20px; cursor: pointer; }
.memory-core-screen .category-option.active { background: #e1bee7; color: #7B1FA2; }

/* ========== 角色卡管理 ========== */
.char-card-screen .current-char-card { display: flex; align-items: center; padding: 20px; background: white; margin: 16px; border-radius: 12px; }
.char-card-screen .char-avatar { width: 60px; height: 60px; border-radius: 50%; background: #f5f5f5; display: flex; align-items: center; justify-content: center; margin-right: 16px; overflow: hidden; }
.char-card-screen .char-avatar img { width: 100%; height: 100%; object-fit: cover; }
.char-card-screen .char-name { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.char-card-screen .export-section, .char-card-screen .import-section { background: white; padding: 20px; margin: 16px; border-radius: 12px; }
.char-card-screen .export-btn, .char-card-screen .import-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #9b59b6, #8e44ad); color: white; border: none; border-radius: 12px; cursor: pointer; }
.char-card-screen .option-item { display: flex; align-items: center; padding: 8px 0; cursor: pointer; }
.char-card-screen .preview-card { background: #f5f5f5; padding: 16px; border-radius: 8px; margin: 12px 0; }
.char-card-screen .preview-warning { padding: 12px; background: #fff3e0; color: #f57c00; border-radius: 8px; margin: 12px 0; font-size: 13px; }

/* ========== 消息引用和撤回按钮（对齐 downloaded_site）========== */
.message-wrapper {
    position: relative; /* 确保按钮可以正确定位 */
}

/* 引用回复按钮 */
.reply-btn {
    position: absolute;
    top: calc(50% - 14px); /* 向上偏移给撤回按钮腾位置 */
    background-color: rgba(240, 240, 240, 0.8);
    backdrop-filter: blur(2px);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    opacity: 0; /* 默认隐藏 */
    transform: translateY(-50%) scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none; /* 隐藏时不可点击 */
    z-index: 10;
}

/* 撤回按钮 */
.recall-btn {
    position: absolute;
    top: calc(50% + 14px); /* 在回复按钮下方 */
    transform: translateY(-50%);
    background-color: rgba(240, 240, 240, 0.8);
    backdrop-filter: blur(2px);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #f44336; /* 红色 */
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    opacity: 0; /* 默认隐藏 */
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none; /* 隐藏时不可点击 */
    z-index: 10;
}

/* 用户发的消息：按钮在左边 */
.message-wrapper.sent .reply-btn,
.message-wrapper.sent .recall-btn {
    left: -35px;
}

/* 收到的消息：按钮在右边 */
.message-wrapper.received .reply-btn {
    right: -35px;
}

/* 当消息有 show-reply-btn 类时，显示按钮 */
.message-wrapper.show-reply-btn .reply-btn {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
}

/* 用户消息：同时显示引用和撤回按钮 */
.message-wrapper.sent.show-reply-btn .reply-btn,
.message-wrapper.sent.show-reply-btn .recall-btn {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
}

/* AI消息：只显示引用按钮 */
.message-wrapper.received.show-reply-btn .reply-btn {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
}

/* 按钮悬浮效果 */
.reply-btn:hover,
.recall-btn:hover {
    transform: translateY(-50%) scale(1.1) !important;
}

/* 引用预览条（输入框上方） */
#reply-preview-bar {
    padding: 8px 15px;
    background-color: #f0f0f0;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e0e0e0;
}

#reply-preview-bar .preview-content {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666;
}

#reply-preview-bar .preview-close {
    cursor: pointer;
    color: #999;
    padding: 4px 8px;
    font-size: 16px;
}

/* 消息中的引用框 */
.message-quote {
    background-color: rgba(0, 0, 0, 0.05);
    border-left: 3px solid var(--theme-primary, #AB47BC);
    padding: 6px 10px;
    margin-bottom: 6px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.message-quote .sender {
    font-weight: bold;
    color: var(--theme-primary, #AB47BC);
    margin-bottom: 2px;
}

.message-quote .content {
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========== 语音消息样式（对齐 downloaded_site）========== */
.message.voice {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 15px;
    min-width: 80px;
    background: linear-gradient(135deg, #4CAF50, #8BC34A);
    color: white;
    cursor: pointer;
}

.message.voice.sent {
    background: linear-gradient(135deg, var(--theme-primary, #AB47BC), #9C27B0);
}

.message.voice .voice-duration {
    font-size: 14px;
    font-weight: 500;
}

.message.voice i {
    transform: rotate(90deg);
    animation: voice-wave 1.5s ease-in-out infinite;
}

@keyframes voice-wave {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ========== 图片描述消息样式（对齐 downloaded_site：翻转卡片效果）========== */
.message.picture-description {
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
    max-width: 200px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message.picture-description .message-image-container {
    position: relative;
    display: flex;
    flex-direction: column;
}

.message.picture-description .message-image {
    width: 100%;
    max-width: 200px;
    border-radius: 12px 12px 0 0;
    display: block;
}

.message.picture-description .picture-description-text {
    background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.8));
    color: white;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}

.message.picture-description.sent .picture-description-text {
    background: linear-gradient(to bottom, rgba(0,100,200,0.6), rgba(0,100,200,0.8));
}

/* ========== 语音转文字样式（对齐 downloaded_site）========== */
.message-voice-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.message-wrapper.sent .message-voice-wrapper {
    align-items: flex-end;
}

.transcribed-text {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    background: #f5f5f5;
    color: #333;
    padding: 0 12px;
    margin-top: 0;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    max-width: 200px;
    word-break: break-word;
    transition: all 0.3s ease;
}

.transcribed-text.visible {
    max-height: 200px;
    opacity: 1;
    padding: 8px 12px;
    margin-top: 6px;
}

.message-wrapper.sent .transcribed-text {
    background: rgba(171, 71, 188, 0.1);
}

/* ========== 自定义确认弹窗样式（对齐 downloaded_site）========== */
.custom-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.confirm-modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 24px;
    width: 280px;
    max-width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: confirmModalIn 0.2s ease;
}

@keyframes confirmModalIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

.confirm-modal-text {
    font-size: 14px;
    color: #666;
    text-align: center;
    line-height: 1.6;
    margin-bottom: 20px;
}

.confirm-modal-text small {
    color: #999;
    font-size: 12px;
}

.confirm-modal-buttons {
    display: flex;
    gap: 12px;
}

.confirm-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirm-btn.cancel {
    background: #f0f0f0;
    color: #666;
}

.confirm-btn.cancel:hover {
    background: #e5e5e5;
}

.confirm-btn.confirm {
    background: var(--theme-primary, #AB47BC);
    color: white;
}

.confirm-btn.confirm:hover {
    opacity: 0.9;
}

.confirm-btn.confirm.danger {
    background: #e53935;
}

.confirm-btn.confirm.danger:hover {
    background: #c62828;
}

/* ========== 自定义输入弹窗样式（对齐 downloaded_site）========== */
.custom-prompt-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prompt-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.prompt-modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 20px;
    width: 300px;
    max-width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: confirmModalIn 0.2s ease;
}

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

.prompt-modal-body {
    margin-bottom: 20px;
}

.prompt-modal-input {
    width: 100%;
    height: 80px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    resize: none;
    box-sizing: border-box;
    font-family: inherit;
}

.prompt-modal-input:focus {
    outline: none;
    border-color: var(--theme-primary, #AB47BC);
}

.prompt-modal-buttons {
    display: flex;
    gap: 10px;
}

.prompt-btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.prompt-btn.cancel {
    background: #bdc3c7;
    color: white;
}

.prompt-btn.cancel:hover {
    background: #a0a5a8;
}

.prompt-btn.confirm {
    background: var(--theme-primary, #AB47BC);
    color: white;
}

.prompt-btn.confirm:hover {
    opacity: 0.9;
}

/* ============================================ */
/* 转发聊天记录卡片样式（完全对齐 downloaded_site） */
/* ============================================ */
.message.chat-history-card {
    /* 覆盖基础 .message 样式 */
    background-color: #f7f7f7 !important;
    border: 1px solid #e0e0e0 !important;
    width: 260px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    min-width: auto !important;
}

.ch-header {
    padding: 10px 15px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark, #333);
    border-bottom: 1px solid #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: transparent;
}

.ch-body {
    padding: 10px 15px;
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: transparent;
}

.ch-item {
    font-size: 13px;
    line-height: 1.5;
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
}

.ch-item.received {
    align-items: flex-start;
}

.ch-sender {
    font-size: 12px;
    color: #888;
    margin-bottom: 2px;
}

.ch-bubble {
    display: inline-block;
    max-width: 95%;
    padding: 6px 10px;
    border-radius: 10px;
    background-color: #ffffff;
}

.ch-item.received .ch-bubble {
    background-color: #ffffff;
    border-top-left-radius: 2px;
}

.ch-item.sent {
    align-items: flex-end;
    text-align: right;
}

.ch-item.sent .ch-bubble {
    background-color: var(--sent-message-bg, #e6f5c9);
    border-top-right-radius: 2px;
    text-align: left;
}

.ch-footer {
    padding: 6px 15px;
    font-size: 12px;
    color: #aaa;
    border-top: 1px solid #e8e8e8;
    background-color: #fdfdfd;
}

/* ========== 音乐分享卡片（完全对齐 downloaded_site） ========== */
.message.music-share-card {
    background-color: #f3f4f6 !important;
    color: #333 !important;
    width: 260px !important;
    padding: 12px !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.message.sent.music-share-card {
    background-color: var(--sent-message-bg, #e6f5c9) !important;
}

.music-card-cover {
    width: 60px;
    height: 60px;
    background-color: #555;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    animation: music-spin 8s linear infinite;
    animation-play-state: paused; /* 默认暂停 */
}

.music-card-cover.playing {
    animation-play-state: running; /* 播放时旋转 */
}

@keyframes music-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.music-card-cover img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.music-card-play-btn {
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: rgba(255,255,255,0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 0.2s ease;
}

.music-card-cover:hover .music-card-play-btn {
    transform: scale(1.1);
}

.music-card-info {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.music-card-title {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
}

.music-card-artist {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-card-progress-bar {
    width: 100%;
    height: 3px;
    background-color: #ddd;
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.music-card-progress {
    width: 0%;
    height: 100%;
    background-color: var(--theme-primary);
    transition: width 0.3s ease;
}

.music-card-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}

.music-card-time {
    font-family: monospace;
}

.music-card-loop-btn {
    cursor: pointer;
    font-size: 14px;
}

.music-card-loop-btn:hover {
    color: var(--theme-primary);
}

/* ========== 转盘游戏卡片（对齐 downloaded_site） ========== */
.message.game-wheel-card {
    padding: 15px !important;
    background: linear-gradient(135deg, #ff9800, #f57c00) !important;
    border-radius: 12px !important;
    width: 220px !important;
    color: white !important;
}

.wheel-card-title {
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    margin-bottom: 15px;
}

.wheel-card-result-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wheel-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 8px 12px;
}

.wheel-player-name {
    font-size: 14px;
    font-weight: 500;
}

.wheel-player-result {
    font-size: 14px;
    font-weight: 600;
    background: rgba(255,255,255,0.3);
    padding: 4px 10px;
    border-radius: 12px;
}

.spin-btn {
    background: white;
    color: #f57c00;
    border: none;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}

.spin-btn:hover {
    transform: scale(1.05);
}

/* ========================================================== */
/* 视频通话样式（完全对齐 downloaded_site V17） */
/* ========================================================== */

/* 来电界面（使用 ID 选择器对齐原版） */
#incoming-call-screen {
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1002; 
    background-color: rgba(0, 0, 0, 0.7); 
    backdrop-filter: blur(10px); 
    color: white; 
    text-align: center;
    flex-direction: column; 
    justify-content: space-around; 
    align-items: center;
}

/* 兼容类选择器 */
.incoming-call-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1002;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.incoming-call-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.incoming-caller-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid white;
    margin-bottom: 15px;
    object-fit: cover;
}

.incoming-caller-name {
    font-size: 24px;
    font-weight: 600;
}

.incoming-call-hint {
    font-size: 16px;
    margin-top: 10px;
    opacity: 0.8;
}

.incoming-call-actions {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 0 40px;
}

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

.call-action-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    transition: transform 0.2s;
}

.call-action-btn:hover .call-action-icon {
    transform: scale(1.1);
}

.call-action-btn.decline .call-action-icon {
    background-color: var(--soft-red, #ff6b6b);
    color: white;
}

.call-action-btn.accept .call-action-icon {
    background-color: var(--theme-primary, #4caf50);
    color: white;
}

.call-action-btn span {
    margin-top: 10px;
    font-size: 14px;
}

/* 通话界面（使用 ID 选择器对齐原版） */
#video-call-screen {
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1001;
    justify-content: center; 
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
}

/* 兼容类选择器 */
.video-call-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
    background-color: rgba(0, 0, 0, 0.4);
}

.video-call-card-content {
    width: 90%;
    max-width: 400px;
    height: 75%;
    max-height: 650px;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px);
    border-radius: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    color: var(--text-dark);
    overflow: hidden;
}

.video-call-header {
    padding: 15px;
    text-align: center;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

/* ID 选择器（对齐原版） */
#call-contact-name { 
    font-size: 18px; 
    font-weight: 700; 
    display: block;
}
#call-status { 
    display: block; 
    font-size: 13px; 
    color: var(--theme-primary); 
    margin-top: 4px; 
    font-weight: 600; 
}

/* 类选择器兼容 */
.call-contact-name {
    font-size: 18px;
    font-weight: 700;
    display: block;
}

.call-status {
    display: block;
    font-size: 13px;
    color: var(--theme-primary, #4caf50);
    margin-top: 4px;
    font-weight: 600;
}

.video-call-main {
    flex-grow: 1;
    padding: 15px;
    overflow: hidden;
}

.narrative-feed {
    height: 100%;
    overflow-y: auto;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
}

.char-bubble {
    align-self: flex-start;
    max-width: 90%;
    background-color: #fff;
    border: 1px solid var(--border-color, #eee);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 10px 15px;
    border-radius: 18px;
    border-top-left-radius: 4px;
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.6;
}

.char-bubble p {
    margin: 0 0 8px 0;
}

.char-bubble p:last-child {
    margin-bottom: 0;
}

.narrative-speech {
    color: var(--text-dark);
    font-weight: 500;
}

.narrative-action {
    color: var(--text-gray, #888);
    font-style: italic;
}

.narrative-psychology {
    color: var(--theme-primary-hover, #388e3c);
    font-style: italic;
}

.narrative-feed > .narrative-action {
    align-self: center;
    text-align: center;
    font-size: 13px;
    margin: 5px 0 15px 0;
}

.user-message {
    align-self: flex-end;
    background-color: var(--sent-message-bg, #c8e6c9);
    padding: 10px 15px;
    border-radius: 18px;
    border-bottom-right-radius: 4px;
    color: var(--text-dark);
    font-weight: 500;
    margin-bottom: 12px;
    max-width: 90%;
    font-size: 15px;
    line-height: 1.6;
}

.user-message p {
    margin: 0;
}

.video-call-input-area {
    padding: 8px 15px;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    background-color: rgba(0, 0, 0, 0.03);
    flex-shrink: 0;
}

/* ID 选择器（对齐原版） */
#video-call-input { 
    flex-grow: 1; 
    background-color: white; 
    border: 1px solid var(--border-color); 
    border-radius: 20px; 
    padding: 8px 15px; 
    font-size: 15px; 
    outline: none; 
    resize: none; 
    max-height: 100px; 
    overflow-y: auto; 
    font-family: inherit;
    min-width: 0;
}
#video-call-send-btn { 
    background-color: var(--theme-primary); 
    color: var(--text-on-primary, white); 
    border: none; 
    border-radius: 50%; 
    width: 38px; 
    height: 38px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin-left: 8px; 
    cursor: pointer; 
    font-size: 16px; 
    flex-shrink: 0; 
    transition: background-color 0.2s; 
}
#video-call-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 类选择器兼容 */
.video-call-input-area textarea {
    flex-grow: 1;
    background-color: white;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 20px;
    padding: 8px 15px;
    font-size: 15px;
    outline: none;
    resize: none;
    max-height: 100px;
    overflow-y: auto;
    font-family: inherit;
    min-width: 0;
}

.video-call-send-btn {
    background-color: var(--theme-primary, #4caf50);
    color: white;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;
    transition: background-color 0.2s;
}

.video-call-send-btn:hover {
    background-color: var(--theme-primary-hover, #388e3c);
}

.video-call-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.video-call-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    background-color: rgba(0, 0, 0, 0.03);
    flex-shrink: 0;
}

.control-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: 80px;
    text-align: center;
}

.control-btn i {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #e9ecef;
    color: var(--text-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    margin-bottom: 6px;
    transition: all 0.2s ease;
}

.control-btn:hover i {
    transform: scale(1.05);
}

.control-btn span {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-gray, #666);
}

.control-btn.hang-up i {
    background-color: var(--soft-red, #ff6b6b);
    color: white;
}

/* ========================================================== */
/* V9.0 新增：悬浮音乐播放器样式（完全对齐 downloaded_site） */
/* ========================================================== */
:root {
    --apple-green: #8DB600;
}

#music-player-card {
    display: none;
    flex-direction: column;
    position: absolute;
    width: 320px;
    height: 500px;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    /* 默认居中 - 会被JS动态计算覆盖 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    transition: height 0.4s ease-in-out, background-color 0.4s ease-in-out;
}

#music-player-card .player-header {
    padding: 0 15px;
    height: 45px;
    font-weight: 600;
    color: var(--text-dark);
    background-color: rgba(0, 0, 0, 0.05);
    cursor: move;
    position: relative;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

#music-player-card .player-collapse-btn {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-light);
    padding: 5px;
}

#music-player-card .player-close-btn {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-gray);
    padding: 5px;
    font-size: 18px;
    transition: transform 0.2s ease;
}

#music-player-card .player-close-btn:hover {
    transform: translateY(-50%) scale(1.2);
}

#music-player-card .player-header-title {
    font-size: 16px;
}

#music-player-card .header-collapsed-content {
    display: none;
    align-items: center;
    gap: 10px;
    padding-left: 35px;
}

#music-player-card .header-avatar-stack {
    display: flex;
    align-items: center;
}

#music-player-card .header-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid white;
    object-fit: cover;
}

#music-player-card .header-avatar:last-child {
    margin-left: -10px;
}

#music-player-card .header-lyric {
    flex-grow: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--apple-green);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#music-player-card .player-main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s;
}

#music-player-card .player-avatar-stack {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0 15px;
}

#music-player-card .player-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    position: relative;
}

#music-player-card .player-avatar:first-child {
    z-index: 2;
}

#music-player-card .player-avatar:last-child {
    margin-left: -25px;
    z-index: 1;
}

#music-player-card .player-song-info {
    text-align: center;
}

#music-player-card .player-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
}

#music-player-card .player-artist {
    font-size: 14px;
    color: var(--text-light);
    margin-top: 5px;
}

#music-player-card .lyrics-container {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(transparent 0%, black 20%, black 80%, transparent 100%);
    margin-top: 15px;
}

#music-player-card .lyrics-wrapper {
    position: absolute;
    width: 100%;
    transition: transform 0.5s ease-out;
}

#music-player-card .lyric-line {
    padding: 8px 20px;
    text-align: center;
    font-size: 16px;
    color: var(--text-light);
    transition: color 0.5s, transform 0.5s;
}

#music-player-card .lyric-line.active {
    color: var(--apple-green);
    font-weight: 600;
    transform: scale(1.1);
}

#music-player-card .player-controls-wrapper {
    padding: 15px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

#music-player-card .player-progress-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-light);
}

#music-player-card .player-progress-bar {
    flex-grow: 1;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    cursor: pointer;
    padding: 4px 0;
    background-clip: content-box;
}

#music-player-card .player-progress {
    width: 0%;
    height: 100%;
    background-color: var(--theme-primary);
    border-radius: 2px;
}

#music-player-card .player-controls {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
    margin-top: 10px;
    color: var(--text-dark);
}

#music-player-card .player-control-btn {
    cursor: pointer;
    transition: transform 0.2s;
    width: 30px;
    text-align: center;
}

#music-player-card .player-control-btn:hover {
    transform: scale(1.15);
}

#music-player-card .player-play-btn {
    font-size: 40px;
    color: var(--theme-primary);
}

/* 收缩状态 */
#music-player-card.collapsed {
    height: 45px;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(25px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

#music-player-card.collapsed .header-collapsed-content,
#music-player-card.collapsed .player-collapse-btn {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

#music-player-card.collapsed .player-header-title {
    display: none;
}

#music-player-card.collapsed .header-collapsed-content {
    display: flex;
}

#music-player-card.collapsed .player-main-content {
    visibility: hidden;
    opacity: 0;
}

/* 播放列表视图 */
#music-player-card .player-playlist-view {
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    bottom: 95px;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
    opacity: 0;
    padding: 10px 0;
    overflow-y: auto;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    pointer-events: none;
    z-index: 3;
}

#music-player-card .player-playlist-view.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

#music-player-card .playlist-item {
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

#music-player-card .playlist-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

#music-player-card .playlist-item.playing .playlist-title {
    color: var(--theme-primary);
}

#music-player-card .playlist-title {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 14px;
}

#music-player-card .playlist-artist {
    font-size: 12px;
    color: var(--text-light);
}

/* 呼吸光晕动画 */
@keyframes pulse-glow-left {
    0%, 100% {
        box-shadow: -2px 0 5px 0px rgba(129, 199, 132, 0.7);
    }
    50% {
        box-shadow: -5px 0 15px 3px rgba(129, 199, 132, 0.1);
    }
}

@keyframes pulse-glow-right {
    0%, 100% {
        box-shadow: 2px 0 5px 0px rgba(129, 199, 132, 0.7);
    }
    50% {
        box-shadow: 5px 0 15px 3px rgba(129, 199, 132, 0.1);
    }
}

#music-player-card .player-avatar:first-child {
    animation: pulse-glow-left 2.5s ease-in-out infinite;
}

#music-player-card .player-avatar:last-child {
    animation: pulse-glow-right 2.5s ease-in-out infinite 0.3s;
}

/* ========== 小窝时光胶囊 (Memory Album) ========== */
.memory-album-screen {
    background-color: #f0f2f5;
}

.memory-album-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.album-section {
    background-color: white;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px var(--shadow-color);
}

.album-section-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--theme-primary);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.album-milestone-item,
.album-stat-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    font-size: 16px;
}

.album-item-icon {
    width: 30px;
    text-align: center;
    margin-right: 15px;
    color: var(--text-gray);
}

.album-item-label {
    color: #333;
}

.album-item-value {
    margin-left: auto;
    font-weight: 600;
    color: var(--text-dark);
}

.album-memory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.album-memory-item {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #eee;
    cursor: pointer;
}

.album-memory-item .fas {
    margin-right: 5px;
    color: var(--theme-secondary);
}

.album-empty-hint {
    color: #888;
    grid-column: 1 / -1;
    margin: 0;
    padding: 10px 0;
}

/* ========================================
   TA的关系网页面样式（对齐 downloaded_site）
   ======================================== */

.relationship-network-screen {
    background: #f0f2f5;
}

.rn-section {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 15px;
    padding: 15px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.rn-section-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 12px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

.rn-graph-container {
    background: linear-gradient(135deg, #fafafa 0%, #f0f2f5 100%);
    border-radius: 10px;
    height: 350px;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e8e8e8;
}

/* 角色列表 */
.rn-character-list {
    max-height: 250px;
    overflow-y: auto;
}

.rn-character-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #f5f5f5;
    gap: 10px;
}

.rn-character-item:last-child {
    border-bottom: none;
}

.rn-char-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

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

.rn-char-avatar i {
    color: #999;
    font-size: 16px;
}

.rn-char-info {
    flex: 1;
    min-width: 0;
}

.rn-char-name {
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rn-char-persona {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rn-char-actions {
    display: flex;
    gap: 6px;
}

.rn-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.rn-tag.primary {
    background: #e3f2fd;
    color: #1976d2;
}

.rn-tag.info {
    background: #e8f5e9;
    color: #388e3c;
}

.rn-tag.warning {
    background: #fff3e0;
    color: #f57c00;
}

/* 按钮 */
.rn-btn-group {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.rn-btn {
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.rn-btn.primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    flex: 1;
}

.rn-btn.secondary {
    background: #f5f5f5;
    color: #666;
    flex: 1;
}

.rn-btn.full {
    width: 100%;
    justify-content: center;
}

.rn-btn:active {
    transform: scale(0.97);
}

.rn-btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: #f5f5f5;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rn-btn-icon.danger {
    color: #f44336;
}

.rn-btn-icon:active {
    background: #eee;
}

/* 关系编辑器 */
.rn-relation-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rn-relation-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.rn-arrow {
    font-size: 20px;
    color: #999;
    padding-bottom: 12px;
}

.rn-field {
    flex: 1;
}

.rn-field label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
}

.rn-field select,
.rn-field input,
.rn-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    background: #fafafa;
    box-sizing: border-box;
}

.rn-field textarea {
    min-height: 60px;
    resize: vertical;
}

.rn-field select:focus,
.rn-field input:focus,
.rn-field textarea:focus {
    outline: none;
    border-color: #667eea;
    background: #fff;
}

/* 关系列表 */
.rn-relation-list {
    max-height: 200px;
    overflow-y: auto;
}

.rn-relation-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    gap: 10px;
}

.rn-relation-item:hover {
    background: #fafafa;
}

.rn-relation-item:last-child {
    border-bottom: none;
}

.rn-rel-content {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 13px;
}

.rn-rel-from,
.rn-rel-to {
    font-weight: 500;
}

.rn-rel-arrow {
    color: #999;
}

.rn-rel-type {
    color: #667eea;
    font-weight: 500;
}

.rn-empty {
    text-align: center;
    padding: 30px 20px;
    color: #999;
    font-size: 14px;
}

/* 弹窗 */
.rn-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.rn-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.rn-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.rn-modal-header h3 {
    margin: 0;
    font-size: 16px;
}

.rn-close-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rn-modal-body {
    padding: 15px;
    overflow-y: auto;
    flex: 1;
}

/* 头像上传 */
.rn-avatar-upload {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rn-avatar-preview {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    border: 2px dashed #ccc;
}

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

.rn-avatar-preview i {
    font-size: 20px;
    color: #999;
}

/* 导入列表 */
.rn-import-list {
    max-height: 300px;
    overflow-y: auto;
}

.rn-import-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
}

.rn-import-item:hover {
    background: #f9f9f9;
}

.rn-import-item:last-child {
    border-bottom: none;
}

/* 导入弹窗增强样式 */
.rn-import-section {
    margin-bottom: 20px;
}

.rn-import-section:last-child {
    margin-bottom: 0;
}

.rn-import-title {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rn-import-title i {
    color: #667eea;
}

.rn-empty-small {
    text-align: center;
    padding: 15px;
    color: #999;
    font-size: 13px;
    background: #f9f9f9;
    border-radius: 8px;
}

.rn-import-add {
    color: #667eea;
    opacity: 0;
    transition: opacity 0.2s;
}

.rn-import-item:hover .rn-import-add {
    opacity: 1;
}

.rn-import-npc-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rn-import-npc-name {
    font-weight: 500;
}

.rn-import-npc-source {
    font-size: 11px;
    color: #999;
}

/* 关系列表详情样式 */
.rn-rel-detail {
    font-size: 11px;
    color: #999;
    display: block;
    width: 100%;
    margin-top: 2px;
}

/* 标签危险样式 */
.rn-tag.danger {
    background: #ffebee;
    color: #c62828;
}

/* ========================================
   联系人更多信息设置页面样式（对齐 downloaded_site）
   ======================================== */

.contact-settings-screen {
    background: #f0f2f5;
}

.cs-content {
    padding: 15px;
}

.cs-section {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.cs-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.cs-hint {
    font-size: 13px;
    color: #888;
    margin: 5px 0 10px;
    line-height: 1.5;
}

/* 开关样式 */
.cs-toggle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.cs-toggle-item span {
    font-size: 15px;
    color: #333;
    font-weight: 500;
}

.cs-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.cs-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cs-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 28px;
}

.cs-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.cs-switch input:checked + .cs-slider {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.cs-switch input:checked + .cs-slider:before {
    transform: translateX(22px);
}

/* 按钮行 */
.cs-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.cs-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.cs-btn.primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
}

.cs-btn.secondary {
    background: #7f8c8d;
    color: #fff;
}

.cs-btn.save {
    background: linear-gradient(135deg, #4caf50, #45a049);
    color: #fff;
}

.cs-btn.export {
    background: #9b59b6;
    color: #fff;
}

.cs-btn.danger {
    background: #e74c3c;
    color: #fff;
}

.cs-btn:active {
    transform: scale(0.97);
    opacity: 0.9;
}

/* 预览容器 */
.cs-preview-container {
    margin: 10px 0;
    text-align: center;
}

.cs-bg-preview {
    max-width: 100%;
    max-height: 150px;
    border-radius: 10px;
    border: 1px solid #eee;
}

.cs-avatar-preview-container {
    text-align: center;
    margin: 10px 0;
}

.cs-avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #eee;
}

/* 表单字段 */
.cs-field {
    margin-bottom: 12px;
}

.cs-field:last-child {
    margin-bottom: 0;
}

.cs-field label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
    font-weight: 500;
}

.cs-input,
.cs-select {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    background: #fafafa;
    box-sizing: border-box;
    transition: all 0.2s;
}

.cs-input:focus,
.cs-select:focus {
    outline: none;
    border-color: #667eea;
    background: #fff;
}

.cs-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    background: #fafafa;
    box-sizing: border-box;
    min-height: 100px;
    resize: vertical;
    transition: all 0.2s;
}

.cs-textarea.cs-code {
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 12px;
    min-height: 150px;
}

.cs-textarea:focus {
    outline: none;
    border-color: #667eea;
    background: #fff;
}

/* 复选框列表 */
.cs-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cs-checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f9f9f9;
    border-radius: 8px;
}

.cs-checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #667eea;
}

.cs-checkbox-item label {
    flex: 1;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    margin: 0;
}

/* 操作按钮区域 */
.cs-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

/* ============================================================
   论坛系统样式
   ============================================================ */

/* 围脖主Tab栏 - 微博风格 */
.forum-tabs {
    display: flex;
    background: white;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

.forum-tab {
    flex: 1;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    color: #8c8c8c;
    font-size: 15px;
    position: relative;
}

.forum-tab.active {
    color: #ff8200;
    font-weight: 600;
}

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

.forum-tab i {
    margin-right: 6px;
}

/* 围脖话题栏 - 微博风格 */
.forum-sub-tabs {
    display: flex;
    padding: 12px 16px;
    gap: 10px;
    overflow-x: auto;
    background: white;
    border-bottom: 1px solid #f0f0f0;
}

.forum-sub-tabs::-webkit-scrollbar {
    display: none;
}

.forum-sub-tab {
    padding: 6px 18px;
    border-radius: 18px;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s;
    background: #f7f7f7;
    color: #666;
    border: 1px solid transparent;
}

.forum-sub-tab.active {
    background: #fff5eb;
    color: #ff8200;
    border-color: #ff8200;
    font-weight: 500;
}

/* 围脖内容区域 */
.forum-content {
    flex: 1;
    overflow-y: auto;
    background: #f7f7f7;
}

/* 围脖操作栏 */
.forum-action-bar {
    padding: 12px 16px;
    background: white;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
}

/* 热搜头部 */
.forum-trending-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 16px 14px 16px;
    background: white;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 600;
    font-size: 17px;
    color: #333;
}

.forum-trending-header .trending-tips {
    font-size: 12px;
    font-weight: normal;
    color: #8c8c8c;
}

/* 热搜列表 */
.trending-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: white;
}

.trending-item {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: background 0.2s;
}

.trending-item:hover {
    background: #f7f7f7;
}

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

.trending-rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #999;
    background: #f5f5f5;
    margin-right: 14px;
}

.trending-rank.top-3 {
    background: linear-gradient(135deg, #ff8200, #ff9500);
    color: white;
}

.trending-info {
    flex: 1;
}

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

.trending-meta {
    font-size: 12px;
    color: #999;
}

.trending-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #ff8200;
    color: white;
    margin-left: 10px;
}

/* 帖子列表 - 微博风格 */
.posts-list {
    background: #f7f7f7;
}

.post-item {
    background: white;
    padding: 16px 16px 12px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    border-radius: 0;
}

.post-item:hover {
    background: #fafafa;
}

/* 微博风格头部：头像+用户信息 */
.post-header-weibo {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.post-avatar-weibo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.post-user-info-weibo {
    flex: 1;
}

.post-username-weibo {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 2px;
}

.post-time-weibo {
    font-size: 12px;
    color: #999;
}

/* 微博风格正文 */
.post-content-weibo {
    padding-left: 52px;
}

.post-text-weibo {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 12px;
    word-break: break-word;
}

.post-image-container-weibo {
    margin-bottom: 12px;
    border-radius: 6px;
    overflow: hidden;
}

.post-image-weibo {
    max-width: 100%;
    display: block;
    border-radius: 6px;
}

/* 微博风格互动栏 */
.post-actions-weibo {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0 0 0;
    border-top: 1px solid #f0f0f0;
}

.post-action-btn-weibo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: #8c8c8c;
    font-size: 14px;
    border-radius: 4px;
}

.post-action-btn-weibo:hover {
    background: #f7f7f7;
}

.post-action-btn-weibo i {
    font-size: 16px;
}

.post-action-btn-weibo.repost-btn:hover {
    color: #00b84d;
}

.post-action-btn-weibo.comment-btn:hover {
    color: #ff8200;
}

.post-action-btn-weibo.like-btn:hover,
.post-action-btn-weibo.like-btn.liked {
    color: #ff8200;
}

.post-action-btn-weibo.liked i {
    color: #ff8200;
}

.post-delete-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #999;
    font-size: 13px;
    cursor: pointer;
    z-index: 2;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.post-delete-btn:hover {
    background: #ff8200;
    color: white;
}

/* 围脖空状态 */
.forum-empty {
    text-align: center;
    padding: 80px 20px;
    color: #8c8c8c;
    background: white;
    border-radius: 0;
}

.forum-empty i {
    font-size: 56px;
    margin-bottom: 20px;
    opacity: 0.4;
    color: #d0d0d0;
}

.forum-empty p {
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.6;
}

/* 发帖图片预览 */
.post-image-preview {
    position: relative;
    margin-top: 12px;
    display: inline-block;
}

.post-image-preview img {
    max-width: 150px;
    max-height: 150px;
    border-radius: 8px;
    object-fit: cover;
}

.remove-image-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f44336;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* ============================================================
   帖子详情页样式
   ============================================================ */

.post-detail-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.post-detail-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 70px;
}

.post-detail-main {
    background: white;
    padding: 16px;
    border-bottom: 8px solid #f5f5f5;
}

.post-author-row {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.post-author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
}

.post-author-info {
    flex: 1;
}

.post-author-name {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.post-author-signature {
    font-size: 13px;
    color: #999;
    margin-top: 2px;
}

.post-text {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 14px;
}

.post-text .mention {
    color: var(--theme-primary);
    cursor: pointer;
}

.post-detail-image {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 14px;
}

.post-time {
    font-size: 13px;
    color: #999;
    margin-bottom: 14px;
}

/* 帖子详情页互动栏 - 增加间距 */
.post-detail-screen .post-actions {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    padding: 16px 0;
    margin: 16px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.post-detail-screen .post-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s;
    color: #8c8c8c;
    font-size: 15px;
    border-radius: 6px;
}

.post-detail-screen .post-action-btn:hover {
    background: #f7f7f7;
}

.post-detail-screen .post-action-btn i {
    font-size: 18px;
}

.post-detail-screen .post-action-btn.repost-btn:hover {
    color: #00b84d;
}

.post-detail-screen .post-action-btn.comment-btn:hover {
    color: #ff8200;
}

.post-detail-screen .post-action-btn.like-btn:hover,
.post-detail-screen .post-action-btn.like-btn.liked {
    color: #ff8200;
}

.post-detail-screen .post-action-btn.liked i {
    color: #ff8200;
}

/* 评论区样式 */
.comments-section {
    background: white;
    padding: 16px;
}

.comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.comments-empty {
    text-align: center;
    padding: 30px;
    color: #999;
}

.comments-empty i {
    font-size: 36px;
    margin-bottom: 10px;
    opacity: 0.5;
}

.comment-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
}

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

.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
}

.comment-content {
    flex: 1;
}

.comment-header {
    font-size: 13px;
    margin-bottom: 4px;
}

.comment-author {
    font-weight: 500;
    color: #333;
}

.comment-reply-to {
    color: #999;
    margin-left: 6px;
}

.comment-text {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 6px;
}

.comment-image {
    max-width: 120px;
    border-radius: 6px;
    margin-bottom: 6px;
}

.comment-meta {
    font-size: 12px;
    color: #999;
    display: flex;
    gap: 12px;
}

.comment-delete-btn {
    cursor: pointer;
    color: #999;
    font-size: 12px;
    transition: all 0.2s;
}

.comment-delete-btn:hover {
    color: #f44336;
}

/* 评论输入框 */
.comment-input-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #eee;
    padding: 12px 16px;
    z-index: 100;
}

.reply-target {
    font-size: 12px;
    color: var(--theme-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reply-target i {
    cursor: pointer;
    color: #999;
}

.comment-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comment-image-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-input {
    flex: 1;
    height: 40px;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 0 16px;
    font-size: 14px;
    outline: none;
}

.comment-input:focus {
    border-color: var(--theme-primary);
}

.comment-image-preview {
    position: relative;
    margin-top: 10px;
    display: inline-block;
}

.comment-image-preview img {
    max-width: 80px;
    max-height: 80px;
    border-radius: 6px;
}

.comment-image-preview button {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f44336;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 10px;
}

/* ============================================================
   热搜话题页样式
   ============================================================ */

.topic-info-card {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
    padding: 20px 16px;
    margin: 0;
}

.topic-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.topic-description {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.5;
    margin-bottom: 12px;
}

.topic-stats {
    font-size: 13px;
    opacity: 0.8;
}

.topic-stats i {
    margin-right: 4px;
}

/* ============================================================
   转发弹窗样式（对齐 downloaded_site）
   ============================================================ */

.repost-modal .modal-body {
    padding: 0;
}

.repost-contact-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 12px 16px;
}

.repost-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.repost-contact-item:hover {
    background-color: #f5f5f5;
}

.repost-contact-item.selected {
    background-color: rgba(76, 175, 80, 0.1);
}

.repost-contact-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.repost-contact-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.repost-modal .modal-footer {
    padding: 12px 16px;
    border-top: 1px solid #eee;
}

.repost-modal input.input {
    margin: 0 16px 12px;
    width: calc(100% - 32px);
}

/* ============================================================
   帖子分享卡片样式（对齐 downloaded_site）
   ============================================================ */

.message.post-share-card {
    background-color: #fff;
    border: 1px solid #eee;
    width: 250px;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.message.post-share-card:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.post-share-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.post-share-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

.post-share-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.post-share-content {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    word-break: break-word;
    margin-bottom: 8px;
}

.post-share-footer {
    font-size: 11px;
    color: #999;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
}

.post-share-deleted {
    font-size: 13px;
    color: #999;
    text-align: center;
    padding: 20px 0;
}

/* ============================================================
   喵呜空间(Qzone)样式 - 对齐 downloaded_site
   ============================================================ */

/* 空间主页 */
#social-zone-screen {
    background-color: #f4f5f7;
}

#social-zone-screen.has-custom-bg {
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* 磨砂玻璃效果 */
.glass-card {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* 导航栏 - 对齐 downloaded_site */
.qz-navbar {
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0;
    height: 50px; 
    padding: 0 15px;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    z-index: 10; 
    color: white; 
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    transition: background-color 0.3s, color 0.3s;
}

.qz-navbar.scrolled { 
    background: #fff; 
    color: #000; 
    text-shadow: none; 
    border-bottom: 1px solid #eee; 
}

.qz-navbar i { 
    font-size: 20px; 
    cursor: pointer; 
}

.qz-navbar .back-btn {
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.qz-navbar .back-btn i {
    font-size: 16px;
}

.qz-navbar .nav-actions {
    display: flex;
    gap: 15px;
}

/* 说说卡片 */
.qz-card {
    background: white;
    margin-bottom: 10px;
    padding: 15px;
    transition: all 0.2s;
}

.qz-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* VIP 红名 */
.vip-red {
    color: #fb7299 !important;
}

/* SVIP 徽章 (对齐 downloaded_site) */
.qz-svip-badge {
    background: linear-gradient(90deg, #FFC107, #FF9800);
    color: white;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 800;
    font-style: italic;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.5);
    text-shadow: 0 2px 4px rgba(0,0,0,0.6) !important;
}

/* 1. 经典黄 (默认) */
.qz-svip-badge.style-yellow {
    background: linear-gradient(90deg, #FFC107, #FF9800);
    color: white;
    border: 1px solid rgba(255,255,255,0.5);
}

/* 2. 黑金尊贵版 */
.qz-svip-badge.style-black-gold {
    background: linear-gradient(135deg, #333 0%, #000 100%);
    color: #FFD700;
    border: 1px solid #FFD700;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.qz-svip-badge.style-black-gold i {
    color: #FFD700 !important;
    font-style: italic;
    font-weight: 900;
}

/* 3. 黑红霸气版 */
.qz-svip-badge.style-black-red {
    background: linear-gradient(135deg, #1a0000 0%, #2b0505 100%);
    color: #FF5252;
    border: 1px solid #FF5252;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.qz-svip-badge.style-black-red i {
    color: #FF1744 !important;
    text-shadow: 0 0 2px #FF1744;
}

/* --- 徽章容器 (对齐 downloaded_site) --- */
#qz-badge-container {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    margin-left: 5px;
    max-width: 100%;
    align-items: center;
}

#qz-badge-container span {
    background: rgba(255,255,255,0.8);
    border-radius: 3px;
    padding: 1px 3px;
    font-size: 12px;
    display: flex;
    align-items: center;
}

/* 黄钻图标 */
.qz-yellow-diamond {
    color: #FFD700;
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* 用户链接 */
.qz-user-link {
    color: #576b95;
    cursor: pointer;
}

.qz-user-link:hover {
    text-decoration: underline;
}

/* 操作按钮 */
.qz-action-btn {
    cursor: pointer;
    transition: transform 0.2s, color 0.2s;
}

.qz-action-btn:hover {
    transform: scale(1.1);
}

.qz-action-btn:active {
    transform: scale(0.95);
}

/* 删除按钮 */
.qz-delete-btn {
    opacity: 0.5;
    transition: opacity 0.2s;
}

.qz-delete-btn:hover {
    opacity: 1;
    color: #e53935 !important;
}

/* 评论区 */
.qz-comments-section {
    font-size: 13px;
}

.qz-comment-row {
    padding: 4px 0;
    transition: background-color 0.2s;
}

.qz-comment-row:hover {
    background-color: rgba(0,0,0,0.03);
}

/* 点赞显示 */
.qz-like-display {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

/* 手账预览 */
.qz-journal-preview {
    position: relative;
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: box-shadow 0.3s;
    overflow: hidden;
}

.qz-journal-preview:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.qz-journal-preview-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
    color: #333;
}

.qz-journal-preview-content {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

/* 手账模板背景 */
.qz-journal-preview.tmpl-grid-pink {
    background: linear-gradient(#fff5f5, #fff5f5) padding-box,
                repeating-linear-gradient(0deg, #ffc0cb 0, #ffc0cb 1px, transparent 1px, transparent 20px),
                repeating-linear-gradient(90deg, #ffc0cb 0, #ffc0cb 1px, transparent 1px, transparent 20px);
    background-size: 100% 100%, 20px 20px, 20px 20px;
}

.qz-journal-preview.tmpl-kraft {
    background: #d4a574;
    color: #3e2723;
}

.qz-journal-preview.tmpl-kraft .qz-journal-preview-title,
.qz-journal-preview.tmpl-kraft .qz-journal-preview-content {
    color: #3e2723;
}

.qz-journal-preview.tmpl-cloud {
    background: linear-gradient(180deg, #e3f2fd 0%, #bbdefb 100%);
}

.qz-journal-preview.tmpl-dot {
    background: radial-gradient(circle, #ddd 1px, transparent 1px);
    background-size: 10px 10px;
    background-color: #fafafa;
}

/* 图片网格 */
.qz-img-grid {
    display: grid;
    gap: 5px;
}

.qz-img-grid.cols-1 {
    grid-template-columns: 1fr;
}

.qz-img-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.qz-img-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.qz-img-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s;
}

.qz-img-grid img:hover {
    transform: scale(1.02);
}

/* 模拟图片 */
.sim-img {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    color: #1976d2;
    padding: 8px;
    aspect-ratio: 1;
}

/* Tab 栏 */
.qz-tab-item {
    transition: opacity 0.2s, transform 0.2s;
}

.qz-tab-item:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

.qz-tab-item.active {
    color: #576b95;
}

/* 内联评论输入 */
.qz-inline-input {
    transition: background-color 0.2s;
}

.qz-inline-input:hover {
    background-color: #ececec;
}

/* 快速发布区 */
.qz-quick-post-area {
    transition: box-shadow 0.2s;
}

.qz-quick-post-area:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* 手账详情弹窗 */
.journal-detail-modal {
    animation: journalSlideIn 0.3s ease;
}

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

/* 手账详情 - 模板样式 */
.journal-detail-modal.tmpl-grid-pink {
    background: linear-gradient(#fff5f5, #fff5f5) padding-box,
                repeating-linear-gradient(0deg, #ffc0cb 0, #ffc0cb 1px, transparent 1px, transparent 20px),
                repeating-linear-gradient(90deg, #ffc0cb 0, #ffc0cb 1px, transparent 1px, transparent 20px) !important;
    background-size: 100% 100%, 20px 20px, 20px 20px;
}

.journal-detail-modal.tmpl-kraft {
    background: #d4a574 !important;
    color: #3e2723;
}

.journal-detail-modal.tmpl-cloud {
    background: linear-gradient(180deg, #e3f2fd 0%, #bbdefb 100%) !important;
}

.journal-detail-modal.tmpl-dot {
    background: radial-gradient(circle, #ddd 1px, transparent 1px), #fafafa !important;
    background-size: 10px 10px;
}

/* ============================================================
   手账样式 - 完全对齐 downloaded_site
   ============================================================ */

/* --- 手账列表卡片样式 --- */
.journal-card {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: transform 0.2s;
    border-left: 4px solid #FFD700; /* 左侧金线 */
}
.journal-card:active { 
    transform: scale(0.98); 
}
.journal-title { 
    font-size: 16px; 
    font-weight: bold; 
    margin-bottom: 5px; 
    color: #333; 
}
.journal-date { 
    font-size: 12px; 
    color: #999; 
    display: flex; 
    justify-content: space-between; 
}
.journal-preview { 
    font-size: 13px; 
    color: #666; 
    margin-top: 8px; 
    line-height: 1.5; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden;
}

/* --- 💌 核心：信纸模板 (Templates) 💌 --- */

/* 1. 默认纯白 */
.tmpl-default { 
    background-color: #ffffff; 
    color: #333; 
}

/* 2. 粉色方格 (少女心) */
.tmpl-grid-pink {
    background-color: #fff0f5;
    background-image: 
        linear-gradient(#eecce0 1px, transparent 1px),
        linear-gradient(90deg, #eecce0 1px, transparent 1px);
    background-size: 20px 20px;
    color: #5a3d4a;
}

/* 3. 复古牛皮纸 (文艺) */
.tmpl-kraft {
    background-color: #f4e4bc;
    background-image: url("https://www.transparenttextures.com/patterns/cardboard-flat.png");
    color: #5d4037;
    font-family: "Courier New", Courier, monospace;
}

/* 4. 蓝天白云 */
.tmpl-cloud {
    background-color: #e3f2fd;
    background-image: radial-gradient(white 15%, transparent 16%), radial-gradient(white 15%, transparent 16%);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
}

/* 5. 点阵纸 (极简) */
.tmpl-dot {
    background-color: #fdfdfd;
    background-image: radial-gradient(#ccc 1px, transparent 1px);
    background-size: 20px 20px;
    color: #333;
}

/* --- 📱 动态流里的"迷你手账预览"样式 --- */
.qz-journal-preview {
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    max-height: 220px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.02);
    cursor: pointer;
}

/* 底部渐变遮罩，提示"点击阅读全文" */
.qz-journal-preview::after {
    content: '点击查看全文';
    position: absolute;
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 60px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.9) 80%);
    display: flex; 
    align-items: flex-end; 
    justify-content: center;
    padding-bottom: 10px;
    color: #576b95; 
    font-size: 12px; 
    font-weight: bold;
}

/* 适配不同信纸模板的遮罩颜色 */
.qz-journal-preview.tmpl-kraft::after {
    background: linear-gradient(to bottom, transparent, rgba(244,228,188,0.95) 80%);
    color: #5d4037;
}
.qz-journal-preview.tmpl-grid-pink::after {
    background: linear-gradient(to bottom, transparent, rgba(255,240,245,0.95) 80%);
    color: #c2185b;
}
.qz-journal-preview.tmpl-cloud::after {
    background: linear-gradient(to bottom, transparent, rgba(227,242,253,0.95) 80%);
    color: #1976d2;
}

/* 手账预览标题样式 */
.qz-journal-preview-title {
    font-size: 17px; 
    font-weight: bold; 
    margin-bottom: 8px;
    border-left: 4px solid rgba(0,0,0,0.2); 
    padding-left: 8px;
    color: inherit;
}

/* 手账预览内容 */
.qz-journal-preview-content {
    font-size: 14px;
    line-height: 1.6;
}

/* 让贴纸在预览里变小一点 */
.qz-journal-preview-content img {
    max-width: 60px !important; 
    height: auto !important;
}

/* --- 📝 通用手账纸张样式 --- */
.journal-paper-canvas {
    position: relative;
    width: 100%;
    min-height: 100%;
    padding: 25px 20px;
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: 0.5px;
    color: #333;
    white-space: pre-wrap; 
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

.journal-paper-canvas div,
.journal-paper-canvas p {
    margin: 0;
    padding: 0;
    min-height: 1em;
}

.journal-paper-canvas img {
    max-width: 100%;
    vertical-align: middle;
}

/* --- 字体类 --- */
.font-normal { 
    font-family: sans-serif !important;
}
.font-hand { 
    font-family: 'Ma Shan Zheng', 'KaiTi', '楷体', cursive !important;
}
.font-cute { 
    font-family: 'ZCOOL KuaiLe', 'YouYuan', '幼圆', cursive !important;
}
.font-handwrite {
    font-family: 'Comic Sans MS', cursive, sans-serif !important;
    font-style: italic;
}
.font-elegant {
    font-family: 'Times New Roman', Georgia, serif !important;
    font-style: italic;
}

/* --- 贴纸样式 --- */
.journal-sticker-img {
    display: inline-block; 
    width: 60px; 
    height: 60px; 
    vertical-align: middle; 
    margin: 2px;
    transition: transform 0.2s; 
    cursor: grab;
}
.journal-sticker-img:hover { 
    transform: scale(1.1); 
}

/* 手账贴纸(emoji版) */
.journal-sticker {
    display: inline-block;
    vertical-align: middle;
    font-size: 24px;
    cursor: default;
}

/* --- 日期章样式 --- */
.journal-stamp {
    display: inline-block !important; 
    border: 2px solid #ef5350; 
    color: #ef5350;
    padding: 2px 8px; 
    border-radius: 8px; 
    font-weight: bold; 
    transform: rotate(-5deg); 
    margin: 5px; 
    font-family: 'Courier New', monospace;
    vertical-align: middle;
    background: transparent;
}

/* --- 胶带样式库 --- */
.journal-washi-tape {
    display: block; 
    width: 100%; 
    height: 18px; 
    margin: 8px 0; 
    opacity: 0.9; 
    border-radius: 2px;
}

.tape-pink-stripe {
    background-image: repeating-linear-gradient(45deg, #ffcdd2 0, #ffcdd2 10px, #fff 10px, #fff 20px);
}

.tape-blue-stripe {
    background-image: repeating-linear-gradient(-45deg, #b3e5fc 0, #b3e5fc 10px, #e1f5fe 10px, #e1f5fe 20px);
}

.tape-mint-dot {
    background-color: #b2dfdb;
    background-image: radial-gradient(#fff 20%, transparent 20%);
    background-size: 10px 10px;
}

.tape-lemon-grid {
    background-color: #fff9c4;
    background-image: 
        linear-gradient(#fbc02d 1px, transparent 1px),
        linear-gradient(90deg, #fbc02d 1px, transparent 1px);
    background-size: 15px 15px;
}

.tape-rainbow {
    background: linear-gradient(to right, #ff9a9e 0%, #fecfef 99%, #a18cd1 100%);
}

.tape-kraft {
    background-color: #d7ccc8;
}

/* --- 📝 高颜值便利贴样式 --- */
.journal-note-wrapper {
    display: inline-block;
    vertical-align: top;
    margin: 15px 10px;
    padding: 0;
    position: relative;
}

.journal-note-box {
    width: 180px;
    min-height: 100px;
    padding: 20px 15px 15px;
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    font-family: 'Ma Shan Zheng', cursive;
    word-wrap: break-word;
    outline: none;
    position: relative;
    box-shadow: 3px 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s;
}
.journal-note-box:hover {
    transform: scale(1.02);
    z-index: 10;
}

/* 便利贴 - 柠檬黄 */
.note-yellow {
    background-color: #fff9c4;
    background-image: linear-gradient(to bottom right, #fff9c4, #fff176);
    transform: rotate(-2deg);
    border-radius: 2px;
}

/* 便利贴 - 少女粉 */
.note-pink {
    background-color: #fce4ec;
    background-image: radial-gradient(#f48fb1 15%, transparent 16%);
    background-size: 15px 15px;
    color: #880e4f;
    transform: rotate(2deg);
    border-radius: 8px;
}

/* 便利贴 - 蓝色网格 */
.note-blue-grid {
    background-color: #fff;
    background-image: 
        linear-gradient(#e1f5fe 1px, transparent 1px),
        linear-gradient(90deg, #e1f5fe 1px, transparent 1px);
    background-size: 20px 20px;
    color: #0277bd;
    transform: rotate(1deg);
    border: 1px solid #b3e5fc;
}

/* 简化便利贴 */
.journal-note {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 4px;
    transform: rotate(-2deg);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    margin: 5px;
}

/* --- 工具栏按钮 --- */
.tool-btn {
    transition: background-color 0.2s, transform 0.2s;
}

.tool-btn:hover {
    background-color: #e3f2fd !important;
    transform: scale(1.05);
}

.tool-btn:active {
    transform: scale(0.95);
}

/* contenteditable 占位符 */
[contenteditable=true]:empty:before {
    content: attr(placeholder);
    color: #aaa;
    pointer-events: none;
}

/* --- 模板选择器样式 --- */
.paper-swatch {
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    border: 2px solid #ddd; 
    cursor: pointer; 
    flex-shrink: 0;
    transition: all 0.2s;
}
.paper-swatch.selected { 
    border-color: #576b95; 
    transform: scale(1.1); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
}

/* --- 手账详情弹窗样式 --- */
.journal-detail-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 30px 20px;
}

.journal-detail-title {
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: bold;
}

.journal-detail-date {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 20px;
}

/* 贴纸选择面板样式 */
.sticker-select-item {
    width: 50px; 
    height: 50px; 
    margin-right: 10px; 
    cursor: pointer; 
    border-radius: 4px; 
    border: 2px solid transparent;
    transition: all 0.2s;
}
.sticker-select-item:hover { 
    border-color: #FFD700; 
    background: #fff3cd; 
}

/* 胶带选择面板样式 */
.tape-select-item {
    display: inline-block; 
    width: 80px; 
    height: 30px; 
    margin-right: 10px; 
    cursor: pointer; 
    border-radius: 2px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.1s;
}
.tape-select-item:hover { 
    transform: scale(1.05); 
}
.tape-select-item:active { 
    transform: scale(0.95); 
}

/* 便利贴选择面板样式 */
.note-select-item {
    display: inline-block; 
    width: 40px; 
    height: 40px; 
    margin-right: 15px; 
    cursor: pointer; 
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.1s; 
    border: 1px solid #ddd;
}
.note-select-item:hover { 
    transform: scale(1.1) rotate(-5deg); 
}

/* 格式按钮样式 */
.format-btn {
    width: 32px; 
    height: 32px; 
    border-radius: 4px; 
    background: #f5f5f5;
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: #555; 
    cursor: pointer; 
    font-size: 14px; 
    transition: all 0.2s;
}
.format-btn:active, .format-btn.active {
    background: #333; 
    color: #fff;
}

/* ============================================================
   锁屏相册样式
   ============================================================ */

#lock-screen-photos-screen .photo-grid-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: #ddd;
}

#lock-screen-photos-screen .photo-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

#lock-screen-photos-screen .photo-grid-item:hover img {
    transform: scale(1.05);
}

#lock-screen-photos-screen .photo-delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

#lock-screen-photos-screen .photo-grid-item:hover .photo-delete-btn {
    opacity: 1;
}

/* ========== 喵呜空间装修设置样式 (对齐 downloaded_site) ========== */

/* 颜色选择球 */
.color-swatch-list { display: flex; gap: 15px; overflow-x: auto; padding: 5px; }
.color-swatch { 
    width: 40px; height: 40px; border-radius: 50%; border: 2px solid #eee; 
    cursor: pointer; position: relative; flex-shrink: 0;
    transition: transform 0.2s, box-shadow 0.2s;
}
.color-swatch:hover {
    transform: scale(1.05);
}
.color-swatch.active::after {
    content: '✔'; position: absolute; top: 50%; left: 50%; 
    transform: translate(-50%, -50%); color: white; text-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* 徽章选择网格 */
.badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.badge-option { 
    display: flex; flex-direction: column; align-items: center; 
    padding: 10px; border: 1px solid #eee; border-radius: 8px; cursor: pointer;
    transition: all 0.2s;
}
.badge-option.selected { border-color: #FF9800; background: #FFF3E0; }
.badge-icon { font-size: 20px; margin-bottom: 5px; }

/* 各种钻的颜色 */
.diamond-yellow { color: #FFD700; }
.diamond-red { color: #FF5252; }
.diamond-green { color: #69F0AE; }
.diamond-blue { color: #40C4FF; }
.diamond-purple { color: #E040FB; }
.icon-star { color: #FFC107; }

/* --- 空间主题预设 (完全对齐 downloaded_site) --- */

/* 1. 少女粉主题 */
.qz-theme-pink .qz-tab-icon { color: #FF80AB !important; }
.qz-theme-pink .qz-tab-item { color: #F06292 !important; }
.qz-theme-pink .qz-action-btn { color: #F48FB1 !important; }
.qz-theme-pink #qz-add-post-btn { color: #EC407A !important; }

/* 2. 暗黑金主题 */
#social-zone-screen.qz-theme-darkgold { background-color: #212121 !important; }
.qz-theme-darkgold .qz-card, 
.qz-theme-darkgold .qz-header-wrapper, 
.qz-theme-darkgold .qz-tab-bar, 
.qz-theme-darkgold .qz-navbar.scrolled { 
    background-color: #333 !important; 
    color: #d4af37 !important; 
}
.qz-theme-darkgold .qz-card-name,
.qz-theme-darkgold .qz-card-content,
.qz-theme-darkgold .qz-content, 
.qz-theme-darkgold .qz-tab-item { color: #d4af37 !important; }
.qz-theme-darkgold .qz-action-btn { color: #999 !important; }
.qz-theme-darkgold .qz-navbar { color: #d4af37 !important; }
.qz-theme-darkgold .qz-quick-post-area { background-color: #333 !important; }
.qz-theme-darkgold .qz-card-time,
.qz-theme-darkgold .qz-card-device { color: #888 !important; }

/* 暗黑金主题下的磨砂效果 */
.qz-theme-darkgold .glass-card {
    background-color: rgba(30, 30, 30, 0.7) !important;
    border: 1px solid rgba(255, 215, 0, 0.1) !important;
    color: #d4af37 !important;
}

/* 暗黑金主题评论区 */
.qz-theme-darkgold .qz-comments-section,
.qz-theme-darkgold .qz-inline-input {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 215, 0, 0.1);
    color: #d4af37 !important;
}

/* 暗黑金主题用户链接 */
.qz-theme-darkgold .qz-user-link { color: #fdd835 !important; }
.qz-theme-darkgold .qz-like-display i { color: #d4af37 !important; }

/* 暗黑金主题返回顶部按钮 */
.qz-theme-darkgold .qz-back-to-top {
    background-color: rgba(50, 50, 50, 0.85);
    color: #d4af37;
    border: 1px solid #d4af37;
}

/* 3. 天空蓝主题 */
.qz-theme-blue .qz-navbar.scrolled { background-color: #E3F2FD !important; }
.qz-theme-blue .qz-tab-icon { color: #2196F3 !important; }
.qz-theme-blue .qz-action-btn { color: #64B5F6 !important; }

/* === 强力磨砂玻璃卡片样式 (对齐 downloaded_site) === */
.glass-card {
    background-color: rgba(255, 255, 255, 0.1) !important; 
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #333 !important; 
}

/* 有自定义背景时的评论区 */
#social-zone-screen.has-custom-bg .qz-comments-section,
#social-zone-screen.has-custom-bg .qz-inline-input {
    background-color: rgba(255, 255, 255, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #333 !important;
}

/* 暗黑金 + 自定义背景 */
#social-zone-screen.has-custom-bg.qz-theme-darkgold .qz-comments-section,
#social-zone-screen.has-custom-bg.qz-theme-darkgold .qz-inline-input {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 215, 0, 0.1);
    color: #d4af37 !important;
}
#social-zone-screen.has-custom-bg.qz-theme-darkgold .qz-user-link {
    color: #fdd835 !important;
}
#social-zone-screen.has-custom-bg.qz-theme-darkgold .qz-like-display i {
    color: #d4af37 !important;
}

/* SVIP 样式选项 */
.svip-style-opt {
    transition: all 0.2s;
}
.svip-style-opt:hover {
    transform: scale(1.05);
}
.svip-style-opt.active {
    box-shadow: 0 0 0 2px #2196F3;
    transform: scale(1.05);
}

/* ========== 漂流瓶 (Cosmic Echo) 样式 ========== */
.drift-bottle-screen {
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    position: relative;
    overflow: hidden;
    font-family: 'Nunito', "PingFang SC", sans-serif;
    color: white;
}

/* 星空背景动画 */
.drift-bottle-screen .stars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.drift-bottle-screen .star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle var(--duration) ease-in-out infinite;
    opacity: 0;
}

@keyframes twinkle {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: var(--opacity); transform: scale(1); }
    100% { opacity: 0; transform: scale(0.5); }
}

/* 中心星球舞台 */
.drift-bottle-screen .cosmos-stage {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
    margin-bottom: 80px;
}

.drift-bottle-screen .planet-core {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 
        inset -10px -10px 20px rgba(0,0,0,0.5),
        inset 10px 10px 20px rgba(255,255,255,0.2),
        0 0 30px rgba(118, 75, 162, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: floatPlanet 6s ease-in-out infinite;
}

/* 环绕轨道 */
.drift-bottle-screen .orbit-ring {
    position: absolute;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.drift-bottle-screen .orbit-1 {
    width: 220px;
    height: 220px;
    animation: spinOrbit 20s linear infinite;
}

.drift-bottle-screen .orbit-2 {
    width: 320px;
    height: 320px;
    animation: spinOrbit 30s linear infinite reverse;
    border-color: rgba(255,255,255,0.05);
}

/* 轨道上的粒子 */
.drift-bottle-screen .orbit-dot {
    position: absolute;
    top: 0;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
    transform: translate(-50%, -50%);
}

@keyframes floatPlanet {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes spinOrbit {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 文字排版 */
.drift-bottle-screen .cosmos-title {
    margin-top: 40px;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 6px;
    text-transform: uppercase;
    background: linear-gradient(to right, #fff, #a1c4fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(161, 196, 253, 0.3);
}

.drift-bottle-screen .cosmos-subtitle {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 2px;
}

/* 底部操作按钮 */
.drift-bottle-screen .cosmos-actions {
    position: absolute;
    bottom: 120px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 30px;
    z-index: 10;
    padding: 0 30px;
    box-sizing: border-box;
}

.drift-bottle-screen .cosmos-btn {
    flex: 1;
    max-width: 150px;
    height: 60px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.drift-bottle-screen .cosmos-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
}

.drift-bottle-screen .cosmos-btn i {
    font-size: 18px;
    color: #a1c4fd;
}

.drift-bottle-screen .cosmos-btn span {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
}

/* 输入面板 */
.drift-bottle-screen .bottle-input-area {
    position: absolute;
    bottom: -400px;
    left: 0;
    width: 100%;
    padding: 20px;
    border-radius: 20px 20px 0 0;
    transition: bottom 0.3s ease;
    z-index: 20;
    background: rgba(30, 30, 35, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.1);
    color: white;
    box-sizing: border-box;
}

.drift-bottle-screen .bottle-input-area.active {
    bottom: 0 !important;
}

.drift-bottle-screen .bottle-input-area h3 {
    color: white !important;
    margin-bottom: 15px;
    font-weight: 600;
}

.drift-bottle-screen .bottle-input-area label {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    display: block;
    margin-bottom: 5px;
}

.drift-bottle-screen .bottle-input-area .form-group {
    margin-bottom: 10px;
}

.drift-bottle-screen .bottle-input-area .form-select,
.drift-bottle-screen .bottle-input-area .form-input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px;
    color: white !important;
    font-size: 14px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.drift-bottle-screen .bottle-input-area .form-textarea {
    width: 100%;
    height: 80px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px;
    color: white !important;
    font-size: 14px;
    margin-bottom: 15px;
    resize: none;
    box-sizing: border-box;
}

.drift-bottle-screen .bottle-input-area .form-textarea::placeholder,
.drift-bottle-screen .bottle-input-area .form-input::placeholder {
    color: rgba(255,255,255,0.3);
}

.drift-bottle-screen .bottle-input-area .btn-group {
    display: flex;
    gap: 10px;
}

.drift-bottle-screen .bottle-input-area .btn-primary {
    flex: 1;
    padding: 12px;
    background-color: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.drift-bottle-screen .bottle-input-area .btn-secondary {
    flex: 1;
    padding: 12px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

/* 结果弹窗 */
.drift-bottle-screen .bottle-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
}

.drift-bottle-screen .bottle-paper {
    background-color: rgba(30, 30, 35, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #eee;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    padding: 25px;
    max-width: 320px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
}

.drift-bottle-screen .bottle-loading {
    text-align: center;
    padding: 40px 20px;
}

.drift-bottle-screen .bottle-loading i {
    font-size: 30px;
    color: #a1c4fd;
}

.drift-bottle-screen .bottle-loading p {
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.8);
}

.drift-bottle-screen .bottle-result {
    text-align: center;
}

.drift-bottle-screen .bottle-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #a1c4fd;
    box-shadow: 0 0 20px rgba(161, 196, 253, 0.3);
    background-color: #2c2c35;
    margin-bottom: 15px;
    object-fit: cover;
}

.drift-bottle-screen .bottle-info {
    margin-bottom: 15px;
}

.drift-bottle-screen .bottle-name {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.drift-bottle-screen .bottle-location {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin: 0;
}

.drift-bottle-screen .bottle-info-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 15px;
    margin-top: 15px;
    text-align: left;
}

.drift-bottle-screen .bottle-text {
    color: #ddd;
    font-size: 15px;
    line-height: 1.6;
    font-style: italic;
    margin: 0 0 15px 0;
}

.drift-bottle-screen .bottle-summary {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.drift-bottle-screen .bottle-summary p {
    margin: 5px 0;
}

.drift-bottle-screen .bottle-summary strong {
    color: rgba(255, 255, 255, 0.8);
}

.drift-bottle-screen .bottle-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.drift-bottle-screen .btn-reply {
    flex: 1;
    padding: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.drift-bottle-screen .btn-throw-back {
    flex: 1;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
}

/* ========== 漂流瓶 V2 - 现代化设计 ========== */
.drift-bottle-screen-v2 {
    position: relative;
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    overflow: hidden;
    color: white;
}

/* 动态背景层 */
.bottle-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.bottle-gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: floatOrb 20s ease-in-out infinite;
}

.bottle-gradient-orb.orb-1 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.bottle-gradient-orb.orb-2 {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    bottom: -50px;
    right: -50px;
    animation-delay: 7s;
}

.bottle-gradient-orb.orb-3 {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 14s;
}

@keyframes floatOrb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -30px) scale(1.1); }
    50% { transform: translate(-20px, 20px) scale(0.9); }
    75% { transform: translate(20px, 30px) scale(1.05); }
}

/* 粒子背景 */
.bottle-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.bottle-particles .particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) translateX(20px);
        opacity: 0;
    }
}

/* 顶部导航 */
.bottle-header {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    height: 50px;
}

.bottle-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.bottle-back-btn:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
}

.bottle-header-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* 主内容区 */
.bottle-main-content {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* 标题区域 */
.bottle-title-section {
    text-align: center;
    margin-bottom: 50px;
}

.bottle-icon-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
}

.bottle-icon-wrapper i {
    position: relative;
    z-index: 2;
    font-size: 40px;
    color: white;
    animation: floatIcon 3s ease-in-out infinite;
}

.bottle-icon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.6) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes pulseGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.3; }
}

.bottle-main-title {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0 0 10px 0;
    background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bottle-main-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
    line-height: 1.6;
}

/* 操作卡片 */
.bottle-action-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 350px;
}

.bottle-action-card {
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.bottle-action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

.bottle-action-card:active {
    transform: scale(0.98);
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
}

.bottle-action-card:active::before {
    opacity: 1;
}

.bottle-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.bottle-card-icon i {
    font-size: 24px;
    color: white;
}

.bottle-action-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: white;
}

.bottle-action-card p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.5;
}

.bottle-card-arrow {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.3);
    font-size: 18px;
    transition: all 0.3s;
}

.bottle-action-card:active .bottle-card-arrow {
    right: 20px;
    color: rgba(255, 255, 255, 0.6);
}

/* 输入面板 */
.bottle-input-panel {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    background: linear-gradient(to top, #1a1a2e 0%, #16213e 100%);
    border-radius: 30px 30px 0 0;
    padding: 20px;
    z-index: 1000;
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}

.bottle-input-panel.active {
    bottom: 0;
}

.bottle-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.bottle-panel-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: white;
}

.bottle-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.bottle-close-btn:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
}

.bottle-panel-content {
    margin-bottom: 20px;
}

.bottle-form-group {
    margin-bottom: 20px;
}

.bottle-form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    font-weight: 500;
}

.bottle-form-group label i {
    color: rgba(102, 126, 234, 0.8);
}

.bottle-select,
.bottle-input,
.bottle-textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 12px 16px;
    color: white;
    font-size: 14px;
    transition: all 0.3s;
}

.bottle-select:focus,
.bottle-input:focus,
.bottle-textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.bottle-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.bottle-select option {
    background: #1a1a2e;
    color: white;
}

.bottle-textarea {
    resize: none;
    line-height: 1.6;
    font-family: inherit;
}

::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.bottle-hint-text {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin-top: 10px;
}

.bottle-hint-text i {
    color: rgba(102, 126, 234, 0.8);
    margin-top: 2px;
}

.bottle-panel-actions {
    display: flex;
    gap: 12px;
}

.bottle-btn {
    flex: 1;
    height: 48px;
    border-radius: 12px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bottle-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.bottle-btn-primary:active {
    transform: translateY(2px);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

.bottle-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.bottle-btn-secondary:active {
    background: rgba(255, 255, 255, 0.15);
}

/* 结果弹窗 */
.bottle-modal-v2 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s;
}

.bottle-modal-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 24px;
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 加载状态 */
.bottle-loading-state {
    padding: 60px 30px;
    text-align: center;
}

.bottle-loading-spinner {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
}

.bottle-loading-spinner i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    color: white;
    z-index: 2;
}

.spinner-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    border-top-color: rgba(102, 126, 234, 0.8);
    border-radius: 50%;
    animation: spinRing 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spinner-ring:nth-child(1) {
    animation-delay: 0s;
}

.spinner-ring:nth-child(2) {
    animation-delay: 0.3s;
    border-top-color: rgba(118, 75, 162, 0.8);
}

.spinner-ring:nth-child(3) {
    animation-delay: 0.6s;
    border-top-color: rgba(161, 196, 253, 0.8);
}

@keyframes spinRing {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.bottle-loading-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

/* 结果卡片 */
.bottle-result-card {
    position: relative;
    padding: 30px;
}

.bottle-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
}

.bottle-modal-close:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
}

.bottle-result-header {
    text-align: center;
    margin-bottom: 25px;
}

.bottle-result-avatar-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 16px;
}

.bottle-result-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 2;
}

.bottle-avatar-ring {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    opacity: 0.3;
    animation: pulseRing 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes pulseRing {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.1;
    }
}

.bottle-result-name {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: white;
}

.bottle-result-meta {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.bottle-result-meta i {
    color: rgba(102, 126, 234, 0.8);
}

/* 消息内容 */
.bottle-result-message {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.bottle-message-icon {
    position: absolute;
    top: 20px;
    left: 20px;
    color: rgba(102, 126, 234, 0.3);
    font-size: 20px;
}

.bottle-message-content {
    padding-left: 30px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
    font-style: italic;
}

/* 详情部分 */
.bottle-result-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.bottle-detail-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 14px;
}

.bottle-detail-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 6px;
}

.bottle-detail-label i {
    color: rgba(102, 126, 234, 0.8);
}

.bottle-detail-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin: 0;
}

/* 操作按钮 */
.bottle-result-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bottle-result-btn {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bottle-result-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.bottle-result-btn-primary:active {
    transform: translateY(2px);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

.bottle-result-btn-ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.bottle-result-btn-ghost:active {
    background: rgba(255, 255, 255, 0.05);
}

/* ========================================= */
/* ❤️ 情侣默契大挑战 - 完整样式 (V-Final) ❤️ */
/* ========================================= */

#couple-game-screen {
    background-color: #fce4ec;
}

/* --- 1. 游戏容器与基础布局 --- */
.cp-game-container {
    padding: 20px;
    height: 100%;
    overflow-y: auto;
    background-color: #fce4ec;
    display: flex;
    flex-direction: column;
}

/* 步骤容器 (默认隐藏) */
.cp-step-container {
    display: none;
    animation: fadeIn 0.5s;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}
.cp-step-container.active { display: block; }

/* 题目卡片区域 */
.cp-question-card { text-align: center; margin-top: 20px; }
.cp-question-text {
    font-size: 22px; font-weight: bold; color: #333;
    margin-bottom: 25px; min-height: 60px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1.4;
}

/* 进度条 */
.cp-progress-bar {
    height: 6px; background: #eee; margin-bottom: 10px;
    border-radius: 3px; overflow: hidden;
}
.cp-progress-fill {
    height: 100%; background: var(--theme-primary, #7b1fa2); width: 0%; transition: width 0.3s;
}

/* 选项按钮 (答题时) */
.cp-opt-btn {
    display: block; width: 100%; padding: 12px 15px; margin-bottom: 10px;
    border: 1px solid #ddd; border-radius: 50px; background: white;
    cursor: pointer; text-align: center; transition: all 0.2s;
    font-size: 15px; color: #555;
}
.cp-opt-btn:hover { background: #f5f5f5; }
.cp-opt-btn.selected { 
    background: var(--theme-primary, #7b1fa2); 
    color: white; border-color: var(--theme-primary, #7b1fa2); 
    font-weight: bold;
}

/* 皮肤选择器容器 */
.cp-skin-selector { 
    display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; 
    padding: 10px; background: rgba(255,255,255,0.6); border-radius: 30px;
}
.cp-skin-btn { 
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer; 
    border: 2px solid rgba(255,255,255,0.5); box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.cp-skin-btn.active { transform: scale(1.25); border-color: #333; z-index: 1; }

/* 截图区域容器 */
#cp-capture-area { 
    padding: 20px; 
    border-radius: 12px;
    background: white; 
    width: 100%;
    box-sizing: border-box;
}

/* --- 2. 结果卡片通用结构 --- */
.cp-result-card {
    border-radius: 12px; overflow: hidden;
    border: 1px solid #e0e0e0; 
    box-shadow: 0 8px 25px rgba(0,0,0,0.08); 
    background: white;
}

.cp-rc-header { padding: 25px 20px; text-align: center; color: white; position: relative; }
.cp-rc-title { font-size: 20px; font-weight: 900; margin-bottom: 5px; letter-spacing: 1px; }
.cp-rc-meta { font-size: 12px; opacity: 0.8; }

.cp-rc-avatars { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 15px; }
.cp-rc-avatar { 
    width: 64px; height: 64px; border-radius: 50%; border: 3px solid white; 
    background: #ddd; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.cp-rc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cp-rc-vs { font-size: 20px; font-weight: bold; opacity: 0.6; color: white; }

.cp-rc-body { padding: 20px; background: #f9f9f9; }

/* 每一道题的行 */
.cp-rc-row { 
    background: white; border-radius: 10px; margin-bottom: 15px; padding: 15px; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.03); border: 1px solid #f0f0f0;
}

.cp-rc-q { 
    font-weight: bold; color: #444; margin-bottom: 10px; font-size: 15px;
    line-height: 1.4; border-bottom: 1px dashed #eee; padding-bottom: 8px;
}

/* 填空题：左右对话模式 */
.cp-ans-row {
    display: flex; justify-content: space-between; align-items: stretch;
    font-size: 14px; margin-top: 5px; line-height: 1.5;
}
.cp-ans-user { 
    flex: 1; text-align: left; color: #1976d2; 
    padding-right: 15px; border-right: 1px solid #eee; word-wrap: break-word; 
}
.cp-ans-ai { 
    flex: 1; text-align: right; color: #e91e63; 
    padding-left: 15px; word-wrap: break-word; 
}

/* 选择题：标签模式 */
.cp-opt-tag {
    display: inline-block;
    padding: 4px 10px; border-radius: 12px;
    background: #f5f5f5; color: #999;
    font-size: 12px; margin: 0 6px 6px 0;
    border: 1px solid transparent;
}
/* 用户选的 */
.cp-opt-tag.active-user { background: #e3f2fd; color: #1565c0; border-color: #bbdefb; }
/* AI选的 */
.cp-opt-tag.active-ai { background: #fce4ec; color: #c2185b; border-color: #f8bbd0; }
/* 默契 (都选了) */
.cp-match-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    background: #e1bee7; color: #7b1fa2; font-weight: bold;
    border: 1px solid #ba68c8 !important; padding: 4px 12px;
    position: static !important; box-shadow: 0 2px 4px rgba(123, 31, 162, 0.1);
    max-width: 100% !important;
    white-space: normal !important;
    height: auto !important;
    border-radius: 12px;
    font-size: 12px;
    margin: 0 6px 6px 0;
}

/* AI 吐槽气泡 */
.cp-ai-comment { 
    font-size: 12px; color: #777; font-style: italic; margin-top: 8px; 
    background: rgba(0,0,0,0.03); padding: 6px 10px; border-radius: 6px; 
}

/* ========================================= */
/* 🎨 7大皮肤完整样式定义 (Skins) 🎨 */
/* ========================================= */

/* 1. 经典紫 (Default) */
.skin-default { background: #f3e5f5; }
.skin-default .cp-rc-header { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }

/* 2. 甜蜜粉 (Pink) */
.skin-pink { background-color: #fff0f5; }
.skin-pink .cp-result-card { border: 2px solid #f8bbd0; border-radius: 24px; box-shadow: none; }
.skin-pink .cp-rc-header { background: #f48fb1; color: #fff; border-bottom: 4px dotted #fff; }
.skin-pink .cp-rc-body { background: #fff0f5; }
.skin-pink .cp-rc-row { border: 1px solid #fce4ec; background: #fff; border-radius: 16px; }
.skin-pink .cp-rc-q { color: #d81b60; border-bottom-color: #f8bbd0; }
.skin-pink .cp-ans-user { color: #d81b60; border-right-color: #f8bbd0; }
.skin-pink .cp-ans-ai { color: #880e4f; }
.skin-pink .cp-match-tag { background: #f8bbd0; color: #c2185b; border-color: #f06292; }

/* 3. 极客黑 (Dark) */
.skin-dark { background-color: #212121; }
.skin-dark .cp-result-card { border: 1px solid #444; background: #333; }
.skin-dark .cp-rc-header { background: #111; color: #ffd700; border-bottom: 1px solid #333; }
.skin-dark .cp-rc-body { background: #212121; }
.skin-dark .cp-rc-row { background: #2c2c2c; color: #ccc; border: 1px solid #444; }
.skin-dark .cp-rc-q { color: #eee; border-bottom-color: #444; }
.skin-dark .cp-ans-user { color: #64b5f6; border-right-color: #444; }
.skin-dark .cp-ans-ai { color: #f48fb1; }
.skin-dark .cp-ai-comment { background: #333; color: #999; }
.skin-dark .cp-opt-tag { background: #333; color: #777; border-color: #444; }
.skin-dark .cp-match-tag { background: #4a148c; color: #e040fb; border-color: #7b1fa2; }

/* 4. 复古纸 (Paper) */
.skin-paper { background-color: #fdfbf7; }
.skin-paper .cp-result-card { border: 4px double #5d4037; border-radius: 2px; }
.skin-paper .cp-rc-header { background: #d7ccc8; color: #3e2723; border-bottom: 2px solid #5d4037; }
.skin-paper .cp-rc-body { background: #efebe9; }
.skin-paper .cp-rc-row { background: #fff; border: 1px solid #a1887f; border-radius: 0; box-shadow: 2px 2px 0 rgba(93, 64, 55, 0.2); }
.skin-paper .cp-rc-q { color: #3e2723; font-family: "Courier New", serif; font-weight: 900; border-bottom: 1px solid #a1887f; }
.skin-paper .cp-ans-user { color: #3e2723; border-right: 1px dashed #a1887f; font-family: "Courier New", serif; }
.skin-paper .cp-ans-ai { color: #5d4037; font-family: "Courier New", serif; }
.skin-paper .cp-match-tag { background: #efebe9; color: #b71c1c; border: 1px double #b71c1c; }

/* 5. 软萌拟态 (Neumorphism) */
.skin-neumorphism { background-color: #e0e5ec; }
.skin-neumorphism .cp-result-card { border: 1px solid rgba(255, 255, 255, 0.4) !important; background: #e0e5ec; box-shadow: -4px -4px 10px #ffffff, 4px 4px 10px #a3b1c6 !important; border-radius: 20px; }
.skin-neumorphism .cp-rc-header { background: transparent; color: #4d5b6d; padding-bottom: 10px; }
.skin-neumorphism .cp-rc-body { background: #e0e5ec; }
.skin-neumorphism .cp-rc-row { background: #e0e5ec; box-shadow: 5px 5px 10px #b8b9be, -5px -5px 10px #ffffff; border-radius: 15px; color: #555; border: 1px solid rgba(255, 255, 255, 0.4) !important; }
.skin-neumorphism .cp-rc-q { color: #444; border-bottom: 1px solid rgba(0,0,0,0.05); }
.skin-neumorphism .cp-opt-tag { background: #e0e5ec; box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #ffffff; border-radius: 10px; color: #888; }
.skin-neumorphism .cp-match-tag { color: #9C27B0; background: #e0e5ec; border: none; box-shadow: inset 2px 2px 5px #b8b9be, inset -2px -2px 5px #ffffff; }

/* 6. 仲夏夜 (Summer) */
.skin-summer { background-color: #fff9c4; }
.skin-summer .cp-result-card { border: 3px solid #ffab91; background: #fff; border-radius: 0 20px 0 20px; box-shadow: 6px 6px 0 rgba(255, 171, 145, 0.4); }
.skin-summer .cp-rc-header { background: linear-gradient(to right, #ffab91, #ffcc80); color: #bf360c; }
.skin-summer .cp-rc-body { background: #fffde7; }
.skin-summer .cp-rc-row { background: #ffffff; border: 2px dashed #81d4fa; border-radius: 12px; box-shadow: none; }
.skin-summer .cp-rc-q { color: #f57f17; font-weight: bold; border-bottom-color: #81d4fa; }
.skin-summer .cp-ans-user { color: #0288d1; border-right-color: #b3e5fc; }
.skin-summer .cp-ans-ai { color: #d84315; }
.skin-summer .cp-match-tag { background: #c8e6c9; color: #2e7d32; border: 2px solid #81c784; }

/* 7. 富士山下 (Snow) */
.skin-snow { background-color: #e3f2fd; }
.skin-snow .cp-result-card { border: 1px solid #bbdefb; background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); border-radius: 12px; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); }
.skin-snow .cp-rc-header { background: linear-gradient(180deg, #bbdefb 0%, #ffffff 100%); color: #546e7a; border-bottom: 1px solid #e3f2fd; }
.skin-snow .cp-rc-body { background: transparent; }
.skin-snow .cp-rc-row { background: rgba(255, 255, 255, 0.8); border: 1px solid #e1f5fe; box-shadow: 0 2px 10px rgba(225, 245, 254, 0.5); }
.skin-snow .cp-rc-q { color: #455a64; letter-spacing: 1px; border-bottom-color: #e1f5fe; }
.skin-snow .cp-ans-user { color: #78909c; border-right-color: #e1f5fe; }
.skin-snow .cp-ans-ai { color: #90a4ae; }
.skin-snow .cp-match-tag { background: linear-gradient(135deg, #e1f5fe 0%, #b3e5fc 100%); color: #0277bd; box-shadow: 0 0 10px #b3e5fc; border: none; }

/* 结果页特殊样式 */
.cp-step-result.cp-step-container {
    padding: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-top: 10px;
}

#cp-capture-area {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    margin: 0 auto !important;
    border-radius: 12px;
}

.cp-result-card {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 12px !important;
}

.cp-step-result .cp-rc-header {
    padding: 15px !important;
}

.cp-step-result .cp-rc-body {
    padding: 10px !important;
}

.cp-skin-selector {
    margin: 10px auto 15px auto !important;
    width: 95% !important;
}

/* 联系人选择列表 */
.contact-picker-list {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}
.contact-picker-list .contact-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
}
.contact-picker-list .contact-item:hover {
    background: rgba(233, 30, 99, 0.08);
}
.contact-picker-list .contact-item:active {
    background: rgba(233, 30, 99, 0.15);
}
.contact-picker-list .contact-item:last-child {
    border-bottom: none;
}

/* 情侣默契挑战额外样式 */
#couple-game-screen .cp-step-container h3 {
    font-size: 20px;
    margin-bottom: 15px;
}

#couple-game-screen .cp-step-container p {
    line-height: 1.5;
}

/* Step 1 准备问卷样式美化 */
#couple-game-screen .cp-step-container .form-group {
    background: rgba(255, 255, 255, 0.6);
    padding: 15px;
    border-radius: 12px;
    margin-top: 15px;
}

#couple-game-screen .cp-step-container .form-label {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin-bottom: 10px;
}

#couple-game-screen .cp-step-container .form-input {
    background: #fff !important;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#couple-game-screen .cp-step-container .form-input:focus {
    border-color: #E91E63;
    box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.1);
    outline: none;
}

#couple-game-screen .cp-step-container .form-input::placeholder {
    color: #aaa;
}

/* 分隔线样式 */
#couple-game-screen .cp-step-container .divider-text {
    text-align: center;
    color: #bbb;
    margin: 15px 0;
    font-size: 13px;
    position: relative;
}

/* 目标头像展示区域 */
#couple-game-screen .target-avatar-section {
    text-align: center;
    margin: 20px 0;
    padding: 20px;
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.05) 0%, rgba(156, 39, 176, 0.05) 100%);
    border-radius: 16px;
}

#couple-game-screen .target-avatar-section img {
    width: 80px !important;
    height: 80px !important;
    border: 3px solid #fff;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.2);
}

#couple-game-screen .target-avatar-section .target-name {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-top: 10px;
}

/* 题库按钮 */
#couple-game-screen .library-btn {
    background: linear-gradient(135deg, #673ab7 0%, #9c27b0 100%) !important;
    border-radius: 20px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    box-shadow: 0 2px 8px rgba(103, 58, 183, 0.3);
}

/* 上传按钮 */
#couple-game-screen .upload-btn {
    background: linear-gradient(135deg, #607d8b 0%, #78909c 100%) !important;
    border-radius: 10px;
}

/* 开始按钮 */
#couple-game-screen .start-btn {
    background: linear-gradient(135deg, #E91E63 0%, #9C27B0 100%) !important;
    border-radius: 10px;
    padding: 16px !important;
    font-size: 17px !important;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3);
}

#couple-game-screen .start-btn:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(233, 30, 99, 0.4);
    transform: translateY(-2px);
}

/* 答题按钮 */
#couple-game-screen .cp-question-card .form-button {
    background: linear-gradient(135deg, #E91E63 0%, #9C27B0 100%) !important;
    border-radius: 25px;
}

/* ============================================================
   窥探模式样式 - 完全对齐 downloaded_site
   ============================================================ */

/* TA的手机 全屏界面 - 真实手机外观 */
.snooped-phone-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #0f0f23 100%);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.snooped-app-content-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

/* 返回按钮 */
.phone-back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s;
}

.phone-back-btn:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.05);
}

/* 手机外框 */
.phone-frame {
    width: 100%;
    max-width: 375px;
    height: 90vh;
    max-height: 812px;
    background: #000;
    border-radius: 44px;
    padding: 12px;
    box-shadow: 
        0 0 0 3px #333,
        0 0 0 6px #1a1a1a,
        0 25px 50px rgba(0,0,0,0.5),
        inset 0 0 20px rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 刘海 */
.phone-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 30px;
    background: #000;
    border-radius: 0 0 20px 20px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.notch-camera {
    width: 10px;
    height: 10px;
    background: #1a1a1a;
    border-radius: 50%;
    border: 2px solid #333;
}

.notch-speaker {
    width: 50px;
    height: 5px;
    background: #1a1a1a;
    border-radius: 3px;
}

/* 状态栏 */
.phone-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 24px;
    padding-top: 40px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.status-icons {
    display: flex;
    gap: 6px;
    font-size: 12px;
}

/* 手机屏幕内容 */
.phone-screen-content {
    flex: 1;
    background: linear-gradient(180deg, 
        rgba(102, 126, 234, 0.3) 0%, 
        rgba(118, 75, 162, 0.3) 50%,
        rgba(30, 30, 60, 0.8) 100%);
    border-radius: 32px;
    overflow-y: auto;
    padding: 16px;
}

/* 壁纸头部 */
.phone-wallpaper-header {
    text-align: center;
    padding: 20px 0 30px;
}

.owner-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255,255,255,0.3);
    overflow: hidden;
}

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

.owner-avatar i {
    font-size: 28px;
    color: rgba(255,255,255,0.8);
}

.owner-name {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.sync-btn {
    margin-top: 12px;
    padding: 8px 20px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.sync-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.25);
}

.sync-btn:disabled {
    opacity: 0.6;
}

/* 手机加载动画 */
.phone-loading {
    text-align: center;
    padding: 40px;
    color: rgba(255,255,255,0.8);
}

.loading-animation {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.loading-dot {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    animation: loadingBounce 1.4s infinite ease-in-out both;
}

.loading-dot:nth-child(1) { animation-delay: -0.32s; }
.loading-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes loadingBounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.sync-progress-text {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 4px;
}

/* App图标网格 - 手机风格 */
.phone-apps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 8px;
    padding: 10px 0;
}

.phone-app-item {
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.phone-app-item:active {
    transform: scale(0.9);
}

.phone-app-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: white;
    font-size: 26px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.phone-app-item:hover .phone-app-icon {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

.phone-app-name {
    font-size: 11px;
    color: #fff;
    margin-top: 6px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Home指示条 */
.phone-home-indicator {
    width: 134px;
    height: 5px;
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
    margin: 8px auto;
}

/* App内容界面头部 */
.snoop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.snoop-header .page-title {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}

.snoop-header .back-btn,
.snoop-header .refresh-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.snoop-header .back-btn:hover,
.snoop-header .refresh-btn:hover {
    background: rgba(255,255,255,0.2);
}

.snoop-header .refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.snoop-loading {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255,255,255,0.7);
}

.snoop-loading i {
    font-size: 48px;
    color: #e91e63;
    margin-bottom: 16px;
}

.snoop-loading p {
    font-size: 14px;
}

/* App内容区域 */
.snoop-app-body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background: rgba(255,255,255,0.95);
    border-radius: 20px 20px 0 0;
    margin-top: 8px;
}

.snoop-content {
    color: #333;
}

.snoop-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

/* 通用项目样式 */
.snoop-item {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.snoop-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    color: #666;
}

.snoop-item-header i {
    color: #999;
}

.snoop-time {
    color: #999;
    font-size: 12px;
    margin-left: auto;
}

.snoop-item-title {
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.snoop-item-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.snoop-item-extra {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #eee;
}

.snoop-item-price {
    font-weight: 600;
    color: #e91e63;
}

.snoop-item-price.positive { color: #4caf50; }
.snoop-item-price.negative { color: #f44336; }

.snoop-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    padding: 16px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.snoop-section-title i {
    color: #e91e63;
}

/* 对话样式 */
.snoop-conversation {
    background: #f8f9fa;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.snoop-conv-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 10px 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.snoop-conv-messages {
    padding: 12px;
}

.snoop-msg {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 18px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.4;
}

.snoop-msg.sent {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.snoop-msg.received {
    background: white;
    color: #333;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.snoop-msg-sender {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    display: block;
    margin-bottom: 2px;
}

.snoop-msg-time {
    font-size: 10px;
    opacity: 0.6;
    display: block;
    margin-top: 4px;
    text-align: right;
}

/* 统计信息 */
.snoop-stat {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
}

.snoop-stat i {
    margin-right: 8px;
}

/* 银行卡样式 */
.snoop-card {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: white;
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 12px;
}

.snoop-card-name {
    font-size: 14px;
    opacity: 0.8;
}

.snoop-card-number {
    font-size: 12px;
    opacity: 0.6;
    margin: 8px 0;
}

.snoop-card-balance {
    font-size: 24px;
    font-weight: 600;
}

/* 收益样式 */
.snoop-profit {
    font-weight: 600;
}

.snoop-profit.positive { color: #4caf50; }
.snoop-profit.negative { color: #f44336; }

/* 私密内容 */
.snoop-item.snoop-private {
    background: #fff5f8;
    border-left: 3px solid #e91e63;
}

/* 高亮引用 */
.snoop-highlight {
    background: #fffde7;
    border-left: 3px solid #ffc107;
    padding: 12px;
    margin-top: 10px;
    border-radius: 0 8px 8px 0;
}

.snoop-highlight-text {
    font-style: italic;
    color: #333;
    margin-bottom: 6px;
}

.snoop-highlight-comment {
    font-size: 12px;
    color: #666;
}

/* 时间线 */
.snoop-timeline {
    position: relative;
    padding-left: 24px;
}

.snoop-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #e91e63, #9c27b0);
}

.snoop-timeline-item {
    position: relative;
    padding: 12px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.snoop-timeline-time {
    width: 50px;
    font-size: 12px;
    color: #999;
    flex-shrink: 0;
}

.snoop-timeline-icon {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #e91e63;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    position: absolute;
    left: -16px;
}

.snoop-timeline-desc {
    flex: 1;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

/* 位置标签 */
.snoop-location {
    font-size: 12px;
    color: #2196f3;
}

.snoop-location i {
    color: #2196f3;
}

/* 点赞数 */
.snoop-likes {
    font-size: 12px;
    color: #e91e63;
}

/* ============================================================
   抖音风格设计
   ============================================================ */
.douyin-container {
    padding: 0;
}

.douyin-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.douyin-header i {
    font-size: 24px;
}

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

.douyin-video-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.douyin-video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.douyin-video-cover {
    height: 160px;
    background: linear-gradient(135deg, #fe2c55 0%, #25f4ee 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.douyin-video-cover .cover-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6) 100%);
}

.douyin-video-cover i.fa-play {
    font-size: 36px;
    color: white;
    opacity: 0.9;
    z-index: 1;
}

.douyin-video-cover .video-likes {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.5);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 1;
}

.douyin-video-cover .video-likes i {
    font-size: 12px;
    color: #fe2c55;
}

.douyin-video-content {
    padding: 12px;
}

.douyin-video-content .video-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.douyin-video-content .video-desc {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.douyin-video-content .video-meta {
    display: flex;
    gap: 8px;
}

.interaction-tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.interaction-tag.liked { background: #fff0f3; color: #fe2c55; }
.interaction-tag.commented { background: #e3f2fd; color: #2196f3; }
.interaction-tag.shared { background: #e8f5e9; color: #4caf50; }
.interaction-tag.bookmarked { background: #fff8e1; color: #ff9800; }
.interaction-tag.viewed { background: #f5f5f5; color: #999; }

.douyin-video-content .video-thought {
    margin-top: 10px;
    padding: 8px 10px;
    background: #f9f9f9;
    border-radius: 8px;
    font-size: 12px;
    color: #666;
    font-style: italic;
}

/* ============================================================
   小说书架风格
   ============================================================ */
.novel-container {
    padding: 0;
}

.novel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.novel-header i {
    font-size: 22px;
    color: #9c27b0;
}

.bookshelf {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.book-card {
    display: flex;
    gap: 14px;
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.book-cover {
    width: 70px;
    height: 100px;
    border-radius: 4px 8px 8px 4px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        2px 2px 8px rgba(0,0,0,0.2),
        inset -2px 0 4px rgba(0,0,0,0.1);
}

.book-spine {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: rgba(0,0,0,0.2);
    border-radius: 2px 0 0 2px;
}

.book-title-vertical {
    writing-mode: vertical-rl;
    font-size: 11px;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    max-height: 80px;
    overflow: hidden;
}

.book-icon {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 16px;
    color: rgba(255,255,255,0.5);
}

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

.book-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.book-review {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 10px;
}

.book-review i {
    color: #9c27b0;
    margin-right: 4px;
    font-size: 10px;
}

.book-highlight {
    background: linear-gradient(135deg, #fce4ec 0%, #f3e5f5 100%);
    border-radius: 8px;
    padding: 10px 12px;
}

.highlight-marker {
    font-size: 11px;
    color: #9c27b0;
    font-weight: 600;
    margin-bottom: 6px;
}

.highlight-text {
    font-size: 13px;
    color: #333;
    line-height: 1.5;
    font-style: italic;
    margin-bottom: 6px;
}

.highlight-comment {
    font-size: 12px;
    color: #666;
}

.highlight-comment i {
    color: #9c27b0;
    margin-right: 4px;
}

/* ============================================================
   音乐播放器风格
   ============================================================ */
.music-container {
    padding: 0;
}

.music-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.music-header i {
    font-size: 24px;
    color: #1DB954;
}

.music-duration {
    margin-left: auto;
    font-size: 13px;
    font-weight: 400;
    color: #666;
    background: #f0f0f0;
    padding: 4px 12px;
    border-radius: 12px;
}

.music-playlist {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.music-track {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.2s;
}

.music-track:last-child {
    border-bottom: none;
}

.music-track:hover {
    background: #fafafa;
}

.track-index {
    width: 24px;
    font-size: 14px;
    color: #999;
    text-align: center;
    flex-shrink: 0;
}

.track-cover {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1DB954 0%, #191414 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vinyl-disc {
    width: 36px;
    height: 36px;
    background: #191414;
    border-radius: 50%;
    position: relative;
    animation: spin 3s linear infinite paused;
}

.music-track:hover .vinyl-disc {
    animation-play-state: running;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.vinyl-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #1DB954;
    border-radius: 50%;
}

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

.track-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-artist {
    font-size: 13px;
    color: #666;
    margin-top: 2px;
}

.track-meta {
    display: flex;
    gap: 12px;
    margin-top: 4px;
    font-size: 11px;
    color: #999;
}

.track-meta i {
    margin-right: 3px;
}

.track-platform i {
    color: #1DB954;
}

.track-thought {
    margin-top: 6px;
    font-size: 12px;
    color: #888;
    font-style: italic;
}

.track-thought i {
    margin-right: 4px;
    color: #1DB954;
}

.track-duration {
    font-size: 13px;
    color: #666;
    flex-shrink: 0;
}

/* ============================================================
   微信聊天风格
   ============================================================ */
.wechat-container {
    padding: 0;
}

.wechat-chat-card {
    background: #ededed;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.wechat-chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
}

.chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: linear-gradient(135deg, #07c160 0%, #06ae56 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

.chat-avatar.group {
    background: linear-gradient(135deg, #576b95 0%, #4a5d82 100%);
}

.chat-name {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

.wechat-messages {
    padding: 12px;
}

.wechat-msg-row {
    margin-bottom: 12px;
}

.wechat-msg-row.sent {
    text-align: right;
}

.wechat-msg-row.received {
    text-align: left;
}

.msg-sender {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}

.wechat-bubble {
    display: inline-block;
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    text-align: left;
    position: relative;
}

.wechat-bubble.sent {
    background: #95ec69;
    color: #000;
    border-radius: 6px 0 6px 6px;
}

.wechat-bubble.received {
    background: #fff;
    color: #000;
    border-radius: 0 6px 6px 6px;
}

.msg-time {
    font-size: 10px;
    color: #999;
    margin-top: 4px;
}

/* ============================================================
   浏览器历史 - Safari 风格
   ============================================================ */
.browser-container {
    padding: 0;
}

.browser-header {
    padding: 12px;
    background: #f5f5f7;
    border-radius: 12px;
    margin-bottom: 16px;
}

.browser-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 10px;
    color: #86868b;
    font-size: 14px;
}

.browser-search-bar i:first-child {
    color: #34c759;
    font-size: 12px;
}

.browser-search-bar span {
    flex: 1;
}

.browser-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    padding: 8px 0 12px;
}

.browser-section-title i {
    color: #007aff;
}

.browser-history-list {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.browser-history-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

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

.browser-history-item:hover {
    background: #fafafa;
}

.browser-icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #007aff 0%, #5856d6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    flex-shrink: 0;
}

.browser-history-content {
    flex: 1;
    min-width: 0;
}

.browser-query {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.browser-reason {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

.browser-found {
    margin-top: 8px;
    padding: 8px 10px;
    background: #f5f5f7;
    border-radius: 8px;
    font-size: 12px;
    color: #007aff;
}

.browser-found i {
    margin-right: 6px;
}

.browser-time {
    font-size: 12px;
    color: #999;
    flex-shrink: 0;
}

/* ============================================================
   淘宝购物风格
   ============================================================ */
.taobao-container {
    padding: 0;
}

.taobao-section {
    margin-bottom: 20px;
}

.taobao-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.taobao-section-header i {
    color: #ff5000;
}

.cart-count {
    margin-left: auto;
    font-size: 13px;
    font-weight: 400;
    color: #999;
}

.taobao-cart-list {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.taobao-cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid #f5f5f5;
}

.taobao-cart-item:last-child {
    border-bottom: none;
}

.cart-checkbox {
    color: #ff5000;
    font-size: 20px;
}

.cart-product-img {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #fff5f0 0%, #ffe4d9 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff5000;
    font-size: 24px;
    flex-shrink: 0;
}

.cart-product-info {
    flex: 1;
    min-width: 0;
}

.cart-product-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-product-reason {
    font-size: 12px;
    color: #999;
    margin-bottom: 6px;
}

.cart-product-price {
    font-size: 16px;
    font-weight: 600;
    color: #ff5000;
}

.taobao-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.taobao-order-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}

.order-status {
    font-size: 13px;
    color: #52c41a;
    font-weight: 500;
}

.order-status i {
    margin-right: 4px;
}

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

.order-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
}

.order-product-img {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 20px;
    flex-shrink: 0;
}

.order-product-info {
    flex: 1;
    min-width: 0;
}

.order-product-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.order-product-thought {
    font-size: 12px;
    color: #666;
    font-style: italic;
}

.order-product-price {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    flex-shrink: 0;
}

/* ============================================================
   备忘录 - iOS 风格
   ============================================================ */
.memo-container {
    padding: 0;
}

.memo-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0 16px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.memo-header i {
    color: #ffcc02;
}

.memo-count {
    margin-left: auto;
    font-size: 13px;
    font-weight: 400;
    color: #999;
}

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

.memo-card {
    padding: 14px;
    border-radius: 12px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.memo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.memo-icon {
    font-size: 20px;
    margin-bottom: 10px;
    opacity: 0.7;
}

.memo-content {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    line-height: 1.5;
    flex: 1;
}

.memo-thought {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(0,0,0,0.15);
    font-size: 12px;
    color: rgba(0,0,0,0.6);
    font-style: italic;
}

/* ============================================================
   甜蜜空间 - 时间轴风格
   ============================================================ */
.sweetspace-container {
    padding: 0;
}

.sweetspace-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    margin: -16px -16px 16px;
    color: white;
    font-size: 18px;
    font-weight: 600;
    overflow: hidden;
}

.sweetspace-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #ec407a 0%, #f48fb1 50%, #ff80ab 100%);
    z-index: 0;
}

.sweetspace-header i,
.sweetspace-header span {
    position: relative;
    z-index: 1;
}

.sweetspace-header i {
    font-size: 22px;
}

.timeline-stats-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: linear-gradient(135deg, #fff 0%, #fce4ec 100%);
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(236, 64, 122, 0.15);
}

.stats-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ec407a 0%, #f48fb1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.stats-info {
    flex: 1;
}

.stats-label {
    font-size: 13px;
    color: #999;
    margin-bottom: 4px;
}

.stats-value {
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.timeline-section {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.timeline-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 12px;
}

.timeline-section-header i {
    color: #ec407a;
}

.timeline-flow {
    position: relative;
}

.timeline-node {
    position: relative;
    display: flex;
    gap: 16px;
    padding-bottom: 16px;
}

.timeline-node:last-child {
    padding-bottom: 0;
}

.timeline-node:last-child .timeline-line {
    display: none;
}

.timeline-line {
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #f48fb1 0%, #f0f0f0 100%);
}

.timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #999;
    flex-shrink: 0;
    z-index: 1;
    transition: all 0.2s;
}

.timeline-node.latest .timeline-dot {
    background: linear-gradient(135deg, #ec407a 0%, #f48fb1 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(236, 64, 122, 0.4);
}

.timeline-card {
    flex: 1;
    padding: 12px 14px;
    background: #fafafa;
    border-radius: 10px;
    transition: background 0.2s;
}

.timeline-node:hover .timeline-card {
    background: #f5f5f5;
}

.timeline-time {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.timeline-desc {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

/* ============================================================
   窥探模式 - 创意现代相册设计（宝丽来风格 + 瀑布流）
   ============================================================ */

.gallery-container {
    padding: 0;
}

.gallery-section {
    margin-bottom: 24px;
}

.gallery-section.private-section {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.05) 0%, rgba(233, 30, 99, 0.08) 100%);
    border-radius: 16px;
    padding: 16px;
    margin: 0 -16px;
}

.gallery-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.gallery-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

.gallery-icon.camera { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.gallery-icon.screenshot { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.gallery-icon.private { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }

.gallery-count {
    margin-left: auto;
    background: rgba(0,0,0,0.06);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    color: #666;
}

.gallery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: #bbb;
    gap: 8px;
}

.gallery-empty i {
    font-size: 32px;
    opacity: 0.5;
}

/* 宝丽来瀑布流网格 */
.polaroid-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* 宝丽来卡片 */
.polaroid-card {
    position: relative;
    background: white;
    border-radius: 4px;
    padding: 8px 8px 0 8px;
    box-shadow: 
        0 1px 3px rgba(0,0,0,0.12),
        0 4px 12px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center bottom;
}

.polaroid-card:hover {
    transform: translateY(-6px) rotate(-1deg);
    box-shadow: 
        0 8px 25px rgba(0,0,0,0.15),
        0 12px 35px rgba(0,0,0,0.1);
}

.polaroid-card:nth-child(even):hover {
    transform: translateY(-6px) rotate(1deg);
}

.polaroid-card.expanded {
    transform: scale(1.02);
    z-index: 10;
}

.polaroid-card.private {
    background: linear-gradient(135deg, #fff 0%, #fff5f7 100%);
}

/* 照片区域 */
.polaroid-photo {
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.polaroid-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.polaroid-card:hover .polaroid-overlay {
    opacity: 1;
}

.polaroid-overlay i {
    font-size: 28px;
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* 私密锁标记 */
.polaroid-lock {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6b9d;
    font-size: 12px;
}

/* 宝丽来底部文字 */
.polaroid-caption {
    padding: 10px 4px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.caption-time,
.caption-app {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.caption-desc {
    font-size: 12px;
    color: #333;
    font-weight: 500;
    line-height: 1.3;
}

/* 详情弹出层 */
.polaroid-details {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    background: white;
    border-radius: 12px;
    box-shadow: 
        0 10px 40px rgba(0,0,0,0.15),
        0 0 0 1px rgba(0,0,0,0.05);
    overflow: hidden;
    z-index: 100;
}

.polaroid-details.visible {
    display: block;
    animation: slideUpFade 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUpFade {
    from { 
        opacity: 0; 
        transform: translateY(-10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.details-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
}

.polaroid-card.private .details-header {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.details-body {
    padding: 14px;
}

.detail-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #444;
    line-height: 1.5;
}

.detail-row:last-child {
    margin-bottom: 0;
}

.detail-row i {
    color: #667eea;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.detail-thought {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 0 0;
    padding: 10px 12px;
    background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
    border-radius: 8px;
    font-size: 12px;
    color: #5d4037;
    line-height: 1.5;
}

.detail-thought i {
    color: #f9a825;
    flex-shrink: 0;
}

.detail-reason {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 0 0;
    padding: 10px 12px;
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
    border-radius: 8px;
    font-size: 12px;
    color: #880e4f;
    line-height: 1.5;
}

.detail-reason i {
    color: #e91e63;
    flex-shrink: 0;
}

/* ============================================================
   窥探模式 - 现代金融App风格资产页面
   ============================================================ */

.finance-container {
    padding: 0;
}

/* 总资产卡片 */
.finance-total-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 24px;
    color: white;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.total-label {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 8px;
}

.total-amount {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -1px;
}

.total-decoration {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 60px;
    opacity: 0.15;
}

/* 分区标题 */
.finance-section {
    margin-bottom: 24px;
}

.finance-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.section-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
}

.section-icon.invest {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.section-icon.bills {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

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

.section-count {
    margin-left: auto;
    font-size: 13px;
    color: #999;
    background: rgba(0,0,0,0.04);
    padding: 4px 10px;
    border-radius: 12px;
}

/* 银行卡横向滚动 */
.bank-cards-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 4px 0 16px;
    -webkit-overflow-scrolling: touch;
}

.bank-cards-scroll::-webkit-scrollbar {
    height: 4px;
}

.bank-cards-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.bank-cards-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
}

/* 现代银行卡 */
.modern-bank-card {
    min-width: 280px;
    height: 160px;
    border-radius: 16px;
    padding: 20px;
    color: white;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}

.modern-bank-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}

.card-chip {
    width: 40px;
    height: 30px;
    background: linear-gradient(135deg, #d4af37 0%, #f4e5b0 50%, #d4af37 100%);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 5px;
}

.chip-line {
    height: 2px;
    background: rgba(0,0,0,0.2);
    border-radius: 1px;
}

.card-type {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 20px;
    opacity: 0.7;
}

.card-number {
    position: absolute;
    bottom: 60px;
    left: 20px;
    font-size: 16px;
    letter-spacing: 3px;
    font-family: 'Courier New', monospace;
    opacity: 0.9;
}

.card-info {
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.card-bank {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 4px;
}

.card-balance {
    font-size: 20px;
    font-weight: 600;
}

.card-logo {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 24px;
    opacity: 0.5;
}

/* 投资组合表格 */
.investments-table {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.invest-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 8px;
    padding: 12px 14px;
    background: #f8f9fa;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.invest-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 8px;
    padding: 14px;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
}

.invest-row:last-child {
    border-bottom: none;
}

.invest-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 2px;
}

.invest-value {
    font-size: 12px;
    color: #666;
}

.invest-percent {
    color: #999;
    font-size: 11px;
}

.invest-col-daily,
.invest-col-holding,
.invest-col-total {
    font-size: 13px;
    font-weight: 500;
    text-align: right;
}

.invest-col-daily.profit,
.invest-col-holding.profit,
.invest-col-total.profit {
    color: #4caf50;
}

.invest-col-daily.loss,
.invest-col-holding.loss,
.invest-col-total.loss {
    color: #f44336;
}

.invest-col-daily.neutral,
.invest-col-holding.neutral,
.invest-col-total.neutral {
    color: #999;
}

/* 账单流水 */
.transactions-list {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.transaction-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.2s;
}

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

.transaction-item:hover {
    background: #fafafa;
}

.txn-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.txn-icon.income {
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50;
}

.txn-icon.expense {
    background: rgba(244, 67, 54, 0.1);
    color: #f44336;
}

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

.txn-desc {
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.txn-time {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

.txn-amount {
    font-size: 15px;
    font-weight: 600;
    flex-shrink: 0;
}

.txn-amount.income {
    color: #4caf50;
}

.txn-amount.expense {
    color: #333;
}

/* ================================================================
   手机桌面主题系统 - Phone Theme Engine Styles
   ================================================================ */

/* -------- 主题激活时的通用修改 -------- */
.phone-home-screen.theme-active {
    position: relative;
    overflow: hidden;
}

/* 主题模式下底部横线固定在底部 */
.phone-home-screen.theme-active .phone-home-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
}

.phone-home-screen.theme-active .phone-wallpaper-overlay {
    transition: background 0.5s ease;
}

/* 状态栏深色模式 */
.phone-status-bar.status-bar-dark {
    color: #333 !important;
}
.phone-status-bar.status-bar-dark .status-time-mini,
.phone-status-bar.status-bar-dark i {
    color: #333 !important;
}

/* -------- 主题时钟区域 -------- */
.theme-clock {
    position: absolute;
    z-index: 10;
    text-align: center;
    width: 80%;
    min-width: 200px;
}

.theme-clock.clock-centered,
.theme-clock.clock-decorated {
    text-align: center;
}

.theme-clock.clock-stacked {
    text-align: left;
}

.theme-clock.clock-banner {
    text-align: center;
}

.clock-time {
    position: relative;
    z-index: 1;
    line-height: 1;
    margin-bottom: 6px;
}

/* 双层描边字符 */
.time-char-wrap {
    position: relative;
    display: inline-block;
}

.time-char-outer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
}

.time-char-inner {
    position: relative;
    z-index: 1;
}

.clock-date {
    position: relative;
    z-index: 1;
    margin-top: 4px;
    white-space: nowrap;
}

.clock-decoration-img {
    display: block;
    object-fit: contain;
}

/* 横幅样式 */
.clock-banner-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.clock-date-side {
    text-align: center;
}

.clock-date-side div {
    line-height: 1.4;
}

/* 竖排堆叠样式 */
.clock-stacked {
    position: relative;
    z-index: 1;
}

.clock-time-hour,
.clock-time-minute {
    display: block;
}

.clock-date-stacked {
    position: relative;
    z-index: 1;
    margin-top: 6px;
}

/* 错开堆叠时钟样式 */
.theme-clock.clock-stacked-offset {
    text-align: left;
}

.clock-stacked-offset {
    position: relative;
    z-index: 1;
}

.clock-offset-hour {
    display: block;
    text-align: left;
    line-height: 1;
}

.clock-offset-bottom {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: -5px;
}

.clock-offset-date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 14px;
    gap: 2px;
    min-width: 60px;
}

.clock-offset-minute {
    line-height: 1;
}

/* -------- 主题图标 - 自由布局 -------- */
.theme-icons-freeform {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.theme-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-tap-highlight-color: transparent;
}

.theme-icon-item:active {
    transform: scale(0.9) !important;
}

/* -------- 主题图标 - 网格布局 -------- */
.theme-icons-grid-container {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px;
}

.theme-icons-grid {
    display: grid;
    width: 100%;
    max-width: 340px;
}

/* -------- 图标外观 -------- */
.theme-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.3s ease;
}

.theme-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
}

.theme-icon-emoji {
    font-size: 28px;
}

.theme-icon-name {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* -------- 装饰元素 -------- */
.theme-decoration {
    transition: transform 0.3s ease;
    pointer-events: none;
}

.theme-decoration img {
    max-width: 100%;
}

/* -------- 桌面组件通用样式 -------- */
.theme-widget {
    z-index: 8;
    pointer-events: auto;
}

/* 喝水记录组件 */
.water-tracker-inner {
    position: relative;
}

.water-tracker-title {
    font-weight: bold;
    text-align: center;
}

.water-tracker-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.water-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    padding: 0;
}

.water-btn:active {
    transform: scale(0.85);
}

.water-btn img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.water-btn i {
    font-size: 12px;
    color: #666;
}

.water-tracker-count {
    display: flex;
    align-items: center;
    font-weight: bold;
}

/* 电量组件 */
.battery-inner {
    position: relative;
}

.battery-content {
    width: 100%;
    padding: 6px 10px;
}

.battery-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.battery-label {
    font-size: 13px;
    font-weight: bold;
}

.battery-percent-badge {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    padding: 2px 10px;
    border-radius: 10px;
}

.battery-progress-bar {
    height: 6px;
    background: rgba(0,0,0,0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.battery-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.battery-time-row {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
}

.battery-time-value {
    font-weight: bold;
    font-size: 14px;
    margin: 0 1px;
}

/* 每日清单组件 */
.daily-list-inner {
    position: relative;
}

.daily-list-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.daily-list-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.daily-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 3px 0;
    transition: opacity 0.2s;
}

.daily-list-item:active {
    opacity: 0.7;
}

.daily-list-checkbox {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.daily-list-checkbox .check-icon-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.daily-list-checkbox i {
    font-size: 16px;
    opacity: 0.6;
}

.daily-list-text {
    font-size: 13px;
    transition: all 0.3s;
}

.daily-list-text.line-through {
    text-decoration: line-through;
    opacity: 0.5;
}

/* -------- 主题选择页面 -------- */
.phone-theme-selector {
    padding: 16px;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 0 4px;
}

.theme-card {
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid transparent;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.theme-card:active {
    transform: scale(0.95);
}

.theme-card.active {
    border-color: var(--primary-color, #43e97b);
    box-shadow: 0 4px 20px rgba(67, 233, 123, 0.3);
}

.theme-preview {
    width: 100%;
    aspect-ratio: 9 / 16;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-preview-gradient {
    width: 100%;
    height: 100%;
}

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

.theme-info {
    padding: 10px 12px;
    background: var(--bg-primary, #fff);
}

.theme-info-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #333);
}

.theme-info-author {
    font-size: 11px;
    color: var(--text-secondary, #999);
    margin-top: 2px;
}

.theme-active-badge {
    display: inline-block;
    font-size: 10px;
    color: #fff;
    background: var(--primary-color, #43e97b);
    padding: 1px 8px;
    border-radius: 8px;
    margin-left: 6px;
}

/* ============ 猫咪交互 ============ */
.theme-cat-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    cursor: pointer;
    pointer-events: auto;
}

.theme-cat-img {
    display: block;
    pointer-events: none;
    /* 默认：推入底部，只露出猫耳（顶部约15%） */
    transform: translateY(80%);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-cat-container.cat-shown .theme-cat-img {
    /* 升起：大部分可见 */
    transform: translateY(5%);
}

/* ============ 图标晃动动画 ============ */

/* wobble 待机动画（给有 theme-anim-wobble 的图标） */
@keyframes icon-wobble {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(5deg); }
    30% { transform: rotate(-5deg); }
    45% { transform: rotate(3deg); }
    60% { transform: rotate(-3deg); }
    75% { transform: rotate(1deg); }
    90% { transform: rotate(-1deg); }
}

/* 图标主动晃动状态 */
.icon-wobbling .theme-icon-wrapper {
    animation: icon-wobble 0.8s ease-in-out infinite;
}

/* 弹跳点击动画 */
@keyframes icon-bounce {
    0% { transform: scale(1); }
    30% { transform: scale(0.85); }
    50% { transform: scale(1.15); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.theme-click-bounce.clicked .theme-icon-wrapper {
    animation: icon-bounce 0.5s ease-out;
}

/* float 动画（小宠物等浮动装饰） */
@keyframes theme-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ========================================
   登录注册页面样式
   ======================================== */
.login-screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: url('../assets/bg.png') center center / cover no-repeat;
}

/* 主容器 */
.login-container {
    position: relative;
    z-index: 1;
    width: 85%;
    max-width: 340px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(139, 109, 78, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Logo区域 */
.login-logo-area {
    text-align: center;
    margin-bottom: 24px;
}

.login-logo-icon {
    width: 80px;
    height: 80px;
    border-radius: 22px;
    overflow: hidden;
    margin: 0 auto 12px;
    box-shadow: 0 6px 20px rgba(139, 109, 78, 0.2);
}

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

.login-app-name {
    font-size: 24px;
    font-weight: 700;
    color: #5d4037;
    margin: 0 0 4px;
    letter-spacing: 2px;
}

.login-app-slogan {
    font-size: 13px;
    color: #8d6e63;
    margin: 0;
}

/* 标签切换 */
.login-tabs {
    display: flex;
    position: relative;
    background: rgba(139, 109, 78, 0.1);
    border-radius: 25px;
    padding: 3px;
    margin-bottom: 18px;
}

.login-tab {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 600;
    color: #8d6e63;
    cursor: pointer;
    z-index: 1;
    transition: color 0.3s;
    border-radius: 22px;
}

.login-tab.active {
    color: #5d4037;
}

.login-tab-indicator {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    background: white;
    border-radius: 22px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(139, 109, 78, 0.15);
}

/* 错误提示 */
.login-error {
    background: rgba(229, 57, 53, 0.08);
    border: 1px solid rgba(229, 57, 53, 0.2);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #c62828;
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-error i {
    font-size: 15px;
    flex-shrink: 0;
}

/* 表单 */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-input-group {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    border: 1px solid rgba(139, 109, 78, 0.15);
    overflow: hidden;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

.login-input-group:focus-within {
    background: rgba(255, 255, 255, 0.9);
    border-color: #a1887f;
    box-shadow: 0 0 0 3px rgba(161, 136, 127, 0.15);
}

.login-input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex-shrink: 0;
    color: #a1887f;
    font-size: 15px;
}

.login-input-group input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 13px 14px 13px 0;
    font-size: 15px;
    color: #4e342e;
}

.login-input-group input::placeholder {
    color: #bcaaa4;
}

/* 提交按钮 */
.login-submit-btn {
    margin-top: 6px;
    padding: 14px 0;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
    color: white;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 4px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
    box-shadow: 0 4px 16px rgba(139, 109, 78, 0.3);
}

.login-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(139, 109, 78, 0.4);
}

.login-submit-btn:active {
    transform: translateY(0);
}

.login-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.login-submit-btn .fa-spinner {
    color: white;
    font-size: 18px;
}

/* ========== Token用完全局充值弹窗 ========== */
.token-depleted-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: tokenModalFadeIn 0.25s ease;
}

@keyframes tokenModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.token-depleted-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.55);
}

.token-depleted-content {
    position: relative;
    width: 300px;
    background: #fff;
    border-radius: 20px;
    padding: 32px 24px 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: tokenContentSlideUp 0.3s ease;
}

@keyframes tokenContentSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.token-depleted-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(253, 160, 133, 0.4);
}

.token-depleted-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.token-depleted-desc {
    font-size: 14px;
    color: #888;
    line-height: 1.6;
    margin-bottom: 24px;
}

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

.token-btn-recharge {
    width: 100%;
    padding: 14px 0;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    color: #7c4a00;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(253, 160, 133, 0.35);
}

.token-btn-recharge:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(253, 160, 133, 0.5);
}

.token-btn-recharge:active {
    transform: translateY(0);
}

.token-btn-dismiss {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #aaa;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s;
}

.token-btn-dismiss:hover {
    color: #666;
}

/* ========== 新春邀请活动卡片 ========== */
.invite-event-card {
    position: relative;
    margin: 12px 16px;
    border-radius: 16px;
    overflow: hidden;
    background: #fffaf3;
    border: 1px solid #f0e0c8;
    box-shadow: 0 4px 16px rgba(180, 140, 80, 0.12);
}

.invite-event-bg {
    position: absolute;
    top: -20px; right: -20px;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: rgba(255, 180, 60, 0.08);
}

.invite-event-bg::after {
    content: '';
    position: absolute;
    bottom: -50px; left: -30px;
    width: 70px; height: 70px;
    border-radius: 50%;
    background: rgba(255, 180, 60, 0.05);
}

.invite-event-content {
    position: relative;
    padding: 20px;
    z-index: 1;
}

.invite-event-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.invite-event-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.invite-event-title {
    color: #3d2c1e;
    font-size: 17px;
    font-weight: 700;
}

.invite-event-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 12px 8px;
    background: #fff7ed;
    border: 1px solid #f5e6d0;
    border-radius: 12px;
}

.invite-rule-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.invite-rule-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9a56 0%, #ff6b6b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.25);
}

.invite-rule-text {
    color: #5a4636;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.invite-rule-arrow {
    color: #d4a574;
    font-size: 10px;
    margin-top: -18px;
}

.invite-event-highlight {
    text-align: center;
    color: #c0392b;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.invite-event-highlight i {
    margin-right: 4px;
    font-size: 12px;
}

.invite-code-share {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #eee0d0;
    border-radius: 12px;
    padding: 12px 14px;
}

.invite-code-display {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.invite-code-label {
    font-size: 11px;
    color: #a08060;
}

.invite-code-value {
    font-size: 18px;
    font-weight: 700;
    color: #3d2c1e;
    letter-spacing: 2px;
    font-family: 'Courier New', monospace;
}

.invite-copy-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    background: linear-gradient(135deg, #ff9a56 0%, #ff6b6b 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
    white-space: nowrap;
}

.invite-copy-btn:active {
    transform: scale(0.95);
}