/* gallery.css */

/* --- [SECTION 1] 根变量与基础设定 --- */
/* 定义了整个页面的“赛博科技”主题色彩、字体和样式 */
:root {
    --font-main: 'Noto Sans SC', sans-serif;
    --font-display: 'Noto Sans SC', sans-serif;
    
    --color-bg: #0D1117;
    --color-surface: #161B22;
    --color-primary: #58a6ff;
    --color-secondary: #a371f7;
    --color-border: rgba(88, 166, 255, 0.2);
    
    --color-text-primary: #c9d1d9;
    --color-text-secondary: #8b949e;
    --color-text-heading: #ffffff;

    --color-gradient-dark: linear-gradient(135deg, #232526, #4a2c4b);
    --color-gradient-dark-hover: linear-gradient(135deg, #2c2e30, #6a3b6d);
    --color-accent-purple: #9370DB;  /* 中等紫色 */
    --color-accent-purple-light: rgba(147, 112, 219, 0.3);  /* 透明紫色 */
    --shadow-purple-glow: 0 4px 15px rgba(147, 112, 219, 0.4);

    --shadow-glow-soft: 0 0 15px rgba(88, 166, 255, 0.15);
    --shadow-glow-medium: 0 0 25px rgba(88, 166, 255, 0.25);
    --shadow-glow-strong: 0 0 40px rgba(88, 166, 255, 0.35);
    
    --border-radius-main: 12px;
    --border-radius-small: 8px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    overflow-x: hidden;
    background-image: 
        linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    background-attachment: fixed;
} 

/* --- [SECTION 1.5] 性能优化样式 --- */

/* GPU加速优化 */
.inspiration-wall {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.work-card {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 懒加载背景图占位 */
.work-card.lazy-bg:not([style*="background-image"]) {
    background-color: var(--color-surface);
}

/* 滚动时性能优化 */
body.is-scrolling * {
    pointer-events: none !important;
}

body.is-scrolling .work-card {
    will-change: auto !important;
}


/* --- [新增] 全局滚动条美化 --- */

/* 针对 Webkit 浏览器 (Chrome, Edge, Safari) */
html::-webkit-scrollbar {
    width: 8px;
    background-color: var(--color-bg); /* 给轨道一个背景色 */
}

html::-webkit-scrollbar-track {
    background-color: transparent; /* 轨道本身透明 */
}

html::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: var(--border-radius-small);
    border: 2px solid transparent;
    background-clip: content-box;
    transition: all 0.2s ease-in-out;
}

html::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* 针对 Firefox 浏览器 */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(88, 166, 255, 0.4) var(--color-bg);
}

/* --- [SECTION 2] 页面加载动画 --- */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.8s ease;
}

#page-loader.fade-out {
    opacity: 0;
    pointer-events: none;
}

.magic-circle {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 25px;
}

.magic-circle .ring {
    position: absolute;
    width: 100%; 
    height: 100%;
    border-radius: 50%;
    border: 3px solid var(--color-border);
    animation: pulse-ring 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.magic-circle .star, .magic-circle .center-glow {
    display: none;
}

.magic-circle::before {
    content: '';
    position: absolute;
    width: 100%; 
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--color-primary);
    animation: spin 1.5s linear infinite;
}

.loader-text {
    font-family: var(--font-display);
    color: var(--color-primary);
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* --- [SECTION 3] 导航栏 (顶部与侧边) --- */
.top-navbar {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px;
    z-index: 1000;
    background: rgba(13, 17, 23, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
}

.navbar-hamburger {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--border-radius-small);
    transition: background-color 0.3s ease;
    color: var(--color-text-primary);
}

.navbar-hamburger:hover { 
    background-color: rgba(88, 166, 255, 0.1); 
}

.navbar-hamburger i { 
    color: var(--color-primary); 
    font-size: 1.2rem; 
}

.navbar-search {
    position: relative;
}

.navbar-search .search-input {
    background: rgba(88, 166, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-small);
    padding: 9px 45px 9px 20px;
    font-size: 0.95rem;
    color: var(--color-text-primary);
    outline: none;
    width: 100%; 
    max-width: 400px;
    transition: all 0.3s ease;
}

.navbar-search .search-input::placeholder { color: var(--color-text-secondary); }

.navbar-search .search-input:focus {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 10px rgba(88, 166, 255, 0.2);
}

.navbar-search .search-btn {
    background: transparent; 
    border: none; 
    color: var(--color-primary);
    position: absolute; 
    right: 15px; 
    top: 50%; 
    transform: translateY(-50%);
    font-size: 1rem; 
    cursor: pointer;
}

.navbar-home-btn {
    width: 42px; 
    height: 42px;
    border-radius: var(--border-radius-small);
    display: flex; 
    justify-content: center; 
    align-items: center;
    background-color: rgba(88, 166, 255, 0.1);
    color: var(--color-primary);
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid var(--color-border);
}

.navbar-home-btn:hover {
    transform: scale(1.05);
    background-color: rgba(88, 166, 255, 0.2);
    box-shadow: var(--shadow-glow-soft);
}

.side-nav {
    position: fixed; 
    top: 0; 
    left: -280px;
    width: 280px; 
    height: 100vh;
    background: rgba(13, 17, 23, 0.9);
    backdrop-filter: blur(15px);
    z-index: 1100;
    box-shadow: var(--shadow-glow-strong);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; 
    flex-direction: column;
    border-right: 1px solid var(--color-border);
}

.side-nav.active { 
    left: 0;
}

.nav-header { 
    padding: 20px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    border-bottom: 1px solid var(--color-border); 
}

.nav-header .nav-title { 
    font-family: var(--font-display); 
    color: var(--color-text-heading); 
    font-size: 1.5rem; 
    font-weight: 700; 
}

.close-nav { 
    background: transparent; 
    border: none; 
    color: var(--color-text-secondary); 
    font-size: 1.2rem; 
    cursor: pointer; 
    transition: color 0.3s ease; 
}

.close-nav:hover { 
    color: var(--color-primary); 
}

.side-nav .nav-content {
    padding: 10px; /* 稍微减少一点内边距，让分组更清晰 */
    flex: 1; 
    overflow-y: auto;
    display: flex; /* <-- 关键：设置为Flex */
    flex-direction: column; /* <-- 关键：垂直排列 */
    justify-content: space-between; /* <-- 关键：上下两端对齐 */
}

/* 【新增】让分组自己成为一个独立的块 */
.nav-group {
    padding: 15px; /* 给每个组内部也增加一些空间 */
}

/* 优化一下标题和列表的间距 */
.side-nav .nav-section-title { 
    font-family: var(--font-display); 
    color: var(--color-primary); 
    font-size: 0.9rem; 
    font-weight: 500; 
    margin-bottom: 20px; /* <--- 增加标题和下方列表的距离 */
    letter-spacing: 1px; 
    text-transform: uppercase;
}

.gallery-categories, .quick-links { 
    list-style: none; 
}

.gallery-categories { 
    margin-bottom: 30px; 
}

.gallery-categories .nav-item {
    display: flex; 
    align-items: center; 
    padding: 12px 15px;
    border-radius: var(--border-radius-small);
    cursor: pointer; 
    transition: all 0.3s ease; 
    margin-bottom: 5px;
    font-weight: 500; 
    color: var(--color-text-primary);
}

.gallery-categories .nav-item i { 
    margin-right: 15px; 
    color: var(--color-primary); 
    width: 20px; 
    text-align: center; 
}

.gallery-categories .nav-item:hover { 
    background: rgba(88, 166, 255, 0.1); 
}

.gallery-categories .nav-item.active { 
    background: rgba(88, 166, 255, 0.15); 
    color: var(--color-text-heading); 
    font-weight: 700; 
}

.quick-links a { 
    display: flex; 
    align-items: center; 
    padding: 10px 15px; 
    border-radius: var(--border-radius-small); 
    text-decoration: none; 
    color: var(--color-text-primary); 
    transition: all 0.3s ease; 
    margin-bottom: 5px; 
}

.quick-links i { 
    margin-right: 15px; 
    color: var(--color-primary); 
    width: 20px; 
    text-align: center; 
}

.quick-links a:hover { 
    background: rgba(88, 166, 255, 0.1); 
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 17, 23, 0.5);
    backdrop-filter: blur(5px);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}


/* --- [SECTION 4] 主内容区域 --- */
.main-content { 
    flex: 1; 
    padding-top: 75px; 
    transition: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    min-height: calc(100vh - 75px); /* 【新增】确保主内容区至少有视口那么高 */
}

.gallery-content { 
    padding: 0 40px; 
}

.gallery-section { 
    display: none; 
    opacity: 0; 
    animation: fadeIn 0.5s ease forwards; 
}

.gallery-section.active { 
    display: block; 
    opacity: 1; 
}


/* --- [SECTION 5] 标签筛选栏 --- */
.tags-filter-container { 
    padding: 0 40px 20px; 
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tag-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.tag-row-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tags-filter-scroll {
    display: flex; 
    gap: 12px;
    overflow-x: auto; 
    cursor: grab; 
    user-select: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 15px; 
    margin-bottom: -15px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tags-filter-scroll::-webkit-scrollbar { 
    display: none;
}

.filter-tag {
    padding: 8px 20px;
    background: var(--color-surface); 
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-small);
    cursor: pointer; 
    transition: all 0.3s ease;
    white-space: nowrap; 
    font-size: 0.9rem; 
    font-weight: 500;
    color: var(--color-text-primary);
}

.filter-tag:hover {
    background: rgba(147, 112, 219, 0.1);
    border-color: rgba(147, 112, 219, 0.4);
}

.filter-tag.active {
    background: var(--color-gradient-dark);
    color: white; 
    border-color: var(--color-accent-purple);
    font-weight: 700;
    box-shadow: var(--shadow-purple-glow);
}


/* --- [SECTION 6] 核心布局：赛博晶体卡片 --- */
.inspiration-wall { 
    position: relative; 
    width: 100%; 
    margin: 0 auto; 
}

.work-card {
    position: absolute;
    width: 280px;
    background-color: var(--color-surface);
    contain: layout style paint; 
    border-radius: var(--border-radius-main);
    border: 1px solid var(--color-border);
    overflow: hidden;
    cursor: pointer;
    /* 【修改】简化过渡效果，只保留transform */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
    /* 【修改】使用transform3d开启GPU加速 */
    transform: translate3d(0, 20px, 0) scale(0.95);
    will-change: transform, opacity;
}


.work-card.visible { 
    opacity: 1; 
    /* 【修改】使用transform3d */
    transform: translate3d(0, 0, 0) scale(1);
    will-change: auto; /* 动画结束后释放GPU内存 */
}


/* 【修改】只在支持hover的设备上启用hover效果 */
@media (hover: hover) {
    .work-card:hover {
        transform: translate3d(0, -8px, 0);
        border-color: rgba(88, 166, 255, 0.5);
        box-shadow: var(--shadow-glow-medium);
        z-index: 10;
    }
}

/* 【新增】移动端点击效果 */
@media (max-width: 780px) {
    .work-card:active {
        transform: translate3d(0, 0, 0) scale(0.98);
    }
}


.card-image-container { 
    position: relative; 
    overflow: hidden; 
}

.card-image {
    width: 100%; 
    display: block; 
    aspect-ratio: 4 / 3;
    object-fit: cover; 
    background-color: #000;
    transition: transform 0.5s ease;
}

.work-card:hover .card-image { 
    transform: scale(1.05); 
}

.card-content { 
    padding: 15px 20px 20px; 
}

.card-title {
    font-family: var(--font-display); 
    font-weight: 700;
    font-size: 1.1rem; 
    color: var(--color-text-heading);
    margin-bottom: 8px; 
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-description {
    font-size: 0.85rem; 
    line-height: 1.6;
    margin-bottom: 15px; 
    color: var(--color-text-secondary);
    height: calc(1.6em * 3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-border);
}

.stat-item {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.stat-item i {
    margin-right: 6px;
    font-size: 0.85rem;
    color: var(--color-secondary);
}

.card-footer { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.card-author { 
    display: flex; 
    align-items: center; 
}

.card-author-avatar {
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    object-fit: cover;
    margin-right: 10px; 
    border: 2px solid var(--color-surface);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.card-author-name { 
    font-size: 0.8rem; 
    font-weight: 500; 
    color: var(--color-text-secondary); 
}

.card-heat {
    display: flex; 
    align-items: center; 
    font-size: 0.9rem; 
    font-weight: 700;
    color: var(--color-primary);
}

.card-heat i { 
    margin-right: 5px; 
}


/* --- [SECTION 7] 加载更多与空状态 --- */
.load-more-container { 
    padding: 40px 0 60px; 
    text-align: center; 
}

.load-more-btn {
    font-family: var(--font-display); 
    font-size: 1rem; 
    font-weight: 700;
    padding: 14px 40px; 
    border-radius: var(--border-radius-small);
    border: 1px solid var(--color-primary);
    background: transparent; 
    color: var(--color-primary);
    cursor: pointer; 
    transition: all 0.3s ease;
}

.load-more-btn:hover:not(:disabled) {
    background: var(--color-primary); 
    color: white;
    box-shadow: var(--shadow-glow-medium);
}

.load-more-btn:disabled {
    border-color: var(--color-text-secondary); 
    color: var(--color-text-secondary);
    background: transparent; 
    cursor: not-allowed;
}

.empty-message, .error-message {
    text-align: center;
    padding: 80px 20px;
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: 1.1rem;
}


/* --- [SECTION 8] 作品详情弹窗（Modal） --- */
.work-details-modal { 
    position: fixed; 
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%; 
    z-index: 2000;
    display: none; 
    align-items: center; 
    justify-content: center;
    padding: 20px;
}

.modal-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(13, 17, 23, 0.7); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
}

/* ★★★【终极修正区 开始】★★★ */
.modal-content {
    position: relative; 
    z-index: 1;
    width: 100%; 
    max-width: 650px;
    max-height: 90vh; /* 【修改】让弹窗高度自适应，最高不超过视窗的90% */
    background: var(--color-surface); 
    border-radius: var(--border-radius-main);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-glow-strong);
    display: flex; /* 【确认】必须是 flex */
    flex-direction: column; /* 【确认】必须是 column，垂直排列 */
    overflow: hidden; /* 【确认】防止内容溢出弹窗圆角 */
}

.close-modal {
    position: absolute; 
    top: 15px; 
    right: 15px;
    width: 36px; 
    height: 36px; 
    border-radius: 50%;
    background: rgba(255,255,255,0.1); 
    border: none;
    font-size: 1.5rem; 
    line-height: 36px;
    text-align: center;
    font-weight: 300;
    color: var(--color-text-secondary);
    cursor: pointer; 
    z-index: 10;
    transition: all 0.3s ease;
}

.close-modal:hover { 
    transform: rotate(90deg); 
    background: rgba(255,255,255,0.2); 
}

.modal-scroll-content { 
    flex: 1 1 auto; /* ★ 允许滚动区占据所有可用空间 */
    overflow-y: auto; 
    min-height: 0; /* ★ 防止内容溢出 */
}

/* --- [SECTION 8B] 弹窗 - 讨论区新布局 --- */
.modal-header { 
    position: relative; 
    width: 100%; 
    height: 220px; 
    flex-shrink: 0;
}

.modal-work-cover { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.modal-header-overlay { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(13, 17, 23, 0.9), transparent);
    color: white; 
}

.modal-header .creator-info { 
    display: flex; 
    align-items: center; 
    margin-bottom: 10px; 
}

.modal-header .creator-avatar { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    margin-right: 12px; 
    border: 2px solid var(--color-primary); 
}

.modal-header .creator-name { 
    color: var(--color-text-primary); 
    font-weight: 500;
}

.modal-work-title { 
    font-family: var(--font-display); 
    font-size: 1.8rem; 
    font-weight: 700; 
    color: var(--color-text-heading); 
    text-shadow: 0 0 10px rgba(88, 166, 255, 0.5); 
}

.modal-body { 
    padding: 25px; 
}

/* 选项卡切换器 */
.modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 25px;
}

.modal-tab-btn {
    padding: 0 5px 15px 5px;
    margin-right: 25px;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-tab-btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-accent-purple); /* 修改为紫色 */
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-tab-btn:hover {
    color: var(--color-text-primary);
}

.modal-tab-btn.active {
    color: var(--color-accent-purple); /* 修改为紫色 */
    font-weight: 700;
}

.modal-tab-btn.active::after {
    transform: scaleX(1);
}

.comment-count-badge {
    background-color: var(--color-accent-purple); /* 修改为紫色 */
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
}

/* 选项卡内容面板 */
.tab-pane {
    display: none;
    animation: fadeIn 0.4s ease forwards;
}

.tab-pane.active {
    display: block;
}

#work-comments-section.tab-pane.active {
    display: block;
}

.work-tags-container { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px; 
    margin-bottom: 25px; 
}
.work-tags-container .tag, .work-tags-container .tag-default {
    background-color: rgba(88, 166, 255, 0.1); 
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    padding: 5px 12px; 
    border-radius: var(--border-radius-small);
    font-size: 0.8rem; 
    font-weight: 500;
}

.modal-section { 
    margin-bottom: 25px; 
}
.modal-section h4 { 
    font-family: var(--font-display); 
    font-size: 1.1rem; 
    font-weight: 700; 
    color: var(--color-text-heading); 
    margin-bottom: 12px; 
    display: flex; 
    align-items: center; 
}
.modal-section h4 i { 
    margin-right: 10px; 
    color: var(--color-primary); 
}

.modal-section .work-description { 
    font-size: 0.95rem; 
    line-height: 1.7; 
    color: var(--color-text-secondary); 
}

.work-detailed-iframe-container { 
    border: 1px solid var(--color-border); 
    border-radius: var(--border-radius-small);
    padding: 0; /* 移除内边距，由iframe内容自己控制 */
    min-height: 100px;
    overflow: hidden; /* 确保内容不会溢出 */
    background-color: transparent; /* 透明背景，让iframe内容决定背景 */
}

/* 确保iframe样式正确 */
#galleryWorkDetailedDescriptionIframe {
    width: 100%;
    display: block;
    border: none;
    background: transparent;
    transition: height 0.3s ease; /* 平滑高度变化 */
}

.iframe-loader .spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(88, 166, 255, 0.2);
    border-top-color: var(--color-primary);
}

.modal-body .work-stats-info {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.modal-body .stat-item {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
}
.modal-body .stat-item i { margin-right: 8px; }

/* 评论列表 */
.comment-list-container {
    padding-bottom: 20px; /* 给列表底部留出空间 */
}

.comment-item {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--color-border);
}
.comment-item:last-child {
    border-bottom: none;
}
.comment-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.comment-body { flex-grow: 1; }
.comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.comment-author { font-weight: 700; color: var(--color-text-heading); }
.comment-time { font-size: 0.8rem; color: var(--color-text-secondary); }
.comment-content { font-size: 0.95rem; line-height: 1.6; color: var(--color-text-primary); white-space: pre-wrap; word-break: break-word; }

/* 评论交互按钮 */
.comment-footer { display: flex; align-items: center; gap: 20px; margin-top: 12px; }
/* 基础按钮样式 */
.comment-action-btn { 
    background: none; 
    border: none; 
    color: var(--color-text-secondary); 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    font-size: 0.85rem; 
    padding: 4px 8px; 
    border-radius: var(--border-radius-small); 
    transition: all 0.2s ease; 
}

/* 普通悬停效果 */
.comment-action-btn:hover { 
    background-color: rgba(147, 112, 219, 0.1); 
    color: var(--color-accent-purple); 
}

/* 点赞活跃状态 */
.comment-action-btn.liked { 
    color: var(--color-accent-purple); 
    font-weight: 700; 
}

/* 点赞活跃+悬停状态 */
.comment-action-btn.liked:hover { 
    background-color: rgba(147, 112, 219, 0.15); 
}

/* 删除按钮悬停效果保持红色警示 */
.comment-action-btn.delete-btn:hover { 
    color: #f76e8c; 
    background-color: rgba(247, 110, 140, 0.1); 
}

/* 修改评论分割线颜色，微调为紫色 */
hr.comment-divider { 
    border: none; 
    height: 1px; 
    background-color: rgba(147, 112, 219, 0.15); 
    margin: 15px 0 5px 0; 
}

/* 修改回复引用标记的颜色 */
.reply-to { 
    color: var(--color-accent-purple); 
    font-weight: 500; 
}

/* 修改评论回复区左侧边框 */
.replies-container { 
    margin-left: 10px; 
    padding-left: 15px; 
    border-left: 2px solid rgba(147, 112, 219, 0.3); 
}

/* 主评论输入框 */
#comment-form {
    display: none;
    flex-shrink: 0; 
    gap: 15px; /* 左右间距可以不变 */
    padding: 10px 25px; /* 【修改】上下内边距减少 */
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    align-items: flex-end;
}

.modal-content.comments-active #comment-form {
    display: flex;
}
.comment-input-wrapper { flex-grow: 1; }
/* 【修改】主评论输入框的样式 */
#comment-textarea {
    width: 100%;
    /* min-height: 46px; */ /* 【删除或注释掉】这个是罪魁祸首 */
    height: auto; /* 【新增】让高度自动计算 */
    max-height: 45px; /* 【新增】加一个最大高度，防止输入太多把页面撑爆 */
    
    background: rgba(88, 166, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-small);
    
    padding: 12px 15px; /* 内边距 */
    font-size: 0.95rem; /* 字体大小 */
    line-height: 1.4; /* 行高 (字体大小 0.95rem * 16px/rem * 1.5 = 约 22.8px) */
                       /* 加上 padding (12*2=24px) ，初始高度约为 47px，正好和按钮一样高！*/

    color: var(--color-text-primary);
    outline: none;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.3s; /* 给 focus 效果加个过渡 */
}
#comment-textarea:focus { border-color: var(--color-primary); background: var(--color-surface); box-shadow: 0 0 10px rgba(88, 166, 255, 0.2); }
.submit-comment-btn { 
    flex-shrink: 0; 
    align-self: flex-end; 
    padding: 15px 18px; 
    min-height: 45px; 
    background: var(--color-gradient-dark); /* 修改为黑紫渐变 */
    color: white; 
    border: none; 
    border-radius: var(--border-radius-small); 
    cursor: pointer; 
    font-weight: 700; 
    transition: all 0.3s ease; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

.submit-comment-btn:hover { 
    background: var(--color-gradient-dark-hover); /* 修改为黑紫渐变悬停色 */
    box-shadow: var(--shadow-purple-glow); /* 添加紫色阴影 */
}
/* 回复输入框 (动态添加) */
.reply-form { display: flex; gap: 10px; margin-top: 15px; }
.reply-form textarea { flex-grow: 1; background: rgba(88, 166, 255, 0.05); border: 1px solid var(--color-border); border-radius: var(--border-radius-small); padding: 8px 12px; font-size: 0.9rem; color: var(--color-text-primary); outline: none; resize: vertical; font-family: inherit; min-height: 40px; }
.reply-form button { 
    padding: 8px 15px; 
    background: var(--color-gradient-dark); /* 修改为黑紫渐变 */
    color: white; 
    border: none; 
    border-radius: var(--border-radius-small); 
    cursor: pointer; 
    transition: all 0.3s ease; 
}

.reply-form button:hover { 
    background: var(--color-gradient-dark-hover); /* 修改为黑紫渐变悬停色 */
    box-shadow: var(--shadow-purple-glow); /* 添加紫色阴影 */
}

/* 底部按钮 */
.modal-footer {
    padding: 20px;
    text-align: center;
    border-top: 1px solid var(--color-border);
    background: rgba(13, 17, 23, 0.5);
    flex-shrink: 0;
}
.modal-footer .footer-actions { display: flex; justify-content: center; align-items: center; width: 100%; }
.modal-footer .start-play-btn {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    padding: 16px 45px;
    border-radius: var(--border-radius-small);
    border: none;
    background: var(--color-gradient-dark);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.modal-footer .start-play-btn:hover {
    background: var(--color-gradient-dark-hover);
    transform: translateY(-3px);
    box-shadow: var(--shadow-purple-glow);
}


/* ★★★【终极修正区 结束】★★★ */

/* --- [SECTION 9] 动画与辅助工具 --- */
@keyframes spin { 
    100% { transform: rotate(360deg); } 
}
@keyframes pulse-ring {
    0% { transform: scale(0.6); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    background-color: var(--color-bg);
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* --- [SECTION 11] 自定义滚动条样式 (升级版 v3.0 - 全局应用) --- */

/* 【修改】将新的动态视图和 textarea 也加入到选择器中，实现样式复用 */
/* 针对 Webkit 浏览器 (Chrome, Edge, Safari) */
.modal-scroll-content::-webkit-scrollbar,
.feed-view-content::-webkit-scrollbar, /* <--- 新增这一行 */
textarea::-webkit-scrollbar {
    width: 8px; /* 可以调细一点，更精致 */
}

.modal-scroll-content::-webkit-scrollbar-track,
.feed-view-content::-webkit-scrollbar-track, /* <--- 新增这一行 */
textarea::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: var(--border-radius-small);
}

.modal-scroll-content::-webkit-scrollbar-thumb,
.feed-view-content::-webkit-scrollbar-thumb, /* <--- 新增这一行 */
.announcement-body::-webkit-scrollbar-thumb, /* <-- 新增这一行 */
textarea::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.7); /* 使用主题色，半透明 */
    border-radius: var(--border-radius-small);
    border: 2px solid transparent; /* 增加一点透明边框，让它看起来更窄 */
    background-clip: content-box; /* 让背景色只在内容区显示 */
    transition: all 0.2s ease-in-out;
}

.modal-scroll-content::-webkit-scrollbar-thumb:hover,
.feed-view-content::-webkit-scrollbar-thumb:hover, /* <--- 新增这一行 */
textarea::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.7); /* 悬浮时颜色加深 */
}

/* 针对 Firefox 浏览器 (也要带上新容器) */
.modal-scroll-content,
.feed-view-content, /* <--- 新增这一行 */
.announcement-body, /* <-- 新增这一行 */
textarea {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.7) transparent; 
}

/* --- [SECTION 12] 关注按钮样式 (黑紫风格) --- */
.creator-info {
    position: relative;
}

.follow-btn-container {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* 基础按钮样式 */
.follow-btn {
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    border: none;
    min-width: 90px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    outline: none;
}

/* 未关注状态 - 黑紫渐变 */
.follow-btn:not(.is-following) {
    background: var(--color-gradient-dark);
    color: white;
}

/* 未关注悬停状态 */
.follow-btn:not(.is-following):hover:not(:disabled) {
    background: var(--color-gradient-dark-hover);
    transform: translateY(-2px) scale(1.03);
    box-shadow: var(--shadow-purple-glow);
}

/* 已关注状态 */
.follow-btn.is-following {
    background-color: transparent;
    border: 1px solid rgba(147, 112, 219, 0.4);
    color: var(--color-accent-purple);
}

/* 已关注悬停状态 - 取消关注提示 */
.follow-btn.is-following:hover:not(:disabled) {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.4);
    color: #dc3545;
}

/* 使用伪元素实现取消关注文本切换 */
.follow-btn.is-following:hover:not(:disabled) span:first-child {
    opacity: 0;
}

.follow-btn.is-following span:first-child {
    transition: opacity 0.2s ease;
}

.follow-btn.is-following::after {
    content: "取消关注";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.follow-btn.is-following:hover:not(:disabled)::after {
    opacity: 1;
}

/* 按钮波纹效果 */
.follow-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease-out, height 0.6s ease-out;
}

.follow-btn:active::before {
    width: 200px;
    height: 200px;
    opacity: 0;
}

/* 加载中状态 */
.follow-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 加载图标旋转动画 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.follow-btn .fa-spinner {
    animation: spin 1.2s linear infinite;
}


/* 个人主页上的"关注"按钮 - 实心黑紫渐变 */
.profile-follow-btn {
    background: var(--color-gradient-dark);
    color: white;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.profile-follow-btn:hover:not(.is-following):not(:disabled) {
    background: var(--color-gradient-dark-hover);
    transform: translateY(-2px) scale(1.03);
    box-shadow: var(--shadow-purple-glow);
}

.profile-follow-btn.is-following {
    background: transparent;
    border: 1px solid rgba(147, 112, 219, 0.4);
    color: white;
    box-shadow: none;
}

.profile-follow-btn.is-following:hover:not(:disabled) {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.4);
    color: #dc3545;
}

/* --- [SECTION 13] 自定义导航栏样式 (新增) --- */

/* 让导航项目有相对定位，为红点做准备 */
.custom-nav .nav-item {
  position: relative;
}

/* 通知红点样式 */
.notification-badge {
  position: absolute;
  top: 10px;
  right: 15px;
  width: 18px; /* 调整大小 */
  height: 18px; /* 调整大小 */
  background-color: #f76e8c; /* 醒目的红色 */
  border-radius: 50%;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex; /* 使用flex居中 */
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-surface); /* 加个边框更有质感 */
  box-shadow: 0 0 8px rgba(247, 110, 140, 0.7);
}

/* --- [SECTION 15] 关注动态全屏视图样式 (V3.0 - 视图切换) --- */

.top-navbar {
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    transform: translateY(0);
    opacity: 1;
}

/* 当切换到动态流时，顶部导航栏向上滑出并消失 */
body.feed-view-is-active .top-navbar {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* 同时，锁定整个页面的滚动条 */
body.feed-view-is-active {
    overflow: hidden;
}

.following-feed-view {
    position: fixed; /* 【老师的修正】改为fixed，相对于整个浏览器窗口定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg);
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transform: translateX(100px);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    z-index: 10;
    padding: 0;
}


/* 默认显示画廊内容 */
.gallery-content,
.tags-filter-container {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* 当主容器被激活时，切换显隐和动画 */
.main-content.feed-active .following-feed-view {
    opacity: 1;
    pointer-events: auto; /* 激活时可点击 */
    transform: translateX(0); /* 移动到原位 */
}

.main-content.feed-active .gallery-content,
.main-content.feed-active .tags-filter-container {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100px); /* 向左移出 */
}

/* 动态视图内部样式 */
.feed-view-header {
    display: flex;
    justify-content: space-between; /* 保持两端对齐 */
    align-items: center;
    padding: 20px 25px; /* 恢复一个美观的内边距 */
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}


.back-to-gallery-btn {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    padding: 8px 16px;
    border-radius: var(--border-radius-small);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.back-to-gallery-btn:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.feed-view-header h3 {
    color: var(--color-primary);
    font-size: 1.2rem;
    margin: 0; /* 保持 margin: 0 */
    display: flex;
    align-items: center;
    gap: 12px;
}


.feed-view-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px 25px;
}


/* 卡片样式可以复用之前V2.0的，这里再贴一遍确保没问题 */
.feed-item {
    background-color: var(--color-surface); /* 改回surface颜色，更有层次感 */
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-main);
    margin-bottom: 25px;
    padding: 20px;
    transition: all 0.3s;
    cursor: pointer;
}

.feed-item:hover {
    border-color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow-medium);
}

.feed-item-header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 15px;
}
.feed-author-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
}
.feed-author-info {
    display: flex; flex-direction: column; flex-grow: 1;
}
.feed-author-name { 
    font-weight: 700; color: var(--color-text-heading); font-size: 1rem; 
}
.feed-action-text { 
    font-size: 0.8rem; color: var(--color-text-secondary); 
}
.feed-timestamp {
    font-size: 0.8rem; color: var(--color-text-secondary); flex-shrink: 0;
}
.feed-work-preview {
    display: flex; gap: 15px; border-top: 1px solid var(--color-border); padding-top: 15px;
}
.feed-work-cover {
    width: 100px; height: 100px; object-fit: cover; border-radius: var(--border-radius-small); flex-shrink: 0;
}
.feed-work-details {
    display: flex; flex-direction: column; min-width: 0; /* 防止文本过长撑开容器 */
}
.feed-work-title {
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--color-text-heading); margin-bottom: 8px;
}
.feed-work-description {
    font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.empty-feed-message {
    color: var(--color-text-secondary); text-align: center; padding-top: 50px; font-size: 1.1rem;
}

/* --- [SECTION 16] 作者个人主页卡片弹窗样式 (国风重制版) --- */
.user-profile-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    /* 使用新的字体 */
    --font-书法: 'ZCOOL KuaiLe', cursive;
}

.user-profile-modal.active {
    opacity: 1;
    visibility: visible;
}

.profile-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
}

.profile-card {
    position: relative;
    width: 90%;
    max-width: 750px; 
    aspect-ratio: 16 / 9;
    max-height: 422px;
    /* [新增] 背景图的显示方式 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* [新增] 渐变背景作为默认值和底层 */
    background-image: linear-gradient(45deg, #f9f6f1, #e9e6e1);
    
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden; 
    border-radius: 10px;
    color: #333;
}

/* === [修改] 将伪元素变为半透明的纸张纹理遮罩 === */
.profile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* [修改] 背景色变为带透明度的白色，形成遮罩效果 */
    background-color: rgba(255, 255, 255, 0.5); 
    backdrop-filter: blur(2px); /* [新增] 毛玻璃效果，让遮罩更柔和 */
    z-index: 0; /* [修改] 层级高于背景图，但低于内容 */
}

/* [新增] 确保所有内容都在遮罩之上 */
.profile-card-content, .close-profile-modal, .profile-footer {
    position: relative;
    z-index: 1;
}

.user-profile-modal.active .profile-card {
    transform: scale(1);
}

.close-profile-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.close-profile-modal:hover { transform: rotate(90deg); }

.profile-card-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.profile-card-main {
    display: flex;
    flex-grow: 1;
}

.profile-card-left {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.profile-title-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.title-seal {
    border: 2px solid #a40000;
    border-radius: 50%;
    padding: 8px;
    display: flex;
    flex-direction: column;
    color: #a40000;
    font-weight: bold;
    font-size: 0.9rem;
}

.profile-card-title {
    font-family: var(--font-書法);
    font-size: 4rem;
    color: #222;
    line-height: 1;
}

.profile-info-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-group-title {
    font-weight: bold;
    font-size: 1rem;
    background-color: #333;
    color: #fff;
    padding: 4px 12px;
    display: inline-block;
    margin-bottom: 12px;
}

.info-group-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
}

.info-group-content.bio {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-username {
    font-size: 2rem; /* 字体可以大一些，但小于主标题 */
    font-weight: bold;
    color: #333;
    margin-bottom: 25px; /* 与下面的信息区拉开距离 */
    border-bottom: 1px solid rgba(0,0,0,0.1); /* 加一条淡淡的下划线分割 */
    padding-bottom: 15px;
}

/* --- 右侧圆形图片 --- */
.profile-card-right {
    flex: 0 0 45%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar-wrapper {
    position: relative;
    width: 80%;
    padding-top: 80%; /* 1:1 aspect ratio */
    transform: rotate(-15deg);
}

/* === 核心：用伪元素制作多层画框 === */
.profile-avatar-wrapper::before,
.profile-avatar-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.5);
    z-index: 1;
}
.profile-avatar-wrapper::before {
    width: 105%;
    height: 105%;
    transform: translate(-50%, -50%) rotate(10deg);
}
.profile-avatar-wrapper::after {
    width: 110%;
    height: 110%;
    border-width: 8px;
    border-color: rgba(255, 255, 255, 0.8);
    transform: translate(-50%, -50%) rotate(-5deg);
}

.profile-avatar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid white;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    z-index: 2;
}

/* --- 竖排文字 --- */
.profile-vertical-text {
    position: absolute;
    writing-mode: vertical-rl; /* 关键：设置为竖排，从右到左 */
    font-size: 1.1rem;
    color: #555;
    letter-spacing: 4px;
}

.profile-vertical-text.right {
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
}

/* --- 页脚按钮 --- */
.profile-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 40px;
    background: linear-gradient(to top, rgba(13, 17, 23, 0.6), transparent);
    z-index: 1; 
    /* [修改] 让内容在页脚的左右两端对齐 */
    display: flex;
    justify-content: flex-end; /* 所有按钮默认靠右 */
    align-items: center;
}

.profile-actions {
    display: flex;
    gap: 15px; /* 按钮之间的间距 */
}

/* 个人主页卡片按钮基础样式 */
.profile-action-btn {
    padding: 10px 28px;
    border-radius: var(--border-radius-small);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* "查看作品"按钮样式 - 线框黑紫风格 */
.view-works-btn {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: 1px solid rgba(147, 112, 219, 0.6);
}

.view-works-btn:hover {
    background-color: rgba(147, 112, 219, 0.2);
    border-color: var(--color-accent-purple);
    box-shadow: 0 0 12px rgba(147, 112, 219, 0.4);
}

/* “关注”按钮样式 (主色调填充) */
.profile-follow-btn {
    background-color: var(--color-primary);
    color: white;
}
.profile-follow-btn:hover:not(.is-following) {
    box-shadow: var(--shadow-glow-medium);
}
.profile-follow-btn.is-following {
    background-color: transparent;
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}


/* --- [SECTION 17] 评论区交互样式 (新增) --- */
.comment-avatar-container.author-link,
.comment-header .author-link {
    cursor: pointer;
    transition: all 0.2s ease;
}

.comment-avatar-container.author-link:hover .comment-avatar {
    transform: scale(1.1);
    box-shadow: 0 0 10px var(--color-primary);
}

.comment-header .author-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* --- [SECTION 18] 消息通知样式 (新增) --- */

/* 导航栏上的通知数量角标 */
.notification-count-badge {
    position: absolute;
    top: 5px;
    right: 10px;
    min-width: 20px;
    height: 20px;
    line-height: S20px;
    padding: 0 6px;
    background-color: #f85149; /* 鲜艳的红色 */
    border-radius: 10px;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex; /* 让数字居中 */
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-surface);
    box-shadow: 0 0 10px rgba(248, 81, 73, 0.7);
    animation: bounceIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(0.9, 0.9, 0.9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(0.97, 0.97, 0.97); }
  to { opacity: 1; transform: scale3d(1, 1, 1); }
}

/* 通知面板的主容器 */
.notification-panel {
    position: fixed;
    top: 0;
    right: -380px; /* 默认隐藏在右侧 */
    width: 360px;
    height: 100vh;
    background-color: rgba(18, 22, 28, 0.95);
    backdrop-filter: blur(15px);
    z-index: 1200; /* 比侧边栏和遮罩层更高 */
    border-left: 1px solid var(--color-border);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-panel.active {
    right: 0; /* 显示出来 */
}

/* 面板头部 */
.notification-panel-header {
    flex-shrink: 0;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
}
.notification-panel-header h3 {
    margin: 0;
    color: var(--color-primary);
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}
.clear-btn, .close-panel-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.clear-btn:hover { color: #f85149; }
.close-panel-btn { font-size: 1.5rem; }
.close-panel-btn:hover { color: var(--color-primary); }


/* 主通知列表 */
.notification-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px 0;
}
/* 单条通知 */
.notification-item {
    display: flex;
    gap: 15px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(88, 166, 255, 0.08);
    transition: background-color 0.3s;
    cursor: pointer;
}
.notification-item:hover {
    background-color: rgba(88, 166, 255, 0.05);
}
.notification-item.unread {
    background-color: rgba(88, 166, 255, 0.08);
}
.actor-avatar {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.notification-content { flex-grow: 1; }
.notification-text {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text-primary);
    line-height: 1.5;
}
/* 名字加粗 */
.notification-text b { color: var(--color-text-heading); font-weight: 600; }
.notification-time { font-size: 0.8rem; color: var(--color-text-secondary); }

/* 面板底部 */
.notification-panel-footer {
  flex-shrink: 0;
  text-align: center;
  padding: 15px;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
}

.notification-list .empty-message { padding-top: 50px; }

/* --- [SECTION 19] 评论高亮效果 (新增) --- */

/* 让颜色变化更平滑 */
.notification-list .comment-item {
    transition: background-color 0.5s ease;
}

/* 这就是高亮时的样式 */
.notification-list .comment-item.highlight {
    background-color: rgba(88, 166, 255, 0.15); /* 一个半透明的主题色 */
    border-radius: 8px; /* 加个圆角更好看 */
}

/* 为了使得弹窗里的评论也能应用上这个效果，我们再补充一个选择器 */
.work-details-modal .comment-item {
    transition: background-color 0.5s ease;
}

.work-details-modal .comment-item.highlight {
    background-color: rgba(88, 166, 255, 0.15);
    border-radius: 8px;
}

/* --- [SECTION 20] 广场公告弹窗样式 (动漫风重制版) --- */

/* 弹窗主容器 */
.announcement-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.announcement-modal.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

/* 遮罩层 */
.announcement-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(147, 112, 219, 0.2), rgba(13, 17, 23, 0.9));
    backdrop-filter: blur(5px);
    animation: overlayPulse 4s ease-in-out infinite;
}

@keyframes overlayPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* 内容容器 */
.announcement-content {
    position: relative;
    width: 95%;
    max-width: 900px;
    height: 90vh;
    max-height: 700px;
    background-image: 
        linear-gradient(135deg, rgba(255, 182, 193, 0.1), rgba(173, 216, 230, 0.1)),
        url('../assets/images/announcement-bg.jpg');
    background-size: cover;
    background-position: center;
    background-blend-mode: soft-light;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 20px 60px rgba(147, 112, 219, 0.4),
        inset 0 0 60px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    animation: modalBounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes modalBounceIn {
    0% {
        transform: scale(0.3) rotate(5deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.05) rotate(-2deg);
    }
    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

/* 樱花飘落粒子效果 */
.sakura-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.sakura-particles::before,
.sakura-particles::after {
    content: '🌸';
    position: absolute;
    top: -20px;
    font-size: 20px;
    animation: sakuraFall 10s linear infinite;
}

.sakura-particles::before {
    left: 10%;
    animation-delay: 0s;
}

.sakura-particles::after {
    left: 70%;
    animation-delay: 5s;
    font-size: 15px;
}

@keyframes sakuraFall {
    to {
        transform: translateY(720px) rotate(360deg);
        opacity: 0;
    }
}

/* 装饰角色 */
.announcement-character {
    position: absolute;
    bottom: -10px;
    right: -30px;  /* 从 -50px 改为 -30px，让角色更靠内一些 */
    width: 280px;  /* 从 300px 改为 280px，稍微缩小一点 */
    height: auto;
    z-index: 10;   /* 从 2 改为 10，确保在卡片上方 */
    pointer-events: none;
    animation: characterFloat 3s ease-in-out infinite;
}

/* ===== 看板娘交互效果 ===== */

/* 基础过渡动画 */
.announcement-character {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 当鼠标悬停在内容区域时，看板娘变淡并稍微右移 */
.announcement-content:hover .announcement-character {
    opacity: 0.3;
    transform: translateX(30px) scale(0.9);
}

/* 鼠标直接悬停在看板娘上时，她会"害羞"地躲开 */
.announcement-character:hover {
    opacity: 0.8;
    transform: translateX(50px) rotate(-10deg) scale(0.85);
}

.announcement-character img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
    opacity: 0.9;  /* 添加轻微透明度 */
}


@keyframes characterFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.02); }
}

/* 主内容区 */
.announcement-main {
    position: relative;
    z-index: 3;    /* 保持不变 */
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, 
        rgba(13, 17, 23, 0.85) 0%, 
        rgba(88, 166, 255, 0.05) 50%, 
        rgba(147, 112, 219, 0.1) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: visible;  /* 添加这一行，允许内容溢出 */
}


/* 标题栏 */
.announcement-header {
    flex-shrink: 0;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.05), 
        transparent);
}

.header-decoration {
    position: absolute;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

.header-decoration.left {
    left: 30px;
    top: 50%;
}

.header-decoration.right {
    right: 60px;
    top: 50%;
}

.announcement-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: white;
    text-align: center;
}

.title-icon {
    font-size: 2rem;
    animation: iconBounce 2s ease-in-out infinite;
}

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

.title-text {
    font-family: 'ZCOOL KuaiLe', var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(147, 112, 219, 0.5);
}

.title-subtitle {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* 关闭按钮 */
.close-announcement-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-announcement-btn:hover {
    transform: rotate(90deg) scale(1.1);
    background: rgba(255, 0, 0, 0.3);
    border-color: rgba(255, 0, 0, 0.5);
}

/* 内容区域 */
.announcement-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 30px;
    padding-right: 150px;  /* 添加右侧内边距，给看板娘留出空间 */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    position: relative;  /* 添加相对定位 */
    z-index: 5;         /* 设置较低的层级 */
}


/* 公告卡片 */
.announcement-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    z-index: 6;  /* 添加这一行，确保卡片层级低于看板娘 */
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}


.announcement-card:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 15px 40px rgba(147, 112, 219, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* 卡片标签 */
.card-ribbon {
    position: absolute;
    top: 20px;
    left: -30px;
    z-index: 10;
    transform: rotate(-45deg);
}

.card-ribbon span {
    display: block;
    padding: 5px 40px;
    background: linear-gradient(135deg, #ff6b6b, #ff8787);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.daily-card .card-ribbon span {
    background: linear-gradient(135deg, #4ecdc4, #44a3aa);
}

/* 卡片头部 */
.card-header {
    position: relative;
    height: 120px;
    overflow: hidden;
}

.card-banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8);
}

.card-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.card-title-overlay h2 {
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 卡片内容 */
.card-content {
    flex-grow: 1;
    padding: 20px;
    overflow: hidden;
}

.content-scroll {
    height: 100%;
    overflow-y: auto;
    padding-right: 10px;
}

/* 公告项样式 */
.announcement-item,
.daily-news-item {
    padding: 15px;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 10px;
    border-left: 4px solid var(--color-primary);
    transition: all 0.3s ease;
}

.announcement-item:hover,
.daily-news-item:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(88, 166, 255, 0.2);
}

/* 徽章样式 */
.item-badge,
.news-category {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.item-badge {
    background: var(--color-primary);
    color: white;
}

.item-badge.new {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    animation: badgePulse 1s ease-in-out infinite;
}

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

.news-category {
    background: rgba(147, 112, 219, 0.2);
    color: var(--color-accent-purple);
    border: 1px solid var(--color-accent-purple);
}

/* 内容文字样式 */
.announcement-item h4,
.daily-news-item h4 {
    color: #2c3e50;
    font-size: 1rem;
    font-weight: 700;
    margin: 8px 0;
}

.announcement-item p,
.daily-news-item p {
    color: #5a6c7d;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 8px 0;
}

.item-date {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    color: #7f8c8d;
    font-size: 0.8rem;
}

/* 滚动条美化 */
.content-scroll::-webkit-scrollbar {
    width: 6px;
}

.content-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.content-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent-purple));
    border-radius: 3px;
}

/* 可点击的项目样式 */
.announcement-item.clickable,
.daily-news-item.clickable {
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.announcement-item.clickable::after,
.daily-news-item.clickable::after {
    content: '›';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--color-primary);
    opacity: 0;
    transition: all 0.3s ease;
}

.announcement-item.clickable:hover::after,
.daily-news-item.clickable:hover::after {
    opacity: 1;
    right: 10px;
}

.announcement-item.clickable:hover,
.daily-news-item.clickable:hover {
    transform: translateX(5px);
    background: linear-gradient(135deg, 
        rgba(88, 166, 255, 0.1) 0%, 
        rgba(147, 112, 219, 0.1) 100%);
    box-shadow: 0 5px 20px rgba(88, 166, 255, 0.3);
}

/* 返回按钮样式 */
.back-to-list-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, 
        rgba(88, 166, 255, 0.2), 
        rgba(147, 112, 219, 0.2));
    border: 1px solid var(--color-border);
    border-radius: 20px;
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.back-to-list-btn:hover {
    background: linear-gradient(135deg, 
        rgba(88, 166, 255, 0.3), 
        rgba(147, 112, 219, 0.3));
    transform: translateX(-5px);
    box-shadow: 0 3px 10px rgba(88, 166, 255, 0.3);
}

/* 详情内容样式 */
.detail-content {
    padding: 20px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(240, 240, 255, 0.95) 100%);
    border-radius: 15px;
    box-shadow: inset 0 0 20px rgba(88, 166, 255, 0.1);
}

.detail-content h3 {
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.detail-content h4 {
    color: #333;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 20px 0 10px 0;
}

.detail-content p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 15px;
}

.detail-content ul {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.detail-content li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    color: #555;
    line-height: 1.6;
}

.detail-content li::before {
    content: '🏆';
    position: absolute;
    left: 0;
    top: 0;
}

/* 奖励列表特殊样式 */
.reward-list {
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.1), 
        rgba(255, 192, 203, 0.1));
    border-radius: 10px;
    padding: 15px;
    margin: 20px 0;
}

.reward-list li {
    padding: 10px 0 10px 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.reward-list li:last-child {
    border-bottom: none;
}

.reward-list li strong {
    color: var(--color-primary);
    font-weight: 700;
}

/* 警告信息样式 */
.warning-box {
    background: linear-gradient(135deg, 
        rgba(255, 0, 0, 0.05), 
        rgba(255, 100, 0, 0.05));
    border: 2px solid rgba(255, 0, 0, 0.2);
    border-radius: 10px;
    padding: 15px;
    margin-top: 20px;
}

.warning-box p {
    color: #d32f2f;
    font-weight: 600;
    margin: 0;
}

/* 视图切换动画 */
.content-list-view,
.content-detail-view {
    animation: fadeIn 0.4s ease;
}

/* ===== 全屏详情视图样式 ===== */

/* 详情视图容器 */
.announcement-detail-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(13, 17, 23, 0.95) 0%, 
        rgba(88, 166, 255, 0.05) 50%, 
        rgba(147, 112, 219, 0.1) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    z-index: 5;
    animation: slideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* 详情页头部 */
.detail-header {
    flex-shrink: 0;
    padding: 20px 30px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(13, 17, 23, 0.5);
    display: flex;
    align-items: center;
    gap: 20px;
}

.back-to-list-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, 
        rgba(88, 166, 255, 0.2), 
        rgba(147, 112, 219, 0.2));
    border: 1px solid var(--color-border);
    border-radius: 25px;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.back-to-list-btn:hover {
    background: linear-gradient(135deg, 
        rgba(88, 166, 255, 0.3), 
        rgba(147, 112, 219, 0.3));
    transform: translateX(-5px);
    box-shadow: 0 5px 20px rgba(88, 166, 255, 0.4);
}

.detail-title {
    flex: 1;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(147, 112, 219, 0.5);
}

/* 详情页主体 */
.detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
    min-height: 0;
}

.detail-content-wrapper {
    max-width: 900px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        inset 0 0 60px rgba(88, 166, 255, 0.05);
    animation: fadeInUp 0.6s ease;
}

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

/* 详情内容样式 */
.detail-content-wrapper h3 {
    color: var(--color-primary);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 3px solid var(--color-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail-content-wrapper h4 {
    color: #2c3e50;
    font-size: 1.3rem;
    font-weight: 600;
    margin: 30px 0 15px 0;
    padding-left: 15px;
    border-left: 4px solid var(--color-accent-purple);
}

.detail-content-wrapper p {
    color: #555;
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 20px;
}

.detail-content-wrapper strong {
    color: var(--color-primary);
    font-weight: 700;
}

/* 奖励列表美化 */
.reward-list {
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.15), 
        rgba(147, 112, 219, 0.1));
    border-radius: 15px;
    padding: 25px;
    margin: 25px 0;
    list-style: none;
}

.reward-list li {
    padding: 15px 20px;
    margin-bottom: 15px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.reward-list li:hover {
    transform: translateX(10px);
    box-shadow: 0 5px 20px rgba(147, 112, 219, 0.2);
}

.reward-list li:last-child {
    margin-bottom: 0;
}

/* 警告框美化 */
.warning-box {
    background: linear-gradient(135deg, 
        rgba(255, 0, 0, 0.08), 
        rgba(255, 100, 0, 0.08));
    border: 2px solid rgba(255, 0, 0, 0.3);
    border-radius: 15px;
    padding: 20px;
    margin-top: 30px;
    position: relative;
    overflow: hidden;
}

.warning-box::before {
    content: '⚠️';
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 80px;
    opacity: 0.1;
}

.warning-box p {
    color: #d32f2f;
    font-weight: 600;
    margin: 5px 0;
    position: relative;
    z-index: 1;
}

/* 隐藏看板娘在详情页 */
.announcement-detail-view ~ .announcement-character {
    display: none;
}

/* 详情页滚动条美化 */
.detail-body::-webkit-scrollbar {
    width: 8px;
}

.detail-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.detail-body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent-purple));
    border-radius: 4px;
}

/* ===== 丘比前线报专属样式 ===== */

/* 日报元信息 */
.daily-meta {
    text-align: center;
    padding: 15px;
    margin-bottom: 25px;
    background: linear-gradient(135deg, 
        rgba(88, 166, 255, 0.1), 
        rgba(147, 112, 219, 0.1));
    border-radius: 15px;
    font-family: var(--font-display);
    color: var(--color-primary);
}

.daily-meta .daily-date {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
}

.daily-meta .daily-time {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* 列表样式 */
.news-list {
    list-style: none;
    padding: 0;
}

.news-list li {
    padding: 18px 20px;
    margin-bottom: 12px;
    background: #fdfdff;
    border-radius: 12px;
    border: 1px solid #e7dffd;
    counter-increment: news-counter;
    position: relative;
    padding-left: 60px;
    color: #495057;
    font-size: 1.05rem;
    transition: all 0.3s ease;
}

.news-list li::before {
    content: counter(news-counter);
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    line-height: S32px;
    text-align: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent-purple));
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(88, 166, 255, 0.3);
}

.news-list li strong {
    color: #ae4fd6; /* 紫色加深，更突出 */
    font-weight: 700;
}

/* "马赛克" 样式 */
.news-list li.blurred {
    color: transparent;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    cursor: help;  /* 鼠标悬停时显示问号 */
    transition: all 0.2s ease-in-out;
}

.news-list li.blurred:hover {
    color: #495057;  /* 鼠标悬停时显示内容 */
    text-shadow: none;
}

/* 表情符号样式 */
.news-list .emoji {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    font-size: 1.2rem;
    animation: bounceIn 0.5s ease;
}

@keyframes bounceIn {
    0% { transform: scale(0.5); }
    80% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* --- [SECTION 10] 响应式设计 --- */
@media (max-width: 780px) { /* ============== 整个区域从此开始复制 ============== */

    /* 1. 全局布局微调 */
    .gallery-content, .tags-filter-container, .top-navbar { 
        padding-left: 15px; 
        padding-right: 15px; 
    }

    .navbar-search { 
        max-width: 150px; 
        flex-grow: 1;
    }
    
    .navbar-search .search-input { 
        font-size: 0.9rem; 
    }

    .modal-content {
        max-height: 95vh;
        border-radius: 20px;
    }

    .modal-work-title {
        font-size: 1.5rem;
    }

    /* 这条规则是关键！它取代了旧的 position: static，让JS的瀑布流算法生效 */
    .work-card { 
        position: absolute !important;
        margin-bottom: 0px !important; /* 瀑布流不再需要 margin */
        opacity: 0;
        transform: scale(0.95);
        /* 默认样式，会被手机端样式覆盖 */
        display: block; 
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

        /* 禁用复杂阴影效果 */
    .work-card {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    .work-card:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    .work-card, .load-more-btn, .side-nav, .modal-content, .profile-card, .notification-panel {
        /* 我们只对这些主要的、有过渡动画的“大块”元素简化动画时长 */
        transition-duration: 0.3s !important;
        animation-duration: 0.3s !important;
    }
    
    .magic-circle .ring {
        animation: none;
        border: 2px solid var(--color-primary);
    }
    /* 滚动时禁用动画 */
    body.is-scrolling * {
        transition: none !important;
        animation: none !important;
    }

    /* 3. 【全新】手机端专用卡片样式 */

    /* 为手机样式的卡片设置背景图 */
    .work-card.mobile-style {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: auto; /* 让卡片高度由内容和自身比例决定 */
    }

    /* 在手机端隐藏电脑版卡片的内部结构 */
    .work-card .card-image-container,
    .work-card .card-content {
        display: none;
    }
    
    /* 内容覆盖层，负责创建宽高比和定位内容 */
    .mobile-card-overlay {
        position: relative;
        width: 100%;
        /* 关键：创建3:4的宽高比 (100% / (3/4) = 133.33%) */
        /* JS 会读取这个元素的高度来进行瀑布流计算 */
        padding-top: 133.33%; 
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* 把所有内部元素推到底部 */
        border-radius: var(--border-radius-main);
        overflow: hidden; /* 防止内部元素溢出圆角 */
    }

    /* 文字下方的渐变蒙层，保证文字在任何背景图下都清晰可见 */
    .mobile-card-overlay::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 70%; /* 渐变覆盖下半部分 */
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0,0,0,0.5) 40%, transparent 100%);
        z-index: 1; /* 确保在内容之下，但在背景图之上 */
    }

    /* 卡片内容区域的容器（标题和简介） */
    .mobile-card-content {
        position: relative;
        z-index: 2; /* 浮在蒙层之上 */
        padding: 0 12px 10px 12px;
    }
    
.mobile-style .card-title {
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 700;
    /* 【修改】简化文字阴影 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    margin-bottom: 4px;
}

.mobile-style .card-description {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    /* 【修改】简化文字阴影 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    margin-bottom: 6px;
}

    
    /* 卡片底部区域的容器（作者和数据） */
    .mobile-card-footer {
        position: relative;
        z-index: 2; /* 同样浮在蒙层之上 */
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px 12px 12px;
        min-height: 28px; 
    }

    .mobile-style .card-author .card-author-avatar {
        width: 24px;
        height: 24px;
        border: 1px solid rgba(255, 255, 255, 0.6);
        box-shadow: 0 0 2px rgba(0,0,0,0.5);
    }
    
    .mobile-card-stats {
        flex-direction: column; /* 垂直排列它的子元素（那两行）*/
        align-items: flex-end; /* 让两行都向右对齐 */
        gap: 4px; /* 在两行之间增加一点小间距 */
    }

    /* 2. 创建包裹标签和设定的小容器 */
    .stats-misc-row {
      display: flex; /* 让它内部的 "标签" 和 "设定" 水平排列 */
      gap: 10px; /* 恢复它们之间的间距 */
    }

        /* 3. 突出显示热度值 */
    .mobile-card-stats .stat-item-heat {
      font-size: 1rem;       /* 字体更大 */
      font-weight: 700;    /* 字体更粗 */
      color: #fff;         /* 纯白色，更醒目 */
    }
    
    .mobile-card-stats .stat-item-heat i {
      color: var(--color-primary); /* 热度的火焰图标用主题色 */
      text-shadow: 0 0 5px var(--color-primary); /* 给图标加一点辉光效果 */
    }

    /* 4. 让设定和标签的文字稍微变淡，突出热度 */
    .stats-misc-row .stat-item {
        font-size: 0.7rem;     /* 字体稍小 */
        opacity: 0.8;          /* 透明度稍低 */
    }

    .mobile-card-stats .stat-item {
        font-size: 0.75rem;
        font-weight: 500;
        color: #fff;
        opacity: 0.9;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .mobile-card-stats .stat-item i {
        font-size: 0.7rem;        
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }

        .load-more-container {
        position: relative; 
        z-index: 5;
    }
  /* ==== 【第二版设计】移动端卡片信息布局 ==== */
    
    /* 确保卡片内容区域填充方式正确 */
    .mobile-card-overlay {
        position: relative;
        width: 100%;
        padding-top: 133.33%; /* 保持卡片比例 */
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        border-radius: var(--border-radius-main);
        overflow: hidden;
    }
    
    /* 渐变遮罩效果：顶部和底部都有渐变 */
.mobile-card-overlay::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    /* 【修改】简化渐变，减少GPU负担 */
    background: linear-gradient(to top, 
        rgba(0,0,0,0.8) 0%, 
        transparent 60%);
    z-index: 1;
}

    
    /* 热度角标 - 左上角 */
.heat-corner {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    /* 【修改】移除backdrop-filter和box-shadow */
    background-color: rgba(0, 0, 0, 0.7);
    /* backdrop-filter: blur(8px); 删除这行 */
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); 删除这行 */
}

    
    .heat-corner i {
        color: #ff7b00; /* 保留火焰图标的橙色调 */
    }
    
    /* 卡片内容区域 - 标题和描述 */
    .mobile-card-content {
        position: relative;
        z-index: 2;
        padding: 0 15px;
        margin-bottom: 8px;
    }
    
    .mobile-style .card-title {
        font-size: 0.95rem;
        line-height: 1.4;
        font-weight: 700;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
        margin-bottom: 4px;
    }
    
    .mobile-style .card-description {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.85);
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
        margin-bottom: 6px;
    }
    
    /* 新的卡片底部 */
    .mobile-card-footer-new {
        position: relative;
        z-index: 2;
        padding: 0 15px 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    /* 作者信息行 */
    .author-info-row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%; /* 让作者信息占据整行 */
    }
    
    /* 作者头像 */
    .author-avatar {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        flex-shrink: 0;
    }
    
    /* 作者名称 - 不再限制宽度 */
    .author-name {
        font-size: 0.85rem;
        font-weight: 600;
        color: #fff;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 统计数据行 */
    .card-stats-row {
        display: flex;
        gap: 10px;
    }
    
    /* 统计徽章 - 更加低调的设计 */
    .stat-badge {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.85);
    }
    
    .stat-badge i {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.75rem;
    }
    
    /* 移除旧的移动端卡片样式 */
    .mobile-card-footer,
    .mobile-card-stats,
    .stats-misc-row,
    .mobile-card-info-area,
    .mobile-info-row,
    .author-row,
    .stats-row,
    .heat-badge,
    .author-info {
        display: none !important;
    }

    /* 1. 基础外观：告别蓝色描边，拥抱现代感。 */
    .load-more-btn {
        width: 90%;             /* 按钮宽度占90%，更大气 */
        max-width: 320px;       /* 但也别太宽，限制最大宽度 */
        margin: 0 auto;         /* 自动居中 */
        
        /* 核心：用深色渐变背景代替透明背景 */
        background: linear-gradient(145deg, var(--color-surface) 0%, #20242a 100%);  
        color: var(--color-text-primary); /* 文字颜色改为主要的文字白 */
        border: 1px solid var(--color-border); /* 边框用更柔和的轮廓色 */
        /* 使用 box-shadow 创造立体感和光晕 */
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4), /* 底部阴影，产生悬浮感 */
                    inset 0px 1px 2px rgba(255, 255, 255, 0.05); /* 内部高光，增加质感 */
        padding-top: 16px;      /* 增加垂直内边距，让按钮更饱满 */
        padding-bottom: 16px;
        font-size: 1rem;
        letter-spacing: 2px; /* 增加文字间距，更显精致 */
    }

    /* 2. 交互效果：让点击更有回馈感。 */
    .load-more-btn:hover:not(:disabled) {
        /* 鼠标悬浮时，向上平移，阴影变大，产生“浮起来”的效果 */
        transform: translateY(-4px); 
        box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.5), /* 底部阴影变大 */
                    inset 0px 1px 2px rgba(255, 255, 255, 0.05);
        
        /* 颜色也变亮一些 */
        background: linear-gradient(145deg, #2a2f37 0%, #20242a 100%);
        color: var(--color-text-heading);
    }
    
    /* 3. 禁用状态：加载完也要保持风度。 */
    .load-more-btn:disabled {
        background: var(--color-surface); /* 背景变平 */
        border-color: var(--color-border);
        color: var(--color-text-secondary);
        opacity: 0.6; /* 降低透明度 */
        box-shadow: none; /* 去掉所有阴影 */
    }

        /* 1. 卡片主体调整：改变宽高比，适配竖屏 */
    .profile-card {
        width: 95%; /* 宽度占满手机屏幕，但留一点边距 */
        max-width: 400px;
        aspect-ratio: auto; /* 【核心】禁用桌面的16:9扁平比例 */
        height: auto;       /* 让高度由内容自动撑开 */
        padding: 20px;
        max-height: 90vh;   /* 确保在小手机上不会超出屏幕 */
        overflow-y: auto;   /* 如果内容实在太多，允许内部滚动 */
    }

    /* 2. 重排核心布局：左右 -> 上下 */
    .profile-card-main {
        flex-direction: column; /* 【核心】将左右布局改为上下堆叠布局 */
        text-align: center; /* 让文字居中，更适合移动端 */
    }

    .profile-card-left {
        align-items: center;  /* 让左侧(现在是上方)的内容居中 */
    }

    /* 3. 头像区域调整：移动到中间 */
    .profile-card-right {
        order: -1;  /* 【技巧】将头像区域的顺序提前，显示在最上面 */
        margin-bottom: 25px; /* 和下方的文字信息拉开距离 */
    }

    .profile-avatar-wrapper {
        width: 120px;  /* 给头像一个固定的小尺寸 */
        height: 120px; /* 保持1:1比例 */
        padding-top: 0;
        transform: none; /* 取消旋转效果 */
    }

    /* 4. 字体大小调整：全面缩小以适应屏幕 */
    .profile-card-title {
        font-size: 2.5rem; /* 大标题缩小 */
        margin-bottom: 10px;
    }

    .profile-username {
        font-size: 1.5rem;    /* 用户名缩小 */
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
    
    .info-group-title {
        margin: 0 auto 10px auto; /* 让黑底标题居中 */
    }

    .info-group-content {
        font-size: 0.9rem; /* 正文内容缩小 */
    }

    /* 5. 装饰性元素调整：在小屏幕上简化或隐藏 */
    .title-seal {
        /* Seal章太小看不清，可以选择隐藏或大幅缩小 */
        display: none; 
    }

    .profile-vertical-text {
        display: none; /* 竖排诗句非常占空间，在移动端果断隐藏 */
    }

    /* 6. 底部按钮调整：撑满宽度，更易点击 */
    .profile-footer {
        padding: 20px;
        background: none; /* 去掉渐变背景，更简洁 */
        position: relative; /* 取消绝对定位 */
    }

    .profile-actions {
        width: 100%; /* 让按钮容器撑满 */
    }

    .profile-action-btn {
        flex: 1; /* 【核心】让两个按钮平分宽度 */
        font-size: 1rem;
        padding: 14px 10px;
    }

        /* --- [老师的新增区域 V4] 评论区移动端适配 --- */
    
    /* 1. 调整评论弹窗本体的内边距，给内容更多空间 */
    .modal-body {
        padding: 20px 15px; /* 左右内边距减小 */
    }

    /* 2. 让时间戳和作者名在同一行，但左右分开 */
    .comment-header {
        flex-wrap: wrap; /* 允许在狭窄空间换行 */
    }

    /* 调整用户名和时间显示 */
    .comment-author {
        margin-right: 8px;
    }

    .comment-header .comment-author {
      flex-grow: 1; /* 让作者名占据多余空间，把时间推到右边 */
    }

    /* 3. 简化交互按钮，只显示图标 */
    .comment-footer {
       gap: 5px; /* 按钮之间的间距减小 */
       justify-content: flex-end; /* 让所有按钮靠右对齐 */
    }
    
    .comment-action-btn {
        padding: 8px 10px; /* 调整内边距，更像一个方形按钮 */
    }

    /* 核心：隐藏按钮内的文字，只留图标 */
    .comment-action-btn span {
        display: none;
    }
    
    /* 让图标稍微大一点，方便点击 */
    .comment-action-btn i {
        margin-right: 0; /* 图标右侧不再需要边距 */
        font-size: 1rem;
    }

    /* 特殊调整点赞按钮，因为它的span里是数字，我们需要保留下来 */
    .comment-action-btn.like-btn .like-count {
        display: inline-block; /* 让点赞数重新显示出来 */
        font-size: 0.9rem;
    }

    /* 4. 优化回复输入框 */
    .reply-form {
      flex-direction: column; /* 让输入框和发送按钮上下排列 */
      align-items: flex-end; /* 让发送按钮靠右 */
      gap: 8px; 
    }
    /* 优化回复表单 */
    .reply-form textarea {
        min-height: 36px;
        padding: 6px 10px;
    }

    .reply-form button {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
    
    /* 修改回复引用样式 */
    .reply-to {
        display: block; /* 让引用单独占一行 */
        margin-bottom: 4px;
        font-size: 0.85rem;
    }    

     /* 减少评论项的间距 */
    .comment-item {
        gap: 10px; /* 减少头像和内容间的间隙 */
        padding: 12px 0; /* 减少上下内边距 */
    }
    
    /* 减小头像尺寸 */
    .comment-avatar {
        width: 32px;
        height: 32px;
    }
    
    /* 最关键：减少嵌套回复的左侧缩进 */
    .replies-container {
        margin-left: 20px; /* 大幅减少左侧缩进 */
        padding-left: 10px; /* 稍微减少内边距 */
    }
    
    /* 对于二级回复的进一步嵌套，更加减少缩进 */
    .replies-container .replies-container {
        margin-left: 10px;
        padding-left: 8px;
    }
    
    /* 调整评论内容文字大小 */
    .comment-content {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    /* 评论操作按钮调整 */
    .comment-footer {
        gap: 12px; /* 减少按钮间距 */
        margin-top: 8px;
    }
    
    /* 回复输入框调整 */
    .reply-form {
        gap: 8px;
    }
    
    /* 扁平化回复，减少视觉层级 */
    .replies-container .comment-item {
        background-color: rgba(147, 112, 219, 0.03); /* 微弱背景色标示嵌套 */
        border-radius: 8px;
        padding: 8px;
        margin-top: 4px;
    }

    /* 处理嵌套回复的样式 */
    .nested-comment {
        position: relative;
    }
    
    /* 添加一个小指示标，更清晰显示这是一个回复 */
    .nested-comment::before {
        content: "";
        position: absolute;
        top: 0;
        left: -10px;
        width: 8px;
        height: 1px;
        background-color: rgba(147, 112, 219, 0.4);
    }

    /* ===== 移动端卡片优化 ===== */
    
    /* 卡片整体调整 */
    .announcement-card {
        position: relative;
        margin-bottom: 20px;
    }
    
    /* 将缎带改为贴片式标签 */
    .card-ribbon {
        position: absolute;
        top: 0;
        right: 0;
        left: auto;
        transform: none;
        z-index: 10;
    }
    
    .card-ribbon span {
        display: inline-block;
        padding: 5px 12px;
        border-radius: 0 15px 0 15px;  /* 特殊形状 */
        background: rgba(255, 107, 107, 0.9);
        color: white;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10px);
    }
    
    .daily-card .card-ribbon span {
        background: rgba(78, 205, 196, 0.9);
    }
    
    /* 卡片头部优化 */
    .card-header {
        height: 100px;  /* 稍微降低高度 */
    }
    
    /* 标题区域优化 */
    .card-title-overlay {
        padding: 12px 15px;
        background: linear-gradient(to top, 
            rgba(0, 0, 0, 0.9), 
            rgba(0, 0, 0, 0.7) 50%, 
            transparent);
    }
    
    .card-title-overlay h2 {
        font-size: 1.1rem;
        text-align: left;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }
    
    /* 内容区域优化 */
    .card-content {
        padding: 15px;
    }
    
    /* 公告项优化 */
    .announcement-item,
    .daily-news-item {
        padding: 12px;
        margin-bottom: 12px;
        background: linear-gradient(135deg, 
            rgba(245, 247, 250, 0.95) 0%, 
            rgba(195, 207, 226, 0.95) 100%);
    }
    
    .announcement-item h4,
    .daily-news-item h4 {
        font-size: 0.95rem;
        line-height: 1.4;
    }
    
    .announcement-item p,
    .daily-news-item p {
        font-size: 0.85rem;
        line-height: 1.5;
    }
    
    /* 添加一个浮动指示器提示可以滚动 */
    .content-scroll {
        position: relative;
    }
    
    .content-scroll::after {
        content: '⬇ 滑动查看更多';
        position: sticky;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        padding: 5px;
        background: linear-gradient(to top, 
            rgba(255, 255, 255, 0.9), 
            transparent);
        color: #999;
        font-size: 0.75rem;
        pointer-events: none;
    }
    
    /* 当滚动到底部时隐藏指示器 */
    .content-scroll::-webkit-scrollbar {
        width: 3px;
    }

    .announcement-content {
        width: 95%;
        height: 95vh;
        -webkit-tap-highlight-color: transparent;  /* 移除默认的点击高亮 */
    }
    
    .announcement-character {
        width: 150px;
        right: 5px;
        bottom: 5px;
        opacity: 0.9;  /* 默认透明度设为 0.9 */
        z-index: 10;
        transition: opacity 0.15s ease-out;  /* 快速响应 */
        will-change: opacity;  /* 优化性能 */
        pointer-events: none;  /* 确保不会阻挡点击 */
    }
    
    .announcement-body {
        grid-template-columns: 1fr;
        padding: 20px 15px;
    }
    
    .announcement-title .title-text {
        font-size: 1.4rem;
    }

        /* 触摸时的涟漪效果（可选） */
    .announcement-content:active::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
        transform: translate(-50%, -50%);
        pointer-events: none;
        animation: touchRipple 0.6s ease-out;
    }
    
    @keyframes touchRipple {
        from {
            width: 0;
            height: 0;
            opacity: 1;
        }
        to {
            width: 300px;
            height: 300px;
            opacity: 0;
        }
    }
    
    /* 手机端触摸时的效果 */
    .announcement-content:active .announcement-character,
    .announcement-body:active ~ .announcement-character {
        opacity: 0.1 !important;  /* 触摸时透明度变为 0.1 */
    }

        /* 触摸相关的交互样式 */
    @media (pointer: coarse) {  /* 检测触摸设备 */
        .announcement-character {
            opacity: 0.9;
            transition: opacity 0.2s ease;  /* 更快的响应速度 */
        }
        
        /* 当用户触摸内容区域时 */
        .announcement-content:active .announcement-character {
            opacity: 0.1;
        }
        
        /* 当用户触摸滚动区域时 */
        .announcement-body:active ~ .announcement-character,
        .announcement-body:focus-within ~ .announcement-character {
            opacity: 0.1;
        }
        
        /* 触摸卡片时的效果 */
        .announcement-card:active {
            transform: scale(0.98);  /* 轻微缩小，提供触摸反馈 */
        }
    }

    .back-to-list-btn {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
    
    .detail-content {
        padding: 15px;
    }
    
    .detail-content h3 {
        font-size: 1.2rem;
    }
    
    .announcement-item.clickable::after,
    .daily-news-item.clickable::after {
        opacity: 1;  /* 移动端始终显示箭头 */
        right: 10px;
    } 

        .detail-header {
        padding: 15px 20px;
        gap: 15px;
    }
    
    .detail-title {
        font-size: 1.3rem;
    }
    
    .back-to-list-btn {
        padding: 8px 15px;
        font-size: 0.9rem;
    }
    
    .detail-body {
        padding: 20px 15px;
    }
    
    .detail-content-wrapper {
        padding: 25px 20px;
        border-radius: 15px;
    }
    
    .detail-content-wrapper h3 {
        font-size: 1.3rem;
    }
    
    .detail-content-wrapper h4 {
        font-size: 1.1rem;
    }
    
    .detail-content-wrapper p {
        font-size: 0.95rem;
    }
    
    .reward-list li {
        padding: 12px 15px;
        font-size: 0.95rem;
    }

} /* ============== 整个区域在此结束 ============== */