.article-page { background: #fff; min-height: 100vh; padding-bottom: 70px; }
.article-header { position: fixed; top: 0; left: 0; right: 0; max-width: 750px; margin: 0 auto; z-index: 1000; background: #32B6CD; height: 50px; display: flex; align-items: center; padding: 0 10px; }
.article-header .back { width: 40px; height: 50px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; cursor: pointer; }
.article-header .title { flex: 1; text-align: center; color: #fff; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; }

.article-body { margin-top: 50px; padding: 15px; }
.article-body h1 { font-size: 20px; line-height: 1.5; margin-bottom: 10px; color: #222; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.article-meta { display: flex; font-size: 12px; color: #999; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0; }
.article-meta .source { flex: 1; }
.article-meta .time { flex-shrink: 0; }
.article-content { font-size: 16px; line-height: 1.8; color: #333; word-wrap: break-word; }
.article-content p { margin-bottom: 15px; }
.article-content img { max-width: 100%; height: auto; border-radius: 4px; margin: 10px 0; }
.article-content a { color: #32B6CD; }

.article-nav { margin-top: 20px; padding-top: 15px; border-top: 1px solid #f0f0f0; }
.article-nav .nav-title { font-size: 15px; font-weight: bold; margin-bottom: 10px; color: #333; }
.article-nav ul li { padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
.article-nav ul li a { font-size: 14px; color: #555; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.article-nav ul li a:hover { color: #32B6CD; }

.hot-articles { margin-top: 20px; padding-top: 15px; border-top: 1px solid #f0f0f0; }
.hot-articles h2 { font-size: 16px; font-weight: bold; color: #333; margin-bottom: 12px; }
.hot-articles ul { list-style: none; padding: 0; margin: 0; }
.hot-articles ul li { padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
.hot-articles ul li a { font-size: 14px; color: #32B6CD; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hot-articles ul li a:hover { color: #2aa3bc; }

.news-list-page { padding-top: 50px; padding-bottom: 60px; }
.news-list-page .page-header { position: fixed; top: 0; left: 0; right: 0; max-width: 750px; margin: 0 auto; z-index: 1000; background: #32B6CD; height: 50px; display: flex; align-items: center; padding: 0 10px; }
.news-list-page .page-header .back { width: 40px; height: 50px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; cursor: pointer; text-decoration: none; }
.news-list-page .page-header .title { flex: 1; text-align: center; color: #fff; font-size: 18px; }

.news-list-page .list-wrap { padding: 10px; }