*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.8;color:#333;background:#f5f7fa}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
a{color:#03a9f4;text-decoration:none}
a:hover{text-decoration:underline}
.site-header{padding:15px 0;color:white}
.site-header .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.logo a{color:white;font-size:28px;font-weight:bold}
.main-nav{display:flex;gap:20px;flex-wrap:wrap}
.main-nav a{color:white;font-size:15px;font-weight:500}
.main-nav a:hover{opacity:.8;text-decoration:none}
.search-box{display:flex}
.search-box input{padding:8px 15px;border:none;border-radius:20px 0 0 20px;width:200px}
.search-box button{padding:8px 20px;border:none;background:#ff6b35;color:white;border-radius:0 20px 20px 0;cursor:pointer}
.hero{background:linear-gradient(135deg,#03a9f4dd,#2c3e50dd);color:white;padding:60px 0;text-align:center}
.hero h1{font-size:42px;margin-bottom:15px}
.hero p{font-size:18px;margin-bottom:30px;opacity:.9}
.hero-features{display:flex;justify-content:center;gap:30px;flex-wrap:wrap}
.feature{background:rgba(255,255,255,.2);padding:15px 25px;border-radius:30px;font-size:15px}
.main-content{display:grid;grid-template-columns:1fr 300px;gap:30px;padding:40px 20px}
.featured-section h2,.articles-section h2,.categories-section h2,.tags-section h2{margin-bottom:20px;font-size:24px;border-left:4px solid #03a9f4;padding-left:15px}
.featured-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:40px}
.featured-item{background:white;padding:25px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.featured-item h3{margin-bottom:10px}
.featured-item h3 a{color:#333}
.featured-item p{color:#666;margin-bottom:10px;font-size:14px}
.featured-meta{color:#999;font-size:13px}
.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.card{background:white;padding:25px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.05);transition:transform .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 5px 20px rgba(0,0,0,.1)}
.card-title{font-size:18px;margin-bottom:10px}
.card-title a{color:#333}
.card-meta{color:#999;font-size:13px;margin-bottom:10px}
.card-excerpt{color:#666;font-size:14px;margin-bottom:15px}
.read-more{color:#03a9f4;font-weight:500;font-size:14px}
.pagination{display:flex;justify-content:center;gap:10px;margin-top:30px}
.page-link{padding:8px 15px;border:1px solid #ddd;border-radius:5px;color:#666}
.page-link.active{background:#03a9f4;color:white;border-color:#03a9f4}
.categories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}
.category-card{background:white;padding:20px;border-radius:10px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.category-card h3{color:#03a9f4;margin-bottom:8px}
.category-card p{color:#666;font-size:13px}
.tags-cloud{display:flex;flex-wrap:wrap;gap:10px}
.tag{background:white;padding:8px 15px;border-radius:20px;color:#666;font-size:14px;box-shadow:0 2px 5px rgba(0,0,0,.05)}
.sidebar{display:flex;flex-direction:column;gap:20px}
.widget{background:white;padding:20px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.widget h3{margin-bottom:15px;font-size:16px;color:#333;border-bottom:2px solid #03a9f4;padding-bottom:8px}
.widget ul{list-style:none}
.widget li{padding:8px 0;border-bottom:1px solid #f0f0f0}
.widget li:last-child{border-bottom:none}
.widget li a{color:#666;font-size:14px}
.widget li a:hover{color:#03a9f4}
.friend-links{font-size:12px;line-height:1.8}
.friend-links a{color:#666}
.article-full{background:white;padding:40px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.05);grid-column:1}
.article-title{font-size:28px;margin-bottom:15px;line-height:1.4}
.article-meta{color:#999;font-size:14px;margin-bottom:25px;padding-bottom:15px;border-bottom:1px solid #eee}
.article-meta span{margin-right:15px}
.article-body{font-size:16px;line-height:2;color:#333}
.article-body h2{font-size:22px;margin:30px 0 15px}
.article-body h3{font-size:18px;margin:20px 0 10px}
.article-body p{margin-bottom:15px}
.article-body strong{color:#03a9f4}
.article-tags{margin-top:30px;padding-top:20px;border-top:1px solid #eee}
.article-tags .tag{margin:5px 5px 5px 0}
.article-nav{display:flex;justify-content:space-between;margin-top:30px;padding-top:20px;border-top:1px solid #eee}
.site-footer{background:#2c3e50;color:white;padding:40px 0 20px;margin-top:40px}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;margin-bottom:30px}
.footer-section h4{margin-bottom:15px;font-size:16px}
.footer-section a{color:#ccc;font-size:14px;margin-right:8px}
.footer-section a:hover{color:white}
.contact-info{color:#f39c12;font-size:14px;line-height:1.8}
.friend-links-list{display:flex;flex-wrap:wrap;gap:8px}
.friend-links-list a{color:#ccc;font-size:12px}
.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid #34495e;color:#999;font-size:13px}
.footer-bottom p{margin:5px 0}
@media(max-width:768px){
.main-content{grid-template-columns:1fr}
.hero h1{font-size:28px}
.main-nav{display:none}
.search-box{width:100%}
.search-box input{width:100px}
}