/* Design tokens 视觉 Token 层：2026-07 焕新纲要基线，2026-08-03 第二轮整体整改精修色阶与阴影；
 * 服务全站颜色、阴影、圆角、字体层级、动效与控件尺度。 */
:root {
  --color-bg: #f0f3f8;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f8fb;
  --color-ink: #151b26;
  --color-text: #39414f;
  --color-muted: #66707f;
  --color-faint: #97a0ae;
  --color-primary: #2b5aed;
  --color-primary-hover: #1d44c2;
  --color-primary-soft: #eaefff;
  --color-primary-softer: #f3f6fe;
  --color-accent: #4472e8;
  --color-accent-soft: #eaf0fe;
  --color-border: #e2e6ee;
  --color-border-strong: #ccd3df;
  --color-green: #0f9d63;
  --color-green-soft: #e1f5eb;
  --color-warning: #c07d13;
  --color-warning-soft: #fdf2df;
  --color-red: #d64541;
  --color-red-soft: #fdecea;
  --color-danger: var(--color-red);
  /* 旧命名别名：组织单元等早期样式仍引用无前缀变量，统一映射到正式 token，避免声明失效。 */
  --border: var(--color-border);
  --surface: var(--color-surface);
  --surface-muted: var(--color-surface-muted);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --primary: var(--color-primary);
  --primary-soft: var(--color-primary-soft);
  --shadow-panel: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 6px -1px rgba(16, 24, 40, 0.05);
  --shadow-panel-hover: 0 8px 20px -6px rgba(16, 24, 40, 0.12), 0 2px 6px -2px rgba(16, 24, 40, 0.05);
  --shadow-overlay: 0 24px 48px -12px rgba(16, 24, 40, 0.22), 0 8px 16px -8px rgba(16, 24, 40, 0.1);
  --shadow-soft: 0 1px 2px rgba(16, 24, 40, 0.06);
  --font-size-page-title: 22px;
  --font-size-title: 16px;
  --font-size-card-title: 14px;
  --font-size-body: 14px;
  --font-size-caption: 12px;
  --line-height-page-title: 30px;
  --line-height-title: 24px;
  --line-height-card-title: 22px;
  --line-height-body: 22px;
  --line-height-caption: 18px;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Consolas, monospace;
  --space-page: 24px;
  --space-section: 18px;
  --space-card: 16px;
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-overlay: 14px;
  --radius-pill: 999px;
  --control-height: 36px;
  --control-height-small: 30px;
  --sidebar-width: 236px;
  --sidebar-collapsed-width: 72px;
  --global-header-height: 72px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --motion-fast: 140ms ease;
  --motion-panel: 160ms var(--ease-out);
  --motion-base: 200ms var(--ease-out);
  --motion-drawer: 200ms var(--ease-drawer);
}

/* UAT remediation: dictionary administration and organization-unit hierarchy share responsive system-settings surfaces. */
.dictionary-management-list {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.dictionary-management-list .workspace,
.dictionary-management-list .table-wrap {
  min-width: 0;
}

.organization-unit-tree,
.organization-unit-tree ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.organization-unit-tree ul {
  margin-left: 24px;
  padding-left: 16px;
  border-left: 1px solid var(--border, var(--color-border));
}

.organization-unit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border, var(--color-border));
  border-radius: 10px;
  background: var(--surface, #fff);
}

.organization-unit-row > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.organization-unit-member-picker {
  display: grid;
  gap: 8px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
}

.organization-unit-member-picker label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-control);
  background: var(--surface-muted, #f7f8fa);
}

/* Phone settings layout keeps hierarchy labels and action buttons inside the modal/page viewport. */
@media (max-width: 600px) {
  .organization-unit-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .organization-unit-row .card-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .organization-unit-tree ul {
    margin-left: 10px;
    padding-left: 10px;
  }
}

/* Application shell defines the global reset, authentication screen, sidebar, and routed main region. */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: "PingFang SC", "Microsoft YaHei", Inter, Arial, sans-serif;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

a {
  color: inherit;
}

button {
  font: inherit;
}

/* Production shell reserves permanent viewport space for the fixed desktop sidebar. */
.app-shell {
  display: block;
  min-height: 100dvh;
  min-width: 0;
  padding-left: var(--sidebar-width);
  overflow-x: hidden;
  transition: padding-left var(--motion-base);
}

.production-shell {
  background: var(--color-bg);
}

.production-shell.sidebar-collapsed {
  padding-left: var(--sidebar-collapsed-width);
}

.login-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background: var(--color-bg);
}

.login-panel {
  display: grid;
  gap: 24px;
  width: min(420px, 100%);
  padding: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-overlay);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-form label {
  display: grid;
  gap: 8px;
  color: var(--color-muted);
  font-weight: 600;
}

.login-form input {
  min-height: 42px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-ink);
  font: inherit;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.login-form input:focus-visible {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.form-error {
  margin: 0;
  color: #b93a33;
  font-weight: 600;
}

.auth-error {
  padding: 10px 12px;
  border: 1px solid #f0c6c2;
  border-radius: var(--radius-control);
  background: var(--color-red-soft);
  line-height: 1.5;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: var(--sidebar-width);
  height: 100dvh;
  min-height: 100dvh;
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 20px 14px;
  transition: padding var(--motion-base), width var(--motion-base);
}

.mobile-menu-button,
.mobile-sidebar-backdrop {
  display: none;
}

.mobile-menu-button {
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-height);
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  font-weight: 700;
  box-shadow: var(--shadow-soft);
}

.mobile-menu-lines,
.mobile-menu-lines::before,
.mobile-menu-lines::after {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: var(--color-primary);
}

.mobile-menu-lines {
  position: relative;
}

.mobile-menu-lines::before,
.mobile-menu-lines::after {
  position: absolute;
  left: 0;
  content: "";
}

.mobile-menu-lines::before {
  top: -5px;
}

.mobile-menu-lines::after {
  top: 5px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
}

.brand-mark {
  --icon-art-scale-up: 22px;
  --icon-art-size: var(--icon-art-scale-up);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-primary);
  color: #fff;
}

.brand small,
.eyebrow,
.label,
.panel p {
  color: var(--color-muted);
}

.brand small {
  display: block;
}

.sidebar .brand small {
  color: var(--color-faint);
}

.nav-list {
  display: grid;
  gap: 4px;
}

/* Expanded navigation follows the Pixso kit's icon-and-label rhythm without changing the route tree. */
.nav-section-label {
  margin: 2px 12px 8px;
  color: var(--color-faint);
  font-size: var(--font-size-caption);
  font-weight: 700;
  line-height: var(--line-height-caption);
  letter-spacing: 0.04em;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: var(--control-height);
  padding: 7px 12px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  transition: background var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}

/* Navigation icons stay visible in both expanded and collapsed states, matching the Pixso sidebar hierarchy. */
.nav-icon-wrap {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: var(--radius-control);
}

.nav-icon {
  width: 24px;
  height: 24px;
  --icon-art-scale-up: 24px;
  --icon-art-size: 24px;
}

.nav-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-collapse-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  color: var(--color-muted);
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.sidebar-collapse-button:hover,
.sidebar-collapse-button:focus-visible {
  border-color: rgba(43, 90, 237, 0.32);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  outline: none;
}

.production-shell.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed-width);
  padding: 18px 10px;
}

.production-shell.sidebar-collapsed .sidebar-topline {
  grid-template-columns: 1fr;
  gap: 10px;
  justify-items: center;
  margin-bottom: 22px;
}

.production-shell.sidebar-collapsed .brand {
  justify-content: center;
}

.production-shell.sidebar-collapsed .brand div,
.production-shell.sidebar-collapsed .nav-label,
.production-shell.sidebar-collapsed .nav-key,
.production-shell.sidebar-collapsed .nav-section-label {
  display: none;
}

.production-shell.sidebar-collapsed .nav-list {
  justify-items: center;
}

.production-shell.sidebar-collapsed .nav-item {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
}

.production-shell.sidebar-collapsed .nav-item:hover,
.production-shell.sidebar-collapsed .nav-item.active {
  background: transparent;
}

.production-shell.sidebar-collapsed .nav-icon-wrap {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: var(--radius-control);
  background: transparent;
  box-shadow: none;
}

.production-shell.sidebar-collapsed .nav-icon {
  width: 34px;
  height: 34px;
  --icon-art-scale-up: 34px;
  --icon-art-size: 34px;
}

.production-shell.sidebar-collapsed .nav-icon-wrap .business-icon.icon-sprite {
  width: 34px;
  height: 34px;
  --icon-art-scale-up: 34px;
  --icon-art-size: 34px;
}

.production-shell.sidebar-collapsed .nav-icon.business-icon.icon-sprite::before {
  width: var(--icon-art-size);
  height: var(--icon-art-size);
  filter: none;
  opacity: 0.78;
}

.production-shell.sidebar-collapsed .nav-item:hover .nav-icon.business-icon.icon-sprite::before,
.production-shell.sidebar-collapsed .nav-item.active .nav-icon.business-icon.icon-sprite::before {
  filter: none;
  opacity: 1;
}

.production-shell.sidebar-collapsed .nav-item > span:last-child {
  display: none;
}

.nav-item:hover,
.nav-item.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* 侧边栏导航精修：hover 回落浅灰底，激活态独享主蓝软底、主蓝文字与左侧 3px 主蓝指示条。 */
.nav-item:hover:not(.active) {
  background: var(--color-surface-muted);
  color: var(--color-ink);
}

.nav-item.active {
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--color-primary);
}

/* The outer frame owns the top user area separately from every routed page header. */
.app-frame {
  width: 100%;
  min-width: 0;
}

.global-header {
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-width: 0;
  min-height: var(--global-header-height);
  padding: 10px var(--space-page);
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.global-header-leading,
.global-header-tools {
  display: flex;
  align-items: center;
  min-width: 0;
}

.global-header-leading {
  gap: 12px;
}

.global-header-context {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.global-header-context span {
  color: var(--color-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.global-header-context strong {
  overflow: hidden;
  color: var(--color-text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-header-tools {
  justify-content: flex-end;
  gap: 8px;
  flex: 0 1 auto;
}

.main {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 22px var(--space-page) 32px;
}

.page-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  gap: 20px;
  min-width: 0;
}

.page-shell > * {
  min-width: 0;
  max-width: 100%;
}

.page-shell > .workspace {
  margin-top: 0;
}

.page-shell > .metric-grid,
.page-shell > .surface-grid {
  margin-bottom: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.hero-band {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  padding: var(--space-page);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.page-header,
.workbench-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  min-height: 68px;
  margin-bottom: 0;
  padding: 2px 0;
}

.page-header-main {
  min-width: 0;
}

/* Page header title line supports compact contextual actions such as project switching beside the title. */
.page-header-title-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.page-header-title-addon {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.page-header h1,
.workbench-heading h1 {
  font-size: var(--font-size-page-title);
  line-height: var(--line-height-page-title);
}

.page-header-main p:last-child,
.workbench-heading p:last-child {
  max-width: 100%;
  margin: 8px 0 0;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.page-header-actions,
.heading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Page actions remain inside the routed page header while account tools stay in the outer global header. */
.page-header-page-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* The tenant selector keeps a stable desktop width and surfaces switch failures beside the unchanged active organization. */
.header-organization-switch {
  position: relative;
  display: grid;
  flex: 0 1 208px;
  gap: 1px;
  width: 208px;
  min-width: 0;
}

.header-organization-caption {
  color: var(--color-faint);
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
}

.header-organization-select {
  width: 100%;
  height: 30px;
  min-width: 0;
  padding: 0 28px 0 0;
  border: 0;
  border-radius: var(--radius-control);
  background-color: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.header-organization-select:hover,
.header-organization-select:focus-visible {
  background-color: var(--color-primary-soft);
  outline: none;
  box-shadow: 0 0 0 2px rgba(43, 90, 237, 0.08);
}

.header-organization-select:disabled {
  cursor: default;
  opacity: 0.72;
}

.header-organization-error {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 2;
  width: max-content;
  max-width: 260px;
  padding: 5px 8px;
  border: 1px solid #f0c6c2;
  border-radius: var(--radius-control);
  background: var(--color-red-soft);
  color: #b93a33;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.header-message-button,
.header-user-button,
.header-logout-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), color var(--motion-fast);
}

.header-message-button {
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
}

.header-user-button {
  gap: 10px;
  min-height: var(--control-height);
  max-width: 208px;
  padding: 5px 10px 5px 6px;
}

.header-logout-button {
  min-height: 34px;
  padding: 0 10px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
}

.header-message-button:hover,
.header-user-button:hover,
.header-logout-button:hover,
.header-message-button:focus-visible,
.header-user-button:focus-visible,
.header-logout-button:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(43, 90, 237, 0.08);
  outline: none;
}

.header-tool-icon.business-icon.icon-sprite {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  --icon-art-scale-up: 28px;
  --icon-art-size: 28px;
}

.header-unread-badge {
  position: absolute;
  top: -7px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--color-surface);
  border-radius: 999px;
  background: var(--color-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.header-avatar,
.avatar-preview-figure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}

.header-avatar {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.header-avatar img,
.avatar-preview-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-user-meta {
  display: grid;
  min-width: 0;
  text-align: left;
}

.header-user-meta strong,
.header-user-meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-user-meta strong {
  font-size: 13px;
}

.header-user-meta small {
  color: var(--color-muted);
  font-size: 11px;
}

.floating-ai-action {
  --floating-ai-bottom: 96px;
  position: fixed;
  right: 36px;
  bottom: var(--floating-ai-bottom);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-card);
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(43, 90, 237, 0.22);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: box-shadow var(--motion-fast), background var(--motion-fast);
}

.floating-ai-action:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 12px 28px rgba(43, 90, 237, 0.28);
}

.floating-ai-action.dragging {
  cursor: grabbing;
  box-shadow: 0 14px 32px rgba(43, 90, 237, 0.3);
}

.floating-ai-action:focus-visible {
  outline: 3px solid rgba(43, 90, 237, 0.24);
  outline-offset: 3px;
}

.floating-ai-icon {
  --icon-art-scale-up: 18px;
  --icon-art-size: var(--icon-art-scale-up);
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.hero-band h1 {
  margin-bottom: 10px;
}

.hero-band p:last-child {
  margin-bottom: 0;
  color: var(--color-muted);
}

.hero-actions {
  display: flex;
  gap: 10px;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: var(--font-size-page-title);
  font-weight: 600;
  line-height: var(--line-height-page-title);
}

h2 {
  margin-bottom: 12px;
  font-size: var(--font-size-title);
  font-weight: 600;
  line-height: var(--line-height-title);
}

.eyebrow,
.label {
  margin-bottom: 8px;
  font-size: var(--font-size-caption);
  font-weight: 600;
  line-height: var(--line-height-caption);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Forms and actions keep buttons, toolbars, inputs, and compact edit controls visually consistent. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: 0 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast), color var(--motion-fast);
}

.button.primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.button.warning {
  border-color: #ecd9a4;
  background: var(--color-warning-soft);
  color: #8f6414;
}

.button.danger {
  border-color: #f0c6c2;
  background: var(--color-red-soft);
  color: #b93a33;
}

.button.muted {
  background: var(--color-surface-muted);
  color: var(--color-muted);
}

.button.small {
  min-height: var(--control-height-small);
  padding: 0 10px;
  font-size: 13px;
}

.button:not(.primary, .warning, .danger, .muted):not(:disabled):hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-muted);
  color: var(--color-ink);
}

.button.primary:not(:disabled):hover {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
  box-shadow: 0 4px 12px rgba(43, 90, 237, 0.18);
}

.button.warning:not(:disabled):hover {
  border-color: #e3c78f;
  background: #f7ead0;
  color: #7c5610;
}

.button.danger:not(:disabled):hover {
  border-color: #e8b0aa;
  background: #f9e3e1;
  color: #a02f28;
}

.button.muted:not(:disabled):hover {
  border-color: var(--color-border-strong);
  background: #eef0f3;
  color: var(--color-ink);
}

.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
  box-shadow: none;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 14px;
}

.message-toolbar {
  gap: 10px;
}

.message-category-strip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.message-category-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(210, 214, 221, 0.86);
  border-radius: 999px;
  background: #fff;
  color: var(--color-muted);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 26, 38, 0.05);
  transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}

.message-category-icon:hover {
  border-color: rgba(43, 90, 237, 0.34);
  background: var(--color-primary-softer);
  box-shadow: 0 8px 18px rgba(20, 26, 38, 0.07);
  transform: translateY(-1px);
}

.message-category-icon.has-unread {
  border-color: rgba(43, 90, 237, 0.26);
  color: var(--color-primary);
}

.message-category-symbol {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
}

.message-category-symbol svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message-category-task {
  color: var(--color-primary);
}

.message-category-project {
  color: #0f766e;
}

.message-category-notice {
  color: #b45309;
}

.message-category-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--color-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 12px rgba(213, 72, 64, 0.24);
}

.message-list-more-action {
  min-width: 64px;
}

.message-table-scroll {
  max-height: 190px;
  overflow: auto;
  padding-right: 2px;
}

.message-table-scroll .table-wrap {
  overflow: visible;
}

.message-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
}

.message-all-modal-list {
  display: grid;
  gap: 12px;
}

/* 消息“更多”弹窗的筛选区与结果区共用宽弹窗栅格，保证类型/阅读状态在窄窗口下仍可换行。 */
.message-all-filter-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface-muted);
}

.message-all-filter-actions {
  justify-content: flex-end;
  align-items: end;
}

.message-all-results {
  display: grid;
  gap: 10px;
}

.message-all-pagination {
  justify-content: flex-end;
  align-items: center;
}

/* 手机端消息筛选改为单列，避免类型与阅读状态控件在窄屏下被压缩或溢出。 */
@media (max-width: 600px) {
  .message-all-filter-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .message-all-filter-actions {
    justify-content: flex-start;
  }
}

.message-all-modal-list .table-wrap {
  max-height: min(58vh, 560px);
  overflow: auto;
}

.message-all-modal-list thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
}

.message-category-modal-list {
  display: grid;
  gap: 10px;
}

.message-category-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(228, 230, 235, 0.82);
  border-radius: var(--radius-control);
  background: #fff;
}

.message-category-list-main {
  min-width: 0;
}

.message-category-list-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.message-category-list-title strong {
  overflow: hidden;
  color: var(--color-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-category-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  color: var(--color-muted);
  font-size: 12px;
}

.message-category-detail-action {
  justify-self: end;
}

.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.grid-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.grid-form > * {
  min-width: 0;
}

.grid-form > .span-2,
.grid-form > .full {
  grid-column: 1 / -1;
}

.field {
  display: grid;
  gap: 7px;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
}

/* 表单标签与原生下拉：标签、下拉分行，并让 select 复用输入框的内容高度和正文行高，避免弹窗内选项文字上下偏移。 */
.field > span:first-child {
  display: block;
  min-width: 0;
  line-height: 1.4;
}

.field > select,
.field > .select {
  display: block;
  align-self: start;
  height: auto;
  line-height: var(--line-height-body);
  min-width: 0;
  margin: 0;
}

/* 业务创建弹窗：售前/售后业务必须先挂到项目主档，项目字段只读并由右侧按钮选择。 */
.business-project-link-field {
  margin-bottom: 12px;
}

.business-project-link-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.business-create-form .toolbar {
  margin-top: 14px;
}

.field .input,
.field .select,
.field input,
.field select,
.field textarea,
.textarea,
.select,
.input {
  min-height: var(--control-height);
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}

/* 表单控件 hover：未聚焦先加深描边，聚焦态再由主蓝边 + 软色外环接管。 */
:where(.field .input, .field .select, .field input, .field select, .field textarea, .textarea, .select, .input):hover:not(:disabled):not([readonly]):not(:focus-visible) {
  border-color: var(--color-border-strong);
}

.field textarea {
  line-height: 1.55;
  resize: vertical;
}

.field small {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

/* 说明草稿操作区：按钮和提示保持同一行起点，避免 textarea 下方辅助动作与相邻字段错位。 */
.field-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.field-inline-actions small {
  flex: 1 1 220px;
}

:where(.field .input, .field .select, .field input, .field select, .field textarea, .textarea, .select, .input):focus-visible {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

:where(.field .input, .field .select, .field input, .field select, .field textarea, .textarea, .select, .input):disabled,
:where(.field .input, .field .select, .field input, .field select, .field textarea, .textarea, .select, .input)[readonly] {
  background: var(--color-surface-muted);
  color: var(--color-muted);
  cursor: not-allowed;
}

.textarea {
  min-height: 100px;
  resize: vertical;
}

.inline-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 10px;
  margin-bottom: 16px;
}

.inline-form input,
.inline-form select {
  min-height: var(--control-height);
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
}

.inline-form input:disabled,
.inline-form select:disabled {
  background: var(--color-surface-muted);
  color: var(--color-muted);
}

/* Shared form action and pagination rows keep new workflows aligned with the established button rhythm. */
.form-actions,
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.form-actions {
  align-self: end;
  min-height: 40px;
}

/* 部门/群组权限维护：权限树在弹窗正文内滚动，提交动作始终吸附在可视区底部，避免长权限清单遮蔽保存入口。 */
.organization-unit-permissions-form > .form-actions {
  position: sticky;
  bottom: -20px;
  z-index: 3;
  margin: 0 -20px -20px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 -8px 18px rgb(15 23 42 / 6%);
}

.pagination {
  justify-content: flex-end;
  margin-top: 14px;
  color: var(--color-muted);
  font-size: 13px;
}

/* Meeting pages reuse the formal SaaS field, card, badge, and action language instead of browser-native form presentation. */
.meeting-filter-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.meeting-filter-keyword {
  grid-column: span 2;
}

.meeting-filter-form .form-actions {
  justify-content: flex-end;
}

.meeting-index-summary,
.meeting-index-title-row,
.meeting-index-meta,
.meeting-material-item,
.meeting-readiness {
  display: flex;
  align-items: center;
}

.meeting-index-summary {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--color-muted);
  font-size: 13px;
}

.meeting-index-summary strong {
  color: var(--color-ink);
  font-size: 16px;
}

.meeting-index-list,
.meeting-material-list,
.meeting-material-actions {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.meeting-index-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(43, 90, 237, 0.72);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast);
}

.meeting-index-card:hover {
  border-color: rgba(43, 90, 237, 0.36);
  box-shadow: var(--shadow-panel-hover);
  transform: translateY(-1px);
}

.meeting-index-card-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.meeting-index-title-row {
  flex-wrap: wrap;
  gap: 8px;
}

.meeting-index-title-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 16px;
}

.meeting-index-meta {
  flex-wrap: wrap;
  gap: 7px 14px;
  color: var(--color-muted);
  font-size: 13px;
}

.meeting-index-meta span {
  position: relative;
}

.meeting-index-meta span:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -8px;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-border-strong);
  content: "";
  transform: translateY(-50%);
}

.meeting-index-card .muted {
  margin: 0;
}

.meeting-write-form {
  gap: 16px 18px;
}

.meeting-write-form > .field,
.meeting-filter-form > .field {
  align-self: start;
  margin: 0;
}

.meeting-participant-fieldset {
  min-width: 0;
  margin: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.meeting-participant-fieldset legend {
  padding: 0 6px;
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 700;
}

.meeting-participant-fieldset > .muted {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
}

.meeting-participant-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meeting-participant-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.meeting-participant-option:hover {
  border-color: rgba(43, 90, 237, 0.42);
  background: var(--color-primary-softer);
}

.meeting-participant-option input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  accent-color: var(--color-primary);
}

.meeting-write-form .form-actions,
.meeting-material-actions .form-actions,
.meeting-status-actions {
  justify-content: flex-end;
  margin: 0;
}

.meeting-material-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.meeting-material-actions > .grid-form {
  align-content: start;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

/* Meeting existing-knowledge picker: in-modal type buttons avoid native popup geometry and preserve checked rows while filtering. */
.meeting-material-type-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.meeting-material-type-filters .button.active,
.meeting-material-type-filters .button[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-softer);
  color: var(--color-primary);
}

.meeting-knowledge-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.meeting-knowledge-checkbox input {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  accent-color: var(--color-primary);
}

.meeting-material-item {
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.meeting-material-item > div {
  min-width: 0;
}

.meeting-material-item strong,
.meeting-material-item .muted {
  overflow-wrap: anywhere;
}

.meeting-material-item .muted {
  margin: 4px 0 0;
}

.meeting-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  margin: 0;
}

.meeting-detail-grid > div {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-muted);
}

.meeting-detail-grid dt {
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  font-weight: 700;
}

.meeting-detail-grid dd {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
  color: var(--color-ink);
  font-weight: 700;
}

.meeting-detail-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.meeting-detail-copy p,
.meeting-detail-copy small {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.meeting-readiness {
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.meeting-business-lock {
  margin: 0 0 12px;
}

/* Task module boundary: the management-tree filter row is non-submitting, while every modal entry reuses the same labelled create-task form. */
.tasks-page [data-task-filter-form] {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.task-create-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.modal-task-create-form {
  margin: 0;
}

.task-create-form .field {
  align-self: start;
  min-width: 0;
  margin: 0;
}

.task-create-form .field.full,
.task-create-actions {
  grid-column: 1 / -1;
}

.task-create-form input,
.task-create-form select,
.task-create-form textarea {
  width: 100%;
}

.task-create-collaborators {
  align-self: start;
  min-width: 0;
  margin: 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}

.task-create-collaborators legend {
  padding: 0 4px;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
}

.task-create-collaborator-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-height: 24px;
}

.task-create-collaborator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--color-ink);
  font-size: 14px;
}

.task-create-collaborator input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
}

/* 任务创建工作清单：逐条输入、添加和删除，替代需要用户理解逗号规则的 textarea。 */
.task-create-checklist {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}

.task-create-checklist legend {
  padding: 0 4px;
}

.task-checklist-draft-list {
  display: grid;
  gap: 8px;
}

.task-checklist-draft-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.task-checklist-add {
  justify-self: start;
  margin-top: 10px;
}

.task-create-actions {
  justify-content: flex-end;
  margin: 0;
}

.form-hint {
  margin: -6px 0 12px;
  color: var(--color-muted);
  font-size: 13px;
}

/* Personal Feishu authorization keeps identity state visible without mixing it with platform-wide application configuration. */
.profile-feishu-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(238, 246, 255, 0.82), rgba(255, 255, 255, 0.96));
}

.profile-feishu-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #3370ff, #13c2c2);
}

.profile-feishu-status,
.profile-feishu-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.profile-feishu-status p {
  margin: 4px 0 0;
}

.profile-feishu-status .status-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #a8b2c1;
  box-shadow: 0 0 0 5px rgba(168, 178, 193, 0.14);
}

.profile-feishu-status .status-dot.is-ready {
  background: #16a66a;
  box-shadow: 0 0 0 5px rgba(22, 166, 106, 0.14);
}

.profile-feishu-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(51, 112, 255, 0.22);
  border-top-color: #3370ff;
  border-radius: 50%;
  animation: profile-feishu-spin 700ms linear infinite;
}

@keyframes profile-feishu-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .profile-feishu-spinner { animation: none; border-top-color: rgba(51, 112, 255, 0.22); }
}

.form-inline-message {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: #b93a33;
  font-size: 13px;
  font-weight: 600;
}

.compact-form {
  grid-template-columns: 88px minmax(100px, 1fr) minmax(120px, 1.2fr) auto;
  margin-top: 14px;
  margin-bottom: 0;
}

.role-form {
  display: grid;
  gap: 14px;
}

/* Role permission tree: menu > page/tab > detail/field/button, with separate view-only and full-grant controls. */
.permission-tree {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.permission-tree-root,
.permission-tree-control,
.permission-tree-leaf {
  display: flex;
  align-items: center;
  gap: 10px;
}

.permission-tree-root {
  padding: 14px 16px;
  border: 1px solid rgba(43, 90, 237, 0.35);
  border-radius: 10px;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.permission-tree-root span,
.permission-tree-leaf span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.permission-tree-root small,
.permission-tree-leaf small,
.permission-tree-menu summary small,
.permission-tree-control small {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 500;
}

.permission-tree input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--color-primary);
}

.permission-tree-menu {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.permission-tree-menu summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  background: var(--color-surface-muted);
  color: var(--color-text);
  cursor: pointer;
  font-weight: 700;
}

.permission-tree-menu-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.permission-tree-control {
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
}

.permission-tree-control.view-only {
  color: var(--color-primary-hover);
}

.permission-tree-pages {
  display: grid;
  gap: 12px;
  padding: 14px 16px 16px;
}

.permission-tree-page {
  display: grid;
  gap: 8px;
}

.permission-tree-page h4 {
  margin: 0;
  color: var(--color-text);
  font-size: 14px;
}

.permission-tree-detail {
  display: grid;
  grid-template-columns: minmax(90px, 130px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.permission-tree-detail-label {
  padding-top: 9px;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
}

.permission-tree-leaves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.permission-tree-leaf {
  align-items: flex-start;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: #fff;
  color: var(--color-text);
  font-size: 13px;
}

.permission-tree-leaf:hover {
  border-color: rgba(43, 90, 237, 0.4);
  background: var(--color-primary-softer);
}

/* 部门／群组授权选择器：权限页总入口先选择组织单元，再进入同一套中文权限树。 */
.organization-unit-permission-picker {
  display: grid;
  gap: 10px;
}

.organization-unit-permission-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.organization-unit-permission-choice:hover,
.organization-unit-permission-choice:focus-visible {
  border-color: var(--primary);
  background: var(--primary-soft);
  outline: none;
}

.organization-unit-permission-choice span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.organization-unit-permission-choice small {
  color: var(--muted);
  white-space: nowrap;
}

/* 组织管理员批量开户：组织条目保持名称、编码和删除动作同排，小屏可自然换行。 */
.organization-admin-organizations {
  display: grid;
  gap: 10px;
}

.organization-admin-organization-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

@media (max-width: 600px) {
  .organization-admin-organization-row {
    grid-template-columns: 1fr;
  }
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.status-grid,
.module-list,
.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.project-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.knowledge-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.ai-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.system-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.project-stats-grid .stat-card {
  min-height: 118px;
  padding: 15px;
}

.knowledge-stats-grid .stat-card {
  min-height: 118px;
  padding: 15px;
}

.ai-stats-grid .stat-card {
  min-height: 118px;
  padding: 15px;
}

.system-stats-grid .stat-card {
  min-height: 118px;
  padding: 15px;
}

.project-stats-grid .stat-value {
  font-size: 30px;
}

/* Shared business-list query and pagination serve both presale and aftersale without route-specific layout forks. */
.business-list-query-panel {
  min-width: 0;
}

.business-list-query-title-row,
.business-list-pagination,
.business-list-query-actions,
.business-list-page-size {
  display: flex;
  align-items: center;
}

.business-list-query-title-row {
  justify-content: space-between;
  gap: 16px;
}

.business-list-result-count {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.business-list-query-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 12px;
  align-items: end;
  min-width: 0;
}

.business-list-filter-field,
.business-list-page-size {
  min-width: 0;
}

.business-list-filter-field {
  display: grid;
  gap: 6px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
}

.business-list-keyword {
  grid-column: span 2;
}

.business-list-query-form input,
.business-list-query-form select,
.business-list-page-size select {
  width: 100%;
  min-width: 0;
}

.business-list-query-actions,
.business-list-pagination {
  gap: 8px;
}

.business-list-query-actions {
  justify-content: flex-end;
}

.business-list-query-actions .button,
.business-list-pagination .button {
  white-space: nowrap;
}

.business-list-pagination {
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.business-list-page-total,
.business-list-page-summary,
.business-list-page-size {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.business-list-page-size {
  gap: 6px;
}

.business-list-page-size select {
  width: auto;
}

.business-list-results {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.knowledge-stats-grid .stat-value {
  font-size: 30px;
}

.ai-stats-grid .stat-value {
  font-size: 30px;
}

.system-stats-grid .stat-value {
  font-size: 30px;
}

/* Project board layout groups master navigation, aggregate content, and risk timeline for the projectBoard route. */
.project-board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
}

/* Project board selector action opens the master list in a modal so selection never covers first-screen metrics. */
.project-board-select-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(360px, 42vw);
  min-height: 32px;
  padding: 0 8px 0 11px;
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
}

.project-board-select-action .relation-icon {
  width: 30px;
  height: 30px;
  --icon-art-scale-up: 30px;
  --icon-art-size: 30px;
}

.project-board-select-action .project-board-current-name {
  display: inline-block;
  min-width: 0;
  max-width: min(250px, 28vw);
  overflow: hidden;
  color: var(--color-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-board-select-action .project-board-switch-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 700;
  white-space: nowrap;
}

/* Project selection dialog keeps a slightly higher layer while reusing the shared centered modal geometry. */
.modal.project-board-selector-dialog {
  z-index: 42;
}

/* Project selection modal reuses the master list renderer with viewport-bound scrolling for large UAT datasets. */
.project-board-selector-modal .project-master-list {
  padding: 0;
  border: 0;
  background: transparent;
}

.project-board-selector-modal .project-master-items {
  max-height: min(58vh, 560px);
  overflow: auto;
  padding-right: 4px;
}

.project-master-list,
.project-board-main,
.project-board-side {
  min-width: 0;
}

.project-master-list {
  display: grid;
  gap: 12px;
  position: static;
  border: 0;
  border-radius: 0;
  background: var(--color-surface);
  padding: 14px;
}

.project-board-main,
.project-board-side {
  display: grid;
  gap: 16px;
}

.project-board-toolbar {
  display: grid;
  gap: 10px;
}

.project-board-toolbar input,
.project-board-toolbar select {
  width: 100%;
  min-width: 0;
}

.project-master-items {
  display: grid;
  gap: 10px;
  max-height: min(68vh, 720px);
  overflow: auto;
  padding-right: 2px;
}

.project-master-item {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  color: var(--color-ink);
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.project-master-item:hover,
.project-master-item:focus-visible,
.project-master-item.active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  outline: none;
}

.project-master-item-head,
.project-master-item-meta,
.project-board-overview-meta,
.project-knowledge-group-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.project-master-item-head .badge {
  flex: 0 0 auto;
  white-space: nowrap;
}

.project-master-item strong,
.project-master-item span,
.project-board-overview-card strong,
.knowledge-mini-card strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.project-master-item-meta {
  justify-content: flex-start;
  color: var(--color-muted);
  font-size: 12px;
}

.project-board-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0;
}

/* Project board overview separates status, stage, KPI, and readiness signals so no single progress number implies project completion. */
.project-board-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}

.project-board-overview-card {
  display: grid;
  gap: 12px;
}

.project-board-overview-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  color: var(--color-muted);
  font-size: 13px;
}

.project-board-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-border);
}

.project-board-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}

.project-board-kpi-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.project-board-kpi-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  padding: 12px;
}

.project-board-kpi-card span,
.project-board-kpi-card small {
  color: var(--color-muted);
  font-size: 12px;
}

.project-board-kpi-card strong {
  color: var(--color-ink);
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Project board narrative keeps the project master introduction separate from presale and aftersale phase descriptions. */
.project-board-narrative {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  min-width: 0;
}

.project-board-narrative-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.project-board-narrative-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  padding: 12px;
}

.project-board-narrative-card:last-child {
  min-height: 128px;
}

.project-board-narrative-card span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
}

.project-board-narrative-card p {
  margin: 0;
  color: var(--color-ink);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.project-board-narrative-actions {
  display: flex;
  justify-content: flex-end;
  align-self: end;
  margin-top: 4px;
}

.project-narrative-ai-action {
  justify-self: end;
}

/* Project board stage strip shows presale and multiple aftersale phases side by side without collapsing them into one completion metric. */
.project-board-stage-strip {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  min-width: 0;
}

.project-board-stage-title {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.project-board-stage-title span {
  color: var(--color-muted);
  font-size: 12px;
}

.project-board-stage-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px;
  min-width: 0;
}

.project-board-stage-chip {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  padding: 12px;
}

.project-board-stage-chip.primary {
  background: var(--color-primary-soft);
  border-color: rgba(43, 90, 237, 0.18);
}

.project-board-stage-chip.success {
  background: var(--color-green-soft);
  border-color: rgba(24, 154, 94, 0.2);
}

.project-board-stage-chip.warning {
  background: var(--color-warning-soft);
  border-color: rgba(201, 135, 26, 0.22);
}

.project-board-stage-chip-head {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.project-board-stage-chip-head strong,
.project-board-stage-chip span {
  overflow-wrap: anywhere;
}

.project-board-stage-chip small {
  color: var(--color-muted);
  font-size: 12px;
}

/* Project board relationship rail keeps master, business projects, and tasks on one scan-friendly line. */
.project-relation-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 220px);
  gap: 12px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}

.project-relation-node {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  padding: 12px;
}

.project-relation-node .relation-icon {
  width: 34px;
  height: 34px;
}

.project-relation-node span,
.project-relation-node small {
  color: var(--color-muted);
  font-size: 12px;
}

.project-relation-node strong {
  overflow-wrap: anywhere;
}

.project-board-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.project-board-card-grid .workspace {
  margin-top: 0;
}

.project-board-card-grid .module-card {
  margin-top: 10px;
}

/* Project board hierarchy keeps master, presale, and aftersale content in ownership order so tasks and knowledge do not float away from their source. */
.project-board-hierarchy {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.project-board-overview-knowledge {
  display: grid;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  padding: 14px;
}

/* Project board overview spacing separates current business stage from the project knowledge summary inside the same section. */
.project-board-stage-strip + .project-board-overview-knowledge {
  margin-top: 18px;
}

.project-board-overview-knowledge .relation-icon,
.business-project-summary .relation-icon,
.business-project-task-head .relation-icon {
  width: 36px;
  height: 36px;
}

.business-project-summary-copy small,
.business-project-summary-copy span,
.business-project-task-head span {
  color: var(--color-muted);
  font-size: 12px;
}

.business-project-summary-copy strong,
.business-project-task-head strong {
  overflow-wrap: anywhere;
}

/* Project board master knowledge spans the full master card so document titles never collapse into the narrow icon column. */
.project-master-knowledge-block {
  grid-column: 1 / -1;
  min-width: 0;
}

.business-project-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.business-project-card {
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.business-project-card[open] {
  border-color: rgba(43, 90, 237, 0.3);
  box-shadow: 0 14px 30px rgba(20, 26, 38, 0.08);
}

.business-project-summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
}

.business-project-summary::-webkit-details-marker {
  display: none;
}

.business-project-summary-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.business-project-details {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 0 14px 14px 68px;
}

.business-project-detail-block {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.business-project-task-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.business-project-task {
  display: grid;
  gap: 9px;
  min-width: 0;
  border: 1px solid rgba(228, 230, 235, 0.85);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  padding: 10px;
}

.business-project-task-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.business-project-task-head div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.task-knowledge-row {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-left: 48px;
}

.task-knowledge-row > strong {
  color: var(--color-muted);
  font-size: 12px;
}

/* Project board expansion sections keep contacts, requirements, schedule, budget, and contracts in compact operational blocks. */
.project-contact-section,
.project-requirement-section,
.project-schedule-section,
.project-contract-section {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.project-contract-tree {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.project-contract-node {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.project-contract-node-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.project-contract-node-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.project-contract-node-head span,
.project-contract-empty,
.project-contract-file small {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
}

.project-contract-children,
.project-contract-files {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-left: 18px;
  border-left: 2px solid rgba(43, 90, 237, 0.16);
}

.project-contract-file {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(223, 231, 241, 0.9);
  border-radius: var(--radius-control);
  background: #fff;
}

.project-contract-file span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.project-contract-file strong {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-contact-section,
.project-schedule-section,
.project-budget-placeholder {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-contact-group,
.project-requirement-project,
.project-schedule-column,
.project-budget-placeholder article {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  padding: 12px;
}

.project-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px;
  min-width: 0;
}

.project-contact-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(228, 230, 235, 0.9);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  padding: 8px 10px;
}

.project-contact-card-head,
.project-contact-meta,
.project-meeting-card-head,
.project-requirement-node-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.project-contact-actions {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  justify-content: flex-end;
}

.project-contact-card-head > div,
.project-requirement-node-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

/* 项目看板需求摘要占满箭头与状态徽标之间的剩余宽度，标题和说明始终从左侧起排。 */
.project-requirement-node-head > div {
  flex: 1 1 auto;
  text-align: left;
}

.project-contact-actions .button.small {
  min-height: 28px;
  padding: 3px 9px;
  font-size: 12px;
}

.project-contact-card strong,
.project-contact-card span,
.project-contact-card p,
.project-requirement-node strong,
.project-requirement-node span,
.project-meeting-card strong,
.project-meeting-card span,
.project-meeting-card p,
.project-schedule-task strong,
.project-schedule-task span {
  overflow-wrap: anywhere;
}

.project-contact-card span,
.project-contact-card p,
.project-contact-meta,
.project-requirement-node span,
.project-meeting-card span,
.project-meeting-card small,
.project-schedule-task span,
.project-schedule-task small,
.project-budget-placeholder span {
  color: var(--color-muted);
  font-size: 12px;
}

.project-contact-card p,
.project-meeting-card p {
  margin: 0;
  line-height: 1.4;
}

.project-contact-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 4px 10px;
}

.project-contact-dialog {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.project-contact-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.project-contact-dialog-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.project-contact-dialog-head strong {
  color: var(--color-ink);
  font-size: 18px;
  overflow-wrap: anywhere;
}

.project-contact-dialog-head span {
  color: var(--color-muted);
  font-size: 12px;
}

.project-contact-tabs {
  width: max-content;
  max-width: 100%;
}

.project-contact-tabs .tab {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.project-contact-tabs .tab strong {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.12);
  color: var(--color-muted);
  font-size: 11px;
}

.project-contact-tabs .tab.active strong {
  background: rgba(43, 90, 237, 0.14);
  color: var(--color-primary);
}

.project-contact-dialog-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 10px;
  min-width: 0;
}

.project-requirement-tree {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.project-requirement-node {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(228, 230, 235, 0.92);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  padding: 12px;
}

/* 项目看板需求树默认折叠到一级，用户点击需求摘要后再查看任务与下级知识。 */
.project-requirement-node > .project-requirement-node-head,
.project-requirement-unlinked > .project-requirement-node-head {
  cursor: pointer;
  list-style: none;
}

.project-requirement-node > .project-requirement-node-head::-webkit-details-marker,
.project-requirement-unlinked > .project-requirement-node-head::-webkit-details-marker {
  display: none;
}

.project-requirement-node > .project-requirement-node-head::before,
.project-requirement-unlinked > .project-requirement-node-head::before {
  content: "›";
  display: inline-grid;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-size: 18px;
  line-height: 1;
  transition: transform var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.project-requirement-node[open] > .project-requirement-node-head::before,
.project-requirement-unlinked[open] > .project-requirement-node-head::before {
  transform: rotate(90deg);
}

.project-requirement-node > .project-requirement-node-head:focus-visible,
.project-requirement-unlinked > .project-requirement-node-head:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.project-requirement-children {
  display: grid;
  gap: 10px;
  min-width: 0;
  border-left: 2px solid rgba(43, 90, 237, 0.18);
  padding-left: 12px;
}

.project-requirement-task-list,
.project-requirement-unlinked,
.project-schedule-list,
.project-meeting-list {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.project-requirement-unlinked {
  border-top: 1px dashed var(--color-border);
  padding-top: 10px;
}

.project-schedule-task,
.project-meeting-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid rgba(228, 230, 235, 0.9);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  padding: 11px;
}

.project-meeting-knowledge,
.project-meeting-knowledge-picker {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.project-meeting-knowledge span {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.project-budget-placeholder {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.project-budget-placeholder strong {
  color: var(--color-ink);
  font-size: 24px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Project budget modal keeps two RMB summary inputs balanced and leaves room for future finance expansion. */
.project-budget-form {
  align-items: end;
}

.scoped-knowledge-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

/* Project board knowledge panels default to type-count summaries and reveal file lists only when the user expands them. */
.knowledge-summary-panel {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.knowledge-summary-panel[open] {
  background: var(--color-surface);
  border-color: rgba(43, 90, 237, 0.28);
}

.knowledge-summary-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  cursor: pointer;
  list-style: none;
}

.knowledge-summary-trigger::-webkit-details-marker {
  display: none;
}

.knowledge-summary-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.knowledge-summary-copy small {
  color: var(--color-muted);
  font-size: 12px;
}

.knowledge-type-summary-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.knowledge-type-summary-item {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid rgba(228, 230, 235, 0.9);
  border-radius: 999px;
  background: #ffffff;
  color: var(--color-muted);
  font-size: 12px;
  white-space: nowrap;
}

.knowledge-type-summary-item strong {
  color: var(--color-primary);
}

.knowledge-file-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 0 10px 10px;
}

.knowledge-file-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.knowledge-file-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.knowledge-collapse-action {
  white-space: nowrap;
}

/* Project board knowledge groups separate project, presale, aftersale, and task knowledge without creating documents inline. */
.project-knowledge-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.project-knowledge-group {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  padding: 12px;
}

.project-knowledge-group-head span {
  color: var(--color-muted);
  font-size: 12px;
}

.knowledge-mini-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  padding: 10px;
}

.knowledge-mini-card span,
.knowledge-mini-card small {
  color: var(--color-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* Project board page reserves a desktop right rail for floating todo, schedule and contact actions. */
.project-board-page {
  padding-right: 76px;
}

/* Project board insight drawer keeps risks and timeline available without reserving a permanent third column. */
.project-board-side-drawer {
  position: fixed;
  top: 148px;
  right: 24px;
  z-index: 48;
  display: grid;
  justify-items: end;
  pointer-events: none;
}

.project-board-insight-drawer {
  position: relative;
  display: grid;
  justify-items: end;
  pointer-events: auto;
}

.project-board-floating-stack {
  display: grid;
  gap: 10px;
  justify-items: end;
  pointer-events: auto;
}

.project-board-insight-drawer,
.project-board-schedule-drawer {
  position: relative;
  display: grid;
  justify-items: end;
}

.project-board-insight-drawer summary,
.project-board-schedule-drawer summary {
  list-style: none;
}

.project-board-insight-drawer summary::-webkit-details-marker,
.project-board-schedule-drawer summary::-webkit-details-marker {
  display: none;
}

/* Project-board floating actions share one visual language for todo, schedule and contacts side entries. */
.project-board-drawer-toggle,
.project-board-schedule-toggle,
.project-board-contact-toggle {
  position: relative;
  display: grid;
  gap: 2px;
  place-items: center;
  min-width: 44px;
  min-height: 128px;
  padding: 12px 8px;
  border: 1px solid rgba(43, 90, 237, 0.2);
  border-radius: 999px;
  background: #ffffff;
  color: var(--color-ink);
  cursor: pointer;
  box-shadow: 0 16px 42px rgba(20, 26, 38, 0.14);
}

.project-board-schedule-toggle {
  align-content: center;
  gap: 0;
  min-height: 112px;
}

.project-board-contact-toggle {
  min-height: 92px;
}

.project-board-floating-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--color-primary);
}

.project-board-floating-icon svg {
  display: block;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.project-board-drawer-toggle:hover,
.project-board-drawer-toggle:focus-visible,
.project-board-contact-toggle:hover,
.project-board-contact-toggle:focus-visible,
.project-board-schedule-toggle:hover,
.project-board-schedule-toggle:focus-visible {
  border-color: rgba(43, 90, 237, 0.42);
  box-shadow: 0 18px 48px rgba(43, 90, 237, 0.2);
  outline: none;
}

.project-board-drawer-label {
  writing-mode: vertical-rl;
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
}

.project-board-alert-count {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--color-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.project-board-drawer-panel {
  position: fixed;
  top: 24px;
  right: 82px;
  display: none;
  width: min(360px, calc(100vw - var(--sidebar-width) - 124px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  gap: 14px;
  padding: 12px;
}

.project-board-schedule-panel {
  position: fixed;
  top: 24px;
  right: 82px;
  display: none;
  width: min(700px, calc(100vw - var(--sidebar-width) - 124px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  gap: 14px;
  padding: 12px;
}

/* Project-board floating panels use a solid frame so page content never shows through gaps between drawer sections. */
.project-board-drawer-panel,
.project-board-schedule-panel {
  z-index: 56;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-overlay);
}

.project-board-schedule-panel .workspace {
  padding: 12px;
}

.project-board-schedule-panel .calendar-toolbar {
  gap: 8px;
}

.project-board-schedule-panel .calendar-title {
  font-size: 16px;
}

.project-board-schedule-panel .calendar-subtitle,
.project-board-schedule-panel .muted {
  font-size: 12px;
}

.project-board-schedule-panel .calendar-grid {
  gap: 6px;
}

.project-board-schedule-panel .calendar-cell {
  min-height: 34px;
  border-radius: 7px;
  font-size: 12px;
}

.project-board-schedule-panel .schedule-task-card {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 68px;
  padding: 10px 12px;
}

.project-board-schedule-panel .schedule-task-main {
  gap: 5px;
}

.project-board-schedule-panel .schedule-task-main > strong {
  font-size: 14px;
}

.project-board-insight-drawer[open] .project-board-drawer-panel {
  display: grid;
}

.project-board-schedule-drawer[open] .project-board-schedule-panel {
  display: grid;
}

.project-board-calendar-split,
.project-board-schedule-day,
.project-board-schedule-lists,
.project-board-schedule-list {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.project-board-calendar-panel {
  min-width: 0;
}

.project-board-timeline,
.project-board-risk-list,
.project-board-todo-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-board-timeline li,
.project-board-risk,
.project-board-todo {
  display: grid;
  gap: 5px;
  min-width: 0;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 10px;
}

.project-board-timeline li:last-child,
.project-board-risk:last-child,
.project-board-todo:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.project-board-timeline span,
.project-board-timeline small,
.project-board-risk small,
.project-board-todo small {
  color: var(--color-muted);
  font-size: 12px;
}

.project-board-timeline strong,
.project-board-risk span,
.project-board-todo span {
  overflow-wrap: anywhere;
}

.stat-signal,
.stat-icon,
.chart-title-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 10px;
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px rgba(43, 90, 237, 0.12);
}

.icon-sprite {
  --icon-position: 0% 0%;
  --icon-art-size: calc(100% - 8px);
  --pixso-icon: url("/assets/pixso-admin-kit/icons/workflow.svg");
  display: inline-grid;
  place-items: center;
}

.icon-sprite::before {
  content: "";
  display: block;
  width: var(--icon-art-size);
  height: var(--icon-art-size);
  background-image: url("/assets/business-icon-sprite.png");
  background-repeat: no-repeat;
  background-size: 400% 400%;
  background-position: var(--icon-position);
}

/* Canonical semantic mappings mirror semantic-icons.json; businessIcon resolves aliases before CSS lookup. */
.icon-dashboard {
  --icon-position: 66.666% 33.333%;
  --pixso-icon: url("/assets/pixso-admin-kit/icons/dashboard.svg");
}

.icon-project {
  --icon-position: 100% 100%;
  --pixso-icon: url("/assets/pixso-admin-kit/icons/project.svg");
}

.icon-knowledge {
  --icon-position: 100% 0%;
  --pixso-icon: url("/assets/pixso-admin-kit/icons/knowledge.svg");
}

.icon-presale {
  --icon-position: 0% 0%;
  --pixso-icon: url("/assets/pixso-admin-kit/icons/presale.svg");
}

.icon-aftersale {
  --icon-position: 33.333% 0%;
  --pixso-icon: url("/assets/pixso-admin-kit/icons/aftersale.svg");
}

.icon-delivery {
  --icon-position: 33.333% 0%;
  --pixso-icon: url("/assets/pixso-admin-kit/icons/delivery.svg");
}

.icon-tasks {
  --icon-position: 66.666% 0%;
  --pixso-icon: url("/assets/pixso-admin-kit/icons/tasks.svg");
}

.icon-meetings {
  --icon-position: 33.333% 33.333%;
  --pixso-icon: url("/assets/pixso-admin-kit/icons/meetings.svg");
}

.icon-message {
  --icon-position: 0% 33.333%;
  --pixso-icon: url("/assets/pixso-admin-kit/icons/message.svg");
}

.icon-toolkit {
  --icon-position: 66.666% 100%;
  --pixso-icon: url("/assets/pixso-admin-kit/icons/toolkit.svg");
}

.icon-settings {
  --icon-position: 33.333% 66.666%;
  --pixso-icon: url("/assets/pixso-admin-kit/icons/settings.svg");
}

.icon-users {
  --icon-position: 33.333% 100%;
  --pixso-icon: url("/assets/pixso-admin-kit/icons/users.svg");
}

.icon-audit {
  --icon-position: 66.666% 66.666%;
  --pixso-icon: url("/assets/pixso-admin-kit/icons/audit.svg");
}

.icon-database {
  --icon-position: 100% 66.666%;
  --pixso-icon: url("/assets/pixso-admin-kit/icons/database.svg");
}

.icon-ai {
  --icon-position: 0% 66.666%;
  --pixso-icon: url("/assets/pixso-admin-kit/icons/ai.svg");
}

.icon-security {
  --icon-position: 0% 100%;
  --pixso-icon: url("/assets/pixso-admin-kit/icons/security.svg");
}

.icon-distribution {
  --icon-position: 100% 33.333%;
  --pixso-icon: url("/assets/pixso-admin-kit/icons/distribution.svg");
}

.icon-workflow {
  --icon-position: 100% 100%;
  --pixso-icon: url("/assets/pixso-admin-kit/icons/workflow.svg");
}

.icon-document {
  --icon-position: 66.666% 100%;
  --pixso-icon: url("/assets/pixso-admin-kit/icons/document.svg");
}

.icon-edit {
  --pixso-icon: url("/assets/pixso-admin-kit/icons/edit.svg");
}

.icon-delete {
  --pixso-icon: url("/assets/pixso-admin-kit/icons/delete.svg");
}

.icon-upload {
  --pixso-icon: url("/assets/pixso-admin-kit/icons/upload.svg");
}

.icon-search {
  --pixso-icon: url("/assets/pixso-admin-kit/icons/search.svg");
}

.business-icon {
  display: inline-grid;
  place-items: center;
  color: var(--color-primary);
}

.business-icon.icon-sprite {
  --icon-art-scale-up: 42px;
  --icon-art-size: var(--icon-art-scale-up);
}

.business-icon.icon-sprite::before {
  width: var(--icon-art-size);
  height: var(--icon-art-size);
  background-color: currentColor;
  background-image: none;
  -webkit-mask: var(--pixso-icon) center / contain no-repeat;
  mask: var(--pixso-icon) center / contain no-repeat;
}

/* Navigation icons inherit the menu state so inactive items stay neutral and the active route turns Pixso blue. */
.nav-item .business-icon {
  color: inherit;
}

/* Expanded navigation must override the shared 42px card-icon artwork size so each 24px Remix icon stays fully visible inside its 28px menu slot. */
.nav-item .nav-icon.business-icon.icon-sprite {
  --icon-art-scale-up: 22px;
  --icon-art-size: var(--icon-art-scale-up);
}

.stat-icon.business-icon {
  --icon-art-scale-up: 42px;
  overflow: hidden;
}

.stat-card.accent .stat-signal,
.stat-tile.accent .stat-icon {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1px rgba(68, 114, 232, 0.16);
}

.stat-card.success .stat-signal,
.stat-tile.success .stat-icon {
  background-color: var(--color-green-soft);
  color: var(--color-green);
  box-shadow: inset 0 0 0 1px rgba(24, 154, 94, 0.18);
}

.stat-card.warning .stat-signal,
.stat-tile.warning .stat-icon {
  background-color: var(--color-warning-soft);
  color: var(--color-warning);
  box-shadow: inset 0 0 0 1px rgba(201, 135, 26, 0.22);
}

.stat-tile.red .stat-icon {
  background-color: var(--color-red-soft);
  color: var(--color-red);
  box-shadow: inset 0 0 0 1px rgba(213, 72, 64, 0.18);
}

.stat-tile.muted .stat-icon {
  background-color: var(--color-surface-muted);
  color: var(--color-muted);
  box-shadow: inset 0 0 0 1px rgba(105, 112, 126, 0.16);
}

/* Cards and surfaces define reusable panels, statistics tiles, chart containers, and hover states. */
.stat-card,
.chart-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
  transition: border-color var(--motion-base), box-shadow var(--motion-base), transform var(--motion-base);
}

.stat-card:hover,
.chart-card:hover,
.workspace:hover {
  border-color: rgba(43, 90, 237, 0.22);
  box-shadow: var(--shadow-panel-hover);
}

.stat-card:hover {
  transform: translateY(-1px);
}

.stat-card {
  display: grid;
  gap: 10px;
  min-height: 134px;
  padding: var(--space-card);
}

.stat-tile {
  min-width: 0;
}

/* 可交互统计卡保留共享统计布局，同时提供明确的键盘焦点与点击反馈；仅由显式 action 配置启用。 */
.stat-tile-action {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.stat-tile-action:focus-visible {
  outline: 3px solid rgba(43, 90, 237, 0.22);
  outline-offset: 2px;
}

.stat-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
}

.stat-card-head > div {
  min-width: 0;
}

.stat-card-head .stat-icon {
  width: 40px;
  height: 40px;
  align-self: center;
  justify-self: center;
}

.chart-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.stat-signal,
.stat-icon {
  width: 40px;
  height: 40px;
}

.stat-value {
  display: block;
  margin-top: 6px;
  color: var(--color-ink);
  font-size: 26px;
  font-weight: 600;
  line-height: 32px;
  font-variant-numeric: tabular-nums;
}

/* 数字排版：统计与金额类大数字统一等宽数字，避免计数和金额横向跳动。 */
.panel strong,
.mini-card strong,
.project-board-kpi-card strong,
.project-budget-placeholder strong,
.flow-percent,
.donut-chart span,
.ratio-ring-label strong,
.ratio-visual-total strong {
  font-variant-numeric: tabular-nums;
}

.stat-card p {
  margin: 0;
  color: var(--color-muted);
  font-size: 13px;
}

.stat-meta {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.dashboard-wide-card {
  width: 100%;
  min-width: 0;
}

.dashboard-ratio-card,
.dashboard-priority-card {
  grid-column: 1 / -1;
}

.surface-grid {
  display: grid;
  gap: 18px;
  min-width: 0;
}

/* Presale detail owns a strict shrink boundary so its header, sections, tables, and stage rail cannot widen the routed page. */
.presale-detail-page,
.presale-detail-page > *,
.presale-detail-page .surface-grid,
.presale-detail-page .workspace,
.presale-detail-header,
.presale-detail-header .page-header-main,
.presale-detail-header .page-header-actions,
.presale-detail-header .page-header-page-actions {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.presale-detail-page .workspace,
.presale-detail-page .module-card,
.presale-detail-page .info-grid dd,
.presale-detail-page .timeline-item {
  overflow-wrap: anywhere;
}

.project-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 18px;
}

.ai-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
  gap: 18px;
}

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

/* 系统配置：SaaS 组织创建与成员归集区，桌面双列、窄屏单列。 */
.organization-management-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.organization-management-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.organization-management-panel > div {
  grid-column: 1 / -1;
  display: grid;
  gap: 3px;
}

.organization-management-panel > div span {
  color: var(--color-muted);
  font-size: 13px;
}

.organization-management-panel label {
  display: grid;
  gap: 6px;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
}

.organization-management-panel input,
.organization-management-panel select {
  width: 100%;
  min-width: 0;
}

.chart-card {
  padding: 18px;
}

.chart-card h2 {
  margin-bottom: 4px;
  font-size: var(--font-size-title);
}

.chart-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.chart-title span:not(.chart-title-mark) {
  color: var(--color-muted);
  font-size: 13px;
}

.chart-title-mark {
  width: 34px;
  height: 34px;
}

/* Pixso chart-title icons use compact semantic SVG masks inside the existing 34px title slot. */
.chart-title-mark.business-icon {
  --icon-art-scale-up: 22px;
}

.chart-title-mark.accent {
  background-color: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px rgba(68, 114, 232, 0.16);
}

.bar-chart {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.bar-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 12px;
  min-height: 28px;
  color: var(--color-muted);
  font-size: 13px;
}

.bar-row strong {
  color: var(--color-ink);
  text-align: right;
}

.bar-track {
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: var(--color-border);
}

.bar-track span {
  display: block;
  width: var(--bar-size);
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}

.ratio-metric-list {
  gap: 12px;
}

.ratio-visual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.ratio-visual-card {
  --ratio-color: var(--color-primary);
  --ratio-segment-1: var(--ratio-color);
  --ratio-segment-2: #0ea5a5;
  --ratio-segment-3: #16a34a;
  --ratio-segment-4: #f59e0b;
  display: grid;
  /* 视觉焕新后卡片为纵向三行结构：ratio-visual-main 主区 / 分段条 / 分项清单，主区内部再用 flex 排环形图与文字，故改为单列通栏栅格，避免主区被压进 104px 窄列导致标题截断 */
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 14px 16px;
  min-height: 172px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.ratio-tone-blue {
  --ratio-color: #2f66f6;
  --ratio-segment-1: #2f66f6;
}

.ratio-tone-cyan {
  --ratio-color: #0ea5a5;
  --ratio-segment-1: #0ea5a5;
}

.ratio-tone-orange {
  --ratio-color: #f59e0b;
  --ratio-segment-1: #f59e0b;
}

.ratio-tone-green {
  --ratio-color: #16a34a;
  --ratio-segment-1: #2f66f6;
  --ratio-segment-2: #0ea5a5;
  --ratio-segment-3: #16a34a;
}

.ratio-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--ratio-ring-background, conic-gradient(var(--ratio-color) var(--ratio-deg), var(--color-border) 0));
  box-shadow: 0 10px 24px rgba(26, 43, 72, 0.09);
}

.ratio-ring::before {
  position: absolute;
  inset: 12px;
  border-radius: inherit;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(228, 230, 235, 0.78);
  content: "";
}

.ratio-ring-label {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 2px;
  color: var(--color-muted);
  font-size: 11px;
  line-height: 1.1;
  text-align: center;
}

.ratio-ring-label strong {
  color: var(--color-ink);
  font-size: 20px;
  line-height: 1;
}

.ratio-visual-content {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.ratio-visual-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.ratio-visual-head strong {
  overflow: hidden;
  color: var(--color-ink);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ratio-visual-head span {
  flex: 0 0 auto;
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 700;
}

.ratio-visual-content p {
  margin: 0;
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.6;
}

.ratio-visual-total {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  width: max-content;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ratio-color) 10%, #fff 90%);
  color: var(--color-muted);
  font-size: 12px;
}

.ratio-visual-total strong {
  color: var(--ratio-color);
  font-size: 18px;
}

.ratio-segment-bar {
  display: flex;
  grid-column: 1 / -1;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-border);
}

.ratio-segment {
  flex: 0 0 var(--segment-size);
  min-width: 0;
  height: 100%;
  background: var(--ratio-segment-1);
}

.ratio-segment-2 {
  background: var(--ratio-segment-2);
}

.ratio-segment-3 {
  background: var(--ratio-segment-3);
}

.ratio-segment-4 {
  background: var(--ratio-segment-4);
}

.ratio-visual-breakdown {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ratio-visual-breakdown li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(228, 230, 235, 0.9);
  border-radius: 999px;
  background: #fff;
  color: var(--color-muted);
  font-size: 12px;
}

.ratio-visual-breakdown strong {
  color: var(--color-ink);
  font-size: 12px;
  text-align: left;
}

.priority-task-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.priority-task-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 12px;
  border: 1px solid rgba(228, 230, 235, 0.84);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.priority-task-rank {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 700;
}

.priority-task-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.priority-task-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.priority-task-title-row > strong {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.priority-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--color-muted);
  font-size: 12px;
}

.donut-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 210px;
}

.donut-chart {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: conic-gradient(var(--donut-data));
}

.donut-chart::after {
  position: absolute;
  inset: 38px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px rgba(228, 230, 235, 0.78);
  content: "";
}

.donut-chart span,
.donut-chart small {
  position: relative;
  z-index: 1;
  display: block;
}

.donut-chart span {
  color: var(--color-ink);
  font-size: 26px;
  font-weight: 700;
}

.donut-chart small {
  margin-top: 2px;
  color: var(--color-muted);
  font-size: 12px;
}

.donut-legend,
.insight-list {
  display: grid;
  gap: 10px;
}

.visual-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-progress-list,
.project-health-list,
.ai-provider-list,
.ai-risk-list,
.system-control-list,
.system-user-status-list,
.system-audit-list {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.project-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(180px, 1.1fr);
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(228, 230, 235, 0.72);
}

.project-progress-row:last-child,
.project-health-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.project-progress-row strong,
.project-progress-row span {
  display: block;
}

.project-progress-row strong {
  overflow: hidden;
  color: var(--color-ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-progress-row span {
  margin-top: 3px;
  color: var(--color-muted);
  font-size: 12px;
}

.project-progress-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
}

.project-progress-meter span {
  margin-top: 0;
  color: var(--color-ink);
  font-weight: 700;
  text-align: right;
}

.project-health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(228, 230, 235, 0.72);
}

/* 业务变更记录：正文只展示操作人与字段，完整前后值由点击后的详情弹窗承载。 */
.project-change-list {
  display: grid;
  gap: 8px;
}

.project-change-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.project-change-row:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-muted);
}

.project-change-row:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.project-change-detail > div {
  grid-column: 1 / -1;
}

.ai-provider-row,
.ai-risk-row,
.system-control-row,
.system-user-status-row,
.system-audit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(228, 230, 235, 0.72);
}

.project-health-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--color-muted);
  font-size: 13px;
}

.ai-provider-row > span,
.ai-risk-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--color-muted);
  font-size: 13px;
}

.system-control-row span,
.system-user-status-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--color-muted);
  font-size: 13px;
}

.system-audit-row div {
  min-width: 0;
}

.system-audit-row strong,
.system-audit-row span {
  display: block;
}

.system-audit-row strong {
  overflow: hidden;
  color: var(--color-ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-audit-row span {
  overflow: hidden;
  margin-top: 3px;
  color: var(--color-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-provider-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-provider-row div {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.ai-provider-row small {
  color: var(--color-muted);
  font-size: 12px;
}

.project-health-row strong {
  color: var(--color-ink);
  font-size: 22px;
}

.ai-risk-row strong {
  color: var(--color-ink);
  font-size: 22px;
}

.system-user-status-row strong {
  color: var(--color-ink);
  font-size: 22px;
}

.ai-rule-list {
  margin-top: 18px;
}

.ai-action-queue {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ai-action-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(228, 230, 235, 0.88);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: 0 8px 18px rgba(20, 26, 38, 0.05);
}

.ai-action-card.red {
  border-left-color: var(--color-red);
}

.ai-action-card.success {
  border-left-color: var(--color-green);
}

.ai-action-card p {
  margin: 0;
  color: var(--color-muted);
  font-size: 13px;
}

.tone-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-primary);
}

.tone-dot.primary,
.tone-dot.blue,
.tone-dot.ai {
  background: var(--color-primary);
}

.tone-dot.accent,
.tone-dot.tasks {
  background: var(--color-accent);
}

.tone-dot.success,
.tone-dot.green,
.tone-dot.knowledge {
  background: var(--color-green);
}

.tone-dot.warning,
.tone-dot.orange {
  background: var(--color-warning);
}

.tone-dot.red {
  background: var(--color-red);
}

.tone-dot.muted,
.tone-dot.system {
  background: var(--color-muted);
}

.donut-legend {
  margin: 0;
  padding: 0;
  list-style: none;
}

.donut-legend li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  color: var(--color-muted);
  font-size: 13px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--legend-color);
}

.donut-legend strong {
  color: var(--color-ink);
}

.dashboard-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.65fr);
  gap: 18px;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
  gap: 18px;
}

.panel,
.workspace,
.module-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.panel {
  padding: var(--space-card);
}

.panel strong {
  display: block;
  margin-bottom: 8px;
  font-size: 26px;
}

.workspace {
  margin-top: var(--space-section);
  padding: var(--space-card);
}

.dashboard-insight-grid .workspace {
  margin-top: 0;
}

.section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.section-title-main {
  min-width: 0;
}

.section-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* AI 配置与工具包：页面正文只读展示状态，真实 Provider 写入由弹窗承载。 */
.settings-ai-layout {
  display: grid;
  gap: 16px;
}

.settings-ai-layout .notice {
  margin: 0;
}

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

.ai-config-summary article,
.settings-ai-fields div,
.toolkit-entry,
.ai-dictionary-list li {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.ai-config-summary article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 10px;
  align-items: center;
  min-height: 92px;
  padding: 14px;
}

.ai-config-summary strong {
  grid-column: 1 / -1;
  color: var(--color-ink);
  font-size: 22px;
  line-height: 1;
}

.ai-config-summary small {
  grid-column: 1 / -1;
  color: var(--color-muted);
}

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

.settings-ai-fields div {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.settings-ai-fields span,
.toolkit-entry span,
.ai-dictionary-list span,
.ai-dictionary-list small {
  color: var(--color-muted);
}

.settings-ai-fields strong,
.toolkit-entry strong,
.ai-dictionary-list strong {
  overflow-wrap: anywhere;
}

.settings-ai-main-grid .workspace {
  margin-top: 0;
}

/* Settings pages own a strict shrink boundary so wide reference tables scroll inside their card instead of widening and clipping the phone layout. */
.settings-page,
.settings-page .metric-grid,
.settings-page .surface-grid,
.settings-page .workspace,
.settings-page .system-settings-panel,
.settings-ai-main-grid,
.settings-ai-main-grid > *,
.settings-page .table-wrap {
  min-width: 0;
  max-width: 100%;
}

.settings-ai-main-grid > * {
  width: 100%;
}

.ai-reference-table {
  margin-top: 14px;
}

.toolkit-entry-grid {
  display: grid;
  gap: 12px;
}

.toolkit-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 12px;
  align-items: center;
  padding: 14px;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-base), box-shadow var(--motion-base), transform var(--motion-base);
}

.toolkit-entry:hover {
  border-color: rgba(43, 90, 237, 0.42);
  box-shadow: var(--shadow-panel-hover);
  transform: translateY(-1px);
}

.toolkit-entry .icon-sprite {
  grid-row: span 3;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-control);
  background-color: var(--color-primary-soft);
  box-shadow: inset 0 0 0 1px rgba(43, 90, 237, 0.14);
}

/* Toolkit launch cards keep the Pixso semantic icon comfortably inset within the 42px tile. */
.toolkit-entry .business-icon.icon-sprite {
  --icon-art-scale-up: 24px;
}

.toolkit-entry em {
  color: var(--color-primary);
  font-style: normal;
  font-weight: 700;
}

.ai-toolkit-subpage {
  display: grid;
  gap: 16px;
}

.ai-toolkit-subpage-head {
  margin-top: 0;
}

.method-operation-list {
  overflow-x: auto;
}

.method-operation-list table {
  min-width: 920px;
}

.method-operation-list code {
  font-family: var(--font-mono);
  color: var(--color-primary);
}

.method-permission-state {
  display: inline-flex;
  align-items: center;
  min-width: 72px;
}

.experience-category-tabs {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 14px;
}

.experience-category-tabs .tab span {
  margin-left: 6px;
  color: var(--color-muted);
  font-size: 12px;
}

.experience-detail-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.experience-detail-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.42fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.experience-detail-list li > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.experience-detail-list span,
.experience-detail-list small {
  color: var(--color-muted);
}

.experience-detail-list dl {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-content: start;
  gap: 6px 10px;
  margin: 0;
}

.experience-detail-list dt {
  color: var(--color-muted);
  font-size: 12px;
}

.experience-detail-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.rules-keyword-panel {
  display: grid;
  gap: 12px;
}

.rules-keyword-panel article {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.rules-keyword-panel article > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.rules-keyword-panel article > header span,
.rules-keyword-panel article > p {
  color: var(--color-muted);
}

.rules-keyword-panel article > header span {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  text-align: right;
}

.rules-keyword-panel article > p {
  margin: 0;
  line-height: var(--line-height-body);
}

.keyword-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.keyword-chip-row span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
}

.workflow-progress-grid {
  display: grid;
  gap: 14px;
}

.workflow-progress-card {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.workflow-progress-card > div {
  display: grid;
  gap: 4px;
}

.workflow-progress-card span {
  color: var(--color-muted);
}

.workflow-progress-track {
  --step-count: 6;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--step-count), minmax(112px, 1fr));
  gap: 0;
  min-width: max(100%, calc(var(--step-count) * 112px));
  margin: 0;
  padding: 8px 0 0;
  overflow-x: auto;
  list-style: none;
}

.workflow-progress-track::before {
  content: "";
  position: absolute;
  top: 22px;
  right: 56px;
  left: 56px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-primary);
}

.workflow-progress-track li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 112px;
  color: var(--color-ink);
  text-align: center;
}

.workflow-progress-track li > span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--color-primary-soft);
}

.workflow-progress-track strong {
  max-width: 104px;
  font-size: 12px;
  line-height: 1.35;
}

.settings-ai-dictionaries {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-dictionary-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.ai-dictionary-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}

.ai-dictionary-list li > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin-right: auto;
}

.toolkit-reference-layout {
  display: grid;
  gap: 18px;
}

.toolkit-reference-layout .workspace {
  margin-top: 0;
}

.toolkit-reference-action-form {
  display: inline-grid;
  grid-template-columns: auto;
  margin: 0;
}

.module-card {
  padding: 16px;
  box-shadow: none;
}

.project-card {
  border-left: 3px solid var(--color-primary);
}

.project-card.success {
  border-left-color: var(--color-green);
}

.project-card.accent {
  border-left-color: var(--color-accent);
}

.project-card.warning {
  border-left-color: var(--color-warning);
}

.project-card-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.project-title-group {
  min-width: 0;
}

.project-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.module-card .project-title-row strong {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin: 0;
  line-height: 1.35;
}

.project-status-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 22px;
}

.project-status-badges .badge {
  flex: 0 0 auto;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}

.project-card-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 560px;
}

.project-card-actions .button {
  min-height: 30px;
  padding: 0 10px;
  border-color: rgba(210, 214, 221, 0.9);
  border-radius: var(--radius-control);
  background: #fff;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(20, 26, 38, 0.04);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), color var(--motion-fast), background var(--motion-fast);
}

.project-card-actions .button:hover {
  border-color: rgba(43, 90, 237, 0.36);
  background: var(--color-primary-softer);
  color: var(--color-primary);
  box-shadow: 0 6px 14px rgba(20, 26, 38, 0.08);
}

.project-card-actions .button.primary {
  border-color: rgba(43, 90, 237, 0.92);
  background: var(--color-primary);
  color: #fff;
}

.project-card-actions .button.primary:hover {
  background: #1767c8;
  color: #fff;
}

/* Business cards keep exactly four outer commands while domain maintenance actions live in one controlled overflow menu. */
.business-card,
.business-card-topline,
.business-card-actions,
.business-card-expanded,
.business-card-expanded-section {
  min-width: 0;
}

.business-card-summary {
  margin: 0;
  overflow-wrap: anywhere;
}

.business-card-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.business-card-toggle-icon {
  display: inline-block;
  font-size: 12px;
  transition: transform var(--motion-fast);
}

.business-card.is-expanded .business-card-toggle-icon {
  transform: rotate(180deg);
}

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

/* 售前/售后业务卡片的“更多”菜单打开时，固定所属卡片层级与位置，避免和下方卡片的 hover 位移争抢鼠标命中。 */
.business-card.has-open-menu {
  position: relative;
  z-index: 10;
  transform: none;
}

.business-card.has-open-menu:hover {
  transform: none;
}

.business-card-more-menu {
  position: absolute;
  z-index: 8;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 6px;
  min-width: 150px;
  padding: 7px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

/* 覆盖触发按钮与浮层之间的 6px 视觉间距，让鼠标移动到菜单时始终落在同一交互区域。 */
.business-card-more-menu::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 0;
  left: 0;
  height: 7px;
}

.business-card-more-menu .button {
  width: 100%;
  justify-content: flex-start;
}

.business-card-expanded {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.business-card-expanded-section {
  display: grid;
  gap: 10px;
}

.business-card-expanded-section h3 {
  margin: 0;
  font-size: 15px;
}

.business-card-expanded-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.module-card strong {
  display: block;
  margin-bottom: 8px;
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

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

.module-card code {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 7px;
  border-radius: var(--radius-control);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
}

.action-list {
  margin: 0;
  padding-left: 18px;
  color: var(--color-muted);
}

.action-list li {
  margin-bottom: 8px;
}

.tree-view {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.tree-node {
  display: grid;
  gap: 8px;
}

.tree-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-primary-soft));
  transition: border-color var(--motion-fast), background-color var(--motion-fast), box-shadow var(--motion-fast);
}

/* 任务树节点 hover：整行浅灰底反馈，展开态仍由 is-expanded 规则接管。 */
.tree-row:hover {
  border-color: var(--color-border-strong);
  background: color-mix(in srgb, var(--color-surface) 82%, var(--color-primary-soft));
}

.tree-children {
  display: grid;
  gap: 8px;
  margin-left: 28px;
  padding-left: 14px;
  border-left: 1px solid var(--color-border);
}

.task-nested-branches {
  gap: 12px;
}

/* Task management roots stay compact by default; the explicit toggle reveals the unchanged child/checklist hierarchy one task at a time. */
.task-tree-root > .tree-row {
  transition: border-color var(--motion-fast), background-color var(--motion-fast), box-shadow var(--motion-fast);
}

.task-tree-root.is-expanded > .tree-row {
  border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border));
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-primary-soft));
  box-shadow: 0 8px 22px rgba(20, 26, 38, 0.06);
}

.task-tree-actions {
  flex-wrap: nowrap;
}

.task-tree-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.task-tree-toggle-icon {
  display: inline-block;
  font-size: 12px;
  transition: transform var(--motion-fast);
}

.task-tree-root.is-expanded .task-tree-toggle-icon {
  transform: rotate(180deg);
}

.task-tree-branch {
  display: grid;
  gap: 8px;
}

.task-tree-branch:empty {
  display: none;
}

.task-tree-branch-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(210, 214, 221, 0.84);
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
}

.tree-icon {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: var(--radius-control);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
}

.tree-icon.work {
  background: color-mix(in srgb, var(--color-green) 14%, white);
  color: var(--color-green);
}

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

.tree-main strong,
.tree-main span {
  display: block;
}

.tree-title-row,
.task-check-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tree-title-row strong,
.task-check-title-row strong {
  display: inline;
  margin: 0;
}

.tree-title-row span,
.task-check-title-row span {
  display: inline-flex;
}

.tree-status-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tree-row .card-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.task-child-card {
  align-content: start;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.info-grid div {
  padding: 12px;
  border-radius: var(--radius-control);
  background: var(--color-bg);
}

.info-grid dt {
  color: var(--color-muted);
  font-size: 12px;
}

.info-grid dd {
  margin: 4px 0 0;
  color: var(--color-ink);
  font-weight: 700;
}

/* Task-detail collaborator maintenance stays inside its information card as a compact text action, avoiding a second toolbar beneath read-only content. */
.task-collaborator-card dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.task-collaborator-action {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-size: 12px;
  line-height: 18px;
}

.task-collaborator-action:hover,
.task-collaborator-action:focus-visible {
  color: var(--color-primary-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.trace-card,
.check-item {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.trace-step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.trace-arrow {
  color: var(--color-muted);
}

.link-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.link-button:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-button:focus-visible {
  border-radius: 4px;
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.is-ok {
  color: var(--color-green);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--font-size-caption);
  font-weight: 600;
  line-height: var(--line-height-caption);
}

.badge.primary,
.badge.blue {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.badge.accent {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.badge.success,
.badge.green {
  background: var(--color-green-soft);
  color: #147a4a;
}

.badge.warning,
.badge.orange {
  background: var(--color-warning-soft);
  color: #8f6414;
}

.badge.purple {
  background: #ede9fe;
  color: #6d28d9;
}

.badge.red {
  background: var(--color-red-soft);
  color: #b93a33;
}

.badge.muted {
  background: var(--color-surface-muted);
  color: var(--color-muted);
}

.muted {
  display: block;
  margin-top: 4px;
  color: var(--color-muted);
  font-size: 13px;
}

.knowledge-scope-tabs,
.settings-section-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 12px 0 10px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
}

.knowledge-scope-tabs .tab,
.settings-section-tabs .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 88px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast);
}

.knowledge-scope-tabs .tab:hover,
.settings-section-tabs .tab:hover {
  background: rgba(255, 255, 255, 0.64);
  color: var(--color-ink);
}

.knowledge-scope-tabs .tab.active,
.settings-section-tabs .tab.active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: 0 1px 2px rgba(20, 26, 38, 0.06), 0 1px 3px rgba(20, 26, 38, 0.05);
}

.knowledge-scope-tabs .tab:focus-visible,
.settings-section-tabs .tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* Settings embeds user and permission management as tab panels so the shared page header and metrics render only once. */
.system-settings-panel {
  display: grid;
  gap: 18px;
  min-width: 0;
}

/* Knowledge advanced-search owns a temporary segmented tab, submitted-filter summary, and server-side pagination without widening the normal scope tabs. */
.knowledge-search-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.knowledge-search-tab-close {
  display: grid;
  width: 22px;
  height: 22px;
  margin-left: -8px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}

.knowledge-search-tab-close:hover,
.knowledge-search-tab-close:focus-visible {
  background: var(--color-border);
  color: var(--color-ink);
}

.knowledge-search-summary {
  display: grid;
  gap: 10px;
  margin: 4px 0 14px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.knowledge-search-summary-head,
.knowledge-search-pagination,
.filter-chip-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.knowledge-search-summary-head {
  justify-content: space-between;
}

.knowledge-search-summary-head > div {
  display: flex;
  gap: 8px;
}

.knowledge-search-pagination {
  justify-content: flex-end;
}

.knowledge-search-form .full {
  grid-column: 1 / -1;
}

.knowledge-maintenance-grid {
  margin: 18px 0;
}

.knowledge-maintenance-form {
  align-items: end;
}

.knowledge-maintenance-form .button {
  align-self: end;
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.responsive-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Data views cover dense tables, tree rows, chart rows, task boards, and schedule/calendar surfaces. */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-body);
}

th,
td {
  padding: 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  font-weight: 600;
  line-height: var(--line-height-caption);
  letter-spacing: 0.02em;
}

tbody tr {
  transition: background var(--motion-fast);
}

tbody tr:hover {
  background: var(--color-surface-muted);
}

code {
  color: var(--color-primary);
}

.progress {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: var(--color-border);
}

.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}

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

.task-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  width: 100%;
  gap: 14px;
  margin-bottom: 16px;
}

.task-stats-grid .stat-card {
  height: 100%;
  min-height: 112px;
  padding: 15px;
}

.task-stats-grid .stat-value {
  font-size: 26px;
}

.task-status-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: -2px 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(228, 230, 235, 0.86);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-primary-soft));
}

.task-status-filter-label {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
}

.task-status-filter-select {
  width: min(240px, 100%);
  min-height: 34px;
  padding: 6px 34px 6px 10px;
  font-size: 13px;
  font-weight: 700;
}

.task-action-context {
  margin: 12px 0;
}

.task-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.task-tree-board {
  display: grid;
  overflow-x: visible;
}

.task-lane {
  display: flex;
  flex: 0 0 304px;
  flex-direction: column;
  min-height: 420px;
  border: 1px solid rgba(228, 230, 235, 0.78);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.task-lane.primary {
  background: var(--color-primary-softer);
}

.task-lane.accent {
  background: var(--color-primary-softer);
}

.task-lane.success {
  background: #eff9f3;
}

.task-lane.warning {
  background: #fdf6e9;
}

.task-lane.red {
  background: #fdefec;
}

.task-lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
  border-bottom: 1px solid rgba(228, 230, 235, 0.78);
}

.task-lane-head > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 700;
}

.task-lane-body {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 12px;
}

.task-lane-empty {
  display: grid;
  min-height: 86px;
  place-items: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-muted);
  font-size: 13px;
}

.task-card {
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.task-board-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(228, 230, 235, 0.92);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: 0 8px 18px rgba(20, 26, 38, 0.05);
}

.task-board-card:hover {
  border-color: rgba(43, 90, 237, 0.24);
  box-shadow: var(--shadow-panel-hover);
}

.task-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--color-muted);
  font-size: 12px;
}

.task-meta-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.progress-with-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--color-muted);
  font-size: 12px;
}

.progress-with-label strong {
  color: var(--color-ink);
}

.split,
.schedule-split,
.two-up-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

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

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

.mini-card {
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: #fff;
}

.mini-card strong {
  display: block;
  margin-top: 6px;
  color: var(--color-ink);
  font-size: 24px;
}

.brief-list {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.calendar-panel {
  display: grid;
  gap: 12px;
}

.calendar-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.calendar-title {
  color: var(--color-ink);
  font-size: var(--font-size-title);
  font-weight: 700;
}

.calendar-subtitle {
  margin-top: 4px;
  color: var(--color-muted);
  font-size: 13px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(36px, 1fr));
  gap: 8px;
}

.calendar-cell {
  display: grid;
  min-height: 38px;
  place-items: center;
  border-radius: var(--radius-control);
  color: var(--color-muted);
  font-size: 13px;
}

.calendar-week {
  background: var(--color-surface-muted);
  font-weight: 700;
}

.calendar-day {
  position: relative;
  border: 1px solid var(--color-border);
  background: #fff;
  cursor: pointer;
}

.calendar-day.muted {
  opacity: 0.45;
}

.calendar-day.today {
  border-color: var(--color-primary);
}

.calendar-day.selected {
  background: var(--color-primary);
  color: #fff;
}

/* Calendar count badge combines non-cancelled meetings and active task items for one Beijing date. */
.calendar-day-count {
  position: absolute;
  top: 2px;
  right: 3px;
  display: grid;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  place-items: center;
  border-radius: 999px;
  background: var(--color-warning);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.calendar-day.selected .calendar-day-count {
  background: #fff;
  color: var(--color-primary);
}

.schedule-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* Dashboard schedule columns stay equal, while the selected-day list owns one full-width card track instead of inheriting the generic three-card module grid. */
.schedule-split {
  align-items: stretch;
}

.schedule-split > .workspace {
  min-width: 0;
  height: 100%;
}

.module-list.schedule-detail-list {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  margin-top: 12px;
}

.schedule-detail-list > .schedule-task-card {
  width: 100%;
  min-width: 0;
}

/* Dashboard schedule boundary: selected-day tasks use a horizontal row card so dense schedule text does not collapse into narrow vertical tiles. */
.schedule-task-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 180px) auto;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 14px 16px;
}

.schedule-task-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.schedule-task-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.schedule-task-main > strong {
  overflow: hidden;
  min-width: 0;
  color: var(--color-ink);
  font-size: 16px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-task-main > .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-task-progress {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.schedule-task-progress .progress {
  min-width: 0;
}

.schedule-task-action {
  display: flex;
  justify-content: flex-end;
  min-width: max-content;
}

.flow-rail {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.project-flow-rail {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.flow-rail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.flow-title {
  color: var(--color-ink);
  font-size: var(--font-size-title);
  font-weight: 700;
}

.flow-desc {
  margin-top: 4px;
  color: var(--color-muted);
  font-size: 13px;
}

.flow-rail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* Stage rail scrolling is isolated in this viewport-bound wrapper so the wide one-line track never expands a detail page. */
.flow-track-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.flow-track-scroll:focus-visible {
  outline: 2px solid rgba(43, 90, 237, 0.38);
  outline-offset: 3px;
}

.flow-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--flow-count, 5), minmax(0, 1fr));
  gap: 0;
  align-items: start;
  width: max(100%, var(--flow-min-width, 640px));
  min-width: 0;
  padding: 6px 2px 2px;
}

.flow-scroll-hint {
  display: none;
  margin: -6px 0 0;
  color: var(--color-muted);
  font-size: 12px;
  text-align: right;
}

.flow-track-progress {
  position: absolute;
  top: 19px;
  right: 54px;
  left: 54px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-border);
  pointer-events: none;
}

.flow-track-progress::after {
  display: block;
  width: var(--flow-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
  content: "";
}

.flow-node {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--color-muted);
  font-size: 13px;
  text-align: center;
}

.flow-dot {
  width: 28px;
  height: 28px;
  border: 4px solid var(--color-surface);
  border-radius: 999px;
  background: var(--color-border-strong);
  box-shadow: 0 0 0 1px rgba(20, 26, 38, 0.1);
}

/* 流程轨节点三态：完成绿色实心、当前主蓝实心、未来中性灰，替代原先完成/当前同色的表达。 */
.flow-node.done .flow-dot {
  background: var(--color-green);
  box-shadow: 0 0 0 1px rgba(24, 154, 94, 0.28), 0 6px 14px rgba(24, 154, 94, 0.18);
}

.flow-node.active .flow-dot {
  background: var(--color-primary);
  box-shadow: 0 0 0 1px rgba(43, 90, 237, 0.26), 0 8px 18px rgba(43, 90, 237, 0.2);
}

.flow-node.active {
  color: var(--color-ink);
  font-weight: 700;
}

.flow-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.82);
  white-space: nowrap;
}

.flow-percent {
  color: var(--color-primary);
  font-size: 28px;
  font-weight: 700;
}

.task-progress-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.task-progress-stats div {
  padding: 12px;
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.task-progress-stats span,
.task-progress-stats strong {
  display: block;
}

.task-progress-stats span {
  color: var(--color-muted);
  font-size: 12px;
}

.task-progress-stats strong {
  margin-top: 4px;
  color: var(--color-ink);
}

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

.timeline-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.timeline-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.faint {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
}

.document-preview {
  min-height: 260px;
  padding: 18px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  color: var(--color-muted);
}


/* Knowledge preview uses one protected active layer, with bounded text/table scrolling and no persisted document body. */
.knowledge-detail-summary-grid > .workspace:last-child {
  grid-column: 1 / -1;
}

.knowledge-preview-entry,
.knowledge-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.knowledge-preview-entry > div,
.knowledge-preview-toolbar > div,
.knowledge-preview-shell {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.modal.knowledge-preview-modal {
  width: min(1200px, calc(100vw - 32px));
  height: min(820px, calc(100dvh - 40px));
}

.knowledge-preview-shell {
  align-content: start;
  min-height: min(620px, calc(100dvh - 180px));
}

.knowledge-preview-toolbar {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.knowledge-preview-surface {
  min-width: 0;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

/* PDF preview keeps local canvas rendering, paging and zoom controls inside the one protected preview surface. */
.knowledge-pdf-preview {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  height: min(650px, calc(100dvh - 230px));
  min-height: 420px;
  background: #e7ebf0;
}

.knowledge-pdf-toolbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  white-space: nowrap;
}

.knowledge-pdf-page-control {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-muted);
  font-size: 13px;
}

.knowledge-pdf-page-input {
  width: 58px;
  min-width: 58px;
  padding: 6px 7px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-ink);
  text-align: center;
}

.knowledge-pdf-page-input:focus-visible,
.knowledge-pdf-canvas-stage:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.knowledge-pdf-toolbar-separator {
  width: 1px;
  height: 24px;
  background: var(--color-border);
}

.knowledge-pdf-zoom {
  min-width: 48px;
  color: var(--color-muted);
  font-size: 13px;
  text-align: center;
}

.knowledge-pdf-status {
  padding: 7px 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  font-size: 12px;
}

.knowledge-pdf-canvas-stage {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 16px;
  overflow: auto;
  place-items: start center;
  overscroll-behavior: contain;
}

.knowledge-pdf-canvas-stage canvas {
  display: block;
  max-width: none;
  background: #fff;
  box-shadow: 0 6px 24px rgb(15 23 42 / 18%);
}

/* Image preview owns responsive sizing and scrollable zoom inside the protected modal rather than leaking overflow to the page shell. */
.knowledge-image-preview {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  height: min(650px, calc(100dvh - 230px));
  min-height: 420px;
  background: #e7ebf0;
}

.knowledge-image-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  white-space: nowrap;
}

.knowledge-image-zoom {
  min-width: 48px;
  color: var(--color-muted);
  font-size: 13px;
  text-align: center;
}

.knowledge-image-status {
  padding: 7px 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  font-size: 12px;
}

.knowledge-preview-image {
  display: grid;
  min-width: 0;
  min-height: 420px;
  place-items: center;
  padding: 16px;
  overflow: auto;
  overscroll-behavior: contain;
}

.knowledge-preview-image img {
  display: block;
  max-width: none;
  max-height: none;
  background: #fff;
  box-shadow: 0 6px 24px rgb(15 23 42 / 18%);
}

.knowledge-preview-text {
  min-height: 420px;
  max-height: min(620px, calc(100dvh - 240px));
  margin: 0;
  padding: 18px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--color-ink);
  font: 14px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.knowledge-preview-markdown {
  font-family: inherit;
  white-space: normal;
}

.knowledge-preview-markdown :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, pre) {
  margin: 0 0 14px;
}

.knowledge-preview-markdown :is(ul, ol) {
  padding-left: 24px;
}

.knowledge-preview-markdown blockquote {
  padding: 8px 14px;
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface-muted);
}

.knowledge-preview-markdown pre {
  padding: 14px;
  overflow: auto;
  border-radius: 7px;
  background: #172033;
  color: var(--color-surface-muted);
  white-space: pre-wrap;
}

.knowledge-preview-markdown code {
  padding: 1px 4px;
  border-radius: 4px;
  background: rgb(15 23 42 / 8%);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.knowledge-preview-markdown pre code {
  padding: 0;
  background: transparent;
}

.knowledge-markdown-image-placeholder,
.knowledge-markdown-unsafe-link {
  overflow-wrap: anywhere;
  color: var(--color-muted);
}

.knowledge-preview-csv-scroll {
  max-width: 100%;
  max-height: min(620px, calc(100dvh - 240px));
  overflow: auto;
}

.knowledge-preview-csv-scroll table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
}

.knowledge-preview-csv-scroll th,
.knowledge-preview-csv-scroll td {
  max-width: 320px;
  padding: 9px 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-preview-csv-scroll th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface-muted);
}

.option-list,
.operation-list {
  display: grid;
  gap: 10px;
}

.option-row,
.operation-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: #fff;
}

/* Global operation lock covers the complete viewport while a functional write is pending, including any modal already open underneath it. */
.global-operation-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 26, 38, 0.42);
  backdrop-filter: blur(2px);
  cursor: progress;
}

.global-operation-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(360px, calc(100vw - 40px));
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-overlay);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
  color: var(--color-text);
  text-align: center;
}

.global-operation-card strong {
  font-size: var(--font-size-card-title);
  line-height: var(--line-height-card-title);
}

.global-operation-card > span:last-child {
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

.global-operation-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-primary-soft);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: global-operation-spin 0.8s linear infinite;
}

@keyframes global-operation-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-operation-spinner {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
 * 区域：会议预约/编辑弹窗原生控件兼容
 * 会议写弹窗在桌面端改用四边约束居中，移除祖先 transform，避免浏览器原生
 * select/date/time 弹层按变换前坐标打开；手机端继续沿用共享全屏弹窗规则。
 * -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .modal.meeting-write-dialog,
  .production-shell.sidebar-collapsed .modal.meeting-write-dialog {
    top: 20px;
    right: 24px;
    bottom: 20px;
    left: calc(var(--sidebar-width) + 24px);
    width: min(1040px, calc(100vw - var(--sidebar-width) - 48px));
    height: max-content;
    margin: auto;
    transform: none;
    animation: none;
  }

  .production-shell.sidebar-collapsed .modal.meeting-write-dialog {
    left: calc(var(--sidebar-collapsed-width) + 24px);
    width: min(1040px, calc(100vw - var(--sidebar-collapsed-width) - 48px));
  }

  .modal.meeting-write-dialog.overlay-enter {
    animation: shell-overlay-fade-in var(--motion-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)) both;
  }
}

/* --------------------------------------------------------------------------
 * 区域：会议预约/编辑弹窗自适应选择控件
 * 项目、业务、日期和时间均在表单 DOM 内展开，不调用浏览器原生弹出层；面板随弹窗宽度
 * 自适应并参与同一滚动容器布局，用于兼容小窗口、非 100% 缩放和不同设备分辨率。
 * -------------------------------------------------------------------------- */
.meeting-responsive-field {
  position: relative;
  min-width: 0;
}

.meeting-responsive-trigger,
.meeting-responsive-input-row {
  width: 100%;
}

.meeting-responsive-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.meeting-responsive-trigger:hover,
.meeting-responsive-trigger:focus-visible,
.meeting-responsive-trigger[aria-expanded="true"] {
  border-color: var(--color-accent);
  outline: 2px solid rgba(43, 90, 237, 0.14);
  outline-offset: 1px;
}

.meeting-responsive-trigger[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.meeting-responsive-trigger > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meeting-responsive-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.meeting-responsive-input-row input {
  min-width: 0;
  width: 100%;
}

.meeting-responsive-open {
  min-height: 40px;
  white-space: nowrap;
}

.meeting-responsive-panel {
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-height: min(340px, 44dvh);
  margin-top: 6px;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.meeting-responsive-panel[hidden] {
  display: none;
}

.meeting-responsive-options {
  display: grid;
  gap: 6px;
}

.meeting-responsive-option {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.meeting-responsive-option:hover,
.meeting-responsive-option:focus-visible,
.meeting-responsive-option.is-selected {
  border-color: var(--color-accent);
  background: var(--color-primary-soft);
  outline: none;
}

.meeting-responsive-search {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface);
}

.meeting-responsive-empty {
  min-height: 72px;
  place-items: center;
}

.meeting-calendar-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.meeting-calendar-week,
.meeting-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(32px, 1fr));
  gap: 5px;
}

.meeting-calendar-week span {
  color: var(--color-muted);
  font-size: 12px;
  text-align: center;
}

.meeting-calendar-day,
.meeting-calendar-blank {
  min-height: 34px;
}

.meeting-calendar-day {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text);
  cursor: pointer;
}

.meeting-calendar-day:hover,
.meeting-calendar-day:focus-visible,
.meeting-calendar-day.is-selected {
  border-color: var(--color-accent);
  background: var(--color-primary-soft);
  outline: none;
}

.meeting-time-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(54px, 1fr));
  gap: 6px;
}

.meeting-time-option {
  min-height: 34px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.meeting-time-option:hover,
.meeting-time-option:focus-visible,
.meeting-time-option.is-selected {
  border-color: var(--color-accent);
  background: var(--color-primary-soft);
  outline: none;
}

@media (max-width: 600px) {
  .meeting-responsive-panel {
    max-height: 50dvh;
    padding: 8px;
  }

  .meeting-calendar-week,
  .meeting-calendar-grid {
    grid-template-columns: repeat(7, minmax(28px, 1fr));
    gap: 3px;
  }

  .meeting-time-options {
    grid-template-columns: repeat(3, minmax(52px, 1fr));
  }
}

.modal-mask,
.drawer-mask {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(20, 26, 38, 0.42);
  backdrop-filter: blur(2px);
}

/* The single active-layer lifecycle locks background scrolling for both modal dialogs and right-side drawers. */
body.modal-open,
body.active-layer-open {
  overflow: hidden;
}

body.global-operation-active {
  cursor: progress;
}

body.active-layer-open .mobile-menu-button,
body.active-layer-open .floating-ai-action,
body.active-layer-open .project-board-floating-stack,
body.active-layer-open .business-change-floating-entry {
  visibility: hidden;
  pointer-events: none;
}

.modal,
.drawer {
  position: fixed;
  z-index: 41;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
}

.modal {
  top: 50%;
  left: calc(var(--sidebar-width) + (100vw - var(--sidebar-width)) / 2);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(720px, calc(100vw - var(--sidebar-width) - 48px));
  max-height: calc(100dvh - 40px);
  min-width: 0;
  overflow: hidden;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-overlay);
}

/* 全局弹窗按主工作区而非完整视口计算宽度，窗口或侧栏变化时所有普通/宽弹窗都会同步缩放。 */
.modal.modal-wide {
  width: min(1040px, calc(100vw - var(--sidebar-width) - 48px));
  max-height: calc(100dvh - 40px);
}

/* 侧栏收起后重算所有弹窗的可用工作区，避免只修个别业务弹窗造成其他入口仍被裁切。 */
.production-shell.sidebar-collapsed .modal {
  left: calc(var(--sidebar-collapsed-width) + (100vw - var(--sidebar-collapsed-width)) / 2);
  width: min(720px, calc(100vw - var(--sidebar-collapsed-width) - 48px));
}

.production-shell.sidebar-collapsed .modal.modal-wide {
  width: min(1040px, calc(100vw - var(--sidebar-collapsed-width) - 48px));
}

/* Wide activity dialogs keep their semantic classes while inheriting the same global work-area boundary. */
.modal.project-contact-dialog-modal,
.modal.ai-analysis-modal {
  left: calc(var(--sidebar-width) + (100vw - var(--sidebar-width)) / 2);
  width: min(1040px, calc(100vw - var(--sidebar-width) - 48px));
}

.production-shell.sidebar-collapsed .modal.project-contact-dialog-modal,
.production-shell.sidebar-collapsed .modal.ai-analysis-modal {
  left: calc(var(--sidebar-collapsed-width) + (100vw - var(--sidebar-collapsed-width)) / 2);
  width: min(1040px, calc(100vw - var(--sidebar-collapsed-width) - 48px));
}

.drawer {
  top: 0;
  right: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(460px, 100vw);
  height: 100dvh;
}

.modal-head,
.drawer-head,
.modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.modal-foot {
  justify-content: flex-end;
  border-top: 1px solid var(--color-border);
  border-bottom: 0;
}

.modal-body,
.drawer-body {
  overflow: auto;
  display: grid;
  gap: 14px;
  min-height: 0;
  padding: 20px;
}

/* Business relationship drawer keeps project-master context and both business groups in one full-width scan column. */
.business-relationship-drawer {
  width: min(560px, 100vw);
}

.business-relationship-content,
.business-relationship-group,
.business-relationship-list,
.business-relationship-row-copy {
  display: grid;
  min-width: 0;
  align-content: start;
}

.business-relationship-content {
  gap: 16px;
}

.business-relationship-current {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--color-accent);
  background: rgba(237, 242, 255, 0.72);
}

.business-relationship-group {
  gap: 8px;
}

.business-relationship-group-head,
.business-relationship-row-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.business-relationship-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.business-relationship-row {
  display: grid;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.business-relationship-row[data-relationship-strength="direct_conversion"] {
  border-color: rgba(20, 184, 166, 0.34);
  background: rgba(240, 253, 250, 0.72);
}

.business-relationship-row-copy {
  gap: 3px;
}

.business-relationship-row-title strong,
.business-relationship-current strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Related-task drawer renders the selected task and its direct children as one compact tree without reserving an empty grid column. */
.related-task-drawer-content,
.related-task-tree,
.related-task-children {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 10px;
}

.related-task-node {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.related-task-root {
  border-color: rgba(43, 90, 237, 0.28);
  background: rgba(237, 242, 255, 0.72);
}

.related-task-children {
  margin-left: 18px;
  padding-left: 12px;
  border-left: 2px solid rgba(43, 90, 237, 0.18);
}

.related-task-node-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.related-task-level-label {
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 700;
}

.related-task-name {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.related-task-empty {
  min-height: 0;
  padding: 12px;
  text-align: center;
}

/* Business edit keeps the single project-master ownership action inside the edit flow instead of duplicating it on the detail page. */
.business-edit-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.business-edit-master-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.business-edit-master-section > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.business-edit-master-section strong {
  overflow-wrap: anywhere;
}

/* Shared searchable single-select reserves fixed search and action rows while only its result list scrolls for large datasets. */
.modal-body:has(.searchable-single-select) {
  overflow: hidden;
}

.searchable-single-select {
  display: grid;
  grid-template-rows: auto auto auto minmax(180px, 1fr) auto;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  height: min(620px, calc(100dvh - 150px));
}

.searchable-single-select-search {
  margin: 0;
}

/* Presale business records reuse the shared selector while keeping record fields and reference facets visually distinct. */
.searchable-single-select-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.business-record-fields {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1.55fr);
  gap: 12px;
  min-width: 0;
}

.business-record-content-field,
.business-record-card,
.business-record-card p,
.business-record-reference {
  min-width: 0;
}

.business-record-content-field textarea {
  min-height: 104px;
}

.business-record-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.business-record-card {
  gap: 10px;
}

.business-record-card p,
.business-record-reference {
  overflow-wrap: anywhere;
}

.business-record-card p {
  margin: 0;
  line-height: 1.6;
}

.business-record-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.business-record-reference {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  text-align: left;
}

.business-record-reference span {
  color: var(--color-muted);
  font-size: 12px;
}

.searchable-single-select:has(.business-record-fields) {
  grid-template-rows: auto auto auto auto minmax(180px, 1fr) auto;
}

.searchable-single-select-meta,
.searchable-single-select-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.searchable-single-select-meta {
  color: var(--color-muted);
  font-size: 13px;
}

.searchable-single-select-current {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(43, 90, 237, 0.24);
  border-radius: var(--radius-control);
  background: rgba(237, 242, 255, 0.72);
}

.searchable-single-select-current span {
  flex: 0 0 auto;
  color: var(--color-muted);
  font-size: 12px;
}

.searchable-single-select-current strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.searchable-single-select-results {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  max-height: 440px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.searchable-single-select-option {
  display: grid;
  gap: 4px;
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
}

.searchable-single-select-option strong,
.searchable-single-select-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.searchable-single-select-option span {
  color: var(--color-muted);
  font-size: 12px;
}

.searchable-single-select-option:hover,
.searchable-single-select-option.active,
.searchable-single-select-option:focus-visible {
  border-color: var(--color-accent);
  outline: 2px solid rgba(43, 90, 237, 0.16);
  outline-offset: 1px;
}

.searchable-single-select-option[aria-selected="true"] {
  border-color: var(--color-accent);
  background: var(--color-primary-soft);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.searchable-single-select-empty {
  min-height: 112px;
  place-items: center;
  text-align: center;
}

.searchable-single-select-actions {
  justify-content: flex-end;
  margin: 0;
}

/* Shared searchable multi-select keeps combination filters and actions fixed while the authorized candidate list scrolls independently. */
.modal-body:has(.searchable-multi-select) {
  overflow: hidden;
}

.searchable-multi-select {
  display: grid;
  grid-template-rows: auto auto auto minmax(180px, 1fr) auto auto;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  height: min(660px, calc(100dvh - 150px));
}

.searchable-multi-select-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  color: var(--color-muted);
  font-size: 13px;
}

.searchable-multi-select-pagination > div {
  display: flex;
  gap: 8px;
}

.searchable-multi-select-search,
.searchable-multi-select-filters .field {
  margin: 0;
}

.searchable-multi-select-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.searchable-multi-select-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-muted);
  font-size: 13px;
}

.searchable-multi-select-meta .notice.compact {
  margin: 0;
  padding: 6px 9px;
  font-size: 12px;
}

.searchable-multi-select-results {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.searchable-multi-select-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  cursor: pointer;
}

.searchable-multi-select-option:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-primary-soft);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.searchable-multi-select-option-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.searchable-multi-select-option-copy strong,
.searchable-multi-select-option-copy span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.searchable-multi-select-option-copy span {
  color: var(--color-muted);
  font-size: 12px;
}

.searchable-multi-select-option .relation-inactive {
  color: #8f6414;
  background: var(--color-warning-soft);
}

.searchable-multi-select-option .relation-none {
  color: var(--color-muted);
  background: var(--color-surface-muted);
}

.searchable-multi-select-empty {
  min-height: 112px;
  place-items: center;
  text-align: center;
}

.searchable-multi-select-actions {
  justify-content: flex-end;
  margin: 0;
}

.task-check-list {
  margin-top: 0;
}

.task-check-list li {
  padding: 7px 0;
  border-bottom: 1px solid rgba(228, 230, 235, 0.68);
}

.task-check-list li > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.task-check-list li > span span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-board-card .compact-form {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 2px;
}

.task-board-card .card-actions {
  margin-top: 2px;
}

.check-list,
.event-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li,
.event-list li {
  color: var(--color-muted);
}

.check-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.check-list li.done {
  color: var(--color-green);
}

.event-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

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

.event-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice,
.empty {
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-muted);
  color: var(--color-muted);
}

/* 空状态：faint 图标 + 一句话说明、虚线边界、垂直居中留白充足，服务全局 empty() 输出。 */
.empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-height: 96px;
  padding: 26px 18px;
  border-style: dashed;
  background: transparent;
  color: var(--color-faint);
  text-align: center;
}

.empty .empty-icon {
  width: 30px;
  height: 30px;
  --icon-art-scale-up: 26px;
  --icon-art-size: var(--icon-art-scale-up);
  color: var(--color-faint);
  opacity: 0.72;
}

.notice.success {
  margin-bottom: 14px;
  border-color: #bbe3cb;
  background: var(--color-green-soft);
  color: #147a4a;
  font-weight: 600;
}

.notice.danger {
  border-color: #f0c6c2;
  background: var(--color-red-soft);
  color: #b93a33;
  font-weight: 600;
}

/* User profile modal keeps self-service avatar, nickname, and password maintenance in a single account boundary. */
.user-profile-form {
  display: grid;
  gap: 14px;
}

.user-profile-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.avatar-picker {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.avatar-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.avatar-preview-figure {
  width: 64px;
  height: 64px;
  font-size: 24px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.form-hint {
  margin: 6px 0 0;
  color: var(--color-muted);
  font-size: 12px;
}

/* 4:3 and compact desktop widths keep dashboards readable by reducing chrome and letting cards reflow. */
@media (max-width: 1200px) {
  :root {
    --sidebar-width: 236px;
  }

  .main {
    padding: 20px;
  }

  .global-header {
    padding-inline: 20px;
  }

  .status-grid,
  .module-list,
  .dashboard-stats-grid,
  .knowledge-stats-grid,
  .ai-stats-grid,
  .system-stats-grid,
  .metric-grid,
  .project-stats-grid,
  .task-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }

  .dashboard-insight-grid,
  .surface-grid,
  .settings-ai-dictionaries,
  .inline-form {
    min-width: 0;
  }

  .project-overview-grid,
  .ai-overview-grid,
  .system-overview-grid,
  .organization-management-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  }

  .project-board-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-board-side-drawer {
    top: 124px;
    right: 18px;
  }

  .project-board-summary-grid,
  .project-board-card-grid,
  .project-board-overview-grid,
  .project-board-narrative-grid,
  .project-board-kpi-panel,
  .project-board-overview-knowledge,
  .project-contact-section,
  .project-schedule-section,
  .project-budget-placeholder {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }

  .stat-card,
  .project-stats-grid .stat-card,
  .knowledge-stats-grid .stat-card,
  .ai-stats-grid .stat-card,
  .system-stats-grid .stat-card,
  .task-stats-grid .stat-card {
    min-height: 112px;
  }

  /* 1024px UAT view uses a deliberate 2x2 presale metric grid instead of an auto-fit 3+1 orphan row. */
  .presale-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .business-list-query-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .business-list-keyword,
  .business-list-query-actions {
    grid-column: 1 / -1;
  }

  .business-list-query-actions {
    justify-content: flex-end;
  }

  /* Compact desktop meetings use two deliberate columns and keep upload/link panels from becoming narrow half-cards. */
  .meeting-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meeting-filter-keyword,
  .meeting-filter-form .form-actions {
    grid-column: 1 / -1;
  }

  .meeting-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meeting-material-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Compact widths reserve a right-side rail for AI collaboration so the fixed action never covers presale content. */
  .main:has(.presale-page) {
    padding-right: 84px;
  }

  body:has(.presale-page) .floating-ai-action {
    right: 16px;
    width: 52px;
    min-width: 52px;
    min-height: 52px;
    padding: 0;
    justify-content: center;
    white-space: nowrap;
  }

  body:has(.presale-page) .floating-ai-action > span:last-child {
    display: none;
  }
}

/* Responsive rules collapse production dashboards and detail grids into a clean mobile drawer layout. */
@media (max-width: 900px) {
  .app-shell,
  .two-column {
    grid-template-columns: 1fr;
  }

  .app-shell.production-shell {
    display: block;
    padding-left: 0;
  }

  .mobile-menu-button {
    position: static;
    z-index: auto;
    display: inline-flex;
    min-width: 44px;
    padding-inline: 12px;
    box-shadow: none;
  }

  /* Mobile searchable selectors reuse the shared full-screen modal and keep search/actions fixed around an independently scrolling result list. */
  .modal-body:has(.searchable-single-select),
  .modal-body:has(.searchable-multi-select) {
    overflow: hidden;
    padding: 12px;
  }

  .searchable-single-select {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100%;
  }

  .searchable-single-select-results {
    max-height: none;
  }

  .searchable-single-select:has(.business-record-fields) {
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  }

  .searchable-single-select-filters,
  .business-record-fields {
    grid-template-columns: 1fr;
  }

  /* Tablet and phone meeting pages keep every field and card inside the single-column content rail. */
  .meeting-filter-form,
  .meeting-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .meeting-filter-keyword,
  .meeting-filter-form .form-actions {
    grid-column: 1;
  }

  .meeting-index-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .meeting-index-card > .button {
    justify-self: start;
  }

  .meeting-material-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Mobile knowledge multi-select stacks filter controls and gives the candidate list the remaining full-screen modal height. */
  .searchable-multi-select {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
    width: 100%;
    height: 100%;
  }

  .searchable-multi-select-filters {
    grid-template-columns: 1fr;
  }

  .searchable-multi-select-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .business-edit-master-section {
    align-items: stretch;
    flex-direction: column;
  }

  .business-edit-master-section .button {
    width: 100%;
  }

  .mobile-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    border: 0;
    background: rgba(20, 26, 38, 0.44);
    cursor: pointer;
  }

  .production-shell.mobile-sidebar-open .mobile-sidebar-backdrop {
    display: block;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 70;
    width: min(82vw, 304px);
    max-width: calc(100vw - 48px);
    height: 100dvh;
    padding: 20px 18px 22px;
    transform: translateX(-105%);
    transition: transform var(--motion-base), box-shadow var(--motion-base);
    box-shadow: 18px 0 42px rgba(20, 26, 38, 0.22);
  }

  .sidebar-collapse-button {
    display: none;
  }

  .production-shell.sidebar-collapsed .sidebar {
    padding: 20px 18px 22px;
  }

  .production-shell.sidebar-collapsed .sidebar-topline {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    margin-bottom: 28px;
  }

  .production-shell.sidebar-collapsed .brand {
    justify-content: flex-start;
  }

  .production-shell.sidebar-collapsed .brand div,
  .production-shell.sidebar-collapsed .nav-label,
  .production-shell.sidebar-collapsed .nav-key {
    display: block;
  }

  .production-shell.sidebar-collapsed .nav-icon-wrap {
    display: inline-grid;
  }

  .production-shell.sidebar-collapsed .nav-item {
    display: flex;
    justify-content: space-between;
    min-height: auto;
    padding: 11px 12px;
  }

  .production-shell.sidebar-collapsed .nav-item > span:last-child {
    display: block;
  }

  .production-shell.mobile-sidebar-open .sidebar {
    transform: translateX(0);
  }

  .main {
    padding: 18px 12px 24px;
  }

  .global-header {
    position: sticky;
    min-height: 64px;
    padding: 9px 12px;
  }

  .global-header-context span {
    display: none;
  }

  .global-header-tools {
    gap: 4px;
  }

  .project-board-page {
    padding-right: 0;
  }

  /* Mobile shared modals use the full dynamic viewport and clear desktop centering so every close and submit action remains reachable. */
  .modal,
  .modal.modal-wide,
  .production-shell.sidebar-collapsed .modal,
  .production-shell.sidebar-collapsed .modal.modal-wide {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    transform: none;
    border: 0;
    border-radius: 0;
  }

  /* Every business drawer shares the same phone full-screen boundary and keeps only its body independently scrollable. */
  .drawer {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  /* Collapsed desktop state may persist into mobile; reset its more-specific contacts geometry to the shared full-screen modal. */
  .production-shell.sidebar-collapsed .modal.project-contact-dialog-modal,
  .production-shell.sidebar-collapsed .modal.ai-analysis-modal {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    transform: none;
    border: 0;
    border-radius: 0;
  }

  .modal-head,
  .modal-foot {
    flex-wrap: wrap;
    padding: 12px 14px;
  }

  .modal-body {
    padding: 14px;
  }

  .modal-body > form {
    min-height: 0;
  }

  .modal-body > form > .toolbar:last-child {
    position: sticky;
    bottom: -14px;
    z-index: 2;
    margin: 0 -14px -14px;
    padding: 12px 14px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  /* 手机弹窗正文使用 14px 内边距，同步收紧权限维护吸底操作栏的负边距。 */
  .organization-unit-permissions-form > .form-actions {
    bottom: -14px;
    margin: 0 -14px -14px;
    padding: 12px 14px;
  }

  .status-grid,
  .module-list,
  .dashboard-stats-grid,
  .knowledge-stats-grid,
  .ai-stats-grid,
  .ai-overview-grid,
  .ai-action-queue,
  .system-stats-grid,
  .system-overview-grid,
  .metric-grid,
  .surface-grid,
  .project-stats-grid,
  .project-overview-grid,
  .task-stats-grid,
  .dashboard-chart-grid,
  .dashboard-insight-grid,
  .split,
  .schedule-split,
  .two-up-grid,
  .three-up-grid,
  .mini-metric-grid,
  .grid-form,
  .task-progress-stats,
  .task-grid,
  .content-grid,
  .project-board-layout,
  .project-board-side,
  .project-board-summary-grid,
  .project-board-card-grid,
  .project-board-overview-grid,
  .project-board-narrative-grid,
  .project-board-kpi-panel,
  .project-board-stage-list,
  .project-contact-section,
  .project-schedule-section,
  .project-budget-placeholder,
  .project-knowledge-groups,
  .ai-config-summary,
  .settings-ai-fields,
  .settings-ai-dictionaries,
  .inline-form {
    grid-template-columns: 1fr;
  }

  .project-master-list {
    position: static;
  }

  .project-board-side-drawer {
    top: 92px;
    right: 12px;
  }

  .project-board-drawer-panel {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-height: none;
    height: 100dvh;
    padding: 12px;
    background: var(--color-bg);
  }

  .project-board-schedule-panel {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-height: none;
    height: 100dvh;
    padding: 12px;
    background: var(--color-bg);
  }

  .project-master-items {
    max-height: none;
  }

  .business-project-summary {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .business-project-summary .badge {
    justify-self: start;
  }

  .business-project-details,
  .task-knowledge-row {
    padding-left: 0;
  }

  .topbar,
  .hero-band,
  .page-header,
  .workbench-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-header-actions,
  .hero-actions,
  .heading-actions,
  .toolbar {
    flex-wrap: wrap;
    width: 100%;
  }

  .page-header-page-actions {
    flex: 1 1 240px;
  }

  .page-header-actions .button,
  .heading-actions .button {
    flex: 1 1 144px;
  }

  .project-card-topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-card-actions {
    justify-content: flex-start;
    max-width: 100%;
  }

  .floating-ai-action {
    right: 16px;
    --floating-ai-bottom: 76px;
    bottom: var(--floating-ai-bottom);
  }

  .business-list-query-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .business-list-keyword,
  .business-list-query-actions {
    grid-column: auto;
  }

  .business-list-query-actions {
    justify-content: stretch;
  }

  .business-list-query-actions .button {
    flex: 1 1 0;
  }

  .business-list-pagination {
    justify-content: center;
  }

  .donut-layout {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .calendar-toolbar,
  .flow-rail-head {
    grid-template-columns: 1fr;
  }

  .flow-track {
    display: grid;
  }

  .calendar-toolbar,
  .flow-rail-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .bar-row {
    grid-template-columns: 88px minmax(0, 1fr) 48px;
  }

  .task-lane {
    flex-basis: min(304px, 88vw);
  }

  .ratio-visual-grid,
  .priority-task-list {
    grid-template-columns: 1fr;
  }

  .schedule-task-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .schedule-task-action {
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .main {
    padding: 16px 10px 18px;
  }

  .global-header {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
  }

  .global-header-leading {
    flex: 1 1 auto;
  }

  .global-header-context {
    display: none;
  }

  .global-header-tools {
    display: grid;
    flex: 1 1 100%;
    grid-template-columns: minmax(0, 1fr) 40px 42px 48px;
    width: 100%;
  }

  /* Phone headers constrain every title and action group to the content rail so long descriptions and multi-action details cannot clip horizontally. */
  .page-header {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }

  .page-header-main {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }

  .page-header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    min-width: 0;
  }

  .header-organization-switch {
    width: 100%;
  }

  .header-organization-caption {
    display: none;
  }

  .header-organization-select {
    height: 40px;
    padding-left: 10px;
    background-color: var(--color-surface-muted);
  }

  .header-user-meta {
    display: none;
  }

  .header-user-button {
    width: 42px;
    height: 42px;
    padding: 4px;
  }

  .header-logout-button {
    width: 48px;
    min-height: 42px;
    padding: 0 6px;
  }

  .page-header-page-actions {
    display: grid;
    flex: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    min-width: 0;
  }

  .page-header-page-actions .button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-inline: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .page-header-page-actions .button:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* Settings keeps four overview metrics in a compact 2x2 phone grid so the active management tab remains discoverable near the first viewport. */
  .settings-page > .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* Phone meeting controls use full-width touch targets without returning to compressed native-inline layouts. */
  .meeting-index-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .meeting-participant-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .meeting-participant-option {
    width: 100%;
    border-radius: var(--radius-control);
  }

  .meeting-write-form .form-actions,
  .meeting-filter-form .form-actions,
  .meeting-material-actions .form-actions,
  .meeting-status-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .meeting-write-form .form-actions .button,
  .meeting-filter-form .form-actions .button,
  .meeting-material-actions .form-actions .button,
  .meeting-status-actions .button {
    width: 100%;
  }

  /* Related-task drawer occupies the dynamic mobile viewport while its body remains the only scrolling region. */
  .related-task-drawer {
    width: 100vw;
    height: 100dvh;
  }

  /* Business relationship lookup uses the same dynamic full-screen mobile boundary while preserving its internal scroll region. */
  .business-relationship-drawer {
    width: 100vw;
    height: 100dvh;
  }

  .business-relationship-drawer .drawer-body {
    padding: 12px;
  }

  .related-task-drawer .drawer-body {
    padding: 12px;
  }

  .related-task-node {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .related-task-node .button {
    justify-self: start;
  }

  .related-task-children {
    margin-left: 8px;
    padding-left: 8px;
  }

  .page-shell {
    gap: 12px;
  }

  .workspace,
  .chart-card,
  .stat-card {
    padding: 14px;
  }

  .page-header h1,
  .workbench-heading h1 {
    font-size: 20px;
  }

  /* Presale detail actions stay inside the phone viewport while keeping return, edit, and both task-entry contexts directly reachable. */
  .presale-detail-header .page-header-actions {
    display: grid;
    gap: 10px;
  }

  .presale-detail-header .page-header-page-actions {
    display: grid;
    flex: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .presale-detail-header .page-header-page-actions .button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-inline: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .presale-detail-header .page-header-page-actions .button:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* Phone users receive a visible cue that the business-stage rail continues beyond the first visible nodes. */
  .presale-detail-page .flow-scroll-hint {
    display: block;
  }

  .stat-card-head {
    grid-template-columns: minmax(0, 1fr) 40px;
  }

  .stat-card-head .stat-icon,
  .stat-signal,
  .stat-icon {
    width: 38px;
    height: 38px;
  }

  .inline-form,
  .grid-form {
    gap: 10px;
  }

  /* 手机端组织管理表单使用单列，避免编码、角色和提交动作互相挤压。 */
  .organization-management-panel {
    grid-template-columns: 1fr;
  }

  .organization-management-panel > div {
    grid-column: 1;
  }

  /* Task creation uses one stable mobile column; collaborator checkboxes keep their native touch size. */
  .task-create-form {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .task-create-form .field.full,
  .task-create-actions {
    grid-column: 1;
  }

  .table-wrap table,
  .message-table-scroll table {
    min-width: 680px;
  }

  .knowledge-scope-tabs,
  .settings-section-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .knowledge-scope-tabs .tab,
  .settings-section-tabs .tab {
    flex: 1 0 96px;
  }
}
/* Aftersale requirement rows: shared by business-list expansion and detail pages. */
.aftersale-requirement-block,
.aftersale-requirement-list,
.aftersale-requirement-change-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.aftersale-requirement-heading,
.aftersale-requirement-title-row,
.aftersale-requirement-change-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.aftersale-requirement-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.aftersale-requirement-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.aftersale-requirement-main p,
.aftersale-requirement-change p {
  margin: 0;
}

.aftersale-requirement-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* Aftersale requirement rows keep inherited child tasks inside the effective requirement's nested task tree. */
.aftersale-requirement-tasks {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

.aftersale-requirement-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 7px 9px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-control);
}

/* Requirement-row overflow menu keeps the destructive cancellation action separate from frequent commands. */
.aftersale-requirement-more {
  position: relative;
}

.aftersale-requirement-more > summary {
  cursor: pointer;
  list-style: none;
  color: var(--color-muted);
  font-size: 13px;
}

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

.aftersale-requirement-more-menu {
  position: absolute;
  z-index: 4;
  top: calc(100% + 6px);
  right: 0;
  min-width: 120px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-panel);
}

/* Cancellation preview identifies the target requirement, then groups tasks and recipients before irreversible confirmation. */
.aftersale-requirement-cancel-form,
.aftersale-cancel-requirement-summary,
.aftersale-cancel-preview-group,
.aftersale-cancel-preview-list {
  display: grid;
  gap: 10px;
}

.aftersale-requirement-cancel-form {
  gap: 16px;
}

.aftersale-cancel-requirement-summary {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.aftersale-cancel-requirement-summary h3,
.aftersale-cancel-requirement-summary .muted {
  margin: 0;
}

.aftersale-cancel-requirement-summary .muted {
  grid-column: 1 / -1;
}

.aftersale-cancel-preview-group h3 {
  margin: 0;
  font-size: 15px;
}

.aftersale-cancel-preview-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}

.aftersale-cancel-recipient-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aftersale-cancel-recipient-list > span,
.aftersale-cancel-confirm {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.aftersale-cancel-confirm {
  display: flex;
  align-items: center;
  gap: 9px;
}

.aftersale-requirement-change {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
}

@media (max-width: 900px) {
  /* Mobile requirement rows keep commands below content so long titles never collide with actions. */
  .aftersale-requirement-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .aftersale-requirement-actions {
    justify-content: flex-start;
  }
}

/* Aftersale detail flow: every business section remains full-width and follows the operational reading order. */
.aftersale-detail-page {
  position: relative;
  padding-right: 58px;
}

.aftersale-task-branches,
.aftersale-task-branch {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.aftersale-task-branch {
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.aftersale-task-branch-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.aftersale-task-branch-heading h3,
.aftersale-business-activity p {
  margin: 0;
}

.aftersale-presale-link {
  margin-bottom: 10px;
}

/* Business change history stays in a dedicated right-side drawer instead of consuming detail-page body space. */
.business-change-floating-entry {
  position: fixed;
  z-index: 16;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

.business-change-floating-button {
  width: 44px;
  min-width: 44px;
  min-height: 126px;
  padding: 10px 8px;
  color: var(--color-primary);
  background: var(--color-surface);
  border-color: var(--color-primary);
  writing-mode: vertical-rl;
  box-shadow: var(--shadow-panel);
}

.business-change-drawer {
  width: min(460px, calc(100vw - 24px));
}

@media (max-width: 900px) {
  /* Phone layouts reclaim the fixed trigger rail; Ticket 07 moves secondary commands into the page action menu. */
  .aftersale-detail-page {
    padding-right: 0;
  }

  .aftersale-task-branch-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .business-change-floating-entry {
    display: none;
  }

  .business-change-drawer {
    width: 100vw;
    height: 100dvh;
  }
}

/* Business detail actions share one desktop command row and one compact phone command boundary. */
.business-detail-secondary-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.business-detail-more-actions {
  display: none;
  position: relative;
}

.business-detail-more-actions > summary {
  display: grid;
  place-items: center;
  min-width: 38px;
  list-style: none;
  cursor: pointer;
}

.business-detail-more-actions > summary::-webkit-details-marker {
  display: none;
}

.business-detail-more-menu {
  position: absolute;
  z-index: 18;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 6px;
  min-width: 150px;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.business-detail-more-menu .button {
  width: 100%;
  justify-content: flex-start;
}

@media (max-width: 600px) {
  /* Four route metrics stay in a stable 2x2 scan pattern instead of collapsing to four tall rows. */
  .presale-page .project-stats-grid,
  .aftersale-page .project-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .presale-page .project-stats-grid .stat-card,
  .aftersale-page .project-stats-grid .stat-card {
    min-height: 104px;
    padding: 12px;
  }

  .business-detail-header .page-header-actions {
    display: grid;
    gap: 10px;
  }

  .business-detail-header .page-header-page-actions {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 8px;
    width: 100%;
  }

  .business-detail-header .page-header-page-actions > .button {
    width: 100%;
    min-width: 0;
  }

  .business-detail-back-label,
  .business-detail-secondary-actions {
    display: none;
  }

  .business-detail-more-actions {
    display: block;
  }

  .business-detail-more-actions > summary {
    width: 40px;
    height: 100%;
    padding: 8px;
  }
}

/* Phone preview keeps a single full-screen activity layer while allowing wide CSV data to scroll internally. */
@media (max-width: 600px) {
  .modal.knowledge-preview-modal {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    transform: none;
    border: 0;
    border-radius: 0;
  }

  .knowledge-preview-entry,
  .knowledge-preview-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .knowledge-preview-shell,
  .knowledge-preview-surface,
  .knowledge-preview-image,
  .knowledge-preview-text {
    min-height: 0;
  }

  .knowledge-pdf-preview {
    height: calc(100dvh - 170px);
    min-height: 0;
  }

  .knowledge-image-preview {
    height: calc(100dvh - 170px);
    min-height: 0;
  }

  .knowledge-pdf-toolbar,
  .knowledge-image-toolbar {
    padding: 8px;
  }

  .knowledge-pdf-canvas-stage,
  .knowledge-preview-image {
    padding: 10px;
  }
}

/* Permission maintenance remains readable in 4:3 and phone modals without squeezing action names into narrow columns. */
@media (max-width: 900px) {
  .permission-tree-detail {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .permission-tree-detail-label {
    padding-top: 0;
  }

  .permission-tree-leaves {
    grid-template-columns: 1fr;
  }

  .permission-tree-menu-controls {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* 全局细滚动条：商务 SaaS 克制的滚动视觉，服务所有内部滚动容器，不改变布局尺寸。 */
* {
  scrollbar-width: thin;
  scrollbar-color: #c7ccd5 transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #ced3db;
}

*::-webkit-scrollbar-thumb:hover {
  background: #b6bdc8;
}

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

/* 动效降级：移除位移、缩放和循环运动，保留颜色、边框与透明度反馈帮助识别状态。 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-property: color, background-color, border-color, opacity, box-shadow !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
 * 视觉焕新增量合并 · 来源域名：dashboard（.scratch/visual-redesign/css-requests/dashboard.css，20260720-ratio-metrics-fix）
 * ========================================================================== */

/* ==========================================================================
 * 工作台域视觉增量（dashboard）
 * 服务范围：工作台页（app/domains/dashboard.js）的统计卡下游版块——
 * 关键运营指标图形卡、优先处理任务卡、消息管理卡、日程管理卡与分析概览。
 * 说明：本文件为视觉焕新波次一的样式增量请求，由收口代理合并进 styles.css；
 * 只新增/增强样式，不删除既有 hooks；全部走设计纲要 token，动效尊重
 * prefers-reduced-motion，禁止渐变堆砌与厚重投影。
 * ========================================================================== */

/* ---------- 区域：关键运营指标图形卡主区（ratio-visual-main 承载环形图+文字） ---------- */
.ratio-visual-main {
  display: flex;
  align-items: center;
  gap: var(--space-card, 16px);
  min-width: 0;
}

.ratio-visual-main .ratio-visual-content {
  flex: 1;
  min-width: 0;
}

.ratio-visual-card {
  transition:
    box-shadow var(--motion-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--motion-base, 200ms cubic-bezier(0.4, 0, 0.2, 1));
}

.ratio-visual-card:hover {
  box-shadow: var(--shadow-panel-hover);
  transform: translateY(-1px);
}

/* 指标说明文字统一弱化色，与标题层级拉开 */
.ratio-visual-detail {
  color: var(--color-muted);
}

/* 分项清单数字使用等宽数字，保证四张卡横向可比 */
.ratio-visual-breakdown strong {
  font-variant-numeric: tabular-nums;
}

.ratio-visual-breakdown li {
  transition: background var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

/* ---------- 区域：优先处理任务卡（超期标记、序号、进度与动作列精修） ---------- */
.priority-task-card {
  transition:
    box-shadow var(--motion-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--motion-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.priority-task-card:hover {
  box-shadow: var(--shadow-panel-hover);
  transform: translateY(-1px);
}

/* 超期任务用左侧警示色边条提示，不改变排序与徽章契约 */
.priority-task-card.is-overdue {
  border-color: var(--color-warning);
  box-shadow: inset 3px 0 0 var(--color-warning), var(--shadow-panel);
}

.priority-task-rank {
  font-variant-numeric: tabular-nums;
}

/* 前三名序号用主蓝软底强调，其余保持弱化灰 */
.priority-task-rank.priority-rank-1,
.priority-task-rank.priority-rank-2,
.priority-task-rank.priority-rank-3 {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.priority-task-progress {
  margin-top: 8px;
}

/* 详情按钮在行内垂直居中，小屏折叠时随卡片流式排列 */
.priority-task-action {
  align-self: center;
  flex-shrink: 0;
}

/* ---------- 区域：消息管理表格行状态（未读高亮、时间/来源弱化列） ---------- */
.message-row-unread .message-title-cell {
  font-weight: 600;
  color: var(--color-ink);
}

.message-row-read .message-title-cell {
  color: var(--color-text);
}

.message-source-cell {
  color: var(--color-muted);
}

.message-time-cell {
  color: var(--color-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.message-action-cell {
  white-space: nowrap;
}

/* ---------- 区域：日历周末列弱化着色（仅视觉，不影响选中/今天/计数逻辑） ---------- */
.calendar-day.weekend:not(.muted):not(.selected) {
  background: var(--color-surface-muted);
}

.calendar-day.weekend.muted {
  opacity: 0.7;
}

/* ---------- 区域：统一结构化空态（图标软底块 + 主说明 + 弱化提示） ---------- */
.dashboard-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
}

.dashboard-empty-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* 空态图标沿用 sprite 裁切体系，与统计卡 40px 框 / 42px 图案比例一致 */
.dashboard-empty-icon .dashboard-empty-mark {
  --icon-art-size: var(--icon-art-scale-up, 42px);
}

.dashboard-empty-text {
  font-size: var(--font-size-body, 14px);
  line-height: var(--line-height-body, 22px);
  color: var(--color-muted);
}

.dashboard-empty-hint {
  font-size: var(--font-size-caption, 12px);
  line-height: var(--line-height-caption, 18px);
  color: var(--color-faint);
}

/* ---------- 区域：日程任务明细头计数与图表卡头部布局 ---------- */
.schedule-head-count {
  font-variant-numeric: tabular-nums;
}

/* 图表卡头部标题文字区可收缩，状态徽标固定在右侧 */
.chart-title-text {
  min-width: 0;
}

.chart-card-side {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}

/* ---------- 区域：分析概览 mini 卡（hover 反馈与数字排版） ---------- */
.mini-card {
  transition:
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.mini-card:hover {
  box-shadow: var(--shadow-panel-hover);
  transform: translateY(-1px);
}

.mini-card strong {
  font-variant-numeric: tabular-nums;
}

/* ---------- 区域：减少动效偏好（工作台域全部过渡降级） ---------- */
@media (prefers-reduced-motion: reduce) {
  .ratio-visual-card,
  .priority-task-card,
  .mini-card,
  .ratio-visual-breakdown li {
    transition: none;
  }

  .ratio-visual-card:hover,
  .priority-task-card:hover,
  .mini-card:hover {
    transform: none;
  }
}


/* ==========================================================================
 * 视觉焕新增量合并 · 来源域名：knowledge（.scratch/visual-redesign/css-requests/knowledge.css，20260720-ratio-metrics-fix）
 * ========================================================================== */

/* ==========================================================================
   知识库域视觉精修增量（2026-07 视觉焕新 · 方向 A 商务 SaaS 蓝白提质）
   服务边界：仅覆盖 production/apps/web/public/app/domains/knowledge.js 渲染的
   知识库列表页、知识详情页、已删除知识页与高级查询摘要。
   使用方式：由 styles.css 所有者审阅后追加合并；本文件不改任何既有规则，
   只针对 knowledge.js 新增的组件类与知识库域专属 hooks 做精修。
   依赖 token：--color-* / --shadow-panel / --radius-card 等沿用全局 token 层；
   动效 token 提供回退值，避免 token 收口前出现无效声明。
   ========================================================================== */

/* --------------------------------------------------------------------------
   分区一：知识库列表页 · 文件单元格（图标 + 双行元信息）
   服务模块：知识资产列表表格首列；语义图标复用 businessIcon("document")，
   软色底 36px 图标块对齐统计卡图标语言，编号弱化为第二行辅助信息。
   -------------------------------------------------------------------------- */
.knowledge-file-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.knowledge-file-icon.business-icon.icon-sprite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  --icon-art-scale-up: 20px;
  --icon-art-size: var(--icon-art-scale-up);
}

.knowledge-file-meta {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.knowledge-file-meta strong {
  overflow: hidden;
  color: var(--color-ink);
  font-size: 14px;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-file-meta .muted {
  margin-top: 0;
  font-size: 12px;
  line-height: 18px;
}

/* 版本号使用等宽数字，保证列表纵向扫描时对齐稳定 */
.knowledge-version-tag {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   分区二：知识库列表页 / 已删除知识页 · 行操作按钮组
   服务模块：列表操作列的 详情/下载/重新上传/变更记录/删除/恢复 按钮；
   统一为紧凑横向按钮组，窄列自动换行，不改变按钮数量和顺序。
   -------------------------------------------------------------------------- */
.knowledge-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.knowledge-row-actions .button.small {
  flex: 0 0 auto;
}

.knowledge-row-actions .muted {
  margin-top: 0;
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   分区三：范围切换分段控件精修（.knowledge-scope-tabs）
   服务模块：知识库列表页 售前/售后/通用 范围切换与高级查询临时页签；
   沿用契约锁定的容器/页签 class，仅精修轨道质感、滑块投影与动效。
   -------------------------------------------------------------------------- */
.knowledge-scope-tabs {
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(20, 26, 38, 0.05);
}

.knowledge-scope-tabs .tab {
  min-height: 30px;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition:
    background var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.knowledge-scope-tabs .tab:hover {
  box-shadow: none;
}

.knowledge-scope-tabs .tab.active {
  box-shadow: var(--shadow-panel);
  font-weight: 700;
}

.knowledge-scope-tabs .tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* 高级查询临时页签的关闭按钮与分段控件圆角语言保持一致 */
.knowledge-search-tab-close {
  transition:
    background var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.knowledge-search-tab-close:hover,
.knowledge-search-tab-close:focus-visible {
  background: var(--color-surface-muted);
  color: var(--color-ink);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* --------------------------------------------------------------------------
   分区四：高级查询摘要与筛选条件 chips
   服务模块：高级查询结果页的筛选摘要卡；条件 chips 改为白底 pill，
   与徽章体系区分，强调“已生效条件”的可扫描性。
   -------------------------------------------------------------------------- */
.knowledge-search-summary {
  border-radius: var(--radius-card, 12px);
  background: var(--color-surface-muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.knowledge-filter-chip.badge {
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   分区五：知识详情页 · 顶部统计卡（文本型指标）
   服务模块：知识详情页 版本/来源/任务链接/工具手册引用 四卡；
   数值可能是版本号或中文文本，收窄字号并允许折行，避免撑破卡片。
   -------------------------------------------------------------------------- */
.knowledge-detail-stats-grid .stat-value {
  overflow-wrap: anywhere;
  font-size: 20px;
  line-height: 26px;
}

/* --------------------------------------------------------------------------
   分区六：知识详情页 / 已删除知识详情页 · 文件信息键值表
   服务模块：详情页“文件信息”“删除信息”两栏字段表；隐藏冗余表头，
   首列呈现为弱化标签列，整体读取为键值对说明列表。
   -------------------------------------------------------------------------- */
.knowledge-info-table .table-wrap {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card, 12px);
}

.knowledge-info-table thead {
  display: none;
}

.knowledge-info-table table td:first-child {
  width: 108px;
  color: var(--color-muted);
  font-size: 13px;
  white-space: nowrap;
}

.knowledge-info-table table td:last-child {
  color: var(--color-text);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   分区七：知识详情页 · 关联追溯横向流转卡
   服务模块：关联追溯版块的 知识文件 → 任务 → 项目 链路；
   节点顺序不变，卡片由纵向堆叠精修为横向流转，箭头弱化为引导符号。
   -------------------------------------------------------------------------- */
.knowledge-trace-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.knowledge-trace-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 14px 16px;
  border-radius: var(--radius-card, 12px);
  box-shadow: var(--shadow-panel);
  transition: box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.knowledge-trace-card:hover {
  box-shadow: var(--shadow-panel-hover);
}

.knowledge-trace-card .trace-arrow {
  color: var(--color-faint);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   分区八：知识详情页 · 业务关系卡
   服务模块：业务关系版块的 项目/售前/售后/任务知识 关系卡；
   卡片自适应填充，关系说明弱化为辅助行。
   -------------------------------------------------------------------------- */
.knowledge-business-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 12px;
}

.knowledge-business-link-card {
  display: grid;
  gap: 4px;
  border-radius: var(--radius-card, 12px);
  box-shadow: var(--shadow-panel);
  transition:
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.knowledge-business-link-card:hover {
  box-shadow: var(--shadow-panel-hover);
  transform: translateY(-1px);
}

.knowledge-business-link-meta {
  overflow: hidden;
  color: var(--color-muted);
  font-size: 12px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 知识详情与关系树：文件信息独占整行；关系选择按项目主档、业务、任务逐级缩进。 */
.knowledge-detail-full-width {
  display: grid;
  min-width: 0;
}

.knowledge-relation-tree-form,
.knowledge-relation-tree,
.knowledge-relation-tree-options,
.knowledge-relation-business-branch,
.knowledge-relation-task-branch {
  display: grid;
  gap: 8px;
}

.knowledge-relation-tree {
  max-height: min(560px, 60dvh);
  overflow: auto;
}

/* 关系树查询：默认保持项目折叠，仅在用户输入名称时展开匹配分组，避免大项目树一打开就铺满屏幕。 */
.knowledge-relation-search-field {
  margin: 0;
}

.knowledge-relation-search-empty[hidden],
.knowledge-relation-master[hidden] {
  display: none;
}

.knowledge-relation-master {
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}

.knowledge-relation-master > summary {
  color: var(--color-ink);
  font-weight: 700;
  cursor: pointer;
}

.knowledge-relation-tree-options {
  margin-top: 10px;
}

.knowledge-relation-business-branch,
.knowledge-relation-task-branch {
  margin-left: 22px;
}

.knowledge-relation-tree-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-ink);
}

.knowledge-relation-tree-option input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.knowledge-relation-tree-option span {
  display: grid;
  gap: 2px;
}

.knowledge-relation-tree-option small {
  color: var(--color-muted);
}

.knowledge-relation-tree-option.is-linked {
  background: var(--color-surface-muted);
}

/* 知识详情版本抽屉：压缩单条记录高度，并把预览/下载统一收口到正文下方同一操作行。 */
.drawer .knowledge-version-timeline {
  gap: 0;
  align-content: start;
}

.drawer .knowledge-version-timeline .knowledge-version-item {
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 8px 0;
  min-height: 0;
}

.drawer .knowledge-version-body {
  display: grid;
  gap: 2px;
  align-content: start;
  min-width: 0;
  line-height: 18px;
}

.knowledge-version-body > span {
  overflow-wrap: anywhere;
}

.drawer .knowledge-version-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.drawer .knowledge-version-actions .button.small {
  min-height: 30px;
  padding-inline: 9px;
}

/* 创建知识范围：三个有限枚举改为分段单选，绕开缩放/低分辨率下原生下拉弹层坐标漂移。 */
.knowledge-scope-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.knowledge-scope-field legend {
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
}

.knowledge-scope-choice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.knowledge-scope-choice label {
  position: relative;
  min-width: 0;
}

.knowledge-scope-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.knowledge-scope-choice span {
  display: flex;
  min-height: calc(var(--control-height) - 8px);
  align-items: center;
  justify-content: center;
  padding-inline: 8px;
  border-radius: calc(var(--radius-control) - 3px);
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.knowledge-scope-choice input:checked + span {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-panel);
}

.knowledge-scope-choice input:focus-visible + span {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* 删除确认：按风险说明、对象摘要、影响统计、确认表单四层排布，避免表格和表单相互挤压。 */
.knowledge-delete-confirmation,
.knowledge-delete-impact,
.knowledge-delete-form {
  display: grid;
  gap: 12px;
}

.knowledge-delete-summary {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-muted);
}

.knowledge-delete-summary .eyebrow {
  margin: 0;
}

.knowledge-delete-section-title {
  display: flex;
  gap: 8px 16px;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
}

.knowledge-delete-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.knowledge-delete-impact-item {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}

.knowledge-delete-impact-item strong {
  font-variant-numeric: tabular-nums;
}

.knowledge-delete-confirm-check {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(185, 58, 51, 0.24);
  border-radius: var(--radius-control);
  background: var(--color-red-soft);
}

.knowledge-delete-confirm-check input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.knowledge-delete-form .form-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   分区九：已删除知识详情页 · 恢复影响摘要
   服务模块：恢复影响摘要版块；大数字使用等宽数字并与说明文字拉开层级。
   -------------------------------------------------------------------------- */
.deleted-knowledge-impact {
  display: grid;
  gap: 4px;
  justify-items: start;
  padding: 8px 2px;
}

.deleted-knowledge-impact .stat-value {
  font-variant-numeric: tabular-nums;
}

.deleted-knowledge-impact .muted {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   分区十：响应式精修（知识库域）
   服务模块：4:3 与手机竖屏下的列表单元格与追溯卡；
   仅收紧间距与换列，不改变任何交互与信息层级。
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .knowledge-detail-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .knowledge-file-cell {
    gap: 10px;
  }

  .knowledge-file-icon.business-icon.icon-sprite {
    width: 32px;
    height: 32px;
    --icon-art-scale-up: 18px;
  }

  .knowledge-detail-stats-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-info-table table td:first-child {
    width: 92px;
  }
}

/* 尊重系统减弱动效偏好：关闭本域新增的过渡与位移 */
@media (prefers-reduced-motion: reduce) {
  .knowledge-scope-tabs .tab,
  .knowledge-search-tab-close,
  .knowledge-trace-card,
  .knowledge-business-link-card {
    transition: none;
  }

  .knowledge-business-link-card:hover {
    transform: none;
  }
}


/* ==========================================================================
 * 视觉焕新增量合并 · 来源域名：presale-aftersale（.scratch/visual-redesign/css-requests/presale-aftersale.css，20260720-ratio-metrics-fix）
 * ========================================================================== */

/*
 * 视觉焕新样式增量申请 —— 售前/售后域（presale / aftersale / projects 三个 domain 模块）
 * 服务边界：售前管理列表与详情、售后管理列表与详情、旧版项目管理页（renderProjects）。
 * 合并说明：本文件由专项域代理提交，请 styles.css 所有者合并进正式样式表；
 * 若与全局 token 层（--color-* / --shadow-* / --radius-*）新值冲突，以设计纲要 token 为准。
 * 仅做组件内视觉提质，不改变任何布局结构、交互时序与契约 class；新增 class 均有对应 JS 输出。
 */

/* ============================================================
 * 区域一：关联业务卡 business-link-card
 * 服务模块：售前详情「售后关联」版块、售后详情「售前关联」版块。
 * 目标：把原本裸 strong + muted 的 module-card 行提质为商务 SaaS 关联行：
 * 左侧 3px 主蓝指示条、标题 14px/22px 600、meta 12px 次要色、hover 浅灰底。
 * ============================================================ */
.business-link-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 17px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card, 12px);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
  transition: background-color var(--motion-fast), box-shadow var(--motion-fast);
}

/* 关联卡左侧指示条：表达“跨业务关联”语义，不引入第二个强调色相 */
.business-link-card::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-primary);
  content: "";
}

.business-link-card:hover {
  background: var(--color-surface-muted);
  box-shadow: var(--shadow-panel-hover);
}

.business-link-card-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.business-link-card-main strong {
  margin: 0;
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}

.business-link-card-meta {
  font-size: 12px;
  line-height: 18px;
}

/* 售后详情售前关联卡沿用既有下间距契约，仅叠加新结构样式 */
.aftersale-presale-link.business-link-card {
  margin-bottom: 10px;
}

/* ============================================================
 * 区域二：业务动态时间轴精修（timeline-time / timeline-body / timeline-operator）
 * 服务模块：售后详情「业务动态」版块（renderAftersaleActivity）。
 * 目标：时间列固定宽、12px 弱化色右对齐感；内容列标题 14px 600、
 * 正文次要色、操作人弱化；行间发丝分隔，整体更紧凑商务。
 * ============================================================ */
.aftersale-business-activity .timeline-item {
  align-items: start;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
}

.timeline-time {
  padding-top: 2px;
  color: var(--color-faint);
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.timeline-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.timeline-body strong {
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}

.timeline-body p {
  margin: 0;
  color: var(--color-text);
  font-size: 13px;
  line-height: 20px;
}

.timeline-operator {
  font-size: 12px;
  line-height: 18px;
}

/* ============================================================
 * 区域三：旧版项目管理页项目卡片精修（renderProjects 的 projectCard）
 * 服务模块：项目管理页售前/售后业务清单。
 * 背景：projectCard 已复用共享 project-card-topline 头部结构，
 * 此处补齐 meta 行排版与进度条间距，使旧版卡片与业务清单卡节奏一致。
 * ============================================================ */
.projects-page .project-card .project-card-topline {
  margin-bottom: 12px;
}

.project-card-meta {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 18px;
}

.projects-page .project-card .progress,
.projects-page .project-card [class*="progress"] {
  margin-top: 2px;
}

/* 旧版项目卡 hover 与统计卡一致：轻升浮，不做大面积投影堆砌 */
.projects-page .project-card {
  transition: box-shadow var(--motion-fast), transform var(--motion-fast);
}

.projects-page .project-card:hover {
  box-shadow: var(--shadow-panel-hover);
  transform: translateY(-1px);
}

/* ============================================================
 * 区域四：项目状态概览数字与类型排版
 * 服务模块：项目管理页「项目状态概览」的进度排行与健康状态分布两张 chart-card。
 * 目标：百分比与计数字符等宽（tabular-nums），业务类型标签弱化。
 * ============================================================ */
.project-progress-value,
.project-health-value {
  font-variant-numeric: tabular-nums;
}

.project-progress-type {
  font-size: 12px;
  line-height: 18px;
}

/* ============================================================
 * 区域五：五阶段单行流程轨 project-flow-rail 提质
 * 服务模块：售前/售后详情页「业务进展」流程轨（prototype-helpers.projectProgressRail）。
 * 目标对齐设计纲要：轨道浅灰 pill、填充实心主蓝（禁渐变）、
 * 节点完成态绿 / 当前态主蓝 / 未来态灰；--flow-count / --flow-min-width / --flow-progress 逻辑不变。
 * 说明：以下规则用于覆盖既有渐变填充与“完成态=主蓝”的旧口径。
 * ============================================================ */
.flow-track-progress {
  background: var(--color-border);
  box-shadow: none;
}

.flow-track-progress::after {
  background: var(--color-primary);
}

/* 完成态节点：实心绿点 + 白描边，区别于当前态主蓝 */
.flow-node.done .flow-dot {
  background: var(--color-green);
  box-shadow: 0 0 0 1px rgba(24, 154, 94, 0.28), 0 4px 10px rgba(24, 154, 94, 0.16);
}

/* 当前态节点：实心主蓝 + 软蓝外环，label 用主蓝软底色胶囊 */
.flow-node.active .flow-dot {
  background: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft), 0 0 0 1px rgba(43, 90, 237, 0.3);
}

.flow-node.active .flow-label {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 600;
}

.flow-node.done .flow-label {
  color: var(--color-text);
}

/* 未来态节点：弱化灰，保持足够留白与可读性 */
.flow-node:not(.done):not(.active) .flow-dot {
  background: var(--color-border-strong);
  box-shadow: 0 0 0 1px var(--color-border);
}

.flow-node:not(.done):not(.active) .flow-label {
  color: var(--color-faint);
}

/* 流程轨卡片本体：统一卡片圆角与轻阴影口径 */
.flow-rail {
  border-radius: var(--radius-card, 12px);
}

/* ============================================================
 * 区域六：售前业务记录卡精修（交流记录 / 招标信息）
 * 服务模块：售前详情 business-record-list（renderBusinessRecordList）。
 * 目标：卡片 hover 浅灰底、头部日期弱化等宽、头部与正文之间增加呼吸感。
 * ============================================================ */
.business-record-card {
  border-radius: var(--radius-card, 12px);
  transition: background-color var(--motion-fast), box-shadow var(--motion-fast);
}

.business-record-card:hover {
  background: var(--color-surface-muted);
  box-shadow: var(--shadow-panel-hover);
}

.business-record-card-head time {
  color: var(--color-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 18px;
}

/* ============================================================
 * 区域七：售后任务分支与需求分支容器精修
 * 服务模块：售后详情「任务」版块（renderAftersaleTaskBranches）、
 * 业务卡展开区 aftersale-business-requirements / aftersale-business-development。
 * 目标：分支容器统一卡片圆角与白底、分支标题发丝分隔线，层级更清晰。
 * ============================================================ */
.aftersale-task-branch {
  border-radius: var(--radius-card, 12px);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.aftersale-task-branch-heading {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

.aftersale-task-branch-heading h3 {
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}

.business-card-expanded-section {
  border-radius: var(--radius-card, 12px);
}

.business-card-expanded-section h3 {
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}

.business-card-expanded-heading {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

/* ============================================================
 * 区域八：售前详情双列版块间距微调
 * 服务模块：售前详情「基本信息 / 售后关联」与「项目文档 / 项目变更记录」surface-grid。
 * 目标：双列版块在 4:3 视口保持均衡 gutter，卡片内 module-list 行距收紧。
 * ============================================================ */
.presale-detail-page .surface-grid .module-list {
  gap: 10px;
}

.presale-detail-page .two-up-grid,
.business-record-sections {
  align-items: start;
}

/* ============================================================
 * 区域九：动效可访问性收口
 * 服务模块：本文件全部新增过渡；尊重系统减弱动效设置。
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .business-link-card,
  .business-record-card,
  .projects-page .project-card {
    transition: none;
  }

  .projects-page .project-card:hover {
    transform: none;
  }
}


/* ==========================================================================
 * 视觉焕新增量合并 · 来源域名：tasks（.scratch/visual-redesign/css-requests/tasks.css，20260720-ratio-metrics-fix）
 * ========================================================================== */

/* ==========================================================================
   任务域视觉精修增量（tasks.css）
   服务边界：任务管理页（tasks-page）与任务详情页（task-detail-page）。
   本文件只叠加视觉增强，不移除 styles.css 中任何契约锁定规则；
   .task-stats-grid 的 repeat(4, minmax(0, 1fr)) / align-items: stretch /
   宽度 width: 100% 基线仍由 styles.css 提供，此处仅做 hover、排版与响应式增强。
   全部颜色/阴影/圆角/动效引用设计 token，随 token 层统一焕新。
   ========================================================================== */

/* --------------------------------------------------------------------------
   区域：任务统计卡（task-stats-grid 四卡等宽精修）
   服务：任务管理页顶部四张统计卡；保持四卡等宽契约，补 hover 提升、
   数字 tabular-nums 与窄屏换列。
   -------------------------------------------------------------------------- */
.task-stats-grid .stat-card {
  transition: box-shadow var(--motion-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--motion-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.task-stats-grid .stat-card:hover {
  box-shadow: var(--shadow-panel-hover, 0 4px 12px -2px rgba(20, 26, 38, 0.08));
  transform: translateY(-1px);
}

/* 统计数字统一表格数字排版，避免宽度抖动 */
.task-stats-grid .stat-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   区域：任务状态筛选栏（task-status-filter-bar 下拉筛选精修）
   服务：任务管理树顶部的状态筛选条；对齐商务 SaaS 筛选条质感，
   保留下拉控件 data-task-status-filter 的交互不变。
   -------------------------------------------------------------------------- */
.task-status-filter-bar {
  border-radius: var(--radius-card, 12px);
  border-color: var(--color-border, #e4e6eb);
  background: var(--color-surface, #ffffff);
  box-shadow: var(--shadow-panel, 0 1px 2px rgba(20, 26, 38, 0.04));
}

.task-status-filter-label {
  color: var(--color-faint, #9ba1ae);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.task-status-filter-select {
  min-height: var(--control-height-small, 30px);
  border-radius: var(--radius-control, 8px);
  transition: border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.task-status-filter-select:hover {
  border-color: var(--color-border-strong, #d2d6dd);
}

.task-status-filter-select:focus-visible {
  border-color: var(--color-primary, #2b5aed);
  box-shadow: 0 0 0 3px var(--color-primary-soft, #edf2ff);
  outline: none;
}

/* --------------------------------------------------------------------------
   区域：三级任务树（renderTaskNestedBranches / tree-title-row / 分支标签）
   服务：任务管理页任务树与售前/售后内嵌任务树共用的树节点视觉；
   层级引导线按纲要改为 1px 实线、节点 hover 浅灰、分支标签胶囊精修。
   -------------------------------------------------------------------------- */
.tree-view {
  gap: 12px;
}

/* 层级引导线：1px 实线发丝边，替代虚线，层级关系更稳定 */
.tree-children {
  border-left: 1px solid var(--color-border, #e4e6eb);
  margin-left: 30px;
  padding-left: 16px;
}

.tree-row {
  border-radius: var(--radius-card, 12px);
  background: var(--color-surface, #ffffff);
  transition: background-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

/* 节点 hover 浅灰底，仅视觉反馈，不改变任何交互时序 */
.tree-row:hover {
  background: var(--color-surface-muted, #f8f9fb);
  border-color: var(--color-border-strong, #d2d6dd);
}

/* 展开根节点使用分层轻投影，避免厚重色块 */
.task-tree-root.is-expanded > .tree-row {
  background: var(--color-surface, #ffffff);
  border-color: color-mix(in srgb, var(--color-primary, #2b5aed) 30%, var(--color-border, #e4e6eb));
  box-shadow: var(--shadow-panel-hover, 0 4px 12px -2px rgba(20, 26, 38, 0.08));
}

/* 主/子层级图标差异化：根节点主蓝软底，子节点中性灰底 */
.tree-icon.task-icon-root {
  background: var(--color-primary-soft, #edf2ff);
  color: var(--color-primary, #2b5aed);
}

.tree-icon.task-icon-child {
  background: var(--color-surface-muted, #f8f9fb);
  color: var(--color-muted, #69707e);
  border: 1px solid var(--color-border, #e4e6eb);
}

/* 分支标签（子任务 / 主任务工作清单 / 子任务工作清单）胶囊精修 */
.task-tree-branch-label {
  border-color: var(--color-border, #e4e6eb);
  background: var(--color-surface-muted, #f8f9fb);
  color: var(--color-muted, #69707e);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* 标题行与状态徽章组：徽章贴标题、垂直居中、间距收敛 */
.tree-title-row,
.task-check-title-row {
  gap: 6px;
}

.tree-status-badges {
  gap: 4px;
}

/* 树节点 meta 行（类型/项目/负责人/进度）弱化排版 */
.tree-meta {
  margin-top: 2px;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-muted, #69707e);
}

/* 工作清单节点行：进度条紧凑化，与 meta 行形成节奏 */
.tree-row-check .tree-main {
  display: grid;
  gap: 4px;
}

.tree-check-progress {
  max-width: 260px;
  margin-top: 2px;
}

.tree-check-progress .progress {
  height: 6px;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-border, #e4e6eb);
}

.tree-check-progress .progress > span {
  border-radius: var(--radius-pill, 999px);
  background: var(--color-primary, #2b5aed);
}

/* 空工作清单节点保持弱化，不抢主线视觉 */
.tree-row-empty {
  border-style: dashed;
  background: var(--color-surface-muted, #f8f9fb);
}

/* 展开/收起按钮的方向箭头过渡统一走快速动效 token */
.task-tree-toggle-icon {
  color: var(--color-faint, #9ba1ae);
  transition: transform var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.task-tree-toggle:hover .task-tree-toggle-icon {
  color: var(--color-primary, #2b5aed);
}

/* --------------------------------------------------------------------------
   区域：任务详情页（task-detail-page 只读结构与动作按钮组）
   服务：任务信息栅格、需求/验收叙述卡、工作清单卡片、页头动作簇；
   只读内容保持只读，动作按钮仍触发既有弹窗/确认窗。
   -------------------------------------------------------------------------- */

/* 页头动作簇：按 返回/维护/状态变更/关联 分组，簇间发丝分隔线 */
.task-action-cluster {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.task-action-cluster + .task-action-cluster {
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--color-border, #e4e6eb);
}

/* 状态变更簇轻量底色提示，突出该组按钮会触发确认弹窗 */
.task-action-cluster-status {
  padding: 4px 8px;
  border-radius: var(--radius-control, 8px);
  background: var(--color-surface-muted, #f8f9fb);
}

/* 任务信息栅格：只读字段卡统一浅灰底 + 圆角卡片 token */
.task-detail-page .info-grid div {
  border-radius: var(--radius-control, 8px);
  background: var(--color-surface-muted, #f8f9fb);
}

.task-detail-page .info-grid dt {
  color: var(--color-faint, #9ba1ae);
  letter-spacing: 0.02em;
}

.task-detail-page .info-grid dd {
  font-variant-numeric: tabular-nums;
}

/* 需求/验收叙述卡：标题与正文拉开节奏，长文可读性优先 */
.task-narrative-card {
  display: grid;
  gap: 6px;
}

.task-narrative-card > strong {
  color: var(--color-ink, #1b1f27);
  font-size: 14px;
  line-height: 22px;
}

.task-narrative-card > strong + .task-narrative-text {
  margin: 0 0 8px;
}

.task-narrative-text {
  color: var(--color-text, #3c4351);
  font-size: 14px;
  line-height: 22px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 工作清单元件容器：条目间统一间距 */
.task-check-list {
  display: grid;
  gap: 10px;
}

/* 工作清单条目卡：白卡 + 轻 hover，动作按钮组保持右侧 */
.task-detail-check-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-radius: var(--radius-card, 12px);
  transition: border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.task-detail-check-item:hover {
  border-color: var(--color-border-strong, #d2d6dd);
  box-shadow: var(--shadow-panel, 0 1px 2px rgba(20, 26, 38, 0.04));
}

/* 子任务关联卡与详情动作组的小屏折行由下方响应式区统一处理 */
.task-child-card {
  border-radius: var(--radius-card, 12px);
}

/* --------------------------------------------------------------------------
   区域：任务域响应式（4:3 与手机竖屏）
   服务：tasks-page / task-detail-page 在 ≤1200px、≤900px、≤600px 的
   布局折行；统计卡窄屏换列不破坏桌面四卡等宽契约。
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .task-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  /* 树层级缩进收敛，避免抽屉导航下内容被挤压 */
  .tree-children {
    margin-left: 16px;
    padding-left: 12px;
  }

  /* 树节点动作区换行到主信息下方，避免横向撑破 */
  .tree-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .tree-row .card-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  /* 详情页头动作簇去掉分隔线，改为自然折行 */
  .task-action-cluster + .task-action-cluster {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 600px) {
  .task-stats-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 筛选下拉全宽，保证手机竖屏可点按 */
  .task-status-filter-select {
    width: 100%;
  }

  .task-status-filter-bar {
    align-items: stretch;
    flex-direction: column;
  }

  /* 工作清单条目动作组折到进度下方 */
  .task-detail-check-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .task-detail-check-item .card-actions {
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
   区域：动效降级（prefers-reduced-motion）
   服务：任务域全部过渡动效；用户系统要求减少动效时统一关闭。
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .task-stats-grid .stat-card,
  .task-status-filter-select,
  .tree-row,
  .task-tree-toggle-icon,
  .task-detail-check-item {
    transition: none;
  }

  .task-stats-grid .stat-card:hover {
    transform: none;
  }
}


/* ==========================================================================
 * 视觉焕新增量合并 · 来源域名：project-board（.scratch/visual-redesign/css-requests/project-board.css，20260720-ratio-metrics-fix）
 * ========================================================================== */

/* ==========================================================================
   项目看板域视觉增量（2026-07 视觉焕新 · 方向 A 商务 SaaS 蓝白提质精修）

   服务范围：项目看板页（renderProjectBoard 及其子组件）、项目选择弹窗、
   右侧待办/日程/通讯录悬浮入口与抽屉面板。

   合并纪律（styles.css 所有者必读）：
   1. 本文件为“追加式”增量，必须整体追加在 styles.css 既有规则之后，不得
      删除或改写任何既有规则文本——web-contract.test.js 对项目看板多条既有
      规则（如 .project-board-floating-icon、.project-board-drawer-label、
      .project-board-page padding-right:76px、抽屉面板 radius:10px 基线等）
      做精确字符串断言，同名规则靠后者自然生效即可。
   2. 不新增 :root token；--color-* / --shadow-panel / --radius-card 复用
      token 层（token 层按设计纲要升级后本文件自动跟随）。
   3. --motion-fast / --motion-base / --shadow-overlay 若 token 层尚未补齐，
      本文件使用 var() 回退值兜底，避免合并顺序导致失效。
   ========================================================================== */

/* --------------------------------------------------------------------------
   区域：页头项目选择按钮
   边界：项目看板页头标题旁的“当前项目 + 切换”按钮（renderProjectBoardSelectAction），
   只精修 hover/focus 反馈与字重层级，不改变其打开项目选择弹窗的行为。
   -------------------------------------------------------------------------- */
.project-board-select-action {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition:
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    background-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.project-board-select-action:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.project-board-select-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* “切换”小标签降为常规强调字重并加微字距，避免 900 字重在页头喧宾夺主。 */
.project-board-switch-label {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   区域：项目选择弹窗（modal:selectProjectMaster）
   边界：.project-board-selector-modal 内的主档检索列表，精修列表项卡片化
   反馈、激活态指示与长列表滚动体验；弹窗骨架几何仍由共享 .modal 规则承载。
   -------------------------------------------------------------------------- */
.project-board-selector-modal .project-master-item {
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
  transition:
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    background-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.project-board-selector-modal .project-master-item:hover,
.project-board-selector-modal .project-master-item:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-panel-hover);
}

/* 当前选中主档用左侧 3px 主蓝指示条 + 软底，和侧边栏激活态语言一致。 */
.project-board-selector-modal .project-master-item.active {
  box-shadow: inset 3px 0 0 var(--color-primary), var(--shadow-panel);
}

/* 主档长列表使用细滚动条，降低弹窗内滚动区域的视觉噪声。 */
.project-board-selector-modal .project-master-items {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.project-board-selector-modal .project-master-items::-webkit-scrollbar {
  width: 8px;
}

.project-board-selector-modal .project-master-items::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--color-border-strong);
}

.project-board-selector-modal .project-master-items::-webkit-scrollbar-track {
  background: transparent;
}

/* --------------------------------------------------------------------------
   区域：项目概览（统计带 + 项目信息卡 + KPI 面板）
   边界：renderProjectBoardOverview 输出的概览区；KPI 卡升级为白卡 + 分层
   阴影 + hover 抬升，数值统一等宽数字排版，避免长金额/日期跳动。
   -------------------------------------------------------------------------- */
.project-board-overview-card {
  box-shadow: var(--shadow-panel);
}

.project-board-kpi-card {
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
  transition:
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.project-board-kpi-card:hover {
  transform: translateY(-1px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-panel-hover);
}

.project-board-kpi-card strong {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   区域：项目介绍与说明（renderProjectMasterNarrative）
   边界：项目主档口径的介绍/说明双卡，位于“当前业务阶段”之前；精修为白卡
   质感与标签字距，不改变“编辑项目说明”入口。
   -------------------------------------------------------------------------- */
.project-board-narrative-card {
  border-radius: var(--radius-card);
  background: var(--color-surface);
  transition:
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.project-board-narrative-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-panel);
}

.project-board-narrative-card span {
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   区域：当前业务阶段并列条（renderProjectStageStrip）
   边界：售前/售后多阶段 chip；软色底统一改由主蓝/绿/黄 token 派生
   （color-mix），hover 轻抬升；阶段进度条按设计纲要改为实心主蓝、禁渐变。
   -------------------------------------------------------------------------- */
.project-board-stage-chip {
  border-radius: var(--radius-card);
  transition:
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.project-board-stage-chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-panel-hover);
}

.project-board-stage-chip.primary {
  border-color: color-mix(in srgb, var(--color-primary) 18%, #ffffff);
  background: color-mix(in srgb, var(--color-primary) 5%, #ffffff);
}

.project-board-stage-chip.success {
  border-color: color-mix(in srgb, var(--color-green) 20%, #ffffff);
  background: color-mix(in srgb, var(--color-green) 6%, #ffffff);
}

.project-board-stage-chip.warning {
  border-color: color-mix(in srgb, var(--color-warning) 24%, #ffffff);
  background: color-mix(in srgb, var(--color-warning) 7%, #ffffff);
}

/* 进度条：浅灰 pill 轨道 + 实心主蓝填充（设计纲要明确禁止渐变填充）。 */
.project-board-progress {
  height: 6px;
  background: var(--color-border);
}

.project-board-progress span {
  background: var(--color-primary);
  transition: width var(--motion-base, 200ms cubic-bezier(0.4, 0, 0.2, 1));
}

/* --------------------------------------------------------------------------
   区域：售前/售后业务卡片（renderProjectHierarchySections / renderBusinessProjectCard）
   边界：可展开 <details class="business-project-card">；精修卡片分层、
   摘要行 hover、右侧展开指示箭头（纯 CSS ::after，不新增 DOM、不改交互），
   展开态用主蓝描边 + 顶部发丝分隔提示内容归属。
   -------------------------------------------------------------------------- */
.business-project-card {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-panel);
  transition:
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.business-project-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-panel-hover);
}

.business-project-card[open] {
  border-color: color-mix(in srgb, var(--color-primary) 32%, #ffffff);
  box-shadow: var(--shadow-panel-hover);
}

.business-project-summary {
  position: relative;
  padding-right: 46px;
  border-radius: inherit;
  transition: background-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.business-project-summary:hover {
  background: var(--color-surface-muted);
}

.business-project-summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--color-primary-soft);
}

/* 展开指示：右下角纯 CSS 箭头，展开时翻转，补偿被隐藏的原生 details marker。 */
.business-project-summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid var(--color-faint);
  border-bottom: 1.6px solid var(--color-faint);
  transform: translateY(-68%) rotate(45deg);
  transition:
    transform var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
  pointer-events: none;
}

.business-project-card[open] > .business-project-summary::after {
  border-color: var(--color-primary);
  transform: translateY(-32%) rotate(225deg);
}

.business-project-card[open] > .business-project-summary {
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.business-project-details {
  padding-top: 14px;
}

/* 业务卡展开动作：详情入口固定在任务和知识之后，避免用户回到一级菜单再次定位。 */
.business-project-detail-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

/* 摘要行客户与阶段元信息：单行省略，避免长客户名挤压右侧状态徽标。 */
.business-project-summary-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   区域：业务任务行与任务知识（renderTaskWithKnowledge）
   边界：业务卡片展开区内的任务行；任务卡升级白卡 hover，任务知识区用
   1px 层级引导线连接任务图标列，保持总缩进 48px 不变。
   -------------------------------------------------------------------------- */
.business-project-task {
  border-radius: var(--radius-card);
  background: var(--color-surface);
  transition:
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.business-project-task:hover {
  border-color: color-mix(in srgb, var(--color-primary) 22%, #ffffff);
  box-shadow: var(--shadow-panel);
}

/* 任务元信息行：单行省略，避免负责人/截止日期把任务行撑高。 */
.business-project-task-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 任务知识区：1px 引导线对齐任务图标中心（38px 图标 + 10px 间距 → 左缘 19px）。 */
.task-knowledge-row {
  margin-left: 19px;
  padding-left: 29px;
  border-left: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   区域：知识分类汇总面板（renderProjectScopedKnowledgeList / knowledgeTypeSummary）
   边界：项目/业务/任务上下文内的 <details class="knowledge-summary-panel">；
   默认分类计数视图精修 pill 质感与展开指示，展开后文件清单加分隔发丝线。
   -------------------------------------------------------------------------- */
.knowledge-summary-panel {
  border-radius: var(--radius-card);
  transition:
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    background-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.knowledge-summary-panel:hover {
  border-color: var(--color-border-strong);
}

.knowledge-summary-panel[open] {
  border-color: color-mix(in srgb, var(--color-primary) 30%, #ffffff);
  box-shadow: var(--shadow-panel);
}

.knowledge-summary-trigger {
  position: relative;
  padding-right: 40px;
  border-radius: inherit;
  transition: background-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.knowledge-summary-trigger:hover {
  background: var(--color-surface);
}

.knowledge-summary-trigger:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--color-primary-soft);
}

/* 知识面板展开指示：与业务卡片同语言的纯 CSS 箭头。 */
.knowledge-summary-trigger::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--color-faint);
  border-bottom: 1.5px solid var(--color-faint);
  transform: translateY(-68%) rotate(45deg);
  transition:
    transform var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
  pointer-events: none;
}

.knowledge-summary-panel[open] > .knowledge-summary-trigger::after {
  border-color: var(--color-primary);
  transform: translateY(-32%) rotate(225deg);
}

/* 知识类型计数 pill：软色底语言与徽章体系对齐，计数保持主蓝强调。 */
.knowledge-type-summary-item {
  transition:
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    background-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.knowledge-summary-trigger:hover .knowledge-type-summary-item {
  border-color: var(--color-border-strong);
}

/* 展开后的文件清单与汇总头之间补一条发丝分隔，明确两级信息边界。 */
.knowledge-file-panel {
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.knowledge-mini-card {
  border-radius: var(--radius-card);
  transition:
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.knowledge-mini-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-panel);
}

/* --------------------------------------------------------------------------
   区域：需求树与未关联任务（renderProjectRequirementTree）
   边界：售后业务需求节点卡；统一圆角与 hover 反馈，未关联任务区保持
   虚线分隔语义，不新增任何写入口。
   -------------------------------------------------------------------------- */
.project-requirement-node {
  border-radius: var(--radius-card);
  transition:
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.project-requirement-node:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-panel);
}

/* --------------------------------------------------------------------------
   区域：合同文档树（renderProjectContractTree）
   边界：合同树节点与子级引导线；引导线从 2px 蓝色细化为 1px 中性边线，
   与任务树层级引导线语言一致，合同文件卡补 hover 反馈。
   -------------------------------------------------------------------------- */
.project-contract-node {
  border-radius: var(--radius-card);
}

.project-contract-children,
.project-contract-files {
  border-left: 1px solid var(--color-border);
}

.project-contract-file {
  border-radius: var(--radius-card);
  transition:
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.project-contract-file:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-panel);
}

/* --------------------------------------------------------------------------
   区域：会议卡与任务日程卡（项目日程版块 / 日程抽屉）
   边界：renderProjectScheduleSection 与 renderProjectScheduleDayDetail 的
   只读卡片；统一圆角与 hover 抬升，不改变“会议详情/任务详情”入口。
   -------------------------------------------------------------------------- */
.project-meeting-card,
.project-schedule-task {
  border-radius: var(--radius-card);
  transition:
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.project-meeting-card:hover,
.project-schedule-task:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-panel);
}

/* --------------------------------------------------------------------------
   区域：预算与核算（renderProjectBudgetPlaceholder）
   边界：两个项目主档级人民币汇总卡；金额统一等宽数字排版并升级白卡质感，
   “维护”入口仍由版块操作位承载。
   -------------------------------------------------------------------------- */
.project-budget-placeholder article {
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.project-budget-placeholder strong {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   区域：项目通讯录卡与通讯录弹窗
   边界：renderProjectContactCard / renderProjectContactsDialog；联系人卡
   补 hover 反馈与圆角统一，弹窗页签计数 pill 向 token 软色靠拢。
   -------------------------------------------------------------------------- */
.project-contact-card {
  border-radius: var(--radius-card);
  transition:
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.project-contact-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-panel);
}

.project-contact-tabs .tab.active strong {
  background: var(--color-primary-soft);
}

/* --------------------------------------------------------------------------
   区域：右侧悬浮入口（待办/动态、日程、通讯录）
   边界：.project-board-floating-stack 内三个竖排入口；只叠加 hover 位移、
   focus-visible 外环与标签字距，几何与图标尺寸契约保持 styles.css 基线。
   -------------------------------------------------------------------------- */
.project-board-drawer-toggle,
.project-board-schedule-toggle,
.project-board-contact-toggle {
  transition:
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.project-board-drawer-toggle:hover,
.project-board-schedule-toggle:hover,
.project-board-contact-toggle:hover {
  transform: translateY(-1px);
}

.project-board-drawer-toggle:focus-visible,
.project-board-schedule-toggle:focus-visible,
.project-board-contact-toggle:focus-visible {
  box-shadow: 0 0 0 3px var(--color-primary-soft), 0 18px 48px rgba(26, 123, 239, 0.2);
}

.project-board-drawer-label {
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   区域：右侧抽屉面板（待办/风险/动态 + 日程）
   边界：两个 fixed 抽屉面板；按设计纲要升级 14px 圆角与 overlay 阴影，
   并补 fade+scale 进入动效（仅 transform/opacity，尊重 reduced-motion）。
   基线几何（position/width/max-height/padding）保持 styles.css 契约不动。
   -------------------------------------------------------------------------- */
.project-board-drawer-panel,
.project-board-schedule-panel {
  border-radius: 14px;
  box-shadow: var(--shadow-overlay, 0 12px 32px -8px rgba(20, 26, 38, 0.16), 0 4px 12px rgba(20, 26, 38, 0.08));
}

.project-board-insight-drawer[open] .project-board-drawer-panel,
.project-board-schedule-drawer[open] .project-board-schedule-panel {
  animation: project-board-panel-in var(--motion-base, 200ms cubic-bezier(0.4, 0, 0.2, 1));
}

@keyframes project-board-panel-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   区域：抽屉内待办 / 风险 / 动态列表
   边界：renderProjectBoardTodos / renderProjectBoardRisks / renderProjectBoardTimeline；
   待办与风险行改为“徽标 + 标题”双列，元信息落在标题列下方，提升抽屉内
   窄宽度的可扫描性；动态列表维持时间线式分隔线。
   -------------------------------------------------------------------------- */
.project-board-todo,
.project-board-risk {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 8px;
}

.project-board-todo small,
.project-board-risk small {
  grid-column: 2;
}

.project-board-todo .badge,
.project-board-risk .badge {
  margin-top: 1px;
}

/* --------------------------------------------------------------------------
   区域：移动端补充（≤900px 抽屉导航 / 全屏浮层）
   边界：只对齐本文件新增规则的移动表现；styles.css 既有移动契约
   （.project-board-page padding-right:0、抽屉全屏等）保持不变。
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .business-project-summary {
    padding-right: 40px;
  }

  .business-project-summary::after {
    right: 14px;
  }

  /* 移动端任务知识引导线收回，避免窄屏二次缩进。 */
  .task-knowledge-row {
    margin-left: 0;
    padding-left: 12px;
  }

  /* 移动端抽屉全屏展开，取消桌面圆角与进入动效。 */
  .project-board-drawer-panel,
  .project-board-schedule-panel {
    border-radius: 0;
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   区域：动效降级
   边界：尊重 prefers-reduced-motion，抽屉进入动效在降级时直接呈现终态。
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .project-board-insight-drawer[open] .project-board-drawer-panel,
  .project-board-schedule-drawer[open] .project-board-schedule-panel {
    animation: none;
  }
}


/* ==========================================================================
 * 视觉焕新增量合并 · 来源域名：meetings（.scratch/visual-redesign/css-requests/meetings.css，20260720-ratio-metrics-fix）
 * ========================================================================== */

/* ==========================================================================
 * 会议域视觉精修增量（meetings.css）
 * 服务边界：会议管理清单页、预约入口页、会议详情页，以及会议创建/编辑、资料关联/上传/移除、
 * 纪要关联/上传/移除、生命周期确认等弹窗内组件。
 * 仅做视觉提质：不增删功能入口，不改任何 data-* 钩子与契约锁定 class；
 * 新增 class（meeting-index-badges / meeting-material-item-main / meeting-material-item-meta /
 * meeting-readiness-status / meeting-detail-cell / meeting-index-summary-page /
 * meeting-create-entry / meeting-terminal-note）由本文件提供样式。
 * 令牌值不确定是否已由 styles.css 所有者更新的一律带兜底，避免合并前页面回归。
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 区域：会议清单卡片（会议管理 > 会议清单）
 * 目标：白卡 + 轻阴影 + 主蓝左侧指示条，hover 浮起；标题行徽章组紧凑贴题。
 * ------------------------------------------------------------------------ */
.meeting-index-card {
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-card, 12px);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel, 0 1px 2px rgba(20, 26, 38, 0.04));
  transition:
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.meeting-index-card:hover {
  border-color: var(--color-border-strong);
  border-left-color: var(--color-primary-hover, var(--color-primary));
  box-shadow: var(--shadow-panel-hover);
  transform: translateY(-1px);
}

/* 标题行：主题字号收敛到卡片标题层级，徽章组与标题基线对齐 */
.meeting-index-title-row {
  gap: 10px;
}

.meeting-index-title-row strong {
  font-size: var(--font-size-card-title, 15px);
  font-weight: 600;
  line-height: var(--line-height-card-title, 22px);
}

/* 徽章组：状态徽章与“纪要待补充”徽章收为同一紧凑组，避免换行散乱 */
.meeting-index-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* 元信息行：分隔点改用边框强色令牌，弱化标签带字距 */
.meeting-index-meta {
  gap: 6px 14px;
  font-size: var(--font-size-caption, 12px);
  letter-spacing: 0.02em;
}

.meeting-index-meta span:not(:last-child)::after {
  background: var(--color-border-strong);
}

/* 清单卡右侧“查看详情”按钮垂直居中，避免卡片内容撑高时漂移 */
.meeting-index-card > .button {
  align-self: center;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
 * 区域：清单汇总行与分页（会议管理 > 会议清单顶部/底部）
 * 目标：总数为主、分页说明为次的双层级；分页按钮组右对齐保持紧凑。
 * ------------------------------------------------------------------------ */
.meeting-index-summary strong {
  font-size: 15px;
  font-weight: 600;
}

.meeting-index-summary-page {
  color: var(--color-faint);
  font-size: var(--font-size-caption, 12px);
  letter-spacing: 0.02em;
}

.meeting-pagination {
  gap: 8px;
}

/* --------------------------------------------------------------------------
 * 区域：会议查询筛选表单（会议管理 > 会议查询）
 * 目标：字段与操作按钮底对齐，查询行节奏统一；不改变任何 name 与提交语义。
 * ------------------------------------------------------------------------ */
.meeting-filter-form {
  align-items: end;
  gap: 14px 16px;
}

.meeting-filter-form > .field {
  align-self: end;
}

.meeting-filter-form .form-actions {
  gap: 8px;
  padding-bottom: 1px;
}

/* --------------------------------------------------------------------------
 * 区域：预约/编辑写表单（modal:meetingCreate / modal:meetingEdit 弹窗内）
 * 目标：字段辅助说明弱化、业务归属调整检查块卡片化；表单结构与钩子不变。
 * ------------------------------------------------------------------------ */
.meeting-write-form .field small {
  color: var(--color-faint);
  font-size: var(--font-size-caption, 12px);
  line-height: 18px;
}

/* 业务归属调整实时检查块：独立软底信息区，和表单字段拉开层级 */
[data-meeting-business-impact] {
  padding: 12px 14px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-control, 8px);
  background: var(--color-surface-muted);
}

[data-meeting-business-impact] p {
  margin: 0;
}

[data-meeting-business-impact] ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--color-text);
}

/* 参会人 fieldset：圆角与卡片体系对齐，说明文字收紧 */
.meeting-participant-fieldset {
  border-radius: var(--radius-card, 12px);
}

.meeting-participant-fieldset legend {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
 * 区域：我方参会人选择 chips（预约/编辑弹窗 > 我方参会人）
 * 目标：软底胶囊 + 选中态主蓝软底描边；hover/focus 仅颜色过渡，不动布局。
 * ------------------------------------------------------------------------ */
.meeting-participant-option {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill, 999px);
  font-weight: 500;
  transition:
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    background-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.meeting-participant-option:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-muted);
}

/* 选中态：主蓝软底 + 主蓝描边 + 主蓝文字，与全局分段控件激活态同语言 */
.meeting-participant-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-hover, var(--color-primary));
}

.meeting-participant-option:focus-within {
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* --------------------------------------------------------------------------
 * 区域：会议详情基础信息栅格（会议详情 > 基础信息）
 * 目标：单元格白卡化、标签弱化大写感、数值行收紧；dt/dd 结构不变。
 * ------------------------------------------------------------------------ */
.meeting-detail-grid {
  gap: 12px;
}

.meeting-detail-cell {
  background: var(--color-surface);
  box-shadow: var(--shadow-panel, 0 1px 2px rgba(20, 26, 38, 0.04));
}

.meeting-detail-cell dt {
  color: var(--color-muted);
  font-size: var(--font-size-caption, 12px);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.meeting-detail-cell dd {
  margin-top: 6px;
  font-size: var(--font-size-body, 14px);
  font-weight: 600;
  line-height: var(--line-height-body, 22px);
}

/* 详情说明块（完成说明/取消原因/重开原因/历史纪要）：白卡 + 左对齐节奏统一 */
.meeting-detail-copy {
  border-radius: var(--radius-card, 12px);
  background: var(--color-surface);
}

.meeting-detail-copy strong {
  font-size: var(--font-size-card-title, 14px);
  font-weight: 600;
}

.meeting-detail-copy p {
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
 * 区域：资料/纪要条目（会议详情 > 会议资料 / 会议纪要）
 * 目标：条目 hover 浅灰底、主信息/元信息层级分明、右侧操作不挤压标题。
 * ------------------------------------------------------------------------ */
.meeting-material-item {
  padding: 12px 16px;
  border-radius: var(--radius-card, 12px);
  transition:
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    background-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.meeting-material-item:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-muted);
}

.meeting-material-item-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.meeting-material-item-main strong {
  font-size: var(--font-size-body, 14px);
  font-weight: 600;
  line-height: var(--line-height-body, 22px);
}

.meeting-material-item-meta {
  font-size: var(--font-size-caption, 12px);
  letter-spacing: 0.02em;
}

.meeting-material-item > .button {
  flex-shrink: 0;
}

/* 会议知识条目操作保持预览、下载、移除同一行，窄屏时整体换行而不挤压标题。 */
.meeting-material-item-actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

@media (max-width: 600px) {
  .knowledge-scope-choice,
  .knowledge-delete-impact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .meeting-material-item-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
 * 区域：纪要就绪门禁（会议详情 > 会议纪要顶部）
 * 目标：按 data-meeting-completion-readiness 的 ready/blocked 给软色状态底板；
 * 数据属性值与判定逻辑完全由 meetings.js 产出，本文件只做视觉映射。
 * ------------------------------------------------------------------------ */
.meeting-readiness {
  padding: 12px 14px;
  border-radius: var(--radius-card, 12px);
}

.meeting-readiness[data-meeting-completion-readiness="ready"] {
  border-color: rgba(24, 154, 94, 0.32);
  background: rgba(24, 154, 94, 0.07);
}

.meeting-readiness[data-meeting-completion-readiness="blocked"] {
  border-color: rgba(201, 135, 26, 0.32);
  background: rgba(201, 135, 26, 0.07);
}

.meeting-readiness-status {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.meeting-readiness > .muted {
  font-size: var(--font-size-caption, 12px);
  line-height: 18px;
}

/* 业务归属永久锁定提示：与就绪门禁保持同一阅读节奏 */
.meeting-business-lock {
  padding: 0 2px;
  font-size: var(--font-size-caption, 12px);
}

/* --------------------------------------------------------------------------
 * 区域：生命周期确认操作（会议详情 > 会议状态）
 * 目标：操作按钮右对齐成组、主操作最小宽度稳定；终态提示居中弱化。
 * ------------------------------------------------------------------------ */
.meeting-status-actions {
  gap: 10px;
}

.meeting-status-actions .button {
  min-width: 96px;
}

.meeting-terminal-note {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-control, 8px);
  background: var(--color-surface-muted);
  font-size: var(--font-size-caption, 12px);
}

/* --------------------------------------------------------------------------
 * 区域：预约入口页说明卡（预约会议 > 预约入口）
 * 目标：入口说明卡视觉聚焦、留白充足，引导点击“打开预约窗口”；入口按钮不变。
 * ------------------------------------------------------------------------ */
.meeting-create-entry {
  gap: 10px;
  padding: 24px 20px;
}

.meeting-create-entry > strong {
  font-size: var(--font-size-title, 16px);
  line-height: var(--line-height-title, 24px);
}

.meeting-create-entry > p {
  color: var(--color-muted);
}

.meeting-create-entry .form-actions {
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
 * 区域：动效可访问性兜底（会议域全部新增过渡）
 * 目标：尊重 prefers-reduced-motion，关闭卡片/条目/chips 的过渡动画。
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .meeting-index-card,
  .meeting-material-item,
  .meeting-participant-option {
    transition: none;
  }

  .meeting-index-card:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
 * 区域：手机竖屏补充（≤600px，叠加在既有断点契约之上）
 * 目标：清单卡与详情单元收紧内边距；既有整列布局与全宽触控规则不改动。
 * ------------------------------------------------------------------------ */
@media (max-width: 600px) {
  .meeting-index-card {
    padding: 14px;
  }

  .meeting-detail-cell {
    padding: 12px;
  }

  .meeting-status-actions .button {
    min-width: 0;
  }
}


/* ==========================================================================
 * 视觉焕新增量合并 · 来源域名：settings-system（.scratch/visual-redesign/css-requests/settings-system.css，20260720-ratio-metrics-fix）
 * ========================================================================== */

/* ==========================================================================
 * 视觉焕新样式增量：系统配置域（settings.js / system.js）
 * 服务边界：系统配置一级页的 AI 配置概览、Provider 表、AI 参考范围、AI 工具包入口
 * 及三个二级页（方法调用/经验沉淀/执行规范工作流）、嵌入的用户管理、权限矩阵、
 * 数据字典管理、审计查询、组织单元树，以及独立系统页（system-page）运行概览。
 * 说明：本文件只追加/覆盖视觉表现，不改变任何布局契约钩子与响应式 shrink 边界；
 * 由收口代理按发版节奏并入 styles.css 末尾，同优先级下以后出现规则生效。
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 区域：AI 配置概览四宫格（.ai-config-summary）
 * 目标：白卡 + 轻阴影 + hover 抬升，数值使用 tabular-nums，头行色点与标签成组。
 * ------------------------------------------------------------------------ */
.ai-config-summary article {
  border-color: var(--color-border);
  border-radius: var(--radius-card, 12px);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
  transition: box-shadow var(--motion-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--motion-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.ai-config-summary article:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-panel-hover);
  transform: translateY(-1px);
}

/* 头行：色点 + 标签成组，标签使用弱化字距提升层级感 */
.ai-config-summary-card > header {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--color-muted);
  font-size: var(--font-size-caption, 12px);
  line-height: var(--line-height-caption, 18px);
  letter-spacing: 0.02em;
}

.ai-config-summary strong {
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ai-config-summary small {
  font-size: var(--font-size-caption, 12px);
  line-height: var(--line-height-caption, 18px);
}

/* --------------------------------------------------------------------------
 * 区域：AI 参数字段卡（.settings-ai-fields）
 * 目标：与概览卡统一白卡质感，标签/取值层级清晰，长值可换行不撑破。
 * ------------------------------------------------------------------------ */
.settings-ai-fields div {
  border-radius: var(--radius-card, 12px);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
  transition: box-shadow var(--motion-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.settings-ai-fields div:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-panel-hover);
}

.settings-ai-fields span {
  font-size: var(--font-size-caption, 12px);
  line-height: var(--line-height-caption, 18px);
  letter-spacing: 0.02em;
}

.settings-ai-fields strong {
  color: var(--color-ink);
  font-size: var(--font-size-body, 14px);
  line-height: var(--line-height-body, 22px);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
 * 区域：AI 参考范围面板（.ai-reference-panel）
 * 目标：说明条与表格间距统一，文件名与编号两行层次稳定。
 * ------------------------------------------------------------------------ */
.ai-reference-panel .notice {
  margin-bottom: 4px;
}

.ai-reference-table table td strong {
  display: block;
  color: var(--color-ink);
  font-weight: 600;
}

.ai-reference-table table td .muted {
  display: block;
  font-size: var(--font-size-caption, 12px);
}

/* --------------------------------------------------------------------------
 * 区域：AI 工具包入口卡（.toolkit-entry-grid / .toolkit-entry）
 * 目标：白卡化、主蓝软底图标位、右侧箭头指示可进入二级页，hover 主蓝描边。
 * ------------------------------------------------------------------------ */
.toolkit-entry {
  position: relative;
  border-radius: var(--radius-card, 12px);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.toolkit-entry:hover {
  border-color: var(--color-primary);
}

.toolkit-entry:focus-visible {
  outline: 0;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.toolkit-entry .icon-sprite {
  border-radius: 10px;
  background-color: var(--color-primary-soft);
  box-shadow: none;
}

.toolkit-entry strong {
  color: var(--color-ink);
  font-size: var(--font-size-body, 14px);
  line-height: var(--line-height-body, 22px);
}

.toolkit-entry em {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 箭头装饰：纯 CSS 绘制，不新增图标资产，仅作可点击暗示 */
.toolkit-entry-arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color-faint);
  border-right: 2px solid var(--color-faint);
  transform: rotate(45deg);
  transition: border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.toolkit-entry:hover .toolkit-entry-arrow {
  border-color: var(--color-primary);
  transform: rotate(45deg) translate(1px, -1px);
}

/* --------------------------------------------------------------------------
 * 区域：AI 工具包二级页头（.ai-toolkit-subpage-head）
 * 目标：返回按钮与标题行垂直居中，说明条与下方内容节奏一致。
 * ------------------------------------------------------------------------ */
.ai-toolkit-subpage-head .section-title {
  align-items: center;
}

.ai-toolkit-subpage-head .notice {
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
 * 区域：方法调用清单（.method-operation-list）
 * 目标：方法码使用等宽主蓝，行 hover 与全局表格一致，页面/字段主次分明。
 * ------------------------------------------------------------------------ */
.method-operation-list table td strong {
  display: block;
  color: var(--color-ink);
  font-weight: 600;
}

.method-operation-list table td .muted {
  display: block;
  font-size: var(--font-size-caption, 12px);
}

.method-operation-list code {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--color-primary-soft);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.method-permission-state .badge {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * 区域：经验沉淀页签与明细（.experience-category-tabs / .experience-detail-list）
 * 目标：计数徽章弱化、明细卡白卡化、修正前/状态侧栏分隔清晰。
 * ------------------------------------------------------------------------ */
.experience-category-tabs .tab .tab-count,
.experience-category-tabs .tab span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.experience-category-tabs .tab.active .tab-count,
.experience-category-tabs .tab.active span {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.experience-detail-list li {
  border-radius: var(--radius-card, 12px);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
  transition: box-shadow var(--motion-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.experience-detail-list li:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-panel-hover);
}

.experience-detail-main strong {
  color: var(--color-ink);
  font-size: var(--font-size-body, 14px);
  font-weight: 600;
}

.experience-detail-meta {
  padding-left: 14px;
  border-left: 1px solid var(--color-border);
}

.experience-detail-meta dt {
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
 * 区域：执行规范卡与关键词胶囊（.rules-keyword-panel / .keyword-chip-row）
 * 目标：规范卡白卡化、标题与原始关键词串右对齐层级稳定、胶囊轻量化。
 * ------------------------------------------------------------------------ */
.rules-keyword-panel article {
  border-radius: var(--radius-card, 12px);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
  transition: box-shadow var(--motion-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.rules-keyword-panel article:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-panel-hover);
}

.rules-keyword-card > header strong {
  color: var(--color-ink);
  font-size: var(--font-size-body, 14px);
  font-weight: 600;
}

.keyword-chip-row span {
  min-height: 22px;
  padding: 0 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
 * 区域：工作流进度条（.workflow-progress-card / .workflow-progress-track）
 * 目标：去掉渐变轨道，轨道用浅灰实心、节点主蓝实心，卡片白卡化。
 * ------------------------------------------------------------------------ */
.workflow-progress-card {
  border-radius: var(--radius-card, 12px);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.workflow-progress-card > div strong {
  color: var(--color-ink);
  font-size: var(--font-size-body, 14px);
  font-weight: 600;
}

.workflow-progress-track::before {
  background: var(--color-border-strong);
}

.workflow-progress-track li > span {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 5px var(--color-primary-soft);
}

.workflow-progress-track strong {
  color: var(--color-text);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
 * 区域：系统页运行概览三卡（.system-overview-grid / .system-overview-card）
 * 目标：卡片 hover 轻抬升，卡标题区与列表间距统一。
 * ------------------------------------------------------------------------ */
.system-overview-card {
  transition: box-shadow var(--motion-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--motion-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.system-overview-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-panel-hover);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
 * 区域：系统紧凑列表行（.system-control-row / .system-user-status-row / .system-audit-row）
 * 目标：行 hover 浅灰底、数值 tabular-nums、主次文字层级精修。
 * ------------------------------------------------------------------------ */
.system-control-row,
.system-user-status-row,
.system-audit-row {
  border-radius: var(--radius-control, 8px);
  transition: background var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.system-control-row:hover,
.system-user-status-row:hover,
.system-audit-row:hover {
  background: var(--color-surface-muted);
}

.system-user-status-row strong {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.system-audit-row strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
 * 区域：权限树（.permission-tree）
 * 目标：菜单 summary hover、复选框统一主蓝 accent、叶子行 hover 主蓝软底，
 * 详情分组左侧引导线强化层级，不改变任何 data-permission-* 交互钩子。
 * ------------------------------------------------------------------------ */
.permission-tree input[type="checkbox"] {
  accent-color: var(--color-primary);
}

.permission-tree-menu summary {
  border-radius: var(--radius-control, 8px);
  transition: background var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.permission-tree-menu summary:hover {
  background: var(--color-surface-muted);
}

.permission-tree-leaf {
  border-radius: var(--radius-control, 8px);
  transition: background var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.permission-tree-leaf:hover {
  background: var(--color-primary-soft);
}

.permission-tree-detail {
  border-left: 1px solid var(--color-border);
}

.permission-tree-detail-label {
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
 * 区域：组织单元树（.organization-unit-tree）
 * 目标：子层级引导线、行 hover 浅灰底、元信息弱化；保留契约要求的
 * 600px 单列堆叠规则（在 styles.css 内，此处不覆盖 grid-template-columns）。
 * ------------------------------------------------------------------------ */
.organization-unit-tree ul {
  border-left: 1px solid var(--color-border);
}

.organization-unit-row {
  border-radius: var(--radius-control, 8px);
  transition: background var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.organization-unit-row:hover {
  background: var(--color-surface-muted);
}

.organization-unit-info {
  min-width: 0;
}

.organization-unit-info strong {
  color: var(--color-ink);
  font-weight: 600;
}

.organization-unit-meta {
  font-size: var(--font-size-caption, 12px);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
 * 区域：组织单元权限选择器（.organization-unit-permission-picker）
 * 目标：选择卡 hover 主蓝描边 + 软底，与工具包入口卡反馈一致。
 * ------------------------------------------------------------------------ */
.organization-unit-permission-choice {
  transition: border-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
    background var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.organization-unit-permission-choice:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.organization-unit-permission-choice small {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
 * 区域：审计筛选条（.audit-filter-bar）
 * 目标：筛选表单与审计表格之间的节奏统一，控件不换行溢出。
 * ------------------------------------------------------------------------ */
.audit-filter-bar {
  margin: 4px 0 12px;
}

.audit-filter-bar .inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* --------------------------------------------------------------------------
 * 区域：数据字典管理（.dictionary-management-list）
 * 目标：各字典版块间距统一，字典描述说明条与表格节奏一致。
 * ------------------------------------------------------------------------ */
.dictionary-management-list {
  display: grid;
  gap: 18px;
}

.dictionary-management-list .notice.soft {
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
 * 区域：系统配置页签节奏（.settings-section-tabs 容器间距微调）
 * 目标：页签与上方统计卡、下方版块间距统一，分段控件本体样式不动契约。
 * ------------------------------------------------------------------------ */
.settings-page > .settings-section-tabs {
  margin: 16px 0 14px;
}

/* --------------------------------------------------------------------------
 * 区域：响应式补充（只收紧本域组件内布局，不改全局断点契约）
 * ≤1200px：概览四宫格与参数字段卡换为两列；≤600px：全部单列、经验侧栏去左边线。
 * ------------------------------------------------------------------------ */
@media (max-width: 1200px) {
  .ai-config-summary,
  .settings-ai-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .ai-config-summary,
  .settings-ai-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .experience-detail-list li {
    grid-template-columns: minmax(0, 1fr);
  }

  .experience-detail-meta {
    padding-top: 10px;
    padding-left: 0;
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .toolkit-entry-arrow {
    display: none;
  }
}

/* --------------------------------------------------------------------------
 * 区域：动效可及性（本域新增的 transform/shadow 过渡遵循减弱动效偏好）
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ai-config-summary article,
  .settings-ai-fields div,
  .toolkit-entry,
  .experience-detail-list li,
  .rules-keyword-panel article,
  .system-overview-card,
  .toolkit-entry-arrow {
    transition: none;
  }

  .ai-config-summary article:hover,
  .system-overview-card:hover {
    transform: none;
  }
}


/* ==========================================================================
 * 视觉焕新增量合并 · 来源域名：toolkit-aux（.scratch/visual-redesign/css-requests/toolkit-aux.css，20260720-ratio-metrics-fix）
 * ========================================================================== */

/* =============================================================================
 * 工具手册与辅助域视觉增量（toolkit-aux.css）
 * 服务范围：
 *   1. 登录 / 首次改密独立任务页（app/domains/auth.js）
 *   2. 工具手册页与“引用知识库文档”弹窗、移出确认弹窗（app/domains/toolkit-docs.js）
 *   3. AI 分析与确认面板（app/domains/ai.js）
 *   4. 共享业务列表：查询面板、业务卡、分页（app/shared/business-list.js）
 *   5. 业务关系抽屉（app/shared/business-relationship-drawer.js）
 *   6. 售后需求组件：需求行、变更记录、取消确认（app/shared/aftersale-requirements.js）
 *   7. 关联任务抽屉、业务简介卡、项目变更日志（app/domains/prototype-helpers.js）
 * 工程纪律：
 *   - 只做视觉增量，不覆盖任何 data-* 交互钩子与契约锁定的 class 结构；
 *   - 色值、阴影、圆角一律引用全局 token（由 styles.css token 层统一收口），
 *     对新 token 使用 var(..., fallback) 兜底，避免 token 未发布时出现裸值；
 *   - 动效只作用于颜色 / 阴影 / transform / opacity，并尊重 prefers-reduced-motion。
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * 区域一：登录 / 首次改密独立任务页
 * 页面边界：.login-screen 全屏画布 + .login-panel 居中卡片，不进入工作台壳层。
 * 目标：居中卡片更聚焦、品牌区层级清晰、表单 hover/focus 反馈统一。
 * -------------------------------------------------------------------------- */
.login-screen {
  /* 画布保持浅灰微暖底色，padding 收紧以适配小屏竖屏 */
  padding: clamp(16px, 4vw, 48px);
}

.login-panel {
  /* 独立任务卡：圆角升级、轻量浮起阴影，拉开与画布的层级 */
  gap: 20px;
  width: min(440px, 100%);
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--radius-card, 12px);
  box-shadow:
    0 8px 24px -8px rgba(20, 26, 38, 0.10),
    0 2px 6px rgba(20, 26, 38, 0.04);
}

/* 品牌区：徽标 + 标题文案横向排列，eyebrow 在上、产品名在下 */
.login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.login-brand .brand-mark {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-card, 12px);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px -2px rgba(43, 90, 237, 0.28);
}

.login-brand-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.login-brand-copy .eyebrow {
  margin: 0;
  font-size: var(--font-size-caption, 12px);
  line-height: var(--line-height-caption, 18px);
  letter-spacing: 0.04em;
}

.login-brand-copy h1 {
  margin: 0;
  font-size: var(--font-size-title, 20px);
  line-height: var(--line-height-title, 28px);
  font-weight: 600;
  color: var(--color-ink);
}

/* 登录/改密引导语：弱化处理，承载安全提示与场景说明 */
.login-intro {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-muted);
}

.login-form {
  gap: 14px;
}

.login-form label {
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}

.login-form input {
  min-height: var(--control-height, 36px);
  border-radius: var(--radius-control, 8px);
  background: var(--color-surface);
  transition: border-color 140ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

.login-form input:hover {
  border-color: var(--color-border-strong);
}

.login-form input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* 提交按钮占满卡片宽度，强化独立任务页的单一主行动 */
.login-form .button.primary {
  width: 100%;
  min-height: var(--control-height, 36px);
  margin-top: 4px;
}

/* 认证错误提示：软红底 + 深一档红文字，不用实心重色块 */
.auth-error {
  border-radius: var(--radius-control, 8px);
  font-size: 13px;
  font-weight: 500;
}

@media (max-width: 600px) {
  /* 手机竖屏：登录卡收紧内边距，品牌徽标略缩小 */
  .login-panel {
    padding: 22px 18px;
  }

  .login-brand .brand-mark {
    width: 42px;
    height: 42px;
    font-size: 15px;
  }
}

/* -----------------------------------------------------------------------------
 * 区域二：工具手册页与引用知识库文档弹窗
 * 页面边界：.toolkit-docs-page 一级页 + modal:toolkitReference 选择弹窗 +
 * modal:toolkitReferenceRemove 移出确认弹窗；正文保持只读。
 * -------------------------------------------------------------------------- */

/* 文件名双行单元格：名称加粗在上、弱化编号在下，供手册清单与候选列表共用 */
.toolkit-doc-cell,
.doc-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.toolkit-doc-cell strong,
.doc-cell strong {
  font-weight: 600;
  color: var(--color-ink);
}

.toolkit-doc-cell .muted,
.doc-cell .muted {
  font-size: var(--font-size-caption, 12px);
  line-height: var(--line-height-caption, 18px);
}

/* 引用知识库文档弹窗：提示条与候选数量说明分层，数量说明弱化 */
.toolkit-reference-picker {
  display: grid;
  gap: 12px;
  align-content: start;
}

.toolkit-reference-picker-note {
  border-radius: var(--radius-control, 8px);
}

.toolkit-reference-picker-count {
  margin: 0;
  font-size: var(--font-size-caption, 12px);
  line-height: var(--line-height-caption, 18px);
  letter-spacing: 0.02em;
}

/* 手册引用关系说明条：与页面提示条保持统一圆角 */
.toolkit-manual-note {
  border-radius: var(--radius-control, 8px);
}

/* 移出确认弹窗：确认提示用软警示底，与危险提交按钮形成一致的确认语境 */
.toolkit-reference-remove-note {
  grid-column: 1 / -1;
  padding: 10px 12px;
  border: 1px solid var(--color-warning-soft, #f5e6c4);
  border-radius: var(--radius-control, 8px);
  background: var(--color-warning-soft, #fdf6e3);
  color: var(--color-text);
}

/* -----------------------------------------------------------------------------
 * 区域三：AI 分析与确认面板
 * 页面边界：.ai-page 一级页（统计卡 + Provider/风险概览双卡 + 待确认动作队列）。
 * -------------------------------------------------------------------------- */

/* Provider 行：名称区与状态区分离，hover 给出浅灰底反馈 */
.ai-provider-row {
  border-radius: var(--radius-control, 8px);
  transition: background-color 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-provider-row:hover {
  background: var(--color-surface-muted);
}

.ai-provider-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 500;
  color: var(--color-ink);
}

.ai-provider-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ai-provider-meta small {
  color: var(--color-faint);
}

/* 风险分布计数：等宽数字，避免数量变化时横向跳动 */
.ai-risk-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-ink);
}

/* 治理规则分组头：在风险分布与规则清单之间建立清晰的次级标题 */
.ai-rule-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
}

.ai-rule-list-title {
  margin: 0;
  font-size: var(--font-size-card-title, 14px);
  line-height: var(--line-height-card-title, 22px);
  font-weight: 600;
  color: var(--color-ink);
}

/* 待确认动作卡：左侧 3px 风险色条 + hover 轻升浮，风险等级一眼可辨 */
.ai-action-card {
  position: relative;
  border-left: 3px solid var(--color-border-strong);
  transition: box-shadow 140ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-action-card:hover {
  box-shadow: var(--shadow-panel-hover);
  transform: translateY(-1px);
}

.ai-action-card.red {
  border-left-color: var(--color-red);
}

.ai-action-card.warning,
.ai-action-card.orange {
  border-left-color: var(--color-warning);
}

.ai-action-card.success,
.ai-action-card.green {
  border-left-color: var(--color-green);
}

.ai-action-card-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ai-action-card-title strong {
  font-weight: 600;
  color: var(--color-ink);
}

.ai-action-card-note {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-muted);
}

/* -----------------------------------------------------------------------------
 * 区域四：共享业务列表（售前/售后业务清单共用）
 * 模块边界：app/shared/business-list.js 输出的查询面板、业务卡与分页。
 * -------------------------------------------------------------------------- */

/* 结果计数：弱化标签 + 等宽数字 */
.business-list-result-count {
  font-size: var(--font-size-caption, 12px);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* 业务卡：hover 升浮提示可展开，不改动卡片既有栅格结构 */
.business-card {
  transition: box-shadow 140ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

.business-card:hover {
  box-shadow: var(--shadow-panel-hover);
  transform: translateY(-1px);
}

.business-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink);
}

.business-card-meta {
  font-size: var(--font-size-caption, 12px);
  line-height: var(--line-height-caption, 18px);
}

/* 业务摘要：说明性正文，弱化颜色、舒适行高 */
.business-card-summary {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-muted);
}

/* 分页区：页码与每页信息统一弱化，控件高度沿用 token */
.business-list-page-total,
.business-list-page-summary {
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
 * 区域五：业务关系抽屉
 * 模块边界：app/shared/business-relationship-drawer.js 输出的当前业务摘要、
 * 售前/售后分组与单行关系条目；不改变分组顺序与空态文案。
 * -------------------------------------------------------------------------- */

/* 当前业务摘要：软底卡片化，与下方分组列表拉开层级 */
.business-relationship-current {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card, 12px);
  background: var(--color-surface-muted);
}

.business-relationship-current strong {
  font-weight: 600;
  color: var(--color-ink);
}

/* 分组头：发丝底线分隔，计数弱化 */
.business-relationship-group-head {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.business-relationship-group-head strong {
  font-size: var(--font-size-card-title, 14px);
  font-weight: 600;
  color: var(--color-ink);
}

/* 关系条目行：hover 浅灰底，直接转化行左侧绿色色条 */
.business-relationship-row {
  border-radius: var(--radius-control, 8px);
  transition: background-color 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

.business-relationship-row:hover {
  background: var(--color-surface-muted);
}

.business-relationship-row[data-relationship-strength="direct_conversion"] {
  border-left: 3px solid var(--color-green);
}

.business-relationship-row-title strong {
  font-weight: 600;
  color: var(--color-ink);
}

/* -----------------------------------------------------------------------------
 * 区域六：售后需求组件
 * 模块边界：app/shared/aftersale-requirements.js 输出的需求行、需求变更记录、
 * 取消需求确认预览；表单字段与确认复选契约不变。
 * -------------------------------------------------------------------------- */

/* 需求行：hover 浅底反馈，负责人与描述弱化分层 */
.aftersale-requirement-row {
  transition: background-color 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

.aftersale-requirement-owner {
  font-size: var(--font-size-caption, 12px);
}

.aftersale-requirement-desc {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text);
}

/* 需求变更记录：左侧引导线形成时间序列感，说明文字弱化 */
.aftersale-requirement-change {
  border-left: 2px solid var(--color-border);
  padding-left: 12px;
}

.aftersale-requirement-change-note {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text);
}

.aftersale-requirement-change-diff {
  display: inline-block;
  margin-top: 2px;
  font-size: var(--font-size-caption, 12px);
}

/* 取消确认：摘要卡保持软底，预览条目双列对齐 */
.aftersale-cancel-requirement-summary {
  border-radius: var(--radius-card, 12px);
  background: var(--color-surface-muted);
}

.aftersale-cancel-preview-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}

.aftersale-cancel-preview-item + .aftersale-cancel-preview-item {
  border-top: 1px dashed var(--color-border);
}

.aftersale-cancel-preview-item strong {
  font-weight: 500;
  color: var(--color-ink);
}

.aftersale-cancel-preview-item span {
  flex: none;
  font-size: var(--font-size-caption, 12px);
  color: var(--color-muted);
}

/* 接收人：软底胶囊，与徽章体系一致 */
.aftersale-cancel-recipient {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-caption, 12px);
  color: var(--color-text);
}

/* -----------------------------------------------------------------------------
 * 区域七：关联任务抽屉、业务简介卡与项目变更日志
 * 模块边界：app/domains/prototype-helpers.js 输出的只读展示结构。
 * 注意：related-task-node / related-task-root / related-task-child 的 class 组合
 * 被契约精确锁定，此区域只精修子元素，不改节点容器结构。
 * -------------------------------------------------------------------------- */

/* 关联任务节点：层级标签弱化 + 进度等宽数字 */
.related-task-level-label {
  font-size: var(--font-size-caption, 12px);
  letter-spacing: 0.02em;
  color: var(--color-faint);
}

.related-task-progress {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-caption, 12px);
}

/* 业务简介卡：标题与正文层级统一，正文舒适行高 */
.brief-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: var(--font-size-card-title, 14px);
  font-weight: 600;
  color: var(--color-ink);
}

.brief-card p {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text);
}

/* 项目变更日志：时间与操作人作为说明行弱化 */
.project-change-meta {
  font-size: var(--font-size-caption, 12px);
  line-height: var(--line-height-caption, 18px);
}

/* -----------------------------------------------------------------------------
 * 区域八：动效降级
 * 所有本文件新增的过渡在 prefers-reduced-motion 下关闭，避免前庭不适。
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .login-form input,
  .ai-provider-row,
  .ai-action-card,
  .business-card,
  .business-relationship-row,
  .aftersale-requirement-row {
    transition: none;
  }

  .ai-action-card:hover,
  .business-card:hover {
    transform: none;
  }
}


/* ==========================================================================
 * 视觉焕新增量合并 · 来源域名：shell（.scratch/visual-redesign/css-requests/shell.css，20260720-ratio-metrics-fix）
 * ========================================================================== */

/* ==========================================================================
 * 视觉焕新样式增量 · 壳层与弹窗编排（shell.css）
 * 服务边界：正式端外壳（侧边栏、品牌区、全局顶栏）、modal/drawer 浮层、
 * 右下角悬浮 AI 入口、全局操作态提示层。不覆盖业务页面域样式。
 * 合并提示：由 styles.css 所有者追加到 styles.css 末尾（token 层之后），
 * 本文件只引用既有 token 变量并带兜底值，不重复定义 token。
 * 对应 JS 改动：main.js 新增 overlay-enter 入场钩子 class、
 * brand-text/brand-name/brand-tag、global-header-eyebrow/global-header-route、
 * mobile-menu-text、floating-ai-label 等纯增量辅助 class。
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 区域：侧边栏导航（.sidebar / .nav-list / .nav-item）
 * 激活态增加左侧 3px 主蓝指示条；hover 与激活分层，hover 用浅灰底、激活用主蓝软底；
 * 收起态（sidebar-collapsed）不绘制指示条，避免窄轨内出现偏移色块。
 * -------------------------------------------------------------------------- */
.nav-item {
  transition:
    background-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.nav-item:hover:not(.active) {
  background: var(--color-surface-muted);
}

.nav-item.active {
  box-shadow: inset 3px 0 0 0 var(--color-primary);
}

.production-shell.sidebar-collapsed .nav-item.active {
  box-shadow: none;
}

/* --------------------------------------------------------------------------
 * 区域：侧边栏品牌区（.brand）
 * 配合 main.js 新增的 brand-text/brand-name/brand-tag 辅助 class，
 * 收口品牌名称与 UAT 标签的字体层级，不影响 brand-mark 图标契约。
 * -------------------------------------------------------------------------- */
.brand-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.brand-name {
  font-size: var(--font-size-body, 14px);
  font-weight: 600;
  color: var(--color-ink);
}

.brand-tag {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--color-faint);
}

/* --------------------------------------------------------------------------
 * 区域：全局顶栏（.global-header）
 * 白底 92% + 轻微 backdrop blur，去掉旧投影、只保留 1px 发丝底边；
 * 上下文区块分层：环境说明 12px 弱化、当前模块 14px 600；
 * 右侧工具按钮 hover 浅灰底圆角反馈。
 * -------------------------------------------------------------------------- */
.global-header {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .global-header {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

.global-header-eyebrow {
  font-size: var(--font-size-caption, 12px);
  letter-spacing: 0.02em;
  color: var(--color-faint);
}

.global-header-route {
  font-size: var(--font-size-body, 14px);
  font-weight: 600;
  color: var(--color-ink);
}

.header-message-button,
.header-user-button {
  border-radius: var(--radius-control, 8px);
  transition: background-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.header-message-button:hover,
.header-user-button:hover {
  background: var(--color-surface-muted);
}

/* --------------------------------------------------------------------------
 * 区域：弹窗与抽屉（.modal / .drawer / .modal-mask / .drawer-mask）
 * 遮罩统一为 rgba(20,26,38,0.42)；桌面端卡片圆角 14px + 分层 overlay 阴影；
 * 手机端（≤900px）保持全视口直角口径，不覆盖既有 mobile inset 规则。
 * -------------------------------------------------------------------------- */
.modal-mask,
.drawer-mask {
  background: rgba(20, 26, 38, 0.42);
}

.modal,
.drawer {
  box-shadow: var(--shadow-overlay, 0 12px 32px -8px rgba(20, 26, 38, 0.16), 0 4px 12px rgba(20, 26, 38, 0.08));
}

@media (min-width: 901px) {
  .modal {
    border-radius: 14px;
  }

  .drawer {
    border-radius: 14px 0 0 14px;
  }
}

/* --------------------------------------------------------------------------
 * 区域：浮层入场动画（.overlay-enter，由 main.js renderOverlay 仅在新打开浮层时下发）
 * 遮罩仅淡入；桌面弹窗 fade + scale(0.98→1) 并保持 translate(-50%,-50%) 居中基准；
 * 抽屉自右侧轻量滑入；手机端弹窗全屏，仅淡入避免位移闪烁；尊重 prefers-reduced-motion。
 * -------------------------------------------------------------------------- */
@keyframes shell-overlay-mask-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shell-modal-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.98); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes shell-drawer-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes shell-overlay-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-mask.overlay-enter,
.drawer-mask.overlay-enter {
  animation: shell-overlay-mask-in var(--motion-base) both;
}

.drawer.overlay-enter {
  animation: shell-drawer-in var(--motion-drawer) both;
}

@media (min-width: 901px) {
  .modal.overlay-enter {
    animation: shell-modal-in var(--motion-base) both;
  }
}

@media (max-width: 900px) {
  .modal.overlay-enter {
    animation: shell-overlay-fade-in var(--motion-base) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-mask.overlay-enter,
  .drawer-mask.overlay-enter,
  .modal.overlay-enter,
  .drawer.overlay-enter {
    animation: shell-overlay-fade-in 140ms var(--ease-out) both;
  }
}

/* --------------------------------------------------------------------------
 * 区域：右下角悬浮 AI 入口（.floating-ai-action）
 * 分层投影 + hover 轻微上浮；拖动中（.dragging）不播放 hover 位移，避免跟手抖动。
 * -------------------------------------------------------------------------- */
.floating-ai-action {
  box-shadow: var(--shadow-panel-hover, 0 4px 12px -2px rgba(20, 26, 38, 0.08), 0 2px 6px rgba(20, 26, 38, 0.04));
  transition:
    background-color var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1));
}

.floating-ai-action:hover:not(.dragging) {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.floating-ai-label {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
 * 区域：全局操作态提示层（.global-operation-layer）
 * 遮罩色阶与浮层统一；卡片圆角 14px + overlay 阴影；卡片本身淡入提示，
 * 元素随 busy 状态重建，无需 JS 钩子；尊重 prefers-reduced-motion。
 * -------------------------------------------------------------------------- */
.global-operation-layer {
  background: rgba(20, 26, 38, 0.42);
}

.global-operation-card {
  border-radius: 14px;
  box-shadow: var(--shadow-overlay, 0 12px 32px -8px rgba(20, 26, 38, 0.16), 0 4px 12px rgba(20, 26, 38, 0.08));
  animation: shell-overlay-fade-in var(--motion-fast, 140ms cubic-bezier(0.4, 0, 0.2, 1)) both;
}

@media (prefers-reduced-motion: reduce) {
  .global-operation-card {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
 * 区域：手机端菜单按钮文字（.mobile-menu-text）
 * 配合 main.js 新增辅助 class，便于后续小屏隐藏文字只留图形按钮时的精确选择。
 * -------------------------------------------------------------------------- */
.mobile-menu-text {
  font-weight: 500;
}

/* --------------------------------------------------------------------------
 * 区域：组织级 AI 能力树、执行规则和固定参考配置
 * 这些样式只负责系统配置二级页的层级阅读与表单自适应，不改变权限和继承计算。
 * -------------------------------------------------------------------------- */
.ai-capability-tree,
.ai-capability-tree ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-capability-tree ul {
  margin-top: 8px;
  padding-left: 22px;
  border-left: 1px solid var(--color-border, #dfe4ea);
}

.ai-capability-node-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(260px, 1.2fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border, #dfe4ea);
  border-radius: 10px;
  background: var(--color-surface, #fff);
}

.ai-capability-node-row label,
.switch-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ai-capability-node-row > span:not(.badge) {
  min-width: 0;
  color: var(--color-text-muted, #667085);
  font-size: 13px;
}

.ai-capability-node.is-disabled > .ai-capability-node-row {
  background: var(--color-surface-soft, #f7f8fa);
}

.ai-rule-editor-list {
  display: grid;
  gap: 14px;
}

.ai-rule-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--color-border, #dfe4ea);
  border-radius: 12px;
  background: var(--color-surface, #fff);
}

.ai-rule-editor.is-new {
  border-style: dashed;
  background: var(--color-surface-soft, #f8fafc);
}

.ai-rule-editor-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-rule-editor-title label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-danger, #b42318);
  font-size: 13px;
}

.ai-rule-editor .field.full {
  grid-column: 1 / -1;
}

.compact-number-input {
  width: 76px;
}

@media (max-width: 900px) {
  .ai-capability-node-row,
  .ai-rule-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-capability-tree ul {
    padding-left: 12px;
  }

  .ai-rule-editor-title,
  .ai-rule-editor .field.full {
    grid-column: auto;
  }
}
/* Global transcription configuration keeps the mutually exclusive adapter and model stores readable without changing the shared form grid. */
.transcription-configuration-form .transcription-engine-panel {
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--border-color, #dfe5ee);
  border-radius: 14px;
}

.transcription-configuration-form .transcription-engine-panel legend {
  padding: 0 8px;
  font-weight: 700;
}

/*
 * 区域：AI 协同完整工作页、四队列任务中心与经验沉淀
 * 边界：沿用商务 SaaS token 和既有壳层；输入、参考轨迹、三树审阅与浮层不改变服务端状态机或业务数据所有权。
 */
.ai-collaboration-page,
.ai-experiences-page,
.ai-task-center {
  min-width: 0;
}

.ai-collaboration-stats,
.ai-experience-stats,
.ai-task-stats {
  margin-bottom: var(--space-section);
}

/* 8 段状态轨：紧凑横向 stepper，圆点序号在上、短标签在下，节点间细连接线；终态异常由整轨修饰类切换红/灰强调。 */
.collaboration-stage-rail {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px 12px;
  margin-bottom: var(--space-section);
  overflow-x: auto;
  scrollbar-width: thin;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-panel);
}

.collaboration-stage-node {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: 22px auto;
  column-gap: 8px;
  row-gap: 6px;
  align-items: center;
  flex: 1 0 92px;
  min-width: 92px;
  color: var(--color-faint);
  font-size: var(--font-size-caption);
}

.collaboration-stage-node > span {
  z-index: 1;
  display: grid;
  grid-row: 1;
  grid-column: 1;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* 节点间细连接线：占据当前节点圆点右侧到下一节点圆点之间的空隙，最后一段不绘制。 */
.collaboration-stage-node::after {
  content: "";
  grid-row: 1;
  grid-column: 2;
  align-self: center;
  height: 1px;
  margin-right: 6px;
  background: var(--color-border-strong);
}

.collaboration-stage-node:last-child::after {
  content: none;
}

.collaboration-stage-node > strong {
  grid-row: 2;
  grid-column: 1 / -1;
  min-width: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.collaboration-stage-node.done {
  color: var(--color-muted);
}

.collaboration-stage-node.done > span {
  color: #fff;
  border-color: var(--color-primary);
  background: var(--color-primary);
}

/* 已完成段连接线随节点染主蓝，形成连续推进感。 */
.collaboration-stage-node.done::after {
  background: var(--color-primary);
}

.collaboration-stage-node.active {
  color: var(--color-ink);
}

.collaboration-stage-node.active > span {
  color: #fff;
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
  transform: scale(1.14);
}

.collaboration-stage-node.active > strong {
  font-weight: 600;
}

/* 终态异常：failed 当前节点红环强调，cancelled 回落中性灰，均不改动节点序号与文案。 */
.collaboration-stage-rail.is-failed .collaboration-stage-node.active > span {
  border-color: var(--color-red);
  background: var(--color-red);
  box-shadow: 0 0 0 4px var(--color-red-soft);
}

.collaboration-stage-rail.is-cancelled .collaboration-stage-node.active > span {
  color: var(--color-muted);
  border-color: var(--color-border-strong);
  background: var(--color-surface-muted);
  box-shadow: 0 0 0 4px var(--color-surface-muted);
}

/* 动作工具条：整条为一张工具栏卡，左侧版本提示、右侧动作按钮组；最终确认沿用 .button.primary 实心主色突出。 */
.collaboration-context-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px var(--space-card);
  padding: 12px var(--space-card);
  margin-bottom: var(--space-section);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-panel);
}

.collaboration-revision {
  display: grid;
  gap: 4px;
  min-width: 220px;
  padding: 2px 0;
}

.collaboration-revision > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.collaboration-revision span,
.collaboration-revision p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-caption);
}

.collaboration-revision strong {
  font-variant-numeric: tabular-nums;
}

/* 版本过期提示收进工具条内的琥珀小胶囊，与整卡边界解耦。 */
.collaboration-revision.stale {
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--color-warning) 35%, var(--color-border));
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-warning) 7%, var(--color-surface));
}

.collaboration-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

/* 对象识别区在主页面同时展示识别结果和现有对象选择器，避免二级弹窗遮蔽当前判断上下文。 */
.collaboration-assignment-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-card);
  padding: 14px var(--space-card);
  margin-bottom: var(--space-section);
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
  box-shadow: var(--shadow-panel);
}

.collaboration-assignment-review.is-confirmed {
  border-color: color-mix(in srgb, var(--color-success) 32%, var(--color-border));
  background: color-mix(in srgb, var(--color-success) 5%, var(--color-surface));
}

.collaboration-assignment-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.collaboration-assignment-copy > span,
.collaboration-assignment-copy > p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-caption);
}

.collaboration-assignment-copy > strong {
  overflow-wrap: anywhere;
}

.collaboration-assignment-inline-form {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr)) max-content;
  gap: 10px;
  align-items: end;
  min-width: 0;
  margin-left: 0;
}

.collaboration-assignment-inline-form .field {
  min-width: 0;
  margin: 0;
}

/* AI 协同归属选择器使用页面内按钮菜单，避免内嵌浏览器原生 select 弹层无法提交选中项。 */
.collaboration-assignment-picker {
  position: relative;
  width: 100%;
}

.collaboration-assignment-picker > summary {
  display: block;
  min-width: 0;
  min-height: 40px;
  padding: 9px 34px 9px 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collaboration-assignment-picker > summary > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collaboration-assignment-picker > summary::-webkit-details-marker {
  display: none;
}

.collaboration-assignment-picker > summary::after {
  content: "⌄";
  position: absolute;
  top: 8px;
  right: 12px;
  color: var(--color-muted);
}

.collaboration-assignment-picker[open] > summary {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.collaboration-assignment-options {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  gap: 4px;
  width: max(100%, 320px);
  max-height: 280px;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.collaboration-assignment-option {
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}

.collaboration-assignment-option:hover,
.collaboration-assignment-option:focus-visible,
.collaboration-assignment-option.is-selected {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  outline: none;
}

.collaboration-input-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: var(--space-section);
  align-items: start;
  margin-bottom: var(--space-section);
}

.collaboration-input-form,
.collaboration-files-panel {
  min-width: 0;
}

/* AI 协同准备区的手写说明与文件上传分组，避免自由文本和附件控件在窄侧栏里黏连。 */
.collaboration-manual-input-form {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}

.collaboration-manual-input-form textarea {
  min-height: 132px;
  resize: vertical;
}

.collaboration-manual-input-form .button {
  justify-self: start;
}

.collaboration-manual-save-status {
  min-height: 18px;
  margin: -4px 0 0;
}

.collaboration-reference-head,
.collaboration-transcript-head,
.collaboration-query-head,
.collaboration-draft-head,
.ai-experience-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.collaboration-reference-head > span,
.collaboration-transcript-head span,
.ai-experience-card-head span {
  color: var(--color-muted);
  font-size: var(--font-size-caption);
}

.collaboration-reference-trail,
.collaboration-transcript-list,
.collaboration-query-list,
.ai-experience-cards {
  display: grid;
  gap: 10px;
}

.collaboration-reference-card,
.collaboration-transcript-card,
.collaboration-query-card,
.ai-experience-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.collaboration-reference-card.required {
  border-left: 3px solid var(--color-primary);
}

/* AI 协同参考源监测：用紧凑指标和逐条读取状态呈现当前分析版本的真实输入边界。 */
.collaboration-reference-monitor-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.collaboration-reference-monitor-summary > div {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.collaboration-reference-monitor-summary strong {
  font-size: var(--font-size-title);
}

.collaboration-reference-monitor-summary span,
.collaboration-reference-monitor-head + .collaboration-reference-meta {
  color: var(--color-muted);
}

.collaboration-reference-monitor-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.ai-collaboration-modal > .modal-body > .notice .muted {
  display: block;
  margin-top: 5px;
}

@media (max-width: 700px) {
  .collaboration-reference-monitor-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.collaboration-reference-select {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.collaboration-reference-select > span,
.collaboration-transcript-head > div,
.ai-experience-card-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.collaboration-reference-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 10px;
  color: var(--color-muted);
  font-size: var(--font-size-caption);
}

.collaboration-file-list {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.collaboration-file-list > article,
.collaboration-experience-list > article {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.collaboration-file-list > article > div,
.collaboration-experience-list > article > div {
  display: grid;
  gap: 3px;
}

.collaboration-file-list span,
.collaboration-experience-list span {
  color: var(--color-muted);
  font-size: var(--font-size-caption);
}

.collaboration-transcript-review {
  margin-top: 12px;
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
}

.collaboration-transcript-review summary {
  color: var(--color-primary);
  cursor: pointer;
  font-weight: 600;
}

.collaboration-transcript-review form {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.transcript-polish-compare,
.collaboration-draft-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.collaboration-query-card dl,
.collaboration-draft-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin-top: 10px;
}

.collaboration-query-card dl > div,
.collaboration-draft-facts > div {
  display: grid;
  gap: 3px;
}

.collaboration-query-card dt,
.collaboration-draft-facts dt {
  color: var(--color-muted);
  font-size: var(--font-size-caption);
}

/* 主工作区双栏：左栏随内容自然向下展开，右栏放三棵草案树；不使用内部滚动条，避免资料清单被截断。 */
.collaboration-workspace {
  display: grid;
  grid-template-columns: minmax(340px, 372px) minmax(0, 1fr);
  gap: var(--space-section);
  align-items: start;
  min-width: 0;
  margin-bottom: var(--space-section);
}

/* 没有准备资料或结果审计侧栏时，草案树占满工作区，避免保留无内容的左侧空列。 */
.collaboration-workspace-single {
  grid-template-columns: minmax(0, 1fr);
}

.collaboration-side {
  position: static;
  display: grid;
  gap: var(--space-section);
  min-width: 0;
  max-height: none;
  overflow: visible;
}

.collaboration-side > *,
.collaboration-main > * {
  min-width: 0;
}

/* 双栏内的分区卡与输入栅格由工作区间距统一接管，清除 workspace 自带的上边距。 */
.collaboration-side .workspace,
.collaboration-main .workspace {
  margin-top: 0;
}

.collaboration-side .collaboration-input-grid {
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 0;
}

.collaboration-main {
  display: grid;
  gap: var(--space-section);
  min-width: 0;
}

/* 执行中/成功提示条作为页级横幅，间距交给 page-shell 节奏，清掉 notice 自带的下边距。 */
.ai-collaboration-page > .notice {
  margin-bottom: 0;
}

/* AI 协同草案树：默认折叠摘要、批量展开控制与必填字段高亮。 */
.collaboration-draft-global-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.collaboration-draft-global-controls > span {
  color: var(--color-muted);
  font-size: var(--font-size-caption);
}

.collaboration-draft-global-controls .toolbar {
  margin: 0;
}

/* 三棵草案树分区卡：每棵树一张独立白卡，卡头 = 维度图标 + 中文名 + 草案计数徽标 + 高风险红色徽标。 */
.collaboration-draft-trees {
  display: grid;
  gap: var(--space-section);
}

.collaboration-draft-tree {
  min-width: 0;
}

/* AI 协同草案分组标题：标题区允许收缩，计数、展开、收起和新增动作始终作为一个不可拆分的单行工具组。 */
.collaboration-draft-tree > .section-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 12px;
}

.collaboration-draft-tree-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.collaboration-draft-tree-icon {
  flex: none;
  width: 34px;
  height: 34px;
  --icon-art-scale-up: 20px;
  border-radius: 10px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.collaboration-draft-tree-heading {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.collaboration-draft-tree-heading > span {
  color: var(--color-muted);
  font-size: var(--font-size-caption);
}

.collaboration-draft-tree-meta {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: max-content;
  white-space: nowrap;
}

.collaboration-draft-tree-body,
.collaboration-draft-children {
  display: grid;
  gap: 10px;
}

.collaboration-draft-tree-body {
  margin-top: 14px;
}

/* 层级引导线：1px 细线 + 缩进表达父子草案层级，不抢占内容视觉权重。 */
.collaboration-draft-children {
  margin-top: 10px;
  margin-left: 12px;
  padding-left: 16px;
  border-left: 1px solid var(--color-border);
}

/* 草案节点左侧 3px 风险色条：high 红、medium 灰、其余主蓝。 */
.collaboration-draft-node {
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.collaboration-draft-node.risk-high {
  border-left-color: var(--color-red);
}

.collaboration-draft-node.risk-medium {
  border-left-color: var(--color-muted);
}

.collaboration-draft-summary {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) max-content;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.collaboration-draft-summary::-webkit-details-marker {
  display: none;
}

.collaboration-draft-summary::before {
  content: "›";
  color: var(--color-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  transform-origin: center;
  transition: transform 140ms ease;
}

.collaboration-draft-node[open] > .collaboration-draft-summary::before {
  transform: rotate(90deg);
}

.collaboration-draft-summary-title {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-text);
  font-weight: 700;
}

.collaboration-draft-summary-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.collaboration-draft-node-body {
  padding-top: 12px;
}

.collaboration-draft-head > div:first-child {
  display: grid;
  gap: 3px;
}

.collaboration-draft-head > div:first-child > span {
  color: var(--color-muted);
  font-size: var(--font-size-caption);
}

.collaboration-draft-head > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.collaboration-draft-compare {
  margin-top: 12px;
}

.collaboration-draft-compare > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

/* 用户最终草案列用软蓝底与主蓝描边强调，与 AI 原始建议列形成并排对照。 */
.collaboration-draft-compare > div:last-child {
  border-color: color-mix(in srgb, var(--color-primary) 26%, var(--color-border));
  background: var(--color-primary-softer);
}

.collaboration-draft-compare span {
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  font-weight: 600;
}

/* AI 草案对比使用业务字段清单代替原始 JSON，字段名和值在窄屏下仍保持可读且不横向撑破。 */
.collaboration-draft-payload {
  display: grid;
  gap: 7px;
  margin: 8px 0 0;
}

.collaboration-draft-payload > div {
  display: grid;
  grid-template-columns: minmax(88px, 0.34fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
}

.collaboration-draft-payload dt,
.collaboration-draft-payload dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.collaboration-draft-payload dt {
  color: var(--color-muted);
  font-weight: 600;
}

.collaboration-draft-payload dd {
  color: var(--color-text);
}

.collaboration-draft-payload > div.is-missing-required {
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--color-red) 58%, var(--color-border));
  border-radius: 8px;
  background: var(--color-red-soft);
}

.collaboration-draft-payload > div.is-missing-required dt,
.collaboration-draft-payload > div.is-missing-required dd,
.collaboration-draft-payload > div.is-missing-required small {
  color: var(--color-red);
}

.collaboration-draft-payload > div.is-missing-required dd {
  display: grid;
  gap: 3px;
}

.collaboration-draft-payload > div.is-missing-required small {
  font-size: var(--font-size-caption);
  font-weight: 700;
}

.collaboration-draft-editor-field.is-missing-required {
  padding: 10px;
  border: 1px solid var(--color-red);
  border-radius: var(--radius-control);
  background: var(--color-red-soft);
}

.collaboration-draft-editor-field.is-missing-required > span,
.collaboration-draft-editor-error {
  color: var(--color-red);
  font-weight: 700;
}

.collaboration-draft-editor-field.is-missing-required input,
.collaboration-draft-editor-field.is-missing-required select,
.collaboration-draft-editor-field.is-missing-required textarea {
  border-color: var(--color-red);
}

.collaboration-draft-compare pre,
.ai-experience-markdown {
  margin: 6px 0 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
}

/* 证据与版本边界弱化小号展示，正文字号收敛、颜色降为次要文字。 */
.collaboration-draft-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--color-text);
  font-size: 13px;
}

.collaboration-draft-facts .full {
  grid-column: 1 / -1;
}

/* AI 协同草案待人工补充明细：紧跟草案事实区，逐条展示模型引用缺失对象的校验提示，配合 warning 徽标引导人工补全或移除。 */
.collaboration-draft-validation-errors {
  margin: 8px 0 0;
  padding: 8px 12px 8px 28px;
  border-radius: var(--radius-card);
  background: var(--color-warning-soft);
  color: var(--color-text);
  font-size: 13px;
}

.collaboration-draft-validation-errors li {
  margin: 2px 0;
  overflow-wrap: anywhere;
}

.evidence-chip,
.ai-experience-keywords span {
  display: inline-flex;
  margin: 2px 5px 2px 0;
  padding: 3px 8px;
  color: var(--color-primary-hover);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  font-size: var(--font-size-caption);
}

/* 转写读取遮罩：毛玻璃遮罩 + 居中卡 + 呼吸 loading 环；仅视觉精修，交互锁定逻辑不变。 */
.collaboration-reading-overlay {
  position: fixed;
  z-index: 115;
  inset: 72px 0 0 var(--sidebar-width);
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(244, 245, 247, 0.72);
  backdrop-filter: blur(6px);
}

.sidebar-collapsed .collaboration-reading-overlay {
  left: var(--sidebar-collapsed-width);
}

.collaboration-reading-card {
  display: grid;
  place-items: center;
  gap: 10px;
  max-width: 400px;
  padding: 30px 28px;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-overlay);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
}

.loading-ring {
  width: 34px;
  height: 34px;
  border: 3px solid var(--color-primary-soft);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: collaboration-loading-spin 900ms linear infinite;
}

@keyframes collaboration-loading-spin {
  to { transform: rotate(360deg); }
}

.ai-confirm-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.ai-confirm-summary article,
.ai-confirm-risk-list article {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.ai-confirm-risk-list {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.ai-task-queue-tabs {
  margin-bottom: var(--space-section);
}

.ai-task-card {
  display: grid;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.ai-task-card.selected {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
  box-shadow: 0 0 0 2px var(--color-primary-soft);
}

.ai-task-card-select {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 14px;
  color: inherit;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.ai-task-card-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 14px 12px;
}

.ai-task-timeline-panel {
  margin-top: var(--space-card);
  padding-top: var(--space-card);
  border-top: 1px solid var(--color-border);
}

.ai-task-timeline {
  display: grid;
  gap: 0;
  padding: 0;
  list-style: none;
}

.ai-task-timeline li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
}

.ai-task-timeline li > span {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-surface);
}

.ai-task-timeline li > div {
  display: grid;
  gap: 2px;
}

.ai-task-timeline p,
.ai-task-timeline small {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-caption);
}

.ai-experience-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-experience-card.disabled {
  opacity: 0.76;
}

.ai-experience-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
  margin: 12px 0;
}

.ai-experience-score .progress {
  grid-column: 1 / -1;
}

.ai-experience-score strong {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.ai-experience-markdown {
  max-height: 220px;
  padding: 12px;
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

/* AI 协同在 4:3 宽度下收为单列：左栏解除 sticky 并置于草案树之前，阶段轨横向滚动，避免卡片内容压缩。 */
@media (max-width: 1200px) {
  .collaboration-workspace,
  .collaboration-input-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .collaboration-side {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .collaboration-primary-actions {
    justify-content: flex-start;
    margin-left: 0;
  }

  .ai-experience-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* AI 协同手机端把双栏对比、草案事实和确认摘要降为单列，并让读取遮罩覆盖抽屉壳层之外的内容区。 */
@media (max-width: 900px) {
  .collaboration-reading-overlay {
    inset: 72px 0 0;
  }

  .transcript-polish-compare,
  .collaboration-draft-compare,
  .collaboration-query-card dl,
  .collaboration-draft-facts,
  .ai-confirm-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .collaboration-draft-facts .full {
    grid-column: auto;
  }

  .collaboration-draft-children {
    margin-left: 10px;
    padding-left: 10px;
  }

  .collaboration-draft-summary {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .collaboration-draft-summary-meta {
    grid-column: 2;
    justify-content: flex-start;
  }

  /* 窄屏将整组标题动作移到标题下方，但组内按钮仍保持单行并允许横向查看。 */
  .collaboration-draft-tree > .section-title {
    grid-template-columns: minmax(0, 1fr);
  }

  .collaboration-draft-tree-meta {
    justify-content: flex-start;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }
}

@media (max-width: 600px) {
  .collaboration-draft-global-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .collaboration-draft-global-controls .toolbar,
  .collaboration-draft-global-controls .button {
    width: 100%;
  }

  .collaboration-assignment-review {
    align-items: stretch;
    flex-direction: column;
  }

  .collaboration-assignment-review .button {
    width: 100%;
  }

  /* 手机端对象识别表单改单列，名称选择与确认动作保持完整可点。 */
  .collaboration-assignment-inline-form {
    grid-template-columns: minmax(0, 1fr);
    flex-basis: 100%;
    margin-left: 0;
  }

  .collaboration-primary-actions .button,
  .collaboration-draft-actions .button,
  .ai-task-detail-actions .button {
    width: 100%;
  }

  .collaboration-reference-head,
  .collaboration-transcript-head,
  .collaboration-draft-head,
  .ai-experience-card-head {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-ring { animation: none; }
}

/* AI task center is a read-and-control workspace: the left rail selects durable tasks and the right panel owns lifecycle actions. */
.ai-task-center {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.ai-task-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.5fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
}

.ai-task-list,
.ai-task-detail {
  min-width: 0;
  margin: 0;
}

.ai-task-card-list {
  display: grid;
  gap: 10px;
  max-height: min(62vh, 720px);
  overflow: auto;
  padding-right: 4px;
}

.ai-task-card {
  display: grid;
  gap: 9px;
  width: 100%;
  padding: 15px;
  border: 1px solid var(--border-color, #dfe5ee);
  border-radius: 14px;
  background: var(--surface-color, #fff);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ai-task-card:hover,
.ai-task-card:focus-visible,
.ai-task-card.selected {
  border-color: var(--primary-color, #2563eb);
  box-shadow: 0 10px 28px rgb(37 99 235 / 10%);
  outline: none;
}

.ai-task-card.selected {
  transform: translateY(-1px);
}

.ai-task-card-heading,
.ai-task-detail-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-task-card-heading strong,
.ai-task-card-meta,
.ai-task-card-phase {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ai-task-card-meta,
.ai-task-card-phase,
.ai-task-detail-progress span {
  color: var(--muted-color, #667085);
  font-size: 13px;
}

.ai-task-progress .progress {
  width: 100%;
}

.ai-task-detail-progress > div {
  display: grid;
  gap: 4px;
}

.ai-task-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.ai-task-facts > div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 12px;
  background: var(--soft-surface, #f7f9fc);
}

.ai-task-facts dt {
  color: var(--muted-color, #667085);
  font-size: 12px;
}

.ai-task-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 650;
}

.ai-task-detail-actions {
  margin-top: 18px;
}

/* AI task center folds to one column on 4:3 and mobile screens without creating a horizontal page scrollbar. */
@media (max-width: 1200px) {
  .ai-task-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-task-card-list {
    max-height: 420px;
  }
}

@media (max-width: 600px) {
  .ai-task-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-task-card-heading,
  .ai-task-detail-progress {
    align-items: flex-start;
  }
}

/* AI任务中心卡片已从整卡 button 升级为 article + 内部选择按钮，覆盖旧报告中心整卡按钮尺寸。 */
.ai-task-card {
  gap: 0;
  padding: 0;
  cursor: default;
}

.ai-task-card-select {
  display: grid;
  gap: 9px;
  width: 100%;
  padding: 15px;
  color: inherit;
  text-align: left;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.ai-task-card-select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}


/* --------------------------------------------------------------------------
   区域：统一人员目录、账号生命周期与组织管理视图（20260730-project-narrative-ai）
   边界：本分区只服务三类结构——
   1) 系统配置·用户管理的服务端筛选/分页（renderUserDirectoryFilterForm /
      renderUserDirectoryPagination 输出的 user-directory-* 钩子）；
   2) 共享人员选择器 shared/person-directory-picker.js（表单内联字段
      person-picker-field-* 与弹窗 person-picker-dialog 内的搜索、候选卡片、
      分页与多选确认区），候选卡片复用 .project-master-item 的卡片语言；
   3) 账号生命周期与组织管理辅助结构（停用影响说明 notice-list、移出组织
      摘要 membership-removal-summary、已移出记录 membership-removed-*、
      维护成员弹窗内联组织切换 organization-switch-inline、组织列表行级选择
      organization-row-selectable 与选中标记 organization-selected-mark）。
   不影响其他页面；弹窗骨架几何仍由共享 .modal / .modal.modal-wide 规则承载。
   -------------------------------------------------------------------------- */

/* 用户目录筛选条：包住 inline-form 的服务端筛选表单，与下方表格保持固定间距。 */
.user-directory-filter-bar {
  margin-bottom: 12px;
  min-width: 0;
}

/* 用户目录服务端分页条：上一页/下一页 + 页码摘要，长文案允许换行不撑破表格容器。 */
.user-directory-pagination {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 12px;
  min-width: 0;
}

/* 表单内联选人字段：只读摘要 + 选择/清除按钮横排，摘要吃掉剩余宽度并防溢出。 */
.person-picker-field-control {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.person-picker-summary {
  flex: 1 1 auto;
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  min-height: var(--control-height);
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.person-picker-summary-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-picker-placeholder {
  color: var(--color-muted);
}

/* 多选已选标签组：标签可换行，避免人员多时将弹窗或表单横向撑破。 */
.person-picker-tags {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.person-picker-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.person-picker-open,
.person-picker-clear {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 选人弹窗沿用项目选择弹窗的层级处理，骨架几何由共享 .modal.modal-wide 承载。 */
.modal.person-picker-dialog {
  z-index: 42;
}

/* 弹窗主体：筛选区、候选列表、分页条、底部动作区纵向排列。 */
.person-picker {
  display: grid;
  gap: 12px;
  min-width: 0;
}

/* 弹窗筛选区：搜索框占主列，角色/部门 facet 与查询按钮紧随其后，控件不溢出。 */
.person-picker-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 180px) minmax(140px, 180px) auto;
  gap: 10px;
  align-items: end;
  min-width: 0;
}

.person-picker-filter .field,
.person-picker-search-field {
  min-width: 0;
}

.person-picker-filter input,
.person-picker-filter select {
  width: 100%;
  min-width: 0;
}

/* 候选卡片列表：视口约束滚动（对齐 .project-board-selector-modal .project-master-items 模式）。 */
.person-picker-results {
  display: grid;
  gap: 10px;
  max-height: min(52vh, 520px);
  overflow: auto;
  padding-right: 4px;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.person-picker-results::-webkit-scrollbar {
  width: 8px;
}

.person-picker-results::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--color-border-strong);
}

.person-picker-results::-webkit-scrollbar-track {
  background: transparent;
}

/* 候选人员卡片：复用项目主档卡片的边框/软底/hover 语言；单选为 button、多选为 label+checkbox。 */
.person-picker-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  color: var(--color-ink);
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.person-picker-card:hover,
.person-picker-card:focus-visible,
.person-picker-card:focus-within {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  outline: none;
}

.person-picker-card input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 3px;
}

.person-picker-card-main {
  flex: 1 1 auto;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.person-picker-card-main strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.person-picker-card-account {
  color: var(--color-muted);
  font-size: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 卡片辅助信息标签行：组织/中文角色/部门三类标签换行展示。 */
.person-picker-card-tags {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.person-picker-org {
  background: var(--color-surface);
  color: var(--color-muted);
}

.person-picker-role {
  border-color: transparent;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 650;
}

.person-picker-department {
  background: var(--color-surface);
  color: var(--color-ink);
}

/* 单选卡片右侧“选择”指示：与 link-button 同语言的主色文字动作。 */
.person-picker-card-action {
  flex: 0 0 auto;
  align-self: center;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.person-picker-empty {
  margin: 4px 0;
}

/* 弹窗内服务端分页条：页码摘要居左、翻页按钮居右，窄屏自动换行。 */
.person-picker-pagination {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  min-width: 0;
  color: var(--color-muted);
  font-size: 12px;
}

.person-picker-pagination > div {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 多选底部动作区：已选人数靠左，取消/确认靠右（.toolbar 基座已存在，这里只做分布）。 */
.person-picker-actions {
  justify-content: flex-end;
  align-items: center;
}

.person-picker-draft-count {
  margin-right: auto;
}

/* 停用账号影响说明列表：在确认弹窗 notice 下方逐条列明影响范围。 */
.notice-list {
  display: grid;
  gap: 4px;
  margin: 4px 0 0;
  padding-left: 20px;
  color: var(--color-muted);
}

/* 移出组织勾选摘要：提交前实时反馈已选组织数量，弱化底色与表单字段区分。 */
.membership-removal-summary {
  padding: 8px 12px;
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 已移出记录区块：与上方操作表单用分隔线切开，只读展示历史关系。 */
.membership-removed-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.membership-removed-list h4 {
  margin: 0;
}

.membership-removed-item {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.membership-removed-item strong,
.membership-removed-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 维护成员弹窗内联组织切换：当前组织说明下方的次要动作行，链接按钮可换行。 */
.organization-switch-inline {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  padding: 8px 12px;
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

/* 组织列表行级选择：可管理组织整行可点，hover 与键盘焦点给出明确反馈；
   普通成员行不输出 organization-row-selectable 钩子，不伪装成可选行。 */
.organization-row-selectable {
  cursor: pointer;
}

.organization-row-selectable:hover td {
  background: var(--color-primary-soft);
}

.organization-row-selectable:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* 当前管理组织行底色：与 hover 反馈区分，弱化呈现选中态。 */
.organization-row-current td {
  background: var(--color-surface-muted);
}

.organization-row-current.organization-row-selectable:hover td {
  background: var(--color-primary-soft);
}

/* 选中标记：紧跟组织名称内联展示，不再占用操作列按钮位。 */
.organization-selected-mark {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

/* 4:3 断点：选人弹窗筛选区折为两列，搜索框独占首行，避免 facet 下拉被压缩。 */
@media (max-width: 1200px) {
  .person-picker-filter {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .person-picker-search-field {
    grid-column: 1 / -1;
  }
}

/* 手机竖屏：筛选区单列、内联字段控制区允许换行，翻页与动作按钮保持可触达。 */
@media (max-width: 600px) {
  .person-picker-filter {
    grid-template-columns: minmax(0, 1fr);
  }

  .person-picker-field-control {
    flex-wrap: wrap;
  }

  .person-picker-summary {
    flex: 1 1 100%;
  }

  .person-picker-open,
  .person-picker-clear {
    min-height: 40px;
  }

  .person-picker-results {
    max-height: min(46vh, 420px);
  }

  .person-picker-pagination {
    justify-content: flex-start;
  }
}

/* 手机竖屏：本次业务变更行、任务清单输入和知识关系树收敛为单列，避免新增操作在窄屏横向溢出。 */
@media (max-width: 600px) {
  .project-change-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .task-checklist-draft-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .task-checklist-draft-row .button {
    justify-self: start;
  }

  .knowledge-relation-business-branch,
  .knowledge-relation-task-branch {
    margin-left: 10px;
  }

  .knowledge-relation-tree-option {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .knowledge-relation-tree-option > .badge {
    grid-column: 2;
    justify-self: start;
  }
}

/* Task conversation region: compact SaaS discussion flow, reply context, current-organization @ picker, and author actions. */
.task-comment-composer {
  position: relative;
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-muted);
}

.task-comment-reply-context,
.task-comment-composer-foot,
.task-comment-meta,
.task-comment-actions,
.task-comment-mentions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.task-comment-reply-context {
  justify-content: space-between;
  padding: 8px 10px;
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-muted);
}

/* 任务留言回复态：hidden 属性必须优先于 flex 布局，未选择回复对象时不占据任何空间。 */
.task-comment-reply-context[hidden] {
  display: none;
}

.task-comment-composer-foot {
  justify-content: space-between;
}

.task-comment-composer-foot .button,
.task-mention-suggestions button {
  min-height: 44px;
}

.task-mention-suggestions {
  position: absolute;
  z-index: 40;
  top: calc(100% - 58px);
  left: 16px;
  right: 16px;
  display: grid;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
}

.task-mention-suggestions[hidden] {
  display: none;
}

.task-mention-suggestions button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
}

.task-mention-suggestions button:hover,
.task-mention-suggestions button:focus-visible {
  background: var(--color-primary-soft);
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.task-mention-suggestions button span {
  color: var(--color-muted);
  font-size: 12px;
}

.task-comment-list {
  display: grid;
}

.task-comment-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}

.task-comment-item:last-child {
  border-bottom: 0;
}

.task-comment-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 700;
}

.task-comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.task-comment-content {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.task-comment-meta time,
.task-comment-meta span {
  color: var(--color-muted);
  font-size: 12px;
}

.task-comment-content > p {
  margin: 0;
  color: var(--color-ink);
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.task-comment-quote {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  color: var(--color-muted);
}

.task-comment-quote span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-comment-mentions span {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 12px;
}

.task-comment-actions .link-button {
  min-width: 44px;
  min-height: 44px;
}

.task-comment-deleted {
  color: var(--color-muted) !important;
  font-style: italic;
}

.task-comment-delete-preview {
  margin: 0;
  padding: 12px;
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-surface-muted);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

/* Task checklist progress history stays inside the maintenance modal and uses a dense, readable list. */
.task-progress-history {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.task-progress-history-head,
.task-progress-history-item {
  display: grid;
  align-items: center;
  gap: 10px;
}

.task-progress-history-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

.task-progress-history-head span,
.task-progress-history-item span {
  color: var(--color-muted);
  font-size: 12px;
}

.task-progress-history-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}

.task-progress-history-item {
  grid-template-columns: minmax(120px, 0.8fr) 64px minmax(0, 1.4fr);
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.task-progress-history-item > div {
  display: grid;
  gap: 2px;
}

.task-progress-history-item b {
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.task-progress-history-item p {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  /* Task conversations collapse metadata and history columns without introducing horizontal scrolling. */
  .task-comment-composer-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .task-comment-composer-foot .button {
    width: 100%;
  }

  .task-progress-history-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .task-progress-history-item p {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
 * 2026-08-03 全站视觉精修（第二轮整体整改，用户确认方向：延续商务 SaaS 蓝白体系再提质）
 * 范围：按钮按压反馈与主按钮质感、表单聚焦软环、浮层遮罩与边框、表格行 hover、
 *       登录页氛围底纹、品牌徽标同色系质感、导航激活字重、徽章内描边。
 * 边界：仅视觉层追加覆盖，不改布局尺寸、不改 DOM 结构、不触碰契约锁定选择器字符串；
 *       遵守焕新红线——无蓝紫渐变、无高饱和背景、无玻璃拟态、无大面积投影堆砌。
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 分区一：按钮质感精修（服务全站 .button——页面操作区、弹窗底部、抽屉与确认窗）
 * 主按钮静止态加微投影与顶部高光，hover 投影随 2026-08 token 升级；
 * 全站可用按钮提供 :active 按压下沉反馈；focus 外环在追加层重新声明，
 * 避免被同色优先级的主按钮投影覆盖。
 * -------------------------------------------------------------------------- */
.button {
  transition:
    border-color var(--motion-fast),
    background var(--motion-fast),
    box-shadow var(--motion-fast),
    color var(--motion-fast),
    transform var(--motion-fast);
}

.button.primary {
  box-shadow:
    0 1px 2px rgba(43, 90, 237, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.button.primary:not(:disabled):hover {
  box-shadow:
    0 6px 14px -4px rgba(43, 90, 237, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.button:not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(1px);
}

.button.primary:not(:disabled):active {
  box-shadow: 0 1px 2px rgba(43, 90, 237, 0.22);
}

.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.button.primary:focus-visible {
  box-shadow:
    0 0 0 3px var(--color-primary-soft),
    0 1px 2px rgba(43, 90, 237, 0.2);
}

/* --------------------------------------------------------------------------
 * 分区二：表单控件聚焦软环（服务所有 .field 与共享 .input/.select/.textarea，
 * 覆盖页面筛选区、创建/编辑弹窗、确认窗备注输入等全部写场景）
 * 聚焦外环由实色软底改为半透明主蓝软环，层次更通透；描边与 hover 规则不变。
 * -------------------------------------------------------------------------- */
:where(.field .input, .field .select, .field input, .field select, .field textarea, .textarea, .select, .input):focus-visible {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(43, 90, 237, 0.14);
}

/* --------------------------------------------------------------------------
 * 分区三：浮层遮罩与边框（服务全部 .modal/.drawer 及配套遮罩——业务弹窗、
 * 确认窗、选人弹窗、AI 协作弹窗、项目看板抽屉等）
 * 遮罩色调微加深、模糊 2px→4px 聚焦内容；浮层面板边框随 2026-08 边框 token 收敛。
 * -------------------------------------------------------------------------- */
.modal-mask,
.drawer-mask {
  background: rgba(16, 23, 40, 0.46);
  backdrop-filter: blur(4px);
}

.modal,
.drawer {
  border-color: rgba(194, 203, 216, 0.65);
}

/* --------------------------------------------------------------------------
 * 分区四：数据表格行 hover（服务知识库、会议、用户管理、审计等全部 table 视图）
 * 行 hover 由灰底改为主蓝最浅软底，与白卡层次更通透；表头与行高分规则不变。
 * -------------------------------------------------------------------------- */
tbody tr:hover {
  background: var(--color-primary-softer);
}

/* --------------------------------------------------------------------------
 * 分区五：登录/首次改密页氛围底纹（仅服务 .login-screen 独立任务画布）
 * 浅色径向晕染提亮画布层级，无高饱和背景、无蓝紫渐变；登录卡样式不变。
 * -------------------------------------------------------------------------- */
.login-screen {
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(43, 90, 237, 0.08), transparent 60%),
    radial-gradient(900px 480px at 108% 112%, rgba(15, 157, 99, 0.07), transparent 55%),
    var(--color-bg);
}

/* --------------------------------------------------------------------------
 * 分区六：品牌徽标同色系质感（服务侧边栏品牌区与登录页品牌区 .brand-mark）
 * 主蓝同色相微渐变 + 顶部高光与外向投影，单色相不引入第二强调色。
 * -------------------------------------------------------------------------- */
.brand-mark {
  background: linear-gradient(135deg, #3d6bff 0%, var(--color-primary) 62%);
  box-shadow:
    0 4px 10px -2px rgba(43, 90, 237, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* --------------------------------------------------------------------------
 * 分区七：导航激活项与徽章细节（服务侧边栏导航与全站 .badge 状态徽标）
 * 激活路由加 600 字重强化当前位置；徽章加极浅内描边提升软色底边缘清晰度。
 * -------------------------------------------------------------------------- */
.nav-item.active {
  font-weight: 600;
}

.badge {
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.05);
}

/* --------------------------------------------------------------------------
 * 问题反馈页面：列表、详情、截图预览与更新记录使用正式 SaaS 视觉系统；
 * 动效仅表达状态与层级变化，不改变状态机或权限边界。
 * -------------------------------------------------------------------------- */
.feedback-page {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.feedback-stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}

.feedback-collection-section {
  overflow: hidden;
}

.feedback-filter-form {
  display: grid;
  grid-template-columns: minmax(210px, 1.4fr) repeat(4, minmax(140px, 0.8fr)) auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-subtle, #f7f9fc);
}

.feedback-filter-form .field {
  min-width: 0;
  margin: 0;
}

.feedback-filter-actions,
.feedback-row-actions,
.feedback-pagination > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.feedback-filter-actions .button {
  min-height: 42px;
}

.feedback-list-table {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: auto;
}

.feedback-list-table table {
  min-width: 1040px;
}

.feedback-list-table td {
  vertical-align: middle;
}

.feedback-list-table td:nth-child(2) {
  min-width: 260px;
  max-width: 360px;
}

.feedback-list-table td:nth-child(2) strong,
.feedback-list-table td:nth-child(2) small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-mobile-list {
  display: none;
}

.feedback-mobile-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface, #fff);
}

.feedback-mobile-card-head,
.feedback-mobile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.feedback-mobile-card h3,
.feedback-mobile-card p {
  margin: 0;
}

.feedback-mobile-card p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-text-muted);
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.feedback-mobile-meta {
  justify-content: flex-start;
  color: var(--color-text-muted);
  font-size: 12px;
}

.feedback-list-table td:nth-child(2) small {
  margin-top: 5px;
  color: var(--color-text-muted);
}

.feedback-number-link {
  border: 0;
  padding: 0;
  color: var(--color-primary);
  background: transparent;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.feedback-number-link:hover,
.feedback-number-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.feedback-row-actions {
  min-width: 250px;
}

.feedback-row-actions .button,
.feedback-row-actions .link-button {
  min-height: 36px;
}

.feedback-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.feedback-status-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 0 rgba(43, 90, 237, 0.28);
}

.feedback-status-badge.terminal {
  opacity: 0.9;
}

.feedback-pagination {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
  color: var(--color-text-muted);
}

.feedback-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  gap: 20px;
  align-items: start;
}

.feedback-detail-main,
.feedback-screenshot-card {
  min-width: 0;
  height: 100%;
}

.feedback-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 0 0 20px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-border);
}

.feedback-facts > div {
  padding: 14px 16px;
  background: var(--color-surface, #fff);
}

.feedback-facts dt {
  margin-bottom: 6px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.feedback-facts dd {
  margin: 0;
  color: var(--color-text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.feedback-description {
  padding: 18px;
  border-left: 3px solid var(--color-primary);
  border-radius: 0 10px 10px 0;
  background: var(--color-primary-softer);
}

.feedback-description h3,
.feedback-description p {
  margin: 0;
}

.feedback-description p {
  margin-top: 10px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.feedback-screenshot-preview {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #f8fafc;
}

.feedback-screenshot-preview img {
  display: block;
  width: 100%;
  max-height: 430px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}

.feedback-screenshot-preview figcaption {
  color: var(--color-text-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.feedback-local-preview {
  max-width: 560px;
  margin-top: 14px;
}

.feedback-change-timeline {
  position: relative;
  display: grid;
  gap: 0;
  max-width: 920px;
}

.feedback-change-timeline::before {
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 21px;
  width: 1px;
  background: var(--color-border);
  content: "";
}

.feedback-change-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
}

.feedback-change-marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(43, 90, 237, 0.2);
  border-radius: 50%;
  color: var(--color-primary);
  background: #fff;
  transition: transform 160ms ease, border-color 160ms ease;
}

.feedback-change-item:hover .feedback-change-marker {
  transform: translateY(-2px);
  border-color: var(--color-primary);
}

.feedback-change-marker .business-icon {
  width: 20px;
  height: 20px;
}

.feedback-change-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.feedback-change-head time,
.feedback-change-item small,
.feedback-change-item p {
  color: var(--color-text-muted);
}

.feedback-change-item p {
  margin: 5px 0;
  font-size: 13px;
}

.feedback-change-item blockquote {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f7f9fc;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.feedback-write-dialog .modal-body {
  overflow-x: hidden;
}

.feedback-issue-form,
.feedback-progress-form,
.feedback-status-form {
  display: grid;
  gap: 16px;
}

.feedback-screenshot-field input[type="file"] {
  padding: 9px;
}

.feedback-remove-screenshot {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--color-text-muted);
}

.feedback-confirm-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  color: var(--color-primary);
  background: var(--color-primary-softer);
}

.feedback-status-form > h3,
.feedback-status-form > p {
  margin: 0;
}

@media (max-width: 1200px) {
  .feedback-filter-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feedback-filter-actions { align-self: end; }
  .feedback-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .feedback-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feedback-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feedback-filter-actions { grid-column: 1 / -1; }
  .feedback-row-actions { min-width: 220px; }
}

@media (max-width: 600px) {
  .feedback-page { gap: 14px; }
  .feedback-stats-grid,
  .feedback-filter-form,
  .feedback-facts { grid-template-columns: minmax(0, 1fr); }
  .feedback-filter-form { padding: 12px; }
  .feedback-filter-actions .button { flex: 1; }
  .feedback-list-table { display: none; }
  .feedback-mobile-list { display: grid; gap: 12px; }
  .feedback-mobile-card .feedback-row-actions { min-width: 0; }
  .feedback-mobile-card .feedback-row-actions .button,
  .feedback-mobile-card .feedback-row-actions .link-button { flex: 1 1 42%; min-height: 42px; }
  .feedback-pagination,
  .feedback-change-head { align-items: flex-start; flex-direction: column; }
  .feedback-change-timeline::before { left: 17px; }
  .feedback-change-item { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
  .feedback-change-marker { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-page,
  .feedback-status-pulse,
  .feedback-change-marker {
    animation: none;
    transition: none;
  }
}