:root {
  color-scheme: light;
  /* UI 设计规范 §1 颜色 token（采样自设计稿，主蓝品牌色 #2355E7）。
     变量名沿用 F 阶段（--accent/--line/--band…）以零成本复用全站组件，仅把「值」校准到规范。 */
  --ink: #1f2329;            /* §1 正文/标题 */
  --muted: #646a73;         /* §1 text-secondary 副文字 */
  --weak: #8a909a;          /* §1 text-weak 字段名/表头/占位 */
  --line: #ebeef3;          /* §1 border */
  --line-soft: #ebeef3;     /* §1 border（统一，不再分两级灰） */
  --panel: #ffffff;         /* §1 卡片底 */
  --band: #ffffff;          /* §0 页面底色（白底，靠边框+极轻阴影区分卡片） */
  --surface: #f5f7fa;       /* §6/§10 hover 行/导航 hover 浅灰 */
  --surface-weak: #fafbfc;  /* §10 表头可选极浅底 */
  --accent: #2355e7;        /* §1 primary 主蓝 */
  --accent-strong: #1b45c7; /* §1 primary-strong hover/active */
  --accent-soft: #eaf1fe;   /* §1 primary-soft active 底/已发货蓝标签底 */
  --warn: #f16c05;          /* §1/§15 状态·橙字（待发货） */
  --warn-soft: #fef2eb;     /* §1/§15 状态·橙底 */
  --danger: #d83931;
  --danger-soft: #fff2f0;
  --ok: #2fa23f;            /* §1/§15 状态·绿字（已收货） */
  --ok-soft: #e8f8ec;       /* §1/§15 状态·绿底 */
  --void: #8a909a;          /* §15 其它/缺失标签字 */
  --void-soft: #f2f3f5;     /* §15 其它/缺失标签底 */
  --shadow: 0 1px 2px rgba(31, 35, 41, 0.04), 0 2px 8px rgba(31, 35, 41, 0.04); /* §5 卡片极轻阴影 */
  --content-max: 1400px;
  --sidebar-width: 236px;
  --sidebar-bg: #172033;
  --sidebar-bg-deep: #0f172a;
  --sidebar-text: #cbd5e1;
  --sidebar-muted: #94a3b8;
  --sidebar-disabled: rgba(203, 213, 225, 0.54);
  --sidebar-active-bg: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%);
  --sidebar-active-text: #ffffff;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --page-gutter: 16px;
  --page-gutter-mobile: 12px;
  --page-gap: 14px;
  --page-gap-lg: 16px;
  --card-pad-x: 16px;
  --card-pad-y: 16px;
  --field-gap: 8px;
  --scrollbar-size: 6px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(31, 35, 41, 0.18);
  --scrollbar-thumb-hover: rgba(31, 35, 41, 0.30);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--scrollbar-thumb);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

html {
  background: var(--band);
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--band);
  color: var(--ink);
  overflow-x: hidden;
}

#app {
  min-height: 100vh;
}

a {
  color: var(--accent);
}

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

button,
.button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  padding: 0 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

button:hover,
.button:hover {
  border-color: #b8bcc4;
  background: #f9fafb;
}

button.primary,
.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: 650;
}

button.primary:hover,
.button.primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

button.danger {
  border-color: #f0b8b4;
  color: var(--danger);
  background: #fffafa;
}

button.danger:hover {
  border-color: #e58f89;
  background: var(--danger-soft);
}

button.subtle {
  border-color: var(--line);
  color: var(--muted);
  background: #ffffff;
  font-weight: 500;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

input,
select,
textarea {
  min-height: 44px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  padding: 9px 11px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(51, 112, 255, 0.12);
}

textarea {
  min-height: 80px;
  resize: vertical;
}

/* 输入框提示语统一灰色（此前继承了正文深色） */
::placeholder {
  color: var(--weak);
  opacity: 1;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
  min-width: 0;
}

.shell {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 16px 20px 128px;
}

.app-layout {
  min-height: 100vh;
}

.app-main {
  min-width: 0;
}

.pc-sidebar,
.pc-content-header {
  display: none;
}

.mobile-topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  background: rgba(247, 248, 250, 0.94);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(12px);
}

.mobile-topbar-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 14px 20px 10px;
  display: grid;
  gap: 8px;
}

/* 品牌 logo（数炬科技）：替换原侧栏/顶栏的标题+描述+ICON，按实际比例等比缩放 */
.brand-logo {
  display: block;
  height: 33px;
  width: auto;
  user-select: none;
}
.brand-logo-mobile {
  height: 29px;
}

.sidebar-brand-lockup {
  position: relative;
  min-width: 0;
}
.sidebar-brand-tagline {
  display: none;
}

.brand {
  font-weight: 750;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0;
}

.notice {
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.7);
  color: var(--weak);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
}

.error,
.success {
  border: 1px solid;
  padding: 11px 13px;
  border-radius: 10px;
  margin-bottom: 12px;
  line-height: 1.45;
}

.error {
  border-color: #f0b8b4;
  background: var(--danger-soft);
  color: var(--danger);
}

.success {
  border-color: #b8e2c4;
  background: var(--ok-soft);
  color: var(--ok);
}

/* ===== 页面级浮层 toast:fixed 定位,脱离文档流 → 出现/消失不顶内容、不回流,页面不抖 ===== */
.toast-host {
  position: fixed;
  top: 76px;
  right: 28px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}
.toast {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: max-content;
  min-width: 320px;
  max-width: min(92vw, 420px);
  min-height: 64px;
  padding: 14px 20px 14px 22px;
  border-radius: 12px;
  border: 1px solid #e4eaf3;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 18px 36px rgba(29, 36, 51, 0.14), 0 4px 12px rgba(29, 36, 51, 0.08);
  opacity: 0;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  transform: translateX(14px);
  transition: opacity 0.24s ease, transform 0.24s ease;
  pointer-events: auto;
}
.toast-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}
.toast-body { min-width: 0; }
.toast-title {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.toast-desc {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}
.toast::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
}
.toast.toast-in { opacity: 1; transform: translateX(0); }
.toast-success .toast-icon { background: #dcfce7; color: var(--ok); }
.toast-success .toast-icon::before { content: "✓"; }
.toast-success::after { background: var(--ok); }
.toast-error .toast-icon { background: var(--danger-soft); color: var(--danger); }
.toast-error .toast-icon::before { content: "✕"; }
.toast-error::after { background: var(--danger); }
.toast-info .toast-icon { background: var(--accent-soft); color: var(--accent); }
.toast-info .toast-icon::before { content: "i"; }
.toast-info::after { background: var(--accent); }
.toast-warning .toast-icon { background: #fef3c7; color: #d97706; }
.toast-warning .toast-icon::before { content: "!"; }
.toast-warning::after { background: #f59e0b; }
@media (max-width: 899px) {
  .toast-host {
    top: 12px;
    right: 12px;
    left: 12px;
    align-items: stretch;
  }
  .toast {
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

.section {
  margin: 16px 0;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.section h1,
.section h2 {
  margin: 0;
  letter-spacing: 0;
}

.section h1 {
  font-size: 24px;
  line-height: 1.3;
}

.section h2 {
  font-size: 18px;
  line-height: 1.35;
}

.lead {
  margin: 7px 0 14px;
  color: var(--muted);
  line-height: 1.65;
  font-size: 14px;
}

.panel,
.line-card,
.material-card,
.stat {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.panel {
  padding: 16px;
}

.line-card,
.material-card {
  padding: 16px;
  margin-bottom: 12px;
}
.material-card {
  display: block;
  text-decoration: none;
  color: inherit;
  overflow-wrap: anywhere;
}
.material-card:hover {
  border-color: #bcd0ff;
  box-shadow: 0 4px 14px rgba(31, 35, 41, 0.06);
}

.grid{
  display: grid;
  gap: 12px;
}

.grid.two,
.purchase-info-card {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.line-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.line-title > div {
  min-width: 0;
}

.line-title-sub {
  display: block;
  margin-top: 2px;
  color: var(--weak);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.line-title strong{
  min-width: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.line-title button {
  flex-shrink: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 13px;
  border: 1px solid var(--line);
  background: #f9fafb;
  color: var(--muted);
  white-space: nowrap;
}

.badge.confirmed {
  border-color: #b8e2c4;
  background: var(--ok-soft);
  color: var(--ok);
}

.badge.partial {
  border-color: #f4d49c;
  background: var(--warn-soft);
  color: var(--warn);
}

.badge.voided {
  border-color: var(--line);
  background: var(--void-soft);
  color: var(--void);
}

.meta {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.line-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.line-fields label {
  color: var(--muted);
}

.line-hint {
  margin-top: 8px;
  font-size: 13px;
  color: var(--weak);
  line-height: 1.55;
  word-break: break-word;
}

.entry-material-card {
  display: grid;
  gap: 14px;
}

.material-lookup {
  display: grid;
  gap: 8px;
}

.autocomplete-results {
  display: grid;
  gap: 8px;
}

.lookup-state {
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--muted);
  background: #f9fafb;
  border: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1.5;
}

.material-option {
  min-height: 54px;
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  justify-content: stretch;
  padding: 12px;
  border-color: var(--line-soft);
  background: #ffffff;
}

.material-option:hover {
  border-color: #bcd0ff;
  background: #f7faff;
}

.material-option span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.entry-field-group {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.entry-group-title {
  color: var(--weak);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.price-info-group .line-hint {
  margin-top: 0;
}

.price-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.error-text {
  color: var(--danger);
}

.entry-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 10px;
  padding: 12px 0 14px;
  background: linear-gradient(to top, var(--band) 86%, rgba(247, 248, 250, 0));
}

.entry-actions button {
  flex: 1;
  min-height: 48px;
  font-size: 16px;
}

.material-card {
  min-height: 96px;
}

.material-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px rgba(51, 112, 255, 0.12);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.stat {
  padding: 14px;
  min-width: 0;
}

.stat strong {
  display: block;
  font-size: 22px;
  margin-top: 5px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.stat span {
  color: var(--muted);
  font-size: 13px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 35, 41, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.modal {
  background: #ffffff;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 18px;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  box-shadow: 0 18px 46px rgba(31, 35, 41, 0.18);
}

.modal h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.modal p {
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 12px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.modal-actions button {
  flex: 1;
  min-height: 48px;
  font-size: 16px;
}

/* ===== 统一弹窗组件(蓝白圆角) ===== */
.ui-dialog { max-width: 420px; padding: 22px 22px 18px; }
.ui-dialog-head { display: flex; align-items: center; gap: 10px; }
.ui-dialog-head h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
/* 图标:裸图标(去背景圈),只留语义色,与 toast 风格统一 */
.ui-dialog-icon { display: inline-flex; align-items: center; flex: none; }
.ui-dialog-icon svg { width: 20px; height: 20px; }
.ui-dialog-icon-danger { color: var(--danger); }
.ui-dialog-icon-primary { color: var(--accent); }
.ui-dialog-icon-success { color: var(--ok); }
.ui-dialog-icon-info { color: var(--muted); }
.ui-dialog-msg { color: var(--muted); line-height: 1.6; margin: 12px 0 0; padding-left: 30px; font-size: 14px; }
/* 按钮:对齐本站标准对话框(取消/保存)—— 正常尺寸、右对齐、非全宽,不笨重 */
.ui-dialog-actions { margin-top: 20px; justify-content: flex-end; }
.ui-dialog-actions .ui-dialog-btn { flex: 0 0 auto; min-height: 0; height: 34px; padding: 0 22px; border-radius: 8px; font-size: 14px; font-weight: 600; border: 1px solid var(--line); cursor: pointer; transition: background .15s, border-color .15s; }
.ui-dialog-cancel { background: #fff; color: var(--ink); border-color: var(--line); }
.ui-dialog-cancel:hover { background: var(--surface-weak); }
.ui-dialog-ok { color: #fff; border: 0; }
.ui-dialog-ok-primary, .ui-dialog-ok-info, .ui-dialog-ok-success { background: var(--accent); }
.ui-dialog-ok-primary:hover, .ui-dialog-ok-info:hover, .ui-dialog-ok-success:hover { background: var(--accent-strong); }
.ui-dialog-ok-danger { background: var(--danger); }
.ui-dialog-ok-danger:hover { background: #c0322b; }
.bottom-tabs {
  display: none;
}

@media (min-width: 900px) {
  .mobile-topbar,
  .bottom-tabs {
    display: none;
  }

  .app-layout {
    display: block;
  }

  .app-main {
    min-height: 100vh;
    margin-left: var(--sidebar-width);
  }

  .pc-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 5;
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 14px;
    border-right: 1px solid var(--sidebar-border);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  }

  .pc-sidebar::-webkit-scrollbar {
    width: 4px;
  }

  .pc-sidebar::-webkit-scrollbar-track {
    background: transparent;
  }

  .pc-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
  }

  .pc-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 4px 8px 16px;
    border-bottom: 1px solid var(--sidebar-border);
  }

  .sidebar-nav {
    display: grid;
    gap: 16px;
  }

  /* 工作台 与下方内容区之间灰色横线分隔（上下各留间距） */
  .sidebar-standalone {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sidebar-border);
  }

  .sidebar-group {
    display: grid;
    gap: 6px;
  }

  .sidebar-group-title {
    padding: 0 10px 5px;
    color: var(--sidebar-muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
  }

  .sidebar-item {
    min-height: 42px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--sidebar-text);
    text-decoration: none;
    font-weight: 650;
    transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
  }

  .sidebar-item-main {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
  }

  .sidebar-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-size: 13px;
    line-height: 1;
  }

  .sidebar-item:hover {
    background: var(--sidebar-hover-bg);
    color: #ffffff;
  }

  .sidebar-item.active {
    border-color: transparent;
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
  }

  .sidebar-item.active:hover {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
  }

  .sidebar-item.disabled {
    cursor: not-allowed;
    color: var(--sidebar-disabled);
    background: transparent;
    border-color: transparent;
  }

  .sidebar-item.disabled:hover {
    color: var(--sidebar-disabled);
    background: transparent;
  }

  .sidebar-item.disabled small {
    color: var(--sidebar-disabled);
    font-size: 11px;
    font-weight: 500;
  }

  .pc-sidebar .sidebar-lock {
    color: var(--sidebar-disabled);
  }

  .header-account {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 180px;
    min-height: 32px;
    padding: 2px 0 2px 2px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
  }

  .header-account::-webkit-details-marker { display: none; }

  .header-account:hover {
    background: #f2f3f5;
  }

  .account-avatar {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #3370ff;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
  }

  .account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .account-name {
    color: #1f2329;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .account-caret {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #646a73;
    transition: transform .15s ease;
  }

  .account-caret svg { width: 13px; height: 13px; }
  .header-account-menu[open] .account-caret { transform: rotate(180deg); }

  .header-account-menu {
    position: relative;
  }

  .account-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 10;
    width: 172px;
    padding: 8px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(31, 35, 41, .12);
  }

  .account-popover-user {
    min-width: 0;
    padding: 6px 8px 9px;
    display: grid;
    gap: 4px;
    border-bottom: 1px solid var(--line-soft);
    color: #1f2329;
    font-size: 13px;
    font-weight: 400;
  }

  .account-popover-user small {
    color: #8f959e;
    font-size: 11px;
  }

  .account-logout {
    width: 100%;
    min-height: 34px;
    margin-top: 6px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #4e5969;
    display: flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
  }

  .account-logout svg { width: 15px; height: 15px; }
  .account-logout:hover { background: #f2f3f5; color: #1f2329; }

  .pc-content-header {
    display: block;
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 0;
    border-bottom: 1px solid var(--line-soft);
    background: #ffffff;
  }

  /* 表头内容与 .ui-page 同容器，由全局 token 控制，避免页面容器和导航各自维护宽度/边距。 */
  .pc-header-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 12px var(--page-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .pc-content-header .notice {
    display: none;
  }

  .pc-header-left,
  .pc-header-right {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .pc-header-right {
    flex-shrink: 0;
    justify-content: flex-end;
    gap: 6px;
  }

  .pc-breadcrumb {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
  }

  .pc-breadcrumb .crumb-sep { color: var(--weak); }

  .pc-breadcrumb strong {
    color: var(--ink);
    font-weight: 500;
  }

  .shell {
    width: 100%;
    max-width: 1200px;
    margin: 0;
    padding: 24px 32px 96px;
  }

  .main-content-inner {
    max-width: 1200px;
  }

  .section:first-child {
    margin-top: 0;
  }

  .section > h1,
  .section-head h1 {
    font-size: 22px;
  }

  .entry-section {
    margin: 0 0 22px;
  }

  .entry-intro .lead {
    margin: 6px 0 14px;
  }

  .entry-section .section-head {
    margin-bottom: 12px;
  }

  .entry-material-card {
    gap: 14px;
    padding: 16px;
  }

  .line-title {
    margin-bottom: 2px;
  }

  .line-title button {
    min-height: 34px;
    padding: 0 10px;
    font-size: 13px;
  }

  .material-lookup {
    gap: 6px;
  }

  .autocomplete-results {
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
  }

  .lookup-state {
    padding: 8px 10px;
  }

  .material-option {
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 14px;
    padding: 10px 12px;
  }

  .material-option strong {
    grid-column: 1 / -1;
    font-size: 14px;
    line-height: 1.35;
  }

  .material-option span {
    font-size: 12px;
  }

  .line-fields {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .material-info-group .line-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }

  .entry-intro .purchase-info-card {
    grid-template-columns: minmax(320px, 1fr) 220px;
    gap: 12px 14px;
    padding: 14px 16px;
  }

  .entry-intro .purchase-info-card label:first-child {
    max-width: 640px;
  }

  .entry-intro .purchase-info-card label:nth-child(2) {
    max-width: 220px;
  }

  .entry-intro .purchase-info-card label:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 880px;
  }

  .price-fields {
    grid-template-columns: minmax(110px, 140px) minmax(140px, 180px) minmax(140px, 180px) minmax(170px, 220px);
    justify-content: start;
    gap: 12px;
  }

  .entry-actions {
    position: static;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 14px 0 0;
    border-top: 1px solid var(--line-soft);
    background: transparent;
  }

  .entry-actions button {
    flex: 0 0 auto;
    min-width: 148px;
    min-height: 42px;
    font-size: 14px;
  }

  .entry-actions .primary {
    min-width: 180px;
  }
}

@media (min-width: 1180px) {
  .material-info-group .line-fields {
    grid-template-columns: minmax(128px, 0.75fr) minmax(142px, 0.85fr) minmax(180px, 1.2fr) minmax(180px, 1.2fr) minmax(96px, 0.55fr);
  }
}

@media (max-width: 899px) {
  .shell {
    padding: 12px 12px 176px;
  }

  .mobile-topbar-inner {
    padding: 12px;
  }

  .brand {
    font-size: 18px;
  }

  .notice {
    font-size: 11px;
    padding: 5px 8px;
  }

  .section {
    margin: 14px 0;
  }

  .panel,
  .line-card,
  .material-card {
    padding: 14px;
  }

  .grid.two,
  .grid.three,
  .purchase-info-card,
  .line-fields {
    grid-template-columns: 1fr;
  }

  .price-fields,
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .entry-actions {
    bottom: 72px;
    padding: 10px 0;
  }

  .bottom-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: grid;
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -6px 18px rgba(31, 35, 41, 0.06);
    overflow: visible;
  }

  .bottom-tab {
    position: relative;
    min-width: 0;
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    text-decoration: none;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
  }

  .bottom-tab.active,
  .bottom-more.active > .bottom-tab,
  .bottom-more[open] > .bottom-tab {
    border-color: #c6d8ff;
    background: var(--accent-soft);
    color: var(--accent);
  }

  .bottom-more {
    position: relative;
    min-width: 0;
  }

  .bottom-more > summary {
    list-style: none;
  }

  .bottom-more > summary::-webkit-details-marker {
    display: none;
  }

  .bottom-more-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: min(264px, calc(100vw - 20px));
    max-height: min(420px, calc(100vh - 120px));
    overflow-y: auto;
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(31, 35, 41, 0.18);
  }

  .bottom-more-item {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
  }

  .bottom-more-item:hover,
  .bottom-more-item.active {
    background: var(--accent-soft);
    color: var(--accent);
  }
}

@media (max-width: 390px) {

  .price-fields{
    grid-template-columns: 1fr;
  }

  .stat strong {
    font-size: 20px;
  }
}

/* ============================================================
   采购记录页（F）共用 UI 系统：飞书式 token + 组件
   主蓝 --accent #3370ff / 页底 --band / 白卡 --panel / 语义 ok/warn
   移动优先；桌面在 @media (min-width:900px) 内增强。
   ============================================================ */
.ui-icon { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle; }
.sidebar-icon svg { width: 18px; height: 18px; }
.sidebar-lock { color: var(--weak); display: inline-flex; }
.sidebar-lock svg { width: 14px; height: 14px; }

/* §8 页面容器：max-width 1400 居中、gutter 桌面16/移动12。
   关键：ui-page 页面让外层 .shell 透传（不再 max-width:1200 + margin:0 左贴），
   由 .ui-page 独占居中容器 → 修掉 1920 历史宽屏左贴留白。 */
.shell.main-content-inner:has(.ui-page) { max-width: none; width: 100%; margin: 0; padding: 0; }
.ui-page {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--page-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--page-gap);
}
.ui-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--page-gap-lg);
  flex-wrap: wrap;
  margin: 0;
}
.ui-page-title { min-width: 0; }
.ui-page-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; flex-wrap: wrap; }
.ui-page-actions .ui-tabs { align-self: auto; }
.ui-page-header h1 { font-size: 22px; font-weight: 600; line-height: 1.4; margin: 0; color: var(--ink); letter-spacing: 0; }
.ui-page-sub { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.ui-card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 10px; box-shadow: var(--shadow); }

/* 技术设计 / 设计初算 */
.design-calc-page {
  gap: var(--page-gap);
}

.design-calc-frame-card {
  padding: 0;
  overflow: hidden;
  min-height: calc(100vh - 172px);
}

.design-calc-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 172px);
  min-height: 720px;
  border: 0;
  background: #f5f7fa;
}
.ui-message-card { padding: 20px 22px; color: var(--ink); line-height: 1.65; }

/* 筛选卡 */
.ui-filter-card { padding: var(--card-pad-y) var(--card-pad-x); display: flex; flex-direction: column; gap: 14px; margin: 0; }
.ui-filter-fields { display: flex; flex-direction: column; gap: 12px; }
.ui-field { display: flex; flex-direction: column; gap: var(--field-gap); }
.ui-field-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.ui-input-wrap { position: relative; display: block; }
.ui-input { width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 0 34px 0 12px; color: var(--ink); font-size: 14px; }
.ui-input::placeholder { color: var(--weak); opacity: 1; }
.ui-input.is-placeholder { color: var(--muted); }
.ui-input.is-placeholder option { color: var(--ink); }
.ui-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ui-input:disabled { color: var(--muted); background: var(--surface); cursor: not-allowed; }
.ui-input-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--weak); pointer-events: none; display: inline-flex; }
.ui-input-icon svg { width: 16px; height: 16px; }
/* §14 原生 date 只保留一个日历图标：不再叠加自定义 calendar，仅压淡原生 indicator */
.ui-input-date { padding-right: 12px; cursor: pointer; caret-color: transparent; }
.ui-input-date::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
/* 采购日期范围:空值时隐原生「年/月/日」,改显灰色「请选择」占位(再选日期后自动复原);日历图标保留 */
.ui-input-date.is-empty::-webkit-datetime-edit { opacity: 0; }
.ui-date-ph { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; line-height: 1; pointer-events: none; display: none; }
.ui-input-date.is-empty + .ui-date-ph { display: block; }
/* 采购记录筛选区:供应商搜索图标 + 日期日历图标稍放大一点点(仅限筛选区,不影响其它输入图标) */
.ui-filter-fields .ui-input-icon svg { width: 19px; height: 19px; }
.ui-filter-fields .ui-input-date::-webkit-calendar-picker-indicator { width: 18px; height: 18px; }
/* 单据状态下拉：去原生箭头，用 §6 lucide chevron-down 占位（与 search/calendar 统一） */
.ui-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; }
.ui-select::-ms-expand { display: none; }
.ui-date-range { display: flex; align-items: center; gap: 8px; }
.ui-date-range .ui-input-wrap { flex: 1; }
.ui-date-sep { color: var(--weak); }
.ui-filter-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* 按钮 */
.ui-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; min-height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.ui-button .ui-icon { width: 16px; height: 16px; }
.ui-button-ghost:hover { border-color: var(--accent); color: var(--accent); }
.ui-button-ghost:disabled { color: var(--weak); cursor: not-allowed; background: var(--void-soft); border-color: var(--line-soft); }
.ui-button-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.ui-button-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.ui-button-primary:disabled { background: #a8b9f7; border-color: #a8b9f7; color: #fff; cursor: not-allowed; box-shadow: none; }
.ui-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }

/* 统计卡（§12）：背景直接用素材原图 assets/stat-*.png（渐变底 + 圆形徽章 + 填充图标 + 波浪），
   卡片 aspect-ratio 锁定原图比例(1000×292)+ cover → 等比不失真（圆形不被拉扁）；卡内只叠 label+数字，避让左侧徽章。 */
.ui-stat-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; }
/* 徽章已从背景拆为独立图层(badge-*.png,从原图派生)；背景=去徽章后的渐变+波浪(stat-*-bg.png),cover 铺满。
   拆开后可单独控制图标大小(缩到≈80%)与上下左等距,且不动原图。 */
/* 「合理压扁」:卡高从 1000/333 收到 1000/293(≈ -15px@1440,375×293/1000≈110),这 15px 全部从【顶部】抠 ——
   背景锚到 center bottom + 仍 cover:卡变扁后图按宽铺满、纵向溢出只从【顶部裁】,底部色块/波浪一像素不动(原素材、原接入)。 */
.ui-stat-card { position: relative; overflow: hidden; display: flex; align-items: center; aspect-ratio: 1000 / 293; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); background-position: center bottom; background-size: cover; background-repeat: no-repeat; }
/* 卡片边框按主色调上色（调淡的同色系，不糊不抢） */
.ui-stat-card.stat-blue  { background-image: url("/src/assets/stat-blue-bg.png"); border-color: #9cbcf4; }
.ui-stat-card.stat-amber { background-image: url("/src/assets/stat-amber-bg.png"); border-color: #f4b485; }
.ui-stat-card.stat-green { background-image: url("/src/assets/stat-green-bg.png"); border-color: #98d29e; }
/* 独立徽章：缩到≈80%(height 68% → 圆盘约为原 80%)；上下左等距 = 垂直居中(top:50%) + left 取与纵向边距相等的值
   (卡 aspect 1000/333,left 5.3%宽 = (100-68)/2=16%高,故上/下/左三边距相等)。 */
/* icon 等比缩 ~20%(112px→≈90px @1440):height 91.2%→82%(82%×110≈90);仍 top:50% 垂直居中、left 锚定不变,纯尺寸缩放、原素材不重画。 */
.ui-stat-badge { position: absolute; top: 50%; left: 1.5%; transform: translateY(-50%); height: 82%; aspect-ratio: 1 / 1; background: center / contain no-repeat; z-index: 1; pointer-events: none; }
.stat-blue  .ui-stat-badge { background-image: url("/src/assets/badge-blue.png"); }
.stat-amber .ui-stat-badge { background-image: url("/src/assets/badge-amber.png"); }
.stat-green .ui-stat-badge { background-image: url("/src/assets/badge-green.png"); }
/* 文字叠在右侧开阔区，margin-left 避让左侧徽章 */
.ui-stat-body { position: relative; z-index: 1; min-width: 0; margin-left: calc(27% + 30px); padding-right: 14px; }
.ui-stat-label { font-size: 18px; font-weight: 700; color: var(--muted); margin-bottom: 3px; line-height: 1.2; }
.ui-stat-value { font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; letter-spacing: .2px; }
.stat-blue  .ui-stat-value { color: #2355e7; }
.stat-amber .ui-stat-value { color: #f16c05; }
.stat-green .ui-stat-value { color: #2fa23f; }

/* 状态标签 */
.ui-tag { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 6px; font-size: 13px; line-height: 20px; white-space: nowrap; }
.ui-tag.tag-blue { background: var(--accent-soft); color: var(--accent); }
.ui-tag.tag-green { background: var(--ok-soft); color: var(--ok); }
.ui-tag.tag-amber { background: var(--warn-soft); color: var(--warn); }
.ui-tag.tag-purple { background: #f3e8ff; color: #7e22ce; }
.ui-tag.tag-muted { background: var(--void-soft); color: var(--void); }
.ui-tag.tag-danger { background: var(--danger-soft); color: var(--danger); }

/* 段页签(物料查询 在用/已停用 切换;通用 .ui-tabs) */
.ui-tabs { display: inline-flex; align-self: flex-start; gap: 4px; margin: 0; padding: 3px; background: var(--surface-weak); border: 1px solid var(--line); border-radius: 10px; }
.ui-tab { border: none; background: transparent; cursor: pointer; font-size: 14px; color: var(--weak); padding: 6px 20px; border-radius: 7px; transition: background 0.15s ease, color 0.15s ease; }
.ui-tab:hover { color: var(--ink); }
.ui-tab.active { background: #fff; color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.ui-link { color: var(--accent); text-decoration: none; }
.ui-link:hover { text-decoration: underline; }
/* 列表操作列:查看 / 删除 / 查看详情 —— 文字链接样式按钮,无下划线(hover 用淡化反馈) */
.ui-linkbtn { border: none; background: none; cursor: pointer; padding: 0; font: inherit; color: var(--accent); text-decoration: none; }
.ui-linkbtn:hover { text-decoration: none; opacity: 0.75; }
.ui-linkbtn + .ui-linkbtn { margin-left: 14px; }
.ui-linkbtn-danger { color: var(--danger); }

/* 表格卡 + 分页 */
.ui-table-card { padding: 0; overflow: hidden; min-width: 0; }
.ui-table-scroll { width: 100%; }
.ui-table { width: 100%; border-collapse: collapse; font-size: 14px; }
/* §10 表头：极浅底 #FAFBFC、字 --text-weak 13/500、底边 1px */
.ui-table thead th { text-align: left; background: var(--surface-weak); color: var(--weak); font-size: 13px; font-weight: 500; height: 44px; padding: 0 16px; white-space: nowrap; border-bottom: 1px solid var(--line); line-height: 1.35; }
/* §10 行高 52px（收紧）、单元左右 16、行分割线、末行无 */
.ui-table tbody td { height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; line-height: 1.45; }
.ui-table tbody tr:last-child td { border-bottom: none; }
.ui-table tbody tr:hover td { background: var(--surface); }
.cell-amount { font-variant-numeric: tabular-nums; }
.cell-muted { color: var(--muted); }
.ui-table-empty td { height: 108px; text-align: center; color: var(--muted); padding: 28px 16px; font-size: 14px; background: #fff; }
.accounts-table { min-width: 920px; }
.accounts-table .account-actions { white-space: nowrap; }
.ui-resizable-table { table-layout: fixed; }
.ui-resizable-th { position: relative; }
.ui-col-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  z-index: 12;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}
.ui-col-resizer::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 3px;
  width: 1px;
  border-radius: 999px;
  background: transparent;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.ui-col-resizer:hover::after,
.ui-resizable-table.is-column-resizing .ui-col-resizer::after {
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(35, 85, 231, 0.10);
}
.ui-column-resizing {
  cursor: col-resize;
  user-select: none;
}

@media (min-width: 900px) {
  .ui-table-scroll .ui-table > thead > tr > th:first-child,
  .ui-table-scroll .ui-table > tbody > tr > td:first-child:not([colspan]) {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #fff;
    background-clip: padding-box;
    box-shadow: 10px 0 16px rgba(15, 23, 42, 0.05);
  }

  .ui-table-scroll .ui-table > thead > tr > th:first-child {
    z-index: 4;
    background: var(--surface-weak);
  }

  .ui-table-scroll .ui-table > tbody > tr:hover > td:first-child:not([colspan]) {
    background: var(--surface);
  }

  .ui-table-scroll .ui-table > thead > tr > th.ui-action-col,
  .ui-table-scroll .ui-table > tbody > tr > td.ui-action-col:not([colspan]),
  .ui-table-scroll .ui-table > tbody > tr > td[data-label="操作"]:not([colspan]) {
    position: sticky;
    right: 0;
    z-index: 3;
    background: #fff;
    background-clip: padding-box;
    box-shadow: -10px 0 16px rgba(15, 23, 42, 0.06);
  }

  .ui-table-scroll .ui-table > thead > tr > th.ui-action-col {
    z-index: 4;
    background: var(--surface-weak);
  }

  .ui-table-scroll .ui-table > tbody > tr:hover > td.ui-action-col:not([colspan]),
  .ui-table-scroll .ui-table > tbody > tr:hover > td[data-label="操作"]:not([colspan]) {
    background: var(--surface);
  }
}

/* 空状态：用于物料、采购、项目等主工作台列表。视觉是小型数字工位，不依赖额外图片。 */
.ui-empty-card { padding: 0; overflow: hidden; }
.ui-empty-state {
  --empty-accent: var(--accent);
  --empty-soft: var(--accent-soft);
  min-height: 312px;
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding: 34px 38px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 251, 252, 0.98)),
    linear-gradient(90deg, rgba(35, 85, 231, 0.05), rgba(47, 162, 63, 0.04));
}
.empty-purchase { --empty-accent: var(--warn); --empty-soft: var(--warn-soft); }
.empty-project { --empty-accent: var(--ok); --empty-soft: var(--ok-soft); }
.empty-visual {
  position: relative;
  min-height: 224px;
  border-right: 1px solid var(--line-soft);
}
.empty-station {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(220px, 100%);
  height: 174px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.empty-station::before {
  content: "";
  position: absolute;
  inset: 12px 14px auto;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--empty-accent) 24%, var(--line));
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.2)),
    var(--empty-soft);
}
.empty-station::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 24px;
  height: 6px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #c9ced8 0 14px, #eef1f5 14px 24px);
}
.empty-rail {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 72px;
  height: 1px;
  background: var(--line);
}
.empty-screen {
  position: absolute;
  top: 18px;
  left: 24px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #ffffff;
  color: var(--empty-accent);
  box-shadow: 0 1px 4px rgba(31, 35, 41, 0.08);
}
.empty-screen .ui-icon { width: 17px; height: 17px; }
.empty-crate {
  position: absolute;
  width: 46px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--empty-accent) 28%, var(--line));
  border-radius: 6px;
  background: #fff;
}
.empty-crate::before {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 8px;
  height: 1px;
  background: var(--line);
}
.empty-crate-a { left: 34px; bottom: 48px; }
.empty-crate-b { right: 34px; bottom: 58px; opacity: 0.58; }
.empty-belt {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 34px;
  display: flex;
  justify-content: space-between;
}
.empty-belt i {
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--empty-accent) 44%, #dce3ed);
}
.empty-signal {
  position: absolute;
  right: 23px;
  top: 24px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--empty-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--empty-accent) 14%, transparent);
}
.empty-copy { min-width: 0; max-width: 620px; }
.empty-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--empty-accent);
  background: var(--empty-soft);
  border: 1px solid color-mix(in srgb, var(--empty-accent) 18%, var(--line));
  border-radius: 7px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}
.empty-kicker .ui-icon { width: 14px; height: 14px; }
.empty-copy h2 {
  margin: 12px 0 8px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
}
.empty-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.empty-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.empty-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
}
.empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.ui-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.ui-pagination-total { color: var(--muted); font-size: 13px; }
.ui-pagination-pager { display: flex; align-items: center; gap: 6px; }
.ui-page-btn { min-width: 32px; height: 32px; min-height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ui-page-btn .ui-icon { width: 16px; height: 16px; }
.ui-page-btn:hover:not(:disabled):not(.active) { border-color: var(--accent); color: var(--accent); }
.ui-page-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ui-page-btn:disabled { color: var(--weak); cursor: not-allowed; background: var(--void-soft); }
.ui-page-ellipsis { color: var(--weak); padding: 0 2px; }

/* ---------- 移动端（<900px）：表格转卡片，避免横向滚动 ---------- */
@media (max-width: 899px) {
  .ui-page {
    padding: var(--page-gutter-mobile);
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
  .ui-page-header { gap: 10px; }
  .ui-page-actions { width: 100%; justify-content: flex-start; }
  .design-calc-frame-card {
    min-height: calc(100vh - 150px);
    border-radius: 10px;
  }
  .design-calc-frame {
    height: calc(100vh - 150px);
    min-height: 680px;
  }
  .account-form-grid { grid-template-columns: 1fr; }
  .account-modal .entry-modal-head,
  .account-modal .entry-modal-body,
  .account-modal .entry-modal-foot { padding-left: 18px; padding-right: 18px; }
  .account-avatar-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .account-role-picker { grid-template-columns: 1fr; }
  .account-modal .entry-modal-foot { align-items: stretch; }
  .account-foot-note { width: 100%; }
  /* 单列时给统计卡封顶宽度，避免锁定比例后卡片过高（如 768 满宽） */
  .ui-stat-card { max-width: 460px; }
  .records-table thead, .materials-table thead { display: none; }
  .records-table, .records-table tbody, .records-table tr, .records-table td,
  .materials-table, .materials-table tbody, .materials-table tr, .materials-table td { display: block; width: 100%; }
  .records-table tr, .materials-table tr { border-bottom: 1px solid var(--line-soft); padding: 6px 0; }
  .records-table tbody tr:last-child, .materials-table tbody tr:last-child { border-bottom: none; }
  .records-table td, .materials-table td { border: none; padding: 7px 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .records-table td::before, .materials-table td::before { content: attr(data-label); color: var(--muted); font-size: 13px; flex: none; }
  .records-table td.cell-supplier, .materials-table td.cell-supplier { font-weight: 600; }
  .ui-table-empty td { display: block; }
  .ui-table-empty td::before { content: none; }
  .ui-empty-state {
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: 0;
    padding: 24px 18px 26px;
  }
  .empty-visual {
    min-height: 154px;
    border-right: none;
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 10px;
  }
  .empty-station {
    width: 190px;
    height: 136px;
  }
  .empty-rail { top: 60px; }
  .empty-crate-a { left: 30px; bottom: 38px; }
  .empty-crate-b { right: 30px; bottom: 46px; }
  .empty-station::after { bottom: 18px; }
  .empty-belt { bottom: 27px; }
  .empty-copy h2 { font-size: 18px; }
  .empty-actions .ui-button { flex: 1 1 148px; min-width: 0; }
}

/* ---------- 桌面（≥900px）：横排筛选 + 三列统计 + 真表格 ---------- */
@media (min-width: 900px) {
  .ui-filter-card { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 20px; }
  /* 字段不再 flex-grow（不拉长），按内容需要的宽度封顶；列间距加大 */
  .ui-filter-fields { flex-direction: row; flex-wrap: wrap; gap: 14px 32px; flex: 1; }
  .ui-field { flex: 0 1 auto; min-width: 0; }
  .ui-field.ui-field-supplier { flex: 0 1 220px; max-width: 220px; } /* 供应商名称搜索框,压窄一点(约 13 字) */
  .ui-field.ui-field-date { flex: 0 1 322px; max-width: 322px; }     /* 两个日期各 +15px,更宽松 */
  .ui-field.ui-field-status { flex: 0 1 148px; max-width: 148px; }
  .ui-field.ui-field-mcat { flex: 0 1 260px; max-width: 260px; }   /* 物料查询·类别组合框,容下「大类-小类」+ 箭头 */
  .ui-field.ui-field-mspec { flex: 0 1 300px; max-width: 300px; }   /* 物料查询·规格型号筛选框 */
  .ui-date-range { min-width: 0; }
  /* 按钮 38px vs 输入框 44px,底对齐会让按钮中心偏低 3px;上移 3px 使按钮与输入框竖直居中对齐 */
  .ui-filter-actions { align-items: flex-end; flex-wrap: nowrap; flex: 0 0 auto; margin-bottom: 3px; }
  .ui-stat-row { grid-template-columns: repeat(3, 1fr); gap: 16px; }

  /* 表格列宽：width 100% + 固定布局。供应商封顶(≤16 字,超出省略)、操作定宽;
     单据日期/明细数/采购金额/单据状态/创建日期 不设宽 → 在固定布局下平分剩余宽度。 */
  .records-table { width: 100%; table-layout: fixed; }
  .records-table th, .records-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .records-table th:nth-child(1), .records-table td:nth-child(1) { width: 252px; } /* 供应商 ≤16 字 */
  /* 采购金额(元):单元格留原位(hover 背景铺满,不露白线),只把内部 span 左移 20px */
  .records-table th:nth-child(4), .records-table td:nth-child(4) { overflow: visible; }
  .records-table .amt-cell { display: inline-block; transform: translateX(-20px); }
  .records-table th:nth-child(7), .records-table td:nth-child(7) { width: 128px; } /* 操作:放下「查看 + 删除」两个按钮 */
  .records-table tbody td { height: 48px; }  /* 行高略压缩,中间各列在固定布局下随之收紧 */

  /* 物料查询:固定布局 + 横向滚动。左侧初始视图优先保证 9 个主列和操作列可读。 */
  .materials-table { width: 100%; min-width: 1250px; table-layout: fixed; }
  .materials-table th, .materials-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .materials-table thead th, .materials-table tbody td { padding: 0 8px; }
  .materials-table tbody td { height: 64px; }
  .materials-table .cell-price { font-variant-numeric: tabular-nums; }
  .materials-table th:nth-child(1),  .materials-table td:nth-child(1)  { width: 220px; } /* 封面 + 物料名称 */
  .materials-table th:nth-child(2),  .materials-table td:nth-child(2)  { width: 105px; } /* 物料编码 */
  .materials-table th:nth-child(3),  .materials-table td:nth-child(3)  { width: 120px; } /* 规格型号 */
  .materials-table th:nth-child(4),  .materials-table td:nth-child(4)  { width: 100px; } /* 类别 */
  .materials-table th:nth-child(5),  .materials-table td:nth-child(5)  { width: 54px; }  /* 单位 */
  .materials-table th:nth-child(6),  .materials-table td:nth-child(6),
  .materials-table th:nth-child(7),  .materials-table td:nth-child(7),
  .materials-table th:nth-child(8),  .materials-table td:nth-child(8),
  .materials-table th:nth-child(9),  .materials-table td:nth-child(9)  { width: 86px; }  /* 最近/最低/最高/加权 */
  .materials-table th:nth-child(10), .materials-table td:nth-child(10) { width: 70px; }  /* 采购次数 */
  .materials-table th:nth-child(11), .materials-table td:nth-child(11) { width: 105px; } /* 最近采购日期 */
  .materials-table th:nth-child(12), .materials-table td:nth-child(12) { width: 92px; overflow: visible; } /* 操作:查看+编辑两键完整 */
}
@media (min-width: 1440px) {
  .ui-page { max-width: var(--content-max); }
}

/* ---------- 移动端溢出修正（390 无横滚） ---------- */
.ui-filter-fields, .ui-field, .ui-input-wrap, .ui-date-range, .ui-date-range .ui-input-wrap { min-width: 0; }
.ui-input { min-width: 0; }
.ui-table-scroll { overflow-x: auto; }
@media (max-width: 899px) {
  .ui-col-resizer { display: none; }
  .ui-date-range { flex-direction: column; align-items: stretch; gap: 8px; }
  .ui-date-sep { display: none; }
  .ui-filter-actions { flex-wrap: wrap; }
  .ui-filter-actions .ui-button { flex: 1 1 auto; white-space: nowrap; }
  .records-page { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } /* 避让底部 Tab */
  .records-table td.cell-supplier { text-align: right; }
}

/* ---------- 物料采购记录 ---------- */
.mat-purchase-page .ui-page-header { margin-bottom: 18px; }
.mat-purchase-filter { margin-bottom: 14px; }
.mat-purchase-filter-fields { gap: 14px 18px; }
.mat-purchase-field-keyword,
.mat-purchase-field-supplier,
.mat-purchase-field-method,
.mat-purchase-field-date,
.mat-purchase-field-project { min-width: 0; }
.mat-purchase-filter .ui-button { min-height: 44px; }
.mat-purchase-table-scroll { overflow-x: auto; }
.mat-purchase-table {
  width: 100%;
  min-width: 1948px;
  table-layout: fixed;
}
.mat-purchase-table .amt-cell { transform: none; }
.mat-purchase-table th,
.mat-purchase-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mat-purchase-table tbody td { min-height: 48px; }
.mat-purchase-table th:nth-child(1), .mat-purchase-table td:nth-child(1) { width: 136px; }
.mat-purchase-table th:nth-child(2), .mat-purchase-table td:nth-child(2) { width: 168px; }
.mat-purchase-table th:nth-child(3), .mat-purchase-table td:nth-child(3) { width: 128px; }
.mat-purchase-table th:nth-child(4), .mat-purchase-table td:nth-child(4) { width: 176px; }
.mat-purchase-table th:nth-child(5), .mat-purchase-table td:nth-child(5) { width: 72px; text-align: center; }
.mat-purchase-table th:nth-child(6), .mat-purchase-table td:nth-child(6) { width: 92px; }
.mat-purchase-table th:nth-child(7), .mat-purchase-table td:nth-child(7) { width: 90px; }
.mat-purchase-table th:nth-child(8), .mat-purchase-table td:nth-child(8) { width: 106px; }
.mat-purchase-table th:nth-child(9), .mat-purchase-table td:nth-child(9) { width: 124px; }
.mat-purchase-table th:nth-child(10), .mat-purchase-table td:nth-child(10) { width: 98px; }
.mat-purchase-table th:nth-child(11), .mat-purchase-table td:nth-child(11) { width: 136px; }
.mat-purchase-table th:nth-child(12), .mat-purchase-table td:nth-child(12) { width: 210px; }
.mat-purchase-table th:nth-child(13), .mat-purchase-table td:nth-child(13) { width: 156px; }
.mat-purchase-table th:nth-child(14), .mat-purchase-table td:nth-child(14) { width: 200px; }
.mat-purchase-table th:nth-child(15), .mat-purchase-table td:nth-child(15) { width: 92px; overflow: visible; }
.mat-purchase-table th:nth-child(8),
.mat-purchase-table td:nth-child(8),
.mat-purchase-table th:nth-child(9),
.mat-purchase-table td:nth-child(9) {
  text-align: right;
}
.mat-purchase-table.records-table th:nth-child(4),
.mat-purchase-table.records-table td:nth-child(4) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.mat-purchase-table td:nth-child(2),
.mat-purchase-table td:nth-child(3),
.mat-purchase-table td:nth-child(12),
.mat-purchase-table td:nth-child(13),
.mat-purchase-table td:nth-child(14) {
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mat-purchase-table .ui-action-col .ui-linkbtn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (min-width: 900px) {
  .mat-purchase-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 20px;
    row-gap: 0;
  }
  .mat-purchase-filter-fields {
    display: grid;
    grid-template-columns: minmax(260px, 1.05fr) minmax(220px, .9fr) minmax(150px, .5fr) minmax(340px, 1.15fr);
    align-items: end;
    width: 100%;
  }
  .mat-purchase-field-keyword,
  .mat-purchase-field-supplier,
  .mat-purchase-field-method,
  .mat-purchase-field-date,
  .mat-purchase-field-project {
    max-width: none;
  }
  .mat-purchase-field-project {
    grid-column: 1 / span 2;
    max-width: 520px;
  }
  .mat-purchase-filter-actions {
    align-self: end;
    margin-bottom: 3px;
  }
}

@media (min-width: 900px) and (max-width: 1399px) {
  .ui-table-scroll .mat-purchase-table > thead > tr > th.ui-action-col,
  .ui-table-scroll .mat-purchase-table > tbody > tr > td.ui-action-col:not([colspan]),
  .ui-table-scroll .mat-purchase-table > tbody > tr > td[data-label="操作"]:not([colspan]) {
    position: static;
    box-shadow: none;
  }
}

@media (max-width: 899px) {
  .mat-purchase-filter-fields { flex-direction: column; }
  .mat-purchase-field-keyword,
  .mat-purchase-field-supplier,
  .mat-purchase-field-method,
  .mat-purchase-field-date,
  .mat-purchase-field-project {
    width: 100%;
  }
  .mat-purchase-table thead { display: table-header-group; }
  .mat-purchase-table,
  .mat-purchase-table tbody,
  .mat-purchase-table tr,
  .mat-purchase-table td {
    display: revert;
    width: auto;
  }
  .mat-purchase-table tr {
    border-bottom: none;
    padding: 0;
  }
  .mat-purchase-table td {
    display: table-cell;
    border-bottom: 1px solid var(--line-soft);
    padding: 0 10px;
    text-align: left;
  }
  .mat-purchase-table th.ui-action-col,
  .mat-purchase-table td.ui-action-col:not([colspan]) {
    position: sticky;
    right: 0;
    z-index: 3;
    background: #fff;
    background-clip: padding-box;
    box-shadow: -10px 0 16px rgba(15, 23, 42, 0.06);
  }
  .mat-purchase-table thead th.ui-action-col {
    z-index: 4;
    background: var(--surface-weak);
  }
  .mat-purchase-table td::before { content: none; }
}

/* ===== 轻量日期选择器(date-picker.js,替代原生日历弹层) ===== */
.ui-dp-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 34px;
}
.ui-datepicker {
  position: absolute;
  z-index: 300;
  width: 272px;
  padding: 12px 12px 8px;
  background: #fff;
  border: 1px solid var(--line, #e5e9f2);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  font-size: 13px;
}
.ui-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ui-dp-title { color: var(--ink, #101c3d); font-size: 13px; font-weight: 600; }
.ui-dp-nav { display: flex; gap: 2px; }
.ui-dp-btn {
  width: 26px; height: 26px; border: 0; background: transparent; border-radius: 6px;
  color: #5b6779; cursor: pointer; font-size: 14px; line-height: 1;
}
.ui-dp-btn:hover { background: var(--surface-weak, #f4f6fa); color: var(--accent, #2355e7); }
.ui-dp-grid { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; justify-content: center; }
.ui-dp-week { height: 26px; display: flex; align-items: center; justify-content: center; color: #8a94a6; font-size: 12px; }
.ui-dp-day {
  height: 30px; border: 0; background: transparent; border-radius: 6px;
  color: #26334d; cursor: pointer; font-size: 13px; font-variant-numeric: tabular-nums;
}
.ui-dp-day:hover { background: var(--accent-soft, #eef4ff); color: var(--accent, #2355e7); }
.ui-dp-day.is-out { color: #b6bfcd; }
.ui-dp-day.is-today { box-shadow: inset 0 0 0 1px var(--accent, #2355e7); color: var(--accent, #2355e7); }
.ui-dp-day.is-selected { background: var(--accent, #2355e7); color: #fff; }
.ui-dp-foot {
  display: flex; justify-content: space-between; margin-top: 8px;
  padding: 8px 4px 4px; border-top: 1px solid var(--line-soft, #eef1f7);
}
.ui-dp-link { border: 0; background: none; color: var(--accent, #2355e7); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 4px; }
.ui-dp-link:hover { background: var(--accent-soft, #eef4ff); }

/* hidden 属性必须真隐藏:.ui-field 等带 display 的类会盖掉 UA 的 display:none
   (子阶段弹窗卡住原因字段曾因此藏不住) */
[hidden] {
  display: none !important;
}