:root {
  color-scheme: light dark;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --text-strong: #171b21;
  --text-main: #1d1d1f;
  --text-muted: #67717b;
  --line: #e5e5ea;
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.82);
  --field-bg: rgba(255, 255, 255, 0.92);
  --app-bg: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  --main-bg: var(--app-bg);
  --side-bg: #ffffff;
  --side-text: var(--text-main);
  --nav-bg: #ffffff;
  --nav-text: var(--text-main);
  --nav-active-bg: #efe8ff;
  --nav-active-text: #5b4bd9;
  --accent: #00bcd4;
  --accent-2: #3a86ff;
  --brand-dna: #00bcd4;
  --danger: #d92d20;
  --primary-action: linear-gradient(135deg, #00bcc2, #5751f9);
  --primary-action-text: #ffffff;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --font-display: 30px;
  --font-display-compact: 22px;
  --font-hero: 30px;
  --font-hero-compact: 20px;
  --font-title: 30px;
  --font-title-mobile: 20px;
  --font-section: 18px;
  --font-body: 14px;
  --font-meta: 12px;
  --radius-card: 8px;
  --panel-shadow: 0 8px 24px rgba(23, 27, 33, 0.05);
  --apple-control-height: 40px;
  --apple-control-height-mobile: 36px;
  --apple-card-shadow: 0 10px 28px rgba(23, 27, 33, 0.045);
  --apple-focus-ring: 0 0 0 3px color-mix(in srgb, var(--bem-accent) 18%, transparent);
  --bem-text-strong: var(--text-strong);
  --bem-text-main: var(--text-main);
  --bem-text-muted: var(--text-muted);
  --bem-text-inverse: #ffffff;
  --bem-line: var(--line);
  --bem-surface: var(--surface);
  --bem-surface-soft: var(--surface-soft);
  --bem-field-bg: var(--field-bg);
  --bem-brand-dna: var(--brand-dna);
  --bem-accent: var(--accent);
  --bem-accent-2: var(--accent-2);
  --bem-primary-action: var(--primary-action);
  --bem-primary-action-text: var(--primary-action-text);
  --bem-nav-bg: var(--nav-bg);
  --bem-nav-text: var(--nav-text);
  --bem-space-1: var(--space-1);
  --bem-space-2: var(--space-2);
  --bem-space-3: var(--space-3);
  --bem-space-4: var(--space-4);
  --bem-space-5: var(--space-5);
  --bem-space-6: var(--space-6);
  --bem-font-title: var(--font-title);
  --bem-font-title-mobile: var(--font-title-mobile);
  --bem-font-section: var(--font-section);
  --bem-font-body: var(--font-body);
  --bem-font-meta: var(--font-meta);
  --bem-line-title: 1.12;
  --bem-line-body: 1.48;
  --bem-radius-card: var(--radius-card);
  --bem-radius-round: 999px;
  --bem-border-hairline: 1px solid var(--bem-line);
  --bem-shadow-panel: var(--panel-shadow);
  --bem-shadow-card: var(--apple-card-shadow);
  --bem-control-height: var(--apple-control-height);
  --bem-control-height-mobile: var(--apple-control-height-mobile);
  --bem-focus-ring: 0 0 0 3px color-mix(in srgb, var(--bem-accent) 18%, transparent);
  --bem-status-success: #2fa66a;
  --bem-status-warning: #ffb800;
  --bem-status-info: #3a86ff;
  --bem-status-danger: var(--danger);
  --bem-status-neutral: #8a8f98;
  background: #f8fbfd;
  color: var(--text-main);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
}

body.bem-dialog-open {
  overflow: hidden;
  padding-right: var(--bem-scrollbar-width, 16px);
}

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

button {
  cursor: pointer;
}

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  background: var(--app-bg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center top;
  will-change: transform;
}

body.customerPortalShell .app {
  grid-template-columns: 1fr;
}

body.customerPortalShell .sidebar {
  display: none;
}

body.customerPortalShell .main {
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
}

body.customerPortalShell .topbar {
  align-items: flex-start;
}

.sidebar {
  background: var(--side-bg);
  color: var(--side-text);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  border-right: 1px solid var(--line);
}

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

.brandMark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-card);
  background: var(--primary-action);
  color: var(--primary-action-text);
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  font-size: 18px;
}

.brand span,
.sidePanel span {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 4px;
}

nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

nav::-webkit-scrollbar {
  width: 6px;
}

nav::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 30%, transparent);
  border-radius: 4px;
}

.portalSwitch {
  display: grid;
  gap: 7px;
  padding: 8px;
  border-radius: var(--radius-card);
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.activeStaffSwitch {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: var(--radius-card);
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.activeStaffSwitch label {
  display: grid;
  gap: 6px;
}

.activeStaffSwitch span,
.activeStaffSwitch em {
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.activeStaffSelect {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--field-bg);
  color: var(--text-main);
  padding: 0 10px;
  outline-color: var(--accent);
}

.portalButton {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--field-bg);
  color: var(--text-main);
  padding: 7px 9px;
  text-align: left;
}

.portalButton strong,
.portalButton span {
  display: block;
}

.portalButton strong {
  color: inherit;
  font-size: 13px;
}

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

.portalButton.active,
.portalButton:hover {
  color: var(--nav-active-text);
  background: var(--nav-active-bg);
  border-color: var(--line);
}

.shellRoleSwitch {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-card);
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.shellRoleHint strong,
.shellRoleHint span {
  display: block;
}

.shellRoleHint strong {
  color: var(--text-strong);
  font-size: 13px;
}

.shellRoleHint span {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 3px;
}

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

.shellRoleButton {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--field-bg);
  color: var(--text-main);
  padding: 7px 8px;
  text-align: left;
}

.shellRoleButton strong,
.shellRoleButton span {
  display: block;
}

.shellRoleButton strong {
  font-size: 12px;
  line-height: 1.2;
}

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

.shellRoleButton.active,
.shellRoleButton:hover {
  background: var(--nav-active-bg);
  border-color: var(--line);
  color: var(--nav-active-text);
}

.navList {
  display: grid;
  gap: 8px;
}

.navButton {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background: var(--nav-bg);
  color: var(--nav-text);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  text-align: left;
}

.navButton.active,
.navButton:hover {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
  border-color: var(--line);
}

.theme-aqua {
  --side: #ffffff;
  --main: linear-gradient(180deg, #ffffff 0%, #f3f9fa 100%);
  --accent: #00bcd4;
  --brand-dna: #00bcd4;
  --accent2: #8f7bff;
  --accent-2: var(--accent2);
  --side-bg: #ffffff;
  --side-text: #1d1d1f;
  --nav-bg: #ffffff;
  --nav-text: #1d1d1f;
  --nav-active-bg: #efe8ff;
  --nav-active-text: #5b4bd9;
  --primary-action: linear-gradient(135deg, #00bcc2, #5751f9);
  --primary-action-text: #ffffff;
  --app-bg: url("../asset/backgrounds/staff-aqua.png"), linear-gradient(180deg, #ffffff 0%, #f3f9fa 100%);
  --main-bg: url("../asset/backgrounds/staff-aqua.png"), linear-gradient(180deg, #ffffff 0%, #f3f9fa 100%);
  --bem-accent: var(--accent);
  --bem-accent-2: var(--accent-2);
  --bem-primary-action: var(--primary-action);
  --bem-primary-action-text: var(--primary-action-text);
  --bem-nav-bg: var(--nav-bg);
  --bem-nav-text: var(--nav-text);
  --bem-app-bg: var(--app-bg);
  --bem-main-bg: var(--main-bg);
  --bem-side-bg: var(--side-bg);
  --apple-focus-ring: 0 0 0 3px color-mix(in srgb, var(--bem-accent) 18%, transparent);
  --bem-focus-ring: 0 0 0 3px color-mix(in srgb, var(--bem-accent) 18%, transparent);
}

.theme-aqua .side {
  color: var(--side-text);
  background: var(--side-bg);
}

.theme-aqua .sidebar {
  color: var(--side-text);
  background: var(--side-bg);
}

.theme-aqua .nav {
  color: var(--nav-text);
  background: var(--nav-bg);
  border: 1px solid var(--line);
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.theme-aqua .nav:hover {
  color: var(--nav-active-text);
  background: var(--nav-active-bg);
  border-color: color-mix(in srgb, var(--accent-2) 24%, var(--line));
  box-shadow: var(--apple-card-shadow);
}

.theme-aqua .nav.active {
  background: var(--nav-bg);
  border-color: var(--line);
}

.theme-aqua .navButton {
  color: var(--nav-text);
  background: var(--nav-bg);
  border: 1px solid var(--line);
}

.theme-aqua .navButton:hover,
.theme-aqua .navButton.active {
  color: var(--nav-active-text);
  background: var(--nav-active-bg);
  border-color: color-mix(in srgb, var(--accent-2) 24%, var(--line));
}

.theme-aqua .primaryButton {
  background: var(--primary-action);
  color: var(--primary-action-text);
}

.theme-teal {
  --side: linear-gradient(90deg, #ffffff 0%, #fffdf2 100%);
  --main: linear-gradient(180deg, #ffffff 0%, #fffdf2 100%);
  --accent: #ffb800;
  --accent2: #ffd60a;
  --accent-2: var(--accent2);
  --app-bg: url("../asset/backgrounds/manager-teal.png"), linear-gradient(180deg, #ffffff 0%, #fffdf2 100%);
  --main-bg: url("../asset/backgrounds/manager-teal.png"), linear-gradient(180deg, #ffffff 0%, #fffdf2 100%);
  --side-bg: linear-gradient(90deg, #ffffff 0%, #fffdf2 100%);
  --side-text: #1d1d1f;
  --nav-bg: #0b6f72;
  --nav-text: #ffffff;
  --nav-active-bg: #0b6f72;
  --nav-active-text: #ffffff;
  --primary-action: linear-gradient(135deg, #ffb800, #ffd60a);
  --primary-action-text: #171b21;
  --bem-accent: var(--accent);
  --bem-accent-2: var(--accent-2);
  --bem-primary-action: var(--primary-action);
  --bem-primary-action-text: var(--primary-action-text);
  --bem-nav-bg: var(--nav-bg);
  --bem-nav-text: var(--nav-text);
  --bem-app-bg: var(--app-bg);
  --bem-main-bg: var(--main-bg);
  --bem-side-bg: var(--side-bg);
  --apple-focus-ring: 0 0 0 3px color-mix(in srgb, var(--bem-accent) 18%, transparent);
  --bem-focus-ring: 0 0 0 3px color-mix(in srgb, var(--bem-accent) 18%, transparent);
}

.theme-teal .side {
  color: var(--side-text);
  background: var(--side-bg);
}

.theme-teal .sidebar {
  color: var(--side-text);
  background: var(--side-bg);
}

.theme-teal .nav {
  color: var(--nav-text);
  background: var(--nav-bg);
  border: 1px solid color-mix(in srgb, var(--nav-bg) 18%, var(--line));
}

.theme-teal .nav.active {
  background: var(--nav-active-bg);
  border-color: color-mix(in srgb, var(--nav-bg) 32%, var(--line));
}

.theme-teal .navButton {
  color: var(--nav-text);
  background: var(--nav-bg);
  border: 1px solid color-mix(in srgb, var(--nav-bg) 18%, var(--line));
}

.theme-teal .navButton:hover,
.theme-teal .navButton.active {
  color: var(--nav-active-text);
  background: var(--nav-active-bg);
  border-color: color-mix(in srgb, var(--nav-bg) 32%, var(--line));
}

.theme-teal .primaryButton {
  background: var(--primary-action);
  color: var(--primary-action-text);
}

.theme-sun {
  --side: linear-gradient(180deg, #b9e7ff 0%, #dff7ff 58%, #f2fbff 100%);
  --main: linear-gradient(180deg, #f2fbff 0%, #dff7ff 45%, #dffcf4 100%);
  --accent: #00bcd4;
  --accent2: #3a86ff;
  --accent-2: var(--accent2);
  --app-bg: url("../asset/backgrounds/customer-sun.png"), linear-gradient(180deg, #f2fbff 0%, #dff7ff 45%, #dffcf4 100%);
  --main-bg: url("../asset/backgrounds/customer-sun.png"), linear-gradient(180deg, #f2fbff 0%, #dff7ff 45%, #dffcf4 100%);
  --side-bg: linear-gradient(180deg, #b9e7ff 0%, #dff7ff 58%, #f2fbff 100%);
  --side-text: #171b21;
  --nav-bg: #ffffff;
  --nav-text: #171b21;
  --nav-active-bg: #ffffff;
  --nav-active-text: #171b21;
  --primary-action: linear-gradient(135deg, #00bcd4, #3a86ff);
  --primary-action-text: #ffffff;
  --bem-accent: var(--accent);
  --bem-accent-2: var(--accent-2);
  --bem-primary-action: var(--primary-action);
  --bem-primary-action-text: var(--primary-action-text);
  --bem-nav-bg: var(--nav-bg);
  --bem-nav-text: var(--nav-text);
  --bem-app-bg: var(--app-bg);
  --bem-main-bg: var(--main-bg);
  --bem-side-bg: var(--side-bg);
  --apple-focus-ring: 0 0 0 3px color-mix(in srgb, var(--bem-accent) 18%, transparent);
  --bem-focus-ring: 0 0 0 3px color-mix(in srgb, var(--bem-accent) 18%, transparent);
}

.theme-sun .side {
  background: var(--side-bg);
}

.theme-sun .sidebar {
  background: var(--side-bg);
}

.theme-sun .nav {
  color: var(--nav-text);
  background: var(--nav-bg);
  border: 1px solid var(--line);
}

.theme-sun .nav.active {
  background: var(--nav-active-bg);
  border-color: var(--line);
}

.theme-sun .navButton {
  color: var(--nav-text);
  background: var(--nav-bg);
  border: 1px solid var(--line);
}

.theme-sun .navButton:hover,
.theme-sun .navButton.active {
  color: var(--nav-active-text);
  background: var(--nav-active-bg);
  border-color: var(--line);
}

.theme-sun .primaryButton {
  background: var(--primary-action);
  color: var(--primary-action-text);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light dark;
    --surface: #1c1c1e;
    --surface-soft: rgba(28, 28, 30, 0.82);
    --field-bg: rgba(28, 28, 30, 0.78);
    --text-strong: #f5f5f7;
    --text-main: #e5e5ea;
    --text-muted: #a1a1aa;
    --line: rgba(255, 255, 255, 0.12);
  }

  .theme-aqua,
  .theme-teal,
  .theme-sun {
    background-blend-mode: multiply;
    background-color: var(--surface);
    filter: brightness(0.6) contrast(0.9);
  }

  body.customerPortalShell .theme-sun {
    color-scheme: light;
    --surface: #ffffff;
    --surface-soft: rgba(255, 255, 255, 0.82);
    --field-bg: rgba(255, 255, 255, 0.92);
    --text-strong: #171b21;
    --text-main: #1d1d1f;
    --text-muted: #67717b;
    --line: #e5e5ea;
    --bem-text-strong: var(--text-strong);
    --bem-text-main: var(--text-main);
    --bem-text-muted: var(--text-muted);
    --bem-line: var(--line);
    --bem-surface: var(--surface);
    --bem-field-bg: var(--field-bg);
    filter: none;
    background-blend-mode: normal;
    background-color: transparent;
  }

  body.customerPortalShell button {
    color: var(--text-main);
    -webkit-text-fill-color: currentColor;
  }

  body.customerPortalShell .topActions .primaryButton {
    background: var(--primary-action);
    color: var(--primary-action-text);
  }

  body.customerPortalShell .primaryButton {
    background: var(--primary-action);
    color: var(--primary-action-text);
    border-color: transparent;
  }

  body.customerPortalShell .primaryButton * {
    color: inherit;
    -webkit-text-fill-color: currentColor;
  }

  body.customerPortalShell .topActions .topSoftButton {
    background: var(--field-bg);
    color: var(--text-main);
    border-color: var(--line);
  }

  body.customerPortalShell .topSoftButton,
  body.customerPortalShell .secondaryButton,
  body.customerPortalShell .miniButton {
    background: var(--field-bg);
    color: var(--text-main);
    border-color: var(--line);
  }

  body.customerPortalShell .customerPortalQuickEntryCard {
    background: var(--surface);
    color: var(--text-main);
    border-color: var(--line);
  }

  body.customerPortalShell .customerPortalQuickEntryCard strong {
    color: var(--text-strong);
  }

  body.customerPortalShell .bemTileSelectTitle {
    color: var(--text-strong);
  }

  body.customerPortalShell .customerPortalQuickEntryCard em {
    color: var(--text-muted);
  }

  body.customerPortalShell .bemTileSelectDescription {
    color: var(--text-muted);
  }

  body.customerPortalShell .bemTileSelect {
    background: var(--field-bg);
    color: var(--text-main);
    border-color: var(--line);
  }
}

.sidePanel {
  margin-top: auto;
  padding: 16px;
  border-radius: var(--radius-card);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.main {
  min-width: 0;
  padding: var(--space-6) var(--space-6) 40px;
  background: var(--main-bg);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.topbar p {
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: 14px;
}

.topbar h1 {
  margin: 0;
  font-size: var(--font-title);
  line-height: 1.05;
  color: var(--text-strong);
}

.topActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.searchBox {
  width: min(360px, 35vw);
  height: 40px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  color: var(--text-muted);
}

.searchBox input {
  border: 0;
  outline: 0;
  background: transparent;
  min-width: 0;
  width: 100%;
}

.iconButton,
.topSoftButton,
.primaryButton,
.panelTitleAction {
  border: 0;
  border-radius: var(--radius-card);
  height: 40px;
  max-width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iconButton {
  width: 44px;
  color: var(--text-main);
  background: var(--field-bg);
  border: 1px solid var(--line);
}

.primaryButton {
  min-width: 0;
  max-width: 100%;
  padding: 0 16px;
  background: var(--primary-action);
  color: var(--primary-action-text);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topSoftButton {
  padding: 0 14px;
  background: var(--field-bg);
  border: 1px solid var(--line);
  color: var(--text-main);
  font-weight: 800;
}

.primaryButton.full {
  width: 100%;
  max-width: 100%;
}

.primaryButtonIcon,
.primaryButton > span:first-child {
  flex: 0 0 auto;
}

.primaryButtonLabel,
.compactButtonLabel {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  white-space: nowrap;
}

.view {
  display: grid;
  gap: var(--space-4);
}

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

.metric,
.panel,
.roomCard {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--panel-shadow);
  border-radius: var(--radius-card);
}

.metric {
  min-height: 154px;
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.managementHomeFocus {
  display: grid;
  gap: 14px;
}

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

.managementHomeFocusGrid article {
  min-height: 168px;
  display: grid;
  gap: 8px;
  align-content: start;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 13px;
}

.managementHomeFocusGrid article.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 26%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.managementHomeFocusGrid b {
  color: var(--text-strong);
  font-size: 24px;
}

.managementHomeFocusGrid p,
.managementHomeFocusGrid span,
.managementHomeFocusGrid em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.managementAreaGate {
  display: grid;
  gap: 14px;
}

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

.managementAreaSteps article {
  min-height: 148px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 13px;
}

.managementAreaSteps article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  color: var(--brand-dna);
  font-weight: 900;
}

.managementAreaSteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.managementAreaSteps p,
.managementAreaSteps em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.staffDailyCommandStrip {
  display: grid;
  gap: 14px;
}

.staffDailyCommandGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.staffDailyCommandGrid article {
  min-height: 124px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 13px;
}

.staffDailyCommandGrid span,
.staffDailyCommandGrid em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.staffDailyCommandGrid strong {
  color: var(--text-strong);
  font-size: 23px;
  line-height: 1.15;
}

.staffPersonalCenterSummary {
  display: grid;
  gap: 14px;
}

.staffPersonalCenterLayout {
  display: grid;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.staffPersonalCenterGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.staffPersonalCenterGrid article,
.staffSalaryPreview {
  min-height: 132px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 13px;
}

.staffPersonalCenterGrid span,
.staffPersonalCenterGrid em,
.staffSalaryPreview span,
.staffSalaryPreview p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.staffPersonalCenterGrid strong,
.staffSalaryPreview strong {
  color: var(--text-strong);
  font-size: 23px;
  line-height: 1.15;
}

.staffSalaryPreview {
  background: var(--field-bg);
  border-color: var(--line);
}

.staffSalaryPreview strong {
  font-size: 28px;
}

.workbenchTodayActionGate {
  display: grid;
  gap: 14px;
}

.workbenchTodayActionSteps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.workbenchTodayActionSteps article {
  min-height: 196px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 13px;
}

.workbenchTodayActionIndex {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.workbenchTodayActionSteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.workbenchTodayActionSteps p,
.workbenchTodayActionSteps em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.workbenchTodayActionSteps .miniButton {
  align-self: end;
  justify-self: start;
}

.leadClientConversionGate {
  display: grid;
  gap: 14px;
}

.leadClientConversionSteps {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.leadClientConversionSteps article {
  min-height: 164px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 13px;
}

.leadClientConversionSteps article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.leadClientConversionSteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.leadClientConversionSteps p,
.leadClientConversionSteps em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.leadFastActionClosureGate {
  display: grid;
  gap: 14px;
}

.leadFastActionStats,
.leadFastActionSteps {
  display: grid;
  gap: 10px;
}

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

.leadFastActionStats article {
  min-height: 74px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

.leadFastActionStats span,
.leadFastActionStats strong {
  display: block;
}

.leadFastActionStats span {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 800;
}

.leadFastActionStats strong {
  margin-top: 6px;
  color: var(--text-strong);
  font-size: 20px;
}

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

.leadFastActionSteps article {
  min-height: 214px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 13px;
}

.leadFastActionIndex {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.leadFastActionSteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.leadFastActionSteps p,
.leadFastActionSteps em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.leadFastActionSteps .miniButton {
  align-self: end;
  justify-self: start;
}

.leadCommandDesk {
  display: grid;
  gap: 14px;
}

.leadCommandDesk .panelTitle {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
}

.leadCommandDesk .panelTitle > div {
  width: 100%;
  min-width: 0;
}

.leadCommandDesk .panelTitle h2 {
  white-space: normal;
}

.leadCommandDesk .panelTitleAction {
  width: 100%;
  height: auto;
  min-height: 34px;
  justify-content: flex-start;
  white-space: normal;
  line-height: 1.35;
  text-align: left;
}

.leadCommandPrimary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
}

.leadCommandPrimary span,
.leadCommandPrimary p,
.leadCommandCard p,
.leadCommandCard em {
  color: var(--text-muted);
  font-style: normal;
  line-height: 1.45;
}

.leadCommandPrimary strong {
  display: block;
  margin: 5px 0;
  color: var(--text-strong);
  font-size: var(--font-title);
  line-height: 1.15;
}

.leadCommandPrimary p,
.leadCommandCard p {
  margin: 0;
}

.leadCommandGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.leadCommandCard {
  min-height: 210px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
}

.leadCommandCard.current {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}

.leadCommandCard > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.leadCommandCard strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.leadCommandCard em {
  font-size: 13px;
}


.metricIcon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--accent);
}

.metric span,
.metric em,
.taskMain em,
.clientTop span,
.roomCard p,
.roomDetail em,
.barItem em,
.progressItem span {
  color: var(--text-muted);
  font-style: normal;
}

.metric strong {
  font-size: var(--font-title);
}

.dashboardGrid,
.twoColumn {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.panel {
  padding: var(--space-4);
  min-width: 0;
}

.panel.wide {
  min-height: 416px;
}

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

.panelTitle > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panelTitle h2 {
  margin: 0;
  font-size: 18px;
}

.panelTitleAction {
  height: 34px;
  padding: 0 10px;
  background: var(--field-bg);
  color: var(--text-strong);
}

.timeline,
.clientList,
.alertList,
.careStats,
.revenueBars,
.storeGrid,
.meetingList,
.pathwayGrid,
.carePlanList,
.recordList,
.growthGrid,
.educationList,
.leadList,
.advisorList,
.wecomFlow,
.ruleList,
.workbenchGrid,
.serviceEntryGrid,
.staffDailyGrid,
.satisfactionList,
.requestGrid,
.slaGrid,
.praiseGrid,
.questionGrid,
.trendGrid,
.serviceFlow,
.blueprintGrid,
.phaseList,
.auditGrid,
.auditFocusList,
.packageGrid,
.approvalGrid,
.leadControlGrid,
.funnelList,
.careProjectGrid,
.businessGrid,
.financeAlertGrid,
.businessTable {
  display: grid;
  gap: 10px;
}

.clientModuleGrid,
.documentList,
.clientTimeline,
.clientLifecycle,
.journeyGrid {
  display: grid;
  gap: 10px;
}

.task {
  width: 100%;
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  padding: 10px 12px;
}

.task.done {
  background: var(--field-bg);
}

.taskTime,
.checkIcon {
  width: 46px;
  height: 38px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--bem-status-warning) 14%, var(--bem-surface));
  color: color-mix(in srgb, var(--bem-status-warning) 72%, var(--text-strong));
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
}

.checkIcon {
  background: color-mix(in srgb, var(--bem-status-success) 14%, var(--bem-surface));
  color: var(--bem-status-success);
}

.taskMain {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.taskMain strong,
.clientTop strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.taskKind,
.status {
  min-width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}

.taskKind {
  background: color-mix(in srgb, var(--bem-status-info) 12%, var(--bem-surface));
  color: var(--bem-status-info);
}

.status.ok {
  background: color-mix(in srgb, var(--bem-status-success) 14%, var(--surface));
  color: color-mix(in srgb, var(--bem-status-success) 72%, var(--text-strong));
}

.status.warn {
  background: color-mix(in srgb, var(--bem-status-warning) 18%, var(--surface));
  color: color-mix(in srgb, var(--bem-status-warning) 72%, var(--text-strong));
}

.status.danger {
  background: color-mix(in srgb, var(--bem-status-danger) 14%, var(--surface));
  color: color-mix(in srgb, var(--bem-status-danger) 76%, var(--text-strong));
}

.alert {
  min-height: 50px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.alert span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.alert.danger span {
  background: var(--bem-status-danger);
}

.alert.warn span {
  background: var(--bem-status-warning);
}

.alert.info span {
  background: var(--bem-status-info);
}

.clientForm,
.clientStageForm,
.leadForm,
.clientProfileUpdateForm,
.clientFilterForm,
.clientExperienceForm,
.clientContractForm,
.staffForm,
.staffPermissionForm,
.staffDeviceForm,
.staffPermissionAuditForm,
.staffScheduleForm,
.attendanceRecordForm,
.reminderActionForm,
.serviceEntryForm,
.clientServiceQuickForm,
.serviceRequestForm,
.serviceNpsReviewForm,
.praiseForm,
.roomOperationForm,
.careRecordForm,
.motherAssessmentForm,
.babyAssessmentForm,
.shiftHandoverForm,
.careDailyForm,
.paymentForm,
.financeFlowForm,
.financeReceivableAgingForm,
.financeSupplierPaymentForm,
.financeInvoiceArchiveForm,
.financeReportExportForm,
.financeMiniForm,
.financeUnifiedAccountActionForm,
.lifeServiceFulfillmentForm,
.businessForm,
.approvalForm {
  display: grid;
  gap: 12px;
}

.clientStageForm,
.leadForm,
.clientProfileUpdateForm,
.clientFilterForm,
.clientExperienceForm,
.clientContractForm,
.staffForm,
.staffPermissionForm,
.staffDeviceForm,
.staffPermissionAuditForm,
.staffScheduleForm,
.attendanceRecordForm,
.reminderActionForm,
.serviceEntryForm,
.clientServiceQuickForm,
.serviceRequestForm,
.serviceNpsReviewForm,
.praiseForm,
.roomOperationForm,
.careRecordForm,
.motherAssessmentForm,
.babyAssessmentForm,
.shiftHandoverForm,
.careDailyForm,
.paymentForm,
.financeFlowForm,
.financeReceivableAgingForm,
.financeSupplierPaymentForm,
.financeInvoiceArchiveForm,
.financeReportExportForm,
.financeMiniForm,
.financeUnifiedAccountActionForm,
.lifeServiceFulfillmentForm,
.businessForm,
.approvalForm {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

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

.clientStageForm .primaryButton,
.leadForm .primaryButton,
.clientProfileUpdateForm .primaryButton,
.clientFilterForm .primaryButton,
.clientExperienceForm .primaryButton,
.clientContractForm .primaryButton,
.clientServiceQualityActionForm .primaryButton,
.clientCheckinHandoverActionForm .primaryButton,
.clientSatisfactionReviewActionForm .primaryButton,
.staffForm .primaryButton,
.staffPermissionForm .primaryButton,
.staffDeviceForm .primaryButton,
.staffPermissionAuditForm .primaryButton,
.staffScheduleForm .primaryButton,
.attendanceRecordForm .primaryButton,
.reminderActionForm .primaryButton,
.serviceEntryForm .primaryButton,
.clientServiceQuickForm .primaryButton,
.serviceRequestForm .primaryButton,
.serviceNpsReviewForm .primaryButton,
.praiseForm .primaryButton,
.roomOperationForm .primaryButton,
.careRecordForm .primaryButton,
.motherAssessmentForm .primaryButton,
.babyAssessmentForm .primaryButton,
.shiftHandoverForm .primaryButton,
.careDailyForm .primaryButton,
.careProjectExecutionActionForm .primaryButton,
.paymentForm .primaryButton,
.financeFlowForm .primaryButton,
.financeReceivableAgingForm .primaryButton,
.financeSupplierPaymentForm .primaryButton,
.financeInvoiceArchiveForm .primaryButton,
.financeReportExportForm .primaryButton,
.financeMiniForm .primaryButton,
.businessForm .primaryButton,
.approvalForm .primaryButton {
  grid-column: 1 / -1;
}

.field {
  display: grid;
  gap: 7px;
}

.field span {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 43px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--field-bg);
  color: var(--text-main);
  padding: 0 12px;
  outline-color: var(--accent);
}

.field textarea {
  min-height: 104px;
  padding: 12px;
  resize: vertical;
  line-height: 1.55;
}

.field.span2 {
  grid-column: 1 / -1;
}

.largeList {
  min-height: 560px;
}

.clientManagementPrimary {
  display: grid;
  gap: 14px;
}

.clientTodayCommand {
  display: grid;
  gap: 14px;
}

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

.clientFocusSummary {
  display: grid;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
}

.clientFocusSummary > div:first-child {
  display: grid;
  gap: 4px;
}

.clientFocusSummary span,
.clientFocusSummary em,
.clientFocusSummary p {
  color: var(--text-muted);
}

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

.clientFocusSummary p {
  margin: 0;
  line-height: 1.55;
}

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

.clientFocusStats article {
  min-height: 70px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
}

.clientFocusStats article span,
.clientFocusStats article strong {
  display: block;
}

.clientFocusStats article strong {
  margin-top: 6px;
  font-size: 18px;
}

.clientUnderNameCommandDesk {
  display: grid;
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.clientUnderNameCommandGrid article {
  min-height: 132px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.clientUnderNameCommandGrid article > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.clientUnderNameCommandGrid strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.clientUnderNameCommandGrid p,
.clientUnderNameCommandGrid em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.clientUnderNameCommandGrid em {
  color: var(--text-muted);
  font-weight: 800;
}

.client360FirstScreenGate {
  display: grid;
  gap: 14px;
}

.client360FirstScreenStats,
.client360FirstScreenSteps {
  display: grid;
  gap: 10px;
}

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

.client360FirstScreenStats article {
  min-height: 74px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
}

.client360FirstScreenStats span,
.client360FirstScreenStats strong {
  display: block;
}

.client360FirstScreenStats span {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 800;
}

.client360FirstScreenStats strong {
  margin-top: 6px;
  color: var(--text-strong);
  font-size: 20px;
}

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

.client360FirstScreenSteps article {
  min-height: 178px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.client360FirstScreenIndex {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.client360FirstScreenSteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.client360FirstScreenSteps p,
.client360FirstScreenSteps em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.clientServiceEventClosureGate {
  display: grid;
  gap: 14px;
}

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

.clientServiceEventClosureStats article {
  min-height: 74px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
}

.clientServiceEventClosureStats span,
.clientServiceEventClosureStats strong {
  display: block;
}

.clientServiceEventClosureStats span {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 800;
}

.clientServiceEventClosureStats strong {
  margin-top: 6px;
  color: var(--text-strong);
  font-size: 20px;
}

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

.clientServiceEventClosureSteps article {
  min-height: 162px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.clientServiceEventClosureSteps article > .clientServiceEventClosureStepIndex {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.clientServiceEventClosureSteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.clientServiceEventClosureSteps p,
.clientServiceEventClosureSteps em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

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

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

.clientFirstScreenActionStripGrid article {
  min-height: 128px;
  display: grid;
  align-content: start;
  gap: 8px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
}

.clientFirstScreenActionStripGrid article > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.clientFirstScreenActionStripGrid strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.clientFirstScreenActionStripGrid p,
.clientFirstScreenActionStripGrid em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.clientFirstScreenActionStripGrid em {
  color: var(--text-muted);
  font-weight: 800;
}

.clientCommandTodoPreview {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.clientCommandTodoPrimary {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-content: start;
}

.clientCommandTodoPrimary > div {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.clientCommandTodoPrimary p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.clientCommandTodoPrimary em {
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.clientBackstageDetails {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  overflow: hidden;
}

.clientBackstageDetails > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

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

.clientBackstageDetails > summary span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 800;
}

.clientOperationDetails > summary {
  cursor: pointer;
}

.clientBackstageDetails > summary strong {
  color: var(--text-strong);
}

.clientBackstageDetails > summary em {
  color: var(--text-muted);
  font-style: normal;
  font-size: 13px;
}

.leadBackstageDetails > summary {
  cursor: pointer;
}

.approvalBackstageDetails > summary {
  cursor: pointer;
}

.financeBackstageDetails > summary {
  cursor: pointer;
}

.customerServiceBackstageDetails > summary {
  cursor: pointer;
}

.careBackstageDetails > summary {
  cursor: pointer;
}

.mealBackstageDetails > summary {
  cursor: pointer;
}

.recoveryBackstageDetails > summary {
  cursor: pointer;
}

.nannyBackstageDetails > summary {
  cursor: pointer;
}

.knowledgeBackstageDetails > summary {
  cursor: pointer;
}

.trainingBackstageDetails > summary {
  cursor: pointer;
}

.inventoryBackstageDetails > summary {
  cursor: pointer;
}

.dashboardBackstageDetails > summary {
  cursor: pointer;
}

.workbenchBackstageDetails > summary {
  cursor: pointer;
}

.staffBackstageDetails > summary {
  cursor: pointer;
}

.collaborationBackstageDetails > summary {
  cursor: pointer;
}

.roomBackstageDetails > summary {
  cursor: pointer;
}

.okrBackstageDetails > summary {
  cursor: pointer;
}

.orgBackstageDetails > summary {
  cursor: pointer;
}

.blueprintBackstageDetails > summary {
  cursor: pointer;
}

.auditBackstageDetails > summary {
  cursor: pointer;
}

.dataImportBackstageDetails > summary {
  cursor: pointer;
}

.clientBackstageGrid {
  display: grid;
  gap: 14px;
  padding: 0 14px 14px;
}


.clientMaintenanceSectionDetails,
.clientCreateMoreDetails,
.staffCreateMoreDetails,
.leadCreateMoreDetails,
.wecomLeadMoreDetails,
.leadFollowMoreDetails {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  overflow: hidden;
}


.clientBackstageDetails > summary span,
.clientMaintenanceSectionDetails > summary span,
.clientCreateMoreDetails > summary span,
.staffCreateMoreDetails > summary span,
.leadCreateMoreDetails > summary span,
.wecomLeadMoreDetails > summary span,
.leadFollowMoreDetails > summary span {
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
}

.clientBackstageDetails > summary strong,
.clientMaintenanceSectionDetails > summary strong,
.clientCreateMoreDetails > summary strong,
.staffCreateMoreDetails > summary strong,
.leadCreateMoreDetails > summary strong,
.wecomLeadMoreDetails > summary strong,
.leadFollowMoreDetails > summary strong {
  color: var(--text-strong);
}

.clientBackstageDetails > summary em,
.clientMaintenanceSectionDetails > summary em,
.clientCreateMoreDetails > summary em,
.staffCreateMoreDetails > summary em,
.leadCreateMoreDetails > summary em,
.wecomLeadMoreDetails > summary em,
.leadFollowMoreDetails > summary em {
  color: var(--text-muted);
}

.clientMaintenanceSectionDetails {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  overflow: hidden;
}

.clientMaintenanceSectionDetails > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
}

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

.clientMaintenanceSectionDetails > summary span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 800;
}

.clientMaintenanceSectionDetails > summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.clientMaintenanceSectionDetails > summary strong {
  color: var(--text-strong);
}

.clientMaintenanceSectionDetails > summary em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
}

.clientMaintenanceSectionBody {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
}

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

.clientCreateMoreDetails {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  overflow: hidden;
}

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

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

.clientCreateMoreDetails > summary span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 800;
}

.clientCreateMoreDetails > summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.clientCreateMoreDetails > summary strong {
  color: var(--text-strong);
}

.clientCreateMoreDetails > summary em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
}

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

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

.staffCreateMoreDetails {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  overflow: hidden;
}

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

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

.staffCreateMoreDetails > summary span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 800;
}

.staffCreateMoreDetails > summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.staffCreateMoreDetails > summary strong {
  color: var(--text-strong);
}

.staffCreateMoreDetails > summary em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
}

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

.staffQuickResponsibilityDetails {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  overflow: hidden;
}

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

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

.staffQuickResponsibilityDetails > summary span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 800;
}

.staffQuickResponsibilityDetails > summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.staffQuickResponsibilityDetails > summary strong {
  color: var(--text-strong);
}

.staffQuickResponsibilityDetails > summary em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
}

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

.staffExceptionReceiverDetails {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  overflow: hidden;
}

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

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

.staffExceptionReceiverDetails > summary span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 800;
}

.staffExceptionReceiverDetails > summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.staffExceptionReceiverDetails > summary strong {
  color: var(--text-strong);
}

.staffExceptionReceiverDetails > summary em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
}

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

.staffHandoverRecipientDetails {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  overflow: hidden;
}

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

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

.staffHandoverRecipientDetails > summary span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 800;
}

.staffHandoverRecipientDetails > summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.staffHandoverRecipientDetails > summary strong {
  color: var(--text-strong);
}

.staffHandoverRecipientDetails > summary em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
}

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

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

.leadCreateMoreDetails {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  overflow: hidden;
}

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

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

.leadCreateMoreDetails > summary span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 800;
}

.leadCreateMoreDetails > summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.leadCreateMoreDetails > summary strong {
  color: var(--text-strong);
}

.leadCreateMoreDetails > summary em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
}

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

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

.wecomLeadMoreDetails {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  overflow: hidden;
}

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

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

.wecomLeadMoreDetails > summary span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 800;
}

.wecomLeadMoreDetails > summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.wecomLeadMoreDetails > summary strong {
  color: var(--text-strong);
}

.wecomLeadMoreDetails > summary em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
}

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

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

.wecomLeadNotificationCard {
  border-color: var(--line);
  background: var(--bem-surface);
}

.wecomLeadNotificationCard p {
  color: var(--text-muted);
  line-height: 1.55;
}

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

.leadFollowMoreDetails {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  overflow: hidden;
}

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

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

.leadFollowMoreDetails > summary span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 800;
}

.leadFollowMoreDetails > summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.leadFollowMoreDetails > summary strong {
  color: var(--text-strong);
}

.leadFollowMoreDetails > summary em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
}

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

.careFocus {
  display: grid;
  gap: 14px;
}

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

.careFocusStats article,
.careFocusGrid article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.careFocusStats article span,
.careFocusStats article strong,
.careFocusGrid article span,
.careFocusGrid article strong {
  display: block;
}

.careFocusStats article span,
.careFocusGrid article span,
.careFocusGrid article em {
  color: var(--text-muted);
}

.careFocusStats article strong {
  margin-top: 6px;
  font-size: 19px;
}

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

.careFocusGrid article {
  display: grid;
  gap: 8px;
  align-content: start;
}

.careFocusGrid article p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.frontlineFirstScreenHint {
  display: grid;
  gap: 14px;
}

.frontlineFirstScreenGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.frontlineFirstScreenGrid article {
  min-height: 126px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.frontlineFirstScreenGrid article > div {
  display: grid;
  gap: 6px;
}

.frontlineFirstScreenGrid strong {
  color: var(--text-strong);
}

.frontlineFirstScreenGrid p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.frontlineLightModelSummary {
  border-style: dashed;
}

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

.frontlineLightModelGrid article {
  min-height: 104px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.frontlineLightModelGrid article > div {
  display: grid;
  gap: 6px;
}

.frontlineLightModelGrid strong {
  color: var(--text-strong);
}

.frontlineLightModelGrid p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.mealFocus {
  display: grid;
  gap: 14px;
}

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

.mealFocusStats article,
.mealFocusGrid article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.mealFocusStats article span,
.mealFocusStats article strong,
.mealFocusGrid article span,
.mealFocusGrid article strong {
  display: block;
}

.mealFocusStats article span,
.mealFocusGrid article span,
.mealFocusGrid article em {
  color: var(--text-muted);
}

.mealFocusStats article strong {
  margin-top: 6px;
  font-size: 19px;
}

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

.mealFocusGrid article {
  display: grid;
  gap: 8px;
  align-content: start;
}

.mealFocusGrid article p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.recoveryFocus {
  display: grid;
  gap: 14px;
}

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

.recoveryFocusStats article,
.recoveryFocusGrid article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.recoveryFocusStats article span,
.recoveryFocusStats article strong,
.recoveryFocusGrid article span,
.recoveryFocusGrid article strong {
  display: block;
}

.recoveryFocusStats article span,
.recoveryFocusGrid article span,
.recoveryFocusGrid article em {
  color: var(--text-muted);
}

.recoveryFocusStats article strong {
  margin-top: 6px;
  font-size: 19px;
}

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

.recoveryFocusGrid article {
  display: grid;
  gap: 8px;
  align-content: start;
}

.recoveryFocusGrid article p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.nannyFocus {
  display: grid;
  gap: 14px;
}

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

.nannyFocusStats article,
.nannyFocusGrid article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.nannyFocusStats article span,
.nannyFocusStats article strong,
.nannyFocusGrid article span,
.nannyFocusGrid article strong {
  display: block;
}

.nannyFocusStats article span,
.nannyFocusGrid article span,
.nannyFocusGrid article em {
  color: var(--text-muted);
}

.nannyFocusStats article strong {
  margin-top: 6px;
  font-size: 19px;
}

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

.nannyFocusGrid article {
  display: grid;
  gap: 8px;
  align-content: start;
}

.nannyFocusGrid article p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.lifeServiceFrontlineFirstScreen {
  display: grid;
  gap: 14px;
}

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

.lifeServiceFrontlineGrid article {
  min-height: 122px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.lifeServiceFrontlineGrid article > div {
  display: grid;
  gap: 6px;
}

.lifeServiceFrontlineGrid strong {
  color: var(--text-strong);
}

.lifeServiceFrontlineGrid p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.lifeServiceLightModelSummary {
  border-style: dashed;
}

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

.lifeServiceLightModelGrid article {
  min-height: 104px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.lifeServiceLightModelGrid article > div {
  display: grid;
  gap: 6px;
}

.lifeServiceLightModelGrid strong {
  color: var(--text-strong);
}

.lifeServiceLightModelGrid p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.financeFocus {
  display: grid;
  gap: 14px;
}

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

.financeFocusStats article,
.financeFocusGrid article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.financeFocusStats article span,
.financeFocusStats article strong,
.financeFocusGrid article span,
.financeFocusGrid article strong {
  display: block;
}

.financeFocusStats article span,
.financeFocusGrid article span,
.financeFocusGrid article em {
  color: var(--text-muted);
}

.financeFocusStats article strong {
  margin-top: 6px;
  font-size: 19px;
}

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

.financeFocusGrid article {
  display: grid;
  gap: 8px;
  align-content: start;
}

.financeFocusGrid article p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.careFocusStats article,
.careFocusGrid article,
.mealFocusStats article,
.mealFocusGrid article,
.recoveryFocusStats article,
.recoveryFocusGrid article,
.nannyFocusStats article,
.nannyFocusGrid article,
.financeFocusStats article,
.financeFocusGrid article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
}

.frontlineFirstScreenGrid article,
.frontlineLightModelGrid article,
.lifeServiceFrontlineGrid article,
.lifeServiceLightModelGrid article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
}

.careFocusStats article span,
.careFocusGrid article span,
.careFocusGrid article em,
.careFocusGrid article p,
.mealFocusStats article span,
.mealFocusGrid article span,
.mealFocusGrid article em,
.mealFocusGrid article p,
.recoveryFocusStats article span,
.recoveryFocusGrid article span,
.recoveryFocusGrid article em,
.recoveryFocusGrid article p,
.nannyFocusStats article span,
.nannyFocusGrid article span,
.nannyFocusGrid article em,
.nannyFocusGrid article p,
.financeFocusStats article span,
.financeFocusGrid article span,
.financeFocusGrid article em,
.financeFocusGrid article p {
  color: var(--text-muted);
}

.frontlineFirstScreenGrid p,
.frontlineLightModelGrid p,
.lifeServiceFrontlineGrid p,
.lifeServiceLightModelGrid p {
  color: var(--text-muted);
}

.frontlineFirstScreenGrid strong,
.frontlineLightModelGrid strong,
.lifeServiceFrontlineGrid strong,
.lifeServiceLightModelGrid strong {
  color: var(--text-strong);
}

.financeClientAccountClosureGate {
  display: grid;
  gap: 14px;
}

.financeClientAccountClosureStats,
.financeClientAccountClosureSteps {
  display: grid;
  gap: 10px;
}

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

.financeClientAccountClosureStats article {
  min-height: 74px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

.financeClientAccountClosureStats span,
.financeClientAccountClosureStats strong {
  display: block;
}

.financeClientAccountClosureStats span {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 800;
}

.financeClientAccountClosureStats strong {
  margin-top: 6px;
  color: var(--text-strong);
  font-size: 20px;
}

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

.financeClientAccountClosureSteps article {
  min-height: 164px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.financeClientAccountClosureSteps article > .financeClientAccountClosureStepIndex {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.financeClientAccountClosureSteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.financeClientAccountClosureSteps p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.financeUnifiedAccountActionDesk {
  display: grid;
  gap: 14px;
}

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

.financeUnifiedAccountActionMore {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  overflow: hidden;
}

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

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

.financeUnifiedAccountActionMore > summary span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 800;
}

.financeUnifiedAccountActionMore > summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.financeUnifiedAccountActionMore > summary strong {
  color: var(--text-strong);
}

.financeUnifiedAccountActionMore > summary em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
}

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

.financeLightAccountModelSummary {
  border-style: dashed;
}

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

.financeLightAccountModelGrid article {
  min-height: 104px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.financeLightAccountModelGrid article > div {
  display: grid;
  gap: 6px;
}

.financeLightAccountModelGrid strong {
  color: var(--text-strong);
}

.financeLightAccountModelGrid p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.inventoryFocus {
  display: grid;
  gap: 14px;
}

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

.inventoryFocusStats article,
.inventoryFocusGrid article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.inventoryFocusStats article span,
.inventoryFocusStats article strong,
.inventoryFocusGrid article span,
.inventoryFocusGrid article strong {
  display: block;
}

.inventoryFocusStats article span,
.inventoryFocusGrid article span,
.inventoryFocusGrid article em {
  color: var(--text-muted);
}

.inventoryFocusStats article strong {
  margin-top: 6px;
  font-size: 19px;
}

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

.inventoryFocusGrid article {
  display: grid;
  gap: 8px;
  align-content: start;
}

.inventoryFocusGrid article p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.clientPrimaryGrid .clientList {
  max-height: 430px;
  overflow: auto;
  padding-right: 2px;
}

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

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

.clientFocusQueueGrid article {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.clientFocusQueueGrid article.active {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: var(--field-bg);
}

.clientFocusQueueGrid article div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.clientFocusQueueGrid article p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.clientFocusQueueGrid article em {
  color: var(--text-muted);
  font-style: normal;
  font-size: 12px;
}

.clientFullListPanel {
  grid-column: 1 / -1;
}

.clientCard {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
}

.clientCard.active {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: var(--field-bg);
}

.currentClientStrip,
.clientQuickAction,
.approvalRuleBox,
.approvalFlow {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 6px;
}

.currentClientStrip {
  margin-top: 12px;
}

.clientQuickAction {
  margin: 12px 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  background: var(--field-bg);
  border-color: var(--line);
}

.clientQuickAction p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
}

.clientQuickAction > div {
  display: grid;
  gap: 4px;
}

.clientQuickAction > div:last-of-type {
  justify-items: end;
}

.currentClientStrip span,
.currentClientStrip em,
.clientQuickAction span,
.clientQuickAction em,
.approvalRuleBox span,
.approvalFlow span {
  color: var(--text-muted);
  font-style: normal;
  line-height: 1.45;
}

.clientQuickAction b {
  color: var(--text-strong);
}

.approvalRuleBox.span2 {
  grid-column: 1 / -1;
}

.serviceQuickHint {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid color-mix(in srgb, var(--bem-status-warning) 22%, var(--line));
  padding: 12px;
  display: grid;
  gap: 5px;
}

.clientServiceQuickForm {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

.serviceQuickHint span {
  color: var(--text-muted);
  line-height: 1.45;
}

.miniButton {
  width: max-content;
  max-width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 0;
  border-radius: var(--radius-card);
  padding: 0 12px;
  background: var(--primary-action);
  color: var(--primary-action-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.miniButton > span:first-child {
  flex: 0 0 auto;
}

.avatar {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  display: grid;
  place-items: center;
}

.clientBody {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.clientTop {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.clientTop > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.clientMeta {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.clientMeta span {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.tagRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tagRow em {
  font-style: normal;
  border-radius: 4px;
  background: var(--field-bg);
  color: var(--text-muted);
  font-size: 12px;
  padding: 5px 9px;
}

.contextField em {
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
}

.globalClientContextBar {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--field-bg);
  padding: 13px 14px;
}

.globalClientContextBar div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.globalClientContextBar span,
.globalClientContextBar p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.globalClientContextBar strong {
  color: var(--text-strong);
  font-size: 18px;
}

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

.globalClientContextMeta span {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  padding: 7px 8px;
}

.globalClientContextActions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.globalClientContextActions a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  padding: 0 10px;
}

.careMini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  padding: 9px 10px;
  color: var(--text-strong);
}

.careMini span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}

.careMini strong {
  font-size: 13px;
}

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

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

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

.clientStageAction {
  min-height: 184px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 13px;
  display: grid;
  gap: 9px;
  align-content: start;
}

.clientStageAction.done {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.clientStageAction.pending {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.stageActionMeta {
  display: grid;
  gap: 4px;
}

.stageActionMeta span,
.clientStageAction p {
  color: var(--text-muted);
  line-height: 1.45;
  font-size: 12px;
}

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

.lifecycleStep {
  min-height: 132px;
  padding: 13px;
  display: grid;
  gap: 6px;
  align-content: start;
}

.lifecycleStep.active {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: var(--field-bg);
}

.lifecycleStep.passed {
  background: var(--bem-surface);
}

.lifecycleStep strong {
  font-size: 16px;
}

.lifecycleStep span,
.lifecycleStep p,
.journeyCard span {
  color: var(--text-muted);
  font-style: normal;
}

.lifecycleStep p {
  margin: 0;
  line-height: 1.45;
  font-size: 13px;
}

.clientModuleCard {
  min-height: 176px;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.clientModuleCard p {
  margin: 0;
  color: var(--text-muted);
}

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

.packageCard,
.approvalCard,
.leadControlCard,
.funnelItem,
.careProjectGroup {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  padding: 14px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.packageCard {
  min-height: 330px;
}

.packageTop,
.approvalTop,
.careProjectHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.packageTop strong,
.approvalTop strong,
.careProjectHead strong {
  display: block;
  font-size: 17px;
}

.packageTop span,
.packageMeta span,
.approvalTop span,
.approvalMeta span,
.careProjectHead span,
.careProjectHead em,
.funnelItem span,
.funnelItem em {
  color: var(--text-muted);
  font-style: normal;
}

.packageTop b {
  color: var(--text-strong);
  white-space: nowrap;
}

.packageMeta,
.approvalMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.packageMeta span,
.approvalMeta span {
  border-radius: 4px;
  background: var(--field-bg);
  color: var(--text-muted);
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 800;
}

.packageColumns {
  display: grid;
  gap: 10px;
}

.packageColumns > div {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
}

.packageColumns span {
  color: var(--text-strong);
  font-weight: 800;
  font-size: 13px;
}

.packageColumns em {
  color: var(--text-muted);
  font-style: normal;
  font-size: 13px;
}

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

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

.approvalFocus {
  display: grid;
  gap: 14px;
}

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

.approvalFocusStats article,
.approvalFocusGrid article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.approvalFocusStats article span,
.approvalFocusStats article strong,
.approvalFocusGrid article span,
.approvalFocusGrid article strong {
  display: block;
}

.approvalFocusStats article span,
.approvalFocusGrid article span,
.approvalFocusGrid article em {
  color: var(--text-muted);
}

.approvalFocusStats article strong {
  margin-top: 6px;
  font-size: 19px;
}

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

.approvalFocusGrid article {
  display: grid;
  gap: 8px;
  align-content: start;
}

.approvalFocusGrid article p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.approvalQuickClosureGate {
  display: grid;
  gap: 14px;
}

.approvalQuickClosureStats,
.approvalQuickClosureSteps {
  display: grid;
  gap: 10px;
}

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

.approvalQuickClosureStats article {
  min-height: 74px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

.approvalQuickClosureStats span,
.approvalQuickClosureStats strong {
  display: block;
}

.approvalQuickClosureStats span {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 800;
}

.approvalQuickClosureStats strong {
  margin-top: 6px;
  color: var(--text-strong);
  font-size: 20px;
}

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

.approvalQuickClosureSteps article {
  min-height: 166px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.approvalQuickClosureSteps article > .approvalQuickClosureStepIndex {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.approvalQuickClosureSteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.approvalQuickClosureSteps p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.approvalUnifiedQuickDesk {
  display: grid;
  gap: 14px;
}

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

.approvalUnifiedQuickCard {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 14px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.approvalUnifiedQuickCard.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.approvalUnifiedPrimaryCard {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 14px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.approvalUnifiedPrimaryCard.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.approvalUnifiedMoreDetails > summary {
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--field-bg);
  padding: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}

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

.approvalUnifiedMetaLine {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.approvalUnifiedMeta span {
  border-radius: 4px;
  background: var(--field-bg);
  color: var(--text-muted);
  padding: 8px;
  font-size: 12px;
  line-height: 1.35;
}

.approvalUnifiedMetaLine span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.approvalUnifiedMeta strong {
  color: var(--text-strong);
}

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

.approvalUnifiedPrimarySummary article {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 10px 11px;
  display: grid;
  gap: 6px;
  align-content: start;
}

.approvalUnifiedPrimarySummary span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.approvalUnifiedPrimarySummary p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
}

.approvalUnifiedQuickCard p,
.approvalUnifiedQuickCard em,
.approvalUnifiedPrimaryCard p,
.approvalUnifiedPrimaryCard em {
  margin: 0;
  color: var(--text-muted);
  font-style: normal;
  line-height: 1.5;
}

.approvalUnifiedQuickCard p strong,
.approvalUnifiedQuickCard em strong,
.approvalUnifiedPrimaryCard p strong,
.approvalUnifiedPrimaryCard em strong {
  display: block;
  color: var(--text-strong);
  margin-bottom: 4px;
}

.approvalUnifiedMoreDetails {
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--field-bg);
  overflow: hidden;
}

.approvalUnifiedMoreDetails summary {
  min-height: 54px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  cursor: pointer;
}

.approvalUnifiedMoreDetails summary span {
  color: var(--text-strong);
  font-weight: 900;
}

.approvalUnifiedMoreDetails summary strong,
.approvalUnifiedMoreDetails summary em {
  display: block;
}

.approvalUnifiedMoreDetails summary em {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
}

.approvalUnifiedMoreList {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}

.approvalUnifiedMoreItem {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 11px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 10px;
  align-items: start;
}

.approvalUnifiedMoreItem span,
.approvalUnifiedMoreItem em {
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.approvalUnifiedMoreItem em {
  grid-column: 1 / -1;
}

.approvalCustomerImpactCommand {
  display: grid;
  gap: 14px;
}

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

.approvalCustomerImpactCard {
  min-height: 160px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 14px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.approvalCustomerImpactCard p,
.approvalCustomerImpactCard em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.5;
}

.approvalCustomerImpactCard em {
  color: var(--text-muted);
  font-weight: 800;
}

.approvalWritebackAcceptanceStrip {
  display: grid;
  gap: 14px;
}

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

.approvalWritebackAcceptanceItem {
  min-height: auto;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 11px;
  display: grid;
  gap: 7px;
  align-content: start;
}

.approvalWritebackAcceptanceItem > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.approvalWritebackAcceptanceItem strong {
  color: var(--text-strong);
}

.approvalWritebackAcceptanceItem p,
.approvalWritebackAcceptanceItem em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.approvalWritebackAcceptanceItem em {
  color: var(--text-muted);
  font-weight: 900;
}

.approvalPendingDetails {
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  box-shadow: var(--bem-shadow-panel);
  overflow: hidden;
}

.approvalPendingDetails > summary {
  min-height: 58px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

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

.approvalPendingDetails > summary > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--bem-status-warning) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.approvalPendingDetails strong,
.approvalPendingDetails em {
  display: block;
}

.approvalPendingDetails em {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
}

.approvalPendingDetails .approvalCenterGrid {
  padding: 0 14px 14px;
}

.approvalPendingTable {
  --bem-table-columns: minmax(180px, 1.2fr) minmax(96px, 0.65fr) minmax(118px, 0.75fr) minmax(240px, 1.45fr) minmax(150px, 0.9fr);
  display: grid;
  gap: var(--space-2);
  padding: 0 14px 14px;
}

.bemTableRow.approvalRiskHigh {
  border-left: 4px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 5%, var(--surface));
}

.approvalRiskActions,
.bemTableActions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.approvalActionMenu {
  position: relative;
}

.bemTableActionMenu {
  position: relative;
}

.approvalActionMenu > summary,
.bemTableActionMenu > summary {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-card);
  cursor: pointer;
  list-style: none;
  color: var(--text-muted);
}

.approvalActionMenu > summary::-webkit-details-marker,
.bemTableActionMenu > summary::-webkit-details-marker {
  display: none;
}

.bemTableActionMenuLabel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.approvalActionMenuPanel,
.bemTableActionMenuPanel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  z-index: 50;
  display: grid;
  gap: var(--space-1);
  min-width: 156px;
  padding: var(--space-2);
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--apple-card-shadow);
}

.approvalActionMenuPanel button,
.bemTableActionMenuPanel button {
  border: 0;
  background: transparent;
  color: var(--text-main);
  text-align: left;
  padding: var(--space-2);
  border-radius: 6px;
}

.unifiedOnSiteQuickActionDesk {
  display: grid;
  gap: 14px;
}

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

.unifiedOnSiteQuickActionMore {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  overflow: hidden;
}

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

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

.unifiedOnSiteQuickActionMore > summary span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 800;
}

.unifiedOnSiteQuickActionMore > summary div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.unifiedOnSiteQuickActionMore > summary strong {
  color: var(--text-strong);
}

.unifiedOnSiteQuickActionMore > summary em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
}

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

.approvalImpactFirstScreenGate {
  display: grid;
  gap: 14px;
}

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

.approvalImpactFirstScreenGrid article {
  min-height: 176px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.approvalImpactFirstScreenGrid article > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.approvalImpactFirstScreenGrid span,
.approvalImpactFirstScreenGrid strong {
  color: var(--text-strong);
}

.approvalImpactFirstScreenGrid span {
  font-weight: 900;
}

.approvalImpactFirstScreenGrid strong {
  font-size: 16px;
}

.approvalImpactFirstScreenGrid p,
.approvalImpactFirstScreenGrid em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  font-style: normal;
}

.approvalCenterCard {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  padding: 14px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.approvalCenterCard p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.approvalCustomerImpact {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 10px;
  display: grid;
  gap: 5px;
}

.approvalCustomerImpact span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

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

.approvalCenterFlow article {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 7px;
}

.approvalCenterFlow span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.globalModelRegressionGate {
  display: grid;
  gap: 14px;
}

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

.globalModelGrid > article {
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface-soft);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.globalModelSteps {
  display: grid;
  gap: 8px;
}

.globalModelStep {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 0;
  padding: 11px 12px;
  display: grid;
  gap: 6px;
  text-rendering: optimizeLegibility;
}

.globalModelStep span,
.globalModelStep em {
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
}

.app .globalModelStep > span:first-child,
.app .globalModelStep > em {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  padding: 0;
}

.globalModelStep strong {
  color: var(--text-strong);
  line-height: 1.35;
}

.globalModelEvidence {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.globalModelEvidence span {
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--bem-surface);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.2;
  padding: 4px 7px;
}

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

.approvalActionMoreDetails {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  overflow: hidden;
}

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

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

.approvalActionMoreDetails > summary span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 800;
}

.approvalActionMoreDetails > summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.approvalActionMoreDetails > summary strong {
  color: var(--text-strong);
}

.approvalActionMoreDetails > summary em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
}

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

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

.serviceRequestMoreDetails {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  overflow: hidden;
}

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

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

.serviceRequestMoreDetails > summary span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 800;
}

.serviceRequestMoreDetails > summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.serviceRequestMoreDetails > summary strong {
  color: var(--text-strong);
}

.serviceRequestMoreDetails > summary em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
}

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

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

.paymentMoreDetails {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  overflow: hidden;
}

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

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

.paymentMoreDetails > summary span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 800;
}

.paymentMoreDetails > summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.paymentMoreDetails > summary strong {
  color: var(--text-strong);
}

.paymentMoreDetails > summary em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
}

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

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

.lifeServiceFulfillmentDesk {
  display: grid;
  gap: 14px;
}

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

.lifeServiceFulfillmentMore {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  overflow: hidden;
}

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

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

.lifeServiceFulfillmentMore > summary span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 800;
}

.lifeServiceFulfillmentMore > summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.lifeServiceFulfillmentMore > summary strong {
  color: var(--text-strong);
}

.lifeServiceFulfillmentMore > summary em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
}

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

.lifeServiceMoreDetails {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  overflow: hidden;
}

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

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

.lifeServiceMoreDetails > summary span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 800;
}

.lifeServiceMoreDetails > summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.lifeServiceMoreDetails > summary strong {
  color: var(--text-strong);
}

.lifeServiceMoreDetails > summary em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
}

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

.lifeServiceUnifiedClosureGate {
  display: grid;
  gap: 14px;
}

.lifeServiceUnifiedClosureStats,
.lifeServiceUnifiedClosureSteps {
  display: grid;
  gap: 10px;
}

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

.lifeServiceUnifiedClosureStats article {
  min-height: 74px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

.lifeServiceUnifiedClosureStats span,
.lifeServiceUnifiedClosureStats strong {
  display: block;
}

.lifeServiceUnifiedClosureStats span {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 800;
}

.lifeServiceUnifiedClosureStats strong {
  margin-top: 6px;
  color: var(--text-strong);
  font-size: 20px;
}

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

.lifeServiceUnifiedClosureSteps article {
  min-height: 156px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.lifeServiceUnifiedClosureSteps article > .lifeServiceUnifiedClosureStepIndex {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.lifeServiceUnifiedClosureSteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.lifeServiceUnifiedClosureSteps p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

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

.collaborationFocus {
  display: grid;
  gap: 14px;
}

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

.collaborationFocusStats article,
.collaborationFocusGrid article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.collaborationFocusStats article span,
.collaborationFocusStats article strong,
.collaborationFocusGrid article span,
.collaborationFocusGrid article strong {
  display: block;
}

.collaborationFocusStats article span,
.collaborationFocusGrid article span,
.collaborationFocusGrid article em {
  color: var(--text-muted);
}

.collaborationFocusStats article strong {
  margin-top: 6px;
  font-size: 19px;
}

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

.collaborationFocusGrid article {
  display: grid;
  gap: 8px;
  align-content: start;
}

.collaborationFocusGrid article p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.collaborationHandoverGate {
  display: grid;
  gap: 14px;
}

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

.collaborationHandoverSteps article {
  min-height: 158px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 13px;
}

.collaborationHandoverSteps article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.collaborationHandoverSteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.collaborationHandoverSteps p,
.collaborationHandoverSteps em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.collaborationCard {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  padding: 14px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.collaborationCard.managerHandover {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.collaborationCard p {
  margin: 0;
  color: var(--text-strong);
  font-weight: 900;
}

.collaborationCard em {
  color: var(--text-muted);
  font-style: normal;
  line-height: 1.45;
  font-size: 13px;
}

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

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

.clientApprovalLedgerStats article,
.clientApprovalLedgerItem {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
}

.clientApprovalLedgerStats article {
  padding: 12px;
  display: grid;
  gap: 5px;
}

.clientApprovalLedgerStats span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}

.clientApprovalLedgerStats strong {
  color: var(--text-strong);
  font-size: 18px;
}

.clientCrossDepartmentCommand {
  border-color: var(--line);
}

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

.clientCrossDepartmentCard {
  min-height: 254px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 14px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.clientCrossDepartmentCard p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
  font-size: 13px;
}

.clientCrossDepartmentMeta {
  display: grid;
  gap: 6px;
}

.clientCrossDepartmentMeta span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.storeMeetingCommandCenter {
  border-color: var(--line);
}

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

.storeMeetingCommandCard {
  min-height: 250px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 14px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.storeMeetingCommandCard.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.storeMeetingCommandCard p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
  font-size: 13px;
}

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

.storeMeetingMetricGrid span {
  min-width: 0;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 8%, var(--bem-surface));
  border: 1px solid var(--line);
  padding: 9px;
  display: grid;
  gap: 4px;
}

.storeMeetingMetricGrid b,
.storeMeetingMetricGrid em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.storeMeetingMetricGrid b {
  color: var(--text-strong);
  font-size: 12px;
}

.storeMeetingMetricGrid em {
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

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

.clientDepartmentPills span {
  min-height: 58px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 7px;
  display: grid;
  gap: 3px;
  align-content: center;
}

.clientDepartmentPills span.todo {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.clientDepartmentPills b {
  color: var(--text-strong);
  font-size: 12px;
}

.clientDepartmentPills em,
.clientDepartmentPills small {
  color: var(--text-muted);
  font-style: normal;
  font-size: 11px;
}

.clientEntitlementCommandCenter {
  border-color: var(--line);
}

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

.clientEntitlementCommandCard {
  min-height: 242px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 14px;
  display: grid;
  gap: 9px;
  align-content: start;
}

.clientEntitlementCommandCard.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.clientEntitlementCommandCard p,
.clientEntitlementCommandCard em {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
  font-size: 13px;
}

.clientEntitlementCommandCard em {
  color: var(--text-muted);
  font-style: normal;
  font-size: 12px;
}

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

.clientEntitlementCommandMeta span {
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bem-surface));
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
  padding: 7px;
}

.clientEntitlementComfort {
  color: var(--text-strong);
  font-size: 13px;
  line-height: 1.45;
}

.clientOwnerInspectionCommand {
  display: grid;
  gap: 12px;
  border-color: var(--line);
}

.clientOwnerInspectionForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.clientOwnerInspectionItem {
  min-height: 252px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 9px;
  align-content: start;
}

.clientOwnerInspectionItem.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.clientOwnerInspectionItem.ok {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.clientOwnerInspectionItem p,
.clientOwnerInspectionItem b {
  margin: 0;
  line-height: 1.48;
}

.clientOwnerInspectionMeta {
  display: grid;
  gap: 5px;
}

.clientOwnerInspectionMeta span {
  min-width: 0;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
  padding: 6px 8px;
}

.clientTaskExceptionEscalationCommand {
  display: grid;
  gap: 12px;
  border-color: var(--line);
}

.clientTaskExceptionEscalationForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.clientTaskExceptionEscalationItem {
  min-height: 276px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 9px;
  align-content: start;
}

.clientTaskExceptionEscalationItem.danger {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-danger) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-danger) 76%, var(--bem-surface));
}

.clientTaskExceptionEscalationItem.warn {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.clientTaskExceptionEscalationItem.slaOverdue {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 18%, transparent);
}

.clientTaskExceptionEscalationItem p,
.clientTaskExceptionEscalationItem em,
.clientTaskExceptionEscalationItem b {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  font-style: normal;
}

.clientTaskExceptionEscalationItem b {
  color: var(--text-strong);
}

.managerExceptionSlaActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.managerExceptionSlaActionTooltip {
  position: relative;
  max-width: 96px;
  overflow: visible;
}

.managerExceptionSlaActionTooltip::after {
  content: attr(data-lock-reason);
  position: fixed;
  left: max(16px, calc((100vw - min(320px, calc(100vw - 40px))) / 2));
  bottom: 72px;
  z-index: 50;
  width: min(320px, calc(100vw - 40px));
  max-width: min(320px, calc(100vw - 40px));
  padding: 8px 10px;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--apple-card-shadow);
  color: var(--text-main);
  font-size: var(--font-meta);
  font-weight: 800;
  line-height: 1.38;
  white-space: normal;
  word-break: break-word;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-in-out;
}

.managerExceptionSlaActionTooltip:hover::after,
.managerExceptionSlaActionTooltip:focus-visible::after {
  opacity: 1;
}

.approvalPerformanceLinkCommand {
  display: grid;
  gap: 12px;
  border-color: var(--line);
}

.approvalPerformanceLinkForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.approvalPerformanceLinkItem {
  min-height: 260px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 9px;
  align-content: start;
}

.approvalPerformanceLinkItem.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.approvalPerformanceLinkItem.normal {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 28%, var(--bem-surface));
}

.approvalPerformanceLinkItem p,
.approvalPerformanceLinkItem em,
.approvalPerformanceLinkItem strong,
.approvalPerformanceLinkItem b {
  margin: 0;
  line-height: 1.48;
}

.approvalPerformanceLinkItem em {
  color: var(--text-muted);
  font-style: normal;
}

.storeManagerCommandCenter {
  display: grid;
  gap: 12px;
  border-color: var(--line);
}

.storeManagerCommandForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.storeManagerCommandTable {
  --bem-table-columns: minmax(150px, 1fr) minmax(190px, 1.25fr) minmax(92px, 0.65fr) minmax(92px, 0.65fr) minmax(210px, 1.35fr) minmax(200px, 1.25fr);
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
}

.bemTableRow.storeRiskHigh {
  border-left: 4px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 5%, var(--surface));
}

.storeManagerCommandItem {
  min-height: 270px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 9px;
  align-content: start;
}

.storeManagerCommandItem.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 26%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.storeManagerCommandItem.normal {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-accent) 22%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-accent) 68%, var(--bem-surface));
}

.storeManagerCommandItem p,
.storeManagerCommandItem em,
.storeManagerCommandItem b {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  font-style: normal;
}

.storeManagerCommandItem b {
  color: var(--text-strong);
}

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

.clientApprovalLedgerItem {
  padding: 12px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.clientApprovalLedgerItem > span,
.clientApprovalLedgerItem em {
  color: var(--text-muted);
  font-style: normal;
  font-size: 12px;
}

.clientApprovalLedgerItem p {
  margin: 0;
  color: var(--text-strong);
  font-weight: 900;
}

.approvalCard p,
.leadControlCard p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

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

.funnelList {
  grid-template-columns: 1fr;
}

.funnelItem strong {
  font-size: 24px;
  color: var(--text-strong);
}

.clientDetail {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 14px;
  align-items: start;
}

.clientProfile,
.clientDetailSide {
  display: grid;
  gap: 10px;
}

.profileHero {
  min-height: 82px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 14px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.avatar.large {
  width: 58px;
  height: 58px;
  font-size: 20px;
}

.profileHero > div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.profileHero strong {
  font-size: 22px;
}

.clientDetailBriefCommand {
  display: grid;
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

.clientDetailBriefGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.clientDetailBriefGrid article {
  min-height: 138px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.clientDetailBriefGrid p,
.clientDetailBriefGrid em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.clientDetailBriefGrid em {
  color: var(--text-strong);
  font-weight: 800;
}

.profileHero span,
.profileGrid span,
.detailBox span,
.detailBox em,
.documentItem span,
.timelineItem span,
.timelineItem em {
  color: var(--text-muted);
  font-style: normal;
}

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

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

.clientDetailMetaGrid {
  margin-bottom: 12px;
}

.clientDetailDetailsStack {
  display: grid;
  gap: 10px;
}

.clientDetailSectionDetails {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  overflow: hidden;
}

.clientDetailSectionDetails > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
}

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

.clientDetailSectionDetails > summary span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 14%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 800;
}

.clientDetailSectionDetails > summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.clientDetailSectionDetails > summary strong {
  color: var(--text-strong);
}

.clientDetailSectionDetails > summary em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
}

.clientDetailSectionBody {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
}

.profileGrid div,
.detailBox {
  padding: 13px;
  display: grid;
  gap: 6px;
}

.profileGrid div {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
}

.detailBox strong {
  line-height: 1.45;
}

.detailBox.highlight {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-accent) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-accent) 70%, var(--bem-surface));
}

.clientCustomerPortalLink {
  padding: 13px;
  display: grid;
  gap: 8px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
}

.clientCustomerPortalLink span,
.clientCustomerPortalLink em {
  color: var(--text-muted);
  font-style: normal;
}

.clientCustomerPortalLink strong {
  color: var(--text-strong);
  line-height: 1.45;
}

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

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

.clientCustomerPortalActions a,
.clientStaffScanActions a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.clientStaffScanActions a {
  border-color: var(--line);
  color: var(--text-strong);
  background: var(--bem-surface);
}

.clientCompleteness,
.clientServiceTeam,
.clientRoleVisibility,
.client360,
.clientDocumentArchiveCommand,
.clientServiceJourney,
.clientOnSiteExecutionDesk,
.clientMealPreferenceLoop,
.clientRecoveryLoop,
.clientNannyLoop,
.clientEducationLoop,
.clientRoomTransferLoop,
.clientFinanceTransparencyLoop,
.clientServiceTaskPool,
.clientServiceQualityLoop,
.clientCheckinHandover,
.clientSatisfactionReviewLoop,
.clientExitContinuityCommand,
.clientTabs,
.clientRiskCare,
.clientHandoverSummary {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
  display: grid;
  gap: 12px;
}

.clientOnSiteExecutionDesk {
  border-color: var(--line);
}

.clientMealPreferenceLoop {
  border-color: var(--line);
}

.clientRecoveryLoop {
  border-color: var(--line);
}

.clientNannyLoop {
  border-color: var(--line);
}

.clientEducationLoop {
  border-color: var(--line);
}

.clientRoomTransferLoop {
  border-color: var(--line);
}

.clientFinanceTransparencyLoop {
  border-color: var(--line);
}

.clientMealPreferenceForm {
  border-color: var(--line);
}

.clientRecoveryLoopForm {
  border-color: var(--line);
}

.clientNannyLoopForm {
  border-color: var(--line);
}

.clientEducationLoopForm {
  border-color: var(--line);
}

.clientRoomTransferLoopForm {
  border-color: var(--line);
}

.clientFinanceTransparencyLoopForm {
  border-color: var(--line);
}

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

.clientTaskActionForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

.clientTaskDispatchHint {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 5px;
}

.clientTaskDispatchHint span {
  color: var(--text-muted);
  line-height: 1.45;
}

.clientMealPreferenceForm,
.clientRecoveryLoopForm,
.clientNannyLoopForm,
.clientEducationLoopForm,
.clientRoomTransferLoopForm,
.clientFinanceTransparencyLoopForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.clientOnSiteExecutionHint {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 5px;
}

.clientOnSiteExecutionHint span {
  color: var(--text-muted);
  line-height: 1.45;
}

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

.clientMealPreferenceGrid,
.clientRecoveryLoopGrid,
.clientNannyLoopGrid,
.clientEducationLoopGrid,
.clientRoomTransferLoopGrid,
.clientFinanceTransparencyGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.clientMealPreferenceGrid {
  border-color: var(--line);
}

.clientRecoveryLoopGrid {
  border-color: var(--line);
}

.clientNannyLoopGrid {
  border-color: var(--line);
}

.clientEducationLoopGrid {
  border-color: var(--line);
}

.clientRoomTransferLoopGrid {
  border-color: var(--line);
}

.clientFinanceTransparencyGrid {
  border-color: var(--line);
}

.clientMealPreferenceGrid article,
.clientRecoveryLoopGrid article,
.clientNannyLoopGrid article,
.clientEducationLoopGrid article,
.clientRoomTransferLoopGrid article,
.clientFinanceTransparencyGrid article {
  min-height: 168px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 9px;
  align-content: start;
}

.clientMealPreferenceGrid article.risk,
.clientRecoveryLoopGrid article.risk,
.clientNannyLoopGrid article.risk,
.clientEducationLoopGrid article.risk,
.clientRoomTransferLoopGrid article.risk,
.clientFinanceTransparencyGrid article.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.clientMealPreferenceGrid p,
.clientRecoveryLoopGrid p,
.clientNannyLoopGrid p,
.clientEducationLoopGrid p,
.clientRoomTransferLoopGrid p,
.clientFinanceTransparencyGrid p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.clientFinanceTransparencyTable {
  --bem-table-columns: minmax(96px, 0.64fr) minmax(150px, 1fr) minmax(220px, 1.35fr) minmax(104px, 0.68fr) minmax(112px, 0.72fr) minmax(96px, 0.62fr) minmax(240px, 1.45fr);
}

.bemTableRow.financeTransparencyRisk {
  border-left: 4px solid var(--bem-status-warning);
  background: color-mix(in srgb, var(--bem-status-warning) 6%, var(--bem-surface));
}

.clientServiceTeamGrid,
.clientRoleVisibilityGrid,
.clientDocumentArchiveGrid,
.clientScanGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.clientServiceTeamGrid article,
.clientRoleVisibilityGrid article,
.clientDocumentArchiveItem,
.clientScanEntry,
.clientScanContext {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 7px;
}

.clientServiceTeamGrid span,
.clientRoleVisibilityGrid span,
.clientDocumentArchiveItem span,
.clientScanEntry span,
.clientScanContext span {
  color: var(--text-muted);
  font-size: 12px;
}

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

.clientDocumentArchiveItem {
  min-height: 176px;
  align-content: start;
}

.clientDocumentArchiveItem.pending {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.clientDocumentArchiveItem.done {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.clientDocumentArchiveItem p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
}

.clientDetailAnchorNav {
  position: sticky;
  top: 10px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 10px;
  box-shadow: var(--panel-shadow);
}

.clientDetailAnchorNav strong {
  color: var(--text-strong);
  font-size: 13px;
  margin-right: 4px;
}

.clientDetailAnchorNav a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  padding: 0 10px;
}

.clientDetailAnchorNav a:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--bem-surface));
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
}

.clientRoleVisibilityGrid article {
  min-height: 122px;
  align-content: start;
}

.clientRoleVisibilityGrid p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
  font-size: 12px;
}

.clientScanEntry {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.clientScanContext {
  margin-bottom: 12px;
  background: var(--field-bg);
  border-color: var(--line);
}

.clientScanContext p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
}

.scanServiceArchiveQualityCommand {
  display: grid;
  gap: 12px;
  border-color: var(--line);
}

.scanServiceArchiveQualityForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.scanServiceArchiveQualityItem {
  min-height: 232px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 9px;
  align-content: start;
}

.scanServiceArchiveQualityItem.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.scanServiceArchiveQualityItem.done {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.scanServiceArchiveQualityItem p,
.scanServiceArchiveQualityItem strong {
  margin: 0;
  line-height: 1.48;
}

.clientRoleScopeBar {
  display: grid;
  grid-template-columns: minmax(220px, 0.6fr) minmax(0, 1.4fr);
  gap: 10px;
  align-items: stretch;
}

.clientRoleScopeBar article {
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--field-bg);
  padding: 11px;
  display: grid;
  gap: 5px;
}

.clientRoleScopeBar span,
.clientRoleScopeBar em {
  color: var(--text-muted);
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
}

.clientRoleScopeBar strong {
  color: var(--text-strong);
}

.scanWorkflowActions {
  display: grid;
  gap: 10px;
}

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

.scanWorkflowGrid article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 10px;
  display: grid;
  gap: 6px;
  align-content: start;
}

.scanWorkflowGrid span {
  color: var(--text-muted);
  font-size: 12px;
}

.scanWorkflowGrid p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
  font-size: 12px;
}

.scanTaskAcceptancePanel {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 10px;
}

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

.scanTaskAcceptanceSummary article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 9px;
  display: grid;
  gap: 4px;
}

.scanTaskAcceptanceSummary strong {
  color: var(--text-strong);
  font-size: 20px;
}

.scanTaskAcceptanceSummary span,
.scanTaskAcceptancePanel p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.sectionLabel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.sectionLabel strong {
  color: var(--text-strong);
  font-size: 16px;
}

.sectionLabel span,
.client360Block span,
.clientServiceJourneyItem span,
.clientServiceJourneyItem em {
  color: var(--text-muted);
  font-size: 12px;
}

.clientRiskList {
  display: grid;
  gap: 8px;
}

.clientRiskList article {
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 11px;
  display: grid;
  gap: 7px;
}

.clientRiskList article.warn {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.clientRiskList article.danger {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-danger) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-danger) 76%, var(--bem-surface));
}

.clientRiskList article.ok {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.clientRiskList article div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.clientRiskList p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
}

.clientRiskList span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.clientHandoverList {
  display: grid;
  gap: 8px;
}

.clientHandoverItem {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 11px;
  display: grid;
  gap: 7px;
}

.clientHandoverItem span,
.clientHandoverItem em {
  color: var(--text-muted);
  font-style: normal;
  line-height: 1.45;
  font-size: 12px;
}

.clientHandoverItem p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
  font-size: 13px;
}

.completenessGrid,
.client360Grid,
.clientServiceJourneyGrid,
.clientTaskGrid,
.clientTabGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

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

.completenessGrid article,
.clientTodoItem {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.completenessGrid article.done {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.completenessGrid article.missing {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.completenessGrid span,
.clientTodoItem span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

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

.clientTodoItem p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
  font-size: 13px;
}

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

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

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

.clientServiceQualityActionForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

.clientCheckinHandoverActionForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.clientCheckinHandoverItem {
  min-height: 156px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.clientCheckinHandoverItem.done {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.clientCheckinHandoverItem.pending {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.clientCheckinHandoverItem p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.clientCheckinHandoverItem span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.clientSatisfactionReviewActionForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.clientSatisfactionReviewItem {
  min-height: 186px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.clientSatisfactionReviewItem.done {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.clientSatisfactionReviewItem.pending {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.clientSatisfactionReviewItem.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-danger) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-danger) 76%, var(--bem-surface));
}

.clientSatisfactionReviewItem p,
.clientSatisfactionReviewItem em,
.clientSatisfactionReviewItem b {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  font-style: normal;
}

.clientSatisfactionReviewItem span,
.clientSatisfactionReviewItem b {
  color: var(--text-muted);
  font-size: 12px;
}

.serviceNpsReviewCommand {
  margin-top: 14px;
}

.serviceNpsReviewStats {
  margin-bottom: 12px;
}

.serviceNpsReviewForm {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
  margin-bottom: 12px;
}

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

.serviceNpsReviewItem {
  min-height: 220px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.serviceNpsReviewItem.done {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.serviceNpsReviewItem.pending {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.serviceNpsReviewItem.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-danger) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-danger) 76%, var(--bem-surface));
}

.serviceNpsReviewItem p {
  margin: 0;
  color: var(--text-strong);
  font-weight: 700;
  line-height: 1.4;
}

.clientExitContinuityActionForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.clientExitContinuityItem {
  min-height: 176px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.clientExitContinuityItem.done {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.clientExitContinuityItem.pending {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.clientExitContinuityItem p,
.clientExitContinuityItem em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  font-style: normal;
}

.clientExitContinuityItem span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

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

.clientExitBusinessStats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.clientExitBusinessStats article {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 11px;
  display: grid;
  gap: 5px;
}

.clientExitBusinessStats span {
  color: var(--text-muted);
  font-size: 12px;
}

.clientExitBusinessStats strong {
  color: var(--text-strong);
}

.clientExitBusinessCommandActionForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.clientExitBusinessCommandItem {
  min-height: 210px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.clientExitBusinessCommandItem.pending {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.clientExitBusinessCommandItem.done {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.clientExitBusinessCommandItem p,
.clientExitBusinessCommandItem em,
.clientExitBusinessCommandItem strong {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  font-style: normal;
}

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

.clientExitBusinessSignals span {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 7px;
  color: var(--text-muted);
  font-size: 12px;
  display: grid;
  gap: 3px;
}

.clientExitBusinessSignals b {
  color: var(--text-strong);
}

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

.clientTaskSummary article {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 4px;
}

.clientTaskSummary strong {
  color: var(--text-strong);
  font-size: 24px;
}

.clientTaskSummary span {
  color: var(--text-muted);
  font-weight: 800;
  font-size: 12px;
}

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

.client360Block,
.clientServiceJourneyItem,
.clientTaskCard,
.clientTabBlock {
  min-height: 190px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 9px;
  align-content: start;
}

.clientTabBlock {
  min-height: 156px;
}

.clientServiceJourneyItem {
  min-height: 156px;
}

.clientTaskCard {
  min-height: 172px;
}

.client360Block p,
.clientServiceJourneyItem p,
.clientTaskCard p,
.clientTabBlock p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
  font-size: 13px;
}

.clientServiceJourneyItem em {
  font-style: normal;
  line-height: 1.45;
}

.clientTaskCard em {
  color: var(--text-muted);
  font-style: normal;
  line-height: 1.45;
  font-size: 12px;
}

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

.journeyCard {
  min-height: 148px;
  padding: 13px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.documentItem {
  padding: 13px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.documentItem > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

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

.timelineItem {
  min-height: 134px;
  padding: 13px;
  display: grid;
  gap: 6px;
  align-content: start;
}

.timelineItem p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.timelineItem em {
  width: max-content;
  border-radius: 4px;
  background: var(--field-bg);
  border: 1px solid var(--line);
  color: var(--text-muted);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
}

.staffStats,
.staffGrid {
  display: grid;
  gap: 10px;
}

.staffManagementFocus {
  display: grid;
  gap: 14px;
}

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

.staffManagementFocusStats article,
.staffManagementFocusGrid article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.staffManagementFocusStats article span,
.staffManagementFocusStats article strong,
.staffManagementFocusGrid article span,
.staffManagementFocusGrid article strong {
  display: block;
}

.staffManagementFocusStats article span,
.staffManagementFocusGrid article span,
.staffManagementFocusGrid article em {
  color: var(--text-muted);
}

.staffManagementFocusStats article strong {
  margin-top: 6px;
  font-size: 19px;
}

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

.staffManagementFocusGrid article {
  display: grid;
  gap: 8px;
  align-content: start;
}

.staffManagementFocusGrid article p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

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

.staffStat,
.staffCard {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
}

.staffStat {
  padding: 13px;
  display: grid;
  gap: 8px;
}

.staffStat span,
.staffTop span,
.staffMeta span {
  color: var(--text-muted);
}

.staffCard {
  padding: 14px;
  display: grid;
  gap: 12px;
}

.staffTop {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.staffTop > div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.staffMeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  font-size: 13px;
}

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

.roomFocus {
  display: grid;
  gap: 14px;
}

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

.roomFocusStats article,
.roomFocusGrid article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.roomFocusStats article span,
.roomFocusStats article strong,
.roomFocusGrid article span,
.roomFocusGrid article strong {
  display: block;
}

.roomFocusStats article span,
.roomFocusGrid article span,
.roomFocusGrid article em {
  color: var(--text-muted);
}

.roomFocusStats article strong {
  margin-top: 6px;
  font-size: 19px;
}

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

.roomFocusGrid article {
  display: grid;
  gap: 8px;
  align-content: start;
}

.roomFocusGrid article p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.roomStayTransferGate {
  display: grid;
  gap: 14px;
}

.roomCheckinTransferClosureGate {
  display: grid;
  gap: 14px;
}

.roomForceStatusOverride {
  display: grid;
  gap: 12px;
  border-left: 4px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 4%, var(--surface));
}

.roomForceStatusWarning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--field-bg);
}

.roomForceStatusWarning p {
  margin: 0;
  color: var(--text-main);
  line-height: 1.48;
}

.roomForceStatusReasonHint {
  display: block;
  margin-top: var(--space-1);
  color: var(--danger);
  font-size: var(--font-meta);
  font-style: normal;
}

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

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

.roomStayTransferSteps article,
.roomCheckinTransferSteps article {
  min-height: 158px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 13px;
}

.roomStayTransferSteps article > span,
.roomCheckinTransferSteps article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.roomStayTransferSteps strong,
.roomCheckinTransferSteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.roomStayTransferSteps p,
.roomStayTransferSteps em,
.roomCheckinTransferSteps p,
.roomCheckinTransferSteps em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.inventoryServiceGate {
  display: grid;
  gap: 14px;
}

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

.inventoryServiceSteps article {
  min-height: 158px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 13px;
}

.inventoryServiceSteps article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.inventoryServiceSteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.inventoryServiceSteps p,
.inventoryServiceSteps em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.roomSchedulePanel {
  overflow: hidden;
}

.roomVerticalStores {
  overflow-x: auto;
  display: grid;
  gap: 18px;
  padding-bottom: 6px;
}

.roomVerticalBlock {
  display: grid;
  gap: 10px;
}

.roomVerticalStoreTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.roomVerticalStoreTitle span {
  color: var(--text-muted);
  font-weight: 800;
}

.roomVerticalTable {
  display: grid;
  gap: 6px;
  min-width: calc(104px + var(--room-count) * 74px);
}

.roomVerticalHead,
.roomVerticalRow {
  display: grid;
  grid-template-columns: 92px repeat(var(--room-count), minmax(68px, 1fr));
  gap: 6px;
  align-items: stretch;
}

.roomVerticalHead span,
.roomVerticalHead em {
  min-height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.roomVerticalRow > strong {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  color: var(--text-strong);
  padding: 8px;
  display: grid;
  align-content: center;
  gap: 4px;
  font-size: 13px;
}

.roomVerticalRow > strong span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
}

.roomDay {
  min-height: 52px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 6px;
  display: grid;
  align-content: center;
  gap: 3px;
}

.roomDay span {
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roomDay em {
  color: var(--text-muted);
  display: -webkit-box;
  max-width: 100%;
  font-size: 9px;
  font-style: normal;
  line-height: 1.18;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.roomDay.occupied {
  background: var(--field-bg);
}

.roomDay.checkin {
  background: var(--bem-surface);
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.roomDay.checkout {
  background: var(--bem-surface);
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.roomDay.conflict,
.roomDay.blocked {
  background: var(--bem-surface);
  border-left: 4px solid color-mix(in srgb, var(--bem-status-danger) 76%, var(--bem-surface));
}

.roomDay.repair {
  background: var(--field-bg);
}

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

.roomCalendarEvent,
.roomConflictCard {
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 13px;
  display: grid;
  gap: 9px;
  align-content: start;
}

.roomCalendarEvent.checkin {
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.roomCalendarEvent.checkout {
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.roomCalendarEvent > div,
.roomConflictCard > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.roomCalendarEvent span,
.roomCalendarEvent em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.roomConflictList {
  display: grid;
  gap: 10px;
}

.roomConflictCard {
  background: var(--bem-surface);
}

.roomConflictCard p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.roomCard {
  padding: 18px;
  min-height: 180px;
  display: grid;
  gap: 10px;
}

.roomCard.available {
  background: var(--bem-surface);
}

.roomHeader,
.roomDetail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.roomCard h3 {
  margin: 8px 0 0;
  font-size: 30px;
}

.roomCard p {
  margin: 0;
}

.roomDetail {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.table {
  display: grid;
  gap: 8px;
}

.tableHead,
.tableRow {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.8fr 0.8fr 0.7fr;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
}

.tableHead {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 800;
}

.tableRow {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
}

.financeSettlementRiskTable {
  --bem-table-columns: minmax(96px, 0.75fr) minmax(108px, 0.8fr) minmax(86px, 0.62fr) minmax(150px, 1.1fr) minmax(92px, 0.7fr) minmax(82px, 0.62fr) minmax(92px, 0.7fr) minmax(82px, 0.62fr);
  display: grid;
  gap: var(--space-2);
}

.financePaymentTable {
  --bem-table-columns: minmax(128px, 1fr) minmax(110px, 0.85fr) minmax(96px, 0.72fr) minmax(96px, 0.72fr) minmax(112px, 0.78fr) minmax(82px, 0.62fr);
}

.financeRefundTable {
  --bem-table-columns: minmax(128px, 1fr) minmax(110px, 0.85fr) minmax(96px, 0.72fr) minmax(86px, 0.62fr) minmax(128px, 0.95fr) minmax(150px, 1.1fr) minmax(82px, 0.62fr);
}

.financeSettlementTable {
  --bem-table-columns: minmax(128px, 1fr) minmax(130px, 0.95fr) minmax(96px, 0.72fr) minmax(96px, 0.72fr) minmax(96px, 0.72fr) minmax(86px, 0.62fr) minmax(82px, 0.62fr);
}

.financeSettlementRiskTable .bemTableRow:nth-child(even) {
  background: color-mix(in srgb, var(--field-bg) 4%, var(--surface));
}

.bemTableRow.financePaymentRisk {
  border-left: 4px solid var(--bem-status-warning);
  background: color-mix(in srgb, var(--bem-status-warning) 6%, var(--bem-surface));
}

.inventorySafetyLineTable {
  --bem-table-columns: minmax(170px, 1.25fr) minmax(108px, 0.78fr) minmax(88px, 0.62fr) minmax(88px, 0.62fr) minmax(112px, 0.78fr) minmax(82px, 0.62fr);
}

.bemTableRow.inventorySafetyRisk {
  border-left: 4px solid var(--bem-status-warning);
  background: color-mix(in srgb, var(--bem-status-warning) 6%, var(--bem-surface));
}

.financeAmountIn {
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.financeAmountOut {
  font-weight: 700;
  color: var(--bem-status-info);
  font-variant-numeric: tabular-nums;
}

.financeRefundRangeHint {
  display: block;
  margin-top: var(--space-1);
  color: var(--danger);
  font-size: var(--font-meta);
  font-style: normal;
}

.slideToAuthorize {
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  border: 1px solid color-mix(in srgb, var(--danger) 18%, var(--line));
  background: color-mix(in srgb, var(--danger) 5%, var(--surface));
  color: var(--text-main);
}

.slideToAuthorize em {
  color: var(--danger);
  font-size: var(--font-meta);
  font-style: normal;
}

.mealScheduleTable {
  --bem-table-columns: minmax(128px, 0.95fr) minmax(108px, 0.78fr) minmax(160px, 1.1fr) minmax(148px, 1fr) minmax(148px, 1fr) minmax(148px, 1fr) minmax(82px, 0.62fr);
}

.bemTableRow.mealScheduleRisk {
  border-left: 4px solid var(--bem-status-warning);
  background: color-mix(in srgb, var(--bem-status-warning) 6%, var(--bem-surface));
}

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

.mealKitchenQualityLoop .nestedPanel {
  background: var(--bem-surface);
  border-color: var(--line);
}

.mealRetentionSampleForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

.mealKitchenTicket {
  min-height: 176px;
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
}

.mealKitchenTicket p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
}

.recoveryOrderTable {
  --bem-table-columns: minmax(128px, 0.95fr) minmax(190px, 1.35fr) minmax(86px, 0.62fr) minmax(112px, 0.78fr) minmax(86px, 0.62fr) minmax(82px, 0.62fr) minmax(82px, 0.62fr);
}

.bemTableRow.recoveryOrderRisk {
  border-left: 4px solid var(--bem-status-warning);
  background: color-mix(in srgb, var(--bem-status-warning) 6%, var(--bem-surface));
}

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

.recoveryAssessmentCommandForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.recoveryAssessmentItem {
  min-height: 210px;
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
}

.recoveryAssessmentItem.pending {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.recoveryAssessmentItem.done {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.recoveryAssessmentItem p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
}

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

.nannyHandoverCommandForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.nannyHandoverItem {
  min-height: 214px;
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
}

.nannyHandoverItem.pending {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.nannyHandoverItem.done {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.nannyHandoverItem p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
}

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

.knowledgeFocus {
  display: grid;
  gap: 14px;
}

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

.knowledgeFocusStats article,
.knowledgeFocusGrid article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.knowledgeFocusStats article span,
.knowledgeFocusStats article strong,
.knowledgeFocusGrid article span,
.knowledgeFocusGrid article strong {
  display: block;
}

.knowledgeFocusStats article span,
.knowledgeFocusGrid article span,
.knowledgeFocusGrid article em {
  color: var(--text-muted);
}

.knowledgeFocusStats article strong {
  margin-top: 6px;
  font-size: 19px;
}

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

.knowledgeFocusGrid article {
  display: grid;
  gap: 8px;
  align-content: start;
}

.knowledgeFocusGrid article p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.trainingFocus {
  display: grid;
  gap: 14px;
}

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

.trainingFocusStats article,
.trainingFocusGrid article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.trainingFocusStats article span,
.trainingFocusStats article strong,
.trainingFocusGrid article span,
.trainingFocusGrid article strong {
  display: block;
}

.trainingFocusStats article span,
.trainingFocusGrid article span,
.trainingFocusGrid article em {
  color: var(--text-muted);
}

.trainingFocusStats article strong {
  margin-top: 6px;
  font-size: 19px;
}

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

.trainingFocusGrid article {
  display: grid;
  gap: 8px;
  align-content: start;
}

.trainingFocusGrid article p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.knowledgeTrainingReadinessGate {
  display: grid;
  gap: 14px;
}

.knowledgeTrainingReadinessSteps {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.knowledgeTrainingReadinessSteps article {
  min-height: 168px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 13px;
}

.knowledgeTrainingReadinessSteps article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.knowledgeTrainingReadinessSteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.knowledgeTrainingReadinessSteps p,
.knowledgeTrainingReadinessSteps em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.knowledgeTrainingPermissionCommandForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.knowledgeTrainingPermissionItem {
  min-height: 224px;
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
}

.knowledgeTrainingPermissionItem.pending {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.knowledgeTrainingPermissionItem.watch {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 28%, var(--bem-surface));
}

.knowledgeTrainingPermissionItem.done {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.knowledgeTrainingPermissionItem p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
}

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

.customerServiceRecoveryCommandForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.customerServiceRecoveryItem {
  min-height: 228px;
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
}

.customerServiceRecoveryItem.pending {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.customerServiceRecoveryItem.watch {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 28%, var(--bem-surface));
}

.customerServiceRecoveryItem.done {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.customerServiceRecoveryItem p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
}

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

.dataImportFocus {
  display: grid;
  gap: 14px;
}

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

.dataImportFocusStats article,
.dataImportFocusGrid article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.dataImportFocusStats article span,
.dataImportFocusStats article strong,
.dataImportFocusGrid article span,
.dataImportFocusGrid article strong {
  display: block;
}

.dataImportFocusStats article span,
.dataImportFocusGrid article span,
.dataImportFocusGrid article em {
  color: var(--text-muted);
}

.dataImportFocusStats article strong {
  margin-top: 6px;
  font-size: 19px;
}

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

.dataImportFocusGrid article {
  display: grid;
  gap: 8px;
  align-content: start;
}

.dataImportFocusGrid article p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.dataImportMigrationGate {
  display: grid;
  gap: 14px;
}

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

.dataImportMigrationSteps article {
  min-height: 158px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 13px;
}

.dataImportMigrationSteps article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.dataImportMigrationSteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.dataImportMigrationSteps p,
.dataImportMigrationSteps em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.dataImportCommandForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.dataImportItem {
  min-height: 230px;
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
}

.dataImportItem.pending {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.dataImportItem.watch {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 28%, var(--bem-surface));
}

.dataImportItem.done {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.dataImportItem p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
}

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

.businessGrid.single {
  grid-template-columns: 1fr;
}

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

.financeAlert {
  min-height: 94px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  box-shadow: var(--apple-card-shadow);
}

.financeAlert.danger {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-danger) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-danger) 76%, var(--bem-surface));
}

.financeAlert.warn {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.financeAlert.ok {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.financeAlert > div {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.financeAlert strong,
.financeAlert span,
.financeAlert b {
  min-width: 0;
}

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

.financeAlert b {
  color: var(--text-strong);
  white-space: nowrap;
}

.financeAlert .status {
  grid-column: 1 / -1;
  width: max-content;
}

.financeReceivableAgingStats {
  margin-bottom: 12px;
}

.financeReceivableAgingForm {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
  margin-bottom: 12px;
}

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

.financeReceivableAgingItem {
  min-height: 214px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
  display: grid;
  gap: 9px;
  align-content: start;
  box-shadow: var(--apple-card-shadow);
}

.financeReceivableAgingItem.warn {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.financeReceivableAgingItem.danger {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-danger) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-danger) 76%, var(--bem-surface));
}

.financeReceivableAgingItem.ok {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.financeReceivableAgingItem p {
  margin: 0;
  color: var(--text-muted);
  font-weight: 700;
  line-height: 1.4;
}

.financeSupplierPaymentStats {
  margin-bottom: 12px;
}

.financeSupplierPaymentForm {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
  margin-bottom: 12px;
}

.financeSupplierPaymentGrid {
  display: grid;
  gap: 10px;
}

.financeSupplierPaymentItem {
  min-height: 210px;
  padding: 13px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  display: grid;
  gap: 9px;
  align-content: start;
  box-shadow: var(--apple-card-shadow);
}

.financeSupplierPaymentItem.warn {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.financeSupplierPaymentItem.danger {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-danger) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-danger) 76%, var(--bem-surface));
}

.financeSupplierPaymentItem.ok {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.financeSupplierPaymentItem p {
  margin: 0;
  color: var(--text-muted);
  font-weight: 700;
  line-height: 1.4;
}

.financeInvoiceArchiveStats {
  margin-bottom: 12px;
}

.financeInvoiceArchiveForm,
.financeReportExportForm {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
  margin-bottom: 12px;
}

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

.financeInvoiceArchiveItem {
  min-height: 188px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
  display: grid;
  gap: 9px;
  align-content: start;
  box-shadow: var(--apple-card-shadow);
}

.financeInvoiceArchiveItem.warn {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.financeInvoiceArchiveItem.danger {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-danger) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-danger) 76%, var(--bem-surface));
}

.financeInvoiceArchiveItem.ok {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.financeInvoiceArchiveItem p {
  margin: 0;
  color: var(--text-muted);
  font-weight: 700;
  line-height: 1.4;
}

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

.financeReportExportMetrics article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 11px;
  display: grid;
  gap: 5px;
}

.financeReportExportMetrics span {
  color: var(--text-muted);
  font-size: 12px;
}

.financeReportExportMetrics strong {
  color: var(--text-strong);
}

.financeReceivableAgingForm,
.financeSupplierPaymentForm,
.financeInvoiceArchiveForm,
.financeReportExportForm {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
}

.businessCard {
  min-height: 184px;
  padding: 14px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  display: grid;
  gap: 10px;
  align-content: start;
}

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

.clientRiskRadarCard {
  min-height: 210px;
  padding: 14px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  display: grid;
  gap: 9px;
  align-content: start;
}

.clientRiskRadarCard.danger {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-danger) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-danger) 76%, var(--bem-surface));
}

.clientRiskRadarCard.warn {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.clientRiskRadarCard p,
.clientRiskRadarCard em {
  margin: 0;
  line-height: 1.5;
  color: var(--text-muted);
  font-size: 13px;
}

.clientRiskRadarCard em {
  color: var(--text-muted);
  font-style: normal;
}

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

.clientEntitlementFulfillmentForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.clientEntitlementCard {
  min-height: 154px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.clientEntitlementCard p,
.clientEntitlementCard em {
  margin: 0;
  line-height: 1.45;
  color: var(--text-muted);
  font-size: 13px;
}

.clientEntitlementCard em {
  color: var(--text-muted);
  font-style: normal;
}

.clientDailyPlanForm,
.clientDailyPlanGrid {
  display: grid;
  gap: 10px;
}

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

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

.clientDailyPlanCard {
  min-height: 168px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.clientDailyPlanCard p,
.clientDailyPlanCard em {
  margin: 0;
  line-height: 1.45;
  color: var(--text-muted);
  font-size: 13px;
}

.clientDailyPlanCard em {
  color: var(--text-muted);
  font-style: normal;
}

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

.clientDailyClearanceForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.clientDailyClearanceItem {
  min-height: 186px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 9px;
  align-content: start;
}

.clientDailyClearanceItem.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.clientDailyClearanceItem.normal {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 28%, var(--bem-surface));
}

.clientDailyClearanceItem p,
.clientDailyClearanceItem em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  font-style: normal;
}

.clientDailyClearanceItem em {
  color: var(--text-muted);
}

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

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

.clientServiceQualityItem {
  min-height: 190px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.clientServiceQualityItem.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.clientServiceQualityItem.ok {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.clientServiceQualityItem p,
.clientServiceQualityItem em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.clientServiceQualityItem em {
  color: var(--text-muted);
  font-style: normal;
  font-size: 12px;
}

.onSiteServiceClosureCommand {
  border-color: var(--line);
}

.onSiteQuickRecordClosureGate {
  display: grid;
  gap: 14px;
}

.onSiteQuickRecordStats,
.onSiteQuickRecordSteps {
  display: grid;
  gap: 10px;
}

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

.onSiteQuickRecordStats article {
  min-height: 74px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

.onSiteQuickRecordStats span,
.onSiteQuickRecordStats strong {
  display: block;
}

.onSiteQuickRecordStats span {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 800;
}

.onSiteQuickRecordStats strong {
  margin-top: 6px;
  color: var(--text-strong);
  font-size: 20px;
}

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

.onSiteQuickRecordSteps article {
  min-height: 164px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.onSiteQuickRecordSteps article > .onSiteQuickRecordStepIndex {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.onSiteQuickRecordSteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.onSiteQuickRecordSteps p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.unifiedOnSiteQuickRecordGate {
  display: grid;
  gap: 14px;
}

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

.unifiedOnSiteQuickRecordGrid article {
  min-height: 154px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.unifiedOnSiteQuickRecordGrid article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.unifiedOnSiteQuickRecordGrid strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.unifiedOnSiteQuickRecordGrid p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

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

.onSiteServiceClosureCard {
  min-height: 230px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 14px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.onSiteServiceClosureCard.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.onSiteServiceClosureCard p,
.onSiteServiceClosureCard em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.onSiteServiceClosureCard em {
  color: var(--text-muted);
  font-style: normal;
}

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

.qualityCheckGrid span {
  border-radius: 4px;
  background: var(--field-bg);
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  padding: 7px;
}

.clientServiceLedgerGroup {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.clientLedgerList {
  display: grid;
  gap: 8px;
}

.clientLedgerList div {
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 8%, var(--bem-surface));
  border: 1px solid var(--line);
  padding: 10px;
  display: grid;
  gap: 5px;
}

.clientLedgerList span,
.clientLedgerList small {
  color: var(--text-muted);
  font-size: 12px;
}

.clientLedgerList strong {
  color: var(--text-strong);
  font-size: 13px;
}

.clientLedgerList em {
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

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

.clientScanPermissionGrid article {
  min-height: 176px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.clientScanPermissionGrid p,
.clientScanPermissionGrid span,
.clientScanPermissionGrid em,
.clientScanPermissionGrid small {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
  font-style: normal;
}

.clientScanPermissionGrid span,
.clientScanPermissionGrid small {
  color: var(--text-muted);
}

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

.approvalImpactCard {
  min-height: 214px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.approvalImpactCard p,
.approvalImpactCard em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  font-style: normal;
}

.approvalImpactCard em {
  color: var(--text-muted);
  font-size: 12px;
}

.dailyCommandMeta,
.dailyCommandGrid {
  display: grid;
  gap: 10px;
}

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

.dailyCommandMeta > div,
.dailyCommandItem {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.dailyCommandMeta span {
  color: var(--text-muted);
  font-size: 12px;
}

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

.dailyCommandItem {
  min-height: 158px;
  align-content: start;
}

.dailyCommandItem p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
  font-size: 13px;
}

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

.serviceReviewCard {
  min-height: 182px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.serviceReviewCard p,
.serviceReviewCard em {
  margin: 0;
  line-height: 1.45;
  color: var(--text-muted);
  font-size: 13px;
}

.serviceReviewCard em {
  color: var(--text-muted);
  font-style: normal;
}

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

.staffPerformanceCard {
  min-height: 238px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 9px;
  align-content: start;
}

.staffPerformanceScore {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.staffPerformanceScore strong {
  font-size: 30px;
  line-height: 1;
  color: var(--text-strong);
}

.staffPerformanceScore span {
  color: var(--text-muted);
  font-size: 12px;
}

.staffPerformanceCard p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
  font-size: 13px;
}

.staffPerformanceTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.staffPerformanceTags span {
  border-radius: 4px;
  background: var(--field-bg);
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 12px;
  padding: 5px 8px;
}

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

.roleAccountabilityCommand {
  border-color: var(--line);
}

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

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

.roleAccountabilityItem {
  min-height: 224px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 9px;
  align-content: start;
}

.roleAccountabilityItem.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 26%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.roleAccountabilityItem.ok {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-accent) 22%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-accent) 70%, var(--bem-surface));
}

.clientHandoverAcceptanceCommand {
  display: grid;
  gap: 12px;
  border-color: var(--line);
}

.clientHandoverAcceptanceForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.clientHandoverAcceptanceItem {
  min-height: 236px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 9px;
  align-content: start;
}

.clientHandoverAcceptanceItem.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 26%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.clientHandoverAcceptanceItem.ok {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-accent) 22%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-accent) 70%, var(--bem-surface));
}

.clientHandoverAcceptanceItem p,
.clientHandoverAcceptanceItem b {
  margin: 0;
  line-height: 1.5;
}

.roleAccountabilityItem p,
.roleAccountabilityItem b {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  font-style: normal;
}

.staffServiceCoverageCommand {
  display: grid;
  gap: 12px;
  border-color: var(--line);
}

.staffServiceCoverageForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.staffServiceCoverageItem {
  min-height: 272px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 9px;
  align-content: start;
}

.staffServiceCoverageItem.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 26%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.staffServiceCoverageItem.ok {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-accent) 22%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-accent) 70%, var(--bem-surface));
}

.staffServiceCoverageItem p,
.staffServiceCoverageItem b,
.staffServiceCoverageItem em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  font-style: normal;
}

.staffServiceCoverageItem b {
  color: var(--text-strong);
}

.rolePermissionCommandCard {
  min-height: 248px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 9px;
  align-content: start;
}

.rolePermissionCommandCard p,
.rolePermissionCommandCard em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  font-style: normal;
}

.rolePermissionCommandCard > em {
  color: var(--text-muted);
}

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

.permissionCommandStats span {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  padding: 8px;
  color: var(--text-muted);
  font-size: 12px;
  display: grid;
  gap: 4px;
}

.permissionCommandStats strong {
  color: var(--text-strong);
  font-size: 15px;
}

.businessTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.businessCard p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.businessMeta {
  display: grid;
  gap: 7px;
  font-size: 13px;
}

.businessMeta span,
.businessMeta em {
  color: var(--text-muted);
  font-style: normal;
}

.dashboardFocus {
  overflow: hidden;
}

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

.dashboardFocusStats article {
  min-height: 86px;
  display: grid;
  align-content: center;
  gap: 5px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

.dashboardFocusStats span,
.dashboardFocusGrid span,
.dashboardFocusGrid em {
  color: var(--text-muted);
  font-style: normal;
}

.dashboardFocusStats strong {
  color: var(--text-strong);
  font-size: 24px;
}

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

.dashboardFocusGrid article {
  min-height: 198px;
  display: grid;
  align-content: start;
  gap: 8px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.dashboardFocusGrid article.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 26%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.dashboardFocusGrid strong,
.dashboardFocusGrid p {
  margin: 0;
  color: var(--text-strong);
  line-height: 1.45;
}

.dashboardFocusGrid p {
  color: var(--text-muted);
  font-size: 13px;
}

.dashboardFocusGrid em {
  font-size: 12px;
  line-height: 1.45;
}

.executiveOperatingGate {
  display: grid;
  gap: 14px;
}

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

.executiveOperatingSteps article {
  min-height: 148px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 13px;
}

.executiveOperatingSteps article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 14%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.executiveOperatingSteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.executiveOperatingSteps p,
.executiveOperatingSteps em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.permissionMetricGrid,
.staffPermissionGrid,
.staffDeviceGrid,
.staffPermissionAuditGrid,
.operationLogGrid,
.attendanceMetricGrid,
.attendanceRuleGrid,
.attendanceGrid,
.reminderMetricGrid,
.reminderGrid {
  display: grid;
  gap: 10px;
}

.permissionMetricGrid,
.attendanceMetricGrid,
.reminderMetricGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.permissionMetricGrid article,
.attendanceMetricGrid article,
.reminderMetricGrid article,
.attendanceRuleCard,
.attendanceCard,
.reminderCard,
.operationLogItem {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 6px;
}

.permissionMetricGrid strong,
.attendanceMetricGrid strong,
.reminderMetricGrid strong {
  font-size: 24px;
  color: var(--text-strong);
}

.permissionMetricGrid span,
.attendanceMetricGrid span,
.reminderMetricGrid span,
.reminderCard em,
.attendanceRuleCard span,
.attendanceRuleCard em,
.operationLogItem span {
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
}

.staffPermissionGrid,
.staffDeviceGrid,
.staffPermissionAuditGrid,
.attendanceGrid,
.reminderGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.staffPermissionCard {
  min-height: 192px;
  padding: 14px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  display: grid;
  gap: 10px;
  align-content: start;
}

.staffDeviceBindingCenter {
  border-color: var(--line);
}

.securityNotice {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
}

.securityNotice strong {
  color: var(--text-strong);
}

.securityNotice span {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

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

.staffDeviceCard {
  min-height: 214px;
  padding: 14px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  display: grid;
  gap: 10px;
  align-content: start;
}

.staffDeviceCard p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.staffPermissionAuditCommand {
  border-color: var(--line);
}

.staffPermissionAuditForm {
  margin-top: 2px;
}

.staffPermissionAuditItem {
  min-height: 236px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 14px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.staffPermissionAuditItem p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
  font-size: 13px;
}

.staffPermissionAuditItem b {
  color: var(--text-strong);
}

.staffPermissionAuditCompare {
  display: grid;
  gap: 8px;
}

.staffPermissionAuditCompare span {
  min-height: 52px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  color: var(--text-muted);
  display: grid;
  gap: 4px;
  padding: 9px;
  font-size: 12px;
  line-height: 1.35;
}

.staffPermissionAuditCompare strong {
  color: var(--text-strong);
  font-size: 13px;
}

.staffPermissionCard p,
.attendanceRuleCard p,
.attendanceCard p,
.reminderCard p,
.operationLogItem p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
  font-size: 13px;
}

.serviceFlow.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.serviceFlow.compact article {
  min-height: 82px;
}

.progressItem {
  display: grid;
  gap: 8px;
}

.progressItem > div:first-child,
.barItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.progressTrack,
.barTrack {
  height: 10px;
  border-radius: 4px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 10%, var(--field-bg));
}

.progressTrack i,
.barTrack i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary-action);
}

.barItem {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 92px;
}

.barItem > div:first-child {
  display: grid;
}

.barItem strong {
  text-align: right;
}

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

.storeCard,
.roleCard,
.okrCard,
.meetingList article,
.pathwayCard,
.carePlanItem,
.recordItem,
.growthCard,
.educationItem,
.leadCard,
.advisorCard,
.flowCard,
.ruleList article,
.workbenchCard,
.serviceEntryCard,
.satisfactionItem,
.requestCard,
.serviceFlow article,
.warningNotice,
.blueprintCard,
.phaseItem,
.auditCard,
.auditFocus {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
}

.clientModuleCard,
.documentItem,
.timelineItem,
.detailBox,
.lifecycleStep,
.journeyCard {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
}

.storeCard {
  min-height: 248px;
  padding: 16px;
  display: grid;
  gap: 12px;
}

.storeCard > div:first-child,
.okrTop,
.roleHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.storeCard strong,
.okrTop strong,
.roleHead strong,
.meetingList strong {
  font-size: 17px;
}

.storeCard span,
.storeCard em,
.okrTop span,
.roleCard p,
.meetingList span,
.meetingList em,
.roleCard dd,
.roleCard dt {
  color: var(--text-muted);
  font-style: normal;
}

.storeNumber {
  font-size: 38px;
  line-height: 1;
  font-weight: 900;
  color: var(--text-strong);
}

.storeMeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  font-size: 13px;
}

.orgFocus {
  overflow: hidden;
}

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

.orgFocusStats article {
  min-height: 84px;
  display: grid;
  align-content: center;
  gap: 5px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

.orgFocusStats span,
.orgFocusGrid span,
.orgFocusGrid em {
  color: var(--text-muted);
  font-style: normal;
}

.orgFocusStats strong {
  color: var(--text-strong);
  font-size: 24px;
}

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

.orgFocusGrid article {
  min-height: 188px;
  display: grid;
  align-content: start;
  gap: 8px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.orgFocusGrid strong,
.orgFocusGrid p {
  margin: 0;
  color: var(--text-strong);
  line-height: 1.45;
}

.orgFocusGrid p {
  color: var(--text-muted);
  font-size: 13px;
}

.orgFocusGrid em {
  font-size: 12px;
  line-height: 1.45;
}

.orgPermissionOnboardingGate {
  display: grid;
  gap: 14px;
}

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

.orgPermissionOnboardingSteps article {
  min-height: 158px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 13px;
}

.orgPermissionOnboardingSteps article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.orgPermissionOnboardingSteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.orgPermissionOnboardingSteps p,
.orgPermissionOnboardingSteps em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.orgTree {
  display: grid;
  gap: 18px;
}

.orgNode {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 14px;
  display: grid;
  gap: 4px;
  text-align: center;
}

.orgNode.chief {
  width: min(320px, 100%);
  margin: 0 auto;
  background: var(--text-strong);
  color: var(--bem-text-inverse);
}

.orgNode.chief span {
  color: color-mix(in srgb, var(--bem-text-inverse) 72%, transparent);
}

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

.orgBranch {
  display: grid;
  gap: 10px;
}

.orgChildren {
  display: grid;
  gap: 8px;
}

.orgChildren span {
  min-height: 38px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  display: grid;
  place-items: center;
  color: var(--text-strong);
  font-weight: 800;
  text-align: center;
  padding: 8px;
}

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

.roleCard {
  min-height: 220px;
  padding: 16px;
  display: grid;
  gap: 12px;
}

.roleHead span {
  border-radius: 4px;
  background: var(--field-bg);
  color: var(--text-muted);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.roleCard p {
  margin: 0;
  line-height: 1.6;
}

.roleCard dl {
  margin: 0;
  display: grid;
  gap: 8px;
}

.roleCard dl div {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
}

.roleCard dt {
  font-weight: 800;
}

.roleCard dd {
  margin: 0;
}

.okrCard {
  padding: 16px;
  display: grid;
  gap: 12px;
  min-height: 236px;
}

.okrTop b {
  font-size: 24px;
  color: var(--accent);
}

.okrCard h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
}

.okrCard ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted);
  display: grid;
  gap: 6px;
}

.okrPerformanceTable {
  --bem-table-columns: minmax(116px, 0.9fr) minmax(170px, 1.24fr) minmax(72px, 0.5fr) minmax(118px, 0.82fr) minmax(82px, 0.58fr);
}

.meetingList article {
  padding: 13px;
  display: grid;
  gap: 4px;
}

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

.pathwayCard {
  min-height: 176px;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.pathwayCard p,
.carePlanItem p,
.recordItem p,
.educationItem p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

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

.carePlanItem {
  min-height: 106px;
  padding: 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: start;
}

.carePlanItem > div {
  display: grid;
  gap: 4px;
}

.carePlanItem span,
.recordItem span,
.recordItem em,
.growthCard span,
.growthCard dt,
.educationItem span {
  color: var(--text-muted);
  font-style: normal;
}

.carePlanItem p {
  grid-column: 1 / -1;
}

.recordItem {
  padding: 13px;
  display: grid;
  gap: 6px;
}

.structuredList {
  display: grid;
  gap: 10px;
  max-height: 620px;
  overflow: auto;
  padding-right: 2px;
}

.structuredCard,
.dailyReportCard {
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 13px;
  display: grid;
  gap: 9px;
}

.structuredTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.structuredCard p,
.dailyReportCard p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.structuredMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.structuredMeta span,
.structuredMeta em {
  border-radius: 4px;
  background: var(--field-bg);
  color: var(--text-muted);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 9px;
}

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

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

.dailySummaryGrid article {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 4px;
}

.dailySummaryGrid strong {
  font-size: 24px;
  color: var(--text-strong);
}

.dailySummaryGrid span {
  color: var(--text-muted);
  font-weight: 800;
  font-size: 13px;
}

.dailyNumbers {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.dailyNumbers div {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 10px;
  display: grid;
  gap: 4px;
}

.dailyNumbers span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}

.dailyNumbers strong {
  color: var(--text-strong);
  font-size: 20px;
}

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

.careProjectGroup {
  min-height: 360px;
}

.careProjectHead {
  display: grid;
}

.careProjectHead em {
  line-height: 1.45;
}

.careProjectList {
  display: grid;
  gap: 9px;
}

.careProjectList > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
}

.careProjectList strong {
  color: var(--text-strong);
}

.careProjectList span,
.careProjectList em {
  color: var(--text-muted);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.careProjectList p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
  font-size: 13px;
}

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

.careProjectExecutionActionForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.careProjectExecutionItem {
  min-height: 218px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.careProjectExecutionItem.pending {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.careProjectExecutionItem.done {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.careProjectExecutionItem p,
.careProjectExecutionItem em,
.careProjectExecutionItem strong {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  font-style: normal;
}

.recordItem > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

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

.growthCard {
  min-height: 250px;
  padding: 15px;
  display: grid;
  gap: 12px;
}

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

.growthTop > div {
  display: grid;
  gap: 4px;
}

.growthTop b {
  color: var(--text-strong);
  font-size: 24px;
}

.growthCard dl {
  margin: 0;
  display: grid;
  gap: 8px;
}

.growthCard dl div {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
}

.growthCard dt {
  font-weight: 800;
}

.growthCard dd {
  margin: 0;
  color: var(--text-main);
}

.educationItem {
  padding: 13px;
  display: grid;
  gap: 8px;
}

.educationItem > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

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

.leadFocus {
  display: grid;
  gap: 14px;
}

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

.leadFocusStats article,
.leadFocusGrid article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.leadFocusStats article span,
.leadFocusStats article strong,
.leadFocusGrid article span,
.leadFocusGrid article strong {
  display: block;
}

.leadFocusStats article span,
.leadFocusGrid article span,
.leadFocusGrid article em {
  color: var(--text-muted);
}

.leadFocusStats article strong {
  margin-top: 6px;
  font-size: 19px;
}

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

.leadFocusGrid article {
  display: grid;
  gap: 8px;
  align-content: start;
}

.leadFocusGrid article p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

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

.leadCard {
  min-height: 238px;
  padding: 15px;
  display: grid;
  gap: 11px;
}

.leadTop,
.leadFooter,
.advisorTop,
.advisorMeta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.leadTop > div,
.advisorTop > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.leadTop strong,
.advisorTop strong {
  font-size: 17px;
}

.leadTop span,
.leadMeta span,
.leadFooter span,
.leadCard em,
.advisorTop span,
.advisorMeta span,
.flowCard span,
.flowCard p,
.ruleList span,
.integrationList span {
  color: var(--text-muted);
  font-style: normal;
}

.leadTop b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-size: 18px;
}

.leadCard p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.leadMeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  font-size: 13px;
}

.leadCard em {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  padding: 9px 10px;
  font-size: 13px;
}

.secondaryButton {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--field-bg);
  color: var(--text-strong);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
}

.secondaryButton:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.leadStageCard,
.roomOperationCard {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.leadStageList {
  display: grid;
  gap: 7px;
}

.leadStageList em,
.roomOperationCard p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
  font-style: normal;
}

.leadStageList em {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  padding: 8px 9px;
  font-size: 13px;
}

.advisorCard {
  padding: 13px;
  display: grid;
  gap: 10px;
}

.advisorCard.off {
  opacity: 0.68;
}

.advisorMeta {
  font-size: 13px;
}

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

.flowCard {
  min-height: 154px;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.flowCard span {
  width: max-content;
  border-radius: 4px;
  background: var(--field-bg);
  color: var(--text-muted);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
}

.flowCard p,
.ruleList span {
  margin: 0;
  line-height: 1.55;
}

.ruleList article {
  padding: 13px;
  display: grid;
  gap: 5px;
}

.leadAssignmentLogTable {
  --bem-table-columns: minmax(86px, 0.62fr) minmax(118px, 0.82fr) minmax(180px, 1.2fr) minmax(220px, 1.4fr) minmax(92px, 0.66fr);
}

.integrationList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.integrationList span {
  border-radius: 4px;
  background: var(--field-bg);
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 800;
}

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

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

.workbenchOrgCard {
  min-height: 178px;
  padding: 15px;
  display: grid;
  gap: 12px;
  align-content: start;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
}

.workbenchOrgCard p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

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

.roleWorkbenchCard {
  min-height: 360px;
  padding: 15px;
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
}

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

.roleWorkbenchTop strong {
  display: block;
  font-size: 17px;
}

.roleWorkbenchTop span,
.roleWorkbenchCard p,
.roleWorkbenchSection span {
  color: var(--text-muted);
  font-style: normal;
}

.roleWorkbenchTop b {
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-size: 20px;
}

.roleWorkbenchCard p {
  margin: 0;
  line-height: 1.55;
}

.roleWorkbenchSection {
  display: grid;
  gap: 7px;
}

.roleWorkbenchSection > span {
  font-size: 12px;
  font-weight: 900;
}

.roleWorkbenchSection > div,
.roleWorkbenchFooter > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.roleWorkbenchSection em,
.roleWorkbenchFooter span {
  font-style: normal;
  border-radius: 4px;
  background: var(--field-bg);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 9px;
}

.roleWorkbenchSection.risk em {
  background: color-mix(in srgb, var(--bem-status-warning) 14%, var(--bem-surface));
  color: color-mix(in srgb, var(--bem-status-warning) 72%, var(--text-strong));
}

.roleWorkbenchFooter {
  display: grid;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.roleWorkbenchFooter strong {
  color: var(--text-strong);
  line-height: 1.45;
  font-size: 13px;
}

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

.workbenchPriorityQueueActionForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

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

.workbenchPriorityItem {
  min-height: 236px;
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
}

.workbenchPriorityItem.urgent {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.workbenchPriorityItem p,
.workbenchPriorityItem em,
.workbenchPriorityItem strong,
.workbenchPriorityItem b {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  font-style: normal;
}

.workbenchPriorityItem b {
  color: var(--text-strong);
}

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

.workbenchPriorityMeta span {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 7px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.roleTodayCommandDesk {
  display: grid;
  gap: 14px;
}

.roleTodayCommandPrimary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
}

.roleTodayCommandPrimary span,
.roleTodayCommandPrimary p,
.roleTodayCommandCard p,
.roleTodayCommandCard em {
  color: var(--text-muted);
  font-style: normal;
  line-height: 1.45;
}

.roleTodayCommandPrimary strong {
  display: block;
  margin: 5px 0;
  color: var(--text-strong);
  font-size: var(--font-title);
  line-height: 1.15;
}

.roleTodayCommandPrimary p,
.roleTodayCommandCard p {
  margin: 0;
}

.roleTodayCommandGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.roleTodayCommandCard {
  min-height: 208px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
}

.roleTodayCommandCard.current {
  background: var(--field-bg);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}

.roleTodayCommandCard > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.roleTodayCommandCard strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.roleTodayCommandCard em {
  font-size: 13px;
}

.workbenchCard {
  min-height: 270px;
  padding: 15px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.workbenchCard p,
.serviceEntryCard p,
.requestCard p,
.satisfactionItem p,
.warningNotice p,
.blueprintCard p,
.phaseItem p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

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

.workbenchNumbers div,
.standardBox,
.noticeGrid span {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 10px;
}

.workbenchNumbers span,
.standardBox,
.serviceEntryTop span,
.serviceEntryMeta span,
.serviceEntryMeta em,
.requestTop span,
.requestMeta span,
.requestFooter em,
.satisfactionItem span {
  color: var(--text-muted);
  font-style: normal;
}

.workbenchNumbers strong {
  display: block;
  margin-top: 4px;
  font-size: 24px;
  color: var(--text-strong);
}

.staffMinimalView {
  display: grid;
  gap: 18px;
}

.staffNowFocus {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 14px;
  align-items: stretch;
}

.staffNowMain {
  display: grid;
  gap: 8px;
  align-content: center;
}

.staffNowMain span,
.staffNowMain em {
  color: var(--text-muted);
  font-style: normal;
}

.staffNowMain strong {
  color: var(--text-strong);
  font-size: var(--font-title);
  line-height: 1.12;
}

.staffNowMain p {
  margin: 0;
  color: var(--text-main);
  line-height: 1.5;
}

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

.staffNowActions button {
  min-height: 86px;
  display: grid;
  place-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--field-bg);
  color: var(--text-strong);
  font-weight: 800;
}

.staffNowActions button:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.staffNowActions span {
  color: var(--brand-dna);
  font-size: 18px;
}

.staffWorkbenchFrontlineCue {
  display: grid;
  gap: 14px;
}

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

.staffWorkbenchFrontlineCueGrid article {
  min-height: 124px;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.staffWorkbenchFrontlineCueGrid article > div {
  display: grid;
  gap: 6px;
}

.staffWorkbenchFrontlineCueGrid strong {
  color: var(--text-strong);
}

.staffWorkbenchFrontlineCueGrid p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.staffHero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 18px;
  align-items: stretch;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--space-5);
}

.staffHero span,
.staffTodayItem span,
.staffTodayItem em,
.cascadeTrack span {
  color: var(--text-muted);
  font-style: normal;
}

.staffHero h2 {
  margin: 8px 0 10px;
  max-width: 720px;
  color: var(--text-strong);
  font-size: var(--font-title);
  line-height: 1.02;
}

.staffHero p {
  max-width: 760px;
  margin: 0;
  color: var(--text-main);
  line-height: 1.65;
}

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

.staffHeroStats article,
.cascadeTrack article {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 104px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  text-align: center;
}

.staffHeroStats strong {
  color: var(--text-strong);
  font-size: 32px;
}

.staffHeroStats span {
  font-size: 13px;
}

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

.staffTodayItem {
  min-height: 210px;
  display: grid;
  align-content: start;
  gap: 10px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 14px;
}

.staffTodayItem.risk {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 26%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--surface));
}

.staffTodayItem strong,
.staffTodayItem span {
  display: block;
}

.staffTodayItem p {
  margin: 0;
  color: var(--text-main);
  line-height: 1.5;
}

.staffActionGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

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

body.p0ApiShellMode .app,
.app.p0ApiShellMode {
  grid-template-columns: minmax(0, 1fr);
}

body.p0ApiShellMode .main,
.app.p0ApiShellMode .main {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding-inline: var(--space-6);
}

body.staffAppPreviewShell {
  background: var(--app-bg);
}

body.staffAppPreviewShell .app.p0ApiShellMode .main,
body.staffAppPreviewShell.p0ApiShellMode .main {
  min-height: 100svh;
  padding-top: max(var(--space-5), env(safe-area-inset-top));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
  padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
  padding-left: max(var(--space-4), env(safe-area-inset-left));
}

.p0ApiOnlyView {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

.p0ApiShell {
  width: 100%;
}

.p0ApiPanel {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
}

.p0ApiStaffAppIntro {
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)) 0%, var(--surface) 62%),
    var(--surface);
}

.p0ApiStaffAppIntro .panelTitle h2 {
  font-size: var(--font-title);
}

.p0ApiLoginPanel {
  scroll-margin-top: 18px;
}

.p0ApiWorkspaceLayout {
  display: grid;
  grid-template-columns: minmax(220px, 248px) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  min-width: 0;
}

.p0ApiWorkspaceMain {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.p0ApiWorkspaceNav {
  position: sticky;
  top: 12px;
  z-index: 20;
  display: grid;
  gap: 14px;
  min-width: 0;
  min-height: calc(100vh - 96px);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px);
}

.p0ApiWorkspaceBrand,
.p0ApiWorkspaceAccount {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.p0ApiWorkspaceBrand strong {
  color: var(--text-strong);
  font-size: 16px;
}

.p0ApiWorkspaceBrand span,
.p0ApiWorkspaceAccount span,
.p0ApiWorkspaceAccount em {
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
}

.p0ApiWorkspaceAccount {
  padding: 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--field-bg);
}

.p0ApiWorkspaceAccount strong {
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.p0ApiWorkspaceLinks {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.p0ApiWorkspaceLinks a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 38px;
  min-width: 0;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.p0ApiWorkspaceLinks a:hover,
.p0ApiWorkspaceLinks a:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  outline: none;
}

.p0ApiWorkspaceActions {
  align-self: end;
  display: grid;
  gap: 8px;
}

@media (max-width: 720px) {
  body.staffAppPreviewShell .app.p0ApiShellMode .main,
  body.staffAppPreviewShell.p0ApiShellMode .main {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right));
  }

  body.staffAppPreviewShell .p0ApiOnlyView {
    max-width: none;
  }

  body.staffAppPreviewShell .p0ApiShell {
    gap: 10px;
  }

  body.staffAppPreviewShell .p0ApiStaffAppIntro {
    min-height: 132px;
    align-content: end;
  }

  body.staffAppPreviewShell .p0ApiStaffAppIntro .panelTitle h2 {
    font-size: var(--font-title-mobile);
  }

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

  .p0ApiWorkspaceNav {
    position: sticky;
    top: 0;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    border-radius: var(--radius-card);
  }

  .p0ApiWorkspaceBrand,
  .p0ApiWorkspaceAccount,
  .p0ApiWorkspaceActions {
    display: none;
  }

  .p0ApiWorkspaceLinks {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .p0ApiWorkspaceLinks::-webkit-scrollbar {
    display: none;
  }

  .p0ApiWorkspaceLinks a {
    justify-content: center;
    flex: 0 0 auto;
  }
}

.p0ApiBanner {
  gap: 8px;
}

.p0ApiBanner.ok {
  background: color-mix(in srgb, var(--bem-status-success) 8%, var(--surface));
}

.p0ApiBanner.warn {
  background: color-mix(in srgb, var(--bem-status-warning) 10%, var(--surface));
}

.p0ApiBanner.danger {
  background: color-mix(in srgb, var(--bem-status-danger) 10%, var(--surface));
}

.p0ApiBanner p,
.p0ApiEmpty {
  margin: 0;
  color: var(--text-main);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.p0ApiForm,
.p0ApiClientList,
.p0ApiEventList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
  min-width: 0;
}

.p0ApiAccountGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 12px;
}

.p0ApiAccountGrid article {
  min-width: 0;
  display: grid;
  gap: 6px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--field-bg);
  padding: 12px;
}

.p0ApiAccountGrid span {
  color: var(--text-muted);
  font-size: 12px;
}

.p0ApiAccountGrid strong {
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.p0ApiAccountActions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.p0ApiForm .field.span2,
.p0ApiForm button {
  grid-column: 1 / -1;
}

.p0ApiClientList article,
.p0ApiEventList article {
  min-width: 0;
  display: grid;
  gap: 6px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--field-bg);
  padding: 12px;
}

.p0ApiClientList strong,
.p0ApiEventList strong {
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p0ApiClientList span,
.p0ApiClientList em,
.p0ApiEventList p,
.p0ApiEventList em {
  margin: 0;
  color: var(--text-muted);
  font-style: normal;
  overflow-wrap: anywhere;
}

.p0ApiClientFollowupCard {
  align-content: start;
}

.p0ApiFollowupHint {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.p0ApiFollowupHint b {
  color: var(--text-strong);
  font-size: 13px;
}

.p0ApiFollowupHint p,
.p0ApiFollowupHint em {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.p0ApiFollowupAction {
  justify-self: start;
  min-height: 34px;
  padding-inline: 12px;
}

.p0ApiCareTypeHint {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.staffFourActionDeck {
  overflow: visible;
}

.staffFourActionDeck > .panelTitle {
  margin-bottom: 12px;
}

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

.staffActionTabs button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  align-items: center;
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text-strong);
  text-align: left;
  cursor: pointer;
}

.staffActionTabs button span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--brand-dna);
  font-weight: 800;
}

.staffActionTabs button strong,
.staffActionTabs button em {
  min-width: 0;
}

.staffActionTabs button strong {
  font-size: 14px;
}

.staffActionTabs button em {
  color: var(--text-muted);
  font-style: normal;
  font-size: 12px;
}

.staffActionTabs button.active {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow: var(--bem-shadow-panel);
}

.staffActionPanelCompact {
  margin: 0;
}

.staffActionPanelActive {
  display: block;
}

.staffActionPanelHidden {
  display: none;
}

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

.staffScanForm {
  min-height: 0;
}

.staffQuickRecordForm {
  min-height: 0;
}

.staffHandoverForm {
  min-height: 0;
}

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

.performanceFocus {
  overflow: hidden;
}

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

.performanceFocusStats article {
  min-height: 86px;
  display: grid;
  align-content: center;
  gap: 5px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

.performanceFocusStats span,
.performanceFocusGrid span,
.performanceFocusGrid em {
  color: var(--text-muted);
  font-style: normal;
}

.app .performanceFocusStats article > span:first-child,
.app .performanceFocusGrid article > span:first-child {
  display: inline-flex;
  width: fit-content;
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  padding: 0;
  line-height: 1.35;
}

.performanceFocusStats strong {
  color: var(--text-strong);
  font-size: 24px;
}

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

.performanceFocusGrid article {
  min-height: 188px;
  display: grid;
  align-content: start;
  gap: 8px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.performanceFocusGrid strong,
.performanceFocusGrid p {
  margin: 0;
  color: var(--text-strong);
  line-height: 1.45;
}

.performanceFocusGrid p {
  color: var(--text-muted);
  font-size: 13px;
}

.performanceFocusGrid em {
  font-size: 12px;
  line-height: 1.45;
}

.performanceCascade {
  overflow: hidden;
}

.cascadeTrack {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.cascadeTrack article {
  min-height: 88px;
  position: relative;
}

.cascadeTrack article:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -14px;
  color: color-mix(in srgb, var(--accent) 40%, var(--text-muted));
  font-weight: 800;
}

.cascadeTrack strong {
  color: var(--text-strong);
  font-size: 14px;
}

.cascadeMetric {
  align-items: baseline;
  color: var(--text-strong);
  display: flex;
  flex-wrap: wrap;
  font-size: 20px;
  font-weight: 800;
  gap: 4px 6px;
  margin: 8px 0 4px;
}

.cascadeMetric em {
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.cascadeTrack small {
  color: var(--text-muted);
  display: block;
  font-size: 12px;
  line-height: 1.45;
}

.okrAccountabilityGate {
  display: grid;
  gap: 14px;
}

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

.okrAccountabilitySteps article {
  min-height: 150px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 13px;
}

.okrAccountabilitySteps article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.okrAccountabilitySteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.okrAccountabilitySteps p,
.okrAccountabilitySteps em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.customerPortalView {
  display: grid;
  gap: 18px;
}

.customerPortalHero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 18px;
  align-items: stretch;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--space-5);
}

.customerPortalHero span,
.customerPortalHero p,
.customerPortalItem span,
.customerPortalItem p,
.customerPortalFeedback p,
.customerPortalMiniList span,
.customerFinanceGrid span {
  color: var(--text-muted);
}

.customerPortalHero h2 {
  margin: 8px 0 10px;
  max-width: 760px;
  color: var(--text-strong);
  font-size: var(--font-title);
  line-height: 1.05;
}

.customerPortalHero p,
.customerPortalFeedback p {
  margin: 0;
  line-height: 1.65;
}

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

.customerPortalHeroCards article,
.customerFinanceGrid article {
  min-height: 104px;
  display: grid;
  place-items: center;
  gap: 5px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  text-align: center;
}

.customerPortalHeroCards strong,
.customerFinanceGrid strong {
  color: var(--text-strong);
  font-size: 24px;
}

.customerPortalFocus {
  overflow: hidden;
}

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

.customerPortalFocusStats article {
  min-height: 84px;
  display: grid;
  align-content: center;
  gap: 5px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

.customerPortalFocusStats span,
.customerPortalFocusGrid span,
.customerPortalFocusGrid em {
  color: var(--text-muted);
  font-style: normal;
}

.customerPortalFocusStats strong {
  color: var(--text-strong);
  font-size: 24px;
}

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

.customerPortalFocusGrid article {
  min-height: 190px;
  display: grid;
  align-content: start;
  gap: 8px;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.customerPortalFocusGrid strong,
.customerPortalFocusGrid p {
  margin: 0;
  color: var(--text-strong);
  line-height: 1.45;
}

.customerPortalFocusGrid p {
  color: var(--text-main);
  font-size: 13px;
}

.customerPortalFocusGrid em {
  font-size: 12px;
  line-height: 1.45;
}

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

.customerPortalQuickEntryCard {
  min-height: 76px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  align-content: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--field-bg);
  color: var(--text-main);
  padding: 11px;
  text-align: left;
  box-shadow: var(--bem-shadow-panel);
}

.customerPortalAssetIcon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.customerPortalQuickEntryIcon {
  display: inline-grid;
  place-items: center;
}

.customerPortalQuickEntryCopy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.customerPortalQuickEntryCard:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  background: var(--surface);
}

.customerPortalQuickEntryCard em,
.customerPortalSimpleSummary span,
.customerPortalSimpleSummary em {
  color: var(--text-muted);
  font-style: normal;
  font-size: 12px;
}

.customerPortalQuickEntryCard strong,
.customerPortalSimpleSummary strong {
  color: var(--text-strong);
}

.customerPortalTransparencyGate {
  display: grid;
  gap: 14px;
}

.customerPortalSimpleSummary {
  min-height: 74px;
  display: grid;
  gap: 5px;
  list-style: none;
  cursor: pointer;
  padding: 16px;
}

.customerPortalSimpleSummary::-webkit-details-marker {
  display: none;
}

.customerPortalTransparencySteps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 16px 16px;
}

.customerPortalTransparencySteps article {
  min-height: 154px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.customerPortalTransparencySteps article > .customerPortalTransparencyStepIndex {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--brand-dna);
  font-weight: 900;
}

.customerPortalTransparencySteps .status {
  width: fit-content;
  max-width: 100%;
  height: auto;
  white-space: normal;
}

.customerPortalTransparencySteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.customerPortalTransparencySteps p,
.customerPortalTransparencySteps em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

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

.customerPortalDetailsPanel {
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--bem-shadow-panel);
  overflow: hidden;
}

.customerPortalDetailsPanel > summary {
  cursor: pointer;
  min-height: 72px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 10px;
  align-items: center;
  list-style: none;
  padding: 16px;
}

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

.customerPortalDetailsPanel > summary span {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-card);
  display: grid;
  place-items: center;
  background: var(--field-bg);
  color: var(--brand-dna);
  font-weight: 900;
}

.customerPortalDetailsPanel > summary strong,
.customerPortalDetailsPanel > summary em {
  min-width: 0;
  display: block;
}

.customerPortalDetailsPanel > summary strong {
  color: var(--text-strong);
  font-size: 17px;
}

.customerPortalDetailsPanel > summary em {
  grid-column: 2;
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.customerPortalDetailsPanelBody {
  border-top: 1px solid var(--line);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.customerPortalDetailsPanel:not([open]) .customerPortalDetailsPanelBody {
  display: none;
}

.customerPortalDetailsPanel[open] .customerPortalDetailsPanelBody {
  display: grid;
}

.customerPortalList,
.customerPortalMiniList,
.customerFeedbackActions {
  display: grid;
  gap: 10px;
}

.customerPortalFeedbackForm {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.customerPortalFeedbackTiles {
  min-width: 0;
  width: 100%;
  gap: var(--space-2);
}

.customerPortalFeedbackForm > [data-feedback-category-tiles] {
  min-width: 0;
  width: 100%;
  grid-column: 1 / -1;
}

.customerPortalFeedbackTileGrid {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: var(--space-2);
}

.customerPortalFeedbackTileGrid .bemTileSelect {
  min-width: 0;
  width: 100%;
}

.customerPortalFeedbackScoreField {
  min-width: 0;
  width: 100%;
}

.customerPortalFeedbackScoreRow {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 48px;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--field-bg);
}

.customerPortalFeedbackScoreRow strong {
  min-width: 0;
  color: var(--text-strong);
  font-size: var(--font-body);
  line-height: 1.28;
}

.customerPortalFeedbackScoreOptions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.customerPortalFeedbackScoreChip {
  min-width: 38px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bem-surface);
  color: var(--text-main);
  font-size: var(--font-meta);
  font-weight: 800;
  line-height: 1;
  transition: background 200ms ease-in-out, border-color 200ms ease-in-out, color 200ms ease-in-out;
}

.customerPortalFeedbackScoreChip.selected {
  border-color: color-mix(in srgb, var(--brand-dna) 34%, var(--line));
  background: color-mix(in srgb, var(--brand-dna) 12%, var(--bem-surface));
  color: var(--text-strong);
}

.customerPortalItem {
  min-height: 118px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-content: start;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.customerPortalItemIcon {
  grid-row: 1 / 3;
  align-self: start;
  display: inline-grid;
  place-items: center;
  margin-top: 2px;
}

.customerPortalItem strong,
.customerPortalItem span {
  display: block;
}

.customerPortalItem p {
  grid-column: 2 / 4;
  margin: 0;
  line-height: 1.55;
}

.customerFeedbackActions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
}

.financeProgress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.financeProgress > div {
  height: 10px;
  border-radius: 4px;
  background: var(--field-bg);
  overflow: hidden;
}

.financeProgress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary-action);
}

.customerPortalMiniList {
  margin-top: 12px;
}

.customerPortalMiniList span {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  padding: 9px 10px;
  font-size: 13px;
}

.customerPortalFinanceSummaryIcon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--text-muted);
  font-size: var(--font-meta);
  line-height: 1.4;
}

.mobileAppLauncher {
  min-height: calc(100vh - 160px);
  align-content: center;
  gap: 18px;
}

.mobileAppHero {
  display: grid;
  gap: 10px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 22px;
}

.mobileAppHero span,
.mobileAppHero p,
.mobileAppCard span,
.mobileAppCard em {
  color: var(--text-muted);
  font-style: normal;
}

.mobileAppHero h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: var(--font-title-mobile);
  line-height: 1.08;
}

.mobileAppHero p {
  margin: 0;
  line-height: 1.6;
}

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

.mobileAppCard {
  min-height: 190px;
  display: grid;
  gap: 10px;
  align-content: center;
  justify-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  padding: 20px;
  text-align: left;
}

.mobileAppCard.staff {
  background: var(--field-bg);
}

.mobileAppCard.customer {
  background: color-mix(in srgb, var(--accent) 10%, var(--bem-surface));
}

.mobileAppCard strong {
  color: var(--text-strong);
  font-size: 22px;
  line-height: 1.2;
}

.mobileAppCard em {
  line-height: 1.55;
}

.standardBox {
  line-height: 1.55;
  font-size: 13px;
  font-weight: 700;
}

.customerServiceFocus {
  display: grid;
  gap: 14px;
}

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

.serviceFocusStats article,
.serviceFocusGrid article,
.serviceFocusCommandDeck article {
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.serviceFocusStats article span,
.serviceFocusStats article strong,
.serviceFocusGrid article span,
.serviceFocusGrid article strong,
.serviceFocusCommandDeck article span,
.serviceFocusCommandDeck article strong {
  display: block;
}

.serviceFocusStats article span,
.serviceFocusGrid article span,
.serviceFocusGrid article em,
.serviceFocusCommandDeck article span,
.serviceFocusCommandDeck article em {
  color: var(--text-muted);
}

.serviceFocusStats article strong {
  margin-top: 6px;
  font-size: 19px;
}

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

.serviceFocusCommandDeck article {
  min-height: 176px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.serviceFocusCommandDeck article.urgent {
  background: var(--bem-surface);
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 72%, var(--line));
}

.serviceFocusCommandDeck article strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.serviceFocusCommandDeck article p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
}

.compactServiceMetrics {
  margin-top: 12px;
}

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

.serviceFocusGrid article {
  display: grid;
  gap: 8px;
}

.serviceFocusGrid article p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.serviceEntryGrid,
.staffDailyGrid,
.requestGrid,
.slaGrid,
.praiseGrid,
.questionGrid,
.trendGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.serviceEntryCard,
.staffDailyCard,
.requestCard,
.satisfactionItem,
.slaCard,
.praiseCard,
.questionCard,
.trendCard {
  background: var(--bem-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 13px;
  display: grid;
  gap: 9px;
  align-content: start;
}

.serviceEntryTop,
.requestFooter,
.satisfactionItem > div:first-child,
.slaCard > div:first-child,
.praiseTop,
.questionCard > div,
.trendCard > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.serviceEntryMeta {
  display: grid;
  gap: 5px;
  font-size: 13px;
}

.serviceEntryMeta em {
  width: max-content;
  border-radius: 4px;
  background: var(--field-bg);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
}

.satisfactionList {
  grid-template-columns: 1fr;
}

.slaGrid,
.praiseGrid,
.questionGrid {
  display: grid;
  gap: 12px;
}

.trendGrid {
  display: grid;
  gap: 10px;
}

.requestCard {
  min-height: 236px;
}

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

.requestTop > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.requestMeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  font-size: 13px;
}

.requestPlan {
  display: grid;
  gap: 7px;
}

.requestPlan div {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  padding: 9px 10px;
  display: grid;
  gap: 4px;
}

.requestPlan span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}

.requestPlan strong {
  color: var(--text-strong);
  font-size: 13px;
  line-height: 1.45;
}

.slaCard {
  min-height: 148px;
  border-left: 4px solid color-mix(in srgb, var(--accent) 54%, var(--line));
}

.slaCard.danger {
  background: var(--bem-surface);
  border-left-color: var(--bem-status-danger);
}

.slaCard.warn {
  background: var(--bem-surface);
  border-left-color: var(--bem-status-warning);
}

.slaCard.info {
  background: var(--bem-surface);
  border-left-color: var(--bem-status-info);
}

.slaCard p,
.praiseCard p,
.questionCard li,
.trendCard p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.slaCard span,
.slaCard em,
.praiseTop span,
.praiseMeta span,
.praiseCard em,
.questionCard span,
.trendCard span {
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.praiseCard {
  min-height: 178px;
}

.praiseMeta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.praiseMeta span {
  border-radius: 4px;
  background: var(--field-bg);
  padding: 5px 8px;
}

.questionCard ul {
  margin: 0;
  padding-left: 17px;
  display: grid;
  gap: 5px;
}

.trendCard {
  gap: 8px;
}

.trendCard strong {
  font-size: 14px;
}

.trendBar {
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--field-bg);
}

.trendBar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary-action);
}

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

.serviceFlow article {
  min-height: 98px;
  padding: 13px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.serviceFlow span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: color-mix(in srgb, var(--bem-status-warning) 14%, var(--bem-surface));
  color: color-mix(in srgb, var(--bem-status-warning) 72%, var(--text-strong));
  font-weight: 900;
}

.warningNotice {
  padding: 16px;
  display: grid;
  gap: 12px;
}

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

.blueprintFocus {
  overflow: hidden;
}

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

.blueprintFocusStats article {
  min-height: 84px;
  display: grid;
  align-content: center;
  gap: 5px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

.blueprintFocusStats span,
.blueprintFocusGrid span,
.blueprintFocusGrid em {
  color: var(--text-muted);
  font-style: normal;
}

.blueprintFocusStats strong {
  color: var(--text-strong);
  font-size: 24px;
}

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

.blueprintFocusGrid article {
  min-height: 198px;
  display: grid;
  align-content: start;
  gap: 8px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.blueprintFocusGrid strong,
.blueprintFocusGrid p {
  margin: 0;
  color: var(--text-strong);
  line-height: 1.45;
}

.blueprintFocusGrid p {
  color: var(--text-muted);
  font-size: 13px;
}

.blueprintFocusGrid em {
  font-size: 12px;
  line-height: 1.45;
}

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

.blueprintCard {
  min-height: 292px;
  padding: 15px;
  display: grid;
  gap: 11px;
  align-content: start;
}

.blueprintCard > span,
.blueprintOwner,
.phaseItem span,
.phaseItem em {
  color: var(--text-muted);
  font-style: normal;
}

.blueprintCard > span {
  font-size: 13px;
  line-height: 1.45;
}

.blueprintOwner {
  margin-top: auto;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 800;
}

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

.phaseItem {
  min-height: 172px;
  padding: 14px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.phaseItem > div {
  display: grid;
  gap: 4px;
}

.phaseItem strong {
  font-size: 17px;
}

.phaseItem em {
  border-radius: var(--radius-card);
  background: var(--field-bg);
  padding: 9px 10px;
  line-height: 1.5;
  font-size: 13px;
  font-weight: 800;
}

.auditCommandFocus {
  overflow: hidden;
}

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

.auditCommandFocusStats article {
  min-height: 84px;
  display: grid;
  align-content: center;
  gap: 5px;
  border-radius: var(--radius-card);
  background: var(--field-bg);
  border: 1px solid var(--line);
  padding: 12px;
}

.auditCommandFocusStats span,
.auditCommandFocusGrid span,
.auditCommandFocusGrid em {
  color: var(--text-muted);
  font-style: normal;
}

.auditCommandFocusStats strong {
  color: var(--text-strong);
  font-size: 24px;
}

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

.auditCommandFocusGrid article {
  min-height: 206px;
  display: grid;
  align-content: start;
  gap: 8px;
  border-radius: var(--radius-card);
  background: var(--bem-surface);
  border: 1px solid var(--line);
  padding: 13px;
}

.auditCommandFocusGrid strong,
.auditCommandFocusGrid p {
  margin: 0;
  color: var(--text-strong);
  line-height: 1.45;
}

.auditCommandFocusGrid p {
  color: var(--text-muted);
  font-size: 13px;
}

.auditCommandFocusGrid em {
  font-size: 12px;
  line-height: 1.45;
}

.auditQualityGate {
  display: grid;
  gap: 14px;
}

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

.auditQualitySteps article {
  min-height: 158px;
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bem-surface);
  padding: 13px;
}

.auditQualitySteps article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  font-weight: 900;
}

.auditQualitySteps strong {
  color: var(--text-strong);
  line-height: 1.25;
}

.auditQualitySteps p,
.auditQualitySteps em {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

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

.auditCard {
  min-height: 520px;
  padding: 15px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.auditHead,
.auditFocus > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.auditHead > div,
.auditFocus > div:first-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.auditHead strong,
.auditFocus strong {
  font-size: 17px;
}

.auditHead span,
.auditScore span,
.auditCard dt,
.auditCard dd,
.auditSection span,
.auditFocus span,
.auditFocus em {
  color: var(--text-muted);
  font-style: normal;
}

.auditScore {
  display: grid;
  gap: 8px;
}

.auditScore strong {
  font-size: 26px;
  color: var(--bem-status-success);
}

.auditCard dl {
  margin: 0;
  display: grid;
  gap: 9px;
}

.auditCard dl div {
  display: grid;
  gap: 5px;
}

.auditCard dt,
.auditSection span {
  font-size: 13px;
  font-weight: 900;
}

.auditCard dd {
  margin: 0;
  line-height: 1.55;
}

.auditSection {
  display: grid;
  gap: 8px;
}

.auditSection ol {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: var(--text-main);
  line-height: 1.45;
}

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

.auditFocus {
  min-height: 128px;
  padding: 14px;
  display: grid;
  gap: 9px;
}

.auditFocus p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.auditFocus em {
  width: max-content;
  border-radius: 4px;
  background: var(--field-bg);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 1080px) {
  .app {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .brand div:last-child,
  .portalButton span,
  .activeStaffSwitch span,
  .activeStaffSwitch em,
  .shellRoleHint,
  .shellRoleButton span,
  .navButton > span:not(.lineIcon),
  .sidePanel div {
    display: none;
  }

  .activeStaffSwitch {
    display: none;
  }

  .sidebar {
    align-items: center;
    padding-inline: 14px;
  }

  .navButton {
    width: 48px;
    justify-content: center;
    padding: 0;
    overflow: hidden;
  }

  .navButton .lineIcon {
    width: 24px;
    min-width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .navButton .lineIcon .bem-icon-mask,
  .navButton .lineIcon .bemIcon {
    width: 24px;
    min-width: 24px;
    height: 24px;
  }

  .portalSwitch {
    padding: 6px;
    width: 58px;
  }

  .portalButton {
    min-height: 34px;
    padding: 0;
    text-align: center;
  }

  .shellRoleSwitch {
    padding: 6px;
    width: 58px;
  }

  .shellRoleButtons {
    grid-template-columns: 1fr;
  }

  .shellRoleButton {
    min-height: 34px;
    padding: 0;
    text-align: center;
  }

  .shellRoleButton strong {
    font-size: 10px;
    line-height: 1.15;
  }

  .sidePanel {
    padding: 12px;
  }

  .metricGrid,
  .roomGrid,
  .roomFocusStats,
  .roomFocusGrid,
  .inventoryFocusStats,
  .inventoryFocusGrid,
  .dashboardFocusStats,
  .dashboardFocusGrid,
  .storeGrid,
  .orgFocusStats,
  .orgFocusGrid,
  .orgBranches,
  .roleGrid,
  .okrGrid,
  .pathwayGrid,
  .growthGrid,
  .leadList,
  .leadStageGrid,
  .wecomFlow,
  .clientModuleGrid,
  .clientLifecycle,
  .clientStageActionGrid,
  .globalClientContextBar,
  .clientServiceTeamGrid,
  .clientRoleVisibilityGrid,
  .clientScanGrid,
  .scanWorkflowGrid,
  .scanTaskAcceptanceSummary,
  .clientCrossDepartmentGrid,
  .storeMeetingCommandGrid,
  .clientEntitlementCommandGrid,
  .clientTaskExceptionEscalationForm,
  .clientTaskExceptionEscalationGrid,
  .clientOwnerInspectionForm,
  .clientOwnerInspectionGrid,
  .approvalPerformanceLinkForm,
  .approvalPerformanceLinkGrid,
  .approvalActionQuickGrid,
  .approvalUnifiedQuickGrid,
  .approvalCustomerImpactGrid,
  .approvalWritebackAcceptanceGrid,
  .approvalQuickClosureStats,
  .approvalQuickClosureSteps,
  .approvalImpactFirstScreenGrid,
  .storeManagerCommandForm,
  .storeManagerCommandGrid,
  .clientTimeline,
  .completenessGrid,
  .clientDetailBriefGrid,
  .clientTodoGrid,
  .client360Grid,
  .clientServiceJourneyGrid,
  .clientTaskActionForm,
  .clientTaskSummary,
  .clientTaskGrid,
  .clientDailyClearanceForm,
  .clientDailyClearanceGrid,
  .clientOnSiteExecutionGrid,
  .clientMealPreferenceGrid,
  .clientRecoveryLoopGrid,
  .clientNannyLoopGrid,
  .clientEducationLoopGrid,
  .clientRoomTransferLoopGrid,
  .clientFinanceTransparencyGrid,
  .clientRiskRadarGrid,
  .lifeServiceFrontlineGrid,
  .lifeServiceLightModelGrid,
  .onSiteQuickRecordStats,
  .onSiteQuickRecordSteps,
  .frontlineFirstScreenGrid,
  .unifiedOnSiteQuickRecordGrid,
  .clientEntitlementGrid,
  .clientEntitlementFulfillmentForm,
  .unifiedOnSiteQuickActionForm,
  .unifiedOnSiteQuickActionMoreBody,
  .lifeServiceFulfillmentForm,
  .lifeServiceFulfillmentMoreBody,
  .clientDailyPlanForm,
  .clientOnSiteExecutionForm,
  .clientMealPreferenceForm,
  .clientRecoveryLoopForm,
  .clientNannyLoopForm,
  .clientEducationLoopForm,
  .clientRoomTransferLoopForm,
  .clientFinanceTransparencyLoopForm,
  .clientDailyPlanGrid,
  .clientServiceLedgerGrid,
  .clientDailyClearanceForm,
  .clientDailyClearanceGrid,
  .clientScanPermissionGrid,
  .approvalImpactGrid,
  .dailyCommandMeta,
  .dailyCommandGrid,
  .onSiteServiceClosureGrid,
  .serviceReviewGrid,
  .staffPerformanceGrid,
  .rolePermissionCommandGrid,
  .roleAccountabilityGrid,
  .roleAccountabilityActionForm,
  .roleTodayCommandGrid,
  .staffServiceCoverageForm,
  .staffServiceCoverageGrid,
  .clientTabGrid,
  .journeyGrid,
  .staffGrid,
  .staffManagementFocusStats,
  .staffManagementFocusGrid,
  .knowledgeFocusStats,
  .knowledgeFocusGrid,
  .trainingFocusStats,
  .trainingFocusGrid,
  .dataImportFocusStats,
  .dataImportFocusGrid,
  .workbenchGrid,
  .workbenchOrgGrid,
  .roleWorkbenchGrid,
	  .staffNowFocus,
	  .staffNowActions,
  .staffWorkbenchFrontlineCueGrid,
	  .staffHero,
  .staffPersonalCenterLayout,
  .staffPersonalCenterGrid,
  .staffActionGrid,
  .staffTodayList,
  .staffFourActionDeck,
  .performanceFocusStats,
  .performanceFocusGrid,
  .cascadeTrack,
  .customerPortalHero,
  .customerPortalGrid,
  .customerPortalHeroCards,
  .customerPortalFocusStats,
  .customerPortalFocusGrid,
  .clientUnderNameCommandGrid,
  .clientFirstScreenActionStripGrid,
  .client360FirstScreenStats,
  .client360FirstScreenSteps,
  .clientServiceEventClosureStats,
  .clientServiceEventClosureSteps,
  .customerPortalTransparencySteps,
  .mobileAppGrid,
  .blueprintFocusStats,
  .blueprintFocusGrid,
  .blueprintGrid,
  .auditCommandFocusStats,
  .auditCommandFocusGrid,
  .auditGrid,
  .auditFocusList,
  .serviceEntryGrid,
  .staffDailyGrid,
  .dailySummaryGrid,
  .permissionMetricGrid,
  .staffPermissionGrid,
  .staffDeviceGrid,
  .operationLogGrid,
  .attendanceMetricGrid,
  .attendanceRuleGrid,
  .attendanceGrid,
  .reminderMetricGrid,
  .reminderGrid,
  .requestGrid,
  .slaGrid,
  .praiseGrid,
  .questionGrid,
  .trendGrid,
  .roomOperationGrid,
  .roomCalendarGrid,
  .noticeGrid,
  .phaseList,
  .packageGrid,
  .approvalGrid,
  .approvalCenterGrid,
  .approvalCenterFlow,
  .collaborationGrid,
  .collaborationFocusStats,
  .collaborationFocusGrid,
  .clientHandoverAcceptanceForm,
  .clientHandoverAcceptanceGrid,
  .scanServiceArchiveQualityForm,
  .scanServiceArchiveQualityGrid,
  .approvalPerformanceLinkForm,
  .approvalPerformanceLinkGrid,
  .leadFastActionStats,
  .leadFastActionSteps,
  .leadCommandGrid,
  .leadCommandPrimary,
  .wecomLeadNotificationGrid,
  .leadControlGrid,
  .leadFocusStats,
  .leadFocusGrid,
  .careProjectGrid,
  .businessGrid,
  .clientRiskRadarGrid,
  .clientEntitlementGrid,
  .clientEntitlementFulfillmentForm,
  .unifiedOnSiteQuickActionForm,
  .unifiedOnSiteQuickActionMoreBody,
  .clientDailyPlanForm,
  .clientOnSiteExecutionForm,
  .clientMealPreferenceForm,
  .clientRecoveryLoopForm,
  .clientNannyLoopForm,
  .clientEducationLoopForm,
  .clientRoomTransferLoopForm,
  .clientFinanceTransparencyLoopForm,
  .clientHandoverAcceptanceForm,
  .scanServiceArchiveQualityForm,
  .clientOnSiteExecutionGrid,
  .clientMealPreferenceGrid,
  .clientRecoveryLoopGrid,
  .clientNannyLoopGrid,
  .clientEducationLoopGrid,
  .clientRoomTransferLoopGrid,
  .clientFinanceTransparencyGrid,
  .clientHandoverAcceptanceGrid,
  .scanServiceArchiveQualityGrid,
  .unifiedOnSiteQuickRecordGrid,
  .clientDailyPlanGrid,
  .dailyCommandMeta,
  .dailyCommandGrid,
  .onSiteServiceClosureGrid,
  .serviceReviewGrid,
  .staffPerformanceGrid,
  .rolePermissionCommandGrid,
  .roleAccountabilityGrid,
  .roleAccountabilityActionForm,
  .clientTaskExceptionEscalationForm,
  .clientTaskExceptionEscalationGrid,
  .financeAlertGrid,
  .financeClientAccountClosureStats,
  .financeClientAccountClosureSteps,
  .lifeServiceUnifiedClosureStats,
  .lifeServiceUnifiedClosureSteps,
  .serviceFocusStats,
  .serviceFocusGrid,
  .dailyReportGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .carePlanList {
    grid-template-columns: 1fr;
  }

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

  .clientDetail {
    grid-template-columns: 1fr;
  }

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

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

  .dashboardGrid,
  .twoColumn {
    grid-template-columns: 1fr;
  }

  .searchBox {
    width: min(240px, 28vw);
  }
}

@media (max-width: 860px) {
  .leadCommandGrid {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .leadCommandCard {
    min-width: 220px;
    min-height: 156px;
    scroll-snap-align: start;
  }
}

@media (max-width: 720px) {
  .app {
    display: block;
  }

  .sidebar {
    position: static;
    height: auto;
    width: 100%;
    max-width: 100vw;
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding: 6px 8px;
  }

  .brand,
  .sidePanel {
    display: none;
  }

  nav {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1 0 auto;
    min-height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 0;
    gap: 5px;
  }

  .activeStaffSwitch {
    min-width: 132px;
    flex: 0 0 auto;
    display: flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  border-radius: var(--radius-card);
}

  .activeStaffSwitch label {
    display: block;
    width: 100%;
  }

  .activeStaffSwitch span,
  .activeStaffSwitch em {
    display: none;
  }

  .activeStaffSelect {
    min-height: 32px;
    border-radius: var(--radius-card);
    padding: 0 24px 0 9px;
    font-size: 12px;
  }

  .shellRoleSwitch {
    width: auto;
  min-width: 116px;
  flex: 0 0 auto;
  padding: 4px;
  border-radius: var(--radius-card);
}

  .portalSwitch {
    display: flex;
    width: auto;
  min-width: 108px;
  flex: 0 0 auto;
  padding: 4px;
  border-radius: var(--radius-card);
}

  .portalButton {
    width: 50px;
    min-height: 32px;
    border-radius: var(--radius-card);
    padding: 0 7px;
    text-align: center;
  }

  .shellRoleHint {
    display: none;
  }

  .shellRoleButtons {
    display: flex;
    gap: 4px;
  }

  .shellRoleButton {
    width: 50px;
    min-height: 32px;
    border-radius: var(--radius-card);
    padding: 0 7px;
    text-align: center;
  }

  .navList {
    display: flex;
    gap: 5px;
    max-width: 100%;
    flex: 0 0 auto;
  }

  .navButton {
    width: 40px;
    min-width: 40px;
    min-height: 32px;
    flex: 0 0 auto;
    padding: 0 8px;
    justify-content: center;
    gap: 0;
    border-radius: var(--radius-card);
  }

  .navButton span:not(.lineIcon),
  .portalButton span,
  .shellRoleButton span {
    display: none;
  }

  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
  }

  .topbar p {
    display: none;
  }

  .topbar h1 {
    font-size: 18px;
    max-width: 7em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topActions {
    width: 100%;
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
    gap: 5px;
    overflow-x: auto;
  }

  .searchBox {
    flex: 1 1 112px;
    min-width: 104px;
    height: 32px;
    min-height: 32px;
    padding: 0 9px;
    border-radius: var(--radius-card);
  }

  .topActions .primaryButton,
  .topActions .topSoftButton {
    width: auto;
    height: 32px;
    min-height: 32px;
    flex: 0 0 auto;
    padding: 0 9px;
    border-radius: var(--radius-card);
    gap: 0;
    font-size: 12px;
  }

  .topActions .primaryButton span,
  .topActions .topSoftButton span {
    margin-right: 0;
  }

  .iconButton {
    display: none;
  }

  .metricGrid,
  .roomGrid,
  .roomFocusStats,
  .roomFocusGrid,
  .inventoryFocusStats,
  .inventoryFocusGrid,
  .dashboardFocusStats,
  .dashboardFocusGrid,
  .storeGrid,
  .orgFocusStats,
  .orgFocusGrid,
  .orgBranches,
  .roleGrid,
  .okrGrid,
  .pathwayGrid,
  .growthGrid,
  .leadList,
  .wecomFlow,
  .clientModuleGrid,
  .clientLifecycle,
  .clientStageActionGrid,
  .globalClientContextBar,
  .globalClientContextMeta,
  .clientRoleScopeBar,
  .clientServiceTeamGrid,
  .clientRoleVisibilityGrid,
  .clientScanGrid,
  .clientCrossDepartmentGrid,
  .storeMeetingCommandGrid,
  .clientEntitlementCommandGrid,
  .clientTaskExceptionEscalationForm,
  .clientTaskExceptionEscalationGrid,
  .clientOwnerInspectionForm,
  .clientOwnerInspectionGrid,
  .approvalPerformanceLinkForm,
  .approvalPerformanceLinkGrid,
  .approvalQuickClosureStats,
  .approvalQuickClosureSteps,
  .approvalImpactFirstScreenGrid,
  .storeManagerCommandForm,
  .storeManagerCommandGrid,
  .clientTimeline,
  .profileGrid,
  .completenessGrid,
  .clientApprovalLedgerStats,
  .clientApprovalLedgerGrid,
  .clientServiceLedgerGrid,
  .clientScanPermissionGrid,
  .approvalImpactGrid,
  .clientTodoGrid,
  .client360Grid,
  .clientServiceJourneyGrid,
  .clientTaskActionForm,
  .clientTaskSummary,
  .clientTaskGrid,
  .clientNannyLoopGrid,
  .clientEducationLoopGrid,
  .clientRoomTransferLoopGrid,
  .clientFinanceTransparencyGrid,
  .lifeServiceFrontlineGrid,
  .lifeServiceLightModelGrid,
  .onSiteQuickRecordStats,
  .onSiteQuickRecordSteps,
  .frontlineFirstScreenGrid,
  .unifiedOnSiteQuickRecordGrid,
  .clientTabGrid,
  .clientFirstScreenActionStripGrid,
  .journeyGrid,
  .staffGrid,
  .staffManagementFocusStats,
  .staffManagementFocusGrid,
  .knowledgeFocusStats,
  .knowledgeFocusGrid,
  .trainingFocusStats,
  .trainingFocusGrid,
  .dataImportFocusStats,
  .dataImportFocusGrid,
  .staffPerformanceGrid,
  .rolePermissionCommandGrid,
  .roleAccountabilityGrid,
  .staffServiceCoverageForm,
  .staffServiceCoverageGrid,
  .clientStageForm,
  .leadForm,
  .clientProfileUpdateForm,
  .clientFilterForm,
  .clientExperienceForm,
  .clientContractForm,
  .staffForm,
  .staffPermissionForm,
  .staffDeviceForm,
  .staffScheduleForm,
  .attendanceRecordForm,
  .reminderActionForm,
  .serviceEntryForm,
  .serviceRequestForm,
  .praiseForm,
  .roomOperationForm,
  .careRecordForm,
  .motherAssessmentForm,
  .babyAssessmentForm,
  .shiftHandoverForm,
  .careDailyForm,
  .paymentForm,
  .financeFlowForm,
  .financeMiniForm,
  .financeUnifiedAccountActionForm,
  .financeUnifiedAccountActionMoreBody,
  .lifeServiceFulfillmentForm,
  .lifeServiceFulfillmentMoreBody,
  .businessForm,
  .scanTaskAcceptanceSummary,
  .roleAccountabilityActionForm,
  .clientOwnerInspectionForm,
  .clientNannyLoopForm,
  .clientEducationLoopForm,
  .clientRoomTransferLoopForm,
  .clientFinanceTransparencyLoopForm,
  .approvalForm,
  .workbenchGrid,
  .workbenchOrgGrid,
  .roleWorkbenchGrid,
  .staffHero,
  .staffHeroStats,
  .staffDailyCommandGrid,
  .workbenchTodayActionSteps,
  .staffWorkbenchFrontlineCueGrid,
  .staffActionGrid,
  .staffTodayList,
  .staffFourActionDeck,
  .staffScanForm,
  .staffQuickRecordForm,
  .staffHandoverForm,
  .staffExceptionForm,
  .performanceFocusStats,
  .performanceFocusGrid,
  .cascadeTrack,
  .customerPortalHero,
  .customerPortalHeroCards,
  .customerPortalGrid,
  .customerPortalFocusStats,
  .customerPortalFocusGrid,
  .clientUnderNameCommandGrid,
  .client360FirstScreenStats,
  .client360FirstScreenSteps,
  .clientServiceEventClosureStats,
  .clientServiceEventClosureSteps,
  .customerPortalTransparencySteps,
  .customerFinanceGrid,
  .customerFeedbackActions,
  .mobileAppGrid,
  .blueprintFocusStats,
  .blueprintFocusGrid,
  .blueprintGrid,
  .auditCommandFocusStats,
  .auditCommandFocusGrid,
  .auditGrid,
  .auditFocusList,
  .serviceEntryGrid,
  .staffDailyGrid,
  .dailySummaryGrid,
  .permissionMetricGrid,
  .staffPermissionGrid,
  .staffDeviceGrid,
  .operationLogGrid,
  .attendanceMetricGrid,
  .attendanceRuleGrid,
  .attendanceGrid,
  .reminderMetricGrid,
  .reminderGrid,
  .requestGrid,
  .slaGrid,
  .praiseGrid,
  .questionGrid,
  .trendGrid,
  .leadStageGrid,
  .leadFocusStats,
  .leadFocusGrid,
  .roomOperationGrid,
  .roomCalendarGrid,
  .noticeGrid,
  .serviceFlow,
  .phaseList,
  .packageGrid,
  .approvalGrid,
  .approvalCenterGrid,
  .approvalCenterFlow,
  .collaborationGrid,
  .collaborationFocusStats,
  .collaborationFocusGrid,
  .approvalPerformanceLinkForm,
  .approvalPerformanceLinkGrid,
  .approvalActionQuickGrid,
  .approvalUnifiedQuickGrid,
  .approvalUnifiedMeta,
  .approvalCustomerImpactGrid,
  .approvalWritebackAcceptanceGrid,
  .clientTaskExceptionEscalationForm,
  .clientTaskExceptionEscalationGrid,
  .clientOwnerInspectionForm,
  .clientOwnerInspectionGrid,
  .clientDetailBriefGrid,
  .leadControlGrid,
  .careProjectGrid,
  .businessGrid,
  .financeAlertGrid,
  .financeClientAccountClosureStats,
  .financeClientAccountClosureSteps,
  .lifeServiceUnifiedClosureStats,
  .lifeServiceUnifiedClosureSteps,
  .roleTodayCommandPrimary,
  .dailyReportGrid {
    grid-template-columns: 1fr;
  }

  .staffHero {
    display: none;
  }

  .staffNowFocus {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 9px;
  }

  .staffNowMain {
    gap: 6px;
  }

  .staffNowMain .staffNowClient {
    font-size: 20px;
  }

  .staffNowActionHint {
    font-size: 12px;
  }

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

  .staffNowActions button {
    min-height: 48px;
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: start;
    padding: 0 10px;
  }

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

  .staffWorkbenchFrontlineCue {
    display: none;
  }

  .staffFourActionDeck {
    margin-top: 0;
  }

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

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

  .lifeServiceFrontlineGrid,
  .lifeServiceLightModelGrid,
  .approvalWritebackAcceptanceGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .workbenchTodayActionSteps {
    grid-template-columns: 1fr;
  }

  .leadClientConversionSteps {
    grid-template-columns: 1fr;
  }

  .leadFastActionStats,
  .leadFastActionSteps {
    grid-template-columns: 1fr;
  }

  .wecomLeadNotificationGrid {
    grid-template-columns: 1fr;
  }

  .roomStayTransferSteps {
    grid-template-columns: 1fr;
  }

  .roomCheckinTransferSteps {
    grid-template-columns: 1fr;
  }

  .inventoryServiceSteps {
    grid-template-columns: 1fr;
  }

  .dataImportMigrationSteps {
    grid-template-columns: 1fr;
  }

  .managementAreaSteps {
    grid-template-columns: 1fr;
  }

  .executiveOperatingSteps {
    grid-template-columns: 1fr;
  }

  .auditQualitySteps {
    grid-template-columns: 1fr;
  }

  .okrAccountabilitySteps {
    grid-template-columns: 1fr;
  }

  .orgPermissionOnboardingSteps {
    grid-template-columns: 1fr;
  }

  .collaborationHandoverSteps {
    grid-template-columns: 1fr;
  }

  .knowledgeTrainingReadinessSteps {
    grid-template-columns: 1fr;
  }

  .customerPortalHero {
    padding: 14px;
  }

  .customerPortalHeroCards {
    display: none;
  }

  .customerPortalFocusStats {
    display: none;
  }

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

  .customerPortalQuickEntryCard {
    min-height: 56px;
  }

  .customerPortalQuickEntryCopy em {
    display: none;
  }

  .customerPortalFeedbackTileGrid {
    grid-template-columns: 1fr;
  }

  .customerPortalFeedbackScoreRow {
    grid-template-columns: 1fr;
  }

  .customerPortalFeedbackScoreOptions {
    justify-content: flex-start;
  }

  .customerPortalFocusGrid article,
  .customerPortalTransparencySteps article,
  .customerPortalItem {
    min-height: auto;
  }

  .mobileAppLauncher {
    min-height: auto;
    align-content: start;
  }

  .mobileAppHero,
  .mobileAppCard {
    padding: 18px;
  }

  .cascadeTrack article:not(:last-child)::after {
    content: "";
  }

  .task {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .taskKind {
    grid-column: 2;
    width: max-content;
  }

  .clientMeta,
  .requestMeta,
  .tableHead,
  .tableRow {
    grid-template-columns: 1fr;
  }

  .tableHead {
    display: none;
  }

  .barItem {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .barItem strong {
    text-align: left;
  }

  .carePlanItem {
    grid-template-columns: 1fr;
  }

  .leadMeta {
    grid-template-columns: 1fr;
  }

  .profileHero {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .profileHero .status {
    grid-column: 2;
    width: max-content;
  }

  .staffTop {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .staffTop .status {
    grid-column: 2;
    width: max-content;
  }

  .staffMeta {
    grid-template-columns: 1fr;
  }

  .clientFocusStats {
    grid-template-columns: 1fr;
  }

  .serviceFocusGrid {
    grid-template-columns: 1fr;
  }

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

  .serviceFocusStats article {
    min-height: auto;
    padding: 10px;
  }

  .serviceFocusCommandDeck {
    grid-template-columns: 1fr;
  }

  .serviceFocusCommandDeck article {
    min-height: auto;
  }
}

@media (max-width: 720px) {
  .main {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  .content {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  .panel {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .approvalUnifiedMeta,
  .orgBranches,
  .dataImportValidationTable,
  .table,
  .financeTable {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Apple 式全局排版系统移动端规则：放在最终覆盖层之前，避免破坏旧模块覆盖顺序。 */
@media (max-width: 720px) {
  .app {
    --apple-panel-padding: var(--space-3);
    --apple-section-font: 16px;
    --apple-field-height: 36px;
  }

  .app .panel {
    padding: var(--apple-panel-padding);
  }

  .app .topbar h1 {
    font-size: var(--font-title-mobile);
  }

  .app .panelTitle {
    margin-bottom: var(--space-2);
    align-items: flex-start;
  }

  .app .panelTitle h2 {
    font-size: var(--apple-section-font);
  }

  .app .panelTitleAction {
    height: auto;
    min-height: 32px;
    max-width: min(100%, 28ch);
    justify-content: flex-start;
    white-space: normal;
    line-height: 1.35;
    text-align: left;
    padding-block: 6px;
  }

  .app input,
  .app select,
  .app textarea {
    min-height: var(--apple-field-height);
  }

  .app input,
  .app select,
  .app textarea,
  .app .searchBox {
    min-height: var(--apple-control-height-mobile);
  }

  .customerPortalAppleHero {
    padding: 12px;
  }

  .customerPortalAppleHero h2 {
    font-size: 20px;
    line-height: 1.18;
  }

  .customerPortalAppleFocusGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .customerPortalAppleFocusGrid article {
    min-height: 96px;
    padding: 10px;
  }

  .staffAppleNowFocus {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .staffAppleNowFocus .staffNowActions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staffAppleNowFocus .staffNowActions button {
    min-height: 44px;
    padding: 0 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --apple-focus-ring: 0 0 0 2px var(--bem-accent);
    --bem-focus-ring: 0 0 0 2px var(--bem-accent);
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 主体新 UI 最终覆盖层：压住模块旧暖黄/旧绿残留，只统一视觉，不改布局。 */
.managementHomeFocusGrid article,
.managementAreaSteps article,
.staffDailyCommandGrid article,
.staffPersonalCenterGrid article,
.staffSalaryPreview,
.storeManagerCommandCenter,
.storeManagerCommandItem,
.permissionCommandStats span,
.permissionCommandStats strong,
.dailyCommandMeta > div,
.dailyCommandMeta span,
.dailyCommandItem,
.staffPerformanceCard,
.roleAccountabilityItem,
.roleTodayCommandPrimary,
.roleTodayCommandCard,
.workbenchTodayActionSteps article,
.leadClientConversionSteps article,
.leadFastActionStats article,
.leadFastActionSteps article,
.leadCommandPrimary,
.leadCommandCard,
.globalClientContextBar,
.globalModelStep,
.clientFocusSummary,
.clientFocusStats article,
.clientUnderNameCommandDesk,
.clientUnderNameCommandGrid article,
.client360FirstScreenStats article,
.client360FirstScreenSteps article,
.clientServiceEventClosureStats article,
.clientServiceEventClosureSteps article,
.clientFirstScreenActionStripGrid article,
.clientCommandTodoPreview,
.clientCommandTodoPrimary,
.clientBackstageDetails,
.clientMaintenanceSectionDetails,
.clientCreateMoreDetails,
.staffCreateMoreDetails,
.staffHero,
.leadCreateMoreDetails,
.wecomLeadMoreDetails,
.leadFollowMoreDetails,
.careFocusStats article,
.careFocusGrid article,
.frontlineFirstScreenGrid article,
.frontlineLightModelGrid article,
.mealFocusStats article,
.mealFocusGrid article,
.recoveryFocusStats article,
.recoveryFocusGrid article,
.nannyFocusStats article,
.nannyFocusGrid article,
.lifeServiceFrontlineGrid article,
.lifeServiceLightModelGrid article,
.financeFocusStats article,
.financeFocusGrid article,
.financeClientAccountClosureStats article,
.financeClientAccountClosureSteps article,
.financeUnifiedAccountActionMore,
.financeLightAccountModelGrid article,
.inventoryFocusStats article,
.inventoryFocusGrid article,
.roomFocusStats article,
.roomFocusGrid article,
.roomStayTransferSteps article,
.roomCheckinTransferSteps article,
.roomVerticalBlock,
.roomVerticalTable,
.roomVerticalStoreTitle,
.roomVerticalHead span,
.roomVerticalHead em,
.roomVerticalRow > strong,
.roomDay,
.roomCalendarEvent,
.roomConflictCard,
.roomOperationCard,
.roomCard,
.clientFocusQueueGrid article,
.clientCard,
.currentClientStrip,
.clientQuickAction,
.approvalRuleBox,
.approvalFlow,
.customerPortalHero,
.customerPortalHeroCards article,
.customerPortalFocusStats article,
.customerPortalFocusGrid article,
.customerPortalTransparencySteps article,
.customerPortalDetailsPanel,
.customerPortalItem,
.customerPortalFeedbackForm,
.customerPortalGrid > * {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--apple-card-shadow);
}

.leadCommandCard.current,
.clientFocusQueueGrid article.active,
.clientCard.active {
  background: linear-gradient(180deg, var(--bem-surface) 0%, color-mix(in srgb, var(--bem-status-warning) 10%, var(--bem-surface)) 100%);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
}

.managementHomeFocusGrid article.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 26%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.managementAreaSteps article > span,
.workbenchTodayActionIndex,
.roleTodayCommandCard > span,
.globalModelStep span,
.globalModelStep em,
.leadClientConversionSteps article > span,
.leadFastActionIndex,
.leadCommandCard > span,
.client360FirstScreenIndex,
.clientServiceEventClosureStepIndex,
.clientBackstageDetails > summary span,
.clientMaintenanceSectionDetails > summary span,
.clientCreateMoreDetails > summary span,
.staffCreateMoreDetails > summary span,
.leadCreateMoreDetails > summary span,
.wecomLeadMoreDetails > summary span,
.leadFollowMoreDetails > summary span,
.roomStayTransferSteps article > span,
.roomCheckinTransferSteps article > span,
.metricIcon,
.roomDay span,
.roomDay em,
.financeClientAccountClosureStepIndex,
.financeUnifiedAccountActionMore > summary span {
  background: color-mix(in srgb, var(--accent) 14%, var(--bem-surface));
  color: var(--text-strong);
}

.managementHomeFocusGrid b,
.managementAreaSteps strong,
.staffDailyCommandGrid strong,
.staffPersonalCenterGrid strong,
.staffSalaryPreview strong,
.roleTodayCommandPrimary strong,
.roleTodayCommandCard strong,
.workbenchTodayActionSteps strong,
.leadClientConversionSteps strong,
.leadFastActionStats strong,
.leadFastActionSteps strong,
.leadCommandPrimary strong,
.leadCommandCard strong,
.globalClientContextBar strong,
.globalModelStep strong,
.clientFocusSummary strong,
.clientFocusStats article strong,
.clientUnderNameCommandGrid strong,
.client360FirstScreenStats strong,
.client360FirstScreenSteps strong,
.clientServiceEventClosureStats strong,
.clientServiceEventClosureSteps strong,
.clientFirstScreenActionStripGrid strong,
.clientBackstageDetails > summary strong,
.clientMaintenanceSectionDetails > summary strong,
.clientCreateMoreDetails > summary strong,
.staffCreateMoreDetails > summary strong,
.leadCreateMoreDetails > summary strong,
.wecomLeadMoreDetails > summary strong,
.leadFollowMoreDetails > summary strong,
.careFocusStats article strong,
.careFocusGrid article strong,
.frontlineFirstScreenGrid strong,
.frontlineLightModelGrid strong,
.mealFocusStats article strong,
.mealFocusGrid article strong,
.recoveryFocusStats article strong,
.recoveryFocusGrid article strong,
.nannyFocusStats article strong,
.nannyFocusGrid article strong,
.lifeServiceFrontlineGrid strong,
.lifeServiceLightModelGrid strong,
.financeFocusStats article strong,
.financeFocusGrid article strong,
.financeClientAccountClosureStats strong,
.financeClientAccountClosureSteps strong,
.financeUnifiedAccountActionMore > summary strong,
.financeLightAccountModelGrid strong,
.inventoryFocusStats article strong,
.inventoryFocusGrid article strong,
.roomFocusStats article strong,
.roomFocusGrid article strong,
.roomStayTransferSteps strong,
.roomCheckinTransferSteps strong,
.roomCard h3,
.roomVerticalStoreTitle strong,
.roomVerticalRow > strong,
.roomCalendarEvent strong,
.roomConflictCard strong,
.roomOperationCard strong,
.customerPortalHero h2,
.customerPortalHeroCards strong,
.customerPortalFocusStats strong,
.customerPortalFocusGrid strong,
.customerPortalTransparencySteps strong,
.customerPortalDetailsPanel > summary strong,
.customerPortalItem strong {
  color: var(--text-strong);
}

.managementHomeFocusGrid p,
.managementHomeFocusGrid span,
.managementHomeFocusGrid em,
.managementAreaSteps p,
.managementAreaSteps em,
.staffDailyCommandGrid span,
.staffDailyCommandGrid em,
.staffPersonalCenterGrid span,
.staffPersonalCenterGrid em,
.staffSalaryPreview span,
.staffSalaryPreview p,
.roleTodayCommandPrimary span,
.roleTodayCommandPrimary p,
.roleTodayCommandCard p,
.roleTodayCommandCard em,
.workbenchTodayActionSteps p,
.workbenchTodayActionSteps em,
.leadClientConversionSteps p,
.leadClientConversionSteps em,
.leadFastActionStats span,
.leadFastActionSteps p,
.leadFastActionSteps em,
.leadCommandPrimary span,
.leadCommandPrimary p,
.leadCommandCard p,
.leadCommandCard em,
.globalClientContextBar span,
.globalClientContextBar p,
.globalModelStep p,
.globalModelStep em,
.clientFocusSummary span,
.clientFocusSummary em,
.clientFocusSummary p,
.clientUnderNameCommandGrid p,
.clientUnderNameCommandGrid em,
.client360FirstScreenStats span,
.client360FirstScreenSteps p,
.client360FirstScreenSteps em,
.clientServiceEventClosureStats span,
.clientServiceEventClosureSteps p,
.clientServiceEventClosureSteps em,
.clientFirstScreenActionStripGrid p,
.clientFirstScreenActionStripGrid em,
.clientCommandTodoPrimary p,
.clientCommandTodoPrimary em,
.clientBackstageDetails > summary em,
.clientMaintenanceSectionDetails > summary em,
.clientCreateMoreDetails > summary em,
.staffCreateMoreDetails > summary em,
.leadCreateMoreDetails > summary em,
.wecomLeadMoreDetails > summary em,
.leadFollowMoreDetails > summary em,
.careFocusStats article span,
.careFocusGrid article span,
.careFocusGrid article em,
.careFocusGrid article p,
.frontlineFirstScreenGrid p,
.frontlineLightModelGrid p,
.mealFocusStats article span,
.mealFocusGrid article span,
.mealFocusGrid article em,
.mealFocusGrid article p,
.recoveryFocusStats article span,
.recoveryFocusGrid article span,
.recoveryFocusGrid article em,
.recoveryFocusGrid article p,
.nannyFocusStats article span,
.nannyFocusGrid article span,
.nannyFocusGrid article em,
.nannyFocusGrid article p,
.lifeServiceFrontlineGrid p,
.lifeServiceLightModelGrid p,
.financeFocusStats article span,
.financeFocusGrid article span,
.financeFocusGrid article em,
.financeFocusGrid article p,
.financeClientAccountClosureStats span,
.financeClientAccountClosureSteps p,
.financeUnifiedAccountActionMore > summary em,
.financeLightAccountModelGrid p,
.inventoryFocusStats article span,
.inventoryFocusGrid article span,
.inventoryFocusGrid article em,
.inventoryFocusGrid article p,
.roomFocusStats article span,
.roomFocusGrid article span,
.roomFocusGrid article em,
.roomFocusGrid article p,
.roomStayTransferSteps p,
.roomStayTransferSteps em,
.roomCheckinTransferSteps p,
.roomCheckinTransferSteps em,
.roomCard p,
.roomDetail em,
.roomVerticalStoreTitle span,
.roomVerticalHead span,
.roomVerticalHead em,
.roomDay span,
.roomDay em,
.roomCalendarEvent span,
.roomCalendarEvent em,
.roomConflictCard p,
.roomOperationCard p,
.clientFocusQueueGrid article p,
.clientFocusQueueGrid article em,
.clientQuickAction p,
.customerPortalHero span,
.customerPortalHero p,
.customerPortalHeroCards article span,
.customerPortalFocusStats span,
.customerPortalFocusGrid span,
.customerPortalFocusGrid em,
.customerPortalFocusGrid p,
.customerPortalTransparencySteps p,
.customerPortalTransparencySteps em,
.customerPortalDetailsPanel > summary em,
.customerPortalItem span,
.customerPortalItem p,
.customerPortalMiniList span,
.customerPortalFeedback p {
  color: var(--text-muted);
}

/* 主体新 UI 收口层：接住模块里未命名的通用卡片、折叠块和旧绿步骤编号。 */
.panel article,
.panel details,
.businessCard,
.serviceReviewCard,
.dailyCommandItem,
.reminderCard,
.clientTaskCard,
.roleWorkbenchCard,
.rolePermissionCommandCard,
.staffPerformanceCard,
.workbenchPriorityItem,
.approvalCenterCard,
.approvalCustomerImpact,
.approvalCustomerImpactCard,
.approvalImpactCard,
.approvalUnifiedMoreItem,
.onSiteServiceClosureCard,
.clientExitBusinessCommandItem,
.storeMeetingCommandCard,
.storeManagerCommandItem,
.clientModuleCard,
.clientEntitlementCard,
.clientEntitlementCommandCard,
.clientDailyPlanCard,
.clientDailyClearanceItem,
.clientServiceQualityItem,
.clientServiceJourneyItem,
.clientServiceLedgerGroup,
.clientTabBlock,
.careProjectExecutionItem,
.carePlanItem,
.structuredCard,
.pathwayCard,
.recordItem,
.educationItem,
.careProjectGroup,
.growthCard,
.dailyReportCard {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--apple-card-shadow);
}

.panel article.risk,
.panel article.urgent,
.workbenchPriorityItem.urgent,
.storeMeetingCommandCard.risk,
.storeManagerCommandItem.risk,
.clientDailyClearanceItem.risk,
.clientServiceQualityItem.risk,
.roleAccountabilityItem.risk,
.staffServiceCoverageItem.risk,
.clientExitBusinessCommandItem.pending,
.careProjectExecutionItem.pending {
  background: linear-gradient(180deg, var(--bem-surface) 0%, color-mix(in srgb, var(--bem-status-warning) 10%, var(--bem-surface)) 100%);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
}

.app .managementHomeFocusGrid article.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 26%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.app .roleAccountabilityItem.risk,
.app .clientHandoverAcceptanceItem.risk,
.app .staffServiceCoverageItem.risk,
.app .storeManagerCommandItem.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 26%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.app .clientExitBusinessCommandItem.pending {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.app .clientExitBusinessCommandItem.done {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.panel summary,
.clientBackstageDetails > summary,
.approvalUnifiedMoreDetails > summary,
.approvalActionMoreDetails > summary,
.approvalPendingDetails > summary,
.unifiedOnSiteQuickActionMore > summary,
.serviceRequestMoreDetails > summary,
.paymentMoreDetails > summary,
.lifeServiceFulfillmentMore > summary,
.lifeServiceMoreDetails > summary,
.clientDetailSectionDetails > summary {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-strong);
}

.panel summary > span:first-child,
.clientServiceEventClosureStepIndex,
.onSiteQuickRecordStepIndex,
.approvalQuickClosureStepIndex,
.workbenchTodayActionIndex,
.taskKind,
.secondaryButton,
.globalModelStep span,
.globalModelStep em,
.roleTodayCommandCard > span,
.leadCommandCard > span,
.financeUnifiedAccountActionMore > summary span,
.clientBackstageDetails > summary span,
.clientMaintenanceSectionDetails > summary span,
.clientCreateMoreDetails > summary span,
.staffCreateMoreDetails > summary span,
.leadCreateMoreDetails > summary span,
.wecomLeadMoreDetails > summary span,
.leadFollowMoreDetails > summary span,
.roomStayTransferSteps article > span,
.roomCheckinTransferSteps article > span {
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  color: var(--text-strong);
}

.panel article strong,
.panel article b,
.businessCard strong,
.dailyCommandItem strong,
.reminderCard strong,
.clientTaskCard strong,
.roleWorkbenchCard strong,
.roleTodayCommandCard strong,
.workbenchPriorityItem strong,
.approvalCenterCard strong,
.approvalCustomerImpact strong,
.approvalUnifiedMoreItem strong,
.careProjectExecutionItem strong,
.structuredCard strong,
.recordItem strong {
  color: var(--text-strong);
}

.panel article p,
.panel article em,
.panel article span,
.panel details em,
.panel details p,
.businessCard p,
.businessCard em,
.dailyCommandItem p,
.reminderCard p,
.reminderCard em,
.clientTaskCard p,
.clientTaskCard em,
.roleWorkbenchCard p,
.roleTodayCommandCard p,
.roleTodayCommandCard em,
.workbenchPriorityItem p,
.workbenchPriorityItem em,
.approvalCenterCard p,
.approvalCustomerImpact span,
.approvalCustomerImpactCard p,
.approvalCustomerImpactCard em,
.approvalUnifiedMoreItem em,
.careProjectExecutionItem p,
.carePlanItem p,
.structuredCard p,
.pathwayCard p,
.recordItem p,
.educationItem p {
  color: var(--text-muted);
}

/* 主体新 UI 终局压层：同等/更高特异性覆盖旧暖黄、旧灰绿和旧绿编号。 */
.panel .panelTitleAction,
.panelTitleAction,
.task,
.task.done,
.leadCommandCard,
.leadCommandCard.current,
.roleTodayCommandCard,
.roleTodayCommandCard.current,
.roomCard,
.roomCard.available,
.client360FirstScreenStats article,
.client360FirstScreenSteps article,
.clientQuickAction,
.currentClientStrip,
.clientDepartmentPills span,
.clientTaskSummary article,
.client360Block,
.clientServiceJourneyItem,
.clientTaskCard,
.clientTabBlock,
.workbenchOrgCard,
.roleWorkbenchCard,
.workbenchPriorityItem,
.workbenchPriorityItem.urgent,
.workbenchPriorityMeta span,
.serviceQuickHint,
.clientServiceQuickForm,
.clientOwnerInspectionForm,
.workbenchPriorityQueueActionForm,
.careProjectExecutionActionForm,
.customerServiceRecoveryCommandForm,
.serviceNpsReviewForm,
.scanServiceArchiveQualityForm,
.clientExitBusinessSignals span,
.approvalUnifiedMoreDetails,
.approvalUnifiedMoreDetails > summary,
.approvalPendingDetails,
.approvalActionMoreDetails,
.unifiedOnSiteQuickActionMore,
.unifiedOnSiteQuickActionMore > summary,
.customerPortalDetailsPanel,
.customerPortalDetailsPanel > summary {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-main);
}

.panel .panelTitleAction,
.panelTitleAction {
  box-shadow: none;
}

.taskTime,
.checkIcon,
.metricIcon,
.avatar,
.avatar.large,
.leadCommandCard > span,
.roleTodayCommandCard > span,
.client360FirstScreenIndex,
.customerPortalDetailsPanel > summary span,
.clientServiceEventClosureStepIndex,
.onSiteQuickRecordStepIndex,
.approvalQuickClosureStepIndex,
.taskKind,
.secondaryButton {
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  color: var(--text-strong);
}

.panel a,
.clientStaffScanLinks a {
  color: var(--text-strong);
  border-color: var(--line);
  background: var(--surface);
}

/* 三端视觉锁定层：把各模块残留的旧暖黄、灰绿、深色按钮统一归到当前门户 token。 */
.app .main,
.app .content,
.app .panel,
.app .topbar,
.app .emptyState,
.app .notice,
.app .calendar,
.app .table,
.app .financeTable,
.app .clientCard,
.app .leadCard,
.app .staffCard,
.app .roomCard,
.app .businessCard,
.app .structuredCard,
.app .recordItem,
.app .educationItem,
.app .pathwayCard,
.app .growthCard,
.app .careProjectGroup,
.app .carePlanItem,
.app .dailyReportCard,
.app .dashboardFocusGrid article,
.app .dashboardFocusStats article,
.app .blueprintFocusGrid article,
.app .blueprintFocusStats article,
.app .auditCommandFocusGrid article,
.app .auditCommandFocusStats article,
.app .auditFocus,
.app .staffNowFocus,
.app .staffNowActions button,
.app .staffActionPanelCompact,
.app .staffActionTabs button,
.app .staffTodayCard,
.app .staffDailyCommandGrid article,
.app .staffPersonalCenterGrid article,
.app .staffSalaryPreview,
.app .clientFocusQueueGrid article,
.app .clientCommandTodoPreview,
.app .clientCommandTodoPrimary,
.app .clientTaskSummary article {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-main);
}

.app .panel,
.app .topbar,
.app .clientCard,
.app .leadCard,
.app .staffCard,
.app .roomCard,
.app .businessCard,
.app .structuredCard,
.app .dashboardFocusGrid article,
.app .blueprintFocusGrid article,
.app .auditCommandFocusGrid article,
.app .staffNowFocus,
.app .staffActionPanelCompact {
  box-shadow: var(--panel-shadow);
}

.app .panelTitleAction,
.app .miniButton,
.app .secondaryButton,
.app .staffNowActions button,
.app .staffActionTabs button,
.app .clientDepartmentPills span,
.app .workbenchPriorityMeta span,
.app .clientExitBusinessSignals span,
.app .badge,
.app .taskKind,
.app .metricIcon,
.app .checkIcon,
.app .avatar,
.app summary > span:first-child {
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  color: var(--text-strong);
}

.app .status.ok {
  background: color-mix(in srgb, var(--bem-status-success) 14%, var(--surface));
  color: color-mix(in srgb, var(--bem-status-success) 72%, var(--text-strong));
}

.app .status.warn {
  background: color-mix(in srgb, var(--bem-status-warning) 18%, var(--surface));
  color: color-mix(in srgb, var(--bem-status-warning) 72%, var(--text-strong));
}

.app .status.danger {
  background: color-mix(in srgb, var(--bem-status-danger) 14%, var(--surface));
  color: color-mix(in srgb, var(--bem-status-danger) 76%, var(--text-strong));
}

.app .primaryButton,
.app button.primaryButton,
.app .panelTitleAction.primaryButton {
  background: var(--primary-action);
  color: var(--primary-action-text);
  border-color: transparent;
}

.theme-aqua .staffNowActions button:hover,
.theme-aqua .staffActionTabs button:hover,
.theme-aqua .staffActionTabs button.active,
.theme-aqua .miniButton:hover,
.theme-aqua .secondaryButton:hover {
  background: var(--nav-active-bg);
  border-color: color-mix(in srgb, var(--accent-2) 24%, var(--line));
  color: var(--nav-active-text);
}

.theme-teal .navButton,
.theme-teal .navButton:hover,
.theme-teal .navButton.active {
  background: var(--nav-bg);
  color: var(--nav-text);
}

.theme-sun .sidebar,
.theme-sun .side {
  background: var(--side-bg);
}

.theme-sun .navButton,
.theme-sun .navButton:hover,
.theme-sun .navButton.active {
  background: var(--nav-bg);
  color: var(--nav-text);
  border-color: var(--line);
}

.app input,
.app select,
.app textarea,
.app .searchBox {
  background: var(--field-bg);
  border-color: var(--line);
  color: var(--text-main);
}

/* 业务模块新 UI 锁定层：统一旧状态卡、旧表单和旧标签到白底、细线、轻风险提示。 */
.app .clientExitBusinessCommandActionForm,
.app .clientTaskExceptionEscalationForm,
.app .mealRetentionSampleForm,
.app .recoveryAssessmentCommandForm,
.app .nannyHandoverCommandForm,
.app .dataImportCommandForm,
.app .financeReceivableAgingForm,
.app .financeSupplierPaymentForm,
.app .financeInvoiceArchiveForm,
.app .financeReportExportForm,
.app .workbenchPriorityQueueActionForm,
.app .roleAccountabilityActionForm,
.app .approvalPerformanceLinkForm {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-main);
  box-shadow: var(--apple-card-shadow);
}

.app .clientRiskRadarCard,
.app .careProjectExecutionItem,
.app .recoveryAssessmentItem,
.app .nannyHandoverItem,
.app .dataImportItem,
.app .clientTaskExceptionEscalationItem,
.app .clientOwnerInspectionItem,
.app .clientEntitlementCommandCard,
.app .serviceFocusCommandDeck article,
.app .slaCard,
.app .workbenchPriorityItem,
.app .roleTodayCommandCard,
.app .staffTodayItem,
.app .staffHeroStats article,
.app .performanceFocusStats article,
.app .performanceFocusGrid article,
.app .mealFocusStats article,
.app .mealFocusGrid article,
.app .recoveryFocusStats article,
.app .recoveryFocusGrid article,
.app .nannyFocusStats article,
.app .nannyFocusGrid article,
.app .frontlineFirstScreenGrid article,
.app .frontlineLightModelGrid article {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-main);
}

.app .clientRiskRadarCard.danger,
.app .clientTaskExceptionEscalationItem.danger,
.app .slaCard.danger {
  background: var(--bem-surface);
  border-left: 4px solid color-mix(in srgb, var(--bem-status-danger) 72%, var(--bem-surface));
}

.app .clientRiskRadarCard.warn,
.app .clientTaskExceptionEscalationItem.warn,
.app .careProjectExecutionItem.pending,
.app .recoveryAssessmentItem.pending,
.app .nannyHandoverItem.pending,
.app .dataImportItem.pending,
.app .dataImportItem.watch,
.app .serviceFocusCommandDeck article.urgent,
.app .workbenchPriorityItem.urgent,
.app .staffTodayItem.risk,
.app .clientEntitlementCommandCard.risk,
.app .clientOwnerInspectionItem.risk,
.app .slaCard.warn {
  background: var(--bem-surface);
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.app .careProjectExecutionItem.done,
.app .recoveryAssessmentItem.done,
.app .nannyHandoverItem.done,
.app .dataImportItem.done,
.app .clientOwnerInspectionItem.ok,
.app .clientRiskList article.ok,
.app .slaCard.info {
  background: var(--bem-surface);
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.app .clientDailyClearanceItem.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.app .clientDailyClearanceItem.normal {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 28%, var(--bem-surface));
}

.app .clientServiceQualityItem.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.app .clientServiceQualityItem.ok {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.app .clientEntitlementCommandMeta span,
.app .clientOwnerInspectionMeta span,
.app .orgChildren span,
.app .leadCommandCard em,
.app .leadCommandCard b,
.app .leadCommandCard > span,
.app .leadFastActionSteps em,
.app .leadFastActionIndex,
.app .leadFastActionStats article,
.app .leadCommandPrimary,
.app .leadCommandGrid article,
.app .lifecycleStep,
.app .lifecycleStep > span,
.app .requestPlan div,
.app .praiseMeta span,
.app .serviceEntryMeta em,
.app .workbenchNumbers div,
.app .standardBox,
.app .noticeGrid span,
.app .customerPortalMiniList span {
  background: color-mix(in srgb, var(--accent) 8%, var(--bem-surface));
  border-color: color-mix(in srgb, var(--accent) 12%, var(--line));
  color: var(--text-muted);
}

.app .staffPermissionGrid span,
.app .staffPermissionAuditGrid span,
.app .permissionMetricGrid span,
.app .permissionMetricGrid strong,
.app .rolePermissionCommandCard span,
.app .rolePermissionCommandCard em,
.app .rolePermissionCommandGrid article span,
.app .rolePermissionCommandGrid article em,
.app .dataImportItem span,
.app .dataImportItem em,
.app .dataImportItem b,
.app .orgBranches span,
.app .orgNode,
.app .orgChildren span,
.app .clientStageAction span,
.app .clientStageAction b {
  background: color-mix(in srgb, var(--accent) 8%, var(--bem-surface));
  border-color: color-mix(in srgb, var(--accent) 12%, var(--line));
  color: var(--text-muted);
}

.app .clientStageAction p {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

.app .clientRiskRadarCard p,
.app .clientRiskRadarCard em,
.app .careProjectExecutionItem p,
.app .careProjectExecutionItem em,
.app .recoveryAssessmentItem p,
.app .nannyHandoverItem p,
.app .dataImportItem p,
.app .clientTaskExceptionEscalationItem p,
.app .clientTaskExceptionEscalationItem em,
.app .clientTaskExceptionEscalationItem b,
.app .clientOwnerInspectionItem p,
.app .clientOwnerInspectionItem b,
.app .serviceFocusCommandDeck article p,
.app .slaCard p,
.app .workbenchPriorityItem p,
.app .workbenchPriorityItem em,
.app .roleTodayCommandCard p,
.app .roleTodayCommandCard em,
.app .frontlineFirstScreenGrid p,
.app .frontlineLightModelGrid p {
  color: var(--text-muted);
}

.app .clientRiskRadarCard strong,
.app .careProjectExecutionItem strong,
.app .recoveryAssessmentItem strong,
.app .nannyHandoverItem strong,
.app .dataImportItem strong,
.app .clientTaskExceptionEscalationItem strong,
.app .clientOwnerInspectionItem strong,
.app .serviceFocusCommandDeck article strong,
.app .workbenchPriorityItem strong,
.app .workbenchPriorityItem b,
.app .roleTodayCommandCard strong,
.app .frontlineFirstScreenGrid strong,
.app .frontlineLightModelGrid strong {
  color: var(--text-strong);
}

.app .staffCard,
.app .staffCard .staffMeta span,
.app .staffCard .tagRow em,
.app .staffStats span,
.app .staffStats strong,
.app .staffPermissionCard,
.app .staffPermissionCard span,
.app .staffPermissionCard em,
.app .staffPermissionAuditItem,
.app .staffPermissionAuditItem span,
.app .staffPermissionAuditItem em,
.app .rolePermissionCommandCard,
.app .rolePermissionCommandCard span,
.app .rolePermissionCommandCard em {
  color: var(--text-muted);
}

.app .leadCommandCard,
.app .leadCommandCard.current,
.app .clientStageAction,
.app .clientStageAction.done,
.app .clientStageAction.pending,
.app .lifecycleStep,
.app .lifecycleStep.active,
.app .lifecycleStep.passed,
.app .permissionMetricGrid article,
.app .staffPermissionCard,
.app .staffPermissionAuditItem,
.app .staffPermissionAuditCompare,
.app .rolePermissionCommandCard,
.app .rolePermissionCommandGrid article,
.app .orgBranches span,
.app .orgNode,
.app .orgChildren span,
.app .dataImportItem,
.app .dataImportItem.pending,
.app .dataImportItem.watch,
.app .dataImportItem.done,
.app .clientUnderNameCommandGrid article,
.app .client360FirstScreenStats article,
.app .client360FirstScreenSteps article,
.app .clientStageActionGrid article {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-main);
}

.app .leadCommandCard.current,
.app .clientStageAction.done,
.app .lifecycleStep.active,
.app .dataImportItem.done,
.app .orgNode.chief {
  background: var(--surface);
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.app .orgFocusStats article {
  background: var(--field-bg);
  border-color: var(--line);
  color: var(--text-main);
}

.app .orgPermissionOnboardingSteps article > span {
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  color: var(--text-strong);
}

.app .orgChildren span {
  background: var(--field-bg);
  border-color: var(--line);
  color: var(--text-strong);
}

.app .roleHead span {
  border-radius: 4px;
  background: var(--field-bg);
  border-color: var(--line);
  color: var(--text-muted);
}

.app .leadCommandCard > span,
.app .client360FirstScreenIndex,
.app .lifecycleStep > span,
.app .permissionMetricGrid strong,
.app .staffPermissionCard b,
.app .staffPermissionAuditItem b,
.app .rolePermissionCommandCard > span,
.app .dataImportItem .status,
.app .clientUnderNameCommandGrid em,
.app .clientStageActionGrid em {
  background: color-mix(in srgb, var(--accent) 10%, var(--bem-surface));
  border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
  color: var(--text-strong);
}

.app .leadCommandCard em,
.app .clientStageAction p,
.app .lifecycleStep span,
.app .lifecycleStep p,
.app .permissionMetricGrid span,
.app .staffPermissionCard p,
.app .staffPermissionAuditItem p,
.app .rolePermissionCommandCard p,
.app .clientUnderNameCommandGrid p {
  color: var(--text-muted);
}

.app .leadCommandPrimary,
.app .leadCommandGrid article,
.app .leadCommandCard,
.app .leadCommandCard.current {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-main);
}

.app .leadCommandCard > span,
.app .leadCommandCard strong,
.app .leadCommandCard em,
.app .leadCommandCard b {
  background: transparent;
  border-color: transparent;
  color: var(--text-main);
}

.app .leadStageList em,
.app .leadCard em,
.app .leadTop b,
.app .roleWorkbenchSection.risk em,
.app .clientDocumentArchiveItem,
.app .clientDocumentArchiveItem.pending,
.app .clientDocumentArchiveItem.done,
.app .clientCheckinHandoverItem,
.app .clientCheckinHandoverItem.pending,
.app .clientCheckinHandoverItem.done,
.app .clientServiceQualityActionForm,
.app .clientCheckinHandoverActionForm,
.app .clientSatisfactionReviewActionForm {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-main);
}

.app .clientDocumentArchiveItem.pending {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.app .clientDocumentArchiveItem.done {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.app .scanServiceArchiveQualityItem.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.app .scanServiceArchiveQualityItem.done {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.app .clientCheckinHandoverItem.pending {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-warning) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.app .clientCheckinHandoverItem.done {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.app .completenessGrid article,
.app .completenessGrid article.done,
.app .completenessGrid article.missing,
.app .clientSatisfactionReviewItem,
.app .clientSatisfactionReviewItem.done,
.app .clientSatisfactionReviewItem.pending,
.app .clientSatisfactionReviewItem.risk,
.app .clientRiskList article,
.app .clientRiskList article.warn,
.app .clientRiskList article.danger,
.app .clientRiskList article.ok,
.app .clientTaskActionForm {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-main);
}

.app .completenessGrid article.done,
.app .clientSatisfactionReviewItem.done,
.app .clientRiskList article.ok {
  background: var(--bem-surface);
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.app .completenessGrid article.missing,
.app .clientSatisfactionReviewItem.pending,
.app .clientRiskList article.warn {
  background: var(--bem-surface);
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.app .clientSatisfactionReviewItem.risk,
.app .clientRiskList article.danger {
  background: var(--bem-surface);
  border-left: 4px solid color-mix(in srgb, var(--bem-status-danger) 72%, var(--bem-surface));
}

.app .clientSatisfactionReviewItem.risk {
  background: var(--bem-surface);
  border-color: color-mix(in srgb, var(--bem-status-danger) 24%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--bem-status-danger) 76%, var(--bem-surface));
}

.app .staffNowActions span,
.app .staffActionTabs button span,
.app .staffHero,
.app .customerServiceRecoveryItem,
.app .customerServiceRecoveryItem.pending,
.app .customerServiceRecoveryItem.watch,
.app .customerServiceRecoveryItem.done,
.app .serviceNpsReviewItem,
.app .serviceNpsReviewItem.pending,
.app .serviceNpsReviewItem.risk,
.app .serviceNpsReviewItem.done,
.app .customerPortalFinanceContent article,
.app .financeProgress span {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-main);
}

.app .customerServiceRecoveryItem.pending,
.app .serviceNpsReviewItem.pending {
  background: var(--bem-surface);
  border-left: 4px solid color-mix(in srgb, var(--bem-status-warning) 76%, var(--bem-surface));
}

.app .serviceNpsReviewItem.risk {
  background: var(--bem-surface);
  border-left: 4px solid color-mix(in srgb, var(--bem-status-danger) 72%, var(--bem-surface));
}

.app .customerServiceRecoveryItem.done,
.app .serviceNpsReviewItem.done {
  background: var(--bem-surface);
  border-left: 4px solid color-mix(in srgb, var(--accent) 42%, var(--bem-surface));
}

.app .trendBar span {
  background: var(--primary-action);
}

/* Apple 式全局排版系统第一层：统一全局组件秩序，不改业务结构。 */
.app .topbar {
  box-shadow: none;
  border-color: transparent;
  background: transparent;
}

.app .panel {
  box-shadow: var(--panel-shadow);
  border-radius: var(--radius-card);
  padding: var(--apple-panel-padding, var(--space-4));
}

.app .panelTitle {
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.app .panelTitle > div {
  gap: var(--space-2);
  min-width: 0;
}

.app .panelTitle h2 {
  font-size: var(--apple-section-font, var(--font-section));
  line-height: 1.22;
  letter-spacing: 0;
}

.app .panelTitleAction {
  height: 32px;
  min-height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-card);
  font-size: var(--font-meta);
  font-weight: 800;
}

.app details > summary {
  min-height: 44px;
  align-items: center;
  border-radius: var(--radius-card);
}

.app input,
.app select,
.app textarea {
  min-height: var(--apple-field-height, 40px);
  border-radius: var(--radius-card);
}

.app .primaryButton,
.app .topSoftButton,
.app .secondaryButton,
.app .miniButton {
  min-height: 32px;
  border-radius: var(--radius-card);
}

.app .emptyState,
.app .notice {
  border-radius: var(--radius-card);
  box-shadow: none;
}

/* 客户心享 Apple 式紧凑首屏：保留内容闭环，降低首屏视觉重量。 */
.customerPortalAppleHero {
  padding: var(--space-4);
  border-radius: var(--radius-card);
  box-shadow: var(--panel-shadow);
}

.customerPortalAppleHero h2 {
  max-width: 620px;
  font-size: var(--font-display-compact);
  line-height: 1.14;
  margin: var(--space-2) 0 var(--space-2);
}

.customerPortalAppleHero p {
  max-width: 560px;
  font-size: var(--font-body);
  line-height: 1.48;
}

.customerPortalAppleHero .customerPortalHeroCards article {
  min-height: 76px;
  border-radius: var(--radius-card);
  background: var(--surface-soft);
}

.customerPortalAppleHero .customerPortalHeroCards strong {
  font-size: 20px;
}

.customerPortalAppleFocusGrid article {
  min-height: 112px;
  padding: var(--space-3);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.customerPortalAppleFocusGrid strong {
  font-size: 15px;
}

.customerPortalAppleFocusGrid p {
  line-height: 1.42;
}

/* 贝美心护 Apple 式员工快录首屏：马上记录优先，按钮稳定小尺寸。 */
.staffAppleNowFocus {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--space-4);
  border-radius: var(--radius-card);
}

.staffAppleNowFocus .staffNowMain {
  gap: var(--space-2);
}

.staffAppleNowFocus .staffNowMain > span {
  font-size: var(--font-meta);
  font-weight: 800;
}

.staffAppleNowFocus .staffNowClient {
  font-size: var(--font-display-compact);
}

.staffAppleNowFocus .staffNowActions {
  grid-template-columns: repeat(4, 92px);
  gap: var(--space-2);
}

.staffAppleNowFocus .staffNowActions button {
  min-height: 58px;
  padding: var(--space-2);
  border-radius: var(--radius-card);
  background: var(--field-bg);
  box-shadow: none;
}

.staffAppleNowFocus .staffNowActions span {
  font-size: 15px;
}

.staffAppleActionDeck {
  padding: var(--space-4);
  border-radius: var(--radius-card);
}

.staffAppleActionDeck .staffActionTabs button {
  min-height: 58px;
  border-radius: var(--radius-card);
}

/* Apple 式全局密度系统第一轮：统一控件高度、焦点、卡片层级和表单间距。 */
.app input,
.app select,
.app textarea,
.app .searchBox {
  min-height: var(--apple-control-height);
  border-radius: var(--radius-card);
  border-color: var(--line);
  background: var(--field-bg);
  box-shadow: none;
}

.app input:focus,
.app select:focus,
.app textarea:focus {
  outline: 0;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow: var(--apple-focus-ring);
}

.app .primaryButton,
.app .topSoftButton,
.app .secondaryButton,
.app .miniButton,
.app .iconButton {
  min-height: var(--apple-control-height);
  border-radius: var(--radius-card);
}

.app .panel,
.app .metric,
.app .clientCard,
.app .leadCard,
.app .staffCard,
.app .roomCard,
.app .structuredCard,
.app .businessCard {
  box-shadow: var(--apple-card-shadow);
  border-radius: var(--radius-card);
}

.app form,
.app .field {
  gap: var(--space-2);
}

/* 贝美基础业务组件类：先锁员工端试点链路，再逐步替换各模块散落样式。 */
.bemTileSelect {
  position: relative;
  min-height: 44px;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  align-items: start;
  gap: var(--space-2);
  padding: var(--space-2) calc(var(--space-4) + 18px) var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--field-bg);
  color: var(--text-main);
  text-align: left;
  box-shadow: none;
  transition: all 200ms ease-in-out;
}

.bemTileSelectIcon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}

.bemTileSelectCopy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.bemTileSelect::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 13px;
  width: 7px;
  height: 12px;
  border: solid var(--brand-dna);
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.8);
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.bemIcon {
  flex: none;
  display: inline-block;
  stroke-width: 2;
  vertical-align: -0.15em;
}

.bemIcon-sm {
  width: 14px;
  height: 14px;
}

.bemIcon-md {
  width: 18px;
  height: 18px;
}

.bemIcon-lg {
  width: 24px;
  height: 24px;
}

.bemIcon-muted {
  color: var(--text-muted);
}

.bemIcon-brand {
  color: var(--brand-dna);
}

.bemIcon-danger {
  color: var(--danger);
}

.bemIcon-inherit {
  color: currentColor;
}

.bemIconSpin {
  animation: bemIconSpin 3s linear infinite;
}

@keyframes bemIconSpin {
  to {
    transform: rotate(360deg);
  }
}

.bem-icon-mask {
  --bem-icon-size: 18px;
  --bem-icon-color: var(--brand-dna, var(--accent));
  flex: none;
  display: inline-block;
  width: var(--bem-icon-size);
  height: var(--bem-icon-size);
  min-width: var(--bem-icon-size);
  min-height: var(--bem-icon-size);
  background-color: var(--bem-icon-color, var(--brand-dna, var(--accent)));
  mask-image: var(--bem-icon-url);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--bem-icon-url);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  transition: background-color 200ms ease-in-out;
}

.bem-icon-mask-sm {
  --bem-icon-size: 14px;
}

.bem-icon-mask-md {
  --bem-icon-size: 18px;
}

.bem-icon-mask-lg {
  --bem-icon-size: 24px;
}

.bem-icon-mask-brand,
.bem-icon-mask-accent {
  --bem-icon-color: var(--brand-dna, var(--accent));
}

.bem-icon-mask-danger {
  --bem-icon-color: var(--danger);
}

.bem-icon-mask-neutral {
  --bem-icon-color: var(--text-muted);
}

.bem-icon-mask-inverse {
  --bem-icon-color: var(--primary-action-text);
}

.bem-icon-mask-inherit {
  --bem-icon-color: currentColor;
}

.bemTileSelectTitle {
  font-size: var(--font-body);
  font-weight: 800;
  line-height: 1.24;
}

.bemTileSelectDescription {
  color: var(--text-muted);
  font-size: var(--font-meta);
  line-height: 1.35;
}

.bemTileSelect.selected {
  border-color: color-mix(in srgb, var(--brand-dna) 24%, var(--line));
  background: color-mix(in srgb, var(--brand-dna) 8%, var(--bem-surface));
  color: var(--text-strong);
}

.bemTileSelect.selected::after {
  border-color: var(--brand-dna);
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.bemTileSelectCheck {
  position: absolute;
  top: 10px;
  right: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.bemTileSelect.selected .bemTileSelectCheck {
  opacity: 1;
  transform: scale(1);
}

.bemTileSelect:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.bemDisabledAttribution {
  position: relative;
}

.bemDisabledAttribution::before {
  content: attr(data-tooltip);
  position: absolute;
  left: var(--space-2);
  bottom: calc(100% + var(--space-1));
  z-index: 60;
  max-width: min(280px, calc(100vw - 40px));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--apple-card-shadow);
  color: var(--text-main);
  font-size: var(--font-meta);
  font-weight: 800;
  line-height: 1.38;
  white-space: normal;
  word-break: break-word;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-in-out;
}

.bemDisabledAttribution:hover::before,
.bemDisabledAttribution:focus-visible::before,
.bemDisabledAttribution:active::before {
  opacity: 1;
}

.bemTileSelectTooltip {
  position: relative;
}

.bemTileSelectTooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  left: var(--space-2);
  bottom: calc(100% + var(--space-1));
  z-index: 50;
  max-width: min(280px, calc(100vw - 40px));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--apple-card-shadow);
  color: var(--text-main);
  font-size: var(--font-meta);
  font-weight: 800;
  line-height: 1.38;
  white-space: normal;
  word-break: break-word;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-in-out;
}

.bemTileSelectTooltip:hover::before,
.bemTileSelectTooltip:focus-visible::before {
  opacity: 1;
}

.primaryButton[data-risk-level="high"] {
  position: relative;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), var(--apple-card-shadow);
}

.bemRiskTableAction {
  color: var(--danger);
  font-weight: 900;
}

.bemRiskTableAction .bemIcon {
  color: currentColor;
}

.primaryButton[data-risk-level="high"][data-confirm-mode="press-hold-1500"] {
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
}

.primaryButton[data-risk-level="high"][data-confirm-mode="press-hold-1500"]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  pointer-events: none;
}

.primaryButton.bemRiskPressHolding::before {
  animation: bemRiskPressHoldFill 1500ms linear forwards;
}

.primaryButton.bemRiskPressHoldRequired::after {
  content: "长按1.5秒";
}

@keyframes bemRiskPressHoldFill {
  to {
    width: 100%;
  }
}

.primaryButton[data-risk-level="high"][data-confirm-mode="press-hold-1500"]::after,
.primaryButton[data-risk-level="high"][data-confirm-mode="slide"]::after {
  content: "需确认";
  margin-left: var(--space-2);
  font-size: var(--font-meta);
  font-weight: 900;
}

.primaryButton[data-risk-level="high"][data-confirm-mode="press-hold-1500"].bemRiskPressHoldRequired::after {
  content: "长按1.5秒";
}

.bemRiskConfirmOverlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: color-mix(in srgb, var(--text-strong) 28%, transparent);
  backdrop-filter: blur(10px);
}

.bemRiskConfirmDialog {
  width: min(460px, 100%);
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-main);
  box-shadow: var(--apple-card-shadow);
}

.bemRiskConfirmHeader {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}

.bemRiskConfirmHeader > span {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
}

.bemRiskConfirmHeader strong,
.bemRiskConfirmImpact strong {
  display: block;
  color: var(--text-strong);
  font-size: var(--font-section);
  line-height: 1.22;
}

.bemRiskConfirmHeader em {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-meta);
  font-style: normal;
  line-height: 1.35;
}

.bemRiskConfirmImpact {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-card);
  border: 1px solid color-mix(in srgb, var(--danger) 18%, var(--line));
  background: color-mix(in srgb, var(--danger) 5%, var(--surface));
}

.bemRiskConfirmImpact p {
  margin: 0;
  color: var(--text-main);
  font-size: var(--font-body);
  line-height: var(--bem-line-body);
}

.bemRiskConfirmActions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.bemStaleFormOverlay {
  position: fixed;
  inset: 0;
  z-index: 82;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: color-mix(in srgb, var(--text-strong) 26%, transparent);
  backdrop-filter: blur(10px);
}

.bemStaleFormDialog {
  width: min(480px, 100%);
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-main);
  box-shadow: var(--apple-card-shadow);
}

.bemStaleFormImpact {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-card);
  border: 1px solid color-mix(in srgb, var(--bem-status-warning) 30%, var(--line));
  background: color-mix(in srgb, var(--bem-status-warning) 10%, var(--surface));
}

.bemStaleFormImpact strong {
  color: var(--text-strong);
  font-size: var(--font-section);
  line-height: 1.22;
}

.bemStaleFormImpact p {
  margin: 0;
  color: var(--text-main);
  font-size: var(--font-body);
  line-height: var(--bem-line-body);
}

.bemStaleFormActions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.bemTable {
  display: grid;
  max-height: 520px;
  overflow: auto;
  border-radius: var(--radius-card);
  background: var(--surface);
}

.bemTableRow {
  display: grid;
  grid-template-columns: var(--bem-table-columns, repeat(auto-fit, minmax(120px, 1fr)));
  min-height: 48px;
  border-bottom: 1px solid var(--line);
}

.bemTableRow.slaOverdue {
  border-left: 4px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 5%, var(--surface));
}

.bemTableHead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  font-weight: 900;
}

.bemTableCell {
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-main);
  line-height: var(--bem-line-body);
}

.bemMetaIconLabel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  color: var(--text-muted);
  line-height: 1.35;
}

.bemMetaIconLabel > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bemTable,
.bemTableCell,
.panel p,
.metric p,
.clientCard,
.staffCard,
.roomCard,
.bemTileSelectCopy {
  text-rendering: optimizeLegibility;
  line-height: var(--bem-line-body);
}

.bemDenseTextStack {
  display: grid;
  gap: var(--bem-space-2);
  text-rendering: optimizeLegibility;
}

.bemDenseTextStack :is(strong, b, span, em, p) {
  min-width: 0;
  line-height: var(--bem-line-body);
}

.bemTableTooltip {
  position: relative;
}

.bemTableTooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: var(--space-2);
  top: calc(100% + var(--space-1));
  z-index: 50;
  max-width: 280px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text-main);
  box-shadow: var(--apple-card-shadow);
  border: 1px solid var(--line);
  opacity: 0;
  pointer-events: none;
  white-space: normal;
  word-break: break-all;
  line-height: 1.42;
  transition: opacity 200ms ease-in-out;
  transition-delay: 200ms;
}

.bemTableTooltip:hover::after {
  opacity: 1;
}

.bemFloatingTooltip {
  position: fixed;
  z-index: 80;
  max-width: min(320px, calc(100vw - 24px));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-main);
  box-shadow: var(--apple-card-shadow);
  font-size: var(--font-meta);
  line-height: 1.42;
  white-space: normal;
  word-break: break-all;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.bemFloatingTooltip[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

.clientTaskExceptionEscalationTable {
  --bem-table-columns: minmax(118px, 0.9fr) minmax(220px, 1.7fr) minmax(96px, 0.8fr) minmax(112px, 0.8fr) minmax(86px, 0.6fr) minmax(168px, 1.1fr);
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.staffQuickIdentityContext {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  gap: 3px;
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--surface) 92%, var(--accent));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
}

.staffQuickIdentityContext span {
  color: var(--text-muted);
  font-size: var(--font-meta);
  font-weight: 900;
}

.staffQuickIdentityContext strong {
  color: var(--text-strong);
  font-size: var(--font-section);
  line-height: 1.2;
}

.staffQuickIdentityContext em,
.offlineSubmitState {
  color: var(--text-muted);
  font-size: var(--font-meta);
  font-style: normal;
  font-weight: 800;
  line-height: 1.38;
}

.localSyncPill {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 24px;
  padding: 0 var(--space-2);
  border-radius: 4px;
  background: color-mix(in srgb, var(--text-muted) 10%, var(--bem-surface));
  border: 1px solid color-mix(in srgb, var(--text-muted) 22%, var(--line));
  color: var(--text-muted);
  font-size: var(--font-meta);
  font-weight: 900;
}

.offlineSubmitState {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--text-muted) 8%, var(--bem-surface));
  border: 1px solid color-mix(in srgb, var(--text-muted) 18%, var(--line));
}

.staffQuickSubmitAbnormal {
  background: linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 72%, var(--accent)));
  color: var(--primary-action-text);
}

.staffQuickSubmitOffline {
  background: linear-gradient(135deg, var(--text-muted), color-mix(in srgb, var(--text-muted) 70%, var(--accent)));
  color: var(--primary-action-text);
}

.staffQuickCategoryTiles {
  display: grid;
}

.staffQuickCategoryTileGrid {
  display: grid;
  gap: var(--space-2);
}

/* 客户 H5 按钮可读性最终兜底：压住系统暗色偏好和全局按钮收口层。 */
body.customerPortalShell .theme-sun {
  color-scheme: light;
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.82);
  --field-bg: rgba(255, 255, 255, 0.92);
  --text-strong: #171b21;
  --text-main: #1d1d1f;
  --text-muted: #67717b;
  --line: #e5e5ea;
  --primary-action: linear-gradient(135deg, #00bcd4, #3a86ff);
  --primary-action-text: #ffffff;
  --bem-text-strong: var(--text-strong);
  --bem-text-main: var(--text-main);
  --bem-text-muted: var(--text-muted);
  --bem-line: var(--line);
  --bem-surface: var(--surface);
  --bem-field-bg: var(--field-bg);
  --bem-primary-action: var(--primary-action);
  --bem-primary-action-text: var(--primary-action-text);
  filter: none;
  background-blend-mode: normal;
  background-color: transparent;
}

body.customerPortalShell .primaryButton,
body.customerPortalShell button.primaryButton,
body.customerPortalShell .topActions .primaryButton,
body.customerPortalShell .customerPortalFeedbackForm .primaryButton {
  background: var(--primary-action);
  color: var(--primary-action-text);
  -webkit-text-fill-color: var(--primary-action-text);
  border-color: transparent;
  forced-color-adjust: none;
}

body.customerPortalShell .primaryButton *,
body.customerPortalShell .primaryButton svg,
body.customerPortalShell .primaryButton .bemIcon {
  color: var(--primary-action-text);
  -webkit-text-fill-color: var(--primary-action-text);
  stroke: currentColor;
}

body.customerPortalShell .primaryButton .bem-icon-mask,
body.customerPortalShell .primaryButton .bem-icon-mask-inherit,
body.customerPortalShell .primaryButton .bem-icon-mask-inverse {
  --bem-icon-color: var(--primary-action-text);
  background-color: var(--primary-action-text);
}

body.customerPortalShell .topSoftButton,
body.customerPortalShell .secondaryButton,
body.customerPortalShell .miniButton,
body.customerPortalShell .customerPortalQuickEntryCard,
body.customerPortalShell .customerPortalDetailsPanel > summary button {
  background: var(--field-bg);
  color: var(--text-main);
  -webkit-text-fill-color: var(--text-main);
  border-color: var(--line);
}

body.customerPortalShell .customerPortalQuickEntryCard strong,
body.customerPortalShell .customerPortalDetailsPanel > summary strong {
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
}

body.customerPortalShell .customerPortalQuickEntryCard em,
body.customerPortalShell .customerPortalDetailsPanel > summary em,
body.customerPortalShell .customerPortalDetailsPanel > summary span {
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
}

/* 前台员工端按钮可读性最终兜底：压住系统暗色偏好和全局按钮收口层。 */
body.frontPortalShell .theme-aqua {
  color-scheme: light;
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.82);
  --field-bg: rgba(255, 255, 255, 0.92);
  --text-strong: #171b21;
  --text-main: #1d1d1f;
  --text-muted: #67717b;
  --line: #e5e5ea;
  --primary-action: linear-gradient(135deg, #00bcc2, #5751f9);
  --primary-action-text: #ffffff;
  --bem-text-strong: var(--text-strong);
  --bem-text-main: var(--text-main);
  --bem-text-muted: var(--text-muted);
  --bem-line: var(--line);
  --bem-surface: var(--surface);
  --bem-field-bg: var(--field-bg);
  --bem-primary-action: var(--primary-action);
  --bem-primary-action-text: var(--primary-action-text);
  filter: none;
  background-blend-mode: normal;
  background-color: transparent;
}

body.frontPortalShell .activeStaffSwitch,
body.frontPortalShell .portalSwitch,
body.frontPortalShell .portalButton,
body.frontPortalShell .navButton {
  background: var(--field-bg);
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
  border-color: var(--line);
  text-shadow: none;
  opacity: 1;
  forced-color-adjust: none;
}

body.frontPortalShell .activeStaffSelect,
body.frontPortalShell .activeStaffSelect option {
  background: var(--field-bg);
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
  border-color: var(--line);
  text-shadow: none;
  opacity: 1;
  forced-color-adjust: none;
}

body.frontPortalShell .activeStaffSwitch span,
body.frontPortalShell .activeStaffSwitch em,
body.frontPortalShell .portalButton span,
body.frontPortalShell .navButton span:not(.lineIcon) {
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
}

body.frontPortalShell .portalButton strong,
body.frontPortalShell .navButton strong,
body.frontPortalShell .navButton em {
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
}

body.frontPortalShell .navButton .lineIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  color: currentColor;
  -webkit-text-fill-color: currentColor;
}

body.frontPortalShell .navButton .lineIcon .bemIcon {
  width: 20px;
  height: 20px;
  color: currentColor;
  stroke: currentColor;
}

body.frontPortalShell .navButton .lineIcon .bem-icon-mask {
  --bem-icon-color: currentColor;
  background-color: currentColor;
}

body.frontPortalShell .navButton .lineIcon:empty::before {
  content: attr(data-fallback-icon);
  color: currentColor;
  -webkit-text-fill-color: currentColor;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

body.frontPortalShell .staffNowActions button,
body.frontPortalShell .staffActionTabs button,
body.frontPortalShell .staffFourActionDeck .panelTitleAction,
body.frontPortalShell .staffScanQuickPanel .panelTitleAction,
body.frontPortalShell .roleTodayCommandDesk .panelTitleAction,
body.frontPortalShell .roleTodayCommandCard .miniButton,
body.frontPortalShell .staffActionPanelCompact .panelTitleAction {
  background: var(--field-bg);
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
  border-color: var(--line);
  text-shadow: none;
  opacity: 1;
  forced-color-adjust: none;
}

body.frontPortalShell .staffNowActions button *,
body.frontPortalShell .staffActionTabs button strong,
body.frontPortalShell .staffFourActionDeck .panelTitleAction *,
body.frontPortalShell .staffScanQuickPanel .panelTitleAction *,
body.frontPortalShell .roleTodayCommandDesk .panelTitleAction *,
body.frontPortalShell .roleTodayCommandCard .miniButton * {
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
}

body.frontPortalShell .staffActionTabs button em,
body.frontPortalShell .staffNowMain span,
body.frontPortalShell .staffNowMain em,
body.frontPortalShell .roleTodayCommandPrimary span,
body.frontPortalShell .roleTodayCommandPrimary p,
body.frontPortalShell .roleTodayCommandCard p,
body.frontPortalShell .roleTodayCommandCard em {
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
}

body.frontPortalShell .staffActionTabs button.active,
body.frontPortalShell .staffActionTabs button:hover,
body.frontPortalShell .staffNowActions button:hover,
body.frontPortalShell .roleTodayCommandCard .miniButton:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
}

body.frontPortalShell .staffActionTabs button span,
body.frontPortalShell .staffNowActions span,
body.frontPortalShell .roleTodayCommandCard > span {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
}

body.frontPortalShell .primaryButton,
body.frontPortalShell button.primaryButton,
body.frontPortalShell .roleTodayCommandDesk .primaryButton,
body.frontPortalShell .clientServiceQuickForm .primaryButton,
body.frontPortalShell .staffScanForm .primaryButton,
body.frontPortalShell .staffQuickRecordForm .primaryButton,
body.frontPortalShell .staffExceptionForm .primaryButton,
body.frontPortalShell .staffHandoverForm .primaryButton {
  background: var(--primary-action);
  color: var(--primary-action-text);
  -webkit-text-fill-color: var(--primary-action-text);
  border-color: transparent;
  forced-color-adjust: none;
}

body.frontPortalShell .primaryButton *,
body.frontPortalShell .primaryButton svg,
body.frontPortalShell .primaryButton .bemIcon {
  color: var(--primary-action-text);
  -webkit-text-fill-color: var(--primary-action-text);
  stroke: currentColor;
}

body.frontPortalShell .primaryButton .bem-icon-mask,
body.frontPortalShell .primaryButton .bem-icon-mask-inherit,
body.frontPortalShell .primaryButton .bem-icon-mask-inverse {
  --bem-icon-color: var(--primary-action-text);
  background-color: var(--primary-action-text);
}

/* 财务、库存、客户队列最终 token 锁定：收住后置通用覆盖层里的旧暖黄和大胶囊。 */
.app .financeClientAccountClosureStepIndex,
.app .financeUnifiedAccountActionMore > summary span {
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bem-surface));
  color: var(--text-strong);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
}

.app .clientFocusQueueGrid article.active,
.app .clientCard.active {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: var(--field-bg);
}

.app .tagRow em {
  border-radius: 4px;
  background: var(--field-bg);
  color: var(--text-muted);
}

.app .globalClientContextActions a {
  border: 1px solid var(--line);
  background: var(--bem-surface);
  color: var(--text-strong);
}

/* 员工端夜间可读性硬兜底：即使 body 门户类或系统暗色偏好未及时同步，按钮文字也不被整体暗化吞掉。 */
.app.theme-aqua {
  color-scheme: light;
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.82);
  --field-bg: rgba(255, 255, 255, 0.92);
  --text-strong: #171b21;
  --text-main: #1d1d1f;
  --text-muted: #67717b;
  --line: #e5e5ea;
  --primary-action: linear-gradient(135deg, #00bcc2, #5751f9);
  --primary-action-text: #ffffff;
  --bem-text-strong: var(--text-strong);
  --bem-text-main: var(--text-main);
  --bem-text-muted: var(--text-muted);
  --bem-line: var(--line);
  --bem-surface: var(--surface);
  --bem-field-bg: var(--field-bg);
  --bem-primary-action: var(--primary-action);
  --bem-primary-action-text: var(--primary-action-text);
  filter: none;
  background-blend-mode: normal;
}

.app.theme-aqua .activeStaffSwitch,
.app.theme-aqua .portalSwitch,
.app.theme-aqua .portalButton,
.app.theme-aqua .navButton,
.app.theme-aqua .staffNowActions button,
.app.theme-aqua .staffActionTabs button,
.app.theme-aqua .staffFourActionDeck .panelTitleAction,
.app.theme-aqua .staffScanQuickPanel .panelTitleAction,
.app.theme-aqua .staffQuickRecordPanel .panelTitleAction,
.app.theme-aqua .staffExceptionPanel .panelTitleAction,
.app.theme-aqua .staffHandoverPanel .panelTitleAction,
.app.theme-aqua .roleTodayCommandDesk .panelTitleAction,
.app.theme-aqua .roleTodayCommandCard .miniButton,
.app.theme-aqua .staffActionPanelCompact .panelTitleAction {
  background: var(--field-bg);
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
  border-color: var(--line);
  text-shadow: none;
  opacity: 1;
  filter: none;
  forced-color-adjust: none;
}

.app.theme-aqua .navButton *,
.app.theme-aqua .activeStaffSwitch *,
.app.theme-aqua .portalButton *,
.app.theme-aqua .staffNowActions button *,
.app.theme-aqua .staffActionTabs button *,
.app.theme-aqua .panelTitleAction *,
.app.theme-aqua .roleTodayCommandCard .miniButton * {
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
  text-shadow: none;
  opacity: 1;
}

.app.theme-aqua .staffActionTabs button em,
.app.theme-aqua .staffNowMain span,
.app.theme-aqua .staffNowMain em,
.app.theme-aqua .roleTodayCommandPrimary span,
.app.theme-aqua .roleTodayCommandPrimary p,
.app.theme-aqua .roleTodayCommandCard p,
.app.theme-aqua .roleTodayCommandCard em {
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
}

.app.theme-aqua .primaryButton,
.app.theme-aqua button.primaryButton,
.app.theme-aqua .roleTodayCommandDesk .primaryButton,
.app.theme-aqua .clientServiceQuickForm .primaryButton,
.app.theme-aqua .staffScanForm .primaryButton,
.app.theme-aqua .staffQuickRecordForm .primaryButton,
.app.theme-aqua .staffExceptionForm .primaryButton,
.app.theme-aqua .staffHandoverForm .primaryButton {
  background: var(--primary-action);
  color: var(--primary-action-text);
  -webkit-text-fill-color: var(--primary-action-text);
  border-color: transparent;
  text-shadow: none;
  opacity: 1;
  filter: none;
  forced-color-adjust: none;
}

.app.theme-aqua .primaryButton *,
.app.theme-aqua .primaryButton svg,
.app.theme-aqua .primaryButton .bemIcon {
  color: var(--primary-action-text);
  -webkit-text-fill-color: var(--primary-action-text);
  stroke: currentColor;
  opacity: 1;
}

.app.theme-aqua .primaryButton .bem-icon-mask,
.app.theme-aqua .primaryButton .bem-icon-mask-inherit,
.app.theme-aqua .primaryButton .bem-icon-mask-inverse {
  --bem-icon-color: var(--primary-action-text);
  background-color: var(--primary-action-text);
}

/* 客户 H5 夜间可读性硬兜底：客户端维持明亮服务透明页，避免系统暗色偏好压暗按钮文字。 */
.app.theme-sun {
  color-scheme: light;
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.82);
  --field-bg: rgba(255, 255, 255, 0.92);
  --text-strong: #171b21;
  --text-main: #1d1d1f;
  --text-muted: #67717b;
  --line: #e5e5ea;
  --primary-action: #00bcd4;
  --primary-action-text: #ffffff;
  --bem-text-strong: var(--text-strong);
  --bem-text-main: var(--text-main);
  --bem-text-muted: var(--text-muted);
  --bem-line: var(--line);
  --bem-surface: var(--surface);
  --bem-field-bg: var(--field-bg);
  --bem-primary-action: var(--primary-action);
  --bem-primary-action-text: var(--primary-action-text);
  filter: none;
  background-blend-mode: normal;
}

.app.theme-sun .primaryButton,
.app.theme-sun button.primaryButton,
.app.theme-sun .topActions .primaryButton,
.app.theme-sun .customerPortalFeedbackForm .primaryButton {
  background: var(--primary-action);
  color: var(--primary-action-text);
  -webkit-text-fill-color: var(--primary-action-text);
  border-color: transparent;
  text-shadow: none;
  opacity: 1;
  filter: none;
  forced-color-adjust: none;
}

.app.theme-sun .primaryButton *,
.app.theme-sun .primaryButton svg,
.app.theme-sun .primaryButton .bemIcon {
  color: var(--primary-action-text);
  -webkit-text-fill-color: var(--primary-action-text);
  stroke: currentColor;
  opacity: 1;
}

.app.theme-sun .primaryButton .bem-icon-mask,
.app.theme-sun .primaryButton .bem-icon-mask-inherit,
.app.theme-sun .primaryButton .bem-icon-mask-inverse {
  --bem-icon-color: var(--primary-action-text);
  background-color: var(--primary-action-text);
}

.app.theme-sun .topSoftButton,
.app.theme-sun .secondaryButton,
.app.theme-sun .miniButton,
.app.theme-sun .customerPortalQuickEntryCard,
.app.theme-sun .customerPortalDetailsPanel > summary button {
  background: var(--field-bg);
  color: var(--text-main);
  -webkit-text-fill-color: var(--text-main);
  border-color: var(--line);
  text-shadow: none;
  opacity: 1;
  filter: none;
}

.app.theme-sun .customerPortalQuickEntryCard strong,
.app.theme-sun .customerPortalDetailsPanel > summary strong {
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
}

.app.theme-sun .customerPortalQuickEntryCard em,
.app.theme-sun .customerPortalDetailsPanel > summary em,
.app.theme-sun .customerPortalDetailsPanel > summary span {
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
}

/* 管理端夜间可读性硬兜底：后台是长时间经营看板，系统暗色偏好不能把白底生产力界面整体压暗。 */
.app.theme-teal {
  color-scheme: light;
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.82);
  --field-bg: rgba(255, 255, 255, 0.92);
  --text-strong: #171b21;
  --text-main: #1d1d1f;
  --text-muted: #67717b;
  --line: #e5e5ea;
  --bem-text-strong: var(--text-strong);
  --bem-text-main: var(--text-main);
  --bem-text-muted: var(--text-muted);
  --bem-line: var(--line);
  --bem-surface: var(--surface);
  --bem-field-bg: var(--field-bg);
  filter: none;
  background-blend-mode: normal;
}

.app.theme-teal .panelTitleAction {
  background: var(--field-bg);
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
  border-color: var(--line);
  text-shadow: none;
  filter: none;
  opacity: 1;
}

.app.theme-teal .panelTitleAction * {
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
}

.app.theme-teal .businessMeta span,
.app.theme-teal .businessMeta em {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
  padding: 0;
  box-shadow: none;
}

/* 标题动作最终裁切兜底：覆盖后置全局 32px 固定高度，防止长上下文说明被裁掉。 */
.app .panelTitle {
  align-items: flex-start;
}

.app .panelTitleAction {
  height: auto;
  min-height: 32px;
  justify-content: flex-start;
  white-space: normal;
  line-height: 1.35;
  text-align: left;
  padding-block: 6px;
}

/* 业务元信息是说明文字，不参与状态胶囊和强强调规则。 */
.app .businessMeta span,
.app .businessMeta em {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
  padding: 0;
  box-shadow: none;
}

/* 扩展模块中的说明文字保持段落属性，避免被状态胶囊规则误伤成浅底块。 */
.app .leadClientConversionSteps article p,
.app .leadClientConversionSteps article em {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
  padding: 0;
  box-shadow: none;
}

.app .rolePermissionCommandCard p,
.app .rolePermissionCommandCard em {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
  padding: 0;
  box-shadow: none;
}

/* 长说明文字最终去胶囊：短标签保留标签感，整句说明回到段落/辅助信息属性。 */
.app .phaseItem em,
.app .client360Block .tagRow em,
.app .clientTabBlock .tagRow em,
.app .journeyCard .tagRow em {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
  padding: 0;
  box-shadow: none;
}

/* OKR/全局模型回归高密区最终降噪：父面板已成框，内部只用留白和浅底分区。 */
.app .globalModelRegressionGate .globalModelGrid > article {
  background: var(--surface-soft);
  border: 0;
  box-shadow: none;
}

.app .globalModelRegressionGate .globalModelStep {
  background: var(--field-bg);
  border: 0;
  box-shadow: none;
  text-rendering: optimizeLegibility;
}

.app .globalModelRegressionGate .globalModelStep > span:first-child,
.app .globalModelRegressionGate .globalModelStep > em {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  padding: 0;
}

/* 员工端按钮文字终局压层：处理暗色偏好、旧缓存入口和面板按钮被通用规则吞字的问题。 */
.app.theme-aqua .staffNowActions button,
.app.theme-aqua .staffActionTabs button,
.app.theme-aqua .staffFourActionDeck .panelTitleAction,
.app.theme-aqua .staffScanQuickPanel .panelTitleAction,
.app.theme-aqua .staffQuickRecordPanel .panelTitleAction,
.app.theme-aqua .staffExceptionPanel .panelTitleAction,
.app.theme-aqua .staffHandoverPanel .panelTitleAction,
.app.theme-aqua .roleTodayCommandDesk .panelTitleAction,
.app.theme-aqua .staffActionPanelCompact .panelTitleAction,
.app.theme-aqua .navButton,
.app.theme-aqua .portalButton,
.app.theme-aqua .activeStaffSwitch {
  background: var(--field-bg);
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
  border-color: var(--line);
  text-shadow: none;
  filter: none;
  opacity: 1;
  forced-color-adjust: none;
}

.app.theme-aqua .staffNowActions button *,
.app.theme-aqua .staffActionTabs button strong,
.app.theme-aqua .staffFourActionDeck .panelTitleAction *,
.app.theme-aqua .staffScanQuickPanel .panelTitleAction *,
.app.theme-aqua .staffQuickRecordPanel .panelTitleAction *,
.app.theme-aqua .staffExceptionPanel .panelTitleAction *,
.app.theme-aqua .staffHandoverPanel .panelTitleAction *,
.app.theme-aqua .roleTodayCommandDesk .panelTitleAction *,
.app.theme-aqua .staffActionPanelCompact .panelTitleAction *,
.app.theme-aqua .navButton *,
.app.theme-aqua .portalButton *,
.app.theme-aqua .activeStaffSwitch * {
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
  text-shadow: none;
  filter: none;
  opacity: 1;
}

.app.theme-aqua .staffActionTabs button em,
.app.theme-aqua .staffNowMain span,
.app.theme-aqua .staffNowMain em,
.app.theme-aqua .roleTodayCommandPrimary span,
.app.theme-aqua .roleTodayCommandPrimary p,
.app.theme-aqua .roleTodayCommandCard p,
.app.theme-aqua .roleTodayCommandCard em,
.app.theme-aqua .navButton span:not(.lineIcon),
.app.theme-aqua .portalButton span,
.app.theme-aqua .activeStaffSwitch span,
.app.theme-aqua .activeStaffSwitch em {
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
}

.app.theme-aqua .staffNowActions button:hover,
.app.theme-aqua .staffActionTabs button:hover,
.app.theme-aqua .staffActionTabs button.active,
.app.theme-aqua .navButton:hover,
.app.theme-aqua .navButton.active,
.app.theme-aqua .portalButton:hover,
.app.theme-aqua .portalButton.active {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
}

.app.theme-aqua .staffNowActions .bemIcon-brand,
.app.theme-aqua .staffActionTabs .bemIcon-brand {
  color: var(--brand-dna);
  -webkit-text-fill-color: var(--brand-dna);
  stroke: currentColor;
}

.app.theme-aqua .staffNowActions .bemIcon-danger,
.app.theme-aqua .staffActionTabs .bemIcon-danger {
  color: var(--danger);
  -webkit-text-fill-color: var(--danger);
  stroke: currentColor;
}

.app.theme-aqua .primaryButton,
.app.theme-aqua button.primaryButton,
.app.theme-aqua .roleTodayCommandDesk .primaryButton,
.app.theme-aqua .staffNowFocus .primaryButton,
.app.theme-aqua .staffFourActionDeck .primaryButton,
.app.theme-aqua .staffScanQuickPanel .primaryButton,
.app.theme-aqua .staffQuickRecordPanel .primaryButton,
.app.theme-aqua .staffExceptionPanel .primaryButton,
.app.theme-aqua .staffHandoverPanel .primaryButton {
  background: var(--primary-action);
  color: var(--primary-action-text);
  -webkit-text-fill-color: var(--primary-action-text);
  border-color: transparent;
  text-shadow: none;
  filter: none;
  opacity: 1;
  forced-color-adjust: none;
}

.app.theme-aqua .primaryButton *,
.app.theme-aqua .primaryButton svg,
.app.theme-aqua .primaryButton .bemIcon {
  color: var(--primary-action-text);
  -webkit-text-fill-color: var(--primary-action-text);
  stroke: currentColor;
  opacity: 1;
}
/* 员工端手机防溢出最终护栏：高频快录继续加字段时，App 壳子不能被按钮、客户名或下拉撑出屏幕。 */
@media (max-width: 720px) {
  body.frontPortalShell {
    overflow-x: hidden;
  }

  body.frontPortalShell .app.theme-aqua,
  body.frontPortalShell .main,
  body.frontPortalShell #content,
  body.frontPortalShell .panel,
  body.frontPortalShell .globalClientContextBar,
  body.frontPortalShell .staffNowFocus,
  body.frontPortalShell .staffAppleNowFocus,
  body.frontPortalShell .staffNowMain,
  body.frontPortalShell .staffNowActions,
  body.frontPortalShell .staffFourActionDeck,
  body.frontPortalShell .staffActionPanelCompact,
  body.frontPortalShell .staffActionTabs,
  body.frontPortalShell .staffScanForm,
  body.frontPortalShell .staffQuickRecordForm,
  body.frontPortalShell .staffExceptionForm,
  body.frontPortalShell .staffHandoverForm,
  body.frontPortalShell .staffQuickResponsibilityDetails,
  body.frontPortalShell .staffQuickResponsibilityBody,
  body.frontPortalShell .staffQuickIdentityContext,
  body.frontPortalShell .staffQuickCategoryTiles,
  body.frontPortalShell .staffQuickCategoryTileGrid,
  body.frontPortalShell .field {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100vw;
  }

  body.frontPortalShell .main,
  body.frontPortalShell #content,
  body.frontPortalShell .panel,
  body.frontPortalShell .staffActionPanelCompact {
    overflow-x: hidden;
  }

  body.frontPortalShell .globalClientContextBar {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  body.frontPortalShell .staffNowFocus,
  body.frontPortalShell .staffAppleNowFocus {
    grid-template-columns: 1fr;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    gap: 10px;
  }

  body.frontPortalShell .staffNowMain {
    width: 100%;
  }

  body.frontPortalShell .staffNowActions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    gap: 8px;
  }

  body.frontPortalShell .staffNowActions button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: start;
    padding: 0 10px;
  }

  body.frontPortalShell .staffActionTabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  body.frontPortalShell .staffActionTabs button {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  body.frontPortalShell .staffActionTabs button strong,
  body.frontPortalShell .staffActionTabs button em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.frontPortalShell .staffScanForm,
  body.frontPortalShell .staffQuickRecordForm,
  body.frontPortalShell .staffExceptionForm,
  body.frontPortalShell .staffHandoverForm {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
  }

  body.frontPortalShell .staffQuickCategoryTileGrid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  body.frontPortalShell .field,
  body.frontPortalShell label,
  body.frontPortalShell input,
  body.frontPortalShell select,
  body.frontPortalShell textarea,
  body.frontPortalShell button,
  body.frontPortalShell summary {
    min-width: 0;
    max-width: 100%;
  }

  body.frontPortalShell .staffNowClient,
  body.frontPortalShell .staffNowMain p,
  body.frontPortalShell .staffQuickIdentityContext strong,
  body.frontPortalShell .globalClientContextBar strong {
    overflow-wrap: anywhere;
  }
}

/* 客户 H5 手机防溢出最终护栏：服务动态、费用说明和评价长文本必须留在客户可读卡片内。 */
@media (max-width: 720px) {
  body.customerPortalShell {
    overflow-x: hidden;
  }

  body.customerPortalShell .app.theme-sun,
  body.customerPortalShell .main,
  body.customerPortalShell #content,
  body.customerPortalShell .panel,
  body.customerPortalShell .customerPortalView,
  body.customerPortalShell .customerPortalHero,
  body.customerPortalShell .customerPortalAppleHero,
  body.customerPortalShell .customerPortalQuickEntryGrid,
  body.customerPortalShell .customerPortalQuickEntryCard,
  body.customerPortalShell .customerPortalFocusGrid,
  body.customerPortalShell .customerPortalGrid,
  body.customerPortalShell .customerPortalDetailsPanel,
  body.customerPortalShell .customerPortalDetailsPanelBody,
  body.customerPortalShell .customerPortalFeedbackForm,
  body.customerPortalShell .customerPortalFeedbackTileGrid,
  body.customerPortalShell .customerPortalFeedbackScoreRow,
  body.customerPortalShell .customerPortalFeedbackScoreOptions,
  body.customerPortalShell .customerPortalItem,
  body.customerPortalShell .customerPortalMiniList,
  body.customerPortalShell .customerFinanceGrid,
  body.customerPortalShell .customerFeedbackActions {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100vw;
  }

  body.customerPortalShell .main,
  body.customerPortalShell #content,
  body.customerPortalShell .panel,
  body.customerPortalShell .customerPortalView,
  body.customerPortalShell .customerPortalDetailsPanel {
    overflow-x: hidden;
  }

  body.customerPortalShell .customerPortalHero,
  body.customerPortalShell .customerPortalAppleHero,
  body.customerPortalShell .customerPortalFocusGrid,
  body.customerPortalShell .customerPortalGrid,
  body.customerPortalShell .customerPortalFeedbackTileGrid,
  body.customerPortalShell .customerPortalFeedbackScoreRow,
  body.customerPortalShell .customerFinanceGrid,
  body.customerPortalShell .customerFeedbackActions {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
  }

  body.customerPortalShell .customerPortalHero,
  body.customerPortalShell .customerPortalAppleHero {
    grid-template-columns: 1fr;
  }

  body.customerPortalShell .customerPortalFeedbackScoreRow {
    grid-template-columns: 1fr;
  }

  body.customerPortalShell .customerPortalQuickEntryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
  }

  body.customerPortalShell .customerPortalQuickEntryCard,
  body.customerPortalShell .customerPortalItem,
  body.customerPortalShell .customerPortalDetailsPanel > summary {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body.customerPortalShell .customerPortalFeedbackScoreOptions {
    justify-content: flex-start;
  }

  body.customerPortalShell .field,
  body.customerPortalShell label,
  body.customerPortalShell input,
  body.customerPortalShell select,
  body.customerPortalShell textarea,
  body.customerPortalShell button,
  body.customerPortalShell summary {
    min-width: 0;
    max-width: 100%;
  }

  body.customerPortalShell .customerPortalHero h2,
  body.customerPortalShell .customerPortalHero p,
  body.customerPortalShell .customerPortalQuickEntryCard strong,
  body.customerPortalShell .customerPortalQuickEntryCard em,
  body.customerPortalShell .customerPortalDetailsPanel > summary strong,
  body.customerPortalShell .customerPortalDetailsPanel > summary em,
  body.customerPortalShell .customerPortalItem strong,
  body.customerPortalShell .customerPortalItem span,
  body.customerPortalShell .customerPortalItem p {
    overflow-wrap: anywhere;
  }
}

/* 移动端顶部栏防溢出最终护栏：三端共用顶部区不能被搜索框、标题或操作按钮撑出屏幕。 */
@media (max-width: 720px) {
  .app .topbar,
  .app .topActions,
  .app .searchBox,
  .app .topActions .primaryButton,
  .app .topActions .topSoftButton {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  .app .topbar {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    width: 100%;
    overflow-x: hidden;
  }

  .app .topbar h1 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app .topActions {
    overflow-x: hidden;
  }

  .app .searchBox {
    flex: 1 1 auto;
    width: auto;
  }

  .app .searchBox input {
    min-width: 0;
    text-overflow: ellipsis;
  }

  .app .topActions .primaryButton,
  .app .topActions .topSoftButton {
    flex: 0 0 auto;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 主体新 UI 最终覆盖层：顺序哨兵，保证响应式兜底后仍由 token 化最终层收口。 */
.managementHomeFocusGrid article,
.leadCommandCard,
.approvalFlow,
.customerPortalHero,
.customerPortalTransparencySteps article,
.customerPortalDetailsPanel,
.customerPortalFeedbackForm,
.customerPortalHeroCards article,
.customerPortalFocusStats article,
.customerPortalFocusGrid article,
.clientFocusSummary,
.careFocusStats article,
.inventoryFocusGrid article,
.globalClientContextBar,
.globalModelStep,
.roleTodayCommandCard,
.roomFocusStats article,
.roomFocusGrid article,
.roomCard,
.roomVerticalTable,
.roomCalendarEvent,
.roomOperationCard,
.dailyCommandMeta > div,
.dailyCommandItem,
.permissionCommandStats span,
.storeManagerCommandCenter,
.storeManagerCommandItem,
.staffPerformanceCard,
.roleAccountabilityItem,
.panel article,
.panel details,
.panel summary,
.businessCard,
.reminderCard,
.clientTaskCard,
.p0ApiPanel {
  background: var(--surface);
  border-color: var(--line);
}

.managementAreaSteps article > span,
.leadCommandCard > span,
.roleTodayCommandCard > span,
.metricIcon,
.roomDay,
.roomVerticalHead span,
.roomVerticalRow > strong,
.onSiteQuickRecordStepIndex,
.approvalQuickClosureStepIndex,
.secondaryButton,
.p0ApiFinalLayerSentinel {
  background: color-mix(in srgb, var(--accent) 14%, var(--bem-surface));
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  color: var(--text-strong);
}

.managementHomeFocusGrid b,
.leadCommandCard strong,
.p0ApiEventList strong {
  color: var(--text-strong);
}

.managementHomeFocusGrid p,
.leadCommandCard em,
.clientQuickAction p,
.p0ApiEmpty {
  color: var(--text-muted);
}