/* ==========================================================================
   榴莲社区 · Durian Community
   设计语言参照 linux.do（Discourse）—— 数值经真实页面像素取样校验
   主色 #0088cc · 公告 #d1f0ff · 边框 #e9e9e9 · 悬停 #f2f2f2
   热度 #fe7a15 / #cf7721 / #9b764f · 次级文字 #646464 · 弱化 #434343
   ========================================================================== */

:root {
  /* —— 品牌 —— */
  --brand: #1f8a4c;          /* 榴莲青：Logo、强调、状态 */
  --brand-deep: #16693a;
  --brand-soft: #e8f6ed;
  --brand-line: #c9e9d4;

  /* —— linux.do 复刻令牌（像素实测）—— */
  --primary: #222222;
  --secondary: #ffffff;
  --tertiary: #0088cc;       /* 主色 */
  --tertiary-hover: #0077b3;
  --text2: #646464;          /* 次级文字 */
  --muted: #434343;          /* 弱化文字 */
  --faint: #919191;
  --border: #e9e9e9;         /* 分隔线 / 标签底 */
  --hover: #f2f2f2;          /* 悬停 / 激活底 */
  --banner-bg: #d1f0ff;      /* 公告条 */
  --pill-bg: #d1f0ff;        /* 新帖提示 */
  --heat-hi: #fe7a15;
  --success: #2f9e44;        /* 成功 / 强密码 */
  --danger: #e03131;         /* 错误 */
  --danger-bg: #fff5f5;
  --danger-border: #ffc9c9;
  --heat-med: #cf7721;
  --heat-low: #9b764f;
  --love: #e4395e;

  /* —— 尺寸 —— */
  --sidebar-w: 250px;   /* 实测 linux.do 侧栏分隔线 @250px */
  --header-h: 52px;    /* 实测 header 下边框 @52px */
  /* 内容区最大宽度。实测 linux.do：容器总宽 1481px = 侧栏 250 + 内容 1231 */
  --content-w: 1231px;
  --radius: 4px;

  --font: "Inter", "PingFang SC", "Microsoft YaHei", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  background: var(--secondary);
  color: var(--primary);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; cursor: pointer; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul, ol { list-style: none; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #c4c4c4; }
::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   顶部 Header
   实测 linux.do：Logo 与左侧栏左缘严格对齐（同一容器起点），搜索居中，右侧登录
   ========================================================================== */
.d-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--secondary);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

.hd-wrap {
  height: 100%;
  max-width: calc(var(--sidebar-w) + var(--content-w));
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* Logo 与侧栏左缘对齐：抵消 hd-wrap 左 padding(16) + 侧栏项内边距(5) */
.hd-left { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: -21px; }
/* 容器不小于视口时，顶栏补足左内边距，避免 Logo 贴死屏幕边缘 */
@media (max-width: 1481px) {
  .hd-left { margin-left: 0; }
  .hd-wrap { padding: 0 16px; }
}

.hd-left { display: flex; align-items: center; gap: 10px; min-width: 0; }

.hd-menu {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  color: var(--muted);
  flex-shrink: 0;
}
.hd-menu:hover { background: var(--hover); }

/* —— 品牌 Logo —— */
.brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.brand-mark {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brand-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--primary);
  white-space: nowrap;
}
.brand-en {
  font-size: 11px;
  font-weight: 600;
  color: var(--faint);
  letter-spacing: .8px;
  text-transform: uppercase;
  padding-left: 8px;
  margin-left: 2px;
  border-left: 1px solid var(--border);
  white-space: nowrap;
}

/* —— 侧栏顶部搜索 —— */
.sb-search { padding: 0 12px 12px; }
.sb-search input {
  width: 100%; height: 32px;
  padding: 0 10px 0 30px;
  font-family: inherit; font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #f8f8f8
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23919191' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")
    no-repeat 9px center;
  outline: none;
  color: var(--primary);
}
.sb-search input:focus {
  border-color: var(--tertiary);
  background-color: #fff;
  box-shadow: 0 0 0 2px rgba(0, 136, 204, .12);
}
.sb-search input::placeholder { color: var(--faint); }

/* —— 头部右侧 —— */
.hd-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.btn-login {
  background: var(--tertiary); color: #fff;
  height: 34px; padding: 0 14px;
  border-radius: var(--radius);
  font-size: 13.93px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .12s;
}
.btn-login:hover { background: var(--tertiary-hover); }
.btn-login svg { width: 15px; height: 15px; }

.btn-lang {
  height: 34px; padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 4px;
}
.btn-lang:hover { background: var(--hover); }
.btn-lang .caret { color: var(--faint); display: inline-flex; align-items: center; }
.btn-lang .caret svg { width: 12px; height: 12px; }

.icon-btn {
  width: 34px; height: 34px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--hover); }

.user-chip {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 700;
  flex-shrink: 0;
  border: 1.5px solid #b2e7ff;
}

/* ==========================================================================
   左侧栏（linux.do：250px，顶部导航 + 分类 + 底部）
   ========================================================================== */
/* ==========================================================================
   主体布局
   对应 Discourse：
     #main-outlet-wrapper { display: flex; justify-content: space-between }
     #main-outlet { max-width: var(--d-max-width); margin: 0 auto }
   实测 linux.do（视口 3440）：容器左缘 1000、右缘 2481 → 两侧留白 1000/958
   即：整体偏右，内容区在剩余空间内居中
   ========================================================================== */
.layout {
  padding-top: var(--header-h);
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

.layout-wrap {
  width: 100%;
  max-width: calc(var(--sidebar-w) + var(--content-w));
  display: flex;
  align-items: flex-start;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--secondary);
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 12px 0 0;
}

/* 侧栏为纵向 flex 容器：内容超出可视高度时整体滚动，
   而不是压缩各分区（分组带 overflow:hidden，压缩会导致内容被裁切）。 */
.sidebar > * { flex-shrink: 0; }
.sidebar > .sb-flex { flex: 1 0 auto; }

.sb-nav { display: flex; flex-direction: column; }

/* 实测 linux.do：图标起点 = 侧栏左缘 + 5px，文字起点 = 图标右 + 10px
   激活态灰底从侧栏左缘 + 5px 开始，带 4px 圆角 */
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 5px;
  margin: 0 8px 0 5px;
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--muted);
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  transition: background .1s;
  cursor: pointer;
}.sb-item:hover { background: var(--hover); }
.sb-item.active {
  background: var(--hover);
  font-weight: 600;
  color: var(--primary);
}
/* 实测 linux.do：图标高 15px，文字字高 9px（约 14px 字号），图标与文字间距 10px */
.sb-item .ic {
  width: 15px; height: 15px;
  display: flex; align-items: center; justify-content: center;
  color: var(--faint);
  flex-shrink: 0;
}
.sb-item .ic svg { width: 15px; height: 15px; }
.sb-item.active .ic { color: var(--muted); }
.sb-item .cnt {
  margin-left: auto;
  font-size: 12px; color: var(--text2);
  background: var(--border);
  border-radius: 9px; padding: 0 7px; line-height: 18px;
  flex-shrink: 0;
}
.sb-item.active .cnt { background: #dcdcdc; }

/* ---------- 顶级独立分区（榴莲AI / 管理后台） ----------
   与「话题 / 近期活动 / 更多」等平级，用细分隔线与上方导航区分 */
.sb-top {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.sb-top .sb-item {
  margin-left: 5px;
  margin-right: 8px;
}

/* 榴莲AI：艺术字品牌项（毛笔楷书 + 品牌渐变） */
.sb-ai {
  position: relative;
}
.sb-ai .ic {
  color: var(--tertiary);
}
.sb-ai:hover .ic { color: var(--tertiary-hover); }

.ai-art {
  font-family: 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'Noto Serif SC', 'Songti SC', serif;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1.2;
  background: linear-gradient(100deg, #00a878, #0088cc 52%, #6c5ce7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 2px;
}
.ai-art b {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 2px;
  margin-left: 2px;
  vertical-align: 3px;
}
.sb-ai.active { background: var(--hover); }
.sb-ai.active .ic { color: var(--muted); }

/* 分区标题 */
.sb-section {
  display: flex; align-items: center; gap: 6px;
  margin: 16px 16px 4px;
  font-size: 12px; font-weight: 700;
  color: var(--text2);
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.sb-section::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.6px solid var(--faint);
  border-bottom: 1.6px solid var(--faint);
  transform: rotate(45deg) translateY(-2px);
  margin-left: 2px;
  transition: transform .15s;
}
.sb-section.collapsed::after { transform: rotate(-45deg) translate(-1px, 1px); }
.sb-section .zh {
  text-transform: none;
  letter-spacing: .3px;
  font-weight: 600;
}

.sb-group { overflow: hidden; max-height: 2000px; transition: max-height .2s ease; }
.sb-group.collapsed { max-height: 0; }

.sb-flex { flex: 1; min-height: 12px; }

/* 底部 */
/* 底部一行：左侧「Default」与右侧图标组
   左内边距与上方导航项保持一致（侧栏左缘 + 5px 边距 + 5px 项内边距 = 图标起点），
   否则这一排的图标会比上面所有导航项右移约 15px。 */
.sb-bottom {
  border-top: 1px solid var(--border);
  padding: 8px 8px 10px 5px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  position: sticky; bottom: 0;
  background: var(--secondary);
}
.sb-bottom .sb-item { padding: 6px 8px 6px 5px; margin-left: 0; font-size: 13px; flex: 1; }
.sb-bottom .sb-item .caret { display: inline-flex; align-items: center; color: var(--faint); }
.sb-bottom .sb-item .caret svg { width: 12px; height: 12px; }
.sb-icons { display: flex; gap: 2px; margin-left: auto; }
.sb-icons .icon-btn { width: 28px; height: 28px; }
.sb-icons .icon-btn svg { width: 15px; height: 15px; }

/* ==========================================================================
   内容区
   实测 linux.do（视口 3440）：
     侧栏分隔线 x=1182，公告条 x=1215..2481
     → 内容区左内边距 33px；公告条右缘与容器右缘齐平
   ========================================================================== */
.main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding-left: 33px;
  padding-right: 11px;
  position: relative;
}

/* 公告条（实测 linux.do：高 38px，底色 #d1f0ff，文字左内边距 16px、顶部 11px） */
.banner {
  background: var(--banner-bg);
  color: var(--primary);
  padding: 11px 16px;
  font-size: 14px;
  line-height: 20px;
  min-height: 38px;
  display: flex;
  align-items: center;
}
.banner b { font-weight: 700; }
.banner a {
  color: var(--tertiary);
  text-decoration: none;
  margin-left: 6px;
  white-space: nowrap;
}
.banner a:hover { color: var(--tertiary-hover); text-decoration: underline; text-underline-offset: 2px; }

/* 工具栏 */
.toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0 0;
  flex-wrap: wrap;
  position: relative;
}
.drop-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #d3d3d3; border-radius: var(--radius);
  height: 32px; padding: 0 11px;
  font-size: 14px; font-weight: 500;
  color: var(--text2);
  background: var(--secondary);
  transition: border-color .12s, color .12s;
}
.drop-btn:hover { border-color: #bdbdbd; color: var(--muted); }
.drop-btn.filtered { border-color: var(--tertiary); color: var(--tertiary); }
.drop-btn .caret {
  color: var(--faint); font-size: 15px; line-height: 1;
  transform: translateY(-1px);
}

.tab-links { display: flex; align-items: center; gap: 2px; }
.tab-links a {
  font-size: 14px;
  color: var(--muted);
  padding: 8px 10px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s;
}
.tab-links a:hover { color: var(--tertiary); }
.tab-links a.active {
  color: var(--tertiary);
  font-weight: 600;
  border-bottom-color: var(--tertiary);
}

.toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.list-count { font-size: 13px; color: var(--text2); }

.btn-primary {
  background: var(--tertiary); color: #fff;
  border-radius: var(--radius);
  padding: 7px 13px;
  font-size: 13.93px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .12s;
}
.btn-primary:hover { background: var(--tertiary-hover); }
.btn-primary svg { width: 14px; height: 14px; }

.btn-ghost {
  border: 1px solid #d3d3d3; background: var(--secondary);
  height: 32px; padding: 0 12px;
  border-radius: var(--radius);
  font-size: 14px; color: var(--text2);
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-ghost:hover { border-color: #bdbdbd; color: var(--primary); }

/* 下拉菜单 */
.cat-menu {
  position: absolute; top: 48px; left: 0; z-index: 60;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .14);
  padding: 5px;
  min-width: 220px;
  max-height: 400px; overflow-y: auto;
}
.cat-menu.hidden { display: none; }
.cat-menu .mi {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: var(--radius);
  font-size: 14px; color: var(--muted);
  cursor: pointer;
}
.cat-menu .mi:hover { background: var(--hover); }
.cat-menu .mi.active { background: var(--hover); font-weight: 600; color: var(--primary); }

/* ==========================================================================
   话题列表（linux.do table 结构）
   ========================================================================== */
.topic-table { width: 100%; border-collapse: collapse; margin-top: 0; }
.topic-table thead th {
  font-size: 13.93px; font-weight: 400;
  color: var(--muted);
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  text-align: center;
}
/* 实测 linux.do：横幅 x=283，Topic 标题左边缘 x=293（+10px）；表头文字 x=304 起 */
.topic-table thead th.col-topic { text-align: left; padding-left: 10px; }
.topic-table thead th.col-activity { text-align: right; padding-right: 11px; width: 82px; }
.topic-table thead th.col-num { width: 62px; }

.topic-table tbody tr { border-bottom: 1px solid var(--border); }
.topic-table tbody tr:hover { background: #fafafa; }

/* 实测 linux.do：单元格上下 padding 约 10px，行距 70px */
td.col-topic { padding: 10px 6px 10px 10px; }
.topic-title {
  font-size: 17.5px;
  font-weight: 400;
  color: var(--primary);
  line-height: 1.35;
  display: inline-block;
}
.topic-title:hover { color: var(--tertiary); }
a.topic-title.visited { color: var(--faint); }

.topic-badges { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
/* 图标与文字都显式成 flex item：line-height:1 + align-items:center 保证严格垂直居中，
   避免裸 svg / 匿名文本节点 + line-height:20px 造成的上下与左右偏移 */
.cat-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px;
  font-size: 13.93px; line-height: 1; color: var(--text2);
  white-space: nowrap;
}
.cat-badge > svg { width: 15px; height: 15px; flex: 0 0 auto; display: block; }
.cat-badge > span { display: inline-flex; align-items: center; line-height: 1; }
.cat-badge .ic { width: 15px; height: 15px; display: flex; }
/* 实测 linux.do：chip 底 #e9e9e9，高 20px，文字 #646464 */
.tag-badge {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius);
  background: var(--border);
  color: var(--text2);
  font-size: 12.5px; line-height: 1;
  white-space: nowrap;
}
.tag-badge > svg { width: 12px; height: 12px; flex: 0 0 auto; display: block; }
.tag-badge > span { display: inline-flex; align-items: center; line-height: 1; }
.tag-badge .ic { width: 13px; height: 13px; display: flex; flex-shrink: 0; }
.tag-badge .ic svg { width: 13px; height: 13px; }

.pin-ic { display: inline-flex; vertical-align: -2px; margin-right: 6px; }
.pin-ic svg { width: 15px; height: 15px; }

/* 实测 linux.do：Replies 列首 x=1053 → 参与者列需收窄
   头像 22px 圆形 + #b2e7ff 浅蓝描边，彼此不重叠 */
td.col-posters { text-align: center; padding: 6px 0; width: 94px; }
.posters { display: inline-flex; gap: 2px; }
.posters .pav {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; font-weight: 700;
  border: 1.5px solid #b2e7ff;
  overflow: hidden;
  flex-shrink: 0;
}

td.col-num, td.col-activity {
  text-align: center; padding: 10px 6px;
  font-size: 13.93px; line-height: 18px; color: var(--muted); white-space: nowrap;
}
td.col-activity { text-align: right; padding-right: 16px; color: var(--text2); }
td.heat-hi { color: var(--heat-hi) !important; font-weight: 600; }
td.heat-med { color: var(--heat-med) !important; }
td.heat-low { color: var(--heat-low) !important; }
.empty { padding: 60px 16px; text-align: center; color: var(--text2); }

/* 新帖提示条
   实测 linux.do（1280 CSS）：提示条 x=670..881、y=173..198；表头下边框 y=213
   → 提示条浮于表头上方 15px，水平居中于内容区 */
.topic-list-wrap { margin-top: 8px; }


/* ==========================================================================
   话题详情页
   ========================================================================== */
.topic-head { padding: 16px 0 4px; max-width: 700px; }
.topic-h1 { font-size: 26px; font-weight: 700; line-height: 1.3; }
.topic-sub { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }

/* 实测 linux.do：正文列宽上限约 700px，右侧留出时间线空间 */
/* 实测 linux.do：正文文字右缘 CSS 949，时间线位于 CSS 1000+
   → 正文列最大宽度 700px，为右侧时间线留出空间 */
.posts { padding: 0; }
.post {
  display: flex; gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  max-width: 700px;
}
.post .avatar {
  width: 44px; height: 44px; border-radius: var(--radius);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 17px;
  cursor: pointer;
}
.post-main { flex: 1; min-width: 0; }
/* Discourse / linux.do：用户名与头衔在左，时间 + 楼层号靠右 */
.post-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-head .name { order: 0; font-size: 14px; font-weight: 700; color: var(--primary); }
.post-head .op-tag {
  order: 1;
  background: var(--brand-soft); color: var(--brand-deep);
  font-size: 11.5px; padding: 1px 7px; border-radius: 3px;
  font-weight: 600; line-height: 1.4;
}
.post-head .rank { order: 3; font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.post-head .rank:hover { color: var(--tertiary); }
.post-head .time { order: 2; margin-left: auto; font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.post-body { margin-top: 10px; font-size: 15px; line-height: 1.65; word-break: break-word; }
/* 负 margin 让操作按钮图标与正文左边缘对齐（linux.do 细节） */
.post-foot { margin-top: 12px; margin-left: -8px; display: flex; gap: 2px; align-items: center; }

.like-btn, .reply-link {
  border: none; background: none;
  font-size: 12.5px; color: var(--text2); line-height: 1.4;
  padding: 4px 8px; border-radius: var(--radius);
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .1s, color .1s;
}
.like-btn:hover, .reply-link:hover { background: var(--hover); color: var(--tertiary); }
.like-btn.liked { color: var(--love); }
.like-btn.liked svg { color: var(--love); }
.like-btn svg, .reply-link svg { width: 15px; height: 15px; }

/* 正文 Markdown */
.post-body code {
  background: var(--hover); padding: 1px 6px; border-radius: 3px;
  font-family: Consolas, "Courier New", monospace; font-size: 13.5px;
}
.post-body blockquote {
  border-left: 3px solid var(--border);
  padding: 4px 0 4px 12px;
  color: var(--text2);
  margin: 6px 0;
}
.post-body a { color: var(--tertiary); text-decoration: underline; text-underline-offset: 2px; }
.post-body ul { list-style: disc; padding-left: 22px; margin: 6px 0; }
.post-body ol { list-style: decimal; padding-left: 22px; margin: 6px 0; }
.post-body li { margin: 2px 0; }
.post-body h3 { font-size: 17px; font-weight: 700; margin: 10px 0 4px; }
.post-body img { max-width: 100%; border-radius: var(--radius); }

/* 回复框 */
.reply-box {
  margin: 16px 0; padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 700px;
}
.reply-box h3 { font-size: 14px; margin-bottom: 10px; }
.reply-box textarea {
  width: 100%; min-height: 90px;
  padding: 10px 12px;
  font-family: inherit; font-size: 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  resize: vertical; outline: none; color: var(--primary);
  background: var(--secondary);
}
.reply-box textarea:focus { border-color: var(--tertiary); }
.reply-box textarea::placeholder { color: var(--faint); }
.reply-box .row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 12px; }
.reply-box .hint { font-size: 12.5px; color: var(--text2); }

/* 回复指定楼层：linux.do 的 composer 会显示被引用的对象 */
.reply-to-bar {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 10px; padding: 6px 10px;
  border-radius: var(--radius);
  background: var(--brand-soft); color: var(--brand-deep);
  font-size: 12.5px; line-height: 1.4;
}
.reply-to-bar .rt-ic { display: inline-flex; align-items: center; }
.reply-to-bar .rt-x {
  margin-left: auto; border: none; background: none;
  color: inherit; font-family: inherit; font-size: 12.5px;
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; padding: 0 2px;
}
.reply-to-bar .rt-x:hover { color: var(--tertiary); }
.post.post-target { background: rgba(0, 136, 204, .055); border-radius: var(--radius); }

/* 右侧楼层时间线
   实测 linux.do：浅蓝竖条 #b2e7ff、handle 为主色蓝位于顶部、
   楼层数「1 / 661」粗体深色、日期灰色分列上下 */
.timeline {
  position: fixed; right: 14px; top: 150px; z-index: 40;
  display: none; align-items: flex-start; gap: 10px;
  background: var(--secondary);
  padding: 8px 6px;
  border-radius: var(--radius);
}
.timeline.show { display: flex; }
.tl-dates {
  display: flex; flex-direction: column; justify-content: flex-start;
  font-size: 12.5px; color: var(--text2); white-space: nowrap;
  order: 0; padding-top: 2px; gap: 4px;
}
.tl-track {
  position: relative; width: 4px;
  background: #b2e7ff; border-radius: 2px; height: 200px;
  order: 1; margin-top: 22px;
}
.tl-handle {
  position: absolute; left: 0; width: 4px; height: 26px;
  background: var(--tertiary); border-radius: 2px;
}
.tl-left {
  display: flex; flex-direction: column; gap: 2px;
  white-space: nowrap; order: 2; padding-top: 2px;
}
.tl-left b { font-weight: 700; font-size: 15px; color: var(--primary); }
.tl-total { color: var(--text2); font-size: 12.5px; }

/* 相关话题 */
.suggested { margin: 24px 0 40px; }
.suggested h3 { font-size: 14px; font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.sug-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 900px) { .sug-grid { grid-template-columns: 1fr; } }
.sug-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 13px; display: block; }
.sug-card:hover { border-color: var(--tertiary); }
.sug-card .t { font-size: 14px; color: var(--primary); line-height: 1.4; display: block; }
.sug-card:hover .t { color: var(--tertiary); }
.sug-card .m { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 12px; color: var(--text2); }
.sug-card .m .sep { color: #c9c9c9; }

/* ==========================================================================
   发帖弹窗
   ========================================================================== */
.modal-mask {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, .45);
}
.modal-mask.open { display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; }
.modal {
  background: var(--secondary);
  border-radius: var(--radius);
  width: 100%; max-width: 660px;
  padding: 16px 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-head h3 { font-size: 16px; font-weight: 700; }
.title-wrap { position: relative; margin-bottom: 10px; }
.title-wrap input {
  width: 100%; padding: 9px 56px 9px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 15px; font-family: inherit; outline: none; color: var(--primary);
}
.title-wrap input:focus { border-color: var(--tertiary); }
.title-count { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--faint); }
.md-toolbar {
  display: flex; gap: 2px;
  border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 4px 6px; background: #fafafa;
}
.md-toolbar button {
  min-width: 30px; height: 28px; border-radius: 3px; font-size: 13px;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.md-toolbar button:hover { background: #ececec; }
.modal textarea {
  width: 100%; min-height: 170px;
  padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius);
  font-size: 15px; font-family: inherit; outline: none; color: var(--primary);
  resize: vertical; margin-bottom: 12px;
  background: var(--secondary);
}
.modal textarea:focus { border-color: var(--tertiary); }
.composer-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.composer-meta select {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 14px; font-family: inherit; outline: none; color: var(--primary);
  background: var(--secondary);
}
.composer-meta .draft-hint { font-size: 12px; color: var(--faint); }
.modal .row { display: flex; justify-content: flex-end; gap: 10px; }

/* ==========================================================================
   用户菜单 / 资料卡
   ========================================================================== */
.user-menu {
  position: fixed; top: 58px; right: 16px; width: 240px; z-index: 150;
  background: var(--secondary);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .16);
  padding: 5px;
  display: none;
}
.user-menu.open { display: block; }
.um-head { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.um-head .uav {
  width: 36px; height: 36px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px;
}
.um-head .um-name { font-size: 14px; font-weight: 700; display: block; }
.um-head .um-sub { font-size: 11.5px; color: var(--faint); display: block; }
.um-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--radius);
  font-size: 14px; color: var(--muted);
  width: 100%; text-align: left;
}
.um-item:hover { background: var(--hover); }
.um-item .ic { color: var(--faint); display: flex; }

.profile-card {
  position: fixed; z-index: 160; width: 280px;
  background: var(--secondary);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 36px rgba(0, 0, 0, .2);
  display: none;
}
.pc-cover { height: 54px; }
.pc-body { padding: 0 14px 12px; }
.pc-body .pav-big {
  width: 56px; height: 56px; border-radius: var(--radius);
  margin-top: -28px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 22px;
  border: 3px solid #fff;
}
.pc-name { font-size: 16px; font-weight: 700; margin-top: 8px; }
.pc-sub { font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.pc-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 12px; text-align: center; }
.pc-stats b { display: block; font-size: 16px; color: var(--muted); }
.pc-stats span { font-size: 12px; color: var(--faint); }

/* 回到顶部 */
.btt {
  position: fixed; right: 20px; bottom: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  z-index: 90; border: none;
}
.btt.show { display: flex; }
.btt:hover { background: var(--brand-deep); }

/* 吸顶标题（跟随内容容器宽度） */
.sticky-bar {
  position: fixed;
  top: var(--header-h);
  left: 50%;
  transform: translate(-50%, -120%);
  width: 100%;
  max-width: calc(var(--sidebar-w) + var(--content-w));
  height: 46px;
  background: var(--secondary);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  z-index: 90;
  transition: transform .15s ease;
}
.sticky-bar.show { transform: translate(-50%, 0); }
.sb-divider { width: 1px; height: 20px; background: var(--border); }
.sticky-title {
  font-size: 16px; font-weight: 700; color: var(--primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

footer.site-footer {
  padding: 20px 0 30px;
  border-top: 1px solid var(--border);
  margin-top: 20px;
  font-size: 12.5px; color: var(--faint);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
footer.site-footer .brand-mini { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text2); }
footer.site-footer a { color: var(--muted); text-decoration: none; }
footer.site-footer a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* 移动端搜索覆盖层 */
.mobile-search {
  display: none;
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--secondary);
  border-bottom: 1px solid var(--border);
  z-index: 130;
  padding: 8px 10px;
  align-items: center;
  gap: 8px;
}
.mobile-search.open { display: flex; }
.mobile-search input {
  flex: 1; height: 34px;
  padding: 0 10px 0 32px;
  font-family: inherit; font-size: 14px;
  border: 1px solid var(--tertiary);
  border-radius: var(--radius);
  outline: none; color: var(--primary);
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23919191' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")
    no-repeat 10px center;
}

/* ==========================================================================
   响应式
   ========================================================================== */
.mobile-only { display: none !important; }

@media (max-width: 1024px) {
  .sidebar { display: none; }
  .layout { display: block; }
  .layout-wrap { max-width: none; display: block; }
  .main { width: 100%; padding-left: 12px; padding-right: 12px; }
  .sticky-bar { left: 0; transform: translateY(-120%); }
  .sticky-bar.show { transform: translateY(0); }
  .timeline { display: none !important; }
  .mobile-only { display: inline-flex !important; }
  .brand-en { display: none; }
  .hd-left { margin-left: 0; }
  .topic-head, .reply-box, .suggested { max-width: none; }
  .post { max-width: none; }
}

@media (max-width: 720px) {
  .btn-lang { display: none; }
  .d-header { padding: 0 10px; gap: 8px; }
  .hd-wrap { padding: 0 10px; }
  .brand-name { font-size: 15px; }
  .hd-left { flex: 1; min-width: 0; margin-left: 0; }
  .hd-right { flex-shrink: 0; gap: 6px; }
  .btn-login { padding: 0 10px; font-size: 13px; }
  .btn-login svg { display: none; }
  .main { padding-left: 10px; padding-right: 10px; }
  .banner { padding: 8px 12px; font-size: 13px; }
  .toolbar { gap: 8px; }
  .drop-btn { height: 30px; padding: 0 9px; font-size: 13px; }
  .tab-links a { padding: 8px 7px; font-size: 13px; }
  .toolbar-right { width: 100%; justify-content: space-between; }
  .topic-table thead th.col-views,
  .topic-table tbody td.col-views,
  .topic-table thead th.col-posters,
  .topic-table tbody td.col-posters { display: none; }
  .topic-table thead th.col-num { width: 44px; }
  .topic-table thead th.col-activity { width: 62px; padding-right: 0; }
  .topic-title { font-size: 16px; }
  td.col-topic { padding: 10px 6px 10px 4px; }
  td.col-num, td.col-activity { padding: 10px 4px; font-size: 13px; }
  td.col-activity { padding-right: 0; }
  .topic-h1 { font-size: 21px; }
  .post { gap: 10px; }
  .post .avatar { width: 36px; height: 36px; font-size: 14px; }
  .post-body { font-size: 14.5px; }
  .post-head .time { margin-left: auto; width: auto; }
  .reply-box { margin: 12px 0; }
  .sug-grid { grid-template-columns: 1fr; }
  footer.site-footer { gap: 8px; font-size: 12px; }
}

/* 移动端抽屉 */
.drawer-mask { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 110; }
.drawer-mask.open { display: block; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 270px; background: var(--secondary);
  z-index: 120; overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .22s ease;
  padding: 12px 0;
}
.drawer.open { transform: none; }
.drawer .sb-item { padding: 9px 16px; }

/* 窄屏：表格用固定布局，避免列被内容撑破 */
@media (max-width: 720px) {
  .topic-table { table-layout: fixed; }
  .topic-table thead th.col-topic,
  .topic-table tbody td.col-topic { width: auto; }
  .topic-table thead th.col-num { width: 44px; }
  .topic-table thead th.col-activity { width: 54px; padding-right: 0; }
  .topic-title { font-size: 15.5px; line-height: 1.4; }
  .topic-badges { gap: 4px; margin-top: 4px; }
  .cat-badge { font-size: 12.5px; }
  .tag-badge { font-size: 11.5px; padding: 0 5px; }
  .topic-table tbody td.col-num,
  .topic-table tbody td.col-activity { font-size: 12.5px; }
  .list-count { font-size: 12px; }
  .btn-primary { padding: 6px 10px; font-size: 13px; }
}

/* 深色模式 */
body.dark {
  --primary: #e6e6e6;
  --secondary: #1b1c1d;
  --tertiary: #26a7de;
  --tertiary-hover: #2eb3ec;
  --text2: #9c9c9c;
  --muted: #b0b0b0;
  --faint: #7b7b7b;
  --border: #2c2e30;
  --hover: #232527;
  --banner-bg: #12384a;
  --pill-bg: #12384a;
  --success: #51cf66;
  --danger: #ff8787;
  --danger-bg: #2a1618;
  --danger-border: #5c2b2b;
  --brand-soft: #16321f;
  --brand-deep: #7bd8a0;
  --brand-line: #234d2e;
  background: var(--secondary);
}
body.dark .topic-table tbody tr:hover { background: #202224; }
body.dark .md-toolbar { background: #232527; }
body.dark .md-toolbar button:hover { background: #2c2e30; }
body.dark .sb-bottom { background: var(--secondary); }
body.dark .posters .pav { border-color: #1f6f96; }
body.dark .btt { box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
body.dark .btn-ghost { background: var(--secondary); }
body.dark .composer-meta select,
body.dark .drop-btn,
body.dark .btn-ghost { background: var(--secondary); color: var(--text2); }
/* 深色下输入区要跟卡片底色区分开，否则整块糊在 body 背景里 */
body.dark .reply-box textarea,
body.dark .modal textarea,
body.dark .compose-editor { background: #202224; }
body.dark .banner a { color: #6fc7ef; }
body.dark .pc-body .pav-big { border-color: var(--secondary); }

/* 侧栏「榴莲AI」吉祥物图标 */
.sb-mascot-wrap {
  width: 20px;
  height: 20px;
}

.sb-mascot {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}