/* lynux 0.8.1 —— 结构与组件规则（X19 token 化 → X20 内容层 → X22 后台首页外壳）
 *
 * 本文件不出现任何颜色字面量（#hex / rgb() / hsl()）：颜色一律走 tokens.css 的
 * --lx-* 变量，主题切换只改 themes.css 的变量值。契约测试会静态断言这一点。
 *
 * 外壳（对齐 Hermes Dashboard）：左侧导航（页内锚点）+ 右侧主区（顶栏 / 面板网格 / 页脚）。
 * 内容构件：面板 = surface-1 + 1px 描边 + radius-lg；面板里是等宽数字的指标格。
 * 数学出口（data-layout / data-attention-band / data-band）仍由服务端算好，这里只消费。
 */

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

html {
  font-family: var(--lx-font-sans);
  font-size: var(--lx-base);
  line-height: var(--lx-leading);
  letter-spacing: var(--lx-tracking);
  color: var(--lx-fg);
  background: var(--lx-bg);
}

body {
  margin: 0;
  min-height: 100vh;
}

/* 焦点可见性：用主题光晕色，而不是浏览器默认色（暗底上默认蓝框几乎看不见） */
/* X57：半透明光晕做焦点环，五档实测最低 1.43:1（浅白档基本看不见键盘焦点）；
   改用不透明正文色，浅白 15.8:1、深色档 14:1 以上。 */
:focus-visible {
  outline: 2px solid var(--lx-fg);
  outline-offset: 2px;
}

/* ---------- 外壳：左侧导航 + 右侧主区 ---------- */

.lx-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  /* X31：整页不滚 —— 页眉与页脚是框架行，只有 .lx-canvas 自己滚 */
  height: 100vh;
  overflow: hidden;
}

.lx-side {
  display: flex;
  flex-direction: column;
  gap: calc(0.75rem * var(--lx-space));
  height: 100vh;
  /* 导航多到放不下时侧栏自己滚，不把整页顶起来 */
  overflow-y: auto;
  padding: calc(1.25rem * var(--lx-space)) calc(1rem * var(--lx-space));
  background: var(--lx-surface-1);
  border-right: 1px solid var(--lx-border);
}

.lx-brand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.lx-brand-mark {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lx-fg);
  text-decoration: none;
}

.lx-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.lx-nav-item,
.lx-side-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--lx-radius-sm);
  color: var(--lx-fg-2);
  font-size: 0.8125rem;
  text-decoration: none;
}

.lx-nav-item:hover,
.lx-side-link:hover {
  background: var(--lx-surface-3);
  color: var(--lx-fg);
}

/* X79：侧栏底部两个出口——回首页 / 退出；贴底放置，按钮长得和导航项一致 */
/* ---------- 0.25.2：布局密度切换（侧栏底部） ----------
   两档：舒适（comfortable，默认）/ 紧凑（compact）。按钮提交到 /admin/ui/density，
   服务端写 cookie 后 303 回原页；当前档位用 is-on + aria-pressed 标记。 */
.lx-density {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: calc(0.75rem * var(--lx-space));
  border-top: 1px solid var(--lx-border);
}

.lx-density-label {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--lx-fg-3);
}

.lx-density-seg {
  display: inline-flex;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-control);
  overflow: hidden;
}

.lx-density-btn {
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 0.28rem 0.6rem;
  border: 0;
  background: transparent;
  color: var(--lx-fg-3);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.lx-density-btn:hover {
  color: var(--lx-fg);
  background: var(--lx-surface-2);
}

.lx-density-btn.is-on {
  color: var(--lx-bg-base);
  background: var(--lx-accent);
}

.lx-side-actions {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-top: auto;
  padding-top: calc(0.6rem * var(--lx-space));
  border-top: 1px solid var(--lx-border);
}

.lx-side-logout {
  margin: 0;
}

.lx-side-link-btn {
  width: 100%;
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.lx-nav-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* 导航图标：颜色只跟 color 走（currentColor），因此两套主题自动同色 */
.lx-nav-ico {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: var(--lx-fg-3);
  transition: color 120ms ease;
}

.lx-nav-item:hover .lx-nav-ico,
.lx-nav-item:focus-visible .lx-nav-ico,
.lx-side-link:hover .lx-nav-ico,
.lx-side-link:focus-visible .lx-nav-ico {
  color: var(--lx-fg);
}

@media (prefers-reduced-motion: reduce) {
  .lx-nav-ico {
    transition: none;
  }
}

/* 0.19.0：分组标题（观测 / 工具）与当前页标记 */
.lx-nav-group {
  margin: 0.5rem 0 0.125rem;
  padding: 0 0.5rem;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lx-fg-4);
}

.lx-nav-group:first-child {
  margin-top: 0;
}

.lx-nav-item[aria-current="page"] {
  background: var(--lx-surface-3);
  color: var(--lx-fg);
}

.lx-nav-item[aria-current="page"] .lx-nav-ico {
  color: var(--lx-fg);
}

.lx-main {
  /* 页眉 auto / 主体 1fr / 页脚 auto：中间行才滚 */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  min-height: 0;
  min-width: 0;
  padding: 0 calc(1.5rem * var(--lx-space));
}

/* ---------- X25 背景栈：五层，对齐 dashboard 的 Backdrop ---------- */

.lx-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.lx-layer {
  position: absolute;
  inset: 0;
}

/* z1 canvas：底色。上游这一层带 mix-blend-mode: difference（配合 z200 的反色层做
   LENS_5I 浅色画布）；我们没有反色画布，同色 difference 会折成纯黑，所以这里直接铺色。 */
.lx-layer-canvas {
  background: var(--lx-bg);
}

/* z2 filler：上游是一张真实位图（@nous-research/ui 的 filler-bg0.webp，MIT），
   <img> 1024×1024，invert，object-cover top-left，高度 150dvh；容器 opacity 0.033 + difference。 */
.lx-layer-filler {
  overflow: hidden;
  opacity: var(--lx-filler);
  mix-blend-mode: difference;
}

.lx-filler-img {
  display: block;
  height: 150dvh;
  width: auto;
  min-width: 100vw;
  object-fit: cover;
  object-position: top left;
  filter: invert(1);
}

/* z99 warm vignette：左上暖角 */
.lx-layer-glow {
  background: radial-gradient(ellipse at 0% 0%, transparent 60%, var(--lx-glow) 100%);
  opacity: var(--lx-vignette);
  mix-blend-mode: lighten;
}

/* z200 FG inversion：上游用 var(--foreground) + difference 把整页反成浅色。
   LENS_0 下它是 alpha 0 的空操作；保留这个接缝，将来做反色主题时在这里接。 */
.lx-layer-invert {
  background: var(--lx-overlay);
  mix-blend-mode: difference;
}

/* z201 noise：feTurbulence 颗粒，color-dodge，0.55 × --lx-noise（X27 未改动这一层） */
.lx-layer-noise {
  /* X57：位图/混合模式/透明度全部来自 token，app.css 零颜色字面量（含 %23） */
  background-image: var(--lx-noise-img);
  background-size: 512px 512px;
  mix-blend-mode: var(--lx-noise-blend);
  opacity: calc(var(--lx-noise-alpha) * var(--lx-noise));
}

/* 降低动态/低性能环境关掉颗粒（上游 useGpuTier 的等价物，纯 CSS 版） */
@media (prefers-reduced-motion: reduce) {
  .lx-layer-noise {
    opacity: 0;
  }
}

/* ---------- 登录页（X26/X31）：页眉页脚固定，中间一条窄栏可滚 ---------- */

.lx-login-body {
  /* 三行：页眉 / 主体（唯一滚动容器）/ 页脚 */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* X57：移动浏览器 100vh 取最大视口，页脚会落到可视区外；dvh 才跟可视高度走。 */
  height: 100dvh;
  overflow: hidden;
}

.lx-login-top,
.lx-login-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: calc(0.6rem * var(--lx-space)) calc(1.25rem * var(--lx-space));
}

.lx-login-top {
  border-bottom: 1px solid var(--lx-border);
}

.lx-login-foot {
  border-top: 1px solid var(--lx-border);
  font-size: 0.6875rem;
  color: var(--lx-fg-3);
}

.lx-login {
  position: relative;
  z-index: 1;
  display: grid;
  /* safe center：内容不足时居中，超出时从顶部开始排（不会把顶部切掉） */
  align-content: center;
  align-content: safe center;
  justify-items: center;
  gap: calc(0.75rem * var(--lx-space));
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
  padding: calc(1.25rem * var(--lx-space)) calc(1.25rem * var(--lx-space));
}

.lx-login-form {
  width: min(21rem, 100%);
  display: flex;
  flex-direction: column;
  gap: calc(0.5rem * var(--lx-space));
  padding: calc(1.25rem * var(--lx-space));
  background: color-mix(in srgb, var(--lx-surface-2) 62%, transparent);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-lg);
  backdrop-filter: blur(6px);
}

.lx-login-brand {
  font-family: var(--lx-font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lx-login-sub {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lx-fg-3);
}

.lx-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.lx-field-k {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lx-fg-3);
}

.lx-field-v {
  padding: 0.4rem 0.5rem;
  font-family: var(--lx-font-mono);
  font-size: 0.8125rem;
  color: var(--lx-fg);
  background: var(--lx-surface-1);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
}

.lx-field-v:disabled {
  opacity: 0.55;
}

.lx-login-btn {
  margin-top: 0.25rem;
  padding: 0.45rem 0.75rem;
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lx-bg);
  background: var(--lx-fg-2);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
}

.lx-login-btn:disabled {
  opacity: 0.55;
}

.lx-login-error {
  margin: 0 0 0.25rem;
  padding: 0.4rem 0.5rem;
  font-size: 0.75rem;
  /* X57：danger 文字叠 14% danger 底，深色档只有 2.81:1；改成中性底 + 左侧色条，
     文字用正文色（danger 只用于边框/图标）。 */
  color: var(--lx-fg);
  background: var(--lx-surface-3);
  border: 0;
  border-inline-start: 3px solid var(--lx-danger);
  border-radius: var(--lx-radius-sm);
}

.lx-login-note {
  margin: 0.25rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--lx-fg-3);
}

.lx-login-layers {
  width: min(21rem, 100%);
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--lx-font-mono);
  font-size: 0.625rem;
  color: var(--lx-fg-4);
}

.lx-login-meta {
  font-size: 0.6875rem;
  color: var(--lx-fg-3);
}

.lx-login-back {
  color: var(--lx-fg-2);
}

/* ---------- 页头：标题 + 说明 + 状态芯片 ---------- */

.lx-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem calc(1rem * var(--lx-space));
  min-height: var(--lx-header);
  padding: calc(1.25rem * var(--lx-space)) 0 calc(0.75rem * var(--lx-space));
  border-bottom: 1px solid var(--lx-border);
}

.lx-head-titles {
  min-width: 0;
}

.lx-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lx-sub {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--lx-fg-3);
}

/* ---------- 内容区：面板网格 ---------- */

.lx-canvas {
  display: grid;
  gap: calc(1rem * var(--lx-space));
  align-content: start;
  /* 唯一滚动容器：内容在自己这一格里上下滚，页眉页脚不动 */
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
  padding: calc(1rem * var(--lx-space)) 0 calc(2rem * var(--lx-space));
}

.lx-panel {
  padding: calc(1rem * var(--lx-space));
  background: var(--lx-surface-1);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-lg);
}

.lx-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  margin-bottom: calc(0.75rem * var(--lx-space));
}

.lx-panel-title {
  margin: 0;
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lx-fg-2);
}

.lx-panel-kicker {
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  color: var(--lx-fg-4);
}

/* 指标格：数字一律等宽，标签用大写小字（dashboard 最容易辨认的特征） */
.lx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.5rem;
}

.lx-stat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0.625rem;
  background: var(--lx-surface-2);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-md);
}

.lx-stat-k {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lx-fg-3);
}

.lx-stat-v {
  font-family: var(--lx-font-mono);
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  color: var(--lx-fg);
}

.lx-stat-h {
  font-size: 0.6875rem;
  color: var(--lx-fg-4);
}

/* ---------- 内容块卡片 ---------- */

.lx-cards {
  display: block;
}

.lx-card {
  padding: calc(0.875rem * var(--lx-space)) calc(1rem * var(--lx-space));
  margin: 0 0 calc(0.75rem * var(--lx-space));
  background: var(--lx-surface-2);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-md);
}

.lx-card:last-child {
  margin-bottom: 0;
}

.lx-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0 0 0.5rem;
}

.lx-tag {
  padding: 0 0.4rem;
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  color: var(--lx-fg-3);
  background: var(--lx-surface-3);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
}

.lx-card-text {
  margin: 0;
}

/* ---------- 空态：不留白面板，给一句可读的说明 ---------- */

.lx-empty {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--lx-fg-3);
}

/* ---------- 页脚：一行元信息（含实际生效的 theme/density） ---------- */

.lx-foot {
  /* X78：三栏网格——版权条在正中间，右侧是账号出口；有没有右侧内容都不动中线 */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 0.75rem;
  min-height: var(--lx-footer);
  padding-top: calc(0.75rem * var(--lx-space));
  border-top: 1px solid var(--lx-border);
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
  color: var(--lx-fg-3);
}

.lx-foot-copy {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  text-align: center;
}

.lx-foot-side {
  grid-column: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  min-width: 0;
}

.lx-foot-name {
  font-family: var(--lx-font-brand);
  letter-spacing: 0.06em;
  color: var(--lx-fg-2);
}

.lx-foot-sep {
  color: var(--lx-fg-4);
}

.lx-mark {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  color: var(--lx-accent-text);
  vertical-align: -0.15em;
}

/* 窄屏：三栏网格收成一列，版权条在上、账号出口在下（都居中） */
@media (max-width: 640px) {
  .lx-foot {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.35rem;
  }

  .lx-foot-copy,
  .lx-foot-side {
    grid-column: 1;
    justify-content: center;
  }
}

/* X35：页脚右侧的「谁登录了 / 退出登录」出口（认证开启且有身份时才渲染） */
.lx-who {
  color: var(--lx-fg-3);
  font-size: 0.75rem;
}

.lx-who-link {
  color: var(--lx-fg-2);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.lx-who-link:hover,
.lx-who-link:focus-visible {
  color: var(--lx-fg);
}

/* X53：登出改成带 token 的表单按钮，外观仍与文字链接一致 */
.lx-logout {
  display: inline;
  margin: 0;
}

.lx-logout button,
.lx-logout-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ---------- §11.7 layout*：data-layout 的三种版面（作用在「内容块」上） ---------- */

/* stack：逐块纵向铺满（默认） */
[data-layout="stack"] .lx-cards {
  display: block;
}

/* grid：两列网格 */
[data-layout="grid"] .lx-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(0.75rem * var(--lx-space));
  align-items: start;
}

[data-layout="grid"] .lx-card {
  margin: 0;
}

/* compact：折叠成单行摘要；V_i 落在哪个档位就映射到哪一级透明度（服务端算好 band） */
[data-layout="compact"] .lx-card {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.35rem;
}

[data-layout="compact"] .lx-card-meta {
  margin-bottom: 0.25rem;
}

[data-layout="compact"] .lx-card-text {
  font-size: 0.875rem;
}

[data-layout="compact"] .lx-card[data-band="1"] { opacity: 0.5; }
[data-layout="compact"] .lx-card[data-band="2"] { opacity: 0.65; }
[data-layout="compact"] .lx-card[data-band="3"] { opacity: 0.8; }
[data-layout="compact"] .lx-card[data-band="4"] { opacity: 0.9; }
[data-layout="compact"] .lx-card[data-band="5"] { opacity: 1; }

/* 注意力 R：按档位调整顶栏留白（R 低 → 更紧凑；数值带由服务端算好） */
[data-attention-band="1"] .lx-head { padding-bottom: 0.5rem; }
[data-attention-band="2"] .lx-head { padding-bottom: 0.75rem; }
[data-attention-band="3"] .lx-head { padding-bottom: 1rem; }
[data-attention-band="4"] .lx-head { padding-bottom: 1.25rem; }

/* ---------- 窄屏：导航折到顶部，并退回整页滚动 ---------- */

@media (max-width: 900px) {
  .lx-shell {
    grid-template-columns: 1fr;
    /* 窄屏没有"固定框架"的必要：一屏放不下一栏 + 主体，改回整页滚 */
    height: auto;
    overflow: visible;
  }

  .lx-main {
    height: auto;
  }

  .lx-canvas {
    overflow-y: visible;
  }

  /* X57：登录页也要退回整页滚动，否则页脚（含退出/返回）在移动端不可达 */
  .lx-login-body {
    height: auto;
    overflow: visible;
  }

  .lx-side {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--lx-border);
  }

  .lx-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  }

/* X57：长不可断 token（objective.calibrate 之类的分布串）不得把统计卡片撑出横向滚动 */
.lx-stat-v,
.lx-stat-h {
  overflow-wrap: anywhere;
}

/* ---------- 0.18.0 上传页（X59）：单列卡片，全部走 token ---------- */

.lx-upload-card {
  display: grid;
  gap: 0.9rem;
  width: min(46rem, 100%);
  margin: 0 auto;
  padding: 1.25rem;
  background: var(--lx-surface-1);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
}

.lx-upload-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.lx-upload-drop {
  display: grid;
  gap: 0.35rem;
  padding: 1.6rem 1rem;
  text-align: center;
  border: 1px dashed var(--lx-border);
  border-radius: var(--lx-radius);
  cursor: pointer;
}

.lx-upload-card.is-dragging .lx-upload-drop,
.lx-upload-drop:hover {
  border-color: var(--lx-fg-3);
  background: var(--lx-surface-2);
}

.lx-upload-drop:focus-within {
  outline: 2px solid var(--lx-fg);
  outline-offset: 2px;
}

.lx-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.lx-upload-drop-title {
  font-size: 0.9375rem;
  color: var(--lx-fg);
}

.lx-upload-drop-hint {
  font-size: 0.75rem;
  color: var(--lx-fg-3);
}

.lx-upload-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--lx-fg-2);
}

.lx-upload-total b {
  font-variant-numeric: tabular-nums;
  color: var(--lx-fg);
}

.lx-upload-actions {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.lx-upload-pool {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) auto minmax(6rem, 1.2fr) auto auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.45rem 0.55rem;
  font-size: 0.8125rem;
  background: var(--lx-surface-2);
  border-radius: var(--lx-radius-sm);
}

.lx-upload-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lx-upload-meta {
  color: var(--lx-fg-3);
  font-variant-numeric: tabular-nums;
}

.lx-upload-row-bar,
.lx-upload-bar {
  height: 0.4rem;
  overflow: hidden;
  background: var(--lx-surface-4);
  border-radius: 999px;
}

.lx-upload-row-bar i,
.lx-upload-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--lx-fg-3);
  transition: width 0.15s linear;
}

.lx-upload-status {
  color: var(--lx-fg-3);
  white-space: nowrap;
}

.lx-upload-row[data-state="stored"] .lx-upload-status {
  color: var(--lx-ok);
}

.lx-upload-row[data-state="duplicate"] .lx-upload-status {
  color: var(--lx-warn);
}

.lx-upload-row[data-state="failed"] .lx-upload-status {
  color: var(--lx-danger);
}

.lx-upload-overall {
  display: grid;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: var(--lx-fg-2);
}

.lx-upload-empty {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--lx-fg-3);
}

@media (prefers-reduced-motion: reduce) {
  .lx-upload-row-bar i,
  .lx-upload-bar i {
    transition: none;
  }
}

@media (max-width: 640px) {
  .lx-upload-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .lx-upload-row-bar {
    grid-column: 1 / -1;
  }
}

/* ---------- 0.19.0 文本编辑器（X62）：左源码 / 右预览，全 token ---------- */

.lx-canvas-editor {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  min-height: 0;
  padding-bottom: calc(0.75rem * var(--lx-space));
}

.lx-editor {
  position: relative;
  /* 0.24.0（X91）：原先是三行 grid，但表单里有 5 个子块（文档条 / 工具条 / 状态 /
     双栏 / 保存条），第 3 行 1fr 落到「状态」上，编辑区被挤到页面底部。
     改 flex：任何条数都成立，编辑区自己吃剩余高度。 */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  height: 100%;
}

.lx-editor-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.lx-editor-modes {
  display: inline-flex;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
  overflow: hidden;
}

.lx-editor-mode {
  padding: 0.25rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--lx-fg-3);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.lx-editor-mode[aria-pressed="true"] {
  background: var(--lx-surface-3);
  color: var(--lx-fg);
}

.lx-editor-count {
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  color: var(--lx-fg-3);
}

.lx-editor-actions {
  display: flex;
  gap: 0.375rem;
  margin-left: auto;
}

.lx-editor-btn {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
  background: var(--lx-surface-2);
  color: var(--lx-fg);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.lx-editor-btn:hover {
  background: var(--lx-surface-3);
}

.lx-editor-btn:disabled {
  cursor: not-allowed;
  color: var(--lx-fg-4);
  background: transparent;
  opacity: 0.45;
}

/* X83：保存按钮在编辑区下方——一行提示 + 靠右的主按钮 */
.lx-editor-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.lx-editor-hint {
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  color: var(--lx-fg-4);
  min-width: 0;
  overflow-wrap: anywhere;
}

.lx-editor-save {
  padding: 0.4rem 1.4rem;
  font-size: 0.8125rem;
}

/* X82：轮播发布被拒绝时逐条列出原因（不覆盖旧轮播） */
.lx-editor-errors {
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--lx-danger-soft);
  color: var(--lx-danger-text);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.lx-editor-errors-k {
  margin: 0 0 0.25rem;
  font-weight: 600;
}

.lx-editor-errors ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* X80：编辑器顶部文档条——文档选择 / 标识 / 标题 / 保存 */
.lx-editor-docbar {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

.lx-editor-doc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  min-width: 0;
}

.lx-editor-select,
.lx-editor-title {
  padding: 0.3rem 0.5rem;
  background: var(--lx-surface-2);
  color: var(--lx-fg);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
  font: inherit;
  font-size: 0.75rem;
}

.lx-editor-title {
  width: 7.5rem;
}

.lx-editor-title-wide {
  width: 14rem;
}

.lx-editor-btn-primary {
  background: var(--lx-accent-soft);
  border-color: var(--lx-accent-line);
  color: var(--lx-accent-text);
  font-weight: 600;
}

.lx-editor-btn-quiet {
  color: var(--lx-fg-2);
}

.lx-editor-status {
  margin: 0;
  min-height: 1rem;
  font-size: 0.6875rem;
  color: var(--lx-fg-3);
}

.lx-editor-status[data-state="error"] {
  color: var(--lx-danger);
}

.lx-editor-panes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  flex: 1 1 auto;
  min-height: 0;
}

.lx-editor-pane {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  background: color-mix(in srgb, var(--lx-surface-1) 82%, transparent);
  overflow: hidden;
}

.lx-editor-pane-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  border-bottom: 1px solid var(--lx-border);
}

.lx-editor-pane-k {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lx-fg-4);
}

/* 格式工具栏：按钮只动 textarea 选区；HTML 插标签，Markdown 插语法 */
.lx-editor-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem;
  margin-left: auto;
}

.lx-editor-tool {
  min-width: 1.75rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--lx-radius-sm);
  background: transparent;
  color: var(--lx-fg-2);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}

.lx-editor-tool:hover {
  background: var(--lx-surface-3);
  color: var(--lx-fg);
}

.lx-editor-tool:active {
  background: var(--lx-surface-4);
}

.lx-editor-tool b,
.lx-editor-tool i {
  font-size: 0.8125rem;
}

.lx-editor-tools-sep {
  width: 1px;
  height: 1rem;
  margin: 0 0.25rem;
  background: var(--lx-border);
}

/* 0.36.3：段落样式下拉 + 表格面板（浮层由 editor.js 定位，position: fixed） */
.lx-editor-tool-select {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  min-width: 3.9rem;
}

.lx-editor-tool-select > span:first-child {
  min-width: 1.6rem;
  text-align: left;
}

.lx-editor-caret {
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.65;
}

.lx-editor-pop {
  position: fixed;
  top: 5rem;
  left: 0;
  z-index: 60;
  width: 15rem;
  max-height: calc(100vh - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.6rem;
  background: var(--lx-bg);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-lg);
  box-shadow: 0 20px 44px -24px var(--lx-fg);
}

.lx-editor-pop[hidden] {
  display: none;
}

.lx-editor-pop-k {
  margin: 0 0 0.4rem;
  font-family: var(--lx-font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lx-fg-4);
}

.lx-editor-pop-sep {
  height: 1px;
  margin: 0.6rem -0.6rem;
  background: var(--lx-border);
}

.lx-editor-blockitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.3rem 0.45rem;
  border: 0;
  border-radius: var(--lx-radius-sm);
  background: transparent;
  color: var(--lx-fg-2);
  font-family: var(--lx-font-sans);
  text-align: left;
  cursor: pointer;
}

.lx-editor-blockitem:hover,
.lx-editor-blockitem:focus-visible,
.lx-editor-blockitem[aria-checked="true"] {
  background: var(--lx-accent-soft);
  color: var(--lx-fg);
}

.lx-editor-blockname {
  font-weight: 600;
  line-height: 1.4;
}

.lx-editor-blockname-1 { font-size: 1.0625rem; }
.lx-editor-blockname-2 { font-size: 1rem; }
.lx-editor-blockname-3 { font-size: 0.9375rem; }
.lx-editor-blockname-4 { font-size: 0.875rem; }
.lx-editor-blockname-5 { font-size: 0.8125rem; }
.lx-editor-blockname-6 { font-size: 0.75rem; }

.lx-editor-blockcode {
  font-family: var(--lx-font-mono);
  font-size: 0.625rem;
  color: var(--lx-fg-4);
}

.lx-editor-tablepop {
  width: 17rem;
}

/* 0.36.3：表格可视化编辑器——遮罩 + 真表格，单元格直接输入 */
.lx-table-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: color-mix(in srgb, var(--lx-bg-base) 72%, transparent);
}

.lx-table-modal[hidden] {
  display: none;
}

body.lx-table-open {
  overflow: hidden;
}

.lx-table-dialog {
  display: flex;
  flex-direction: column;
  width: min(58rem, 100%);
  max-height: min(84vh, 44rem);
  background: var(--lx-bg);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-lg);
  box-shadow: 0 32px 70px -40px var(--lx-fg);
  overflow: hidden;
}

.lx-table-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--lx-border);
}

.lx-table-dialog-titles {
  min-width: 0;
}

.lx-table-dialog-k {
  margin: 0;
  font-family: var(--lx-font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lx-fg-2);
}

.lx-table-dialog-sub {
  margin: 0.15rem 0 0;
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  color: var(--lx-fg-4);
}

.lx-table-dialog-close {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
  background: transparent;
  color: var(--lx-fg-2);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.lx-table-dialog-close:hover {
  background: var(--lx-surface-3);
  color: var(--lx-fg);
}

.lx-table-dialog-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--lx-border);
}

.lx-table-dim {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  color: var(--lx-fg-3);
}

.lx-table-dim input[type="number"] {
  width: 3rem;
  padding: 0.15rem 0.25rem;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
  background: var(--lx-surface-2);
  color: var(--lx-fg);
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
}

.lx-table-tools-sep {
  width: 1px;
  height: 1.1rem;
  margin: 0 0.15rem;
  background: var(--lx-border);
}

.lx-table-tool {
  padding: 0.2rem 0.45rem;
  border: 1px solid transparent;
  border-radius: var(--lx-radius-sm);
  background: transparent;
  color: var(--lx-accent-text);
  font-family: var(--lx-font-sans);
  font-size: 0.6875rem;
  cursor: pointer;
}

.lx-table-tool:hover:not(:disabled) {
  background: var(--lx-accent-soft);
}

.lx-table-tool:disabled {
  color: var(--lx-fg-4);
  opacity: 0.5;
  cursor: not-allowed;
}

.lx-table-tool-danger {
  color: var(--lx-danger-text);
}

.lx-table-tool-danger:hover:not(:disabled) {
  background: var(--lx-danger-soft);
}

.lx-table-dialog-grid {
  flex: 1 1 auto;
  min-height: 8rem;
  overflow: auto;
  padding: 0.6rem 0.9rem 0.9rem;
}

.lx-table-dialog-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.875rem;
}

.lx-table-dialog-table th,
.lx-table-dialog-table td {
  min-width: 5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--lx-border);
  vertical-align: top;
}

.lx-table-dialog-table thead th {
  background: var(--lx-surface-2);
  font-weight: 600;
}

.lx-table-dialog-table th:focus-visible,
.lx-table-dialog-table td:focus-visible {
  outline: 2px solid var(--lx-accent-line);
  outline-offset: -2px;
}

.lx-table-dialog-table .is-active {
  background: var(--lx-accent-soft);
}

.lx-table-dialog-hint {
  margin: 0;
  padding: 0.4rem 0.9rem;
  border-top: 1px solid var(--lx-border);
  font-size: 0.6875rem;
  color: var(--lx-warn-text);
}

.lx-table-dialog-hint[hidden] {
  display: none;
}

.lx-table-dialog-foot {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--lx-border);
}

.lx-table-dialog-status {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  color: var(--lx-fg-3);
  overflow-wrap: anywhere;
}

.lx-table-dialog-status[data-state="error"] {
  color: var(--lx-danger);
}

.lx-table-dialog-btn {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-control);
  background: var(--lx-surface-2);
  color: var(--lx-fg);
  font-family: var(--lx-font-sans);
  font-size: 0.8125rem;
  cursor: pointer;
}

.lx-table-dialog-btn:hover {
  background: var(--lx-surface-3);
}

.lx-table-dialog-apply {
  border-color: var(--lx-accent-line);
  background: var(--lx-accent-soft);
  color: var(--lx-accent-text);
  font-weight: 600;
}

.lx-table-dialog-apply:hover {
  background: var(--lx-accent-line);
  color: var(--lx-fg);
}

.lx-editor-source {
  width: 100%;
  height: 100%;
  min-height: 18rem;
  padding: 0.75rem;
  border: 0;
  background: transparent;
  color: var(--lx-fg);
  font-family: var(--lx-font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  resize: none;
}

.lx-editor-source:focus-visible {
  outline-offset: -2px;
}

/* 0.36.4：可视化编辑——预览变成画布，源码只读变淡 */
.lx-editor-visualbar {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

.lx-editor-visualbar .lx-editor-tool-accent {
  color: var(--lx-accent-text);
  background: var(--lx-accent-soft);
}

.lx-editor-visualbar .lx-editor-tool-accent:hover {
  background: var(--lx-accent-line);
  color: var(--lx-fg);
}

.lx-editor-preview[contenteditable="true"] {
  background: color-mix(in srgb, var(--lx-surface-2) 45%, transparent);
  box-shadow: inset 0 0 0 1px var(--lx-accent-line);
}

.lx-editor-preview[contenteditable="true"]:focus {
  outline: none;
}

.lx-visual-on .lx-editor-source {
  opacity: 0.5;
}

.lx-link-pop {
  width: 17rem;
}

.lx-link-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 0 0.45rem;
  font-size: 0.6875rem;
  color: var(--lx-fg-3);
}

.lx-link-row input {
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
  background: var(--lx-surface-2);
  color: var(--lx-fg);
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
}

.lx-link-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.3rem;
}

.lx-link-btn {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
  background: transparent;
  color: var(--lx-fg-2);
  font-family: var(--lx-font-sans);
  font-size: 0.6875rem;
  cursor: pointer;
}

.lx-link-btn:hover {
  background: var(--lx-surface-3);
  color: var(--lx-fg);
}

.lx-link-btn-primary {
  border-color: var(--lx-accent-line);
  background: var(--lx-accent-soft);
  color: var(--lx-accent-text);
  font-weight: 600;
}

.lx-link-btn-primary:hover {
  background: var(--lx-accent-line);
  color: var(--lx-fg);
}


.lx-editor-preview {
  padding: 0.75rem;
  overflow: auto;
  min-height: 0;
  font-size: 0.875rem;
  line-height: 1.75;
}

.lx-editor-preview > :first-child {
  margin-top: 0;
}

.lx-editor-preview h1,
.lx-editor-preview h2,
.lx-editor-preview h3,
.lx-editor-preview h4,
.lx-editor-preview h5,
.lx-editor-preview h6 {
  margin: 1.1em 0 0.4em;
  line-height: 1.3;
}

.lx-editor-preview h1 { font-size: 1.5rem; }
.lx-editor-preview h2 { font-size: 1.25rem; }
.lx-editor-preview h3 { font-size: 1.0625rem; }

.lx-editor-preview p,
.lx-editor-preview ul,
.lx-editor-preview ol,
.lx-editor-preview blockquote,
.lx-editor-preview pre,
.lx-editor-preview table {
  margin: 0.6em 0;
}

.lx-editor-preview ul,
.lx-editor-preview ol {
  padding-left: 1.4em;
}

.lx-editor-preview blockquote {
  padding: 0.2em 0 0.2em 0.9em;
  border-inline-start: 3px solid var(--lx-border);
  color: var(--lx-fg-2);
}

.lx-editor-preview code {
  padding: 0.1em 0.35em;
  border-radius: var(--lx-radius-sm);
  background: var(--lx-surface-2);
  font-family: var(--lx-font-mono);
  font-size: 0.85em;
}

.lx-editor-preview pre {
  padding: 0.75rem;
  border-radius: var(--lx-radius-sm);
  background: var(--lx-surface-2);
  overflow-x: auto;
}

.lx-editor-preview pre code {
  padding: 0;
  background: transparent;
}

.lx-editor-preview table {
  border-collapse: collapse;
}

.lx-editor-preview th,
.lx-editor-preview td {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--lx-border);
  text-align: left;
}

.lx-editor-preview img,
.lx-editor-preview video {
  max-width: 100%;
  height: auto;
}

.lx-editor-preview hr {
  border: 0;
  border-top: 1px solid var(--lx-border);
}

@media (max-width: 980px) {
  .lx-canvas-editor {
    display: block;
    overflow-y: auto;
  }

  .lx-editor-panes {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-editor-source {
    min-height: 16rem;
  }

  .lx-editor-preview {
    overflow: visible;
  }
}

/* ============================================================
   0.19.1（X66）Hermes DS 组件层
   ------------------------------------------------------------
   端口来源：@nous-research/ui 0.19.1（MIT，Hermes Agent Web Dashboard 的
   组件实现）。逐项对齐的是**可观察的样式事实**，不是"看起来像"：

     Button   grid/flex、直角、midground 底 + background 字、内嵌 1px 斜面
              （inset -1px -1px 0 暗 / inset 1px 1px 0 亮）、mono 大写粗体、
              tracking .2em、按下 invert、禁用 15% 底且无阴影
     Ghost    transparent + hover midground/10，无阴影
     Input    高 2.25rem、1px midground/15 描边、background/40 底、
              Courier New（回落 JetBrains Mono）、.875rem、focus ring 1px
     Label    Mondwest、.75rem、tracking .1em、uppercase、leading 1
     Badge    Rules Compressed、uppercase、tracking .2em、8% 底 + 1px 描边
     Card     1px midground/15、background-base/80、直角

   颜色全部走 tokens.css 的 --lx-*（含斜面与输入框派生色），本文件仍是
   零颜色字面量。字体由 fonts.css 注册、tokens.css 选栈。
   ============================================================ */

/* ---------- 全局基底：DS globals.css @layer base ---------- */

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 选区：midground 底 + background 字（上游 `*::selection`；上游同条规则还带 `code`，
   那会让所有代码块常亮 midground 底，与本项目既有代码块冲突，故只取选区部分） */
*::selection {
  background: var(--lx-selection-bg);
  color: var(--lx-selection-fg);
}

/* 滚动条：细、默认透明、hover 才显形（上游 *:hover 20%、html/body 65%→hover 80%） */
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

*:hover {
  scrollbar-color: var(--lx-scroll-thumb) transparent;
}

html,
body {
  scrollbar-color: var(--lx-scroll-thumb-strong) transparent;
}

html:hover,
body:hover {
  scrollbar-color: var(--lx-scroll-thumb-stronger) transparent;
}

::-webkit-scrollbar {
  width: 0.25rem;
  height: 0.25rem;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 1rem;
  min-height: 1rem;
}

*:hover::-webkit-scrollbar-thumb {
  background: var(--lx-scroll-thumb);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: var(--lx-scroll-thumb-strong);
}

html:hover::-webkit-scrollbar-thumb,
body:hover::-webkit-scrollbar-thumb {
  background: var(--lx-scroll-thumb-stronger);
}

body {
  font-family: var(--lx-font-sans);
  font-size: var(--lx-base);
  line-height: var(--lx-leading);
  letter-spacing: var(--lx-tracking);
}

/* ---------- 排版：chrome 用 DS 的品牌字形 ---------- */

.lx-brand-mark,
.lx-login-brand,
.lx-title,
.lx-panel-title,
.lx-upload-title {
  font-family: var(--lx-font-title);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.15;
}

.lx-brand-mark {
  font-size: 1.05rem;
}

.lx-login-brand {
  font-size: 0.9375rem;
}

.lx-title {
  font-size: 1.5rem;
}

.lx-panel-title {
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
}

/* DS Label：小号 Mondwest + 大写 + 0.1em 字距 */
.lx-nav-group,
.lx-field-k,
.lx-editor-pane-k,
.lx-stat-k,
.lx-panel-kicker,
.lx-login-sub {
  margin: 0;
  font-family: var(--lx-font-display);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--lx-fg-3);
}

.lx-panel-kicker {
  font-size: 0.6875rem;
  color: var(--lx-fg-4);
}

.lx-sub {
  font-family: var(--lx-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lx-fg-3);
}

/* 数字、代码、终端类信息：DS mono（JetBrains Mono） */
.lx-stat-v,
.lx-foot,
.lx-upload-total,
.lx-upload-summary,
.lx-upload-name,
.lx-upload-meta,
.lx-upload-status,
.lx-editor-count,
.lx-editor-status,
.lx-login-meta,
.lx-login-note,
.lx-who,
.lx-empty {
  font-family: var(--lx-font-mono);
  letter-spacing: 0.01em;
}

/* ---------- Button：实心（DS 默认变体） ---------- */

.lx-login-btn,
.lx-upload-start,
.lx-editor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* DS default 尺寸：px-[.9em_.75em] py-[1.25em]，随字号走（不是固定 rem 高） */
  padding-block: 1.25em;
  padding-inline: 0.9em 0.75em;
  border: 0;
  border-radius: 0;
  background: var(--lx-btn-bg);
  color: var(--lx-btn-fg);
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow:
    inset -1px -1px 0 0 var(--lx-bevel-dark),
    inset 1px 1px 0 0 var(--lx-bevel-light);
  cursor: pointer;
  transition: background-color 120ms ease, filter 120ms ease;
}

.lx-login-btn:hover,
.lx-upload-start:hover,
.lx-editor-btn:hover {
  background: var(--lx-btn-hover);
}

.lx-login-btn:active,
.lx-upload-start:active,
.lx-editor-btn:active {
  filter: invert(1);
}

.lx-login-btn:disabled,
.lx-upload-start:disabled,
.lx-editor-btn:disabled {
  background: var(--lx-btn-disabled-bg);
  color: var(--lx-fg);
  box-shadow: none;
  cursor: not-allowed;
}

/* ---------- Button：DS 弧光描边（.arc-border，hover/focus/active 才显形） ----------
 * 上游是一个 aria-hidden 的绝对定位 span：inset -2px、padding 1.25px、160deg 渐变
 * （fg→fg→bg 三段扫光）、300% 背景尺寸、2.23s 线性无限位移，再用双层 mask 取 xor
 * 只留 1.25px 边。这里用 ::after 复刻同一组事实。
 * X68：按用户要求挂到**所有**按钮（上游只给非 ghost），并 border-radius: inherit 跟着圆角。 */

.lx-login-btn,
.lx-upload-start,
.lx-editor-btn,
.lx-editor-btn-quiet,
.lx-editor-tool,
.lx-editor-mode,
.lx-login-back,
.lx-logout-btn,
.lx-who-link {
  position: relative;
  isolation: isolate;
}

.lx-login-btn::after,
.lx-upload-start::after,
.lx-editor-btn::after,
.lx-editor-btn-quiet::after,
.lx-editor-tool::after,
.lx-editor-mode::after,
.lx-login-back::after,
.lx-logout-btn::after,
.lx-who-link::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  padding: 1.25px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    160deg,
    transparent 0%,
    var(--lx-arc-fg) 15%,
    var(--lx-arc-fg) 20%,
    var(--lx-arc-bg) 25%,
    transparent 35%,
    transparent 40%,
    var(--lx-arc-fg) 55%,
    var(--lx-arc-fg) 60%,
    var(--lx-arc-bg) 65%,
    transparent 75%,
    transparent 80%,
    var(--lx-arc-fg) 95%,
    var(--lx-arc-fg) 100%
  );
  background-size: 300% 300%;
  animation: lx-arc 2.23s linear infinite;
  opacity: 0;
  transition: opacity 200ms ease;
  mask:
    linear-gradient(var(--lx-mask-ink) 0 0) content-box,
    linear-gradient(var(--lx-mask-ink) 0 0);
  -webkit-mask:
    linear-gradient(var(--lx-mask-ink) 0 0) content-box,
    linear-gradient(var(--lx-mask-ink) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.lx-login-btn:hover::after,
.lx-login-btn:focus-visible::after,
.lx-login-btn:active::after,
.lx-upload-start:hover::after,
.lx-upload-start:focus-visible::after,
.lx-upload-start:active::after,
.lx-editor-btn:hover::after,
.lx-editor-btn:focus-visible::after,
.lx-editor-btn:active::after,
.lx-editor-btn-quiet:hover::after,
.lx-editor-btn-quiet:focus-visible::after,
.lx-editor-tool:hover::after,
.lx-editor-tool:focus-visible::after,
.lx-editor-mode:hover::after,
.lx-editor-mode:focus-visible::after,
.lx-login-back:hover::after,
.lx-login-back:focus-visible::after,
.lx-logout-btn:hover::after,
.lx-logout-btn:focus-visible::after,
.lx-who-link:hover::after,
.lx-who-link:focus-visible::after {
  opacity: 1;
}

@keyframes lx-arc {
  0% {
    background-position: 15% 15%;
  }
  100% {
    background-position: 75% 75%;
  }
}

/* ---------- Button：ghost（DS ghost 变体） ---------- */

.lx-editor-btn-quiet,
.lx-editor-tool,
.lx-editor-mode,
.lx-login-back,
.lx-logout-btn,
.lx-who-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  padding: 0.375rem 0.75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--lx-fg-2);
  font-family: var(--lx-font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.lx-editor-btn-quiet:hover,
.lx-editor-tool:hover,
.lx-editor-mode:hover,
.lx-login-back:hover,
.lx-logout-btn:hover,
.lx-who-link:hover {
  background: var(--lx-ghost-hover);
  color: var(--lx-fg);
}

.lx-editor-tool {
  min-width: 1.75rem;
  padding: 0.3rem 0.6rem;
  letter-spacing: 0.12em;
}

.lx-editor-tool b,
.lx-editor-tool i {
  font-size: 0.8125rem;
  letter-spacing: 0;
}

/* 分段控件：容器直角描边，当前项用实心 ds 按钮 */
.lx-editor-modes {
  border: 1px solid var(--lx-input-border);
  border-radius: 0;
  background: var(--lx-input-bg);
}

.lx-editor-mode {
  min-height: 1.9rem;
}

.lx-editor-mode[aria-pressed="true"] {
  background: var(--lx-btn-bg);
  color: var(--lx-btn-fg);
  box-shadow:
    inset -1px -1px 0 0 var(--lx-bevel-dark),
    inset 1px 1px 0 0 var(--lx-bevel-light);
}

/* ---------- Input / Textarea：DS Input ---------- */

.lx-field-v,
.lx-editor-source {
  width: 100%;
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--lx-input-border);
  border-radius: 0;
  background: var(--lx-input-bg);
  color: var(--lx-fg);
  font-family: var(--lx-font-input);
  font-size: 0.875rem;
  line-height: 1.5;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.lx-field-v:focus,
.lx-editor-source:focus {
  outline: none;
  border-color: var(--lx-input-border-hover);
  box-shadow: 0 0 0 1px var(--lx-ring);
}

.lx-field-v:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.lx-field-v::placeholder,
.lx-editor-source::placeholder {
  color: var(--lx-fg-4);
  opacity: 1;
}

.lx-editor-source {
  height: 100%;
  padding: 0.75rem;
  font-family: var(--lx-font-mono);
}

/* ---------- Card / Panel / Stat：直角 + 1px 描边 + background/80 ---------- */

.lx-login-form,
.lx-panel,
.lx-card,
.lx-upload-card,
.lx-editor-pane {
  border: 1px solid var(--lx-input-border);
  border-radius: 0;
  background: var(--lx-card-bg);
}

.lx-stat {
  border: 1px solid var(--lx-input-border);
  border-radius: 0;
  background: var(--lx-input-bg);
}

.lx-panel-head,
.lx-editor-pane-head,
.lx-login-top,
.lx-login-foot,
.lx-foot {
  border-color: var(--lx-input-border);
}

.lx-login-error {
  border-radius: 0;
  border: 1px solid var(--lx-input-border);
  border-inline-start: 3px solid var(--lx-danger);
  background: var(--lx-surface-2);
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
}

/* DS Badge */
.lx-tag {
  border: 1px solid var(--lx-input-border);
  border-radius: 0;
  /* DS Badge 默认档：BlendMode mg/0.075（midground-alpha=1 时即 7.5%）+ px-2 py-1 */
  padding: 0.25rem 0.5rem;
  background: color-mix(in srgb, var(--lx-fg) 7.5%, transparent);
  color: var(--lx-fg-2);
  font-family: var(--lx-font-brand);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
}

/* ---------- 侧栏：mono 导航 + 当前项左侧实心条 ---------- */

.lx-brand-mark {
  color: var(--lx-fg);
}

.lx-nav-item {
  border-radius: 0;
  padding: 0.45rem 0.5rem;
  font-family: var(--lx-font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--lx-fg-2);
}

.lx-nav-item:hover {
  background: var(--lx-ghost-hover);
  color: var(--lx-fg);
}

.lx-nav-item[aria-current="page"] {
  background: var(--lx-ghost-hover);
  color: var(--lx-fg);
  box-shadow: inset 2px 0 0 0 var(--lx-fg);
}

.lx-side {
  background: var(--lx-card-bg);
}

/* ---------- 登录页 ---------- */

.lx-login-form {
  backdrop-filter: blur(6px);
}

.lx-login-note {
  font-size: 0.75rem;
  color: var(--lx-fg-3);
}

.lx-login-note b {
  color: var(--lx-fg);
}

.lx-login-meta {
  font-size: 0.65rem;
  color: var(--lx-fg-4);
}

/* ---------- 上传页 ---------- */

.lx-upload-drop {
  border: 1px dashed var(--lx-input-border);
  border-radius: 0;
  background: var(--lx-input-bg);
}

.lx-upload-drop:hover,
.lx-upload-card.is-dragging .lx-upload-drop {
  border-color: var(--lx-input-border-hover);
  background: var(--lx-ghost-hover);
}

.lx-upload-drop-title {
  font-family: var(--lx-font-title);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lx-fg);
}

.lx-upload-drop-hint {
  font-family: var(--lx-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--lx-fg-4);
}

.lx-upload-total,
.lx-upload-summary {
  font-size: 0.7rem;
  color: var(--lx-fg-3);
}

.lx-upload-row {
  border: 1px solid var(--lx-input-border);
  border-radius: 0;
  background: var(--lx-input-bg);
}

.lx-upload-name {
  font-size: 0.8125rem;
  color: var(--lx-fg);
}

.lx-upload-meta,
.lx-upload-status {
  font-size: 0.65rem;
  color: var(--lx-fg-4);
}

.lx-upload-row-bar,
.lx-upload-bar {
  border-radius: 0;
  background: var(--lx-input-border);
}

/* ---------- 编辑器 ---------- */

.lx-editor-modes {
  overflow: hidden;
}

.lx-editor-count {
  font-size: 0.65rem;
  color: var(--lx-fg-3);
}

.lx-editor-status {
  font-size: 0.7rem;
  color: var(--lx-fg-3);
}

.lx-editor-tools {
  gap: 0.125rem;
}

.lx-editor-tools-sep {
  background: var(--lx-input-border);
}

.lx-editor-pane-head {
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
}

.lx-editor-preview {
  font-family: var(--lx-font-sans);
  font-size: 0.9375rem;
}

.lx-editor-preview h1,
.lx-editor-preview h2,
.lx-editor-preview h3,
.lx-editor-preview h4,
.lx-editor-preview h5,
.lx-editor-preview h6 {
  font-family: var(--lx-font-title);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lx-editor-preview code,
.lx-editor-preview pre,
.lx-editor-preview kbd {
  font-family: var(--lx-font-mono);
}

.lx-editor-preview pre,
.lx-editor-preview code {
  border-radius: 0;
  background: var(--lx-input-bg);
}

.lx-editor-preview blockquote {
  border-inline-start: 2px solid var(--lx-fg-3);
  border-radius: 0;
}

/* ---------- 页脚 ---------- */

.lx-foot {
  font-size: 0.65rem;
  color: var(--lx-fg-4);
}

.lx-foot .lx-who-link {
  font-size: 0.65rem;
  padding: 0.2rem 0.4rem;
}

/* ---------- 低动效 ---------- */

@media (prefers-reduced-motion: reduce) {
  .lx-login-btn,
  .lx-upload-start,
  .lx-editor-btn,
  .lx-editor-btn-quiet,
  .lx-editor-tool,
  .lx-editor-mode,
  .lx-login-back,
  .lx-logout-btn,
  .lx-who-link,
  .lx-field-v,
  .lx-editor-source {
    transition: none;
  }

  .lx-login-btn::after,
  .lx-upload-start::after,
  .lx-editor-btn::after {
    animation: none;
  }
}

/* ============================================================
   X68（0.19.1）—— 按用户意见重做观感
   ------------------------------------------------------------
   ① 圆角：DS 的直角取消，按用途分四档（chip 4 / control 6 / btn 8 / card 8）
   ② 按钮：不再用 mono 大写 .2em（中文标签被字距拉散就是“干瘪”的主因），
      改 sans 半粗 + 加高加厚 + 顶部高光/落影，并按用途上色：
      登录=accent、上传=ok、编辑器=info、退出/移除=danger、ghost=语义文字 + 浅底
   ③ 文字按功能上色：分组标题与数值=accent、说明/计数=info、状态=ok/warn/danger，
      统一用 -text 档（逐主题 ≥4.5:1，见 semantic_palette_test）
   ④ 弧光已挂到全部按钮（见上方 ::after 选择器）
   ============================================================ */

/* ---------- 圆角 ---------- */

.lx-login-btn,
.lx-upload-start,
.lx-editor-btn,
.lx-editor-btn-quiet,
.lx-editor-tool,
.lx-login-back,
.lx-logout-btn,
.lx-who-link {
  border-radius: var(--lx-radius-btn);
}

.lx-field-v,
.lx-editor-source,
.lx-upload-row,
.lx-upload-drop,
.lx-stat,
.lx-login-error,
.lx-nav-item {
  border-radius: var(--lx-radius-control);
}

.lx-editor-modes {
  border-radius: var(--lx-radius-control);
}

.lx-editor-modes .lx-editor-mode {
  border-radius: 0;
}

.lx-tag {
  border-radius: var(--lx-radius-chip);
}

.lx-panel,
.lx-card,
.lx-login-form,
.lx-upload-card,
.lx-editor-pane {
  border-radius: var(--lx-radius-card);
}

.lx-upload-row-bar,
.lx-upload-bar,
.lx-upload-row-bar i,
.lx-upload-bar i {
  border-radius: 1rem;
}

/* ---------- 主按钮：厚实 + 语义色 ---------- */

.lx-login-btn,
.lx-upload-start,
.lx-editor-btn {
  min-height: 2.5rem;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--lx-btn-line);
  background-color: var(--lx-btn-bg);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--lx-btn-bg) 74%, var(--lx-fg)) 0%,
    var(--lx-btn-bg) 58%,
    color-mix(in srgb, var(--lx-btn-bg) 86%, var(--lx-bg-base)) 100%
  );
  color: var(--lx-btn-fg);
  font-family: var(--lx-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  box-shadow:
    inset 0 1px 0 0 var(--lx-bevel-light-soft),
    0 8px 18px -12px var(--lx-btn-line);
  transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.lx-login-btn:hover,
.lx-upload-start:hover,
.lx-editor-btn:hover {
  filter: brightness(1.07);
  box-shadow:
    inset 0 1px 0 0 var(--lx-bevel-light-soft),
    0 10px 22px -12px var(--lx-btn-line);
}

.lx-login-btn:active,
.lx-upload-start:active,
.lx-editor-btn:active {
  filter: brightness(0.96);
  transform: translateY(1px);
}

.lx-login-btn:disabled,
.lx-upload-start:disabled,
.lx-editor-btn:disabled {
  border-color: transparent;
  background-image: none;
  box-shadow: none;
  transform: none;
}

/* 按用途上色：登录=accent、上传=ok、编辑器=info */
.lx-login-btn {
  --lx-btn-bg: var(--lx-accent);
  --lx-btn-line: var(--lx-accent-line);
}

.lx-upload-start {
  --lx-btn-bg: var(--lx-ok);
  --lx-btn-line: var(--lx-ok-line);
}

.lx-editor-btn {
  --lx-btn-bg: var(--lx-info);
  --lx-btn-line: var(--lx-info-line);
}

/* ---------- Ghost：语义文字 + 语义浅底 ---------- */

.lx-editor-btn-quiet,
.lx-editor-tool,
.lx-editor-mode,
.lx-login-back,
.lx-logout-btn,
.lx-who-link {
  background: transparent;
  box-shadow: none;
  color: var(--lx-accent-text);
  font-family: var(--lx-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

.lx-editor-btn-quiet:hover,
.lx-editor-tool:hover,
.lx-editor-mode:hover,
.lx-login-back:hover,
.lx-editor-mode[aria-pressed="true"] {
  background: var(--lx-accent-soft);
  color: var(--lx-accent-text);
}

.lx-logout-btn {
  color: var(--lx-danger-text);
}

.lx-logout-btn:hover {
  background: var(--lx-danger-soft);
  color: var(--lx-danger-text);
}

.lx-who-link {
  color: var(--lx-fg-2);
}

.lx-who-link:hover {
  background: var(--lx-ghost-hover);
  color: var(--lx-fg);
}

/* ---------- 文字按功能上色 ---------- */

:focus-visible {
  outline-color: var(--lx-accent);
}

.lx-brand-mark,
.lx-nav-group,
.lx-stat-v,
.lx-login-note b {
  color: var(--lx-accent-text);
}

.lx-panel-kicker,
.lx-editor-count,
.lx-editor-pane-k {
  color: var(--lx-info-text);
}

.lx-nav-item[aria-current="page"] {
  background: var(--lx-accent-soft);
  color: var(--lx-accent-text);
  box-shadow: inset 3px 0 0 0 var(--lx-accent);
}

.lx-nav-item:hover {
  background: var(--lx-ghost-hover);
  color: var(--lx-fg);
}

/* 内容块标签：高价值档用 accent，低价值档退到弱化文字 */
.lx-card[data-band="4"] .lx-tag,
.lx-card[data-band="5"] .lx-tag {
  border-color: var(--lx-accent-line);
  background: var(--lx-accent-soft);
  color: var(--lx-accent-text);
}

.lx-card[data-band="1"] .lx-tag,
.lx-card[data-band="2"] .lx-tag {
  color: var(--lx-fg-4);
}

/* 上传行状态：stored=ok、duplicate=warn、failed=danger（文字档） */
.lx-upload-row[data-state="stored"] .lx-upload-status {
  color: var(--lx-ok-text);
}

.lx-upload-row[data-state="duplicate"] .lx-upload-status {
  color: var(--lx-warn-text);
}

.lx-upload-row[data-state="failed"] .lx-upload-status {
  color: var(--lx-danger-text);
}

/* 编辑器状态与登录错误条 */
.lx-editor-status[data-state="info"] {
  color: var(--lx-info-text);
}

.lx-editor-status[data-state="ok"] {
  color: var(--lx-ok-text);
}

.lx-editor-status[data-state="error"] {
  color: var(--lx-danger-text);
}

.lx-login-error {
  color: var(--lx-danger-text);
  border-inline-start-color: var(--lx-danger);
}

/* ---------- 语义浅底的其余用法（状态行 / 信息条） ---------- */

.lx-upload-row[data-state="stored"] {
  border-color: var(--lx-ok-line);
  background: var(--lx-ok-soft);
}

.lx-upload-row[data-state="duplicate"] {
  border-color: var(--lx-warn-line);
  background: var(--lx-warn-soft);
}

.lx-upload-row[data-state="failed"] {
  border-color: var(--lx-danger-line);
  background: var(--lx-danger-soft);
}

.lx-panel-kicker {
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--lx-info-line);
  border-radius: var(--lx-radius-chip);
  background: var(--lx-info-soft);
}

.lx-upload-drop:hover,
.lx-upload-card.is-dragging .lx-upload-drop {
  border-color: var(--lx-ok-line);
  background: var(--lx-ok-soft);
}

/* ==========================================================================
   0.20.0（X71）首页：hero + 轮播 + 四个数据区
   --------------------------------------------------------------------------
   约束同前：零颜色字面量、零内联样式、间距走 --lx-space、圆角走 --lx-radius-*。
   状态色只表达 ok/warn/danger；比例条是 SVG（宽度由服务端算好），不用 JS 量宽度。
   ========================================================================== */

.lx-home {
  display: grid;
  gap: calc(1rem * var(--lx-space));
  max-width: 78rem;
  min-width: 0;
}

/* ---------- hero：文案 + 装饰环 + 状态带 ---------- */

.lx-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem;
  gap: calc(1rem * var(--lx-space)) calc(1.5rem * var(--lx-space));
  padding: calc(1.5rem * var(--lx-space));
  overflow: hidden;
  background-color: var(--lx-card-bg);
  background-image: radial-gradient(130% 150% at 100% 0%, var(--lx-accent-soft), transparent 62%);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-card);
}

.lx-hero-art {
  align-self: center;
  justify-self: end;
  width: 9rem;
  max-width: 100%;
  color: var(--lx-accent-text);
  opacity: 0.5;
}

.lx-hero-art svg {
  display: block;
  width: 100%;
  height: auto;
}

.lx-hero-eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lx-accent-text);
}

.lx-hero-title {
  margin: 0;
  font-family: var(--lx-font-title);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--lx-fg);
}

.lx-hero-lede {
  /* 40rem 让第一句（37 字）在 1440/1920 上正好一行，配合 .lx-hero-br 的硬换行，
     不会把「取舍」拆到两行。 */
  max-width: 40rem;
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--lx-fg-2);
}

.lx-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: calc(1rem * var(--lx-space));
}

.lx-hero-br {
  display: none;
}

@media (min-width: 901px) {
  .lx-hero-br {
    display: inline;
  }
}

/* 状态带 = hero 的底栏 */
.lx-vitals {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.25rem;
  padding-top: calc(0.875rem * var(--lx-space));
  border-top: 1px solid var(--lx-border);
}

.lx-vital {
  display: grid;
  grid-template-columns: 0.5rem minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 0.5rem;
  row-gap: 0.125rem;
  align-items: center;
  min-width: 0;
}

.lx-vital-dot {
  grid-row: 1 / span 3;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--lx-fg-4);
}

.lx-vital-k {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--lx-fg-3);
}

.lx-vital-v {
  font-family: var(--lx-font-mono);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--lx-fg);
}

.lx-vital-h {
  font-size: 0.6875rem;
  color: var(--lx-fg-4);
  overflow-wrap: anywhere;
}

.lx-vital[data-tone="ok"] .lx-vital-dot { background: var(--lx-ok); }
.lx-vital[data-tone="warn"] .lx-vital-dot { background: var(--lx-warn); }
.lx-vital[data-tone="danger"] .lx-vital-dot { background: var(--lx-danger); }
.lx-vital[data-tone="warn"] .lx-vital-v { color: var(--lx-warn-text); }
.lx-vital[data-tone="danger"] .lx-vital-v { color: var(--lx-danger-text); }

/* ---------- 0.28.0（X119）：最新发布 —— 左图 + 右栏（样张 V2） ---------- */

.lx-lead {
  display: flex;
  align-items: stretch;
  margin: 0;
  overflow: hidden;
  background: var(--lx-surface-1);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-card);
}

.lx-lead:focus-visible {
  outline: 2px solid var(--lx-accent-line);
  outline-offset: 2px;
}

/* 左栏：16:9，图片完整可见，任何东西都不压在上面 */
.lx-lead-fig {
  position: relative;
  flex: 0 0 76.2%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--lx-surface-1);
}

.lx-lead-shot {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.lx-lead-shot.is-on { opacity: 1; }
.lx-lead-shot[hidden] { display: none; }

.lx-lead-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 没有配图时才出的纹理层 */
.lx-lead-art {
  position: absolute;
  inset: 0;
  background-color: var(--lx-bg-base);
  background-image:
    linear-gradient(180deg, transparent 26%, color-mix(in srgb, var(--lx-bg-base) 84%, transparent) 100%),
    radial-gradient(120% 130% at 84% 16%, color-mix(in srgb, var(--lx-accent) 42%, transparent), transparent 62%),
    radial-gradient(90% 95% at 4% 100%, color-mix(in srgb, var(--lx-accent-text) 18%, transparent), transparent 64%);
}

/* 右栏：标题列。底色是图片右缘的模糊切片，随图切换 */
.lx-lead-side {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.lx-lead-wash { position: absolute; inset: 0; }

/* 遮罩：从接缝处渐入，到 10% 满强度——面板任何位置都能读字，接缝也不出现硬边 */
.lx-lead-side::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0, var(--lead-veil, transparent) 10%);
}

.lx-lead-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.lx-lead-panel.is-on { opacity: 1; }
.lx-lead-panel[hidden] { display: none; }

/* 文字明暗跟着图片走：浅底深字 / 深底浅字 / 没有面板就回主题 */
/* 默认跟随主题；只有在两栏布局里（面板真的铺在文字下面）才按图片亮度切 */
.lx-lead-side {
  --lead-fg: var(--lx-fg);
  --lead-dim: color-mix(in srgb, var(--lx-fg) 78%, transparent);
  --lead-accent: var(--lx-accent);
}

@media (min-width: 1100px) {
  .lx-lead[data-tone="light"] .lx-lead-side {
    --lead-veil: var(--lx-lead-veil-light);
    --lead-fg: var(--lx-lead-on-light);
    --lead-dim: var(--lx-lead-on-light-dim);
    --lead-accent: var(--lx-lead-on-light-accent);
  }

  .lx-lead[data-tone="dark"] .lx-lead-side {
    --lead-veil: var(--lx-lead-veil-dark);
    --lead-fg: var(--lx-lead-on-dark);
    --lead-dim: var(--lx-lead-on-dark-dim);
    --lead-accent: var(--lx-accent);
  }
}

.lx-lead-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  margin: 0;
  padding: calc(1.1rem * var(--lx-space)) calc(2rem * var(--lx-space)) calc(1.1rem * var(--lx-space)) calc(2rem * var(--lx-space));
  list-style: none;
}

.lx-lead-list a {
  display: block;
  padding: 0.5rem 0.1rem 0.5rem 0.9rem;
  color: var(--lead-dim);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-decoration: none;
  border-left: 3px solid transparent;
}

.lx-lead-list a:hover { color: var(--lead-fg); }

.lx-lead-list a[aria-current="true"] {
  color: var(--lead-fg);
  font-weight: 600;
  border-left-color: var(--lead-accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--lead-accent) 14%, transparent), transparent 90%);
}

.lx-lead-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lx-lead-list a[aria-current="true"] .lx-lead-title {
  display: -webkit-box;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 后台首页的空态链接仍用这个类 */
.lx-slide-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--lx-accent-text);
  text-decoration: none;
}

.lx-slide-link:hover { text-decoration: underline; }

@media (max-width: 1099px) {
  .lx-lead { display: block; }
  .lx-lead-fig { width: 100%; }
  .lx-lead-side { display: block; }
  .lx-lead-wash { display: none; }
  .lx-lead-list {
    justify-content: flex-start;
    max-height: none;
    overflow-y: visible;
    padding: calc(0.45rem * var(--lx-space)) 0 calc(0.6rem * var(--lx-space));
    border-top: 1px solid var(--lx-border);
  }
  .lx-lead-list a { padding-left: 1.1rem; }
}

@media (max-width: 640px) {
  .lx-lead-fig { aspect-ratio: 2 / 1; }
  .lx-lead-list a { padding-top: 0.65rem; padding-bottom: 0.65rem; }
}

/* ---------- 关键指标 ---------- */

.lx-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(0.75rem * var(--lx-space));
}

.lx-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 8.5rem;
  padding: calc(1rem * var(--lx-space));
  color: inherit;
  text-decoration: none;
  background: var(--lx-surface-1);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-card);
  transition: border-color 120ms ease, background-color 120ms ease;
}

.lx-kpi:hover {
  background: var(--lx-surface-2);
  border-color: var(--lx-accent-line);
}

.lx-kpi-k {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lx-fg-3);
}

.lx-kpi-v {
  font-family: var(--lx-font-mono);
  font-size: 1.75rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--lx-fg);
  overflow-wrap: anywhere;
}

.lx-kpi-sub {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--lx-fg-3);
}

.lx-kpi-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--lx-border);
}

.lx-kpi-h {
  font-size: 0.6875rem;
  color: var(--lx-fg-4);
  overflow-wrap: anywhere;
}

.lx-kpi-more {
  font-size: 0.6875rem;
  color: var(--lx-accent-text);
  white-space: nowrap;
}

/* 状态色只染副值（超时率/过期数），不染主值——「0 条待处理」不该因为是红档而看起来像坏消息 */
.lx-kpi[data-tone="danger"] .lx-kpi-sub { color: var(--lx-danger-text); }
.lx-kpi[data-tone="warn"] .lx-kpi-sub { color: var(--lx-warn-text); }
.lx-kpi[data-tone="muted"] .lx-kpi-v { color: var(--lx-fg-3); }

/* ---------- 双栏：比例条 + 异常 ---------- */

.lx-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: calc(1rem * var(--lx-space));
  align-items: stretch;
}

.lx-block {
  min-width: 0;
  padding: calc(1rem * var(--lx-space));
  background: var(--lx-surface-1);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-card);
}

/* X77：仪表板下半「本拍概览」——六格指标 + 一颗显式推进按钮（GET 不推进） */
.lx-tick-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: calc(0.9rem * var(--lx-space));
  padding-top: calc(0.75rem * var(--lx-space));
  border-top: 1px solid var(--lx-border);
}

.lx-tick-note {
  font-size: 0.75rem;
  color: var(--lx-fg-4);
}

.lx-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: calc(0.875rem * var(--lx-space));
}

.lx-block-title {
  margin: 0;
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lx-fg-2);
}

.lx-block-kicker {
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  color: var(--lx-fg-4);
}

.lx-meter {
  display: block;
  width: 100%;
  height: 0.625rem;
  overflow: hidden;
  background: var(--lx-surface-2);
  border-radius: var(--lx-radius-chip);
  box-shadow: inset 0 0 0 1px var(--lx-border);
}

.lx-meter-seg[data-tone="ok"] { fill: var(--lx-ok); }
.lx-meter-seg[data-tone="warn"] { fill: var(--lx-warn); }
.lx-meter-seg[data-tone="danger"] { fill: var(--lx-danger); }
.lx-meter-seg[data-tone="accent"] { fill: var(--lx-accent); }

.lx-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem 1rem;
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
}

.lx-legend-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.75rem;
}

.lx-legend-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--lx-fg-4);
}

.lx-legend-row[data-tone="ok"] .lx-legend-dot { background: var(--lx-ok); }
.lx-legend-row[data-tone="warn"] .lx-legend-dot { background: var(--lx-warn); }
.lx-legend-row[data-tone="danger"] .lx-legend-dot { background: var(--lx-danger); }
.lx-legend-row[data-tone="accent"] .lx-legend-dot { background: var(--lx-accent); }

.lx-legend-k { color: var(--lx-fg-2); }
.lx-legend-n {
  font-family: var(--lx-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--lx-fg);
}
.lx-legend-p {
  font-family: var(--lx-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--lx-fg-4);
  text-align: right;
}

.lx-meter-note {
  margin: 0.75rem 0 0;
  font-size: 0.6875rem;
  color: var(--lx-fg-4);
}

.lx-meter-note[data-tone="ok"] { color: var(--lx-ok-text); }
.lx-meter-note[data-tone="warn"] { color: var(--lx-warn-text); }
.lx-meter-note[data-tone="danger"] { color: var(--lx-danger-text); }

.lx-faults {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-fault {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 4.5rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--lx-border);
}

.lx-fault:last-child {
  border-bottom: 0;
}

.lx-fault-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--lx-fg-2);
}

.lx-fault-n {
  font-family: var(--lx-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--lx-fg);
}

.lx-fault-t {
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  color: var(--lx-fg-4);
  text-align: right;
}

/* ---------- 最近上传 ---------- */

.lx-uploads {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.lx-uploads th {
  padding: 0.35rem 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left;
  color: var(--lx-fg-4);
  border-bottom: 1px solid var(--lx-border);
}

.lx-uploads th:not(:first-child) {
  text-align: right;
}

.lx-uploads td {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--lx-border);
}

.lx-uploads tr:last-child td {
  border-bottom: 0;
}

.lx-uploads-name {
  overflow-wrap: anywhere;
  color: var(--lx-fg-2);
}

.lx-uploads-size,
.lx-uploads-at {
  font-family: var(--lx-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: var(--lx-fg-3);
}

/* ---------- 降级：库不可用 ---------- */

.lx-home-down {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  padding: calc(1.25rem * var(--lx-space));
  background: var(--lx-surface-1);
  border: 1px solid var(--lx-danger-line);
  border-radius: var(--lx-radius-card);
}

.lx-home-down-title {
  margin: 0;
  font-size: 1rem;
  color: var(--lx-danger-text);
}

.lx-home-down-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--lx-fg-3);
  overflow-wrap: anywhere;
}

/* ---------- 响应式 ---------- */

@media (max-width: 1179px) {
  .lx-vitals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lx-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lx-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .lx-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-hero-art {
    display: none;
  }

  .lx-slide-mark {
    width: 11rem;
    height: 11rem;
    opacity: 0.1;
  }

}

@media (max-width: 640px) {
  .lx-hero-title {
    font-size: 2rem;
  }

  .lx-vitals,
  .lx-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-kpi {
    min-height: 0;
  }

  /* 手机上图片仍按 21:9：成品图就是按这个比例处理的，改比例会再次裁切内容 */
  .lx-slide-glass {
    padding: calc(0.7rem * var(--lx-space)) calc(0.9rem * var(--lx-space));
  }

  .lx-slide-title {
    font-size: 1.05rem;
  }

  .lx-slide-text {
    font-size: 0.8125rem;
  }

  .lx-slide-mark {
    width: 8rem;
    height: 8rem;
    top: 22%;
    opacity: 0.12;
  }

  /* 手机上让位给正文：圆形箭头会压住文字，改由 24px 圆点翻页 */
  .lx-carousel[data-ready="1"] .lx-carousel-arrow {
    display: none;
  }

  .lx-legend {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-fault {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .lx-fault-t {
    display: none;
  }

  /* 上传表折成两行：名字一行，大小与时间一行 */
  .lx-uploads thead {
    display: none;
  }

  .lx-uploads tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.15rem 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--lx-border);
  }

  .lx-uploads tr:last-child {
    border-bottom: 0;
  }

  .lx-uploads td {
    padding: 0;
    border-bottom: 0;
  }

  .lx-uploads-name {
    grid-column: 1 / -1;
  }

  .lx-uploads-size {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lx-carousel-track {
    transition: none;
  }
}

/* ==========================================================================
   0.20.0（X75）公开前台首页
   --------------------------------------------------------------------------
   固定框架：页眉与页脚各占一行，只有 .lx-site-scroll 滚（和后台 .lx-shell 同一套做法，
   不用 position: fixed）。token / 主题 / 五层背景栈照旧，零颜色字面量。
   ========================================================================== */

.lx-site-body {
  height: 100dvh;
  overflow: hidden;
}

.lx-site-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100dvh;
}

.lx-site-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  width: 100%;
  max-width: 96rem;
  margin: 0 auto;
  padding: calc(0.85rem * var(--lx-space)) clamp(1.25rem, 3.5vw, 4rem);
}

.lx-site-top {
  border-bottom: 1px solid var(--lx-border);
  background: color-mix(in srgb, var(--lx-bg-base) 58%, transparent);
  backdrop-filter: blur(0.9rem) saturate(140%);
  -webkit-backdrop-filter: blur(0.9rem) saturate(140%);
}

.lx-site-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lx-site-inner {
  display: flex;
  flex-direction: column;
  gap: calc(1.5rem * var(--lx-space));
  width: 100%;
  max-width: 96rem;
  margin: 0 auto;
  padding: calc(1.5rem * var(--lx-space)) clamp(1.25rem, 3.5vw, 4rem) calc(2rem * var(--lx-space));
}

.lx-site-brand {
  font-family: var(--lx-font-brand);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--lx-fg);
  text-decoration: none;
}

.lx-site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.8125rem;
}

.lx-site-nav a {
  color: var(--lx-fg-3);
  text-decoration: none;
}

.lx-site-nav a:hover {
  color: var(--lx-fg);
}

.lx-site-jump {
  align-self: center;
  font-size: 0.875rem;
  color: var(--lx-fg-2);
  text-decoration: underline;
  text-decoration-color: var(--lx-border);
  text-underline-offset: 0.3em;
}

.lx-site-jump:hover {
  color: var(--lx-fg);
  text-decoration-color: var(--lx-accent-line);
}

.lx-site-hero {
  /* 0.36.10：右栏从装饰环放宽到运行图（20rem 以内），文案仍占主列 */
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  padding: calc(1.75rem * var(--lx-space)) calc(2.25rem * var(--lx-space));
  align-items: center;
}

.lx-site-section {
  display: grid;
  gap: calc(0.875rem * var(--lx-space));
}

.lx-site-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.lx-site-section-title {
  margin: 0;
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lx-fg-2);
}

.lx-site-section-kicker {
  margin: 0;
  font-size: 0.75rem;
  color: var(--lx-fg-4);
}

.lx-site-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(0.75rem * var(--lx-space));
}

.lx-site-feature {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: calc(1.1rem * var(--lx-space));
  background: var(--lx-surface-1);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-card);
}

.lx-site-feature-k {
  margin: 0;
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--lx-accent-text);
}

.lx-site-feature h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--lx-fg);
}

.lx-site-feature p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--lx-fg-3);
}

/* 0.35.x：能力卡序号（01–04）改用 DS 的 Rules Expanded——字号/字距与原「正文里的小数字」区分开，
 * 让 5 个随包字体族在公开前台全部落到真实字形（中文仍由 --lx-font-sans 的 CJK 回退承担）。 */
.lx-feature-n {
  margin: 0;
  font-family: var(--lx-font-expanded);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--lx-fg-4);
}

.lx-site-bounds {
  padding: calc(1.25rem * var(--lx-space));
  background: var(--lx-surface-1);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-card);
}

.lx-bounds-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--lx-fg-3);
}

.lx-bounds-list strong {
  color: var(--lx-fg);
}

.lx-site-foot {
  border-top: 1px solid var(--lx-border);
  background: color-mix(in srgb, var(--lx-bg-base) 58%, transparent);
  backdrop-filter: blur(0.9rem) saturate(140%);
  -webkit-backdrop-filter: blur(0.9rem) saturate(140%);
}

.lx-site-foot .lx-site-bar {
  /* X78：前台页脚整块居中——版权/标识一行，运行说明一行 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding-block: calc(0.7rem * var(--lx-space));
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  color: var(--lx-fg-4);
  text-align: center;
}

.lx-site-foot .lx-foot-copy {
  color: var(--lx-fg-3);
}

.lx-site-foot-note {
  margin: 0;
  color: var(--lx-fg-4);
}

/* X86：轮播点开的文章页——单栏、可读宽度
   0.36.4：46rem → 64rem。文章里经常有 5–7 列的表格，46rem 下每列只剩 90px，
   表格被挤成一行一个字；加宽后正文仍是一栏，表格能有正常的横向空间，
   1440 屏上正文占约七成宽度，不再两侧大片留白。 */
.lx-article {
  max-width: 64rem;
  margin: 0 auto;
}

.lx-article-kicker {
  margin: 0 0 0.5rem;
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--lx-accent-text);
}

.lx-article-title {
  margin: 0 0 1rem;
  font-family: var(--lx-font-title);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.25;
  color: var(--lx-fg);
  text-wrap: balance;
}

/* 0.26.0（X110）：文章时间戳——机器读 <time datetime>，人读日期 */
.lx-article-meta {
  margin: 0 0 1.2rem;
  font-family: var(--lx-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--lx-fg-3);
}

.lx-article-photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 1.25rem;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-card);
}

.lx-article-body {
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--lx-fg-2);
}

.lx-article-body p {
  margin: 0 0 0.9rem;
}

.lx-article-body h2,
.lx-article-body h3 {
  margin: 1.6rem 0 0.6rem;
  line-height: 1.35;
  color: var(--lx-fg);
}

.lx-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--lx-radius-md);
}

.lx-article-body a {
  color: var(--lx-accent-text);
}

.lx-article-body blockquote {
  margin: 1rem 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--lx-border);
  color: var(--lx-fg-3);
}

.lx-article-back {
  margin: 1.75rem 0 0;
}

/* 后台首页的状态带：从 hero 底栏改成独立块 */
.lx-vitals-block {
  padding: calc(1rem * var(--lx-space));
}

.lx-vitals-block .lx-vitals {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 1179px) {
  .lx-site-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .lx-site-main {
    height: 100dvh;
  }

  .lx-site-hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .lx-site-bar {
    padding-block: calc(0.7rem * var(--lx-space));
  }

  .lx-site-inner {
    padding-inline: 1rem;
  }

  .lx-site-features {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-site-nav {
    gap: 0.75rem;
  }

  .lx-site-foot .lx-site-bar {
    justify-content: flex-start;
    gap: 0.25rem;
  }
}

/* ==========================================================================
   0.24.0（X89）：工具带（一键选取 + 药丸滚轮）与日历时间
   ==========================================================================
   零颜色字面量：全部走 tokens.css / themes.css 的变量。
   工具带默认是「四按钮横排」，toolbar.js 加上 data-roller="on" 后才折叠成药丸，
   所以没有 JS 时功能不回退（见 templates/partials/toolbar.php）。
   ========================================================================== */

.lx-toolbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.6rem 0.85rem;
  background: var(--lx-card-bg);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-lg);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 0 var(--lx-bevel-light-soft);
}

.lx-toolbar-select {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.lx-toolbar-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--lx-fg-2);
}

.lx-toolbar-count {
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--lx-fg-4);
  font-variant-numeric: tabular-nums;
}

/* ---- 自绘复选框（原生 input 保留焦点与 indeterminate 语义） ---- */
.lx-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.lx-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.lx-check-box {
  position: relative;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid var(--lx-input-border);
  border-radius: 5px;
  background: var(--lx-input-bg);
  transition: background 120ms ease, border-color 120ms ease;
}

.lx-check:hover .lx-check-box {
  border-color: var(--lx-input-border-hover);
}

.lx-check input:checked + .lx-check-box,
.lx-check input:indeterminate + .lx-check-box {
  background: var(--lx-accent);
  border-color: var(--lx-accent);
}

.lx-check input:checked + .lx-check-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 2px solid var(--lx-btn-fg);
  border-top: 0;
  border-left: 0;
  transform: rotate(42deg);
}

.lx-check input:indeterminate + .lx-check-box::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--lx-btn-fg);
}

.lx-check input:focus-visible + .lx-check-box {
  outline: 2px solid var(--lx-ring);
  outline-offset: 2px;
}

/* ---- 胶囊：无 JS 时是横排按钮组，JS 折叠成单槽 ---- */
.lx-toolbar-roller {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  outline: none;
}

.lx-toolbar-roller:focus-visible {
  outline: 2px solid var(--lx-ring);
  outline-offset: 2px;
}

.lx-toolbar-track {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.lx-toolbar-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  height: 2.35rem;
  padding: 0 0.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-family: var(--lx-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lx-fg);
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}

.lx-toolbar-act[hidden] {
  display: none !important;
}

.lx-toolbar-act:hover {
  background: var(--lx-ghost-hover);
}

.lx-toolbar-act.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.lx-toolbar-act.is-disabled::before {
  content: "⊘";
  margin-right: 0.1rem;
  font-weight: 400;
}

.lx-toolbar-act.is-disabled:hover {
  background: transparent;
}

.lx-act-accent { color: var(--lx-accent-text); }
.lx-act-info   { color: var(--lx-info-text); }
.lx-act-warn   { color: var(--lx-warn-text); }
.lx-act-danger { color: var(--lx-danger-text); }

.lx-toolbar-arrow {
  font-size: 0.75rem;
  opacity: 0.6;
}

/* 折叠态：一个槽位，只露一项 */
.lx-toolbar[data-roller="on"] .lx-toolbar-roller {
  width: 9.6rem;
  height: 2.6rem;
  padding: 0 0.25rem;
  background: var(--lx-surface-2);
  border: 1px solid var(--lx-border);
  box-shadow:
    inset 0 1px 2px -1px var(--lx-bevel-dark),
    inset 0 -1px 2px -1px var(--lx-bevel-dark);
  overflow: hidden;
  cursor: ns-resize;
}

.lx-toolbar[data-roller="on"] .lx-toolbar-track {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.lx-toolbar[data-roller="on"] .lx-toolbar-act {
  height: 100%;
  width: 100%;
  padding: 0 0.5rem;
  animation: lx-act-in 140ms ease both;
}

.lx-toolbar[data-tone="accent"] .lx-toolbar-roller {
  background: var(--lx-accent-soft);
  border-color: var(--lx-accent-line);
  box-shadow: 0 0 0 1px var(--lx-accent-soft), 0 6px 18px -14px var(--lx-accent);
}

.lx-toolbar[data-tone="info"] .lx-toolbar-roller {
  background: var(--lx-info-soft);
  border-color: var(--lx-info-line);
  box-shadow: 0 0 0 1px var(--lx-info-soft), 0 6px 18px -14px var(--lx-info);
}

.lx-toolbar[data-tone="warn"] .lx-toolbar-roller {
  background: var(--lx-warn-soft);
  border-color: var(--lx-warn-line);
  box-shadow: 0 0 0 1px var(--lx-warn-soft), 0 6px 18px -14px var(--lx-warn);
}

.lx-toolbar[data-tone="danger"] .lx-toolbar-roller {
  background: var(--lx-danger-soft);
  border-color: var(--lx-danger-line);
  box-shadow: 0 0 0 1px var(--lx-danger-soft), 0 6px 18px -14px var(--lx-danger);
}

.lx-toolbar-caret {
  display: none;
  position: absolute;
  right: 0.7rem;
  font-size: 0.7rem;
  color: var(--lx-fg-4);
  pointer-events: none;
}

.lx-toolbar[data-roller="on"] .lx-toolbar-caret {
  display: inline;
}

.lx-toolbar-dots {
  display: none;
  gap: 0.3rem;
  align-items: center;
}

.lx-toolbar-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lx-border);
  transition: background 120ms ease, transform 120ms ease;
}

.lx-toolbar-dots i.is-on {
  background: var(--lx-accent);
  transform: scale(1.35);
}

.lx-toolbar[data-roller="on"] .lx-toolbar-dots {
  display: inline-flex;
}

.lx-toolbar-hint {
  margin: 0;
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--lx-fg-4);
}

.lx-toolbar-hint.is-blocked {
  color: var(--lx-warn-text);
}

.lx-toolbar.is-shake .lx-toolbar-roller,
.lx-toolbar-roller.is-shake {
  animation: lx-shake 220ms ease;
}

@keyframes lx-act-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lx-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  50%      { transform: translateX(3px); }
  75%      { transform: translateX(-2px); }
}

/* 删除确认条：覆盖在工具带下方 */
.lx-toolbar-confirm {
  position: absolute;
  right: 0.85rem;
  top: calc(100% + 0.4rem);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: var(--lx-bg);
  border: 1px solid var(--lx-danger-line);
  border-radius: var(--lx-radius-md);
  box-shadow: 0 14px 30px -18px var(--lx-danger);
}

.lx-toolbar-confirm[hidden] {
  display: none;
}

.lx-toolbar-confirm-k {
  font-size: 0.8125rem;
  color: var(--lx-fg-2);
}

.lx-toolbar-confirm-no,
.lx-toolbar-confirm-yes {
  height: 1.9rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--lx-border);
  background: transparent;
  color: var(--lx-fg-2);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.lx-toolbar-confirm-yes {
  border-color: var(--lx-danger-line);
  background: var(--lx-danger-soft);
  color: var(--lx-danger-text);
}

/* ==========================================================================
   日历时间
   ========================================================================== */

.lx-clock {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem;
  background: var(--lx-surface-1);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-lg);
}

.lx-clock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.lx-clock-ym {
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lx-fg-3);
}

.lx-clock-ym b {
  font-weight: 600;
  color: var(--lx-fg-2);
  font-variant-numeric: tabular-nums;
}

.lx-clock-live {
  font-family: var(--lx-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--lx-ok-text);
  text-transform: uppercase;
}

.lx-clock-live::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 0.3rem;
  border-radius: 50%;
  background: var(--lx-ok);
  box-shadow: 0 0 6px var(--lx-ok);
  vertical-align: 0.05em;
}

.lx-clock-live.is-browsing {
  color: var(--lx-fg-3);
}

.lx-clock-live.is-browsing::before {
  background: var(--lx-fg-4);
  box-shadow: none;
}

.lx-clock-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.lx-clock-nav-btn {
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 0.4rem;
  border: 1px solid var(--lx-border);
  border-radius: 999px;
  background: transparent;
  color: var(--lx-fg-3);
  font-size: 0.8125rem;
  cursor: pointer;
}

.lx-clock-nav-btn:hover {
  background: var(--lx-ghost-hover);
  color: var(--lx-fg);
}

.lx-clock-nav-today {
  font-size: 0.6875rem;
}

.lx-clock-date {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
}

.lx-clock-day {
  font-family: var(--lx-font-display);
  font-size: 3.1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--lx-fg);
  font-variant-numeric: tabular-nums;
}

.lx-clock-week {
  font-size: 0.8125rem;
  color: var(--lx-fg-3);
}

/* 大号日期那天的节点：节假日整条强调色，节令用软底 */
.lx-clock-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--lx-accent-line);
  border-radius: var(--lx-radius-md);
  background: var(--lx-accent);
  color: var(--lx-btn-fg);
  font-size: 0.75rem;
  line-height: 1.3;
}

.lx-clock-note[hidden] {
  display: none;
}

.lx-clock-note[data-kind="festival"] {
  background: var(--lx-accent-soft);
  color: var(--lx-accent-text);
}

.lx-clock-note-k {
  font-family: var(--lx-font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

.lx-clock-note-v {
  font-weight: 600;
}

.lx-clock-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.35rem;
  margin-top: -0.15rem;
}

.lx-clock-notes[hidden] {
  display: none;
}

.lx-clock-note-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.22rem;
  padding: 0.08rem 0.4rem;
  border: 1px solid var(--lx-border);
  border-radius: 999px;
  color: var(--lx-fg-3);
  font-size: 0.625rem;
  white-space: nowrap;
}

.lx-clock-note-chip b {
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--lx-fg-2);
  font-variant-numeric: tabular-nums;
}

.lx-clock-note-chip[data-kind="holiday"] {
  border-color: var(--lx-accent-line);
  background: var(--lx-accent-soft);
  color: var(--lx-accent-text);
}

.lx-clock-note-chip[data-kind="holiday"] b {
  color: var(--lx-accent-text);
}

.lx-clock-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.lx-clock-wd {
  padding-bottom: 0.15rem;
  text-align: center;
  font-family: var(--lx-font-mono);
  font-size: 0.625rem;
  color: var(--lx-fg-4);
}

.lx-clock-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--lx-fg-2);
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  cursor: default;
}

/* 有节点的日子在数字下方点一个点；节假日实心，节令半透明 */
.lx-clock-cell[data-kind]::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--lx-accent);
}

.lx-clock-cell[data-kind="festival"]::after {
  opacity: 0.5;
}

.lx-clock-cell.is-holiday {
  color: var(--lx-accent-text);
  font-weight: 600;
}

.lx-clock-cell.is-sel[data-kind]::after {
  background: var(--lx-btn-fg);
  opacity: 1;
}

button.lx-clock-cell {
  cursor: pointer;
}

button.lx-clock-cell:hover {
  background: var(--lx-ghost-hover);
}

.lx-clock-cell.is-out {
  opacity: 0.3;
}

.lx-clock-cell.is-today {
  box-shadow: inset 0 0 0 1px var(--lx-accent-line);
  color: var(--lx-accent-text);
  font-weight: 600;
}

.lx-clock-cell.is-sel {
  background: var(--lx-accent);
  color: var(--lx-btn-fg);
  box-shadow: 0 0 12px -4px var(--lx-accent);
}

.lx-clock-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
}

.lx-clock-pill {
  display: grid;
  place-items: center;
  min-width: 3.2rem;
  height: 2.45rem;
  padding: 0 0.5rem;
  border: 1px solid var(--lx-accent-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--lx-accent) 14%, var(--lx-surface-2));
  font-family: var(--lx-font-mono);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  color: var(--lx-accent-text);
  box-shadow: inset 0 1px 0 var(--lx-bevel-light-soft), 0 10px 22px -16px var(--lx-accent);
}

.lx-clock-pill.lx-clock-sec {
  border-color: var(--lx-accent);
  background: var(--lx-accent);
  color: var(--lx-btn-fg);
}

.lx-clock-pill[role="spinbutton"] {
  cursor: ns-resize;
}

.lx-clock-pill[role="spinbutton"]:focus-visible {
  outline: 2px solid var(--lx-ring);
  outline-offset: 2px;
}

.lx-clock-colon {
  font-family: var(--lx-font-mono);
  font-size: 1.1rem;
  color: var(--lx-fg-4);
}

/* 秒跳动只做明暗脉冲，不做上下位移：位移会把元素推出可视区边界，整块跟着晃 */
.lx-clock-sec.is-tick {
  animation: lx-sec-tick 220ms ease;
}

@keyframes lx-sec-tick {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

.lx-clock-actions {
  display: flex;
  justify-content: center;
  padding-top: 0.15rem;
}

.lx-clock-insert {
  height: 2rem;
  padding: 0 1.1rem;
  border: 1px solid var(--lx-accent-line);
  border-radius: 999px;
  background: var(--lx-accent-soft);
  color: var(--lx-accent-text);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.lx-clock-insert:hover {
  filter: brightness(1.08);
}

/* 编辑器里的小浮层：日期时间插入 */
.lx-clock-pop {
  /* 由 editor.js 在打开时按按钮位置定位（fixed，避免被编辑栏的 overflow 裁掉） */
  position: fixed;
  top: 5rem;
  left: 0;
  z-index: 60;
  width: 17rem;
  /* 视口太矮时内部滚动：宁可整块可滚，也不要被窗口切掉一半 */
  max-height: calc(100vh - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--lx-bg);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-lg);
  box-shadow: 0 20px 44px -24px var(--lx-fg);
}

.lx-clock-pop[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .lx-toolbar-act,
  .lx-toolbar-dots i,
  .lx-clock-sec.is-tick,
  .lx-toolbar.is-shake .lx-toolbar-roller {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   文件管理页
   ========================================================================== */

.lx-files-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(0.9rem * var(--lx-space));
  align-items: start;
}

.lx-files-main {
  display: grid;
  gap: calc(0.7rem * var(--lx-space));
  min-width: 0;
}

.lx-files-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--lx-border);
  padding-bottom: 0.15rem;
}

.lx-files-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.55rem 0.8rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--lx-fg-3);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.lx-files-tab:hover {
  color: var(--lx-fg);
}

.lx-files-tab[aria-current="page"] {
  color: var(--lx-accent-text);
  border-bottom-color: var(--lx-accent);
}

.lx-files-tab-n {
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  color: var(--lx-fg-4);
  font-variant-numeric: tabular-nums;
}

.lx-files-form {
  display: grid;
  gap: calc(0.6rem * var(--lx-space));
  min-width: 0;
}

.lx-files-notice {
  margin: 0;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--lx-ok-line);
  border-radius: var(--lx-radius-md);
  background: var(--lx-ok-soft);
  color: var(--lx-ok-text);
  font-size: 0.8125rem;
}

.lx-files-notice.is-bad {
  border-color: var(--lx-danger-line);
  background: var(--lx-danger-soft);
  color: var(--lx-danger-text);
}

.lx-file-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-file-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid transparent;
  border-radius: var(--lx-radius-md);
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.lx-file-row:hover {
  background: var(--lx-surface-2);
  border-color: var(--lx-border);
  transform: translateY(-1px);
}

.lx-file-row.is-selected {
  background: var(--lx-accent-soft);
  border-color: var(--lx-accent-line);
  box-shadow: inset 2px 0 0 0 var(--lx-accent);
}

.lx-file-check {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--lx-accent);
  cursor: pointer;
}

.lx-file-badge {
  display: inline-grid;
  place-items: center;
  min-width: 2.4rem;
  height: 1.55rem;
  padding: 0 0.35rem;
  border: 1px solid var(--lx-border);
  border-radius: 999px;
  background: var(--lx-surface-2);
  font-family: var(--lx-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lx-fg-3);
}

.lx-file-badge.is-md {
  border-color: var(--lx-info-line);
  background: var(--lx-info-soft);
  color: var(--lx-info-text);
}

.lx-file-badge.is-html {
  border-color: var(--lx-accent-line);
  background: var(--lx-accent-soft);
  color: var(--lx-accent-text);
}

.lx-file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lx-fg);
  text-decoration: none;
}

.lx-file-name:hover {
  color: var(--lx-accent-text);
}

.lx-file-meta {
  display: flex;
  gap: 0.55rem;
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  color: var(--lx-fg-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lx-file-peek {
  min-width: 0;
  overflow: hidden;
  margin: 0 0 0.3rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--lx-border);
  border-left: 2px solid var(--lx-accent);
  border-radius: var(--lx-radius-md);
  background: var(--lx-surface-2);
}

.lx-file-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
}

.lx-file-fields div {
  display: grid;
  gap: 0.1rem;
}

.lx-file-fields dt {
  font-family: var(--lx-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lx-fg-4);
}

.lx-file-fields dd {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--lx-fg-2);
  word-break: break-all;
}

.lx-file-preview {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.875rem;
  color: var(--lx-fg-2);
  line-height: 1.6;
}

.lx-file-preview img,
.lx-file-preview video,
.lx-file-preview iframe,
.lx-file-preview table {
  max-width: 100%;
  height: auto;
}

.lx-file-preview pre {
  max-width: 100%;
  overflow-x: auto;
}

.lx-file-item {
  min-width: 0;
}

.lx-file-preview :first-child {
  margin-top: 0;
}

.lx-file-preview :last-child {
  margin-bottom: 0;
}

.lx-file-rename {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.15rem 0 0.35rem 2.2rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--lx-accent-line);
  border-radius: var(--lx-radius-md);
  background: var(--lx-accent-soft);
}

.lx-file-rename input {
  flex: 1 1 12rem;
  min-height: 2rem;
  padding: 0 0.6rem;
  border: 1px solid var(--lx-input-border);
  border-radius: var(--lx-radius-control);
  background: var(--lx-input-bg);
  color: var(--lx-fg);
  font-size: 0.8125rem;
}

.lx-file-rename button {
  height: 2rem;
  padding: 0 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--lx-border);
  background: transparent;
  color: var(--lx-fg-2);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.lx-file-rename button[type="submit"] {
  border-color: var(--lx-accent-line);
  background: var(--lx-accent);
  color: var(--lx-btn-fg);
}

.lx-files-empty {
  margin: 0;
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--lx-fg-3);
  border: 1px dashed var(--lx-border);
  border-radius: var(--lx-radius-lg);
}

.lx-files-note {
  margin: 0;
  font-family: var(--lx-font-mono);
  font-size: 0.625rem;
  color: var(--lx-fg-4);
}

@media (max-width: 1100px) {
  .lx-files-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .lx-toolbar {
    gap: 0.4rem 0.6rem;
  }

  .lx-toolbar[data-roller="on"] .lx-toolbar-roller {
    width: 8.6rem;
  }

  .lx-file-row {
    grid-template-columns: auto auto minmax(0, 1fr);
    row-gap: 0.2rem;
  }

  .lx-file-tail {
    grid-column: 2 / -1;
  }

  .lx-file-meta {
    font-size: 0.625rem;
  }
}

.lx-file-peek-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--lx-border);
}

.lx-file-peek-close {
  font-size: 0.75rem;
  color: var(--lx-fg-3);
  text-decoration: none;
}

.lx-file-peek-close:hover {
  color: var(--lx-accent-text);
}

/* 编辑器：日期时间浮层的锚点与内嵌卡片（浮层已有边框，里面的日历不再套一层） */
.lx-has-pop {
  position: relative;
}

.lx-clock-pop .lx-clock {
  border: 0;
  background: transparent;
}

/* 0.24.0（X92）：仪表板顶栏——状态带 + 关键指标在左，日历时间在右 */
.lx-home-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: calc(1rem * var(--lx-space));
  align-items: start;
  min-width: 0;
}

.lx-home-main {
  display: grid;
  gap: calc(1rem * var(--lx-space));
  min-width: 0;
}

.lx-home-clock {
  min-width: 0;
}

@media (max-width: 1100px) {
  .lx-home-top {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 0.24.0（X93）：文件列表缩略图与浏览原图 */
.lx-file-thumb-link {
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 7px;
  line-height: 0;
}

.lx-file-thumb-link:hover .lx-file-thumb,
.lx-file-thumb-link:hover .lx-file-thumb-frame {
  border-color: var(--lx-accent-line);
}

.lx-file-thumb-link:focus-visible {
  outline: 2px solid var(--lx-accent-line);
  outline-offset: 2px;
}

.lx-file-thumb {
  width: 2rem;
  height: 2rem;
  border-radius: 7px;
  object-fit: cover;
  background: var(--lx-surface-2);
  border: 1px solid var(--lx-border);
}

/* 0.35.4：视频缩略图——首帧 + 播放角标，点整块直接打开视频 */
.lx-file-thumb-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  border: 1px solid var(--lx-border);
  border-radius: 7px;
  background: var(--lx-surface-2);
}

.lx-file-thumb-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.lx-file-play {
  position: absolute;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--lx-bg-base) 60%, transparent);
  pointer-events: none;
}

.lx-file-play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 0.1rem;
  border-top: 0.25rem solid transparent;
  border-bottom: 0.25rem solid transparent;
  border-left: 0.38rem solid var(--lx-fg);
}

.lx-file-tail {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.lx-file-info {
  flex: none;
  padding: 1px 7px;
  border: 1px solid var(--lx-border);
  border-radius: 999px;
  color: var(--lx-fg-3);
  font-size: 0.6875rem;
  line-height: 1.5;
  text-decoration: none;
}

.lx-file-info:hover {
  color: var(--lx-accent-text);
  border-color: var(--lx-accent-line);
}

.lx-file-image-link {
  display: block;
  margin-bottom: 0.7rem;
}

.lx-file-image {
  display: block;
  max-width: 100%;
  max-height: 22rem;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: var(--lx-radius-md);
  border: 1px solid var(--lx-border);
  background: var(--lx-surface-2);
}

.lx-file-video {
  display: block;
  width: 100%;
  max-height: 24rem;
  margin: 0 0 0.7rem;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-md);
  background: var(--lx-bg-base);
}

/* 编辑器：保存与发布并排 */
.lx-editor-footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.lx-editor-publish {
  border: 1px solid var(--lx-accent-line);
  background: var(--lx-accent-soft);
  color: var(--lx-accent-text);
}

.lx-editor-publish:hover {
  filter: brightness(1.08);
}

/* ==========================================================================
   0.24.0（X97）：所见即所得——编辑器预览与文章页共用同一套正文样式
   ==========================================================================
   轮播/文章正文在编辑器里看到的排版必须与 /p/<id> 一致；
   尤其表格：编辑器早就有边框与内边距，文章页没有，导致同一篇内容"在编辑器里是表、
   发出去变成一串字"。这里把两处合成一组选择器，改一处两边一起变。
   ========================================================================== */

.lx-article-body,
.lx-editor-preview {
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--lx-fg-2);
}

.lx-article-body p,
.lx-editor-preview p {
  margin: 0 0 0.9rem;
}

.lx-article-body h1,
.lx-editor-preview h1 {
  margin: 1.6rem 0 0.6rem;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--lx-fg);
}

.lx-article-body h2,
.lx-editor-preview h2 {
  margin: 1.6rem 0 0.6rem;
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--lx-fg);
}

.lx-article-body h3,
.lx-editor-preview h3 {
  margin: 1.4rem 0 0.55rem;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--lx-fg);
}

.lx-article-body ul,
.lx-article-body ol,
.lx-editor-preview ul,
.lx-editor-preview ol {
  margin: 0 0 0.9rem;
  padding-left: 1.4em;
}

.lx-article-body li,
.lx-editor-preview li {
  margin: 0.2rem 0;
}

.lx-article-body blockquote,
.lx-editor-preview blockquote {
  margin: 1rem 0;
  padding: 0.2em 0 0.2em 0.9em;
  border-inline-start: 2px solid var(--lx-border);
  color: var(--lx-fg-3);
}

.lx-article-body img,
.lx-editor-preview img,
.lx-editor-preview video,
.lx-manual-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--lx-radius-md);
}

/* 0.36.5：图片居中。
   Markdown 里「文字一行、图片另起一行」不会产生新段落，图片仍是 <p> 的行内子节点；
   所以按「图片是段落里最后一个元素」来判定：把它改成块级并左右自动外边距，正文文字
   保持左对齐，图片单独居中。和文字真正混排（图片后面还有字）的保持行内。
   浏览器不支持 :has 时保持原来的左对齐。 */
.lx-article-body p:has(> img:last-child) > img,
.lx-editor-preview p:has(> img:last-child) > img,
.lx-manual-body p:has(> img:last-child) > img,
.lx-article-body p:has(> a:last-child) > a > img,
.lx-editor-preview p:has(> a:last-child) > a > img,
.lx-manual-body p:has(> a:last-child) > a > img {
  display: block;
  margin-inline: auto;
}

.lx-article-body > img,
.lx-editor-preview > img,
.lx-manual-body > img,
.lx-article-body figure > img,
.lx-editor-preview figure > img,
.lx-manual-body figure > img {
  display: block;
  margin-inline: auto;
}

.lx-article-body a,
.lx-editor-preview a {
  color: var(--lx-accent-text);
}

.lx-article-body code,
.lx-editor-preview code {
  padding: 0.1em 0.35em;
  border-radius: var(--lx-radius-sm);
  background: var(--lx-surface-2);
  font-family: var(--lx-font-mono);
  font-size: 0.85em;
}

.lx-article-body pre,
.lx-editor-preview pre {
  margin: 0.9rem 0;
  padding: 0.75rem;
  border-radius: var(--lx-radius-sm);
  background: var(--lx-surface-2);
  overflow-x: auto;
}

.lx-article-body pre code,
.lx-editor-preview pre code {
  padding: 0;
  background: transparent;
}

/* 表格：两边同一套边框、内边距与表头底色 */
.lx-article-body table,
.lx-editor-preview table {
  width: 100%;
  margin: 0.9rem 0;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.6;
}

.lx-article-body th,
.lx-article-body td,
.lx-editor-preview th,
.lx-editor-preview td {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--lx-border);
  text-align: left;
  vertical-align: top;
}

.lx-article-body thead th,
.lx-editor-preview thead th {
  background: var(--lx-surface-2);
  color: var(--lx-fg);
  font-weight: 600;
}

.lx-article-body tbody tr:nth-child(even),
.lx-editor-preview tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--lx-surface-2) 55%, transparent);
}

/* 0.36.3：表格列对齐。转换器把对齐写成 align 属性（白名单保留），这里覆盖默认的 text-align: left */
.lx-article-body th[align="center"],
.lx-article-body td[align="center"],
.lx-editor-preview th[align="center"],
.lx-editor-preview td[align="center"] {
  text-align: center;
}

.lx-article-body th[align="right"],
.lx-article-body td[align="right"],
.lx-editor-preview th[align="right"],
.lx-editor-preview td[align="right"] {
  text-align: right;
}

/* ---------- 0.25.1：站点 logo（public/assets/img/logo.webp） ----------
   页眉 / 后台侧栏 / 登录页 / 页脚共用一个资产。尺寸在这里统一放大，
   <img> 上的 width/height 只作为无 CSS 时的兜底（防止布局跳动）。
   球体本身是圆形，border-radius: 50% 让阴影/描边跟着圆走，不出现方框。 */
.lx-logo {
  display: inline-block;
  flex: none;
  object-fit: contain;
  vertical-align: middle;
}

.lx-site-brand,
.lx-brand-mark,
.lx-login-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

/* 前台页眉：主视觉尺寸 + 身后一团暖色聚光，让球体"落地"而不是贴在背景上 */
.lx-site-brand {
  position: relative;
  /* 建独立层叠上下文：负 z-index 的聚光只压在本元素下面、页眉背景上面 */
  isolation: isolate;
}

.lx-site-brand::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 50%;
  width: 86px;
  height: 86px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--lx-danger) 30%, transparent) 0%,
    color-mix(in srgb, var(--lx-danger) 10%, transparent) 45%,
    transparent 72%
  );
  pointer-events: none;
  z-index: -1;
}

.lx-site-brand .lx-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--lx-fg) 14%, transparent),
    0 12px 28px var(--lx-bevel-dark);
}

.lx-site-brand span {
  font-size: 1.75rem;
  letter-spacing: 0.07em;
}

/* 页眉给主视觉多一点呼吸（只作用于前台顶栏，不影响页脚） */
.lx-site-top .lx-site-bar {
  padding-top: calc(1.1rem * var(--lx-space));
  padding-bottom: calc(1.1rem * var(--lx-space));
}

/* 登录页：第一眼，比后台更大一档 */
.lx-login-brand .lx-logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--lx-fg) 12%, transparent),
    0 10px 24px var(--lx-bevel-dark);
}

/* 后台侧栏：受栏宽限制，32px 足够，不抢导航 */
.lx-brand-mark .lx-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: 0 4px 14px var(--lx-bevel-dark);
}

/* 页脚：保持小尺寸，只做记号 */
img.lx-mark {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 50%;
}

@media (max-width: 640px) {
  .lx-site-brand .lx-logo {
    width: 36px;
    height: 36px;
  }

  .lx-site-brand::before {
    width: 58px;
    height: 58px;
  }

  .lx-site-brand span {
    font-size: 1.4rem;
  }
}

/* 0.27.0（X115）：资讯页 */
.lx-news-head {
  padding: 44px 0 10px;
}

.lx-news-title {
  font-family: var(--lx-font-title);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.15;
  margin: 6px 0 10px;
  color: var(--lx-fg);
}

.lx-news-lede {
  max-width: 62ch;
  margin: 0;
  color: var(--lx-fg-2);
  line-height: 1.75;
}

.lx-news-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.lx-news-switch a {
  padding: 5px 13px;
  border: 1px solid var(--lx-border);
  border-radius: 999px;
  color: var(--lx-fg-3);
  font-size: 13px;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}

.lx-news-switch a:hover {
  color: var(--lx-fg);
  border-color: var(--lx-accent-line);
}

.lx-news-switch a.is-on {
  color: var(--lx-fg);
  border-color: var(--lx-accent-line);
  background: var(--lx-accent-soft);
}

.lx-news-rss {
  margin-left: auto;
  font-family: var(--lx-font-mono);
  letter-spacing: .08em;
}

.lx-news-group {
  margin-top: 34px;
}

.lx-news-gh {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lx-border);
}

.lx-news-gh h2 {
  margin: 0;
  font-size: 15px;
  letter-spacing: .16em;
  color: var(--lx-fg-2);
}

.lx-news-gh span {
  font-size: 12px;
  color: var(--lx-fg-4);
}

.lx-news-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.lx-news-card {
  padding: 18px 20px;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-lg);
  background: var(--lx-surface-1);
}

.lx-news-card:hover {
  border-color: var(--lx-accent-line);
}

.lx-news-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--lx-fg-3);
  font-size: 12px;
}

.lx-news-badge {
  padding: 1px 9px;
  border: 1px solid var(--lx-border);
  border-radius: 999px;
  letter-spacing: .08em;
}

.lx-news-badge--major {
  color: var(--lx-fg);
  border-color: var(--lx-accent-line);
  background: var(--lx-accent-soft);
}

.lx-news-card-title {
  margin: 10px 0 6px;
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--lx-fg);
}

.lx-news-card-line {
  margin: 0 0 10px;
  color: var(--lx-fg-2);
  line-height: 1.75;
}

.lx-news-src {
  margin: 0;
  color: var(--lx-fg-3);
  font-size: 12px;
}

.lx-news-src a {
  color: var(--lx-fg-2);
  text-decoration: none;
  border-bottom: 1px dotted var(--lx-border);
}

.lx-news-src a:hover {
  color: var(--lx-fg);
  border-bottom-color: var(--lx-accent-line);
}

.lx-news-empty {
  margin-top: 34px;
  padding: 28px 24px;
  border: 1px dashed var(--lx-border);
  border-radius: var(--lx-radius-lg);
  color: var(--lx-fg-2);
}

.lx-news-empty h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: var(--lx-fg);
}

.lx-news-empty p {
  margin: 4px 0;
  line-height: 1.7;
}

.lx-news-empty-meta {
  color: var(--lx-fg-3);
  font-size: 12px;
}

.lx-news-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 44px;
  padding-top: 14px;
  border-top: 1px solid var(--lx-border);
  color: var(--lx-fg-4);
  font-size: 12px;
}

@media (max-width: 640px) {
  .lx-news-head {
    padding-top: 28px;
  }

  .lx-news-card {
    padding: 15px 16px;
  }
}

/* 0.27.0（X115 修订）：事件详情页 */
.lx-news-more {
  margin-left: 10px;
  color: var(--lx-fg-2);
  border-bottom: 0 !important;
  white-space: nowrap;
}

.lx-news-article {
  max-width: 70ch;
  padding: 42px 0 64px;
}

.lx-news-article-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--lx-fg-3);
  font-size: 12px;
}

.lx-news-article-title {
  margin: 14px 0 10px;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  line-height: 1.35;
  color: var(--lx-fg);
}

.lx-news-article-lede {
  margin: 0;
  color: var(--lx-fg-2);
  font-size: 1.04rem;
  line-height: 1.85;
}

.lx-news-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 24px 0 26px;
  padding: 14px 0;
  border-top: 1px solid var(--lx-border);
  border-bottom: 1px solid var(--lx-border);
}

.lx-news-facts div {
  margin: 0;
}

.lx-news-facts dt {
  color: var(--lx-fg-3);
  font-size: 11px;
  letter-spacing: .08em;
}

.lx-news-facts dd {
  margin: 3px 0 0;
  color: var(--lx-fg);
  font-size: 14px;
}

.lx-news-body p {
  margin: 0 0 15px;
  color: var(--lx-fg);
  line-height: 1.95;
}

.lx-news-attrib {
  margin-top: 18px !important;
  padding-left: 10px;
  border-left: 2px solid var(--lx-border);
  color: var(--lx-fg-3) !important;
  font-size: 12px;
}

.lx-news-nobody {
  margin: 0;
  padding: 18px 16px;
  border: 1px dashed var(--lx-border);
  border-radius: var(--lx-radius-lg);
  color: var(--lx-fg-3);
  line-height: 1.75;
}

.lx-news-timeline {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--lx-border);
}

.lx-news-timeline h2 {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--lx-fg-2);
}

.lx-news-timeline ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-news-timeline li {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 0;
  color: var(--lx-fg-2);
  font-size: 13px;
}

.lx-news-timeline time {
  color: var(--lx-fg-3);
  font-size: 12px;
}

.lx-news-timeline a {
  color: var(--lx-fg-2);
  text-decoration: none;
  border-bottom: 1px dotted var(--lx-border);
}

.lx-news-back {
  margin-top: 34px;
}

.lx-news-back a {
  color: var(--lx-fg-3);
  text-decoration: none;
}

/* 0.27.0（X115）：后台资讯管理 */
.lx-feed-admin {
  max-width: 1120px;
}

.lx-feed-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 22px 0 12px;
}

.lx-feed-stats div {
  padding: 12px 14px;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-lg);
  background: var(--lx-surface-1);
}

.lx-feed-stats span {
  display: block;
  color: var(--lx-fg-3);
  font-size: 11px;
  letter-spacing: .08em;
}

.lx-feed-stats strong {
  display: block;
  margin-top: 4px;
  color: var(--lx-fg);
  font-size: 1.15rem;
  font-weight: 500;
}

.lx-feed-stats .lx-feed-when {
  font-size: 12px;
  font-weight: 400;
  color: var(--lx-fg-2);
}

.lx-feed-run {
  margin: 0 0 8px;
  color: var(--lx-fg-3);
  font-size: 12px;
}

.lx-feed-note {
  margin: 14px 0;
  padding: 9px 12px;
  border-radius: var(--lx-radius-md);
  border: 1px solid var(--lx-border);
  font-size: 13px;
}

.lx-feed-note--ok {
  color: var(--lx-fg);
  background: var(--lx-accent-soft);
  border-color: var(--lx-accent-line);
}

.lx-feed-note--bad {
  color: var(--lx-fg);
  background: var(--lx-danger-soft);
  border-color: var(--lx-danger-line);
}

.lx-feed-block {
  margin-top: 28px;
}

.lx-feed-block h2 {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--lx-fg-2);
}

.lx-feed-block h2 span {
  margin-left: 6px;
  color: var(--lx-fg-4);
  font-size: 12px;
}

.lx-feed-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-lg);
}

.lx-feed-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.lx-feed-table th {
  padding: 9px 12px;
  text-align: left;
  color: var(--lx-fg-3);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--lx-border);
  background: var(--lx-surface-2);
  white-space: nowrap;
}

.lx-feed-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--lx-border);
  color: var(--lx-fg-2);
  vertical-align: top;
}

.lx-feed-table tr:last-child td {
  border-bottom: 0;
}

.lx-feed-num {
  font-family: var(--lx-font-mono);
  color: var(--lx-fg-3);
  white-space: nowrap;
}

.lx-feed-when {
  color: var(--lx-fg-3);
  font-size: 12px;
  white-space: nowrap;
}

.lx-feed-err {
  color: var(--lx-fg-3);
  font-size: 12px;
  max-width: 320px;
  word-break: break-word;
}

.lx-feed-cur {
  color: var(--lx-fg);
}

.lx-feed-why {
  margin-top: 3px;
  color: var(--lx-fg-4);
  font-size: 12px;
}

.lx-feed-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-width: 260px;
}

.lx-feed-form input,
.lx-feed-form textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
  background: var(--lx-surface-2);
  color: var(--lx-fg);
  font-size: 12px;
  font-family: inherit;
}

.lx-feed-form textarea {
  min-height: 58px;
  resize: vertical;
  line-height: 1.6;
}

.lx-feed-form button,
.lx-feed-ops form button {
  justify-self: start;
  padding: 5px 12px;
  border: 1px solid var(--lx-accent-line);
  border-radius: 999px;
  background: var(--lx-accent-soft);
  color: var(--lx-fg);
  font-size: 12px;
  cursor: pointer;
}

.lx-feed-ops {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.lx-feed-ops a {
  color: var(--lx-fg-2);
  text-decoration: none;
  border-bottom: 1px dotted var(--lx-border);
}

.lx-feed-ops form {
  display: inline;
}

.lx-feed-danger {
  border-color: var(--lx-danger-line) !important;
  background: var(--lx-danger-soft) !important;
}

.lx-feed-empty {
  margin: 0;
  padding: 14px 12px;
  border: 1px dashed var(--lx-border);
  border-radius: var(--lx-radius-lg);
  color: var(--lx-fg-3);
  font-size: 13px;
}

.lx-feed-hint {
  margin: 10px 0 0;
  color: var(--lx-fg-4);
  font-size: 12px;
}

.lx-feed-hint code {
  font-family: var(--lx-font-mono);
  color: var(--lx-fg-2);
}

/* 0.27.0（X115 视觉定稿）：方形卡片 —— 前后台统一用系统 token。
 * 只覆盖几何与排版；颜色仍全部来自 --lx-*，不引入任何字面量。 */

/* ---- 前台资讯流 ---- */
.lx-news-head {
  padding-top: 26px;
  border-bottom: 1px solid var(--lx-border);
  padding-bottom: 16px;
}

.lx-news-title {
  letter-spacing: .02em;
}

.lx-news-switch {
  margin-top: 16px;
}

.lx-news-switch a {
  border-radius: 0;
  padding: 6px 14px;
  font-family: var(--lx-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
}

.lx-news-gh {
  border-bottom: 1px solid var(--lx-border);
}

.lx-news-gh h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .2em;
}

.lx-news-gh h2::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--lx-accent-line);
}

.lx-news-gh span {
  margin-left: 2px;
  padding: 1px 7px;
  border: 1px solid var(--lx-border);
  font-family: var(--lx-font-mono);
  font-size: 11px;
  color: var(--lx-fg-3);
}

.lx-news-list {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.lx-news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: 20px 22px 16px;
  border-radius: 0;
  background: var(--lx-surface-1);
  border: 1px solid var(--lx-border);
  transition: background .16s ease, border-color .16s ease;
}

.lx-news-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--lx-border);
  transition: background .16s ease, width .16s ease;
}

.lx-news-card--major::before {
  background: var(--lx-accent-line);
}

.lx-news-card:hover {
  background: var(--lx-surface-2);
  border-color: var(--lx-accent-line);
}

.lx-news-card:hover::before {
  width: 4px;
  background: var(--lx-accent-line);
}

.lx-news-meta {
  gap: 9px;
  font-size: 11px;
  font-family: var(--lx-font-mono);
  letter-spacing: .02em;
}

.lx-news-badge {
  padding: 1px 8px;
  border-radius: 0;
  letter-spacing: .12em;
  font-size: 10px;
}

.lx-news-card-title {
  margin: 11px 0 8px;
  font-size: 1.07rem;
  line-height: 1.58;
  letter-spacing: .01em;
}

.lx-news-card-line {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.8;
}

.lx-news-src {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--lx-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 11.5px;
}

.lx-news-src a {
  border-bottom: 0;
  color: var(--lx-fg-3);
}

.lx-news-src a:hover {
  color: var(--lx-fg);
}

.lx-news-more {
  margin-left: auto;
  color: var(--lx-fg-2);
  font-family: var(--lx-font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  border: 1px solid var(--lx-border);
  padding: 2px 8px;
}

.lx-news-more:hover {
  border-color: var(--lx-accent-line);
  color: var(--lx-fg);
}

.lx-news-foot {
  border-top: 1px solid var(--lx-border);
}

/* ---- 前台详情 ---- */
.lx-news-article {
  padding-top: 36px;
}

.lx-news-facts {
  border-radius: 0;
  background: var(--lx-surface-1);
  padding: 16px 18px;
  border: 1px solid var(--lx-border);
}

.lx-news-facts dd {
  font-family: var(--lx-font-mono);
  font-size: 13px;
}

.lx-news-nobody {
  border-radius: 0;
}

.lx-news-attrib {
  border-left: 3px solid var(--lx-accent-line);
}

.lx-news-timeline li {
  border-bottom: 1px dotted var(--lx-border);
}

.lx-news-timeline li:last-child {
  border-bottom: 0;
}

/* ---- 后台资讯管理 ---- */
.lx-feed-stats div {
  border-radius: 0;
  border-top: 2px solid var(--lx-accent-line);
  background: var(--lx-surface-1);
}

.lx-feed-stats strong {
  font-family: var(--lx-font-mono);
}

.lx-feed-note,
.lx-feed-tablewrap,
.lx-feed-empty {
  border-radius: 0;
}

.lx-feed-block h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lx-feed-block h2::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--lx-accent-line);
}

.lx-feed-table th {
  font-family: var(--lx-font-mono);
  letter-spacing: .1em;
}

.lx-feed-table tbody tr:hover td {
  background: var(--lx-surface-2);
}

.lx-feed-form input,
.lx-feed-form textarea,
.lx-feed-form button,
.lx-feed-ops form button {
  border-radius: 0;
}

.lx-feed-form button,
.lx-feed-ops form button {
  font-family: var(--lx-font-mono);
  letter-spacing: .04em;
}

.lx-feed-more {
  color: var(--lx-fg-3);
}

@media (max-width: 760px) {
  .lx-news-list {
    grid-template-columns: 1fr;
  }

  .lx-news-card {
    min-height: 0;
    padding: 16px 16px 14px;
  }

  .lx-feed-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 0.27.0（视觉修订）：后台资讯页的收尾 */
.lx-feed-lede {
  margin: 0 0 4px;
  color: var(--lx-fg-2);
  font-size: 13px;
  line-height: 1.7;
}

.lx-feed-table {
  table-layout: fixed;
}

/* 列宽按表分开，避免已发布表被待人工表的列宽挤歪 */
.lx-feed-table--drafts th:nth-child(1),
.lx-feed-table--drafts td:nth-child(1) { width: 34px; }

.lx-feed-table--drafts th:nth-child(2),
.lx-feed-table--drafts td:nth-child(2) { width: 46px; }

.lx-feed-table--drafts th:nth-child(3),
.lx-feed-table--drafts td:nth-child(3) { width: 60px; }

.lx-feed-table--drafts th:nth-child(4),
.lx-feed-table--drafts td:nth-child(4) { width: 54px; }

.lx-feed-table--drafts th:nth-child(5),
.lx-feed-table--drafts td:nth-child(5) { width: 46px; }

.lx-feed-table--drafts th:nth-child(6),
.lx-feed-table--drafts td:nth-child(6) { width: 62px; }

.lx-feed-table--drafts th:last-child,
.lx-feed-table--drafts td:last-child { width: 330px; }

.lx-feed-table--published th:nth-child(1),
.lx-feed-table--published td:nth-child(1) { width: 46px; }

.lx-feed-table--published th:nth-child(3),
.lx-feed-table--published td:nth-child(3) { width: 150px; }

.lx-feed-table--published th:nth-child(4),
.lx-feed-table--published td:nth-child(4) { width: 50px; }

.lx-feed-table--published th:last-child,
.lx-feed-table--published td:last-child { width: 150px; }

.lx-feed-table--health th:nth-child(2),
.lx-feed-table--health td:nth-child(2) { width: 150px; }

.lx-feed-table--health th:nth-child(3),
.lx-feed-table--health td:nth-child(3) { width: 50px; }

.lx-feed-pick {
  width: 34px !important;
  text-align: center;
}

.lx-feed-pick input {
  width: 14px;
  height: 14px;
  accent-color: var(--lx-accent-line);
  cursor: pointer;
}

.lx-feed-blockhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.lx-feed-blockhead h2 {
  margin: 0;
}

.lx-feed-bulk button {
  padding: 5px 12px;
  border: 1px solid var(--lx-danger-line);
  border-radius: 0;
  background: var(--lx-danger-soft);
  color: var(--lx-fg);
  font-family: var(--lx-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  cursor: pointer;
}

.lx-feed-table td:nth-child(5) {
  overflow-wrap: anywhere;
}

/* 重大卡片在宽屏上占两列，别让一行只放一张小卡 */
@media (min-width: 900px) {
  .lx-news-card--major {
    grid-column: span 2;
  }
}

/* 0.29.1（X133）：资讯列表/详情可读性与版式收口。
 * 只改几何与排版，颜色仍全部来自 token。 */

.lx-news-card-title a {
  color: inherit;
  text-decoration: none;
}

.lx-news-card-title a:hover {
  color: var(--lx-fg);
}

.lx-news-card:focus-within {
  border-color: var(--lx-accent-line);
}

.lx-news-card-title a:focus-visible,
.lx-news-more:focus-visible,
.lx-news-src a:focus-visible {
  outline: 2px solid var(--lx-accent-line);
  outline-offset: 2px;
}

.lx-news-src-label {
  font-family: var(--lx-font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lx-fg-4);
}

.lx-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  width: 100%;
  margin: 0;
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  letter-spacing: .06em;
  line-height: 1.6;
}

.lx-crumb a {
  color: var(--lx-fg-3);
  text-decoration: none;
}

.lx-crumb a:hover {
  color: var(--lx-fg);
}

.lx-crumb [aria-current="page"] {
  color: var(--lx-fg-2);
}

.lx-crumb-sep {
  color: var(--lx-fg-4);
}

.lx-crumb--news {
  max-width: 84rem;
  margin-inline: auto;
}

.lx-news-crumb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 8px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 18px 0 0;
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 11px;
  letter-spacing: .06em;
}

.lx-news-crumb a {
  color: var(--lx-fg-3);
  text-decoration: none;
}

.lx-news-crumb a:hover {
  color: var(--lx-fg);
}

.lx-news-layout {
  display: grid;
  /* 正文列与 .lx-article（64rem）同宽；侧栏保留，整体按文章宽度 + 侧栏增长 */
  grid-template-columns: minmax(0, 64rem) minmax(14rem, 1fr);
  width: 100%;
  gap: 48px;
  align-items: start;
  max-width: 84rem;
  margin: 0 auto;
}

.lx-news-layout .lx-news-article {
  max-width: 64rem;
  padding: 18px 0 64px;
}

.lx-news-origin {
  margin-left: auto;
  color: var(--lx-fg-3);
  font-family: var(--lx-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: 1px dotted var(--lx-border);
}

.lx-news-origin:hover {
  color: var(--lx-fg);
  border-bottom-color: var(--lx-accent-line);
}

.lx-news-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--lx-border);
  color: var(--lx-fg-3);
  font-family: var(--lx-font-mono);
  font-size: 11px;
  letter-spacing: .06em;
}

.lx-news-end a {
  color: var(--lx-fg-2);
  text-decoration: none;
  border-bottom: 1px dotted var(--lx-border);
}

.lx-news-end a:hover {
  color: var(--lx-fg);
  border-bottom-color: var(--lx-accent-line);
}

.lx-news-related {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--lx-border);
}

.lx-news-related h2,
.lx-news-aside h2 {
  margin: 0 0 10px;
  color: var(--lx-fg-2);
  font-family: var(--lx-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.lx-news-related ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-news-related li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dotted var(--lx-border);
}

.lx-news-related li:last-child {
  border-bottom: 0;
}

.lx-news-related a {
  color: var(--lx-fg);
  font-size: 13.5px;
  line-height: 1.6;
  text-decoration: none;
}

.lx-news-related a:hover {
  color: var(--lx-accent-text);
}

.lx-news-related span {
  flex: none;
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 10px;
}

.lx-news-aside {
  position: sticky;
  top: calc(var(--lx-header) + 24px);
  padding-top: 22px;
}

.lx-news-aside section {
  padding: 0 0 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--lx-border);
}

.lx-news-aside section:last-of-type {
  border-bottom: 0;
}

.lx-news-aside .lx-news-timeline {
  margin: 0;
  padding: 0;
  border-top: 0;
}

.lx-news-aside .lx-news-timeline li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 8px 0;
  border-bottom: 1px dotted var(--lx-border);
  align-items: baseline;
}

.lx-news-aside .lx-news-timeline li:last-child {
  border-bottom: 0;
}

.lx-news-aside .lx-news-timeline span {
  grid-column: 1;
  color: var(--lx-fg-2);
  font-size: 12px;
}

.lx-news-aside .lx-news-timeline time {
  grid-column: 1;
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 10px;
}

.lx-news-aside .lx-news-timeline a {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--lx-fg-3);
  font-size: 11px;
  text-decoration: none;
  border-bottom: 1px dotted var(--lx-border);
}

.lx-news-aside .lx-news-timeline a:hover {
  color: var(--lx-fg);
  border-bottom-color: var(--lx-accent-line);
}

.lx-news-aside-facts {
  margin: 0;
}

.lx-news-aside-facts div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--lx-border);
}

.lx-news-aside-facts div:last-child {
  border-bottom: 0;
}

.lx-news-aside-facts dt {
  color: var(--lx-fg-4);
  font-size: 11px;
}

.lx-news-aside-facts dd {
  margin: 0;
  color: var(--lx-fg-2);
  font-family: var(--lx-font-mono);
  font-size: 11px;
  text-align: right;
}

.lx-news-aside .lx-news-back {
  margin: 0;
}

.lx-news-aside .lx-news-back a {
  color: var(--lx-fg-3);
  font-size: 12px;
}

@media (max-width: 1400px) {
  .lx-news-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 64rem;
  }

  .lx-news-aside {
    position: static;
    padding-top: 0;
    margin-top: 8px;
  }

  .lx-news-aside section {
    padding-top: 16px;
    border-top: 1px solid var(--lx-border);
    border-bottom: 0;
    margin-bottom: 14px;
  }

  .lx-news-aside .lx-news-timeline li {
    grid-template-columns: 1fr auto;
  }
}

@media (max-width: 640px) {
  .lx-news-head {
    padding-top: 16px;
  }

  .lx-news-crumb {
    padding-top: 10px;
  }

  .lx-news-layout .lx-news-article {
    padding-top: 12px;
  }

  .lx-news-origin {
    margin-left: 0;
  }
}

/* 0.30.0（B1）：配图 / 分页 / 来源层级 */
.lx-news-card-media {
  display: block;
  margin: -20px -22px 16px;
  overflow: hidden;
  background: var(--lx-surface-2);
  aspect-ratio: 16 / 9;
}

.lx-news-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lx-news-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.lx-news-tier {
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  border: 1px solid var(--lx-border);
  padding: 0 3px;
  font-style: normal;
}

.lx-news-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 30px;
  padding-top: 14px;
  border-top: 1px solid var(--lx-border);
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 11px;
}

.lx-news-pager a {
  color: var(--lx-fg-2);
  text-decoration: none;
  border-bottom: 1px dotted var(--lx-border);
}

.lx-news-pager a:hover {
  color: var(--lx-fg);
  border-bottom-color: var(--lx-accent-line);
}

.lx-news-hero {
  margin: 22px 0 0;
}

.lx-news-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--lx-surface-2);
  border: 1px solid var(--lx-border);
}

.lx-news-hero figcaption {
  margin-top: 5px;
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 10px;
  letter-spacing: .02em;
}

.lx-news-hero figcaption a {
  color: var(--lx-fg-3);
  text-decoration: none;
  border-bottom: 1px dotted var(--lx-border);
}

@media (max-width: 640px) {
  .lx-news-card-media {
    margin: -15px -16px 14px;
  }
}

/* 0.31.0（B2）：分类/标签后台 */
.lx-topics-admin {
  max-width: 1240px;
}

.lx-topics-lede {
  margin: 0 0 16px;
  color: var(--lx-fg-3);
  line-height: 1.7;
}

.lx-topics-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.lx-topics-stats div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--lx-border);
  background: var(--lx-surface-1);
}

.lx-topics-stats span {
  color: var(--lx-fg-3);
  font-size: 11px;
  letter-spacing: .08em;
}

.lx-topics-stats strong {
  color: var(--lx-fg);
  font-family: var(--lx-font-mono);
  font-size: 20px;
  font-weight: 400;
}

.lx-topics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) minmax(240px, .7fr);
  gap: 14px;
  align-items: start;
}

.lx-topics-panel,
.lx-topics-create section,
.lx-topics-content {
  border: 1px solid var(--lx-border);
  background: var(--lx-surface-1);
}

.lx-topics-panel {
  padding: 14px;
}

.lx-topics-panelhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.lx-topics-panelhead h2,
.lx-topics-create h2 {
  margin: 0;
  color: var(--lx-fg);
  font-size: 14px;
  letter-spacing: .08em;
}

.lx-topics-panelhead span {
  color: var(--lx-fg-4);
  font-size: 10px;
  line-height: 1.5;
  text-align: right;
}

.lx-topic-tree,
.lx-topic-children,
.lx-topic-tags {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-topic-children {
  margin-left: 18px;
  border-left: 1px dashed var(--lx-border);
  padding-left: 10px;
}

.lx-topic-item,
.lx-topic-tag {
  position: relative;
  margin: 2px 0;
  padding: 6px 8px;
  border: 1px solid transparent;
  transition: border-color .12s ease, background .12s ease;
}

.lx-topic-item:hover,
.lx-topic-tag:hover {
  background: var(--lx-surface-2);
  border-color: var(--lx-border);
}

.lx-topic-item.is-dragging,
.lx-topic-tag.is-dragging {
  opacity: .45;
}

.lx-topic-item.is-drop-inside {
  border-color: var(--lx-accent-line);
  background: var(--lx-accent-soft);
}

.lx-topic-item.is-drop-before,
.lx-topic-tag.is-drop-before {
  box-shadow: 0 -2px 0 var(--lx-accent-line);
}

.lx-topic-item.is-drop-after,
.lx-topic-tag.is-drop-after {
  box-shadow: 0 2px 0 var(--lx-accent-line);
}

.lx-topic-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lx-topic-tag {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lx-topic-grip {
  flex: none;
  color: var(--lx-fg-4);
  cursor: grab;
  font-family: var(--lx-font-mono);
  font-size: 12px;
  letter-spacing: -2px;
  user-select: none;
}

.lx-topic-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.lx-topic-name strong,
.lx-topic-tag strong {
  color: var(--lx-fg);
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lx-topic-name span,
.lx-topic-tag > span {
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lx-topic-name em {
  color: var(--lx-fg-3);
  font-size: 11px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lx-topic-nodekind {
  flex: none;
  padding: 1px 5px;
  border: 1px solid var(--lx-border);
  border-radius: 999px;
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 9px;
  letter-spacing: .08em;
}

.lx-topic-nodekind.is-item {
  color: var(--lx-accent-text);
  border-color: var(--lx-accent-line);
}
.lx-topic-count {
  flex: none;
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 10px;
}

.lx-topic-edit {
  position: relative;
  flex: none;
}

.lx-topic-edit summary {
  color: var(--lx-fg-3);
  cursor: pointer;
  font-size: 11px;
  list-style: none;
}

.lx-topic-edit summary::-webkit-details-marker {
  display: none;
}

.lx-topic-edit[open] {
  position: absolute;
  z-index: 5;
  right: 0;
  top: 100%;
  width: min(320px, 80vw);
  padding: 10px;
  border: 1px solid var(--lx-accent-line);
  background: var(--lx-surface-1);
}

.lx-topic-form,
.lx-topic-edit form {
  display: grid;
  gap: 8px;
}

.lx-topic-form label {
  display: grid;
  gap: 4px;
  color: var(--lx-fg-3);
  font-size: 11px;
}

.lx-topic-form input,
.lx-topic-form select,
.lx-topic-assign select {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--lx-border);
  background: var(--lx-surface-1);
  color: var(--lx-fg);
  font: inherit;
  font-size: 12px;
}

.lx-topic-form button,
.lx-topic-assign button {
  justify-self: start;
  padding: 6px 12px;
  border: 1px solid var(--lx-border);
  background: var(--lx-accent-soft);
  color: var(--lx-fg);
  cursor: pointer;
  font-size: 12px;
}

.lx-topic-danger {
  color: var(--lx-danger-text, var(--lx-fg));
  border-color: var(--lx-danger-line, var(--lx-border)) !important;
  background: transparent !important;
}

.lx-topics-create {
  display: grid;
  gap: 12px;
}

.lx-topics-create section {
  padding: 14px;
}

.lx-topics-create h2 {
  margin-bottom: 10px;
}

.lx-topics-content {
  margin-top: 16px;
  padding: 14px;
}

.lx-topics-tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.lx-topics-tables h3 {
  margin: 0 0 8px;
  color: var(--lx-fg-2);
  font-size: 12px;
  letter-spacing: .08em;
}

.lx-topic-assign {
  margin-bottom: 8px;
  padding: 10px;
  border: 1px solid var(--lx-border);
  background: var(--lx-surface-1);
}

.lx-topic-assign-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.lx-topic-assign-title strong {
  color: var(--lx-fg);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.lx-topic-assign-title span {
  flex: none;
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 10px;
}

.lx-topic-assign-fields {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.lx-topic-assign-fields select {
  padding: 5px 7px;
}

.lx-topic-tagpick {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  max-height: 96px;
  overflow: auto;
  color: var(--lx-fg-2);
  font-size: 11px;
}

.lx-topic-tagpick label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

@media (max-width: 1120px) {
  .lx-topics-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .lx-topics-create {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .lx-topics-grid,
  .lx-topics-create,
  .lx-topics-tables {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-topic-assign-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 0.32.0（B3）：站内搜索 */
.lx-search-head {
  padding: 26px 0 18px;
  border-bottom: 1px solid var(--lx-border);
}

.lx-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 150px) auto;
  gap: 8px;
  align-items: end;
  margin-top: 18px;
}

.lx-search-q {
  display: grid;
  gap: 5px;
}

.lx-search-q-label,
.lx-search-filter {
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 10px;
  letter-spacing: .08em;
}

.lx-search-q input,
.lx-search-filter select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--lx-border);
  border-radius: 0;
  background: var(--lx-surface-1);
  color: var(--lx-fg);
  font: inherit;
  font-size: 14px;
}

.lx-search-filter {
  display: grid;
  gap: 5px;
}

.lx-search-form button {
  padding: 9px 18px;
  border: 1px solid var(--lx-accent-line);
  background: var(--lx-accent-soft);
  color: var(--lx-fg);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

.lx-search-help {
  margin: 10px 0 0;
  color: var(--lx-fg-4);
  font-size: 11px;
  line-height: 1.7;
}

.lx-search-help code,
.lx-search-hint code {
  color: var(--lx-fg-2);
  font-family: var(--lx-font-mono);
  font-size: 10px;
}

.lx-search-blank {
  margin-top: 28px;
  padding: 22px;
  border: 1px dashed var(--lx-border);
  color: var(--lx-fg-2);
}

.lx-search-blank h2 {
  margin: 0 0 8px;
  color: var(--lx-fg);
  font-size: 1.05rem;
}

.lx-search-blank p {
  margin: 5px 0;
  line-height: 1.75;
}

.lx-search-hint {
  color: var(--lx-fg-3);
  font-size: 12px;
}

.lx-search-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 12px;
  color: var(--lx-fg-3);
  font-size: 12px;
}

.lx-search-summary p {
  margin: 0;
}

.lx-search-summary strong {
  color: var(--lx-fg);
  font-family: var(--lx-font-mono);
  font-weight: 400;
}

.lx-search-tabs {
  display: flex;
  gap: 6px;
}

.lx-search-tabs a {
  padding: 3px 10px;
  border: 1px solid var(--lx-border);
  color: var(--lx-fg-3);
  font-size: 11px;
  text-decoration: none;
}

.lx-search-tabs a.is-on {
  border-color: var(--lx-accent-line);
  background: var(--lx-accent-soft);
  color: var(--lx-fg);
}

.lx-search-active {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 10px;
}

.lx-search-active span {
  padding: 2px 6px;
  border: 1px solid var(--lx-border);
}

.lx-search-active a {
  color: var(--lx-fg-3);
  text-decoration: none;
  border-bottom: 1px dotted var(--lx-border);
}

.lx-search-results {
  display: grid;
  gap: 10px;
}

.lx-search-hit {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--lx-border);
  background: var(--lx-surface-1);
}

.lx-search-hit-media {
  display: block;
  overflow: hidden;
  background: var(--lx-surface-2);
  aspect-ratio: 16 / 9;
}

.lx-search-hit-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lx-search-hit-body {
  min-width: 0;
}

.lx-search-hit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 10px;
}

.lx-search-hit h2 {
  margin: 7px 0 5px;
  font-size: 1rem;
  line-height: 1.5;
}

.lx-search-hit h2 a {
  color: var(--lx-fg);
  text-decoration: none;
}

.lx-search-hit h2 a:hover {
  color: var(--lx-accent-text);
}

.lx-search-snippet {
  margin: 0 0 7px;
  color: var(--lx-fg-2);
  font-size: 12.5px;
  line-height: 1.8;
}

.lx-search-snippet mark {
  background: var(--lx-accent-soft);
  color: var(--lx-fg);
  padding: 0 1px;
}

.lx-search-more {
  color: var(--lx-fg-3);
  font-family: var(--lx-font-mono);
  font-size: 10px;
  text-decoration: none;
  border-bottom: 1px dotted var(--lx-border);
}

@media (max-width: 720px) {
  .lx-search-form {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .lx-search-filter {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .lx-search-hit {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-search-hit-media {
    max-height: 220px;
  }
}

.lx-search-advanced {
  grid-column: 1 / -1;
}

.lx-search-advanced summary {
  color: var(--lx-fg-3);
  cursor: pointer;
  font-family: var(--lx-font-mono);
  font-size: 10px;
  letter-spacing: .06em;
}

.lx-search-advanced-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.lx-search-advanced-grid label {
  display: grid;
  gap: 3px;
  color: var(--lx-fg-4);
  font-size: 10px;
}

.lx-search-advanced-grid input {
  padding: 7px 9px;
  border: 1px solid var(--lx-border);
  background: var(--lx-surface-1);
  color: var(--lx-fg);
  font: inherit;
  font-size: 12px;
}

@media (max-width: 720px) {
  .lx-search-advanced-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 0.33.0：分类/标签两个页签的共用布局 */
.lx-topics-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--lx-border);
}

.lx-topics-tabs a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 14px;
  color: var(--lx-fg-3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  font-size: 13px;
}

.lx-topics-tabs a span {
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 10px;
}

.lx-topics-tabs a.is-on {
  color: var(--lx-fg);
  border-bottom-color: var(--lx-accent-line);
}

.lx-topics-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.lx-topics-crud,
.lx-topics-list {
  border: 1px solid var(--lx-border);
  background: var(--lx-surface-1);
}

.lx-topics-crud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .35fr);
  gap: 0;
}

.lx-topics-crud section {
  padding: 14px;
}

.lx-topics-crud section + section {
  border-left: 1px solid var(--lx-border);
}

.lx-topics-crud h2 {
  margin: 0 0 10px;
  color: var(--lx-fg);
  font-size: 13px;
  letter-spacing: .08em;
}

.lx-topics-crud .lx-topic-form {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
}

.lx-topics-crud .lx-topic-form button {
  align-self: end;
}

.lx-topics-crud-hint p {
  margin: 5px 0;
  color: var(--lx-fg-3);
  font-size: 11px;
  line-height: 1.7;
}

.lx-topics-list {
  padding: 14px;
  min-height: 220px;
}

.lx-topics-list .lx-topic-tree,
.lx-topics-list .lx-topic-tags {
  margin-top: 6px;
}

.lx-topic-tag {
  padding: 8px;
  border-bottom: 1px dotted var(--lx-border);
}

.lx-topic-tag:last-child {
  border-bottom: 0;
}

@media (max-width: 860px) {
  .lx-topics-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-topics-crud {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-topics-crud section + section {
    border-left: 0;
    border-top: 1px solid var(--lx-border);
  }
}

/* 0.33.0：编辑器里的分类/标签选择 */
.lx-editor-topic {
  min-width: 100px;
  max-width: 150px;
}

/* 0.35.3：标签框与分类下拉同宽（同一行长条），不再锁在 170px */
.lx-editor-tags {
  min-width: 0;
  max-width: none;
  height: auto;
}

@media (max-width: 760px) {
  .lx-editor-topic {
    max-width: 100%;
  }
}

/* 0.33.0：编辑器分类/标签单独一行，避免挤压文档栏 */
.lx-editor-topicbar {
  justify-content: space-between;
  gap: .5rem .9rem;
}

.lx-editor-topicbar .lx-editor-hint {
  margin-left: auto;
  text-align: right;
}

.lx-editor-tagpop {
  position: relative;
}

.lx-editor-tagpop summary {
  padding: .3rem .55rem;
  border: 1px solid var(--lx-border);
  background: var(--lx-surface-2);
  color: var(--lx-fg-2);
  cursor: pointer;
  font-size: 12px;
  list-style: none;
}

.lx-editor-tagpop summary::-webkit-details-marker {
  display: none;
}

.lx-editor-tagpop[open] summary {
  border-color: var(--lx-accent-line);
}

.lx-editor-tagpop-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  gap: 4px;
  min-width: 180px;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--lx-accent-line);
  background: var(--lx-surface-1);
}

.lx-editor-tagpop-list label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--lx-fg-2);
  font-size: 12px;
  white-space: nowrap;
}

.lx-editor-tagpop-empty {
  color: var(--lx-fg-4);
  font-size: 11px;
}

/* 0.33.0：资讯后台的分类/标签选择（不占主编辑区） */
.lx-feed-topicpick {
  margin: 5px 0;
}

.lx-feed-topicpick summary {
  color: var(--lx-fg-3);
  cursor: pointer;
  font-family: var(--lx-font-mono);
  font-size: 10px;
  list-style: none;
}

.lx-feed-topicpick summary::-webkit-details-marker {
  display: none;
}

.lx-feed-topicpick[open] {
  padding: 7px;
  border: 1px solid var(--lx-border);
  background: var(--lx-surface-1);
}

.lx-feed-topicpick select {
  width: 100%;
  margin-bottom: 5px;
  padding: 4px 6px;
  border: 1px solid var(--lx-border);
  background: var(--lx-surface-2);
  color: var(--lx-fg);
  font: inherit;
  font-size: 11px;
}

.lx-feed-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  margin-bottom: 5px;
  color: var(--lx-fg-2);
  font-size: 11px;
}

.lx-feed-taglist label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.lx-feed-topicpick--pub {
  display: block;
  margin: 6px 0;
}

/* 0.34.0：分类/标签页复用文件管理的工具带，列表全宽 */
.lx-topics-admin #topics-form {
  margin-bottom: 12px;
}

.lx-topics-form {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--lx-border);
  background: var(--lx-surface-1);
}

.lx-topic-form--inline {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
}

.lx-topic-form-actions {
  display: flex;
  align-items: end;
  gap: 8px;
  align-self: end;
}

.lx-topic-form-actions a {
  color: var(--lx-fg-3);
  font-size: 11px;
  text-decoration: none;
}

.lx-topic-form-hint {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--lx-fg-4);
  font-size: 10px;
  line-height: 1.6;
}

.lx-topic-child-link {
  margin-left: auto;
  color: var(--lx-fg-3);
  font-family: var(--lx-font-mono);
  font-size: 10px;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px dotted var(--lx-border);
}

.lx-topic-child-link:hover {
  color: var(--lx-fg);
  border-bottom-color: var(--lx-accent-line);
}

.lx-topic-edit-link {
  margin-left: auto;
  color: var(--lx-fg-3);
  font-family: var(--lx-font-mono);
  font-size: 10px;
  text-decoration: none;
  border-bottom: 1px dotted var(--lx-border);
}

.lx-topic-edit-link:hover {
  color: var(--lx-fg);
  border-bottom-color: var(--lx-accent-line);
}

.lx-topics-list {
  margin-top: 0;
}

.lx-topics-list .lx-topic-tag {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lx-topics-list .lx-topic-tag .lx-topic-edit-link {
  margin-left: auto;
}

@media (max-width: 760px) {
  .lx-topic-form--inline {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== 0.35.0 编辑器重排：标题条 → 格式条 → 双栏 → 分类/标签 → 作者/时间 → 动作 ===== */
.lx-editor-titlebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}

.lx-editor-headline {
  flex: 1 1 18rem;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  background: var(--lx-surface-2);
  color: var(--lx-fg);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
}

.lx-editor-headline:focus-visible {
  outline: 2px solid var(--lx-accent-line);
  outline-offset: 1px;
}

.lx-editor-listlink {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--lx-fg-2);
  text-decoration: none;
  border-bottom: 1px dashed var(--lx-border);
}

.lx-editor-listlink:hover {
  color: var(--lx-accent-text);
}

.lx-editor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem 0.75rem;
}

.lx-editor-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.lx-editor-field .lx-editor-select {
  width: 100%;
  box-sizing: border-box;
  /* 下拉与文本框同高：分类是 select，标签是 input，默认高度差 5px */
  height: 2rem;
}

.lx-editor-field-time .lx-editor-pubtime {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.lx-editor-pubtime .lx-editor-select {
  flex: 0 1 11rem;
  font-family: var(--lx-font-mono);
}

.lx-editor-tags {
  width: 100%;
}

.lx-editor-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.lx-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--lx-border);
  border-radius: 999px;
  background: var(--lx-surface-2);
  color: var(--lx-fg-2);
  font-size: 0.6875rem;
  white-space: nowrap;
}

.lx-chip-mono {
  font-family: var(--lx-font-mono);
  color: var(--lx-fg-3);
}

.lx-chip[data-state="published"] {
  color: var(--lx-accent-text);
  border-color: var(--lx-accent-line);
  background: var(--lx-accent-soft);
}

.lx-chip[data-state="offline"],
.lx-chip-warn {
  color: var(--lx-danger);
  background: var(--lx-danger-soft);
}

.lx-editor-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-left: auto;
}

.lx-editor-buttons .lx-editor-save,
.lx-editor-buttons .lx-editor-btn {
  padding: 0.4rem 0.9rem;
  font-size: 0.8125rem;
}

@media (max-width: 760px) {
  .lx-editor-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== 0.35.0 公开文章列表（/articles） ===== */
.lx-art-grid {
  display: grid;
  /* auto-fill + 固定最大列宽：只有一篇文章时也不会撑满整行、把文字顶到屏幕外 */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 24rem));
  justify-content: start;
  gap: 1rem;
  margin: 1.25rem 0 2rem;
}

.lx-art-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: color-mix(in srgb, var(--lx-surface-1) 82%, transparent);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.lx-art-card:hover {
  border-color: var(--lx-accent-line);
}

.lx-art-shot {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--lx-surface-2);
  overflow: hidden;
}

.lx-art-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lx-art-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 0.85rem 0.9rem;
  min-width: 0;
}

.lx-art-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.lx-art-title a {
  color: var(--lx-fg);
  text-decoration: none;
}

.lx-art-title a:hover {
  color: var(--lx-accent-text);
}

.lx-art-line {
  margin: 0;
  color: var(--lx-fg-2);
  font-size: 0.8125rem;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lx-art-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: auto 0 0;
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  color: var(--lx-fg-4);
}

/* ===== 0.35.0 后台轮播管理（/admin/carousel） ===== */
.lx-carousel-admin {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}

.lx-car-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.lx-car-hint {
  margin: 0;
  color: var(--lx-fg-3);
  font-size: 0.75rem;
}

.lx-car-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  overflow: hidden;
}

.lx-car-item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  grid-template-areas: "pos title actions" "pos meta actions";
  gap: 0.1rem 0.6rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  background: color-mix(in srgb, var(--lx-surface-1) 82%, transparent);
}

.lx-car-item + .lx-car-item {
  border-top: 1px solid var(--lx-border);
}

.lx-car-pos {
  grid-area: pos;
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
  color: var(--lx-fg-4);
}

.lx-car-title {
  grid-area: title;
  color: var(--lx-fg);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.lx-car-title:hover {
  color: var(--lx-accent-text);
}

.lx-car-meta {
  grid-area: meta;
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  color: var(--lx-fg-4);
}

.lx-car-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

@media (max-width: 640px) {
  .lx-car-item {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    grid-template-areas: "pos title" "pos meta" ". actions";
  }
}

/* ==========================================================================
   0.36.0 手册（manual）
   --------------------------------------------------------------------------
   公开面：手册库 / 封面 / 章节三栏 / 打印 / 册内检索。
   后台：列表 / 信息与目录 / 章节编辑器。
   颜色一律走 --lx-* token；本段不出现颜色字面量。
   ========================================================================== */

/* ---- 手册库 ---- */
.lx-man-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 2rem;
}

.lx-man-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: color-mix(in srgb, var(--lx-surface-1) 82%, transparent);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.lx-man-card:hover {
  border-color: var(--lx-accent-line);
}

.lx-man-cover {
  display: block;
  /* 书封通常是竖版：4:5 比 16:9 更接近书本；完整显示，不再裁切 */
  aspect-ratio: 4 / 5;
  background: var(--lx-surface-2);
  overflow: hidden;
}

.lx-man-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lx-man-cover-blank {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--lx-surface-2), var(--lx-surface-3));
  color: var(--lx-fg-3);
  font-family: var(--lx-font-brand);
  font-size: 1.75rem;
  letter-spacing: 0.24em;
}

.lx-man-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.8rem 0.9rem 0.95rem;
  min-width: 0;
}

.lx-man-kicker,
.lx-man-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  color: var(--lx-fg-4);
}

.lx-man-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.lx-man-title a {
  color: var(--lx-fg);
  text-decoration: none;
}

.lx-man-title a:hover {
  color: var(--lx-accent-text);
}

.lx-man-sub {
  margin: 0;
  color: var(--lx-fg-2);
  font-size: 0.8125rem;
}

.lx-man-sum {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--lx-fg-3);
  font-size: 0.8125rem;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* ---- 封面页 ---- */
.lx-manual-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--lx-fg-4);
  font-size: 0.75rem;
}

.lx-manual-crumb a {
  color: var(--lx-fg-3);
  text-decoration: none;
}

.lx-manual-crumb a:hover {
  color: var(--lx-fg);
}

.lx-manual-coverhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
  gap: 1.75rem;
  align-items: start;
  padding: calc(1.4rem * var(--lx-space)) calc(1.6rem * var(--lx-space));
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  background: color-mix(in srgb, var(--lx-surface-1) 88%, transparent);
}

.lx-manual-covertitle {
  margin: 0.15rem 0 0.5rem;
  color: var(--lx-fg);
  font-family: var(--lx-font-title);
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.lx-manual-coversub {
  margin: 0 0 0.6rem;
  color: var(--lx-fg-2);
  font-size: 1.05rem;
}

.lx-manual-coversum {
  max-width: 62ch;
  margin: 0 0 0.8rem;
  color: var(--lx-fg-3);
  line-height: 1.7;
}

.lx-manual-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  margin: 0;
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
}

.lx-manual-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.lx-manual-primary,
.lx-manual-ghost {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-control);
  color: var(--lx-fg-2);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.lx-manual-primary {
  border-color: var(--lx-accent-line);
  background: var(--lx-accent-soft);
  color: var(--lx-fg);
}

.lx-manual-primary:hover,
.lx-manual-ghost:hover {
  border-color: var(--lx-accent-line);
  color: var(--lx-fg);
}

.lx-manual-coverart img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
}

.lx-manual-covergrid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(16rem, 0.85fr);
  gap: 1.25rem;
  align-items: start;
}

.lx-manual-toc {
  padding: calc(1rem * var(--lx-space)) calc(1.1rem * var(--lx-space));
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  background: color-mix(in srgb, var(--lx-surface-1) 82%, transparent);
}

.lx-manual-tochead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--lx-border);
}

.lx-manual-tochead h2 {
  margin: 0;
  color: var(--lx-fg-2);
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lx-manual-tochead span {
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
}

.lx-manual-toc-list {
  display: grid;
  gap: 0.1rem;
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
}

.lx-manual-toc-list[data-depth="1"],
.lx-manual-toc-list[data-depth="2"],
.lx-manual-toc-list[data-depth="3"] {
  margin-top: 0.1rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--lx-border);
}

.lx-manual-toc-item > a {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.38rem 0.5rem;
  border-radius: var(--lx-radius-sm);
  color: var(--lx-fg-2);
  font-size: 0.875rem;
  line-height: 1.5;
  text-decoration: none;
}

.lx-manual-toc-item > a:hover {
  background: var(--lx-surface-2);
  color: var(--lx-fg);
}

.lx-manual-toc-title {
  overflow-wrap: anywhere;
}

.lx-manual-toc-sum {
  color: var(--lx-fg-4);
  font-size: 0.75rem;
  line-height: 1.5;
}

.lx-manual-aside {
  display: grid;
  gap: 0.85rem;
}

.lx-manual-panel {
  padding: calc(0.9rem * var(--lx-space)) calc(1rem * var(--lx-space));
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  background: color-mix(in srgb, var(--lx-surface-1) 82%, transparent);
}

.lx-manual-panel h2 {
  margin: 0 0 0.5rem;
  color: var(--lx-fg-2);
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lx-manual-panelnote {
  margin: 0.6rem 0 0;
  color: var(--lx-fg-4);
  font-size: 0.75rem;
  line-height: 1.6;
}

.lx-manual-facts {
  display: grid;
  gap: 0.35rem;
  margin: 0;
}

.lx-manual-facts div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px dashed var(--lx-border);
}

.lx-manual-facts div:last-child {
  border-bottom: 0;
}

.lx-manual-facts dt {
  color: var(--lx-fg-4);
  font-size: 0.75rem;
}

.lx-manual-facts dd {
  margin: 0;
  color: var(--lx-fg-2);
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
  text-align: right;
}

.lx-manual-searchform {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.45rem;
}

.lx-manual-searchform label {
  display: flex;
  flex: 1 1 9rem;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--lx-fg-4);
  font-size: 0.6875rem;
}

.lx-manual-searchform input {
  width: 100%;
  min-height: 2rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--lx-input-border);
  border-radius: var(--lx-radius-control);
  background: var(--lx-input-bg);
  color: var(--lx-fg);
  font: inherit;
}

.lx-manual-searchform button {
  min-height: 2rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--lx-accent-line);
  border-radius: var(--lx-radius-control);
  background: var(--lx-accent-soft);
  color: var(--lx-fg);
  font: inherit;
  cursor: pointer;
}

.lx-manual-searchform--wide {
  max-width: 38rem;
  margin-top: 0.75rem;
}

/* ---- 章节页 ---- */
.lx-manual-progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  height: 3px;
  background: transparent;
  pointer-events: none;
}

.lx-manual-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--lx-accent);
  transition: width 0.08s linear;
}

.lx-manual-inner {
  gap: 1rem;
}

.lx-manual-shell {
  display: grid;
  grid-template-columns: minmax(13rem, 15rem) minmax(0, 1fr) minmax(10rem, 13rem);
  gap: 1.5rem;
  align-items: start;
}

.lx-manual-side {
  position: sticky;
  top: 1rem;
  min-width: 0;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  background: color-mix(in srgb, var(--lx-surface-1) 84%, transparent);
}

.lx-manual-side > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  color: var(--lx-fg-2);
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  list-style: none;
}

.lx-manual-side > summary::-webkit-details-marker {
  display: none;
}

.lx-manual-side > summary span {
  color: var(--lx-fg-4);
}

.lx-manual-sidebody {
  max-height: calc(100dvh - 12rem);
  padding: 0.25rem 0.55rem 0.8rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lx-manual-sidebook {
  margin: 0 0 0.35rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--lx-border);
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
}

.lx-manual-sidebook a {
  color: var(--lx-fg-2);
  text-decoration: none;
}

.lx-manual-side .lx-manual-toc-item > a[aria-current="page"] {
  border-left: 2px solid var(--lx-accent);
  background: var(--lx-accent-soft);
  color: var(--lx-fg);
}

.lx-manual-sidefoot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--lx-border);
}

.lx-manual-sidefoot a {
  color: var(--lx-fg-3);
  font-size: 0.75rem;
  text-decoration: none;
}

.lx-manual-sidefoot a:hover {
  color: var(--lx-fg);
}

.lx-manual-article {
  min-width: 0;
}

.lx-manual-head {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--lx-border);
}

.lx-manual-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  margin: 0 0 0.4rem;
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}

.lx-manual-title {
  margin: 0 0 0.55rem;
  color: var(--lx-fg);
  font-family: var(--lx-font-title);
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.lx-manual-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.8rem;
}

.lx-manual-tools a,
.lx-manual-printbtn {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--lx-border);
  border-radius: 999px;
  background: transparent;
  color: var(--lx-fg-3);
  font: inherit;
  font-size: 0.75rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.lx-manual-tools a:hover,
.lx-manual-printbtn:hover {
  border-color: var(--lx-accent-line);
  color: var(--lx-fg);
}

.lx-manual-body {
  margin-top: 0.5rem;
}

.lx-manual-body h2,
.lx-manual-body h3 {
  scroll-margin-top: 5rem;
}

.lx-manual-anchor {
  margin-left: 0.4rem;
  color: var(--lx-fg-4);
  font-size: 0.65em;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.lx-manual-body h2:hover .lx-manual-anchor,
.lx-manual-body h3:hover .lx-manual-anchor,
.lx-manual-anchor:focus {
  opacity: 1;
}

.lx-manual-pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  margin-top: 2rem;
}

.lx-manual-pager a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  background: color-mix(in srgb, var(--lx-surface-1) 82%, transparent);
  color: var(--lx-fg-2);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.lx-manual-pager a:hover {
  border-color: var(--lx-accent-line);
}

.lx-manual-pager span {
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
}

.lx-manual-pager strong {
  overflow-wrap: anywhere;
  color: var(--lx-fg);
  font-weight: 500;
  font-size: 0.9rem;
}

.lx-manual-pager-next {
  grid-column: 2;
  text-align: right;
}

.lx-manual-back {
  margin: 1.25rem 0 0;
}

.lx-manual-back a {
  color: var(--lx-fg-3);
  font-size: 0.8125rem;
  text-decoration: none;
}

.lx-manual-back a:hover {
  color: var(--lx-fg);
}

.lx-manual-onpage {
  position: sticky;
  top: 1rem;
  min-width: 0;
}

.lx-manual-onpage h2 {
  margin: 0 0 0.5rem;
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lx-manual-onlist {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0 0 0 0.7rem;
  border-left: 1px solid var(--lx-border);
  list-style: none;
}

.lx-manual-onlist li[data-level="3"] {
  padding-left: 0.7rem;
}

.lx-manual-onlist a {
  color: var(--lx-fg-3);
  font-size: 0.75rem;
  line-height: 1.5;
  text-decoration: none;
}

.lx-manual-onlist a:hover {
  color: var(--lx-fg);
}

.lx-manual-onempty,
.lx-manual-empty {
  margin: 0;
  color: var(--lx-fg-4);
  font-size: 0.8125rem;
}

/* ---- 册内检索 ---- */
.lx-manual-hits {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.lx-manual-hit {
  padding: 0.9rem 1rem;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  background: color-mix(in srgb, var(--lx-surface-1) 82%, transparent);
}

.lx-manual-hit h2 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  line-height: 1.45;
}

.lx-manual-hit h2 a {
  color: var(--lx-fg);
  text-decoration: none;
}

.lx-manual-hit h2 a:hover {
  color: var(--lx-accent-text);
}

.lx-manual-hit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
}

.lx-manual-hit-snippet {
  margin: 0;
  color: var(--lx-fg-2);
  font-size: 0.875rem;
  line-height: 1.7;
}

.lx-manual-hit-snippet mark {
  padding: 0 0.1em;
  background: var(--lx-accent-soft);
  color: var(--lx-fg);
  border-radius: 2px;
}

/* ---- 打印页 ---- */
.lx-manual-printbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem clamp(1.25rem, 3.5vw, 4rem);
  border-bottom: 1px solid var(--lx-border);
  background: color-mix(in srgb, var(--lx-surface-1) 88%, transparent);
  font-size: 0.75rem;
  color: var(--lx-fg-4);
}

.lx-manual-printbar p {
  margin: 0;
}

.lx-manual-printbar a {
  color: var(--lx-fg-2);
  text-decoration: none;
}

.lx-manual-printbar button {
  margin-left: 0.6rem;
  padding: 0.25rem 0.8rem;
  border: 1px solid var(--lx-accent-line);
  border-radius: var(--lx-radius-control);
  background: var(--lx-accent-soft);
  color: var(--lx-fg);
  font: inherit;
  cursor: pointer;
}

.lx-manual-printdoc {
  max-width: 54rem;
  margin: 0 auto;
}

.lx-manual-printcover {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--lx-border);
}

.lx-manual-printkicker {
  margin: 0 0 0.3rem;
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

.lx-manual-printcover h1 {
  margin: 0 0 0.5rem;
  font-family: var(--lx-font-title);
  font-size: 2.5rem;
  line-height: 1.15;
}

.lx-manual-printsub,
.lx-manual-printsum {
  margin: 0 0 0.5rem;
  color: var(--lx-fg-2);
  line-height: 1.7;
}

.lx-manual-printfacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0.75rem 0 0;
}

.lx-manual-printfacts div {
  display: flex;
  gap: 0.4rem;
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
}

.lx-manual-printfacts dt {
  color: var(--lx-fg-4);
}

.lx-manual-printfacts dd {
  margin: 0;
  color: var(--lx-fg-2);
}

.lx-manual-printtoc {
  margin-top: 1.5rem;
}

.lx-manual-printtoc h2 {
  margin: 0 0 0.5rem;
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lx-manual-printtoc ol {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding-left: 1.2rem;
}

.lx-manual-printtoc li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--lx-fg-2);
  font-size: 0.875rem;
}

.lx-manual-printtoc-page {
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
}

.lx-manual-printchapter {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--lx-border);
}

.lx-manual-printchapterhead {
  margin-bottom: 0.75rem;
}

.lx-manual-printchapterindex {
  margin: 0 0 0.25rem;
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
}

.lx-manual-printchapterhead h2 {
  margin: 0;
  font-family: var(--lx-font-title);
  font-size: 1.75rem;
  line-height: 1.2;
}

.lx-manual-printchaptersum {
  margin: 0.3rem 0 0;
  color: var(--lx-fg-3);
  font-size: 0.875rem;
}

.lx-manual-printfoot {
  margin-top: 2.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--lx-border);
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
}

.lx-manual-printfoot p {
  margin: 0.2rem 0;
}

/* ---- 后台：列表 / 信息 / 章节 ---- */
.lx-man-admin {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 0;
}

.lx-man-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  color: var(--lx-fg-4);
  font-size: 0.75rem;
}

.lx-man-crumb a {
  color: var(--lx-fg-3);
  text-decoration: none;
}

.lx-man-crumb a:hover {
  color: var(--lx-fg);
}

.lx-man-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.lx-man-head--editor {
  align-items: center;
}

.lx-man-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin: 0 0 0.25rem;
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
}

.lx-man-h2 {
  margin: 0;
  color: var(--lx-fg);
  font-family: var(--lx-font-title);
  font-size: 1.8rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.lx-man-lede {
  max-width: 70ch;
  margin: 0.25rem 0 0;
  color: var(--lx-fg-3);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.lx-man-count {
  margin: 0;
  color: var(--lx-fg-4);
  font-size: 0.75rem;
}

.lx-man-count strong {
  color: var(--lx-fg);
  font-family: var(--lx-font-expanded);
  font-size: 1.4rem;
}

.lx-man-headactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.lx-man-headactions form {
  display: inline-flex;
  margin: 0;
}

.lx-man-status {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--lx-border);
  border-radius: 999px;
  font-family: var(--lx-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
}

.lx-man-status.is-published {
  border-color: var(--lx-ok-line);
  background: var(--lx-ok-soft);
  color: var(--lx-ok-text);
}

.lx-man-status.is-draft {
  border-color: var(--lx-warn-line);
  background: var(--lx-warn-soft);
  color: var(--lx-warn-text);
}

.lx-man-status.is-archived {
  border-color: var(--lx-border);
  color: var(--lx-fg-4);
}

.lx-man-panel {
  padding: calc(0.85rem * var(--lx-space)) calc(1rem * var(--lx-space));
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  background: color-mix(in srgb, var(--lx-surface-1) 84%, transparent);
}

.lx-man-panelhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
}

.lx-man-panelhead h3 {
  margin: 0;
  color: var(--lx-fg-2);
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lx-man-panelhead span {
  color: var(--lx-fg-4);
  font-size: 0.6875rem;
}

.lx-man-form,
.lx-man-chapterform {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.lx-man-formgrid,
.lx-man-metagrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.6rem 0.75rem;
}

.lx-man-form label,
.lx-man-chapterform label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  color: var(--lx-fg-4);
  font-size: 0.6875rem;
}

.lx-man-form input,
.lx-man-form select,
.lx-man-form textarea,
.lx-man-chapterform input,
.lx-man-chapterform select,
.lx-man-chapterform textarea,
.lx-man-addchapter input,
.lx-man-addchapter select {
  width: 100%;
  min-height: 2rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--lx-input-border);
  border-radius: var(--lx-radius-control);
  background: var(--lx-input-bg);
  color: var(--lx-fg);
  font: inherit;
  font-size: 0.8125rem;
}

.lx-man-form textarea {
  resize: vertical;
  line-height: 1.6;
}

.lx-man-form input:focus,
.lx-man-form select:focus,
.lx-man-form textarea:focus,
.lx-man-chapterform input:focus,
.lx-man-chapterform select:focus,
.lx-man-chapterform textarea:focus,
.lx-man-addchapter input:focus {
  outline: 1px solid var(--lx-ring);
  outline-offset: 1px;
}

.lx-man-formwide {
  width: 100%;
}

.lx-man-formactions,
.lx-man-savebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.lx-man-formactions span,
.lx-man-savebar span {
  color: var(--lx-fg-4);
  font-size: 0.6875rem;
}

/* 0.36.7：封面选择器（手填 / 上传 / 从文件管理选取） */
.lx-cover {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem 0.75rem;
  align-items: end;
  padding: 0.55rem;
  border: 1px solid var(--lx-border);
  background: var(--lx-surface-2);
}

.lx-cover-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  color: var(--lx-fg-4);
  font-size: 0.6875rem;
}

.lx-cover-field input {
  width: 100%;
  min-height: 2rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--lx-input-border);
  border-radius: var(--lx-radius-control);
  background: var(--lx-input-bg);
  color: var(--lx-fg);
  font: inherit;
  font-size: 0.8125rem;
}

.lx-cover-field input:focus {
  outline: 1px solid var(--lx-ring);
  outline-offset: 1px;
}

.lx-cover-preview {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 7rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--lx-border);
  background: var(--lx-surface-1);
  color: var(--lx-fg-4);
  font-size: 0.65rem;
}

.lx-cover-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lx-cover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.lx-cover-actions .lx-man-btn {
  cursor: pointer;
  font-size: 0.75rem;
}

.lx-cover-status {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 1em;
  color: var(--lx-fg-4);
  font-size: 0.65rem;
  line-height: 1.5;
}

.lx-cover-status[data-state="ok"] {
  color: var(--lx-ok-text);
}

.lx-cover-status[data-state="bad"] {
  color: var(--lx-danger-text);
}

.lx-cover-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: color-mix(in srgb, var(--lx-bg-base) 72%, transparent);
}

.lx-cover-modal[hidden] {
  display: none;
}

body.lx-cover-open {
  overflow: hidden;
}

.lx-cover-dialog {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: min(56rem, 100%);
  max-height: min(84vh, 44rem);
  padding: 0.85rem;
  overflow: auto;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-lg);
  background: var(--lx-bg);
  box-shadow: 0 32px 70px -40px var(--lx-fg);
}

.lx-cover-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--lx-border);
}

.lx-cover-dialog-head strong {
  font-family: var(--lx-font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lx-fg-2);
}

.lx-cover-close {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
  background: transparent;
  color: var(--lx-fg-2);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.lx-cover-close:hover {
  background: var(--lx-surface-3);
  color: var(--lx-fg);
}

.lx-cover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.5rem;
}

.lx-cover-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--lx-border);
  background: var(--lx-surface-2);
  color: var(--lx-fg);
  cursor: pointer;
  text-align: left;
}

.lx-cover-card:hover,
.lx-cover-card:focus-visible {
  border-color: var(--lx-accent-line);
  background: var(--lx-accent-soft);
}

.lx-cover-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--lx-surface-1);
}

.lx-cover-card span {
  overflow: hidden;
  color: var(--lx-fg-3);
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lx-cover-hint,
.lx-cover-empty {
  margin: 0;
  color: var(--lx-fg-4);
  font-size: 0.65rem;
  line-height: 1.6;
}

.lx-cover-empty a {
  color: var(--lx-accent-text);
}

@media (max-width: 640px) {
  .lx-cover {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-cover-preview {
    grid-row: auto;
    width: 100%;
    max-width: 12rem;
  }
}

.lx-man-btn,
.lx-man-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.9rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-control);
  background: transparent;
  color: var(--lx-fg-2);
  font: inherit;
  font-size: 0.75rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.lx-man-btn:hover,
.lx-man-act:hover {
  border-color: var(--lx-accent-line);
  color: var(--lx-fg);
}

.lx-man-btn--accent,
.lx-man-act--accent {
  border-color: var(--lx-accent-line);
  background: var(--lx-accent-soft);
  color: var(--lx-fg);
}

.lx-man-btn--publish {
  border-color: var(--lx-ok-line);
  background: var(--lx-ok-soft);
  color: var(--lx-ok-text);
}

.lx-man-btn--warn,
.lx-man-act--warn {
  border-color: var(--lx-warn-line);
  color: var(--lx-warn-text);
}

.lx-man-btn--danger,
.lx-man-act--danger {
  border-color: var(--lx-danger-line);
  color: var(--lx-danger-text);
}

.lx-man-btn--danger:hover,
.lx-man-act--danger:hover {
  background: var(--lx-danger-soft);
}

.lx-man-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  overflow: hidden;
}

.lx-man-tablehead,
.lx-man-row {
  display: grid;
  grid-template-columns: minmax(14rem, 2fr) 6rem 5rem minmax(9rem, 1fr) minmax(14rem, 1.6fr);
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.7rem;
}

.lx-man-tablehead {
  background: var(--lx-surface-2);
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lx-man-row {
  background: color-mix(in srgb, var(--lx-surface-1) 82%, transparent);
}

.lx-man-row + .lx-man-row {
  border-top: 1px solid var(--lx-border);
}

.lx-man-cell {
  min-width: 0;
}

.lx-man-cell--title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.lx-man-link {
  color: var(--lx-fg);
  font-size: 0.875rem;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.lx-man-link:hover {
  color: var(--lx-accent-text);
}

.lx-man-slug {
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 0.625rem;
  overflow-wrap: anywhere;
}

.lx-man-sub {
  color: var(--lx-fg-3);
  font-size: 0.75rem;
}

.lx-man-cell--num,
.lx-man-cell--meta {
  color: var(--lx-fg-3);
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
}

.lx-man-cell--meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.lx-man-cell--actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.lx-man-cell--actions form {
  display: inline-flex;
  margin: 0;
}

.lx-man-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--lx-border);
  border-radius: var(--lx-radius);
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
}

.lx-man-stats strong {
  color: var(--lx-fg);
}

.lx-man-addchapter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--lx-border);
}

.lx-man-addchapter label {
  display: flex;
  flex: 1 1 10rem;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--lx-fg-4);
  font-size: 0.6875rem;
}

.lx-man-chaptertree,
.lx-man-children {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-man-children {
  margin: 0.3rem 0 0 1.35rem;
  padding-left: 0.7rem;
  border-left: 1px dashed var(--lx-border);
}

.lx-man-chapter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.6rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
  background: color-mix(in srgb, var(--lx-surface-1) 86%, transparent);
}

.lx-man-chapter-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  min-width: 0;
}

.lx-man-grip {
  color: var(--lx-fg-4);
  font-size: 0.7rem;
  letter-spacing: -0.1em;
  cursor: default;
}

.lx-man-chapter-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
}

.lx-man-chapter-title a {
  color: var(--lx-fg);
  font-size: 0.875rem;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.lx-man-chapter-title a:hover {
  color: var(--lx-accent-text);
}

.lx-man-chapter-words {
  color: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 0.625rem;
}

.lx-man-chapter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
}

.lx-man-chapter-actions form {
  display: inline-flex;
  margin: 0;
}

/* ---- 手册响应式 ---- */
@media (max-width: 1100px) {
  .lx-manual-shell {
    grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr);
  }

  .lx-manual-onpage {
    display: none;
  }
}

@media (max-width: 860px) {
  .lx-manual-coverhead,
  .lx-manual-covergrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-manual-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-manual-side {
    position: static;
  }

  .lx-manual-side > summary {
    display: flex;
  }

  .lx-manual-sidebody {
    max-height: 60vh;
  }

  .lx-man-tablehead {
    display: none;
  }

  .lx-man-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }

  .lx-man-cell--actions {
    margin-top: 0.25rem;
  }
}

@media (max-width: 560px) {
  .lx-manual-actions,
  .lx-manual-tools {
    gap: 0.35rem;
  }

  .lx-manual-pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-manual-pager-next {
    grid-column: auto;
    text-align: left;
  }

  .lx-man-chapter {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lx-manual-progress span,
  .lx-man-card,
  .lx-manual-primary,
  .lx-manual-ghost,
  .lx-manual-tools a,
  .lx-manual-printbtn,
  .lx-manual-pager a,
  .lx-man-btn,
  .lx-man-act {
    transition: none;
  }
}

/* ---- 打印 ---- */
@media print {
  .lx-site-body,
  .lx-site-main,
  .lx-site-scroll {
    display: block;
    height: auto;
    overflow: visible;
  }

  .lx-backdrop,
  .lx-site-top,
  .lx-site-foot,
  .lx-manual-printbar,
  .lx-manual-side,
  .lx-manual-onpage,
  .lx-manual-tools,
  .lx-manual-pager,
  .lx-manual-back,
  .lx-manual-progress,
  .lx-manual-actions {
    display: none !important;
  }

  .lx-site-inner,
  .lx-manual-printdoc {
    max-width: none;
    padding: 0;
    gap: 0;
  }

  .lx-manual-printchapter {
    break-before: page;
    page-break-before: always;
    border-top: 0;
    margin-top: 1.5rem;
    padding-top: 0;
  }

  .lx-manual-printchapter:first-of-type {
    break-before: auto;
    page-break-before: auto;
  }

  .lx-manual-body a {
    color: inherit;
    text-decoration: underline;
  }

  .lx-manual-anchor {
    display: none;
  }
}

/* 0.36.0 视觉收口：卡片封面是链接，但不能继承链接下划线 */
.lx-man-cover {
  color: inherit;
  text-decoration: none;
}

.lx-news-foot a {
  color: var(--lx-fg-3);
  text-decoration: none;
}

.lx-news-foot a:hover {
  color: var(--lx-fg);
}

/* 宽屏不需要 details 的「目录 N 章」折叠条；窄屏才显示 */
@media (min-width: 861px) {
  .lx-manual-side > summary {
    display: none;
  }

  .lx-manual-sidebody {
    padding-top: 0.6rem;
  }
}

/* 0.36.2：手册章节编辑器复用文章编辑器的核心双栏；给它一个稳定的工作高度 */
.lx-man-editor .lx-editor-panes {
  min-height: 24rem;
}

.lx-man-editor .lx-editor-source {
  min-height: 24rem;
}

.lx-man-editor .lx-editor-preview {
  min-height: 24rem;
  max-height: 36rem;
}

/* ==========================================================================
   0.36.10：主副体运行图 + 实时徽章
   --------------------------------------------------------------------------
   约束同前：零颜色字面量（全部走 tokens/themes 变量）、无内联 style。
   结构：三层轨道环（场）→ 边（通路 + 流动虚线）→ 粒子（指令/反馈）→ 中枢 → 八副体。
   色彩层次：每个副体一条色相（accent / info / ok / warn / danger 的混合），
   中枢用 accent 径向渐变；活跃度只改光晕透明度与档位，不改主色，避免「颜色撒谎」。
   ========================================================================== */

.lx-map {
  position: relative;
  display: grid;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
}

/* 图中枢背后的一层暖光：让八条色相有「落点」，而不是浮在纯底色上 */
.lx-map::before {
  content: "";
  position: absolute;
  inset: 6% 6% 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--lx-accent-soft), transparent 72%);
  pointer-events: none;
}

.lx-map-svg,
.lx-map-cap {
  position: relative;
}

.lx-map-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ---- 轨道环：三层反向旋转，表达 N(t) 在两次推进之间继续演化 ---- */
.lx-map-orbit {
  fill: none;
  stroke: var(--lx-accent-line);
  stroke-width: 0.9;
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.lx-map-orbit-a {
  stroke-dasharray: 2 10;
  opacity: 0.3;
  animation: lx-map-spin 64s linear infinite;
}

.lx-map-orbit-b {
  stroke: var(--lx-info-line);
  stroke-dasharray: 1 6;
  opacity: 0.24;
  animation: lx-map-spin-rev 46s linear infinite;
}

.lx-map-orbit-c {
  stroke-dasharray: 16 12;
  opacity: 0.16;
  animation: lx-map-spin 92s linear infinite;
}

.lx-map-orbit-d {
  stroke: var(--lx-fg-4);
  stroke-dasharray: 1 5;
  opacity: 0.22;
  animation: lx-map-breathe 6.4s ease-in-out infinite;
}

/* ---- 边：实线通路 + 两条流动虚线（指令向外、反馈向心） ---- */
.lx-map-edge {
  fill: none;
  stroke: var(--lx-border);
  stroke-width: 1;
}

.lx-map-edge-out,
.lx-map-edge-in {
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.lx-map-edge-out {
  stroke: var(--lx-map-hue, var(--lx-series-out));
  stroke-dasharray: 5 26;
  opacity: 0.62;
  animation: lx-map-flow-out 3.4s linear infinite;
}

.lx-map-edge-in {
  stroke: var(--lx-map-hue, var(--lx-series-in));
  stroke-dasharray: 3 32;
  opacity: 0.38;
  animation: lx-map-flow-in 4.6s linear infinite;
}

/* ---- 粒子：SMIL 路径动画的载体，只负责上色 ---- */
.lx-map-particle-out {
  fill: var(--lx-map-hue, var(--lx-series-out));
}

.lx-map-particle-in {
  fill: var(--lx-fg-2);
  opacity: 0.7;
}

/* ---- 中枢：径向渐变 + 呼吸 + 旋转虚线环 ---- */
.lx-map-core-glow {
  opacity: 0.5;
  animation: lx-map-breathe 5.2s ease-in-out infinite;
}

.lx-map-core-halo {
  fill: none;
  stroke: var(--lx-accent-line);
  stroke-width: 1;
  stroke-dasharray: 3 7;
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: lx-map-spin 28s linear infinite;
}

.lx-map-core-ring {
  fill: none;
  stroke: var(--lx-fg-4);
  stroke-width: 0.8;
  opacity: 0.5;
}

.lx-map-core-title {
  fill: var(--lx-fg);
  font-family: var(--lx-font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-anchor: middle;
}

.lx-map-core-sub {
  fill: var(--lx-fg-4);
  font-family: var(--lx-font-mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-anchor: middle;
}

.lx-map-stop-core-a {
  stop-color: var(--lx-accent);
  stop-opacity: 0.55;
}

.lx-map-stop-core-b {
  stop-color: var(--lx-accent);
  stop-opacity: 0.12;
}

.lx-map-stop-core-c {
  stop-color: var(--lx-accent);
  stop-opacity: 0;
}

.lx-map-stop-edge-a {
  stop-color: var(--lx-accent);
  stop-opacity: 0.5;
}

.lx-map-stop-edge-b {
  stop-color: var(--lx-info);
  stop-opacity: 0.1;
}

/* ---- 副体：八条色相 ---- */
[data-organ="eye"] {
  --lx-map-hue: color-mix(in srgb, var(--lx-accent) 82%, var(--lx-info));
}

[data-organ="ear"] {
  --lx-map-hue: color-mix(in srgb, var(--lx-info) 86%, var(--lx-fg));
}

[data-organ="nose"] {
  --lx-map-hue: color-mix(in srgb, var(--lx-warn) 74%, var(--lx-accent));
}

[data-organ="mouth"] {
  --lx-map-hue: color-mix(in srgb, var(--lx-warn) 62%, var(--lx-fg));
}

[data-organ="tongue"] {
  --lx-map-hue: color-mix(in srgb, var(--lx-ok) 76%, var(--lx-info));
}

[data-organ="hand"] {
  --lx-map-hue: color-mix(in srgb, var(--lx-info) 58%, var(--lx-ok));
}

[data-organ="foot"] {
  --lx-map-hue: color-mix(in srgb, var(--lx-ok) 52%, var(--lx-warn));
}

[data-organ="heart"] {
  --lx-map-hue: color-mix(in srgb, var(--lx-danger) 66%, var(--lx-accent));
}

.lx-map-node-halo {
  fill: var(--lx-map-hue, var(--lx-accent));
  opacity: 0.08;
  transform-box: fill-box;
  transform-origin: center;
  animation: lx-map-node-pulse 4.8s ease-in-out infinite;
}

.lx-map-node:nth-of-type(2n) .lx-map-node-halo {
  animation-duration: 5.9s;
  animation-delay: -1.4s;
}

.lx-map-node:nth-of-type(3n) .lx-map-node-halo {
  animation-delay: -2.6s;
}

.lx-map-node-ring {
  fill: color-mix(in srgb, var(--lx-map-hue, var(--lx-accent)) 14%, transparent);
  stroke: var(--lx-map-hue, var(--lx-accent));
  stroke-width: 1.1;
  transition: stroke-width 0.6s ease;
}

.lx-map-node-dot {
  fill: var(--lx-map-hue, var(--lx-accent));
}

.lx-map-node-label {
  fill: var(--lx-fg-2);
  font-family: var(--lx-font-sans);
  font-size: 10px;
  text-anchor: middle;
}

.lx-map-node-value {
  fill: var(--lx-fg-3);
  font-family: var(--lx-font-mono);
  font-size: 8.5px;
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
}

/* 活跃度档位只调光晕与环宽：0 = 静默，4 = 正在跑 */
.lx-map-node[data-level="0"] .lx-map-node-halo {
  opacity: 0.04;
}

.lx-map-node[data-level="1"] .lx-map-node-halo {
  opacity: 0.1;
}

.lx-map-node[data-level="2"] .lx-map-node-halo {
  opacity: 0.16;
}

.lx-map-node[data-level="3"] .lx-map-node-halo {
  opacity: 0.24;
}

.lx-map-node[data-level="4"] .lx-map-node-halo {
  opacity: 0.34;
}

.lx-map-node[data-level="3"] .lx-map-node-ring,
.lx-map-node[data-level="4"] .lx-map-node-ring {
  stroke-width: 1.8;
}

/* ---- 图注 ---- */
.lx-map-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.7rem;
  font-size: 0.625rem;
  line-height: 1.5;
  color: var(--lx-fg-4);
}

.lx-map-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.lx-map-swatch {
  display: inline-block;
  width: 0.6rem;
  height: 2px;
  border-radius: 1px;
}

.lx-map-swatch-out {
  background: var(--lx-series-out);
}

.lx-map-swatch-in {
  background: var(--lx-series-in);
}

.lx-map-swatch-field {
  background: var(--lx-accent-line);
}

.lx-map-text {
  flex: 1 1 10rem;
  min-width: 8rem;
}

/* ---- 实时徽章：live / waiting / offline 三态 ---- */
.lx-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--lx-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--lx-fg-4);
  font-variant-numeric: tabular-nums;
}

.lx-live-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--lx-ok);
  box-shadow: 0 0 0 0 var(--lx-ok-soft);
  animation: lx-live-pulse 2.4s ease-out infinite;
}

.lx-live-badge[data-live-state="waiting"] .lx-live-dot {
  background: var(--lx-warn);
  animation: none;
}

.lx-live-badge[data-live-state="offline"] .lx-live-dot {
  background: var(--lx-danger);
  animation: none;
}

.lx-live-badge[data-live-state="offline"] [data-live-at] {
  color: var(--lx-danger-text);
}

/* 数值变化时才闪一下（同一份值不重复触发） */
[data-live].is-changed,
[data-live-value].is-changed {
  animation: lx-live-flash 1.1s ease-out;
}

/* ---- 仪表板：图 + 八格读数 ---- */
.lx-subject-grid {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: calc(1rem * var(--lx-space));
  align-items: center;
  min-width: 0;
}

.lx-live-organs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.lx-live-organ {
  display: grid;
  gap: 0.1rem;
  padding: 0.5rem 0.6rem;
  background: var(--lx-surface-1);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-md);
  min-width: 0;
}

.lx-live-organ-k {
  font-size: 0.75rem;
  color: var(--lx-fg-2);
}

.lx-live-organ-v {
  font-family: var(--lx-font-mono);
  font-size: 1rem;
  line-height: 1.2;
  color: var(--lx-fg);
  font-variant-numeric: tabular-nums;
}

.lx-live-organ-h {
  font-size: 0.625rem;
  color: var(--lx-fg-4);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* N 场活跃度的五格小条：0 格 = 静默，5 格 = 正在跑（每格对应一档） */
.lx-live-meter {
  display: inline-flex;
  gap: 2px;
  margin-top: 0.15rem;
}

.lx-live-meter i {
  width: 0.5rem;
  height: 2px;
  border-radius: 1px;
  background: var(--lx-border);
  transition: background-color 0.5s ease;
}

.lx-live-organ[data-level="1"] .lx-live-meter i:nth-child(-n + 1),
.lx-live-organ[data-level="2"] .lx-live-meter i:nth-child(-n + 2),
.lx-live-organ[data-level="3"] .lx-live-meter i:nth-child(-n + 3),
.lx-live-organ[data-level="4"] .lx-live-meter i:nth-child(-n + 5) {
  background: var(--lx-map-hue, var(--lx-accent));
}

/* ---- hero 里的示意图：占满右栏，不再按装饰环缩小 ---- */
.lx-site-hero .lx-hero-art {
  width: 100%;
  max-width: 21rem;
  opacity: 1;
}

/* ---- keyframes ---- */
@keyframes lx-map-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes lx-map-spin-rev {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes lx-map-breathe {
  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.46;
  }
}

@keyframes lx-map-node-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.16);
  }
}

@keyframes lx-map-flow-out {
  to {
    stroke-dashoffset: -31;
  }
}

@keyframes lx-map-flow-in {
  to {
    stroke-dashoffset: 35;
  }
}

@keyframes lx-live-pulse {
  0% {
    box-shadow: 0 0 0 0 var(--lx-ok-soft);
  }

  70% {
    box-shadow: 0 0 0 0.32rem transparent;
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

@keyframes lx-live-flash {
  0%,
  100% {
    opacity: 1;
  }

  35% {
    opacity: 0.45;
  }
}

/* ---- 窄屏：先叠成一列，读数两列 ---- */
@media (max-width: 1100px) {
  .lx-live-organs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .lx-subject-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-subject-grid .lx-map {
    max-width: 18rem;
    margin-inline: auto;
  }

  /* 旧版这一栏是装饰环，窄屏直接 display:none；现在它是运行图，要保留 */
  .lx-site-hero .lx-hero-art {
    display: block;
    max-width: 16rem;
    margin-inline: auto;
  }
}

/* ---- 动效克制：系统开了「减少动态效果」就停掉运动，只留静态结构 ---- */
@media (prefers-reduced-motion: reduce) {
  .lx-map-orbit,
  .lx-map-edge-out,
  .lx-map-edge-in,
  .lx-map-core-glow,
  .lx-map-core-halo,
  .lx-map-node-halo,
  .lx-live-dot,
  [data-live].is-changed,
  [data-live-value].is-changed {
    animation: none;
  }

  .lx-map-particles {
    display: none;
  }
}