*{margin:0;padding:0;box-sizing:border-box;}
a{text-decoration:none;}
body{font-family:"Microsoft YaHei", sans-serif;padding-top:60px;}
.header{position:fixed;top:0;left:0;right:0;height:60px;background:white;box-shadow:0 2px 5px rgba(0,0,0,0.1);z-index:50;display:flex;justify-content:center;align-items:center;}
.container{width:100%;max-width:800px;height:100%;padding:0 15px;display:flex;align-items:center;justify-content:space-around;}
.logo{display:flex;flex-direction:column;align-items:center;}
.logo-main{color:#007bff;font-weight:bold;font-size:20px;}
.logo-sub{color:#ff7f00;font-size:12px;}
.search{display:flex;}
.search input{padding:6px 12px;border:1px solid #ddd;outline:none;border-radius:4px 0 0 4px;width:200px;}
.search button{padding:6px 12px;background:#007bff;color:white;border:none;cursor:pointer;border-radius:0 4px 4px 0;}
@media (max-width: 768px){
.container{max-width:100%;}
.logo-main{font-size:18px;}
.search input{width:150px;padding:5px 10px;}
.search button{padding:5px 10px;}
}
.banner{background:#007bff;color:white;padding:40px 20px;text-align:center;margin-bottom:30px;}
.banner h1{font-size:25px;margin-bottom:10px;}
.banner p{font-size:15px;max-width:700px;margin:0 auto;opacity:0.9;}
.main-wrapper{max-width:1170px;margin:0 auto;padding:0 15px;display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:5px;}
.main-content{-webkit-box-flex:1;-ms-flex:1;flex:1;}
.section-title{font-size:16px;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #007bff;color:#333;}
.content-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:10px;margin-bottom:20px;}
.content-item{padding:15px;border:1px solid #f0f0f0;border-radius:6px;transition:box-shadow 0.3s ease;}
.content-item:hover{box-shadow:0 3px 10px rgba(0,0,0,0.08);}
.item-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:10px;}
.item-number{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:30px;height:30px;color:white;border-radius:50%;margin-right:10px;font-weight:bold;-ms-flex-negative:0;flex-shrink:0;}
.num-1{background:#007bff;}
.num-2{background:#28a745;}
.num-3{background:#ffc107;}
.num-4{background:#dc3545;}
.num-5{background:#17a2b8;}
.num-6{background:#6610f2;}
.num-7{background:#fd7e14;}
.num-8{background:#20c997;}
.num-9{background:#e83e8c;}
.num-10{background:#2980b9;}
.item-title{font-size:16px;color:#333;-webkit-box-flex:1;-ms-flex:1;flex:1;}
.item-title:hover{color:#007bff;}
.item-desc{color:#666;font-size:14px;margin-bottom:10px;line-height:1.7;}
.item-meta{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-size:13px;color:#999;}
.grid-content{margin-bottom:5px;}
.grid-list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 -10px;}
.grid-item{width:50%;padding:0 10px 15px;}
.grid-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px 15px;border:1px solid #f0f0f0;border-radius:4px;white-space:nowrap;overflow:hidden;transition:all 0.2s ease;}
.grid-inner:hover{background-color:#f8f9fa;border-color:#e9ecef;}
.grid-number{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:24px;height:24px;color:white;border-radius:50%;margin-right:10px;font-size:12px;font-weight:bold;-ms-flex-negative:0;flex-shrink:0;}
.grid-title{font-size:15px;color:#333;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;margin-right:10px;}
.grid-title:hover{color:#007bff;}
.grid-popularity{color:#999;font-size:12px;-ms-flex-negative:0;flex-shrink:0;}
.sidebar{width:300px;-ms-flex-negative:0;flex-shrink:0;position:relative;}
.sidebar-card{background:white;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,0.05);overflow:hidden;margin-bottom:20px;}
.sidebar-title{background:#f8f9fa;padding:15px 20px;font-size:16px;font-weight:600;border-bottom:1px solid #f0f0f0;}
.sidebar-content{padding:10px;}
.hot-list{list-style:none;}
.hot-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px 0;border-bottom:1px dashed #f0f0f0;white-space:nowrap;}
.hot-item:last-child{border-bottom:none;}
.hot-item a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;}
.hot-item a:hover{color:#007bff;}
.hot-number{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:24px;height:24px;color:white;border-radius:50%;margin-right:10px;font-size:12px;font-weight:bold;-ms-flex-negative:0;flex-shrink:0;}
.hot-text{font-size:15px;overflow:hidden;text-overflow:ellipsis;}
.hot-count{color:#999;font-size:13px;white-space:nowrap;margin-left:10px;-ms-flex-negative:0;flex-shrink:0;}
.friend-links{font-size:15px;max-width:1170px;border:1px solid #f0f0f0;margin:0 auto 30px;padding:0 15px;border-radius:8px;}
.friend-links h3{padding-left:15px;border-left:4px solid #3690cf;font-weight:400;margin-bottom:10px;padding-bottom:10px;padding-top:8px;color:#333;border-bottom:1px solid rgba(221, 221, 221, .8);}
.links-container{padding:10px;}
.links-container a{color:#666;padding-left:5px;}
.links-container a:hover{color:#007bff;}
.footer{background:#f8f9fa;padding:10px 0 10px;border-top:1px solid #e9ecef;}
.footer-container{max-width:1170px;margin:0 auto;padding:0 15px;}
.footer-info{text-align:center;color:#666;font-size:13px;}
.footer-info div{margin-bottom:10px;}
.footer-info a{color:#007bff;}
@media (min-width: 769px){
.sidebar{margin-left:10px;}
}
@media (max-width: 768px){
.main-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:20px;}
.sidebar{width:100%;}
.banner h1{font-size:22px;}
.content-item{padding:8px;}
.grid-item{width:100%;}
.grid-title{font-size:14px;}
}