/* Desktop and iPad workspace. The existing phone layout remains below 768px. */
/* Layout display rules must never reveal controls hidden by auth or permissions. */
html body [hidden],
#wideWorkspace[hidden],
.wide-header-actions[hidden] { display: none !important; }

.wide-brand,
.wide-workspace-label,
.wide-nav-group,
.wide-sidebar-bottom,
.wide-header-actions,
.wide-search,
.wide-workspace,
.wide-customer-summary,
.wide-collab-summary,
.wide-profile-details,
.wide-follow-footer,
.wide-image-help,
.wide-follow-section-title { display: none; }

.wide-follow-body,
.wide-follow-main { display: contents; }

@media (max-width: 767px) {
  .wide-header-actions,
  .wide-search,
  #wideSearch,
  #wideWorkspace,
  #wideCustomerSummary,
  .wide-collab-summary,
  #wideFollowFooter,
  .wide-image-help,
  .wide-follow-section-title { display: none !important; }
  #wideProfileDetails { display: contents; }
  #wideProfileDetails > summary { display: none; }
}

@media (min-width: 768px) {
  body[data-auth="unlocked"] {
    --bg: #f0f4f1;
    --surface: #fff;
    --text: #273a34;
    --muted: #56665e;
    --line: #cbd6ce;
    --primary: #176b5d;
    --primary-soft: #e0eee5;
    --shadow: 0 3px 15px #24402905;
    --wide-sidebar: 90px;
    font-size: 16px;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }
  body[data-auth="unlocked"] .app {
    height: 100%;
    min-height: 0;
    grid-template-columns: var(--wide-sidebar) minmax(0, 1fr);
  }
  body[data-auth="unlocked"] .sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100vh;
    height: 100dvh;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #193d30;
    color: #d7e5d5;
    border: 0;
    padding: 24px 10px 16px;
    z-index: 12;
    scrollbar-width: thin;
    scrollbar-color: #49705b transparent;
  }
  body[data-auth="unlocked"] .sidebar .wide-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 57px;
    margin-bottom: 30px;
    font-size: 15px;
    font-weight: 600;
    color: #f0f5e9;
    letter-spacing: .2px;
    text-align: center;
  }
  body[data-auth="unlocked"] .wide-brand > :first-child:not(div),
  body[data-auth="unlocked"] .wide-brand .brand-mark,
  body[data-auth="unlocked"] .wide-brand .wide-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 34px;
    border-radius: 8px;
    background: #dfebd0;
    color: #2b5940;
    font-size: 22px;
    font-weight: 600;
    flex: none;
  }
  body[data-auth="unlocked"] .wide-brand strong { display: block; font-size: 14px; font-weight: 550; white-space: nowrap; }
  body[data-auth="unlocked"] .wide-brand small { display: none; color: #b3cabd; font-size: 10px; letter-spacing: 2px; margin-top: 5px; font-weight: 400; }
  body[data-auth="unlocked"] .wide-brand { border: 0; background: transparent; }
  body[data-auth="unlocked"] .wide-brand > span:last-child { font-size: 14px; }
  body[data-auth="unlocked"] .wide-workspace-label { display: none; }
  body[data-auth="unlocked"] .wide-sidebar-bottom { display: block; margin-top: auto; }
  body[data-auth="unlocked"] .wide-sidebar-note { display: none; }
  body[data-auth="unlocked"] .wide-nav-group { display: block; margin-bottom: 23px; }
  body[data-auth="unlocked"] .wide-nav-group > p,
  body[data-auth="unlocked"] .wide-nav-group > h2,
  body[data-auth="unlocked"] .wide-nav-group > h3,
  body[data-auth="unlocked"] .wide-nav-group > span,
  body[data-auth="unlocked"] .wide-nav-group-title {
    display: block;
    padding: 0 4px;
    margin: 0 0 9px;
    color: #b3cabd;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 1px;
  }
  body[data-auth="unlocked"] .wide-nav-item {
    width: 100%;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 5px;
    padding: 9px 5px;
    border-radius: 8px;
    color: #d3e3dc;
    background: transparent;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    line-height: 1.4;
    transition: background .15s, color .15s;
  }
  body[data-auth="unlocked"] .wide-nav-item:hover { background: #ffffff09; color: #e2eddb; }
  body[data-auth="unlocked"] .wide-nav-item.active,
  body[data-auth="unlocked"] .wide-nav-item[aria-current="page"],
  body[data-auth="unlocked"] .wide-nav-item[aria-pressed="true"] { color: #f2f7e9; background: #2b624c; border-color: #66806118; }
  body[data-auth="unlocked"] .wide-nav-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; }
  body[data-auth="unlocked"] .wide-nav-icon svg { display: block; width: 18px; height: 18px; }
  body[data-auth="unlocked"] .wide-profile {
    margin-top: auto;
    width: 100%;
    padding: 14px 4px 0;
    border-radius: 0;
    border-top: 1px solid #78957522;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    background: transparent;
    color: #e3ecd9;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
  }
  body[data-auth="unlocked"] .wide-profile > span:first-child,
  body[data-auth="unlocked"] .wide-profile .avatar,
  body[data-auth="unlocked"] .wide-profile .wide-profile-avatar { display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; flex: none; background: #48664c; color: #dfebce; border: 1px solid #748c6544; border-radius: 50%; font-size: 14px; }
  body[data-auth="unlocked"] .wide-profile strong { display: block; font-size: 14px; font-weight: 500; }
  body[data-auth="unlocked"] .wide-profile small { display: block; color: #b3cabd; font-size: 14px; margin-top: 2px; }
  body[data-auth="unlocked"] .wide-profile > svg { display: none; }
  body[data-auth="unlocked"] .bottom-nav { display: none; }
  body[data-auth="unlocked"] .main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 19px 22px 22px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  body[data-auth="unlocked"][data-view="todo"] .main,
  body[data-auth="unlocked"][data-view="customer"] .main { overflow: hidden; scrollbar-gutter: auto; }
  body[data-auth="unlocked"] .topbar {
    position: relative;
    top: auto;
    flex: none;
    min-width: 0;
    margin: 0 0 17px;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    z-index: 25;
  }
  body[data-auth="unlocked"] .topline { min-height: 48px; margin: 0; gap: 15px; }
  body[data-auth="unlocked"] .topline > div:first-child { min-width: 0; flex: 1; }
  body[data-auth="unlocked"] #moduleTitle { font-size: 26px; line-height: 1.4; font-weight: 600; letter-spacing: -.5px; }
  body[data-auth="unlocked"] #moduleSub { font-size: 14px; line-height: 1.6; color: #56665e; margin-top: 3px; }
  body[data-auth="unlocked"] .topbar > .module-tabs,
  body[data-auth="unlocked"] .topbar > .search-row,
  body[data-auth="unlocked"] .topbar > .customer-filter-line { display: none; }
  body[data-auth="unlocked"] .wide-header-actions { display: flex; align-items: center; justify-content: flex-end; flex: none; gap: 9px; }
  body[data-auth="unlocked"] #wideDate { font-size: 14px; color: #56665e; white-space: nowrap; margin-right: 5px; }
  body[data-auth="unlocked"] .wide-header-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 12px; border: 1px solid #dce5d6; border-radius: 7px; color: #2e5744; background: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; }
  body[data-auth="unlocked"] .wide-header-actions button:hover { background: #edf4e8; }
  body[data-auth="unlocked"] .wide-header-actions button svg { width: 14px; height: 14px; flex: none; }
  body[data-auth="unlocked"] #wideAddCustomer { color: #fff; background: #176b5d; border-color: #176b5d; }
  body[data-auth="unlocked"] #wideAddCustomer:hover { background: #105b4d; }
  body[data-auth="unlocked"] .user-switch { font-size: 14px; font-weight: 500; padding: 7px 9px; background: #eaf1e4; color: #2e5744; border: 1px solid #dfe9d6; }
  body[data-auth="unlocked"] .follow-account-menu { z-index: 70; }
  body[data-auth="unlocked"] .wide-search { display: flex; align-items: center; gap: 10px; min-height: 48px; width: 340px; min-width: 0; padding: 11px 14px; border: 1px solid #9eb5a7; border-radius: 7px; background: #fff; color: #496b59; }
  body[data-auth="unlocked"] .wide-search svg { width: 20px; height: 20px; flex: none; }
  body[data-auth="unlocked"] #wideSearch { width: 100%; min-width: 0; border: 0; padding: 0; margin: 0; background: transparent; outline: none; font-size: 16px; line-height: 24px; color: #273a34; }
  body[data-auth="unlocked"] .wide-search:focus-within { border-color: #176b5d; box-shadow: 0 0 0 3px #176b5d1f; }
  body[data-auth="unlocked"] #wideSearch::placeholder { color: #5c6b62; }
  body[data-auth="unlocked"] .wide-workspace { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
  body[data-auth="unlocked"] .wide-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: none; min-height: 61px; padding: 12px 0; border: 1px solid #cbd6ce; border-radius: 9px; background: #fff; }
  body[data-auth="unlocked"] .wide-metric { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-width: 0; gap: 8px; padding: 0 15px; border-right: 1px solid #d0dbd4; }
  body[data-auth="unlocked"] .wide-metric:last-child { border-right: 0; }
  body[data-auth="unlocked"] .wide-metric > span { min-width: 0; color: #56665e; font-size: 14px; white-space: nowrap; }
  body[data-auth="unlocked"] .wide-metric strong { color: #24533d; font-size: 24px; line-height: 1; letter-spacing: -.6px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  body[data-auth="unlocked"] .wide-metric small { font-size: 14px; color: #56665e; white-space: nowrap; }
  body[data-auth="unlocked"] .wide-columns { display: grid; flex: 1; min-height: 0; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body[data-auth="unlocked"] .wide-list-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: #fff; border: 1px solid #cbd6ce; border-radius: 10px; }
  body[data-auth="unlocked"] .wide-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 49px; padding: 9px 15px; border-bottom: 1px solid #d0dbd4; flex: none; }
  body[data-auth="unlocked"] #wideOwnerFilter { border: 0; background: transparent; padding: 4px 0; color: #466250; font-size: 14px; text-align: left; }
  body[data-auth="unlocked"] #wideListCount { color: #56665e; font-size: 14px; white-space: nowrap; }
  body[data-auth="unlocked"] .wide-scope-text { color: #56665e; font-size: 14px; white-space: nowrap; }
  body[data-auth="unlocked"] #widePeriodSlot { min-width: 0; }
  body[data-auth="unlocked"] #widePeriodSlot .fx-time-picker { display: block; margin: 0; }
  body[data-auth="unlocked"] #widePeriodSlot summary { min-height: 30px; padding: 5px 9px; border-color: #e1e9d9; font-size: 14px; color: #466250; background: #fafcf8; }
  body[data-auth="unlocked"] #widePeriodSlot .fx-time-menu { width: min(340px, calc(100vw - 135px)); z-index: 35; }
  body[data-auth="unlocked"] #widePeriodSlot .module-tab { display: flex; min-height: 30px; height: auto; }
  body[data-auth="unlocked"] .wide-list-host { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #cdd9c4 transparent; }
  body[data-auth="unlocked"] #wideListHost .desktop-layout,
  body[data-auth="unlocked"] #wideListHost .todo-view { display: block; }
  body[data-auth="unlocked"] #wideListHost .pc-panel,
  body[data-auth="unlocked"] #wideListHost .customer-extra-section,
  body[data-auth="unlocked"] #wideListHost .today-person-head,
  body[data-auth="unlocked"] #wideListHost .region-title,
  body[data-auth="unlocked"] #wideListHost .today-follow-tags,
  body[data-auth="unlocked"] #wideListHost .filter-board,
  body[data-auth="unlocked"] #wideListHost .filter-mask { display: none; }
  body[data-auth="unlocked"] #wideListHost .customer-list,
  body[data-auth="unlocked"] #wideListHost .region-group,
  body[data-auth="unlocked"] #wideListHost .today-person-group,
  body[data-auth="unlocked"] #wideListHost .today-follow-item,
  body[data-auth="unlocked"] #wideListHost .today-follow-module { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
  body[data-auth="unlocked"] #wideListHost .pinned-list:empty { display: none; }
  body[data-auth="unlocked"] #wideListHost .section-head { margin: 0; padding: 13px 16px 12px; gap: 8px; border-bottom: 1px solid #d0dbd4; background: #fff; }
  body[data-auth="unlocked"] #wideListHost .section-head h2 { font-size: 14px; font-weight: 600; }
  body[data-auth="unlocked"] #wideListHost .section-head span { color: #56665e; font-size: 14px; font-weight: 400; }
  body[data-auth="unlocked"] #wideListHost .today-follow-tabs { display: flex; align-items: center; gap: 18px; padding: 0 16px; border-bottom: 1px solid #d0dbd4; background: #fff; }
  body[data-auth="unlocked"] #wideListHost .today-follow-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-bottom: 2px solid transparent; min-height: 43px; border-radius: 0; font-size: 14px; font-weight: 500; color: #56665e; background: transparent; }
  body[data-auth="unlocked"] #wideListHost .today-follow-tab.active { border-bottom-color: #497b42; color: #416d3a; background: transparent; }
  body[data-auth="unlocked"] #wideListHost .today-follow-tab span { border-radius: 4px; padding: 3px 5px; background: #f1f5ec; color: #466250; font-size: 14px; }
  body[data-auth="unlocked"] #wideListHost .today-follow-tab.active span { background: #e8f0df; color: #2d6348; }
  body[data-auth="unlocked"] .customer-card.wide-customer-row { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) 96px; grid-template-rows: auto; align-items: start; gap: 10px; width: 100%; min-height: 0; aspect-ratio: auto; padding: 16px 14px; margin: 0; overflow: visible; border: 0; border-bottom: 1px solid #d0dbd4; border-radius: 0; background: #fff; color: #233d2e; box-shadow: none; text-align: left; transition: background .15s; }
  body[data-auth="unlocked"] .customer-card.wide-customer-row::before,
  body[data-auth="unlocked"] .customer-card.wide-customer-row::after { display: none; content: none; }
  body[data-auth="unlocked"] .customer-card.wide-customer-row:hover { background: #f6f9f2; }
  body[data-auth="unlocked"] .customer-card.wide-customer-row.selected,
  body[data-auth="unlocked"] .customer-card.wide-customer-row.active,
  body[data-auth="unlocked"] .customer-card.wide-customer-row[aria-selected="true"] { background: #e0eee5; box-shadow: inset 3px 0 0 #176b5d; }
  body[data-auth="unlocked"] .wide-company-avatar { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 36px; border-radius: 7px; background: #ecf1e6; border: 1px solid #e3ead9; color: #466b4d; font-size: 14px; font-weight: 600; }
  body[data-auth="unlocked"] .wide-company-avatar svg { width: 16px; height: 16px; }
  body[data-auth="unlocked"] .wide-row-main { min-width: 0; }
  body[data-auth="unlocked"] .wide-row-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; margin-bottom: 6px; }
  body[data-auth="unlocked"] .wide-row-title strong { min-width: 0; max-width: 100%; display: block; font-size: 18px; font-weight: 550; line-height: 1.6; overflow-wrap: anywhere; }
  body[data-auth="unlocked"] .wide-row-title .wide-stage,
  body[data-auth="unlocked"] .wide-row-title .badge,
  body[data-auth="unlocked"] .wide-row-title > span { display: inline-flex; align-items: center; flex: none; padding: 2px 5px; border-radius: 4px; background: #edf2e4; color: #4e653a; font-size: 14px; line-height: 1.4; }
  body[data-auth="unlocked"] .wide-row-meta,
  body[data-auth="unlocked"] .wide-row-next { display: block; color: #56665e; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
  body[data-auth="unlocked"] .wide-row-next { color: #496352; margin-top: 4px; }
  body[data-auth="unlocked"] .wide-row-next svg { width: 11px; height: 11px; vertical-align: -1px; margin-right: 4px; }
  body[data-auth="unlocked"] .wide-row-status { display: flex; align-items: flex-end; flex-direction: column; gap: 13px; padding-top: 3px; min-width: 0; color: #56665e; font-size: 14px; text-align: right; }
  body[data-auth="unlocked"] .wide-row-status .wide-due,
  body[data-auth="unlocked"] .wide-row-status .due-badge { font-size: 14px; padding: 3px 5px; font-weight: 400; border-radius: 4px; }
  body[data-auth="unlocked"] .wide-due { color: #4b674b; background: #f0f4e9; white-space: normal; overflow-wrap: anywhere; max-width: 100%; line-height: 1.4; font-weight: 400; }
  body[data-auth="unlocked"] .wide-due.today { background: #fbf2df; color: #8a510f; }
  body[data-auth="unlocked"] .wide-due.overdue { background: #f9ebe4; color: #9b432f; }
  body[data-auth="unlocked"] .wide-due.overdue .wide-due-line { display: block; word-break: keep-all; overflow-wrap: normal; }
  body[data-auth="unlocked"] .wide-due.warning { background: #f7f3df; color: #70621e; }
  body[data-auth="unlocked"] .wide-row-status .owner-chip { position: static; transform: none; min-height: 0; height: auto; width: auto; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 14px; color: #56665e; }
  body[data-auth="unlocked"] #wideListHost .fx-load-more { padding: 13px 10px; gap: 8px; color: #56665e; font-size: 14px; }
  body[data-auth="unlocked"] #wideListHost .fx-load-more button { font-size: 14px; padding: 7px 12px; border-color: #e0e8d7; color: #466b4d; }
  body[data-auth="unlocked"] #wideListHost .empty-state { border: 0; padding: 45px 20px; font-size: 14px; background: transparent; color: #56665e; }
  body[data-auth="unlocked"] .wide-detail-host { display: none; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #cbd6ce; border-radius: 10px; background: #fff; }
  body[data-auth="unlocked"] .wide-empty-detail { display: flex; height: 100%; min-height: 250px; flex-direction: column; align-items: center; justify-content: center; gap: 13px; padding: 35px; color: #56665e; text-align: center; font-size: 14px; line-height: 1.8; }
  body[data-auth="unlocked"] .wide-empty-detail svg { width: 40px; height: 40px; color: #bfd0ac; }
  body[data-auth="unlocked"] .wide-empty-detail h2,
  body[data-auth="unlocked"] .wide-empty-detail strong { color: #466b4d; font-size: 17px; font-weight: 500; }
  body[data-auth="unlocked"] #detailPanel .detail-head { flex: none; align-items: flex-start; gap: 12px; padding: 20px 21px 15px; border-bottom: 0; margin: 0; }
  body[data-auth="unlocked"] #detailPanel .detail-head > div:first-child { min-width: 0; }
  body[data-auth="unlocked"] #detailPanel .detail-title-row { flex-wrap: wrap; gap: 8px; }
  body[data-auth="unlocked"] #detailCompany { width: auto; min-width: 0; max-width: 100%; font-size: 22px; font-weight: 550; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; color: #1b372b; }
  body[data-auth="unlocked"] #detailPanel .detail-address { font-size: 14px; color: #56665e; margin-top: 6px; }
  body[data-auth="unlocked"] #detailPanel .detail-tags { flex-wrap: wrap; gap: 5px; }
  body[data-auth="unlocked"] #detailPanel .detail-tags .stored-balance { font-size: 14px; }
  body[data-auth="unlocked"] #detailPanel .detail-actions { gap: 5px; padding-top: 3px; }
  body[data-auth="unlocked"] #detailPanel .close-btn,
  body[data-auth="unlocked"] #detailPanel .edit-customer-btn,
  body[data-auth="unlocked"] #detailPanel .pin-customer-btn { width: 28px; height: 28px; border-radius: 6px; border-color: #e5ebdc; background: #f6f9f1; color: #466b4d; }
  body[data-auth="unlocked"] #detailPanel .edit-customer-btn svg,
  body[data-auth="unlocked"] #detailPanel .pin-customer-btn svg,
  body[data-auth="unlocked"] #detailPanel .close-btn svg { width: 15px; height: 15px; }
  body[data-auth="unlocked"] .wide-customer-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px 15px; padding: 0 22px 17px; flex: none; }
  body[data-auth="unlocked"] .wide-customer-summary > div { min-width: 0; display: grid; gap: 6px; }
  body[data-auth="unlocked"] .wide-customer-summary label,
  body[data-auth="unlocked"] .wide-customer-summary dt,
  body[data-auth="unlocked"] .wide-customer-summary small,
  body[data-auth="unlocked"] .wide-customer-summary > div > span:first-child { color: #56665e; font-size: 14px; font-weight: 400; }
  body[data-auth="unlocked"] .wide-customer-summary strong,
  body[data-auth="unlocked"] .wide-customer-summary dd,
  body[data-auth="unlocked"] .wide-customer-summary b,
  body[data-auth="unlocked"] .wide-customer-summary > div > strong { color: #2c4938; font-size: 14px; line-height: 1.6; font-weight: 500; margin: 0; overflow-wrap: anywhere; }
  body[data-auth="unlocked"] .wide-collab-summary { display: flex; align-items: baseline; gap: 10px; flex: none; margin: 0 22px 11px; padding: 9px 11px; background: #f1f6eb; color: #496352; border: 1px solid #e7efdb; border-radius: 6px; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
  body[data-auth="unlocked"] .wide-collab-summary b,
  body[data-auth="unlocked"] .wide-collab-summary strong { font-size: 14px; color: #496352; flex: 0 1 auto; min-width: 0; font-weight: 500; }
  body[data-auth="unlocked"] .wide-customer-summary .wide-collab-summary { grid-column: 1 / -1; margin: 0; }
  body[data-auth="unlocked"] button.wide-collab-summary { width:100%; font-family:inherit; text-align:left; cursor:pointer; }
  body[data-auth="unlocked"] button.wide-collab-summary:hover { background:#e8f1df; border-color:#c9dabb; }
  body[data-auth="unlocked"] button.wide-collab-summary:focus-visible { outline:2px solid #176b5d; outline-offset:2px; }
  body[data-auth="unlocked"] button.wide-collab-summary small { margin-left:auto; flex:none; font-size:12px; white-space:nowrap; }
  body[data-auth="unlocked"] .detail-collaboration-summary { display:none; }
  body[data-auth="unlocked"] #wideProfileDetails { display: block; flex: none; border-top: 1px solid #d0dbd4; border-bottom: 1px solid #d0dbd4; padding: 0 22px; max-height: 38%; overflow: auto; }
  body[data-auth="unlocked"] #wideProfileDetails > summary { padding: 10px 0; color: #56665e; font-size: 14px; cursor: pointer; list-style-position: inside; }
  body[data-auth="unlocked"] #wideProfileDetails[open] { padding-bottom: 12px; }
  body[data-auth="unlocked"] #wideProfileDetails .detail-section { margin-top: 5px; }
  body[data-auth="unlocked"] #wideProfileDetails .detail-section-title h3 { font-size: 14px; font-weight: 500; }
  body[data-auth="unlocked"] #wideProfileDetails .section-body { font-size: 14px; }
  body[data-auth="unlocked"] #wideProfileDetails .cooperation-form textarea { min-height: 80px; font-size: 14px; }
  body[data-auth="unlocked"] #detailPanel .wide-record-section { display: flex; flex: 1; flex-direction: column; min-height: 0; min-width: 0; margin: 0; overflow: hidden; }
  body[data-auth="unlocked"] #detailPanel #recordTabs { display: flex; flex: none; align-items: center; gap: 25px; padding: 0 22px; margin: 0; border-bottom: 1px solid #d0dbd4; }
  body[data-auth="unlocked"] #detailPanel .record-tab { min-width: 0; min-height: 46px; padding: 12px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #56665e; font-size: 14px; font-weight: 500; }
  body[data-auth="unlocked"] #detailPanel .record-tab.active,
  body[data-auth="unlocked"] #detailPanel .record-create-follow { color: #176b5d; border-bottom-color: #176b5d; background: transparent; }
  body[data-auth="unlocked"] #detailPanel:has(#panelConsume.active) .record-create-follow,
  body[data-auth="unlocked"] #detailPanel:has(#panelStored.active) .record-create-follow { border-bottom-color: transparent; color: #56665e; }
  body[data-auth="unlocked"] #detailPanel .record-panel { min-height: 0; flex: 1; overflow: auto; padding: 15px 23px 23px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #cedcc1 transparent; }
  body[data-auth="unlocked"] #detailPanel .record-panel:not(.active) { display: none; }
  body[data-auth="unlocked"] #detailPanel .record-panel.active { display: block; }
  body[data-auth="unlocked"] #detailPanel .follow-plan-card { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 11px; margin: 0 0 14px; border-color: #d0dbd4; border-radius: 6px; background: #f8faf5; font-size: 14px; }
  body[data-auth="unlocked"] #detailPanel .follow-plan-heading { gap: 10px; font-size: 14px; }
  body[data-auth="unlocked"] #detailPanel .follow-plan-heading strong { font-weight: 500; }
  body[data-auth="unlocked"] #detailPanel .follow-plan-heading > span { font-size: 14px; color: #56665e; }
  body[data-auth="unlocked"] #detailPanel .follow-plan-schedule { font-size: 14px; gap: 5px; color: #466250; }
  body[data-auth="unlocked"] #detailPanel .follow-plan-schedule .due-badge { font-size: 14px; padding: 3px 5px; }
  body[data-auth="unlocked"] #detailPanel .follow-plan-content,
  body[data-auth="unlocked"] #detailPanel .follow-plan-people { display: none; }
  body[data-auth="unlocked"] #detailPanel .year-group { margin-top: 0; }
  body[data-auth="unlocked"] #detailPanel .year-label { color: #56665e; font-size: 14px; font-weight: 400; margin: 9px 0 8px; }
  body[data-auth="unlocked"] #detailPanel .detail-follow-row { grid-template-columns: 29px minmax(0, 1fr) auto; gap: 11px; padding: 17px 0; border-color: #d0dbd4; }
  body[data-auth="unlocked"] #detailPanel .record-icon { width: 28px; height: 28px; }
  body[data-auth="unlocked"] #detailPanel .record-icon svg { width: 15px; height: 15px; }
  body[data-auth="unlocked"] #detailPanel .follow-detail-content { gap: 8px; }
  body[data-auth="unlocked"] #detailPanel .follow-detail-meta span { font-size: 14px; color: #56665e; font-weight: 400; }
  body[data-auth="unlocked"] #detailPanel .follow-detail-content > b { font-size: 16px; font-weight: 400; line-height: 1.8; color: #273a34; white-space: pre-wrap; overflow-wrap: anywhere; }
  body[data-auth="unlocked"] #detailPanel .follow-record-actions { padding-top: 0; gap: 4px; }
  body[data-auth="unlocked"] #detailPanel .follow-record-btn { width: 32px; height: 32px; color: #496b59; background: #f5f8ef; }
  body[data-auth="unlocked"] #detailPanel .follow-record-btn.danger { color: #99513d; background: #faf6ef; }
  body[data-auth="unlocked"] #detailPanel .follow-delete-btn { width: auto; padding: 0 10px; }
  body[data-auth="unlocked"] #detailPanel .follow-record-btn svg { width: 13px; height: 13px; }
  body[data-auth="unlocked"] #detailPanel .follow-image-thumbnails { grid-template-columns: repeat(3, minmax(0, 76px)); gap: 7px; margin-top: 3px; }
  body[data-auth="unlocked"] #wideFollowFooter { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 22px; border-top: 1px solid #d0dbd4; background: #fff; }
  body[data-auth="unlocked"] #wideFollowFooter > span { color: #56665e; font-size: 14px; margin-right: auto; }
  body[data-auth="unlocked"] #wideFollowFooter button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-width: 145px; min-height: 39px; border-radius: 7px; border: 1px solid #176b5d; padding: 10px 17px; font-size: 16px; font-weight: 500; color: #fff; background: #176b5d; }
  body[data-auth="unlocked"] #wideFollowFooter button:hover { background: #105b4d; }
  body[data-auth="unlocked"] #wideFollowFooter button svg { width: 14px; height: 14px; }
  body[data-auth="unlocked"] #editorMask { z-index: 65; background: #14372466; backdrop-filter: blur(3px); }
  body[data-auth="unlocked"] #followEditor { position: fixed; left: 50%; top: 50%; right: auto; bottom: auto; width: min(920px, calc(100vw - 46px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); transform: translate(-50%, -50%); padding: 0; border: 1px solid #dfe8d7; border-radius: 12px; background: #fff; box-shadow: 0 25px 100px #183c2a33; overflow: hidden; z-index: 70; }
  body[data-auth="unlocked"] #followEditor.open { display: flex; flex-direction: column; }
  body[data-auth="unlocked"] #followEditor > .editor-head { flex: none; align-items: flex-start; margin: 0; padding: 19px 25px 17px; border-bottom: 1px solid #d0dbd4; }
  body[data-auth="unlocked"] #followEditor .editor-customer { color: #56665e; font-size: 14px; font-weight: 400; }
  body[data-auth="unlocked"] #followEditor .editor-title-row { margin-top: 7px; align-items: baseline; gap: 14px; }
  body[data-auth="unlocked"] #followEditor .editor-title-row h2 { font-size: 23px; color: #1b372b; font-weight: 550; }
  body[data-auth="unlocked"] #followEditor .editor-owner { font-size: 14px; color: #56665e; font-weight: 400; }
  body[data-auth="unlocked"] #followEditor .close-btn { width: 30px; height: 30px; background: #f3f7ed; color: #496b59; }
  body[data-auth="unlocked"] #followEditor .wide-follow-body { display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); align-items: start; gap: 25px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 25px; scrollbar-width: thin; }
  body[data-auth="unlocked"] #followEditor .wide-follow-main { display: block; min-width: 0; }
  body[data-auth="unlocked"] #followEditor .wide-follow-body:has(> #nextFollowBox.hidden),
  body[data-auth="unlocked"] #followEditor .wide-follow-body:has(> #nextFollowBox[hidden]) { grid-template-columns: minmax(0, 1fr); }
  body[data-auth="unlocked"] #followEditor .wide-follow-section-title { display: block; color: #2e5744; font-size: 14px; font-weight: 500; line-height: 1.5; margin: 0 0 15px; }
  body[data-auth="unlocked"] #followEditor .wide-image-help { display: block; color: #56665e; font-size: 14px; line-height: 1.8; margin: 10px 0 6px; }
  body[data-auth="unlocked"] #followEditor #followTypeOptions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-bottom: 18px; }
  body[data-auth="unlocked"] #followEditor .type-option { min-height: 34px; height: auto; font-size: 14px; font-weight: 500; border-color: #e3ebdb; border-radius: 6px; color: #496352; }
  body[data-auth="unlocked"] #followEditor .type-option.active { color: #176b5d; background: #f0f6e9; border-color: #bad1a7; }
  body[data-auth="unlocked"] #followEditor .follow-content-field { margin-top: 0; }
  body[data-auth="unlocked"] #followEditor .follow-content-labels { display: none; }
  body[data-auth="unlocked"] #followEditor .follow-record-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  body[data-auth="unlocked"] #followEditor .follow-record-row::before { content: "跟进日期与图片"; grid-row: 1; color: #56665e; font-size: 14px; }
  body[data-auth="unlocked"] #followEditor .follow-record-row::after { content: "跟进内容"; grid-row: 3; color: #56665e; font-size: 14px; margin-top: 7px; }
  body[data-auth="unlocked"] #followEditor .follow-date-images { grid-row: 2; display: grid; grid-template-columns: minmax(110px, .9fr) minmax(0, 1.1fr); gap: 9px; }
  body[data-auth="unlocked"] #followEditor #followTimeInput { min-height: 44px; height: 44px; font-size: 16px; border-color: #dfe8d4; border-radius: 6px; color: #2c4938; font-weight: 400; }
  body[data-auth="unlocked"] #followEditor .follow-image-add { flex-direction: row; min-height: 44px; gap: 6px; padding: 7px 9px; border: 1px dashed #b7cda5; border-radius: 6px; background: #f4f9ef; font-size: 18px; color: #176b5d; }
  body[data-auth="unlocked"] #followEditor .follow-image-add span { font-size: 14px; }
  body[data-auth="unlocked"] #followEditor .follow-image-add small { margin-left: auto; font-size: 14px; color: #56665e; white-space: nowrap; }
  body[data-auth="unlocked"] #followEditor #followText { grid-row: 4; width: 100%; min-height: 185px; border: 1px solid #dfe8d4; border-radius: 7px; padding: 12px; line-height: 1.8; font-size: 16px; color: #273a34; background: #fff; }
  body[data-auth="unlocked"] #followEditor .follow-image-drafts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 13px; }
  body[data-auth="unlocked"] #followEditor .follow-image-draft { border-color: #e3ebd9; background: #f7faf3; border-radius: 7px; }
  body[data-auth="unlocked"] #followEditor .follow-image-draft-preview { aspect-ratio: 4 / 3; }
  body[data-auth="unlocked"] #followEditor .follow-image-draft-status { font-size: 14px; color: #56665e; padding: 5px 7px; }
  body[data-auth="unlocked"] #followEditor .follow-image-message { font-size: 14px; line-height: 1.8; }
  body[data-auth="unlocked"] #followEditor #nextFollowBox { align-self: start; min-width: 0; margin: 0; padding: 18px; border: 1px solid #e3ebd7; background: #f5f8ef; border-radius: 9px; }
  body[data-auth="unlocked"] #followEditor .next-follow-title { color: #2e5744; font-size: 14px; font-weight: 500; margin-bottom: 17px; }
  body[data-auth="unlocked"] #followEditor .next-follow-grid { gap: 7px; }
  body[data-auth="unlocked"] #followEditor #nextFollowBox .editor-field { gap: 7px; height: auto; }
  body[data-auth="unlocked"] #followEditor #nextFollowBox label { position: static; width: auto; height: auto; overflow: visible; clip: auto; color: #56665e; font-size: 14px; font-weight: 400; }
  body[data-auth="unlocked"] #followEditor #nextFollowBox input,
  body[data-auth="unlocked"] #followEditor #nextFollowBox select,
  body[data-auth="unlocked"] #followEditor #nextFollowBox textarea { min-width: 0; max-width: 100%; border-color: #dde7d0; border-radius: 6px; background-color: #fff; color: #2c4938; font-size: 14px; font-weight: 400; }
  body[data-auth="unlocked"] #followEditor #nextFollowBox .next-follow-grid select { height: 44px; min-height: 44px; padding: 0 20px 0 7px; background-position: calc(100% - 11px) 18px, calc(100% - 6px) 18px; }
  body[data-auth="unlocked"] #followEditor #followCollaborationContent { min-height: 79px; line-height: 1.8; padding: 10px; }
  body[data-auth="unlocked"] #followEditor .follow-collaboration-fields { margin-top: 15px; }
  body[data-auth="unlocked"] #followEditor .follow-collaborator-picker { border-color: #dfe9d4; background: #fff; }
  body[data-auth="unlocked"] #followEditor .follow-collaborator-picker summary { font-size: 14px; color: #496352; }
  body[data-auth="unlocked"] #followEditor .follow-collaborator-options { max-height: 145px; }
  body[data-auth="unlocked"] #followEditor .follow-collaborator-options label { display: flex; align-items: center; gap: 7px; padding: 7px; font-size: 14px; }
  body[data-auth="unlocked"] #followEditor .follow-collaborator-options input[type="checkbox"] { width: 15px; height: 15px; flex: none; }
  body[data-auth="unlocked"] #followEditor .follow-collaborator-selected { margin: 8px 0; }
  body[data-auth="unlocked"] #followEditor #followPlanNotice { font-size: 14px; color: #56665e; line-height: 1.7; }
  body[data-auth="unlocked"] #followEditor > #followSaveMessage { flex: none; margin: 0; padding: 10px 25px; font-size: 14px; background: #fff8ef; }
  body[data-auth="unlocked"] #followEditor > .editor-actions { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 14px 25px; margin: 0; border-top: 1px solid #d0dbd4; background: #fff; }
  body[data-auth="unlocked"] #followEditor > .editor-actions button { min-width: 90px; min-height: 40px; padding: 10px 18px; border-radius: 7px; font-size: 16px; font-weight: 500; }
  body[data-auth="unlocked"] #followEditor .cancel-edit { border: 1px solid #e3ebd8; background: #fff; color: #56665e; }
  body[data-auth="unlocked"] #followEditor .save-edit { min-width: 124px; background: #176b5d; color: #fff; }
  body[data-auth="unlocked"] #followEditor button:disabled { opacity: .5; cursor: default; }
  body[data-auth="unlocked"] #followEditor input:focus-visible,
  body[data-auth="unlocked"] #followEditor textarea:focus-visible,
  body[data-auth="unlocked"] #followEditor select:focus-visible,
  body[data-auth="unlocked"] .wide-nav-item:focus-visible,
  body[data-auth="unlocked"] .wide-profile:focus-visible,
  body[data-auth="unlocked"] .wide-customer-row:focus-visible { outline: 2px solid #92b775; outline-offset: 2px; }
  body[data-auth="unlocked"] .fx-global #openNotifications { right: 25px; bottom: 20px; font-size: 14px; padding: 9px 12px; border-color: #dfe9d5; box-shadow: 0 3px 16px #294c2710; }
  body[data-auth="unlocked"] #featureToast { bottom: 30px; font-size: 14px; }
  body[data-auth="unlocked"] .fx-dashboard { gap: 20px; padding-bottom: 35px; }
  body[data-auth="unlocked"] .fx-kpis { gap: 15px; }
  body[data-auth="unlocked"] .fx-kpi { border-color: #cbd6ce; border-radius: 10px; padding: 18px; }
  body[data-auth="unlocked"] .fx-kpi span { font-size: 14px; color: #56665e; }
  body[data-auth="unlocked"] .fx-kpi strong { color: #24533d; font-weight: 500; font-size: 27px; }
  body[data-auth="unlocked"] .fx-box { border-color: #cbd6ce; padding: 22px; border-radius: 10px; }
  body[data-auth="unlocked"] .fx-box h3 { font-size: 15px; font-weight: 500; color: #2e5744; }
  body[data-auth="unlocked"] .fx-dashboard table { font-size: 14px; }
  body[data-auth="unlocked"] .fx-dashboard th { background: #f4f8ee; color: #466250; font-size: 14px; font-weight: 500; }
  body[data-auth="unlocked"] #followEditor .follow-collaborator-option small,
  body[data-auth="unlocked"] #followEditor .follow-owner-selected,
  body[data-auth="unlocked"] #followEditor .follow-collaborator-selected button,
  body[data-auth="unlocked"] #detailPanel .follow-collaboration-history,
  body[data-auth="unlocked"] #widePeriodSlot .fx-time-menu .fx-muted,
  body[data-auth="unlocked"] #widePeriodSlot .fx-time-menu button,
  body[data-auth="unlocked"] #detailPanel .cooperate-tag,
  body[data-auth="unlocked"] #detailPanel .fx-muted,
  body[data-auth="unlocked"] #detailPanel .follow-next-line,
  body[data-auth="unlocked"] #detailPanel .detail-tags .badge,
  body[data-auth="unlocked"] #detailPanel .detail-tags .stored-tag,
  body[data-auth="unlocked"] .follow-account-menu { color: #56665e; font-size: 14px; }
  body[data-auth="unlocked"] .follow-account-menu button { font-size: 14px; }
  body[data-auth="unlocked"] #followEditor input::placeholder,
  body[data-auth="unlocked"] #followEditor textarea::placeholder { color: #66756c; opacity: 1; }
  body[data-auth="unlocked"] .operation-module,
  body[data-auth="unlocked"] .learning-module,
  body[data-auth="unlocked"] .dashboard-module,
  body[data-auth="unlocked"] .mine-module { min-width: 0; flex: none; }
  body[data-auth="unlocked"] .operation-module .section-head,
  body[data-auth="unlocked"] .learning-module .section-head { margin-bottom: 19px; }
  body[data-auth="unlocked"] .operation-module .section-head h2,
  body[data-auth="unlocked"] .learning-module .section-head h2 { font-size: 17px; font-weight: 500; }
  body[data-auth="unlocked"] #taskList { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
  body[data-auth="unlocked"] .operation-card { border-color: #e2e9dc; border-radius: 9px; box-shadow: none; padding: 17px; }
  body[data-auth="unlocked"] .operation-card.overdue { border-color: #ddc49d; }
  body[data-auth="unlocked"] .mine-module { padding-bottom: 38px; }
  body[data-auth="unlocked"] .mine-hero,
  body[data-auth="unlocked"] .password-box,
  body[data-auth="unlocked"] .data-box,
  body[data-auth="unlocked"] .admin-box { border-color: #cbd6ce; box-shadow: none; padding: 21px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body[data-auth="unlocked"] .main { padding: 17px 18px 18px; }
  body[data-auth="unlocked"] #wideDate { display: none; }
  body[data-auth="unlocked"] .wide-search { width: auto; flex: 1; }
  body[data-auth="unlocked"] .topline { flex-wrap: wrap; gap: 10px; }
  body[data-auth="unlocked"] #moduleTitle { font-size: 24px; }
  body[data-auth="unlocked"] #moduleSub { font-size: 14px; }
  body[data-auth="unlocked"] .wide-header-actions { gap: 7px; width: 100%; }
  body[data-auth="unlocked"] .wide-header-actions button { padding: 10px 12px; font-size: 14px; min-height: 44px; }
  body[data-auth="unlocked"] .wide-metric { gap: 6px; padding: 0 12px; }
  body[data-auth="unlocked"] .wide-metric > span { font-size: 14px; }
  body[data-auth="unlocked"] .wide-metric strong { font-size: 21px; }
  body[data-auth="unlocked"] .wide-metric small { display: none; }
  body[data-auth="unlocked"] .customer-card.wide-customer-row { grid-template-columns: 34px minmax(0, 1fr) 96px; padding: 16px 18px; gap: 13px; }
  body[data-auth="unlocked"] .wide-row-title strong { font-size: 18px; }
  body[data-auth="unlocked"] .wide-row-meta,
  body[data-auth="unlocked"] .wide-row-next { font-size: 14px; }
  body[data-auth="unlocked"] #detailPanel { position: fixed; left: auto; right: 18px; top: 18px; bottom: 18px; width: min(680px, calc(100vw - 116px)); height: calc(100vh - 36px); height: calc(100dvh - 36px); max-height: none; padding: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dce7d4; border-radius: 11px; transform: translateX(calc(100% + 40px)); box-shadow: 0 15px 60px #193e2940; }
  body[data-auth="unlocked"] #detailPanel.open { transform: translateX(0); }
  body[data-auth="unlocked"] #detailPanel .detail-head { padding: 17px 18px 14px; }
  body[data-auth="unlocked"] #detailCompany { font-size: 22px; }
  body[data-auth="unlocked"] #wideFollowFooter { padding: 12px 18px; }
  body[data-auth="unlocked"] #followEditor { width: calc(100vw - 36px); }
  body[data-auth="unlocked"] #followEditor .wide-follow-body { gap: 18px; padding: 19px 20px; }
  body[data-auth="unlocked"] #followEditor #nextFollowBox { padding: 15px; }
  body[data-auth="unlocked"] #followEditor .next-follow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 7px; }
  body[data-auth="unlocked"] #followEditor .next-follow-grid > .editor-field:first-child { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  body[data-auth="unlocked"] .wide-columns { grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); }
  body[data-auth="unlocked"] .wide-detail-host { display: flex; flex-direction: column; }
  body[data-auth="unlocked"] #wideDetailHost #detailPanel { position: static; inset: auto; width: 100%; max-width: none; height: 100%; max-height: none; min-height: 0; display: none; flex-direction: column; padding: 0; border: 0; border-radius: 0; overflow: hidden; transform: none; transition: none; box-shadow: none; z-index: auto; }
  body[data-auth="unlocked"] #detailPanel #recordTabs { padding-right: 170px; }
  body[data-auth="unlocked"] #wideDetailHost #detailPanel.open { display: flex; transform: none; }
  body[data-auth="unlocked"] #wideDetailHost:has(#detailPanel.open) .wide-empty-detail { display: none; }
  body[data-auth="unlocked"][data-view="todo"] #detailMask,
  body[data-auth="unlocked"][data-view="customer"] #detailMask { display: none; }
  body[data-auth="unlocked"] .learning-module > .customer-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  body[data-auth="unlocked"] .learning-module .empty-state { border-style: solid; text-align: left; padding: 26px; line-height: 1.9; min-height: 130px; font-size: 14px; }
  body[data-auth="unlocked"] .mine-module { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; }
  body[data-auth="unlocked"] .mine-module > .mine-hero,
  body[data-auth="unlocked"] .mine-module > .admin-box { grid-column: 1 / -1; }
}

@media (min-width: 1280px) {
  body[data-auth="unlocked"] { --wide-sidebar: 210px; }
  body[data-auth="unlocked"] .sidebar { padding: 27px 15px 20px; }
  body[data-auth="unlocked"] .sidebar .wide-brand { flex-direction: row; justify-content: flex-start; align-items: center; gap: 11px; padding-left: 12px; margin-bottom: 39px; text-align: left; }
  body[data-auth="unlocked"] .wide-brand strong { font-size: 17px; }
  body[data-auth="unlocked"] .wide-brand small { display: block; }
  body[data-auth="unlocked"] .wide-brand > span:last-child { font-size: 18px; }
  body[data-auth="unlocked"] .wide-workspace-label { display: block; color: #c5d9cb; font-size: 14px; letter-spacing: .2px; border: 1px solid #70876535; border-radius: 6px; padding: 9px 12px; margin: -14px 3px 28px; background: #ffffff03; }
  body[data-auth="unlocked"] .wide-sidebar-note { display: block; color: #b3cabd; font-size: 14px; line-height: 1.9; margin: 0 0 21px 12px; }
  body[data-auth="unlocked"] .wide-nav-group { margin-bottom: 25px; }
  body[data-auth="unlocked"] .wide-nav-group > p,
  body[data-auth="unlocked"] .wide-nav-group > h2,
  body[data-auth="unlocked"] .wide-nav-group > h3,
  body[data-auth="unlocked"] .wide-nav-group > span,
  body[data-auth="unlocked"] .wide-nav-group-title { padding: 0 15px; margin-bottom: 12px; font-size: 14px; text-align: left; }
  body[data-auth="unlocked"] .wide-nav-item { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 43px; padding: 11px 15px; font-size: 16px; text-align: left; }
  body[data-auth="unlocked"] .wide-nav-icon svg { width: 17px; height: 17px; }
  body[data-auth="unlocked"] .wide-profile { flex-direction: row; align-items: center; justify-content: flex-start; padding: 17px 8px 0; gap: 11px; text-align: left; }
  body[data-auth="unlocked"] .wide-profile strong { font-size: 14px; }
  body[data-auth="unlocked"] .wide-profile small { font-size: 14px; }
  body[data-auth="unlocked"] .wide-profile > svg { display: block; width: 13px; height: 13px; margin-left: auto; color: #b3cabd; }
  body[data-auth="unlocked"] .main { padding: 20px 27px 24px; }
  body[data-auth="unlocked"] .wide-metric { padding: 0 22px; }
  body[data-auth="unlocked"] .wide-metric > span { font-size: 14px; }
  body[data-auth="unlocked"] .wide-metric strong { font-size: 25px; }
  body[data-auth="unlocked"] .customer-card.wide-customer-row { padding: 16px; }
  body[data-auth="unlocked"] #taskList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) and (max-height: 700px) {
  body[data-auth="unlocked"] .main { padding-top: 12px; padding-bottom: 13px; }
  body[data-auth="unlocked"] .topbar { margin-bottom: 12px; }
  body[data-auth="unlocked"] #moduleSub { display: none; }
  body[data-auth="unlocked"] .wide-workspace { gap: 11px; }
  body[data-auth="unlocked"] .wide-metrics { min-height: 54px; padding-top: 9px; padding-bottom: 9px; }
  body[data-auth="unlocked"] #detailPanel .detail-head { padding-top: 13px; padding-bottom: 10px; }
  body[data-auth="unlocked"] .wide-customer-summary { padding-bottom: 12px; gap: 8px 12px; }
  body[data-auth="unlocked"] #wideProfileDetails > summary { padding-top: 8px; padding-bottom: 8px; }
  body[data-auth="unlocked"] #detailPanel .record-tab { min-height: 39px; padding-top: 9px; padding-bottom: 9px; }
  body[data-auth="unlocked"] #wideFollowFooter { padding-top: 9px; padding-bottom: 9px; }
  body[data-auth="unlocked"] #followEditor { max-height: calc(100dvh - 26px); }
  body[data-auth="unlocked"] #followEditor > .editor-head { padding-top: 13px; padding-bottom: 12px; }
  body[data-auth="unlocked"] #followEditor > .editor-actions { padding-top: 10px; padding-bottom: 10px; }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  body[data-auth="unlocked"] .wide-nav-item,
  body[data-auth="unlocked"] .wide-customer-row { transition: none; }
}

.wide-plan-only-control { display: none; }
#widePlanSlot[hidden] { display: none !important; }
@media (min-width: 768px) {
  body[data-auth="unlocked"] .wide-plan-only-control { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 25px 0; font-size: 14px; color: #496352; flex: none; }
  body[data-auth="unlocked"] .wide-plan-only-control input { width: 15px; height: 15px; accent-color: #176b5d; }
  body[data-auth="unlocked"] #followEditor.wide-plan-only .wide-follow-main,
  body[data-auth="unlocked"] #followEditor.wide-plan-only #nextFollowBox { display: none; }
  body[data-auth="unlocked"] #followEditor.wide-plan-only .wide-follow-body { grid-template-columns: 1fr; }
  body[data-auth="unlocked"] #widePlanSlot > form > .fx-dialog-head,
  body[data-auth="unlocked"] #widePlanSlot > form > .editor-actions { display: none; }
  body[data-auth="unlocked"] #widePlanSlot .plan-editor-schedule { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  body[data-auth="unlocked"] #widePlanSlot label { display: flex; flex-direction: column; gap: 8px; color: #496352; font-size: 14px; }
  body[data-auth="unlocked"] #widePlanSlot input,body[data-auth="unlocked"] #widePlanSlot select,body[data-auth="unlocked"] #widePlanSlot textarea { box-sizing: border-box; width: 100%; min-width: 0; background: white; padding: 10px; border: 1px solid #dde7d9; border-radius: 6px; }
  body[data-auth="unlocked"] #widePlanSlot textarea { min-height: 120px; margin-top: 6px; }
  body[data-auth="unlocked"] #widePlanSlot fieldset { border: 0; padding: 0; }
  body[data-auth="unlocked"] #wideFilterBar #customerStaffShell { margin: 0; position: relative; }
  body[data-auth="unlocked"] #wideFilterBar #customerStaffMenu { top: 100%; bottom: auto; left: 0; right: auto; z-index: 30; }
  body[data-auth="unlocked"] #detailPanel #openCustomerSales { margin: 0 22px; padding: 7px 12px; width: auto; align-self: flex-end; min-height: 30px; font-size: 14px; background: #f6f8f3; }
}
/* Keep an already-open plan intact when rotating to a phone-sized viewport. */
@media (max-width: 767px) {
  #followEditor.wide-plan-only .wide-follow-main,#followEditor.wide-plan-only #nextFollowBox { display: none; }
  #widePlanSlot .fx-dialog-head,#widePlanSlot .editor-actions { display: none; }
  #followEditor.wide-plan-only .wide-plan-only-control { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 12px; }
}

#wideManageCustomer, #wideActiveFilters { display: none; }
@media(min-width:768px){
  body[data-auth="unlocked"] #wideManageCustomer { display:block; border:1px solid #dfe8d8; background:#f6f9f1; color:#2e5744; border-radius:6px; font-size: 14px; padding:6px 9px; white-space:nowrap; }
  body[data-auth="unlocked"] #wideActiveFilters { display:block; padding:0 12px 8px; border-bottom:1px solid #d0dbd4; }
  body[data-auth="unlocked"] #wideActiveFilters .filter-tags { margin:0; gap:4px; }
  body[data-auth="unlocked"] #wideActiveFilters .active-filter { font-size: 14px; padding:3px 7px; }
  body[data-auth="unlocked"] #wideFilterBar { flex-wrap:wrap; gap:7px; }
  body[data-auth="unlocked"] #wideFilterBar #openFilters { width:30px; height:30px; padding:6px; order:3; }
  body[data-auth="unlocked"] #wideFilterBar #customerStaffShell { order:-1; }
  body[data-auth="unlocked"] #wideListCount { margin-left:auto; font-size: 14px; }
  body[data-auth="unlocked"][data-view="customer"] > #filterBoard { display:none; position:fixed; left:50%; top:80px; width:min(560px,calc(100vw - 40px)); max-height:calc(100dvh - 120px); overflow:auto; transform:translateX(-50%); z-index:81; }
  body[data-auth="unlocked"][data-view="customer"].filter-open > #filterBoard { display:block; }
  body[data-auth="unlocked"][data-view="customer"].filter-open > #filterMask { display:block; z-index:80; }
}

@media(min-width:768px){
  body[data-auth="unlocked"] .wide-header-actions #openNotifications { position:static; inset:auto; min-height:44px; padding:10px 12px; box-shadow:none; white-space:nowrap; }
  body:not([data-auth="unlocked"]) .sidebar { display:none; }
  body:not([data-auth="unlocked"]) .app { grid-template-columns:minmax(0,1fr); }
}

/* Keep the larger search field useful as the desktop header gets narrower. */
@media (min-width: 768px) and (max-width: 1439px) {
  body[data-auth="unlocked"] #wideDate { display: none; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  body[data-auth="unlocked"] .wide-search { width: 320px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  body[data-auth="unlocked"] .wide-metric small { display: none; }
}

@media (min-width: 1024px) {
  body[data-auth="unlocked"] #detailPanel #openCustomerSales { margin-top: 5px; margin-bottom: -39px; min-height: 34px; z-index: 1; }
}
@media (min-width: 768px) and (max-height: 850px) {
  body[data-auth="unlocked"] #detailPanel .detail-head { padding-top: 12px; padding-bottom: 10px; }
  body[data-auth="unlocked"] .wide-customer-summary { gap: 8px 12px; padding-bottom: 10px; }
  body[data-auth="unlocked"] .wide-customer-summary > div { gap: 3px; }
  body[data-auth="unlocked"] .wide-collab-summary { padding: 5px 10px; }
  body[data-auth="unlocked"] #wideProfileDetails > summary { padding-top: 7px; padding-bottom: 7px; }
  body[data-auth="unlocked"] #wideFollowFooter { padding-top: 9px; padding-bottom: 9px; }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  body[data-auth="unlocked"] .customer-card.wide-customer-row { grid-template-columns: 32px minmax(0, 1fr); gap: 6px 10px; }
  body[data-auth="unlocked"] .wide-row-status { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding-top: 2px; }
  body[data-auth="unlocked"] .wide-row-status .owner-chip { flex: none; }
}