:root{
  --bg:#f5f6f7;
  --white:#fff;
  --text:#333;
  --muted:#888;
  --link:#1a6fc4;
  --border:#e5e5e5;
  --pin:#d33;
  --code-bg:#f6f6f6;
  --max-width:1200px;
  --font-size:14px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:var(--font-size);}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  font-size:14px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;height:auto;display:block;}
ul,ol{list-style:none;}
input,button,textarea,select{font:inherit;color:inherit;}
.container{max-width:var(--max-width);margin:0 auto;padding:0 15px;}
.clearfix::after{content:"";display:block;clear:both;}

/* Header */
.header{
  background:var(--white);
  border-bottom:1px solid var(--border);
  padding:18px 0;
}
.header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.logo{font-size:24px;font-weight:bold;color:var(--text);line-height:1.3;}
.logo a{color:var(--text);}
.logo a:hover{text-decoration:none;}
.slogan{font-size:12px;color:var(--muted);font-weight:normal;margin-top:4px;}
.nav{display:flex;align-items:center;}
.nav ul{display:flex;align-items:center;}
.nav li{margin-left:24px;}
.nav a{color:var(--text);font-size:14px;padding:6px 0;display:block;}
.nav a:hover,.nav a.active{color:var(--link);text-decoration:none;}
.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--border);
  padding:6px 10px;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  color:var(--text);
}

/* Main layout */
.main{
  max-width:var(--max-width);
  margin:20px auto;
  padding:0 15px;
  display:flex;
  gap:20px;
  align-items:flex-start;
}
.content{flex:0 0 calc(66.666% - 10px);min-width:0;}
.sidebar{flex:0 0 calc(33.333% - 10px);min-width:0;}

/* Post list */
.post-list{background:var(--white);border:1px solid var(--border);}
.post-item{
  padding:18px 20px;
  border-bottom:1px solid var(--border);
}
.post-item:last-child{border-bottom:none;}
.post-title{
  font-size:17px;
  font-weight:bold;
  line-height:1.5;
  margin-bottom:8px;
}
.post-title a{color:var(--text);}
.post-title a:hover{color:var(--link);text-decoration:none;}
.post-pin{
  color:var(--pin);
  font-size:12px;
  font-weight:normal;
  margin-right:6px;
  border:1px solid var(--pin);
  padding:0 4px;
  vertical-align:1px;
}
.post-excerpt{
  color:var(--muted);
  font-size:13px;
  line-height:1.8;
  margin-bottom:8px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.post-meta{
  font-size:12px;
  color:var(--muted);
}
.post-meta a{color:var(--link);}
.post-meta span{margin-right:14px;}
.post-meta span:last-child{margin-right:0;}

/* Pagination */
.pagination{
  margin-top:20px;
  padding:14px 0;
  text-align:center;
  font-size:13px;
}
.pagination a,.pagination span{
  display:inline-block;
  padding:4px 12px;
  margin:0 3px;
  border:1px solid var(--border);
  background:var(--white);
  color:var(--text);
}
.pagination a:hover{color:var(--link);border-color:var(--link);text-decoration:none;}
.pagination .current{
  color:var(--white);
  background:var(--link);
  border-color:var(--link);
}
.pagination .disabled{color:#bbb;cursor:default;}

/* Sidebar widgets */
.widget{
  background:var(--white);
  border:1px solid var(--border);
  margin-bottom:20px;
  padding:15px 18px;
}
.widget:last-child{margin-bottom:0;}
.widget-title{
  font-size:15px;
  font-weight:bold;
  color:var(--text);
  border-left:3px solid var(--link);
  padding-left:10px;
  margin-bottom:12px;
  line-height:1.4;
}
.widget ul li{
  padding:6px 0;
  border-bottom:1px dashed var(--border);
  font-size:13px;
  line-height:1.6;
}
.widget ul li:last-child{border-bottom:none;}
.widget ul li a{color:var(--text);}
.widget ul li a:hover{color:var(--link);}
.hot-list li{display:flex;align-items:baseline;}
.hot-num{
  color:var(--muted);
  margin-right:8px;
  flex-shrink:0;
  font-size:13px;
}
.hot-list li:nth-child(1) .hot-num,
.hot-list li:nth-child(2) .hot-num,
.hot-list li:nth-child(3) .hot-num{color:var(--pin);}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;}
.tag-list a{
  display:inline-block;
  padding:2px 10px;
  border:1px solid var(--border);
  color:var(--text);
  font-size:12px;
  background:var(--white);
}
.tag-list a:hover{color:var(--link);border-color:var(--link);text-decoration:none;}
.comment-list li{padding:8px 0;}
.comment-author{color:var(--link);font-size:13px;}
.comment-text{color:var(--muted);font-size:12px;margin-top:2px;}

/* Footer */
.footer{
  background:var(--white);
  border-top:1px solid var(--border);
  padding:24px 0;
  margin-top:30px;
  text-align:center;
  font-size:13px;
  color:var(--muted);
}
.footer-links{margin-bottom:10px;}
.footer-links a{color:var(--muted);margin:0 12px;}
.footer-links a:hover{color:var(--link);}
.footer p{line-height:1.9;}
.footer a{color:var(--muted);}
.footer a:hover{color:var(--link);}

/* Article page */
.breadcrumb{
  font-size:12px;
  color:var(--muted);
  margin-bottom:15px;
  padding:10px 15px;
  background:var(--white);
  border:1px solid var(--border);
}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--link);}
.breadcrumb span{margin:0 6px;}
.article-wrap{
  background:var(--white);
  border:1px solid var(--border);
  padding:25px 30px;
}
.article-title{
  font-size:24px;
  font-weight:bold;
  color:var(--text);
  line-height:1.5;
  margin-bottom:12px;
}
.article-meta{
  font-size:12px;
  color:var(--muted);
  padding-bottom:15px;
  border-bottom:1px solid var(--border);
  margin-bottom:20px;
}
.article-meta a{color:var(--link);}
.article-meta span{margin-right:16px;}
.article-content{font-size:14px;line-height:1.9;color:var(--text);}
.article-content p{margin-bottom:16px;}
.article-content h2{
  font-size:19px;
  font-weight:bold;
  margin:26px 0 14px;
  padding-left:10px;
  border-left:3px solid var(--link);
  line-height:1.5;
}
.article-content h3{
  font-size:16px;
  font-weight:bold;
  margin:22px 0 12px;
}
.article-content ul,.article-content ol{
  margin:0 0 16px 24px;
}
.article-content ul li{list-style:disc;margin-bottom:6px;}
.article-content ol li{list-style:decimal;margin-bottom:6px;}
.article-content blockquote{
  border-left:3px solid var(--border);
  background:#fafafa;
  padding:12px 16px;
  margin:0 0 16px;
  color:#666;
  font-size:13px;
}
.article-content blockquote p{margin-bottom:0;}
.article-content table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:16px;
  font-size:13px;
}
.article-content table th,.article-content table td{
  border:1px solid var(--border);
  padding:8px 12px;
  text-align:left;
}
.article-content table th{background:#fafafa;font-weight:bold;}
.article-content img{margin:0 auto 16px;border:1px solid var(--border);}
.article-content code{
  background:var(--code-bg);
  padding:2px 6px;
  font-family:Consolas,Monaco,"Courier New",monospace;
  font-size:13px;
  color:#c7254e;
}
.article-content pre{
  background:var(--code-bg);
  border:1px solid var(--border);
  padding:14px 16px;
  overflow-x:auto;
  margin-bottom:16px;
  font-family:Consolas,Monaco,"Courier New",monospace;
  font-size:13px;
  line-height:1.7;
}
.article-content pre code{background:none;padding:0;color:var(--text);}
.article-tags{
  margin-top:25px;
  padding-top:15px;
  border-top:1px solid var(--border);
  font-size:13px;
  color:var(--muted);
}
.article-tags a{
  display:inline-block;
  margin:0 8px 6px 0;
  padding:2px 10px;
  border:1px solid var(--border);
  color:var(--text);
  font-size:12px;
}
.article-tags a:hover{color:var(--link);border-color:var(--link);text-decoration:none;}
.article-nav{
  margin-top:20px;
  padding-top:15px;
  border-top:1px solid var(--border);
  font-size:13px;
  line-height:2;
}
.article-nav a{color:var(--text);}
.article-nav a:hover{color:var(--link);}
.article-nav .nav-label{color:var(--muted);margin-right:6px;}

/* Responsive */
@media (max-width:860px){
  .main{flex-direction:column;}
  .content,.sidebar{flex:0 0 100%;width:100%;}
  .sidebar{margin-top:0;}
  .header-inner{padding:0 15px;}
  .nav-toggle{display:block;}
  .nav{
    display:none;
    width:100%;
    margin-top:12px;
    border-top:1px solid var(--border);
    padding-top:10px;
  }
  .nav.open{display:block;}
  .nav ul{flex-direction:column;align-items:flex-start;}
  .nav li{margin-left:0;width:100%;}
  .nav li a{padding:8px 0;border-bottom:1px dashed var(--border);}
  .nav li:last-child a{border-bottom:none;}
  .article-wrap{padding:20px;}
  .article-title{font-size:21px;}
}
@media (max-width:560px){
  .logo{font-size:20px;}
  .slogan{font-size:11px;}
  .post-item{padding:14px 15px;}
  .post-title{font-size:15px;}
  .post-meta span{margin-right:10px;}
  .article-wrap{padding:15px;}
  .article-title{font-size:19px;}
  .article-content h2{font-size:17px;}
  .article-content h3{font-size:15px;}
  .pagination a,.pagination span{padding:3px 9px;margin:0 2px;}
  .widget{padding:12px 15px;}
}