/* =========================================================================
   theme-x — X (Twitter) 风格的 Halo 主题
   ------------------------------------------------------------------------
   排版单位说明：结构尺寸（头像、图标、边框）用 px 固定，文字一律用 rem，
   html 的 font-size 由 data-font-size 决定，这样「显示」面板里拖字号只动
   文字不动骨架，和 X 的行为一致。
   ========================================================================= */

/* ------------------------------------------------------------------ 令牌 */
:root {
  --nav-w: 275px;
  --nav-w-compact: 88px;
  --feed-w: 600px;
  --aside-w: 350px;

  --avatar: 40px;
  --avatar-lg: 133px;
  --radius: 16px;

  --like: #f91880;
  --repost: #00ba7c;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --accent-text: var(--accent);

  --font-default: "TwitterChirp", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --font: var(--font-default);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

/* 背景：浅色 / 暗淡 / 夜间 —— 对应 X 的 Default / Dim / Lights out */
:root,
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --bg-subtle: #f7f9f9;
  --bg-input: #eff3f4;
  /* 评论组件的表情面板要的是裸三元组 */
  --cw-rgb-bg: 255, 255, 255;
  --cw-rgb-input: 239, 243, 244;
  --cw-rgb-text: 15, 20, 25;
  --text: #0f1419;
  --text-secondary: #536471;
  --border: #eff3f4;
  --border-strong: #cfd9de;
  --hover: rgba(15, 20, 25, 0.03);
  --hover-strong: rgba(15, 20, 25, 0.1);
  --overlay: rgba(0, 0, 0, 0.4);
  --header-bg: rgba(255, 255, 255, 0.85);
  --shadow: 0 0 15px rgba(101, 119, 134, 0.2), 0 0 3px 1px rgba(101, 119, 134, 0.15);
  --skeleton: rgba(15, 20, 25, 0.06);
  color-scheme: light;
}

:root[data-theme="dim"] {
  --bg: #15202b;
  --bg-elevated: #1e2732;
  --bg-subtle: #1e2732;
  --bg-input: #273340;
  --cw-rgb-bg: 21, 32, 43;
  --cw-rgb-input: 39, 51, 64;
  --cw-rgb-text: 247, 249, 249;
  --text: #f7f9f9;
  --text-secondary: #8b98a5;
  --border: #38444d;
  --border-strong: #536471;
  --hover: rgba(255, 255, 255, 0.03);
  --hover-strong: rgba(255, 255, 255, 0.1);
  --overlay: rgba(91, 112, 131, 0.4);
  --header-bg: rgba(21, 32, 43, 0.85);
  --shadow: 0 0 15px rgba(255, 255, 255, 0.1), 0 0 3px 1px rgba(255, 255, 255, 0.08);
  --skeleton: rgba(255, 255, 255, 0.07);
  color-scheme: dark;
}

:root[data-theme="dark"] {
  --bg: #000000;
  --bg-elevated: #16181c;
  --bg-subtle: #16181c;
  --bg-input: #202327;
  --cw-rgb-bg: 0, 0, 0;
  --cw-rgb-input: 32, 35, 39;
  --cw-rgb-text: 231, 233, 234;
  --text: #e7e9ea;
  --text-secondary: #71767b;
  --border: #2f3336;
  --border-strong: #536471;
  --hover: rgba(255, 255, 255, 0.03);
  --hover-strong: rgba(255, 255, 255, 0.1);
  --overlay: rgba(91, 112, 131, 0.4);
  --header-bg: rgba(0, 0, 0, 0.85);
  --shadow: 0 0 15px rgba(255, 255, 255, 0.1), 0 0 3px 1px rgba(255, 255, 255, 0.08);
  --skeleton: rgba(255, 255, 255, 0.07);
  color-scheme: dark;
}

/* 强调色：X 的六色 */
:root,
:root[data-accent="blue"] { --accent: #1d9bf0; --accent-hover: #1a8cd8; --accent-fg: #fff; --cw-rgb-accent: 29, 155, 240; }
/* 强调色当填充（按钮、下划线、头像框）时一律用 X 的原色不动；
   只有「拿它当文字」的时候才需要看对比度。X 自己的蓝色链接在白底上是 3:1，
   橙和绿按原色只有 2.6 / 2.5，比 X 的底线还低，浅色背景下换成各自深一档的那个色。
   黄色最极端（1.43），单独压得更深。 */
:root[data-accent="orange"]:not([data-theme="dim"]):not([data-theme="dark"]) { --accent-text: #e66e00; }
:root[data-accent="green"]:not([data-theme="dim"]):not([data-theme="dark"]) { --accent-text: #00a36d; }
/* 黄色只适合当底色；在浅色背景上当文字、链接、焦点环时换成压暗的一档（6:1） */
:root[data-accent="yellow"]:not([data-theme="dim"]):not([data-theme="dark"]) { --accent-text: #7a5f00; }
:root[data-accent="yellow"] { --accent: #ffd400; --accent-hover: #e6bf00; --accent-fg: #0f1419; --cw-rgb-accent: 255, 212, 0; }
:root[data-accent="pink"] { --accent: #f91880; --accent-hover: #de1071; --accent-fg: #fff; --cw-rgb-accent: 249, 24, 128; }
:root[data-accent="purple"] { --accent: #7856ff; --accent-hover: #6a4de0; --accent-fg: #fff; --cw-rgb-accent: 120, 86, 255; }
:root[data-accent="orange"] { --accent: #ff7a00; --accent-hover: #e66e00; --accent-fg: #fff; --cw-rgb-accent: 255, 122, 0; }
:root[data-accent="green"] { --accent: #00ba7c; --accent-hover: #00a36d; --accent-fg: #fff; --cw-rgb-accent: 0, 186, 124; }

/* 字号档位 */
:root { font-size: 15px; }
:root[data-font-size="1"] { font-size: 13px; }
:root[data-font-size="2"] { font-size: 14px; }
:root[data-font-size="3"] { font-size: 15px; }
:root[data-font-size="4"] { font-size: 16px; }
:root[data-font-size="5"] { font-size: 17px; }

:root[data-avatar="square"] { --avatar-radius: 8px; }
:root { --avatar-radius: 50%; }

/* ------------------------------------------------------------------ 重置 */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .x-skeleton, .x-skeleton-line, .x-skeleton-avatar { animation: none !important; opacity: 0.7; }
  .x-spinner, .x-epic-spinner { animation: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.3333;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

/* height: auto：<img> 上的 width / height 属性只用来提前占好比例，真正的高度按宽度等比算；写了具体高度的样式照样生效 */
img { max-width: 100%; height: auto; border-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 800; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

iconify-icon { display: inline-block; vertical-align: -0.125em; }
/* iconify 是 defer 加载的自定义元素，脚本跑起来之前 <iconify-icon> 是个 0×0 的空盒子，
   文字会先挤到左边、图标到位再弹回去——导航栏上尤其明显。这里按最终尺寸先把位置占住。
   只作用于 :not(:defined)：元素一旦升级就交还给 iconify 自己算宽高，
   非正方形的图标不会被我们压成方的。 */
iconify-icon:not(:defined) { width: 1em; height: 1em; }

[hidden] { display: none !important; }

/* 键盘用户一上来先能跳过左栏 */
.x-skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 300;
  padding: 8px 16px;
  border-radius: 9999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  transform: translateY(-200%);
}
.x-skip-link:focus { transform: none; text-decoration: none; }
.x-feed:focus { outline: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------- 整体骨架 */
.x-shell {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-height: 100vh;
}

/* 左栏 ------------------------------------------------------------------ */
.x-nav {
  position: sticky;
  top: 0;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: var(--nav-w-compact);
  height: 100vh;
  padding: 0 4px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.x-nav::-webkit-scrollbar { display: none; }

.x-nav-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.x-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 2px 0;
  border-radius: 50%;
  color: var(--text);
  transition: background-color 0.2s var(--ease);
}
.x-logo:hover { background: var(--hover-strong); text-decoration: none; }
.x-logo svg { width: 30px; height: 30px; fill: currentColor; }
.x-logo img { width: 30px; height: 30px; object-fit: contain; border-radius: 6px; }

.x-nav-list { display: flex; flex-direction: column; align-items: flex-start; }

.x-nav-link {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 100%;
  padding: 12px;
  margin: 2px 0;
  border-radius: 9999px;
  color: var(--text);
  font-size: 1.266rem;
  line-height: 1.25;
  transition: background-color 0.2s var(--ease);
}
.x-nav-link:hover { background: var(--hover-strong); text-decoration: none; }
.x-nav-link iconify-icon { font-size: 26.25px; flex: 0 0 auto; }
.x-nav-link span {
  display: none;
  padding-right: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x-nav-link.is-active { font-weight: 700; }
.x-nav-link.is-active iconify-icon { --icon-fill: currentColor; }

.x-nav-badge {
  display: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 0.733rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.x-nav-badge:not(:empty) { display: inline-block; }

.x-post-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 16px 0 0;
  border-radius: 9999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 1.133rem;
  font-weight: 700;
  transition: background-color 0.2s var(--ease);
}
.x-post-button:hover { background: var(--accent-hover); text-decoration: none; }
.x-post-button span { display: none; }
.x-post-button iconify-icon { font-size: 24px; }

.x-nav-account {
  margin-top: auto;
  margin-bottom: 12px;
  /* 这一行是 <a>（点了去个人资料），不写就会吃到全局 a 的强调色，昵称变蓝 */
  color: var(--text);
  display: flex;
  align-items: center;
  /* 窄栏档和上面那排图标同宽同形，展开档才变成整行 */
  justify-content: center;
  gap: 0;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 9999px;
  transition: background-color 0.2s var(--ease);
}
.x-nav-account:hover { background: var(--hover-strong); text-decoration: none; }
.x-nav-account .x-avatar { flex: 0 0 auto; }
.x-nav-account-meta { display: none; flex: 1; min-width: 0; text-align: left; }
.x-nav-account-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x-nav-account-handle {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 宽屏下左栏展开成带文字的样子。访客点了「收起侧边栏」（data-nav="mini"）就跳过这一档，
   保持和窄屏一样的纯图标条 */
@media (min-width: 1300px) {
  /* 右边多留一点，账号那一行别贴着中栏的竖线 */
  :root:not([data-nav="mini"]) .x-nav { width: var(--nav-w); align-items: flex-start; padding: 0 12px 0 4px; }
  :root:not([data-nav="mini"]) .x-nav-link { width: auto; padding-right: 24px; }
  :root:not([data-nav="mini"]) .x-nav-account {
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    height: auto;
    padding: 12px;
  }
  :root:not([data-nav="mini"]) .x-nav-link span,
  :root:not([data-nav="mini"]) .x-post-button span,
  :root:not([data-nav="mini"]) .x-nav-collapse span,
  :root:not([data-nav="mini"]) .x-nav-account-meta { display: block; }
  :root:not([data-nav="mini"]) .x-post-button { width: 90%; max-width: 234px; height: 52px; gap: 8px; }
  :root:not([data-nav="mini"]) .x-post-button iconify-icon { display: none; }
  :root:not([data-nav="mini"]) .x-logo { margin-left: 0; }
  :root:not([data-nav="mini"]) .x-nav-collapse { width: auto; padding-right: 24px; }
}

/* 收起 / 展开按钮：窄屏本来就是图标条，不显示 */
.x-nav-collapse {
  display: none;
  align-items: center;
  gap: 20px;
  /* 顶到底部，紧挨着账号那一行 */
  margin: auto 0 4px;
  padding: 12px;
  border-radius: 9999px;
  color: var(--text-secondary);
  font-size: 1.266rem;
  line-height: 1.25;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.x-nav-collapse:hover { background: var(--hover); color: var(--text); }
.x-nav-collapse span { display: none; font-size: 0.933rem; }
.x-nav-collapse .x-collapse-out { display: none; }
[data-nav="mini"] .x-nav-collapse .x-collapse-in { display: none; }
[data-nav="mini"] .x-nav-collapse .x-collapse-out { display: block; }
/* 底部改由收起按钮顶着，账号行跟在它下面 */
.x-nav-inner .x-nav-account { margin-top: 0; }
/* 收放要有个过渡，不然是「啪」的一下。
   宽度、间距用 transition 滑过去；文字用 max-width + opacity 收起（display 没法过渡），
   同时 visibility 在动画结束那一刻才切，读屏器不会念到收起来的字。
   「减少动态效果」的系统设置会把这些 transition 全部压到 0.01ms（见文件开头那段）。 */
@media (min-width: 1300px) {
  .x-nav { transition: width 0.26s var(--ease); }
  .x-feed { transition: max-width 0.26s var(--ease), flex-basis 0.26s var(--ease); }
  .x-nav-link,
  .x-nav-collapse,
  .x-nav-account { transition: background-color 0.2s var(--ease), color 0.2s var(--ease), gap 0.26s var(--ease), width 0.26s var(--ease), padding 0.26s var(--ease); }
  .x-post-button { transition: background-color 0.2s var(--ease), width 0.26s var(--ease), gap 0.26s var(--ease); }

  .x-nav-link span,
  .x-post-button span,
  .x-nav-collapse span,
  .x-nav-account-meta {
    display: block;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    visibility: visible;
    transition: max-width 0.26s var(--ease), opacity 0.16s var(--ease) 0.1s, visibility 0s;
  }
  [data-nav="mini"] .x-nav-link span,
  [data-nav="mini"] .x-post-button span,
  [data-nav="mini"] .x-nav-collapse span,
  [data-nav="mini"] .x-nav-account-meta {
    max-width: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-width 0.26s var(--ease), opacity 0.12s var(--ease), visibility 0s 0.26s;
  }
  /* 收起时图标要回到居中的圆里：间距归零，别让 gap 把图标条撑宽 */
  [data-nav="mini"] .x-nav-link,
  [data-nav="mini"] .x-nav-collapse,
  [data-nav="mini"] .x-post-button,
  [data-nav="mini"] .x-nav-account { gap: 0; }

  .x-nav-collapse { display: flex; }
  /* 左栏收起时，省下来的 187px 全给中栏：三栏整体位置和两边留白都不动，
     页面不会往左缩、右边也不会空出一条 */
  :root[data-nav="mini"] { --feed-w: calc(600px + var(--nav-w) - var(--nav-w-compact)); }
}

/* 中栏 ------------------------------------------------------------------ */
.x-feed {
  flex: 0 1 var(--feed-w);
  width: 100%;
  max-width: var(--feed-w);
  min-height: 100vh;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.x-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.x-header-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 53px;
  padding: 0 16px;
}
.x-header-bar > div:not(.x-header-actions) { flex: 1 1 auto; min-width: 0; }
.x-header-title {
  font-size: 1.266rem;
  line-height: 1.25;
  font-weight: 800;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.x-header-sub { color: var(--text-secondary); font-size: 0.866rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-header-back {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: -6px;
  border-radius: 50%;
  font-size: 18.75px;
  transition: background-color 0.2s var(--ease);
}
.x-header-back:hover { background: var(--hover-strong); }
.x-header-actions { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 4px; }
.x-header-search { padding: 0 16px 8px; }
.x-header-search .x-search { position: relative; }

.x-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--text);
  font-size: 18.75px;
  transition: background-color 0.2s var(--ease);
}
.x-icon-button:hover { background: var(--hover-strong); text-decoration: none; }

.x-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  /* 标签多了（五个）又碰上长文案时，X 的做法是整条横向滚动而不是把字压扁 */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.x-tabs::-webkit-scrollbar { display: none; }
.x-tab {
  /* 1 0 auto：装得下就一起长满整行，装不下也不压缩，由外面那层滚 */
  flex: 1 0 auto;
  /* flex item 默认 min-width:auto，长英文串会把整页撑宽 */
  min-width: 0;
  position: relative;
  display: flex;
  /* 文字包在 span 里并撑满高度，下划线挂在 span 上才能跟着文字宽度走 */
  align-items: stretch;
  justify-content: center;
  min-height: 53px;
  padding: 0 16px;
  color: var(--text-secondary);
  font-weight: 500;
  transition: background-color 0.2s var(--ease);
}
.x-tab:hover { background: var(--hover-strong); text-decoration: none; }
.x-tab.is-active { color: var(--text); font-weight: 700; }
.x-tab > span {
  position: relative;
  /* 必须是块容器：flex 容器上的 text-overflow 是死规则，文字会被硬切没有省略号 */
  display: block;
  line-height: 53px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.x-tab.is-active > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  border-radius: 9999px;
  background: var(--accent);
}

/* 右栏 ------------------------------------------------------------------ */
.x-aside {
  display: none;
  flex: 0 0 auto;
  /* 外层是 align-items:flex-start，右栏不拉满的话只有自己内容那么高，
     里面的 sticky（搜索框、跟随的小组件）滚过这段高度就跟着滚走了 */
  align-self: stretch;
  width: var(--aside-w);
  margin-left: 30px;
  padding-bottom: 48px;
}
/* 1050 刚够放下三栏的「内容宽」减去滚动条，这一段先用窄一档的右栏，别挤中栏 */
@media (min-width: 1050px) and (max-width: 1084px) {
  .x-aside { width: 320px; margin-left: 24px; }
}

@media (min-width: 1050px) {
  .x-aside { display: block; }
  .x-header-search { display: none; }
  .x-feed[data-post-aside="off"] + .x-aside { display: none; }
}

.x-aside-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
}
/* 卡片一律不许被压缩：读文章时这一栏高度固定、超出就滚动，
   不加这条的话卡片（overflow:hidden）会被挤扁裁掉，而不是让这一栏滚起来 */
.x-aside-inner > * { flex-shrink: 0; }
/* 搜索框关掉时，第一张卡片别顶着视口上沿 */
.x-aside-inner:first-child { padding-top: 12px; }
/* 跟随滚动：要跟随的小组件排到下面；theme.js 的 initAsideFollow 量好高度后加上 is-following 并写 top。
   没有 JS 时不加 sticky，保持原样随页面滚走，不会出现右栏下半截永远够不着的情况 */
.x-aside-inner > .is-follow { order: 1; }
.x-aside-inner.is-following { position: sticky; top: 0; }

.x-search-wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 4px 0;
  background: var(--bg);
}

.x-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: var(--bg-input);
  color: var(--text-secondary);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.x-search:focus-within {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--accent-text);
}
.x-search iconify-icon { font-size: 18.75px; flex: 0 0 auto; }
.x-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text);
  outline: none;
}
.x-search input::placeholder { color: var(--text-secondary); }
.x-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 12px;
}
.x-search.has-value .x-search-clear { display: flex; }

.x-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
:root[data-theme="dim"] .x-card,
:root[data-theme="dark"] .x-card { background: var(--bg-elevated); border-color: transparent; }

.x-card-title {
  padding: 12px 16px;
  font-size: 1.266rem;
  line-height: 1.25;
}
.x-card-body { padding: 12px 16px 16px; }
.x-card-text { color: var(--text-secondary); font-size: 0.866rem; line-height: 1.4; margin-bottom: 12px; }

.x-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: inherit;
  transition: background-color 0.2s var(--ease);
}
a.x-card-row:hover { background: var(--hover); text-decoration: none; }
.x-card-row-main { flex: 1; min-width: 0; }
.x-card-row-label { color: var(--text-secondary); font-size: 0.866rem; }
.x-card-row-title { font-weight: 700; margin: 2px 0; }
.x-card-more { display: block; padding: 16px; color: var(--accent-text); }
.x-card-more:hover { background: var(--hover); text-decoration: none; }

.x-trend-rank { color: var(--text-secondary); font-size: 0.866rem; }

/* Epic 限免 */
.x-epic[hidden] { display: none; }
.x-epic-row { align-items: flex-start; }
.x-epic-row .x-card-row-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.x-epic-cover {
  flex: 0 0 auto;
  width: 96px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg-input);
}
.x-epic-badge { font-weight: 700; }
.x-epic-badge.is-now { color: color-mix(in srgb, var(--repost) 65%, var(--text)); }
.x-epic-badge.is-soon { color: var(--accent-text); }
.x-epic-price s { opacity: 0.8; }
.x-epic-price b { color: var(--text); font-weight: 700; }

/* 「Epic 限免」页面：每个游戏排成一条带图的帖子 */
.x-tweet.x-epic-tweet:not(.x-tweet--detail):hover { background: transparent; cursor: default; }
.x-epic-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar);
  height: var(--avatar);
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font-size: 22px;
}
.x-epic-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.x-epic-media { display: block; aspect-ratio: 16 / 9; }
.x-epic-media img { width: 100%; height: 100%; object-fit: cover; }
.x-epic-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.x-epic-meta .x-btn { margin-left: auto; }
.x-epic-state { display: none; }
.x-epic-page[data-state="loading"] > .x-epic-state--loading,
.x-epic-page[data-state="empty"] > .x-epic-state--empty,
.x-epic-page[data-state="error"] > .x-epic-state--error { display: block; }
.x-epic-state--loading { padding: 40px 16px; text-align: center; color: var(--text-secondary); }
.x-epic-spinner {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-bottom: 12px;
  border: 3px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: x-spin 0.8s linear infinite;
}
@keyframes x-spin { to { transform: rotate(360deg); } }
.x-epic-stores { display: flex; flex-wrap: wrap; gap: 8px; }
.x-epic-source { margin: 0; padding: 16px; color: var(--text-secondary); font-size: 0.866rem; }

/* 全网热榜 / 历史上的今天（数据晚到，拿不到就整块不出现） */
.x-hot[hidden], .x-history[hidden], .x-hot-tabs[hidden] { display: none; }
.x-hot-tabs {
  display: flex;
  gap: 8px;
  padding: 0 16px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.x-hot-tabs::-webkit-scrollbar { display: none; }
.x-hot-tab {
  flex: none;
  padding: 4px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.866rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.x-hot-tab:hover { background: var(--hover-strong); }
.x-hot-tab[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.x-hot-tag { color: var(--accent-text); font-weight: 700; }
.x-hot-row .x-card-row-title,
.x-history .x-card-row-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
button.x-card-more {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.x-card-more[hidden] { display: none; }

/* 发帖框里的一句话：出处另起一行，小一号 */
.x-compose-from { display: block; margin-top: 4px; font-size: 0.8em; }

/* 正文里的链接卡片：有分享图是上图下文的大卡片，没有就是左边网站图标、右边文字的小卡片 */
.x-prose a.x-linkcard,
.x-linkcard {
  display: flex;
  align-items: stretch;
  margin: 1em 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s var(--ease);
}
.x-prose a.x-linkcard:hover { background: var(--hover); text-decoration: none; }
.x-linkcard-media {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  min-height: 96px;
  background: var(--bg-subtle);
  border-right: 1px solid var(--border-strong);
}
.x-prose .x-linkcard img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.x-prose .x-linkcard-media.is-icon img { width: 32px; height: 32px; object-fit: contain; }
.x-linkcard-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 12px 16px;
  font-size: 0.933rem;
  line-height: 1.35;
}
.x-linkcard-site { color: var(--text-secondary); }
.x-linkcard-title { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-linkcard-desc {
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.x-linkcard--large { flex-direction: column; }
.x-linkcard--large .x-linkcard-media {
  width: 100%;
  aspect-ratio: 1.91 / 1;
  border-right: 0;
  border-bottom: 1px solid var(--border-strong);
}

.x-follow-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.x-follow-row:hover { background: var(--hover); }
.x-follow-meta { flex: 1; min-width: 0; }
.x-follow-meta a { color: var(--text); font-weight: 700; }
.x-follow-meta span { display: block; color: var(--text-secondary); font-size: 0.933rem; }
.x-follow-desc { color: var(--text) !important; margin-top: 4px; }

/* 首页第二个标签页选「友链」时：动态是推文样式的卡片，没有动态就退回这种一行一个站点 */
.x-timeline > .x-follow-row { border-bottom: 1px solid var(--border); }
/* 友链动态：一条一条都是别人的长文章，标题和摘要都要收住，不然整屏糊成一片 */
.x-tweet--friend { padding: 14px 16px; }
.x-tweet--friend .x-tweet-time { color: var(--text-secondary); }
.x-tweet--friend .x-tweet-head { margin-bottom: 2px; }
.x-tweet--friend .x-tweet-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.x-tweet--friend .x-tweet-text {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 0.933rem;
  line-height: 1.5;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----------------------------------------------- 文章列表的两种看法 */
/* data-feed="x"（默认）就是上面那套 X 时间线；下面这段把同一套 DOM 重排成博客列表。
   只作用于时间线里的文章卡片——瞬间、媒体页、系列卡片不受影响。 */
.x-header-tabs { display: flex; align-items: stretch; }
.x-header-tabs .x-tabs { flex: 1; min-width: 0; }
.x-feed-toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 53px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  font-size: 19px;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.x-feed-toggle:hover { background: var(--hover); color: var(--text); }
.x-feed-toggle .x-feed-icon-blog { display: none; }
[data-feed="blog"] .x-feed-toggle .x-feed-icon-x { display: none; }
[data-feed="blog"] .x-feed-toggle .x-feed-icon-blog { display: block; }

[data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) { padding: 16px; gap: 0; }
[data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-tweet-side,
[data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-tweet-name,
[data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-tweet-handle,
[data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-tweet-dot,
[data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-tweet-more,
[data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-actions { display: none; }

/* 左边标题 / 摘要 / 标签 / 时间，右边一张缩略图，图从头贯到底 */
[data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-tweet-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title media"
    "text  media"
    "tags  media"
    "meta  media";
  column-gap: 16px;
  align-content: start;
}
[data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-tweet-title { grid-area: title; margin: 0 0 6px; font-size: 1.2rem; line-height: 1.4; }
[data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-tweet-text {
  grid-area: text;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.933rem;
  line-height: 1.6;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
[data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-tweet-tags { grid-area: tags; margin-top: 8px; }
[data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-tweet-head { grid-area: meta; margin-top: 8px; font-size: 0.866rem; }
[data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-tweet-time { color: var(--text-secondary); }
[data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-media {
  grid-area: media;
  align-self: start;
  width: 128px;
  height: 96px;
  margin: 0;
  border-radius: 12px;
}
[data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-media img { width: 100%; height: 100%; object-fit: cover; }
/* 多图的九宫格在列表里只留第一张 */
[data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-media > *:nth-child(n + 2) { display: none; }

/* 博客列表里不再摆 X 那个「有什么新鲜事？」的发帖框 */
[data-feed="blog"] .x-compose { display: none; }

/* 左栏收起时中栏变宽了，缩略图跟着放大一点，不然一行里显得太小 */
@media (min-width: 1300px) {
  [data-nav="mini"][data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-media { width: 168px; height: 112px; }
  [data-nav="mini"][data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-tweet-title { font-size: 1.266rem; }
}

@media (max-width: 499px) {
  [data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) { padding: 12px; }
  [data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-tweet-main { column-gap: 12px; }
  [data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-tweet-title { font-size: 1.066rem; }
  [data-feed="blog"] .x-timeline .x-tweet:not(.x-tweet--friend) .x-media { width: 92px; height: 69px; }
}

/* --------------------------------------------------------- 申请友链 */
/* 两份申请块：宽屏用右栏那份，窄屏（右栏本来就隐藏）用正文底部那份 */
.x-apply { border-top: 1px solid var(--border); }
.x-apply-head { margin: 0; padding: 14px 16px 0; font-size: 1.266rem; font-weight: 800; }
.x-apply--aside { border-top: 0; }
.x-apply--aside .x-apply-head { padding: 12px 16px; font-size: 1.133rem; }
.x-apply--aside .x-apply-body { padding: 0 16px 16px; }
.x-apply--aside .x-apply-mine { font-size: 0.866rem; }
.x-apply--aside .x-apply-mine dt { flex: 0 0 44px; }
.x-apply--aside .x-apply-acts .x-btn { flex: 1; justify-content: center; }
@media (min-width: 1050px) {
  .x-apply--main { display: none; }
}
.x-apply-body { padding: 4px 16px 24px; }
.x-apply-lead { margin: 0 0 12px; color: var(--text-secondary); font-size: 0.933rem; line-height: 1.6; }
.x-apply-mine {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--hover);
  font-size: 0.933rem;
}
.x-apply-mine > div { display: flex; gap: 10px; padding: 3px 0; }
.x-apply-mine dt { flex: 0 0 52px; color: var(--text-secondary); }
.x-apply-mine dd { margin: 0; min-width: 0; word-break: break-all; }
.x-apply-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.x-apply-note { margin: 14px 0 0; color: var(--text-secondary); font-size: 0.866rem; line-height: 1.7; white-space: pre-wrap; }
.x-apply-form { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.x-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.x-field { display: flex; flex-direction: column; gap: 4px; }
.x-field label { color: var(--text-secondary); font-size: 0.866rem; }
.x-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.933rem;
}
.x-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.x-field-help { color: var(--text-secondary); font-size: 0.8rem; }
.x-captcha { display: flex; align-items: center; gap: 10px; }
.x-captcha input { flex: 1; min-width: 0; }
.x-captcha button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text-secondary);
  cursor: pointer;
}
.x-captcha img { height: 30px; border-radius: 4px; }
.x-captcha img:not([src]) { display: none; }
.x-apply-msg { margin: 0; font-size: 0.9rem; line-height: 1.6; }
.x-apply-msg[data-kind="error"] { color: var(--like); }
.x-apply-msg[data-kind="ok"] { color: var(--repost); }
.x-apply-msg[data-kind="info"] { color: var(--text-secondary); }

.x-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 0 16px;
  color: var(--text-secondary);
  font-size: 0.866rem;
}
.x-footer-links a { color: inherit; }
/* 备案号不能被折行拆开 */
.x-icp-link { white-space: nowrap; }

/* 窄屏没有右栏，备案号单独走一条通栏。它排在 .x-shell 之后，
   所以 .x-shell 那条给固定底栏留的 padding 管不到它，得自己再避让一次 */
.x-icp { display: none; }
@media (max-width: 1049px) {
  .x-icp {
    display: block;
    padding: 16px;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.866rem;
    text-align: center;
  }
  .x-icp a { color: inherit; white-space: nowrap; }
}
@media (max-width: 499px) {
  .x-icp { margin-bottom: calc(53px + env(safe-area-inset-bottom)); }
}

/* 抽屉里的那处：手机上真正够得着的备案号 */
.x-drawer-icp {
  padding: 12px 16px 0;
  color: var(--text-secondary);
  font-size: 0.8rem;
}
.x-drawer-icp a { color: inherit; white-space: nowrap; }
@media print {
  .x-icp { display: none; }
}

/* --------------------------------------------------------------- 按钮 */
.x-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 9999px;
  background: var(--text);
  color: var(--bg);
  font-weight: 700;
  white-space: nowrap;
  transition: opacity 0.2s var(--ease), background-color 0.2s var(--ease);
}
.x-btn:hover { opacity: 0.9; text-decoration: none; }
.x-btn:disabled { opacity: 0.5; cursor: default; }
.x-btn--accent { background: var(--accent); color: var(--accent-fg); }
.x-btn--accent:hover { background: var(--accent-hover); opacity: 1; }
.x-btn--outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.x-btn--outline:hover { background: var(--hover-strong); }
.x-btn--sm { min-height: 32px; padding: 0 16px; font-size: 0.933rem; }
.x-btn--outline.is-following { border-color: var(--border-strong); }
.x-btn--outline.is-following:hover {
  border-color: #f4212e;
  color: #f4212e;
  background: rgba(244, 33, 46, 0.1);
}
.x-btn--lg { min-height: 52px; padding: 0 32px; font-size: 1.133rem; }
.x-btn--block { width: 100%; }

/* --------------------------------------------------------------- 头像 */
.x-avatar {
  display: block;
  width: var(--avatar);
  height: var(--avatar);
  border-radius: var(--avatar-radius);
  object-fit: cover;
  background: var(--bg-input);
  transition: opacity 0.2s var(--ease);
}
a.x-avatar:hover, .x-avatar-link:hover .x-avatar { opacity: 0.85; }
.x-avatar--sm { --avatar: 32px; }
.x-avatar--lg { --avatar: 48px; }

.x-verified { color: var(--accent-text); font-size: 1.0666em; flex: 0 0 auto; }
.x-verified[data-kind="gold"] { color: #ffd400; }
.x-verified[data-kind="gray"] { color: #829aab; }

/* --------------------------------------------------------------- 发帖框 */
.x-compose {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.x-compose-main { flex: 1; min-width: 0; }

/* 留言板的开场白：长得像发帖框，但不跟着发帖框在手机上隐藏 */
.x-intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.x-intro-main { flex: 1; min-width: 0; }
.x-compose-field {
  display: block;
  width: 100%;
  padding: 12px 0;
  color: var(--text-secondary);
  font-size: 1.333rem;
  text-align: left;
}
.x-compose-field:hover { text-decoration: none; }
.x-compose-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.x-compose-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--accent-text);
  font-size: 18.75px;
  transition: background-color 0.2s var(--ease);
}
.x-compose-tool:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); text-decoration: none; }
.x-compose-bar .x-btn { margin-left: auto; }

/* --------------------------------------------------------------- 推文卡 */
.x-timeline { display: block; }

.x-tweet {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.2s var(--ease);
}
.x-tweet:not(.x-tweet--detail):hover { background: var(--hover); cursor: pointer; }
.x-tweet.is-focused { background: var(--hover); box-shadow: inset 3px 0 0 var(--accent); }

.x-tweet-context {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 0;
  transition: background-color 0.2s var(--ease);
  color: var(--text-secondary);
  font-size: 0.866rem;
  font-weight: 700;
}
.x-tweet-context iconify-icon { font-size: 16px; margin-left: calc(var(--avatar) - 16px); }
/* 上下文行已经留了顶部间距，紧跟的帖子就不再重复留 */
.x-tweet-context + .x-tweet { padding-top: 4px; }
.x-tweet-context:has(+ .x-tweet:not(.x-tweet--detail):hover) { background: var(--hover); }

.x-tweet-side { flex: 0 0 var(--avatar); display: flex; flex-direction: column; align-items: center; }
.x-tweet-thread-line {
  flex: 1;
  width: 2px;
  margin-top: 4px;
  border-radius: 1px;
  background: var(--border-strong);
}

.x-tweet-main { flex: 1; min-width: 0; }

.x-tweet-head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}
.x-tweet-name {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x-tweet-name:hover { text-decoration: underline; }
.x-tweet-handle,
.x-tweet-dot,
.x-tweet-time {
  color: var(--text-secondary);
  white-space: nowrap;
}
.x-tweet-name { flex: 0 1 auto; }
.x-tweet-handle { flex: 0 3 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.x-tweet-dot, .x-tweet-time { flex: 0 0 auto; }
.x-tweet-time:hover { text-decoration: underline; }
.x-tweet-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  /* 点击热区 34px，但不能把昵称那一行撑高（X 也是用负外边距收回去），
     否则每条帖子上面多 7px、下面多 7px，昵称离分割线的距离也对不上 */
  margin: -7px -8px -7px auto;
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 18.75px;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.x-tweet-more:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-text); }

.x-tweet-title {
  margin: 2px 0 4px;
  font-size: 1.0666rem;
  font-weight: 700;
  line-height: 1.3;
}
.x-tweet-title a { color: var(--text); }
.x-tweet-title a:hover { text-decoration: none; }

.x-tweet-text {
  color: var(--text);
  line-height: 1.4;
  white-space: pre-wrap;
}
.x-tweet-text a { color: var(--accent-text); }

.x-tweet-tags { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; }
.x-tweet-tags a { color: var(--accent-text); }

.x-tweet-pinned {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 0.866rem;
  font-weight: 700;
}

/* 媒体网格：1 图铺满，2 图并排，3 图一大两小，4 图田字 */
.x-media {
  position: relative;
  display: grid;
  gap: 2px;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
/* 轨道高度必须可压缩：不写 minmax(0,1fr) 的话行高会被图片的固有高度撑开，
   四图网格的第二行会被 overflow:hidden 整排切掉 */
.x-media { grid-auto-rows: minmax(0, 1fr); }
.x-media[data-count="1"] { grid-template-columns: 1fr; aspect-ratio: 16 / 9; max-height: 510px; }

.x-media[data-count="2"] { grid-template-columns: 1fr 1fr; }
.x-media[data-count="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.x-media[data-count="3"] > *:first-child { grid-row: span 2; }
.x-media[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.x-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  cursor: zoom-in;
  background: var(--bg-input);
}
.x-media-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.77);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

/* 图片的 ALT 描述角标，和 X 一样压在图片左下角 */
.x-alt-host {
  position: relative;
  /* 行内块才会收缩到图片自己的宽度，不然角标会贴在段落的左边而不是图片的左边 */
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
  line-height: 0;
}
.x-alt-host--cell {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.x-alt-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  height: 20px;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.77);
  color: #fff;
  font-size: 0.733rem;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.02em;
  transition: background 0.2s var(--ease);
}
.x-alt-badge:hover,
.x-alt-badge.is-open { background: rgba(0, 0, 0, 0.92); }
.x-alt-text {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 34px;
  z-index: 2;
  display: block;
  max-height: 60%;
  overflow-y: auto;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.88);
  color: #fff;
  font-size: 0.866rem;
  line-height: 1.4;
  text-align: left;
  white-space: pre-wrap;
}

/* 灯箱里直接把描述铺在底下，不用再点一次 */
.x-lightbox-alt {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 2;
  width: min(680px, calc(100% - 96px));
  max-height: 30%;
  overflow-y: auto;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.933rem;
  line-height: 1.4;
  text-align: center;
  white-space: pre-wrap;
}

/* 链接预览卡 */
.x-link-card {
  display: block;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  transition: background-color 0.2s var(--ease);
}
.x-link-card:hover { background: var(--hover); text-decoration: none; }
.x-link-card-img { width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; display: block; }
.x-link-card-body { padding: 12px; border-top: 1px solid var(--border); }
.x-link-card-host { color: var(--text-secondary); font-size: 0.866rem; }
.x-link-card-title { margin: 2px 0; font-weight: 400; }
.x-link-card-desc {
  color: var(--text-secondary);
  font-size: 0.866rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------- 互动按钮栏 */
.x-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 425px;
  margin-top: 12px;
  margin-left: -8px;
}
.x-action {
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  font-size: 0.866rem;
  transition: color 0.2s var(--ease);
}
.x-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 18.75px;
  transition: background-color 0.2s var(--ease);
}
.x-action-count { padding: 0 4px 0 0; min-width: 1em; }
.x-action-count:empty { min-width: 0; padding: 0; }
.x-action { min-width: 0; }
/* 书签和分享原先按 X 的排法挤在最右边，看着太近；display: contents 让它俩
   直接参与外层的 space-between，和前面四个按钮一样等距排开 */
.x-action-group { display: contents; }
.x-action:hover { text-decoration: none; }
.x-action:hover .x-action-icon { background: color-mix(in srgb, currentColor 10%, transparent); }

.x-action[data-kind="reply"]:hover,
.x-action[data-kind="view"]:hover,
.x-action[data-kind="bookmark"]:hover,
.x-action[data-kind="share"]:hover { color: var(--accent-text); }
.x-action[data-kind="repost"]:hover,
.x-action[data-kind="repost"].is-on { color: var(--repost); }
.x-action[data-kind="like"]:hover,
.x-action[data-kind="like"].is-on { color: var(--like); }
.x-action[data-kind="bookmark"].is-on { color: var(--accent-text); }

.x-action.is-on .x-action-icon { animation: x-pop 0.4s var(--ease); }
@keyframes x-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------- 文章详情 */
.x-tweet--detail { flex-direction: column; gap: 0; cursor: default; }
.x-tweet--detail .x-tweet-head { margin-bottom: 12px; gap: 12px; }
.x-detail-identity { display: flex; flex-direction: column; min-width: 0; }
.x-detail-identity .x-tweet-handle { font-size: 1rem; }

.x-detail-title {
  margin: 0 0 12px;
  font-size: 1.533rem;
  line-height: 1.25;
  font-weight: 800;
}

.x-detail-readtime {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -4px 0 12px;
  color: var(--text-secondary);
  font-size: 0.933rem;
}
.x-detail-readtime[hidden] { display: none; }
.x-detail-readtime iconify-icon { font-size: 1.05em; }

.x-summary {
  margin: 16px 0 20px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-subtle);
}
.x-summary--longform { margin: 0 16px 16px; }
.x-summary h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--text);
  font-size: 0.933rem;
  font-weight: 700;
}
.x-summary h2 iconify-icon { color: var(--accent-text); font-size: 1.2em; }
.x-summary p { margin: 0; color: var(--text); font-size: 0.933rem; line-height: 1.65; overflow-wrap: anywhere; }

.x-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  padding: 16px 0;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.x-detail-meta strong { color: var(--text); font-weight: 700; }
.x-detail-meta a { color: var(--text-secondary); }
.x-detail-meta a:hover { text-decoration: underline; }

.x-detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.x-detail-stats strong { color: var(--text); }

.x-tweet--detail .x-actions {
  max-width: none;
  padding: 4px 0;
  margin-left: -8px;
  border-bottom: 1px solid var(--border);
}
.x-tweet--detail .x-action-count { font-size: 0.933rem; }
.x-tweet--detail .x-action-icon { width: 38px; height: 38px; font-size: 22px; }

.x-copyright {
  margin-top: 16px;
  padding: 12px 16px;
  border-left: 4px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 0.866rem;
  line-height: 1.5;
}

.x-post-nav { display: flex; flex-direction: column; border-bottom: 1px solid var(--border); }
.x-post-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.2s var(--ease);
}
.x-post-nav a:last-child { border-bottom: 0; }
.x-post-nav a:hover { background: var(--hover); text-decoration: none; }
.x-post-nav iconify-icon { color: var(--text-secondary); font-size: 18.75px; flex: 0 0 auto; }
.x-post-nav-label { display: block; color: var(--text-secondary); font-size: 0.866rem; }
.x-post-nav-title { display: block; font-weight: 700; }

.x-downloads { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.x-downloads-list a {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  color: var(--text);
  font-weight: 600;
}
.x-downloads-list a + a, .x-downloads-code + a { border-top: 1px solid var(--border); }
.x-downloads-list a:hover { background: var(--hover); text-decoration: none; }
.x-downloads-list a iconify-icon { font-size: 20px; color: var(--accent-text); }
.x-downloads-list a iconify-icon:last-child { color: var(--text-secondary); }
.x-downloads-list a span { min-width: 0; overflow-wrap: anywhere; }
.x-downloads-code { margin: 0; padding: 0 16px 12px 52px; color: var(--text-secondary); font-size: 0.866rem; }
.x-downloads-code code { margin-left: 8px; color: var(--text); user-select: all; }

.x-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 1.266rem;
  border-bottom: 1px solid var(--border);
}

/* --------------------------------------------------------- 正文排版 */
.x-prose {
  font-size: 1.0666rem;
  line-height: 1.6;
  color: var(--text);
}
.x-prose > * + * { margin-top: 1em; }
.x-prose h1, .x-prose h2, .x-prose h3, .x-prose h4 {
  margin-top: 1.6em;
  line-height: 1.3;
  scroll-margin-top: calc(var(--header-h, 53px) + 16px);
}
.x-prose h1 { font-size: 1.6em; }
.x-prose h2 { font-size: 1.35em; }
.x-prose h3 { font-size: 1.15em; }
.x-prose h4 { font-size: 1em; }
.x-prose a { color: var(--accent-text); }
/* 正文里的媒体网格归网格管：.x-prose img 和 .x-media img 特异性相同且排在后面，会把高度和边框盖掉 */
.x-prose .x-media img { height: 100%; border: 0; border-radius: 0; }

.x-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  cursor: zoom-in;
}
.x-prose figure { margin: 1.5em 0; }
.x-prose figcaption {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 0.866rem;
  text-align: center;
}
.x-prose blockquote {
  margin: 1.5em 0;
  padding: 12px 16px;
  border-left: 4px solid var(--border-strong);
  color: var(--text-secondary);
}
.x-prose blockquote > * + * { margin-top: 0.75em; }
.x-prose ul, .x-prose ol { padding-left: 1.5em; }
.x-prose ul { list-style: disc; }
.x-prose ol { list-style: decimal; }
.x-prose li { margin-top: 0.4em; }
.x-prose li::marker { color: var(--text-secondary); }
.x-prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--border); }
.x-prose code {
  padding: 0.15em 0.4em;
  border-radius: 4px;
  background: var(--bg-input);
  font-family: var(--font-mono);
  font-size: 0.875em;
}
.x-prose pre {
  position: relative;
  margin: 1.5em 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
}
.x-prose pre code { padding: 0; background: none; font-size: inherit; }
.x-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.933rem;
  display: block;
  overflow-x: auto;
}
.x-prose th, .x-prose td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  text-align: left;
}
.x-prose th { background: var(--bg-subtle); font-weight: 700; }
.x-prose kbd {
  padding: 0.15em 0.45em;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.8em;
}

.x-code-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
}
.x-prose pre:hover .x-code-copy,
.x-code-copy:focus-visible { opacity: 1; }
.x-code-copy:hover { color: var(--accent-text); }
.x-code-copy.is-done { color: var(--repost); }

/* 目录 */
.x-toc {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.x-toc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-size: 1.0666rem;
  font-weight: 700;
}
.x-toc-title iconify-icon { color: var(--text-secondary); transition: transform 0.2s var(--ease); }
.x-toc.is-collapsed .x-toc-title iconify-icon { transform: rotate(-90deg); }
.x-toc.is-collapsed .x-toc-list { display: none; }
.x-toc-list { margin-top: 8px; }
.x-toc-list a {
  display: block;
  padding: 6px 8px;
  border-left: 2px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.933rem;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.x-toc-list a:hover { color: var(--text); text-decoration: none; }
.x-toc-list a.is-active { color: var(--accent-text); border-color: var(--accent); font-weight: 700; }
.x-toc-list a[data-level="3"] { padding-left: 20px; }
.x-toc-list a[data-level="4"] { padding-left: 32px; }

/* 手机阅读时，目录从顶栏随时打开；面板停在底部导航上方。 */
.x-mobile-toc-trigger { display: none; }
.x-mobile-toc {
  position: fixed;
  inset: auto 12px calc(65px + env(safe-area-inset-bottom)) 12px;
  width: auto;
  max-width: 480px;
  max-height: min(65vh, 560px);
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--shadow);
}
.x-mobile-toc:popover-open { display: flex; }
.x-mobile-toc::backdrop { background: rgba(0, 0, 0, 0.32); }
.x-mobile-toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 8px 20px;
  border-bottom: 1px solid var(--border);
}
.x-mobile-toc-head .x-icon-button { width: 44px; height: 44px; }
.x-mobile-toc-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px 12px; }
.x-mobile-toc-list a {
  display: block;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-secondary);
  line-height: 24px;
}
.x-mobile-toc-list a[data-level="3"] { padding-left: 28px; }
.x-mobile-toc-list a[data-level="4"] { padding-left: 44px; }
.x-mobile-toc-list a:hover, .x-mobile-toc-list a.is-active { background: var(--hover); color: var(--text); text-decoration: none; }
@media (max-width: 499px) {
  .x-mobile-toc-trigger:not([hidden]) { display: flex; width: 44px; height: 44px; }
  .x-feed[data-mobile-toc-ready] .x-toc { display: none; }
}

/* 阅读时右栏固定在视口内：搜索和大纲在上，小组件在下方独立滚动，彼此不重叠 */
.x-outline { margin-bottom: 16px; background: var(--bg); }
.x-outline:first-child { margin-top: 12px; }
.x-outline[hidden] { display: none; }
.x-outline-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
}
.x-outline-toggle::-webkit-details-marker { display: none; }
.x-outline-toggle:hover { background: var(--hover); }
.x-outline-toggle iconify-icon { color: var(--text-secondary); transition: transform 0.2s var(--ease); }
.x-outline:not([open]) .x-outline-toggle iconify-icon { transform: rotate(-90deg); }
.x-outline-list {
  max-height: min(45vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 0 16px 12px;
}
@media (min-width: 1050px) {
  :root[data-reading] .x-aside {
    position: sticky;
    top: 0;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    padding-bottom: 0;
  }
  :root[data-reading] .x-search-wrap { position: relative; flex: none; }
  :root[data-reading] .x-outline { flex: none; }
  :root[data-reading] .x-aside-inner {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
  }
}
/* 有小节的章节右边一个小箭头，点了收起 / 展开它下面的小节 */
.x-outline-row { position: relative; }
.x-outline-row[hidden] { display: none; }
.x-outline-row.has-kids > a { padding-right: 34px; }
.x-outline-fold {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}
.x-outline-fold:hover { background: var(--hover); color: var(--text); }
.x-outline-fold iconify-icon { font-size: 18px; transition: transform 0.2s var(--ease); }
.x-outline-row.is-folded > .x-outline-fold iconify-icon { transform: rotate(-90deg); }
.x-outline-all {
  margin-left: auto;
  margin-right: 8px;
  padding: 2px 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 400;
  cursor: pointer;
}
.x-outline-all:hover { background: var(--hover); color: var(--text); }
.x-outline-list a {
  display: block;
  padding: 6px 8px 6px calc(10px + var(--indent, 0) * 14px);
  border-left: 2px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.933rem;
  line-height: 1.4;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.x-outline-list a:hover { color: var(--text); background: var(--hover); text-decoration: none; }
.x-outline-list a.is-active { color: var(--accent-text); border-left-color: var(--accent); font-weight: 700; }
/* 宽屏有了右栏大纲，正文里的目录就不重复了；窄屏没有右栏，照旧 */
@media (min-width: 1050px) {
  :root[data-reading] .x-toc { display: none; }
}

/* 普通文章的正文本来就有左右留白，目录再通栏会和正文对不齐，改成一张卡片 */
.x-toc--inline {
  margin: 16px 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
}

/* 字数与时长由 JS 填；没填上就连前面那个分隔点一起不显示 */
.x-meta-readtime:empty { display: none; }
.x-meta-readtime::before { content: "·"; margin-right: 6px; }

/* 无刷新切页时顶上那条细线：只在等接口的那一小会儿出现 */
.x-navload {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 2px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s var(--ease);
}
.x-navload.is-on { opacity: 1; }
.x-navload::before {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  background: var(--accent);
  animation: x-navload 0.9s var(--ease) infinite;
}
@keyframes x-navload {
  from { transform: translateX(-100%); }
  to { transform: translateX(350%); }
}

/* 换页的淡入淡出交给 View Transitions（浏览器不支持就直接换，只是少一层过渡）。
   X 的切换很快，默认的 250ms 显得拖沓，压到 180ms */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.18s; }

/* 关了动效的用户不做过渡 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .x-navload::before { animation: none; width: 100%; }
}

@media print {
  .x-navload { display: none; }
}

/* 阅读进度 */
.x-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  height: 3px;
  width: 0;
  background: var(--accent);
  transition: width 0.1s linear;
}

/* ------------------------------------------------------------- 打赏 */
.x-tip-bar {
  display: flex;
  justify-content: center;
  padding: 20px 16px;
  border-top: 1px solid var(--border);
}
.x-tip-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
}
.x-tip-btn iconify-icon { font-size: 1.15em; }

.x-tip-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  border-radius: 999px;
  background: var(--bg-subtle);
}
.x-tip-tab {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 0.933rem;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.x-tip-tab:hover { color: var(--text); }
.x-tip-tab.is-active { background: var(--bg); color: var(--text); box-shadow: var(--shadow); }

.x-tip-pane { display: none; text-align: center; }
.x-tip-pane.is-active { display: block; }
.x-tip-pane img {
  display: block;
  width: 220px;
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* 收款码基本都是白底黑块，深色背景下不铺白底会糊成一片 */
  background: #fff;
}
.x-tip-pane > span {
  display: block;
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 0.866rem;
}
.x-tip-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.x-tip-foot {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 0.866rem;
  text-align: center;
}

/* 系列：文章页顶上的那张卡片 */
.x-series {
  margin: 16px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  overflow: hidden;
}
.x-series-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.x-series-head:hover { text-decoration: none; background: var(--hover); }
.x-series-head > iconify-icon { color: var(--accent); font-size: 1.15em; }
.x-series-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.x-series-name small { color: var(--text-secondary); font-size: 0.733rem; line-height: 1.2; }
.x-series-name b {
  font-size: 0.966rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.x-series-pos { flex: none; color: var(--text-secondary); font-size: 0.8rem; }

.x-series-list { list-style: none; padding: 6px 0; margin: 0; }
.x-series-list li { display: flex; align-items: baseline; gap: 10px; padding: 5px 14px; }
.x-series-list li.is-current { background: var(--hover); }
.x-series-list li > a {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.933rem;
  line-height: 1.35;
}
.x-series-list li.is-current > a { color: var(--text); font-weight: 700; }
.x-series-list li.is-current > a:hover { text-decoration: none; cursor: default; }
.x-series-num {
  flex: none;
  min-width: 20px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.x-series-list li.is-current .x-series-num { color: var(--accent-text); font-weight: 700; }

/* 系列索引页 */
.x-series-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
}
.x-series-badge iconify-icon { color: var(--accent); }

.x-series-page { list-style: none; padding: 0; margin: 0; }
.x-series-page > li { border-bottom: 1px solid var(--border); }
.x-series-page > li > a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  color: var(--text);
}
.x-series-page > li > a:hover { text-decoration: none; background: var(--hover); }
.x-series-page .x-series-num {
  min-width: 28px;
  padding-top: 2px;
  color: var(--accent-text);
  font-size: 1.066rem;
  font-weight: 700;
  text-align: center;
}
.x-series-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.x-series-title { font-weight: 700; line-height: 1.3; }
.x-series-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 0.933rem;
  line-height: 1.35;
}
.x-series-meta { display: flex; gap: 6px; color: var(--text-secondary); font-size: 0.866rem; }

/* 媒体标签页：一格一篇，取封面，和图库的方格一个尺寸 */
.x-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.x-media-grid a {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg-input);
}
.x-media-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
/* 标题只在能悬停的设备上浮出来；X 的媒体格子本来什么字都不写 */
.x-media-grid-cap {
  position: absolute;
  inset: auto 0 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 24px 8px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.3;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
@media (hover: hover) {
  .x-media-grid a:hover img { transform: scale(1.04); }
  .x-media-grid a:hover .x-media-grid-cap { opacity: 1; }
}
.x-media-grid a:focus-visible .x-media-grid-cap { opacity: 1; }

/* --------------------------------------------------------- 个人主页 */
.x-profile-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;
  background: var(--bg-input);
  overflow: hidden;
}
.x-profile-banner img { width: 100%; height: 100%; object-fit: cover; }

.x-profile-body { padding: 12px 16px 16px; }
.x-profile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: calc(var(--avatar-lg) / -2 - 4px);
  margin-bottom: 12px;
}
.x-profile-avatar {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  border-radius: var(--avatar-radius);
  border: 4px solid var(--bg);
  object-fit: cover;
  background: var(--bg-input);
  /* 横幅是定位元素，头像不定位的话压在横幅上的那半截会被盖住 */
  position: relative;
  z-index: 1;
}
.x-profile-actions { display: flex; align-items: center; gap: 8px; margin-top: calc(var(--avatar-lg) / 2 + 4px); }

.x-profile-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1.4rem;
  line-height: 1.2;
}
.x-profile-handle { color: var(--text-secondary); }
.x-profile-bio { margin-top: 12px; line-height: 1.4; white-space: pre-wrap; }
.x-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 12px;
  color: var(--text-secondary);
}
.x-profile-meta span { display: inline-flex; align-items: center; gap: 4px; }
.x-profile-stats { display: flex; gap: 20px; margin-top: 12px; }
.x-profile-stats a, .x-profile-stats span { color: var(--text-secondary); }
.x-profile-stats strong { color: var(--text); }
.x-profile-stats a:hover { text-decoration: underline; }

/* --------------------------------------------------------- 探索 / 列表 */
.x-explore-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  transition: background-color 0.2s var(--ease);
}
.x-explore-row:hover { background: var(--hover); text-decoration: none; }
.x-explore-row-main { flex: 1; min-width: 0; }
.x-explore-row-title { font-weight: 700; }
.x-explore-row-sub { color: var(--text-secondary); font-size: 0.866rem; }
.x-explore-thumb {
  width: 68px;
  height: 68px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--bg-input);
  flex: 0 0 auto;
}
.x-explore-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 12px;
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 24px;
  flex: 0 0 auto;
}

.x-chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.x-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 9999px;
  color: var(--text);
  font-size: 0.933rem;
  transition: background-color 0.2s var(--ease);
}
.x-chip:hover { background: var(--hover-strong); text-decoration: none; }
.x-chip.is-active { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 700; }
.x-chip small { color: var(--text-secondary); }
.x-chip.is-active small { color: inherit; opacity: 0.7; }

/* 归档时间线。组头要吸在页头下面，页头高度由 JS 写进 --header-h */
.x-archive-group { border-bottom: 1px solid var(--border); }
.x-archive-head {
  position: sticky;
  top: var(--header-h, 53px);
  z-index: 10;
  padding: 8px 16px;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-weight: 700;
  color: var(--text-secondary);
  font-size: 0.933rem;
}

/* 图库 */
.x-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.x-photo-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  cursor: zoom-in;
  background: var(--bg-input);
}

/* --------------------------------------------------------- 空状态 */
.x-empty {
  padding: 32px 32px 48px;
  margin: 0 auto;
  max-width: 400px;
  text-align: left;
}
.x-empty h2 { font-size: 1.933rem; line-height: 1.2; margin-bottom: 8px; }
.x-empty p { color: var(--text-secondary); line-height: 1.4; margin-bottom: 20px; }

/* 加载中 */
.x-spinner {
  display: block;
  width: 29px;
  height: 29px;
  margin: 24px auto;
  border: 2px solid rgba(128, 128, 128, 0.25);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: x-spin 0.7s linear infinite;
}
@keyframes x-spin { to { transform: rotate(360deg); } }
/*
  无限滚动拿它当哨兵，所以它必须始终占一个盒子：display:none 的元素
  IntersectionObserver 永远不会判定为可见，整个自动加载就哑了。
  这里保留 1px 高度，只把里面的骨架屏按需显示。
*/
.x-loader { display: block; min-height: 1px; padding: 0; }
.x-loader .x-skeleton { display: none; }
.x-loader.is-active { padding: 8px 0 32px; }
.x-loader.is-active .x-skeleton { display: flex; }

.x-skeleton { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.x-skeleton-avatar { width: var(--avatar); height: var(--avatar); border-radius: var(--avatar-radius); background: var(--skeleton); flex: 0 0 auto; }
.x-skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.x-skeleton-line { height: 12px; border-radius: 6px; background: var(--skeleton); }
.x-skeleton-line:nth-child(2) { width: 90%; }
.x-skeleton-line:nth-child(3) { width: 60%; }
.x-skeleton, .x-skeleton-line, .x-skeleton-avatar { animation: x-pulse 1.4s ease-in-out infinite; }
@keyframes x-pulse { 50% { opacity: 0.45; } }

/* 分页（关掉无限滚动时用） */
.x-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}
.x-pagination span { color: var(--text-secondary); font-size: 0.933rem; }

/* 新帖提示 */
.x-new-posts {
  position: sticky;
  top: calc(var(--header-h, 106px) + 8px);
  z-index: 25;
  display: none;
  width: fit-content;
  margin: 8px auto;
  padding: 8px 16px;
  border-radius: 9999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  box-shadow: var(--shadow);
  animation: x-drop 0.3s var(--ease);
}
.x-new-posts.is-visible { display: block; }
@keyframes x-drop {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------- 弹层 */
.x-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--overlay);
}
.x-overlay.is-open { display: flex; }

.x-modal {
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow);
  animation: x-zoom 0.2s var(--ease);
}
@keyframes x-zoom {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.x-modal--sm { max-width: 400px; }

.x-modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 53px;
  padding: 0 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.x-modal-title { font-size: 1.266rem; }
.x-modal-body { padding: 16px 32px 32px; }
.x-modal-body--flush { padding: 0; }

.x-modal-lead { text-align: center; margin-bottom: 20px; }
.x-modal-lead h2 { font-size: 1.4rem; margin-bottom: 4px; }
.x-modal-lead p { color: var(--text-secondary); font-size: 0.866rem; }

.x-setting-group { margin-bottom: 24px; }
.x-setting-label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 0.866rem;
  font-weight: 700;
}

.x-font-scale {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--bg-subtle);
}
.x-font-scale small { font-size: 0.733rem; }
.x-font-scale big { font-size: 1.266rem; }
.x-font-scale input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}

.x-accent-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--bg-subtle);
}
.x-accent-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
}
.x-accent-dot iconify-icon { opacity: 0; }
.x-accent-dot.is-active iconify-icon { opacity: 1; }
.x-accent-dot[data-accent="yellow"] { color: #0f1419; }

.x-bg-row { display: flex; gap: 12px; padding: 16px; border-radius: var(--radius); background: var(--bg-subtle); }
.x-bg-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border: 2px solid transparent;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.866rem;
}
.x-bg-option.is-active { border-color: var(--accent); }
.x-bg-option[data-bg="light"] { background: #fff; color: #0f1419; }
.x-bg-option[data-bg="dim"] { background: #15202b; color: #f7f9f9; }
.x-bg-option[data-bg="dark"] { background: #000; color: #e7e9ea; }
.x-bg-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid #5c6e7e;
  border-radius: 50%;
  flex: 0 0 auto;
}
.x-bg-option.is-active .x-bg-check { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
.x-bg-check iconify-icon { opacity: 0; font-size: 14px; }
.x-bg-option.is-active .x-bg-check iconify-icon { opacity: 1; }

/* 快捷键表 */
.x-shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.x-shortcut-col h3 { margin-bottom: 8px; font-size: 1rem; }
.x-shortcut-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  color: var(--text-secondary);
  font-size: 0.933rem;
}
.x-shortcut-item b { color: var(--text); font-weight: 400; }
.x-shortcut-item kbd {
  padding: 1px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--text);
}

/* 菜单（三个点 / 分享） */
.x-menu {
  position: fixed;
  z-index: 110;
  display: none;
  min-width: 260px;
  padding: 4px 0;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.x-menu.is-open { display: block; }
.x-nav-menu { min-width: 240px; }
.x-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  color: var(--text);
  font-weight: 700;
  text-align: left;
  transition: background-color 0.2s var(--ease);
}
.x-menu-item:hover { background: var(--hover); text-decoration: none; }
.x-menu-item iconify-icon { font-size: 18.75px; flex: 0 0 auto; }
.x-menu-item--danger { color: #f4212e; }

/* 灯箱 */
.x-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
}
.x-lightbox.is-open { display: flex; }
.x-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  animation: x-zoom 0.2s var(--ease);
}
.x-lightbox-close,
.x-lightbox-prev,
.x-lightbox-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  border-radius: 50%;
  background: rgba(15, 20, 25, 0.75);
  color: #fff;
  font-size: 20px;
  transition: background-color 0.2s var(--ease);
}
.x-lightbox-close:hover,
.x-lightbox-prev:hover,
.x-lightbox-next:hover { background: rgba(39, 44, 48, 0.9); }
.x-lightbox-close { top: 16px; left: 16px; }
.x-lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.x-lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
.x-lightbox-counter {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.866rem;
  opacity: 0.8;
}

/* Toast */
.x-toast {
  position: fixed;
  left: 16px;
  right: 16px;
  width: fit-content;
  margin-inline: auto;
  bottom: 24px;
  z-index: 200;
  /* 不靠「往下挪出屏幕」来藏：手机上它浮在底栏上方，挪 200% 还在屏幕里 */
  transform: translateY(16px);
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(600px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 500;
  box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}
.x-toast.is-visible { transform: translateY(0); opacity: 1; visibility: visible; transition-delay: 0s; }
.x-toast a { color: inherit; text-decoration: underline; font-weight: 700; }

/* 搜索建议 */
.x-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  display: none;
  max-height: 60vh;
  overflow-y: auto;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow);
}
.x-suggest.is-open { display: block; }
.x-suggest-hint { padding: 20px 16px; color: var(--text-secondary); text-align: center; font-size: 0.933rem; }
.x-suggest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  color: var(--text);
  text-align: left;
}
.x-suggest-item:hover, .x-suggest-item.is-active { background: var(--hover); text-decoration: none; }
.x-suggest-item iconify-icon { color: var(--text-secondary); font-size: 18.75px; flex: 0 0 auto; }
.x-suggest-item-main { flex: 1; min-width: 0; }
.x-suggest-item-title {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x-suggest-item-sub {
  color: var(--text-secondary);
  font-size: 0.866rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x-suggest mark { background: none; color: var(--accent-text); font-weight: 700; }

/* --------------------------------------------------------- 评论区 */
/*
   Halo 的评论组件把 DOM 关在 Shadow Root 里，外部选择器进不去，官方留出来的
   定制入口只有 CSS 变量。所以这里做两件事：把变量整套映射到主题的色板，
   再在外面套一层 X 的回复区外壳（标题 + 发帖提示行）。
*/
.x-comments { border-top: 1px solid var(--border); }

.x-comments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 1.0666rem;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.x-comments-head small { color: var(--text-secondary); font-size: 0.866rem; font-weight: 400; }

/* 评论框上面那行「回复 @xxx」，纯装饰，点一下滚到真正的输入框 */
.x-reply-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.x-reply-prompt-text { flex: 1; min-width: 0; font-size: 1.0666rem; }
.x-reply-prompt-text b { color: var(--accent-text); font-weight: 400; }

.x-comments-widget { padding: 4px 16px 16px; }

/*
  变量名是从 comment-widget 3.1.2 的 shadow root 里扒出来的实名，前缀是
  --halo-cw-（不是 --halo-comment-widget-）。右边注释是组件自己的默认值，
  照着语义对到主题色板上，这样评论区能跟着背景、强调色、字号、头像形状一起变。
*/
.x-comments-widget {
  color: var(--text);

  --halo-cw-base-font-family: var(--font);
  --halo-cw-text-2-color: var(--text-secondary);
  /* 表情面板读的是裸 rgb 三元组，不是颜色值，所以各套背景单独给一组 --cw-rgb-* */
  --halo-cw-emoji-picker-rgb-background: var(--cw-rgb-bg);
  --halo-cw-emoji-picker-rgb-input: var(--cw-rgb-input);
  --halo-cw-emoji-picker-rgb-color: var(--cw-rgb-text);
  --halo-cw-emoji-picker-rgb-accent: var(--cw-rgb-accent);
  --halo-cw-emoji-picker-color-border: var(--border);
  --halo-cw-emoji-picker-color-border-over: var(--border-strong);
  --halo-cw-base-font-size: 1rem; /* 1rem —— 跟着「字号」滑杆走 */
  --halo-cw-base-rounded: 8px; /* 0.5em */

  --halo-cw-avatar-size: var(--avatar); /* 2.25em */
  --halo-cw-avatar-rounded: var(--avatar-radius); /* 9999px —— 跟着头像形状设置走 */

  --halo-cw-primary-1-color: var(--accent); /* #4CCBA0 按钮底/边框/文字 */
  --halo-cw-primary-3-color: color-mix(in srgb, var(--accent) 35%, transparent); /* #99F6E4 聚焦光晕 */

  --halo-cw-text-1-color: var(--text); /* #0f172a 正文 */
  --halo-cw-text-3-color: var(--text-secondary); /* #475569 次要文字 */

  --halo-cw-muted-1-color: var(--border-strong); /* #cbd5e1 最深的分隔/描边 */
  --halo-cw-muted-2-color: var(--bg-input); /* #e2e8f0 输入框与悬停底色 */
  --halo-cw-muted-3-color: var(--border); /* #f1f5f9 最浅的描边与底色 */
}

/* ---------------------------------------------------- 代码语法高亮 */
/*
   不拉 highlight.js 自带的配色文件，token 颜色自己写，这样三套背景下
   都能对上，也省一个 CDN 往返。
*/
.x-prose pre code.hljs { display: block; padding: 0; background: none; }
.x-prose .hljs-comment,
.x-prose .hljs-quote { color: var(--text-secondary); font-style: italic; }
.x-prose .hljs-keyword,
.x-prose .hljs-selector-tag,
.x-prose .hljs-literal,
.x-prose .hljs-doctag { color: #f91880; }
.x-prose .hljs-string,
.x-prose .hljs-regexp,
.x-prose .hljs-addition { color: #00ba7c; }
.x-prose .hljs-number,
.x-prose .hljs-built_in,
.x-prose .hljs-symbol,
.x-prose .hljs-bullet { color: #ff7a00; }
.x-prose .hljs-title,
.x-prose .hljs-section,
.x-prose .hljs-name,
.x-prose .hljs-selector-id,
.x-prose .hljs-selector-class { color: #1d9bf0; }
.x-prose .hljs-attr,
.x-prose .hljs-attribute,
.x-prose .hljs-variable,
.x-prose .hljs-template-variable,
.x-prose .hljs-type { color: #7856ff; }
.x-prose .hljs-meta,
.x-prose .hljs-deletion { color: #e0245e; }
.x-prose .hljs-emphasis { font-style: italic; }
.x-prose .hljs-strong { font-weight: 700; }

/* 暗底上把几个偏暗的色提亮一点，不然在夜间背景下糊成一团 */
:root[data-theme="dim"] .x-prose .hljs-keyword,
:root[data-theme="dark"] .x-prose .hljs-keyword,
:root[data-theme="dim"] .x-prose .hljs-selector-tag,
:root[data-theme="dark"] .x-prose .hljs-selector-tag,
:root[data-theme="dim"] .x-prose .hljs-literal,
:root[data-theme="dark"] .x-prose .hljs-literal { color: #ff6ba8; }
:root[data-theme="dim"] .x-prose .hljs-meta,
:root[data-theme="dark"] .x-prose .hljs-meta { color: #ff7a94; }
:root[data-theme="dim"] .x-prose .hljs-attr,
:root[data-theme="dark"] .x-prose .hljs-attr,
:root[data-theme="dim"] .x-prose .hljs-variable,
:root[data-theme="dark"] .x-prose .hljs-variable,
:root[data-theme="dim"] .x-prose .hljs-type,
:root[data-theme="dark"] .x-prose .hljs-type { color: #a48bff; }

/* 代码块右上角的语言标签 */
/* 代码块：主题自己画的框（initCodeBlocks）。顶栏 + 代码区 + 折叠时的「展开全部」 */
.x-code {
  margin: 1.5em 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  overflow: hidden;
}
.x-code-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 6px 0 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.8rem;
}
.x-code-lang {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.x-code-tools { display: flex; align-items: center; gap: 2px; }
.x-code-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 9999px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.x-code-btn iconify-icon { font-size: 1rem; }
.x-code-btn:hover { background: var(--hover-strong); color: var(--text); }
.x-code-btn[aria-pressed="true"] { color: var(--accent-text); }
.x-code-btn.is-done { color: var(--repost); }
/* shiki 插件往页面里塞了一条 pre:has(code) { filter: blur(10px) !important; padding: 1rem !important }，
   等它自己画完才撤；代码块改由主题画以后得明着盖掉，不然一直是糊的 */
.x-prose .x-code pre {
  filter: none !important;
  margin: 0;
  padding: 12px 0 14px !important; /* 左右留白放在每一行上，行尾滚到头也有留白 */
  border: 0;
  border-radius: 0;
  background: transparent;
}
/* 横向滚动条：不要系统那种带箭头的粗条。WebKit 内核画一根 6px 的细线，平时透明，鼠标移到代码块上才显出来；
   Firefox 只认 scrollbar-width / scrollbar-color——Chrome 121 以后一旦设了这两个就不认 ::-webkit-scrollbar，
   又变回带箭头的样子，所以只给不支持 ::-webkit-scrollbar 的浏览器设 */
.x-prose .x-code pre::-webkit-scrollbar { height: 6px; }
.x-prose .x-code pre::-webkit-scrollbar-track { background: transparent; }
.x-prose .x-code pre::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.x-prose .x-code pre::-webkit-scrollbar-thumb { border-radius: 3px; background: transparent; }
.x-prose .x-code:hover pre::-webkit-scrollbar-thumb { background: var(--border-strong); }
@supports not selector(::-webkit-scrollbar) {
  .x-prose .x-code pre { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
}
.x-prose .x-code pre code { display: block; width: max-content; min-width: 100%; }
.x-code-line { display: block; min-height: 1.6em; padding: 0 16px; }
/* 行号：用计数器画在每行前面，横着滚的时候跟着代码一起走（Chrome 里钉住的行号会被同一行的文字压在底下，
   试过 sticky + z-index 不管用）；自动换行时折下来的那几截对齐正文，不对齐行号 */
.x-code.has-lines code { counter-reset: x-line; }
.x-code.has-lines .x-code-line { padding-left: 4em; }
.x-code.has-lines .x-code-line::before {
  counter-increment: x-line;
  content: counter(x-line);
  display: inline-block;
  width: 3em;
  margin-left: -4em;
  margin-right: 1em;
  text-align: right;
  color: var(--text-secondary);
  opacity: 0.55;
  user-select: none;
  -webkit-user-select: none;
}
.x-prose .x-code.is-wrap pre code { width: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
/* 超过 30 行先露 18 行，底下渐隐 */
.x-code.is-folded pre {
  max-height: calc(1.6em * 18 + 26px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent);
  mask-image: linear-gradient(to bottom, #000 65%, transparent);
}
.x-code-more {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  color: var(--accent-text);
  font-size: 0.866rem;
  text-align: center;
  transition: background-color 0.2s var(--ease);
}
.x-code-more:hover { background: var(--hover); }

/* ---------------------------------------------------- 搜索结果页 */
.x-search-results { min-height: 200px; }
.x-search-result {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  transition: background-color 0.2s var(--ease);
}
.x-search-result:hover { background: var(--hover); text-decoration: none; }
.x-search-result-title { font-weight: 700; margin-bottom: 2px; }
.x-search-result-meta { color: var(--text-secondary); font-size: 0.866rem; }
.x-search-result-excerpt {
  margin-top: 4px;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.x-search-result mark { background: none; color: var(--accent-text); font-weight: 700; }

.x-search-summary {
  padding: 12px 16px;
  color: var(--text-secondary);
  font-size: 0.866rem;
  border-bottom: 1px solid var(--border);
}

/* --------------------------------------------------------- 移动端 */
.x-mobile-top {
  display: none;
  position: sticky;
  top: 0;
  z-index: 40;
  align-items: center;
  gap: 16px;
  min-height: 53px;
  padding: 0 16px;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.x-mobile-top .x-logo { margin: 0 auto; width: 40px; height: 40px; }

.x-tabbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  align-items: center;
  justify-content: space-around;
  /* 不能写死 height：全局是 border-box，安全区的 padding 会被算进这 53px 里，
     iPhone 上图标会被挤到上面十几个像素里 */
  min-height: 53px;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}
.x-tabbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 53px;
  color: var(--text);
  font-size: 26px;
}
.x-tabbar a.is-active iconify-icon { color: var(--text); }
.x-tabbar a:not(.is-active) { color: var(--text-secondary); }

.x-fab {
  display: none;
  position: fixed;
  right: 16px;
  bottom: calc(69px + env(safe-area-inset-bottom));
  z-index: 50;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.x-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
}
.x-drawer.is-open { display: block; }
.x-drawer-scrim { position: absolute; inset: 0; background: var(--overlay); }
.x-drawer-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 300px;
  max-width: 80vw;
  height: 100%;
  overflow-y: auto;
  background: var(--bg);
  animation: x-slide 0.25s var(--ease);
}
@keyframes x-slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.x-drawer-panel .x-nav-link { width: 100%; }
.x-drawer-panel .x-nav-link span { display: block; }

.x-drawer-head { padding: 16px 16px 12px; }
.x-avatar--xl { --avatar: 56px; }
.x-drawer-name {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 1.133rem;
  font-weight: 800;
}
.x-drawer-handle { color: var(--text-secondary); }
.x-drawer-stats { display: flex; gap: 20px; margin-top: 12px; }
.x-drawer-stats a { color: var(--text-secondary); font-size: 0.933rem; }
.x-drawer-stats strong { color: var(--text); }
.x-drawer-stats a:hover { text-decoration: underline; }

.x-drawer-nav { padding: 0 8px; }

.x-drawer-divider { height: 1px; margin: 8px 16px; background: var(--border); }

.x-drawer-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  font-size: 1.0666rem;
  font-weight: 700;
  text-align: left;
}
.x-drawer-section-toggle iconify-icon {
  color: var(--text-secondary);
  font-size: 20px;
  transition: transform 0.2s var(--ease);
}
.x-drawer-section.is-open .x-drawer-section-toggle iconify-icon { transform: rotate(180deg); }
.x-drawer-section-body { display: none; padding: 0 8px 8px; }
.x-drawer-section.is-open .x-drawer-section-body { display: block; }
.x-drawer-section-body .x-nav-link { font-size: 1rem; }
.x-drawer-section-body .x-nav-link iconify-icon { font-size: 20px; }

.x-drawer-foot {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
}

/* 500–702px：左栏再收窄一档，给中栏腾地方（702 = 88 + 600 + 滚动条） */
@media (max-width: 702px) {
  :root { --nav-w-compact: 68px; }
}

@media (max-width: 499px) {
  .x-nav { display: none; }
  /* 顶上只留一行：根页面是头像栏（标题行让位），其它页面是「返回 + 标题」 */
  .x-mobile-top ~ .x-header { top: 53px; }
  .x-mobile-top ~ .x-header .x-header-bar { display: none; }
  .x-mobile-top ~ .x-header .x-header-search { padding-top: 8px; }
  /* 手机上发帖走右下角的悬浮按钮，时间线顶上的发帖框让给内容 */
  .x-compose { display: none; }
  .x-feed { max-width: 100%; border-left: 0; border-right: 0; }
  .x-shell { padding-bottom: calc(53px + env(safe-area-inset-bottom)); }
  .x-mobile-top { display: flex; }
  .x-tabbar { display: flex; }
  .x-fab { display: flex; }
  .x-toast { bottom: calc(53px + 16px + env(safe-area-inset-bottom)); }
  .x-action-icon { width: 30px; height: 30px; font-size: 17px; }
  .x-action { font-size: 0.8rem; }

  /* 往下翻的时候把上下两条栏收起来，往上一拨再出来（html.is-chrome-hidden 由 theme.js 切） */
  .x-mobile-top,
  .x-mobile-top ~ .x-header,
  .x-tabbar,
  .x-fab { transition: transform 0.25s var(--ease); will-change: transform; }
  .x-archive-head, .x-new-posts { transition: top 0.25s var(--ease); }
  .is-chrome-hidden .x-mobile-top { transform: translateY(-100%); }
  .is-chrome-hidden .x-mobile-top ~ .x-header { transform: translateY(calc(-100% - 53px)); }
  .is-chrome-hidden .x-tabbar { transform: translateY(100%); }
  .is-chrome-hidden .x-fab { transform: translateY(calc(53px + env(safe-area-inset-bottom))); }
}

@media (max-width: 499px) {
  .x-tweet { padding: 12px; }
  .x-header-bar { padding: 0 12px; }
  .x-modal-body { padding: 16px; }
  .x-shortcut-grid { grid-template-columns: 1fr; }
  :root { --avatar-lg: 90px; }
  .x-detail-title { font-size: 1.333rem; }
  .x-profile-actions { margin-top: calc(var(--avatar-lg) / 2 + 4px); }
}

/* 打印时只留正文 */
@media print {
  /* 色板不在媒体查询里，夜间/暗淡主题下不重置的话正文是浅灰，打出来几乎看不见 */
  :root,
  :root[data-theme="dim"],
  :root[data-theme="dark"] {
    --bg: #fff;
    --bg-elevated: #fff;
    --bg-subtle: #fff;
    --bg-input: #fff;
    --text: #000;
    --text-secondary: #333;
    --border: #ccc;
    --border-strong: #999;
    --accent-text: #000;
    color-scheme: light;
  }
  .x-prose pre,
  .x-prose table { white-space: pre-wrap; word-break: break-word; max-width: 100%; }
  /* 代码高亮的颜色写死在规则里，色板重置管不到，打印时一律用浅底那套 */
  .x-prose .hljs-string,
  .x-prose .hljs-regexp,
  .x-prose .hljs-addition { color: #067d54; }
  .x-prose .hljs-number,
  .x-prose .hljs-built_in,
  .x-prose .hljs-symbol,
  .x-prose .hljs-bullet { color: #b35900; }
  .x-prose .hljs-title,
  .x-prose .hljs-section,
  .x-prose .hljs-name,
  .x-prose .hljs-selector-id,
  .x-prose .hljs-selector-class { color: #0b6bb5; }
  .x-prose .hljs-keyword,
  .x-prose .hljs-selector-tag,
  .x-prose .hljs-literal,
  .x-prose .hljs-doctag { color: #c4126a; }
  .x-prose .hljs-comment,
  .x-prose .hljs-quote { color: #555; }
  /* 色板不在媒体查询里，夜间/暗淡主题下不重置的话正文是浅灰，打出来几乎看不见 */
  :root,
  :root[data-theme="dim"],
  :root[data-theme="dark"] {
    --bg: #fff;
    --bg-elevated: #fff;
    --bg-subtle: #fff;
    --bg-input: #fff;
    --text: #000;
    --text-secondary: #333;
    --border: #ccc;
    --border-strong: #999;
    --accent-text: #000;
    color-scheme: light;
  }
  .x-prose pre,
  .x-prose table { white-space: pre-wrap; word-break: break-word; max-width: 100%; }
  /* 代码高亮的颜色写死在规则里，色板重置管不到，打印时一律用浅底那套 */
  .x-prose .hljs-string,
  .x-prose .hljs-regexp,
  .x-prose .hljs-addition { color: #067d54; }
  .x-prose .hljs-number,
  .x-prose .hljs-built_in,
  .x-prose .hljs-symbol,
  .x-prose .hljs-bullet { color: #b35900; }
  .x-prose .hljs-title,
  .x-prose .hljs-section,
  .x-prose .hljs-name,
  .x-prose .hljs-selector-id,
  .x-prose .hljs-selector-class { color: #0b6bb5; }
  .x-prose .hljs-keyword,
  .x-prose .hljs-selector-tag,
  .x-prose .hljs-literal,
  .x-prose .hljs-doctag { color: #c4126a; }
  .x-prose .hljs-comment,
  .x-prose .hljs-quote { color: #555; }
  .x-nav, .x-aside, .x-tabbar, .x-fab, .x-header, .x-actions,
  .x-comments, .x-post-nav, .x-mobile-top, .x-progress { display: none !important; }
  .x-feed { max-width: none; border: 0; }
  body { background: #fff; color: #000; }
}

/* 浅色背景下的代码高亮：原来那组亮色在 #f7f9f9 上只有 2.4–3.6:1，压暗到 4.5:1 以上 */
:root:not([data-theme="dim"]):not([data-theme="dark"]) .x-prose .hljs-string,
:root:not([data-theme="dim"]):not([data-theme="dark"]) .x-prose .hljs-regexp,
:root:not([data-theme="dim"]):not([data-theme="dark"]) .x-prose .hljs-addition { color: #067d54; }
:root:not([data-theme="dim"]):not([data-theme="dark"]) .x-prose .hljs-number,
:root:not([data-theme="dim"]):not([data-theme="dark"]) .x-prose .hljs-built_in,
:root:not([data-theme="dim"]):not([data-theme="dark"]) .x-prose .hljs-symbol,
:root:not([data-theme="dim"]):not([data-theme="dark"]) .x-prose .hljs-bullet { color: #b35900; }
:root:not([data-theme="dim"]):not([data-theme="dark"]) .x-prose .hljs-title,
:root:not([data-theme="dim"]):not([data-theme="dark"]) .x-prose .hljs-section,
:root:not([data-theme="dim"]):not([data-theme="dark"]) .x-prose .hljs-name,
:root:not([data-theme="dim"]):not([data-theme="dark"]) .x-prose .hljs-selector-id,
:root:not([data-theme="dim"]):not([data-theme="dark"]) .x-prose .hljs-selector-class { color: #0b6bb5; }
:root:not([data-theme="dim"]):not([data-theme="dark"]) .x-prose .hljs-keyword,
:root:not([data-theme="dim"]):not([data-theme="dark"]) .x-prose .hljs-selector-tag,
:root:not([data-theme="dim"]):not([data-theme="dark"]) .x-prose .hljs-literal,
:root:not([data-theme="dim"]):not([data-theme="dark"]) .x-prose .hljs-doctag { color: #c4126a; }