/* ==========================================================================
   52线报 前台样式
   取值来源：52xianbao/spider_client 编译产物（984/213/401/app.css + ant-design-vue 2.2.8）
   —— 品牌渐变 #2bd8ec→#0ca4ed、页面底色 #f0f2f5、内容宽 1200px、主色 #1890ff、
      卡片 2px 圆角 + #f0f0f0 描边、正文强调色 #1b54bc、下载按钮 #5298ff。
   ========================================================================== */

* { padding: 0; margin: 0; box-sizing: border-box; }

body {
  background: #f0f2f5;
  color: rgba(0, 0, 0, .85);
  font-size: 14px;
  line-height: 1.5715;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #1890ff; text-decoration: none; }
a:hover { color: #40a9ff; }
ul, ol { list-style: none; }
img { vertical-align: middle; border: 0; }
h1, h2, h3, h4 { font-weight: 700; }
input, textarea, select, button { font-family: inherit; font-size: 14px; }

/* ---------------------------------------------------------------- 通用组件 */
.card { display: block; background: #fff; border: 1px solid #f0f0f0; border-radius: 2px; color: inherit; }
.card-body { padding: 24px; }
.card-pad-sm > .card-body, .card-body.pad-sm { padding: 10px; }
.card-hover { transition: all .3s; }
.card-hover:hover { border-color: rgba(0, 0, 0, .09); box-shadow: 0 2px 8px rgba(0, 0, 0, .09); }

.btn {
  display: inline-block; height: 32px; padding: 4px 15px; border-radius: 2px; cursor: pointer;
  color: rgba(0, 0, 0, .85); background: #fff; border: 1px solid #d9d9d9; line-height: 1.5715;
  transition: all .3s; text-align: center; white-space: nowrap;
}
.btn:hover { color: #40a9ff; border-color: #40a9ff; }
.btn-primary { color: #fff; background: #1890ff; border-color: #1890ff; }
.btn-primary:hover { color: #fff; background: #40a9ff; border-color: #40a9ff; }
.btn-danger { color: #fff; background: #ff4d4f; border-color: #ff4d4f; }
.btn-danger:hover { color: #fff; background: #ff7875; border-color: #ff7875; }
.btn-round { border-radius: 999px; padding: 4px 20px; }
.btn-lg { height: 40px; padding: 6px 20px; font-size: 15px; }
.btn-sm { height: 26px; padding: 2px 10px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-link { border: 0; background: none; color: #1890ff; padding: 0; height: auto; }

.input, .textarea, .select {
  width: 100%; padding: 4px 11px; background: #fff; border: 1px solid #d9d9d9; border-radius: 2px;
  transition: all .3s; line-height: 1.5715;
}
.input { height: 32px; }
.textarea { min-height: 90px; padding: 6px 11px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus { border-color: #40a9ff; outline: 0; box-shadow: 0 0 0 2px rgba(24, 144, 255, .2); }
.input-lg { height: 40px; font-size: 15px; }
.form-item { margin-bottom: 16px; }
.form-label { display: block; margin-bottom: 6px; color: rgba(0, 0, 0, .85); }
.form-hint { margin-top: 4px; color: #999; font-size: 12px; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row > * { flex: 1 1 220px; }

.tag { display: inline-block; padding: 0 7px; font-size: 12px; line-height: 20px; background: #fafafa; border: 1px solid #d9d9d9; border-radius: 2px; color: rgba(0, 0, 0, .65); }
.tag-red { color: #ff4d4f; border-color: #ffccc7; background: #fff2f0; }
.tag-blue { color: #1890ff; border-color: #bae0ff; background: #e6f4ff; }
.tag-green { color: #52c41a; border-color: #b7eb8f; background: #f6ffed; }
.tag-gold { color: #d48806; border-color: #ffe58f; background: #fffbe6; }

.alert { padding: 8px 15px; border-radius: 2px; margin-bottom: 12px; border: 1px solid transparent; }
.alert-success { background: #f6ffed; border-color: #b7eb8f; color: #389e0d; }
.alert-error { background: #fff2f0; border-color: #ffccc7; color: #cf1322; }
.alert-info { background: #e6f4ff; border-color: #bae0ff; color: #0958d9; }

.empty { padding: 40px 0; text-align: center; color: #999; }
.avatar { display: inline-block; width: 32px; height: 32px; border-radius: 50%; background: #ccc; object-fit: cover; }
/* 历史数据的图片可能已失链，给个浅底避免出现"碎图" */
.post-thumb { width: 70px; height: 70px; object-fit: cover; border-radius: 2px; background: #f5f5f5; }
.post-image { max-width: 220px; border-radius: 2px; background: #f5f5f5; }
.avatar-sm { width: 24px; height: 24px; }
.avatar-lg { width: 50px; height: 50px; }
.avatar-xl { width: 72px; height: 72px; }
.muted { color: #999; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mt-5 { margin-top: 5px; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; } .mb-20 { margin-bottom: 20px; }
.flex { display: flex; } .flex-between { display: flex; justify-content: space-between; }
.flex-center { display: flex; align-items: center; } .gap-10 { gap: 10px; }
.row { display: flex; flex-wrap: wrap; }
.col-8 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-4 { flex: 0 0 16.6667%; max-width: 16.6667%; }

/* ---------------------------------------------------------------- 顶栏（渐变） */
.header { border-bottom: 1px solid #f0f0f0; }
.header_top { height: 60px; background: -webkit-linear-gradient(left top, #2bd8ec, #0ca4ed); background: linear-gradient(to bottom right, #2bd8ec, #0ca4ed); }
.header_container { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; max-width: 1200px; height: 100%; }
.header_logo { display: flex; align-items: center; color: #fff; }
.header_logo img { height: 60px; }
.header_text { margin-left: 80px; color: #fff; }
.header_search { width: 202px; }
.header_search form { display: flex; position: relative; }
.header_search .input { border-radius: 25px; height: 35px; padding: 4px 34px 4px 11px; }
.header_search .search-btn {
  position: absolute; right: 2px; top: 2px; width: 31px; height: 31px; border: 0; background: none; cursor: pointer;
  color: #bfbfbf; line-height: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.header_search .search-btn svg { display: block; }
.header_search .search-btn:hover { color: #1890ff; }

.header_bottom { background: #fff; box-shadow: 0 0 4px #dedede; }
.header_bottom_container { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; max-width: 1200px; height: 40px; }
.nav-types { display: flex; align-items: center; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: 1 1 auto; justify-content: space-between; }
.nav-types::-webkit-scrollbar { display: none; }
.typeList { margin: 5px; text-align: center; height: 30px; line-height: 30px; cursor: pointer; transition: all .2s; color: rgba(0, 0, 0, .85); white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.nav-links a { color: rgba(0, 0, 0, .65); }
.nav-links a:hover { color: #12cfdf; }
.typeList:hover { color: #12cfdf; }
.typeList.active { color: #12cfdf; border-radius: 30px; }
.header_user { display: flex; align-items: center; gap: 10px; height: 100%; }
.header_user .avatar { cursor: pointer; }
@media screen and (min-width: 768px) {
  /* 老站是 .typeList{padding:0 70px} 并且铺满整行 */
  .typeList { padding: 0 70px; }
  .typeList.active { background: -webkit-linear-gradient(left top, #d9fff2, #ddfaff); background: linear-gradient(to bottom right, #d9fff2, #ddfaff); }
}
@media screen and (max-width: 768px) {
  .header_text { display: none; }
  .header_search { width: 160px; }
  .typeList { padding: 0 6px; font-size: 13px; }
}

/* ---------------------------------------------------------------- 布局容器 */
.container { margin: 10px auto; max-width: 1200px; }
/* 窄屏才内缩，宽屏与老站一致保持 1200px 内容宽 */
@media screen and (max-width: 1239px) {
  .container, .header_container, .header_bottom_container, .footer_container, .friend-link { padding-left: 10px; padding-right: 10px; }
}
.layout-2col { display: flex; align-items: flex-start; }
.layout-main { flex: 1 1 auto; min-width: 0; }
.layout-side { flex: 0 0 350px; min-width: 0; }
@media screen and (min-width: 993px) {
  /* 老站主栏 17/24 = 850px、侧栏 7/24 = 350px，侧栏卡片有 15px 左边距 */
  .layout-side > .card { margin-left: 15px; }
}
@media screen and (max-width: 992px) {
  .layout-2col { display: block; }
  .layout-side { margin-top: 10px; }
}

/* ---------------------------------------------------------------- 首页分类宫格 */
.url_list { display: flex; flex-wrap: wrap; margin: 0 -2.5px; }
.url_col { flex: 0 0 16.6667%; max-width: 16.6667%; padding: 0 2.5px 5px; }
.url_content { display: flex; justify-content: space-between; }
.url_content_left { display: flex; align-items: center; overflow: hidden; white-space: nowrap; width: 100%; }
.url_content_logo { display: flex; align-items: center; }
.url_content_logo img { width: 20px; height: 20px; }
.url_content_text { margin-left: 10px; overflow: hidden; text-overflow: ellipsis; color: rgba(0, 0, 0, .85); }
.url .card-body { padding: 15px; }
/* 宫格/导航选中的二级分类（含「全部」）：沿用老站 .typeList.active 的配色
   —— 薄荷渐变底 + 青色文字；圆角与未选中卡片保持一致（2px），不做胶囊 */
.card-active { background: -webkit-linear-gradient(left top, #d9fff2, #ddfaff); background: linear-gradient(to bottom right, #d9fff2, #ddfaff); border-color: #cdf3ea; }
.card-active .url_content_text { color: #12cfdf; }
.card-active:hover { border-color: #bfeade; box-shadow: 0 2px 8px rgba(18, 207, 223, .16); }

@media screen and (max-width: 992px) { .url_col { flex: 0 0 33.3333%; max-width: 33.3333%; } }
@media screen and (max-width: 768px) {
  .url_content_text { font-size: .65rem; }
  .url .card-body { padding: 10px; }
}

/* ---------------------------------------------------------------- 线报列表 */
.article { margin-top: 5px; }
.article .card-body { padding: 10px; }
.article_li { padding: 15px; }
.article_li:hover { background: #f9f9f9; }
.article_content { display: flex; justify-content: space-between; align-items: center; color: #505050; }
.article_content:hover { color: #333; cursor: pointer; }
.article_content_left { display: flex; align-items: center; width: 80%; }
.article_content_left img { width: 20px; height: 20px; }
.article_content_left span { margin-left: 10px; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article_content_right { color: red; }
.article_li-grid { display: flex; flex-wrap: wrap; }
.article_li-grid .article_li { flex: 0 0 33.3333%; max-width: 33.3333%; }
@media screen and (max-width: 992px) { .article_li-grid .article_li { flex: 0 0 50%; max-width: 50%; } }
@media screen and (max-width: 768px) { .article_li-grid .article_li { flex: 0 0 100%; max-width: 100%; } }

/* 上一页 / 下一页 */
.page { position: relative; z-index: 9; overflow: hidden; margin: 12px auto 0; display: flex; }
.page > a, .page > span { position: relative; width: 50%; height: 35px; background: #fff; color: #666; text-align: center; font-size: 14px; line-height: 35px; cursor: pointer; user-select: none; }
.page .top { border-radius: 4px 0 0 4px; }
.page .bottom { border-radius: 0 3px 3px 0; }
.page .disabled { color: #ccc; cursor: not-allowed; }
.page .cfx { position: absolute; top: 50%; left: 50%; z-index: 1; display: block; width: 84px; height: 12px; background: #f0f2f5; transform: translate(-50%, -50%) rotate(-42deg); }
.pagination { display: flex; gap: 8px; justify-content: center; margin: 15px 0; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 32px; height: 32px; padding: 0 6px; line-height: 30px; text-align: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 2px; color: rgba(0, 0, 0, .85); font-family: Arial, sans-serif; }
.pagination .active { border-color: #1890ff; color: #1890ff; font-weight: 500; }
.pagination .disabled { color: #ccc; }

/* ---------------------------------------------------------------- 文章详情 */
.article_title h1 { color: #333; font-weight: 700; font-size: 28px; line-height: 40px; }
.article_intro { display: flex; flex-wrap: wrap; gap: 15px; color: #9a9a9a; font-size: 16px; margin-top: 10px; }
.article_body { margin-top: 10px; padding: 22px 0 0; border-top: 1px solid #ececec; color: #333; font-size: 15px; word-wrap: break-word; line-height: 1.5715; }
.article_body * { word-wrap: break-word; }
.article_body img { max-width: 80%; height: auto; }
.article_body p { margin: 10px 0; }
.article_body h3 { position: relative; padding: 5px 0 15px; color: #424242; font-size: 18px; font-weight: 700; line-height: 30px; cursor: pointer; }
.article_body h3:before { position: absolute; top: 35px; left: 0; z-index: -1; width: 45%; height: 2px; background: #1b54bc; content: " "; border-radius: 20px; transition: all .5s; }
.article_body h3:hover:before { width: 100%; }
.article_body a { color: #1890ff; }
.article_body table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.article_body table td, .article_body table th { border: 1px solid #f0f0f0; padding: 6px 10px; }
.article_body blockquote { margin: 10px 0; padding: 8px 15px; background: #f8f8fa; border-left: 3px solid #d9d9d9; color: #666; }
.article_body pre { margin: 10px 0; padding: 12px; background: #f6f8fa; border-radius: 4px; overflow: auto; }
/* 采集来的正文：源站模板已被清洗，这里把常见标签统一成本站排版 */
.article_body h1, .article_body h2 { margin: 16px 0 10px; color: #424242; font-size: 19px; font-weight: 700; line-height: 1.5; }
.article_body h4, .article_body h5, .article_body h6 { margin: 14px 0 8px; color: #424242; font-size: 16px; font-weight: 700; line-height: 1.5; }
.article_body ul, .article_body ol { margin: 10px 0; padding-left: 24px; }
.article_body ul li { list-style: disc; }
.article_body ol li { list-style: decimal; }
.article_body li { margin: 4px 0; }
.article_body code { padding: 1px 5px; background: #f6f8fa; border-radius: 3px; font-family: Consolas, Monaco, monospace; font-size: 13px; }
.article_body pre code { padding: 0; background: none; }
.article_body hr { margin: 16px 0; border: 0; border-top: 1px solid #ececec; }
.article_body figure { margin: 10px 0; }
.article_body figcaption { color: #999; font-size: 13px; text-align: center; }
.article_body img { display: block; margin: 10px auto; border-radius: 4px; }
.article_body p img, .article_body a img { display: inline-block; margin: 0; vertical-align: middle; }
.article_body .article-img-wrap { text-align: center; }
.article_body del, .article_body s { color: #999; }
/* 正文/评论图片点击预览（点击弹层由 site.js 注入） */
.article_body img, .comment-body img { cursor: zoom-in; }
/* 图片加载中的骨架（img-loading 由 img_fallback 注入，load 后由 onload 摘掉） */
.article_body img.img-loading, .comment-body img.img-loading {
  min-height: 90px;
  background: linear-gradient(100deg, #f2f4f7 30%, #e6ebf1 50%, #f2f4f7 70%) 0 0 / 200% 100%;
  animation: img-shimmer 1.1s linear infinite;
  border-radius: 4px;
}
@keyframes img-shimmer { to { background-position: -200% 0; } }
/* 列表/宫格里的小图标不参与骨架（尺寸小、加载快） */
.url_content_logo img.img-loading { min-height: 0; background: none; animation: none; }
.img-preview { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .86); }
.img-preview.open { display: flex; }
.img-preview img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; border-radius: 4px; box-shadow: 0 6px 30px rgba(0, 0, 0, .5); cursor: default; }
.img-preview-close { position: absolute; top: 14px; right: 18px; width: 40px; height: 40px; font-size: 26px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .14); border: 0; border-radius: 50%; cursor: pointer; }
.img-preview-close:hover { background: rgba(255, 255, 255, .26); }
.img-preview-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 68px; font-size: 32px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .12); border: 0; border-radius: 6px; cursor: pointer; }
.img-preview-nav:hover { background: rgba(255, 255, 255, .24); }
.img-preview-nav.prev { left: 16px; }
.img-preview-nav.next { right: 16px; }
.img-preview.single .img-preview-nav { display: none; }
.img-preview-counter { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); padding: 3px 12px; font-size: 13px; color: #fff; background: rgba(0, 0, 0, .45); border-radius: 12px; }
.img-preview.single .img-preview-counter { display: none; }
@media (max-width: 768px) {
  .img-preview-nav { width: 38px; height: 54px; font-size: 26px; }
  .img-preview-nav.prev { left: 6px; }
  .img-preview-nav.next { right: 6px; }
  .img-preview-close { top: 8px; right: 10px; }
}
.article_body span.Fengdown, .article_body a.Fengdown, .article_body [data-download], .article_content .sbtn { display: inline-block; height: 37px; line-height: 37px; padding: 0 13px; margin: 10px 10px 10px 0; font-size: 14px; font-weight: 700; color: #fff !important; border-radius: 5px; background: #5298ff; }
.article_body [data-download] img, .article_body .Fengdown img { display: inline-block; vertical-align: middle; margin: 0 4px 0 0; max-height: 18px; }
.article_body [data-download], .article_body .Fengdown, .article_body a.Fengdown { cursor: pointer; }
.article_body .download ul li { list-style: none; }
.article-down h4, .down-url-wrap .tit { font-size: 17px; margin: 10px 0 20px; border-top: 1px dashed #ececec; padding-top: 20px; font-weight: 700; padding-left: 22px; position: relative; }
.article-down h4 svg, .down-url-wrap .tit svg { position: absolute; left: 0; top: 26px; color: #5298ff; }
.article-down h4::after, .down-url-wrap .tit::after { content: ""; display: block; }
.article-down a { display: inline-block; background: #5298ff; color: #fff !important; padding: 10px 25px; font-size: 14px; border: 1px solid #5298ff; border-radius: 7px; margin-right: 20px; }
.divider-dashed { margin: 20px 0 15px; border: 0; border-top: 1px dashed #ccc; text-align: center; position: relative; }
.divider-dashed > span { position: relative; top: -12px; background: #fff; padding: 0 12px; color: #999; font-size: 13px; }
.disclaimer { background: #f8f8fa; padding: 10px 20px; border-left: 5px solid #007bf5; color: #555; line-height: 1.9; }
.disclaimer p { margin: 6px 0; }
.disclaimer a { color: #1890ff; }

/* 右侧栏 */
.right_title { font-size: 18px; padding-bottom: .5em; margin-top: -.5em; margin-bottom: .3em; position: relative; overflow: hidden; border-bottom: 1px solid #f6f6f6; padding-left: 16px; }
.right_title:after { content: " "; position: absolute; height: 15px; width: 5px; background: #1b54bc; left: 0; top: 7px; border-radius: 5px; }
.random_article { margin-top: 10px; overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 9px; }
.random_article i { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 5px; color: #696969; background: #f3f3f3; text-align: center; font-style: normal; font-size: 12px; line-height: 20px; }
.random_article a { color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-1 { background: #ff2a2a !important; color: #fff !important; }
.rank-2 { background: #ffc107 !important; color: #fff !important; }
.rank-3 { background: #03a9f4 !important; color: #fff !important; }
.rank-4 { background: #4caf50 !important; color: #fff !important; }

/* ---------------------------------------------------------------- 评论 */
.comment-toolbar { display: flex; padding: 10px 0; margin-top: 15px; border-bottom: 2px solid #146ec2; justify-content: space-between; align-items: center; }
.comment-list { margin-top: 20px; }
.comment-item { display: flex; margin-bottom: 18px; }
.comment-main { margin-left: 15px; width: 100%; min-width: 0; }
.comment-body { margin-top: 10px; color: #333; word-wrap: break-word; }
.comment-meta { margin-top: 5px; margin-bottom: 10px; display: flex; justify-content: flex-end; color: #999; font-size: 12px; gap: 10px; }
.comment-meta a { color: #999; }
.comment-meta a:hover { color: #1890ff; }
.comment-reply { margin-top: 10px; margin-left: 70px; background: #f0f2f5; padding: 15px; border-radius: 2px; }
.comment-reply .comment-item:last-child { margin-bottom: 0; }
.comment-form { border: 1px solid #ccc; border-radius: 2px; }
.comment-form textarea { border: 0; min-height: 150px; width: 100%; padding: 10px; outline: 0; font-size: 14px; line-height: 1.5715; }
.comment-form-footer { display: flex; justify-content: flex-end; padding: 8px 10px; border-top: 1px solid #f0f0f0; background: #fafafa; }

/* ---------------------------------------------------------------- 友链 / 页脚 */
.friend-link { margin-top: 10px; background-color: #fff; padding: 10px 20px; }
.link-title { position: relative; color: #333; font-size: 17px; line-height: 37px; text-indent: 15px; }
.link-title:before { position: absolute; top: 10px; left: 0; width: 5px; height: 18px; border-radius: 5px; background: -webkit-linear-gradient(left top, #2bd8ec, #0ca4ed); background: linear-gradient(to bottom right, #2bd8ec, #0ca4ed); content: " "; }
.link-list { display: flex; list-style: none; background: #fbfbfb; padding: 9px 21px 0; flex-wrap: wrap; }
.link-list li { margin-right: 20px; margin-bottom: 9px; }
.link-list li a { display: block; height: 30px; color: #8e8e8e; font-size: 14px; line-height: 30px; }
.link-list li a:hover { color: #12cfdf; }

.footer { background: #fff; padding: 15px 0; margin-top: 10px; }
.footer_container { margin: 0 auto; max-width: 1200px; }
.footer_top { display: flex; justify-content: space-between; max-width: 800px; margin: 0 auto; padding: 0 5px; flex-wrap: wrap; }
.footer_top a { color: #505050; }
.footer_bottom { margin-top: 25px; text-align: center; color: #505050; padding: 0 10px; }

/* ---------------------------------------------------------------- 表单页 / 卡片标题 */
.auth-wrap { max-width: 420px; margin: 30px auto; }
.auth-title { text-align: center; font-size: 20px; margin-bottom: 20px; }
.section-title { font-size: 16px; font-weight: 500; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid #f0f0f0; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px 24px; border-bottom: 1px solid #f0f0f0; margin-bottom: 15px; }
.tabs a { padding: 10px 0; color: rgba(0, 0, 0, .85); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a:hover { color: #12cfdf; }
.tabs a.active { color: #1890ff; border-bottom-color: #1890ff; }

/* 侧边（用户中心） */
.side-menu { background: #fff; border: 1px solid #f0f0f0; border-radius: 2px; padding: 8px 0; }
.side-menu a { display: block; padding: 9px 20px; color: rgba(0, 0, 0, .75); border-left: 3px solid transparent; }
.side-menu a:hover { color: #1890ff; background: #fafafa; }
.side-menu a.active { color: #1890ff; background: #e6f4ff; border-left-color: #1890ff; }
.user-header { display: flex; align-items: center; gap: 15px; padding: 20px; }
.stat-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.stat-item { flex: 1 1 120px; text-align: center; padding: 12px; background: #fafafa; border-radius: 2px; }
.stat-item b { display: block; font-size: 20px; color: #1890ff; }
.stat-item span { color: #999; font-size: 12px; }

/* 列表行（我的文章 / 消息 等） */
.list-row { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid #f6f6f6; }
.list-row:last-child { border-bottom: 0; }
.list-row .title { color: #333; overflow: hidden; text-overflow: ellipsis; }
.list-row .meta { color: #999; font-size: 12px; white-space: nowrap; }

/* 提示条 */
.notice-bar { background: #fffbe6; border: 1px solid #ffe58f; color: #d48806; padding: 7px 12px; border-radius: 2px; margin-bottom: 10px; }
.banner-list { display: flex; gap: 10px; overflow: hidden; }
.banner-list a { flex: 1 1 0; }
.banner-list img { width: 100%; max-height: 110px; object-fit: cover; border-radius: 2px; display: block; }

/* 进度条（等级） */
.progress { height: 8px; background: #f5f5f5; border-radius: 4px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: #1890ff; }
.badge-vip { background: linear-gradient(to bottom right, #f9d423, #e08e0b); color: #fff; padding: 1px 6px; border-radius: 2px; font-size: 12px; }

/* ---------------------------------------------------------------- 面包屑（SEO/结构化数据对应） */
.breadcrumb { margin: 0 0 8px; padding: 6px 12px; background: #fff; border: 1px solid #f0f0f0; border-radius: 2px; color: #999; font-size: 12px; line-height: 20px; }
.breadcrumb a { color: #666; }
.breadcrumb a:hover { color: #12cfdf; }
.breadcrumb .sep { margin: 0 6px; color: #ccc; }