/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px; color: #333; background: #f5f6f7; line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
a:hover { color: #e84c3d; }

/* ===== 顶部导航 ===== */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid #e5e5e5;
  height: 52px; display: flex; align-items: center;
}
.navbar-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 0 16px; display: flex; align-items: center; gap: 24px;
}
.navbar-logo { flex-shrink: 0; display: flex; align-items: center; }
.navbar-logo img { height: 32px; }
.navbar-logo span { font-size: 18px; font-weight: 700; color: #1e3c72; }
.navbar-search { flex: 1; max-width: 360px; margin-left: auto; position: relative; }
.navbar-search input {
  width: 100%; height: 34px; border: 1px solid #ddd; border-radius: 17px;
  padding: 0 36px 0 14px; font-size: 13px; outline: none; background: #f7f7f7;
  transition: border-color 0.2s, background 0.2s;
}
.navbar-search input:focus { border-color: #e84c3d; background: #fff; }
.navbar-search .search-icon {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: #999; font-size: 15px; cursor: pointer;
}

/* ===== 主体布局 ===== */
.main-wrap {
  max-width: 1200px; margin: 20px auto; padding: 0 16px;
  display: grid; grid-template-columns: 300px 1fr;
  gap: 16px; align-items: start;
}
/* 列表页：侧边栏在左 */
.main-wrap.layout-list > aside          { order: 1; }
.main-wrap.layout-list > .content-col  { order: 2; }
/* 详情页：侧边栏在左 */
.main-wrap.layout-post { grid-template-columns: 280px 1fr; }
.main-wrap.layout-post > aside          { order: 1; }
.main-wrap.layout-post > .content-col  { order: 2; }

/* ===== 专题 Banner ===== */
.topic-banner {
  display: flex; border-radius: 8px; margin-bottom: 12px;
  overflow: hidden; border: 1px solid #e5e5e5; background: #fff;
}
.topic-banner-img { width: 200px; flex-shrink: 0; background: #1e3c72; overflow: hidden; }
.topic-banner-img img { width: 100%; height: 100%; object-fit: cover; }
.topic-banner-body { flex: 1; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.topic-banner-title { font-size: 18px; font-weight: 700; color: #1a1a1a; line-height: 1.3; }
.topic-banner-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.topic-tag { background: #f0f4ff; color: #4a6cf7; padding: 2px 10px; border-radius: 3px; font-size: 12px; }
.topic-banner-desc { font-size: 13px; color: #666; line-height: 1.6; }
.topic-banner-foreword {
  display: flex; gap: 10px; align-items: flex-start;
  background: #f9f9f9; border-radius: 6px; padding: 12px 16px;
  border-left: 3px solid #6ab04c; margin-bottom: 12px;
}
.foreword-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #e84c3d, #f39c12);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700;
}
.foreword-name { font-size: 11px; color: #999; margin-bottom: 3px; }
.foreword-content { font-size: 12px; color: #555; line-height: 1.6; font-style: italic; }

/* ===== Tab 切换 ===== */
.feed-tabs {
  background: #fff; border-radius: 6px; border: 1px solid #e5e5e5;
  display: flex; margin-bottom: 12px; overflow: hidden;
}
.feed-tabs a {
  padding: 12px 20px; font-size: 14px; color: #666;
  border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s;
}
.feed-tabs a.active { color: #e84c3d; border-bottom-color: #e84c3d; font-weight: 500; }
.feed-tabs a:hover { color: #e84c3d; }

/* ===== 文章卡片 ===== */
.post-card {
  background: #fff; border: 1px solid #e5e5e5; border-radius: 6px;
  padding: 16px 20px; margin-bottom: 10px;
  transition: box-shadow 0.2s; display: flex; gap: 16px; cursor: pointer;
}
.post-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.post-card-body { flex: 1; min-width: 0; }
.post-card-meta-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.author-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.author-name { font-size: 13px; color: #666; }
.post-date { font-size: 12px; color: #999; margin-left: auto; }
.post-title-link {
  font-size: 16px; font-weight: 600; color: #1a1a1a;
  margin-bottom: 8px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.post-title-link:hover { color: #e84c3d; }
.post-excerpt {
  font-size: 13px; color: #777; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 12px;
}
.post-card-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-tag { background: #f0f4ff; color: #4a6cf7; padding: 2px 8px; border-radius: 3px; font-size: 12px; }
.post-stats { display: flex; gap: 14px; margin-left: auto; color: #999; font-size: 12px; }
.post-stats span { display: flex; align-items: center; gap: 3px; }
.post-thumb {
  width: 120px; height: 80px; border-radius: 4px; flex-shrink: 0;
  object-fit: cover;
}
.post-thumb-placeholder {
  width: 120px; height: 80px; border-radius: 4px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #fff;
}

/* ===== 侧边栏通用 ===== */
.sidebar-card {
  background: #fff; border: 1px solid #e5e5e5; border-radius: 6px;
  padding: 16px; margin-bottom: 12px;
}
.sidebar-card h3 {
  font-size: 14px; font-weight: 600; color: #1a1a1a;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0;
}
/* 个人信息卡 */
.profile-card { text-align: center; padding: 20px 16px; }
.profile-avatar {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px;
  background: linear-gradient(135deg, #e84c3d, #f39c12);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px; font-weight: 700;
}
.profile-name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.profile-bio { font-size: 12px; color: #999; margin-bottom: 14px; }
.profile-stats { display: flex; justify-content: space-around; border-top: 1px solid #f0f0f0; padding-top: 14px; }
.profile-stats div { text-align: center; }
.profile-stats .num { font-size: 18px; font-weight: 700; color: #1a1a1a; }
.profile-stats .label { font-size: 11px; color: #999; }
/* 热门 */
.hot-list { list-style: none; }
.hot-list li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
.hot-list li:last-child { border-bottom: none; }
.hot-rank {
  width: 20px; height: 20px; border-radius: 3px; background: #ddd; color: #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hot-rank.top  { background: #e84c3d; }
.hot-rank.top2 { background: #f39c12; }
.hot-rank.top3 { background: #f1c40f; color: #333; }
.hot-title { font-size: 13px; color: #444; line-height: 1.4; cursor: pointer; }
.hot-title:hover { color: #e84c3d; }
/* 标签云 */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a {
  background: #f5f6f7; color: #555; padding: 4px 10px;
  border-radius: 3px; font-size: 12px; border: 1px solid #e5e5e5; transition: all 0.15s;
}
.tag-cloud a:hover { background: #fff2f0; color: #e84c3d; border-color: #e84c3d; }
/* 分类 */
.cat-list { list-style: none; }
.cat-list li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #f5f5f5; font-size: 13px; }
.cat-list li:last-child { border-bottom: none; }
.cat-list a:hover { color: #e84c3d; }
/* 友情链接 */
.link-list { list-style: none; }
.link-list li { padding: 6px 0; border-bottom: 1px solid #f5f5f5; font-size: 13px; }
.link-list li:last-child { border-bottom: none; }
.link-list a { color: #555; transition: color 0.15s; }
.link-list a:hover { color: #e84c3d; }
.link-list a::before { content: "›"; margin-right: 6px; color: #e84c3d; }

/* ===== 语言切换 ===== */
.lang-switch { margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0f0f0; position: relative; display: flex; justify-content: center; }
.lang-trigger {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 20px; font-size: 12px; cursor: pointer;
  border: 1px solid #ddd; background: #f7f7f7; color: #555; transition: all 0.15s; user-select: none;
}
.lang-trigger:hover { border-color: #e84c3d; color: #e84c3d; background: #fff2f0; }
.lang-trigger .arrow { font-size: 10px; transition: transform 0.2s; }
.lang-trigger.open .arrow { transform: rotate(180deg); }
.lang-dropdown {
  display: none; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid #e5e5e5; border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1); overflow: hidden; min-width: 120px; z-index: 10;
}
.lang-dropdown.open { display: block; }
.lang-option { display: flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 13px; color: #444; cursor: pointer; transition: background 0.15s; }
.lang-option:hover { background: #fff2f0; color: #e84c3d; }
.lang-option.active { color: #e84c3d; font-weight: 500; }
.lang-option .flag { font-size: 16px; }

/* ===== 留言表单 ===== */
.webmaster-info { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; }
.webmaster-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #555; margin-bottom: 5px; }
.webmaster-label { color: #999; width: 48px; flex-shrink: 0; }
.webmaster-quote { font-size: 12px; color: #888; font-style: italic; margin-top: 6px; }
.form-row { margin-bottom: 10px; }
.form-input {
  width: 100%; padding: 7px 10px; font-size: 13px;
  border: 1px solid #ddd; border-radius: 4px; outline: none;
  background: #fafafa; transition: border-color 0.2s, background 0.2s;
  font-family: inherit; resize: vertical;
}
.form-input:focus { border-color: #e84c3d; background: #fff; }
.form-input.error { border-color: #e84c3d; background: #fff8f8; }
.form-err { display: block; font-size: 11px; color: #e84c3d; margin-top: 3px; }
.form-submit {
  width: 100%; padding: 8px; background: #e84c3d; color: #fff;
  border: none; border-radius: 4px; font-size: 13px; cursor: pointer; transition: background 0.15s; margin-top: 4px;
}
.form-submit:hover { background: #c0392b; }
.form-success { margin-top: 8px; padding: 8px 10px; background: #f0fff4; border: 1px solid #b7ebc8; border-radius: 4px; font-size: 13px; color: #27ae60; text-align: center; }
.form-error   { margin-top: 8px; padding: 8px 10px; background: #fff2f0; border: 1px solid #ffccc7; border-radius: 4px; font-size: 13px; color: #e84c3d; text-align: center; }
.msg-spinner {
  display: inline-block; width: 12px; height: 12px; vertical-align: middle;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius: 50%; animation: msgSpin 0.6s linear infinite;
}
@keyframes msgSpin { to { transform: rotate(360deg); } }

/* ===== 文章详情 ===== */
.post-main { background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; padding: 28px 32px; }
.post-category-badge {
  display: inline-block; background: #fff2f0; color: #e84c3d;
  padding: 2px 10px; border-radius: 3px; font-size: 12px; margin-bottom: 12px; cursor: pointer;
}
.post-main-title { font-size: 24px; font-weight: 700; color: #1a1a1a; line-height: 1.4; margin-bottom: 12px; }
.post-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: #999; padding-bottom: 18px;
  border-bottom: 1px solid #f0f0f0; margin-bottom: 24px;
}
.post-meta .author { display: flex; align-items: center; gap: 6px; }
.author-avatar-sm {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 600;
}
.post-meta .tags { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.tag-sm { background: #f0f4ff; color: #4a6cf7; padding: 2px 8px; border-radius: 3px; font-size: 12px; }
.post-content { line-height: 1.9; color: #444; }
.post-content h2 { font-size: 19px; font-weight: 700; color: #1a1a1a; margin: 28px 0 12px; padding-left: 12px; border-left: 4px solid #e84c3d; }
.post-content h3 { font-size: 16px; font-weight: 600; color: #1a1a1a; margin: 20px 0 8px; }
.post-content p { margin-bottom: 14px; }
.post-content ul, .post-content ol { padding-left: 24px; margin-bottom: 14px; }
.post-content li { margin-bottom: 5px; }
.post-content code { background: #f5f6f7; color: #e84c3d; padding: 2px 6px; border-radius: 3px; font-size: 13px; font-family: Consolas, monospace; }
.post-content pre { background: #1e1e2e; color: #cdd6f4; padding: 18px; border-radius: 6px; overflow-x: auto; margin-bottom: 18px; font-size: 13px; line-height: 1.7; font-family: Consolas, monospace; }
.post-content pre code { background: none; color: inherit; padding: 0; }
.post-content blockquote { border-left: 4px solid #e84c3d; padding: 10px 14px; background: #fff8f8; border-radius: 0 4px 4px 0; color: #666; margin-bottom: 14px; }
.post-content strong { color: #1a1a1a; }
.post-content img { max-width: 100%; border-radius: 4px; }
/* ===== 规格说明书下载 ===== */
.spec-download {
  display: flex; align-items: center; gap: 14px;
  margin: 28px 0 0; padding: 16px 20px;
  background: #f0f4ff; border: 1px solid #d0dcff;
  border-radius: 8px; border-left: 4px solid #4a6cf7;
}
.spec-download-icon { font-size: 28px; flex-shrink: 0; }
.spec-download-info { flex: 1; min-width: 0; }
.spec-download-title { font-size: 13px; font-weight: 600; color: #1a1a1a; margin-bottom: 2px; }
.spec-download-name  { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spec-download-btn {
  flex-shrink: 0; padding: 7px 18px; background: #4a6cf7; color: #fff;
  border-radius: 20px; font-size: 13px; text-decoration: none;
  transition: background 0.15s; white-space: nowrap;
}
.spec-download-btn:hover { background: #3a5ce5; color: #fff; }

.post-footer { margin-top: 32px; padding-top: 18px; border-top: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.post-actions { display: flex; gap: 10px; }
.action-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 16px; border-radius: 20px; font-size: 13px; cursor: pointer;
  border: 1px solid #e5e5e5; background: #fff; color: #666; transition: all 0.15s;
}
.action-btn:hover, .action-btn.liked { border-color: #e84c3d; color: #e84c3d; background: #fff2f0; }
.action-btn .heart { transition: transform 0.2s; display: inline-block; }
.action-btn.liked .heart { transform: scale(1.3); }
.post-share { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: #999; flex-wrap: wrap; }
.share-link { font-size: 12px; color: #4a6cf7; word-break: break-all; }
.share-link:hover { color: #e84c3d; text-decoration: underline; }
.post-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #666; padding: 5px 12px; border: 1px solid #e5e5e5; border-radius: 4px; transition: all 0.15s; margin-bottom: 14px; }
.post-back:hover { border-color: #e84c3d; color: #e84c3d; }

/* ===== 分页 ===== */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 8px; flex-wrap: wrap; }
.page-btn {
  min-width: 32px; height: 32px; padding: 0 10px; border: 1px solid #e5e5e5;
  border-radius: 4px; background: #fff; color: #555; font-size: 13px;
  cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.page-btn:hover { border-color: #6ab04c; color: #6ab04c; }
.page-btn.active { background: #6ab04c; border-color: #6ab04c; color: #fff; font-weight: 600; }
.page-btn.disabled { color: #ccc; cursor: default; pointer-events: none; }

/* ===== 页面标题栏 ===== */
.page-title-bar { background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; padding: 14px 20px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.page-title-bar h1 { font-size: 17px; font-weight: 600; color: #1a1a1a; }
.page-title-bar .sub { font-size: 13px; color: #999; }

/* ===== 底部 ===== */
.site-footer { text-align: center; color: #999; font-size: 12px; padding: 24px 0 32px; margin-top: 8px; }

/* ===== 分类红色标签 ===== */
.post-tag.red { background: #fff2f0; color: #e84c3d; }

/* 导航语言切换（桌面默认隐藏，移动端显示） */
.navbar-lang-switch { display: none; position: relative; flex-shrink: 0; margin-right: 4px; }
.navbar-lang-btn {
  height: 36px; padding: 0 8px; border: none; background: none;
  font-size: 13px; font-weight: 600; color: #333; cursor: pointer;
  display: flex; align-items: center; gap: 4px; letter-spacing: 0.5px;
}
.navbar-lang-btn .lang-globe { font-size: 16px; line-height: 1; }
.navbar-lang-btn .lang-text { font-size: 12px; color: #555; }
.navbar-lang-btn .lang-arrow { font-size: 9px; color: #aaa; margin-left: 1px; }
.navbar-lang-drop {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: #fff; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.13); z-index: 300;
  overflow: hidden; min-width: 110px;
}
.navbar-lang-drop a {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; font-size: 13px; color: #333;
  text-decoration: none; white-space: nowrap; transition: background 0.15s;
}
.navbar-lang-drop a:hover { background: #fafafa; }
.navbar-lang-drop a.active { color: #e84c3d; font-weight: 600; }
.navbar-lang-drop a.active::after { content: '✓'; margin-left: auto; font-size: 11px; color: #e84c3d; }

/* ============================================================
   手机端导航：汉堡按钮（桌面默认隐藏）
============================================================ */
.navbar-hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  width: 40px; height: 40px; cursor: pointer; flex-shrink: 0;
  border: none; background: none; padding: 0; margin-left: auto; gap: 5px;
}
.navbar-hamburger span {
  display: block; width: 22px; height: 2px;
  background: #333; border-radius: 2px; transition: all 0.25s;
}
/* 抽屉内容样式（位置由内联style+JS控制，不依赖外部CSS才能定位） */
.mobile-nav-links a {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px; font-size: 15px; color: #333;
  border-bottom: 1px solid #f8f8f8; text-decoration: none;
}
.mobile-nav-links a:hover { background: #fff2f0; color: #e84c3d; }
.mobile-nav-links { flex: 1; overflow-y: auto; padding: 8px 0; }
.mobile-nav-head {
  height: 52px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 16px;
  border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
}
.mobile-nav-head .site-name { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.mobile-nav-close {
  width: 32px; height: 32px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; font-size: 20px;
  color: #666; border: none; background: none; padding: 0;
}
.mobile-nav-lang {
  padding: 16px; border-top: 1px solid #f0f0f0;
  display: flex; gap: 8px; flex-shrink: 0;
}
.mobile-nav-lang a {
  flex: 1; text-align: center; padding: 8px; border: 1px solid #ddd;
  border-radius: 4px; font-size: 13px; color: #555; text-decoration: none;
}
.mobile-nav-lang a.active { background: #e84c3d; color: #fff; border-color: #e84c3d; }

/* ============================================================
   手机端首页个人主页样式
   注意：.mobile-home 本身用内联 style="display:none" 隐藏，
   由下方媒体查询覆盖为 display:block，确保桌面无论如何都不显示
============================================================ */
.mp-banner {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  padding: 28px 16px 52px;
}
.mp-banner-title { color: #fff; font-size: 20px; font-weight: 700; line-height: 1.4; }
.mp-banner-desc  { color: rgba(255,255,255,0.65); font-size: 13px; margin-top: 6px; }

.mp-profile-card { background: #fff; padding: 0 16px 16px; }
.mp-avatar-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 14px;
}
.mp-avatar {
  width: 76px; height: 76px; border-radius: 50%;
  border: 3px solid #fff; margin-top: -38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.mp-follow-btn {
  display: inline-block; padding: 8px 20px;
  background: #e84c3d; color: #fff; border-radius: 20px;
  font-size: 14px; font-weight: 500; text-decoration: none; flex-shrink: 0;
}
.mp-follow-btn:hover { background: #c0392b; color: #fff; }
.mp-name { font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 14px; }
.mp-stats-row { display: flex; border-top: 1px solid #f0f0f0; padding-top: 14px; }
.mp-stat-item { flex: 1; text-align: center; border-right: 1px solid #f0f0f0; }
.mp-stat-item:last-child { border-right: none; }
.mp-stat-num { font-size: 18px; font-weight: 700; color: #1a1a1a; }
.mp-stat-label { font-size: 11px; color: #999; margin-top: 3px; }

.mp-contact-card {
  background: #fff; margin-top: 8px; padding: 0 16px;
  border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
}
.mp-contact-row {
  display: flex; flex-direction: row; align-items: center;
  padding: 10px 0; font-size: 14px; border-bottom: 1px solid #f8f8f8; gap: 8px;
}
.mp-contact-row:last-child { border-bottom: none; }
.mp-contact-label { color: #888; font-size: 13px; flex-shrink: 0; }
.mp-contact-value { color: #333; font-weight: 500; word-break: break-all; font-size: 13px; }

.mp-tabs {
  display: flex; background: #fff; margin-top: 8px;
  border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
}
.mp-tab {
  flex: 1; padding: 13px 8px; font-size: 15px; color: #666;
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; font-weight: 500; font-family: inherit;
}
.mp-tab.active { color: #e84c3d; border-bottom-color: #e84c3d; }

.mp-list { background: #fff; margin-top: 8px; }
.mp-list-item {
  display: block; padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0; text-decoration: none;
}
.mp-list-item:hover { background: #fafafa; }
.mp-list-title {
  font-size: 15px; color: #1a1a1a; line-height: 1.5; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.mp-list-meta { font-size: 12px; color: #aaa; }
.mp-list-meta span { margin-right: 12px; }
.mp-pagination { padding: 12px 16px; }

.mp-msg-section { background: #fff; margin-top: 8px; padding: 16px; }
.mp-msg-title {
  font-size: 15px; font-weight: 600; color: #1a1a1a;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0;
}
.mp-footer { text-align: center; color: #ccc; font-size: 12px; padding: 20px 16px; background: #fff; margin-top: 8px; }

/* ============================================================
   响应式断点 ≤ 768px
============================================================ */
@media (max-width: 768px) {
  /* 导航栏 */
  .navbar-search    { display: none; }
  .navbar-hamburger { display: flex; }
  .navbar-lang-switch { display: flex; }

  /* 首页：隐藏桌面布局，显示手机布局（桌面布局用 id 精准定位） */
  #homeDesktopWrap   { display: none !important; }
  #homeDesktopFooter { display: none !important; }
  .mobile-home       { display: block !important; }

  /* 非首页：单列响应式，侧边栏隐藏 */
  .main-wrap {
    grid-template-columns: 1fr !important;
    padding: 0 10px; margin-top: 10px; gap: 10px;
  }
  .main-wrap > aside         { display: none !important; }
  .main-wrap > .content-col  { order: 1 !important; }

  /* 文章卡片手机化 */
  .post-card { padding: 12px 14px; }
  .post-thumb { width: 88px; height: 60px; }
  .post-excerpt { display: none; }

  /* 文章详情页 */
  .post-main { padding: 16px 14px; border-radius: 0; border-left: none; border-right: none; }
  .post-main-title { font-size: 18px; }
  .post-meta { gap: 8px; font-size: 12px; flex-wrap: wrap; }
  .post-meta .tags { margin-left: 0; }
  .post-content h2 { font-size: 16px; }
  .post-content pre { font-size: 12px; padding: 12px; overflow-x: auto; }
  .post-content img { max-width: 100%; }

  /* Topic banner 竖排 */
  .topic-banner { flex-direction: column; }
  .topic-banner-img { width: 100%; height: 120px; }

  /* 标题栏 / tabs 去圆角/边框 */
  .page-title-bar { border-radius: 0; border-left: none; border-right: none; }
  .feed-tabs { border-radius: 0; border-left: none; border-right: none; }

  /* 分页缩小 */
  .page-btn { min-width: 28px; height: 28px; font-size: 12px; }

  /* 规格下载竖排 */
  .spec-download { flex-direction: column; gap: 10px; align-items: stretch; }
  .spec-download-btn { width: 100%; text-align: center; border-radius: 6px; }

  /* 底部 */
  .site-footer { padding: 16px 0 24px; }
}

/* ========================================
   手机端导航栏扩展
======================================== */
.navbar-hamburger {
  display: none; /* 桌面隐藏 */
  flex-direction: column; justify-content: center; align-items: center;
  width: 40px; height: 40px; cursor: pointer; gap: 5px; flex-shrink: 0;
  border: none; background: none; padding: 0; margin-left: auto;
}
.navbar-hamburger span {
  display: block; width: 22px; height: 2px; background: #333;
  border-radius: 2px; transition: all 0.25s;
}
.mobile-nav-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200;
}
.mobile-nav-overlay.open { display: block; }
.mobile-nav-drawer {
  position: fixed; top: 0; right: -260px; bottom: 0; width: 240px;
  background: #fff; z-index: 201; transition: right 0.3s;
  display: flex; flex-direction: column; padding: 0;
  box-shadow: -4px 0 16px rgba(0,0,0,0.12);
}
.mobile-nav-drawer.open { right: 0; }
.mobile-nav-head {
  height: 52px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
}
.mobile-nav-head .site-name { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.mobile-nav-close {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 20px; color: #666; border: none; background: none;
}
.mobile-nav-links { flex: 1; overflow-y: auto; padding: 8px 0; }
.mobile-nav-links a {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px; font-size: 15px; color: #333;
  border-bottom: 1px solid #f8f8f8; transition: background 0.15s;
}
.mobile-nav-links a:hover { background: #fff2f0; color: #e84c3d; }
.mobile-nav-lang {
  padding: 16px; border-top: 1px solid #f0f0f0; display: flex; gap: 8px; flex-shrink: 0;
}
.mobile-nav-lang a {
  flex: 1; text-align: center; padding: 8px; border: 1px solid #ddd;
  border-radius: 4px; font-size: 13px; color: #555;
}
.mobile-nav-lang a.active { background: #e84c3d; color: #fff; border-color: #e84c3d; }

/* ========================================
   手机端首页：个人主页样式
======================================== */
.mobile-home { display: none; } /* 桌面隐藏 */

.mp-banner {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
  min-height: 100px; padding: 28px 16px 52px;
  position: relative;
}
.mp-banner-title {
  color: #fff; font-size: 20px; font-weight: 700; line-height: 1.4;
}
.mp-banner-desc {
  color: rgba(255,255,255,0.6); font-size: 13px; margin-top: 6px;
}

.mp-profile-card {
  background: #fff; padding: 0 16px 16px; position: relative;
}
.mp-avatar-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-top: 0; margin-bottom: 14px;
}
.mp-avatar {
  width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0;
  border: 3px solid #fff; margin-top: -38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.mp-follow-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 20px; background: #e84c3d; color: #fff;
  border-radius: 20px; font-size: 14px; font-weight: 500;
  text-decoration: none; transition: background 0.15s; flex-shrink: 0;
}
.mp-follow-btn:hover { background: #c0392b; color: #fff; }

.mp-name { font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; }
.mp-stats-row {
  display: flex; gap: 0; border-top: 1px solid #f0f0f0;
  padding-top: 14px;
}
.mp-stat-item {
  flex: 1; text-align: center; padding: 0 4px;
  border-right: 1px solid #f0f0f0;
}
.mp-stat-item:last-child { border-right: none; }
.mp-stat-num { font-size: 18px; font-weight: 700; color: #1a1a1a; line-height: 1.2; }
.mp-stat-label { font-size: 11px; color: #999; margin-top: 3px; }

.mp-contact-card {
  margin: 8px 0 0;
  background: #fff; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
  padding: 0 16px;
}
.mp-contact-row {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 12px 0; font-size: 14px; border-bottom: 1px solid #f8f8f8;
}
.mp-contact-row:last-child { border-bottom: none; }
.mp-contact-label { color: #888; flex-shrink: 0; margin-right: 10px; }
.mp-contact-value { color: #333; font-weight: 500; word-break: break-all; text-align: left; }
  margin-top: 8px;
}
.mp-tab {
  flex: 1; padding: 13px 8px; font-size: 15px; color: #666;
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; font-weight: 500; transition: color 0.15s, border-color 0.15s;
}
.mp-tab.active { color: #e84c3d; border-bottom-color: #e84c3d; }

.mp-list { background: #fff; margin-top: 8px; }
.mp-list-item {
  display: block; padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0; text-decoration: none;
  transition: background 0.12s;
}
.mp-list-item:hover { background: #fafafa; }
.mp-list-item:active { background: #f5f5f5; }
.mp-list-title {
  font-size: 15px; color: #1a1a1a; line-height: 1.5; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mp-list-meta { font-size: 12px; color: #aaa; }
.mp-list-meta span { margin-right: 12px; }

.mp-msg-section {
  background: #fff; margin-top: 8px;
  padding: 16px; border-top: 1px solid #f0f0f0;
}
.mp-msg-title {
  font-size: 15px; font-weight: 600; color: #1a1a1a;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.mp-footer {
  text-align: center; color: #ccc; font-size: 12px;
  padding: 20px 16px; background: #fff; margin-top: 8px;
}

/* ========================================
   响应式断点 ≤ 768px
======================================== */
@media (max-width: 768px) {

  /* 隐藏桌面搜索框 */
  .navbar-search { display: none; }
  /* 显示汉堡按钮 */
  .navbar-hamburger { display: flex; }

  /* ── 首页：隐藏桌面布局，显示手机布局 ── */
  .desktop-only { display: none !important; }
  .mobile-home  { display: block !important; }

  /* ── 非首页：单列响应式 ── */
  .main-wrap {
    grid-template-columns: 1fr !important;
    padding: 0 10px;
    margin-top: 10px;
    gap: 10px;
  }
  .main-wrap > aside { display: none; } /* 隐藏侧边栏 */
  .main-wrap > .content-col { order: 1 !important; width: 100%; }

  /* 文章卡片 */
  .post-card { flex-direction: row; padding: 12px 14px; }
  .post-thumb { width: 88px; height: 64px; }
  .post-title-link { font-size: 15px; }
  .post-excerpt { display: none; } /* 手机省略摘要 */
  .post-card-meta-top { margin-bottom: 5px; }

  /* 文章详情 */
  .post-main { padding: 16px 14px; border-radius: 0; border-left: none; border-right: none; }
  .post-main-title { font-size: 19px; }
  .post-content h2 { font-size: 16px; }
  .post-content pre { font-size: 12px; padding: 12px; }
  .post-meta { gap: 8px; font-size: 12px; }
  .post-meta .tags { margin-left: 0; }

  /* topic banner 竖排 */
  .topic-banner { flex-direction: column; }
  .topic-banner-img { width: 100%; height: 120px; }

  /* 标题栏 */
  .page-title-bar { border-radius: 0; border-left: none; border-right: none; }

  /* 分页 */
  .pagination { gap: 4px; }
  .page-btn { min-width: 28px; height: 28px; font-size: 12px; }

  /* feed tabs */
  .feed-tabs { border-radius: 0; border-left: none; border-right: none; }

  /* spec下载块 */
  .spec-download { flex-direction: column; gap: 10px; align-items: flex-start; }
  .spec-download-btn { width: 100%; text-align: center; border-radius: 6px; }

  /* footer */
  .site-footer { padding: 16px 0 24px; }
}