* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

:root {
--primary: #3a86ff;
--primary-dark: #2667cc;
--secondary: #8338ec;
--accent: #ff006e;
--dark: #121826;
--dark-light: #1e293b;
--light: #f8fafc;
--gray: #94a3b8;
--gray-light: #e2e8f0;
--border-radius: 12px;
--shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}

body {
background-color: var(--light);
color: #334155;
line-height: 1.6;
transition: var(--transition);
}

body.dark-mode {
background-color: var(--dark);
color: var(--light);
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

/* 导航栏样式 */
header {
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
position: sticky;
top: 0;
z-index: 100;
transition: var(--transition);
}

body.dark-mode header {
background-color: var(--dark-light);
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
}

.logo {
font-size: 24px;
font-weight: 700;
color: var(--primary);
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
}

.logo i {
font-size: 28px;
}

.nav-links {
display: flex;
list-style: none;
gap: 25px;
}

.nav-links a {
text-decoration: none;
color: inherit;
font-weight: 500;
transition: var(--transition);
padding: 8px 12px;
border-radius: var(--border-radius);
}

.nav-links a:hover, .nav-links a.active {
background-color: var(--primary);
color: white;
}

.nav-controls {
display: flex;
align-items: center;
gap: 15px;
}

.search-bar {
position: relative;
}

.search-bar input {
padding: 10px 15px 10px 40px;
border: 1px solid var(--gray-light);
border-radius: 30px;
width: 200px;
transition: var(--transition);
background-color: var(--light);
}

body.dark-mode .search-bar input {
background-color: var(--dark);
border-color: #374151;
color: var(--light);
}

.search-bar input:focus {
outline: none;
border-color: var(--primary);
width: 250px;
}

.search-bar i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--gray);
}

.theme-toggle {
background: none;
border: none;
cursor: pointer;
font-size: 20px;
color: inherit;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}

.theme-toggle:hover {
background-color: var(--gray-light);
}

body.dark-mode .theme-toggle:hover {
background-color: #374151;
}

/* 面包屑导航 */
.breadcrumb {
padding: 20px 0;
font-size: 14px;
color: var(--gray);
}

.breadcrumb a {
color: var(--primary);
text-decoration: none;
}

.breadcrumb span {
margin: 0 8px;
}

/* 主要内容布局 */
.main-content {
display: grid;
grid-template-columns: 1fr 300px;
gap: 30px;
padding: 20px 0 50px;
}

/* 文章区域样式 */
.article-header {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid var(--gray-light);
}

body.dark-mode .article-header {
border-bottom-color: #374151;
}

.article-title {
font-size: 2.5rem;
line-height: 1.2;
margin-bottom: 15px;
color: var(--dark);
}

body.dark-mode .article-title {
color: var(--light);
}

.article-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
font-size: 14px;
color: var(--gray);
}

.meta-item {
display: flex;
align-items: center;
gap: 5px;
}

.tag {
display: inline-block;
padding: 4px 12px;
background-color: var(--primary);
color: white;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
}

/* 文章内容样式 */
.article-content {
line-height: 1.8;
font-size: 1.1rem;
}

.article-content h2 {
margin: 40px 0 20px;
padding-bottom: 10px;
border-bottom: 2px solid var(--primary);
color: var(--dark);
}

body.dark-mode .article-content h2 {
color: var(--light);
}

.article-content h3 {
margin: 30px 0 15px;
color: var(--dark);
}

body.dark-mode .article-content h3 {
color: var(--light);
}

.article-content p {
margin-bottom: 20px;
}

.article-content ul, .article-content ol {
margin-left: 25px;
margin-bottom: 20px;
}

.article-content li {
margin-bottom: 8px;
}

.highlight-box {
background-color: #f0f7ff;
border-left: 4px solid var(--primary);
padding: 20px;
margin: 25px 0;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

body.dark-mode .highlight-box {
background-color: #1e3a5f;
}

.quote {
font-style: italic;
border-left: 4px solid var(--secondary);
padding-left: 20px;
margin: 25px 0;
color: var(--gray);
}

.image-container {
margin: 30px 0;
text-align: center;
}

.article-image {
max-width: 100%;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
}

.image-caption {
font-size: 14px;
color: var(--gray);
margin-top: 10px;
}

.internal-link {
color: var(--primary);
text-decoration: none;
border-bottom: 1px dotted var(--primary);
transition: var(--transition);
}

.internal-link:hover {
border-bottom-style: solid;
color: var(--primary-dark);
}

/* 侧边栏样式 */
.sidebar {
position: sticky;
top: 100px;
height: fit-content;
}

.sidebar-card {
background-color: white;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 20px;
margin-bottom: 25px;
transition: var(--transition);
}

body.dark-mode .sidebar-card {
background-color: var(--dark-light);
}

.sidebar-title {
font-size: 1.2rem;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid var(--gray-light);
color: var(--dark);
display: flex;
align-items: center;
gap: 10px;
}

body.dark-mode .sidebar-title {
color: var(--light);
border-bottom-color: #374151;
}

.sidebar-title i {
color: var(--primary);
}

/* 币圈快讯样式 */
.news-list {
list-style: none;
}

.news-item {
padding: 12px 0;
border-bottom: 1px dashed var(--gray-light);
transition: var(--transition);
}

body.dark-mode .news-item {
border-bottom-color: #374151;
}

.news-item:last-child {
border-bottom: none;
}

.news-item:hover {
background-color: #f8fafc;
padding-left: 10px;
border-radius: var(--border-radius);
}

body.dark-mode .news-item:hover {
background-color: #1a2332;
}

.news-title {
font-weight: 500;
margin-bottom: 5px;
line-height: 1.4;
}

.news-meta {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--gray);
}

.news-tag {
display: inline-block;
padding: 2px 8px;
background-color: var(--gray-light);
border-radius: 10px;
color: #475569;
}

body.dark-mode .news-tag {
background-color: #374151;
color: var(--gray);
}

.news-tag.market {
background-color: #dcfce7;
color: #166534;
}

body.dark-mode .news-tag.market {
background-color: #14532d;
color: #bbf7d0;
}

.news-tag.regulation {
background-color: #fef3c7;
color: #92400e;
}

body.dark-mode .news-tag.regulation {
background-color: #78350f;
color: #fde68a;
}

.news-tag.tech {
background-color: #dbeafe;
color: #1e40af;
}

body.dark-mode .news-tag.tech {
background-color: #1e3a8a;
color: #93c5fd;
}

/* 最新内容和热门内容样式 */
.content-list {
list-style: none;
}

.content-item {
display: flex;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px dashed var(--gray-light);
}

body.dark-mode .content-item {
border-bottom-color: #374151;
}

.content-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}

.content-image {
width: 70px;
height: 70px;
border-radius: 8px;
margin-right: 15px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
}

.content-info {
flex: 1;
}

.content-title {
font-weight: 500;
margin-bottom: 5px;
line-height: 1.3;
font-size: 0.95rem;
}

.content-meta {
font-size: 12px;
color: var(--gray);
display: flex;
align-items: center;
gap: 8px;
}

.hot-indicator {
display: inline-flex;
align-items: center;
gap: 3px;
color: #ef4444;
font-weight: 500;
}

.view-all {
display: block;
text-align: center;
padding: 10px;
background-color: var(--gray-light);
border-radius: var(--border-radius);
color: var(--dark);
text-decoration: none;
font-weight: 500;
margin-top: 15px;
transition: var(--transition);
}

body.dark-mode .view-all {
background-color: #374151;
color: var(--light);
}

.view-all:hover {
background-color: var(--primary);
color: white;
}

/* 文章底部区域 */
.article-footer {
margin-top: 50px;
padding-top: 30px;
border-top: 1px solid var(--gray-light);
}

body.dark-mode .article-footer {
border-top-color: #374151;
}

.content-feedback {
text-align: center;
padding: 30px;
background-color: #f8fafc;
border-radius: var(--border-radius);
margin-bottom: 30px;
}

body.dark-mode .content-feedback {
background-color: var(--dark-light);
}

.feedback-title {
margin-bottom: 15px;
}

.feedback-buttons {
display: flex;
justify-content: center;
gap: 15px;
}

.feedback-btn {
padding: 10px 25px;
border: 1px solid var(--gray-light);
border-radius: var(--border-radius);
background-color: white;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
}

body.dark-mode .feedback-btn {
background-color: var(--dark);
border-color: #374151;
color: var(--light);
}

.feedback-btn:hover {
background-color: var(--primary);
color: white;
border-color: var(--primary);
transform: translateY(-2px);
}

.feedback-btn.liked {
background-color: var(--primary);
color: white;
border-color: var(--primary);
}

.related-content {
margin-top: 40px;
}

.section-title {
font-size: 1.5rem;
margin-bottom: 20px;
color: var(--dark);
}

body.dark-mode .section-title {
color: var(--light);
}

.related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}

.related-card {
background-color: white;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
}

body.dark-mode .related-card {
background-color: var(--dark-light);
}

.related-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.1);
}

.related-image {
height: 160px;
background-color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 40px;
}

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

.related-title {
font-size: 1.1rem;
margin-bottom: 10px;
}

.related-link {
color: inherit;
text-decoration: none;
}

.related-link:hover .related-title {
color: var(--primary);
}

.related-excerpt {
font-size: 14px;
color: var(--gray);
margin-bottom: 15px;
}

.related-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
}

.related-tag {
font-size: 12px;
padding: 3px 8px;
background-color: var(--gray-light);
border-radius: 12px;
color: #475569;
}

body.dark-mode .related-tag {
background-color: #374151;
color: var(--gray);
}

/* 页脚样式 */
footer {
background-color: var(--dark);
color: white;
padding: 50px 0 20px;
}

.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 30px;
}

.footer-section h3 {
margin-bottom: 20px;
color: var(--primary);
}

.footer-links {
list-style: none;
}

.footer-links li {
margin-bottom: 10px;
}

.footer-links a {
color: #cbd5e1;
text-decoration: none;
transition: var(--transition);
}

.footer-links a:hover {
color: var(--primary);
padding-left: 5px;
}

.copyright {
text-align: center;
padding-top: 20px;
border-top: 1px solid #334155;
font-size: 14px;
color: #94a3b8;
}

/* 响应式设计 */
@media (max-width: 968px) {
.main-content {
    grid-template-columns: 1fr;
}

.sidebar {
    position: static;
    order: -1;
}

.navbar {
    flex-direction: column;
    align-items: flex-start;
}

.nav-links {
    margin-top: 15px;
    flex-wrap: wrap;
}

.nav-controls {
    margin-top: 15px;
    width: 100%;
    justify-content: space-between;
}

.search-bar input {
    width: 100%;
}
}

@media (max-width: 768px) {
.article-title {
    font-size: 2rem;
}

.related-grid {
    grid-template-columns: 1fr;
}

.feedback-buttons {
    flex-direction: column;
    align-items: center;
}

.feedback-btn {
    width: 200px;
    justify-content: center;
}
}
 .article-disclaimer {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: var(--border-radius);
    padding: 15px;
    font-size: 14px;
    color: #856404;
    text-align: center;
    margin-top: 20px;
}

body.dark-mode .article-disclaimer {
    background-color: #332701;
    border-color: #665200;
    color: #f1c40f;
}

/* 侧边栏链接统一样式 */
.sidebar a,
.sidebar a:link,
.sidebar a:visited {
  text-decoration: none;
  color: #334155;
}

/* 悬停/聚焦时可保持不下划线，并略微加深颜色（可选） */
.sidebar a:hover,
.sidebar a:focus {
  text-decoration: none;
  color: #1f2937; /* 可改回 #334155 如果不想变色 */
}

/* tag 容器内的所有链接：无下划线，白色 */
.tag a,
.tag a:link,
.tag a:visited {
  text-decoration: none;
  color: #fff;
}

/* 悬停/聚焦时也保持样式（可按需修改） */
.tag a:hover,
.tag a:focus,
.tag a:active {
  text-decoration: none;
  color: #fff;
}

/* 如果主题样式覆盖较强，可启用以下强制覆盖（谨慎使用） */
/* .tag a { text-decoration: none !important; color: #fff !important; } */