/* =============================================================================
   app.css —— 本系统 PC 控制台（1440px）外壳与页面级样式
   =============================================================================
   只放「本系统独有」的东西：侧栏 / 顶栏 / 订单表格细节 / 7 张详情卡 / 回执进度条 /
   权限自检抽屉。通用组件（按钮、表格、标签、空状态、骨架屏、toast、trace 尾巴）
   全部来自 ./assets/pdm-ui.css，这里不重复定义，避免两套样式打架。
   ============================================================================= */

/* =============================================================================
   1. 外壳：左侧栏 + 右上主区
   ============================================================================= */
.app-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
}

/* 深色底座（左侧栏 / 登录品牌区）—— 与原型「浅色内容区 + 深色导航」一致：
   这两块在浅色主题下也保持深色底 + 亮色文字，变量在此作用域内局部覆盖，
   因此主内容区（表格 / 卡片 / 表单）仍走浅色令牌，互不影响。 */
.app-side,
.app-login__brand {
  --pdm-text: #E6EDF6;
  --pdm-text-secondary: #A7B4C4;
  --pdm-text-weak: #7C8A9C;
  --pdm-text-disabled: #55616F;
  --pdm-color-border: #1F2937;
  --pdm-color-border-strong: #2A3546;
  --pdm-color-surface: #111827;
  --pdm-color-surface-alt: #1B2634;
  --pdm-end-back-soft: rgba(110, 86, 207, .26);
}

/* ---------- 侧栏 ---------- */
.app-side {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--pdm-space-2);
  padding: var(--pdm-space-4) var(--pdm-space-3);
  background: linear-gradient(180deg, #0E1520, #0B111A);
  border-right: 1px solid var(--pdm-color-border);
}

.app-side__brand {
  display: flex;
  align-items: center;
  gap: var(--pdm-space-2);
  padding: var(--pdm-space-2) var(--pdm-space-2) var(--pdm-space-4);
  border-bottom: 1px solid var(--pdm-color-border);
  margin-bottom: var(--pdm-space-2);
}
.app-side__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  font-size: var(--pdm-fs-aux);
  font-weight: var(--pdm-fw-semibold);
  color: #FFFFFF;
  background: var(--pdm-end-back);
  border-radius: var(--pdm-radius-control);
}
.app-side__name {
  font-size: var(--pdm-fs-tree);
  font-weight: var(--pdm-fw-semibold);
  line-height: 1.2;
  color: var(--pdm-text);
}
.app-side__sub {
  font-size: var(--pdm-fs-tiny);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pdm-text-weak);
}

.app-nav { display: flex; flex-direction: column; gap: 2px; }
.app-nav__label {
  padding: var(--pdm-space-3) var(--pdm-space-2) var(--pdm-space-1);
  font-size: var(--pdm-fs-tiny);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pdm-text-disabled);
}
.app-nav__item {
  display: flex;
  align-items: center;
  gap: var(--pdm-space-2);
  height: 34px;
  padding: 0 var(--pdm-space-3);
  font-size: var(--pdm-fs-body);
  color: var(--pdm-text-secondary);
  border-radius: var(--pdm-radius-control);
  border: 1px solid transparent;
  transition: background var(--pdm-dur-fast) var(--pdm-ease),
              color var(--pdm-dur-fast) var(--pdm-ease);
}
.app-nav__item:hover { color: var(--pdm-text); background: var(--pdm-color-surface-alt); }
.app-nav__item.is-active {
  color: #FFFFFF;
  background: var(--pdm-end-back-soft);
  border-color: var(--pdm-end-back);
}
.app-nav__dot {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}
.app-nav__count {
  margin-left: auto;
  font-family: var(--pdm-font-mono);
  font-size: var(--pdm-fs-tiny);
  color: var(--pdm-text-weak);
}

.app-side__foot {
  margin-top: auto;
  padding-top: var(--pdm-space-3);
  border-top: 1px solid var(--pdm-color-border);
  font-size: var(--pdm-fs-tiny);
  line-height: 1.7;
  color: var(--pdm-text-disabled);
}

/* ---------- 主区 ---------- */
.app-main { min-width: 0; display: flex; flex-direction: column; }

.app-top {
  position: sticky;
  top: 0;
  z-index: var(--pdm-z-topstrip);
  display: flex;
  align-items: center;
  gap: var(--pdm-space-3);
  min-height: 56px;
  padding: 0 var(--pdm-space-6);
  background: color-mix(in srgb, var(--pdm-color-surface) 92%, transparent);
  border-bottom: 1px solid var(--pdm-color-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .app-top { background: var(--pdm-color-surface); }
}

.app-top__title {
  display: flex;
  align-items: center;
  gap: var(--pdm-space-2);
  font-size: var(--pdm-fs-page-title);
  font-weight: var(--pdm-fw-medium);
  color: var(--pdm-text);
}
.app-top__crumb {
  display: flex;
  align-items: center;
  gap: var(--pdm-space-15);
  font-size: var(--pdm-fs-aux);
  color: var(--pdm-text-weak);
}
.app-top__crumb b { font-weight: var(--pdm-fw-regular); color: var(--pdm-text-secondary); }

/* 身份区：姓名 / 部门 / 职位 / 终端 / 生效权限数 */
.app-id {
  display: flex;
  align-items: center;
  gap: var(--pdm-space-3);
  padding: var(--pdm-space-1) var(--pdm-space-3) var(--pdm-space-1) var(--pdm-space-1);
  background: var(--pdm-color-surface-sunken);
  border: 1px solid var(--pdm-color-border);
  border-radius: 999px;
}
.app-id__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  font-size: var(--pdm-fs-aux);
  font-weight: var(--pdm-fw-semibold);
  color: #FFFFFF;
  background: var(--pdm-end-back);
  border-radius: 50%;
}
.app-id__meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.app-id__name { font-size: var(--pdm-fs-aux); font-weight: var(--pdm-fw-medium); color: var(--pdm-text); }
.app-id__sub {
  font-size: var(--pdm-fs-tiny);
  color: var(--pdm-text-weak);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-id__perms {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-family: var(--pdm-font-mono);
  font-size: var(--pdm-fs-tiny);
  color: var(--pdm-end-back-fg);
  background: var(--pdm-end-back-soft);
  border-radius: 999px;
  white-space: nowrap;
}

.app-view {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--pdm-page-max);
  padding: var(--pdm-space-5) var(--pdm-space-6) var(--pdm-space-9);
}

/* =============================================================================
   2. 登录页
   ============================================================================= */
.app-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--pdm-space-6);
}
.app-login__card {
  width: min(920px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  overflow: hidden;
  background: var(--pdm-color-surface);
  border: 1px solid var(--pdm-color-border);
  border-radius: 12px;
  box-shadow: var(--pdm-shadow-pop);
}
.app-login__brand {
  position: relative;
  padding: var(--pdm-space-8) var(--pdm-space-6);
  background:
    radial-gradient(420px 220px at 20% 0%, rgba(110, 86, 207, .28), transparent 70%),
    linear-gradient(180deg, #111827, #0B111A);
  border-right: 1px solid var(--pdm-color-border);
  overflow: hidden;
}
.app-login__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .6;
  pointer-events: none;
}
.app-login__brandInner { position: relative; }
.app-login__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--pdm-space-15);
  font-size: var(--pdm-fs-tiny);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pdm-text-weak);
}
.app-login__h1 {
  margin-top: var(--pdm-space-3);
  font-size: var(--pdm-fs-display);
  font-weight: var(--pdm-fw-semibold);
  line-height: 1.3;
  color: var(--pdm-text);
}
.app-login__lede {
  margin-top: var(--pdm-space-3);
  font-size: var(--pdm-fs-aux);
  line-height: 20px;
  color: var(--pdm-text-secondary);
}
.app-login__accts {
  margin-top: var(--pdm-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--pdm-space-2);
}
.app-login__acct {
  display: flex;
  align-items: center;
  gap: var(--pdm-space-2);
  padding: var(--pdm-space-2) var(--pdm-space-3);
  text-align: left;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--pdm-color-border);
  border-radius: var(--pdm-radius-control);
  transition: border-color var(--pdm-dur-fast) var(--pdm-ease),
              background var(--pdm-dur-fast) var(--pdm-ease);
}
.app-login__acct:hover { border-color: var(--pdm-end-back); background: var(--pdm-end-back-soft); }
.app-login__acct b { font-family: var(--pdm-font-mono); color: var(--pdm-text); font-weight: var(--pdm-fw-medium); }
.app-login__acct span { font-size: var(--pdm-fs-micro); color: var(--pdm-text-weak); }

.app-login__form { padding: var(--pdm-space-8) var(--pdm-space-6); display: flex; flex-direction: column; gap: var(--pdm-space-4); }
.app-login__formTitle {
  font-size: var(--pdm-fs-section);
  font-weight: var(--pdm-fw-medium);
  color: var(--pdm-text);
}
.app-login__formSub { font-size: var(--pdm-fs-aux); color: var(--pdm-text-weak); margin-top: 2px; }
.app-login__error { min-height: 0; }

/* =============================================================================
   3. 列表页
   ============================================================================= */
.app-toolbar {
  display: flex;
  align-items: flex-end;
  gap: var(--pdm-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--pdm-space-4);
}
.app-toolbar__field { display: flex; flex-direction: column; gap: var(--pdm-space-1); }
.app-toolbar__field .pdm-label { font-size: var(--pdm-fs-micro); }
.app-toolbar input,
.app-toolbar select { min-width: 150px; }

.app-scope {
  display: flex;
  align-items: center;
  gap: var(--pdm-space-2);
  flex-wrap: wrap;
  padding: var(--pdm-space-2) var(--pdm-space-3);
  margin-bottom: var(--pdm-space-3);
  font-size: var(--pdm-fs-aux);
  color: var(--pdm-text-secondary);
  background: var(--pdm-end-back-soft);
  border: 1px solid var(--pdm-end-back);
  border-radius: var(--pdm-radius-control);
}
.app-scope b { color: var(--pdm-text); font-weight: var(--pdm-fw-medium); }
.app-scope code {
  padding: 1px 5px;
  font-family: var(--pdm-font-mono);
  font-size: var(--pdm-fs-micro);
  color: var(--pdm-text);
  background: var(--pdm-color-surface-sunken);
  border-radius: var(--pdm-radius-tiny);
}

/* 订单表格：单号 / 客户 / 部门 / 销售 / 状态 / 工作日 / 金额 */
.app-table .col-no { min-width: 152px; }
.app-table .col-money { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.app-table .col-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.app-table .col-id {
  display: block;
  margin-top: 2px;
  font-family: var(--pdm-font-mono);
  font-size: var(--pdm-fs-tiny);
  color: var(--pdm-text-disabled);
}
.app-table tbody tr { transition: background var(--pdm-dur-fast) var(--pdm-ease); }
.app-table__link {
  font-family: var(--pdm-font-mono);
  font-size: var(--pdm-fs-aux);
  color: var(--pdm-color-primary-fg);
  border-bottom: 1px dashed transparent;
}
.app-table__link:hover { border-bottom-color: currentColor; }

/* 状态胶囊：9 态按语义着色，颜色全部走令牌 */
.app-status { display: inline-flex; align-items: center; gap: var(--pdm-space-15); }
.app-status--draft { color: var(--pdm-status-muted-fg); background: var(--pdm-status-muted-bg); }
.app-status--reviewing { color: var(--pdm-status-warn-fg); background: var(--pdm-status-warn-bg); }
.app-status--to_start { color: var(--pdm-status-info-fg); background: var(--pdm-status-info-bg); }
.app-status--in_production { color: var(--pdm-end-client-fg); background: var(--pdm-end-client-soft); }
.app-status--to_reinspect { color: var(--pdm-status-warn-fg); background: var(--pdm-status-warn-bg); }
.app-status--to_pack { color: var(--pdm-status-info-fg); background: var(--pdm-status-info-bg); }
.app-status--to_accept { color: var(--pdm-status-info-fg); background: var(--pdm-status-info-bg); }
.app-status--completed { color: var(--pdm-status-success-fg); background: var(--pdm-status-success-bg); }
.app-status--closed { color: var(--pdm-status-neutral-fg); background: var(--pdm-status-neutral-bg); }

/* =============================================================================
   4. 详情页：7 张卡
   ============================================================================= */
.app-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pdm-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--pdm-space-4);
}
.app-detail__no {
  display: flex;
  align-items: center;
  gap: var(--pdm-space-3);
  font-family: var(--pdm-font-mono);
  font-size: var(--pdm-fs-display);
  font-weight: var(--pdm-fw-medium);
  color: var(--pdm-text);
}
.app-detail__meta {
  display: flex;
  align-items: center;
  gap: var(--pdm-space-4);
  flex-wrap: wrap;
  margin-top: var(--pdm-space-2);
  font-size: var(--pdm-fs-aux);
  color: var(--pdm-text-weak);
}
.app-detail__actions { display: flex; align-items: center; gap: var(--pdm-space-2); flex-wrap: wrap; }

.app-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--pdm-space-4);
  align-items: start;
}
.app-cards > .is-wide { grid-column: 1 / -1; }

.app-kvlist { display: flex; flex-direction: column; }
.app-kvrow {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--pdm-space-3);
  padding: var(--pdm-space-2) 0;
  border-bottom: 1px dashed var(--pdm-color-border);
  font-size: var(--pdm-fs-aux);
}
.app-kvrow:last-child { border-bottom: 0; }
.app-kvrow__k { color: var(--pdm-text-weak); }
.app-kvrow__v { color: var(--pdm-text); word-break: break-word; }

/* 金额三列：原价 / 成交 / 差额，用原型的数据维度固定配色 */
.app-amounts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pdm-space-3);
}
.app-amount { display: flex; flex-direction: column; gap: 2px; }
.app-amount__k { font-size: var(--pdm-fs-micro); color: var(--pdm-text-weak); }
.app-amount__v {
  font-family: var(--pdm-font-num);
  font-size: 20px;
  font-weight: var(--pdm-fw-semibold);
  font-variant-numeric: tabular-nums;
}
.app-amount--original .app-amount__v { color: var(--pdm-text-weak); }
.app-amount--final .app-amount__v { color: var(--pdm-end-back-fg); }
.app-amount--discount .app-amount__v { color: var(--pdm-completeness-warn); }

/* 明细表 */
.app-items th, .app-items td { font-size: var(--pdm-fs-aux); }

/* 流转记录时间线 */
.app-timeline { display: flex; flex-direction: column; gap: var(--pdm-space-3); }
.app-timeline__item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--pdm-space-2); }
.app-timeline__rail { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.app-timeline__node {
  width: 8px; height: 8px; margin-top: 5px;
  border-radius: 50%;
  background: var(--pdm-color-primary);
  box-shadow: 0 0 0 3px var(--pdm-color-primary-soft);
}
.app-timeline__line { flex: 1 1 auto; width: 1px; background: var(--pdm-color-border-strong); }
.app-timeline__body { padding-bottom: var(--pdm-space-1); }
.app-timeline__title { font-size: var(--pdm-fs-aux); color: var(--pdm-text); }
.app-timeline__sub { font-size: var(--pdm-fs-micro); color: var(--pdm-text-weak); margin-top: 2px; }

/* =============================================================================
   5. 回执进度条（WAIT → ACKED → STARTED，单向）
   ============================================================================= */
.app-ack { display: flex; flex-direction: column; gap: var(--pdm-space-3); }
.app-ack__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pdm-space-2);
  align-items: start;
}
.app-ack__step { display: flex; flex-direction: column; gap: var(--pdm-space-15); min-width: 0; }
.app-ack__bar {
  height: 4px;
  border-radius: 2px;
  background: var(--pdm-color-border-strong);
  transition: background var(--pdm-dur-base) var(--pdm-ease);
}
.app-ack__step.is-done .app-ack__bar { background: var(--pdm-end-client-fg); }
.app-ack__step.is-current .app-ack__bar {
  background: linear-gradient(90deg, var(--pdm-end-client-fg), var(--pdm-color-border-strong));
}
.app-ack__label {
  display: flex;
  align-items: center;
  gap: var(--pdm-space-15);
  font-size: var(--pdm-fs-aux);
  color: var(--pdm-text-weak);
}
.app-ack__step.is-done .app-ack__label,
.app-ack__step.is-current .app-ack__label { color: var(--pdm-text); }
.app-ack__stamp {
  font-family: var(--pdm-font-mono);
  font-size: var(--pdm-fs-tiny);
  color: var(--pdm-text-disabled);
  min-height: 14px;
}
.app-ack__step.is-done .app-ack__stamp { color: var(--pdm-text-secondary); }

/* 交期起算日：铁律展示位，必须显眼 */
.app-ironlaw {
  display: flex;
  align-items: center;
  gap: var(--pdm-space-3);
  flex-wrap: wrap;
  padding: var(--pdm-space-3);
  background: var(--pdm-color-surface-sunken);
  border: 1px solid var(--pdm-color-border-strong);
  border-left: 3px solid var(--pdm-end-client-fg);
  border-radius: var(--pdm-radius-control);
}
.app-ironlaw__k { font-size: var(--pdm-fs-micro); color: var(--pdm-text-weak); }
.app-ironlaw__v {
  font-family: var(--pdm-font-mono);
  font-size: var(--pdm-fs-section);
  font-weight: var(--pdm-fw-semibold);
  color: var(--pdm-end-client-fg);
  letter-spacing: .02em;
}
.app-ironlaw__note { font-size: var(--pdm-fs-micro); line-height: 1.6; color: var(--pdm-text-secondary); }

/* =============================================================================
   6. 权限自检抽屉
   ============================================================================= */
.app-drawer-mask {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--pdm-color-mask);
  animation: app-fade var(--pdm-dur-base) var(--pdm-ease);
}
@keyframes app-fade { from { opacity: 0; } to { opacity: 1; } }

.app-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  width: min(620px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--pdm-color-surface);
  border-left: 1px solid var(--pdm-color-border-strong);
  box-shadow: var(--pdm-shadow-drawer);
  animation: app-slide var(--pdm-dur-base) var(--pdm-ease);
}
@keyframes app-slide { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }

.app-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pdm-space-3);
  padding: var(--pdm-space-4) var(--pdm-space-5);
  border-bottom: 1px solid var(--pdm-color-border);
}
.app-drawer__title { font-size: var(--pdm-fs-section); font-weight: var(--pdm-fw-medium); color: var(--pdm-text); }
.app-drawer__sub { margin-top: 2px; font-size: var(--pdm-fs-aux); color: var(--pdm-text-weak); }
.app-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--pdm-space-4) var(--pdm-space-5) var(--pdm-space-7); }

.app-permgroup { margin-bottom: var(--pdm-space-5); }
.app-permgroup__head {
  display: flex;
  align-items: center;
  gap: var(--pdm-space-2);
  margin-bottom: var(--pdm-space-2);
}
.app-permgroup__title {
  font-family: var(--pdm-font-mono);
  font-size: var(--pdm-fs-aux);
  color: var(--pdm-text);
}
.app-permgroup__count { font-size: var(--pdm-fs-tiny); color: var(--pdm-text-weak); }

.app-perm {
  display: flex;
  align-items: center;
  gap: var(--pdm-space-2);
  padding: var(--pdm-space-15) var(--pdm-space-2);
  border-bottom: 1px dashed var(--pdm-color-border);
  font-size: var(--pdm-fs-aux);
}
.app-perm__code {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--pdm-font-mono);
  font-size: var(--pdm-fs-micro);
  color: var(--pdm-text-secondary);
  word-break: break-all;
}
.app-perm.is-key .app-perm__code { color: var(--pdm-text); }
.app-perm__rank {
  flex: 0 0 auto;
  font-family: var(--pdm-font-mono);
  font-size: var(--pdm-fs-tiny);
  color: var(--pdm-text-disabled);
}
.app-perm__scope {
  flex: 0 0 auto;
  min-width: 116px;
  text-align: right;
  font-size: var(--pdm-fs-micro);
}

.app-rawjson {
  margin: 0;
  padding: var(--pdm-space-3);
  max-height: 260px;
  overflow: auto;
  font-family: var(--pdm-font-mono);
  font-size: var(--pdm-fs-tiny);
  line-height: 1.6;
  color: var(--pdm-text-secondary);
  background: var(--pdm-color-surface-sunken);
  border: 1px solid var(--pdm-color-border);
  border-radius: var(--pdm-radius-control);
  white-space: pre;
}

/* =============================================================================
   7. 40300 现场演示块 / 幂等结果块
   ============================================================================= */
.app-demo {
  margin-top: var(--pdm-space-3);
  padding: var(--pdm-space-3) var(--pdm-space-4);
  font-size: var(--pdm-fs-aux);
  line-height: 1.7;
  background: var(--pdm-status-danger-bg);
  border: 1px solid var(--pdm-status-danger-fg);
  border-left-width: 3px;
  border-radius: var(--pdm-radius-control);
  color: var(--pdm-text-secondary);
}
.app-demo--ok {
  background: var(--pdm-status-success-bg);
  border-color: var(--pdm-status-success-fg);
}
.app-demo--info {
  background: var(--pdm-status-info-bg);
  border-color: var(--pdm-status-info-fg);
}
.app-demo__title {
  display: flex;
  align-items: center;
  gap: var(--pdm-space-2);
  font-size: var(--pdm-fs-aux);
  font-weight: var(--pdm-fw-medium);
  color: var(--pdm-text);
  margin-bottom: var(--pdm-space-1);
}
.app-demo__code {
  font-family: var(--pdm-font-mono);
  font-size: var(--pdm-fs-micro);
  color: var(--pdm-status-danger-fg);
}
.app-demo__row { display: flex; gap: var(--pdm-space-2); flex-wrap: wrap; }
.app-demo__row dt { color: var(--pdm-text-weak); }
.app-demo__list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--pdm-fs-aux);
  line-height: 20px;
  color: var(--pdm-text-secondary);
}
.app-demo__list li { margin: 0; }
.app-demo__row dd {
  margin: 0;
  font-family: var(--pdm-font-mono);
  font-size: var(--pdm-fs-micro);
  color: var(--pdm-text);
  word-break: break-all;
}

/* =============================================================================
   8. 小工具
   ============================================================================= */
.app-stack { display: flex; flex-direction: column; gap: var(--pdm-space-3); }
.app-inline { display: flex; align-items: center; gap: var(--pdm-space-2); flex-wrap: wrap; }
.app-sep { height: 1px; background: var(--pdm-color-border); margin: var(--pdm-space-3) 0; }
.app-mono-sm { font-family: var(--pdm-font-mono); font-size: var(--pdm-fs-micro); color: var(--pdm-text-weak); }
.app-strong { color: var(--pdm-text); font-weight: var(--pdm-fw-medium); }
.app-muted { color: var(--pdm-text-weak); }

/* 接口未就绪占位：必须写出「具体路径」，不许含糊 */
.app-missing {
  display: flex;
  flex-direction: column;
  gap: var(--pdm-space-2);
  padding: var(--pdm-space-4);
  background: var(--pdm-color-surface-sunken);
  border: 1px dashed var(--pdm-color-border-strong);
  border-radius: var(--pdm-radius-control);
}
.app-missing__title {
  display: flex;
  align-items: center;
  gap: var(--pdm-space-2);
  font-size: var(--pdm-fs-body);
  font-weight: var(--pdm-fw-medium);
  color: var(--pdm-text);
}
.app-missing__path {
  font-family: var(--pdm-font-mono);
  font-size: var(--pdm-fs-aux);
  color: var(--pdm-status-warn-fg);
  word-break: break-all;
}
.app-missing__desc { font-size: var(--pdm-fs-aux); line-height: 20px; color: var(--pdm-text-secondary); }

/* =============================================================================
   9. 窄屏兜底（本系统按 1440 设计，但不许在 1024/768 上炸掉）
   ============================================================================= */
@media (max-width: 1200px) {
  .app-shell { grid-template-columns: 200px minmax(0, 1fr); }
  .app-amounts { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-side { display: none; }
  .app-login__card { grid-template-columns: minmax(0, 1fr); }
  .app-login__brand { display: none; }
  .app-top { padding: 0 var(--pdm-space-3); flex-wrap: wrap; min-height: 56px; }
  .app-view { padding: var(--pdm-space-3) var(--pdm-space-3) var(--pdm-space-7); }
  .app-cards { grid-template-columns: minmax(0, 1fr); }
  .app-ack__track { grid-template-columns: minmax(0, 1fr); }
  .app-ack__step { flex-direction: row; align-items: center; gap: var(--pdm-space-2); }
  .app-ack__bar { width: 28px; flex: 0 0 auto; }
  .app-kvrow { grid-template-columns: 88px minmax(0, 1fr); }
}