html, body, #app { margin: 0; padding: 0; height: 100%; overflow: hidden; }

/* 主题切换 View Transition：卷帘式
   切暗色：从右往左（夜晚从右侧降临）
   切亮色：从左往右（白天从左侧铺开） */
html.theme-transitioning::view-transition-old(root) {
  animation: none; /* 旧页面保持不动 */
}
html.theme-transitioning.to-dark::view-transition-new(root) {
  animation: curtain-right-to-left 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}
html.theme-transitioning.to-light::view-transition-new(root) {
  animation: curtain-left-to-right 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes curtain-right-to-left {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes curtain-left-to-right {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.n-card > .n-card__footer {
    padding: 8px var(--n-padding-left) 16px var(--n-padding-left);
}

.logo-text {
  font-weight: 700;
  font-size: 16px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;          /* flex 子项允许收缩到 content 以下，ellipsis 才生效 */
  max-width: 150px;      /* sidebar 220 - logo 28 - gap 8 - 内边距 ≈ 150 */
  display: inline-block;
  transition: all 0.3s ease;
}

.header-action {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  gap: 6px;
}
.header-action:hover {
  background-color: rgba(37, 99, 235, 0.1);
}
/* 工具栏按钮（收缩/刷新）：比 header-action 更紧凑，颜色与面包屑协调 */
.header-tool-btn {
  padding: 4px 6px !important;
  border-radius: 4px !important;
  color: rgba(0, 0, 0, 0.45);
  transition: color 0.15s, background-color 0.15s;
}
.header-tool-btn:hover {
  color: rgba(0, 0, 0, 0.88);
}
.dark .header-tool-btn {
  color: rgba(255, 255, 255, 0.5);
}
.dark .header-tool-btn:hover {
  color: rgba(255, 255, 255, 0.9);
}
/* userTools(button) 悬浮提示：data-tip 非空时 hover 立即显示（比原生 title 灵敏） */
.header-action[data-tip] { position: relative; }
.header-action[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(17, 24, 39, 0.85);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 6px 9px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: nova-tip-in 0.15s ease;
}
.header-action[data-tip]:hover::before {
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: rgba(17, 24, 39, 0.85);
  pointer-events: none;
  z-index: 1000;
}
@keyframes nova-tip-in {
  from { opacity: 0; transform: translate(-50%, -4px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.theme-switch {
  height: 24px;
  gap: 6px;
}
/* 消息中心抽屉 */
.msg-drawer .n-drawer-body-content-wrapper { scrollbar-width: thin; scrollbar-color: #bbb #fafafa; background: #f5f7fa; scrollbar-gutter: stable; }
.msg-drawer .n-drawer-body-content-wrapper::-webkit-scrollbar { width: 6px; }
.msg-drawer .n-drawer-body-content-wrapper::-webkit-scrollbar-track { background: #fafafa; border-radius: 3px; }
.msg-drawer .n-drawer-body-content-wrapper::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; }
.msg-drawer .n-drawer-body-content-wrapper::-webkit-scrollbar-thumb:hover { background: #999; }
.dark .msg-drawer .n-drawer-body-content-wrapper { scrollbar-color: #555 #1a1a1a; background: #151515; }
.dark .msg-drawer .n-drawer-body-content-wrapper::-webkit-scrollbar-track { background: #1a1a1a; }
.dark .msg-drawer .n-drawer-body-content-wrapper::-webkit-scrollbar-thumb { background: #555; }
.dark .msg-drawer .n-drawer-body-content-wrapper::-webkit-scrollbar-thumb:hover { background: #777; }

/* 暗色模式抽屉：左侧阴影营造层次感，避免和深色背景融为一体 */
.dark .n-drawer {
  background: #1f1f1f !important;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.4);
}
.dark .n-drawer .n-drawer-header,
.dark .n-drawer .n-drawer-body,
.dark .n-drawer .n-drawer-footer {
  background: #1f1f1f !important;
  color: #e0e0e0 !important;
}
.dark .n-drawer .n-drawer-header__content {
  color: #e0e0e0 !important;
}
.msg-center-loading,
.msg-center-empty { padding: 32px; text-align: center; color: #999; font-size: 14px; }
.msg-center-list { padding: 4px 0 20px; }
.msg-center-item {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.msg-center-item:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}
.msg-center-title { font-weight: 600; margin-bottom: 6px; font-size: 14px; color: #333; padding-right: 24px; }
.msg-ring {
  display: inline-block;
  vertical-align: -3px;
  font-size: 18px;
  margin-right: 4px;
  color: inherit;
}
.msg-ring.ring-follow { color: #2563eb; }
.msg-ring.ring-critical { color: #e5484d; }
.msg-center-x {
  position: absolute;
  top: 8px;
  right: 10px;
  color: #aaa;
  font-size: 14px;
  padding: 2px;
}
.msg-center-x:hover { color: #333; }
.msg-center-content {
  color: #666;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 46px;
  transition: max-height 0.35s ease;
}
.msg-center-item.expanded .msg-center-content { display: block; -webkit-line-clamp: unset; }
.msg-leave-active { transition: translate 0.35s ease, opacity 0.35s ease; }
.msg-leave-to { translate: -80px 0; opacity: 0; }
.dark .msg-center-item { background: #1e1e1e; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.dark .msg-center-item:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); }
.dark .msg-center-title { color: #e5e5e5; }
.dark .msg-center-x { color: #666; }
.dark .msg-center-x:hover { color: #ddd; }
.dark .msg-center-content { color: #aaa; }
.msg-clear-link {
  cursor: pointer;
  font-size: 14px;
  color: #2563eb;
  transition: color 0.2s;
}
.msg-clear-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}
.dark .msg-clear-link { color: #60a5fa; }
.dark .msg-clear-link:hover { color: #93c5fd; }
/* 铃铛有消息时持续摇晃 */
.bell-ring {
  display: inline-block;
  animation: bell-shake 1.2s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes bell-shake {
  0%   { transform: rotate(0); }
  10%  { transform: rotate(14deg); }
  20%  { transform: rotate(-14deg); }
  30%  { transform: rotate(10deg); }
  40%  { transform: rotate(-10deg); }
  50%  { transform: rotate(6deg); }
  60%  { transform: rotate(-6deg); }
  70%  { transform: rotate(3deg); }
  80%  { transform: rotate(-3deg); }
  90%  { transform: rotate(0); }
  100% { transform: rotate(0); }
}
.user-info {
  height: 24px;
}
/* 右上角用户下拉头部：昵称（主）+ 名称（次），超长省略号截断 */
.user-drop-header-alias,
.user-drop-header-name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.3;
}
.user-drop-header-alias {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.88);
}
.user-drop-header-name {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
}
.dark .user-drop-header-alias { color: #fff; }
.dark .user-drop-header-name { color: rgba(255, 255, 255, 0.6); }

.tab-bar {
  background: #fff;
}
.menu-tabs { --n-tab-gap: 4px !important; }
.menu-tabs .n-tabs-tab {
  padding: 8px 14px 6px 14px !important;
  box-sizing: border-box;
  border-radius: 6px 6px 0 0 !important;
  font-size: 13px;
  position: relative;
  z-index: 1;
}
.menu-tabs .n-tabs-tab--active {
  color: #2563eb;
  font-weight: 500;
  z-index: 2;
}
/* 用 @property 定义可动画的颜色变量，保证 tab 背景和弧线完全同步过渡 */
@property --tab-bg-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffffff;
}
/* 所有 tab 底部都有弧线（颜色通过 CSS 变量同步，完全不闪） */
.menu-tabs .n-tabs-tab {
  position: relative;
  --tab-bg-color: #ffffff;
  background-color: var(--tab-bg-color) !important;
  transition: --tab-bg-color 0.2s ease, color 0.2s ease;
}
.menu-tabs .n-tabs-tab::before,
.menu-tabs .n-tabs-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 10px;
  background: transparent;
  pointer-events: none;
  z-index: 1;
  box-shadow: 5px 5px 0 5px var(--tab-bg-color);
}
.menu-tabs .n-tabs-tab::before {
  left: -10px;
  border-bottom-right-radius: 10px;
}
/* 菜单 tab 分隔符：用 tab 右侧背景渐变画短竖线
   右侧弧线阴影只在底部 10px 区域，中间部分无遮挡，分隔线清晰可见 */
.menu-tabs .n-tabs-tab.has-right-separator {
  background-image: linear-gradient(to bottom,
    transparent 0,
    transparent 30%,
    #c9cdd4 30%,
    #c9cdd4 70%,
    transparent 70%,
    transparent 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 1px 100% !important;
  background-position: right center !important;
}
.dark .menu-tabs .n-tabs-tab.has-right-separator {
  background-image: linear-gradient(to bottom,
    transparent 0,
    transparent 30%,
    #55555a 30%,
    #55555a 70%,
    transparent 70%,
    transparent 100%) !important;
}
.menu-tabs .n-tabs-tab::after {
  right: -10px;
  border-bottom-left-radius: 10px;
  box-shadow: -5px 5px 0 5px var(--tab-bg-color);
}
.menu-tabs .n-tabs-tab:hover {
  --tab-bg-color: #f5f7fa;
}
.menu-tabs .n-tabs-tab--active {
  --tab-bg-color: #e9effd;
}
.menu-tabs .n-tabs-tab--active:hover {
  --tab-bg-color: #dbe5fb;
}
/* 滚动容器不裁剪 tab 弧线 */
.tab-scroll-wrap { overflow-x: auto; overflow-y: visible !important; }
.tab-scroll-wrap .menu-tabs { overflow: visible !important; }
/* tab 栏底部完整分隔线（盖在弧线之上，避免被弧线遮断） */
.menu-tabs .n-tabs-nav {
  position: relative;
  overflow: visible !important;
}
/* 修复第一个/最后一个 tab 弧线被裁剪：
   .n-tabs-nav-scroll-wrapper 的 overflow:hidden 是裁剪元凶，设为 visible
   .v-x-scroll 是实际滚动容器，给内部内容加左右 padding 让弧线在滚动范围内 */
.menu-tabs .n-tabs-nav-scroll-wrapper {
  overflow: visible !important;
}
.menu-tabs .n-tabs-nav-scroll-content {
  padding: 0 12px !important;
}
.menu-tabs .n-tabs-nav::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: #eef0f3;
  z-index: 10;
  pointer-events: none;
}
.dark .menu-tabs .n-tabs-nav::after {
  background-color: #2e2e32;
}
/* 隐藏原生下划线 */
.menu-tabs .n-tabs-bar { display: none !important; }
/* 未选中 tab 的关闭按钮淡化 */
.menu-tabs .n-tabs-tab:not(.n-tabs-tab--active) .n-tabs-tab__close,
.menu-tabs .n-tabs-tab:not(.n-tabs-tab--active) .tab-close-icon,
.menu-tabs .n-tabs-tab:not(.n-tabs-tab--active) .tab-close-icon iconify-icon {
  color: #606266;
  opacity: 0.5;
  transition: opacity 0.2s, color 0.15s, background-color 0.15s;
}
.menu-tabs .n-tabs-tab:not(.n-tabs-tab--active):hover .n-tabs-tab__close,
.menu-tabs .n-tabs-tab:not(.n-tabs-tab--active):hover .tab-close-icon,
.menu-tabs .n-tabs-tab:not(.n-tabs-tab--active):hover .tab-close-icon iconify-icon {
  opacity: 0.85;
}
/* 未选中 tab 关闭按钮 hover 变深灰 */
.menu-tabs .n-tabs-tab:not(.n-tabs-tab--active) .tab-close-icon:hover,
.menu-tabs .n-tabs-tab:not(.n-tabs-tab--active) .tab-close-icon:hover iconify-icon {
  color: #303133;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.06);
}
/* 选中 tab 的关闭按钮保持灰色，不跟随主题色 */
.menu-tabs .n-tabs-tab--active .tab-close-icon,
.menu-tabs .n-tabs-tab--active .tab-close-icon iconify-icon {
  color: #606266;
}
.menu-tabs .n-tabs-tab--active .tab-close-icon:hover,
.menu-tabs .n-tabs-tab--active .tab-close-icon:hover iconify-icon {
  color: #303133;
  background-color: rgba(0, 0, 0, 0.06);
}
.menu-tabs .n-tabs-tab--active .tab-close-icon:hover iconify-icon {
  transform: scale(1.15);
}
/* 暗色模式下选中 tab 关闭按钮 */
.dark .menu-tabs .n-tabs-tab--active .tab-close-icon,
.dark .menu-tabs .n-tabs-tab--active .tab-close-icon iconify-icon {
  color: #a0a0a0;
}
.dark .menu-tabs .n-tabs-tab--active .tab-close-icon:hover,
.dark .menu-tabs .n-tabs-tab--active .tab-close-icon:hover iconify-icon {
  color: #e0e0e0;
  background-color: rgba(255, 255, 255, 0.1);
}
/* tab 关闭按钮 hover 圆形背景 */
.menu-tabs .n-tabs-tab .tab-close-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-left: 0 !important;
  transition: background-color 0.15s;
}
/* tab 锁图标（不可关闭时显示，保持宽度对称） */
.menu-tabs .n-tabs-tab .tab-lock-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0 !important;
  opacity: 0.35;
  cursor: default;
}
.menu-tabs .n-tabs-tab .tab-lock-icon iconify-icon {
  font-size: 13px !important;
}
.dark .menu-tabs .n-tabs-tab .tab-lock-icon {
  opacity: 0.4;
}
.menu-tabs .n-tabs-tab .tab-close-icon iconify-icon {
  font-size: 13px !important;
  transition: transform 0.15s;
}
.menu-tabs .n-tabs-tab .tab-close-icon:hover {
  background-color: rgba(0, 0, 0, 0.06);
}
.menu-tabs .n-tabs-tab .tab-close-icon:hover iconify-icon {
  transform: scale(1.15);
}
/* 暗色模式下关闭按钮 hover 背景 */
.dark .menu-tabs .n-tabs-tab .tab-close-icon:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
/* 暗色模式下未选中 tab 关闭按钮淡化 */
.dark .menu-tabs .n-tabs-tab:not(.n-tabs-tab--active) .n-tabs-tab__close,
.dark .menu-tabs .n-tabs-tab:not(.n-tabs-tab--active) .tab-close-icon,
.dark .menu-tabs .n-tabs-tab:not(.n-tabs-tab--active) .tab-close-icon iconify-icon {
  color: #a0a0a0;
  opacity: 0.65;
}
.dark .menu-tabs .n-tabs-tab:not(.n-tabs-tab--active):hover .n-tabs-tab__close,
.dark .menu-tabs .n-tabs-tab:not(.n-tabs-tab--active):hover .tab-close-icon,
.dark .menu-tabs .n-tabs-tab:not(.n-tabs-tab--active):hover .tab-close-icon iconify-icon {
  opacity: 0.75;
}
/* 暗色模式下未选中 tab 关闭按钮 hover 变浅灰 */
.dark .menu-tabs .n-tabs-tab:not(.n-tabs-tab--active) .tab-close-icon:hover,
.dark .menu-tabs .n-tabs-tab:not(.n-tabs-tab--active) .tab-close-icon:hover iconify-icon {
  color: #e0e0e0;
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
}
.tab-bar-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* Tab 栏滚动容器 */
.tab-scroll-wrap {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  padding: 8px 16px 0;
  transition: padding .2s;
}
/* 箭头一直显示，两侧固定留出箭头位置 */
.tab-scroll-wrap {
  padding-left: 18px;
  padding-right: 18px;
}
.tab-scroll-wrap::-webkit-scrollbar { display: none; }
/* n-tabs 宽度由内容撑开，内容少时不小于容器宽度 */
.tab-scroll-wrap .menu-tabs {
  width: max-content;
  min-width: 100%;
  max-width: none !important;
}

/* 内嵌式左右箭头：嵌在 tab 栏两端，和导航栏融为一体 */
.tab-scroll-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #888;
  cursor: pointer;
  transition: color .15s, background .15s, opacity .2s;
  user-select: none;
  background: #fff;
  z-index: 10;
  opacity: 1;
  pointer-events: auto;
}
.tab-scroll-arrow.is-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.tab-scroll-arrow.left {
  left: 0;
}
.tab-scroll-arrow.right {
  right: 0;
}
.tab-scroll-arrow:hover {
  color: #2563eb;
  background: #f5f7fa;
}
.tab-scroll-arrow:active {
  color: #1d4ed8;
  background: #eef0f3;
}
.dark .tab-scroll-arrow {
  color: #888;
  background: #1f1f1f;
}
.dark .tab-scroll-arrow.left { border-right-color: #2e2e32; }
.dark .tab-scroll-arrow.right { border-left-color: #2e2e32; }
.dark .tab-scroll-arrow:hover {
  color: #3b82f6;
  background: #2a2a2e;
}
.dark .tab-scroll-arrow:active {
  color: #60a5fa;
  background: #35353b;
}


.page-content {
  background: #f5f7fa !important;
  overflow: hidden;
}

/* 双表视图：page-content 变 flex row，左主表 + 右面板并排 */
.page-content.dual-mode {
  display: flex;
}
.page-content.dual-mode > div:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.dual-right-panel {
  flex: 0 0 50%;
  width: 50%;
  overflow: hidden;
  border-left: 1px solid var(--n-border-color);
  padding: 16px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease,
              transform 0.25s ease;
  position: relative;
  box-sizing: border-box;
  animation: dualFadeIn 0.3s ease;
}
@keyframes dualFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ::before 模糊遮罩已移除（不再需要） */
.dual-right-panel.is-closing {
  opacity: 0;
  transform: translateY(12px);
  animation: none;
}
.dual-selected-row td:first-child {
  position: relative;
}
.dual-selected-row td:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #2563eb;
  animation: borderSlideIn 0.15s ease-out;
}
@keyframes borderSlideIn {
  from {
    height: 0;
    top: 50%;
    opacity: 0;
  }
  to {
    height: 100%;
    top: 0;
    opacity: 1;
  }
}
.dual-content-fade {
  animation: dualContentFadeIn 0.3s ease;
}
@keyframes dualContentFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dual-content-slideup {
  animation: dualContentSlideUp 0.35s ease-out;
}
@keyframes dualContentSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.page-card {
  background: #ffffff;
  border-radius: 6px;
  margin-bottom: 16px;
}
.table-card {
  margin-bottom: 4px;
}
.filter-card {
  margin-bottom: 12px;
}
.embedded-table {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 15px 12px 0;
  gap: 8px;
  box-sizing: border-box;
}
.embedded-table .page-card {
  margin-bottom: 0;
  border-radius: 4px;
}

.filter-card .n-card__content {
  padding: 16px 24px !important;
}
.embedded-table .filter-card .n-card__content {
  padding: 8px 12px !important;
}
.filter-wrapper {
  display: flex;
  flex-direction: column;
}
.filter-collapsible {
  max-height: 120px;
  opacity: 1;
  transition: max-height 0.25s ease, opacity 0.25s ease, margin-top 0.25s ease;
  overflow: hidden;
  margin-top: 16px;
  margin-bottom: 0;
}
.filter-collapsible.collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}
/* AI 搜索：两段式 input-group —— 外层统一框，左 label 前缀块 + 右输入区 */
.ai-search-field {
  position: relative;
  gap: 0 !important;
  border-radius: 6px !important;
  background: #FFFCF8;
  overflow: hidden;
  transition: background 0.2s ease;
}
/* 描边用覆盖层绘制：画在子元素背景之上，且不占用布局尺寸 */
.ai-search-field::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(162, 99, 26, 0.28);
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 0.2s ease;
}
.ai-search-field:focus-within {
  background: #FFF9F2;
}
.ai-search-field:focus-within::after {
  border-color: rgba(162, 99, 26, 0.55);
}
/* 左侧前缀块 */
.ai-search-field .form-label {
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  width: auto;
  flex-shrink: 0;
  padding: 0 12px;
  font-size: 13px;
  color: #B45309;
  background: rgba(162, 99, 26, 0.07);
  border-right: 1px solid rgba(162, 99, 26, 0.22);
}
/* 右侧输入区：去掉自身描边/背景，融进外框 */
.ai-search-field .ai-search-input {
  flex: 1;
  min-width: 0;
}
.ai-search-field .ai-search-input .n-input__border,
.ai-search-field .ai-search-input .n-input__state-border {
  display: none !important;
}
.ai-search-field .ai-search-input .n-input-wrapper {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding-left: 12px;
  padding-right: 12px;
  box-shadow: none !important;
}
.ai-search-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1;
  color: #B45309;
  background: rgba(162, 99, 26, 0.08);
  border: 1px solid rgba(162, 99, 26, 0.2);
  border-radius: 999px;
}
/* 表头：支持 AI 搜索的列标记 */
.ai-col-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 14px;
  padding: 0 4px;
  margin-right: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
  color: #B45309;
  background: rgba(162, 99, 26, 0.08);
  border: 1px solid rgba(162, 99, 26, 0.2);
  border-radius: 999px;
  cursor: default;
}
.dark .ai-col-badge {
  color: #E3AC72;
  background: rgba(162, 99, 26, 0.16);
  border-color: rgba(162, 99, 26, 0.3);
}
/* AI 可搜索字段清单下拉 */
.ai-fields-trigger {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.22s ease, background 0.22s ease,
    border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
/* 悬浮时掠过的高光 */
.ai-fields-trigger::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%,
    rgba(226, 160, 90, 0.5) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.45s ease;
  pointer-events: none;
}
.ai-fields-trigger:hover {
  color: #92400E;
  background: rgba(162, 99, 26, 0.2);
  border-color: rgba(162, 99, 26, 0.45);
  box-shadow: 0 1px 6px rgba(162, 99, 26, 0.28);
}
.ai-fields-trigger:hover::before {
  transform: translateX(100%);
}
.ai-fields-trigger:active {
  transform: scale(0.94);
}
.ai-fields-pop {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-fields-title {
  font-size: 12px;
  font-weight: 600;
  color: #999;
}
.ai-fields-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
}
.ai-fields-item {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  font-size: 13px;
  color: #B45309;
  background: rgba(162, 99, 26, 0.08);
  border: 1px solid rgba(162, 99, 26, 0.2);
  border-radius: 6px;
}
.ai-fields-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dark .ai-search-field {
  background: #231A12;
}
.dark .ai-search-field::after {
  border-color: rgba(162, 99, 26, 0.45);
}
.dark .ai-search-field:focus-within {
  background: #2A1F15;
}
.dark .ai-search-field:focus-within::after {
  border-color: rgba(226, 160, 90, 0.65);
}
.dark .ai-search-field .form-label {
  color: #E3AC72;
  background: rgba(162, 99, 26, 0.16);
  border-right-color: rgba(162, 99, 26, 0.32);
}
.dark .ai-search-tag {
  color: #E3AC72;
  background: rgba(162, 99, 26, 0.16);
  border-color: rgba(162, 99, 26, 0.3);
}
.dark .ai-fields-trigger {
  color: #E3AC72;
}
.dark .ai-fields-trigger:hover {
  color: #F2C08A;
  background: rgba(162, 99, 26, 0.32);
  border-color: rgba(226, 160, 90, 0.5);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.dark .ai-fields-item {
  color: #E3AC72;
  background: rgba(162, 99, 26, 0.16);
  border-color: rgba(162, 99, 26, 0.3);
}
/* AI 解析结果只读展示 */
.ai-expr-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
}
.ai-expr-prefix {
  font-size: 12px;
  color: #999;
}
.ai-expr-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  font-size: 12px;
  color: #B45309;
  background: rgba(162, 99, 26, 0.08);
  border: 1px solid rgba(162, 99, 26, 0.2);
  border-radius: 999px;
}
.dark .ai-expr-prefix {
  color: #8a8a8a;
}
.dark .ai-expr-chip {
  color: #E3AC72;
  background: rgba(162, 99, 26, 0.16);
  border-color: rgba(162, 99, 26, 0.3);
}
.filter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 24px;
}
.filter-grid.embedded {
  gap: 8px 12px;
}
.filter-grid.dual {
  grid-template-columns: repeat(2, 1fr);
}
.filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.table-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.embedded-table .table-card-header {
  margin-bottom: 12px;
}

/* ─── CHOICE tap 搜索栏 ────────────────────────────────────── */
.choice-tab-bar {
  display: flex;
  align-items: flex-end;
  gap: 0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 10px;
}
.choice-tab-item {
  padding: 6px 16px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  user-select: none;
}
.choice-tab-item:hover { color: #2563eb; }
.choice-tab-item.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 500; }

/* 暗色 */
.dark .choice-tab-bar { border-bottom-color: #2a2a2a; }
.dark .choice-tab-item { color: #999; }
.dark .choice-tab-item:hover { color: #60a5fa; }
.dark .choice-tab-item.active { color: #60a5fa; border-bottom-color: #60a5fa; }

.form-label {
  width: 56px;
  text-align: right;
  color: #333;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 全局 Naive UI 覆盖 */
.n-layout { background: #f5f7fa; }
.n-button { border-radius: 6px !important; }
.btn-circle { border-radius: 50% !important; }
.n-input  { border-radius: 6px !important; }
.n-select { border-radius: 6px !important; }
.n-data-table { border-radius: 6px !important; }
.n-data-table-td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}
/* 固定列不能裁剪，否则 Naive UI 的阴影伪元素会被 overflow:hidden 截掉 */
.n-data-table-td--fixed-left,
.n-data-table-td--fixed-right {
  overflow: visible;
}
/* 换行模式：文字溢出改为自动换行 */
body.table-wrap-cell .n-data-table-td {
  white-space: normal;
  word-break: break-all;
  text-overflow: clip;
  max-width: none;
}
.n-data-table-th { white-space: nowrap; }

/* ─── 加载动画样式（三种） ──────────────────────────────── */

.custom-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

/* 波浪条：5根竖条依次伸缩 */
.custom-loading.loading-wave .wave-bars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
}
.custom-loading.loading-wave .bar {
  display: inline-block;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: #2563eb;
  animation: waveBar 1.2s ease-in-out infinite;
}
.custom-loading.loading-wave .b1 { animation-delay: 0s; }
.custom-loading.loading-wave .b2 { animation-delay: 0.1s; }
.custom-loading.loading-wave .b3 { animation-delay: 0.2s; }
.custom-loading.loading-wave .b4 { animation-delay: 0.3s; }
.custom-loading.loading-wave .b5 { animation-delay: 0.4s; }
@keyframes waveBar {
  0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
  50%      { transform: scaleY(1.6); opacity: 1; }
}
.dark .custom-loading.loading-wave .bar {
  background: #60a5fa;
}

/* 跳点：三个圆点依次弹跳 */
.custom-loading.loading-dots .dots-wrap {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  height: 24px;
}
.custom-loading.loading-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2563eb;
  animation: dotBounce 0.9s cubic-bezier(.5,0,.5,1) infinite;
}
.custom-loading.loading-dots .d1 { animation-delay: 0s; }
.custom-loading.loading-dots .d2 { animation-delay: 0.15s; }
.custom-loading.loading-dots .d3 { animation-delay: 0.3s; }
@keyframes dotBounce {
  0%, 80%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
  40%           { transform: translateY(-14px) scale(1.15); opacity: 1; }
  60%           { transform: translateY(-6px) scale(1.05); opacity: 0.8; }
}
.dark .custom-loading.loading-dots .dot {
  background: #60a5fa;
}

/* ─── 表格嵌套字段元数据加载占位 ─────────────────────── */
@keyframes refSpin {
  to { transform: rotate(360deg); }
}

/* ─── 主表 /build 加载覆盖层 ───────────────────────────── */
.table-build-overlay {
  position: absolute;
  inset: 0;
  min-height: calc(100vh - 110px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  opacity: 1;
  /* 只淡出不淡入：buildLoading 变 true 时遮罩立即不透明盖住表格，
     避免切换钻取目标表（复用实例 buildLoading false→true）时遮罩 300ms 淡入
     期间半透明盖不住下方旧表数据，出现"表格先闪、动画才盖住" */
}
.table-build-overlay.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease-out;
}
.dark .table-build-overlay {
  background: #1f1f1f;
}

/* 内嵌表格（APPENDAGES/LINK tab）loading 居中修复：
   主表用 min-height: calc(100vh - 110px) 确保全屏高度，
   内嵌模式下容器高度有限，用 100% 让动画在容器内垂直居中，避免偏下 */
.embedded-table .table-build-overlay {
  min-height: 100%;
}

/* picker 弹窗内加载层：向外扩张覆盖四周留白 */
.ref-picker-body .table-build-overlay {
  margin: -16px;
  min-height: 100%;
}
.dark .ref-picker-body .table-build-overlay {
  background: #151515;
}

/* ─── 暗色模式 ─────────────────────────────────────────── */
.dark { background: #151515; }
body.dark { background: #151515 !important; }

.dark .logo-text { color: #e0e0e0; }
.sidebar-logo { height:28px; flex-shrink:0; transition: filter 0.3s; }
.dark .sidebar-logo { filter: brightness(0) invert(1); }

.dark .tab-bar {
  background: #1f1f1f !important;
  border-color: #333 !important;
}
/* 暗色模式 tab 背景色：灰底白字 */
.dark .menu-tabs .n-tabs-tab {
  --tab-bg-color: #1f1f1f;
  color: rgba(255, 255, 255, 0.65) !important;
}
.dark .menu-tabs .n-tabs-tab:hover {
  --tab-bg-color: #2a2a2e;
  color: rgba(255, 255, 255, 0.85) !important;
}
.dark .menu-tabs .n-tabs-tab--active {
  color: rgba(255, 255, 255, 0.92) !important;
  --tab-bg-color: #2a2a2e;
}
.dark .menu-tabs .n-tabs-tab--active:hover {
  --tab-bg-color: #333338;
  color: rgba(255, 255, 255, 0.92) !important;
}
.dark .page-content    { background: #151515 !important; }
.dark .page-card       { background: #1f1f1f !important; border-color: #333 !important; }

.dark .n-layout        { background: #151515; }
.dark .n-layout-header { background: #1f1f1f !important; border-color: #333 !important; }
.dark .n-layout-sider  { background: #1f1f1f !important; border-color: #333 !important; }
.dark .n-layout-content{ background: #151515; }

/* ─── 左侧菜单栏细滚动条（原生滚动条） ─────────────────────── */
.n-layout-sider-scroll-container,
.n-layout-sider .n-menu {
  scrollbar-width: thin;
  scrollbar-color: #c0c4cc #f5f7fa;
}
.n-layout-sider-scroll-container::-webkit-scrollbar,
.n-layout-sider .n-menu::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.n-layout-sider-scroll-container::-webkit-scrollbar-track,
.n-layout-sider .n-menu::-webkit-scrollbar-track {
  background: #f5f7fa;
}
.n-layout-sider-scroll-container::-webkit-scrollbar-thumb,
.n-layout-sider .n-menu::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}
.n-layout-sider-scroll-container::-webkit-scrollbar-thumb:hover,
.n-layout-sider .n-menu::-webkit-scrollbar-thumb:hover {
  background: #909399;
}
/* 暗色模式 */
.dark .n-layout-sider-scroll-container,
.dark .n-layout-sider .n-menu {
  scrollbar-color: #555 #1f1f1f;
}
.dark .n-layout-sider-scroll-container::-webkit-scrollbar-track,
.dark .n-layout-sider .n-menu::-webkit-scrollbar-track {
  background: #1f1f1f;
}
.dark .n-layout-sider-scroll-container::-webkit-scrollbar-thumb,
.dark .n-layout-sider .n-menu::-webkit-scrollbar-thumb {
  background: #555;
}
.dark .n-layout-sider-scroll-container::-webkit-scrollbar-thumb:hover,
.dark .n-layout-sider .n-menu::-webkit-scrollbar-thumb:hover {
  background: #777;
}

/* 暗色模式左侧菜单：灰底白字 */
.dark .n-layout-sider .n-menu {
  --n-item-text-color: rgba(255, 255, 255, 0.65) !important;
  --n-item-text-color-hover: rgba(255, 255, 255, 0.85) !important;
  --n-item-text-color-active: rgba(255, 255, 255, 0.92) !important;
  --n-item-text-color-active-hover: rgba(255, 255, 255, 0.92) !important;
  --n-item-text-color-child-active: rgba(255, 255, 255, 0.65) !important;
  --n-item-text-color-child-active-hover: rgba(255, 255, 255, 0.85) !important;
  --n-item-icon-color: rgba(255, 255, 255, 0.65) !important;
  --n-item-icon-color-hover: rgba(255, 255, 255, 0.85) !important;
  --n-item-icon-color-active: rgba(255, 255, 255, 0.92) !important;
  --n-item-icon-color-active-hover: rgba(255, 255, 255, 0.92) !important;
  --n-item-icon-color-child-active: rgba(255, 255, 255, 0.65) !important;
  --n-item-icon-color-child-active-hover: rgba(255, 255, 255, 0.85) !important;
  --n-item-color-hover: #2a2a2e !important;
  --n-item-color-active: #2a2a2e !important;
  --n-item-color-active-hover: #333338 !important;
  --n-arrow-color: rgba(255, 255, 255, 0.65) !important;
  --n-arrow-color-hover: rgba(255, 255, 255, 0.85) !important;
  --n-arrow-color-active: rgba(255, 255, 255, 0.92) !important;
  --n-arrow-color-active-hover: rgba(255, 255, 255, 0.92) !important;
  --n-arrow-color-child-active: rgba(255, 255, 255, 0.65) !important;
  --n-arrow-color-child-active-hover: rgba(255, 255, 255, 0.85) !important;
}

/* ─── 主内容区细滚动条 ─────────────────────── */
.n-layout-content,
.n-layout-content-scroll-container,
.n-layout-content > .n-scrollbar,
.n-layout-content .n-scrollbar-content-wrapper,
.page-content,
.page-content > * {
  scrollbar-width: thin;
  scrollbar-color: #c0c4cc #f5f7fa;
}
.n-layout-content::-webkit-scrollbar,
.n-layout-content-scroll-container::-webkit-scrollbar,
.n-layout-content > .n-scrollbar::-webkit-scrollbar,
.n-layout-content .n-scrollbar-content-wrapper::-webkit-scrollbar,
.page-content::-webkit-scrollbar,
.page-content > *::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
.n-layout-content::-webkit-scrollbar-track,
.n-layout-content-scroll-container::-webkit-scrollbar-track,
.n-layout-content > .n-scrollbar::-webkit-scrollbar-track,
.n-layout-content .n-scrollbar-content-wrapper::-webkit-scrollbar-track,
.page-content::-webkit-scrollbar-track,
.page-content > *::-webkit-scrollbar-track {
  background: #f5f7fa;
}
.n-layout-content::-webkit-scrollbar-thumb,
.n-layout-content-scroll-container::-webkit-scrollbar-thumb,
.n-layout-content > .n-scrollbar::-webkit-scrollbar-thumb,
.n-layout-content .n-scrollbar-content-wrapper::-webkit-scrollbar-thumb,
.page-content::-webkit-scrollbar-thumb,
.page-content > *::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}
.n-layout-content::-webkit-scrollbar-thumb:hover,
.n-layout-content-scroll-container::-webkit-scrollbar-thumb:hover,
.n-layout-content > .n-scrollbar::-webkit-scrollbar-thumb:hover,
.n-layout-content .n-scrollbar-content-wrapper::-webkit-scrollbar-thumb:hover,
.page-content::-webkit-scrollbar-thumb:hover,
.page-content > *::-webkit-scrollbar-thumb:hover {
  background: #909399;
}
/* 暗色模式 */
.dark .n-layout-content,
.dark .n-layout-content-scroll-container,
.dark .n-layout-content > .n-scrollbar,
.dark .n-layout-content .n-scrollbar-content-wrapper,
.dark .page-content,
.dark .page-content > * {
  scrollbar-color: #555 #151515;
}
.dark .n-layout-content::-webkit-scrollbar-track,
.dark .n-layout-content-scroll-container::-webkit-scrollbar-track,
.dark .n-layout-content > .n-scrollbar::-webkit-scrollbar-track,
.dark .n-layout-content .n-scrollbar-content-wrapper::-webkit-scrollbar-track,
.dark .page-content::-webkit-scrollbar-track,
.dark .page-content > *::-webkit-scrollbar-track {
  background: #151515;
}
.dark .n-layout-content::-webkit-scrollbar-thumb,
.dark .n-layout-content-scroll-container::-webkit-scrollbar-thumb,
.dark .n-layout-content > .n-scrollbar::-webkit-scrollbar-thumb,
.dark .n-layout-content .n-scrollbar-content-wrapper::-webkit-scrollbar-thumb,
.dark .page-content::-webkit-scrollbar-thumb,
.dark .page-content > *::-webkit-scrollbar-thumb {
  background: #555;
}
.dark .n-layout-content::-webkit-scrollbar-thumb:hover,
.dark .n-layout-content-scroll-container::-webkit-scrollbar-thumb:hover,
.dark .n-layout-content > .n-scrollbar::-webkit-scrollbar-thumb:hover,
.dark .n-layout-content .n-scrollbar-content-wrapper::-webkit-scrollbar-thumb:hover,
.dark .page-content::-webkit-scrollbar-thumb:hover,
.dark .page-content > *::-webkit-scrollbar-thumb:hover {
  background: #777;
}
.dark .n-card          { background: #1f1f1f !important; border-color: #333 !important; }
.dark .n-card__content { background: #1f1f1f; }

.dark .n-data-table    { background: #1f1f1f !important; }
.dark .n-data-table-tr { background: #1f1f1f; }
.dark .n-data-table-td { background: #1f1f1f; color: #e0e0e0; }
.dark .n-data-table-th { background: #252525 !important; color: #e0e0e0; }

.dark .n-input             { background: #252525 !important; }
.dark .n-input__border     { border-color: #38383d !important; }
.dark .n-input__input-el   { color: #e0e0e0; }
.dark .n-input__placeholder,
.dark ::-webkit-input-placeholder { color: #888 !important; }

.dark .n-select            { background: #252525 !important; }
.dark .n-base-selection    { background: #252525 !important; }
.dark .n-base-selection__border { border-color: #38383d !important; }
.dark .n-select__placeholder { color: #888; }

.dark .n-button            { background: #252525; color: #e0e0e0; }
.dark .n-button--primary-type { background: #2563eb !important; color: #fff !important; }
.dark .n-button--primary-type:hover { background: #3b82f6 !important; }
.dark .n-button--primary-type:active { background: #1d4ed8 !important; }

/* 暗色模式危险按钮（批量删除）：红底白字，去掉内部多余边框 */
.dark .n-button--error-type { background: #dc2626 !important; color: #fff !important; }
.dark .n-button--error-type:hover { background: #ef4444 !important; }
.dark .n-button--error-type:active { background: #b91c1c !important; }
.dark .n-button--error-type .n-button__border,
.dark .n-button--error-type .n-button__state-border { border-color: transparent !important; }
/* 表单按钮：暗色模式下提亮，让颜色在深色背景上更醒目 */
.dark .n-button.form-btn { filter: brightness(1.5) saturate(1.2); }

/* 暗色模式按钮式单选：蓝底白字 */
.dark .n-radio-button--checked { color: #fff !important; }
.dark .n-radio-button--checked .n-radio__label { color: #fff !important; }

.dark .n-modal             { background: #1f1f1f; }
.dark .n-modal-header      { color: #e0e0e0; }
.dark .n-modal-footer      { color: #e0e0e0; }

.dark .n-tag--success { background: rgba(37,99,235,0.2); color: #2563eb; }
.dark .n-tag--error   { background: rgba(208,48,80,0.2); color: #d03050; }
.dark .n-tag--default { background: #333; color: #e0e0e0; }

.dark .n-breadcrumb-item { color: #b0b0b0 !important; }
/* 面包屑分隔符：SVG 细箭头替代默认 > 字符 */
.n-breadcrumb-item__separator {
  font-size: 0 !important;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}
.n-breadcrumb-item__separator::before {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") no-repeat center / contain;
}
.dark .n-tab             { color: #b0b0b0; }
.dark .n-tab--active     { color: #2563eb !important; }
.dark .menu-tabs .n-tabs-bar { background: #2563eb !important; }
.dark .n-form-item-label { color: #e0e0e0; }
.dark .n-pagination      { color: #e0e0e0; }
.dark .n-pagination-item { background: #252525; color: #e0e0e0; }
.dark .n-pagination-item--active { background: #2563eb !important; color: #fff !important; border-color: transparent !important; }
.dark .n-pagination-item--active:hover { background: #3b82f6 !important; }
.dark .n-pagination-item--button:not(.n-pagination-item--disabled):hover { background: #333 !important; }

/* ─── 页面切换动画 ──────────────────────────────────────── */

/* 左侧菜单项 hover 时图标放大 */
.n-menu-item-content .n-icon {
  transition: transform 0.2s ease;
}
.n-menu-item-content:hover .n-icon {
  transform: scale(1.20);
}

.page-fade-enter-active {
  animation: pageFadeIn 0.22s ease;
}
.page-fade-leave-active {
  animation: pageFadeOut 0.15s ease;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pageFadeOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-16px); }
}

.dark .header-action:hover { background-color: rgba(37,99,235,0.25); }
.dark .form-label          { color: #e0e0e0; }

.tabs-nav-hidden .menu-tabs .n-tabs-nav { display: none; }
.n-modal-body-wrapper .menu-tabs .n-tabs-nav { position: sticky; top: 0; z-index: 10; background: var(--n-color); }
/* 非菜单 tab（弹窗/查询条件等原生 tab）增加点击区域，去掉多余 pad */
.n-tabs:not(.menu-tabs) .n-tabs-tab {
  padding: 6px 0 !important;
}
.n-tabs:not(.menu-tabs) .n-tabs-tab__label {
  padding: 0 16px;
}
.n-tabs:not(.menu-tabs) .n-tabs-tab-pad {
  display: none;
}
.n-modal-scroll-content { padding-bottom: 60px !important; }
.ref-picker-modal .n-modal-scroll-content { padding-bottom: 8px !important; }
.ref-picker-modal .n-modal__footer { padding-top: 8px !important; padding-bottom: 12px !important; }
.ref-picker-modal .n-card__content { padding-bottom: 8px !important; }
.ref-picker-modal .n-card { animation: picker-modal-in .45s cubic-bezier(0.22,0.61,0.36,1) both; }

/* picker 弹窗内容区底色：让搜索卡片和表格卡片凸显，和主页面风格一致 */
.ref-picker-body {
  background: #f5f7fa;
  padding: 16px 16px 0 16px;
  box-sizing: border-box;
}
.dark .ref-picker-body {
  background: #151515;
}

/* picker 弹窗内卡片左右留白（与主表一致：filter 16px 24px，table 左右 24px + 关闭滚动条预留） */
.ref-picker-body .filter-card .n-card__content {
  padding: 16px 24px !important;
  scrollbar-gutter: auto !important;
}
.ref-picker-body .filter-card .n-card-content {
  scrollbar-gutter: auto !important;
}
.ref-picker-body .table-card .n-card__content,
.ref-picker-body .page-card .n-card__content {
  padding: 24px 24px 8px 24px !important;
  scrollbar-gutter: auto !important;
}
.ref-picker-body .table-card .n-card-content,
.ref-picker-body .page-card .n-card-content {
  scrollbar-gutter: auto !important;
}
.ref-picker-body .page-card {
  margin-bottom: 12px;
}
.ref-picker-body .filter-card {
  margin-bottom: 12px;
}

/* ─── 编辑弹窗 APPENDAGES tab：浅灰底 + 卡片化搜索栏和表格 ─── */
.appendages-tab-pane,
.link-tab-pane {
  background: #f5f7fa;
}
.n-modal .n-tab-pane.appendages-tab-pane,
.n-modal .n-tab-pane.link-tab-pane {
  padding: 0 !important;
}
.dark .appendages-tab-pane,
.dark .link-tab-pane {
  background: #151515;
}
.appendages-tab-pane .embedded-table,
.link-tab-pane .embedded-table {
  padding: 12px 12px 4px 12px;
  gap: 10px;
  box-sizing: border-box;
}
.appendages-tab-pane .embedded-table .page-card,
.link-tab-pane .embedded-table .page-card {
  border-radius: 6px;
}
/* 修复 APPENDAGES / LINK 表格模式下卡片滚动条预留导致左右不对称 */
.appendages-tab-pane .embedded-table .n-card-content,
.link-tab-pane .embedded-table .n-card-content {
  scrollbar-gutter: auto !important;
}

/* ─── 编辑弹窗 LINK 树模式：左右双卡片布局 ─── */
.link-tab-pane .link-tree-pane {
  padding: 12px !important;
  box-sizing: border-box;
}
.link-tab-pane .link-tree-body {
  flex: 1;
  min-height: 0;
  gap: 10px;
}
.link-tab-pane .link-tree-left-card {
  flex-shrink: 0;
  width: 38%;
  min-width: 220px;
  margin-bottom: 0;
}
.link-tab-pane .link-tree-detail .form-panel {
  margin-bottom: 0;
}
.link-tab-pane .link-tree-detail {
  scrollbar-gutter: auto;
}
.dark .link-tab-pane .link-tree-detail > div:first-child:not(.form-panel) {
  background: #1f1f1f !important;
}

@keyframes picker-modal-in {
  from { opacity: 0; transform: scale(0.93) translateY(-14px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* picker iframe 内的卡片背景强化 */
.picker-page-wrapper { background: #f5f5f5; }
.picker-page-wrapper.dark { background: #151515; }

/* ─── 附件下拉动画 ────────────────────────────────────────── */
.dropdown-fade-enter-active { animation: dropdown-fade-in .2s ease; }
.dropdown-fade-leave-active { animation: dropdown-fade-in .15s ease reverse; }
@keyframes dropdown-fade-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tabFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes treeChildSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tree-child-new {
  animation: treeChildSlideIn .25s ease-out;
}

/* ─── 附件管理按钮/下拉列表（亮色） ─────────────────────────── */
.attachment-field                    { position: relative; height: 34px; }
.attachment-btn                      { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; box-sizing: border-box; border: 1px solid #d5dce3; border-radius: 4px; background: #fff; cursor: pointer; font-size: 12px; color: #333; transition: border-color .15s, color .15s; }
.attachment-btn:hover                { border-color: #2080f0; color: #2080f0; }
.attachment-dropdown                 { position: absolute; bottom: calc(100% - 4px); left: 0; right: 0; padding-bottom: 4px; z-index: 1000; }
.attachment-dropdown.down            { top: calc(100% - 4px); bottom: unset; padding-top: 4px; padding-bottom: 0; }
.attachment-dropdown-inner           { background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 4px; }
.attachment-dropdown-item            { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; font-size: 12px; color: #333; cursor: pointer; border-radius: 4px; transition: background .15s, color .15s; }
.attachment-dropdown-item:hover      { background: #f0f7ff; color: #2080f0; }
.attachment-disabled                 { color: #bbb; cursor: not-allowed; }
.attachment-disabled:hover           { background: transparent; color: #bbb; }

/* ─── 附件管理按钮/下拉列表（暗色） ─────────────────────────── */
.dark .attachment-btn                { background: #252525; border-color: #333; color: #e0e0e0; }
.dark .attachment-btn:hover          { border-color: #2080f0; color: #2080f0; }
.dark .attachment-dropdown-inner     { background: #1f1f1f; border-color: #333; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.dark .attachment-dropdown-item      { color: #e0e0e0; }
.dark .attachment-dropdown-item:hover{ background: rgba(37,99,235,0.2); color: #2080f0; }
.dark .attachment-disabled           { color: #888; cursor: not-allowed; }
.dark .attachment-disabled:hover     { background: transparent; color: #888; }

/* ─── NUMBER vague 自定义输入框（搜索条件区） ─────────────── */
.number-vague-field        { display: flex; align-items: center; flex: 1; height: 34px; border: 1px solid #e0e0e6; border-radius: 6px; overflow: hidden; background: #fff; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.number-vague-field:hover  { border-color: #2080f0; }
.number-vague-field:focus-within { border-color: #2080f0; box-shadow: 0 0 0 2px rgba(32,128,240,0.2); }
.number-vague-sep          { flex-shrink: 0; color: #ccc; font-size: 12px; padding: 0 4px; line-height: 1; }
/* NUMBER vague 输入框内文字居中 */
.number-vague-field .n-input-number .n-input__input-el {
  text-align: center;
}
.number-vague-field .n-input-number .n-input__placeholder {
  text-align: center;
}
/* 去掉内部 n-input-number 的选中边框（容器自己用 focus-within 控制） */
.number-vague-field .n-input-number .n-input {
  box-shadow: none !important;
  outline: none !important;
}
.number-vague-field .n-input-number .n-input--focus {
  box-shadow: none !important;
  outline: none !important;
}

/* ─── NUMBER vague 自定义输入框（暗色） ─────────────────────── */
.dark .number-vague-field        { background: #252525; border-color: #333; }
.dark .number-vague-field:hover  { border-color: #2080f0; }
.dark .number-vague-field:focus-within { border-color: #2080f0; box-shadow: 0 0 0 2px rgba(37,99,235,0.35); }
.dark .number-vague-sep          { color: #888; }

/* ─── 弹窗表单字段标签（title） ──────────────────────── */
.edit-form-label       { font-size: 13px; color: #333; display: inline-flex; align-items: center; gap: 2px; }
.edit-form-label .form-label-required { color: #d03050; margin-right: 2px; }
.edit-form-label .form-label-help     { color: #aaa; cursor: help; display: inline-flex; align-items: center; }

/* ─── 弹窗表单字段标签（title）—— 暗色 ─────────────── */
.dark .edit-form-label { color: #e0e0e0; }
.dark .edit-form-label .form-label-required { color: #f56c6c; }
.dark .edit-form-label .form-label-help { color: #888; }

/* ─── 弹窗表单错误提示 ─────────────────────────────── */
.form-error-tip          { font-size: 12px; color: #d03050; }
.dark .form-error-tip    { color: #f56c6c; }

/* ─── 表单分组面板（thisForm 按 group 收纳，基于 n-card） ─── */
.form-panel              { margin-bottom: 12px; }
.form-panel:last-child   { margin-bottom: 0; }
.dark .form-panel        { }

/* 弹窗表单标签页底色：仅对含分组卡片的标签页生效，让卡片凸显（不影响 APPENDAGE 表格等无卡片 tab） */
.n-modal .n-tab-pane:has(.form-panel):not(.appendages-tab-pane):not(.link-tab-pane)   { padding: 8px 8px 8px 8px !important; box-sizing: border-box; }
.dark .n-modal .n-tab-pane:has(.form-panel):not(.appendages-tab-pane):not(.link-tab-pane) { padding: 8px 8px 8px 8px !important; box-sizing: border-box; }

/* ─── 弹窗卡片内容滚动条（跟随主题） ─────────────────────── */
.n-modal .n-card-content    { scrollbar-width: thin; scrollbar-color: #bbb #fafafa; scrollbar-gutter: stable; }
.n-modal .n-card-content::-webkit-scrollbar        { width: 6px; }
.n-modal .n-card-content::-webkit-scrollbar-track  { background: #fafafa; border-radius: 3px; }
.n-modal .n-card-content::-webkit-scrollbar-thumb  { background: #bbb; border-radius: 3px; }
.n-modal .n-card-content::-webkit-scrollbar-thumb:hover { background: #999; }
.dark .n-modal .n-card-content    { scrollbar-color: #555 #1a1a1a; }
.dark .n-modal .n-card-content::-webkit-scrollbar-track { background: #1a1a1a; }
.dark .n-modal .n-card-content::-webkit-scrollbar-thumb { background: #555; }
.dark .n-modal .n-card-content::-webkit-scrollbar-thumb:hover { background: #777; }

/* 新增/编辑弹窗：取消滚动条预留，让左右留白对称 */
.form-edit-modal .n-card-content {
  scrollbar-gutter: auto !important;
}

/* ─── 附件预览弹窗通用样式 ────────────────────────────── */
.preview-pager           { text-align: center; font-size: 12px; color: #888; }
.dark .preview-pager     { color: #b0b0b0; }

.preview-file-list       { display: flex; flex-direction: column; gap: 0; height: 440px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #bbb #fafafa; }
.preview-file-list::-webkit-scrollbar       { width: 6px; }
.preview-file-list::-webkit-scrollbar-track { background: #fafafa; border-radius: 3px; }
.preview-file-list::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; }
.preview-file-list::-webkit-scrollbar-thumb:hover { background: #999; }
.dark .preview-file-list { scrollbar-color: #555 #1a1a1a; }
.dark .preview-file-list::-webkit-scrollbar-track { background: #1a1a1a; }
.dark .preview-file-list::-webkit-scrollbar-thumb { background: #555; }
.dark .preview-file-list::-webkit-scrollbar-thumb:hover { background: #777; }
.link-tree-scroll        { scrollbar-width: thin; scrollbar-color: #bbb #fafafa; overflow-y: overlay; padding-right: 8px; box-sizing: border-box; }
.link-tree-scroll::-webkit-scrollbar        { width: 6px; }
.link-tree-scroll::-webkit-scrollbar-track  { background: #fafafa; border-radius: 3px; }
.link-tree-scroll::-webkit-scrollbar-thumb  { background: #bbb; border-radius: 3px; }
.link-tree-scroll::-webkit-scrollbar-thumb:hover { background: #999; }
.dark .link-tree-scroll  { scrollbar-color: #555 #1a1a1a; }
.dark .link-tree-scroll::-webkit-scrollbar-track { background: #1a1a1a; }
.dark .link-tree-scroll::-webkit-scrollbar-thumb { background: #555; }
.dark .link-tree-scroll::-webkit-scrollbar-thumb:hover { background: #777; }
.dark .link-tree-divider { background: #3a3a3d !important; }
.dark .link-tree-bottom-bar { border-top-color: #3a3a3d !important; }
.preview-file-row        { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 1px solid #eee; border-radius: 0; }
.preview-file-row:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.preview-file-row:last-child  { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.preview-file-row + .preview-file-row { margin-top: -1px; }
.dark .preview-file-row  { border-color: #333; }

.preview-file-url       { font-size: 13px; color: #333; word-break: break-all; flex: 1; line-height: 1.5; }
.dark .preview-file-url { color: #e0e0e0; }

.preview-empty           { text-align: center; color: #888; padding: 40px 0; font-size: 13px; }
.dark .preview-empty     { color: #888; }

/* ─── 图片左右滑动动画（通用） ─────────────────────── */
.slide-right-enter-active { animation: slide-from-right .28s ease; }
.slide-right-leave-active { animation: slide-to-left .25s ease; position: absolute; }
.slide-left-enter-active  { animation: slide-from-left .28s ease; }
.slide-left-leave-active  { animation: slide-to-right .25s ease; position: absolute; }
@keyframes slide-from-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slide-to-left   { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-40px); } }
@keyframes slide-from-left  { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slide-to-right   { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } }

/* ─── 面包屑层级动画：同级目录复用不动画，变化的层级从右滑入 ───────────
   --i 为层级序号：新建项按层级依次延迟进入；被 Vue 复用的项不重放动画 */
.breadcrumb-slide-in {
  animation: breadcrumb-slide-in .35s ease backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes breadcrumb-slide-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── 相册标题栏 ───────────────────────────────────── */
.gallery-header            { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.gallery-title             { font-size: 15px; font-weight: 600; color: #333; }
.dark .gallery-title       { color: #e0e0e0; }
.gallery-count             { font-size: 12px; color: #888; padding: 2px 10px; background: #f0f0f0; border-radius: 12px; }
.dark .gallery-count       { color: #b0b0b0; background: #2a2a2a; }

/* ─── 相册整体容器 ─────────────────────────────────── */
.gallery-wrap              { display: flex; flex-direction: column; gap: 12px; }

/* ─── 相册主体（主图+侧边缩略图） ─────────────────── */
.gallery-body             { position: relative; height: 440px; border-radius: 8px; overflow: hidden; }

/* ─── 相册主图展示区 ─────────────────────────────── */
.gallery-stage             { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #f5f5f5; padding: 24px; box-sizing: border-box; }
.dark .gallery-stage       { background: #0d0d0d; }

/* ─── 相册侧边缩略图（悬浮左侧） ──────────────────── */
.gallery-sider             { position: absolute; right: 0; top: 0; height: 100%; width: 80px; background: rgba(245,245,245,0.85); padding: 24px 8px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #999 transparent; box-sizing: border-box; }
.gallery-sider::-webkit-scrollbar        { width: 4px; }
.gallery-sider::-webkit-scrollbar-track  { background: transparent; }
.gallery-sider::-webkit-scrollbar-thumb  { background: #999; border-radius: 3px; }
.gallery-sider::-webkit-scrollbar-thumb:hover { background: #777; }
.dark .gallery-sider       { background: rgba(13,13,13,0.85); scrollbar-color: #555 transparent; }
.dark .gallery-sider::-webkit-scrollbar-track { background: transparent; }
.dark .gallery-sider::-webkit-scrollbar-thumb { background: #555; }
.dark .gallery-sider::-webkit-scrollbar-thumb:hover { background: #777; }
.gallery-main-img          { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 4px 24px rgba(0,0,0,0.3); }


/* ─── 图片URL展示区 ─────────────────────────────────── */
.gallery-url-wrap          { padding: 8px 12px; background: transparent; border: none; border-radius: 0; }
.dark .gallery-url-wrap    { background: transparent; border: none; }
.gallery-url-label         { font-size: 11px; color: #888; margin-bottom: 4px; }
.dark .gallery-url-label   { color: #888; }
.gallery-url-text          { font-size: 12px; color: #333; word-break: break-all; line-height: 1.4; cursor: pointer; transition: color .15s; }
.gallery-url-text:hover    { color: #2080f0; }
.dark .gallery-url-text    { color: #e0e0e0; }
.dark .gallery-url-text:hover { color: #2563eb; }

/* ─── 缩略图列表（侧边栏垂直排列） ────────────────── */
.gallery-thumb-list        { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.gallery-thumb-item        { position: relative; flex-shrink: 0; width: 60px; height: 60px; }
.gallery-thumb-img         { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 1px dashed #bbb; transition: opacity .15s, transform .15s, border-color .15s, box-shadow .15s; display: block; box-sizing: border-box; }
.gallery-thumb-img:hover   { opacity: 0.85; transform: scale(1.05); border-color: #888; }
.gallery-thumb-img.active  { border: 1px solid #2080f0; box-shadow: 0 0 0 2px rgba(32,128,240,0.15); }
.dark .gallery-thumb-img   { border-color: #555; }
.dark .gallery-thumb-img:hover { border-color: #888; }
.dark .gallery-thumb-img.active  { border: 1px solid #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.25); }
.gallery-thumb-del         { position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; background: #d03050; color: #fff; border-radius: 50%; font-size: 11px; line-height: 14px; text-align: center; cursor: pointer; opacity: 0; transform: scale(0.7); transition: opacity .15s, transform .15s; z-index: 10; }
.gallery-thumb-item:hover .gallery-thumb-del { opacity: 1; transform: scale(1); }
.dark .gallery-thumb-del   { background: #c0392b; }

/* ─── 空状态 ───────────────────────────────────────── */
.gallery-empty             { text-align: center; color: #888; padding: 60px 0; font-size: 13px; background: #f5f5f5; border-radius: 6px; }
.dark .gallery-empty       { color: #888; background: #1a1a1a; }

/* ─── 操作列不换行 ──────────────────────────────── */
.n-data-table .col-actions { white-space: nowrap !important; }

/* ─── 下拉菜单分组样式 ───────────────────────────── */

/* ─── 树形表格样式 ───────────────────────────────── */
.n-data-table .n-data-table-tree-row-wrapper {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding-left: 0 !important;
}
.n-data-table .n-data-table-tree-indent {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: auto !important;
}
.n-data-table .n-data-table-tree-row-expand-icon {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  margin-right: 4px !important;
  width: 16px !important;
}
.n-data-table .n-data-table-tree-row-wrapper > div:last-child {
  flex: 1 !important;
  min-width: 0 !important;
  width: auto !important;
}
.n-data-table.tree-cell-overflow-ellipsis .n-data-table-tree-row-wrapper > div:last-child {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.n-data-table .n-data-table-tree-row {
  width: 100% !important;
}
.n-data-table .n-data-table-tree-row > td:first-child {
  width: auto !important;
  min-width: 0 !important;
}

/* 无子节点的树行：展开图标位置显示灰色横线 */
.n-data-table .n-data-table-tree-row-expand-icon:empty,
.n-data-table .n-data-table-tree-row-expand-icon .n-data-table-expand-icon--no-children {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
}
.n-data-table .n-data-table-tree-row-expand-icon .n-data-table-expand-icon--no-children::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 2px;
  background: #ccc;
  border-radius: 1px;
}

.ref-descriptions-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ececec;
  border-radius: 6px;
  overflow: hidden;
}
.ref-descriptions-table tr th,
.ref-descriptions-table tr td {
  padding: 8px 12px;
  border-bottom: 1px solid #ececec;
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
}
.ref-descriptions-table tr:last-child th,
.ref-descriptions-table tr:last-child td {
  border-bottom: none;
}
.ref-descriptions-table tr th {
  width: 15%;
  background: #fafafa;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid #ececec;
}
.ref-descriptions-table tr td {
  width: 85%;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ref-descriptions-table tr td .ref-attach-wrap {
  white-space: normal;
}
.dark .ref-descriptions-table {
  border-color: #333;
}
.dark .ref-descriptions-table tr th,
.dark .ref-descriptions-table tr td {
  border-bottom-color: #333;
  color: #e0e0e0;
}
.dark .ref-descriptions-table tr th {
  background: #1a1a1a;
  border-right-color: #333;
}

/* ─── REFERENCE 只读反显（descriptions 式：label 左 / 值右） ─── */
/* 细滚动条（thin 6px），与 .msg-drawer / .n-modal 保持统一风格 */
.ref-detail,
.link-tree-detail { scrollbar-width: thin; scrollbar-color: #bbb #fafafa; scrollbar-gutter: stable; }
.ref-detail::-webkit-scrollbar,
.link-tree-detail::-webkit-scrollbar { width: 6px; }
.ref-detail::-webkit-scrollbar-track,
.link-tree-detail::-webkit-scrollbar-track { background: #fafafa; border-radius: 3px; }
.ref-detail::-webkit-scrollbar-thumb,
.link-tree-detail::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; }
.ref-detail::-webkit-scrollbar-thumb:hover,
.link-tree-detail::-webkit-scrollbar-thumb:hover { background: #999; }
.dark .ref-detail,
.dark .link-tree-detail { scrollbar-color: #555 #1a1a1a; }
.dark .ref-detail::-webkit-scrollbar-track,
.dark .link-tree-detail::-webkit-scrollbar-track { background: #1a1a1a; }
.dark .ref-detail::-webkit-scrollbar-thumb,
.dark .link-tree-detail::-webkit-scrollbar-thumb { background: #555; }
.dark .ref-detail::-webkit-scrollbar-thumb:hover,
.dark .link-tree-detail::-webkit-scrollbar-thumb:hover { background: #777; }

/* 卡片内边距与网格间距统一为 20/24，避免内容贴边 */
.ref-detail .n-card {
  --n-padding-top: 20px !important;
  --n-padding-right: 24px !important;
  --n-padding-bottom: 20px !important;
  --n-padding-left: 24px !important;
}
.ref-desc-label {
  flex: 0 0 80px;
  min-width: 0;
  font-size: 13px;
  color: #8a8a8a;
  font-weight: 600;
  line-height: 1.6;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dark .ref-desc-label { color: #999; }

.ref-form-value {
  font-size: 15px;
  color: #1f1f1f;
  font-weight: 400;
  line-height: 1.6;
}
.dark .ref-form-value { color: #e0e0e0; }

/* 值容器：占满 label 右侧剩余宽度，让 n-ellipsis 截断生效 */
.ref-desc-value {
  flex: 1 1 auto;
  min-width: 0;
}

.ref-form-html {
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ─── ATTACHMENT 缩略图 ───────────────────────── */
.ref-attach-wrap {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ref-attach-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  transition: opacity .15s;
}
.ref-attach-thumb:hover { opacity: .8; }
.dark .ref-attach-thumb { border-color: #333; }

/* TEXTAREA scrollbar 美化 */
.ref-textarea-box {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.ref-textarea-box::-webkit-scrollbar {
  width: 6px;
}
.ref-textarea-box::-webkit-scrollbar-track {
  background: transparent;
}
.ref-textarea-box::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
.ref-textarea-box::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* 表格富文本列预览图标 */
.cell-editor-preview { transition: color 0.15s; }
.cell-editor-preview:hover { color: #36ad6a !important; }

/* 操作表单 EDITOR (WangEditor) 容器 */
.form-field-editor {
  width: 100%;
  border: 1px solid #e0e0e6;
  border-radius: 6px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  overflow: hidden;
}
body.dark .form-field-editor { border-color: #2a2a2e; background: #1f1f23; }
.form-field-editor:focus-within,
.form-field-editor:hover { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.10); }
body.dark .form-field-editor:focus-within,
body.dark .form-field-editor:hover { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.16); }
.form-field-editor.has-error { border-color: #d03050; box-shadow: 0 0 0 3px rgba(208,48,80,0.10); }
.nova-aieditor-host { height: 300px; }
.nova-aieditor-host .aie-container { border: none; }
.nova-aieditor-host .aie-content { flex: 1; min-height: 0; }

.nova-tiptap-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  padding: 4px 6px;
  border-bottom: 1px solid #e0e0e6;
  background: #fafafa;
}
body.dark .nova-tiptap-toolbar { border-bottom-color: #2a2a2e; background: #232328; }

.nova-tiptap-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #333;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.nova-tiptap-toolbar-btn:hover { background: rgba(24,160,88,0.08); border-color: rgba(24,160,88,0.2); }
.nova-tiptap-toolbar-btn.is-active { background: rgba(24,160,88,0.14); color: #18a058; }
body.dark .nova-tiptap-toolbar-btn { color: #d0d0d6; }
body.dark .nova-tiptap-toolbar-btn:hover { background: rgba(54,173,106,0.16); border-color: rgba(54,173,106,0.3); }
body.dark .nova-tiptap-toolbar-btn.is-active { background: rgba(54,173,106,0.22); color: #36ad6a; }

.nova-tiptap-toolbar-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: #e0e0e6;
}
body.dark .nova-tiptap-toolbar-sep { background: #2a2a2e; }

.nova-tiptap-toolbar-dropdown {
  position: relative;
  display: inline-flex;
}
.nova-tiptap-toolbar-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  flex-direction: column;
  padding: 2px;
  min-width: 110px;
  background: #ffffff;
  border: 1px solid #e0e0e6;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 10;
}
.nova-tiptap-toolbar-dropdown:hover .nova-tiptap-toolbar-dropdown-menu,
.nova-tiptap-toolbar-dropdown.open .nova-tiptap-toolbar-dropdown-menu { display: flex; }
.nova-tiptap-toolbar-menu-item {
  width: auto !important;
  height: 28px !important;
  padding: 0 8px !important;
  gap: 6px;
  justify-content: flex-start !important;
  font-size: 12px;
  white-space: nowrap;
}
.nova-tiptap-toolbar-menu-item span { line-height: 1; }
body.dark .nova-tiptap-toolbar-dropdown-menu { background: #2a2a2e; border-color: #3a3a3e; }

.nova-tiptap-tooltip {
  position: absolute;
  z-index: 9999;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.nova-tiptap-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}

.nova-tiptap-toolbar-dropdown-trigger .trigger-label {
  display: inline-block;
  margin-left: 4px;
  max-width: 70px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.nova-tiptap-toolbar-dropdown-trigger {
  width: auto !important;
  padding: 0 8px !important;
  gap: 2px;
}

.nova-tiptap-content {
  padding: 8px 12px;
  min-height: 240px;
  background: transparent;
}
.nova-tiptap-content .ProseMirror {
  outline: none;
  min-height: 220px;
  line-height: 1.6;
  word-break: break-word;
}
.nova-tiptap-content .ProseMirror > * + * { margin-top: 0.75em; }
.nova-tiptap-content .ProseMirror h1 { font-size: 1.8em; font-weight: 600; }
.nova-tiptap-content .ProseMirror h2 { font-size: 1.5em; font-weight: 600; }
.nova-tiptap-content .ProseMirror h3 { font-size: 1.25em; font-weight: 600; }
.nova-tiptap-content .ProseMirror p { margin: 0; }
.nova-tiptap-content .ProseMirror ul,
.nova-tiptap-content .ProseMirror ol { padding-left: 1.5em; }
.nova-tiptap-content .ProseMirror blockquote {
  border-left: 3px solid #d0d0d6;
  padding-left: 0.9em;
  color: #666;
  margin: 0;
}
body.dark .nova-tiptap-content .ProseMirror blockquote { border-left-color: #3a3a3e; color: #aaa; }
.nova-tiptap-content .ProseMirror code {
  background: rgba(135,131,120,0.15);
  border-radius: 3px;
  padding: 0.1em 0.3em;
  font-size: 0.9em;
}
.nova-tiptap-content .ProseMirror pre {
  background: #1f1f23;
  color: #f0f0f0;
  padding: 10px 12px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.9em;
}
.nova-tiptap-content .ProseMirror pre code { background: transparent; padding: 0; }
.nova-tiptap-content .ProseMirror a {
  color: #18a058;
  text-decoration: underline;
  cursor: pointer;
}
body.dark .nova-tiptap-content .ProseMirror a { color: #36ad6a; }
.nova-tiptap-content .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #999;
  pointer-events: none;
  height: 0;
}
body.dark .nova-tiptap-content .ProseMirror p.is-editor-empty:first-child::before { color: #666; }

/* ─── LINK 树模式：右侧详情面板 ─── */
/* 只读字段框：模拟 n-input readonly 视觉，与 REFERENCE 表单一致 */
.nova-readonly-field {
  min-height: 34px;
  padding: 4px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 3px;
  background: #fafbfc;
  line-height: 24px;
  color: #333;
  word-break: break-word;
  font-size: 13px;
}
.nova-readonly-field.is-empty { color: #bbb; }
.nova-readonly-field.is-editor { padding: 8px 12px; }
.dark .nova-readonly-field { background: #1f1f23; border-color: #3a3a3a; color: #e0e0e0; }
.dark .nova-readonly-field.is-empty { color: #555; }

/* 富文本样式 */
.link-tree-detail-editor { word-break:break-word; line-height:1.6; color:#333 }
.link-tree-detail-editor p { margin:0 0 8px 0 }
.link-tree-detail-editor h1,
.link-tree-detail-editor h2,
.link-tree-detail-editor h3,
.link-tree-detail-editor h4,
.link-tree-detail-editor h5,
.link-tree-detail-editor h6 { margin:12px 0 8px 0; font-weight:600 }
.link-tree-detail-editor h1 { font-size:20px }
.link-tree-detail-editor h2 { font-size:18px }
.link-tree-detail-editor h3 { font-size:16px }
.link-tree-detail-editor blockquote { border-left:3px solid #ccc; padding-left:12px; color:#666; margin:8px 0 }
.link-tree-detail-editor pre,
.link-tree-detail-editor code { background:#f5f5f5; border-radius:3px; padding:2px 6px; font-family:Consolas,Monaco,monospace; font-size:13px }
.link-tree-detail-editor pre { padding:8px 12px; overflow:auto }
.link-tree-detail-editor ul,
.link-tree-detail-editor ol { padding-left:24px; margin:8px 0 }
.link-tree-detail-editor a { color:#2563eb; text-decoration:underline }
.dark .link-tree-detail-editor { color:#d0d0d0 }
.dark .link-tree-detail-editor blockquote { border-left-color:#555; color:#aaa }
.dark .link-tree-detail-editor pre,
.dark .link-tree-detail-editor code { background:#2a2a2a; color:#e0e0e0 }

/* ─── 表格布尔值标签（是/否） ────────────────────────────────
   "是"用蓝色（激活/启用），"否"用灰色（未启用/中性），亮暗色自动切换 */
.bool-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  border: 1px solid transparent;
  line-height: 1.5;
}
.bool-tag--true {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.2);
}
.bool-tag--false {
  background: rgba(128, 128, 128, 0.1);
  color: #666;
  border-color: rgba(128, 128, 128, 0.15);
}
.dark .bool-tag--true {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.3);
}
.dark .bool-tag--false {
  background: rgba(255, 255, 255, 0.06);
  color: #9ca3af;
  border-color: rgba(255, 255, 255, 0.1);
}

/* ─── 表格 TAG 标签 ──────────────────────────────────── */
.table-tag {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.2);
}
.dark .table-tag {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.3);
}

/* ─── 表格选择字段标签（CHOICE tag）边框 ────────────────────────
   有颜色的标签：边框由 JS 内联设置（同色系）
   灰色兜底的标签：边框由 CSS 控制，主题切换自动生效 */
.dark .choice-tag-colored {
  filter: brightness(1.25) saturate(1.1);
}
.choice-tag-gray {
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.dark .choice-tag-gray {
  border: 1px solid rgba(255, 255, 255, 0.08);
}