/* =======================================================
   X (Twitter) 风格独立主题 — 主样式 app.css
   完全独立 CSS，不依赖原主题 (bootstrap-bbs.css / theme.css)
   架构设计：
     · 三栏：左侧导航 (X Nav) + 中间时间线 (Timeline) + 右侧订阅/趋势 (Trending)
     · 配色：#0f1419 主文字 / #536471 次级文字 / #1d9bf0 X蓝 / #eff3f4 分割线
     · 无阴影、1px 细线底线分割、9999px 胶囊按钮、hover:#f7f9f9 微变色
   ======================================================= */

/* ========== 1. 基础 Reset ========== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #0f1419;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; transition: color .15s ease; }
a:hover { color: #1d9bf0; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 800; color: #0f1419; }
p { margin: 0 0 12px; }

/* ========== 2. 通用工具类 ========== */
.x-hide { display: none !important; }
.x-hidden { visibility: hidden; }
.x-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-mt-0 { margin-top: 0 !important; }
.x-mb-0 { margin-bottom: 0 !important; }
.x-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}
.x-clearfix::after { content: ""; display: table; clear: both; }

/* ========== 1. 基础重置：防止 Grid 中栏宽度坍缩为 0 的多重兜底 ========== */
html { height: 100%; width: 100%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
body.x-body {
  height: 100%;
  width: 100% !important;          /* 强制 body 占满视口，避免 Grid 容器无宽度 */
  max-width: none !important;      /* 防止旧主题/插件给 body 加了 max-width 限宽 */
  min-width: 0;
  margin: 0; padding: 0;
  background-color: #ffffff;
  color: #0f1419;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", "Source Han Sans SC", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;              /* 防止任何横向溢出把 Grid 列挤成 0 */
}

/* ========== 3. 三栏布局容器（X 经典 990~1265px） ========== */
.x-app {
  width: 100% !important;           /* 1️⃣ 防止 Grid 容器按 min-content 缩窄 */
  display: grid !important;         /* 2️⃣ 不要被任何 display 属性覆盖 */
  box-sizing: border-box !important;
  max-width: 1265px;
  margin: 0 auto !important;
  padding: 0 16px;
  /* 三栏：左 275 中 600 右 350，中栏必须使用 1fr 而不是 minmax(0,600px) 兜底！
     用 minmax(320px, 1fr) 保证中栏最低 320px，永远不会被 Grid 算法坍缩成 0 */
  grid-template-columns: 275px minmax(320px, 1fr) 350px !important;
  align-items: start;
  gap: 0;
  min-height: 100vh;
}
@media (max-width: 1195px) {
  .x-app {
    grid-template-columns: 88px minmax(320px, 1fr) 350px !important;
  }
}
@media (max-width: 1005px) {
  .x-app {
    grid-template-columns: 88px minmax(320px, 1fr) !important;
  }
  .x-col-right { display: none !important; }
}
@media (max-width: 690px) {
  .x-app {
    grid-template-columns: minmax(280px, 1fr) !important;
    padding: 0 !important;
  }
  .x-col-left  { display: none !important; }
  .x-col-right { display: none !important; }
}

/* 中栏 / 左栏 / 右栏：最低宽度兜底，永远不允许 min-content 挤成 0 */
.x-col-left {
  width: 100%;
  min-width: 0 !important;
  border-right: 1px solid #eff3f4;
  min-height: 100vh;
  position: sticky; top: 0; align-self: start;
}
.x-col-main {
  width: 100% !important;           /* 3️⃣ 中栏必须占满 Grid 分配给它的宽度 */
  min-width: 320px !important;      /* 4️⃣ 再兜底：最低 320px（一个汉字宽度 ≈ 15px，保证 20+ 字横排） */
  max-width: 100%;
  border-right: 1px solid #eff3f4;
  display: block !important;        /* 不要被意外变成 inline / flex column */
}
.x-col-right {
  width: 100%;
  min-width: 0 !important;
  position: sticky; top: 0; align-self: start;
  padding: 0 16px 8px;
  max-height: 100vh;
  overflow-y: auto;
}

/* 滚动条：X 风格细滚动条 */
.x-col-right::-webkit-scrollbar,
body::-webkit-scrollbar { width: 8px; }
.x-col-right::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb { background: #cfd9de; border-radius: 9999px; }
.x-col-right::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover { background: #8b98a5; }

/* ========== 4. 左栏：X Logo 导航 ========== */
.x-nav {
  position: sticky; top: 0;
  height: 100vh;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.x-nav-logo {
  padding: 12px;
  width: 52px; height: 52px;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
  transition: background-color .15s ease;
  cursor: pointer;
}
.x-nav-logo:hover { background-color: #f7f9f9; }
.x-nav-logo svg { width: 30px; height: 30px; fill: #0f1419; }
@media (max-width: 1195px) {
  .x-nav { align-items: center; padding: 8px 4px; }
  .x-nav-logo { padding: 10px; }
  .x-nav-logo svg { width: 28px; height: 28px; }
}

.x-nav-link {
  display: flex; align-items: center; gap: 20px;
  padding: 12px 16px;
  border-radius: 9999px;
  color: #0f1419;
  font-size: 20px;
  font-weight: 400;
  transition: background-color .15s ease;
  cursor: pointer;
  user-select: none;
  width: fit-content;
  max-width: 100%;
}
.x-nav-link:hover { background-color: #f7f9f9; }
.x-nav-link.is-active { font-weight: 700; }
.x-nav-link i, .x-nav-link .x-icon { width: 26px; height: 26px; flex-shrink: 0; font-size: 26px; display: inline-flex; align-items: center; justify-content: center; }
.x-nav-link .x-label { line-height: 1; }

@media (max-width: 1195px) {
  .x-nav-link { padding: 12px; gap: 0; justify-content: center; }
  .x-nav-link .x-label { display: none; }
}

/* 发布按钮（左栏大按钮 / 移动端圆形 FAB） */
.x-btn-post {
  background-color: #0f1419;
  color: #ffffff !important;
  font-size: 17px;
  font-weight: 800;
  border: 0;
  border-radius: 9999px;
  padding: 16px 24px;
  width: 90%;
  margin: 16px 4px 0;
  box-shadow: 0 4px 12px rgba(15, 20, 25, 0.2);
  transition: background-color .15s ease, box-shadow .15s ease, filter .15s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.x-btn-post:hover { background-color: #272c30; box-shadow: 0 6px 16px rgba(15, 20, 25, 0.25); filter: brightness(1.1); }
.x-btn-post:active { background-color: #1a1f23; transform: translateY(1px); }
.x-btn-post .x-btn-icon { font-size: 20px; line-height: 1; }

@media (max-width: 1195px) {
  .x-btn-post {
    width: 52px; height: 52px;
    padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 12px;
  }
  .x-btn-post::before { content: "✍"; font-size: 24px; line-height: 1; }
  .x-btn-post .x-btn-text { display: none; }
}

/* 用户卡片（左下角） */
.x-nav-user {
  margin-top: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.x-nav-user:hover { background-color: #f7f9f9; }
.x-nav-user-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background:#f7f9f9; }
.x-nav-user-meta { flex: 1; min-width: 0; }
.x-nav-user-name { font-weight: 700; font-size: 15px; line-height: 1.3; color: #0f1419; }
.x-nav-user-handle { font-size: 15px; color: #536471; }
@media (max-width: 1195px) {
  .x-nav-user { justify-content: center; padding: 10px; }
  .x-nav-user-meta { display: none; }
  .x-nav-user-avatar { width: 40px; height: 40px; }
}

/* ========== 5. 中间：时间线 ========== */
/* 顶部栏 */
.x-tl-header {
  position: sticky; top: 0; z-index: 10;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #eff3f4;
}
.x-tl-title {
  padding: 16px;
  font-size: 20px;
  font-weight: 800;
  color: #0f1419;
}
/* 旧版 x-tl-tabs / x-tl-tab 已在 Section 22 重写，此处移除 grid 2 列冲突定义 */
.x-tl-tab-old-placeholder { display: none; }
.x-tl-tab {
  position: relative;
  padding: 16px 0;
  display: flex; align-items: center; justify-content: center;
  color: #536471;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease;
  user-select: none;
}
.x-tl-tab:hover { background-color: #f7f9f9; }
.x-tl-tab.is-active { color: #0f1419; font-weight: 700; }
.x-tl-tab.is-active::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 0;
  min-width: 56px;
  width: 40%;
  height: 4px;
  border-radius: 9999px;
  background-color: #1d9bf0;
}

/* 发布框（顶部发推框） */
.x-composer {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  border-bottom: 8px solid #f7f9f9;
}
.x-composer-avatar { width: 48px; height: 48px; border-radius: 50%; background:#f7f9f9; object-fit: cover; }
.x-composer-main { display: flex; flex-direction: column; gap: 12px; }
.x-composer-input {
  border: 0;
  font-size: 20px;
  font-weight: 400;
  color: #0f1419;
  resize: none;
  outline: none;
  padding: 12px 0;
  width: 100%;
  min-height: 72px;
  line-height: 1.4;
  background-color: transparent;
  font-family: inherit;
}
.x-composer-input::placeholder { color: #536471; }
.x-composer-actions {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid #eff3f4;
}
.x-composer-icongroup { display: flex; align-items: center; gap: 4px; }
.x-composer-icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #1d9bf0;
  cursor: pointer;
  transition: background-color .15s ease;
  font-size: 18px;
}
.x-composer-icon:hover { background-color: rgba(29, 155, 240, 0.1); }
.x-btn-post-sm {
  background-color: #1d9bf0;
  color: #ffffff !important;
  border: 0;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 15px;
  padding: 8px 20px;
  transition: background-color .15s ease, opacity .15s ease;
}
.x-btn-post-sm:hover:not(:disabled) { background-color: #1a8cd8; }
.x-btn-post-sm:disabled { background-color: #8ecdf8; cursor: not-allowed; }

/* 帖子卡片（X 时间线卡片样式） */
.x-thread {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #eff3f4;
  transition: background-color .15s ease;
  cursor: pointer;
}
.x-thread:hover { background-color: #f7f9f9; }
.x-thread-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background:#f7f9f9; object-fit: cover;
}
.x-thread-main { min-width: 0; }
.x-thread-head {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 2px;
}
.x-thread-name { font-weight: 700; color: #0f1419; font-size: 15px; }
.x-thread-handle, .x-thread-dot, .x-thread-time { color: #536471; font-size: 15px; }
.x-thread-dot::before { content: "·"; padding: 0 2px; }
.x-thread-badge { display: inline-flex; align-items: center; }
.x-thread-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f1419;
  line-height: 1.4;
  margin: 2px 0 4px;
  word-break: break-word;
}
.x-thread-content {
  font-size: 15px;
  color: #0f1419;
  line-height: 1.5;
  margin: 4px 0 6px;
  word-break: break-word;
  white-space: pre-wrap;
  text-align: left !important;
}
.x-thread-image {
  margin: 8px 0;
  border: 1px solid #eff3f4;
  border-radius: 16px;
  overflow: hidden;
  background: #f7f9f9;
}
.x-thread-image img { width: 100%; display: block; }
.x-thread-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.x-tag {
  background-color: #f7f9f9;
  color: #536471;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 13px;
  border: 1px solid #eff3f4;
}
.x-tag.x-tag-primary {
  background-color: rgba(29,155,240,0.1);
  color: #1d9bf0;
  border-color: rgba(29,155,240,0.2);
}
.x-thread-actions {
  display: flex;
  justify-content: space-between;
  max-width: 440px;
  color: #536471;
  font-size: 13px;
  padding: 0;
}
.x-thread-action {
  display: inline-flex; align-items: center; gap: 4px;
  color: #536471;
  background: transparent;
  border: 0;
  padding: 0;
  transition: color .15s ease;
}
.x-thread-action i, .x-thread-action-icon {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: background-color .15s ease, color .15s ease;
}
.x-thread-action:hover { color: #1d9bf0; }
.x-thread-action:hover .x-thread-action-icon { background-color: rgba(29, 155, 240, 0.1); color: #1d9bf0; }
.x-thread-action.is-liked { color: #f91880; }
.x-thread-action.is-liked:hover .x-thread-action-icon { background-color: rgba(249,24,128,0.1); color: #f91880; }
.x-thread-action.is-reposted { color: #00ba7c; }
.x-thread-action.is-reposted:hover .x-thread-action-icon { background-color: rgba(0,186,124,0.1); color: #00ba7c; }
.x-thread-action-count { min-width: 12px; }

/* 分页 */
.x-pagination {
  padding: 24px 16px;
  display: flex; justify-content: center; gap: 4px;
  border-bottom: 1px solid #eff3f4;
}
.x-page-btn {
  border: 1px solid #eff3f4;
  background-color: #ffffff;
  color: #0f1419;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 14px;
  transition: background-color .15s ease;
}
.x-page-btn:hover { background-color: #f7f9f9; }
.x-page-btn.is-active {
  background-color: #1d9bf0;
  color: #ffffff;
  border-color: #1d9bf0;
}

/* ========== 6. 右栏：搜索 + 订阅 + 趋势 ========== */
.x-col-right { padding-top: 8px; }

/* 搜索框 */
.x-search {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 8px 0;
  background-color: #ffffff;
}
.x-search-wrap {
  position: relative;
}
.x-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #536471;
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}
.x-search-input {
  width: 100%;
  padding: 12px 16px 12px 48px;
  border: 1px solid transparent;
  background-color: #eff3f4;
  color: #0f1419;
  border-radius: 9999px;
  font-size: 15px;
  outline: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.x-search-input:focus {
  background-color: #ffffff;
  border-color: #1d9bf0;
  box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.15);
}
.x-search-input::placeholder { color: #536471; }

/* 订阅卡片 */
.x-card {
  background-color: #f7f9f9;
  border-radius: 16px;
  padding: 12px 16px;
  margin: 8px 0 16px;
}
.x-card-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 8px;
}
.x-card-desc {
  font-size: 15px;
  color: #0f1419;
  margin-bottom: 12px;
  line-height: 1.4;
}
.x-btn-blue {
  background-color: #1d9bf0;
  color: #ffffff !important;
  border: 0;
  border-radius: 9999px;
  font-weight: 700;
  padding: 8px 20px;
  display: inline-block;
  transition: background-color .15s ease;
}
.x-btn-blue:hover { background-color: #1a8cd8; }
.x-btn-outline {
  background-color: #ffffff;
  color: #0f1419 !important;
  border: 1px solid #cfd9de;
  border-radius: 9999px;
  font-weight: 700;
  padding: 8px 20px;
  display: inline-block;
  transition: background-color .15s ease;
}
.x-btn-outline:hover { background-color: #f7f9f9; }

/* 趋势 / 正在发生的事 */
.x-trending-item {
  padding: 12px 0;
  cursor: pointer;
  transition: background-color .15s ease;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}
.x-trending-item:first-child { padding-top: 4px; }
.x-trending-item:last-child  { padding-bottom: 4px; }
.x-trending-item:hover { background-color: #eff3f4; }
.x-trending-cat { font-size: 13px; color: #536471; line-height: 1.3; }
.x-trending-title { font-size: 15px; font-weight: 700; color: #0f1419; line-height: 1.4; margin: 2px 0; }
.x-trending-count { font-size: 13px; color: #536471; }
.x-trending-more {
  display: block;
  padding: 16px 0;
  color: #1d9bf0;
  font-size: 15px;
  border-radius: 0 0 16px 16px;
  margin: 0 -16px -12px;
  padding-left: 16px;
  padding-right: 16px;
  transition: background-color .15s ease;
}
.x-trending-more:hover { background-color: #eff3f4; }

/* 推荐关注 */
.x-who-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
  transition: background-color .15s ease;
  cursor: pointer;
}
.x-who-user:first-child { padding-top: 4px; }
.x-who-user:hover { background-color: #eff3f4; }
.x-who-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: #fff; object-fit: cover; border:1px solid #eff3f4;
}
.x-who-meta { flex: 1; min-width: 0; }
.x-who-name { font-weight: 700; font-size: 15px; color: #0f1419; line-height: 1.3; }
.x-who-handle { color: #536471; font-size: 15px; }
.x-who-follow {
  background-color: #0f1419;
  color: #ffffff !important;
  padding: 6px 16px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 14px;
  border: 0;
  flex-shrink: 0;
  transition: background-color .15s ease;
}
.x-who-follow:hover { background-color: #272c30; }
.x-who-follow.is-following {
  background-color: transparent;
  color: #0f1419 !important;
  border: 1px solid #cfd9de;
}

/* Footer 链接 */
.x-footer-links {
  padding: 0 0 32px;
  font-size: 13px;
  color: #536471;
  line-height: 1.6;
}
.x-footer-links a { color: #536471; margin-right: 12px; display: inline-block; }
.x-footer-links a:hover { text-decoration: underline; color: #536471; }

/* ========== 7. 帖子详情页 ========== */
.x-detail-head {
  padding: 12px 16px;
  border-bottom: 1px solid #eff3f4;
  display: flex; align-items: center; gap: 24px;
  position: sticky; top: 0; z-index: 10;
  background-color: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.x-back-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #0f1419;
  cursor: pointer;
  transition: background-color .15s ease;
  font-size: 20px;
}
.x-back-btn:hover { background-color: #f7f9f9; }
.x-detail-title-lg { font-size: 20px; font-weight: 800; }

.x-detail-op {
  padding: 12px 16px 0;
  border-bottom: 1px solid #eff3f4;
}
.x-detail-op-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.x-detail-avatar-lg { width: 48px; height: 48px; border-radius: 50%; background:#f7f9f9; object-fit: cover; }
.x-detail-user-info { display: flex; align-items: center; gap: 12px; flex: 1; }
.x-detail-user-names { display: flex; flex-direction: column; line-height: 1.3; }
.x-detail-follow { margin-left: auto; }
.x-detail-content {
  padding: 8px 0 12px 0;
  font-size: 17px;
  line-height: 1.6;
  color: #0f1419;
  word-break: break-word;
  white-space: pre-wrap;
  text-align: left !important;
}
.x-detail-images { padding: 0 0 12px 0; display: grid; gap: 4px; }
.x-detail-images.x-grid-2 { grid-template-columns: repeat(2, 1fr); }
.x-detail-images img {
  border-radius: 16px;
  border: 1px solid #eff3f4;
  background: #f7f9f9;
  width: 100%;
  max-height: 540px;
  object-fit: cover;
}
.x-detail-meta {
  padding: 8px 0 12px 0;
  color: #536471;
  font-size: 14px;
  border-bottom: 1px solid #eff3f4;
  display: flex; flex-wrap: wrap; gap: 4px 16px;
}
.x-detail-meta strong { color: #0f1419; font-weight: 800; }
.x-detail-actions {
  padding: 0 16px;
  border-bottom: 1px solid #eff3f4;
  display: flex;
  justify-content: space-around;
  max-width: 560px;
  margin: 0 auto;
}
.x-detail-action {
  background: transparent;
  border: 0;
  padding: 12px 0;
  color: #536471;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: color .15s ease;
}
.x-detail-action:hover { color: #1d9bf0; }
.x-detail-action i {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: background-color .15s ease;
}
.x-detail-action:hover i { background-color: rgba(29, 155, 240, 0.1); color: #1d9bf0; }

/* 回复列表 */
.x-reply {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #eff3f4;
  transition: background-color .15s ease;
}
.x-reply:hover { background-color: #f7f9f9; }
.x-reply-avatar { width: 40px; height: 40px; border-radius: 50%; background:#f7f9f9; object-fit: cover; }
.x-reply-body { min-width: 0; }
.x-reply-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.x-reply-content { font-size: 15px; line-height: 1.5; color: #0f1419; word-break: break-word; white-space: pre-wrap; padding: 2px 0 8px; }
.x-reply-actions {
  display: flex; justify-content: space-between;
  max-width: 420px;
  color: #536471;
  font-size: 13px;
}
.x-reply-action {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: transparent; color: #536471;
  cursor: pointer;
}
.x-reply-action i {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: background-color .15s ease, color .15s ease;
}
.x-reply-action:hover { color: #1d9bf0; }
.x-reply-action:hover i { background-color: rgba(29, 155, 240, 0.1); }

/* 发帖输入框（底部） */
.x-reply-composer {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #eff3f4;
}

/* ========== 8. 发帖页（post.htm） ========== */
.x-post-form { padding: 0; }
.x-post-section {
  padding: 16px;
  border-bottom: 1px solid #eff3f4;
}
.x-post-label {
  font-size: 13px;
  color: #536471;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.x-post-title {
  width: 100%;
  border: 1px solid #cfd9de;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 20px;
  font-weight: 700;
  color: #0f1419;
  transition: border-color .15s ease, box-shadow .15s ease;
  outline: none;
  font-family: inherit;
}
.x-post-title:focus {
  border-color: #1d9bf0;
  box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.15);
}
.x-post-textarea {
  width: 100%;
  min-height: 220px;
  border: 1px solid #cfd9de;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.6;
  color: #0f1419;
  resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease;
  outline: none;
  font-family: inherit;
}
.x-post-textarea:focus {
  border-color: #1d9bf0;
  box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.15);
}
.x-post-select {
  width: 100%;
  border: 1px solid #cfd9de;
  border-radius: 12px;
  padding: 12px 42px 12px 16px;
  font-size: 15px;
  color: #0f1419;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23536471' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.x-post-select:focus {
  border-color: #1d9bf0;
  box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.15);
}
.x-post-select optgroup {
  background-color: #f7f9f9;
  font-weight: 700;
  color: #536471;
  padding: 6px 8px;
}
.x-post-select option {
  background-color: #ffffff;
  color: #0f1419;
  padding: 6px 12px;
}
.x-post-actions {
  padding: 16px;
  position: sticky; bottom: 0;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid #eff3f4;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ========== 9. 登录/注册 ========== */
.x-auth {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px 16px;
  min-height: 100vh;
  border-left: 1px solid #eff3f4;
  border-right: 1px solid #eff3f4;
}
.x-auth-logo { text-align: center; padding: 24px 0 16px; }
.x-auth-title { font-size: 31px; font-weight: 800; margin-bottom: 32px; padding: 0 8px; }
.x-field { margin-bottom: 24px; position: relative; }
.x-field-input {
  width: 100%;
  border: 1px solid #cfd9de;
  border-radius: 8px;
  padding: 18px 12px 6px;
  font-size: 17px;
  color: #0f1419;
  background-color: transparent;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.x-field-input:focus {
  border-color: #1d9bf0;
  box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.15);
}
.x-field-label {
  position: absolute;
  top: 18px; left: 12px;
  color: #536471;
  font-size: 17px;
  transition: all .1s ease;
  pointer-events: none;
  background-color: transparent;
}
.x-field-input:focus + .x-field-label,
.x-field-input:not(:placeholder-shown) + .x-field-label {
  top: 6px;
  font-size: 13px;
  color: #1d9bf0;
}
.x-auth-submit {
  width: 100%;
  padding: 14px 0;
  background-color: #0f1419;
  color: #ffffff !important;
  border-radius: 9999px;
  border: 0;
  font-weight: 700;
  font-size: 17px;
  transition: background-color .15s ease;
}
.x-auth-submit:hover { background-color: #272c30; }
.x-auth-divider {
  display: flex; align-items: center; gap: 10px;
  color: #536471;
  font-size: 14px;
  margin: 24px 0;
}
.x-auth-divider::before, .x-auth-divider::after {
  content: ""; flex: 1; height: 1px; background-color: #eff3f4;
}
.x-auth-switch {
  text-align: center;
  color: #536471;
  font-size: 15px;
  padding: 16px 0;
}
.x-auth-switch a { color: #1d9bf0; }

/* ========== 10. 浮动底部导航（移动端） ========== */
.x-bottombar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background-color: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #eff3f4;
}
@media (max-width: 690px) {
  .x-bottombar { display: grid; grid-template-columns: repeat(5, 1fr); }
}
.x-bb-item {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 0;
  color: #0f1419;
  font-size: 22px;
}
.x-bb-fab {
  position: fixed; right: 16px; bottom: 84px; z-index: 101;
  width: 56px; height: 56px; border-radius: 50%;
  background-color: #1d9bf0;
  color: #ffffff !important;
  display: none;
  align-items: center; justify-content: center;
  font-size: 24px;
  box-shadow: 0 6px 18px rgba(29, 155, 240, 0.4);
}
@media (max-width: 690px) {
  .x-bb-fab { display: inline-flex; }
}

/* ========== 11. Badge / 标签 ========== */
.x-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
}
.x-badge.x-badge-top  { background: rgba(0, 186, 124, 0.1); color: #00ba7c; }
.x-badge.x-badge-hot  { background: rgba(249, 24, 128, 0.1); color: #f91880; }
.x-badge.x-badge-digest { background: rgba(29, 155, 240, 0.1); color: #1d9bf0; }
.x-badge.x-badge-lock { background: rgba(83, 100, 113, 0.1); color: #536471; }
.x-badge.x-badge-closed { background: rgba(231, 80, 90, 0.1); color: #e7505a; }

/* ========== 12. Toast / 小提示 ========== */
.x-toast {
  position: fixed; z-index: 9999;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 20px;
  background-color: #0f1419;
  color: #ffffff;
  border-radius: 12px;
  font-size: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.3);
  animation: x-toast-in .2s ease;
}
@keyframes x-toast-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.x-toast.x-toast-success { background-color: #00ba7c; }
.x-toast.x-toast-error   { background-color: #e7505a; }

/* ========== 14. 用户个人主页（X Profile） ========== */
.x-profile-cover {
  height: 200px;
  background: linear-gradient(135deg, #1d9bf0 0%, #8ecdf8 100%);
  border-bottom: 1px solid #eff3f4;
}
.x-profile-head {
  padding: 0 16px 16px;
  border-bottom: 1px solid #eff3f4;
}
.x-profile-avatar-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: -56px;
  margin-bottom: 12px;
}
.x-profile-avatar-lg {
  width: 134px; height: 134px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  background: #f7f9f9;
  object-fit: cover;
  flex-shrink: 0;
}
.x-profile-name { font-size: 20px; font-weight: 800; line-height: 1.3; }
.x-profile-handle { color: #536471; font-size: 15px; margin-bottom: 12px; }
.x-profile-bio { font-size: 15px; line-height: 1.5; color: #0f1419; margin-bottom: 12px; white-space: pre-wrap; word-break: break-word; }
.x-profile-meta { display: flex; flex-wrap: wrap; gap: 12px; color: #536471; font-size: 14px; margin-bottom: 12px; }
.x-profile-meta span { display: inline-flex; align-items: center; gap: 4px; }
.x-profile-stats { display: flex; gap: 20px; }
.x-profile-stat { color: #536471; font-size: 15px; }
.x-profile-stat strong { color: #0f1419; font-weight: 800; }
.x-profile-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid #eff3f4;
}

/* ========== 15. 版块列表页（Forum Index / Forum） ========== */
.x-forum-list { border-bottom: 1px solid #eff3f4; }
.x-forum-cate-title {
  padding: 16px 16px 8px;
  font-size: 15px;
  font-weight: 700;
  color: #536471;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.x-forum-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px 16px;
  align-items: center;
  border-top: 1px solid #eff3f4;
  transition: background-color .15s ease;
  cursor: pointer;
}
.x-forum-item:first-child { border-top: 0; }
.x-forum-item:hover { background-color: #f7f9f9; }
.x-forum-icon {
  width: 48px; height: 48px; border-radius: 16px;
  background: linear-gradient(135deg, #1d9bf0, #8ecdf8);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; font-weight: 800;
  flex-shrink: 0;
}
.x-forum-meta { min-width: 0; }
.x-forum-name { font-size: 17px; font-weight: 700; color: #0f1419; line-height: 1.3; }
.x-forum-desc { font-size: 13px; color: #536471; margin-top: 2px; line-height: 1.4; }
.x-forum-stats { color: #536471; font-size: 13px; margin-top: 4px; display: flex; gap: 12px; }
.x-forum-stats strong { color: #0f1419; font-weight: 700; }

/* ========== 16. 空状态 ========== */
.x-empty {
  padding: 64px 16px;
  text-align: center;
  border-bottom: 1px solid #eff3f4;
}
.x-empty-icon {
  font-size: 48px;
  color: #cfd9de;
  margin-bottom: 16px;
  line-height: 1;
}
.x-empty-title { font-size: 22px; font-weight: 800; color: #0f1419; margin-bottom: 8px; }
.x-empty-desc  { font-size: 15px; color: #536471; line-height: 1.5; }

/* ========== 17. 排行 / 搜索结果页 ========== */
.x-tabbar {
  display: flex;
  border-bottom: 1px solid #eff3f4;
  overflow-x: auto;
  scrollbar-width: none;
}
.x-tabbar::-webkit-scrollbar { display: none; }
.x-tabbar .x-tl-tab { flex-shrink: 0; padding: 16px 24px; white-space: nowrap; }
.x-tabbar .x-tl-tab.is-active::after { min-width: auto; width: 60%; left: 20%; transform: none; }

/* ========== 18. 消息页、私信页骨架 ========== */
.x-chat-list { border-right: 1px solid #eff3f4; }
.x-chat-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #eff3f4;
  cursor: pointer;
  transition: background-color .15s ease;
}
.x-chat-item:hover { background-color: #f7f9f9; }
.x-chat-item.is-active { background-color: rgba(29,155,240,0.08); }
.x-chat-name { font-weight: 700; color: #0f1419; }
.x-chat-preview { color: #536471; font-size: 14px; line-height: 1.4; margin-top: 2px; }

/* ========== 19. 小部件：引用、代码块、表格 ========== */
.x-detail-content blockquote, .x-reply-content blockquote, .x-thread-content blockquote {
  border-left: 3px solid #cfd9de;
  padding: 4px 16px;
  margin: 8px 0;
  color: #536471;
}
.x-detail-content pre, .x-reply-content pre, .x-thread-content pre {
  background-color: #f7f9f9;
  border-radius: 12px;
  padding: 16px;
  overflow-x: auto;
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid #eff3f4;
}
.x-detail-content code, .x-reply-content code, .x-thread-content code {
  background-color: #f7f9f9;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.92em;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
.x-detail-content a, .x-reply-content a, .x-thread-content a {
  color: #1d9bf0;
}
.x-detail-content img, .x-reply-content img, .x-thread-content img {
  max-width: 100%;
  border-radius: 16px;
  margin: 8px 0;
  border: 1px solid #eff3f4;
}
.x-detail-content table, .x-reply-content table, .x-thread-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 14px;
}
.x-detail-content th, .x-detail-content td,
.x-reply-content th, .x-reply-content td,
.x-thread-content th, .x-thread-content td {
  border: 1px solid #eff3f4;
  padding: 8px 12px;
}
.x-detail-content th, .x-reply-content th, .x-thread-content th {
  background-color: #f7f9f9;
  font-weight: 700;
}

/* ========== 20. 通用复选框、输入框小部件 ========== */
.x-checkbox {
  width: 18px; height: 18px;
  accent-color: #1d9bf0;
  border-radius: 4px;
}

/* ========== 21. 兼容残留 bootstrap 类兜底（只做基础还原，不鼓励使用） ========== */
.card, .x-card { background-color: #f7f9f9; border-radius: 16px; padding: 12px 16px; margin: 8px 0 16px; border: 0 !important; box-shadow: none !important; }
.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
.gap-2 { gap: 8px !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-fill { flex: 1 1 auto !important; }
.justify-content-between { justify-content: space-between !important; }
.me-2 { margin-right: 8px !important; }
.ms-1 { margin-left: 4px !important; }
.ms-auto { margin-left: auto !important; }
.py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
.py-12 { padding-top: 48px !important; padding-bottom: 48px !important; }
.pe-3 { padding-right: 16px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.small { font-size: 13px !important; }
.text-center { text-align: center !important; }
.text-secondary, .text-body-secondary { color: #536471 !important; }
.text-5xl { font-size: 48px !important; }
.block { display: block !important; }
.fs-5 { font-size: 18px !important; }
.list-none { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.leading-snug { line-height: 1.4 !important; }
.break-all { word-break: break-all !important; }
.nav { display: flex !important; flex-wrap: wrap !important; }
.nav-link {
  display: inline-block;
  padding: 16px 24px !important;
  color: #536471 !important;
  font-weight: 500;
  position: relative;
  text-decoration: none !important;
}
.nav-link.active { color: #0f1419 !important; font-weight: 700 !important; }
.nav-link.active::after {
  content: ""; position: absolute; left: 20%; bottom: 0;
  width: 60%; height: 4px; border-radius: 9999px; background: #1d9bf0;
}
.badge { display: inline-flex; padding: 2px 8px; border-radius: 9999px; font-size: 12px; font-weight: 600; }
.badge.bg-warning { background: rgba(255, 193, 7, 0.15); color: #8a5a00; }
.badge.bg-danger  { background: rgba(231, 80, 90, 0.15); color: #c0392b; }
.bg-body-tertiary { background: #f7f9f9 !important; }
.rounded-5 { border-radius: 9999px !important; }
.px-2 { padding-left: 8px !important; padding-right: 8px !important; }
.fw-normal { font-weight: 400 !important; }
.hover-text-primary:hover { color: #1d9bf0 !important; }
.transition-colors { transition: color .15s ease; }
.btn { display: inline-block; padding: 8px 20px; border-radius: 9999px; font-weight: 700; border: 1px solid #cfd9de; background: #fff; color: #0f1419; cursor: pointer; text-decoration: none !important; }
.btn-outline-secondary:hover { background: #f7f9f9; }
.btn-outline-secondary.active { background: #0f1419; color: #fff; border-color: #0f1419; }
.btn-group { display: inline-flex; border-radius: 9999px; overflow: hidden; }
.form-check-input { width: 18px; height: 18px; accent-color: #1d9bf0; }
.text-body-tertiary { color: #8b98a5 !important; }
.announcement-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 9999px;
  background: rgba(29,155,240,0.1); color: #1d9bf0; font-weight: 600; font-size: 13px;
}
.announcement-scroll {
  overflow: hidden; position: relative;
  padding: 4px 0;
  font-size: 14px;
  line-height: 1.8;
  height: 1.8em;
}
.announcement-scroll-inner { position: absolute; top: 0; left: 0; right: 0; }
.announcement-item { display: block; height: 1.8em; line-height: 1.8; color: #0f1419; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announcement-link:hover { color: #1d9bf0 !important; }

/* ========== 13. 兼容原模板中的 Bootstrap 变量兜底 ========== */
/* 当 X 主题模板中残留用到原 bootstrap 类时，至少保证颜色正确 */
:root {
  --bs-primary: #1d9bf0;
  --bs-link-color: #1d9bf0;
  --bs-body-bg: #ffffff;
  --bs-body-color: #0f1419;
  --bs-secondary-color: #536471;
  --bs-secondary-bg: #f7f9f9;
  --bs-border-color: #eff3f4;
  --bs-border-radius: 8px;
  --bs-border-radius-lg: 16px;
}

/* ========== 22. Tabs 扩展：支持 2/3/4 列、Tab 指示器、子导航 ========== */
/* 5️⃣ 中栏内部：所有 x-tl-* 容器强制 width:100%，防止 Grid min-content 继承坍缩 */
.x-tl-header {
  position: sticky; top: 0; z-index: 10;
  background-color: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #eff3f4;
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}
.x-tl-header-title {
  width: 100% !important;
  min-width: 0;
  padding: 16px;
  font-size: 20px;
  font-weight: 800;
  color: #0f1419;
  line-height: 1.2;
  display: block;
  white-space: nowrap;       /* ← 标题不换行，保证横排 */
  word-break: keep-all;
  box-sizing: border-box;
}
.x-tl-tabs {
  border-bottom: 1px solid #eff3f4;
  width: 100% !important;
  min-width: 0;
}
.x-tl-tabs-grid {
  display: grid !important;
  width: 100% !important;
  min-width: 0;
  grid-template-columns: repeat(var(--x-tabs, 3), 1fr) !important;  /* ← 用 CSS 变量兜底，永远平分 */
}
.x-tl-tabs-2 { --x-tabs: 2; }
.x-tl-tabs-3 { --x-tabs: 3; }
.x-tl-tabs-4 { --x-tabs: 4; }
.x-tl-tab {
  position: relative;
  padding: 16px 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #536471;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: background-color .15s ease;
  user-select: none;
  text-decoration: none !important;
  width: 100%;           /* ← 每个 tab 占满分配的列宽 */
  min-width: 0;
  white-space: nowrap;   /* ← tab 文字不换行，"最" "新" 不会变成上下排 */
  word-break: keep-all;
  box-sizing: border-box;
}
.x-tl-tab:hover { background-color: #f7f9f9; }
.x-tl-tab.is-active { color: #0f1419; font-weight: 700; }
.x-tl-tab-indicator {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 0;
  min-width: 56px; width: 40%; height: 4px;
  border-radius: 9999px;
  background-color: #1d9bf0;
}
.x-tl-subnav {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid #eff3f4;
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}
.x-tl-subnav-btn {
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  color: #536471;
  border: 1px solid #eff3f4;
  background: #ffffff;
  cursor: pointer;
  transition: all .15s ease;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.x-tl-subnav-btn:hover { background-color: #f7f9f9; }
.x-tl-subnav-btn.is-active {
  background-color: #0f1419;
  color: #ffffff;
  border-color: #0f1419;
  font-weight: 700;
}

/* ========== 6️⃣ 中栏 #body / .main 容器深度兜底 ========== */
/* Xiuno 原版给 #body / .main / main 元素加过 Bootstrap container-xl 限宽
   这里强制清空，确保在 X 主题中完全占满 x-col-main 分配的宽度 */
#body,
.x-col-main > main,
.x-col-main > .main,
.x-col-main > section,
.x-col-main > .container,
.x-col-main > .container-xl,
.x-col-main > .container-lg {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}
/* 防止 x-col-main 内部的旧 Bootstrap row 负 margin 撑出横向滚动条，间接把列宽挤 0 */
.x-col-main .row,
.x-col-main .row > [class^="col-"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.x-col-main .row > [class^="col-"] {
  width: 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
/* 服务器内部错误 message box 也强制横向 */
.x-col-main .alert,
.x-col-main .card,
.x-col-main .message {
  width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  box-sizing: border-box !important;
}

/* ========== 23. 登录/注册页扩展：captcha、错误提示、links ========== */
.x-auth-wrap {
  min-height: 100vh;
  border-left: 1px solid #eff3f4;
  border-right: 1px solid #eff3f4;
  max-width: 720px;
  margin: 0 auto;
  background: #ffffff;
}
.x-auth-logo {
  text-align: center;
  padding: 32px 0 8px;
}
.x-auth-logo svg {
  width: 40px; height: 40px;
  fill: #0f1419;
}
.x-field { position: relative; margin-bottom: 20px; }
.x-field-input {
  width: 100%;
  border: 1px solid #cfd9de;
  border-radius: 8px;
  padding: 20px 12px 6px;
  font-size: 17px;
  color: #0f1419;
  background-color: transparent;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}
.x-field-input:focus {
  border-color: #1d9bf0;
  box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.15);
}
.x-field-label {
  position: absolute;
  top: 20px; left: 12px;
  color: #536471;
  font-size: 17px;
  transition: all .1s ease;
  pointer-events: none;
  background-color: transparent;
}
.x-field-input:focus + .x-field-label,
.x-field-input:not(:placeholder-shown) + .x-field-label {
  top: 6px;
  font-size: 13px;
  color: #1d9bf0;
}
.x-field-error {
  color: #e7505a;
  font-size: 13px;
  margin-top: -12px;
  margin-bottom: 12px;
  padding: 0 4px;
  min-height: 16px;
}
.x-field-captcha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.x-field-captcha-img {
  height: 46px;
  border-radius: 8px;
  border: 1px solid #eff3f4;
  background: #f7f9f9;
  cursor: pointer;
}
.x-auth-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  font-size: 15px;
  color: #536471;
}
.x-auth-link { color: #1d9bf0; }
.x-auth-link:hover { text-decoration: underline; }
.x-auth-divider {
  display: flex; align-items: center; gap: 10px;
  color: #536471; font-size: 14px;
  margin: 20px 0;
}
.x-auth-divider::before, .x-auth-divider::after {
  content: ""; flex: 1; height: 1px; background-color: #eff3f4;
}
.x-auth-switch {
  text-align: center;
  color: #536471;
  font-size: 15px;
  padding: 16px 0;
}
.x-auth-switch a { color: #1d9bf0; }
.x-auth-switch a:hover { text-decoration: underline; }

/* ========== 24. Badge 扩展、帖子 thread 子部件 ========== */
.x-badge-warning { background: rgba(255, 193, 7, 0.15); color: #8a5a00; }
.x-badge-danger  { background: rgba(231, 80, 90, 0.12); color: #c0392b; }
.x-badge-info    { background: rgba(29, 155, 240, 0.1); color: #1d9bf0; }

/* ========== 25. Flex / 间距等工具类 + 公告 x-announcement 部件 ========== */
.x-flex { display: flex !important; }
.x-flex-shrink-0 { flex-shrink: 0 !important; }
.x-flex-fill { flex: 1 1 auto !important; }
.x-items-center { align-items: center !important; }
.x-gap-2 { gap: 8px !important; }
.x-mr-1 { margin-right: 4px !important; }
.x-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.x-block { display: block !important; }

.x-announcement-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px;
  border-radius: 9999px;
  background: rgba(29,155,240,0.1);
  color: #1d9bf0;
  font-weight: 600;
  font-size: 13px;
}
.x-announcement-scroll {
  overflow: hidden;
  position: relative;
  padding: 4px 0;
  font-size: 14px;
  line-height: 1.8;
  height: 1.8em;
}
.x-announcement-scroll-inner {
  position: absolute;
  top: 0; left: 0; right: 0;
}
.x-announcement-item {
  display: block;
  height: 1.8em;
  line-height: 1.8;
  color: #0f1419;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.x-announcement-link { text-decoration: none !important; }
.x-announcement-link:hover { color: #1d9bf0 !important; }

.x-composer-avatar-wrap { width: 48px; flex-shrink: 0; }
.x-composer-avatar { width: 48px; height: 48px; border-radius: 50%; background: #f7f9f9; object-fit: cover; }

/* ========== 26. 小屏幕/移动端响应式微调 ========== */
@media (max-width: 599px) {
  .x-composer { grid-template-columns: 40px minmax(0, 1fr); padding: 12px; gap: 8px; }
  .x-composer-avatar { width: 40px; height: 40px; }
  .x-composer-avatar-wrap { width: 40px; }
  .x-composer-input { font-size: 18px; min-height: 56px; padding: 8px 0; }
  .x-thread { grid-template-columns: 40px minmax(0, 1fr); padding: 12px; gap: 8px; }
  .x-thread-avatar { width: 40px; height: 40px; }
  .x-thread-title { font-size: 16px; }
  .x-detail-content { padding-left: 0 !important; font-size: 16px; }
  .x-detail-images { padding-left: 0 !important; }
  .x-detail-meta { padding-left: 0 !important; }
  .x-tl-header-title { padding: 12px 16px; font-size: 18px; }
  .x-auth-title { font-size: 24px; margin-bottom: 24px; }
}

/* 高对比度下微调 */
@media (prefers-contrast: more) {
  .x-col-left, .x-col-main, .x-col-right { border-color: #8b98a5; }
}