/* 全屏遮罩层 */
.details-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.98);
    z-index: 10000;
    display: none;
    overflow-y: auto;
}

/* 关闭按钮 */
.close-btn {
    position: absolute; top: 20px; right: 30px;
    background: #ff6b6b; color: white;
    border: none; padding: 10px 20px; border-radius: 5px;
    cursor: pointer; font-weight: bold; z-index: 10001;
}
.close-btn:hover { background: #ff5252; }

/* 内部排版 */
.details-container {
    display: flex; max-width: 1000px; margin: 80px auto 40px;
    background: #fff; border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); min-height: 600px;
}

/* 侧边栏导航 */
.sidebar-nav { width: 250px; background: #f4f7f8; border-right: 1px solid #eee; }
.sidebar-nav ul { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li a {
    display: block; padding: 20px; color: #555;
    text-decoration: none; font-weight: bold; border-bottom: 1px solid #eaeaea;
}
.sidebar-nav li a.active { background: #4acaa8; color: white !important; }

/* 内容区 */
.content-area { flex: 1; padding: 40px; }
.topic-content { display: none; animation: fadeIn 0.4s; }
.topic-content.active { display: block; }

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