.no-results-placeholder[data-v-f45f4900] .p-card {
  background-color: var(--surface-ground);
  text-align: center;
  box-shadow: unset;
}
.no-results-placeholder h3[data-v-f45f4900] {
  color: var(--text-color);
  margin-bottom: 0.5rem;
}
.no-results-placeholder p[data-v-f45f4900] {
  color: var(--text-color-secondary);
  margin-bottom: 1rem;
}
/*! tailwindcss v4.2.0 | MIT License | https://tailwindcss.com */
[data-v-1adce2e7] .i-badge {
  background-color: var(--color-green-500, oklch(72.3% .219 149.579));
  color: var(--color-white, #fff);
}
[data-v-1adce2e7] .o-badge {
  background-color: var(--color-red-500, oklch(63.7% .237 25.331));
  color: var(--color-white, #fff);
}
[data-v-1adce2e7] .c-badge {
  background-color: var(--color-blue-500, oklch(62.3% .214 259.815));
  color: var(--color-white, #fff);
}
[data-v-1adce2e7] .s-badge {
  background-color: var(--color-yellow-500, oklch(79.5% .184 86.047));
}
/*! tailwindcss v4.2.0 | MIT License | https://tailwindcss.com */
[data-v-b71f60f2] .p-inputtext {
  --p-form-field-padding-x: .625rem;
}

.dot-animation[data-v-ec0691c8] {
  animation: dot-pulse-ec0691c8 1s ease-in-out infinite;
}
@keyframes dot-pulse-ec0691c8 {
0%,
  80%,
  100% {
    opacity: 0.3;
}
40% {
    opacity: 1;
}
}

.content-divider[data-v-1d39213b] {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: none;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.content-divider--horizontal[data-v-1d39213b] {
  width: 100%;
  height: var(--v4bb7c524);
}
.content-divider--vertical[data-v-1d39213b] {
  height: 100%;
  width: var(--v4bb7c524);
}

.editable-text[data-v-3a1e2bf2] {
  display: inline;
}
.editable-text input[data-v-3a1e2bf2] {
  width: 100%;
  box-sizing: border-box;
}

.qimen-icon-button[data-v-a9e2d590] i {
  font-size: var(--qimen-icon-button-icon-size);
}

/**
 * ⚠️ 踩过的坑：**PrimeVue 的 `separator: true` 条目走的是独立分支，不会进 `#item` 插槽。**
 *
 * 读 `primevue/contextmenu/index.mjs` 可见：分隔线是 `isItemVisible && getItemProp(item,'separator')`
 * 单独 `createElementBlock('li', ...)`，只吃 `cis('separator')` 与 `item.class`。
 * 所以此前四处调用点（含基准 `/project`）在 `#item` 里写的
 * `<div v-if="item.separator" class="my-1.5 border-t border-white/[0.08]">` **一行都没渲染过**，
 * 分隔线一直吃 Aura 默认的 `1px solid rgb(63,63,70)` + `margin: 0` ——
 * 那是**浅色主题的灰压在我们的暖黑面板上**，属"未迁移"，且四处一致地错。
 * 那些死分支已随本轮一并删除；外观改由下面这条**确实生效**的规则负责。
 *
 * 值取原型语言：分隔线 `white/8`（`rgba(255,255,255,0.08)`）、上下间距 6px
 * （= 基准款注释里的 `my-1.5`：`0.375rem × 16 = 6px`，已确认）。
 */
.p-contextmenu-separator {
  /* 可被调用点覆盖的调节口（例如某个菜单要更淡的线） */
  --qimen-menu-separator-color: rgba(255, 255, 255, 0.08);
  height: 0;
  margin: 6px 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--qimen-menu-separator-color);
  background: transparent;
}

/**
 * 级联子菜单面板（如审阅素材行的「设置审阅状态」）。
 *
 * 子菜单的**条目**与主菜单同源（PrimeVue 复用同一个 `#item` 插槽，实测条目已是
 * `8px 12px / r8 / 13px/19.5px / gap 12px`），但**面板**此前是 Aura 默认：
 * `rgb(24,24,27)` 底 + `rgb(63,63,70)` 边框 + `0 4px 6px` 阴影 + `r6` ——
 * 等于在暖黑面板里嵌了一块冷灰块（矩阵 §6.13 第 13 项「同一控件内部不得分块异色」）。
 * 这里把面板对齐主菜单：同一暖黑面 / 同一 `white/10` 边框 / 同一 `0 28px 70px -24px` 阴影 /
 * 同一圆角与内边距。
 */
.p-contextmenu-submenu {
  border-radius: 12px;
  /* 与主菜单、与模板 `.sel__menu`（.tmp/b3/tpl-css/app.css:457-473）逐值同源：
     bg rgb(24 17 15 / .97) · 描边 --line-strong(白 .20) · blur 20px · 0 28px 70px -24px。
     ⚠️ 旧值 `rgba(27,23,25,.97)` + 白 .10 + blur24 是本仓自造的第二套暖黑面，
     与下拉/右键菜单不在同一档上（用户 2026-09-21 指出「弹窗背景没按质检要求实现」）。 */
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(24, 17, 15, 0.97);
  box-shadow: 0 28px 70px -24px rgba(0, 0, 0, 0.9);
  padding: 6px;
  backdrop-filter: blur(20px);
}

/**
 * 子菜单条目的 hover **不需要**在这里补：PrimeVue 的子菜单条目复用同一个 `#item` 插槽
 * （实测条目已是 `8px 12px / r8 / 13px/19.5px / gap 12px`），所以插槽里的
 * `hover:bg-white/[0.08]` 对子菜单条目同样生效 —— 主/子菜单的 hover 由**同一个类**给出，
 * 不会漂移。这里刻意不写 hover 规则：写了就会因为（无层样式优先于 Tailwind 的 `@layer utilities`）
 * 变成"子菜单 0.08 硬编码 / 主菜单 utility"两个真源。
 */

/* Suppress PrimeVue default focus ring on wrapper */
.qimen-datepicker-wrapper[data-v-44e36490] .p-datepicker:focus-within {
  box-shadow: none !important;
  outline: none !important;
}
/* Force orange focus ring on inner input */
.qimen-datepicker-wrapper[data-v-44e36490] input:focus {
  border-color: var(--qimen-orange) !important;
  box-shadow: 0 0 0 2px rgb(from var(--qimen-orange) r g b / 20%) !important;
  outline: none !important;
}

/* ----------------------------------------------------------------------------
 * 「弹层内表单档」（`size="field"`）：把档位的 **高度 / 字号 / 圆角** 落到真正的 `<input>`。
 *
 * ⚠️ 为什么需要这一条（实测，B4-066）：
 *   `inputSizeClass` 用的是 `[&_input]:h-10` 这类**后代变体**，编译出的选择器是
 *   `.qimen-datepicker-wrapper input`（0,1,1）；而 PrimeVue Aura 对
 *   `.p-datepicker-input` / `.p-inputtext` 的**盒模型与字号**规则比它更具体/更晚注入
 *   → 实测 **md 档下 `[&_input]:h-10 [&_input]:text-sm` 根本没生效**：
 *     改前基线 h40 / 16px（模板 `.input` 是 38 / 13px），而 `[&_input]:rounded-[…]`
 *     是生效的（12 → 10 实测可见）—— 也就是说这条缺口**只影响高度与字号**。
 *   该缺口对 xs/sm/md/lg **历史上就存在**，本轮**不动它**（动了就等于改现有档的渲染结果，
 *   违反「加档不改档」）；只给 field 档补一条**真正生效**的规则。
 *   运行时实测：`.tmp/b4/field-pair-{before,after}.json` 的 `d4-create-project` 两条日期框。
 * -------------------------------------------------------------------------- */
.qimen-datepicker-wrapper.qimen-datepicker-field[data-v-44e36490] input {
  height: 38px; /* 模板 .input height（见 useQimenSize.ts 的 FIELD_HEIGHT） */
  font-size: 13px; /* 模板 .input font-size（FIELD_FONT） */
  border-radius: 10px; /* 模板 .input border-radius（FIELD_RADIUS） */
}

/* 27 个走本封装的弹窗里，有 20 个在**内部**自设了旧底色
   （bg-base-background / bg-secondary-background）。只换外壳会在这些弹窗里露出拼接缝，
   所以在这里把弹窗内的「基础面」一并收口 —— 仍然只改这一个文件。
   注意范围：只覆盖「基础面」两档；弹窗内部的其它配色（强调色、表单控件外观）
   留给批次 4b 逐个处理。 */
.qimen-dialog-root .bg-base-background {
  background: transparent;
}
.qimen-dialog-root .bg-secondary-background {
  background: rgb(255 255 255 / 0.045);
}

/* PrimeVue 主题（Aura dark）的「内容面」是**冷色** rgb(24 24 27)：弹窗里凡使用主题内容面的
   组件都会在暖色玻璃面上盖出一块更深的冷色板 —— 实测「审阅参与人与访客」弹窗的
   `.p-tabpanels` 面积是弹窗本身的 **1.3 倍**，整片内容区因此显得「非常深」
   （用户 2026-09-23：「这些页面内的弹窗的背景颜色非常深」）。
   这里把弹窗内的主题内容面统一收敛成透明，露出弹窗自身的玻璃面（#151011 + 白 10%→3.5% 渐变）；
   仍然只用 `.qimen-dialog-root` 命名空间收口，弹窗**之外**的同类组件不受影响。
   注：与上面两条同因——只换外壳会在内部露出更深的拼接面。 */
.qimen-dialog-root {
  --p-content-background: transparent;
  --p-tabs-tabpanel-background: transparent;
}
.qimen-dialog-root
  :is(
    .p-tabpanels,
    .p-tabpanel,
    .p-tabs-panel,
    .p-card,
    .p-card-body,
    .p-panel,
    .p-panel-content,
    .p-fieldset,
    .p-fieldset-content,
    .p-accordion,
    .p-accordionpanel,
    .p-accordioncontent,
    .p-stepper-panels,
    .p-toolbar,
    .p-datatable,
    .p-datatable-table,
    .p-splitter,
    .p-splitterpanel,
    .p-scrollpanel,
    .p-scrollpanel-content
  ) {
  background: transparent;
}

/* B4-066 追加 C 的结论（**未在此处落规则，勿误加**）：
   曾试过在宿主里统一页脚按钮档（模板 app.css:356 `.dlg__foot .btn`
   = h36 / r999 / 13px）：
     `.qimen-dialog-root .p-dialog-footer button { height:36px !important; … }`
   实测**行不通**，两条独立原因：
     ① **CSS 层叠层序**：Tailwind v4 的 utilities 在 `@layer utilities`，
        而「带 `!important` 的分层声明」在层叠里**优先于未分层的 `!important`**
        —— 调用点的 `h-[38px]!`（分层 important）压过了本规则（未分层 important），
        实测页脚按钮仍是 38px（`.tmp/b4/diag-append-b2.mjs`）。
     ② **很多弹窗根本没有 `.p-dialog-footer`**：`CreateCanvasDialog` 的按钮直接写在
        内容区（实测 `footerEls: []`），宿主选择器覆盖不到 → 即便 ① 成立，也会
        变成「有的弹窗 36、有的 38」的跨弹窗不一致（D31 的复发）。
   正确的收口方式（登记为待跟进，本轮未做）：把调用点那 33 处
   `h-[38px]! rounded-full! [font-size:13px]!` 里的高度改成 `h-9!`（= 模板 36），
   或在 `QimenButton` 上**加一档** `size="foot"`（h9 / rounded-full / 13px）后由调用点传。
   —— 见 `src/views/qimen/composables/useQimenSize.ts` 与本轮报告追加 C。 */

.p-inputnumber[data-v-b351ceee] input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.p-inputnumber[data-v-b351ceee] input[type='number']::-webkit-outer-spin-button,
.p-inputnumber[data-v-b351ceee] input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* QimenSelect — 表单族令牌对齐模板 `.input` / `.select`
   （.tmp/b4/tpl-css/app.css:259,388；边框/底色见
    `src/views/qimen/styles/qimenTokens.css` 的 `--qimen-field-*` 注释）。 */
.qimen-select-root.p-select {
  border-width: var(--qimen-input-stroke-width);
  border-color: var(--qimen-field-border);
  border-style: solid;
}
/* Fix: PrimeVue Select's label text color is light gray by default — force visible color */
.qimen-select-root .p-select-label {
  color: #f4f6ff !important;
}
/* 可见文本字号必须**跟随 root 的档位字号**（root 由 `qimenInputHeight(size)` 决定：
   field 档 = 13px = 模板 `.input` / `.select` / `.sel__btn` 的权威值）。
   为什么必须在这里写而不是只靠 `pt.label.class` 的 `[font-size:inherit]`：
   `mergedPt` 是**浅合并**，调用方一旦传 `pt.label`（如 `projectSortSelectPt`），
   整个 label 项被替换、`[font-size:inherit]` 一并丢失，label 就退回 PrimeVue 主题的 16px。
   批次 7 #209 跨页指纹门禁实测：`/asset` 的 select 是 16px、`/account/*` 是 13px，8 档全部不一致。
   用 `inherit`（而非写死 13px）可保住 xs/sm/md/lg 各自的档位字号不被改。 */
.qimen-select-root .p-select-label {
  font-size: inherit !important;
}
/* 模板 `.input:focus`（app.css:272）：`border-color: var(--primary-soft)` +
   `background: rgba(255,255,255,.07)`。悬停/聚焦都要能压过 PrimeVue Aura 主题。 */
.qimen-select-root.p-select:hover {
  border-color: var(--qimen-field-border);
}
.qimen-select-root.p-select:focus-within {
  border-color: var(--qimen-field-border-focus) !important;
  background-color: var(--qimen-field-bg-focus) !important;
}
.qimen-select-root.p-select.p-invalid {
  border-color: var(--destructive-background) !important;
}

.qimen-cwchip[data-v-e10935b3] {
  position: relative;
  isolation: isolate;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.045);
  font-size: 11.5px;
  color: rgba(244, 246, 255, 0.66);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 模板 .chip 原尺寸（canvas.html:83-88 的面板切换 chip 用这一档） */
.qimen-cwchip--md[data-v-e10935b3] {
  padding: 8px 16px;
  font-size: 13px;
}

/* 模板 .chip::after：选中态的橙渐变底 */
.qimen-cwchip[data-v-e10935b3]::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(120deg, #ff812d, #ffb45c);
  opacity: 0;
  transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.qimen-cwchip[data-v-e10935b3]:hover {
  color: #f4f6ff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}
.qimen-cwchip.is-active[data-v-e10935b3] {
  color: #14090a;
  background-color: transparent;
  border-color: transparent;
  box-shadow: 0 24px 70px -24px rgba(255, 129, 45, 0.62);
}
.qimen-cwchip.is-active[data-v-e10935b3]::after {
  opacity: 1;
}
.qimen-cwchip.is-active[data-v-e10935b3]:hover {
  color: #14090a;
}

.mention-editor-scroll[data-v-7eb61801]::-webkit-scrollbar {
  width: 4px;
}
.mention-editor-scroll[data-v-7eb61801]::-webkit-scrollbar-track {
  background: transparent;
}
.mention-editor-scroll[data-v-7eb61801]::-webkit-scrollbar-thumb {
  background-color: rgb(156 163 175 / 0.4);
  border-radius: 4px;
}
.mention-editor-scroll[data-v-7eb61801]::-webkit-scrollbar-thumb:hover {
  background-color: rgb(156 163 175 / 0.6);
}

.upload-model-dialog[data-v-038de8cd] {
  width: 90vw;
  max-width: 800px;
  min-height: min(400px, 80vh);
  max-height: 90vh;
}
@media (min-width: 640px) {
.upload-model-dialog[data-v-038de8cd] {
    width: auto;
    min-width: 600px;
}
}

.slot_row[data-v-90ac4a66] {
  padding: 2px;
}

/* Original N-Sidebar styles */
._sb_dot[data-v-90ac4a66] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: grey;
}
.node_header[data-v-90ac4a66] {
  line-height: 1;
  padding: 8px 13px 7px;
  margin-bottom: 5px;
  font-size: 15px;
  text-wrap: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.headdot[data-v-90ac4a66] {
  width: 10px;
  height: 10px;
  float: inline-start;
  margin-right: 8px;
}
.IMAGE[data-v-90ac4a66] {
  background-color: #64b5f6;
}
.VAE[data-v-90ac4a66] {
  background-color: #ff6e6e;
}
.LATENT[data-v-90ac4a66] {
  background-color: #ff9cf9;
}
.MASK[data-v-90ac4a66] {
  background-color: #81c784;
}
.CONDITIONING[data-v-90ac4a66] {
  background-color: #ffa931;
}
.CLIP[data-v-90ac4a66] {
  background-color: #ffd500;
}
.MODEL[data-v-90ac4a66] {
  background-color: #b39ddb;
}
.CONTROL_NET[data-v-90ac4a66] {
  background-color: #a5d6a7;
}
._sb_node_preview[data-v-90ac4a66] {
  color: var(--descrip-text);
  border: 1px solid var(--descrip-text);
  min-width: 300px;
  width: min-content;
  height: fit-content;
  z-index: 9999;
  border-radius: 12px;
  overflow: hidden;
  font-size: 12px;
  padding-bottom: 10px;
}
._sb_node_preview ._sb_description[data-v-90ac4a66] {
  margin: 10px;
  padding: 6px;
  background: var(--border-color);
  border-radius: 5px;
  font-style: italic;
  font-weight: 500;
  font-size: 0.9rem;
  word-break: break-word;
}
._sb_table[data-v-90ac4a66] {
  display: grid;

  grid-column-gap: 10px;
  /* Spazio tra le colonne */
  width: 100%;
  /* Imposta la larghezza della tabella al 100% del contenitore */
}
._sb_row[data-v-90ac4a66] {
  display: grid;
  grid-template-columns: 10px 1fr 1fr 1fr 10px;
  grid-column-gap: 10px;
  align-items: center;
  padding-left: 9px;
  padding-right: 9px;
}
._sb_row_string[data-v-90ac4a66] {
  grid-template-columns: 10px 1fr 1fr 10fr 1fr;
}
._sb_col[data-v-90ac4a66] {
  border: 0 solid #000;
  display: flex;
  align-items: flex-end;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-end;
}
._sb_inherit[data-v-90ac4a66] {
  display: inherit;
}
._long_field[data-v-90ac4a66] {
  background: var(--bg-color);
  border: 2px solid var(--border-color);
  margin: 5px 5px 0;
  border-radius: 10px;
  line-height: 1.7;
  text-wrap: nowrap;
}
._sb_arrow[data-v-90ac4a66] {
  color: var(--fg-color);
}
._sb_preview_badge[data-v-90ac4a66] {
  text-align: center;
  background: var(--secondary-background);
  font-weight: 700;
  color: var(--error-text);
}
/* Generic */
.qimenwork-button {
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  box-sizing: border-box;
  margin: 0;
  transition: box-shadow 0.1s;
}

.qimenwork-button:active {
  box-shadow: inset 1px 1px 10px rgb(0 0 0 / 0.5);
}

.qimenwork-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.primary .qimenwork-button,
.primary.qimenwork-button {
  background-color: var(--primary-bg) !important;
  color: var(--primary-fg) !important;
}

.primary .qimenwork-button:not(:disabled):hover,
.primary.qimenwork-button:not(:disabled):hover {
  background-color: var(--primary-hover-bg) !important;
  color: var(--primary-hover-fg) !important;
}

/* Popup */
.qimenwork-popup {
  position: absolute;
  top: var(--top);
  right: var(--right);
  bottom: var(--bottom);
  left: var(--left);
  z-index: 2000;
  max-height: calc(100vh - var(--limit) - 10px);
  box-shadow: 3px 3px 5px 0 rgb(0 0 0 / 0.3);
}

.qimenwork-popup:not(.open) {
  display: none;
}

.qimenwork-popup.right.open {
  border-top-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  overflow: hidden;
}
/* Split button */
.qimenwork-split-button {
  position: relative;
  display: flex;
}

.qimenwork-split-primary {
  flex: auto;
}

.qimenwork-split-primary .qimenwork-button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 1px solid var(--qimen-menu-bg);
  width: 100%;
}

.qimenwork-split-arrow .qimenwork-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 2px;
  padding-right: 2px;
}

.qimenwork-split-button-popup {
  white-space: nowrap;
  background-color: var(--content-bg);
  color: var(--content-fg);
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.qimenwork-split-button-popup.hover {
  z-index: 2001;
}
.qimenwork-split-button-popup > .qimenwork-button {
  border: none;
  background-color: transparent;
  color: var(--fg-color);
  padding: 8px 12px 8px 8px;
}

.qimenwork-split-button-popup > .qimenwork-button:not(:disabled):hover {
  background-color: var(--qimen-input-bg);
}

/* Button group */
.qimenwork-button-group {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
}

.qimenwork-button-group:empty {
  display: none;
}
.qimenwork-button-group > .qimenwork-button,
.qimenwork-button-group > .qimenwork-button-wrapper > .qimenwork-button {
  padding: 4px 10px;
  border-radius: 0;
}
/*! tailwindcss v4.2.0 | MIT License | https://tailwindcss.com */
.form-input[data-v-85c28908] .input-slider .p-inputnumber input {
  width: calc(var(--spacing, .25rem) * 20);
}
.form-input[data-v-85c28908] .input-slider .slider-part {
  width: calc(var(--spacing, .25rem) * 20);
}
.form-input[data-v-85c28908] .input-knob .p-inputnumber input {
  width: calc(var(--spacing, .25rem) * 32);
}
.form-input[data-v-85c28908] .input-knob .knob-part {
  width: calc(var(--spacing, .25rem) * 32);
}
:is(.form-input[data-v-85c28908] .p-inputtext, .form-input[data-v-85c28908] .p-select) {
  width: calc(var(--spacing, .25rem) * 44);
}

@media (prefers-reduced-motion: no-preference) {
.setting-highlight {
    animation: setting-highlight-pulse 1.5s ease-in-out;
}
}
@keyframes setting-highlight-pulse {
0%,
  100% {
    background-color: transparent;
}
30% {
    background-color: color-mix(
      in srgb,
      var(--p-primary-color) 15%,
      transparent
    );
}
}

.pi-cog[data-v-dcb7c822] {
  font-size: 1.25rem;
  margin-right: 0.5rem;
}
.version-tag[data-v-dcb7c822] {
  margin-left: 0.5rem;
}

.settings-tab-panels {
  padding-top: 0 !important;
}

.settings-container[data-v-54ba910a] {
  display: flex;
  height: 70vh;
  width: 60vw;
  max-width: 64rem;
  overflow: hidden;
}
.settings-content[data-v-54ba910a] {
  overflow-x: auto;
}
@media (max-width: 768px) {
.settings-container[data-v-54ba910a] {
    flex-direction: column;
    height: auto;
    width: 80vw;
}
.settings-sidebar[data-v-54ba910a] {
    width: 100%;
}
.settings-content[data-v-54ba910a] {
    height: 350px;
}
}

/* Hide the first group separator */
.settings-sidebar[data-v-54ba910a] .p-listbox-option-group:nth-child(1) {
  display: none;
}
/*! tailwindcss v4.2.0 | MIT License | https://tailwindcss.com */
[data-v-c748761e] .p-toolbar-end .p-button {
  padding-block: calc(var(--spacing, .25rem) * 1);
}
@media (min-width: 96rem) {
[data-v-c748761e] .p-toolbar-end .p-button {
    padding-block: calc(var(--spacing, .25rem) * 2);
}
}
[data-v-c748761e] .p-toolbar-start {
  min-width: calc(var(--spacing, .25rem) * 0);
  flex: 1;
  overflow: hidden;
}

.asset-thumbnail-carousel[data-v-a5c12f3e] {
  /* 确保容器有明确的尺寸 */
  min-height: 100%;
  /* 确保内容不溢出 */
  overflow: hidden;
}
.carousel-media[data-v-a5c12f3e] {
  /* 防止媒体溢出 */
  overflow: hidden;
}
.carousel-media-item[data-v-a5c12f3e] {
  /* 确保媒体容器占满空间 */
  will-change: opacity;
}

/* 视频和音频控件样式优化 */
video[data-v-a5c12f3e],
audio[data-v-a5c12f3e] {
  outline: none;
}

/* 音频容器背景 */
.audio-placeholder[data-v-a5c12f3e] {
  background: linear-gradient(
    135deg,
    rgb(34 197 94 / 0.1) 0%,
    rgb(20 184 166 / 0.1) 100%
  );
}

/* ============================================================
   sortRightmost（默认关）：只把「排序」排到这一排的**最右**。

   为什么用 flex `order` 而不是改模板里的书写顺序：
   本组件是**共享**的（`JobFiltersBar` / `JobHistorySidebarTab` 也在用），
   改书写顺序会一并改掉那两个宿主的顺序。`order` 只在**视觉**上重排，
   DOM 顺序不变 ⇒ 键盘 Tab 顺序、`querySelector` 顺序、面板逻辑都不受影响。

   为什么三个控件各包一层 `.qfa-item`：`order` 必须落在**flex item** 上，
   而 `Popover` 把 `$attrs` 绑到了**浮层面板**（`Popover.vue` 的 `inheritAttrs:false`
   + `v-bind="$attrs"` 在 PopoverContent 上）⇒ class 传不进触发器，
   只能用一个稳定的包装元素作为 flex item。包装元素是 span，尺寸随内容，布局不变。

   默认关 ⇒ 本规则不匹配；另两个宿主既没有这个 class，行为与改动前逐字一致。
   ============================================================ */
.qfa-sort-rightmost > .qfa-item--sort[data-v-03037425] {
  order: 3;
}
.qfa-sort-rightmost > .qfa-item--assets[data-v-03037425] {
  order: 2;
}
.qfa-sort-rightmost > .qfa-item--filter[data-v-03037425] {
  order: 1;
}

.qimen-image-wrap[data-v-b071cc39] {
  display: contents;
}
.qimen-image-blur[data-v-b071cc39] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.qimen-image-main[data-v-b071cc39] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}
.contain .qimen-image-wrap[data-v-b071cc39] {
  position: relative;
  width: 100%;
  height: 100%;
}
.contain .qimen-image-main[data-v-b071cc39] {
  object-fit: contain;
  backdrop-filter: blur(10px);
  position: absolute;
}
.broken-image-placeholder[data-v-b071cc39] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 2rem;
}
.broken-image-placeholder i[data-v-b071cc39] {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

input[type='range'].video-seek-bar[data-v-2850c85d] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  outline: none;
  cursor: pointer;
}
input[type='range'].video-seek-bar[data-v-2850c85d]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
}
input[type='range'].video-seek-bar[data-v-2850c85d]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: #ffffff;
}

/* PrimeVue's galleria teleports the fullscreen gallery out of subtree so we
cannot use scoped style here. */
img.galleria-image {
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
}
.p-galleria-close-button {
  /* Set z-index so the close button doesn't get hidden behind the image when image is large */
  z-index: 1;
}

/* Mobile/tablet specific fixes */
@media screen and (max-width: 768px) {
.p-galleria-prev-button,
  .p-galleria-next-button {
    z-index: 2;
}
}

@keyframes marquee-scroll {
0%,
  20% {
    transform: translateX(0);
}
80%,
  100% {
    transform: translateX(var(--_marquee-end));
}
}
/*! tailwindcss v4.2.0 | MIT License | https://tailwindcss.com */
.template-search-input[data-v-dcb18453]::placeholder {
  color: var(--muted-foreground);
  opacity: .7;
}

.qimen-wb-dockpanel[data-v-d3dea227] {
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 12px;
  bottom: 70px;
  display: flex;
  flex-direction: column;
  width: 288px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background: rgba(24, 17, 15, 0.95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.92);
  overflow: hidden;
  animation: qimen-wb-dockpanel-in-d3dea227 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes qimen-wb-dockpanel-in-d3dea227 {
from {
    opacity: 0;
    transform: translateX(-10px);
}
to {
    opacity: 1;
    transform: none;
}
}
.qimen-wb-dockpanel__head[data-v-d3dea227] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.qimen-wb-dockpanel__head h2[data-v-d3dea227] {
  font-size: 13px;
  font-weight: 600;
}
.qimen-wb-dockpanel__close[data-v-d3dea227] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(244, 246, 255, 0.66);
  background: transparent;
  cursor: pointer;
}
.qimen-wb-dockpanel__close[data-v-d3dea227]:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
}
/* 计数：模板 canvas.css:189 .cw__dockhead span */
.qimen-wb-dockpanel__count[data-v-d3dea227] {
  font-size: 11.5px;
  color: rgba(244, 246, 255, 0.55);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   节点库面板**内部**对齐模板（权威：模板 canvas.css:202-251）。

   为什么写在这里、而不去改 NodeCategoryCardNode.vue：那个组件是**共享件**（/graph 的右侧栏、
   其它树形浏览器都在用），直接改会把不属于批次 5 的路由一起改掉。左栏是本工作台自己的表面，
   由它把内部排版对齐到模板；选择器用**属性子串**（模板类名带 / 与 #，转义后不可读），
   特异性高于 Tailwind 工具类 —— 不依赖样式表先后顺序（那是本项目踩过的坑）。
   ============================================================ */
/* 行：模板 .cwlib__item（padding 8px 9px / 圆角 9px / gap 9px / 12.5px / ink-2）。
   line-height 1.75 是模板根值（style.css:108），行高 38px 由它决定（8+8+12.5*1.75）。 */
.qimen-wb-dockpanel__panel[data-v-d3dea227] [class*='group/node'] > div {
  gap: 9px;
  padding: 8px 9px;
  border-radius: 9px;
  font-size: 12.5px;
  line-height: 1.75;
  color: rgba(244, 246, 255, 0.66);
}
/* 行 hover：模板 .cwlib__item:hover（白 7% + 右移 2px + ink） */
.qimen-wb-dockpanel__panel[data-v-d3dea227] [class*='group/node'] > div:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(244, 246, 255, 1);
  transform: translateX(2px);
}
/* 行标题：模板 .cwlib__item 的 12.5px（原为 text-sm 14px）。
   line-height 必须一起覆盖：text-sm 自带 line-height:1.25rem(20px)，只改 font-size 时
   行高仍按 20px 算，行高会停在 34px（模板 38px = 8+8+12.5*1.75）。 */
.qimen-wb-dockpanel__panel[data-v-d3dea227] [class*='group/node'] > div > span {
  font-size: 12.5px;
  line-height: 1.75;
}
/* 分类小标行：模板 .cw__cat 的节奏是 margin 14px 0 6px；行本身要保留图标与折角
   （用户要求「保留文件夹收起功能」），所以用 padding 补足可点高度。 */
.qimen-wb-dockpanel__panel[data-v-d3dea227] [class*='group/category'] > div:first-child {
  gap: 8px;
  margin: 12px 0 4px;
  padding: 2px 0;
}
/* 分类小标字体：模板 .cw__cat（等宽 10.5px / letter-spacing .16em / ink-3） */
.qimen-wb-dockpanel__panel[data-v-d3dea227] [class*='group/category'] > div:first-child > span {
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.75;
  letter-spacing: 0.16em;
  color: rgba(244, 246, 255, 0.55);
}
/* 子栏目容器：模板没有卡片背景（只有 .cwlib 的 flex 列 + 4px 间距），
   去掉 #27272F 圆角盒与 16/8px 缩进（原 ml-4 mr-2 mb-2 rounded-[10px] bg-[#27272F] p-1.5）。 */
.qimen-wb-dockpanel__panel[data-v-d3dea227] [class*='bg-[#27272F]'] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
/* 搜索框：模板 .input（app.css:259：高 38 / 圆角 10 / 13px / 玻璃底 / 1px 边） */
.qimen-wb-dockpanel__panel[data-v-d3dea227] input.qimen-input {
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  font-size: 13px;
}
/* 面板自带头部在左栏里是多余的（标题已由 dockhead 承担）：模板的搜索框直接跟在 dockhead 后，
   只有 .cw__docksearch 的 10px 下边距（canvas.css:202）。 */
.qimen-wb-dockpanel__panel[data-v-d3dea227] .qimen-vue-side-bar-header .p-toolbar {
  display: none;
}
.qimen-wb-dockpanel__panel[data-v-d3dea227] .qimen-vue-side-bar-header > div:last-child {
  padding: 0 0 10px;
}
/* 滚动容器：去掉 PrimeVue 为自绘滚动条预留的内边距（模板 .cw__dockbody 无内边距）。
   注意 PrimeVue 这里是「内边距 + 加宽」**成对**的两条规则：.p-scrollpanel-content 宽度是
   calc(100% + 2 * var(--p-scrollpanel-bar-size))（9px 滚动条 → 比容器宽 18px），靠同一对内边距抵消。
   只清内边距会把内容留在超宽状态，被容器的 overflow-x:hidden **裁掉右边 18px**
   （结构宽度门禁实测：内容右缘 305 > 容器右缘 287）。故宽度一并拉回 100%。 */
.qimen-wb-dockpanel__panel[data-v-d3dea227] .p-scrollpanel-content {
  width: 100%;
  padding: 0;
}

/* 条目左侧图标：模板 canvas.js:1756 的 svg(icon, 14) + canvas.css:240
   `.cwlib__item svg { flex: none; color: var(--primary-soft) }`；--primary-soft = #ffb45c（style.css:21）。
   模板的图标是**描边**风格（模板 svg() 助手固定 fill="none" stroke="currentColor" stroke-width="1.7"），
   颜色恒为 --primary-soft；模板悬停只把**文字**变 --ink，图标不变色（原实现悬停改
   qimen-orange，一并覆盖）。原值：size-4(16px) + text-muted-foreground。

   注：此前这里还写过 mask-image，把**所有**条目的字形一并换成 node.svg ——
   那是因为当时共享件把字形写死了。现在字形改为**逐条数据驱动**
   （@/views/qimen/utils/nodeLibraryIcon，字形取自模板 canvas.js 的 ICON 表），
   若继续用 mask 覆盖会把 50 个条目又压成同一个字形，故**移除该覆盖**。 */
.qimen-wb-dockpanel__panel[data-v-d3dea227] [class*='group/node'] > div > i:first-child {
  width: 14px;
  height: 14px;
  color: #ffb45c;
}

/* 分类小标**去掉左侧图标**：模板 canvas.html:161/167/175 的 .cw__cat 是裸 <p>，没有图标。
   只命中分类行的**第一个** i —— 第二个是收起折角（chevron）；
   用户上一轮明确要求「保留文件夹收起功能」，所以折角必须留着。 */
.qimen-wb-dockpanel__panel[data-v-d3dea227] [class*='group/category'] > div:first-child > i:first-child {
  display: none;
}

/* 面板：模板 .cw__panel 是 flex 列、内部列表区才滚动（抽屉整体不滚） */
.qimen-wb-dockpanel__panel[data-v-d3dea227] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
/* 既有 SidebarTabTemplate 自带 pt-3 顶部内边距（为右侧栏留的），左栏由 dockhead 接管，去掉 */
.qimen-wb-dockpanel__panel[data-v-d3dea227] .qimen-vue-side-bar-header {
  padding-top: 0;
}

/* 逐值对齐模板 canvas.css:387-395（.cw__dockbtns）+ 共享 .chip 胶囊配方 */
/* ⚠️ 2026-10-10 用户裁决：**移除 `.qimen-wb-dock__badge`**（资产 tab 后的未查看新增资产计数）。
   依据同上（见 script 里的说明段）：只去掉本 dock 这一处；`useAssetsSidebarTab.iconBadge`
   与右侧图标栏的徽标**保持不动**。若将来要恢复，`git log` 里有完整实现（圆角 999 / white .10 配方）。 */
.qimen-wb-dock[data-v-50364a07] {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}
.qimen-wb-dock__chip[data-v-50364a07] {
  /* 模板 .chip（app.css:89-122）的 position/isolation 是选中态伪元素的**前提**：
     选中态的渐变挂在 ::after 上并取 z-index:-1（渐变无法参与 transition 才这么做）。
     没有 isolation:isolate，这个负 z-index 伪元素会跑到 chip 的玻璃底之下甚至逃出 chip。 */
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  /* 必须用 background-color 单属性：选中态要把它置为 transparent，
     用 background 简写会把 ::after 的渐变之外的东西一并复位（模板同样用 background-color）。 */
  background-color: rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 13px;
  /* 模板 .chip（app.css）不设 line-height → 继承根 1.75；胶囊高 40.75px（模板实测 40.8） */
  color: rgba(244, 246, 255, 0.66);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 返工 W1 · ④（用户原话「左下角几个按钮的选中效果没有跟模板对齐」）：
   改前选中态只有「橙字 + 橙描边」，模板是**整颗胶囊填满暖橙渐变 + 深色字 + 光晕**。
   配方逐值来自 app.css:104-122（模板实测见 .tmp/b5/impl-W1/after-probe 输出）。 */
.qimen-wb-dock__chip[data-v-50364a07]::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(120deg, #ff812d, #ffb45c);
  opacity: 0;
  transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.qimen-wb-dock__chip[data-v-50364a07]:hover {
  color: #f4f6ff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}
.qimen-wb-dock__chip.is-active[data-v-50364a07] {
  color: #14090a;
  background-color: transparent;
  border-color: transparent;
  box-shadow: 0 24px 70px -24px rgba(255, 129, 45, 0.62);
}
.qimen-wb-dock__chip.is-active[data-v-50364a07]::after {
  opacity: 1;
}
.qimen-wb-dock__chip.is-active[data-v-50364a07]:hover {
  color: #14090a;
}
@media (max-width: 640px) {
  /* 模板 canvas.css:1419-1435：窄档把开关条做成贴底整条，避免盖住最后一排节点 */
.qimen-wb-dock[data-v-50364a07] {
    left: 0;
    right: 0;
    bottom: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: none;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(to top, rgba(10, 8, 9, 0.98) 62%, rgba(10, 8, 9, 0.18));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    scrollbar-width: none;
}
.qimen-wb-dock__chip[data-v-50364a07] {
    padding: 7px 12px;
    font-size: 12px;
}
}

/* 逐值对齐模板 canvas.css:71-88 的 .cvx__status —— 改任何一个值都会被合同测试判失败 */
.qimen-wb-status[data-v-6129e553] {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 5px clamp(12px, 1.4vw, 18px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(16, 12, 13, 0.86);
  font-size: 11.5px;
  /* 模板 style.css:108 的根 line-height:1.75；不写会得到 28.25px 而不是模板实测的 31.13px */
  line-height: 1.75;
  color: rgba(244, 246, 255, 0.55);
  font-variant-numeric: tabular-nums;
}
.qimen-wb-status__note[data-v-6129e553] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qimen-wb-status__note-short[data-v-6129e553] {
  display: none;
  white-space: nowrap;
}
.qimen-wb-status__stat[data-v-6129e553] {
  white-space: nowrap;
}
.qimen-wb-status__stat b[data-v-6129e553] {
  color: rgba(244, 246, 255, 0.66);
  font-weight: 600;
}
@media (max-width: 640px) {
.qimen-wb-status[data-v-6129e553] {
    flex-wrap: nowrap;
}
.qimen-wb-status__note[data-v-6129e553] {
    display: none;
}
.qimen-wb-status__note-short[data-v-6129e553] {
    display: block;
}
}

.tutorial-guide-arrow[data-v-4ccb6098] {
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid rgb(251 146 60 / 0.4);
  border-bottom: 1px solid rgb(251 146 60 / 0.4);
  background: var(--color-base-background);
}
.tutorial-guide-arrow--top[data-v-4ccb6098] {
  top: -8px;
  bottom: auto;
  border-right: none;
  border-bottom: none;
  border-top: 1px solid rgb(251 146 60 / 0.4);
  border-left: 1px solid rgb(251 146 60 / 0.4);
}
.tutorial-guide-highlight[data-v-4ccb6098] {
  animation: tutorial-pulse-glow-4ccb6098 1.8s ease-in-out infinite;
}
@keyframes tutorial-pulse-glow-4ccb6098 {
0%,
  100% {
    box-shadow:
      0 0 0 4px rgb(255 255 255 / 0.12),
      0 0 28px rgb(249 115 22 / 0.6);
}
50% {
    box-shadow:
      0 0 0 6px rgb(255 255 255 / 0.18),
      0 0 44px rgb(249 115 22 / 0.9);
}
}
.tutorial-guide-toast[data-v-4ccb6098] {
  animation: tutorial-toast-slide-4ccb6098 0.35s ease-out;
}
@keyframes tutorial-toast-slide-4ccb6098 {
0% {
    transform: translate(-50%, 16px);
    opacity: 0;
}
100% {
    transform: translate(-50%, 0);
    opacity: 1;
}
}

/* ==========================================================================
   应用页顶栏 —— 「上深下透」的渐变遮罩，数值逐条取自模板 app.css §12：
     body[data-nav-static] .nav.is-solid {
       background: linear-gradient(to bottom,
         rgba(21,16,17,.82) 0%, rgba(21,16,17,.54) 58%, rgba(21,16,17,0) 100%);
       border-bottom-color: transparent;
       backdrop-filter: blur(16px);
     }

   模板里应用页（projects / works / golden-zone …）都带 data-nav-static，
   也就是说**顶栏永远是这个渐变**，滚动不会把它换成实底色板：
   那层 rgba(bg,.62) 的实底会把顶部光照压暗一半，并在 header 底边切出一条可见暗带
   （模板注释原文：「原来的 rgba(bg,.62) 会把顶部光照压暗一半」）。
   所以这里不再做「滚动变实底」，渐变常驻，底部也不画边框。

   为什么用 ::after 而不是直接写 background：顶栏自身的 backdrop-filter 只会
   模糊它背后的内容，渐变作为独立图层叠加在上面，才能同时做到「模糊下方内容」+
   「顶部压暗、向下渐隐」。z-index:-1 让它落在顶栏内容之下、背景之上。
   background-origin / no-repeat 必须显式声明，否则那 1px 的边框高度会把渐变
   最暗的第一行平铺出来，在底边切出一条暗线。
   ========================================================================== */
.qimen-topbar[data-v-41465729] {
  background: none;
  backdrop-filter: blur(16px);
}
.qimen-topbar[data-v-41465729]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgb(21 16 17 / 0.82) 0%,
    rgb(21 16 17 / 0.54) 58%,
    rgb(21 16 17 / 0) 100%
  );
  background-origin: border-box;
  background-repeat: no-repeat;
}

/* ==========================================================================
   移动端导航抽屉 —— 数值逐条取自模板 style.css
   .nav__toggle / .nav__panel（§19 的断点是 ≤1120px）
   ========================================================================== */
.qimen-nav-toggle[data-v-41465729] {
  position: relative;
  /* 刻意不写 display：显隐完全交给 min-[1121px]:hidden。
     若这里写 display:block，scoped 样式会盖掉 Tailwind 的 hidden（同在 utilities 层之后），
     结果 ≥1121px 时汉堡照样显示。 */
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.045);
  transition:
    border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.qimen-nav-toggle[data-v-41465729]:hover {
  border-color: rgb(255 255 255 / 0.2);
  background: rgb(255 255 255 / 0.1);
}
.qimen-nav-toggle span[data-v-41465729] {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 1.5px;
  border-radius: 2px;
  background: #f4f6ff;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.qimen-nav-toggle span[data-v-41465729]:nth-child(1) {
  top: 18px;
}
.qimen-nav-toggle span[data-v-41465729]:nth-child(2) {
  top: 25px;
}
.qimen-nav-toggle[aria-expanded='true'] span[data-v-41465729]:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}
.qimen-nav-toggle[aria-expanded='true'] span[data-v-41465729]:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
}
.qimen-nav-panel[data-v-41465729] {
  display: grid;
  gap: 4px;
  padding: 12px 24px 24px;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  /* ⚠️ 这里必须**完全不透明**，不能照抄模板的 rgba(21,16,17,.96)。
     实测（同一块纯色注入到面板下方后采样）：
       模板原样                        → [21,15,16] 红完全不可见（0% 透出）
       模板面板 bg 改透明              → [52,14,16]
       仅关掉模板外层 .nav 的 backdrop → [24,15,16]
     说明模板面板「完全不透」是**外层 .nav 的 backdrop-filter 与面板 backdrop
     叠加后的合成结果**，不是那条 .96 声明的效果。模板 .nav 是 position:fixed，
     我们的顶栏是 sticky，同样的嵌套在我们的合成路径下不会产生那个不透明效果 ——
     照抄 .96 会让页面内容以 4% 透出（实测 [30,15,16]），窄屏下能看出淡淡的鬼影。
     所以这里对齐的是模板的**渲染结果**，而不是它的声明值。 */
  background: rgb(21 16 17);
  backdrop-filter: blur(18px);
}
.qimen-nav-panel__link[data-v-41465729] {
  padding: 12px 4px;
  border: 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  font-size: 16px;
  color: rgb(244 246 255 / 0.66);
  transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.qimen-nav-panel__link[data-v-41465729]:hover,
.qimen-nav-panel__link[aria-current='page'][data-v-41465729] {
  color: #f4f6ff;
}
.qimen-nav-panel__actions[data-v-41465729] {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

/*
  品牌标记：模板 .brand__mark 的形状 / 三色渐变 / 辉光 / 呼吸动画
  （`border-radius` 动画无法用工具类表达，故落在 scoped 样式里）
*/
.brand-mark[data-v-286c8c06] {
  border-radius: 8px 12px 8px 12px;
  background: linear-gradient(140deg, #ff812d, #ffc46b 55%, #ff5fa2);
  box-shadow: 0 0 24px -4px rgb(255 129 45 / 0.85);
  animation: mark-breathe-286c8c06 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes mark-breathe-286c8c06 {
0%,
  100% {
    border-radius: 8px 12px 8px 12px;
}
50% {
    border-radius: 12px 8px 12px 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.brand-mark[data-v-286c8c06] {
    animation: none;
}
}

/* ==========================================================================
   阅读进度条 —— 数值逐条取自模板 style.css §6：
     .progress      { position: fixed; inset: 0 0 auto 0; z-index: 60;
                      height: 2px; pointer-events: none; }
     .progress__bar { height: 100%; width: 100%; transform: scaleX(0);
                      transform-origin: 0 50%;
                      background: linear-gradient(90deg,
                        var(--primary-deep), var(--primary), var(--amber)); }
   即 --primary-deep #e4620d → --primary #ff812d（= 我们的 --qimen-orange）
   → --amber #ffc46b。z-index 60 压在顶栏 50 之上；fixed 定位到视口顶端。
   ========================================================================== */
.qimen-scroll-progress[data-v-51451a7f] {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 2px;
  pointer-events: none;
}
.qimen-scroll-progress span[data-v-51451a7f] {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #e4620d, var(--qimen-orange), #ffc46b);
}

/* ==========================================================================
   跳到主内容 —— 数值逐条取自模板 style.css:131-146 `.skip-link`：
     position:fixed · top/left:12px · z-index:200（压在顶栏 50 与进度条 60 之上）
     padding:10px 18px · border-radius:999px · font-size:14px · font-weight:600
     background: var(--ink) #f4f6ff · color: var(--bg) #0a0809
     transform: translateY(-160%) → :focus { transform: translateY(0) }
     transition: transform .3s cubic-bezier(.22, 1, .36, 1)（= 模板 --ease）
   ========================================================================== */
.skip-link[data-v-51451a7f] {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 999px;
  background: #f4f6ff;
  color: #0a0809;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.skip-link[data-v-51451a7f]:focus {
  transform: translateY(0);
}

/* ==========================================================================
   应用页环境光
   底色 #151011 之上叠四层柔光：暖橙主光在左上、玫红补光在右上、
   冷紫收在右下、琥珀在左下，再加一层极淡颗粒去掉大面积渐变的塑料感。
   半径要足够大 —— 半径太小会在进入视口前就衰减光，等于没加。
   ========================================================================== */
.qimen-ambient[data-v-51451a7f] {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      85% 70% at 6% -10%,
      rgb(255 129 45 / 0.4),
      rgb(255 129 45 / 0.1) 46%,
      transparent 82%
    ),
    radial-gradient(60% 52% at 100% 0%, rgb(255 95 162 / 0.2), transparent 72%),
    radial-gradient(
      80% 66% at 94% 116%,
      rgb(107 92 255 / 0.28),
      transparent 74%
    ),
    radial-gradient(
      60% 46% at 22% 120%,
      rgb(255 196 107 / 0.16),
      transparent 76%
    );
}
.qimen-ambient[data-v-51451a7f]::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}