.alert-mask[data-v-55c0948d] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(30, 30, 30, 0.65);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alert-box[data-v-55c0948d] {
  min-width: 320px;
  max-width: 90vw;
  background: var(--dweb-defualt-light);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  padding: 32px 28px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: alert-in-55c0948d 0.25s;
}
.alert-message[data-v-55c0948d] {
  font-size: 18px;
  margin-bottom: 28px;
  text-align: center;
}
.alert-actions[data-v-55c0948d] {
  display: flex;
  gap: 24px;
}
.btn-confirm[data-v-55c0948d], .btn-cancel[data-v-55c0948d] {
  min-width: 80px;
  padding: 8px 0;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s;
}
.btn-confirm[data-v-55c0948d] {
  background: var(--vscode-accent);
  color: #fff;
}
.btn-confirm[data-v-55c0948d]:hover {
  background: var(--vscode-accent-light);
}
.btn-cancel[data-v-55c0948d] {
  background: var(--vscode-border);
  color: #fff;
}
.btn-cancel[data-v-55c0948d]:hover {
  background: #444;
}
@keyframes alert-in-55c0948d {
from { opacity: 0; transform: scale(0.92);
}
to { opacity: 1; transform: scale(1);
}
}
.alert-fade-enter-active[data-v-55c0948d], .alert-fade-leave-active[data-v-55c0948d] {
  transition: opacity 0.25s;
}
.alert-fade-enter-from[data-v-55c0948d], .alert-fade-leave-to[data-v-55c0948d] {
  opacity: 0;
}

.content-area[data-v-e5824a3f] {
  position: fixed;
  top: 56px; /* below TopBar */
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--dweb-defualt);
  color: var(--vscode-fg);
  box-sizing: border-box;
  overflow: hidden; /* 禁止根容器滚动，由内部容器滚动 */
}
.content-area.home-underlay[data-v-e5824a3f] {
  top: 0;
  background: transparent;
}
.content-inner[data-v-e5824a3f] {
  position: relative; /* 作为内部浮层定位上下文 */
  --content-offset-left: 0px; /* 左侧导航改为悬浮层，不占内容宽度 */
  height: 100%;
  width: 100%;
  padding-left: var(--content-offset-left); /* 预留 LeftPanel 宽度 */
  padding-bottom: 6px; /* 为页面底部留出空间，避免内容贴边与阴影被裁切 */
  transition: padding-left 0.3s;
  box-sizing: border-box;
  overflow: auto; /* 实际滚动容器 */
  /* 预留滚动条槽位，避免出现/消失导致的宽度抖动（支持的浏览器遵循此属性） */
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--dweb-shadow);
}
.content-inner.collapsed[data-v-e5824a3f] {
  --content-offset-left: 0px;
  padding-left: var(--content-offset-left);
}
.content-inner.full-bleed[data-v-e5824a3f] {
  padding-bottom: 0;
  scrollbar-gutter: auto;
}

/* 移动端：LeftPanel 以覆盖层形式显示，不影响内容区域宽度 */
@media (max-width: 960px) {
.content-inner[data-v-e5824a3f] {
    --content-offset-left: 0 !important; /* 移动端默认不留空 */
    padding-left: var(--content-offset-left) !important;
    padding-bottom: 0px; /* 移动端同样留出底部空间 */
}
.content-inner.collapsed[data-v-e5824a3f] {
  --content-offset-left: 0 !important;
  padding-left: var(--content-offset-left) !important;
}
}

.left-panel-shell[data-v-de561594] {
  position: fixed;
  left: 0;
  top: 56px;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1600;
}
.left-panel[data-v-de561594] {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(280px, 84vw);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  color: #f7fbff;
  background: rgba(8, 15, 26, 0.54);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32), 0 0 26px rgba(87, 240, 176, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  transform: translateX(0);
  transform-origin: top left;
  transition: transform 320ms cubic-bezier(0.2, 0.82, 0.22, 1), opacity 260ms ease;
  overflow: hidden;
}
.left-panel-shell.collapsed .left-panel[data-v-de561594] {
  transform: translateX(calc(-100% - 18px));
  opacity: 0;
}
.left-panel-shell.open[data-v-de561594] {
  pointer-events: auto;
}
.panel-backdrop[data-v-de561594] {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(3, 8, 16, 0.12);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: auto;
}
.panel-content[data-v-de561594] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 14px 84px;
  background: rgba(255, 255, 255, 0.03);
}
.dock-toggle[data-v-de561594] {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  height: 42px;
  background: rgba(8, 15, 26, 0.52);
  color: #ffffff;
  border: 1px solid rgba(106, 220, 183, 0.26);
  border-radius: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 18px rgba(106, 220, 183, 0.18), 0 14px 26px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px) saturate(122%);
  -webkit-backdrop-filter: blur(18px) saturate(122%);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  font-size: 13px;
  letter-spacing: 0.12em;
}
.dock-toggle[data-v-de561594]:hover {
  transform: translateY(-1px);
  background: rgba(10, 18, 30, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 24px rgba(106, 220, 183, 0.24), 0 18px 32px rgba(0, 0, 0, 0.28);
}
@media (max-width: 960px) {
.left-panel[data-v-de561594] {
    width: min(300px, 88vw);
}
.panel-content[data-v-de561594] {
    padding-bottom: 24px;
}
}

svg[data-v-9e055da7] {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}
.icon[data-v-9e055da7] {
  fill: currentColor;
  display: inline-block;
  vertical-align: middle;
}

#titleBar[data-v-808c0b3c] {
  -webkit-app-region: drag;   /* 设置为拖动区域 */
  user-select: none;
  box-shadow: var(--dweb-shadow);
}
.top-bar[data-v-808c0b3c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 18px 0 14px;
  background:
    radial-gradient(circle at 12% 20%, rgba(85, 151, 255, 0.14), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(64, 217, 173, 0.1), transparent 26%),
    linear-gradient(90deg, rgba(11, 18, 29, 0.32), rgba(8, 13, 24, 0.22));
  color: #f5f9ff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2), 0 0 24px rgba(76, 149, 255, 0.1);
  backdrop-filter: blur(36px) saturate(170%);
  -webkit-backdrop-filter: blur(36px) saturate(170%);
  border-bottom: 1px solid rgba(216, 234, 255, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
}
.topbar-left[data-v-808c0b3c] {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.nav-toggle-btn[data-v-808c0b3c] {
  -webkit-app-region: no-drag;
  width: 42px;
  height: 42px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.nav-toggle-core[data-v-808c0b3c] {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: rgba(8, 15, 26, 0.54);
  border: 1px solid rgba(106, 220, 183, 0.26);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 18px rgba(106, 220, 183, 0.18), 0 10px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px) saturate(122%);
  -webkit-backdrop-filter: blur(18px) saturate(122%);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.nav-toggle-btn:hover .nav-toggle-core[data-v-808c0b3c] {
  transform: translateY(-1px);
  background: rgba(10, 18, 30, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 24px rgba(106, 220, 183, 0.24), 0 12px 28px rgba(0, 0, 0, 0.26);
}
.nav-toggle-core svg[data-v-808c0b3c] {
  width: 22px;
  height: 22px;
  stroke: #ffffff;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
}
.brand-copy[data-v-808c0b3c] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.topbar-logo[data-v-808c0b3c] {
  height: 32px;
  width: 32px;
  filter: drop-shadow(0 0 12px rgba(121, 190, 255, 0.26));
}
.topbar-title[data-v-808c0b3c] {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.topbar-subtitle[data-v-808c0b3c] {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(221, 234, 255, 0.68);
}
.topbar-center[data-v-808c0b3c] {
  flex: 1;
}
.topbar-right[data-v-808c0b3c] {
  -webkit-app-region: no-drag;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}
.tb-btn[data-v-808c0b3c] {
  height: 34px;
  min-width: 76px;
  padding: 0 14px;
  background: rgba(10, 18, 31, 0.42);
  color: #f4f8ff;
  border: 1px solid rgba(144, 211, 255, 0.48);
  border-radius: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(195, 233, 255, 0.08), 0 0 20px rgba(78, 175, 255, 0.26), 0 10px 22px rgba(0, 0, 0, 0.24);
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.tb-btn[data-v-808c0b3c]:hover {
  transform: translateY(-1px);
  background: rgba(12, 22, 38, 0.56);
  box-shadow: inset 0 0 0 1px rgba(202, 237, 255, 0.11), 0 0 24px rgba(78, 175, 255, 0.34), 0 12px 24px rgba(0, 0, 0, 0.28);
}
.user-menu[data-v-808c0b3c] {
  position: relative;
  display: flex;
  align-items: center;
}

/* Invisible hover bridge so cursor can travel from avatar to dropdown without accidental leave */
.user-menu[data-v-808c0b3c]::after {
  content: '';
  position: absolute;
  right: 0;
  top: 100%;
  width: 190px;
  height: 14px;
  pointer-events: auto;
}
.user-entry[data-v-808c0b3c] {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0;
  border: 0;
  background: transparent;
}
.avatar[data-v-808c0b3c] { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 0 18px rgba(66, 149, 255, 0.14);
}
.avatar-default[data-v-808c0b3c] { width: 30px; height: 30px; display: grid; place-items: center; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 50%;
}
.user-dropdown[data-v-808c0b3c] {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 188px;
  padding: 10px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 12%, rgba(92, 182, 255, 0.28), transparent 44%),
    radial-gradient(circle at 84% 18%, rgba(96, 236, 194, 0.22), transparent 42%),
    linear-gradient(180deg, rgba(10, 20, 34, 0.78), rgba(7, 14, 26, 0.72));
  border: 1px solid rgba(176, 229, 255, 0.34);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.44),
    0 0 30px rgba(80, 172, 255, 0.3),
    0 0 18px rgba(118, 245, 206, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(28px) saturate(155%);
  -webkit-backdrop-filter: blur(28px) saturate(155%);
  animation: user-dropdown-in-808c0b3c 160ms ease-out;
  z-index: 2100;
}
.user-dropdown-item[data-v-808c0b3c] {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #f2f7ff;
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.user-dropdown-item[data-v-808c0b3c]:hover {
  background: rgba(161, 220, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(173, 227, 255, 0.22);
}
.user-dropdown-item.danger[data-v-808c0b3c] {
  color: #ffb6b6;
}
@keyframes user-dropdown-in-808c0b3c {
from {
    opacity: 0;
    transform: translateY(-4px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
@media (max-width: 960px) {
.top-bar[data-v-808c0b3c] {
    padding: 0 12px 0 10px;
}
.topbar-subtitle[data-v-808c0b3c] {
    display: none;
}
.topbar-title[data-v-808c0b3c] {
    font-size: 16px;
}
.tb-btn[data-v-808c0b3c] {
    height: 32px;
    padding: 0 12px;
}
}

.vertical-menu[data-v-251d3b29] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menu-item[data-v-251d3b29] {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(236, 244, 255, 0.88);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 0 14px rgba(106, 220, 183, 0.08);
  transition: background 0.18s, color 0.18s, transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  position: relative;
}
.menu-item.collapsed[data-v-251d3b29] {
  justify-content: center;
  padding: 0;
}
.menu-item[data-v-251d3b29]:hover,
.menu-item.active[data-v-251d3b29] {
  background: rgba(106, 220, 183, 0.08);
  border-color: rgba(106, 220, 183, 0.24);
  color: #fff;
  transform: translateX(2px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 0 18px rgba(106, 220, 183, 0.14);
}
.menu-icon[data-v-251d3b29] {
  font-size: 22px;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-img[data-v-251d3b29] {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.menu-text[data-v-251d3b29] {
  white-space: nowrap;
}
.expand-arrow[data-v-251d3b29] {
  margin-left: auto;
  font-size: 16px;
  transition: transform 0.2s;
}
.expand-arrow.expanded[data-v-251d3b29] {
  transform: rotate(180deg);
}
.submenu[data-v-251d3b29] {
  background: rgba(255, 255, 255, 0.02);
  padding: 4px 0 4px 44px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 1px solid rgba(106, 220, 183, 0.24);
  animation: submenu-in-251d3b29 0.2s;
}
.submenu-item[data-v-251d3b29] {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 12px;
  color: rgba(232, 242, 255, 0.82);
  font-size: 15px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0;
  border: 1px solid transparent;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.submenu-item[data-v-251d3b29]:hover {
  background: rgba(106, 220, 183, 0.08);
  border-color: rgba(106, 220, 183, 0.2);
  color: #fff;
}
.submenu-item.active[data-v-251d3b29] {
  background: rgba(106, 220, 183, 0.08);
  border-color: rgba(106, 220, 183, 0.2);
  color: #fff;
}
.submenu-icon[data-v-251d3b29] {
  font-size: 18px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.submenu-text[data-v-251d3b29] {
  white-space: nowrap;
}
@keyframes submenu-in-251d3b29 {
from {
    opacity: 0;
    transform: translateY(-8px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.submenu-fade-enter-active[data-v-251d3b29],
.submenu-fade-leave-active[data-v-251d3b29] {
  transition: opacity 0.2s;
}
.submenu-fade-enter-from[data-v-251d3b29],
.submenu-fade-leave-to[data-v-251d3b29] {
  opacity: 0;
}

.loading-bar[data-v-6358c589] {
  position: fixed;
  top: 56px; /* under TopBar */
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 3000;
}
.bar[data-v-6358c589] {
  height: 100%;
  background: var(--vscode-accent);
  transition: width .2s ease;
}
.fade-enter-active[data-v-6358c589], .fade-leave-active[data-v-6358c589] { transition: opacity .2s ease;
}
.fade-enter-from[data-v-6358c589], .fade-leave-to[data-v-6358c589] { opacity: 0;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--dweb-defualt);
  overscroll-behavior: none; /* 阻止触底反弹 */
}
/* 禁止页面级滚动，由 Content 内部容器承接滚动 */
body {
  overflow: hidden;
  touch-action: pan-x pan-y; /* 允许正常滚动手势，但不触发页面层级位移 */
}
/* 空白布局允许页面级滚动（供预览页全屏渲染使用） */
body.blank-layout {
  overflow: auto;
}
/* 全局彻底隐藏滚动条 */
* {
  scrollbar-width: none;
}
*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
html,
body {
  margin: 0;
  padding: 0;
  color: #fff;
}
/* 页面整体布局，去除最外层div后直接用body撑满 */
body {
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* VS Code 主题风格全局配色类 */
:root {
  /* 全局滚动条美化，仅y轴显示，x轴隐藏 */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--vscode-accent) var(--dweb-defualt-light);
  }
  /* 仅y轴滚动条美化，x轴隐藏 */
  *::-webkit-scrollbar {
    width: 8px;
    height: 0 !important;
  }
  *::-webkit-scrollbar-thumb {
    background: var(--vscode-accent);
    border-radius: 8px;
  }
  *::-webkit-scrollbar-track {
    background: var(--dweb-defualt-light);
    border-radius: 8px;
  }
  *::-webkit-scrollbar:horizontal {
    display: none !important;
    height: 0 !important;
  }
  --dweb-defualt: #1e1e1e;
  --dweb-defualt: #1e1e1e;
  --dweb-defualt-light: #23272e;
  --dweb-defualt-dark: #181818;
  --vscode-fg: #d4d4d4;
  --vscode-fg-muted: #a0a0a0;
  --vscode-accent: #3aa8b4;
  --vscode-accent-light: #3399ff;
  --vscode-accent-dark: #005a9e;
  --vscode-border: #3c3c3c;
  --vscode-border-light: #505050;
  --vscode-border-accent: #3aa8b4;
  --vscode-error: #f14c4c;
  --vscode-warning: #cca700;
  --vscode-success: #17a773;
  --vscode-info: #3794ff;
  --vscode-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  --vscode-hover-bg: #23272e;
  --vscode-hover-border: #3aa8b4;
  --vscode-selected-bg: #094771;
  --vscode-selected-border: #3aa8b4;
  --vscode-disabled-bg: #2c2c2c;
  --vscode-disabled-fg: #666;
  --vscode-divider: #282828;

  --dweb-defualt: #1e1e1e;
  --dweb-shadow: 0 0 10px #38a9b69d, 0 0 10px #38a9b69d;
  --dweb-shadow-red: 0 0 10px #d74e4ea5, 0 0 10px #d74e4ea5;
  --dweb-bg: #282c34;
  --dweb-fg: #21252b;
  --dweb-accent: #3aa8b4;
  --dweb-success: #46c192;

  --dweb-red: #d74f4e;
  --dweb-red2: #d75080;
  --dweb-orange: #d77f4f;
  --dweb-yellow: #d6c050;
  --dweb-green: #57d9a3;
  --dweb-green-light: #4ed684;
  --dweb-green-main: #39a8b4;
  --dweb-blue: #4e85d7;
  /* 紫色 */
  --dweb-purple: #724fd6;
  --dweb-purple-light: #c397f8;
  --dweb-pink: #d750b9;
}

/* ---------- 响应式行/列通用布局（手机优先） ---------- */
.row {
  display: flex;
  flex-direction: row;
  gap: 12px;
}
.row.wrap {
  flex-wrap: wrap;
}
.row.center {
  align-items: center;
}
.row.start {
  align-items: flex-start;
}
.row.end {
  align-items: flex-end;
}
.row.between {
  justify-content: space-between;
}
.row.around {
  justify-content: space-around;
}
.row.evenly {
  justify-content: space-evenly;
}

.col {
  flex: 1 1 0;
  min-width: 0;
}
.col.auto {
  flex: 0 0 auto;
}
.col.full {
  flex: 0 0 100%;
}

/* 移动端适配：列默认堆叠，必要时用 .wrap 控制换行 */
@media (max-width: 960px) {
  .row {
    flex-wrap: wrap;
  }
  .col {
    flex: 1 1 100%;
  }
  .hide-on-mobile {
    display: none !important;
  }
  .show-on-mobile {
    display: initial !important;
  }
}

/* ---------- 全局渐隐渐显动画工具类 ---------- */
@keyframes dweb-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes dweb-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(4px);
  }
}
.fade-in {
  animation: dweb-fade-in 240ms ease-out both;
  will-change: opacity, transform;
}
.fade-out {
  animation: dweb-fade-out 180ms ease-in both;
  will-change: opacity, transform;
}

/* 背景色 */
.bg-vscode {
  background-color: var(--dweb-defualt) !important;
}
.bg-vscode-light {
  background-color: var(--dweb-defualt-light) !important;
}
.bg-vscode-dark {
  background-color: var(--dweb-defualt-dark) !important;
}
.selected-vscode {
  background-color: var(--vscode-selected-bg) !important;
  border-color: var(--vscode-selected-border) !important;
}
.disabled-vscode {
  background-color: var(--vscode-disabled-bg) !important;
  color: var(--vscode-disabled-fg) !important;
}

/* ---------- 24列栅格系统（PC 与移动端） ---------- */
/* 用法：给列元素添加 .col-24-N；在移动端用 .m-col-24-N 覆盖 */
/* PC/通用 */
.col-24-1 {
  flex: 0 0 calc(100% * 1 / 24);
  max-width: calc(100% * 1 / 24);
}
.col-24-2 {
  flex: 0 0 calc(100% * 2 / 24);
  max-width: calc(100% * 2 / 24);
}
.col-24-3 {
  flex: 0 0 calc(100% * 3 / 24);
  max-width: calc(100% * 3 / 24);
}
.col-24-4 {
  flex: 0 0 calc(100% * 4 / 24);
  max-width: calc(100% * 4 / 24);
}
.col-24-5 {
  flex: 0 0 calc(100% * 5 / 24);
  max-width: calc(100% * 5 / 24);
}
.col-24-6 {
  flex: 0 0 calc(100% * 6 / 24);
  max-width: calc(100% * 6 / 24);
}
.col-24-7 {
  flex: 0 0 calc(100% * 7 / 24);
  max-width: calc(100% * 7 / 24);
}
.col-24-8 {
  flex: 0 0 calc(100% * 8 / 24);
  max-width: calc(100% * 8 / 24);
}
.col-24-9 {
  flex: 0 0 calc(100% * 9 / 24);
  max-width: calc(100% * 9 / 24);
}
.col-24-10 {
  flex: 0 0 calc(100% * 10 / 24);
  max-width: calc(100% * 10 / 24);
}
.col-24-11 {
  flex: 0 0 calc(100% * 11 / 24);
  max-width: calc(100% * 11 / 24);
}
.col-24-12 {
  flex: 0 0 calc(100% * 12 / 24);
  max-width: calc(100% * 12 / 24);
}
.col-24-13 {
  flex: 0 0 calc(100% * 13 / 24);
  max-width: calc(100% * 13 / 24);
}
.col-24-14 {
  flex: 0 0 calc(100% * 14 / 24);
  max-width: calc(100% * 14 / 24);
}
.col-24-15 {
  flex: 0 0 calc(100% * 15 / 24);
  max-width: calc(100% * 15 / 24);
}
.col-24-16 {
  flex: 0 0 calc(100% * 16 / 24);
  max-width: calc(100% * 16 / 24);
}
.col-24-17 {
  flex: 0 0 calc(100% * 17 / 24);
  max-width: calc(100% * 17 / 24);
}
.col-24-18 {
  flex: 0 0 calc(100% * 18 / 24);
  max-width: calc(100% * 18 / 24);
}
.col-24-19 {
  flex: 0 0 calc(100% * 19 / 24);
  max-width: calc(100% * 19 / 24);
}
.col-24-20 {
  flex: 0 0 calc(100% * 20 / 24);
  max-width: calc(100% * 20 / 24);
}
.col-24-21 {
  flex: 0 0 calc(100% * 21 / 24);
  max-width: calc(100% * 21 / 24);
}
.col-24-22 {
  flex: 0 0 calc(100% * 22 / 24);
  max-width: calc(100% * 22 / 24);
}
.col-24-23 {
  flex: 0 0 calc(100% * 23 / 24);
  max-width: calc(100% * 23 / 24);
}
.col-24-24 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* 移动端覆盖：m-col-24-N */
@media (max-width: 960px) {
  .m-col-24-1 {
    flex: 0 0 calc(100% * 1 / 24);
    max-width: calc(100% * 1 / 24);
  }
  .m-col-24-2 {
    flex: 0 0 calc(100% * 2 / 24);
    max-width: calc(100% * 2 / 24);
  }
  .m-col-24-3 {
    flex: 0 0 calc(100% * 3 / 24);
    max-width: calc(100% * 3 / 24);
  }
  .m-col-24-4 {
    flex: 0 0 calc(100% * 4 / 24);
    max-width: calc(100% * 4 / 24);
  }
  .m-col-24-5 {
    flex: 0 0 calc(100% * 5 / 24);
    max-width: calc(100% * 5 / 24);
  }
  .m-col-24-6 {
    flex: 0 0 calc(100% * 6 / 24);
    max-width: calc(100% * 6 / 24);
  }
  .m-col-24-7 {
    flex: 0 0 calc(100% * 7 / 24);
    max-width: calc(100% * 7 / 24);
  }
  .m-col-24-8 {
    flex: 0 0 calc(100% * 8 / 24);
    max-width: calc(100% * 8 / 24);
  }
  .m-col-24-9 {
    flex: 0 0 calc(100% * 9 / 24);
    max-width: calc(100% * 9 / 24);
  }
  .m-col-24-10 {
    flex: 0 0 calc(100% * 10 / 24);
    max-width: calc(100% * 10 / 24);
  }
  .m-col-24-11 {
    flex: 0 0 calc(100% * 11 / 24);
    max-width: calc(100% * 11 / 24);
  }
  .m-col-24-12 {
    flex: 0 0 calc(100% * 12 / 24);
    max-width: calc(100% * 12 / 24);
  }
  .m-col-24-13 {
    flex: 0 0 calc(100% * 13 / 24);
    max-width: calc(100% * 13 / 24);
  }
  .m-col-24-14 {
    flex: 0 0 calc(100% * 14 / 24);
    max-width: calc(100% * 14 / 24);
  }
  .m-col-24-15 {
    flex: 0 0 calc(100% * 15 / 24);
    max-width: calc(100% * 15 / 24);
  }
  .m-col-24-16 {
    flex: 0 0 calc(100% * 16 / 24);
    max-width: calc(100% * 16 / 24);
  }
  .m-col-24-17 {
    flex: 0 0 calc(100% * 17 / 24);
    max-width: calc(100% * 17 / 24);
  }
  .m-col-24-18 {
    flex: 0 0 calc(100% * 18 / 24);
    max-width: calc(100% * 18 / 24);
  }
  .m-col-24-19 {
    flex: 0 0 calc(100% * 19 / 24);
    max-width: calc(100% * 19 / 24);
  }
  .m-col-24-20 {
    flex: 0 0 calc(100% * 20 / 24);
    max-width: calc(100% * 20 / 24);
  }
  .m-col-24-21 {
    flex: 0 0 calc(100% * 21 / 24);
    max-width: calc(100% * 21 / 24);
  }
  .m-col-24-22 {
    flex: 0 0 calc(100% * 22 / 24);
    max-width: calc(100% * 22 / 24);
  }
  .m-col-24-23 {
    flex: 0 0 calc(100% * 23 / 24);
    max-width: calc(100% * 23 / 24);
  }
  .m-col-24-24 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* 前景色 */
.text-vscode {
  color: var(--vscode-fg) !important;
}
.text-vscode-muted {
  color: var(--vscode-fg-muted) !important;
}
.accent-vscode {
  color: var(--vscode-accent) !important;
}
.accent-vscode-light {
  color: var(--vscode-accent-light) !important;
}
.accent-vscode-dark {
  color: var(--vscode-accent-dark) !important;
}
.error-vscode {
  color: var(--vscode-error) !important;
}
.warning-vscode {
  color: var(--vscode-warning) !important;
}
.success-vscode {
  color: var(--vscode-success) !important;
}
.info-vscode {
  color: var(--vscode-info) !important;
}

/* 边框/分割线 */
.border-vscode {
  border-color: var(--vscode-border) !important;
}
.border-vscode-light {
  border-color: var(--vscode-border-light) !important;
}
.border-vscode-accent {
  border-color: var(--vscode-border-accent) !important;
}
.divider-vscode {
  border-bottom: 1px solid var(--vscode-divider) !important;
}

/* 阴影/悬停/选中 */
.shadow-vscode {
  box-shadow: var(--vscode-shadow) !important;
}
.hover-vscode {
  background-color: var(--vscode-hover-bg) !important;
  border-color: var(--vscode-hover-border) !important;
}

/* 选中态 */
.selected-vscode {
  background-color: var(--vscode-selected-bg) !important;
  border-color: var(--vscode-selected-border) !important;
}

/* 禁用态 */
.disabled-vscode {
  background-color: var(--vscode-disabled-bg) !important;
  color: var(--vscode-disabled-fg) !important;
}

/* ---------- 卡片样式 ---------- */
.dweb-card {
  background: var(--dweb-defualt-light);
  border: 1px solid var(--vscode-border);
  padding: 16px;
  box-shadow: var(--dweb-shadow);
}
.dweb-card-title {
  margin: 0 0 12px;
  font-size: 18px;
}

/* ---------- 工具栏样式 ---------- */
.dweb-toolbar {
  margin: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  background: #1e1e1ed7;
  font-size: 14px;
  gap: 12px;
  padding: 0 16px;
}

.dweb-tool-btn {
  background: var(--dweb-accent);
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 4px 16px;
  font-size: 14px;
  cursor: pointer;
  height: 28px;
  min-width: 64px;
}
.dweb-tool-btn.delete {
  background: var(--dweb-red);
}

/* ---------- 表单网格布局 ---------- */
.dweb-form-grid {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px 12px;
  align-items: center;
}

/* ---------- 表单字段样式 ---------- */
.dweb-field-text {
  line-height: 32px;
}

/* ---------- 头像样式 ---------- */
.dweb-avatar-box {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}
.dweb-avatar-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dweb-avatar-default {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.dweb-avatar-default.big {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---------- 表单控件样式 ---------- */
.dweb-form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}
.dweb-form-row.inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.dweb-form-row label {
  font-size: 12px;
  color: #9aa0a6;
  margin-bottom: 6px;
}
.dweb-form-input,
.dweb-form-row input[type="text"],
.dweb-form-row input[type="password"] {
  height: 36px;
  padding: 0 12px;
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.25);
  color: var(--vscode-fg, #d4d4d4);
}
.dweb-form-input:focus,
.dweb-form-row input:focus {
  border-color: color-mix(in srgb, var(--dweb-accent) 70%, transparent);
  background: rgba(0, 0, 0, 0.35);
}
.dweb-error-msg {
  color: #ff6b6b;
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.4;
}
.dweb-form-input.invalid,
.dweb-form-row input.invalid {
  border-color: #ff6b6b !important;
  background: rgba(255, 107, 107, 0.06);
}

/* 统一暗色与禁用浏览器 autofill 高亮 */
.dweb-form-input::placeholder,
.dweb-form-row input::placeholder {
  color: #9aa0a6;
}
.dweb-form-input:-webkit-autofill,
.dweb-form-input:-webkit-autofill:hover,
.dweb-form-input:-webkit-autofill:focus,
.dweb-form-input:-webkit-autofill:active,
.dweb-form-row input:-webkit-autofill,
.dweb-form-row input:-webkit-autofill:hover,
.dweb-form-row input:-webkit-autofill:focus,
.dweb-form-row input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--vscode-fg, #d4d4d4) !important;
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.25) inset !important;
  caret-color: var(--vscode-fg, #d4d4d4) !important;
  transition: background-color 9999s ease-out 0s !important;
}
.dweb-form-input:-moz-autofill,
.dweb-form-row input:-moz-autofill {
  color: var(--vscode-fg, #d4d4d4) !important;
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.25) inset !important;
}

/* ---------- Article 页面通用样式（可复用） ---------- */
/* 容器：两行布局，上方元信息行固定高，下方正文自适应并内部滚动 */

/* ---------- Global Markdown Rendering (applies to .md-body and .reply-md) ---------- */
.md-body,
.reply-md {
  /* base font and spacing for rendered markdown */
  font-size: 14px;
  line-height: 1.7;
  color: var(--vscode-fg);
}

.md-body p,
.reply-md p {
  margin: 12px 0;
}

/* Video host and video sizing */
.md-body .md-video-host,
.reply-md .md-video-host {
  margin: 12px 0;
}
.md-body .md-video,
.reply-md .md-video {
  width: 100%;
  max-height: 540px;
  background: #000;
  border-radius: 8px;
}

/* Code block / toolbar */
.md-body .code-block,
.reply-md .code-block {
  position: relative;
  margin: 12px 0;
  background: #0b1220;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}
.md-body .code-toolbar,
.reply-md .code-toolbar {
  position: absolute;
  top: 6px;
  right: 8px;
  display: flex;
  gap: 8px;
}
.md-body .copy-btn,
.reply-md .copy-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #dfe7ef;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.md-body .copy-btn.copied,
.reply-md .copy-btn.copied {
  color: var(--dweb-accent);
  border-color: var(--dweb-accent);
  background: rgba(58, 168, 180, 0.12);
}
.md-body .copy-btn:hover,
.reply-md .copy-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
.md-body .code-scroll,
.reply-md .code-scroll {
  max-height: 480px;
  overflow: auto;
  padding: 12px 12px;
  margin: 0;
}
.md-body .code-scroll code,
.reply-md .code-scroll code {
  white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.55;
  color: #d1e3ff;
}

/* blockquote style */
.md-body blockquote,
.reply-md blockquote {
  margin: 12px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--dweb-accent);
  background: rgba(255, 255, 255, 0.04);
  color: var(--vscode-fg);
  border-radius: 4px;
}

/* Table styles */
.md-body .md-table-wrap,
.reply-md .md-table-wrap {
  width: 100%;
  overflow: auto;
  margin: 12px 0;
}
.md-body .md-table,
.reply-md .md-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.md-body .md-table thead th,
.reply-md .md-table thead th {
  background: rgba(255, 255, 255, 0.06);
  color: var(--vscode-fg);
  font-weight: 600;
}
.md-body .md-table th,
.reply-md .md-table th,
.md-body .md-table td,
.reply-md .md-table td {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 10px;
  text-align: left;
}
.md-body .md-table tbody tr:nth-child(odd),
.reply-md .md-table tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.03);
}
.md-body .md-table tbody tr:hover,
.reply-md .md-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Images and media */
.md-body img,
.reply-md img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
.md-body picture,
.reply-md picture,
.md-body video,
.reply-md video,
.md-body iframe,
.reply-md iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.md-body video,
.reply-md video {
  max-height: 540px;
}

/* Inline code */
.md-body code,
.reply-md code {
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Horizontal rule */
.md-body hr,
.reply-md hr {
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 12px 0;
}

/* Make tables readable on small screens */
@media (max-width: 640px) {
  .md-body .md-table td,
  .reply-md .md-table td {
    padding: 6px 8px;
    font-size: 13px;
  }
}

.article-page {
  height: 100%;
  min-height: 0; /* 允许子项按剩余高度收缩 */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 第一行：封面 + 信息区（PC 默认 228px，高度变量便于复用） */
.article-page .row-meta {
  /* PC 端维持固定高度设计 */
  --article-meta-h: 228px;
  height: var(--article-meta-h);
  min-height: var(--article-meta-h);
  display: grid;
  grid-template-columns: auto 1fr; /* 左列由内容宽度决定，右列填满 */
  gap: 16px;
  align-items: stretch; /* 两列拉伸到满高 */
  background: var(--dweb-defualt-light);
  border: 1px solid #2222;
  box-shadow: var(--dweb-shadow);
  padding: 12px;
  overflow: hidden; /* PC 按固定高裁切，移动端单独放开 */
}

/* ------- Article two-column with SubNav (desktop) ------- */
.article-page .row-content {
  gap: 24px;
}
.article-page .row-content {
  width: 100%;
  box-sizing: border-box;
}
.article-page .row-content {
  justify-content: center;
}
.article-page .row-content {
  /* 由外层 Content 作为滚动容器，正文区自身不产生二级滚动 */
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  padding-bottom: 0;
}
.article-page .row-content > .subnav-box {
  display: none;
  min-width: 0;
}

/* Show SubNav only on wide desktop to avoid horizontal overflow */
@media (min-width: 1280px) {
  .article-page .row-content {
    flex-direction: row;
    align-items: flex-start;
    /* 将正文+目录整体容器居中并限制最大宽度，避免右侧空余过大 */
    max-width: calc(960px+280px+24px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
  }
  .article-page .row-content > .md-body {
    flex: 0 0 960px;
    max-width: 960px;
    width: 960px;
  }
  .article-page .row-content > .subnav-box {
    display: block;
    position: sticky;
    top: 80px; /* adjust if header height differs */
    /* 高度随内容，不强制占满。若目录过长，由外层滚动承载 */
    align-self: flex-start;
    /* 固定目录列宽，避免被拉伸，便于容器宽度计算 */
    flex: 0 0 280px;
    width: 280px;
  }
}

/* Mobile/tablet: hide SubNav explicitly */
@media (max-width: 1279px) {
  .article-page .row-content > .subnav-box {
    display: none !important;
  }
  /* 移动/平板时仅正文居中展示 */
  .article-page .row-content > .md-body {
    max-width: 960px;
    width: min(960px, 100%);
    margin-left: auto;
    margin-right: auto;
    flex: 0 1 auto;
  }
}

/* ------- SubNav (目录) 全局样式：限制在 Article 页面内 ------- */
.article-page .subnav {
  width: 280px;
  /* 高度自适应内容 */
  max-height: none;
  overflow: visible;
  border: 1px solid #2222;
  background: var(--dweb-defualt-light);
  box-shadow: var(--dweb-shadow);
  padding: 10px 12px;
  color: #fff;
}
.article-page .subnav-title {
  font-weight: 700;
  margin-bottom: 8px;
}
.article-page .toc-root,
.article-page .toc-children {
  list-style: none;
  padding: 0;
  margin: 0;
}
.article-page .toc-item {
  margin: 4px 0;
}
.article-page .toc-line {
  display: flex;
  align-items: center;
  gap: 6px;
}
.article-page .toc-link,
.article-page .toc-link:link,
.article-page .toc-link:visited,
.article-page .toc-link:active,
.article-page .toc-link:focus {
  color: #fff !important;
  text-decoration: none !important;
  font-size: 13px;
}
.article-page .toc-link:hover {
  color: var(--dweb-accent) !important;
  text-decoration: none !important;
}
.article-page .lv-1 > .toc-line .toc-link {
  font-weight: 600;
}
.article-page .lv-2 {
  padding-left: 10px;
}
.article-page .lv-3 {
  padding-left: 18px;
}
.article-page .lv-4 {
  padding-left: 26px;
}
.article-page .lv-5 {
  padding-left: 34px;
}
.article-page .lv-6 {
  padding-left: 42px;
}

/* 封面容器：默认以高度为基准，维持比例，内部图像充满且裁切 */
.article-page .cover {
  height: 100%;
  aspect-ratio: 16 / 9; /* 维持 16:9 宽高比 */
  width: auto; /* 宽度由高度+比例推导 */
  max-width: 50vw; /* 防止过宽 */
  overflow: hidden;
}
/* 让 DwebImage 填满容器并裁切不溢出 */
.article-page .cover .di-wrap {
  height: 100%;
  width: 100%;
}
.article-page .cover .di-media {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持裁切填充，不拉伸变形 */
}

/* 右侧信息区文本样式与溢出约束 */
.article-page .info .title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--vscode-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 标题单行省略 */
}
.article-page .info .desc {
  margin: 0 0 8px;
  color: #888;
  font-size: 13px; /* 与日期保持一致的字号 */
  display: -webkit-box; /* 两行省略 */
  line-clamp: 2; /* 标准属性（兼容性） */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-page .meta-line {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #666;
}
.article-page .meta-line .date {
  /* 日期与描述同字号，单行省略 */
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-page .tag {
  display: inline-block;
  margin-right: 8px;
  font-size: 12px;
  color: #555;
  background: #0001;
  padding: 2px 6px;
  border-radius: 2px;
}

/* 第二行：Markdown 正文区域（内部滚动） */
.article-page .row-content {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  background: var(--dweb-defualt-light);
  border: 1px solid #2222;
  box-shadow: var(--dweb-shadow);
  padding: 16px 18px;
  overflow: auto; /* 仅正文内部滚动（允许纵向滚动） */
  display: flex; /* 覆盖 .row 的默认横向布局 */
  flex-direction: row; /* 正文在上，footer 在下（防止被其他规则覆盖） */
  align-items: stretch; /* 子项占满内容宽度 */
}

/* Markdown 基础样式（暗色友好，可复用） */
.md-body {
  color: var(--vscode-fg);
  line-height: 1.7;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.md-body h1,
.md-body h2,
.md-body h3 {
  margin: 0 0 0.6em;
}
.md-body p {
  margin: 0.6em 0;
}
.md-body code {
  background: #0002;
  padding: 0 4px;
  border-radius: 2px;
}
.md-body pre {
  background: #0003;
  padding: 10px 12px;
  overflow: auto;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}
.md-body code {
  word-break: break-word;
  white-space: pre-wrap;
}
.md-body table {
  width: 100%;
  table-layout: fixed;
}
.md-body th,
.md-body td {
  word-break: break-word;
}
.md-body a {
  color: var(--dweb-accent);
  text-decoration: none;
}
.md-body a:hover {
  text-decoration: underline;
}
.md-body ul,
.md-body ol {
  padding-left: 1.2em;
}

/* Markdown 媒体（图片/视频）统一样式 */
.md-body img,
.md-body video {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  /* box-shadow: var(--dweb-shadow); */
  margin: 0px 0; /* 左对齐，去除水平居中 */
}
.md-body img {
  max-height: 480px;
}
.md-body video {
  background: #000;
  width: auto; /* 移除默认宽度，避免与 max-width 冲突 */
  box-sizing: border-box; /* 包含潜在边框与滚动条空间，避免溢出 */
  max-height: 480px;
}

/* Markdown 图片容器（用于挂载 DwebImage）与 DwebImage 样式对齐 */
.md-body .md-image-host {
  display: block;
  width: 80%;
  min-height: 420px;
  height: 420px;
  margin: 10px 0; /* 与普通 img 保持一致的上下间距 */
  border-radius: 6px;
  box-shadow: var(--dweb-shadow);
  overflow: hidden;
}
.md-body .md-image-host .di-wrap {
  width: 100%;
  height: 100%;
}
.md-body .md-image-host .di-media {
  width: 100%;
  height: 100%; /* 让图片在 480px 容器内自适应填充（object-fit: contain 控制不变形） */
  max-width: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.reply-md.md-body .md-image-host {
  min-height: 120px;
  height: 240px;
  width: 30%;
  min-width: 45%;
  margin-left: 15px;
}

/* 移动端：降低默认占位高度，避免首屏过高 */
@media (max-width: 960px) {
  .md-body .md-image-host {
    width: 100%;
    min-height: 240px;
    height: 240px;
  }
  .reply-md.md-body .md-image-host {
    height: 180px;
    min-height: 180px;
    width: 80%;
    margin-left: 15px;
  }
}

/* 第三行：页脚（上一篇 / 下一篇） */
.article-page .row-footer {
  background: var(--dweb-defualt-light);
  border: 1px solid #2222;
  box-shadow: var(--dweb-shadow);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--vscode-fg);
  box-sizing: border-box; /* 包含内边距与边框，避免 100% 宽度下溢出 */
  width: 100%;
  max-width: 100%;
  min-width: 0; /* 允许在窄屏下收缩 */
  flex-wrap: wrap; /* 窄屏时允许换行，避免向右溢出 */
}

/* footer 子项在窄屏下可收缩并省略，避免横向溢出 */
.article-page .row-footer > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 内容与外部 footer 间距 */
/* .article-page > .row-footer { margin-top: 16px; } */

/* 确保正文也占满内容区域宽度，避免与 footer 并排 */
.article-page .row-content > .md-body {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.article-page .row-content > * {
  min-width: 0;
}

/* PC 端（≥1280px 且存在右侧副导航）：正文固定 960px，左对齐；
  介于 961–1279px 的宽度区间为单列布局，保持 100% 宽度 */

/* 响应式：移动端（<=960px）
   要求：封面列宽约束为 1/3，不溢出；文本字号适配 */
@media (max-width: 960px) {
  .article-page .row-meta {
    /* 移动端：按右侧内容自适应高度，不裁切 */
    height: auto;
    min-height: 100px;
    overflow: visible;
    grid-template-columns: 1fr 2fr; /* 左 1/3 右 2/3，满足封面 1/3 宽度约束 */
    gap: 12px;
    padding: 10px;
  }
  .article-page .cover {
    width: 100%; /* 在分配的网格列内撑满 */
    height: 100%; /* 不超过第一行高度，避免底部被裁切 */
    aspect-ratio: auto; /* 由列宽与行高共同决定，移除比例硬约束以避免溢出 */
    max-width: initial;
  }
  .article-page .info .title {
    font-size: 18px;
  }
  .article-page .info .desc {
    font-size: 13px;
  }
  .md-body img {
    max-height: 480px;
  }
  .md-body video {
    max-height: 480px;
    width: 100%;
  }
}