@import url("//at.alicdn.com/t/c/font_4925250_stpsa160ghp.css");
 html,body,header,main{height:100%;}
             .blogNotice{height:50px;line-height:50px;position: sticky;top:0;z-index: 1020;}
             
             header{width:36%;float:left;background-color:#fff;position:fixed;top:55px;left:0;bottom:0}
             
            .blog_menu{height:100%;position: sticky;width:60%;float:right;max-width:275px;margin-right:5px;background-color:#c7c7c7;}
                .blog_menu a{ display:block;font-size:20px;color:#333;transition:ease .5s all;padding:8px 15px 8px 15px;margin:10px;border-radius:25px;text-decoration: none;font-weight:500; }
                .blog_menu a:hover{background-color:#cbd4d5;transition:ease .5s all}
                .blog_menu_on{background-color:#000;color:#fff !important}
                .blog_menu a span{font-size:26px; margin-right:15px;float:left;position:relative;top:-5px;}

             .blog-content{width:100%}
            
            article{padding:30px;box-sizing: border-box;}
            article .tips{font-size:14px;color:#999}
            main{width:64%;float:right;}
             
            .content{width:60%;float:left;height:100%;background-color:#fcfcfc;min-width:360px;max-width:680px;}
            .tweet{background-color:#fff;transition:ease-in-out all .3s; cursor:pointer}
            .tweet:hover{background-color:#efefef;transition:ease-in-out all .3s}
            .banner{height:220px;background-color:#f3d8bc;position:relative}
            .banner .avatar{position:absolute;bottom:-80px;z-index:10;left:50px;border:solid 3px #fff;border-radius:50%;overflow:hidden}
            .banner h2{padding-top:10%; text-align:center}
            
            .pubDiv{ position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.7);z-index:1024;display: none;}
            .pubDiv .content{
                position:absolute;
                height:auto;
                width:80%;
                max-width:560px;
                display:block;
                background-color:#fff;
                border-radius:15px;
                padding:15px;
                z-index:1025;
                top:10%;
                left:0;right:0;
                margin: auto;
            }
            .pubDiv .inputBox{min-height:220px;max-height:560px;border:#fcfcfc 5px solid;outline:none; overflow-y:scroll}
            .showMsg{font-size:12px;}
            .bt-pub{background-color:rgba(0,0,0,0.7)!important;color:#fff !important}
            
            @media all and (max-width: 980px){
                .banner{height:50vw;background-color:#f3d8bc}
            }
            
            
            .preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.preview-box {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}
.preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.preview-box .remove-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
}
.cgTab{border-bottom:#ccc solid 1px;line-height:2.5;text-align:center; }
.cgTab span{width:50%;float:left;background-color:#efefef;}
.cgTab span.on{background-color:#fff}




/* 卡片（每条推文风格）*/
.tweet {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15,20,25,0.08);
  padding: 14px;
  margin-bottom: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* 头像占位（使用 user_id 首字母）*/
.avatar img {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg,#1da1f2,#0f9ae5);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:18px;
  text-transform:uppercase;
}

/* 内容区 */
.content {
  flex: 1;
  min-width: 0;
}

.userline {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.username {
  font-weight:700;
  font-size:14px;
}

.meta {
  color:#536471;
  font-size:13px;
}

/* 文字正文 */
.text {
  margin:6px 0 8px 0;
  line-height:1.5;
  white-space:pre-wrap; /* 保持换行 */
  word-break:break-word;
  font-size:15px;
}

/* 图片 */
.post-img {
  width:100%;
  max-height:360px;
  object-fit:cover;
  border-radius:10px;
  margin-top:8px;
  display:block;
  border: 1px solid #e6ecf0;
}

/* 底部操作行（显示浏览数、时间等）*/
.actions {
  display:flex;
  gap:18px;
  align-items:center;
  margin-top:10px;
  color:#536471;
  font-size:13px;
}

/* 小图标占位 */
.icon {
  display:inline-block;
  width:18px;
  height:18px;
  vertical-align:middle;
  opacity:0.9;
}

/* 空列表提示 */
.empty {
  background:#fff;
  padding:28px;
  border-radius:12px;
  text-align:center;
  color:#556;
}


/*=======================*/
.img-grid {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.img-grid.count-1 {
  grid-template-columns: 1fr;
}

.img-grid.count-2 {
  grid-template-columns: 1fr 1fr;
}

.img-grid.count-3 {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "a b"
    "c c";
}

.img-grid.count-3 img:nth-child(1) { grid-area: a; }
.img-grid.count-3 img:nth-child(2) { grid-area: b; }
.img-grid.count-3 img:nth-child(3) { grid-area: c; }

.img-grid.count-4 {
  grid-template-columns: 1fr 1fr;
}

.img-grid img {
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e6ecf0;
}
@media screen and (max-width: 768px) {
    header{width:60px !important;}
    main{width:calc(100% - 70px); text-align:center}
    main .content{width:100%}
    .blog_menu{width:100%;float:none;}
    .blog_menu a{display:block}
    .blog_menu font{ display:none;}
    
}

/* ==================== 新增功能样式（搜索/标签/频道页） ==================== */
.menu-search { padding: 10px 12px; border-bottom: 1px solid #ddd; }
.menu-search form { display: flex; gap: 4px; }
.menu-search input { min-width: 0; }

.tag-bar {
    background: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.tag-bar-title { font-size: 13px; color: #888; font-weight: 600; }
.tag-chip {
    background: #f3f4f6;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 13px;
    color: #444;
    text-decoration: none;
}
.tag-chip:hover { background: #e3e6ea; color: #000; }
.tag-chip em { font-style: normal; color: #b28f53; margin-left: 2px; font-size: 12px; }

mark { background: #ffe9a8; padding: 0 2px; border-radius: 3px; }

.profile-stats {
    display: flex;
    gap: 26px;
    background: #fff;
    border-radius: 12px;
    padding: 14px 20px;
    margin: 14px 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.profile-stats .num { font-size: 18px; font-weight: 700; }
.profile-stats .lbl { font-size: 12px; color: #888; }

.blogNotice a { margin-left: 12px; color: #555; text-decoration: none; font-size: 14px; }
.blogNotice a:hover { color: #b28f53; }