/* ===== LOCK SCREEN ===== */
#lock-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999; background: #000; display: none; flex-direction: column;
    overflow: hidden; user-select: none; -webkit-user-select: none;
}
#lock-screen.active { display: flex; }
.lock-screen-wallpaper {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    background-size: cover; background-position: center;
}
.lock-screen-content {
    position: relative; z-index: 2; display: flex; flex-direction: column;
    align-items: center; padding-top: 100px; flex: 1;
}
.lock-screen-time {
    font-size: 72px; font-weight: 200; color: #fff; letter-spacing: 2px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
    font-variant-numeric: tabular-nums;
}
.lock-screen-date {
    font-size: 18px; color: rgba(255,255,255,0.85); margin-top: 6px;
    text-shadow: 0 1px 10px rgba(0,0,0,0.3);
}
/* iOS全屏适配：锁屏上滑提示 */
.lock-screen-swipe-hint {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.6); font-size: 14px;
    animation: lockSwipeHint 2s ease-in-out infinite;
}
.lock-screen-swipe-hint i { font-size: 18px; }
@keyframes lockSwipeHint {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(-10px); opacity: 1; }
}

/* Passcode Panel */
.lock-passcode-panel {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    z-index: 3; display: flex; flex-direction: column; align-items: center;
    justify-content: center; background: rgba(0,0,0,0.85);
    backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.lock-passcode-panel.active { transform: translateY(0); }
.lock-passcode-title {
    font-size: 18px; color: #fff; margin-bottom: 24px; font-weight: 400;
}
.lock-passcode-dots {
    display: flex; gap: 16px; margin-bottom: 12px;
}
.lock-dot {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6); background: transparent;
    transition: background 0.15s, border-color 0.15s;
}
.lock-dot.filled {
    background: #fff; border-color: #fff;
}
.lock-passcode-error {
    height: 20px; font-size: 13px; color: #ff453a; margin-bottom: 10px;
    text-align: center;
}
.lock-passcode-grid {
    display: grid; grid-template-columns: repeat(3, 80px); gap: 14px;
}
.lock-key {
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(255,255,255,0.12); display: flex; flex-direction: column;
    align-items: center; justify-content: center; cursor: pointer;
    transition: background 0.15s; -webkit-tap-highlight-color: transparent;
}
.lock-key:active { background: rgba(255,255,255,0.3); }
.lock-key.empty { background: transparent; pointer-events: none; }
.lock-key-num { font-size: 32px; color: #fff; font-weight: 300; line-height: 1; }
.lock-key-letters { font-size: 10px; color: rgba(255,255,255,0.6); letter-spacing: 2px; margin-top: 2px; }
.lock-key-delete { background: transparent; }
.lock-key-delete i { font-size: 22px; color: #fff; }
.lock-passcode-bottom {
    display: flex; gap: 40px; margin-top: 20px; align-items: center; justify-content: center;
}
.lock-passcode-cancel, .lock-passcode-forgot {
    font-size: 16px; color: rgba(255,255,255,0.7); cursor: pointer; padding: 8px 20px;
}
.lock-passcode-cancel:active, .lock-passcode-forgot:active { color: #fff; }
.lock-passcode-forgot { color: rgba(255,255,255,0.5); font-size: 14px; }

/* Lock screen shake animation for wrong password */
@keyframes lockShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-12px); }
    40% { transform: translateX(12px); }
    60% { transform: translateX(-8px); }
    80% { transform: translateX(8px); }
}
.lock-shake .lock-passcode-dots { animation: lockShake 0.5s ease; }

/* ====== 世界书 App ====== */
#layer-worldbook > .scroll-y {
    background: #faf8f5 !important;
    padding: 16px !important;
}
#layer-worldbook > .nav-bar {
    background: #fff;
    border-bottom: 1px solid #f0ebe4;
}
#layer-worldbook > .nav-bar .nav-title { color: #5c4a3a; font-weight: 600; }
#layer-worldbook > .nav-bar .nav-icon { color: #b09a85; }

.wb-category-bar {
    background: #fff !important;
    padding: 12px 14px !important;
    gap: 8px !important;
    border-bottom: 1px solid #f0ebe4 !important;
}
.wb-cate-chip {
    padding: 6px 16px !important;
    background: #f5f0ea !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    color: #8a7560 !important;
    border: 1px solid transparent;
    box-shadow: none;
    transition: all 0.2s;
}
.wb-cate-chip.active {
    background: #5c4a3a !important;
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(92,74,58,0.18);
}

#wb-list .group-box.wb-item {
    background: #fff !important;
    border-radius: 14px !important;
    padding: 16px !important;
    margin: 0 0 10px 0 !important;
    border: 1px solid #ede7df;
    box-shadow: 0 1px 4px rgba(92,74,58,0.05);
    transition: all 0.2s;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
#wb-list .group-box.wb-item:active {
    transform: scale(0.99);
}
#wb-list .wb-collapse-arrow {
    color: #b09a85 !important;
}
#wb-list .wb-btn {
    padding: 6px 16px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 500;
    transition: all 0.15s;
}
#wb-list .wb-btn.edit {
    background: #5c4a3a !important;
    box-shadow: none;
}
#wb-list .wb-btn.del {
    background: #e8836a !important;
}
#wb-list .wb-btn.save {
    background: #6aab73 !important;
}
#wb-list .wb-btn.cancel {
    background: #ede7df !important;
    color: #8a7560 !important;
}
#wb-list .wb-content {
    color: #6b5e52;
    font-size: 14px;
    line-height: 1.7;
    padding: 10px 12px !important;
    background: #faf7f3;
    border-radius: 10px;
    margin-top: 10px !important;
    border-top: none !important;
}
#wb-list .wb-edit-area textarea {
    border: 1px solid #e5ddd4 !important;
    border-radius: 10px !important;
    padding: 10px !important;
    background: #fdfcfa;
    transition: border-color 0.2s;
}
#wb-list .wb-edit-area textarea:focus {
    border-color: #b09a85 !important;
    outline: none;
}
#wb-list .wb-edit-area input,
#wb-list .wb-edit-area select {
    border: 1px solid #e5ddd4 !important;
    border-radius: 10px !important;
    background: #fdfcfa;
}

/* 世界书空状态美化 */
#wb-list > div[style*="text-align:center"] {
    padding: 50px 20px !important;
    color: #c4b8aa !important;
}

/* ====== 感知 App - 黑白极简重构 ====== */

/* 顶栏 — [FIX-弹性保护带] padding-top适配状态栏 */
.perc-topbar {
    display: flex; align-items: center; padding: 14px 16px;
    padding-top: var(--guard-top, env(safe-area-inset-top, 14px));
    box-sizing: border-box;
    background: #fff; border-bottom: 1px solid #f0f0f0;
    position: sticky; top: 0; z-index: 10;
}
.perc-topbar-back {
    width: 32px; height: 32px; display: flex; align-items: center;
    justify-content: center; cursor: pointer; color: #333;
    border-radius: 50%; transition: background 0.15s;
}
.perc-topbar-back:active { background: #f5f5f5; }
.perc-topbar-title {
    flex: 1; font-size: 17px; font-weight: 600; color: #000;
    text-align: center; margin-right: 32px;
}
.perc-topbar-actions { width: 32px; }

/* 滚动区域 */
.perc-scroll {
    background: #f7f7f7 !important;
    padding: 0 16px 24px !important;
}

/* === 天气信息卡 === */
.perc-weather-card {
    background: #111; color: #fff; border-radius: 16px;
    padding: 24px; margin: 16px 0; position: relative;
    overflow: hidden;
}
.perc-weather-card::before {
    content: ''; position: absolute; top: -40px; right: -40px;
    width: 120px; height: 120px; border-radius: 50%;
    background: rgba(255,255,255,0.04);
}
.perc-weather-main { margin-bottom: 12px; }
.perc-weather-temp {
    font-size: 42px; font-weight: 700; line-height: 1;
    letter-spacing: -1px;
}
.perc-weather-desc {
    font-size: 15px; color: rgba(255,255,255,0.7); margin-top: 4px;
}
.perc-weather-meta {
    font-size: 14px; color: rgba(255,255,255,0.85);
    display: flex; align-items: center; gap: 6px;
}
.perc-weather-sub {
    font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 4px;
    display: flex; align-items: center; gap: 6px;
}
.perc-weather-sep { opacity: 0.4; }
.perc-weather-refresh {
    position: absolute; top: 20px; right: 20px;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.perc-weather-refresh:active {
    background: rgba(255,255,255,0.2);
    transform: scale(0.92);
}
.perc-weather-refresh svg { display: block; }

/* === 分区 === */
.perc-section { margin-bottom: 4px; }
.perc-section-title {
    font-size: 13px; font-weight: 500; color: #999;
    padding: 16px 4px 8px; text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === 卡片容器 === */
.perc-card {
    background: #fff; border-radius: 16px;
    border: 1px solid #f0f0f0;
    overflow: hidden;
}
.perc-card-calendar {
    border: none;
    background: transparent;
}
.perc-card-calendar .calendar-container {
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: none !important;
    border: 1px solid #f0f0f0;
}

/* === 单元格 === */
.perc-cell {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #f8f8f8;
    transition: background 0.15s;
}
.perc-cell:last-child { border-bottom: none; }
.perc-cell:active { background: #fafafa; }
.perc-cell-master {
    padding: 16px;
}
.perc-cell-col {
    flex-direction: column; align-items: stretch;
}
.perc-cell-row {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; margin-bottom: 10px;
}
.perc-cell-left {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.perc-cell-right {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.perc-cell-icon {
    width: 28px; height: 28px; border-radius: 8px;
    background: #f5f5f5; display: flex; align-items: center;
    justify-content: center; color: #666; flex-shrink: 0;
}
.perc-cell-master .perc-cell-icon {
    width: 32px; height: 32px; background: #000; color: #fff;
    border-radius: 10px;
}
.perc-cell-label {
    font-size: 14px; color: #333; font-weight: 500;
}
.perc-cell-hint {
    font-size: 12px; color: #aaa; margin-top: 2px;
}

/* === 输入框 === */
.perc-input {
    border: 1px solid #e8e8e8; border-radius: 10px;
    padding: 7px 10px; font-size: 13px; color: #333;
    background: #fafafa; outline: none;
    transition: border-color 0.2s;
    max-width: 140px;
}
.perc-input:focus {
    border-color: #333;
}
.perc-input-full {
    max-width: none; width: 100%; box-sizing: border-box;
}
.perc-input-group {
    display: flex; flex-direction: column; gap: 8px; width: 100%;
}
.perc-input-click {
    cursor: pointer; color: #999; text-align: right;
    display: inline-flex; align-items: center;
}
.perc-unit {
    font-size: 13px; color: #999; margin-left: 2px;
}

/* === 感知开关 === */
#layer-perception .switch input:checked + .slider {
    background: #000;
}

/* === 感知日历 - 黑白风格覆盖 === */
#layer-perception .calendar-header {
    background: #fff !important; color: #000 !important;
    border-bottom: 1px solid #f0f0f0;
    padding: 14px 16px !important;
}
#layer-perception .cal-nav-btn {
    background: #f5f5f5 !important; color: #333 !important;
    border: none !important; width: 30px; height: 30px;
}
#layer-perception .cal-nav-btn:hover { background: #eee !important; }
#layer-perception .cal-month-title { color: #000 !important; font-weight: 600; }
#layer-perception .cal-today-btn {
    background: #000 !important; color: #fff !important;
    border-radius: 16px !important; padding: 5px 14px !important;
    font-weight: 500;
}
#layer-perception .cal-day.today {
    background: #000 !important; color: #fff !important;
    box-shadow: none !important; border-radius: 50% !important;
}
#layer-perception .cal-day:hover {
    background: #f5f5f5 !important;
}
#layer-perception .cal-day.selected {
    outline: 2px solid #000 !important; outline-offset: -2px;
}
#layer-perception .calendar-weekdays span { color: #aaa; }
#layer-perception .cal-event-item {
    background: #f8f8f8 !important; border-radius: 12px !important;
    border: 1px solid #f0f0f0;
}
#layer-perception .cal-event-item:hover {
    background: #f0f0f0 !important;
}
#layer-perception .cal-event-dot.holiday { background: #333; }
#layer-perception .cal-event-dot.special { background: #666; }
#layer-perception .cal-event-dot.greeting { background: #999; }

/* 隐藏旧导航栏（新结构用perc-topbar） */
#layer-perception > .nav-bar { display: none; }

/* ===== 群聊私聊界面线下模式 样式 ===== */

/* 邀请成员弹窗 */
.goi-list {
    max-height: 50vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.goi-member-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.goi-member-item:hover, .goi-member-item:active {
    background: #e8f0fe;
}
.goi-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--primary, #576b95);
    flex-shrink: 0;
}
.goi-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.goi-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

/* 参与者头像栏 */
.go-participants-bar {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    background: linear-gradient(135deg, #f0f4ff 0%, #fdf0f5 100%);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    gap: 8px;
    flex-shrink: 0;
}
.go-participants-label {
    font-size: 12px;
    color: #576b95;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.go-participants-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
}
.go-participants-list::-webkit-scrollbar { display: none; }
.go-participant {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.go-participant-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.go-participant-name {
    font-size: 10px;
    color: #666;
    max-width: 42px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.go-turn-badge {
    background: linear-gradient(135deg, #576b95, #7b8ec9);
    color: #fff;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 500;
}

/* 引用预览栏 */
.go-quote-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #f7f8fa;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    flex-shrink: 0;
}
.go-quote-text {
    flex: 1;
    color: #576b95;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 群聊线下叙事气泡 */
.go-offline-bubble {
    background: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    margin: 4px 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border-left: 4px solid #ddd;
    transition: all 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.go-offline-bubble.go-user {
    border-left-color: var(--primary, #576b95);
    background: linear-gradient(135deg, #f8f9ff, #fff);
}
.go-offline-bubble.go-ai {
    border-left-color: #e8a0bf;
    background: linear-gradient(135deg, #fff9fc, #fff);
}
.go-offline-bubble.selected {
    outline: 2px solid var(--primary, #576b95);
}

/* 气泡头部 */
.go-bubble-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.go-bubble-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.08);
}
.go-bubble-name {
    font-weight: 600;
    font-size: 13px;
    color: #333;
}
.go-bubble-turn {
    font-size: 10px;
    color: #999;
    background: #f0f0f0;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: auto;
}
.go-bubble-quote-btn {
    font-size: 12px;
    color: #aaa;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}
.go-bubble-quote-btn:hover {
    color: #576b95;
    background: #f0f4ff;
}

/* 引用显示 */
.go-quote-ref {
    background: #f5f6f8;
    border-left: 3px solid #576b95;
    padding: 6px 10px;
    margin-bottom: 8px;
    border-radius: 0 6px 6px 0;
    font-size: 12px;
    color: #576b95;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 叙事内容区 */
.go-bubble-content {
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    word-wrap: break-word;
}

/* 对话高亮 */
.go-dialogue {
    color: #2e7d32;
    font-weight: 500;
}
.go-highlight {
    color: #c62828;
    font-weight: 500;
}

/* 线下模式手机消息预览 */
.go-phone-msg {
    background: #f0f7ff;
    border: 1px solid #d6e8fa;
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════
   🎀 微信App界面美化 & 布局优化
   ══════════════════════════════════════════════════════════════ */

/* --- 2. 微信顶部导航栏 --- */
/* [已移至default-theme.css] 黑白二次元动漫便签风格为默认外观 */

/* [FIX-tab栏穿透聊天-根因修复]
   让 #layer-wechat 自身成为 stacking context，把 .wx-tab-bar(z:1001) 封在内部，
   使 .layer.show(z:5000) 可以整体盖过去。这样聊天界面不会再看到微信底部 tab 栏。
   纯 CSS 层叠上下文，零 JS 时序依赖，键盘弹/收都不会让底栏漏出。 */
#layer-wechat {
    isolation: isolate !important;
}

/* --- 3. 微信底部标签栏（悬浮胶囊样式，参照.bottom-nav做法） --- */
#layer-wechat > .wx-tab-bar {
    position: absolute !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    width: 85% !important;
    max-width: 340px !important;
    height: 56px !important;
    padding-bottom: 0px !important;
    z-index: 1001 !important;
    border-radius: 28px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.12) !important;
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-top: none !important;
}

/* [FIX-wx-tab穿透生成/心声-2026-06-06-终极] 不依赖JS protectEl、不依赖styles.css(:has规则)。
   根因：index.html不加载styles.css，未应用自定义CSS时protectEl不存在，
   移动端打开聊天后没有任何规则隐藏wx-tab-bar，悬浮胶囊(bottom:20px)与聊天输入栏
   "生成/心声"按钮重叠造成点击穿透。此规则始终加载、覆盖全场景。 */
body.layer-open #layer-wechat > .wx-tab-bar,
html:has(.layer.show:not(#layer-wechat)) #layer-wechat > .wx-tab-bar {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* --- 4. 联系人列表 --- */
/* [已移至default-theme.css] 黑白二次元动漫便签风格为默认外观 */

/* --- 5. 加号弹窗改为居中白色圆角弹窗（偏正方形） --- */
#wx-add-menu.wx-add-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 220px !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.14) !important;
    padding: 16px 0 !important;
    z-index: 9500 !important;
    animation: wxAddModalPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
@keyframes wxAddModalPop {
    from { transform: translate(-50%, -50%) scale(0.85); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
#wx-add-menu.wx-add-modal .add-item {
    color: #222 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 20px 24px !important;
    font-size: 15px !important;
    justify-content: center !important;
    border-radius: 0 !important;
    transition: background 0.15s !important;
    font-weight: 500 !important;
}
#wx-add-menu.wx-add-modal .add-item:last-child {
    border-bottom: none !important;
}
#wx-add-menu.wx-add-modal .add-item:active {
    background: #f8f8f8 !important;
}
#wx-add-menu.wx-add-modal .add-item i {
    color: #333 !important;
    font-size: 15px !important;
}
.wx-add-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.2); z-index: 9499;
    display: none;
}

/* --- 6. 聊天界面底部工具栏适配（悬浮胶囊兼容） --- */
#layer-chat .input-bar {
    padding-bottom: 0 !important;
    position: relative !important;
}
/* [FIX-2026-03-12] 去掉额外padding，仅保留safe-area，避免工具栏距离屏幕底部太远 */
#layer-chat .toolbar {
    padding-bottom: 0px !important;
}

/* ========================================
   💳 WALLET SYSTEM STYLES
   ======================================== */

/* Wallet Black Card */
.wallet-black-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.2s;
}

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

.wallet-card-chip {
    width: 40px;
    height: 30px;
    background: linear-gradient(135deg, #d4af37, #f4e5b0);
    border-radius: 6px;
    margin-bottom: 20px;
    position: relative;
}

.wallet-card-chip::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 3px;
}

.wallet-card-logo {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    letter-spacing: 2px;
}

.wallet-card-balance-label {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 4px;
}

.wallet-card-balance {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 24px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.wallet-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.wallet-card-holder {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
}

.wallet-card-number {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

.wallet-card-shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    animation: walletShine 3s infinite;
}

@keyframes walletShine {
    0%, 100% { transform: translateX(-100%) translateY(-100%); }
    50% { transform: translateX(0%) translateY(0%); }
}

/* Wallet Recharge Button */
.wallet-recharge-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #07c160, #10ad58);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 20px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(7,193,96,0.3);
    transition: all 0.2s;
}

.wallet-recharge-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(7,193,96,0.3);
}

/* Wallet Navigation Items */
.wallet-nav-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.wallet-nav-item:active {
    background: #f5f5f5;
}

.wallet-nav-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    color: #fff;
    font-size: 18px;
}

.wallet-nav-info {
    flex: 1;
}

.wallet-nav-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.wallet-nav-desc {
    font-size: 12px;
    color: #999;
}

/* Wallet Sub Navigation */
.wallet-sub-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.wallet-sub-nav .nav-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
}

.wallet-sub-nav .nav-title {
    font-size: 17px;
    font-weight: 600;
    color: #333;
}

/* Wallet Bills */
.wallet-bill-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 10px;
}

.wallet-bill-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 16px;
}

.wallet-bill-icon.income {
    background: rgba(7,193,96,0.1);
    color: #07c160;
}

.wallet-bill-icon.expense {
    background: rgba(250,81,81,0.1);
    color: #fa5151;
}

.wallet-bill-info {
    flex: 1;
    min-width: 0;
}

.wallet-bill-desc {
    font-size: 15px;
    color: #333;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-bill-time {
    font-size: 12px;
    color: #999;
}

.wallet-bill-amount {
    font-size: 17px;
    font-weight: 700;
    margin-left: 12px;
}

/* Wallet Section Title */
.wallet-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin: 20px 0 12px;
    padding-left: 4px;
}

/* Family Card Action Buttons - 黑白灰风格 */
.wallet-fc-action-btn {
    flex: 1;
    padding: 12px;
    background: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.wallet-fc-action-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.wallet-fc-action-btn.request {
    background: #fff;
    color: #333;
    border: 1.5px solid #d0d0d0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.wallet-fc-action-btn.request:active {
    background: #f5f5f5;
}

/* Family Card Items */
.wallet-fc-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.wallet-fc-card.given {
    border-left: 4px solid #576b95;
}

.wallet-fc-card.received {
    border-left: 4px solid #07c160;
}

.wallet-fc-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.wallet-fc-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
}

.wallet-fc-card-info {
    flex: 1;
}

.wallet-fc-card-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.wallet-fc-card-type {
    font-size: 12px;
    color: #999;
}

.wallet-fc-card-type.received {
    color: #07c160;
}

.wallet-fc-card-limit {
    font-size: 20px;
    font-weight: 700;
    color: #576b95;
}

.wallet-fc-card-limit span {
    font-size: 12px;
    font-weight: 400;
    color: #999;
}

.wallet-fc-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #666;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

/* Family Card Request Items */
.wallet-fc-request-item {
    display: flex;
    align-items: center;
    padding: 14px;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.wallet-fc-req-info {
    flex: 1;
    margin-right: 12px;
}

.wallet-fc-req-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.wallet-fc-req-limit {
    font-size: 12px;
    color: #666;
}

/* Family Card Contact List */
.wallet-fc-contact-item {
    display: flex;
    align-items: center;
    padding: 14px;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.wallet-fc-contact-item:active {
    background: #f5f5f5;
}

.wallet-fc-contact-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wallet-fc-contact-item.disabled:active {
    background: #fff;
}

/* ========== 精灵养成系统样式 ========== */
/* 精灵卡片 */
.spirit-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(255, 105, 180, 0.15);
    border: 2px solid rgba(255, 182, 193, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.spirit-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 182, 193, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.spirit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(255, 105, 180, 0.25);
    border-color: rgba(255, 105, 180, 0.6);
}

.spirit-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.spirit-card-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd6f0, #ffb3d9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
    border: 3px solid #fff;
    flex-shrink: 0;
}

.spirit-card-info {
    flex: 1;
    min-width: 0;
}

.spirit-card-name {
    font-size: 17px;
    font-weight: 700;
    color: #ff1493;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spirit-card-meta {
    font-size: 12px;
    color: #ff69b4;
    display: flex;
    align-items: center;
    gap: 8px;
}

.spirit-card-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    position: relative;
    z-index: 1;
}

.spirit-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #ff69b4;
}

.spirit-stat-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffe8f5, #ffd6f0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}

/* 精灵属性条 */
.spirit-stat-bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.spirit-stat-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #ff69b4;
    font-weight: 600;
}

.spirit-stat-bar-bg {
    height: 8px;
    background: rgba(255, 182, 193, 0.2);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.spirit-stat-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff69b4, #ff1493);
    border-radius: 10px;
    transition: width 0.5s ease;
    position: relative;
    overflow: hidden;
}

.spirit-stat-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

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

/* 精灵互动按钮 */
.spirit-action-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(255, 182, 193, 0.4);
    border-radius: 16px;
    padding: 14px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
    color: #ff1493;
    font-weight: 600;
}

.spirit-action-btn i {
    font-size: 24px;
    color: #ff69b4;
}

.spirit-action-btn:hover {
    background: linear-gradient(135deg, #ffe8f5, #ffd6f0);
    border-color: #ff69b4;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
}

.spirit-action-btn:active {
    transform: translateY(0);
}

/* 精灵类型选择器 */
.spirit-type-option {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(255, 182, 193, 0.4);
    border-radius: 16px;
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.spirit-type-option:hover {
    border-color: #ff69b4;
    background: linear-gradient(135deg, #ffe8f5, #ffd6f0);
}

.spirit-type-option.selected {
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    border-color: #ff1493;
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
}

.spirit-type-option i {
    font-size: 32px;
}

.spirit-type-option span {
    font-size: 12px;
    font-weight: 600;
}

.spirit-type-option.selected i,
.spirit-type-option.selected span {
    color: #fff;
}

/* 精灵对话气泡 */
.spirit-chat-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    position: relative;
}

.spirit-chat-bubble.user {
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3);
}

.spirit-chat-bubble.spirit {
    background: rgba(255, 255, 255, 0.95);
    color: #ff1493;
    align-self: flex-start;
    border: 2px solid rgba(255, 182, 193, 0.4);
    border-bottom-left-radius: 4px;
}

.spirit-chat-bubble.system {
    background: rgba(255, 182, 193, 0.2);
    color: #ff69b4;
    align-self: center;
    font-size: 12px;
    border-radius: 12px;
    padding: 6px 12px;
}

/* 精灵浮动动画 */
@keyframes spiritFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

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

/* 精灵心情特效 */
.spirit-mood-happy {
    animation: spiritBounce 1s ease-in-out infinite;
}

.spirit-mood-sad {
    filter: grayscale(30%);
    opacity: 0.8;
}

.spirit-mood-excited {
    animation: spiritBounce 0.5s ease-in-out infinite;
    filter: brightness(1.2);
}

/* 精灵属性图标颜色 */
.spirit-stat-hunger { color: #ff6b6b; }
.spirit-stat-mood { color: #ffd93d; }
.spirit-stat-wisdom { color: #4d96ff; }
.spirit-stat-stamina { color: #6bcb77; }
.spirit-stat-health { color: #ff69b4; }

/* 精灵成长阶段徽章 */
.spirit-stage-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #ffe8f5, #ffd6f0);
    border-radius: 12px;
    font-size: 11px;
    color: #ff1493;
    font-weight: 600;
    border: 1px solid rgba(255, 182, 193, 0.4);
}

/* 精灵互动提示 */
.spirit-hint {
    text-align: center;
    padding: 12px;
    background: rgba(255, 182, 193, 0.1);
    border-radius: 12px;
    font-size: 13px;
    color: #ff69b4;
    margin: 12px 0;
    border: 1px dashed rgba(255, 182, 193, 0.4);
}

/* 精灵事件通知 */
.spirit-event-notification {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    color: #fff;
    padding: 12px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(255, 105, 180, 0.4);
    z-index: 10000;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: slideDown 0.3s ease-out;
}

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

/* 精灵选择题样式 */
.spirit-choice-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.spirit-choice-btn {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(255, 182, 193, 0.4);
    border-radius: 12px;
    padding: 12px 16px;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #ff1493;
    font-size: 14px;
}

.spirit-choice-btn:hover {
    background: linear-gradient(135deg, #ffe8f5, #ffd6f0);
    border-color: #ff69b4;
    transform: translateX(4px);
}

.spirit-choice-btn:active {
    transform: translateX(0);
}

/* 响应式调整 */
@media (max-width: 380px) {
    .spirit-action-btn {
        padding: 10px 6px;
        font-size: 12px;
    }
    
    .spirit-action-btn i {
        font-size: 20px;
    }
    
    .spirit-card-avatar {
        width: 48px;
        height: 48px;
        font-size: 28px;
    }
}

/* ========== 精灵系统增强样式 ========== */

/* 精灵系统顶部导航栏美化 */
.spirit-nav-bar {
    background: linear-gradient(135deg, #ffe8f5 0%, #ffd6f0 100%) !important;
    border-bottom: 2px solid rgba(255, 182, 193, 0.4) !important;
    box-shadow: 0 2px 12px rgba(255, 105, 180, 0.15) !important;
}

.spirit-nav-bar .nav-title {
    color: #ff1493 !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.spirit-nav-bar .nav-icon {
    color: #ff69b4 !important;
}

/* 精灵详情页固定顶部导航 */
.spirit-detail-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: linear-gradient(135deg, #ffe8f5 0%, #ffd6f0 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(255, 105, 180, 0.15);
    border-bottom: 2px solid rgba(255, 182, 193, 0.4);
}

.spirit-detail-nav .nav-icon {
    color: #ff69b4;
    font-size: 20px;
    padding: 10px;
    cursor: pointer;
    min-width: 40px;
    text-align: center;
}

.spirit-detail-nav .nav-title {
    color: #ff1493;
    font-weight: 700;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 精灵详情页固定头部信息区 */
.spirit-detail-header {
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #fff5f9 0%, rgba(255, 245, 249, 0.95) 100%);
    padding: 16px;
}
/* 精灵详情页可滚动内容区 */
.spirit-detail-scroll {
    padding-top: 220px;
    overflow-y: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

/* 精灵形象容器 - 增强视觉效果 */
.spirit-display-container {
    position: relative;
    display: inline-block;
}

/* 精灵形象emoji - 更精致的动画 */
.spirit-display-emoji {
    font-size: 140px;
    display: inline-block;
    animation: spiritFloat 3s ease-in-out infinite, spiritRotate 6s ease-in-out infinite;
    filter: drop-shadow(0 12px 24px rgba(255, 105, 180, 0.4));
    transition: all 0.3s ease;
    cursor: pointer;
}

.spirit-display-emoji:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 16px 32px rgba(255, 105, 180, 0.5));
}

/* 精灵发光效果 */
.spirit-glow-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255, 105, 180, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 2s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

/* 精灵旋转动画 */
@keyframes spiritRotate {
    0%, 100% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
}

/* 发光脉冲动画 */
@keyframes glowPulse {
    0%, 100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* 精灵属性条颜色渐变优化 */
.spirit-stat-bar-fill.spirit-stat-hunger {
    background: linear-gradient(90deg, #ff6b6b, #ff8787);
}

.spirit-stat-bar-fill.spirit-stat-mood {
    background: linear-gradient(90deg, #ffd93d, #ffe66d);
}

.spirit-stat-bar-fill.spirit-stat-wisdom {
    background: linear-gradient(90deg, #4d96ff, #6eb5ff);
}

.spirit-stat-bar-fill.spirit-stat-stamina {
    background: linear-gradient(90deg, #6bcb77, #8ce99a);
}

.spirit-stat-bar-fill.spirit-stat-health {
    background: linear-gradient(90deg, #ff69b4, #ff8dc7);
}

/* 微信底部导航栏适配精灵入口 */
.wx-tab-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    padding-bottom: 0px;
    z-index: 1000;
}

.wx-tab-bar .nav-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 0;
    cursor: pointer;
    transition: all 0.2s;
    color: #888;
    font-size: 10px;
}

.wx-tab-bar .nav-tab i {
    font-size: 22px;
}

.wx-tab-bar .nav-tab.active {
    color: #3a3a3c;
}

.wx-tab-bar .nav-tab:active {
    opacity: 0.6;
}

/* 精灵入口特殊样式 */
.wx-tab-bar .nav-tab:last-child {
    color: #b0b0b5;
}

.wx-tab-bar .nav-tab:last-child.active {
    color: #3a3a3c;
}

/* 精灵互动按钮增强 */
.spirit-action-btn {
    position: relative;
    overflow: hidden;
}

.spirit-action-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 105, 180, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.spirit-action-btn:active::before {
    width: 200px;
    height: 200px;
}

/* 响应式优化 */
@media (max-width: 380px) {
    .spirit-display-emoji {
        font-size: 100px;
    }
    
    .spirit-glow-effect {
        width: 140px;
        height: 140px;
    }
    
    .spirit-detail-header {
        padding: 12px;
    }
}



/* [已移至 default-theme.css] 黑白二次元动漫便签风格主题代码已统一在 default-theme.css 中管理，避免重复定义导致 !important 层级冲突 */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║     📝 聊天界面自定义 (用户可修改) — CSS变量方式               ║
   ╚══════════════════════════════════════════════════════════════════╝

   ★★★ 重要说明 ★★★
   现在通过设置CSS变量来自定义聊天界面，变量会自动穿透所有主题CSS和APK优化，
   不再被其他样式文件覆盖！

   可用变量一览：
   ┌─────────────────────────┬───────────────────────────────────┐
   │ 变量名                   │ 作用                              │
   ├─────────────────────────┼───────────────────────────────────┤
   │ --chat-nav-bg            │ 顶部导航栏背景（颜色/渐变/图片）  │
   │ --chat-nav-border        │ 顶部导航栏下边框                  │
   │ --chat-nav-shadow        │ 顶部导航栏阴影                    │
   │ --chat-nav-color         │ 顶部导航栏标题文字颜色            │
   │ --chat-nav-icon-color    │ 顶部导航栏图标颜色                │
   │ --chat-nav-font          │ 顶部导航栏字体                    │
   │ --chat-nav-font-weight   │ 顶部导航栏字重                    │
   │ --chat-nav-font-size     │ 顶部导航栏字号                    │
   │ --chat-input-bg          │ 底部输入栏背景（颜色/渐变/图片）  │
   │ --chat-input-border      │ 底部输入栏上边框                  │
   │ --chat-input-shadow      │ 底部输入栏阴影                    │
   └─────────────────────────┴───────────────────────────────────┘

   使用方法：取消注释下面的 :root 块，修改变量值即可。
   所有主题（默认/可爱/韩系）和APK优化都会自动尊重这些变量。

   ═══════════════════════════════════════════════════════════════════ */

/* ═══ 方式一：直接设置变量（推荐，取消注释即可生效）═══ */
/*
:root {
    --chat-nav-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --chat-nav-border: none;
    --chat-nav-shadow: 0 2px 10px rgba(0,0,0,0.1);
    --chat-nav-color: #ffffff;
    --chat-nav-icon-color: #ffffff;
    --chat-nav-font-weight: 700;
    --chat-nav-font-size: 18px;

    --chat-input-bg: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    --chat-input-border: 1px solid #e0e0e0;
    --chat-input-shadow: none;
}
*/

/* ═══ 方式二：用图片/贴图做背景 ═══ */
/*
:root {
    --chat-nav-bg: url('你的顶部背景图.png') center/cover no-repeat;
    --chat-nav-border: none;
    --chat-nav-shadow: none;
    --chat-nav-color: #ffffff;
    --chat-nav-icon-color: #ffffff;

    --chat-input-bg: url('你的底部背景图.png') center/cover no-repeat;
    --chat-input-border: none;
    --chat-input-shadow: none;
}
*/

/* ═══ 预设方案1：粉色少女风格 ═══ */
/*
:root {
    --chat-nav-bg: linear-gradient(135deg, #ffeef1 0%, #ffe0e9 100%);
    --chat-nav-border: 1px solid #ffb6c1;
    --chat-nav-shadow: none;
    --chat-nav-color: #ff69b4;
    --chat-nav-icon-color: #ff69b4;
    --chat-nav-font-weight: 600;

    --chat-input-bg: #fff5f7;
    --chat-input-border: 1px solid #ffb6c1;
    --chat-input-shadow: none;
}
*/

/* ═══ 预设方案2：深色科技风格 ═══ */
/*
:root {
    --chat-nav-bg: #1a1a2e;
    --chat-nav-border: 1px solid #16213e;
    --chat-nav-shadow: none;
    --chat-nav-color: #00d4ff;
    --chat-nav-icon-color: #00d4ff;
    --chat-nav-font-weight: 600;

    --chat-input-bg: #16213e;
    --chat-input-border: 1px solid #0f3460;
    --chat-input-shadow: none;
}
*/

/* ═══ 预设方案3：清新绿色 ═══ */
/*
:root {
    --chat-nav-bg: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    --chat-nav-border: 1px solid #a5d6a7;
    --chat-nav-shadow: 0 2px 8px rgba(76,175,80,0.15);
    --chat-nav-color: #2e7d32;
    --chat-nav-icon-color: #388e3c;

    --chat-input-bg: #f1f8e9;
    --chat-input-border: 1px solid #a5d6a7;
    --chat-input-shadow: none;
}
*/

/* ═══════════════════════════════════════════════════════════════════
   使用说明：
   1. 选择上面任意一个方案，删除开头的 /* 和结尾的 */
   /*    （注意：每次只能启用一个 :root 块）
   2. 修改变量值来个性化：
      - 颜色值：#ff69b4、rgba(...)、linear-gradient(...)
      - 图片贴图：url('图片路径或URL') center/cover no-repeat
      - 边框：1px solid #颜色 或 none
   3. 保存文件后刷新页面即可看到效果
   4. 如需恢复默认，重新注释掉 :root 块即可
   
   ★ 这些变量在所有主题下都能生效，不会被覆盖！
   ═══════════════════════════════════════════════════════════════════ */

/* [已移除] 横屏提示覆盖层 - 在平板键盘弹出时会误判为横屏，故完全移除 */

/* ╔══════════════════════════════════════════════════════════════════╗
   ║   [JS适配] 原iOS终极修复已迁移至device-adapter.js              ║
   ║   以下仅保留通用样式（非平台特定）                              ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* === 联系人页面wx-tab-bar === */
/* [FIX-悬浮胶囊] 保持悬浮胶囊定位，不再重置为贴底全宽 */
#layer-wechat > .wx-tab-bar {
    z-index: 1001 !important;
}

/* [FIX-白色长条] wx-content-area延伸到底部，不再留gap给tab栏（悬浮胶囊浮在content之上） */
#layer-wechat > #wx-content-area {
    bottom: 0 !important;
}

/* [FIX-tab栏遮挡底部内容] 悬浮胶囊tab栏(高56px + 底部偏移20px)浮在内容之上，
   各tab滚动容器需在底部留出空间，否则朋友圈/我的页面滑到底时最后内容被tab栏遮住 */
#layer-wechat #tab-moments #moments-feed,
#layer-wechat #tab-me > .scroll-y,
#layer-wechat #tab-discover > .scroll-y,
#layer-wechat #tab-contacts #contact-list,
#layer-wechat #tab-chats > .scroll-y {
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
}

/* [FIX-贴底输入栏-2026-07-12] 贴底通栏：底部 safe-area 由 input-bar 统一承担，整行一起抬升 */
#layer-chat > .input-bar,
#layer-chat .input-bar,
#chat-input-bar {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}

/* toolbar底部padding */
#layer-chat .toolbar {
    padding-bottom: 0px !important;
    min-height: 44px !important;
}

/* 聊天记录防overscroll */
#chat-history {
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    touch-action: pan-y !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
}

/* [FIX-键盘贴合-v4] ★ 统一键盘适配：iOS + Android 共用一套规则 ★
   核心原理：layer 高度精确等于 visualViewport.height（由 JS 同步写入 --vv-height）
   输入栏在 flex column 底部 → 自然紧贴键盘顶部，无需 padding-bottom 挤压
   --vv-offset-top 补偿 iOS Safari 推页面偏移，Android 上始终为 0 */
html.keyboard-active #layer-chat.show {
    /* [FIX-iOS-z-index] 保持z-index高于wx-tab-bar(1001) */
    z-index: 5001 !important;
    overflow: hidden !important;
    position: fixed !important;
    /* [FIX-iOS白屏根治-2026-05-30-方案B] ★ 背景钉死全屏，绝不移动 ★
       核心思路（与线下模式方案A完全一致）：
       1. layer 容器 top:0 + bottom:0 + height:100% → 死死钉在全屏，永不移动
          ★ 不用 --vv-offset-top ★ 这是白屏的根因：
          iOS Safari 键盘弹起时会"推页面"，offsetTop 变正值，
          若 layer.top 跟随它，layer 整体下移，顶部露出底层白色 = 上半白屏。
          现在 top:0 强制钉死，配合 html/body 的 position:fixed 锁定，
          无论 Safari 怎么推，layer 背景纹丝不动。
       2. ★ 不用 padding-bottom 挤压 layer ★ 背景容器尺寸完全不变。
       3. 键盘适配只靠：chat-history 加 padding-bottom + input-bar 用 transform 上推
          （见下方独立规则），背景静止，只有输入框动。 */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    /* ★ 背景容器不加 padding-bottom，保持全屏静止 */
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

/* [FIX-iOS输入框飞天-2026-05-30-方案C] 聊天滚动区用 margin-bottom 让出键盘空间。
   ★ 为什么用 margin-bottom 而非 padding-bottom ★
   - padding-bottom 在容器内部撑空间，chat-history 自动滚到底，会把已有消息"向上顶"
     → 视觉上消息整体上移（无壁纸时看得很明显）。
   - margin-bottom 在容器外部让出空间，缩小 chat-history 的可视高度，
     消息内容停在原位不动，只是底部可视区变小，输入框正好补在这段空间。
   margin 不增大 scrollHeight，也不改 clientHeight，iOS 不触发 scrollTop 重置（不弹顶）。 */
html.keyboard-active #layer-chat.show #chat-history {
    margin-bottom: var(--keyboard-height, 0px) !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
}

/* [FIX-iOS输入框飞天-2026-05-30-方案C] 输入栏用 transform 上推到键盘正上方。
   --keyboard-height 已在 JS 中扣除 Safari 推页面量(offsetTop)，
   保证 iOS 上推量精确等于键盘遮挡高度，不再飞天。
   transform 不参与 layout，不触发 chat-history re-layout，不影响 scrollTop。 */
html.keyboard-active #layer-chat.show #chat-input-bar,
html.keyboard-active #layer-chat.show .input-bar,
html.keyboard-active #layer-chat.show .toolbar {
    transform: translateY(calc(-1 * var(--keyboard-height, 0px))) !important;
    will-change: transform;
}

/* [FIX-iOS输入框飞天-2026-05-30-方案C] 收键盘过渡：--keyboard-height 归零时平滑回落 */
html.keyboard-closing #layer-chat.show #chat-history {
    transition: margin-bottom 0.15s ease-out !important;
}
html.keyboard-closing #layer-chat.show #chat-input-bar,
html.keyboard-closing #layer-chat.show .input-bar,
html.keyboard-closing #layer-chat.show .toolbar {
    transition: transform 0.15s ease-out !important;
}

/* [FIX-iOS线下弹顶根治-2026-05-29-方案A] 独立界面线下模式键盘适配
   ★ 核心思路：layer 高度不变(100%) + scroll container 加 padding-bottom + input-bar 用 transform 上推
   ★ 与 #layer-chat 不同：layer 容器尺寸完全不变化，scroll container 容器 clientHeight 不变,
     iOS Safari 因此不会触发"position:fixed 父高度变化时清零内部 scrollTop"的渲染bug。
   ★ 这从根源上消除"弹顶到最早消息"的现象，无需事后多层 setTimeout 兜底恢复。 */
html.keyboard-active #layer-offline-mode.show {
    z-index: 5001 !important;
    overflow: hidden !important;
    position: fixed !important;
    /* [FIX-iOS白屏根治-2026-05-30-方案B] ★ top:0 钉死，不用 --vv-offset-top ★
       与聊天 layer 统一：背景死死钉在全屏，绝不跟随 Safari 推页面移动，
       避免顶部露白。键盘适配全靠下方 scroll-container padding + input-bar transform。 */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* ★ 关键：layer 高度保持全屏，不跟随 --vv-height 缩小 */
    height: 100% !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

/* [FIX-iOS输入框飞天-2026-05-30-方案C] scroll container 用 margin-bottom 让出键盘空间。
   与聊天模式统一：margin-bottom 缩小可视高度、内容停在原位不上移，
   不增大 scrollHeight、不改 clientHeight，iOS 不重置 scrollTop（不弹顶）。
   ⚠️ 不加 transition：iOS 键盘弹出动画期间 --keyboard-height 会逐帧更新，
   加 transition 会让每帧变化都触发动画造成抖动。直接跟随 iOS 原生键盘动画即可。 */
html.keyboard-active #layer-offline-mode.show .offline-scroll-container {
    margin-bottom: var(--keyboard-height, 0px) !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
}

/* [FIX-iOS线下弹顶根治-方案A] 输入栏 / 工具栏 / 批量操作栏 用 transform 上推到键盘正上方。
   transform 不参与 layout，不会触发 scroll container 内部 re-layout，不会影响 scrollTop。
   ⚠️ 同样不加 transition，跟随 iOS 原生键盘动画。 */
html.keyboard-active #layer-offline-mode.show .offline-input-bar,
html.keyboard-active #layer-offline-mode.show .offline-toolbar,
html.keyboard-active #layer-offline-mode.show .offline-batch-bar {
    transform: translateY(calc(-1 * var(--keyboard-height, 0px))) !important;
    will-change: transform;
}

/* [FIX-iOS线下弹顶根治-方案A] 收键盘过渡：--keyboard-height 一次性设为 0，
   此时才需要 transition 让 padding/transform 平滑回归 0，与 layer 整体过渡时长对齐。 */
html.keyboard-closing #layer-offline-mode.show .offline-scroll-container {
    transition: margin-bottom 0.15s ease-out !important;
}
html.keyboard-closing #layer-offline-mode.show .offline-input-bar,
html.keyboard-closing #layer-offline-mode.show .offline-toolbar,
html.keyboard-closing #layer-offline-mode.show .offline-batch-bar {
    transition: transform 0.15s ease-out !important;
}

/* [FIX-小窗键盘飞天] 小窗/分屏/桌面侧边栏模式下，OS 已经把整个 window 自然上抬避让键盘，
   此时若再用 transform 上推 input-bar，会造成"双重上推"导致输入栏飞到顶部。
   小窗下：取消所有上推策略，让浏览器原生处理键盘避让；layer 也保持原始 100% 高度。 */
html.mini-window.keyboard-active #layer-offline-mode.show {
    /* layer 保持自身高度，不依赖 --vv-offset-top 偏移（小窗下 visualViewport.offsetTop 不可靠） */
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
}
html.mini-window.keyboard-active #layer-offline-mode.show .offline-scroll-container {
    /* 取消 padding-bottom 模拟键盘高度（OS 已自然处理） */
    padding-bottom: 0 !important;
}
html.mini-window.keyboard-active #layer-offline-mode.show .offline-input-bar,
html.mini-window.keyboard-active #layer-offline-mode.show .offline-toolbar,
html.mini-window.keyboard-active #layer-offline-mode.show .offline-batch-bar {
    /* 取消 transform 上推 */
    transform: none !important;
    will-change: auto;
}

/* [FIX-iOS线下跳顶v15] 将 offline-scroll-container 提升为独立合成层。
   iOS Safari 键盘弹出时会改变 layer 高度（--vv-height），触发 re-layout，
   导致 scrollTop 被强制重置为 0。合成层的 scrollTop 在独立线程管理，
   不受主线程 re-layout 影响；contain: layout style 隔离父容器高度变化的传播。 */
.offline-scroll-container {
    will-change: scroll-position;
    contain: layout style;
}

/* [FIX-iOS白屏根治-2026-05-30-方案B] 键盘弹出时聊天历史 flex 自适应
   背景钉死方案下：layer 高度恒为 100%（全屏），chat-history flex:1 占满
   layer 剩余空间。最后消息不被键盘遮挡靠自身 padding-bottom（见上方规则），
   input-bar 靠 transform 上移到键盘正上方。
   - min-height:0 确保 flex 子项可收缩，不被内容撑大
   - overflow-y:auto 让消息可滚动 */
html.keyboard-active #chat-history,
html.keyboard-active .offline-scroll-container {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* [FIX-键盘贴合-v4] [FIX-iOS白屏-2026-05-30] 输入栏不被压缩
   flex-shrink:0 确保 input-bar / toolbar 维持其自然高度，
   不被 chat-history 的 flex:1 挤压，始终保持在屏幕可见区域。 */
html.keyboard-active .input-bar,
html.keyboard-active .offline-input-bar,
html.keyboard-active .toolbar {
    flex-shrink: 0 !important;
}

/* [FIX-非聊天键盘v14] 非聊天模式下，不对layer做高度/overflow强制调整，
   让各模块（时空系统、论坛等）自己的键盘适配逻辑正常工作。
   时空系统用 paddingBottom 推输入栏，论坛用 style.bottom 定位输入栏。 */

/* [FIX-iOS键盘] 键盘弹出时隐藏微信底部tab栏，防止iOS上tab栏显示在键盘上方 */
html.keyboard-active .wx-tab-bar {
    display: none !important;
}

/* [FIX-键盘贴合-v4] [FIX-iOS白屏-2026-05-30] keyboard-closing 过渡
   原方案：对 height 和 top 做过渡（height:var(--vv-height) → 全屏）
   新方案：对 padding-bottom 和 top 做过渡（padding-bottom:键盘高度 → 0）
   因为现在 layer 始终 height:100%，收键盘时 padding-bottom 从键盘高度平滑归零。 */
html.keyboard-closing .layer.show {
    transition: padding-bottom 0.15s ease-out, top 0.15s ease-out !important;
}

/* 确保所有layer始终有不透明背景 */
#layer-chat {
    background: #ededed !important;
}

/* [FIX-壁纸全屏v1] ★ #chat-history 默认背景色由CSS控制（从HTML inline移除）★
   这样 has-chat-wallpaper 的 transparent !important 才能可靠覆盖。
   内联 style 的 background 即使不带 !important，在某些浏览器的优先级计算中
   也可能与 CSS !important 产生冲突（尤其是简写vs分写属性交叉时）。 */
#chat-history {
    background-color: #ededed;
}

/* [FIX-安卓壁纸移动-2026-05-31] ★ 复用线下模式同款"背景不动"机制 ★
   原理：键盘弹出时 #layer-chat 高度恒为 100% 且 top:0 钉死（见上方 keyboard-active 规则），
   所以壁纸只要贴在 #layer-chat 上就天然静止。而 #chat-history 键盘时会加 margin-bottom，
   高度变化会让贴在它身上的 cover 背景重算 → 背景"动"。
   修复：有壁纸时让 #chat-history 背景透明，露出底下 #layer-chat 那张静止壁纸。
   键盘弹出时：layer 不动→壁纸静止；chat-history 透明→看不出 margin 变化；
   输入框照旧 transform 上移贴键盘→不飞天。完全不引入新覆盖层，输入框层叠不受影响。 */
/* [FIX-壁纸全屏v1] ★ 提高特异度，确保能覆盖所有主题/美化包的背景色声明 ★ */
html body #layer-chat.has-chat-wallpaper #chat-history {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* [FIX-安卓壁纸移动-2026-05-31-兜底] ★ 键盘态壁纸几何锁死 ★
   壁纸挂在 #layer-chat 上，键盘态下它 height:100%/top:0 钉死（见下方 keyboard-active 规则），
   理论上 cover 不会重算。这里再加一层显式兜底，彻底排除任何重算/位移来源：
   1. 键盘弹出(keyboard-active)和收起过渡(keyboard-closing)期间，
      强制 background 的尺寸/定位/附着方式固定不变；
   2. ★ 明确禁止对 background-* 做 transition ★ —— 防止某些主题/美化包
      给 #layer-chat 设了 transition: background 0.x，导致键盘瞬间 layer 高度
      被浏览器临时探测时背景产生补间动画（视觉上"飘一下"）。
   只锁几何属性，不写 background-image（图片值是动态 inline，由 JS 赋值并保护）。 */
html.keyboard-active #layer-chat.has-chat-wallpaper,
html.keyboard-closing #layer-chat.has-chat-wallpaper {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-origin: border-box !important;
    /* 背景绝不参与任何过渡动画，杜绝键盘动画期间壁纸补间位移 */
    transition-property: none !important;
}
/* [FIX-界面分裂-v8] 线下模式点击生成按钮时，键盘收起触发viewport resize，
   导致layer-chat高度短暂不足以覆盖全屏，露出底层layer-wechat的联系人列表。
   解决方案：layer-chat.show 强制使用 inset:0 全屏覆盖 + min-height 兜底
   [FIX-iOS键盘-v8] 不再声明 position:absolute — iOS 上由 ios-perf.css 统一为 fixed，
   非 iOS 设备保持 absolute（继承 .layer.show 的默认值）。
   声明 position 会与 ios-perf.css 的 fixed 优先级竞争，导致键盘弹起时闪白。 */
#layer-chat.show {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    min-height: 100% !important;
    height: auto !important;
}
/* [FIX-界面分裂] 线下模式生成中状态：锁定布局防止DOM重排导致的闪烁 */
#layer-chat.show.offline-generating {
    overflow: hidden !important;
}
#layer-offline-mode {
    background-color: #f5f5f5;
}

/* 防止overscroll穿透 */
.layer, .page {
    overscroll-behavior: contain !important;
}
.scroll-y {
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
}

/* [FIX-v11-滚动卡顿] 设置/美化界面专属滚动优化 */
/* 问题：contain: content 在嵌套滚动容器中会干扰浏览器的滚动优化 */
/* 解决：为设置/美化的滚动区域使用更宽松的contain，并确保touch-action正确 */
#layer-settings > .scroll-y,
#layer-settings .settings-subpage > .scroll-y,
#layer-beauty > .scroll-y,
#layer-beauty .beauty-subpage > .scroll-y {
    contain: layout style !important; /* 不使用content/size，避免干扰滚动计算 */
    touch-action: pan-y !important; /* 明确允许垂直滑动 */
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    will-change: scroll-position;
}
/* 确保设置/美化的layer本身不拦截子元素的触摸滚动 */
#layer-settings,
#layer-beauty {
    touch-action: auto !important;
}
/* 设置/美化子页面容器也需要正确的touch-action */
#layer-settings .settings-subpage,
#layer-beauty .beauty-subpage {
    touch-action: auto !important;
}
/* settings-menu 和 beauty-menu 作为直接滚动容器 */
#settings-menu,
#beauty-menu {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    will-change: scroll-position;
}

/* ===== 来电邀请弹窗样式 ===== */
.incoming-call-overlay {
    position: fixed; /* [FIX-来电按钮v2] 改为fixed，配合挂到body确保不被任何层遮挡 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001; /* [FIX-来电按钮v2] 提升到最高层级 */
    animation: incomingCallFadeIn 0.3s ease-out;
}

.incoming-call-overlay.dismissing {
    animation: incomingCallFadeOut 0.3s ease-in forwards;
}

.incoming-call-popup {
    background: linear-gradient(145deg, #fff0f3, #ffe0e6, #fff5f7);
    border-radius: 24px;
    padding: 35px 30px 28px;
    width: 280px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(255, 100, 130, 0.3), 0 0 0 1px rgba(255, 182, 193, 0.3);
    animation: incomingCallPopup 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.incoming-call-avatar {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 18px;
}

.incoming-call-avatar img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ffb6c1;
    position: relative;
    z-index: 2;
}

.incoming-call-avatar-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255, 182, 193, 0.4);
    z-index: 1;
    animation: incomingCallPulse 1.5s ease-in-out infinite;
}

.incoming-call-name {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.incoming-call-label {
    font-size: 14px;
    color: #e8808a;
    margin-bottom: 30px;
    font-weight: 500;
}

.incoming-call-buttons {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.incoming-call-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s;
    touch-action: manipulation; /* [FIX-来电按钮] 消除移动端触摸延迟 */
    -webkit-tap-highlight-color: transparent;
}

.incoming-call-btn:active {
    transform: scale(0.9);
}

.incoming-call-btn i {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.incoming-call-btn.reject i {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
}

.incoming-call-btn.accept i {
    background: linear-gradient(135deg, #51cf66, #2ecc71);
}

.incoming-call-btn span {
    font-size: 12px;
    color: #888;
    font-weight: 500;
}

.incoming-call-btn.reject span {
    color: #e74c3c;
}

.incoming-call-btn.accept span {
    color: #27ae60;
}

@keyframes incomingCallFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes incomingCallFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

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

@keyframes incomingCallPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.2;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
}

/* ===== 智能推荐回复 Smart Reply ===== */
.smart-reply-bar {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background: #f7f7f7;
    border-top: 1px solid #e8e8e8;
    gap: 6px;
    flex-shrink: 0;
    overflow: hidden;
    /* [FIX-键盘平滑] 键盘弹出/收起时位置平滑过渡 */
    transition: bottom 0.15s ease-out;
}

.smart-reply-list {
    display: flex;
    flex: 1;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 2px 0;
}

.smart-reply-list::-webkit-scrollbar {
    display: none;
}

.smart-reply-item {
    flex-shrink: 0;
    max-width: 70vw;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    line-height: 1.4;
    scroll-snap-align: start;
}

.smart-reply-item:hover {
    background: #e8f4e8;
    border-color: #07c160;
    color: #07c160;
}

.smart-reply-item:active {
    transform: scale(0.96);
    background: #d4edda;
}

.smart-reply-refresh {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.smart-reply-refresh:hover {
    color: #07c160;
    background: #e8f4e8;
}

.smart-reply-refresh:active {
    transform: scale(0.9);
}

.smart-reply-refresh.spinning i {
    animation: smartReplySpin 0.6s ease;
}

@keyframes smartReplySpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.smart-reply-loading {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #999;
    font-size: 12px;
    padding: 4px 0;
    flex: 1;
}

.smart-reply-loading .dot-pulse {
    display: inline-flex;
    gap: 3px;
}

.smart-reply-loading .dot-pulse span {
    width: 4px;
    height: 4px;
    background: #999;
    border-radius: 50%;
    animation: smartReplyDot 1.2s infinite;
}

.smart-reply-loading .dot-pulse span:nth-child(2) {
    animation-delay: 0.2s;
}

.smart-reply-loading .dot-pulse span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes smartReplyDot {
    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
    30% { opacity: 1; transform: scale(1.2); }
}


/* 时空系统推荐回复 - 深色主题适配 */
.st-smart-reply-bar {
    flex-shrink: 0;
    background: rgba(13, 13, 43, 0.9) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: none;
}

.st-smart-reply-bar .smart-reply-item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
}

.st-smart-reply-bar .smart-reply-item:hover {
    background: rgba(138, 100, 255, 0.2);
    border-color: rgba(138, 100, 255, 0.5);
    color: #c4a8ff;
}

.st-smart-reply-bar .smart-reply-item:active {
    background: rgba(138, 100, 255, 0.3);
}

.st-smart-reply-bar .smart-reply-refresh {
    color: rgba(255, 255, 255, 0.4);
}

.st-smart-reply-bar .smart-reply-refresh:hover {
    color: #c4a8ff;
    background: rgba(138, 100, 255, 0.15);
}

.st-smart-reply-bar .smart-reply-loading {
    color: rgba(255, 255, 255, 0.5);
}

.st-smart-reply-bar .smart-reply-loading .dot-pulse span {
    background: rgba(255, 255, 255, 0.5);
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  美化界面 (#layer-beauty) — 黑白二次元动漫便签风格           ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── 美化页导航栏 ── */
#layer-beauty > .nav-bar {
    background: #fff !important;
    border-bottom: 2.5px solid #1a1a1a !important;
    box-shadow: 0 3px 0px #1a1a1a !important;
}
#layer-beauty > .nav-bar .nav-title {
    font-family: 'Courier New', monospace !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    color: #1a1a1a !important;
    font-size: 17px !important;
}
#layer-beauty > .nav-bar .nav-icon {
    color: #1a1a1a !important;
}
#layer-beauty > .nav-bar .nav-icon:active {
    opacity: 0.5 !important;
    transform: scale(0.9) !important;
}

/* ── 美化主菜单背景：便签纸网格纹理 ── */
#beauty-menu {
    background: #f5f3ef !important;
    background-image:
        linear-gradient(0deg, transparent 95%, rgba(0,0,0,0.03) 95%),
        linear-gradient(90deg, transparent 95%, rgba(0,0,0,0.03) 95%) !important;
    background-size: 20px 20px !important;
}

/* ── 美化菜单列表项：便签卡片风 ── */
#layer-beauty .beauty-menu-item {
    background: #fff !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 2px !important;
    box-shadow: 3px 3px 0px #1a1a1a !important;
    padding: 18px 16px !important;
    position: relative !important;
    transition: transform 0.1s, box-shadow 0.1s !important;
}
#layer-beauty .beauty-menu-item:active {
    transform: translate(1px, 1px) !important;
    box-shadow: 1px 1px 0px #1a1a1a !important;
}

/* 菜单图标 */
#layer-beauty .beauty-menu-icon {
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: #1a1a1a !important;
}
#layer-beauty .beauty-menu-icon i {
    color: #1a1a1a !important;
}

/* 菜单文字 */
#layer-beauty .beauty-menu-title {
    font-family: 'Courier New', monospace !important;
    font-weight: 900 !important;
    color: #1a1a1a !important;
    letter-spacing: 0.5px !important;
}
#layer-beauty .beauty-menu-desc {
    color: #888 !important;
    font-size: 12px !important;
}

/* 菜单箭头 */
#layer-beauty .beauty-menu-arrow {
    color: #1a1a1a !important;
}

/* ── 美化子页面背景 ── */
#layer-beauty .beauty-subpage > .scroll-y {
    background: #f5f3ef !important;
    background-image:
        linear-gradient(0deg, transparent 95%, rgba(0,0,0,0.03) 95%),
        linear-gradient(90deg, transparent 95%, rgba(0,0,0,0.03) 95%) !important;
    background-size: 20px 20px !important;
}

/* ── 美化区块卡片 (.beauty-section-card)：便签风 ── */
#layer-beauty .beauty-section-card {
    background: #fff !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 2px !important;
    box-shadow: 3px 3px 0px #1a1a1a !important;
    overflow: visible !important;
    position: relative !important;
}

/* 区块标题 */
#layer-beauty .beauty-section-header {
    border-bottom: 2px dashed #ccc !important;
    background: #fff !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}
#layer-beauty .beauty-section-header span {
    color: #1a1a1a !important;
}
#layer-beauty .beauty-section-header i {
    color: #1a1a1a !important;
}

/* ── 美化操作按钮 ── */
#layer-beauty .beauty-action-btn {
    border: 2px solid #1a1a1a !important;
    border-radius: 0 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    background: #1a1a1a !important;
    color: #fff !important;
    box-shadow: 3px 3px 0px #555 !important;
    transition: all 0.1s !important;
}
#layer-beauty .beauty-action-btn:active {
    transform: translate(1px, 1px) !important;
    box-shadow: 1px 1px 0px #555 !important;
}
/* 重置按钮变体 */
#layer-beauty .beauty-action-btn.reset {
    background: #fff !important;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    box-shadow: 3px 3px 0px #1a1a1a !important;
}
/* mini按钮变体 */
#layer-beauty .beauty-action-btn.mini {
    border-radius: 0 !important;
}
/* preset按钮变体 */
#layer-beauty .beauty-action-btn.preset {
    background: #555 !important;
    border-color: #1a1a1a !important;
    box-shadow: 3px 3px 0px #1a1a1a !important;
}
/* 带内联样式的按钮覆盖 */
#layer-beauty .beauty-action-btn[style*="background:#111"],
#layer-beauty .beauty-action-btn[style*="background: #111"],
#layer-beauty .beauty-action-btn[style*="background:rgb(17"] {
    border: 2px solid #1a1a1a !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0px #555 !important;
}
#layer-beauty .beauty-action-btn[style*="background:#f5f5f5"],
#layer-beauty .beauty-action-btn[style*="background: #f5f5f5"],
#layer-beauty .beauty-action-btn[style*="background: rgb(245"] {
    background: #fff !important;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0px #1a1a1a !important;
}

/* ── 美化组件标签页 (.beauty-comp-tabs) ── */
#layer-beauty .beauty-comp-tabs {
    border: 2px solid #1a1a1a !important;
    border-radius: 0 !important;
    background: #fff !important;
    overflow: hidden !important;
}
#layer-beauty .beauty-comp-tab {
    border-right: 2px solid #1a1a1a !important;
    color: #1a1a1a !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    transition: all 0.1s !important;
}
#layer-beauty .beauty-comp-tab:last-child {
    border-right: none !important;
}
#layer-beauty .beauty-comp-tab.active {
    background: #1a1a1a !important;
    color: #fff !important;
    font-weight: 900 !important;
}

/* ── 美化模式切换按钮 (.beauty-mode-toggle) ── */
#layer-beauty .beauty-mode-toggle {
    background: #f0f0f0 !important;
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}
#layer-beauty .beauty-mode-btn {
    color: #1a1a1a !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
}
#layer-beauty .beauty-mode-btn.active {
    background: #fff !important;
    color: #1a1a1a !important;
    border-radius: 0 !important;
    box-shadow: 2px 2px 0px #1a1a1a !important;
}

/* ── 美化 form-cell/form-label ── */
#layer-beauty .form-cell {
    border-bottom: 1.5px dashed #ccc !important;
}
#layer-beauty .form-cell:last-child {
    border-bottom: none !important;
}
#layer-beauty .form-label {
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

/* ── 美化页面中的 input/select ── */
#layer-beauty input[type="text"],
#layer-beauty input[type="number"],
#layer-beauty input[type="url"],
#layer-beauty textarea,
#layer-beauty select {
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
    background: #fafafa !important;
    color: #1a1a1a !important;
    font-family: inherit !important;
}
#layer-beauty input[type="text"]:focus,
#layer-beauty input[type="number"]:focus,
#layer-beauty input[type="url"]:focus,
#layer-beauty textarea:focus,
#layer-beauty select:focus {
    outline: none !important;
    background: #fff !important;
    box-shadow: 2px 2px 0px #1a1a1a !important;
}

/* range滑块 - 保持功能但调整外观 */
#layer-beauty input[type="range"] {
    accent-color: #1a1a1a !important;
}

/* color颜色选择器 */
#layer-beauty input[type="color"] {
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
}

/* ── 美化页面开关 ── */
#layer-beauty .switch .slider {
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
    background: #eee !important;
}
#layer-beauty .switch .slider::before {
    border-radius: 0 !important;
    border: 1px solid #1a1a1a !important;
}
#layer-beauty .switch input:checked + .slider {
    background: #1a1a1a !important;
}

/* ── 图片预览框 ── */
#layer-beauty .comp-img-preview {
    border: 2px dashed #1a1a1a !important;
    border-radius: 0 !important;
    background: #f9f9f9 !important;
}

/* ── 图标预览区 ── */
#layer-beauty #icon-size-preview {
    background: #f5f3ef !important;
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
}

/* ── 美化页label文字 ── */
#layer-beauty label {
    color: #1a1a1a !important;
    font-family: 'Courier New', monospace !important;
}

/* ── 便签折角装饰（美化区块卡片） ── */
#layer-beauty .beauty-section-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 18px 18px 0;
    border-color: transparent #f5f3ef transparent transparent;
    filter: drop-shadow(-1px 1px 0px rgba(0,0,0,0.1));
}

/* ── 字体预设项 ── */
#layer-beauty .font-preset-item {
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
    background: #fff !important;
    margin-bottom: 8px !important;
}
#layer-beauty .font-preset-item .fp-name {
    font-family: 'Courier New', monospace !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
}
#layer-beauty .font-preset-item .fp-actions button {
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
}
#layer-beauty .fp-load-btn {
    background: #1a1a1a !important;
    color: #fff !important;
    box-shadow: 2px 2px 0px #555 !important;
}
#layer-beauty .fp-del-btn {
    background: #fff !important;
    color: #1a1a1a !important;
    box-shadow: 2px 2px 0px #1a1a1a !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  设置界面 (#layer-settings) — 黑白二次元动漫便签风格        ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── 设置页导航栏 ── */
#layer-settings > .nav-bar {
    background: #fff !important;
    border-bottom: 2.5px solid #1a1a1a !important;
    box-shadow: 0 3px 0px #1a1a1a !important;
}
#layer-settings > .nav-bar .nav-title {
    font-family: 'Courier New', monospace !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    color: #1a1a1a !important;
    font-size: 17px !important;
}
#layer-settings > .nav-bar .nav-icon {
    color: #1a1a1a !important;
}
#layer-settings > .nav-bar .nav-icon:active {
    opacity: 0.5 !important;
    transform: scale(0.9) !important;
}

/* ── 设置主菜单背景：便签纸网格纹理 ── */
#settings-menu {
    background: #f5f3ef !important;
    background-image:
        linear-gradient(0deg, transparent 95%, rgba(0,0,0,0.03) 95%),
        linear-gradient(90deg, transparent 95%, rgba(0,0,0,0.03) 95%) !important;
    background-size: 20px 20px !important;
}

/* ── 设置导航列表项：便签卡片风 ── */
#layer-settings .settings-nav-item {
    background: #fff !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 2px !important;
    box-shadow: 3px 3px 0px #1a1a1a !important;
    padding: 18px 16px !important;
    position: relative !important;
    transition: transform 0.1s, box-shadow 0.1s !important;
}
#layer-settings .settings-nav-item:active {
    transform: translate(1px, 1px) !important;
    box-shadow: 1px 1px 0px #1a1a1a !important;
}

/* 设置图标 */
#layer-settings .settings-nav-icon-i {
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: #1a1a1a !important;
}

/* 设置文字 */
#layer-settings .settings-nav-title-text {
    font-family: 'Courier New', monospace !important;
    font-weight: 900 !important;
    color: #1a1a1a !important;
    letter-spacing: 0.5px !important;
}
#layer-settings .settings-nav-desc {
    color: #888 !important;
    font-size: 12px !important;
}

/* 设置箭头 */
#layer-settings .settings-nav-arrow {
    color: #1a1a1a !important;
}

/* ── 设置子页面背景 ── */
#layer-settings .settings-subpage > .scroll-y {
    background: #f5f3ef !important;
    background-image:
        linear-gradient(0deg, transparent 95%, rgba(0,0,0,0.03) 95%),
        linear-gradient(90deg, transparent 95%, rgba(0,0,0,0.03) 95%) !important;
    background-size: 20px 20px !important;
}

/* ── 设置区块卡片 (.beauty-section-card)：便签风 ── */
#layer-settings .beauty-section-card {
    background: #fff !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 2px !important;
    box-shadow: 3px 3px 0px #1a1a1a !important;
    overflow: visible !important;
    position: relative !important;
}

/* 区块标题 */
#layer-settings .beauty-section-header {
    border-bottom: 2px dashed #ccc !important;
    background: #fff !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}
#layer-settings .beauty-section-header span {
    color: #1a1a1a !important;
}
#layer-settings .beauty-section-header i {
    color: #1a1a1a !important;
}

/* ── 便签折角装饰（设置区块卡片） ── */
#layer-settings .beauty-section-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 18px 18px 0;
    border-color: transparent #f5f3ef transparent transparent;
    filter: drop-shadow(-1px 1px 0px rgba(0,0,0,0.1));
}

/* ── 设置操作按钮 ── */
#layer-settings .beauty-action-btn {
    border: 2px solid #1a1a1a !important;
    border-radius: 0 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    background: #1a1a1a !important;
    color: #fff !important;
    box-shadow: 3px 3px 0px #555 !important;
    transition: all 0.1s !important;
}
#layer-settings .beauty-action-btn:active {
    transform: translate(1px, 1px) !important;
    box-shadow: 1px 1px 0px #555 !important;
}
/* 重置按钮变体 */
#layer-settings .beauty-action-btn.reset {
    background: #fff !important;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    box-shadow: 3px 3px 0px #1a1a1a !important;
}
/* mini按钮 */
#layer-settings .beauty-action-btn.mini {
    border-radius: 0 !important;
}
/* preset按钮 */
#layer-settings .beauty-action-btn.preset {
    background: #555 !important;
    border-color: #1a1a1a !important;
    box-shadow: 3px 3px 0px #1a1a1a !important;
}
/* 危险按钮：保持红色但加黑白边框 */
#layer-settings .beauty-action-btn[style*="background:#fa5151"],
#layer-settings .beauty-action-btn[style*="background: rgb(250, 81, 81)"] {
    border: 2px solid #1a1a1a !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0px #1a1a1a !important;
    font-family: 'Courier New', monospace !important;
}
/* 紫色导入导出按钮 */
#layer-settings .beauty-action-btn[style*="background:#5856d6"],
#layer-settings .beauty-action-btn[style*="background: rgb(88, 86, 214)"] {
    background: #333 !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0px #1a1a1a !important;
    font-family: 'Courier New', monospace !important;
}

/* ── 设置 form-cell/form-label ── */
#layer-settings .form-cell {
    border-bottom: 1.5px dashed #ccc !important;
}
#layer-settings .form-cell:last-child {
    border-bottom: none !important;
}
#layer-settings .form-label {
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

/* ── 设置页面中的 input/select ── */
#layer-settings input[type="text"],
#layer-settings input[type="number"],
#layer-settings input[type="url"],
#layer-settings input[type="date"],
#layer-settings textarea,
#layer-settings select {
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
    background: #fafafa !important;
    color: #1a1a1a !important;
    font-family: inherit !important;
}
#layer-settings input[type="text"]:focus,
#layer-settings input[type="number"]:focus,
#layer-settings input[type="url"]:focus,
#layer-settings input[type="date"]:focus,
#layer-settings textarea:focus,
#layer-settings select:focus {
    outline: none !important;
    background: #fff !important;
    box-shadow: 2px 2px 0px #1a1a1a !important;
}
/* placeholder */
#layer-settings input::placeholder,
#layer-settings textarea::placeholder {
    color: #aaa !important;
    font-family: 'Courier New', monospace !important;
}

/* range滑块 */
#layer-settings input[type="range"] {
    accent-color: #1a1a1a !important;
}

/* color颜色选择器 */
#layer-settings input[type="color"] {
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
}

/* ── 设置页面开关 ── */
#layer-settings .switch .slider {
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
    background: #eee !important;
}
#layer-settings .switch .slider::before {
    border-radius: 0 !important;
    border: 1px solid #1a1a1a !important;
}
#layer-settings .switch input:checked + .slider {
    background: #1a1a1a !important;
}

/* ── 设置页label文字 ── */
#layer-settings label {
    color: #1a1a1a !important;
    font-family: 'Courier New', monospace !important;
}

/* ── 设置 group-box（如锁屏壁纸预览等区域） ── */
#layer-settings .group-box {
    background: #fff !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 2px !important;
    box-shadow: 3px 3px 0px #1a1a1a !important;
    position: relative !important;
}

/* ── STT 提供商按钮 ── */
#layer-settings .stt-provider-btn {
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #1a1a1a !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
    box-shadow: 2px 2px 0px #1a1a1a !important;
    transition: all 0.1s !important;
}
#layer-settings .stt-provider-btn.active {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
    box-shadow: 1px 1px 0px #555 !important;
}
#layer-settings .stt-provider-btn:active {
    transform: translate(1px, 1px) !important;
    box-shadow: 0 0 0 #1a1a1a !important;
}

/* ── 生图提供商按钮 ── */
#layer-settings .imggen-provider-btn {
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #1a1a1a !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
    box-shadow: 2px 2px 0px #1a1a1a !important;
    transition: all 0.1s !important;
}
#layer-settings .imggen-provider-btn.active {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
    box-shadow: 1px 1px 0px #555 !important;
}
#layer-settings .imggen-provider-btn:active {
    transform: translate(1px, 1px) !important;
    box-shadow: 0 0 0 #1a1a1a !important;
}

/* ── 锁屏壁纸预览区域 ── */
#layer-settings #lockscreen-wallpaper-preview {
    border: 2px dashed #1a1a1a !important;
    border-radius: 0 !important;
    background: #f0f0f0 !important;
}

/* ── API预设列表项 ── */
#layer-settings #api-preset-list > div {
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: 2px 2px 0px #1a1a1a !important;
    margin-bottom: 8px !important;
}

/* ── 通用描述性文字 ── */
#layer-settings p,
#layer-beauty p {
    font-family: inherit !important;
}

/* ── 设置/美化 子页面描述性小字 ── */
#layer-settings .settings-subpage .scroll-y > div[style*="font-size:12px"],
#layer-settings .settings-subpage .scroll-y > div[style*="font-size: 12px"],
#layer-beauty .beauty-subpage .scroll-y > div[style*="font-size:12px"],
#layer-beauty .beauty-subpage .scroll-y > div[style*="font-size: 12px"] {
    font-family: 'Courier New', monospace !important;
    color: #999 !important;
}

/* ── 通用：设置/美化内的 inline button（如确定按钮） ── */
#layer-settings button:not(.beauty-action-btn):not(.stt-provider-btn):not(.imggen-provider-btn):not(.nav-icon):not(.switch *) {
    font-family: 'Courier New', monospace !important;
}
#layer-beauty button:not(.beauty-action-btn):not(.beauty-comp-tab):not(.beauty-mode-btn):not(.nav-icon):not(.switch *) {
    font-family: 'Courier New', monospace !important;
}

/* ── 后台保活设置状态文字 ── */
#layer-settings #keepalive-status {
    font-family: 'Courier New', monospace !important;
}

/* ── 聊天设置页面 (#layer-chat-settings) 补充样式 ── */
#layer-chat-settings .beauty-section-card {
    background: #fff !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 2px !important;
    box-shadow: 3px 3px 0px #1a1a1a !important;
    overflow: visible !important;
    position: relative !important;
}
#layer-chat-settings .beauty-section-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 18px 18px 0;
    border-color: transparent #f5f3ef transparent transparent;
    filter: drop-shadow(-1px 1px 0px rgba(0,0,0,0.1));
}
#layer-chat-settings .beauty-section-header {
    border-bottom: 2px dashed #ccc !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}
#layer-chat-settings .beauty-action-btn {
    border: 2px solid #1a1a1a !important;
    border-radius: 0 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
    box-shadow: 3px 3px 0px #555 !important;
}
#layer-chat-settings .beauty-action-btn:active {
    transform: translate(1px, 1px) !important;
    box-shadow: 1px 1px 0px #555 !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  补充样式：CSS输入框/布局排序/预览区等                       ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── CSS代码输入框 (.css-input) ── */
#layer-beauty .css-input {
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
    background: #fafafa !important;
    color: #1a1a1a !important;
    font-family: 'Courier New', monospace !important;
}
#layer-beauty .css-input:focus {
    outline: none !important;
    background: #fff !important;
    box-shadow: 2px 2px 0px #1a1a1a !important;
}

/* ── 布局排序 v3 (毛玻璃质感 override) ── */
/* 便签风主题下用纯白不透明卡片，保持与整体一致 */
#layer-beauty .lo-section {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}
#layer-beauty .lo-order-item {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}
#layer-beauty .lo-order-item:active {
    transform: scale(0.985) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}
#layer-beauty .lo-order-item.lo-drag-over {
    border-color: rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04) !important;
}
#layer-beauty .lo-item-icon {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.04) !important;
    color: #4a4a4a !important;
}
#layer-beauty .lo-item-title {
    font-weight: 550 !important;
    color: #1a1a1a !important;
    letter-spacing: -0.3px !important;
}
#layer-beauty .lo-item-desc {
    color: #a0a0a5 !important;
}
#layer-beauty .lo-item-arrows button {
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 7px !important;
}
#layer-beauty .lo-item-arrows button:active {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: transparent !important;
    transform: scale(0.9) !important;
}
#layer-beauty .lo-page-tabs {
    background: rgba(255, 255, 255, 0.45) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}
#layer-beauty .lo-page-tab.active {
    background: rgba(255, 255, 255, 0.85) !important;
    color: #1a1a1a !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}
#layer-beauty .lo-range::-webkit-slider-thumb {
    background: #1a1a1a !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
}
#layer-beauty .lo-btn-save {
    background: #1a1a1a !important;
    color: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
#layer-beauty .lo-btn-save:active {
    background: #000 !important;
    transform: scale(0.97) !important;
}
#layer-beauty .lo-btn-reset {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    color: #555 !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
#layer-beauty .lo-btn-reset:active {
    background: rgba(0, 0, 0, 0.03) !important;
    transform: scale(0.97) !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  body.theme-mono 覆盖：将便签风改为布局排序卡片圆润风格     ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* --- 美化app (#layer-beauty) --- */
body.theme-mono #layer-beauty > .nav-bar {
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}
body.theme-mono #layer-beauty > .nav-bar .nav-title {
    font-family: var(--mo-font) !important;
    font-weight: 600 !important;
    letter-spacing: -0.3px !important;
    color: #1a1a1a !important;
}
body.theme-mono #layer-beauty > .nav-bar .nav-icon {
    color: #1a1a1a !important;
}
body.theme-mono #beauty-menu {
    background: var(--mo-bg) !important;
    background-image: none !important;
}
body.theme-mono #layer-beauty .beauty-subpage > .scroll-y {
    background: var(--mo-bg) !important;
    background-image: none !important;
}
body.theme-mono #layer-beauty .beauty-menu-item {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    padding: 14px 12px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.theme-mono #layer-beauty .beauty-menu-item:active {
    transform: scale(0.985) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    background: rgba(255, 255, 255, 0.9) !important;
}
body.theme-mono #layer-beauty .beauty-menu-icon {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.04) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: #4a4a4a !important;
}
body.theme-mono #layer-beauty .beauty-menu-icon i {
    color: #4a4a4a !important;
}
body.theme-mono #layer-beauty .beauty-menu-title {
    font-family: var(--mo-font) !important;
    font-weight: 550 !important;
    color: #1a1a1a !important;
    letter-spacing: -0.3px !important;
    font-size: 13.5px !important;
}
body.theme-mono #layer-beauty .beauty-menu-desc {
    color: #a0a0a5 !important;
    font-family: var(--mo-font) !important;
    font-size: 11px !important;
}
body.theme-mono #layer-beauty .beauty-menu-arrow {
    color: #ccc !important;
}
body.theme-mono #layer-beauty .beauty-section-card {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}
body.theme-mono #layer-beauty .beauty-section-card::after {
    display: none !important;
    content: none !important;
    border: none !important;
}
body.theme-mono #layer-beauty .beauty-section-header {
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.05) !important;
    background: transparent !important;
    font-family: var(--mo-font) !important;
    font-weight: 550 !important;
    color: #1a1a1a !important;
}
body.theme-mono #layer-beauty .beauty-section-header span {
    color: #1a1a1a !important;
    font-family: var(--mo-font) !important;
}
body.theme-mono #layer-beauty .beauty-section-header i {
    color: #a0a0a5 !important;
}
body.theme-mono #layer-beauty .beauty-action-btn {
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    font-family: var(--mo-font) !important;
    font-weight: 550 !important;
    font-size: 12.5px !important;
    letter-spacing: -0.1px !important;
    background: #1a1a1a !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.theme-mono #layer-beauty .beauty-action-btn:active {
    transform: scale(0.96) !important;
    background: #000 !important;
    box-shadow: none !important;
}
body.theme-mono #layer-beauty .beauty-action-btn.reset {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #666 !important;
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
}
body.theme-mono #layer-beauty .beauty-action-btn.mini {
    border-radius: 7px !important;
}
body.theme-mono #layer-beauty .beauty-action-btn.preset {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #1a1a1a !important;
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
}
body.theme-mono #layer-beauty .beauty-action-btn[style*="background:#111"],
body.theme-mono #layer-beauty .beauty-action-btn[style*="background: #111"],
body.theme-mono #layer-beauty .beauty-action-btn[style*="background:rgb(17"] {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}
body.theme-mono #layer-beauty .beauty-action-btn[style*="background:#f5f5f5"],
body.theme-mono #layer-beauty .beauty-action-btn[style*="background: #f5f5f5"],
body.theme-mono #layer-beauty .beauty-action-btn[style*="background: rgb(245"] {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #1a1a1a !important;
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
body.theme-mono #layer-beauty .beauty-comp-tabs {
    background: rgba(255, 255, 255, 0.45) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    padding: 3px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}
body.theme-mono #layer-beauty .beauty-comp-tab {
    border-radius: 8px !important;
    color: #a0a0a5 !important;
    border-right: none !important;
    font-family: var(--mo-font) !important;
    font-weight: 550 !important;
    font-size: 12px !important;
}
body.theme-mono #layer-beauty .beauty-comp-tab:last-child {
    border-right: none !important;
}
body.theme-mono #layer-beauty .beauty-comp-tab.active {
    background: rgba(255, 255, 255, 0.85) !important;
    color: #1a1a1a !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    font-weight: 600 !important;
}
body.theme-mono #layer-beauty .beauty-mode-toggle {
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.45) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.06) !important;
    padding: 3px !important;
}
body.theme-mono #layer-beauty .beauty-mode-btn {
    border-radius: 8px !important;
    font-family: var(--mo-font) !important;
    color: #a0a0a5 !important;
    font-weight: 550 !important;
}
body.theme-mono #layer-beauty .beauty-mode-btn.active {
    background: rgba(255, 255, 255, 0.85) !important;
    color: #1a1a1a !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}
body.theme-mono #layer-beauty .form-cell {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    padding: 14px 12px !important;
    margin-bottom: 6px !important;
    border-bottom: none !important;
}
body.theme-mono #layer-beauty .form-cell:last-child {
    border-bottom: none !important;
}
body.theme-mono #layer-beauty .form-label {
    font-family: var(--mo-font) !important;
    font-weight: 550 !important;
    color: #1a1a1a !important;
    font-size: 13.5px !important;
}
body.theme-mono #layer-beauty input[type="text"],
body.theme-mono #layer-beauty input[type="number"],
body.theme-mono #layer-beauty input[type="url"],
body.theme-mono #layer-beauty textarea,
body.theme-mono #layer-beauty select {
    border: 0.5px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.6) !important;
    color: #1a1a1a !important;
    font-family: var(--mo-font) !important;
}
body.theme-mono #layer-beauty input[type="text"]:focus,
body.theme-mono #layer-beauty input[type="number"]:focus,
body.theme-mono #layer-beauty input[type="url"]:focus,
body.theme-mono #layer-beauty textarea:focus,
body.theme-mono #layer-beauty select:focus {
    outline: none !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04) !important;
}
body.theme-mono #layer-beauty input[type="color"] {
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
}
body.theme-mono #layer-beauty .switch .slider {
    border: 0.5px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 999px !important;
    background: #e8e8ea !important;
}
body.theme-mono #layer-beauty .switch .slider::before {
    border-radius: 50% !important;
    border: none !important;
}
body.theme-mono #layer-beauty .switch input:checked + .slider {
    background: #1a1a1a !important;
}
body.theme-mono #layer-beauty .comp-img-preview {
    border: 1.5px dashed rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.5) !important;
}
body.theme-mono #layer-beauty #icon-size-preview {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 12px !important;
}
body.theme-mono #layer-beauty label {
    color: #1a1a1a !important;
    font-family: var(--mo-font) !important;
}
body.theme-mono #layer-beauty .css-input {
    border: 0.5px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.6) !important;
    color: #1a1a1a !important;
    font-family: var(--mo-font-mono) !important;
}
body.theme-mono #layer-beauty .css-input:focus {
    outline: none !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04) !important;
}
body.theme-mono #layer-beauty .font-preset-item {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    margin-bottom: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}
body.theme-mono #layer-beauty .font-preset-item .fp-name {
    font-family: var(--mo-font) !important;
    color: #1a1a1a !important;
    font-weight: 550 !important;
}
body.theme-mono #layer-beauty .font-preset-item .fp-actions button {
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 7px !important;
    font-family: var(--mo-font) !important;
    font-weight: 550 !important;
}
body.theme-mono #layer-beauty .fp-load-btn {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
body.theme-mono #layer-beauty .fp-del-btn {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #666 !important;
    box-shadow: none !important;
}
body.theme-mono #layer-beauty #bubble-preview-area {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 14px !important;
    padding: 15px !important;
}
body.theme-mono #layer-beauty button:not(.beauty-action-btn):not(.beauty-comp-tab):not(.beauty-mode-btn):not(.nav-icon):not(.switch *) {
    font-family: var(--mo-font) !important;
}

/* --- 设置app (#layer-settings) --- */
body.theme-mono #layer-settings > .nav-bar {
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}
body.theme-mono #layer-settings > .nav-bar .nav-title {
    font-family: var(--mo-font) !important;
    font-weight: 600 !important;
    letter-spacing: -0.3px !important;
    color: #1a1a1a !important;
}
body.theme-mono #settings-menu {
    background: var(--mo-bg) !important;
    background-image: none !important;
}
body.theme-mono #layer-settings .settings-subpage > .scroll-y {
    background: var(--mo-bg) !important;
    background-image: none !important;
}
body.theme-mono #layer-settings .settings-nav-item {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    padding: 14px 12px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.theme-mono #layer-settings .settings-nav-item:active {
    transform: scale(0.985) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    background: rgba(255, 255, 255, 0.9) !important;
}
body.theme-mono #layer-settings .settings-nav-icon-i {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    color: #4a4a4a !important;
}
body.theme-mono #layer-settings .settings-nav-title-text {
    font-family: var(--mo-font) !important;
    font-weight: 550 !important;
    color: #1a1a1a !important;
    letter-spacing: -0.3px !important;
    font-size: 13.5px !important;
}
body.theme-mono #layer-settings .settings-nav-desc {
    color: #a0a0a5 !important;
    font-size: 11px !important;
    font-family: var(--mo-font) !important;
}
body.theme-mono #layer-settings .settings-nav-arrow {
    color: #ccc !important;
}
body.theme-mono #layer-settings .beauty-section-card {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}
body.theme-mono #layer-settings .beauty-section-card::after {
    display: none !important;
    content: none !important;
    border: none !important;
}
body.theme-mono #layer-settings .beauty-section-header {
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.05) !important;
    background: transparent !important;
    font-family: var(--mo-font) !important;
    font-weight: 550 !important;
    color: #1a1a1a !important;
}
body.theme-mono #layer-settings .beauty-section-header span {
    color: #1a1a1a !important;
    font-family: var(--mo-font) !important;
}
body.theme-mono #layer-settings .beauty-section-header i {
    color: #a0a0a5 !important;
}
body.theme-mono #layer-settings .form-cell {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    padding: 14px 12px !important;
    margin-bottom: 6px !important;
    border-bottom: none !important;
}
body.theme-mono #layer-settings .form-cell:last-child {
    border-bottom: none !important;
}
body.theme-mono #layer-settings .form-label {
    font-family: var(--mo-font) !important;
    font-weight: 550 !important;
    color: #1a1a1a !important;
    font-size: 13.5px !important;
}
body.theme-mono #layer-settings .beauty-action-btn {
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    font-family: var(--mo-font) !important;
    font-weight: 550 !important;
    font-size: 12.5px !important;
    background: #1a1a1a !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.theme-mono #layer-settings .beauty-action-btn:active {
    transform: scale(0.96) !important;
    background: #000 !important;
    box-shadow: none !important;
}
body.theme-mono #layer-settings .beauty-action-btn.reset {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #666 !important;
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
}
body.theme-mono #layer-settings .beauty-action-btn.mini {
    border-radius: 7px !important;
}
body.theme-mono #layer-settings .beauty-action-btn.preset {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #1a1a1a !important;
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
}
body.theme-mono #layer-settings .beauty-action-btn[style*="background:#fa5151"],
body.theme-mono #layer-settings .beauty-action-btn[style*="background: rgb(250, 81, 81)"] {
    border: 0.5px solid rgba(250, 81, 81, 0.2) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 4px rgba(250, 81, 81, 0.12) !important;
    font-family: var(--mo-font) !important;
}
body.theme-mono #layer-settings .beauty-action-btn[style*="background:#5856d6"],
body.theme-mono #layer-settings .beauty-action-btn[style*="background: rgb(88, 86, 214)"] {
    background: #1a1a1a !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    font-family: var(--mo-font) !important;
}
body.theme-mono #layer-settings input[type="text"],
body.theme-mono #layer-settings input[type="number"],
body.theme-mono #layer-settings input[type="url"],
body.theme-mono #layer-settings input[type="date"],
body.theme-mono #layer-settings textarea,
body.theme-mono #layer-settings select {
    border: 0.5px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.6) !important;
    color: #1a1a1a !important;
    font-family: var(--mo-font) !important;
}
body.theme-mono #layer-settings input[type="text"]:focus,
body.theme-mono #layer-settings input[type="number"]:focus,
body.theme-mono #layer-settings input[type="url"]:focus,
body.theme-mono #layer-settings input[type="date"]:focus,
body.theme-mono #layer-settings textarea:focus,
body.theme-mono #layer-settings select:focus {
    outline: none !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04) !important;
}
body.theme-mono #layer-settings input::placeholder,
body.theme-mono #layer-settings textarea::placeholder {
    color: #a0a0a5 !important;
    font-family: var(--mo-font) !important;
}
body.theme-mono #layer-settings input[type="color"] {
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
}
body.theme-mono #layer-settings .switch .slider {
    border: 0.5px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 999px !important;
    background: #e8e8ea !important;
}
body.theme-mono #layer-settings .switch .slider::before {
    border-radius: 50% !important;
    border: none !important;
}
body.theme-mono #layer-settings .switch input:checked + .slider {
    background: #1a1a1a !important;
}
body.theme-mono #layer-settings label {
    color: #1a1a1a !important;
    font-family: var(--mo-font) !important;
}
body.theme-mono #layer-settings .group-box {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}
body.theme-mono #layer-settings .stt-provider-btn,
body.theme-mono #layer-settings .imggen-provider-btn {
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    color: #1a1a1a !important;
    font-family: var(--mo-font) !important;
    font-weight: 550 !important;
    box-shadow: none !important;
}
body.theme-mono #layer-settings .stt-provider-btn.active,
body.theme-mono #layer-settings .imggen-provider-btn.active {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
body.theme-mono #layer-settings .stt-provider-btn:active,
body.theme-mono #layer-settings .imggen-provider-btn:active {
    transform: scale(0.9) !important;
    box-shadow: none !important;
}
body.theme-mono #layer-settings #lockscreen-wallpaper-preview {
    border: 1.5px dashed rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.5) !important;
}
body.theme-mono #layer-settings #api-preset-list > div {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    margin-bottom: 6px !important;
}
body.theme-mono #layer-settings button:not(.beauty-action-btn):not(.stt-provider-btn):not(.imggen-provider-btn):not(.nav-icon):not(.switch *) {
    font-family: var(--mo-font) !important;
}
body.theme-mono #layer-settings p,
body.theme-mono #layer-settings #keepalive-status {
    font-family: var(--mo-font) !important;
}

/* --- 聊天设置 (#layer-chat-settings) --- */
body.theme-mono #layer-chat-settings .beauty-section-card {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
}
body.theme-mono #layer-chat-settings .beauty-section-card::after {
    display: none !important;
    content: none !important;
}
body.theme-mono #layer-chat-settings .beauty-section-header {
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.05) !important;
    font-family: var(--mo-font) !important;
    font-weight: 550 !important;
    color: #1a1a1a !important;
}
body.theme-mono #layer-chat-settings .beauty-action-btn {
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    font-family: var(--mo-font) !important;
    font-weight: 550 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}
body.theme-mono #layer-chat-settings .beauty-action-btn:active {
    transform: scale(0.96) !important;
    box-shadow: none !important;
}

/* --- 通用描述文字 --- */
body.theme-mono #layer-settings .settings-subpage .scroll-y > div[style*="font-size:12px"],
body.theme-mono #layer-settings .settings-subpage .scroll-y > div[style*="font-size: 12px"],
body.theme-mono #layer-beauty .beauty-subpage .scroll-y > div[style*="font-size:12px"],
body.theme-mono #layer-beauty .beauty-subpage .scroll-y > div[style*="font-size: 12px"] {
    font-family: var(--mo-font) !important;
    color: #a0a0a5 !important;
}
body.theme-mono #layer-settings p,
body.theme-mono #layer-beauty p {
    font-family: var(--mo-font) !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  END body.theme-mono 圆润卡片风格覆盖                       ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── 气泡预览区域 ── */
#layer-beauty #bubble-preview-area {
    background: #f5f3ef !important;
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
    padding: 15px !important;
}

/* ── 美化页面中的描述文字 ── */
#layer-beauty div[style*="color:#666"],
#layer-beauty div[style*="color: #666"],
#layer-beauty div[style*="color:#888"],
#layer-beauty div[style*="color: #888"],
#layer-beauty div[style*="color:#999"],
#layer-beauty div[style*="color: #999"],
#layer-settings div[style*="color:#888"],
#layer-settings div[style*="color: #888"],
#layer-settings div[style*="color:#999"],
#layer-settings div[style*="color: #999"] {
    font-family: inherit !important;
}

/* ── 头像框预设网格项 ── */
#layer-beauty #avatar-frame-preset-grid > div {
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
    transition: all 0.1s !important;
}
#layer-beauty #avatar-frame-preset-grid > div:active {
    transform: translate(1px, 1px) !important;
    box-shadow: none !important;
}

/* ── 美化/设置页面 inline style的select元素覆盖 ── */
#layer-beauty select[style],
#layer-settings select[style] {
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
    background: #fafafa !important;
    font-family: inherit !important;
}

/* ── 美化/设置页面 inline style的input元素覆盖 ── */
#layer-beauty input[style*="border:1px solid #e0e0e0"],
#layer-beauty input[style*="border: 1px solid"],
#layer-settings input[style*="border:1px solid #e0e0e0"],
#layer-settings input[style*="border: 1px solid"] {
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
    background: #fafafa !important;
}

/* ── 联系人声音设置列表 ── */
#layer-settings #contact-sound-list > div {
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
    background: #fff !important;
}

/* ── 桌面图标美化网格 ── */
#layer-beauty #beautify-grid > div {
    transition: all 0.1s !important;
}
#layer-beauty #beautify-grid > div:active {
    transform: translate(1px, 1px) !important;
}

/* ── Toast 提示：黑白风 ── */
#toast {
    border: 2px solid #1a1a1a !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #1a1a1a !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
    box-shadow: 3px 3px 0px #1a1a1a !important;
}

/* ── 通用模态弹窗（modal-mask > modal-box）：便签风 ── */
.modal-mask .modal-box {
    background: #fff !important;
    border: 2.5px solid #1a1a1a !important;
    border-radius: 2px !important;
    box-shadow: 6px 6px 0px #1a1a1a !important;
    position: relative !important;
}
.modal-mask .modal-box h3 {
    font-family: 'Courier New', monospace !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    color: #1a1a1a !important;
}

/* 模态弹窗按钮 */
.modal-mask .modal-box button {
    font-family: 'Courier New', monospace !important;
}

/* 模态弹窗输入框 */
.modal-mask .modal-box input[type="text"],
.modal-mask .modal-box input[type="number"],
.modal-mask .modal-box input[type="date"],
.modal-mask .modal-box input[type="time"],
.modal-mask .modal-box textarea,
.modal-mask .modal-box select {
    border: 1.5px solid #1a1a1a !important;
    border-radius: 0 !important;
    background: #fafafa !important;
    color: #1a1a1a !important;
}
.modal-mask .modal-box input:focus,
.modal-mask .modal-box textarea:focus,
.modal-mask .modal-box select:focus {
    outline: none !important;
    background: #fff !important;
    box-shadow: 2px 2px 0px #1a1a1a !important;
}

/* 模态弹窗便签折角 */
.modal-mask .modal-box::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 22px 22px 0;
    border-color: transparent #f5f3ef transparent transparent;
    filter: drop-shadow(-1px 1px 0px rgba(0,0,0,0.1));
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  全局主题切换器 — Theme Switcher UI                          ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* 主题卡片网格 */
.global-theme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* 主题卡片 */
.theme-card {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.theme-card:active {
    transform: scale(0.97);
}
.theme-card.active {
    border-color: #b48ee0;
    box-shadow: 0 4px 16px rgba(180,142,224,0.3);
}

/* 主题预览区 */
.theme-card-preview {
    height: 100px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

/* 预览元素 */
.theme-card-preview .tp-nav {
    height: 10px;
    border-radius: 2px;
    margin-bottom: 6px;
}
.theme-card-preview .tp-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.theme-card-preview .tp-card {
    flex: 1;
    border-radius: 3px;
}
.theme-card-preview .tp-bar {
    height: 8px;
    border-radius: 2px;
    margin-top: 6px;
}

/* 黑白便签风预览 */
.theme-preview-default {
    background: #f5f3ef;
    background-image:
        linear-gradient(0deg, transparent 95%, rgba(0,0,0,0.04) 95%),
        linear-gradient(90deg, transparent 95%, rgba(0,0,0,0.04) 95%);
    background-size: 12px 12px;
}
.theme-preview-default .tp-nav {
    background: #fff;
    border: 1.5px solid #1a1a1a;
    box-shadow: 0 1.5px 0 #1a1a1a;
    border-radius: 0;
}
.theme-preview-default .tp-card {
    background: #fff;
    border: 1.5px solid #1a1a1a;
    box-shadow: 2px 2px 0 #1a1a1a;
    border-radius: 1px;
}
.theme-preview-default .tp-bar {
    background: #fff;
    border: 1.5px solid #1a1a1a;
    box-shadow: 0 -1.5px 0 #1a1a1a;
    border-radius: 0;
}

/* 白色可爱风预览 */
.theme-preview-cute {
    background: #f8f6ff;
}
.theme-preview-cute .tp-nav {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(200,180,230,0.35);
    box-shadow: 0 1px 4px rgba(180,160,220,0.12);
    border-radius: 6px;
}
.theme-preview-cute .tp-card {
    background: #fff;
    border: 1px solid rgba(200,180,230,0.35);
    box-shadow: 0 1px 6px rgba(180,160,220,0.12);
    border-radius: 8px;
}
.theme-preview-cute .tp-bar {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(200,180,230,0.35);
    box-shadow: 0 -1px 4px rgba(180,160,220,0.12);
    border-radius: 6px;
}

/* 韩系极简风预览 */
.theme-preview-korean {
    background: #f2f2f7;
}
.theme-preview-korean .tp-nav {
    background: rgba(255,255,255,0.72);
    border: none;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
    border-radius: 6px;
    backdrop-filter: blur(8px);
}
.theme-preview-korean .tp-card {
    background: rgba(255,255,255,0.72);
    border: none;
    box-shadow: 0 1px 8px rgba(0,0,0,0.04);
    border-radius: 10px;
    backdrop-filter: blur(8px);
}
.theme-preview-korean .tp-bar {
    background: rgba(255,255,255,0.72);
    border: none;
    box-shadow: 0 -1px 6px rgba(0,0,0,0.04);
    border-radius: 6px;
    backdrop-filter: blur(8px);
}

/* 极简黑白风预览 (Monochrome Premium) */
.theme-preview-mono {
    background: #f1f1f2;
}
.theme-preview-mono .tp-nav {
    background: #ffffff;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-radius: 8px;
}
.theme-preview-mono .tp-card {
    background: #ffffff;
    border: none;
    box-shadow: 0 3px 12px rgba(0,0,0,0.06);
    border-radius: 12px;
}
.theme-preview-mono .tp-card.tp-card-dark {
    background: #0a0a0a;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.theme-preview-mono .tp-bar {
    background: #ffffff;
    border: none;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
    border-radius: 8px;
}

/* 暗色夜间模式预览 (Dark Night) */
.theme-preview-dark {
    background: #121214;
}
.theme-preview-dark .tp-nav {
    background: #1a1a1d;
    border: none;
    border-radius: 6px;
    box-shadow: none;
}
.theme-preview-dark .tp-card {
    background: #262629;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
}
.theme-preview-dark .tp-card.tp-card-dark {
    background: #2563c4;
    border: none;
}
.theme-preview-dark .tp-bar {
    background: #1a1a1d;
    border: none;
    box-shadow: none;
    border-radius: 8px;
}

/* 主题信息 */
.theme-card-info {
    padding: 10px 12px 12px;
}
.theme-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 2px;
}
.theme-card-desc {
    font-size: 11px;
    color: #999;
}

/* 选中标记 */
.theme-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}
.theme-card-check i {
    font-size: 20px;
    color: #b48ee0;
    filter: drop-shadow(0 1px 3px rgba(180,142,224,0.4));
}
.theme-card.active .theme-card-check {
    opacity: 1;
}

/* cute主题下的主题卡片适配 */
body.theme-cute .theme-card {
    border-color: rgba(200,180,230,0.35);
}
body.theme-cute .theme-card.active {
    border-color: #b48ee0;
}
body.theme-cute .theme-card-name {
    color: #4a4060;
}
body.theme-cute .theme-card-desc {
    color: #9088a0;
}

/* ========== API Error Log Styles ========== */
.error-log-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #fa5151;
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.api-error-log-item {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
}

.api-error-log-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

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

.api-error-log-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    flex: 1;
    line-height: 1.4;
}

.api-error-log-time {
    font-size: 11px;
    color: #aaa;
    white-space: nowrap;
    margin-left: 10px;
    margin-top: 2px;
}

.api-error-log-source {
    margin-bottom: 10px;
}

.api-error-log-detail {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: #fef9f0;
    border-radius: 8px;
    border-left: 3px solid #f0ad4e;
}

.api-error-log-raw {
    margin-bottom: 10px;
    cursor: pointer;
    user-select: none;
}

.api-error-log-raw-label {
    font-size: 12px;
    color: #999;
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.api-error-log-raw-label .fa-chevron-down {
    transition: transform 0.2s;
    font-size: 10px;
}

.api-error-log-raw.expanded .api-error-log-raw-label .fa-chevron-down {
    transform: rotate(180deg);
}

.api-error-log-raw-content {
    display: none;
    font-size: 12px;
    color: #888;
    background: #f8f8f8;
    padding: 10px 12px;
    border-radius: 8px;
    font-family: 'Courier New', Courier, monospace;
    word-break: break-all;
    white-space: pre-wrap;
    line-height: 1.5;
    max-height: 150px;
    overflow-y: auto;
}

.api-error-log-raw.expanded .api-error-log-raw-content {
    display: block;
}

.api-error-log-suggestions {
    background: #f0f8ff;
    border-radius: 8px;
    padding: 12px 14px;
    border-left: 3px solid #5bc0de;
}

.api-error-log-suggestions-title {
    font-size: 13px;
    font-weight: 600;
    color: #3a87ad;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.api-error-log-suggestions-title .fa-lightbulb {
    color: #f0ad4e;
}

.api-error-log-suggestions ul {
    margin: 0;
    padding: 0 0 0 18px;
    list-style: none;
}

.api-error-log-suggestions li {
    font-size: 12.5px;
    color: #555;
    line-height: 1.6;
    padding: 3px 0;
    position: relative;
}
.api-error-log-suggestions li::before {
    content: '•';
    color: #5bc0de;
    font-weight: bold;
    position: absolute;
    left: -14px;
}

/* 成功调用日志卡片 */
.api-log-item {
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
}
.api-log-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.api-log-success {
    background: #f6ffed;
    border-color: #b7eb8f;
}
.api-log-success .api-error-log-title {
    color: #389e0d;
}
.api-log-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.api-log-via {
    background: #e8f4fd;
    color: #0969b7;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}
.api-log-model {
    font-size: 12px;
    color: #555;
    background: #f5f5f5;
    border-radius: 6px;
    padding: 3px 10px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    word-break: break-all;
}
.api-log-model .fa-microchip {
    color: #7c4dff;
    flex-shrink: 0;
}
.api-log-url {
    font-size: 11px;
    color: #999;
    word-break: break-all;
    margin-top: 4px;
    display: flex;
    align-items: flex-start;
    gap: 5px;
}
.api-log-url .fa-link {
    flex-shrink: 0;
    margin-top: 2px;
    color: #bbb;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║                    📚 学习App样式                              ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Study Tab System */
.study-tab {
    display: none;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 50px;
    background: #fff;
    overflow: hidden;
}
.study-tab.active {
    display: flex;
}

/* Study Master Banner */
.study-master-banner {
    background: #111;
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Study Plan List */
.study-plan-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.study-plan-item {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 12px;
}
.study-plan-item .plan-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.3s;
}
.study-plan-item .plan-check.completed {
    background: #111;
    border-color: #111;
    color: #fff;
}
.study-plan-item .plan-info {
    flex: 1;
    min-width: 0;
}
.study-plan-item .plan-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.study-plan-item .plan-meta {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}
.study-plan-item .plan-actions {
    display: flex;
    gap: 6px;
}
.study-plan-item .plan-actions button {
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
}

/* Study Empty Hint */
.study-empty-hint {
    text-align: center;
    color: #bbb;
    padding: 40px 20px;
    font-size: 14px;
}

/* Study Category Bar */
.study-category-bar {
    display: flex;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #eee;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0 4px;
    min-height: 40px;
    flex-shrink: 0;
}
.study-cat-tab {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    margin: 4px 3px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    background: #f5f5f5;
    color: #666;
    flex-shrink: 0;
    transition: all 0.2s;
}
.study-cat-tab.active {
    background: #111;
    color: #fff;
    font-weight: 500;
}

/* Study Material Card */
.study-material-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.study-material-card .mat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.study-material-card .mat-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}
.study-material-card .mat-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #f0f0f0;
    color: #666;
}
.study-material-card .mat-badge.builtin {
    background: #111;
    color: #fff;
}
.study-material-card .mat-preview {
    font-size: 13px;
    color: #888;
    line-height: 1.5;
    max-height: 60px;
    overflow: hidden;
    margin-bottom: 8px;
}
.study-material-card .mat-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #bbb;
}
.study-material-card .mat-actions {
    display: flex;
    gap: 8px;
}
.study-material-card .mat-actions button {
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    background: #f5f5f5;
    color: #666;
}
.study-material-card .mat-actions button:hover {
    background: #eee;
}

/* Study Bottom Nav */
.study-bottom-nav {
    display: flex;
    background: #fff;
    border-top: 1px solid #eee;
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
}
.study-bottom-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    color: #999;
    font-size: 10px;
    transition: color 0.2s;
}
.study-bottom-item i {
    font-size: 18px;
}
.study-bottom-item.active {
    color: #111;
}

/* Study Btn Primary */
.study-btn-primary {
    padding: 12px 20px;
    border: none;
    background: #111;
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.study-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Study Lecture Messages */
.study-lecture-msgs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 60px;
    min-height: 200px;
}
.study-lecture-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    word-wrap: break-word;
}
.study-lecture-msg.teacher {
    align-self: flex-start;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 2px 12px 12px 12px;
}
.study-lecture-msg.student {
    align-self: flex-end;
    background: #111;
    color: #fff;
    border-radius: 12px 2px 12px 12px;
}
.study-lecture-msg.system {
    align-self: center;
    background: #f0f0f0;
    color: #999;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 20px;
}
.study-lecture-msg.quiz-inline {
    align-self: center;
    background: #f5f5f5;
    color: #333;
    border: 1px solid #e0e0e0;
    font-size: 13px;
    padding: 12px 16px;
    border-radius: 12px;
    width: 90%;
    max-width: 90%;
}

/* Study Lecture Input Bar */
.study-lecture-input-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    padding: 8px 12px;
    background: #fff;
    border-top: 1px solid #eee;
    box-sizing: border-box;
    gap: 8px;
    z-index: 10;
}
.study-lecture-input-bar input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
}
.study-lecture-input-bar button {
    padding: 10px 16px;
    border: none;
    background: #111;
    color: #fff;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
}

/* Study Quiz Popup (聊天界面弹窗) */
.study-quiz-popup {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: studyPopupFadeIn 0.3s ease;
}
@keyframes studyPopupFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.study-quiz-popup-content {
    background: #fff;
    border-radius: 16px;
    width: 88%;
    max-width: 360px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    overflow: hidden;
    animation: studyPopupSlideUp 0.3s ease;
}
@keyframes studyPopupSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.study-quiz-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #111;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}
.study-quiz-popup-header i {
    margin-right: 6px;
}
.study-quiz-popup-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.study-quiz-popup-question {
    padding: 16px;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}
.study-quiz-popup-options {
    padding: 12px 16px;
}
.study-quiz-option {
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}
.study-quiz-option:hover {
    border-color: #333;
    background: #fafafa;
}
.study-quiz-option.correct {
    border-color: #111;
    background: #f5f5f5;
    color: #111;
}
.study-quiz-option.wrong {
    border-color: #999;
    background: #fafafa;
    color: #666;
    text-decoration: line-through;
}
.study-quiz-option.selected {
    border-color: #111;
    background: #f5f5f5;
}
.study-quiz-option-label {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}
.study-quiz-option.correct .study-quiz-option-label {
    background: #111;
    border-color: #111;
    color: #fff;
}
.study-quiz-option.wrong .study-quiz-option-label {
    background: #999;
    border-color: #999;
    color: #fff;
}
.study-quiz-popup-input {
    padding: 12px 16px;
    display: flex;
    gap: 8px;
}
.study-quiz-popup-input input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
}
.study-quiz-popup-input button {
    padding: 10px 16px;
    border: none;
    background: #111;
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
}
.study-quiz-popup-result {
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
    border-top: 1px solid #f0f0f0;
}
.study-quiz-popup-result.correct {
    background: #f5f5f5;
    color: #111;
}
.study-quiz-popup-result.wrong {
    background: #fafafa;
    color: #666;
}

/* Study Quiz Actions Bar (收藏 + 下一题) */
.study-quiz-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    margin-top: 12px;
    border-top: 1px solid #e5e5e5;
    gap: 10px;
}
.study-collect-btn {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.study-collect-btn:active { background: #f5f5f5; }
.study-collect-btn.collected {
    color: #999;
    border-color: #eee;
    pointer-events: none;
}
.study-next-btn {
    padding: 8px 20px;
    border: none;
    background: #111;
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.study-next-btn:active { background: #333; }
.study-close-btn {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}
.study-close-btn:active { background: #f5f5f5; }

/* Study Quiz Popup Actions */
.study-quiz-popup-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid #e5e5e5;
    gap: 10px;
}

/* Study Favorites Tab */
.study-fav-filter-bar {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
}
.study-fav-filter {
    padding: 5px 14px;
    border: 1px solid #ddd;
    border-radius: 16px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    background: #fff;
}
.study-fav-filter:active { background: #f5f5f5; }
.study-fav-filter.active {
    background: #111;
    color: #fff;
    border-color: #111;
}
.study-fav-card {
    background: #fff;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid #e5e5e5;
}
.study-fav-stem {
    font-size: 14px;
    color: #111;
    line-height: 1.6;
    font-weight: 500;
}
.study-fav-meta {
    font-size: 11px;
    color: #bbb;
    margin-top: 8px;
}
.study-fav-actions {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}
.study-fav-actions button {
    background: none;
    border: none;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    padding: 2px 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.study-fav-actions button:active { color: #111; }

/* Study Favorites Menu Icon */
.study-menu-icon.study-icon-fav {
    background: #f0f0f0;
    color: #333;
}

/* Shop Custom Product Category Chips */
.shop-custom-cat-chip {
    padding: 5px 14px;
    border: 1px solid #ddd;
    border-radius: 16px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    background: #fff;
}
.shop-custom-cat-chip.active {
    background: #111;
    color: #fff;
    border-color: #111;
}

/* Food Delivery Custom Food Emoji Picker */
.fd-emoji-pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 20px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
}
.fd-emoji-pick:active { background: #f0f0f0; }
.fd-emoji-pick.active {
    border-color: #111;
    background: #f5f5f5;
}

/* Memoir Export Modal */
.memoir-radio-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.memoir-radio-label.selected {
    color: #fff;
    background: #111;
    border-color: #111;
}
.memoir-radio-label input[type="radio"] {
    -webkit-appearance: radio !important;
    appearance: auto !important;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 0;
    accent-color: currentColor;
}

/* Study Teacher Select */
.study-teacher-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 6px;
    border: 2px solid transparent;
    transition: all 0.2s;
}
.study-teacher-item:hover {
    background: #f8f8f8;
}
.study-teacher-item.selected {
    border-color: #111;
    background: #f5f5f5;
}
.study-teacher-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.study-teacher-item .teacher-name {
    font-size: 14px;
    font-weight: 500;
}
.study-teacher-item .teacher-persona {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Study Material Select in Lecture */
.study-material-select {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 6px;
    border: 2px solid transparent;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: all 0.2s;
}
.study-material-select:hover {
    background: #f8f8f8;
}
.study-material-select.selected {
    border-color: #111;
    background: #f5f5f5;
}

/* Plan Detail Card */
.study-plan-detail {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.study-plan-detail .plan-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.study-plan-detail .plan-detail-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}
.study-plan-detail .plan-detail-status {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 10px;
}
.study-plan-detail .plan-detail-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.study-plan-detail .plan-progress-bar {
    flex: 1;
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}
.study-plan-detail .plan-progress-fill {
    height: 100%;
    background: #111;
    border-radius: 4px;
    transition: width 0.5s;
}
.study-plan-detail .plan-detail-meta {
    font-size: 12px;
    color: #999;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.study-plan-detail .plan-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.study-plan-detail .plan-detail-actions button {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}

/* Quiz Content Area */
.study-quiz-area {
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.study-quiz-question-text {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 16px;
    font-weight: 500;
}
.study-quiz-counter {
    font-size: 13px;
    color: #999;
    text-align: center;
    margin-bottom: 10px;
}
.study-quiz-score {
    text-align: center;
    padding: 30px 20px;
}
.study-quiz-score .score-num {
    font-size: 48px;
    font-weight: 700;
    color: #111;
}
.study-quiz-score .score-label {
    font-size: 14px;
    color: #999;
    margin-top: 8px;
}

/* Study Section Title */
.study-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.study-section-title i {
    color: #333;
    font-size: 14px;
}

/* Study Modal Primary Button & Icon Defaults */
.study-modal-btn-primary {
    background: #1a1a1a;
    color: #fff;
}
.study-icon-materials { background: #1a1a1a; }
.study-icon-plan { background: #f0f0f0; color: #333; }
.study-icon-quiz { background: #e8e8e8; color: #555; }
.study-icon-lecture { background: #e0e0e0; color: #555; }

/* ========== GLOBAL WALLPAPER SYSTEM ========== */

/* 壁纸背景层 - 不影响用户自定义CSS */
.gwp-bg-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
    /* [FIX-壁纸返回卡顿] contain限制浏览器渲染范围，避免壁纸层变化触发外部重排重绘 */
    contain: strict;
    /* [FIX-壁纸返回卡顿] 提前告知浏览器此元素不会改变大小，优化合成 */
    will-change: auto;
    content-visibility: auto;
}

/* [FIX-壁纸返回卡顿] layer关闭动画期间，临时禁用所有壁纸相关的backdrop-filter */
/* backdrop-filter: blur() 是GPU最昂贵的属性，layer滑出时底层blur需要逐帧重算 */
/* 通过CSS class统一控制，比逐个操作inline style更高效且不触发额外reflow */
body.gwp-layer-animating [data-gwp-styled] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 注意: .page 和 .layer 已经有 position:absolute，无需改为relative */
/* 它们可以正常作为 position:absolute 子元素的定位上下文 */

/* 有壁纸时让容器自身背景透明，露出壁纸层 */
.gwp-has-wallpaper.layer {
    background-color: transparent !important;
    background-image: none !important;
}
.gwp-has-wallpaper.page {
    background-color: transparent !important;
}

/* 壁纸容器内的导航栏透明度 - 使用CSS变量 */
/* [FIX-壁纸透明] 使用高特异性选择器+background简写覆盖主题CSS的!important */
.gwp-has-wallpaper .nav-bar,
.gwp-has-wallpaper > .nav-bar,
.gwp-has-wallpaper .nav-bar[style],
#tab-contacts.gwp-has-wallpaper > .nav-bar,
#tab-me.gwp-has-wallpaper > .nav-bar,
#layer-worldbook.gwp-has-wallpaper > .nav-bar,
#layer-perception.gwp-has-wallpaper > .nav-bar,
#layer-couple.gwp-has-wallpaper > .nav-bar,
#layer-beauty.gwp-has-wallpaper > .nav-bar,
#layer-settings.gwp-has-wallpaper > .nav-bar,
#layer-desktop.gwp-has-wallpaper .nav-bar {
    background: rgba(255,255,255, var(--gwp-nav-opacity, 0.85)) !important;
    background-image: none !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom-color: rgba(209,209,209, var(--gwp-nav-opacity, 0.85)) !important;
}

/* 壁纸容器的滚动内容区透明度 */
.gwp-has-wallpaper .scroll-y,
.gwp-has-wallpaper > .scroll-y,
#tab-contacts.gwp-has-wallpaper .scroll-y,
#tab-contacts.gwp-has-wallpaper #contact-list,
#tab-me.gwp-has-wallpaper .scroll-y,
#layer-worldbook.gwp-has-wallpaper > .scroll-y,
#layer-perception.gwp-has-wallpaper > .scroll-y,
#layer-couple.gwp-has-wallpaper > .scroll-y,
#layer-beauty.gwp-has-wallpaper > .scroll-y,
#layer-settings.gwp-has-wallpaper > .scroll-y {
    background: rgba(255,255,255, var(--gwp-content-opacity, 0.9)) !important;
    background-image: none !important;
}

/* 壁纸容器内的group-box/list-item/beauty-section-card/form-cell等UI组件透明 */
.gwp-has-wallpaper .group-box {
    background: rgba(255,255,255, var(--gwp-content-opacity, 0.9)) !important;
    background-image: none !important;
}

/* 壁纸容器内的list-item透明 */
.gwp-has-wallpaper .list-item {
    background: rgba(255,255,255, var(--gwp-content-opacity, 0.9)) !important;
    background-image: none !important;
}

/* 微信底部tab栏透明 */
.gwp-has-wallpaper .wx-tab-bar,
.gwp-has-wallpaper > .wx-tab-bar,
#layer-wechat.gwp-has-wallpaper .wx-tab-bar,
.gwp-has-wallpaper + .wx-tab-bar {
    background: rgba(255,255,255, var(--gwp-nav-opacity, 0.85)) !important;
    background-image: none !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* 确保壁纸层在内容之下，内容在壁纸层之上 */
/* [FIX-联系人列表被挤低] nav-bar不强制position:relative，避免覆盖原有absolute定位导致布局错乱 */
.gwp-has-wallpaper > .scroll-y,
.gwp-has-wallpaper > .wx-tab-bar,
.gwp-has-wallpaper > #wx-content-area,
.gwp-has-wallpaper > #couple-content-area,
.gwp-has-wallpaper > #beauty-menu {
    position: relative;
    z-index: 1;
}
.gwp-has-wallpaper > .nav-bar {
    z-index: 1;
}

/* [FIX-全局壁纸] beauty-subpage 必须保持 position:absolute 以维持正确布局 */
/* 只提升 z-index 使其在壁纸层之上，不改变 position */
.gwp-has-wallpaper > .beauty-subpage {
    z-index: 11 !important;
}

/* [FIX-全局壁纸] settings-subpage 同理 */
.gwp-has-wallpaper > .settings-subpage {
    z-index: 11 !important;
}

/* [FIX-导航栏层级] 导航栏必须在壁纸层之上，不被覆盖 */
/* [FIX-联系人列表被挤低] 不设position:relative，保留nav-bar原有定位方式 */
.gwp-has-wallpaper > .nav-bar {
    z-index: 100 !important;
}

/* 美化/设置界面的settings-subpage和beauty-subpage透明 */
.gwp-has-wallpaper .beauty-subpage,
.gwp-has-wallpaper .settings-subpage {
    background: transparent !important;
    background-image: none !important;
}

/* [FIX-全局壁纸] 子页面内scroll-y也需要透明，覆盖inline style */
.gwp-has-wallpaper .beauty-subpage > .scroll-y,
.gwp-has-wallpaper .settings-subpage > .scroll-y,
#layer-beauty.gwp-has-wallpaper .beauty-subpage > .scroll-y,
#layer-settings.gwp-has-wallpaper .settings-subpage > .scroll-y {
    background: rgba(255,255,255, var(--gwp-content-opacity, 0.9)) !important;
    background-image: none !important;
}

/* [FIX-全局壁纸] 子页面内的beauty-section-card/group-box等也要透明 */
.gwp-has-wallpaper .beauty-subpage .beauty-section-card,
.gwp-has-wallpaper .settings-subpage .group-box {
    background: rgba(255,255,255, var(--gwp-content-opacity, 0.9)) !important;
}

/* 弹窗也受透明度影响 */
.gwp-has-wallpaper .modal-box {
    background: rgba(255,255,255, var(--gwp-content-opacity, 0.95)) !important;
    background-image: none !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* [FIX-壁纸透明] 微信"我的"页面有壁纸时，确保背景透明 */
#tab-me.gwp-has-wallpaper {
    background: transparent !important;
    background-image: none !important;
}
#tab-me.gwp-has-wallpaper > .scroll-y > div:first-child {
    background: rgba(255,255,255, var(--gwp-content-opacity, 0.9)) !important;
}

/* 壁纸库 - 缩略图网格 */
.gwp-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    min-height: 60px;
}

.gwp-thumb {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #f0f0f0;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.gwp-thumb:hover {
    border-color: #07c160;
}

.gwp-thumb-img {
    width: 100%;
    padding-bottom: 75%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.gwp-thumb-name {
    padding: 4px 6px;
    font-size: 11px;
    color: #666;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #fff;
}

.gwp-thumb-del {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.gwp-thumb:hover .gwp-thumb-del {
    opacity: 1;
}

/* 移动端始终显示删除按钮 */
@media (max-width: 768px) {
    .gwp-thumb-del {
        opacity: 0.8;
    }
}

/* 壁纸分配列表 */
.gwp-assign-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gwp-assign-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eee;
}

.gwp-assign-preview {
    width: 50px;
    height: 38px;
    border-radius: 6px;
    background: #f5f5f5;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gwp-assign-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gwp-assign-name {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.gwp-assign-select {
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
    background: #fafafa;
    color: #333;
    outline: none;
    -webkit-appearance: auto;
    appearance: auto;
}

.gwp-assign-select:focus {
    border-color: #07c160;
}

/* 透明度设置 */
.gwp-opacity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gwp-opacity-item {
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eee;
}

.gwp-opacity-name {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.gwp-opacity-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gwp-opacity-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gwp-opacity-label {
    font-size: 12px;
    color: #888;
    min-width: 45px;
    flex-shrink: 0;
}

.gwp-opacity-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #e0e0e0;
    border-radius: 2px;
    outline: none;
    touch-action: pan-x;
}

.gwp-opacity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #07c160;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.gwp-opacity-val {
    font-size: 12px;
    color: #666;
    min-width: 35px;
    text-align: right;
    flex-shrink: 0;
}

/* [FIX-壁纸页面滚动] 确保全局壁纸管理页面可以正常滚动 */
#beauty-page-global-wallpaper > .scroll-y {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
}

/* [FIX-滑条触摸] 壁纸分配的select和滑条不阻止垂直滚动 */
.gwp-assign-select {
    touch-action: manipulation;
}

/* ========== END GLOBAL WALLPAPER SYSTEM ========== */

/* ========== PAOPAO APP (泡泡 - 明星模拟器) ========== */
.pp-app {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    background: #f5f6f8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    position: relative;
    overflow: hidden;
}

/* 顶部导航 — [FIX-弹性保护带] padding-top适配状态栏 */
.pp-nav-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    padding-top: var(--guard-top, env(safe-area-inset-top, 12px));
    background: #f7f8fa;
    color: #3a3a4a;
    flex-shrink: 0;
    z-index: 10;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}
.pp-nav-back {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #eee;
    cursor: pointer;
    font-size: 16px;
    color: #666;
}
.pp-nav-title {
    font-size: 18px; font-weight: 700;
    color: #2c2c3a;
}
.pp-nav-fans {
    font-size: 13px;
    background: #f0e8ec;
    color: #b0708a;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 500;
}
.pp-nav-fans i { margin-right: 4px; color: #c8899e; }

/* 内容区域 */
.pp-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* 底部导航 */
.pp-bottom-nav {
    display: flex;
    background: #fff;
    border-top: 1px solid #eaeaea;
    padding: 6px 0;
    padding-bottom: 6px;
    flex-shrink: 0;
}
.pp-bottom-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    gap: 2px;
    padding: 6px 0;
    color: #bbb;
    font-size: 11px;
    cursor: pointer;
    transition: color 0.2s;
}
.pp-bottom-item i { font-size: 20px; }
.pp-bottom-item.active {
    color: #8a6b78;
}
.pp-bottom-item span { font-size: 10px; }

/* ====== 泡泡页面（群聊） ====== */
.pp-bubble-back {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #888; font-size: 16px; flex-shrink: 0;
}
.pp-bubble-header-info { flex: 1; }
.pp-bubble-detail-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #888; font-size: 16px; flex-shrink: 0;
}
.pp-bubble-page {
    display: flex; flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.pp-bubble-header {
    padding: 8px 12px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
    display: flex; align-items: center; gap: 8px;
}
/* 群聊/联系人聊天全屏模式顶栏（替代pp-nav-bar） */
.pp-bubble-header-top {
    padding-top: 8px;
}
.pp-bubble-title {
    font-size: 15px; font-weight: 600; color: #4a4a5a;
}
.pp-bubble-title i { margin-right: 6px; }
.pp-bubble-subtitle {
    font-size: 12px; color: #999; margin-top: 3px; opacity: 0.8;
}

/* 聊天列表 */
.pp-chat-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex; flex-direction: column;
    gap: 10px;
    background: #f5f6f8;
}
.pp-chat-msg {
    display: flex; align-items: flex-start; gap: 8px;
    animation: ppFadeIn 0.3s ease;
}
@keyframes ppFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.pp-chat-msg-fan {
    flex-direction: row;
}
.pp-chat-msg-me {
    flex-direction: row-reverse;
}
.pp-chat-avatar-fan, .pp-chat-avatar-me {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600;
    flex-shrink: 0;
}
.pp-chat-avatar-fan {
    background: #c8b0ba;
    color: #fff;
}
.pp-chat-avatar-me {
    background: #8a6b78;
    color: #fff;
}
.pp-chat-fan-info {
    max-width: 70%;
}
.pp-chat-fan-name {
    font-size: 11px; color: #999; margin-bottom: 3px; font-weight: 500;
}
.pp-chat-bubble-fan {
    background: #fff;
    border: 1px solid #eee;
    padding: 8px 12px;
    border-radius: 2px 16px 16px 16px;
    font-size: 14px; color: #333;
    line-height: 1.5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    word-break: break-word;
}
.pp-chat-bubble-me {
    background: #8a6b78;
    padding: 8px 12px;
    border-radius: 16px 2px 16px 16px;
    font-size: 14px; color: #fff;
    line-height: 1.5;
    max-width: 70%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    word-break: break-word;
}

/* 聊天输入区 */
.pp-chat-input-area {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    padding-bottom: 10px;
    background: #fff;
    border-top: 1px solid #eee;
    flex-shrink: 0;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}
.pp-chat-input {
    flex: 1;
    min-width: 0;
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: 24px;
    font-size: 14px;
    outline: none;
    background: #f8f8fa;
    color: #333;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.pp-chat-input:focus {
    border-color: #a0889a;
    background: #fff;
}
.pp-chat-input::placeholder { color: #bbb; }
.pp-chat-send-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: #8a6b78;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(100,70,85,0.25);
    transition: transform 0.15s;
    flex-shrink: 0;
}
.pp-chat-send-btn:active { transform: scale(0.92); }

/* ====== 功能页面 ====== */
.pp-activity-page {
    padding: 16px;
}
.pp-section-title {
    font-size: 16px; font-weight: 700; color: #5a4a52;
    margin: 16px 0 10px;
    display: flex; align-items: center;
}
.pp-section-title:first-child { margin-top: 4px; }
.pp-section-title i {
    margin-right: 8px;
    font-size: 18px;
    color: #8a6b78;
}
.pp-card-row {
    display: flex; gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}
.pp-card-row::-webkit-scrollbar { display: none; }

.pp-activity-card {
    min-width: 140px;
    background: #fff;
    border-radius: 16px;
    padding: 16px 14px;
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    border: 1px solid #eee;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}
.pp-activity-card:active {
    transform: scale(0.96);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.pp-activity-icon {
    font-size: 32px;
    margin-bottom: 2px;
}
.pp-activity-name {
    font-size: 14px; font-weight: 600; color: #333;
    text-align: center;
}
.pp-activity-desc {
    font-size: 11px; color: #999;
    text-align: center;
    line-height: 1.4;
}
.pp-activity-reward {
    font-size: 11px; color: #8a6b78;
    background: #f0e8ec;
    padding: 3px 10px;
    border-radius: 12px;
    margin-top: 4px;
    white-space: nowrap;
}
.pp-activity-reward i { margin-right: 3px; }

/* Blog选择页 */
.pp-blog-choices {
    display: flex; flex-direction: column; gap: 12px;
}
.pp-blog-choice-card {
    display: flex; align-items: center; gap: 14px;
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    border: 1px solid #eee;
    cursor: pointer;
    transition: transform 0.2s;
}
.pp-blog-choice-card:active { transform: scale(0.97); }
.pp-blog-choice-card .pp-activity-icon { font-size: 28px; flex-shrink: 0; }
.pp-blog-choice-info { flex: 1; }

/* 结果弹窗 */
.pp-result-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
    animation: ppFadeIn 0.2s ease;
}
.pp-result-box {
    background: #fff;
    border-radius: 20px;
    padding: 28px 24px;
    width: 85%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}
.pp-result-positive { border-top: 4px solid #8a6b78; }
.pp-result-negative { border-top: 4px solid #c75050; }
.pp-result-title {
    font-size: 22px; font-weight: 700; margin-bottom: 10px; color: #333;
}
.pp-result-desc {
    font-size: 14px; color: #666; line-height: 1.6; margin-bottom: 12px;
}
.pp-result-tier {
    font-size: 13px; color: #8a6b78;
    background: #f0e8ec;
    padding: 6px 16px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 16px;
}
.pp-result-btn {
    padding: 10px 36px;
    border: none;
    background: #8a6b78;
    color: #fff;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(100,70,85,0.25);
}

/* ====== 个人页面 ====== */
.pp-profile-page {
    padding: 16px;
    padding-bottom: 30px;
}
.pp-profile-card {
    background: #8a6b78;
    border-radius: 20px;
    padding: 28px 20px;
    text-align: center;
    color: #fff;
    box-shadow: 0 4px 20px rgba(100,70,85,0.2);
    margin-bottom: 16px;
    position: relative;
}
.pp-profile-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: 3px solid rgba(255,255,255,0.5);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 700;
    margin: 0 auto 10px;
    color: #fff;
    position: relative;
}
.pp-profile-avatar-img {
    width: 72px; height: 72px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.5);
    margin: 0 auto 10px;
    display: block;
    object-fit: cover;
}
.pp-profile-avatar:active, .pp-profile-avatar-img:active {
    opacity: 0.8;
    transform: scale(0.95);
}
.pp-profile-name {
    font-size: 20px; font-weight: 700;
    margin-bottom: 6px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.pp-profile-tier-badge {
    display: inline-block;
    background: rgba(255,255,255,0.3);
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    backdrop-filter: blur(4px);
}
.pp-profile-edit {
    position: absolute;
    top: 14px; right: 14px;
    font-size: 12px;
    background: rgba(255,255,255,0.25);
    padding: 5px 12px;
    border-radius: 16px;
    cursor: pointer;
    z-index: 2;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: rgba(255,255,255,0.3);
}
.pp-profile-edit:active {
    background: rgba(255,255,255,0.45);
    transform: scale(0.95);
}

/* 数据网格 */
.pp-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.pp-stat-item {
    background: #fff;
    border-radius: 16px;
    padding: 14px 8px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    border: 1px solid #eee;
}
.pp-stat-value {
    font-size: 18px; font-weight: 700; color: #8a6b78;
}
.pp-stat-label {
    font-size: 11px; color: #999; margin-top: 4px;
}

/* 区块卡片 */
.pp-section-card {
    background: #fff;
    border-radius: 16px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    border: 1px solid #eee;
}
.pp-section-header {
    padding: 14px 16px;
    font-size: 15px; font-weight: 600; color: #5a4a52;
    border-bottom: 1px solid #f0f0f0;
}
.pp-section-header i {
    margin-right: 8px; color: #8a6b78;
}

/* 等级进度条 */
.pp-tier-progress {
    padding: 14px 16px;
}
.pp-tier-bar {
    height: 8px;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}
.pp-tier-fill {
    height: 100%;
    background: #a0889a;
    border-radius: 4px;
    transition: width 0.5s ease;
}
.pp-tier-info {
    display: flex; justify-content: space-between;
    font-size: 11px; color: #999;
}

/* Blog数据 */
.pp-blog-stats {
    padding: 14px 16px;
    display: flex; gap: 16px;
    flex-wrap: wrap;
}
.pp-blog-stat {
    font-size: 13px; color: #666;
}
.pp-blog-stat i { margin-right: 5px; }

/* 作品列表 */
.pp-works-list {
    padding: 8px 0;
}
.pp-work-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #f0f0f0;
}
.pp-work-item:last-child { border-bottom: none; }
.pp-work-icon {
    font-size: 24px; width: 40px; text-align: center; flex-shrink: 0;
}
.pp-work-info { flex: 1; }
.pp-work-name { font-size: 14px; font-weight: 500; color: #333; }
.pp-work-fans { font-size: 12px; color: #8a6b78; margin-top: 2px; }

.pp-empty-hint {
    padding: 24px 16px;
    text-align: center;
    color: #ccc;
    font-size: 13px;
}

/* ====== 消息列表页面 ====== */
.pp-msg-list-page {
    display: flex; flex-direction: column; height: 100%;
}
.pp-msg-list-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
}
.pp-msg-list-title {
    font-size: 18px; font-weight: 700; color: #3a3a4a;
}
.pp-msg-list-actions {
    display: flex; gap: 8px;
}
.pp-msg-action-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: #f0f0f0; border-radius: 50%;
    color: #666; font-size: 16px; cursor: pointer;
    transition: all 0.2s;
}
.pp-msg-action-btn:active { transform: scale(0.9); background: #e0e0e0; }

.pp-msg-list {
    flex: 1; overflow-y: auto; background: #fff;
}
.pp-msg-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer; transition: background 0.15s;
}
.pp-msg-item:active { background: #f5f5f5; }
.pp-msg-avatar {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700;
    flex-shrink: 0;
}
.pp-msg-avatar-group {
    background: #8a6b78;
    color: #fff; font-size: 20px;
}
.pp-msg-avatar-contact {
    background: #c8b0ba;
    color: #fff;
}
.pp-msg-avatar-manager {
    background: #7a85a0;
    color: #fff;
}
.pp-msg-avatar-assistant {
    background: #7aaa9e;
    color: #fff;
}
.pp-msg-info {
    flex: 1; min-width: 0;
}
.pp-msg-name {
    font-size: 15px; font-weight: 600; color: #333;
    display: flex; align-items: center; gap: 6px;
}
.pp-msg-relation {
    font-size: 10px; color: #8a6b78; background: #f0e8ec;
    padding: 1px 6px; border-radius: 8px; font-weight: 500;
}
.pp-msg-online {
    font-size: 10px; color: #4caf50; font-weight: 500;
}
.pp-msg-preview {
    font-size: 13px; color: #999; margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-msg-badge {
    min-width: 20px; height: 20px; padding: 0 6px;
    background: #c75050; color: #fff; border-radius: 10px;
    font-size: 11px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pp-msg-badge-dot {
    width: 10px; height: 10px;
    background: #4caf50; border-radius: 50%;
    flex-shrink: 0;
}

/* ====== 联系人列表页面 ====== */
.pp-contacts-page {
    height: 100%; overflow-y: auto; background: #fff;
}
.pp-contacts-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
    position: sticky; top: 0; z-index: 5;
}
.pp-contacts-back, .pp-contacts-settings {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #666; font-size: 16px;
}
.pp-contacts-title {
    font-size: 18px; font-weight: 700; color: #3a3a4a;
}
.pp-contacts-section-title {
    padding: 12px 16px 6px; font-size: 12px; color: #8a6b78;
    font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
}
.pp-contact-card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid #f0f0f0;
    cursor: pointer; transition: background 0.15s;
}
.pp-contact-card:active { background: #f5f5f5; }
.pp-contact-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: #c8b0ba;
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; flex-shrink: 0;
}
.pp-avatar-manager {
    background: #7a85a0 !important;
}
.pp-avatar-assistant {
    background: #7aaa9e !important;
}
.pp-avatar-dream {
    background: #c8b0ba !important;
}
.pp-contact-info { flex: 1; }
.pp-contact-name { font-size: 15px; font-weight: 600; color: #333; }
.pp-contact-relation { font-size: 12px; color: #8a6b78; margin-top: 2px; }
.pp-contact-arrow { color: #ddd; font-size: 14px; }

/* ====== 设置页面 ====== */
.pp-settings-page {
    height: 100%; overflow-y: auto; background: #f5f5f7;
}
.pp-settings-section {
    background: #fff; margin: 12px 0; padding: 0;
}
.pp-settings-section:first-of-type { margin-top: 0; }
.pp-settings-section-title {
    padding: 14px 16px 8px; font-size: 13px; color: #8a6b78;
    font-weight: 600;
}
.pp-setting-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid #f0f0f0;
}
.pp-setting-item:last-child { border-bottom: none; }
.pp-setting-item span { font-size: 14px; color: #333; }
.pp-setting-item i { margin-right: 8px; color: #8a6b78; }
.pp-setting-clickable { cursor: pointer; transition: background 0.15s; }
.pp-setting-clickable:active { background: #f5f5f5; }
.pp-setting-clickable > i:last-child { color: #ccc; margin-right: 0; }
.pp-setting-value { font-size: 13px; color: #999; pointer-events: auto !important; }
.pp-setting-value[style*="cursor:pointer"] {
    padding: 6px 10px;
    border-radius: 8px;
    -webkit-tap-highlight-color: rgba(255,82,82,0.2);
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pp-setting-value[style*="cursor:pointer"]:active {
    background: rgba(255,82,82,0.1);
    transform: scale(0.9);
}
.pp-setting-hint {
    padding: 8px 16px 14px; font-size: 12px; color: #aaa;
}

/* 工作模式按钮 */
.pp-work-mode-btns {
    display: flex; gap: 10px; padding: 8px 16px 14px;
}
.pp-work-mode-btn {
    flex: 1; padding: 14px 12px;
    border: 2px solid #ddd; border-radius: 12px;
    background: #fff; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    transition: all 0.2s; font-size: 13px; color: #666;
}
.pp-work-mode-btn i { font-size: 24px; color: #aaa; }
.pp-work-mode-btn.active {
    border-color: #8a6b78; background: #f5f0f3; color: #5a4a52;
}
.pp-work-mode-btn.active i { color: #8a6b78; }
.pp-work-mode-btn:active { transform: scale(0.96); }

/* 经纪人/助理卡片 */
.pp-setting-staff-card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid #f0f0f0;
}
.pp-staff-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: #7a85a0;
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; flex-shrink: 0;
}
.pp-staff-avatar-asst {
    background: #7aaa9e;
}
.pp-staff-info { flex: 1; min-width: 0; }
.pp-staff-name { font-size: 15px; font-weight: 600; color: #333; }
.pp-staff-title { font-size: 12px; color: #7a85a0; margin-top: 2px; }
.pp-staff-trait { font-size: 11px; color: #999; margin-top: 2px; }
.pp-staff-bonus { font-size: 12px; color: #8a6b78; margin-top: 3px; font-weight: 500; }
.pp-staff-fire {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    color: #ccc; font-size: 18px; cursor: pointer;
    transition: color 0.2s;
    z-index: 2;
    position: relative;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: rgba(255,82,82,0.2);
    border-radius: 50%;
    flex-shrink: 0;
}
.pp-staff-fire:hover, .pp-staff-fire:active { color: #ff5252; background: rgba(255,82,82,0.1); }

/* ====== 模态框/弹窗样式 ====== */
.pp-settings-modal {
    background: #fff; border-radius: 16px;
    padding: 24px; width: 90%; max-width: 360px;
    max-height: 80vh; overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.pp-modal-title {
    font-size: 18px; font-weight: 700; color: #333;
    text-align: center; margin-bottom: 8px;
}
.pp-modal-subtitle {
    font-size: 13px; color: #999; text-align: center;
    margin-bottom: 16px;
}
.pp-modal-field {
    margin-bottom: 14px;
}
.pp-modal-field label {
    display: block; font-size: 13px; color: #666;
    margin-bottom: 6px; font-weight: 500;
}
.pp-modal-input {
    width: 100%; padding: 10px 14px;
    border: 1.5px solid #ddd; border-radius: 10px;
    font-size: 14px; outline: none; box-sizing: border-box;
    transition: border-color 0.2s;
}
.pp-modal-input:focus { border-color: #8a6b78; }
.pp-modal-textarea {
    width: 100%; padding: 10px 14px; min-height: 100px;
    border: 1.5px solid #ddd; border-radius: 10px;
    font-size: 14px; outline: none; resize: vertical;
    font-family: inherit; box-sizing: border-box;
    transition: border-color 0.2s;
}
.pp-modal-textarea:focus { border-color: #8a6b78; }
.pp-modal-actions {
    display: flex; gap: 10px; margin-top: 16px;
}
.pp-modal-btn {
    flex: 1; padding: 12px; border: none; border-radius: 10px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: all 0.2s;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}
.pp-modal-btn:active { transform: scale(0.96); }
.pp-modal-btn-cancel {
    background: #f5f5f5; color: #666;
}
.pp-modal-btn-confirm {
    background: #8a6b78;
    color: #fff;
}

/* ====== 联系人详情弹窗 ====== */
.pp-contact-detail-box {
    background: #fff; border-radius: 20px;
    padding: 30px 24px 24px; width: 90%; max-width: 340px;
    text-align: center; position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.pp-detail-close {
    position: absolute; top: 12px; right: 12px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    color: #ccc; font-size: 18px; cursor: pointer;
}
.pp-detail-avatar {
    width: 72px; height: 72px; border-radius: 50%;
    background: #c8b0ba;
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 700; margin: 0 auto 12px;
}
.pp-detail-name {
    font-size: 20px; font-weight: 700; color: #333; margin-bottom: 4px;
}
.pp-detail-relation {
    font-size: 13px; color: #8a6b78;
    display: inline-block; padding: 2px 12px;
    background: #f0e8ec; border-radius: 12px;
    margin-bottom: 16px;
}
.pp-detail-story-section {
    text-align: left; margin: 12px 0;
    background: #f8f8fa; border-radius: 12px; padding: 14px;
}
.pp-detail-story-title {
    font-size: 14px; font-weight: 600; color: #5a4a52;
    margin-bottom: 8px;
}
.pp-detail-story-title i { margin-right: 6px; }
.pp-detail-story-text {
    font-size: 13px; color: #666; line-height: 1.6;
}
.pp-detail-actions {
    display: flex; gap: 10px; margin-top: 16px;
}
.pp-detail-btn {
    flex: 1; padding: 10px; border: none; border-radius: 10px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    background: #8a6b78;
    color: #fff; transition: all 0.2s;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: rgba(100,70,85,0.3);
}
.pp-detail-btn:active { transform: scale(0.96); }
.pp-detail-btn-danger {
    background: #c75050;
}

/* ====== 经纪人/助理挑选弹窗 ====== */
.pp-pick-modal {
    background: #fff; border-radius: 20px;
    padding: 24px; width: 92%; max-width: 400px;
    max-height: 85vh; overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.pp-pick-title {
    font-size: 20px; font-weight: 700; color: #333;
    text-align: center; margin-bottom: 4px;
}
.pp-pick-title i { margin-right: 8px; color: #8a6b78; }
.pp-pick-subtitle {
    font-size: 13px; color: #999; text-align: center;
    margin-bottom: 16px;
}
.pp-pick-cards {
    display: flex; flex-direction: column; gap: 12px;
}
.pp-pick-card {
    background: #fff;
    border: 2px solid #e0e0e0; border-radius: 16px;
    padding: 16px; text-align: center;
    cursor: pointer; transition: all 0.2s;
}
.pp-pick-card:hover { border-color: #8a6b78; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.pp-pick-card:active { transform: scale(0.97); }
.pp-pick-card-asst {
    background: #fff;
    border-color: #c0d8d4;
}
.pp-pick-card-asst:hover { border-color: #7aaa9e; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.pp-pick-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: #7a85a0;
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; margin: 0 auto 10px;
}
.pp-pick-avatar-asst {
    background: #7aaa9e;
}
.pp-pick-name {
    font-size: 17px; font-weight: 700; color: #333; margin-bottom: 4px;
}
.pp-pick-stars {
    font-size: 14px; margin-bottom: 6px; letter-spacing: 2px;
}
.pp-pick-title-text {
    font-size: 13px; color: #7a85a0; font-weight: 500; margin-bottom: 6px;
}
.pp-pick-card-asst .pp-pick-title-text { color: #7aaa9e; }
.pp-pick-trait {
    font-size: 13px; color: #8a6b78; font-weight: 600; margin-bottom: 3px;
}
.pp-pick-trait i { margin-right: 4px; }
.pp-pick-trait-desc {
    font-size: 12px; color: #999; margin-bottom: 8px;
}
.pp-pick-bonus {
    font-size: 14px; font-weight: 700; color: #8a6b78;
    background: #f0e8ec; display: inline-block;
    padding: 4px 14px; border-radius: 12px;
}
.pp-pick-card-asst .pp-pick-bonus {
    color: #7aaa9e; background: #e8f2f0;
}

/* ====== 多媒体按钮栏 ====== */
.pp-media-bar {
    display: flex; align-items: center; gap: 4px;
    padding: 6px 12px;
    background: #fafafa;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}
.pp-media-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    color: #8a6b78;
    font-size: 11px;
    flex: 1;
}
.pp-media-btn i { font-size: 18px; }
.pp-media-btn span { font-size: 10px; color: #999; }
.pp-media-btn:active {
    background: #f0f0f0;
    transform: scale(0.93);
}

/* ====== 引用回复栏 ====== */
.pp-quote-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    background: #f8f8fa;
    border-top: 1px solid #eee;
    border-left: 3px solid #8a6b78;
    font-size: 12px; color: #888;
    flex-shrink: 0;
    min-height: 20px;
}
.pp-quote-content {
    flex: 1; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis;
}
.pp-quote-content strong { color: #8a6b78; margin-right: 4px; }
.pp-quote-close {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    color: #ccc; cursor: pointer; flex-shrink: 0;
    font-size: 14px;
}
.pp-quote-close:active { color: #8a6b78; }

/* ====== 引用消息内引用标记 ====== */
.pp-chat-quote-ref {
    font-size: 11px; color: #b0b0b0;
    background: rgba(100,70,85,0.06);
    padding: 4px 8px;
    border-radius: 6px;
    margin-bottom: 4px;
    border-left: 2px solid #c8b0ba;
    word-break: break-word;
}
.pp-chat-quote-ref i { margin-right: 4px; font-size: 10px; }

/* ====== 长按引用菜单 ====== */
.pp-quote-menu {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    padding: 4px;
    z-index: 999;
    animation: ppFadeIn 0.15s ease;
}
.pp-quote-menu-item {
    padding: 10px 18px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
    white-space: nowrap;
}
.pp-quote-menu-item:active { background: #f0f0f0; }
.pp-quote-menu-item i { margin-right: 8px; color: #8a6b78; }

/* ====== 聊天中的多媒体消息样式 ====== */
.pp-chat-media-msg {
    padding: 6px 10px;
    background: rgba(100,70,85,0.06);
    border-radius: 8px;
    font-size: 13px;
    color: #8a6b78;
}
.pp-chat-media-msg i { margin-right: 6px; }

.pp-chat-voice-msg {
    padding: 8px 14px;
    background: rgba(100,70,85,0.06);
    border-radius: 20px;
    font-size: 13px;
    color: #8a6b78;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 80px;
}
.pp-chat-voice-msg i { font-size: 16px; }

/* ====== 微信风格语音条 ====== */
.pp-voice-bar {
    padding: 10px 14px;
    border-radius: 6px;
    min-width: 80px;
    max-width: 240px;
    justify-content: flex-start;
    background: #f5f5f5;
    color: #333;
    cursor: pointer;
    position: relative;
    transition: background 0.15s;
}
.pp-voice-bar:active {
    background: #e8e8e8;
}
/* 用户发的语音条：右侧气泡内，绿色/粉色调 */
.pp-chat-bubble-me .pp-voice-bar {
    background: rgba(149,120,134,0.12);
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.pp-chat-bubble-me .pp-voice-bar:active {
    background: rgba(149,120,134,0.20);
}
/* 粉丝语音条：左侧气泡内 */
.pp-chat-bubble-fan .pp-voice-bar {
    background: #f5f5f5;
}
/* 微信三道声波动画 */
.pp-voice-wave-wechat {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.pp-voice-wave-wechat span {
    display: inline-block;
    width: 2px;
    border-radius: 1px;
    background: #8a6b78;
}
.pp-voice-wave-wechat span:nth-child(1) { height: 5px; }
.pp-voice-wave-wechat span:nth-child(2) { height: 10px; }
.pp-voice-wave-wechat span:nth-child(3) { height: 15px; }
.pp-chat-bubble-me .pp-voice-wave-wechat span {
    background: #6b4f5e;
}
/* 语音时长数字 */
.pp-voice-bar .pp-voice-sec {
    margin-left: auto;
    font-size: 12px;
    color: #999;
    flex-shrink: 0;
}
.pp-chat-bubble-me .pp-voice-bar .pp-voice-sec {
    margin-left: 0;
    margin-right: auto;
}
/* 播放中动画（微信三道波浪依次闪烁） */
.pp-voice-playing .pp-voice-wave-wechat span {
    animation: ppWechatVoice 1.2s ease-in-out infinite;
}
.pp-voice-playing .pp-voice-wave-wechat span:nth-child(1) { animation-delay: 0s; }
.pp-voice-playing .pp-voice-wave-wechat span:nth-child(2) { animation-delay: 0.2s; }
.pp-voice-playing .pp-voice-wave-wechat span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ppWechatVoice {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.pp-chat-img-msg {
    max-width: 160px;
    border-radius: 10px;
    cursor: pointer;
    display: block;
}

/* ====== 表情包消息样式（参考微信样式修复） ====== */
/* [FIX-表情气泡缩小] 表情包气泡从120→80，与文本气泡视觉协调 */
.pp-chat-sticker-msg {
    width: 80px;
    height: 80px;
    max-width: 80px;
    max-height: 80px;
    border-radius: 8px;
    display: block;
    object-fit: contain;
    background: transparent;
}

/* [FIX-表情气泡缩小] emoji表情从48px→36px */
.pp-chat-sticker-emoji {
    font-size: 36px;
    line-height: 1.2;
}

/* 表情包消息时气泡无背景 */
.pp-chat-bubble-me:has(.pp-chat-sticker-msg),
.pp-chat-bubble-me:has(.pp-chat-sticker-emoji),
.pp-chat-bubble-fan:has(.pp-chat-sticker-msg),
.pp-chat-bubble-fan:has(.pp-chat-sticker-emoji) {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ====== 伪装图片新样式 ====== */
.pp-chat-fake-img-wrap {
    position: relative;
    display: inline-block;
    cursor: pointer;
    max-width: 160px;
}
.pp-chat-fake-img-wrap .pp-chat-img-msg {
    max-width: 160px;
    border-radius: 10px;
    display: block;
}
.pp-chat-fake-img-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    color: #fff;
    font-size: 11px;
    padding: 16px 8px 6px;
    border-radius: 0 0 10px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pp-chat-fake-img-label i {
    margin-right: 4px;
    font-size: 10px;
}

/* ====== 可播放语音消息样式 ====== */
.pp-chat-voice-playable {
    cursor: pointer;
    min-width: 100px;
    transition: background 0.2s;
}
.pp-chat-voice-playable:active {
    background: rgba(100,70,85,0.12);
}
.pp-voice-wave {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    margin-left: 6px;
    height: 16px;
}
.pp-voice-wave span {
    display: inline-block;
    width: 2px;
    background: #8a6b78;
    border-radius: 1px;
}
.pp-voice-wave span:nth-child(1) { height: 6px; }
.pp-voice-wave span:nth-child(2) { height: 10px; }
.pp-voice-wave span:nth-child(3) { height: 6px; }
.pp-voice-sec {
    margin-left: 6px;
    font-size: 12px;
    color: #999;
}

/* 语音播放动画 */
.pp-voice-playing .pp-voice-wave span {
    animation: ppVoiceWave 0.8s ease-in-out infinite;
}
.pp-voice-playing .pp-voice-wave span:nth-child(1) { animation-delay: 0s; }
.pp-voice-playing .pp-voice-wave span:nth-child(2) { animation-delay: 0.2s; }
.pp-voice-playing .pp-voice-wave span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ppVoiceWave {
    0%, 100% { height: 4px; }
    50% { height: 14px; }
}

/* ====== 表情包选择面板 ====== */
.pp-sticker-panel {
    position: absolute;
    bottom: 100px;
    left: 0; right: 0;
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    z-index: 50;
    max-height: 55vh;
    display: flex;
    flex-direction: column;
    animation: ppSlideUp 0.2s ease;
}
@keyframes ppSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.pp-sticker-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    font-size: 14px; font-weight: 600; color: #5a4a52;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.pp-sticker-panel-close {
    font-size: 20px; cursor: pointer; color: #ccc;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
}
.pp-sticker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 10px;
    overflow-y: auto;
    flex: 1;
}
.pp-sticker-item {
    width: 100%;
    aspect-ratio: 1;
    max-width: 80px;
    max-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    overflow: hidden;
    font-size: 28px;
    background: #f5f5f7;
    margin: 0 auto;
}
.pp-sticker-item:active { transform: scale(0.9); background: #eee; }
.pp-sticker-item img {
    width: 100%;
    height: 100%;
    max-width: 70px;
    max-height: 70px;
    object-fit: contain;
}

/* ====== 输入框内表情按钮 ====== */
.pp-chat-emoji-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    color: #8a6b78;
    font-size: 22px;
    flex-shrink: 0;
}
.pp-chat-emoji-btn:active {
    background: #f0e8f0;
    transform: scale(0.9);
}

/* ====== 微信风格表情包面板（放在输入框下方，可滑动查看所有分类） ====== */
.pp-sticker-panel-wechat {
    background: #f7f7f8;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    max-height: 50vh;
    min-height: 220px;
    animation: ppStickerFadeIn 0.25s ease;
}
@keyframes ppStickerFadeIn {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 50vh; }
}

/* 表情内容区域（纵向可滚动，包含所有分类） */
.pp-sticker-content-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 6px 8px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* 每个分类的section */
.pp-sticker-section {
    margin-bottom: 6px;
}
.pp-sticker-section:last-child {
    margin-bottom: 0;
    /* 最后一个section至少撑满可视区域，保证能滚动到它并高亮tab */
    min-height: 180px;
}

/* 分类名称标签（粘性定位，滚动时置顶） */
.pp-sticker-cate-name {
    font-size: 12px;
    color: #999;
    padding: 6px 8px 6px;
    font-weight: 500;
    background: #f7f7f8;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

/* 微信风格表情网格 */
.pp-sticker-grid-wechat {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0 4px 8px;
}
.pp-sticker-grid-wechat .pp-sticker-item {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    overflow: hidden;
    font-size: 32px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    margin: 0 auto;
    max-width: 90px;
    max-height: 90px;
}
.pp-sticker-grid-wechat .pp-sticker-item:active {
    transform: scale(0.88);
    background: #f0f0f0;
}
.pp-sticker-grid-wechat .pp-sticker-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 80px;
    max-height: 80px;
    padding: 4px;
    box-sizing: border-box;
}

/* 底部分类tab栏（微信风格） */
.pp-sticker-tabs-bar {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border-top: 1px solid #e8e8e8;
    padding: 0;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pp-sticker-tabs-bar::-webkit-scrollbar { display: none; }

.pp-sticker-tab {
    flex: 0 0 auto;
    min-width: 52px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2.5px solid transparent;
    padding: 0 4px;
}
.pp-sticker-tab:active {
    background: #f5f5f5;
}
.pp-sticker-tab.active {
    border-bottom-color: #8a6b78;
    background: #faf5f9;
}
.pp-sticker-tab-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 4px;
}
.pp-sticker-tab-emoji {
    font-size: 24px;
    line-height: 1;
}
.pp-sticker-tab i {
    font-size: 20px;
    color: #aaa;
}

/* ====== 微信联系人选择列表 ====== */
.pp-wx-contact-list {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 50vh; overflow-y: auto;
}
.pp-wx-contact-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1px solid #eee;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}
.pp-wx-contact-item:active {
    background: #f5f5f5;
    border-color: #8a6b78;
    transform: scale(0.98);
}
.pp-wx-contact-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.pp-wx-contact-avatar-placeholder {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #c8b0ba;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700;
    flex-shrink: 0;
}
.pp-wx-contact-name {
    flex: 1; font-size: 15px; font-weight: 500; color: #333;
}
.pp-wx-contact-add {
    color: #8a6b78; font-size: 20px; flex-shrink: 0;
}

/* ====== 表情包挂载页面 ====== */
.pp-sticker-mount-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.15s;
}
.pp-sticker-mount-item:active { background: #f5f5f5; }
.pp-sticker-mount-item.mounted {
    background: #f8f8fa;
}
.pp-sticker-mount-info { flex: 1; }
.pp-sticker-mount-name {
    font-size: 14px; font-weight: 500; color: #333;
}
.pp-sticker-mount-count {
    font-size: 12px; color: #999; margin-top: 2px;
}
.pp-sticker-mount-toggle {
    flex-shrink: 0;
}

/* ====== 微信联系人头像样式 ====== */
.pp-msg-avatar-wx {
    width: 48px; height: 48px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}
.pp-contact-avatar-wx {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.pp-chat-avatar-wx-img {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.pp-detail-avatar-wx {
    width: 72px; height: 72px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 12px;
    display: block;
}
/* ====== 功能页面四导航栏 ====== */
.pp-func-tabs {
    display: flex;
    background: #fff;
    border-bottom: 2px solid #eee;
    position: sticky;
    top: 0;
    z-index: 10;
}
.pp-func-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    font-size: 12px;
    color: #999;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    gap: 3px;
}
.pp-func-tab i {
    font-size: 18px;
    margin-bottom: 2px;
}
.pp-func-tab.active {
    color: #8a6b78;
    border-bottom-color: #8a6b78;
    font-weight: 600;
}
.pp-func-tab:active {
    background: #f5f5f5;
}
.pp-func-content {
    padding: 12px;
    min-height: 300px;
}

/* 进行中工作条 */
.pp-active-jobs-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin: 0;
    background: #f5f0ee;
    color: #8a6a50;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}
.pp-active-jobs-bar:active {
    background: #eee8e4;
}
.pp-active-jobs-bar i:first-child {
    font-size: 16px;
}

/* 加载动画 */
.pp-loading-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}
.pp-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e0dade;
    border-top-color: #8a6b78;
    border-radius: 50%;
    animation: ppSpin 0.8s linear infinite;
}
@keyframes ppSpin {
    to { transform: rotate(360deg); }
}
.pp-loading-text {
    font-size: 13px;
    color: #999;
}

/* Offer卡片列表 */
.pp-offer-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pp-offer-card {
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #eee;
}
.pp-offer-card-variety {
    border-left: 3px solid #8a7aa0;
}
.pp-offer-card-endorse {
    border-left: 3px solid #b89070;
}
.pp-offer-card-blog {
    border-left: 3px solid #7a9ab0;
}
.pp-offer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.pp-offer-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}
.pp-offer-type-movie {
    background: #8a6b78;
}
.pp-offer-type-drama {
    background: #8a7aa0;
}
.pp-offer-type-variety {
    background: #7a6a90;
}
.pp-offer-type-endorse {
    background: #b89070;
}
.pp-offer-type-blog {
    background: #7a9ab0;
}
.pp-offer-stars {
    display: flex;
    gap: 2px;
    font-size: 12px;
}
.pp-offer-name {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 6px;
}
.pp-offer-role {
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}
.pp-offer-role i {
    color: #8a6b78;
    margin-right: 4px;
    font-size: 12px;
}
.pp-offer-effect {
    font-size: 12px;
    color: #8a6a50;
    margin-bottom: 8px;
    padding: 6px 10px;
    background: #f5f0ee;
    border-radius: 8px;
}
.pp-offer-effect i {
    margin-right: 4px;
}
.pp-offer-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 12px;
    color: #888;
}
.pp-offer-meta i {
    margin-right: 3px;
    color: #8a6b78;
}
.pp-offer-actions {
    display: flex;
    gap: 8px;
    position: relative;
    z-index: 5;
}
.pp-offer-btn {
    flex: 1;
    padding: 8px 0;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    user-select: none;
    -webkit-user-select: none;
}
.pp-offer-btn:active {
    transform: scale(0.96);
}
.pp-offer-btn-reject {
    background: #f5f5f5;
    color: #999;
}
.pp-offer-btn-reject:active {
    background: #eee;
}
.pp-offer-btn-accept {
    background: #8a6b78;
    color: #fff;
}
.pp-offer-btn-accept:active {
    background: #7a5b68;
}

/* 刷新按钮 */
.pp-refresh-btn {
    text-align: center;
    padding: 12px;
    margin-top: 12px;
    color: #8a6b78;
    font-size: 13px;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.2s;
}
.pp-refresh-btn:active {
    background: #f0f0f0;
}
.pp-refresh-btn i {
    margin-right: 4px;
}

/* 事件弹窗 */
.pp-event-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.pp-event-box {
    background: #fff;
    border-radius: 18px;
    padding: 24px 18px;
    width: 90%;
    max-width: 340px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    animation: ppSlideUp 0.3s ease-out;
}
@keyframes ppSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.pp-event-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-bottom: 8px;
}
.pp-event-job {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin-bottom: 10px;
}
.pp-event-desc {
    font-size: 14px;
    color: #555;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 18px;
    padding: 12px;
    background: #f8f8fa;
    border-radius: 10px;
}
.pp-event-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pp-event-option {
    padding: 12px 14px;
    background: #f5f0f3;
    border: 1px solid #e0dade;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
}
.pp-event-option:active {
    transform: scale(0.97);
    background: #ebe4e8;
}
.pp-event-option-text {
    font-size: 14px;
    font-weight: 500;
    color: #5a4a52;
}

/* 进行中工作面板 */
.pp-active-job-card {
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #eee;
}
.pp-active-job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.pp-active-job-type {
    font-size: 13px;
    font-weight: 600;
    color: #8a6b78;
}
.pp-active-job-status {
    font-size: 12px;
    color: #4caf50;
}
.pp-active-job-name {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}
.pp-active-job-desc {
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}
.pp-active-job-stars {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
}
.pp-active-job-progress {
    margin-bottom: 10px;
}
.pp-progress-bar {
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}
.pp-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}
.pp-progress-text {
    font-size: 11px;
    color: #999;
    text-align: right;
}
.pp-active-job-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
}

/* ====== 拍摄页面样式 ====== */
.pp-shooting-page {
    padding: 0;
    min-height: 100%;
}
.pp-shooting-header {
    background: #8a6b78;
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 10;
}
.pp-shooting-back {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}
.pp-shooting-back:active {
    background: rgba(255,255,255,0.35);
}
.pp-shooting-title {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pp-shooting-stars {
    font-size: 12px;
}

/* 进度区域 */
.pp-shooting-progress-area {
    background: #fff;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
}
.pp-shooting-progress-bar {
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}
.pp-shooting-progress-fill {
    height: 100%;
    background: #a0889a;
    border-radius: 4px;
    transition: width 0.5s ease;
}
.pp-shooting-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #666;
}
.pp-shooting-countdown {
    text-align: center;
    font-size: 12px;
    color: #8a6b78;
    margin-top: 6px;
}

/* 属性面板 */
.pp-shooting-attrs {
    background: #fff;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    border-bottom: 1px solid #f0f0f0;
}
.pp-shooting-attr-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}
.pp-shooting-attr-icon {
    font-size: 14px;
}
.pp-shooting-attr-name {
    color: #666;
    min-width: 28px;
}
.pp-shooting-attr-val {
    font-weight: 600;
    color: #333;
}
.pp-attr-change {
    font-size: 11px;
    margin-left: 2px;
    font-weight: 700;
}
.pp-attr-change.positive {
    color: #4caf50;
}
.pp-attr-change.negative {
    color: #ff5252;
}

/* 粉丝变化 */
.pp-shooting-fans-change {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}
.pp-shooting-fans-change.positive {
    color: #4caf50;
}
.pp-shooting-fans-change.negative {
    color: #ff5252;
}

/* 剧本简述 */
.pp-shooting-synopsis {
    background: #fff;
    padding: 14px 16px;
    margin: 8px 0;
    border-radius: 0;
}
.pp-shooting-synopsis-title {
    font-size: 14px;
    font-weight: 700;
    color: #8a6b78;
    margin-bottom: 8px;
}
.pp-shooting-synopsis-title i {
    margin-right: 5px;
}
.pp-shooting-synopsis-text {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
    background: #f8f8fa;
    padding: 10px 12px;
    border-radius: 10px;
    border-left: 3px solid #a0889a;
}

/* 加载状态 */
.pp-shooting-loading {
    text-align: center;
    padding: 30px;
}

/* 场景历史 */
.pp-shooting-history {
    background: #fff;
    padding: 14px 16px;
    margin: 8px 0;
}
.pp-shooting-history-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}
.pp-shooting-history-title i {
    color: #8a6b78;
    margin-right: 5px;
}
.pp-shooting-history-item {
    padding: 10px 12px;
    background: #fafafa;
    border-radius: 10px;
    margin-bottom: 8px;
    border-left: 3px solid #e0e0e0;
}
.pp-shooting-history-item:last-child {
    margin-bottom: 0;
}
.pp-shooting-history-day {
    font-size: 12px;
    color: #8a6b78;
    font-weight: 700;
    margin-bottom: 3px;
}
.pp-shooting-history-desc {
    font-size: 13px;
    color: #333;
    font-weight: 600;
    margin-bottom: 2px;
}
.pp-shooting-history-choice {
    font-size: 12px;
    color: #666;
    margin-bottom: 2px;
}
.pp-shooting-history-result {
    font-size: 12px;
    font-weight: 600;
}
.pp-shooting-history-result.positive {
    color: #4caf50;
}
.pp-shooting-history-result.negative {
    color: #ff5252;
}

/* 片酬信息 */
.pp-shooting-pay {
    padding: 10px 16px;
    font-size: 13px;
    color: #888;
    text-align: center;
    background: #fff;
}
.pp-shooting-pay i {
    color: #b89070;
    margin-right: 4px;
}

/* 完成区域 */
.pp-shooting-complete-area {
    text-align: center;
    padding: 20px 16px;
    background: #f8f5f0;
    margin: 8px 0;
}
.pp-shooting-complete-text {
    font-size: 18px;
    font-weight: 700;
    color: #8a6b78;
    margin-bottom: 12px;
}
.pp-shooting-complete-btn {
    background: #8a6b78;
    color: #fff;
    border: none;
    padding: 12px 36px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 3px 12px rgba(100,70,85,0.25);
}
.pp-shooting-complete-btn:active {
    transform: scale(0.95);
}

/* 拍摄场景弹窗 */
.pp-shooting-scene-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
}
.pp-shooting-scene-box {
    background: #fff;
    border-radius: 20px;
    width: 92%;
    max-width: 380px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    max-height: 85vh;
    overflow-y: auto;
}
.pp-shooting-scene-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.pp-shooting-scene-day {
    background: #8a6b78;
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
}
.pp-shooting-scene-total {
    font-size: 12px;
    color: #999;
}
.pp-shooting-scene-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}
.pp-shooting-scene-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 16px;
    padding: 10px;
    background: #f8f8fa;
    border-radius: 10px;
}
.pp-shooting-scene-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pp-shooting-scene-option {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1.5px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
}
.pp-shooting-scene-option:hover {
    border-color: #8a6b78;
    background: #f8f5f7;
}
.pp-shooting-scene-option:active {
    transform: scale(0.97);
    background: #f0eaed;
}
.pp-shooting-option-text {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}
.pp-shooting-option-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
}
.pp-scene-preview-attrs {
    color: #7a6a90;
    background: #f0edf3;
    padding: 2px 8px;
    border-radius: 8px;
}
.pp-scene-preview-fans {
    padding: 2px 8px;
    border-radius: 8px;
}
.pp-scene-preview-fans.positive {
    color: #4caf50;
    background: #e8f5e9;
}
.pp-scene-preview-fans.negative {
    color: #ff5252;
    background: #ffebee;
}

/* 功能页拍摄中入口条 */
.pp-shooting-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f5f0f3;
    margin: 0;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #e0dade;
}
.pp-shooting-bar:active {
    background: #ebe4e8;
}
.pp-shooting-bar-icon {
    font-size: 24px;
}
.pp-shooting-bar-info {
    flex: 1;
}
.pp-shooting-bar-name {
    font-size: 14px;
    font-weight: 700;
    color: #5a4a52;
    margin-bottom: 4px;
}
.pp-shooting-bar-progress {
    height: 4px;
    background: rgba(255,255,255,0.5);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 3px;
}
.pp-shooting-bar-fill {
    height: 100%;
    background: #8a6b78;
    border-radius: 2px;
    transition: width 0.3s;
}
.pp-shooting-bar-text {
    font-size: 11px;
    color: #8a6b78;
}

/* ====== 初始设置弹窗 ====== */
.pp-setup-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.pp-setup-modal {
    background: #fff;
    border-radius: 20px;
    width: 92%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px 20px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12);
    position: relative;
    animation: ppFadeIn 0.3s ease;
}
@keyframes ppFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.pp-setup-title {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    color: #5a4a52;
    margin-bottom: 4px;
}
.pp-setup-subtitle {
    font-size: 13px;
    text-align: center;
    color: #999;
    margin-bottom: 20px;
}
.pp-setup-avatar-area {
    text-align: center;
    margin-bottom: 18px;
}
.pp-setup-avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #d0c0c8;
    cursor: pointer;
    transition: all 0.2s;
}
.pp-setup-avatar-img:active {
    opacity: 0.7;
    transform: scale(0.95);
}
.pp-setup-avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f5f0f3;
    border: 3px dashed #c8b0ba;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #8a6b78;
    font-size: 22px;
    transition: all 0.2s;
    gap: 2px;
}
.pp-setup-avatar-placeholder span {
    font-size: 10px;
}
.pp-setup-avatar-placeholder:active {
    transform: scale(0.95);
    background: #e0dade;
}
.pp-setup-field {
    margin-bottom: 16px;
}
.pp-setup-label {
    display: block;
    font-size: 13px;
    color: #999;
    margin-bottom: 6px;
    font-weight: 500;
}
.pp-setup-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #ddd;
    border-radius: 12px;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.pp-setup-input:focus {
    border-color: #8a6b78;
}
.pp-setup-gender-row {
    display: flex;
    gap: 10px;
}
.pp-setup-gender-btn {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    border: 1.5px solid #ddd;
    background: #fff;
    font-size: 14px;
    transition: all 0.2s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.pp-setup-gender-btn.active {
    border-color: #8a6b78;
    background: #f5f0f3;
    font-weight: 600;
}
.pp-setup-gender-btn:active {
    transform: scale(0.97);
}
.pp-setup-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 18px 0;
}
.pp-setup-section {
    margin-bottom: 16px;
}
.pp-setup-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #5a4a52;
}
.pp-setup-reroll-btn {
    font-size: 12px;
    color: #8a6b78;
    background: #f0e8ec;
    padding: 5px 12px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.pp-setup-reroll-btn:active {
    background: #e0dade;
    transform: scale(0.95);
}
.pp-setup-rating {
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
    text-align: center;
}
.pp-setup-attrs, .pp-profile-attrs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pp-setup-attr-item, .pp-profile-attr-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pp-setup-attr-label, .pp-profile-attr-label {
    width: 65px;
    font-size: 13px;
    color: #666;
    flex-shrink: 0;
}
.pp-setup-attr-bar-wrap, .pp-profile-attr-bar-wrap {
    flex: 1;
    height: 12px;
    background: #f5f5f5;
    border-radius: 6px;
    overflow: hidden;
}
.pp-setup-attr-bar, .pp-profile-attr-bar {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}
.pp-setup-attr-val, .pp-profile-attr-val {
    width: 30px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
/* 属性颜色等级 */
.pp-attr-excellent { background: #8a6b78; }
.pp-attr-excellent + .pp-setup-attr-val,
.pp-attr-excellent + .pp-profile-attr-val { color: #8a6b78; }
.pp-attr-good { background: #b89070; }
.pp-attr-good + .pp-setup-attr-val,
.pp-attr-good + .pp-profile-attr-val { color: #b89070; }
.pp-attr-normal { background: #7aaa9e; }
.pp-attr-normal + .pp-setup-attr-val,
.pp-attr-normal + .pp-profile-attr-val { color: #7aaa9e; }
.pp-attr-low { background: #aaa; }
.pp-attr-low + .pp-setup-attr-val,
.pp-attr-low + .pp-profile-attr-val { color: #aaa; }

.pp-setup-backstory {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
    padding: 12px 14px;
    background: #f5f0f3;
    border-radius: 12px;
    border-left: 3px solid #a0889a;
}
.pp-setup-reroll-all {
    text-align: center;
    padding: 10px;
    color: #8a6b78;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 12px;
    transition: all 0.2s;
    user-select: none;
}
.pp-setup-reroll-all:active {
    opacity: 0.7;
}
.pp-setup-confirm-btn {
    width: 100%;
    padding: 14px;
    background: #8a6b78;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.pp-setup-confirm-btn:active {
    transform: scale(0.97);
    opacity: 0.9;
}

/* ====== Profile 属性展示 ====== */
.pp-profile-attrs {
    padding: 14px 16px;
}
.pp-profile-backstory {
    padding: 14px 16px;
    font-size: 13px;
    color: #555;
    line-height: 1.7;
}

/* ====== 特别关心与管理员样式 ====== */
.pp-msg-item-special {
    background: #fafafa;
}
.pp-msg-special-badge {
    font-size: 12px;
    margin-left: 2px;
}
.pp-msg-admin-badge {
    font-size: 11px;
    margin-left: 2px;
}
.pp-special-care-badge {
    font-size: 11px;
    color: #c47888;
    background: #f5eef0;
    padding: 1px 8px;
    border-radius: 8px;
    margin-left: 4px;
    font-weight: 500;
}
.pp-admin-badge {
    font-size: 11px;
    color: #7a85a0;
    background: #eef0f5;
    padding: 1px 8px;
    border-radius: 8px;
    margin-left: 4px;
    font-weight: 500;
}
.pp-detail-toggles {
    display: flex;
    gap: 10px;
    margin: 16px 0 8px;
}
.pp-detail-toggle {
    flex: 1;
    padding: 10px 8px;
    border-radius: 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    background: #f5f5f7;
    color: #666;
    border: 1.5px solid #e0e0e0;
}
.pp-detail-toggle.active {
    background: #f0eaed;
    color: #8a6b78;
    border-color: #c8b0ba;
}
.pp-detail-toggle:active {
    transform: scale(0.96);
}
.pp-detail-toggle i {
    margin-right: 4px;
}
.pp-filter-active {
    background: #8a6b78 !important;
    color: #fff !important;
}

/* ========== END PAOPAO APP ========== */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║   🍎🔷 iOS/鸿蒙 表情包面板修复 (2026-03-29 v2)                 ║
   ║   修复: iOS/鸿蒙上表情包面板网格布局异常                         ║
   ║   修复: sticker-item被拉伸、挤出屏幕（用户表情包一行超宽）      ║
   ║   修复: JS内联style设置的1fr覆盖CSS !important导致修复失效      ║
   ║   改为通用修复，iOS和鸿蒙均生效，不影响安卓正常表现              ║
   ║   注意: 不能用 display:grid !important，会破坏JS的display:none   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* [FIX-通用表情网格] 主聊天表情面板：强制百分比列宽+overflow约束 */
/* 用!important覆盖JS内联样式设置的grid-template-columns */
#layer-chat .sticker-panel[style] {
    grid-template-columns: repeat(3, calc(33.33% - 7px)) !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
}

/* 外层固定分类栏，只有下方网格纵向滚动。 */
#layer-chat .sticker-panel .sticker-panel-grid {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* [FIX-通用表情网格] sticker-item防止撑破grid单元格 */
#layer-chat .sticker-panel .sticker-item {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
}

/* [FIX-通用表情网格] sticker-item内图片限制尺寸 */
#layer-chat .sticker-panel .sticker-item img {
    width: 100% !important;
    max-width: 100% !important;
    height: 50px !important;
    max-height: 50px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

@supports (-webkit-touch-callout: none) {
    /* [FIX-iOS表情网格] iOS专用额外加固 */
    #layer-chat .sticker-panel {
        grid-template-columns: repeat(3, calc(33.33% - 7px)) !important;
        grid-auto-rows: minmax(auto, 90px) !important;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
    }

    .sticker-item {
        max-height: 90px !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
    }

    .sticker-item img {
        width: 100% !important;
        max-width: 100% !important;
        height: 50px !important;
        max-height: 50px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }

    /* [FIX-iOS表情网格] 泡泡聊天表情面板：用百分比列宽 */
    .pp-sticker-grid {
        grid-template-columns: repeat(4, calc(25% - 6px)) !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
        justify-content: space-between !important;
    }

    /* [FIX-iOS表情网格] pp-sticker-item防止撑破grid */
    .pp-sticker-item {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
    }

    .pp-sticker-item img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 70px !important;
        object-fit: contain !important;
    }

    /* [FIX-iOS表情网格] 微信风格表情面板iOS兼容 */
    .pp-sticker-grid-wechat {
        grid-template-columns: repeat(4, calc(25% - 6px)) !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
    }
    .pp-sticker-grid-wechat .pp-sticker-item {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
    }
    .pp-sticker-grid-wechat .pp-sticker-item img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 80px !important;
        object-fit: contain !important;
    }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║   🔧 聊天美化页面按钮大小统一修复 (iOS专用) (2026-03-16)        ║
   ║   修复: iOS上"应用"、"存为预设"、"还原" 三个按钮大小不一致      ║
   ║   仅iOS生效，不影响安卓                                          ║
   ╚══════════════════════════════════════════════════════════════════╝ */
/* [FIX-iOS按钮等大] iOS Safari flex布局对mini按钮等宽支持不完善 */
/* 使用@supports (-webkit-touch-callout: none)确保仅iOS生效 */
@supports (-webkit-touch-callout: none) {
    /* 三个CSS区域（气泡/全局/线下）的"应用""存为预设""还原"按钮容器 */
    #beauty-page-chat-style .beauty-section-card div[style*="display:flex"] {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
        -webkit-align-items: stretch !important;
        align-items: stretch !important;
    }
    /* 三个CSS区域（气泡/全局/线下）的"应用""存为预设""还原"按钮 */
    #beauty-page-chat-style .beauty-section-card .beauty-action-btn.mini {
        -webkit-flex-grow: 1 !important;
        -webkit-flex-shrink: 1 !important;
        -webkit-flex-basis: 0% !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
        box-sizing: border-box !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        padding: 10px 4px !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        height: auto !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
}

/* ====== 属性需求显示 ====== */
.pp-offer-attr-req {
    padding: 8px 12px;
    background: #faf8f9;
    border-radius: 8px;
    margin: 6px 0 8px;
}
.pp-offer-attr-req-title {
    font-size: 12px;
    color: #8a6b78;
    margin-bottom: 4px;
    font-weight: 600;
}
.pp-attr-req-item {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    margin: 2px 4px 2px 0;
}
.pp-attr-req-item.met {
    background: #e8f5e9;
    color: #4caf50;
}
.pp-attr-req-item.unmet {
    background: #fbe9e7;
    color: #e53935;
}

/* ====== 杀青故事弹窗 ====== */
.pp-story-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
}
.pp-story-box {
    background: #fff;
    border-radius: 20px;
    width: 92%;
    max-width: 400px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15);
    animation: ppFadeIn 0.4s ease;
}
.pp-story-header {
    background: linear-gradient(135deg, #8a6b78, #a07888);
    color: #fff;
    padding: 18px 20px;
    border-radius: 20px 20px 0 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pp-story-icon {
    font-size: 28px;
}
.pp-story-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}
.pp-story-content {
    padding: 20px;
    font-size: 14px;
    line-height: 1.8;
    color: #444;
    max-height: 55vh;
    overflow-y: auto;
    text-indent: 2em;
}
.pp-story-footer {
    padding: 12px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.pp-story-stars {
    font-size: 16px;
}
.pp-story-close-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: #8a6b78;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.pp-story-close-btn:active {
    transform: scale(0.96);
    background: #7a5b68;
}

/* ====== 拍摄随机事件弹窗 ====== */
.pp-shooting-event-overlay {
    z-index: 9997;
}

/* ====== 自定义博客系统 ====== */
.pp-custom-blog-page {
    padding: 16px;
}
.pp-custom-blog-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}
.pp-custom-blog-subtitle {
    font-size: 13px;
    color: #999;
    margin-bottom: 16px;
}
.pp-custom-blog-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}
.pp-custom-blog-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.2s;
    border: 1.5px solid transparent;
}
.pp-custom-blog-option:active {
    transform: scale(0.97);
    border-color: #8a6b78;
    background: #fdf5f8;
}
.pp-custom-blog-option-icon {
    font-size: 32px;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f0f4;
    border-radius: 12px;
}
.pp-custom-blog-option-info {
    flex: 1;
}
.pp-custom-blog-option-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}
.pp-custom-blog-option-desc {
    font-size: 12px;
    color: #999;
}
.pp-custom-blog-history-title {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin-bottom: 10px;
    padding-left: 2px;
}
.pp-custom-blog-history {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pp-custom-blog-history-item {
    padding: 12px 14px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: all 0.2s;
}
.pp-custom-blog-history-item:active {
    transform: scale(0.98);
    background: #fdf5f8;
}
.pp-custom-blog-history-type {
    font-size: 11px;
    color: #8a6b78;
    margin-bottom: 4px;
}
.pp-custom-blog-history-preview {
    font-size: 13px;
    color: #333;
    margin-bottom: 6px;
    line-height: 1.4;
}
.pp-custom-blog-history-stats {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #999;
}

/* ====== 博客编辑器弹窗 ====== */
.pp-blog-editor-overlay {
    z-index: 9998;
}
.pp-blog-editor-modal {
    background: #fff;
    border-radius: 20px;
    width: 95%;
    max-width: 420px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15);
    animation: ppFadeIn 0.3s ease;
    padding-bottom: 20px;
}
.pp-blog-editor-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}
.pp-blog-editor-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: #999;
    font-size: 16px;
}
.pp-blog-editor-close:active {
    background: #f0f0f0;
}
.pp-blog-editor-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}
.pp-blog-editor-field {
    padding: 16px 20px 0;
}
.pp-blog-editor-label {
    font-size: 13px;
    color: #666;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}
.pp-blog-editor-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    font-size: 14px;
    resize: none;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.2s;
    line-height: 1.6;
}
.pp-blog-editor-textarea:focus {
    border-color: #8a6b78;
}
.pp-blog-editor-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.pp-blog-editor-input:focus {
    border-color: #8a6b78;
}
.pp-blog-editor-presets {
    margin-top: 12px;
}
.pp-blog-editor-preset-title {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}
.pp-blog-editor-preset-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pp-blog-editor-preset-item {
    padding: 6px 10px;
    background: #f5f0f3;
    border-radius: 16px;
    font-size: 11px;
    color: #8a6b78;
    cursor: pointer;
    transition: all 0.2s;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pp-blog-editor-preset-item:active {
    background: #e8d8e0;
    transform: scale(0.95);
}
.pp-blog-editor-preset-refresh {
    text-align: center;
    font-size: 12px;
    color: #8a6b78;
    cursor: pointer;
    padding: 8px;
    margin-top: 6px;
}
.pp-blog-editor-preset-refresh:active {
    opacity: 0.6;
}
.pp-blog-editor-image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.pp-blog-editor-image-item {
    padding: 12px 8px;
    background: #f8f5f6;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}
.pp-blog-editor-image-item:active,
.pp-blog-editor-image-item.selected {
    border-color: #8a6b78;
    background: #fdf5f8;
}
.pp-blog-editor-image-icon {
    font-size: 24px;
    margin-bottom: 4px;
}
.pp-blog-editor-image-name {
    font-size: 10px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pp-blog-editor-custom-image {
    margin-top: 12px;
}
.pp-blog-editor-actions {
    display: flex;
    gap: 10px;
    padding: 16px 20px 0;
}
.pp-blog-editor-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.pp-blog-editor-btn:active {
    transform: scale(0.96);
}
.pp-blog-editor-btn-cancel {
    background: #f5f5f5;
    color: #666;
}
.pp-blog-editor-btn-send {
    background: #8a6b78;
    color: #fff;
}
.pp-blog-editor-btn-send:active {
    background: #7a5b68;
}

/* ====== 博客详情弹窗 ====== */
.pp-blog-detail-overlay {
    z-index: 9998;
}
.pp-blog-detail-modal {
    background: #fff;
    border-radius: 20px;
    width: 95%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15);
    animation: ppFadeIn 0.3s ease;
    position: relative;
}
.pp-blog-detail-close {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: #999;
    font-size: 16px;
    background: rgba(0,0,0,0.05);
    z-index: 2;
}
.pp-blog-detail-close:active {
    background: rgba(0,0,0,0.1);
}
.pp-blog-detail-content {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
}
.pp-blog-detail-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.pp-blog-detail-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}
.pp-blog-detail-avatar-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #8a6b78;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
}
.pp-blog-detail-username {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}
.pp-blog-detail-time {
    font-size: 12px;
    color: #999;
}
.pp-blog-detail-text {
    font-size: 14px;
    color: #333;
    line-height: 1.8;
    margin-bottom: 12px;
    word-wrap: break-word;
}
.pp-blog-detail-image {
    margin-bottom: 8px;
}
.pp-blog-detail-image-box {
    background: #f8f5f6;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    color: #8a6b78;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.pp-blog-detail-image-box i {
    font-size: 40px;
    opacity: 0.6;
}
.pp-blog-detail-stats {
    display: flex;
    justify-content: space-around;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.pp-blog-detail-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.pp-blog-detail-stat i {
    font-size: 18px;
}
.pp-blog-detail-stat-num {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}
.pp-blog-detail-stat-label {
    font-size: 11px;
    color: #999;
}
.pp-blog-detail-fans-change {
    text-align: center;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #f0f0f0;
}
.pp-fans-up {
    color: #e74c3c;
    background: #fef5f5;
}
.pp-fans-down {
    color: #2ecc71;
    background: #f0faf5;
}
.pp-blog-detail-comment-section {
    padding: 16px 20px;
}
.pp-blog-detail-comment-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}
.pp-blog-comment-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    overflow-x: auto;
}
.pp-blog-comment-filter {
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 12px;
    background: #f5f5f5;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
}
.pp-blog-comment-filter.active {
    background: #8a6b78;
    color: #fff;
}
.pp-blog-comments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 40vh;
    overflow-y: auto;
}
.pp-blog-comment-item {
    padding: 10px 12px;
    background: #fafafa;
    border-radius: 10px;
    border-left: 3px solid transparent;
}
.pp-comment-good {
    border-left-color: #2ecc71;
}
.pp-comment-bad {
    border-left-color: #e74c3c;
}
.pp-comment-controlled {
    border-left-color: #3498db;
}
.pp-blog-comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.pp-blog-comment-name {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}
.pp-comment-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    color: #fff;
}
.pp-comment-tag-good {
    background: #2ecc71;
}
.pp-comment-tag-bad {
    background: #e74c3c;
}
.pp-comment-tag-controlled {
    background: #3498db;
}
.pp-blog-comment-time {
    font-size: 10px;
    color: #bbb;
    margin-left: auto;
}
.pp-blog-comment-text {
    font-size: 13px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 6px;
}
.pp-blog-comment-actions {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: #bbb;
}
.pp-blog-comment-actions i {
    margin-right: 3px;
}
.pp-blog-detail-done-btn {
    margin: 16px 20px 20px;
    padding: 12px;
    background: #8a6b78;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}
.pp-blog-detail-done-btn:active {
    transform: scale(0.96);
    background: #7a5b68;
}

/* ====== 获奖系统 ====== */
.pp-awards-page {
    padding: 0 0 8px;
}
.pp-awards-summary {
    display: flex;
    justify-content: space-around;
    padding: 16px 12px;
    background: linear-gradient(135deg, #fdf5f8, #f8f0ff);
    border-radius: 14px;
    margin: 12px 16px;
}
.pp-awards-summary-item {
    text-align: center;
}
.pp-awards-summary-num {
    font-size: 22px;
    font-weight: 700;
    color: #8a6b78;
}
.pp-awards-summary-label {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}
.pp-awards-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    padding: 12px 16px 8px;
}
.pp-award-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 0 16px 8px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: all 0.2s;
}
.pp-award-won {
    border-left: 3px solid #f1c40f;
    background: linear-gradient(135deg, #fff9e6, #fff);
}
.pp-award-nominated {
    border-left: 3px solid #3498db;
}
.pp-award-lost {
    border-left: 3px solid #bdc3c7;
    opacity: 0.75;
}
.pp-award-icon {
    font-size: 28px;
    flex-shrink: 0;
}
.pp-award-info {
    flex: 1;
    min-width: 0;
}
.pp-award-ceremony {
    font-size: 12px;
    color: #999;
    margin-bottom: 2px;
}
.pp-award-category {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}
.pp-award-work {
    font-size: 11px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pp-award-badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    background: #f1c40f;
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
}
.pp-award-badge-nominated {
    background: #3498db;
}
.pp-award-badge-lost {
    background: #bdc3c7;
}

/* ====== 热搜系统 ====== */
.pp-hot-search-page {
    padding: 0 0 8px;
}
.pp-hot-search-self-section {
    margin: 12px 16px;
    background: linear-gradient(135deg, #fff5f5, #fff0f6);
    border-radius: 14px;
    padding: 14px;
}
.pp-hot-search-self-title {
    font-size: 14px;
    font-weight: 600;
    color: #e74c3c;
    margin-bottom: 10px;
}
.pp-hot-search-self-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.pp-hot-search-self-item:last-child {
    border-bottom: none;
}
.pp-hot-rank {
    width: 24px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color: #999;
    flex-shrink: 0;
}
.pp-hot-rank-top {
    color: #e74c3c;
}
.pp-hot-rank-self {
    color: #8a6b78;
}
.pp-hot-topic {
    flex: 1;
    font-size: 13px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pp-hot-heat {
    font-size: 11px;
    color: #bbb;
    flex-shrink: 0;
}
.pp-hot-tag {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
    flex-shrink: 0;
}
.pp-hot-tag-boom {
    background: #e74c3c;
    color: #fff;
}
.pp-hot-tag-hot {
    background: #f39c12;
    color: #fff;
}
.pp-hot-tag-new {
    background: #3498db;
    color: #fff;
}
.pp-hot-search-all-title {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    padding: 12px 16px 8px;
}
.pp-hot-search-list {
    padding: 0 16px;
}
.pp-hot-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.2s;
}
.pp-hot-item-self {
    background: #fff5f8;
    border-radius: 8px;
    border-bottom-color: transparent;
    margin-bottom: 2px;
}

/* 功能页tab 5个标签的适配 */
.pp-func-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pp-func-tabs::-webkit-scrollbar {
    display: none;
}
.pp-func-tab {
    flex-shrink: 0;
    min-width: auto;
    padding: 8px 12px;
    font-size: 12px;
}
.pp-func-tab i {
    font-size: 14px;
}

/* ====== 训练系统样式 ====== */
.pp-training-page {
    padding: 0 2px;
}
.pp-training-card {
    background: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1px solid rgba(0,0,0,0.05);
}
.pp-train-btn {
    margin-top: 10px;
    padding: 8px 0;
    text-align: center;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    background: linear-gradient(135deg, #f0e6ec, #e6e0f0);
    color: #8a6b78;
    transition: all 0.15s;
}
.pp-train-btn:active {
    transform: scale(0.97);
    opacity: 0.85;
}
.pp-train-btn.disabled {
    background: #f5f5f5;
    color: #bbb;
    cursor: not-allowed;
    pointer-events: none;
}

/* ====== 粉丝头像可点击 ====== */
.pp-fan-avatar-clickable {
    cursor: pointer;
    transition: transform 0.15s;
}
.pp-fan-avatar-clickable:active {
    transform: scale(0.9);
}

/* ====== 粉丝个人主页弹窗 ====== */
.pp-fan-profile-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s;
}
.pp-fan-profile-overlay.show { opacity: 1; }
.pp-fan-profile-card {
    width: 85vw; max-width: 340px;
    background: #fff; border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    transform: translateY(20px); transition: transform 0.25s;
}
.pp-fan-profile-overlay.show .pp-fan-profile-card { transform: translateY(0); }
.pp-fan-profile-header {
    padding: 20px 16px 16px;
    text-align: center;
    color: #fff;
    position: relative;
}
.pp-fan-profile-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700;
    margin: 0 auto 8px;
    border: 3px solid rgba(255,255,255,0.4);
    color: #fff;
}
.pp-fan-profile-name {
    font-size: 18px; font-weight: 700;
}
.pp-fan-profile-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.25);
    font-size: 11px; font-weight: 600;
}
.pp-fan-profile-body {
    padding: 12px 16px;
}
.pp-fan-profile-row {
    display: flex; justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px; color: #555;
}
.pp-fan-profile-row span:last-child { font-weight: 600; color: #333; }
.pp-fan-profile-section-title {
    font-size: 13px; font-weight: 600; color: #333;
    margin: 12px 0 6px; padding-top: 4px;
}
.pp-fan-profile-stats {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.pp-fan-stat {
    flex: 1; min-width: 60px;
    text-align: center;
    background: #f8f8f8;
    border-radius: 8px;
    padding: 8px 4px;
}
.pp-fan-stat-num { font-size: 16px; font-weight: 700; color: #e74c3c; }
.pp-fan-stat-label { font-size: 10px; color: #999; margin-top: 2px; }
.pp-fan-profile-actions {
    display: flex; gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
}
.pp-fan-action-btn {
    flex: 1;
    padding: 8px 0;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fafafa;
    font-size: 12px; color: #555;
    cursor: pointer;
    text-align: center;
}
.pp-fan-action-btn:active { background: #f0f0f0; }
.pp-fan-action-btn i { margin-right: 3px; }
.pp-fan-action-danger { color: #e74c3c; border-color: #fdd; }
.pp-fan-action-danger:active { background: #fee; }
.pp-fan-profile-close {
    display: block; width: 100%;
    padding: 12px 0;
    border: none; border-top: 1px solid #f0f0f0;
    background: transparent;
    font-size: 14px; color: #999;
    cursor: pointer;
}
.pp-fan-profile-close:active { background: #f8f8f8; }

/* ====== 黑粉消息样式 ====== */
.pp-chat-msg-blackfan { opacity: 0.95; }
.pp-avatar-blackfan {
    background: #444 !important;
    color: #ccc !important;
}
.pp-bubble-blackfan {
    background: #fff5f5 !important;
    border-color: #fdd !important;
    color: #c0392b !important;
}
.pp-blackfan-tag {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    color: #e74c3c;
}

/* ====== 热搜详情弹窗 ====== */
.pp-hot-detail-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; transition: opacity 0.2s;
}
.pp-hot-detail-overlay.show { opacity: 1; }
.pp-hot-detail-panel {
    width: 100%; max-width: 420px;
    max-height: 80vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
    transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.pp-hot-detail-overlay.show .pp-hot-detail-panel { transform: translateY(0); }
.pp-hot-detail-header {
    padding: 16px; border-bottom: 1px solid #f0f0f0;
    position: sticky; top: 0; background: #fff; z-index: 1;
}
.pp-hot-detail-topic {
    font-size: 17px; font-weight: 700; color: #333;
}
.pp-hot-detail-meta {
    display: flex; gap: 12px; margin-top: 6px;
    font-size: 12px; color: #999;
}
.pp-hot-detail-meta .pp-hot-tag { margin-left: 4px; }
.pp-hot-detail-body { padding: 12px 16px; }
.pp-hot-detail-section {
    margin-bottom: 16px;
}
.pp-hot-detail-section-title {
    font-size: 14px; font-weight: 600; color: #333;
    margin-bottom: 8px;
}
.pp-hot-detail-news {
    background: #f8f8f8; border-radius: 8px;
    padding: 12px; font-size: 13px; color: #555;
    line-height: 1.6;
}
.pp-hot-detail-comment {
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 13px; color: #444;
}
.pp-hot-detail-comment-name {
    font-size: 11px; color: #999; margin-bottom: 3px;
}
.pp-hot-detail-actions {
    display: flex; gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;
}
.pp-hot-detail-action-btn {
    flex: 1; min-width: 100px;
    padding: 10px 8px;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fafafa;
    font-size: 13px; color: #555;
    cursor: pointer; text-align: center;
}
.pp-hot-detail-action-btn:active { background: #f0f0f0; }
.pp-hot-detail-action-btn i { margin-right: 4px; }
.pp-hot-detail-close {
    display: block; width: 100%;
    padding: 14px 0;
    border: none; border-top: 1px solid #f0f0f0;
    background: transparent;
    font-size: 14px; color: #999;
    cursor: pointer;
}

/* ============================================================ */
/* ===== DESKTOP EDIT MODE v3 (长按区块 → 拖拽排序 + 删除) ===== */
/* ===== 与"设置→美化→布局排序"共用同一份数据 ============= */
/* ============================================================ */

/* [FIX-编辑模式重叠] 布局偏移同时写内联 transform（正常模式）和 --de-offset-y 变量，
   编辑模式下抖动/拖拽动画读取该变量叠加偏移，避免动画 transform 覆盖偏移导致区块重叠。
   不在此处对所有 .desktop-block 强制 transform，避免给无偏移区块凭空创建合成层/containing block。 */

/* 区块抖动动画 */
@keyframes de-wobble {
    0%   { transform: translateY(var(--de-offset-y, 0px)) rotate(0deg); }
    25%  { transform: translateY(var(--de-offset-y, 0px)) rotate(-0.8deg); }
    50%  { transform: translateY(var(--de-offset-y, 0px)) rotate(0deg); }
    75%  { transform: translateY(var(--de-offset-y, 0px)) rotate(0.8deg); }
    100% { transform: translateY(var(--de-offset-y, 0px)) rotate(0deg); }
}

.desktop-edit-mode .de-wobble {
    animation: de-wobble 0.32s ease-in-out infinite;
    position: relative;
    z-index: 1;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    transition: box-shadow 0.2s ease, opacity 0.2s ease;
}
.desktop-edit-mode .de-wobble:nth-child(even) {
    animation-delay: 0.08s;
    animation-duration: 0.36s;
}

/* 正在拖拽的区块 */
.desktop-edit-mode .de-wobble.de-dragging {
    animation: none !important;
    opacity: 0.9;
    z-index: 999 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(var(--de-offset-y, 0px)) scale(1.02);
}

/* 删除角标（左上角 −） */
.de-del-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 24px;
    height: 24px;
    background: rgba(220, 50, 50, 0.96);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10001;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 11px;
    transition: transform 0.15s ease, background 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    animation: none;
}
.de-del-badge:active {
    transform: scale(0.85);
    background: rgba(200, 30, 30, 1);
}

/* 编辑模式下让各级容器不裁剪角标 */
.desktop-edit-mode #desktop-page-1,
.desktop-edit-mode #desktop-page-2,
.desktop-edit-mode #desktop-page-3,
.desktop-edit-mode #desktop,
.desktop-edit-mode .desktop-page,
.desktop-edit-mode #desktop-swipe-container,
.desktop-edit-mode #desktop-swipe-wrapper,
.desktop-edit-mode .scroll-y,
.desktop-edit-mode #desktop-page2-scroll,
.desktop-edit-mode #desktop-page3-scroll,
.desktop-edit-mode .desktop-block {
    overflow: visible !important;
}

/* 编辑模式下禁止子元素点击/输入，避免误触发应用 */
.desktop-edit-mode .desktop-block [contenteditable] {
    pointer-events: none !important;
}
.desktop-edit-mode .desktop-block .app-icon:active {
    transform: none !important;
}
/* 区块本身允许接收指针（拖拽），但内部交互元素不响应点击 */
.desktop-edit-mode .desktop-block .app-item,
.desktop-edit-mode .desktop-block [onclick] {
    pointer-events: none;
}
.desktop-edit-mode .desktop-block {
    pointer-events: auto;
}

/* [FIX-编辑模式时间换行] 进入编辑模式时锁定时间单行，防止掉到第二行与下方区块重叠 */
.desktop-edit-mode .desktop-time {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.desktop-edit-mode #desktop .desktop-block[data-block="p1-time"],
.desktop-edit-mode #desktop-page2-scroll .desktop-block,
.desktop-edit-mode #desktop-page3-scroll .desktop-block {
    flex-shrink: 0;
}

/* ============================================================
   底部编辑工具栏（完成 + 已隐藏区块恢复）
   ============================================================ */
#de-toolbar {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 100000;
    display: none;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: max-content;
    max-width: 92%;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.de-hidden-area {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    max-width: 320px;
}
.de-hidden-area.de-hidden-empty {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}
.de-hidden-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin-right: 2px;
}

.de-restore-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.18s ease;
}
.de-restore-chip i {
    font-size: 10px;
    color: rgba(80, 200, 120, 1);
}
.de-restore-chip:active {
    transform: scale(0.93);
    background: rgba(255, 255, 255, 0.24);
}

.de-done-btn {
    background: rgba(0, 120, 255, 0.95);
    color: #fff;
    border: none;
    border-radius: 18px;
    padding: 9px 36px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 120, 255, 0.4);
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.de-done-btn:active {
    transform: scale(0.94);
    background: rgba(0, 100, 230, 1);
}

/* 设置页布局排序：隐藏项的样式 + 眼睛按钮 */
.lo-order-item.lo-item-hidden {
    opacity: 0.5;
}
.lo-order-item.lo-item-hidden .lo-item-title::after {
    content: ' (已隐藏)';
    font-size: 11px;
    color: #e06363;
}
.lo-eye-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #888;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}
.lo-eye-btn:active {
    transform: scale(0.9);
}
.lo-order-item.lo-item-hidden .lo-eye-btn {
    color: #e06363;
}

/* ===== 聊天记录搜索面板 ===== */
#chat-search-panel.show {
    display: flex !important;
}

.chat-search-input-wrap {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 6px;
    padding: 6px 10px;
    gap: 6px;
}
.chat-search-input-wrap input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 14px;
    background: transparent;
    color: #333;
}
.chat-search-input-wrap input::placeholder {
    color: #bbb;
}
.chat-search-clear {
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
}
.chat-search-clear:hover {
    color: #999;
}

.chat-search-date-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background: #f7f7f7;
    border-bottom: 1px solid #e5e5e5;
    flex-wrap: nowrap;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}
.chat-search-date-bar input[type="date"] {
    flex: 1;
    min-width: 0;
    max-width: none;
    color: #333;
    box-sizing: border-box;
}
.chat-search-date-clear {
    font-size: 12px;
    color: #07c160;
    cursor: pointer;
    margin-left: 4px;
    white-space: nowrap;
}

.chat-search-results {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    /* [FIX-搜索面板下半透出v1] 结果区是flex:1的填充区，之前无背景色，内容不足时下半部分透明，
       透出下层的联系人/会话列表。给它铺不透明底色，确保整个下半屏被面板遮住。 */
    background: #ededed;
}

.chat-search-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    font-size: 14px;
}

.chat-search-result-item {
    display: flex;
    align-items: flex-start;
    padding: 12px 15px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.15s;
    gap: 10px;
}
.chat-search-result-item:active {
    background: #f0f0f0;
}

.chat-search-result-avatar {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.chat-search-result-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chat-search-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.chat-search-result-time {
    font-size: 11px;
    color: #bbb;
    flex-shrink: 0;
}

.chat-search-result-text {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.chat-search-result-text mark {
    background: #fff3c4;
    color: #333;
    border-radius: 2px;
    padding: 0 1px;
}

.chat-search-result-count {
    text-align: center;
    padding: 10px;
    font-size: 13px;
    color: #999;
    background: #f7f7f7;
}

/* 搜索定位时的高亮效果 */
.msg-row.search-highlight {
    animation: searchHighlightPulse 2s ease-out;
}
@keyframes searchHighlightPulse {
    0% { background: rgba(7, 193, 96, 0.3); }
    50% { background: rgba(7, 193, 96, 0.15); }
    100% { background: transparent; }
}

/* 返回最新消息按钮（搜索定位后显示） */
.chat-search-back-latest-btn {
    position: absolute;
    top: 55px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    padding: 6px 16px;
    border-radius: 16px;
    cursor: pointer;
    z-index: 50;
    display: none;
    white-space: nowrap;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: opacity 0.2s;
}
.chat-search-back-latest-btn:active {
    opacity: 0.7;
}

/* ===== [FIX-移动端] 聊天搜索面板全屏覆盖修复 ===== */
/* [FIX-搜索面板偏移] 改用position:absolute，因为父元素.layer.show有will-change:transform，
   会创建新的containing block，导致position:fixed相对于layer而非viewport定位。
   使用absolute定位相对于layer-chat，覆盖整个layer即可。 */
#chat-search-panel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10100 !important;
    flex-direction: column;
    overflow: hidden;
    transform: none !important;
    /* [FIX-搜索面板下半透出v1] 强制面板整体不透明底色，双保险防止APK下半屏透出联系人列表 */
    background: #ededed !important;
}
#chat-search-panel .nav-bar {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
#chat-search-panel .chat-search-date-bar {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
#chat-search-panel .chat-search-results {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #ededed;
}

/* ===== [FIX-弹窗不显示] 人设/世界书弹窗层级与可见性保障 ===== */
/* 确保弹窗在所有 layer（z:5000）和其他 overlay 之上 */
#modal-persona,
#modal-wb,
#modal-category {
    z-index: 10001 !important;
}
#modal-persona .modal-box,
#modal-wb .modal-box,
#modal-category .modal-box {
    z-index: 10002 !important;
    position: relative;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* ===== [FIX-移动端] 人设弹窗键盘适配 ===== */
#modal-persona .modal-box {
    max-height: 85vh !important;
    max-height: 85dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}
/* 移动端键盘弹出时，弹窗自动缩小适配 */
#modal-persona .modal-box {
    max-height: calc(var(--app-height, 100vh) - 40px) !important;
}

/* ===== CONTACT PROFILE PAGE - 极简黑白灰卡片风格 ===== */
#layer-contact-profile { z-index: 9990; }
/* [FIX-个人主页滚动] 让内容容器可滚动，解决朋友圈列表超出视口后划不动的问题 */
#contact-profile-content {
    height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
.cp-container {
    min-height: 100%; background: #f2f2f7; padding-bottom: 40px;
}
.cp-header {
    position: relative; width: 100%; height: 220px;
    background: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%);
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    overflow: visible;
}
.cp-header-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 100%);
    z-index: 1;
}
.cp-nav {
    position: absolute; top: 0; left: 0; right: 0;
    padding: calc(12px + var(--sat, 0px)) 16px 12px;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 10;
}
.cp-nav-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.15); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px; cursor: pointer;
    transition: background 0.2s;
}
.cp-nav-btn:active { background: rgba(255,255,255,0.3); }
.cp-avatar-area {
    position: relative; z-index: 5; margin-bottom: -45px;
}
.cp-avatar {
    width: 90px; height: 90px; border-radius: 50%;
    border: 3px solid #fff; object-fit: cover;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.cp-info {
    padding: 55px 24px 20px; text-align: center;
    background: #fff; border-bottom: none;
    border-radius: 0 0 16px 16px;
    margin: 0 0 8px 0;
}
.cp-name {
    font-size: 22px; font-weight: 700; color: #1a1a1a;
    letter-spacing: 0.5px; margin-bottom: 4px;
}
.cp-realname {
    font-size: 12px; color: #999; margin-bottom: 6px;
}
.cp-status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 14px; border-radius: 20px;
    background: #f0f0f0; color: #555; font-size: 12px;
    margin-bottom: 10px;
}
.cp-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #999; display: inline-block;
}
.cp-signature {
    font-size: 13px; color: #888; line-height: 1.6;
    margin-bottom: 8px; font-style: italic;
}
.cp-ip {
    font-size: 11px; color: #bbb;
}
.cp-remark-for-me {
    font-size: 12px; color: #777; margin-top: 6px;
}
.cp-actions {
    display: flex; flex-direction: column; gap: 10px; padding: 16px 16px;
    background: #fff; margin: 0 0 8px 0;
    border-radius: 16px;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.cp-actions-primary {
    display: flex; gap: 10px;
}
.cp-actions-primary .cp-action-btn {
    flex: 1; padding: 12px 0; font-size: 14px; font-weight: 600;
}
.cp-actions-secondary {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.cp-actions-secondary .cp-action-btn {
    flex-direction: column; padding: 10px 4px; font-size: 11px; gap: 4px;
}
.cp-actions-secondary .cp-action-btn i { font-size: 16px; }
.cp-action-btn {
    flex: 1; padding: 10px 0; border: none; border-radius: 12px;
    font-size: 13px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; gap: 6px;
    background: #1a1a1a; color: #fff; transition: all 0.2s;
}
.cp-action-btn:active { opacity: 0.7; transform: scale(0.96); }
.cp-action-edit { background: #444; }
.cp-action-bg { background: #555; }
.cp-action-accent1 { background: #333; }
.cp-action-accent2 { background: #666; }
.cp-section-title {
    padding: 16px 20px 10px; font-size: 14px; font-weight: 600;
    color: #333; display: flex; align-items: center; gap: 8px;
}
.cp-moments { padding: 0 16px; }
.cp-moment-item {
    background: #fff; border-radius: 16px; padding: 14px 16px;
    margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.cp-moment-text {
    font-size: 14px; color: #333; line-height: 1.6;
    word-break: break-word;
}
.cp-moment-time {
    font-size: 11px; color: #bbb; margin-top: 8px;
}
/* 分享名片列表 */
.cp-share-list {
    max-height: 300px; overflow-y: auto; margin-top: 10px;
}
.cp-share-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 8px; cursor: pointer;
    transition: background 0.15s;
}
.cp-share-item:active { background: #f5f5f5; }
.cp-share-item span { font-size: 14px; color: #333; }
/* 变更通知弹窗 */
.cp-change-popup {
    position: fixed; top: 60px; left: 50%; transform: translateX(-50%) translateY(-20px);
    z-index: 10010; opacity: 0; transition: all 0.35s ease;
    pointer-events: none;
}
.cp-change-popup-show {
    opacity: 1; transform: translateX(-50%) translateY(0);
}
.cp-change-popup-inner {
    background: #1a1a1a; color: #fff; padding: 12px 20px;
    border-radius: 10px; font-size: 13px; white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    display: flex; align-items: center; gap: 8px;
}
.cp-change-popup-inner i { color: #ffd700; }

/* Contact Card Bubble */
.bubble-contact-card {
    background: #fff;
    border-radius: 12px;
    padding: 0;
    border: 1px solid #e5e5e5;
    width: 240px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.bubble-contact-card .contact-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 12px;
}
.bubble-contact-card .contact-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f0f0f0;
}
.bubble-contact-card .contact-card-info {
    flex: 1;
    min-width: 0;
}
.bubble-contact-card .contact-card-name {
    font-weight: 600;
    font-size: 15px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bubble-contact-card .contact-card-sig {
    font-size: 12px;
    color: #999;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}
.bubble-contact-card .contact-card-bottom {
    border-top: 1px solid #f0f0f0;
    padding: 8px 14px;
    font-size: 12px;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #fafafa;
}

/* Moments Batch Delete Icon */
.moments-batch-del-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px;
}
.moments-batch-del-icon svg {
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

/* ============================================================
   心声弹窗 — 方形直角卡片（参考黑白卡片风格）
   ============================================================ */
#modal-thought .modal-box {
    width: 88vw !important;
    max-width: 360px !important;
    /* [FIX-心声弹窗溢出] 封顶总高度，避免长心声把底部历史/关闭按钮顶出屏幕 */
    max-height: 88vh !important;
    max-height: 88dvh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1.5px solid #0a0a0a !important;
    box-shadow: 6px 6px 0 #0a0a0a !important;
}
#modal-thought .modal-box::before,
#modal-thought .modal-box::after { display: none !important; }
#modal-thought .modal-box > h3 { display: none !important; }
#modal-thought .modal-box > div[onclick*="openHeartHistory"],
#modal-thought .modal-box > div[onclick*="openOfflineHeartHistory"] { display: none !important; }

.heart-popup-card {
    display: flex; flex-direction: column;
    background: #ffffff; color: #0a0a0a;
    font-family: 'Inter', -apple-system, 'SF Pro Display', 'PingFang SC', sans-serif;
    /* [FIX-心声弹窗溢出] 允许在 flex 父容器中收缩，让正文区滚动 */
    flex: 1 1 auto; min-height: 0;
}
/* [FIX-心声弹窗溢出] 头/状态栏/成员Tab/底部按钮固定，不被压缩也不滚动 */
.heart-popup-head,
.heart-popup-meta,
.heart-popup-members,
.heart-popup-foot { flex-shrink: 0; }
.heart-popup-head {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 18px 18px 14px; border-bottom: 1.5px solid #0a0a0a; position: relative;
}
.heart-popup-avatar {
    width: 56px; height: 56px;
    min-width: 56px; min-height: 56px;
    max-width: 56px; max-height: 56px;
    display: block;
    border-radius: 0; object-fit: cover;
    border: 1.5px solid #0a0a0a; flex-shrink: 0; background: #e8e8ea;
}
.heart-popup-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.heart-popup-name {
    font-size: 17px; font-weight: 700; color: #0a0a0a; letter-spacing: -0.3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.heart-popup-sub { font-size: 12px; color: #65656b; font-weight: 500; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.heart-popup-sub .sep { color: #c5c5ca; }
.heart-popup-badge {
    display: inline-block; padding: 2px 8px; background: #0a0a0a; color: #fff;
    font-size: 10px; font-weight: 600; letter-spacing: 0.3px; border-radius: 0; text-transform: uppercase;
}
/* [FIX-刷新按钮位置] 右上角动作区域：包含刷新+关闭按钮 */
.heart-popup-head-actions {
    position: absolute; top: 10px; right: 10px;
    display: flex; align-items: center; gap: 6px;
}
.heart-popup-refresh {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: #4a90d9; font-size: 13px; border-radius: 50%;
    transition: background 0.15s, transform 0.15s;
}
.heart-popup-refresh:hover { background: #f0f0f2; }
.heart-popup-refresh:active { transform: scale(0.85) rotate(-90deg); }
.heart-popup-close {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: #0a0a0a; font-size: 14px;
}
.heart-popup-close:active { transform: scale(0.85); }

.heart-popup-meta {
    display: flex; flex-direction: column; padding: 12px 18px;
    border-bottom: 1.5px solid #0a0a0a; gap: 8px; background: #f6f6f7;
}
.heart-popup-meta-row { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: #0a0a0a; flex-wrap: wrap; }
.heart-popup-meta-row i { width: 16px; font-size: 12px; color: #65656b; text-align: center; flex-shrink: 0; }
.heart-popup-meta-row .label { color: #65656b; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }
.heart-popup-meta-row .value { font-weight: 500; flex-basis: 100%; min-width: 0; word-break: break-word; padding-left: 22px; writing-mode: horizontal-tb !important; }

.heart-popup-body {
    padding: 8px 18px; background: #ffffff; font-size: 14px; line-height: 1.75;
    color: #0a0a0a;
    border-bottom: 1.5px solid #0a0a0a; font-weight: 500;
    /* [FIX-心声内部滚动-2026-06-16] 正文用 flex:0 0 auto，避免 flex:1 1 auto 撑开
       （部分安卓 WebView 下 max-height 约束失效，会把底部 HISTORY/CLOSE 按钮顶出屏幕）。
       [FIX-心声高度自适应-2026-06-19] 不再写死 height:38vh：内容短时框会随内容收缩，
       不会在下方留大片空白；内容多时由 max-height:38vh 封顶并在框内滚动，按钮始终可见。 */
    flex: 0 0 auto;
    height: auto;
    max-height: 38vh;
    min-height: 44px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.heart-popup-body .thought-quote::before { content: '\201C'; font-size: 32px; font-family: Georgia, serif; color: #0a0a0a; line-height: 0; vertical-align: -12px; margin-right: 4px; font-weight: 700; }
.heart-popup-body .thought-quote::after { content: '\201D'; font-size: 32px; font-family: Georgia, serif; color: #0a0a0a; line-height: 0; vertical-align: -18px; margin-left: 4px; font-weight: 700; }

.heart-popup-foot { display: flex; align-items: stretch; }
.heart-popup-btn {
    flex: 1; padding: 14px; background: #ffffff; color: #0a0a0a; border: none;
    border-right: 1.5px solid #0a0a0a; font-family: inherit; font-size: 13px;
    font-weight: 700; letter-spacing: 0.3px; cursor: pointer; text-transform: uppercase;
}
.heart-popup-btn:last-child { border-right: none; }
.heart-popup-btn.primary { background: #0a0a0a; color: #ffffff; }
.heart-popup-btn:active { background: #0a0a0a; color: #ffffff; }
.heart-popup-btn.primary:active { opacity: 0.85; }

.heart-popup-members {
    display: flex; gap: 0; overflow-x: auto; border-bottom: 1.5px solid #0a0a0a;
    background: #f6f6f7; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.heart-popup-members::-webkit-scrollbar { display: none; }
.heart-popup-member-tab {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 12px; min-width: 64px; cursor: pointer;
    border-right: 1px solid rgba(0,0,0,0.1); position: relative;
}
.heart-popup-member-tab:last-child { border-right: none; }
.heart-popup-member-tab.active { background: #0a0a0a; color: #ffffff; }
.heart-popup-member-tab img {
    width: 36px; height: 36px; border-radius: 0; object-fit: cover;
    border: 1.5px solid #0a0a0a; background: #e8e8ea;
}
.heart-popup-member-tab.active img { border-color: #ffffff; }
.heart-popup-member-tab .mname {
    font-size: 10px; font-weight: 600; max-width: 60px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.heart-popup-body .heart-translate-toggle {
    margin-top: 14px; padding: 8px 12px; background: #f6f6f7; color: #65656b;
    font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex;
    align-items: center; gap: 6px; border: 1px solid #0a0a0a;
}
.heart-popup-body .heart-translate-toggle:active { background: #0a0a0a; color: #ffffff; }
.heart-popup-body .heart-translation-area {
    margin-top: 10px; padding: 10px 12px; background: #f6f6f7;
    border-left: 3px solid #0a0a0a; font-size: 13px; color: #65656b; line-height: 1.6;
}

/* ===== 心声历史卡片 — 与心声弹窗统一风格 ===== */
.heart-history-card {
    background: #ffffff; border: 1.5px solid #0a0a0a; border-radius: 0;
    margin-bottom: 12px; cursor: pointer; overflow: hidden; transition: transform .15s;
}
.heart-history-card:active { transform: scale(0.98); }
.heart-history-card .hh-head { padding: 14px 16px 10px; }
.heart-history-card .hh-avatar { width: 40px; height: 40px; }
.heart-history-card .hh-name { font-size: 14px; }
.heart-history-card .hh-actions { display: flex; gap: 14px; align-items: center; }
.heart-history-card .hh-actions i { font-size: 13px; color: #65656b; cursor: pointer; padding: 4px; transition: color .2s; }
.heart-history-card .hh-actions .fa-trash { color: #c0392b; }
.heart-history-card .hh-actions i:active { opacity: 0.6; }
.heart-history-card .hh-meta { padding: 8px 16px; }
.heart-history-card .hh-body { padding: 12px 16px; }

/* 心声历史弹窗容器统一 */
#modal-heart-history .modal-box { max-width: 480px; }
#heart-history-list { background: transparent !important; border-radius: 0 !important; padding: 0 !important; }
#modal-heart-history .hh-close-btn {
    padding: 10px 28px; border: 1.5px solid #0a0a0a; background: #0a0a0a; color: #fff;
    border-radius: 0; font-weight: 600; font-size: 13px; letter-spacing: 1px; cursor: pointer;
    transition: opacity .15s;
}
#modal-heart-history .hh-close-btn:active { opacity: 0.8; }
#modal-heart-history .hh-add-btn { color: #0a0a0a; font-size: 22px; cursor: pointer; padding: 8px; transition: opacity .15s; }
#modal-heart-history .hh-add-btn:active { opacity: 0.6; }

/* ============================================================
   [FIX-心声阴影-2026-04-19] 只消除"上半部分阴影层"
   ------------------------------------------------------------
   目的：用户反馈线下模式心声弹窗打开时，整个上半部分有一层灰影。
   根因：cute/korean 等主题给 #modal-thought .modal-box 叠加了
        带 blur 半径的柔光阴影（如 0 8px 32px rgba(...)），
        柔光是四周发散的，因此"上方"也会有灰色环。
   策略：仅收敛 box-shadow 为原本设计的右下硬阴影（6px 6px 0），
        不改任何背景色、边框、布局、backdrop-filter、folding corner，
        因此除"上半灰影"外，视觉零变化。
   覆盖 default / cute / korean / mono 四个主题。
   ============================================================ */
#modal-thought .modal-box,
body.theme-cute   #modal-thought .modal-box,
body.theme-korean #modal-thought .modal-box,
body.theme-mono   #modal-thought .modal-box {
    box-shadow: 6px 6px 0 #0a0a0a !important;
}
/* 心声历史/编辑弹窗同样处理（共用心声视觉） */
#modal-heart-history .modal-box,
#modal-heart-edit    .modal-box,
body.theme-cute   #modal-heart-history .modal-box,
body.theme-cute   #modal-heart-edit    .modal-box,
body.theme-korean #modal-heart-history .modal-box,
body.theme-korean #modal-heart-edit    .modal-box,
body.theme-mono   #modal-heart-history .modal-box,
body.theme-mono   #modal-heart-edit    .modal-box {
    box-shadow: 6px 6px 0 #0a0a0a !important;
}

/* [FIX-心声字体-2026-06-15] 心声弹窗内容区继承全局字体，不受 .modal-mask .modal-box 的硬编码 Courier New 影响 */
#modal-thought .heart-popup-card,
#modal-thought .heart-popup-body,
#modal-thought .heart-popup-name,
#modal-thought .heart-popup-meta,
#modal-thought .heart-popup-btn,
#modal-thought .thought-quote,
#modal-heart-history .heart-popup-card,
#modal-heart-history .heart-popup-body,
#modal-heart-history .hh-body,
#modal-heart-history .thought-quote,
#modal-heart-edit .modal-box {
    font-family: inherit !important;
}

/* [FIX-心声竖版-2026-06-16] 强制心声弹窗所有区域横排显示，防止writing-mode被意外继承导致竖版文字 */
#modal-thought,
#modal-thought .modal-box,
#modal-thought .heart-popup-card,
#modal-thought .heart-popup-head,
#modal-thought .heart-popup-body,
#modal-thought .heart-popup-name,
#modal-thought .heart-popup-meta,
#modal-thought .heart-popup-meta-row,
#modal-thought .heart-popup-meta-row .value,
#modal-thought .heart-popup-btn,
#modal-thought .heart-popup-foot,
#modal-thought .heart-popup-members,
#modal-thought .thought-quote,
#modal-thought .heart-popup-sub,
#modal-heart-history,
#modal-heart-history .modal-box,
#modal-heart-history .heart-popup-card,
#modal-heart-history .heart-popup-body,
#modal-heart-history .hh-body,
#modal-heart-history .thought-quote,
#modal-heart-history .heart-popup-meta-row,
#modal-heart-history .heart-popup-meta-row .value {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    direction: ltr !important;
}

/* ====== 情侣空间特殊气泡 (白色+淡粉·典雅高级感) ====== */
.couple-special-bubble {
    max-width: 220px;
    min-width: 180px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(255,182,193,0.35);
    box-shadow: 0 2px 20px rgba(255,182,193,0.12), 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
    position: relative;
    animation: csb-fadeIn 0.4s ease-out;
}
.csb-accent {
    height: 2.5px;
    background: linear-gradient(90deg, transparent, #f8bbd0 20%, #fce4ec 50%, #f8bbd0 80%, transparent);
}
.csb-icon {
    text-align: center;
    padding: 18px 0 4px;
}
.csb-icon svg {
    width: 28px; height: 28px;
}
.csb-title {
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #2c2c2c;
    letter-spacing: 1px;
    padding: 4px 16px 0;
}
.csb-subtitle {
    text-align: center;
    font-size: 11.5px;
    color: #c0c0c0;
    padding: 4px 14px 0;
    letter-spacing: 0.3px;
}
.csb-body {
    padding: 12px 16px 6px;
    font-size: 13px;
    color: #555;
    line-height: 1.75;
    text-align: center;
}
.csb-emotion-tag {
    display: inline-block;
    padding: 2px 14px;
    border-radius: 10px;
    background: #fef0f3;
    color: #c48b9f;
    font-size: 11px;
    letter-spacing: 0.5px;
}
.csb-inner {
    padding: 0 16px 12px;
    text-align: center;
    font-size: 11px;
    color: #ccc;
    font-style: italic;
    line-height: 1.5;
}
.csb-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 6px 16px 14px;
    padding: 9px 0;
    border-radius: 22px;
    border: 1px solid #f0c4d0;
    background: #fef7f9;
    color: #c48b9f;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.3px;
}
.csb-generate-btn:active { background: #fce4ec; }
.csb-generate-btn.loading {
    pointer-events: none;
    opacity: 0.6;
}
.csb-generate-btn svg {
    width: 14px; height: 14px;
}
.csb-actions {
    display: flex;
    border-top: 1px solid rgba(255,182,193,0.2);
}
.csb-action-btn {
    flex: 1;
    padding: 13px;
    text-align: center;
    font-size: 13px;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: background 0.15s;
}
.csb-action-btn:first-child {
    border-right: 1px solid rgba(255,182,193,0.2);
    color: #aaa;
}
.csb-action-btn:last-child {
    color: #d4849a;
    font-weight: 500;
}
.csb-action-btn:active { background: #fef0f3; }

/* 状态变体 */
.couple-special-bubble.accepted .csb-icon svg { fill: #fce4ec; stroke: #e8a0b4; }
.couple-special-bubble.accepted {
    border-color: rgba(255,182,193,0.5);
    background: linear-gradient(180deg, #fff 0%, #fef7f9 100%);
}
.couple-special-bubble.rejected { border-color: rgba(200,200,200,0.35); }
.couple-special-bubble.rejected .csb-icon svg { stroke: #ccc; }
.couple-special-bubble.force-unbind { border-color: rgba(180,170,175,0.35); }

@keyframes csb-fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== [外语双语混排] 线下模式内联翻译标签样式 ===== */
/* 对话翻译：（中文翻译） */
.ol-dl-trans {
    display: inline;
    color: #888;
    font-size: 0.86em;
    margin: 0 2px;
    opacity: 0.85;
}
.ol-dl-trans.hide {
    display: none;
}
.ol-dl-trans.show {
    display: inline;
}
/* 对话翻译切换按钮 💬 */
.ol-dl-btn {
    display: inline-block;
    cursor: pointer;
    font-size: 0.78em;
    margin: 0 2px;
    opacity: 0.55;
    transition: opacity 0.2s;
    -webkit-user-select: none;
    user-select: none;
    vertical-align: middle;
}
.ol-dl-btn:hover {
    opacity: 1;
}
.ol-dl-btn:active {
    opacity: 0.7;
}
/* 心声翻译：淡灰斜体，与外语心声区分 */
.ol-ht-trans {
    display: inline-block;
    color: #999;
    font-size: 0.88em;
    margin-top: 4px;
    opacity: 0.88;
    font-style: italic;
}

/* ===== [FIX-线下体验] 线下模式"正在输入中"三点动画 ===== */
/* 通用三点弹跳动画 keyframes */
@keyframes offlineTypingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}
/* 三点容器（nav 徽标 + 消息内联共用） */
.offline-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    vertical-align: middle;
}
.offline-typing-dots > span {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #999;
    animation: offlineTypingBounce 1.2s infinite;
}
.offline-typing-dots > span:nth-child(2) { animation-delay: 0.15s; }
.offline-typing-dots > span:nth-child(3) { animation-delay: 0.3s; }

/* 独立页面消息卡片内联"正在输入"样式 */
.offline-typing-inline {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: #888;
    padding: 12px 0;
}
/* pending 状态的消息卡片：轻微脉冲提示 */
.offline-msg-pending {
    animation: offlinePendingPulse 2s ease-in-out infinite;
}
@keyframes offlinePendingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* 顶部 nav 区域的 typing 徽标 */
#offline-typing-indicator {
    display: none;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #888;
    margin-left: 8px;
    white-space: nowrap;
}

/* ===== 人设选择器 - 心声风格 ===== */
.ps-mask {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
.ps-card {
    width: 85%; max-width: 400px; max-height: 65vh;
    background: #fff; border-radius: 2px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    border: 1.5px solid #0a0a0a;
}
.ps-head {
    padding: 18px 20px; border-bottom: 1.5px solid #0a0a0a;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.ps-title {
    font-size: 17px; font-weight: 700; color: #0a0a0a;
    letter-spacing: -0.3px;
}
.ps-close {
    width: 28px; height: 28px; display: flex; align-items: center;
    justify-content: center; cursor: pointer; color: #0a0a0a; font-size: 16px;
}
.ps-close:active { transform: scale(0.85); }
.ps-list { overflow-y: auto; flex: 1; }
.ps-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px; cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}
.ps-item:active { background: #f6f6f7; }
.ps-item.active { background: #0a0a0a; }
.ps-item.active .ps-name { color: #fff; }
.ps-item.active .ps-note { color: rgba(255,255,255,0.6); }
.ps-item.active .ps-avatar { border-color: #fff; }
.ps-avatar {
    width: 48px; height: 48px; border-radius: 2px; object-fit: cover;
    border: 1.5px solid #e0e0e0; flex-shrink: 0;
}
.ps-info { flex: 1; min-width: 0; }
.ps-name {
    font-size: 15px; font-weight: 600; color: #0a0a0a;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ps-name i { font-size: 12px; margin-left: 4px; }
.ps-note {
    font-size: 12px; color: #65656b; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ps-empty { padding: 40px; text-align: center; color: #999; font-size: 13px; }

/* ===== 人设性别按钮 - 增强选中态 ===== */
.pg-btn {
    flex: 1; padding: 10px 6px; border: 1.5px solid #ddd;
    background: #fafafa; border-radius: 8px; font-size: 13px;
    cursor: pointer; transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    text-align: center; font-weight: 500;
}
.pg-btn:active { transform: scale(0.95); }
.pg-btn.active {
    background: #0a0a0a; color: #fff; border-color: #0a0a0a;
    font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transform: scale(1.02);
}

/* ===== [翻译按钮动画] ===== */
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== [AI生图占位卡片] 区别于灰色伪装图 ===== */
.imggen-placeholder {
    width: 200px;
    aspect-ratio: 1;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    gap: 8px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.imggen-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: imggenShimmer 2s infinite;
}
@keyframes imggenShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.imggen-placeholder-icon { font-size: 28px; position: relative; z-index: 1; }
.imggen-placeholder-text { font-size: 13px; opacity: 0.9; text-align: center; position: relative; z-index: 1; }
.imggen-placeholder-desc { font-size: 11px; opacity: 0.7; text-align: center; max-width: 90%; word-break: break-all; position: relative; z-index: 1; margin-top: 4px; }

/* ===== [群聊线下翻译] 外语发言卡片 ===== */
.go-foreign-bubble {
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 8px 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    border-left: 3px solid var(--speaker-color, #5a9ef8);
}
.go-foreign-speaker {
    font-size: 12px;
    font-weight: 600;
    color: var(--speaker-color, #5a9ef8);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.go-foreign-speaker .flag { font-size: 14px; }
.go-foreign-original { font-size: 15px; line-height: 1.7; color: #333; }
.go-foreign-divider { border: none; border-top: 1px dashed #e0e0e0; margin: 8px 0; }
.go-foreign-translated { font-size: 14px; line-height: 1.6; color: #555; font-style: italic; }
.go-foreign-toggle { font-size: 11px; color: #999; text-align: right; margin-top: 6px; cursor: pointer; }
.go-foreign-toggle:active { color: #5a9ef8; }
/* =====================================================================
   [泡泡功能页 精致化 v1] 黑白灰韩系：柔化卡片 / 去硬边 / 拉层级 / 香槟点缀
   追加在文件末尾以覆盖上方旧规则（同特异性后者生效）
   ===================================================================== */
:root{
  --pp-ink:#2b2b2e;            /* 主文字 */
  --pp-sub:#9b9aa0;           /* 辅助文字 */
  --pp-line:rgba(0,0,0,.05);  /* 发丝分割线 */
  --pp-gold:#bfa06a;          /* 克制香槟金（明星调性） */
  --pp-gold-soft:rgba(191,160,106,.12);
}

/* ---- 功能子 tab：从底边线改成柔和胶囊指示，更轻更现代 ---- */
.pp-func-tabs{
  background:#fff; border-bottom:1px solid var(--pp-line);
  padding:6px 8px; gap:4px;
}
.pp-func-tab{
  border-bottom:none !important; margin-bottom:0 !important;
  border-radius:14px; padding:9px 4px; color:var(--pp-sub);
  transition:color .2s ease, background .2s ease;
}
.pp-func-tab.active{
  color:var(--pp-ink); font-weight:600;
  background:#f4f3f4;
}
.pp-func-tab.active i{ color:var(--pp-gold); }
.pp-func-content{ padding:14px 14px 4px; background:#f7f6f7; }

/* ---- Offer 卡片：柔光浮起 + 大圆角 + 去硬边 + 入场错落 ---- */
.pp-offer-list{ gap:14px; }
.pp-offer-card{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%,#fcfbfc 100%);
  border:none !important; border-radius:20px;
  padding:17px 16px 14px;
  box-shadow:0 8px 24px rgba(30,28,32,.06), 0 1px 3px rgba(30,28,32,.04);
  transition:transform .18s ease, box-shadow .18s ease;
  animation:ppCardIn .42s cubic-bezier(.2,.8,.2,1) both;
}
.pp-offer-card:active{ transform:scale(.99); }
.pp-offer-card:nth-child(2){ animation-delay:.05s; }
.pp-offer-card:nth-child(3){ animation-delay:.10s; }
.pp-offer-card:nth-child(4){ animation-delay:.15s; }
.pp-offer-card:nth-child(5){ animation-delay:.20s; }
@keyframes ppCardIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
/* 类别色：从生硬左竖线 → 右上角柔和光晕，去掉"横平竖直"感 */
.pp-offer-card-variety,.pp-offer-card-endorse,.pp-offer-card-blog{ border-left:none !important; }
.pp-offer-card::after{
  content:''; position:absolute; top:-40px; right:-40px;
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, rgba(138,107,120,.10) 0%, rgba(138,107,120,0) 70%);
  pointer-events:none;
}
.pp-offer-card-variety::after{ background:radial-gradient(circle, rgba(138,122,160,.12) 0%, rgba(138,122,160,0) 70%); }
.pp-offer-card-endorse::after{ background:radial-gradient(circle, rgba(184,144,112,.13) 0%, rgba(184,144,112,0) 70%); }
.pp-offer-card-blog::after{ background:radial-gradient(circle, rgba(122,154,176,.12) 0%, rgba(122,154,176,0) 70%); }

/* ---- 类别徽章：实心块 → 淡底彩字（韩系轻盈） ---- */
.pp-offer-type-badge{
  padding:3px 11px; border-radius:999px;
  font-size:10.5px; letter-spacing:.5px; font-weight:700;
  color:#8a6b78 !important; background:rgba(138,107,120,.10);
}
.pp-offer-type-variety{ color:#7a6a90 !important; background:rgba(122,106,144,.12); }
.pp-offer-type-endorse{ color:#a8794f !important; background:rgba(184,144,112,.14); }
.pp-offer-type-blog{ color:#5f86a0 !important; background:rgba(122,154,176,.13); }
.pp-offer-type-movie{ color:#8a6b78 !important; background:rgba(138,107,120,.12); }
.pp-offer-type-drama{ color:#7a6a90 !important; background:rgba(138,122,160,.12); }
.pp-offer-stars{ color:var(--pp-gold); }

/* ---- 文案层级：标题更大更紧、辅助更淡，呼吸感 ---- */
.pp-offer-header{ margin-bottom:11px; }
.pp-offer-name{
  font-size:17.5px; font-weight:700; letter-spacing:-.2px;
  color:var(--pp-ink); margin-bottom:7px; line-height:1.3;
}
.pp-offer-role{ font-size:12.5px; color:var(--pp-sub); margin-bottom:10px; }
.pp-offer-role i{ color:var(--pp-gold); }
.pp-offer-meta{
  margin:0 0 12px; padding-top:11px; border-top:1px solid var(--pp-line);
  font-size:12px; color:var(--pp-sub);
}
.pp-offer-meta i{ color:var(--pp-gold); }
.pp-offer-effect{
  background:var(--pp-gold-soft); color:#9a7b4f;
  border-radius:12px; padding:8px 11px; font-size:12px;
}

/* ---- 按钮：胶囊化 + 接下用深墨色（与香槟呼应的高级黑） ---- */
.pp-offer-actions{ gap:10px; }
.pp-offer-btn{ padding:11px 0; border-radius:999px; font-size:13.5px; gap:5px; }
.pp-offer-btn-reject{ background:transparent; color:var(--pp-sub); border:1px solid #e8e7e9; }
.pp-offer-btn-reject:active{ background:#f3f2f3; }
.pp-offer-btn-accept{ background:var(--pp-ink); color:#fff; box-shadow:0 4px 12px rgba(43,43,46,.18); }
.pp-offer-btn-accept:active{ background:#000; }

/* ---- 换一批：轻量胶囊 ---- */
.pp-refresh-btn{
  display:block; width:fit-content; width:-moz-fit-content; margin:14px auto 6px;
  padding:9px 22px; border-radius:999px; color:var(--pp-sub);
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.pp-refresh-btn:active{ background:#f3f2f3; }

/* ===================== [泡泡赛道/转型 UI] ===================== */
/* 出道弹窗：赛道选择 */
.pp-setup-career-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:4px; }
.pp-setup-career-btn{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:11px 4px; border-radius:14px; cursor:pointer;
  background:#f6f5f6; border:1.5px solid transparent; transition:all .18s ease;
}
.pp-setup-career-btn .pp-setup-career-icon{ font-size:22px; line-height:1; }
.pp-setup-career-btn .pp-setup-career-name{ font-size:13px; font-weight:600; color:#444; }
.pp-setup-career-btn .pp-setup-career-main{ font-size:10px; color:#aaa; }
.pp-setup-career-btn.active{
  background:#fff; border-color:var(--pp-gold,#bfa06a);
  box-shadow:0 4px 14px rgba(191,160,106,.18);
}
.pp-setup-career-btn.active .pp-setup-career-name{ color:#2b2b2e; }
.pp-setup-career-btn.active .pp-setup-career-main{ color:var(--pp-gold,#bfa06a); }
.pp-setup-career-desc{ font-size:12px; color:#9b9aa0; margin-top:8px; text-align:center; line-height:1.5; }

/* 功能页赛道条 */
.pp-career-bar{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; margin:0 0 2px;
  background:linear-gradient(135deg,rgba(191,160,106,.10),rgba(191,160,106,.03));
}
.pp-career-bar-tag{ font-size:14px; font-weight:700; color:#2b2b2e; }
.pp-career-bar-main{ font-size:11.5px; color:#a8895a; flex:1; min-width:0; }
.pp-career-bar-switch{
  border:none; background:#2b2b2e; color:#fff; font-size:12px; font-weight:600;
  padding:6px 14px; border-radius:999px; cursor:pointer; transition:transform .12s ease, opacity .15s ease;
}
.pp-career-bar-switch:active{ transform:scale(.96); opacity:.85; }

/* 转型弹窗：契合度列表 */
.pp-career-fit-list{ display:flex; flex-direction:column; gap:10px; }
.pp-career-fit-row{
  position:relative; padding:12px 14px; border-radius:16px;
  background:#f7f6f7; transition:background .15s ease;
}
.pp-career-fit-row.current{ background:var(--pp-gold-soft,rgba(191,160,106,.12)); }
.pp-career-fit-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
.pp-career-fit-name{ font-size:14px; font-weight:700; color:#2b2b2e; }
.pp-career-fit-score{ font-size:12px; color:#a8895a; font-weight:600; }
.pp-career-fit-main{ font-size:11px; color:#9b9aa0; margin-bottom:7px; }
.pp-career-fit-bar-wrap{ height:6px; border-radius:999px; background:rgba(0,0,0,.06); overflow:hidden; }
.pp-career-fit-bar{ height:100%; border-radius:999px; background:linear-gradient(90deg,#cdb27e,var(--pp-gold,#bfa06a)); transition:width .4s ease; }
.pp-career-fit-switch{
  position:absolute; top:12px; right:14px;
  border:1px solid #e2dfd6; background:#fff; color:#a8895a; font-size:11.5px; font-weight:600;
  padding:5px 13px; border-radius:999px; cursor:pointer;
}
.pp-career-fit-switch:active{ background:#f3efe6; }

/* ============================================================
   [便签风柔化 2026-07-05] 默认黑白便签风：直角 → 大圆角、柔和二次元
   保留"白底黑线 + 便签硬阴影"精髓，仅把生硬直角改成大圆角、
   去打字机字体/便签折角三角/虚线分隔，使设置·美化·弹窗与聊天界面统一。
   与前文同选择器同特异性，靠 source order 后者胜覆盖；
   cute/korean/mono/dark 各自 body.theme-xxx 更高特异性规则不受影响。
   ============================================================ */
#layer-beauty .beauty-menu-item,
#layer-beauty .beauty-section-card,
#layer-settings .settings-nav-item,
#layer-settings .beauty-section-card,
#layer-settings .group-box,
#layer-chat-settings .beauty-section-card {
    border: 1px solid rgba(0, 0, 0, 0.28) !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}
#layer-beauty .beauty-section-card::after,
#layer-settings .beauty-section-card::after,
#layer-chat-settings .beauty-section-card::after {
    display: none !important;
    content: none !important;
}
#layer-beauty .beauty-section-header,
#layer-settings .beauty-section-header,
#layer-chat-settings .beauty-section-header {
    border-bottom: 1px solid #f0f0f0 !important;
    font-family: inherit !important;
    font-weight: 700 !important;
}
#layer-beauty .beauty-menu-title,
#layer-settings .settings-nav-title-text,
#layer-beauty > .nav-bar .nav-title,
#layer-settings > .nav-bar .nav-title {
    font-family: inherit !important;
    letter-spacing: 0 !important;
}
#layer-settings > .nav-bar,
#layer-beauty > .nav-bar {
    box-shadow: none !important;
    border-bottom: 1px solid #e8e8e8 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
#layer-beauty .beauty-action-btn,
#layer-settings .beauty-action-btn,
#layer-chat-settings .beauty-action-btn,
#layer-beauty .beauty-action-btn.mini,
#layer-settings .beauty-action-btn.mini {
    border-radius: 12px !important;
    font-family: inherit !important;
}
#layer-settings .stt-provider-btn,
#layer-settings .imggen-provider-btn,
#layer-beauty .font-preset-item .fp-actions button {
    border-radius: 10px !important;
    font-family: inherit !important;
}
#layer-beauty .beauty-comp-tabs,
#layer-beauty .beauty-mode-toggle {
    border-radius: 12px !important;
    overflow: hidden !important;
}
#layer-beauty .beauty-comp-tab,
#layer-beauty .beauty-mode-btn {
    font-family: inherit !important;
}
#layer-beauty .beauty-mode-btn.active {
    border-radius: 10px !important;
    box-shadow: none !important;
}
#layer-beauty input[type="text"],
#layer-beauty input[type="number"],
#layer-beauty input[type="url"],
#layer-beauty textarea,
#layer-beauty select,
#layer-beauty .css-input,
#layer-settings input[type="text"],
#layer-settings input[type="number"],
#layer-settings input[type="url"],
#layer-settings input[type="date"],
#layer-settings textarea,
#layer-settings select {
    border-radius: 12px !important;
    font-family: inherit !important;
}
#layer-beauty input[type="color"],
#layer-settings input[type="color"] {
    border-radius: 8px !important;
}
#layer-beauty .switch .slider,
#layer-settings .switch .slider {
    border-radius: 999px !important;
}
#layer-beauty .switch .slider::before,
#layer-settings .switch .slider::before {
    border-radius: 50% !important;
}
#layer-beauty .comp-img-preview,
#layer-beauty #icon-size-preview,
#layer-settings #lockscreen-wallpaper-preview,
#layer-beauty .font-preset-item,
#layer-settings #api-preset-list > div {
    border-radius: 14px !important;
}
#layer-beauty .form-cell,
#layer-settings .form-cell {
    border-bottom: 1px solid #f0f0f0 !important;
}
/* 导航栏紧凑：设置/美化列表项间距缩小 */
#layer-beauty .beauty-menu-item,
#layer-settings .settings-nav-item {
    margin-bottom: 2px !important;
    padding: 10px 14px !important;
}
#layer-beauty .form-label,
#layer-settings .form-label,
#layer-beauty label,
#layer-settings label,
#layer-settings #keepalive-status {
    font-family: inherit !important;
}
#layer-settings .settings-subpage .scroll-y > div[style*="font-size:12px"],
#layer-settings .settings-subpage .scroll-y > div[style*="font-size: 12px"],
#layer-beauty .beauty-subpage .scroll-y > div[style*="font-size:12px"],
#layer-beauty .beauty-subpage .scroll-y > div[style*="font-size: 12px"] {
    font-family: inherit !important;
}
.modal-mask .modal-box {
    border-radius: 22px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.modal-mask .modal-box h3,
.modal-mask .modal-box button {
    font-family: inherit !important;
    letter-spacing: 0 !important;
}
.modal-mask .modal-box input[type="text"],
.modal-mask .modal-box input[type="number"],
.modal-mask .modal-box input[type="date"],
.modal-mask .modal-box input[type="time"],
.modal-mask .modal-box textarea,
.modal-mask .modal-box select {
    border-radius: 12px !important;
}
body.theme-default #contact-list {
    padding-left: 14px !important;
    padding-right: 14px !important;
}
body.theme-default #contact-list .list-item {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 8px !important;
}
body.theme-default #contact-list .list-item .avatar {
    border-radius: 12px !important;
}
#layer-beauty #bubble-preview-area {
    border-radius: 14px !important;
}
#layer-beauty #avatar-frame-preset-grid > div,
#layer-beauty select[style],
#layer-settings select[style],
#layer-settings #contact-sound-list > div {
    border-radius: 12px !important;
}
#toast {
    border-radius: 14px !important;
    font-family: inherit !important;
}

/* ============================================================
   [便签风统一 2026-07-06] 默认黑白便签风统一收口：
   美化/设置/联系人/我的 — 白底浅灰、深灰#333细黑线框、大圆角、紧凑。
   裸选择器只命中默认主题(其他主题有 body.theme-xxx 高特异性覆盖)，
   追加在文件末尾 source order 最高，覆盖前面便签风旧块与柔化块。
   ============================================================ */

/* ── 需求2：去掉美化/设置主菜单米色格子背景 → 浅灰纯色 ── */
#beauty-menu,
#settings-menu,
#layer-beauty .beauty-subpage > .scroll-y,
#layer-settings .settings-subpage > .scroll-y {
    background: #f5f5f5 !important;
    background-image: none !important;
}

/* ── 需求1：美化/设置菜单项 — 深灰细黑线框 + 紧凑 + 大圆角 ── */
#layer-beauty .beauty-menu-item,
#layer-settings .settings-nav-item {
    border: 1.5px solid #333 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    margin-bottom: 0px !important;
    padding: 9px 12px !important;
    overflow: hidden !important;
}

/* ── 需求3：详情页区块卡片 — 深灰细黑线框 + 统一大圆角(消除直角突出) ── */
#layer-beauty .beauty-section-card,
#layer-settings .beauty-section-card,
#layer-settings .group-box,
#layer-chat-settings .beauty-section-card {
    border: 1.5px solid #333 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
/* 消除便签折角/虚线分隔等直角残留 */
#layer-beauty .beauty-section-card::after,
#layer-settings .beauty-section-card::after,
#layer-chat-settings .beauty-section-card::after {
    display: none !important;
    content: none !important;
}
#layer-beauty .beauty-section-header,
#layer-settings .beauty-section-header,
#layer-chat-settings .beauty-section-header {
    border-bottom: 1px solid #e5e5e5 !important;
}
/* 详情页内的按钮统一圆角，避免直角突出 */
#layer-beauty .beauty-action-btn,
#layer-settings .beauty-action-btn {
    border-radius: 12px !important;
    box-shadow: none !important;
}