.picker[data-v-264dc9ed] { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.presets[data-v-264dc9ed] { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 3px;
}
.presets button[data-v-264dc9ed] {
  border: 0; background: transparent; color: var(--muted);
  padding: 6px 12px; border-radius: 4px; font-size: 13px; font-weight: 500;
}
.presets button[data-v-264dc9ed]:hover { background: var(--surface-hover); color: var(--text);
}
/* Selected = neutral (spec: compact operational selection is gray, not blue). */
.presets button.on[data-v-264dc9ed] { background: var(--gray-3); color: var(--text);
}
.custom[data-v-264dc9ed] { display: inline-flex; align-items: center; gap: 8px;
}
.custom input[data-v-264dc9ed] {
  border: 1px solid var(--border); border-radius: var(--radius-control);
  padding: 6px 10px; font-size: 13px; color: var(--text); background: var(--surface);
}
.custom input[data-v-264dc9ed]:focus { outline: none; border-color: var(--accent);
}
.dash[data-v-264dc9ed] { color: var(--muted);
}

.empty[data-v-ab988f35] { color: var(--muted); font-size: 13px; padding: 24px 0; text-align: center;
}
.list[data-v-ab988f35] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto;
}
.row[data-v-ab988f35] { display: flex; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--border);
}
.row[data-v-ab988f35]:last-child { border-bottom: 0;
}
.badge[data-v-ab988f35] { flex: none; font-size: 14px;
}
.body[data-v-ab988f35] { display: flex; flex-direction: column; gap: 3px;
}
.text[data-v-ab988f35] { margin: 0; color: var(--text); font-size: 13px;
}
.ts[data-v-ab988f35] { color: var(--muted); font-size: 11px;
}

.empty[data-v-185cc2d4] { color: var(--muted); text-align: center; padding: 80px 0; font-size: 13px;
}
.legend[data-v-185cc2d4] { display: flex; justify-content: center; gap: 20px; margin-top: 8px;
}
.item[data-v-185cc2d4] { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px;
}
.dot[data-v-185cc2d4] { width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}

.empty[data-v-07fc14b6] { color: var(--an-text-muted, #5e7180); text-align: center; padding: 80px 0; font-size: 13px;
}

.empty[data-v-047062c4] { color: var(--an-text-muted, #5e7180); text-align: center; padding: 70px 0; font-size: 13px;
}
.legend[data-v-047062c4] { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 8px;
}
.item[data-v-047062c4] { display: inline-flex; align-items: center; gap: 6px; color: var(--an-text-muted, #5e7180); font-size: 12px;
}
.dot[data-v-047062c4] { width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.note[data-v-047062c4] { font-style: italic; opacity: 0.85;
}

.empty[data-v-ab43f0f2] { color: var(--an-text-muted, #5e7180); text-align: center; padding: 70px 0; font-size: 13px;
}
.legend[data-v-ab43f0f2] { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 8px;
}
.item[data-v-ab43f0f2] { display: inline-flex; align-items: center; gap: 6px; color: var(--an-text-muted, #5e7180); font-size: 12px;
}
.dot[data-v-ab43f0f2] { width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}

.empty[data-v-67564e31] { color: var(--an-text-muted, #5e7180); text-align: center; padding: 70px 0; font-size: 13px;
}

.dash[data-v-64bcd7bf] { min-height: 100%;
}
.head-copy[data-v-64bcd7bf] { min-width: 0;
}
.head-copy h1[data-v-64bcd7bf] { margin: 2px 0 0;
}
.mb[data-v-64bcd7bf] { margin-bottom: 16px;
}
.mb code[data-v-64bcd7bf] { background: rgba(0, 0, 0, 0.06); padding: 1px 5px; border-radius: 4px;
}

/* KPI 卡内容:纵向堆叠,label→value→sub。 */
.kpi[data-v-64bcd7bf] { display: flex; flex-direction: column; gap: 6px;
}
.kpi .an-metric-value[data-v-64bcd7bf] { margin: 2px 0;
}

/* Tab 条与下面第一块内容之间留出呼吸;pane 自身不再加内边距。 */
.tabs[data-v-64bcd7bf] .n-tabs-nav { margin-bottom: 18px;
}
.tabs[data-v-64bcd7bf] .n-tab-pane { padding-top: 0;
}

/* Divider before the Step Feedback block inside the tickets tab. */
.sec-head[data-v-64bcd7bf] { margin: 28px 0 14px; padding-top: 20px; border-top: 1px solid var(--an-border, #d8e2e8);
}
.sec-head h2[data-v-64bcd7bf] { margin: 2px 0 0;
}
.charts[data-v-64bcd7bf] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.span-2[data-v-64bcd7bf] { grid-column: span 2;
}
/* 图表卡头部:标题在上、hint 在下(纵向堆叠)。 */
.chart-card[data-v-64bcd7bf] .n-card__header { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.ct[data-v-64bcd7bf] { font-size: 15px; font-weight: 700; color: var(--an-text);
}
.hint[data-v-64bcd7bf] { display: block;
}
.chart-body[data-v-64bcd7bf] { height: 260px;
}
.chart-body.scroll[data-v-64bcd7bf] { overflow: auto;
}
/* Rank/outcome charts carry their own height (bar count drives it) + an HTML legend. */
.chart-body.tall[data-v-64bcd7bf] { height: auto;
}
.chart-body.item-rank[data-v-64bcd7bf] { height: auto;
}
.deferred[data-v-64bcd7bf] { display: grid; place-items: center; color: var(--an-text-muted); font-size: 13px; text-align: center;
}
@media (max-width: 900px) {
.charts[data-v-64bcd7bf] { grid-template-columns: 1fr;
}
.span-2[data-v-64bcd7bf] { grid-column: span 1;
}
}

/* 独立运行时占满视口;被挂载时占满 portal 给的容器。 */
.dash-root[data-v-74c31c54] { min-height: 100%; background: var(--an-canvas);
}
:root {
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-subtle: #f9fbfd;
  --surface-hover: #f4f7fb;
  --border: #e4e9f0;
  --border-strong: #d2dae5;
  --text: #17202a;
  --muted: #748091;
  --accent: #3978d4;
  --accent-hover: #2f68bc;
  --accent-soft: #eef5ff;
  --primary-action: #0f0f10;
  --primary-action-hover: #262626;
  --radius-control: 6px;
  --radius-card: 8px;

  /* Status pair for satisfaction (good / critical) — always paired with a
     text label in the UI, never color-alone. */
  --pos: #2e9e6b;
  --pos-soft: #e8f6ef;
  --neg: #d64545;
  --neg-soft: #fbeaea;

  /* Neutral selection for compact operational controls (spec: navigation /
     selection is black-white-gray, information blue is reserved). */
  --gray-3: #eceff4;
  /* Overlay-only shadow — panels use borders (spec: 层级阴影仅限浮层). */
  --shadow-overlay: 0 8px 24px rgba(23, 32, 42, 0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-subtle);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;             /* Body 14/400 */
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  cursor: pointer;
}
/**
 * AI Native 产品套件设计系统 v1.3
 *
 * 在应用基础样式之后导入本文件，并将 `ai-native-theme` 类添加到实际的
 * 应用根元素。
 *
 * Vue 用法：
 * <div class="ai-native-theme">
 *   <n-button type="primary">保存</n-button>
 * </div>
 *
 * 下方的组件覆盖均受该类约束。可复用的应用类以 `an-` 为前缀，可直接在
 * Vue 模板中组合使用。
 */

:root {
  /* 原始颜色：产品业务页面不得直接引用这些值。 */
  --an-gray-0: #ffffff;
  --an-gray-25: #fafbfc;
  --an-gray-50: #f7f9fb;
  --an-gray-100: #edf2f5;
  --an-gray-200: #d8e2e8;
  --an-gray-300: #c7d4dc;
  --an-gray-500: #8799a6;
  --an-gray-600: #5e7180;
  --an-gray-700: #334a5b;
  --an-gray-800: #172b3a;
  --an-gray-950: #111111;
  --an-blue: #3978d4;
  --an-blue-soft: #eef5ff;
  --an-teal: #13877d;
  --an-teal-soft: #e7f5f2;
  --an-amber: #ad6b16;
  --an-amber-soft: #fff6e8;
  --an-red: #a74848;
  --an-red-soft: #fbeeee;

  /* 语义颜色：产品级 CSS 只应使用这一层。 */
  --an-canvas: var(--an-gray-0);
  --an-surface: var(--an-gray-0);
  --an-surface-subtle: var(--an-gray-50);
  --an-surface-hover: var(--an-gray-25);
  --an-text: var(--an-gray-800);
  --an-text-muted: var(--an-gray-600);
  --an-border: var(--an-gray-200);
  --an-border-strong: var(--an-gray-300);
  --an-primary: var(--an-gray-950);

  /* 共享基础：字体、几何尺寸、动效和浮层层级。 */
  --an-font-family: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --an-radius-control: 7px;
  --an-radius-panel: 10px;
  --an-shadow-sm: 0 1px 2px rgb(16 24 40 / 5%);
  --an-shadow-overlay: 0 8px 24px rgb(16 24 40 / 8%);
  --an-duration-color: 150ms;
  --an-duration-overlay: 200ms;
  --an-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --an-z-sticky: 100;
  --an-z-dropdown: 200;
  --an-z-modal: 400;
  --an-z-toast: 500;
  --an-z-tooltip: 600;
}

html {
  /* 当前设计系统仅支持浅色模式。 */
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  /* Vue 根节点挂载前的全局兜底样式。 */
  margin: 0;
  min-width: 320px;
  color: var(--an-text);
  background: var(--an-canvas);
  font-family: var(--an-font-family);
  font-size: 12px;
  line-height: 1.5;
}

button,
input,
select,
textarea {
  font: inherit;
}

/*
 * 该类必须添加在包含 Naive UI 组件的 DOM 元素上，以防止这些覆盖样式泄漏到
 * 其他产品页面。
 */
.ai-native-theme {
  color: var(--an-text);
  font-family: var(--an-font-family);
  font-size: 12px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.ai-native-theme :focus-visible {
  outline: 2px solid var(--an-blue);
  outline-offset: 2px;
}

/*
 * 页面内容的字体角色。
 * 请使用这些语义类，不要任意选择字号。
 */
.ai-native-theme .an-workspace-title {
  margin: 0;
  color: var(--an-text);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.ai-native-theme .an-section-title {
  margin: 0;
  color: var(--an-text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.ai-native-theme .an-product-title {
  margin: 0;
  color: var(--an-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.ai-native-theme .an-metric-value {
  /* 仪表盘指标使用等宽数字，便于快速扫描与比较。 */
  color: var(--an-text);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ai-native-theme .an-body-strong {
  color: var(--an-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.ai-native-theme .an-body,
.ai-native-theme .an-table-cell {
  color: var(--an-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.ai-native-theme .an-supporting-text {
  color: var(--an-text-muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
}

.ai-native-theme .an-label {
  /* 标签用于紧凑元数据，不能替代主要正文内容。 */
  color: var(--an-text-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/*
 * NButton 基础样式，定义默认按钮和次要操作样式。
 * 页面标题区域最多使用一个 `type="primary"` 操作；错误按钮只用于明确的
 * 高风险操作流程。
 */
.ai-native-theme .n-button {
  --n-height: 36px;
  --n-border-radius: var(--an-radius-control);
  --n-font-size: 12px;
  --n-font-weight: 700;
  --n-text-color: var(--an-gray-950);
  --n-text-color-hover: var(--an-gray-950);
  --n-text-color-pressed: var(--an-gray-950);
  --n-color: var(--an-surface);
  --n-color-hover: var(--an-surface-hover);
  --n-color-pressed: var(--an-gray-100);
  --n-color-focus: var(--an-surface);
  --n-border: 1px solid var(--an-border-strong);
  --n-border-hover: 1px solid var(--an-gray-700);
  --n-border-pressed: 1px solid var(--an-gray-800);
  --n-border-focus: 1px solid var(--an-blue);
  --n-ripple-color: var(--an-blue-soft);
  transition-duration: var(--an-duration-color);
}

.ai-native-theme .n-button.n-button--primary-type {
  /* 将 <n-button type="primary"> 映射为近黑色主操作。 */
  --n-text-color: #ffffff;
  --n-text-color-hover: #ffffff;
  --n-text-color-pressed: #ffffff;
  --n-color: var(--an-primary);
  --n-color-hover: #2d2d2d;
  --n-color-pressed: #000000;
  --n-color-focus: var(--an-primary);
  --n-border: 1px solid var(--an-primary);
  --n-border-hover: 1px solid #2d2d2d;
  --n-border-pressed: 1px solid #000000;
  --n-border-focus: 1px solid var(--an-primary);
  --n-ripple-color: rgb(255 255 255 / 22%);
}

.ai-native-theme .n-button.n-button--error-type {
  /* 将 <n-button type="error"> 映射为克制的危险操作。 */
  --n-text-color: var(--an-red);
  --n-text-color-hover: #863737;
  --n-text-color-pressed: #6d2d2d;
  --n-color: #ffffff;
  --n-color-hover: var(--an-red-soft);
  --n-color-pressed: #f5dddd;
  --n-border: 1px solid #edc8c8;
  --n-border-hover: 1px solid #d99f9f;
  --n-border-pressed: 1px solid #c88181;
}

.ai-native-theme .n-button.n-button--small-type {
  /* 表格行内紧凑操作使用 size="small"。 */
  --n-height: 30px;
  --n-font-size: 11px;
}

.ai-native-theme .n-button.n-button--tiny-type {
  --n-height: 26px;
  --n-font-size: 10px;
}

.ai-native-theme .n-button.n-button--disabled {
  opacity: 0.5;
}

/*
 * NInput、NSelect、NDatePicker 及相关输入控件的样式。
 * NSelect 和 NDatePicker 通过 NBaseSelection 渲染，因此两类根元素必须使用
 * 相同的控件高度、边框与焦点环设计令牌。
 */
.ai-native-theme .n-input,
.ai-native-theme .n-base-selection {
  --n-height: 36px;
  --n-border-radius: var(--an-radius-control);
  --n-font-size: 12px;
  --n-color: #ffffff;
  --n-border: 1px solid var(--an-border-strong);
  --n-border-hover: 1px solid var(--an-gray-700);
  --n-border-focus: 1px solid var(--an-blue);
  --n-box-shadow-focus: 0 0 0 2px rgb(57 120 212 / 18%);
  --n-placeholder-color: var(--an-gray-500);
  --n-text-color: var(--an-text);
  --n-caret-color: var(--an-blue);
}

.ai-native-theme .n-input.n-input--focus,
.ai-native-theme .n-base-selection.n-base-selection--active {
  /* 保持键盘与鼠标操作下的焦点状态清晰可见。 */
  box-shadow: 0 0 0 2px rgb(57 120 212 / 18%);
}

.ai-native-theme .n-input.n-input--disabled,
.ai-native-theme .n-base-selection.n-base-selection--disabled {
  opacity: 0.6;
}

/* NCard 是标准面板容器：10px 圆角与轻量阴影。 */
.ai-native-theme .n-card {
  --n-color: var(--an-surface);
  --n-border-color: var(--an-border);
  --n-border-radius: var(--an-radius-panel);
  --n-box-shadow: var(--an-shadow-sm);
  --n-title-text-color: var(--an-text);
  --n-title-font-size: 15px;
  --n-title-font-weight: 700;
  --n-text-color: var(--an-text);
  --n-padding-top: 16px;
  --n-padding-bottom: 16px;
  --n-padding-left: 16px;
  --n-padding-right: 16px;
}

.ai-native-theme .n-card > .n-card__header {
  padding-bottom: 12px;
}

/*
 * NTag 状态样式。每个 NTag 仅添加一个状态修饰类，例如：
 * <n-tag class="an-status-tag an-status-tag--success">已完成</n-tag>
 * 状态文字必须始终可见，颜色只作为辅助提示。
 */
.ai-native-theme .n-tag.an-status-tag {
  --n-border-radius: 999px;
  --n-font-size: 10px;
  --n-height: 22px;
  --n-padding: 0 8px;
  font-weight: 700;
}

.ai-native-theme .n-tag.an-status-tag--neutral {
  --n-color: var(--an-gray-50);
  --n-border: 1px solid var(--an-border-strong);
  --n-text-color: var(--an-text-muted);
}

.ai-native-theme .n-tag.an-status-tag--info {
  --n-color: var(--an-blue-soft);
  --n-border: 1px solid #c8d9ef;
  --n-text-color: var(--an-blue);
}

.ai-native-theme .n-tag.an-status-tag--success {
  --n-color: var(--an-teal-soft);
  --n-border: 1px solid #b9ddd7;
  --n-text-color: var(--an-teal);
}

.ai-native-theme .n-tag.an-status-tag--warning {
  --n-color: var(--an-amber-soft);
  --n-border: 1px solid #ecd7b9;
  --n-text-color: var(--an-amber);
}

.ai-native-theme .n-tag.an-status-tag--error {
  --n-color: var(--an-red-soft);
  --n-border: 1px solid #edc8c8;
  --n-text-color: var(--an-red);
}

/* NAlert 使用清晰的底色与边框，确保消息含义不只依赖颜色表达。 */
.ai-native-theme .n-alert {
  --n-border-radius: 8px;
  --n-padding: 11px 12px;
  --n-font-size: 12px;
}

.ai-native-theme .n-alert.n-alert--info-type {
  --n-color: var(--an-blue-soft);
  --n-border: 1px solid #c8d9ef;
  --n-title-text-color: var(--an-text);
  --n-text-color: #4f6170;
}

.ai-native-theme .n-alert.n-alert--warning-type {
  --n-color: var(--an-amber-soft);
  --n-border: 1px solid #ecd7b9;
  --n-title-text-color: var(--an-amber);
  --n-text-color: #6b5a42;
}

/*
 * NTabs 与 NPagination。空间不足时不要缩小标签文字，而应保持标签导航内容
 * 可横向滚动。
 */
.ai-native-theme .n-tabs {
  --n-tab-font-size: 12px;
  --n-tab-font-weight: 700;
  --n-tab-text-color: var(--an-text-muted);
  --n-tab-text-color-active: var(--an-gray-950);
  --n-tab-text-color-hover: var(--an-text);
  --n-bar-color: var(--an-primary);
}

.ai-native-theme .n-tabs .n-tabs-nav-scroll-content {
  min-width: max-content;
}

.ai-native-theme .n-pagination {
  --n-item-text-color: var(--an-gray-950);
  --n-item-text-color-hover: var(--an-gray-950);
  --n-item-text-color-pressed: #ffffff;
  --n-item-color: #ffffff;
  --n-item-color-hover: var(--an-surface-hover);
  --n-item-color-pressed: var(--an-primary);
  --n-item-border: 1px solid var(--an-border-strong);
  --n-item-border-hover: 1px solid var(--an-gray-700);
  --n-item-border-pressed: 1px solid var(--an-primary);
  --n-item-border-radius: var(--an-radius-control);
}

/*
 * NDataTable：白色行、浅中性色悬停状态与固定高度的运营表格节奏。
 * 在列渲染函数中配合 an-table-primary 与 an-table-meta，形成规范要求的
 * 标题加元数据两层信息层级。
 */
.ai-native-theme .n-data-table {
  --n-th-color: var(--an-gray-50);
  --n-th-text-color: var(--an-text-muted);
  --n-td-color: #ffffff;
  --n-td-color-hover: var(--an-surface-hover);
  --n-border-color: var(--an-border);
  --n-font-size: 12px;
}

.ai-native-theme .n-data-table .n-data-table-th {
  height: 40px;
  padding: 0 12px;
  color: var(--an-text-muted);
  background: var(--an-gray-50);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ai-native-theme .n-data-table .n-data-table-td {
  height: 60px;
  padding: 10px 12px;
  color: var(--an-text);
  font-size: 12px;
  line-height: 1.5;
}

.ai-native-theme .n-data-table .n-data-table-tr:hover .n-data-table-td {
  background: var(--an-surface-hover);
}

.ai-native-theme .n-data-table .n-data-table-td--fixed-right,
.ai-native-theme .n-data-table .n-data-table-th--fixed-right {
  /* 将 `fixed: 'right'` 操作列与可横向滚动的数据区域分隔开。 */
  box-shadow: -1px 0 0 var(--an-border);
}

.ai-native-theme .an-table-primary {
  display: block;
  overflow: hidden;
  color: var(--an-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-native-theme .an-table-meta {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--an-text-muted);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * NMenu 用于全局导航栏与上下文侧边栏。
 * 选中项同时通过文字字重和中性色背景识别。
 */
.ai-native-theme .n-menu {
  --n-item-text-color: var(--an-text-muted);
  --n-item-text-color-hover: var(--an-text);
  --n-item-text-color-active: var(--an-gray-950);
  --n-item-text-color-active-hover: var(--an-gray-950);
  --n-item-color-hover: #ffffff;
  --n-item-color-active: #f1f1f1;
  --n-item-color-active-hover: #f1f1f1;
  --n-item-border-radius: var(--an-radius-control);
  --n-item-height: 34px;
  --n-arrow-color: var(--an-text-muted);
  --n-arrow-color-hover: var(--an-text);
}

.ai-native-theme .n-menu .n-menu-item-content--selected {
  box-shadow: inset 0 0 0 1px #d5d5d5;
  font-weight: 700;
}

/*
 * NDropdown、NModal 与 NDrawer 共享浮层阴影。它们的层叠顺序仍由 Naive UI
 * 管理；此处仅统一视觉表现。
 */
.ai-native-theme .n-dropdown-menu,
.ai-native-theme .n-modal,
.ai-native-theme .n-drawer {
  box-shadow: var(--an-shadow-overlay);
}

.ai-native-theme .n-dropdown-menu {
  --n-border-radius: 8px;
  --n-color: #ffffff;
  --n-divider-color: var(--an-border);
}

.ai-native-theme .n-modal {
  --n-border-radius: 10px;
  --n-color: #ffffff;
}

/*
 * 应用框架。这些类组成共享的桌面端三列布局：
 * an-app-shell > 全局导航 + 上下文侧边栏 + 工作区。
 * 可配合普通语义标签或 NLayout 组件使用。
 */
.ai-native-theme .an-app-shell {
  display: grid;
  grid-template-columns: 64px 248px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--an-canvas);
}

.ai-native-theme .an-app-shell__rail {
  /* 全局产品导航：紧凑、吸顶，以图标为主。 */
  position: sticky;
  top: 0;
  z-index: var(--an-z-sticky);
  height: 100vh;
  border-right: 1px solid var(--an-border);
  background: var(--an-gray-100);
}

.ai-native-theme .an-app-shell__sidebar {
  /* 上下文导航在桌面端持续可见，并独立滚动。 */
  position: sticky;
  top: 0;
  z-index: var(--an-z-sticky);
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--an-border);
  background: var(--an-surface-subtle);
}

.ai-native-theme .an-app-shell__workspace {
  min-width: 0;
  background: var(--an-canvas);
}

.ai-native-theme .an-app-shell__header {
  /* 工作区头部放置全局工具，不放置页面级业务操作。 */
  position: sticky;
  top: 0;
  z-index: var(--an-z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 86px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--an-border);
  background: rgb(255 255 255 / 96%);
  backdrop-filter: blur(12px);
}

.ai-native-theme .an-page {
  /* 页面容器限制最大内容宽度，同时保留响应式边距。 */
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: 32px;
}

.ai-native-theme .an-page-header {
  /* 页面标题及其业务操作统一放在该标题区域。 */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.ai-native-theme .an-page-header__copy {
  min-width: 0;
}

.ai-native-theme .an-page-header__description {
  max-width: 760px;
  margin: 6px 0 0;
  color: var(--an-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.ai-native-theme .an-page-header__actions,
.ai-native-theme .an-inline-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/*
 * 可复用内容组合。
 * 这些类描述页面模式，而不是单独的组件。
 */
.ai-native-theme .an-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ai-native-theme .an-metric-card {
  min-width: 0;
  min-height: 112px;
}

.ai-native-theme .an-metric-card .n-card__content {
  display: grid;
  gap: 8px;
}

.ai-native-theme .an-filter-bar {
  /* 列表页筛选栏：搜索框占据可伸缩的第一列。 */
  display: grid;
  grid-template-columns: minmax(200px, 1fr) repeat(2, minmax(130px, 180px));
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--an-border);
  background: #ffffff;
}

.ai-native-theme .an-table-panel {
  /* 包裹筛选栏和 NDataTable，形成一个有边界的运营面板。 */
  overflow: hidden;
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-panel);
  background: #ffffff;
  box-shadow: var(--an-shadow-sm);
}

.ai-native-theme .an-note {
  /* 信息提示：下一步操作应在相邻内容中明确呈现。 */
  padding: 14px 16px;
  border: 1px solid #c8d9ef;
  border-left: 3px solid var(--an-blue);
  border-radius: 8px;
  color: #4f6170;
  background: var(--an-blue-soft);
  font-size: 12px;
  line-height: 1.5;
}

.ai-native-theme .an-note__title {
  display: block;
  margin-bottom: 3px;
  color: var(--an-text);
  font-weight: 700;
}

.ai-native-theme .an-content-grid {
  /* 仪表盘与详情页推荐使用的主辅内容比例。 */
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.72fr);
  gap: 16px;
}

.ai-native-theme .an-grid-12 {
  /* 十二列布局网格；业务模块至少跨越 3 列。 */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.ai-native-theme .an-truncate {
  /* 当完整内容必须可访问时，请配合 NTooltip 使用。 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1199px) {
  /* 紧凑桌面端与平板端：缩小常驻导航宽度和页面边距。 */
  .ai-native-theme .an-app-shell {
    grid-template-columns: 60px 224px minmax(0, 1fr);
  }

  .ai-native-theme .an-page {
    padding: 24px;
  }

  .ai-native-theme .an-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  /* 平板端：隐藏上下文侧边栏，并堆叠页面标题区内容。 */
  .ai-native-theme .an-app-shell {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .ai-native-theme .an-app-shell__sidebar {
    display: none;
  }

  .ai-native-theme .an-app-shell__header {
    min-height: 72px;
    padding: 14px 20px;
  }

  .ai-native-theme .an-page-header,
  .ai-native-theme .an-content-grid {
    grid-template-columns: 1fr;
  }

  .ai-native-theme .an-page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-native-theme .an-page-header__actions {
    flex: 1 1 auto;
  }
}

@media (max-width: 640px) {
  /* 移动端：移除常驻导航栏，控件采用单列布局。 */
  .ai-native-theme .an-app-shell {
    display: block;
  }

  .ai-native-theme .an-app-shell__rail {
    display: none;
  }

  .ai-native-theme .an-app-shell__header {
    position: static;
    min-height: 64px;
    padding: 12px 16px;
  }

  .ai-native-theme .an-page {
    padding: 20px 16px 40px;
  }

  .ai-native-theme .an-workspace-title {
    font-size: 22px;
  }

  .ai-native-theme .an-metric-grid,
  .ai-native-theme .an-content-grid {
    grid-template-columns: 1fr;
  }

  .ai-native-theme .an-filter-bar {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 所有作用域内组件的动画均遵循用户的减少动态效果偏好。 */
  .ai-native-theme *,
  .ai-native-theme *::before,
  .ai-native-theme *::after {
    scroll-behavior: auto !important;
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}