/* ============================================
   MO知识论坛 · 公共样式 (视觉层次优化版)
   ============================================ */

/* --- 基础重置 --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Noto Serif SC', serif;
    /* 降低背景亮度，增加纸张温度感，减少屏幕刺眼感 */
    background: #EFE9DF; 
    color: #1A1714;
    overflow-x: hidden;
}

/* --- 阅读进度条 --- */
#progressBar {
    position: fixed; top: 0; left: 0; height: 2px; z-index: 9999;
    background: linear-gradient(90deg, #C43030, #C43030 60%, #2B5A3F);
    width: 0%; transition: width 0.1s linear;
    box-shadow: 0 1px 4px rgba(196,48,48,0.4); /* 增加一点光感 */
}

/* --- 自定义滚动条 --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CFC6B8; border-radius: 3px; } /* 颜色加深 */
::-webkit-scrollbar-thumb:hover { background: #8C857A; }

/* --- 印章组件 --- */
.stamp {
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #C43030; color: #C43030;
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    padding: 2px 6px; transform: rotate(-4deg);
    position: relative; line-height: 1;
    background: rgba(255, 253, 249, 0.6); /* 印章带点半透明底 */
}
.stamp::before {
    content: ''; position: absolute; inset: -1px;
    border: 1px solid rgba(196,48,48,0.3);
}
.stamp-square {
    width: 42px; height: 42px; border: 2.5px solid #C43030;
    font-size: 12px; font-weight: 900; letter-spacing: 0;
    transform: rotate(-6deg); position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    background: #EFE9DF; /* 印章底色跟随背景 */
}
.stamp-square::after {
    content: ''; position: absolute; inset: 2px;
    border: 1px solid rgba(196,48,48,0.4);
}

/* --- 交互效果 --- */
.edit-line { position: relative; }
.edit-line::after {
    content: ''; position: absolute; left: 0; bottom: -2px;
    width: 100%; height: 1px; background: #C43030;
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s ease;
}
.edit-line:hover::after { transform: scaleX(1); }

.card-hover {
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease;
    /* 给卡片加一个默认的轻微阴影，建立层级 */
    box-shadow: 0 1px 3px rgba(26,23,20,0.04);
}
.card-hover:hover {
    transform: translateY(-4px);
    /* 加深悬停阴影，让卡片“浮”起来 */
    box-shadow: 0 12px 32px rgba(75, 53, 33, 0.12);
}

/* --- 横向滚动行 --- */
.scroll-row {
    display: flex; gap: 24px; overflow-x: auto; padding-bottom: 16px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.scroll-row::-webkit-scrollbar { height: 3px; }
.scroll-row::-webkit-scrollbar-thumb { background: #CFC6B8; border-radius: 2px; }
.scroll-row > * { scroll-snap-align: start; flex-shrink: 0; }

/* --- 滚动揭示动画 --- */
.reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* --- 标签/药丸 --- */
.tag-pill {
    padding: 3px 10px; border: 1px solid #CFC6B8; border-radius: 2px; /* 边框加深 */
    font-size: 12px; color: #6B5D4F; cursor: pointer; transition: all 0.25s ease;
    background: rgba(255, 253, 249, 0.4);
}
.tag-pill:hover, .tag-pill.active {
    border-color: #C43030; color: #C43030; background: rgba(196,48,48,0.08);
}
.tags-scroll {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}
.tags-scroll::-webkit-scrollbar { display: none; }

/* --- 折角卡片 --- */
.fold-corner { position: relative; overflow: hidden; }
.fold-corner::before {
    content: ''; position: absolute; top: 0; right: 0;
    width: 0; height: 0; border-style: solid;
    border-width: 0 28px 28px 0;
    border-color: transparent #EFE9DF transparent transparent; /* 跟随大背景色 */
    z-index: 2; transition: border-width 0.3s ease;
    filter: drop-shadow(-2px 2px 1px rgba(0,0,0,0.05));
}
.fold-corner:hover::before { border-width: 0 36px 36px 0; }

/* --- 搜索展开 --- */
.search-expand {
    max-width: 0; opacity: 0; overflow: hidden;
    transition: max-width 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
    background: #EFE9DF; /* 搜索框底色用背景色，融入导航 */
}
.search-expand.open { max-width: 220px; opacity: 1; }

/* --- 弹窗遮罩 --- */
.modal-mask {
    position: fixed; inset: 0; background: rgba(26,23,20,0.6); z-index: 100; /* 遮罩加深 */
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    backdrop-filter: blur(6px);
}
.modal-mask.show { opacity: 1; pointer-events: auto; }
.modal-mask .modal-box {
    transform: translateY(20px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.modal-mask.show .modal-box { transform: translateY(0) scale(1); }

/* --- 下拉菜单 --- */
.dropdown {
    position: absolute; top: 100%; right: 0; margin-top: 8px;
    background: #FAF6EE; border: 1px solid #D3CABD; border-radius: 4px; /* 卡片底色+深边框 */
    box-shadow: 0 12px 40px rgba(26,23,20,0.15); min-width: 280px;
    opacity: 0; pointer-events: none; transform: translateY(-6px);
    transition: all 0.25s ease; z-index: 50;
}
.dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* --- Toast 提示 --- */
.toast {
    position: fixed; bottom: 100px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1A1714; color: #FAF6EE; /* 文字色跟随卡片色 */
    padding: 12px 28px; border-radius: 3px; font-size: 14px;
    z-index: 200; opacity: 0; pointer-events: none;
    transition: all 0.35s ease; white-space: nowrap;
    font-family: 'Noto Serif SC', serif;
    box-shadow: 0 8px 24px rgba(26,23,20,0.3);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- 头像环 --- */
.avatar-ring {
    padding: 3px; border: 2px solid #CFC6B8; border-radius: 50%; /* 边框加深 */
    transition: border-color 0.3s ease;
    background: #FAF6EE;
}
.avatar-ring:hover { border-color: #C43030; }

/* --- 批注/引用 --- */
.margin-note {
    position: relative; padding-left: 16px;
    border-left: 2px solid #C43030;
    font-size: 13px; color: #6B5D4F; line-height: 1.7; /* 文字颜色加深 */
}
.reply-preview {
    background: rgba(245,240,234,0.8); border-left: 2px solid #CFC6B8;
    padding: 8px 12px; margin-top: 8px; border-radius: 0 3px 3px 0;
}

/* --- 返回顶部 --- */
#backToTop {
    position: fixed; bottom: 90px; right: 24px; z-index: 60;
    width: 44px; height: 44px; border-radius: 50%;
    background: #1A1714; color: #FAF6EE; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: all 0.35s ease; box-shadow: 0 4px 20px rgba(26,23,20,0.3);
}
#backToTop.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#backToTop:hover { background: #C43030; transform: translateY(-2px); }

/* --- 导航高亮 --- */
.nav-link.active { color: #1A1714 !important; font-weight: 600 !important; }
.nav-link.active::after { transform: scaleX(1); }
.mobile-menu-link.active { color: #1A1714 !important; font-weight: 600 !important; background: rgba(255, 253, 249, 0.6); }

/* --- 移动端底栏 --- */
.mobile-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    background: rgba(250, 246, 238, 0.92); /* 暖色毛玻璃 */
    backdrop-filter: blur(16px) saturate(1.4);
    border-top: 1px solid rgba(211, 202, 189, 0.6);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: none;
}
.mobile-nav-inner {
    display: flex; align-items: flex-end; justify-content: space-around;
    height: 56px; max-width: 500px; margin: 0 auto; position: relative;
}
.mobile-nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 10px; color: #6B5D4F; cursor: pointer; /* 图标文字颜色加深 */
    transition: color 0.2s ease; padding: 4px 0;
    -webkit-tap-highlight-color: transparent; text-decoration: none; flex: 1;
}
.mobile-nav-item i { font-size: 18px; transition: transform 0.2s ease; }
.mobile-nav-item.active { color: #C43030; }
.mobile-nav-item.active i { transform: scale(1.1); }

.mobile-nav-publish {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 10px; color: #6B5D4F; cursor: pointer;
    -webkit-tap-highlight-color: transparent; text-decoration: none;
    flex: 1; position: relative;
}
.mobile-nav-publish-circle {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, #C43030, #d94444);
    color: #FAF6EE; display: flex; align-items: center; justify-content: center;
    margin-top: -22px; box-shadow: 0 6px 16px rgba(196,48,48,0.4);
    transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
    position: relative; z-index: 2;
}
.mobile-nav-publish-circle i { font-size: 18px; }
.mobile-nav-publish:active .mobile-nav-publish-circle { transform: scale(0.92); }

/* --- 移动端侧滑菜单 --- */
.mobile-menu-overlay {
    position: fixed; inset: 0; z-index: 95;
    background: rgba(26,23,20,0.5); backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.mobile-menu-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-menu-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 96;
    width: 280px; max-width: 80vw; background: #FAF6EE; /* 暖色卡片底 */
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
    display: flex; flex-direction: column;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
}
.mobile-menu-panel.open { transform: translateX(0); }

/* --- Hero背景装饰 --- */
.hero-bg-pattern { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-bg-pattern::before {
    content: ''; position: absolute; width: 400px; height: 400px;
    border: 1px solid rgba(211, 202, 189, 0.4); border-radius: 50%; /* 装饰线加深 */
    top: -100px; right: -100px;
}
.hero-bg-pattern::after {
    content: ''; position: absolute; width: 200px; height: 200px;
    border: 1px solid rgba(196,48,48,0.1); border-radius: 50%;
    bottom: -40px; left: 10%;
}

/* --- 登录/注册弹窗 --- */
#auth-modal {
    opacity: 0; visibility: hidden; transition: all 0.3s ease;
    backdrop-filter: blur(6px);
}
#auth-modal.active { opacity: 1; visibility: visible; }
#auth-modal .modal-box {
    transform: scale(0.95) translateY(20px);
    transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
    background: #FAF6EE; /* 弹窗底色调整 */
}
#auth-modal.active .modal-box { transform: scale(1) translateY(0); }

.auth-tab {
    flex: 1; padding: 10px 0; text-align: center;
    font-size: 13px; font-weight: 600; cursor: pointer;
    border-radius: 4px; transition: all 0.25s ease;
    color: #6B5D4F; letter-spacing: 1px;
}
.auth-tab.active { background: #1A1714; color: #FAF6EE; }

.auth-input {
    width: 100%; padding: 12px 16px; border: 1px solid #D3CABD; /* 边框加深 */
    border-radius: 3px; font-size: 13px; outline: none;
    background: #EFE9DF; font-family: 'Noto Serif SC', serif; /* 输入框底色用大背景色，形成内嵌感 */
    transition: border-color 0.25s ease, background-color 0.25s ease;
}
.auth-input:focus { border-color: #C43030; background: #FAF6EE; }
.auth-input::placeholder { color: #8C857A; opacity: 0.6; }

.auth-btn {
    width: 100%; padding: 12px 0; font-weight: 700; letter-spacing: 2px;
    border-radius: 3px; cursor: pointer; border: none;
    font-family: 'Noto Serif SC', serif; transition: all 0.25s ease; font-size: 14px;
}
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26,23,20,0.2); }
.auth-btn:active { transform: translateY(0); }

/* --- 客服面板 --- */
.kefu-panel {
    position: fixed; right: 88px; bottom: 32px; z-index: 79;
    width: 320px; max-width: calc(100vw - 120px);
    opacity: 0; visibility: hidden;
    transform: translateX(12px) scale(0.95); transform-origin: bottom right;
    transition: all 0.35s cubic-bezier(0.22,1,0.36,1); pointer-events: none;
}
.kefu-panel.open { opacity: 1; visibility: visible; transform: translateX(0) scale(1); pointer-events: auto; }
.kefu-card {
    background: rgba(250, 246, 238, 0.98); backdrop-filter: blur(20px);
    border-radius: 6px; box-shadow: 0 16px 48px rgba(26,23,20,0.18); /* 阴影加深 */
    border: 1px solid #D3CABD; overflow: hidden;
}
.kefu-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 18px; cursor: pointer; transition: all 0.2s ease;
}
.kefu-item:hover { background: #EFE9DF; }
.kefu-icon-wrap {
    width: 40px; height: 40px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 18px;
}

/* --- 悬浮按钮组 --- */
.fab-group {
    position: fixed; right: 24px; bottom: 32px; z-index: 80;
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 10px; pointer-events: none;
}
.fab-btn {
    pointer-events: auto; width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: none; outline: none;
    box-shadow: 0 6px 20px rgba(26,23,20,0.2);
    transition: all 0.3s cubic-bezier(0.22,1,0.36,1); position: relative;
}
.fab-btn:hover { transform: translateY(-2px) scale(1.08); }

#fab-top {
    background: rgba(250, 246, 238, 0.92); backdrop-filter: blur(12px);
    color: #6B5D4F; opacity: 0; visibility: hidden;
    transform: translateY(16px) scale(0.8);
    border: 1px solid rgba(211, 202, 189, 0.4);
}
#fab-top.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
#fab-top:hover { background: #FAF6EE; color: #C43030; }
#fab-kefu { background: #1A1714; color: #FAF6EE; }
#fab-kefu:hover { background: #C43030; }
.kefu-badge {
    position: absolute; top: -2px; right: -2px;
    width: 12px; height: 12px; background: #C43030;
    border-radius: 50%; border: 2px solid #FAF6EE;
}

/* --- 关键帧动画 --- */
@keyframes heartPop {
    0% { transform: scale(1); }
    30% { transform: scale(1.35); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.heart-pop { animation: heartPop 0.4s ease; }

@keyframes floatUp {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-40px) scale(0.7); }
}
.float-num {
    position: absolute; color: #C43030; font-size: 13px; font-weight: 700;
    pointer-events: none; animation: floatUp 0.7s ease forwards;
}

/* --- 无障碍：减少动效 --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- 响应式：平板及以下 --- */
@media (max-width: 768px) {
    .hero-title, .hero-title span { font-size: 2.8rem !important; }
    .mobile-nav { display: block; }
    body { padding-bottom: 56px; }
    #backToTop { bottom: 76px; right: 16px; width: 40px; height: 40px; }
    .toast { bottom: 80px; font-size: 13px; padding: 10px 20px; }
    .search-expand.open { max-width: 160px; }
    .dropdown { min-width: 260px; right: -40px; }
    .fab-group { right: 16px; bottom: 76px; }
    .kefu-panel {
        right: 0; bottom: 0; width: 100vw; max-width: 100vw;
        border-radius: 6px 6px 0 0;
        transform: translateY(100%); transform-origin: bottom center;
    }
    .kefu-panel.open { transform: translateY(0); }
}

/* --- 响应式：小屏手机 --- */
@media (max-width: 480px) {
    .hero-title, .hero-title span { font-size: 2.2rem !important; }
}