/* =============================================================================
   终端中台 · 内部工作台设计系统
   视觉与交互基准：Apple HIG（系统字体、大标题层级、分组列表、分段控件、
   半透明材质导航、safe-area、克制动效、中性色板 + 极少量强调色）；
   信息架构与组件层次基准：shadcn/ui（语义令牌 → 组件 → 业务模块 → 响应式）。
   -----------------------------------------------------------------------------
   约定：
   1. 第 1 节是系统中唯一允许出现色值字面量的位置，其余规则只允许引用语义令牌。
   2. 组件层次与 shadcn 对齐：Card = card-header/body/footer，Field = label+control，
      Badge 表达状态，Empty 表达空态，Skeleton 表达加载中，Dialog 表达模态，
      Toast 表达结果反馈；图标统一用 [data-icon]，由组件负责尺寸。
   3. 全部类名沿用既有回归契约，不得删改。
   ========================================================================== */

/* =============================================================================
   1. 设计令牌
   ========================================================================== */

:root {
  /* ---- 1.1 iOS 系统色板（与客户网站共用同一组数值） ----------------------
     对比度：Apple 原值 systemBlue #007aff 上的白字仅 4.02:1、secondaryLabel
     0.6 仅 3.44:1、状态色徽标 3.1–4.4:1，均不达 WCAG AA。此处按「徽标/按钮
     的实际合成背景（tint 叠在 #f2f2f7 上）」反推所需亮度，把交互色与状态色
     统一加深到所有采样点 >= 4.5:1，色相仍属 iOS 系统色族（实测见交付报告 P2）。 */
  --ios-white: #ffffff;
  --ios-blue: #0058bd;
  --ios-blue-pressed: #00479c;
  --ios-teal: #166b60;
  --ios-green: #1b6a2f;
  --ios-green-pressed: #145223;
  --ios-orange: #9a4600;
  --ios-red: #b80012;
  --ios-red-pressed: #92000e;
  --ios-gray: #8e8e93;
  --ios-gray-2: #aeaeb2;
  --ios-gray-3: #c7c7cc;
  --ios-gray-4: #d1d1d6;
  --ios-gray-5: #e5e5ea;
  --ios-gray-6: #f2f2f7;
  --ios-label: #1c1c1e;
  --ios-label-2: rgba(60, 60, 67, 0.78);
  /* 占位符属于「与可见标签重复的提示文本」，保持 iOS 的浅三级灰（见报告 P2 说明） */
  --ios-label-3: rgba(60, 60, 67, 0.3);
  --ios-fill-weak: rgba(120, 120, 128, 0.07);
  --ios-fill: rgba(120, 120, 128, 0.12);
  --ios-fill-2: rgba(120, 120, 128, 0.2);
  --ios-hairline: rgba(60, 60, 67, 0.16);
  --ios-blue-tint: rgba(0, 88, 189, 0.12);
  --ios-green-tint: rgba(27, 106, 47, 0.12);
  --ios-orange-tint: rgba(154, 70, 0, 0.12);
  --ios-red-tint: rgba(184, 0, 18, 0.12);
  --ios-hud: rgba(28, 28, 30, 0.92);
  --shadow-rgb: 0 0 0;
  --skeleton-sheen: rgb(255 255 255 / 55%);

  /* ---- 1.2 语义令牌（组件只用这一层） ------------------------------------ */
  --background: var(--ios-gray-6);
  --foreground: var(--ios-label);
  --card: var(--ios-white);
  --card-foreground: var(--ios-label);
  --popover: var(--ios-white);
  --popover-foreground: var(--ios-label);
  --brand: var(--ios-teal);
  --primary: var(--ios-blue);
  --primary-hover: var(--ios-blue-pressed);
  --primary-foreground: var(--ios-white);
  --primary-soft: var(--ios-blue-tint);
  --primary-soft-border: rgba(0, 88, 189, 0.24);
  --secondary: var(--ios-fill);
  --secondary-foreground: var(--ios-label);
  --muted: var(--ios-fill);
  --muted-foreground: var(--ios-label-2);
  --label-foreground: var(--ios-label-2);
  --accent: var(--ios-fill-2);
  --accent-foreground: var(--ios-label);
  --destructive: var(--ios-red);
  --destructive-hover: var(--ios-red-pressed);
  --destructive-foreground: var(--ios-white);
  --destructive-soft: var(--ios-red-tint);
  --destructive-soft-border: rgba(184, 0, 18, 0.22);
  --success: var(--ios-green);
  --success-soft: var(--ios-green-tint);
  --success-soft-border: rgba(27, 106, 47, 0.22);
  --warning: var(--ios-orange);
  --warning-soft: var(--ios-orange-tint);
  --warning-soft-border: rgba(154, 70, 0, 0.22);
  --info: var(--ios-blue);
  --info-soft: var(--ios-blue-tint);
  --info-soft-border: rgba(0, 88, 189, 0.22);
  --neutral-tone: var(--ios-label-2);
  --border: var(--ios-hairline);
  --border-strong: rgba(60, 60, 67, 0.28);
  --input: transparent;
  --ring: rgba(0, 88, 189, 0.35);
  --ring-destructive: rgba(184, 0, 18, 0.26);
  --overlay: rgba(0, 0, 0, 0.32);
  --focus-ring: rgba(0, 88, 189, 0.3);

  /* 导航材质：半透明亮色 + 模糊，不使用深色侧栏与重渐变 */
  --sidebar: rgba(255, 255, 255, 0.74);
  --sidebar-raised: rgba(255, 255, 255, 0.92);
  --sidebar-active: var(--ios-fill-2);
  --sidebar-hover: var(--ios-fill);
  --sidebar-border: var(--ios-hairline);
  --sidebar-foreground: var(--ios-label-2);
  /* 分组标题靠字重与字距区分层级，不靠低对比色（Apple：用大小与字重表达层级） */
  --sidebar-heading: var(--ios-label-2);
  --sidebar-accent: var(--ios-blue);
  --material-bar: rgba(242, 242, 247, 0.76);

  /* 反馈层：HUD 风格瞬时提示 */
  --toast-background: var(--ios-hud);
  --toast-foreground: var(--ios-white);
  --toast-success-background: var(--ios-hud);
  --toast-error-background: rgba(118, 8, 18, 0.94);

  /* ---- 1.3 圆角 / 阴影 / 排版 / 动效 / 尺寸 ------------------------------ */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-full: 999px;
  --shadow-xs: 0 1px 2px rgb(var(--shadow-rgb) / 5%);
  --shadow-sm: 0 1px 2px rgb(var(--shadow-rgb) / 4%), 0 8px 22px -16px rgb(var(--shadow-rgb) / 18%);
  --shadow-md: 0 2px 8px rgb(var(--shadow-rgb) / 6%), 0 22px 50px -26px rgb(var(--shadow-rgb) / 24%);
  --shadow-lg: 0 28px 72px -24px rgb(var(--shadow-rgb) / 32%);
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", "Segoe UI", "Microsoft YaHei UI", sans-serif;
  --font-mono: "SF Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 19px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --duration-fast: 150ms;
  --duration: 250ms;
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --control-sm: 34px;
  --control: 40px;
  --control-lg: 44px;
  --sidebar-width: 250px;
  --topbar-height: 74px;
  --bottom-nav-height: 64px;

  /* 层叠顺序：全站唯一来源，组件不得再写裸 z-index */
  --layer-skip-link: 90;
  --layer-topbar: 12;
  --layer-sidebar: 20;
  --layer-overlay: 40;
  --layer-dialog: 41;
  --layer-toast: 60;

  color-scheme: light;
}

/* =============================================================================
   2. 基础层
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--foreground);
  background-color: var(--background);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, dl, dd { margin: 0; }

button, input, textarea, select { font: inherit; }
button { color: inherit; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; }

[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.skip-link {
  position: fixed;
  top: -64px;
  left: 16px;
  z-index: var(--layer-skip-link);
  padding: 10px 16px;
  color: var(--primary-foreground);
  background: var(--primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: top var(--duration) var(--ease-out);
}
.skip-link:focus { top: 16px; text-decoration: none; }

.noscript { padding: 24px; color: var(--warning); background: var(--warning-soft); }

.eyebrow {
  color: var(--muted-foreground);
  font-size: var(--text-2xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.08em;
}
.muted { color: var(--muted-foreground); }
.error { color: var(--destructive); font-size: var(--text-base); }
.mono-id { font-family: var(--font-mono); font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.clamp-two {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 图标：组件负责尺寸，标记处不写尺寸类（对齐 shadcn icons 规则） */
[data-icon] { width: 1em; height: 1em; flex: 0 0 auto; }

/* =============================================================================
   3. 布局骨架
   ========================================================================== */

/* ---- 3.1 登录 ---------------------------------------------------------- */
.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--background);
}
.login-panel {
  width: min(400px, 100%);
  display: grid;
  gap: 16px;
  padding: 32px;
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.login-panel h1 { font-size: var(--text-3xl); font-weight: var(--weight-strong); letter-spacing: -0.02em; line-height: var(--leading-tight); }
.login-panel .muted { font-size: var(--text-base); }
.login-footnote {
  padding-top: 14px;
  color: var(--muted-foreground);
  border-top: 1px solid var(--border);
  font-size: var(--text-2xs);
  text-align: center;
}
.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--primary-foreground);
  background: var(--brand);
  border-radius: var(--radius-md);
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
}
.brand-mark.small { width: 34px; height: 34px; border-radius: var(--radius-sm); font-size: var(--text-base); }

/* ---- 3.2 应用骨架 ------------------------------------------------------ */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  /* 侧栏材质底色延伸到整页，避免长页面下导航面只覆盖首屏 */
  background-image: linear-gradient(90deg, var(--sidebar) 0 var(--sidebar-width), transparent var(--sidebar-width));
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: var(--layer-sidebar);
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 12px calc(14px + env(safe-area-inset-bottom));
  color: var(--sidebar-foreground);
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  backdrop-filter: blur(24px) saturate(180%);
}

.brand { display: flex; gap: 10px; align-items: center; padding: 2px 6px 20px; }
.brand-copy { min-width: 0; }
.brand-copy strong,
.brand-copy span { display: block; }
.brand-copy strong { color: var(--foreground); font-size: var(--text-base); font-weight: var(--weight-strong); }
.brand-copy span { color: var(--sidebar-heading); font-size: var(--text-2xs); }

.nav { position: relative; display: grid; gap: 2px; }
/* 滑动高亮块：独立元素承载当前项底色，切页时从旧位置滑到新位置 */
.nav-highlight {
  position: absolute;
  z-index: 0;
  background: var(--sidebar-active);
  border-radius: var(--radius-sm);
  pointer-events: none;
  transition: left 280ms var(--ease-out), top 280ms var(--ease-out), width 280ms var(--ease-out), height 280ms var(--ease-out);
}
.nav-highlight[data-instant="true"] { transition: none; }
.nav-label {
  display: block;
  padding: 0 8px 6px;
  color: var(--sidebar-heading);
  font-size: var(--text-2xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.08em;
}
.nav button {
  position: relative;
  z-index: 1;
  min-height: 36px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0 10px;
  color: var(--sidebar-foreground);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  text-align: left;
  transition: color var(--duration-fast) var(--ease-out);
}
.nav button [data-icon] { width: 17px; height: 17px; color: var(--ios-gray); transition: color var(--duration-fast) var(--ease-out); }
.nav button:hover { color: var(--foreground); background: var(--sidebar-hover); }
.nav button:hover [data-icon] { color: var(--ios-gray); }
/* 当前项底色由 .nav-highlight 承载，按钮自身保持透明以便高亮块滑动 */
.nav button.active {
  color: var(--foreground);
  background: transparent;
  font-weight: var(--weight-medium);
}
.nav button.active [data-icon] { color: var(--sidebar-accent); }
.nav button > span { min-width: 0; display: inline-flex; align-items: center; gap: 8px; }

.nav-count {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  color: var(--primary-foreground);
  background: var(--destructive);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--weight-strong);
  line-height: 1;
}
/* 未读数用 ::after 呈现，避免污染导航按钮的可访问文本 */
.nav-count::after { content: attr(data-count); }

.sidebar-footer {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding: 14px 8px 0;
  border-top: 1px solid var(--sidebar-border);
}
.user-card strong,
.user-card span { display: block; }
.user-card strong { color: var(--foreground); font-size: var(--text-base); font-weight: var(--weight-medium); }
.user-card span { color: var(--muted-foreground); font-size: var(--text-2xs); line-height: 1.5; }
.text-button {
  width: fit-content;
  padding: 6px 0;
  color: var(--destructive);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: var(--text-base);
  text-align: left;
}
.text-button:hover { text-decoration: underline; }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--layer-topbar);
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: calc(12px + env(safe-area-inset-top)) 28px 12px;
  background: var(--material-bar);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(22px) saturate(180%);
}
.topbar-titles { min-width: 0; }
.topbar h1 { margin-top: 2px; font-size: var(--text-2xl); font-weight: var(--weight-strong); line-height: var(--leading-tight); letter-spacing: -0.02em; }
.topbar-meta { display: flex; align-items: center; gap: 10px; }
.topbar-meta .muted { font-size: var(--text-2xs); white-space: nowrap; }
.workspace-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  color: var(--muted-foreground);
  background: var(--ios-fill-weak);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.content {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px 28px 56px;
  outline: none;
}

/* =============================================================================
   4. 组件
   ========================================================================== */

/* ---- 4.1 页面标题区 / 工具条 ------------------------------------------- */
.stack { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

.page-head,
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.page-head h2,
.section-heading h2,
.action-toolbar h2 {
  margin: 4px 0 3px;
  font-size: var(--text-2xl);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}
.page-head p,
.section-heading p,
.action-toolbar p { max-width: 720px; color: var(--muted-foreground); font-size: var(--text-base); }
.page-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.status-summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  color: var(--success);
  background: var(--success-soft);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.status-summary i { width: 6px; height: 6px; background: var(--success); border-radius: var(--radius-full); }

.action-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---- 4.2 Card ---------------------------------------------------------- */
.card {
  min-width: 0;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-header {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}
.card-header h2,
.card-header h3 { font-size: var(--text-lg); font-weight: var(--weight-strong); letter-spacing: -0.01em; line-height: var(--leading-tight); }
.card-header p { margin-top: 2px; color: var(--muted-foreground); font-size: var(--text-base); }
.card-body { padding: 18px; }
.card-body.tight { padding: 0; }
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ---- 4.3 指标卡（Stat） ------------------------------------------------ */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr); gap: 18px; align-items: start; }

.stat {
  min-height: 116px;
  padding: 18px;
}
.stat span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-foreground);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
}
.stat-dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--ios-gray); }
.stat-dot.danger { background: var(--destructive); }
.stat-dot.warning { background: var(--warning); }
.stat-dot.success { background: var(--success); }
.stat-dot.info { background: var(--info); }
.stat strong {
  display: block;
  margin: 9px 0 4px;
  font-size: var(--text-3xl);
  font-weight: var(--weight-strong);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat small { display: block; color: var(--muted-foreground); font-size: var(--text-2xs); }

/* ---- 4.4 Button / Badge ------------------------------------------------ */
.button {
  min-height: var(--control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 16px;
  color: var(--primary);
  background: var(--ios-fill);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.button:hover { background: var(--ios-fill-2); text-decoration: none; }
.button:active { transform: scale(0.97); }
.button:disabled { cursor: not-allowed; opacity: 0.4; }
.button.primary { color: var(--primary-foreground); background: var(--primary); }
.button.primary:hover { background: var(--primary-hover); }
.button.subtle { color: var(--foreground); background: var(--ios-fill); }
.button.subtle:hover { background: var(--ios-fill-2); }
.button.danger { color: var(--destructive-foreground); background: var(--destructive); }
.button.danger:hover { background: var(--destructive-hover); }
.button.danger-ghost { color: var(--destructive); background: var(--destructive-soft); }
.button.danger-ghost:hover { color: var(--destructive-foreground); background: var(--destructive); }
.button.small { min-height: var(--control-sm); padding: 0 12px; border-radius: var(--radius-sm); font-size: var(--text-base); }
.button.wide { width: 100%; }
.button.icon-button {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  color: var(--muted-foreground);
  background: var(--ios-fill);
  border-radius: var(--radius-full);
  font-size: var(--text-lg);
  line-height: 1;
}
.button.icon-button:hover { color: var(--foreground); background: var(--ios-fill-2); }

.badge,
.priority,
.severity,
.comparison-rate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--weight-strong);
  white-space: nowrap;
}
.badge { color: var(--neutral-tone); background: var(--ios-fill); }
.badge.connected,
.badge.active,
.badge.success { color: var(--success); background: var(--success-soft); }
.badge.planned,
.badge.warning { color: var(--warning); background: var(--warning-soft); }
.badge.offline,
.badge.inactive,
.badge.danger { color: var(--destructive); background: var(--destructive-soft); }
.badge.info { color: var(--info); background: var(--info-soft); }

.priority-medium,
.priority-normal,
.severity.minor { color: var(--neutral-tone); background: var(--ios-fill); }
.priority-high,
.severity.medium { color: var(--warning); background: var(--warning-soft); }
.priority-urgent,
.severity.severe { color: var(--destructive); background: var(--destructive-soft); }
.priority-low { color: var(--info); background: var(--info-soft); }

/* ---- 4.5 Field 表单（iOS：填充色输入框 + 聚焦描边） -------------------- */
.field { display: grid; gap: 6px; min-width: 0; }
.field > span,
.field > legend,
.compact-field > span {
  color: var(--label-foreground);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
}
.field small { color: var(--muted-foreground); font-size: var(--text-2xs); }
.field[data-invalid] > span { color: var(--destructive); }
/* Field 错误槽位：data-invalid 标在 Field 上，aria-invalid 标在控件上（shadcn 规则） */
.field-error {
  display: block;
  color: var(--destructive);
  font-size: var(--text-2xs);
  line-height: 1.4;
}
.field-error::before { content: "！"; display: inline-block; margin-right: 4px; font-weight: var(--weight-strong); }
.field[data-disabled] > span { color: var(--muted-foreground); }
.field[data-disabled] input,
.field[data-disabled] select,
.field[data-disabled] textarea { background: var(--ios-fill-weak); color: var(--muted-foreground); }

/* Field 附加说明 / 必填标记 / 折叠区（卡货登记：主字段 + 可选补充信息） */
.field { align-content: start; }
.field-hint { color: var(--muted-foreground); font-size: var(--text-2xs); }
/* 只读展示（如判责时的责任部门：随主责人员自动带出） */
.field-readonly {
  display: block;
  min-height: var(--control);
  padding: 9px 12px;
  color: var(--foreground);
  background: var(--ios-fill-weak);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  line-height: 1.4;
}
.field-readonly[data-department-missing="true"] { color: var(--muted-foreground); }
/* 弹层内即时新建（员工表单里直接新建部门并选中） */
.inline-create {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px;
  background: var(--ios-fill-weak);
  border-radius: var(--radius-md);
}
.inline-create > .field { flex: 1 1 auto; }
.inline-create > .button { flex: 0 0 auto; }
/* 员工未设置部门的提示标记 */
.department-missing { margin-top: 4px; }
.field-required {
  margin-left: 4px;
  color: var(--destructive);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}
.collapse-section {
  margin-top: 14px;
  background: var(--ios-fill-weak);
  border-radius: var(--radius-md);
}
.collapse-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--control);
  padding: 9px 12px;
  color: var(--primary);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  list-style: none;
}
.collapse-section > summary::-webkit-details-marker { display: none; }
.collapse-section > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 1.5px solid var(--muted-foreground);
  border-bottom: 1.5px solid var(--muted-foreground);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--duration-fast) var(--ease-out);
}
.collapse-section[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.collapse-section .collapse-body {
  display: grid;
  gap: 14px;
  padding: 4px 12px 14px;
}

input,
textarea,
select {
  width: 100%;
  min-height: var(--control);
  padding: 9px 12px;
  color: var(--foreground);
  background: var(--ios-fill);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
input::placeholder,
textarea::placeholder { color: var(--ios-label-3); }
input:hover,
textarea:hover,
select:hover { background: var(--ios-fill-2); }
input:focus,
textarea:focus,
select:focus {
  outline: 0;
  background: var(--card);
  border-color: var(--primary);
  box-shadow: 0 0 0 3.5px var(--focus-ring);
}
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 3.5px var(--ring-destructive); }
input[readonly] { color: var(--muted-foreground); background: var(--ios-fill-weak); }
input[disabled],
select[disabled],
textarea[disabled] { color: var(--muted-foreground); background: var(--ios-fill-weak); cursor: not-allowed; }
textarea { min-height: 88px; line-height: 1.5; resize: vertical; }
select {
  appearance: none;
  padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ios-gray) 50%), linear-gradient(135deg, var(--ios-gray) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
input[type="file"] { padding: 8px 12px; font-size: var(--text-base); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

.country-picker { display: grid; gap: 8px; }
.country-picker > legend { margin-bottom: 2px; }
.country-picker > p { color: var(--muted-foreground); font-size: var(--text-2xs); }
.country-picker > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.country-picker label { position: relative; cursor: pointer; }
.country-picker input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; }
.country-picker label > span {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 9px 11px;
  color: var(--foreground);
  background: var(--ios-fill);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.country-picker label > span strong { font-size: var(--text-base); font-weight: var(--weight-medium); }
.country-picker label > span small { color: var(--muted-foreground); font-size: var(--text-2xs); }
.country-picker input:checked + span {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: var(--primary);
}
.country-picker input:focus-visible + span { box-shadow: 0 0 0 3.5px var(--focus-ring); }

/* ---- 4.6 Tabs（分段控件）/ 过滤条 -------------------------------------- */
.tabs {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--ios-fill);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.tabs button {
  min-height: 32px;
  padding: 0 14px;
  color: var(--muted-foreground);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.tabs button:hover { color: var(--foreground); }
.tabs button.active { color: var(--foreground); background: var(--card); font-weight: var(--weight-strong); box-shadow: var(--shadow-xs); }

.filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.compact-field { min-width: 156px; display: grid; gap: 5px; }
.compact-field select,
.compact-field input { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
.care-search { min-width: min(320px, 100%); }
.filter-result { margin-left: auto; align-self: center; color: var(--muted-foreground); font-size: var(--text-2xs); }
/* 当前筛选回显：弱化展示，跨整行，避免与下拉挤在一排 */
.filter-echo {
  width: 100%;
  color: var(--muted-foreground);
  font-size: var(--text-2xs);
}

/* 列表底部分页：共 N 条 + 本页 M 条 + 翻页（移动端按钮撑满，触控 >= 44px） */
.care-pager {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.care-pager-total { color: var(--foreground); font-size: var(--text-2xs); font-weight: var(--weight-medium); }
.care-pager-visible { color: var(--muted-foreground); font-size: var(--text-2xs); }
.care-pager-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.care-pager-status { color: var(--muted-foreground); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- 4.7 Table（列表节奏：发丝分隔线，不使用重边框） ------------------- */
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th {
  padding: 10px 16px;
  color: var(--muted-foreground);
  background: transparent;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  text-align: left;
  white-space: nowrap;
}
td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-md);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--duration-fast) var(--ease-out); }
tbody tr:hover { background: var(--ios-fill-weak); }
.table-wrap { min-width: 0; overflow-x: auto; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.cell-main { display: block; overflow: hidden; font-weight: var(--weight-medium); text-overflow: ellipsis; white-space: nowrap; }
.cell-main.clamp-two,
.cell-main.wrap { white-space: normal; }
.cell-sub { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: var(--text-2xs); line-height: 1.45; }
.ticket-number { overflow: visible; white-space: normal; word-break: break-all; font-variant-numeric: tabular-nums; }
.table-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.numeric { text-align: right; font-variant-numeric: tabular-nums; }

.comparison-table th:not(:first-child),
.comparison-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.comparison-rate.good { color: var(--success); background: var(--success-soft); }
.comparison-rate.risk { color: var(--destructive); background: var(--destructive-soft); }
.comparison-rate.neutral { color: var(--muted-foreground); background: var(--ios-fill); }

/* ---- 4.8 Empty / Skeleton / Loading ------------------------------------ */
/* Empty 只有一套实现：emptyState() → .empty-state（旧 .empty 已随审计页死代码移除） */
.empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 42px 24px;
  color: var(--muted-foreground);
  text-align: center;
}
.empty-state h3 { color: var(--foreground); font-size: var(--text-lg); font-weight: var(--weight-strong); }
.empty-state p { max-width: 380px; font-size: var(--text-base); }
.empty-symbol {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  color: var(--muted-foreground);
  background: var(--ios-fill);
  border-radius: var(--radius-lg);
}
.empty-symbol [data-icon] { width: 22px; height: 22px; }

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--ios-fill);
  border-radius: var(--radius-sm);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--skeleton-sheen), transparent);
  transform: translateX(-100%);
  animation: skeleton-sheen 1.6s var(--ease-out) infinite;
}
.skeleton-line { height: 12px; }
.skeleton-title { width: 42%; height: 18px; }
.skeleton-body { padding: 18px; display: grid; gap: 10px; }
.skeleton-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.skeleton-stat { min-height: 116px; padding: 18px; display: grid; gap: 12px; align-content: start; background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
@keyframes skeleton-sheen { to { transform: translateX(100%); } }

.loading-state,
.error-state {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted-foreground);
  text-align: center;
}
.error-state strong { color: var(--foreground); font-size: var(--text-xl); font-weight: var(--weight-strong); }
.error-state span { max-width: 480px; font-size: var(--text-base); }
.error-state .empty-symbol { color: var(--destructive); background: var(--destructive-soft); }
.loading-dot {
  width: 24px;
  height: 24px;
  border: 3px solid var(--ios-fill-2);
  border-top-color: var(--primary);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}
.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- 4.9 Dialog / Sheet ------------------------------------------------ */
.modal-root:empty,
.toast-root:empty { display: none; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--layer-overlay);
  background: var(--overlay);
  animation: fade-in var(--duration) var(--ease-out);
}
.modal {
  position: fixed;
  z-index: var(--layer-dialog);
  top: 50%;
  left: 50%;
  width: min(660px, calc(100vw - 32px));
  max-height: calc(100dvh - 56px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--popover);
  color: var(--popover-foreground);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -50%);
  animation: dialog-in var(--duration) var(--ease-out);
}
/* 模态内部滚动：标题区固定，内容区滚动，动作区吸底 */
.modal > form { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.modal-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 { margin-top: 3px; font-size: var(--text-xl); font-weight: var(--weight-strong); letter-spacing: -0.01em; }
.modal-header p:not(.eyebrow) { margin-top: 3px; color: var(--muted-foreground); font-size: var(--text-base); }
.modal-body { min-height: 0; padding: 18px 20px; overflow-y: auto; }
.modal-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 18px -20px -18px;
  padding: 13px 20px;
  background: var(--popover);
  border-top: 1px solid var(--border);
}
.modal-root .modal-body > .alert + .modal-actions { margin-top: 18px; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes dialog-in { from { opacity: 0; transform: translate(-50%, -47%) scale(0.99); } }

/* ---- 4.10 Toast（HUD）/ Alert ------------------------------------------ */
.toast-root {
  position: fixed;
  z-index: var(--layer-toast);
  right: 20px;
  bottom: 20px;
  display: grid;
  gap: 10px;
  width: max-content;
  max-width: min(400px, calc(100vw - 32px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 14px;
  color: var(--toast-foreground);
  background: var(--toast-background);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-size: var(--text-base);
  animation: toast-in var(--duration) var(--ease-out);
}
.toast [data-icon] { width: 16px; height: 16px; margin-top: 1px; }
.toast.success { background: var(--toast-success-background); }
.toast.error { background: var(--toast-error-background); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.alert,
.notice-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: var(--radius-lg);
}
.alert strong,
.alert span,
.notice-bar strong,
.notice-bar span { display: block; }
.alert strong,
.notice-bar strong { color: var(--foreground); font-weight: var(--weight-strong); }
.alert span,
.notice-bar span { margin-top: 2px; color: var(--muted-foreground); font-size: var(--text-base); }
.danger-alert,
.alert.danger-alert { color: var(--destructive); background: var(--destructive-soft); }
.danger-alert strong { color: var(--destructive); }
.notice {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
}
.notice.warning { color: var(--warning); background: var(--warning-soft); }

/* ---- 4.11 其它展示组件 -------------------------------------------------- */
.domain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.domain-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: var(--ios-fill-weak);
  border-radius: var(--radius-lg);
}
.domain-card h3 { font-size: var(--text-lg); font-weight: var(--weight-strong); }
.domain-card p { min-height: 42px; color: var(--muted-foreground); font-size: var(--text-base); }
.domain-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted-foreground); font-size: var(--text-2xs); }

.case-context { display: grid; gap: 6px; margin-bottom: 16px; padding: 14px; background: var(--ios-fill-weak); border-radius: var(--radius); }
.case-context strong { font-size: var(--text-lg); font-weight: var(--weight-strong); }
.case-context small { color: var(--muted-foreground); font-size: var(--text-base); }

.notification-list { display: grid; gap: 10px; }
.notification-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  background: var(--ios-fill-weak);
  border-radius: var(--radius);
}
.notification-item.unread { background: var(--primary-soft); }
.notification-item strong { font-size: var(--text-base); font-weight: var(--weight-strong); }
.notification-item p { margin: 3px 0; color: var(--muted-foreground); font-size: var(--text-base); }
.notification-item small { color: var(--muted-foreground); font-size: var(--text-2xs); }

/* ---- 4.12 图表 --------------------------------------------------------- */
.cockpit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cockpit-chart { min-width: 0; min-height: 232px; }
.chart-list { display: grid; align-content: start; gap: 12px; padding: 18px; }
.chart-list .empty-state { padding: 26px 12px; gap: 6px; }
.chart-list .empty-symbol { width: 36px; height: 36px; }
.chart-row { display: grid; grid-template-columns: minmax(96px, 1fr) minmax(90px, 1.8fr) 34px; gap: 10px; align-items: center; }
.chart-row > span { overflow: hidden; font-size: var(--text-base); font-weight: var(--weight-medium); text-overflow: ellipsis; white-space: nowrap; }
.chart-row > div { height: 8px; overflow: hidden; background: var(--ios-fill); border-radius: var(--radius-full); }
.chart-row > div i { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
.chart-row > strong { font-size: var(--text-base); text-align: right; font-variant-numeric: tabular-nums; }
.chart-row > small { grid-column: 2 / -1; margin-top: -8px; color: var(--muted-foreground); font-size: var(--text-2xs); }
/* 仓库人员异常排行：姓名 + 仓库堆叠，条色沿用主色，数量右对齐 */
.staff-ranking-row > span { display: grid; gap: 1px; white-space: normal; }
.staff-ranking-row > span small { color: var(--muted-foreground); font-size: var(--text-2xs); font-weight: var(--weight-normal); }
.staff-ranking-chart .chart-list { gap: 14px; }
.staff-ranking-total { text-align: right; }
.staff-ranking-chart .empty-state { padding: 26px 12px; }
.chart-legend { display: flex; gap: 12px; color: var(--muted-foreground); font-size: var(--text-2xs); }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { width: 8px; height: 8px; border-radius: 2px; }
.ticket-bar, .ticket-dot { background: var(--ios-blue); }
.incident-bar, .incident-dot { background: var(--ios-orange); }
.pickup-bar, .pickup-dot { background: var(--ios-green); }

.cockpit-trend { min-height: 320px; }
.trend-bars {
  height: 250px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  padding: 22px 20px 14px;
}
.trend-month { height: 100%; min-width: 0; display: grid; grid-template-rows: 1fr auto; gap: 8px; align-items: end; text-align: center; }
.trend-columns { height: 100%; display: flex; gap: 3px; align-items: end; justify-content: center; border-bottom: 1px solid var(--border); }
.trend-columns i { width: min(16px, 40%); min-height: 0; border-radius: 3px 3px 0 0; }
.trend-month > span { color: var(--muted-foreground); font-size: var(--text-2xs); }

/* ---- 4.13 指标对比 ----------------------------------------------------- */
.comparison-card { overflow: hidden; }
.dashboard-metric-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dashboard-metric-grid .stat { min-height: 118px; padding: 16px; }
.dashboard-metric-grid .stat strong { font-size: var(--text-2xl); }
.dashboard-metric-grid .stat small { line-height: 1.4; }

/* 指标卡下钻（task-40）：可点击/可聚焦，hover 有反馈，移动端可点区 >= 44px */
.stat-drill {
  position: relative;
  display: block;
  width: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.stat-drill:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.stat-drill:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.stat-drill-hint { display: block; margin-top: 6px; color: var(--primary); font-size: var(--text-2xs); opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); }
.stat-drill:hover .stat-drill-hint, .stat-drill:focus-visible .stat-drill-hint { opacity: 1; }
.drill-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--primary-soft);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.drill-source-text { color: var(--foreground); font-size: var(--text-base); font-weight: var(--weight-medium); }

/* 卡货全员确认：阶段进度 + 未确认名单（悬浮与展开都能看到） */
.pickup-stage { white-space: nowrap; }
.pickup-follower { font-weight: var(--weight-medium); }
.confirm-progress {
  display: block;
  margin-top: 4px;
  color: var(--ios-orange);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
}
.confirm-progress.done { color: var(--ios-green); }
.confirm-all { display: block; margin-top: 4px; }
.confirm-pending { margin-top: 4px; font-size: var(--text-2xs); }
.confirm-pending summary { color: var(--muted-foreground); cursor: pointer; min-height: 24px; }
.confirm-pending ul { margin: 4px 0 0; padding-left: 16px; color: var(--muted-foreground); }
.confirm-pending li { line-height: 1.6; }
.pickup-confirm[disabled] { color: var(--muted-foreground); background: var(--ios-fill); opacity: 1; }

/* ---- 4.13b 图表时间范围选择器（卡片标题右侧） -------------------------- */
.chart-header { flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.chart-range { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.chart-range-label { color: var(--muted-foreground); font-size: var(--text-2xs); }
.chart-range select {
  min-height: 32px;
  max-width: 150px;
  padding: 0 26px 0 10px;
  color: var(--foreground);
  background: var(--ios-fill-weak);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}
.chart-range-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-left: auto; }
.chart-range-current { color: var(--muted-foreground); font-size: var(--text-2xs); }
.chart-range-note { color: var(--ios-orange); font-size: var(--text-2xs); text-align: right; }

/* ---- 4.14 命令面板（Ctrl+K / ⌘K） -------------------------------------- */
.command-trigger { gap: 8px; }
.command-kbd {
  padding: 2px 6px;
  color: var(--muted-foreground);
  background: var(--ios-fill);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}
.command-root { position: fixed; inset: 0; z-index: var(--layer-dialog); display: grid; justify-items: center; align-items: start; padding: min(14vh, 120px) 16px 16px; }
.command-backdrop { position: fixed; inset: 0; z-index: var(--layer-overlay); background: var(--overlay); backdrop-filter: blur(6px); animation: fade-in var(--duration-fast) var(--ease-out); }
.command-panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(70dvh, 560px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--popover);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  animation: command-in var(--duration) var(--ease-out);
}
@keyframes command-in { from { opacity: 0; transform: translateY(-8px) scale(0.99); } }
.command-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.command-glass { color: var(--muted-foreground); font-size: var(--text-lg); }
.command-input { flex: 1 1 auto; min-height: 32px; padding: 0; background: transparent; border: 0; font-size: var(--text-lg); }
.command-input:focus { outline: 0; background: transparent; border-color: transparent; box-shadow: none; }
.command-list { flex: 1 1 auto; margin: 0; padding: 8px; overflow-y: auto; list-style: none; }
.command-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-md);
}
.command-option.active { background: var(--primary-soft); }
.command-option-label mark { color: var(--primary); background: transparent; font-weight: var(--weight-strong); }
.command-option-hint { color: var(--muted-foreground); font-size: var(--text-2xs); }
.command-empty { padding: 22px 16px; color: var(--muted-foreground); font-size: var(--text-base); text-align: center; }
.command-footer {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  padding: 10px 16px;
  color: var(--muted-foreground);
  border-top: 1px solid var(--border);
  font-size: var(--text-2xs);
}

/* =============================================================================
   5. 响应式
   ========================================================================== */

@media (max-width: 1240px) {
  .dashboard-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2,
  .cockpit-grid { grid-template-columns: minmax(0, 1fr); }
  .domain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content { padding-inline: 22px; }
  .topbar { padding-inline: 22px; }
}

/* 移动端：底部标签栏 + 分组卡片列表 + 底部 sheet */
@media (max-width: 860px) {
  .app-shell {
    display: block;
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    background-image: none;
  }

  .sidebar {
    position: fixed;
    z-index: var(--layer-sidebar);
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    display: block;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--sidebar-raised);
    border-right: 0;
    border-top: 1px solid var(--sidebar-border);
  }
  .brand,
  .sidebar-footer,
  .nav-label { display: none; }
  .nav { height: 52px; display: flex; align-items: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav button {
    min-width: 74px;
    min-height: 52px;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 4px 6px;
    border-radius: var(--radius-md);
    font-size: var(--text-2xs);
    text-align: center;
  }
  .nav button [data-icon] { width: 20px; height: 20px; }
  .nav button > span { flex-direction: column; gap: 3px; }

  .topbar { min-height: 64px; padding: 10px 16px; }
  .topbar h1 { font-size: var(--text-xl); }
  .content { padding: 16px 16px 28px; }
  .stack { gap: 14px; }

  .page-head,
  .section-heading,
  .action-toolbar { align-items: flex-start; flex-direction: column; gap: 12px; }
  .page-head h2,
  .section-heading h2,
  .action-toolbar h2 { font-size: var(--text-xl); }
  .page-head-actions,
  .action-toolbar > .button,
  .action-toolbar > .table-actions { width: 100%; }
  .page-head-actions .button { flex: 1 1 auto; }

  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dashboard-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { min-height: 108px; padding: 15px; }
  .stat strong,
  .dashboard-metric-grid .stat strong { font-size: var(--text-xl); }
  .domain-grid { grid-template-columns: minmax(0, 1fr); }

  .card-header { flex-wrap: wrap; padding: 14px 15px; }
  .card-body { padding: 15px; }
  .filter-bar { align-items: stretch; padding: 14px 15px; }
  .compact-field,
  .care-search { min-width: calc(50% - 6px); flex: 1 1 calc(50% - 6px); }
  .care-search { flex-basis: 100%; min-width: 100%; }
  .filter-result { width: 100%; margin-left: 0; align-self: flex-start; }

  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .full { grid-column: auto; }
  .country-picker > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* P1 触控目标：移动端一律 >= 44px（iOS HIG）。
     桌面端密度由 .compact-field 的 36px 与 .button.small 的 34px 保留，
     这里用同特异性 + 媒体查询覆盖，避免桌面被放大。 */
  input, textarea, select, .button { min-height: var(--control-lg); }
  .compact-field select,
  .compact-field input { min-height: var(--control-lg); }
  .button.small { min-height: var(--control-lg); }
  .button.icon-button { min-width: var(--control-lg); min-height: var(--control-lg); }
  .tabs { width: 100%; }
  .tabs button { flex: 1 1 auto; min-height: var(--control-lg); }

  /* 分组列表：保持 <table> 语义，仅改变呈现 */
  .responsive-table { display: block; }
  .responsive-table colgroup,
  .responsive-table thead { display: none; }
  .responsive-table tbody { display: block; padding: 10px; }
  .responsive-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 10px;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--ios-hairline);
    border-radius: var(--radius-md);
  }
  .responsive-table tbody tr:last-child { margin-bottom: 0; }
  .responsive-table td {
    min-width: 0;
    display: block;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-base);
  }
  .responsive-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--muted-foreground);
    font-size: var(--text-2xs);
    font-weight: var(--weight-normal);
  }
  .responsive-table td:first-child,
  .responsive-table td:last-child,
  .responsive-table td[data-span="full"] { grid-column: 1 / -1; }
  .responsive-table td:last-child { border-bottom: 0; }
  .responsive-table .cell-main { white-space: normal; }
  .responsive-table .table-actions { width: 100%; }
  .responsive-table .table-actions .button { flex: 1 1 auto; }
  .table-wrap { overflow: visible; }

  .comparison-table { min-width: 0; }
  .comparison-table td:not(:first-child) { text-align: left; }

  .modal {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: calc(92dvh - env(safe-area-inset-bottom));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: none;
    animation: sheet-in var(--duration) var(--ease-out);
  }
  .modal::before {
    content: "";
    display: block;
    width: 36px;
    height: 5px;
    margin: 8px auto 0;
    background: var(--ios-gray-3);
    border-radius: var(--radius-full);
  }
  .modal-header { padding-top: 10px; }
  .modal-body { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .modal-actions { margin-bottom: calc(-14px - env(safe-area-inset-bottom)); padding-bottom: calc(13px + env(safe-area-inset-bottom)); }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(16px); } }

  .toast-root { right: 12px; bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 12px); left: 12px; width: auto; max-width: none; }
  .care-pager { justify-content: center; }
  .care-pager-actions { flex: 1 1 100%; margin-left: 0; justify-content: space-between; }
  .care-pager-actions .button { flex: 1 1 auto; }
  .command-root { padding: 12px; }
  .command-panel { max-height: calc(88dvh - env(safe-area-inset-bottom)); }
  .command-trigger span { display: none; }
  .command-trigger .command-kbd { font-size: var(--text-xs); }
  .chart-header { align-items: center; }
  .chart-range { order: 3; flex: 1 1 100%; justify-content: space-between; }
  .chart-range select { min-height: 44px; max-width: none; flex: 1 1 auto; }
  .chart-range-meta { order: 2; margin-left: 0; }
  .notification-item { align-items: flex-start; flex-direction: column; }
  .trend-bars { gap: 3px; padding: 18px 12px 12px; }
  .trend-columns { gap: 2px; }
  .trend-columns i { width: min(10px, 60%); }
  .trend-month:nth-child(even) > span { visibility: hidden; }
}

@media (max-width: 430px) {
  .topbar-meta #last-sync { display: none; }
}

/* =============================================================================
   财务中心（38b）：毛利测算与成本/售价项目
   ========================================================================== */
.finance-calc-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.finance-calc-column { display: flex; flex-direction: column; gap: 8px; }
.finance-calc-column h3 { margin: 0 0 2px; font-size: 15px; font-weight: 600; }
.finance-calc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 96px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.finance-calc-row:hover { border-color: var(--border-strong); }
.finance-calc-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; }
.finance-calc-row input[type="number"] { width: 100%; min-height: var(--control-sm); text-align: right; }
.finance-calc-name { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.finance-calc-name strong { font-weight: 600; font-size: 14px; }
.finance-calc-name small { color: var(--muted-foreground); font-size: 12px; overflow-wrap: anywhere; }
.finance-calc-summary { margin-bottom: 12px; }
.finance-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.finance-lines-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.finance-line-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 96px auto; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.finance-line-row select,
.finance-line-row input[type="number"] { min-height: var(--control-sm); }
.finance-tier-row { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: center; gap: 8px; }
.finance-tier-row input { min-height: var(--control-sm); }
.finance-item-hint { margin: 10px 2px 0; font-size: 12px; }
.finance-item-table .tab-count,
.finance-calc-column .tab-count { color: var(--muted-foreground); font-weight: 500; margin-left: 4px; }

/* N05：明细快照单价 + 变更前后差异 + 单据常用标签 */
.finance-line-row { grid-template-columns: auto minmax(0, 1fr) 96px auto auto auto; }
.finance-line-price { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
.finance-line-price[data-line-price]:not(.muted) { color: var(--foreground); font-variant-numeric: tabular-nums; }
.finance-line-diff { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--card); display: flex; flex-direction: column; gap: 8px; }
.finance-line-diff .finance-lines-head { justify-content: flex-start; gap: 10px; }
.finance-diff-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.finance-diff-confirmed { margin: 0; font-size: 12px; color: var(--success, #15803d); }
.finance-rate-value { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.finance-fund-badge { white-space: nowrap; }
.finance-draft-card { border-color: var(--border-strong); }
.finance-draft-grid { margin-bottom: 10px; }
.finance-adjustment-card,
.finance-payment-card,
.finance-currency-card { margin-top: 16px; }
.finance-diff-table td[data-label="差额"],
.finance-currency-table td,
.finance-adjustment-table td,
.finance-payment-table td { font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .finance-calc-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "check name" "qty qty"; row-gap: 8px; }
  .finance-calc-row input[type="checkbox"] { grid-area: check; }
  .finance-calc-name { grid-area: name; }
  .finance-calc-row input[type="number"] { grid-area: qty; min-height: var(--control-lg); }
  .finance-item-table .table-actions .button { min-height: var(--control-lg); }
  .finance-line-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .finance-line-row .badge { grid-column: 1 / -1; }
  .finance-line-row select,
  .finance-line-row input[type="number"] { min-height: var(--control-lg); }
  .finance-line-row .finance-line-price { grid-column: 1 / -1; }
  .finance-tier-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .finance-tier-row input { min-height: var(--control-lg); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* =============================================================================
   U01 统一圆润控件与低饱和配色（批次 C · 第一步）
   -----------------------------------------------------------------------------
   · 控件圆角：选择容器 12px、选项 8px、按钮 10px、状态标签胶囊；
   · 一律不裁切文字做圆角（用 min-height + 内边距，不用 overflow:hidden 造假圆角）；
   · 低饱和语义色：主操作蓝 / 处理中浅蓝 / 待复核·待确认浅橙 / 完成浅绿 /
     无责与普通等级中性灰；红色只用于严重异常、失败与危险操作。
   ========================================================================== */

:root {
  --ui-control-radius: 12px;
  --ui-option-radius: 8px;
  --ui-button-radius: 10px;
  --ui-select-surface: var(--card);
  --ui-option-hover: var(--ios-fill-2);
  --ui-option-selected: var(--info-soft);
  --ui-option-selected-border: var(--info-soft-border);
  --ui-neutral-soft: var(--ios-fill);
}

/* ---- 共用选择组件 ---------------------------------------------------------- */
.select { position: relative; display: block; width: 100%; }
.select-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  /* 视觉与交互交给触发器；原生控件仅保留取值、校验与表单提交能力 */
  pointer-events: none;
}
.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: var(--control, 38px);
  padding: 8px 12px;
  color: var(--foreground);
  font: inherit;
  text-align: left;
  background: var(--ui-select-surface);
  border: 1px solid var(--border);
  border-radius: var(--ui-control-radius);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.select-trigger:hover { background: var(--ios-fill-weak); }
.select-trigger:focus-visible,
.select.is-open .select-trigger {
  outline: 0;
  border-color: var(--primary);
  box-shadow: 0 0 0 3.5px var(--focus-ring);
}
.select-trigger[aria-invalid="true"],
.select[data-invalid] .select-trigger { border-color: var(--destructive); box-shadow: 0 0 0 3.5px var(--ring-destructive); }
.select-trigger[disabled],
.select-trigger[aria-disabled="true"] { color: var(--muted-foreground); background: var(--ios-fill-weak); cursor: not-allowed; }
.select-value {
  flex: 1 1 auto;
  min-width: 0;
  /* 完整值：允许换行完整展示，不做省略号裁切 */
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.select-trigger.is-empty .select-value { color: var(--ios-label-3); }
.select-caret {
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-right: 1.5px solid var(--muted-foreground);
  border-bottom: 1.5px solid var(--muted-foreground);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--duration-fast) var(--ease-out);
}
.select.is-open .select-caret { transform: rotate(-135deg) translateY(-2px); }
.select-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 280px;
  padding: 6px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--ui-control-radius);
  box-shadow: var(--shadow-md);
}
/* Popup width follows its content, independently of a compact trigger. */
.select > .select-menu {
  right: auto;
  width: max-content;
  min-width: min(100%, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
}
.select-menu[hidden] { display: none; }
.select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--control-sm, 32px);
  padding: 8px 10px;
  border-radius: var(--ui-option-radius);
  cursor: pointer;
  /* 不再使用整行深灰方形选中条：状态只用浅蓝底 + 勾选表达 */
}
.select-option:hover,
.select-option.is-active { background: var(--ui-option-hover); }
.select-option[aria-selected="true"] {
  color: var(--info);
  background: var(--ui-option-selected);
  box-shadow: inset 0 0 0 1px var(--ui-option-selected-border);
}
.select-option[aria-disabled="true"] { color: var(--muted-foreground); cursor: not-allowed; }
.select-option .select-label { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.select-check { flex: none; width: 14px; color: var(--info); font-size: 12px; line-height: 1; }
.select-option[aria-selected="true"] .select-check::before { content: "✓"; }
.select-option:not([aria-selected="true"]) .select-check::before { content: ""; }

/* 卡片内的小号筛选控件：触发器跟随紧凑尺寸 */
.compact-field .select-trigger { min-height: var(--control-sm, 32px); padding: 6px 10px; }
.chart-range .select { width: auto; min-width: 140px; flex: 1 1 auto; }
.chart-range .select-trigger { min-height: var(--control-lg, 44px); }

/* ---- 圆角与胶囊：按钮 / 标签 / 字段 --------------------------------------- */
.button { border-radius: var(--ui-button-radius); }
.badge,
.status-badge,
.priority,
.severity { border-radius: var(--radius-full); }
.tab-count { border-radius: var(--radius-full); }

/* ---- 低饱和语义色 ---------------------------------------------------------- */
.badge.neutral { color: var(--muted-foreground); background: var(--ui-neutral-soft); }
.badge.info,
.badge.processing { color: var(--info); background: var(--info-soft); }
.badge.warning,
.badge.pending { color: var(--warning); background: var(--warning-soft); }
.badge.connected,
.badge.success,
.badge.done { color: var(--success); background: var(--success-soft); }
.badge.offline,
.badge.danger,
.badge.destructive { color: var(--destructive); background: var(--destructive-soft); }

/* 严重度：普通等级中性灰，只有严重异常才用红色 */
.severity { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; font-size: var(--text-xs); background: var(--ui-neutral-soft); color: var(--muted-foreground); }
.severity.severe { color: var(--destructive); background: var(--destructive-soft); }
.severity.medium { color: var(--warning); background: var(--warning-soft); }
.severity.minor { color: var(--muted-foreground); background: var(--ui-neutral-soft); }

/* 优先级：列表里只对高 / 紧急显示，且以文字为主 */
.priority { display: inline-flex; align-items: center; padding: 1px 10px; font-size: var(--text-xs); background: var(--ui-neutral-soft); color: var(--muted-foreground); }
.priority-high { color: var(--warning); background: var(--warning-soft); }
.priority-urgent { color: var(--destructive); background: var(--destructive-soft); }
.priority-medium,
.priority-normal,
.priority-low { color: var(--muted-foreground); background: var(--ui-neutral-soft); }

/* =============================================================================
   U02 详情抽屉 + U03 精简列表
   ========================================================================== */

/* 行主体可点开详情：只做轻提示，不改变表格结构 */
.row-open { cursor: pointer; }
tr[data-row-open]:hover .cell-main { color: var(--primary); }
.cell-number { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.cell-number .mono-id { white-space: normal; overflow-wrap: anywhere; }
.copy-id {
  flex: none;
  padding: 2px 8px;
  color: var(--muted-foreground);
  font-size: var(--text-2xs);
  background: var(--ui-neutral-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.copy-id:hover { color: var(--primary); border-color: var(--primary); }
.copy-id.is-done { color: var(--success); border-color: var(--success); }

/* 抽屉：右侧滑入的统一详情容器（复用弹层根节点与焦点陷阱） */
.modal.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(560px, 100%);
  max-height: 100%;
  height: 100%;
  margin: 0;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  display: flex;
  flex-direction: column;
  animation: drawer-in var(--duration-base, 220ms) var(--ease-out);
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.drawer .modal-header { flex: none; }
.drawer .drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.drawer .drawer-footer { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--card); }
.drawer-section { display: flex; flex-direction: column; gap: 10px; }
.drawer-section > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drawer-section > header h3 { margin: 0; font-size: var(--text-md); font-weight: var(--weight-strong); }
.drawer-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.drawer-meta > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drawer-meta dt { color: var(--muted-foreground); font-size: var(--text-xs); }
.drawer-meta dd { margin: 0; font-size: var(--text-base); overflow-wrap: anywhere; }
.drawer-timeline { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.drawer-timeline li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; }
.drawer-timeline .dot { width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: var(--ui-neutral-soft); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.drawer-timeline .done .dot { background: var(--success); box-shadow: none; }
.drawer-timeline .current .dot { background: var(--info); box-shadow: none; }
.drawer-timeline strong { display: block; font-size: var(--text-base); font-weight: var(--weight-medium); }
.drawer-timeline small { color: var(--muted-foreground); }
.drawer-more { display: flex; flex-wrap: wrap; gap: 8px; }
/* U06：责任结论变更（挂在「处理记录」区内的历史快照块，抽屉仍固定两区） */
.drawer-history { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.drawer-history h4 { margin: 0; font-size: var(--text-base); font-weight: var(--weight-strong); }
.drawer-readonly-note { color: var(--muted-foreground); font-size: var(--text-xs); }

@media (max-width: 860px) {
  .modal.drawer { width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0; top: 8vh; height: 92vh; }
  .drawer-meta { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   公开投诉端（/complaint）说明
   -----------------------------------------------------------------------------
   /complaint 与 styles.css 共用，但视觉实现全部在 complaint.css（自带的
   --public-* 令牌与组件规则）；styles.css 不再保留任何 .public-* 规则，
   只提供全局基础层（字体、盒模型、body 背景、焦点环）。
   ========================================================================== */


/* v0.8.3: local record actions, preserving the existing visual system. */
.nav-highlight { transition-timing-function: cubic-bezier(.22, 1.08, .36, 1); }
.drawer-action-frame > .modal-header { gap: 10px; }
.drawer-back { flex: none; min-height: 44px; }
.drawer-action-content { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; animation: record-action-in 180ms cubic-bezier(.2,.8,.2,1); }
.drawer-action-content .modal-body { padding: 20px 16px; }
.drawer-action-content .drawer-footer { position: sticky; bottom: 0; }
.record-more-menu { position: fixed; width: min(208px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto; z-index: 1500; animation: record-menu-in 150ms cubic-bezier(.2,.8,.2,1); transform-origin: top right; }
.record-more-menu[data-direction="up"] { transform-origin: bottom right; }
.record-more-menu { display: grid; gap: 4px; }
.record-more-menu .select-option {
  appearance: none;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: var(--ui-option-radius);
  padding: 10px 12px;
  font: inherit;
  line-height: 1.4;
  text-align: left;
  color: var(--foreground);
  background: var(--ios-fill-weak);
  transition: background var(--duration-fast) var(--ease-out);
}
.record-more-menu .select-option:hover,
.record-more-menu .select-option:focus-visible { background: var(--ui-option-hover); }
.record-more-menu .select-option:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
@keyframes record-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes record-action-in { from { opacity: .4; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .modal.drawer { top: auto; bottom: 0; height: 92dvh; max-height: 92dvh; padding-bottom: env(safe-area-inset-bottom); }
  .drawer-action-frame .modal-header h2 { font-size: var(--text-lg); overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .record-more-menu, .drawer-action-content { animation: none; }
  .nav-highlight { transition: none; }
}

/* Drawer must not inherit the centered dialog transform after its entrance animation. */
.modal.drawer { transform: none; }

.page-head-tools { justify-content: flex-end; }

/* Short labels stay on one line; informational toasts do not block workflow controls. */
.chart-range-label { white-space: nowrap; flex-shrink: 0; }
.toast-root, .toast { pointer-events: none; }

/* Corporate identity only at entry points and the sidebar. */
.company-lockup { display: block; width: 100%; height: auto; }
.company-icon { position: relative; display: block; width: 36px; height: 36px; flex: none; overflow: hidden; background: #fff; border-radius: 8px; }
.company-icon img { position: absolute; width: 490px; height: 91px; max-width: none; left: -3px; top: -15px; }

/* 2026-10-12 · Internal workbench polish. Customer registration and business rules are unchanged. */
#app { --workbench-surface: var(--ios-fill-weak); --workbench-line: color-mix(in srgb, var(--border) 65%, transparent); }
#app .sidebar { padding-inline:16px; }
#app .brand { padding-bottom:26px; }
#app .nav { gap:5px; }
#app .nav button { min-height:44px; border-radius:12px; padding-inline:12px; }
#app .nav-highlight { border-radius:12px; background:var(--primary-soft); }
#app .nav button.active { color:var(--primary); font-weight:600; }
#app .sidebar-footer { border-top-color:var(--workbench-line); }
#app .topbar { border-bottom-color:var(--workbench-line); }
#app .topbar h1 { font-size:24px; letter-spacing:-.03em; }
#app .workspace-chip { background:var(--card); border:1px solid var(--workbench-line); }
#app .stack { gap:20px; }
#app .card { border:1px solid var(--workbench-line); box-shadow:0 2px 6px rgb(var(--shadow-rgb) / 2%); border-radius:18px; }
#app .card-header { min-height:58px; padding:16px 20px; border-bottom-color:var(--workbench-line); }
#app .card-header h2,#app .card-header h3 { font-size:16px; }
#app .card-body:not(.tight) { padding:20px; }
#app .metric-grid { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:0; background:var(--card); border:1px solid var(--workbench-line); border-radius:18px; padding:8px 0; }
#app .metric-grid > .stat { border:0; border-inline-start:1px solid var(--workbench-line); border-radius:0; box-shadow:none; min-height:100px; padding:14px 20px; background:transparent; }
#app .metric-grid > .stat:first-child { border-inline-start:0; }
#app .metric-grid .stat strong { font-size:28px; margin-block:10px 6px; letter-spacing:-.03em; }
#app .metric-grid .stat small { line-height:1.55; }
#app .metric-grid .stat-drill { text-align:left; isolation:isolate; transform:none; transition:none; }
#app .metric-grid .stat-drill:hover,#app .metric-grid .stat-drill:active { transform:none; background:transparent; box-shadow:none; }
#app .metric-grid .stat-drill::before { content:""; position:absolute; inset:6px; z-index:-1; pointer-events:none; border-radius:12px; background:var(--workbench-surface); opacity:0; transition:opacity 180ms cubic-bezier(.2,.7,.3,1); }
#app .metric-grid .stat-drill .stat-drill-hint { opacity:0; transition:opacity 180ms ease; }
#app .metric-grid .stat-drill:focus-visible { outline:none; }
#app .metric-grid .stat-drill:focus-visible::before { opacity:1; outline:2px solid var(--primary); outline-offset:-2px; }
#app .metric-grid .stat-drill:focus-visible .stat-drill-hint { opacity:1; }
@media(hover:hover) and (pointer:fine) { #app .metric-grid .stat-drill:hover::before,#app .metric-grid .stat-drill:hover .stat-drill-hint { opacity:1; } }
#app .metric-grid .stat-drill:active::before { opacity:1; background:var(--primary-soft); }
@media(prefers-reduced-motion:reduce) { #app .metric-grid .stat-drill::before,#app .metric-grid .stat-drill .stat-drill-hint { transition:none !important; } }
#app .finance-metric-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
#app .toolbar { gap:14px; }
#app .tabs { background:var(--workbench-surface); border:1px solid var(--workbench-line); padding:4px; gap:3px; border-radius:13px; }
#app .tabs button { border-radius:9px; min-height:36px; padding:8px 14px; transition:background 160ms ease,color 160ms ease; }
#app .tabs button.active { color:var(--primary); box-shadow:0 1px 4px rgb(var(--shadow-rgb) / 6%); }
#app .filter-bar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px 12px; padding:18px 20px; background:var(--workbench-surface); border-bottom-color:var(--workbench-line); }
#app .filter-bar .compact-field { min-width:0; gap:7px; }
#app .filter-bar .care-search { grid-column:span 2; min-width:0; }
#app .filter-bar .compact-field :is(input,select,.select-trigger) { min-height:42px; }
#app .filter-bar :is(.filter-echo,.filter-result) { grid-column:1/-1; margin:0; font-size:12px; }
#app .filter-bar .filter-result { justify-self:end; }
#app .filter-bar input,#app .filter-bar .select-trigger { border-color:var(--workbench-line); background:var(--card); }
#app .button:not(.primary):not(.danger):not(.danger-ghost) { background:var(--workbench-surface); border:1px solid var(--workbench-line); color:var(--primary); }
#app .button:not(.primary):not(.danger):not(.danger-ghost):hover { background:var(--primary-soft); border-color:var(--primary-soft-border); }
#app .button { border-radius:11px; }
#app .table-actions .button.small { min-height:34px; padding-inline:12px; }
#app table thead th { background:var(--workbench-surface); padding-block:13px; border-bottom-color:var(--workbench-line); font-size:12px; }
#app table td { padding-block:16px; border-bottom-color:var(--workbench-line); }
#app table tbody tr:hover { background:var(--primary-soft); }
#app .empty-state { min-height:160px; padding:28px 20px; gap:8px; }
#app .empty-symbol { background:var(--primary-soft); color:var(--primary); border-radius:14px; width:40px; height:40px; }
#app .empty-state h3 { font-size:15px; }
#app .empty-state p { line-height:1.6; }
#app .chart-list { padding:16px 20px; gap:12px; }
#app .chart-row { gap:12px; }
#app .chart-row > div { height:6px; border-radius:999px; }
#app .chart-row > div > i { border-radius:999px; }
#app :is(.badge,.priority,.severity) { min-height:24px; padding:3px 9px; font-weight:500; }
body[data-workspace] #modal .modal { border:1px solid var(--border); box-shadow:var(--shadow-lg); }
body[data-workspace] #modal .modal-header { align-items:center; padding:20px 24px 16px; }
body[data-workspace] #modal .modal-header h2 { font-size:20px; }
body[data-workspace] #modal .modal-body { padding:22px 24px; }
body[data-workspace] #modal .modal-actions { gap:10px; padding:16px 24px; margin:22px -24px -22px; }
body[data-workspace] #modal :is(input:not([type=checkbox]):not([type=radio]),textarea,.select-trigger) { border:1px solid var(--border); background:var(--ios-fill-weak); border-radius:var(--ui-control-radius); }
body[data-workspace] #modal :is(input,textarea):focus { background:var(--card); border-color:var(--primary); }
body[data-workspace] .select-menu { border-radius:14px; padding:6px; box-shadow:var(--shadow-md); }
body[data-workspace] .select-option { min-height:38px; border-radius:var(--ui-option-radius); padding-block:9px; }
@media(min-width:861px) { #app .content > .stack { animation:workbench-enter 160ms ease-out; } }
@keyframes workbench-enter { from { opacity:.65; } to { opacity:1; } }
@media(max-width:1200px) { #app .finance-metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } #app .finance-metric-grid > .stat:nth-child(4) { border-inline-start:0; } }
@media(max-width:860px) {
 #app .sidebar { padding-inline:10px; }
 #app .nav { gap:2px; }
 #app .nav button { min-height:52px; padding-inline:6px; border-radius:12px; }
 #app .brand { padding-bottom:0; }
 #app .topbar h1 { font-size:22px; }
 #app .metric-grid,#app .finance-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #app .metric-grid > .stat { padding:14px 16px; border-inline-start:0; }
 #app .metric-grid > .stat:nth-child(even) { border-inline-start:1px solid var(--workbench-line); }
 #app .metric-grid > .stat:nth-child(n+3) { border-top:1px solid var(--workbench-line); }
 #app .metric-grid .stat strong { font-size:26px; }
 #app .filter-bar { grid-template-columns:repeat(2,minmax(0,1fr)); padding:16px; }
 #app .filter-bar .compact-field :is(input,select,.select-trigger) { min-height:44px; }
 #app .tabs { max-width:100%; }
 #app .tabs button { min-height:44px; }
 #app .card-header { padding:15px 16px; }
 #app .card-body:not(.tight) { padding:16px; }
 #app .page-head-actions { gap:8px; }
 #app .table-actions .button.small { min-height:44px; }
 #app .responsive-table td { padding-block:8px; }
 #app .empty-state { min-height:145px; padding:24px 16px; }
 body[data-workspace] #modal .modal-header { padding:16px 18px; }
 body[data-workspace] #modal .modal-body { padding:18px; }
 body[data-workspace] #modal .modal-actions { margin:18px -18px -18px; padding:14px 18px calc(14px + env(safe-area-inset-bottom)); }
 body[data-workspace] .select-option { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) { #app .content > .stack { animation:none; } #app .tabs button,#app .metric-grid .stat-drill { transition:none; } }
@media(min-width:1201px){#app .filter-bar{grid-template-columns:repeat(5,minmax(0,1fr));}}
#app .card .metric-grid{border:0;border-bottom:1px solid var(--workbench-line);border-radius:0;}

/* Local workbench reliability polish: existing tokens and restrained movement. */
body[data-workspace] { --duration:200ms; --duration-fast:180ms; }
#app .nav-highlight { transition-duration:180ms; transition-timing-function:var(--ease-out); }
#app .workbench-analysis { border:1px solid var(--workbench-line); border-radius:var(--radius-lg); background:var(--card); }
#app .workbench-analysis > summary { min-height:44px; padding:13px 20px; font-size:var(--text-base); font-weight:var(--weight-strong); cursor:pointer; }
#app .workbench-analysis > .stack { padding:0 12px 12px; }
#app .tab-panel[hidden] { display:none; }
#app :is([role=tab], .workbench-analysis > summary):focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
#app .tab-panel:focus-visible { outline:2px solid var(--focus-ring); outline-offset:4px; border-radius:var(--radius-lg); }
#app .button { border-radius:var(--ui-button-radius); }
#app .table-actions { gap:8px; }
#app :is(.badge, .severity) { font-size:var(--text-2xs); font-weight:var(--weight-medium); }
#app .cockpit-chart:has(.empty-state) { min-height:0; }
#app .chart-list .empty-state { min-height:104px; padding:18px 12px; }
@media(max-width:860px) {
 #app .workbench-analysis > summary { padding-inline:16px; }
 #app .workbench-analysis > .stack { padding-inline:8px; }
}
@media(prefers-reduced-motion:reduce) {
 #app .nav-highlight, #app .tabs button { transition:none; }
 body[data-workspace] #modal :is(.modal, .modal-backdrop, .drawer-action-content) { animation:none; }
}