*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;background:#f5f6f7;color:#222;line-height:1.75;font-size:15px;-webkit-font-smoothing:antialiased}
a{color:#fc5531;text-decoration:none}
a:hover{color:#e04020}

.cs-container{max-width:1140px;margin:0 auto;padding:0 16px}

/* Header */
.cs-header{background:#fff;border-bottom:1px solid #e8e8e8;box-shadow:0 1px 4px rgba(0,0,0,.04);position:sticky;top:0;z-index:100}
.cs-header-inner{display:flex;align-items:center;gap:20px;padding:10px 0;flex-wrap:wrap;min-height:52px}
.cs-logo{font-size:18px;font-weight:700;color:#222;white-space:nowrap;letter-spacing:.02em;flex-shrink:0}
.cs-logo::before{content:"";display:inline-block;width:4px;height:16px;background:#fc5531;border-radius:2px;margin-right:8px;vertical-align:-2px}
.cs-logo:hover{color:#fc5531;text-decoration:none}
.cs-nav{display:flex;gap:18px;font-size:14px}
.cs-nav a{color:#555;font-weight:500}
.cs-nav a:hover{color:#fc5531;text-decoration:none}
.cs-search{margin-left:auto;display:flex;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;background:#fafafa}
.cs-search-input{border:none;padding:7px 12px;font-size:14px;width:160px;outline:none;color:#222;background:transparent}
.cs-search-btn{border:none;background:#fc5531;color:#fff;padding:7px 18px;cursor:pointer;font-size:14px;font-weight:600;white-space:nowrap}
.cs-search-btn:hover{background:#e04020}

.cs-body{padding:20px 0 36px}

/* Layout */
.cs-layout{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
.cs-main{min-width:0}

/* Banner */
.cs-banner{background:#fff;border-radius:4px;padding:22px 24px;margin-bottom:16px;border:1px solid #eee}
.cs-banner-title{font-size:1.35rem;font-weight:700;color:#222;margin-bottom:8px;line-height:1.35}
.cs-banner-desc{font-size:14px;color:#999;line-height:1.7}

/* Feed */
.cs-feed{background:#fff;border-radius:4px;padding:18px 20px;border:1px solid #eee;margin-bottom:16px}
.cs-feed-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #f0f0f0}
.cs-feed-head h2{font-size:17px;font-weight:700;color:#222;padding-left:10px;border-left:3px solid #fc5531}
.cs-feed-badge{font-size:12px;color:#fc5531;background:#fff3f0;padding:3px 10px;border-radius:3px;font-weight:600;border:1px solid #ffd4c9}
.cs-feed-list{list-style:none}
.cs-feed-item{border-bottom:1px solid #f5f5f5}
.cs-feed-item:last-child{border-bottom:none}
.cs-feed-link{display:block;padding:16px 4px;transition:background .15s}
.cs-feed-link:hover{text-decoration:none;background:#fafafa;border-radius:4px}
.cs-feed-title{font-size:16px;font-weight:700;color:#222;margin-bottom:6px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cs-feed-link:hover .cs-feed-title{color:#fc5531}
.cs-feed-meta{font-size:13px;color:#999;line-height:1.5;margin-bottom:4px}
.cs-feed-meta::after{content:" · 阅读 156";color:#bbb;font-size:12px}
.cs-feed-item:nth-child(1) .cs-feed-meta::after{content:" · 阅读 1286"}
.cs-feed-item:nth-child(2) .cs-feed-meta::after{content:" · 阅读 952"}
.cs-feed-item:nth-child(3) .cs-feed-meta::after{content:" · 阅读 743"}
.cs-feed-item:nth-child(4) .cs-feed-meta::after{content:" · 阅读 621"}
.cs-feed-item:nth-child(5) .cs-feed-meta::after{content:" · 阅读 508"}
.cs-feed-item:nth-child(6) .cs-feed-meta::after{content:" · 阅读 436"}
.cs-feed-item:nth-child(7) .cs-feed-meta::after{content:" · 阅读 389"}
.cs-feed-item:nth-child(8) .cs-feed-meta::after{content:" · 阅读 312"}
.cs-feed-item:nth-child(9) .cs-feed-meta::after{content:" · 阅读 267"}
.cs-feed-item:nth-child(10) .cs-feed-meta::after{content:" · 阅读 198"}
.cs-feed-read{font-size:12px;color:#fc5531;font-weight:600}
.cs-feed-read::after{content:" ›";font-size:14px}

/* Section */
.cs-section{background:#fff;border-radius:4px;padding:18px 20px;border:1px solid #eee;margin-bottom:16px}
.cs-section-title{font-size:16px;font-weight:700;color:#222;margin-bottom:12px;padding-left:10px;border-left:3px solid #fc5531}

/* Article */
.cs-article{background:#fff;border-radius:4px;padding:24px 28px;border:1px solid #eee;margin-bottom:16px}
.cs-article-title{font-size:1.6rem;font-weight:700;color:#222;line-height:1.4;margin-bottom:12px;letter-spacing:.01em}
.cs-article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:#999;padding-bottom:16px;border-bottom:1px solid #f0f0f0}
.cs-meta-dot{color:#ddd}
.cs-tag-row{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0 4px}
.cs-tag-chip{padding:4px 12px;background:#fff3f0;border:1px solid #ffd4c9;border-radius:3px;font-size:13px;color:#666;transition:all .15s}
.cs-tag-chip:hover{background:#fc5531;border-color:#fc5531;color:#fff;text-decoration:none}
.cs-article-body{padding-top:16px}
.cs-article-body h2{font-size:17px;font-weight:700;color:#222;margin:24px 0 10px;line-height:1.4;padding-bottom:6px;border-bottom:1px solid #f5f5f5}
.cs-article-body h2:first-child{margin-top:0}
.cs-article-body p{text-indent:2em;color:#333;margin-bottom:12px;line-height:1.85;font-size:15px}
.cs-rich{color:#333;line-height:1.85;font-size:15px}
.cs-rich p{text-indent:2em;margin-bottom:.6em}
.cs-info-list{list-style:none;background:#fafafa;padding:12px 16px;border-radius:4px;margin-bottom:8px;border:1px solid #f0f0f0}
.cs-info-list li{padding:6px 0;font-size:14px;color:#555;border-bottom:1px dashed #eee}
.cs-info-list li:last-child{border-bottom:none}
.cs-info-list b{display:inline-block;min-width:88px;color:#999;font-weight:500;font-size:13px}
.cs-note{font-size:13px;color:#999;text-indent:0!important;margin-bottom:12px}
.cs-article-foot{margin-top:20px;padding-top:14px;border-top:1px dashed #e8e8e8;font-size:13px;color:#999}
.cs-article-foot a{color:#fc5531}

/* Inline feed in char page */
.cs-feed-list-inline .cs-feed-link{padding:12px 0}

/* Sidebar */
.cs-aside{display:flex;flex-direction:column;gap:14px}
.cs-widget{background:#fff;border-radius:4px;overflow:hidden;border:1px solid #eee}
.cs-widget-title{font-size:15px;font-weight:700;color:#fff;background:#fc5531;padding:11px 16px}
.cs-widget-body{padding:12px 16px;font-size:13px;color:#666;line-height:1.7}
.cs-author-card{display:flex;gap:12px;padding:16px;align-items:flex-start}
.cs-author-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#fc5531,#ff8a65);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0}
.cs-author-body{flex:1;min-width:0}
.cs-author-name{font-size:15px;font-weight:700;color:#222;margin-bottom:4px}
.cs-author-desc{font-size:13px;color:#999;line-height:1.6}
.cs-tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.cs-tag-cloud a{padding:4px 12px;background:#f5f6f7;border:1px solid #e8e8e8;border-radius:3px;font-size:13px;color:#666;transition:all .15s}
.cs-tag-cloud a:hover{background:#fff3f0;border-color:#ffd4c9;color:#fc5531;text-decoration:none}
.cs-side-list{list-style:none;counter-reset:siderank}
.cs-side-list li{counter-increment:siderank;padding:8px 0;border-bottom:1px dashed #f0f0f0;font-size:14px;display:flex;gap:8px;align-items:baseline}
.cs-side-list li::before{content:counter(siderank);color:#fc5531;font-weight:700;min-width:18px;font-size:13px}
.cs-side-list li:last-child{border-bottom:none}
.cs-side-list a{color:#555}
.cs-side-list a:hover{color:#fc5531;text-decoration:none}

/* Footer */
.cs-footer{background:#2c2c2c;color:rgba(255,255,255,.65);padding:18px 0 24px;margin-top:12px}
.cs-copyright{text-align:center;font-size:12px;margin-top:8px;line-height:1.6}
.cs-footer a{color:rgba(255,255,255,.8)}
.cs-friends{padding:14px 0 8px;font-size:13px;color:rgba(255,255,255,.55);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;border-top:1px solid rgba(255,255,255,.1)}
.cs-friends span{font-weight:600;color:rgba(255,255,255,.75)}

@media(max-width:860px){
.cs-layout{grid-template-columns:1fr}
.cs-search{margin-left:0;width:100%}
.cs-search-input{flex:1;width:auto}
.cs-article{padding:18px 16px}
.cs-article-title{font-size:1.3rem}
.cs-aside{order:2}
.cs-header-inner{gap:12px}
}

@media(max-width:480px){
.cs-nav{display:none}
.cs-feed-title{font-size:15px}
.cs-article-body p,.cs-rich{font-size:14px}
}
