/* 2026-06-29 CRM reference literal layer.
   Loaded after the legacy styles so the UI matches the provided CRM references:
   white shell, compact rows, blue analytics band, teal primary actions, pale gray tables. */

:root {
  --ref-page: #f4f6f9;
  --ref-surface: #ffffff;
  --ref-line: #e5e8ee;
  --ref-line-strong: #d9dee7;
  --ref-text: #1f2937;
  --ref-soft-text: #4b5563;
  --ref-muted: #7b8794;
  --ref-blue: #1683f5;
  --ref-blue-deep: #0b63d8;
  --ref-blue-soft: #eaf4ff;
  --ref-teal: #00b894;
  --ref-teal-deep: #00a383;
  --ref-teal-soft: #e8faf6;
  --ref-orange: #ffad2f;
  --ref-orange-soft: #fff4e0;
  --ref-shadow: 0 2px 8px rgba(31, 41, 55, 0.055);
  --ref-radius: 4px;
}

/* 【UI优化-不改动逻辑】手机底栏选中态与客户工作页最终收口 r4.4。 */
@media (max-width: 760px) {
  /* 选中态直接跟随当前业务模块，避免首页首次进入时“工作台”未点亮。 */
  html body[data-active-section] .mobile-primary-dock a {
    color: #7b8798 !important;
  }

  html body[data-active-section="dashboard"] .mobile-primary-dock a[data-section="dashboard"],
  html body[data-active-section="customers"] .mobile-primary-dock a[data-section="customers"],
  html body[data-active-section="enrollment"] .mobile-primary-dock a[data-section="enrollment"],
  html body[data-active-section="agreement"] .mobile-primary-dock a[data-section="enrollment"],
  html body[data-active-section="receipt"] .mobile-primary-dock a[data-section="enrollment"],
  html body[data-active-section="goals"] .mobile-primary-dock a[data-section="goals"] {
    color: #1684ef !important;
  }

  html body[data-active-section="dashboard"] .mobile-primary-dock a[data-section="dashboard"] span,
  html body[data-active-section="customers"] .mobile-primary-dock a[data-section="customers"] span,
  html body[data-active-section="enrollment"] .mobile-primary-dock a[data-section="enrollment"] span,
  html body[data-active-section="agreement"] .mobile-primary-dock a[data-section="enrollment"] span,
  html body[data-active-section="receipt"] .mobile-primary-dock a[data-section="enrollment"] span,
  html body[data-active-section="goals"] .mobile-primary-dock a[data-section="goals"] span {
    font-weight: 800 !important;
  }

  /* 客户页使用手机原生的信息密度，避免桌面标题和按钮被等比压进小屏。 */
  html body[data-active-section="customers"] #customers > .panel {
    padding: 13px 16px calc(76px + env(safe-area-inset-bottom)) !important;
  }

  html body[data-active-section="customers"] #customers .panel-head {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 12px !important;
    padding: 0 0 12px !important;
  }

  html body[data-active-section="customers"] #customers .panel-head > div {
    min-width: 0 !important;
  }

  html body[data-active-section="customers"] #customers .panel-head h2 {
    margin: 0 !important;
    color: #172238 !important;
    font-size: 1rem !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
  }

  html body[data-active-section="customers"] #customers .panel-head .muted {
    max-width: 245px !important;
    margin: 4px 0 0 !important;
    color: #758196 !important;
    font-size: 0.67rem !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    -webkit-line-clamp: 2 !important;
  }

  html body[data-active-section="customers"] #customers .panel-head > button {
    min-width: 78px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 11px !important;
    border: 1px solid #d7e0ea !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: #2d3a50 !important;
    box-shadow: none !important;
    font-size: 0.71rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="customers"] #customers .customer-mobile-search {
    min-height: 42px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4px !important;
    padding: 4px !important;
    border: 1px solid #e2e8ef !important;
    border-radius: 8px !important;
    background: #f5f7fa !important;
  }

  html body[data-active-section="customers"] #customers .customer-mobile-search input {
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
    color: #263247 !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
  }

  html body[data-active-section="customers"] #customers .customer-mobile-search input::placeholder {
    color: #98a3b3 !important;
    opacity: 1 !important;
  }

  html body[data-active-section="customers"] #customers .customer-mobile-search button {
    min-width: 48px !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 9px !important;
    border-radius: 6px !important;
    color: #1684ef !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
  }

  html body[data-active-section="customers"] #customers .customer-mobile-summary {
    min-height: 40px !important;
    padding: 8px 0 7px !important;
  }

  html body[data-active-section="customers"] #customers .customer-mobile-summary strong {
    min-width: 0 !important;
    color: #243148 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }

  /* 页头已有添加入口，名单标题处不重复占一整行。 */
  html body[data-active-section="customers"] #customers #createCrmLeadMobile {
    display: none !important;
  }

  html body[data-active-section="customers"] #customers .customer-mobile-list {
    gap: 0 !important;
  }

  html body[data-active-section="customers"] #customers .customer-mobile-empty {
    min-height: 132px !important;
    align-content: start !important;
    gap: 6px !important;
    padding: 20px 0 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #718096 !important;
    text-align: left !important;
  }

  html body[data-active-section="customers"] #customers .customer-mobile-empty strong {
    color: #263247 !important;
    font-size: 0.82rem !important;
    font-weight: 720 !important;
    line-height: 1.35 !important;
  }

  html body[data-active-section="customers"] #customers .customer-mobile-empty span {
    color: #7d899a !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
  }

  html body[data-active-section="customers"] #customers .customer-mobile-empty div {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin-top: 4px !important;
  }

  html body[data-active-section="customers"] #customers .customer-mobile-empty button {
    width: auto !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 11px !important;
    border: 1px solid #d9e2eb !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: #415069 !important;
    box-shadow: none !important;
    font-size: 0.69rem !important;
    font-weight: 680 !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="customers"] #customers .customer-mobile-empty button:first-child {
    border-color: #cbe8e3 !important;
    background: #f0faf8 !important;
    color: #087d70 !important;
  }

  html body[data-active-section="customers"] #customers .customer-mobile-empty button[data-crm-lead-create] {
    display: none !important;
  }

  html body[data-active-section="customers"] #customers .customer-mobile-card {
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    gap: 9px !important;
    padding: 12px 0 !important;
  }

  html body[data-active-section="customers"] #customers .customer-mobile-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: #eaf3ff !important;
    color: #1684ef !important;
    font-size: 0.85rem !important;
    font-weight: 760 !important;
  }

  html body[data-active-section="customers"] #customers .customer-mobile-title strong {
    color: #202c40 !important;
    font-size: 0.78rem !important;
    font-weight: 720 !important;
  }

  html body[data-active-section="customers"] #customers .customer-mobile-info p,
  html body[data-active-section="customers"] #customers .customer-mobile-info small {
    color: #788497 !important;
    font-size: 0.66rem !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
  }
}

/* 2026-07-16 mobile data center in-place tabs */
@media (max-width: 980px) {
  html body[data-active-section="dashboard"] .mobile-data-periods {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-tabs {
    width: auto !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-tabs button {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #7b8798 !important;
    font-size: 0.71rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-tabs button.active {
    color: var(--mobile-r4-text, #15233a) !important;
    font-weight: 820 !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-tabs button.active::after {
    content: "" !important;
    position: absolute !important;
    right: 29% !important;
    bottom: 0 !important;
    left: 29% !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: var(--mobile-r4-blue, #1687f8) !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-custom-range {
    margin-top: 8px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: end !important;
    gap: 7px !important;
    padding: 10px !important;
    border: 1px solid #e2eaf2 !important;
    border-radius: 7px !important;
    background: #f8fbfe !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-custom-range[hidden],
  html body[data-active-section="dashboard"] .mobile-data-panel[hidden] {
    display: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-custom-range label {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
    color: #7b8798 !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-custom-range input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 0 6px !important;
    border: 1px solid #d8e2ec !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #15233a !important;
    font-size: 0.7rem !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-custom-range i {
    padding-bottom: 10px !important;
    color: #9aa5b4 !important;
    font-size: 0.66rem !important;
    font-style: normal !important;
  }

  html body[data-active-section="dashboard"] #mobileDataCustomApply {
    grid-column: 1 / -1 !important;
    min-height: 36px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: var(--mobile-r4-blue, #1687f8) !important;
    color: #ffffff !important;
    font-size: 0.72rem !important;
    font-weight: 760 !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-panels {
    margin: 0 -16px !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-panel {
    padding: 13px 16px 4px !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-metric-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
    overflow: hidden !important;
    border: 1px solid #e8edf3 !important;
    border-radius: 7px !important;
    background: #e8edf3 !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-metric-grid-five {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-metric-grid > span {
    min-width: 0 !important;
    min-height: 58px !important;
    display: grid !important;
    align-content: center !important;
    gap: 5px !important;
    padding: 7px 5px !important;
    background: #ffffff !important;
    text-align: center !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-metric-grid em {
    overflow: hidden !important;
    color: #7b8798 !important;
    font-size: 0.62rem !important;
    font-style: normal !important;
    font-weight: 650 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-metric-grid strong {
    overflow: hidden !important;
    color: #15233a !important;
    font-size: 0.84rem !important;
    font-weight: 820 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-panel-head {
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding-bottom: 8px !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-panel-head strong {
    color: #15233a !important;
    font-size: 0.78rem !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-panel-head span {
    color: #8a96a6 !important;
    font-size: 0.64rem !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-list {
    margin-top: 8px !important;
    border-top: 1px solid #edf1f5 !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-row {
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 8px 2px !important;
    border-bottom: 1px solid #edf1f5 !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-row > div {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-row strong,
  html body[data-active-section="dashboard"] .mobile-data-row span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-row strong {
    color: #15233a !important;
    font-size: 0.73rem !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-row span {
    color: #8591a1 !important;
    font-size: 0.63rem !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-row em {
    flex: 0 0 auto !important;
    max-width: 42% !important;
    color: var(--mobile-r4-blue, #1687f8) !important;
    font-size: 0.68rem !important;
    font-style: normal !important;
    font-weight: 780 !important;
    text-align: right !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-empty {
    min-height: 72px !important;
    display: grid !important;
    place-items: center !important;
    color: #98a3b2 !important;
    font-size: 0.68rem !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-funnel {
    display: grid !important;
    gap: 10px !important;
    padding: 4px 0 10px !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-funnel-row {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 28px !important;
    align-items: center !important;
    gap: 8px !important;
    color: #59677a !important;
    font-size: 0.68rem !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-funnel-row i {
    height: 7px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #edf2f7 !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-funnel-row b {
    height: 100% !important;
    display: block !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #26bfd2, #3e8df7 62%, #8b78ee) !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-funnel-row strong {
    color: #15233a !important;
    text-align: right !important;
  }

  html body[data-active-section="dashboard"] #dashboard > .mobile-home > .mobile-home-trace {
    display: none !important;
  }
}

/* 【UI优化-不改动逻辑】2026-07-11 mobile information architecture P0.
   Keep the phone home focused on actions, today's work and one traceable data view. */
@media (max-width: 760px) {
  html body[data-active-section="dashboard"] {
    overflow-x: hidden !important;
    background: #f5f7fb !important;
  }

  html body[data-active-section="dashboard"] #dashboard.section.active {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 18px !important;
    overflow: visible !important;
    background: #f5f7fb !important;
  }

  html body[data-active-section="dashboard"] #dashboard > .mobile-home {
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    padding: 0 0 12px !important;
    background: #f5f7fb !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-appbar,
  html body[data-active-section="dashboard"] .mobile-workbench-marketbar,
  html body[data-active-section="dashboard"] .mobile-home-hero,
  html body[data-active-section="dashboard"] .mobile-opportunity-feed,
  html body[data-active-section="dashboard"] .mobile-workbench-todo,
  html body[data-active-section="dashboard"] .mobile-home-focus,
  html body[data-active-section="dashboard"] .mobile-home-metrics,
  html body[data-active-section="dashboard"] .mobile-home-actions,
  html body[data-active-section="dashboard"] .mobile-home-card[aria-label="今日工作"],
  html body[data-active-section="dashboard"] .mobile-home-card[aria-label="转化漏斗"],
  html body[data-active-section="dashboard"] #dashboard > .hero-panel,
  html body[data-active-section="dashboard"] #dashboard > .dashboard-context-strip,
  html body[data-active-section="dashboard"] #dashboard > .visual-command-grid,
  html body[data-active-section="dashboard"] #dashboard > .process-grid {
    display: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-functions {
    order: 1 !important;
    display: block !important;
    margin: 0 !important;
    padding: 18px 16px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-head {
    min-height: 28px !important;
    margin: 0 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-head strong {
    position: relative !important;
    padding-left: 12px !important;
    color: #172033 !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-head strong::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 3px !important;
    width: 4px !important;
    height: 16px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #37b5f6, #22c7b5) !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-head a {
    display: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px 8px !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a {
    min-width: 0 !important;
    min-height: 70px !important;
    display: grid !important;
    grid-template-rows: 48px auto !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 7px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #172033 !important;
    text-decoration: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a::after {
    content: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid b,
  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(n) b {
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 15px !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 18px rgba(40, 67, 94, 0.12) !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(1) b {
    background: linear-gradient(145deg, #56c2ff, #2f80ed) !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(2) b {
    background: linear-gradient(145deg, #55dfcd, #20b8a2) !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(3) b {
    background: linear-gradient(145deg, #77d5ff, #37a9e8) !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(4) b {
    background: linear-gradient(145deg, #b8a9ff, #8375eb) !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(5) b {
    background: linear-gradient(145deg, #ffb2cc, #ed78a1) !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(6) b {
    background: linear-gradient(145deg, #69dda9, #31b984) !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid span {
    max-width: 100% !important;
    overflow: hidden !important;
    color: #172033 !important;
    font-size: 0.78rem !important;
    font-weight: 820 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="dashboard"] .mobile-priority-panel {
    order: 2 !important;
    display: block !important;
    margin: 0 !important;
    padding: 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-priority-head {
    margin: 0 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  html body[data-active-section="dashboard"] .mobile-priority-head > div > span {
    display: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-priority-head strong {
    display: block !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  html body[data-active-section="dashboard"] .mobile-priority-head strong::after {
    content: "今日待办" !important;
    color: #172033 !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
  }

  html body[data-active-section="dashboard"] .mobile-priority-head > a {
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: #f1f7ff !important;
    color: #3478d4 !important;
    font-size: 0.74rem !important;
    font-weight: 850 !important;
    text-decoration: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-priority-list {
    display: grid !important;
    gap: 0 !important;
  }

  html body[data-active-section="dashboard"] .mobile-priority-list a {
    min-width: 0 !important;
    min-height: 62px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #eef2f6 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #172033 !important;
    text-decoration: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-priority-list a:last-child {
    border-bottom: 0 !important;
  }

  html body[data-active-section="dashboard"] .mobile-priority-list b {
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: #eaf4ff !important;
    color: #2f80ed !important;
    font-size: 0.75rem !important;
    font-weight: 900 !important;
  }

  html body[data-active-section="dashboard"] .mobile-priority-list a:nth-child(2) b {
    background: #e9faf7 !important;
    color: #149b89 !important;
  }

  html body[data-active-section="dashboard"] .mobile-priority-list a:nth-child(3) b {
    background: #f2edff !important;
    color: #7664dc !important;
  }

  html body[data-active-section="dashboard"] .mobile-priority-list div {
    min-width: 0 !important;
  }

  html body[data-active-section="dashboard"] .mobile-priority-list strong,
  html body[data-active-section="dashboard"] .mobile-priority-list span {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="dashboard"] .mobile-priority-list strong {
    color: #172033 !important;
    font-size: 0.86rem !important;
    font-weight: 880 !important;
  }

  html body[data-active-section="dashboard"] .mobile-priority-list span {
    margin-top: 3px !important;
    color: #7a8797 !important;
    font-size: 0.72rem !important;
  }

  html body[data-active-section="dashboard"] .mobile-priority-list em {
    padding: 5px 8px !important;
    border-radius: 999px !important;
    background: #f7f9fc !important;
    color: #5f6f82 !important;
    font-size: 0.7rem !important;
    font-style: normal !important;
    font-weight: 820 !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-center {
    order: 3 !important;
    display: block !important;
    margin: 0 !important;
    padding: 17px 16px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-title {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-title strong {
    color: #172033 !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-title strong::after {
    content: "" !important;
    width: 1px !important;
    height: 16px !important;
    margin-left: 10px !important;
    display: inline-block !important;
    vertical-align: -3px !important;
    background: #e6ebf1 !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-title button {
    min-width: 0 !important;
    justify-self: start !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #3478d4 !important;
    font-size: 0.84rem !important;
    font-weight: 880 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-title span {
    display: block !important;
    color: #7a8797 !important;
    font-size: 0.78rem !important;
    font-weight: 760 !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-periods {
    margin-top: 14px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 4px !important;
    border-radius: 12px !important;
    background: #f4f7fb !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-periods button {
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #748196 !important;
    box-shadow: none !important;
    font-size: 0.74rem !important;
    font-weight: 820 !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-periods button.active {
    background: #ffffff !important;
    color: #2f80ed !important;
    box-shadow: 0 4px 10px rgba(52, 89, 132, 0.08) !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-tabs {
    margin-top: 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    overflow-x: auto !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid #edf1f5 !important;
    scrollbar-width: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-tabs::-webkit-scrollbar {
    display: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-tabs a {
    position: relative !important;
    flex: 0 0 auto !important;
    padding: 0 0 9px !important;
    color: #9aa4b1 !important;
    font-size: 0.82rem !important;
    font-weight: 820 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-tabs a.active {
    color: #172033 !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-tabs a.active::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    width: 24px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #36b7f4, #27c7b4) !important;
    transform: translateX(-50%) !important;
  }

  html body[data-active-section="dashboard"] .mobile-home-trace {
    order: 4 !important;
    display: block !important;
    margin: 0 !important;
    padding: 4px 16px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-home-trace > .mobile-home-card-head,
  html body[data-active-section="dashboard"] .mobile-home-trace-grid {
    display: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-follow-summary,
  html body[data-active-section="dashboard"] .mobile-follow-card {
    display: block !important;
  }

  html body[data-active-section="dashboard"] .mobile-follow-card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #172033 !important;
    text-decoration: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-follow-card-head {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  html body[data-active-section="dashboard"] .mobile-follow-card-head strong {
    position: relative !important;
    padding-left: 12px !important;
    color: #172033 !important;
    font-size: 0.96rem !important;
    font-weight: 900 !important;
  }

  html body[data-active-section="dashboard"] .mobile-follow-card-head strong::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 3px !important;
    width: 4px !important;
    height: 15px !important;
    border-radius: 999px !important;
    background: #8a7bea !important;
  }

  html body[data-active-section="dashboard"] .mobile-follow-card-head em {
    color: #9aa4b1 !important;
    font-size: 1.2rem !important;
    font-style: normal !important;
  }

  html body[data-active-section="dashboard"] .mobile-follow-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1px !important;
    overflow: hidden !important;
    border: 1px solid #e8edf3 !important;
    border-radius: 14px !important;
    background: #e8edf3 !important;
  }

  html body[data-active-section="dashboard"] .mobile-follow-grid span {
    min-width: 0 !important;
    min-height: 72px !important;
    display: grid !important;
    align-content: center !important;
    gap: 6px !important;
    padding: 10px 7px !important;
    background: #ffffff !important;
    text-align: center !important;
  }

  html body[data-active-section="dashboard"] .mobile-follow-grid span:nth-child(4),
  html body[data-active-section="dashboard"] .mobile-follow-grid span:nth-child(5) {
    grid-column: span 1 !important;
  }

  html body[data-active-section="dashboard"] .mobile-follow-grid em {
    overflow: hidden !important;
    color: #8a96a6 !important;
    font-size: 0.7rem !important;
    font-style: normal !important;
    font-weight: 760 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="dashboard"] .mobile-follow-grid strong {
    overflow: hidden !important;
    color: #172033 !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel {
    display: none !important;
  }

  html body[data-active-section="dashboard"][data-current-role="管理员"] #roleFocusPanel,
  html body[data-active-section="dashboard"][data-current-role="总校长"] #roleFocusPanel,
  html body[data-active-section="dashboard"][data-current-role="大区校长"] #roleFocusPanel {
    width: auto !important;
    margin: 0 0 10px !important;
    padding: 18px 16px !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-head {
    display: block !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-head .eyebrow,
  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-head > strong,
  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-head span,
  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-metrics {
    display: none !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-head h3 {
    position: relative !important;
    margin: 0 0 12px !important;
    padding-left: 12px !important;
    color: #172033 !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-head h3::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    width: 4px !important;
    height: 17px !important;
    border-radius: 999px !important;
    background: #ee7ea5 !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-body,
  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-actions {
    display: grid !important;
    gap: 0 !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-actions a {
    min-width: 0 !important;
    min-height: 62px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #eef2f6 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #172033 !important;
    text-decoration: none !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-actions a:last-child {
    border-bottom: 0 !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-actions b {
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: #fff0f5 !important;
    color: #d95d8a !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-actions div {
    min-width: 0 !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-actions span,
  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-actions strong,
  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-actions em {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-actions span {
    color: #9aa4b1 !important;
    font-size: 0.68rem !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-actions strong {
    margin-top: 2px !important;
    color: #172033 !important;
    font-size: 0.84rem !important;
    font-weight: 880 !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-actions em {
    margin-top: 2px !important;
    color: #7a8797 !important;
    font-size: 0.7rem !important;
    font-style: normal !important;
  }
}

/* 【UI优化-不改动逻辑】2026-07-06 mobile customer visual rescue:
   remove desktop residue on phone, soften the order cards, and keep both
   customer quick actions and global navigation usable without feeling stacked. */
@media (max-width: 760px) {
  :root {
    --yy-mobile-bg: #f7fbff;
    --yy-mobile-surface: rgba(255, 255, 255, 0.98);
    --yy-mobile-line: #e1eaf3;
    --yy-mobile-ink: #162033;
    --yy-mobile-muted: #718094;
    --yy-mobile-blue: #2176e5;
    --yy-mobile-cyan: #67c7d4;
    --yy-mobile-violet: #b51ff0;
    --yy-mobile-pink: #ec8bd0;
    --yy-mobile-orange: #ffb55b;
    --yy-mobile-shadow: 0 12px 28px rgba(42, 55, 78, 0.075);
  }

  html body[data-active-section="customers"],
  html body[data-active-section="customers"] .app-shell,
  html body[data-active-section="customers"] .workspace,
  html body[data-active-section="customers"] #customers {
    overflow-x: hidden !important;
    background:
      linear-gradient(180deg, #ffffff 0%, var(--yy-mobile-bg) 34%, #f8fbff 100%) !important;
    color: var(--yy-mobile-ink) !important;
  }

  html body[data-active-section="customers"] .workspace {
    padding: 0 10px calc(132px + env(safe-area-inset-bottom)) !important;
    gap: 10px !important;
  }

  html body[data-active-section="customers"] .workspace > .topbar,
  html body[data-active-section="customers"] .workspace > .breadcrumb,
  html body[data-active-section="customers"] #customers > .hero-panel,
  html body[data-active-section="customers"] #customers > .topbar,
  html body[data-active-section="customers"] .customer-mobile-workbench,
  html body[data-active-section="customers"] .customer-detail-card,
  html body[data-active-section="customers"] .customer-activity-panel,
  html body[data-active-section="customers"] .ai-followup-panel,
  html body[data-active-section="customers"] #customers .table-wrap {
    display: none !important;
  }

  html body[data-active-section="customers"] #customers.section.active {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
  }

  html body[data-active-section="customers"] #customers > .panel {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-active-section="customers"] .customer-detail-grid {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
  }

  html body[data-active-section="customers"] .customer-order-panel {
    display: grid !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 10px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-active-section="customers"] .customer-order-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    margin: 0 -10px !important;
    padding: 9px 12px 8px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    border-bottom: 1px solid rgba(225, 234, 243, 0.86) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 8px 18px rgba(42, 55, 78, 0.045) !important;
    backdrop-filter: blur(16px) !important;
    scrollbar-width: none !important;
  }

  html body[data-active-section="customers"] .customer-order-tabs::-webkit-scrollbar {
    display: none !important;
  }

  html body[data-active-section="customers"] .customer-order-tabs button {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    border: 1px solid #dfe8f1 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--yy-mobile-muted) !important;
    box-shadow: none !important;
    font-size: 0.82rem !important;
    font-weight: 840 !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="customers"] .customer-order-tabs button.active {
    border-color: rgba(33, 118, 229, 0.28) !important;
    background: linear-gradient(135deg, #eaf3ff, #f7ebff) !important;
    color: var(--yy-mobile-blue) !important;
  }

  html body[data-active-section="customers"] .customer-order-search {
    width: 100% !important;
    max-width: none !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    border: 1px solid #dfe8f1 !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(42, 55, 78, 0.045) !important;
  }

  html body[data-active-section="customers"] .customer-order-search span {
    color: #9aa7b5 !important;
    font-size: 0.78rem !important;
  }

  html body[data-active-section="customers"] .customer-order-search input {
    min-height: 38px !important;
    color: var(--yy-mobile-ink) !important;
    font-size: 0.9rem !important;
    font-weight: 780 !important;
  }

  html body[data-active-section="customers"] .customer-order-summary {
    padding: 0 2px !important;
    gap: 7px !important;
    color: var(--yy-mobile-muted) !important;
    font-size: 0.82rem !important;
    font-weight: 780 !important;
  }

  html body[data-active-section="customers"] .customer-order-summary span:last-child {
    color: var(--yy-mobile-ink) !important;
    font-weight: 900 !important;
  }

  html body[data-active-section="customers"] .customer-order-list {
    display: grid !important;
    gap: 10px !important;
  }

  html body[data-active-section="customers"] .customer-order-card {
    display: grid !important;
    gap: 10px !important;
    padding: 13px !important;
    overflow: hidden !important;
    border: 1px solid rgba(225, 234, 243, 0.96) !important;
    border-radius: 16px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 253, 255, 0.98)) !important;
    box-shadow: var(--yy-mobile-shadow) !important;
  }

  html body[data-active-section="customers"] .customer-order-card-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  html body[data-active-section="customers"] .customer-order-card-head span {
    color: #4f5d70 !important;
    font-size: 0.84rem !important;
    font-weight: 900 !important;
  }

  html body[data-active-section="customers"] .customer-order-card-head strong {
    min-height: 24px !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #27c77b, #48d79b) !important;
    color: #ffffff !important;
    font-size: 0.74rem !important;
    font-weight: 900 !important;
  }

  html body[data-active-section="customers"] .customer-order-card-head strong.pending {
    background: linear-gradient(135deg, var(--yy-mobile-orange), #ffcf76) !important;
    color: #714100 !important;
  }

  html body[data-active-section="customers"] .customer-order-no {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    color: #6f7d8d !important;
    font-size: 0.78rem !important;
    font-weight: 780 !important;
  }

  html body[data-active-section="customers"] .customer-order-no span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="customers"] .customer-order-no button {
    min-height: 28px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(33, 118, 229, 0.18) !important;
    border-radius: 9px !important;
    background: #f1f7ff !important;
    color: var(--yy-mobile-blue) !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
  }

  html body[data-active-section="customers"] .customer-order-body {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
  }

  html body[data-active-section="customers"] .customer-order-cover {
    width: 62px !important;
    min-height: 62px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #e8f8fb, #f4efff) !important;
    color: #0f8ea5 !important;
    font-size: 1.58rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  }

  html body[data-active-section="customers"] .customer-order-cover.alt {
    background: linear-gradient(135deg, #eaf3ff, #eef8ff) !important;
    color: var(--yy-mobile-blue) !important;
  }

  html body[data-active-section="customers"] .customer-order-cover.red {
    background: linear-gradient(135deg, #fff0fa, #fff7fb) !important;
    color: #d9488b !important;
  }

  html body[data-active-section="customers"] .customer-order-body h4 {
    color: var(--yy-mobile-ink) !important;
    font-size: 1rem !important;
    font-weight: 920 !important;
    line-height: 1.28 !important;
  }

  html body[data-active-section="customers"] .customer-order-body p {
    margin-top: 5px !important;
    color: #64748b !important;
    font-size: 0.82rem !important;
    font-weight: 780 !important;
  }

  html body[data-active-section="customers"] .customer-order-body small {
    margin-top: 7px !important;
    color: #8b98a8 !important;
    font-size: 0.76rem !important;
    font-weight: 720 !important;
  }

  html body[data-active-section="customers"] .customer-order-price {
    grid-column: 2 !important;
    justify-items: start !important;
    margin-top: 2px !important;
    color: #8b98a8 !important;
  }

  html body[data-active-section="customers"] .customer-order-price span {
    font-size: 0.78rem !important;
  }

  html body[data-active-section="customers"] .customer-order-price strong {
    color: var(--yy-mobile-ink) !important;
    font-size: 1.1rem !important;
    font-weight: 920 !important;
  }

  html body[data-active-section="customers"] .customer-order-fee {
    display: flex !important;
    gap: 8px !important;
    padding-top: 10px !important;
    border-top: 1px solid #edf2f7 !important;
    color: #7c8998 !important;
    font-size: 0.84rem !important;
  }

  html body[data-active-section="customers"] .customer-order-fee strong {
    color: #ef3f7a !important;
    font-weight: 920 !important;
  }

  html body[data-active-section="customers"] .customer-order-fee em {
    color: #9aa7b5 !important;
  }

  html body[data-active-section="customers"] .customer-order-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body[data-active-section="customers"] .customer-order-actions button {
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 0 6px !important;
    border: 1px solid #dfe8f1 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: #526579 !important;
    box-shadow: none !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
  }

  html body[data-active-section="customers"] .customer-order-actions button:last-child {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--yy-mobile-blue), var(--yy-mobile-violet)) !important;
    color: #ffffff !important;
  }

  html body[data-active-section="customers"] .customer-order-detail {
    grid-template-columns: 1fr 1fr !important;
    border-color: #e3ebf4 !important;
    border-radius: 12px !important;
    background: #f9fcff !important;
  }

  html body[data-active-section="customers"] .customer-bottom-actions {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    z-index: 86 !important;
    height: 50px !important;
    min-height: 50px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 4px !important;
    border: 1px solid rgba(225, 234, 243, 0.94) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 14px 30px rgba(42, 55, 78, 0.13) !important;
    backdrop-filter: blur(18px) !important;
  }

  html body[data-active-section="customers"] .customer-bottom-actions a,
  html body[data-active-section="customers"] .customer-bottom-actions button {
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 0 3px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    color: #65748a !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="customers"] .customer-bottom-actions a,
  html body[data-active-section="customers"] .customer-bottom-actions button:nth-child(3),
  html body[data-active-section="customers"] .customer-bottom-actions button:nth-child(5) {
    background: linear-gradient(135deg, #eaf3ff, #f7ebff) !important;
    color: var(--yy-mobile-blue) !important;
  }

  html body[data-active-section="customers"] .sidebar {
    z-index: 85 !important;
    min-height: 62px !important;
    padding: 5px 12px calc(6px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px 18px 0 0 !important;
    border-top: 1px solid rgba(225, 234, 243, 0.95) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 -10px 26px rgba(42, 55, 78, 0.08) !important;
    backdrop-filter: blur(18px) !important;
  }

  html body[data-active-section="customers"] .sidebar .nav-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html body[data-active-section="customers"] .sidebar .nav-module-button {
    min-height: 48px !important;
    grid-template-rows: 22px 16px !important;
    gap: 3px !important;
    border-radius: 14px !important;
    color: #65748a !important;
  }

  html body[data-active-section="customers"] .sidebar .nav-module-button[data-nav-module="settings"] {
    display: none !important;
  }

  html body[data-active-section="customers"] .sidebar .nav-module-button.active {
    background: #f1f8ff !important;
    color: var(--yy-mobile-blue) !important;
  }

  html body[data-active-section="customers"] .sidebar .nav-glyph {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
  }

  html body[data-active-section="customers"] .sidebar .nav-module-button.active .nav-glyph {
    background: linear-gradient(135deg, var(--yy-mobile-cyan), var(--yy-mobile-violet)) !important;
    color: #ffffff !important;
  }

  html body[data-active-section="customers"] .sidebar .nav-module-label {
    font-size: 0.68rem !important;
    font-weight: 860 !important;
  }
}

/* 2026-06-29 layout order pass.
   Keep the CRM reference tone, but make page hierarchy calmer:
   one title band, one metric row, one focus card, then analysis and shortcuts. */
@media (min-width: 981px) {
  .workspace {
    padding: 0 16px 24px !important;
    gap: 12px !important;
  }

  .workspace > .topbar {
    min-height: 54px !important;
    margin: 0 -16px 0 !important;
    padding: 8px 16px !important;
    border-width: 0 0 1px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .workspace > .breadcrumb {
    margin: 0 -16px !important;
    padding: 10px 18px !important;
    border-bottom: 1px solid var(--ref-line) !important;
    background: #ffffff !important;
    color: var(--ref-muted) !important;
  }

  #dashboard.section.active {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "hero"
      "context"
      "focus"
      "visual"
      "process" !important;
    gap: 12px !important;
    align-items: start !important;
  }

  #dashboard > .hero-panel {
    min-height: 126px !important;
    padding: 22px 28px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 24px !important;
    overflow: hidden !important;
    border-radius: var(--ref-radius) !important;
  }

  #dashboard > .hero-panel > div:first-child {
    max-width: 780px !important;
  }

  #dashboard > .hero-panel .status-badge {
    display: inline-flex !important;
    height: 26px !important;
    padding: 0 10px !important;
    align-items: center !important;
    border-color: rgba(255, 255, 255, 0.36) !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
  }

  #dashboard > .hero-panel h2 {
    margin: 10px 0 0 !important;
    max-width: 760px !important;
    color: #ffffff !important;
    font-size: 1.56rem !important;
    line-height: 1.24 !important;
    text-align: left !important;
  }

  #dashboard > .hero-panel p {
    display: none !important;
  }

  #dashboard > .hero-panel .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 132px) !important;
    gap: 10px !important;
  }

  #dashboard > .hero-panel .hero-stats > div {
    min-height: 74px !important;
    padding: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: none !important;
  }

  #dashboard > .dashboard-context-strip {
    grid-area: context !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #dashboard .dashboard-context-strip > div {
    min-height: 64px !important;
    padding: 10px 14px !important;
    border-radius: var(--ref-radius) !important;
    background: #ffffff !important;
  }

  #dashboard .dashboard-context-strip strong {
    margin-top: 5px !important;
    font-size: 1rem !important;
    font-weight: 760 !important;
  }

  #dashboard > .role-focus-panel {
    grid-area: focus !important;
    padding: 0 !important;
    border-radius: var(--ref-radius) !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  #dashboard .role-focus-head {
    min-height: 78px !important;
    padding: 16px 20px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    border-bottom: 1px solid var(--ref-line) !important;
    background: #fbfcfe !important;
  }

  #dashboard .role-focus-head h3 {
    margin: 3px 0 !important;
    font-size: 1.28rem !important;
    line-height: 1.2 !important;
  }

  #dashboard .role-focus-head span {
    display: block !important;
    max-width: 840px !important;
    overflow: hidden !important;
    color: var(--ref-muted) !important;
    font-size: 0.86rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #dashboard .role-focus-head > strong {
    padding: 8px 12px !important;
    border: 1px solid rgba(0, 184, 148, 0.22) !important;
    border-radius: 999px !important;
    background: var(--ref-teal-soft) !important;
    color: var(--ref-teal-deep) !important;
    font-size: 0.82rem !important;
  }

  #dashboard .role-focus-body {
    padding: 16px 20px 18px !important;
    display: grid !important;
    grid-template-columns: 360px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  #dashboard .role-focus-metrics {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #dashboard .role-focus-metrics div {
    min-height: 68px !important;
    padding: 12px 14px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "label value"
      "hint value" !important;
    align-items: center !important;
    border-left: 3px solid var(--ref-teal) !important;
    background: #ffffff !important;
  }

  #dashboard .role-focus-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #dashboard .role-focus-actions a {
    min-height: 142px !important;
    padding: 14px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: var(--ref-radius) !important;
    background: #ffffff !important;
    text-decoration: none !important;
  }

  #dashboard .role-focus-actions b {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: var(--ref-teal-soft) !important;
    color: var(--ref-teal-deep) !important;
  }

  #dashboard > .visual-command-grid {
    grid-area: visual !important;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #dashboard .visual-card {
    min-height: 188px !important;
    padding: 14px !important;
    border-radius: var(--ref-radius) !important;
    background: #ffffff !important;
  }

  #dashboard .visual-card-wide {
    grid-column: span 6 !important;
  }

  #dashboard .visual-card:not(.visual-card-wide) {
    grid-column: span 3 !important;
  }

  #dashboard .visual-card-compact {
    min-height: 160px !important;
  }

  #dashboard > .process-grid {
    grid-area: process !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #dashboard .process-card {
    min-height: 96px !important;
    padding: 13px !important;
    border-radius: var(--ref-radius) !important;
    background: #ffffff !important;
  }

  #dashboard .process-card strong {
    font-size: 0.95rem !important;
  }

  #dashboard .process-card p {
    margin-top: 6px !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }
}

@media (min-width: 981px) and (max-width: 1240px) {
  #dashboard .role-focus-body {
    grid-template-columns: 1fr !important;
  }

  #dashboard .role-focus-actions {
    grid-template-columns: 1fr !important;
  }

  #dashboard .visual-card-wide,
  #dashboard .visual-card:not(.visual-card-wide) {
    grid-column: span 6 !important;
  }
}

@media (min-width: 981px) {
  #dashboard.section.active > * {
    width: 100% !important;
    max-width: none !important;
  }

  #dashboard > .role-focus-panel {
    width: 100% !important;
    max-width: none !important;
  }

  #dashboard .role-focus-body {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #dashboard .role-focus-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #dashboard .role-focus-metrics div {
    min-height: 78px !important;
  }

  #dashboard .role-focus-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #dashboard .role-focus-actions a {
    min-height: 112px !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: start !important;
  }

  #dashboard .role-focus-actions a > div {
    min-width: 0 !important;
  }

  #dashboard .role-focus-actions span,
  #dashboard .role-focus-actions strong,
  #dashboard .role-focus-actions em {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #dashboard .role-focus-actions strong {
    margin: 4px 0 !important;
    white-space: nowrap !important;
  }

  #dashboard .role-focus-actions em {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
  }

  #dashboard > .dashboard-context-strip {
    order: 2 !important;
  }
}

body,
.app-shell,
.workspace {
  background: var(--ref-page) !important;
  color: var(--ref-text) !important;
  letter-spacing: 0 !important;
}

.panel,
.summary-panel,
.doc-preview,
.receipt-preview,
.process-card,
.visual-card,
.role-focus-panel,
.customer-add-panel,
.customer-detail-card,
.customer-sidebar,
.customer-activity-panel,
.crm-lane,
.settings-card,
.goal-card,
.goal-assignment-card,
.commission-panel,
.refund-form,
.table-wrap,
.wecom-binding-card {
  border: 1px solid var(--ref-line) !important;
  border-radius: var(--ref-radius) !important;
  background: var(--ref-surface) !important;
  box-shadow: none !important;
}

h1,
h2,
h3,
h4,
.panel-head h2,
.hero-panel h2,
.visual-card h3,
.process-card strong {
  color: var(--ref-text) !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

.muted,
.hero-panel p,
.panel p,
.summary-panel p,
.process-card p,
.visual-card span,
.dashboard-context-strip span,
.metric-row span {
  color: var(--ref-muted) !important;
}

.button,
button,
input,
select,
textarea,
.topbar-pill,
.nav-item,
.nav-leaf,
.nav-child-link,
.tab-pill {
  border-radius: var(--ref-radius) !important;
  letter-spacing: 0 !important;
}

.button.primary,
button.primary,
.primary-action,
.topbar-quick-actions .primary-action {
  min-height: 36px !important;
  border: 1px solid var(--ref-teal-deep) !important;
  background: var(--ref-teal) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.button.secondary,
button.secondary,
.button.ghost,
button.ghost,
.topbar-quick-actions button {
  min-height: 36px !important;
  border: 1px solid var(--ref-line-strong) !important;
  background: #ffffff !important;
  color: var(--ref-soft-text) !important;
  box-shadow: none !important;
}

input,
select,
textarea {
  min-height: 34px !important;
  border: 1px solid var(--ref-line-strong) !important;
  border-radius: var(--ref-radius) !important;
  background: #ffffff !important;
  color: var(--ref-text) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(22, 131, 245, 0.58) !important;
  box-shadow: 0 0 0 2px rgba(22, 131, 245, 0.12) !important;
  outline: none !important;
}

table {
  border-collapse: collapse !important;
  background: #ffffff !important;
}

thead th {
  min-height: 40px !important;
  padding: 11px 12px !important;
  border: 1px solid var(--ref-line) !important;
  background: #f0f2f5 !important;
  color: var(--ref-soft-text) !important;
  font-weight: 700 !important;
}

tbody td {
  min-height: 42px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--ref-line) !important;
  color: var(--ref-text) !important;
}

.status-badge,
.pill,
.badge {
  border: 1px solid rgba(22, 131, 245, 0.18) !important;
  border-radius: 999px !important;
  background: var(--ref-blue-soft) !important;
  color: var(--ref-blue-deep) !important;
}

.tag-warning,
.risk-chip,
.needs-followup,
.field-attention {
  border-color: rgba(255, 173, 47, 0.42) !important;
  background: var(--ref-orange-soft) !important;
  color: #a86500 !important;
}

@media (min-width: 981px) {
  .app-shell {
    grid-template-columns: 252px minmax(0, 1fr) !important;
    background: var(--ref-page) !important;
  }

  .sidebar {
    width: 252px !important;
    padding: 0 !important;
    border-right: 1px solid var(--ref-line) !important;
    background: #ffffff !important;
    color: var(--ref-text) !important;
    box-shadow: none !important;
  }

  .sidebar .brand {
    min-height: 62px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-bottom: 1px solid var(--ref-line) !important;
  }

  .sidebar .brand-logo {
    width: 72px !important;
    height: 32px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .sidebar .brand strong {
    color: var(--ref-text) !important;
    font-size: 1rem !important;
    font-weight: 760 !important;
  }

  .sidebar .domain-card {
    margin: 12px 14px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: var(--ref-radius) !important;
    background: #f8fafc !important;
    color: var(--ref-soft-text) !important;
  }

  .sidebar .nav {
    display: block !important;
    gap: 0 !important;
    padding: 10px 8px !important;
    overflow: visible !important;
  }

  .sidebar .nav-rail {
    display: grid !important;
    gap: 2px !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .sidebar .nav-panel {
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 8px 0 0 !important;
    display: block !important;
    border-top: 1px solid var(--ref-line) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .sidebar .nav-panel .nav-group {
    display: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .sidebar .nav-panel .nav-group.active:not([hidden]) {
    display: block !important;
  }

  .sidebar .nav-panel-head {
    padding: 8px 12px !important;
    display: block !important;
  }

  .sidebar .nav-panel-head strong {
    display: block !important;
    color: var(--ref-text) !important;
    font-size: 0.88rem !important;
    font-weight: 760 !important;
  }

  .sidebar .nav-panel-head span {
    display: block !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    color: var(--ref-muted) !important;
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .sidebar .nav-module-button,
  .sidebar .nav-panel .nav-item,
  .sidebar .nav-panel .nav-leaf {
    min-height: 42px !important;
    padding: 0 12px !important;
    display: grid !important;
    grid-template-columns: 30px minmax(120px, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: var(--ref-radius) !important;
    background: transparent !important;
    color: var(--ref-text) !important;
    box-shadow: none !important;
  }

  .sidebar .nav-module-button {
    width: 100% !important;
    overflow: visible !important;
  }

  .sidebar .nav-panel .nav-item,
  .sidebar .nav-panel .nav-leaf {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
    align-content: center !important;
  }

  .sidebar .nav-module-button:hover,
  .sidebar .nav-module-button.active,
  .sidebar .nav-panel .nav-item:hover,
  .sidebar .nav-panel .nav-leaf:hover,
  .sidebar .nav-panel .nav-item.active,
  .sidebar .nav-panel .nav-leaf.active {
    background: #eef1f5 !important;
    color: var(--ref-text) !important;
  }

  .sidebar .nav-glyph,
  .sidebar .nav-index,
  .sidebar .nav-child-link::before {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: var(--ref-blue) !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  .sidebar .nav-module-label,
  .sidebar .nav-label {
    color: inherit !important;
    font-size: 0.9rem !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .sidebar .nav-module-hint,
  .sidebar .nav-panel small {
    color: var(--ref-muted) !important;
  }

  .sidebar .nav-panel small {
    display: block !important;
    overflow: hidden !important;
    font-size: 0.7rem !important;
    font-weight: 460 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .sidebar .nav-module-hint {
    display: none !important;
  }

  .sidebar .nav-child-grid {
    display: grid !important;
    gap: 2px !important;
    margin: 2px 0 8px 40px !important;
    padding: 0 !important;
    border-left: 0 !important;
  }

  .sidebar .nav-child-link {
    min-height: 30px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: var(--ref-radius) !important;
    background: transparent !important;
    color: var(--ref-soft-text) !important;
    font-size: 0.82rem !important;
    font-weight: 520 !important;
  }

  .sidebar .nav-child-link:hover,
  .sidebar .nav-child-link.active {
    background: #eef1f5 !important;
    color: var(--ref-blue) !important;
  }

  .workspace {
    padding: 0 16px 24px !important;
    gap: 12px !important;
    background: var(--ref-page) !important;
  }

  .workspace > .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    margin: 0 -16px !important;
    min-height: 58px !important;
    padding: 10px 18px !important;
    display: grid !important;
    grid-template-columns: minmax(180px, auto) minmax(0, 1fr) !important;
    grid-template-areas: "brand actions" "secondary secondary" !important;
    align-items: center !important;
    gap: 8px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ref-line) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .workspace > .topbar .topbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .workspace > .topbar .topbar-logo {
    width: 76px !important;
    height: 32px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .workspace > .topbar h1 {
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 760 !important;
  }

  .workspace > .topbar .eyebrow {
    display: none !important;
  }

  .workspace > .topbar .topbar-actions {
    justify-content: flex-end !important;
    gap: 10px !important;
  }

  .workspace > .topbar .topbar-control,
  .workspace > .topbar .topbar-status {
    height: 36px !important;
    min-height: 36px !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: 18px !important;
    background: #f3f5f8 !important;
    color: var(--ref-muted) !important;
    box-shadow: none !important;
  }

  .workspace > .topbar .button {
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 18px !important;
  }

  .workspace > .topbar .topbar-secondary {
    padding: 8px 0 0 !important;
    border-top: 1px solid #f0f2f5 !important;
    gap: 8px !important;
  }

  .topbar-tabs,
  .topbar-filter-group {
    min-height: 34px !important;
    padding: 2px !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: var(--ref-radius) !important;
    background: #f7f8fa !important;
  }

  .topbar-pill,
  .topbar-quick-actions button {
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: var(--ref-radius) !important;
    color: var(--ref-soft-text) !important;
  }

  .topbar-pill.active {
    border: 1px solid var(--ref-blue) !important;
    background: #ffffff !important;
    color: var(--ref-blue) !important;
    box-shadow: none !important;
  }

  .section.active {
    gap: 12px !important;
  }

  .hero-panel {
    min-height: 74px !important;
    padding: 16px 20px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: var(--ref-radius) !important;
    background:
      linear-gradient(90deg, rgba(14, 192, 232, 0.96), rgba(10, 98, 245, 0.98)),
      radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22), transparent 28%) !important;
    box-shadow: none !important;
  }

  #dashboard.section.active {
    grid-template-columns: minmax(0, 1fr) 352px !important;
    grid-template-areas:
      "hero hero"
      "focus side"
      "context context"
      "visual visual"
      "process process" !important;
    gap: 12px !important;
  }

  #dashboard > .role-focus-panel {
    grid-area: focus !important;
  }

  #dashboard > .hero-panel {
    grid-area: hero !important;
    min-height: 82px !important;
    background:
      linear-gradient(90deg, rgba(14, 192, 232, 0.96), rgba(10, 98, 245, 0.98)),
      radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.22), transparent 30%) !important;
  }

  #dashboard > .hero-panel h2 {
    color: #ffffff !important;
    font-size: 1.72rem !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  #dashboard > .role-focus-panel {
    border-radius: 0 !important;
    background: #fffaf2 !important;
  }

  #dashboard > .summary-panel {
    grid-area: side !important;
  }

  .hero-panel h2 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 1.58rem !important;
    font-weight: 760 !important;
    text-align: center !important;
  }

  .hero-panel p,
  .hero-panel .eyebrow,
  .hero-panel .hero-stats {
    display: none !important;
  }

  .panel,
  .summary-panel {
    padding: 16px !important;
  }

  .panel-head,
  .summary-head {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--ref-line) !important;
  }

  .dashboard-context-strip,
  .metric-row,
  .hero-stats,
  .stats-grid {
    gap: 8px !important;
  }

  .dashboard-context-strip > div,
  .metric-row > div,
  .hero-stats > div,
  .stat-card,
  .metric-card {
    min-height: 78px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: 0 !important;
    background: #fffdf8 !important;
    box-shadow: none !important;
  }

  .dashboard-context-strip strong,
  .metric-row strong,
  .stat-card strong,
  .metric-card strong {
    color: var(--ref-text) !important;
    font-size: 1.45rem !important;
    font-weight: 520 !important;
  }

  .visual-card,
  .process-card {
    padding: 14px !important;
    border-radius: 0 !important;
    background: #fffaf2 !important;
  }

  .visual-card::before,
  .process-card::before {
    height: 2px !important;
    background: var(--ref-orange) !important;
  }

  .table-wrap {
    border-radius: 0 !important;
    overflow: auto !important;
  }
}

@media (max-width: 980px) {
  body,
  .app-shell,
  .workspace {
    background: #f4f6f9 !important;
  }

  .mobile-workbench-appbar {
    min-height: 52px !important;
    background: #005edc !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .mobile-workbench-appbar strong,
  .mobile-workbench-appbar a,
  .mobile-workbench-appbar button {
    color: #ffffff !important;
  }

  .mobile-workbench-functions,
  .mobile-workbench-todo,
  .mobile-data-center,
  .mobile-home-card,
  .mobile-home-metrics,
  .mobile-home-trace,
  .mobile-opportunity-feed article,
  .panel,
  .summary-panel {
    border: 1px solid var(--ref-line) !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  .mobile-function-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px 8px !important;
  }

  .mobile-function-grid a {
    min-height: 64px !important;
    padding: 8px 2px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .mobile-function-grid b,
  .mobile-function-grid a:nth-child(n) b {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: var(--ref-blue) !important;
    color: #ffffff !important;
  }

  .mobile-function-grid a:nth-child(2n) b {
    background: var(--ref-teal) !important;
  }

  .mobile-function-grid a:nth-child(3n) b {
    background: #33b5ff !important;
  }

  .mobile-function-grid a:nth-child(4n) b {
    background: #ffad2f !important;
  }

  .mobile-function-grid span {
    color: var(--ref-text) !important;
    font-size: 0.72rem !important;
  }

  .mobile-home-focus,
  .mobile-workbench-marketbar {
    border: 0 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  .mobile-home-focus strong,
  .mobile-home-focus span,
  .mobile-home-focus em {
    color: var(--ref-text) !important;
  }

  .mobile-data-tabs,
  .mobile-task-range-tabs,
  .mobile-home-filterbar {
    border: 0 !important;
    border-radius: 0 !important;
    background: #f2f4f7 !important;
  }

  .mobile-data-tabs button.active,
  .mobile-task-range-tabs button.active,
  .mobile-home-filterbar button.active {
    border-bottom: 2px solid var(--ref-blue) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ref-blue) !important;
    box-shadow: none !important;
  }

  .sidebar,
  body[data-active-section="dashboard"] .sidebar {
    border-top: 1px solid var(--ref-line) !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  .sidebar .nav-module-button.active {
    background: var(--ref-blue-soft) !important;
    color: var(--ref-blue-deep) !important;
  }
}

/* Final dashboard layout lock: this must stay after all legacy desktop/mobile
   overrides so the workbench does not fall back to the narrow two-column draft. */
@media (min-width: 981px) {
  .workspace > .topbar .topbar-brand {
    display: none !important;
  }

  .workspace > .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "actions"
      "secondary" !important;
  }

  .workspace > .topbar .topbar-actions {
    grid-area: actions !important;
    justify-content: flex-end !important;
  }

  #dashboard.section.active {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "hero"
      "focus"
      "context"
      "visual"
      "process" !important;
    gap: 12px !important;
  }

  #dashboard.section.active > .hero-panel,
  #dashboard.section.active > .role-focus-panel,
  #dashboard.section.active > .dashboard-context-strip,
  #dashboard.section.active > .visual-command-grid,
  #dashboard.section.active > .process-grid {
    width: 100% !important;
    max-width: none !important;
  }

  #dashboard.section.active > .hero-panel { grid-area: hero !important; }
  #dashboard.section.active > .role-focus-panel { grid-area: focus !important; }
  #dashboard.section.active > .dashboard-context-strip { grid-area: context !important; }
  #dashboard.section.active > .visual-command-grid { grid-area: visual !important; }
  #dashboard.section.active > .process-grid { grid-area: process !important; }

  #dashboard .role-focus-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #dashboard .role-focus-metrics,
  #dashboard .role-focus-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Customer profile field lock: keep CRM/customer details readable. */
@media (min-width: 761px) {
  .customer-info-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
    gap: 10px !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--ref-line) !important;
  }

  .customer-info-list > div {
    min-width: 0 !important;
    min-height: 78px !important;
    padding: 12px 14px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    gap: 5px !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: var(--ref-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    writing-mode: horizontal-tb !important;
  }

  .customer-info-list span,
  .customer-info-list strong,
  .customer-info-list em {
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    text-align: left !important;
  }

  .customer-info-list span {
    color: var(--ref-muted) !important;
    font-size: 0.78rem !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
  }

  .customer-info-list strong {
    color: var(--ref-text) !important;
    font-size: 1rem !important;
    font-weight: 780 !important;
    line-height: 1.32 !important;
  }

  .customer-info-list em {
    color: var(--ref-muted) !important;
    font-size: 0.76rem !important;
    font-style: normal !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 760px) {
  .customer-info-list {
    grid-template-columns: 1fr !important;
  }
}

/* Medium viewport sidebar guard: keep navigation readable before switching to phone dock. */
@media (min-width: 761px) and (max-width: 980px) {
  .app-shell,
  body[data-active-section="dashboard"] .app-shell {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    background: var(--ref-page, #f4f6f9) !important;
  }

  .sidebar,
  body[data-active-section="dashboard"] .sidebar {
    position: sticky !important;
    inset: auto !important;
    top: 0 !important;
    z-index: 20 !important;
    width: 240px !important;
    min-width: 240px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    padding: 12px 10px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    border: 0 !important;
    border-right: 1px solid var(--ref-line, #e1e7ef) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    backdrop-filter: none !important;
  }

  .mobile-bottom-dock,
  .mobile-nav-sheet,
  .sidebar::before,
  .sidebar::after {
    display: none !important;
  }

  .sidebar .brand {
    min-height: 56px !important;
    padding: 4px 6px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-bottom: 1px solid var(--ref-line, #e1e7ef) !important;
  }

  .sidebar-card {
    display: block !important;
    visibility: visible !important;
  }

  .sidebar .brand-logo {
    width: 86px !important;
    height: 34px !important;
    flex: 0 0 86px !important;
  }

  .sidebar .brand-logo img {
    max-width: 82px !important;
    max-height: 30px !important;
  }

  .sidebar .brand strong {
    overflow: hidden !important;
    font-size: 0.96rem !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .sidebar .brand span {
    display: none !important;
  }

  .sidebar .nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .sidebar .nav-rail {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .sidebar .nav-panel {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border-top: 1px solid var(--ref-line, #e1e7ef) !important;
    background: transparent !important;
  }

  .sidebar .nav-panel .nav-group {
    display: none !important;
  }

  .sidebar .nav-panel .nav-group.active:not([hidden]) {
    display: grid !important;
    gap: 8px !important;
  }

  .sidebar .nav-module-button,
  .sidebar .nav-panel .nav-item,
  .sidebar .nav-panel .nav-leaf {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    display: grid !important;
    align-items: center !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 7px 9px !important;
    border-radius: 8px !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .sidebar .nav-panel .nav-item,
  .sidebar .nav-panel .nav-leaf {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sidebar .nav-module-label,
  .sidebar .nav-label,
  .sidebar .nav-child-link,
  .sidebar .nav-panel-head strong,
  .sidebar .nav-panel-head span,
  .sidebar .nav-module-hint,
  .sidebar .nav-panel small {
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0 !important;
  }

  .sidebar .nav-module-label,
  .sidebar .nav-label {
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
    font-weight: 760 !important;
  }

  .sidebar .nav-module-hint,
  .sidebar .nav-panel small {
    color: var(--ref-muted, #6b778c) !important;
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
  }

  .sidebar .nav-child-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    margin: 0 0 8px 36px !important;
    padding: 0 !important;
  }

  .sidebar .nav-child-link {
    min-height: 28px !important;
    padding: 5px 8px !important;
    border-radius: 7px !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
  }

  .workspace,
  body[data-active-section="dashboard"] .workspace {
    min-width: 0 !important;
    padding: 12px 14px 28px !important;
    overflow-x: hidden !important;
  }
}

/* 2026-07-02 medium viewport navigation rescue.
   This file loads after the main stylesheet, so keep the same guard here to prevent crushed vertical sidebar text. */
@media (min-width: 761px) and (max-width: 1100px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sidebar,
  body[data-active-section="dashboard"] .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 35 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 1px solid #d9e5ec !important;
    background: rgba(255, 255, 255, 0.98) !important;
  }

  .sidebar .brand {
    width: auto !important;
    min-width: 168px !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .sidebar .brand-logo {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
  }

  .sidebar .brand-logo img {
    width: 118px !important;
    height: 38px !important;
    max-width: 118px !important;
    max-height: 38px !important;
  }

  .sidebar .brand strong {
    display: block !important;
    font-size: 0.98rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .sidebar .nav {
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 4px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .sidebar .nav-rail {
    width: max-content !important;
    min-width: max-content !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .sidebar .nav-module-button,
  .sidebar .nav-module-button.active,
  .sidebar .nav-module-button:hover {
    width: auto !important;
    min-width: 92px !important;
    max-width: none !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: 9px !important;
  }

  .sidebar .nav-glyph,
  .sidebar .nav-glyph svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }

  .sidebar .nav-module-label {
    display: inline-block !important;
    color: inherit !important;
    font-size: 0.9rem !important;
    font-weight: 880 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    writing-mode: horizontal-tb !important;
  }

  .sidebar .nav-module-hint,
  .sidebar .nav-panel,
  .sidebar-card,
  .sidebar-fallback-nav {
    display: none !important;
  }
}

@media (min-width: 1101px) {
  .sidebar .nav-module-label,
  .sidebar .nav-module-hint,
  .sidebar .nav-label,
  .sidebar .nav-child-link,
  .sidebar .nav-panel-head strong,
  .sidebar .nav-panel-head span,
  .sidebar .nav-panel small {
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
}

/* 2026-07-02 enrollment subject chip refinement.
   Keep subject selection compact after CRM reference styles load. */
#enrollment .subject-field {
  grid-column: 1 / -1 !important;
}

#enrollment .subject-options {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)) !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid #d7e7e4 !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #f8fcfb 0%, #ffffff 100%) !important;
}

#enrollment .check-chip {
  position: relative !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 14px 0 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  border: 1px solid #d7e1ea !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #172033 !important;
  font-size: 0.94rem !important;
  font-weight: 880 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease !important;
}

#enrollment .check-chip input {
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid #b8c8d8 !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 2px #ffffff !important;
}

#enrollment .check-chip input:checked {
  border-color: #0f8a72 !important;
  background: #0f8a72 !important;
}

#enrollment .check-chip input:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 2px !important;
  width: 5px !important;
  height: 10px !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

#enrollment .check-chip:hover {
  border-color: #9fd8cf !important;
  background: #f5fbfa !important;
}

#enrollment .check-chip:has(input:checked) {
  border-color: #85d2c6 !important;
  background: #edf9f7 !important;
  color: #0f6f63 !important;
  box-shadow: inset 3px 0 0 #0f8a72 !important;
}

@media (max-width: 820px) {
  #enrollment .subject-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 10px !important;
  }

  #enrollment .check-chip {
    min-height: 42px !important;
    height: 42px !important;
    padding-right: 10px !important;
    font-size: 0.86rem !important;
  }
}

/* 2026-07-03 navigation click rescue.
   This file loads late, so repeat the final navigation guard here. */
.sidebar a,
.sidebar button,
.nav-module-button,
.nav-item,
.nav-leaf,
.nav-child-link,
.mobile-nav-sheet a,
.mobile-nav-more {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

.sidebar .nav-module-label,
.sidebar .nav-module-hint,
.sidebar .nav-label,
.sidebar .nav-child-link,
.sidebar .nav-panel-head strong,
.sidebar .nav-panel-head span,
.sidebar .nav-panel small {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

@media (min-width: 761px) and (max-width: 1280px) {
  .app-shell,
  body[data-active-section="dashboard"] .app-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
  }

  .sidebar,
  body[data-active-section="dashboard"] .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 66px !important;
    max-height: none !important;
    padding: 9px 14px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 1px solid #d9e5ec !important;
    background: rgba(255, 255, 255, 0.98) !important;
  }

  .sidebar .brand {
    width: auto !important;
    min-width: 172px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 0 !important;
  }

  .sidebar .brand-logo {
    width: 106px !important;
    min-width: 106px !important;
    height: 38px !important;
    padding: 0 !important;
  }

  .sidebar .brand-logo img {
    width: 106px !important;
    height: auto !important;
    max-width: 106px !important;
    max-height: 36px !important;
    object-fit: contain !important;
  }

  .sidebar .brand strong {
    max-width: 88px !important;
    overflow: hidden !important;
    color: #172033 !important;
    font-size: 0.92rem !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .sidebar .brand span,
  .sidebar-card,
  .sidebar-fallback-nav,
  .sidebar .nav-panel {
    display: none !important;
  }

  .sidebar .nav {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 0 2px !important;
    display: block !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .sidebar .nav-rail {
    width: max-content !important;
    min-width: max-content !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .sidebar .nav-module-button,
  .sidebar .nav-module-button.active,
  .sidebar .nav-module-button:hover {
    width: auto !important;
    min-width: 88px !important;
    max-width: none !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border-radius: 9px !important;
    white-space: nowrap !important;
  }

  .sidebar .nav-glyph,
  .sidebar .nav-glyph svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }

  .sidebar .nav-module-label {
    display: inline-block !important;
    max-width: none !important;
    overflow: visible !important;
    color: inherit !important;
    font-size: 0.86rem !important;
    font-weight: 820 !important;
    line-height: 1 !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .sidebar .nav-module-hint {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .sidebar .nav-panel,
  .sidebar-card,
  .sidebar-fallback-nav {
    display: none !important;
  }

  .mobile-nav-sheet {
    pointer-events: auto !important;
  }

  .mobile-nav-sheet[hidden] {
    display: none !important;
  }
}

/* 2026-07-03 premium layout rescue.
   crm-reference loads last, so this is the authoritative visual/layout lock. */
:root {
  --yy-bg: #f5f7fb;
  --yy-surface: #ffffff;
  --yy-line: #dde7f0;
  --yy-text: #142033;
  --yy-muted: #66758a;
  --yy-primary: #1677ff;
  --yy-teal: #0f8a72;
  --yy-radius: 8px;
}

html,
body {
  overflow-x: hidden !important;
  background: var(--yy-bg) !important;
}

a,
button,
label,
span,
strong,
small,
em,
b,
p,
h1,
h2,
h3,
h4,
th,
td,
.nav-module-label,
.nav-module-hint,
.nav-label,
.nav-child-link {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  letter-spacing: 0 !important;
}

.app-shell,
.workspace,
.section.active {
  min-width: 0 !important;
  max-width: none !important;
}

.workspace {
  width: 100% !important;
  padding: 18px 22px 34px !important;
  gap: 14px !important;
  background: var(--yy-bg) !important;
}

.section.active {
  width: 100% !important;
}

.section.active > *,
.panel,
.summary-panel,
.hero-panel,
.settings-card,
.visual-card,
.doc-preview,
.receipt-preview,
.course-product-panel,
.readiness-panel,
.dashboard-context-strip,
.role-focus-panel,
#product [data-product-panel]:not([hidden]),
#settings [data-settings-panel]:not([hidden]),
#goals [data-goals-panel]:not([hidden]),
#customers [data-customer-panel]:not([hidden]),
#interns [data-intern-panel]:not([hidden]),
#enrollment .panel,
#agreement .panel,
#receipt .panel,
#ledger .panel,
#commission .panel,
#refund .panel {
  width: 100% !important;
  max-width: none !important;
}

.panel,
.summary-panel,
.hero-panel,
.settings-card,
.visual-card,
.doc-preview,
.receipt-preview,
.course-product-panel,
.readiness-panel,
.dashboard-context-strip,
.role-focus-panel {
  border: 1px solid var(--yy-line) !important;
  border-radius: var(--yy-radius) !important;
  background: var(--yy-surface) !important;
  box-shadow: none !important;
}

.panel,
.summary-panel,
.hero-panel,
.settings-card,
.course-product-panel {
  padding: 18px 20px !important;
}

.panel-head,
.visual-card-head {
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #edf2f7 !important;
}

.panel h2,
.summary-panel h2,
.settings-card h3,
.visual-card h3 {
  color: var(--yy-text) !important;
  font-size: clamp(1.04rem, 1.2vw, 1.28rem) !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
}

.panel p,
.summary-panel p,
.settings-card p,
.visual-card span,
.visual-card p,
.field-hint,
.muted,
small {
  color: var(--yy-muted) !important;
  line-height: 1.55 !important;
}

.form-grid,
.settings-grid,
.template-grid,
.product-grid,
.course-template-grid,
.employee-grid,
.customer-grid,
.ledger-grid,
.task-grid {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 14px 16px !important;
  align-items: start !important;
}

.form-grid > *,
.settings-grid > *,
.template-grid > *,
.product-grid > *,
.course-template-grid > *,
.employee-grid > *,
.customer-grid > *,
.ledger-grid > *,
.task-grid > * {
  min-width: 0 !important;
}

input,
select,
textarea,
.fake-input,
.readonly-field {
  width: 100% !important;
  min-height: 40px !important;
  border: 1px solid #cfdbe7 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: var(--yy-text) !important;
  font-size: 0.95rem !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
}

textarea {
  min-height: 96px !important;
  resize: vertical !important;
}

button,
.button,
.btn,
.ghost-btn,
.primary-btn,
.secondary-btn,
.nav-child-link,
.filter-chip,
.pill-button {
  min-height: 36px !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.primary-btn,
button.primary,
.button.primary {
  border-color: #0c64d8 !important;
  background: var(--yy-primary) !important;
  color: #ffffff !important;
}

.filter-chip.active,
.nav-child-link.active,
.nav-item.active,
.nav-leaf.active {
  border-color: rgba(15, 138, 114, 0.28) !important;
  background: #eaf8f5 !important;
  color: #0f7665 !important;
}

table,
.data-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

th,
td {
  padding: 10px 12px !important;
  border-bottom: 1px solid #edf2f7 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
}

th {
  color: #526176 !important;
  font-size: 0.83rem !important;
  font-weight: 760 !important;
  background: #f8fafc !important;
}

#enrollment .subject-options {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)) !important;
  gap: 10px !important;
  padding: 10px !important;
  border: 1px solid #dce8e5 !important;
  border-radius: 8px !important;
  background: #f7fbfa !important;
}

#enrollment .check-chip {
  min-height: 42px !important;
  height: auto !important;
  padding: 10px 12px 10px 40px !important;
  border: 1px solid #d6e2ee !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: var(--yy-text) !important;
}

#enrollment .check-chip input {
  left: 12px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
}

@media (min-width: 1281px) {
  .app-shell {
    grid-template-columns: 252px minmax(0, 1fr) !important;
  }

  .sidebar {
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 16px 12px 18px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
    border-right: 1px solid var(--yy-line) !important;
  }

  .sidebar .brand {
    min-height: 68px !important;
    padding: 4px 4px 12px !important;
    border-bottom: 1px solid #edf2f7 !important;
  }

  .sidebar .brand-logo {
    width: 150px !important;
    height: 48px !important;
  }

  .sidebar .brand-logo img {
    max-width: 142px !important;
    max-height: 42px !important;
  }

  .sidebar .brand strong {
    color: var(--yy-text) !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .nav {
    gap: 10px !important;
  }

  .nav-rail,
  .nav-panel {
    width: 100% !important;
    min-width: 0 !important;
  }

  .nav-module-button {
    min-height: 46px !important;
    padding: 9px 10px !important;
    gap: 9px !important;
    border-radius: 8px !important;
  }

  .sidebar .nav-glyph {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: #1677ff !important;
    color: #ffffff !important;
  }

  .sidebar .nav-glyph svg,
  .sidebar .nav-glyph svg * {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    fill: none !important;
  }

  .nav-module-button .nav-module-label {
    font-size: 0.94rem !important;
    font-weight: 820 !important;
    white-space: nowrap !important;
  }

  .nav-module-hint,
  .nav-panel small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .nav-panel {
    padding: 12px !important;
    border: 1px solid var(--yy-line) !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
  }

  .nav-panel-head {
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #edf2f7 !important;
  }

  .nav-item,
  .nav-leaf,
  .nav-child-link {
    width: 100% !important;
    min-height: 36px !important;
    padding: 8px 10px !important;
    border-radius: 7px !important;
    text-align: left !important;
  }
}

/* 2026-07-03 mobile tone polish.
   Keep the phone workbench refined: deep ink header, restrained teal accents,
   and a small warm gold note instead of loud market-app blues. */
@media (max-width: 760px) {
  :root {
    --mobile-tone-ink: #0c2434;
    --mobile-tone-navy: #12364a;
    --mobile-tone-teal: #0f766e;
    --mobile-tone-mint: #e8f6f3;
    --mobile-tone-gold: #b9872f;
    --mobile-tone-line: #dce7ec;
    --mobile-tone-bg: #f4f7f7;
    --mobile-tone-muted: #718198;
  }

  html body[data-active-section="dashboard"],
  html body[data-active-section="dashboard"] .app-shell,
  html body[data-active-section="dashboard"] .workspace,
  html body[data-active-section="dashboard"] #dashboard,
  html body[data-active-section="dashboard"] .mobile-home {
    background:
      linear-gradient(180deg, #f7faf9 0%, var(--mobile-tone-bg) 100%) !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-appbar {
    min-height: 52px !important;
    padding: 13px 18px 11px !important;
    border: 0 !important;
    background:
      linear-gradient(135deg, var(--mobile-tone-ink) 0%, var(--mobile-tone-navy) 58%, #0f5f61 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(12, 36, 52, 0.18) !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-appbar strong,
  html body[data-active-section="dashboard"] .mobile-workbench-appbar a,
  html body[data-active-section="dashboard"] .mobile-workbench-appbar button {
    color: #ffffff !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-appbar strong {
    font-size: 0.98rem !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-functions,
  html body[data-active-section="dashboard"] .mobile-workbench-todo,
  html body[data-active-section="dashboard"] .mobile-data-center,
  html body[data-active-section="dashboard"] .mobile-home-metrics,
  html body[data-active-section="dashboard"] .mobile-home-trace,
  html body[data-active-section="dashboard"] .mobile-home-card[aria-label="转化漏斗"],
  html body[data-active-section="dashboard"] .mobile-opportunity-feed article {
    border: 1px solid var(--mobile-tone-line) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 10px 22px rgba(18, 42, 58, 0.055) !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-functions {
    margin: 12px 12px 10px !important;
    padding: 16px 14px 17px !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-head strong,
  html body[data-active-section="dashboard"] .mobile-data-title strong,
  html body[data-active-section="dashboard"] .mobile-home-card-head strong {
    color: var(--mobile-tone-ink) !important;
    font-weight: 880 !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-head strong::before,
  html body[data-active-section="dashboard"] .mobile-data-title strong::before,
  html body[data-active-section="dashboard"] .mobile-home-card-head strong::before {
    background: var(--mobile-tone-teal) !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1) !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid {
    gap: 15px 10px !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a {
    color: #1f2f43 !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid b,
  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(n) b {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, #155f68, #0d4452) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 8px 16px rgba(12, 36, 52, 0.11) !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(1) b,
  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(5) b,
  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(10) b {
    background: linear-gradient(145deg, #0e6e93, #0b4e6b) !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(3) b,
  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(7) b {
    background: linear-gradient(145deg, #c08b31, #936719) !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(4) b,
  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(6) b,
  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(9) b {
    background: linear-gradient(145deg, #173d5b, #0f2c43) !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid span {
    color: #26364a !important;
    font-size: 0.73rem !important;
    font-weight: 780 !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-todo,
  html body[data-active-section="dashboard"] .mobile-data-center,
  html body[data-active-section="dashboard"] .mobile-home-metrics,
  html body[data-active-section="dashboard"] .mobile-home-trace {
    margin-right: 12px !important;
    margin-left: 12px !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-todo strong,
  html body[data-active-section="dashboard"] .mobile-home-metrics strong,
  html body[data-active-section="dashboard"] .mobile-home-trace-grid strong {
    color: var(--mobile-tone-ink) !important;
  }

  html body[data-active-section="dashboard"] .mobile-home-metrics a + a {
    border-left-color: #e6edf1 !important;
  }

  html body[data-active-section="dashboard"] .mobile-home-metrics span,
  html body[data-active-section="dashboard"] .mobile-home-metrics em,
  html body[data-active-section="dashboard"] .mobile-home-card-head span,
  html body[data-active-section="dashboard"] .mobile-home-trace-grid span {
    color: var(--mobile-tone-muted) !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-tabs,
  html body[data-active-section="dashboard"] .mobile-task-range-tabs,
  html body[data-active-section="dashboard"] .mobile-home-filterbar {
    background: #f1f5f6 !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-tabs a.active,
  html body[data-active-section="dashboard"] .mobile-task-range-tabs button.active,
  html body[data-active-section="dashboard"] .mobile-home-filterbar button.active {
    color: var(--mobile-tone-teal) !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-tabs a.active::after {
    background: var(--mobile-tone-teal) !important;
  }

  html body[data-active-section="dashboard"] .mobile-bottom-dock {
    border-color: rgba(216, 229, 234, 0.98) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 -12px 24px rgba(18, 42, 58, 0.11) !important;
  }

  html body[data-active-section="dashboard"] .mobile-dock-item {
    color: #65748a !important;
  }

  html body[data-active-section="dashboard"] .mobile-dock-item.active {
    background: var(--mobile-tone-mint) !important;
    color: var(--mobile-tone-teal) !important;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.09) !important;
  }

  html body[data-active-section="dashboard"] .mobile-dock-item.active *,
  html body[data-active-section="dashboard"] .mobile-dock-item.active svg,
  html body[data-active-section="dashboard"] .mobile-dock-item.active svg * {
    color: var(--mobile-tone-teal) !important;
    stroke: currentColor !important;
  }
}

@media (min-width: 761px) and (max-width: 1280px) {
  .app-shell,
  body[data-active-section] .app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sidebar,
  body[data-active-section] .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 110 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 62px !important;
    padding: 8px 12px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--yy-line) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 8px 22px rgba(20, 32, 51, 0.06) !important;
  }

  .sidebar .brand {
    min-width: 190px !important;
    height: 46px !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .sidebar .brand-logo {
    width: 108px !important;
    height: 36px !important;
  }

  .sidebar .brand-logo img {
    max-width: 104px !important;
    max-height: 34px !important;
  }

  .sidebar .brand strong {
    max-width: 84px !important;
    font-size: 0.88rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .sidebar .brand span,
  .sidebar .nav-panel,
  .sidebar-card,
  .sidebar-fallback-nav {
    display: none !important;
  }

  .sidebar .nav {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .sidebar .nav-rail {
    width: max-content !important;
    min-width: max-content !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .sidebar .nav-module-button {
    width: auto !important;
    min-width: 84px !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    display: inline-flex !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }

  .sidebar .nav-glyph {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 5px !important;
    background: #1677ff !important;
    color: #ffffff !important;
  }

  .sidebar .nav-glyph svg,
  .sidebar .nav-glyph svg * {
    width: 12px !important;
    height: 12px !important;
    stroke: currentColor !important;
    fill: none !important;
  }

  .workspace {
    padding: 16px 16px 30px !important;
  }
}

@media (max-width: 760px) {
  .workspace {
    padding: 12px 12px calc(92px + env(safe-area-inset-bottom)) !important;
  }

  .panel,
  .summary-panel,
  .hero-panel,
  .settings-card,
  .visual-card {
    padding: 14px !important;
  }

  .form-grid,
  .settings-grid,
  .template-grid,
  .product-grid,
  .course-template-grid,
  .employee-grid,
  .customer-grid,
  .ledger-grid,
  .task-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #enrollment .subject-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 2026-07-03 medium topbar hard lock.
   crm-reference.css loads last, so this block is the final authority for split-screen windows. */
@media (min-width: 981px) and (max-width: 1280px) {
  .app-shell,
  body[data-active-section] .app-shell,
  body[data-active-section="dashboard"] .app-shell {
    display: block !important;
    grid-template-columns: none !important;
    min-height: 100vh !important;
    width: 100% !important;
    overflow-x: hidden !important;
    background: var(--yy-bg, #f5f7fb) !important;
  }

  .sidebar,
  body[data-active-section] .sidebar,
  body[data-active-section="dashboard"] .sidebar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 220 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    display: grid !important;
    grid-template-columns: 222px minmax(0, 1fr) !important;
    grid-template-rows: 52px !important;
    align-items: center !important;
    align-content: center !important;
    justify-items: stretch !important;
    gap: 14px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid #dde7f0 !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 8px 22px rgba(20, 32, 51, 0.06) !important;
    transform: none !important;
  }

  .sidebar .brand,
  body[data-active-section] .sidebar .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    width: 222px !important;
    min-width: 222px !important;
    max-width: 222px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .sidebar .brand-logo {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .sidebar .brand-logo img {
    width: 112px !important;
    height: 40px !important;
    max-width: 112px !important;
    max-height: 40px !important;
    object-fit: contain !important;
    object-position: center left !important;
  }

  .sidebar .brand > div:last-child {
    min-width: 0 !important;
    display: block !important;
  }

  .sidebar .brand strong {
    display: block !important;
    max-width: 92px !important;
    overflow: hidden !important;
    color: #142033 !important;
    font-size: 0.88rem !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .sidebar .brand span,
  .sidebar-card,
  .sidebar-fallback-nav,
  .sidebar .domain-card,
  .sidebar .nav-panel {
    display: none !important;
  }

  .sidebar .nav {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .sidebar .nav-rail {
    width: max-content !important;
    min-width: max-content !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    align-content: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .sidebar .nav-module-button,
  .sidebar .nav-module-button.active,
  .sidebar .nav-module-button:hover {
    width: auto !important;
    min-width: 86px !important;
    max-width: 124px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 8px 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    text-align: center !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  .sidebar .nav-glyph {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    display: inline-grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    background: #1677ff !important;
    color: #ffffff !important;
  }

  .sidebar .nav-glyph svg,
  .sidebar .nav-glyph svg * {
    width: 13px !important;
    height: 13px !important;
    stroke: currentColor !important;
    fill: none !important;
  }

  .sidebar .nav-module-label {
    display: inline-block !important;
    max-width: 76px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: inherit !important;
    font-size: 0.86rem !important;
    font-weight: 820 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .sidebar .nav-module-hint {
    display: none !important;
  }

  .workspace,
  body[data-active-section] .workspace {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 68px) !important;
    margin: 0 !important;
    padding: 16px 16px 34px !important;
    display: grid !important;
    gap: 14px !important;
    align-content: start !important;
    overflow: visible !important;
    background: var(--yy-bg, #f5f7fb) !important;
    transform: none !important;
  }
}

/* 2026-07-03 desktop sidebar consistency lock.
   Keep the desktop sidebar and workspace on the same grid track so content never slides underneath the nav. */
@media (min-width: 1281px) {
  .app-shell,
  body[data-active-section] .app-shell {
    display: grid !important;
    grid-template-columns: 286px minmax(0, 1fr) !important;
    min-height: 100vh !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .sidebar,
  body[data-active-section] .sidebar {
    grid-column: 1 !important;
    width: 286px !important;
    min-width: 286px !important;
    max-width: 286px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .workspace,
  body[data-active-section] .workspace {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* 2026-07-03 management tab tone polish.
   The topbar secondary tabs should read like a quiet product switcher, not native browser buttons. */
html body .topbar-secondary .topbar-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 5px !important;
  border: 1px solid #dbe6ee !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7faf9 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 22px rgba(15, 33, 48, 0.04) !important;
}

html body .topbar-secondary .topbar-tabs .topbar-pill.tab,
html body .topbar-secondary .topbar-tabs button.topbar-pill.tab {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 92px !important;
  min-height: 32px !important;
  padding: 0 15px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  outline: none !important;
  background: transparent !important;
  color: #47566a !important;
  box-shadow: none !important;
  font-size: 0.95rem !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html body .topbar-secondary .topbar-tabs .topbar-pill.tab:hover {
  border-color: #c7d8e2 !important;
  background: #ffffff !important;
  color: #102033 !important;
}

html body .topbar-secondary .topbar-tabs .topbar-pill.tab.active,
html body .topbar-secondary .topbar-tabs .topbar-pill.tab[aria-current="page"],
html body .topbar-secondary .topbar-tabs .topbar-pill.tab[aria-selected="true"] {
  border-color: #a9d8d1 !important;
  background: #eaf7f4 !important;
  color: #08756f !important;
  box-shadow: inset 3px 0 0 #0f8a7f, 0 8px 18px rgba(15, 99, 92, 0.08) !important;
}

/* 2026-07-03 enrollment subject chip hard lock.
   Keep native checkboxes out of layout so subject choices always render as readable chips. */
html body #enrollment .subject-options {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)) !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid #d7e7e4 !important;
  border-radius: 10px !important;
  background: #f7fbfa !important;
}

html body #enrollment .subject-options .check-chip {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 46px !important;
  height: auto !important;
  padding: 12px 14px 12px 46px !important;
  border: 1px solid #d6e2ee !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #132238 !important;
  box-shadow: none !important;
  font-size: 0.94rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

html body #enrollment .subject-options .check-chip input[type="checkbox"] {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  max-width: 1px !important;
  max-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  pointer-events: none !important;
  transform: none !important;
}

html body #enrollment .subject-options .check-chip::before {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  width: 20px !important;
  height: 20px !important;
  border: 1px solid #b8c7d8 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  transform: translateY(-50%) !important;
}

html body #enrollment .subject-options .check-chip::after {
  content: "" !important;
  position: absolute !important;
  left: 21px !important;
  top: 50% !important;
  width: 6px !important;
  height: 11px !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  opacity: 0 !important;
  transform: translateY(-62%) rotate(45deg) !important;
}

html body #enrollment .subject-options .check-chip:has(input[type="checkbox"]:checked) {
  border-color: #85d2c6 !important;
  background: #edf9f7 !important;
  color: #0f6f63 !important;
  box-shadow: inset 3px 0 0 #0f8a72 !important;
}

html body #enrollment .subject-options .check-chip:has(input[type="checkbox"]:checked)::before {
  border-color: #0f8a72 !important;
  background: #0f8a72 !important;
}

html body #enrollment .subject-options .check-chip:has(input[type="checkbox"]:checked)::after {
  opacity: 1 !important;
}

/* 2026-07-03 agreement confirmation polish.
   Agreement confirmation rows should feel like compact review items, not oversized form controls. */
html body #agreement .check-row[data-deal-view-panel="generate"] {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 46px !important;
  margin: 8px 0 !important;
  padding: 12px 14px 12px 46px !important;
  border: 1px solid #d8e7e4 !important;
  border-radius: 10px !important;
  background: #f7fbfa !important;
  color: #132238 !important;
  box-shadow: 0 8px 18px rgba(15, 33, 48, 0.04) !important;
  font-size: 0.95rem !important;
  font-weight: 840 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: keep-all !important;
}

html body #agreement .check-row[data-deal-view-panel="generate"] input[type="checkbox"] {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  max-width: 1px !important;
  max-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  pointer-events: none !important;
}

html body #agreement .check-row[data-deal-view-panel="generate"]::before {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  width: 20px !important;
  height: 20px !important;
  border: 1px solid #b8c7d8 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  transform: translateY(-50%) !important;
}

html body #agreement .check-row[data-deal-view-panel="generate"]::after {
  content: "" !important;
  position: absolute !important;
  left: 21px !important;
  top: 50% !important;
  width: 6px !important;
  height: 11px !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  opacity: 0 !important;
  transform: translateY(-62%) rotate(45deg) !important;
}

html body #agreement .check-row[data-deal-view-panel="generate"]:has(input[type="checkbox"]:checked) {
  border-color: #85d2c6 !important;
  background: #edf9f7 !important;
  color: #0f6f63 !important;
  box-shadow: inset 3px 0 0 #0f8a72, 0 8px 18px rgba(15, 99, 92, 0.08) !important;
}

html body #agreement .check-row[data-deal-view-panel="generate"]:has(input[type="checkbox"]:checked)::before {
  border-color: #0f8a72 !important;
  background: #0f8a72 !important;
}

html body #agreement .check-row[data-deal-view-panel="generate"]:has(input[type="checkbox"]:checked)::after {
  opacity: 1 !important;
}

html body #agreement label[data-deal-view-panel="generate"]:has(#signDate) {
  margin-top: 14px !important;
}

/* 2026-07-03 dashboard compact focus.
   Today view should read like one dense command surface: no duplicate action card,
   no empty visual grid, and much less vertical air between priority items. */
@media (min-width: 981px) {
  html body[data-active-section="dashboard"] #dashboard.section.active {
    gap: 10px !important;
    align-content: start !important;
  }

  html body[data-active-section="dashboard"] #dashboard > .hero-panel {
    min-height: 112px !important;
    padding: 18px 28px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 20px !important;
    border-radius: 6px !important;
  }

  html body[data-active-section="dashboard"] #dashboard > .hero-panel .status-badge {
    height: 24px !important;
    padding: 0 10px !important;
    font-size: 0.78rem !important;
  }

  html body[data-active-section="dashboard"] #dashboard > .hero-panel h2 {
    margin: 7px 0 0 !important;
    font-size: clamp(1.26rem, 1.35vw, 1.62rem) !important;
    line-height: 1.18 !important;
  }

  html body[data-active-section="dashboard"] #dashboard > .hero-panel p {
    display: none !important;
  }

  html body[data-active-section="dashboard"] #dashboard .hero-stats {
    grid-template-columns: repeat(2, 126px) !important;
    gap: 8px !important;
  }

  html body[data-active-section="dashboard"] #dashboard .hero-stats > div {
    min-height: 62px !important;
    padding: 10px 12px !important;
  }

  html body[data-active-section="dashboard"] #dashboard .hero-stats span {
    font-size: 0.72rem !important;
  }

  html body[data-active-section="dashboard"] #dashboard .hero-stats strong {
    margin-top: 4px !important;
    font-size: 1.18rem !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel {
    min-height: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    border-radius: 6px !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-head {
    min-height: 72px !important;
    padding: 14px 18px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-head .eyebrow {
    margin: 0 0 4px !important;
    font-size: 0.76rem !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-head h3 {
    margin: 0 !important;
    font-size: 1.24rem !important;
    line-height: 1.18 !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-head span {
    margin-top: 6px !important;
    font-size: 0.84rem !important;
    line-height: 1.35 !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-head > strong {
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: 0.8rem !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-body {
    padding: 12px 18px 16px !important;
    gap: 12px !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-metrics div {
    min-height: 58px !important;
    padding: 10px 12px !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-metrics strong {
    font-size: clamp(1.36rem, 1.55vw, 1.9rem) !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-actions a {
    min-height: 78px !important;
    padding: 12px 13px !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-actions b {
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-actions strong {
    margin: 2px 0 !important;
    font-size: 0.92rem !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-actions em {
    font-size: 0.78rem !important;
    line-height: 1.32 !important;
  }

  html body[data-active-section="dashboard"] #dashboardVisualPanel[hidden],
  html body[data-active-section="dashboard"] #goalsOverviewPanel[hidden] {
    display: none !important;
  }
}

@media (min-width: 981px) and (max-width: 1240px) {
  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-metrics,
  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-actions {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-07-03 enrollment form matrix polish.
   Make enrollment fields align like a compact operations console: same label rhythm,
   same control height, and reserved hint space so rows do not wobble. */
html body #enrollment #enrollForm.panel {
  padding: 22px 24px !important;
}

html body #enrollment .mobile-enrollment-review {
  margin: 0 0 18px !important;
  padding: 22px 26px !important;
  border-color: #d7e4ee !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbfa 100%) !important;
}

html body #enrollment .mobile-enrollment-review-head {
  margin-bottom: 16px !important;
  align-items: center !important;
}

html body #enrollment .mobile-enrollment-review-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body #enrollment .mobile-enrollment-review-grid div {
  min-height: 88px !important;
  padding: 14px 16px !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  align-content: start !important;
  border: 1px solid #d9e5ee !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body #enrollment .mobile-enrollment-review-grid span {
  color: #66758a !important;
  font-size: 0.82rem !important;
  font-weight: 820 !important;
  line-height: 1.15 !important;
}

html body #enrollment .mobile-enrollment-review-grid strong {
  margin-top: 8px !important;
  color: #122033 !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  line-height: 1.26 !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

html body #enrollment #enrollForm .form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px 18px !important;
  align-items: start !important;
}

html body #enrollment #enrollForm .form-grid > label,
html body #enrollment #enrollForm .form-grid > .form-field {
  display: grid !important;
  grid-template-rows: 24px 48px minmax(22px, auto) !important;
  gap: 7px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 101px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #122033 !important;
  font-size: 0.94rem !important;
  font-weight: 860 !important;
  line-height: 1.2 !important;
}

html body #enrollment #enrollForm .form-grid > label:not(:has(small))::after {
  content: "" !important;
  display: block !important;
  min-height: 22px !important;
}

html body #enrollment #enrollForm .form-grid > label input,
html body #enrollment #enrollForm .form-grid > label select,
html body #enrollment #enrollForm .form-grid > label textarea,
html body #enrollment #enrollForm .form-grid > .form-field input,
html body #enrollment #enrollForm .form-grid > .form-field select,
html body #enrollment #enrollForm .form-grid > .form-field textarea {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid #d4e0ea !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(20, 32, 51, 0.02) !important;
  color: #122033 !important;
  font-size: 0.96rem !important;
  font-weight: 760 !important;
  line-height: 48px !important;
}

html body #enrollment #enrollForm #enrollmentInternPicker,
html body #enrollment #enrollForm #courseType,
html body #enrollment #enrollForm #enrollmentHasInternReferral {
  display: block !important;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
}

html body #enrollment #enrollForm .form-grid > label textarea,
html body #enrollment #enrollForm .form-grid > .form-field textarea {
  height: auto !important;
  min-height: 96px !important;
  padding-top: 12px !important;
  line-height: 1.45 !important;
}

html body #enrollment #enrollForm .form-grid > label input::placeholder,
html body #enrollment #enrollForm .form-grid > label textarea::placeholder {
  color: #96a3b4 !important;
  font-weight: 680 !important;
}

html body #enrollment #enrollForm .form-grid small,
html body #enrollment #enrollForm .form-grid .field-help {
  min-height: 22px !important;
  margin: 0 !important;
  color: #66758a !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  line-height: 1.38 !important;
}

html body #enrollment #enrollForm .subject-field {
  grid-template-rows: 24px auto !important;
  min-height: 0 !important;
}

html body #enrollment #enrollForm .subject-options {
  margin: 0 !important;
  padding: 12px !important;
  border-radius: 10px !important;
  background: #f7fbfa !important;
}

@media (min-width: 981px) and (max-width: 1280px) {
  html body #enrollment #enrollForm .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body #enrollment .mobile-enrollment-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  html body #enrollment #enrollForm .form-grid,
  html body #enrollment .mobile-enrollment-review-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-07-03 enrollment subject five-up polish.
   Desktop enrollment needs the five course subject chips on one scan line. */
@media (min-width: 981px) {
  html body #enrollment #enrollForm #subjectOptions.subject-options {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body #enrollment #enrollForm #subjectOptions.subject-options .check-chip {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 10px 12px 10px 42px !important;
    border-radius: 9px !important;
    font-size: 0.86rem !important;
    line-height: 1.18 !important;
    white-space: nowrap !important;
  }

  html body #enrollment #enrollForm #subjectOptions.subject-options .check-chip::before {
    left: 12px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 6px !important;
  }

  html body #enrollment #enrollForm #subjectOptions.subject-options .check-chip::after {
    left: 18px !important;
    top: 50% !important;
    width: 7px !important;
    height: 11px !important;
  }
}

@media (max-width: 980px) {
  html body #enrollment #enrollForm #subjectOptions.subject-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  html body #enrollment #enrollForm #subjectOptions.subject-options {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-07-03 global compact one-line density.
   Tighten every work surface by one visual step without changing the workflow. */
html body .main-content {
  gap: 14px !important;
}

html body .section.active {
  gap: 14px !important;
}

@media (min-width: 981px) {
  html body .main-content {
    padding-top: 14px !important;
    padding-bottom: 28px !important;
  }

  html body .section.active {
    padding-top: 0 !important;
    padding-bottom: 18px !important;
  }
}

html body .hero-panel,
html body .panel,
html body .summary-panel,
html body .settings-card,
html body .customer-add-panel,
html body .customer-profile-panel,
html body .customer-activity-panel,
html body .commission-panel,
html body .goal-card,
html body .role-focus-panel,
html body .doc-preview,
html body .receipt-preview {
  padding: 18px 20px !important;
  border-radius: 10px !important;
}

html body .panel-head,
html body .commission-panel-head,
html body .mobile-enrollment-review-head,
html body .customer-profile-head {
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
}

html body .panel-head h2,
html body .hero-panel h2,
html body .summary-panel h3,
html body .settings-card h3,
html body .goal-card h3 {
  margin-bottom: 6px !important;
  line-height: 1.18 !important;
}

html body .panel p,
html body .summary-panel p,
html body .settings-card p,
html body .hero-panel p,
html body .notice,
html body .section-note {
  margin-top: 6px !important;
  margin-bottom: 10px !important;
  line-height: 1.45 !important;
}

html body .metric-row,
html body .metric-grid,
html body .settings-panel-grid,
html body .content-grid,
html body #enrollment .content-grid,
html body .form-grid,
html body .form-grid.compact {
  gap: 14px !important;
}

html body .metric-card,
html body .metric-grid > *,
html body .hero-stats > div,
html body .mobile-enrollment-review-grid div,
html body .role-focus-metrics > *,
html body .dashboard-stat,
html body .customer-info-list > div,
html body .wecom-asset-card {
  min-height: 0 !important;
  padding: 14px 16px !important;
  border-radius: 9px !important;
}

html body .table-wrap,
html body .readiness-panel,
html body .wecom-binding-panel,
html body .agreement-review-panel {
  margin-top: 12px !important;
}

html body .toolbar,
html body .goal-task-toolbar,
html body .panel-actions,
html body .button-row,
html body .topbar-secondary {
  gap: 10px !important;
}

html body .button,
html body button,
html body .topbar-pill,
html body .tab,
html body .nav-leaf,
html body .nav-item {
  min-height: 38px !important;
}

html body input,
html body select,
html body textarea {
  border-radius: 8px !important;
}

html body .form-grid > label,
html body .form-grid > .form-field {
  gap: 6px !important;
}

html body .form-grid input,
html body .form-grid select {
  min-height: 42px !important;
}

html body .form-grid textarea {
  min-height: 86px !important;
}

html body #dashboard .role-focus-panel,
html body #dashboard .goal-command-hero,
html body #dashboard .today-focus-panel {
  margin-bottom: 14px !important;
}

@media (max-width: 980px) {
  html body .main-content,
  html body .section.active {
    gap: 10px !important;
  }

  html body .hero-panel,
  html body .panel,
  html body .summary-panel,
  html body .settings-card,
  html body .customer-add-panel,
  html body .customer-profile-panel,
  html body .customer-activity-panel,
  html body .commission-panel,
  html body .goal-card,
  html body .role-focus-panel,
  html body .doc-preview,
  html body .receipt-preview {
    padding: 15px 16px !important;
    border-radius: 10px !important;
  }
}

/* 2026-07-03 enrollment dense workform lock.
   The order form is used all day, so keep it readable but remove blank vertical air. */
html body #enrollment #enrollForm.panel {
  padding: 16px 18px !important;
}

html body #enrollment .mobile-enrollment-review {
  margin: 0 0 12px !important;
  padding: 16px 18px !important;
}

html body #enrollment .mobile-enrollment-review-head {
  margin-bottom: 10px !important;
  padding-bottom: 0 !important;
}

html body #enrollment .mobile-enrollment-review-grid {
  gap: 10px !important;
}

html body #enrollment .mobile-enrollment-review-grid div {
  min-height: 72px !important;
  padding: 11px 13px !important;
}

html body #enrollment .mobile-enrollment-review-grid strong {
  margin-top: 5px !important;
  font-size: 0.98rem !important;
  line-height: 1.2 !important;
}

html body #enrollment #enrollForm .form-grid {
  gap: 8px 16px !important;
}

html body #enrollment #enrollForm .form-grid > label,
html body #enrollment #enrollForm .form-grid > .form-field {
  grid-template-rows: 21px 42px minmax(14px, auto) !important;
  gap: 5px !important;
  min-height: 82px !important;
  font-size: 0.9rem !important;
}

html body #enrollment #enrollForm .form-grid > label:not(:has(small))::after {
  min-height: 14px !important;
}

html body #enrollment #enrollForm .form-grid > label input,
html body #enrollment #enrollForm .form-grid > label select,
html body #enrollment #enrollForm .form-grid > .form-field input,
html body #enrollment #enrollForm .form-grid > .form-field select {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  line-height: 42px !important;
  font-size: 0.92rem !important;
}

html body #enrollment #enrollForm .form-grid small,
html body #enrollment #enrollForm .form-grid .field-help {
  min-height: 14px !important;
  font-size: 0.72rem !important;
  line-height: 1.25 !important;
}

html body #enrollment #enrollForm .form-grid > label textarea,
html body #enrollment #enrollForm .form-grid > .form-field textarea {
  min-height: 78px !important;
  padding-top: 10px !important;
}

html body #enrollment #enrollForm .subject-field {
  grid-template-rows: 21px auto !important;
}

html body #enrollment #enrollForm .subject-options {
  padding: 10px !important;
}

@media (min-width: 981px) {
  html body #enrollment #enrollForm #subjectOptions.subject-options .check-chip {
    min-height: 42px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* 2026-07-03 discount matrix alignment lock.
   Deprecated by the cascade editor below; kept only so older packages do not lose defaults. */
html body #settingsDiscountSettings #discountRuleEditor.discount-rule-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
  align-items: start !important;
  gap: 14px !important;
  margin: 12px 0 0 !important;
}

html body #settingsDiscountSettings .discount-cohort-card {
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 14px !important;
  border-radius: 10px !important;
}

html body #settingsDiscountSettings .discount-cohort-card + .discount-cohort-card {
  margin-top: 0 !important;
}

html body #settingsDiscountSettings .discount-cohort-card h4 {
  min-height: 26px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

html body #settingsDiscountSettings .discount-stage-block {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 12px !important;
  border-radius: 9px !important;
}

html body #settingsDiscountSettings .discount-stage-block + .discount-stage-block {
  margin-top: 0 !important;
}

html body #settingsDiscountSettings .discount-stage-block > strong {
  min-height: 22px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

html body #settingsDiscountSettings .discount-rule-grid-inner {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin: 0 !important;
}

html body #settingsDiscountSettings .discount-rule-card {
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  align-content: start !important;
  gap: 8px !important;
  min-height: 168px !important;
  padding: 12px !important;
  border-radius: 9px !important;
}

html body #settingsDiscountSettings .discount-rule-card strong,
html body #settingsDiscountSettings .discount-rule-card span,
html body #settingsDiscountSettings .discount-rule-card label {
  margin: 0 !important;
}

html body #settingsDiscountSettings .discount-rule-card select,
html body #settingsDiscountSettings .discount-rule-card input {
  width: 100% !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 10px !important;
  line-height: 34px !important;
}

@media (min-width: 1500px) {
  html body #settingsDiscountSettings #discountRuleEditor.discount-rule-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  html body #settingsDiscountSettings #discountRuleEditor.discount-rule-grid,
  html body #settingsDiscountSettings .discount-rule-grid-inner {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-07-03 discount cascade editor.
   Discounts are now configured by cohort and stage first, then edited in four concise cards. */
html body #settingsDiscountSettings #discountRuleEditor.discount-rule-grid {
  display: block !important;
  grid-template-columns: 1fr !important;
  margin: 12px 0 0 !important;
}

html body #settingsDiscountSettings .discount-cascade-editor {
  display: grid !important;
  gap: 12px !important;
}

html body #settingsDiscountSettings .discount-cascade-toolbar {
  display: grid !important;
  grid-template-columns: minmax(160px, 0.72fr) minmax(180px, 0.84fr) minmax(0, 1.5fr) !important;
  align-items: end !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid #dbe7e5 !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #fbfefd 0%, #f5faf8 100%) !important;
}

html body #settingsDiscountSettings .discount-cascade-toolbar label {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
}

html body #settingsDiscountSettings .discount-cascade-toolbar label > span {
  color: #657385 !important;
  font-size: 0.86rem !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
}

html body #settingsDiscountSettings .discount-cascade-toolbar select {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid #cfdce8 !important;
  border-radius: 8px !important;
  background-color: #fff !important;
}

html body #settingsDiscountSettings .discount-cascade-summary {
  min-height: 40px !important;
  display: grid !important;
  align-content: center !important;
  gap: 3px !important;
  padding: 8px 12px !important;
  border: 1px solid #d8e5ee !important;
  border-radius: 8px !important;
  background: #fff !important;
}

html body #settingsDiscountSettings .discount-cascade-summary strong {
  color: #0b7469 !important;
  font-size: 1rem !important;
  line-height: 1.15 !important;
}

html body #settingsDiscountSettings .discount-cascade-summary span {
  color: #738196 !important;
  font-size: 0.86rem !important;
  line-height: 1.25 !important;
}

html body #settingsDiscountSettings .discount-rule-grid-inner {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin: 0 !important;
}

html body #settingsDiscountSettings .discount-rule-card {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
  gap: 9px !important;
  min-height: 0 !important;
  padding: 12px !important;
  border-radius: 8px !important;
  border: 1px solid #d9e5ee !important;
  background: #fff !important;
  box-shadow: none !important;
}

html body #settingsDiscountSettings .discount-rule-card-head {
  display: grid !important;
  gap: 3px !important;
}

html body #settingsDiscountSettings .discount-rule-card-head strong {
  color: #122033 !important;
  font-size: 1rem !important;
  line-height: 1.15 !important;
}

html body #settingsDiscountSettings .discount-rule-card-head span {
  color: #738196 !important;
  font-size: 0.82rem !important;
  line-height: 1.2 !important;
}

html body #settingsDiscountSettings .discount-rule-card label {
  display: grid !important;
  gap: 5px !important;
  margin: 0 !important;
  color: #526175 !important;
  font-size: 0.84rem !important;
  font-weight: 760 !important;
}

html body #settingsDiscountSettings .discount-rule-card select,
html body #settingsDiscountSettings .discount-rule-card input {
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border: 1px solid #cfdae6 !important;
  border-radius: 7px !important;
  background: #fff !important;
  line-height: 36px !important;
}

@media (max-width: 1180px) {
  html body #settingsDiscountSettings .discount-cascade-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body #settingsDiscountSettings .discount-cascade-summary {
    grid-column: 1 / -1 !important;
  }

  html body #settingsDiscountSettings .discount-rule-grid-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  html body #settingsDiscountSettings .discount-cascade-toolbar,
  html body #settingsDiscountSettings .discount-rule-grid-inner {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-07-03 enrollment adjacent select separation.
   Keep intern picker and course type from visually merging in the dense form. */
html body #enrollment #enrollForm .form-grid {
  column-gap: 20px !important;
}

html body #enrollment #enrollForm #enrollmentInternPicker,
html body #enrollment #enrollForm #courseType {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: inset 0 1px 0 rgba(20, 32, 51, 0.02), 0 0 0 2px #ffffff !important;
}

html body #enrollment #enrollForm label:has(#enrollmentInternPicker) {
  padding-right: 8px !important;
}

html body #enrollment #enrollForm label:has(#courseType) {
  padding-left: 8px !important;
}

@media (max-width: 980px) {
  html body #enrollment #enrollForm label:has(#enrollmentInternPicker),
  html body #enrollment #enrollForm label:has(#courseType) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* 【UI优化-不改动逻辑】2026-07-06 WeCom reference workbench: flat white mobile dashboard, official app-like rhythm. */
@media (max-width: 980px) {
  html body[data-active-section="dashboard"],
  html body[data-active-section="dashboard"] .app-shell,
  html body[data-active-section="dashboard"] .workspace,
  html body[data-active-section="dashboard"] #dashboard,
  html body[data-active-section="dashboard"] .mobile-home {
    background: #ffffff !important;
    color: #0b0f14 !important;
  }

  html body[data-active-section="dashboard"] .workspace {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  html body[data-active-section="dashboard"] .mobile-home {
    gap: 0 !important;
    padding: 0 0 calc(92px + env(safe-area-inset-bottom)) !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-appbar {
    order: 1 !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 20px 18px 12px !important;
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 36px !important;
    align-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #0b0f14 !important;
    box-shadow: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-appbar strong {
    color: #0b0f14 !important;
    font-size: 1.18rem !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-appbar a,
  html body[data-active-section="dashboard"] .mobile-workbench-appbar button {
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #0b0f14 !important;
    box-shadow: none !important;
    font-size: 1.42rem !important;
    font-weight: 760 !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-marketbar,
  html body[data-active-section="dashboard"] .mobile-home-hero,
  html body[data-active-section="dashboard"] .mobile-opportunity-feed,
  html body[data-active-section="dashboard"] .mobile-home-focus,
  html body[data-active-section="dashboard"] .mobile-home-actions,
  html body[data-active-section="dashboard"] .mobile-home-card[aria-label="转化漏斗"] {
    display: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-functions {
    order: 2 !important;
    margin: 0 !important;
    padding: 24px 18px 26px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-head {
    display: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 23px 18px !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a {
    min-width: 0 !important;
    min-height: 78px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: start center !important;
    align-content: start !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #0b0f14 !important;
    font-size: 0.82rem !important;
    font-weight: 520 !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(n+11) {
    display: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid b,
  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(n) b {
    width: 54px !important;
    height: 54px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 18px !important;
    color: rgba(255, 255, 255, 0.96) !important;
    font-size: 1rem !important;
    font-weight: 860 !important;
    box-shadow: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(1) b,
  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(3) b,
  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(10) b {
    background: linear-gradient(145deg, #47bbff 0%, #1687ee 100%) !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(2) b,
  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(8) b {
    background: linear-gradient(145deg, #33ddc1 0%, #16c7b1 100%) !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(4) b {
    background: linear-gradient(145deg, #7ce76a 0%, #53d248 100%) !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(5) b {
    background: linear-gradient(145deg, #9282ff 0%, #7262f3 100%) !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(6) b {
    background: linear-gradient(145deg, #ffa55d 0%, #ff7f3e 100%) !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(7) b {
    background: linear-gradient(145deg, #ffc24a 0%, #ffad18 100%) !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid a:nth-child(9) b {
    background: linear-gradient(145deg, #ff7c86 0%, #ff6472 100%) !important;
  }

  html body[data-active-section="dashboard"] .mobile-function-grid span {
    color: #0b0f14 !important;
    font-size: 0.82rem !important;
    font-weight: 520 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-todo {
    order: 3 !important;
    margin: 0 !important;
    padding: 22px 18px 28px !important;
    border: 0 !important;
    border-top: 8px solid #f5f6f8 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-todo .mobile-task-headline {
    min-height: 76px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 22px !important;
    align-items: start !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #0b0f14 !important;
  }

  html body[data-active-section="dashboard"] .mobile-task-headline strong {
    color: #0b0f14 !important;
    font-size: 1.16rem !important;
    font-weight: 820 !important;
    line-height: 1.2 !important;
  }

  html body[data-active-section="dashboard"] .mobile-task-headline em {
    grid-column: 1 / -1 !important;
    margin-top: 18px !important;
    color: #a0a4aa !important;
    font-size: 0.94rem !important;
    font-style: normal !important;
    font-weight: 430 !important;
  }

  html body[data-active-section="dashboard"] .mobile-workbench-todo .mobile-task-headline::after {
    content: "›" !important;
    display: block !important;
    color: #777d84 !important;
    font-size: 1.9rem !important;
    line-height: 1 !important;
    transform: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-task-periods {
    display: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-center {
    order: 4 !important;
    margin: 0 !important;
    padding: 22px 18px 0 !important;
    border: 0 !important;
    border-top: 8px solid #f5f6f8 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-title {
    margin: 0 0 18px !important;
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-title strong {
    color: #0b0f14 !important;
    font-size: 1.18rem !important;
    font-weight: 840 !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-title strong::before {
    display: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-title span,
  html body[data-active-section="dashboard"] #mobileDataScopeAction {
    color: #1687ee !important;
    font-size: 1.04rem !important;
    font-weight: 760 !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-tabs {
    height: 44px !important;
    margin: 0 -18px !important;
    padding: 0 18px !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;
    gap: 34px !important;
    overflow-x: auto !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #eef1f4 !important;
    background: #ffffff !important;
    scrollbar-width: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-tabs::-webkit-scrollbar {
    display: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-tabs a {
    min-width: max-content !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: #9b9fa5 !important;
    font-size: 0.96rem !important;
    font-weight: 560 !important;
    background: transparent !important;
    border: 0 !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-tabs a.active {
    color: #0b0f14 !important;
    font-weight: 760 !important;
  }

  html body[data-active-section="dashboard"] .mobile-data-tabs a.active::after {
    height: 3px !important;
    width: 28px !important;
    border-radius: 999px !important;
    background: #1687ee !important;
  }

  html body[data-active-section="dashboard"] .mobile-home-metrics {
    order: 5 !important;
    margin: 0 !important;
    padding: 26px 18px 20px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-home-metrics a {
    min-height: 62px !important;
    display: grid !important;
    align-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
  }

  html body[data-active-section="dashboard"] .mobile-home-metrics a + a {
    border-left: 0 !important;
  }

  html body[data-active-section="dashboard"] .mobile-home-metrics strong {
    order: 1 !important;
    color: #0b0f14 !important;
    font-size: 1.52rem !important;
    font-weight: 760 !important;
    line-height: 1 !important;
  }

  html body[data-active-section="dashboard"] .mobile-home-metrics span {
    order: 2 !important;
    color: #9a9fa6 !important;
    font-size: 0.8rem !important;
    font-weight: 430 !important;
  }

  html body[data-active-section="dashboard"] .mobile-home-metrics em {
    display: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-home-trace,
  html body[data-active-section="dashboard"] .mobile-home-card[aria-label="今日工作"] {
    order: 6 !important;
    margin: 0 !important;
    padding: 18px !important;
    border: 0 !important;
    border-top: 1px solid #eef1f4 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-home-card-head strong,
  html body[data-active-section="dashboard"] .mobile-home-trace .mobile-home-card-head strong {
    position: relative !important;
    padding-left: 12px !important;
    color: #0b0f14 !important;
    font-size: 1rem !important;
    font-weight: 820 !important;
  }

  html body[data-active-section="dashboard"] .mobile-home-card-head strong::before,
  html body[data-active-section="dashboard"] .mobile-home-trace .mobile-home-card-head strong::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 3px !important;
    width: 3px !important;
    height: 16px !important;
    border-radius: 999px !important;
    background: #1687ee !important;
    box-shadow: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-home-trace-grid article,
  html body[data-active-section="dashboard"] .mobile-home-tasks a {
    border-color: #e8edf2 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-bottom-dock,
  html body[data-active-section="dashboard"] .sidebar {
    border-top: 1px solid #dedede !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: none !important;
  }

  html body[data-active-section="dashboard"] .sidebar .nav-module-button,
  html body[data-active-section="dashboard"] .sidebar .nav-module-button:hover {
    background: transparent !important;
    color: #666a70 !important;
  }

  html body[data-active-section="dashboard"] .sidebar .nav-module-button.active {
    background: transparent !important;
    color: #1687ee !important;
  }

  html body[data-active-section="dashboard"] .sidebar .nav-glyph {
    color: inherit !important;
  }
}

/* 【UI优化-不改动逻辑】2026-07-06 mobile customer final lock:
   authoritative tail override for the customer/order phone experience. */
@media (max-width: 760px) {
  html body[data-active-section="customers"],
  html body[data-active-section="customers"] .app-shell,
  html body[data-active-section="customers"] .workspace,
  html body[data-active-section="customers"] #customers {
    overflow-x: hidden !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 38%, #fbfdff 100%) !important;
    color: #162033 !important;
  }

  html body[data-active-section="customers"] .workspace {
    padding: 0 10px calc(132px + env(safe-area-inset-bottom)) !important;
    gap: 10px !important;
  }

  html body[data-active-section="customers"] .workspace > .topbar,
  html body[data-active-section="customers"] .workspace > .breadcrumb,
  html body[data-active-section="customers"] #customers > .hero-panel,
  html body[data-active-section="customers"] .customer-mobile-workbench,
  html body[data-active-section="customers"] .customer-detail-card,
  html body[data-active-section="customers"] .customer-activity-panel,
  html body[data-active-section="customers"] .ai-followup-panel,
  html body[data-active-section="customers"] #customers .table-wrap {
    display: none !important;
  }

  html body[data-active-section="customers"] #customers.section.active,
  html body[data-active-section="customers"] .customer-detail-grid {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  html body[data-active-section="customers"] #customers > .panel,
  html body[data-active-section="customers"] .customer-order-panel {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-active-section="customers"] .customer-order-panel {
    display: grid !important;
    gap: 10px !important;
    padding-top: 8px !important;
  }

  html body[data-active-section="customers"] .customer-order-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    margin: 0 -10px !important;
    padding: 9px 12px 8px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    border-bottom: 1px solid rgba(225, 234, 243, 0.86) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 8px 18px rgba(42, 55, 78, 0.045) !important;
    backdrop-filter: blur(16px) !important;
    scrollbar-width: none !important;
  }

  html body[data-active-section="customers"] .customer-order-tabs::-webkit-scrollbar {
    display: none !important;
  }

  html body[data-active-section="customers"] .customer-order-tabs button {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    border: 1px solid #dfe8f1 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #718094 !important;
    box-shadow: none !important;
    font-size: 0.82rem !important;
    font-weight: 840 !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="customers"] .customer-order-tabs button.active {
    border-color: rgba(33, 118, 229, 0.28) !important;
    background: linear-gradient(135deg, #eaf3ff, #f7ebff) !important;
    color: #2176e5 !important;
  }

  html body[data-active-section="customers"] .customer-order-search {
    width: 100% !important;
    max-width: none !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid #dfe8f1 !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(42, 55, 78, 0.045) !important;
  }

  html body[data-active-section="customers"] .customer-order-summary {
    padding: 0 2px !important;
    gap: 7px !important;
    color: #718094 !important;
    font-size: 0.82rem !important;
    font-weight: 780 !important;
  }

  html body[data-active-section="customers"] .customer-order-summary span:last-child {
    color: #162033 !important;
    font-weight: 900 !important;
  }

  html body[data-active-section="customers"] .customer-order-list {
    display: grid !important;
    gap: 10px !important;
  }

  html body[data-active-section="customers"] .customer-order-card {
    gap: 10px !important;
    padding: 13px !important;
    overflow: hidden !important;
    border: 1px solid rgba(225, 234, 243, 0.96) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 253, 255, 0.98)) !important;
    box-shadow: 0 12px 28px rgba(42, 55, 78, 0.075) !important;
  }

  html body[data-active-section="customers"] .customer-order-card-head,
  html body[data-active-section="customers"] .customer-order-no {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body[data-active-section="customers"] .customer-order-card-head span {
    color: #4f5d70 !important;
    font-size: 0.84rem !important;
    font-weight: 900 !important;
  }

  html body[data-active-section="customers"] .customer-order-card-head strong {
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #27c77b, #48d79b) !important;
    color: #ffffff !important;
    font-size: 0.74rem !important;
    font-weight: 900 !important;
  }

  html body[data-active-section="customers"] .customer-order-card-head strong.pending {
    background: linear-gradient(135deg, #ffb55b, #ffcf76) !important;
    color: #714100 !important;
  }

  html body[data-active-section="customers"] .customer-order-no span {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #6f7d8d !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="customers"] .customer-order-no button {
    min-height: 28px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(33, 118, 229, 0.18) !important;
    border-radius: 9px !important;
    background: #f1f7ff !important;
    color: #2176e5 !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
  }

  html body[data-active-section="customers"] .customer-order-body {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
  }

  html body[data-active-section="customers"] .customer-order-cover {
    width: 62px !important;
    min-height: 62px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #e8f8fb, #f4efff) !important;
    color: #0f8ea5 !important;
    font-size: 1.58rem !important;
  }

  html body[data-active-section="customers"] .customer-order-cover.alt {
    background: linear-gradient(135deg, #eaf3ff, #eef8ff) !important;
    color: #2176e5 !important;
  }

  html body[data-active-section="customers"] .customer-order-cover.red {
    background: linear-gradient(135deg, #fff0fa, #fff7fb) !important;
    color: #d9488b !important;
  }

  html body[data-active-section="customers"] .customer-order-body h4 {
    color: #162033 !important;
    font-size: 1rem !important;
    font-weight: 920 !important;
    line-height: 1.28 !important;
  }

  html body[data-active-section="customers"] .customer-order-body p,
  html body[data-active-section="customers"] .customer-order-body small {
    color: #718094 !important;
  }

  html body[data-active-section="customers"] .customer-order-price {
    grid-column: 2 !important;
    justify-items: start !important;
    margin-top: 2px !important;
  }

  html body[data-active-section="customers"] .customer-order-price strong {
    color: #162033 !important;
    font-size: 1.1rem !important;
    font-weight: 920 !important;
  }

  html body[data-active-section="customers"] .customer-order-fee {
    padding-top: 10px !important;
    border-top: 1px solid #edf2f7 !important;
    color: #7c8998 !important;
    font-size: 0.84rem !important;
  }

  html body[data-active-section="customers"] .customer-order-fee strong {
    color: #ef3f7a !important;
    font-weight: 920 !important;
  }

  html body[data-active-section="customers"] .customer-order-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body[data-active-section="customers"] .customer-order-actions button {
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 0 6px !important;
    border: 1px solid #dfe8f1 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: #526579 !important;
    box-shadow: none !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
  }

  html body[data-active-section="customers"] .customer-order-actions button:last-child {
    border-color: transparent !important;
    background: linear-gradient(135deg, #2176e5, #b51ff0) !important;
    color: #ffffff !important;
  }

  html body[data-active-section="customers"] .customer-bottom-actions {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    z-index: 86 !important;
    min-height: 50px !important;
    padding: 4px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px !important;
    border: 1px solid rgba(225, 234, 243, 0.94) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 14px 30px rgba(42, 55, 78, 0.13) !important;
    backdrop-filter: blur(18px) !important;
  }

  html body[data-active-section="customers"] .customer-bottom-actions a,
  html body[data-active-section="customers"] .customer-bottom-actions button {
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 0 3px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    color: #65748a !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="customers"] .customer-bottom-actions a,
  html body[data-active-section="customers"] .customer-bottom-actions button:nth-child(3),
  html body[data-active-section="customers"] .customer-bottom-actions button:nth-child(5) {
    background: linear-gradient(135deg, #eaf3ff, #f7ebff) !important;
    color: #2176e5 !important;
  }

  html body[data-active-section="customers"] .sidebar {
    z-index: 85 !important;
    min-height: 62px !important;
    padding: 5px 12px calc(6px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px 18px 0 0 !important;
    border-top: 1px solid rgba(225, 234, 243, 0.95) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 -10px 26px rgba(42, 55, 78, 0.08) !important;
    backdrop-filter: blur(18px) !important;
  }

  html body[data-active-section="customers"] .sidebar .nav-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html body[data-active-section="customers"] .sidebar .nav-module-button[data-nav-module="settings"] {
    display: none !important;
  }

  html body[data-active-section="customers"] .sidebar .nav-module-button {
    min-height: 48px !important;
    grid-template-rows: 22px 16px !important;
    color: #65748a !important;
  }

  html body[data-active-section="customers"] .sidebar .nav-module-button.active {
    background: #f1f8ff !important;
    color: #2176e5 !important;
  }

  html body[data-active-section="customers"] .sidebar .nav-glyph {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
  }

  html body[data-active-section="customers"] .sidebar .nav-module-button.active .nav-glyph {
    background: linear-gradient(135deg, #67c7d4, #b51ff0) !important;
    color: #ffffff !important;
  }
}

/* 【UI优化-不改动逻辑】Mobile dashboard final placement lock. */
@media (max-width: 760px) {
  html body[data-active-section="dashboard"] #dashboard > .mobile-home > .mobile-workbench-appbar {
    display: none !important;
  }

  html body[data-active-section="dashboard"] .mobile-follow-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html body[data-active-section="dashboard"] .mobile-follow-grid span {
    min-height: 76px !important;
    padding: 9px 3px !important;
  }

  html body[data-active-section="dashboard"] .mobile-follow-grid em {
    font-size: 0.62rem !important;
  }

  html body[data-active-section="dashboard"] .mobile-follow-grid strong {
    font-size: 1.06rem !important;
  }

  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-body,
  html body[data-active-section="dashboard"] #roleFocusPanel .role-focus-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* 【UI优化-不改动逻辑】2026-07-15 三端窗口最终规范：手机端只保留行动、客户、成交与任务。 */
@media (max-width: 760px) {
  :root {
    --mobile-brand-blue: #1677ff;
    --mobile-brand-cyan: #14b8a6;
    --mobile-brand-purple: #7c6cff;
    --mobile-brand-pink: #ef6f91;
    --mobile-page: #f5f8fb;
    --mobile-line: #e6edf3;
    --mobile-text: #172033;
    --mobile-muted: #738095;
  }

  body {
    padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    background: var(--mobile-page) !important;
  }

  .app-shell {
    display: block !important;
    min-height: 100vh !important;
    background: var(--mobile-page) !important;
  }

  .app-shell > .sidebar,
  .app-shell > .site-footer {
    display: none !important;
  }

  .workspace {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 18px !important;
    background: var(--mobile-page) !important;
  }

  #dashboard.section.active {
    padding: 0 !important;
  }

  .mobile-home {
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: 0 0 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    background: var(--mobile-page) !important;
  }

  .mobile-workbench-appbar,
  .mobile-workbench-marketbar,
  .mobile-home-hero,
  .mobile-opportunity-feed,
  .mobile-home-focus,
  .mobile-home-actions,
  .mobile-workbench-todo,
  .mobile-home-metrics,
  .mobile-home-card[aria-label="今日工作"],
  .mobile-home-card[aria-label="转化漏斗"] {
    display: none !important;
  }

  .mobile-home .mobile-workbench-functions,
  .mobile-priority-panel,
  .mobile-data-center,
  .mobile-home .mobile-home-trace,
  .mobile-management-overview {
    width: 100% !important;
    margin: 0 !important;
    padding: 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  .mobile-home .mobile-workbench-functions {
    order: 1 !important;
    padding-top: 20px !important;
  }

  .mobile-home .mobile-workbench-functions .mobile-workbench-head {
    margin: 0 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .mobile-workbench-head strong,
  .mobile-priority-head strong,
  .mobile-data-title > strong,
  .mobile-home-trace > .mobile-home-card-head strong,
  .mobile-management-head strong {
    color: var(--mobile-text) !important;
    font-size: 1.05rem !important;
    font-weight: 860 !important;
    letter-spacing: 0 !important;
  }

  .mobile-workbench-head > button {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid var(--mobile-line) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #5d6b7d !important;
    font-size: 0.92rem !important;
    font-weight: 900 !important;
  }

  .mobile-home .mobile-function-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px 8px !important;
  }

  .mobile-home .mobile-function-grid a {
    min-width: 0 !important;
    min-height: 72px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--mobile-text) !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  .mobile-home .mobile-function-grid a::after,
  .mobile-home .mobile-function-grid small {
    display: none !important;
  }

  .mobile-home .mobile-function-grid b,
  .mobile-home .mobile-function-grid a:nth-child(n) b {
    width: 46px !important;
    height: 46px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #eaf3ff !important;
    color: var(--mobile-brand-blue) !important;
    font-size: 0.96rem !important;
    font-weight: 900 !important;
    box-shadow: none !important;
  }

  .mobile-home .mobile-function-grid a:nth-child(2) b,
  .mobile-home .mobile-function-grid a:nth-child(5) b {
    background: #e8fbf7 !important;
    color: #079b86 !important;
  }

  .mobile-home .mobile-function-grid a:nth-child(3) b,
  .mobile-home .mobile-function-grid a:nth-child(6) b {
    background: #f0edff !important;
    color: var(--mobile-brand-purple) !important;
  }

  .mobile-home .mobile-function-grid a:nth-child(4) b {
    background: #fff0f4 !important;
    color: #d94f78 !important;
  }

  .mobile-home .mobile-function-grid span {
    width: 100% !important;
    overflow: hidden !important;
    color: var(--mobile-text) !important;
    font-size: 0.78rem !important;
    font-weight: 760 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-priority-panel {
    order: 2 !important;
  }

  .mobile-priority-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .mobile-priority-head span,
  .mobile-management-head span {
    display: block !important;
    margin-bottom: 3px !important;
    color: var(--mobile-muted) !important;
    font-size: 0.69rem !important;
    font-weight: 680 !important;
  }

  .mobile-priority-head strong b {
    display: inline-grid !important;
    min-width: 21px !important;
    height: 21px !important;
    place-items: center !important;
    margin-left: 5px !important;
    border-radius: 999px !important;
    background: #fff0f4 !important;
    color: #d94f78 !important;
    font-size: 0.68rem !important;
  }

  .mobile-priority-head > a,
  .mobile-management-head > a {
    flex: 0 0 auto !important;
    color: var(--mobile-brand-blue) !important;
    font-size: 0.74rem !important;
    font-weight: 780 !important;
    text-decoration: none !important;
  }

  .mobile-priority-list {
    margin-top: 13px !important;
    display: grid !important;
    gap: 0 !important;
  }

  .mobile-priority-list a {
    min-width: 0 !important;
    min-height: 61px !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #edf1f5 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--mobile-text) !important;
    text-decoration: none !important;
  }

  .mobile-priority-list a:last-child {
    border-bottom: 0 !important;
  }

  .mobile-priority-list b {
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: #eaf3ff !important;
    color: var(--mobile-brand-blue) !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
  }

  .mobile-priority-list strong,
  .mobile-priority-list span {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-priority-list strong {
    color: var(--mobile-text) !important;
    font-size: 0.84rem !important;
    font-weight: 820 !important;
  }

  .mobile-priority-list span {
    margin-top: 3px !important;
    color: var(--mobile-muted) !important;
    font-size: 0.7rem !important;
    font-weight: 620 !important;
  }

  .mobile-priority-list em,
  .mobile-priority-more em {
    color: var(--mobile-brand-blue) !important;
    font-size: 0.7rem !important;
    font-style: normal !important;
    font-weight: 760 !important;
  }

  .mobile-priority-more {
    margin-top: 4px !important;
    border-top: 1px solid var(--mobile-line) !important;
  }

  .mobile-priority-more summary {
    min-height: 42px !important;
    display: grid !important;
    place-items: center !important;
    color: #5f6d80 !important;
    font-size: 0.73rem !important;
    font-weight: 760 !important;
    list-style: none !important;
  }

  .mobile-priority-more summary::-webkit-details-marker {
    display: none !important;
  }

  .mobile-priority-more summary::after {
    content: "⌄" !important;
    margin-left: 5px !important;
  }

  .mobile-priority-more[open] summary::after {
    content: "⌃" !important;
  }

  .mobile-priority-more > div {
    display: grid !important;
  }

  .mobile-priority-more a {
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border-top: 1px solid #f0f3f6 !important;
    color: var(--mobile-text) !important;
    font-size: 0.76rem !important;
    font-weight: 720 !important;
    text-decoration: none !important;
  }

  .mobile-data-center {
    order: 3 !important;
    padding-bottom: 14px !important;
  }

  .mobile-data-title {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .mobile-data-title > button {
    justify-self: start !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 4px 8px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: #eef7ff !important;
    color: var(--mobile-brand-blue) !important;
    font-size: 0.72rem !important;
    font-weight: 780 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-data-title > span {
    display: none !important;
  }

  .mobile-data-periods {
    margin-top: 14px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding: 3px !important;
    border-radius: 8px !important;
    background: #f2f5f8 !important;
  }

  .mobile-data-periods button {
    min-height: 32px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #758195 !important;
    font-size: 0.74rem !important;
    font-weight: 720 !important;
  }

  .mobile-data-periods button.active {
    background: #ffffff !important;
    color: var(--mobile-brand-blue) !important;
    box-shadow: 0 2px 8px rgba(31, 47, 69, 0.08) !important;
  }

  .mobile-data-tabs {
    margin: 14px -18px -14px !important;
    padding: 0 18px !important;
    display: flex !important;
    gap: 22px !important;
    overflow-x: auto !important;
    border-top: 1px solid var(--mobile-line) !important;
    scrollbar-width: none !important;
  }

  .mobile-data-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .mobile-data-tabs a {
    position: relative !important;
    flex: 0 0 auto !important;
    min-height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    color: #8792a2 !important;
    font-size: 0.76rem !important;
    font-weight: 720 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .mobile-data-tabs a.active {
    color: var(--mobile-text) !important;
    font-weight: 840 !important;
  }

  .mobile-data-tabs a.active::after {
    content: "" !important;
    position: absolute !important;
    right: 24% !important;
    bottom: 0 !important;
    left: 24% !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: var(--mobile-brand-blue) !important;
  }

  .mobile-home .mobile-home-trace {
    order: 4 !important;
    display: block !important;
  }

  .mobile-home-trace > .mobile-home-card-head {
    margin: 0 0 14px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 0 !important;
  }

  .mobile-home-trace > .mobile-home-card-head strong {
    padding-left: 0 !important;
  }

  .mobile-home-trace > .mobile-home-card-head strong::before {
    display: none !important;
  }

  .mobile-home-trace > .mobile-home-card-head span {
    color: var(--mobile-muted) !important;
    font-size: 0.7rem !important;
    font-weight: 680 !important;
  }

  .mobile-follow-summary {
    display: block !important;
  }

  .mobile-follow-card {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  .mobile-follow-card-head {
    display: none !important;
  }

  .mobile-follow-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  .mobile-follow-grid > span {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 3px !important;
    text-align: center !important;
  }

  .mobile-follow-grid em {
    order: 2 !important;
    width: 100% !important;
    overflow: hidden !important;
    color: var(--mobile-muted) !important;
    font-size: 0.65rem !important;
    font-style: normal !important;
    font-weight: 680 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-follow-grid strong {
    order: 1 !important;
    color: var(--mobile-text) !important;
    font-size: clamp(1rem, 5vw, 1.3rem) !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  .mobile-home-trace-grid {
    display: none !important;
  }

  .mobile-management-overview {
    order: 5 !important;
    display: none !important;
  }

  body[data-current-role="管理员"] .mobile-management-overview,
  body[data-current-role="总校长"] .mobile-management-overview,
  body[data-current-role="大区校长"] .mobile-management-overview,
  body[data-current-role="主管"] .mobile-management-overview {
    display: block !important;
  }

  .mobile-management-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .mobile-management-table {
    margin-top: 13px !important;
    display: grid !important;
    border-top: 1px solid var(--mobile-line) !important;
  }

  .mobile-management-table a {
    min-width: 0 !important;
    min-height: 54px !important;
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) 16px !important;
    align-items: center !important;
    gap: 8px !important;
    border-bottom: 1px solid var(--mobile-line) !important;
    color: var(--mobile-text) !important;
    text-decoration: none !important;
  }

  .mobile-management-table span {
    color: var(--mobile-text) !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
  }

  .mobile-management-table strong {
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--mobile-muted) !important;
    font-size: 0.7rem !important;
    font-weight: 640 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-management-table em {
    color: #99a5b4 !important;
    font-size: 1rem !important;
    font-style: normal !important;
  }

  .mobile-primary-dock {
    position: fixed !important;
    z-index: 110 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: calc(62px + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    padding: 6px 12px env(safe-area-inset-bottom) !important;
    border-top: 1px solid #dce5ed !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 -8px 24px rgba(30, 45, 66, 0.06) !important;
    backdrop-filter: blur(14px) !important;
  }

  .mobile-primary-dock a {
    min-width: 0 !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    border: 0 !important;
    color: #788497 !important;
    text-decoration: none !important;
  }

  .mobile-primary-dock a.active {
    color: var(--mobile-brand-blue) !important;
  }

  .mobile-primary-dock b {
    width: 25px !important;
    height: 25px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: #eef2f6 !important;
    color: inherit !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
  }

  .mobile-primary-dock a.active b {
    background: #eaf3ff !important;
  }

  .mobile-primary-dock span {
    overflow: hidden !important;
    max-width: 100% !important;
    font-size: 0.67rem !important;
    font-weight: 760 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* 【UI优化-不改动逻辑】企微侧边栏只展示辅助信息，不复制企业微信原生聊天记录。 */
  #customers .mobile-chat-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  #customers .mobile-chat-head { order: 1 !important; }
  #customers .mobile-chat-context { order: 2 !important; }
  #customers .wecom-chat-workbench { order: 3 !important; }
  #customers .champion-experience-strip { order: 4 !important; }
  #customers .mobile-chat-assist { order: 5 !important; }
  #customers .mobile-chat-composer { order: 6 !important; }

  #customers .mobile-chat-toolbar,
  #customers .mobile-chat-stream {
    display: none !important;
  }

  #customers .wecom-chat-workbench,
  #customers .champion-experience-strip,
  #customers .mobile-chat-assist {
    margin: 0 !important;
    border: 1px solid var(--mobile-line) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  #customers .wecom-sidecar-summary,
  #customers .wecom-chat-assist-grid {
    gap: 0 !important;
  }

  #customers .wecom-sidecar-summary > div,
  #customers .wecom-chat-assist-grid > div {
    border: 0 !important;
    border-bottom: 1px solid #edf1f5 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #customers .wecom-chat-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #customers .mobile-chat-composer {
    position: sticky !important;
    bottom: calc(62px + env(safe-area-inset-bottom)) !important;
    z-index: 5 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 10px !important;
    border: 1px solid var(--mobile-line) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.97) !important;
  }

  #customers .mobile-chat-composer > button[data-chat-quick],
  #customers #mobileChatSend {
    display: none !important;
  }

  #customers .mobile-chat-composer input {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (min-width: 761px) {
  .mobile-primary-dock {
    display: none !important;
  }
}

/* 【UI优化-不改动逻辑】2026-07-15 手机原生工作台 r4：压缩首屏，统一移动端业务窗口。 */
@media (max-width: 760px) {
  :root {
    --mobile-r4-blue: #1684f8;
    --mobile-r4-cyan: #12ad9a;
    --mobile-r4-purple: #7568ee;
    --mobile-r4-pink: #d95f83;
    --mobile-r4-amber: #bf7b18;
    --mobile-r4-text: #152033;
    --mobile-r4-muted: #748196;
    --mobile-r4-line: #e8edf3;
    --mobile-r4-page: #f3f6fa;
    --mobile-r4-soft: #f7f9fc;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: var(--mobile-r4-page) !important;
    color: var(--mobile-r4-text) !important;
    letter-spacing: 0 !important;
    -webkit-font-smoothing: antialiased !important;
  }

  body {
    padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
  }

  .workspace,
  .section.active,
  .mobile-home {
    width: 100% !important;
    max-width: 100% !important;
  }

  .workspace {
    padding: 0 !important;
    background: var(--mobile-r4-page) !important;
  }

  .mobile-home {
    gap: 8px !important;
    padding: 0 0 12px !important;
    background: var(--mobile-r4-page) !important;
  }

  .mobile-home .mobile-workbench-functions,
  .mobile-priority-panel,
  .mobile-data-center,
  .mobile-home .mobile-home-trace,
  .mobile-management-overview {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  /* 首屏快捷入口：保留六个高频动作，取消玩具感阴影。 */
  .mobile-home .mobile-workbench-functions {
    min-height: 0 !important;
    padding: 14px 16px 15px !important;
  }

  .mobile-home .mobile-workbench-functions .mobile-workbench-head {
    min-height: 28px !important;
    margin: 0 0 10px !important;
  }

  .mobile-home .mobile-workbench-functions .mobile-workbench-head strong,
  .mobile-priority-head strong,
  .mobile-data-title > strong,
  .mobile-follow-card-head strong,
  .mobile-management-head strong {
    color: var(--mobile-r4-text) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  .mobile-home .mobile-workbench-functions .mobile-workbench-head strong {
    padding-left: 11px !important;
  }

  .mobile-home .mobile-workbench-functions .mobile-workbench-head strong::before {
    width: 3px !important;
    height: 15px !important;
    background: var(--mobile-r4-blue) !important;
  }

  .mobile-workbench-head > button {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--mobile-r4-soft) !important;
    color: #66758a !important;
    box-shadow: none !important;
  }

  .mobile-home .mobile-function-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 11px 8px !important;
  }

  .mobile-home .mobile-function-grid a {
    min-height: 59px !important;
    gap: 6px !important;
    align-content: start !important;
  }

  .mobile-home .mobile-function-grid b,
  .mobile-home .mobile-function-grid a:nth-child(n) b {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: #e9f3ff !important;
    color: var(--mobile-r4-blue) !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }

  .mobile-home .mobile-function-grid b::before {
    font-size: 1.06rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .mobile-home .mobile-function-grid a:nth-child(1) b::before { content: "\2316" !important; }
  .mobile-home .mobile-function-grid a:nth-child(2) b::before { content: "\2605" !important; }
  .mobile-home .mobile-function-grid a:nth-child(3) b::before { content: "+" !important; }
  .mobile-home .mobile-function-grid a:nth-child(4) b::before { content: "\270E" !important; }
  .mobile-home .mobile-function-grid a:nth-child(5) b::before { content: "\25A6" !important; }
  .mobile-home .mobile-function-grid a:nth-child(6) b::before { content: "\25F7" !important; }

  .mobile-home .mobile-function-grid a:nth-child(2) b {
    background: #e9faf7 !important;
    color: var(--mobile-r4-cyan) !important;
  }

  .mobile-home .mobile-function-grid a:nth-child(3) b {
    background: #eef7ff !important;
    color: #2b91d9 !important;
  }

  .mobile-home .mobile-function-grid a:nth-child(4) b {
    background: #fff0f4 !important;
    color: var(--mobile-r4-pink) !important;
  }

  .mobile-home .mobile-function-grid a:nth-child(5) b {
    background: #f0eeff !important;
    color: var(--mobile-r4-purple) !important;
  }

  .mobile-home .mobile-function-grid a:nth-child(6) b {
    background: #fff6e7 !important;
    color: var(--mobile-r4-amber) !important;
  }

  .mobile-home .mobile-function-grid span {
    color: #263247 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  /* 今日待办：默认三条，保持可展开，改为连续行动列表。 */
  .mobile-priority-panel {
    padding: 14px 16px 10px !important;
  }

  .mobile-priority-head {
    min-height: 32px !important;
  }

  .mobile-priority-head span {
    display: none !important;
  }

  .mobile-priority-head strong b {
    min-width: 20px !important;
    height: 20px !important;
    margin-left: 4px !important;
    background: #fff0f4 !important;
    color: var(--mobile-r4-pink) !important;
    font-size: 0.66rem !important;
  }

  .mobile-priority-head > a {
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    border-radius: 6px !important;
    background: #eef6ff !important;
    color: var(--mobile-r4-blue) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
  }

  .mobile-priority-list {
    margin-top: 8px !important;
  }

  .mobile-priority-list a {
    min-height: 54px !important;
    grid-template-columns: 26px minmax(0, 1fr) auto !important;
    gap: 9px !important;
    padding: 8px 0 !important;
    border-color: var(--mobile-r4-line) !important;
  }

  .mobile-priority-list b {
    width: 25px !important;
    height: 25px !important;
    border-radius: 7px !important;
    font-size: 0.68rem !important;
  }

  .mobile-priority-list a:nth-child(2) b {
    background: #e9faf7 !important;
    color: var(--mobile-r4-cyan) !important;
  }

  .mobile-priority-list a:nth-child(3) b {
    background: #f0eeff !important;
    color: var(--mobile-r4-purple) !important;
  }

  .mobile-priority-list strong {
    font-size: 0.8rem !important;
    font-weight: 750 !important;
  }

  .mobile-priority-list span {
    margin-top: 2px !important;
    font-size: 0.66rem !important;
  }

  .mobile-priority-list em {
    min-width: 42px !important;
    color: #6f7c90 !important;
    font-size: 0.66rem !important;
    text-align: right !important;
  }

  .mobile-priority-list em::after {
    content: "  ›" !important;
    color: #a2acba !important;
  }

  .mobile-priority-more {
    margin: 0 !important;
  }

  .mobile-priority-more summary {
    min-height: 36px !important;
    font-size: 0.68rem !important;
  }

  /* 数据中心与客户指标组成一个连续的数据窗口。 */
  .mobile-data-center {
    padding: 14px 16px 0 !important;
  }

  .mobile-data-title {
    min-height: 30px !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 7px !important;
  }

  .mobile-data-title > button {
    padding: 3px 6px !important;
    border-radius: 5px !important;
    background: #eef6ff !important;
    color: var(--mobile-r4-blue) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
  }

  .mobile-data-title > span {
    display: block !important;
    color: var(--mobile-r4-muted) !important;
    font-size: 0.7rem !important;
    font-weight: 650 !important;
  }

  .mobile-data-periods {
    margin-top: 9px !important;
    padding: 3px !important;
    gap: 0 !important;
    border-radius: 8px !important;
    background: #f1f4f8 !important;
  }

  .mobile-data-periods button {
    min-height: 30px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #7b8798 !important;
    font-size: 0.69rem !important;
    font-weight: 700 !important;
  }

  .mobile-data-periods button.active {
    background: #ffffff !important;
    color: var(--mobile-r4-blue) !important;
    box-shadow: 0 2px 7px rgba(24, 54, 88, 0.07) !important;
  }

  .mobile-data-tabs {
    min-height: 43px !important;
    margin: 9px -16px 0 !important;
    padding: 0 16px !important;
    gap: 20px !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--mobile-r4-line) !important;
  }

  .mobile-data-tabs a {
    min-height: 42px !important;
    font-size: 0.71rem !important;
    font-weight: 700 !important;
  }

  .mobile-data-tabs a.active::after {
    right: 29% !important;
    left: 29% !important;
    height: 2px !important;
    background: var(--mobile-r4-blue) !important;
  }

  .mobile-home .mobile-home-trace {
    padding: 11px 16px 13px !important;
  }

  .mobile-follow-card-head {
    min-height: 26px !important;
  }

  .mobile-follow-card-head strong {
    padding-left: 10px !important;
    font-size: 0.84rem !important;
  }

  .mobile-follow-card-head strong::before {
    width: 3px !important;
    height: 13px !important;
    background: var(--mobile-r4-cyan) !important;
  }

  .mobile-follow-card-head em {
    color: #a2acba !important;
    font-size: 1.1rem !important;
  }

  .mobile-follow-grid {
    margin-top: 7px !important;
    padding: 7px 0 4px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .mobile-follow-grid > span {
    min-width: 0 !important;
    min-height: 49px !important;
    gap: 5px !important;
    padding: 5px 3px !important;
  }

  .mobile-follow-grid > span + span {
    border-left: 1px solid var(--mobile-r4-line) !important;
  }

  .mobile-follow-grid em {
    width: 100% !important;
    color: var(--mobile-r4-muted) !important;
    font-size: 0.58rem !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .mobile-follow-grid strong {
    margin: 0 !important;
    color: var(--mobile-r4-text) !important;
    font-size: 1rem !important;
    line-height: 1 !important;
  }

  .mobile-management-overview {
    padding: 14px 16px 12px !important;
  }

  .mobile-management-head span {
    margin-bottom: 2px !important;
    font-size: 0.64rem !important;
  }

  .mobile-management-table {
    margin-top: 8px !important;
  }

  .mobile-management-table a {
    min-height: 48px !important;
    grid-template-columns: 68px minmax(0, 1fr) 12px !important;
  }

  .mobile-management-table span {
    font-size: 0.72rem !important;
  }

  .mobile-management-table strong {
    font-size: 0.66rem !important;
  }

  /* 底部主导航改为无底色线性符号，避免文字方块感。 */
  .mobile-primary-dock {
    height: calc(58px + env(safe-area-inset-bottom)) !important;
    padding: 5px 12px env(safe-area-inset-bottom) !important;
    border-color: #dde5ed !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 -4px 16px rgba(25, 45, 70, 0.05) !important;
  }

  .mobile-primary-dock a {
    gap: 1px !important;
  }

  .mobile-primary-dock b,
  .mobile-primary-dock a.active b {
    width: 25px !important;
    height: 25px !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 0 !important;
  }

  .mobile-primary-dock b::before {
    color: inherit !important;
    font-size: 1.06rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .mobile-primary-dock a:nth-child(1) b::before { content: "\2302" !important; }
  .mobile-primary-dock a:nth-child(2) b::before { content: "\25CE" !important; }
  .mobile-primary-dock a:nth-child(3) b::before { content: "\00A5" !important; }
  .mobile-primary-dock a:nth-child(4) b::before { content: "\2637" !important; }

  .mobile-primary-dock span {
    font-size: 0.64rem !important;
    font-weight: 700 !important;
  }

  /* 客户窗口：搜索、名单、详情按连续页面排版，不再卡片套卡片。 */
  #customers > .panel {
    padding: 14px 16px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  #customers .panel-head {
    min-height: 54px !important;
    margin: 0 0 10px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--mobile-r4-line) !important;
  }

  #customers .panel-head h2 {
    font-size: 1.08rem !important;
  }

  #customers .panel-head .muted {
    max-width: 235px !important;
    -webkit-line-clamp: 1 !important;
  }

  #customers .customer-mobile-workbench {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  #customers .customer-mobile-search {
    padding: 5px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #f1f4f8 !important;
  }

  #customers .customer-mobile-search > span {
    display: none !important;
  }

  #customers .customer-mobile-search input {
    min-height: 34px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #customers .customer-mobile-search button {
    min-height: 34px !important;
    border: 0 !important;
    background: #ffffff !important;
    color: var(--mobile-r4-blue) !important;
  }

  #customers .customer-mobile-summary {
    min-height: 48px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--mobile-r4-line) !important;
  }

  #customers .customer-mobile-empty {
    min-height: 168px !important;
    padding: 30px 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
  }

  #customers .customer-mobile-card {
    margin: 0 !important;
    padding: 13px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mobile-r4-line) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  #customers .customer-main {
    margin: 8px -16px 0 !important;
    padding: 0 16px !important;
    border-top: 8px solid var(--mobile-r4-page) !important;
  }

  #customers .customer-detail-card,
  #customers .customer-activity-panel,
  #customers .mobile-chat-panel {
    padding: 14px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  #customers .customer-detail-status,
  #customers .customer-detail-metrics,
  #customers .customer-detail-tags,
  #customers .customer-info-list {
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  /* 报名窗口：保留完整表单和校验，只去掉网页式外框。 */
  #enrollment .content-grid {
    display: block !important;
    padding: 0 !important;
  }

  #enrollment #enrollForm {
    margin: 0 !important;
    padding: 14px 16px 92px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  #enrollment #enrollForm > .panel-head {
    margin: 0 0 10px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--mobile-r4-line) !important;
  }

  #enrollment #enrollForm > .panel-head .eyebrow {
    display: none !important;
  }

  #enrollment .deal-view-context {
    margin: 0 0 10px !important;
    padding: 10px 0 10px 11px !important;
    border: 0 !important;
    border-left: 3px solid var(--mobile-r4-cyan) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #enrollment .mobile-enrollment-review {
    margin: 0 0 12px !important;
    padding: 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--mobile-r4-soft) !important;
    box-shadow: none !important;
  }

  #enrollment .mobile-enrollment-review-grid {
    gap: 0 !important;
    border-top: 1px solid var(--mobile-r4-line) !important;
  }

  #enrollment .mobile-enrollment-review-grid > div {
    min-height: 58px !important;
    padding: 10px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mobile-r4-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #enrollment .form-grid {
    gap: 12px !important;
  }

  #enrollment .form-grid > label,
  #enrollment .form-field {
    margin: 0 !important;
  }

  #enrollment input,
  #enrollment select,
  #enrollment textarea {
    min-height: 42px !important;
    border-color: #dce5ee !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  .mobile-enrollment-actions {
    bottom: calc(58px + env(safe-area-inset-bottom)) !important;
    padding: 7px 10px !important;
    border-radius: 0 !important;
    box-shadow: 0 -5px 16px rgba(25, 45, 70, 0.07) !important;
  }

  .mobile-enrollment-actions button {
    min-height: 38px !important;
    border-radius: 7px !important;
  }

  /* 任务窗口直接使用已有手机任务工作台，隐藏桌面解释层。 */
  #goals > .goals-command {
    margin: 0 !important;
    padding: 14px 16px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  #goals > .goals-command > .panel-head {
    margin: 0 0 10px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--mobile-r4-line) !important;
  }

  #goals > .goals-command > .panel-head .eyebrow,
  #goals > .goals-command > .panel-head .muted,
  #goals > .goals-command > .panel-head .panel-actions,
  #goals .goal-command-hero,
  #goals .goal-simple-nav,
  #goals .goal-screen-metrics,
  #goals .goal-stage-progress-panel,
  #goals .goals-dashboard {
    display: none !important;
  }

  #goals .mobile-goal-workbench {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  #goals .mobile-goal-head {
    min-height: 66px !important;
    padding: 6px 0 12px !important;
    border-bottom: 1px solid var(--mobile-r4-line) !important;
  }

  #goals .mobile-goal-head strong {
    color: var(--mobile-r4-text) !important;
  }

  #goals .mobile-goal-metrics {
    margin: 0 !important;
    padding: 14px 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border-bottom: 1px solid var(--mobile-r4-line) !important;
  }

  #goals .mobile-goal-metrics > div {
    min-height: 52px !important;
    padding: 4px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #goals .mobile-goal-metrics > div + div {
    border-left: 1px solid var(--mobile-r4-line) !important;
  }

  #goals .mobile-goal-scope-note {
    margin: 12px 0 4px !important;
    padding: 9px 10px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: #eef8f6 !important;
    color: #3e776f !important;
  }

  #goals .mobile-goal-list > * {
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mobile-r4-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* 【UI优化-不改动逻辑】三端窗口层级硬锁，覆盖历史移动端高权重规则。 */
@media (max-width: 760px) {
  html body[data-active-section] .app-shell > aside.sidebar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body[data-active-section="dashboard"] #dashboard > .mobile-home > .mobile-workbench-functions {
    order: 1 !important;
  }

  html body[data-active-section="dashboard"] #dashboard > .mobile-home > .mobile-priority-panel {
    order: 2 !important;
  }

  html body[data-active-section="dashboard"] #dashboard > .mobile-home > .mobile-data-center {
    order: 3 !important;
  }

  html body[data-active-section="dashboard"] #dashboard > .mobile-home > .mobile-home-trace {
    order: 4 !important;
  }

  html body[data-active-section="dashboard"] #dashboard > .mobile-home > .mobile-management-overview {
    order: 5 !important;
  }

  html body[data-active-section="dashboard"] #dashboard.section.active > :not(.mobile-home) {
    display: none !important;
  }

  html body[data-active-section="dashboard"] #dashboard > .mobile-home > .mobile-home-metrics,
  html body[data-active-section="dashboard"] #dashboard > .mobile-home > .mobile-home-focus,
  html body[data-active-section="dashboard"] #dashboard > .mobile-home > .mobile-home-actions,
  html body[data-active-section="dashboard"] #dashboard > .mobile-home > .mobile-home-card[aria-label="今日工作"],
  html body[data-active-section="dashboard"] #dashboard > .mobile-home > .mobile-home-card[aria-label="转化漏斗"] {
    display: none !important;
  }

  html body[data-active-section="customers"] #customers > .panel {
    padding: 14px 14px 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html body[data-active-section="customers"] #customers .panel-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  html body[data-active-section="customers"] #customers .panel-head .eyebrow,
  html body[data-active-section="customers"] #customers .nav-view-context {
    display: none !important;
  }

  html body[data-active-section="customers"] #customers .panel-head h2 {
    margin: 0 !important;
    font-size: 1.12rem !important;
  }

  html body[data-active-section="customers"] #customers .panel-head .muted {
    margin: 4px 0 0 !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    color: var(--mobile-muted) !important;
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html body[data-active-section="customers"] #customers .panel-head > button {
    width: auto !important;
    min-height: 36px !important;
    padding: 0 11px !important;
  }

  html body[data-active-section="customers"] #customers .customer-mobile-workbench {
    display: block !important;
    margin-bottom: 12px !important;
  }

  html body[data-active-section="customers"] #customers .customer-detail-grid {
    display: block !important;
    min-width: 0 !important;
  }

  html body[data-active-section="customers"] #customers .customer-sidebar,
  html body[data-active-section="customers"] #customers .handoff-steps {
    display: none !important;
  }

  html body[data-active-section="customers"] #customers .customer-main {
    min-width: 0 !important;
    width: 100% !important;
  }

html body[data-active-section="customers"] #customers .customer-bottom-actions,
  html body[data-active-section="customers"] #customers .customer-order-panel {
    display: none !important;
  }
}

/* 【UI优化-不改动逻辑】手机原生工作台 r4 高权重收口，覆盖历史移动端重复样式。 */
@media (max-width: 760px) {
  html body[data-active-section="dashboard"] #dashboard .mobile-workbench-functions {
    min-height: 0 !important;
    padding: 14px 16px 15px !important;
  }

  html body[data-active-section="dashboard"] #dashboard .mobile-workbench-functions .mobile-workbench-head {
    min-height: 28px !important;
    margin: 0 0 10px !important;
  }

  html body[data-active-section="dashboard"] #dashboard .mobile-function-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 11px 8px !important;
  }

  html body[data-active-section="dashboard"] #dashboard .mobile-function-grid a {
    min-height: 59px !important;
    gap: 6px !important;
  }

  html body[data-active-section="dashboard"] #dashboard .mobile-function-grid b,
  html body[data-active-section="dashboard"] #dashboard .mobile-function-grid a:nth-child(n) b {
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: #e9f3ff !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -999px !important;
    box-shadow: none !important;
  }

  html body[data-active-section="dashboard"] #dashboard .mobile-function-grid b::before {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: var(--mobile-r4-blue) !important;
    font-size: 1.06rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
  }

  html body[data-active-section="dashboard"] #dashboard .mobile-function-grid a:nth-child(2) b {
    background: #e9faf7 !important;
  }

  html body[data-active-section="dashboard"] #dashboard .mobile-function-grid a:nth-child(2) b::before {
    color: var(--mobile-r4-cyan) !important;
  }

  html body[data-active-section="dashboard"] #dashboard .mobile-function-grid a:nth-child(3) b {
    background: #eef7ff !important;
  }

  html body[data-active-section="dashboard"] #dashboard .mobile-function-grid a:nth-child(3) b::before {
    color: #2b91d9 !important;
  }

  html body[data-active-section="dashboard"] #dashboard .mobile-function-grid a:nth-child(4) b {
    background: #fff0f4 !important;
  }

  html body[data-active-section="dashboard"] #dashboard .mobile-function-grid a:nth-child(4) b::before {
    color: var(--mobile-r4-pink) !important;
  }

  html body[data-active-section="dashboard"] #dashboard .mobile-function-grid a:nth-child(5) b {
    background: #f0eeff !important;
  }

  html body[data-active-section="dashboard"] #dashboard .mobile-function-grid a:nth-child(5) b::before {
    color: var(--mobile-r4-purple) !important;
  }

  html body[data-active-section="dashboard"] #dashboard .mobile-function-grid a:nth-child(6) b {
    background: #fff6e7 !important;
  }

  html body[data-active-section="dashboard"] #dashboard .mobile-function-grid a:nth-child(6) b::before {
    color: var(--mobile-r4-amber) !important;
  }

  html body[data-active-section="dashboard"] #dashboard .mobile-function-grid span {
    color: #263247 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
  }

  html body #enrollment .mobile-enrollment-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border-top: 1px solid var(--mobile-r4-line) !important;
  }

  html body #enrollment .mobile-enrollment-review-grid > div {
    width: auto !important;
    min-width: 0 !important;
    min-height: 58px !important;
    height: auto !important;
    padding: 9px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mobile-r4-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #enrollment .mobile-enrollment-review-grid > div:nth-child(odd) {
    border-right: 1px solid var(--mobile-r4-line) !important;
  }

  html body #goals .mobile-goal-head {
    min-height: 66px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 6px 0 12px !important;
  }

  html body #goals .mobile-goal-head > div {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  html body #goals .mobile-goal-head > button {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 112px !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 7px !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }

  /* 仅在真实选中客户后显示详情；旧内核不支持 :has 时保持原回退行为。 */
  @supports selector(section:has(*)) {
    html body[data-active-section="customers"] #customers .customer-detail-grid {
      display: none !important;
    }

    html body[data-active-section="customers"] #customers:has(.customer-mobile-card.active) .customer-detail-grid {
      display: block !important;
    }
  }
}

/* 【UI优化-不改动逻辑】r4.4 最终优先级：锁定客户页首屏密度。 */
@media (max-width: 760px) {
  html body[data-active-section="customers"] #customers > .panel {
    padding: 13px 16px calc(76px + env(safe-area-inset-bottom)) !important;
  }

  html body[data-active-section="customers"] #customers .panel-head {
    min-height: 0 !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 12px !important;
    padding: 0 0 12px !important;
  }

  html body[data-active-section="customers"] #customers .panel-head h2 {
    font-size: 1rem !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
  }

  html body[data-active-section="customers"] #customers .panel-head .muted {
    max-width: 245px !important;
    color: #758196 !important;
    font-size: 0.67rem !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
  }

  html body[data-active-section="customers"] #customers .panel-head > button {
    min-height: 34px !important;
    height: 34px !important;
    border-radius: 7px !important;
    font-size: 0.71rem !important;
    font-weight: 700 !important;
  }
}

/* 【UI优化-不改动逻辑】成交开单手机页 r4.5：完整字段按业务阶段分区，不改表单与事件。 */
@media (max-width: 760px) {
  html body[data-active-section="enrollment"] #enrollment.section.active {
    padding: 0 0 calc(118px + env(safe-area-inset-bottom)) !important;
    background: #f5f8fb !important;
  }

  html body[data-active-section="enrollment"] #enrollment .content-grid {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm.panel {
    margin: 0 !important;
    padding: 13px 16px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm > .panel-head {
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 0 11px !important;
    align-items: center !important;
    border-bottom: 1px solid #e7ecf2 !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm > .panel-head h2 {
    margin: 0 !important;
    color: #19263a !important;
    font-size: 1rem !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
  }

  html body[data-active-section="enrollment"] #enrollment #formStatus {
    min-height: 26px !important;
    padding: 4px 9px !important;
    border: 1px solid #d8e6f3 !important;
    border-radius: 999px !important;
    background: #eef6ff !important;
    color: #2575c7 !important;
    font-size: 0.64rem !important;
    font-weight: 700 !important;
  }

  /* 顶部说明和速览信息不再重复占据两个大卡片。 */
  html body[data-active-section="enrollment"] #enrollment .deal-view-context {
    display: none !important;
  }

  html body[data-active-section="enrollment"] #enrollment .mobile-enrollment-review {
    margin: 12px 0 4px !important;
    padding: 11px 12px 0 !important;
    border: 1px solid #e1e8f0 !important;
    border-radius: 8px !important;
    background: #f7f9fc !important;
    box-shadow: none !important;
  }

  html body[data-active-section="enrollment"] #enrollment .mobile-enrollment-review-head {
    min-height: 32px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    align-items: center !important;
    border: 0 !important;
  }

  html body[data-active-section="enrollment"] #enrollment .mobile-enrollment-review-head span {
    color: #7b8798 !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
  }

  html body[data-active-section="enrollment"] #enrollment .mobile-enrollment-review-head strong {
    margin-top: 2px !important;
    color: #243148 !important;
    font-size: 0.78rem !important;
    font-weight: 720 !important;
    line-height: 1.3 !important;
  }

  html body[data-active-section="enrollment"] #enrollment .mobile-enrollment-review-head em {
    min-height: 24px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: #fff5df !important;
    color: #b3740a !important;
    font-size: 0.61rem !important;
    font-weight: 700 !important;
  }

  html body[data-active-section="enrollment"] #enrollment .mobile-enrollment-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border-top: 1px solid #e3e9f0 !important;
  }

  html body[data-active-section="enrollment"] #enrollment .mobile-enrollment-review-grid > div {
    min-width: 0 !important;
    min-height: 50px !important;
    padding: 8px 7px !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    border: 0 !important;
    border-bottom: 1px solid #e3e9f0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-active-section="enrollment"] #enrollment .mobile-enrollment-review-grid > div:nth-child(odd) {
    border-right: 1px solid #e3e9f0 !important;
  }

  html body[data-active-section="enrollment"] #enrollment .mobile-enrollment-review-grid span {
    color: #8792a3 !important;
    font-size: 0.59rem !important;
    font-weight: 600 !important;
  }

  html body[data-active-section="enrollment"] #enrollment .mobile-enrollment-review-grid strong {
    overflow: hidden !important;
    margin: 3px 0 0 !important;
    color: #27344a !important;
    font-size: 0.69rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm .form-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm .form-grid > label,
  html body[data-active-section="enrollment"] #enrollment #enrollForm .form-grid > .form-field {
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 9px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #edf1f5 !important;
    background: #ffffff !important;
    color: #3a4659 !important;
    box-shadow: none !important;
    font-size: 0.69rem !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm .form-grid > label:not(:has(small))::after {
    display: none !important;
    content: none !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm .form-grid input,
  html body[data-active-section="enrollment"] #enrollment #enrollForm .form-grid select,
  html body[data-active-section="enrollment"] #enrollment #enrollForm .form-grid textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 1px solid #dce4ed !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: #253248 !important;
    box-shadow: none !important;
    font-size: 0.72rem !important;
    font-weight: 560 !important;
    line-height: 40px !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm .form-grid input[readonly] {
    border-color: #e3e8ee !important;
    background: #f6f8fa !important;
    color: #59667a !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm .form-grid small,
  html body[data-active-section="enrollment"] #enrollment #enrollForm .form-grid .field-help {
    min-height: 0 !important;
    margin: 0 !important;
    color: #8994a5 !important;
    font-size: 0.59rem !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
  }

  /* 五个阶段只增加视觉标题，字段顺序、ID、校验和提交保持原样。 */
  html body[data-active-section="enrollment"] #enrollment #enrollForm label:has(#courseTemplateSelect),
  html body[data-active-section="enrollment"] #enrollment #enrollForm label:has(#departmentDisplay),
  html body[data-active-section="enrollment"] #enrollment #enrollForm label:has(#courseType),
  html body[data-active-section="enrollment"] #enrollment #enrollForm label:has(#agreementTrainingType),
  html body[data-active-section="enrollment"] #enrollment #enrollForm label:has(#grossAmount) {
    grid-template-rows: auto auto auto auto !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm label:has(#courseTemplateSelect)::before,
  html body[data-active-section="enrollment"] #enrollment #enrollForm label:has(#departmentDisplay)::before,
  html body[data-active-section="enrollment"] #enrollment #enrollForm label:has(#courseType)::before,
  html body[data-active-section="enrollment"] #enrollment #enrollForm label:has(#agreementTrainingType)::before,
  html body[data-active-section="enrollment"] #enrollment #enrollForm label:has(#grossAmount)::before {
    display: block !important;
    margin: 7px -16px 2px !important;
    padding: 12px 16px 7px !important;
    border-top: 7px solid #f5f8fb !important;
    color: #1f2d42 !important;
    font-size: 0.78rem !important;
    font-weight: 760 !important;
    line-height: 1.35 !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm label:has(#courseTemplateSelect)::before {
    content: "客户与课程" !important;
    margin-top: 0 !important;
    border-top: 0 !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm label:has(#departmentDisplay)::before {
    content: "业绩归属" !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm label:has(#courseType)::before {
    content: "课程与科目" !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm label:has(#agreementTrainingType)::before {
    content: "协议内容" !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm label:has(#grossAmount)::before {
    content: "费用与收款" !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm .subject-field {
    grid-template-rows: auto auto !important;
    padding-bottom: 10px !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm #subjectOptions.subject-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm #subjectOptions .check-chip {
    position: relative !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 7px 0 32px !important;
    border: 1px solid #dce4ed !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: #445168 !important;
    font-size: 0.64rem !important;
    font-weight: 620 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm #subjectOptions .check-chip::before,
  html body[data-active-section="enrollment"] #enrollment #enrollForm #subjectOptions .check-chip::after {
    display: none !important;
    content: none !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm #subjectOptions .check-chip:has(input:checked) {
    border-color: #9fded5 !important;
    background: #eefaf8 !important;
    color: #087d70 !important;
  }

  html body[data-active-section="enrollment"] #enrollment #enrollForm #subjectOptions .check-chip input[type="checkbox"] {
    position: absolute !important;
    top: 50% !important;
    left: 9px !important;
    width: 15px !important;
    height: 15px !important;
    min-height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #b9c5d2 !important;
    border-radius: 4px !important;
    appearance: auto !important;
    accent-color: #12ae9c !important;
    transform: translateY(-50%) !important;
  }

  html body[data-active-section="enrollment"] #enrollment .summary-panel {
    margin: 8px 0 0 !important;
    padding: 15px 16px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-active-section="enrollment"] #enrollment .summary-panel > h3 {
    margin: 0 0 10px !important;
    color: #1f2d42 !important;
    font-size: 0.85rem !important;
    font-weight: 760 !important;
  }

  html body[data-active-section="enrollment"] #enrollment .enrollment-progress-card {
    margin: 0 0 10px !important;
    padding: 10px 11px !important;
    border: 1px solid #dce9e6 !important;
    border-radius: 8px !important;
    background: #f2faf8 !important;
    box-shadow: none !important;
  }

  html body[data-active-section="enrollment"] #enrollment .summary-panel dl {
    margin: 0 !important;
  }

  html body[data-active-section="enrollment"] #enrollment .summary-panel dl > div {
    min-height: 46px !important;
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid #edf1f5 !important;
  }

  html body[data-active-section="enrollment"] #enrollment .summary-panel dt {
    color: #7b8798 !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
  }

  html body[data-active-section="enrollment"] #enrollment .summary-panel dd {
    min-width: 0 !important;
    margin: 0 !important;
    color: #2d3a50 !important;
    font-size: 0.68rem !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;
    text-align: right !important;
    overflow-wrap: anywhere !important;
  }

  /* 手机底部快捷栏已覆盖同一组命令，摘要内不再重复展示。 */
  html body[data-active-section="enrollment"] #enrollment .summary-actions {
    display: none !important;
  }

  html body[data-active-section="enrollment"] #enrollment .mobile-enrollment-actions {
    z-index: 116 !important;
    right: 0 !important;
    bottom: calc(58px + env(safe-area-inset-bottom)) !important;
    left: 0 !important;
    min-height: 52px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 7px 10px !important;
    border-top: 1px solid #dfe6ee !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 -5px 16px rgba(25, 45, 70, 0.06) !important;
  }

  html body[data-active-section="enrollment"] #enrollment .mobile-enrollment-actions button {
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 6px !important;
    border: 1px solid #dbe3ec !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: #4d5a70 !important;
    box-shadow: none !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
  }

  html body[data-active-section="enrollment"] #enrollment .mobile-enrollment-actions button:first-child {
    border-color: #1684ef !important;
    background: #1684ef !important;
    color: #ffffff !important;
  }
}

/* 【UI优化-不改动逻辑】任务目标手机页 r4.6：身份降噪、数据聚合、任务清单分层。 */
@media (max-width: 760px) {
  html body[data-active-section="goals"] #goals.section.active {
    padding: 0 0 calc(76px + env(safe-area-inset-bottom)) !important;
    background: #f5f8fb !important;
  }

  html body[data-active-section="goals"] #goals > .goals-command {
    margin: 0 !important;
    padding: 13px 16px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  /* 手机任务工作台自身已表达页面名称，移除重复的桌面页头。 */
  html body[data-active-section="goals"] #goals > .goals-command > .panel-head {
    display: none !important;
  }

  html body[data-active-section="goals"] #goals > .goals-command > .nav-view-context {
    display: none !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-workbench {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-active-section="goals"] #goals .goal-command-hero,
  html body[data-active-section="goals"] #goals .goal-simple-nav,
  html body[data-active-section="goals"] #goals .goal-screen-metrics,
  html body[data-active-section="goals"] #goals .goal-stage-progress-panel {
    display: none !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-head {
    min-height: 48px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 0 11px !important;
    border-bottom: 1px solid #e7ecf2 !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-head > div {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  html body[data-active-section="goals"] #goals #mobileGoalViewLabel {
    display: block !important;
    margin: 0 !important;
    color: #1d2a3e !important;
    font-size: 1rem !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
  }

  /* 账号与角色由企微鉴权决定，任务页不重复占据首屏。 */
  html body[data-active-section="goals"] #goals #mobileGoalScopeTitle {
    display: none !important;
  }

  html body[data-active-section="goals"] #goals #mobileGoalScopeDesc {
    display: block !important;
    margin: 4px 0 0 !important;
    color: #7a8799 !important;
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }

  html body[data-active-section="goals"] #goals #mobileGoalCreate {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 92px !important;
    min-height: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid #b9d8f6 !important;
    border-radius: 7px !important;
    background: #eef6ff !important;
    color: #1678d2 !important;
    box-shadow: none !important;
    font-size: 0.7rem !important;
    font-weight: 720 !important;
    white-space: nowrap !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 11px 0 0 !important;
    padding: 10px 0 !important;
    border: 1px solid #e4eaf1 !important;
    border-radius: 8px !important;
    background: #f7f9fc !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-metrics > div {
    min-width: 0 !important;
    min-height: 48px !important;
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 4px !important;
    padding: 2px 7px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-metrics > div + div {
    border-left: 1px solid #e1e7ee !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-metrics span {
    color: #7a8799 !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-metrics strong {
    color: #233149 !important;
    font-size: 1rem !important;
    font-weight: 760 !important;
    line-height: 1.2 !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-scope-note {
    margin: 9px 0 0 !important;
    padding: 7px 9px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: #eef8f6 !important;
    color: #47776f !important;
    font-size: 0.61rem !important;
    font-weight: 560 !important;
    line-height: 1.45 !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-list {
    display: grid !important;
    gap: 0 !important;
    margin: 14px -16px 0 !important;
    padding: 0 16px !important;
    border-top: 8px solid #f5f8fb !important;
    background: #ffffff !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-list::before {
    content: "任务清单" !important;
    display: block !important;
    padding: 12px 0 8px !important;
    border-bottom: 1px solid #e7ecf2 !important;
    color: #1f2d42 !important;
    font-size: 0.78rem !important;
    font-weight: 740 !important;
    line-height: 1.25 !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-card,
  html body[data-active-section="goals"] #goals .mobile-goal-empty {
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 13px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e8edf3 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-card-head {
    align-items: flex-start !important;
    gap: 10px !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-card-head strong {
    color: #223149 !important;
    font-size: 0.75rem !important;
    font-weight: 740 !important;
    line-height: 1.35 !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-card-head span {
    margin-top: 3px !important;
    color: #75839a !important;
    font-size: 0.61rem !important;
    font-weight: 560 !important;
    line-height: 1.35 !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-card-head em {
    padding: 3px 7px !important;
    border-radius: 999px !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-progress {
    height: 5px !important;
    border-radius: 999px !important;
    background: #e8eef4 !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-progress b {
    background: linear-gradient(90deg, #1684ef, #20bca8) !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-card-meta {
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    color: #53667d !important;
    font-size: 0.64rem !important;
    font-weight: 680 !important;
    line-height: 1.3 !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-card p {
    margin: 0 !important;
    color: #3d4b61 !important;
    font-size: 0.66rem !important;
    font-weight: 560 !important;
    line-height: 1.45 !important;
  }

  html body[data-active-section="goals"] #goals .mobile-goal-card small {
    color: #8995a6 !important;
    font-size: 0.57rem !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
  }

  /* 沿用原 target-push 路由与表单事件，手机端进入后展示可操作的布置页。 */
  html body[data-active-section="goals"][data-nav-view="target-push"] #goals .mobile-goal-workbench {
    display: none !important;
  }

  html body[data-active-section="goals"][data-nav-view="target-push"] #goals .goals-dashboard {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body[data-active-section="goals"][data-nav-view="target-push"] #goals #goalsTargetPushPanel:not([hidden]) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-active-section="goals"] #goals #goalsTargetPushPanel > div:first-child {
    padding: 0 0 10px !important;
    border-bottom: 1px solid #e7ecf2 !important;
  }

  html body[data-active-section="goals"] #goals #goalsTargetPushPanel > div:first-child strong {
    color: #1f2d42 !important;
    font-size: 1rem !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
  }

  html body[data-active-section="goals"] #goals #goalsTargetPushPanel > div:first-child span {
    margin-top: 4px !important;
    color: #7a8799 !important;
    font-size: 0.64rem !important;
    font-weight: 520 !important;
    line-height: 1.4 !important;
  }

  html body[data-active-section="goals"] #goals #goalsTargetPushPanel .scope-pill {
    margin: 0 !important;
    padding: 8px 9px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: #eef8f6 !important;
    color: #47776f !important;
    font-size: 0.61rem !important;
    font-weight: 560 !important;
    line-height: 1.45 !important;
  }

  html body[data-active-section="goals"] #goals #goalsTargetPushPanel .goal-template-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html body[data-active-section="goals"] #goals #goalsTargetPushPanel .goal-template-strip button {
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 8px 9px !important;
    border: 1px solid #e0e7ef !important;
    border-radius: 7px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
  }

  html body[data-active-section="goals"] #goals #goalsTargetPushPanel .goal-template-strip strong {
    color: #26354b !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  html body[data-active-section="goals"] #goals #goalsTargetPushPanel .goal-template-strip span {
    margin-top: 3px !important;
    color: #7f8b9c !important;
    font-size: 0.58rem !important;
    font-weight: 520 !important;
    line-height: 1.3 !important;
  }

  html body[data-active-section="goals"] #goals #goalsTargetPushPanel label {
    display: grid !important;
    gap: 5px !important;
    margin: 0 !important;
    color: #556278 !important;
    font-size: 0.64rem !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
  }

  html body[data-active-section="goals"] #goals #goalsTargetPushPanel .goal-advanced-field {
    display: none !important;
  }

  html body[data-active-section="goals"] #goals #goalsTargetPushPanel input,
  html body[data-active-section="goals"] #goals #goalsTargetPushPanel select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 41px !important;
    height: 41px !important;
    padding: 0 10px !important;
    border: 1px solid #dbe4ed !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: #27364c !important;
    box-shadow: none !important;
    font-size: 0.7rem !important;
  }

  html body[data-active-section="goals"] #goals #goalsTargetPushPanel .goal-validation-note {
    gap: 3px !important;
    padding: 8px 9px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: #f4f7fb !important;
  }

  html body[data-active-section="goals"] #goals #goalsTargetPushPanel .goal-validation-note strong {
    color: #3a4a61 !important;
    font-size: 0.64rem !important;
    font-weight: 700 !important;
  }

  html body[data-active-section="goals"] #goals #goalsTargetPushPanel .goal-validation-note span {
    margin: 0 !important;
    color: #778499 !important;
    font-size: 0.59rem !important;
    font-weight: 520 !important;
    line-height: 1.4 !important;
  }

  html body[data-active-section="goals"] #goals #publishGoalTask {
    min-height: 42px !important;
    height: 42px !important;
    margin-top: 2px !important;
    border-radius: 7px !important;
    background: #1684ef !important;
    box-shadow: none !important;
    font-size: 0.72rem !important;
    font-weight: 720 !important;
  }
}