/* 全局强制浅色模式 - 防止浏览器夜间模式影响 */
:root {
    color-scheme: light only !important;
    -webkit-color-scheme: light only !important;
}

html {
    color-scheme: light only !important;
    -webkit-color-scheme: light only !important;
    background: white !important;
    background-color: white !important;
}

body {
    color-scheme: light only !important;
    -webkit-color-scheme: light only !important;
    background: #f8f8f8 !important;
    background-color: #f8f8f8 !important;
    color: #333333 !important;
}

/* 强制所有页面容器使用浅色模式 */
.note-page,
.profile-page,
.login-page,
.deleted-page,
.achievement-page,
.security-questions,
.reset-password,
.verify-username,
.chat-window,
#discover-page {
    color-scheme: light only !important;
    -webkit-color-scheme: light only !important;
    background: white !important;
    background-color: white !important;
}

/* 确保所有文本内容使用深色 */
* {
    color-scheme: light only !important;
    -webkit-color-scheme: light only !important;
}

/* 防止 OPPO 浏览器的强制反色 */
@media (prefers-color-scheme: dark) {
    body {
        filter: none !important;
        -webkit-filter: none !important;
    }
    
    .note-page,
    .profile-page,
    .login-page,
    .deleted-page,
    .achievement-page,
    #discover-page {
        filter: none !important;
        -webkit-filter: none !important;
    }
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Noto Sans SC', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

:root {
    --red: #ff2442;
    --pink: #ff2d79;
    --light-pink: #fff0f5;
    --dark-gray: #333333;
    --medium-gray: #666666;
    --light-gray: #999999;
    --border: #f0f0f0;
    --background: #f8f8f8;
    --comment-bg: #fafafa;
    --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    --private-color: #9c27b0;
    --achievement-gold: #ffd700;
    --achievement-silver: #c0c0c0;
    --achievement-bronze: #cd7f32;
}

body {
    background-color: var(--background);
    color: var(--dark-gray);
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    padding-bottom: 60px;
    line-height: 1.5;
    font-size: 15px;
    /* iOS Safari 优化 */
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    /* 防止页面缩放 */
    touch-action: manipulation;
}
/* 笔记页面容器 */
.note-page {
    min-height: 100vh;
    padding-bottom: 60px;
}

/* 顶部标题栏 */
.header {
    position: sticky;
    top: 0;
    background-color: white;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    border-bottom: 1px solid var(--border);
}

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

.logo {
    font-size: 22px;
    font-weight: 700;
    color: var(--red);
    margin-right: 8px;
}

.tab-bar {
    display: flex;
    gap: 20px;
}

.tab {
    font-size: 16px;
    color: var(--medium-gray);
    position: relative;
    padding: 4px 0;
    cursor: pointer;
    transition: color 0.3s;
}

.tab.active {
    color: var(--dark-gray);
    font-weight: 600;
}

.tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--red);
    border-radius: 3px;
}

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

.header-icon {
    font-size: 20px;
    color: var(--dark-gray);
}

/* 搜索功能样式 */
.search-container {
    position: relative;
}

.search-icon {
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-icon:hover {
    color: var(--red);
}

.search-box {
    position: absolute;
    top: -8px;
    right: -16px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 8px 40px 8px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    width: 280px;
max-width: none !important;/* 取消全局 max-width 限制 */
    display: none;
    z-index: 200;
}

.search-box.active {
    display: block;
    animation: searchSlideIn 0.3s ease-out;
}

@keyframes searchSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
        width: 0;
    }
    to {
        opacity: 1;
        transform: translateX(0);
        width: 280px;
    }
}

.search-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--dark-gray);
    background: transparent;
}

.search-input::placeholder {
    color: var(--light-gray);
}

.search-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--light-gray);
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.search-close:hover {
    background: #f5f5f5;
    color: var(--dark-gray);
}

/* 搜索结果提示 */
.search-result-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 20px 30px;
    border-radius: 12px;
    font-size: 16px;
    z-index: 500;
    display: none;
    text-align: center;
    max-width: 300px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.search-result-icon {
    font-size: 32px;
    margin-bottom: 10px;
}


/* 成就通知样式 - 居中显示 */
.achievement-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff121;
    border-radius: 30px;
    border: 4px solid #f39c20;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 18px;
    z-index: 1000;
    width: 85%;
    max-width: 380px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    animation: popIn 0.5s ease-out, fadeOut 0.5s ease-in 2.5s forwards;
}
#achievement-notification {
    z-index: 99999 !important;
}
@keyframes popIn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; visibility: hidden; }
}

.achievement-icon {
    font-size: 36px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.achievement-text {
    flex: 1;
}

.achievement-title {
    font-size: 16px;
    color: white;
    text-shadow: 1px 1px 2px black;
    margin-bottom: 5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.achievement-name {
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 5px;
    color: white;
    text-shadow: 1px 1px 2px black;
    letter-spacing: 0.5px;
}

.achievement-desc {
    font-size: 15px;
    color: white;
    text-shadow: 1px 1px 2px black;
}

/* 特殊成就样式 - 至今世间仍有隐约的耳语 */
.achievement-notification.whisper-achievement {
    background: linear-gradient(135deg, #9af5fa, #ffffff);
    border: 4px solid #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.achievement-notification.whisper-achievement .achievement-title,
.achievement-notification.whisper-achievement .achievement-name,
.achievement-notification.whisper-achievement .achievement-desc {
    color: white;
    text-shadow: 
        /* 单层描边 - 青蓝色 */
        1px 1px 2px #54c2c8,
        -1px -1px 2px #54c2c8,
        1px -1px 2px #54c2c8,
        -1px 1px 2px #54c2c8,
        /* 保持与其他成就一致的黑色投影 */
        1px 1px 2px black;
}

/* 成就页面 */
.achievement-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 400;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    padding: 20px;
}

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

.achievement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}

.achievement-title-main {
    font-size: 24px;
    font-weight: 700;
    color: var(--dark-gray);
}

.close-achievements {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--medium-gray);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.close-achievements:hover {
    background: #f5f5f5;
}

.achievement-stats {
    display: flex;
    justify-content: space-around;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 25px;
}

.stat-item {
    text-align: center;
    flex: 1;
}

.stat-count {
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 4px;
}

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

.achievement-list {
    display: grid;
    gap: 15px;
}

.achievement-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-radius: 12px;
    background: white;
    box-shadow: var(--card-shadow);
    border: 1px solid #f0f0f0;
    transition: all 0.3s;
}

.achievement-item.locked {
    opacity: 0.7;
    background: #fafafa;
}

.achievement-item-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 28px;
    flex-shrink: 0;
    background: #f0f0f0;
    color: var(--light-gray);
}

.achievement-item.unlocked .achievement-item-icon {
    background: linear-gradient(135deg, #ffd700, #ffb700);
    color: white;
}

.achievement-item-content {
    flex: 1;
}

.achievement-item-name {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 5px;
    color: var(--medium-gray);
}

.achievement-item.unlocked .achievement-item-name {
    color: var(--dark-gray);
}

.achievement-item-desc {
    font-size: 14px;
    color: var(--medium-gray);
    margin-bottom: 5px;
}

.achievement-item-date {
    font-size: 12px;
    color: var(--light-gray);
}

.achievement-item.locked .achievement-item-date {
    display: none;
}

.achievement-item-ribbon {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 12px;
    color: white;
    font-weight: 500;
}

.achievement-gold .achievement-item-ribbon {
    background: var(--achievement-gold);
}

.achievement-silver .achievement-item-ribbon {
    background: var(--achievement-silver);
}

.achievement-bronze .achievement-item-ribbon {
    background: var(--achievement-bronze);
}

.achievement-item.locked .achievement-item-ribbon {
    display: none;
}

/* 新增成就按钮 */
.achievement-btn {
    position: fixed;
    bottom: 70px;
    left: 16px;
    z-index: 1001;
}

.achievement-btn-icon {
    background-color: #ff9500;
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3);
    transition: all 0.3s;
}

.achievement-btn-icon:hover {
    transform: scale(1.1);
}

/* 下载按钮 */
.download-container {
    position: fixed;
    bottom: 70px;
    right: 16px;
    z-index: 100;
}

.download-btn {
    background-color: var(--red);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 36, 66, 0.3);
    transition: all 0.3s;
}

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

/* 贴主信息 */
.author-info {
    display: flex;
    align-items: center;
    padding: 16px;
    background: white;
}

.author-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd1dc, #ffb6c1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
    cursor: pointer;
}

.author-details {
    margin-left: 12px;
    flex: 1;
}

.author-name {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.verified-badge {
    font-size: 12px;
    color: #4a90e2;
}

.post-meta {
    color: var(--light-gray);
    font-size: 12px;
    display: flex;
    align-items: center;
}

.post-meta .dot {
    margin: 0 4px;
}

.follow-btn {
    background-color: var(--red);
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 14px;
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
}

.follow-btn.followed {
    background-color: #f0f0f0;
    color: var(--medium-gray);
}

/* 笔记内容 */
.note-content {
    background: white;
    padding: 0 16px 16px;
}

.note-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.4;
}

.note-text {
    font-size: 15px;
    margin-bottom: 14px;
    line-height: 1.6;
}

.note-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.tag {
    background-color: #f5f5f5;
    color: var(--medium-gray);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
}

.note-meta {
    color: var(--light-gray);
    font-size: 12px;
    margin-top: 16px;
    display: flex;
    align-items: center;
}

.note-meta .dot {
    margin: 0 4px;
}

.note-actions {
    display: flex;
    justify-content: space-around;
    padding: 16px 0;
    margin: 16px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.note-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.action-icon {
    font-size: 20px;
    color: var(--medium-gray);
}

.action-count {
    font-size: 12px;
    color: var(--light-gray);
}

/* 评论区 */
.comments-section {
    background: white;
    margin-top: 10px;
    padding: 16px 16px 60px;
}

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

.comments-title {
    font-weight: 700;
    font-size: 18px;
    color: var(--dark-gray);
}

.comments-count {
    font-size: 14px;
    color: var(--light-gray);
}

.comment {
    display: flex;
    margin-bottom: 20px;
}

.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #f0f0f0;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.comment-content {
    flex: 1;
}

.comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.comment-author {
    font-weight: 600;
    font-size: 15px;
    color: var(--dark-gray);
    margin-right: 8px;
}

.comment-time {
    font-size: 12px;
    color: var(--light-gray);
}

.comment-text {
    font-size: 15px;
    margin-bottom: 8px;
    color: var(--dark-gray);
    line-height: 1.5;
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.comment-action {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--light-gray);
    gap: 4px;
}

/* 楼中楼回复 */
.reply-section {
    margin-top: 10px;
    padding-left: 12px;
    border-left: 2px solid #f0f0f0;
}

.reply {
    display: flex;
    margin-top: 12px;
}

.reply-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #f5f5f5;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.reply-content {
    flex: 1;
}

.reply-header {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
}

.reply-author {
    font-weight: 500;
    font-size: 14px;
    color: var(--dark-gray);
    margin-right: 8px;
}

.reply-author.original {
    color: var(--pink);
    font-weight: 600;
}

.comment-author.original {
    color: var(--pink);
    font-weight: 600;
}

.reply-time {
    font-size: 11px;
    color: var(--light-gray);
}

.reply-text {
    font-size: 14px;
    color: var(--dark-gray);
    line-height: 1.5;
}

.reply-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.reply-action {
    display: flex;
    align-items: center;
    font-size: 11px;
    color: var(--light-gray);
    gap: 2px;
}

.view-more-replies {
    font-size: 13px;
    color: var(--medium-gray);
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 互动栏 */
.interaction-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    max-width: 500px;
    margin: 0 auto;
    z-index: 100;
    height: 60px;
    /* iOS Safari 优化 */
    padding-bottom: max(8px, env(safe-area-inset-bottom));
}

.comment-input-container {
    flex: 1;
    background-color: #f5f5f5;
    border-radius: 20px;
    padding: 0 15px 0 15px;
    height: 36px;
    display: flex;
    align-items: center;
    margin-right: 10px;
    position: relative;
}
.comment-input {
    background: transparent;
    border: none;
    font-size: 16px; /* iOS 防止缩放 */
    color: var(--dark-gray);
    width: 100%;
    outline: none;
    /* iOS 优化 */
    -webkit-appearance: none;
    border-radius: 0;
    padding-right: 60px; /* 为发送按钮留空间 */
}
/* 发送按钮 */
.send-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--red);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 2;
}

.send-btn.visible {
    opacity: 1;
}

.send-btn:active {
    transform: translateY(-50%) scale(0.95);
}
.comment-input::placeholder {
    color: var(--light-gray);
}

.action-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--medium-gray);
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    width: 36px;
    height: 36px;
    justify-content: center;
}

.action-btn .count {
    font-size: 11px;
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #f0f0f0;
    border-radius: 8px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    color: var(--medium-gray);
}

.action-btn.liked {
    color: var(--red);
}

.action-btn.liked .count {
    color: var(--red);
}

.action-btn.collected {
    color: #ff9500;
}

/* 贴主主页 */
.profile-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 200;
    overflow-y: auto;
    display: none; /* 新增：默认隐藏 */
    /* transform: translateX(100%); */ /* 注释掉或删除这一行 */
    /* transition: transform 0.3s ease; */ /* 注释掉或删除这一行 */
}

.profile-page.active {
    /* transform: translateX(0); */ /* 注释掉或删除这一行 */
    display: block; /* 新增：有 .active 类时显示 */
}

.profile-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(135deg, #ffd1dc, #ff9eb5);
    z-index: 0;
}

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

.profile-top {
    display: flex;
    align-items: center;
    padding: 16px;
    margin-bottom: 20px;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd1dc, #ffb6c1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    margin-right: 16px;
    flex-shrink: 0;
    border: 3px solid white;
}

.profile-info {
    flex: 1;
}

.profile-name {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-id {
    color: var(--medium-gray);
    font-size: 14px;
    margin-bottom: 4px;
}

.profile-ip {
    color: var(--light-gray);
    font-size: 14px;
}

.profile-bio {
    font-size: 14px;
    margin: 12px 16px;
    color: var(--dark-gray);
    line-height: 1.5;
}

.profile-stats {
    display: flex;
    justify-content: space-around;
    padding: 16px 0;
    margin: 16px;
    background: white;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
}

.profile-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}

.profile-tab {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 16px;
    color: var(--medium-gray);
    position: relative;
}

.profile-tab.active {
    color: var(--dark-gray);
    font-weight: 600;
}

.profile-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background-color: var(--red);
    border-radius: 3px;
}

/* 笔记网格 - 按时间顺序排列（最新到最旧） */
.notes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 8px;
}

/* 笔记顺序设置 - 按发布时间从新到旧排列 */
#note7-card { order: 1; } /* 第七篇笔记 - 2024年7月8日 - 最新 */
#note6-card { order: 2; } /* 第六篇笔记 - 2024年7月5日 - 第二新 */
#note5-card { order: 3; } /* 第五篇笔记 - 2024年7月2日 - 第三新 */
#note4-card { order: 4; } /* 第四篇笔记 - 2024年6月8日 - 第四新 */
#note3-card { order: 5; } /* 第三篇笔记 - 2024年6月6日 - 第五新 */
#note2-card { order: 6; } /* 第二篇笔记 - 2024年6月3日 - 第六新 */
#note1-card { order: 7; } /* 第一篇笔记 - 2024年5月20日 - 最旧 */

/* 私密笔记始终显示在最后 */
.notes-grid .private-note { order: 10; }
/* 私密笔记始终显示在最后 */
.notes-grid .private-note { order: 10; }

.note-card {
    position: relative;
    aspect-ratio: 3/4;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    cursor: pointer;
    transition: transform 0.2s;
}

.note-card:hover {
    transform: translateY(-2px);
}

.note-card-img {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ff9a9e, #fecfef);
    position: relative;
    overflow: hidden;
}

.note-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.9;
}


/* 私密笔记1 - 深色调 */
#private-note1 .note-card-bg {
    background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
}

/* 私密笔记2 - 蓝色调 */
#private-note2 .note-card-bg {
    background: linear-gradient(135deg, #4facfe, #00f2fe, #43e97b);
}

/* 私密笔记3 - 橙紫渐变 */
#private-note3 .note-card-bg {
    background: linear-gradient(135deg, #fa709a, #fee140, #e8a6ff);
}

.note-card-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    width: 90%;
}

.note-card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    margin-bottom: 8px;
}

.note-card-stats {
    display: none;
}

.note-card-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.private-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--private-color);
    color: white;
    border-radius: 12px;
    padding: 3px 8px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 3;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 解锁提示 */
.unlock-toast {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0,0,0,0.8);
    color: white;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 13px;
    z-index: 150;
    display: none;
}

.close-profile {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 22px;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    color: var(--dark-gray);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 3;
}

/* 返回按钮 */
.back-button {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    color: var(--dark-gray);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 101;
}

/* 评论提示条 */
.comment-prompt {
    background-color: #fff8e6;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 16px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.comment-prompt i {
    font-size: 20px;
    color: #ff9500;
}

.comment-prompt-text {
    font-size: 14px;
    color: #e6a23c;
}

/* 注销按钮 */
.delete-account-btn {
    background: #f8f8f8;
    border: 1px solid #ff2442;
    color: #ff2442;
    border-radius: 20px;
    padding: 10px 20px;
    font-weight: 600;
    margin: 20px auto;
    display: block;
    cursor: pointer;
    transition: all 0.3s;
    width: 90%;
}

.delete-account-btn:hover {
    background: #ff2442;
    color: white;
}

/* 倒计时 */
.countdown {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--red);
    color: white;
    text-align: center;
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
    z-index: 250;
    display: none;
}

.countdown-number {
    background: white;
    color: var(--red);
    padding: 2px 10px;
    border-radius: 20px;
    margin: 0 5px;
    font-weight: 700;
}

/* 用户已注销页面 */
.deleted-page {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f8f8f8;
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.deleted-content {
    text-align: center;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center; /* 确保内容居中 */
}

.deleted-icon {
    font-size: 80px; /* 保持原有大小 */
    color: #ddd;
    margin-bottom: 30px;
}

.deleted-content h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 15px;
}

.deleted-content p {
    font-size: 16px;
    color: #666;
    margin-bottom: 0; /* 移除底部边距，为按钮腾出空间 */
}
/* 登录页面 */
.login-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 300;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    display: none;
    overflow-y: auto;
}

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

.login-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--red);
    text-align: center;
}

.login-form {
    width: 100%;
    max-width: 350px;
}

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

.form-group label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 16px;
}

.login-btn {
    background-color: var(--red);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
    transition: background 0.3s;
}

.login-btn:hover {
    background: #e61e3c;
}

.hack-note {
    margin-top: 20px;
    padding: 15px;
    background: #fff8e6;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
}

/* 动画效果 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.comment {
    animation: fadeIn 0.3s ease forwards;
}

/* 私信通知浮窗 */
.message-notification {
    position: fixed;
    top: 80px;
    right: 20px;
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    z-index: 300;
    width: 300px;
    cursor: pointer;
    border: 1px solid #f0f0f0;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.message-notification-content {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.message-notification-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd1dc, #ffb6c1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    flex-shrink: 0;
}

.message-notification-text {
    flex: 1;
}

.message-notification-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
}

.message-notification-preview {
    color: var(--medium-gray);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-notification-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.message-notification-close:hover {
    background: #999;
}

/* 聊天窗口 */
.chat-window {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 400;
    display: flex;
    flex-direction: column;
}

.chat-header {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    background: white;
}

.chat-back {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--dark-gray);
    cursor: pointer;
    margin-right: 16px;
    padding: 8px;
}

.chat-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd1dc, #ffb6c1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.chat-username {
    font-weight: 600;
    font-size: 16px;
}

.chat-user-status {
    font-size: 12px;
    color: #4CAF50;
}

.chat-more {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--medium-gray);
    cursor: pointer;
    padding: 8px;
}

.chat-messages {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background: #f8f8f8;
}

.chat-message {
    display: flex;
    margin-bottom: 16px;
}

.chat-message.received {
    justify-content: flex-start;
}

.chat-message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd1dc, #ffb6c1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    margin-right: 12px;
    flex-shrink: 0;
}

.chat-message-content {
    max-width: 70%;
}

.chat-message-bubble {
    background: white;
    padding: 12px 16px;
    border-radius: 18px;
    border-top-left-radius: 6px;
    font-size: 15px;
    line-height: 1.4;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.chat-message-time {
    font-size: 12px;
    color: var(--light-gray);
    margin-top: 4px;
    margin-left: 16px;
}

.chat-input-area {
    border-top: 1px solid var(--border);
    padding: 16px;
    background: white;
}

.chat-blocked-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f5f5f5;
    border-radius: 20px;
    color: var(--medium-gray);
    font-size: 14px;
}

.chat-blocked-notice i {
    color: var(--red);
}

/* 拉黑提示 */
.blocked-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 25px 35px;
    border-radius: 15px;
    font-size: 18px;
    z-index: 500;
    display: none;
    text-align: center;
    max-width: 300px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.blocked-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.blocked-toast p {
    margin-top: 10px;
    font-size: 14px;
    color: #ccc;
}

/* 小五书号验证窗口 */
.verify-username {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 360;
    overflow-y: auto;
    display: none;
    padding: 20px;
}

.verify-username.active {
    display: block;
}

/* 密保问题容器 - 使用基础版的全屏样式 */
.security-questions {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 350;
    overflow-y: auto;
    display: none;
    padding: 20px;
}

.security-questions.active {
    display: block;
}

.security-title {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 25px;
    color: var(--red);
    position: relative;
}

.security-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: var(--pink);
}

.question-group {
    margin-bottom: 24px;
    position: relative;
}

.question-label {
    display: block;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--dark-gray);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hint-icon {
    color: var(--light-gray);
    cursor: pointer;
    transition: all 0.3s;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
}

.hint-icon:hover, .hint-icon.active {
    background: var(--pink);
    color: white;
}

.hint-text {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--light-pink);
    padding: 14px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--pink);
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: none;
    margin-top: 8px;
}

.question-input {
    width: 100%;
    padding: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s;
}

.question-input:focus {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(255, 45, 121, 0.2);
    outline: none;
}

.date-picker {
    display: flex;
    gap: 10px;
}

.date-select {
    flex: 1;
    padding: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px;
    background: white;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.verify-btn {
    background: var(--red);
    color: white;
    border: none;
    padding: 16px;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 20px;
}

.verify-btn:hover {
    background: #e61e3c;
}

.back-to-login {
    display: block;
    text-align: center;
    margin-top: 25px;
    color: var(--medium-gray);
    text-decoration: underline;
    cursor: pointer;
    font-size: 15px;
}

.back-to-login:hover {
    color: var(--red);
}

/* 密码重置表单 */
.reset-password {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 350;
    overflow-y: auto;
    display: none;
    padding: 20px;
}

.reset-password.active {
    display: block;
}

.password-input-group {
    position: relative;
    margin-bottom: 25px;
}

.password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--light-gray);
    cursor: pointer;
    font-size: 18px;
}

/* 错误提示 */
.error-message {
    color: var(--red);
    font-size: 14px;
    margin-top: 8px;
    display: none;
}

/* 忘记密码链接 */
.forgot-password-link {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: var(--red);
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
    font-size: 15px;
}

/* 登录表单容器 */
.login-container {
    width: 100%;
    max-width: 400px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 30px;
    margin: 0 20px;
}

/* 密保问题标题栏 */
.security-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.back-to-login-btn {
    background: none;
    border: none;
    color: var(--medium-gray);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 密码重置标题栏 */
.reset-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

/* 登录页面标题 */
.login-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.login-logo {
    font-size: 28px;
    color: var(--red);
    margin-right: 12px;
}

/* 发现页卡片网格样式 */
.discover-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 16px 8px 80px;
    background: var(--background);
}

.discover-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    cursor: pointer;
    transition: transform 0.2s;
    background: white;
}

.discover-card:hover {
    transform: translateY(-2px);
}

.discover-card-img {
    width: 100%;
    aspect-ratio: 3/4;
    position: relative;
    overflow: hidden;
}

.discover-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.9;
}

.discover-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    padding: 20px 12px 12px;
    color: white;
}

.discover-card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.discover-card-preview {
    font-size: 12px;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    opacity: 0.9;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.discover-card-stats {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.discover-card-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    font-size: 12px;
    background: rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 10px;
    backdrop-filter: blur(4px);
}

.discover-card-stat i {
    font-size: 11px;
}

.discover-card-author {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.3);
    padding: 4px 8px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
}

.discover-author-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
}

.discover-author-name {
    color: white;
    font-size: 11px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* 响应式调整 */
@media (max-width: 375px) {
    .note-title {
        font-size: 20px;
    }
    
    .note-text {
        font-size: 14px;
    }
    
    .comment-text, .reply-text {
        font-size: 14px;
    }
    
    .tab-bar {
        gap: 12px;
    }
    
    .tab {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .security-questions, 
    .reset-password,
    .verify-username,
    .login-container {
        padding: 20px;
        width: 95%;
    }
    
    .date-picker {
        flex-direction: column;
    }
    
    .date-select {
        width: 100%;
    }
    
    .question-input, .date-select {
        padding: 16px;
        font-size: 16px;
    }
    
    .verify-btn {
        padding: 16px;
        font-size: 16px;
    }
    
    .security-title {
        font-size: 20px;
    }
    
    /* 移动端私信通知优化 */
    .message-notification {
        top: 70px;
        right: 10px;
        left: 10px;
        width: auto;
    }
    
    /* 移动端聊天窗口优化 */
    .chat-window {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .chat-message-content {
        max-width: 85%;
    }
}
/* iOS Safari 专用修复 */
@supports (-webkit-touch-callout: none) {
    body {
        /* 防止 iOS Safari 横向滚动 */
        width: 100vw;
        overflow-x: hidden;
        position: relative;
    }
    
    .note-page,
    .profile-page,
    .login-page,
    .deleted-page,
    .achievement-page,
    .security-questions,
    .reset-password,
    .verify-username,
    .chat-window,
    #discover-page {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* iOS 输入时的视窗调整 */
    .interaction-bar {
        /* 使用 vh 单位确保正确定位 */
        bottom: 0;
        position: fixed;
    }
    
    /* iOS 键盘弹起时的优化 */
    .comment-input {
        /* 防止输入时页面缩放 */
        font-size: 16px;
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

/* 防止移动端缩放和横向滚动 */
html {
    width: 100%;
    overflow-x: hidden;
}

* {
    /* 防止任何元素超出视窗宽度 */
    max-width: 100%;
    box-sizing: border-box;
}

/* 移动端输入优化 */
input, textarea {
    /* iOS Safari 防止缩放 */
    font-size: 16px;
    /* 防止输入框样式被系统覆盖 */
    -webkit-appearance: none;
    appearance: none;
}

/* 处理iOS输入时的视窗变化 */
@media screen and (max-height: 500px) {
    .interaction-bar {
        /* 键盘弹起时保持可见 */
        position: fixed;
        bottom: 0;
    }
    
    body {
        /* 防止键盘弹起时的布局问题 */
        height: auto;
        min-height: auto;
    }
}

/* ===== 注销后空白个人主页样式 ===== */

/* 笔记消失动画 */
@keyframes noteDisappear {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.95) rotate(2deg);
        filter: blur(2px);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) rotate(5deg);
        filter: blur(5px);
    }
}

.note-disappearing {
    animation: noteDisappear 0.8s ease-out forwards;
    pointer-events: none;
}

/* 空状态样式 */
.empty-notes-state {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 1s ease-in forwards;
    animation-delay: 0.5s;
}

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

/* 注销过渡效果 */
.profile-deletion-transition .profile-id,
.profile-deletion-transition .profile-ip {
    color: #ff4757;
    transition: color 0.5s ease-out;
    animation: glitch 0.3s ease-in-out;
}

@keyframes glitch {
    0%, 100% {
        text-shadow: none;
    }
    50% {
        text-shadow: 2px 2px 0 #ff0000, -2px -2px 0 #00ff00;
    }
}

/* 数据变化动画 */
.profile-deletion-transition .stat-count {
    animation: countDown 1s ease-out forwards;
}

@keyframes countDown {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
        color: #ff4757;
    }
    100% {
        transform: scale(1);
        color: #999;
    }
}

/* 走散提示触发区域 */
#deleted-profile-page .profile-avatar {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

#deleted-profile-page .profile-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.5);
}

#deleted-profile-page .profile-avatar::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: radial-gradient(circle, rgba(255, 71, 87, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#deleted-profile-page .profile-avatar:hover::after {
    opacity: 1;
    animation: pulse 2s infinite;
}

/* 增强走散提示样式 */
#scattered-toast {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 240, 240, 0.95) 100%);
    border: 1px solid rgba(255, 71, 87, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
    from {
        transform: translate(-50%, calc(-50% + 50px));
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

/* 增强时光机效果 */
#time-machine-icon {
    animation: float 3s ease-in-out infinite;
}

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

/* 整体页面淡出效果 */
.profile-page-fadeout {
    animation: fadeOut 0.8s ease-out forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        filter: blur(10px);
        transform: scale(0.95);
    }
}
/* 时光机脉冲动画 */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(102, 126, 234, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
    }
}
/* ===== 代码溶解效果 ===== */

/* 数字雨效果背景 */
@keyframes matrix-rain {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 100%;
    }
}

/* 代码溶解动画 */
@keyframes codeDissolve {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0px) contrast(1);
    }
    20% {
        opacity: 0.9;
        transform: scale(1.02) translateY(-2px);
        filter: blur(0.5px) contrast(1.2);
    }
    40% {
        opacity: 0.7;
        transform: scale(0.98) translateY(5px);
        filter: blur(1px) contrast(1.5) hue-rotate(180deg);
    }
    60% {
        opacity: 0.4;
        transform: scale(0.95) translateY(10px) skewY(2deg);
        filter: blur(3px) contrast(2) hue-rotate(360deg);
        text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    }
    80% {
        opacity: 0.1;
        transform: scale(0.9) translateY(20px) skewY(5deg);
        filter: blur(8px) contrast(3);
        text-shadow: 0 0 20px rgba(0, 255, 0, 0.8), 0 0 40px rgba(0, 255, 0, 0.4);
    }
    100% {
        opacity: 0;
        transform: scale(0.85) translateY(30px) skewY(10deg);
        filter: blur(15px) contrast(5);
        text-shadow: 0 0 30px rgba(0, 255, 0, 1);
    }
}

/* 像素化消失效果 */
@keyframes pixelate {
    0% {
        filter: contrast(1) blur(0px);
    }
    25% {
        filter: contrast(1.5) blur(0px) url("data:image/svg+xml,%3Csvg width='2' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
    }
    50% {
        filter: contrast(2) blur(1px);
        transform: scale(0.99);
    }
    75% {
        filter: contrast(5) blur(2px);
        opacity: 0.5;
        transform: scale(0.97);
    }
    100% {
        filter: contrast(100) blur(5px);
        opacity: 0;
        transform: scale(0.95);
    }
}

/* 故障效果 */
@keyframes glitchEffect {
    0%, 100% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
    20% {
        transform: translate(-2px, 2px);
        filter: hue-rotate(90deg);
    }
    40% {
        transform: translate(-2px, -2px);
        filter: hue-rotate(180deg);
    }
    60% {
        transform: translate(2px, 2px);
        filter: hue-rotate(270deg);
    }
    80% {
        transform: translate(2px, -2px);
        filter: hue-rotate(360deg);
    }
}

/* 应用到笔记卡片 */
.note-card-dissolving {
    animation: codeDissolve 0.8s ease-out forwards;
    position: relative;
}

.note-card-dissolving::before {
    content: '010101010101';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    animation: showBinary 0.8s ease-out forwards;
    z-index: 10;
}

@keyframes showBinary {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
    }
}

/* null值的故障效果 */
.null-glitch {
    animation: glitchEffect 0.5s ease-in-out;
    color: #ff4757;
}
#time-machine-container {
  z-index: 1002 !important;
}
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>第七篇笔记 - 隐藏文字效果</title>
      <style>
    /* 第七篇笔记 - 修复版隐藏文字效果 */
/* 1. 强制整个第七篇笔记页面保持浅色模式 */
#note7-page {
    color-scheme: light only !important;
    -webkit-color-scheme: light only !important;
    background: white !important;
}

/* 2. 强制笔记内容区域保持浅色 */
#note7-page .note-content {
    background: white !important;
    background-color: white !important;
    color: #333333 !important;
    color-scheme: light only !important;
    -webkit-color-scheme: light only !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* 3. 隐藏文字效果 - 使用透明度方案 */
.hidden-text {
    position: relative;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
    
    /* 使用透明度而非颜色匹配 */
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    
    /* 防止某些浏览器的自动处理 */
    -webkit-text-stroke: 0px transparent !important;
    
    transition: all 0.3s ease;
}

/* 选中时显示 */
.hidden-text::selection {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
    background-color: #b3d4fc !important;
}

.hidden-text::-moz-selection {
    color: #333333 !important;
    background-color: #b3d4fc !important;
}

/* 4. 针对 iOS Safari 的额外防护 */
@supports (-webkit-touch-callout: none) {
    #note7-page {
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
    }
    
    .hidden-text {
        -webkit-text-fill-color: transparent !important;
    }
}

/* 5. 强制所有子元素遵循浅色模式 */
#note7-page * {
    color-scheme: light only !important;
    -webkit-color-scheme: light only !important;
}

/* 6. 确保普通文字始终可见 */
#note7-page .note-text:not(.hidden-text) {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
}

#note7-page .note-title {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
}

/* 移除之前的 @media (prefers-color-scheme) 规则，不再需要 */
        
        /* 精选评论提示 */
        .comment-filter-notice {
            background: #fff8e6;
            border: 1px solid #ffd93d;
            border-radius: 8px;
            padding: 12px 16px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: #e6a23c;
        }
        
        .comment-filter-notice i {
            font-size: 16px;
            color: #ff9500;
        }
        
        /* 评论成功但不展示的提示 */
        .comment-success-toast {
            position: fixed;
            bottom: 70px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0,0,0,0.8);
            color: white;
            padding: 12px 20px;
            border-radius: 25px;
            font-size: 14px;
            z-index: 150;
            display: none;
            text-align: center;
            max-width: 90%;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }

        /* 基础样式保持与其他笔记一致 */
        .note-text {
            font-size: 15px;
            margin-bottom: 14px;
            line-height: 1.6;
        }
        
        .note-text.hidden-text {
            margin-bottom: 14px;
            line-height: 1.6;
            font-size: 15px;
        }
/* 账户已注销提示 */
.account-deleted-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 20px 30px;
    border-radius: 12px;
    z-index: 1000;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* 走散提示 */
.scattered-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    text-align: center;
    max-width: 350px;
}

.scattered-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.scattered-text {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.think-btn {
    background-color: #ff4757;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.think-btn:hover {
    background-color: #ff3838;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
}

/* 时光机容器 */
.time-machine-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}
/* ===== 系统崩溃动效样式 ===== */

/* 特效容器 */
.effect-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
}

/* 终端错误信息 */
.terminal-error {
    position: absolute;
    background: #000;
    color: #ff0000;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 8px;
    border: 1px solid #333;
    pointer-events: none;
    white-space: pre;
    box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

@keyframes terminalPopup {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    20% {
        opacity: 1;
        transform: translateY(0);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* 像素故障 */
.pixel-glitch {
    position: absolute;
    background: #000;
    pointer-events: none;
    opacity: 0.8;
}

@keyframes pixelBreak {
    0% {
        transform: translate(0, 0);
        opacity: 0.8;
    }
    50% {
        opacity: 0.6;
        transform: translate(var(--px), var(--py));
    }
    100% {
        transform: translate(var(--px2), var(--py2));
        opacity: 0;
    }
}

/* 静态噪声 */
.static-noise {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            rgba(0,0,0,0.8) 0px,
            rgba(0,0,0,0.8) 1px,
            transparent 1px,
            transparent 3px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(0,0,0,0.6) 0px,
            rgba(0,0,0,0.6) 2px,
            transparent 2px,
            transparent 6px
        );
}

@keyframes staticFlicker {
    0% { opacity: 0; }
    10% { opacity: 0.9; }
    20% { opacity: 0.6; }
    30% { opacity: 0.95; }
    40% { opacity: 0.7; }
    50% { opacity: 0.98; }
    60% { opacity: 0.8; }
    70% { opacity: 0.95; }
    80% { opacity: 0.9; }
    90% { opacity: 0.97; }
    100% { opacity: 1; }
}

/* 条码干扰 */
.barcode-glitch {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        #000 0px,
        #000 2px,
        transparent 2px,
        transparent 4px,
        #000 4px,
        #000 5px,
        transparent 5px,
        transparent 8px,
        #000 8px,
        #000 11px,
        transparent 11px,
        transparent 12px
    );
    opacity: 0;
}

@keyframes barcodeSlash {
    0% { opacity: 0; transform: translateX(-100%); }
    20% { opacity: 0.9; transform: translateX(0); }
    100% { opacity: 1; transform: translateX(0); }
}

/* 额外噪声层 */
.noise-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    background: 
        repeating-linear-gradient(
            45deg,
            rgba(0,0,0,0.3) 0px,
            rgba(0,0,0,0.3) 1px,
            transparent 1px,
            transparent 4px
        );
}

@keyframes noiseFlash {
    0% { opacity: 0; }
    50% { opacity: 0.4; }
    100% { opacity: 0; }
}

/* 数据损坏 */
.data-corruption {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #666;
    pointer-events: none;
    white-space: pre;
    opacity: 0.8;
}

@keyframes dataCorrupt {
    0% {
        opacity: 0.8;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(var(--corrupt-distance));
    }
}

/* 扫描线 */
.scan-line {
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(255, 0, 0, 0.3);
    pointer-events: none;
}

@keyframes scanMove {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(var(--scan-height));
        opacity: 0;
    }
}

/* 卡片系统崩溃 */
.system-crash {
    animation: systemMeltdown 2s ease-out forwards;
    position: relative;
}

@keyframes systemMeltdown {
    0% {
        transform: scale(1);
        filter: grayscale(0) blur(0px);
        opacity: 1;
    }
    20% {
        transform: scale(1.01);
        filter: grayscale(0.2) blur(0.5px);
        opacity: 0.9;
    }
    40% {
        transform: scale(0.99);
        filter: grayscale(0.6) blur(1px);
        opacity: 0.7;
    }
    60% {
        transform: scale(0.97);
        filter: grayscale(0.9) blur(2px);
        opacity: 0.5;
    }
    80% {
        transform: scale(0.93);
        filter: grayscale(1) blur(4px);
        opacity: 0.3;
    }
    100% {
        transform: scale(0.85);
        filter: grayscale(1) blur(8px);
        opacity: 0;
    }
}

/* 系统震荡 */
@keyframes systemGlitch {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-1px, 0); }
    40% { transform: translate(1px, 0); }
    60% { transform: translate(0, -1px); }
    80% { transform: translate(0, 1px); }
}

.glitching {
    animation: systemGlitch 0.3s ease-in-out;
}

/* 私密笔记渐变色 */
#hacked-private-note1 .note-card-bg {
    background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
}

#hacked-private-note2 .note-card-bg {
    background: linear-gradient(135deg, #4facfe, #00f2fe, #43e97b);
}

#hacked-private-note3 .note-card-bg {
    background: linear-gradient(135deg, #fa709a, #fee140, #e8a6ff);
}
.time-machine-icon {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
    animation: pulse 2s infinite;
}

.time-machine-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(102, 126, 234, 0.6);
}

.time-machine-icon i {
    font-size: 48px;
    color: white;
    margin-bottom: 8px;
}

.time-machine-text {
    color: white;
    font-size: 16px;
    font-weight: 500;
}

/* 脉冲动画 */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(102, 126, 234, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
    }
}

/* 回忆提示 */
.recall-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 1002;
    text-align: center;
}

.recall-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.recall-text {
    font-size: 18px;
    color: #333;
    font-style: italic;
}
    </style>
</head>
/* --- 新增的投票和相关样式 --- */
.vote-container {
    margin: 24px 0; /* 在笔记内容区内，调整边距 */
    padding: 16px;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    background-color: #fafafa;
}

/* ▼▼▼ 修正後的投票标题样式 ▼▼▼ */
.vote-title {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    color: var(--dark-gray);
    padding: 12px;
    background: linear-gradient(to right, rgba(239, 83, 80, 0.08), rgba(66, 165, 245, 0.08));
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.03);
}
/* ▲▲▲ 修正结束 ▲▲▲ */
.vote-pk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
}

.vote-option {
    flex: 1;
    height: 100%;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

.vote-option-red {
    background-color: rgba(239, 83, 80, 0.1); /* 红方背景色 */
    color: #d32f2f;
}

.vote-option-blue {
    background-color: rgba(66, 165, 245, 0.1); /* 蓝方背景色 */
    color: #1976d2;
}

/* 投票后的样式 */
.vote-option.voted {
    cursor: not-allowed;
    filter: brightness(0.95);
}

.vote-percentage-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    opacity: 0.3;
    transition: width 0.5s ease-in-out;
}

.vote-option-red .vote-percentage-bar {
    background-color: #ef5350; /* 红方进度条颜色 */
}

.vote-option-blue .vote-percentage-bar {
    background-color: #42a5f5; /* 蓝方进度条颜色 */
}

.vote-text {
    position: relative;
    z-index: 1;
}

/* 评论区红队小图标 */
.red-team-badge {
    display: inline-block;
    background-color: #ff5c5c;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    margin-left: 6px;
    vertical-align: middle;
    font-weight: 500;
}

/* 关注提示框 */
.follow-prompt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.follow-prompt-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.follow-prompt-box {
    background: white;
    border-radius: 16px;
    padding: 24px;
    width: 85%;
    max-width: 320px;
    text-align: center;
    transform: scale(0.9);
    transition: all 0.3s ease;
}

.follow-prompt-overlay.visible .follow-prompt-box {
    transform: scale(1);
}

.follow-prompt-text {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--dark-gray);
}

.follow-prompt-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prompt-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.prompt-btn-confirm {
    background-color: var(--red);
    color: white;
}

.prompt-btn-ignore {
    background-color: #f0f0f0;
    color: var(--medium-gray);
}
/* ▼▼▼ 步骤4：在文件最底部添加这段新样式 ▼▼▼ */
.note-card.achievement-unlocked {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 0 0 5px rgba(255, 215, 0, 0.8);
    border: 2px solid gold;
    position: relative; /* 确保叠加层定位正确 */
}

.achievement-unlocked-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    background-color: gold;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    z-index: 5;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
/* ▲▲▲ 添加结束 ▲▲▲ */
.close-profile,
#close-profile,
#close-hacked-profile,
#deleted-profile-close {
    display: none !important;
}
/* 隐藏个人主页的收藏和赞过标签 */
.profile-tabs .profile-tab:nth-child(2),
.profile-tabs .profile-tab:nth-child(3) {
    display: none !important;
}
/* 离开小五书按钮样式 - 简洁版 */
.leave-button {
    margin-top: 40px;
    padding: 16px 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transition: all 0.5s ease;
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5);
    letter-spacing: 1px;
    display: none;
    overflow: hidden;
    position: relative;
}

/* 按钮出现动画 */
.leave-button.show {
    display: inline-block;
    animation: portalAppear 1.5s ease-out forwards;
}

/* 按钮的光环效果 */
.leave-button::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);
    border-radius: 50px;
    opacity: 0.6;
    z-index: -1;
    filter: blur(5px);
    animation: glowRotate 3s linear infinite;
}

/* 按钮内部的扫光效果 */
.leave-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: scanLight 2s ease-in-out infinite;
}

/* 扫光动画 */
@keyframes scanLight {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

/* 悬停时增强效果 */
.leave-button:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.7);
}

.leave-button:hover::before {
    opacity: 1;
}

/* 点击/触摸时的效果 */
.leave-button:active {
    transform: scale(0.98);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

/* 穿梭门出现动画 */
@keyframes portalAppear {
    0% {
        opacity: 0;
        transform: scale(0.3) rotateZ(180deg);
        filter: blur(10px);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.1) rotateZ(90deg);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateZ(0deg);
        filter: blur(0);
    }
}

/* 光环旋转动画 */
@keyframes glowRotate {
    0% {
        filter: blur(5px) hue-rotate(0deg);
    }
    100% {
        filter: blur(5px) hue-rotate(360deg);
    }
}

/* 点击时的穿梭效果 */
.leave-button.teleporting {
    animation: teleportOut 1s ease-in forwards;
}

@keyframes teleportOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.8;
        filter: brightness(2);
    }
    100% {
        transform: scale(0);
        opacity: 0;
        filter: brightness(5) blur(20px);
    }
}

/* 移动端优化 */
@media (max-width: 768px) {
    .leave-button {
        font-size: 16px;
        padding: 14px 36px;
    }
    
    .portal-particles {
        width: 250px;
        height: 250px;
    }
}
/* 隐藏momo的蓝色认证标志 */
.verified-badge {
    display: none !important;
}

/* 确保在所有相关位置都隐藏认证标志 */
.author-name .verified-badge,
.profile-name .verified-badge,
.comment-author .verified-badge {
    display: none !important;
}
/* 隐藏附近按钮 */
.tab:nth-child(3) {
    display: none !important;
}

/* 隐藏开发者重置按钮 */
.dev-reset-btn {
    display: none !important;
}
/* 确保所有提示框不阻挡点击 */
.achievement-notification,
.search-result-toast,
.unlock-toast,
.blocked-toast,
.wrong-toast,
.comment-success-toast,
.cannot-follow-toast {
    pointer-events: none;
}

/* 但保持内部按钮可点击 */
.achievement-notification button,
.search-result-toast button {
    pointer-events: auto;
}

/* 确保隐藏的元素不占据空间 */
[style*="display: none"] {
    pointer-events: none !important;
}
/* 隐藏右下角下载按钮 */
.download-container {
    display: none !important;
}
/* 隐藏所有页面的搜索图标，除了发现页 */
.search-container,
.search-icon {
    display: none !important;
}

/* 在发现页中显示搜索图标 */
#discover-page .search-container,
#discover-page .search-icon {
    display: block !important;
}