:root {
    --bg: #f6fbf9;
    --card: #ffffff;
    --muted: #8a8f94;
    --accent: #2f8f5e;
    --accent-2: #b9e6c6;
    --shadow: 0 6px 20px rgba(15,23,42,0.06);
    --max-width: 1100px;
    --content-width: 700px;
    --sidebar-width: 320px;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    gap: 28px;
    align-items: flex-start;
    margin-top: 20px;
    margin-bottom: 20px;
}

.main{
  width:var(--content-width);
  min-width:0;
}

.sidebar{
  width:var(--sidebar-width);
  flex:0 0 var(--sidebar-width);
  position:relative;
}

.hero{
  background: linear-gradient(90deg, rgba(47,143,94,0.06), rgba(185,230,198,0.06));
  border-radius:12px;
  padding:28px;
  display:flex;
  gap:18px;
  align-items:center;
  margin-bottom:22px;
  box-shadow: var(--shadow);
  border:1px solid rgba(20,32,50,0.03);
}
.hero .meta{flex:1;}
.hero h1{
  margin:0 0 6px 0;
  font-weight:700;
  font-size:28px;
  color:#0f2b20;
  font-size: 23px !important;
  line-height: 43px;
}
.hero p.lead{margin:0;color:var(--muted);font-size:14px;}

.cover{
  width:120px;
  height:120px;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(180deg,#ffffff,#f1f6f4);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(20,32,50,0.04);
}
.cover img{width:100%;height:100%;object-fit:cover;display:block}

.article {
  background:var(--card);
  border-radius:12px;
  padding:26px;
  box-shadow: var(--shadow);
  border:1px solid rgba(20,32,50,0.03);
}
.article .meta-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  color:var(--muted);
  font-size:13px;
}
.author-avatar{
  width:44px;height:44px;border-radius:50%;overflow:hidden;border:1px solid rgba(20,32,50,0.06)
}
.author-avatar img{width:100%;height:100%;object-fit:cover}
.article h2{
  margin:0 0 14px 0;
  font-size:22px;
  color:#0d2a1f;
}
.article p{margin:0 0 16px 0;color:#333}

.article .content{font-size:16px;color:#2b3b3a;}
article h3{
  margin-top:18px;
  margin-bottom:10px;
  color:#13432e;
  font-size: 13px !important;
  font-weight: bold !important;
}
.article .content img{
  max-width:100%;
  border-radius:8px;
  margin:12px 0;
  display:block;
}

article ul {
    list-style: inherit !important;
    margin: 0 40px !important;
}

article ol {
    list-style: decimal !important;
    margin: 0 40px !important;
}

.article .meta-bottom {
    display: flex;
    gap: 10px;
    padding-top: 20px;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid var(--second-light-color);
}
.tag{
  background: #f1f6f4;
  color:#2b6a4b !important;
  border-radius:999px;
  padding:0px 15px;
  font-size:13px;
  border:1px solid rgba(43,106,75,0.06);
}
.tag:hover {
    color: #2b6a4b !important;
}

.sidebar .card{
  background:var(--card);
  padding:16px;
  border-radius:10px;
  box-shadow: var(--shadow);
  border:1px solid rgba(20,32,50,0.03);
  margin-bottom:16px;
}
.sidebar .card > * {
    line-height: 25px;
}
.sidebar .card img {
    width: 54px;
    height: 54px;
    border: 1px solid #efefef;
}
.sidebar h4{margin:0 0 10px 0;font-size:16px;color:#0b2f21}
.list-item{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed rgba(20,32,50,0.03)}
.list-item:last-child{border-bottom:0}

.sticky {position:sticky;top:20px;}

#readingProgress {
  position:fixed;
  left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--accent), #8cd7a8);
  top:0;
  transform-origin:left center;
  z-index:9999;
  width:0%;
}

@media (max-width: 1040px){
  :root{--content-width:calc(100% - 120px);--sidebar-width:120px}
  .container{padding:0 10px}
}
@media (max-width: 880px){
  .container{flex-direction:column}
  .sidebar{order:2;width:100%}
  .main{order:1;width:100%}
  .hero{flex-direction:row;gap:16px}
}

a{color:var(--accent)}
blockquote{border-left:3px solid #e6efe7;padding-left:12px;color:#4b6057;margin:12px 0 18px}
code{background:#f4f7f6;padding:4px 8px;border-radius:6px}