/* ==========================================================================
   🧱 基础骨架与全局盒模型加固 (全站公共底层)
   ========================================================================== */
body {
    background-color: #ffffff;
    margin: 0px;
}

/* 全量核心容器防爆仓，确保手机端不会产生横向死滑 */
.home-content, .title-bar, .event-board, .post-section, .confession-section, .post-card, .nav-bar, .nav-bar-item, .posts-container, .posts-main {
    box-sizing: border-box !important;
}

/* ==========================================================================
   💻 电脑大屏端：公共顶部状态栏基础样式 (PC View - Default)
   ========================================================================== */
.title-bar {
    display: flex;
    background-color: #ffffff; /* 🧼 清洗掉原本灰色的老旧定义 */
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin: 0px;
    padding: 0 24px;
    height: 74px; /* 完美对齐 70px Logo */
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 999;
}

.site-title {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

/* 💻 电脑端：包裹 ul 菜单 */
.nav-bar {
    list-style-type: none;
    margin: 0px 0px 0px 24px;
    padding: 0;
    display: flex;
    gap: 4px;
}

/* 💻 电脑端：单个菜单按钮 */
.nav-bar-item {
    font-size: 16px;
    padding: 8px 16px;
    border-radius: 12px;
    color: #475569;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.nav-bar-item:hover {
    background-color: #f1f5f9;
    color: #3b82f6;
}

.nav-bar-item.active {
    background-color: #eff6ff;
    color: #3b82f6;
    font-weight: 600;
}

/* 👥 顶栏登录状态用户区域 */
.user-area {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.user-not-login {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.95rem;
}

.login-link, .register-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 30px;
    transition: background 0.2s;
    white-space: nowrap;
}

.login-link:hover, .register-link:hover {
    background: #eff6ff;
}

.divider {
    color: #cbd5e1;
    font-weight: 300;
}

.user-logged-in {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-name {
    font-weight: 500;
    color: #1e293b;
}

.user-dropdown {
    position: relative;
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.dropdown-menu {
    position: absolute;
    top: 46px;
    right: 0;
    background: white;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    min-width: 130px;
    padding: 6px 0;
    display: none;
    z-index: 1000;
    border: 1px solid #e2e8f0;
}

.dropdown-menu.show { display: block; }
.dropdown-menu a { display: block; padding: 10px 16px; color: #1e293b; text-decoration: none; font-size: 0.9rem; }
.dropdown-menu a:hover { background: #f8fafc; }


/* ==========================================================================
   🏠 校园首页大厅专属板块样式
   ========================================================================== */
.home-content {
    max-width: 1400px;
    margin: 24px auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.event-board {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 24px;
    padding: 24px 28px;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.25);
    color: white;
}

.event-board h2 {
    margin: 0 0 18px 0;
    font-size: 1.6rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.event-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.4) transparent;
    -webkit-overflow-scrolling: touch;
}

.event-scroll::-webkit-scrollbar { height: 6px; }
.event-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.4); border-radius: 10px; }

.event-card {
    width: 280px;
    min-width: 260px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.event-card:hover { transform: translateY(-4px); }
.event-tag { display: inline-block; background: rgba(255, 215, 0, 0.9); color: #333; font-size: 0.75rem; font-weight: bold; padding: 4px 12px; border-radius: 30px; margin-bottom: 14px; }
.event-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; line-height: 1.4; }
.event-desc { font-size: 0.9rem; opacity: 0.9; margin-bottom: 16px; line-height: 1.5; }
.event-date { font-size: 0.8rem; display: flex; align-items: center; gap: 6px; opacity: 0.8; }

.content-two-columns {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.post-section {
    flex: 2;
    background: white;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 12px; }
.section-header h2 { margin: 0; font-size: 1.5rem; font-weight: 650; color: #1e293b; }
.new-post-btn { background: #3b82f6; color: white; border: none; padding: 10px 22px; border-radius: 40px; font-weight: 600; font-size: 0.9rem; cursor: pointer; white-space: nowrap; }
.new-post-btn:hover { background: #2563eb; }

.post-card { padding: 22px; border-bottom: 1px solid #f1f5f9; margin: 20px;}
.post-card:last-child { border-bottom: none; }
.post-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.post-avatar { width: 44px; height: 44px; background: linear-gradient(145deg, #a5b4fc, #818cf8); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 1.1rem; flex-shrink: 0; overflow: hidden; }
.post-author { font-weight: 650; color: #0f172a; margin-bottom: 2px; }
.post-time { font-size: 0.8rem; color: #64748b; }
.post-title { font-size: 1.2rem; font-weight: 650; margin-bottom: 8px; color: #0f172a; }
.post-content { color: #334155; line-height: 1.6; margin-bottom: 16px; word-break: break-word; }
.post-footer { display: flex; gap: 24px; }
.post-action { display: flex; align-items: center; gap: 6px; color: #64748b; font-size: 0.88rem; cursor: pointer; user-select: none; }
.post-action:hover { color: #3b82f6; }

.confession-section { flex: 1; background: white; border-radius: 24px; padding: 24px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; }
.confession-header { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; color: #ec4899; }
.confession-header h2 { margin: 0; font-size: 1.5rem; font-weight: 650; color: #1e293b; }

.confession-list { max-height: 520px; overflow-y: auto; padding-right: 6px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 18px; -webkit-overflow-scrolling: touch; }
.confession-list::-webkit-scrollbar { width: 5px; }
.confession-list::-webkit-scrollbar-thumb { background: #fbcfe8; border-radius: 10px; }

.confession-card { background: #fdf4ff; border-radius: 20px; padding: 18px; border-left: 5px solid #ec4899; }
.confession-text { font-size: 0.95rem; line-height: 1.6; color: #4a044e; margin-bottom: 10px; font-style: italic; white-space: pre-wrap; word-break: break-word; }
.confession-footer { display: flex; justify-content: space-between; font-size: 0.75rem; color: #a21caf; }
.add-confession-btn { background: #ec4899; color: white; border: none; padding: 14px; border-radius: 60px; font-weight: 600; font-size: 1rem; cursor: pointer; width: 100%; }
.add-confession-btn:hover { background: #db2777; }

.view-more-wrapper { text-align: center; margin-top: 20px; }
.view-more-btn { background: transparent; border: 2px solid #e2e8f0; color: #64748b; padding: 10px 24px; border-radius: 40px; font-size: 0.95rem; font-weight: 500; cursor: pointer; width: 100%; max-width: 200px; }
.view-more-btn:hover { border-color: #3b82f6; color: #3b82f6; background: rgba(59, 130, 246, 0.05); }

.dark .view-more-btn { border-color: #475569; color: #94a3b8; }
.dark .view-more-btn:hover { border-color: #60a5fa; color: #60a5fa; }

/* ==========================================================================
   📱 移动端自适应黑科技核心：沉底解耦，现场生成微信底栏 (max-width: 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* 1. 顶部外壳优化：变成手机利落款短状态栏 */
    .title-bar {
        height: 56px !important;
        padding: 0 14px !important;
        border-radius: 0 0 16px 16px !important;
    }
    
    /* 缩减手机端顶部 Logo 图标尺寸 */
    .title-bar img {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        margin-right: 8px !important;
    }
    
    .site-title {
        font-size: 1.15rem !important;
    }

    /* 🚨 2. 【核心蜕变】：将原先夹在顶部的 .nav-bar 强制抽走沉底，变身底部固定底栏！ */
    .title-bar .nav-bar {
        position: fixed !important;
        bottom: 0 !important;              /* 锁死在屏幕最底部 */
        top: auto !important;
        left: 0 !important;
        width: 100% !important;
        height: 60px !important;           /* 手机底栏黄金高度 */
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(12px) !important;
        box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.06) !important;
        z-index: 9999999 !important;       /* 置于全宇宙最表层 */
        display: flex !important;
        flex-direction: row !important;     /* 强行平铺 */
        justify-content: space-around !important;
        align-items: center !important;
        border-top: 1px solid #f1f5f9 !important;
    }

    /* 🚨 3. 单个菜单选项：改造成按钮盒 */
    .nav-bar-item {
        display: flex !important;
        flex-direction: column !important; /* 上图标下文字 */
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;                 /* 4个按钮百分之百等分手机屏宽 */
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        font-size: 10.5px !important;       /* 移动端小字号标签 */
        color: #64748b !important;
        background: transparent !important; /* 清空色块 */
        gap: 2px !important;
    }

    /* 🚨 4. 【动态幻化】：利用 CSS ::before 伪元素，现场变出微信大厂质感图标 */
    .nav-bar-item::before {
        font-size: 20px !important;
        font-weight: normal !important;
        display: inline-block !important;
        margin-bottom: 1px;
    }
    
    /* 注入 emoji 图标 */
    

    /* 🚨 5. 状态激活：只变颜色 */
    .nav-bar-item:hover {
        background: transparent !important;
        color: #64748b !important;
    }
    
    .nav-bar-item.active {
        color: #3b82f6 !important; /* 激活一秒亮蓝 */
        background: transparent !important;
        font-weight: 600 !important;
    }
    
    .nav-bar-item.active::before {
        transform: scale(1.08);
        transition: transform 0.2s;
    }

    /* 移动端主大厅信息流自适应调优 */
    .home-content { padding: 0 12px; gap: 20px; margin: 12px auto; }
    .event-board { padding: 18px; border-radius: 20px; }
    .event-board h2 { font-size: 1.3rem; margin-bottom: 12px; }
    .event-card { width: 240px; min-width: 230px; padding: 16px; border-radius: 16px; }
    .content-two-columns { flex-direction: column !important; gap: 20px; width: 100%; }
    .post-section, .confession-section { width: 100% !important; padding: 16px; border-radius: 20px; }
    .post-card { padding: 16px; }
    .post-avatar { width: 40px; height: 40px; border-radius: 50%; font-size: 1rem; }

    /* 解除首页双层滚动死锁 */
    .confession-list {
        max-height: none !important;
        overflow-y: visible !important;
        padding-right: 0;
        gap: 14px;
    }

    /* 🚨 6. 全站刚性底部缓冲区留白 */
    body {
        padding-bottom: 85px !important;
        padding-top: 0px !important;
    }
}

/* ==========================================================================
   🧼 终极斩蓝术：彻底根除用户头像所有状态下的隐形蓝色牛皮癣
   ========================================================================== */

/* 1. 强制锁死基础状态：不管浏览器怎么重绘，只要里面有 img 头像，外壳按钮必须绝对透明 */
/* ==========================================================================
   🧼 终极斩蓝+绝对正圆矫正术：绝杀左侧切边与椭圆变形
   ========================================================================== */
.user-avatar {
    width: 40px !important;       /* 刚性死锁物理宽度 */
    height: 40px !important;      /* 刚性死锁物理高度 */
    border-radius: 50% !important;/* 锁死 50% 正圆半角 */
    flex-shrink: 0 !important;    /* 刚性防抱死：拒绝被 Flex 弹性横向挤扁 */
    
    /* 🚨【核心物理矫正】：把按钮本身降级成一个强力双向居中的 Flex 容器！ */
    display: inline-flex !important;
    align-items: center !important;     /* 🪐 纵向绝对居中对齐 */
    justify-content: center !important;  /* 🪐 横向绝对居中对齐 */
    
    /* 🧼 强行清洗原生 Button 的一切越权默认内衬偏置 */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background: transparent !important;
    overflow: hidden !important;
    
    /* 📱 隐藏移动端高亮 */
    -webkit-tap-highlight-color: transparent !important;
}

/* 🚨 2. 强力约束内部图片：废除原先可能会引起形变的 display: block; */
.user-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    
    /* 🪐 配合外层 Flex，将图片的渲染锚点刚性死锁在中心位置，绝不允许偏移 */
    display: inline-block !important; 
    flex-shrink: 0 !important;
    
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background-color: transparent !important;
}

/* ==========================================================================
   🔤 纯文字首字降级容错机制 (无图状态)
   ========================================================================== */
.user-avatar:not(:has(img)) {
    background-color: #228be6 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 16px !important;
    /* 🪐 删掉原本恶心的 lineHeight: 40px，完全靠 inline-flex 的 center 自动弹力对齐，100% 不偏心 */
    line-height: 1 !important; 
}

/* Final mobile bottom navigation override */
@media screen and (max-width: 900px) {
    .title-bar {
        position: sticky !important;
        top: 0 !important;
        z-index: 3000 !important;
        overflow: visible !important;
    }

    .title-bar .nav-bar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 64px !important;
        margin: 0 !important;
        padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-around !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border-top: 1px solid var(--border) !important;
        box-shadow: 0 -10px 28px rgba(17, 24, 39, 0.08) !important;
        backdrop-filter: blur(18px) !important;
        z-index: 1200 !important;
    }

    :root[data-theme="dark"] .title-bar .nav-bar {
        background: rgba(23, 26, 33, 0.92) !important;
        box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.3) !important;
    }

    .title-bar .nav-bar-item {
        flex: 1 1 0 !important;
        height: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        background: transparent !important;
        color: var(--muted) !important;
        font-size: 10.5px !important;
    }

    .title-bar .nav-bar-item.active {
        color: var(--accent) !important;
        font-weight: 700 !important;
    }

    .title-bar .nav-bar-item::before {
        display: block !important;
        font-size: 20px !important;
        line-height: 1 !important;
    }

    body {
        padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    }
}

.user-avatar:not(:has(img)):hover {
    background-color: #1c7ed6 !important;
}

/* 2. 拦截所有鼠标/手指交互伪类：防止点击、聚焦、悬停时，浏览器自作聪明染上蓝色 */
.user-avatar:hover,
.user-avatar:focus,
.user-avatar:active,
.user-avatar:focus-visible,
.user-avatar:focus-within {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 3. 刚性刚需：如果头像按钮内部包含自定义的 img 图片，确保图片绝对刚性铺满，不给底层留任何 1 像素的视觉缝隙 */
.user-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    background-color: transparent !important;
    border: none !important;
}

/* ==========================================================================
   🔤 降级容错机制：只有当按钮“不包含图片”（即纯文本首字模式）时，才允许亮蓝复活
   ========================================================================== */
/* 💡 巧妙利用 CSS 的 :empty 伪类和 :not 选择器：如果按钮里面没有 img 标签（纯文本），才恢复蓝色背景 */
.user-avatar:not(:has(img)) {
    background-color: #228be6 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================================
   Minimal theme layer
   ========================================================================== */
:root {
    color-scheme: light;
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-2: #f2f4f7;
    --surface-raised: #ffffff;
    --text: #111827;
    --text-soft: #374151;
    --muted: #6b7280;
    --border: #e5e7eb;
    --border-strong: #d1d5db;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-soft: #eef4ff;
    --pink: #db2777;
    --pink-soft: #fdf2f8;
    --danger: #dc2626;
    --success: #059669;
    --warning: #d97706;
    --shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
    --shadow-soft: 0 1px 2px rgba(17, 24, 39, 0.05);
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f1115;
    --surface: #171a21;
    --surface-2: #20242c;
    --surface-raised: #1c2028;
    --text: #f3f4f6;
    --text-soft: #d1d5db;
    --muted: #9ca3af;
    --border: #2b3039;
    --border-strong: #3a414d;
    --accent: #60a5fa;
    --accent-hover: #93c5fd;
    --accent-soft: rgba(96, 165, 250, 0.14);
    --pink: #f472b6;
    --pink-soft: rgba(244, 114, 182, 0.12);
    --danger: #f87171;
    --success: #34d399;
    --warning: #fbbf24;
    --shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.28);
}

* {
    letter-spacing: 0;
}

html {
    background: var(--bg);
}

body {
    background: var(--bg) !important;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.title-bar {
    height: 68px;
    padding: 0 22px;
    background: rgba(255, 255, 255, 0.86);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: blur(18px);
    position: sticky;
    top: 0;
}

:root[data-theme="dark"] .title-bar {
    background: rgba(23, 26, 33, 0.82);
}

.title-bar img {
    border-radius: var(--radius-md);
}

.site-title {
    color: var(--text);
    font-family: inherit;
    font-size: 1.18rem;
    font-weight: 700;
}

.nav-bar {
    gap: 2px;
}

.nav-bar-item {
    color: var(--muted);
    border-radius: var(--radius-md);
    font-size: 0.94rem;
    padding: 8px 12px;
}

.nav-bar-item:hover {
    background: var(--surface-2);
    color: var(--text);
}

.nav-bar-item.active {
    background: var(--accent-soft);
    color: var(--accent);
}

.user-area {
    gap: 10px;
    margin-left: 0;
}

.theme-toggle {
    width: 36px;
    height: 36px;
    margin-left: auto;
    margin-right: 10px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    box-shadow: var(--shadow-soft);
    transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.theme-toggle:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.theme-toggle-floating {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 1000;
    margin: 0;
}

.theme-toggle:focus-visible,
.nav-bar-item:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.login-link,
.register-link,
.dropdown-menu a {
    color: var(--text);
}

.login-link:hover,
.register-link:hover,
.dropdown-menu a:hover {
    background: var(--surface-2);
    color: var(--accent);
}

.divider,
.user-name,
.post-time,
.post-action,
.confession-footer,
.event-date {
    color: var(--muted);
}

.dropdown-menu {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.home-content {
    max-width: 1180px;
    gap: 24px;
}

.event-board,
.post-section,
.confession-section {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
}

.event-board {
    padding: 22px 24px;
}

.event-board h2,
.section-header h2,
.confession-header h2,
.post-author,
.post-title {
    color: var(--text);
}

.event-board h2 a {
    color: var(--accent) !important;
}

.event-scroll {
    scrollbar-color: var(--border-strong) transparent;
}

.event-scroll::-webkit-scrollbar-thumb {
    background: var(--border-strong);
}

.event-card,
.post-card,
.confession-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: none;
}

.event-card {
    backdrop-filter: none;
}

.event-card:hover,
.post-card:hover,
.confession-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.event-tag {
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 999px;
}

.event-title,
.event-desc,
.post-content,
.confession-text {
    color: var(--text-soft);
}

.confession-card {
    border-left: 3px solid var(--pink);
}

.confession-text {
    font-style: normal;
}

.new-post-btn,
.add-confession-btn,
.submit-btn,
.publish-btn,
.login-btn,
.save-btn,
.back-to-top,
.page-btn.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}

.new-post-btn:hover,
.add-confession-btn:hover,
.submit-btn:hover,
.publish-btn:hover,
.login-btn:hover,
.save-btn:hover,
.back-to-top:hover {
    background: var(--accent-hover) !important;
    transform: none;
}

.view-more-btn,
.cancel-btn,
.page-btn,
.post-action-btn,
.sort-btn,
.join-board-btn,
.discover-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-soft);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.view-more-btn:hover,
.cancel-btn:hover,
.page-btn:hover:not(:disabled),
.post-action-btn:hover,
.sort-btn:hover,
.join-board-btn:hover,
.discover-btn:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--accent);
}

input,
textarea,
select {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
}

.modal-overlay {
    background: rgba(15, 17, 21, 0.52);
    backdrop-filter: blur(10px);
}

.modal-container {
    background: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

.modal-header {
    border-bottom-color: var(--border);
}

.modal-header h3,
.form-group label {
    color: var(--text);
}

.cache-notice-bar {
    border-radius: var(--radius-md);
    box-shadow: none;
}

.cache-notice-bar.waiting {
    background: rgba(217, 119, 6, 0.12);
    border-color: rgba(217, 119, 6, 0.28);
    color: var(--warning);
}

.cache-notice-bar.success {
    background: rgba(5, 150, 105, 0.12);
    border-color: rgba(5, 150, 105, 0.28);
    color: var(--success);
}

@media screen and (max-width: 768px) {
    .title-bar {
        height: 58px !important;
        border-bottom: 1px solid var(--border) !important;
        border-radius: 0 !important;
    }

    .title-bar .nav-bar {
        height: 64px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border-top: 1px solid var(--border) !important;
        box-shadow: 0 -10px 28px rgba(17, 24, 39, 0.08) !important;
        backdrop-filter: blur(18px) !important;
    }

    :root[data-theme="dark"] .title-bar .nav-bar {
        background: rgba(23, 26, 33, 0.9) !important;
        box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.3) !important;
    }

    .nav-bar-item {
        color: var(--muted) !important;
        font-size: 10.5px !important;
    }

    .nav-bar-item.active {
        color: var(--accent) !important;
    }

    .nav-bar-item:nth-child(5)::before {
        content: "?";
    }

    .theme-toggle {
        width: 34px;
        height: 34px;
        margin-left: auto;
        margin-right: 8px;
    }

    .home-content {
        gap: 16px;
        margin: 14px auto;
        padding: 0 14px;
    }
}

/* Last-resort mobile nav placement */
@media screen and (max-width: 900px) {
    .title-bar .nav-bar {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        width: 100% !important;
        height: 64px !important;
        margin: 0 !important;
        z-index: 1200 !important;
    }
}

.user-avatar:not(:has(img)):hover {
    background-color: #1c7ed6 !important; /* 纯文字头像悬停时变成略深一点的优雅海蓝色 */
}

/* Bottom nav after JS moves it out of .title-bar */
@media screen and (max-width: 900px) {
    .nav-bar.mobile-bottom-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 64px !important;
        margin: 0 !important;
        padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-around !important;
        list-style: none !important;
        background: rgba(255, 255, 255, 0.94) !important;
        border-top: 1px solid var(--border) !important;
        box-shadow: 0 -10px 28px rgba(17, 24, 39, 0.08) !important;
        backdrop-filter: blur(18px) !important;
        z-index: 1200 !important;
    }

    :root[data-theme="dark"] .nav-bar.mobile-bottom-nav {
        background: rgba(23, 26, 33, 0.94) !important;
        box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.3) !important;
    }

    .nav-bar.mobile-bottom-nav .nav-bar-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        background: transparent !important;
        color: var(--muted) !important;
        font-size: 10.5px !important;
    }

    .nav-bar.mobile-bottom-nav .nav-bar-item.active {
        color: var(--accent) !important;
        font-weight: 700 !important;
    }

    .nav-bar.mobile-bottom-nav .nav-bar-item::before {
        display: block !important;
        font-size: 20px !important;
        line-height: 1 !important;
    }

    /* 1. 首页 (Home Icon) */
    .nav-bar-item:nth-child(1)::before { 
        content: url("data:image/svg+xml,%3Csvg fill='%237d61f9' width='20px' height='20px' viewBox='-2 -2 24 24' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMin'%3E%3Cpath d='M18 18V7.132l-8-4.8-8 4.8V18h4v-2.75a4 4 0 1 1 8 0V18h4zm-6 2v-4.75a2 2 0 1 0-4 0V20H2a2 2 0 0 1-2-2V7.132a2 2 0 0 1 .971-1.715l8-4.8a2 2 0 0 1 2.058 0l8 4.8A2 2 0 0 1 20 7.132V18a2 2 0 0 1-2 2h-6z'/%3E%3C/svg%3E"); 
    }

    /* 2. 帖子板 (Chat/Discussion Icon) */
    .nav-bar-item:nth-child(2)::before { 
        content: url("data:image/svg+xml,%3Csvg width='20px' height='20px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-4.586l-2.707 2.707a1 1 0 0 1-1.414 0L8.586 19H4a2 2 0 0 1-2-2V6zm18 0H4v11h5a1 1 0 0 1 .707.293L12 19.586l2.293-2.293A1 1 0 0 1 15 17h5V6zM6 9.5a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1zm0 4a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1z' fill='%237d61f9'/%3E%3C/svg%3E"); 
    }

    /* 3. 大事记 (Calendar/Events Icon) */
    .nav-bar-item:nth-child(3)::before { 
        content: url("data:image/svg+xml,%3Csvg fill='%237d61f9' width='20px' height='20px' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,14a1,1,0,1,0-1-1A1,1,0,0,0,12,14Zm5,0a1,1,0,1,0-1-1A1,1,0,0,0,17,14Zm-5,4a1,1,0,1,0-1-1A1,1,0,0,0,12,18Zm5,0a1,1,0,1,0-1-1A1,1,0,0,0,17,18ZM7,14a1,1,0,1,0-1-1A1,1,0,0,0,7,14ZM19,4H18V3a1,1,0,0,0-2,0V4H8V3A1,1,0,0,0,6,3V4H5A3,3,0,0,0,2,7V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V7A3,3,0,0,0,19,4Zm1,15a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V10H20ZM20,8H4V7A1,1,0,0,1,5,6H19a1,1,0,0,1,1,1ZM7,18a1,1,0,1,0-1-1A1,1,0,0,0,7,18Z'/%3E%3C/svg%3E"); 
    }

    /* 4. 表白墙 (Heart Icon) */
    .nav-bar-item:nth-child(4)::before { 
        content: url("data:image/svg+xml,%3Csvg fill='%237d61f9' width='20px' height='20px' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5,4.609A5.811,5.811,0,0,0,16,2.5a5.75,5.75,0,0,0-4,1.455A5.75,5.75,0,0,0,8,2.5,5.811,5.811,0,0,0,3.5,4.609c-.953,1.156-1.95,3.249-1.289,6.66,1.055,5.447,8.966,9.917,9.3,10.1a1,1,0,0,0,.974,0c.336-.187,8.247-4.657,9.3-10.1C22.45,7.858,21.453,5.765,20.5,4.609Zm-.674,6.28C19.08,14.74,13.658,18.322,12,19.34c-2.336-1.41-7.142-4.95-7.821-8.451-.513-2.646.189-4.183.869-5.007A3.819,3.819,0,0,1,8,4.5a3.493,3.493,0,0,1,3.115,1.469,1.005,1.005,0,0,0,1.76.011A3.489,3.489,0,0,1,16,4.5a3.819,3.819,0,0,1,2.959,1.382C19.637,6.706,20.339,8.243,19.826,10.889Z'/%3E%3C/svg%3E"); 
    }

    /* 注入问题/校验项的全新深紫色图标 */
    .nav-bar-item:nth-child(5)::before { 
        content: url("data:image/svg+xml,%3Csvg width='20px' height='20px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17H12.01M12 14C12.8906 12.0938 15 12.2344 15 10C15 8.5 14 7 12 7C10.4521 7 9.50325 7.89844 9.15332 9M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z' stroke='%237d61f9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); 
    }
}