.ui-visual-icon{display:inline-flex;align-items:center;justify-content:center;width:1.2rem;height:1.2rem;vertical-align:middle;flex:0 0 auto;margin-inline-end:.4rem;pointer-events:none}
.ui-visual-icon svg{width:1.1rem;height:1.1rem}
.ui-visual-icon--blue{color:#2563eb}.ui-visual-icon--violet{color:#7c3aed}.ui-visual-icon--green{color:#15803d}.ui-visual-icon--teal{color:#0f766e}.ui-visual-icon--orange{color:#c2410c}.ui-visual-icon--rose{color:#be123c}.ui-visual-icon--slate{color:#475569}
.ui-editor-field-label{display:flex;align-items:center;gap:.35rem;font-size:.875rem;font-weight:600}
.avatar-monogram {
  background: #5b6cff;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: none;
}

.notify-dot {
  background: #ef4444;
}

.user-menu-panel.switch-profile {
  min-width: 18.5rem;
  max-width: min(22rem, calc(100vw - 1.25rem));
  padding: 0.85rem 0.8rem 0.55rem;
  border-radius: 1.15rem;
  border: 1px solid #e8eef6;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
}

.switch-profile-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.1rem 0.15rem 0.85rem;
}

.switch-profile-who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.switch-profile-who strong {
  font-size: 0.95rem;
  font-weight: 750;
  color: #0f172a;
  line-height: 1.2;
}

.switch-profile-who span {
  font-size: 0.78rem;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.switch-profile-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: #e8f0ff;
  color: #2563eb;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.switch-profile-section {
  margin: 0.15rem 0.2rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 650;
  color: #64748b;
}

.switch-profile-search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0.1rem 0.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid #e5eaf1;
  border-radius: 0.75rem;
  background: #f8fafc;
  color: #64748b;
}

.switch-profile-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  color: #0f172a;
  outline: none;
}

.switch-profile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 16.5rem;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.switch-profile-list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.switch-profile-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.55rem;
  border: 0;
  border-radius: 0.85rem;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.switch-profile-row:hover,
.switch-profile-row:focus-visible {
  background: #f4f7fb;
}

.switch-profile-row[data-active='true'] {
  background: #eef4ff;
}

.switch-profile-kind {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.7rem;
  display: grid;
  place-items: center;
  background: #eef2f7;
  color: #334155;
}

.switch-profile-kind[data-kind='partner'] {
  background: #e8f7ef;
  color: #0f766e;
}

.switch-profile-kind[data-kind='super_admin'] {
  background: #efe9ff;
  color: #6d28d9;
}

.switch-profile-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.switch-profile-copy strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
}

.switch-profile-copy small {
  font-size: 0.72rem;
  color: #94a3b8;
}

.switch-profile-radio {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 1.6px solid #cbd5e1;
  display: grid;
  place-items: center;
  background: #fff;
}

.switch-profile-radio.is-on {
  border: 0;
  background: #2563eb;
}

.switch-profile-status {
  margin: 0.35rem 0.4rem 0;
  font-size: 0.78rem;
  color: #64748b;
}

.switch-profile-foot {
  display: flex;
  flex-direction: column;
  margin-top: 0.35rem;
  padding-top: 0.2rem;
  border-top: 1px solid #eef2f6;
}

.switch-profile-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.55rem;
  color: #2563eb;
  font-size: 0.88rem;
  font-weight: 650;
  text-decoration: none;
  border-radius: 0.7rem;
}

.switch-profile-all.is-static {
  margin: 0;
}

.switch-profile-all:hover {
  background: #f4f7fb;
}

.switch-profile-action {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.7rem 0.55rem;
  border: 0;
  background: transparent;
  border-radius: 0.7rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  color: #0f172a;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.switch-profile-action svg {
  color: #2563eb;
}

.switch-profile-action:hover,
.switch-profile-action:focus-visible {
  background: #f4f7fb;
}

.switch-profile-logout {
  color: #dc2626;
}

.switch-profile-logout svg {
  color: #dc2626;
}

.avatar-btn {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #c7d2fe;
}
.gm-catalogue{max-width:1180px;margin:auto;color:#142b47;padding:12px 0 32px;font-size:14px}.gm-catalogue *{box-sizing:border-box;min-width:0}.gm-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.gm-heading h1{font-size:28px;margin:9px 0}.gm-heading p{color:#64748b;line-height:1.5}.gm-back{display:inline-flex;align-items:center;gap:7px;color:#1764c0;background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:none}.gm-eyebrow{display:flex;align-items:center;gap:7px;letter-spacing:1.2px;font-size:10px;font-weight:750;color:#587089;margin-top:16px}.gm-count{padding:9px 13px;border-radius:8px;background:#edf5ff;color:#2161a4;white-space:nowrap}.gm-notice{padding:13px 16px;background:#f0f6fc;border-left:3px solid #8ab5e5;border-radius:5px;color:#48657e;line-height:1.6;margin:16px 0}.gm-filters{display:grid;grid-template-columns:minmax(220px,2fr) 1fr 1fr;gap:10px;margin:18px 0}.gm-filters label{display:flex;align-items:center;gap:8px;border:1px solid #d7e1ec;padding-left:12px;border-radius:8px}.gm-catalogue input,.gm-catalogue select{font:inherit;color:inherit;background:white}.gm-filters input{width:100%;padding:12px;border:0;outline-offset:-3px}.gm-catalogue select{width:100%;padding:11px;border:1px solid #d7e1ec;border-radius:8px}.gm-selection{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px;background:#f7faff;border:1px solid #dce8f5;border-radius:9px}.gm-catalogue button:disabled{opacity:.55;cursor:not-allowed}.gm-selection>button:last-child,.gm-item-bottom>button,.gm-empty button{border:0;background:none;color:#1764c0;cursor:pointer;padding:8px}.gm-results{display:flex;justify-content:space-between;gap:12px;margin:20px 0 10px;color:#63768b}.gm-results small{font-size:11px}.gm-items{display:grid;gap:10px}.gm-item{padding:16px;border:1px solid #dce5ef;border-radius:10px;background:white}.gm-item-title{display:flex;align-items:center;gap:13px}.gm-item-title>div{flex:1}.gm-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;background:#eaf3ff;color:#3278c2;border-radius:8px}.gm-item h2{font-size:16px;line-height:1.4;margin:4px 0!important;overflow-wrap:anywhere}.gm-item small{font-size:11px;color:#6b7f94}.gm-item p{font-size:12px;color:#62758b;line-height:1.5;margin:5px 0}.gm-item input[type=checkbox],.gm-confirm input{width:20px;height:20px;accent-color:#2563eb;flex-shrink:0}.gm-item-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-top:1px solid #edf1f6;margin-top:12px;padding-top:10px;font-size:12px}.gm-item summary{color:#41698c;cursor:pointer;padding:5px 0}.gm-item dl>div{display:flex;gap:15px}.gm-item dt{text-transform:capitalize;color:#64748b}.gm-item dd{margin:0}.gm-enabled{color:#26774e;white-space:nowrap;padding-top:5px}.gm-muted{color:#64748b;line-height:1.6}.gm-success{display:flex;align-items:center;gap:8px;padding:13px;color:#236c48;background:#edf9f1;border-radius:8px}.gm-error{padding:12px;color:#a52727;background:#fff1f1;border-radius:8px}.gm-error button{padding:7px 12px;background:white;border:1px solid #e7b7b7;border-radius:6px;color:inherit}.gm-empty{text-align:center;padding:35px 12px;border:1px dashed #d3dfeb;border-radius:10px}.gm-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:20px 0}.gm-link-form{border:2px solid #9fc2ec;padding:20px;border-radius:12px;margin:20px 0;background:#f7faff}.gm-link-form label{display:grid;gap:8px;margin:15px 0}.gm-link-form .gm-confirm{display:flex;align-items:center;gap:10px}.gm-link-form>div{display:flex;gap:12px;flex-wrap:wrap}.gm-footer{margin-top:25px;padding-top:15px;border-top:1px solid #e1e8f0;color:#64748b;font-size:12px}.gm-footer a{color:#1764c0}.gm-catalogue :is(button,a,input,select,summary):focus-visible{outline:3px solid #8ab8ff;outline-offset:3px}@media(max-width:650px){.gm-heading{align-items:flex-start}.gm-heading h1{font-size:23px}.gm-count{font-size:11px;white-space:normal}.gm-filters{grid-template-columns:1fr 1fr}.gm-filters label{grid-column:1/-1}.gm-item{padding:12px}.gm-item-title{gap:9px}.gm-item h2{font-size:14px}.gm-icon{width:32px;height:32px;flex-basis:32px}.gm-item-bottom{flex-direction:column;gap:5px}.gm-selection{gap:8px}.gm-selection button{max-width:100%;white-space:normal}.gm-results{font-size:12px;flex-wrap:wrap}}
.builder-erp{max-width:1080px;margin:0 auto;padding:clamp(24px,5vw,64px) clamp(16px,4vw,40px);color:var(--text-primary,#172e39)}
.builder-erp__intro{max-width:620px;margin-bottom:36px}.builder-erp__eyebrow,.builder-erp__label{font-size:11px;letter-spacing:.12em;font-weight:700;color:#476d73}.builder-erp__intro h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.04em;margin:10px 0 12px;line-height:1.1}.builder-erp__intro>p{font-size:17px;color:var(--text-secondary,#586c77);line-height:1.6}
.builder-erp__areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.builder-erp__card{display:flex;flex-direction:column;align-items:flex-start;gap:26px;padding:32px;border:1px solid var(--border-color,#dce5e7);border-radius:20px;background:var(--surface,#fff);color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}.builder-erp__card:hover{border-color:#648e93;box-shadow:0 8px 28px #17333d0a}.builder-erp__card:focus-visible,.builder-erp-switcher a:focus-visible{outline:3px solid #397b88;outline-offset:4px}.builder-erp__icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;color:#23636b;background:#e8f3f1}.builder-erp__card--construction .builder-erp__icon{color:#8e611d;background:#faf0db}.builder-erp__card-copy{display:flex;flex-direction:column;flex:1}.builder-erp__card h2{font-size:24px;letter-spacing:-.025em;margin:10px 0}.builder-erp__card p{color:var(--text-secondary,#586c77);font-size:15px;line-height:1.7;margin:0 0 28px;max-width:370px}.builder-erp__open{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:650;margin-top:auto}.builder-erp__empty{padding:24px;background:var(--surface,#f4f7f8);border-radius:12px;line-height:1.6}
.builder-erp-switcher{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 20px;padding:12px 0;border-bottom:1px solid var(--border-color,#dce5e7);font-size:13px}.builder-erp-switcher a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--text-secondary,#586c77);padding:8px 10px;border-radius:8px}.builder-erp-switcher a.active{background:#e8f3f1;color:#23636b;font-weight:650}.builder-erp-switcher>div{display:flex;gap:4px}.builder-erp-switcher .builder-erp-switcher__home{font-weight:650;color:var(--text-primary,#172e39)}
@media(max-width:640px){.builder-erp__areas{grid-template-columns:1fr}.builder-erp__card{padding:24px;gap:20px}.builder-erp__intro{margin-bottom:24px}}
.builder-erp__guidance{display:block;font-size:14px;line-height:1.7;color:var(--text-secondary,#586c77);margin-top:12px}
.builder-erp__areas--single{grid-template-columns:minmax(0,1fr);max-width:720px}
.builder-erp__areas--single .builder-erp__card{flex-direction:row;gap:24px}
.builder-erp__card-copy{min-width:0;overflow-wrap:anywhere}.builder-erp__icon{flex-shrink:0}
@media(max-width:640px){.builder-erp{padding:24px 16px}.builder-erp__areas--single .builder-erp__card{flex-direction:column;gap:16px}.builder-erp-switcher{gap:6px;margin-bottom:0;padding:8px 0}.builder-erp-switcher a{min-height:44px;padding:8px}.builder-erp-switcher>div{flex-wrap:wrap}}
.builder-erp-delivery{display:flex;flex-direction:column;gap:12px;padding:24px;margin:20px 0;border:1px solid var(--border-color,#dce5e7);border-radius:16px;background:var(--surface,#fff);overflow-wrap:anywhere}.builder-erp-delivery h2,.builder-erp-delivery p{margin:0}.builder-erp-delivery ul{margin:0;padding-left:20px;line-height:1.8}.builder-erp-delivery a{padding:8px 0;min-height:44px}.builder-erp-delivery button{align-self:flex-start;min-height:44px;padding:10px 16px;border:1px solid var(--border-color,#dce5e7);border-radius:8px;background:var(--surface,#fff);color:inherit}.builder-erp-delivery a:focus-visible,.builder-erp-delivery button:focus-visible{outline:3px solid #397b88;outline-offset:3px}
@layer components {
  .compact-screen-title { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important; }
  html:has(.app-shell[data-navigation=compact]) { height:auto!important; max-height:none!important; overflow-y:auto!important; overflow-x:clip!important; scrollbar-width:auto!important; }
  html:has(.app-shell[data-navigation=compact]) :is(body,#root) { height:auto!important; max-height:none!important; overflow:visible!important; }
  .app-shell[data-navigation=compact] { height:auto!important; max-height:none!important; min-height:100dvh; overflow:visible!important; }
  .app-shell[data-navigation=compact]>main { overflow:visible!important; padding-bottom:16px; }
  html:has(.app-shell[data-navigation=compact]):has(.overlay) { overflow-y:hidden!important; }
  html:has(.app-shell[data-navigation=compact])::-webkit-scrollbar,
  html:has(.app-shell[data-navigation=compact])::-webkit-scrollbar-thumb,
  html:has(.app-shell[data-navigation=compact])::-webkit-scrollbar-track { all:revert!important; }
  .compact-navigation-host { box-sizing:border-box; width:100%; min-width:0; max-width:900px; margin-inline:auto; overflow-x:clip; flex:none; }
  .compact-workspace-links>.compact-navigation { padding:0; background:transparent; }
  .compact-navigation-host:has(>.compact-navigation)>.compact-navigation-fallback { display:none; }
  .app-shell[data-navigation-area=marketing] :is(.mkt-chrome,.marketing-hub) { display:none; }
  .app-shell[data-navigation-area=builder] .sa-form[data-screen=builder-home] .home-apps.launcher-grid { display:none; }
  .app-shell[data-navigation-area=comms-reseller] .cr-menu[aria-label="Communications Reseller menu"],
  .app-shell[data-navigation-area=comms-services] .cr-menu[aria-label="Communications menu"],
  .app-shell[data-navigation-area=comms-platform] .cr-menu[aria-label="Platform menu"] { display:none; }
  .app-shell[data-navigation-area=freelance] .sa-form[data-screen=freelance-home]>.sa-form-head>span.muted { display:none; }
  .app-shell[data-navigation-area=appointments] .appt-top { display:none; }
  .app-shell[data-navigation-area=planner] .press-setup-trail { display:none; }
  .app-shell[data-navigation=compact] :is(.re-exact-top,.re-xmod-top,.re-ai-exact-top,.re-reanal-top,.re-featlist-top,.re-webhome-dock),
  .app-shell[data-navigation-area=events] .sa-form[data-screen=events-home]>.sa-form-head .events-actions { display:none; }
  .app-shell[data-navigation=compact] .sa-form:has(.re-exact-title-row)>.sa-form-head h1 { display:none; }
  .app-shell[data-navigation-area=hostel] .hostel-chips,
  .app-shell[data-navigation-area=workforce] .attendance-workspace .comm-chrome,
  .app-shell .realestate-module-bar[hidden] { display:none; }
  .app-shell .realestate-menu-cards[hidden] { display:none; }
  .compact-realestate-search-results>div { display:flex; justify-content:space-between; align-items:center; padding:6px; }
  .compact-realestate-search-results button { min-height:44px; min-width:44px; }
  .app-shell[data-navigation-area=builderos] :is(.bos-chips,.bos-mobile-nav),
  .app-shell[data-navigation-area=builder-erp] .builder-erp[aria-labelledby=builder-erp-title]>.builder-erp__areas,
  .app-shell[data-navigation-area=construction] :is(.cw-operations,.cx-client-mobile-nav) { display:none; }
  .app-shell[data-navigation-area=recruitment] .rec-tabs,
  .app-shell[data-navigation-area=recruitment] .rec-workspace>p:has(a[href*="screen="]),
  .app-shell[data-navigation-area=recruitment] .rec-workspace>.rec-legacy-navigation { display:none; }
  .compact-navigation { box-sizing:border-box; width:100%; min-width:0; max-width:900px; margin:0 auto; padding:0 12px 8px; overflow-x:clip; color:var(--ui-text); background:var(--ui-surface); }
  .compact-navigation-groups { display:flex; flex-wrap:wrap; gap:0 14px; border-bottom:1px solid var(--ui-border); }
  .compact-navigation-groups button { box-sizing:border-box; display:block; width:auto; min-width:44px; min-height:44px; margin:0; padding:8px 4px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:inherit; font:inherit; font-size:13px; cursor:pointer; }
  .compact-navigation-groups button[aria-selected=true] { color:var(--ui-accent,#0879ff); border-bottom-color:currentColor; }
  /* 900px column, 12px inset, 6px gap: nine 92px chips fit one row; the tenth wraps. */
  .compact-navigation-items { display:flex; flex-wrap:wrap; align-items:stretch; justify-content:flex-start; gap:6px; min-width:0; padding-top:8px; overflow-x:clip; }
  .compact-navigation-item { box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:0 1 auto; width:calc((100% - 48px) / 9); max-width:calc((100% - 48px) / 9); min-width:min(80px, 100%); min-height:70px; gap:5px; padding:6px 4px; border:1px solid var(--ui-border); border-radius:6px; color:inherit; background:transparent; text-decoration:none; text-align:center; font-size:12px!important; line-height:16px!important; overflow-wrap:break-word; word-break:normal; hyphens:manual; }
  .compact-navigation-item>span:last-child { max-width:100%; overflow-wrap:break-word; word-break:normal; hyphens:manual; }
  .compact-navigation-icon { display:flex; align-items:center; justify-content:center; height:24px; }
  .compact-navigation-icon svg { width:22px; height:22px; }
  .compact-navigation-item[aria-current=page] { color:var(--ui-accent,#0879ff)!important; border-color:var(--ui-accent,#0879ff)!important; background:color-mix(in srgb,var(--ui-accent,#0879ff) 9%,var(--ui-surface,white))!important; }
  .compact-navigation-item:hover { border-color:var(--ui-accent,#0879ff); }
  .compact-navigation :is(a,button):focus-visible { outline:2px solid var(--ui-accent,#0879ff); outline-offset:2px; }
  @media(max-width:480px) {
    .compact-navigation { padding-inline:12px; }
    .compact-navigation-groups { gap:0 10px; }
    .compact-navigation-items { flex-wrap:wrap; }
    .compact-navigation-item { flex:0 0 calc((100% - 12px)/3); max-width:calc((100% - 12px)/3); width:calc((100% - 12px)/3); font-size:11px!important; line-height:14px!important; }
  }
}


/* The workspace owns branding/navigation. Keep these unlayered so legacy
   unlayered module styles cannot restore a second toolbar. Editors and public
   previews do not carry data-navigation=compact. */
.app-shell[data-navigation=compact] main :is(.re-exact-top,.re-xmod-top,.re-ai-exact-top,.re-reanal-top,.re-featlist-top,.re-portalset-top,.re-publist-top) { display:none!important; }
.app-shell[data-navigation=compact] main :is(.re-affprof-brand,.re-affprof-back,.re-affperf-brand,.re-affperf-back,.re-webhome-brand),
.app-shell[data-navigation=compact] main :is(.crm-ai-conversation-head,.crm-assistant-brand)>.logo { display:none!important; }
.app-shell[data-navigation=compact] main :is(.re-affprof-top,.re-affperf-top,.re-webhome-top) { background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; }
.app-shell[data-navigation=compact] main .sa-page-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.app-shell[data-navigation=compact] main .sa-page-title { margin:0 0 12px; font-size:1.4rem; }

/* Recruitment and Assessment have their own legacy brand rows. Keep module
   notification actions, while the shared workspace header supplies identity. */
.app-shell[data-navigation=compact] main .jp-brand:not(.jp-native-header),
.app-shell[data-navigation=compact] main .crm-assistant-brand { display:none!important; }
.app-shell[data-navigation=compact] main .jp-native-header :is(.jp-native-logo,.jp-avatar) { display:none!important; }
.app-shell[data-navigation=compact] main .jp-native-header { justify-content:flex-end; min-height:0; padding:0; border:0; background:transparent; box-shadow:none; }

/* Same 900px column and 12px inset as the compact header so chips, greeting,
   and cards cannot sit left of the back control / header inner edge. */
.app-shell[data-navigation=compact] > .compact-navigation-host,
.app-shell[data-navigation=compact] .compact-navigation {
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  overflow-x: clip;
}
.app-shell[data-navigation=compact] .compact-navigation { padding-inline: 12px; }
.app-shell[data-navigation=compact] > main { overflow-x: clip !important; }
.app-shell.app-shell[data-navigation=compact] .page-container.page-container {
  box-sizing: border-box;
  max-width: 900px !important;
  margin-inline: auto !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  overflow-x: clip;
}
/* Shared module mobile menu; dashboard launchers can retain their visible links. */
.compact-mobile-bar { display: none; }
.compact-navigation[data-mobile-menu=true] .compact-navigation-groups button { display: flex; align-items: center; gap: 6px; }
.compact-group-icon { display: inline-flex; flex-shrink: 0; }
@media(max-width:800px) {
 .compact-navigation[data-mobile-menu=true] { padding-top: 6px; padding-bottom: 8px; }
 .compact-navigation[data-mobile-menu=true] .compact-mobile-bar { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 10px; }
 .compact-mobile-current { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: .9rem; }
 .compact-mobile-current > span { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ui-accent,#075bff); background: color-mix(in srgb,var(--ui-accent,#075bff) 9%,var(--ui-surface,#fff)); }
 .compact-mobile-current strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .compact-mobile-bar > button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 12px; flex-shrink: 0; border: 1px solid var(--ui-border,#dde5f1); border-radius: 10px; background: var(--ui-surface,#fff); color: var(--ui-text); font: inherit; font-size: .85rem; cursor: pointer; }
 .compact-navigation[data-mobile-menu=true]:not([data-mobile-open=true]) .compact-mobile-content { display: none; }
 .compact-navigation[data-mobile-menu=true][data-mobile-open=true] .compact-mobile-content { display: grid; gap: 14px; padding: 12px 0 4px; }
 .compact-navigation[data-mobile-menu=true] .compact-navigation-groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; border: 0; }
 .compact-navigation[data-mobile-menu=true] .compact-navigation-groups button { flex-direction: column; justify-content: center; gap: 8px; min-width: 0; min-height: 82px; padding: 10px 5px; border: 1px solid var(--ui-border,#dde5f1); border-radius: 12px; background: var(--ui-surface,#fff); font-size: 11px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
 .compact-navigation[data-mobile-menu=true] .compact-group-icon { width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 9px; color: var(--ui-accent,#075bff); background: color-mix(in srgb,var(--ui-accent,#075bff) 9%,var(--ui-surface,#fff)); }
 .compact-navigation[data-mobile-menu=true] .compact-navigation-groups button[aria-selected=true] { border-color: var(--ui-accent,#075bff); color: var(--ui-accent,#075bff); background: color-mix(in srgb,var(--ui-accent,#075bff) 5%,var(--ui-surface,#fff)); }
 .compact-navigation[data-mobile-menu=true] .compact-navigation-items { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; border-top: 1px solid var(--ui-border,#dde5f1); padding-top: 14px; }
 .compact-navigation[data-mobile-menu=true] .compact-navigation-item { width: 100%; max-width: none; min-width: 0; min-height: 74px; font-size: 11px!important; }
}


.compact-disclosure, .compact-disclosure-content { display: contents; }
@media(max-width:800px) {
 .compact-disclosure { display: block; padding: 6px 12px 8px; min-width: 0; }
 .compact-disclosure > .compact-mobile-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
 .compact-disclosure:not([data-mobile-open=true]) > .compact-disclosure-content { display: none; }
 .compact-disclosure[data-mobile-open=true] > .compact-disclosure-content { display: grid; gap: 12px; padding-top: 12px; }
 .compact-disclosure[data-mobile-open=true] .compact-disclosure-content > nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 0; overflow: visible; }
 .compact-disclosure[data-mobile-open=true] .compact-disclosure-content > nav > button { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; min-height: 82px; gap: 8px; padding: 10px 5px; border: 1px solid var(--ui-border,#dde5f1); border-radius: 12px; font-size: 11px; line-height: 1.3; white-space: normal; }
}
@layer components {
  .app-shell[data-navigation=compact] .compact-workspace-header {
    position:relative!important; top:auto!important; box-sizing:border-box; display:flex!important;
    align-items:center; flex-wrap:nowrap!important; width:100%; min-height:48px!important;
    max-width:900px!important; margin:0 auto; padding:0 12px!important; gap:6px;
    border:0; border-bottom:1px solid var(--ui-border); background:var(--ui-surface); color:var(--ui-text); z-index:40;
  }
  .compact-header-brand { display:flex; flex:1; align-items:center; gap:10px; min-width:0; }
  .compact-header-back { display:flex; flex:none; }
  .compact-header-logo { display:flex; flex:0 1 auto; align-items:center; min-width:0; }
  .compact-header-logo .logo { display:flex; align-items:center; min-width:0; }
  .compact-header-logo img { max-height:32px!important; max-width:110px!important; object-fit:contain; }
  .compact-module-name { min-width:0; border-left:1px solid var(--ui-border); padding-left:10px; font-size:15px; line-height:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .compact-header-actions { display:flex; align-items:center; flex-shrink:0; gap:4px; }
  .compact-header-apps, .compact-header-utilities>summary { box-sizing:border-box; display:grid; place-items:center; width:44px; height:44px; min-width:44px; border:0; border-radius:50%; color:var(--ui-text); text-decoration:none; cursor:pointer; }
  .compact-header-apps { background:var(--ui-subtle); }
  .compact-header-home { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 10px; border:1px solid var(--ui-border); border-radius:8px; background:var(--ui-subtle); color:var(--ui-text); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; }
  .compact-header-home:hover { background:var(--ui-surface); color:var(--ui-accent,#0879ff); }
  .compact-header-utilities { position:relative; flex-shrink:0; }
  .compact-header-utilities>summary { list-style:none; }
  .compact-header-utilities>summary::-webkit-details-marker { display:none; }
  .compact-header-utilities[open]>div { position:absolute; top:100%; right:0; display:flex; padding:8px; border:1px solid var(--ui-border); border-radius:8px; background:var(--ui-surface); box-shadow:0 8px 20px #0002; z-index:50; }
  .compact-workspace-header :is(a,button,summary):focus-visible { outline:2px solid var(--ui-accent,#0879ff); outline-offset:2px; }
  @media(max-width:480px) {
    .compact-workspace-header:has(.compact-header-home) .compact-header-logo { display:none; }
  }
  @media(max-width:600px) {
    .app-shell[data-navigation=compact] .compact-workspace-header { padding-inline:6px!important; gap:2px; }
    .compact-header-brand { gap:5px; }
    .compact-header-back { display:none!important; }
    .compact-header-logo { flex:none; width:50px; }
    .compact-header-logo img { max-width:50px!important; max-height:28px!important; }
    .compact-module-name { font-size:11px; line-height:14px; padding-left:5px; }
    .compact-header-actions { gap:0; }
  }
}

@layer components {
 .compact-header-subscriptions>span { display:flex; align-items:center; justify-content:center; }
 @media(max-width:380px) { .compact-header-home>span { display:none; } .compact-header-home { width:44px; min-width:44px; padding-inline:0; } }
}
/* Uniform platform chrome. Tokens own color/type/surface.
   Mode A and Mode B inherit the Super Admin home pattern via platform-layout.css (loaded last). */

.app-shell {
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family-body);
}

.app-shell[data-workspace='platform'] {
  background: var(--color-background);
}

.app-shell[data-workspace='platform']:has(.sa-console) {
  background: var(--color-background);
}

.app-shell .sunrise-sun,
.app-shell .sunrise-bird,
.app-shell .sunrise-hills {
  display: none;
}

.app-shell .sunrise-glow {
  display: none;
  background: none;
}

.app-shell:not(.mode-b-shell) > main {
  background: transparent;
  color: var(--color-text);
}

.page-container {
  color: var(--color-text);
}

.workspace-page-head h1,
.home-greeting h1,
.sa-form-titles h1,
.login-card h1 {
  font-family: var(--font-family-heading);
  color: var(--color-text-heading);
}

.muted,
.kicker,
.home-context,
.home-role,
.sa-greeting-sub,
.field,
.field-meta {
  color: var(--color-text-secondary);
}

a.sa-section-link,
.sa-section-link {
  color: var(--color-link);
}

.icon-card,
.action-card,
.stat-card,
.login-card,
.hero-card,
.person-card,
.sa-form-body,
.sa-form-panel,
.modal,
.sheet {
  background: var(--card);
  color: var(--color-text);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.pict {
  border-radius: var(--radius-full);
  background: var(--color-pastel-blue);
  color: var(--color-pastel-blue-ink);
}

.sa-form-pict {
  border-radius: var(--radius-full);
  background: var(--color-pastel-blue);
  color: var(--color-pastel-blue-ink);
  box-shadow: none;
}

.sa-form-titles h1 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.sa-form-titles p,
.sa-form .plan-sub {
  font-size: var(--font-size-body-md);
  color: var(--color-text-secondary);
}

.sa-form-kicker,
.sa-form .plan-side h2,
.action-card h2,
.workspace-page-head h1 {
  font-family: var(--font-family-heading);
  color: var(--color-text-heading);
}

.sa-form .org-add-review strong,
.partner-tree-copy strong,
.partner-chart-card strong,
.sa-form-list .person-card strong,
.sa-form-list .icon-card strong {
  font-family: var(--font-family-heading);
  color: var(--color-text-heading);
}

.primary-btn {
  background: var(--brand);
  color: var(--color-on-primary);
  font-family: var(--font-family-body);
  font-weight: 650;
}

.field input,
.field select,
.field textarea {
  color: var(--color-text);
  background: var(--card);
  border-color: var(--line);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-md);
}

.login-screen {
  background: var(--color-background);
  color: var(--color-text);
}

.empty-state p,
.loading-state p,
.error-state p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-md);
}

/* Module canvases share the same page gray — not a second product theme */
.app-shell:has([data-screen^='marketing-']) main,
.app-shell:has([data-screen^='association-']) main,
.app-shell:has([data-screen='association-events']) main,
.app-shell:has([data-screen='crm-dashboard']) main,
.app-shell:has([data-screen='crm-leads-list']) main,
.app-shell:has([data-screen='crm-people-list']) main {
  background: var(--color-background);
}

.sa-form[data-screen^='marketing-'] .sa-form-head h1,
.sa-form[data-screen^='association-'] .sa-form-head h1,
.sites-hub-head h1 {
  color: var(--color-text-heading);
  font-family: var(--font-family-heading);
}

.sa-form[data-screen^='marketing-'] .primary-btn,
.sa-form[data-screen^='association-'] .primary-btn {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--color-on-primary);
}

.sa-form[data-screen^='association-'] .muted,
.sites-hub-head p {
  color: var(--color-text-secondary);
}

.sa-form[data-screen^='partner-'] {
  max-width: 900px;
  width: 100%;
  margin-inline: auto;
}

.sa-form[data-screen='partner-add'] .primary-btn,
.sa-form[data-screen='partner-add'] .org-add-actions .primary-btn {
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.15rem;
  background: var(--brand);
  color: var(--color-on-primary);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 28%, transparent);
}

.sa-form[data-screen='partner-add'] .primary-btn:disabled,
.sa-form[data-screen='partner-add'] .org-add-actions .primary-btn:disabled {
  background: var(--brand);
  color: var(--color-on-primary);
  opacity: 0.72;
}
/* Logged-in shell. Color, type, radius, and shadow stay in design-system-tokens.css. */

:root {
  --layout-max: 100%;
  --shell-content-max: min(var(--layout-desktop-width), 100%);
}

.primary-btn,
.sa-form .primary-btn {
  min-height: var(--touch);
  border-radius: var(--radius-md);
  font-size: var(--font-size-label-md);
  font-weight: var(--font-weight-semibold);
}

.field {
  font-size: var(--font-size-label-md);
}

.field input,
.field select,
.field textarea,
.sa-form .field input,
.sa-form .field select,
.sa-form .field textarea {
  min-height: var(--touch);
  border-radius: var(--radius-md);
  font-size: var(--font-size-body-md);
}

.field textarea,
.sa-form .field textarea {
  min-height: 6rem;
}

.field-meta,
.workspace-page-head p,
.muted {
  font-size: var(--font-size-body-sm);
}

.workspace-page-head h1,
.home-greeting h1 {
  font-size: var(--font-size-headline-lg);
}

.section-title {
  font-size: var(--font-size-headline-md);
}

.icon-card strong,
.app-card strong {
  font-size: var(--font-size-headline-sm);
}

.icon-btn.header-round {
  width: var(--touch);
  height: var(--touch);
  min-width: var(--touch);
  min-height: var(--touch);
}

.app-card,
.icon-card,
.action-card,
.stat-card,
.metric-card {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-floating);
}

.card-grid,
.home-apps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-3);
  min-width: 0;
}

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

.card-grid > *,
.home-apps > * {
  min-width: 0;
}

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .app-shell {
    --layout-max: var(--layout-desktop-width);
    --shell-content-max: var(--layout-desktop-width);
  }

  .workspace-header,
  .page-container,
  .app-shell > main {
    width: min(var(--layout-desktop-width), 100%);
    max-width: var(--layout-desktop-width);
    margin-inline: auto;
  }

  .app-shell[data-page-builder='true'] > main,
  .app-shell:has(.sites-canva) > main {
    width: 100%;
    max-width: none;
  }

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

  .form-grid,
  .sa-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-4);
  }

  .form-grid .field[data-as='textarea'],
  .sa-form-grid .field[data-as='textarea'] {
    grid-column: 1 / -1;
  }
}

.workspace-page,
.page-container,
.card-grid,
.record-row,
.list-row {
  max-width: 100%;
}

.record-row,
.list-row {
  min-width: 0;
  overflow-wrap: anywhere;
}

.realestate-enqnew-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.step-progress {
  margin: var(--spacing-2) 0 var(--spacing-3);
  font-size: var(--font-size-body-sm);
  color: var(--color-text-secondary);
}

@media (max-width: 767px) {
  table.responsive-records,
  table.responsive-records tbody,
  table.responsive-records tr {
    display: block;
    width: 100%;
  }

  table.responsive-records thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  table.responsive-records tr {
    margin: 0 0 var(--spacing-3);
    padding: var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-light);
  }

  table.responsive-records td {
    display: grid;
    grid-template-columns: minmax(7rem, 40%) minmax(0, 1fr);
    gap: var(--spacing-2);
    border: 0;
    padding: var(--spacing-1) 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  table.responsive-records td::before {
    content: attr(data-label);
    font-size: var(--font-size-label-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
  }

  .assoc-pl-table-wrap,
  .table-wrap {
    overflow-x: visible;
  }
}

.realestate-owner-new-stepper,
.realestate-reqnew-stepper,
.re-vendnew-stepper,
.re-addlist-stepper,
.realestate-proj-stepper,
.realestate-valnew-stepper,
.sites-product-stepper,
.cat-add-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.realestate-owner-new-stepper button,
.realestate-reqnew-stepper button,
.re-vendnew-stepper button,
.re-addlist-stepper button,
.sites-product-stepper button {
  min-height: var(--touch);
  min-width: var(--touch);
}

table.responsive-records .rec-label {
  display: none;
}

@media (max-width: 767px) {
  table.responsive-records .rec-label {
    display: block;
    font-size: var(--font-size-label-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
  }

  table.responsive-records td::before {
    content: none;
  }
}

.sa-form-head {
  flex-wrap: wrap;
}

.sa-form-titles h1,
.workspace-page-head h1 {
  overflow-wrap: anywhere;
}

.sa-form-titles h1 {
  font-size: var(--font-size-headline-lg);
}

.workspace-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.workspace-page-actions a,
.workspace-page-actions button,
.sa-form-head > a,
.sa-form-head > button,
.sa-form .text-btn {
  min-height: var(--touch);
  display: inline-flex;
  align-items: center;
}

.record-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.record-facts div {
  min-width: 0;
}

.record-facts dt {
  font-size: var(--font-size-label-sm);
  color: var(--color-text-secondary);
}

.record-facts dd {
  margin: 0.15rem 0 0;
  font-size: var(--font-size-body-md);
  overflow-wrap: anywhere;
}

.record-list {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sa-form-steps {
  flex-wrap: wrap;
}

.sa-form-steps li {
  flex: 1 1 8rem;
  min-width: 0;
  min-height: var(--touch);
}

.sa-form-steps li em {
  display: inline;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.org-add-actions {
  flex-wrap: wrap;
}

.org-add-review strong,
.plan-side dd {
  overflow-wrap: anywhere;
  min-width: 0;
}

.org-sort button,
.partner-view-switch button {
  min-height: var(--touch);
}

.partner-view-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.record-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: var(--font-size-label-sm);
  color: var(--color-text-secondary);
}

.sa-form-head > button[aria-label="Back"],
.sa-form-head > a[aria-label="Back"] {
  display: none;
}
/* Platform layout — Super Admin home is the visual SoR.
   Mode A and Mode B (.app-shell / .mode-b-shell) inherit canvas, type, cards, and chrome.
   Loaded last so it wins over module CSS (including crmModeB.css). */

.app-shell {
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family-body);
}

.app-shell.mode-b-shell,
.mode-b-shell {
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family-body);
}

.platform-canvas,
.sunrise-wash {
  pointer-events: none;
  position: absolute;
  inset: 0 0 auto 0;
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  height: 18rem;
  transform: none;
  overflow: visible;
  z-index: 0;
}

.app-shell .sunrise-sun,
.app-shell .sunrise-bird,
.app-shell .sunrise-hills,
.mode-b-shell .sunrise-sun,
.mode-b-shell .sunrise-bird,
.mode-b-shell .sunrise-hills {
  display: none;
}

.app-shell .sunrise-glow,
.mode-b-shell .sunrise-glow {
  background: var(--glow-platform);
}

.app-shell .sunrise-wash,
.app-shell .platform-canvas,
.mode-b-shell .sunrise-wash,
.mode-b-shell .platform-canvas,
.mode-b-shell[data-mode-b='crm'] > .platform-canvas,
.mode-b-shell[data-mode-b='crm'] > .sunrise-wash {
  grid-column: auto;
  grid-row: auto;
  inset: 0 0 auto 0;
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  height: 18rem;
  transform: none;
  overflow: visible;
  z-index: 0;
  pointer-events: none;
}

/* Header — transparent over the canvas, circular actions */
.app-shell > .workspace-header,
.app-shell.mode-b-shell > .workspace-header.mode-b-header,
.app-shell.mode-b-shell > header.mode-b-header,
.mode-b-shell > .workspace-header.mode-b-header,
.mode-b-shell > header.mode-b-header,
.mode-b-shell .workspace-header.mode-b-header {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.mode-b-shell .workspace-header.mode-b-header::after {
  display: none !important;
}

.mode-b-shell .workspace-header.mode-b-header .workspace-brand {
  justify-content: flex-start !important;
  text-align: left !important;
}

.mode-b-shell .workspace-header.mode-b-header .mode-b-title {
  align-items: flex-start !important;
}

.mode-b-shell .workspace-header.mode-b-header .mode-b-title strong {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-headline-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading) !important;
  letter-spacing: -0.02em;
}

.app-shell .header-round,
.mode-b-shell .header-round {
  width: 2.45rem;
  height: 2.45rem;
  min-width: 2.45rem;
  min-height: 2.45rem;
  border-radius: var(--radius-full);
  background: var(--card);
  color: var(--color-text-heading);
  box-shadow:
    8px 6px 20px rgba(37, 99, 235, 0.16),
    14px 10px 28px rgba(125, 211, 252, 0.22);
}

.app-shell .notify-slot .header-round,
.mode-b-shell .notify-slot .header-round {
  position: relative;
}

.app-shell .notify-slot .header-round::after,
.mode-b-shell .notify-slot .header-round::after {
  content: '';
  position: absolute;
  top: 0.12rem;
  right: 0.12rem;
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 50%;
  background: #fb7185;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}

.app-shell .avatar-btn,
.mode-b-shell .avatar-btn,
.mode-b-shell .workspace-header.mode-b-header .user-menu .avatar-btn {
  border-radius: var(--radius-full);
  box-shadow:
    0 0 0 2px #fff,
    12px 10px 26px rgba(37, 99, 235, 0.28),
    22px 14px 42px rgba(96, 165, 250, 0.38) !important;
}

.app-shell .avatar.avatar-monogram,
.app-shell .avatar-monogram,
.mode-b-shell .avatar.avatar-monogram,
.mode-b-shell .avatar-monogram {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.workspace-header .context-slot,
.sa-header-brand .context-slot,
.workspace-header-mode-a .context-slot,
.workspace-header-brand .context-slot {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.workspace-header .context-slot-label,
.workspace-header .context-slot-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.mode-b-shell .workspace-header.mode-b-header .context-slot .context-slot-label,
.mode-b-shell .workspace-header.mode-b-header .context-slot .context-slot-trigger {
  background: transparent !important;
  border: 0 !important;
  color: var(--color-text-heading) !important;
  font-size: 0.98rem;
  font-weight: 600;
  padding: 0 !important;
}

/* Type — navy headings, muted body, Inter */
.app-shell h1,
.app-shell h2,
.app-shell h3,
.app-shell h4,
.mode-b-shell h1,
.mode-b-shell h2,
.mode-b-shell h3,
.mode-b-shell h4,
.home-greeting h1,
.sa-greeting h1,
.sa-form-titles h1,
.mode-b-shell .crm-dash-greeting,
.mode-b-shell .sa-form[data-screen='crm-leads-list'] > .sa-form-head h1 {
  font-family: var(--font-family-heading);
  color: var(--color-text-heading) !important;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.home-greeting h1,
.sa-console .home-greeting h1,
.sa-console .sa-greeting h1 {
  font-size: var(--font-size-display);
  letter-spacing: -0.04em;
  color: var(--color-text-heading) !important;
}

.mode-b-shell .crm-dash-greeting {
  font-size: var(--font-size-display-sm) !important;
  letter-spacing: -0.03em;
}

.sa-greeting-sub,
.home-context,
.home-role,
.muted,
.kicker,
.mode-b-shell .crm-dash-kicker,
.mode-b-shell .crm-dash-sub,
.mode-b-shell .mode-b-footer {
  color: var(--color-text-secondary) !important;
  font-family: var(--font-family-body);
}

.insight-card-ask,
.insight-card-ask strong,
.insight-card-ask .muted,
.insight-card-ask .pict {
  color: #fff !important;
}

.insight-card-ask .muted {
  opacity: 1;
}

.app-shell main,
.mode-b-shell > main,
.mode-b-shell main,
.mode-b-shell #main {
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-md);
}

.mode-b-shell main:has([data-screen='crm-leads-list']) {
  background: transparent !important;
}

/* Cards — 24px radius, pastel category fills, soft shadow */
.icon-card,
.action-card,
.stat-card,
.metric-card,
.login-card,
.hero-card,
.person-card,
.mode-b-shell .crm-dash-hero-card,
.mode-b-shell .crm-dash-kpi,
.mode-b-shell .crm-dash-task,
.mode-b-shell .crm-leads-search,
.mode-b-shell .crm-leads-filters {
  color: var(--color-text);
  border-color: var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

.sa-console .sa-metric .metric-card,
.mode-b-shell .crm-dash-kpi {
  border: 0 !important;
  border-top: 0 !important;
  border-radius: var(--radius-card) !important;
  box-shadow: none;
  min-height: 5.6rem;
}

.mode-b-shell .crm-dash-hero-card {
  background: var(--color-pastel-blue) !important;
  border: 0 !important;
  border-top: 0 !important;
  border-radius: var(--radius-card) !important;
  box-shadow: none !important;
}

.mode-b-shell .crm-dash-hero-card-value,
.mode-b-shell .crm-dash-kpi-value,
.sa-console .sa-metric .metric-card strong {
  font-family: var(--font-family-heading);
  color: var(--color-text-heading) !important;
}

.mode-b-shell .crm-dash-kpi:nth-child(6n + 1) {
  background: var(--color-pastel-blue) !important;
}
.mode-b-shell .crm-dash-kpi:nth-child(6n + 2) {
  background: var(--color-pastel-purple) !important;
}
.mode-b-shell .crm-dash-kpi:nth-child(6n + 3) {
  background: var(--color-pastel-green) !important;
}
.mode-b-shell .crm-dash-kpi:nth-child(6n + 4) {
  background: var(--color-pastel-orange) !important;
}
.mode-b-shell .crm-dash-kpi:nth-child(6n + 5) {
  background: var(--color-pastel-pink) !important;
}
.mode-b-shell .crm-dash-kpi:nth-child(6n) {
  background: var(--color-pastel-sky) !important;
}

.mode-b-shell .crm-dash-kpi-icon,
.mode-b-shell .crm-dash-hero-card-icon {
  border-radius: 0.9rem;
  color: #fff;
}

.sa-console .sa-metric .metric-card .pict {
  border-radius: 50%;
}

.mode-b-shell .crm-dash-kpi:nth-child(6n + 1) .crm-dash-kpi-icon,
.mode-b-shell .crm-dash-hero-card-icon {
  background: var(--color-pastel-blue-ink);
}
.mode-b-shell .crm-dash-kpi:nth-child(6n + 2) .crm-dash-kpi-icon {
  background: var(--color-pastel-purple-ink);
}
.mode-b-shell .crm-dash-kpi:nth-child(6n + 3) .crm-dash-kpi-icon {
  background: var(--color-pastel-green-ink);
}
.mode-b-shell .crm-dash-kpi:nth-child(6n + 4) .crm-dash-kpi-icon {
  background: var(--color-pastel-orange-ink);
}

.mode-b-shell .crm-dash-section-head h3,
.mode-b-shell .crm-dash-task-copy strong,
.mode-b-shell .crm-lead-section-title {
  font-family: var(--font-family-heading);
  color: var(--color-text-heading) !important;
}

.primary-btn,
.sa-form .primary-btn,
.mode-b-shell .crm-leads-btn.primary,
.sa-form[data-screen^='marketing-'] .primary-btn,
.sa-form[data-screen^='association-'] .primary-btn {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--color-on-primary);
  font-family: var(--font-family-body);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 28%, transparent);
}

.mode-b-shell .crm-leads-btn.secondary {
  background: var(--card);
  color: var(--color-pastel-blue-ink);
  border-color: #93c5fd;
  border-radius: var(--radius-lg);
}

.mode-b-shell .crm-leads-icon-btn {
  border-radius: var(--radius-full);
  background: var(--card);
  color: var(--color-text-secondary);
  border-color: var(--line);
}

/* Mode B dock — same white pill as Super Admin bottom nav */
.mode-b-shell > .mode-b-nav,
.mode-b-shell .mode-b-nav,
.mode-b-shell:not([data-mode-b='crm']) .mode-b-nav {
  background: var(--card) !important;
  border: 0 !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1) !important;
}

.mode-b-shell .mode-b-nav .mode-b-nav-item {
  color: var(--color-text-secondary);
  font-family: var(--font-family-body);
}

.mode-b-shell .mode-b-nav .mode-b-nav-item.active {
  background: color-mix(in srgb, var(--color-primary) 12%, #fff);
  color: var(--color-primary);
}

.mode-b-shell .mode-b-subnav {
  background: transparent;
  border-top-color: var(--line);
}

.mode-b-shell .mode-b-subnav-item {
  color: var(--color-text-secondary);
}

.mode-b-shell .mode-b-subnav-item.is-on,
.mode-b-shell .mode-b-subnav-item:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.mode-b-shell .page-container {
  color: var(--color-text);
}

.login-screen {
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family-body);
}

.bp-profile-card h3 svg {
  color: #2563eb !important;
  flex-shrink: 0;
}

.home-apps,
.home-metrics-grid,
.quick-grid,
.workspace-home {
  width: 100%;
  min-width: 0;
}

.home-apps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

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

.workspace-home .app-card:not(.app-card-action) {
  min-width: 0;
}

@media (min-width: 800px) {
  .home-apps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

/* Home / shell: white page. Today cards keep pastel fills. */
html,
body,
.app-shell,
.app-shell[data-workspace='platform'],
.app-shell:has(.sa-console),
.sa-console {
  background: #ffffff !important;
}

.platform-canvas,
.sunrise-wash,
.sunrise-glow {
  display: none !important;
  background: none !important;
}


/* Association: keep the header above the cards and the dock off the last row. */
.mode-b-shell[data-mode-b='association'] > .workspace-header {
  position: relative !important;
  background: #f7f8fb !important;
  z-index: 5;
}
.mode-b-shell[data-mode-b='association'] > main {
  padding-top: 0.5rem !important;
  padding-bottom: calc(8.5rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* Association uses the platform content width. */
/* Workspace icon wells: tinted discs on white cards. */
.workspace-home .app-card:not(.app-card-action) .pict {
  background: linear-gradient(165deg, #f4f8ff 0%, #dbe7ff 100%);
  color: #1d4ed8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(37, 99, 235, 0.12), 0 8px 16px rgba(37, 99, 235, 0.12);
}
.workspace-home .app-card[data-app=crm]:not(.app-card-action) .pict,
.workspace-home .app-card[data-app=association]:not(.app-card-action) .pict {
  background: linear-gradient(165deg, #eef4ff 0%, #c5d9ff 100%);
  color: #1d4ed8;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(37, 99, 235, 0.16), 0 8px 16px rgba(37, 99, 235, 0.14);
}
.workspace-home .app-card[data-app=avatar]:not(.app-card-action) .pict,
.workspace-home .app-card[data-app=lms]:not(.app-card-action) .pict {
  background: linear-gradient(165deg, #f5f3ff 0%, #ddd6fe 100%);
  color: #6d28d9;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(109, 40, 217, 0.16), 0 8px 16px rgba(109, 40, 217, 0.14);
}
.workspace-home .app-card[data-app=sites]:not(.app-card-action) .pict,
.workspace-home .app-card[data-app=workforce]:not(.app-card-action) .pict {
  background: linear-gradient(165deg, #ecfdf5 0%, #a7f3d0 100%);
  color: #047857;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(5, 150, 105, 0.16), 0 8px 16px rgba(5, 150, 105, 0.14);
}
.workspace-home .app-card[data-app=marketing]:not(.app-card-action) .pict,
.workspace-home .app-card[data-app=realestate]:not(.app-card-action) .pict {
  background: linear-gradient(165deg, #fff7ed 0%, #fdba74 100%);
  color: #c2410c;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(234, 88, 12, 0.16), 0 8px 16px rgba(234, 88, 12, 0.14);
}
.workspace-home .app-card[data-app=builder]:not(.app-card-action) .pict {
  background: linear-gradient(165deg, #eef2ff 0%, #c7d2fe 100%);
  color: #4338ca;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(67, 56, 202, 0.16), 0 8px 16px rgba(67, 56, 202, 0.14);
}
.workspace-home .app-card[data-app=events]:not(.app-card-action) .pict,
.workspace-home .app-card[data-app=catering]:not(.app-card-action) .pict {
  background: linear-gradient(165deg, #fdf2f8 0%, #f9a8d4 100%);
  color: #be185d;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(219, 39, 119, 0.16), 0 8px 16px rgba(219, 39, 119, 0.14);
}
.workspace-home .app-card[data-app=planner]:not(.app-card-action) .pict,
.workspace-home .app-card[data-app=freelance]:not(.app-card-action) .pict {
  background: linear-gradient(165deg, #f0fdfa 0%, #99f6e4 100%);
  color: #0f766e;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(13, 148, 136, 0.16), 0 8px 16px rgba(13, 148, 136, 0.14);
}
.workspace-home .app-card[data-app=projects]:not(.app-card-action) .pict {
  background: linear-gradient(165deg, #f0f9ff 0%, #bae6fd 100%);
  color: #0369a1;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(2, 132, 199, 0.16), 0 8px 16px rgba(2, 132, 199, 0.14);
}
.workspace-home .app-card[data-app=workflow]:not(.app-card-action) .pict,
.workspace-home .app-card[data-app=hostel]:not(.app-card-action) .pict {
  background: linear-gradient(165deg, #fffbeb 0%, #fcd34d 100%);
  color: #b45309;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(217, 119, 6, 0.16), 0 8px 16px rgba(217, 119, 6, 0.14);
}
.workspace-home .app-card[data-app=communication]:not(.app-card-action) .pict,
.workspace-home .app-card[data-app=messages]:not(.app-card-action) .pict {
  background: linear-gradient(165deg, #fdf4ff 0%, #f0abfc 100%);
  color: #a21caf;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(192, 38, 211, 0.16), 0 8px 16px rgba(192, 38, 211, 0.14);
}
.workspace-home .app-card[data-app=tasks]:not(.app-card-action) .pict {
  background: linear-gradient(165deg, #f0fdf4 0%, #86efac 100%);
  color: #15803d;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(22, 163, 74, 0.16), 0 8px 16px rgba(22, 163, 74, 0.14);
}
.workspace-home .app-card[data-app=calendar]:not(.app-card-action) .pict {
  background: linear-gradient(165deg, #fff1f2 0%, #fda4af 100%);
  color: #e11d48;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(244, 63, 94, 0.16), 0 8px 16px rgba(244, 63, 94, 0.14);
}
.workspace-home .app-card[data-app=analytics]:not(.app-card-action) .pict {
  background: linear-gradient(165deg, #ecfeff 0%, #a5f3fc 100%);
  color: #0e7490;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(6, 182, 212, 0.16), 0 8px 16px rgba(6, 182, 212, 0.14);
}

.appearance-logo-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.appearance-logo-preview {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
  border-radius: 0.85rem;
  background: #f4f7fb;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}
.appearance-logo-pick,
.appearance-logo-clear {
  border: 0;
  border-radius: 999px;
  min-height: 2.5rem;
  padding: 0 0.95rem;
  font-weight: 650;
  cursor: pointer;
}
.appearance-logo-pick {
  background: #0055ff;
  color: #fff;
}
.appearance-logo-clear {
  background: #eef2f7;
  color: #334155;
}

.crm-top-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: 100%;
  margin: 0 0 0.65rem;
}
.crm-top-menu a {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}
.crm-top-menu a.is-active {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

/* CRM: scroll still works; the bar stays hidden. */
html:has([data-screen^="crm-"]),
html:has([data-screen^="crm-"]) body,
.app-shell:has([data-screen^="crm-"]) {
  overflow-x: hidden !important;
  scrollbar-width: none !important;
}
.app-shell:has([data-screen^="crm-"])::-webkit-scrollbar,
.app-shell:has([data-screen^="crm-"]) *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
.app-shell:has([data-screen^="crm-"]) .crm-item-groups,
.app-shell:has([data-screen^="crm-"]) .crm-item-group,
.app-shell:has([data-screen^="crm-"]) .crm-leads-list,
.app-shell:has([data-screen^="crm-"]) .crm-act-page {
  max-width: 100%;
  overflow-x: hidden;
}

.context-slot-trigger { min-height: 44px; min-width: 44px; }
.context-slot-label, .context-slot-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70vw; }
.choice { min-height: 44px; }
.context-slot-filter { width: 100%; min-height: 44px; margin-bottom: 8px; }
.context-slot-status { margin: 8px 0 0; }

button.app-card { min-height: 44px; min-width: 44px; }

/* Launcher grids match Your Workspace: compact centered tiles, 3 columns on a wide screen. */
.launcher-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
}
@media (min-width: 800px) {
  .launcher-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.launcher-grid > .app-card:not(.app-card-action),
.launcher-grid > .icon-card,
.launcher-grid > button.icon-card {
  position: relative;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 7.1rem;
  min-width: 0;
  padding: 1rem 0.4rem 1.05rem;
  border: 0;
  border-radius: 1.5rem;
  background: #fff;
  box-shadow: 0 10px 22px rgba(16, 32, 48, 0.055);
}
.launcher-grid > .app-card:not(.app-card-action) .pict,
.launcher-grid > .icon-card .pict,
.launcher-grid > button.icon-card .pict {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
}
.launcher-grid > .app-card strong,
.launcher-grid > .icon-card strong,
.launcher-grid > button.icon-card strong {
  font-size: 0.88rem;
  font-weight: 700;
}

/* The drawn circle stays 2.45rem; the hit area grows to at least 44px. */
.header-round[aria-label='Back'] {
  position: relative;
  z-index: 1;
}

.header-round[aria-label='Back']::before {
  content: '';
  position: absolute;
  inset: min(0px, calc((100% - 44px) / 2));
}
:root { --ui-canvas: #f7f8ff; --ui-surface: #fff; --ui-subtle: #eef1fc; --ui-text: #14234b; --ui-muted: #596888; --ui-border: #e5e9f5; }
html:not([data-color-mode="dark"]):has(.app-shell[data-ui-framework="tailwind-shadcn"]) {
 --ui-canvas: #fff !important;
}
/* Display mode controls contrast; saved business branding still controls accents. */
html[data-color-mode="dark"]:has(.app-shell[data-ui-framework="tailwind-shadcn"]) {
 --ui-canvas:#080e1b !important;
 --ui-surface:#10182a !important;
 --ui-text:#f1f4ff !important;
 --ui-heading:#f1f4ff !important;
 --ui-muted:#a5b2d0 !important;
}
html[data-color-mode="dark"] body .app-shell[data-ui-framework="tailwind-shadcn"],
html[data-color-mode="dark"] body .app-shell[data-ui-framework="tailwind-shadcn"] > main,
html[data-color-mode="dark"] body .app-shell[data-ui-framework="tailwind-shadcn"] .page-container {
 background:var(--ui-canvas) !important;
 color:var(--ui-text) !important;
}
.app-shell[data-ui-framework="tailwind-shadcn"] > .association-sticky-chrome {
 position:sticky; top:0; z-index:40; flex-shrink:0;
 width:min(900px,100%); margin-inline:auto; background:var(--ui-surface);
}
.app-shell[data-ui-framework="tailwind-shadcn"] .association-sticky-chrome .workspace-header { margin-block:0; }
.app-shell[data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation {
 gap:0; padding:0 !important; border:0; border-bottom:1px solid var(--ui-border);
 border-radius:0; background:var(--ui-surface); flex-wrap:nowrap !important;
}
.app-shell[data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item {
 min-height:40px; flex:1 1 0; padding:8px 10px; gap:6px; border-radius:0;
 border-bottom:2px solid transparent; font-size:13px; font-weight:500; white-space:nowrap;
}
.app-shell[data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item.active {
 color:#2563eb !important; background:transparent !important; border-bottom-color:#2563eb; font-weight:600;
}
.app-shell[data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .mode-b-nav-icon { display:inline-flex; color:inherit; }
@media(max-width:640px) {
 .app-shell[data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item { min-height:44px; padding:7px 4px; font-size:11px; gap:4px; }
}
html[data-theme="ocean"]:has(.app-shell[data-ui-framework="tailwind-shadcn"]) { --appearance-primary:#0f766e; }
html[data-theme="forest"]:has(.app-shell[data-ui-framework="tailwind-shadcn"]) { --appearance-primary:#15803d; }
html[data-theme="dusk"]:has(.app-shell[data-ui-framework="tailwind-shadcn"]) { --appearance-primary:#6d28d9; }
html[data-theme="slate"]:has(.app-shell[data-ui-framework="tailwind-shadcn"]) { --appearance-primary:#334155; }
.app-shell[data-ui-framework="tailwind-shadcn"] { padding-top:0 !important; }
.app-shell[data-ui-framework="tailwind-shadcn"] > .skip {
 position:absolute;
 z-index:60;
}
.app-shell[data-ui-framework="tailwind-shadcn"] .workspace-header.enterprise-header.unified-header {
 margin-top:0 !important;
}
.app-shell[data-ui-framework="tailwind-shadcn"] > .mode-b-chrome {
 margin-top:0 !important;
 padding-top:0 !important;
}
/* Keep shared navigation visible while the workspace scrolls. */
.app-shell[data-ui-framework="tailwind-shadcn"] > .workspace-header.enterprise-header.unified-header {
 position: sticky !important;
 top: 0;
 z-index: 40;
 background: var(--ui-surface) !important;
}
/* Brand theme and palette remain independent of the personal display mode. */
html[data-color-mode="dark"] { --ui-canvas: #080e1b; --ui-surface: #10182a; --ui-subtle: #19243c; --ui-text: #f1f4ff; --ui-muted: #a5b2d0; --ui-border: #222d47; }
/* Frozen PageBuilder canvas receives no overrides from this stylesheet. */
body:not(:has([data-page-builder="true"])) { background: var(--ui-canvas); color: var(--ui-text); color-scheme: light; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) {
 color-scheme: dark;
 --color-background: var(--ui-canvas); --color-bg-main: var(--ui-canvas); --bg: var(--ui-canvas);
 --card: var(--ui-surface); --color-surface: var(--ui-surface); --color-surface-light: var(--ui-surface);
 --color-surface-container: var(--ui-subtle); --color-surface-container-low: var(--ui-subtle); --color-surface-variant: var(--ui-subtle);
 --ink: var(--ui-text); --color-text: var(--ui-text); --color-text-heading: var(--ui-text); --color-on-surface: var(--ui-text); --color-on-background: var(--ui-text);
 --muted: var(--ui-muted); --color-text-secondary: var(--ui-muted); --color-on-surface-variant: var(--ui-muted);
 --line: var(--ui-border); --color-border: var(--ui-border); --color-outline-variant: var(--ui-border);
}
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.app-shell,.page-container,.sa-form,.sa-form-body) { background: var(--ui-canvas) !important; color: var(--ui-text) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.card,.stat-card,.metric-card,.app-card,.action-card,.insight-card,.platform-health,.platform-activity,.home-workspace,.crm-dash-section,.crm-dash-kpi,.crm-dash-hero-card,.sheet,.modal,.dialog,.dropdown-portal,.user-menu-panel,.bottom-sheet,.table-wrap,.record-card,.sa-form-head,.health-services li) { background: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; box-shadow: none !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(h1,h2,h3,h4,.metric-card-copy strong,.app-card strong,.crm-dash-kpi-value,.crm-dash-hero-card-value) { color: var(--ui-text) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.muted,.metric-card-label,.metric-card-hint,.sa-greeting-sub,.sa-redesign-eyebrow,.enterprise-workspace-label,.crm-dash-sub,.crm-dash-hero-card-label,.crm-dash-trend,.crm-dash-kpi-label) { color: var(--ui-muted) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(input,select,textarea,th,td) { background-color: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) input::placeholder, html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) textarea::placeholder { color: var(--ui-muted); }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.bottom-nav,.mode-b-nav,.crm-section-menu,.health-row,.pict) { background: var(--ui-subtle) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) .platform-canvas { display: none; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.workspace-home,.sa-hero,.home-greeting,.sa-greeting,.sa-metrics,.home-metrics,.home-metrics-grid,.sa-greeting-copy) { background: transparent !important; color: var(--ui-text) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.panel,.list-card,.detail-card,.form-card,.toolbar,.search-box,.filter-bar,.empty-state,.loading-state,.notification-panel,.switch-profile,.switch-profile-head,.switch-profile-footer,.switch-profile-item) { background: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
.app-shell .enterprise-header.enterprise-header { background: var(--ui-surface) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.switch-profile-row,.switch-profile-search,.switch-profile-head,.switch-profile-foot,.sheet-head,.sheet-body) { background: var(--ui-surface) !important; border-color: var(--ui-border) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.switch-profile-who strong,.switch-profile-copy strong,.switch-profile-action,.switch-profile-section,.sheet-head h2,.dropdown-portal strong) { color: var(--ui-text) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.switch-profile-who span,.switch-profile-copy em,.switch-profile-copy span) { color: var(--ui-muted) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) .switch-profile-row[aria-current] { background: var(--ui-subtle) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) .switch-profile-logout { color: #ff9a9a !important; }
html[data-color-mode="dark"] .enterprise-header .workspace-brand img { background: #fff; padding: 4px; border-radius: 4px; }
/* Compatibility layer for existing module surfaces until their visual migration. */
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is([class$="-card"],[class$="-panel"],[class$="-toolbar"],[class$="-table"],[class$="-dialog"],[class$="-modal"],[class$="-filters"],[class$="-form"],[class$="-list"]):not(.overlay) { background-color: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(label,legend,caption,dt,dd,th,td,.field-label,.form-label,.record-title,.record-name,.section-title,.sheet-title,.dialog-title) { color: var(--ui-text) !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.secondary-btn,.outline-btn,.icon-btn,.icon-ghost,.nav-item,.tab,.tabs button,.tabs a) { background-color: var(--ui-subtle); color: var(--ui-text); border-color: var(--ui-border); }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.error,.field-error,.validation-error) { color: #ffabab; }
html[data-color-mode="dark"] .enterprise-header .workspace-brand img { mix-blend-mode: normal !important; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) { --color-link: #91b9ff; --brand-ink: #91b9ff; }
html[data-color-mode="dark"] body:not(:has([data-page-builder="true"])) :is(.sa-section-link,.crm-dash-view-all,.switch-profile-all,.text-link) { color: #91b9ff !important; }
/* Reference palette shared by the application shell, excluding frozen editors. */
body:has(.app-shell[data-ui-framework="tailwind-shadcn"]):not(:has([data-page-builder="true"])) {
 --color-primary:var(--appearance-primary,#4264ff); --color-on-primary:var(--appearance-on-primary,#fff);
 --color-background:var(--ui-canvas); --color-bg-main:var(--ui-canvas); --bg:var(--ui-canvas);
 --card:var(--ui-surface); --color-surface:var(--ui-surface); --color-surface-light:var(--ui-surface);
 --color-text:var(--ui-text); --color-text-heading:var(--ui-heading,var(--ui-text)); --ink:var(--ui-text);
 --color-text-secondary:var(--ui-muted); --muted:var(--ui-muted);
 --color-border:var(--ui-border); --line:var(--ui-border);
}
/* Common workspace presentation. Only the Mode A shell opts in; frozen editors,
   public sites and standalone module shells receive none of these overrides.
   Important component-layer declarations bridge inherited module/utility CSS. */
@layer components {
  :where(.app-shell,.overlay)[data-design-system="common"] {
    --ui-radius-card: 12px;
    --ui-radius-control: 10px;
    --ui-space-section: 20px;
    --ui-accent: var(--color-primary, #4264ff);
    --ui-accent-soft: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface));
    color: var(--ui-text);
    font-family: var(--font-family-body, ui-sans-serif, system-ui, sans-serif);
  }
  html[data-color-mode="dark"] :where(.app-shell,.overlay)[data-design-system="common"] {
    --ui-accent: color-mix(in srgb, var(--color-primary, #4264ff) 65%, white);
  }
  html[data-color-mode="dark"] .app-shell[data-design-system="common"] .workspace-header .logo-img {
    background: #fff !important; border-radius: 6px; padding: 4px; mix-blend-mode: normal !important;
  }
  .app-shell[data-design-system="common"] .page-container {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    min-width: 0;
  }
  .app-shell[data-design-system="common"] .sa-form {
    box-sizing: border-box; width: 100%; min-width: 0;
    padding: 12px 0 24px !important; gap: var(--ui-space-section) !important;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
  }
  .app-shell[data-design-system="common"] .sa-form > .sa-form-head {
    display: flex; flex-wrap: wrap !important; align-items: center !important;
    gap: 12px !important; min-height: 48px; padding: 0 !important; margin: 0 !important;
    border: 0 !important; background: transparent !important;
  }
  .app-shell[data-design-system="common"] .sa-form-titles {
    flex: 1 1 160px !important; min-width: min(160px,100%) !important;
  }
  .app-shell[data-design-system="common"] .sa-form-titles h1 {
    margin: 0 !important; font-size: 26px !important; font-weight: 650 !important;
    line-height: 1.25 !important; letter-spacing: -.6px; color: var(--ui-text) !important;
    overflow-wrap: anywhere;
  }
  .app-shell[data-design-system="common"] .sa-form-titles p {
    margin: 6px 0 0 !important; font-size: 14px !important; line-height: 1.5;
    color: var(--ui-muted) !important;
  }
  .app-shell[data-design-system="common"] .sa-form-pict {
    width: 40px !important; height: 40px !important; flex: 0 0 40px;
    border-radius: 10px !important; box-shadow: none !important;
    background: var(--ui-accent-soft) !important; color: var(--ui-accent) !important;
  }
  .app-shell[data-design-system="common"] .header-back-cluster {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0;
    color: var(--ui-muted); font-size: 13px;
  }
  .app-shell[data-design-system="common"] .sa-form > .sa-form-body {
    box-sizing: border-box; width: 100% !important; min-width: 0;
    padding: 0 !important; margin: 0 !important; gap: var(--ui-space-section) !important;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
  }
  /* Shared components plus explicit adapters for established module surfaces.
     Do not use suffix selectors: they would capture charts and editor widgets. */
  .app-shell[data-design-system="common"] :is(
    .ui-card,.card,.action-card,.stat-card,.metric-card,.insight-card,.record-card,.form-card,.panel,
    .proj-dash-card,.proj-dash-board,.mkt-hero,.marketing-channel,.marketing-pack-drawer,
    .hostel-kpi,.hostel-panel,.realestate-kpi,.realestate-dash-panel,
    .cat-home-kpi,.cat-home-block,.assoc-md-card,.more-admin-card,
    .cx-screen-card,.cx-home-card,.rec-panel,.rec-job-card
  ) {
    border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-card) !important;
    background: var(--ui-surface) !important; color: var(--ui-text) !important;
    box-shadow: none !important; min-width: 0; box-sizing: border-box;
  }
  .app-shell[data-design-system="common"] :is(.metric-card,.stat-card,.proj-dash-card,.hostel-kpi,.realestate-kpi,.cat-home-kpi) {
    padding: 20px !important;
  }
  .app-shell[data-design-system="common"] :is(.metric-card-copy strong,.proj-dash-card strong,.hostel-kpi strong,.realestate-kpi strong,.cat-home-kpi strong) {
    color: var(--ui-text) !important; font-variant-numeric: tabular-nums;
  }
  .app-shell[data-design-system="common"] .mkt-steps > li {
    border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-card) !important;
    background: var(--ui-surface) !important; color: var(--ui-text) !important; box-shadow: none !important;
  }
  .app-shell[data-design-system="common"] .mkt-steps {
    background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important;
  }
  .app-shell[data-design-system="common"] :is(.mkt-hero p,.proj-dash-head p,.proj-dash-card em) { color: var(--ui-muted) !important; }
  .app-shell[data-design-system="common"] .mkt-hero-actions > a {
    display: inline-flex; align-items: center; min-height: 44px !important; padding: 8px 12px !important;
    border-radius: var(--ui-radius-control) !important; box-sizing: border-box;
    background: var(--ui-accent-soft) !important; color: var(--ui-accent) !important; border: 1px solid var(--ui-border) !important;
  }
  .app-shell[data-design-system="common"] :is(.app-card,.icon-card) {
    border-radius: var(--ui-radius-card) !important; padding: 20px 16px !important;
    min-width: 0; height: auto !important; min-height: 112px;
    text-decoration: none; transition: border-color 150ms ease, background-color 150ms ease;
  }
  .app-shell[data-design-system="common"] :is(.app-card,.icon-card):is(a,button):hover {
    border-color: var(--ui-accent) !important; background: var(--ui-accent-soft) !important;
  }
  .app-shell[data-design-system="common"] :is(.app-card,.icon-card) strong { font-size: 14px !important; line-height: 1.4; color: var(--ui-text) !important; }
  .app-shell[data-design-system="common"] :is(.app-card,.icon-card) em { color: var(--ui-muted) !important; font-size: 12px !important; }
  .app-shell[data-design-system="common"] .launcher-grid {
    display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 12px !important;
  }
  .app-shell[data-design-system="common"] .more-admin-copy strong { color: var(--ui-text) !important; }
  .app-shell[data-design-system="common"] :is(.app-card,.icon-card,.metric-card) > .pict {
    width: 40px !important; height: 40px !important; border-radius: 10px !important;
    background: var(--ui-accent-soft) !important; color: var(--ui-accent) !important; box-shadow: none !important;
  }
  .app-shell[data-design-system="common"] :is([data-slot="button"],.primary-btn,.secondary-btn,.outline-btn,.text-btn) {
    min-height: 44px !important; border-radius: var(--ui-radius-control) !important;
    box-shadow: none !important; line-height: 1.4; white-space: normal;
  }
  .app-shell[data-design-system="common"] :is(.icon-btn,.icon-ghost,.assoc-md-act,.spc-picto) {
    min-width: 44px !important; min-height: 44px !important; box-shadow: none !important;
  }
  /* Text actions keep one predictable width, including in flex/grid forms.
     Icon controls and navigation retain their own sizing. */
  :where(.app-shell,.overlay)[data-design-system="common"] :is(
    [data-slot="button"]:not([data-size="icon"]),
    .primary-btn,.secondary-btn,.outline-btn,.text-btn,.crm-leads-btn
  ):not(.icon-btn,.icon-ghost,.assoc-md-act,.spc-picto,[data-size="icon"]) {
    box-sizing: border-box !important;
    display: inline-flex !important;
    width: 200px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    justify-self: start !important;
    align-items: center;
    justify-content: center;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .app-shell[data-design-system="common"] :is(.crm-leads-btn,.crm-leads-icon-btn,.crm-leads-search-toggle) {
    min-width: 44px !important; min-height: 44px !important; border-radius: var(--ui-radius-control) !important;
    box-shadow: none !important;
  }
  .app-shell[data-design-system="common"] .crm-leads-btn.primary { background: var(--color-primary) !important; color: var(--color-on-primary) !important; }
  .app-shell[data-design-system="common"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),select,textarea) {
    min-width: 0; max-width: 100%; border-radius: var(--ui-radius-control) !important;
    min-height: 44px !important; font-size: 14px;
  }
  .app-shell[data-design-system="common"] :is(button,a,input,select,textarea,summary):focus-visible {
    outline: 2px solid var(--ui-accent) !important; outline-offset: 3px;
  }
  .app-shell[data-design-system="common"] :is(.common-module-navigation,.module-navigation) {
    display: flex !important; flex-wrap: nowrap !important; gap: 4px !important;
    padding: 4px !important; border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-card) !important; background: var(--ui-surface) !important;
    width: 100% !important; box-sizing: border-box;
  }
  .app-shell[data-design-system="common"] :is(.common-module-navigation,.module-navigation) > a {
    flex: 1 1 0 !important; min-width: 0; min-height: 44px !important;
    border: 0 !important; border-radius: 8px !important; font-weight: 500;
    color: var(--ui-muted) !important; text-decoration: none;
  }
  .app-shell[data-design-system="common"] :is(.common-module-navigation,.module-navigation) > a:is([aria-current="page"],.active,.is-active) {
    color: var(--ui-accent) !important; background: var(--ui-accent-soft) !important; font-weight: 650;
  }
  /* Existing contextual destinations are retained; specialist RE menu is untouched. */
  .app-shell[data-design-system="common"] :is(.comm-chip,.rec-tabs > a) {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px !important; padding: 8px 12px !important; border-radius: 8px !important;
    border: 0 !important; background: transparent !important; color: var(--ui-muted) !important;
    box-shadow: none !important; font-size: 13px !important; text-decoration: none;
  }
  .app-shell[data-design-system="common"] :is(.comm-chip.is-on,.rec-tabs > a[aria-current="page"]) {
    background: var(--ui-accent-soft) !important; color: var(--ui-accent) !important;
  }
  .app-shell[data-design-system="common"] :is(.comm-chrome,.hostel-chips,.rec-tabs) { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
  .app-shell[data-design-system="common"] .bottom-nav {
    background: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important;
    box-shadow: none !important;
  }
  .app-shell[data-design-system="common"] .bottom-nav .nav-item { min-height: 48px; border-radius: 10px !important; color: var(--ui-muted) !important; }
  .app-shell[data-design-system="common"] .bottom-nav .nav-item.active { color: var(--ui-accent) !important; background: var(--ui-accent-soft) !important; }
  .app-shell[data-design-system="common"] :is(.record-list,.data-list) { padding: 0 !important; list-style: none; gap: 10px !important; }
  .app-shell[data-design-system="common"] :is(.record-list,.data-list) > li {
    border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-card) !important;
    background: var(--ui-surface) !important; color: var(--ui-text) !important; padding: 12px !important; min-width: 0;
  }
  .app-shell[data-design-system="common"] :is(.record-list,.data-list) > li > a { min-width: 0; overflow-wrap: anywhere; }
  .app-shell[data-design-system="common"] table.responsive-records { border-radius: var(--ui-radius-card) !important; }
  .app-shell[data-design-system="common"] :is(.empty-state,.error-state) {
    border-radius: var(--ui-radius-card) !important; color: var(--ui-text) !important;
    background: var(--ui-surface) !important; border: 1px solid var(--ui-border); padding: 24px;
  }
  .app-shell[data-design-system="common"] :is(.assoc-md-card,.assoc-md-toolbar) { gap: 12px; }
  .app-shell[data-design-system="common"] :is(.proj-dash-head,.cat-list-head) { gap: 12px; flex-wrap: wrap; }
  .app-shell[data-design-system="common"] :is(.proj-dash-head h1,.cat-list-head h1) { color: var(--ui-text); font-size: 26px; letter-spacing: -.6px; }
  .app-shell[data-design-system="common"] :is(.proj-dash-row,.proj-draft-row,.cat-home-event-row) { border-color: var(--ui-border) !important; color: var(--ui-text) !important; }
  .overlay[data-design-system="common"] > :is(.sheet,.modal) {
    border: 1px solid var(--ui-border) !important; border-radius: 16px !important;
    background: var(--ui-surface) !important; color: var(--ui-text) !important;
    max-width: calc(100vw - 32px) !important; max-height: calc(100dvh - 32px) !important;
    overflow-y: auto; box-sizing: border-box;
  }
  .overlay[data-design-system="common"] > .modal { max-width: min(512px,calc(100vw - 32px)) !important; }
  .overlay[data-design-system="common"] :is(.sheet-head,.modal-head) {
    display: flex !important; align-items: center; flex-wrap: wrap; gap: 12px;
  }
  .overlay[data-design-system="common"] .sheet-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; }
  .overlay[data-design-system="common"] .sheet-head > button { min-width: 44px; min-height: 44px; }
  @media (max-width: 767px) {
    .app-shell[data-design-system="common"] .sa-form-titles h1 { font-size: 24px !important; }
    .app-shell[data-design-system="common"] :is(.common-module-navigation,.module-navigation) > a {
      flex-direction: column !important; gap: 4px !important; padding: 8px 2px !important;
      font-size: 11px !important; line-height: 1.4; text-align: center; overflow-wrap: anywhere;
    }
    .app-shell[data-design-system="common"] :is(.stats-grid,.metrics-grid,.kpi-grid,.home-metrics-grid,.proj-dash-cards,.hostel-kpis,.realestate-kpis,.cat-home-kpis,.cx-demo-metrics,.cx-bill-metrics) {
      display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important;
      gap: 12px !important; min-width: 0;
    }
    .app-shell[data-design-system="common"] :is(.metric-card,.stat-card,.proj-dash-card,.hostel-kpi,.realestate-kpi,.cat-home-kpi) { padding: 16px !important; }
    .app-shell[data-design-system="common"] :is(.proj-dash-board,.mkt-hero,.hostel-panel,.realestate-dash-panel,.cat-home-block) { padding: 16px !important; }
    .app-shell[data-design-system="common"] .header-back-cluster { flex-basis: 100%; }
    .app-shell[data-design-system="common"] :is(.proj-dash-row-main,.record-list strong,.data-list strong) { overflow-wrap: anywhere; min-width: 0; }
    .app-shell[data-design-system="common"] :is([data-slot="input"]:not([type="checkbox"]):not([type="radio"]),[data-slot="textarea"],select),
    .overlay[data-design-system="common"] :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { font-size: 16px !important; }
  }
  @media (max-width: 359px) {
    .app-shell[data-design-system="common"] .realestate-kpis { grid-template-columns: minmax(0,1fr) !important; }
  }
  @media (min-width: 768px) {
    .app-shell[data-design-system="common"] .launcher-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    .app-shell[data-design-system="common"] :is(.app-card,.icon-card) { transition: none; }
  }
}