:root {
  --shell-bg: #f6f7f4;
  --shell-canvas: #fbfaf6;
  --shell-panel: #ffffff;
  --shell-panel-soft: #f0f4f1;
  --shell-border: #d9e0dc;
  --shell-border-strong: #b8c8c1;
  --shell-text: #1f2a27;
  --shell-muted: #697772;
  --shell-faint: #8a9893;
  --shell-accent: #0f6b63;
  --shell-accent-hover: #0a5952;
  --shell-blue: #276ef1;
  --shell-report: #7d4cc2;
  --shell-report-soft: #f3edff;
  --shell-booking: #c7447f;
  --shell-booking-soft: #fff0f6;
  --shell-invite: #7d4cc2;
  --shell-invite-soft: #f1e8fb;
  --shell-consult: #0f8f82;
  --shell-consult-soft: #e8f7f4;
  --shell-panke: #0e6f7c;
  --shell-panke-soft: #e7f4f5;
  --shell-face: #b48755;
  --shell-face-soft: #f7efe4;
  --shell-warn: #b7791f;
  --shell-danger: #c2413d;
  --shell-shadow: 0 10px 28px rgba(39, 53, 48, 0.08);
  --shell-radius: 10px;
  --shell-control-h: 32px;
  --shell-control-radius: 8px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--shell-bg);
}

/* 字号档位：外壳样式已 rem 化，抬根字号即整体温和放大；
   auto/small 保持浏览器默认 16px。模块侧不吃这条，由 unified-bridge 用 zoom 处理 */
html[data-font-scale="medium"] {
  font-size: 17px;
}

html[data-font-scale="large"] {
  font-size: 18px;
}

html.dingtalk-webview,
html.dingtalk-webview body {
  overscroll-behavior: none;
}

body {
  margin: 0;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--shell-text);
  background:
    linear-gradient(180deg, rgba(15, 107, 99, 0.07), transparent 260px),
    var(--shell-bg);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.muted {
  color: var(--shell-muted);
  font-size: 0.875rem;
}

.loginScreen {
  display: grid;
  place-items: center;
  height: 100%;
  overflow: auto;
  padding: 1.5rem;
}

.loginCard {
  width: min(460px, 100%);
  padding: 2rem;
  border: 1px solid var(--shell-border);
  border-radius: 16px;
  background: var(--shell-panel);
  box-shadow: var(--shell-shadow);
}

.loginCard h1 {
  margin: 0 0 0.45rem;
  color: #17231f;
  font-size: 1.65rem;
  line-height: 1.25;
}

.loginHint {
  margin: 0 0 1rem;
  color: var(--shell-muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

.loginStatus {
  min-height: 1.25rem;
  margin-bottom: 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 0.6rem 1rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-primary {
  background: var(--shell-accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--shell-accent-hover);
}

.btn-secondary {
  margin-top: 0.5rem;
  color: var(--shell-accent);
  background: #eef7f3;
  border-color: #cfe3dc;
}

.devLoginBox {
  margin-top: 1.25rem;
  font-size: 0.875rem;
}

.devLoginBox summary {
  cursor: pointer;
  color: var(--shell-muted);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.75rem 0;
}

.field input {
  min-height: 40px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--shell-border);
  border-radius: 8px;
  background: #fff;
  color: var(--shell-text);
  font: inherit;
}

.field input:focus {
  outline: none;
  border-color: rgba(15, 107, 99, 0.55);
  box-shadow: 0 0 0 3px rgba(15, 107, 99, 0.12);
}

.loginFoot {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
}

.loginFoot a {
  color: var(--shell-blue);
  font-weight: 700;
}

.appScreen {
  --module-width: clamp(360px, 25%, 720px);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--shell-bg);
}

.mobileBar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.8rem;
  padding-top: max(0.55rem, env(safe-area-inset-top));
  border-bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  flex-shrink: 0;
  gap: 0.6rem;
  min-width: 0;
}

.shellBrand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

button.shellBrand {
  min-height: 40px;
  padding: 0.25rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.shellBrand:hover {
  border-color: var(--shell-border);
  background: var(--shell-panel-soft);
}

.brandText {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.brandCaret {
  margin-left: 0.15rem;
  color: var(--shell-muted);
  font-size: 0.65rem;
}

.shellBrand--compact {
  gap: 0.5rem;
}

.shellBrand--compact .shellMark {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.78rem;
}

.shellBrand--compact strong {
  font-size: 0.9rem;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shellMark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: #0f6b63;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
}

.shellUser {
  display: block;
  color: var(--shell-text);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shellTopActions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.32rem;
  margin-left: auto;
}

.shellInviteTools {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.shellInviteAuth,
.shellToolBtn,
.shellBtn--logout {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  border-radius: 12px;
  white-space: nowrap;
}

.shellInviteAuth {
  max-width: 112px;
  padding: 0 0.62rem;
  border: 1px solid rgba(15, 107, 99, 0.22);
  background: #eff8f5;
  color: #116b4f;
  font-size: 0.76rem;
  font-weight: 800;
  overflow: hidden;
}

.shellInviteAuth span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.shellInviteAuth.warn {
  border-color: rgba(154, 100, 0, 0.24);
  background: #fff7e6;
  color: #8a5a00;
}

.shellInviteAuth.ok {
  border-color: rgba(15, 107, 99, 0.22);
  background: #eff8f5;
  color: #116b4f;
}

.shellToolBtn {
  padding: 0 0.58rem;
  border: 1px solid var(--shell-border);
  background: #fff;
  color: var(--shell-text);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.shellToolBtn--accent {
  color: var(--shell-invite);
}

.shellToolBtn:hover {
  border-color: var(--shell-border-strong);
  background: var(--shell-panel-soft);
}

.shellBtn {
  min-height: var(--shell-control-h);
  padding: 0.35rem 0.72rem;
  border: 1px solid var(--shell-border);
  border-radius: var(--shell-control-radius);
  background: #fff;
  color: var(--shell-text);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.shellBtn--logout {
  padding: 0 0.62rem;
}

.shellBtn:hover {
  border-color: var(--shell-border-strong);
  background: var(--shell-panel-soft);
}

.shellGrid {
  display: grid;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  grid-template-columns: 1fr;
}

.workspacePanel {
  display: none;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--shell-border);
  background: var(--shell-canvas);
}

.workspaceToolbar {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  flex-shrink: 0;
  min-width: 0;
  min-height: 46px;
  padding: 0.4rem 0.65rem;
  border-bottom: 1px solid var(--shell-border);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

.toolbarBrand {
  padding-right: 0.55rem;
  margin-right: 0.12rem;
  border-right: 1px solid var(--shell-border);
}

.workspaceTabs {
  display: flex;
  align-items: center;
  min-width: 0;
  align-self: stretch;
  padding: 0.1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  border: 1px solid var(--shell-border);
  border-radius: 9px;
  background: #f4f7f5;
}

.workspaceTabs {
  gap: 0.12rem;
  flex: 1;
}

.moduleToolbar {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 42px;
  height: 42px;
  min-width: 0;
  padding: 0;
  border-bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

.moduleChrome {
  flex: 0 0 auto;
  min-width: 0;
}

.moduleTabs {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  width: 100%;
  min-width: 0;
  padding: 4px max(18px, env(safe-area-inset-left)) 4px max(18px, env(safe-area-inset-right));
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  border: 0;
  border-top: 1px solid var(--shell-border);
  border-bottom: 1px solid var(--shell-border);
  border-radius: 0;
  background: #f4f7f5;
}

.workspaceTab,
.moduleTab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  flex: 0 0 auto;
  max-width: 168px;
  min-width: 88px;
  min-height: 30px;
  margin-bottom: 0;
  padding: 0.32rem 0.68rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--shell-muted);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
  white-space: nowrap;
}

.moduleTab {
  min-width: 88px;
  max-width: 148px;
  min-height: 32px;
  height: 32px;
  --module-tab-accent: var(--shell-accent);
  --module-tab-soft: #e9f5f1;
  --module-tab-idle: transparent;
  --module-tab-text: var(--shell-accent);
  --module-tab-border: #a9d6c6;
  background: var(--module-tab-idle);
  color: var(--module-tab-text);
}

.moduleTab--report {
  --module-tab-accent: var(--shell-report);
  --module-tab-soft: var(--shell-report-soft);
  --module-tab-idle: transparent;
  --module-tab-text: #6f3fb0;
  --module-tab-border: #d8c2f3;
}

.moduleTab--booking {
  --module-tab-accent: var(--shell-booking);
  --module-tab-soft: var(--shell-booking-soft);
  --module-tab-idle: transparent;
  --module-tab-text: #a62d65;
  --module-tab-border: #efadc9;
}

.moduleTab--consult {
  --module-tab-accent: var(--shell-consult);
  --module-tab-soft: var(--shell-consult-soft);
  --module-tab-idle: transparent;
  --module-tab-text: #087368;
  --module-tab-border: #9edbd2;
}

.moduleTab--panke {
  --module-tab-accent: var(--shell-panke);
  --module-tab-soft: var(--shell-panke-soft);
  --module-tab-idle: transparent;
  --module-tab-text: #0b5f6b;
  --module-tab-border: #9ccfd6;
}

.moduleTab--invite {
  --module-tab-accent: var(--shell-invite);
  --module-tab-soft: var(--shell-invite-soft);
  --module-tab-idle: transparent;
  --module-tab-text: #6f3fb0;
  --module-tab-border: #d8c2f3;
}

.moduleTab--face {
  --module-tab-accent: var(--shell-face);
  --module-tab-soft: var(--shell-face-soft);
  --module-tab-idle: transparent;
  --module-tab-text: #8a6236;
  --module-tab-border: #dbc2a2;
}

.workspaceTab[draggable="true"] {
  cursor: grab;
}

.workspaceTab::after,
.moduleTab::after {
  display: none;
}

.workspaceTab:hover,
.moduleTab:hover {
  background: var(--module-tab-soft);
}

.workspaceTab:hover {
  color: var(--shell-accent);
}

.moduleTab:hover {
  color: var(--module-tab-text);
}

.workspaceTab:focus-visible,
.moduleTab:focus-visible,
.shellBtn:focus-visible {
  outline: none;
  border-color: var(--shell-accent);
  box-shadow: 0 0 0 3px rgba(15, 107, 99, 0.12);
}

.moduleTab.active {
  color: #fff;
  background: var(--module-tab-accent, var(--shell-accent));
  border-color: var(--module-tab-accent, var(--shell-accent));
  box-shadow: 0 4px 12px rgba(28, 69, 54, 0.12);
  z-index: 2;
}

.workspaceTab.active {
  color: var(--shell-accent);
  background: #fff;
  border-color: var(--shell-border);
  box-shadow: 0 4px 12px rgba(28, 69, 54, 0.08);
  z-index: 2;
}

.workspaceTab.active::after,
.workspaceTab:last-child::after,
.moduleTab.active::after,
.moduleTab:last-child::after {
  display: none;
}

.workspaceTab[draggable="true"]:active {
  cursor: grabbing;
}

.workspaceTab.is-dragging {
  opacity: 0.52;
  transform: translateY(2px);
}

.workspaceTab.is-drop-target {
  box-shadow: inset 3px 0 0 var(--shell-accent);
}

.workspaceTab.is-drop-target.is-drop-after {
  box-shadow: inset -3px 0 0 var(--shell-accent);
}

.workspaceTabLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workspaceTabClose {
  display: inline-grid;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  color: #73847c;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.workspaceTabClose:hover {
  background: rgba(15, 65, 45, 0.11);
  color: var(--shell-text);
}

.shellBtn--sm {
  min-height: 30px;
  padding: 0.3rem 0.55rem;
  font-size: 0.75rem;
}

.shellBtn--link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.embedHint {
  display: none;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid #f0d99a;
  background: #fff6da;
  color: #715018;
  font-size: 0.78rem;
}

.embedHint[hidden] {
  display: none;
}

.embedHintText {
  line-height: 1.35;
}

.embedHintBtn {
  border: none;
  border-radius: 7px;
  background: var(--shell-accent);
  color: #fff;
  padding: 0.25rem 0.6rem;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.embedHintBtn:hover {
  background: var(--shell-accent-hover);
}

.embedHintClose {
  margin-left: auto;
  border: none;
  background: transparent;
  color: #715018;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.ruimeiFrameWrap {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.ruimeiFrame {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}

.ruimeiFallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  background: var(--shell-panel);
  color: var(--shell-muted);
  font-size: 0.9rem;
}

.ruimeiFallback .btn {
  width: auto;
  display: inline-flex;
}

.workspaceResizeHandle {
  display: none;
  min-height: 0;
}

.modulePanel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--shell-bg);
}

.moduleFrame {
  flex: 1;
  min-height: 0;
  display: block;
  width: 100%;
  height: auto;
  border: none;
  background: #fff;
  overflow: hidden;
}

@media (max-width: 720px) {
  .appScreen,
  .modulePanel,
  .shellGrid {
    min-height: 0;
  }

  .mobileBar {
    min-height: 56px;
  }

  .appScreen[data-active-workbench="invite"] .mobileBar {
    gap: 0.35rem;
    padding: 0.5rem 0.55rem;
    background: #fff;
  }

  .shellBrand--compact {
    flex: 0 1 auto;
    max-width: min(240px, calc(100vw - 108px));
  }

  .appScreen[data-active-workbench="invite"] .shellBrand--compact {
    flex: 0 0 auto;
    max-width: 104px;
    gap: 0.34rem;
    padding: 0;
  }

  .appScreen[data-active-workbench="invite"] .shellBrand--compact .shellMark {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 12px;
    font-size: 1rem;
  }

  .appScreen[data-active-workbench="invite"] .shellUser {
    max-width: 46px;
    font-size: 1.08rem;
    line-height: 1;
  }

  .appScreen[data-active-workbench="invite"] .brandCaret {
    font-size: 0.78rem;
  }

  .shellBtn {
    min-height: 40px;
    flex: 0 0 auto;
  }

  .appScreen[data-active-workbench="invite"] .shellBtn,
  .appScreen[data-active-workbench="invite"] .shellToolBtn,
  .appScreen[data-active-workbench="invite"] .shellInviteAuth {
    flex: 0 0 auto;
    min-height: 36px;
    border-radius: 10px;
    border-color: #d6d9dc;
    font-size: 0.82rem;
  }

  .appScreen[data-active-workbench="invite"] .shellBtn--logout {
    width: 50px;
    padding: 0;
    font-size: 0.82rem;
  }

  .appScreen[data-active-workbench="invite"] .shellInviteAuth {
    width: 76px;
    max-width: 76px;
    padding: 0 0.34rem;
    background: #eff8f5;
    color: #0e6d50;
    border-color: #bdd9d0;
  }

  .appScreen[data-active-workbench="invite"] .shellToolBtn {
    padding: 0;
    background: #fff;
  }

  .appScreen[data-active-workbench="invite"] #inviteShellRefreshBtn {
    width: 54px;
  }

  .appScreen[data-active-workbench="invite"] #inviteShellAiBtn {
    width: 40px;
  }

  .appScreen[data-active-workbench="invite"] .shellTopActions,
  .appScreen[data-active-workbench="invite"] .shellInviteTools {
    gap: 0.22rem;
  }

  .moduleToolbar {
    min-height: 38px;
    height: 38px;
  }

  .appScreen[data-active-workbench="invite"] .moduleToolbar {
    min-height: 50px;
    height: 50px;
    padding: 4px 10px 7px;
    background: #fff;
  }

  .appScreen[data-active-workbench="invite"] .moduleTabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    height: 100%;
    padding: 2px;
    border: 1px solid #d5d8dd;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
  }

  .appScreen[data-active-workbench="invite"] .moduleTab {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 37px;
    border-radius: 13px;
    font-size: 0.98rem;
    font-weight: 800;
  }

  .appScreen[data-active-workbench="invite"] .moduleTab.active {
    background: linear-gradient(135deg, #8750d0 0%, #6233bb 100%);
    color: #fff;
    box-shadow: 0 8px 18px rgba(91, 46, 183, 0.22);
  }
}

/* Unified booking/invite/wangzi chrome: account row, main tabs, shared status bar. */
.appScreen[data-active-workbench="booking"] .mobileBar,
.appScreen[data-active-workbench="invite"] .mobileBar,
.appScreen[data-active-workbench="wangzi"] .mobileBar {
  min-height: 56px !important;
  padding: 10px max(12px, env(safe-area-inset-left)) 8px max(12px, env(safe-area-inset-right)) !important;
  border-bottom: 1px solid var(--shell-border);
  background: #fff;
}

.appScreen[data-active-workbench="booking"] .mobileBar .shellBrand,
.appScreen[data-active-workbench="invite"] .mobileBar .shellBrand,
.appScreen[data-active-workbench="wangzi"] .mobileBar .shellBrand {
  width: auto !important;
  max-width: 190px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.appScreen[data-active-workbench="booking"] .mobileBar .shellMark,
.appScreen[data-active-workbench="invite"] .mobileBar .shellMark,
.appScreen[data-active-workbench="wangzi"] .mobileBar .shellMark {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
}

.appScreen[data-active-workbench="booking"] .mobileBar .shellUser,
.appScreen[data-active-workbench="invite"] .mobileBar .shellUser,
.appScreen[data-active-workbench="wangzi"] .mobileBar .shellUser {
  max-width: 96px !important;
  font-size: 1rem !important;
  line-height: 1.05 !important;
}

.appScreen[data-active-workbench="booking"] .moduleToolbar,
.appScreen[data-active-workbench="invite"] .moduleToolbar,
.appScreen[data-active-workbench="wangzi"] .moduleToolbar {
  min-height: 46px !important;
  height: 46px !important;
  padding: 5px 10px !important;
  background: #fff !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.appScreen[data-active-workbench="booking"] .moduleTabs,
.appScreen[data-active-workbench="invite"] .moduleTabs,
.appScreen[data-active-workbench="wangzi"] .moduleTabs {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  height: 36px !important;
  padding: 2px !important;
  gap: 0 !important;
  border: 1px solid #d8dde0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
}

.appScreen[data-active-workbench="booking"] .moduleTabs::-webkit-scrollbar,
.appScreen[data-active-workbench="invite"] .moduleTabs::-webkit-scrollbar,
.appScreen[data-active-workbench="wangzi"] .moduleTabs::-webkit-scrollbar {
  display: none;
}

.appScreen[data-active-workbench="booking"] .moduleTab,
.appScreen[data-active-workbench="invite"] .moduleTab,
.appScreen[data-active-workbench="wangzi"] .moduleTab {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.appScreen[data-active-workbench="booking"] .moduleTab.active {
  background: linear-gradient(135deg, #c64d83 0%, #a72962 100%) !important;
  color: #fff !important;
}

.appScreen[data-active-workbench="invite"] .moduleTab.active {
  background: linear-gradient(135deg, #8b50d4 0%, #6733bd 100%) !important;
  color: #fff !important;
}

.appScreen[data-active-workbench="wangzi"] .moduleTab.active {
  background: linear-gradient(135deg, #8b50d4 0%, #6733bd 100%) !important;
  color: #fff !important;
}

.moduleStatusBar {
  flex: 0 0 auto;
  min-height: 38px;
  height: 38px;
  display: grid;
  /* 右侧按钮按文案取宽，剩余空间归账号入口（名字自带省略号），窄栏时才不会互相压字 */
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(31, 42, 39, 0.1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  container-type: inline-size;
}

.moduleStatusBar[hidden] {
  display: none !important;
}

/* 320px 最窄面板放不下五项全文案：刷新/退出退化为纯图标（title 仍在），把宽度让给账号名。
   全屏 CRM 的竖排菜单不受影响。 */
@container (max-width: 360px) {
  .appScreen:not(.workspace-collapsed) .moduleStatusBar .moduleStatusBtn--iconOnlyNarrow span {
    display: none;
  }

  .appScreen:not(.workspace-collapsed) .moduleStatusBar .moduleStatusBtn--iconOnlyNarrow {
    gap: 0;
    padding: 0 0.42rem;
  }
}

/* 文案隐藏时"刷新中…"看不见，用图标旋转表达 busy */
.moduleStatusBtn[aria-busy="true"] .ri-refresh-line {
  animation: moduleStatusSpin 0.9s linear infinite;
}

@keyframes moduleStatusSpin {
  to {
    transform: rotate(360deg);
  }
}

.moduleStatusBtn {
  min-width: 0;
  min-height: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  width: 100%;
  padding: 0 0.3rem;
  border: 0;
  border-left: 1px solid rgba(31, 42, 39, 0.16);
  border-radius: 0;
  background: transparent;
  color: var(--shell-text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.moduleStatusBtn {
  cursor: pointer;
}

/* 大档下五项的内边距一起变宽，320px 最窄侧栏时会吃掉"隐藏睿美云"最后一个字；
   只收内边距不动字号，用户要的大字仍然是大字 */
html[data-font-scale="medium"] .moduleStatusBtn,
html[data-font-scale="large"] .moduleStatusBtn {
  padding: 0 0.2rem;
  gap: 0.22rem;
}

.moduleStatusBtn:hover {
  color: var(--shell-accent);
}

.appScreen[data-active-workbench="booking"] .moduleStatusBtn:hover {
  color: var(--shell-booking);
}

.appScreen[data-active-workbench="invite"] .moduleStatusBtn:hover {
  color: var(--shell-invite);
}

.moduleStatusBtn i {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
}

/* 选择器带 button：否则 button.shellBrand 的 40px/圆角/透明边框会压过这里的小号变体。
   账号入口是状态条第一项，不带左分隔线。 */
button.moduleStatusAccount {
  min-width: 0;
  min-height: 30px;
  height: 30px;
  width: 100%;
  margin: 0;
  padding: 0 0.35rem;
  gap: 0.3rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

button.moduleStatusAccount:hover {
  border-color: transparent;
  background: transparent;
  color: var(--shell-accent);
}

/* 登录态盾牌：绿 = 数据就绪，黄 = 已登录但睿美云数据授权未获取，灰 = 未登录 */
.moduleStatusAuthIcon {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  color: #0f6b50;
}

.moduleStatusAuthIcon.warn {
  color: #d08a1f;
}

.moduleStatusAuthIcon.bad {
  color: var(--shell-muted);
}

/* 状态条通常只有 320~400px 宽：账号入口不放头像块、字号压小 */
.moduleStatusAccount .shellUser {
  font-size: 0.78rem;
}

.moduleStatusAccount .brandCaret {
  font-size: 0.55rem;
}

.consultantBriefModal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: clamp(48px, 8vh, 72px) 24px 24px;
}

.consultantBriefModal[hidden] {
  display: none !important;
}

.consultantBriefBackdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(10, 28, 43, 0.34);
  backdrop-filter: blur(10px);
}

.consultantBriefBackdrop:disabled {
  cursor: wait;
}

.consultantBriefDialog {
  position: relative;
  width: min(960px, 100%);
  max-height: calc(100vh - clamp(72px, 11vh, 108px));
  overflow: auto;
  padding: 22px 24px 20px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 199, 87, 0.52), transparent 31%),
    radial-gradient(circle at 10% 0%, rgba(28, 184, 231, 0.36), transparent 28%),
    linear-gradient(145deg, #fff7d7 0%, #ffffff 40%, #e9fbff 100%);
  color: #12231f;
  box-shadow: 0 34px 80px rgba(15, 77, 105, 0.26);
}

.consultantBriefTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.consultantBriefTop span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.22rem 0.68rem;
  border: 1px solid rgba(8, 132, 122, 0.18);
  border-radius: 999px;
  background: #e1f8f5;
  color: #08746b;
  font-size: 0.78rem;
  font-weight: 900;
}

.consultantBriefClose {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(8, 132, 122, 0.16);
  border-radius: 999px;
  background: #ffffff;
  color: #17302b;
  cursor: pointer;
  font: inherit;
  font-size: 1.1rem;
}

.consultantBriefHello {
  margin: 12px 0 4px;
  color: #0a7a72;
  font-size: 0.9rem;
  font-weight: 800;
}

.consultantBriefDialog h2 {
  margin: 0;
  max-width: 13em;
  color: #10201d;
  font-size: clamp(1.72rem, 3.3vw, 2.45rem);
  line-height: 1.15;
  letter-spacing: 0;
}

.consultantBriefList {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.consultantBriefList li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px 10px 40px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.82);
  color: #1f332e;
  font-size: 0.94rem;
  line-height: 1.55;
}

.consultantBriefList li.needs-ack {
  grid-template-columns: minmax(0, 1fr) auto;
  padding-right: 10px;
}

.consultantBriefPriorityText {
  min-width: 0;
}

.consultantBriefAckBtn {
  min-height: 28px;
  padding: 0.24rem 0.68rem;
  border: 1px solid rgba(255, 122, 69, 0.38);
  border-radius: 999px;
  background: #fff7ed;
  color: #c75625;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.consultantBriefAckBtn:hover {
  border-color: rgba(255, 122, 69, 0.72);
  background: #fff0df;
}

.consultantBriefAckBtn.done,
.consultantBriefAckBtn:disabled {
  border-color: rgba(15, 107, 99, 0.24);
  background: #e8f5f1;
  color: var(--shell-accent);
  cursor: default;
}

.consultantBriefList li::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 16px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #ff9f43;
  box-shadow: 0 0 0 5px rgba(255, 159, 67, 0.18);
}

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

.consultantBriefMetrics article {
  min-width: 0;
  min-height: 104px;
  padding: 13px;
  border: 1px solid rgba(12, 131, 122, 0.12);
  border-radius: 14px;
  background: #ffffff;
  color: #12231f;
}

.consultantBriefMetrics span,
.consultantBriefMetrics strong,
.consultantBriefMetrics em {
  display: block;
}

/* 数据源暂不可用 / 快照缺项：弱化数值，避免被读成 0 业绩 */
.consultantBriefMetrics article[data-unavailable="1"] strong {
  color: #9aa8a4;
  font-size: 1.05rem;
}

/* 指标脚注：告知这是几号的快照还是实时统计，横跨整行 */
.consultantBriefMetrics .consultantBriefMetricsSource {
  grid-column: 1 / -1;
  margin: 0;
  color: #7a8c87;
  font-size: 0.72rem;
  line-height: 1.5;
}

.consultantBriefMetrics span {
  color: #657b75;
  font-size: 0.72rem;
  font-weight: 900;
}

.consultantBriefMetrics strong {
  margin-top: 8px;
  color: #f0643c;
  font-size: 1.42rem;
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.consultantBriefMetrics em {
  margin-top: 7px;
  color: #667973;
  font-size: 0.76rem;
  font-style: normal;
  line-height: 1.45;
}

.consultantBriefEncouragement {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 13px;
  background: linear-gradient(135deg, #fff0c2, #ffe1c9);
  color: #533a08;
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.65;
}

.consultantBriefActions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.consultantBriefActions .shellBtn {
  min-width: 132px;
  border-color: #ff7a45;
  background: #ff7a45;
  color: #fff;
  box-shadow: 0 14px 30px rgba(255, 122, 69, 0.28);
}

.consultantBriefClose:disabled,
.consultantBriefActions .shellBtn:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  box-shadow: none;
}

.consultantBriefModal.is-close-locked .consultantBriefClose,
.consultantBriefModal.is-close-locked .consultantBriefActions .shellBtn {
  border-color: rgba(102, 121, 115, 0.24);
  background: #e9efed;
  color: #6c7b76;
}

.accountMenu {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 20px);
  max-width: calc(100vw - 20px);
  overflow: auto;
  overscroll-behavior: contain;
  position: fixed;
  top: 48px;
  left: 10px;
  z-index: 120;
  min-width: min(240px, calc(100vw - 20px));
  padding: 6px;
  border: 1px solid var(--shell-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shell-shadow);
}

.accountMenu[hidden] {
  display: none;
}

.accountMenuBackdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  border: none;
  background: transparent;
  cursor: default;
}

.accountMenuBackdrop[hidden] {
  display: none;
}

.accountList {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow: auto;
}

.accountRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--shell-text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.accountRow:hover {
  background: var(--shell-panel-soft);
}

.accountRow.active {
  background: #e6f3ef;
}

.accountRow .accountName {
  font-size: 0.9rem;
  font-weight: 700;
}

.accountRow .accountWb {
  color: var(--shell-muted);
  font-size: 0.72rem;
}

.accountEmpty {
  padding: 0.6rem;
  color: var(--shell-muted);
  font-size: 0.82rem;
}

.accountActions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--shell-border);
}

.accountAction {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--shell-text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.accountAction:hover {
  background: var(--shell-panel-soft);
}

.accountAction--home {
  color: var(--shell-accent);
  font-weight: 800;
}

.accountAction--home:hover {
  background: #e8f7f4;
}

.accountAction.danger {
  color: var(--shell-danger);
}

@media (max-width: 900px) {
  .consultantBriefMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .consultantBriefModal {
    align-items: end;
    padding: 10px;
  }

  .consultantBriefDialog {
    width: 100%;
    max-height: min(88vh, 720px);
    padding: 16px;
    border-radius: 18px;
  }

  .consultantBriefDialog h2 {
    max-width: 11em;
    font-size: 1.72rem;
  }

  .consultantBriefMetrics {
    grid-template-columns: 1fr;
  }

  .consultantBriefMetrics article {
    min-height: 86px;
  }

  .consultantBriefActions {
    position: sticky;
    bottom: -16px;
    margin: 14px -16px -16px;
    padding: 12px 16px 16px;
    background: linear-gradient(180deg, rgba(255, 247, 215, 0), #fff7d7 34%);
  }

  .consultantBriefActions .shellBtn {
    width: 100%;
  }
}

.moduleExpandBtn {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 110;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 72px;
  border: 1px solid var(--shell-border);
  border-right: none;
  border-radius: 8px 0 0 8px;
  background: #fff;
  color: var(--shell-text);
  cursor: pointer;
  font-size: 14px;
  transform: translateY(-50%);
}

.workspaceExpandBtn {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 110;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 72px;
  border: 1px solid var(--shell-border);
  border-left: none;
  border-radius: 0 8px 8px 0;
  background: #fff;
  color: var(--shell-text);
  cursor: pointer;
  font-size: 14px;
  transform: translateY(-50%);
}

@media (min-width: 1024px) {
  .shellGrid {
    grid-template-columns: minmax(420px, 1fr) 8px minmax(320px, var(--module-width));
  }

  .workspacePanel {
    display: flex;
  }

  .workspaceResizeHandle {
    position: relative;
    display: block;
    width: 8px;
    min-width: 8px;
    cursor: col-resize;
    background: linear-gradient(90deg, #eef3f0, #f9fbfa 48%, #eef3f0);
    border-left: 1px solid rgba(31, 42, 39, 0.08);
    border-right: 1px solid rgba(31, 42, 39, 0.08);
    touch-action: none;
  }

  .workspaceResizeHandle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 34px;
    border-radius: 999px;
    background: #c6d2cc;
    transform: translate(-50%, -50%);
  }

  .workspaceResizeHandle:hover,
  .appScreen.is-resizing-workspace .workspaceResizeHandle {
    background: linear-gradient(90deg, #e7f0ec, #f7fbf9 48%, #e7f0ec);
  }

  .workspaceResizeHandle:hover::after,
  .appScreen.is-resizing-workspace .workspaceResizeHandle::after {
    background: var(--shell-accent);
  }

  .appScreen.is-resizing-workspace,
  .appScreen.is-resizing-workspace * {
    cursor: col-resize !important;
    user-select: none;
  }

  .appScreen.is-resizing-workspace iframe {
    pointer-events: none;
  }

  .appScreen.module-collapsed .shellGrid {
    grid-template-columns: 1fr;
  }

  .appScreen.module-collapsed .workspaceResizeHandle {
    display: none;
  }

  .appScreen.module-collapsed .modulePanel {
    display: none;
  }

  .appScreen.module-collapsed .moduleExpandBtn {
    display: flex;
  }

  .appScreen.workspace-collapsed .shellGrid {
    grid-template-columns: 1fr;
  }

  .appScreen.workspace-collapsed .workspacePanel {
    display: none;
  }

  .appScreen.workspace-collapsed .workspaceResizeHandle {
    display: none;
  }

  .appScreen.workspace-collapsed .workspaceExpandBtn {
    display: flex;
  }
}

@media (max-width: 1023.98px) {
  /* 移动端不展示账号行：普通使用不需要切账号/回首页，省出内容高度 */
  .mobileBar {
    display: none !important;
  }

  .js-toggle-module,
  .js-toggle-workspace {
    display: none;
  }

  /* 右栏账号入口只为"桌面端收起左栏"兜底；移动端仍不展示账号 */
  button.moduleStatusAccount {
    display: none;
  }

  /* 剩下四项：登录态 / 字号 / 刷新 / 退出，字号按文案取宽免得挤成两行 */
  .moduleStatusBar {
    grid-template-columns: minmax(0, 2fr) auto minmax(0, 1fr) minmax(0, 1fr);
  }

  /* iframe 内部拿不到安全区，只能由外壳留出高度；窄屏下 mobileBar 已隐藏，右栏就是最顶层元素 */
  .modulePanel {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 720px) {
  .appScreen[data-active-workbench="invite"] .mobileBar {
    min-height: 48px;
    padding: 0.38rem 0.48rem;
  }

  .appScreen[data-active-workbench="invite"] .shellBrand--compact {
    max-width: 96px;
  }

  .appScreen[data-active-workbench="invite"] .shellBrand--compact .shellMark {
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    font-size: 0.9rem;
  }

  .appScreen[data-active-workbench="invite"] .shellUser {
    max-width: 44px;
    font-size: 0.98rem;
  }

  .appScreen[data-active-workbench="invite"] .brandCaret {
    font-size: 0.7rem;
  }

  .appScreen[data-active-workbench="invite"] .shellTopActions,
  .appScreen[data-active-workbench="invite"] .shellInviteTools {
    gap: 0.12rem;
  }

  .appScreen[data-active-workbench="invite"] .shellInviteAuth,
  .appScreen[data-active-workbench="invite"] .shellToolBtn,
  .appScreen[data-active-workbench="invite"] .shellBtn--logout {
    min-height: 32px;
    width: auto;
    max-width: none;
    padding: 0 0.42rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.78rem;
  }

  .appScreen[data-active-workbench="invite"] .shellInviteAuth {
    color: #0e6d50;
  }

  .appScreen[data-active-workbench="invite"] #inviteShellRefreshBtn,
  .appScreen[data-active-workbench="invite"] #inviteShellAiBtn,
  .appScreen[data-active-workbench="invite"] .shellBtn--logout {
    width: auto;
    border-left: 1px solid #d7dadd;
  }

  .appScreen[data-active-workbench="invite"] .shellToolIcon {
    font-size: 1rem;
  }

  .appScreen[data-active-workbench="invite"] .moduleToolbar {
    min-height: 36px;
    height: 36px;
    padding: 2px 10px 4px;
  }

  .appScreen[data-active-workbench="invite"] .moduleTabs {
    height: 30px;
    padding: 1px;
    border-radius: 9px;
  }

  .appScreen[data-active-workbench="invite"] .moduleTab {
    min-height: 26px;
    border-radius: 8px;
    font-size: 0.82rem;
  }

  .appScreen[data-active-workbench="invite"] .moduleTab.active {
    box-shadow: none;
  }
}

@media (max-width: 720px) {
  .appScreen[data-active-workbench="invite"] .shellInviteTools {
    gap: 0 !important;
    margin-right: 0.18rem !important;
  }

  .appScreen[data-active-workbench="invite"] .shellInviteAuth,
  .appScreen[data-active-workbench="invite"] #inviteShellRefreshBtn.shellToolBtn,
  .appScreen[data-active-workbench="invite"] #inviteShellAiBtn.shellToolBtn,
  .appScreen[data-active-workbench="invite"] .shellBtn--logout {
    min-height: 30px !important;
    padding: 0 0.36rem !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.74rem !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .appScreen[data-active-workbench="invite"] .shellInviteAuth {
    border-left: 0 !important;
    max-width: 72px !important;
  }

  .appScreen[data-active-workbench="invite"] #inviteShellRefreshBtn.shellToolBtn,
  .appScreen[data-active-workbench="invite"] #inviteShellAiBtn.shellToolBtn,
  .appScreen[data-active-workbench="invite"] .shellBtn--logout {
    border-left: 1px solid rgba(31, 42, 39, 0.18) !important;
  }

  .appScreen[data-active-workbench="invite"] #inviteShellAiBtn.shellToolBtn {
    color: var(--shell-invite) !important;
    width: 38px !important;
    justify-content: center !important;
  }

  .appScreen[data-active-workbench="invite"] .shellBtn--logout {
    width: 52px !important;
    justify-content: center !important;
  }

  .appScreen[data-active-workbench="invite"] .shellToolIcon,
  .appScreen[data-active-workbench="invite"] .shellInviteAuth i,
  .appScreen[data-active-workbench="invite"] .shellToolBtn i,
  .appScreen[data-active-workbench="invite"] .shellBtn--logout i {
    font-size: 0.92rem !important;
  }

  .appScreen[data-active-workbench="invite"] .moduleToolbar {
    min-height: 42px !important;
    height: 42px !important;
    padding: 4px 10px !important;
  }

  .appScreen[data-active-workbench="invite"] .moduleTabs {
    height: 34px !important;
    border-radius: 10px !important;
  }

  .appScreen[data-active-workbench="invite"] .moduleTab {
    min-height: 30px !important;
    border-radius: 9px !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
  }
}

/* Final override: keep booking/invite/wangzi chrome identical after legacy mobile rules. */
.appScreen[data-active-workbench="booking"] .moduleChrome,
.appScreen[data-active-workbench="invite"] .moduleChrome,
.appScreen[data-active-workbench="wangzi"] .moduleChrome {
  flex: 0 0 auto !important;
  width: calc(100% - 20px) !important;
  margin: 0 10px 6px !important;
  border: 1px solid #d8dde0 !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset !important;
  overflow: hidden !important;
}

.appScreen[data-active-workbench="booking"] .modulePanel,
.appScreen[data-active-workbench="invite"] .modulePanel,
.appScreen[data-active-workbench="wangzi"] .modulePanel,
.appScreen[data-active-workbench="booking"] .moduleFrame,
.appScreen[data-active-workbench="invite"] .moduleFrame,
.appScreen[data-active-workbench="wangzi"] .moduleFrame {
  background: #fff !important;
}

.appScreen[data-active-workbench="booking"] .moduleToolbar,
.appScreen[data-active-workbench="invite"] .moduleToolbar,
.appScreen[data-active-workbench="wangzi"] .moduleToolbar {
  min-height: 40px !important;
  height: 40px !important;
  padding: 4px 6px 3px !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.appScreen[data-active-workbench="booking"] .moduleTabs,
.appScreen[data-active-workbench="invite"] .moduleTabs,
.appScreen[data-active-workbench="wangzi"] .moduleTabs {
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #fff !important;
}

.appScreen[data-active-workbench="booking"] .moduleTab,
.appScreen[data-active-workbench="invite"] .moduleTab,
.appScreen[data-active-workbench="wangzi"] .moduleTab {
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 10px !important;
  font-size: 0.9rem !important;
  line-height: 1 !important;
}

.appScreen[data-active-workbench="booking"] .moduleTab.active {
  background: linear-gradient(135deg, #c64d83 0%, #a72962 100%) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.appScreen[data-active-workbench="invite"] .moduleTab.active {
  background: linear-gradient(135deg, #8b50d4 0%, #6733bd 100%) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.appScreen[data-active-workbench="wangzi"] .moduleTab.active {
  background: linear-gradient(135deg, #8b50d4 0%, #6733bd 100%) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.appScreen[data-active-workbench="booking"] .moduleStatusBar,
.appScreen[data-active-workbench="invite"] .moduleStatusBar,
.appScreen[data-active-workbench="wangzi"] .moduleStatusBar {
  width: auto !important;
  min-height: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(31, 42, 39, 0.1) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.appScreen[data-active-workbench="consult"] .mobileBar,
.appScreen[data-active-workbench="face"] .mobileBar {
  min-height: 56px !important;
  padding: 10px max(12px, env(safe-area-inset-left)) 8px max(12px, env(safe-area-inset-right)) !important;
  border-bottom: 1px solid var(--shell-border);
  background: #fff;
}

.appScreen[data-active-workbench="consult"] .mobileBar .shellBrand,
.appScreen[data-active-workbench="face"] .mobileBar .shellBrand {
  width: auto !important;
  max-width: 190px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.appScreen[data-active-workbench="consult"] .mobileBar .shellMark,
.appScreen[data-active-workbench="face"] .mobileBar .shellMark {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
}

.appScreen[data-active-workbench="consult"] .mobileBar .shellUser,
.appScreen[data-active-workbench="face"] .mobileBar .shellUser {
  max-width: 96px !important;
  font-size: 1rem !important;
  line-height: 1.05 !important;
}

.appScreen[data-active-workbench="consult"] .moduleChrome,
.appScreen[data-active-workbench="face"] .moduleChrome {
  flex: 0 0 auto !important;
  width: calc(100% - 20px) !important;
  margin: 0 10px 6px !important;
  border: 1px solid #d8dde0 !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset !important;
  overflow: hidden !important;
}

.appScreen[data-active-workbench="consult"] .modulePanel,
.appScreen[data-active-workbench="face"] .modulePanel,
.appScreen[data-active-workbench="consult"] .moduleFrame,
.appScreen[data-active-workbench="face"] .moduleFrame {
  background: #fff !important;
}

.appScreen[data-active-workbench="consult"] .moduleToolbar,
.appScreen[data-active-workbench="face"] .moduleToolbar {
  min-height: 40px !important;
  height: 40px !important;
  padding: 4px 6px 3px !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.appScreen[data-active-workbench="consult"] .moduleTabs,
.appScreen[data-active-workbench="face"] .moduleTabs {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  height: 32px !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
}

.appScreen[data-active-workbench="consult"] .moduleTabs::-webkit-scrollbar,
.appScreen[data-active-workbench="face"] .moduleTabs::-webkit-scrollbar {
  display: none;
}

.appScreen[data-active-workbench="consult"] .moduleTab,
.appScreen[data-active-workbench="face"] .moduleTab {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.appScreen[data-active-workbench="consult"] .moduleTab.active {
  background: linear-gradient(135deg, #1c9389 0%, #0f6f68 100%) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.appScreen[data-active-workbench="face"] .moduleTab.active {
  background: linear-gradient(135deg, #b48755 0%, #895f35 100%) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.appScreen[data-active-workbench="consult"] .moduleStatusBar,
.appScreen[data-active-workbench="face"] .moduleStatusBar {
  width: auto !important;
  min-height: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(31, 42, 39, 0.1) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.appScreen:is([data-active-workbench="panke"], [data-active-workbench="activity"]) .mobileBar {
  min-height: 56px !important;
  padding: 10px max(12px, env(safe-area-inset-left)) 8px max(12px, env(safe-area-inset-right)) !important;
  border-bottom: 1px solid var(--shell-border);
  background: #fff;
}

.appScreen:is([data-active-workbench="panke"], [data-active-workbench="activity"]) .mobileBar .shellBrand {
  width: auto !important;
  max-width: 190px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.appScreen:is([data-active-workbench="panke"], [data-active-workbench="activity"]) .mobileBar .shellMark {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
}

.appScreen:is([data-active-workbench="panke"], [data-active-workbench="activity"]) .mobileBar .shellUser {
  max-width: 96px !important;
  font-size: 1rem !important;
  line-height: 1.05 !important;
}

.appScreen:is([data-active-workbench="panke"], [data-active-workbench="activity"]) .moduleChrome {
  flex: 0 0 auto !important;
  width: calc(100% - 20px) !important;
  margin: 0 10px !important;
  border: 1px solid #d8dde0 !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset !important;
  overflow: hidden !important;
}

.appScreen:is([data-active-workbench="panke"], [data-active-workbench="activity"]) .modulePanel,
.appScreen:is([data-active-workbench="panke"], [data-active-workbench="activity"]) .moduleFrame {
  background: #fff !important;
}

.appScreen:is([data-active-workbench="panke"], [data-active-workbench="activity"]) .moduleToolbar {
  min-height: 40px !important;
  height: 40px !important;
  padding: 4px 6px 3px !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.appScreen:is([data-active-workbench="panke"], [data-active-workbench="activity"]) .moduleTabs {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  height: 32px !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
}

.appScreen:is([data-active-workbench="panke"], [data-active-workbench="activity"]) .moduleTabs::-webkit-scrollbar {
  display: none;
}

.appScreen:is([data-active-workbench="panke"], [data-active-workbench="activity"]) .moduleTab {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.appScreen:is([data-active-workbench="panke"], [data-active-workbench="activity"]) .moduleTab.active {
  background: linear-gradient(135deg, #128a8d 0%, #0b6f78 100%) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.appScreen:is([data-active-workbench="panke"], [data-active-workbench="activity"]) .moduleStatusBar {
  width: auto !important;
  min-height: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(31, 42, 39, 0.1) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* 窄屏触控目标：主 tab 至少 44px。
   各工作台（booking/invite/wangzi/consult/face/panke）把 .moduleTab 钉在 32px 的规则同为
   0,3,0 特异性 + !important，且排在文件更后面，所以这段必须放末尾并用更高特异性才压得过。 */
@media (max-width: 1023.98px) {
  .appScreen .modulePanel .moduleChrome .moduleToolbar {
    min-height: 52px !important;
    height: 52px !important;
  }

  /* 精调规则把容器钉成固定高度，min-height 才能在不改各自内边距的前提下把它撑开 */
  .appScreen .modulePanel .moduleChrome .moduleTabs {
    min-height: 44px !important;
  }

  .appScreen .modulePanel .moduleChrome .moduleTab {
    min-height: 44px !important;
    height: 44px !important;
  }
}

/* ─── CRM 全屏形态：左栏收起（workspace-collapsed）时，工作台导航从顶部横条变为左侧导航栏 ───
   参考专业 CRM 布局：左导航（品牌 + 工作台切换 + 底部账号/操作）+ 右侧内容区。
   分屏/移动端不受影响（min-width:1024px + workspace-collapsed 双重限定）。
   各工作台的 [data-active-workbench] 精调是 (0,4,0)+!important 且在上方，
   这里全部用 ≥5 个 class 的选择器链压过，必须放在文件末尾。 */
.moduleNavBrand {
  display: none;
}

.moduleNavSectionLabel,
.moduleWorkspaceHeader,
.moduleSubnav {
  display: none;
}

.moduleTab > i {
  display: none;
}

@media (min-width: 1024px) {
  .appScreen.workspace-collapsed .modulePanel {
    display: grid !important;
    grid-template-columns: 176px minmax(0, 1fr);
    grid-template-rows: 52px minmax(0, 1fr);
  }

  .appScreen.workspace-collapsed .modulePanel .moduleChrome {
    display: flex !important;
    flex-direction: column !important;
    grid-column: 1;
    grid-row: 1 / -1;
    min-height: 0;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--shell-border) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleFrame {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    height: 100% !important;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleChrome .moduleNavBrand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 52px;
    padding: 0 14px;
    border-bottom: 1px solid var(--shell-border);
    color: var(--shell-text);
    font-size: 0.85rem;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleChrome .moduleNavBrand > span:last-child {
    display: grid;
    gap: 1px;
    min-width: 0;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleChrome .moduleNavBrand strong {
    font-size: 0.86rem;
    line-height: 1.1;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleChrome .moduleNavBrand small {
    color: var(--shell-muted);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.1;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleChrome .moduleNavBrand .shellMark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 0.78rem;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleChrome .moduleNavSectionLabel {
    display: block;
    flex: 0 0 auto;
    padding: 14px 16px 5px;
    color: #93a19c;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  /* 工作台切换：竖排导航主体 */
  .appScreen.workspace-collapsed .modulePanel .moduleChrome .moduleToolbar {
    display: flex !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 4px 9px 10px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    align-items: stretch !important;
    overflow: visible;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleChrome .moduleTabs {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleChrome .moduleTab {
    justify-content: flex-start !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 11px !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleChrome .moduleTab > i {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 18px;
    font-size: 0.95rem;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleChrome .moduleTab > span {
    min-width: 0;
  }

  /* active 用工作台主色的纯色填充（保留各自配色，弃渐变求克制） */
  .appScreen.workspace-collapsed .modulePanel .moduleChrome .moduleTab.active {
    background: var(--module-tab-accent, var(--shell-accent)) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  /* 当前工作台的二级功能同步到侧栏，形成 CRM 常见的父导航 + 子菜单。
     原 iframe Tab 仅在全屏隐藏，分屏/移动端仍保留原生控件。 */
  .appScreen.workspace-collapsed .modulePanel .moduleChrome .moduleSubnav:not([hidden]) {
    --subnav-accent: var(--shell-accent);
    --subnav-soft: #e9f5f1;
    display: grid;
    gap: 5px;
    flex: 0 0 auto;
    margin: 0 9px;
    padding: 9px 0 10px;
    border-top: 1px solid var(--shell-border);
  }

  .appScreen.workspace-collapsed .modulePanel .moduleSubnavTitle {
    padding: 0 8px;
    color: #93a19c;
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleSubnavItems {
    display: grid;
    gap: 2px;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleSubnavBtn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 32px;
    padding: 0 9px 0 13px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #66756f;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease-out, color 0.16s ease-out;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleSubnavBtn:hover {
    background: #f4f7f5;
    color: var(--subnav-accent);
  }

  .appScreen.workspace-collapsed .modulePanel .moduleSubnavBtn.active {
    background: var(--subnav-soft);
    color: var(--subnav-accent);
    font-weight: 750;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleSubnavBtn.active::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 2px;
    border-radius: 0 2px 2px 0;
    background: var(--subnav-accent);
  }

  .appScreen.workspace-collapsed .modulePanel .moduleSubnavBtn > i {
    flex: 0 0 auto;
    font-size: 0.86rem;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleSubnavBtn > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleSubnavBtn > em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: auto;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(102, 117, 111, 0.1);
    color: inherit;
    font-size: 0.61rem;
    font-style: normal;
    font-variant-numeric: tabular-nums;
  }

  .appScreen[data-active-workbench="booking"] .moduleSubnav {
    --subnav-accent: var(--shell-booking);
    --subnav-soft: var(--shell-booking-soft);
  }

  .appScreen[data-active-workbench="consult"] .moduleSubnav {
    --subnav-accent: var(--shell-consult);
    --subnav-soft: var(--shell-consult-soft);
  }

  .appScreen:is([data-active-workbench="panke"], [data-active-workbench="activity"]) .moduleSubnav {
    --subnav-accent: var(--shell-panke);
    --subnav-soft: var(--shell-panke-soft);
  }

  .appScreen[data-active-workbench="invite"] .moduleSubnav {
    --subnav-accent: var(--shell-invite);
    --subnav-soft: var(--shell-invite-soft);
  }

  .appScreen[data-active-workbench="face"] .moduleSubnav {
    --subnav-accent: var(--shell-face);
    --subnav-soft: var(--shell-face-soft);
  }

  /* 状态条沉底，竖排成操作菜单 */
  .appScreen.workspace-collapsed .modulePanel .moduleChrome .moduleStatusBar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: auto 0 0 !important;
    padding: 9px !important;
    border: 0 !important;
    border-top: 1px solid var(--shell-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleStatusBar .moduleStatusBtn,
  .appScreen.workspace-collapsed .modulePanel .moduleStatusBar button.moduleStatusAccount {
    justify-content: flex-start !important;
    width: 100%;
    min-height: 32px;
    height: 32px;
    padding: 0 9px !important;
    border: 0 !important;
    border-radius: 7px;
    font-size: 0.78rem;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleStatusBar .moduleStatusBtn:hover,
  .appScreen.workspace-collapsed .modulePanel .moduleStatusBar button.moduleStatusAccount:hover {
    background: #eef4f1;
  }

  /* 右侧页面级顶栏：建立「产品导航 → 当前工作台 → 数据内容」的层级，
     不再让 iframe 内的功能 Tab 生硬贴在浏览器顶部。 */
  .appScreen.workspace-collapsed .modulePanel .moduleWorkspaceHeader {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
    padding: 0 24px;
    border-bottom: 1px solid var(--shell-border);
    background: rgba(255, 255, 255, 0.96);
  }

  .appScreen.workspace-collapsed .modulePanel .moduleWorkspaceHeading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleWorkspaceIcon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #e9f5f1;
    color: var(--shell-accent);
    font-size: 1rem;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleWorkspaceHeading > div {
    display: grid;
    gap: 1px;
    min-width: 0;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleWorkspaceBreadcrumb {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    color: #84918d;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleWorkspaceTitle {
    overflow: hidden;
    color: var(--shell-text);
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .appScreen.workspace-collapsed .modulePanel .moduleWorkspaceMode {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid var(--shell-border);
    border-radius: 8px;
    background: #f7faf8;
    color: #64736e;
    font-size: 0.66rem;
    font-weight: 650;
  }

  .appScreen[data-active-workbench="booking"] .moduleWorkspaceIcon {
    background: var(--shell-booking-soft);
    color: var(--shell-booking);
  }

  .appScreen[data-active-workbench="consult"] .moduleWorkspaceIcon {
    background: var(--shell-consult-soft);
    color: var(--shell-consult);
  }

  .appScreen:is([data-active-workbench="panke"], [data-active-workbench="activity"]) .moduleWorkspaceIcon {
    background: var(--shell-panke-soft);
    color: var(--shell-panke);
  }

  .appScreen[data-active-workbench="invite"] .moduleWorkspaceIcon {
    background: var(--shell-invite-soft);
    color: var(--shell-invite);
  }

  .appScreen[data-active-workbench="face"] .moduleWorkspaceIcon {
    background: var(--shell-face-soft);
    color: var(--shell-face);
  }
}