.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; }
  }
}
/* Platform UI tokens — Super Admin home is the visual SoR for Mode A and Mode B.
   JEEMA blue is brand. Pastels are category accents only. Legacy aliases keep modules in sync. */

:root {
  /* Canvas */
  --color-background: #ffffff;
  --color-on-background: #1e293b;
  --color-surface: #ffffff;
  --color-surface-dim: #e8eef6;
  --color-surface-bright: #ffffff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f8fafc;
  --color-surface-container: #eef2f7;
  --color-surface-container-high: #e8eef6;
  --color-surface-container-highest: #dbeafe;
  --color-surface-variant: #e8eef6;
  --color-on-surface: #1e293b;
  --color-on-surface-variant: #64748b;
  --color-inverse-surface: #1e293b;
  --color-inverse-on-surface: #f8fafc;
  --color-outline: #94a3b8;
  --color-outline-variant: #e2e8f0;
  --color-surface-tint: #2563eb;

  /* Brand — JEEMA blue (#0022AA–#0055FF) */
  --color-primary: #0055ff;
  --color-on-primary: #ffffff;
  --color-primary-container: #2563eb;
  --color-on-primary-container: #dbeafe;
  --color-inverse-primary: #93c5fd;
  --color-secondary: #2563eb;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #3b82f6;
  --color-on-secondary-container: #eff6ff;
  --color-tertiary: #7c3aed;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #8b5cf6;
  --color-on-tertiary-container: #ede9fe;
  --color-error: #dc2626;
  --color-on-error: #ffffff;
  --color-error-container: #fee2e2;
  --color-on-error-container: #991b1b;

  /* Application (light) */
  --color-bg-main: #f8fafc;
  --color-bg-dark: #0b1020;
  --color-surface-light: #ffffff;
  --color-surface-dark: #172033;
  --color-border: #e2e8f0;
  --color-border-dark: #273449;
  --color-text: #1e293b;
  --color-text-secondary: #64748b;
  --color-text-heading: #1a2b4b;
  --color-link: #2563eb;
  --color-border-variant: #e2e8f0;

  --color-success: #16a34a;
  --color-warning: #ea580c;
  --color-info: #2563eb;
  --color-ai: #7c3aed;
  --color-module-crm: #2563eb;
  --color-module-web: #059669;
  --color-module-marketing: #ea580c;
  --color-module-ai: #7c3aed;
  --color-module-billing: #16a34a;

  /* Category pastels (cards / icons only) */
  --color-pastel-blue: #dbeafe;
  --color-pastel-blue-ink: #2563eb;
  --color-pastel-purple: #ede9fe;
  --color-pastel-purple-ink: #7c3aed;
  --color-pastel-green: #d1fae5;
  --color-pastel-green-ink: #059669;
  --color-pastel-orange: #ffedd5;
  --color-pastel-orange-ink: #ea580c;
  --color-pastel-pink: #fce7f3;
  --color-pastel-pink-ink: #db2777;
  --color-pastel-sky: #e0f2fe;
  --color-pastel-sky-ink: #0284c7;

  /* Type — Inter everywhere (Super Admin home scale) */
  --font-family-heading: Inter, system-ui, sans-serif;
  --font-family-body: Inter, system-ui, sans-serif;
  --font-size-display: 32px;
  --font-size-display-sm: 28px;
  --font-size-headline-lg: 20px;
  --font-size-headline-md: 18px;
  --font-size-headline-sm: 16px;
  --font-size-body-lg: 16px;
  --font-size-body-md: 14px;
  --font-size-body-sm: 12px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-body: 1.45;
  --line-height-heading: 1.15;

  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-gutter: 16px;
  --spacing-margin-x: 20px;
  --spacing-stack-gap: 12px;

  --radius-sm: 8px;
  --radius-default: 20px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-card: 24px;
  --radius-full: 9999px;

  --shadow-none: none;
  --shadow-floating: 0 4px 20px rgba(15, 23, 42, 0.05);
  --glow-platform: none;

  --layout-mobile-width: 400px;
  --layout-tablet-min-width: 390px;
  --layout-tablet-max-width: 430px;
  --layout-desktop-min-width: 600px;
  --layout-desktop-width: 900px;
  --layout-desktop-max-width: 900px;

  --app-outer-background: var(--color-background);

  /* Legacy shell aliases — do not introduce a second palette */
  --brand: var(--color-primary);
  --brand-deep: #0022aa;
  --brand-ink: var(--color-text-heading);
  --ink: var(--color-text);
  --purple: var(--color-pastel-purple-ink);
  --purple-ink: var(--color-pastel-purple-ink);
  --purple-soft: var(--color-pastel-purple);
  --serif: var(--font-family-heading);
  --muted: var(--color-text-secondary);
  --surface: var(--color-background);
  --card: var(--color-surface-light);
  --line: var(--color-border);
  --warn: var(--color-error);
  --ok: var(--color-success);
  --radius: var(--radius-card);
  --layout-max: 100%;
  --touch: 44px;
  --space-1: var(--spacing-1);
  --space-2: var(--spacing-2);
  --shadow: var(--shadow-floating);
}

html {
  background: #ffffff;
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body);
}

h1,
h2,
h3,
h4,
.sa-form-titles h1 {
  font-family: var(--font-family-heading);
  color: var(--color-text-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

h1 {
  font-size: var(--font-size-headline-lg);
}

h2 {
  font-size: var(--font-size-headline-md);
}

h3,
h4 {
  font-size: var(--font-size-headline-sm);
}

p {
  color: var(--color-text);
}

small,
.muted,
.kicker {
  color: var(--color-text-secondary);
}
:root {
  --brand: #0055ff;
  --brand-deep: #0022aa;
  --brand-ink: #0a1a4a;
  --ink: #12202b;
  --purple: #6d28d9;
  --purple-ink: #5b21b6;
  --purple-soft: #f3e8ff;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --muted: #64748b;
  --surface: #f6f8fc;
  --card: #ffffff;
  --line: #d7e1ec;
  --warn: #b42318;
  --ok: #067647;
  --radius: 1.35rem;
  --layout-max: 40rem;
  --touch: 2.75rem;
  --space-1: 0.35rem;
  --space-2: 0.7rem;
  --shadow: 0 10px 28px rgba(10, 34, 80, 0.07);
  color: var(--ink);
  background: var(--surface);
  font-family: Inter, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.skip {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 40;
  background: var(--brand);
  color: #fff;
  padding: 0.4rem 0.7rem;
  border-radius: 0.6rem;
}
.skip:focus,
.skip:focus-visible {
  top: 0.75rem;
}

/* App shell is the single /app scroll surface; hide the bar, keep wheel/touch/keyboard scroll. */
html:has(.app-shell),
html:has(.app-shell) body,
html:has(.app-shell) #root {
  height: 100%;
  max-height: 100%;
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}

html:has(.app-shell)::-webkit-scrollbar,
html:has(.app-shell) body::-webkit-scrollbar,
html:has(.app-shell) #root::-webkit-scrollbar,
.app-shell::-webkit-scrollbar,
.app-shell::-webkit-scrollbar-thumb,
.app-shell::-webkit-scrollbar-track,
.app-shell::-webkit-scrollbar-corner {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

.app-shell {
  --shell-content-max: var(--layout-max);
  --shell-content-pad: 1rem;
  position: relative;
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  overflow-x: clip;
  overflow-y: auto;
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}

.app-shell:has(.workspace-home) {
  --shell-content-max: 26.75rem;
  --shell-content-pad: 0.85rem;
}

.app-shell[data-workspace="platform"] {
  background:
    linear-gradient(180deg, #f3e9ff 0%, #f7f0ff 16%, #fff8f4 42%, #fff6f0 68%, #f8f6fb 100%);
}

.sunrise-wash {
  pointer-events: none;
  position: absolute;
  inset: 0 0 auto 0;
  height: 16rem;
  overflow: hidden;
  z-index: 0;
}

.sunrise-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 78% -8%, rgba(255, 214, 176, 0.55) 0%, transparent 58%),
    radial-gradient(ellipse 70% 55% at 12% 8%, rgba(210, 190, 255, 0.42) 0%, transparent 62%),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 236, 214, 0.35) 0%, transparent 70%);
}

.sunrise-hills {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 3.4rem;
  height: 8.5rem;
  background:
    radial-gradient(ellipse 55% 70% at 18% 100%, rgba(186, 168, 230, 0.28) 0%, transparent 72%),
    radial-gradient(ellipse 60% 80% at 52% 110%, rgba(168, 154, 220, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 50% 65% at 86% 100%, rgba(206, 176, 214, 0.2) 0%, transparent 68%);
}

.sunrise-sun {
  position: absolute;
  right: 14%;
  top: 0.55rem;
  width: 4.1rem;
  height: 4.1rem;
  border-radius: 50%;
  background: radial-gradient(circle, #fffef8 0%, #ffe7b0 36%, rgba(255, 208, 150, 0.28) 58%, transparent 74%);
}

.sunrise-bird {
  position: absolute;
  width: 0.55rem;
  height: 0.28rem;
  border: 1.4px solid rgba(90, 104, 138, 0.32);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.sunrise-bird::after {
  content: '';
  position: absolute;
  left: 0.42rem;
  top: -1px;
  width: 0.55rem;
  height: 0.28rem;
  border: 1.4px solid rgba(90, 104, 138, 0.32);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.sunrise-bird-1 {
  top: 1.15rem;
  right: 7.4rem;
}
.sunrise-bird-2 {
  top: 0.72rem;
  right: 6.1rem;
  transform: scale(0.82);
}
.sunrise-bird-3 {
  top: 1.45rem;
  right: 5.2rem;
  transform: scale(0.7);
}

.app-shell > *:not(.sunrise-wash) {
  position: relative;
  z-index: 1;
}

.app-shell > .workspace-header {
  z-index: 40;
}

.app-shell > main {
  overflow: visible;
  z-index: 1;
}

.app-shell > .bottom-nav {
  z-index: 15;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1rem 0.4rem;
}

.workspace-header {
  background: transparent;
  z-index: 40;
  overflow: visible;
  pointer-events: auto;
  box-sizing: border-box;
  width: min(var(--shell-content-max), 100%);
  margin-inline: auto;
  padding: 0.22rem var(--shell-content-pad) 0.02rem;
}

.workspace-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem;
  color: inherit;
  text-decoration: none;
}

.workspace-header-slots {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  flex-shrink: 0;
}

.workspace-slot:empty {
  display: none;
}

.context-slot {
  position: relative;
  min-width: 0;
  max-width: 9.5rem;
  overflow: visible;
  z-index: 1;
}

.context-slot[data-open='true'] {
  z-index: 40;
}

.context-slot[data-variant='greeting'] {
  max-width: none;
}

.context-slot[data-variant='greeting'] .context-slot-label,
.context-slot[data-variant='greeting'] .context-slot-trigger {
  font-size: inherit;
  color: inherit;
  min-height: 0;
}

.dropdown-portal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  pointer-events: auto;
}

.context-slot-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 80;
  pointer-events: auto;
  min-width: 16rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.45rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  box-shadow: 0 10px 28px rgba(16, 32, 48, 0.14);
}

.context-slot-label,
.context-slot-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  min-height: 2rem;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.2;
}

.context-slot-label,
.context-slot-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-slot-trigger {
  cursor: pointer;
}

.choice[data-active='true'] {
  outline: 2px solid color-mix(in srgb, var(--brand-500, #0055ff) 35%, transparent);
}

.workspace-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.workspace-page-head h1 {
  margin: 0;
  font-size: 1.35rem;
  flex: 1;
}

.workspace-page-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.workspace-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.45rem;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  color: var(--muted);
}

.page-container {
  width: min(var(--layout-max), 100%);
  margin: 0 auto;
  padding: 0.5rem 1rem 1.5rem;
  overflow: visible;
}

.bottom-nav {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: max(0.45rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  justify-content: space-around;
  gap: 0.1rem;
  width: min(var(--shell-content-max), calc(100% - 1.2rem));
  padding: 0.28rem 0.35rem;
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 1.35rem;
  box-shadow: 0 10px 28px rgba(16, 32, 48, 0.12);
  pointer-events: auto;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  color: var(--muted);
  font-size: 0.66rem;
  min-height: 2.35rem;
  padding: 0.18rem 0;
  border-radius: 0.8rem;
}

.nav-item.active {
  color: var(--brand);
  background: transparent;
  font-weight: 700;
}

.nav-item.active::after {
  content: '';
  width: 1.35rem;
  height: 0.18rem;
  border-radius: 99px;
  background: var(--brand);
}

.nav-item.active svg path,
.nav-item.active svg circle,
.nav-item.active svg rect {
  fill: currentColor;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 800;
}

.logo-img {
  display: block;
  height: 2.45rem;
  width: auto;
}

.logo-img-compact {
  height: 1.7rem;
}

.logo-img-prominent {
  height: auto;
  max-width: none;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.logo-word {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1.05rem;
  color: var(--brand-ink);
}

.avatar {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #e8efff;
  color: var(--brand-deep);
  overflow: hidden;
}

.avatar-photo {
  object-fit: cover;
}

.avatar-default {
  box-shadow: inset 0 0 0 2px #c7d7ff;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  background: #e8f2ff;
  color: var(--brand);
}
.badge-warn {
  background: #fef3f2;
  color: var(--warn);
}
.badge-off {
  background: #eef2f6;
  color: var(--muted);
}
.badge-purple {
  background: #f3e8ff;
  color: #7e22ce;
}

.pict {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.9rem;
  background: #e8f2ff;
  color: var(--brand);
}

.icon-card,
.action-card,
.stat-card,
.login-card,
.hero-card,
.person-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.icon-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.9rem;
  min-height: 7.2rem;
  text-align: left;
  color: inherit;
}
.icon-card em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.78rem;
}

.action-card {
  padding: 1rem;
}
.action-card-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.8rem;
}
.action-card h2 {
  margin: 0;
  font-size: 1.05rem;
  flex: 1;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem;
}
.stat-card strong {
  font-size: 1.2rem;
}
.stat-card span:last-child {
  color: var(--muted);
  font-size: 0.75rem;
}

.card-grid,
.people-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

ul.card-grid,
ul.people-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.command-center {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.command-center-groups {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.hero-card {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding: 1rem;
}
.hero-card.tight {
  box-shadow: none;
}
.hero-card h1 {
  margin: 0.15rem 0;
  font-size: 1.35rem;
}

.kicker {
  margin: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--muted);
}

.muted {
  color: var(--muted);
}

.empty-state,
.loading-state,
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 1.4rem 0.5rem;
  text-align: center;
}

.spinner {
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 37, 64, 0.35);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
  padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  z-index: 200;
}

.modal,
.sheet {
  width: min(28rem, 100%);
  max-height: 100%;
  min-height: 0;
  background: var(--card);
  padding: 1rem 1rem 1.2rem;
}

.modal {
  margin: auto;
  border-radius: var(--radius);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sheet {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  border-radius: 1.4rem 1.4rem 0 0;
  overflow: hidden;
}
.sheet-head {
  flex-shrink: 0;
}
.sheet-head h2 {
  margin: 0;
}
.sheet-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet-handle {
  width: 2.4rem;
  height: 0.28rem;
  background: var(--line);
  border-radius: 99px;
  margin: 0 auto 0.7rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  padding: 0.75rem 0.85rem;
  background: #fff;
  color: var(--ink);
}

.field-control {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

.field-icon,
.field-chevron {
  position: absolute;
  top: 50%;
  display: inline-grid;
  place-items: center;
  pointer-events: none;
}

.field-icon {
  left: 0.85rem;
  transform: translateY(-50%);
}

.field[data-as='textarea'] .field-icon {
  top: 0.95rem;
  transform: none;
}

.field-chevron {
  right: 0.75rem;
  transform: translateY(-50%);
  color: var(--muted);
}

.field[data-icon] input,
.field[data-icon] select,
.field[data-icon] textarea {
  padding-left: 2.55rem;
}

.field[data-as='select'] select {
  appearance: none;
  padding-right: 2.4rem;
}

.field[data-tone='purple'] .field-icon {
  color: #7c3aed;
}
.field[data-tone='blue'] .field-icon {
  color: #0284c7;
}
.field[data-tone='green'] .field-icon {
  color: #16a34a;
}
.field[data-tone='orange'] .field-icon {
  color: #ea580c;
}

.field-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}

.field-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.primary-btn {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1rem;
  background: var(--brand);
  color: #fff;
  font-weight: 650;
}
.primary-btn:disabled {
  opacity: 0.55;
}

.icon-btn,
.icon-ghost {
  border: 0;
  background: #e8f2ff;
  color: var(--brand);
  width: var(--touch);
  height: var(--touch);
  min-width: var(--touch);
  min-height: var(--touch);
  border-radius: 0.9rem;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
}

.icon-btn.header-round {
  width: 2.15rem;
  height: 2.15rem;
  min-width: 2.15rem;
  min-height: 2.15rem;
  border-radius: 50%;
  background: #fff;
  color: #334155;
  box-shadow: 0 6px 16px rgba(16, 32, 48, 0.08);
}

.notify-slot {
  position: relative;
  overflow: visible;
  z-index: 1;
}

.notify-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 80;
  pointer-events: auto;
  min-width: 12.5rem;
  padding: 0.45rem 0.5rem 0.55rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  box-shadow: 0 10px 28px rgba(16, 32, 48, 0.14);
}

.notify-panel-title {
  margin: 0 0.15rem 0.35rem;
  font-size: 0.78rem;
  font-weight: 650;
  color: #334155;
}

.notify-panel .empty-state {
  gap: 0.45rem;
  padding: 0.55rem 0.35rem 0.2rem;
}

.notify-panel .empty-state .pict {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
}

.notify-panel .empty-state p {
  margin: 0;
}

.notify-dot {
  position: absolute;
  top: 0.28rem;
  right: 0.28rem;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 2px #fff;
}

.avatar-btn {
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #0055ff, 0 6px 16px rgba(16, 32, 48, 0.1);
}

.user-menu {
  position: relative;
}

.user-menu-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 80;
  pointer-events: auto;
  min-width: 10.5rem;
  padding: 0.3rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  box-shadow: 0 10px 28px rgba(16, 32, 48, 0.14);
  display: flex;
  flex-direction: column;
}

.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 0.6rem;
  padding: 0.65rem 0.75rem;
  font: inherit;
  color: inherit;
}

.user-menu-item:hover,
.user-menu-item:focus-visible {
  background: #e8f2ff;
}

.dropdown-portal.context-slot-panel,
.dropdown-portal.notify-panel,
.dropdown-portal.user-menu-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  z-index: 80;
}

.insight-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem;
  min-height: var(--touch);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: inherit;
}

.insight-card p {
  margin: 0.15rem 0 0;
}

.insight-card-copy {
  flex: 1;
  min-width: 0;
}

.insight-card-ask {
  background: linear-gradient(105deg, #0055ff 0%, #3b6bff 46%, #6d5cff 100%);
  color: #fff;
  border: 0;
  min-height: 5.15rem;
  padding: 1.05rem 0.95rem 1.05rem 1.2rem;
  border-radius: 1.55rem;
  box-shadow: 0 14px 30px rgba(37, 80, 230, 0.22);
}

.insight-card-ask .pict {
  width: auto;
  height: auto;
  background: transparent;
  color: #fff;
}

.insight-card-ask .muted,
.insight-card-ask strong {
  color: #fff;
}

.insight-card-ask strong {
  font-size: 1.18rem;
  letter-spacing: -0.02em;
}

.insight-card-ask .muted {
  opacity: 0.88;
  font-size: 0.82rem;
}

.ask-sparks {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.05rem;
}

.insight-card-go {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: #fff;
  color: #0055ff;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 8px 16px rgba(0, 20, 80, 0.18);
}

.insight-card-insight {
  background: linear-gradient(90deg, #efe7ff 0%, #e8edff 52%, #dde8ff 100%);
  border: 0;
  padding: 1.05rem 1rem 1.05rem 1.1rem;
  min-height: 6.5rem;
  overflow: hidden;
}

.insight-card-insight .pict {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0.55rem;
  background: transparent;
  color: #6d28d9;
}

.insight-card-insight strong {
  color: #5b21b6;
  font-size: 0.95rem;
}

.insight-card-insight .muted {
  color: #1e293b;
  font-size: 0.98rem;
  font-weight: 650;
  margin-top: 0.2rem;
}

.insight-card-cta {
  display: inline-block;
  margin-top: 0.45rem;
  color: #6d28d9;
  font-weight: 650;
  font-size: 0.88rem;
}

.insight-card-art {
  flex-shrink: 0;
  margin-right: -0.35rem;
}

.app-card {
  min-height: 7.2rem;
}

.app-card[data-status='coming_soon'],
.app-card[data-status='unavailable'] {
  opacity: 0.62;
  cursor: default;
}

.app-card-status {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 650;
  font-style: normal;
  color: #94a3b8;
}

.home-greeting {
  padding: 0.35rem 0.1rem 0.1rem;
}

.home-greeting h1 {
  margin: 0;
  font-size: 2.15rem;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--brand-ink);
}

.home-context {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0.4rem;
  color: #64748b;
  font-size: 0.98rem;
}

.home-role {
  margin: 0.15rem 0 0;
  color: #94a3b8;
  font-size: 0.88rem;
}

.platform-health h2 {
  margin: 0 0 0.7rem;
  font-size: 1.12rem;
  font-weight: 700;
}

.health-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.4rem;
  padding: 0.85rem 1rem;
  border-radius: 1.25rem;
  background: #f8fafc;
  color: #334155;
  font-size: 0.98rem;
}

.health-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: #94a3b8;
}

.health-row[data-state='ok'] .health-dot {
  background: #10b981;
}

.health-row[data-state='degraded'] .health-dot {
  background: #f59e0b;
}

.health-services {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.health-services li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.4rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.9rem;
  background: #f8fafc;
  color: #475569;
  font-size: 0.88rem;
}

.health-service-copy {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.health-service-copy strong {
  font-size: 0.86rem;
  font-weight: 650;
  color: #1e293b;
}

.health-service-copy em {
  font-style: normal;
  font-size: 0.72rem;
  color: #64748b;
}

.sa-console .metric-card strong {
  font-size: 1.55rem;
  line-height: 1.1;
}

.sa-console .health-row strong {
  font-weight: 700;
  font-size: 1.05rem;
}

.sa-monitor h2,
.sa-tenants h2 {
  margin: 0 0 0.7rem;
  font-size: 1.12rem;
  font-weight: 700;
}

.app-shell[data-os='super-admin'] .sunrise-wash {
  height: 7.35rem;
}

.app-shell[data-os='super-admin'] .sunrise-hills {
  top: 1.55rem;
  height: 4.35rem;
}

.app-shell[data-os='super-admin'] .sunrise-sun {
  width: 2.2rem;
  height: 2.2rem;
  top: 0.18rem;
}

.app-shell[data-os='super-admin'] .sunrise-bird-1,
.app-shell[data-os='super-admin'] .sunrise-bird-2,
.app-shell[data-os='super-admin'] .sunrise-bird-3 {
  transform: scale(0.68);
}

.sa-console.stack {
  gap: 0.5rem;
}

.sa-console .home-greeting,
.sa-console .sa-greeting {
  padding: 0 0.1rem 0.08rem;
}

.sa-console .home-greeting h1,
.sa-console .sa-greeting h1 {
  font-size: 1.42rem;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.sa-console .home-context {
  margin-top: 0.08rem;
  font-size: 0.86rem;
}

.sa-console .home-role {
  margin-top: 0.05rem;
  font-size: 0.76rem;
}

.sa-console .home-metrics h2,
.sa-console .platform-health h2,
.sa-console .platform-attention h2,
.sa-console .platform-activity h2,
.sa-console .sa-monitor h2,
.sa-console .sa-tenants h2,
.sa-console .home-workspace h2,
.sa-console .action-card-plain h2 {
  margin-bottom: 0.5rem;
  font-size: 1.02rem;
}

.sa-console .home-metrics-grid {
  gap: 0.55rem;
}

.sa-console .sa-metric {
  min-width: 0;
}

.sa-console .sa-metric .metric-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  min-height: 5.6rem;
  height: 100%;
  padding: 0.95rem 0.9rem;
  border: 0;
  border-radius: 1.35rem;
  box-shadow: none;
}

.sa-console .sa-metric .metric-card .pict {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
}

.sa-console .sa-metric .metric-card .metric-card-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
  min-width: 0;
  flex: 1;
}

.sa-console .sa-metric .metric-card .metric-card-label {
  font-size: 0.72rem;
  font-weight: 650;
  color: #475569;
}

.sa-console .sa-metric .metric-card strong {
  font-size: 1.7rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.sa-console .sa-metric[data-metric='organizations'] .metric-card {
  background: #dbeafe;
}

.sa-console .sa-metric[data-metric='users'] .metric-card {
  background: #ede9fe;
}

.sa-console .sa-metric[data-metric='modules'] .metric-card {
  background: #d1fae5;
}

.sa-console .sa-metric[data-metric='partners'] .metric-card {
  background: #ffedd5;
}

.sa-console .sa-metric[data-metric='sessions'] .metric-card {
  background: #fce7f3;
}

.sa-console .sa-metric[data-metric='storage'] .metric-card {
  background: #e0f2fe;
}

.sa-console .sa-metric[data-metric='organizations'] .pict {
  background: #e7f0ff;
  color: #0055ff;
}

.sa-console .sa-metric[data-metric='users'] .pict {
  background: #f3e8ff;
  color: #7c3aed;
}

.sa-console .sa-metric[data-metric='modules'] .pict {
  background: #e8f8ee;
  color: #16a34a;
}

.sa-console .sa-metric[data-metric='partners'] .pict {
  background: #fff1e4;
  color: #ea580c;
}

.sa-console .sa-metric[data-metric='sessions'] .pict {
  background: #ffe8ee;
  color: #be123c;
}

.sa-console .sa-metric[data-metric='storage'] .pict {
  background: #e0f2fe;
  color: #0284c7;
}

.sa-console .health-row {
  min-height: 2.55rem;
  padding: 0.55rem 0.8rem;
  border-radius: 1.1rem;
}

.sa-console .health-row-copy {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.sa-console .health-row-copy em {
  font-style: normal;
  font-size: 0.72rem;
  color: #64748b;
}

.sa-console .health-services {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.sa-console .health-services li {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.28rem;
  min-height: 0;
  padding: 0.2rem 0.05rem;
  background: transparent;
  text-align: center;
}

.sa-console .health-service-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 50%;
  background: #f8fafc;
  color: #64748b;
}

.sa-console .health-service-icon .health-dot {
  position: absolute;
  top: 0.12rem;
  right: 0.12rem;
  width: 0.42rem;
  height: 0.42rem;
}

.sa-console .health-services li[data-state='ok'] .health-service-icon {
  background: #ecfdf5;
  color: #059669;
}

.sa-console .health-services li[data-state='error'] .health-service-icon {
  background: #fef2f2;
  color: #dc2626;
}

.sa-console .health-services li[data-state='unavailable'] .health-service-icon {
  background: #f8fafc;
  color: #94a3b8;
}

.sa-console .health-service-copy {
  align-items: center;
}

.sa-console .health-service-copy strong {
  font-size: 0.68rem;
}

.sa-console .health-service-copy em {
  font-size: 0.62rem;
}

.sa-console .attention-list li {
  min-height: 2.35rem;
  padding: 0.5rem 0.75rem;
}

.sa-console [data-slot='needs-attention'] .empty-state,
.sa-console [data-slot='recent-activity'] .empty-state,
.sa-console [data-slot='live-monitor'] .empty-state,
.sa-console [data-slot='top-tenants'] .empty-state {
  flex-direction: row;
  justify-content: flex-start;
  gap: 0.65rem;
  min-height: 3.6rem;
  padding: 0.75rem 0.85rem;
  text-align: left;
  border-radius: 1.2rem;
  background: #fff;
  box-shadow: 0 8px 18px rgba(16, 32, 48, 0.05);
}

.sa-console [data-slot='needs-attention'] .empty-state .pict,
.sa-console [data-slot='recent-activity'] .empty-state .pict,
.sa-console [data-slot='live-monitor'] .empty-state .pict,
.sa-console [data-slot='top-tenants'] .empty-state .pict {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
}

.sa-console [data-slot='needs-attention'] .empty-state p,
.sa-console [data-slot='recent-activity'] .empty-state p,
.sa-console [data-slot='live-monitor'] .empty-state p,
.sa-console [data-slot='top-tenants'] .empty-state p {
  margin: 0;
}

.health-services li[data-state='ok'] .health-dot {
  background: #10b981;
}

.health-services li[data-state='error'] .health-dot {
  background: #ef4444;
}

.attention-drawer {
  margin: 0;
}

.attention-drawer-panel {
  background: #fff;
  border-radius: 1.2rem;
  box-shadow: 0 8px 18px rgba(16, 32, 48, 0.05);
  overflow: hidden;
}

.attention-drawer-summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.65rem;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.attention-drawer-summary::-webkit-details-marker,
.attention-drawer-summary::marker {
  display: none;
  content: '';
}

.attention-drawer-summary::after {
  content: '';
  margin-left: auto;
  width: 0.38rem;
  height: 0.38rem;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.attention-drawer-panel[open] .attention-drawer-summary::after {
  transform: rotate(225deg);
  margin-bottom: -0.15rem;
}

.attention-drawer-title {
  min-width: 0;
}

.attention-drawer-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 0.75rem;
  font-weight: 750;
}

.attention-drawer-panel .attention-list {
  padding: 0 0.65rem 0.65rem;
}

@media (prefers-reduced-motion: reduce) {
  .attention-drawer-summary::after {
    transition: none;
  }
}

.home-metrics h2,
.platform-attention h2,
.platform-activity h2,
.partner-portfolio h2 {
  margin: 0 0 0.7rem;
  font-size: 1.12rem;
  font-weight: 700;
}

.home-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.attention-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.attention-list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: 1rem;
  background: #fff7ed;
  color: #9a3412;
  font-size: 0.92rem;
}

.home-workspace h2 {
  margin: 0 0 0.7rem;
  font-size: 1.12rem;
  font-weight: 700;
}

.home-apps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}

.workspace-home .app-card:not(.app-card-action) {
  position: relative;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 7.1rem;
  padding: 1rem 0.4rem 1.05rem;
  border: 0;
  border-radius: 1.5rem;
  box-shadow: 0 10px 22px rgba(16, 32, 48, 0.055);
}

.workspace-home .app-card:not(.app-card-action) .pict {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 14px rgba(16, 32, 48, 0.06);
}

.workspace-home .app-card strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
}

.app-card-badge {
  position: absolute;
  right: 0.75rem;
  bottom: 0.7rem;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--brand);
}

.app-card-tone-crm {
  background: #e8f1ff;
  color: #0055ff;
}
.app-card-tone-crm .app-card-badge {
  background: #0055ff;
}

.app-card-tone-marketing {
  background: #ffe9d8;
  color: #ea580c;
}
.app-card-tone-marketing .app-card-badge {
  background: #f97316;
}

.app-card-tone-messages {
  background: #efe8ff;
  color: #7c3aed;
}
.app-card-tone-messages .app-card-badge {
  background: #8b5cf6;
}

.app-card-tone-tasks {
  background: #e3f8ee;
  color: #059669;
}
.app-card-tone-tasks .app-card-badge {
  background: #10b981;
}

.app-card-tone-calendar {
  background: #ffe6f0;
  color: #db2777;
}
.app-card-tone-calendar .app-card-badge {
  background: #ec4899;
}

.app-card-tone-analytics {
  background: #e4f7fb;
  color: #0891b2;
}
.app-card-tone-analytics .app-card-badge {
  background: #06b6d4;
}

.app-card-tone-billing {
  background: #fff1e6;
  color: #c2410c;
}

.app-card-tone-security {
  background: #ffe8ee;
  color: #be123c;
}

.action-card-plain {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0.15rem 0 0;
}

.action-card-plain header {
  margin-bottom: 0.7rem;
}

.action-card-plain h2 {
  font-size: 1.15rem;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}

.workspace-home .app-card-action,
.app-card-action {
  min-width: 0;
  min-height: 5.35rem;
  align-items: center;
  text-align: center;
  padding: 0.65rem 0.2rem 0.55rem;
  background: #fff;
  border: 0;
  border-radius: 1.25rem;
  box-shadow: 0 8px 18px rgba(16, 32, 48, 0.05);
}

.workspace-home .app-card-action .pict,
.app-card-action .pict {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.app-card-action strong {
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--ink);
  line-height: 1.2;
}

.app-card-action.app-card-tone-lead {
  background: #e8f8ee;
  color: #16a34a;
}
.app-card-action.app-card-tone-task {
  background: #e7f0ff;
  color: #0055ff;
}
.app-card-action.app-card-tone-schedule {
  background: #fff1e4;
  color: #ea580c;
}
.app-card-action.app-card-tone-note {
  background: #f3e8ff;
  color: #7c3aed;
}

.icon-ghost {
  background: transparent;
  position: relative;
}

.text-btn {
  border: 0;
  background: none;
  color: var(--brand);
}

.scope-toggle {
  display: inline-flex;
  gap: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.15rem;
}

.scope-toggle-btn,
.scope-toggle-active {
  border: none;
  background: none;
  font: inherit;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
}

.scope-toggle-active {
  background: #e8f2ff;
  color: var(--brand);
}

.today-section h3 {
  margin: 0 0 0.45rem;
  font-size: 0.92rem;
  color: var(--muted);
}

.today-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.today-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.today-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.today-card-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}

.today-overdue {
  border-color: #f4c7c3;
}

.today-calendar-note {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.today-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.activity-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.activity-done {
  opacity: 0.72;
}

.activity-record-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.activity-related {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.activity-record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.filter-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.login-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 1.5rem;
}

.login-card {
  width: min(22rem, 100%);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.login-card h1 {
  margin: 0;
  font-size: 1.4rem;
}

.person-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.9rem;
  min-height: 7.2rem;
  min-width: 0;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
}

.person-card-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.person-card-copy strong {
  font-size: 0.95rem;
}

.record-facts p {
  margin: 0;
}

.crm-ai-insights {
  margin: 0.85rem 0 0.25rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.crm-ai-insights-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.crm-ai-insights-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.crm-ai-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--touch);
  padding: 0.4rem 0.55rem;
  border-radius: 0.85rem;
  font-size: 0.82rem;
  font-weight: 650;
}

.crm-ai-chip-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}

.crm-ai-chip-positive {
  background: #ecfdf3;
  color: #166534;
}

.crm-ai-chip-attention {
  background: #fff7ed;
  color: #9a3412;
}

.crm-ai-chip-negative {
  background: #fef2f2;
  color: #991b1b;
}

.crm-ai-chip-information {
  background: #eef2ff;
  color: #3730a3;
}

.crm-ai-insights-error,
.crm-ai-insights-empty {
  margin: 0;
  font-size: 0.88rem;
}

.crm-email-composer {
  gap: 0.55rem;
}

.crm-email-field input,
.crm-email-field textarea,
.crm-email-controls select {
  width: 100%;
  border: 1px solid var(--line, #d6d3d1);
  border-radius: 0.7rem;
  padding: 0.55rem 0.7rem;
  background: var(--surface, #fff);
}

.crm-email-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.crm-email-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

@media (max-width: 640px) {
  .crm-email-controls {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .crm-ai-insights-list {
    grid-template-columns: 1fr;
  }

  .crm-remembered-list {
    grid-template-columns: 1fr;
  }
}

.crm-remembered-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.crm-remembered-row {
  justify-content: space-between;
}

.crm-remembered-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.crm-remembered-confirm,
.crm-remembered-correct {
  margin: 0.45rem 0 0;
}

.crm-remembered-correct {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}

.crm-remembered-correct input {
  min-height: var(--touch);
  flex: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  background: var(--card);
}

.crm-meeting-prep {
  margin: 0.85rem 0 0.25rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.crm-meeting-prep-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.crm-meeting-prep-head strong {
  flex: 1;
}

.crm-meeting-prep-error {
  margin: 0;
  font-size: 0.88rem;
}

.crm-meeting-chips,
.crm-meeting-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.crm-meeting-chips li,
.crm-meeting-list li {
  min-height: var(--touch);
  padding: 0.35rem 0.65rem;
  border-radius: 0.85rem;
  background: #eef2ff;
  font-size: 0.82rem;
  font-weight: 650;
}

.crm-meeting-attention li {
  background: #fff7ed;
  color: #9a3412;
}

.crm-meeting-tabs {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.crm-qualification-status {
  width: fit-content;
  margin-bottom: 0.45rem;
}

.crm-qualification-criteria {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.crm-qualification-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 1.8rem;
  font-size: 0.86rem;
  font-weight: 650;
}

.crm-qualification-missing,
.crm-qualification-confidence {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
}

.deal-intel-idle,
.deal-intel-hero {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.35rem 0;
}

.deal-intel-orb {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: #e8f2ff;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent);
}

.deal-intel-orb-healthy {
  background: color-mix(in srgb, var(--ok) 22%, white);
  box-shadow: inset 0 0 0 2px var(--ok);
}

.deal-intel-orb-attention,
.deal-intel-orb-at_risk {
  background: color-mix(in srgb, var(--warn) 18%, white);
  box-shadow: inset 0 0 0 2px var(--warn);
}

.deal-intel-orb-insufficient_data,
.deal-intel-orb-idle {
  background: #eef2f6;
}

.deal-intel-risks {
  list-style: none;
  margin: 0.4rem 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.deal-intel-next,
.deal-intel-groups p {
  margin: 0.3rem 0;
  font-size: 0.86rem;
}

.deal-intel-ask {
  margin-top: 0.55rem;
}

.deal-intel-ask input {
  width: 100%;
  min-height: 2.4rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  padding: 0.4rem 0.7rem;
  background: var(--card);
}

.record-section-title {
  margin: 1rem 0 0.5rem;
  font-size: 0.95rem;
}

.record-timeline {
  margin-top: 0.5rem;
}

.timeline-list {
  gap: 0.5rem;
}

.timeline-entry-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.timeline-entry .text-btn {
  margin-top: 0.35rem;
}

.duplicate-warn {
  border: 1px solid #f0d9a8;
  background: #fff8e8;
  border-radius: 0.85rem;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.duplicate-warn p {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
}

.duplicate-warn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
}

.load-more {
  margin-top: 0.75rem;
}

.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.65rem 0.75rem;
  font: inherit;
  resize: vertical;
}

.choice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.choice {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 1rem;
  padding: 0.85rem;
}
.choice.active {
  border-color: var(--brand);
  background: #e8f2ff;
}

.toast-stack {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 4.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 30;
  width: min(22rem, calc(100% - 1.5rem));
}

.toast {
  border: 0;
  border-radius: 999px;
  padding: 0.65rem 0.9rem;
  background: var(--brand-ink);
  color: #fff;
}
.toast-warn {
  background: var(--warn);
}

.selectable-record {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
  cursor: pointer;
}

.selectable-record-check {
  margin: auto 0;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
}

.selectable-record-body {
  flex: 1;
  min-width: 0;
}

.selectable-record-body .person-card,
.selectable-record-body .icon-card {
  pointer-events: none;
}

.card-grid > li,
.people-list > li,
.selectable-record {
  min-width: 0;
}

.selectable-record {
  height: 100%;
}

.action-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.text-btn.compact {
  font-size: 0.78rem;
  padding: 0.25rem 0.45rem;
}

.bulk-action-bar {
  position: sticky;
  bottom: 0.5rem;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.bulk-action-count {
  font-size: 0.85rem;
  font-weight: 600;
}

.bulk-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.bulk-action-warn {
  color: var(--warn);
}

.bulk-limit-note {
  margin: 0;
  color: var(--warn);
  font-size: 0.85rem;
}

.bulk-rejection-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.bulk-rejection-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.85rem;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.filter-chip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.filter-chip.active {
  border-color: var(--brand);
  background: #e8f2ff;
  color: var(--brand);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.78rem;
  color: var(--brand-ink);
}

.tag-chip-removable {
  padding-right: 0.35rem;
}

.tag-chip-remove {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.15rem;
  cursor: pointer;
}

.record-tags {
  margin: 0.75rem 0;
}

.record-tags-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.tag-card {
  pointer-events: none;
}

.search-form {
  margin-bottom: 0.85rem;
}

.search-hit-card .search-hit-type {
  display: block;
  margin-top: 0.25rem;
}

.filter-dot {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--brand);
}

.opp-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.2rem;
}

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.party-links a {
  color: var(--brand);
}

.pipeline-card {
  justify-content: space-between;
}

.stage-stack {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.stage-stack-item {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}

.stage-stack-index {
  font-size: 0.85rem;
  color: var(--muted);
  min-width: 1.25rem;
}

.stage-stack-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stage-config-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.stage-config-row {
  display: grid;
  grid-template-columns: 1fr minmax(5rem, 6rem) auto;
  gap: 0.45rem;
  align-items: center;
}

.stage-config-row input,
.stage-config-row select {
  width: 100%;
}

.stage-config-actions {
  display: flex;
  gap: 0.25rem;
}

.inline-actions {
  display: flex;
  gap: 0.5rem;
}

.warn-copy {
  color: #b45309;
  margin: 0;
  font-size: 0.9rem;
}

.app-shell:has(.workspace-home) .page-container {
  width: 100%;
  max-width: var(--shell-content-max);
  padding-left: var(--shell-content-pad);
  padding-right: var(--shell-content-pad);
}

@media (min-width: 800px) {
  .app-shell {
    padding-bottom: 4.75rem;
  }
  .app-shell:has(.workspace-home) {
    --shell-content-max: 42rem;
  }
  .card-grid,
  .people-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .workspace-home .card-grid,
  .home-apps {
    grid-template-columns: repeat(3, 1fr);
  }
  .home-greeting h1 {
    font-size: 2.35rem;
  }
  .sa-console .home-greeting h1,
  .sa-console .sa-greeting h1 {
    font-size: 1.45rem;
  }
}

.crm-ai-conversation {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 7.5rem);
  gap: 0.65rem;
}

.crm-ai-conversation-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.crm-ai-conversation-id {
  flex: 1;
  font-size: 0.95rem;
}

.crm-ai-context-chip,
.crm-ai-quick,
.crm-ai-switcher,
.crm-ai-empty-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.crm-ai-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 8rem;
}

.crm-ai-bubble {
  margin: 0;
  padding: 0.65rem 0.8rem;
  border-radius: 1rem;
  max-width: 92%;
  font-size: 0.92rem;
}

.crm-ai-bubble-user {
  align-self: flex-end;
  background: var(--brand-soft, #eef2ff);
}

.crm-ai-bubble-assistant {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
}

.crm-ai-progress,
.crm-ai-empty p {
  margin: 0;
  color: var(--muted, #64748b);
}

.crm-ai-composer {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 0.45rem;
  padding: 0.45rem 0 0.2rem;
  background: var(--bg, #fff);
}

.crm-ai-composer input {
  flex: 1;
  min-height: var(--touch);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 0 0.85rem;
  font: inherit;
}

.crm-ai-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

@media (min-width: 900px) {
  .crm-ai-conversation {
    max-width: 36rem;
    margin: 0 auto;
  }
}

.crm-ai-analytics-hint {
  margin: 0 0 0.7rem;
}

@media (min-width: 900px) {
  .crm-ai-analytics {
    max-width: 48rem;
    margin: 0 auto;
  }
  .crm-ai-overview-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .crm-ai-agent-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.crm-ai-overview-grid {
  grid-template-columns: repeat(2, 1fr);
}

.crm-ai-agent-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.8rem;
  min-height: 6.4rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.crm-ai-agent-card-on {
  border-color: var(--brand);
}

.crm-ai-agent-metrics {
  display: flex;
  gap: 0.55rem;
  font-size: 0.85rem;
  font-weight: 650;
}

.crm-ai-trend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.28rem;
  min-height: 5.5rem;
}

.crm-ai-trend li {
  flex: 1;
  display: flex;
  align-items: flex-end;
  min-height: 5.5rem;
}

.crm-ai-trend span {
  display: block;
  width: 100%;
  border-radius: 0.4rem 0.4rem 0 0;
  background: var(--brand);
}

.crm-ai-insight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.crm-ai-insight-card {
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.crm-ai-insight-card p {
  margin: 0.3rem 0 0;
}

@media (min-width: 900px) {
  .crm-ai-overview-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .crm-ai-agent-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.crm-assistant-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.ask-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin: 0 0 0.7rem;
}

.crm-assistant-thread {
  min-height: 8rem;
}

.crm-assistant-bubble {
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.crm-assistant-bubble p,
.crm-assistant-tools {
  margin: 0.35rem 0 0;
}

.crm-assistant-input {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.crm-assistant-input input {
  flex: 1;
  min-height: 2.4rem;
}

.ask-page .crm-assistant-input input,
.ask-page .crm-assistant-input button {
  min-height: 44px;
}

.mic-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: inherit;
  padding: 0;
}

.mic-btn[data-on='true'] {
  border-color: var(--brand);
  color: var(--brand);
}

.mic-btn:disabled {
  opacity: 0.45;
}

.voice-session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.voice-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: inherit;
  padding: 0 0.95rem;
  font: inherit;
  font-weight: 650;
}

.voice-btn-start {
  border-color: var(--brand);
  color: var(--brand);
}

.voice-btn-stop {
  border-color: #b91c1c;
  color: #b91c1c;
}

.voice-btn:disabled {
  opacity: 0.45;
}

.voice-session-status {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
}

.voice-session-status[data-on='true']::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #dc2626;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55);
  animation: voice-listen 1.2s ease-out infinite;
}

@keyframes voice-listen {
  70% {
    box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

.ai-create-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ai-create-review-head .kicker {
  margin: 0;
}

.field-with-mic {
  display: grid;
  gap: 0.5rem;
}

.field-with-mic .field {
  min-width: 0;
}

.place-suggest {
  display: grid;
  gap: 0.5rem;
}

.place-suggest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.place-suggest-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--card);
  color: inherit;
  font: inherit;
  padding: 0.65rem 0.8rem;
}

.place-suggest-item[data-on='true'] {
  border-color: var(--brand);
}

.place-suggest-map {
  border: 1px solid var(--line);
  border-radius: 1rem;
  overflow: hidden;
  min-height: 180px;
}

.place-suggest-map iframe {
  display: block;
  width: 100%;
  height: 180px;
  border: 0;
}

.field-with-mic .field {
  flex: 1;
}

.ai-prompt-bar {
  display: grid;
  gap: 0.45rem;
}

.ai-prompt-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.speak-fill-hint {
  margin: 0;
  font-size: 0.82rem;
}

.ai-create-review {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.5rem;
}

.ask-reply-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.45rem 0 0;
}

.crm-ask-about {
  min-height: auto;
}

:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

.ai-ops {
  gap: 0.85rem;
}

.ai-ops-card {
  padding: 1rem;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 8px 24px rgb(15 23 42 / 0.06);
}

.ai-ops-card h1,
.ai-ops-card h2 {
  margin: 0 0 0.65rem;
  font-size: 1.12rem;
}

.ai-ops-search {
  display: grid;
  gap: 0.35rem;
  margin: 0.6rem 0;
}

.ai-ops-search input {
  min-height: 2.75rem;
  border-radius: 0.85rem;
  border: 1px solid #e2e8f0;
  padding: 0 0.85rem;
  font-size: 1rem;
}

.ai-ops-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.ai-ops-filters button {
  min-height: 2.2rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  border: 0;
  background: #f1f5f9;
}

.ai-ops-trace {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.ai-ops-trace li {
  display: grid;
  gap: 0.15rem;
}

@media (max-width: 720px) {
  .ai-ops-card {
    padding: 0.85rem;
  }
}

.org-add {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.org-add-hero {
  display: flex;
  justify-content: center;
}

.org-add-steps {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}

.org-add-steps span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--line);
}

.org-add-steps span[data-on] {
  background: var(--brand);
}

.org-add-review {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
}

.org-add-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.org-add-actions .primary-btn {
  flex: 1;
}

.add-org-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 650;
  min-height: var(--touch);
}

.package-pick {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 0;
  margin: 0;
  padding: 0;
}

.package-pick-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
}

.package-pick-item input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.package-pick-item[data-on] {
  border-color: var(--brand);
}

.app-shell:has(.sa-form) {
  --layout-max: 44rem;
  --shell-content-max: 44rem;
}

.app-shell:has(.sa-form-wide),
.app-shell:has([data-screen='package-add']),
.app-shell:has([data-screen='package-edit']),
.app-shell:has([data-step='plan']),
.app-shell:has([data-step='admin']) {
  --layout-max: 56rem;
  --shell-content-max: 52rem;
}

.plan-page {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.plan-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.plan-page-head h1 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.plan-page-head p,
.plan-sub {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.plan-layout {
  display: grid;
  gap: 0.85rem;
}

.plan-main,
.plan-side {
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
}

.plan-main {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.plan-side h2 {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
}

.plan-side dl {
  margin: 0;
  display: grid;
  gap: 0.65rem;
}

.plan-side dl div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
}

.plan-side dt {
  color: var(--muted);
  font-size: 0.78rem;
}

.plan-side dd {
  margin: 0;
  font-weight: 650;
  text-align: right;
  word-break: break-word;
}

.limit-cards {
  display: grid;
  gap: 0.65rem;
}

.limit-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: #fff;
  color: var(--ink);
}

.limit-card .pict {
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 50%;
}

.limit-card[data-tone='users'] .pict {
  background: #f3e8ff;
  color: #7c3aed;
}

.limit-card[data-tone='storage'] .pict {
  background: #e0f2fe;
  color: #0284c7;
}

.limit-card[data-tone='modules'] .pict {
  background: #e8f8ee;
  color: #16a34a;
}

.limit-card[data-tone='name'] .pict {
  background: #f3e8ff;
  color: #7c3aed;
}

.limit-card[data-tone='email'] .pict {
  background: #e0f2fe;
  color: #0284c7;
}

.limit-card[data-tone='password'] .pict {
  background: #fef3c7;
  color: #d97706;
}

.limit-card-label {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--muted);
}

.limit-card input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  padding: 0.65rem 0.75rem;
  background: var(--surface);
  color: var(--ink);
}

.package-pick-limits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.package-pick-limits span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

@media (min-width: 800px) {
  .plan-layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(14rem, 0.9fr);
    align-items: start;
  }

  .limit-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Classic Super Admin form chrome — partner wizard, packages, org/business, lists */
.sa-form,
.classic-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  color: var(--ink);
}

.sa-form-head {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.sa-form-head-slim {
  align-items: center;
  gap: 0.45rem;
  min-height: 1.6rem;
}

.sites-pagekit-back {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1;
  color: var(--brand);
  text-decoration: none;
  padding: 0.28rem 0.45rem;
  border-radius: 0.45rem;
}

.sites-pagekit-back:hover {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}

.sa-form-pict,
.sa-form-kicker .pict {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--purple-soft);
  color: var(--purple);
}

.sa-form-pict {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1.05rem;
  box-shadow: 0 10px 22px rgba(109, 40, 217, 0.12);
}

.sa-form-titles {
  flex: 1;
  min-width: 0;
}

.sa-form-titles h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--brand-ink);
}

.sa-form-titles p,
.sa-form .plan-sub {
  margin: 0.28rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}

.sa-form-head .text-btn,
.sa-form-head .add-org-btn,
.sa-form-head .icon-btn {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.action-card-head .icon-btn {
  flex-shrink: 0;
}

.header-back-cluster {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.sa-form-steps {
  display: flex;
  align-items: stretch;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sa-form-steps li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.4rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
}

.sa-form-steps li span {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
}

.sa-form-steps li em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-form-steps li[data-on] {
  border-color: color-mix(in srgb, var(--purple) 35%, var(--line));
  background: var(--purple-soft);
  color: var(--purple-ink);
}

.sa-form-steps li[data-on] span {
  background: var(--purple);
  color: #fff;
}

.sa-form-body,
.sa-form-panel,
.sa-form .plan-main,
.sa-form .plan-side,
.sa-form .org-add-review {
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--line) 80%, #fff);
  border-radius: 1.5rem;
  box-shadow: 0 16px 40px rgba(18, 32, 43, 0.06);
}

.sa-form-body {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  padding: 1.15rem 1.15rem 1.25rem;
  overflow: visible;
}

.sa-form-wide .sa-form-body {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.sa-form-panel {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  padding: 1.15rem 1.15rem 1.25rem;
}

.sa-form .plan-main,
.sa-form .plan-side {
  padding: 1.15rem 1.15rem 1.25rem;
}

.sa-form .plan-side h2 {
  font-family: var(--serif);
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--brand-ink);
}

.sa-form-kicker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.1rem 0 0.15rem;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--brand-ink);
}

.sa-form-kicker .pict {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: #f3e8ff;
  color: #7c3aed;
}

.sa-form-kicker[data-tone='blue'] .pict {
  background: #e0f2fe;
  color: #0284c7;
}

.sa-form-kicker[data-tone='green'] .pict {
  background: #e8f8ee;
  color: #16a34a;
}

.sa-form-kicker[data-tone='orange'] .pict {
  background: #ffedd5;
  color: #ea580c;
}

.sa-form .field {
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--ink);
}

.sa-form .field > label {
  color: var(--ink);
}

.sa-form .field input,
.sa-form .field select,
.sa-form .field textarea,
.sa-form .limit-card input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: var(--touch);
  border: 1px solid var(--line);
  border-radius: 0.95rem;
  padding: 0 1rem;
  background: #fbfcfe;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.sa-form .field[data-as='select'] .field-control {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.sa-form .field[data-as='select'] select {
  appearance: none;
  width: 100%;
  max-width: 100%;
  padding-right: 2.4rem;
}

.sa-form .field input,
.sa-form .field select,
.sa-form .limit-card input {
  height: var(--touch);
}

.sa-form .field[data-icon] input,
.sa-form .field[data-icon] select,
.sa-form .field[data-icon] textarea {
  padding-left: 2.65rem;
}

.sa-form .field textarea {
  height: auto;
  min-height: 6.5rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  resize: vertical;
}

.sa-form .field input:hover,
.sa-form .field select:hover,
.sa-form .field textarea:hover,
.sa-form .limit-card input:hover {
  border-color: color-mix(in srgb, var(--purple) 28%, var(--line));
}

.sa-form .field input:focus-visible,
.sa-form .field select:focus-visible,
.sa-form .field textarea:focus-visible,
.sa-form .limit-card input:focus-visible,
.sa-form .package-pick-item:focus-within {
  outline: 2px solid color-mix(in srgb, var(--purple) 42%, transparent);
  outline-offset: 2px;
  border-color: var(--purple);
}

.sa-form .field input:disabled,
.sa-form .field select:disabled,
.sa-form .field textarea:disabled,
.sa-form .limit-card input:disabled,
.sa-form .primary-btn:disabled,
.sa-form .text-btn:disabled {
  opacity: 0.55;
  background: var(--surface);
  cursor: not-allowed;
}

.sa-form .field input[aria-invalid='true'],
.sa-form .field[data-invalid] input,
.sa-form .limit-card[data-invalid] input {
  border-color: var(--warn);
  background: #fff8f7;
}

.sa-form .field input[aria-invalid='true']:focus-visible,
.sa-form .field[data-invalid] input:focus-visible,
.sa-form .limit-card[data-invalid] input:focus-visible {
  outline-color: color-mix(in srgb, var(--warn) 45%, transparent);
}

.sa-form .warn-copy {
  margin: 0;
  color: var(--warn);
  font-size: 0.82rem;
}

.sa-form .limit-card {
  border-radius: 1.25rem;
  padding: 0.95rem;
  box-shadow: 0 8px 20px rgba(18, 32, 43, 0.04);
}

.sa-form .package-pick-item {
  border-radius: 1.25rem;
  padding: 1rem 1.05rem;
  box-shadow: 0 8px 20px rgba(18, 32, 43, 0.04);
}

.sa-form .package-pick-item[data-on] {
  border-color: var(--purple);
  background: color-mix(in srgb, var(--purple-soft) 55%, #fff);
  box-shadow: 0 10px 24px rgba(109, 40, 217, 0.08);
}

.sa-form .org-add-review {
  display: grid;
  grid-template-columns: minmax(6rem, 8.5rem) minmax(0, 1fr);
  gap: 0.55rem 1rem;
  align-items: baseline;
  padding: 1.05rem 1.15rem;
}

.sa-form .org-add-review .muted {
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sa-form .org-add-review strong {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--brand-ink);
}

.sa-form .field-with-mic {
  align-items: flex-end;
}

.sa-form .field-with-mic .mic-btn,
.sa-form .field-with-mic .voice-btn,
.sa-form .ai-prompt-bar {
  border-radius: 1.05rem;
}

.sa-form .org-add-actions {
  margin-top: 0.15rem;
}

.sa-form .primary-btn {
  min-height: var(--touch);
  border-radius: 999px;
  background: linear-gradient(180deg, #6f3de8 0%, var(--purple) 100%);
  box-shadow: 0 10px 22px rgba(109, 40, 217, 0.22);
}

.sa-form-list .sa-form-body {
  gap: 0.85rem;
}

.sa-form-list .people-list,
.sa-form-list .card-grid {
  gap: 0.75rem;
}

.sa-form-list .person-card,
.sa-form-list .icon-card {
  border-radius: 1.25rem;
  box-shadow: 0 10px 24px rgba(18, 32, 43, 0.05);
}

.sa-form-list .person-card {
  padding: 0.9rem 1rem;
}

.sa-form-list .person-card strong,
.sa-form-list .icon-card strong {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--brand-ink);
}

.sa-form-list .icon-card {
  min-height: 7.6rem;
  padding: 1rem;
}

.sa-form-list .icon-card .pict,
.sa-form-list .person-card .pict {
  background: var(--purple-soft);
  color: var(--purple);
}

.sa-form-list .badge {
  align-self: flex-start;
  min-width: 1.7rem;
  background: var(--purple-soft);
  color: var(--purple-ink);
  border: 0;
}


.sites-record-toolbar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1rem;
}

.sites-section-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.1rem 0 0.65rem;
}

.sites-section-head .pict {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.75rem;
}

.sites-section-head h2 {
  margin: 0;
  font-size: 1rem;
}

.sites-page-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.sites-page-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 22px rgba(16, 32, 48, 0.06);
}

.sites-page-row .pict {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.85rem;
}

.sites-page-row strong {
  font-size: 1rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sites-page-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sites-status-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #c4b5fd;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
}

.sites-status-dot[data-status='published'] {
  background: #34d399;
}

.sites-status-dot[data-status='archived'] {
  background: #94a3b8;
}

.sites-page-row-actions .icon-btn {
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
}

.sites-add-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: end;
}

.sa-form-slim {
  gap: 0.35rem;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.sa-form-slim > .sa-form-body {
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sites-pagekit-shell {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  flex: 1 1 0%;
  height: 100%;
  overflow: hidden;
}


/* Page editor: collapse leftover slim SaForm header so Back row sits flush under the app shell. */
.app-shell[data-page-builder='true'] .sa-form[data-screen='sites-pagekit'],
[data-workspace='sites-mode-b'].mode-b-shell[data-page-builder='true'] .sa-form[data-screen='sites-pagekit'] {
  gap: 0;
  margin: 0;
  padding: 0;
  min-height: 0;
}
.app-shell[data-page-builder='true'] .sa-form[data-screen='sites-pagekit'] > .sa-form-head,
[data-workspace='sites-mode-b'].mode-b-shell[data-page-builder='true'] .sa-form[data-screen='sites-pagekit'] > .sa-form-head {
  display: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  height: 0;
  overflow: hidden;
  border: 0;
}
.app-shell[data-page-builder='true'] .sa-form[data-screen='sites-pagekit'] > .sa-form-body,
.app-shell[data-page-builder='true'] .sa-form[data-screen='sites-pagekit'] .sites-pagekit-shell,
[data-workspace='sites-mode-b'].mode-b-shell[data-page-builder='true'] .sa-form[data-screen='sites-pagekit'] > .sa-form-body,
[data-workspace='sites-mode-b'].mode-b-shell[data-page-builder='true'] .sites-pagekit-shell {
  gap: 0;
  margin: 0;
  padding: 0;
  min-height: 0;
}
.app-shell[data-page-builder='true'] > main,
[data-workspace='sites-mode-b'].mode-b-shell[data-page-builder='true'] > main {
  padding-top: 0;
  margin-top: 0;
}

.app-shell[data-page-builder='true'] {
  padding-bottom: 0;
  overflow: hidden;
}
.app-shell[data-page-builder='true'] > .bottom-nav {
  display: none;
}
.app-shell[data-page-builder='true'] > main {
  flex: 1 1 0%;
  height: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.app-shell[data-page-builder='true'] .sa-form[data-screen='sites-pagekit'],
.app-shell[data-page-builder='true'] .sa-form[data-screen='sites-pagekit'] > .sa-form-body,
.app-shell[data-page-builder='true'] .sites-pagekit-shell,
.app-shell[data-page-builder='true'] .sites-pagekit-shell > * {
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.app-shell[data-page-builder='true'] .sites-canva,
.app-shell[data-page-builder='true'] .sites-canva-workspace {
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
.app-shell[data-page-builder='true'] .sites-canva-stage {
  flex: 1 1 0%;
  height: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.app-shell[data-page-builder='true'] .sites-canva-stage-end {
  min-height: 8rem;
}


.sites-canva {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
  min-height: 0;
  min-width: 0;
  flex: 1 1 0%;
  height: 100%;
  max-height: 100%;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #eef1f8;
  box-shadow: 0 12px 32px rgba(16, 32, 48, 0.08);
}

.sites-canva > * {
  min-height: 0;
  min-width: 0;
}

.sites-canva a[href] {
  cursor: default;
}

.sites-canva-nav {
  position: relative;
  z-index: 60;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  align-self: stretch;
  min-height: 0;
}

.sites-canva-rail {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  gap: 0.35rem;
  padding: 0.55rem 0.4rem;
  background: #fff;
  border-right: 1px solid rgba(15, 23, 42, 0.06);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.sites-canva-rail-btn {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  width: 3.6rem;
  padding: 0.55rem 0.2rem;
  border: 0;
  border-radius: 0.85rem;
  background: transparent;
  color: #475569;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 650;
  cursor: pointer;
}

.sites-canva-rail-btn[data-active='true'] {
  background: #e8f2ff;
  color: var(--brand);
}

.sites-canva-panel {
  position: absolute;
  z-index: 61;
  left: 100%;
  top: 0;
  bottom: 0;
  width: 5.5rem;
  min-width: 5.5rem;
  padding: 0.65rem 0.55rem;
  background: #fff;
  border-right: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 10px 0 28px rgba(15, 23, 42, 0.14);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.sites-canva-panel[data-wide='true'] {
  width: 15.5rem;
  min-width: 15.5rem;
}

.sites-canva-panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  justify-items: center;
}

.sites-canva-panel-item {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 0.85rem;
  background: #f5f7ff;
  color: #0f172a;
  font: inherit;
  cursor: pointer;
}

.sites-canva-panel-item-labeled {
  width: 100%;
  height: auto;
  min-height: 2.75rem;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.4rem;
}

.sites-canva-panel-item-label {
  font-size: 0.72rem;
  line-height: 1.15;
  text-align: left;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sites-canva-panel-item:hover {
  background: #e8f2ff;
  color: var(--brand);
}

.sites-canva-panel-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sites-canva-panel-item .pict {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.7rem;
  display: grid;
  place-items: center;
}

.sites-canva-workspace {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.sites-canva-main {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.sites-canva-workspace > .sites-canva-topbar,
.sites-canva-workspace > .sites-canva-propsbar {
  flex: 0 0 auto;
}

.sites-canva-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.55rem;
  min-height: 3.35rem;
  padding: 0.45rem 0.75rem;
  background: #fff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.sites-canva-propsbar {
  position: relative;
  z-index: 50;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  min-height: 3rem;
  padding: 0.4rem 0.75rem 0.55rem;
  background: #fff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  overflow: visible;
}

/* Settings opens from the right as a flush overlay drawer — does not shrink the canvas. */
.sites-canva > .sites-canva-propsbar[data-placement='right'],
.sites-canva-propsbar[data-placement='right'] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  transform: none;
  width: min(22.5rem, 100%);
  max-width: 22.5rem;
  min-width: 18rem;
  z-index: 70;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  align-items: stretch;
}

.sites-canva-propsbar[data-placement='right'] .sites-settings-overlay {
  pointer-events: auto;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.45rem;
  padding: 0.75rem 0.8rem 0.85rem;
  background: #fff;
  border: 0;
  border-left: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0;
  box-shadow: -16px 0 40px rgba(15, 23, 42, 0.14);
  overflow: hidden;
}

.sites-settings-overlay-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 0 0 auto;
  width: 100%;
}

.sites-settings-overlay-title {
  font: 700 0.86rem/1.2 system-ui, Segoe UI, sans-serif;
  color: #0f172a;
}

.sites-settings-overlay-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sites-settings-overlay-cancel {
  appearance: none;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  color: #0f172a;
  border-radius: 0.55rem;
  padding: 0.35rem 0.65rem;
  font: 650 0.75rem/1.2 system-ui, Segoe UI, sans-serif;
  cursor: pointer;
}

.sites-settings-overlay-cancel:hover {
  background: #eef2ff;
}

.sites-canva-propsbar[data-placement='right'] .sites-hero-props-portal,
.sites-canva-propsbar[data-placement='right'] .sites-element-settings {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start;
  gap: 0.45rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
}

.sites-canva-propsbar[data-placement='right'] .sites-element-settings-header,
.sites-canva-propsbar[data-placement='right'] .sites-element-settings-tabs,
.sites-canva-propsbar[data-placement='right'] .sites-element-settings-pane,
.sites-canva-propsbar[data-placement='right'] .sites-canva-pop,
.sites-canva-propsbar[data-placement='right'] .sites-canva-pop-inline,
.sites-canva-propsbar[data-placement='right'] .sites-element-settings-section,
.sites-canva-propsbar[data-placement='right'] .sites-element-style-groups,
.sites-canva-propsbar[data-placement='right'] .sites-settings-accordion,
.sites-canva-propsbar[data-placement='right'] .sites-settings-accordion-body {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  max-height: none;
  min-height: 0;
}

.sites-canva-propsbar[data-placement='right'] .sites-element-settings-tabs {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  background: #fff;
}

.sites-canva-propsbar[data-placement='right'] .sites-settings-accordion {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: visible;
}

.sites-canva-propsbar[data-placement='right'] .sites-settings-accordion-trigger {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}

.sites-canva-propsbar[data-placement='right'] .sites-settings-accordion-body {
  position: relative;
  z-index: 0;
  overflow: visible;
  transform: none;
  top: auto;
  margin-top: 0;
}

.sites-canva-propsbar[data-dock='right'] {
  flex: 0 0 min(22rem, 42vw);
  width: min(22rem, 42vw);
  max-width: 22rem;
  min-height: 0;
  height: 100%;
  align-self: stretch;
  padding: 0.65rem 0.7rem 1rem;
  border-bottom: 0;
  border-left: 1px solid rgba(15, 23, 42, 0.08);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: -8px 0 24px rgb(15 23 42 / 4%);
}

.sites-canva-main > .sites-canva-stage {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  height: 0;
  align-self: stretch;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: auto;
}

.sites-canva-propsbar .sites-hero-props-portal {
  width: 100%;
  max-width: none;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-end;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.sites-canva-propsbar .sites-canva-pop {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  max-width: none;
  box-shadow: none;
  border: 1px solid #e8e8ed;
}

.sites-canva-props-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  width: 100%;
  align-items: flex-end;
}

.sites-canva-props-error {
  margin: 0;
  color: #b42318;
  font-size: 0.85rem;
}

.sites-canva-context-slot {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.6rem;
}

.sites-canva-context-slot > .sites-hero-props-portal {
  grid-area: 1 / 1;
  z-index: 1;
}

.sites-canva-context-slot > .sites-pagekit-title,
.sites-canva-context-slot > .sites-canva-context {
  grid-area: 1 / 1;
  transition: opacity 0.14s ease;
}

.sites-canva-context-slot > [data-hidden='true'] {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.sites-canva-context {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow: visible;
}

.sites-canva-type {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem;
  border-radius: 0.85rem;
  background: #eef2ff;
  color: #312e81;
}

.sites-canva-type .pict {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.65rem;
  background: #fff;
}

.sites-canva-type strong {
  display: none;
}

.sites-canva-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.15rem;
  padding: 0.3rem 0.65rem;
  border: 0;
  border-radius: 0.85rem;
  background: #e8f2ff;
  color: var(--brand);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.sites-canva-tool:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sites-canva-tool[aria-pressed='true'] {
  background: #dbeafe;
  color: var(--brand);
}

.sites-canva-tool-icon {
  display: inline-grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
}

.sites-canva-tool-label {
  white-space: nowrap;
}

.sites-canva-tool-icon-only {
  width: 2.15rem;
  min-width: 2.15rem;
  height: 2.15rem;
  min-height: 2.15rem;
  padding: 0;
  justify-content: center;
  gap: 0;
  border-radius: 999px;
}

/* PageKit topbar actions: thin line-art icons in light rounded squares (ref). */
.sites-pagekit-toolbar-actions .sites-canva-tool-icon-only {
  border: 1px solid #e2e8f0;
  border-radius: 0.55rem;
  background: #fff;
  color: #2d3748;
  box-shadow: none;
}

.sites-pagekit-toolbar-actions .sites-canva-tool-icon-only:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e0;
  color: #1a202c;
}

.sites-pagekit-toolbar-actions .sites-canva-tool-icon-only:disabled {
  opacity: 1;
  color: #cbd5e0;
  border-color: #edf2f7;
  background: #fff;
  cursor: not-allowed;
}

.sites-pagekit-toolbar-actions .sites-canva-tool-icon-only[aria-pressed='true'] {
  background: #edf2f7;
  border-color: #cbd5e0;
  color: #2d3748;
}

.sites-canva-context .pict {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.75rem;
}

.sites-canva-context .icon-btn {
  width: 2.15rem;
  height: 2.15rem;
  min-width: 2.15rem;
  min-height: 2.15rem;
}

.sites-pagekit-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.35rem 0.55rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 22px rgba(16, 32, 48, 0.06);
}

.sites-pagekit-title .pict {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.75rem;
}

.sites-pagekit-title input {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 650;
  width: 100%;
  min-width: 0;
  outline: none;
}

.sites-canva-topbar > .sites-canva-insert-trigger {
  flex: 0 0 auto;
  order: -1;
}

.sites-insert-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.28);
}

.sites-insert-panel {
  display: flex;
  align-items: stretch;
  width: min(52rem, 100%);
  max-height: min(36rem, calc(100% - 1.5rem), calc(100dvh - 1.5rem));
  overflow: hidden;
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  outline: none;
}

.sites-insert-nav {
  display: flex;
  flex: 0 0 13.5rem;
  flex-direction: column;
  gap: 0.15rem;
  min-height: 0;
  max-height: 100%;
  padding: 0.75rem 0.55rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #f8fafc;
  border-right: 1px solid #e8e8ed;
}

.sites-insert-nav-divider {
  height: 1px;
  margin: 0.45rem 0.4rem;
  background: #e2e8f0;
}

.sites-insert-nav-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.6rem;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: #334155;
  font: 600 0.84rem/1.2 system-ui, Segoe UI, sans-serif;
  text-align: left;
  cursor: pointer;
}

.sites-insert-nav-item:hover {
  background: #eef2f7;
}

.sites-insert-nav-item[data-active='true'] {
  background: #e8f1ff;
  color: #1e3a8a;
}

.sites-insert-nav-icon {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  color: inherit;
  opacity: 0.9;
}

.sites-insert-nav-label {
  min-width: 0;
}

.sites-insert-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  background: #fde047;
  color: #111827;
  font: 700 0.62rem/1 system-ui, Segoe UI, sans-serif;
  letter-spacing: 0.01em;
}

.sites-insert-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  padding: 0.85rem 1rem 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.sites-insert-header {
  position: sticky;
  top: -0.85rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: -0.85rem -1rem 0.85rem;
  padding: 0.85rem 1rem 0.65rem;
  background: #fff;
}

.sites-insert-header h2 {
  margin: 0;
  font: 700 1.05rem/1.2 system-ui, Segoe UI, sans-serif;
  color: #0f172a;
}

.sites-insert-close {
  appearance: none;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: #64748b;
  font: 500 1.45rem/1 system-ui, Segoe UI, sans-serif;
  cursor: pointer;
}

.sites-insert-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.sites-insert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.sites-insert-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.75rem 0.65rem 0.7rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.65rem;
  background: #fff;
  color: #334155;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.sites-insert-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.1);
}

.sites-insert-drag {
  display: grid;
  place-items: center;
  height: 0.7rem;
}

.sites-insert-glyph {
  display: block;
}

.sites-insert-card-label {
  font: 650 0.82rem/1.2 system-ui, Segoe UI, sans-serif;
  color: #1e293b;
}

.sites-insert-empty {
  margin: 2rem 0.5rem;
  text-align: center;
}

.sites-insert-groups {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.sites-insert-group {
  display: flex;
  flex-direction: column;
}

.sites-insert-group-title {
  margin: 0 0 0.55rem;
  color: #334155;
  font: 700 0.92rem/1.2 system-ui, Segoe UI, sans-serif;
}

.sites-insert-element-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.sites-insert-element-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.7rem 0.45rem 0.65rem;
  min-height: 7.2rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.65rem;
  background: #fff;
  color: #334155;
  cursor: pointer;
}

.sites-insert-element-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.1);
}

.sites-insert-element-glyph {
  display: block;
  margin: 0.15rem 0;
}

.sites-insert-element-badge {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  background: #fde047;
  color: #111827;
  font: 700 0.62rem/1 system-ui, Segoe UI, sans-serif;
}

@media (max-width: 720px) {
  .sites-insert-element-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sites-canva-autosave {
  appearance: none;
  border: 1px solid #dbe4f0;
  background: #fff;
  color: #475569;
  font: 650 0.72rem/1 system-ui, Segoe UI, sans-serif;
  padding: 0.38rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.sites-canva-autosave[aria-pressed='true'] {
  background: #ecfdf3;
  border-color: #86efac;
  color: #166534;
}

.sites-canva-save-hint {
  font: 600 0.72rem/1 system-ui, Segoe UI, sans-serif;
  color: #64748b;
  white-space: nowrap;
}

.sites-canva-save-hint[data-error='true'] {
  color: #b42318;
}

.sites-pagekit-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  margin-left: auto;
  margin-top: 0.35rem;
}

.sites-canva-stage {
  min-height: 0;
  flex: 1 1 0%;
  height: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: 6rem;
  scroll-padding-top: 1rem;
  display: block;
  background:
    radial-gradient(circle at top, rgba(0, 85, 255, 0.05), transparent 45%),
    linear-gradient(180deg, #f3f5fb, #e9edf7);
}

.sites-canva-artboard {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: min-content;
  height: auto;
  flex: 0 0 auto;
  margin: 0;
  overflow: visible;
  /* Page is a stack of sections — never draw a page/artboard selection frame. */
  border: 0;
  outline: none;
  box-shadow: none;
  border-radius: 0;
}

.sites-canva-device-frame {
  width: 100%;
  max-width: none;
  flex: 0 0 auto;
  margin: 0;
  overflow: visible;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
}

.sites-canva-device-frame[data-device='desktop'] {
  width: 100%;
  max-width: none;
  min-height: 100%;
  margin: 0;
}

.sites-canva-device-frame[data-device='desktop'] .sites-canva-artboard {
  width: 100%;
  max-width: none;
  min-height: 100%;
  background: #fff;
  box-shadow: none;
}

.sites-canva-stage-end {
  flex: 0 0 auto;
  width: 100%;
  min-height: 6.5rem;
  pointer-events: none;
}

.sites-canva-device-frame[data-device='tablet'] {
  width: min(48rem, 100%);
  max-width: 100%;
  margin-inline: auto;
}

.sites-canva-device-frame[data-device='mobile'] {
  width: min(23.4375rem, 100%);
  max-width: 100%;
  margin-inline: auto;
}

.sites-canva-device-frame[data-device='tablet'] .sites-canva-artboard,
.sites-canva-device-frame[data-device='tablet'] .sites-canva-section-board {
  max-width: 100%;
}

.sites-canva-device-frame[data-device='mobile'] .sites-canva-artboard {
  max-width: 100%;
}

.sites-canva-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0.65rem;
  border-radius: 0.75rem;
  border: 1px dashed rgba(15, 23, 42, 0.12);
  background: transparent;
}

.sites-canva-section-artboard {
  position: relative;
  display: block;
  overflow: hidden;
  margin-inline: auto;
  max-width: 100%;
  background-clip: padding-box;
  /* Do not inherit flow-section dashed padding chrome — that reads as a second page box. */
  padding: 0;
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
}

.sites-canva-section-board {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px) 0 0 / 24px 24px,
    transparent;
}

.sites-canva-section-artboard .sites-pagekit-section-scale {
  width: 100%;
}

.sites-canva-section-label {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.35rem;
  padding: 0.12rem 0.2rem;
  border: 0;
  background: transparent;
  font: 650 0.68rem/1 system-ui, Segoe UI, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  cursor: pointer;
  pointer-events: auto;
}

.sites-canva-section-artboard .sites-canva-section-label {
  position: absolute;
  z-index: 5;
  top: 0.45rem;
  left: 0.55rem;
  margin: 0;
}

.sites-canva-section[data-selected='true'] {
  border-style: solid;
  border-color: rgba(124, 58, 237, 0.45);
}

.sites-canva-section-artboard[data-selected='true'] {
  border: 0;
  outline: none;
  box-shadow: none;
}

.sites-canva-section-artboard[data-selected='true'] .sites-canva-section-board {
  box-shadow: inset 0 0 0 2px #7c3aed;
}

.sites-canva-section-artboard[data-drop-hover='true'] {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}

.sites-canva-section-resize {
  position: absolute;
  z-index: 6;
  border: 0;
  padding: 0;
  background: #fff;
  box-shadow: 0 0 0 1.5px #7c3aed;
}

.sites-canva-section-resize-s {
  left: 50%;
  bottom: -0.35rem;
  width: 2.4rem;
  height: 0.55rem;
  margin-left: -1.2rem;
  border-radius: 999px;
  cursor: ns-resize;
}

.sites-canva-section-resize-e {
  top: 50%;
  right: -0.35rem;
  width: 0.55rem;
  height: 2.4rem;
  margin-top: -1.2rem;
  border-radius: 999px;
  cursor: ew-resize;
}

.sites-canva-section-resize-se {
  right: -0.4rem;
  bottom: -0.4rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  cursor: nwse-resize;
}

.sites-canva-section-size-chip {
  position: absolute;
  right: 0.55rem;
  bottom: 0.45rem;
  z-index: 5;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.sites-canva-panel-size {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0.15rem;
  width: 2.75rem;
  padding: 0.35rem 0.2rem;
  border-radius: 0.85rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 0.62rem;
  font-weight: 700;
  color: #64748b;
  text-align: center;
}

.sites-canva-panel-size input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0f172a;
  outline: none;
  text-align: center;
}

.sites-pagekit-section {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
  margin-bottom: 0;
}

.sites-pagekit-section-artboard {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  background: #fff;
}

.sites-pagekit-block-artboard {
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  min-width: 0;
  flex: none;
}

.sites-pagekit-block-artboard .sites-pagekit-preview-fill {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  min-height: 100%;
}

.sites-pagekit-block-artboard[data-type='shape'] .sites-pagekit-preview-fill,
.sites-pagekit-block-artboard[data-type='menu_bar'] .sites-pagekit-preview-fill {
  display: block;
}

.sites-pagekit-block-artboard .sites-pagekit-preview-fill h2,
.sites-pagekit-block-artboard .sites-pagekit-preview-fill p {
  margin: 0;
  width: 100%;
  font-size: inherit;
  line-height: inherit;
}

.sites-website-shell {
  min-height: 100dvh;
  background: #fff;
}

/* Preview / public: same paper as the editor; height follows designed content (Canva WYSIWYG). */
.sites-website .sites-canva-artboard,
[data-screen='sites-preview'] .sites-canva-artboard,
[data-screen='sites-public'] .sites-canva-artboard {
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: auto;
  box-shadow: none;
}


.sites-website-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.85rem;
  background: #0f172a;
  color: #f8fafc;
}

.sites-website-toolbar-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #e2e8f0;
  font: inherit;
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
}

.sites-website-toolbar-btn:hover {
  color: #fff;
}

.sites-website-toolbar-title {
  margin-left: auto;
  font-size: 0.85rem;
  opacity: 0.85;
}

.sites-html-package {
  display: block;
  width: 100%;
  min-height: 100dvh;
  border: 0;
  background: #fff;
}

.sites-html-zip-pick {
  appearance: none;
  border: 1px solid #d1d5db;
  border-radius: 0.55rem;
  background: #fff;
  padding: 0.45rem 0.7rem;
  font: inherit;
  cursor: pointer;
}

.sites-website {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: calc(100dvh - 2.5rem);
  /* Default paper; inline pageBoxStyle / section paint override when set. */
  background-color: #fff;
}

.sites-website-chrome .sites-pagekit-canvas,
.sites-website-main .sites-pagekit-canvas {
  width: 100%;
  max-width: none;
}

.sites-website-header {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.sites-website-footer {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  margin-top: auto;
}

.sites-website-main {
  flex: 0 0 auto;
}

.sites-website .sites-pagekit-section-artboard {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  max-width: none;
  width: 100%;
  background: transparent;
}

.sites-website .sites-pagekit-section {
  margin-bottom: 0;
}

.sites-website-header .sites-pagekit-section-artboard,
.sites-website-footer .sites-pagekit-section-artboard {
  overflow: hidden;
  margin-bottom: 0;
}

.sites-website-chrome .sites-pagekit-preview,
.sites-website-chrome .sites-menubar {
  min-height: 0;
}


.sites-preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.65rem 1rem;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  position: sticky;
  top: 0;
  z-index: 5;
}

.sites-preview-back {
  font-weight: 600;
  text-decoration: none;
  color: #4c1d95;
}

.sites-preview-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.sites-preview-meta strong {
  font-size: 0.95rem;
  color: #0f172a;
}

.sites-preview-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-left: auto;
}

.sites-preview-nav a {
  text-decoration: none;
  color: #334155;
  font-size: 0.9rem;
}

.sites-preview-stage {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.sites-preview-stage .sites-pagekit-canvas {
  width: 100%;
  max-width: 100%;
}

.sites-preview-capture {
  width: min(28rem, 100%);
  margin-top: 0.5rem;
}

.sites-preview-note {
  width: min(40rem, 100%);
  text-align: center;
  font-size: 0.85rem;
}

.sites-canva-block-artboard {
  margin: 0;
  padding: 0 !important;
  box-sizing: border-box;
  overflow: hidden;
  background: transparent;
  border-radius: 0.1rem;
  min-width: 0;
}

.sites-canva-block-artboard[data-selected='true'] {
  /* Keep frame.z — do not force selected above siblings (breaks Send to back). */
  outline: 1.5px solid #7c3aed;
  outline-offset: 0;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}

.sites-canva-block-artboard[data-type='shape'][data-selected='true'],
.sites-canva-block-artboard[data-type='shape'][data-editing='true'] {
  background: transparent;
}

.sites-canva-block-artboard[data-editing='true'] {
  cursor: text;
  background: rgba(255, 255, 255, 0.92);
}

.sites-canva-block-clip {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0.1rem;
}

.sites-canva-block-body-artboard {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  gap: 0;
}

.sites-canva-block-body-artboard .sites-pagekit-preview-fill,
.sites-canva-block-body-artboard .sites-canva-inline {
  width: 100%;
  height: 100%;
}

.sites-canva-block-body-artboard .sites-pagekit-preview-fill {
  display: flex;
  align-items: flex-start;
  min-height: 100%;
}

.sites-canva-block-artboard[data-type='shape'] .sites-pagekit-preview-fill,
.sites-pagekit-block-artboard[data-type='shape'] .sites-pagekit-preview-fill,
.sites-canva-block-artboard[data-type='menu_bar'] .sites-pagekit-preview-fill,
.sites-pagekit-block-artboard[data-type='menu_bar'] .sites-pagekit-preview-fill {
  display: block;
  height: 100%;
}

.sites-canva-block-body-artboard .sites-pagekit-preview-fill h2,
.sites-canva-block-body-artboard .sites-pagekit-preview-fill p {
  margin: 0;
  width: 100%;
  font-size: inherit;
  line-height: inherit;
  background: transparent;
}

.sites-canva-block-body-artboard .sites-canva-inline-input {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 0;
  overflow: hidden;
}

.sites-canva-size-chip {
  position: absolute;
  left: 50%;
  bottom: -1.85rem;
  transform: translateX(-50%);
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: auto;
}

.sites-canva-size-chip label {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  margin: 0;
  color: inherit;
  font: inherit;
}

.sites-canva-size-chip input {
  width: 2.6rem;
  border: 0;
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-align: center;
  outline: none;
  padding: 0.05rem 0.1rem;
  /* hide number spinners */
  -moz-appearance: textfield;
}

.sites-canva-size-chip input::-webkit-outer-spin-button,
.sites-canva-size-chip input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sites-canva-font-readout {
  display: inline-flex;
  align-items: center;
  min-height: 2.15rem;
  padding: 0 0.45rem;
  border-radius: 0.85rem;
  background: #f1f5f9;
  color: #334155;
  font-size: 0.75rem;
  font-weight: 650;
}

.sites-canva-tool-text {
  font-size: 0.85rem;
  font-weight: 750;
  line-height: 1;
}

.sites-canva-handle-live {
  padding: 0;
  cursor: nwse-resize;
  z-index: 20;
  pointer-events: auto !important;
  touch-action: none;
  background: #fff !important;
  border: 2px solid #7c3aed !important;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.22);
}

.sites-canva-handle-live::before {
  content: '';
  position: absolute;
  inset: -0.65rem;
}

.sites-canva-handle-live.sites-canva-handle-n,
.sites-canva-handle-live.sites-canva-handle-s {
  cursor: ns-resize;
}

.sites-canva-handle-live.sites-canva-handle-e,
.sites-canva-handle-live.sites-canva-handle-w {
  cursor: ew-resize;
}

.sites-canva-handle-live.sites-canva-handle-ne,
.sites-canva-handle-live.sites-canva-handle-sw {
  cursor: nesw-resize;
}

.sites-canva-handle-nw,
.sites-canva-handle-ne,
.sites-canva-handle-sw,
.sites-canva-handle-se {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
}

.sites-canva-handle-n,
.sites-canva-handle-s {
  width: 1.35rem;
  height: 0.45rem;
  border-radius: 999px;
  left: 50%;
  transform: translateX(-50%);
}

.sites-canva-handle-e,
.sites-canva-handle-w {
  width: 0.45rem;
  height: 1.35rem;
  border-radius: 999px;
  top: 50%;
  transform: translateY(-50%);
}

.sites-canva-handle-nw { top: -0.42rem; left: -0.42rem; }
.sites-canva-handle-ne { top: -0.42rem; right: -0.42rem; }
.sites-canva-handle-sw { bottom: -0.42rem; left: -0.42rem; }
.sites-canva-handle-se { bottom: -0.42rem; right: -0.42rem; }
.sites-canva-handle-n { top: -0.22rem; }
.sites-canva-handle-s { bottom: -0.22rem; }
.sites-canva-handle-e { right: -0.22rem; }
.sites-canva-handle-w { left: -0.22rem; }

.sites-canva-float-above {
  top: -2.85rem;
  bottom: auto;
  border-radius: 999px;
  padding: 0.28rem 0.4rem;
  white-space: nowrap;
  pointer-events: auto;
}

.sites-canva-artboard > .sites-canva-block {
  margin: 0.15rem 0;
}

.sites-canva-artboard > .sites-canva-block[data-layout='half'] {
  width: calc(50% - 0.4rem);
  align-self: flex-start;
}

.sites-canva-gap {
  display: flex;
  justify-content: center;
  height: 0.85rem;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.sites-canva-artboard:hover .sites-canva-gap,
.sites-canva-gap:focus-within {
  opacity: 1;
}

.sites-canva-gap-btn {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: -0.35rem;
  border: 0;
  border-radius: 999px;
  background: #7c3aed;
  color: #fff;
  cursor: pointer;
}

.sites-canva-inline {
  display: block;
  width: 100%;
}

.sites-canva-inline-input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0.15rem 0;
  font: inherit;
  resize: none;
  outline: none;
  color: inherit;
}

.sites-canva-inline-heading {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: inherit;
}

.sites-canva-inline-paragraph,
.sites-canva-inline-form,
.sites-canva-inline-image,
.sites-canva-inline-product_list {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: inherit;
}

.sites-canva-inline-cta {
  resize: none;
  border: 0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12) !important;
}

.sites-pagekit-cta {
  word-break: normal;
  white-space: nowrap;
}

.sites-pagekit-preview-fill .sites-pagekit-cta,
.sites-canva-block-body-artboard .sites-pagekit-cta {
  width: 100%;
  height: 100%;
  min-width: max-content;
  white-space: nowrap;
  word-break: normal;
}

.sites-canva-empty {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  min-height: 12rem;
  place-content: center;
  opacity: 0.9;
}

.sites-canva-section-board > .sites-canva-empty {
  position: absolute;
  inset: 0;
  min-height: 0;
  z-index: 2;
  pointer-events: none;
}

.sites-canva-section-board > .sites-canva-empty .sites-canva-empty-actions {
  pointer-events: auto;
}

.sites-canva-empty-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sites-canva-block {
  position: relative;
  flex: 1 1 100%;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.sites-canva-block[data-layout='half'] {
  flex: 1 1 calc(50% - 0.5rem);
}

.sites-canva-block[data-selected='true'] {
  outline: none;
  outline-offset: 0;
  background: transparent;
}

.sites-canva-handle {
  position: absolute;
  z-index: 7;
  background: #fff;
  border: 2px solid #7c3aed;
  /* Decorative flow handles only — live artboard handles override below. */
  pointer-events: none;
  box-sizing: border-box;
}

.sites-canva-handle-live {
  pointer-events: auto !important;
  z-index: 20;
  touch-action: none;
}

.sites-canva-handle-nw,
.sites-canva-handle-ne,
.sites-canva-handle-sw,
.sites-canva-handle-se {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
}

.sites-canva-handle-n,
.sites-canva-handle-s {
  width: 1.25rem;
  height: 0.5rem;
  border-radius: 999px;
  left: 50%;
  transform: translateX(-50%);
}

.sites-canva-handle-e,
.sites-canva-handle-w {
  width: 0.5rem;
  height: 1.25rem;
  border-radius: 999px;
  top: 50%;
  transform: translateY(-50%);
}

.sites-canva-handle-nw { top: -0.45rem; left: -0.45rem; }
.sites-canva-handle-ne { top: -0.45rem; right: -0.45rem; }
.sites-canva-handle-sw { bottom: -0.45rem; left: -0.45rem; }
.sites-canva-handle-se { bottom: -0.45rem; right: -0.45rem; }
.sites-canva-handle-n { top: -0.28rem; }
.sites-canva-handle-s { bottom: -0.28rem; }
.sites-canva-handle-e { right: -0.28rem; }
.sites-canva-handle-w { left: -0.28rem; }

.sites-canva-block-body {
  display: grid;
  gap: 0;
  min-height: 100%;
}

.sites-canva-block-body .sites-pagekit-drag {
  justify-self: start;
}

.sites-canva-float {
  position: absolute;
  left: 50%;
  bottom: 0.35rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  max-width: calc(100% - 0.5rem);
  padding: 0.3rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
  z-index: 8;
}

.sites-canva-float-above {
  top: -2.85rem;
  bottom: auto;
  border-radius: 999px;
  padding: 0.28rem 0.4rem;
  white-space: nowrap;
}

.sites-canva-float .sites-canva-tool {
  min-height: 2rem;
  min-width: 2rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 0;
  border-radius: 999px;
  background: #f5f7ff;
}

.sites-canva-float .icon-btn {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  border-radius: 999px;
  background: #f5f7ff;
}

/* Selection chrome — Mode B: horizontal top clusters (not vertical side spines). */
.sites-selection-chrome {
  display: none;
}

.sites-canva .sites-selection-chrome {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 24;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
}

html.sites-palette-dragging .sites-insert-overlay {
  background: transparent !important;
  pointer-events: none !important;
}
html.sites-palette-dragging .sites-insert-overlay .sites-insert-panel {
  opacity: 0;
  pointer-events: none !important;
}
html.sites-palette-dragging .sites-selection-chrome,
html.sites-palette-dragging .sites-selection-chrome-rail,
html.sites-palette-dragging .sites-selection-chrome-btn,
html.sites-palette-dragging .sites-selection-chrome-add,
html.sites-palette-dragging .sites-col-add-el,
html.sites-palette-dragging .sites-section-add-pill,
html.sites-palette-dragging .sites-section-add-rule {
  pointer-events: none !important;
}

.sites-canva-section:hover > .sites-selection-chrome,
.sites-canva-section[data-selected='true'] > .sites-selection-chrome,
.sites-canva-block:hover > .sites-selection-chrome,
.sites-canva-block[data-selected='true'] > .sites-selection-chrome,
.sites-row:hover > .sites-selection-chrome,
.sites-row[data-selected='true'] > .sites-selection-chrome,
.sites-col:hover > .sites-selection-chrome,
.sites-col[data-selected='true'] > .sites-selection-chrome,
.sites-col-el:hover > .sites-selection-chrome,
.sites-col-el[data-selected='true'] > .sites-selection-chrome {
  opacity: 1;
  visibility: visible;
}

.sites-canva-section:hover:has(.sites-canva-block:hover, .sites-row:hover, .sites-col:hover, .sites-col-el:hover) > .sites-selection-chrome,
.sites-canva-section[data-selected='true']:has(.sites-canva-block:hover, .sites-row:hover, .sites-col:hover, .sites-col-el:hover) > .sites-selection-chrome,
.sites-canva-block:hover:has(.sites-row:hover, .sites-col:hover, .sites-col-el:hover, .sites-canva-block:hover) > .sites-selection-chrome,
.sites-canva-block[data-selected='true']:has(.sites-row:hover, .sites-col:hover, .sites-col-el:hover, .sites-canva-block:hover) > .sites-selection-chrome,
.sites-row:hover:has(.sites-col:hover, .sites-col-el:hover, .sites-row:hover) > .sites-selection-chrome,
.sites-row[data-selected='true']:has(.sites-col:hover, .sites-col-el:hover, .sites-row:hover) > .sites-selection-chrome,
.sites-col:hover:has(.sites-col-el:hover, .sites-row:hover) > .sites-selection-chrome,
.sites-col[data-selected='true']:has(.sites-col-el:hover, .sites-row:hover) > .sites-selection-chrome {
  opacity: 0;
  visibility: hidden;
}

.sites-canva .sites-selection-chrome-rail,
.sites-selection-chrome-rail {
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: max-content !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  gap: 0 !important;
  pointer-events: auto;
  background: #f97316;
  border-radius: 0 0 0.35rem 0.35rem;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.sites-canva .sites-selection-chrome[data-kind='section'] .sites-selection-chrome-rail,
.sites-selection-chrome[data-kind='section'] .sites-selection-chrome-rail {
  top: 0 !important;
  bottom: auto !important;
  transform: translateY(-100%) !important;
  background: #22c55e;
  border-radius: 0.35rem 0.35rem 0 0;
}

.sites-canva .sites-selection-chrome-left,
.sites-selection-chrome-left {
  left: 0 !important;
  right: auto !important;
  border-radius: 0 0 0.35rem 0;
}

.sites-canva .sites-selection-chrome[data-kind='section'] .sites-selection-chrome-left,
.sites-selection-chrome[data-kind='section'] .sites-selection-chrome-left {
  border-radius: 0.35rem 0 0 0;
}

.sites-canva .sites-selection-chrome-right,
.sites-selection-chrome-right {
  right: 0 !important;
  left: auto !important;
  border-radius: 0 0 0 0.35rem;
}

.sites-canva .sites-selection-chrome[data-kind='section'] .sites-selection-chrome-right,
.sites-selection-chrome[data-kind='section'] .sites-selection-chrome-right {
  border-radius: 0 0.35rem 0 0;
}

.sites-selection-chrome-btn {
  appearance: none;
  display: grid !important;
  place-items: center;
  flex: 0 0 auto !important;
  width: 1.85rem;
  height: 1.85rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-bottom: 0 !important;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.sites-selection-chrome-btn:last-child {
  border-right: 0 !important;
  border-bottom: 0 !important;
}

.sites-selection-chrome-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
}

.sites-selection-chrome-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.sites-selection-chrome-drag {
  cursor: grab;
}

.sites-selection-chrome-drag:active {
  cursor: grabbing;
}

.sites-selection-chrome-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  transform: translateY(100%);
  margin: 0;
  padding: 0.12rem 0.4rem;
  border-radius: 0 0 0.25rem 0.25rem;
  background: #f97316;
  color: #fff;
  font: 700 0.68rem/1.2 system-ui, Segoe UI, sans-serif;
  white-space: nowrap;
  pointer-events: none;
}

.sites-selection-chrome[data-kind='section'] .sites-selection-chrome-badge {
  background: #22c55e;
}

.sites-selection-chrome-add {
  appearance: none;
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  transform: translate(-50%, 50%);
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #f97316;
  color: #fff;
  box-shadow: 0 0 0 3px #fff;
  cursor: pointer;
  pointer-events: auto;
}

.sites-selection-chrome[data-kind='section'] .sites-selection-chrome-add {
  background: #22c55e;
}

.sites-selection-chrome-add:hover {
  filter: brightness(1.05);
}

/* Builder selection chrome + outline colors (row / column / element). */
.sites-canva .sites-selection-chrome[data-kind='row'] .sites-selection-chrome-rail,
.sites-selection-chrome[data-kind='row'] .sites-selection-chrome-rail {
  background: #2563eb !important;
}

.sites-canva .sites-selection-chrome[data-kind='column'] .sites-selection-chrome-rail,
.sites-selection-chrome[data-kind='column'] .sites-selection-chrome-rail {
  background: #c4b5fd !important;
}

.sites-canva .sites-selection-chrome[data-kind='element'] .sites-selection-chrome-rail,
.sites-selection-chrome[data-kind='element'] .sites-selection-chrome-rail {
  background: #f97316 !important;
}

.sites-selection-chrome[data-kind='row'] .sites-selection-chrome-badge {
  background: #2563eb;
}

.sites-selection-chrome[data-kind='column'] .sites-selection-chrome-badge {
  background: #c4b5fd;
  color: #4c1d95;
}

.sites-selection-chrome[data-kind='element'] .sites-selection-chrome-badge {
  background: #f97316;
}

.sites-selection-chrome[data-kind='row'] .sites-selection-chrome-add {
  background: #2563eb;
}

.sites-selection-chrome[data-kind='column'] .sites-selection-chrome-add {
  background: #c4b5fd;
  color: #4c1d95;
}

.sites-selection-chrome[data-kind='element'] .sites-selection-chrome-add {
  background: #f97316;
}

/* Hierarchy outlines — hover or selected only. Never idle. */
.sites-canva:not([data-preview='true']) .sites-canva-section:hover,
.sites-canva:not([data-preview='true']) .sites-canva-section[data-selected='true'] {
  outline: 2px solid #22c55e;
  outline-offset: 0;
}

.sites-canva:not([data-preview='true']) .sites-row:hover,
.sites-canva:not([data-preview='true']) .sites-row[data-selected='true'] {
  outline: 2px solid #2563eb;
  outline-offset: 0;
}

.sites-canva:not([data-preview='true']) .sites-col:hover,
.sites-canva:not([data-preview='true']) .sites-col[data-selected='true'] {
  outline: 2px solid #c4b5fd;
  outline-offset: 0;
}

.sites-canva:not([data-preview='true']) .sites-canva-block:not([data-kind='row']):hover,
.sites-canva:not([data-preview='true']) .sites-canva-block:not([data-kind='row'])[data-selected='true'],
.sites-canva:not([data-preview='true']) .sites-col-el:hover,
.sites-canva:not([data-preview='true']) .sites-col-el[data-selected='true'] {
  outline: 2px solid #f97316;
  outline-offset: 0;
}

.sites-canva:not([data-preview='true']) .sites-canva-block[data-kind='row']:hover,
.sites-canva:not([data-preview='true']) .sites-canva-block[data-kind='row'][data-selected='true'] {
  outline: 2px solid #2563eb;
  outline-offset: 0;
}

.sites-canva:not([data-preview='true']) .sites-canva-section:hover:has(.sites-row:hover, .sites-col:hover, .sites-col-el:hover, .sites-canva-block:hover),
.sites-canva .sites-canva-section[data-selected='true']:has(.sites-row:hover, .sites-col:hover, .sites-col-el:hover, .sites-canva-block:hover),
.sites-canva .sites-row:hover:has(.sites-col:hover, .sites-col-el:hover, .sites-row:hover),
.sites-canva .sites-row[data-selected='true']:has(.sites-col:hover, .sites-col-el:hover, .sites-row:hover),
.sites-canva .sites-col:hover:has(.sites-col-el:hover, .sites-row:hover),
.sites-canva .sites-col[data-selected='true']:has(.sites-col-el:hover, .sites-row:hover) {
  outline-color: transparent;
}

.sites-canva-section,
.sites-canva-block,
.sites-row,
.sites-col,
.sites-col-el {
  position: relative;
}

.sites-text-format-stack {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  max-width: min(42rem, 100%);
  flex: 1 1 auto;
}

.sites-text-format {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.25rem 0.4rem;
  border-radius: 0.85rem;
  background: #fff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.sites-text-format-primary {
  overflow-x: auto;
  scrollbar-width: thin;
}

.sites-text-format-secondary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.2rem;
  border-radius: 0.85rem;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.sites-text-format-strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.1rem 0.15rem;
}

.sites-text-format-strip::-webkit-scrollbar {
  display: none;
}

.sites-text-format-scroll {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  flex: 0 0 auto;
}

.sites-text-format-scroll:hover {
  background: #eef2ff;
  color: #3730a3;
}

.sites-text-format-more-hint {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
}

.sites-text-format-font select {
  max-width: 8.5rem;
  min-height: 2rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.65rem;
  background: #f8fafc;
  color: #0f172a;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
}

.sites-text-format-size {
  display: inline-flex;
  align-items: center;
  gap: 0.05rem;
  min-height: 2rem;
  padding: 0.1rem;
  border-radius: 0.65rem;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.1);
}

.sites-text-format-size button {
  width: 1.55rem;
  height: 1.55rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: #334155;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 650;
  cursor: pointer;
}

.sites-text-format-size button:hover {
  background: #eef2ff;
}

.sites-text-format-size-input {
  width: 2.2rem;
  border: 0;
  background: transparent;
  text-align: center;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
  outline: none;
}

.sites-text-format-color {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.65rem;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.1);
  cursor: pointer;
  overflow: hidden;
}

.sites-text-format-color input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.sites-text-format-color-glyph {
  display: grid;
  justify-items: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
  pointer-events: none;
}

.sites-text-format-color-glyph span {
  display: block;
  width: 0.95rem;
  height: 0.22rem;
  margin-top: 0.08rem;
  border-radius: 999px;
}

.sites-text-format-btn {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.55rem;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.sites-text-format-btn:hover {
  background: #eef2ff;
}

.sites-text-format-btn[aria-pressed='true'] {
  background: #e0e7ff;
  color: #3730a3;
}

.sites-text-format-u {
  text-decoration: underline;
  font-weight: 700;
}

.sites-text-format-s {
  text-decoration: line-through;
  font-weight: 700;
}

.sites-text-format-divider {
  width: 1px;
  height: 1.35rem;
  background: rgba(15, 23, 42, 0.12);
  flex: 0 0 auto;
}

.sites-text-format-more-wrap {
  position: relative;
  display: inline-flex;
}

.sites-text-format-more-btn {
  border-radius: 999px;
}

.sites-text-format-more {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  border: 1px solid rgba(15, 23, 42, 0.08);
  white-space: nowrap;
}

.sites-canva-context-menu {
  position: fixed;
  z-index: 80;
  min-width: 11rem;
  padding: 0.35rem;
  border-radius: 0.85rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.2);
}

.sites-canva-context-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.2rem 0.35rem 0.35rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.sites-canva-context-menu-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #64748b;
}

.sites-canva-context-menu-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 1.15rem;
  line-height: 1;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.35rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.sites-canva-context-menu-close:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}

.sites-canva-context-menu-item {
  display: block;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.sites-canva-context-menu-item:hover {
  background: #eef2ff;
  color: #3730a3;
}

.sites-canva-block-artboard[data-type='video']:not([data-editing='true']) iframe,
.sites-canva-block-artboard[data-type='video']:not([data-editing='true']) video,
.sites-canva-block-artboard[data-type='image']:not([data-editing='true']) img {
  pointer-events: none;
}

.sites-media-replace {
  width: min(20rem, 72vw);
  max-width: 20rem;
  padding: 0.55rem;
}

.sites-canva-media-pick {
  appearance: none;
  border: 1px solid rgba(55, 48, 163, 0.35);
  background: #eef2ff;
  color: #3730a3;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  border-radius: 0.55rem;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
}

.sites-canva-media-pick:hover {
  background: #e0e7ff;
}

.sites-canva-media-drive-hint {
  margin: 0.35rem 0 0.2rem;
  font-size: 0.78rem;
  line-height: 1.35;
}

.sites-canva-media-drive-hint a {
  font-weight: 600;
}

.sites-canva-media-advanced summary {
  cursor: pointer;
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 0.25rem;
}

.sites-media-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: rgba(15, 23, 42, 0.45);
  display: grid;
  place-items: center;
  padding: 1rem;
}

.sites-media-modal {
  width: min(42rem, 100%);
  max-height: min(36rem, 90dvh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
  padding: 1rem 1.1rem 0.85rem;
}

.sites-media-modal .sites-media-board {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.sites-media-modal .sites-media-grid {
  overflow: auto;
  flex: 1;
  min-height: 8rem;
  padding-bottom: 0.35rem;
}

.sites-media-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.sites-media-modal-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.sites-media-modal-close {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 0.45rem;
  cursor: pointer;
  color: #64748b;
}

.sites-media-modal-close:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}

.sites-media-modal-hint {
  margin: 0.35rem 0 0.75rem;
}

.sites-media-modal-error {
  color: #b91c1c;
  margin: 0 0 0.75rem;
}

.sites-media-card[data-selected='true'] {
  outline: 3px solid #4f46e5;
  outline-offset: 3px;
  border-radius: 0.75rem;
}

.sites-media-card[data-selected='true'] .sites-media-card-pick {
  border-color: #4f46e5;
  box-shadow: inset 0 0 0 3px rgba(79, 70, 229, 0.9);
}

.sites-media-card[data-selected='true'] .sites-media-thumb {
  filter: brightness(0.72);
}

.sites-canva-media-clear {
  appearance: none;
  border: 0;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  text-align: left;
  padding: 0;
}

.sites-canva-media-clear:hover {
  color: #b91c1c;
}

.sites-media-seq-count {
  margin: 0;
  font-size: 0.78rem;
}

.sites-media-seq-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #334155;
}

.sites-media-scroller {
  width: 100%;
  height: 100%;
  min-height: 8rem;
  overflow: hidden;
}

.sites-media-scroller-track {
  display: flex;
  gap: 0.65rem;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 0.15rem;
  box-sizing: border-box;
}

.sites-media-scroller-slide {
  flex: 0 0 72%;
  max-width: 18rem;
  height: 100%;
  scroll-snap-align: start;
  border-radius: 0.55rem;
  overflow: hidden;
  background: #e2e8f0;
}

.sites-media-slideshow {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.4rem;
}

/* Freeform frames still fill their fixed box. */
.sites-canva-block-artboard .sites-media-slideshow,
.sites-pagekit-block-artboard .sites-media-slideshow,
.sites-pagekit-preview-fill .sites-media-slideshow {
  height: 100%;
  aspect-ratio: auto;
  min-height: 0;
}

.sites-media-slideshow-stage {
  position: relative;
  min-height: 0;
  border-radius: 0.55rem;
  overflow: hidden;
  background: #e2e8f0;
}

.sites-media-slideshow-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  border: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.sites-media-slideshow-prev {
  left: 0.45rem;
}

.sites-media-slideshow-next {
  right: 0.45rem;
}

.sites-media-slideshow-dots {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
}

.sites-media-slideshow-dot {
  appearance: none;
  border: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #cbd5e1;
  cursor: pointer;
  padding: 0;
}

.sites-media-slideshow-dot[data-active='true'] {
  background: #4f46e5;
}

.sites-media-seq-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #64748b;
  font-size: 0.8rem;
  background: #f1f5f9;
}

.sites-canva-menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem;
}

.sites-chrome-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.sites-chrome-tabs button {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0.65rem 0.9rem;
  cursor: pointer;
  color: #4b5563;
  font-weight: 650;
  box-shadow: inset 0 -2px 0 transparent;
}

.sites-chrome-tabs button[data-active="true"] {
  background: transparent;
  color: #6d28d9;
  border-color: transparent;
  box-shadow: inset 0 -2px 0 #7c3aed;
}

.sites-chrome-create {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 1.25rem;
}

.sites-chrome-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.sites-chrome-card {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.85rem;
  background: #fff;
  overflow: hidden;
}

.sites-chrome-card[data-default='true'] {
  border-color: #93c5fd;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.sites-chrome-card-stage {
  display: block;
  width: 100%;
  padding: 0.75rem;
  border: 0;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  cursor: pointer;
  text-align: left;
}

.sites-chrome-card-scale {
  height: var(--chrome-snap-h, 72px);
  overflow: hidden;
  border-radius: 0.5rem;
  background: #fff;
  transform-origin: top left;
  transform: scale(0.72);
  width: 138.9%;
  pointer-events: none;
}

.sites-chrome-card-text {
  margin: 0;
  padding: 1rem 1.1rem;
  color: #64748b;
  font-size: 0.9rem;
}

.sites-chrome-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.65rem 0.85rem 0.85rem;
}

.sites-chrome-card-meta strong {
  flex: 1;
  min-width: 6rem;
}

.sites-chrome-card-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1d4ed8;
  background: #dbeafe;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}

.sites-canva-menu-card {
  display: grid;
  width: 100%;
  padding: 0.35rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.75rem;
  background: #f8fafc;
  color: #0f172a;
  cursor: pointer;
}

.sites-canva-menu-card:hover {
  background: #e8f2ff;
  border-color: #bfdbfe;
}

.sites-canva-menu-card-label {
  font-size: 0.72rem;
  font-weight: 700;
}

.sites-canva-menu-card-hint {
  font-size: 0.62rem;
  color: #64748b;
  line-height: 1.25;
}

.sites-menubar-thumb {
  display: block;
  height: 1.85rem;
  border-radius: 0.4rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.sites-menubar-thumb-inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 0.35rem;
  gap: 0.22rem;
}

.sites-menubar-thumb-inner i {
  display: block;
  height: 0.28rem;
  border-radius: 99px;
  background: #94a3b8;
}

.sites-menubar-thumb-classic i:first-child,
.sites-menubar-thumb-cta i:first-child,
.sites-menubar-thumb-pill i:first-child,
.sites-menubar-thumb-underline i:first-child,
.sites-menubar-thumb-hamburger i:first-child,
.sites-menubar-thumb-search i:first-child,
.sites-menubar-thumb-social i:first-child,
.sites-menubar-thumb-utility i:first-child,
.sites-menubar-thumb-stacked i:first-child,
.sites-menubar-thumb-island i:first-child {
  width: 1.1rem;
  background: #0f172a;
}

.sites-menubar-thumb-classic i:not(:first-child),
.sites-menubar-thumb-cta i:not(:first-child),
.sites-menubar-thumb-underline i:not(:first-child) {
  width: 0.7rem;
  margin-left: auto;
}

.sites-menubar-thumb-classic i:nth-child(2),
.sites-menubar-thumb-cta i:nth-child(2) {
  margin-left: auto;
}

.sites-menubar-thumb-split {
  justify-content: space-between;
}

.sites-menubar-thumb-split i:nth-child(3) {
  width: 1.1rem;
  background: #0f172a;
  order: 0;
}

.sites-menubar-thumb-centered {
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 0.15rem;
}

.sites-menubar-thumb-centered i:first-child {
  width: 100%;
  height: 0.22rem;
  background: #0f172a;
}

.sites-menubar-thumb-pill i:not(:first-child) {
  height: 0.55rem;
  width: 0.7rem;
  background: #e2e8f0;
  margin-left: 0;
}

.sites-menubar-thumb-pill i:nth-child(2) {
  margin-left: auto;
}

.sites-menubar-thumb-hamburger {
  justify-content: space-between;
}

.sites-menubar-thumb-hamburger i:not(:first-child) {
  width: 0.7rem;
  height: 0.12rem;
}

.sites-menubar-thumb-sidebar {
  align-items: flex-start;
  flex-direction: column;
  padding: 0.2rem 0.3rem;
}

.sites-menubar-thumb-sidebar i {
  width: 70%;
}

.sites-menubar-thumb-sidebar i:first-child {
  width: 50%;
  background: #0f172a;
}

.sites-menubar-thumb-mega {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.15rem;
  padding: 0.2rem;
}

.sites-menubar-thumb-mega i {
  width: auto;
  height: 0.7rem;
}

.sites-menubar-thumb-island {
  margin: 0.2rem 0.35rem;
  border-radius: 99px;
  background: #0f172a;
}

.sites-menubar-thumb-island i {
  background: #e2e8f0;
}

.sites-menubar-thumb-island i:first-child {
  background: #fff;
}

.sites-menubar-thumb-utility {
  flex-wrap: wrap;
}

.sites-menubar-thumb-utility i:first-child {
  width: 100%;
  height: 0.18rem;
  background: #cbd5e1;
}

.sites-menubar-thumb-search i:nth-child(2) {
  flex: 1;
  height: 0.55rem;
  background: #e2e8f0;
}

.sites-menubar-thumb-social i:last-child {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 99px;
  margin-left: auto;
}

.sites-menubar-thumb-stacked {
  flex-wrap: wrap;
}

.sites-menubar-thumb-stacked i:first-child {
  width: 1.1rem;
}

.sites-menubar-thumb-stacked i:not(:first-child) {
  width: 0.55rem;
}

.sites-menubar,
.sites-menubar-island-inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 0 1rem;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

.sites-menubar-trail {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.sites-menubar[data-branded='true']:not([data-variant='split']):not([data-variant='centered']):not([data-variant='hamburger']):not([data-variant='mega']),
.sites-menubar-island-inner[data-branded='true'],
.sites-menubar-utility-main {
  justify-content: flex-start;
}

.sites-menubar[data-branded='true']:not([data-variant='split']):not([data-variant='centered']):not([data-variant='hamburger']):not([data-variant='mega']) > .sites-menubar-trail,
.sites-menubar-island-inner[data-branded='true'] > .sites-menubar-trail,
.sites-menubar-utility-main > .sites-menubar-trail {
  margin-left: auto;
}

.sites-menubar[data-branded='false'][data-menu-align='left'],
.sites-menubar-island-inner[data-branded='false'][data-menu-align='left'] {
  justify-content: flex-start;
}

.sites-menubar[data-branded='false'][data-menu-align='center'],
.sites-menubar-island-inner[data-branded='false'][data-menu-align='center'] {
  justify-content: center;
}

.sites-menubar[data-branded='false'][data-menu-align='right'],
.sites-menubar-island-inner[data-branded='false'][data-menu-align='right'] {
  justify-content: flex-end;
}

.sites-menubar[data-branded='false'] .sites-menubar-trail .sites-menubar-cta,
.sites-menubar[data-branded='true'] .sites-menubar-trail .sites-menubar-cta {
  margin-left: 0;
}

.sites-menubar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 750;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.sites-menubar-logo {
  display: block;
  height: 1.75em;
  width: auto;
  max-width: 9rem;
  object-fit: contain;
}

.sites-menubar-brand-text {
  display: inline-block;
}

.sites-menubar-empty {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3rem;
  padding: 0 1rem;
}

.sites-menubar-empty-hint {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.72;
}

.sites-canva-pop-subhead {
  width: 100%;
  margin: 0.35rem 0 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2563eb;
}

.sites-canva-nav-rail {
  grid-template-columns: 1fr;
}

.sites-canva-nav-menu-card {
  min-height: 4.5rem;
}

.sites-nav-style {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  min-width: 240px;
}

.sites-nav-style-tabs {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid #e5e7eb;
}

.sites-nav-style-tabs button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.35rem 0.1rem 0.45rem;
  color: #64748b;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.sites-nav-style-tabs button[data-on='true'] {
  color: #2563eb;
  box-shadow: inset 0 -2px 0 #2563eb;
}

.sites-nav-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: #64748b;
  font-size: 0.82rem;
}

.sites-nav-color-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sites-nav-color-controls input[type='color'] {
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  background: #fff;
}

.sites-nav-icon-picker {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.sites-nav-icon-label {
  color: #64748b;
  font-size: 0.78rem;
}

.sites-nav-icon-control {
  position: relative;
}

.sites-nav-icon-trigger {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 2rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid #d1d5db;
  border-radius: 0.35rem;
  background: #fff;
  color: #0f172a;
  font: inherit;
  cursor: pointer;
}

.sites-nav-icon-trigger:focus {
  border-color: #2563eb;
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 243, 0.15);
}

.sites-nav-icon-clear {
  margin-left: auto;
  color: #94a3b8;
  font-size: 1rem;
  line-height: 1;
}

.sites-nav-icon-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 12rem;
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.45rem;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.sites-nav-icon-popover input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e2e8f0;
  border-radius: 0.3rem;
  padding: 0.35rem 0.5rem;
  font: inherit;
}

.sites-nav-icon-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.3rem;
  overflow: auto;
}

.sites-nav-icon-option {
  display: grid;
  place-items: center;
  height: 2rem;
  border: 1px solid transparent;
  border-radius: 0.3rem;
  background: #f8fafc;
  color: #0f172a;
  cursor: pointer;
}

.sites-nav-icon-option[data-on='true'],
.sites-nav-icon-option:hover {
  border-color: #2563eb;
  background: #eff6ff;
}

.sites-nav-visibility {
  display: flex;
  gap: 0.55rem;
}

.sites-nav-visibility-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border: 1.5px solid #93c5fd;
  border-radius: 0.45rem;
  background: #fff;
  color: #2563eb;
  cursor: pointer;
}

.sites-nav-visibility-btn[data-on='true'] .sites-nav-visibility-glyph {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: #dbeafe;
}

.sites-nav-visibility-btn:not([data-on='true']) {
  border-color: #e2e8f0;
  color: #94a3b8;
  opacity: 0.75;
}

.sites-nav-visibility-check {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  display: grid;
  place-items: center;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
}

.sites-nav-style-hint {
  margin: 0.15rem 0 0;
  color: #94a3b8;
  font-size: 0.72rem;
  line-height: 1.35;
}

.sites-menubar-link-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.sites-menubar-dropdown-icon {
  display: inline-flex;
  opacity: 0.8;
}

.sites-mega-caret {
  display: inline-flex;
  margin-left: 0.25rem;
  opacity: 0.85;
}

.sites-mega-nav-item {
  display: inline-flex;
  align-items: center;
}

@media (max-width: 768px) {
  .sites-menubar:not([data-variant='island']) {
    background-color: var(--menu-mobile-bg, inherit);
  }

  .sites-menubar-nav-flyout,
  .sites-menu-drawer {
    background-color: var(--menu-mobile-popup-bg, #0f172a) !important;
  }
}

.sites-menubar-nav-flyout {
  background-color: var(--menu-popup-bg, #ffffff);
}

.sites-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sites-menubar-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.sites-menubar-nav-grow {
  flex: 1;
  justify-content: center;
}

.sites-menubar-nav-stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.sites-menubar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.82;
}

.sites-menubar-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--menu-icon-color, currentColor);
}

.sites-menubar-item-icon-text {
  min-width: 1.1em;
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
}

.sites-menubar-item-label {
  display: inline-block;
}

.sites-menubar-link.is-active {
  opacity: 1;
  font-weight: 700;
  color: var(--header-nav-active, inherit);
  text-decoration: underline;
  text-underline-offset: 0.28em;
}

.sites-menubar-link-pill {
  padding: 0.28rem 0.7rem;
  border-radius: 99px;
  background: rgba(15, 23, 42, 0.06);
  opacity: 1;
}

.sites-menubar-link-pill.is-active {
  background: rgba(37, 99, 235, 0.16);
}

.sites-menubar-link-underline {
  padding-bottom: 0.15rem;
  border-bottom: 2px solid transparent;
  opacity: 1;
}

.sites-menubar-link-underline.is-active {
  border-bottom-color: currentColor;
  text-decoration: none;
}

.sites-header-nav-link {
  color: inherit;
  text-decoration: none;
}

.sites-header-nav-link.is-active {
  color: var(--header-nav-active, inherit);
  background: var(--header-nav-active-bg, transparent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.28em;
}

.sites-menubar-cta {
  margin-left: auto;
  padding: 0.35rem 0.8rem;
  border-radius: 99px;
  background: #2563eb;
  color: #fff;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.sites-menubar-centered {
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
}

.sites-menubar-hamburger {
  justify-content: space-between;
  position: relative;
}

.sites-menubar-burger span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--menu-icon-color, currentColor);
}

.sites-header-nav-part[data-compact='true'] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.sites-header-nav-part[data-compact='true'] .sites-header-nav-link {
  display: none;
}

.sites-menu-drawer-root {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.sites-menu-drawer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgb(15 23 42 / 35%);
  cursor: pointer;
  pointer-events: auto;
}

.sites-menu-drawer {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.1rem 1.2rem;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 16px 40px rgb(15 23 42 / 22%);
  pointer-events: auto;
  overflow: auto;
}

.sites-menu-drawer[data-side='left'] {
  top: 0;
  left: 0;
  bottom: 0;
  width: min(18rem, 86vw);
}

.sites-menu-drawer[data-side='right'] {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(18rem, 86vw);
}

.sites-menu-drawer[data-side='top'] {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.sites-menu-drawer[data-side='bottom'] {
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.sites-header-live[data-compact='true']:not([data-mobile-nav='scroll']) .sites-header-nav-part {
  display: none;
}

.sites-menubar[data-compact='true'][data-mobile-nav='drawer'][data-open='true'] .sites-menubar-nav,
.sites-menubar[data-compact='true'][data-mobile-nav='drawer'][data-open='true'] .sites-menubar-nav-flyout,
.sites-header-live[data-compact='true'][data-mobile-nav='drawer'][data-open='true'] .sites-header-nav-part {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.1rem 1.2rem;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 16px 40px rgb(15 23 42 / 22%);
}
.sites-menubar[data-compact='true'][data-mobile-nav='drawer'][data-drawer-side='left'][data-open='true'] .sites-menubar-nav,
.sites-menubar[data-compact='true'][data-mobile-nav='drawer'][data-drawer-side='left'][data-open='true'] .sites-menubar-nav-flyout,
.sites-header-live[data-compact='true'][data-mobile-nav='drawer'][data-drawer-side='left'][data-open='true'] .sites-header-nav-part {
  top: 0;
  left: 0;
  bottom: 0;
  width: min(18rem, 86vw);
}
.sites-menubar[data-compact='true'][data-mobile-nav='drawer'][data-drawer-side='right'][data-open='true'] .sites-menubar-nav,
.sites-menubar[data-compact='true'][data-mobile-nav='drawer'][data-drawer-side='right'][data-open='true'] .sites-menubar-nav-flyout,
.sites-header-live[data-compact='true'][data-mobile-nav='drawer'][data-drawer-side='right'][data-open='true'] .sites-header-nav-part {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(18rem, 86vw);
}
.sites-menubar[data-compact='true'][data-mobile-nav='drawer'][data-drawer-side='top'][data-open='true'] .sites-menubar-nav,
.sites-menubar[data-compact='true'][data-mobile-nav='drawer'][data-drawer-side='top'][data-open='true'] .sites-menubar-nav-flyout,
.sites-header-live[data-compact='true'][data-mobile-nav='drawer'][data-drawer-side='top'][data-open='true'] .sites-header-nav-part {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.sites-menubar[data-compact='true'][data-mobile-nav='drawer'][data-drawer-side='bottom'][data-open='true'] .sites-menubar-nav,
.sites-menubar[data-compact='true'][data-mobile-nav='drawer'][data-drawer-side='bottom'][data-open='true'] .sites-menubar-nav-flyout,
.sites-header-live[data-compact='true'][data-mobile-nav='drawer'][data-drawer-side='bottom'][data-open='true'] .sites-header-nav-part {
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  width: 100%;
}
.sites-menubar[data-compact='true']:not([data-mobile-nav='scroll']) .sites-menubar-nav {
  display: none;
}
.sites-menubar[data-compact='true'][data-open='true'] .sites-menubar-nav,
.sites-menubar[data-compact='true'][data-open='true'] .sites-menubar-nav-flyout {
  display: flex;
}
.sites-menubar[data-mobile-nav='scroll'] .sites-menubar-nav {
  flex-wrap: nowrap;
  overflow-x: auto;
}
.sites-menubar-mobile-toggle.is-dropdown {
  display: inline-flex;
  width: auto;
  gap: 0.25rem;
  font: inherit;
  color: inherit;
  align-items: center;
}

.sites-menubar-nav-flyout {
  position: absolute;
  top: calc(100% - 0.35rem);
  right: 0.75rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.7rem 0.9rem;
  background: #fff;
  color: #0f172a;
  border-radius: 0.7rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  z-index: 4;
}

.sites-menubar-sidebar {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 1.1rem 1rem;
  gap: 0.85rem;
}

.sites-menubar-sidebar .sites-menubar-cta {
  margin-left: 0;
  margin-top: auto;
}

.sites-menubar-mega {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 1rem 0.85rem;
}

.sites-menubar-mega-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sites-menubar-mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  flex: 1;
}

.sites-menubar-mega-head {
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.55;
}

.sites-menubar-island {
  padding: 0.35rem 0.45rem;
}

.sites-menubar-island-inner {
  padding: 0 0.9rem;
  gap: 0.75rem;
}

.sites-menubar-utility {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.35rem 1rem 0.45rem;
}

.sites-menubar-utility-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  opacity: 0.6;
}

.sites-menubar-utility-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sites-menubar-search-pill {
  flex: 1;
  max-width: 12rem;
  padding: 0.35rem 0.75rem;
  border-radius: 99px;
  background: rgba(15, 23, 42, 0.06);
  color: inherit;
  opacity: 0.55;
  font-size: 0.75rem;
}

.sites-menubar-social {
  display: flex;
  gap: 0.35rem;
  margin-left: auto;
}

.sites-menubar-social span {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 99px;
  border: 1px solid currentColor;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: lowercase;
  opacity: 0.7;
}

.sites-menubar-stacked {
  gap: 1rem;
}

.sites-menubar-stacked-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.sites-menubar-edit {
  display: grid;
  gap: 0.45rem;
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  overflow: auto;
}

.sites-menubar-edit-field {
  display: grid;
  gap: 0.2rem;
  font-size: 0.72rem;
  font-weight: 650;
  color: #475569;
}

.sites-menubar-edit-field input,
.sites-menubar-edit-field textarea {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.35rem 0.45rem;
  font: inherit;
  font-weight: 500;
  color: #0f172a;
}

.sites-menubar-variant select {
  max-width: 8.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.45rem;
  padding: 0.2rem 0.35rem;
  font: inherit;
  font-size: 0.75rem;
  background: #fff;
}

.sites-media-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.85rem;
}

.sites-media-board-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: 0.35rem 0 0.75rem;
}

.sites-media-board-insert {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  gap: 0.5rem;
  margin: 0.35rem -0.15rem 0;
  padding: 0.65rem 0.15rem 0.2rem;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

.sites-media-insert-next.icon-btn {
  position: relative;
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 999px;
  background: #4f46e5;
  color: #fff;
  border: 0;
}

.sites-media-insert-next.icon-btn:hover:not(:disabled) {
  background: #4338ca;
}

.sites-media-insert-next.icon-btn:disabled {
  background: #c7d2fe;
  color: #fff;
  opacity: 1;
}

.sites-media-insert-count {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 0.68rem;
  line-height: 1.15rem;
  font-weight: 700;
}

.sites-media-board-path {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  color: #475569;
}

.sites-media-board-hint {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
}

.sites-media-board-new,
.sites-media-board-edit {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem 0.65rem;
  align-items: end;
  margin-bottom: 0.85rem;
}

.sites-media-board-edit {
  grid-template-columns: 1fr 1fr auto;
}

.sites-media-board-new input,
.sites-media-board-edit input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 0.55rem;
  padding: 0.4rem 0.55rem;
  font: inherit;
  font-size: 0.85rem;
}

.sites-media-board-edit label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.72rem;
  color: #64748b;
}

.sites-media-board-edit-actions {
  display: flex;
  gap: 0.25rem;
}

.sites-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.75rem;
}

.sites-media-card,
.sites-media-folder-wrap {
  display: grid;
  gap: 0.25rem;
  justify-items: stretch;
}

.sites-media-card-pick,
.sites-media-folder {
  appearance: none;
  position: relative;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #f8fafc;
  border-radius: 0.65rem;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
}

.sites-media-card-mark {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 1;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: rgba(15, 23, 42, 0.38);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.4);
  pointer-events: none;
}

.sites-media-card-mark[data-on='true'] {
  background: #4f46e5;
  border-color: #fff;
}

.sites-media-card-pick:hover,
.sites-media-folder:hover:not(:disabled) {
  border-color: #818cf8;
  background: #eef2ff;
}

.sites-media-card-uploading {
  cursor: default;
  pointer-events: none;
  border-style: dashed;
  border-color: #818cf8;
  background: #eef2ff;
}

.sites-media-card[data-upload='uploading'] .sites-media-thumb-empty {
  animation: sites-media-upload-pulse 1.1s ease-in-out infinite;
}

.sites-media-card[data-upload='failed'] .sites-media-card-uploading {
  border-color: #f43f5e;
  background: #fff1f2;
}

@keyframes sites-media-upload-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.sites-media-folder {
  display: grid;
  place-items: center;
  gap: 0.2rem;
  min-height: 6.4rem;
  padding: 0.55rem 0.4rem 0.45rem;
  color: #334155;
}

.sites-media-folder-name {
  display: block;
  max-width: 100%;
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sites-media-card-actions {
  display: flex;
  justify-content: center;
  gap: 0.1rem;
}

.sites-media-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #e2e8f0;
}

.sites-media-thumb-empty {
  display: grid;
  place-items: center;
  color: #64748b;
  font-size: 0.75rem;
}

.sites-media-card-name {
  display: block;
  font-size: 0.72rem;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.25rem;
}

.sites-media-card-delete {
  appearance: none;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  text-align: left;
  padding: 0 0.2rem;
}

.sites-media-card-delete:hover {
  color: #b91c1c;
}

.sites-home-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.association-hub {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin: 0.35rem 0 1.25rem;
}

.association-hub-section {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.association-hub-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.mode-b-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.mode-b-header .workspace-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.mode-b-title {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-size: 0.85rem;
}

.mode-b-host {
  font-size: 0.68rem;
}

.mode-b-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  box-sizing: border-box;
  width: min(var(--shell-content-max), 100%);
  margin-inline: auto;
  padding: 0.35rem var(--shell-content-pad) 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, canvastext 8%, transparent);
  background: transparent;
}

.mode-b-nav-item {
  appearance: none;
  text-decoration: none;
  color: inherit;
  font-size: 0.8rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  opacity: 0.72;
}

.mode-b-nav-item.active,
.mode-b-nav-item:hover {
  opacity: 1;
  background: color-mix(in srgb, canvastext 6%, transparent);
}

.mode-b-footer {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  box-sizing: border-box;
  width: min(var(--shell-content-max), 100%);
  margin-inline: auto;
  font-size: 0.68rem;
  padding: 0.55rem var(--shell-content-pad) 0.85rem;
}

.sites-store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sites-store-card {
  margin: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  overflow: hidden;
}

.sites-store-card a,
.sites-store-card > strong {
  display: grid;
  gap: 0.35rem;
  padding: 0 0.85rem 0.85rem;
  color: inherit;
  text-decoration: none;
}

.sites-store-card a .sites-store-photo,
.sites-store-card > .sites-store-photo {
  margin: 0 -0.85rem 0.35rem;
  width: calc(100% + 1.7rem);
}

.sites-store-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #f1f5f9;
}

.sites-store-photo-empty {
  min-height: 8rem;
}

.sites-store-card em {
  font-style: normal;
  color: #64748b;
  font-size: 0.85rem;
}

.sites-store-cart {
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 1rem;
  background: #0f172a;
  color: #fff;
}

.sites-store-cart ul {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
}

.sites-store-cart button {
  color: inherit;
}

.sites-store-product {
  max-width: 32rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  display: grid;
  gap: 0.75rem;
}

.sites-store-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1rem;
}

.sites-store-tabs button {
  border: 0;
  background: transparent;
  color: #64748b;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
}

.sites-store-tabs button.is-active {
  background: #e0f2fe;
  color: #0369a1;
}

.sites-store-dash {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.sites-store-dash li {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.75rem;
  font-weight: 700;
}

.sites-store-hero {
  padding: 2rem 1.25rem;
  border-radius: 20px;
  background: #0f172a;
  color: #fff;
  text-align: center;
}

.sites-store-search {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.sites-store-search input {
  flex: 1;
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  font: inherit;
}

.sites-store-search button {
  border: 0;
  border-radius: 10px;
  padding: 0.65rem 0.95rem;
  background: #0f172a;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.sites-store-widget {
  display: grid;
  gap: 0.75rem;
}

.sites-store-widget-title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
}

.sites-store-widget-meta {
  margin: 0;
  font-size: 0.85rem;
}

.sites-store-collection-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.sites-store-card-placeholder {
  display: grid;
  gap: 0.45rem;
}

.sites-store-cart-widget {
  display: grid;
  gap: 0.45rem;
  justify-items: start;
}

.sites-store-cart-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
}

.sites-store-cart-icon {
  display: inline-flex;
}

.sites-store-cart-badge {
  display: inline-flex;
  min-width: 1.35rem;
  height: 1.35rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.75rem;
  padding: 0 0.35rem;
}

.sites-store-cart-empty {
  margin: 0;
  font-size: 0.9rem;
}

.sites-store-upsell-cta,
.sites-store-featured-product-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.35rem;
  border: 0;
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  background: #0f172a;
  color: #fff;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.sites-store-featured-product {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
  .sites-store-featured-product {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
  }
}

.sites-store-featured-product-body {
  display: grid;
  gap: 0.4rem;
}

.sites-store-featured-product-price {
  font-weight: 700;
}

.sites-store-filters,
.sites-store-cats {
  display: grid;
  gap: 0.5rem;
}

.sites-store-cats button {
  text-align: left;
  border: 0;
  background: #f8fafc;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  cursor: pointer;
}

.sites-store-promo {
  border-radius: 16px;
  padding: 1rem;
  background: #fef3c7;
  color: #78350f;
}

.sites-store-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.sites-store-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: #dc2626;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
}

.sites-store-card {
  position: relative;
}

.sites-store-card s {
  margin-left: 0.35rem;
  color: #94a3b8;
}

.sites-store-thumbs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sites-store-thumbs button {
  width: 4rem;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.sites-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sites-media-quota {
  margin: 0.35rem 0 0.85rem;
}

.sites-media-quota-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: #334155;
}

.sites-media-quota-track {
  margin-top: 0.35rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.sites-media-quota-fill {
  height: 100%;
  background: #4f46e5;
}

.sites-media-quota-hint {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: #b45309;
}

.sites-media-drive {
  margin-bottom: 0.85rem;
}

.sites-media-drive-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.sites-media-drive-icon {
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.75rem;
  background: #f5f7ff;
  color: #0f172a;
  cursor: pointer;
}

.sites-media-drive-icon:hover:not(:disabled) {
  background: #e8f2ff;
  border-color: #bfdbfe;
}

.sites-media-drive-icon[aria-pressed='true'] {
  background: #e8f2ff;
  border-color: #818cf8;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.22);
}

.sites-media-drive-icon:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sites-media-drive-form {
  margin-top: 0.75rem;
}

.sites-media-drive-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.84rem;
  color: #334155;
}

.sites-shape-picker {
  flex-wrap: wrap;
  max-width: 11rem;
  border-radius: 0.95rem !important;
}

.sites-pagekit-list {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  padding-left: 1.15em;
  list-style-position: inside;
}

.sites-pagekit-list > li {
  display: list-item;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  padding-left: 0;
}

.sites-pagekit-list-dash {
  list-style: none;
  padding-left: 0.2em;
}

.sites-pagekit-list-dash > li {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  padding-left: 0;
}

.sites-pagekit-list-dash > li::before {
  content: '–';
  position: static;
  flex: 0 0 auto;
  font-weight: 650;
}

.sites-element-border-glyph {
  display: grid;
  place-items: center;
  position: relative;
  pointer-events: none;
  color: #0f172a;
}

.sites-element-border-glyph > span {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  border: 1px solid #fff;
}

.sites-text-format-fill-glyph > span {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 0.2rem;
  border: 1px solid rgba(15, 23, 42, 0.2);
  box-shadow: inset 0 0 0 1px #fff;
}

.sites-canva-inline-rich {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 1.2em;
  overflow: auto;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
}

.sites-canva-inline-rich:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
}

.sites-pagekit-empty {
  flex: 1 1 100%;
  min-height: 10rem;
  display: grid;
  place-items: center;
  opacity: 0.55;
}

.sites-pagekit-preview {
  min-height: 1.5rem;
}

.sites-pagekit-preview h2 {
  margin: 0 0 0.35rem;
  font-size: 1.55rem;
  line-height: 1.2;
}

.sites-pagekit-preview p {
  margin: 0 0 0.35rem;
}

.sites-pagekit-field {
  display: block;
  margin-top: 0.45rem;
}

.sites-pagekit-field textarea {
  width: 100%;
  border: 0;
  border-radius: 0.85rem;
  background: #f5f7ff;
  padding: 0.7rem 0.8rem;
  font: inherit;
  resize: vertical;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0, 34, 170, 0.06);
}

.sites-pagekit-field textarea:focus {
  box-shadow: inset 0 0 0 2px rgba(0, 85, 255, 0.28);
}

.sites-pagekit-drag {
  border: 0;
  background: #eef2ff;
  color: var(--brand);
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.65rem;
  display: inline-grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
}

.sites-pagekit-drag:active {
  cursor: grabbing;
}

/* Public / preview still use shared canvas class */
.sites-pagekit-canvas {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
  max-width: none;
}

.sites-pagekit-canvas[data-layout='artboard'] {
  display: block;
  gap: 0;
}

.sites-pagekit-block {
  flex: 1 1 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
}

.sites-pagekit-block[data-layout='half'] {
  flex: 1 1 calc(50% - 0.5rem);
}

@media (max-width: 799px) {
  .sa-form-steps li em {
    display: none;
  }

  .sa-form-steps li {
    justify-content: center;
    padding: 0.3rem;
  }

  .sa-form .org-add-review {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .sa-form .org-add-review .muted + strong {
    margin-bottom: 0.45rem;
  }

  .sites-canva {
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    border-radius: 0.85rem;
  }

  .sites-canva-topbar {
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 0;
    padding: 0.35rem 0.5rem;
  }

  .sites-canva-main {
    flex-direction: column;
  }

  .sites-canva-propsbar {
    max-height: 8.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.3rem 0.5rem 0.4rem;
    min-height: 0;
  }

  .sites-canva-propsbar[data-placement='right'] {
    top: 0;
    right: 0;
    left: auto;
    bottom: 0;
    width: min(22.5rem, 100%);
    max-width: 22.5rem;
  }

  .sites-canva-propsbar[data-dock='right'] {
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
    max-height: 40vh;
    height: auto;
    border-left: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: none;
  }

  .sites-canva-nav {
    width: 100%;
    flex: 0 0 auto;
  }

  .sites-canva-rail {
    flex-direction: row;
    flex: 0 0 auto;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    padding: 0.3rem 0.35rem;
    gap: 0.15rem;
  }

  .sites-canva-rail-btn {
    width: auto;
    min-width: 3.1rem;
    padding: 0.35rem 0.4rem;
    font-size: 0.62rem;
  }

  .sites-canva-panel {
    left: 0;
    right: 0;
    top: 100%;
    bottom: auto;
    width: auto;
    min-width: 0;
    max-height: 5.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    padding: 0.4rem 0.45rem;
  }

  .sites-canva-panel-grid {
    grid-template-columns: repeat(6, minmax(0, auto));
    justify-content: start;
  }

  .sites-canva-stage {
    padding: 1rem 0.65rem 1rem;
  }

  .sites-canva-stage-end {
    min-height: 7.5rem;
  }

  .sites-canva-block[data-layout='half'],
  .sites-pagekit-block[data-layout='half'] {
    flex-basis: 100%;
  }

  .sites-pagekit-toolbar-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 0;
  }

  .sites-canva-tool-icon-only {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
  }
}

/* CRM Dashboard (aligned with golden Mode B SPA) */
.crm-dashboard{gap:.9rem}
.crm-dashboard-v2 .crm-dash-greeting{font-size:1.55rem}
.crm-dashboard{display:flex;flex-direction:column;gap:1.25rem}
.crm-dash-hero{display:flex;flex-direction:column;gap:.35rem}
.crm-dash-kicker{margin:0;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted, #6b7280)}
.crm-dash-greeting{margin:0;font-size:1.45rem;line-height:1.2;font-weight:700;color:var(--text, #1f2937)}
.crm-dash-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin-bottom:.65rem}
.crm-dash-section-head h3,.crm-dash-funnel h3{margin:0;font-size:.95rem;font-weight:700}
.crm-dash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.crm-dash-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.crm-dash-grid-hero{grid-template-columns:repeat(2,minmax(0,1fr))}
.crm-dash-metric{display:flex;flex-direction:column;gap:.35rem;padding:.9rem .95rem;border-radius:1rem;background:var(--surface, #fff);border:1px solid color-mix(in srgb,var(--border, #e5e7eb) 85%,transparent);box-shadow:0 1px 2px color-mix(in srgb,#0f172a 6%,transparent);text-decoration:none;color:inherit;min-height:5.5rem}
a.crm-dash-metric:hover{border-color:color-mix(in srgb,var(--accent, #5b6cff) 45%,var(--border, #e5e7eb))}
.crm-dash-metric-icon{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:.55rem;background:color-mix(in srgb,var(--accent, #5b6cff) 12%,transparent);color:var(--accent, #5b6cff)}
.crm-dash-metric-label{font-size:.72rem;color:var(--muted, #6b7280);line-height:1.2}
.crm-dash-metric-value{font-size:1.25rem;line-height:1.1;font-weight:700}
.crm-dash-funnel{padding:.95rem;border-radius:1rem;background:var(--surface, #fff);border:1px solid color-mix(in srgb,var(--border, #e5e7eb) 85%,transparent)}
.crm-dash-funnel-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin-top:.75rem}
.crm-dash-funnel-row{grid-template-columns:repeat(4,minmax(0,1fr))}
.crm-dash-funnel-step{display:flex;flex-direction:column;gap:.2rem;padding:.55rem .65rem;border-radius:.75rem;background:color-mix(in srgb,var(--accent, #5b6cff) 6%,transparent)}
.crm-dash-funnel-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted, #6b7280)}
.crm-dash-ai{display:flex;flex-direction:column;gap:.7rem;padding:1.1rem 1.15rem;border-radius:1.1rem;background:linear-gradient(145deg,#6d5efc,#4f46e5);color:#fff}
.crm-dash-ai-kicker{margin:0;display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.92}
.crm-dash-ai-copy{margin:0;font-size:1.05rem;font-weight:650;line-height:1.35}
.crm-dash-ai-btn{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;padding:.45rem .9rem;border-radius:999px;background:color-mix(in srgb,#fff 22%,transparent);color:#fff;text-decoration:none;font-size:.85rem;font-weight:600}
.crm-dash-ai-btn:hover{background:color-mix(in srgb,#fff 32%,transparent)}
.crm-dash-hero-card{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:1rem 1.05rem;border-radius:1rem;background:var(--surface, #fff);border:1px solid color-mix(in srgb,var(--border, #dbe3f0) 90%,transparent);border-top:3px solid var(--accent, #3b82f6);text-decoration:none;color:inherit;box-shadow:0 1px 2px color-mix(in srgb,#0f172a 5%,transparent)}
.crm-dash-hero-card-label{display:block;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted, #6b7280)}
.crm-dash-hero-card-value{display:block;margin-top:.35rem;font-size:1.85rem;line-height:1.1;font-weight:750;color:var(--text, #0f172a)}
.crm-dash-trend{display:inline-block;margin-top:.45rem;font-size:.78rem;font-weight:600;color:#15803d}
.crm-dash-hero-card-icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:.85rem;background:color-mix(in srgb,var(--accent, #3b82f6) 14%,transparent);color:var(--accent, #3b82f6)}
.crm-dash-grid-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
.crm-dash-kpi{display:flex;flex-direction:column;gap:.35rem;padding:.85rem .9rem;border-radius:1rem;background:var(--surface, #fff);border:1px solid color-mix(in srgb,var(--border, #dbe3f0) 90%,transparent);text-decoration:none;color:inherit}
.crm-dash-kpi-icon{display:inline-flex;width:1.7rem;height:1.7rem;align-items:center;justify-content:center;border-radius:.55rem;background:color-mix(in srgb,var(--accent, #3b82f6) 12%,transparent);color:var(--accent, #3b82f6)}
.crm-dash-kpi-label{font-size:.72rem;color:var(--muted, #6b7280)}
.crm-dash-kpi-value{font-size:1.35rem;font-weight:750}
.crm-dash-view-all{font-size:.82rem;font-weight:650;color:var(--accent, #3b82f6);text-decoration:none}
.crm-dash-empty{margin:0}
.crm-dash-task-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem}
.crm-dash-task{display:flex;gap:.75rem;align-items:flex-start;padding:.85rem .9rem;border-radius:1rem;background:var(--surface, #fff);border:1px solid color-mix(in srgb,var(--border, #dbe3f0) 90%,transparent);text-decoration:none;color:inherit}
.crm-dash-task-icon{display:inline-flex;width:2rem;height:2rem;align-items:center;justify-content:center;border-radius:999px;background:color-mix(in srgb,#94a3b8 18%,transparent);color:#64748b;flex:0 0 auto}
.crm-dash-task-icon.high{background:color-mix(in srgb,#f97316 18%,transparent);color:#c2410c}
.crm-dash-task-copy{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.crm-dash-task-copy strong{font-size:.95rem}
.crm-dash-task-copy em{font-style:normal;font-size:.78rem;color:var(--muted, #6b7280)}
.crm-dash-task-meta{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-top:.25rem;font-size:.75rem;color:var(--muted, #6b7280)}
.crm-dash-priority{display:inline-flex;padding:.12rem .45rem;border-radius:999px;background:color-mix(in srgb,#f97316 16%,transparent);color:#c2410c;font-weight:650}
.crm-dash-activity{list-style:none;margin:0;padding:0 0 0 .85rem;border-left:2px solid color-mix(in srgb,var(--border, #cbd5e1) 90%,transparent);display:flex;flex-direction:column;gap:.85rem}
.crm-dash-activity li{position:relative;padding-left:.85rem}
.crm-dash-activity li:before{content:"";position:absolute;left:-1.05rem;top:.35rem;width:.55rem;height:.55rem;border-radius:999px;background:#94a3b8;box-shadow:0 0 0 3px var(--surface, #fff)}
.crm-dash-activity li.active:before{background:var(--accent, #3b82f6)}
.crm-dash-activity a{display:flex;flex-direction:column;gap:.15rem;text-decoration:none;color:inherit}
.crm-dash-activity strong{font-size:.9rem}
.crm-dash-activity em{font-style:normal;font-size:.75rem;color:var(--muted, #6b7280)}
.app-shell:has(.workspace-crm-title) .crm-dashboard{gap:.9rem}
.app-shell:has(.workspace-crm-title) .crm-dash-hero{gap:.25rem}
.app-shell:has(.workspace-crm-title) .crm-dash-sub{margin:0 0 .1rem}


/* === CRM Leads list (simple clean) === */
.sa-form[data-screen="crm-leads-list"] {
  background: transparent;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-head {
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-head .sa-form-pict {
  display: none;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-head h1 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-body {
  background: transparent;
}
.crm-leads-title-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.crm-leads-v2 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}
.crm-leads-search {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.75rem 0.95rem;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #64748b;
}
.crm-leads-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 0.95rem;
  color: #0f172a;
}
.crm-leads-search input::placeholder {
  color: #94a3b8;
}
.crm-leads-icon-btn {
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
}
.crm-leads-icon-btn.active,
.crm-leads-icon-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.crm-leads-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  width: 100%;
}
.crm-leads-btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.7rem 0.65rem;
  border-radius: 0.9rem;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.crm-leads-btn.primary {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.crm-leads-btn.primary:hover {
  background: #1d4ed8;
}
.crm-leads-btn.secondary {
  background: #ffffff;
  color: #1e40af;
  border-color: #93c5fd;
}
.crm-leads-btn.secondary:hover {
  background: #f8fafc;
}
.crm-leads-filters {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem 0.9rem;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
}
.crm-leads-filters select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 0.7rem;
  border: 1px solid #e5e7eb;
  background: #fff;
}
.crm-leads-filters-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.crm-leads-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.crm-leads-list > li {
  margin: 0;
  padding: 0;
}
.crm-leads-list .selectable-record-row {
  padding: 0;
  border: 0;
  background: transparent;
}
.crm-lead-card {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.8rem 0.85rem;
  border-radius: 1rem;
  background: #ffffff;
  border: 1px solid #eef2f7;
  box-shadow: none;
  box-sizing: border-box;
}
.crm-lead-card[data-tone="new"] {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.crm-lead-card[data-tone="contacted"] {
  background: #fffdf8;
  border-color: #f3e8d4;
}
.crm-lead-card[data-tone="qualified"] {
  background: #f7fdf9;
  border-color: #d9eee2;
}
.crm-lead-card[data-tone="muted"] {
  background: #fafafa;
  border-color: #ececec;
}
.crm-lead-card-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}
.crm-item-photo {
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.7rem;
  object-fit: cover;
  aspect-ratio: auto;
  min-height: 0;
  background: #f1f5f9;
}
.crm-leads-list .crm-lead-card-name {
  white-space: normal;
}
.crm-item-photo.sites-store-photo-empty {
  min-height: 0;
}
.crm-item-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  color: #64748b;
  font-size: 0.78rem;
}
.crm-item-groups {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-width: 100%;
}
.crm-item-group {
  border: 1px solid #e2e8f0;
  border-radius: 0.9rem;
  background: #fff;
  overflow: hidden;
}
.crm-item-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  padding: 0.7rem 0.9rem;
  font-weight: 700;
  color: #0f172a;
}
.crm-item-group > summary::-webkit-details-marker { display: none; }
.crm-item-group > summary::after {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  margin-left: auto;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: rotate(45deg);
}
.crm-item-group[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 0.25rem;
}
.crm-item-group .crm-leads-list {
  padding: 0 0.55rem 0.55rem;
}
.crm-item-section {
  margin: 0.85rem 0 0.15rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.crm-lead-avatar {
  flex: 0 0 auto;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8eef8;
  color: #1d4ed8;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.crm-lead-card-identity {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.crm-lead-card-name {
  font-size: 0.98rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-lead-card-company {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.78rem;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-lead-card-company.muted {
  color: #94a3b8;
}
.crm-lead-status {
  flex: 0 0 auto;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1;
}
.crm-lead-status[data-tone="new"] {
  background: #eef2ff;
  color: #4338ca;
}
.crm-lead-status[data-tone="contacted"] {
  background: #fff7ed;
  color: #c2410c;
}
.crm-lead-status[data-tone="qualified"] {
  background: #ecfdf5;
  color: #047857;
}
.crm-lead-status[data-tone="muted"] {
  background: #f1f5f9;
  color: #64748b;
}
.crm-lead-card-actions {
  display: inline-flex;
  gap: 0.15rem;
  flex: 0 0 auto;
  opacity: 0.7;
}
.crm-lead-action-btn {
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}
.crm-lead-action-btn:hover {
  background: #eff6ff;
  color: #1d4ed8;
}
.crm-lead-action-btn[data-tone="convert"]:hover {
  background: #ecfdf5;
  color: #047857;
}
.crm-lead-action-btn[data-tone="danger"]:hover {
  background: #fef2f2;
  color: #b91c1c;
}
.crm-leads-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  align-self: center;
  margin: 0.25rem auto 0.75rem;
  padding: 0.55rem 0.85rem;
  border: 0;
  background: transparent;
  color: #2563eb;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}
.crm-leads-load-more:disabled {
  opacity: 0.65;
  cursor: default;
}

/* Soft page wash behind leads list */
.mode-b-shell main:has([data-screen="crm-leads-list"]) {
  background: #f4f6f9;
}
.mode-b-shell main:has([data-screen="crm-leads-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-leads-list"]) .sa-form-list {
  background: transparent;
}

/* Lead detail shared bits */
.crm-lead-detail-back {
  font-weight: 700;
}
.crm-lead-profile-sub {
  margin: 0.15rem 0 0;
  color: #64748b;
  font-size: 0.9rem;
}
.crm-lead-section-title {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  font-weight: 750;
  color: #0f172a;
}

/* === Mode B core-width chrome + 5-item bottom dock (server patch) === */
.mode-b-shell {
  --mode-b-chrome-z: 70;
  --mode-b-core-width: 40rem;
  --mode-b-core-pad: 1rem;
  --layout-max: var(--mode-b-core-width) !important;
  --shell-content-max: var(--mode-b-core-width) !important;
  --shell-content-pad: var(--mode-b-core-pad);
  --nav-dash: #2563eb;
  --nav-leads: #0d9488;
  --nav-contacts: #7c3aed;
  --nav-customers: #ea580c;
  --nav-more: #4f46e5;
  width: 100%;
  max-width: var(--mode-b-core-width);
  margin-inline: auto;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}

.mode-b-shell > .workspace-header.mode-b-header,
.mode-b-shell > header.mode-b-header,
.mode-b-shell .workspace-header.mode-b-header {
  position: sticky;
  top: 0;
  z-index: var(--mode-b-chrome-z);
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding: 0.55rem var(--mode-b-core-pad) 0.45rem !important;
  background: color-mix(in srgb, #eef3f8 92%, #fff);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, #0f172a 8%, transparent);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.mode-b-shell .workspace-header.mode-b-header .workspace-brand {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  text-align: center;
}
.mode-b-shell .workspace-header.mode-b-header .mode-b-title {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.mode-b-shell .workspace-header.mode-b-header .mode-b-host { display: none; }

.mode-b-shell > .mode-b-nav,
.mode-b-shell .mode-b-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(0.35rem, env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  z-index: var(--mode-b-chrome-z);
  display: flex !important;
  justify-content: space-around;
  align-items: stretch;
  gap: 0.1rem;
  width: min(100vw, var(--mode-b-core-width)) !important;
  max-width: var(--mode-b-core-width) !important;
  margin: 0 !important;
  padding: 0.3rem 0.35rem !important;
  box-sizing: border-box !important;
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 1.25rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  overflow: visible;
}
.mode-b-shell .mode-b-nav .mode-b-nav-item {
  flex: 1 1 0;
  min-width: 0;
  min-height: 3.35rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.3rem 0.2rem 0.25rem;
  border-radius: 0.95rem;
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 1.1;
  text-decoration: none;
  color: #64748b;
  white-space: nowrap;
}
.mode-b-shell .mode-b-nav .mode-b-nav-item:before {
  content: "";
  width: 1.35rem;
  height: 1.35rem;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href="/app/crm"],
.mode-b-shell .mode-b-nav .mode-b-nav-item[href="/app/crm/"] { color: var(--nav-dash); }
.mode-b-shell .mode-b-nav .mode-b-nav-item[href="/app/crm"]:before,
.mode-b-shell .mode-b-nav .mode-b-nav-item[href="/app/crm/"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563eb'><rect x='3' y='3' width='8' height='8' rx='1.5'/><rect x='13' y='3' width='8' height='8' rx='1.5'/><rect x='3' y='13' width='8' height='8' rx='1.5'/><rect x='13' y='13' width='8' height='8' rx='1.5'/></svg>");
  background-color: color-mix(in srgb, var(--nav-dash) 14%, #fff);
  box-sizing: content-box;
  padding: 0.35rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/leads"] { color: var(--nav-leads); }
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/leads"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16l-6 7v6l-4 2v-8L4 4z'/></svg>");
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/contacts"] { color: var(--nav-contacts); }
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/contacts"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='3' width='14' height='18' rx='2'/><circle cx='12' cy='9' r='2.5'/><path d='M8.5 16.5c1.2-1.5 2.3-2 3.5-2s2.3.5 3.5 2'/></svg>");
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/customers"] { color: var(--nav-customers); }
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/customers"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-6-4.3-6-9a6 6 0 1 1 12 0c0 4.7-6 9-6 9z'/><circle cx='12' cy='12' r='2.2'/></svg>");
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/book"] { color: var(--nav-more); }
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/book"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234f46e5'><circle cx='6' cy='12' r='1.8'/><circle cx='12' cy='12' r='1.8'/><circle cx='18' cy='12' r='1.8'/></svg>");
}
.mode-b-shell .mode-b-nav .mode-b-nav-item.active {
  background: color-mix(in srgb, currentColor 12%, #fff);
  font-weight: 750;
}

.mode-b-shell > main,
.mode-b-shell main,
.mode-b-shell #main {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: var(--mode-b-core-pad) !important;
  padding-bottom: calc(5.9rem + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  align-self: stretch;
  overflow-x: hidden;
}
.mode-b-shell > .mode-b-footer,
.mode-b-shell .mode-b-footer {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: var(--mode-b-core-pad) !important;
  padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
}

/* Stretch ONLY page shells — never every crm-dash-* child (that broke tasks/hero) */
.mode-b-shell .page-container,
.mode-b-shell #main > *,
.mode-b-shell main > *,
.mode-b-shell .crm-dashboard,
.mode-b-shell .crm-dashboard-v2 {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

/* ===== Clearer dashboard hierarchy ===== */
.mode-b-shell .crm-dashboard,
.mode-b-shell .crm-dashboard-v2 {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding-top: 0.35rem;
}

.mode-b-shell .crm-dash-hero {
  gap: 0.55rem;
}
.mode-b-shell .crm-dash-greeting {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 750;
  color: #0f172a;
}
.mode-b-shell .crm-dash-kicker {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
  letter-spacing: 0.01em;
  text-transform: none;
}

.mode-b-shell .crm-dash-hero-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 0.85rem;
  width: 100%;
  max-width: none;
  min-height: 5.5rem;
  padding: 1.05rem 1.1rem !important;
  border-radius: 1.1rem;
  background: #fff;
  border: 1px solid #e8eef5;
  border-top: 3px solid #2563eb;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  box-sizing: border-box;
}
.mode-b-shell .crm-dash-hero-card-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 650;
}
.mode-b-shell .crm-dash-hero-card-value {
  margin-top: 0.2rem;
  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
  color: #0f172a;
}
.mode-b-shell .crm-dash-trend {
  display: inline-flex;
  margin-top: 0.45rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, #16a34a 12%, #fff);
  color: #15803d;
  font-size: 0.75rem;
  font-weight: 700;
}
.mode-b-shell .crm-dash-hero-card-icon {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.9rem;
}

.mode-b-shell .crm-dash-grid,
.mode-b-shell .crm-dash-grid-kpi {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  width: 100%;
}
.mode-b-shell .crm-dash-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0.9rem 0.95rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #e8eef5;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.mode-b-shell .crm-dash-kpi-icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.55rem;
  background: color-mix(in srgb, #2563eb 12%, #fff);
  color: #2563eb;
}
.mode-b-shell .crm-dash-kpi-label {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 600;
}
.mode-b-shell .crm-dash-kpi-value {
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 800;
  color: #0f172a;
}

.mode-b-shell .crm-dash-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.15rem 0 0.7rem;
}
.mode-b-shell .crm-dash-section-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  color: #0f172a;
}
.mode-b-shell .crm-dash-view-all {
  font-size: 0.82rem;
  font-weight: 700;
  color: #2563eb;
  white-space: nowrap;
}

.mode-b-shell .crm-dash-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
}
.mode-b-shell .crm-dash-task {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 0.8rem !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0.9rem 0.95rem !important;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #e8eef5;
  box-sizing: border-box !important;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.mode-b-shell .crm-dash-task-icon {
  flex: 0 0 auto !important;
  width: 2.15rem !important;
  height: 2.15rem !important;
  min-width: 2.15rem;
  border-radius: 999px;
}
.mode-b-shell .crm-dash-task-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow: hidden;
}
.mode-b-shell .crm-dash-task-copy strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-b-shell .crm-dash-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.65rem;
  align-items: center;
  font-size: 0.75rem;
  color: #64748b;
}

/* ==== CRM Dashboard redesign :: modeb-dash-redesign (2026-09-02) ==== */
/* Modern refresh: gradient hero, elevated KPI cards with per-metric accents,
   softer task/activity cards with hover lift. Pure CSS, overrides earlier
   .mode-b-shell .crm-dash-* rules by source order. Remove this block to revert. */

/* Hero "Total leads" card -> gradient banner */
.mode-b-shell .crm-dash-hero-card {
  background: linear-gradient(135deg, #4f46e5 0%, #2563eb 55%, #3b82f6 100%) !important;
  border: none !important;
  border-radius: 1.25rem !important;
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.28) !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.mode-b-shell a.crm-dash-hero-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.34) !important;
}
.mode-b-shell .crm-dash-hero-card::after {
  content: "";
  position: absolute;
  right: -32px;
  top: -46px;
  width: 158px;
  height: 158px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
.mode-b-shell .crm-dash-hero-card-copy {
  position: relative;
  z-index: 1;
}
.mode-b-shell .crm-dash-hero-card-label {
  color: rgba(255, 255, 255, 0.85) !important;
}
.mode-b-shell .crm-dash-hero-card-value {
  color: #fff !important;
  font-size: 2.2rem !important;
}
.mode-b-shell .crm-dash-trend {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}
.mode-b-shell .crm-dash-hero-card-icon {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  width: 3rem !important;
  height: 3rem !important;
  position: relative;
  z-index: 1;
}

/* KPI cards -> elevated, interactive, per-metric accent colours */
.mode-b-shell .crm-dash-kpi {
  border: 1px solid #eef2f8 !important;
  border-radius: 1.15rem !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.mode-b-shell a.crm-dash-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1) !important;
  border-color: #dbe3f0 !important;
}
.mode-b-shell .crm-dash-kpi-icon {
  width: 2.1rem !important;
  height: 2.1rem !important;
  border-radius: 0.7rem !important;
}
.mode-b-shell .crm-dash-kpi-value {
  font-size: 1.7rem !important;
}
.mode-b-shell .crm-dash-grid-kpi .crm-dash-kpi:nth-child(1) .crm-dash-kpi-icon {
  background: color-mix(in srgb, #2563eb 14%, #fff) !important;
  color: #2563eb !important;
}
.mode-b-shell .crm-dash-grid-kpi .crm-dash-kpi:nth-child(2) .crm-dash-kpi-icon {
  background: color-mix(in srgb, #7c3aed 14%, #fff) !important;
  color: #7c3aed !important;
}
.mode-b-shell .crm-dash-grid-kpi .crm-dash-kpi:nth-child(3) .crm-dash-kpi-icon {
  background: color-mix(in srgb, #0d9488 14%, #fff) !important;
  color: #0d9488 !important;
}
.mode-b-shell .crm-dash-grid-kpi .crm-dash-kpi:nth-child(4) .crm-dash-kpi-icon {
  background: color-mix(in srgb, #f59e0b 16%, #fff) !important;
  color: #d97706 !important;
}

/* Sections + task/activity cards */
.mode-b-shell .crm-dash-section-head h3 {
  font-size: 1.05rem !important;
  letter-spacing: -0.01em;
}
.mode-b-shell .crm-dash-task {
  border: 1px solid #eef2f8 !important;
  border-radius: 1.15rem !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mode-b-shell a.crm-dash-task:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
}
.mode-b-shell .crm-dash-priority {
  background: color-mix(in srgb, #f97316 18%, #fff) !important;
  color: #c2410c !important;
}
.mode-b-shell .crm-dash-activity {
  border-left-color: #dbe6f5 !important;
}
.mode-b-shell .crm-dash-activity li.active:before {
  background: #2563eb !important;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(37, 99, 235, 0.18) !important;
}
/* ==== end modeb-dash-redesign ==== */

/* ==== CRM Mode B header redesign :: modeb-header-redesign (2026-09-02) ==== */
/* Modern core header: clean white bar, soft shadow, blue gradient accent line,
   emphasised brand, soft pill for the workspace context, ringed avatar.
   Scoped to .mode-b-shell .mode-b-header; overrides earlier rules by order.
   Remove this block to revert. */

.mode-b-shell .workspace-header.mode-b-header {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
  padding-top: 0.7rem !important;
  padding-bottom: 0.62rem !important;
  position: sticky;
  overflow: visible;
}
.mode-b-shell .workspace-header.mode-b-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #4f46e5, #2563eb 55%, #3b82f6);
  pointer-events: none;
}
.mode-b-shell .workspace-header.mode-b-header .mode-b-title strong {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a;
}

/* Workspace context ("Lab Co") -> soft accent pill */
.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 {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, #2563eb 8%, #fff);
  border: 1px solid color-mix(in srgb, #2563eb 18%, transparent);
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
.mode-b-shell .workspace-header.mode-b-header .context-slot .context-slot-trigger:hover {
  background: color-mix(in srgb, #2563eb 14%, #fff);
}

/* Avatar -> subtle brand ring */
.mode-b-shell .workspace-header.mode-b-header .user-menu .avatar-btn {
  border-radius: 999px;
  padding: 0;
  background: transparent;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(37, 99, 235, 0.32);
  transition: box-shadow 0.15s ease;
}
.mode-b-shell .workspace-header.mode-b-header .user-menu .avatar-btn:hover {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(37, 99, 235, 0.55);
}
/* ==== end modeb-header-redesign ==== */

/* ==== CRM Mode B header/body gap fix :: modeb-gap-fix (2026-09-02) ==== */
/* Pull the page body up directly beneath the sticky core header — removes the
   large empty band between the header bottom edge and the CRM Dashboard title. */
.mode-b-shell > main,
.mode-b-shell main,
.mode-b-shell #main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.mode-b-shell .page-container {
  padding-top: 0.4rem !important;
  margin-top: 0 !important;
}
.mode-b-shell main > .sa-form,
.mode-b-shell main .sa-form,
.mode-b-shell main .classic-form {
  margin-top: 0 !important;
}
.mode-b-shell .sa-form-head {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.mode-b-shell main:has(.sa-form-slim),
.mode-b-shell #main:has(.sa-form-slim) {
  overflow: hidden !important;
}
.mode-b-shell .crm-dashboard,
.mode-b-shell .crm-dashboard-v2 {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.mode-b-shell .crm-dash-hero {
  margin-top: 0 !important;
}
/* ==== end modeb-gap-fix ==== */

/* ==== CRM Mode B bottom gap fix :: modeb-bottom-gap-fix (2026-09-02) ==== */
/* The old layout stacked bottom padding on main (5.9rem) + footer (5rem) +
   shell (4.5rem), far more than the fixed bottom nav needs. Collapse to a
   single clearance provided by the footer (the last in-flow element). */
.mode-b-shell {
  padding-bottom: 0 !important;
}
.mode-b-shell > main,
.mode-b-shell main,
.mode-b-shell #main {
  padding-bottom: 0.5rem !important;
}
.mode-b-shell > .mode-b-footer,
.mode-b-shell .mode-b-footer {
  padding-top: 0.4rem !important;
  padding-bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px)) !important;
  margin-top: 0.25rem !important;
}
/* ==== end modeb-bottom-gap-fix ==== */

/* ==== CRM Mode B body width + leads tweaks :: modeb-body-leads-fix (2026-09-02) ==== */

/* 1) Body width == header width — drop the page-container side padding so the
   body content aligns to the same core inset as the header (1rem core-pad). */
.mode-b-shell .page-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Leads list — remove the repeated status value (Contacted / Qualified …). */
.mode-b-shell .crm-leads-list .crm-lead-status {
  display: none !important;
}

/* 3) Leads list — unique action icon colors (were uniform grey). */
.mode-b-shell .crm-leads-list .crm-lead-card-actions {
  opacity: 1 !important;
}
.mode-b-shell .crm-leads-list .crm-lead-action-btn {
  color: #2563eb !important;
}
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="convert"] {
  color: #0d9488 !important;
}
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="danger"] {
  color: #dc2626 !important;
}
/* ==== end modeb-body-leads-fix ==== */

/* ==== CRM Leads action buttons -> icon-only, unique icons/colors :: modeb-leads-actions-icons (2026-09-02) ==== */
.mode-b-shell .crm-leads-actions.crm-leads-actions-icons {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.55rem;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only {
  flex: 0 0 auto;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0 !important;
  gap: 0;
  border-radius: 0.9rem;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only svg {
  display: block;
}

/* Add -> blue (filled, primary) */
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="add"] {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="add"]:hover {
  background: #1d4ed8 !important;
}

/* Import -> teal outline */
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="import"] {
  background: color-mix(in srgb, #0d9488 8%, #fff) !important;
  border-color: color-mix(in srgb, #0d9488 45%, #fff) !important;
  color: #0d9488 !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="import"]:hover {
  background: color-mix(in srgb, #0d9488 16%, #fff) !important;
}

/* Export -> orange outline */
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="export"] {
  background: color-mix(in srgb, #ea580c 8%, #fff) !important;
  border-color: color-mix(in srgb, #ea580c 45%, #fff) !important;
  color: #ea580c !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="export"]:hover {
  background: color-mix(in srgb, #ea580c 16%, #fff) !important;
}
/* ==== end modeb-leads-actions-icons ==== */

/* ==== CRM Leads toolbar: collapsible search + right-aligned action icons :: modeb-leads-toolbar (2026-09-02) ==== */
.mode-b-shell .crm-leads-toolbar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
}
.mode-b-shell .crm-leads-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  min-width: 0;
}
.mode-b-shell .crm-leads-search-wrap.open {
  flex: 1 1 auto;
}
.mode-b-shell .crm-leads-search-toggle {
  width: 2.9rem;
  height: 2.9rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.9rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #2563eb;
  cursor: pointer;
}
.mode-b-shell .crm-leads-search-toggle.active,
.mode-b-shell .crm-leads-search-toggle:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.mode-b-shell .crm-leads-search-wrap .crm-leads-search {
  flex: 1 1 auto;
  min-width: 0;
}
.mode-b-shell .crm-leads-actions.crm-leads-actions-icons {
  margin-left: auto;
  width: auto;
  flex: 0 0 auto;
}
/* ==== end modeb-leads-toolbar ==== */

/* ==== CRM Leads page: core width + no gray background :: modeb-leads-corewidth (2026-09-02) ==== */
/* Keep the standard centered core width; only remove the gray list backdrop. */
.mode-b-shell main:has([data-screen="crm-leads-list"]) {
  background: transparent !important;
}
.mode-b-shell main:has([data-screen="crm-leads-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-leads-list"]) .sa-form-list {
  background: transparent !important;
}
/* ==== end modeb-leads-corewidth ==== */

/* ==== CRM Leads row: email + phone lines, clean & truncated :: modeb-leads-contact (2026-09-02) ==== */
.mode-b-shell .crm-lead-card-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  color: #64748b;
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-b-shell .crm-lead-card-contact svg {
  flex: 0 0 auto;
  color: #94a3b8;
}
.mode-b-shell .crm-lead-card-company svg {
  flex: 0 0 auto;
}
/* keep rows from overflowing horizontally */
.mode-b-shell .crm-leads-list,
.mode-b-shell .crm-lead-card,
.mode-b-shell .crm-lead-card-main {
  max-width: 100%;
  overflow-x: hidden;
}
.mode-b-shell .crm-lead-card-identity {
  min-width: 0;
}
/* ==== end modeb-leads-contact ==== */

/* ==== CRM Leads rows: uniform clean white background :: modeb-leads-cardbg (2026-09-02) ==== */
.mode-b-shell .crm-leads-list .crm-lead-card,
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="new"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="contacted"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="qualified"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="muted"] {
  background: #ffffff !important;
  border: 1px solid #e8eef5 !important;
}
/* ==== end modeb-leads-cardbg ==== */

/* ==== CRM Leads pagination controls :: modeb-leads-pagination (2026-09-02) ==== */
.mode-b-shell .crm-leads-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.35rem;
}
.mode-b-shell .crm-leads-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.95rem;
  border-radius: 0.8rem;
  border: 1px solid #dbe3f0;
  background: #fff;
  color: #1d4ed8;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.mode-b-shell .crm-leads-page-btn:hover:not(:disabled) {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.mode-b-shell .crm-leads-page-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.mode-b-shell .crm-leads-page-info {
  font-size: 0.82rem;
  font-weight: 650;
  color: #64748b;
}
/* ==== end modeb-leads-pagination ==== */

/* ==== CRM bottom nav: clear per-item colors + unique customer icon :: modeb-nav-colors (2026-09-02) ==== */
/* Give every nav item a colored circular icon chip so each color reads clearly. */
.mode-b-shell .mode-b-nav .mode-b-nav-item:before {
  box-sizing: content-box;
  padding: 0.35rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href="/app/crm"]:before,
.mode-b-shell .mode-b-nav .mode-b-nav-item[href="/app/crm/"]:before {
  background-color: color-mix(in srgb, var(--nav-dash) 15%, #fff);
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/leads"]:before {
  background-color: color-mix(in srgb, var(--nav-leads) 15%, #fff);
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/contacts"]:before {
  background-color: color-mix(in srgb, var(--nav-contacts) 15%, #fff);
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/book"]:before {
  background-color: color-mix(in srgb, var(--nav-more) 15%, #fff);
}
/* Customers -> unique "customer" icon (person + check), orange chip. */
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/customers"]:before {
  background-color: color-mix(in srgb, var(--nav-customers) 15%, #fff);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.2'/><path d='M3.5 20c0-3.3 2.6-5.5 5.5-5.5s5.5 2.2 5.5 5.5'/><path d='m15.5 12.5 2 2 3.5-3.5'/></svg>");
}
/* Make labels carry their item color at full strength. */
.mode-b-shell .mode-b-nav .mode-b-nav-item {
  font-weight: 700;
}
/* ==== end modeb-nav-colors ==== */

/* ==== CRM Leads row: name left / email+phone right, stack on narrow :: modeb-leads-contactcol (2026-09-02) ==== */
.mode-b-shell .crm-lead-card-main {
  flex-wrap: wrap;
}
.mode-b-shell .crm-lead-card-identity {
  flex: 1 1 auto;
  min-width: 8rem;
}
.mode-b-shell .crm-lead-card-contactcol {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 0.15rem;
  min-width: 0;
  max-width: 60%;
}
.mode-b-shell .crm-lead-card-contactcol .crm-lead-card-contact {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* When the row is narrow, drop the contact block below the name (full width, left-aligned). */
@media (max-width: 33rem) {
  .mode-b-shell .crm-lead-card-contactcol {
    margin-left: 3.15rem;
    align-items: flex-start;
    text-align: left;
    max-width: calc(100% - 3.15rem);
    flex-basis: 100%;
  }
}
/* ==== end modeb-leads-contactcol ==== */

/* ==== CRM Leads normal filters grid :: modeb-leads-filters (2026-09-02) ==== */
.mode-b-shell .crm-leads-filters-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0.9rem;
  border: 1px solid #e8eef5;
  border-radius: 1rem;
  background: #fff;
}
.mode-b-shell .crm-leads-filters-grid select,
.mode-b-shell .crm-leads-filters-grid input[type="date"] {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid #dbe3f0;
  border-radius: 0.7rem;
  background: #fff;
  color: #0f172a;
  font-size: 0.85rem;
}
.mode-b-shell .crm-leads-filters-grid .crm-leads-filters-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
/* ==== end modeb-leads-filters ==== */

/* ==== CRM Leads table layout: Name | Phone | Email columns :: modeb-leads-table (2026-09-02) ==== */
.mode-b-shell .crm-leads-list-head {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr) minmax(0, 1.7fr) 6.5rem;
  column-gap: 0.6rem;
  align-items: center;
  padding: 0.15rem 0.9rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr) minmax(0, 1.7fr) 6.5rem;
  column-gap: 0.6rem;
  align-items: center;
}
.mode-b-shell .crm-leads-list .crm-lead-row .crm-lead-card-main {
  display: contents !important;
}
.mode-b-shell .crm-lead-namecell {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.mode-b-shell .crm-lead-row .crm-lead-card-identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mode-b-shell .crm-lead-col {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  font-size: 0.8rem;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-b-shell .crm-lead-col svg {
  flex: 0 0 auto;
  color: #94a3b8;
}
.mode-b-shell .crm-lead-col-email {
  color: #2563eb;
}
.mode-b-shell .crm-lead-col-empty {
  color: #cbd5e1;
}
.mode-b-shell .crm-lead-row .crm-lead-card-actions {
  opacity: 1;
  justify-content: flex-end;
}
/* ==== end modeb-leads-table ==== */

/* ==== CRM Leads mobile stacked rows :: modeb-leads-mobile (2026-09-02) ==== */
@media (max-width: 34rem) {
  .mode-b-shell .crm-leads-list-head {
    display: none;
  }
  .mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row {
    grid-template-columns: 1fr auto;
    row-gap: 0.3rem;
    align-items: start;
  }
  .mode-b-shell .crm-lead-namecell {
    grid-column: 1;
    grid-row: 1;
  }
  .mode-b-shell .crm-lead-row .crm-lead-card-actions {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  .mode-b-shell .crm-lead-col-phone {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .mode-b-shell .crm-lead-col-email {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  /* indent the stacked contact lines to sit under the name (past the avatar) */
  .mode-b-shell .crm-lead-row .crm-lead-col {
    padding-left: 3.05rem;
    font-size: 0.82rem;
  }
}
/* ==== end modeb-leads-mobile ==== */


/* ==== CRM Leads pagination count :: modeb-leads-count (2026-09-02) ==== */
.mode-b-shell .crm-leads-page-info {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}
.mode-b-shell .crm-leads-page-info .crm-leads-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
}
/* ==== end modeb-leads-count ==== */

/* ==== Add Lead form: per-field mic icon (global, portal-safe) :: modeb-lead-field-mic-v2 (2026-09-02) ==== */
.lead-form .field-with-mic {
  position: relative;
  display: block;
}
.lead-form .field-with-mic .field {
  width: 100%;
}
.lead-form .field-with-mic .voice-session {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  flex-wrap: nowrap;
  gap: 0.2rem;
  margin: 0;
}
.lead-form .field-with-mic .voice-session .voice-btn {
  min-height: 0;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  gap: 0;
  font-size: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #2563eb 10%, #fff);
  color: #2563eb;
  border: 1px solid color-mix(in srgb, #2563eb 28%, #fff);
}
.lead-form .field-with-mic .voice-session .voice-btn:hover {
  background: color-mix(in srgb, #2563eb 18%, #fff);
}
.lead-form .field-with-mic .voice-session .voice-btn svg {
  font-size: initial;
}
.lead-form .field-with-mic .voice-session .voice-btn-stop {
  color: #b91c1c;
  border-color: color-mix(in srgb, #b91c1c 35%, #fff);
  background: color-mix(in srgb, #b91c1c 8%, #fff);
}
.lead-form .field-with-mic .voice-session-status {
  display: none;
}

/* No visible scrollbar in the Add Lead popup */
.sheet:has(.lead-form) .sheet-body {
  scrollbar-width: none;
}
.sheet:has(.lead-form) .sheet-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
/* ==== end modeb-lead-field-mic-v2 ==== */

/* ==== CRM Leads phone call + WhatsApp icons :: modeb-leads-phone-acts (2026-09-02) ==== */
.mode-b-shell .crm-lead-col-phone {
  overflow: visible;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-num {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.mode-b-shell .crm-lead-phone-acts {
  display: inline-flex;
  gap: 0.25rem;
  flex: 0 0 auto;
  margin-left: 0.35rem;
}
.mode-b-shell .crm-lead-phone-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}
.mode-b-shell .crm-lead-phone-act.call {
  color: #2563eb;
  background: color-mix(in srgb, #2563eb 10%, #fff);
}
.mode-b-shell .crm-lead-phone-act.wa {
  color: #16a34a;
  background: color-mix(in srgb, #16a34a 12%, #fff);
}
.mode-b-shell .crm-lead-phone-act:hover {
  filter: brightness(0.96);
}
/* ==== end modeb-leads-phone-acts ==== */

/* ==== Add Lead form: unify Phone field + align mic to label :: modeb-lead-phone-style (2026-09-02) ==== */
/* Mic sits on the label line (top-right), slightly smaller. */
.lead-form .field-with-mic .voice-session {
  top: 0;
  right: 0;
}
.lead-form .field-with-mic .voice-session .voice-btn {
  width: 1.55rem;
  height: 1.55rem;
}

/* Phone field styled like the other inputs */
.lead-form .lead-phone-field .field-label-row {
  margin-bottom: 0.3rem;
}
.lead-form .lead-phone-field .lead-phone-label {
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 600;
}
.lead-form .lead-phone-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.lead-form .lead-phone-row > select {
  flex: 0 0 auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.9rem;
  padding: 0.75rem 0.55rem;
  background: #fff;
  color: #0f172a;
  font: inherit;
}
.lead-form .lead-phone-input-wrap {
  position: relative;
  flex: 1 1 auto;
  display: block;
  min-width: 0;
}
.lead-form .lead-phone-input-wrap .field-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: #16a34a;
  pointer-events: none;
  display: inline-grid;
  place-items: center;
}
.lead-form .lead-phone-input-wrap input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 0.9rem;
  padding: 0.75rem 0.85rem 0.75rem 2.55rem;
  background: #fff;
  color: #0f172a;
  font: inherit;
}
/* ==== end modeb-lead-phone-style ==== */


/* ==== CRM Leads: wider phone col + plain call/WhatsApp icons :: modeb-leads-phone-v2 (2026-09-02) ==== */
.mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row,
.mode-b-shell .crm-leads-list-head {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.8fr) minmax(0, 1.4fr) 5.5rem !important;
}
/* show the full phone number */
.mode-b-shell .crm-lead-col-phone {
  overflow: visible;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-num {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
/* plain icons: no background chip, colour only */
.mode-b-shell .crm-lead-phone-act,
.mode-b-shell .crm-lead-phone-act.call,
.mode-b-shell .crm-lead-phone-act.wa {
  background: transparent !important;
  width: 1.4rem;
  height: 1.4rem;
}
.mode-b-shell .crm-lead-phone-act.call {
  color: #2563eb;
}
.mode-b-shell .crm-lead-phone-act.wa {
  color: #25d366;
}
.mode-b-shell .crm-lead-phone-act:hover {
  filter: none;
  opacity: 0.75;
}
/* ==== end modeb-leads-phone-v2 ==== */

/* ==== Add Lead form: compact right-aligned action buttons :: modeb-lead-actions (2026-09-02) ==== */
.lead-form .lead-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.35rem;
}
.lead-form .lead-form-actions .primary-btn {
  width: auto;
  flex: 0 0 auto;
  min-width: 6.5rem;
  padding: 0.6rem 1.5rem;
}
.lead-form .lead-form-actions .text-btn {
  flex: 0 0 auto;
}
/* ==== end modeb-lead-actions ==== */

/* ==== CRM Leads rows: white + light-blue hover :: modeb-leads-hover (2026-09-02) ==== */
.mode-b-shell .crm-leads-list .crm-lead-card {
  background: #ffffff !important;
  transition: background 0.12s ease;
}
.mode-b-shell .crm-leads-list > li:hover .crm-lead-card,
.mode-b-shell .crm-leads-list .crm-lead-card:hover {
  background: #eff6ff !important;
}
/* ==== end modeb-leads-hover ==== */

/* ==== CRM Leads phone icons unique colors (override grey col svg) :: modeb-leads-phone-color (2026-09-02) ==== */
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.call,
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.call svg {
  color: #2563eb !important;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.wa,
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.wa svg {
  color: #25d366 !important;
}
/* ==== end modeb-leads-phone-color ==== */

/* ==== CRM Leads mobile layout fix (override phone-v2 grid) :: modeb-leads-mobile-v2 (2026-09-02) ==== */
@media (max-width: 34rem) {
  .mode-b-shell .crm-leads-list-head {
    display: none !important;
  }
  .mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row {
    grid-template-columns: 1fr auto !important;
    row-gap: 0.3rem;
    align-items: start;
  }
  .mode-b-shell .crm-lead-namecell {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0;
  }
  .mode-b-shell .crm-lead-row .crm-lead-card-name {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .mode-b-shell .crm-lead-row .crm-lead-card-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center;
  }
  .mode-b-shell .crm-lead-col-phone {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    padding-left: 3.15rem;
  }
  .mode-b-shell .crm-lead-col-email {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    padding-left: 3.15rem;
  }
}
/* ==== end modeb-leads-mobile-v2 ==== */

/* ==== CRM Leads desktop columns: full name + tighter phone :: modeb-leads-cols-v3 (2026-09-02) ==== */
@media (min-width: 34.01rem) {
  .mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row,
  .mode-b-shell .crm-leads-list-head {
    grid-template-columns: minmax(0, 1.95fr) minmax(0, 1.2fr) minmax(0, 1.35fr) 5.5rem !important;
  }
  .mode-b-shell .crm-lead-row .crm-lead-card-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}
/* ==== end modeb-leads-cols-v3 ==== */

/* ==== CRM Leads phone: no overlap between number and icons :: modeb-leads-phone-v3 (2026-09-02) ==== */
.mode-b-shell .crm-lead-col-phone {
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-num {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-acts {
  flex: 0 0 auto;
  margin-left: 0.1rem;
}
@media (min-width: 34.01rem) {
  .mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row,
  .mode-b-shell .crm-leads-list-head {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.6fr) minmax(0, 1.25fr) 5.5rem !important;
  }
}
/* ==== end modeb-leads-phone-v3 ==== */

/* ==== Toast messages -> top-right :: modeb-toast-topright (2026-09-02) ==== */
.toast-stack {
  left: auto !important;
  right: 0.9rem !important;
  bottom: auto !important;
  top: calc(0.9rem + env(safe-area-inset-top, 0px)) !important;
  transform: none !important;
  align-items: flex-end !important;
  z-index: 90 !important;
}
/* ==== end modeb-toast-topright ==== */

/* ==== CRM Lead detail: clear UI :: modeb-lead-detail (2026-09-02) ==== */
.mode-b-shell .crm-lead-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mode-b-shell .crm-lead-detail-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.mode-b-shell .crm-lead-detail-bar-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 750;
  color: #0f172a;
}
.mode-b-shell .crm-lead-detail-back {
  font-weight: 700;
  color: #2563eb;
}
.mode-b-shell .crm-lead-detail-menu-wrap {
  position: relative;
}
.mode-b-shell .crm-lead-detail-icon-btn {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  border: 1px solid #e8eef5;
  background: #fff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mode-b-shell .crm-lead-detail-menu {
  position: absolute;
  right: 0;
  top: 2.6rem;
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 0.8rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  z-index: 5;
  overflow: hidden;
}
.mode-b-shell .crm-lead-detail-menu button {
  text-align: left;
  padding: 0.65rem 0.9rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 0.9rem;
  color: #0f172a;
}
.mode-b-shell .crm-lead-detail-menu button:hover {
  background: #f4f7fb;
}

/* Profile card — gradient hero */
.mode-b-shell .crm-lead-profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, #4f46e5 0%, #2563eb 55%, #3b82f6 100%);
  color: #fff;
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.26);
}
.mode-b-shell .crm-lead-profile-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 800;
}
.mode-b-shell .crm-lead-profile-name {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
}
.mode-b-shell .crm-lead-profile-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
}
.mode-b-shell .crm-lead-profile-card .crm-lead-status {
  display: inline-block !important;
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  padding: 0.22rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}
.mode-b-shell .crm-lead-convert-btn {
  margin-top: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  border: 0;
  background: #fff;
  color: #2563eb;
  font-weight: 700;
  cursor: pointer;
}
.mode-b-shell .crm-lead-convert-btn:disabled {
  opacity: 0.6;
}

/* Quick actions grid */
.mode-b-shell .crm-lead-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}
.mode-b-shell .crm-lead-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.75rem 0.4rem;
  border-radius: 1rem;
  border: 1px solid #e8eef5;
  background: #fff;
  color: #334155;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
.mode-b-shell .crm-lead-action svg {
  color: #2563eb;
}
.mode-b-shell .crm-lead-action:hover:not(:disabled) {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.mode-b-shell .crm-lead-action:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Info + timeline cards */
.mode-b-shell .crm-lead-info-card,
.mode-b-shell .crm-lead-timeline-card {
  padding: 1rem 1.1rem;
  border-radius: 1.15rem;
  background: #fff;
  border: 1px solid #e8eef5;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.mode-b-shell .crm-lead-section-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 750;
  color: #0f172a;
}
.mode-b-shell .crm-lead-info-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem 1rem;
  margin: 0;
}
.mode-b-shell .crm-lead-info-list > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.mode-b-shell .crm-lead-info-list dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  font-weight: 700;
}
.mode-b-shell .crm-lead-info-list dd {
  margin: 0;
  font-size: 0.9rem;
  color: #0f172a;
  word-break: break-word;
}
.mode-b-shell .crm-lead-info-assignee {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.mode-b-shell .crm-lead-assignee-avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: #e8eef8;
  color: #1d4ed8;
  font-size: 0.62rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mode-b-shell .crm-lead-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}
.mode-b-shell .crm-lead-tag {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 0.72rem;
  font-weight: 650;
}

/* Timeline */
.mode-b-shell .crm-lead-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1rem;
  border-left: 2px solid #e5edf7;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mode-b-shell .crm-lead-timeline li {
  position: relative;
}
.mode-b-shell .crm-lead-timeline-dot {
  position: absolute;
  left: -1.35rem;
  top: 0.25rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: #94a3b8;
  box-shadow: 0 0 0 3px #fff;
}
.mode-b-shell .crm-lead-timeline li[data-first='true'] .crm-lead-timeline-dot {
  background: #2563eb;
}
.mode-b-shell .crm-lead-timeline-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mode-b-shell .crm-lead-timeline-body time {
  font-size: 0.72rem;
  color: #94a3b8;
}
.mode-b-shell .crm-lead-timeline-body strong {
  font-size: 0.9rem;
  color: #0f172a;
}
.mode-b-shell .crm-lead-timeline-empty {
  margin: 0;
}
/* ==== end modeb-lead-detail ==== */

/* ==== CRM Leads filter popup (bottom sheet) :: modeb-filter-sheet (2026-09-02) ==== */
.sheet .crm-leads-filters-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  padding: 0;
  border: 0;
  background: transparent;
}
.sheet .crm-leads-filters-grid select,
.sheet .crm-leads-filters-grid input[type="date"] {
  width: 100%;
  padding: 0.65rem 0.7rem;
  border: 1px solid #dbe3f0;
  border-radius: 0.7rem;
  background: #fff;
  color: #0f172a;
  font-size: 0.9rem;
}
.sheet .crm-leads-filters-grid .crm-leads-filters-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.crm-leads-filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
}
.crm-leads-filter-actions .primary-btn {
  width: auto;
  min-width: 8rem;
  padding: 0.7rem 1.4rem;
}
/* ==== end modeb-filter-sheet ==== */

.sites-map-empty {
  width: 100%;
  height: 100%;
  min-height: 8rem;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.25rem;
  background: #e8eef5;
  color: #334155;
  font: 650 0.95rem/1.3 system-ui, Segoe UI, sans-serif;
  text-align: center;
  padding: 1rem;
}
.sites-map-empty .muted {
  font-weight: 500;
  font-size: 0.8rem;
  color: #64748b;
  margin: 0;
}
.sites-map-empty p {
  margin: 0;
}
.sites-canva-block-artboard .sites-map-frame {
  pointer-events: none;
}

/* Rich Text element (title + body + quote + list) */
.sites-rich-text {
  line-height: 1.55;
  color: inherit;
  word-break: break-word;
}
.sites-rich-text > *:first-child {
  margin-top: 0;
}
.sites-rich-text > *:last-child {
  margin-bottom: 0;
}
.sites-rich-text h1,
.sites-rich-text h2,
.sites-rich-text h3,
.sites-rich-text h4 {
  margin: 0 0 0.55em;
  line-height: 1.25;
  font-weight: 700;
}
.sites-rich-text h2 {
  font-size: 1.75em;
}
.sites-rich-text p {
  margin: 0 0 0.85em;
}
.sites-rich-text blockquote {
  margin: 0 0 1em;
  padding: 0.85em 1em;
  border-left: 3px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  border-radius: 0 8px 8px 0;
}
.sites-rich-text blockquote p {
  margin: 0;
}
.sites-rich-text ul,
.sites-rich-text ol {
  margin: 0 0 0.75em;
  padding-left: 1.35em;
}
.sites-rich-text li {
  margin: 0.28em 0;
}
.sites-rich-text-edit {
  outline: none;
  min-height: 8rem;
  cursor: text;
}
.sites-rich-text-edit:focus {
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.35);
  border-radius: 6px;
}

.sites-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(15, 23, 42, 0.82);
  cursor: zoom-out;
}
.sites-image-lightbox img {
  max-width: min(1100px, 100%);
  max-height: min(90vh, 100%);
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.sites-cluster-rating {
  margin: 0.35rem 0 0;
  letter-spacing: 0.08em;
  color: #f59e0b;
  font-size: 0.95rem;
}
.sites-cluster-item-link {
  display: block;
  color: inherit;
  text-decoration: none;
}


/* ==== desktop 900px shell (Mode A) ==== */
@media (min-width: 901px) {
  .app-shell,
  .app-shell:has(.workspace-home),
  .app-shell:has(.sa-form),
  .app-shell:has(.sa-form-wide),
  .app-shell:has([data-screen='package-add']),
  .app-shell:has([data-screen='package-edit']),
  .app-shell:has([data-step='plan']),
  .app-shell:has([data-step='admin']) {
    --layout-max: 900px;
    --shell-content-max: 900px;
  }
  .workspace-header,
  .page-container {
    width: min(900px, 100%);
    max-width: 900px;
    margin-inline: auto;
  }
  .mode-b-shell .page-container,
  .mode-b-shell #main > *,
  .mode-b-shell main > *,
  .mode-b-shell .crm-dashboard,
  .mode-b-shell .crm-dashboard-v2 {
    width: min(900px, 100%) !important;
    max-width: 900px !important;
    margin-inline: auto !important;
  }
  .app-shell[data-page-builder='true'] > main {
    width: min(900px, 100%);
    max-width: 900px;
    margin-inline: auto;
  }
  .login-page,
  .guest-shell {
    width: min(900px, 100%);
    max-width: 900px;
    margin-inline: auto;
  }
}


/* Preview/public: builder chrome never paints. Live content + saved styles only. */
.sites-canva[data-preview='true'] .sites-canva-section,
.sites-canva[data-preview='true'] .sites-canva-section:hover,
.sites-canva[data-preview='true'] .sites-canva-section[data-selected='true'],
.sites-canva[data-preview='true'] .sites-canva-block,
.sites-canva[data-preview='true'] .sites-canva-block:hover,
.sites-canva[data-preview='true'] .sites-canva-block[data-selected='true'],
.sites-canva[data-preview='true'] .sites-row,
.sites-canva[data-preview='true'] .sites-row:hover,
.sites-canva[data-preview='true'] .sites-row[data-selected='true'],
.sites-canva[data-preview='true'] .sites-col,
.sites-canva[data-preview='true'] .sites-col:hover,
.sites-canva[data-preview='true'] .sites-col[data-selected='true'],
.sites-canva[data-preview='true'] .sites-col-el,
.sites-canva[data-preview='true'] .sites-col-el:hover,
.sites-canva[data-preview='true'] .sites-col-el[data-selected='true'],
.sites-canva[data-preview='true'] .sites-pagekit-block,
.sites-canva[data-preview='true'] .sites-pagekit-section {
  outline: none !important;
  outline-color: transparent !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  cursor: default;
}
.sites-canva[data-preview='true'] .sites-selection-chrome,
.sites-canva[data-preview='true'] .sites-row-label,
.sites-canva[data-preview='true'] .sites-col-label,
.sites-canva[data-preview='true'] .sites-row-head,
.sites-canva[data-preview='true'] .sites-row-chrome,
.sites-canva[data-preview='true'] .sites-col-chrome,
.sites-canva[data-preview='true'] .sites-col-add-el,
.sites-canva[data-preview='true'] .sites-col-empty,
.sites-canva[data-preview='true'] .sites-canva-section-empty,
.sites-canva[data-preview='true'] .sites-canva-handle,
.sites-canva[data-preview='true'] .sites-canva-float,
.sites-canva[data-preview='true'] .sites-text-format,
.sites-canva[data-preview='true'] .sites-ghl-url {
  display: none !important;
}
.sites-canva[data-preview='true'] .sites-canva-artboard {
  box-shadow: none;
  min-height: 0;
}
[data-screen='sites-preview'] .sites-canva,
[data-screen='sites-public'] .sites-canva {
  /* inherit the same kill-switch via data-preview on the canvas */
}


/* Section green + is hover-only at the section insertion point. */
.sites-canva:not([data-preview='true']) .sites-canva-section > .sites-selection-chrome .sites-selection-chrome-add {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.sites-canva:not([data-preview='true']) .sites-canva-section:hover > .sites-selection-chrome .sites-selection-chrome-add {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sites-canva:not([data-preview='true']) .sites-col-add-el {
  appearance: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  transform: translate(-50%, -50%);
  display: none;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #f97316;
  color: #fff;
  box-shadow: 0 0 0 3px #fff;
  cursor: pointer;
}
.sites-canva:not([data-preview='true']) .sites-col:hover > .sites-col-add-el {
  display: grid;
}
.sites-canva[data-preview='true'] .sites-col-add-el {
  display: none !important;
}

.sites-canva:not([data-preview='true']) .sites-col:has(> .sites-col-add-el) > .sites-selection-chrome .sites-selection-chrome-add {
  display: none;
}


.sites-canva:not([data-preview='true']) .sites-section-add-pill {
  appearance: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 22;
  transform: translate(-50%, -50%);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  margin: 0;
  padding: 0.32rem 0.78rem;
  width: auto;
  max-width: max-content;
  flex: 0 0 auto;
  align-self: center;
  border: 0;
  border-radius: 999px;
  background: #22c55e;
  color: #fff;
  font: 700 0.82rem/1 system-ui, Segoe UI, sans-serif;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  white-space: nowrap;
}
.sites-canva:not([data-preview='true']) .sites-canva-section[data-empty='true'] > .sites-section-add-pill {
  display: inline-flex;
}
.sites-canva:not([data-preview='true']) .sites-section-add-rule {
  appearance: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 22;
  height: 2px;
  margin: 0;
  padding: 0;
  border: 0;
  background: #22c55e;
  cursor: pointer;
  display: none;
}
.sites-canva:not([data-preview='true']) .sites-canva-section:not([data-empty='true']):hover > .sites-section-add-rule {
  display: block;
}
.sites-canva:not([data-preview='true']) .sites-section-add-rule-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: #22c55e;
  color: #fff;
  box-shadow: 0 0 0 3px #fff;
  pointer-events: none;
}
.sites-canva[data-preview='true'] .sites-section-add-pill,
.sites-canva[data-preview='true'] .sites-section-add-rule {
  display: none !important;
}
.sites-canva:not([data-preview='true']) .sites-canva-section > .sites-selection-chrome .sites-selection-chrome-add {
  display: none !important;
}


/* Row wrappers must never use element orange — inner .sites-row / .sites-col / .sites-col-el own hierarchy colors. */
.sites-canva:not([data-preview='true']) .sites-canva-block:has(.sites-row):hover,
.sites-canva:not([data-preview='true']) .sites-canva-block:has(.sites-row)[data-selected='true'],
.sites-canva:not([data-preview='true']) .sites-canva-block[data-kind='row']:hover,
.sites-canva:not([data-preview='true']) .sites-canva-block[data-kind='row'][data-selected='true'],
.sites-canva:not([data-preview='true']) .sites-canva-block:hover:has(.sites-row:hover, .sites-col:hover, .sites-col-el:hover),
.sites-canva:not([data-preview='true']) .sites-canva-block[data-selected='true']:has(.sites-row:hover, .sites-col:hover, .sites-col-el:hover) {
  outline-color: transparent !important;
  outline: none !important;
}

.sites-rs a,
.sites-pagekit-list a,
.sites-rich-text a {
  color: var(--sites-link-color, inherit);
}
.sites-pagekit-list {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  box-sizing: border-box;
  padding-left: 1.15em;
  list-style-position: inside;
}
.sites-pagekit-list[data-marker='dash'] { padding-left: 0.2em; }
.sites-pagekit-list[data-marker='none'] { padding-left: 0; list-style: none; }

.sites-canva .sites-canvas-text-edit {
  cursor: text;
  outline: none;
  caret-color: currentColor;
  min-width: 1ch;
}
.sites-canva .sites-canvas-text-edit:focus {
  outline: none;
  box-shadow: none;
}
.sites-canva[data-preview='true'] .sites-canvas-text-edit {
  cursor: inherit;
}

.sites-canvas-text-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  font-size: 13px;
  z-index: 10050;
  pointer-events: auto !important;
  isolation: isolate;
}
.sites-canvas-text-toolbar,
.sites-canvas-text-toolbar * {
  pointer-events: auto !important;
}
html.sites-palette-dragging .sites-canvas-text-toolbar,
html.sites-palette-dragging .sites-canvas-text-toolbar * {
  pointer-events: auto !important;
}
.sites-canvas-text-toolbar select,
.sites-canvas-text-toolbar button,
.sites-canvas-text-toolbar input,
.sites-canvas-text-toolbar label {
  border: 0;
  background: transparent;
  font: inherit;
  color: #111827;
  cursor: pointer;
  border-radius: 8px;
  padding: 0.2rem 0.35rem;
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
}
.sites-canvas-text-toolbar button[aria-pressed='true'] {
  background: #eef2ff;
  font-weight: 700;
}
.sites-canvas-text-toolbar-swatch input[type='color'] {
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.sites-canvas-text-toolbar-size select { min-width: 3.2rem; }
.sites-canvas-text-link { color: inherit; text-decoration: inherit; }
.sites-canvas-text-edit h1, .sites-rs h1, .sites-canvas-text-edit[data-heading='h1'] { font-size: 2em; font-weight: 700; margin: 0; }
.sites-canvas-text-edit h2, .sites-rs h2, .sites-canvas-text-edit[data-heading='h2'] { font-size: 1.5em; font-weight: 700; margin: 0; }
.sites-canvas-text-edit h3, .sites-rs h3, .sites-canvas-text-edit[data-heading='h3'] { font-size: 1.25em; font-weight: 650; margin: 0; }
.sites-canvas-text-edit h4, .sites-rs h4, .sites-canvas-text-edit[data-heading='h4'] { font-size: 1.1em; font-weight: 650; margin: 0; }
.sites-canvas-text-edit h5, .sites-rs h5, .sites-canvas-text-edit[data-heading='h5'] { font-size: 1em; font-weight: 600; margin: 0; }
.sites-canvas-text-edit h6, .sites-rs h6, .sites-canvas-text-edit[data-heading='h6'] { font-size: 0.9em; font-weight: 600; margin: 0; }


.partner-chart-canvas-shell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.partner-chart-canvas {
  width: 100%;
  max-width: 100%;
  height: min(62vh, 36rem);
  overflow: hidden;
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--purple) 16%, transparent) 1px, transparent 0)
      0 0 / 18px 18px,
    #fbfaff;
  cursor: grab;
  touch-action: none;
}

.partner-chart-canvas:active {
  cursor: grabbing;
}

.partner-chart-world {
  transform-origin: 50% 24px;
  min-height: 100%;
  width: max-content;
  min-width: 100%;
  padding: 1.1rem 1.5rem 2rem;
}

.partner-chart-zoom {
  display: flex;
  align-items: center;
  align-self: flex-end;
  gap: 0.35rem;
  padding: 0.28rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--purple) 8%, #fff);
  box-shadow: 0 8px 20px rgba(18, 32, 43, 0.08);
}

.partner-chart-zoom button,
.partner-chart-zoom span {
  min-width: 1.85rem;
  min-height: 1.85rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--purple);
  font-size: 0.92rem;
  font-weight: 700;
}

.partner-chart-zoom span {
  display: grid;
  place-items: center;
  min-width: 2.6rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.partner-chart-zoom button {
  cursor: pointer;
}

.partner-orgchart {
  width: max-content;
  min-width: 100%;
  overflow: visible;
  padding: 0;
}

.partner-orgchart-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: max-content;
  margin: 0 auto;
}

.partner-orgchart-level {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.partner-orgchart-stem,
.partner-orgchart-col-stem {
  display: block;
  width: 2px;
  height: 1.15rem;
  margin: 0 auto;
  background: #c4b5fd;
}

.partner-orgchart-col-stem.is-dashed {
  background: repeating-linear-gradient(to bottom, #c4b5fd 0 4px, transparent 4px 8px);
}

.partner-orgchart-fan {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.partner-orgchart-fan-bar {
  height: 2px;
  margin: 0 calc(6.25rem);
  background: #c4b5fd;
}

.partner-orgchart-fan.is-single .partner-orgchart-fan-bar {
  display: none;
}

.partner-orgchart-cols {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1.1rem;
}

.partner-orgchart-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.partner-orgchart-l3 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 0.9rem;
}

.partner-orgchart-l3-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.partner-orgchart-l3-fan {
  width: 100%;
}

.partner-chart-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.partner-chart-toggle,
.partner-chart-chip {
  border: 0;
  background: transparent;
  color: var(--purple);
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
  min-height: 1.6rem;
}

.partner-chart-chip {
  margin-top: 1.15rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--purple) 8%, #fff);
}

.partner-chart-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 12.5rem;
  min-height: 5.4rem;
  padding: 0.85rem 2.4rem 0.75rem 0.85rem;
  border-radius: 1rem;
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 18px rgba(18, 32, 43, 0.06);
}

.partner-chart-card .pict {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.55rem;
  display: grid;
  place-items: center;
  margin-bottom: 0.15rem;
}

.partner-chart-card strong {
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--brand-ink);
}

.partner-chart-card em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--muted);
}

.partner-chart-badge {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
}

.partner-chart-card.tone-l1 {
  background: #efe6ff;
}
.partner-chart-card.tone-l1 .pict,
.partner-chart-card.tone-wl .pict {
  background: #e4d4ff;
  color: #6d28d9;
}
.partner-chart-card.tone-l1 .partner-chart-badge,
.partner-chart-card.tone-wl .partner-chart-badge {
  background: #7c3aed;
}

.partner-chart-card.tone-l2 {
  background: #e0edff;
}
.partner-chart-card.tone-l2 .pict {
  background: #cfe0ff;
  color: #2563eb;
}
.partner-chart-card.tone-l2 .partner-chart-badge {
  background: #2563eb;
}

.partner-chart-card.tone-cl,
.partner-chart-card.tone-l3 {
  background: #e8f8ee;
}
.partner-chart-card.tone-cl .pict,
.partner-chart-card.tone-l3 .pict {
  background: #d4f3de;
  color: #15803d;
}
.partner-chart-card.tone-cl .partner-chart-badge,
.partner-chart-card.tone-l3 .partner-chart-badge {
  background: #16a34a;
}

.partner-chart-card.tone-wl {
  background: #f3e8ff;
}

.partner-chart-card.tone-empty {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  box-shadow: none;
  color: #64748b;
}

.partner-chart-card.tone-empty .pict {
  background: #e2e8f0;
  color: #64748b;
}

.partner-chart-card.tone-empty .partner-chart-badge {
  background: #94a3b8;
}

.icon-card .pict[data-module='association'] { background: #e8f8ee; color: #15803d; }
.icon-card .pict[data-module='avatar'] { background: #efe6ff; color: #6d28d9; }
.icon-card .pict[data-module='builder'] { background: #e0edff; color: #1d4ed8; }
.icon-card .pict[data-module='catering'] { background: #fff4e5; color: #c2410c; }
.icon-card .pict[data-module='communication'] { background: #e0f2fe; color: #0369a1; }
.icon-card .pict[data-module='crm'] { background: #e8f2ff; color: #1d4ed8; }
.icon-card .pict[data-module='events'] { background: #fce7f3; color: #be185d; }
.icon-card .pict[data-module='freelance'] { background: #fef9c3; color: #a16207; }
.icon-card .pict[data-module='hostel'] { background: #f3e8ff; color: #7e22ce; }
.icon-card .pict[data-module='lms'] { background: #e0e7ff; color: #4338ca; }
.icon-card .pict[data-module='marketing'] { background: #ffe4e6; color: #be123c; }
.icon-card .pict[data-module='planner'] { background: #ecfccb; color: #3f6212; }
.icon-card .pict[data-module='projects'] { background: #dbeafe; color: #1e40af; }
.icon-card .pict[data-module='realestate'] { background: #dcfce7; color: #166534; }
.icon-card .pict[data-module='reference'] { background: #f1f5f9; color: #334155; }
.icon-card .pict[data-module='sites'] { background: #cffafe; color: #0e7490; }
.icon-card .pict[data-module='workflow'] { background: #ffedd5; color: #c2410c; }
.icon-card .pict[data-module='workforce'] { background: #ede9fe; color: #5b21b6; }

.header-back-plain {
  background: transparent;
  box-shadow: none;
  color: #0f172a;
}
.sa-form-head > button[aria-label='Back'],
.sa-form-head > a[aria-label='Back'] {
  display: none;
}
html[data-theme='ocean'] {
  --brand: #0f766e;
  --brand-ink: #134e4a;
}
html[data-theme='forest'] {
  --brand: #15803d;
  --brand-ink: #14532d;
}
html[data-theme='dusk'] {
  --brand: #6d28d9;
  --brand-ink: #4c1d95;
}
html[data-theme='slate'] {
  --brand: #334155;
  --brand-ink: #0f172a;
}

/* Appearance palette */
.appearance-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.appearance-swatch {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.16);
  cursor: pointer;
}
.appearance-swatch[aria-selected='true'] {
  box-shadow: 0 0 0 2px var(--brand, #0055ff);
}
.appearance-colors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.appearance-color {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
}
.appearance-color input[type='color'] {
  width: 100%;
  height: 2.2rem;
  padding: 0.15rem;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 0.7rem;
  background: #fff;
}
.appearance-color input[type='text'],
.appearance-color input:not([type='color']) {
  width: 100%;
  min-height: 2.2rem;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 0.7rem;
  padding: 0.35rem 0.6rem;
}

.sites-insert-overlay[data-palette-dragging='true'] {
  background: transparent;
  pointer-events: none;
}
.sites-insert-overlay[data-palette-dragging='true'] .sites-insert-panel {
  opacity: 0;
  pointer-events: none;
}

.org-sort { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.org-sort button { border: 1px solid #e5e7eb; background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.org-sort button.is-active { border-color: #4f46e5; color: #312e81; }
.org-account-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.org-account-card { display: block; min-width: 0; border: 1px solid #e5e7eb; border-radius: 16px; padding: 14px 16px; background: #fff; text-decoration: none; color: inherit; }
.org-account-card strong { display: block; margin-bottom: 6px; overflow-wrap: anywhere; }
.org-account-card dl { display: grid; gap: 6px; margin: 10px 0 0; }
.org-account-card dl div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
.org-account-card dt { color: #64748b; font-size: 12px; }
.org-account-card dd { margin: 0; overflow-wrap: anywhere; font-size: 14px; }


.appearance-logo-size-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.appearance-logo-size-row input[type="range"] {
  flex: 1;
  min-width: 0;
}

.appearance-logo-size-value {
  min-width: 3.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* === Role / staff permission key groups (Admin → Keys) === */
.perm-groups {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
}

.perm-group {
  border: 1px solid color-mix(in srgb, var(--line, #d7e1ec) 88%, transparent);
  border-radius: 1rem;
  background: var(--card, #fff);
  box-shadow: 0 1px 2px color-mix(in srgb, #0f172a 5%, transparent);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.perm-group[data-open='true'] {
  border-color: color-mix(in srgb, #6366f1 42%, var(--line, #d7e1ec));
  box-shadow: 0 4px 14px color-mix(in srgb, #6366f1 10%, transparent);
}

.perm-group-toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.85rem 0.95rem;
  border: 0;
  background: transparent;
  color: var(--ink, #12202b);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.perm-group-toggle:hover {
  background: color-mix(in srgb, #6366f1 5%, transparent);
}

.perm-group-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, #6366f1 45%, transparent);
  outline-offset: -2px;
}

.perm-group-title {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-ink, #0a1a4a);
}

.perm-group-count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.perm-group-count[data-tone='full'] {
  background: color-mix(in srgb, #6366f1 14%, #ecfdf5);
  color: #047857;
}

.perm-group-count[data-tone='partial'] {
  background: #fff7ed;
  color: #c2410c;
}

.perm-group-count[data-tone='zero'] {
  background: #f1f5f9;
  color: var(--muted, #64748b);
}

.perm-group-chevron {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  color: #64748b;
  background: color-mix(in srgb, #6366f1 8%, #f8fafc);
  transition: transform 0.18s ease, color 0.15s ease, background 0.15s ease;
}

.perm-group[data-open='true'] .perm-group-chevron {
  transform: rotate(180deg);
  color: #4f46e5;
  background: color-mix(in srgb, #6366f1 16%, #fff);
}

.perm-group-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0 0.85rem 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--line, #d7e1ec) 80%, transparent);
  background: color-mix(in srgb, #6366f1 3%, #fafbff);
}

.perm-key-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.perm-key-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
  padding: 0.65rem 0.7rem;
  border-radius: 0.75rem;
  cursor: pointer;
  color: var(--ink, #12202b);
}

.perm-key-row:hover {
  background: color-mix(in srgb, #6366f1 7%, #fff);
}

.perm-key-row-all {
  margin-top: 0.55rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, #6366f1 18%, var(--line, #d7e1ec));
}

.perm-key-row input[type='checkbox'] {
  margin: 0.15rem 0 0;
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  accent-color: #4f46e5;
  cursor: pointer;
}

.perm-key-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.perm-key-label {
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--brand-ink, #0a1a4a);
}

.perm-key-hint,
.perm-key-code {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted, #64748b);
  word-break: break-word;
}

.perm-key-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 500;
}

.sa-form[data-screen='role-edit'] > .sa-form-head .sa-form-pict {
  background: color-mix(in srgb, #6366f1 14%, #eef2ff);
  color: #4f46e5;
  box-shadow: 0 10px 22px color-mix(in srgb, #6366f1 14%, transparent);
}

.sa-form[data-screen='role-edit'] .sa-form-body {
  gap: 1rem;
  padding: 1.2rem 1.2rem 1.35rem;
}

.sa-form[data-screen='role-edit'] .sa-form-kicker[data-tone='orange'] .pict {
  background: color-mix(in srgb, #6366f1 14%, #eef2ff);
  color: #4f46e5;
}

.sa-form[data-screen='role-edit'] .perm-groups-help {
  margin: 0 0 0.15rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted, #64748b);
}


/* Header notifications menu — card rows, no bullets. */
.dropdown-portal.notify-panel {
  width: min(22rem, calc(100vw - 1.25rem));
  min-width: 0;
  padding: 0.7rem 0.65rem 0.65rem;
  border-radius: 1rem;
}

.dropdown-portal.notify-panel ul.notify-list,
.dropdown-portal.notify-panel ul.notify-list li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown-portal.notify-panel ul.notify-list li::marker {
  content: '';
}

.notify-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.notify-panel-title {
  margin: 0 0.15rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
}

.notify-mark {
  border: 0;
  background: transparent;
  color: #2563eb;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.notify-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
  max-height: min(24rem, 70vh);
  overflow-x: hidden;
  overflow-y: auto;
}

.notify-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
  padding: 0.45rem 0.2rem;
  border-radius: 0.7rem;
  color: inherit;
  text-decoration: none;
}

.notify-copy {
  min-width: 0;
}

.notify-item strong,
.notify-item em {
  display: block;
  overflow-wrap: anywhere;
}

.notify-item strong {
  font-size: 0.8rem;
  font-weight: 750;
  color: #0f172a;
}

.notify-item em {
  margin-top: 0.08rem;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 500;
  color: #64748b;
}

.notify-meta {
  display: grid;
  justify-items: end;
  gap: 0.2rem;
  min-width: 0;
}

.notify-meta time {
  font-size: 0.66rem;
  color: #94a3b8;
  text-align: right;
  overflow-wrap: anywhere;
}

.notify-unread {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #2563eb;
}

.notify-item .pict {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.notify-panel .pict.kind-enquiry { background: #fce7f3; color: #db2777; }
.notify-panel .pict.kind-viewing { background: #ede9fe; color: #7c3aed; }
.notify-panel .pict.kind-offer,
.notify-panel .pict.kind-listing { background: #dcfce7; color: #16a34a; }
.notify-panel .pict.kind-deal { background: #ede9fe; color: #6d28d9; }
.notify-panel .pict.kind-lease,
.notify-panel .pict.kind-keys { background: #ffedd5; color: #c2410c; }
.notify-panel .pict.kind-receipt { background: #fef3c7; color: #b45309; }
.notify-panel .pict.kind-maintenance { background: #ffedd5; color: #ea580c; }
.notify-panel .pict.kind-document,
.notify-panel .pict.kind-agreement { background: #dbeafe; color: #2563eb; }
.notify-panel .pict.kind-notice,
.notify-panel .pict.kind-system,
.notify-panel .pict.kind-agent { background: #dbeafe; color: #1d4ed8; }

.notify-all {
  display: block;
  margin: 0.35rem 0.15rem 0.1rem;
  text-align: right;
  color: #2563eb;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}

/* Public property cards: crop the cover and keep the template card shape. */
.sites-store-photo {
  aspect-ratio: 4 / 3;
  max-height: 210px;
  overflow: hidden;
}
.sites-store-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sites-store-card > strong {
  color: #0c2340;
  font-size: 1.05rem;
}
.sites-store-card > span {
  display: block;
  padding: 0 0.85rem;
  color: #64748b;
  font-size: 0.92rem;
}
.sites-store-card > a {
  display: inline-block;
  width: fit-content;
  margin: 0.55rem 0.85rem 0.9rem;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  background: #1d4ed8;
  color: #fff;
}

/* Public preview: keep section headings on their own row and project names in cards. */
.sites-canva[data-preview='true'] .sites-canva-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}
.sites-canva[data-preview='true'] .sites-row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.sites-canva[data-preview='true'] .re-site-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sites-canva[data-preview='true'] .re-site-cards li {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
}
.sites-canva[data-preview='true'] .re-site-cards a,
.sites-canva[data-preview='true'] .re-site-cards span {
  display: block;
}
.sites-canva[data-preview='true'] .re-site-cards a {
  color: #0c2340;
  font-weight: 700;
  text-decoration: none;
}
.sites-canva[data-preview='true'] .re-site-cards span {
  margin-top: 4px;
  color: #64748b;
}
@media (max-width: 700px) {
  .sites-canva[data-preview='true'] .re-site-cards {
    grid-template-columns: 1fr;
  }
}

.sites-html-package {
  height: auto;
  min-height: 100dvh;
  overflow: hidden;
}
.sites-website-shell:has(.sites-html-package) .sites-preview-note { display: none; }

.sites-media-read {
  display: grid;
  gap: 2px;
  margin-top: 6px;
  color: #1e3a5f;
  text-decoration: none;
  min-width: 0;
}
.sites-media-name {
  font-size: 12px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sites-media-kind {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #5b6b7c;
}
/* 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;
}
/* CRM Mode B styles brought from py-crm master (2026-09-08). */
/* Scoped mostly to .mode-b-shell / crm-* ; appended so later rules win. */

.sa-form[data-screen="crm-leads-list"] {
  background: transparent;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-head {
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-head .sa-form-pict {
  display: none;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-head h1 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-body {
  background: #eef5fb;
  border: 1px solid #eef2f7;
  box-shadow: 0 16px 40px rgba(18, 32, 43, 0.06);
  border-radius: 1.5rem;
  padding: 1rem 1rem 1.15rem;
}

.sa-form[data-screen="crm-lead-detail"] {
  background: transparent;
}
.sa-form[data-screen="crm-lead-detail"] > .sa-form-head {
  display: none;
}
.sa-form[data-screen="crm-lead-detail"] > .sa-form-body {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  gap: 0;
}
.crm-leads-title-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.crm-leads-v2 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}
.crm-leads-search {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.75rem 0.95rem;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #64748b;
}
.crm-leads-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 0.95rem;
  color: #0f172a;
}
.crm-leads-search input::placeholder {
  color: #94a3b8;
}
.crm-leads-icon-btn {
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
}
.crm-leads-icon-btn.active,
.crm-leads-icon-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.crm-leads-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  width: 100%;
}
.crm-leads-btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.7rem 0.65rem;
  border-radius: 0.9rem;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.crm-leads-btn.primary {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.crm-leads-btn.primary:hover {
  background: #1d4ed8;
}
.crm-leads-btn.secondary {
  background: #ffffff;
  color: #1e40af;
  border-color: #93c5fd;
}
.crm-leads-btn.secondary:hover {
  background: #f8fafc;
}
.crm-leads-filters {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem 0.9rem;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
}
.crm-leads-filters select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 0.7rem;
  border: 1px solid #e5e7eb;
  background: #fff;
}
.crm-leads-filters-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.crm-leads-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.crm-leads-list > li {
  margin: 0;
  padding: 0;
}
.crm-leads-list .selectable-record-row {
  padding: 0;
  border: 0;
  background: transparent;
}
.crm-lead-card {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.8rem 0.85rem;
  border-radius: 1rem;
  background: #ffffff;
  border: 1px solid #eef2f7;
  box-shadow: none;
  box-sizing: border-box;
}
.crm-lead-card[data-tone="new"] {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.crm-lead-card[data-tone="contacted"] {
  background: #fffdf8;
  border-color: #f3e8d4;
}
.crm-lead-card[data-tone="qualified"] {
  background: #f7fdf9;
  border-color: #d9eee2;
}
.crm-lead-card[data-tone="muted"] {
  background: #fafafa;
  border-color: #ececec;
}
.crm-lead-card-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}
.crm-lead-avatar {
  flex: 0 0 auto;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8eef8;
  color: #1d4ed8;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.crm-lead-card-identity {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.crm-lead-card-name {
  font-size: 0.98rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-lead-card-company {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.78rem;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-lead-card-company.muted {
  color: #94a3b8;
}
.crm-lead-status {
  flex: 0 0 auto;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1;
}
.crm-lead-status[data-tone="new"] {
  background: #eef2ff;
  color: #4338ca;
}
.crm-lead-status[data-tone="contacted"] {
  background: #fff7ed;
  color: #c2410c;
}
.crm-lead-status[data-tone="qualified"] {
  background: #ecfdf5;
  color: #047857;
}
.crm-lead-status[data-tone="muted"] {
  background: #f1f5f9;
  color: #64748b;
}
.crm-lead-card-actions {
  display: inline-flex;
  gap: 0.15rem;
  flex: 0 0 auto;
  opacity: 0.7;
}
.crm-lead-action-btn {
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}
.crm-lead-action-btn:hover {
  background: #eff6ff;
  color: #1d4ed8;
}
.crm-lead-action-btn[data-tone="convert"]:hover {
  background: #ecfdf5;
  color: #047857;
}
.crm-lead-action-btn[data-tone="danger"]:hover {
  background: #fef2f2;
  color: #b91c1c;
}
.crm-leads-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  align-self: center;
  margin: 0.25rem auto 0.75rem;
  padding: 0.55rem 0.85rem;
  border: 0;
  background: transparent;
  color: #2563eb;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}
.crm-leads-load-more:disabled {
  opacity: 0.65;
  cursor: default;
}

/* Soft page wash behind leads list */
.mode-b-shell main:has([data-screen="crm-leads-list"]),
.mode-b-shell main:has([data-screen="crm-lead-detail"]),
.mode-b-shell main:has([data-screen="crm-contacts-list"]) {
  background: #eef5fb;
}
.mode-b-shell main:has([data-screen="crm-leads-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-leads-list"]) .sa-form-list,
.mode-b-shell main:has([data-screen="crm-lead-detail"]) .page-container,
.mode-b-shell main:has([data-screen="crm-lead-detail"]) .sa-form-list,
.mode-b-shell main:has([data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-contacts-list"]) .sa-form-list {
  background: #eef5fb;
}

/* Lead detail shared bits */
.crm-lead-detail-back {
  font-weight: 700;
}
.crm-lead-profile-sub {
  margin: 0.15rem 0 0;
  color: #64748b;
  font-size: 0.9rem;
}
.crm-lead-section-title {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  font-weight: 750;
  color: #0f172a;
}

/* === Mode B core-width chrome + 5-item bottom dock (server patch) === */
.mode-b-shell {
  --mode-b-chrome-z: 70;
  --mode-b-core-width: 900px;
  --mode-b-core-pad: 1rem;
  --layout-max: var(--mode-b-core-width) !important;
  --shell-content-max: var(--mode-b-core-width) !important;
  --shell-content-pad: var(--mode-b-core-pad);
  --nav-dash: #2563eb;
  --nav-leads: #0d9488;
  --nav-contacts: #7c3aed;
  --nav-customers: #ea580c;
  --nav-more: #4f46e5;
  width: 100%;
  max-width: var(--mode-b-core-width);
  margin-inline: auto;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}

.mode-b-shell > .workspace-header.mode-b-header,
.mode-b-shell > header.mode-b-header,
.mode-b-shell .workspace-header.mode-b-header {
  position: sticky;
  top: 0;
  z-index: var(--mode-b-chrome-z);
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding: 0.55rem var(--mode-b-core-pad) 0.45rem !important;
  background: color-mix(in srgb, #eef3f8 92%, #fff);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, #0f172a 8%, transparent);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.mode-b-shell .workspace-header.mode-b-header .workspace-brand {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  text-align: center;
}
.mode-b-shell .workspace-header.mode-b-header .mode-b-title {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.mode-b-shell .workspace-header.mode-b-header .mode-b-host { display: none; }

.mode-b-shell:not([data-mode-b="crm"]) > .mode-b-nav,
.mode-b-shell:not([data-mode-b="crm"]) .mode-b-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(0.35rem, env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  z-index: var(--mode-b-chrome-z);
  display: flex !important;
  justify-content: space-around;
  align-items: stretch;
  gap: 0.1rem;
  width: min(100vw, var(--mode-b-core-width)) !important;
  max-width: var(--mode-b-core-width) !important;
  margin: 0 !important;
  padding: 0.3rem 0.35rem !important;
  box-sizing: border-box !important;
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 1.25rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  overflow: visible;
}
.mode-b-shell .mode-b-nav .mode-b-nav-item {
  flex: 1 1 0;
  min-width: 0;
  min-height: 3.35rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.3rem 0.2rem 0.25rem;
  border-radius: 0.95rem;
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 1.1;
  text-decoration: none;
  color: #64748b;
  white-space: nowrap;
}
.mode-b-shell .mode-b-nav .mode-b-nav-item:before {
  content: "";
  width: 1.35rem;
  height: 1.35rem;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href="/app/crm"],
.mode-b-shell .mode-b-nav .mode-b-nav-item[href="/app/crm/"] { color: var(--nav-dash); }
.mode-b-shell .mode-b-nav .mode-b-nav-item[href="/app/crm"]:before,
.mode-b-shell .mode-b-nav .mode-b-nav-item[href="/app/crm/"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563eb'><rect x='3' y='3' width='8' height='8' rx='1.5'/><rect x='13' y='3' width='8' height='8' rx='1.5'/><rect x='3' y='13' width='8' height='8' rx='1.5'/><rect x='13' y='13' width='8' height='8' rx='1.5'/></svg>");
  background-color: color-mix(in srgb, var(--nav-dash) 14%, #fff);
  box-sizing: content-box;
  padding: 0.35rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/leads"] { color: var(--nav-leads); }
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/leads"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16l-6 7v6l-4 2v-8L4 4z'/></svg>");
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/contacts"] { color: var(--nav-contacts); }
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/contacts"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='3' width='14' height='18' rx='2'/><circle cx='12' cy='9' r='2.5'/><path d='M8.5 16.5c1.2-1.5 2.3-2 3.5-2s2.3.5 3.5 2'/></svg>");
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/customers"] { color: var(--nav-customers); }
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/customers"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-6-4.3-6-9a6 6 0 1 1 12 0c0 4.7-6 9-6 9z'/><circle cx='12' cy='12' r='2.2'/></svg>");
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/book"] { color: var(--nav-more); }
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/book"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234f46e5'><circle cx='6' cy='12' r='1.8'/><circle cx='12' cy='12' r='1.8'/><circle cx='18' cy='12' r='1.8'/></svg>");
}
.mode-b-shell .mode-b-nav .mode-b-nav-item.active {
  background: color-mix(in srgb, currentColor 12%, #fff);
  font-weight: 750;
}

.mode-b-shell > main,
.mode-b-shell main,
.mode-b-shell #main {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: var(--mode-b-core-pad) !important;
  padding-bottom: calc(5.9rem + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  align-self: stretch;
  overflow-x: hidden;
}
.mode-b-shell > .mode-b-footer,
.mode-b-shell .mode-b-footer {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: var(--mode-b-core-pad) !important;
  padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
}

/* Stretch ONLY page shells â€” never every crm-dash-* child (that broke tasks/hero) */
.mode-b-shell .page-container,
.mode-b-shell #main > *,
.mode-b-shell main > *,
.mode-b-shell .crm-dashboard,
.mode-b-shell .crm-dashboard-v2 {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

/* ===== Clearer dashboard hierarchy ===== */
.mode-b-shell .crm-dashboard,
.mode-b-shell .crm-dashboard-v2 {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding-top: 0.35rem;
}

.mode-b-shell .crm-dash-hero {
  gap: 0.55rem;
}
.mode-b-shell .crm-dash-greeting {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 750;
  color: #0f172a;
}
.mode-b-shell .crm-dash-kicker {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
  letter-spacing: 0.01em;
  text-transform: none;
}

.mode-b-shell .crm-dash-hero-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 0.85rem;
  width: 100%;
  max-width: none;
  min-height: 5.5rem;
  padding: 1.05rem 1.1rem !important;
  border-radius: 1.1rem;
  background: #fff;
  border: 1px solid #e8eef5;
  border-top: 3px solid #2563eb;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  box-sizing: border-box;
}
.mode-b-shell .crm-dash-hero-card-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 650;
}
.mode-b-shell .crm-dash-hero-card-value {
  margin-top: 0.2rem;
  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
  color: #0f172a;
}
.mode-b-shell .crm-dash-trend {
  display: inline-flex;
  margin-top: 0.45rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, #16a34a 12%, #fff);
  color: #15803d;
  font-size: 0.75rem;
  font-weight: 700;
}
.mode-b-shell .crm-dash-hero-card-icon {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.9rem;
}

.mode-b-shell .crm-dash-grid,
.mode-b-shell .crm-dash-grid-kpi {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  width: 100%;
}
.mode-b-shell .crm-dash-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0.9rem 0.95rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #e8eef5;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.mode-b-shell .crm-dash-kpi-icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.55rem;
  background: color-mix(in srgb, #2563eb 12%, #fff);
  color: #2563eb;
}
.mode-b-shell .crm-dash-kpi-label {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 600;
}
.mode-b-shell .crm-dash-kpi-value {
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 800;
  color: #0f172a;
}

.mode-b-shell .crm-dash-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.15rem 0 0.7rem;
}
.mode-b-shell .crm-dash-section-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  color: #0f172a;
}
.mode-b-shell .crm-dash-view-all {
  font-size: 0.82rem;
  font-weight: 700;
  color: #2563eb;
  white-space: nowrap;
}

.mode-b-shell .crm-dash-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
}
.mode-b-shell .crm-dash-task {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 0.8rem !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0.9rem 0.95rem !important;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #e8eef5;
  box-sizing: border-box !important;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.mode-b-shell .crm-dash-task-icon {
  flex: 0 0 auto !important;
  width: 2.15rem !important;
  height: 2.15rem !important;
  min-width: 2.15rem;
  border-radius: 999px;
}
.mode-b-shell .crm-dash-task-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow: hidden;
}
.mode-b-shell .crm-dash-task-copy strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-b-shell .crm-dash-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.65rem;
  align-items: center;
  font-size: 0.75rem;
  color: #64748b;
}

/* ==== CRM Dashboard redesign :: modeb-dash-redesign (2026-09-02) ==== */
/* Modern refresh: gradient hero, elevated KPI cards with per-metric accents,
   softer task/activity cards with hover lift. Pure CSS, overrides earlier
   .mode-b-shell .crm-dash-* rules by source order. Remove this block to revert. */

/* Hero "Total leads" card -> gradient banner */
.mode-b-shell .crm-dash-hero-card {
  background: linear-gradient(135deg, #4f46e5 0%, #2563eb 55%, #3b82f6 100%) !important;
  border: none !important;
  border-radius: 1.25rem !important;
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.28) !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.mode-b-shell a.crm-dash-hero-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.34) !important;
}
.mode-b-shell .crm-dash-hero-card::after {
  content: "";
  position: absolute;
  right: -32px;
  top: -46px;
  width: 158px;
  height: 158px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
.mode-b-shell .crm-dash-hero-card-copy {
  position: relative;
  z-index: 1;
}
.mode-b-shell .crm-dash-hero-card-label {
  color: rgba(255, 255, 255, 0.85) !important;
}
.mode-b-shell .crm-dash-hero-card-value {
  color: #fff !important;
  font-size: 2.2rem !important;
}
.mode-b-shell .crm-dash-trend {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}
.mode-b-shell .crm-dash-hero-card-icon {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  width: 3rem !important;
  height: 3rem !important;
  position: relative;
  z-index: 1;
}

/* KPI cards -> elevated, interactive, per-metric accent colours */
.mode-b-shell .crm-dash-kpi {
  border: 1px solid #eef2f8 !important;
  border-radius: 1.15rem !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.mode-b-shell a.crm-dash-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1) !important;
  border-color: #dbe3f0 !important;
}
.mode-b-shell .crm-dash-kpi-icon {
  width: 2.1rem !important;
  height: 2.1rem !important;
  border-radius: 0.7rem !important;
}
.mode-b-shell .crm-dash-kpi-value {
  font-size: 1.7rem !important;
}
.mode-b-shell .crm-dash-grid-kpi .crm-dash-kpi:nth-child(1) .crm-dash-kpi-icon {
  background: color-mix(in srgb, #2563eb 14%, #fff) !important;
  color: #2563eb !important;
}
.mode-b-shell .crm-dash-grid-kpi .crm-dash-kpi:nth-child(2) .crm-dash-kpi-icon {
  background: color-mix(in srgb, #7c3aed 14%, #fff) !important;
  color: #7c3aed !important;
}
.mode-b-shell .crm-dash-grid-kpi .crm-dash-kpi:nth-child(3) .crm-dash-kpi-icon {
  background: color-mix(in srgb, #0d9488 14%, #fff) !important;
  color: #0d9488 !important;
}
.mode-b-shell .crm-dash-grid-kpi .crm-dash-kpi:nth-child(4) .crm-dash-kpi-icon {
  background: color-mix(in srgb, #f59e0b 16%, #fff) !important;
  color: #d97706 !important;
}

/* Sections + task/activity cards */
.mode-b-shell .crm-dash-section-head h3 {
  font-size: 1.05rem !important;
  letter-spacing: -0.01em;
}
.mode-b-shell .crm-dash-task {
  border: 1px solid #eef2f8 !important;
  border-radius: 1.15rem !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mode-b-shell a.crm-dash-task:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
}
.mode-b-shell .crm-dash-priority {
  background: color-mix(in srgb, #f97316 18%, #fff) !important;
  color: #c2410c !important;
}
.mode-b-shell .crm-dash-activity {
  border-left-color: #dbe6f5 !important;
}
.mode-b-shell .crm-dash-activity li.active:before {
  background: #2563eb !important;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(37, 99, 235, 0.18) !important;
}
/* ==== end modeb-dash-redesign ==== */

/* ==== CRM Mode B header redesign :: modeb-header-redesign (2026-09-02) ==== */
/* Modern core header: clean white bar, soft shadow, blue gradient accent line,
   emphasised brand, soft pill for the workspace context, ringed avatar.
   Scoped to .mode-b-shell .mode-b-header; overrides earlier rules by order.
   Remove this block to revert. */

.mode-b-shell .workspace-header.mode-b-header {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
  padding-top: 0.7rem !important;
  padding-bottom: 0.62rem !important;
  position: sticky;
  overflow: visible;
}
.mode-b-shell .workspace-header.mode-b-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #4f46e5, #2563eb 55%, #3b82f6);
  pointer-events: none;
}
.mode-b-shell .workspace-header.mode-b-header .mode-b-title strong {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a;
}

/* Workspace context ("Lab Co") -> soft accent pill */
.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 {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, #2563eb 8%, #fff);
  border: 1px solid color-mix(in srgb, #2563eb 18%, transparent);
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
.mode-b-shell .workspace-header.mode-b-header .context-slot .context-slot-trigger:hover {
  background: color-mix(in srgb, #2563eb 14%, #fff);
}

/* Avatar -> subtle brand ring */
.mode-b-shell .workspace-header.mode-b-header .user-menu .avatar-btn {
  border-radius: 999px;
  padding: 0;
  background: transparent;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(37, 99, 235, 0.32);
  transition: box-shadow 0.15s ease;
}
.mode-b-shell .workspace-header.mode-b-header .user-menu .avatar-btn:hover {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(37, 99, 235, 0.55);
}
/* ==== end modeb-header-redesign ==== */

/* ==== CRM Mode B header/body gap fix :: modeb-gap-fix (2026-09-02) ==== */
/* Pull the page body up directly beneath the sticky core header â€” removes the
   large empty band between the header bottom edge and the CRM Dashboard title. */
.mode-b-shell > main,
.mode-b-shell main,
.mode-b-shell #main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.mode-b-shell .page-container {
  padding-top: 0.4rem !important;
  margin-top: 0 !important;
}
.mode-b-shell main > .sa-form,
.mode-b-shell main .sa-form,
.mode-b-shell main .classic-form {
  margin-top: 0 !important;
}
.mode-b-shell .sa-form-head {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.mode-b-shell .crm-dashboard,
.mode-b-shell .crm-dashboard-v2 {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.mode-b-shell .crm-dash-hero {
  margin-top: 0 !important;
}
/* ==== end modeb-gap-fix ==== */

/* ==== CRM Mode B bottom gap fix :: modeb-bottom-gap-fix (2026-09-02) ==== */
/* The old layout stacked bottom padding on main (5.9rem) + footer (5rem) +
   shell (4.5rem), far more than the fixed bottom nav needs. Collapse to a
   single clearance provided by the footer (the last in-flow element). */
.mode-b-shell {
  padding-bottom: 0 !important;
}
.mode-b-shell > main,
.mode-b-shell main,
.mode-b-shell #main {
  padding-bottom: 0.5rem !important;
}
.mode-b-shell > .mode-b-footer,
.mode-b-shell .mode-b-footer {
  padding-top: 0.4rem !important;
  padding-bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px)) !important;
  margin-top: 0.25rem !important;
}
/* ==== end modeb-bottom-gap-fix ==== */

/* ==== CRM Mode B body width + leads tweaks :: modeb-body-leads-fix (2026-09-02) ==== */

/* 1) Body width == header width â€” drop the page-container side padding so the
   body content aligns to the same core inset as the header (1rem core-pad). */
.mode-b-shell .page-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Leads list â€” remove the repeated status value (Contacted / Qualified â€¦). */
.mode-b-shell .crm-leads-list .crm-lead-status {
  display: none !important;
}

/* 3) Leads list â€” unique action icon colors (were uniform grey). */
.mode-b-shell .crm-leads-list .crm-lead-card-actions {
  opacity: 1 !important;
}
.mode-b-shell .crm-leads-list .crm-lead-action-btn {
  color: #2563eb !important;
}
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="convert"] {
  color: #0d9488 !important;
}
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="danger"] {
  color: #dc2626 !important;
}
/* ==== end modeb-body-leads-fix ==== */

/* ==== CRM Leads action buttons -> icon-only, unique icons/colors :: modeb-leads-actions-icons (2026-09-02) ==== */
.mode-b-shell .crm-leads-actions.crm-leads-actions-icons {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.55rem;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only {
  flex: 0 0 auto;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0 !important;
  gap: 0;
  border-radius: 0.9rem;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only svg {
  display: block;
}

/* Add -> blue (filled, primary) */
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="add"] {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="add"]:hover {
  background: #1d4ed8 !important;
}

/* Import -> teal outline */
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="import"] {
  background: color-mix(in srgb, #0d9488 8%, #fff) !important;
  border-color: color-mix(in srgb, #0d9488 45%, #fff) !important;
  color: #0d9488 !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="import"]:hover {
  background: color-mix(in srgb, #0d9488 16%, #fff) !important;
}

/* Export -> orange outline */
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="export"] {
  background: color-mix(in srgb, #ea580c 8%, #fff) !important;
  border-color: color-mix(in srgb, #ea580c 45%, #fff) !important;
  color: #ea580c !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="export"]:hover {
  background: color-mix(in srgb, #ea580c 16%, #fff) !important;
}
/* ==== end modeb-leads-actions-icons ==== */

/* ==== CRM Leads toolbar: collapsible search + right-aligned action icons :: modeb-leads-toolbar (2026-09-02) ==== */
.mode-b-shell .crm-leads-toolbar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
}
.mode-b-shell .crm-leads-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  min-width: 0;
}
.mode-b-shell .crm-leads-search-wrap.open {
  flex: 1 1 auto;
}
.mode-b-shell .crm-leads-search-toggle {
  width: 2.9rem;
  height: 2.9rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.9rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #2563eb;
  cursor: pointer;
}
.mode-b-shell .crm-leads-search-toggle.active,
.mode-b-shell .crm-leads-search-toggle:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.mode-b-shell .crm-leads-search-wrap .crm-leads-search {
  flex: 1 1 auto;
  min-width: 0;
}
.mode-b-shell .crm-leads-actions.crm-leads-actions-icons {
  margin-left: auto;
  width: auto;
  flex: 0 0 auto;
}
/* ==== end modeb-leads-toolbar ==== */

/* ==== CRM Leads page: core width + no gray background :: modeb-leads-corewidth (2026-09-02) ==== */
/* Keep the standard centered core width; only remove the gray list backdrop. */
.mode-b-shell main:has([data-screen="crm-leads-list"]) {
  background: #eef5fb !important;
}
.mode-b-shell main:has([data-screen="crm-leads-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-leads-list"]) .sa-form-list {
  background: #eef5fb !important;
}
/* ==== end modeb-leads-corewidth ==== */

/* ==== CRM Leads row: email + phone lines, clean & truncated :: modeb-leads-contact (2026-09-02) ==== */
.mode-b-shell .crm-lead-card-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  color: #64748b;
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-b-shell .crm-lead-card-contact svg {
  flex: 0 0 auto;
  color: #94a3b8;
}
.mode-b-shell .crm-lead-card-company svg {
  flex: 0 0 auto;
}
/* keep rows from overflowing horizontally */
.mode-b-shell .crm-leads-list,
.mode-b-shell .crm-lead-card,
.mode-b-shell .crm-lead-card-main {
  max-width: 100%;
  overflow-x: hidden;
}
.mode-b-shell .crm-lead-card-identity {
  min-width: 0;
}
/* ==== end modeb-leads-contact ==== */

/* ==== CRM Leads rows: uniform clean white background :: modeb-leads-cardbg (2026-09-02) ==== */
.mode-b-shell .crm-leads-list .crm-lead-card,
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="new"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="contacted"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="qualified"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="muted"] {
  background: #ffffff !important;
  border: 1px solid #e8eef5 !important;
}
/* ==== end modeb-leads-cardbg ==== */

/* ==== CRM Leads pagination controls :: modeb-leads-pagination (2026-09-02) ==== */
.mode-b-shell .crm-leads-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.35rem;
}
.mode-b-shell .crm-leads-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.95rem;
  border-radius: 0.8rem;
  border: 1px solid #dbe3f0;
  background: #fff;
  color: #1d4ed8;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.mode-b-shell .crm-leads-page-btn:hover:not(:disabled) {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.mode-b-shell .crm-leads-page-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.mode-b-shell .crm-leads-page-info {
  font-size: 0.82rem;
  font-weight: 650;
  color: #64748b;
}
/* ==== end modeb-leads-pagination ==== */

/* ==== CRM bottom nav: clear per-item colors + unique customer icon :: modeb-nav-colors (2026-09-02) ==== */
/* Give every nav item a colored circular icon chip so each color reads clearly. */
.mode-b-shell .mode-b-nav .mode-b-nav-item:before {
  box-sizing: content-box;
  padding: 0.35rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href="/app/crm"]:before,
.mode-b-shell .mode-b-nav .mode-b-nav-item[href="/app/crm/"]:before {
  background-color: color-mix(in srgb, var(--nav-dash) 15%, #fff);
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/leads"]:before {
  background-color: color-mix(in srgb, var(--nav-leads) 15%, #fff);
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/contacts"]:before {
  background-color: color-mix(in srgb, var(--nav-contacts) 15%, #fff);
}
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/book"]:before {
  background-color: color-mix(in srgb, var(--nav-more) 15%, #fff);
}
/* Customers -> unique "customer" icon (person + check), orange chip. */
.mode-b-shell .mode-b-nav .mode-b-nav-item[href*="/crm/customers"]:before {
  background-color: color-mix(in srgb, var(--nav-customers) 15%, #fff);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.2'/><path d='M3.5 20c0-3.3 2.6-5.5 5.5-5.5s5.5 2.2 5.5 5.5'/><path d='m15.5 12.5 2 2 3.5-3.5'/></svg>");
}
/* Make labels carry their item color at full strength. */
.mode-b-shell .mode-b-nav .mode-b-nav-item {
  font-weight: 700;
}
/* ==== end modeb-nav-colors ==== */

/* ==== CRM Leads row: name left / email+phone right, stack on narrow :: modeb-leads-contactcol (2026-09-02) ==== */
.mode-b-shell .crm-lead-card-main {
  flex-wrap: wrap;
}
.mode-b-shell .crm-lead-card-identity {
  flex: 1 1 auto;
  min-width: 8rem;
}
.mode-b-shell .crm-lead-card-contactcol {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 0.15rem;
  min-width: 0;
  max-width: 60%;
}
.mode-b-shell .crm-lead-card-contactcol .crm-lead-card-contact {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* When the row is narrow, drop the contact block below the name (full width, left-aligned). */
@media (max-width: 33rem) {
  .mode-b-shell .crm-lead-card-contactcol {
    margin-left: 3.15rem;
    align-items: flex-start;
    text-align: left;
    max-width: calc(100% - 3.15rem);
    flex-basis: 100%;
  }
}
/* ==== end modeb-leads-contactcol ==== */

/* ==== CRM Leads normal filters grid :: modeb-leads-filters (2026-09-02) ==== */
.mode-b-shell .crm-leads-filters-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0.9rem;
  border: 1px solid #e8eef5;
  border-radius: 1rem;
  background: #fff;
}
.mode-b-shell .crm-leads-filters-grid select,
.mode-b-shell .crm-leads-filters-grid input[type="date"] {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid #dbe3f0;
  border-radius: 0.7rem;
  background: #fff;
  color: #0f172a;
  font-size: 0.85rem;
}
.mode-b-shell .crm-leads-filters-grid .crm-leads-filters-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
/* ==== end modeb-leads-filters ==== */

/* ==== CRM Leads table layout: Name | Phone | Email columns :: modeb-leads-table (2026-09-02) ==== */
.mode-b-shell .crm-leads-list-head {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr) minmax(0, 1.7fr) 6.5rem;
  column-gap: 0.6rem;
  align-items: center;
  padding: 0.15rem 0.9rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr) minmax(0, 1.7fr) 6.5rem;
  column-gap: 0.6rem;
  align-items: center;
}
.mode-b-shell .crm-leads-list .crm-lead-row .crm-lead-card-main {
  display: contents !important;
}
.mode-b-shell .crm-lead-namecell {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.mode-b-shell .crm-lead-row .crm-lead-card-identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mode-b-shell .crm-lead-col {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  font-size: 0.8rem;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-b-shell .crm-lead-col svg {
  flex: 0 0 auto;
  color: #94a3b8;
}
.mode-b-shell .crm-lead-col-email {
  color: #2563eb;
}
.mode-b-shell .crm-lead-col-empty {
  color: #cbd5e1;
}
.mode-b-shell .crm-lead-row .crm-lead-card-actions {
  opacity: 1;
  justify-content: flex-end;
}
/* ==== end modeb-leads-table ==== */

/* ==== CRM Leads mobile stacked rows :: modeb-leads-mobile (2026-09-02) ==== */
@media (max-width: 34rem) {
  .mode-b-shell .crm-leads-list-head {
    display: none;
  }
  .mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row {
    grid-template-columns: 1fr auto;
    row-gap: 0.3rem;
    align-items: start;
  }
  .mode-b-shell .crm-lead-namecell {
    grid-column: 1;
    grid-row: 1;
  }
  .mode-b-shell .crm-lead-row .crm-lead-card-actions {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  .mode-b-shell .crm-lead-col-phone {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .mode-b-shell .crm-lead-col-email {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  /* indent the stacked contact lines to sit under the name (past the avatar) */
  .mode-b-shell .crm-lead-row .crm-lead-col {
    padding-left: 3.05rem;
    font-size: 0.82rem;
  }
}
/* ==== end modeb-leads-mobile ==== */


/* ==== CRM Leads pagination count :: modeb-leads-count (2026-09-02) ==== */
.mode-b-shell .crm-leads-page-info {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}
.mode-b-shell .crm-leads-page-info .crm-leads-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
}
/* ==== end modeb-leads-count ==== */

/* ==== Add Lead form: per-field mic icon (global, portal-safe) :: modeb-lead-field-mic-v2 (2026-09-02) ==== */
.lead-form .field-with-mic {
  position: relative;
  display: block;
}
.lead-form .field-with-mic .field {
  width: 100%;
}
.lead-form .field-with-mic .voice-session {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  flex-wrap: nowrap;
  gap: 0.2rem;
  margin: 0;
}
.lead-form .field-with-mic .voice-session .voice-btn {
  min-height: 0;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  gap: 0;
  font-size: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #2563eb 10%, #fff);
  color: #2563eb;
  border: 1px solid color-mix(in srgb, #2563eb 28%, #fff);
}
.lead-form .field-with-mic .voice-session .voice-btn:hover {
  background: color-mix(in srgb, #2563eb 18%, #fff);
}
.lead-form .field-with-mic .voice-session .voice-btn svg {
  font-size: initial;
}
.lead-form .field-with-mic .voice-session .voice-btn-stop {
  color: #b91c1c;
  border-color: color-mix(in srgb, #b91c1c 35%, #fff);
  background: color-mix(in srgb, #b91c1c 8%, #fff);
}
.lead-form .field-with-mic .voice-session-status {
  display: none;
}

/* No visible scrollbar in the Add Lead popup */
.sheet:has(.lead-form) .sheet-body {
  scrollbar-width: none;
}
.sheet:has(.lead-form) .sheet-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
/* ==== end modeb-lead-field-mic-v2 ==== */

/* ==== CRM Leads phone call + WhatsApp icons :: modeb-leads-phone-acts (2026-09-02) ==== */
.mode-b-shell .crm-lead-col-phone {
  overflow: visible;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-num {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.mode-b-shell .crm-lead-phone-acts {
  display: inline-flex;
  gap: 0.25rem;
  flex: 0 0 auto;
  margin-left: 0.35rem;
}
.mode-b-shell .crm-lead-phone-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}
.mode-b-shell .crm-lead-phone-act.call {
  color: #2563eb;
  background: color-mix(in srgb, #2563eb 10%, #fff);
}
.mode-b-shell .crm-lead-phone-act.wa {
  color: #16a34a;
  background: color-mix(in srgb, #16a34a 12%, #fff);
}
.mode-b-shell .crm-lead-phone-act:hover {
  filter: brightness(0.96);
}
/* ==== end modeb-leads-phone-acts ==== */

/* ==== Add Lead form: unify Phone field + align mic to label :: modeb-lead-phone-style (2026-09-02) ==== */
/* Mic sits on the label line (top-right), slightly smaller. */
.lead-form .field-with-mic .voice-session {
  top: 0;
  right: 0;
}
.lead-form .field-with-mic .voice-session .voice-btn {
  width: 1.55rem;
  height: 1.55rem;
}

/* Phone field styled like the other inputs */
.lead-form .lead-phone-field .field-label-row {
  margin-bottom: 0.3rem;
}
.lead-form .lead-phone-field .lead-phone-label {
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 600;
}
.lead-form .lead-phone-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.lead-form .lead-phone-row > select {
  flex: 0 0 auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.9rem;
  padding: 0.75rem 0.55rem;
  background: #fff;
  color: #0f172a;
  font: inherit;
}
.lead-form .lead-phone-input-wrap {
  position: relative;
  flex: 1 1 auto;
  display: block;
  min-width: 0;
}
.lead-form .lead-phone-input-wrap .field-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: #16a34a;
  pointer-events: none;
  display: inline-grid;
  place-items: center;
}
.lead-form .lead-phone-input-wrap input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 0.9rem;
  padding: 0.75rem 0.85rem 0.75rem 2.55rem;
  background: #fff;
  color: #0f172a;
  font: inherit;
}
/* ==== end modeb-lead-phone-style ==== */


/* ==== CRM Leads: wider phone col + plain call/WhatsApp icons :: modeb-leads-phone-v2 (2026-09-02) ==== */
.mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row,
.mode-b-shell .crm-leads-list-head {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.8fr) minmax(0, 1.4fr) 5.5rem !important;
}
/* show the full phone number */
.mode-b-shell .crm-lead-col-phone {
  overflow: visible;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-num {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
/* plain icons: no background chip, colour only */
.mode-b-shell .crm-lead-phone-act,
.mode-b-shell .crm-lead-phone-act.call,
.mode-b-shell .crm-lead-phone-act.wa {
  background: transparent !important;
  width: 1.4rem;
  height: 1.4rem;
}
.mode-b-shell .crm-lead-phone-act.call {
  color: #2563eb;
}
.mode-b-shell .crm-lead-phone-act.wa {
  color: #25d366;
}
.mode-b-shell .crm-lead-phone-act:hover {
  filter: none;
  opacity: 0.75;
}
/* ==== end modeb-leads-phone-v2 ==== */

/* ==== Add Lead form: compact right-aligned action buttons :: modeb-lead-actions (2026-09-02) ==== */
.lead-form .lead-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.35rem;
}
.lead-form .lead-form-actions .primary-btn {
  width: auto;
  flex: 0 0 auto;
  min-width: 6.5rem;
  padding: 0.6rem 1.5rem;
}
/* ==== Add Lead form: compact gaps + mic beside label :: modeb-lead-form-compact (2026-09-03) ==== */
.lead-form.classic-form,
.lead-form.stack {
  gap: 0.5rem;
}
.lead-form .lead-form-grid {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.lead-form .field {
  gap: 0.18rem;
}
.lead-form .field-label-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  max-width: 100%;
}
.lead-form .field-with-mic .voice-session {
  position: static;
  top: auto;
  right: auto;
  margin: 0;
}
.lead-form .field-with-mic .voice-session .voice-btn {
  width: 1.45rem;
  height: 1.45rem;
}
.lead-form .lead-phone-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.lead-form .lead-phone-field .field-label-row {
  margin-bottom: 0;
}
.lead-form .lead-form-steps {
  margin-bottom: 0.1rem;
}
/* ==== end modeb-lead-form-compact ==== */

/* ==== CRM Leads rows: white + light-blue hover :: modeb-leads-hover (2026-09-02) ==== */
.mode-b-shell .crm-leads-list .crm-lead-card {
  background: #ffffff !important;
  transition: background 0.12s ease;
}
.mode-b-shell .crm-leads-list > li:hover .crm-lead-card,
.mode-b-shell .crm-leads-list .crm-lead-card:hover {
  background: #eff6ff !important;
}
/* ==== end modeb-leads-hover ==== */

/* ==== CRM Leads phone icons unique colors (override grey col svg) :: modeb-leads-phone-color (2026-09-02) ==== */
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.call,
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.call svg {
  color: #2563eb !important;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.wa,
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.wa svg {
  color: #25d366 !important;
}
/* ==== end modeb-leads-phone-color ==== */

/* ==== CRM Leads mobile layout fix (override phone-v2 grid) :: modeb-leads-mobile-v2 (2026-09-02) ==== */
@media (max-width: 34rem) {
  .mode-b-shell .crm-leads-list-head {
    display: none !important;
  }
  .mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row {
    grid-template-columns: 1fr auto !important;
    row-gap: 0.3rem;
    align-items: start;
  }
  .mode-b-shell .crm-lead-namecell {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0;
  }
  .mode-b-shell .crm-lead-row .crm-lead-card-name {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .mode-b-shell .crm-lead-row .crm-lead-card-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center;
  }
  .mode-b-shell .crm-lead-col-phone {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    padding-left: 3.15rem;
  }
  .mode-b-shell .crm-lead-col-email {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    padding-left: 3.15rem;
  }
}
/* ==== end modeb-leads-mobile-v2 ==== */

/* ==== CRM Leads desktop columns: full name + tighter phone :: modeb-leads-cols-v3 (2026-09-02) ==== */
@media (min-width: 34.01rem) {
  .mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row,
  .mode-b-shell .crm-leads-list-head {
    grid-template-columns: minmax(0, 1.95fr) minmax(0, 1.2fr) minmax(0, 1.35fr) 5.5rem !important;
  }
  .mode-b-shell .crm-lead-row .crm-lead-card-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}
/* ==== end modeb-leads-cols-v3 ==== */

/* ==== CRM Leads phone: no overlap between number and icons :: modeb-leads-phone-v3 (2026-09-02) ==== */
.mode-b-shell .crm-lead-col-phone {
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-num {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-acts {
  flex: 0 0 auto;
  margin-left: 0.1rem;
}
@media (min-width: 34.01rem) {
  .mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row,
  .mode-b-shell .crm-leads-list-head {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.6fr) minmax(0, 1.25fr) 5.5rem !important;
  }
}
/* ==== end modeb-leads-phone-v3 ==== */

/* ==== Toast messages -> top-right :: modeb-toast-topright (2026-09-02) ==== */
.toast-stack {
  left: auto !important;
  right: 0.9rem !important;
  bottom: auto !important;
  top: calc(0.9rem + env(safe-area-inset-top, 0px)) !important;
  transform: none !important;
  align-items: flex-end !important;
  z-index: 90 !important;
}
/* ==== end modeb-toast-topright ==== */

/* ==== CRM Lead detail: compact layout :: modeb-lead-detail (2026-09-03) ==== */
.mode-b-shell .crm-lead-detail {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-family: inherit;
}
.mode-b-shell .crm-lead-detail-bar {
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  align-items: center;
  min-height: 1.85rem;
  gap: 0.35rem;
}
.mode-b-shell .crm-lead-detail-bar-title {
  margin: 0;
  text-align: center;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.mode-b-shell .crm-lead-detail-back {
  width: 1.85rem !important;
  height: 1.85rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #2563eb;
}
.mode-b-shell .crm-lead-detail-menu-wrap {
  position: relative;
  justify-self: end;
}
.mode-b-shell .crm-lead-detail-icon-btn {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.45rem;
  border: 0;
  background: transparent;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mode-b-shell .crm-lead-detail-menu {
  position: absolute;
  right: 0;
  top: 2.1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.6rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  z-index: 5;
  overflow: hidden;
}
.mode-b-shell .crm-lead-detail-menu button {
  text-align: left;
  padding: 0.5rem 0.75rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 0.86rem;
  color: #0f172a;
}
.mode-b-shell .crm-lead-detail-menu button:hover {
  background: #f8fafc;
}

.mode-b-shell .crm-lead-profile-card {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0 0.45rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.mode-b-shell .crm-lead-profile-avatar {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 750;
}
.mode-b-shell .crm-lead-profile-meta {
  min-width: 0;
}
.mode-b-shell .crm-lead-profile-name {
  margin: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.2;
}
.mode-b-shell .crm-lead-profile-sub {
  margin: 0.12rem 0 0;
  color: #64748b;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.mode-b-shell .crm-lead-profile-card .crm-lead-status {
  display: inline-block !important;
  margin: 0;
  background: #ecfdf5 !important;
  color: #0f766e !important;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
}
.mode-b-shell .crm-lead-convert-btn {
  margin: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.65rem;
  border-radius: 0.45rem;
  border: 0;
  background: #2563eb;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}
.mode-b-shell .crm-lead-convert-btn:disabled {
  opacity: 0.55;
}

.mode-b-shell .crm-lead-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid #e8eef4;
  border-bottom: 1px solid #e8eef4;
  padding: 0.15rem 0;
}
.mode-b-shell .crm-lead-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  min-height: 2.55rem;
  padding: 0.3rem 0.1rem;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: #334155;
  text-decoration: none;
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
}
.mode-b-shell .crm-lead-action svg {
  color: #2563eb;
  width: 0.95rem;
  height: 0.95rem;
}
.mode-b-shell .crm-lead-action:hover:not(:disabled) {
  background: #f8fafc;
  color: #1e3a8a;
}
.mode-b-shell .crm-lead-action:disabled {
  opacity: 0.4;
  cursor: default;
}

.mode-b-shell .crm-lead-info-card,
.mode-b-shell .crm-lead-timeline-card {
  padding: 0.35rem 0 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.mode-b-shell .crm-lead-section-title {
  margin: 0 0 0.25rem;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.mode-b-shell .crm-lead-info-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}
.mode-b-shell .crm-lead-info-list > div {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.32rem 0;
  border-bottom: 1px solid #eef2f6;
}
.mode-b-shell .crm-lead-info-list dt {
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0;
  color: #64748b;
  font-weight: 550;
}
.mode-b-shell .crm-lead-info-list dd {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0f172a;
  word-break: break-word;
}
.mode-b-shell .crm-lead-info-assignee {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.mode-b-shell .crm-lead-assignee-avatar {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.5rem;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mode-b-shell .crm-lead-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin-top: 0.4rem;
}
.mode-b-shell .crm-lead-tag {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 0.68rem;
  font-weight: 650;
}
.mode-b-shell .crm-lead-notes {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #334155;
  white-space: pre-wrap;
}

.mode-b-shell .crm-lead-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.7rem;
  border-left: 1px solid #e8eef5;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mode-b-shell .crm-lead-timeline li {
  position: relative;
}
.mode-b-shell .crm-lead-timeline-dot {
  position: absolute;
  left: -0.95rem;
  top: 0.28rem;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: #cbd5e1;
  box-shadow: 0 0 0 2px #fff;
}
.mode-b-shell .crm-lead-timeline li[data-first='true'] .crm-lead-timeline-dot {
  background: #2563eb;
}
.mode-b-shell .crm-lead-timeline-body {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.mode-b-shell .crm-lead-timeline-body time {
  font-size: 0.68rem;
  color: #94a3b8;
}
.mode-b-shell .crm-lead-timeline-body strong {
  font-size: 0.82rem;
  font-weight: 650;
  color: #0f172a;
}
.mode-b-shell .crm-lead-timeline-empty {
  margin: 0;
  font-size: 0.82rem;
}
/* ==== end modeb-lead-detail ==== */

/* ==== CRM Leads filter popup (bottom sheet) :: modeb-filter-sheet (2026-09-02) ==== */
.sheet .crm-leads-filters-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  padding: 0;
  border: 0;
  background: transparent;
}
.sheet .crm-leads-filters-grid select,
.sheet .crm-leads-filters-grid input[type="date"] {
  width: 100%;
  padding: 0.65rem 0.7rem;
  border: 1px solid #dbe3f0;
  border-radius: 0.7rem;
  background: #fff;
  color: #0f172a;
  font-size: 0.9rem;
}
.sheet .crm-leads-filters-grid .crm-leads-filters-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.crm-leads-filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
}
.crm-leads-filter-actions .primary-btn {
  width: auto;
  min-width: 8rem;
  padding: 0.7rem 1.4rem;
}
/* ==== end modeb-filter-sheet ==== */

/* ==== CRM Leads filter modern card :: modeb-crm-filter-modern (2026-09-03) ==== */
.overlay.overlay-crm-filter {
  align-items: center;
  padding: 1.25rem 0.9rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(8px);
}
.sheet.sheet-crm-filter {
  width: min(22.5rem, 100%);
  border-radius: 1.45rem;
  padding: 0.7rem 1rem 1rem;
  gap: 0.85rem;
  box-shadow: 0 28px 64px rgba(15, 23, 42, 0.22);
}
.sheet.sheet-crm-filter .sheet-handle {
  width: 2.1rem;
  height: 0.22rem;
  background: #e2e8f0;
  margin-bottom: 0.45rem;
}
.sheet.sheet-crm-filter .sheet-head h2 {
  font-size: 1.15rem;
  font-weight: 750;
  color: #0f172a;
}
.sheet.sheet-crm-filter .sheet-body {
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.crm-filter-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.crm-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 0.65rem;
}
.crm-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  min-width: 0;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.crm-filter-field-wide {
  width: 100%;
}
.crm-filter-control {
  position: relative;
  display: block;
}
.crm-filter-control select,
.crm-filter-control input[type="search"],
.crm-filter-control input[type="date"] {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #e8eef6;
  background: #f8fafc;
  color: #0f172a;
  border-radius: 0.9rem;
  padding: 0.72rem 2rem 0.72rem 0.85rem;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 650;
  box-shadow: inset 0 1px 0 #fff;
}
.crm-filter-control select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.95rem;
}
.crm-filter-control select:focus,
.crm-filter-control input[type="search"]:focus,
.crm-filter-control input[type="date"]:focus {
  outline: none;
  border-color: #93c5fd;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.crm-filter-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: 1rem;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}
.crm-filter-switch-row strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
}
.crm-filter-switch-row em {
  display: block;
  font-style: normal;
  font-size: 0.72rem;
  color: #94a3b8;
}
.crm-filter-switch {
  width: 2.6rem;
  height: 1.5rem;
  border: 0;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
}
.crm-filter-switch::after {
  content: "";
  position: absolute;
  top: 0.16rem;
  left: 0.16rem;
  width: 1.18rem;
  height: 1.18rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
  transition: transform 0.16s ease;
}
.crm-filter-switch.on {
  background: #2563eb;
}
.crm-filter-switch.on::after {
  transform: translateX(1.1rem);
}
.crm-filter-footer {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.crm-filter-clear {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #2563eb;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.55rem 0.2rem;
  cursor: pointer;
}
.crm-filter-apply {
  flex: 1 1 auto;
  border: 0;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font: inherit;
  font-weight: 750;
  font-size: 0.92rem;
  padding: 0.78rem 1rem;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.22);
}
.crm-more-list {
  padding: 0.15rem 0 0.4rem;
}
a.crm-more-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.crm-more-link:hover {
  background: #f8fafc;
}
/* ==== end modeb-crm-filter-modern ==== */

/* ==== CRM Leads table card UI (screenshot) :: modeb-leads-table-card (2026-09-03) ==== */
.sa-form[data-screen="crm-leads-list"] > .sa-form-head {
  margin-bottom: 0.75rem !important;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-head h1 {
  font-family: var(--serif) !important;
  font-size: 1.7rem !important;
  font-weight: 650 !important;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.mode-b-shell .sa-form[data-screen="crm-leads-list"] > .sa-form-body {
  background: #eef5fb !important;
  border: 1px solid #e4eef7 !important;
  box-shadow: 0 16px 40px rgba(18, 32, 43, 0.06) !important;
  border-radius: 1.5rem !important;
  padding: 1rem !important;
  gap: 0.75rem !important;
}

.sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.mode-b-shell .crm-leads-list {
  gap: 0.55rem !important;
}
.sa-form[data-screen="crm-leads-list"] .crm-lead-card,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card.crm-lead-row,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card[data-tone],
.mode-b-shell .crm-leads-list .crm-lead-card,
.mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row,
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="new"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="contacted"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="qualified"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="muted"] {
  padding: 0.8rem 0.85rem !important;
  border: 1px solid #eef2f7 !important;
  border-radius: 1rem !important;
  box-shadow: none !important;
  background: #ffffff !important;
}
.sa-form[data-screen="crm-leads-list"] .crm-leads-list > li:hover .crm-lead-card,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card:hover,
.mode-b-shell .crm-leads-list > li:hover .crm-lead-card,
.mode-b-shell .crm-leads-list .crm-lead-card:hover {
  background: #ffffff !important;
}
.sa-form[data-screen="crm-leads-list"] .crm-leads-list-head,
.mode-b-shell .crm-leads-list-head {
  padding: 0.15rem 0.9rem 0.45rem !important;
}
.sa-form[data-screen="crm-leads-list"] .crm-lead-avatar,
.mode-b-shell .crm-leads-list .crm-lead-avatar {
  width: 2.45rem;
  height: 2.45rem;
  font-size: 0.75rem;
  background: #e8eef8;
  color: #1d4ed8;
}

.mode-b-shell .crm-leads-toolbar {
  gap: 0.55rem;
}
.mode-b-shell .crm-leads-actions-icons {
  gap: 0.55rem !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only,
.mode-b-shell .crm-leads-search-toggle {
  width: 2.65rem !important;
  height: 2.65rem !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.mode-b-shell .crm-leads-search-toggle {
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  color: #2563eb !important;
}
.mode-b-shell .crm-leads-search-toggle.active,
.mode-b-shell .crm-leads-search-toggle:hover {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="add"] {
  background: #2563eb !important;
  border: 1px solid #2563eb !important;
  color: #fff !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="import"] {
  background: color-mix(in srgb, #16a34a 12%, #fff) !important;
  border: 1px solid color-mix(in srgb, #16a34a 35%, #fff) !important;
  color: #15803d !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="export"] {
  background: color-mix(in srgb, #ea580c 12%, #fff) !important;
  border: 1px solid color-mix(in srgb, #ea580c 35%, #fff) !important;
  color: #c2410c !important;
}

.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-kind="edit"],
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-kind="edit"] svg {
  color: #2563eb !important;
}
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="convert"],
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="convert"] svg {
  color: #2563eb !important;
}
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="danger"],
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="danger"] svg {
  color: #dc2626 !important;
}
.mode-b-shell .crm-lead-col-email,
.mode-b-shell .crm-lead-col-email svg {
  color: #6b7db3 !important;
}
.mode-b-shell .crm-lead-card-company svg {
  color: #8a90a0 !important;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.call,
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.call svg {
  color: #3d7ea6 !important;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.wa,
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.wa svg {
  color: #3d9a6e !important;
}

.mode-b-shell .crm-lead-quick-actions {
  padding: 0.05rem 0;
}
.mode-b-shell .crm-lead-action {
  min-height: 2.35rem;
  gap: 0.08rem;
  padding: 0.22rem 0.08rem;
  color: #64748b;
}
.mode-b-shell .crm-lead-action[data-kind="edit"],
.mode-b-shell .crm-lead-action[data-kind="edit"] svg { color: #3d7ea6; }
.mode-b-shell .crm-lead-action[data-kind="assign"],
.mode-b-shell .crm-lead-action[data-kind="assign"] svg { color: #4f8f78; }
.mode-b-shell .crm-lead-action[data-kind="note"],
.mode-b-shell .crm-lead-action[data-kind="note"] svg { color: #b08948; }
.mode-b-shell .crm-lead-action[data-kind="task"],
.mode-b-shell .crm-lead-action[data-kind="task"] svg { color: #6d74a8; }
.mode-b-shell .crm-lead-action[data-kind="call"],
.mode-b-shell .crm-lead-action[data-kind="call"] svg { color: #3d9a8f; }
.mode-b-shell .crm-lead-action[data-kind="meeting"],
.mode-b-shell .crm-lead-action[data-kind="meeting"] svg { color: #c47a5a; }
.mode-b-shell .crm-lead-action[data-kind="file"],
.mode-b-shell .crm-lead-action[data-kind="file"] svg { color: #5f7e9b; }
.mode-b-shell .crm-lead-action[data-kind="email"],
.mode-b-shell .crm-lead-action[data-kind="email"] svg { color: #8a6aa8; }
.mode-b-shell .crm-lead-action svg { color: inherit; }

.mode-b-shell .crm-lead-info-list > div {
  padding: 0.22rem 0;
}
.mode-b-shell .crm-lead-detail {
  gap: 0.4rem;
}
/* ==== end modeb-leads-compact-v2 ==== */

/* ==== Leads list: new flat markup (does not fight old card CSS) :: modeb-leads-flat (2026-09-03) ==== */
.sa-form.crm-leads-flat {
  gap: 0.35rem !important;
}
.sa-form.crm-leads-flat > .sa-form-head {
  align-items: center;
  margin-bottom: 0.15rem !important;
  gap: 0.5rem;
}
.sa-form.crm-leads-flat > .sa-form-head .sa-form-pict {
  display: none !important;
}
.sa-form.crm-leads-flat > .sa-form-head .sa-form-titles h1 {
  font-family: inherit !important;
  font-size: 1.12rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.sa-form.crm-leads-flat > .sa-form-body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 0.35rem !important;
}
.sa-form.crm-leads-flat .crm-leads-title-actions .crm-leads-icon-btn {
  width: 1.85rem;
  height: 1.85rem;
  border: 0;
  background: transparent;
  border-radius: 0.4rem;
}
.sa-form.crm-leads-flat .crm-leads-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.sa-form.crm-leads-flat .crm-leads-ghost {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 0.4rem;
  color: #5b6b82;
  cursor: pointer;
  text-decoration: none;
  flex: 0 0 auto;
}
.sa-form.crm-leads-flat .crm-leads-ghost[data-kind="add"] { color: #3d7ea6; }
.sa-form.crm-leads-flat .crm-leads-ghost[data-kind="import"] { color: #4f8f78; }
.sa-form.crm-leads-flat .crm-leads-ghost[data-kind="export"] { color: #c47a5a; }
.sa-form.crm-leads-flat .crm-leads-ghost.active,
.sa-form.crm-leads-flat .crm-leads-ghost:hover {
  background: #f1f5f9;
}

.sa-form.crm-leads-flat .crm-leads-list {
  gap: 0 !important;
}
.sa-form.crm-leads-flat .crm-lead-line,
.sa-form.crm-leads-flat .crm-lead-card.crm-lead-line {
  padding: 0.3rem 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #e8eef3 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.sa-form.crm-leads-flat .crm-lead-line:hover {
  background: #f8fafc !important;
}
.sa-form.crm-leads-flat .crm-leads-list-head {
  padding: 0 0 0.25rem !important;
}
.sa-form.crm-leads-flat .crm-lead-avatar {
  width: 1.8rem !important;
  height: 1.8rem !important;
  font-size: 0.62rem !important;
}
.sa-form.crm-leads-flat .crm-lead-action-btn[data-kind="edit"] { color: #3d7ea6 !important; }
.sa-form.crm-leads-flat .crm-lead-action-btn[data-tone="convert"] { color: #4f8f78 !important; }
.sa-form.crm-leads-flat .crm-lead-action-btn[data-tone="danger"] { color: #c45c5c !important; }
/* ==== end modeb-leads-flat ==== */

/* ==== Contacts page stacked rows + unique action colors :: modeb-contacts-actions (2026-09-03) ==== */
.sa-form[data-screen="crm-contacts-list"] > .sa-form-head .sa-form-pict {
  display: none;
}
.sa-form[data-screen="crm-contacts-list"] > .sa-form-head h1 {
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 750;
}
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
  background: #e8f1fa;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0.35rem 0 1rem;
}
.crm-contacts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.crm-contact-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  padding: 0.55rem 0.45rem 0.5rem;
  border-bottom: 1px solid #d5e4f2;
  background: #e8f1fa;
  border-radius: 0.7rem;
}
.crm-contact-row:nth-child(even),
.crm-contacts-list > li:nth-child(even) .crm-contact-row {
  background: #e8f1fa;
}
.crm-contacts-list > li:nth-child(odd) .crm-contact-row {
  background: #e8f1fa;
}
.crm-contacts-list > li {
  list-style: none;
}
.crm-contact-row-main {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  flex: 1 1 12rem;
}
.crm-contact-row-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: #eef4fb;
  color: #3d7ea6;
  font-size: 0.68rem;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.crm-contact-row-copy {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}
.crm-contact-row-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
  min-height: 1.25rem;
}
.crm-contact-row-name {
  position: relative;
  z-index: 1;
  font-size: 0.95rem;
  font-weight: 750;
  color: #0f172a;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(42%, 12rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
/* Center email in the full people row (not beside the name). */
.crm-contact-row-email {
  position: absolute;
  left: 50%;
  top: 0.65rem;
  transform: translateX(-50%);
  z-index: 2;
  width: auto;
  max-width: min(18rem, 42%);
  margin: 0;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.crm-contact-row-copy .crm-contact-row-line {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-contact-row-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.75rem;
  color: #64748b;
}
.crm-contact-row-line {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: #475569;
  min-width: 0;
}
.crm-contact-row-line[data-kind="email"] { color: #6b7db3; }
.crm-contact-row-line[data-kind="phone"] { color: #3d7ea6; }
.crm-contact-row-line svg { flex: 0 0 auto; }
.crm-contact-row-phone-acts {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: 0.15rem;
}
.crm-contact-row-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.12rem;
  flex: 0 0 auto;
  margin-left: auto;
  min-width: max-content;
  overflow: visible;
}
@media (max-width: 36rem) {
  .crm-contact-row-name {
    max-width: 100%;
  }
  .crm-contact-row-email {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    max-width: 100%;
    width: 100%;
    order: 2;
    justify-content: flex-start;
    pointer-events: auto;
    padding-left: 2.8rem;
    margin-top: -0.1rem;
  }
  .crm-contact-row-main {
    order: 1;
    flex: 1 1 100%;
  }
  .crm-contact-row-actions {
    order: 3;
  }
}
@media (max-width: 30rem) {
  .crm-contact-row-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
    margin-left: 0;
    padding-left: 2.6rem;
  }
}
.crm-contact-act {
  width: 2.05rem;
  height: 2.05rem;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569;
  flex: 0 0 auto;
}
.crm-contact-act svg {
  width: 1.25rem;
  height: 1.25rem;
}
.crm-contact-act:hover:not(:disabled) { background: #f1f5f9; }
.crm-contact-act:disabled { opacity: 0.35; cursor: default; }
.crm-contact-act[data-kind="call"] { color: #3d7ea6; }
.crm-contact-act[data-kind="whatsapp"] { color: #3d9a6e; }
.crm-contact-act[data-kind="appointment"] { color: #3d7ea6; }
.crm-contact-act[data-kind="reminder"] { color: #c49a3c; }
.crm-contact-act[data-kind="deal"] { color: #6d74a8; }
.crm-contact-act[data-kind="task"] { color: #4f8f78; }
.crm-contact-act[data-kind="customer"] { color: #8a6aa8; }
.crm-contact-act[data-kind="edit"] { color: #5f7e9b; }
.crm-contact-act[data-kind="delete"] { color: #c45c5c; }
/* ==== end modeb-contacts-actions ==== */

/* ==== Leads page stacked style (screenshot) :: modeb-leads-stack (2026-09-03) ==== */
.sa-form.crm-leads-stack > .sa-form-head .sa-form-titles h1 {
  font-size: 1.35rem !important;
  color: #0f2744 !important;
}
.sa-form.crm-leads-stack .crm-leads-search-wrap .crm-leads-ghost,
.sa-form.crm-leads-stack .crm-leads-ghost {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
}
.sa-form.crm-leads-stack .crm-leads-ghost[data-kind="add"] {
  background: #2563eb !important;
  color: #fff !important;
}
.sa-form.crm-leads-stack .crm-leads-ghost[data-kind="import"] {
  background: #ecfdf5 !important;
  color: #0d9488 !important;
}
.sa-form.crm-leads-stack .crm-leads-ghost[data-kind="export"] {
  background: #fff7ed !important;
  color: #ea580c !important;
}
.sa-form.crm-leads-stack .crm-lead-stack-row {
  padding: 0.7rem 0 0.55rem;
}
.sa-form.crm-leads-stack .crm-contact-row-name {
  color: #0f2744;
  font-size: 1rem;
}
.sa-form.crm-leads-stack .crm-contact-row-actions {
  gap: 0.12rem;
  padding-left: 0;
}
.sa-form.crm-leads-stack .crm-contact-act {
  width: 2.05rem;
  height: 2.05rem;
}
.sa-form.crm-leads-stack .crm-contact-act[data-kind="appointment"] { color: #3b82f6; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="reminder"] { color: #eab308; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="deal"] { color: #2563eb; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="task"] { color: #14b8a6; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="customer"] { color: #8b5cf6; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="edit"] { color: #64748b; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="delete"] { color: #ef4444; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="call"] { color: #3b82f6; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="whatsapp"] { color: #22c55e; }
/* ==== end modeb-leads-stack ==== */

/* ==== Lead details card layout + unique icon colors :: modeb-lead-detail-v2 (2026-09-03) ==== */
.mode-b-shell main:has([data-screen="crm-lead-detail"]) {
  background: #f4f6f9 !important;
}
.sa-form[data-screen="crm-lead-detail"] > .sa-form-body,
.mode-b-shell .sa-form[data-screen="crm-lead-detail"] > .sa-form-body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.crm-lead-detail-v2 {
  gap: 0.75rem !important;
}
.crm-lead-detail-v2 .crm-lead-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}
.crm-lead-detail-v2 .crm-lead-profile-card,
.crm-lead-detail-v2 .crm-lead-info-card,
.crm-lead-detail-v2 .crm-lead-timeline-card,
.crm-lead-detail-v2 .crm-lead-side-card {
  background: #fff !important;
  border: 1px solid #eef2f7 !important;
  border-radius: 1rem !important;
  box-shadow: 0 10px 28px rgba(18, 32, 43, 0.05) !important;
  padding: 1rem 1.05rem !important;
}
.crm-lead-detail-v2 .crm-lead-profile-card {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  gap: 0.75rem 0.85rem;
  align-items: start;
}
.crm-lead-detail-v2 .crm-lead-profile-avatar {
  width: 3.1rem !important;
  height: 3.1rem !important;
  font-size: 0.95rem !important;
  background: #e8eef8 !important;
  color: #2563eb !important;
}
.crm-lead-detail-v2 .crm-lead-profile-name {
  font-size: 1.2rem !important;
  font-weight: 750 !important;
  margin: 0 0 0.4rem !important;
}
.crm-lead-detail-v2 .crm-lead-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}
.crm-lead-detail-v2 .crm-lead-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
}
.crm-lead-detail-v2 .crm-lead-chip[data-tone="new"] { background: #ede9fe; color: #6d28d9; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="contacted"] { background: #fef3c7; color: #b45309; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="qualified"] { background: #dcfce7; color: #15803d; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="muted"] { background: #f1f5f9; color: #475569; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="priority"] { background: #fef9c3; color: #a16207; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="converted"] { background: #dcfce7; color: #166534; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="job"] { background: #e0f2fe; color: #0369a1; }

.crm-lead-detail-v2 .crm-lead-contact-lines {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.crm-lead-detail-v2 .crm-lead-contact-line {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: #475569;
  text-decoration: none;
  min-width: 0;
}
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="email"],
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="email"] svg { color: #2563eb; }
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="phone"],
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="phone"] svg { color: #0d9488; }
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="company"],
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="company"] svg { color: #7c3aed; }

.crm-lead-detail-v2 .crm-lead-quick-actions {
  grid-column: 1 / -1;
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.4rem !important;
  border: 0 !important;
  padding: 0.15rem 0 0 !important;
}
.crm-lead-detail-v2 .crm-lead-action {
  min-height: 0 !important;
  flex-direction: column;
  width: 3.2rem;
  gap: 0.18rem !important;
  padding: 0.35rem 0.1rem !important;
  border-radius: 0.75rem !important;
  font-size: 0.62rem !important;
}
.crm-lead-detail-v2 .crm-lead-action[data-kind="edit"] { color: #2563eb !important; background: color-mix(in srgb, #2563eb 10%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="assign"] { color: #7c3aed !important; background: color-mix(in srgb, #7c3aed 10%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="note"] { color: #ca8a04 !important; background: color-mix(in srgb, #ca8a04 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="task"] { color: #0891b2 !important; background: color-mix(in srgb, #0891b2 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="call"] { color: #0d9488 !important; background: color-mix(in srgb, #0d9488 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="meeting"] { color: #ea580c !important; background: color-mix(in srgb, #ea580c 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="file"] { color: #64748b !important; background: color-mix(in srgb, #64748b 10%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="email"] { color: #4f46e5 !important; background: color-mix(in srgb, #4f46e5 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action svg { color: inherit !important; }

.crm-lead-detail-v2 .crm-lead-section-title {
  font-size: 0.95rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: #0f172a !important;
  margin: 0 0 0.7rem !important;
}

.crm-lead-detail-v2 .crm-lead-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 0.75rem;
}
.crm-lead-detail-v2 .crm-lead-facts > div {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.7rem 0.75rem;
  border-radius: 0.85rem;
  background: #f8fafc;
}
.crm-lead-detail-v2 .crm-lead-facts > div > div {
  min-width: 0;
}
.crm-lead-detail-v2 .crm-lead-fact-icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.crm-lead-detail-v2 .crm-lead-facts dt {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #94a3b8;
}
.crm-lead-detail-v2 .crm-lead-facts dd {
  margin: 0.12rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  word-break: break-word;
}
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="source"] .crm-lead-fact-icon { color: #2563eb; background: color-mix(in srgb, #2563eb 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="status"] .crm-lead-fact-icon { color: #7c3aed; background: color-mix(in srgb, #7c3aed 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="priority"] .crm-lead-fact-icon { color: #ca8a04; background: color-mix(in srgb, #ca8a04 14%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="assigned"] .crm-lead-fact-icon { color: #0d9488; background: color-mix(in srgb, #0d9488 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="created"] .crm-lead-fact-icon { color: #ea580c; background: color-mix(in srgb, #ea580c 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="converted"] .crm-lead-fact-icon { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="tags"] .crm-lead-fact-icon { color: #4f46e5; background: color-mix(in srgb, #4f46e5 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="tags"] {
  grid-column: 1 / -1;
}

.crm-lead-detail-v2 .crm-lead-notes {
  color: #64748b !important;
  font-size: 0.88rem !important;
  line-height: 1.45;
}

.crm-lead-detail-v2 .crm-lead-timeline {
  border: 0 !important;
  padding: 0 !important;
  gap: 0.7rem !important;
}
.crm-lead-detail-v2 .crm-lead-timeline li {
  padding: 0.15rem 0 0.15rem 0.75rem;
  border-left: 3px solid #cbd5e1;
}
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="task"] { border-left-color: #38bdf8; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="email"] { border-left-color: #4ade80; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="note"] { border-left-color: #fbbf24; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="call"] { border-left-color: #2dd4bf; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="meeting"] { border-left-color: #fb923c; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="status"] { border-left-color: #a78bfa; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="default"] { border-left-color: #94a3b8; }
.crm-lead-detail-v2 .crm-lead-timeline-dot { display: none; }
.crm-lead-detail-v2 .crm-lead-timeline-body strong {
  font-size: 0.9rem;
  display: block;
}
.crm-lead-detail-v2 .crm-lead-timeline-body time {
  display: block;
  margin-top: 0.15rem;
}
/* ==== end modeb-lead-detail-v2 ==== */

/* ==== Header profile menu + profile page :: modeb-user-profile (2026-09-03) ==== */
.user-menu-panel.user-menu-card {
  min-width: 16.5rem;
  padding: 0.55rem;
  gap: 0.4rem;
}
.user-menu-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  padding: 0.85rem 0.7rem 0.75rem;
  text-decoration: none;
  color: inherit;
  border-radius: 0.85rem;
  background: #f8fafc;
  text-align: center;
}
.user-menu-profile:hover {
  background: #eef4fb;
}
.user-menu-profile strong {
  font-size: 0.95rem;
  font-weight: 750;
  color: #0f172a;
}
.user-menu-profile span {
  font-size: 0.75rem;
  color: #64748b;
  word-break: break-all;
}
.user-menu-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 0.15rem;
}
.user-menu-card .user-menu-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.75rem;
  font-weight: 650;
  font-size: 0.9rem;
}
.user-menu-card .user-menu-item svg {
  color: #2563eb;
  flex: 0 0 auto;
}
.user-menu-card .user-menu-logout svg {
  color: #dc2626;
}

.sa-form[data-screen="user-profile"] > .sa-form-head .sa-form-pict,
.sa-form[data-screen="user-profile"] > .sa-form-head h1 {
  display: none;
}
.sa-form[data-screen="user-profile"] > .sa-form-body {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.user-profile-page {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.user-profile-bar {
  display: grid;
  grid-template-columns: 2.2rem 1fr 2.2rem;
  align-items: center;
}
.user-profile-bar h2 {
  margin: 0;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 750;
  color: #0f172a;
}
.user-profile-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1.25rem 1rem;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 1.1rem;
  box-shadow: 0 10px 28px rgba(18, 32, 43, 0.05);
  text-align: center;
}
.user-profile-hero strong {
  font-size: 1.15rem;
  font-weight: 750;
  color: #0f172a;
}
.user-profile-hero span {
  font-size: 0.85rem;
  color: #64748b;
  word-break: break-all;
}
.user-profile-hero em {
  font-style: normal;
  font-size: 0.75rem;
  color: #94a3b8;
}
.user-profile-menu {
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 1.1rem;
  box-shadow: 0 10px 28px rgba(18, 32, 43, 0.05);
}
.user-profile-menu a,
.user-profile-menu button {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.85rem 0.8rem;
  border: 0;
  background: transparent;
  border-radius: 0.8rem;
  text-decoration: none;
  color: #0f172a;
  font: inherit;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.user-profile-menu a:hover,
.user-profile-menu button:hover {
  background: #f8fafc;
}
.user-profile-menu a svg { color: #2563eb; }
.user-profile-menu button svg { color: #dc2626; }
/* ==== end modeb-user-profile ==== */

/* ==== Settings More page toggles :: modeb-crm-page-settings (2026-09-03) ==== */
.sa-form[data-screen="crm-page-settings"] > .sa-form-head h1 {
  font-family: var(--serif);
}
.crm-page-toggle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.crm-page-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 1.15rem;
  box-shadow: 0 10px 24px rgba(18, 32, 43, 0.05);
}
.crm-page-toggle-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.crm-page-toggle-main .pict {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  background: var(--purple-soft);
  color: var(--purple);
  flex: 0 0 auto;
}
.crm-page-toggle-main strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--brand-ink);
}
.crm-page-toggle-main em {
  display: block;
  font-style: normal;
  font-size: 0.75rem;
  color: #94a3b8;
}
.crm-page-toggle-actions {
  display: flex;
  gap: 0.35rem;
  flex: 0 0 auto;
}
.crm-page-toggle-actions button {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  border-radius: 999px;
  padding: 0.38rem 0.7rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.crm-page-toggle-actions button.is-active {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}
.crm-page-toggle-actions button.is-inactive {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}
/* ==== end modeb-crm-page-settings ==== */

/* ==== Leads import popup :: modeb-lead-import (2026-09-03) ==== */
.sheet.sheet-lead-import {
  width: min(36rem, 100%);
}
.lead-import {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.lead-import-help {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #475569;
}
.lead-import-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.lead-import-ghost {
  border: 1px solid #93c5fd;
  background: #fff;
  color: #1d4ed8;
  border-radius: 0.7rem;
  padding: 0.5rem 0.8rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.lead-import-field select,
.lead-import-defaults select,
.lead-import-defaults input {
  width: 100%;
  border: 1px solid #dbe3f0;
  border-radius: 0.7rem;
  padding: 0.55rem 0.7rem;
  background: #fff;
  font: inherit;
  font-size: 0.85rem;
  color: #0f172a;
}
.lead-import-file {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: #64748b;
}
.lead-import-file span {
  border: 0;
  border-radius: 0.7rem;
  background: #e2e8f0;
  color: #0f172a;
  padding: 0.5rem 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.lead-import-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.lead-import-file em {
  font-style: normal;
}
.lead-import-defaults {
  margin: 0;
  padding: 0.75rem 0.85rem 0.9rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.9rem;
}
.lead-import-defaults legend {
  padding: 0 0.25rem;
  font-size: 0.85rem;
  font-weight: 750;
  color: #0f172a;
}
.lead-import-defaults p {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.4;
}
.lead-import-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 0.75rem;
}
.lead-import-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #334155;
}
.lead-import-label {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: #334155;
}
.lead-import-req {
  color: #dc2626;
  font-weight: 750;
  line-height: 1;
}
.lead-import-custom-source {
  grid-column: 1 / -1;
}
.lead-import-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}
.lead-import-submit {
  border: 0;
  border-radius: 0.7rem;
  background: #2563eb;
  color: #fff;
  font: inherit;
  font-weight: 750;
  font-size: 0.88rem;
  padding: 0.55rem 1.15rem;
  cursor: pointer;
}
.lead-import-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
@media (max-width: 32rem) {
  .lead-import-grid {
    grid-template-columns: 1fr;
  }
}
/* ==== end modeb-lead-import ==== */

/* ==== People lists mild light-blue canvas :: modeb-contacts-list-blue (2026-09-08) ==== */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"],
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list {
  background: #e8f1fa !important;
  box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list > li .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] article.crm-contact-row {
  background: #e8f1fa !important;
  border: 1px solid #d5e4f2 !important;
  border-bottom: 1px solid #d5e4f2 !important;
  box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0.35rem 0 1rem !important;
}
/* ==== end modeb-contacts-list-blue ==== */

/* ==== Add Contacts form two-column like Add Lead fields :: modeb-contact-form-flat (2026-09-03) ==== */
.sheet.sheet-contact-form,
.sheet:has(.contact-form-flat) {
  width: min(40rem, calc(100% - 1.25rem));
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
.sheet.sheet-contact-form .sheet-body,
.sheet:has(.contact-form-flat) .sheet-body {
  overflow-x: hidden;
  max-width: 100%;
}
.lead-form.contact-form-flat {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}
.lead-form.contact-form-flat .lead-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.55rem 0.75rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.lead-form.contact-form-flat .field-with-mic,
.lead-form.contact-form-flat .field,
.lead-form.contact-form-flat .lead-phone-field {
  min-width: 0;
  max-width: 100%;
}
.lead-form.contact-form-flat .lead-phone-row {
  min-width: 0;
  width: 100%;
}
.lead-form.contact-form-flat .lead-phone-row > select {
  flex: 0 1 6.75rem;
  min-width: 0;
  max-width: 7.25rem;
}
.lead-form.contact-form-flat .lead-form-actions {
  justify-content: flex-end;
}
@media (max-width: 36rem) {
  .lead-form.contact-form-flat .lead-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ==== end modeb-contact-form-flat ==== */

/* ==== Add Deal form like Add Lead :: modeb-deal-form-flat (2026-09-03) ==== */
.lead-form.deal-form-flat .deal-form-span {
  grid-column: 1 / -1;
}
.lead-form.deal-form-flat input[type='number'],
.lead-form.deal-form-flat input[type='date'],
.lead-form.deal-form-flat input[type='datetime-local'] {
  min-width: 0;
}
/* ==== end modeb-deal-form-flat ==== */

/* ==== More page compact unique list :: modeb-more-nav (2026-09-03) ==== */
.sa-form[data-screen="crm-home"] > .sa-form-head h1 {
  font-family: var(--serif);
  font-size: 1.35rem;
}
.sa-form[data-screen="crm-home"] > .sa-form-body {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.mode-b-shell main:has([data-screen="crm-home"]) {
  background: #ffffff;
}
.crm-more-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.crm-more-section-label {
  margin: 0 0.15rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.crm-more-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.crm-more-nav-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.72rem 0.8rem;
  text-decoration: none;
  color: inherit;
  border-radius: 0.95rem;
  min-height: 3.35rem;
  background: #fff;
  border: 1px solid #e8eef4;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}
.crm-more-nav-row:hover {
  background: #f8fbff;
  border-color: #d7e4f4;
}
.crm-more-nav-icon {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 0.8rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.crm-more-nav-copy {
  min-width: 0;
  flex: 1 1 auto;
}
.crm-more-nav-copy strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 780;
  color: #0f172a;
  line-height: 1.2;
}
.crm-more-nav-copy em {
  display: inline-flex;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  margin-top: 0.22rem;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 0.1rem 0.48rem;
}
.crm-more-nav-go {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #f8fafc;
  color: #94a3b8;
  border: 1px solid #e8eef4;
}
.crm-more-nav-row:hover .crm-more-nav-go {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}
.crm-more-nav-row[data-tone="blue"] .crm-more-nav-icon { color: #2563eb; background: color-mix(in srgb, #2563eb 12%, #fff); }
.crm-more-nav-row[data-tone="orange"] .crm-more-nav-icon { color: #ea580c; background: color-mix(in srgb, #ea580c 12%, #fff); }
.crm-more-nav-row[data-tone="teal"] .crm-more-nav-icon { color: #0d9488; background: color-mix(in srgb, #0d9488 12%, #fff); }
.crm-more-nav-row[data-tone="amber"] .crm-more-nav-icon { color: #d97706; background: color-mix(in srgb, #d97706 14%, #fff); }
.crm-more-nav-row[data-tone="indigo"] .crm-more-nav-icon { color: #4f46e5; background: color-mix(in srgb, #4f46e5 12%, #fff); }
.crm-more-nav-row[data-tone="violet"] .crm-more-nav-icon { color: #7c3aed; background: color-mix(in srgb, #7c3aed 12%, #fff); }
.crm-more-nav-row[data-tone="green"] .crm-more-nav-icon { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, #fff); }
.crm-more-nav-row[data-tone="slate"] .crm-more-nav-icon { color: #475569; background: color-mix(in srgb, #475569 12%, #fff); }
.crm-more-nav-row[data-tone="cyan"] .crm-more-nav-icon { color: #0891b2; background: color-mix(in srgb, #0891b2 12%, #fff); }
.crm-more-nav-row[data-tone="pink"] .crm-more-nav-icon { color: #db2777; background: color-mix(in srgb, #db2777 12%, #fff); }
.crm-more-nav-row[data-tone="yellow"] .crm-more-nav-icon { color: #ca8a04; background: color-mix(in srgb, #ca8a04 14%, #fff); }
.crm-more-nav-row[data-tone="sky"] .crm-more-nav-icon { color: #0284c7; background: color-mix(in srgb, #0284c7 12%, #fff); }
.crm-more-nav-row[data-tone="gray"] .crm-more-nav-icon { color: #64748b; background: color-mix(in srgb, #64748b 12%, #fff); }
.crm-more-nav-row[data-tone="purple"] .crm-more-nav-icon { color: #9333ea; background: color-mix(in srgb, #9333ea 12%, #fff); }
.crm-more-nav-row[data-tone="rose"] .crm-more-nav-icon { color: #e11d48; background: color-mix(in srgb, #e11d48 12%, #fff); }
.crm-more-nav-row[data-tone="red"] .crm-more-nav-icon { color: #dc2626; background: color-mix(in srgb, #dc2626 12%, #fff); }
.crm-more-nav-row[data-tone="blue"] { border-left: 3px solid #2563eb; }
.crm-more-nav-row[data-tone="orange"] { border-left: 3px solid #ea580c; }
.crm-more-nav-row[data-tone="teal"] { border-left: 3px solid #0d9488; }
.crm-more-nav-row[data-tone="amber"] { border-left: 3px solid #d97706; }
.crm-more-nav-row[data-tone="indigo"] { border-left: 3px solid #4f46e5; }
.crm-more-nav-row[data-tone="violet"] { border-left: 3px solid #7c3aed; }
.crm-more-nav-row[data-tone="green"] { border-left: 3px solid #16a34a; }
.crm-more-nav-row[data-tone="slate"] { border-left: 3px solid #475569; }
.crm-more-nav-row[data-tone="cyan"] { border-left: 3px solid #0891b2; }
.crm-more-nav-row[data-tone="pink"] { border-left: 3px solid #db2777; }
.crm-more-nav-row[data-tone="yellow"] { border-left: 3px solid #ca8a04; }
.crm-more-nav-row[data-tone="sky"] { border-left: 3px solid #0284c7; }
.crm-more-nav-row[data-tone="gray"] { border-left: 3px solid #64748b; }
.crm-more-nav-row[data-tone="purple"] { border-left: 3px solid #9333ea; }
.crm-more-nav-row[data-tone="rose"] { border-left: 3px solid #e11d48; }
.crm-more-nav-row[data-tone="red"] { border-left: 3px solid #dc2626; }
.crm-more-nav-row[data-tone="emerald"] { border-left: 3px solid #059669; }
/* ==== end modeb-more-nav ==== */

/* ==== Add Lead select chevron next to value :: modeb-lead-select-chevron (2026-09-03) ==== */
.lead-form .field[data-as='select'] .field-control {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
}
.lead-form .field[data-as='select'] select {
  width: max-content;
  max-width: 100%;
  field-sizing: content;
  padding-right: 1.85rem;
}
.lead-form .field[data-as='select'] .field-chevron {
  right: 0.5rem;
}
/* ==== end modeb-lead-select-chevron ==== */

/* ==== Deals kanban list :: modeb-deals-board (2026-09-03) ==== */
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-body {
  background: #f4f7fb;
  border: 0;
  box-shadow: none;
  padding: 0.2rem 0 0.6rem;
}
.crm-deals-board {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.crm-deals-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}
.crm-deals-stats article {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 1rem;
  padding: 0.7rem 0.75rem;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}
.crm-deals-stats em {
  display: block;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.02em;
}
.crm-deals-stats strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.95rem;
  color: #0f172a;
}
.crm-deals-kanban {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scroll-snap-type: x proximity;
}
.crm-deals-column {
  flex: 0 0 min(15.5rem, 82vw);
  scroll-snap-align: start;
  background: #eef2f6;
  border-radius: 1rem;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.crm-deals-column-head {
  padding: 0.7rem 0.75rem 0.55rem;
  border-top: 3px solid #94a3b8;
  background: #fff;
}
.crm-deals-column[data-tone="blue"] .crm-deals-column-head { border-top-color: #2563eb; }
.crm-deals-column[data-tone="yellow"] .crm-deals-column-head { border-top-color: #eab308; }
.crm-deals-column[data-tone="orange"] .crm-deals-column-head { border-top-color: #ea580c; }
.crm-deals-column[data-tone="purple"] .crm-deals-column-head { border-top-color: #7c3aed; }
.crm-deals-column[data-tone="green"] .crm-deals-column-head { border-top-color: #16a34a; }
.crm-deals-column[data-tone="rose"] .crm-deals-column-head { border-top-color: #e11d48; }
.crm-deals-column-head h2 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 750;
  color: #0f172a;
}
.crm-deals-column-head span {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.72rem;
  color: #64748b;
}
.crm-deals-column-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.55rem;
}
.crm-deal-card {
  position: relative;
  background: #fff;
  border-radius: 0.85rem;
  padding: 0.7rem 0.75rem 0.55rem;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}
.crm-deal-card-title {
  display: block;
  font-weight: 750;
  font-size: 0.88rem;
  color: #0f172a;
  text-decoration: none;
  line-height: 1.3;
}
.crm-deal-card-party {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: #94a3b8;
}
.crm-deal-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 0.55rem;
}
.crm-deal-card-meta strong {
  font-size: 0.86rem;
  color: #0f172a;
}
.crm-deal-card-meta em {
  font-style: normal;
  font-size: 0.78rem;
  color: #64748b;
}
.crm-deal-card-move {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
}
.crm-deal-move {
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.crm-deal-card-select {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
}
/* ==== end modeb-deals-board ==== */

/* ==== Deals page: default pipeline only, no page scroll :: modeb-deals-no-page-scroll (2026-09-03) ==== */
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) {
  overflow: hidden !important;
  height: 100dvh;
  max-height: 100dvh;
}
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) .sa-form-list {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sa-form[data-screen="crm-opportunities-list"] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-head {
  flex: 0 0 auto;
}
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.crm-deals-board {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.crm-deals-stats {
  flex: 0 0 auto;
}
.crm-deals-kanban {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.crm-deals-column {
  min-height: 0;
  max-height: 100%;
}
.crm-deals-column-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* ==== end modeb-deals-no-page-scroll ==== */

/* ==== Profile menu theme + dark mode :: modeb-profile-theme (2026-09-03) ==== */
.user-menu-theme {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem 0.65rem;
}
.user-menu-theme > span {
  font-size: 0.72rem;
  font-weight: 750;
  color: #64748b;
  letter-spacing: 0.02em;
}
.user-menu-theme-picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.user-menu-theme-picks button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #0f172a;
  border-radius: 999px;
  padding: 0.45rem 0.4rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.user-menu-theme-picks button.on {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

html[data-theme="dark"] {
  --ink: #e8eef6;
  --brand-ink: #e2e8f0;
  --muted: #94a3b8;
  --surface: #0b1220;
  --card: #152033;
  --line: #2a3a52;
  --purple-soft: #1e1b4b;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  color: var(--ink);
  background: var(--surface);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .mode-b-shell {
  background: var(--surface);
  color: var(--ink);
}
html[data-theme="dark"] .mode-b-shell .workspace-header.mode-b-header,
html[data-theme="dark"] .mode-b-nav,
html[data-theme="dark"] .sheet,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .user-menu-panel,
html[data-theme="dark"] .dropdown-portal {
  background: #152033 !important;
  color: #e8eef6 !important;
  border-color: #2a3a52 !important;
}
html[data-theme="dark"] .sa-form-body,
html[data-theme="dark"] .sa-form-head h1,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .crm-lead-card,
html[data-theme="dark"] .crm-deal-card,
html[data-theme="dark"] .crm-deals-stats article,
html[data-theme="dark"] .crm-deals-column-head,
html[data-theme="dark"] .crm-more-nav-row,
html[data-theme="dark"] .user-menu-profile {
  background: #1b2940 !important;
  color: #e8eef6 !important;
  border-color: #2a3a52 !important;
}
html[data-theme="dark"] .crm-deals-column,
html[data-theme="dark"] .mode-b-shell main:has([data-screen="crm-home"]),
html[data-theme="dark"] .mode-b-shell main:has([data-screen="crm-leads-list"]) {
  background: #0b1220 !important;
}
html[data-theme="dark"] .user-menu-profile strong,
html[data-theme="dark"] .crm-deal-card-title,
html[data-theme="dark"] .crm-deals-column-head h2,
html[data-theme="dark"] .sa-form-head h1 {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .user-menu-profile span,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .crm-deal-card-party {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .user-menu-theme-picks button {
  background: #1b2940;
  border-color: #2a3a52;
  color: #e8eef6;
}
html[data-theme="dark"] .user-menu-theme-picks button.on {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}
html[data-theme="dark"] .user-menu-item {
  color: #e8eef6;
}
html[data-theme="dark"] .user-menu-logout {
  color: #fca5a5;
}
/* ==== end modeb-profile-theme ==== */

/* ==== Deals board: no horizontal scroll, compact cards :: modeb-deals-fit (2026-09-03) ==== */
.crm-deals-board {
  gap: 0.55rem;
}
.crm-deals-stats {
  gap: 0.4rem;
}
.crm-deals-stats article {
  padding: 0.42rem 0.5rem;
  border-radius: 0.75rem;
  box-shadow: none;
}
.crm-deals-stats em {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.crm-deals-stats strong {
  margin-top: 0.08rem;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-deals-kanban {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  overflow-y: hidden;
  padding-bottom: 0;
  scroll-snap-type: none;
}
.crm-deals-column {
  flex: none !important;
  min-width: 0 !important;
  width: auto;
  border-radius: 0.8rem;
  background: #e8eef5;
}
.crm-deals-column-head {
  padding: 0.45rem 0.5rem 0.38rem;
}
.crm-deals-column-head h2 {
  font-size: 0.8rem;
}
.crm-deals-column-head span {
  font-size: 0.66rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-deals-column-body {
  gap: 0.35rem;
  padding: 0.38rem;
}
.crm-deal-card {
  padding: 0.42rem 0.45rem 0.38rem;
  border-radius: 0.65rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.crm-deal-card-top {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  min-width: 0;
}
.crm-deal-card-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-deal-card-move {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 0.12rem;
  margin-top: 0;
}
.crm-deal-move {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
}
.crm-deal-move-spacer {
  width: 1.35rem;
  height: 1.35rem;
}
.crm-deal-card-bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  margin-top: 0.18rem;
  min-width: 0;
}
.crm-deal-card-party {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-deal-card-amount {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  white-space: nowrap;
}
.crm-deal-card-win {
  display: block;
  margin-top: 0.08rem;
  font-style: normal;
  font-size: 0.62rem;
  color: #64748b;
}
.crm-deal-card-meta {
  display: none;
}
@media (max-width: 360px) {
  .crm-deals-kanban {
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
  }
}
/* ==== end modeb-deals-fit ==== */

/* ==== Profile theme switch row :: modeb-theme-switch (2026-09-03) ==== */
.user-menu-theme {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
}
.user-menu-theme > span {
  font-size: 0.9rem;
  font-weight: 650;
  color: #0f172a;
  letter-spacing: 0;
}
.user-menu-theme-picks {
  display: none;
}
.user-menu-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: #64748b;
}
.user-menu-theme-state {
  min-width: 1.6rem;
  font-size: 0.72rem;
  font-weight: 750;
  text-align: left;
}
.user-menu-theme-track {
  position: relative;
  width: 2.55rem;
  height: 1.45rem;
  border-radius: 999px;
  background: #cbd5e1;
  display: block;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.user-menu-theme-knob {
  position: absolute;
  top: 0.14rem;
  left: 0.14rem;
  width: 1.17rem;
  height: 1.17rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
  transition: transform 0.15s ease;
}
.user-menu-theme-switch.on {
  color: #2563eb;
}
.user-menu-theme-switch.on .user-menu-theme-track {
  background: #2563eb;
}
.user-menu-theme-switch.on .user-menu-theme-knob {
  transform: translateX(1.1rem);
}
html[data-theme="dark"] .user-menu-theme > span {
  color: #e8eef6 !important;
}
html[data-theme="dark"] .user-menu-theme-switch {
  color: #94a3b8;
}
html[data-theme="dark"] .user-menu-theme-switch.on {
  color: #93c5fd;
}
html[data-theme="dark"] .user-menu-theme-track {
  background: #334155;
}
html[data-theme="dark"] .user-menu-theme-switch.on .user-menu-theme-track {
  background: #3b82f6;
}
html[data-theme="dark"] .user-menu-theme-picks button,
html[data-theme="dark"] .user-menu-theme-picks button.on {
  display: none;
}
/* ==== end modeb-theme-switch ==== */

/* ==== Deals board fresh layout :: modeb-deals-fresh (2026-09-03) ==== */
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-body {
  background: #f3f5f8;
  padding: 0.15rem 0 0.35rem;
}
.crm-deals-board {
  gap: 0.7rem;
}
.crm-deals-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 1.05rem;
  overflow: hidden;
  box-shadow: none;
}
.crm-deals-stats article {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.55rem 0.55rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.crm-deals-stats article + article {
  border-left: 1px solid #eef2f6;
}
.crm-deals-stat-icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.6rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #2563eb;
  background: #eff6ff;
}
.crm-deals-stat-icon[data-tone="amber"] {
  color: #b45309;
  background: #fffbeb;
}
.crm-deals-stat-icon[data-tone="green"] {
  color: #15803d;
  background: #f0fdf4;
}
.crm-deals-stats em {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.crm-deals-stats strong {
  margin-top: 0.02rem;
  font-size: 0.86rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.crm-deals-kanban {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.55rem;
  overflow-x: hidden !important;
}
.crm-deals-column {
  background: transparent;
  border-radius: 0;
  min-width: 0;
}
.crm-deals-column-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.15rem 0.15rem 0.45rem;
  background: transparent;
  border-top: 0;
}
.crm-deals-column-head h2 {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.crm-deals-column-head h2::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #94a3b8;
}
.crm-deals-column[data-tone="blue"] .crm-deals-column-head h2::before { background: #2563eb; }
.crm-deals-column[data-tone="yellow"] .crm-deals-column-head h2::before { background: #ca8a04; }
.crm-deals-column[data-tone="orange"] .crm-deals-column-head h2::before { background: #ea580c; }
.crm-deals-column[data-tone="purple"] .crm-deals-column-head h2::before { background: #7c3aed; }
.crm-deals-column[data-tone="green"] .crm-deals-column-head h2::before { background: #16a34a; }
.crm-deals-column[data-tone="rose"] .crm-deals-column-head h2::before { background: #e11d48; }
.crm-deals-column-head span {
  margin-top: 0.12rem;
  font-size: 0.68rem;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.crm-deals-column-head b {
  flex: 0 0 auto;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #e8eef5;
  color: #334155;
  font-size: 0.68rem;
  font-weight: 750;
  display: inline-grid;
  place-items: center;
}
.crm-deals-column[data-tone="blue"] .crm-deals-column-head b { background: #dbeafe; color: #1d4ed8; }
.crm-deals-column[data-tone="green"] .crm-deals-column-head b { background: #dcfce7; color: #15803d; }
.crm-deals-column[data-tone="rose"] .crm-deals-column-head b { background: #ffe4e6; color: #be123c; }
.crm-deals-column-body {
  gap: 0.45rem;
  padding: 0;
  background: transparent;
}
.crm-deal-card {
  padding: 0.62rem 0.65rem 0.55rem 0.75rem;
  border-radius: 0.9rem;
  border: 1px solid #e8eef4;
  border-left: 3px solid #cbd5e1;
  box-shadow: none;
  background: #fff;
}
.crm-deal-card[data-tone="blue"] { border-left-color: #3b82f6; }
.crm-deal-card[data-tone="yellow"] { border-left-color: #eab308; }
.crm-deal-card[data-tone="orange"] { border-left-color: #f97316; }
.crm-deal-card[data-tone="purple"] { border-left-color: #8b5cf6; }
.crm-deal-card[data-tone="green"] { border-left-color: #22c55e; }
.crm-deal-card[data-tone="rose"] { border-left-color: #fb7185; }
.crm-deal-card-title {
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
.crm-deal-card-party {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  margin: 0.28rem 0 0;
  color: #64748b;
  font-size: 0.68rem;
}
.crm-deal-card-party span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-deal-card-party svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.crm-deal-card-bottom {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.45rem;
}
.crm-deal-card-amount {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
}
.crm-deal-card-win {
  display: inline;
  margin: 0;
  font-size: 0.62rem;
  color: #64748b;
}
.crm-deal-card-move {
  margin-left: auto;
  display: flex;
  gap: 0.1rem;
}
.crm-deal-move {
  width: 1.4rem;
  height: 1.4rem;
  border: 0;
  background: #f8fafc;
  color: #64748b;
}
html[data-theme="dark"] .crm-deals-stats,
html[data-theme="dark"] .crm-deal-card {
  background: #1b2940 !important;
  border-color: #2a3a52 !important;
}
html[data-theme="dark"] .crm-deals-stats article + article {
  border-left-color: #2a3a52;
}
html[data-theme="dark"] .crm-deals-stat-icon {
  background: #152033;
}
html[data-theme="dark"] .crm-deal-card-amount {
  background: #152033;
  color: #e8eef6;
}
html[data-theme="dark"] .crm-deals-column-head b {
  background: #152033;
  color: #cbd5e1;
}
/* ==== end modeb-deals-fresh ==== */

/* ==== Add Deal form even grid :: modeb-deal-form-align (live-only) ==== */
.overlay.overlay-deal-form {
  align-items: center;
  padding: 1rem 1rem calc(4.6rem + env(safe-area-inset-bottom, 0px));
}
.sheet.sheet-deal-form {
  width: min(var(--mode-b-core-width, 900px), calc(100% - 1.5rem));
  max-width: var(--mode-b-core-width, 900px);
  max-height: 100%;
  overflow: hidden;
  gap: 0.65rem;
  padding: 1rem 1.35rem 1.2rem;
  border-radius: 1.25rem;
  box-sizing: border-box;
}
.sheet.sheet-deal-form .sheet-handle {
  display: none;
}
.sheet.sheet-deal-form .sheet-head-row h2 {
  font-size: 1.15rem;
}
.sheet.sheet-deal-form .sheet-body {
  padding: 0.15rem 0 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 100%;
}
.sheet.sheet-deal-form.sheet-activity-form {
  max-height: min(92dvh, 46rem);
}
.sheet.sheet-deal-form.sheet-activity-form .sheet-body {
  overflow-y: auto !important;
}
.lead-form.deal-form-flat {
  gap: 0.95rem;
}
.lead-form.deal-form-flat .deal-form-grid {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  width: 100%;
}
.lead-form.deal-form-flat .deal-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.95rem 1.1rem;
  width: 100%;
  min-width: 0;
}
.lead-form.deal-form-flat .deal-form-span,
.lead-form.deal-form-flat .deal-form-row > .field-with-mic,
.lead-form.deal-form-flat .field,
.lead-form.deal-form-flat .field-control {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.lead-form.deal-form-flat .field {
  gap: 0.4rem;
}
.lead-form.deal-form-flat .field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  min-height: 0;
}
.lead-form.deal-form-flat .field-label-row label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.74rem;
  font-weight: 650;
  color: #475569;
}
.lead-form.deal-form-flat .field-with-mic .voice-session {
  margin-left: 0;
  flex: 0 0 auto;
}
.lead-form.deal-form-flat .field-icon {
  color: #94a3b8 !important;
}
.lead-form.deal-form-flat .field[data-as='select'] .field-control {
  display: flex !important;
  width: 100% !important;
  max-width: 100%;
}
.lead-form.deal-form-flat .field[data-as='select'] select {
  width: 100% !important;
  max-width: 100%;
  field-sizing: fixed;
  flex: 1 1 auto;
}
.lead-form.deal-form-flat .field input,
.lead-form.deal-form-flat .field select {
  box-sizing: border-box;
  width: 100%;
  height: 2.6rem;
  min-height: 2.6rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.8rem;
}
.lead-form.deal-form-flat .field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 4.5rem;
  height: 4.5rem;
  max-height: 4.5rem;
  resize: none;
  border-radius: 0.8rem;
}
.lead-form.deal-form-flat .lead-form-actions {
  margin-top: 0.35rem;
  gap: 0.75rem;
}
.lead-form.deal-form-flat .lead-form-grid.deal-form-grid {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  width: 100%;
}
.lead-form.deal-form-flat .deal-form-row > .lead-phone-field,
.lead-form.deal-form-flat .lead-phone-field,
.lead-form.deal-form-flat .lead-phone-row {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.lead-form.deal-form-flat .lead-phone-field .field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.lead-form.deal-form-flat .lead-form-steps {
  margin-bottom: 0.35rem;
}
@media (max-width: 36rem) {
  .lead-form.deal-form-flat .deal-form-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ==== end modeb-deal-form-align ==== */

/* ==== Deals compact list + stage filters :: modeb-deals-list (live-only) ==== */
.crm-deals-list-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  gap: 0.55rem;
}
.crm-deals-list-page .crm-deals-kanban {
  display: none !important;
}
.crm-deals-toolbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.crm-deals-stage-tabs {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.1rem;
  scrollbar-width: none;
}
.crm-deals-stage-tabs::-webkit-scrollbar {
  display: none;
}
.crm-deals-stage-tabs button {
  flex: 0 0 auto;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.crm-deals-stage-tabs button.on {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.crm-deals-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-bottom: 0.4rem;
}
.crm-deals-empty {
  margin: 1rem 0.2rem;
  color: #64748b;
  font-size: 0.85rem;
}
.crm-deals-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.45rem 0.55rem;
  background: #fff;
  border: 1px solid #e8eef4;
  border-left: 3px solid #94a3b8;
  border-radius: 0.8rem;
  padding: 0.55rem 0.7rem;
}
.crm-deals-row[data-tone="blue"] { border-left-color: #3b82f6; }
.crm-deals-row[data-tone="green"] { border-left-color: #22c55e; }
.crm-deals-row[data-tone="rose"] { border-left-color: #fb7185; }
.crm-deals-row[data-tone="yellow"] { border-left-color: #eab308; }
.crm-deals-row[data-tone="orange"] { border-left-color: #f97316; }
.crm-deals-row[data-tone="purple"] { border-left-color: #8b5cf6; }
.crm-deals-row-main {
  min-width: 0;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.crm-deals-row-main strong {
  font-size: 0.84rem;
  font-weight: 750;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-deals-row-main span {
  font-size: 0.7rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-deals-row-amount {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  white-space: nowrap;
}
.crm-deals-row-stage {
  font-style: normal;
  font-size: 0.65rem;
  font-weight: 750;
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  background: #f1f5f9;
  color: #334155;
  white-space: nowrap;
}
.crm-deals-row-stage[data-tone="green"] { background: #dcfce7; color: #15803d; }
.crm-deals-row-stage[data-tone="rose"] { background: #ffe4e6; color: #be123c; }
.crm-deals-row-stage[data-tone="blue"] { background: #dbeafe; color: #1d4ed8; }
.crm-deals-row-stage[data-tone="yellow"] { background: #fefce8; color: #a16207; }
.crm-deals-row-stage[data-tone="orange"] { background: #fff7ed; color: #c2410c; }
.crm-deals-row-stage[data-tone="purple"] { background: #f5f3ff; color: #6d28d9; }
.crm-deals-row.selectable-record {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}
.crm-deals-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
html[data-theme="dark"] .crm-deals-row {
  background: #1b2940 !important;
  border-color: #2a3a52 !important;
}
html[data-theme="dark"] .crm-deals-row-main strong,
html[data-theme="dark"] .crm-deals-row-amount {
  color: #e8eef6;
}
html[data-theme="dark"] .crm-deals-stage-tabs button {
  background: #152033;
  border-color: #2a3a52;
  color: #cbd5e1;
}
.crm-deals-toolbar {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}
.crm-deals-search-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 2.45rem;
  padding: 0 0.8rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  background: #fff;
  color: #64748b;
}
.crm-deals-search-bar input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.86rem;
  color: #0f172a;
  outline: none;
}
.crm-deals-stage-select {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.45rem;
  padding: 0 2.1rem 0 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  background: #fff;
  color: #0f172a;
}
.crm-deals-stage-select select {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 750;
  color: #0f172a;
  outline: none;
  cursor: pointer;
}
.crm-deals-stage-select-chevron {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: #64748b;
  pointer-events: none;
}
.crm-deals-stage-select-chevron svg {
  width: 100%;
  height: 100%;
  display: block;
}
.crm-deals-list-page .crm-deals-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  gap: 0.5rem;
}
.crm-deals-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name amount"
    "name stage";
  padding: 0.7rem 0.8rem;
  border-radius: 0.95rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.crm-deals-row-main { grid-area: name; }
.crm-deals-row-amount {
  grid-area: amount;
  justify-self: end;
  font-weight: 750;
}
.crm-deals-row-stage {
  grid-area: stage;
  justify-self: end;
  align-self: start;
}
.crm-deals-row.selectable-record {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "sel name amount"
    "sel name stage";
}
.crm-deals-pagination {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  padding-bottom: 0.15rem;
}
html[data-theme="dark"] .crm-deals-search-bar,
html[data-theme="dark"] .crm-deals-stage-select {
  background: #152033;
  border-color: #2a3a52;
  color: #cbd5e1;
}
html[data-theme="dark"] .crm-deals-search-bar input,
html[data-theme="dark"] .crm-deals-stage-select select {
  color: #e8eef6;
}
/* ==== end modeb-deals-list ==== */

/* ==== CRM Tasks add form + list :: modeb-tasks-form (live-only) ==== */
.crm-tasks-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 0.55rem;
}
.crm-tasks-table {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  overflow-x: hidden;
}
.crm-tasks-head,
.crm-tasks-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(4.8rem, 0.75fr) minmax(4.4rem, 0.55fr) 6.4rem;
  align-items: center;
  column-gap: 0.45rem;
}
.crm-tasks-head {
  padding: 0.4rem 0.85rem;
  border-radius: 0.95rem;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
  border: 1px solid #e6edf5;
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(15, 23, 42, 0.04);
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.01em;
  text-transform: none;
}
.crm-tasks-head span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.crm-tasks-head[data-selecting="true"] {
  padding-left: calc(0.85rem + 1.65rem);
}
.crm-tasks-head span[data-col="action"] {
  justify-content: flex-end;
}
.crm-tasks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.crm-tasks-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(4.8rem, 0.75fr) minmax(4.4rem, 0.55fr) 6.4rem;
  align-items: center;
  gap: 0.45rem;
  background: #fff;
  border: 1px solid #e8eef4;
  border-left: 3px solid #f59e0b;
  border-radius: 0.9rem;
  padding: 0.62rem 0.8rem;
}
.crm-tasks-row[data-status="completed"] {
  border-left-color: #22c55e;
}
.crm-tasks-row-main {
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.crm-tasks-row-main strong {
  font-size: 0.88rem;
  font-weight: 750;
  color: #0f172a;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-tasks-when {
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 650;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-tasks-status {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 750;
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  background: #ffedd5;
  color: #c2410c;
}
.crm-tasks-status[data-status="completed"] {
  background: #dcfce7;
  color: #15803d;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row {
  background: linear-gradient(180deg, #fbfaff 0%, #fff 72%);
  border: 1px solid #ece7f8;
  border-left: 0;
  border-radius: 1rem;
  padding: 0.62rem 0.8rem 0.62rem 0.95rem;
  box-shadow: 0 8px 18px rgba(76, 29, 149, 0.05);
  position: relative;
  overflow: hidden;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-head {
  padding-left: 0.95rem;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  bottom: 0.55rem;
  width: 0.28rem;
  border-radius: 999px;
  background: #818cf8;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row[data-priority="low"]::before {
  background: #2dd4bf;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row[data-priority="normal"]::before {
  background: #818cf8;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row[data-priority="high"]::before {
  background: #f43f5e;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row[data-status="completed"] {
  background: linear-gradient(180deg, #f4fbf6 0%, #fff 78%);
  border-color: #dbeee0;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row-main {
  min-width: 0;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row-main strong {
  font-size: 0.9rem;
  font-weight: 780;
  color: #1e1b4b;
}
.crm-tasks-nest {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-left: 0.15rem;
}
.crm-tasks-nest-rail {
  width: 0.7rem;
  height: 0.7rem;
  border-left: 1.5px solid #c4b5fd;
  border-bottom: 1.5px solid #c4b5fd;
  border-bottom-left-radius: 0.28rem;
  display: block;
  flex: 0 0 auto;
  margin-top: -0.15rem;
}
.crm-tasks-priority {
  justify-self: start;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0.4rem;
  padding: 0.12rem 0.45rem 0.12rem 0.55rem;
}
.crm-tasks-priority::before {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 0.08rem;
  transform: rotate(45deg);
  display: inline-block;
  margin-right: 0.32rem;
  vertical-align: 0.05rem;
}
.crm-tasks-priority[data-priority="low"] {
  background: #ccfbf1;
  color: #0f766e;
}
.crm-tasks-priority[data-priority="low"]::before {
  background: #14b8a6;
}
.crm-tasks-priority[data-priority="normal"] {
  background: #e0e7ff;
  color: #4338ca;
}
.crm-tasks-priority[data-priority="normal"]::before {
  background: #6366f1;
}
.crm-tasks-priority[data-priority="high"] {
  background: #ffe4e6;
  color: #be123c;
}
.crm-tasks-priority[data-priority="high"]::before {
  background: #f43f5e;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-status {
  border-radius: 0.45rem;
  background: #eef2ff;
  color: #4338ca;
}
.crm-tasks-complete {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.crm-tasks-edit {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
}
.crm-tasks-row-acts {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem;
}
.crm-tasks-delete {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: #fff1f2;
  color: #e11d48;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.crm-tasks-bulk {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid #bfe8e4;
  border-radius: 0.8rem;
  background: #ecfeff;
  font-size: 0.78rem;
  font-weight: 650;
  color: #0f766e;
}
.crm-tasks-bulk-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  border-radius: 0.55rem;
  background: #0f766e;
  color: #fff;
  font: inherit;
  font-weight: 750;
  padding: 0.38rem 0.75rem;
  cursor: pointer;
}
.crm-tasks-bulk-clear {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #0f766e;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}
.sheet.sheet-deal-form.sheet-task-bulk {
  width: min(28rem, calc(100% - 1.5rem));
}
.sheet.sheet-deal-form.sheet-task-bulk .sheet-body {
  overflow: hidden auto !important;
  max-height: min(72dvh, 40rem);
}
.lead-form.deal-form-flat .crm-task-bulk-lead {
  margin: 0;
  color: #94a3b8;
  font-size: 0.88rem;
}
.lead-form.deal-form-flat .crm-task-bulk-lead strong {
  color: #334155;
  font-weight: 750;
}
.lead-form.deal-form-flat .crm-task-bulk-delete {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  font-weight: 750;
  color: #0f172a;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e8eef4;
}
.lead-form.deal-form-flat .crm-task-bulk-delete input {
  width: 1rem;
  height: 1rem;
  accent-color: #2563eb;
}
.lead-form.deal-form-flat .crm-task-bulk-actions {
  justify-content: stretch;
  margin-top: 0.2rem;
}
.lead-form.deal-form-flat .crm-task-bulk-actions .primary-btn {
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 0.9rem;
  padding: 0.78rem 1.2rem;
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

.sheet-reminder-form .reminder-form-actions {
  justify-content: flex-start;
}
.sheet-reminder-form .reminder-form-actions .primary-btn {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
html[data-theme="dark"] .crm-tasks-head {
  background: linear-gradient(180deg, #24344c 0%, #1b2940 100%);
  border-color: #334155;
  color: #94a3b8;
  box-shadow: none;
}
html[data-theme="dark"] .crm-tasks-row {
  background: #1b2940;
  border-color: #2a3a52;
}
html[data-theme="dark"] .crm-tasks-row-main strong {
  color: #e8eef6;
}
html[data-theme="dark"] .crm-tasks-when {
  color: #94a3b8;
}
html[data-theme="dark"] .sa-form[data-screen="crm-tasks-list"] .crm-tasks-row {
  background: #172033;
  border-color: #2a3a52;
  box-shadow: none;
}
.crm-task-assignee {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  position: relative;
}
.crm-task-assignee > label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
}
.crm-task-assignee-control {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0 2.5rem 0 2.35rem;
  border: 1px solid #dbe4f0;
  border-radius: 0.85rem;
  background: #fff;
}
.crm-task-assignee-icon {
  position: absolute;
  left: 0.7rem;
  color: #2563eb;
}
.crm-task-assignee-search-icon {
  position: absolute;
  right: 2.55rem;
  color: #94a3b8;
  pointer-events: none;
}
.crm-task-assignee-control input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  color: #0f172a;
  outline: none;
}
.crm-task-assignee-control .mic-btn,
.crm-task-assignee-control .voice-btn {
  position: absolute;
  right: 0.35rem;
}
.crm-task-assignee-options {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  top: calc(100% + 0.25rem);
  max-height: 14rem;
  overflow: auto;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: #0f2744;
  border-radius: 0.7rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}
.crm-task-assignee-options button {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-radius: 0.45rem;
  cursor: pointer;
  font: inherit;
}
.crm-task-assignee-options button strong {
  font-size: 0.86rem;
  font-weight: 700;
}
.crm-task-assignee-options button span {
  font-size: 0.72rem;
  color: #cbd5e1;
}
.crm-task-assignee-options li[aria-selected="true"] button,
.crm-task-assignee-options button:hover {
  background: #93c5fd;
  color: #0f172a;
}
.crm-task-assignee-options li[aria-selected="true"] button span,
.crm-task-assignee-options button:hover span {
  color: #1e293b;
}
.crm-task-assignee-empty {
  padding: 0.55rem 0.65rem;
  color: #94a3b8;
  font-size: 0.8rem;
}
/* ==== end modeb-tasks-form ==== */

/* ==== Deals list modern cards :: modeb-deals-modern (live-only) ==== */
.crm-deals-list-page {
  gap: 0.75rem;
}
.crm-deals-list-page .crm-deals-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.crm-deals-list-page .crm-deals-stats article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.7rem 0.65rem 0.65rem;
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 1rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}
.crm-deals-list-page .crm-deals-stats article + article {
  border-left: 1px solid #e8eef5;
}
.crm-deals-list-page .crm-deals-stat-icon {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.7rem;
}
.crm-deals-list-page .crm-deals-stats em {
  display: block;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.crm-deals-list-page .crm-deals-stats strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-deals-list-page .crm-deals-list {
  gap: 0.65rem;
  padding: 0.1rem 0.05rem 0.6rem;
}
.crm-deals-list-page .crm-deals-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: none;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid #e8eef5;
  border-left: 0;
  border-radius: 1.1rem;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}
.crm-deals-list-page .crm-deals-row.selectable-record {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas: none;
}
.crm-deals-mark {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.8rem;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  background: #eff6ff;
  color: #1d4ed8;
}
.crm-deals-mark[data-tone="green"] { background: #ecfdf3; color: #15803d; }
.crm-deals-mark[data-tone="rose"] { background: #fff1f2; color: #be123c; }
.crm-deals-mark[data-tone="yellow"] { background: #fefce8; color: #a16207; }
.crm-deals-mark[data-tone="orange"] { background: #fff7ed; color: #c2410c; }
.crm-deals-mark[data-tone="purple"] { background: #f5f3ff; color: #6d28d9; }
.crm-deals-list-page .crm-deals-row-main {
  grid-area: auto;
  min-width: 0;
  gap: 0.22rem;
}
.crm-deals-list-page .crm-deals-row-main strong {
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.25;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.crm-deals-list-page .crm-deals-row-main span {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.76rem;
  font-weight: 550;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.crm-deals-list-page .crm-deals-row-main span svg {
  flex-shrink: 0;
  color: #94a3b8;
}
.crm-deals-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.32rem;
  min-width: 5.4rem;
}
.crm-deals-list-page .crm-deals-row-amount {
  grid-area: auto;
  justify-self: end;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.crm-deals-list-page .crm-deals-row-stage {
  grid-area: auto;
  justify-self: end;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  padding: 0.28rem 1.35rem 0.28rem 0.58rem;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  max-width: 8.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.35rem center;
  background-size: 0.75rem;
}
.crm-deals-stage-pick {
  display: inline-flex;
  justify-content: flex-end;
}
.crm-deals-list-page .crm-deals-row-stage:disabled {
  cursor: wait;
  opacity: 0.7;
}
.crm-deals-list-page .crm-deals-pagination {
  padding: 0.15rem 0 0.35rem;
}
html[data-theme="dark"] .crm-deals-list-page .crm-deals-stats article,
html[data-theme="dark"] .crm-deals-list-page .crm-deals-row {
  background: #1b2940 !important;
  border-color: #2a3a52 !important;
}
html[data-theme="dark"] .crm-deals-list-page .crm-deals-stats strong,
html[data-theme="dark"] .crm-deals-list-page .crm-deals-row-main strong,
html[data-theme="dark"] .crm-deals-list-page .crm-deals-row-amount {
  color: #e8eef6;
}
html[data-theme="dark"] .crm-deals-mark {
  background: #152033;
}
/* ==== end modeb-deals-modern ==== */

/* ==== Customer list profile marks :: modeb-customer-profiles (2026-09-04) ==== */
.crm-lead-avatar[data-profile],
.mode-b-shell .crm-leads-list .crm-lead-avatar[data-profile],
.sa-form[data-screen="crm-leads-list"] .crm-lead-avatar[data-profile],
.crm-contact-row-avatar[data-profile],
.crm-email-avatar[data-profile],
.crm-deals-mark[data-profile],
.crm-lead-profile-avatar[data-profile] {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 999px !important;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
  font-size: 0;
  display: inline-flex;
  align-items: stretch;
  justify-content: stretch;
  background: transparent !important;
  color: inherit;
}
.crm-lead-avatar[data-profile],
.mode-b-shell .crm-leads-list .crm-lead-avatar[data-profile],
.sa-form[data-screen="crm-leads-list"] .crm-lead-avatar[data-profile] {
  width: 2.55rem !important;
  height: 2.55rem !important;
}
.crm-contact-row-avatar[data-profile],
.crm-email-avatar[data-profile] {
  width: 2.2rem !important;
  height: 2.2rem !important;
}
.crm-deals-mark[data-profile] {
  width: 2.55rem !important;
  height: 2.55rem !important;
}
.crm-lead-profile-avatar[data-profile],
.crm-lead-detail-v2 .crm-lead-profile-avatar[data-profile] {
  width: 3.1rem !important;
  height: 3.1rem !important;
}
.crm-lead-avatar[data-profile] svg,
.crm-contact-row-avatar[data-profile] svg,
.crm-contact-row-avatar[data-profile] img,
.crm-email-avatar[data-profile] svg,
.crm-email-avatar[data-profile] img,
.crm-deals-mark[data-profile] svg,
.crm-lead-profile-avatar[data-profile] svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto;
}
.crm-contact-row-avatar[data-profile] img,
.crm-email-avatar[data-profile] img {
  object-fit: cover;
}
/* ==== end modeb-customer-profiles ==== */

/* ==== Deals list: restore page scroll (kanban used a locked 100dvh shell) ==== */
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) {
  overflow: visible !important;
  overflow-x: hidden !important;
  height: auto !important;
  max-height: none !important;
}
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) .sa-form-list,
.sa-form[data-screen="crm-opportunities-list"],
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-body,
.crm-deals-board,
.crm-deals-list-page {
  height: auto !important;
  max-height: none !important;
  min-height: 0;
  overflow: visible !important;
  flex: 0 1 auto;
}
.crm-deals-list,
.crm-deals-list-page .crm-deals-list {
  flex: 0 1 auto;
  min-height: 0;
  overflow: visible !important;
  padding-bottom: 1.25rem;
}
.crm-deals-list-page .crm-deals-pagination {
  padding-bottom: 0.85rem;
}
/* ==== end modeb-deals-page-scroll ==== */

/* ==== Deals / Tasks / Reminders header + matches Leads add icon ==== */
.mode-b-shell .crm-deals-title-actions .crm-leads-btn.icon-only,
.mode-b-shell .crm-leads-title-actions .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-btn.icon-only {
  flex: 0 0 auto;
  width: 2.65rem !important;
  height: 2.65rem !important;
  padding: 0 !important;
  gap: 0;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.mode-b-shell .crm-deals-title-actions .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .crm-leads-title-actions .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"] {
  background: #2563eb !important;
  border: 1px solid #2563eb !important;
  color: #fff !important;
}
.mode-b-shell .crm-deals-title-actions .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .crm-leads-title-actions .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover {
  background: #1d4ed8 !important;
}
.mode-b-shell .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-btn.icon-only svg {
  display: block;
}
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head {
  align-items: center;
}
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-icon-btn,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-icon-btn,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-icon-btn,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-icon-btn,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-icon-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid #e8eef4;
  background: #fff;
  color: #64748b;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-icon-btn:hover,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-icon-btn:hover,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-icon-btn:hover,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-icon-btn:hover,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-icon-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}
/* ==== end modeb-header-add-plus ==== */

/* ==== Activities list Mode B core :: live-only ==== */
.crm-act-page {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}
.crm-act-search,
.crm-act-status {
  width: 100%;
  box-sizing: border-box;
  height: 2.55rem;
  border-radius: 999px;
  border: 1px solid #e6edf5;
  background: #fff;
  color: #0f172a;
  padding: 0 0.95rem;
}
.crm-act-search::placeholder {
  color: #94a3b8;
}
.crm-act-tools {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.crm-act-btns {
  display: flex;
  gap: 0.45rem;
}
.crm-act-btns button {
  border: 1px solid #e6edf5;
  background: #fff;
  color: #334155;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
}
.crm-act-btns button:hover {
  background: #f8fafc;
  border-color: #dbe4f0;
}
.crm-act-btns button[data-kind="new"] {
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.35);
}
.crm-act-table {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.crm-act-cols,
.crm-act-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(4.6rem, 0.6fr) minmax(4.4rem, 0.6fr) minmax(5rem, 0.7fr) 7.2rem;
  gap: 0.45rem;
  align-items: center;
}
.crm-act-cols {
  padding: 0.4rem 0.85rem;
  border-radius: 0.95rem;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
  border: 1px solid #e6edf5;
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(15, 23, 42, 0.04);
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 720;
}
.crm-act-cols span {
  display: inline-flex;
  align-items: center;
}
.crm-act-cols span[data-col="action"] {
  justify-content: flex-end;
}
.crm-act-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sa-form[data-screen="crm-emails-list"] .crm-act-cols,
.sa-form[data-screen="crm-emails-list"] .crm-act-row {
  grid-template-columns: minmax(7.5rem, 1.15fr) minmax(4.4rem, 0.55fr) minmax(5.5rem, 0.9fr) minmax(5.5rem, 0.9fr) minmax(5rem, 0.85fr) 7.2rem;
}
.sa-form[data-screen="crm-emails-list"] .crm-act-row {
  border-left-color: #0ea5e9;
}
.sa-form[data-screen="crm-emails-list"] .crm-email-title {
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
}
.sa-form[data-screen="crm-emails-list"] .crm-email-subject {
  font-size: 0.76rem;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-b-shell .sa-form[data-screen="crm-emails-list"] .crm-act-page {
  min-width: 0;
}
@media (max-width: 860px) {
  .sa-form[data-screen="crm-emails-list"] .crm-act-cols,
  .sa-form[data-screen="crm-emails-list"] .crm-act-row {
    grid-template-columns: minmax(0, 1fr) 7.2rem;
  }
  .sa-form[data-screen="crm-emails-list"] .crm-act-cols span:nth-child(2),
  .sa-form[data-screen="crm-emails-list"] .crm-act-cols span:nth-child(3),
  .sa-form[data-screen="crm-emails-list"] .crm-act-cols span:nth-child(4),
  .sa-form[data-screen="crm-emails-list"] .crm-act-cols span:nth-child(5),
  .sa-form[data-screen="crm-emails-list"] .crm-act-type,
  .sa-form[data-screen="crm-emails-list"] .crm-act-channel,
  .sa-form[data-screen="crm-emails-list"] .crm-act-due,
  .sa-form[data-screen="crm-emails-list"] .crm-email-subject {
    display: none;
  }
}
.crm-act-row {
  background: #fff;
  border: 1px solid #e8eef4;
  border-left: 3px solid #6366f1;
  border-radius: 0.9rem;
  padding: 0.62rem 0.8rem;
}
.crm-act-title {
  min-width: 0;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.crm-act-title strong {
  font-size: 0.88rem;
  font-weight: 750;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-act-title em {
  font-style: normal;
  width: fit-content;
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 750;
}
.crm-act-title em[data-status="completed"] {
  background: #dcfce7;
  color: #15803d;
}
.crm-act-title em[data-status="open"] {
  background: #dbeafe;
  color: #1d4ed8;
}
.crm-act-title em[data-status="lost"] {
  background: #ffe4e6;
  color: #e11d48;
}
.crm-act-type,
.crm-act-channel,
.crm-act-due {
  font-size: 0.76rem;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-list-row-with-acts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
}
.crm-act-row > .crm-act-acts,
.crm-list-row-with-acts > .crm-act-acts,
.crm-tasks-row > .crm-tasks-row-acts,
.crm-act-acts,
.crm-list-row-with-acts .crm-act-acts,
.crm-tasks-row-acts {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.28rem;
  width: 100%;
  min-width: 4.4rem;
}
.crm-act-edit,
.crm-act-del,
.crm-act-acts > .crm-act-edit,
.crm-act-acts > .crm-act-del,
.crm-tasks-row-acts > .crm-tasks-edit,
.crm-tasks-row-acts > .crm-tasks-delete {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  text-decoration: none;
  cursor: pointer;
}
.crm-act-edit {
  background: #eff6ff;
  color: #2563eb;
}
.crm-act-del {
  background: #fff1f2;
  color: #e11d48;
}
@media (max-width: 640px) {
  .crm-act-cols,
  .crm-act-row {
    grid-template-columns: minmax(0, 1fr) 7.2rem;
  }
  .crm-act-cols span:nth-child(n + 2):not([data-col="action"]),
  .crm-act-type,
  .crm-act-channel,
  .crm-act-due {
    display: none;
  }
  .crm-act-cols span[data-col="action"],
  .crm-act-acts,
  .crm-act-row > .crm-act-acts {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}
.crm-act-cols[data-selecting="true"] {
  padding-left: calc(0.85rem + 1.65rem);
}
.sa-form[data-screen="crm-tasks-list"] .crm-act-row {
  border-left-color: #f59e0b;
}
.sa-form[data-screen="crm-reminders-list"] .crm-act-row {
  border-left-color: #06b6d4;
}
.sa-form[data-screen="crm-opportunities-list"] .crm-act-row {
  border-left-color: #3b82f6;
}
.sa-form[data-screen="crm-reminders-list"] .crm-act-cols,
.sa-form[data-screen="crm-reminders-list"] .crm-act-row {
  grid-template-columns: minmax(0, 1.4fr) minmax(5rem, 0.8fr) minmax(4.4rem, 0.55fr) 6.8rem;
}
.crm-act-stage {
  display: block;
  min-width: 0;
}
.crm-act-stage select {
  width: 100%;
  max-width: 9.5rem;
  appearance: none;
  border: 1px solid #e6edf5;
  background: #f8fafc;
  color: #0f172a;
  border-radius: 999px;
  padding: 0.28rem 1.6rem 0.28rem 0.7rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 0.85rem;
}
.sa-form[data-screen="crm-pipelines-list"] .crm-act-cols,
.sa-form[data-screen="crm-pipelines-list"] .crm-act-row {
  grid-template-columns: minmax(0, 1.4fr) minmax(4.4rem, 0.55fr) minmax(4.8rem, 0.6fr) 7.2rem;
}
.sa-form[data-screen="crm-pipelines-list"] .crm-act-row {
  border-left-color: #8b5cf6;
}
.mode-b-shell .sa-form[data-screen="crm-pipelines-list"] .crm-act-page {
  min-width: 0;
}
.sa-form[data-screen="crm-stages-list"] .crm-act-cols,
.sa-form[data-screen="crm-stages-list"] .crm-act-row {
  grid-template-columns: minmax(0, 1.4fr) minmax(5.2rem, 0.8fr) minmax(4.4rem, 0.55fr) 7.2rem;
}
.sa-form[data-screen="crm-stages-list"] .crm-act-row {
  border-left-color: #8b5cf6;
}
@media (max-width: 640px) {
  .crm-act-table,
  .sa-form[data-screen="crm-notes-list"] .crm-tasks-table {
    overflow-x: hidden;
  }
  .sa-form[data-screen="crm-reminders-list"] .crm-act-cols,
  .sa-form[data-screen="crm-reminders-list"] .crm-act-row,
  .sa-form[data-screen="crm-pipelines-list"] .crm-act-cols,
  .sa-form[data-screen="crm-pipelines-list"] .crm-act-row,
  .sa-form[data-screen="crm-emails-list"] .crm-act-cols,
  .sa-form[data-screen="crm-emails-list"] .crm-act-row,
  .sa-form[data-screen="crm-stages-list"] .crm-act-cols,
  .sa-form[data-screen="crm-stages-list"] .crm-act-row,
  .sa-form[data-screen="crm-tasks-list"] .crm-act-cols,
  .sa-form[data-screen="crm-tasks-list"] .crm-act-row {
    grid-template-columns: minmax(0, 1fr) 7.2rem;
  }
  .sa-form[data-screen="crm-reminders-list"] .crm-act-cols span:nth-child(n + 2):not([data-col="action"]),
  .sa-form[data-screen="crm-pipelines-list"] .crm-act-cols span:nth-child(n + 2):not([data-col="action"]),
  .sa-form[data-screen="crm-emails-list"] .crm-act-cols span:nth-child(n + 2):not([data-col="action"]),
  .sa-form[data-screen="crm-stages-list"] .crm-act-cols span:nth-child(n + 2):not([data-col="action"]),
  .sa-form[data-screen="crm-emails-list"] .crm-email-subject {
    display: none;
  }
  .sa-form[data-screen="crm-notes-list"] .crm-tasks-head,
  .sa-form[data-screen="crm-notes-list"] .crm-tasks-row {
    grid-template-columns: minmax(0, 1fr) 5.6rem;
  }
  .sa-form[data-screen="crm-notes-list"] .crm-tasks-head span:nth-child(2),
  .sa-form[data-screen="crm-notes-list"] .crm-tasks-head span:nth-child(3),
  .sa-form[data-screen="crm-notes-list"] .crm-tasks-when,
  .sa-form[data-screen="crm-notes-list"] .crm-tasks-status {
    display: none;
  }
}
/* ==== end activities Mode B core ==== */

/* ==== Meetings list modern :: live-only ==== */
.sa-form[data-screen="crm-meetings-list"] > .sa-form-head {
  display: flex;
  align-items: center;
}
.sa-form[data-screen="crm-meetings-list"] .crm-meet-modern .crm-tasks-head,
.sa-form[data-screen="crm-meetings-list"] .crm-meet-modern .crm-tasks-row {
  grid-template-columns: minmax(0, 1.15fr) minmax(4.2rem, 0.85fr) minmax(5.2rem, 0.8fr) minmax(5.2rem, 0.8fr) 7.2rem;
}
.sa-form[data-screen="crm-meetings-list"] .crm-meet-modern .crm-tasks-row {
  border-left-color: #3b82f6;
}
.sa-form[data-screen="crm-meetings-list"] .crm-leads-btn.icon-only {
  width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  border-radius: 999px;
  background: #2563eb;
  border: 1px solid #2563eb;
  color: #fff;
}
@media (max-width: 720px) {
  .sa-form[data-screen="crm-meetings-list"] .crm-meet-modern .crm-tasks-head,
  .sa-form[data-screen="crm-meetings-list"] .crm-meet-modern .crm-tasks-row {
    grid-template-columns: minmax(0, 1fr) 7.2rem;
  }
  .sa-form[data-screen="crm-meetings-list"] .crm-meet-modern .crm-tasks-head span:nth-child(2),
  .sa-form[data-screen="crm-meetings-list"] .crm-meet-modern .crm-tasks-head span:nth-child(3),
  .sa-form[data-screen="crm-meetings-list"] .crm-meet-modern .crm-tasks-head span:nth-child(4),
  .sa-form[data-screen="crm-meetings-list"] .crm-meet-modern .crm-tasks-when {
    display: none;
  }
}
/* ==== end meetings list modern ==== */

/* ==== Estimate/invoice add form: nested steps, no sheet scroll ==== */
.sheet.sheet-estimate-stepped {
  overflow: hidden;
}
.sheet.sheet-estimate-stepped .sheet-body {
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  max-height: min(78dvh, 36rem);
}
.sheet.sheet-estimate-stepped .lead-form-stepped {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.lead-form .lead-form-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}
.lead-form .lead-form-step {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
}
.lead-form .lead-form-step em {
  font-style: normal;
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 0.68rem;
}
.lead-form .lead-form-step.active,
.lead-form .lead-form-step[data-on] {
  color: #0f172a;
}
.lead-form .lead-form-step.active em,
.lead-form .lead-form-step[data-on] em {
  background: #2563eb;
  color: #fff;
}
.sheet.sheet-estimate-stepped .lead-form-panel {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.sheet.sheet-estimate-stepped .lead-form-panel[data-step="items"] {
  overflow-y: auto;
  scrollbar-width: none;
}
.sheet.sheet-estimate-stepped .lead-form-panel[data-step="items"]::-webkit-scrollbar {
  display: none;
}
.sheet.sheet-estimate-stepped .lead-form-actions {
  flex-shrink: 0;
  margin-top: auto;
}

/* ==== Estimate/invoice print document (clean full-screen PY UI) ==== */
.overlay.overlay-commerce-print {
  align-items: stretch;
  justify-content: center;
  padding: 0 !important;
  background: #eef3f8;
  z-index: 320;
  overflow: hidden;
}
.commerce-print-screen {
  width: min(100%, var(--mode-b-core-width, 900px));
  max-width: var(--mode-b-core-width, 900px);
  height: 100%;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #f4f7fb;
  box-shadow: 0 0 0 1px #e8eef5;
}
.commerce-print-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem 0.55rem;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #e8eef5;
  border-radius: 0;
  z-index: 2;
}
.commerce-print-toolbar-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1 1 auto;
}
.commerce-print-titles {
  min-width: 0;
}
.commerce-print-toolbar h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 750;
  color: #12202b;
  line-height: 1.1;
}
.commerce-print-titles p {
  margin: 0.12rem 0 0;
  font-size: 0.75rem;
  font-weight: 650;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.commerce-print-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  align-items: center;
  flex: 0 0 auto;
}
.commerce-print-wa {
  border: 0;
  border-radius: 999px;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 0.55rem;
  background: #16a34a;
  color: #fff;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.commerce-print-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.75rem 0.75rem 1rem;
}
.commerce-print-paper {
  background: #fff;
  border: 1px solid #e8eef4;
  border-radius: 1.05rem;
  min-height: unset;
  width: 100%;
  max-width: none;
  padding: 1.05rem 1rem 1.2rem;
  color: #0f172a;
  box-sizing: border-box;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.commerce-print-brand {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #e2e8f0;
}
.commerce-print-company {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #2563eb;
}
.commerce-print-logo {
  display: block;
  max-height: 80px;
  max-width: 260px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.commerce-print-kind {
  text-align: right;
}
.commerce-print-kind > p:first-child {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #2563eb;
}
.commerce-print-meta {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 0.85rem;
  margin: 1rem 0 1.05rem;
}
.commerce-print-label {
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}
.commerce-print-meta dl {
  margin: 0;
  display: grid;
  gap: 0.45rem;
  text-align: right;
}
.commerce-print-meta dt {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}
.commerce-print-meta dd {
  margin: 0.05rem 0 0;
  font-weight: 700;
}
.commerce-print-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.commerce-print-lines > li {
  border: 1px solid #e8eef4;
  border-radius: 0.85rem;
  padding: 0.7rem 0.75rem;
  background: #f8fafc;
}
.commerce-print-line-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.commerce-print-line-top strong {
  min-width: 0;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.commerce-print-line-top span {
  flex: 0 0 auto;
  font-weight: 800;
  color: #0f172a;
}
.commerce-print-line-meta {
  margin: 0.55rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}
.commerce-print-line-meta div {
  min-width: 0;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 0.65rem;
  padding: 0.35rem 0.45rem;
}
.commerce-print-line-meta dt {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.commerce-print-line-meta dd {
  margin: 0.12rem 0 0;
  font-size: 0.78rem;
  font-weight: 750;
  color: #0f172a;
  overflow-wrap: anywhere;
}
.commerce-print-line-meta dd em {
  display: block;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 650;
  color: #64748b;
  margin-top: 0.08rem;
}
.commerce-print-line-note {
  margin: 0.3rem 0 0;
  color: #64748b;
  font-size: 0.75rem;
  line-height: 1.35;
}
.commerce-print-totals {
  margin-left: auto;
  margin-top: 0.85rem;
  width: min(16rem, 100%);
  display: grid;
  gap: 0.35rem;
  font-size: 0.85rem;
}
.commerce-print-totals p {
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: #475569;
}
.commerce-print-total {
  font-weight: 800;
  color: #0f172a !important;
  padding-top: 0.35rem;
  border-top: 1px solid #e2e8f0;
}
.commerce-print-notes {
  margin-top: 1.1rem;
  font-size: 0.82rem;
}
.commerce-print-foot {
  flex: 0 0 auto;
  padding: 0.7rem 0.75rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid #e8eef5;
}
.commerce-print-foot .primary-btn {
  width: 100%;
}
@media print {
  body * {
    visibility: hidden;
  }
  .commerce-print-paper,
  .commerce-print-paper * {
    visibility: visible;
  }
  .overlay.overlay-commerce-print,
  .commerce-print-screen,
  .commerce-print-body {
    position: static !important;
    background: #fff;
    overflow: visible !important;
    height: auto;
    padding: 0;
  }
  .commerce-print-paper {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: auto;
    border: 0;
    box-shadow: none;
  }
  .no-print {
    display: none !important;
  }
}

/* ==== Estimate customer searchable select ==== */
.commerce-customer-picker {
  position: relative;
}
.commerce-customer-menu {
  position: fixed;
  z-index: 260;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  max-height: min(18rem, calc(100dvh - 1.5rem));
  overflow: auto;
  background: #fff;
  border: 1px solid #d7e2ee;
  border-radius: 0.85rem;
  box-shadow: 0 16px 40px color-mix(in srgb, #0f172a 18%, transparent);
}
.commerce-customer-menu li {
  margin: 0;
}
.commerce-customer-menu button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0.45rem 0.75rem;
  text-align: left;
  cursor: pointer;
  color: #0f172a;
}
.commerce-customer-menu button:hover,
.commerce-customer-menu button[aria-selected="true"] {
  background: #eff6ff;
}
.commerce-customer-menu .muted {
  padding: 0.45rem 0.75rem;
}
.sa-form.crm-fb-shell > .sa-form-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0 0 0.7rem;
  border-bottom: 1px solid #eef2f6;
}
.sa-form.crm-fb-shell > .sa-form-head .sa-form-pict {
  display: none;
}
.sa-form.crm-fb-shell > .sa-form-head h1 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 750;
  text-align: left;
  color: #163a5f;
}
.sa-form.crm-fb-shell > .sa-form-head .sa-form-titles {
  flex: 1;
  min-width: 0;
}
.crm-fb-head-actions {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-left: auto;
  flex-shrink: 0;
}
.sa-form.crm-fb-shell .crm-fb-head-actions .primary-btn {
  width: auto;
  min-width: 4.75rem;
  min-height: 2.3rem;
  padding: 0.4rem 1.05rem;
}
.crm-fb-print-header {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #fff;
}
.crm-fb-print-header h2 {
  margin: 0;
  font-size: 1rem;
  color: #163a5f;
}
.crm-fb-form-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.crm-fb-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.4rem 0.95rem;
  border-radius: 0.8rem;
  border: 1.5px solid #c4b5fd;
  background: #f5f3ff;
  color: #5b21b6;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.crm-fb-print-save {
  width: auto;
  min-width: 7rem;
  min-height: 2.3rem;
  padding: 0.4rem 1rem;
  justify-self: start;
}
.crm-print-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.crm-print-fields label,
.crm-print-fields-wide {
  display: grid;
  gap: 0.28rem;
  font-size: 0.8rem;
  font-weight: 650;
  color: #334155;
}
.crm-print-fields-wide {
  grid-column: 1 / -1;
}
.crm-print-fields input,
.crm-print-fields textarea {
  min-height: 2.35rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.7rem;
  padding: 0.4rem 0.7rem;
  font: inherit;
}
.crm-print-form-link {
  margin: 0 0 0.5rem;
}
.crm-print-form-link a,
.crm-fb-print-header-row a {
  font-weight: 700;
  color: #2563eb;
}
.crm-print-editor {
  display: grid;
  gap: 1rem;
  max-width: var(--mode-b-core-width, 900px);
  margin-inline: auto;
  width: 100%;
}
.crm-print-editor.is-edit .crm-fb-print-header {
  width: 100%;
}
.crm-print-editor.is-preview {
  max-width: 52rem;
}
.crm-print-live {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}
.crm-print-live h2 {
  margin: 0;
  font-size: 1rem;
  color: #163a5f;
}
.crm-print-live .commerce-print-paper {
  margin: 0;
}
@media (max-width: 36rem) {
  .crm-print-fields {
    grid-template-columns: 1fr;
  }
}
.crm-fb-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.45rem;
}
.crm-fb-preview {
  display: inline-flex;
  align-items: center;
  min-height: 2.3rem;
  padding: 0 0.9rem;
  border-radius: 0.75rem;
  border: 1.5px solid #3b82f6;
  background: #eff6ff;
  color: #1d4ed8;
  font: inherit;
  font-weight: 700;
}
.crm-fb-canvas {
  background: #fff;
  border-radius: 1.1rem;
  padding: 1.05rem 0.95rem 1.2rem;
  box-shadow: 0 10px 28px #12202b0f;
  width: 100%;
  max-width: var(--mode-b-core-width, 900px);
  margin-inline: auto;
  box-sizing: border-box;
}
.crm-fb-page {
  width: 100%;
  max-width: var(--mode-b-core-width, 900px);
  margin-inline: auto;
}
.crm-fb-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 750;
  color: #163a5f;
}
.crm-fb-lede {
  margin: 0.2rem 0 0.85rem;
  color: #8a97a8;
  font-size: 0.9rem;
}
.crm-fb-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.9rem;
}
.crm-fb-step {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
}
.crm-fb-step.is-on {
  border-color: #3b82f6;
  color: #1d4ed8;
  background: #eff6ff;
}
.crm-fb-unused {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  color: #64748b;
}
.crm-fb-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 0.75rem;
}
.crm-fb-block {
  position: relative;
  grid-column: span 6;
  background: #f4f7fb;
  border: 1px solid transparent;
  border-radius: 0.85rem;
  padding: 0.85rem 0.9rem 0.95rem 1.7rem;
  min-width: 0;
}
.crm-fb-block[data-span="full"] {
  grid-column: 1 / -1;
}
.crm-fb-block.is-selected {
  background: #fff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}
.crm-fb-block.is-dragging {
  opacity: 0.7;
}
.crm-fb-handle {
  position: absolute;
  left: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 0.2rem;
  cursor: grab;
}
.crm-fb-grip {
  display: block;
  width: 12px;
  height: 16px;
  background: radial-gradient(#94a3b8 1.35px, transparent 1.55px);
  background-size: 6px 6px;
}
.crm-fb-knob {
  position: absolute;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
  z-index: 3;
}
.crm-fb-knob-n { top: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.crm-fb-knob-s { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.crm-fb-knob-e { right: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.crm-fb-knob-w { left: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.crm-fb-knob-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.crm-fb-knob-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.crm-fb-knob-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.crm-fb-knob-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.crm-fb-field-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 650;
  color: #64748b;
}
.crm-fb-field-label strong {
  color: #334155;
  font-weight: 700;
}
.crm-fb-field-label em {
  color: #dc2626;
  font-style: normal;
}
.crm-fb-input {
  width: 100%;
  min-height: 2.45rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.7rem;
  background: #fff;
  padding: 0.55rem 0.75rem;
  font: inherit;
  color: #94a3b8;
}
.crm-fb-size {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  margin-top: 0.55rem;
  align-items: center;
  justify-content: flex-end;
}
.crm-fb-remove {
  border: 0;
  background: transparent;
  color: #be185d;
  font: inherit;
  cursor: pointer;
}
.crm-fb-add {
  display: grid;
  place-items: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 5.2rem;
  margin-top: 0.85rem;
  border: 1.5px dashed #d5dee8;
  border-radius: 0.95rem;
  background: #fff;
  color: #94a3b8;
  font: inherit;
  cursor: pointer;
}
.crm-fb-add-plus {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1.5px solid #cbd5e1;
  display: grid;
  place-items: center;
}
@media (max-width: 36rem) {
  .crm-fb-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.overlay.overlay-crm-fb-modal {
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #0f172a66;
}
.crm-fb-modal {
  width: min(34rem, 100%);
  max-height: min(90dvh, 52rem);
  overflow: auto;
  background: #fff;
  border-radius: 1.15rem;
  padding: 1rem 1rem 1.1rem;
  box-shadow: 0 18px 48px #12202b22;
}
.crm-fb-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.crm-fb-modal-head h2 {
  margin: 0;
  font-size: 1.15rem;
  color: #163a5f;
}
.crm-fb-close {
  border: 0;
  background: transparent;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
}
.crm-fb-search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.85rem 0;
  background: #f1f5f9;
  border-radius: 0.85rem;
  padding: 0.45rem 0.7rem;
}
.crm-fb-search input {
  border: 0;
  background: transparent;
  width: 100%;
  font: inherit;
}
.crm-fb-catalog {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.crm-fb-catalog-card {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  text-align: left;
  border: 1px solid #e2e8f0;
  border-radius: 0.9rem;
  background: #fff;
  padding: 0.7rem;
  font: inherit;
  cursor: pointer;
}
.crm-fb-catalog-card:hover {
  border-color: #c4b5fd;
  background: #f8f5ff;
}
.crm-fb-catalog-card em {
  display: block;
  font-style: normal;
  color: #94a3b8;
  font-size: 0.78rem;
}
.crm-fb-catalog-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: #dbeafe;
  color: #2563eb;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 800;
}
.crm-fb-settings {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.85rem;
}
.crm-fb-settings-kind {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-weight: 700;
  color: #163a5f;
}
.crm-fb-settings label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 650;
  color: #334155;
}
.crm-fb-settings input,
.crm-fb-settings select {
  min-height: 2.4rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.7rem;
  padding: 0.45rem 0.7rem;
  font: inherit;
}
.crm-fb-check {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
}
.crm-fb-check input {
  width: 1.05rem;
  min-height: 1.05rem;
}
.crm-fb-options {
  display: grid;
  gap: 0.45rem;
}
.crm-fb-options p {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 650;
}
.crm-fb-option-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.crm-fb-option-row input {
  flex: 1;
  min-width: 0;
}
.crm-fb-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  align-items: center;
}
.crm-fb-modal .crm-fb-save {
  width: auto;
  min-width: 6.5rem;
  min-height: 2.4rem;
  padding: 0.45rem 1.1rem;
}
.crm-fb-choice-preview,
.crm-fb-live-field {
  display: grid;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: #334155;
}
.crm-fb-choice-preview label,
.crm-fb-live-field .crm-fb-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.crm-fb-live-field select[multiple] {
  min-height: 5.5rem;
}
.crm-fb-rating {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  font-size: 1.1rem;
  color: #7c3aed;
}
.crm-fb-rating label {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.commerce-builder-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.75rem 0 0;
}
.commerce-form-preview-kicker {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2563eb;
}
.commerce-form-preview-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: auto;
  max-height: min(70dvh, 36rem);
}
.commerce-layout-cell[data-span="full"] {
  grid-column: 1 / -1;
}
.commerce-layout-cell {
  width: min(100%, var(--fb-w, 100%));
  max-width: min(var(--fb-w, none), var(--mode-b-core-width, 900px));
}
.commerce-layout-cell .field-control,
.commerce-layout-cell .field-control input,
.commerce-layout-cell .field-control select,
.commerce-layout-cell .field > input {
  min-height: var(--fb-h, 2.45rem);
  height: var(--fb-h, auto);
}
.commerce-layout-cell textarea {
  min-height: var(--fb-h, 4rem);
  height: var(--fb-h, auto);
}

/* Estimate / invoice status chips (replaces "All 2 Â· Draft 2" text) */
.crm-commerce-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0 0 0.7rem;
}
.crm-commerce-metric {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  border-radius: 0.85rem;
  border: 1px solid #e8eef5;
  background: #f8fafc;
}
.crm-commerce-metric em {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.crm-commerce-metric strong {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-commerce-metric.is-paid {
  background: #ecfdf5;
  border-color: #bbf7d0;
}
.crm-commerce-metric.is-paid strong { color: #047857; }
.crm-commerce-metric.is-due {
  background: #fef2f2;
  border-color: #fecaca;
}
.crm-commerce-metric.is-due strong { color: #b91c1c; }
.crm-commerce-metric.is-open {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.crm-commerce-metric.is-open strong { color: #1d4ed8; }
.crm-commerce-status-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.1rem 0 0.15rem;
}
.crm-commerce-status-bar::-webkit-scrollbar {
  display: none;
}
.crm-commerce-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  border-radius: 999px;
  padding: 0.38rem 0.7rem 0.38rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.crm-commerce-status-chip.is-active {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: 0 0 0 3px color-mix(in srgb, #2563eb 12%, transparent);
}
.crm-commerce-status-count {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  background: #f1f5f9;
  color: #334155;
}
.crm-commerce-status-chip.is-active .crm-commerce-status-count {
  background: #2563eb;
  color: #fff;
}

/* ==== CRM overlay drawer nav :: modeb-crm-drawer-nav (2026-09-08) ==== */
.mode-b-nav-list {
  display: contents;
}
.mode-b-nav-toggle {
  display: none;
}
/* Single-column shell: nav never reserves layout width; content stays full-bleed. */
.mode-b-shell[data-mode-b="crm"] {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "header"
    "main"
    "footer";
  column-gap: 0 !important;
  row-gap: 0;
  width: 100% !important;
  max-width: var(--mode-b-core-width) !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
  padding-left: var(--mode-b-core-pad) !important;
  padding-right: var(--mode-b-core-pad) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.mode-b-shell[data-mode-b="crm"] > .workspace-header.mode-b-header,
.mode-b-shell[data-mode-b="crm"] > header.mode-b-header,
.mode-b-shell[data-mode-b="crm"] .workspace-header.mode-b-header {
  grid-area: header;
  position: sticky;
  top: 0;
  z-index: calc(var(--mode-b-chrome-z) + 2);
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Dim page when drawer is open (simple content difference). */
.mode-b-shell[data-mode-b="crm"] > .mode-b-nav-backdrop {
  display: none;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-backdrop {
  position: absolute;
  inset: 0;
  z-index: calc(var(--mode-b-chrome-z) + 2);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(15, 23, 42, 0.22);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.22s ease;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav-backdrop {
  display: block;
  opacity: 1;
  pointer-events: auto;
}
/* Overlay rail: never takes layout space; sits over content on the left. */
.mode-b-shell[data-mode-b="crm"] > .mode-b-nav,
.mode-b-shell[data-mode-b="crm"] .mode-b-nav {
  grid-area: unset !important;
  position: absolute !important;
  inset: auto !important;
  left: 0.35rem !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: calc(var(--mode-b-chrome-z) + 4);
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: min(78dvh, 28rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 1.35rem !important;
  box-shadow: none !important;
  overflow: visible !important;
  pointer-events: none;
  transition: background-color 0.22s ease, box-shadow 0.22s ease, padding 0.22s ease, gap 0.22s ease;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] > .mode-b-nav,
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav {
  gap: 0.7rem !important;
  padding: 0.45rem !important;
  background: #fff !important;
  border: 1px solid #e8eef5 !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14) !important;
  pointer-events: auto;
  animation: modeb-crm-drawer-slide-in 0.28s ease-out both;
}
@keyframes modeb-crm-drawer-slide-in {
  from {
    opacity: 0.55;
    transform: translate(-0.85rem, -50%);
  }
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  z-index: 2;
  order: 0;
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  margin: 0;
  padding: 0;
  border: 1px solid #e8eef5;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  pointer-events: auto;
  transition: box-shadow 0.15s ease, background-color 0.15s ease, transform 0.18s ease;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-toggle:hover {
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-toggle:active {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-toggle-icon {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  background: no-repeat center / contain;
  transition: transform 0.2s ease;
  /* Closed: right arrow â€” open menu */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>");
}
/* Open: same-spot close arrow (flipped) + menu icons stacked below. */
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav-toggle {
  width: 2.15rem;
  height: 2.15rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav-toggle-icon {
  width: 1.05rem;
  height: 1.05rem;
  /* Left arrow â€” close menu (same place as open control) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'><path d='M15 6 9 12l6 6'/></svg>");
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  position: relative;
  left: auto;
  top: auto;
  transform: translateX(-0.65rem);
  order: 1;
  width: auto;
  max-height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    transform 0.26s ease,
    max-height 0.26s ease,
    visibility 0.2s ease;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav-list {
  max-height: 22rem;
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  overflow: visible;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="false"] .mode-b-nav-list {
  display: none !important;
  pointer-events: none !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item {
  flex: 0 0 auto !important;
  width: 2rem !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 2rem !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background: #f8fafc !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  border: 1px solid #e8eef5 !important;
  color: #64748b !important;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(-0.55rem);
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item {
  opacity: 1;
  transform: translateX(0);
  animation: modeb-crm-nav-item-in 0.28s ease-out both;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(1) { animation-delay: 0.03s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(2) { animation-delay: 0.06s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(3) { animation-delay: 0.09s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(4) { animation-delay: 0.12s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(5) { animation-delay: 0.15s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(6) { animation-delay: 0.18s; }
@keyframes modeb-crm-nav-item-in {
  from {
    opacity: 0;
    transform: translateX(-0.7rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item.active {
  background: #eff6ff !important;
  color: #0f172a !important;
  border-color: #bfdbfe !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item:before {
  margin: 0 !important;
  padding: 0 !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item[href="/app/crm"]:before,
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item[href="/app/crm/"]:before {
  padding: 0 !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.mode-b-shell[data-mode-b="crm"] > a.skip {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  background: transparent !important;
  color: transparent !important;
}
.mode-b-shell[data-mode-b="crm"] > a.skip:focus,
.mode-b-shell[data-mode-b="crm"] > a.skip:focus-visible {
  position: fixed !important;
  left: 0.75rem !important;
  top: 0.75rem !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  clip: auto !important;
  overflow: visible !important;
  padding: 0.4rem 0.7rem !important;
  border-radius: 0.6rem !important;
  background: #0f172a !important;
  color: #fff !important;
  z-index: 100 !important;
}
.mode-b-shell[data-mode-b="crm"] > main,
.mode-b-shell[data-mode-b="crm"] main,
.mode-b-shell[data-mode-b="crm"] #main {
  grid-area: main;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0.75rem !important;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.mode-b-shell[data-mode-b="crm"] > .mode-b-footer,
.mode-b-shell[data-mode-b="crm"] .mode-b-footer {
  grid-area: footer;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0.75rem !important;
}
.mode-b-shell[data-mode-b="crm"] .page-container,
.mode-b-shell[data-mode-b="crm"] .crm-fb-page,
.mode-b-shell[data-mode-b="crm"] .crm-fb-canvas {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
}
@media (max-width: 40rem) {
  .mode-b-shell[data-mode-b="crm"] {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
  }
  .mode-b-shell[data-mode-b="crm"] .mode-b-nav {
    left: 0.05rem !important;
    gap: 0.7rem !important;
  }
  .mode-b-shell[data-mode-b="crm"] .mode-b-nav-list {
    gap: 0.9rem;
  }
}
/* ==== end modeb-crm-drawer-nav ==== */

/* ==== Leads / Contacts / Customers: white page backgrounds :: modeb-people-white-bg (2026-09-08) ==== */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"],
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"],
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list > li .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card.crm-lead-row {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.mode-b-shell .sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.crm-contacts-list,
.crm-contacts-list > li:nth-child(even) .crm-contact-row,
.crm-contacts-list > li:nth-child(odd) .crm-contact-row {
  background: #fff !important;
  background-color: #fff !important;
}
.mode-b-shell main:has([data-screen="crm-leads-list"]),
.mode-b-shell main:has([data-screen="crm-contacts-list"]),
.mode-b-shell main:has([data-screen="crm-leads-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-leads-list"]) .sa-form-list,
.mode-b-shell main:has([data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-contacts-list"]) .sa-form-list {
  background: #fff !important;
}
/* ==== end modeb-people-white-bg ==== */

/* ==== Ported from Mode B py-crm CRM updates (Mode A only; Mode B hosts untouched) ==== */

/* ==== CRM Mode B header Ã¢â€ â€™ Mode A core design :: modeb-header-redesign ==== */
/* Match Mode A surface: core #f6f8fc bar, brand-blue hairline, light chrome. */

.mode-b-shell .workspace-header.mode-b-header {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  background-image: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
  padding-top: 0.65rem !important;
  padding-bottom: 0.55rem !important;
  position: sticky;
  overflow: visible;
}
.mode-b-shell .workspace-header.mode-b-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #0055ff 0%, #2563eb 55%, #60a5fa 100%);
  pointer-events: none;
}
.mode-b-shell .workspace-header.mode-b-header .mode-b-title strong {
  font-family: var(--serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #0a1a4a;
}

/* Workspace context pill Ã¢â‚¬â€ Mode A soft blue */
.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 {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, #0055ff 8%, #f6f8fc);
  border: 1px solid color-mix(in srgb, #0055ff 16%, transparent);
  color: #0022aa;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
.mode-b-shell .workspace-header.mode-b-header .context-slot .context-slot-trigger:hover {
  background: color-mix(in srgb, #0055ff 14%, #f6f8fc);
}

/* Avatar ring Ã¢â‚¬â€ Mode A brand */
.mode-b-shell .workspace-header.mode-b-header .user-menu .avatar-btn {
  border-radius: 999px;
  padding: 0;
  background: transparent;
  box-shadow: 0 0 0 2px #f6f8fc, 0 0 0 4px rgba(0, 85, 255, 0.28);
  transition: box-shadow 0.15s ease;
}
.mode-b-shell .workspace-header.mode-b-header .user-menu .avatar-btn:hover {
  box-shadow: 0 0 0 2px #f6f8fc, 0 0 0 4px rgba(0, 85, 255, 0.5);
}

/* ==== Add Lead form: compact gaps + mic beside label :: modeb-lead-form-compact (2026-09-03) ==== */
.lead-form.classic-form,
.lead-form.stack {
  gap: 0.5rem;
}
.lead-form .lead-form-grid {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.lead-form .field {
  gap: 0.18rem;
}
.lead-form .field-label-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  max-width: 100%;
}
.lead-form .field-with-mic .voice-session {
  position: static;
  top: auto;
  right: auto;
  margin: 0;
}
.lead-form .field-with-mic .voice-session .voice-btn {
  width: 1.45rem;
  height: 1.45rem;
}
.lead-form .lead-phone-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.lead-form .lead-phone-field .field-label-row {
  margin-bottom: 0;
}
.lead-form .lead-form-steps {
  margin-bottom: 0.1rem;
}

/* ==== CRM Lead detail: compact layout :: modeb-lead-detail (2026-09-03) ==== */
.mode-b-shell .crm-lead-detail {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-family: inherit;
}
.mode-b-shell .crm-lead-detail-bar {
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  align-items: center;
  min-height: 1.85rem;
  gap: 0.35rem;
}
.mode-b-shell .crm-lead-detail-bar-title {
  margin: 0;
  text-align: center;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.mode-b-shell .crm-lead-detail-back {
  width: 1.85rem !important;
  height: 1.85rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #2563eb;
}
.mode-b-shell .crm-lead-detail-menu-wrap {
  position: relative;
  justify-self: end;
}
.mode-b-shell .crm-lead-detail-icon-btn {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.45rem;
  border: 0;
  background: transparent;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mode-b-shell .crm-lead-detail-menu {
  position: absolute;
  right: 0;
  top: 2.1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.6rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  z-index: 5;
  overflow: hidden;
}
.mode-b-shell .crm-lead-detail-menu button {
  text-align: left;
  padding: 0.5rem 0.75rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 0.86rem;
  color: #0f172a;
}
.mode-b-shell .crm-lead-detail-menu button:hover {
  background: #f8fafc;
}

.mode-b-shell .crm-lead-profile-card {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0 0.45rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.mode-b-shell .crm-lead-profile-avatar {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 750;
}
.mode-b-shell .crm-lead-profile-meta {
  min-width: 0;
}
.mode-b-shell .crm-lead-profile-name {
  margin: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.2;
}
.mode-b-shell .crm-lead-profile-sub {
  margin: 0.12rem 0 0;
  color: #64748b;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.mode-b-shell .crm-lead-profile-card .crm-lead-status {
  display: inline-block !important;
  margin: 0;
  background: #ecfdf5 !important;
  color: #0f766e !important;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
}
.mode-b-shell .crm-lead-convert-btn {
  margin: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.65rem;
  border-radius: 0.45rem;
  border: 0;
  background: #2563eb;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}
.mode-b-shell .crm-lead-convert-btn:disabled {
  opacity: 0.55;
}

.mode-b-shell .crm-lead-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid #e8eef4;
  border-bottom: 1px solid #e8eef4;
  padding: 0.15rem 0;
}
.mode-b-shell .crm-lead-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  min-height: 2.55rem;
  padding: 0.3rem 0.1rem;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: #334155;
  text-decoration: none;
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
}
.mode-b-shell .crm-lead-action svg {
  color: #2563eb;
  width: 0.95rem;
  height: 0.95rem;
}
.mode-b-shell .crm-lead-action:hover:not(:disabled) {
  background: #f8fafc;
  color: #1e3a8a;
}
.mode-b-shell .crm-lead-action:disabled {
  opacity: 0.4;
  cursor: default;
}

.mode-b-shell .crm-lead-info-card,
.mode-b-shell .crm-lead-timeline-card {
  padding: 0.35rem 0 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.mode-b-shell .crm-lead-section-title {
  margin: 0 0 0.25rem;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.mode-b-shell .crm-lead-info-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}
.mode-b-shell .crm-lead-info-list > div {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.32rem 0;
  border-bottom: 1px solid #eef2f6;
}
.mode-b-shell .crm-lead-info-list dt {
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0;
  color: #64748b;
  font-weight: 550;
}
.mode-b-shell .crm-lead-info-list dd {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0f172a;
  word-break: break-word;
}
.mode-b-shell .crm-lead-info-assignee {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.mode-b-shell .crm-lead-assignee-avatar {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.5rem;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mode-b-shell .crm-lead-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin-top: 0.4rem;
}
.mode-b-shell .crm-lead-tag {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 0.68rem;
  font-weight: 650;
}
.mode-b-shell .crm-lead-notes {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #334155;
  white-space: pre-wrap;
}

.mode-b-shell .crm-lead-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.7rem;
  border-left: 1px solid #e8eef5;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mode-b-shell .crm-lead-timeline li {
  position: relative;
}
.mode-b-shell .crm-lead-timeline-dot {
  position: absolute;
  left: -0.95rem;
  top: 0.28rem;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: #cbd5e1;
  box-shadow: 0 0 0 2px #fff;
}
.mode-b-shell .crm-lead-timeline li[data-first='true'] .crm-lead-timeline-dot {
  background: #2563eb;
}
.mode-b-shell .crm-lead-timeline-body {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.mode-b-shell .crm-lead-timeline-body time {
  font-size: 0.68rem;
  color: #94a3b8;
}
.mode-b-shell .crm-lead-timeline-body strong {
  font-size: 0.82rem;
  font-weight: 650;
  color: #0f172a;
}
.mode-b-shell .crm-lead-timeline-empty {
  margin: 0;
  font-size: 0.82rem;
}

/* ==== CRM Leads filter modern card :: modeb-crm-filter-modern (2026-09-03) ==== */
.overlay.overlay-crm-filter {
  align-items: center;
  padding: 1.25rem 0.9rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(8px);
}
.sheet.sheet-crm-filter {
  width: min(22.5rem, 100%);
  border-radius: 1.45rem;
  padding: 0.7rem 1rem 1rem;
  gap: 0.85rem;
  box-shadow: 0 28px 64px rgba(15, 23, 42, 0.22);
}
.sheet.sheet-crm-filter .sheet-handle {
  width: 2.1rem;
  height: 0.22rem;
  background: #e2e8f0;
  margin-bottom: 0.45rem;
}
.sheet.sheet-crm-filter .sheet-head h2 {
  font-size: 1.15rem;
  font-weight: 750;
  color: #0f172a;
}
.sheet.sheet-crm-filter .sheet-body {
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.crm-filter-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.crm-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 0.65rem;
}
.crm-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  min-width: 0;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.crm-filter-field-wide {
  width: 100%;
}
.crm-filter-control {
  position: relative;
  display: block;
}
.crm-filter-control select,
.crm-filter-control input[type="search"],
.crm-filter-control input[type="date"] {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #e8eef6;
  background: #f8fafc;
  color: #0f172a;
  border-radius: 0.9rem;
  padding: 0.72rem 2rem 0.72rem 0.85rem;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 650;
  box-shadow: inset 0 1px 0 #fff;
}
.crm-filter-control select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.95rem;
}
.crm-filter-control select:focus,
.crm-filter-control input[type="search"]:focus,
.crm-filter-control input[type="date"]:focus {
  outline: none;
  border-color: #93c5fd;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.crm-filter-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: 1rem;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}
.crm-filter-switch-row strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
}
.crm-filter-switch-row em {
  display: block;
  font-style: normal;
  font-size: 0.72rem;
  color: #94a3b8;
}
.crm-filter-switch {
  width: 2.6rem;
  height: 1.5rem;
  border: 0;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
}
.crm-filter-switch::after {
  content: "";
  position: absolute;
  top: 0.16rem;
  left: 0.16rem;
  width: 1.18rem;
  height: 1.18rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
  transition: transform 0.16s ease;
}
.crm-filter-switch.on {
  background: #2563eb;
}
.crm-filter-switch.on::after {
  transform: translateX(1.1rem);
}
.crm-filter-footer {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.crm-filter-clear {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #2563eb;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.55rem 0.2rem;
  cursor: pointer;
}
.crm-filter-apply {
  flex: 1 1 auto;
  border: 0;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font: inherit;
  font-weight: 750;
  font-size: 0.92rem;
  padding: 0.78rem 1rem;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.22);
}
.crm-more-list {
  padding: 0.15rem 0 0.4rem;
}
a.crm-more-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.crm-more-link:hover {
  background: #f8fafc;
}

/* ==== CRM Leads table card UI (screenshot) :: modeb-leads-table-card (2026-09-03) ==== */
.sa-form[data-screen="crm-leads-list"] > .sa-form-head {
  margin-bottom: 0.75rem !important;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-head h1 {
  font-family: var(--serif) !important;
  font-size: 1.7rem !important;
  font-weight: 650 !important;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.mode-b-shell .sa-form[data-screen="crm-leads-list"] > .sa-form-body {
  background: #fff !important;
  border: 1px solid #e4eef7 !important;
  box-shadow: 0 16px 40px rgba(18, 32, 43, 0.06) !important;
  border-radius: 1.5rem !important;
  padding: 1rem !important;
  gap: 0.75rem !important;
}

.sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.mode-b-shell .crm-leads-list {
  gap: 0.55rem !important;
}
.sa-form[data-screen="crm-leads-list"] .crm-lead-card,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card.crm-lead-row,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card[data-tone],
.mode-b-shell .crm-leads-list .crm-lead-card,
.mode-b-shell .crm-leads-list .crm-lead-card.crm-lead-row,
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="new"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="contacted"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="qualified"],
.mode-b-shell .crm-leads-list .crm-lead-card[data-tone="muted"] {
  padding: 0.8rem 0.85rem !important;
  border: 1px solid #eef2f7 !important;
  border-radius: 1rem !important;
  box-shadow: none !important;
  background: #ffffff !important;
}
.sa-form[data-screen="crm-leads-list"] .crm-leads-list > li:hover .crm-lead-card,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card:hover,
.mode-b-shell .crm-leads-list > li:hover .crm-lead-card,
.mode-b-shell .crm-leads-list .crm-lead-card:hover {
  background: #ffffff !important;
}
.sa-form[data-screen="crm-leads-list"] .crm-leads-list-head,
.mode-b-shell .crm-leads-list-head {
  padding: 0.15rem 0.9rem 0.45rem !important;
}
.sa-form[data-screen="crm-leads-list"] .crm-lead-avatar,
.mode-b-shell .crm-leads-list .crm-lead-avatar {
  width: 2.45rem;
  height: 2.45rem;
  font-size: 0.75rem;
  background: #e8eef8;
  color: #1d4ed8;
}

.mode-b-shell .crm-leads-toolbar {
  gap: 0.55rem;
}
.mode-b-shell .crm-leads-actions-icons {
  gap: 0.55rem !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only,
.mode-b-shell .crm-leads-search-toggle {
  width: 2.65rem !important;
  height: 2.65rem !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.mode-b-shell .crm-leads-search-toggle {
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  color: #2563eb !important;
}
.mode-b-shell .crm-leads-search-toggle.active,
.mode-b-shell .crm-leads-search-toggle:hover {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="add"] {
  background: #2563eb !important;
  border: 1px solid #2563eb !important;
  color: #fff !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="import"] {
  background: color-mix(in srgb, #16a34a 12%, #fff) !important;
  border: 1px solid color-mix(in srgb, #16a34a 35%, #fff) !important;
  color: #15803d !important;
}
.mode-b-shell .crm-leads-actions-icons .crm-leads-btn.icon-only[data-kind="export"] {
  background: color-mix(in srgb, #ea580c 12%, #fff) !important;
  border: 1px solid color-mix(in srgb, #ea580c 35%, #fff) !important;
  color: #c2410c !important;
}

.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-kind="edit"],
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-kind="edit"] svg {
  color: #2563eb !important;
}
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="convert"],
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="convert"] svg {
  color: #2563eb !important;
}
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="danger"],
.mode-b-shell .crm-leads-list .crm-lead-action-btn[data-tone="danger"] svg {
  color: #dc2626 !important;
}
.mode-b-shell .crm-lead-col-email,
.mode-b-shell .crm-lead-col-email svg {
  color: #6b7db3 !important;
}
.mode-b-shell .crm-lead-card-company svg {
  color: #8a90a0 !important;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.call,
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.call svg {
  color: #3d7ea6 !important;
}
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.wa,
.mode-b-shell .crm-lead-col-phone .crm-lead-phone-act.wa svg {
  color: #3d9a6e !important;
}

.mode-b-shell .crm-lead-quick-actions {
  padding: 0.05rem 0;
}
.mode-b-shell .crm-lead-action {
  min-height: 2.35rem;
  gap: 0.08rem;
  padding: 0.22rem 0.08rem;
  color: #64748b;
}
.mode-b-shell .crm-lead-action[data-kind="edit"],
.mode-b-shell .crm-lead-action[data-kind="edit"] svg { color: #3d7ea6; }
.mode-b-shell .crm-lead-action[data-kind="assign"],
.mode-b-shell .crm-lead-action[data-kind="assign"] svg { color: #4f8f78; }
.mode-b-shell .crm-lead-action[data-kind="note"],
.mode-b-shell .crm-lead-action[data-kind="note"] svg { color: #b08948; }
.mode-b-shell .crm-lead-action[data-kind="task"],
.mode-b-shell .crm-lead-action[data-kind="task"] svg { color: #6d74a8; }
.mode-b-shell .crm-lead-action[data-kind="call"],
.mode-b-shell .crm-lead-action[data-kind="call"] svg { color: #3d9a8f; }
.mode-b-shell .crm-lead-action[data-kind="meeting"],
.mode-b-shell .crm-lead-action[data-kind="meeting"] svg { color: #c47a5a; }
.mode-b-shell .crm-lead-action[data-kind="file"],
.mode-b-shell .crm-lead-action[data-kind="file"] svg { color: #5f7e9b; }
.mode-b-shell .crm-lead-action[data-kind="email"],
.mode-b-shell .crm-lead-action[data-kind="email"] svg { color: #8a6aa8; }
.mode-b-shell .crm-lead-action svg { color: inherit; }

.mode-b-shell .crm-lead-info-list > div {
  padding: 0.22rem 0;
}
.mode-b-shell .crm-lead-detail {
  gap: 0.4rem;
}

/* ==== Leads list: new flat markup (does not fight old card CSS) :: modeb-leads-flat (2026-09-03) ==== */
.sa-form.crm-leads-flat {
  gap: 0.35rem !important;
}
.sa-form.crm-leads-flat > .sa-form-head {
  align-items: center;
  margin-bottom: 0.15rem !important;
  gap: 0.5rem;
}
.sa-form.crm-leads-flat > .sa-form-head .sa-form-pict {
  display: none !important;
}
.sa-form.crm-leads-flat > .sa-form-head .sa-form-titles h1 {
  font-family: inherit !important;
  font-size: 1.12rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.sa-form.crm-leads-flat > .sa-form-body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 0.35rem !important;
}
.sa-form.crm-leads-flat .crm-leads-title-actions .crm-leads-icon-btn {
  width: 1.85rem;
  height: 1.85rem;
  border: 0;
  background: transparent;
  border-radius: 0.4rem;
}
.sa-form.crm-leads-flat .crm-leads-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.sa-form.crm-leads-flat .crm-leads-ghost {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 0.4rem;
  color: #5b6b82;
  cursor: pointer;
  text-decoration: none;
  flex: 0 0 auto;
}
.sa-form.crm-leads-flat .crm-leads-ghost[data-kind="add"] { color: #3d7ea6; }
.sa-form.crm-leads-flat .crm-leads-ghost[data-kind="import"] { color: #4f8f78; }
.sa-form.crm-leads-flat .crm-leads-ghost[data-kind="export"] { color: #c47a5a; }
.sa-form.crm-leads-flat .crm-leads-ghost.active,
.sa-form.crm-leads-flat .crm-leads-ghost:hover {
  background: #f1f5f9;
}

.sa-form.crm-leads-flat .crm-leads-list {
  gap: 0 !important;
}
.sa-form.crm-leads-flat .crm-lead-line,
.sa-form.crm-leads-flat .crm-lead-card.crm-lead-line {
  padding: 0.3rem 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #e8eef3 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.sa-form.crm-leads-flat .crm-lead-line:hover {
  background: #f8fafc !important;
}
.sa-form.crm-leads-flat .crm-leads-list-head {
  padding: 0 0 0.25rem !important;
}
.sa-form.crm-leads-flat .crm-lead-avatar {
  width: 1.8rem !important;
  height: 1.8rem !important;
  font-size: 0.62rem !important;
}
.sa-form.crm-leads-flat .crm-lead-action-btn[data-kind="edit"] { color: #3d7ea6 !important; }
.sa-form.crm-leads-flat .crm-lead-action-btn[data-tone="convert"] { color: #4f8f78 !important; }
.sa-form.crm-leads-flat .crm-lead-action-btn[data-tone="danger"] { color: #c45c5c !important; }

/* ==== Contacts page stacked rows + unique action colors :: modeb-contacts-actions (2026-09-03) ==== */
.sa-form[data-screen="crm-contacts-list"] > .sa-form-head .sa-form-pict {
  display: none;
}
.sa-form[data-screen="crm-contacts-list"] > .sa-form-head h1 {
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 750;
}
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
  background: #e8f1fa;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0.35rem 0 1rem;
}
.crm-contacts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.crm-contact-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  padding: 0.55rem 0.45rem 0.5rem;
  border-bottom: 1px solid #d5e4f2;
  background: #e8f1fa;
  border-radius: 0.7rem;
}
.crm-contact-row:nth-child(even),
.crm-contacts-list > li:nth-child(even) .crm-contact-row {
  background: #e8f1fa;
}
.crm-contacts-list > li:nth-child(odd) .crm-contact-row {
  background: #e8f1fa;
}
.crm-contacts-list > li {
  list-style: none;
}
.crm-contact-row-main {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  flex: 1 1 12rem;
}
.crm-contact-row-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: #eef4fb;
  color: #3d7ea6;
  font-size: 0.68rem;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.crm-contact-row-copy {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}
.crm-contact-row-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
  min-height: 1.25rem;
}
.crm-contact-row-name {
  position: relative;
  z-index: 1;
  font-size: 0.95rem;
  font-weight: 750;
  color: #0f172a;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(42%, 12rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
/* Center email in the full people row (not beside the name). */
.crm-contact-row-email {
  position: absolute;
  left: 50%;
  top: 0.65rem;
  transform: translateX(-50%);
  z-index: 2;
  width: auto;
  max-width: min(18rem, 42%);
  margin: 0;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.crm-contact-row-copy .crm-contact-row-line {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-contact-row-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.75rem;
  color: #64748b;
}
.crm-contact-row-line {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: #475569;
  min-width: 0;
}
.crm-contact-row-line[data-kind="email"] { color: #6b7db3; }
.crm-contact-row-line[data-kind="phone"] { color: #3d7ea6; }
.crm-contact-row-line svg { flex: 0 0 auto; }
.crm-contact-row-phone-acts {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: 0.15rem;
}
.crm-contact-row-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.12rem;
  flex: 0 0 auto;
  margin-left: auto;
  min-width: max-content;
  overflow: visible;
}
@media (max-width: 36rem) {
  .crm-contact-row-name {
    max-width: 100%;
  }
  .crm-contact-row-email {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    max-width: 100%;
    width: 100%;
    order: 2;
    justify-content: flex-start;
    pointer-events: auto;
    padding-left: 2.8rem;
    margin-top: -0.1rem;
  }
  .crm-contact-row-main {
    order: 1;
    flex: 1 1 100%;
  }
  .crm-contact-row-actions {
    order: 3;
  }
}
@media (max-width: 30rem) {
  .crm-contact-row-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
    margin-left: 0;
    padding-left: 2.6rem;
  }
}
.crm-contact-act {
  width: 2.05rem;
  height: 2.05rem;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569;
  flex: 0 0 auto;
}
.crm-contact-act svg {
  width: 1.25rem;
  height: 1.25rem;
}
.crm-contact-act:hover:not(:disabled) { background: #f1f5f9; }
.crm-contact-act:disabled { opacity: 0.35; cursor: default; }
.crm-contact-act[data-kind="call"] { color: #3d7ea6; }
.crm-contact-act[data-kind="whatsapp"] { color: #3d9a6e; }
.crm-contact-act[data-kind="appointment"] { color: #3d7ea6; }
.crm-contact-act[data-kind="reminder"] { color: #c49a3c; }
.crm-contact-act[data-kind="deal"] { color: #6d74a8; }
.crm-contact-act[data-kind="task"] { color: #4f8f78; }
.crm-contact-act[data-kind="customer"] { color: #8a6aa8; }
.crm-contact-act[data-kind="edit"] { color: #5f7e9b; }
.crm-contact-act[data-kind="delete"] { color: #c45c5c; }

/* ==== Leads page stacked style (screenshot) :: modeb-leads-stack (2026-09-03) ==== */
.sa-form.crm-leads-stack > .sa-form-head .sa-form-titles h1 {
  font-size: 1.35rem !important;
  color: #0f2744 !important;
}
.sa-form.crm-leads-stack .crm-leads-search-wrap .crm-leads-ghost,
.sa-form.crm-leads-stack .crm-leads-ghost {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
}
.sa-form.crm-leads-stack .crm-leads-ghost[data-kind="add"] {
  background: #2563eb !important;
  color: #fff !important;
}
.sa-form.crm-leads-stack .crm-leads-ghost[data-kind="import"] {
  background: #ecfdf5 !important;
  color: #0d9488 !important;
}
.sa-form.crm-leads-stack .crm-leads-ghost[data-kind="export"] {
  background: #fff7ed !important;
  color: #ea580c !important;
}
.sa-form.crm-leads-stack .crm-lead-stack-row {
  padding: 0.7rem 0 0.55rem;
}
.sa-form.crm-leads-stack .crm-contact-row-name {
  color: #0f2744;
  font-size: 1rem;
}
.sa-form.crm-leads-stack .crm-contact-row-actions {
  gap: 0.12rem;
  padding-left: 0;
}
.sa-form.crm-leads-stack .crm-contact-act {
  width: 2.05rem;
  height: 2.05rem;
}
.sa-form.crm-leads-stack .crm-contact-act[data-kind="appointment"] { color: #3b82f6; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="reminder"] { color: #eab308; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="deal"] { color: #2563eb; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="task"] { color: #14b8a6; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="customer"] { color: #8b5cf6; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="edit"] { color: #64748b; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="delete"] { color: #ef4444; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="call"] { color: #3b82f6; }
.sa-form.crm-leads-stack .crm-contact-act[data-kind="whatsapp"] { color: #22c55e; }

/* ==== Lead details card layout + unique icon colors :: modeb-lead-detail-v2 (2026-09-03) ==== */
.mode-b-shell main:has([data-screen="crm-lead-detail"]) {
  background: #f4f6f9 !important;
}
.sa-form[data-screen="crm-lead-detail"] > .sa-form-body,
.mode-b-shell .sa-form[data-screen="crm-lead-detail"] > .sa-form-body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.crm-lead-detail-v2 {
  gap: 0.75rem !important;
}
.crm-lead-detail-v2 .crm-lead-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}
.crm-lead-detail-v2 .crm-lead-profile-card,
.crm-lead-detail-v2 .crm-lead-info-card,
.crm-lead-detail-v2 .crm-lead-timeline-card,
.crm-lead-detail-v2 .crm-lead-side-card {
  background: #fff !important;
  border: 1px solid #eef2f7 !important;
  border-radius: 1rem !important;
  box-shadow: 0 10px 28px rgba(18, 32, 43, 0.05) !important;
  padding: 1rem 1.05rem !important;
}
.crm-lead-detail-v2 .crm-lead-profile-card {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  gap: 0.75rem 0.85rem;
  align-items: start;
}
.crm-lead-detail-v2 .crm-lead-profile-avatar {
  width: 3.1rem !important;
  height: 3.1rem !important;
  font-size: 0.95rem !important;
  background: #e8eef8 !important;
  color: #2563eb !important;
}
.crm-lead-detail-v2 .crm-lead-profile-name {
  font-size: 1.2rem !important;
  font-weight: 750 !important;
  margin: 0 0 0.4rem !important;
}
.crm-lead-detail-v2 .crm-lead-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}
.crm-lead-detail-v2 .crm-lead-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
}
.crm-lead-detail-v2 .crm-lead-chip[data-tone="new"] { background: #ede9fe; color: #6d28d9; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="contacted"] { background: #fef3c7; color: #b45309; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="qualified"] { background: #dcfce7; color: #15803d; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="muted"] { background: #f1f5f9; color: #475569; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="priority"] { background: #fef9c3; color: #a16207; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="converted"] { background: #dcfce7; color: #166534; }
.crm-lead-detail-v2 .crm-lead-chip[data-tone="job"] { background: #e0f2fe; color: #0369a1; }

.crm-lead-detail-v2 .crm-lead-contact-lines {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.crm-lead-detail-v2 .crm-lead-contact-line {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: #475569;
  text-decoration: none;
  min-width: 0;
}
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="email"],
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="email"] svg { color: #2563eb; }
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="phone"],
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="phone"] svg { color: #0d9488; }
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="company"],
.crm-lead-detail-v2 .crm-lead-contact-line[data-kind="company"] svg { color: #7c3aed; }

.crm-lead-detail-v2 .crm-lead-quick-actions {
  grid-column: 1 / -1;
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.4rem !important;
  border: 0 !important;
  padding: 0.15rem 0 0 !important;
}
.crm-lead-detail-v2 .crm-lead-action {
  min-height: 0 !important;
  flex-direction: column;
  width: 3.2rem;
  gap: 0.18rem !important;
  padding: 0.35rem 0.1rem !important;
  border-radius: 0.75rem !important;
  font-size: 0.62rem !important;
}
.crm-lead-detail-v2 .crm-lead-action[data-kind="edit"] { color: #2563eb !important; background: color-mix(in srgb, #2563eb 10%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="assign"] { color: #7c3aed !important; background: color-mix(in srgb, #7c3aed 10%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="note"] { color: #ca8a04 !important; background: color-mix(in srgb, #ca8a04 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="task"] { color: #0891b2 !important; background: color-mix(in srgb, #0891b2 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="call"] { color: #0d9488 !important; background: color-mix(in srgb, #0d9488 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="meeting"] { color: #ea580c !important; background: color-mix(in srgb, #ea580c 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="file"] { color: #64748b !important; background: color-mix(in srgb, #64748b 10%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action[data-kind="email"] { color: #4f46e5 !important; background: color-mix(in srgb, #4f46e5 12%, #fff) !important; }
.crm-lead-detail-v2 .crm-lead-action svg { color: inherit !important; }

.crm-lead-detail-v2 .crm-lead-section-title {
  font-size: 0.95rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: #0f172a !important;
  margin: 0 0 0.7rem !important;
}

.crm-lead-detail-v2 .crm-lead-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 0.75rem;
}
.crm-lead-detail-v2 .crm-lead-facts > div {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.7rem 0.75rem;
  border-radius: 0.85rem;
  background: #f8fafc;
}
.crm-lead-detail-v2 .crm-lead-facts > div > div {
  min-width: 0;
}
.crm-lead-detail-v2 .crm-lead-fact-icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.crm-lead-detail-v2 .crm-lead-facts dt {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #94a3b8;
}
.crm-lead-detail-v2 .crm-lead-facts dd {
  margin: 0.12rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  word-break: break-word;
}
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="source"] .crm-lead-fact-icon { color: #2563eb; background: color-mix(in srgb, #2563eb 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="status"] .crm-lead-fact-icon { color: #7c3aed; background: color-mix(in srgb, #7c3aed 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="priority"] .crm-lead-fact-icon { color: #ca8a04; background: color-mix(in srgb, #ca8a04 14%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="assigned"] .crm-lead-fact-icon { color: #0d9488; background: color-mix(in srgb, #0d9488 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="created"] .crm-lead-fact-icon { color: #ea580c; background: color-mix(in srgb, #ea580c 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="converted"] .crm-lead-fact-icon { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="tags"] .crm-lead-fact-icon { color: #4f46e5; background: color-mix(in srgb, #4f46e5 12%, #fff); }
.crm-lead-detail-v2 .crm-lead-facts > div[data-kind="tags"] {
  grid-column: 1 / -1;
}

.crm-lead-detail-v2 .crm-lead-notes {
  color: #64748b !important;
  font-size: 0.88rem !important;
  line-height: 1.45;
}

.crm-lead-detail-v2 .crm-lead-timeline {
  border: 0 !important;
  padding: 0 !important;
  gap: 0.7rem !important;
}
.crm-lead-detail-v2 .crm-lead-timeline li {
  padding: 0.15rem 0 0.15rem 0.75rem;
  border-left: 3px solid #cbd5e1;
}
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="task"] { border-left-color: #38bdf8; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="email"] { border-left-color: #4ade80; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="note"] { border-left-color: #fbbf24; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="call"] { border-left-color: #2dd4bf; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="meeting"] { border-left-color: #fb923c; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="status"] { border-left-color: #a78bfa; }
.crm-lead-detail-v2 .crm-lead-timeline li[data-kind="default"] { border-left-color: #94a3b8; }
.crm-lead-detail-v2 .crm-lead-timeline-dot { display: none; }
.crm-lead-detail-v2 .crm-lead-timeline-body strong {
  font-size: 0.9rem;
  display: block;
}
.crm-lead-detail-v2 .crm-lead-timeline-body time {
  display: block;
  margin-top: 0.15rem;
}

/* ==== Settings More page toggles :: modeb-crm-page-settings (2026-09-03) ==== */
.sa-form[data-screen="crm-page-settings"] > .sa-form-head h1 {
  font-family: var(--serif);
}
.crm-page-toggle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.crm-page-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 1.15rem;
  box-shadow: 0 10px 24px rgba(18, 32, 43, 0.05);
}
.crm-page-toggle-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.crm-page-toggle-main .pict {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  background: var(--purple-soft);
  color: var(--purple);
  flex: 0 0 auto;
}
.crm-page-toggle-main strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--brand-ink);
}
.crm-page-toggle-main em {
  display: block;
  font-style: normal;
  font-size: 0.75rem;
  color: #94a3b8;
}
.crm-page-toggle-actions {
  display: flex;
  gap: 0.35rem;
  flex: 0 0 auto;
}
.crm-page-toggle-actions button {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  border-radius: 999px;
  padding: 0.38rem 0.7rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.crm-page-toggle-actions button.is-active {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}
.crm-page-toggle-actions button.is-inactive {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

/* ==== Leads import popup :: modeb-lead-import (2026-09-03) ==== */
.sheet.sheet-lead-import {
  width: min(36rem, 100%);
  max-height: min(92dvh, calc(100% - 0.5rem));
  min-height: 0;
}
.sheet.sheet-crm-filter.sheet-lead-import .sheet-body {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  flex: 1 1 auto;
}
.overlay.overlay-crm-filter:has(.sheet-lead-import) {
  align-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 40rem) {
  .overlay.overlay-crm-filter:has(.sheet-lead-import) {
    align-items: flex-end;
    padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
  }
  .sheet.sheet-crm-filter.sheet-lead-import {
    max-height: min(88dvh, calc(100% - 0.75rem));
    border-radius: 1.45rem 1.45rem 0.9rem 0.9rem;
  }
}
.lead-import {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.lead-import-help {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #475569;
}
.lead-import-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.lead-import-ghost {
  border: 1px solid #93c5fd;
  background: #fff;
  color: #1d4ed8;
  border-radius: 0.7rem;
  padding: 0.5rem 0.8rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.lead-import-field select,
.lead-import-defaults select,
.lead-import-defaults input {
  width: 100%;
  border: 1px solid #dbe3f0;
  border-radius: 0.7rem;
  padding: 0.55rem 0.7rem;
  background: #fff;
  font: inherit;
  font-size: 0.85rem;
  color: #0f172a;
}
.lead-import-file {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: #64748b;
}
.lead-import-file span {
  border: 0;
  border-radius: 0.7rem;
  background: #e2e8f0;
  color: #0f172a;
  padding: 0.5rem 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.lead-import-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.lead-import-file em {
  font-style: normal;
}
.lead-import-defaults {
  margin: 0;
  padding: 0.75rem 0.85rem 0.9rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.9rem;
}
.lead-import-defaults legend {
  padding: 0 0.25rem;
  font-size: 0.85rem;
  font-weight: 750;
  color: #0f172a;
}
.lead-import-defaults p {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.4;
}
.lead-import-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 0.75rem;
}
.lead-import-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #334155;
}
.lead-import-label {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: #334155;
}
.lead-import-req {
  color: #dc2626;
  font-weight: 750;
  line-height: 1;
}
.lead-import-custom-source {
  grid-column: 1 / -1;
}
.lead-import-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}
.lead-import-submit {
  border: 0;
  border-radius: 0.7rem;
  background: #2563eb;
  color: #fff;
  font: inherit;
  font-weight: 750;
  font-size: 0.88rem;
  padding: 0.55rem 1.15rem;
  cursor: pointer;
}
.lead-import-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
@media (max-width: 32rem) {
  .lead-import-grid {
    grid-template-columns: 1fr;
  }
}

/* ==== People lists mild light-blue canvas :: modeb-contacts-list-blue (2026-09-08) ==== */
/* Core page uses Mode A #f6f8fc; header + list panel stay white (rows keep zebra). */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] {
  background: #f6f8fc !important;
  box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-head {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list {
  background: transparent !important;
  box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list > li .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] article.crm-contact-row {
  background: #f6f8fc !important;
  border: 1px solid #e8eef5 !important;
  border-bottom: 1px solid #e8eef5 !important;
  box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
  background: #f6f8fc !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 1.5rem !important;
  padding: 1rem !important;
}

/* ==== Add Contacts form two-column like Add Lead fields :: modeb-contact-form-flat (2026-09-03) ==== */
.sheet.sheet-contact-form,
.sheet:has(.contact-form-flat) {
  width: min(40rem, calc(100% - 1.25rem));
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
.sheet.sheet-contact-form .sheet-body,
.sheet:has(.contact-form-flat) .sheet-body {
  overflow-x: hidden;
  max-width: 100%;
}
.lead-form.contact-form-flat {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}
.lead-form.contact-form-flat .lead-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.55rem 0.75rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.lead-form.contact-form-flat .field-with-mic,
.lead-form.contact-form-flat .field,
.lead-form.contact-form-flat .lead-phone-field {
  min-width: 0;
  max-width: 100%;
}
.lead-form.contact-form-flat .lead-phone-row {
  min-width: 0;
  width: 100%;
}
.lead-form.contact-form-flat .lead-phone-row > select {
  flex: 0 1 6.75rem;
  min-width: 0;
  max-width: 7.25rem;
}
.lead-form.contact-form-flat .lead-form-actions {
  justify-content: flex-end;
}
@media (max-width: 36rem) {
  .lead-form.contact-form-flat .lead-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==== Add Deal form like Add Lead :: modeb-deal-form-flat (2026-09-03) ==== */
.lead-form.deal-form-flat .deal-form-span {
  grid-column: 1 / -1;
}
.lead-form.deal-form-flat input[type='number'],
.lead-form.deal-form-flat input[type='date'],
.lead-form.deal-form-flat input[type='datetime-local'] {
  min-width: 0;
}

/* ==== More page compact unique list :: modeb-more-nav (2026-09-03) ==== */
.sa-form[data-screen="crm-home"] > .sa-form-head h1 {
  font-family: var(--serif);
  font-size: 1.35rem;
}
.sa-form[data-screen="crm-home"] > .sa-form-body {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.mode-b-shell main:has([data-screen="crm-home"]) {
  background: #ffffff;
}
.crm-more-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.crm-more-section-label {
  margin: 0 0.15rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.crm-more-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.crm-more-nav-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.72rem 0.8rem;
  text-decoration: none;
  color: inherit;
  border-radius: 0.95rem;
  min-height: 3.35rem;
  background: #fff;
  border: 1px solid #e8eef4;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}
.crm-more-nav-row:hover {
  background: #f8fbff;
  border-color: #d7e4f4;
}
.crm-more-nav-icon {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 0.8rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.crm-more-nav-copy {
  min-width: 0;
  flex: 1 1 auto;
}
.crm-more-nav-copy strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 780;
  color: #0f172a;
  line-height: 1.2;
}
.crm-more-nav-copy em {
  display: inline-flex;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  margin-top: 0.22rem;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 0.1rem 0.48rem;
}
.crm-more-nav-go {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #f8fafc;
  color: #94a3b8;
  border: 1px solid #e8eef4;
}
.crm-more-nav-row:hover .crm-more-nav-go {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}
.crm-more-nav-row[data-tone="blue"] .crm-more-nav-icon { color: #2563eb; background: color-mix(in srgb, #2563eb 12%, #fff); }
.crm-more-nav-row[data-tone="orange"] .crm-more-nav-icon { color: #ea580c; background: color-mix(in srgb, #ea580c 12%, #fff); }
.crm-more-nav-row[data-tone="teal"] .crm-more-nav-icon { color: #0d9488; background: color-mix(in srgb, #0d9488 12%, #fff); }
.crm-more-nav-row[data-tone="amber"] .crm-more-nav-icon { color: #d97706; background: color-mix(in srgb, #d97706 14%, #fff); }
.crm-more-nav-row[data-tone="indigo"] .crm-more-nav-icon { color: #4f46e5; background: color-mix(in srgb, #4f46e5 12%, #fff); }
.crm-more-nav-row[data-tone="violet"] .crm-more-nav-icon { color: #7c3aed; background: color-mix(in srgb, #7c3aed 12%, #fff); }
.crm-more-nav-row[data-tone="green"] .crm-more-nav-icon { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, #fff); }
.crm-more-nav-row[data-tone="slate"] .crm-more-nav-icon { color: #475569; background: color-mix(in srgb, #475569 12%, #fff); }
.crm-more-nav-row[data-tone="cyan"] .crm-more-nav-icon { color: #0891b2; background: color-mix(in srgb, #0891b2 12%, #fff); }
.crm-more-nav-row[data-tone="pink"] .crm-more-nav-icon { color: #db2777; background: color-mix(in srgb, #db2777 12%, #fff); }
.crm-more-nav-row[data-tone="yellow"] .crm-more-nav-icon { color: #ca8a04; background: color-mix(in srgb, #ca8a04 14%, #fff); }
.crm-more-nav-row[data-tone="sky"] .crm-more-nav-icon { color: #0284c7; background: color-mix(in srgb, #0284c7 12%, #fff); }
.crm-more-nav-row[data-tone="gray"] .crm-more-nav-icon { color: #64748b; background: color-mix(in srgb, #64748b 12%, #fff); }
.crm-more-nav-row[data-tone="purple"] .crm-more-nav-icon { color: #9333ea; background: color-mix(in srgb, #9333ea 12%, #fff); }
.crm-more-nav-row[data-tone="rose"] .crm-more-nav-icon { color: #e11d48; background: color-mix(in srgb, #e11d48 12%, #fff); }
.crm-more-nav-row[data-tone="red"] .crm-more-nav-icon { color: #dc2626; background: color-mix(in srgb, #dc2626 12%, #fff); }
.crm-more-nav-row[data-tone="blue"] { border-left: 3px solid #2563eb; }
.crm-more-nav-row[data-tone="orange"] { border-left: 3px solid #ea580c; }
.crm-more-nav-row[data-tone="teal"] { border-left: 3px solid #0d9488; }
.crm-more-nav-row[data-tone="amber"] { border-left: 3px solid #d97706; }
.crm-more-nav-row[data-tone="indigo"] { border-left: 3px solid #4f46e5; }
.crm-more-nav-row[data-tone="violet"] { border-left: 3px solid #7c3aed; }
.crm-more-nav-row[data-tone="green"] { border-left: 3px solid #16a34a; }
.crm-more-nav-row[data-tone="slate"] { border-left: 3px solid #475569; }
.crm-more-nav-row[data-tone="cyan"] { border-left: 3px solid #0891b2; }
.crm-more-nav-row[data-tone="pink"] { border-left: 3px solid #db2777; }
.crm-more-nav-row[data-tone="yellow"] { border-left: 3px solid #ca8a04; }
.crm-more-nav-row[data-tone="sky"] { border-left: 3px solid #0284c7; }
.crm-more-nav-row[data-tone="gray"] { border-left: 3px solid #64748b; }
.crm-more-nav-row[data-tone="purple"] { border-left: 3px solid #9333ea; }
.crm-more-nav-row[data-tone="rose"] { border-left: 3px solid #e11d48; }
.crm-more-nav-row[data-tone="red"] { border-left: 3px solid #dc2626; }
.crm-more-nav-row[data-tone="emerald"] { border-left: 3px solid #059669; }

/* ==== Add Lead select chevron next to value :: modeb-lead-select-chevron (2026-09-03) ==== */
.lead-form .field[data-as='select'] .field-control {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
}
.lead-form .field[data-as='select'] select {
  width: max-content;
  max-width: 100%;
  field-sizing: content;
  padding-right: 1.85rem;
}
.lead-form .field[data-as='select'] .field-chevron {
  right: 0.5rem;
}

/* ==== Deals kanban list :: modeb-deals-board (2026-09-03) ==== */
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-body {
  background: #f4f7fb;
  border: 0;
  box-shadow: none;
  padding: 0.2rem 0 0.6rem;
}
.crm-deals-board {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.crm-deals-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}
.crm-deals-stats article {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 1rem;
  padding: 0.7rem 0.75rem;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}
.crm-deals-stats em {
  display: block;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.02em;
}
.crm-deals-stats strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.95rem;
  color: #0f172a;
}
.crm-deals-kanban {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scroll-snap-type: x proximity;
}
.crm-deals-column {
  flex: 0 0 min(15.5rem, 82vw);
  scroll-snap-align: start;
  background: #eef2f6;
  border-radius: 1rem;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.crm-deals-column-head {
  padding: 0.7rem 0.75rem 0.55rem;
  border-top: 3px solid #94a3b8;
  background: #fff;
}
.crm-deals-column[data-tone="blue"] .crm-deals-column-head { border-top-color: #2563eb; }
.crm-deals-column[data-tone="yellow"] .crm-deals-column-head { border-top-color: #eab308; }
.crm-deals-column[data-tone="orange"] .crm-deals-column-head { border-top-color: #ea580c; }
.crm-deals-column[data-tone="purple"] .crm-deals-column-head { border-top-color: #7c3aed; }
.crm-deals-column[data-tone="green"] .crm-deals-column-head { border-top-color: #16a34a; }
.crm-deals-column[data-tone="rose"] .crm-deals-column-head { border-top-color: #e11d48; }
.crm-deals-column-head h2 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 750;
  color: #0f172a;
}
.crm-deals-column-head span {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.72rem;
  color: #64748b;
}
.crm-deals-column-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.55rem;
}
.crm-deal-card {
  position: relative;
  background: #fff;
  border-radius: 0.85rem;
  padding: 0.7rem 0.75rem 0.55rem;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}
.crm-deal-card-title {
  display: block;
  font-weight: 750;
  font-size: 0.88rem;
  color: #0f172a;
  text-decoration: none;
  line-height: 1.3;
}
.crm-deal-card-party {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: #94a3b8;
}
.crm-deal-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 0.55rem;
}
.crm-deal-card-meta strong {
  font-size: 0.86rem;
  color: #0f172a;
}
.crm-deal-card-meta em {
  font-style: normal;
  font-size: 0.78rem;
  color: #64748b;
}
.crm-deal-card-move {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
}
.crm-deal-move {
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.crm-deal-card-select {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
}

/* ==== Deals page: default pipeline only, no page scroll :: modeb-deals-no-page-scroll (2026-09-03) ==== */
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) {
  overflow: hidden !important;
  height: 100dvh;
  max-height: 100dvh;
}
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) .sa-form-list {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sa-form[data-screen="crm-opportunities-list"] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-head {
  flex: 0 0 auto;
}
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.crm-deals-board {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.crm-deals-stats {
  flex: 0 0 auto;
}
.crm-deals-kanban {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.crm-deals-column {
  min-height: 0;
  max-height: 100%;
}
.crm-deals-column-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* ==== Deals board: no horizontal scroll, compact cards :: modeb-deals-fit (2026-09-03) ==== */
.crm-deals-board {
  gap: 0.55rem;
}
.crm-deals-stats {
  gap: 0.4rem;
}
.crm-deals-stats article {
  padding: 0.42rem 0.5rem;
  border-radius: 0.75rem;
  box-shadow: none;
}
.crm-deals-stats em {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.crm-deals-stats strong {
  margin-top: 0.08rem;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-deals-kanban {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  overflow-y: hidden;
  padding-bottom: 0;
  scroll-snap-type: none;
}
.crm-deals-column {
  flex: none !important;
  min-width: 0 !important;
  width: auto;
  border-radius: 0.8rem;
  background: #e8eef5;
}
.crm-deals-column-head {
  padding: 0.45rem 0.5rem 0.38rem;
}
.crm-deals-column-head h2 {
  font-size: 0.8rem;
}
.crm-deals-column-head span {
  font-size: 0.66rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-deals-column-body {
  gap: 0.35rem;
  padding: 0.38rem;
}
.crm-deal-card {
  padding: 0.42rem 0.45rem 0.38rem;
  border-radius: 0.65rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.crm-deal-card-top {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  min-width: 0;
}
.crm-deal-card-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-deal-card-move {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 0.12rem;
  margin-top: 0;
}
.crm-deal-move {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
}
.crm-deal-move-spacer {
  width: 1.35rem;
  height: 1.35rem;
}
.crm-deal-card-bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  margin-top: 0.18rem;
  min-width: 0;
}
.crm-deal-card-party {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-deal-card-amount {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  white-space: nowrap;
}
.crm-deal-card-win {
  display: block;
  margin-top: 0.08rem;
  font-style: normal;
  font-size: 0.62rem;
  color: #64748b;
}
.crm-deal-card-meta {
  display: none;
}
@media (max-width: 360px) {
  .crm-deals-kanban {
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
  }
}

/* ==== Deals board fresh layout :: modeb-deals-fresh (2026-09-03) ==== */
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-body {
  background: #f3f5f8;
  padding: 0.15rem 0 0.35rem;
}
.crm-deals-board {
  gap: 0.7rem;
}
.crm-deals-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 1.05rem;
  overflow: hidden;
  box-shadow: none;
}
.crm-deals-stats article {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.55rem 0.55rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.crm-deals-stats article + article {
  border-left: 1px solid #eef2f6;
}
.crm-deals-stat-icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.6rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #2563eb;
  background: #eff6ff;
}
.crm-deals-stat-icon[data-tone="amber"] {
  color: #b45309;
  background: #fffbeb;
}
.crm-deals-stat-icon[data-tone="green"] {
  color: #15803d;
  background: #f0fdf4;
}
.crm-deals-stats em {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.crm-deals-stats strong {
  margin-top: 0.02rem;
  font-size: 0.86rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.crm-deals-kanban {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.55rem;
  overflow-x: hidden !important;
}
.crm-deals-column {
  background: transparent;
  border-radius: 0;
  min-width: 0;
}
.crm-deals-column-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.15rem 0.15rem 0.45rem;
  background: transparent;
  border-top: 0;
}
.crm-deals-column-head h2 {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.crm-deals-column-head h2::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #94a3b8;
}
.crm-deals-column[data-tone="blue"] .crm-deals-column-head h2::before { background: #2563eb; }
.crm-deals-column[data-tone="yellow"] .crm-deals-column-head h2::before { background: #ca8a04; }
.crm-deals-column[data-tone="orange"] .crm-deals-column-head h2::before { background: #ea580c; }
.crm-deals-column[data-tone="purple"] .crm-deals-column-head h2::before { background: #7c3aed; }
.crm-deals-column[data-tone="green"] .crm-deals-column-head h2::before { background: #16a34a; }
.crm-deals-column[data-tone="rose"] .crm-deals-column-head h2::before { background: #e11d48; }
.crm-deals-column-head span {
  margin-top: 0.12rem;
  font-size: 0.68rem;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.crm-deals-column-head b {
  flex: 0 0 auto;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #e8eef5;
  color: #334155;
  font-size: 0.68rem;
  font-weight: 750;
  display: inline-grid;
  place-items: center;
}
.crm-deals-column[data-tone="blue"] .crm-deals-column-head b { background: #dbeafe; color: #1d4ed8; }
.crm-deals-column[data-tone="green"] .crm-deals-column-head b { background: #dcfce7; color: #15803d; }
.crm-deals-column[data-tone="rose"] .crm-deals-column-head b { background: #ffe4e6; color: #be123c; }
.crm-deals-column-body {
  gap: 0.45rem;
  padding: 0;
  background: transparent;
}
.crm-deal-card {
  padding: 0.62rem 0.65rem 0.55rem 0.75rem;
  border-radius: 0.9rem;
  border: 1px solid #e8eef4;
  border-left: 3px solid #cbd5e1;
  box-shadow: none;
  background: #fff;
}
.crm-deal-card[data-tone="blue"] { border-left-color: #3b82f6; }
.crm-deal-card[data-tone="yellow"] { border-left-color: #eab308; }
.crm-deal-card[data-tone="orange"] { border-left-color: #f97316; }
.crm-deal-card[data-tone="purple"] { border-left-color: #8b5cf6; }
.crm-deal-card[data-tone="green"] { border-left-color: #22c55e; }
.crm-deal-card[data-tone="rose"] { border-left-color: #fb7185; }
.crm-deal-card-title {
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
.crm-deal-card-party {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  margin: 0.28rem 0 0;
  color: #64748b;
  font-size: 0.68rem;
}
.crm-deal-card-party span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-deal-card-party svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.crm-deal-card-bottom {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.45rem;
}
.crm-deal-card-amount {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
}
.crm-deal-card-win {
  display: inline;
  margin: 0;
  font-size: 0.62rem;
  color: #64748b;
}
.crm-deal-card-move {
  margin-left: auto;
  display: flex;
  gap: 0.1rem;
}
.crm-deal-move {
  width: 1.4rem;
  height: 1.4rem;
  border: 0;
  background: #f8fafc;
  color: #64748b;
}
html[data-theme="dark"] .crm-deals-stats,
html[data-theme="dark"] .crm-deal-card {
  background: #1b2940 !important;
  border-color: #2a3a52 !important;
}
html[data-theme="dark"] .crm-deals-stats article + article {
  border-left-color: #2a3a52;
}
html[data-theme="dark"] .crm-deals-stat-icon {
  background: #152033;
}
html[data-theme="dark"] .crm-deal-card-amount {
  background: #152033;
  color: #e8eef6;
}
html[data-theme="dark"] .crm-deals-column-head b {
  background: #152033;
  color: #cbd5e1;
}

/* ==== Add Deal form even grid :: modeb-deal-form-align (live-only) ==== */
.overlay.overlay-deal-form {
  align-items: center;
  padding: 1rem 1rem calc(4.6rem + env(safe-area-inset-bottom, 0px));
}
.sheet.sheet-deal-form {
  width: min(var(--mode-b-core-width, 900px), calc(100% - 1.5rem));
  max-width: var(--mode-b-core-width, 900px);
  max-height: 100%;
  overflow: hidden;
  gap: 0.65rem;
  padding: 1rem 1.35rem 1.2rem;
  border-radius: 1.25rem;
  box-sizing: border-box;
}
.sheet.sheet-deal-form .sheet-handle {
  display: none;
}
.sheet.sheet-deal-form .sheet-head-row h2 {
  font-size: 1.15rem;
}
.sheet.sheet-deal-form .sheet-body {
  padding: 0.15rem 0 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 100%;
}
.sheet.sheet-deal-form.sheet-activity-form {
  max-height: min(92dvh, 46rem);
}
.sheet.sheet-deal-form.sheet-activity-form .sheet-body {
  overflow-y: auto !important;
}
.lead-form.deal-form-flat {
  gap: 0.95rem;
}
.lead-form.deal-form-flat .deal-form-grid {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  width: 100%;
}
.lead-form.deal-form-flat .deal-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.95rem 1.1rem;
  width: 100%;
  min-width: 0;
}
.lead-form.deal-form-flat .deal-form-span,
.lead-form.deal-form-flat .deal-form-row > .field-with-mic,
.lead-form.deal-form-flat .field,
.lead-form.deal-form-flat .field-control {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.lead-form.deal-form-flat .field {
  gap: 0.4rem;
}
.lead-form.deal-form-flat .field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  min-height: 0;
}
.lead-form.deal-form-flat .field-label-row label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.74rem;
  font-weight: 650;
  color: #475569;
}
.lead-form.deal-form-flat .field-with-mic .voice-session {
  margin-left: 0;
  flex: 0 0 auto;
}
.lead-form.deal-form-flat .field-icon {
  color: #94a3b8 !important;
}
.lead-form.deal-form-flat .field[data-as='select'] .field-control {
  display: flex !important;
  width: 100% !important;
  max-width: 100%;
}
.lead-form.deal-form-flat .field[data-as='select'] select {
  width: 100% !important;
  max-width: 100%;
  field-sizing: fixed;
  flex: 1 1 auto;
}
.lead-form.deal-form-flat .field input,
.lead-form.deal-form-flat .field select {
  box-sizing: border-box;
  width: 100%;
  height: 2.6rem;
  min-height: 2.6rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.8rem;
}
.lead-form.deal-form-flat .field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 4.5rem;
  height: 4.5rem;
  max-height: 4.5rem;
  resize: none;
  border-radius: 0.8rem;
}
.lead-form.deal-form-flat .lead-form-actions {
  margin-top: 0.35rem;
  gap: 0.75rem;
}
.lead-form.deal-form-flat .lead-form-grid.deal-form-grid {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  width: 100%;
}
.lead-form.deal-form-flat .deal-form-row > .lead-phone-field,
.lead-form.deal-form-flat .lead-phone-field,
.lead-form.deal-form-flat .lead-phone-row {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.lead-form.deal-form-flat .lead-phone-field .field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.lead-form.deal-form-flat .lead-form-steps {
  margin-bottom: 0.35rem;
}
@media (max-width: 36rem) {
  .lead-form.deal-form-flat .deal-form-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==== Deals compact list + stage filters :: modeb-deals-list (live-only) ==== */
.crm-deals-list-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  gap: 0.55rem;
}
.crm-deals-list-page .crm-deals-kanban {
  display: none !important;
}
.crm-deals-toolbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.crm-deals-stage-tabs {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.1rem;
  scrollbar-width: none;
}
.crm-deals-stage-tabs::-webkit-scrollbar {
  display: none;
}
.crm-deals-stage-tabs button {
  flex: 0 0 auto;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.crm-deals-stage-tabs button.on {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.crm-deals-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-bottom: 0.4rem;
}
.crm-deals-empty {
  margin: 1rem 0.2rem;
  color: #64748b;
  font-size: 0.85rem;
}
.crm-deals-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.45rem 0.55rem;
  background: #fff;
  border: 1px solid #e8eef4;
  border-left: 3px solid #94a3b8;
  border-radius: 0.8rem;
  padding: 0.55rem 0.7rem;
}
.crm-deals-row[data-tone="blue"] { border-left-color: #3b82f6; }
.crm-deals-row[data-tone="green"] { border-left-color: #22c55e; }
.crm-deals-row[data-tone="rose"] { border-left-color: #fb7185; }
.crm-deals-row[data-tone="yellow"] { border-left-color: #eab308; }
.crm-deals-row[data-tone="orange"] { border-left-color: #f97316; }
.crm-deals-row[data-tone="purple"] { border-left-color: #8b5cf6; }
.crm-deals-row-main {
  min-width: 0;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.crm-deals-row-main strong {
  font-size: 0.84rem;
  font-weight: 750;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-deals-row-main span {
  font-size: 0.7rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-deals-row-amount {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  white-space: nowrap;
}
.crm-deals-row-stage {
  font-style: normal;
  font-size: 0.65rem;
  font-weight: 750;
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  background: #f1f5f9;
  color: #334155;
  white-space: nowrap;
}
.crm-deals-row-stage[data-tone="green"] { background: #dcfce7; color: #15803d; }
.crm-deals-row-stage[data-tone="rose"] { background: #ffe4e6; color: #be123c; }
.crm-deals-row-stage[data-tone="blue"] { background: #dbeafe; color: #1d4ed8; }
.crm-deals-row-stage[data-tone="yellow"] { background: #fefce8; color: #a16207; }
.crm-deals-row-stage[data-tone="orange"] { background: #fff7ed; color: #c2410c; }
.crm-deals-row-stage[data-tone="purple"] { background: #f5f3ff; color: #6d28d9; }
.crm-deals-row.selectable-record {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}
.crm-deals-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
html[data-theme="dark"] .crm-deals-row {
  background: #1b2940 !important;
  border-color: #2a3a52 !important;
}
html[data-theme="dark"] .crm-deals-row-main strong,
html[data-theme="dark"] .crm-deals-row-amount {
  color: #e8eef6;
}
html[data-theme="dark"] .crm-deals-stage-tabs button {
  background: #152033;
  border-color: #2a3a52;
  color: #cbd5e1;
}
.crm-deals-toolbar {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}
.crm-deals-search-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 2.45rem;
  padding: 0 0.8rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  background: #fff;
  color: #64748b;
}
.crm-deals-search-bar input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.86rem;
  color: #0f172a;
  outline: none;
}
.crm-deals-stage-select {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.45rem;
  padding: 0 2.1rem 0 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  background: #fff;
  color: #0f172a;
}
.crm-deals-stage-select select {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 750;
  color: #0f172a;
  outline: none;
  cursor: pointer;
}
.crm-deals-stage-select-chevron {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: #64748b;
  pointer-events: none;
}
.crm-deals-stage-select-chevron svg {
  width: 100%;
  height: 100%;
  display: block;
}
.crm-deals-list-page .crm-deals-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  gap: 0.5rem;
}
.crm-deals-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name amount"
    "name stage";
  padding: 0.7rem 0.8rem;
  border-radius: 0.95rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.crm-deals-row-main { grid-area: name; }
.crm-deals-row-amount {
  grid-area: amount;
  justify-self: end;
  font-weight: 750;
}
.crm-deals-row-stage {
  grid-area: stage;
  justify-self: end;
  align-self: start;
}
.crm-deals-row.selectable-record {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "sel name amount"
    "sel name stage";
}
.crm-deals-pagination {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  padding-bottom: 0.15rem;
}
html[data-theme="dark"] .crm-deals-search-bar,
html[data-theme="dark"] .crm-deals-stage-select {
  background: #152033;
  border-color: #2a3a52;
  color: #cbd5e1;
}
html[data-theme="dark"] .crm-deals-search-bar input,
html[data-theme="dark"] .crm-deals-stage-select select {
  color: #e8eef6;
}

/* ==== CRM Tasks add form + list :: modeb-tasks-form (live-only) ==== */
.crm-tasks-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 0.55rem;
}
.crm-tasks-table {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  overflow-x: hidden;
}
.crm-tasks-head,
.crm-tasks-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(4.8rem, 0.75fr) minmax(4.4rem, 0.55fr) 6.4rem;
  align-items: center;
  column-gap: 0.45rem;
}
.crm-tasks-head {
  padding: 0.4rem 0.85rem;
  border-radius: 0.95rem;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
  border: 1px solid #e6edf5;
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(15, 23, 42, 0.04);
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.01em;
  text-transform: none;
}
.crm-tasks-head span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.crm-tasks-head[data-selecting="true"] {
  padding-left: calc(0.85rem + 1.65rem);
}
.crm-tasks-head span[data-col="action"] {
  justify-content: flex-end;
}
.crm-tasks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.crm-tasks-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(4.8rem, 0.75fr) minmax(4.4rem, 0.55fr) 6.4rem;
  align-items: center;
  gap: 0.45rem;
  background: #fff;
  border: 1px solid #e8eef4;
  border-left: 3px solid #f59e0b;
  border-radius: 0.9rem;
  padding: 0.62rem 0.8rem;
}
.crm-tasks-row[data-status="completed"] {
  border-left-color: #22c55e;
}
.crm-tasks-row-main {
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.crm-tasks-row-main strong {
  font-size: 0.88rem;
  font-weight: 750;
  color: #0f172a;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-tasks-when {
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 650;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-tasks-status {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 750;
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  background: #ffedd5;
  color: #c2410c;
}
.crm-tasks-status[data-status="completed"] {
  background: #dcfce7;
  color: #15803d;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row {
  background: linear-gradient(180deg, #fbfaff 0%, #fff 72%);
  border: 1px solid #ece7f8;
  border-left: 0;
  border-radius: 1rem;
  padding: 0.62rem 0.8rem 0.62rem 0.95rem;
  box-shadow: 0 8px 18px rgba(76, 29, 149, 0.05);
  position: relative;
  overflow: hidden;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-head {
  padding-left: 0.95rem;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  bottom: 0.55rem;
  width: 0.28rem;
  border-radius: 999px;
  background: #818cf8;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row[data-priority="low"]::before {
  background: #2dd4bf;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row[data-priority="normal"]::before {
  background: #818cf8;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row[data-priority="high"]::before {
  background: #f43f5e;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row[data-status="completed"] {
  background: linear-gradient(180deg, #f4fbf6 0%, #fff 78%);
  border-color: #dbeee0;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row-main {
  min-width: 0;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-row-main strong {
  font-size: 0.9rem;
  font-weight: 780;
  color: #1e1b4b;
}
.crm-tasks-nest {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-left: 0.15rem;
}
.crm-tasks-nest-rail {
  width: 0.7rem;
  height: 0.7rem;
  border-left: 1.5px solid #c4b5fd;
  border-bottom: 1.5px solid #c4b5fd;
  border-bottom-left-radius: 0.28rem;
  display: block;
  flex: 0 0 auto;
  margin-top: -0.15rem;
}
.crm-tasks-priority {
  justify-self: start;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0.4rem;
  padding: 0.12rem 0.45rem 0.12rem 0.55rem;
}
.crm-tasks-priority::before {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 0.08rem;
  transform: rotate(45deg);
  display: inline-block;
  margin-right: 0.32rem;
  vertical-align: 0.05rem;
}
.crm-tasks-priority[data-priority="low"] {
  background: #ccfbf1;
  color: #0f766e;
}
.crm-tasks-priority[data-priority="low"]::before {
  background: #14b8a6;
}
.crm-tasks-priority[data-priority="normal"] {
  background: #e0e7ff;
  color: #4338ca;
}
.crm-tasks-priority[data-priority="normal"]::before {
  background: #6366f1;
}
.crm-tasks-priority[data-priority="high"] {
  background: #ffe4e6;
  color: #be123c;
}
.crm-tasks-priority[data-priority="high"]::before {
  background: #f43f5e;
}
.sa-form[data-screen="crm-tasks-list"] .crm-tasks-status {
  border-radius: 0.45rem;
  background: #eef2ff;
  color: #4338ca;
}
.crm-tasks-complete {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.crm-tasks-edit {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
}
.crm-tasks-row-acts {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem;
}
.crm-tasks-delete {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: #fff1f2;
  color: #e11d48;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.crm-tasks-bulk {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid #bfe8e4;
  border-radius: 0.8rem;
  background: #ecfeff;
  font-size: 0.78rem;
  font-weight: 650;
  color: #0f766e;
}
.crm-tasks-bulk-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  border-radius: 0.55rem;
  background: #0f766e;
  color: #fff;
  font: inherit;
  font-weight: 750;
  padding: 0.38rem 0.75rem;
  cursor: pointer;
}
.crm-tasks-bulk-clear {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #0f766e;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}
.sheet.sheet-deal-form.sheet-task-bulk {
  width: min(28rem, calc(100% - 1.5rem));
}
.sheet.sheet-deal-form.sheet-task-bulk .sheet-body {
  overflow: hidden auto !important;
  max-height: min(72dvh, 40rem);
}
.lead-form.deal-form-flat .crm-task-bulk-lead {
  margin: 0;
  color: #94a3b8;
  font-size: 0.88rem;
}
.lead-form.deal-form-flat .crm-task-bulk-lead strong {
  color: #334155;
  font-weight: 750;
}
.lead-form.deal-form-flat .crm-task-bulk-delete {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  font-weight: 750;
  color: #0f172a;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e8eef4;
}
.lead-form.deal-form-flat .crm-task-bulk-delete input {
  width: 1rem;
  height: 1rem;
  accent-color: #2563eb;
}
.lead-form.deal-form-flat .crm-task-bulk-actions {
  justify-content: stretch;
  margin-top: 0.2rem;
}
.lead-form.deal-form-flat .crm-task-bulk-actions .primary-btn {
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 0.9rem;
  padding: 0.78rem 1.2rem;
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

.sheet-reminder-form .reminder-form-actions {
  justify-content: flex-start;
}
.sheet-reminder-form .reminder-form-actions .primary-btn {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
html[data-theme="dark"] .crm-tasks-head {
  background: linear-gradient(180deg, #24344c 0%, #1b2940 100%);
  border-color: #334155;
  color: #94a3b8;
  box-shadow: none;
}
html[data-theme="dark"] .crm-tasks-row {
  background: #1b2940;
  border-color: #2a3a52;
}
html[data-theme="dark"] .crm-tasks-row-main strong {
  color: #e8eef6;
}
html[data-theme="dark"] .crm-tasks-when {
  color: #94a3b8;
}
html[data-theme="dark"] .sa-form[data-screen="crm-tasks-list"] .crm-tasks-row {
  background: #172033;
  border-color: #2a3a52;
  box-shadow: none;
}
.crm-task-assignee {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  position: relative;
}
.crm-task-assignee > label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
}
.crm-task-assignee-control {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0 2.5rem 0 2.35rem;
  border: 1px solid #dbe4f0;
  border-radius: 0.85rem;
  background: #fff;
}
.crm-task-assignee-icon {
  position: absolute;
  left: 0.7rem;
  color: #2563eb;
}
.crm-task-assignee-search-icon {
  position: absolute;
  right: 2.55rem;
  color: #94a3b8;
  pointer-events: none;
}
.crm-task-assignee-control input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  color: #0f172a;
  outline: none;
}
.crm-task-assignee-control .mic-btn,
.crm-task-assignee-control .voice-btn {
  position: absolute;
  right: 0.35rem;
}
.crm-task-assignee-options {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  top: calc(100% + 0.25rem);
  max-height: 14rem;
  overflow: auto;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: #0f2744;
  border-radius: 0.7rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}
.crm-task-assignee-options button {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-radius: 0.45rem;
  cursor: pointer;
  font: inherit;
}
.crm-task-assignee-options button strong {
  font-size: 0.86rem;
  font-weight: 700;
}
.crm-task-assignee-options button span {
  font-size: 0.72rem;
  color: #cbd5e1;
}
.crm-task-assignee-options li[aria-selected="true"] button,
.crm-task-assignee-options button:hover {
  background: #93c5fd;
  color: #0f172a;
}
.crm-task-assignee-options li[aria-selected="true"] button span,
.crm-task-assignee-options button:hover span {
  color: #1e293b;
}
.crm-task-assignee-empty {
  padding: 0.55rem 0.65rem;
  color: #94a3b8;
  font-size: 0.8rem;
}

/* ==== Deals list modern cards :: modeb-deals-modern (live-only) ==== */
.crm-deals-list-page {
  gap: 0.75rem;
}
.crm-deals-list-page .crm-deals-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.crm-deals-list-page .crm-deals-stats article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.7rem 0.65rem 0.65rem;
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 1rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}
.crm-deals-list-page .crm-deals-stats article + article {
  border-left: 1px solid #e8eef5;
}
.crm-deals-list-page .crm-deals-stat-icon {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.7rem;
}
.crm-deals-list-page .crm-deals-stats em {
  display: block;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.crm-deals-list-page .crm-deals-stats strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-deals-list-page .crm-deals-list {
  gap: 0.65rem;
  padding: 0.1rem 0.05rem 0.6rem;
}
.crm-deals-list-page .crm-deals-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: none;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid #e8eef5;
  border-left: 0;
  border-radius: 1.1rem;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}
.crm-deals-list-page .crm-deals-row.selectable-record {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas: none;
}
.crm-deals-mark {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.8rem;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  background: #eff6ff;
  color: #1d4ed8;
}
.crm-deals-mark[data-tone="green"] { background: #ecfdf3; color: #15803d; }
.crm-deals-mark[data-tone="rose"] { background: #fff1f2; color: #be123c; }
.crm-deals-mark[data-tone="yellow"] { background: #fefce8; color: #a16207; }
.crm-deals-mark[data-tone="orange"] { background: #fff7ed; color: #c2410c; }
.crm-deals-mark[data-tone="purple"] { background: #f5f3ff; color: #6d28d9; }
.crm-deals-list-page .crm-deals-row-main {
  grid-area: auto;
  min-width: 0;
  gap: 0.22rem;
}
.crm-deals-list-page .crm-deals-row-main strong {
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.25;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.crm-deals-list-page .crm-deals-row-main span {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.76rem;
  font-weight: 550;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.crm-deals-list-page .crm-deals-row-main span svg {
  flex-shrink: 0;
  color: #94a3b8;
}
.crm-deals-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.32rem;
  min-width: 5.4rem;
}
.crm-deals-list-page .crm-deals-row-amount {
  grid-area: auto;
  justify-self: end;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.crm-deals-list-page .crm-deals-row-stage {
  grid-area: auto;
  justify-self: end;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  padding: 0.28rem 1.35rem 0.28rem 0.58rem;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  max-width: 8.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.35rem center;
  background-size: 0.75rem;
}
.crm-deals-stage-pick {
  display: inline-flex;
  justify-content: flex-end;
}
.crm-deals-list-page .crm-deals-row-stage:disabled {
  cursor: wait;
  opacity: 0.7;
}
.crm-deals-list-page .crm-deals-pagination {
  padding: 0.15rem 0 0.35rem;
}
html[data-theme="dark"] .crm-deals-list-page .crm-deals-stats article,
html[data-theme="dark"] .crm-deals-list-page .crm-deals-row {
  background: #1b2940 !important;
  border-color: #2a3a52 !important;
}
html[data-theme="dark"] .crm-deals-list-page .crm-deals-stats strong,
html[data-theme="dark"] .crm-deals-list-page .crm-deals-row-main strong,
html[data-theme="dark"] .crm-deals-list-page .crm-deals-row-amount {
  color: #e8eef6;
}
html[data-theme="dark"] .crm-deals-mark {
  background: #152033;
}

/* ==== Deals list: restore page scroll (kanban used a locked 100dvh shell) ==== */
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) {
  overflow: visible !important;
  overflow-x: hidden !important;
  height: auto !important;
  max-height: none !important;
}
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-opportunities-list"]) .sa-form-list,
.sa-form[data-screen="crm-opportunities-list"],
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-body,
.crm-deals-board,
.crm-deals-list-page {
  height: auto !important;
  max-height: none !important;
  min-height: 0;
  overflow: visible !important;
  flex: 0 1 auto;
}
.crm-deals-list,
.crm-deals-list-page .crm-deals-list {
  flex: 0 1 auto;
  min-height: 0;
  overflow: visible !important;
  padding-bottom: 1.25rem;
}
.crm-deals-list-page .crm-deals-pagination {
  padding-bottom: 0.85rem;
}

/* ==== Deals / Tasks / Reminders header + matches Leads add icon ==== */
.mode-b-shell .crm-deals-title-actions .crm-leads-btn.icon-only,
.mode-b-shell .crm-leads-title-actions .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-btn.icon-only,
.mode-b-shell .sa-form[data-screen="crm-expenses-list"] > .sa-form-head .crm-leads-btn.icon-only {
  flex: 0 0 auto;
  width: 2.65rem !important;
  height: 2.65rem !important;
  padding: 0 !important;
  gap: 0;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.mode-b-shell .crm-deals-title-actions .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .crm-leads-title-actions .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"],
.mode-b-shell .sa-form[data-screen="crm-expenses-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"] {
  background: #2563eb !important;
  border: 1px solid #2563eb !important;
  color: #fff !important;
}
.mode-b-shell .crm-deals-title-actions .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .crm-leads-title-actions .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover,
.mode-b-shell .sa-form[data-screen="crm-expenses-list"] > .sa-form-head .crm-leads-btn.icon-only[data-kind="add"]:hover {
  background: #1d4ed8 !important;
}
.mode-b-shell .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-btn.icon-only svg,
.mode-b-shell .sa-form[data-screen="crm-expenses-list"] > .sa-form-head .crm-leads-btn.icon-only svg {
  display: block;
}
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head {
  align-items: center;
}
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-icon-btn,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-icon-btn,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-icon-btn,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-icon-btn,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-icon-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid #e8eef4;
  background: #fff;
  color: #64748b;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-tasks-list"] > .sa-form-head .crm-leads-icon-btn:hover,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-reminders-list"] > .sa-form-head .crm-leads-icon-btn:hover,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-meetings-list"] > .sa-form-head .crm-leads-icon-btn:hover,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-activities-list"] > .sa-form-head .crm-leads-icon-btn:hover,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-icon-btn.active,
.mode-b-shell .sa-form[data-screen="crm-notes-list"] > .sa-form-head .crm-leads-icon-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}

/* ==== Estimate/invoice add form: nested steps, no sheet scroll ==== */
.sheet.sheet-estimate-stepped {
  overflow: hidden;
}
.sheet.sheet-estimate-stepped .sheet-body {
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  max-height: min(78dvh, 36rem);
}
.sheet.sheet-estimate-stepped .lead-form-stepped {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.lead-form .lead-form-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}
.lead-form .lead-form-step {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
}
.lead-form .lead-form-step em {
  font-style: normal;
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 0.68rem;
}
.lead-form .lead-form-step.active,
.lead-form .lead-form-step[data-on] {
  color: #0f172a;
}
.lead-form .lead-form-step.active em,
.lead-form .lead-form-step[data-on] em {
  background: #2563eb;
  color: #fff;
}
.sheet.sheet-estimate-stepped .lead-form-panel {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.sheet.sheet-estimate-stepped .lead-form-panel[data-step="items"] {
  overflow-y: auto;
  scrollbar-width: none;
}
.sheet.sheet-estimate-stepped .lead-form-panel[data-step="items"]::-webkit-scrollbar {
  display: none;
}
.sheet.sheet-estimate-stepped .lead-form-actions {
  flex-shrink: 0;
  margin-top: auto;
}

/* ==== Estimate/invoice print document (clean full-screen PY UI) ==== */
.overlay.overlay-commerce-print {
  align-items: stretch;
  justify-content: center;
  padding: 0 !important;
  background: #eef3f8;
  z-index: 320;
  overflow: hidden;
}
.commerce-print-screen {
  width: min(100%, var(--mode-b-core-width, 900px));
  max-width: var(--mode-b-core-width, 900px);
  height: 100%;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #f4f7fb;
  box-shadow: 0 0 0 1px #e8eef5;
}
.commerce-print-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem 0.55rem;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #e8eef5;
  border-radius: 0;
  z-index: 2;
}
.commerce-print-toolbar-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1 1 auto;
}
.commerce-print-titles {
  min-width: 0;
}
.commerce-print-toolbar h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 750;
  color: #12202b;
  line-height: 1.1;
}
.commerce-print-titles p {
  margin: 0.12rem 0 0;
  font-size: 0.75rem;
  font-weight: 650;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.commerce-print-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  align-items: center;
  flex: 0 0 auto;
}
.commerce-print-wa {
  border: 0;
  border-radius: 999px;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 0.55rem;
  background: #16a34a;
  color: #fff;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.commerce-print-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.75rem 0.75rem 1rem;
}
.commerce-print-paper {
  background: #fff;
  border: 1px solid #e8eef4;
  border-radius: 1.05rem;
  min-height: unset;
  width: 100%;
  max-width: none;
  padding: 1.05rem 1rem 1.2rem;
  color: #0f172a;
  box-sizing: border-box;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.commerce-print-brand {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #e2e8f0;
}
.commerce-print-company {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #2563eb;
}
.commerce-print-logo {
  display: block;
  max-height: 80px;
  max-width: 260px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.commerce-print-kind {
  text-align: right;
}
.commerce-print-kind > p:first-child {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #2563eb;
}
.commerce-print-meta {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 0.85rem;
  margin: 1rem 0 1.05rem;
}
.commerce-print-label {
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}
.commerce-print-meta dl {
  margin: 0;
  display: grid;
  gap: 0.45rem;
  text-align: right;
}
.commerce-print-meta dt {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}
.commerce-print-meta dd {
  margin: 0.05rem 0 0;
  font-weight: 700;
}
.commerce-print-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.commerce-print-lines > li {
  border: 1px solid #e8eef4;
  border-radius: 0.85rem;
  padding: 0.7rem 0.75rem;
  background: #f8fafc;
}
.commerce-print-line-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.commerce-print-line-top strong {
  min-width: 0;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.commerce-print-line-top span {
  flex: 0 0 auto;
  font-weight: 800;
  color: #0f172a;
}
.commerce-print-line-meta {
  margin: 0.55rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}
.commerce-print-line-meta div {
  min-width: 0;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 0.65rem;
  padding: 0.35rem 0.45rem;
}
.commerce-print-line-meta dt {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.commerce-print-line-meta dd {
  margin: 0.12rem 0 0;
  font-size: 0.78rem;
  font-weight: 750;
  color: #0f172a;
  overflow-wrap: anywhere;
}
.commerce-print-line-meta dd em {
  display: block;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 650;
  color: #64748b;
  margin-top: 0.08rem;
}
.commerce-print-line-note {
  margin: 0.3rem 0 0;
  color: #64748b;
  font-size: 0.75rem;
  line-height: 1.35;
}
.commerce-print-totals {
  margin-left: auto;
  margin-top: 0.85rem;
  width: min(16rem, 100%);
  display: grid;
  gap: 0.35rem;
  font-size: 0.85rem;
}
.commerce-print-totals p {
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: #475569;
}
.commerce-print-total {
  font-weight: 800;
  color: #0f172a !important;
  padding-top: 0.35rem;
  border-top: 1px solid #e2e8f0;
}
.commerce-print-notes {
  margin-top: 1.1rem;
  font-size: 0.82rem;
}
.commerce-print-foot {
  flex: 0 0 auto;
  padding: 0.7rem 0.75rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid #e8eef5;
}
.commerce-print-foot .primary-btn {
  width: 100%;
}
@media print {
  body * {
    visibility: hidden;
  }
  .commerce-print-paper,
  .commerce-print-paper * {
    visibility: visible;
  }
  .overlay.overlay-commerce-print,
  .commerce-print-screen,
  .commerce-print-body {
    position: static !important;
    background: #fff;
    overflow: visible !important;
    height: auto;
    padding: 0;
  }
  .commerce-print-paper {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: auto;
    border: 0;
    box-shadow: none;
  }
  .no-print {
    display: none !important;
  }
}

/* ==== Estimate customer searchable select ==== */
.commerce-customer-picker {
  position: relative;
}
.commerce-customer-menu {
  position: fixed;
  z-index: 260;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  max-height: min(18rem, calc(100dvh - 1.5rem));
  overflow: auto;
  background: #fff;
  border: 1px solid #d7e2ee;
  border-radius: 0.85rem;
  box-shadow: 0 16px 40px color-mix(in srgb, #0f172a 18%, transparent);
}
.commerce-customer-menu li {
  margin: 0;
}
.commerce-customer-menu button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0.45rem 0.75rem;
  text-align: left;
  cursor: pointer;
  color: #0f172a;
}
.commerce-customer-menu button:hover,
.commerce-customer-menu button[aria-selected="true"] {
  background: #eff6ff;
}
.commerce-customer-menu .muted {
  padding: 0.45rem 0.75rem;
}
.sa-form.crm-fb-shell > .sa-form-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0 0 0.7rem;
  border-bottom: 1px solid #eef2f6;
}
.sa-form.crm-fb-shell > .sa-form-head .sa-form-pict {
  display: none;
}
.sa-form.crm-fb-shell > .sa-form-head h1 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 750;
  text-align: left;
  color: #163a5f;
}
.sa-form.crm-fb-shell > .sa-form-head .sa-form-titles {
  flex: 1;
  min-width: 0;
}
.crm-fb-head-actions {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-left: auto;
  flex-shrink: 0;
}
.sa-form.crm-fb-shell .crm-fb-head-actions .primary-btn {
  width: auto;
  min-width: 4.75rem;
  min-height: 2.3rem;
  padding: 0.4rem 1.05rem;
}
.crm-fb-print-header {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #fff;
}
.crm-fb-print-header h2 {
  margin: 0;
  font-size: 1rem;
  color: #163a5f;
}
.crm-fb-form-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.crm-fb-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.4rem 0.95rem;
  border-radius: 0.8rem;
  border: 1.5px solid #c4b5fd;
  background: #f5f3ff;
  color: #5b21b6;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.crm-fb-print-save {
  width: auto;
  min-width: 7rem;
  min-height: 2.3rem;
  padding: 0.4rem 1rem;
  justify-self: start;
}
.crm-print-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.crm-print-fields label,
.crm-print-fields-wide {
  display: grid;
  gap: 0.28rem;
  font-size: 0.8rem;
  font-weight: 650;
  color: #334155;
}
.crm-print-fields-wide {
  grid-column: 1 / -1;
}
.crm-print-fields input,
.crm-print-fields textarea {
  min-height: 2.35rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.7rem;
  padding: 0.4rem 0.7rem;
  font: inherit;
}
.crm-print-form-link {
  margin: 0 0 0.5rem;
}
.crm-print-form-link a,
.crm-fb-print-header-row a {
  font-weight: 700;
  color: #2563eb;
}
.crm-print-editor {
  display: grid;
  gap: 1rem;
  max-width: var(--mode-b-core-width, 900px);
  margin-inline: auto;
  width: 100%;
}
.crm-print-editor.is-edit .crm-fb-print-header {
  width: 100%;
}
.crm-print-editor.is-preview {
  max-width: 52rem;
}
.crm-print-live {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}
.crm-print-live h2 {
  margin: 0;
  font-size: 1rem;
  color: #163a5f;
}
.crm-print-live .commerce-print-paper {
  margin: 0;
}
@media (max-width: 36rem) {
  .crm-print-fields {
    grid-template-columns: 1fr;
  }
}
.crm-fb-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.45rem;
}
.crm-fb-preview {
  display: inline-flex;
  align-items: center;
  min-height: 2.3rem;
  padding: 0 0.9rem;
  border-radius: 0.75rem;
  border: 1.5px solid #3b82f6;
  background: #eff6ff;
  color: #1d4ed8;
  font: inherit;
  font-weight: 700;
}
.crm-fb-canvas {
  background: #fff;
  border-radius: 1.1rem;
  padding: 1.05rem 0.95rem 1.2rem;
  box-shadow: 0 10px 28px #12202b0f;
  width: 100%;
  max-width: var(--mode-b-core-width, 900px);
  margin-inline: auto;
  box-sizing: border-box;
}
.crm-fb-page {
  width: 100%;
  max-width: var(--mode-b-core-width, 900px);
  margin-inline: auto;
}
.crm-fb-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 750;
  color: #163a5f;
}
.crm-fb-lede {
  margin: 0.2rem 0 0.85rem;
  color: #8a97a8;
  font-size: 0.9rem;
}
.crm-fb-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.9rem;
}
.crm-fb-step {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
}
.crm-fb-step.is-on {
  border-color: #3b82f6;
  color: #1d4ed8;
  background: #eff6ff;
}
.crm-fb-unused {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  color: #64748b;
}
.crm-fb-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 0.75rem;
}
.crm-fb-block {
  position: relative;
  grid-column: span 6;
  background: #f4f7fb;
  border: 1px solid transparent;
  border-radius: 0.85rem;
  padding: 0.85rem 0.9rem 0.95rem 1.7rem;
  min-width: 0;
}
.crm-fb-block[data-span="full"] {
  grid-column: 1 / -1;
}
.crm-fb-block.is-selected {
  background: #fff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}
.crm-fb-block.is-dragging {
  opacity: 0.7;
}
.crm-fb-handle {
  position: absolute;
  left: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 0.2rem;
  cursor: grab;
}
.crm-fb-grip {
  display: block;
  width: 12px;
  height: 16px;
  background: radial-gradient(#94a3b8 1.35px, transparent 1.55px);
  background-size: 6px 6px;
}
.crm-fb-knob {
  position: absolute;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
  z-index: 3;
}
.crm-fb-knob-n { top: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.crm-fb-knob-s { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.crm-fb-knob-e { right: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.crm-fb-knob-w { left: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.crm-fb-knob-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.crm-fb-knob-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.crm-fb-knob-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.crm-fb-knob-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.crm-fb-field-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 650;
  color: #64748b;
}
.crm-fb-field-label strong {
  color: #334155;
  font-weight: 700;
}
.crm-fb-field-label em {
  color: #dc2626;
  font-style: normal;
}
.crm-fb-input {
  width: 100%;
  min-height: 2.45rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.7rem;
  background: #fff;
  padding: 0.55rem 0.75rem;
  font: inherit;
  color: #94a3b8;
}
.crm-fb-size {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  margin-top: 0.55rem;
  align-items: center;
  justify-content: flex-end;
}
.crm-fb-remove {
  border: 0;
  background: transparent;
  color: #be185d;
  font: inherit;
  cursor: pointer;
}
.crm-fb-add {
  display: grid;
  place-items: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 5.2rem;
  margin-top: 0.85rem;
  border: 1.5px dashed #d5dee8;
  border-radius: 0.95rem;
  background: #fff;
  color: #94a3b8;
  font: inherit;
  cursor: pointer;
}
.crm-fb-add-plus {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1.5px solid #cbd5e1;
  display: grid;
  place-items: center;
}
@media (max-width: 36rem) {
  .crm-fb-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.overlay.overlay-crm-fb-modal {
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #0f172a66;
}
.crm-fb-modal {
  width: min(34rem, 100%);
  max-height: min(90dvh, 52rem);
  overflow: auto;
  background: #fff;
  border-radius: 1.15rem;
  padding: 1rem 1rem 1.1rem;
  box-shadow: 0 18px 48px #12202b22;
}
.crm-fb-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.crm-fb-modal-head h2 {
  margin: 0;
  font-size: 1.15rem;
  color: #163a5f;
}
.crm-fb-close {
  border: 0;
  background: transparent;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
}
.crm-fb-search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.85rem 0;
  background: #f1f5f9;
  border-radius: 0.85rem;
  padding: 0.45rem 0.7rem;
}
.crm-fb-search input {
  border: 0;
  background: transparent;
  width: 100%;
  font: inherit;
}
.crm-fb-catalog {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.crm-fb-catalog-card {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  text-align: left;
  border: 1px solid #e2e8f0;
  border-radius: 0.9rem;
  background: #fff;
  padding: 0.7rem;
  font: inherit;
  cursor: pointer;
}
.crm-fb-catalog-card:hover {
  border-color: #c4b5fd;
  background: #f8f5ff;
}
.crm-fb-catalog-card em {
  display: block;
  font-style: normal;
  color: #94a3b8;
  font-size: 0.78rem;
}
.crm-fb-catalog-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: #dbeafe;
  color: #2563eb;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 800;
}
.crm-fb-settings {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.85rem;
}
.crm-fb-settings-kind {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-weight: 700;
  color: #163a5f;
}
.crm-fb-settings label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 650;
  color: #334155;
}
.crm-fb-settings input,
.crm-fb-settings select {
  min-height: 2.4rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.7rem;
  padding: 0.45rem 0.7rem;
  font: inherit;
}
.crm-fb-check {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
}
.crm-fb-check input {
  width: 1.05rem;
  min-height: 1.05rem;
}
.crm-fb-options {
  display: grid;
  gap: 0.45rem;
}
.crm-fb-options p {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 650;
}
.crm-fb-option-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.crm-fb-option-row input {
  flex: 1;
  min-width: 0;
}
.crm-fb-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  align-items: center;
}
.crm-fb-modal .crm-fb-save {
  width: auto;
  min-width: 6.5rem;
  min-height: 2.4rem;
  padding: 0.45rem 1.1rem;
}
.crm-fb-choice-preview,
.crm-fb-live-field {
  display: grid;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: #334155;
}
.crm-fb-choice-preview label,
.crm-fb-live-field .crm-fb-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.crm-fb-live-field select[multiple] {
  min-height: 5.5rem;
}
.crm-fb-rating {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  font-size: 1.1rem;
  color: #7c3aed;
}
.crm-fb-rating label {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.commerce-builder-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.75rem 0 0;
}
.commerce-form-preview-kicker {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2563eb;
}
.commerce-form-preview-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: auto;
  max-height: min(70dvh, 36rem);
}
.commerce-layout-cell[data-span="full"] {
  grid-column: 1 / -1;
}
.commerce-layout-cell {
  width: min(100%, var(--fb-w, 100%));
  max-width: min(var(--fb-w, none), var(--mode-b-core-width, 900px));
}
.commerce-layout-cell .field-control,
.commerce-layout-cell .field-control input,
.commerce-layout-cell .field-control select,
.commerce-layout-cell .field > input {
  min-height: var(--fb-h, 2.45rem);
  height: var(--fb-h, auto);
}
.commerce-layout-cell textarea {
  min-height: var(--fb-h, 4rem);
  height: var(--fb-h, auto);
}

/* Estimate / invoice status chips (replaces "All 2 Ã‚Â· Draft 2" text) */
.crm-commerce-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0 0 0.7rem;
}
.crm-commerce-metric {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  border-radius: 0.85rem;
  border: 1px solid #e8eef5;
  background: #f8fafc;
}
.crm-commerce-metric em {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.crm-commerce-metric strong {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-commerce-metric.is-paid {
  background: #ecfdf5;
  border-color: #bbf7d0;
}
.crm-commerce-metric.is-paid strong { color: #047857; }
.crm-commerce-metric.is-due {
  background: #fef2f2;
  border-color: #fecaca;
}
.crm-commerce-metric.is-due strong { color: #b91c1c; }
.crm-commerce-metric.is-open {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.crm-commerce-metric.is-open strong { color: #1d4ed8; }
.crm-commerce-status-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.1rem 0 0.15rem;
}
.crm-commerce-status-bar::-webkit-scrollbar {
  display: none;
}
.crm-commerce-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  border-radius: 999px;
  padding: 0.38rem 0.7rem 0.38rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.crm-commerce-status-chip.is-active {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: 0 0 0 3px color-mix(in srgb, #2563eb 12%, transparent);
}
.crm-commerce-status-count {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  background: #f1f5f9;
  color: #334155;
}
.crm-commerce-status-chip.is-active .crm-commerce-status-count {
  background: #2563eb;
  color: #fff;
}

/* ==== CRM overlay drawer nav :: modeb-crm-drawer-nav (2026-09-08) ==== */
.mode-b-nav-list {
  display: contents;
}
.mode-b-nav-toggle {
  display: none;
}
/* Single-column shell: nav never reserves layout width; content stays full-bleed. */
.mode-b-shell[data-mode-b="crm"] {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "header"
    "main"
    "footer";
  column-gap: 0 !important;
  row-gap: 0;
  width: 100% !important;
  max-width: var(--mode-b-core-width) !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
  padding-left: var(--mode-b-core-pad) !important;
  padding-right: var(--mode-b-core-pad) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.mode-b-shell[data-mode-b="crm"] > .workspace-header.mode-b-header,
.mode-b-shell[data-mode-b="crm"] > header.mode-b-header,
.mode-b-shell[data-mode-b="crm"] .workspace-header.mode-b-header {
  grid-area: header;
  position: sticky;
  top: 0;
  z-index: calc(var(--mode-b-chrome-z) + 2);
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Dim page when drawer is open (simple content difference). */
.mode-b-shell[data-mode-b="crm"] > .mode-b-nav-backdrop {
  display: none;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-backdrop {
  position: absolute;
  inset: 0;
  z-index: calc(var(--mode-b-chrome-z) + 2);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(15, 23, 42, 0.22);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.22s ease;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav-backdrop {
  display: block;
  opacity: 1;
  pointer-events: auto;
}
/* Overlay rail: never takes layout space; sits over content on the left. */
.mode-b-shell[data-mode-b="crm"] > .mode-b-nav,
.mode-b-shell[data-mode-b="crm"] .mode-b-nav {
  grid-area: unset !important;
  position: absolute !important;
  inset: auto !important;
  left: 0.35rem !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: calc(var(--mode-b-chrome-z) + 4);
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: min(78dvh, 28rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 1.35rem !important;
  box-shadow: none !important;
  overflow: visible !important;
  pointer-events: none;
  transition: background-color 0.22s ease, box-shadow 0.22s ease, padding 0.22s ease, gap 0.22s ease;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] > .mode-b-nav,
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav {
  gap: 0.7rem !important;
  padding: 0.45rem !important;
  background: #fff !important;
  border: 1px solid #e8eef5 !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14) !important;
  pointer-events: auto;
  animation: modeb-crm-drawer-slide-in 0.28s ease-out both;
}
@keyframes modeb-crm-drawer-slide-in {
  from {
    opacity: 0.55;
    transform: translate(-0.85rem, -50%);
  }
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  z-index: 2;
  order: 0;
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  margin: 0;
  padding: 0;
  border: 1px solid #e8eef5;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  pointer-events: auto;
  transition: box-shadow 0.15s ease, background-color 0.15s ease, transform 0.18s ease;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-toggle:hover {
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-toggle:active {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-toggle-icon {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  background: no-repeat center / contain;
  transition: transform 0.2s ease;
  /* Closed: right arrow Ã¢â‚¬â€ open menu */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>");
}
/* Open: same-spot close arrow (flipped) + menu icons stacked below. */
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav-toggle {
  width: 2.15rem;
  height: 2.15rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav-toggle-icon {
  width: 1.05rem;
  height: 1.05rem;
  /* Left arrow Ã¢â‚¬â€ close menu (same place as open control) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'><path d='M15 6 9 12l6 6'/></svg>");
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  position: relative;
  left: auto;
  top: auto;
  transform: translateX(-0.65rem);
  order: 1;
  width: auto;
  max-height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    transform 0.26s ease,
    max-height 0.26s ease,
    visibility 0.2s ease;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav-list {
  max-height: 22rem;
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  overflow: visible;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="false"] .mode-b-nav-list {
  display: none !important;
  pointer-events: none !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item {
  flex: 0 0 auto !important;
  width: 2rem !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 2rem !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background: #f8fafc !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  border: 1px solid #e8eef5 !important;
  color: #64748b !important;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(-0.55rem);
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item {
  opacity: 1;
  transform: translateX(0);
  animation: modeb-crm-nav-item-in 0.28s ease-out both;
}
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(1) { animation-delay: 0.03s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(2) { animation-delay: 0.06s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(3) { animation-delay: 0.09s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(4) { animation-delay: 0.12s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(5) { animation-delay: 0.15s; }
.mode-b-shell[data-mode-b="crm"][data-nav-open="true"] .mode-b-nav .mode-b-nav-item:nth-child(6) { animation-delay: 0.18s; }
@keyframes modeb-crm-nav-item-in {
  from {
    opacity: 0;
    transform: translateX(-0.7rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item.active {
  background: #eff6ff !important;
  color: #0f172a !important;
  border-color: #bfdbfe !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item:before {
  margin: 0 !important;
  padding: 0 !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item[href="/app/crm"]:before,
.mode-b-shell[data-mode-b="crm"] .mode-b-nav .mode-b-nav-item[href="/app/crm/"]:before {
  padding: 0 !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}
.mode-b-shell[data-mode-b="crm"] .mode-b-nav-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.mode-b-shell[data-mode-b="crm"] > a.skip {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  background: transparent !important;
  color: transparent !important;
}
.mode-b-shell[data-mode-b="crm"] > a.skip:focus,
.mode-b-shell[data-mode-b="crm"] > a.skip:focus-visible {
  position: fixed !important;
  left: 0.75rem !important;
  top: 0.75rem !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  clip: auto !important;
  overflow: visible !important;
  padding: 0.4rem 0.7rem !important;
  border-radius: 0.6rem !important;
  background: #0f172a !important;
  color: #fff !important;
  z-index: 100 !important;
}
.mode-b-shell[data-mode-b="crm"] > main,
.mode-b-shell[data-mode-b="crm"] main,
.mode-b-shell[data-mode-b="crm"] #main {
  grid-area: main;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0.75rem !important;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.mode-b-shell[data-mode-b="crm"] > .mode-b-footer,
.mode-b-shell[data-mode-b="crm"] .mode-b-footer {
  grid-area: footer;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0.75rem !important;
}
.mode-b-shell[data-mode-b="crm"] .page-container,
.mode-b-shell[data-mode-b="crm"] .crm-fb-page,
.mode-b-shell[data-mode-b="crm"] .crm-fb-canvas {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
}
@media (max-width: 40rem) {
  .mode-b-shell[data-mode-b="crm"] {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
  }
  .mode-b-shell[data-mode-b="crm"] .mode-b-nav {
    left: 0.05rem !important;
    gap: 0.7rem !important;
  }
  .mode-b-shell[data-mode-b="crm"] .mode-b-nav-list {
    gap: 0.9rem;
  }
}

/* ==== Leads page backgrounds :: modeb-people-white-bg (updated Ã¢â€ â€™ Mode A core #f6f8fc)
   Match Contacts core surface. Row zebra handled separately. ==== */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"],
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  background-image: none !important;
}
.sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.mode-b-shell .sa-form[data-screen="crm-leads-list"] > .sa-form-body {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
}
.mode-b-shell main:has([data-screen="crm-leads-list"]),
.mode-b-shell main:has([data-screen="crm-leads-list"]) .page-container,
.mode-b-shell main:has([data-screen="crm-leads-list"]) .sa-form-list {
  background: #f6f8fc !important;
}

/* ==== CRM Expense Management page :: modeb-crm-expenses (2026-09-09) ==== */
.mode-b-shell .sa-form[data-screen="crm-expenses-list"] > .sa-form-head,
.sa-form[data-screen="crm-expenses-list"] > .sa-form-head {
  align-items: center;
  padding-right: 0.85rem;
  box-sizing: border-box;
}
.mode-b-shell .sa-form[data-screen="crm-expenses-list"] > .sa-form-head .crm-leads-title-actions,
.sa-form[data-screen="crm-expenses-list"] > .sa-form-head .crm-leads-title-actions {
  margin-left: auto;
  margin-right: 0.15rem;
  padding-right: 0.25rem;
}
.crm-expense-page {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.crm-expense-graph.crm-expense-month-card {
  margin: 0;
  padding: 1rem 1rem 0.9rem;
  border: 1px solid #e5eaf1;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  position: relative;
  overflow: hidden;
}
.crm-expense-graph.crm-expense-month-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.22rem;
  background: #2563eb;
}
.crm-expense-graph-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.crm-expense-graph-head strong {
  display: block;
  font-size: 0.96rem;
  font-weight: 750;
  color: #0f172a;
}
.crm-expense-month-name {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
}
.crm-expense-month-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}
.crm-expense-month-select {
  position: relative;
  display: inline-flex;
  min-width: 10rem;
}
.crm-expense-month-select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0.4rem 1.9rem 0.4rem 0.7rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.7rem;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 650;
  cursor: pointer;
}
.crm-expense-month-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.7rem;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.crm-expense-month-count {
  flex: 0 0 auto;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid #e2e8f0;
}
.crm-expense-month-empty {
  margin: 0;
  padding: 0.85rem 0.9rem;
  border-radius: 0.8rem;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  font-size: 0.84rem;
  line-height: 1.4;
}
.crm-expense-chart {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.crm-expense-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  font-size: 0.74rem;
  font-weight: 650;
  color: #64748b;
}
.crm-expense-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.crm-expense-month-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  flex: 0 0 auto;
}
.crm-expense-month-dot.is-income {
  background: #16a34a;
}
.crm-expense-month-dot.is-expense {
  background: #e11d48;
}
.crm-expense-chart-plot {
  position: relative;
  min-height: 12.5rem;
  padding: 0.75rem 0.55rem 0.4rem;
  border-radius: 0.85rem;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  overflow: hidden;
}
.crm-expense-chart-grid {
  position: absolute;
  inset: 0.75rem 0.7rem 2.55rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.crm-expense-chart-grid span {
  display: block;
  height: 1px;
  background: #e2e8f0;
  opacity: 0.85;
}
.crm-expense-chart-months {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  min-height: 10.8rem;
  align-items: end;
}
.crm-expense-chart-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}
.crm-expense-chart-pair {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.28rem;
  width: 100%;
}
.crm-expense-chart-rail {
  width: 1.15rem;
  height: 8rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 0.55rem 0.55rem 0.35rem 0.35rem;
  background: rgba(226, 232, 240, 0.45);
  overflow: hidden;
}
.crm-expense-chart-bar {
  display: block;
  width: 100%;
  border-radius: 0.5rem 0.5rem 0.28rem 0.28rem;
  min-height: 0;
  transition: height 0.25s ease;
}
.crm-expense-chart-bar.is-income {
  background: #22c55e;
}
.crm-expense-chart-bar.is-expense {
  background: #f43f5e;
}
.crm-expense-chart-month em {
  font-style: normal;
  font-size: 0.74rem;
  font-weight: 700;
  color: #334155;
}
.crm-expense-chart-month-net {
  font-size: 0.68rem;
  font-weight: 650;
  color: #64748b;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-expense-month-net {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.75rem;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  font-size: 0.8rem;
  color: #64748b;
}
.crm-expense-month-net strong {
  font-size: 1rem;
}
.crm-expense-month-net strong.is-positive {
  color: #15803d;
}
.crm-expense-month-net strong.is-negative {
  color: #be123c;
}
@media (max-width: 40rem) {
  .crm-expense-graph-head {
    flex-direction: column;
  }
  .crm-expense-month-tools {
    width: 100%;
    justify-content: space-between;
  }
  .crm-expense-month-select {
    flex: 1 1 auto;
    min-width: 0;
  }
  .crm-expense-chart-rail {
    width: 0.95rem;
    height: 7rem;
  }
}
.crm-expense-type.is-income {
  color: #15803d;
  font-weight: 700;
}
.crm-expense-type.is-expense {
  color: #be123c;
  font-weight: 700;
}
.crm-expense-type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin: 0 0 0.35rem;
  padding: 0.3rem;
  border: 1px solid #e8eef5;
  border-radius: 999px;
  background: #f8fafc;
}
.crm-expense-type-chip {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 0.75rem;
  font: inherit;
  font-weight: 700;
  color: #64748b;
  background: transparent;
  cursor: pointer;
}
.crm-expense-type-chip.is-active {
  background: #e11d48;
  color: #fff;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.22);
}
.crm-expense-type-chip.is-income.is-active {
  background: #16a34a;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.22);
}
.crm-expense-bill-files {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
.crm-expense-file-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.crm-expense-file-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
}
.crm-expense-file-control {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0.55rem 0.65rem;
  border: 1px dashed #cbd5e1;
  border-radius: 0.9rem;
  background: #f8fafc;
  color: #64748b;
  text-align: center;
  overflow: hidden;
}
.crm-expense-file-control em {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 650;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-expense-file-control input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.crm-expense-form {
  gap: 0.85rem;
}
.crm-expense-form .field[data-as='select'] .field-control {
  display: block;
  position: relative;
  width: 100%;
}
.crm-expense-form .field[data-as='select'] select {
  display: block;
  width: 100%;
  max-width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  box-sizing: border-box;
}
.crm-expense-form .field[data-as='select'] .field-chevron {
  position: absolute;
  top: 50%;
  right: 0.85rem;
  left: auto;
  transform: translateY(-50%);
  pointer-events: none;
  color: #64748b;
}
.crm-expense-row {
  cursor: pointer;
}
.crm-expense-row-meta {
  display: block;
  margin-top: 0.18rem;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-expense-detail {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}
.crm-expense-detail-hero {
  display: grid;
  gap: 0.28rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  border: 1px solid #e6edf5;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}
.crm-expense-detail-hero.is-income {
  border-color: #bbf7d0;
  background: linear-gradient(180deg, #f0fdf4, #ffffff);
}
.crm-expense-detail-hero.is-expense {
  border-color: #fecdd3;
  background: linear-gradient(180deg, #fff1f2, #ffffff);
}
.crm-expense-detail-hero strong {
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.crm-expense-detail-hero p {
  margin: 0;
  color: #64748b;
  font-size: 0.84rem;
  font-weight: 600;
}
.crm-expense-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin: 0;
}
.crm-expense-detail-grid > div,
.crm-expense-detail-wide {
  padding: 0.7rem 0.8rem;
  border-radius: 0.9rem;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}
.crm-expense-detail-wide {
  grid-column: 1 / -1;
}
.crm-expense-detail-grid dt {
  margin: 0 0 0.2rem;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.crm-expense-detail-grid dd {
  margin: 0;
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 650;
  word-break: break-word;
}
.crm-expense-detail-bills h3 {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
  color: #0f172a;
}
.crm-expense-detail-bill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.crm-expense-bill-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.75rem;
  border-radius: 0.95rem;
  border: 1px solid #e6edf5;
  background: #fff;
}
.crm-expense-bill-card.is-openable {
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}
.crm-expense-bill-card.is-empty {
  color: #94a3b8;
  background: #f8fafc;
}
.crm-expense-bill-card.is-empty p {
  margin: 0;
  font-size: 0.82rem;
}
.crm-expense-bill-card-head {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}
.crm-expense-bill-card-label {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 720;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.crm-expense-bill-card-head strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-expense-bill-preview,
.crm-expense-bill-pdf-btn {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid #eef2f7;
  background: #f8fafc;
  cursor: pointer;
  text-align: left;
}
.crm-expense-bill-preview img {
  display: block;
  width: 100%;
  max-height: 11rem;
  object-fit: contain;
  background: #fff;
}
.crm-expense-bill-pdf {
  display: block;
  width: 100%;
  height: 12rem;
  border: 0;
  background: #f8fafc;
  pointer-events: none;
}
.crm-expense-bill-preview-hint {
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  bottom: 0.55rem;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}
.crm-expense-bill-open {
  appearance: none;
  border: 0;
  background: transparent;
  color: #2563eb;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: left;
  padding: 0;
  cursor: pointer;
}
.crm-expense-bill-open:hover {
  text-decoration: underline;
}
.crm-expense-bill-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: rgba(2, 6, 23, 0.92);
  color: #fff;
}
.crm-expense-bill-fullscreen-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: rgba(15, 23, 42, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.crm-expense-bill-fullscreen-meta {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}
.crm-expense-bill-fullscreen-meta span {
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.crm-expense-bill-fullscreen-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
}
.crm-expense-bill-fullscreen-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}
.crm-expense-bill-fullscreen-link,
.crm-expense-bill-fullscreen-close {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.crm-expense-bill-fullscreen-close {
  background: #2563eb;
  border-color: #2563eb;
}
.crm-expense-bill-fullscreen-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0.75rem;
}
.crm-expense-bill-fullscreen-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0.5rem;
  background: #0b1220;
}
.crm-expense-bill-fullscreen-stage iframe {
  width: min(100%, 72rem);
  height: 100%;
  min-height: 70dvh;
  border: 0;
  border-radius: 0.5rem;
  background: #fff;
}
.crm-expense-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
@media (max-width: 640px) {
  .sa-form[data-screen='crm-expenses-list'] .crm-act-cols,
  .sa-form[data-screen='crm-expenses-list'] .crm-expense-row {
    grid-template-columns: minmax(0, 1fr) minmax(5.2rem, auto) 7.6rem;
  }
  .sa-form[data-screen='crm-expenses-list'] .crm-act-cols span[data-col='to'],
  .sa-form[data-screen='crm-expenses-list'] .crm-expense-row .crm-act-due {
    display: block;
    text-align: right;
    font-weight: 750;
  }
  .sa-form[data-screen='crm-expenses-list'] .crm-act-cols span[data-col='type'],
  .sa-form[data-screen='crm-expenses-list'] .crm-act-cols span[data-col='from'],
  .sa-form[data-screen='crm-expenses-list'] .crm-expense-row .crm-act-type,
  .sa-form[data-screen='crm-expenses-list'] .crm-expense-row .crm-act-channel {
    display: none;
  }
  .crm-expense-detail-bill-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 40rem) {
  .crm-expense-bill-files {
    grid-template-columns: 1fr;
  }
  .crm-expense-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ==== People list headers + search left margin :: modeb-leads-header-white (updated Ã¢â€ â€™ core #f6f8fc) ==== */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-head,
.sa-form[data-screen="crm-leads-list"] > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] .sa-form.crm-leads-flat > .sa-form-head,
.sa-form.crm-leads-flat[data-screen="crm-leads-list"] > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .sa-form > .sa-form-head {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  background-image: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-search-wrap,
.sa-form[data-screen="crm-leads-list"] .crm-leads-search-wrap,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-search-wrap,
.sa-form[data-screen="crm-contacts-list"] .crm-leads-search-wrap {
  margin-left: 5px;
  padding-left: 0;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-search-toggle,
.sa-form[data-screen="crm-leads-list"] .crm-leads-search-toggle,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-search-toggle,
.sa-form[data-screen="crm-contacts-list"] .crm-leads-search-toggle {
  margin-left: 0;
}

/* ==== People list gap + zebra row colors :: modeb-leads-list-zebra (2026-09-09) ==== */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: transparent !important;
  background-color: transparent !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li {
  background: transparent !important;
  background-color: transparent !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid #e8eef5 !important;
  border-radius: 0 !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row {
  background: #e8f1fa !important;
  background-color: #e8f1fa !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid #d5e4f2 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Override older contacts blue card outline so rows keep bottom-only lines */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list article.crm-contact-row {
  box-shadow: none !important;
}

/* ==== CRM Mode A design system Ã¢â‚¬â€ unify every CRM page (2026-09-10, server-only) ====
   Extends Leads/Contacts chrome (white head, #f6f8fc canvas, serif titles, blue accents)
   to all sa-form[data-screen^="crm-"] screens. Functionality untouched. */

.mode-b-shell[data-mode-b="crm"] {
  --crm-canvas: #f6f8fc;
  --crm-row-odd: #ffffff;
  --crm-row-even: #e8f1fa;
  --crm-row-line: #e8eef5;
  --crm-row-line-even: #d5e4f2;
  --crm-ink: #0f172a;
  --crm-muted: #64748b;
  --crm-blue: #2563eb;
  --crm-blue-soft: #eff6ff;
  --crm-blue-border: #bfdbfe;
  --crm-panel-border: #e4eef7;
  --crm-surface: #ffffff;
}

/* --- Main canvas: light blue wash behind every CRM page --- */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen^="crm-"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen^="crm-"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen^="crm-"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] {
  background: var(--crm-canvas, #f6f8fc) !important;
  background-color: var(--crm-canvas, #f6f8fc) !important;
}

/* --- Page header: Mode A core (Contacts + Leads); other CRM screens keep white until migrated --- */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"]:not([data-screen="crm-contacts-list"]):not([data-screen="crm-leads-list"]) > .sa-form-head,
.sa-form[data-screen^="crm-"]:not([data-screen="crm-contacts-list"]):not([data-screen="crm-leads-list"]) > .sa-form-head {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem !important;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-head,
.sa-form[data-screen="crm-leads-list"] > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .sa-form > .sa-form-head {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  background-image: none !important;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem !important;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] > .sa-form-head .sa-form-pict,
.sa-form[data-screen^="crm-"] > .sa-form-head .sa-form-pict {
  display: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] > .sa-form-head h1,
.sa-form[data-screen^="crm-"] > .sa-form-head h1 {
  margin: 0;
  font-family: var(--serif) !important;
  font-size: 1.7rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em;
  color: var(--crm-ink, #0f172a) !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] > .sa-form-head .sa-form-titles p,
.sa-form[data-screen^="crm-"] > .sa-form-head .sa-form-titles p {
  color: var(--crm-muted, #64748b);
}

/* Lead detail keeps hidden head / transparent body */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-lead-detail"] > .sa-form-head,
.sa-form[data-screen="crm-lead-detail"] > .sa-form-head {
  display: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-lead-detail"] > .sa-form-body,
.sa-form[data-screen="crm-lead-detail"] > .sa-form-body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* --- Body / list panel: white card on Mode A core canvas --- */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"]:not([data-screen="crm-lead-detail"]) > .sa-form-body,
.sa-form[data-screen^="crm-"]:not([data-screen="crm-lead-detail"]) > .sa-form-body {
  background: var(--crm-surface, #fff) !important;
  border: 1px solid var(--crm-panel-border, #e4eef7) !important;
  box-shadow: 0 16px 40px rgba(18, 32, 43, 0.06) !important;
  border-radius: 1.5rem !important;
  padding: 1rem !important;
  gap: 0.75rem !important;
}

/* --- Shared header action icons (filter / add / import / export) --- */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-title-actions,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-deals-title-actions,
.sa-form[data-screen^="crm-"] .crm-leads-title-actions,
.sa-form[data-screen^="crm-"] .crm-deals-title-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-icon-btn,
.sa-form[data-screen^="crm-"] .crm-leads-icon-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid #e8eef4;
  background: #fff;
  color: #64748b;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-icon-btn.active,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-icon-btn:hover,
.sa-form[data-screen^="crm-"] .crm-leads-icon-btn.active,
.sa-form[data-screen^="crm-"] .crm-leads-icon-btn:hover {
  background: var(--crm-blue-soft, #eff6ff);
  border-color: var(--crm-blue-border, #bfdbfe);
  color: var(--crm-blue, #2563eb);
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-btn.icon-only,
.sa-form[data-screen^="crm-"] .crm-leads-btn.icon-only {
  flex: 0 0 auto;
  width: 2.65rem !important;
  height: 2.65rem !important;
  padding: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  display: inline-grid;
  place-items: center;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-btn.icon-only[data-kind="add"],
.sa-form[data-screen^="crm-"] .crm-leads-btn.icon-only[data-kind="add"] {
  background: var(--crm-blue, #2563eb) !important;
  border: 1px solid var(--crm-blue, #2563eb) !important;
  color: #fff !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-btn.icon-only[data-kind="add"]:hover,
.sa-form[data-screen^="crm-"] .crm-leads-btn.icon-only[data-kind="add"]:hover {
  background: #1d4ed8 !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-search-wrap,
.sa-form[data-screen^="crm-"] .crm-leads-search-wrap {
  margin-left: 5px;
}

/* --- Toolbar / search shared --- */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-act-tools,
.sa-form[data-screen^="crm-"] .crm-leads-toolbar,
.sa-form[data-screen^="crm-"] .crm-act-tools {
  gap: 0.55rem;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-act-search,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-search,
.sa-form[data-screen^="crm-"] .crm-act-search,
.sa-form[data-screen^="crm-"] .crm-leads-search {
  border: 1px solid #e6edf5;
  background: #fff;
  color: var(--crm-ink, #0f172a);
  border-radius: 999px;
}

/* --- Act-table family (tasks/deals/emails/expenses/pipelines/stages/Ã¢â‚¬Â¦) --- */
.mode-b-shell[data-mode-b="crm"] .crm-act-page,
.mode-b-shell[data-mode-b="crm"] .crm-tasks-page,
.sa-form[data-screen^="crm-"] .crm-act-page,
.sa-form[data-screen^="crm-"] .crm-tasks-page {
  gap: 0.7rem;
}
.mode-b-shell[data-mode-b="crm"] .crm-act-cols,
.mode-b-shell[data-mode-b="crm"] .crm-tasks-head,
.sa-form[data-screen^="crm-"] .crm-act-cols,
.sa-form[data-screen^="crm-"] .crm-tasks-head {
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%) !important;
  border: 1px solid #e6edf5 !important;
  border-radius: 0.95rem !important;
  color: var(--crm-muted, #64748b) !important;
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(15, 23, 42, 0.04);
}
.mode-b-shell[data-mode-b="crm"] .crm-act-list,
.mode-b-shell[data-mode-b="crm"] .crm-tasks-list,
.sa-form[data-screen^="crm-"] .crm-act-list,
.sa-form[data-screen^="crm-"] .crm-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: transparent !important;
}
.mode-b-shell[data-mode-b="crm"] .crm-act-list > li:nth-child(odd) .crm-act-row,
.mode-b-shell[data-mode-b="crm"] .crm-act-list > li:nth-child(odd) > .crm-act-row,
.sa-form[data-screen^="crm-"] .crm-act-list > li:nth-child(odd) .crm-act-row {
  background: var(--crm-row-odd, #fff) !important;
  border-color: var(--crm-row-line, #e8eef5) !important;
}
.mode-b-shell[data-mode-b="crm"] .crm-act-list > li:nth-child(even) .crm-act-row,
.mode-b-shell[data-mode-b="crm"] .crm-act-list > li:nth-child(even) > .crm-act-row,
.sa-form[data-screen^="crm-"] .crm-act-list > li:nth-child(even) .crm-act-row {
  background: var(--crm-row-even, #e8f1fa) !important;
  border-color: var(--crm-row-line-even, #d5e4f2) !important;
  box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .crm-act-row,
.sa-form[data-screen^="crm-"] .crm-act-row {
  border-radius: 0.9rem;
  border: 1px solid var(--crm-row-line, #e8eef5);
}
.mode-b-shell[data-mode-b="crm"] .crm-tasks-list > li:nth-child(odd) .crm-tasks-row,
.sa-form[data-screen^="crm-"] .crm-tasks-list > li:nth-child(odd) .crm-tasks-row {
  background: var(--crm-row-odd, #fff) !important;
}
.mode-b-shell[data-mode-b="crm"] .crm-tasks-list > li:nth-child(even) .crm-tasks-row,
.sa-form[data-screen^="crm-"] .crm-tasks-list > li:nth-child(even) .crm-tasks-row {
  background: var(--crm-row-even, #e8f1fa) !important;
  box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .crm-tasks-row,
.sa-form[data-screen^="crm-"] .crm-tasks-row {
  border: 1px solid var(--crm-row-line, #e8eef5);
  border-radius: 0.9rem;
}

/* Meetings modern rows follow same zebra */
.mode-b-shell[data-mode-b="crm"] .crm-meet-modern .crm-tasks-list > li:nth-child(odd) .crm-tasks-row,
.mode-b-shell[data-mode-b="crm"] .crm-meet-modern .crm-act-list > li:nth-child(odd) .crm-act-row {
  background: var(--crm-row-odd, #fff) !important;
}
.mode-b-shell[data-mode-b="crm"] .crm-meet-modern .crm-tasks-list > li:nth-child(even) .crm-tasks-row,
.mode-b-shell[data-mode-b="crm"] .crm-meet-modern .crm-act-list > li:nth-child(even) .crm-act-row {
  background: var(--crm-row-even, #e8f1fa) !important;
}

/* --- Dashboard / More / utility pages --- */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-dashboard"] .crm-dashboard,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-dashboard"] .crm-dashboard-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-home"] .crm-more-page {
  background: transparent;
}
.mode-b-shell[data-mode-b="crm"] .crm-more-nav,
.mode-b-shell[data-mode-b="crm"] .crm-more-list {
  background: transparent;
}
.mode-b-shell[data-mode-b="crm"] a.crm-more-link,
.mode-b-shell[data-mode-b="crm"] .crm-more-link {
  background: var(--crm-row-odd, #fff);
  border: 1px solid var(--crm-row-line, #e8eef5);
  border-radius: 0.95rem;
}
.mode-b-shell[data-mode-b="crm"] a.crm-more-link:hover,
.mode-b-shell[data-mode-b="crm"] .crm-more-link:hover {
  background: var(--crm-blue-soft, #eff6ff);
  border-color: var(--crm-blue-border, #bfdbfe);
}
.mode-b-shell[data-mode-b="crm"] .crm-dash-hero,
.mode-b-shell[data-mode-b="crm"] .crm-dash-card,
.mode-b-shell[data-mode-b="crm"] .crm-dashboard article {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 1rem;
}

/* --- Record / form utility pages --- */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-person"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-company"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-opportunity"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-activity"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-pipeline"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-import"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-export"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-merge"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-catalog"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-today"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-search"] .action-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-tags-list"] .action-card {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 1rem;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

/* --- Deals board: keep kanban readable on blue canvas --- */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-opportunities-list"] > .sa-form-body {
  background: var(--crm-canvas, #f6f8fc) !important;
}
.mode-b-shell[data-mode-b="crm"] .crm-deals-column {
  background: #e8f1fa;
}
.mode-b-shell[data-mode-b="crm"] .crm-deal-card,
.mode-b-shell[data-mode-b="crm"] .crm-deals-stats article {
  background: #fff;
  border: 1px solid #eef2f7;
}

/* --- Form builder / print: match panel chrome --- */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-estimate-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-invoice-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-payment-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-item-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-estimates-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-invoices-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-payments-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-items-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-estimate-print-form"] > .sa-form-body {
  background: var(--crm-canvas, #f6f8fc) !important;
}

/* --- Primary buttons / links accent --- */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .primary-btn,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] button.primary,
.mode-b-shell[data-mode-b="crm"] .sheet-crm-filter .crm-filter-apply {
  background: var(--crm-blue, #2563eb);
  border-color: var(--crm-blue, #2563eb);
  color: #fff;
}

/* --- Responsive --- */
@media (max-width: 640px) {
  .mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] > .sa-form-head h1,
  .sa-form[data-screen^="crm-"] > .sa-form-head h1 {
    font-size: 1.35rem !important;
  }
  .mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"]:not([data-screen="crm-lead-detail"]) > .sa-form-body,
  .sa-form[data-screen^="crm-"]:not([data-screen="crm-lead-detail"]) > .sa-form-body {
    border-radius: 1.1rem !important;
    padding: 0.75rem !important;
  }
  .mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-btn.icon-only,
  .mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] .crm-leads-icon-btn,
  .sa-form[data-screen^="crm-"] .crm-leads-btn.icon-only,
  .sa-form[data-screen^="crm-"] .crm-leads-icon-btn {
    width: 2.4rem !important;
    height: 2.4rem !important;
  }
}
@media (max-width: 40rem) {
  .mode-b-shell[data-mode-b="crm"] main:has([data-screen^="crm-"]) .page-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* ==== end crm-mode-a-unify-all-pages ==== */

/* ==== Contacts list panel = Mode A core #f6f8fc (2026-09-11) ==== */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"],
.sa-form[data-screen="crm-contacts-list"] {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-head,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-head {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  background-image: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 1.5rem !important;
}
/* Zebra on core canvas Ã¢â‚¬â€ no pure white rows */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row {
  background: #e8f1fa !important;
  background-color: #e8f1fa !important;
}

/* ==== Contacts: no white page chrome Ã¢â‚¬â€ Mode A core #f6f8fc only (2026-09-11) ==== */
.mode-b-shell[data-mode-b="crm"]:has([data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"]:has([data-screen="crm-contacts-list"]) > main,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"],
.sa-form[data-screen="crm-contacts-list"],
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-head,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  background-image: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
  border: 0 !important;
  box-shadow: none !important;
}
/* Rows: drop pure white; use core + soft zebra */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list > li .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] article.crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  background-image: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row {
  background: #e8f1fa !important;
  background-color: #e8f1fa !important;
  background-image: none !important;
}

/* ==== Contacts title + outside-list canvas = #f6f8fc (final lock 2026-09-11) ==== */
html:has(.sa-form[data-screen="crm-contacts-list"]),
body:has(.sa-form[data-screen="crm-contacts-list"]),
#root:has(.sa-form[data-screen="crm-contacts-list"]),
.mode-b-shell:has(.sa-form[data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"]:has(.sa-form[data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"]:has(.sa-form[data-screen="crm-contacts-list"]) > main,
.mode-b-shell main:has(> .page-container .sa-form[data-screen="crm-contacts-list"]),
.mode-b-shell main:has(.sa-form[data-screen="crm-contacts-list"]),
.mode-b-shell main:has(.sa-form[data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell main:has(.sa-form[data-screen="crm-contacts-list"]) .sa-form-list,
.mode-b-shell .sa-form[data-screen="crm-contacts-list"],
.sa-form[data-screen="crm-contacts-list"] {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  background-image: none !important;
}
.mode-b-shell .sa-form[data-screen="crm-contacts-list"] > .sa-form-head,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-head,
.mode-b-shell main:has(.sa-form[data-screen="crm-contacts-list"]) .sa-form > .sa-form-head {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  background-image: none !important;
  box-shadow: none !important;
}
/* Keep the list card itself white so Ã¢â‚¬Å“outsideÃ¢â‚¬Â contrast is visible */
.mode-b-shell .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e4eef7 !important;
  box-shadow: 0 16px 40px rgba(18, 32, 43, 0.06) !important;
  border-radius: 1.5rem !important;
}

/* ==== CRM top + page headers = Mode A core design (2026-09-11) ==== */
.mode-b-shell[data-mode-b="crm"] > .workspace-header.mode-b-header,
.mode-b-shell[data-mode-b="crm"] > header.mode-b-header,
.mode-b-shell[data-mode-b="crm"] .workspace-header.mode-b-header {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  background-image: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.mode-b-shell[data-mode-b="crm"] .workspace-header.mode-b-header::after {
  background: linear-gradient(90deg, #0055ff 0%, #2563eb 55%, #60a5fa 100%) !important;
}
.mode-b-shell[data-mode-b="crm"] .workspace-header.mode-b-header .mode-b-title strong {
  font-family: var(--serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif) !important;
  font-weight: 650 !important;
  color: #0a1a4a !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] > .sa-form-head,
.sa-form[data-screen^="crm-"] > .sa-form-head {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  background-image: none !important;
  box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen^="crm-"] > .sa-form-head h1,
.sa-form[data-screen^="crm-"] > .sa-form-head h1 {
  font-family: var(--serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif) !important;
  color: #0a1a4a !important;
}

/* ==== People pages (Leads/Contacts/Customers): core #f6f8fc + outside list padding (2026-09-11) ==== */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"],
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"],
.sa-form[data-screen="crm-leads-list"],
.sa-form[data-screen="crm-contacts-list"],
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-head,
.sa-form[data-screen="crm-leads-list"] > .sa-form-head,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .crm-leads-list,
.mode-b-shell[data-mode-b="crm"] .crm-contacts-list {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  background-image: none !important;
}
/* Outside padding around the list panel */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
  padding: 0.85rem 1rem 1.15rem !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 1.25rem !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list {
  padding-inline: 0.15rem !important;
  gap: 0.55rem !important;
}
/* Row contrast on core canvas (no pure white page chrome) */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card.crm-lead-row {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row {
  background: #e8f1fa !important;
  background-color: #e8f1fa !important;
}
@media (max-width: 40rem) {
  .mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-body,
  .mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
  .sa-form[data-screen="crm-leads-list"] > .sa-form-body,
  .sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
    padding: 0.7rem 0.75rem 1rem !important;
  }
}

/* ==== Deals page: title + list header = Mode A core (2026-09-11) ==== */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-opportunities-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-opportunities-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-opportunities-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-opportunities-list"],
.sa-form[data-screen="crm-opportunities-list"] {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head,
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-head {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  background-image: none !important;
  box-shadow: none !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-opportunities-list"] > .sa-form-head h1,
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-head h1 {
  font-family: var(--serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif) !important;
  color: #0a1a4a !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-opportunities-list"] > .sa-form-body,
.sa-form[data-screen="crm-opportunities-list"] > .sa-form-body {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Column header row: Title / Company / Amount / Stage / Action */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-opportunities-list"] .crm-act-cols,
.sa-form[data-screen="crm-opportunities-list"] .crm-act-cols {
  background: #e8f1fa !important;
  background-image: none !important;
  border: 1px solid #d5e4f2 !important;
  box-shadow: none !important;
  color: #0a1a4a !important;
  font-weight: 750 !important;
  border-radius: 0.95rem !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-opportunities-list"] .crm-act-cols span,
.sa-form[data-screen="crm-opportunities-list"] .crm-act-cols span {
  color: #334155 !important;
}

/* ==== Leads ONLY: title + list = Contacts core #f6f8fc (final lock 2026-09-11) ==== */
html:has(.sa-form[data-screen="crm-leads-list"]),
body:has(.sa-form[data-screen="crm-leads-list"]),
#root:has(.sa-form[data-screen="crm-leads-list"]),
.mode-b-shell:has(.sa-form[data-screen="crm-leads-list"]),
.mode-b-shell[data-mode-b="crm"]:has(.sa-form[data-screen="crm-leads-list"]),
.mode-b-shell[data-mode-b="crm"]:has(.sa-form[data-screen="crm-leads-list"]) > main,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]),
.mode-b-shell main:has([data-screen="crm-leads-list"]),
.mode-b-shell main:has(.sa-form[data-screen="crm-leads-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"],
.sa-form[data-screen="crm-leads-list"] {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  background-image: none !important;
}
/* Header title "Leads" background = Contacts core */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .sa-form > .sa-form-head,
.mode-b-shell main:has(.sa-form[data-screen="crm-leads-list"]) .sa-form > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-head,
.sa-form[data-screen="crm-leads-list"] > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] .sa-form.crm-leads-flat[data-screen="crm-leads-list"] > .sa-form-head {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  background-image: none !important;
  box-shadow: none !important;
}
/* White nested list card (match Contacts) Ã¢â‚¬â€ core shows outside */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-leads-list"]) .sa-form > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-body,
.sa-form[data-screen="crm-leads-list"] > .sa-form-body {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e4eef7 !important;
  box-shadow: 0 16px 40px rgba(18, 32, 43, 0.06) !important;
  border-radius: 1.5rem !important;
  padding: 1rem 1.1rem 1.25rem !important;
  margin: 0.35rem 0.65rem 1.1rem !important;
  box-sizing: border-box !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list > li,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li {
  background: transparent !important;
  background-color: transparent !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list,
.sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list {
  padding: 0.15rem 0.35rem 0.35rem !important;
  gap: 0.45rem !important;
}
/* Lead row backgrounds = Mode A core #f6f8fc (same as Contacts rows) */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card.crm-lead-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card[data-tone],
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list > li .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list > li:nth-child(odd) .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list > li:nth-child(even) .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card.crm-lead-row {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  background-image: none !important;
  border-radius: 0.85rem !important;
}
@media (max-width: 40rem) {
  .mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] > .sa-form-body,
  .sa-form[data-screen="crm-leads-list"] > .sa-form-body {
    padding: 0.75rem 0.7rem 1rem !important;
    margin: 0.25rem 0.4rem 0.9rem !important;
  }
}

/* ==== Contacts ONLY: white nested list + outside core padding (2026-09-11) ====
   List chrome stays; nest rows inside a white card. Outside canvas/title = Mode A core. */
html:has(.sa-form[data-screen="crm-contacts-list"]),
body:has(.sa-form[data-screen="crm-contacts-list"]),
#root:has(.sa-form[data-screen="crm-contacts-list"]),
.mode-b-shell:has(.sa-form[data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"]:has(.sa-form[data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"]:has(.sa-form[data-screen="crm-contacts-list"]) > main,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]),
.mode-b-shell main:has([data-screen="crm-contacts-list"]),
.mode-b-shell main:has(.sa-form[data-screen="crm-contacts-list"]),
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .page-container,
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .sa-form-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"],
.sa-form[data-screen="crm-contacts-list"],
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .sa-form > .sa-form-head,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-head,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-head {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  background-image: none !important;
}
/* White nested list card Ã¢â‚¬â€ padding so core shows outside */
.mode-b-shell[data-mode-b="crm"] main:has([data-screen="crm-contacts-list"]) .sa-form > .sa-form-body,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
.sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e4eef7 !important;
  box-shadow: 0 16px 40px rgba(18, 32, 43, 0.06) !important;
  border-radius: 1.5rem !important;
  padding: 1rem 1.1rem 1.25rem !important;
  margin: 0.35rem 0.65rem 1.1rem !important;
  box-sizing: border-box !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-v2,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-leads-toolbar,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li {
  background: transparent !important;
  background-color: transparent !important;
}
/* Inset list from white card edges */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list {
  padding: 0.15rem 0.35rem 0.35rem !important;
  gap: 0.45rem !important;
  box-sizing: border-box !important;
}
/* List row backgrounds = Mode A core #f6f8fc (nested on white card) */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.sa-form[data-screen="crm-contacts-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  background-image: none !important;
  border-radius: 0.85rem !important;
}
@media (max-width: 40rem) {
  .mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-contacts-list"] > .sa-form-body,
  .sa-form[data-screen="crm-contacts-list"] > .sa-form-body {
    padding: 0.75rem 0.7rem 1rem !important;
    margin: 0.25rem 0.4rem 0.9rem !important;
  }
}
/* ==== end contacts-white-nested-list-core ==== */

/* ==== Leads ONLY: clear list row card outlines (2026-09-15) ====
   Beat zebra / contacts-list border rules (nth-child + !important) and
   flatten gap + radius so rows are not separate outlined cards. */
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list,
.sa-form[data-screen="crm-leads-list"] .crm-leads-list,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list {
  gap: 0 !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list > li,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li,
.sa-form[data-screen="crm-leads-list"] .crm-leads-list > li,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card.crm-lead-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-lead-card[data-tone],
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list > li .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list > li:nth-child(odd) .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-leads-list > li:nth-child(even) .crm-lead-card,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.mode-b-shell[data-mode-b="crm"] .sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card.crm-lead-row,
.sa-form[data-screen="crm-leads-list"] .crm-lead-card[data-tone],
.sa-form[data-screen="crm-leads-list"] .crm-contact-row,
.sa-form[data-screen="crm-leads-list"] article.crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) .crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(odd) article.crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) .crm-contact-row,
.sa-form[data-screen="crm-leads-list"] .crm-contacts-list > li:nth-child(even) article.crm-contact-row {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* ==== end leads-list-no-outline ==== */


.duplicate-warn[data-tone='success'] {
  background: color-mix(in srgb, #16a34a 10%, #fff);
  border-color: color-mix(in srgb, #16a34a 28%, #e2e8f0);
}
.duplicate-warn[data-tone='success'] p {
  color: #166534;
}

/* ==== Estimate print builder (header/footer canvas) ==== */
.crm-est-builder {
  display: grid;
  gap: 0.85rem;
}
.crm-est-builder > label {
  display: grid;
  gap: 0.28rem;
  font-size: 0.82rem;
  font-weight: 650;
  color: #334155;
}
.crm-est-builder > label input,
.crm-print-editor.is-edit select {
  min-height: 2.35rem;
  border: 1px solid #d7e2ee;
  border-radius: 0.7rem;
  padding: 0.4rem 0.65rem;
}
.crm-est-locked {
  display: grid;
  gap: 0.25rem;
  min-height: 7.5rem;
  place-content: center;
  text-align: center;
  padding: 1.1rem;
  border: 1.5px dashed #94a3b8;
  border-radius: 1rem;
  background: #f8fafc;
  color: #163a5f;
  font-weight: 750;
}
.crm-est-locked .muted {
  font-weight: 500;
}
.crm-est-block {
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  background: #fff;
}
.crm-est-block-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
}
.crm-est-block-head button,
.crm-est-block-media button {
  min-height: 2rem;
  padding: 0.2rem 0.55rem;
  border-radius: 0.55rem;
  border: 1px solid #d7e2ee;
  background: #fff;
}
.crm-est-block label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.8rem;
}
.crm-est-block-style {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}
.crm-est-block-bold {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
}
.crm-est-print-media,
.crm-est-print-media-wrap img {
  max-height: 4.5rem;
  max-width: 8rem;
  object-fit: contain;
}
.crm-est-print-media-ph {
  font-size: 0.78rem;
  color: #64748b;
}
.crm-est-print-divider {
  border: 0;
  border-top: 1px solid #cbd5e1;
  margin: 0.35rem 0;
}
.crm-est-print-blocks {
  display: grid;
  gap: 0.15rem;
}
.crm-est-print-blocks p {
  margin: 0;
}
.crm-est-sample-banner {
  margin: 0;
  padding: 0.45rem 0.65rem;
  border-radius: 0.65rem;
  background: #fff7ed;
  color: #9a3412;
  font-weight: 650;
}
.sa-form.crm-fb-shell .crm-fb-head-actions .primary-btn.crm-fb-print-save {
  min-width: 4.2rem;
  min-height: 2.15rem;
  padding: 0.32rem 0.85rem;
}
.commerce-print-paper.is-estimate {
  padding: 0;
}
.commerce-print-sheet {
  width: 100%;
  border-collapse: collapse;
}
.commerce-print-sheet > thead > tr > th,
.commerce-print-sheet > tbody > tr > td,
.commerce-print-sheet > tfoot > tr > td {
  text-align: left;
  font-weight: inherit;
  padding: 0.55rem 0.75rem;
  vertical-align: top;
  border: 0;
}
.commerce-print-items {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
}
.commerce-print-items th,
.commerce-print-items td {
  border-bottom: 1px solid #e2e8f0;
  padding: 0.4rem 0.3rem;
  font-size: 0.85rem;
  text-align: left;
}
.commerce-print-items th {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
@media print {
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  .commerce-print-paper.is-estimate {
    position: static !important;
    inset: auto;
    break-inside: auto;
  }
  .commerce-print-sheet { page-break-inside: auto; }
  .commerce-print-items thead { display: table-header-group; }
  .commerce-print-items tr { break-inside: avoid; }
}
/* 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);
}
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-content: "";
      --tw-outline-style: solid;
    }
  }
}

@layer theme {
  :root, :host {
    --jui-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --jui-color-red-50: oklch(97.1% .013 17.38);
    --jui-color-red-100: oklch(93.6% .032 17.717);
    --jui-color-red-200: oklch(88.5% .062 18.334);
    --jui-color-red-300: oklch(80.8% .114 19.571);
    --jui-color-red-400: oklch(70.4% .191 22.216);
    --jui-color-red-500: oklch(63.7% .237 25.331);
    --jui-color-red-600: oklch(57.7% .245 27.325);
    --jui-color-red-700: oklch(50.5% .213 27.518);
    --jui-color-red-800: oklch(44.4% .177 26.899);
    --jui-color-orange-50: oklch(98% .016 73.684);
    --jui-color-orange-100: oklch(95.4% .038 75.164);
    --jui-color-orange-300: oklch(83.7% .128 66.29);
    --jui-color-orange-500: oklch(70.5% .213 47.604);
    --jui-color-orange-600: oklch(64.6% .222 41.116);
    --jui-color-orange-700: oklch(55.3% .195 38.402);
    --jui-color-amber-50: oklch(98.7% .022 95.277);
    --jui-color-amber-100: oklch(96.2% .059 95.617);
    --jui-color-amber-200: oklch(92.4% .12 95.746);
    --jui-color-amber-300: oklch(87.9% .169 91.605);
    --jui-color-amber-400: oklch(82.8% .189 84.429);
    --jui-color-amber-500: oklch(76.9% .188 70.08);
    --jui-color-amber-600: oklch(66.6% .179 58.318);
    --jui-color-amber-700: oklch(55.5% .163 48.998);
    --jui-color-amber-800: oklch(47.3% .137 46.201);
    --jui-color-amber-900: oklch(41.4% .112 45.904);
    --jui-color-amber-950: oklch(27.9% .077 45.635);
    --jui-color-yellow-400: oklch(85.2% .199 91.936);
    --jui-color-yellow-700: oklch(55.4% .135 66.442);
    --jui-color-lime-600: oklch(64.8% .2 131.684);
    --jui-color-green-50: oklch(98.2% .018 155.826);
    --jui-color-green-100: oklch(96.2% .044 156.743);
    --jui-color-green-600: oklch(62.7% .194 149.214);
    --jui-color-green-700: oklch(52.7% .154 150.069);
    --jui-color-green-800: oklch(44.8% .119 151.328);
    --jui-color-emerald-50: oklch(97.9% .021 166.113);
    --jui-color-emerald-100: oklch(95% .052 163.051);
    --jui-color-emerald-200: oklch(90.5% .093 164.15);
    --jui-color-emerald-300: oklch(84.5% .143 164.978);
    --jui-color-emerald-500: oklch(69.6% .17 162.48);
    --jui-color-emerald-600: oklch(59.6% .145 163.225);
    --jui-color-emerald-700: oklch(50.8% .118 165.612);
    --jui-color-emerald-800: oklch(43.2% .095 166.913);
    --jui-color-emerald-900: oklch(37.8% .077 168.94);
    --jui-color-emerald-950: oklch(26.2% .051 172.552);
    --jui-color-teal-500: oklch(70.4% .14 182.503);
    --jui-color-teal-600: oklch(60% .118 184.704);
    --jui-color-cyan-500: oklch(71.5% .143 215.221);
    --jui-color-cyan-700: oklch(52% .105 223.128);
    --jui-color-sky-50: oklch(97.7% .013 236.62);
    --jui-color-sky-500: oklch(68.5% .169 237.323);
    --jui-color-sky-600: oklch(58.8% .158 241.966);
    --jui-color-blue-50: oklch(97% .014 254.604);
    --jui-color-blue-100: oklch(93.2% .032 255.585);
    --jui-color-blue-200: oklch(88.2% .059 254.128);
    --jui-color-blue-300: oklch(80.9% .105 251.813);
    --jui-color-blue-400: oklch(70.7% .165 254.624);
    --jui-color-blue-500: oklch(62.3% .214 259.815);
    --jui-color-blue-600: oklch(54.6% .245 262.881);
    --jui-color-blue-700: oklch(48.8% .243 264.376);
    --jui-color-blue-800: oklch(42.4% .199 265.638);
    --jui-color-blue-900: oklch(37.9% .146 265.522);
    --jui-color-blue-950: oklch(28.2% .091 267.935);
    --jui-color-indigo-50: oklch(96.2% .018 272.314);
    --jui-color-indigo-100: oklch(93% .034 272.788);
    --jui-color-indigo-500: oklch(58.5% .233 277.117);
    --jui-color-indigo-600: oklch(51.1% .262 276.966);
    --jui-color-indigo-700: oklch(45.7% .24 277.023);
    --jui-color-violet-50: oklch(96.9% .016 293.756);
    --jui-color-violet-100: oklch(94.3% .029 294.588);
    --jui-color-violet-300: oklch(81.1% .111 293.571);
    --jui-color-violet-500: oklch(60.6% .25 292.717);
    --jui-color-violet-600: oklch(54.1% .281 293.009);
    --jui-color-violet-700: oklch(49.1% .27 292.581);
    --jui-color-purple-500: oklch(62.7% .265 303.9);
    --jui-color-fuchsia-500: oklch(66.7% .295 322.15);
    --jui-color-fuchsia-600: oklch(59.1% .293 322.896);
    --jui-color-pink-50: oklch(97.1% .014 343.198);
    --jui-color-pink-300: oklch(82.3% .12 346.018);
    --jui-color-pink-500: oklch(65.6% .241 354.308);
    --jui-color-pink-600: oklch(59.2% .249 .584);
    --jui-color-pink-700: oklch(52.5% .223 3.958);
    --jui-color-rose-50: oklch(96.9% .015 12.422);
    --jui-color-rose-200: oklch(89.2% .058 10.001);
    --jui-color-rose-300: oklch(81% .117 11.638);
    --jui-color-rose-500: oklch(64.5% .246 16.439);
    --jui-color-rose-600: oklch(58.6% .253 17.585);
    --jui-color-rose-700: oklch(51.4% .222 16.935);
    --jui-color-rose-800: oklch(45.5% .188 13.697);
    --jui-color-rose-950: oklch(27.1% .105 12.094);
    --jui-color-slate-50: oklch(98.4% .003 247.858);
    --jui-color-slate-100: oklch(96.8% .007 247.896);
    --jui-color-slate-200: oklch(92.9% .013 255.508);
    --jui-color-slate-300: oklch(86.9% .022 252.894);
    --jui-color-slate-400: oklch(70.4% .04 256.788);
    --jui-color-slate-500: oklch(55.4% .046 257.417);
    --jui-color-slate-600: oklch(44.6% .043 257.281);
    --jui-color-slate-700: oklch(37.2% .044 257.287);
    --jui-color-slate-900: oklch(20.8% .042 265.755);
    --jui-color-slate-950: oklch(12.9% .042 264.695);
    --jui-color-zinc-500: oklch(55.2% .016 285.938);
    --jui-color-zinc-600: oklch(44.2% .017 285.786);
    --jui-color-neutral-400: oklch(70.8% 0 none);
    --jui-color-black: #000;
    --jui-color-white: #fff;
    --jui-spacing: .25rem;
    --jui-container-sm: 24rem;
    --jui-container-lg: 32rem;
    --jui-text-xs: .75rem;
    --jui-text-xs--line-height: calc(1 / .75);
    --jui-text-sm: .875rem;
    --jui-text-sm--line-height: calc(1.25 / .875);
    --jui-text-base: 1rem;
    --jui-text-base--line-height: calc(1.5 / 1);
    --jui-text-lg: 1.125rem;
    --jui-text-lg--line-height: calc(1.75 / 1.125);
    --jui-text-xl: 1.25rem;
    --jui-text-xl--line-height: calc(1.75 / 1.25);
    --jui-text-2xl: 1.5rem;
    --jui-text-2xl--line-height: calc(2 / 1.5);
    --jui-text-3xl: 1.875rem;
    --jui-text-3xl--line-height: calc(2.25 / 1.875);
    --jui-font-weight-normal: 400;
    --jui-font-weight-medium: 500;
    --jui-font-weight-semibold: 600;
    --jui-font-weight-bold: 700;
    --jui-tracking-tight: -.025em;
    --jui-tracking-wide: .025em;
    --jui-tracking-wider: .05em;
    --jui-leading-tight: 1.25;
    --jui-leading-snug: 1.375;
    --jui-leading-relaxed: 1.625;
    --jui-radius-md: .375rem;
    --jui-radius-lg: .5rem;
    --jui-radius-xl: .75rem;
    --jui-radius-2xl: 1rem;
    --jui-animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --jui-default-transition-duration: .15s;
    --jui-default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
}

@layer base, components;

@layer utilities {
  .jui\:pointer-events-none {
    pointer-events: none !important;
  }

  .jui\:sr-only {
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    position: absolute !important;
    overflow: hidden !important;
  }

  .jui\:absolute {
    position: absolute !important;
  }

  .jui\:fixed {
    position: fixed !important;
  }

  .jui\:relative {
    position: relative !important;
  }

  .jui\:sticky {
    position: sticky !important;
  }

  .jui\:inset-0 {
    inset: 0 !important;
  }

  .jui\:\[top\:0\.85rem\] {
    top: .85rem !important;
  }

  .jui\:\[top\:2\.55rem\] {
    top: 2.55rem !important;
  }

  .jui\:top-1 {
    top: var(--jui-spacing) !important;
  }

  .jui\:top-2\.5 {
    top: calc(var(--jui-spacing) * 2.5) !important;
  }

  .jui\:top-3\.5 {
    top: calc(var(--jui-spacing) * 3.5) !important;
  }

  .jui\:top-4 {
    top: calc(var(--jui-spacing) * 4) !important;
  }

  .jui\:top-9 {
    top: calc(var(--jui-spacing) * 9) !important;
  }

  .jui\:\[right\:0\.85rem\] {
    right: .85rem !important;
  }

  .jui\:\[right\:0\] {
    right: 0 !important;
  }

  .jui\:\[right\:1\.15rem\] {
    right: 1.15rem !important;
  }

  .jui\:\[right\:8\%\] {
    right: 8% !important;
  }

  .jui\:right-0 {
    right: 0 !important;
  }

  .jui\:right-3 {
    right: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:right-4 {
    right: calc(var(--jui-spacing) * 4) !important;
  }

  .jui\:\[bottom\:0\] {
    bottom: 0 !important;
  }

  .jui\:\[bottom\:5\.5rem\] {
    bottom: 5.5rem !important;
  }

  .jui\:bottom-0 {
    bottom: 0 !important;
  }

  .jui\:-left-\[1\.55rem\] {
    left: -1.55rem !important;
  }

  .jui\:-left-\[27px\] {
    left: -27px !important;
  }

  .jui\:left-2\.5 {
    left: calc(var(--jui-spacing) * 2.5) !important;
  }

  .jui\:left-3 {
    left: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:isolate {
    isolation: isolate !important;
  }

  .jui\:-z-10 {
    z-index: calc(10 * -1) !important;
  }

  .jui\:-z-20 {
    z-index: calc(20 * -1) !important;
  }

  .jui\:\[z-index\:2\] {
    z-index: 2 !important;
  }

  .jui\:\[z-index\:4\] {
    z-index: 4 !important;
  }

  .jui\:\[z-index\:5\] {
    z-index: 5 !important;
  }

  .jui\:z-0 {
    z-index: 0 !important;
  }

  .jui\:z-20 {
    z-index: 20 !important;
  }

  .jui\:z-50 {
    z-index: 50 !important;
  }

  .jui\:z-\[3\] {
    z-index: 3 !important;
  }

  .jui\:\[grid-column\:1_\/_-1\] {
    grid-column: 1 / -1 !important;
  }

  .jui\:col-span-2 {
    grid-column: span 2 / span 2 !important;
  }

  .jui\:col-span-full {
    grid-column: 1 / -1 !important;
  }

  .jui\:col-start-2 {
    grid-column-start: 2 !important;
  }

  .jui\:col-start-3 {
    grid-column-start: 3 !important;
  }

  .jui\:row-span-2 {
    grid-row: span 2 / span 2 !important;
  }

  .jui\:row-start-2 {
    grid-row-start: 2 !important;
  }

  .jui\:\[margin\:0\.2rem_0_0\.35rem\] {
    margin: .2rem 0 .35rem !important;
  }

  .jui\:\[margin\:0\.4rem_0_1\.1rem\] {
    margin: .4rem 0 1.1rem !important;
  }

  .jui\:\[margin\:0\.5rem_0_0\] {
    margin: .5rem 0 0 !important;
  }

  .jui\:\[margin\:0\.7rem_0_0\.8rem\] {
    margin: .7rem 0 .8rem !important;
  }

  .jui\:\[margin\:0\.7rem_0_0\.85rem\] {
    margin: .7rem 0 .85rem !important;
  }

  .jui\:\[margin\:0\.25rem_0_0\] {
    margin: .25rem 0 0 !important;
  }

  .jui\:\[margin\:0\.35rem_0\] {
    margin: .35rem 0 !important;
  }

  .jui\:\[margin\:0\.35rem_0_0\.75rem\] {
    margin: .35rem 0 .75rem !important;
  }

  .jui\:\[margin\:0\.35rem_0_0\] {
    margin: .35rem 0 0 !important;
  }

  .jui\:\[margin\:0\.35rem_0_1\.25rem\] {
    margin: .35rem 0 1.25rem !important;
  }

  .jui\:\[margin\:0\.45rem_0_0\] {
    margin: .45rem 0 0 !important;
  }

  .jui\:\[margin\:0\.65rem_0_0\.75rem\] {
    margin: .65rem 0 .75rem !important;
  }

  .jui\:\[margin\:0\.75rem_0\] {
    margin: .75rem 0 !important;
  }

  .jui\:\[margin\:0\.75rem_0_0\.35rem\] {
    margin: .75rem 0 .35rem !important;
  }

  .jui\:\[margin\:0\.85rem_0_0\] {
    margin: .85rem 0 0 !important;
  }

  .jui\:\[margin\:0\] {
    margin: 0 !important;
  }

  .jui\:\[margin\:0_0_0\.4rem\] {
    margin: 0 0 .4rem !important;
  }

  .jui\:\[margin\:0_0_0\.55rem\] {
    margin: 0 0 .55rem !important;
  }

  .jui\:\[margin\:0_0_0\.75rem\] {
    margin: 0 0 .75rem !important;
  }

  .jui\:\[margin\:0_0_1\.15rem\] {
    margin: 0 0 1.15rem !important;
  }

  .jui\:\[margin\:0_auto\] {
    margin: 0 auto !important;
  }

  .jui\:m-0 {
    margin: 0 !important;
  }

  .jui\:m-1 {
    margin: var(--jui-spacing) !important;
  }

  .jui\:mx-auto {
    margin-inline: auto !important;
  }

  .jui\:my-0\.5 {
    margin-block: calc(var(--jui-spacing) * .5) !important;
  }

  .jui\:my-1 {
    margin-block: var(--jui-spacing) !important;
  }

  .jui\:my-2 {
    margin-block: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:my-3 {
    margin-block: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:my-4 {
    margin-block: calc(var(--jui-spacing) * 4) !important;
  }

  .jui\:my-5 {
    margin-block: calc(var(--jui-spacing) * 5) !important;
  }

  .jui\:\[margin-top\:0\.2rem\] {
    margin-top: .2rem !important;
  }

  .jui\:\[margin-top\:0\.9rem\] {
    margin-top: .9rem !important;
  }

  .jui\:\[margin-top\:0\.28rem\] {
    margin-top: .28rem !important;
  }

  .jui\:\[margin-top\:0\.35rem\] {
    margin-top: .35rem !important;
  }

  .jui\:\[margin-top\:0\.55rem\] {
    margin-top: .55rem !important;
  }

  .jui\:\[margin-top\:0\.85rem\] {
    margin-top: .85rem !important;
  }

  .jui\:\[margin-top\:0\.95rem\] {
    margin-top: .95rem !important;
  }

  .jui\:mt-0 {
    margin-top: 0 !important;
  }

  .jui\:mt-0\.5 {
    margin-top: calc(var(--jui-spacing) * .5) !important;
  }

  .jui\:mt-1 {
    margin-top: var(--jui-spacing) !important;
  }

  .jui\:mt-2 {
    margin-top: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:mt-3 {
    margin-top: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:mt-4 {
    margin-top: calc(var(--jui-spacing) * 4) !important;
  }

  .jui\:mt-5 {
    margin-top: calc(var(--jui-spacing) * 5) !important;
  }

  .jui\:mr-1\.5 {
    margin-right: calc(var(--jui-spacing) * 1.5) !important;
  }

  .jui\:\[margin-bottom\:0\.9rem\] {
    margin-bottom: .9rem !important;
  }

  .jui\:\[margin-bottom\:0\.65rem\] {
    margin-bottom: .65rem !important;
  }

  .jui\:\[margin-bottom\:0\.75rem\] {
    margin-bottom: .75rem !important;
  }

  .jui\:\[margin-bottom\:0\.85rem\] {
    margin-bottom: .85rem !important;
  }

  .jui\:\[margin-bottom\:1\.1rem\] {
    margin-bottom: 1.1rem !important;
  }

  .jui\:\[margin-bottom\:1rem\] {
    margin-bottom: 1rem !important;
  }

  .jui\:mb-0 {
    margin-bottom: 0 !important;
  }

  .jui\:mb-1 {
    margin-bottom: var(--jui-spacing) !important;
  }

  .jui\:mb-1\.5 {
    margin-bottom: calc(var(--jui-spacing) * 1.5) !important;
  }

  .jui\:mb-2 {
    margin-bottom: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:mb-3 {
    margin-bottom: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:mb-4 {
    margin-bottom: calc(var(--jui-spacing) * 4) !important;
  }

  .jui\:mb-5 {
    margin-bottom: calc(var(--jui-spacing) * 5) !important;
  }

  .jui\:mb-\[-1px\] {
    margin-bottom: -1px !important;
  }

  .jui\:\[margin-left\:1\.4rem\] {
    margin-left: 1.4rem !important;
  }

  .jui\:\[margin-left\:1\.15rem\] {
    margin-left: 1.15rem !important;
  }

  .jui\:ml-0\.5 {
    margin-left: calc(var(--jui-spacing) * .5) !important;
  }

  .jui\:ml-1 {
    margin-left: var(--jui-spacing) !important;
  }

  .jui\:ml-2 {
    margin-left: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:ml-3 {
    margin-left: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:ml-4 {
    margin-left: calc(var(--jui-spacing) * 4) !important;
  }

  .jui\:ml-auto {
    margin-left: auto !important;
  }

  .jui\:box-border {
    box-sizing: border-box !important;
  }

  .jui\:line-clamp-2 {
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    display: -webkit-box !important;
    overflow: hidden !important;
  }

  .jui\:line-clamp-3 {
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    display: -webkit-box !important;
    overflow: hidden !important;
  }

  .jui\:block {
    display: block !important;
  }

  .jui\:flex {
    display: flex !important;
  }

  .jui\:grid {
    display: grid !important;
  }

  .jui\:hidden {
    display: none !important;
  }

  .jui\:inline-block {
    display: inline-block !important;
  }

  .jui\:inline-flex {
    display: inline-flex !important;
  }

  .jui\:aspect-\[4\/1\] {
    aspect-ratio: 4 !important;
  }

  .jui\:aspect-\[4\/3\] {
    aspect-ratio: 4 / 3 !important;
  }

  .jui\:size-3 {
    width: calc(var(--jui-spacing) * 3) !important;
    height: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:size-4 {
    width: calc(var(--jui-spacing) * 4) !important;
    height: calc(var(--jui-spacing) * 4) !important;
  }

  .jui\:size-5 {
    width: calc(var(--jui-spacing) * 5) !important;
    height: calc(var(--jui-spacing) * 5) !important;
  }

  .jui\:size-6 {
    width: calc(var(--jui-spacing) * 6) !important;
    height: calc(var(--jui-spacing) * 6) !important;
  }

  .jui\:size-7 {
    width: calc(var(--jui-spacing) * 7) !important;
    height: calc(var(--jui-spacing) * 7) !important;
  }

  .jui\:size-8 {
    width: calc(var(--jui-spacing) * 8) !important;
    height: calc(var(--jui-spacing) * 8) !important;
  }

  .jui\:size-9 {
    width: calc(var(--jui-spacing) * 9) !important;
    height: calc(var(--jui-spacing) * 9) !important;
  }

  .jui\:size-10 {
    width: calc(var(--jui-spacing) * 10) !important;
    height: calc(var(--jui-spacing) * 10) !important;
  }

  .jui\:size-11 {
    width: calc(var(--jui-spacing) * 11) !important;
    height: calc(var(--jui-spacing) * 11) !important;
  }

  .jui\:size-12 {
    width: calc(var(--jui-spacing) * 12) !important;
    height: calc(var(--jui-spacing) * 12) !important;
  }

  .jui\:size-14 {
    width: calc(var(--jui-spacing) * 14) !important;
    height: calc(var(--jui-spacing) * 14) !important;
  }

  .jui\:size-20 {
    width: calc(var(--jui-spacing) * 20) !important;
    height: calc(var(--jui-spacing) * 20) !important;
  }

  .jui\:size-28 {
    width: calc(var(--jui-spacing) * 28) !important;
    height: calc(var(--jui-spacing) * 28) !important;
  }

  .jui\:size-\[72px\] {
    width: 72px !important;
    height: 72px !important;
  }

  .jui\:size-full {
    width: 100% !important;
    height: 100% !important;
  }

  .jui\:\[height\:0\.4rem\] {
    height: .4rem !important;
  }

  .jui\:\[height\:0\.38rem\] {
    height: .38rem !important;
  }

  .jui\:\[height\:1\.85rem\] {
    height: 1.85rem !important;
  }

  .jui\:\[height\:2\.1rem\] {
    height: 2.1rem !important;
  }

  .jui\:\[height\:2\.2rem\] {
    height: 2.2rem !important;
  }

  .jui\:\[height\:2\.4rem\] {
    height: 2.4rem !important;
  }

  .jui\:\[height\:2\.5rem\] {
    height: 2.5rem !important;
  }

  .jui\:\[height\:2\.6rem\] {
    height: 2.6rem !important;
  }

  .jui\:\[height\:2\.7rem\] {
    height: 2.7rem !important;
  }

  .jui\:\[height\:2\.15rem\] {
    height: 2.15rem !important;
  }

  .jui\:\[height\:2\.35rem\] {
    height: 2.35rem !important;
  }

  .jui\:\[height\:2\.45rem\] {
    height: 2.45rem !important;
  }

  .jui\:\[height\:2\.75rem\] {
    height: 2.75rem !important;
  }

  .jui\:\[height\:2rem\] {
    height: 2rem !important;
  }

  .jui\:\[height\:3\.1rem\] {
    height: 3.1rem !important;
  }

  .jui\:\[height\:3\.15rem\] {
    height: 3.15rem !important;
  }

  .jui\:\[height\:3\.35rem\] {
    height: 3.35rem !important;
  }

  .jui\:\[height\:4\.1rem\] {
    height: 4.1rem !important;
  }

  .jui\:\[height\:4\.4rem\] {
    height: 4.4rem !important;
  }

  .jui\:\[height\:8\.5rem\] {
    height: 8.5rem !important;
  }

  .jui\:\[height\:11rem\] {
    height: 11rem !important;
  }

  .jui\:\[height\:72\%\] {
    height: 72% !important;
  }

  .jui\:\[height\:auto\] {
    height: auto !important;
  }

  .jui\:h-1\.5 {
    height: calc(var(--jui-spacing) * 1.5) !important;
  }

  .jui\:h-2 {
    height: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:h-3 {
    height: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:h-4 {
    height: calc(var(--jui-spacing) * 4) !important;
  }

  .jui\:h-6 {
    height: calc(var(--jui-spacing) * 6) !important;
  }

  .jui\:h-7 {
    height: calc(var(--jui-spacing) * 7) !important;
  }

  .jui\:h-8 {
    height: calc(var(--jui-spacing) * 8) !important;
  }

  .jui\:h-9 {
    height: calc(var(--jui-spacing) * 9) !important;
  }

  .jui\:h-10 {
    height: calc(var(--jui-spacing) * 10) !important;
  }

  .jui\:h-11 {
    height: calc(var(--jui-spacing) * 11) !important;
  }

  .jui\:h-16 {
    height: calc(var(--jui-spacing) * 16) !important;
  }

  .jui\:h-24 {
    height: calc(var(--jui-spacing) * 24) !important;
  }

  .jui\:h-28 {
    height: calc(var(--jui-spacing) * 28) !important;
  }

  .jui\:h-32 {
    height: calc(var(--jui-spacing) * 32) !important;
  }

  .jui\:h-56 {
    height: calc(var(--jui-spacing) * 56) !important;
  }

  .jui\:h-72 {
    height: calc(var(--jui-spacing) * 72) !important;
  }

  .jui\:h-\[54px\] {
    height: 54px !important;
  }

  .jui\:h-auto {
    height: auto !important;
  }

  .jui\:h-full {
    height: 100% !important;
  }

  .jui\:max-h-32 {
    max-height: calc(var(--jui-spacing) * 32) !important;
  }

  .jui\:max-h-56 {
    max-height: calc(var(--jui-spacing) * 56) !important;
  }

  .jui\:max-h-72 {
    max-height: calc(var(--jui-spacing) * 72) !important;
  }

  .jui\:max-h-\[calc\(100dvh-16px\)\] {
    max-height: calc(100dvh - 16px) !important;
  }

  .jui\:max-h-\[calc\(100dvh-32px\)\] {
    max-height: calc(100dvh - 32px) !important;
  }

  .jui\:\[min-height\:0\] {
    min-height: 0 !important;
  }

  .jui\:\[min-height\:1\.85rem\] {
    min-height: 1.85rem !important;
  }

  .jui\:\[min-height\:2\.2rem\] {
    min-height: 2.2rem !important;
  }

  .jui\:\[min-height\:2\.5rem\] {
    min-height: 2.5rem !important;
  }

  .jui\:\[min-height\:2\.6rem\] {
    min-height: 2.6rem !important;
  }

  .jui\:\[min-height\:2\.7rem\] {
    min-height: 2.7rem !important;
  }

  .jui\:\[min-height\:2\.15rem\] {
    min-height: 2.15rem !important;
  }

  .jui\:\[min-height\:2\.35rem\] {
    min-height: 2.35rem !important;
  }

  .jui\:\[min-height\:2\.45rem\] {
    min-height: 2.45rem !important;
  }

  .jui\:\[min-height\:2\.75rem\] {
    min-height: 2.75rem !important;
  }

  .jui\:\[min-height\:2\.85rem\] {
    min-height: 2.85rem !important;
  }

  .jui\:\[min-height\:3\.75rem\] {
    min-height: 3.75rem !important;
  }

  .jui\:\[min-height\:5\.1rem\] {
    min-height: 5.1rem !important;
  }

  .jui\:\[min-height\:6\.4rem\] {
    min-height: 6.4rem !important;
  }

  .jui\:\[min-height\:7\.5rem\] {
    min-height: 7.5rem !important;
  }

  .jui\:\[min-height\:11rem\] {
    min-height: 11rem !important;
  }

  .jui\:\[min-height\:var\(--touch\)\] {
    min-height: var(--touch) !important;
  }

  .jui\:min-h-0 {
    min-height: 0 !important;
  }

  .jui\:min-h-7 {
    min-height: calc(var(--jui-spacing) * 7) !important;
  }

  .jui\:min-h-8 {
    min-height: calc(var(--jui-spacing) * 8) !important;
  }

  .jui\:min-h-9 {
    min-height: calc(var(--jui-spacing) * 9) !important;
  }

  .jui\:min-h-10 {
    min-height: calc(var(--jui-spacing) * 10) !important;
  }

  .jui\:min-h-11 {
    min-height: calc(var(--jui-spacing) * 11) !important;
  }

  .jui\:min-h-14 {
    min-height: calc(var(--jui-spacing) * 14) !important;
  }

  .jui\:min-h-16 {
    min-height: calc(var(--jui-spacing) * 16) !important;
  }

  .jui\:min-h-24 {
    min-height: calc(var(--jui-spacing) * 24) !important;
  }

  .jui\:min-h-28 {
    min-height: calc(var(--jui-spacing) * 28) !important;
  }

  .jui\:min-h-32 {
    min-height: calc(var(--jui-spacing) * 32) !important;
  }

  .jui\:min-h-52 {
    min-height: calc(var(--jui-spacing) * 52) !important;
  }

  .jui\:min-h-\[2\.55rem\] {
    min-height: 2.55rem !important;
  }

  .jui\:min-h-\[4\.4rem\] {
    min-height: 4.4rem !important;
  }

  .jui\:min-h-\[64px\] {
    min-height: 64px !important;
  }

  .jui\:min-h-\[72px\] {
    min-height: 72px !important;
  }

  .jui\:min-h-\[160px\] {
    min-height: 160px !important;
  }

  .jui\:min-h-\[168px\] {
    min-height: 168px !important;
  }

  .jui\:min-h-screen {
    min-height: 100vh !important;
  }

  .jui\:\!w-auto {
    width: auto !important;
  }

  .jui\:\[width\:1\.85rem\] {
    width: 1.85rem !important;
  }

  .jui\:\[width\:2\.1rem\] {
    width: 2.1rem !important;
  }

  .jui\:\[width\:2\.2rem\] {
    width: 2.2rem !important;
  }

  .jui\:\[width\:2\.4rem\] {
    width: 2.4rem !important;
  }

  .jui\:\[width\:2\.5rem\] {
    width: 2.5rem !important;
  }

  .jui\:\[width\:2\.6rem\] {
    width: 2.6rem !important;
  }

  .jui\:\[width\:2\.7rem\] {
    width: 2.7rem !important;
  }

  .jui\:\[width\:2\.15rem\] {
    width: 2.15rem !important;
  }

  .jui\:\[width\:2\.35rem\] {
    width: 2.35rem !important;
  }

  .jui\:\[width\:2\.45rem\] {
    width: 2.45rem !important;
  }

  .jui\:\[width\:2\.75rem\] {
    width: 2.75rem !important;
  }

  .jui\:\[width\:2rem\] {
    width: 2rem !important;
  }

  .jui\:\[width\:3\.1rem\] {
    width: 3.1rem !important;
  }

  .jui\:\[width\:3\.15rem\] {
    width: 3.15rem !important;
  }

  .jui\:\[width\:3\.35rem\] {
    width: 3.35rem !important;
  }

  .jui\:\[width\:3rem\] {
    width: 3rem !important;
  }

  .jui\:\[width\:4\.1rem\] {
    width: 4.1rem !important;
  }

  .jui\:\[width\:4\.4rem\] {
    width: 4.4rem !important;
  }

  .jui\:\[width\:5\.5rem\] {
    width: 5.5rem !important;
  }

  .jui\:\[width\:8\.5rem\] {
    width: 8.5rem !important;
  }

  .jui\:\[width\:46\%\] {
    width: 46% !important;
  }

  .jui\:\[width\:auto\] {
    width: auto !important;
  }

  .jui\:\[width\:fit-content\] {
    width: fit-content !important;
  }

  .jui\:w-1\.5 {
    width: calc(var(--jui-spacing) * 1.5) !important;
  }

  .jui\:w-2 {
    width: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:w-3 {
    width: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:w-7 {
    width: calc(var(--jui-spacing) * 7) !important;
  }

  .jui\:w-8 {
    width: calc(var(--jui-spacing) * 8) !important;
  }

  .jui\:w-9 {
    width: calc(var(--jui-spacing) * 9) !important;
  }

  .jui\:w-10 {
    width: calc(var(--jui-spacing) * 10) !important;
  }

  .jui\:w-12 {
    width: calc(var(--jui-spacing) * 12) !important;
  }

  .jui\:w-16 {
    width: calc(var(--jui-spacing) * 16) !important;
  }

  .jui\:w-24 {
    width: calc(var(--jui-spacing) * 24) !important;
  }

  .jui\:w-40 {
    width: calc(var(--jui-spacing) * 40) !important;
  }

  .jui\:w-52 {
    width: calc(var(--jui-spacing) * 52) !important;
  }

  .jui\:w-\[46px\] {
    width: 46px !important;
  }

  .jui\:w-\[82px\] {
    width: 82px !important;
  }

  .jui\:w-\[min\(20rem\,calc\(100vw-1\.5rem\)\)\] {
    width: min(20rem, 100vw - 1.5rem) !important;
  }

  .jui\:w-auto {
    width: auto !important;
  }

  .jui\:w-fit {
    width: fit-content !important;
  }

  .jui\:w-full {
    width: 100% !important;
  }

  .jui\:\[max-width\:28rem\] {
    max-width: 28rem !important;
  }

  .jui\:\[max-width\:900px\] {
    max-width: 900px !important;
  }

  .jui\:\[max-width\:1120px\] {
    max-width: 1120px !important;
  }

  .jui\:max-w-24 {
    max-width: calc(var(--jui-spacing) * 24) !important;
  }

  .jui\:max-w-\[55\%\] {
    max-width: 55% !important;
  }

  .jui\:max-w-\[440px\] {
    max-width: 440px !important;
  }

  .jui\:max-w-\[900px\] {
    max-width: 900px !important;
  }

  .jui\:max-w-\[calc\(100vw-16px\)\] {
    max-width: calc(100vw - 16px) !important;
  }

  .jui\:max-w-\[calc\(100vw-32px\)\] {
    max-width: calc(100vw - 32px) !important;
  }

  .jui\:max-w-full {
    max-width: 100% !important;
  }

  .jui\:max-w-lg {
    max-width: var(--jui-container-lg) !important;
  }

  .jui\:max-w-sm {
    max-width: var(--jui-container-sm) !important;
  }

  .jui\:\[min-width\:9\.5rem\] {
    min-width: 9.5rem !important;
  }

  .jui\:min-w-0 {
    min-width: 0 !important;
  }

  .jui\:min-w-11 {
    min-width: calc(var(--jui-spacing) * 11) !important;
  }

  .jui\:min-w-40 {
    min-width: calc(var(--jui-spacing) * 40) !important;
  }

  .jui\:min-w-44 {
    min-width: calc(var(--jui-spacing) * 44) !important;
  }

  .jui\:min-w-\[10rem\] {
    min-width: 10rem !important;
  }

  .jui\:min-w-\[12rem\] {
    min-width: 12rem !important;
  }

  .jui\:min-w-\[44rem\] {
    min-width: 44rem !important;
  }

  .jui\:min-w-\[100px\] {
    min-width: 100px !important;
  }

  .jui\:min-w-\[180px\] {
    min-width: 180px !important;
  }

  .jui\:\[flex\:1_1_0\] {
    flex: 1 1 0 !important;
  }

  .jui\:\[flex\:none\] {
    flex: none !important;
  }

  .jui\:flex-1 {
    flex: 1 !important;
  }

  .jui\:flex-\[2_1_14rem\] {
    flex: 2 14rem !important;
  }

  .jui\:flex-\[2_1_100\%\] {
    flex: 2 100% !important;
  }

  .jui\:\[flex-shrink\:0\], .jui\:shrink-0 {
    flex-shrink: 0 !important;
  }

  .jui\:basis-full {
    flex-basis: 100% !important;
  }

  .jui\:\[border-collapse\:collapse\] {
    border-collapse: collapse !important;
  }

  .jui\:\[border-collapse\:separate\] {
    border-collapse: separate !important;
  }

  .jui\:border-collapse {
    border-collapse: collapse !important;
  }

  .jui\:\[border-spacing\:0\] {
    border-spacing: 0 !important;
  }

  .jui\:translate-x-0 {
    --tw-translate-x: 0px !important;
    translate: var(--tw-translate-x) var(--tw-translate-y) !important;
  }

  .jui\:translate-x-5 {
    --tw-translate-x: calc(var(--jui-spacing) * 5) !important;
    translate: var(--tw-translate-x) var(--tw-translate-y) !important;
  }

  .jui\:animate-pulse {
    animation: var(--jui-animate-pulse) !important;
  }

  .jui\:cursor-pointer {
    cursor: pointer !important;
  }

  .jui\:scroll-mt-4 {
    scroll-margin-top: calc(var(--jui-spacing) * 4) !important;
  }

  .jui\:list-none {
    list-style-type: none !important;
  }

  .jui\:appearance-none {
    appearance: none !important;
  }

  .jui\:\[grid-template-columns\:1\.4rem_2\.2rem_minmax\(0\,_1fr\)\] {
    grid-template-columns: 1.4rem 2.2rem minmax(0, 1fr) !important;
  }

  .jui\:\[grid-template-columns\:1\.6rem_1fr\] {
    grid-template-columns: 1.6rem 1fr !important;
  }

  .jui\:\[grid-template-columns\:1fr\] {
    grid-template-columns: 1fr !important;
  }

  .jui\:\[grid-template-columns\:1fr_1fr\] {
    grid-template-columns: 1fr 1fr !important;
  }

  .jui\:\[grid-template-columns\:1fr_8\.5rem\] {
    grid-template-columns: 1fr 8.5rem !important;
  }

  .jui\:\[grid-template-columns\:1fr_auto\] {
    grid-template-columns: 1fr auto !important;
  }

  .jui\:\[grid-template-columns\:1fr_auto_auto\] {
    grid-template-columns: 1fr auto auto !important;
  }

  .jui\:\[grid-template-columns\:2\.4rem_1fr\] {
    grid-template-columns: 2.4rem 1fr !important;
  }

  .jui\:\[grid-template-columns\:2\.6rem_1fr_auto\] {
    grid-template-columns: 2.6rem 1fr auto !important;
  }

  .jui\:\[grid-template-columns\:7rem_1fr_1fr\] {
    grid-template-columns: 7rem 1fr 1fr !important;
  }

  .jui\:\[grid-template-columns\:auto_1fr\] {
    grid-template-columns: auto 1fr !important;
  }

  .jui\:\[grid-template-columns\:auto_1fr_auto\] {
    grid-template-columns: auto 1fr auto !important;
  }

  .jui\:\[grid-template-columns\:minmax\(0\,1fr\)_minmax\(16rem\,18rem\)\] {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 18rem) !important;
  }

  .jui\:\[grid-template-columns\:repeat\(3\,_1fr\)\] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .jui\:\[grid-template-columns\:repeat\(4\,minmax\(0\,1fr\)\)\] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .jui\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  .jui\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .jui\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .jui\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .jui\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  }

  .jui\:grid-cols-\[16px_minmax\(0\,1fr\)_auto\] {
    grid-template-columns: 16px minmax(0, 1fr) auto !important;
  }

  .jui\:grid-cols-\[20px_88px_minmax\(0\,1fr\)\] {
    grid-template-columns: 20px 88px minmax(0, 1fr) !important;
  }

  .jui\:grid-cols-\[28px_minmax\(0\,2fr\)_minmax\(0\,1fr\)_125px_100px_92px\] {
    grid-template-columns: 28px minmax(0, 2fr) minmax(0, 1fr) 125px 100px 92px !important;
  }

  .jui\:grid-cols-\[44px_1fr\] {
    grid-template-columns: 44px 1fr !important;
  }

  .jui\:grid-cols-\[76px_1fr\] {
    grid-template-columns: 76px 1fr !important;
  }

  .jui\:grid-cols-\[minmax\(0\,1fr\)_6\.5rem\] {
    grid-template-columns: minmax(0, 1fr) 6.5rem !important;
  }

  .jui\:grid-cols-\[repeat\(auto-fit\,minmax\(64px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
  }

  .jui\:flex-col {
    flex-direction: column !important;
  }

  .jui\:flex-wrap {
    flex-wrap: wrap !important;
  }

  .jui\:\[place-items\:center\], .jui\:place-items-center {
    place-items: center !important;
  }

  .jui\:content-start {
    align-content: flex-start !important;
  }

  .jui\:\[align-items\:baseline\] {
    align-items: baseline !important;
  }

  .jui\:\[align-items\:end\] {
    align-items: end !important;
  }

  .jui\:\[align-items\:start\] {
    align-items: start !important;
  }

  .jui\:items-baseline {
    align-items: baseline !important;
  }

  .jui\:items-center {
    align-items: center !important;
  }

  .jui\:items-end {
    align-items: flex-end !important;
  }

  .jui\:items-start {
    align-items: flex-start !important;
  }

  .jui\:items-stretch {
    align-items: stretch !important;
  }

  .jui\:\[justify-content\:space-around\] {
    justify-content: space-around !important;
  }

  .jui\:justify-between {
    justify-content: space-between !important;
  }

  .jui\:justify-center {
    justify-content: center !important;
  }

  .jui\:justify-end {
    justify-content: flex-end !important;
  }

  .jui\:justify-start {
    justify-content: flex-start !important;
  }

  .jui\:justify-items-center {
    justify-items: center !important;
  }

  .jui\:\[gap\:0\.2rem\] {
    gap: .2rem !important;
  }

  .jui\:\[gap\:0\.2rem_0\.85rem\] {
    gap: .2rem .85rem !important;
  }

  .jui\:\[gap\:0\.3rem\] {
    gap: .3rem !important;
  }

  .jui\:\[gap\:0\.4rem\] {
    gap: .4rem !important;
  }

  .jui\:\[gap\:0\.5rem\] {
    gap: .5rem !important;
  }

  .jui\:\[gap\:0\.6rem\] {
    gap: .6rem !important;
  }

  .jui\:\[gap\:0\.7rem\] {
    gap: .7rem !important;
  }

  .jui\:\[gap\:0\.9rem\] {
    gap: .9rem !important;
  }

  .jui\:\[gap\:0\.12rem\] {
    gap: .12rem !important;
  }

  .jui\:\[gap\:0\.15rem\] {
    gap: .15rem !important;
  }

  .jui\:\[gap\:0\.25rem\] {
    gap: .25rem !important;
  }

  .jui\:\[gap\:0\.35rem\] {
    gap: .35rem !important;
  }

  .jui\:\[gap\:0\.35rem_0\.7rem\] {
    gap: .35rem .7rem !important;
  }

  .jui\:\[gap\:0\.45rem\] {
    gap: .45rem !important;
  }

  .jui\:\[gap\:0\.55rem\] {
    gap: .55rem !important;
  }

  .jui\:\[gap\:0\.55rem_0\.6rem\] {
    gap: .55rem .6rem !important;
  }

  .jui\:\[gap\:0\.65rem\] {
    gap: .65rem !important;
  }

  .jui\:\[gap\:0\.75rem\] {
    gap: .75rem !important;
  }

  .jui\:\[gap\:0\.75rem_1rem\] {
    gap: .75rem 1rem !important;
  }

  .jui\:\[gap\:0\.85rem\] {
    gap: .85rem !important;
  }

  .jui\:\[gap\:0\.95rem\] {
    gap: .95rem !important;
  }

  .jui\:\[gap\:0\] {
    gap: 0 !important;
  }

  .jui\:\[gap\:1\.15rem\] {
    gap: 1.15rem !important;
  }

  .jui\:\[gap\:1rem\] {
    gap: 1rem !important;
  }

  .jui\:\[gap\:8px\] {
    gap: 8px !important;
  }

  .jui\:gap-0 {
    gap: 0 !important;
  }

  .jui\:gap-0\.5 {
    gap: calc(var(--jui-spacing) * .5) !important;
  }

  .jui\:gap-1 {
    gap: var(--jui-spacing) !important;
  }

  .jui\:gap-1\.5 {
    gap: calc(var(--jui-spacing) * 1.5) !important;
  }

  .jui\:gap-2 {
    gap: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:gap-2\.5 {
    gap: calc(var(--jui-spacing) * 2.5) !important;
  }

  .jui\:gap-3 {
    gap: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:gap-3\.5 {
    gap: calc(var(--jui-spacing) * 3.5) !important;
  }

  .jui\:gap-4 {
    gap: calc(var(--jui-spacing) * 4) !important;
  }

  .jui\:gap-5 {
    gap: calc(var(--jui-spacing) * 5) !important;
  }

  .jui\:gap-6 {
    gap: calc(var(--jui-spacing) * 6) !important;
  }

  :where(.jui\:space-y-0 > :not(:last-child)) {
    --tw-space-y-reverse: 0 !important;
    margin-block: 0 !important;
  }

  :where(.jui\:space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0 !important;
    margin-block-start: calc(var(--jui-spacing) * var(--tw-space-y-reverse)) !important;
    margin-block-end: calc(var(--jui-spacing) * calc(1 - var(--tw-space-y-reverse))) !important;
  }

  :where(.jui\:space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0 !important;
    margin-block-start: calc(calc(var(--jui-spacing) * 2) * var(--tw-space-y-reverse)) !important;
    margin-block-end: calc(calc(var(--jui-spacing) * 2) * calc(1 - var(--tw-space-y-reverse))) !important;
  }

  :where(.jui\:space-y-2\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0 !important;
    margin-block-start: calc(calc(var(--jui-spacing) * 2.5) * var(--tw-space-y-reverse)) !important;
    margin-block-end: calc(calc(var(--jui-spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse))) !important;
  }

  :where(.jui\:space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0 !important;
    margin-block-start: calc(calc(var(--jui-spacing) * 3) * var(--tw-space-y-reverse)) !important;
    margin-block-end: calc(calc(var(--jui-spacing) * 3) * calc(1 - var(--tw-space-y-reverse))) !important;
  }

  :where(.jui\:space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0 !important;
    margin-block-start: calc(calc(var(--jui-spacing) * 4) * var(--tw-space-y-reverse)) !important;
    margin-block-end: calc(calc(var(--jui-spacing) * 4) * calc(1 - var(--tw-space-y-reverse))) !important;
  }

  :where(.jui\:space-y-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0 !important;
    margin-block-start: calc(calc(var(--jui-spacing) * 5) * var(--tw-space-y-reverse)) !important;
    margin-block-end: calc(calc(var(--jui-spacing) * 5) * calc(1 - var(--tw-space-y-reverse))) !important;
  }

  :where(.jui\:space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0 !important;
    margin-block-start: calc(calc(var(--jui-spacing) * 6) * var(--tw-space-y-reverse)) !important;
    margin-block-end: calc(calc(var(--jui-spacing) * 6) * calc(1 - var(--tw-space-y-reverse))) !important;
  }

  :where(.jui\:space-y-10 > :not(:last-child)) {
    --tw-space-y-reverse: 0 !important;
    margin-block-start: calc(calc(var(--jui-spacing) * 10) * var(--tw-space-y-reverse)) !important;
    margin-block-end: calc(calc(var(--jui-spacing) * 10) * calc(1 - var(--tw-space-y-reverse))) !important;
  }

  .jui\:gap-x-2 {
    column-gap: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:gap-x-3 {
    column-gap: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:gap-y-1\.5 {
    row-gap: calc(var(--jui-spacing) * 1.5) !important;
  }

  .jui\:gap-y-2 {
    row-gap: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:\[align-self\:flex-start\] {
    align-self: flex-start !important;
  }

  .jui\:self-end {
    align-self: flex-end !important;
  }

  .jui\:\[justify-self\:start\] {
    justify-self: start !important;
  }

  .jui\:justify-self-start {
    justify-self: flex-start !important;
  }

  .jui\:truncate {
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .jui\:overflow-hidden {
    overflow: hidden !important;
  }

  .jui\:overflow-x-auto {
    overflow-x: auto !important;
  }

  .jui\:overflow-x-hidden {
    overflow-x: hidden !important;
  }

  .jui\:overflow-y-auto {
    overflow-y: auto !important;
  }

  .jui\:\[border-radius\:0\.5rem\] {
    border-radius: .5rem !important;
  }

  .jui\:\[border-radius\:0\.7rem\] {
    border-radius: .7rem !important;
  }

  .jui\:\[border-radius\:0\.8rem\] {
    border-radius: .8rem !important;
  }

  .jui\:\[border-radius\:0\.9rem\] {
    border-radius: .9rem !important;
  }

  .jui\:\[border-radius\:0\.55rem\] {
    border-radius: .55rem !important;
  }

  .jui\:\[border-radius\:0\.65rem\] {
    border-radius: .65rem !important;
  }

  .jui\:\[border-radius\:0\.75rem\] {
    border-radius: .75rem !important;
  }

  .jui\:\[border-radius\:0\.85rem\] {
    border-radius: .85rem !important;
  }

  .jui\:\[border-radius\:0\.95rem\] {
    border-radius: .95rem !important;
  }

  .jui\:\[border-radius\:1\.05rem\] {
    border-radius: 1.05rem !important;
  }

  .jui\:\[border-radius\:1\.15rem\] {
    border-radius: 1.15rem !important;
  }

  .jui\:\[border-radius\:1\.35rem\] {
    border-radius: 1.35rem !important;
  }

  .jui\:\[border-radius\:1rem\] {
    border-radius: 1rem !important;
  }

  .jui\:\[border-radius\:1rem_1rem_0_0\] {
    border-radius: 1rem 1rem 0 0 !important;
  }

  .jui\:\[border-radius\:999px\] {
    border-radius: 999px !important;
  }

  .jui\:rounded {
    border-radius: .25rem !important;
  }

  .jui\:rounded-2xl {
    border-radius: var(--jui-radius-2xl) !important;
  }

  .jui\:rounded-full {
    border-radius: 3.40282e38px !important;
  }

  .jui\:rounded-lg {
    border-radius: var(--jui-radius-lg) !important;
  }

  .jui\:rounded-md {
    border-radius: var(--jui-radius-md) !important;
  }

  .jui\:rounded-none {
    border-radius: 0 !important;
  }

  .jui\:rounded-xl {
    border-radius: var(--jui-radius-xl) !important;
  }

  .jui\:border {
    border-style: var(--tw-border-style) !important;
    border-width: 1px !important;
  }

  .jui\:border-0 {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .jui\:border-2 {
    border-style: var(--tw-border-style) !important;
    border-width: 2px !important;
  }

  .jui\:border-\[1\.5px\] {
    border-style: var(--tw-border-style) !important;
    border-width: 1.5px !important;
  }

  .jui\:border-\[3px\] {
    border-style: var(--tw-border-style) !important;
    border-width: 3px !important;
  }

  .jui\:border-t {
    border-top-style: var(--tw-border-style) !important;
    border-top-width: 1px !important;
  }

  .jui\:border-b {
    border-bottom-style: var(--tw-border-style) !important;
    border-bottom-width: 1px !important;
  }

  .jui\:border-b-2 {
    border-bottom-style: var(--tw-border-style) !important;
    border-bottom-width: 2px !important;
  }

  .jui\:border-l {
    border-left-style: var(--tw-border-style) !important;
    border-left-width: 1px !important;
  }

  .jui\:border-l-2 {
    border-left-style: var(--tw-border-style) !important;
    border-left-width: 2px !important;
  }

  .jui\:border-dashed {
    --tw-border-style: dashed !important;
    border-style: dashed !important;
  }

  .jui\:border-solid {
    --tw-border-style: solid !important;
    border-style: solid !important;
  }

  .jui\:\[border-color\:\#d8f0e1\] {
    border-color: #d8f0e1 !important;
  }

  .jui\:border-\[var\(--color-primary\)\] {
    border-color: var(--color-primary) !important;
  }

  .jui\:border-\[var\(--stroke\)\] {
    border-color: var(--stroke) !important;
  }

  .jui\:border-\[var\(--ui-border\)\] {
    border-color: var(--ui-border) !important;
  }

  .jui\:border-\[var\(--ui-border\,\#e2e8f0\)\] {
    border-color: var(--ui-border, #e2e8f0) !important;
  }

  .jui\:border-blue-100 {
    border-color: var(--jui-color-blue-100) !important;
  }

  .jui\:border-blue-200 {
    border-color: var(--jui-color-blue-200) !important;
  }

  .jui\:border-blue-400 {
    border-color: var(--jui-color-blue-400) !important;
  }

  .jui\:border-blue-500 {
    border-color: var(--jui-color-blue-500) !important;
  }

  .jui\:border-blue-600 {
    border-color: var(--jui-color-blue-600) !important;
  }

  .jui\:border-current\/5 {
    border-color: currentColor !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:border-current\/5 {
      border-color: color-mix(in oklab, currentcolor 5%, transparent) !important;
    }
  }

  .jui\:border-emerald-100 {
    border-color: var(--jui-color-emerald-100) !important;
  }

  .jui\:border-emerald-600 {
    border-color: var(--jui-color-emerald-600) !important;
  }

  .jui\:border-indigo-600\! {
    border-color: var(--jui-color-indigo-600) !important;
  }

  .jui\:border-red-200 {
    border-color: var(--jui-color-red-200) !important;
  }

  .jui\:border-red-300 {
    border-color: var(--jui-color-red-300) !important;
  }

  .jui\:border-red-400\/40 {
    border-color: var(--jui-color-red-400) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:border-red-400\/40 {
      border-color: color-mix(in oklab, var(--jui-color-red-400) 40%, transparent) !important;
    }
  }

  .jui\:border-rose-200 {
    border-color: var(--jui-color-rose-200) !important;
  }

  .jui\:border-slate-200 {
    border-color: var(--jui-color-slate-200) !important;
  }

  .jui\:border-slate-300 {
    border-color: var(--jui-color-slate-300) !important;
  }

  .jui\:border-transparent {
    border-color: #0000 !important;
  }

  .jui\:border-white, .jui\:border-white\/40 {
    border-color: var(--jui-color-white) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:border-white\/40 {
      border-color: color-mix(in oklab, var(--jui-color-white) 40%, transparent) !important;
    }
  }

  .jui\:border-l-indigo-500\! {
    border-left-color: var(--jui-color-indigo-500) !important;
  }

  .jui\:bg-\[\#1b2430\] {
    background-color: #1b2430 !important;
  }

  .jui\:bg-\[\#1c1917\] {
    background-color: #1c1917 !important;
  }

  .jui\:bg-\[\#dce8d4\] {
    background-color: #dce8d4 !important;
  }

  .jui\:bg-\[var\(--color-primary\)\] {
    background-color: var(--color-primary) !important;
  }

  .jui\:bg-\[var\(--surface\)\] {
    background-color: var(--surface) !important;
  }

  .jui\:bg-\[var\(--ui-bg\)\] {
    background-color: var(--ui-bg) !important;
  }

  .jui\:bg-\[var\(--ui-border\)\] {
    background-color: var(--ui-border) !important;
  }

  .jui\:bg-\[var\(--ui-canvas\)\] {
    background-color: var(--ui-canvas) !important;
  }

  .jui\:bg-\[var\(--ui-muted\)\] {
    background-color: var(--ui-muted) !important;
  }

  .jui\:bg-\[var\(--ui-primary\,\#15803d\)\] {
    background-color: var(--ui-primary, #15803d) !important;
  }

  .jui\:bg-\[var\(--ui-subtle\)\] {
    background-color: var(--ui-subtle) !important;
  }

  .jui\:bg-\[var\(--ui-subtle\,\#dcefe4\)\] {
    background-color: var(--ui-subtle, #dcefe4) !important;
  }

  .jui\:bg-\[var\(--ui-subtle\,\#e8f6ee\)\] {
    background-color: var(--ui-subtle, #e8f6ee) !important;
  }

  .jui\:bg-\[var\(--ui-subtle\,\#f1f5f9\)\] {
    background-color: var(--ui-subtle, #f1f5f9) !important;
  }

  .jui\:bg-\[var\(--ui-subtle\,\#f8faf8\)\] {
    background-color: var(--ui-subtle, #f8faf8) !important;
  }

  .jui\:bg-\[var\(--ui-subtle\,\#f8fafc\)\] {
    background-color: var(--ui-subtle, #f8fafc) !important;
  }

  .jui\:bg-\[var\(--ui-surface\)\] {
    background-color: var(--ui-surface) !important;
  }

  .jui\:bg-amber-50 {
    background-color: var(--jui-color-amber-50) !important;
  }

  .jui\:bg-amber-100 {
    background-color: var(--jui-color-amber-100) !important;
  }

  .jui\:bg-amber-300 {
    background-color: var(--jui-color-amber-300) !important;
  }

  .jui\:bg-amber-400\/20 {
    background-color: var(--jui-color-amber-400) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-amber-400\/20 {
      background-color: color-mix(in oklab, var(--jui-color-amber-400) 20%, transparent) !important;
    }
  }

  .jui\:bg-amber-500 {
    background-color: var(--jui-color-amber-500) !important;
  }

  .jui\:bg-black\/50 {
    background-color: var(--jui-color-black) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-black\/50 {
      background-color: color-mix(in oklab, var(--jui-color-black) 50%, transparent) !important;
    }
  }

  .jui\:bg-blue-50, .jui\:bg-blue-50\/60 {
    background-color: var(--jui-color-blue-50) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-blue-50\/60 {
      background-color: color-mix(in oklab, var(--jui-color-blue-50) 60%, transparent) !important;
    }
  }

  .jui\:bg-blue-100 {
    background-color: var(--jui-color-blue-100) !important;
  }

  .jui\:bg-blue-500, .jui\:bg-blue-500\/15 {
    background-color: var(--jui-color-blue-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-blue-500\/15 {
      background-color: color-mix(in oklab, var(--jui-color-blue-500) 15%, transparent) !important;
    }
  }

  .jui\:bg-blue-600 {
    background-color: var(--jui-color-blue-600) !important;
  }

  .jui\:bg-blue-800 {
    background-color: var(--jui-color-blue-800) !important;
  }

  .jui\:bg-current, .jui\:bg-current\/5 {
    background-color: currentColor !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-current\/5 {
      background-color: color-mix(in oklab, currentcolor 5%, transparent) !important;
    }
  }

  .jui\:bg-cyan-500\/15 {
    background-color: var(--jui-color-cyan-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-cyan-500\/15 {
      background-color: color-mix(in oklab, var(--jui-color-cyan-500) 15%, transparent) !important;
    }
  }

  .jui\:bg-cyan-700 {
    background-color: var(--jui-color-cyan-700) !important;
  }

  .jui\:bg-emerald-50, .jui\:bg-emerald-50\/70 {
    background-color: var(--jui-color-emerald-50) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-emerald-50\/70 {
      background-color: color-mix(in oklab, var(--jui-color-emerald-50) 70%, transparent) !important;
    }
  }

  .jui\:bg-emerald-100 {
    background-color: var(--jui-color-emerald-100) !important;
  }

  .jui\:bg-emerald-300 {
    background-color: var(--jui-color-emerald-300) !important;
  }

  .jui\:bg-emerald-500, .jui\:bg-emerald-500\/15 {
    background-color: var(--jui-color-emerald-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-emerald-500\/15 {
      background-color: color-mix(in oklab, var(--jui-color-emerald-500) 15%, transparent) !important;
    }
  }

  .jui\:bg-emerald-500\/20 {
    background-color: var(--jui-color-emerald-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-emerald-500\/20 {
      background-color: color-mix(in oklab, var(--jui-color-emerald-500) 20%, transparent) !important;
    }
  }

  .jui\:bg-emerald-600 {
    background-color: var(--jui-color-emerald-600) !important;
  }

  .jui\:bg-emerald-700 {
    background-color: var(--jui-color-emerald-700) !important;
  }

  .jui\:bg-fuchsia-500\/15 {
    background-color: var(--jui-color-fuchsia-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-fuchsia-500\/15 {
      background-color: color-mix(in oklab, var(--jui-color-fuchsia-500) 15%, transparent) !important;
    }
  }

  .jui\:bg-green-50 {
    background-color: var(--jui-color-green-50) !important;
  }

  .jui\:bg-green-100 {
    background-color: var(--jui-color-green-100) !important;
  }

  .jui\:bg-indigo-50, .jui\:bg-indigo-50\! {
    background-color: var(--jui-color-indigo-50) !important;
  }

  .jui\:bg-indigo-100 {
    background-color: var(--jui-color-indigo-100) !important;
  }

  .jui\:bg-indigo-500, .jui\:bg-indigo-500\/15 {
    background-color: var(--jui-color-indigo-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-indigo-500\/15 {
      background-color: color-mix(in oklab, var(--jui-color-indigo-500) 15%, transparent) !important;
    }
  }

  .jui\:bg-indigo-600, .jui\:bg-indigo-600\! {
    background-color: var(--jui-color-indigo-600) !important;
  }

  .jui\:bg-lime-600 {
    background-color: var(--jui-color-lime-600) !important;
  }

  .jui\:bg-orange-50 {
    background-color: var(--jui-color-orange-50) !important;
  }

  .jui\:bg-orange-100 {
    background-color: var(--jui-color-orange-100) !important;
  }

  .jui\:bg-orange-500\/15 {
    background-color: var(--jui-color-orange-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-orange-500\/15 {
      background-color: color-mix(in oklab, var(--jui-color-orange-500) 15%, transparent) !important;
    }
  }

  .jui\:bg-orange-600 {
    background-color: var(--jui-color-orange-600) !important;
  }

  .jui\:bg-pink-50 {
    background-color: var(--jui-color-pink-50) !important;
  }

  .jui\:bg-pink-500\/15 {
    background-color: var(--jui-color-pink-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-pink-500\/15 {
      background-color: color-mix(in oklab, var(--jui-color-pink-500) 15%, transparent) !important;
    }
  }

  .jui\:bg-purple-500 {
    background-color: var(--jui-color-purple-500) !important;
  }

  .jui\:bg-red-50 {
    background-color: var(--jui-color-red-50) !important;
  }

  .jui\:bg-red-500, .jui\:bg-red-500\/10 {
    background-color: var(--jui-color-red-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-red-500\/10 {
      background-color: color-mix(in oklab, var(--jui-color-red-500) 10%, transparent) !important;
    }
  }

  .jui\:bg-rose-50 {
    background-color: var(--jui-color-rose-50) !important;
  }

  .jui\:bg-rose-500\/15 {
    background-color: var(--jui-color-rose-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-rose-500\/15 {
      background-color: color-mix(in oklab, var(--jui-color-rose-500) 15%, transparent) !important;
    }
  }

  .jui\:bg-sky-50 {
    background-color: var(--jui-color-sky-50) !important;
  }

  .jui\:bg-sky-500\/15 {
    background-color: var(--jui-color-sky-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-sky-500\/15 {
      background-color: color-mix(in oklab, var(--jui-color-sky-500) 15%, transparent) !important;
    }
  }

  .jui\:bg-sky-500\/90 {
    background-color: var(--jui-color-sky-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-sky-500\/90 {
      background-color: color-mix(in oklab, var(--jui-color-sky-500) 90%, transparent) !important;
    }
  }

  .jui\:bg-sky-600 {
    background-color: var(--jui-color-sky-600) !important;
  }

  .jui\:bg-slate-50 {
    background-color: var(--jui-color-slate-50) !important;
  }

  .jui\:bg-slate-100 {
    background-color: var(--jui-color-slate-100) !important;
  }

  .jui\:bg-slate-200 {
    background-color: var(--jui-color-slate-200) !important;
  }

  .jui\:bg-slate-300 {
    background-color: var(--jui-color-slate-300) !important;
  }

  .jui\:bg-slate-500\/15 {
    background-color: var(--jui-color-slate-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-slate-500\/15 {
      background-color: color-mix(in oklab, var(--jui-color-slate-500) 15%, transparent) !important;
    }
  }

  .jui\:bg-slate-600 {
    background-color: var(--jui-color-slate-600) !important;
  }

  .jui\:bg-slate-900 {
    background-color: var(--jui-color-slate-900) !important;
  }

  .jui\:bg-slate-950 {
    background-color: var(--jui-color-slate-950) !important;
  }

  .jui\:bg-teal-500, .jui\:bg-teal-500\/15 {
    background-color: var(--jui-color-teal-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-teal-500\/15 {
      background-color: color-mix(in oklab, var(--jui-color-teal-500) 15%, transparent) !important;
    }
  }

  .jui\:bg-transparent {
    background-color: #0000 !important;
  }

  .jui\:bg-violet-50 {
    background-color: var(--jui-color-violet-50) !important;
  }

  .jui\:bg-violet-100 {
    background-color: var(--jui-color-violet-100) !important;
  }

  .jui\:bg-violet-500\/15 {
    background-color: var(--jui-color-violet-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-violet-500\/15 {
      background-color: color-mix(in oklab, var(--jui-color-violet-500) 15%, transparent) !important;
    }
  }

  .jui\:bg-violet-600 {
    background-color: var(--jui-color-violet-600) !important;
  }

  .jui\:bg-white, .jui\:bg-white\/15 {
    background-color: var(--jui-color-white) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-white\/15 {
      background-color: color-mix(in oklab, var(--jui-color-white) 15%, transparent) !important;
    }
  }

  .jui\:bg-white\/70 {
    background-color: var(--jui-color-white) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-white\/70 {
      background-color: color-mix(in oklab, var(--jui-color-white) 70%, transparent) !important;
    }
  }

  .jui\:bg-yellow-400\/20 {
    background-color: var(--jui-color-yellow-400) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-yellow-400\/20 {
      background-color: color-mix(in oklab, var(--jui-color-yellow-400) 20%, transparent) !important;
    }
  }

  .jui\:bg-zinc-500\/15 {
    background-color: var(--jui-color-zinc-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:bg-zinc-500\/15 {
      background-color: color-mix(in oklab, var(--jui-color-zinc-500) 15%, transparent) !important;
    }
  }

  .jui\:bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab !important;
    background-image: linear-gradient(var(--tw-gradient-stops)) !important;
  }

  .jui\:bg-gradient-to-r {
    --tw-gradient-position: to right in oklab !important;
    background-image: linear-gradient(var(--tw-gradient-stops)) !important;
  }

  .jui\:bg-gradient-to-t {
    --tw-gradient-position: to top in oklab !important;
    background-image: linear-gradient(var(--tw-gradient-stops)) !important;
  }

  .jui\:bg-\[linear-gradient\(90deg\,rgba\(12\,18\,32\,0\.88\)_0\%\,rgba\(12\,18\,32\,0\.45\)_55\%\,rgba\(12\,18\,32\,0\.2\)_100\%\)\] {
    background-image: linear-gradient(90deg, #0c1220e0 0%, #0c122073 55%, #0c122033 100%) !important;
  }

  .jui\:bg-\[linear-gradient\(to_bottom\,transparent_40\%\,rgba\(255\,255\,255\,0\.55\)\)\] {
    background-image: linear-gradient(#0000 40%, #ffffff8c) !important;
  }

  .jui\:bg-none {
    background-image: none !important;
  }

  .jui\:from-black\/65 {
    --tw-gradient-from: var(--jui-color-black) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:from-black\/65 {
      --tw-gradient-from: color-mix(in oklab, var(--jui-color-black) 65%, transparent) !important;
    }
  }

  .jui\:from-black\/65 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) !important;
  }

  .jui\:from-blue-600 {
    --tw-gradient-from: var(--jui-color-blue-600) !important;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) !important;
  }

  .jui\:from-blue-900 {
    --tw-gradient-from: var(--jui-color-blue-900) !important;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) !important;
  }

  .jui\:from-white {
    --tw-gradient-from: var(--jui-color-white) !important;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) !important;
  }

  .jui\:from-30\% {
    --tw-gradient-from-position: 30% !important;
  }

  .jui\:via-black\/30 {
    --tw-gradient-via: var(--jui-color-black) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:via-black\/30 {
      --tw-gradient-via: color-mix(in oklab, var(--jui-color-black) 30%, transparent) !important;
    }
  }

  .jui\:via-black\/30 {
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-via-stops) !important;
  }

  .jui\:to-black\/20 {
    --tw-gradient-to: var(--jui-color-black) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:to-black\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--jui-color-black) 20%, transparent) !important;
    }
  }

  .jui\:to-black\/20 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) !important;
  }

  .jui\:to-blue-700 {
    --tw-gradient-to: var(--jui-color-blue-700) !important;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) !important;
  }

  .jui\:\[object-fit\:cover\] {
    object-fit: cover !important;
  }

  .jui\:object-contain {
    object-fit: contain !important;
  }

  .jui\:object-cover {
    object-fit: cover !important;
  }

  .jui\:object-center {
    object-position: center !important;
  }

  .jui\:\[padding\:0\.1rem_0\.2rem\] {
    padding: .1rem .2rem !important;
  }

  .jui\:\[padding\:0\.1rem_0\.45rem\] {
    padding: .1rem .45rem !important;
  }

  .jui\:\[padding\:0\.2rem_0\.5rem\] {
    padding: .2rem .5rem !important;
  }

  .jui\:\[padding\:0\.2rem_0\.55rem\] {
    padding: .2rem .55rem !important;
  }

  .jui\:\[padding\:0\.2rem_0\.65rem\] {
    padding: .2rem .65rem !important;
  }

  .jui\:\[padding\:0\.2rem_0\] {
    padding: .2rem 0 !important;
  }

  .jui\:\[padding\:0\.4rem_0\.2rem_0\] {
    padding: .4rem .2rem 0 !important;
  }

  .jui\:\[padding\:0\.4rem_1\.7rem_0\.4rem_0\.75rem\] {
    padding: .4rem 1.7rem .4rem .75rem !important;
  }

  .jui\:\[padding\:0\.5rem_1rem\] {
    padding: .5rem 1rem !important;
  }

  .jui\:\[padding\:0\.7rem_0\.8rem\] {
    padding: .7rem .8rem !important;
  }

  .jui\:\[padding\:0\.7rem_0\.75rem\] {
    padding: .7rem .75rem !important;
  }

  .jui\:\[padding\:0\.7rem_0\.85rem\] {
    padding: .7rem .85rem !important;
  }

  .jui\:\[padding\:0\.8rem_0\.9rem\] {
    padding: .8rem .9rem !important;
  }

  .jui\:\[padding\:0\.9rem\] {
    padding: .9rem !important;
  }

  .jui\:\[padding\:0\.9rem_1rem\] {
    padding: .9rem 1rem !important;
  }

  .jui\:\[padding\:0\.12rem_0\.5rem\] {
    padding: .12rem .5rem !important;
  }

  .jui\:\[padding\:0\.12rem_0\.45rem\] {
    padding: .12rem .45rem !important;
  }

  .jui\:\[padding\:0\.15rem_0\.45rem\] {
    padding: .15rem .45rem !important;
  }

  .jui\:\[padding\:0\.15rem_0_1\.05rem\] {
    padding: .15rem 0 1.05rem !important;
  }

  .jui\:\[padding\:0\.18rem_0\.55rem\] {
    padding: .18rem .55rem !important;
  }

  .jui\:\[padding\:0\.22rem_0\.6rem\] {
    padding: .22rem .6rem !important;
  }

  .jui\:\[padding\:0\.22rem_0\.65rem\] {
    padding: .22rem .65rem !important;
  }

  .jui\:\[padding\:0\.28rem_0\.7rem\] {
    padding: .28rem .7rem !important;
  }

  .jui\:\[padding\:0\.35rem_0\.85rem\] {
    padding: .35rem .85rem !important;
  }

  .jui\:\[padding\:0\.35rem_0\] {
    padding: .35rem 0 !important;
  }

  .jui\:\[padding\:0\.45rem_0\.7rem\] {
    padding: .45rem .7rem !important;
  }

  .jui\:\[padding\:0\.45rem_0\.75rem\] {
    padding: .45rem .75rem !important;
  }

  .jui\:\[padding\:0\.55rem\] {
    padding: .55rem !important;
  }

  .jui\:\[padding\:0\.55rem_1rem_0\.75rem\] {
    padding: .55rem 1rem .75rem !important;
  }

  .jui\:\[padding\:0\.65rem_0\.8rem\] {
    padding: .65rem .8rem !important;
  }

  .jui\:\[padding\:0\.75rem\] {
    padding: .75rem !important;
  }

  .jui\:\[padding\:0\.75rem_0\] {
    padding: .75rem 0 !important;
  }

  .jui\:\[padding\:0\.75rem_0_calc\(0\.75rem_\+_env\(safe-area-inset-bottom\,_0px\)\)\] {
    padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .jui\:\[padding\:0\.85rem_0\.4rem\] {
    padding: .85rem .4rem !important;
  }

  .jui\:\[padding\:0\.85rem_0\.9rem\] {
    padding: .85rem .9rem !important;
  }

  .jui\:\[padding\:0\.85rem_0\.45rem\] {
    padding: .85rem .45rem !important;
  }

  .jui\:\[padding\:0\.85rem_0\.95rem\] {
    padding: .85rem .95rem !important;
  }

  .jui\:\[padding\:0\.95rem\] {
    padding: .95rem !important;
  }

  .jui\:\[padding\:0\.95rem_1\.05rem\] {
    padding: .95rem 1.05rem !important;
  }

  .jui\:\[padding\:0\.95rem_1rem\] {
    padding: .95rem 1rem !important;
  }

  .jui\:\[padding\:0\.95rem_1rem_0\.9rem\] {
    padding: .95rem 1rem .9rem !important;
  }

  .jui\:\[padding\:0\.95rem_1rem_0\.75rem\] {
    padding: .95rem 1rem .75rem !important;
  }

  .jui\:\[padding\:0_0\.5rem_0\.4rem\] {
    padding: 0 .5rem .4rem !important;
  }

  .jui\:\[padding\:0_0\.9rem\] {
    padding: 0 .9rem !important;
  }

  .jui\:\[padding\:0_0\.85rem\] {
    padding: 0 .85rem !important;
  }

  .jui\:\[padding\:0_0\.95rem\] {
    padding: 0 .95rem !important;
  }

  .jui\:\[padding\:0_0_0\.35rem\] {
    padding: 0 0 .35rem !important;
  }

  .jui\:\[padding\:0_0_2\.5rem\] {
    padding: 0 0 2.5rem !important;
  }

  .jui\:\[padding\:0_1\.05rem\] {
    padding: 0 1.05rem !important;
  }

  .jui\:\[padding\:0_1rem\] {
    padding: 0 1rem !important;
  }

  .jui\:\[padding\:0_1rem_1rem\] {
    padding: 0 1rem 1rem !important;
  }

  .jui\:\[padding\:0_var\(--shell-content-pad\,_1rem\)_1rem\] {
    padding: 0 var(--shell-content-pad, 1rem) 1rem !important;
  }

  .jui\:\[padding\:1\.1rem\] {
    padding: 1.1rem !important;
  }

  .jui\:\[padding\:1\.1rem_1\.15rem\] {
    padding: 1.1rem 1.15rem !important;
  }

  .jui\:\[padding\:1\.1rem_1rem_1rem\] {
    padding: 1.1rem 1rem 1rem !important;
  }

  .jui\:\[padding\:1\.4rem\] {
    padding: 1.4rem !important;
  }

  .jui\:\[padding\:1\.05rem_1\.15rem_1\.15rem\] {
    padding: 1.05rem 1.15rem 1.15rem !important;
  }

  .jui\:\[padding\:1\.05rem_1rem\] {
    padding: 1.05rem 1rem !important;
  }

  .jui\:\[padding\:1\.35rem_1\.35rem_1\.15rem\] {
    padding: 1.35rem 1.35rem 1.15rem !important;
  }

  .jui\:\[padding\:1rem\] {
    padding: 1rem !important;
  }

  .jui\:\[padding\:1rem_0\.85rem_0\.55rem\] {
    padding: 1rem .85rem .55rem !important;
  }

  .jui\:\[padding\:1rem_1\.05rem\] {
    padding: 1rem 1.05rem !important;
  }

  .jui\:\[padding\:1rem_1rem_1\.05rem\] {
    padding: 1rem 1rem 1.05rem !important;
  }

  .jui\:p-0 {
    padding: 0 !important;
  }

  .jui\:p-0\.5 {
    padding: calc(var(--jui-spacing) * .5) !important;
  }

  .jui\:p-1 {
    padding: var(--jui-spacing) !important;
  }

  .jui\:p-2 {
    padding: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:p-2\.5 {
    padding: calc(var(--jui-spacing) * 2.5) !important;
  }

  .jui\:p-3 {
    padding: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:p-4 {
    padding: calc(var(--jui-spacing) * 4) !important;
  }

  .jui\:p-5 {
    padding: calc(var(--jui-spacing) * 5) !important;
  }

  .jui\:p-6 {
    padding: calc(var(--jui-spacing) * 6) !important;
  }

  .jui\:p-8 {
    padding: calc(var(--jui-spacing) * 8) !important;
  }

  .jui\:px-0 {
    padding-inline: 0 !important;
  }

  .jui\:px-1 {
    padding-inline: var(--jui-spacing) !important;
  }

  .jui\:px-1\.5 {
    padding-inline: calc(var(--jui-spacing) * 1.5) !important;
  }

  .jui\:px-2 {
    padding-inline: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:px-2\.5 {
    padding-inline: calc(var(--jui-spacing) * 2.5) !important;
  }

  .jui\:px-3 {
    padding-inline: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:px-3\.5 {
    padding-inline: calc(var(--jui-spacing) * 3.5) !important;
  }

  .jui\:px-4 {
    padding-inline: calc(var(--jui-spacing) * 4) !important;
  }

  .jui\:px-5 {
    padding-inline: calc(var(--jui-spacing) * 5) !important;
  }

  .jui\:py-0\.5 {
    padding-block: calc(var(--jui-spacing) * .5) !important;
  }

  .jui\:py-1 {
    padding-block: var(--jui-spacing) !important;
  }

  .jui\:py-1\.5 {
    padding-block: calc(var(--jui-spacing) * 1.5) !important;
  }

  .jui\:py-2 {
    padding-block: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:py-2\.5 {
    padding-block: calc(var(--jui-spacing) * 2.5) !important;
  }

  .jui\:py-3 {
    padding-block: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:py-3\.5 {
    padding-block: calc(var(--jui-spacing) * 3.5) !important;
  }

  .jui\:py-4 {
    padding-block: calc(var(--jui-spacing) * 4) !important;
  }

  .jui\:py-6 {
    padding-block: calc(var(--jui-spacing) * 6) !important;
  }

  .jui\:py-8 {
    padding-block: calc(var(--jui-spacing) * 8) !important;
  }

  .jui\:\[padding-top\:0\.7rem\] {
    padding-top: .7rem !important;
  }

  .jui\:\[padding-top\:0\.35rem\] {
    padding-top: .35rem !important;
  }

  .jui\:\[padding-top\:0\.75rem\] {
    padding-top: .75rem !important;
  }

  .jui\:\[padding-top\:1rem\] {
    padding-top: 1rem !important;
  }

  .jui\:pt-0 {
    padding-top: 0 !important;
  }

  .jui\:pt-1 {
    padding-top: var(--jui-spacing) !important;
  }

  .jui\:pt-2 {
    padding-top: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:pt-3 {
    padding-top: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:pt-4 {
    padding-top: calc(var(--jui-spacing) * 4) !important;
  }

  .jui\:\[padding-right\:4\.5rem\] {
    padding-right: 4.5rem !important;
  }

  .jui\:pr-2 {
    padding-right: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:pr-10 {
    padding-right: calc(var(--jui-spacing) * 10) !important;
  }

  .jui\:pb-1 {
    padding-bottom: var(--jui-spacing) !important;
  }

  .jui\:pb-2 {
    padding-bottom: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:pb-3 {
    padding-bottom: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:pb-4 {
    padding-bottom: calc(var(--jui-spacing) * 4) !important;
  }

  .jui\:pb-5 {
    padding-bottom: calc(var(--jui-spacing) * 5) !important;
  }

  .jui\:pb-8 {
    padding-bottom: calc(var(--jui-spacing) * 8) !important;
  }

  .jui\:pb-24 {
    padding-bottom: calc(var(--jui-spacing) * 24) !important;
  }

  .jui\:\[padding-left\:0\.7rem\] {
    padding-left: .7rem !important;
  }

  .jui\:\[padding-left\:0\.85rem\] {
    padding-left: .85rem !important;
  }

  .jui\:\[padding-left\:1\.1rem\] {
    padding-left: 1.1rem !important;
  }

  .jui\:pl-5 {
    padding-left: calc(var(--jui-spacing) * 5) !important;
  }

  .jui\:pl-8 {
    padding-left: calc(var(--jui-spacing) * 8) !important;
  }

  .jui\:pl-9 {
    padding-left: calc(var(--jui-spacing) * 9) !important;
  }

  .jui\:pl-10 {
    padding-left: calc(var(--jui-spacing) * 10) !important;
  }

  .jui\:\[text-align\:center\] {
    text-align: center !important;
  }

  .jui\:\[text-align\:right\] {
    text-align: right !important;
  }

  .jui\:text-center {
    text-align: center !important;
  }

  .jui\:text-left {
    text-align: left !important;
  }

  .jui\:text-right {
    text-align: right !important;
  }

  .jui\:font-sans {
    font-family: var(--jui-font-sans) !important;
  }

  .jui\:text-2xl {
    font-size: var(--jui-text-2xl) !important;
    line-height: var(--tw-leading, var(--jui-text-2xl--line-height)) !important;
  }

  .jui\:text-3xl {
    font-size: var(--jui-text-3xl) !important;
    line-height: var(--tw-leading, var(--jui-text-3xl--line-height)) !important;
  }

  .jui\:text-base {
    font-size: var(--jui-text-base) !important;
    line-height: var(--tw-leading, var(--jui-text-base--line-height)) !important;
  }

  .jui\:text-lg {
    font-size: var(--jui-text-lg) !important;
    line-height: var(--tw-leading, var(--jui-text-lg--line-height)) !important;
  }

  .jui\:text-sm {
    font-size: var(--jui-text-sm) !important;
    line-height: var(--tw-leading, var(--jui-text-sm--line-height)) !important;
  }

  .jui\:text-xl {
    font-size: var(--jui-text-xl) !important;
    line-height: var(--tw-leading, var(--jui-text-xl--line-height)) !important;
  }

  .jui\:text-xs {
    font-size: var(--jui-text-xs) !important;
    line-height: var(--tw-leading, var(--jui-text-xs--line-height)) !important;
  }

  .jui\:\[font-size\:0\.7rem\] {
    font-size: .7rem !important;
  }

  .jui\:\[font-size\:0\.8rem\] {
    font-size: .8rem !important;
  }

  .jui\:\[font-size\:0\.9rem\] {
    font-size: .9rem !important;
  }

  .jui\:\[font-size\:0\.62rem\] {
    font-size: .62rem !important;
  }

  .jui\:\[font-size\:0\.68rem\] {
    font-size: .68rem !important;
  }

  .jui\:\[font-size\:0\.72rem\] {
    font-size: .72rem !important;
  }

  .jui\:\[font-size\:0\.75rem\] {
    font-size: .75rem !important;
  }

  .jui\:\[font-size\:0\.78rem\] {
    font-size: .78rem !important;
  }

  .jui\:\[font-size\:0\.82rem\] {
    font-size: .82rem !important;
  }

  .jui\:\[font-size\:0\.84rem\] {
    font-size: .84rem !important;
  }

  .jui\:\[font-size\:0\.85rem\] {
    font-size: .85rem !important;
  }

  .jui\:\[font-size\:0\.86rem\] {
    font-size: .86rem !important;
  }

  .jui\:\[font-size\:0\.88rem\] {
    font-size: .88rem !important;
  }

  .jui\:\[font-size\:0\.92rem\] {
    font-size: .92rem !important;
  }

  .jui\:\[font-size\:0\.95rem\] {
    font-size: .95rem !important;
  }

  .jui\:\[font-size\:1\.1rem\] {
    font-size: 1.1rem !important;
  }

  .jui\:\[font-size\:1\.2rem\] {
    font-size: 1.2rem !important;
  }

  .jui\:\[font-size\:1\.4rem\] {
    font-size: 1.4rem !important;
  }

  .jui\:\[font-size\:1\.05rem\] {
    font-size: 1.05rem !important;
  }

  .jui\:\[font-size\:1\.7rem\] {
    font-size: 1.7rem !important;
  }

  .jui\:\[font-size\:1\.15rem\] {
    font-size: 1.15rem !important;
  }

  .jui\:\[font-size\:1\.25rem\] {
    font-size: 1.25rem !important;
  }

  .jui\:\[font-size\:1\.35rem\] {
    font-size: 1.35rem !important;
  }

  .jui\:\[font-size\:1\.55rem\] {
    font-size: 1.55rem !important;
  }

  .jui\:text-\[0\.7rem\] {
    font-size: .7rem !important;
  }

  .jui\:text-\[0\.62rem\] {
    font-size: .62rem !important;
  }

  .jui\:text-\[0\.65rem\] {
    font-size: .65rem !important;
  }

  .jui\:text-\[0\.72rem\] {
    font-size: .72rem !important;
  }

  .jui\:text-\[0\.92rem\] {
    font-size: .92rem !important;
  }

  .jui\:text-\[0\.95rem\] {
    font-size: .95rem !important;
  }

  .jui\:text-\[9px\] {
    font-size: 9px !important;
  }

  .jui\:text-\[10px\] {
    font-size: 10px !important;
  }

  .jui\:text-\[11px\] {
    font-size: 11px !important;
  }

  .jui\:text-\[13px\] {
    font-size: 13px !important;
  }

  .jui\:leading-4 {
    --tw-leading: calc(var(--jui-spacing) * 4) !important;
    line-height: calc(var(--jui-spacing) * 4) !important;
  }

  .jui\:leading-5 {
    --tw-leading: calc(var(--jui-spacing) * 5) !important;
    line-height: calc(var(--jui-spacing) * 5) !important;
  }

  .jui\:leading-6 {
    --tw-leading: calc(var(--jui-spacing) * 6) !important;
    line-height: calc(var(--jui-spacing) * 6) !important;
  }

  .jui\:leading-7 {
    --tw-leading: calc(var(--jui-spacing) * 7) !important;
    line-height: calc(var(--jui-spacing) * 7) !important;
  }

  .jui\:leading-relaxed {
    --tw-leading: var(--jui-leading-relaxed) !important;
    line-height: var(--jui-leading-relaxed) !important;
  }

  .jui\:leading-snug {
    --tw-leading: var(--jui-leading-snug) !important;
    line-height: var(--jui-leading-snug) !important;
  }

  .jui\:leading-tight {
    --tw-leading: var(--jui-leading-tight) !important;
    line-height: var(--jui-leading-tight) !important;
  }

  .jui\:\[line-height\:1\.4\] {
    line-height: 1.4 !important;
  }

  .jui\:\[line-height\:1\.05\] {
    line-height: 1.05 !important;
  }

  .jui\:\[line-height\:1\.25\] {
    line-height: 1.25 !important;
  }

  .jui\:\[line-height\:1\] {
    line-height: 1 !important;
  }

  .jui\:font-bold {
    --tw-font-weight: var(--jui-font-weight-bold) !important;
    font-weight: var(--jui-font-weight-bold) !important;
  }

  .jui\:font-medium {
    --tw-font-weight: var(--jui-font-weight-medium) !important;
    font-weight: var(--jui-font-weight-medium) !important;
  }

  .jui\:font-normal {
    --tw-font-weight: var(--jui-font-weight-normal) !important;
    font-weight: var(--jui-font-weight-normal) !important;
  }

  .jui\:font-semibold {
    --tw-font-weight: var(--jui-font-weight-semibold) !important;
    font-weight: var(--jui-font-weight-semibold) !important;
  }

  .jui\:\[font-weight\:650\] {
    font-weight: 650 !important;
  }

  .jui\:\[font-weight\:700\] {
    font-weight: 700 !important;
  }

  .jui\:\[font-weight\:750\] {
    font-weight: 750 !important;
  }

  .jui\:\[font-weight\:800\] {
    font-weight: 800 !important;
  }

  .jui\:tracking-tight {
    --tw-tracking: var(--jui-tracking-tight) !important;
    letter-spacing: var(--jui-tracking-tight) !important;
  }

  .jui\:tracking-wide {
    --tw-tracking: var(--jui-tracking-wide) !important;
    letter-spacing: var(--jui-tracking-wide) !important;
  }

  .jui\:tracking-wider {
    --tw-tracking: var(--jui-tracking-wider) !important;
    letter-spacing: var(--jui-tracking-wider) !important;
  }

  .jui\:\[letter-spacing\:-0\.03em\] {
    letter-spacing: -.03em !important;
  }

  .jui\:\[letter-spacing\:0\.01em\] {
    letter-spacing: .01em !important;
  }

  .jui\:\[letter-spacing\:0\.04em\] {
    letter-spacing: .04em !important;
  }

  .jui\:\[letter-spacing\:0\.06em\] {
    letter-spacing: .06em !important;
  }

  .jui\:\[letter-spacing\:0\.08em\] {
    letter-spacing: .08em !important;
  }

  .jui\:\[letter-spacing\:0\.14em\] {
    letter-spacing: .14em !important;
  }

  .jui\:break-words {
    overflow-wrap: break-word !important;
  }

  .jui\:break-all {
    word-break: break-all !important;
  }

  .jui\:whitespace-normal {
    white-space: normal !important;
  }

  .jui\:whitespace-nowrap {
    white-space: nowrap !important;
  }

  .jui\:whitespace-pre-wrap {
    white-space: pre-wrap !important;
  }

  .jui\:\!text-white {
    color: var(--jui-color-white) !important;
  }

  .jui\:\[color\:\#0f9d58\] {
    color: #0f9d58 !important;
  }

  .jui\:\[color\:\#0f172a\] {
    color: #0f172a !important;
  }

  .jui\:\[color\:\#003ea7\] {
    color: #003ea7 !important;
  }

  .jui\:\[color\:\#6d28d9\] {
    color: #6d28d9 !important;
  }

  .jui\:\[color\:\#16a34a\] {
    color: #16a34a !important;
  }

  .jui\:\[color\:\#0051d5\] {
    color: #0051d5 !important;
  }

  .jui\:\[color\:\#94a3b8\] {
    color: #94a3b8 !important;
  }

  .jui\:\[color\:\#191c1e\] {
    color: #191c1e !important;
  }

  .jui\:\[color\:\#2563eb\] {
    color: #2563eb !important;
  }

  .jui\:\[color\:\#3487ff\] {
    color: #3487ff !important;
  }

  .jui\:\[color\:\#15803d\] {
    color: #15803d !important;
  }

  .jui\:\[color\:\#64748b\] {
    color: #64748b !important;
  }

  .jui\:\[color\:\#334155\] {
    color: #334155 !important;
  }

  .jui\:\[color\:\#400091\] {
    color: #400091 !important;
  }

  .jui\:\[color\:\#475569\] {
    color: #475569 !important;
  }

  .jui\:\[color\:\#777587\] {
    color: #777587 !important;
  }

  .jui\:\[color\:\#b91c1c\] {
    color: #b91c1c !important;
  }

  .jui\:\[color\:\#fff\] {
    color: #fff !important;
  }

  .jui\:\[color\:inherit\] {
    color: inherit !important;
  }

  .jui\:\[color\:var\(--brand\)\] {
    color: var(--brand) !important;
  }

  .jui\:\[color\:var\(--brand\,_\#16a34a\)\] {
    color: var(--brand, #16a34a) !important;
  }

  .jui\:\[color\:var\(--brand-deep\)\] {
    color: var(--brand-deep) !important;
  }

  .jui\:\[color\:var\(--color-on-primary\,_\#fff\)\] {
    color: var(--color-on-primary, #fff) !important;
  }

  .jui\:\[color\:var\(--color-on-surface-variant\,_\#64748b\)\] {
    color: var(--color-on-surface-variant, #64748b) !important;
  }

  .jui\:\[color\:var\(--color-pastel-green-ink\,_\#059669\)\] {
    color: var(--color-pastel-green-ink, #059669) !important;
  }

  .jui\:\[color\:var\(--color-primary\,_\#0055ff\)\] {
    color: var(--color-primary, #05f) !important;
  }

  .jui\:\[color\:var\(--color-primary\,_\#2563eb\)\] {
    color: var(--color-primary, #2563eb) !important;
  }

  .jui\:\[color\:var\(--color-text\,_var\(--color-on-surface\)\)\] {
    color: var(--color-text, var(--color-on-surface)) !important;
  }

  .jui\:\[color\:var\(--color-text-heading\,_var\(--color-on-surface\)\)\] {
    color: var(--color-text-heading, var(--color-on-surface)) !important;
  }

  .jui\:\[color\:var\(--color-text-secondary\,_var\(--color-on-surface-variant\)\)\] {
    color: var(--color-text-secondary, var(--color-on-surface-variant)) !important;
  }

  .jui\:\[color\:var\(--ui-muted\,\#64748b\)\], .jui\:\[color\:var\(--ui-muted\,_\#64748b\)\] {
    color: var(--ui-muted, #64748b) !important;
  }

  .jui\:\[color\:var\(--ui-muted\,_var\(--color-on-surface-variant\,_\#6b7280\)\)\] {
    color: var(--ui-muted, var(--color-on-surface-variant, #6b7280)) !important;
  }

  .jui\:\[color\:var\(--ui-text\)\] {
    color: var(--ui-text) !important;
  }

  .jui\:\[color\:var\(--ui-text\,\#334155\)\] {
    color: var(--ui-text, #334155) !important;
  }

  .jui\:\[color\:var\(--ui-text\,_inherit\)\] {
    color: var(--ui-text, inherit) !important;
  }

  .jui\:\[color\:var\(--ui-text\,_var\(--color-on-surface\)\)\] {
    color: var(--ui-text, var(--color-on-surface)) !important;
  }

  .jui\:text-\[var\(--color-on-primary\)\] {
    color: var(--color-on-primary) !important;
  }

  .jui\:text-\[var\(--color-primary\)\] {
    color: var(--color-primary) !important;
  }

  .jui\:text-\[var\(--text-muted\)\] {
    color: var(--text-muted) !important;
  }

  .jui\:text-\[var\(--ui-muted\)\] {
    color: var(--ui-muted) !important;
  }

  .jui\:text-\[var\(--ui-primary\,\#15803d\)\] {
    color: var(--ui-primary, #15803d) !important;
  }

  .jui\:text-\[var\(--ui-text\)\] {
    color: var(--ui-text) !important;
  }

  .jui\:text-amber-600 {
    color: var(--jui-color-amber-600) !important;
  }

  .jui\:text-amber-700 {
    color: var(--jui-color-amber-700) !important;
  }

  .jui\:text-amber-800 {
    color: var(--jui-color-amber-800) !important;
  }

  .jui\:text-amber-900 {
    color: var(--jui-color-amber-900) !important;
  }

  .jui\:text-amber-950 {
    color: var(--jui-color-amber-950) !important;
  }

  .jui\:text-blue-500 {
    color: var(--jui-color-blue-500) !important;
  }

  .jui\:text-blue-600 {
    color: var(--jui-color-blue-600) !important;
  }

  .jui\:text-blue-700 {
    color: var(--jui-color-blue-700) !important;
  }

  .jui\:text-blue-800 {
    color: var(--jui-color-blue-800) !important;
  }

  .jui\:text-blue-900 {
    color: var(--jui-color-blue-900) !important;
  }

  .jui\:text-blue-950 {
    color: var(--jui-color-blue-950) !important;
  }

  .jui\:text-cyan-700 {
    color: var(--jui-color-cyan-700) !important;
  }

  .jui\:text-emerald-100 {
    color: var(--jui-color-emerald-100) !important;
  }

  .jui\:text-emerald-600 {
    color: var(--jui-color-emerald-600) !important;
  }

  .jui\:text-emerald-700 {
    color: var(--jui-color-emerald-700) !important;
  }

  .jui\:text-emerald-800 {
    color: var(--jui-color-emerald-800) !important;
  }

  .jui\:text-emerald-900 {
    color: var(--jui-color-emerald-900) !important;
  }

  .jui\:text-fuchsia-600 {
    color: var(--jui-color-fuchsia-600) !important;
  }

  .jui\:text-green-600 {
    color: var(--jui-color-green-600) !important;
  }

  .jui\:text-green-700 {
    color: var(--jui-color-green-700) !important;
  }

  .jui\:text-green-800 {
    color: var(--jui-color-green-800) !important;
  }

  .jui\:text-indigo-600 {
    color: var(--jui-color-indigo-600) !important;
  }

  .jui\:text-indigo-700, .jui\:text-indigo-700\! {
    color: var(--jui-color-indigo-700) !important;
  }

  .jui\:text-inherit {
    color: inherit !important;
  }

  .jui\:text-neutral-400 {
    color: var(--jui-color-neutral-400) !important;
  }

  .jui\:text-orange-600 {
    color: var(--jui-color-orange-600) !important;
  }

  .jui\:text-orange-700 {
    color: var(--jui-color-orange-700) !important;
  }

  .jui\:text-pink-500 {
    color: var(--jui-color-pink-500) !important;
  }

  .jui\:text-pink-600 {
    color: var(--jui-color-pink-600) !important;
  }

  .jui\:text-pink-700 {
    color: var(--jui-color-pink-700) !important;
  }

  .jui\:text-red-600 {
    color: var(--jui-color-red-600) !important;
  }

  .jui\:text-red-800 {
    color: var(--jui-color-red-800) !important;
  }

  .jui\:text-rose-500 {
    color: var(--jui-color-rose-500) !important;
  }

  .jui\:text-rose-600 {
    color: var(--jui-color-rose-600) !important;
  }

  .jui\:text-rose-700 {
    color: var(--jui-color-rose-700) !important;
  }

  .jui\:text-rose-800 {
    color: var(--jui-color-rose-800) !important;
  }

  .jui\:text-sky-600 {
    color: var(--jui-color-sky-600) !important;
  }

  .jui\:text-slate-400 {
    color: var(--jui-color-slate-400) !important;
  }

  .jui\:text-slate-500 {
    color: var(--jui-color-slate-500) !important;
  }

  .jui\:text-slate-600 {
    color: var(--jui-color-slate-600) !important;
  }

  .jui\:text-slate-900 {
    color: var(--jui-color-slate-900) !important;
  }

  .jui\:text-teal-600 {
    color: var(--jui-color-teal-600) !important;
  }

  .jui\:text-violet-600 {
    color: var(--jui-color-violet-600) !important;
  }

  .jui\:text-violet-700 {
    color: var(--jui-color-violet-700) !important;
  }

  .jui\:text-white, .jui\:text-white\!, .jui\:text-white\/80 {
    color: var(--jui-color-white) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:text-white\/80 {
      color: color-mix(in oklab, var(--jui-color-white) 80%, transparent) !important;
    }
  }

  .jui\:text-white\/85 {
    color: var(--jui-color-white) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:text-white\/85 {
      color: color-mix(in oklab, var(--jui-color-white) 85%, transparent) !important;
    }
  }

  .jui\:text-yellow-700 {
    color: var(--jui-color-yellow-700) !important;
  }

  .jui\:text-zinc-600 {
    color: var(--jui-color-zinc-600) !important;
  }

  .jui\:\[text-transform\:uppercase\] {
    text-transform: uppercase !important;
  }

  .jui\:capitalize {
    text-transform: capitalize !important;
  }

  .jui\:uppercase {
    text-transform: uppercase !important;
  }

  .jui\:not-italic {
    font-style: normal !important;
  }

  .jui\:tabular-nums {
    --tw-numeric-spacing: tabular-nums !important;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ) !important;
  }

  .jui\:no-underline {
    text-decoration-line: none !important;
  }

  .jui\:underline {
    text-decoration-line: underline !important;
  }

  .jui\:accent-\[var\(--color-primary\)\] {
    accent-color: var(--color-primary) !important;
  }

  .jui\:accent-blue-500 {
    accent-color: var(--jui-color-blue-500) !important;
  }

  .jui\:accent-blue-600 {
    accent-color: var(--jui-color-blue-600) !important;
  }

  .jui\:\[opacity\:0\.85\] {
    opacity: .85 !important;
  }

  .jui\:opacity-0 {
    opacity: 0 !important;
  }

  .jui\:opacity-15 {
    opacity: .15 !important;
  }

  .jui\:opacity-50 {
    opacity: .5 !important;
  }

  .jui\:opacity-60 {
    opacity: .6 !important;
  }

  .jui\:opacity-70 {
    opacity: .7 !important;
  }

  .jui\:opacity-80 {
    opacity: .8 !important;
  }

  .jui\:opacity-90 {
    opacity: .9 !important;
  }

  .jui\:shadow-\[0_0_0_3px_rgba\(37\,99\,235\,0\.12\)\] {
    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, #2563eb1f) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:shadow-none {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:\[box-shadow\:0_1px_2px_color-mix\(in_srgb\,_var\(--color-text\,_\#0f172a\)_4\%\,_transparent\)\] {
    box-shadow: 0 1px 2px var(--color-text, #0f172a) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[box-shadow\:0_1px_2px_color-mix\(in_srgb\,_var\(--color-text\,_\#0f172a\)_4\%\,_transparent\)\] {
      box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text, #0f172a) 4%, transparent) !important;
    }
  }

  .jui\:\[box-shadow\:0_1px_2px_rgba\(15\,23\,42\,0\.04\)\], .jui\:\[box-shadow\:0_1px_2px_rgba\(15\,_23\,_42\,_0\.04\)\] {
    box-shadow: 0 1px 2px #0f172a0a !important;
  }

  .jui\:\[box-shadow\:0_6px_16px_color-mix\(in_srgb\,_var\(--color-text\,_\#0f172a\)_8\%\,_transparent\)\] {
    box-shadow: 0 6px 16px var(--color-text, #0f172a) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[box-shadow\:0_6px_16px_color-mix\(in_srgb\,_var\(--color-text\,_\#0f172a\)_8\%\,_transparent\)\] {
      box-shadow: 0 6px 16px color-mix(in srgb, var(--color-text, #0f172a) 8%, transparent) !important;
    }
  }

  .jui\:\[box-shadow\:0_8px_18px_color-mix\(in_srgb\,_\#16a34a_28\%\,_transparent\)\] {
    box-shadow: 0 8px 18px #16a34a47 !important;
  }

  .jui\:\[box-shadow\:0_8px_20px_rgba\(30\,_0\,_169\,_0\.28\)\] {
    box-shadow: 0 8px 20px #1e00a947 !important;
  }

  .jui\:\[box-shadow\:0_8px_22px_rgba\(15\,_23\,_42\,_0\.05\)\] {
    box-shadow: 0 8px 22px #0f172a0d !important;
  }

  .jui\:\[box-shadow\:0_8px_24px_color-mix\(in_srgb\,_var\(--color-primary\,_\#0055ff\)_6\%\,_transparent\)\] {
    box-shadow: 0 8px 24px var(--color-primary, #05f) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[box-shadow\:0_8px_24px_color-mix\(in_srgb\,_var\(--color-primary\,_\#0055ff\)_6\%\,_transparent\)\] {
      box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary, #05f) 6%, transparent) !important;
    }
  }

  .jui\:ring-\[var\(--ui-border\)\] {
    --tw-ring-color: var(--ui-border) !important;
  }

  .jui\:ring-blue-400\/70 {
    --tw-ring-color: var(--jui-color-blue-400) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:ring-blue-400\/70 {
      --tw-ring-color: color-mix(in oklab, var(--jui-color-blue-400) 70%, transparent) !important;
    }
  }

  .jui\:ring-emerald-300\/50 {
    --tw-ring-color: var(--jui-color-emerald-300) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:ring-emerald-300\/50 {
      --tw-ring-color: color-mix(in oklab, var(--jui-color-emerald-300) 50%, transparent) !important;
    }
  }

  .jui\:grayscale {
    --tw-grayscale: grayscale(100%) !important;
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ) !important;
  }

  .jui\:transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to !important;
    transition-timing-function: var(--tw-ease, var(--jui-default-transition-timing-function)) !important;
    transition-duration: var(--tw-duration, var(--jui-default-transition-duration)) !important;
  }

  .jui\:transition-shadow {
    transition-property: box-shadow !important;
    transition-timing-function: var(--tw-ease, var(--jui-default-transition-timing-function)) !important;
    transition-duration: var(--tw-duration, var(--jui-default-transition-duration)) !important;
  }

  .jui\:transition-transform {
    transition-property: transform, translate, scale, rotate !important;
    transition-timing-function: var(--tw-ease, var(--jui-default-transition-timing-function)) !important;
    transition-duration: var(--tw-duration, var(--jui-default-transition-duration)) !important;
  }

  .jui\:outline-none {
    --tw-outline-style: none !important;
    outline-style: none !important;
  }

  .jui\:\[--mode-b-chrome-height\:0px\] {
    --mode-b-chrome-height: 0px !important;
  }

  .jui\:\[background\:\#16a34a\] {
    background: #16a34a !important;
  }

  .jui\:\[background\:\#dbe1ff\] {
    background: #dbe1ff !important;
  }

  .jui\:\[background\:\#dc2626\] {
    background: #dc2626 !important;
  }

  .jui\:\[background\:\#e2e8f0\] {
    background: #e2e8f0 !important;
  }

  .jui\:\[background\:\#e6e8ea\] {
    background: #e6e8ea !important;
  }

  .jui\:\[background\:\#e8eaf0\] {
    background: #e8eaf0 !important;
  }

  .jui\:\[background\:\#e8f0ff\] {
    background: #e8f0ff !important;
  }

  .jui\:\[background\:\#e8f1ff\] {
    background: #e8f1ff !important;
  }

  .jui\:\[background\:\#e8f7ef\] {
    background: #e8f7ef !important;
  }

  .jui\:\[background\:\#e8f8ee\] {
    background: #e8f8ee !important;
  }

  .jui\:\[background\:\#ecebff\] {
    background: #ecebff !important;
  }

  .jui\:\[background\:\#eceef0\] {
    background: #eceef0 !important;
  }

  .jui\:\[background\:\#ecfdf3\] {
    background: #ecfdf3 !important;
  }

  .jui\:\[background\:\#ede9fe\] {
    background: #ede9fe !important;
  }

  .jui\:\[background\:\#eef2ff\] {
    background: #eef2ff !important;
  }

  .jui\:\[background\:\#eef4ff\] {
    background: #eef4ff !important;
  }

  .jui\:\[background\:\#eef5ff\] {
    background: #eef5ff !important;
  }

  .jui\:\[background\:\#f1f5f9\] {
    background: #f1f5f9 !important;
  }

  .jui\:\[background\:\#f3fbf6\] {
    background: #f3fbf6 !important;
  }

  .jui\:\[background\:\#f4f8ff\] {
    background: #f4f8ff !important;
  }

  .jui\:\[background\:\#f8fafc\] {
    background: #f8fafc !important;
  }

  .jui\:\[background\:\#fff\] {
    background: #fff !important;
  }

  .jui\:\[background\:color-mix\(in_srgb\,_\#16a34a_14\%\,_\#fff\)\] {
    background: #def2e6 !important;
  }

  .jui\:\[background\:color-mix\(in_srgb\,_var\(--brand-deep\)_10\%\,_\#fff\)\] {
    background: var(--brand-deep) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[background\:color-mix\(in_srgb\,_var\(--brand-deep\)_10\%\,_\#fff\)\] {
      background: color-mix(in srgb, var(--brand-deep) 10%, #fff) !important;
    }
  }

  .jui\:\[background\:color-mix\(in_srgb\,_var\(--brand-deep\)_12\%\,_\#fff\)\] {
    background: var(--brand-deep) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[background\:color-mix\(in_srgb\,_var\(--brand-deep\)_12\%\,_\#fff\)\] {
      background: color-mix(in srgb, var(--brand-deep) 12%, #fff) !important;
    }
  }

  .jui\:\[background\:color-mix\(in_srgb\,_var\(--color-primary\,_\#2563eb\)_12\%\,_transparent\)\] {
    background: var(--color-primary, #2563eb) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[background\:color-mix\(in_srgb\,_var\(--color-primary\,_\#2563eb\)_12\%\,_transparent\)\] {
      background: color-mix(in srgb, var(--color-primary, #2563eb) 12%, transparent) !important;
    }
  }

  .jui\:\[background\:color-mix\(in_srgb\,_var\(--color-surface\,_\#fff\)_55\%\,_transparent\)\] {
    background: var(--color-surface, #fff) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[background\:color-mix\(in_srgb\,_var\(--color-surface\,_\#fff\)_55\%\,_transparent\)\] {
      background: color-mix(in srgb, var(--color-surface, #fff) 55%, transparent) !important;
    }
  }

  .jui\:\[background\:linear-gradient\(145deg\,_\#dbe4ff\,_\#eef2ff\)\] {
    background: linear-gradient(145deg, #dbe4ff, #eef2ff) !important;
  }

  .jui\:\[background\:linear-gradient\(145deg\,_var\(--brand\)_0\%\,_var\(--brand-deep\)_55\%\,_\#0b1020_100\%\)\] {
    background: linear-gradient(145deg, var(--brand) 0%, var(--brand-deep) 55%, #0b1020 100%) !important;
  }

  .jui\:\[background\:linear-gradient\(180deg\,_\#f1f5f9_0\%\,_\#fff_70\%\)\] {
    background: linear-gradient(#f1f5f9 0%, #fff 70%) !important;
  }

  .jui\:\[background\:linear-gradient\(180deg\,_color-mix\(in_srgb\,_var\(--color-primary\,_\#0055ff\)_7\%\,_var\(--card\,_\#fff\)\)\,_var\(--card\,_var\(--color-surface\)\)\)\] {
    background: linear-gradient(180deg, var(--color-primary, #05f), var(--card, var(--color-surface))) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[background\:linear-gradient\(180deg\,_color-mix\(in_srgb\,_var\(--color-primary\,_\#0055ff\)_7\%\,_var\(--card\,_\#fff\)\)\,_var\(--card\,_var\(--color-surface\)\)\)\] {
      background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary, #05f) 7%, var(--card, #fff)), var(--card, var(--color-surface))) !important;
    }
  }

  .jui\:\[background\:linear-gradient\(180deg\,_var\(--color-pastel-purple\)_0\%\,_var\(--color-background\)_100\%\)\] {
    background: linear-gradient(180deg, var(--color-pastel-purple) 0%, var(--color-background) 100%) !important;
  }

  .jui\:\[background\:radial-gradient\(circle_at_80\%_30\%\,_color-mix\(in_srgb\,_var\(--color-pastel-sky\,_\#e0f2fe\)_80\%\,_transparent\)\,_transparent_42\%\)\,_linear-gradient\(160deg\,_var\(--color-pastel-sky\,_\#e0f2fe\)\,_color-mix\(in_srgb\,_var\(--color-pastel-green\,_\#d1fae5\)_70\%\,_var\(--color-pastel-blue\,_\#dbeafe\)\)\)\] {
    background: radial-gradient(circle at 80% 30%, var(--color-pastel-sky, #e0f2fe), transparent 42%), linear-gradient(160deg, var(--color-pastel-sky, #e0f2fe), var(--color-pastel-green, #d1fae5)) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[background\:radial-gradient\(circle_at_80\%_30\%\,_color-mix\(in_srgb\,_var\(--color-pastel-sky\,_\#e0f2fe\)_80\%\,_transparent\)\,_transparent_42\%\)\,_linear-gradient\(160deg\,_var\(--color-pastel-sky\,_\#e0f2fe\)\,_color-mix\(in_srgb\,_var\(--color-pastel-green\,_\#d1fae5\)_70\%\,_var\(--color-pastel-blue\,_\#dbeafe\)\)\)\] {
      background: radial-gradient(circle at 80% 30%, color-mix(in srgb, var(--color-pastel-sky, #e0f2fe) 80%, transparent), transparent 42%), linear-gradient(160deg, var(--color-pastel-sky, #e0f2fe), color-mix(in srgb, var(--color-pastel-green, #d1fae5) 70%, var(--color-pastel-blue, #dbeafe))) !important;
    }
  }

  .jui\:\[background\:transparent\] {
    background: none !important;
  }

  .jui\:\[background\:var\(--brand\)\] {
    background: var(--brand) !important;
  }

  .jui\:\[background\:var\(--brand-deep\)\] {
    background: var(--brand-deep) !important;
  }

  .jui\:\[background\:var\(--card\,_\#fff\)\] {
    background: var(--card, #fff) !important;
  }

  .jui\:\[background\:var\(--card\,_var\(--color-surface\)\)\] {
    background: var(--card, var(--color-surface)) !important;
  }

  .jui\:\[background\:var\(--color-background\,_\#fff\)\] {
    background: var(--color-background, #fff) !important;
  }

  .jui\:\[background\:var\(--color-pastel-green\,_\#d1fae5\)\] {
    background: var(--color-pastel-green, #d1fae5) !important;
  }

  .jui\:\[background\:var\(--color-primary\,_var\(--brand\)\)\] {
    background: var(--color-primary, var(--brand)) !important;
  }

  .jui\:\[background\:var\(--color-surface\,_\#fff\)\] {
    background: var(--color-surface, #fff) !important;
  }

  .jui\:\[background\:var\(--ui-subtle\,\#f8fafc\)\] {
    background: var(--ui-subtle, #f8fafc) !important;
  }

  .jui\:\[background\:var\(--ui-surface\)\] {
    background: var(--ui-surface) !important;
  }

  .jui\:\[background\:var\(--ui-surface\,\#fff\)\], .jui\:\[background\:var\(--ui-surface\,_\#fff\)\] {
    background: var(--ui-surface, #fff) !important;
  }

  .jui\:\[background\:var\(--ui-surface\,_var\(--color-surface\,_\#fff\)\)\] {
    background: var(--ui-surface, var(--color-surface, #fff)) !important;
  }

  .jui\:\[border-bottom\:1px_solid_\#eef2f6\] {
    border-bottom: 1px solid #eef2f6 !important;
  }

  .jui\:\[border-bottom\:1px_solid_var\(--ui-border\)\] {
    border-bottom: 1px solid var(--ui-border) !important;
  }

  .jui\:\[border-left\:1px_solid_\#e2e8f0\] {
    border-left: 1px solid #e2e8f0 !important;
  }

  .jui\:\[border-left\:4px_solid_\#f59e0b\] {
    border-left: 4px solid #f59e0b !important;
  }

  .jui\:\[border-left\:4px_solid_var\(--brand\)\] {
    border-left: 4px solid var(--brand) !important;
  }

  .jui\:\[border-top\:1px_solid_\#e2e8f0\] {
    border-top: 1px solid #e2e8f0 !important;
  }

  .jui\:\[border-top\:1px_solid_\#eef2f6\] {
    border-top: 1px solid #eef2f6 !important;
  }

  .jui\:\[border-top\:1px_solid_\#f1f5f9\] {
    border-top: 1px solid #f1f5f9 !important;
  }

  .jui\:\[border\:0\] {
    border: 0 !important;
  }

  .jui\:\[border\:1px_dashed_\#cbd5e1\] {
    border: 1px dashed #cbd5e1 !important;
  }

  .jui\:\[border\:1px_solid_\#c7c4d8\] {
    border: 1px solid #c7c4d8 !important;
  }

  .jui\:\[border\:1px_solid_\#d7e6fb\] {
    border: 1px solid #d7e6fb !important;
  }

  .jui\:\[border\:1px_solid_\#dbe3ee\] {
    border: 1px solid #dbe3ee !important;
  }

  .jui\:\[border\:1px_solid_\#dbe7f5\] {
    border: 1px solid #dbe7f5 !important;
  }

  .jui\:\[border\:1px_solid_\#e2e8f0\] {
    border: 1px solid #e2e8f0 !important;
  }

  .jui\:\[border\:1px_solid_\#e3edfb\] {
    border: 1px solid #e3edfb !important;
  }

  .jui\:\[border\:1px_solid_\#e8edf3\] {
    border: 1px solid #e8edf3 !important;
  }

  .jui\:\[border\:1px_solid_\#e8eef4\] {
    border: 1px solid #e8eef4 !important;
  }

  .jui\:\[border\:1px_solid_\#eef2f6\] {
    border: 1px solid #eef2f6 !important;
  }

  .jui\:\[border\:1px_solid_var\(--brand\)\] {
    border: 1px solid var(--brand) !important;
  }

  .jui\:\[border\:1px_solid_var\(--color-border\,_var\(--color-outline-variant\)\)\] {
    border: 1px solid var(--color-border, var(--color-outline-variant)) !important;
  }

  .jui\:\[border\:1px_solid_var\(--color-outline-variant\,_\#e2e8f0\)\] {
    border: 1px solid var(--color-outline-variant, #e2e8f0) !important;
  }

  .jui\:\[border\:1px_solid_var\(--ui-border\)\] {
    border: 1px solid var(--ui-border) !important;
  }

  .jui\:\[border\:1px_solid_var\(--ui-border\,\#e2e8f0\)\] {
    border: 1px solid var(--ui-border, #e2e8f0) !important;
  }

  .jui\:\[border\:1px_solid_var\(--ui-border\,\#e8eef4\)\] {
    border: 1px solid var(--ui-border, #e8eef4) !important;
  }

  .jui\:\[border\:1px_solid_var\(--ui-border\,_\#e5e7eb\)\] {
    border: 1px solid var(--ui-border, #e5e7eb) !important;
  }

  .jui\:\[border\:1px_solid_var\(--ui-border\,_var\(--color-outline-variant\,_\#e2e8f0\)\)\] {
    border: 1px solid var(--ui-border, var(--color-outline-variant, #e2e8f0)) !important;
  }

  .jui\:\[border\:1px_solid_var\(--ui-border\,_var\(--color-outline-variant\,_\#e5e7eb\)\)\] {
    border: 1px solid var(--ui-border, var(--color-outline-variant, #e5e7eb)) !important;
  }

  .jui\:\[transition\:border-color_0\.15s_ease\,_box-shadow_0\.15s_ease\,_background_0\.15s_ease\] {
    transition: border-color .15s, box-shadow .15s, background .15s !important;
  }

  .jui\:after\:content-\[\'\*\'\]:after {
    content: var(--tw-content);
    --tw-content: "*" !important;
    content: var(--tw-content) !important;
  }

  @media (hover: hover) {
    .jui\:hover\:border-blue-600:hover {
      border-color: var(--jui-color-blue-600) !important;
    }

    .jui\:hover\:bg-\[var\(--ui-bg\)\]:hover {
      background-color: var(--ui-bg) !important;
    }

    .jui\:hover\:bg-\[var\(--ui-subtle\)\]:hover {
      background-color: var(--ui-subtle) !important;
    }

    .jui\:hover\:bg-blue-50:hover {
      background-color: var(--jui-color-blue-50) !important;
    }

    .jui\:hover\:bg-emerald-600:hover {
      background-color: var(--jui-color-emerald-600) !important;
    }

    .jui\:hover\:bg-emerald-700:hover {
      background-color: var(--jui-color-emerald-700) !important;
    }

    .jui\:hover\:bg-red-100:hover {
      background-color: var(--jui-color-red-100) !important;
    }

    .jui\:hover\:text-\[var\(--ui-text\)\]:hover {
      color: var(--ui-text) !important;
    }

    .jui\:hover\:text-red-700:hover {
      color: var(--jui-color-red-700) !important;
    }

    .jui\:hover\:underline:hover {
      text-decoration-line: underline !important;
    }

    .jui\:hover\:brightness-95:hover {
      --tw-brightness: brightness(95%) !important;
      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ) !important;
    }
  }

  .jui\:focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:focus\:ring-indigo-500:focus {
    --tw-ring-color: var(--jui-color-indigo-500) !important;
  }

  .jui\:focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style) !important;
    outline-width: 2px !important;
  }

  .jui\:focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px !important;
  }

  .jui\:focus-visible\:outline-blue-500:focus-visible {
    outline-color: var(--jui-color-blue-500) !important;
  }

  .jui\:focus-visible\:outline-blue-600:focus-visible {
    outline-color: var(--jui-color-blue-600) !important;
  }

  .jui\:focus-visible\:outline-emerald-600:focus-visible {
    outline-color: var(--jui-color-emerald-600) !important;
  }

  .jui\:disabled\:pointer-events-none:disabled {
    pointer-events: none !important;
  }

  .jui\:disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed !important;
  }

  .jui\:disabled\:opacity-40:disabled {
    opacity: .4 !important;
  }

  .jui\:disabled\:opacity-50:disabled {
    opacity: .5 !important;
  }

  .jui\:has-\[\:checked\]\:border-\[var\(--color-primary\)\]:has(:checked) {
    border-color: var(--color-primary) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .jui\:motion-reduce\:animate-none {
      animation: none !important;
    }
  }

  @media not all and (min-width: 650px) {
    .jui\:max-\[650px\]\:hidden {
      display: none !important;
    }
  }

  @media (min-width: 40rem) {
    .jui\:sm\:col-span-2 {
      grid-column: span 2 / span 2 !important;
    }

    .jui\:sm\:ml-8 {
      margin-left: calc(var(--jui-spacing) * 8) !important;
    }

    .jui\:sm\:w-56 {
      width: calc(var(--jui-spacing) * 56) !important;
    }

    .jui\:sm\:w-\[100px\] {
      width: 100px !important;
    }

    .jui\:sm\:basis-auto {
      flex-basis: auto !important;
    }

    .jui\:sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .jui\:sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .jui\:sm\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .jui\:sm\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    .jui\:sm\:grid-cols-\[1fr_180px\] {
      grid-template-columns: 1fr 180px !important;
    }

    .jui\:sm\:grid-cols-\[1fr_auto\] {
      grid-template-columns: 1fr auto !important;
    }

    .jui\:sm\:grid-cols-\[20px_100px_minmax\(0\,1fr\)\] {
      grid-template-columns: 20px 100px minmax(0, 1fr) !important;
    }

    .jui\:sm\:grid-cols-\[minmax\(0\,1fr\)_minmax\(140px\,220px\)\] {
      grid-template-columns: minmax(0, 1fr) minmax(140px, 220px) !important;
    }

    .jui\:sm\:flex-nowrap {
      flex-wrap: nowrap !important;
    }

    .jui\:sm\:items-center {
      align-items: center !important;
    }

    .jui\:sm\:items-start {
      align-items: flex-start !important;
    }

    .jui\:sm\:gap-5 {
      gap: calc(var(--jui-spacing) * 5) !important;
    }

    .jui\:sm\:gap-x-5 {
      column-gap: calc(var(--jui-spacing) * 5) !important;
    }

    .jui\:sm\:border-0 {
      border-style: var(--tw-border-style) !important;
      border-width: 0 !important;
    }

    .jui\:sm\:border-l {
      border-left-style: var(--tw-border-style) !important;
      border-left-width: 1px !important;
    }

    .jui\:sm\:border-solid {
      --tw-border-style: solid !important;
      border-style: solid !important;
    }

    .jui\:sm\:border-\[var\(--ui-border\)\] {
      border-color: var(--ui-border) !important;
    }

    .jui\:sm\:\[padding\:1\.25rem\] {
      padding: 1.25rem !important;
    }

    .jui\:sm\:p-4 {
      padding: calc(var(--jui-spacing) * 4) !important;
    }

    .jui\:sm\:p-5 {
      padding: calc(var(--jui-spacing) * 5) !important;
    }

    .jui\:sm\:p-6 {
      padding: calc(var(--jui-spacing) * 6) !important;
    }

    .jui\:sm\:p-7 {
      padding: calc(var(--jui-spacing) * 7) !important;
    }

    .jui\:sm\:px-3 {
      padding-inline: calc(var(--jui-spacing) * 3) !important;
    }

    .jui\:sm\:px-4 {
      padding-inline: calc(var(--jui-spacing) * 4) !important;
    }

    .jui\:sm\:px-6 {
      padding-inline: calc(var(--jui-spacing) * 6) !important;
    }

    .jui\:sm\:pr-4 {
      padding-right: calc(var(--jui-spacing) * 4) !important;
    }

    .jui\:sm\:pl-4 {
      padding-left: calc(var(--jui-spacing) * 4) !important;
    }

    .jui\:sm\:text-2xl {
      font-size: var(--jui-text-2xl) !important;
      line-height: var(--tw-leading, var(--jui-text-2xl--line-height)) !important;
    }

    .jui\:sm\:text-sm {
      font-size: var(--jui-text-sm) !important;
      line-height: var(--tw-leading, var(--jui-text-sm--line-height)) !important;
    }
  }

  @media (min-width: 48rem) {
    .jui\:md\:col-auto {
      grid-column: auto !important;
    }

    .jui\:md\:col-span-2 {
      grid-column: span 2 / span 2 !important;
    }

    .jui\:md\:col-span-4 {
      grid-column: span 4 / span 4 !important;
    }

    .jui\:md\:col-span-12 {
      grid-column: span 12 / span 12 !important;
    }

    .jui\:md\:row-auto {
      grid-row: auto !important;
    }

    .jui\:md\:row-span-1 {
      grid-row: span 1 / span 1 !important;
    }

    .jui\:md\:flex {
      display: flex !important;
    }

    .jui\:md\:grid {
      display: grid !important;
    }

    .jui\:md\:hidden {
      display: none !important;
    }

    .jui\:md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .jui\:md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .jui\:md\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    .jui\:md\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

    .jui\:md\:grid-cols-\[16px_minmax\(0\,1fr\)_90px_112px_auto\] {
      grid-template-columns: 16px minmax(0, 1fr) 90px 112px auto !important;
    }

    .jui\:md\:grid-cols-\[28px_minmax\(0\,2fr\)_minmax\(0\,1fr\)_125px_100px_92px\] {
      grid-template-columns: 28px minmax(0, 2fr) minmax(0, 1fr) 125px 100px 92px !important;
    }

    .jui\:md\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
      grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .jui\:md\:items-end {
      align-items: flex-end !important;
    }

    .jui\:md\:gap-2 {
      gap: calc(var(--jui-spacing) * 2) !important;
    }

    .jui\:md\:gap-3 {
      gap: calc(var(--jui-spacing) * 3) !important;
    }

    .jui\:md\:truncate {
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      overflow: hidden !important;
    }

    .jui\:md\:border-t-0 {
      border-top-style: var(--tw-border-style) !important;
      border-top-width: 0 !important;
    }

    .jui\:md\:border-l {
      border-left-style: var(--tw-border-style) !important;
      border-left-width: 1px !important;
    }

    .jui\:md\:p-6 {
      padding: calc(var(--jui-spacing) * 6) !important;
    }

    .jui\:md\:pt-0 {
      padding-top: 0 !important;
    }

    .jui\:md\:pl-3 {
      padding-left: calc(var(--jui-spacing) * 3) !important;
    }
  }

  @media (min-width: 64rem) {
    .jui\:lg\:ml-auto {
      margin-left: auto !important;
    }

    .jui\:lg\:w-auto {
      width: auto !important;
    }

    .jui\:lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .jui\:lg\:grid-cols-\[minmax\(0\,1\.8fr\)_minmax\(260px\,1fr\)\] {
      grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr) !important;
    }

    .jui\:lg\:grid-cols-\[minmax\(0\,1fr\)_220px\] {
      grid-template-columns: minmax(0, 1fr) 220px !important;
    }

    .jui\:lg\:grid-cols-\[minmax\(0\,1fr\)_280px\] {
      grid-template-columns: minmax(0, 1fr) 280px !important;
    }

    .jui\:lg\:grid-cols-\[minmax\(12rem\,1\.4fr\)_auto_minmax\(0\,1fr\)_auto_auto\] {
      grid-template-columns: minmax(12rem, 1.4fr) auto minmax(0, 1fr) auto auto !important;
    }

    .jui\:lg\:items-center {
      align-items: center !important;
    }
  }

  @media (min-width: 80rem) {
    .jui\:xl\:w-36 {
      width: calc(var(--jui-spacing) * 36) !important;
    }

    .jui\:xl\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    .jui\:xl\:flex-col {
      flex-direction: column !important;
    }

    .jui\:xl\:flex-row {
      flex-direction: row !important;
    }

    .jui\:xl\:border-t-0 {
      border-top-style: var(--tw-border-style) !important;
      border-top-width: 0 !important;
    }

    .jui\:xl\:border-l {
      border-left-style: var(--tw-border-style) !important;
      border-left-width: 1px !important;
    }

    .jui\:xl\:pt-0 {
      padding-top: 0 !important;
    }

    .jui\:xl\:pl-5 {
      padding-left: calc(var(--jui-spacing) * 5) !important;
    }
  }

  @media (prefers-color-scheme: dark) {
    .jui\:dark\:border-blue-900 {
      border-color: var(--jui-color-blue-900) !important;
    }

    .jui\:dark\:border-emerald-900 {
      border-color: var(--jui-color-emerald-900) !important;
    }

    .jui\:dark\:bg-amber-950 {
      background-color: var(--jui-color-amber-950) !important;
    }

    .jui\:dark\:bg-blue-950, .jui\:dark\:bg-blue-950\/30 {
      background-color: var(--jui-color-blue-950) !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .jui\:dark\:bg-blue-950\/30 {
        background-color: color-mix(in oklab, var(--jui-color-blue-950) 30%, transparent) !important;
      }
    }

    .jui\:dark\:bg-blue-950\/50 {
      background-color: var(--jui-color-blue-950) !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .jui\:dark\:bg-blue-950\/50 {
        background-color: color-mix(in oklab, var(--jui-color-blue-950) 50%, transparent) !important;
      }
    }

    .jui\:dark\:bg-emerald-950, .jui\:dark\:bg-emerald-950\/30 {
      background-color: var(--jui-color-emerald-950) !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .jui\:dark\:bg-emerald-950\/30 {
        background-color: color-mix(in oklab, var(--jui-color-emerald-950) 30%, transparent) !important;
      }
    }

    .jui\:dark\:bg-rose-950 {
      background-color: var(--jui-color-rose-950) !important;
    }

    .jui\:dark\:text-amber-200 {
      color: var(--jui-color-amber-200) !important;
    }

    .jui\:dark\:text-blue-200 {
      color: var(--jui-color-blue-200) !important;
    }

    .jui\:dark\:text-emerald-200 {
      color: var(--jui-color-emerald-200) !important;
    }

    .jui\:dark\:text-rose-200 {
      color: var(--jui-color-rose-200) !important;
    }
  }

  .jui\:\[\&_\.app-card\]\:\[border-radius\:0\.85rem\] .app-card {
    border-radius: .85rem !important;
  }

  .jui\:\[\&_\.app-card\]\:\[background\:\#fff\] .app-card {
    background: #fff !important;
  }

  .jui\:\[\&_\.app-card\]\:\[border\:1px_solid_\#e2e8f0\] .app-card {
    border: 1px solid #e2e8f0 !important;
  }

  .jui\:\[\&_\.assoc-app-actions\]\:\[margin-top\:0\.55rem\] .assoc-app-actions {
    margin-top: .55rem !important;
  }

  .jui\:\[\&_\.assoc-app-actions\]\:flex .assoc-app-actions {
    display: flex !important;
  }

  .jui\:\[\&_\.assoc-app-actions\]\:\[gap\:0\.45rem\] .assoc-app-actions {
    gap: .45rem !important;
  }

  .jui\:\[\&_\.assoc-ch-menu\]\:flex-col .assoc-ch-menu {
    flex-direction: column !important;
  }

  .jui\:\[\&_\.assoc-ch-menu\]\:\[gap\:0\.35rem\] .assoc-ch-menu {
    gap: .35rem !important;
  }

  .jui\:\[\&_\.assoc-ch-menu\]\:\[padding\:0\.25rem_0_0\] .assoc-ch-menu {
    padding: .25rem 0 0 !important;
  }

  .jui\:\[\&_\.assoc-member-create\]\:grid .assoc-member-create {
    display: grid !important;
  }

  .jui\:\[\&_\.assoc-member-create\]\:\[gap\:24px\] .assoc-member-create {
    gap: 24px !important;
  }

  .jui\:\[\&_\.assoc-member-create\]\:\[border-radius\:8px\] .assoc-member-create {
    border-radius: 8px !important;
  }

  .jui\:\[\&_\.assoc-member-create\]\:\[padding\:24px\] .assoc-member-create {
    padding: 24px !important;
  }

  .jui\:\[\&_\.assoc-member-create\]\:shadow-none .assoc-member-create {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:\[\&_\.assoc-member-create\]\:\[background\:var\(--ui-surface\)\] .assoc-member-create {
    background: var(--ui-surface) !important;
  }

  .jui\:\[\&_\.assoc-member-create\]\:\[border\:1px_solid_var\(--ui-border\)\] .assoc-member-create {
    border: 1px solid var(--ui-border) !important;
  }

  .jui\:\[\&_\.assoc-member-create-actions\]\:m-0 .assoc-member-create-actions {
    margin: 0 !important;
  }

  .jui\:\[\&_\.assoc-member-create-actions\]\:flex .assoc-member-create-actions {
    display: flex !important;
  }

  .jui\:\[\&_\.assoc-member-create-actions\]\:flex-wrap .assoc-member-create-actions {
    flex-wrap: wrap !important;
  }

  .jui\:\[\&_\.assoc-member-create-actions\]\:justify-end .assoc-member-create-actions {
    justify-content: flex-end !important;
  }

  .jui\:\[\&_\.assoc-member-create-actions\]\:\[gap\:10px\] .assoc-member-create-actions {
    gap: 10px !important;
  }

  .jui\:\[\&_\.assoc-member-create-form\]\:m-0 .assoc-member-create-form {
    margin: 0 !important;
  }

  .jui\:\[\&_\.assoc-member-create-form\]\:grid .assoc-member-create-form {
    display: grid !important;
  }

  .jui\:\[\&_\.assoc-member-create-form\]\:\[gap\:24px\] .assoc-member-create-form {
    gap: 24px !important;
  }

  .jui\:\[\&_\.assoc-member-create-form\]\:\[border-radius\:0\] .assoc-member-create-form {
    border-radius: 0 !important;
  }

  .jui\:\[\&_\.assoc-member-create-form\]\:border-0 .assoc-member-create-form {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .jui\:\[\&_\.assoc-member-create-form\]\:bg-transparent .assoc-member-create-form {
    background-color: #0000 !important;
  }

  .jui\:\[\&_\.assoc-member-create-form\]\:p-0 .assoc-member-create-form {
    padding: 0 !important;
  }

  .jui\:\[\&_\.assoc-member-create-form\]\:shadow-none .assoc-member-create-form {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:\[\&_\.assoc-member-create-form_\>_\.assoc-member-create-actions\]\:\[padding-top\:20px\] .assoc-member-create-form > .assoc-member-create-actions {
    padding-top: 20px !important;
  }

  .jui\:\[\&_\.assoc-member-create-form_\>_\.assoc-member-create-actions\]\:\[border-top\:1px_solid_var\(--ui-border\)\] .assoc-member-create-form > .assoc-member-create-actions {
    border-top: 1px solid var(--ui-border) !important;
  }

  .jui\:\[\&_\.assoc-member-create-grid\]\:grid .assoc-member-create-grid {
    display: grid !important;
  }

  .jui\:\[\&_\.assoc-member-create-grid\]\:\[grid-template-columns\:repeat\(2\,minmax\(0\,1fr\)\)\] .assoc-member-create-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .jui\:\[\&_\.assoc-member-create-grid\]\:\[gap\:20px_24px\] .assoc-member-create-grid {
    gap: 20px 24px !important;
  }

  .jui\:\[\&_\.assoc-member-create-intro\]\:hidden .assoc-member-create-intro {
    display: none !important;
  }

  .jui\:\[\&_\.assoc-member-create-kind\]\:\[order\:2\] .assoc-member-create-kind {
    order: 2 !important;
  }

  .jui\:\[\&_\.assoc-member-create-kind\]\:\[border-radius\:0\] .assoc-member-create-kind {
    border-radius: 0 !important;
  }

  .jui\:\[\&_\.assoc-member-create-kind\]\:border-0 .assoc-member-create-kind {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .jui\:\[\&_\.assoc-member-create-kind\]\:bg-transparent .assoc-member-create-kind {
    background-color: #0000 !important;
  }

  .jui\:\[\&_\.assoc-member-create-kind\]\:\[padding\:20px_0_0\] .assoc-member-create-kind {
    padding: 20px 0 0 !important;
  }

  .jui\:\[\&_\.assoc-member-create-kind\]\:\[border-top\:1px_solid_var\(--ui-border\)\] .assoc-member-create-kind {
    border-top: 1px solid var(--ui-border) !important;
  }

  .jui\:\[\&_\.assoc-member-create-kind-row\]\:flex .assoc-member-create-kind-row {
    display: flex !important;
  }

  .jui\:\[\&_\.assoc-member-create-kind-row\]\:items-end .assoc-member-create-kind-row {
    align-items: flex-end !important;
  }

  .jui\:\[\&_\.assoc-member-create-kind-row\]\:\[gap\:12px\] .assoc-member-create-kind-row {
    gap: 12px !important;
  }

  .jui\:\[\&_\.assoc-member-create-kind-row_\.field\]\:\[flex\:1\] .assoc-member-create-kind-row .field {
    flex: 1 !important;
  }

  .jui\:\[\&_\.assoc-member-create-section\]\:grid .assoc-member-create-section {
    display: grid !important;
  }

  .jui\:\[\&_\.assoc-member-create-section\]\:min-w-0 .assoc-member-create-section {
    min-width: 0 !important;
  }

  .jui\:\[\&_\.assoc-member-create-section\]\:\[gap\:14px\] .assoc-member-create-section {
    gap: 14px !important;
  }

  .jui\:\[\&_\.assoc-member-create-section\]\:border-0 .assoc-member-create-section {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .jui\:\[\&_\.assoc-member-create-section\]\:bg-transparent .assoc-member-create-section {
    background-color: #0000 !important;
  }

  .jui\:\[\&_\.assoc-member-create-section\]\:p-0 .assoc-member-create-section {
    padding: 0 !important;
  }

  .jui\:\[\&_\.assoc-member-create-section_\+_\.assoc-member-create-section\]\:\[padding-top\:24px\] .assoc-member-create-section + .assoc-member-create-section {
    padding-top: 24px !important;
  }

  .jui\:\[\&_\.assoc-member-create-section_\+_\.assoc-member-create-section\]\:\[border-top\:1px_solid_var\(--ui-border\)\] .assoc-member-create-section + .assoc-member-create-section {
    border-top: 1px solid var(--ui-border) !important;
  }

  .jui\:\[\&_\.assoc-member-create-toolbar\]\:flex .assoc-member-create-toolbar {
    display: flex !important;
  }

  .jui\:\[\&_\.assoc-member-create-toolbar\]\:flex-wrap .assoc-member-create-toolbar {
    flex-wrap: wrap !important;
  }

  .jui\:\[\&_\.assoc-member-create-toolbar\]\:items-center .assoc-member-create-toolbar {
    align-items: center !important;
  }

  .jui\:\[\&_\.assoc-member-create-toolbar\]\:justify-start .assoc-member-create-toolbar {
    justify-content: flex-start !important;
  }

  .jui\:\[\&_\.assoc-member-create-toolbar\]\:\[gap\:12px\] .assoc-member-create-toolbar {
    gap: 12px !important;
  }

  .jui\:\[\&_\.assoc-member-create-toolbar\]\:\[border-radius\:8px\] .assoc-member-create-toolbar {
    border-radius: 8px !important;
  }

  .jui\:\[\&_\.assoc-member-create-toolbar\]\:\[padding\:12px\] .assoc-member-create-toolbar {
    padding: 12px !important;
  }

  .jui\:\[\&_\.assoc-member-create-toolbar\]\:text-left .assoc-member-create-toolbar {
    text-align: left !important;
  }

  .jui\:\[\&_\.assoc-member-create-toolbar\]\:\[background\:var\(--ui-subtle\)\] .assoc-member-create-toolbar {
    background: var(--ui-subtle) !important;
  }

  .jui\:\[\&_\.assoc-member-create-toolbar_p\]\:m-0 .assoc-member-create-toolbar p {
    margin: 0 !important;
  }

  .jui\:\[\&_\.assoc-member-create-toolbar_p\]\:\[min-width\:200px\] .assoc-member-create-toolbar p {
    min-width: 200px !important;
  }

  .jui\:\[\&_\.assoc-member-create-toolbar_p\]\:\[flex\:1\] .assoc-member-create-toolbar p {
    flex: 1 !important;
  }

  .jui\:\[\&_\.assoc-member-create-toolbar_p\]\:\[font-size\:12px\] .assoc-member-create-toolbar p {
    font-size: 12px !important;
  }

  .jui\:\[\&_\.assoc-member-create-toolbar_p\]\:\[line-height\:1\.6\] .assoc-member-create-toolbar p {
    line-height: 1.6 !important;
  }

  .jui\:\[\&_\.assoc-member-create-toolbar_p\]\:\[color\:var\(--ui-muted\)\] .assoc-member-create-toolbar p {
    color: var(--ui-muted) !important;
  }

  .jui\:\[\&_\.assoc-mtg-schedule\]\:block .assoc-mtg-schedule {
    display: block !important;
  }

  .jui\:\[\&_\.assoc-mtg-schedule\]\:text-center .assoc-mtg-schedule {
    text-align: center !important;
  }

  .jui\:\[\&_\.assoc-mtg-schedule\]\:\[color\:\#fff\] .assoc-mtg-schedule {
    color: #fff !important;
  }

  .jui\:\[\&_\.assoc-oh-donut\]\:\[margin\:0_auto_0\.75rem\] .assoc-oh-donut {
    margin: 0 auto .75rem !important;
  }

  :where(.jui\:\[\&_\.assoc-page-layout-body\]\:space-y-3 .assoc-page-layout-body > :not(:last-child)) {
    --tw-space-y-reverse: 0 !important;
    margin-block-start: calc(calc(var(--jui-spacing) * 3) * var(--tw-space-y-reverse)) !important;
    margin-block-end: calc(calc(var(--jui-spacing) * 3) * calc(1 - var(--tw-space-y-reverse))) !important;
  }

  .jui\:\[\&_\.assoc-page-layout-footer\]\:gap-2 .assoc-page-layout-footer {
    gap: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:\[\&_\.assoc-page-layout-footer\]\:bg-\[var\(--ui-surface\)\] .assoc-page-layout-footer {
    background-color: var(--ui-surface) !important;
  }

  .jui\:\[\&_\.assoc-page-layout-footer\]\:p-3 .assoc-page-layout-footer {
    padding: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:\[\&_\.assoc-ren-chips\]\:flex .assoc-ren-chips {
    display: flex !important;
  }

  .jui\:\[\&_\.assoc-ren-chips\]\:flex-wrap .assoc-ren-chips {
    flex-wrap: wrap !important;
  }

  .jui\:\[\&_\.assoc-ren-chips\]\:\[gap\:8px\] .assoc-ren-chips {
    gap: 8px !important;
  }

  .jui\:\[\&_\.assoc-ren-chips_button\]\:\[min-height\:36px\] .assoc-ren-chips button {
    min-height: 36px !important;
  }

  .jui\:\[\&_\.assoc-ren-chips_button\]\:\[border-radius\:6px\] .assoc-ren-chips button {
    border-radius: 6px !important;
  }

  .jui\:\[\&_\.assoc-ren-chips_button\]\:\[padding\:8px_12px\] .assoc-ren-chips button {
    padding: 8px 12px !important;
  }

  .jui\:\[\&_\.assoc-ren-chips_button\]\:\[font-size\:12px\] .assoc-ren-chips button {
    font-size: 12px !important;
  }

  .jui\:\[\&_\.assoc-ren-chips_button\]\:\[color\:var\(--ui-text\)\] .assoc-ren-chips button {
    color: var(--ui-text) !important;
  }

  .jui\:\[\&_\.assoc-ren-chips_button\]\:\[background\:var\(--ui-subtle\)\] .assoc-ren-chips button {
    background: var(--ui-subtle) !important;
  }

  .jui\:\[\&_\.assoc-ren-chips_button\]\:\[border\:1px_solid_var\(--ui-border\)\] .assoc-ren-chips button {
    border: 1px solid var(--ui-border) !important;
  }

  .jui\:\[\&_\.assoc-ren-chips_button\[data-on\=\"yes\"\]\]\:\[border-color\:\#3577e5\] .assoc-ren-chips button[data-on="yes"] {
    border-color: #3577e5 !important;
  }

  .jui\:\[\&_\.assoc-ren-chips_button\[data-on\=\"yes\"\]\]\:\[color\:var\(--color-link\)\] .assoc-ren-chips button[data-on="yes"] {
    color: var(--color-link) !important;
  }

  .jui\:\[\&_\.assoc-ren-ghost\]\:w-full .assoc-ren-ghost {
    width: 100% !important;
  }

  .jui\:\[\&_\.association-add-required\]\:\[margin\:-6px_0_0\] .association-add-required {
    margin: -6px 0 0 !important;
  }

  .jui\:\[\&_\.association-add-required\]\:\[font-size\:13px\] .association-add-required {
    font-size: 13px !important;
  }

  .jui\:\[\&_\.association-add-required\]\:\[color\:var\(--ui-muted\)\] .association-add-required {
    color: var(--ui-muted) !important;
  }

  .jui\:\[\&_\.card-grid\]\:\[gap\:0\.65rem\] .card-grid {
    gap: .65rem !important;
  }

  .jui\:\[\&_\.field\]\:m-0 .field {
    margin: 0 !important;
  }

  .jui\:\[\&_\.field\]\:min-w-0 .field {
    min-width: 0 !important;
  }

  .jui\:\[\&_\.field_label\]\:\[margin-bottom\:8px\] .field label {
    margin-bottom: 8px !important;
  }

  .jui\:\[\&_\.field_label\]\:\[font-size\:14px\] .field label {
    font-size: 14px !important;
  }

  .jui\:\[\&_\.field_label\]\:\[font-weight\:500\] .field label {
    font-weight: 500 !important;
  }

  .jui\:\[\&_\.field_label\]\:\[color\:var\(--ui-text\)\] .field label {
    color: var(--ui-text) !important;
  }

  .jui\:\[\&_\.icon-btn\]\:\[height\:2\.15rem\] .icon-btn {
    height: 2.15rem !important;
  }

  .jui\:\[\&_\.icon-btn\]\:\[min-height\:2\.15rem\] .icon-btn {
    min-height: 2.15rem !important;
  }

  .jui\:\[\&_\.icon-btn\]\:\[width\:2\.15rem\] .icon-btn {
    width: 2.15rem !important;
  }

  .jui\:\[\&_\.icon-btn\]\:\[min-width\:2\.15rem\] .icon-btn {
    min-width: 2.15rem !important;
  }

  .jui\:\[\&_\.icon-btn\]\:\[border-radius\:0\.7rem\] .icon-btn {
    border-radius: .7rem !important;
  }

  .jui\:\[\&_\.icon-btn\]\:\[color\:var\(--brand\,_\#1d4ed8\)\] .icon-btn {
    color: var(--brand, #1d4ed8) !important;
  }

  .jui\:\[\&_\.icon-btn\]\:\[background\:\#e8f2ff\] .icon-btn {
    background: #e8f2ff !important;
  }

  .jui\:\[\&_\.muted\]\:\[font-size\:0\.78rem\] .muted {
    font-size: .78rem !important;
  }

  .jui\:\[\&_\.muted\]\:whitespace-nowrap .muted {
    white-space: nowrap !important;
  }

  .jui\:\[\&_\.muted\]\:\[color\:\#94a3b8\] .muted {
    color: #94a3b8 !important;
  }

  .jui\:\[\&_\.sa-form\]\:m-0 .sa-form {
    margin: 0 !important;
  }

  .jui\:\[\&_\.sa-form\]\:w-full .sa-form {
    width: 100% !important;
  }

  .jui\:\[\&_\.sa-form\]\:max-w-full .sa-form {
    max-width: 100% !important;
  }

  .jui\:\[\&_\.sa-form\]\:rounded-none .sa-form {
    border-radius: 0 !important;
  }

  .jui\:\[\&_\.sa-form\]\:border-0 .sa-form {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .jui\:\[\&_\.sa-form\]\:bg-transparent .sa-form {
    background-color: #0000 !important;
  }

  .jui\:\[\&_\.sa-form\]\:p-0 .sa-form {
    padding: 0 !important;
  }

  .jui\:\[\&_\.sa-form\]\:shadow-none .sa-form {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  :where(.jui\:\[\&_\.sa-form-body\]\:space-y-3 .sa-form-body > :not(:last-child)) {
    --tw-space-y-reverse: 0 !important;
    margin-block-start: calc(calc(var(--jui-spacing) * 3) * var(--tw-space-y-reverse)) !important;
    margin-block-end: calc(calc(var(--jui-spacing) * 3) * calc(1 - var(--tw-space-y-reverse))) !important;
  }

  .jui\:\[\&_\.sa-form-body\]\:bg-transparent .sa-form-body {
    background-color: #0000 !important;
  }

  .jui\:\[\&_\.sa-form-body\]\:p-0 .sa-form-body {
    padding: 0 !important;
  }

  .jui\:\[\&_\.sa-form-body\]\:shadow-none .sa-form-body {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:\[\&_\.sa-form-head\]\:hidden .sa-form-head {
    display: none !important;
  }

  .jui\:\[\&_\.sa-form-head\]\:min-h-0 .sa-form-head {
    min-height: 0 !important;
  }

  .jui\:\[\&_\.sa-form-head\]\:gap-2 .sa-form-head {
    gap: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:\[\&_\.sa-form-head\]\:bg-transparent .sa-form-head {
    background-color: #0000 !important;
  }

  .jui\:\[\&_\.sa-form-head\]\:px-0 .sa-form-head {
    padding-inline: 0 !important;
  }

  .jui\:\[\&_\.sa-form-head\]\:py-3 .sa-form-head {
    padding-block: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:\[\&_\.sa-form-head_\>_\.sa-form-pict\]\:hidden .sa-form-head > .sa-form-pict {
    display: none !important;
  }

  .jui\:\[\&_\.sa-form-head_h1\]\:text-lg .sa-form-head h1 {
    font-size: var(--jui-text-lg) !important;
    line-height: var(--tw-leading, var(--jui-text-lg--line-height)) !important;
  }

  .jui\:\[\&_\.sa-form-head_h1\]\:leading-6 .sa-form-head h1 {
    --tw-leading: calc(var(--jui-spacing) * 6) !important;
    line-height: calc(var(--jui-spacing) * 6) !important;
  }

  .jui\:\[\&_\.sa-form-panel\]\:p-3 .sa-form-panel {
    padding: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:\[\&_\.sa-form-titles\]\:hidden .sa-form-titles {
    display: none !important;
  }

  .jui\:\[\&_\.sa-form-titles_p\]\:my-1 .sa-form-titles p {
    margin-block: var(--jui-spacing) !important;
  }

  .jui\:\[\&_\.sa-form\:not\(\:has\(\.assoc-md-shell\)\)\>\.sa-form-head\:has\(h1\:not\(\:empty\)\)\]\:flex .sa-form:not(:has(.assoc-md-shell)) > .sa-form-head:has(h1:not(:empty)) {
    display: flex !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\=\'association-applications\'\]_\>_\.sa-form-head\]\:hidden .sa-form[data-screen="association-applications"] > .sa-form-head, .jui\:\[\&_\.sa-form\[data-screen\=\'association-board\'\]_\>_\.sa-form-head\]\:hidden .sa-form[data-screen="association-board"] > .sa-form-head {
    display: none !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\=\'association-chapter\'\]_\>_\.sa-form-body\]\:\[gap\:0\.35rem\] .sa-form[data-screen="association-chapter"] > .sa-form-body, .jui\:\[\&_\.sa-form\[data-screen\=\'association-chapter-add\'\]_\>_\.sa-form-body\]\:\[gap\:0\.35rem\] .sa-form[data-screen="association-chapter-add"] > .sa-form-body, .jui\:\[\&_\.sa-form\[data-screen\=\'association-chapter-edit\'\]_\>_\.sa-form-body\]\:\[gap\:0\.35rem\] .sa-form[data-screen="association-chapter-edit"] > .sa-form-body, .jui\:\[\&_\.sa-form\[data-screen\=\'association-chapters\'\]_\>_\.sa-form-body\]\:\[gap\:0\.35rem\] .sa-form[data-screen="association-chapters"] > .sa-form-body {
    gap: .35rem !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\=\'association-committees\'\]_\>_\.sa-form-head\]\:hidden .sa-form[data-screen="association-committees"] > .sa-form-head, .jui\:\[\&_\.sa-form\[data-screen\=\'association-divisions\'\]_\>_\.sa-form-head\]\:hidden .sa-form[data-screen="association-divisions"] > .sa-form-head {
    display: none !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\=\'association-event-add\'\]_\.sa-form-titles_p\]\:\[max-width\:36rem\] .sa-form[data-screen="association-event-add"] .sa-form-titles p {
    max-width: 36rem !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\=\'association-event-add\'\]_\>_\.sa-form-head_\>_\.sa-form-pict\]\:hidden .sa-form[data-screen="association-event-add"] > .sa-form-head > .sa-form-pict, .jui\:\[\&_\.sa-form\[data-screen\=\'association-governance\'\]_\>_\.sa-form-head\]\:hidden .sa-form[data-screen="association-governance"] > .sa-form-head, .jui\:\[\&_\.sa-form\[data-screen\=\'association-hierarchy\'\]_\>_\.sa-form-head\]\:hidden .sa-form[data-screen="association-hierarchy"] > .sa-form-head, .jui\:\[\&_\.sa-form\[data-screen\=\'association-home\'\]\:has\(\[data-testid\=\'association-dashboard\'\]\)_\>_\.sa-form-head\]\:hidden .sa-form[data-screen="association-home"]:has([data-testid="association-dashboard"]) > .sa-form-head, .jui\:\[\&_\.sa-form\[data-screen\=\'association-leadership-roles\'\]_\>_\.sa-form-head\]\:hidden .sa-form[data-screen="association-leadership-roles"] > .sa-form-head, .jui\:\[\&_\.sa-form\[data-screen\=\'association-member\'\]_\>_\.sa-form-head\]\:hidden .sa-form[data-screen="association-member"] > .sa-form-head, .jui\:\[\&_\.sa-form\[data-screen\=\'association-member-create\'\]_\>_\.sa-form-head\]\:hidden .sa-form[data-screen="association-member-create"] > .sa-form-head, .jui\:\[\&_\.sa-form\[data-screen\=\'association-members\'\]_\>_\.sa-form-head\]\:hidden .sa-form[data-screen="association-members"] > .sa-form-head, .jui\:\[\&_\.sa-form\[data-screen\=\'association-memberships\'\]_\>_\.sa-form-head\]\:hidden .sa-form[data-screen="association-memberships"] > .sa-form-head, .jui\:\[\&_\.sa-form\[data-screen\=\'association-packages\'\]_\>_\.sa-form-head\]\:hidden .sa-form[data-screen="association-packages"] > .sa-form-head, .jui\:\[\&_\.sa-form\[data-screen\=\'association-profile\'\]_\>_\.sa-form-head\]\:hidden .sa-form[data-screen="association-profile"] > .sa-form-head, .jui\:\[\&_\.sa-form\[data-screen\=\'association-renewals\'\]_\>_\.sa-form-head\]\:hidden .sa-form[data-screen="association-renewals"] > .sa-form-head, .jui\:\[\&_\.sa-form\[data-screen\=\'association-setup\'\]_\>_\.sa-form-head\]\:hidden .sa-form[data-screen="association-setup"] > .sa-form-head, .jui\:\[\&_\.sa-form\[data-screen\=\'association-suspensions\'\]_\>_\.sa-form-head\]\:hidden .sa-form[data-screen="association-suspensions"] > .sa-form-head, .jui\:\[\&_\.sa-form\[data-screen\=\'association-workflows\'\]_\>_\.sa-form-head\]\:hidden .sa-form[data-screen="association-workflows"] > .sa-form-head {
    display: none !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]\]\:border-0 .sa-form[data-screen^="association-"] {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]\]\:bg-transparent .sa-form[data-screen^="association-"] {
    background-color: #0000 !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]\]\:shadow-none .sa-form[data-screen^="association-"] {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.muted\]\:\[color\:var\(--color-text-secondary\)\] .sa-form[data-screen^="association-"] .muted {
    color: var(--color-text-secondary) !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.primary-btn\]\:\[border-radius\:var\(--radius-lg\)\] .sa-form[data-screen^="association-"] .primary-btn {
    border-radius: var(--radius-lg) !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.primary-btn\]\:\[border-color\:var\(--brand\)\] .sa-form[data-screen^="association-"] .primary-btn {
    border-color: var(--brand) !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.primary-btn\]\:\[font-family\:var\(--font-family-body\)\] .sa-form[data-screen^="association-"] .primary-btn {
    font-family: var(--font-family-body) !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.primary-btn\]\:\[color\:var\(--color-on-primary\)\] .sa-form[data-screen^="association-"] .primary-btn {
    color: var(--color-on-primary) !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.primary-btn\]\:\[box-shadow\:0_10px_22px_color-mix\(in_srgb\,_var\(--brand\)_28\%\,_transparent\)\] .sa-form[data-screen^="association-"] .primary-btn {
    box-shadow: 0 10px 22px var(--brand) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.primary-btn\]\:\[box-shadow\:0_10px_22px_color-mix\(in_srgb\,_var\(--brand\)_28\%\,_transparent\)\] .sa-form[data-screen^="association-"] .primary-btn {
      box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 28%, transparent) !important;
    }
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.primary-btn\]\:\[background\:var\(--brand\)\] .sa-form[data-screen^="association-"] .primary-btn {
    background: var(--brand) !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.record-list\]\:m-0 .sa-form[data-screen^="association-"] .record-list {
    margin: 0 !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.record-list\]\:flex .sa-form[data-screen^="association-"] .record-list {
    display: flex !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.record-list\]\:list-none .sa-form[data-screen^="association-"] .record-list {
    list-style-type: none !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.record-list\]\:flex-col .sa-form[data-screen^="association-"] .record-list {
    flex-direction: column !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.record-list\]\:\[gap\:0\.5rem\] .sa-form[data-screen^="association-"] .record-list {
    gap: .5rem !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.record-list\]\:p-0 .sa-form[data-screen^="association-"] .record-list {
    padding: 0 !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.record-list_\>_li\]\:\[border-radius\:0\.85rem\] .sa-form[data-screen^="association-"] .record-list > li {
    border-radius: .85rem !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.record-list_\>_li\]\:\[padding\:0\.7rem\] .sa-form[data-screen^="association-"] .record-list > li {
    padding: .7rem !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.record-list_\>_li\]\:\[background\:\#fff\] .sa-form[data-screen^="association-"] .record-list > li {
    background: #fff !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.record-list_\>_li\]\:\[border\:1px_solid_\#e2e8f0\] .sa-form[data-screen^="association-"] .record-list > li {
    border: 1px solid #e2e8f0 !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.record-list_a\]\:\[font-weight\:650\] .sa-form[data-screen^="association-"] .record-list a {
    font-weight: 650 !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.record-list_a\]\:\[color\:\#191c1e\] .sa-form[data-screen^="association-"] .record-list a {
    color: #191c1e !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.record-list_a\]\:no-underline .sa-form[data-screen^="association-"] .record-list a {
    text-decoration-line: none !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.sa-form-head_h1\]\:\[font-family\:var\(--font-family-heading\)\] .sa-form[data-screen^="association-"] .sa-form-head h1 {
    font-family: var(--font-family-heading) !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\.sa-form-head_h1\]\:\[color\:var\(--color-text-heading\)\] .sa-form[data-screen^="association-"] .sa-form-head h1 {
    color: var(--color-text-heading) !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-body\]\:flex .sa-form[data-screen^="association-"] > .sa-form-body {
    display: flex !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-body\]\:flex-col .sa-form[data-screen^="association-"] > .sa-form-body {
    flex-direction: column !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-body\]\:\[gap\:0\.5rem\] .sa-form[data-screen^="association-"] > .sa-form-body {
    gap: .5rem !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-body\]\:border-0 .sa-form[data-screen^="association-"] > .sa-form-body {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-body\]\:bg-transparent .sa-form[data-screen^="association-"] > .sa-form-body {
    background-color: #0000 !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-body\]\:p-0 .sa-form[data-screen^="association-"] > .sa-form-body {
    padding: 0 !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-body\]\:shadow-none .sa-form[data-screen^="association-"] > .sa-form-body {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head\]\:m-0 .sa-form[data-screen^="association-"] > .sa-form-head {
    margin: 0 !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head\]\:grid .sa-form[data-screen^="association-"] > .sa-form-head {
    display: grid !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head\]\:\[min-height\:0\] .sa-form[data-screen^="association-"] > .sa-form-head {
    min-height: 0 !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head\]\:\[grid-template-columns\:auto_minmax\(0\,_1fr\)_auto\] .sa-form[data-screen^="association-"] > .sa-form-head {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head\]\:items-center .sa-form[data-screen^="association-"] > .sa-form-head {
    align-items: center !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head\]\:\[gap\:0\.45rem\] .sa-form[data-screen^="association-"] > .sa-form-head {
    gap: .45rem !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head\]\:border-0 .sa-form[data-screen^="association-"] > .sa-form-head {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head\]\:bg-transparent .sa-form[data-screen^="association-"] > .sa-form-head {
    background-color: #0000 !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head\]\:\[padding\:0_0_0\.35rem\] .sa-form[data-screen^="association-"] > .sa-form-head {
    padding: 0 0 .35rem !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head\]\:shadow-none .sa-form[data-screen^="association-"] > .sa-form-head {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head_\.pict\]\:hidden .sa-form[data-screen^="association-"] > .sa-form-head .pict, .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head_\.sa-form-pict\]\:hidden .sa-form[data-screen^="association-"] > .sa-form-head .sa-form-pict {
    display: none !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head_\.sa-form-titles_h1\]\:m-0 .sa-form[data-screen^="association-"] > .sa-form-head .sa-form-titles h1 {
    margin: 0 !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head_\.sa-form-titles_h1\]\:text-center .sa-form[data-screen^="association-"] > .sa-form-head .sa-form-titles h1 {
    text-align: center !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head_\.sa-form-titles_h1\]\:\[font-size\:1\.05rem\] .sa-form[data-screen^="association-"] > .sa-form-head .sa-form-titles h1 {
    font-size: 1.05rem !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head\:has\(h1\:empty\)\]\:hidden .sa-form[data-screen^="association-"] > .sa-form-head:has(h1:empty) {
    display: none !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_form\.stack\]\:\[border-radius\:0\.85rem\] .sa-form[data-screen^="association-"] form.stack {
    border-radius: .85rem !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_form\.stack\]\:\[padding\:0\.7rem_0\.8rem\] .sa-form[data-screen^="association-"] form.stack {
    padding: .7rem .8rem !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_form\.stack\]\:\[background\:\#fff\] .sa-form[data-screen^="association-"] form.stack {
    background: #fff !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_form\.stack\]\:\[border\:1px_solid_\#e2e8f0\] .sa-form[data-screen^="association-"] form.stack {
    border: 1px solid #e2e8f0 !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_ul\.stack\]\:m-0 .sa-form[data-screen^="association-"] ul.stack {
    margin: 0 !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_ul\.stack\]\:flex .sa-form[data-screen^="association-"] ul.stack {
    display: flex !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_ul\.stack\]\:list-none .sa-form[data-screen^="association-"] ul.stack {
    list-style-type: none !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_ul\.stack\]\:flex-col .sa-form[data-screen^="association-"] ul.stack {
    flex-direction: column !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_ul\.stack\]\:\[gap\:0\.5rem\] .sa-form[data-screen^="association-"] ul.stack {
    gap: .5rem !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_ul\.stack\]\:p-0 .sa-form[data-screen^="association-"] ul.stack {
    padding: 0 !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_ul\.stack_\>_li\]\:\[border-radius\:0\.85rem\] .sa-form[data-screen^="association-"] ul.stack > li {
    border-radius: .85rem !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_ul\.stack_\>_li\]\:\[padding\:0\.7rem\] .sa-form[data-screen^="association-"] ul.stack > li {
    padding: .7rem !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_ul\.stack_\>_li\]\:\[background\:\#fff\] .sa-form[data-screen^="association-"] ul.stack > li {
    background: #fff !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]_ul\.stack_\>_li\]\:\[border\:1px_solid_\#e2e8f0\] .sa-form[data-screen^="association-"] ul.stack > li {
    border: 1px solid #e2e8f0 !important;
  }

  .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]\:has\(\.assoc-ap-top\)_\>_\.sa-form-head\]\:hidden .sa-form[data-screen^="association-"]:has(.assoc-ap-top) > .sa-form-head, .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]\:has\(\.assoc-ch-top\)_\>_\.sa-form-head\]\:hidden .sa-form[data-screen^="association-"]:has(.assoc-ch-top) > .sa-form-head, .jui\:\[\&_\.sa-form\[data-screen\^\=\'association-\'\]\:has\(\.assoc-md-shell\)_\>_\.sa-form-head\]\:hidden .sa-form[data-screen^="association-"]:has(.assoc-md-shell) > .sa-form-head {
    display: none !important;
  }

  .jui\:\[\&_\.text-btn\]\:cursor-pointer .text-btn {
    cursor: pointer !important;
  }

  .jui\:\[\&_\.text-btn\]\:border-0 .text-btn {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .jui\:\[\&_\.text-btn\]\:\[font-size\:0\.82rem\] .text-btn {
    font-size: .82rem !important;
  }

  .jui\:\[\&_\.text-btn\]\:\[font-weight\:650\] .text-btn {
    font-weight: 650 !important;
  }

  .jui\:\[\&_\.text-btn\]\:\[color\:var\(--brand\)\] .text-btn {
    color: var(--brand) !important;
  }

  .jui\:\[\&_\.text-btn\]\:\[color\:var\(--brand-deep\)\] .text-btn {
    color: var(--brand-deep) !important;
  }

  .jui\:\[\&_\.text-btn\]\:\[background\:none\] .text-btn {
    background: none !important;
  }

  .jui\:\[\&_\:is\(\.primary-btn\,\.text-btn\,\.assoc-fill-avatar\)\]\:inline-flex :is(.primary-btn, .text-btn, .assoc-fill-avatar) {
    display: inline-flex !important;
  }

  .jui\:\[\&_\:is\(\.primary-btn\,\.text-btn\,\.assoc-fill-avatar\)\]\:\[min-height\:44px\] :is(.primary-btn, .text-btn, .assoc-fill-avatar) {
    min-height: 44px !important;
  }

  .jui\:\[\&_\:is\(\.primary-btn\,\.text-btn\,\.assoc-fill-avatar\)\]\:items-center :is(.primary-btn, .text-btn, .assoc-fill-avatar) {
    align-items: center !important;
  }

  .jui\:\[\&_\:is\(\.primary-btn\,\.text-btn\,\.assoc-fill-avatar\)\]\:justify-center :is(.primary-btn, .text-btn, .assoc-fill-avatar) {
    justify-content: center !important;
  }

  .jui\:\[\&_\:is\(\.primary-btn\,\.text-btn\,\.assoc-fill-avatar\)\]\:\[gap\:8px\] :is(.primary-btn, .text-btn, .assoc-fill-avatar) {
    gap: 8px !important;
  }

  .jui\:\[\&_\:is\(\.primary-btn\,\.text-btn\,\.assoc-fill-avatar\)\]\:\[border-radius\:6px\] :is(.primary-btn, .text-btn, .assoc-fill-avatar) {
    border-radius: 6px !important;
  }

  .jui\:\[\&_\:is\(\.primary-btn\,\.text-btn\,\.assoc-fill-avatar\)\]\:\[padding\:10px_16px\] :is(.primary-btn, .text-btn, .assoc-fill-avatar) {
    padding: 10px 16px !important;
  }

  .jui\:\[\&_\:is\(\.primary-btn\,\.text-btn\,\.assoc-fill-avatar\)\]\:\[font-size\:14px\] :is(.primary-btn, .text-btn, .assoc-fill-avatar) {
    font-size: 14px !important;
  }

  .jui\:\[\&_\:is\(\.primary-btn\,\.text-btn\,\.assoc-fill-avatar\)\]\:no-underline :is(.primary-btn, .text-btn, .assoc-fill-avatar) {
    text-decoration-line: none !important;
  }

  .jui\:\[\&_\:is\(\.primary-btn\,\.text-btn\,\.assoc-fill-avatar\)\]\:shadow-none :is(.primary-btn, .text-btn, .assoc-fill-avatar) {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:\[\&_\:is\(\.text-btn\,\.assoc-fill-avatar\)\]\:\[color\:var\(--ui-text\)\] :is(.text-btn, .assoc-fill-avatar) {
    color: var(--ui-text) !important;
  }

  .jui\:\[\&_\:is\(\.text-btn\,\.assoc-fill-avatar\)\]\:\[background\:var\(--ui-surface\)\] :is(.text-btn, .assoc-fill-avatar) {
    background: var(--ui-surface) !important;
  }

  .jui\:\[\&_\:is\(\.text-btn\,\.assoc-fill-avatar\)\]\:\[border\:1px_solid_var\(--ui-border\)\] :is(.text-btn, .assoc-fill-avatar) {
    border: 1px solid var(--ui-border) !important;
  }

  .jui\:\[\&_\:is\(input\,select\,textarea\)\]\:box-border :is(input, select, textarea) {
    box-sizing: border-box !important;
  }

  .jui\:\[\&_\:is\(input\,select\,textarea\)\]\:\[min-height\:44px\] :is(input, select, textarea) {
    min-height: 44px !important;
  }

  .jui\:\[\&_\:is\(input\,select\,textarea\)\]\:w-full :is(input, select, textarea) {
    width: 100% !important;
  }

  .jui\:\[\&_\:is\(input\,select\,textarea\)\]\:\[border-radius\:6px\] :is(input, select, textarea) {
    border-radius: 6px !important;
  }

  .jui\:\[\&_\:is\(input\,select\,textarea\)\]\:\[padding\:10px_12px\] :is(input, select, textarea) {
    padding: 10px 12px !important;
  }

  .jui\:\[\&_\:is\(input\,select\,textarea\)\]\:\[color\:var\(--ui-text\)\] :is(input, select, textarea) {
    color: var(--ui-text) !important;
  }

  .jui\:\[\&_\:is\(input\,select\,textarea\)\]\:shadow-none :is(input, select, textarea) {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:\[\&_\:is\(input\,select\,textarea\)\]\:\[background\:var\(--ui-surface\)\] :is(input, select, textarea) {
    background: var(--ui-surface) !important;
  }

  .jui\:\[\&_\:is\(input\,select\,textarea\)\]\:\[border\:1px_solid_var\(--ui-border\)\] :is(input, select, textarea) {
    border: 1px solid var(--ui-border) !important;
  }

  .jui\:\[\&_\:is\(input\,select\,textarea\)\]\:\[font\:inherit\] :is(input, select, textarea) {
    font: inherit !important;
  }

  .jui\:\[\&_\:is\(input\,select\,textarea\)\:focus-visible\]\:\[outline\:2px_solid_\#3577e5\] :is(input, select, textarea):focus-visible {
    outline: 2px solid #3577e5 !important;
  }

  .jui\:\[\&_\:is\(input\,select\,textarea\)\:focus-visible\]\:\[outline-offset\:2px\] :is(input, select, textarea):focus-visible {
    outline-offset: 2px !important;
  }

  .jui\:\[\&_\>_\*\]\:\[margin\:0\] > * {
    margin: 0 !important;
  }

  .jui\:\[\&_\>_\*\]\:\[min-width\:12rem\] > * {
    min-width: 12rem !important;
  }

  .jui\:\[\&_\>_\*\]\:\[flex\:1_1_12rem\] > * {
    flex: 12rem !important;
  }

  .jui\:\[\&_\>_\*\]\:\[flex\:1_1_auto\] > * {
    flex: auto !important;
  }

  .jui\:\[\&_\>_article\]\:\[border-radius\:0\.95rem\] > article {
    border-radius: .95rem !important;
  }

  .jui\:\[\&_\>_article\]\:\[padding\:1rem\] > article {
    padding: 1rem !important;
  }

  .jui\:\[\&_\>_article\]\:\[background\:\#fff\] > article {
    background: #fff !important;
  }

  .jui\:\[\&_\>_article\]\:\[border\:1px_solid_\#e2e8f0\] > article {
    border: 1px solid #e2e8f0 !important;
  }

  .jui\:\[\&_\>_button\]\:\[height\:2\.35rem\] > button {
    height: 2.35rem !important;
  }

  .jui\:\[\&_\>_button\]\:\[width\:2\.35rem\] > button {
    width: 2.35rem !important;
  }

  .jui\:\[\&_\>_button\]\:cursor-pointer > button {
    cursor: pointer !important;
  }

  .jui\:\[\&_\>_button\]\:\[border-radius\:0\.75rem\] > button {
    border-radius: .75rem !important;
  }

  .jui\:\[\&_\>_button\]\:border-0 > button {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .jui\:\[\&_\>_button\]\:bg-transparent > button {
    background-color: #0000 !important;
  }

  .jui\:\[\&_\>_button\]\:\[font-size\:1\.15rem\] > button {
    font-size: 1.15rem !important;
  }

  .jui\:\[\&_\>_button\]\:\[line-height\:1\] > button {
    line-height: 1 !important;
  }

  .jui\:\[\&_\>_button\]\:\[color\:\#64748b\] > button {
    color: #64748b !important;
  }

  .jui\:\[\&_\>_button\]\:\[background\:\#fff\] > button {
    background: #fff !important;
  }

  .jui\:\[\&_\>_button\]\:\[border\:1px_solid_\#e2e8f0\] > button {
    border: 1px solid #e2e8f0 !important;
  }

  .jui\:\[\&_\>_div\]\:flex > div {
    display: flex !important;
  }

  .jui\:\[\&_\>_div\]\:grid > div {
    display: grid !important;
  }

  .jui\:\[\&_\>_div\]\:\[grid-template-columns\:1fr_1fr\] > div {
    grid-template-columns: 1fr 1fr !important;
  }

  .jui\:\[\&_\>_div\]\:flex-col > div {
    flex-direction: column !important;
  }

  .jui\:\[\&_\>_div\]\:\[gap\:0\.15rem\] > div {
    gap: .15rem !important;
  }

  .jui\:\[\&_\>_div\]\:\[gap\:0\.65rem\] > div {
    gap: .65rem !important;
  }

  .jui\:\[\&_\>_li\]\:relative > li {
    position: relative !important;
  }

  .jui\:\[\&_\>_li\]\:\[padding-top\:0\.75rem\] > li {
    padding-top: .75rem !important;
  }

  .jui\:\[\&_\>_li\:\:before\]\:absolute > li:before {
    position: absolute !important;
  }

  .jui\:\[\&_\>_li\:\:before\]\:\[top\:1\.65rem\] > li:before {
    top: 1.65rem !important;
  }

  .jui\:\[\&_\>_li\:\:before\]\:\[left\:-0\.85rem\] > li:before {
    left: -.85rem !important;
  }

  .jui\:\[\&_\>_li\:\:before\]\:\[height\:1px\] > li:before {
    height: 1px !important;
  }

  .jui\:\[\&_\>_li\:\:before\]\:\[width\:0\.85rem\] > li:before {
    width: .85rem !important;
  }

  .jui\:\[\&_\>_li\:\:before\]\:\[content\:\'\'\] > li:before {
    content: "" !important;
  }

  .jui\:\[\&_\>_li\:\:before\]\:\[background\:\#e2e8f0\] > li:before {
    background: #e2e8f0 !important;
  }

  .jui\:\[\&_\>_p\]\:\[margin\:0\.35rem_0_0\.7rem\] > p {
    margin: .35rem 0 .7rem !important;
  }

  .jui\:\[\&_\>_p\]\:\[font-size\:0\.86rem\] > p {
    font-size: .86rem !important;
  }

  .jui\:\[\&_\>_p\]\:\[line-height\:1\.4\] > p {
    line-height: 1.4 !important;
  }

  .jui\:\[\&_\>_p\]\:\[color\:\#64748b\] > p {
    color: #64748b !important;
  }

  .jui\:\[\&_\>_span\]\:block > span {
    display: block !important;
  }

  .jui\:\[\&_\>_span\]\:\[width\:min\(3\.2rem\,_100\%\)\] > span {
    width: min(3.2rem, 100%) !important;
  }

  .jui\:\[\&_\>_span\]\:\[border-radius\:0\.55rem_0\.55rem_0\.2rem_0\.2rem\] > span {
    border-radius: .55rem .55rem .2rem .2rem !important;
  }

  .jui\:\[\&_\>_strong\]\:\[margin-top\:0\.55rem\] > strong {
    margin-top: .55rem !important;
  }

  .jui\:\[\&_\>_strong\]\:\[margin-bottom\:0\.7rem\] > strong {
    margin-bottom: .7rem !important;
  }

  .jui\:\[\&_\>_strong\]\:block > strong {
    display: block !important;
  }

  .jui\:\[\&_\>_strong\]\:\[font-size\:1\.05rem\] > strong {
    font-size: 1.05rem !important;
  }

  .jui\:\[\&_\>_strong\]\:\[color\:\#191c1e\] > strong {
    color: #191c1e !important;
  }

  .jui\:\[\&_\>_svg\:last-child\]\:\[color\:var\(--color-outline\,_\#94a3b8\)\] > svg:last-child {
    color: var(--color-outline, #94a3b8) !important;
  }

  .jui\:\[\&_\>button\]\:\[min-width\:auto\] > button {
    min-width: auto !important;
  }

  .jui\:\[\&_\>button\]\:\[flex\:0_1_auto\] > button {
    flex: 0 auto !important;
  }

  .jui\:\[\&_\>label\]\:\[flex\:2_1_14rem\] > label {
    flex: 2 14rem !important;
  }

  .jui\:\[\&_a\]\:flex a {
    display: flex !important;
  }

  .jui\:\[\&_a\]\:grid a {
    display: grid !important;
  }

  .jui\:\[\&_a\]\:inline-flex a {
    display: inline-flex !important;
  }

  .jui\:\[\&_a\]\:\[min-height\:2\.7rem\] a {
    min-height: 2.7rem !important;
  }

  .jui\:\[\&_a\]\:\[min-height\:3\.35rem\] a {
    min-height: 3.35rem !important;
  }

  .jui\:\[\&_a\]\:\[min-height\:4\.1rem\] a {
    min-height: 4.1rem !important;
  }

  .jui\:\[\&_a\]\:\[min-height\:6\.4rem\] a {
    min-height: 6.4rem !important;
  }

  .jui\:\[\&_a\]\:w-full a {
    width: 100% !important;
  }

  .jui\:\[\&_a\]\:\[min-width\:8\.5rem\] a {
    min-width: 8.5rem !important;
  }

  .jui\:\[\&_a\]\:\[grid-template-columns\:auto_minmax\(0\,_1fr\)\] a {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .jui\:\[\&_a\]\:\[grid-template-columns\:auto_minmax\(0\,_1fr\)_auto\] a {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }

  .jui\:\[\&_a\]\:\[grid-template-columns\:auto_minmax\(0\,_1fr\)_auto_auto\] a {
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  }

  .jui\:\[\&_a\]\:flex-col a {
    flex-direction: column !important;
  }

  .jui\:\[\&_a\]\:items-center a {
    align-items: center !important;
  }

  .jui\:\[\&_a\]\:items-start a {
    align-items: flex-start !important;
  }

  .jui\:\[\&_a\]\:justify-between a {
    justify-content: space-between !important;
  }

  .jui\:\[\&_a\]\:justify-center a {
    justify-content: center !important;
  }

  .jui\:\[\&_a\]\:\[gap\:0\.2rem\] a {
    gap: .2rem !important;
  }

  .jui\:\[\&_a\]\:\[gap\:0\.5rem\] a {
    gap: .5rem !important;
  }

  .jui\:\[\&_a\]\:\[gap\:0\.15rem\] a {
    gap: .15rem !important;
  }

  .jui\:\[\&_a\]\:\[gap\:0\.75rem\] a {
    gap: .75rem !important;
  }

  .jui\:\[\&_a\]\:\[border-radius\:0\.8rem\] a {
    border-radius: .8rem !important;
  }

  .jui\:\[\&_a\]\:\[border-radius\:0\.9rem\] a {
    border-radius: .9rem !important;
  }

  .jui\:\[\&_a\]\:\[border-radius\:0\.65rem\] a {
    border-radius: .65rem !important;
  }

  .jui\:\[\&_a\]\:\[border-radius\:0\.75rem\] a {
    border-radius: .75rem !important;
  }

  .jui\:\[\&_a\]\:\[border-radius\:0\.85rem\] a {
    border-radius: .85rem !important;
  }

  .jui\:\[\&_a\]\:\[border-radius\:0\.95rem\] a {
    border-radius: .95rem !important;
  }

  .jui\:\[\&_a\]\:\[border-radius\:1rem\] a {
    border-radius: 1rem !important;
  }

  .jui\:\[\&_a\]\:border-0 a {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .jui\:\[\&_a\]\:bg-transparent a {
    background-color: #0000 !important;
  }

  .jui\:\[\&_a\]\:\[padding\:0\.4rem\] a {
    padding: .4rem !important;
  }

  .jui\:\[\&_a\]\:\[padding\:0\.4rem_0\.3rem\] a {
    padding: .4rem .3rem !important;
  }

  .jui\:\[\&_a\]\:\[padding\:0\.7rem_0\] a {
    padding: .7rem 0 !important;
  }

  .jui\:\[\&_a\]\:\[padding\:0\.8rem_0\.15rem\] a {
    padding: .8rem .15rem !important;
  }

  .jui\:\[\&_a\]\:\[padding\:0\.45rem_0\.7rem\] a {
    padding: .45rem .7rem !important;
  }

  .jui\:\[\&_a\]\:\[padding\:0\.75rem\] a {
    padding: .75rem !important;
  }

  .jui\:\[\&_a\]\:\[padding\:0\.75rem_0\.85rem\] a {
    padding: .75rem .85rem !important;
  }

  .jui\:\[\&_a\]\:\[padding\:0\.85rem\] a {
    padding: .85rem !important;
  }

  .jui\:\[\&_a\]\:\[padding\:1rem_0\.5rem\] a {
    padding: 1rem .5rem !important;
  }

  .jui\:\[\&_a\]\:text-left a {
    text-align: left !important;
  }

  .jui\:\[\&_a\]\:\[font-size\:0\.8rem\] a {
    font-size: .8rem !important;
  }

  .jui\:\[\&_a\]\:\[font-size\:0\.72rem\] a {
    font-size: .72rem !important;
  }

  .jui\:\[\&_a\]\:\[font-size\:0\.78rem\] a {
    font-size: .78rem !important;
  }

  .jui\:\[\&_a\]\:\[font-size\:0\.82rem\] a {
    font-size: .82rem !important;
  }

  .jui\:\[\&_a\]\:\[font-size\:0\.84rem\] a {
    font-size: .84rem !important;
  }

  .jui\:\[\&_a\]\:\[font-size\:0\.92rem\] a {
    font-size: .92rem !important;
  }

  .jui\:\[\&_a\]\:font-bold a {
    --tw-font-weight: var(--jui-font-weight-bold) !important;
    font-weight: var(--jui-font-weight-bold) !important;
  }

  .jui\:\[\&_a\]\:\[font-weight\:650\] a {
    font-weight: 650 !important;
  }

  .jui\:\[\&_a\]\:\[overflow-wrap\:anywhere\] a {
    overflow-wrap: anywhere !important;
  }

  .jui\:\[\&_a\]\:whitespace-nowrap a {
    white-space: nowrap !important;
  }

  .jui\:\[\&_a\]\:\[color\:\#0f172a\] a {
    color: #0f172a !important;
  }

  .jui\:\[\&_a\]\:\[color\:\#0051d5\] a {
    color: #0051d5 !important;
  }

  .jui\:\[\&_a\]\:\[color\:\#94a3b8\] a {
    color: #94a3b8 !important;
  }

  .jui\:\[\&_a\]\:\[color\:\#191c1e\] a {
    color: #191c1e !important;
  }

  .jui\:\[\&_a\]\:\[color\:\#64748b\] a {
    color: #64748b !important;
  }

  .jui\:\[\&_a\]\:\[color\:\#fff\] a {
    color: #fff !important;
  }

  .jui\:\[\&_a\]\:\[color\:inherit\] a {
    color: inherit !important;
  }

  .jui\:\[\&_a\]\:\[color\:var\(--brand\)\] a {
    color: var(--brand) !important;
  }

  .jui\:\[\&_a\]\:\[color\:var\(--brand-deep\)\] a {
    color: var(--brand-deep) !important;
  }

  .jui\:\[\&_a\]\:\[color\:var\(--color-primary\,_\#0055ff\)\] a {
    color: var(--color-primary, #05f) !important;
  }

  .jui\:\[\&_a\]\:\[color\:var\(--ui-text\,\#191c1e\)\] a {
    color: var(--ui-text, #191c1e) !important;
  }

  .jui\:\[\&_a\]\:no-underline a {
    text-decoration-line: none !important;
  }

  .jui\:\[\&_a\]\:\[background\:\#f8fafc\] a {
    background: #f8fafc !important;
  }

  .jui\:\[\&_a\]\:\[background\:\#fff\] a {
    background: #fff !important;
  }

  .jui\:\[\&_a\]\:\[background\:var\(--brand\)\] a {
    background: var(--brand) !important;
  }

  .jui\:\[\&_a\]\:\[background\:var\(--ui-subtle\)\] a {
    background: var(--ui-subtle) !important;
  }

  .jui\:\[\&_a\]\:\[border-bottom\:1px_solid_\#eef2f6\] a {
    border-bottom: 1px solid #eef2f6 !important;
  }

  .jui\:\[\&_a\]\:\[border\:1px_solid_\#e2e8f0\] a {
    border: 1px solid #e2e8f0 !important;
  }

  .jui\:\[\&_a\]\:\[border\:1px_solid_var\(--ui-border\)\] a {
    border: 1px solid var(--ui-border) !important;
  }

  .jui\:\[\&_a_\>_span\:nth-child\(2\)\]\:\[font-weight\:750\] a > span:nth-child(2) {
    font-weight: 750 !important;
  }

  .jui\:\[\&_a_\>_span\:nth-child\(2\)\]\:\[color\:var\(--color-text-heading\,_var\(--color-on-surface\)\)\] a > span:nth-child(2) {
    color: var(--color-text-heading, var(--color-on-surface)) !important;
  }

  .jui\:\[\&_a_\>_strong\]\:\[min-width\:1\.7rem\] a > strong {
    min-width: 1.7rem !important;
  }

  .jui\:\[\&_a_\>_strong\]\:\[border-radius\:999px\] a > strong {
    border-radius: 999px !important;
  }

  .jui\:\[\&_a_\>_strong\]\:\[padding\:0\.15rem_0\.45rem\] a > strong {
    padding: .15rem .45rem !important;
  }

  .jui\:\[\&_a_\>_strong\]\:text-center a > strong {
    text-align: center !important;
  }

  .jui\:\[\&_a_\>_strong\]\:\[font-size\:0\.82rem\] a > strong {
    font-size: .82rem !important;
  }

  .jui\:\[\&_a_\>_strong\]\:\[color\:var\(--color-error\,_\#dc2626\)\] a > strong {
    color: var(--color-error, #dc2626) !important;
  }

  .jui\:\[\&_a_\>_strong\]\:\[background\:var\(--color-error-container\,_\#fee2e2\)\] a > strong {
    background: var(--color-error-container, #fee2e2) !important;
  }

  .jui\:\[\&_a\.assoc-dir-profile\]\:\[border-radius\:999px\] a.assoc-dir-profile {
    border-radius: 999px !important;
  }

  .jui\:\[\&_a\.assoc-dir-profile\]\:\[padding\:0\.28rem_0\.65rem\] a.assoc-dir-profile {
    padding: .28rem .65rem !important;
  }

  .jui\:\[\&_a\.assoc-dir-profile\]\:\[font-weight\:650\] a.assoc-dir-profile {
    font-weight: 650 !important;
  }

  .jui\:\[\&_a\.assoc-dir-profile\]\:\[color\:\#fff\] a.assoc-dir-profile {
    color: #fff !important;
  }

  .jui\:\[\&_a\.assoc-dir-profile\]\:\[background\:var\(--brand\)\] a.assoc-dir-profile {
    background: var(--brand) !important;
  }

  .jui\:\[\&_a\:focus-visible\]\:\[outline\:2px_solid_\#3577e5\] a:focus-visible {
    outline: 2px solid #3577e5 !important;
  }

  .jui\:\[\&_a\:focus-visible\]\:\[outline-offset\:3px\] a:focus-visible {
    outline-offset: 3px !important;
  }

  .jui\:\[\&_a\:hover\]\:\[border-color\:\#cbd5e1\] a:hover {
    border-color: #cbd5e1 !important;
  }

  .jui\:\[\&_a\:hover\]\:\[background\:\#f1f5f9\] a:hover {
    background: #f1f5f9 !important;
  }

  .jui\:\[\&_article\]\:flex article {
    display: flex !important;
  }

  .jui\:\[\&_article\]\:grid article {
    display: grid !important;
  }

  .jui\:\[\&_article\]\:\[grid-template-columns\:auto_1fr\] article {
    grid-template-columns: auto 1fr !important;
  }

  .jui\:\[\&_article\]\:\[align-items\:start\] article {
    align-items: start !important;
  }

  .jui\:\[\&_article\]\:items-start article {
    align-items: flex-start !important;
  }

  .jui\:\[\&_article\]\:\[gap\:0\.7rem\] article {
    gap: .7rem !important;
  }

  .jui\:\[\&_article\]\:\[gap\:0\.55rem\] article {
    gap: .55rem !important;
  }

  .jui\:\[\&_article\]\:\[border-radius\:0\.9rem\] article {
    border-radius: .9rem !important;
  }

  .jui\:\[\&_article\]\:\[border-radius\:0\.75rem\] article {
    border-radius: .75rem !important;
  }

  .jui\:\[\&_article\]\:\[border-radius\:0\.95rem\] article {
    border-radius: .95rem !important;
  }

  .jui\:\[\&_article\]\:\[border-radius\:1rem\] article {
    border-radius: 1rem !important;
  }

  .jui\:\[\&_article\]\:\[padding\:0\.8rem_0\.85rem\] article {
    padding: .8rem .85rem !important;
  }

  .jui\:\[\&_article\]\:\[padding\:0\.9rem_0\.95rem\] article {
    padding: .9rem .95rem !important;
  }

  .jui\:\[\&_article\]\:\[padding\:0\.75rem\] article {
    padding: .75rem !important;
  }

  .jui\:\[\&_article\]\:\[padding\:1rem\] article {
    padding: 1rem !important;
  }

  .jui\:\[\&_article\]\:\[box-shadow\:0_1px_0_\#f8fafc\] article {
    box-shadow: 0 1px #f8fafc !important;
  }

  .jui\:\[\&_article\]\:\[background\:\#f8fafc\] article {
    background: #f8fafc !important;
  }

  .jui\:\[\&_article\]\:\[background\:\#fff\] article {
    background: #fff !important;
  }

  .jui\:\[\&_article\]\:\[border\:1px_solid_\#e2e8f0\] article {
    border: 1px solid #e2e8f0 !important;
  }

  .jui\:\[\&_article\]\:\[border\:1px_solid_\#e8eef4\] article {
    border: 1px solid #e8eef4 !important;
  }

  .jui\:\[\&_article\[data-tone\=\'blue\'\]\]\:\[border-color\:\#bfdbfe\] article[data-tone="blue"] {
    border-color: #bfdbfe !important;
  }

  .jui\:\[\&_article\[data-tone\=\'blue\'\]\]\:\[border-color\:\#d7e8ff\] article[data-tone="blue"] {
    border-color: #d7e8ff !important;
  }

  .jui\:\[\&_article\[data-tone\=\'blue\'\]\]\:\[background\:\#eef6ff\] article[data-tone="blue"] {
    background: #eef6ff !important;
  }

  .jui\:\[\&_article\[data-tone\=\'green\'\]\]\:\[border-color\:\#bbf7d0\] article[data-tone="green"] {
    border-color: #bbf7d0 !important;
  }

  .jui\:\[\&_article\[data-tone\=\'green\'\]\]\:\[border-color\:\#d1fae5\] article[data-tone="green"] {
    border-color: #d1fae5 !important;
  }

  .jui\:\[\&_article\[data-tone\=\'green\'\]\]\:\[background\:\#ecfdf5\] article[data-tone="green"] {
    background: #ecfdf5 !important;
  }

  .jui\:\[\&_article\[data-tone\=\'orange\'\]\]\:\[border-color\:\#fed7aa\] article[data-tone="orange"] {
    border-color: #fed7aa !important;
  }

  .jui\:\[\&_article\[data-tone\=\'orange\'\]\]\:\[background\:\#fff7ed\] article[data-tone="orange"] {
    background: #fff7ed !important;
  }

  .jui\:\[\&_article\[data-tone\=\'pink\'\]\]\:\[border-color\:\#fecdd3\] article[data-tone="pink"] {
    border-color: #fecdd3 !important;
  }

  .jui\:\[\&_article\[data-tone\=\'purple\'\]\]\:\[border-color\:\#ddd6fe\] article[data-tone="purple"] {
    border-color: #ddd6fe !important;
  }

  .jui\:\[\&_article\[data-tone\=\'purple\'\]\]\:\[border-color\:\#e9e0ff\] article[data-tone="purple"] {
    border-color: #e9e0ff !important;
  }

  .jui\:\[\&_article\[data-tone\=\'purple\'\]\]\:\[background\:\#f5f3ff\] article[data-tone="purple"] {
    background: #f5f3ff !important;
  }

  .jui\:\[\&_b\]\:absolute b {
    position: absolute !important;
  }

  .jui\:\[\&_b\]\:\[top\:0\.65rem\] b {
    top: .65rem !important;
  }

  .jui\:\[\&_b\]\:\[right\:0\.65rem\] b {
    right: .65rem !important;
  }

  .jui\:\[\&_b\]\:\[margin-top\:0\.2rem\] b {
    margin-top: .2rem !important;
  }

  .jui\:\[\&_b\]\:\[display\:inline-block\] b {
    display: inline-block !important;
  }

  .jui\:\[\&_b\]\:block b {
    display: block !important;
  }

  .jui\:\[\&_b\]\:\[border-radius\:999px\] b {
    border-radius: 999px !important;
  }

  .jui\:\[\&_b\]\:\[padding\:0\.1rem_0\.45rem\] b {
    padding: .1rem .45rem !important;
  }

  .jui\:\[\&_b\]\:\[font-size\:0\.68rem\] b {
    font-size: .68rem !important;
  }

  .jui\:\[\&_b\]\:\[font-weight\:650\] b {
    font-weight: 650 !important;
  }

  .jui\:\[\&_b\]\:\[font-weight\:750\] b {
    font-weight: 750 !important;
  }

  .jui\:\[\&_b\]\:\[letter-spacing\:0\.04em\] b {
    letter-spacing: .04em !important;
  }

  .jui\:\[\&_b\]\:\[color\:\#1d4ed8\] b {
    color: #1d4ed8 !important;
  }

  .jui\:\[\&_b\]\:\[color\:\#94a3b8\] b {
    color: #94a3b8 !important;
  }

  .jui\:\[\&_b\]\:\[color\:\#475569\] b {
    color: #475569 !important;
  }

  .jui\:\[\&_b\]\:\[color\:\#b91c1c\] b {
    color: #b91c1c !important;
  }

  .jui\:\[\&_b\]\:\[text-transform\:uppercase\] b {
    text-transform: uppercase !important;
  }

  .jui\:\[\&_b\]\:\[background\:\#f1f5f9\] b {
    background: #f1f5f9 !important;
  }

  .jui\:\[\&_b\]\:\[background\:\#fef2f2\] b {
    background: #fef2f2 !important;
  }

  .jui\:\[\&_b\[data-paid\=\'yes\'\]\]\:\[color\:\#15803d\] b[data-paid="yes"] {
    color: #15803d !important;
  }

  .jui\:\[\&_b\[data-paid\=\'yes\'\]\]\:\[background\:\#dcfce7\] b[data-paid="yes"] {
    background: #dcfce7 !important;
  }

  .jui\:\[\&_button\]\:flex button {
    display: flex !important;
  }

  .jui\:\[\&_button\]\:grid button {
    display: grid !important;
  }

  .jui\:\[\&_button\]\:\[height\:1\.4rem\] button {
    height: 1.4rem !important;
  }

  .jui\:\[\&_button\]\:\[height\:1\.85rem\] button {
    height: 1.85rem !important;
  }

  .jui\:\[\&_button\]\:h-auto button {
    height: auto !important;
  }

  .jui\:\[\&_button\]\:\[min-height\:2\.1rem\] button {
    min-height: 2.1rem !important;
  }

  .jui\:\[\&_button\]\:\[min-height\:2\.7rem\] button {
    min-height: 2.7rem !important;
  }

  .jui\:\[\&_button\]\:\[min-height\:2\.35rem\] button {
    min-height: 2.35rem !important;
  }

  .jui\:\[\&_button\]\:\[min-height\:3\.35rem\] button {
    min-height: 3.35rem !important;
  }

  .jui\:\[\&_button\]\:\[min-height\:4\.1rem\] button {
    min-height: 4.1rem !important;
  }

  .jui\:\[\&_button\]\:\[min-height\:var\(--touch\)\] button {
    min-height: var(--touch) !important;
  }

  .jui\:\[\&_button\]\:min-h-16 button {
    min-height: calc(var(--jui-spacing) * 16) !important;
  }

  .jui\:\[\&_button\]\:\[width\:2\.55rem\] button {
    width: 2.55rem !important;
  }

  .jui\:\[\&_button\]\:w-full button {
    width: 100% !important;
  }

  .jui\:\[\&_button\]\:\[min-width\:1\.85rem\] button {
    min-width: 1.85rem !important;
  }

  .jui\:\[\&_button\]\:\[flex\:0_0_auto\] button {
    flex: none !important;
  }

  .jui\:\[\&_button\]\:\[flex\:1\] button {
    flex: 1 !important;
  }

  .jui\:\[\&_button\]\:cursor-pointer button {
    cursor: pointer !important;
  }

  .jui\:\[\&_button\]\:flex-col button {
    flex-direction: column !important;
  }

  .jui\:\[\&_button\]\:\[place-items\:center\] button {
    place-items: center !important;
  }

  .jui\:\[\&_button\]\:items-center button {
    align-items: center !important;
  }

  .jui\:\[\&_button\]\:items-start button {
    align-items: flex-start !important;
  }

  .jui\:\[\&_button\]\:justify-center button {
    justify-content: center !important;
  }

  .jui\:\[\&_button\]\:\[gap\:0\.2rem\] button {
    gap: .2rem !important;
  }

  .jui\:\[\&_button\]\:\[gap\:0\.15rem\] button {
    gap: .15rem !important;
  }

  .jui\:\[\&_button\]\:gap-1 button {
    gap: var(--jui-spacing) !important;
  }

  .jui\:\[\&_button\]\:gap-2 button {
    gap: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:\[\&_button\]\:\[border-radius\:0\.5rem\] button {
    border-radius: .5rem !important;
  }

  .jui\:\[\&_button\]\:\[border-radius\:0\.8rem\] button {
    border-radius: .8rem !important;
  }

  .jui\:\[\&_button\]\:\[border-radius\:0\.75rem\] button {
    border-radius: .75rem !important;
  }

  .jui\:\[\&_button\]\:\[border-radius\:0\.85rem\] button {
    border-radius: .85rem !important;
  }

  .jui\:\[\&_button\]\:\[border-radius\:999px\] button {
    border-radius: 999px !important;
  }

  .jui\:\[\&_button\]\:rounded-lg button {
    border-radius: var(--jui-radius-lg) !important;
  }

  .jui\:\[\&_button\]\:border-0 button {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .jui\:\[\&_button\]\:bg-transparent button {
    background-color: #0000 !important;
  }

  .jui\:\[\&_button\]\:\[padding\:0\.4rem\] button {
    padding: .4rem !important;
  }

  .jui\:\[\&_button\]\:\[padding\:0\.4rem_0\.3rem\] button {
    padding: .4rem .3rem !important;
  }

  .jui\:\[\&_button\]\:\[padding\:0\.12rem\] button {
    padding: .12rem !important;
  }

  .jui\:\[\&_button\]\:\[padding\:0\.28rem_0\.7rem\] button {
    padding: .28rem .7rem !important;
  }

  .jui\:\[\&_button\]\:\[padding\:0\.35rem_0\.75rem\] button {
    padding: .35rem .75rem !important;
  }

  .jui\:\[\&_button\]\:\[padding\:0\.38rem_0\.95rem\] button {
    padding: .38rem .95rem !important;
  }

  .jui\:\[\&_button\]\:\[padding\:0\.55rem_0\.7rem\] button {
    padding: .55rem .7rem !important;
  }

  .jui\:\[\&_button\]\:\[padding\:0\.75rem\] button {
    padding: .75rem !important;
  }

  .jui\:\[\&_button\]\:px-1 button {
    padding-inline: var(--jui-spacing) !important;
  }

  .jui\:\[\&_button\]\:px-3 button {
    padding-inline: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:\[\&_button\]\:py-3 button {
    padding-block: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:\[\&_button\]\:text-left button {
    text-align: left !important;
  }

  .jui\:\[\&_button\]\:text-sm button {
    font-size: var(--jui-text-sm) !important;
    line-height: var(--tw-leading, var(--jui-text-sm--line-height)) !important;
  }

  .jui\:\[\&_button\]\:text-xs button {
    font-size: var(--jui-text-xs) !important;
    line-height: var(--tw-leading, var(--jui-text-xs--line-height)) !important;
  }

  .jui\:\[\&_button\]\:\[font-size\:0\.72rem\] button {
    font-size: .72rem !important;
  }

  .jui\:\[\&_button\]\:\[font-size\:0\.78rem\] button {
    font-size: .78rem !important;
  }

  .jui\:\[\&_button\]\:\[font-size\:0\.82rem\] button {
    font-size: .82rem !important;
  }

  .jui\:\[\&_button\]\:\[font-size\:0\.86rem\] button {
    font-size: .86rem !important;
  }

  .jui\:\[\&_button\]\:font-medium button {
    --tw-font-weight: var(--jui-font-weight-medium) !important;
    font-weight: var(--jui-font-weight-medium) !important;
  }

  .jui\:\[\&_button\]\:\[font-weight\:650\] button {
    font-weight: 650 !important;
  }

  .jui\:\[\&_button\]\:\[color\:\#0f172a\] button {
    color: #0f172a !important;
  }

  .jui\:\[\&_button\]\:\[color\:\#94a3b8\] button {
    color: #94a3b8 !important;
  }

  .jui\:\[\&_button\]\:\[color\:\#191c1e\] button {
    color: #191c1e !important;
  }

  .jui\:\[\&_button\]\:\[color\:\#64748b\] button {
    color: #64748b !important;
  }

  .jui\:\[\&_button\]\:\[color\:\#334155\] button {
    color: #334155 !important;
  }

  .jui\:\[\&_button\]\:\[color\:\#475569\] button {
    color: #475569 !important;
  }

  .jui\:\[\&_button\]\:\[color\:var\(--brand\)\] button {
    color: var(--brand) !important;
  }

  .jui\:\[\&_button\]\:\[color\:var\(--ui-muted\)\] button {
    color: var(--ui-muted) !important;
  }

  .jui\:\[\&_button\]\:\[color\:var\(--ui-muted\,\#64748b\)\] button {
    color: var(--ui-muted, #64748b) !important;
  }

  .jui\:\[\&_button\]\:text-\[var\(--ui-muted\)\] button {
    color: var(--ui-muted) !important;
  }

  .jui\:\[\&_button\]\:no-underline button {
    text-decoration-line: none !important;
  }

  .jui\:\[\&_button\]\:\[background\:\#cbd5e1\] button {
    background: #cbd5e1 !important;
  }

  .jui\:\[\&_button\]\:\[background\:\#eef2f6\] button {
    background: #eef2f6 !important;
  }

  .jui\:\[\&_button\]\:\[background\:\#f8fafc\] button {
    background: #f8fafc !important;
  }

  .jui\:\[\&_button\]\:\[background\:\#fff\] button {
    background: #fff !important;
  }

  .jui\:\[\&_button\]\:\[background\:transparent\] button {
    background: none !important;
  }

  .jui\:\[\&_button\]\:\[background\:var\(--ui-subtle\)\] button {
    background: var(--ui-subtle) !important;
  }

  .jui\:\[\&_button\]\:\[border\:0\] button {
    border: 0 !important;
  }

  .jui\:\[\&_button\]\:\[border\:1px_solid_\#e2e8f0\] button {
    border: 1px solid #e2e8f0 !important;
  }

  .jui\:\[\&_button\]\:\[border\:1px_solid_transparent\] button {
    border: 1px solid #0000 !important;
  }

  .jui\:\[\&_button\]\:\[border\:1px_solid_var\(--ui-border\)\] button {
    border: 1px solid var(--ui-border) !important;
  }

  .jui\:\[\&_button_span\]\:block button span {
    display: block !important;
  }

  .jui\:\[\&_button_span\]\:\[height\:1\.15rem\] button span {
    height: 1.15rem !important;
  }

  .jui\:\[\&_button_span\]\:\[width\:1\.15rem\] button span {
    width: 1.15rem !important;
  }

  .jui\:\[\&_button_span\]\:\[border-radius\:999px\] button span {
    border-radius: 999px !important;
  }

  .jui\:\[\&_button_span\]\:\[background\:\#fff\] button span {
    background: #fff !important;
  }

  .jui\:\[\&_button\:disabled\]\:\[cursor\:not-allowed\] button:disabled {
    cursor: not-allowed !important;
  }

  .jui\:\[\&_button\:disabled\]\:\[color\:\#94a3b8\] button:disabled {
    color: #94a3b8 !important;
  }

  .jui\:\[\&_button\:disabled\]\:\[color\:var\(--ui-muted\)\] button:disabled {
    color: var(--ui-muted) !important;
  }

  .jui\:\[\&_button\:disabled\]\:opacity-40 button:disabled {
    opacity: .4 !important;
  }

  .jui\:\[\&_button\:disabled\]\:\[background\:\#f1f5f9\] button:disabled {
    background: #f1f5f9 !important;
  }

  .jui\:\[\&_button\:disabled_span\]\:\[color\:\#94a3b8\] button:disabled span, .jui\:\[\&_button\:disabled_strong\]\:\[color\:\#94a3b8\] button:disabled strong {
    color: #94a3b8 !important;
  }

  .jui\:\[\&_button\:focus-visible\]\:\[outline\:2px_solid_\#3577e5\] button:focus-visible {
    outline: 2px solid #3577e5 !important;
  }

  .jui\:\[\&_button\:focus-visible\]\:\[outline-offset\:3px\] button:focus-visible {
    outline-offset: 3px !important;
  }

  .jui\:\[\&_button\:not\(\:disabled\)\:hover\]\:\[border-color\:\#cbd5e1\] button:not(:disabled):hover {
    border-color: #cbd5e1 !important;
  }

  .jui\:\[\&_button\:not\(\:disabled\)\:hover\]\:\[background\:\#f1f5f9\] button:not(:disabled):hover {
    background: #f1f5f9 !important;
  }

  .jui\:\[\&_button\[aria-selected\=\'true\'\]\]\:\[border-color\:var\(--brand-deep\)\] button[aria-selected="true"] {
    border-color: var(--brand-deep) !important;
  }

  .jui\:\[\&_button\[aria-selected\=\'true\'\]\]\:\[color\:\#fff\] button[aria-selected="true"] {
    color: #fff !important;
  }

  .jui\:\[\&_button\[aria-selected\=\'true\'\]\]\:\[background\:var\(--brand-deep\)\] button[aria-selected="true"] {
    background: var(--brand-deep) !important;
  }

  .jui\:\[\&_button\[data-on\=\'yes\'\]\]\:\[border-color\:var\(--brand-deep\)\] button[data-on="yes"] {
    border-color: var(--brand-deep) !important;
  }

  .jui\:\[\&_button\[data-on\=\'yes\'\]\]\:\[color\:\#fff\] button[data-on="yes"] {
    color: #fff !important;
  }

  .jui\:\[\&_button\[data-on\=\'yes\'\]\]\:\[color\:var\(--brand\)\] button[data-on="yes"] {
    color: var(--brand) !important;
  }

  .jui\:\[\&_button\[data-on\=\'yes\'\]\]\:\[box-shadow\:inset_0_-2px_0_var\(--brand\)\] button[data-on="yes"] {
    box-shadow: inset 0 -2px 0 var(--brand) !important;
  }

  .jui\:\[\&_button\[data-on\=\'yes\'\]\]\:\[background\:\#2563eb\] button[data-on="yes"] {
    background: #2563eb !important;
  }

  .jui\:\[\&_button\[data-on\=\'yes\'\]\]\:\[background\:var\(--brand\,_\#16a34a\)\] button[data-on="yes"] {
    background: var(--brand, #16a34a) !important;
  }

  .jui\:\[\&_button\[data-on\=\'yes\'\]\]\:\[background\:var\(--brand-deep\)\] button[data-on="yes"] {
    background: var(--brand-deep) !important;
  }

  .jui\:\[\&_button\[data-on\=\'yes\'\]_span\]\:\[margin-left\:auto\] button[data-on="yes"] span {
    margin-left: auto !important;
  }

  .jui\:\[\&_button\[data-on\=yes\]\]\:bg-blue-50 button[data-on="yes"] {
    background-color: var(--jui-color-blue-50) !important;
  }

  .jui\:\[\&_button\[data-on\=yes\]\]\:text-blue-600 button[data-on="yes"] {
    color: var(--jui-color-blue-600) !important;
  }

  .jui\:\[\&_button\[data-on\=yes\]\]\:shadow-\[inset_0_-2px_0_\#2563eb\] button[data-on="yes"] {
    --tw-shadow: inset 0 -2px 0 var(--tw-shadow-color, #2563eb) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  @media (prefers-color-scheme: dark) {
    .jui\:dark\:\[\&_button\[data-on\=yes\]\]\:bg-blue-950\/50 button[data-on="yes"] {
      background-color: var(--jui-color-blue-950) !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .jui\:dark\:\[\&_button\[data-on\=yes\]\]\:bg-blue-950\/50 button[data-on="yes"] {
        background-color: color-mix(in oklab, var(--jui-color-blue-950) 50%, transparent) !important;
      }
    }
  }

  .jui\:\[\&_code\]\:\[margin-top\:0\.25rem\] code {
    margin-top: .25rem !important;
  }

  .jui\:\[\&_code\]\:inline-flex code {
    display: inline-flex !important;
  }

  .jui\:\[\&_code\]\:\[border-radius\:0\.55rem\] code {
    border-radius: .55rem !important;
  }

  .jui\:\[\&_code\]\:\[padding\:0\.2rem_0\.55rem\] code {
    padding: .2rem .55rem !important;
  }

  .jui\:\[\&_code\]\:\[font-size\:0\.82rem\] code {
    font-size: .82rem !important;
  }

  .jui\:\[\&_code\]\:\[color\:\#191c1e\] code {
    color: #191c1e !important;
  }

  .jui\:\[\&_code\]\:\[background\:\#f2f4f6\] code {
    background: #f2f4f6 !important;
  }

  .jui\:\[\&_dd\]\:\[margin\:0\.15rem_0_0\] dd {
    margin: .15rem 0 0 !important;
  }

  .jui\:\[\&_dd\]\:m-0 dd {
    margin: 0 !important;
  }

  .jui\:\[\&_dd\]\:\[font-size\:0\.85rem\] dd {
    font-size: .85rem !important;
  }

  .jui\:\[\&_dd\]\:\[font-size\:0\.95rem\] dd {
    font-size: .95rem !important;
  }

  .jui\:\[\&_dd\]\:\[font-weight\:650\] dd {
    font-weight: 650 !important;
  }

  .jui\:\[\&_dd\]\:\[color\:\#191c1e\] dd {
    color: #191c1e !important;
  }

  .jui\:\[\&_dd\]\:\[color\:var\(--ui-text\)\] dd {
    color: var(--ui-text) !important;
  }

  .jui\:\[\&_div\]\:grid div {
    display: grid !important;
  }

  .jui\:\[\&_div\]\:min-w-0 div {
    min-width: 0 !important;
  }

  .jui\:\[\&_div\]\:\[grid-template-columns\:minmax\(7rem\,_42\%\)_1fr\] div {
    grid-template-columns: minmax(7rem, 42%) 1fr !important;
  }

  .jui\:\[\&_div\]\:\[gap\:0\.5rem\] div {
    gap: .5rem !important;
  }

  .jui\:\[\&_div\]\:\[gap\:0\.15rem\] div {
    gap: .15rem !important;
  }

  .jui\:\[\&_dl\]\:m-0 dl {
    margin: 0 !important;
  }

  .jui\:\[\&_dl\]\:grid dl {
    display: grid !important;
  }

  .jui\:\[\&_dl\]\:\[gap\:0\.85rem\] dl {
    gap: .85rem !important;
  }

  .jui\:\[\&_dt\]\:\[font-size\:0\.72rem\] dt {
    font-size: .72rem !important;
  }

  .jui\:\[\&_dt\]\:\[font-size\:0\.78rem\] dt {
    font-size: .78rem !important;
  }

  .jui\:\[\&_dt\]\:\[color\:\#64748b\] dt {
    color: #64748b !important;
  }

  .jui\:\[\&_dt\]\:\[color\:var\(--ui-muted\)\] dt {
    color: var(--ui-muted) !important;
  }

  .jui\:\[\&_em\]\:\[margin-top\:0\.15rem\] em {
    margin-top: .15rem !important;
  }

  .jui\:\[\&_em\]\:\[margin-top\:0\.35rem\] em {
    margin-top: .35rem !important;
  }

  .jui\:\[\&_em\]\:block em {
    display: block !important;
  }

  .jui\:\[\&_em\]\:flex em {
    display: flex !important;
  }

  .jui\:\[\&_em\]\:hidden em {
    display: none !important;
  }

  .jui\:\[\&_em\]\:\[max-width\:100\%\] em {
    max-width: 100% !important;
  }

  .jui\:\[\&_em\]\:flex-wrap em {
    flex-wrap: wrap !important;
  }

  .jui\:\[\&_em\]\:items-center em {
    align-items: center !important;
  }

  .jui\:\[\&_em\]\:\[gap\:0\.28rem\] em {
    gap: .28rem !important;
  }

  .jui\:\[\&_em\]\:overflow-hidden em {
    overflow: hidden !important;
  }

  .jui\:\[\&_em\]\:\[border-radius\:999px\] em {
    border-radius: 999px !important;
  }

  .jui\:\[\&_em\]\:\[padding\:0\.1rem_0\.5rem\] em {
    padding: .1rem .5rem !important;
  }

  .jui\:\[\&_em\]\:\[padding\:0\.08rem_0\.45rem\] em {
    padding: .08rem .45rem !important;
  }

  .jui\:\[\&_em\]\:\[padding\:0\.12rem_0\.5rem\] em {
    padding: .12rem .5rem !important;
  }

  .jui\:\[\&_em\]\:\[padding\:0\.12rem_0\.45rem\] em {
    padding: .12rem .45rem !important;
  }

  .jui\:\[\&_em\]\:\[padding\:0\.12rem_0\.55rem\] em {
    padding: .12rem .55rem !important;
  }

  .jui\:\[\&_em\]\:\[padding\:0\.15rem_0\.5rem\] em {
    padding: .15rem .5rem !important;
  }

  .jui\:\[\&_em\]\:\[padding\:0\.18rem_0\.5rem\] em {
    padding: .18rem .5rem !important;
  }

  .jui\:\[\&_em\]\:\[padding\:0\.18rem_0\.55rem\] em {
    padding: .18rem .55rem !important;
  }

  .jui\:\[\&_em\]\:\[font-size\:0\.7rem\] em {
    font-size: .7rem !important;
  }

  .jui\:\[\&_em\]\:\[font-size\:0\.8rem\] em {
    font-size: .8rem !important;
  }

  .jui\:\[\&_em\]\:\[font-size\:0\.65rem\] em {
    font-size: .65rem !important;
  }

  .jui\:\[\&_em\]\:\[font-size\:0\.68rem\] em {
    font-size: .68rem !important;
  }

  .jui\:\[\&_em\]\:\[font-size\:0\.72rem\] em {
    font-size: .72rem !important;
  }

  .jui\:\[\&_em\]\:\[font-size\:0\.75rem\] em {
    font-size: .75rem !important;
  }

  .jui\:\[\&_em\]\:\[font-size\:0\.78rem\] em {
    font-size: .78rem !important;
  }

  .jui\:\[\&_em\]\:\[font-size\:0\.82rem\] em {
    font-size: .82rem !important;
  }

  .jui\:\[\&_em\]\:\[font-size\:0\.86rem\] em {
    font-size: .86rem !important;
  }

  .jui\:\[\&_em\]\:\[line-height\:1\.3\] em {
    line-height: 1.3 !important;
  }

  .jui\:\[\&_em\]\:font-bold em {
    --tw-font-weight: var(--jui-font-weight-bold) !important;
    font-weight: var(--jui-font-weight-bold) !important;
  }

  .jui\:\[\&_em\]\:\[font-weight\:500\] em {
    font-weight: 500 !important;
  }

  .jui\:\[\&_em\]\:\[font-weight\:650\] em {
    font-weight: 650 !important;
  }

  .jui\:\[\&_em\]\:\[font-weight\:750\] em {
    font-weight: 750 !important;
  }

  .jui\:\[\&_em\]\:\[letter-spacing\:0\.04em\] em {
    letter-spacing: .04em !important;
  }

  .jui\:\[\&_em\]\:\[text-overflow\:ellipsis\] em {
    text-overflow: ellipsis !important;
  }

  .jui\:\[\&_em\]\:whitespace-nowrap em {
    white-space: nowrap !important;
  }

  .jui\:\[\&_em\]\:\[color\:\#0f9d58\] em {
    color: #0f9d58 !important;
  }

  .jui\:\[\&_em\]\:\[color\:\#1d4ed8\] em {
    color: #1d4ed8 !important;
  }

  .jui\:\[\&_em\]\:\[color\:\#94a3b8\] em {
    color: #94a3b8 !important;
  }

  .jui\:\[\&_em\]\:\[color\:\#191c1e\] em {
    color: #191c1e !important;
  }

  .jui\:\[\&_em\]\:\[color\:\#15803d\] em {
    color: #15803d !important;
  }

  .jui\:\[\&_em\]\:\[color\:\#64748b\] em {
    color: #64748b !important;
  }

  .jui\:\[\&_em\]\:\[color\:\#92400e\] em {
    color: #92400e !important;
  }

  .jui\:\[\&_em\]\:\[color\:\#464555\] em {
    color: #464555 !important;
  }

  .jui\:\[\&_em\]\:\[color\:\#777587\] em {
    color: #777587 !important;
  }

  .jui\:\[\&_em\]\:\[color\:\#b91c1c\] em {
    color: #b91c1c !important;
  }

  .jui\:\[\&_em\]\:\[color\:\#c2410c\] em {
    color: #c2410c !important;
  }

  .jui\:\[\&_em\]\:\[color\:var\(--brand\)\] em {
    color: var(--brand) !important;
  }

  .jui\:\[\&_em\]\:\[color\:var\(--color-on-surface-variant\,_\#64748b\)\] em {
    color: var(--color-on-surface-variant, #64748b) !important;
  }

  .jui\:\[\&_em\]\:\[color\:var\(--color-text-secondary\,_var\(--color-on-surface-variant\)\)\] em {
    color: var(--color-text-secondary, var(--color-on-surface-variant)) !important;
  }

  .jui\:\[\&_em\]\:text-\[var\(--ui-muted\)\] em {
    color: var(--ui-muted) !important;
  }

  .jui\:\[\&_em\]\:\[text-transform\:uppercase\] em {
    text-transform: uppercase !important;
  }

  .jui\:\[\&_em\]\:not-italic em {
    font-style: normal !important;
  }

  .jui\:\[\&_em\]\:\[background\:\#dbeafe\] em {
    background: #dbeafe !important;
  }

  .jui\:\[\&_em\]\:\[background\:\#e8f7ef\] em {
    background: #e8f7ef !important;
  }

  .jui\:\[\&_em\]\:\[background\:\#ecfdf3\] em {
    background: #ecfdf3 !important;
  }

  .jui\:\[\&_em\]\:\[background\:\#eef2ff\] em {
    background: #eef2ff !important;
  }

  .jui\:\[\&_em\]\:\[background\:\#f2f4f6\] em {
    background: #f2f4f6 !important;
  }

  .jui\:\[\&_em\]\:\[background\:\#fef2f2\] em {
    background: #fef2f2 !important;
  }

  .jui\:\[\&_em\]\:\[background\:\#fef6e8\] em {
    background: #fef6e8 !important;
  }

  .jui\:\[\&_em\]\:\[background\:\#fff7ed\] em {
    background: #fff7ed !important;
  }

  .jui\:\[\&_em\[data-kind\=\'corporate\'\]\]\:\[color\:\#15803d\] em[data-kind="corporate"] {
    color: #15803d !important;
  }

  .jui\:\[\&_em\[data-kind\=\'corporate\'\]\]\:\[background\:\#dcfce7\] em[data-kind="corporate"] {
    background: #dcfce7 !important;
  }

  .jui\:\[\&_em\[data-kind\=\'family\'\]\]\:\[color\:\#c2410c\] em[data-kind="family"] {
    color: #c2410c !important;
  }

  .jui\:\[\&_em\[data-kind\=\'family\'\]\]\:\[background\:\#ffedd5\] em[data-kind="family"] {
    background: #ffedd5 !important;
  }

  .jui\:\[\&_em\[data-kind\=\'individual\'\]\]\:\[color\:\#6d28d9\] em[data-kind="individual"] {
    color: #6d28d9 !important;
  }

  .jui\:\[\&_em\[data-kind\=\'individual\'\]\]\:\[background\:\#efe7ff\] em[data-kind="individual"] {
    background: #efe7ff !important;
  }

  .jui\:\[\&_em\[data-kind\=\'other\'\]\]\:\[color\:\#1d4ed8\] em[data-kind="other"] {
    color: #1d4ed8 !important;
  }

  .jui\:\[\&_em\[data-kind\=\'other\'\]\]\:\[background\:\#dbeafe\] em[data-kind="other"] {
    background: #dbeafe !important;
  }

  .jui\:\[\&_em\[data-kind\=\'student\'\]\]\:\[color\:\#1d4ed8\] em[data-kind="student"] {
    color: #1d4ed8 !important;
  }

  .jui\:\[\&_em\[data-kind\=\'student\'\]\]\:\[background\:\#dbeafe\] em[data-kind="student"] {
    background: #dbeafe !important;
  }

  .jui\:\[\&_em\[data-kind\]\]\:\[display\:inline-block\] em[data-kind] {
    display: inline-block !important;
  }

  .jui\:\[\&_em\[data-kind\]\]\:\[border-radius\:999px\] em[data-kind] {
    border-radius: 999px !important;
  }

  .jui\:\[\&_em\[data-kind\]\]\:\[padding\:0\.15rem_0\.5rem\] em[data-kind] {
    padding: .15rem .5rem !important;
  }

  .jui\:\[\&_em\[data-kind\]\]\:\[font-size\:0\.75rem\] em[data-kind] {
    font-size: .75rem !important;
  }

  .jui\:\[\&_em\[data-kind\]\]\:font-bold em[data-kind] {
    --tw-font-weight: var(--jui-font-weight-bold) !important;
    font-weight: var(--jui-font-weight-bold) !important;
  }

  .jui\:\[\&_em\[data-kind\]\]\:not-italic em[data-kind] {
    font-style: normal !important;
  }

  .jui\:\[\&_em\[data-on\=\'no\'\]\]\:\[color\:\#1d4ed8\] em[data-on="no"] {
    color: #1d4ed8 !important;
  }

  .jui\:\[\&_em\[data-on\=\'no\'\]\]\:\[background\:\#eff6ff\] em[data-on="no"] {
    background: #eff6ff !important;
  }

  .jui\:\[\&_em\[data-status\=\'active\'\]\]\:\[color\:\#15803d\] em[data-status="active"] {
    color: #15803d !important;
  }

  .jui\:\[\&_em\[data-status\=\'active\'\]\]\:\[background\:\#ecfdf3\] em[data-status="active"] {
    background: #ecfdf3 !important;
  }

  .jui\:\[\&_em\[data-status\=\'approved\'\]\]\:\[color\:\#15803d\] em[data-status="approved"] {
    color: #15803d !important;
  }

  .jui\:\[\&_em\[data-status\=\'approved\'\]\]\:\[background\:\#ecfdf3\] em[data-status="approved"] {
    background: #ecfdf3 !important;
  }

  .jui\:\[\&_em\[data-status\=\'archived\'\]\]\:\[color\:\#c2410c\] em[data-status="archived"] {
    color: #c2410c !important;
  }

  .jui\:\[\&_em\[data-status\=\'archived\'\]\]\:\[background\:\#ffedd5\] em[data-status="archived"] {
    background: #ffedd5 !important;
  }

  .jui\:\[\&_em\[data-status\=\'ended\'\]\]\:\[color\:\#64748b\] em[data-status="ended"] {
    color: #64748b !important;
  }

  .jui\:\[\&_em\[data-status\=\'ended\'\]\]\:\[color\:\#475569\] em[data-status="ended"] {
    color: #475569 !important;
  }

  .jui\:\[\&_em\[data-status\=\'ended\'\]\]\:\[background\:\#f1f5f9\] em[data-status="ended"] {
    background: #f1f5f9 !important;
  }

  .jui\:\[\&_em\[data-status\=\'overdue\'\]\]\:\[color\:\#b91c1c\] em[data-status="overdue"] {
    color: #b91c1c !important;
  }

  .jui\:\[\&_em\[data-status\=\'overdue\'\]\]\:\[background\:\#fef2f2\] em[data-status="overdue"] {
    background: #fef2f2 !important;
  }

  .jui\:\[\&_em\[data-status\=\'paid\'\]\]\:\[color\:\#15803d\] em[data-status="paid"] {
    color: #15803d !important;
  }

  .jui\:\[\&_em\[data-status\=\'paid\'\]\]\:\[background\:\#ecfdf3\] em[data-status="paid"] {
    background: #ecfdf3 !important;
  }

  .jui\:\[\&_em\[data-status\=\'rejected\'\]\]\:\[color\:\#b91c1c\] em[data-status="rejected"] {
    color: #b91c1c !important;
  }

  .jui\:\[\&_em\[data-status\=\'rejected\'\]\]\:\[background\:\#fef2f2\] em[data-status="rejected"] {
    background: #fef2f2 !important;
  }

  .jui\:\[\&_em\[data-tier\=\'basic\'\]\]\:\[color\:\#c2410c\] em[data-tier="basic"] {
    color: #c2410c !important;
  }

  .jui\:\[\&_em\[data-tier\=\'basic\'\]\]\:\[background\:\#ffedd5\] em[data-tier="basic"] {
    background: #ffedd5 !important;
  }

  .jui\:\[\&_em\[data-tier\=\'premium\'\]\]\:\[color\:\#7c3aed\] em[data-tier="premium"] {
    color: #7c3aed !important;
  }

  .jui\:\[\&_em\[data-tier\=\'premium\'\]\]\:\[background\:\#f3e8ff\] em[data-tier="premium"] {
    background: #f3e8ff !important;
  }

  .jui\:\[\&_em\[data-tier\=\'standard\'\]\]\:\[color\:\#15803d\] em[data-tier="standard"] {
    color: #15803d !important;
  }

  .jui\:\[\&_em\[data-tier\=\'standard\'\]\]\:\[background\:\#dcfce7\] em[data-tier="standard"] {
    background: #dcfce7 !important;
  }

  .jui\:\[\&_h1\]\:\[margin\:0\.35rem_0_0\] h1 {
    margin: .35rem 0 0 !important;
  }

  .jui\:\[\&_h1\]\:m-0 h1 {
    margin: 0 !important;
  }

  .jui\:\[\&_h1\]\:\[font-size\:1\.55rem\] h1 {
    font-size: 1.55rem !important;
  }

  .jui\:\[\&_h1\]\:\[font-size\:clamp\(1\.55rem\,_2\.4vw\,_2rem\)\] h1 {
    font-size: clamp(1.55rem, 2.4vw, 2rem) !important;
  }

  .jui\:\[\&_h1\]\:\[line-height\:1\.15\] h1 {
    line-height: 1.15 !important;
  }

  .jui\:\[\&_h1\]\:\[font-weight\:800\] h1 {
    font-weight: 800 !important;
  }

  .jui\:\[\&_h1\]\:\[letter-spacing\:-0\.03em\] h1 {
    letter-spacing: -.03em !important;
  }

  .jui\:\[\&_h1\]\:\[color\:\#0f172a\] h1 {
    color: #0f172a !important;
  }

  .jui\:\[\&_h1\]\:\[color\:var\(--color-on-surface\,_\#0f172a\)\] h1 {
    color: var(--color-on-surface, #0f172a) !important;
  }

  .jui\:\[\&_h1\]\:\[color\:var\(--color-text-heading\,_var\(--color-on-surface\)\)\] h1 {
    color: var(--color-text-heading, var(--color-on-surface)) !important;
  }

  .jui\:\[\&_h2\]\:\[margin\:0_0_0\.55rem\] h2 {
    margin: 0 0 .55rem !important;
  }

  .jui\:\[\&_h2\]\:\[margin\:0_0_0\.65rem\] h2 {
    margin: 0 0 .65rem !important;
  }

  .jui\:\[\&_h2\]\:\[margin\:0_0_0\.75rem\] h2 {
    margin: 0 0 .75rem !important;
  }

  .jui\:\[\&_h2\]\:\[margin\:0_0_0\.85rem\] h2 {
    margin: 0 0 .85rem !important;
  }

  .jui\:\[\&_h2\]\:m-0 h2 {
    margin: 0 !important;
  }

  .jui\:\[\&_h2\]\:text-center h2 {
    text-align: center !important;
  }

  .jui\:\[\&_h2\]\:text-left h2 {
    text-align: left !important;
  }

  .jui\:\[\&_h2\]\:text-sm h2 {
    font-size: var(--jui-text-sm) !important;
    line-height: var(--tw-leading, var(--jui-text-sm--line-height)) !important;
  }

  .jui\:\[\&_h2\]\:\[font-size\:0\.72rem\] h2 {
    font-size: .72rem !important;
  }

  .jui\:\[\&_h2\]\:\[font-size\:0\.95rem\] h2 {
    font-size: .95rem !important;
  }

  .jui\:\[\&_h2\]\:\[font-size\:1\.05rem\] h2 {
    font-size: 1.05rem !important;
  }

  .jui\:\[\&_h2\]\:\[font-size\:1\.15rem\] h2 {
    font-size: 1.15rem !important;
  }

  .jui\:\[\&_h2\]\:\[font-size\:1\.25rem\] h2 {
    font-size: 1.25rem !important;
  }

  .jui\:\[\&_h2\]\:\[font-size\:1\.28rem\] h2 {
    font-size: 1.28rem !important;
  }

  .jui\:\[\&_h2\]\:\[font-size\:1\.35rem\] h2 {
    font-size: 1.35rem !important;
  }

  .jui\:\[\&_h2\]\:\[font-size\:1rem\] h2 {
    font-size: 1rem !important;
  }

  .jui\:\[\&_h2\]\:font-bold h2 {
    --tw-font-weight: var(--jui-font-weight-bold) !important;
    font-weight: var(--jui-font-weight-bold) !important;
  }

  .jui\:\[\&_h2\]\:font-semibold h2 {
    --tw-font-weight: var(--jui-font-weight-semibold) !important;
    font-weight: var(--jui-font-weight-semibold) !important;
  }

  .jui\:\[\&_h2\]\:\[font-weight\:750\] h2 {
    font-weight: 750 !important;
  }

  .jui\:\[\&_h2\]\:\[letter-spacing\:0\.06em\] h2 {
    letter-spacing: .06em !important;
  }

  .jui\:\[\&_h2\]\:\[letter-spacing\:0\.08em\] h2 {
    letter-spacing: .08em !important;
  }

  .jui\:\[\&_h2\]\:\[color\:\#191c1e\] h2 {
    color: #191c1e !important;
  }

  .jui\:\[\&_h2\]\:\[color\:\#64748b\] h2 {
    color: #64748b !important;
  }

  .jui\:\[\&_h2\]\:\[color\:var\(--brand-deep\)\] h2 {
    color: var(--brand-deep) !important;
  }

  .jui\:\[\&_h2\]\:\[color\:var\(--color-on-surface-variant\,_\#64748b\)\] h2 {
    color: var(--color-on-surface-variant, #64748b) !important;
  }

  .jui\:\[\&_h2\]\:\[color\:var\(--color-text-heading\,_var\(--color-on-surface\)\)\] h2 {
    color: var(--color-text-heading, var(--color-on-surface)) !important;
  }

  .jui\:\[\&_h2\]\:\[color\:var\(--ui-muted\)\] h2 {
    color: var(--ui-muted) !important;
  }

  .jui\:\[\&_h2\]\:\[color\:var\(--ui-text\)\] h2 {
    color: var(--ui-text) !important;
  }

  .jui\:\[\&_h2\]\:\[text-transform\:uppercase\] h2 {
    text-transform: uppercase !important;
  }

  .jui\:\[\&_h3\]\:\[margin\:0\.55rem_0_0\.2rem\] h3 {
    margin: .55rem 0 .2rem !important;
  }

  .jui\:\[\&_h3\]\:\[margin\:0_0_0\.25rem\] h3 {
    margin: 0 0 .25rem !important;
  }

  .jui\:\[\&_h3\]\:\[margin\:0_0_0\.35rem\] h3 {
    margin: 0 0 .35rem !important;
  }

  .jui\:\[\&_h3\]\:\[margin\:0_0_0\.75rem\] h3 {
    margin: 0 0 .75rem !important;
  }

  .jui\:\[\&_h3\]\:\[margin\:1\.1rem_0_0\.65rem\] h3 {
    margin: 1.1rem 0 .65rem !important;
  }

  .jui\:\[\&_h3\]\:m-0 h3 {
    margin: 0 !important;
  }

  .jui\:\[\&_h3\]\:\[font-size\:0\.9rem\] h3 {
    font-size: .9rem !important;
  }

  .jui\:\[\&_h3\]\:\[font-size\:0\.82rem\] h3 {
    font-size: .82rem !important;
  }

  .jui\:\[\&_h3\]\:\[font-size\:1\.1rem\] h3 {
    font-size: 1.1rem !important;
  }

  .jui\:\[\&_h3\]\:\[font-size\:1\.05rem\] h3 {
    font-size: 1.05rem !important;
  }

  .jui\:\[\&_h3\]\:\[font-size\:1rem\] h3 {
    font-size: 1rem !important;
  }

  .jui\:\[\&_h3\]\:font-bold h3 {
    --tw-font-weight: var(--jui-font-weight-bold) !important;
    font-weight: var(--jui-font-weight-bold) !important;
  }

  .jui\:\[\&_h3\]\:font-semibold h3 {
    --tw-font-weight: var(--jui-font-weight-semibold) !important;
    font-weight: var(--jui-font-weight-semibold) !important;
  }

  .jui\:\[\&_h3\]\:\[letter-spacing\:0\.04em\] h3 {
    letter-spacing: .04em !important;
  }

  .jui\:\[\&_h3\]\:\[color\:\#191c1e\] h3 {
    color: #191c1e !important;
  }

  .jui\:\[\&_h3\]\:\[color\:\#64748b\] h3 {
    color: #64748b !important;
  }

  .jui\:\[\&_h3\]\:\[text-transform\:uppercase\] h3 {
    text-transform: uppercase !important;
  }

  .jui\:\[\&_h4\]\:\[margin\:0_0_0\.75rem\] h4 {
    margin: 0 0 .75rem !important;
  }

  .jui\:\[\&_h4\]\:m-0 h4 {
    margin: 0 !important;
  }

  .jui\:\[\&_h4\]\:\[font-size\:0\.92rem\] h4 {
    font-size: .92rem !important;
  }

  .jui\:\[\&_h4\]\:\[font-size\:18px\] h4 {
    font-size: 18px !important;
  }

  .jui\:\[\&_h4\]\:\[line-height\:1\.4\] h4 {
    line-height: 1.4 !important;
  }

  .jui\:\[\&_h4\]\:font-bold h4 {
    --tw-font-weight: var(--jui-font-weight-bold) !important;
    font-weight: var(--jui-font-weight-bold) !important;
  }

  .jui\:\[\&_h4\]\:font-semibold h4 {
    --tw-font-weight: var(--jui-font-weight-semibold) !important;
    font-weight: var(--jui-font-weight-semibold) !important;
  }

  .jui\:\[\&_h4\]\:\[letter-spacing\:0\.01em\] h4 {
    letter-spacing: .01em !important;
  }

  .jui\:\[\&_h4\]\:\[color\:var\(--ui-text\)\] h4 {
    color: var(--ui-text) !important;
  }

  .jui\:\[\&_i\]\:block i {
    display: block !important;
  }

  .jui\:\[\&_i\]\:\[height\:0\.45rem\] i {
    height: .45rem !important;
  }

  .jui\:\[\&_i\]\:\[height\:100\%\] i, .jui\:\[\&_i\]\:h-full i {
    height: 100% !important;
  }

  .jui\:\[\&_i\]\:\[width\:0\.45rem\] i {
    width: .45rem !important;
  }

  .jui\:\[\&_i\]\:\[border-radius\:999px\] i {
    border-radius: 999px !important;
  }

  .jui\:\[\&_i\]\:\[background\:\#6366f1\] i {
    background: #6366f1 !important;
  }

  .jui\:\[\&_i\]\:\[background\:currentColor\] i {
    background: currentColor !important;
  }

  .jui\:\[\&_i\]\:\[background\:linear-gradient\(90deg\,_var\(--brand\)\,_\#6d62e8\)\] i {
    background: linear-gradient(90deg, var(--brand), #6d62e8) !important;
  }

  .jui\:\[\&_i\]\:\[background\:var\(--brand\)\] i {
    background: var(--brand) !important;
  }

  .jui\:\[\&_img\]\:absolute img {
    position: absolute !important;
  }

  .jui\:\[\&_img\]\:\[inset\:0\] img {
    inset: 0 !important;
  }

  .jui\:\[\&_img\]\:\[height\:2\.4rem\] img {
    height: 2.4rem !important;
  }

  .jui\:\[\&_img\]\:\[height\:100\%\] img, .jui\:\[\&_img\]\:h-full img {
    height: 100% !important;
  }

  .jui\:\[\&_img\]\:\[width\:2\.4rem\] img {
    width: 2.4rem !important;
  }

  .jui\:\[\&_img\]\:\[width\:100\%\] img, .jui\:\[\&_img\]\:w-full img {
    width: 100% !important;
  }

  .jui\:\[\&_img\]\:\[flex-shrink\:0\] img {
    flex-shrink: 0 !important;
  }

  .jui\:\[\&_img\]\:\[border-radius\:0\.7rem\] img {
    border-radius: .7rem !important;
  }

  .jui\:\[\&_img\]\:\[object-fit\:contain\] img {
    object-fit: contain !important;
  }

  .jui\:\[\&_img\]\:\[object-fit\:cover\] img {
    object-fit: cover !important;
  }

  .jui\:\[\&_img\]\:\[padding\:1\.2rem_1\.2rem_3\.2rem\] img {
    padding: 1.2rem 1.2rem 3.2rem !important;
  }

  .jui\:\[\&_input\]\:\[margin-top\:0\.2rem\] input {
    margin-top: .2rem !important;
  }

  .jui\:\[\&_input\]\:\[height\:2\.5rem\] input {
    height: 2.5rem !important;
  }

  .jui\:\[\&_input\]\:\[height\:2\.45rem\] input {
    height: 2.45rem !important;
  }

  .jui\:\[\&_input\]\:\[width\:8\.5rem\] input {
    width: 8.5rem !important;
  }

  .jui\:\[\&_input\]\:min-w-0 input {
    min-width: 0 !important;
  }

  .jui\:\[\&_input\]\:\[flex\:1\] input {
    flex: 1 !important;
  }

  .jui\:\[\&_input\]\:\[border-radius\:0\.7rem\] input {
    border-radius: .7rem !important;
  }

  .jui\:\[\&_input\]\:border-0 input {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .jui\:\[\&_input\]\:bg-transparent input {
    background-color: #0000 !important;
  }

  .jui\:\[\&_input\]\:\[padding\:0_0\.7rem\] input {
    padding: 0 .7rem !important;
  }

  .jui\:\[\&_input\]\:\[padding\:0_0\.75rem_0_2\.1rem\] input {
    padding: 0 .75rem 0 2.1rem !important;
  }

  .jui\:\[\&_input\]\:\[font-size\:0\.95rem\] input {
    font-size: .95rem !important;
  }

  .jui\:\[\&_input\]\:\[color\:\#191c1e\] input {
    color: #191c1e !important;
  }

  .jui\:\[\&_input\]\:\[outline\:none\] input {
    outline: none !important;
  }

  .jui\:\[\&_input\]\:\[background\:\#fff\] input {
    background: #fff !important;
  }

  .jui\:\[\&_input\]\:\[border\:1px_solid_\#dbe3ee\] input {
    border: 1px solid #dbe3ee !important;
  }

  .jui\:\[\&_input\]\:\[font\:inherit\] input {
    font: inherit !important;
  }

  .jui\:\[\&_li\]\:flex li {
    display: flex !important;
  }

  .jui\:\[\&_li\]\:grid li {
    display: grid !important;
  }

  .jui\:\[\&_li\]\:min-w-0 li {
    min-width: 0 !important;
  }

  .jui\:\[\&_li\]\:\[grid-template-columns\:1fr_auto\] li {
    grid-template-columns: 1fr auto !important;
  }

  .jui\:\[\&_li\]\:\[grid-template-columns\:2\.2rem_1fr_auto\] li {
    grid-template-columns: 2.2rem 1fr auto !important;
  }

  .jui\:\[\&_li\]\:\[grid-template-columns\:2\.4rem_1fr\] li {
    grid-template-columns: 2.4rem 1fr !important;
  }

  .jui\:\[\&_li\]\:\[grid-template-columns\:2\.4rem_1fr_auto\] li {
    grid-template-columns: 2.4rem 1fr auto !important;
  }

  .jui\:\[\&_li\]\:\[grid-template-columns\:auto_1fr_auto\] li {
    grid-template-columns: auto 1fr auto !important;
  }

  .jui\:\[\&_li\]\:\[align-items\:baseline\] li {
    align-items: baseline !important;
  }

  .jui\:\[\&_li\]\:\[align-items\:start\] li {
    align-items: start !important;
  }

  .jui\:\[\&_li\]\:items-center li {
    align-items: center !important;
  }

  .jui\:\[\&_li\]\:justify-between li {
    justify-content: space-between !important;
  }

  .jui\:\[\&_li\]\:\[gap\:0\.7rem\] li {
    gap: .7rem !important;
  }

  .jui\:\[\&_li\]\:\[gap\:0\.35rem\] li {
    gap: .35rem !important;
  }

  .jui\:\[\&_li\]\:\[gap\:0\.35rem_0\.65rem\] li {
    gap: .35rem .65rem !important;
  }

  .jui\:\[\&_li\]\:\[gap\:0\.75rem\] li {
    gap: .75rem !important;
  }

  .jui\:\[\&_li\]\:\[border-radius\:0\.85rem\] li {
    border-radius: .85rem !important;
  }

  .jui\:\[\&_li\]\:border-0 li {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .jui\:\[\&_li\]\:bg-transparent li {
    background-color: #0000 !important;
  }

  .jui\:\[\&_li\]\:\[padding\:0\.7rem_0\] li {
    padding: .7rem 0 !important;
  }

  .jui\:\[\&_li\]\:\[padding\:0\.55rem_0\.65rem\] li {
    padding: .55rem .65rem !important;
  }

  .jui\:\[\&_li\]\:\[padding\:0\.75rem_0\.85rem\] li {
    padding: .75rem .85rem !important;
  }

  .jui\:\[\&_li\]\:\[padding\:0\.85rem_1rem\] li {
    padding: .85rem 1rem !important;
  }

  .jui\:\[\&_li\]\:p-0 li {
    padding: 0 !important;
  }

  .jui\:\[\&_li\]\:\[font-size\:0\.75rem\] li {
    font-size: .75rem !important;
  }

  .jui\:\[\&_li\]\:\[font-size\:0\.85rem\] li {
    font-size: .85rem !important;
  }

  .jui\:\[\&_li\]\:\[font-weight\:650\] li {
    font-weight: 650 !important;
  }

  .jui\:\[\&_li\]\:\[color\:\#191c1e\] li {
    color: #191c1e !important;
  }

  .jui\:\[\&_li\]\:\[color\:var\(--color-text-secondary\,_var\(--color-on-surface-variant\)\)\] li {
    color: var(--color-text-secondary, var(--color-on-surface-variant)) !important;
  }

  .jui\:\[\&_li\]\:\[background\:\#fff\] li {
    background: #fff !important;
  }

  .jui\:\[\&_li\]\:\[background\:var\(--color-surface-container\)\] li {
    background: var(--color-surface-container) !important;
  }

  .jui\:\[\&_li\]\:\[border-bottom\:1px_solid_\#e2e8f0\] li {
    border-bottom: 1px solid #e2e8f0 !important;
  }

  .jui\:\[\&_li\]\:\[border-top\:1px_solid_\#eef2f6\] li {
    border-top: 1px solid #eef2f6 !important;
  }

  .jui\:\[\&_li\]\:\[border\:1px_solid_\#e2e8f0\] li {
    border: 1px solid #e2e8f0 !important;
  }

  .jui\:\[\&_li_\+_li\]\:\[border-top\:1px_solid_var\(--color-border\,_var\(--color-outline-variant\)\)\] li + li {
    border-top: 1px solid var(--color-border, var(--color-outline-variant)) !important;
  }

  .jui\:\[\&_li_div\:first-child\]\:\[grid-column\:1_\/_-1\] li div:first-child {
    grid-column: 1 / -1 !important;
  }

  .jui\:\[\&_li_div\:first-child\]\:flex li div:first-child {
    display: flex !important;
  }

  .jui\:\[\&_li_div\:first-child\]\:justify-between li div:first-child {
    justify-content: space-between !important;
  }

  .jui\:\[\&_li_div\:first-child\]\:\[font-size\:0\.82rem\] li div:first-child {
    font-size: .82rem !important;
  }

  .jui\:\[\&_li_span\]\:\[font-weight\:800\] li span {
    font-weight: 800 !important;
  }

  .jui\:\[\&_li_span\]\:\[color\:var\(--color-text-heading\,_var\(--color-on-surface\)\)\] li span {
    color: var(--color-text-heading, var(--color-on-surface)) !important;
  }

  .jui\:\[\&_li\:\:before\]\:\[margin-top\:0\.35rem\] li:before {
    margin-top: .35rem !important;
  }

  .jui\:\[\&_li\:\:before\]\:\[margin-right\:0\.4rem\] li:before {
    margin-right: .4rem !important;
  }

  .jui\:\[\&_li\:\:before\]\:\[margin-right\:0\.35rem\] li:before {
    margin-right: .35rem !important;
  }

  .jui\:\[\&_li\:\:before\]\:\[display\:inline-block\] li:before {
    display: inline-block !important;
  }

  .jui\:\[\&_li\:\:before\]\:\[height\:0\.45rem\] li:before {
    height: .45rem !important;
  }

  .jui\:\[\&_li\:\:before\]\:\[height\:0\.55rem\] li:before {
    height: .55rem !important;
  }

  .jui\:\[\&_li\:\:before\]\:\[height\:0\.65rem\] li:before {
    height: .65rem !important;
  }

  .jui\:\[\&_li\:\:before\]\:\[width\:0\.45rem\] li:before {
    width: .45rem !important;
  }

  .jui\:\[\&_li\:\:before\]\:\[width\:0\.55rem\] li:before {
    width: .55rem !important;
  }

  .jui\:\[\&_li\:\:before\]\:\[width\:0\.65rem\] li:before {
    width: .65rem !important;
  }

  .jui\:\[\&_li\:\:before\]\:\[flex-shrink\:0\] li:before {
    flex-shrink: 0 !important;
  }

  .jui\:\[\&_li\:\:before\]\:\[border-radius\:999px\] li:before {
    border-radius: 999px !important;
  }

  .jui\:\[\&_li\:\:before\]\:font-bold li:before {
    --tw-font-weight: var(--jui-font-weight-bold) !important;
    font-weight: var(--jui-font-weight-bold) !important;
  }

  .jui\:\[\&_li\:\:before\]\:\[color\:\#16a34a\] li:before {
    color: #16a34a !important;
  }

  .jui\:\[\&_li\:\:before\]\:\[color\:var\(--brand\)\] li:before {
    color: var(--brand) !important;
  }

  .jui\:\[\&_li\:\:before\]\:\[content\:\'\'\] li:before {
    content: "" !important;
  }

  .jui\:\[\&_li\:\:before\]\:\[content\:\'✓_\'\] li:before {
    content: "✓ " !important;
  }

  .jui\:\[\&_li\:\:before\]\:\[background\:\#94a3b8\] li:before {
    background: #94a3b8 !important;
  }

  .jui\:\[\&_li\:\:before\]\:\[background\:\#e2e8f0\] li:before {
    background: #e2e8f0 !important;
  }

  .jui\:\[\&_li\:\:before\]\:\[background\:var\(--brand\)\] li:before {
    background: var(--brand) !important;
  }

  .jui\:\[\&_li\:first-child\]\:\[padding-top\:0\] li:first-child {
    padding-top: 0 !important;
  }

  .jui\:\[\&_li\:first-child\]\:\[border-top\:0\] li:first-child {
    border-top: 0 !important;
  }

  .jui\:\[\&_li\:last-child\]\:\[border-bottom\:0\] li:last-child {
    border-bottom: 0 !important;
  }

  .jui\:\[\&_li\[data-kind\=\'corporate\'\]\:\:before\]\:\[background\:\#16a34a\] li[data-kind="corporate"]:before {
    background: #16a34a !important;
  }

  .jui\:\[\&_li\[data-kind\=\'family\'\]\:\:before\]\:\[background\:\#ea580c\] li[data-kind="family"]:before {
    background: #ea580c !important;
  }

  .jui\:\[\&_li\[data-kind\=\'individual\'\]\:\:before\]\:\[background\:\#7c3aed\] li[data-kind="individual"]:before {
    background: #7c3aed !important;
  }

  .jui\:\[\&_li\[data-kind\=\'student\'\]\:\:before\]\:\[background\:\#2563eb\] li[data-kind="student"]:before {
    background: #2563eb !important;
  }

  .jui\:\[\&_li\[data-level\=\'1\'\]\:\:before\]\:\[background\:\#6366f1\] li[data-level="1"]:before {
    background: #6366f1 !important;
  }

  .jui\:\[\&_li\[data-level\=\'2\'\]\:\:before\]\:\[background\:\#22c55e\] li[data-level="2"]:before {
    background: #22c55e !important;
  }

  .jui\:\[\&_li\[data-level\=\'3\'\]\:\:before\]\:\[background\:\#f97316\] li[data-level="3"]:before {
    background: #f97316 !important;
  }

  .jui\:\[\&_li\[data-level\=\'4\'\]\:\:before\]\:\[background\:\#3b82f6\] li[data-level="4"]:before {
    background: #3b82f6 !important;
  }

  .jui\:\[\&_li\[data-level\=\'5\'\]\:\:before\]\:\[background\:\#ec4899\] li[data-level="5"]:before {
    background: #ec4899 !important;
  }

  .jui\:\[\&_li\[data-tone\=\'blue\'\]\]\:\[color\:var\(--color-pastel-blue-ink\,_\#1d4ed8\)\] li[data-tone="blue"] {
    color: var(--color-pastel-blue-ink, #1d4ed8) !important;
  }

  .jui\:\[\&_li\[data-tone\=\'blue\'\]\]\:\[background\:var\(--color-pastel-blue\,_\#dbeafe\)\] li[data-tone="blue"] {
    background: var(--color-pastel-blue, #dbeafe) !important;
  }

  .jui\:\[\&_li\[data-tone\=\'green\'\]\]\:\[color\:var\(--color-pastel-green-ink\,_\#047857\)\] li[data-tone="green"] {
    color: var(--color-pastel-green-ink, #047857) !important;
  }

  .jui\:\[\&_li\[data-tone\=\'green\'\]\]\:\[background\:var\(--color-pastel-green\,_\#d1fae5\)\] li[data-tone="green"] {
    background: var(--color-pastel-green, #d1fae5) !important;
  }

  .jui\:\[\&_li\[data-tone\=\'orange\'\]\]\:\[color\:var\(--color-pastel-orange-ink\,_\#c2410c\)\] li[data-tone="orange"] {
    color: var(--color-pastel-orange-ink, #c2410c) !important;
  }

  .jui\:\[\&_li\[data-tone\=\'orange\'\]\]\:\[background\:var\(--color-pastel-orange\,_\#ffedd5\)\] li[data-tone="orange"] {
    background: var(--color-pastel-orange, #ffedd5) !important;
  }

  .jui\:\[\&_li\[data-tone\=\'purple\'\]\]\:\[color\:var\(--color-pastel-purple-ink\,_\#6d28d9\)\] li[data-tone="purple"] {
    color: var(--color-pastel-purple-ink, #6d28d9) !important;
  }

  .jui\:\[\&_li\[data-tone\=\'purple\'\]\]\:\[background\:var\(--color-pastel-purple\,_\#ede9fe\)\] li[data-tone="purple"] {
    background: var(--color-pastel-purple, #ede9fe) !important;
  }

  .jui\:\[\&_p\]\:\[margin\:0\.1rem_0_0\] p {
    margin: .1rem 0 0 !important;
  }

  .jui\:\[\&_p\]\:\[margin\:0\.2rem_0_0\] p {
    margin: .2rem 0 0 !important;
  }

  .jui\:\[\&_p\]\:\[margin\:0\.12rem_0_0\.35rem\] p {
    margin: .12rem 0 .35rem !important;
  }

  .jui\:\[\&_p\]\:\[margin\:0\.12rem_0_0\] p {
    margin: .12rem 0 0 !important;
  }

  .jui\:\[\&_p\]\:\[margin\:0\.15rem_0_0\] p {
    margin: .15rem 0 0 !important;
  }

  .jui\:\[\&_p\]\:\[margin\:0\.25rem_0_0\.45rem\] p {
    margin: .25rem 0 .45rem !important;
  }

  .jui\:\[\&_p\]\:\[margin\:0\.25rem_0_1rem\] p {
    margin: .25rem 0 1rem !important;
  }

  .jui\:\[\&_p\]\:\[margin\:0\.45rem_0_0\.75rem\] p {
    margin: .45rem 0 .75rem !important;
  }

  .jui\:\[\&_p\]\:\[margin\:0_0_0\.7rem\] p {
    margin: 0 0 .7rem !important;
  }

  .jui\:\[\&_p\]\:m-0 p {
    margin: 0 !important;
  }

  .jui\:\[\&_p\]\:\[margin-top\:0\.2rem\] p {
    margin-top: .2rem !important;
  }

  .jui\:\[\&_p\]\:flex p {
    display: flex !important;
  }

  .jui\:\[\&_p\]\:items-center p {
    align-items: center !important;
  }

  .jui\:\[\&_p\]\:\[gap\:0\.3rem\] p {
    gap: .3rem !important;
  }

  .jui\:\[\&_p\]\:\[font-size\:0\.8rem\] p {
    font-size: .8rem !important;
  }

  .jui\:\[\&_p\]\:\[font-size\:0\.75rem\] p {
    font-size: .75rem !important;
  }

  .jui\:\[\&_p\]\:\[font-size\:0\.78rem\] p {
    font-size: .78rem !important;
  }

  .jui\:\[\&_p\]\:\[font-size\:0\.82rem\] p {
    font-size: .82rem !important;
  }

  .jui\:\[\&_p\]\:\[font-size\:0\.85rem\] p {
    font-size: .85rem !important;
  }

  .jui\:\[\&_p\]\:\[font-size\:0\.86rem\] p {
    font-size: .86rem !important;
  }

  .jui\:\[\&_p\]\:\[font-size\:0\.88rem\] p {
    font-size: .88rem !important;
  }

  .jui\:\[\&_p\]\:\[font-size\:0\.92rem\] p {
    font-size: .92rem !important;
  }

  .jui\:\[\&_p\]\:\[font-size\:0\.95rem\] p {
    font-size: .95rem !important;
  }

  .jui\:\[\&_p\]\:\[line-height\:1\.4\] p {
    line-height: 1.4 !important;
  }

  .jui\:\[\&_p\]\:\[line-height\:1\.5\] p {
    line-height: 1.5 !important;
  }

  .jui\:\[\&_p\]\:\[line-height\:1\.45\] p {
    line-height: 1.45 !important;
  }

  .jui\:\[\&_p\]\:\[line-height\:1\.65\] p {
    line-height: 1.65 !important;
  }

  .jui\:\[\&_p\]\:font-bold p {
    --tw-font-weight: var(--jui-font-weight-bold) !important;
    font-weight: var(--jui-font-weight-bold) !important;
  }

  .jui\:\[\&_p\]\:\[overflow-wrap\:anywhere\] p {
    overflow-wrap: anywhere !important;
  }

  .jui\:\[\&_p\]\:\[color\:\#191c1e\] p {
    color: #191c1e !important;
  }

  .jui\:\[\&_p\]\:\[color\:\#64748b\] p {
    color: #64748b !important;
  }

  .jui\:\[\&_p\]\:\[color\:\#464555\] p {
    color: #464555 !important;
  }

  .jui\:\[\&_p\]\:\[color\:\#475569\] p {
    color: #475569 !important;
  }

  .jui\:\[\&_p\]\:\[color\:var\(--brand\)\] p {
    color: var(--brand) !important;
  }

  .jui\:\[\&_p\]\:\[color\:var\(--color-on-surface-variant\,_\#64748b\)\] p {
    color: var(--color-on-surface-variant, #64748b) !important;
  }

  .jui\:\[\&_p\]\:\[color\:var\(--ui-muted\,\#64748b\)\] p {
    color: var(--ui-muted, #64748b) !important;
  }

  .jui\:\[\&_p\]\:\[opacity\:0\.9\] p {
    opacity: .9 !important;
  }

  .jui\:\[\&_p\[data-kind\=\'industry\'\]\]\:\[color\:\#2563eb\] p[data-kind="industry"] {
    color: #2563eb !important;
  }

  .jui\:\[\&_select\]\:absolute select {
    position: absolute !important;
  }

  .jui\:\[\&_select\]\:inset-0 select {
    inset: 0 !important;
  }

  .jui\:\[\&_select\]\:\[height\:2\.45rem\] select {
    height: 2.45rem !important;
  }

  .jui\:\[\&_select\]\:cursor-pointer select {
    cursor: pointer !important;
  }

  .jui\:\[\&_select\]\:\[border-radius\:0\.7rem\] select {
    border-radius: .7rem !important;
  }

  .jui\:\[\&_select\]\:\[padding\:0_0\.75rem\] select {
    padding: 0 .75rem !important;
  }

  .jui\:\[\&_select\]\:\[opacity\:0\] select {
    opacity: 0 !important;
  }

  .jui\:\[\&_select\]\:\[background\:\#fff\] select {
    background: #fff !important;
  }

  .jui\:\[\&_select\]\:\[border\:1px_solid_\#dbe3ee\] select {
    border: 1px solid #dbe3ee !important;
  }

  .jui\:\[\&_small\]\:\[color\:\#64748b\] small {
    color: #64748b !important;
  }

  .jui\:\[\&_span\]\:pointer-events-none span {
    pointer-events: none !important;
  }

  .jui\:\[\&_span\]\:relative span {
    position: relative !important;
  }

  .jui\:\[\&_span\]\:block span {
    display: block !important;
  }

  .jui\:\[\&_span\]\:flex span {
    display: flex !important;
  }

  .jui\:\[\&_span\]\:grid span {
    display: grid !important;
  }

  .jui\:\[\&_span\]\:inline-flex span {
    display: inline-flex !important;
  }

  .jui\:\[\&_span\]\:\[height\:0\.45rem\] span {
    height: .45rem !important;
  }

  .jui\:\[\&_span\]\:\[height\:2\.2rem\] span {
    height: 2.2rem !important;
  }

  .jui\:\[\&_span\]\:\[height\:2\.6rem\] span {
    height: 2.6rem !important;
  }

  .jui\:\[\&_span\]\:\[height\:2\.35rem\] span {
    height: 2.35rem !important;
  }

  .jui\:\[\&_span\]\:\[height\:5\.2rem\] span {
    height: 5.2rem !important;
  }

  .jui\:\[\&_span\]\:\[min-height\:2\.7rem\] span {
    min-height: 2.7rem !important;
  }

  .jui\:\[\&_span\]\:\[width\:2\.2rem\] span {
    width: 2.2rem !important;
  }

  .jui\:\[\&_span\]\:\[width\:2\.6rem\] span {
    width: 2.6rem !important;
  }

  .jui\:\[\&_span\]\:\[width\:2\.35rem\] span {
    width: 2.35rem !important;
  }

  .jui\:\[\&_span\]\:\[width\:5\.2rem\] span {
    width: 5.2rem !important;
  }

  .jui\:\[\&_span\]\:\[flex\:1\] span {
    flex: 1 !important;
  }

  .jui\:\[\&_span\]\:flex-wrap span {
    flex-wrap: wrap !important;
  }

  .jui\:\[\&_span\]\:\[place-items\:center\] span {
    place-items: center !important;
  }

  .jui\:\[\&_span\]\:items-center span {
    align-items: center !important;
  }

  .jui\:\[\&_span\]\:justify-center span {
    justify-content: center !important;
  }

  .jui\:\[\&_span\]\:\[gap\:0\.4rem\] span {
    gap: .4rem !important;
  }

  .jui\:\[\&_span\]\:\[gap\:0\.25rem\] span {
    gap: .25rem !important;
  }

  .jui\:\[\&_span\]\:overflow-hidden span {
    overflow: hidden !important;
  }

  .jui\:\[\&_span\]\:\[border-radius\:0\.8rem\] span {
    border-radius: .8rem !important;
  }

  .jui\:\[\&_span\]\:\[border-radius\:0\.75rem\] span {
    border-radius: .75rem !important;
  }

  .jui\:\[\&_span\]\:\[border-radius\:999px\] span {
    border-radius: 999px !important;
  }

  .jui\:\[\&_span\]\:\[padding\:0\.4rem\] span {
    padding: .4rem !important;
  }

  .jui\:\[\&_span\]\:\[padding\:0\.18rem_0\.5rem\] span {
    padding: .18rem .5rem !important;
  }

  .jui\:\[\&_span\]\:text-center span {
    text-align: center !important;
  }

  .jui\:\[\&_span\]\:text-xs span {
    font-size: var(--jui-text-xs) !important;
    line-height: var(--tw-leading, var(--jui-text-xs--line-height)) !important;
  }

  .jui\:\[\&_span\]\:\[font-size\:0\.7rem\] span {
    font-size: .7rem !important;
  }

  .jui\:\[\&_span\]\:\[font-size\:0\.8rem\] span {
    font-size: .8rem !important;
  }

  .jui\:\[\&_span\]\:\[font-size\:0\.68rem\] span {
    font-size: .68rem !important;
  }

  .jui\:\[\&_span\]\:\[font-size\:0\.72rem\] span {
    font-size: .72rem !important;
  }

  .jui\:\[\&_span\]\:\[font-size\:0\.75rem\] span {
    font-size: .75rem !important;
  }

  .jui\:\[\&_span\]\:\[font-size\:0\.78rem\] span {
    font-size: .78rem !important;
  }

  .jui\:\[\&_span\]\:\[font-size\:0\.82rem\] span {
    font-size: .82rem !important;
  }

  .jui\:\[\&_span\]\:\[font-size\:0\.88rem\] span {
    font-size: .88rem !important;
  }

  .jui\:\[\&_span\]\:\[font-size\:1rem\] span {
    font-size: 1rem !important;
  }

  .jui\:\[\&_span\]\:font-bold span {
    --tw-font-weight: var(--jui-font-weight-bold) !important;
    font-weight: var(--jui-font-weight-bold) !important;
  }

  .jui\:\[\&_span\]\:\[font-weight\:650\] span {
    font-weight: 650 !important;
  }

  .jui\:\[\&_span\]\:\[font-weight\:700\] span {
    font-weight: 700 !important;
  }

  .jui\:\[\&_span\]\:\[font-weight\:750\] span {
    font-weight: 750 !important;
  }

  .jui\:\[\&_span\]\:\[letter-spacing\:0\.04em\] span {
    letter-spacing: .04em !important;
  }

  .jui\:\[\&_span\]\:\[letter-spacing\:0\.06em\] span {
    letter-spacing: .06em !important;
  }

  .jui\:\[\&_span\]\:\[color\:\#94a3b8\] span {
    color: #94a3b8 !important;
  }

  .jui\:\[\&_span\]\:\[color\:\#191c1e\] span {
    color: #191c1e !important;
  }

  .jui\:\[\&_span\]\:\[color\:\#64748b\] span {
    color: #64748b !important;
  }

  .jui\:\[\&_span\]\:\[color\:\#464555\] span {
    color: #464555 !important;
  }

  .jui\:\[\&_span\]\:\[color\:\#777587\] span {
    color: #777587 !important;
  }

  .jui\:\[\&_span\]\:\[color\:var\(--brand-deep\)\] span {
    color: var(--brand-deep) !important;
  }

  .jui\:\[\&_span\]\:\[color\:var\(--ui-muted\,\#94a3b8\)\] span {
    color: var(--ui-muted, #94a3b8) !important;
  }

  .jui\:\[\&_span\]\:\[text-transform\:uppercase\] span {
    text-transform: uppercase !important;
  }

  .jui\:\[\&_span\]\:not-italic span {
    font-style: normal !important;
  }

  .jui\:\[\&_span\]\:no-underline span {
    text-decoration-line: none !important;
  }

  .jui\:\[\&_span\]\:\[background\:\#dbe1ff\] span {
    background: #dbe1ff !important;
  }

  .jui\:\[\&_span\]\:\[background\:\#e2e8f0\] span {
    background: #e2e8f0 !important;
  }

  .jui\:\[\&_span\]\:\[background\:\#f1f5f9\] span {
    background: #f1f5f9 !important;
  }

  .jui\:\[\&_span\]\:\[background\:\#fff\] span {
    background: #fff !important;
  }

  .jui\:\[\&_span\]\:\[background\:color-mix\(in_srgb\,_var\(--card\,_\#fff\)_72\%\,_transparent\)\] span {
    background: var(--card, #fff) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&_span\]\:\[background\:color-mix\(in_srgb\,_var\(--card\,_\#fff\)_72\%\,_transparent\)\] span {
      background: color-mix(in srgb, var(--card, #fff) 72%, transparent) !important;
    }
  }

  .jui\:\[\&_span\]\:\[border\:1px_solid_\#e2e8f0\] span {
    border: 1px solid #e2e8f0 !important;
  }

  .jui\:\[\&_span\[data-tone\=\'blue\'\]\]\:\[color\:\#0051d5\] span[data-tone="blue"] {
    color: #0051d5 !important;
  }

  .jui\:\[\&_span\[data-tone\=\'blue\'\]\]\:\[background\:\#dbe1ff\] span[data-tone="blue"] {
    background: #dbe1ff !important;
  }

  .jui\:\[\&_span\[data-tone\=\'green\'\]\]\:\[color\:\#16a34a\] span[data-tone="green"] {
    color: #16a34a !important;
  }

  .jui\:\[\&_span\[data-tone\=\'green\'\]\]\:\[background\:color-mix\(in_srgb\,_\#16a34a_14\%\,_\#fff\)\] span[data-tone="green"] {
    background: #def2e6 !important;
  }

  .jui\:\[\&_span\[data-tone\=\'mint\'\]\]\:\[color\:\#059669\] span[data-tone="mint"] {
    color: #059669 !important;
  }

  .jui\:\[\&_span\[data-tone\=\'mint\'\]\]\:\[background\:\#ecfdf3\] span[data-tone="mint"] {
    background: #ecfdf3 !important;
  }

  .jui\:\[\&_span\[data-tone\=\'purple\'\]\]\:\[color\:var\(--brand-deep\)\] span[data-tone="purple"] {
    color: var(--brand-deep) !important;
  }

  .jui\:\[\&_span\[data-tone\=\'purple\'\]\]\:\[background\:color-mix\(in_srgb\,_var\(--brand-deep\)_12\%\,_\#fff\)\] span[data-tone="purple"] {
    background: var(--brand-deep) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&_span\[data-tone\=\'purple\'\]\]\:\[background\:color-mix\(in_srgb\,_var\(--brand-deep\)_12\%\,_\#fff\)\] span[data-tone="purple"] {
      background: color-mix(in srgb, var(--brand-deep) 12%, #fff) !important;
    }
  }

  .jui\:\[\&_strong\]\:\[margin\:0\.12rem_0_0\.05rem\] strong {
    margin: .12rem 0 .05rem !important;
  }

  .jui\:\[\&_strong\]\:\[margin\:0\.15rem_0\] strong {
    margin: .15rem 0 !important;
  }

  .jui\:\[\&_strong\]\:\[margin-top\:0\.2rem\] strong {
    margin-top: .2rem !important;
  }

  .jui\:\[\&_strong\]\:\[margin-top\:0\.4rem\] strong {
    margin-top: .4rem !important;
  }

  .jui\:\[\&_strong\]\:\[margin-top\:0\.25rem\] strong {
    margin-top: .25rem !important;
  }

  .jui\:\[\&_strong\]\:block strong {
    display: block !important;
  }

  .jui\:\[\&_strong\]\:inline-flex strong {
    display: inline-flex !important;
  }

  .jui\:\[\&_strong\]\:\[max-width\:100\%\] strong {
    max-width: 100% !important;
  }

  .jui\:\[\&_strong\]\:items-center strong {
    align-items: center !important;
  }

  .jui\:\[\&_strong\]\:\[gap\:0\.35rem\] strong {
    gap: .35rem !important;
  }

  .jui\:\[\&_strong\]\:overflow-hidden strong {
    overflow: hidden !important;
  }

  .jui\:\[\&_strong\]\:text-xl strong {
    font-size: var(--jui-text-xl) !important;
    line-height: var(--tw-leading, var(--jui-text-xl--line-height)) !important;
  }

  .jui\:\[\&_strong\]\:\[font-size\:0\.75rem\] strong {
    font-size: .75rem !important;
  }

  .jui\:\[\&_strong\]\:\[font-size\:0\.82rem\] strong {
    font-size: .82rem !important;
  }

  .jui\:\[\&_strong\]\:\[font-size\:0\.88rem\] strong {
    font-size: .88rem !important;
  }

  .jui\:\[\&_strong\]\:\[font-size\:0\.92rem\] strong {
    font-size: .92rem !important;
  }

  .jui\:\[\&_strong\]\:\[font-size\:0\.95rem\] strong {
    font-size: .95rem !important;
  }

  .jui\:\[\&_strong\]\:\[font-size\:0\.98rem\] strong {
    font-size: .98rem !important;
  }

  .jui\:\[\&_strong\]\:\[font-size\:1\.05rem\] strong {
    font-size: 1.05rem !important;
  }

  .jui\:\[\&_strong\]\:\[font-size\:1\.15rem\] strong {
    font-size: 1.15rem !important;
  }

  .jui\:\[\&_strong\]\:\[font-size\:1\.25rem\] strong {
    font-size: 1.25rem !important;
  }

  .jui\:\[\&_strong\]\:\[font-size\:1\.45rem\] strong {
    font-size: 1.45rem !important;
  }

  .jui\:\[\&_strong\]\:\[font-size\:1\.55rem\] strong {
    font-size: 1.55rem !important;
  }

  .jui\:\[\&_strong\]\:\[font-size\:1rem\] strong {
    font-size: 1rem !important;
  }

  .jui\:\[\&_strong\]\:\[font-size\:2rem\] strong {
    font-size: 2rem !important;
  }

  .jui\:\[\&_strong\]\:\[line-height\:1\.1\] strong {
    line-height: 1.1 !important;
  }

  .jui\:\[\&_strong\]\:font-bold strong {
    --tw-font-weight: var(--jui-font-weight-bold) !important;
    font-weight: var(--jui-font-weight-bold) !important;
  }

  .jui\:\[\&_strong\]\:\[font-weight\:650\] strong {
    font-weight: 650 !important;
  }

  .jui\:\[\&_strong\]\:\[font-weight\:750\] strong {
    font-weight: 750 !important;
  }

  .jui\:\[\&_strong\]\:\[font-weight\:800\] strong {
    font-weight: 800 !important;
  }

  .jui\:\[\&_strong\]\:\[letter-spacing\:-0\.03em\] strong {
    letter-spacing: -.03em !important;
  }

  .jui\:\[\&_strong\]\:\[letter-spacing\:0\.04em\] strong {
    letter-spacing: .04em !important;
  }

  .jui\:\[\&_strong\]\:\[text-overflow\:ellipsis\] strong {
    text-overflow: ellipsis !important;
  }

  .jui\:\[\&_strong\]\:whitespace-nowrap strong {
    white-space: nowrap !important;
  }

  .jui\:\[\&_strong\]\:\[color\:\#0f172a\] strong {
    color: #0f172a !important;
  }

  .jui\:\[\&_strong\]\:\[color\:\#1d4ed8\] strong {
    color: #1d4ed8 !important;
  }

  .jui\:\[\&_strong\]\:\[color\:\#191c1e\] strong {
    color: #191c1e !important;
  }

  .jui\:\[\&_strong\]\:\[color\:var\(--brand-deep\)\] strong {
    color: var(--brand-deep) !important;
  }

  .jui\:\[\&_strong\]\:\[color\:var\(--color-text-heading\,_var\(--color-on-surface\)\)\] strong {
    color: var(--color-text-heading, var(--color-on-surface)) !important;
  }

  .jui\:\[\&_strong\]\:\[color\:var\(--color-text-secondary\,_var\(--color-on-surface-variant\)\)\] strong {
    color: var(--color-text-secondary, var(--color-on-surface-variant)) !important;
  }

  .jui\:\[\&_strong\]\:\[text-transform\:uppercase\] strong {
    text-transform: uppercase !important;
  }

  .jui\:\[\&_strong_i\]\:\[height\:0\.5rem\] strong i {
    height: .5rem !important;
  }

  .jui\:\[\&_strong_i\]\:\[width\:0\.5rem\] strong i {
    width: .5rem !important;
  }

  .jui\:\[\&_strong_i\]\:\[border-radius\:999px\] strong i {
    border-radius: 999px !important;
  }

  .jui\:\[\&_strong_i\]\:\[background\:\#777587\] strong i {
    background: #777587 !important;
  }

  .jui\:\[\&_strong_i\.on\]\:\[background\:\#16a34a\] strong i.on {
    background: #16a34a !important;
  }

  .jui\:\[\&_strong\[data-status\=\'active\'\]\]\:\[border-radius\:999px\] strong[data-status="active"] {
    border-radius: 999px !important;
  }

  .jui\:\[\&_strong\[data-status\=\'active\'\]\]\:\[padding\:0\.15rem_0\.5rem\] strong[data-status="active"] {
    padding: .15rem .5rem !important;
  }

  .jui\:\[\&_strong\[data-status\=\'active\'\]\]\:\[font-size\:0\.75rem\] strong[data-status="active"] {
    font-size: .75rem !important;
  }

  .jui\:\[\&_strong\[data-status\=\'active\'\]\]\:\[color\:\#15803d\] strong[data-status="active"] {
    color: #15803d !important;
  }

  .jui\:\[\&_strong\[data-status\=\'active\'\]\]\:\[background\:\#dcfce7\] strong[data-status="active"] {
    background: #dcfce7 !important;
  }

  .jui\:\[\&_strong\[data-status\=\'expiring\'\]\]\:\[border-radius\:999px\] strong[data-status="expiring"] {
    border-radius: 999px !important;
  }

  .jui\:\[\&_strong\[data-status\=\'expiring\'\]\]\:\[padding\:0\.15rem_0\.5rem\] strong[data-status="expiring"] {
    padding: .15rem .5rem !important;
  }

  .jui\:\[\&_strong\[data-status\=\'expiring\'\]\]\:\[font-size\:0\.75rem\] strong[data-status="expiring"] {
    font-size: .75rem !important;
  }

  .jui\:\[\&_strong\[data-status\=\'expiring\'\]\]\:\[color\:\#c2410c\] strong[data-status="expiring"] {
    color: #c2410c !important;
  }

  .jui\:\[\&_strong\[data-status\=\'expiring\'\]\]\:\[background\:\#ffedd5\] strong[data-status="expiring"] {
    background: #ffedd5 !important;
  }

  .jui\:\[\&_strong\[data-status\=\'inactive\'\]\]\:\[border-radius\:999px\] strong[data-status="inactive"] {
    border-radius: 999px !important;
  }

  .jui\:\[\&_strong\[data-status\=\'inactive\'\]\]\:\[padding\:0\.15rem_0\.5rem\] strong[data-status="inactive"] {
    padding: .15rem .5rem !important;
  }

  .jui\:\[\&_strong\[data-status\=\'inactive\'\]\]\:\[font-size\:0\.75rem\] strong[data-status="inactive"] {
    font-size: .75rem !important;
  }

  .jui\:\[\&_strong\[data-status\=\'inactive\'\]\]\:\[color\:\#be123c\] strong[data-status="inactive"] {
    color: #be123c !important;
  }

  .jui\:\[\&_strong\[data-status\=\'inactive\'\]\]\:\[background\:\#ffe4e6\] strong[data-status="inactive"] {
    background: #ffe4e6 !important;
  }

  .jui\:\[\&_strong\[data-status\=\'lapsed\'\]\]\:\[border-radius\:999px\] strong[data-status="lapsed"] {
    border-radius: 999px !important;
  }

  .jui\:\[\&_strong\[data-status\=\'lapsed\'\]\]\:\[padding\:0\.15rem_0\.5rem\] strong[data-status="lapsed"] {
    padding: .15rem .5rem !important;
  }

  .jui\:\[\&_strong\[data-status\=\'lapsed\'\]\]\:\[font-size\:0\.75rem\] strong[data-status="lapsed"] {
    font-size: .75rem !important;
  }

  .jui\:\[\&_strong\[data-status\=\'lapsed\'\]\]\:\[color\:\#b91c1c\] strong[data-status="lapsed"] {
    color: #b91c1c !important;
  }

  .jui\:\[\&_strong\[data-status\=\'lapsed\'\]\]\:\[background\:\#fee2e2\] strong[data-status="lapsed"] {
    background: #fee2e2 !important;
  }

  .jui\:\[\&_strong\[data-status\=\'pending\'\]\]\:\[border-radius\:999px\] strong[data-status="pending"] {
    border-radius: 999px !important;
  }

  .jui\:\[\&_strong\[data-status\=\'pending\'\]\]\:\[padding\:0\.15rem_0\.5rem\] strong[data-status="pending"] {
    padding: .15rem .5rem !important;
  }

  .jui\:\[\&_strong\[data-status\=\'pending\'\]\]\:\[font-size\:0\.75rem\] strong[data-status="pending"] {
    font-size: .75rem !important;
  }

  .jui\:\[\&_strong\[data-status\=\'pending\'\]\]\:\[color\:\#1d4ed8\] strong[data-status="pending"] {
    color: #1d4ed8 !important;
  }

  .jui\:\[\&_strong\[data-status\=\'pending\'\]\]\:\[background\:\#dbeafe\] strong[data-status="pending"] {
    background: #dbeafe !important;
  }

  .jui\:\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none !important;
  }

  .jui\:\[\&_svg\]\:absolute svg {
    position: absolute !important;
  }

  .jui\:\[\&_svg\]\:\[top\:0\.7rem\] svg {
    top: .7rem !important;
  }

  .jui\:\[\&_svg\]\:\[right\:0\.55rem\] svg {
    right: .55rem !important;
  }

  .jui\:\[\&_svg\]\:\[left\:0\.7rem\] svg {
    left: .7rem !important;
  }

  .jui\:\[\&_svg\]\:block svg {
    display: block !important;
  }

  .jui\:\[\&_svg\]\:\[height\:7\.5rem\] svg {
    height: 7.5rem !important;
  }

  .jui\:\[\&_svg\]\:w-full svg {
    width: 100% !important;
  }

  .jui\:\[\&_svg\]\:\[color\:\#94a3b8\] svg {
    color: #94a3b8 !important;
  }

  .jui\:\[\&_table\]\:w-full table {
    width: 100% !important;
  }

  .jui\:\[\&_table\]\:\[border-collapse\:collapse\] table {
    border-collapse: collapse !important;
  }

  .jui\:\[\&_table\]\:text-xs table {
    font-size: var(--jui-text-xs) !important;
    line-height: var(--tw-leading, var(--jui-text-xs--line-height)) !important;
  }

  .jui\:\[\&_tbody_tr\:hover_td\]\:\[background\:\#f8fafc\] tbody tr:hover td {
    background: #f8fafc !important;
  }

  .jui\:\[\&_tbody_tr\:last-child_td\]\:\[border-bottom\:0\] tbody tr:last-child td {
    border-bottom: 0 !important;
  }

  .jui\:\[\&_tbody_tr\[data-selected\]_td\]\:\[background\:\#f0fdf4\] tbody tr[data-selected] td {
    background: #f0fdf4 !important;
  }

  .jui\:\[\&_td\]\:\[padding\:0\.55rem_0\.7rem\] td {
    padding: .55rem .7rem !important;
  }

  .jui\:\[\&_td\]\:\[padding\:0\.75rem_0\.45rem\] td {
    padding: .75rem .45rem !important;
  }

  .jui\:\[\&_td\]\:\[padding\:0\.85rem_0\.65rem\] td {
    padding: .85rem .65rem !important;
  }

  .jui\:\[\&_td\]\:p-2 td {
    padding: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:\[\&_td\]\:px-3 td {
    padding-inline: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:\[\&_td\]\:py-2\.5 td {
    padding-block: calc(var(--jui-spacing) * 2.5) !important;
  }

  .jui\:\[\&_td\]\:text-left td {
    text-align: left !important;
  }

  .jui\:\[\&_td\]\:\[vertical-align\:middle\] td {
    vertical-align: middle !important;
  }

  .jui\:\[\&_td\]\:\[font-size\:0\.86rem\] td {
    font-size: .86rem !important;
  }

  .jui\:\[\&_td\]\:break-words td {
    overflow-wrap: break-word !important;
  }

  .jui\:\[\&_td\]\:\[color\:\#334155\] td {
    color: #334155 !important;
  }

  .jui\:\[\&_td\]\:\[border-bottom\:1px_solid_\#e2e8f0\] td {
    border-bottom: 1px solid #e2e8f0 !important;
  }

  .jui\:\[\&_td\]\:\[border-bottom\:1px_solid_\#eef2f6\] td {
    border-bottom: 1px solid #eef2f6 !important;
  }

  .jui\:\[\&_td\]\:\[border-bottom\:1px_solid_\#f1f5f9\] td {
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .jui\:\[\&_td\:first-child\]\:\[width\:2\.2rem\] td:first-child {
    width: 2.2rem !important;
  }

  .jui\:\[\&_td\:last-child\]\:\[width\:6\.5rem\] td:last-child {
    width: 6.5rem !important;
  }

  .jui\:\[\&_th\]\:\[padding\:0\.55rem_0\.45rem\] th {
    padding: .55rem .45rem !important;
  }

  .jui\:\[\&_th\]\:\[padding\:0\.65rem_0\.7rem\] th {
    padding: .65rem .7rem !important;
  }

  .jui\:\[\&_th\]\:\[padding\:0\.85rem_0\.65rem\] th {
    padding: .85rem .65rem !important;
  }

  .jui\:\[\&_th\]\:p-2 th {
    padding: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:\[\&_th\]\:px-3 th {
    padding-inline: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:\[\&_th\]\:py-2 th {
    padding-block: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:\[\&_th\]\:\[text-align\:left\] th, .jui\:\[\&_th\]\:text-left th {
    text-align: left !important;
  }

  .jui\:\[\&_th\]\:\[vertical-align\:middle\] th {
    vertical-align: middle !important;
  }

  .jui\:\[\&_th\]\:\[font-size\:0\.68rem\] th {
    font-size: .68rem !important;
  }

  .jui\:\[\&_th\]\:\[font-size\:0\.72rem\] th {
    font-size: .72rem !important;
  }

  .jui\:\[\&_th\]\:font-bold th {
    --tw-font-weight: var(--jui-font-weight-bold) !important;
    font-weight: var(--jui-font-weight-bold) !important;
  }

  .jui\:\[\&_th\]\:\[letter-spacing\:0\.04em\] th {
    letter-spacing: .04em !important;
  }

  .jui\:\[\&_th\]\:\[letter-spacing\:0\.06em\] th {
    letter-spacing: .06em !important;
  }

  .jui\:\[\&_th\]\:\[color\:\#64748b\] th {
    color: #64748b !important;
  }

  .jui\:\[\&_th\]\:\[text-transform\:uppercase\] th {
    text-transform: uppercase !important;
  }

  .jui\:\[\&_th\]\:\[background\:\#f8fafc\] th {
    background: #f8fafc !important;
  }

  .jui\:\[\&_th\]\:\[border-bottom\:1px_solid_\#e2e8f0\] th {
    border-bottom: 1px solid #e2e8f0 !important;
  }

  .jui\:\[\&_th\]\:\[border-bottom\:1px_solid_\#e8eef4\] th {
    border-bottom: 1px solid #e8eef4 !important;
  }

  .jui\:\[\&_th\]\:\[border-bottom\:1px_solid_\#eef2f7\] th {
    border-bottom: 1px solid #eef2f7 !important;
  }

  .jui\:\[\&_th\:first-child\]\:\[width\:2\.2rem\] th:first-child {
    width: 2.2rem !important;
  }

  .jui\:\[\&_th\:last-child\]\:\[width\:6\.5rem\] th:last-child {
    width: 6.5rem !important;
  }

  .jui\:\[\&_thead\]\:hidden thead {
    display: none !important;
  }

  @media (min-width: 40rem) {
    .jui\:sm\:\[\&_thead\]\:table-header-group thead {
      display: table-header-group !important;
    }
  }

  .jui\:\[\&_time\]\:\[font-size\:0\.75rem\] time {
    font-size: .75rem !important;
  }

  .jui\:\[\&_time\]\:\[font-size\:0\.78rem\] time {
    font-size: .78rem !important;
  }

  .jui\:\[\&_time\]\:whitespace-nowrap time {
    white-space: nowrap !important;
  }

  .jui\:\[\&_time\]\:\[color\:\#94a3b8\] time {
    color: #94a3b8 !important;
  }

  .jui\:\[\&_time\]\:\[color\:var\(--color-text-secondary\,_var\(--color-on-surface-variant\)\)\] time {
    color: var(--color-text-secondary, var(--color-on-surface-variant)) !important;
  }

  .jui\:\[\&_tr\]\:grid tr {
    display: grid !important;
  }

  .jui\:\[\&_tr\]\:grid-cols-2 tr {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .jui\:\[\&_tr\]\:border-b tr {
    border-bottom-style: var(--tw-border-style) !important;
    border-bottom-width: 1px !important;
  }

  .jui\:\[\&_tr\]\:border-solid tr {
    --tw-border-style: solid !important;
    border-style: solid !important;
  }

  .jui\:\[\&_tr\]\:border-\[var\(--ui-border\)\] tr {
    border-color: var(--ui-border) !important;
  }

  @media (min-width: 40rem) {
    .jui\:sm\:\[\&_tr\]\:table-row tr {
      display: table-row !important;
    }
  }

  .jui\:\[\&_ul\]\:\[margin\:0_0_0\.85rem\] ul {
    margin: 0 0 .85rem !important;
  }

  .jui\:\[\&_ul\]\:m-0 ul {
    margin: 0 !important;
  }

  .jui\:\[\&_ul\]\:flex ul {
    display: flex !important;
  }

  .jui\:\[\&_ul\]\:grid ul {
    display: grid !important;
  }

  .jui\:\[\&_ul\]\:list-none ul {
    list-style-type: none !important;
  }

  .jui\:\[\&_ul\]\:flex-col ul {
    flex-direction: column !important;
  }

  .jui\:\[\&_ul\]\:\[gap\:0\.7rem\] ul {
    gap: .7rem !important;
  }

  .jui\:\[\&_ul\]\:\[gap\:0\.35rem\] ul {
    gap: .35rem !important;
  }

  .jui\:\[\&_ul\]\:\[gap\:0\.55rem\] ul {
    gap: .55rem !important;
  }

  .jui\:\[\&_ul\]\:p-0 ul {
    padding: 0 !important;
  }

  .jui\:\[\&_ul\]\:\[font-size\:0\.85rem\] ul {
    font-size: .85rem !important;
  }

  .jui\:\[\&_ul\]\:\[color\:\#334155\] ul {
    color: #334155 !important;
  }

  .jui\:\[\&\.featured\]\:\[border\:2px_solid_var\(--brand\)\].featured {
    border: 2px solid var(--brand) !important;
  }

  .jui\:\[\&\.featured_\.assoc-plan-cta\]\:\[color\:\#fff\].featured .assoc-plan-cta {
    color: #fff !important;
  }

  .jui\:\[\&\.featured_\.assoc-plan-cta\]\:\[background\:var\(--brand\)\].featured .assoc-plan-cta {
    background: var(--brand) !important;
  }

  .jui\:\[\&\.ghost\]\:\[color\:var\(--brand\)\].ghost {
    color: var(--brand) !important;
  }

  .jui\:\[\&\.ghost\]\:\[background\:\#fff\].ghost {
    background: #fff !important;
  }

  .jui\:\[\&\.ghost\]\:\[border\:1px_solid_var\(--brand\)\].ghost {
    border: 1px solid var(--brand) !important;
  }

  .jui\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\]\:\[margin-inline\:auto\].mode-b-shell[data-mode-b="association"] {
    margin-inline: auto !important;
  }

  .jui\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\]\:w-full.mode-b-shell[data-mode-b="association"] {
    width: 100% !important;
  }

  .jui\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\]\:\[max-width\:var\(--layout-desktop-width\,_900px\)\].mode-b-shell[data-mode-b="association"] {
    max-width: var(--layout-desktop-width, 900px) !important;
  }

  .jui\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\]\:\[padding-bottom\:env\(safe-area-inset-bottom\,_0px\)\].mode-b-shell[data-mode-b="association"] {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  .jui\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\]\:\[--layout-max\:var\(--layout-desktop-width\,_900px\)\].mode-b-shell[data-mode-b="association"] {
    --layout-max: var(--layout-desktop-width, 900px) !important;
  }

  .jui\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\]\:\[--shell-content-max\:var\(--layout-desktop-width\,_900px\)\].mode-b-shell[data-mode-b="association"] {
    --shell-content-max: var(--layout-desktop-width, 900px) !important;
  }

  .jui\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\:has\(\[data-screen\=\'association-home\'\]\)\]\:box-border.mode-b-shell[data-mode-b="association"]:has([data-screen="association-home"]) {
    box-sizing: border-box !important;
  }

  .jui\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\:has\(\[data-screen\=\'association-home\'\]\)\]\:w-full.mode-b-shell[data-mode-b="association"]:has([data-screen="association-home"]) {
    width: 100% !important;
  }

  .jui\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\:has\(\[data-screen\=\'association-home\'\]\)\]\:\[max-width\:min\(900px\,_100\%\)\].mode-b-shell[data-mode-b="association"]:has([data-screen="association-home"]) {
    max-width: min(900px, 100%) !important;
  }

  .jui\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\:has\(\[data-screen\=\'association-home\'\]\)\]\:\[--layout-desktop-width\:900px\].mode-b-shell[data-mode-b="association"]:has([data-screen="association-home"]) {
    --layout-desktop-width: 900px !important;
  }

  .jui\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\:has\(\[data-screen\=\'association-home\'\]\)\]\:\[--layout-max\:900px\].mode-b-shell[data-mode-b="association"]:has([data-screen="association-home"]) {
    --layout-max: 900px !important;
  }

  .jui\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\:has\(\[data-screen\=\'association-home\'\]\)\]\:\[--shell-content-max\:900px\].mode-b-shell[data-mode-b="association"]:has([data-screen="association-home"]) {
    --shell-content-max: 900px !important;
  }

  .jui\:\[\&\.muted-row\]\:\[cursor\:default\].muted-row {
    cursor: default !important;
  }

  .jui\:\[\&\.off\]\:\[opacity\:0\.45\].off {
    opacity: .45 !important;
  }

  .jui\:\[\&\.wide\]\:\[grid-column\:1_\/_-1\].wide {
    grid-column: 1 / -1 !important;
  }

  .jui\:\[\&\.wide\]\:flex.wide {
    display: flex !important;
  }

  .jui\:\[\&\.wide\]\:items-center.wide {
    align-items: center !important;
  }

  .jui\:\[\&\.wide\]\:justify-between.wide {
    justify-content: space-between !important;
  }

  .jui\:\[\&\.wide_a\]\:inline-flex.wide a {
    display: inline-flex !important;
  }

  .jui\:\[\&\.wide_a\]\:\[height\:2\.4rem\].wide a {
    height: 2.4rem !important;
  }

  .jui\:\[\&\.wide_a\]\:\[width\:2\.4rem\].wide a {
    width: 2.4rem !important;
  }

  .jui\:\[\&\.wide_a\]\:items-center.wide a {
    align-items: center !important;
  }

  .jui\:\[\&\.wide_a\]\:justify-center.wide a {
    justify-content: center !important;
  }

  .jui\:\[\&\.wide_a\]\:\[border-radius\:999px\].wide a {
    border-radius: 999px !important;
  }

  .jui\:\[\&\.wide_a\]\:\[color\:var\(--brand-deep\)\].wide a {
    color: var(--brand-deep) !important;
  }

  .jui\:\[\&\.wide_a\]\:no-underline.wide a {
    text-decoration-line: none !important;
  }

  .jui\:\[\&\.wide_a\]\:\[background\:\#eef2ff\].wide a {
    background: #eef2ff !important;
  }

  .jui\:\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
    display: none !important;
  }

  .jui\:\[\&\:disabled\]\:\[opacity\:0\.35\]:disabled {
    opacity: .35 !important;
  }

  .jui\:\[\&\:disabled\]\:opacity-50:disabled {
    opacity: .5 !important;
  }

  .jui\:\[\&\:first-of-type\]\:\[border-top\:0\]:first-of-type {
    border-top: 0 !important;
  }

  .jui\:\[\&\:has\(\[data-screen\=\'association-events\'\]\)_main\]\:\[background\:var\(--color-background\)\]:has([data-screen="association-events"]) main {
    background: var(--color-background) !important;
  }

  .jui\:\[\&\:has\(\[data-screen\=\'association-home\'\]\)_main\]\:\[background\:color-mix\(in_srgb\,_var\(--color-primary\,_\#0055ff\)_4\%\,_var\(--color-background\,_\#f8fafc\)\)\]:has([data-screen="association-home"]) main {
    background: var(--color-primary, #05f) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&\:has\(\[data-screen\=\'association-home\'\]\)_main\]\:\[background\:color-mix\(in_srgb\,_var\(--color-primary\,_\#0055ff\)_4\%\,_var\(--color-background\,_\#f8fafc\)\)\]:has([data-screen="association-home"]) main {
      background: color-mix(in srgb, var(--color-primary, #05f) 4%, var(--color-background, #f8fafc)) !important;
    }
  }

  .jui\:\[\&\:has\(\[data-screen\^\=\'association-\'\]\)_main\]\:\[background\:var\(--color-background\)\]:has([data-screen^="association-"]) main {
    background: var(--color-background) !important;
  }

  .jui\:\[\&\:hover\]\:\[border-color\:color-mix\(in_srgb\,_var\(--color-primary\,_\#2563eb\)_35\%\,_var\(--ui-border\,_\#e2e8f0\)\)\]:hover {
    border-color: var(--color-primary, #2563eb) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&\:hover\]\:\[border-color\:color-mix\(in_srgb\,_var\(--color-primary\,_\#2563eb\)_35\%\,_var\(--ui-border\,_\#e2e8f0\)\)\]:hover {
      border-color: color-mix(in srgb, var(--color-primary, #2563eb) 35%, var(--ui-border, #e2e8f0)) !important;
    }
  }

  .jui\:\[\&\:hover\]\:\[box-shadow\:0_6px_18px_color-mix\(in_srgb\,_var\(--color-primary\,_\#2563eb\)_8\%\,_transparent\)\]:hover {
    box-shadow: 0 6px 18px var(--color-primary, #2563eb) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&\:hover\]\:\[box-shadow\:0_6px_18px_color-mix\(in_srgb\,_var\(--color-primary\,_\#2563eb\)_8\%\,_transparent\)\]:hover {
      box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary, #2563eb) 8%, transparent) !important;
    }
  }

  .jui\:\[\&\:hover\]\:\[background\:color-mix\(in_srgb\,_var\(--color-primary\,_\#2563eb\)_3\%\,_var\(--ui-surface\,_\#fff\)\)\]:hover {
    background: var(--color-primary, #2563eb) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&\:hover\]\:\[background\:color-mix\(in_srgb\,_var\(--color-primary\,_\#2563eb\)_3\%\,_var\(--ui-surface\,_\#fff\)\)\]:hover {
      background: color-mix(in srgb, var(--color-primary, #2563eb) 3%, var(--ui-surface, #fff)) !important;
    }
  }

  .jui\:\[\&\:last-of-type\]\:\[border-bottom\:0\]:last-of-type {
    border-bottom: 0 !important;
  }

  .jui\:\[\&\:not\(\.featured\)_\.assoc-plan-head_h2\]\:\[color\:\#191c1e\]:not(.featured) .assoc-plan-head h2 {
    color: #191c1e !important;
  }

  .jui\:\[\&\>article\]\:rounded-lg > article {
    border-radius: var(--jui-radius-lg) !important;
  }

  .jui\:\[\&\>article\]\:border > article {
    border-style: var(--tw-border-style) !important;
    border-width: 1px !important;
  }

  .jui\:\[\&\>article\]\:border-solid > article {
    --tw-border-style: solid !important;
    border-style: solid !important;
  }

  .jui\:\[\&\>article\]\:border-\[var\(--ui-border\)\] > article {
    border-color: var(--ui-border) !important;
  }

  .jui\:\[\&\>article\]\:p-3 > article {
    padding: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:\[\&\>button\]\:rounded-md > button {
    border-radius: var(--jui-radius-md) !important;
  }

  .jui\:\[\&\>button\]\:px-3 > button {
    padding-inline: calc(var(--jui-spacing) * 3) !important;
  }

  .jui\:\[\&\>button\]\:py-2 > button {
    padding-block: calc(var(--jui-spacing) * 2) !important;
  }

  .jui\:\[\&\>button\]\:text-sm > button {
    font-size: var(--jui-text-sm) !important;
    line-height: var(--tw-leading, var(--jui-text-sm--line-height)) !important;
  }

  .jui\:\[\&\>button\[data-on\=yes\]\]\:text-blue-600 > button[data-on="yes"] {
    color: var(--jui-color-blue-600) !important;
  }

  .jui\:\[\&\>div\]\:flex-1 > div {
    flex: 1 !important;
  }

  .jui\:\[\&\[data-full\=\'yes\'\]_i\]\:\[background\:\#ef4444\][data-full="yes"] i {
    background: #ef4444 !important;
  }

  .jui\:\[\&\[data-icon\=\'active\'\]\]\:\[color\:\#16a34a\][data-icon="active"] {
    color: #16a34a !important;
  }

  .jui\:\[\&\[data-icon\=\'active\'\]\]\:\[background\:\#dcfce7\][data-icon="active"] {
    background: #dcfce7 !important;
  }

  .jui\:\[\&\[data-icon\=\'inactive\'\]\]\:\[color\:\#ea580c\][data-icon="inactive"] {
    color: #ea580c !important;
  }

  .jui\:\[\&\[data-icon\=\'inactive\'\]\]\:\[background\:\#ffedd5\][data-icon="inactive"] {
    background: #ffedd5 !important;
  }

  .jui\:\[\&\[data-icon\=\'industry\'\]\]\:\[color\:\#e11d48\][data-icon="industry"] {
    color: #e11d48 !important;
  }

  .jui\:\[\&\[data-icon\=\'industry\'\]\]\:\[background\:\#ffe4e6\][data-icon="industry"] {
    background: #ffe4e6 !important;
  }

  .jui\:\[\&\[data-icon\=\'new\'\]\]\:\[color\:\#ea580c\][data-icon="new"] {
    color: #ea580c !important;
  }

  .jui\:\[\&\[data-icon\=\'new\'\]\]\:\[background\:\#ffedd5\][data-icon="new"] {
    background: #ffedd5 !important;
  }

  .jui\:\[\&\[data-icon\=\'pending\'\]\]\:\[color\:\#7c3aed\][data-icon="pending"] {
    color: #7c3aed !important;
  }

  .jui\:\[\&\[data-icon\=\'pending\'\]\]\:\[background\:\#ede9fe\][data-icon="pending"] {
    background: #ede9fe !important;
  }

  .jui\:\[\&\[data-icon\=\'total\'\]\]\:\[color\:\#2563eb\][data-icon="total"] {
    color: #2563eb !important;
  }

  .jui\:\[\&\[data-icon\=\'total\'\]\]\:\[background\:\#dbeafe\][data-icon="total"] {
    background: #dbeafe !important;
  }

  .jui\:\[\&\[data-kind\=\'guest\'\]\]\:\[color\:\#4338ca\][data-kind="guest"] {
    color: #4338ca !important;
  }

  .jui\:\[\&\[data-kind\=\'guest\'\]\]\:\[background\:\#eef2ff\][data-kind="guest"] {
    background: #eef2ff !important;
  }

  .jui\:\[\&\[data-kind\=\'limit\'\]\]\:\[color\:\#b91c1c\][data-kind="limit"] {
    color: #b91c1c !important;
  }

  .jui\:\[\&\[data-kind\=\'limit\'\]\]\:\[background\:\#fee2e2\][data-kind="limit"] {
    background: #fee2e2 !important;
  }

  .jui\:\[\&\[data-level\=\'1\'\]_a\]\:\[background\:\#eef2ff\][data-level="1"] a {
    background: #eef2ff !important;
  }

  .jui\:\[\&\[data-level\=\'2\'\]_a\]\:\[background\:\#ecfdf3\][data-level="2"] a {
    background: #ecfdf3 !important;
  }

  .jui\:\[\&\[data-level\=\'3\'\]_a\]\:\[background\:\#fff7ed\][data-level="3"] a {
    background: #fff7ed !important;
  }

  .jui\:\[\&\[data-level\=\'4\'\]_a\]\:\[background\:\#eff6ff\][data-level="4"] a {
    background: #eff6ff !important;
  }

  .jui\:\[\&\[data-level\=\'5\'\]_a\]\:\[background\:\#fdf2f8\][data-level="5"] a {
    background: #fdf2f8 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]\]\:\[scrollbar-width\:none\][data-mode-b="association"] {
    scrollbar-width: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]\]\:\[-ms-overflow-style\:none\][data-mode-b="association"] {
    -ms-overflow-style: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\#main\]\:\[scrollbar-width\:none\][data-mode-b="association"] #main {
    scrollbar-width: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\#main\]\:\[padding-bottom\:1\.5rem\][data-mode-b="association"] #main {
    padding-bottom: 1.5rem !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\#main\]\:\[-ms-overflow-style\:none\][data-mode-b="association"] #main {
    -ms-overflow-style: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\*\:\:-webkit-scrollbar\]\:hidden[data-mode-b="association"] ::-webkit-scrollbar {
    display: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\*\:\:-webkit-scrollbar\]\:\[height\:0\][data-mode-b="association"] ::-webkit-scrollbar {
    height: 0 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\*\:\:-webkit-scrollbar\]\:\[width\:0\][data-mode-b="association"] ::-webkit-scrollbar {
    width: 0 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\*\:\:-webkit-scrollbar\]\:bg-transparent[data-mode-b="association"] ::-webkit-scrollbar {
    background-color: #0000 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav\]\:\[position\:static\][data-mode-b="association"] .mode-b-nav {
    position: static !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav\]\:\[top\:auto\][data-mode-b="association"] .mode-b-nav {
    top: auto !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav\]\:\[right\:auto\][data-mode-b="association"] .mode-b-nav {
    right: auto !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav\]\:\[bottom\:auto\][data-mode-b="association"] .mode-b-nav {
    bottom: auto !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav\]\:\[left\:auto\][data-mode-b="association"] .mode-b-nav {
    left: auto !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav\]\:m-0[data-mode-b="association"] .mode-b-nav {
    margin: 0 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav\]\:flex[data-mode-b="association"] .mode-b-nav {
    display: flex !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav\]\:w-full[data-mode-b="association"] .mode-b-nav {
    width: 100% !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav\]\:\[max-width\:none\][data-mode-b="association"] .mode-b-nav {
    max-width: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav\]\:\[transform\:none\][data-mode-b="association"] .mode-b-nav {
    transform: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav\]\:flex-wrap[data-mode-b="association"] .mode-b-nav {
    flex-wrap: wrap !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav\]\:items-center[data-mode-b="association"] .mode-b-nav {
    align-items: center !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav\]\:justify-start[data-mode-b="association"] .mode-b-nav {
    justify-content: flex-start !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav\]\:\[gap\:0\.25rem\][data-mode-b="association"] .mode-b-nav {
    gap: .25rem !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav\]\:\[border-radius\:0\][data-mode-b="association"] .mode-b-nav {
    border-radius: 0 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav\]\:border-0[data-mode-b="association"] .mode-b-nav {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav\]\:bg-transparent[data-mode-b="association"] .mode-b-nav {
    background-color: #0000 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav\]\:\[padding\:0\.35rem_0_0\.55rem\][data-mode-b="association"] .mode-b-nav {
    padding: .35rem 0 .55rem !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav\]\:shadow-none[data-mode-b="association"] .mode-b-nav {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item\]\:\[min-height\:0\][data-mode-b="association"] .mode-b-nav .mode-b-nav-item {
    min-height: 0 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item\]\:\[flex\:none\][data-mode-b="association"] .mode-b-nav .mode-b-nav-item {
    flex: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item\]\:flex-row[data-mode-b="association"] .mode-b-nav .mode-b-nav-item {
    flex-direction: row !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item\]\:\[gap\:0\.35rem\][data-mode-b="association"] .mode-b-nav .mode-b-nav-item {
    gap: .35rem !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item\]\:\[border-radius\:999px\][data-mode-b="association"] .mode-b-nav .mode-b-nav-item {
    border-radius: 999px !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item\]\:\[padding\:0\.4rem_0\.8rem\][data-mode-b="association"] .mode-b-nav .mode-b-nav-item {
    padding: .4rem .8rem !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item\]\:\[font-size\:0\.86rem\][data-mode-b="association"] .mode-b-nav .mode-b-nav-item {
    font-size: .86rem !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item\]\:\[font-weight\:650\][data-mode-b="association"] .mode-b-nav .mode-b-nav-item {
    font-weight: 650 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item_\.mode-b-nav-icon\]\:inline-flex[data-mode-b="association"] .mode-b-nav .mode-b-nav-item .mode-b-nav-icon {
    display: inline-flex !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item_\.mode-b-nav-icon\]\:\[height\:1rem\][data-mode-b="association"] .mode-b-nav .mode-b-nav-item .mode-b-nav-icon {
    height: 1rem !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item_\.mode-b-nav-icon\]\:\[width\:1rem\][data-mode-b="association"] .mode-b-nav .mode-b-nav-item .mode-b-nav-icon {
    width: 1rem !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item_\.mode-b-nav-icon\]\:\[flex-shrink\:0\][data-mode-b="association"] .mode-b-nav .mode-b-nav-item .mode-b-nav-icon {
    flex-shrink: 0 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item_\.mode-b-nav-icon\]\:items-center[data-mode-b="association"] .mode-b-nav .mode-b-nav-item .mode-b-nav-icon {
    align-items: center !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item_\.mode-b-nav-icon\]\:justify-center[data-mode-b="association"] .mode-b-nav .mode-b-nav-item .mode-b-nav-icon {
    justify-content: center !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item_\.mode-b-nav-icon\]\:\[line-height\:0\][data-mode-b="association"] .mode-b-nav .mode-b-nav-item .mode-b-nav-icon {
    line-height: 0 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item_\.mode-b-nav-icon_svg\]\:block[data-mode-b="association"] .mode-b-nav .mode-b-nav-item .mode-b-nav-icon svg {
    display: block !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item_\.mode-b-nav-icon_svg\]\:\[height\:1rem\][data-mode-b="association"] .mode-b-nav .mode-b-nav-item .mode-b-nav-icon svg {
    height: 1rem !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item_\.mode-b-nav-icon_svg\]\:\[width\:1rem\][data-mode-b="association"] .mode-b-nav .mode-b-nav-item .mode-b-nav-icon svg {
    width: 1rem !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item\:before\]\:hidden[data-mode-b="association"] .mode-b-nav .mode-b-nav-item:before {
    display: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.mode-b-nav_\.mode-b-nav-item\:before\]\:\[content\:none\][data-mode-b="association"] .mode-b-nav .mode-b-nav-item:before {
    content: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.page-container\]\:\[scrollbar-width\:none\][data-mode-b="association"] .page-container {
    scrollbar-width: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.page-container\]\:\[-ms-overflow-style\:none\][data-mode-b="association"] .page-container {
    -ms-overflow-style: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.sa-form\]\:\[scrollbar-width\:none\][data-mode-b="association"] .sa-form {
    scrollbar-width: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.sa-form\]\:\[-ms-overflow-style\:none\][data-mode-b="association"] .sa-form {
    -ms-overflow-style: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.sa-form-body\]\:\[scrollbar-width\:none\][data-mode-b="association"] .sa-form-body {
    scrollbar-width: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.sa-form-body\]\:\[-ms-overflow-style\:none\][data-mode-b="association"] .sa-form-body {
    -ms-overflow-style: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.sa-form\[data-screen\=\'association-home\'\]\]\:w-full[data-mode-b="association"] .sa-form[data-screen="association-home"] {
    width: 100% !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.sa-form\[data-screen\=\'association-home\'\]\]\:\[max-width\:min\(900px\,_100\%\)\][data-mode-b="association"] .sa-form[data-screen="association-home"] {
    max-width: min(900px, 100%) !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.sa-form\[data-screen\^\=\'association-\'\]\]\:\[margin-inline\:auto\][data-mode-b="association"] .sa-form[data-screen^="association-"] {
    margin-inline: auto !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.sa-form\[data-screen\^\=\'association-\'\]\]\:box-border[data-mode-b="association"] .sa-form[data-screen^="association-"] {
    box-sizing: border-box !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.sa-form\[data-screen\^\=\'association-\'\]\]\:w-full[data-mode-b="association"] .sa-form[data-screen^="association-"] {
    width: 100% !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\.sa-form\[data-screen\^\=\'association-\'\]\]\:\[max-width\:min\(var\(--layout-desktop-width\,_900px\)\,_100\%\)\][data-mode-b="association"] .sa-form[data-screen^="association-"] {
    max-width: min(var(--layout-desktop-width, 900px), 100%) !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav\]\:\[position\:static\][data-mode-b="association"] > .mode-b-nav {
    position: static !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav\]\:\[top\:auto\][data-mode-b="association"] > .mode-b-nav {
    top: auto !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav\]\:\[right\:auto\][data-mode-b="association"] > .mode-b-nav {
    right: auto !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav\]\:\[bottom\:auto\][data-mode-b="association"] > .mode-b-nav {
    bottom: auto !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav\]\:\[left\:auto\][data-mode-b="association"] > .mode-b-nav {
    left: auto !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav\]\:m-0[data-mode-b="association"] > .mode-b-nav {
    margin: 0 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav\]\:flex[data-mode-b="association"] > .mode-b-nav {
    display: flex !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav\]\:w-full[data-mode-b="association"] > .mode-b-nav {
    width: 100% !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav\]\:\[max-width\:none\][data-mode-b="association"] > .mode-b-nav {
    max-width: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav\]\:\[transform\:none\][data-mode-b="association"] > .mode-b-nav {
    transform: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav\]\:flex-wrap[data-mode-b="association"] > .mode-b-nav {
    flex-wrap: wrap !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav\]\:items-center[data-mode-b="association"] > .mode-b-nav {
    align-items: center !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav\]\:justify-start[data-mode-b="association"] > .mode-b-nav {
    justify-content: flex-start !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav\]\:\[gap\:0\.25rem\][data-mode-b="association"] > .mode-b-nav {
    gap: .25rem !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav\]\:\[border-radius\:0\][data-mode-b="association"] > .mode-b-nav {
    border-radius: 0 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav\]\:border-0[data-mode-b="association"] > .mode-b-nav {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav\]\:bg-transparent[data-mode-b="association"] > .mode-b-nav {
    background-color: #0000 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav\]\:\[padding\:0\.35rem_0_0\.55rem\][data-mode-b="association"] > .mode-b-nav {
    padding: .35rem 0 .55rem !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav\]\:shadow-none[data-mode-b="association"] > .mode-b-nav {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav-stack\]\:\[margin-inline\:auto\][data-mode-b="association"] > .mode-b-nav-stack {
    margin-inline: auto !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav-stack\]\:box-border[data-mode-b="association"] > .mode-b-nav-stack {
    box-sizing: border-box !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav-stack\]\:\[width\:min\(var\(--layout-desktop-width\,_900px\)\,_100\%\)\][data-mode-b="association"] > .mode-b-nav-stack {
    width: min(var(--layout-desktop-width, 900px), 100%) !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav-stack\]\:\[max-width\:100\%\][data-mode-b="association"] > .mode-b-nav-stack {
    max-width: 100% !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav-stack\]\:\[padding-inline\:var\(--shell-content-pad\,_1rem\)\][data-mode-b="association"] > .mode-b-nav-stack {
    padding-inline: var(--shell-content-pad, 1rem) !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav-stack\]\:\[background\:\#fff\][data-mode-b="association"] > .mode-b-nav-stack {
    background: #fff !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.mode-b-nav-stack\]\:\[border-bottom\:1px_solid_\#e8eef5\][data-mode-b="association"] > .mode-b-nav-stack {
    border-bottom: 1px solid #e8eef5 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.workspace-header\]\:relative[data-mode-b="association"] > .workspace-header {
    position: relative !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.workspace-header\]\:\[z-index\:5\][data-mode-b="association"] > .workspace-header {
    z-index: 5 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_\.workspace-header\]\:\[background\:\#f7f8fb\][data-mode-b="association"] > .workspace-header {
    background: #f7f8fb !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_main\]\:\[scrollbar-width\:none\][data-mode-b="association"] > main {
    scrollbar-width: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_main\]\:\[padding-top\:0\.5rem\][data-mode-b="association"] > main {
    padding-top: .5rem !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_main\]\:\[padding-bottom\:calc\(8\.5rem_\+_env\(safe-area-inset-bottom\,_0px\)\)\][data-mode-b="association"] > main {
    padding-bottom: calc(8.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_\>_main\]\:\[-ms-overflow-style\:none\][data-mode-b="association"] > main {
    -ms-overflow-style: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]_main\]\:\[padding-bottom\:1\.5rem\][data-mode-b="association"] main {
    padding-bottom: 1.5rem !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]\:\:-webkit-scrollbar\]\:hidden[data-mode-b="association"]::-webkit-scrollbar {
    display: none !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]\:\:-webkit-scrollbar\]\:\[height\:0\][data-mode-b="association"]::-webkit-scrollbar {
    height: 0 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]\:\:-webkit-scrollbar\]\:\[width\:0\][data-mode-b="association"]::-webkit-scrollbar {
    width: 0 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]\:\:-webkit-scrollbar\]\:bg-transparent[data-mode-b="association"]::-webkit-scrollbar {
    background-color: #0000 !important;
  }

  .jui\:\[\&\[data-mode-b\=\'association\'\]\:has\(\[data-screen\=\'association-home\'\]\)_\>_\.mode-b-nav-stack\]\:\[width\:min\(900px\,_100\%\)\][data-mode-b="association"]:has([data-screen="association-home"]) > .mode-b-nav-stack {
    width: min(900px, 100%) !important;
  }

  .jui\:\[\&\[data-on\=\'no\'\]\]\:\[color\:var\(--ui-muted\,_\#64748b\)\][data-on="no"] {
    color: var(--ui-muted, #64748b) !important;
  }

  .jui\:\[\&\[data-on\=\'no\'\]\]\:\[background\:color-mix\(in_srgb\,_\#94a3b8_16\%\,_var\(--ui-surface\,_\#fff\)\)\][data-on="no"] {
    background: #94a3b8 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&\[data-on\=\'no\'\]\]\:\[background\:color-mix\(in_srgb\,_\#94a3b8_16\%\,_var\(--ui-surface\,_\#fff\)\)\][data-on="no"] {
      background: color-mix(in srgb, #94a3b8 16%, var(--ui-surface, #fff)) !important;
    }
  }

  .jui\:\[\&\[data-on\=\'yes\'\]\]\:\[border-color\:\#93c5fd\][data-on="yes"] {
    border-color: #93c5fd !important;
  }

  .jui\:\[\&\[data-on\=\'yes\'\]\]\:\[border-color\:color-mix\(in_srgb\,_var\(--brand\,_\#16a34a\)_35\%\,_\#e2e8f0\)\][data-on="yes"] {
    border-color: var(--brand, #16a34a) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&\[data-on\=\'yes\'\]\]\:\[border-color\:color-mix\(in_srgb\,_var\(--brand\,_\#16a34a\)_35\%\,_\#e2e8f0\)\][data-on="yes"] {
      border-color: color-mix(in srgb, var(--brand, #16a34a) 35%, #e2e8f0) !important;
    }
  }

  .jui\:\[\&\[data-on\=\'yes\'\]\]\:\[color\:\#047857\][data-on="yes"] {
    color: #047857 !important;
  }

  .jui\:\[\&\[data-on\=\'yes\'\]\]\:\[color\:var\(--brand\,_\#16a34a\)\][data-on="yes"] {
    color: var(--brand, #16a34a) !important;
  }

  .jui\:\[\&\[data-on\=\'yes\'\]\]\:\[background\:\#f8fbff\][data-on="yes"] {
    background: #f8fbff !important;
  }

  .jui\:\[\&\[data-on\=\'yes\'\]\]\:\[background\:color-mix\(in_srgb\,_\#34d399_18\%\,_var\(--ui-surface\,_\#fff\)\)\][data-on="yes"] {
    background: #34d399 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&\[data-on\=\'yes\'\]\]\:\[background\:color-mix\(in_srgb\,_\#34d399_18\%\,_var\(--ui-surface\,_\#fff\)\)\][data-on="yes"] {
      background: color-mix(in srgb, #34d399 18%, var(--ui-surface, #fff)) !important;
    }
  }

  .jui\:\[\&\[data-on\=\'yes\'\]\]\:\[background\:color-mix\(in_srgb\,_var\(--brand\,_\#16a34a\)_8\%\,_\#fff\)\][data-on="yes"] {
    background: var(--brand, #16a34a) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&\[data-on\=\'yes\'\]\]\:\[background\:color-mix\(in_srgb\,_var\(--brand\,_\#16a34a\)_8\%\,_\#fff\)\][data-on="yes"] {
      background: color-mix(in srgb, var(--brand, #16a34a) 8%, #fff) !important;
    }
  }

  .jui\:\[\&\[data-open\=\'yes\'\]\]\:\[border-color\:\#c7d2fe\][data-open="yes"] {
    border-color: #c7d2fe !important;
  }

  .jui\:\[\&\[data-overdue\=\'yes\'\]\]\:\[color\:\#b42318\][data-overdue="yes"] {
    color: #b42318 !important;
  }

  .jui\:\[\&\[data-selected\=\"true\"\]\]\:\[outline\:1px_solid_var\(--color-primary\)\][data-selected="true"] {
    outline: 1px solid var(--color-primary) !important;
  }

  .jui\:\[\&\[data-selected\]\]\:outline-none[data-selected] {
    --tw-outline-style: none !important;
    outline-style: none !important;
  }

  .jui\:\[\&\[data-shape\=\'square\'\]\]\:\[border-radius\:0\.7rem\][data-shape="square"] {
    border-radius: .7rem !important;
  }

  .jui\:\[\&\[data-shape\=\'square\'\]\]\:\[font-size\:0\.62rem\][data-shape="square"] {
    font-size: .62rem !important;
  }

  .jui\:\[\&\[data-status\=\'active\'\]\]\:\[color\:\#15803d\][data-status="active"] {
    color: #15803d !important;
  }

  .jui\:\[\&\[data-status\=\'active\'\]\]\:\[background\:\#dcfce7\][data-status="active"] {
    background: #dcfce7 !important;
  }

  .jui\:\[\&\[data-status\=\'approved\'\]\]\:\[color\:\#15803d\][data-status="approved"] {
    color: #15803d !important;
  }

  .jui\:\[\&\[data-status\=\'approved\'\]\]\:\[background\:\#dcfce7\][data-status="approved"] {
    background: #dcfce7 !important;
  }

  .jui\:\[\&\[data-status\=\'expiring\'\]\]\:\[color\:\#c2410c\][data-status="expiring"] {
    color: #c2410c !important;
  }

  .jui\:\[\&\[data-status\=\'expiring\'\]\]\:\[background\:\#fff7ed\][data-status="expiring"] {
    background: #fff7ed !important;
  }

  .jui\:\[\&\[data-status\=\'inactive\'\]\]\:\[color\:\#be123c\][data-status="inactive"] {
    color: #be123c !important;
  }

  .jui\:\[\&\[data-status\=\'inactive\'\]\]\:\[background\:\#ffe4e6\][data-status="inactive"] {
    background: #ffe4e6 !important;
  }

  .jui\:\[\&\[data-status\=\'lapsed\'\]\]\:\[color\:\#b91c1c\][data-status="lapsed"] {
    color: #b91c1c !important;
  }

  .jui\:\[\&\[data-status\=\'lapsed\'\]\]\:\[background\:\#fef2f2\][data-status="lapsed"] {
    background: #fef2f2 !important;
  }

  .jui\:\[\&\[data-status\=\'pending\'\]\]\:\[color\:\#475569\][data-status="pending"] {
    color: #475569 !important;
  }

  .jui\:\[\&\[data-status\=\'pending\'\]\]\:\[color\:\#c2410c\][data-status="pending"] {
    color: #c2410c !important;
  }

  .jui\:\[\&\[data-status\=\'pending\'\]\]\:\[background\:\#f1f5f9\][data-status="pending"] {
    background: #f1f5f9 !important;
  }

  .jui\:\[\&\[data-status\=\'pending\'\]\]\:\[background\:\#ffedd5\][data-status="pending"] {
    background: #ffedd5 !important;
  }

  .jui\:\[\&\[data-status\=\'rejected\'\]\]\:\[color\:\#b91c1c\][data-status="rejected"] {
    color: #b91c1c !important;
  }

  .jui\:\[\&\[data-status\=\'rejected\'\]\]\:\[background\:\#fee2e2\][data-status="rejected"] {
    background: #fee2e2 !important;
  }

  .jui\:\[\&\[data-tier\=\'associate\'\]\]\:\[color\:\#475569\][data-tier="associate"] {
    color: #475569 !important;
  }

  .jui\:\[\&\[data-tier\=\'associate\'\]\]\:\[background\:\#e2e8f0\][data-tier="associate"] {
    background: #e2e8f0 !important;
  }

  .jui\:\[\&\[data-tier\=\'gold\'\]\]\:\[color\:\#b45309\][data-tier="gold"] {
    color: #b45309 !important;
  }

  .jui\:\[\&\[data-tier\=\'gold\'\]\]\:\[background\:\#fef3c7\][data-tier="gold"] {
    background: #fef3c7 !important;
  }

  .jui\:\[\&\[data-tier\=\'other\'\]\]\:\[color\:\#6d28d9\][data-tier="other"] {
    color: #6d28d9 !important;
  }

  .jui\:\[\&\[data-tier\=\'other\'\]\]\:\[background\:\#ede9fe\][data-tier="other"] {
    background: #ede9fe !important;
  }

  .jui\:\[\&\[data-tier\=\'regular\'\]\]\:\[color\:\#1d4ed8\][data-tier="regular"] {
    color: #1d4ed8 !important;
  }

  .jui\:\[\&\[data-tier\=\'regular\'\]\]\:\[background\:\#dbeafe\][data-tier="regular"] {
    background: #dbeafe !important;
  }

  .jui\:\[\&\[data-tone\=\'0\'\]\]\:\[color\:var\(--color-pastel-pink-ink\,_\#be185d\)\][data-tone="0"] {
    color: var(--color-pastel-pink-ink, #be185d) !important;
  }

  .jui\:\[\&\[data-tone\=\'0\'\]\]\:\[background\:var\(--color-pastel-pink\,_\#fce7f3\)\][data-tone="0"] {
    background: var(--color-pastel-pink, #fce7f3) !important;
  }

  .jui\:\[\&\[data-tone\=\'0\'\]_\>_span\]\:\[background\:var\(--color-pastel-blue-ink\,_\#2563eb\)\][data-tone="0"] > span {
    background: var(--color-pastel-blue-ink, #2563eb) !important;
  }

  .jui\:\[\&\[data-tone\=\'1\'\]\]\:\[color\:var\(--color-pastel-purple-ink\,_\#6d28d9\)\][data-tone="1"] {
    color: var(--color-pastel-purple-ink, #6d28d9) !important;
  }

  .jui\:\[\&\[data-tone\=\'1\'\]\]\:\[background\:var\(--color-pastel-purple\,_\#ede9fe\)\][data-tone="1"] {
    background: var(--color-pastel-purple, #ede9fe) !important;
  }

  .jui\:\[\&\[data-tone\=\'1\'\]_\>_span\]\:\[background\:var\(--color-pastel-green-ink\,_\#059669\)\][data-tone="1"] > span {
    background: var(--color-pastel-green-ink, #059669) !important;
  }

  .jui\:\[\&\[data-tone\=\'2\'\]\]\:\[color\:var\(--color-pastel-orange-ink\,_\#c2410c\)\][data-tone="2"] {
    color: var(--color-pastel-orange-ink, #c2410c) !important;
  }

  .jui\:\[\&\[data-tone\=\'2\'\]\]\:\[background\:var\(--color-pastel-orange\,_\#ffedd5\)\][data-tone="2"] {
    background: var(--color-pastel-orange, #ffedd5) !important;
  }

  .jui\:\[\&\[data-tone\=\'2\'\]_\.assoc-tree-mark\]\:\[color\:\#15803d\][data-tone="2"] .assoc-tree-mark {
    color: #15803d !important;
  }

  .jui\:\[\&\[data-tone\=\'2\'\]_\.assoc-tree-mark\]\:\[background\:\#ecfdf3\][data-tone="2"] .assoc-tree-mark {
    background: #ecfdf3 !important;
  }

  .jui\:\[\&\[data-tone\=\'2\'\]_\>_span\]\:\[background\:var\(--color-pastel-purple-ink\,_\#7c3aed\)\][data-tone="2"] > span {
    background: var(--color-pastel-purple-ink, #7c3aed) !important;
  }

  .jui\:\[\&\[data-tone\=\'3\'\]\]\:\[color\:var\(--color-pastel-blue-ink\,_\#1d4ed8\)\][data-tone="3"] {
    color: var(--color-pastel-blue-ink, #1d4ed8) !important;
  }

  .jui\:\[\&\[data-tone\=\'3\'\]\]\:\[background\:var\(--color-pastel-blue\,_\#dbeafe\)\][data-tone="3"] {
    background: var(--color-pastel-blue, #dbeafe) !important;
  }

  .jui\:\[\&\[data-tone\=\'3\'\]_\.assoc-tree-mark\]\:\[color\:\#1d4ed8\][data-tone="3"] .assoc-tree-mark {
    color: #1d4ed8 !important;
  }

  .jui\:\[\&\[data-tone\=\'3\'\]_\.assoc-tree-mark\]\:\[background\:\#eff6ff\][data-tone="3"] .assoc-tree-mark {
    background: #eff6ff !important;
  }

  .jui\:\[\&\[data-tone\=\'3\'\]_\>_span\]\:\[background\:var\(--color-pastel-orange-ink\,_\#ea580c\)\][data-tone="3"] > span {
    background: var(--color-pastel-orange-ink, #ea580c) !important;
  }

  .jui\:\[\&\[data-tone\=\'amber\'\]\]\:\[color\:\#b45309\][data-tone="amber"] {
    color: #b45309 !important;
  }

  .jui\:\[\&\[data-tone\=\'amber\'\]\]\:\[background\:color-mix\(in_srgb\,_\#f59e0b_20\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="amber"] {
    background: #f59e0b !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&\[data-tone\=\'amber\'\]\]\:\[background\:color-mix\(in_srgb\,_\#f59e0b_20\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="amber"] {
      background: color-mix(in srgb, #f59e0b 20%, var(--ui-surface, #fff)) !important;
    }
  }

  .jui\:\[\&\[data-tone\=\'blue\'\]\]\:\[color\:\#0051d5\][data-tone="blue"] {
    color: #0051d5 !important;
  }

  .jui\:\[\&\[data-tone\=\'blue\'\]\]\:\[color\:var\(--color-pastel-blue-ink\,_\#1d4ed8\)\][data-tone="blue"] {
    color: var(--color-pastel-blue-ink, #1d4ed8) !important;
  }

  .jui\:\[\&\[data-tone\=\'blue\'\]\]\:\[color\:var\(--color-pastel-blue-ink\,_\#2563eb\)\][data-tone="blue"] {
    color: var(--color-pastel-blue-ink, #2563eb) !important;
  }

  .jui\:\[\&\[data-tone\=\'blue\'\]\]\:\[background\:\#dbe1ff\][data-tone="blue"] {
    background: #dbe1ff !important;
  }

  .jui\:\[\&\[data-tone\=\'blue\'\]\]\:\[background\:var\(--color-pastel-blue\,_\#dbeafe\)\][data-tone="blue"] {
    background: var(--color-pastel-blue, #dbeafe) !important;
  }

  .jui\:\[\&\[data-tone\=\'blue\'\]_\.assoc-dash-stat-icon\]\:\[color\:var\(--color-pastel-blue-ink\,_\#2563eb\)\][data-tone="blue"] .assoc-dash-stat-icon {
    color: var(--color-pastel-blue-ink, #2563eb) !important;
  }

  .jui\:\[\&\[data-tone\=\'blue\'\]_\.assoc-dash-stat-icon\]\:\[background\:var\(--color-pastel-blue\,_\#dbeafe\)\][data-tone="blue"] .assoc-dash-stat-icon {
    background: var(--color-pastel-blue, #dbeafe) !important;
  }

  .jui\:\[\&\[data-tone\=\'chapter\'\]\]\:\[color\:var\(--color-pastel-green-ink\,_\#059669\)\][data-tone="chapter"] {
    color: var(--color-pastel-green-ink, #059669) !important;
  }

  .jui\:\[\&\[data-tone\=\'chapter\'\]\]\:\[background\:var\(--color-pastel-green\,_\#d1fae5\)\][data-tone="chapter"] {
    background: var(--color-pastel-green, #d1fae5) !important;
  }

  .jui\:\[\&\[data-tone\=\'gold\'\]\]\:\[color\:\#d97706\][data-tone="gold"] {
    color: #d97706 !important;
  }

  .jui\:\[\&\[data-tone\=\'gold\'\]\]\:\[background\:color-mix\(in_srgb\,_\#fbbf24_22\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="gold"] {
    background: #fbbf24 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&\[data-tone\=\'gold\'\]\]\:\[background\:color-mix\(in_srgb\,_\#fbbf24_22\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="gold"] {
      background: color-mix(in srgb, #fbbf24 22%, var(--ui-surface, #fff)) !important;
    }
  }

  .jui\:\[\&\[data-tone\=\'green\'\]\]\:\[color\:\#059669\][data-tone="green"] {
    color: #059669 !important;
  }

  .jui\:\[\&\[data-tone\=\'green\'\]\]\:\[color\:var\(--color-pastel-green-ink\,_\#047857\)\][data-tone="green"] {
    color: var(--color-pastel-green-ink, #047857) !important;
  }

  .jui\:\[\&\[data-tone\=\'green\'\]\]\:\[color\:var\(--color-pastel-green-ink\,_\#059669\)\][data-tone="green"] {
    color: var(--color-pastel-green-ink, #059669) !important;
  }

  .jui\:\[\&\[data-tone\=\'green\'\]\]\:\[background\:color-mix\(in_srgb\,_\#34d399_20\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="green"] {
    background: #34d399 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&\[data-tone\=\'green\'\]\]\:\[background\:color-mix\(in_srgb\,_\#34d399_20\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="green"] {
      background: color-mix(in srgb, #34d399 20%, var(--ui-surface, #fff)) !important;
    }
  }

  .jui\:\[\&\[data-tone\=\'green\'\]\]\:\[background\:color-mix\(in_srgb\,_\#059669_12\%\,_\#fff\)\][data-tone="green"] {
    background: #e1f2ed !important;
  }

  .jui\:\[\&\[data-tone\=\'green\'\]\]\:\[background\:color-mix\(in_srgb\,_\#059669_14\%\,_\#fff\)\][data-tone="green"] {
    background: #dcf0ea !important;
  }

  .jui\:\[\&\[data-tone\=\'green\'\]\]\:\[background\:var\(--color-pastel-green\,_\#d1fae5\)\][data-tone="green"] {
    background: var(--color-pastel-green, #d1fae5) !important;
  }

  .jui\:\[\&\[data-tone\=\'green\'\]_\.assoc-dash-stat-icon\]\:\[color\:var\(--color-pastel-green-ink\,_\#059669\)\][data-tone="green"] .assoc-dash-stat-icon {
    color: var(--color-pastel-green-ink, #059669) !important;
  }

  .jui\:\[\&\[data-tone\=\'green\'\]_\.assoc-dash-stat-icon\]\:\[background\:var\(--color-pastel-green\,_\#d1fae5\)\][data-tone="green"] .assoc-dash-stat-icon {
    background: var(--color-pastel-green, #d1fae5) !important;
  }

  .jui\:\[\&\[data-tone\=\'indigo\'\]\]\:\[color\:\#4f46e5\][data-tone="indigo"] {
    color: #4f46e5 !important;
  }

  .jui\:\[\&\[data-tone\=\'indigo\'\]\]\:\[background\:color-mix\(in_srgb\,_\#818cf8_20\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="indigo"] {
    background: #818cf8 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&\[data-tone\=\'indigo\'\]\]\:\[background\:color-mix\(in_srgb\,_\#818cf8_20\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="indigo"] {
      background: color-mix(in srgb, #818cf8 20%, var(--ui-surface, #fff)) !important;
    }
  }

  .jui\:\[\&\[data-tone\=\'member\'\]\]\:\[color\:var\(--color-pastel-blue-ink\,_\#2563eb\)\][data-tone="member"] {
    color: var(--color-pastel-blue-ink, #2563eb) !important;
  }

  .jui\:\[\&\[data-tone\=\'member\'\]\]\:\[background\:var\(--color-pastel-blue\,_\#dbeafe\)\][data-tone="member"] {
    background: var(--color-pastel-blue, #dbeafe) !important;
  }

  .jui\:\[\&\[data-tone\=\'neutral\'\]\]\:\[color\:var\(--color-text-secondary\,_\#475569\)\][data-tone="neutral"] {
    color: var(--color-text-secondary, #475569) !important;
  }

  .jui\:\[\&\[data-tone\=\'neutral\'\]\]\:\[background\:var\(--color-surface-container\,_\#eef2f7\)\][data-tone="neutral"] {
    background: var(--color-surface-container, #eef2f7) !important;
  }

  .jui\:\[\&\[data-tone\=\'ok\'\]\]\:\[color\:var\(--color-pastel-green-ink\,_\#047857\)\][data-tone="ok"] {
    color: var(--color-pastel-green-ink, #047857) !important;
  }

  .jui\:\[\&\[data-tone\=\'ok\'\]\]\:\[background\:var\(--color-pastel-green\,_\#d1fae5\)\][data-tone="ok"] {
    background: var(--color-pastel-green, #d1fae5) !important;
  }

  .jui\:\[\&\[data-tone\=\'ok\'\]_span\]\:\[color\:\#15803d\][data-tone="ok"] span {
    color: #15803d !important;
  }

  .jui\:\[\&\[data-tone\=\'orange\'\]\]\:\[color\:\#ea580c\][data-tone="orange"] {
    color: #ea580c !important;
  }

  .jui\:\[\&\[data-tone\=\'orange\'\]\]\:\[color\:var\(--color-pastel-orange-ink\,_\#c2410c\)\][data-tone="orange"] {
    color: var(--color-pastel-orange-ink, #c2410c) !important;
  }

  .jui\:\[\&\[data-tone\=\'orange\'\]\]\:\[color\:var\(--color-pastel-orange-ink\,_\#ea580c\)\][data-tone="orange"] {
    color: var(--color-pastel-orange-ink, #ea580c) !important;
  }

  .jui\:\[\&\[data-tone\=\'orange\'\]\]\:\[background\:color-mix\(in_srgb\,_\#ea580c_12\%\,_\#fff\)\][data-tone="orange"] {
    background: #fcebe2 !important;
  }

  .jui\:\[\&\[data-tone\=\'orange\'\]\]\:\[background\:color-mix\(in_srgb\,_\#fb923c_20\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="orange"] {
    background: #fb923c !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&\[data-tone\=\'orange\'\]\]\:\[background\:color-mix\(in_srgb\,_\#fb923c_20\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="orange"] {
      background: color-mix(in srgb, #fb923c 20%, var(--ui-surface, #fff)) !important;
    }
  }

  .jui\:\[\&\[data-tone\=\'orange\'\]\]\:\[background\:var\(--color-pastel-orange\,_\#ffedd5\)\][data-tone="orange"] {
    background: var(--color-pastel-orange, #ffedd5) !important;
  }

  .jui\:\[\&\[data-tone\=\'orange\'\]_\.assoc-dash-stat-icon\]\:\[color\:var\(--color-pastel-orange-ink\,_\#ea580c\)\][data-tone="orange"] .assoc-dash-stat-icon {
    color: var(--color-pastel-orange-ink, #ea580c) !important;
  }

  .jui\:\[\&\[data-tone\=\'orange\'\]_\.assoc-dash-stat-icon\]\:\[background\:var\(--color-pastel-orange\,_\#ffedd5\)\][data-tone="orange"] .assoc-dash-stat-icon {
    background: var(--color-pastel-orange, #ffedd5) !important;
  }

  .jui\:\[\&\[data-tone\=\'overdue\'\]_span\]\:\[color\:\#b91c1c\][data-tone="overdue"] span {
    color: #b91c1c !important;
  }

  .jui\:\[\&\[data-tone\=\'peach\'\]\]\:\[color\:\#c2410c\][data-tone="peach"] {
    color: #c2410c !important;
  }

  .jui\:\[\&\[data-tone\=\'peach\'\]\]\:\[background\:color-mix\(in_srgb\,_\#fdba74_22\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="peach"] {
    background: #fdba74 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&\[data-tone\=\'peach\'\]\]\:\[background\:color-mix\(in_srgb\,_\#fdba74_22\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="peach"] {
      background: color-mix(in srgb, #fdba74 22%, var(--ui-surface, #fff)) !important;
    }
  }

  .jui\:\[\&\[data-tone\=\'pink\'\]\]\:\[color\:var\(--color-pastel-pink-ink\,_\#be185d\)\][data-tone="pink"] {
    color: var(--color-pastel-pink-ink, #be185d) !important;
  }

  .jui\:\[\&\[data-tone\=\'pink\'\]\]\:\[background\:var\(--color-pastel-pink\,_\#fce7f3\)\][data-tone="pink"] {
    background: var(--color-pastel-pink, #fce7f3) !important;
  }

  .jui\:\[\&\[data-tone\=\'power\'\]\]\:\[border-color\:\#fed7aa\][data-tone="power"] {
    border-color: #fed7aa !important;
  }

  .jui\:\[\&\[data-tone\=\'power\'\]\]\:\[color\:\#ea580c\][data-tone="power"] {
    color: #ea580c !important;
  }

  .jui\:\[\&\[data-tone\=\'power\'\]\]\:\[background\:\#fff7ed\][data-tone="power"] {
    background: #fff7ed !important;
  }

  .jui\:\[\&\[data-tone\=\'purple\'\]\]\:\[color\:var\(--brand-deep\)\][data-tone="purple"] {
    color: var(--brand-deep) !important;
  }

  .jui\:\[\&\[data-tone\=\'purple\'\]\]\:\[color\:var\(--color-pastel-purple-ink\,_\#6d28d9\)\][data-tone="purple"] {
    color: var(--color-pastel-purple-ink, #6d28d9) !important;
  }

  .jui\:\[\&\[data-tone\=\'purple\'\]\]\:\[color\:var\(--color-pastel-purple-ink\,_\#7c3aed\)\][data-tone="purple"] {
    color: var(--color-pastel-purple-ink, #7c3aed) !important;
  }

  .jui\:\[\&\[data-tone\=\'purple\'\]\]\:\[background\:color-mix\(in_srgb\,_var\(--brand-deep\)_12\%\,_\#fff\)\][data-tone="purple"] {
    background: var(--brand-deep) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&\[data-tone\=\'purple\'\]\]\:\[background\:color-mix\(in_srgb\,_var\(--brand-deep\)_12\%\,_\#fff\)\][data-tone="purple"] {
      background: color-mix(in srgb, var(--brand-deep) 12%, #fff) !important;
    }
  }

  .jui\:\[\&\[data-tone\=\'purple\'\]\]\:\[background\:var\(--color-pastel-purple\,_\#ede9fe\)\][data-tone="purple"] {
    background: var(--color-pastel-purple, #ede9fe) !important;
  }

  .jui\:\[\&\[data-tone\=\'purple\'\]_\.assoc-dash-stat-icon\]\:\[color\:var\(--color-pastel-purple-ink\,_\#7c3aed\)\][data-tone="purple"] .assoc-dash-stat-icon {
    color: var(--color-pastel-purple-ink, #7c3aed) !important;
  }

  .jui\:\[\&\[data-tone\=\'purple\'\]_\.assoc-dash-stat-icon\]\:\[background\:var\(--color-pastel-purple\,_\#ede9fe\)\][data-tone="purple"] .assoc-dash-stat-icon {
    background: var(--color-pastel-purple, #ede9fe) !important;
  }

  .jui\:\[\&\[data-tone\=\'rose\'\]\]\:\[color\:\#e11d48\][data-tone="rose"] {
    color: #e11d48 !important;
  }

  .jui\:\[\&\[data-tone\=\'rose\'\]\]\:\[background\:color-mix\(in_srgb\,_\#fb7185_18\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="rose"] {
    background: #fb7185 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&\[data-tone\=\'rose\'\]\]\:\[background\:color-mix\(in_srgb\,_\#fb7185_18\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="rose"] {
      background: color-mix(in srgb, #fb7185 18%, var(--ui-surface, #fff)) !important;
    }
  }

  .jui\:\[\&\[data-tone\=\'sky\'\]\]\:\[color\:\#0284c7\][data-tone="sky"] {
    color: #0284c7 !important;
  }

  .jui\:\[\&\[data-tone\=\'sky\'\]\]\:\[color\:var\(--color-pastel-sky-ink\,_\#0284c7\)\][data-tone="sky"] {
    color: var(--color-pastel-sky-ink, #0284c7) !important;
  }

  .jui\:\[\&\[data-tone\=\'sky\'\]\]\:\[color\:var\(--color-pastel-sky-ink\,_\#0369a1\)\][data-tone="sky"] {
    color: var(--color-pastel-sky-ink, #0369a1) !important;
  }

  .jui\:\[\&\[data-tone\=\'sky\'\]\]\:\[background\:color-mix\(in_srgb\,_\#38bdf8_20\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="sky"] {
    background: #38bdf8 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&\[data-tone\=\'sky\'\]\]\:\[background\:color-mix\(in_srgb\,_\#38bdf8_20\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="sky"] {
      background: color-mix(in srgb, #38bdf8 20%, var(--ui-surface, #fff)) !important;
    }
  }

  .jui\:\[\&\[data-tone\=\'sky\'\]\]\:\[background\:var\(--color-pastel-sky\,_\#e0f2fe\)\][data-tone="sky"] {
    background: var(--color-pastel-sky, #e0f2fe) !important;
  }

  .jui\:\[\&\[data-tone\=\'slate\'\]\]\:\[color\:\#475569\][data-tone="slate"] {
    color: #475569 !important;
  }

  .jui\:\[\&\[data-tone\=\'slate\'\]\]\:\[color\:var\(--color-text-secondary\,_\#475569\)\][data-tone="slate"] {
    color: var(--color-text-secondary, #475569) !important;
  }

  .jui\:\[\&\[data-tone\=\'slate\'\]\]\:\[background\:color-mix\(in_srgb\,_\#94a3b8_18\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="slate"] {
    background: #94a3b8 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&\[data-tone\=\'slate\'\]\]\:\[background\:color-mix\(in_srgb\,_\#94a3b8_18\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="slate"] {
      background: color-mix(in srgb, #94a3b8 18%, var(--ui-surface, #fff)) !important;
    }
  }

  .jui\:\[\&\[data-tone\=\'slate\'\]\]\:\[background\:var\(--color-surface-container\,_\#eef2f7\)\][data-tone="slate"] {
    background: var(--color-surface-container, #eef2f7) !important;
  }

  .jui\:\[\&\[data-tone\=\'violet\'\]\]\:\[color\:\#7c3aed\][data-tone="violet"] {
    color: #7c3aed !important;
  }

  .jui\:\[\&\[data-tone\=\'violet\'\]\]\:\[background\:color-mix\(in_srgb\,_\#a78bfa_20\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="violet"] {
    background: #a78bfa !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .jui\:\[\&\[data-tone\=\'violet\'\]\]\:\[background\:color-mix\(in_srgb\,_\#a78bfa_20\%\,_var\(--ui-surface\,_\#fff\)\)\][data-tone="violet"] {
      background: color-mix(in srgb, #a78bfa 20%, var(--ui-surface, #fff)) !important;
    }
  }

  .jui\:\[\&\[data-tone\=\'wait\'\]\]\:\[color\:var\(--color-pastel-orange-ink\,_\#c2410c\)\][data-tone="wait"] {
    color: var(--color-pastel-orange-ink, #c2410c) !important;
  }

  .jui\:\[\&\[data-tone\=\'wait\'\]\]\:\[background\:var\(--color-pastel-orange\,_\#ffedd5\)\][data-tone="wait"] {
    background: var(--color-pastel-orange, #ffedd5) !important;
  }

  .jui\:\[\&\[data-tone\=\'warn\'\]_span\]\:\[color\:\#c2410c\][data-tone="warn"] span {
    color: #c2410c !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\.sa-form\:has\(\.assoc-md-shell\)_\>_\.sa-form-head\]\:hidden[data-ui-framework="tailwind-shadcn"] .sa-form:has(.assoc-md-shell) > .sa-form-head {
    display: none !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\:is\(\.assoc-md-tool\,\.assoc-md-search\)\]\:\[min-height\:40px\][data-ui-framework="tailwind-shadcn"] :is(.assoc-md-tool, .assoc-md-search) {
    min-height: 40px !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\:is\(\.assoc-md-tool\,\.assoc-md-search\)\]\:\[border-radius\:5px\][data-ui-framework="tailwind-shadcn"] :is(.assoc-md-tool, .assoc-md-search) {
    border-radius: 5px !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\:is\(\.assoc-md-tool\,\.assoc-md-search\)\]\:\[color\:var\(--ui-muted\)\][data-ui-framework="tailwind-shadcn"] :is(.assoc-md-tool, .assoc-md-search) {
    color: var(--ui-muted) !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\:is\(\.assoc-md-tool\,\.assoc-md-search\)\]\:shadow-none[data-ui-framework="tailwind-shadcn"] :is(.assoc-md-tool, .assoc-md-search) {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\:is\(\.assoc-md-tool\,\.assoc-md-search\)\]\:\[background\:var\(--ui-surface\)\][data-ui-framework="tailwind-shadcn"] :is(.assoc-md-tool, .assoc-md-search) {
    background: var(--ui-surface) !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\:is\(\.assoc-md-tool\,\.assoc-md-search\)\]\:\[border\:1px_solid_var\(--ui-border\)\][data-ui-framework="tailwind-shadcn"] :is(.assoc-md-tool, .assoc-md-search) {
    border: 1px solid var(--ui-border) !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\:is\(\.record-row\,\.list-row\,\.assoc-im-card\,\.assoc-md-card\)\]\:min-w-0[data-ui-framework="tailwind-shadcn"] :is(.record-row, .list-row, .assoc-im-card, .assoc-md-card) {
    min-width: 0 !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\:is\(\.record-row\,\.list-row\,\.assoc-im-card\,\.assoc-md-card\)\]\:\[border-radius\:6px\][data-ui-framework="tailwind-shadcn"] :is(.record-row, .list-row, .assoc-im-card, .assoc-md-card) {
    border-radius: 6px !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\:is\(\.record-row\,\.list-row\,\.assoc-im-card\,\.assoc-md-card\)\]\:\[padding\:14px\][data-ui-framework="tailwind-shadcn"] :is(.record-row, .list-row, .assoc-im-card, .assoc-md-card) {
    padding: 14px !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\:is\(\.record-row\,\.list-row\,\.assoc-im-card\,\.assoc-md-card\)\]\:\[color\:var\(--ui-text\)\][data-ui-framework="tailwind-shadcn"] :is(.record-row, .list-row, .assoc-im-card, .assoc-md-card) {
    color: var(--ui-text) !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\:is\(\.record-row\,\.list-row\,\.assoc-im-card\,\.assoc-md-card\)\]\:shadow-none[data-ui-framework="tailwind-shadcn"] :is(.record-row, .list-row, .assoc-im-card, .assoc-md-card) {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\:is\(\.record-row\,\.list-row\,\.assoc-im-card\,\.assoc-md-card\)\]\:\[background\:var\(--ui-surface\)\][data-ui-framework="tailwind-shadcn"] :is(.record-row, .list-row, .assoc-im-card, .assoc-md-card) {
    background: var(--ui-surface) !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\:is\(\.record-row\,\.list-row\,\.assoc-im-card\,\.assoc-md-card\)\]\:\[border\:1px_solid_var\(--ui-border\)\][data-ui-framework="tailwind-shadcn"] :is(.record-row, .list-row, .assoc-im-card, .assoc-md-card) {
    border: 1px solid var(--ui-border) !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.mode-b-nav-icon\]\:inline-flex[data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .mode-b-nav-icon {
    display: inline-flex !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.mode-b-nav-icon\]\:\[color\:inherit\][data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .mode-b-nav-icon {
    color: inherit !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation\]\:flex-nowrap[data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation {
    flex-wrap: nowrap !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation\]\:\[gap\:0\][data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation {
    gap: 0 !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation\]\:\[border-radius\:0\][data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation {
    border-radius: 0 !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation\]\:border-0[data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation\]\:p-0[data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation {
    padding: 0 !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation\]\:\[background\:var\(--ui-surface\)\][data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation {
    background: var(--ui-surface) !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation\]\:\[border-bottom\:1px_solid_var\(--ui-border\)\][data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation {
    border-bottom: 1px solid var(--ui-border) !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation-item\]\:\[min-height\:40px\][data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item {
    min-height: 40px !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation-item\]\:\[flex\:1_1_0\][data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item {
    flex: 1 1 0 !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation-item\]\:\[gap\:6px\][data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item {
    gap: 6px !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation-item\]\:\[border-radius\:0\][data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item {
    border-radius: 0 !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation-item\]\:\[padding\:8px_10px\][data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item {
    padding: 8px 10px !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation-item\]\:\[font-size\:13px\][data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item {
    font-size: 13px !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation-item\]\:\[font-weight\:500\][data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item {
    font-weight: 500 !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation-item\]\:whitespace-nowrap[data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item {
    white-space: nowrap !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation-item\]\:\[border-bottom\:2px_solid_transparent\][data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item {
    border-bottom: 2px solid #0000 !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation-item\.active\]\:\[border-bottom-color\:\#2563eb\][data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item.active {
    border-bottom-color: #2563eb !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation-item\.active\]\:bg-transparent[data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item.active {
    background-color: #0000 !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation-item\.active\]\:font-semibold[data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item.active {
    --tw-font-weight: var(--jui-font-weight-semibold) !important;
    font-weight: var(--jui-font-weight-semibold) !important;
  }

  .jui\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation-item\.active\]\:\[color\:\#2563eb\][data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item.active {
    color: #2563eb !important;
  }

  .jui\:\[\&\[data-ui-framework\=\'tailwind-shadcn\'\]\[data-mode-b\=\'association\'\]_\.sa-form\[data-screen\^\=\'association-\'\]\.sa-form-list\]\:p-0[data-ui-framework="tailwind-shadcn"][data-mode-b="association"] .sa-form[data-screen^="association-"].sa-form-list {
    padding: 0 !important;
  }

  .jui\:\[\&\[data-ui-framework\=\'tailwind-shadcn\'\]\[data-mode-b\=\'association\'\]_\.sa-form\[data-screen\^\=\'association-\'\]\.sa-form-list_\>_\.sa-form-head\]\:\[padding\:0_0_0\.35rem\][data-ui-framework="tailwind-shadcn"][data-mode-b="association"] .sa-form[data-screen^="association-"].sa-form-list > .sa-form-head {
    padding: 0 0 .35rem !important;
  }

  .jui\:\[\&\[data-view\=\'cards\'\]_\.assoc-md-cards\]\:flex[data-view="cards"] .assoc-md-cards {
    display: flex !important;
  }

  .jui\:\[\&\[data-view\=\'cards\'\]_\.assoc-md-table-wrap\]\:hidden[data-view="cards"] .assoc-md-table-wrap, .jui\:\[\&\[data-view\=\'table\'\]_\.assoc-md-cards\]\:hidden[data-view="table"] .assoc-md-cards {
    display: none !important;
  }

  .jui\:\[\&\[data-view\=\'table\'\]_\.assoc-md-table-wrap\]\:block[data-view="table"] .assoc-md-table-wrap {
    display: block !important;
  }

  .jui\:\[\&\[data-zero\=\'no\'\]\]\:\[color\:\#16a34a\][data-zero="no"] {
    color: #16a34a !important;
  }

  .jui\:\[\&\[data-zero\=\'yes\'\]\]\:\[color\:\#ef4444\][data-zero="yes"] {
    color: #ef4444 !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:box-border {
    box-sizing: border-box !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:flex {
    display: flex !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:grid {
    display: grid !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:inline-flex {
    display: inline-flex !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[height\:28px\] {
    height: 28px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[height\:44px\] {
    height: 44px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:h-full {
    height: 100% !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[min-height\:40px\] {
    min-height: 40px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[width\:28px\] {
    width: 28px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[width\:44px\] {
    width: 44px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[width\:auto\] {
    width: auto !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[min-width\:180px\] {
    min-width: 180px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:min-w-0 {
    min-width: 0 !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[flex\:1\] {
    flex: 1 !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:list-none {
    list-style-type: none !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[grid-template-columns\:repeat\(3\,minmax\(0\,1fr\)\)\] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:flex-wrap {
    flex-wrap: wrap !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:items-center {
    align-items: center !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:justify-between {
    justify-content: space-between !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[gap\:5px\] {
    gap: 5px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[gap\:6px\] {
    gap: 6px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[gap\:8px\] {
    gap: 8px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[gap\:10px\] {
    gap: 10px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[gap\:14px\] {
    gap: 14px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[border-radius\:50\%\] {
    border-radius: 50% !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[border-radius\:999px\] {
    border-radius: 999px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:border-0 {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:bg-transparent {
    background-color: #0000 !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[padding\:0_0_16px\] {
    padding: 0 0 16px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[padding\:3px_8px\] {
    padding: 3px 8px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[padding\:8px_10px\] {
    padding: 8px 10px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[padding\:8px_14px\] {
    padding: 8px 14px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:p-0 {
    padding: 0 !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[padding-top\:12px\] {
    padding-top: 12px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[padding-bottom\:12px\] {
    padding-bottom: 12px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[font-size\:10px\] {
    font-size: 10px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[font-size\:12px\] {
    font-size: 12px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[font-size\:13px\] {
    font-size: 13px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[color\:\#fff\] {
    color: #fff !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[color\:var\(--color-primary\)\] {
    color: var(--color-primary) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[color\:var\(--ui-muted\)\] {
    color: var(--ui-muted) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:no-underline {
    text-decoration-line: none !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:shadow-none {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[background\:\#16a34a\] {
    background: #16a34a !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[background\:transparent\] {
    background: none !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[background\:var\(--ui-subtle\)\] {
    background: var(--ui-subtle) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[background\:var\(--ui-surface\)\] {
    background: var(--ui-surface) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[border-bottom\:1px_solid_var\(--ui-border\)\] {
    border-bottom: 1px solid var(--ui-border) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[border-top\:1px_solid_var\(--ui-border\)\] {
    border-top: 1px solid var(--ui-border) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[border\:1px_solid_var\(--ui-border\)\] {
    border: 1px solid var(--ui-border) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_\.workspace-header\]\:\[margin-block\:0\] .workspace-header {
    margin-block: 0 !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_a\]\:\[font-size\:13px\] a {
    font-size: 13px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_a\]\:font-semibold a {
    --tw-font-weight: var(--jui-font-weight-semibold) !important;
    font-weight: var(--jui-font-weight-semibold) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_a\]\:\[color\:var\(--ui-text\)\] a {
    color: var(--ui-text) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_button\]\:\[border-radius\:0\] button {
    border-radius: 0 !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_button\]\:border-0 button {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_button\]\:bg-transparent button {
    background-color: #0000 !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_button\]\:\[padding\:12px_4px\] button {
    padding: 12px 4px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_button\]\:\[font-size\:12px\] button {
    font-size: 12px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_button\]\:\[color\:var\(--ui-muted\)\] button {
    color: var(--ui-muted) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_button_span\]\:\[border-radius\:10px\] button span {
    border-radius: 10px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_button_span\]\:\[padding\:2px_5px\] button span {
    padding: 2px 5px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_button_span\]\:\[font-size\:10px\] button span {
    font-size: 10px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_button_span\]\:\[background\:var\(--ui-subtle\)\] button span {
    background: var(--ui-subtle) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_button\[data-on\=\"yes\"\]\]\:\[color\:var\(--color-primary\)\] button[data-on="yes"] {
    color: var(--color-primary) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_button\[data-on\=\"yes\"\]\]\:\[border-bottom\:2px_solid_var\(--color-primary\)\] button[data-on="yes"] {
    border-bottom: 2px solid var(--color-primary) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_h2\]\:m-0 h2 {
    margin: 0 !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_h2\]\:\[font-size\:24px\] h2 {
    font-size: 24px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_h2\]\:font-bold h2 {
    --tw-font-weight: var(--jui-font-weight-bold) !important;
    font-weight: var(--jui-font-weight-bold) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_h2\]\:\[color\:var\(--ui-text\)\] h2 {
    color: var(--ui-text) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_p\]\:\[margin\:4px_0_0\] p {
    margin: 4px 0 0 !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_p\]\:block p {
    display: block !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_p\]\:\[font-size\:13px\] p {
    font-size: 13px !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&_p\]\:\[color\:var\(--ui-muted\)\] p {
    color: var(--ui-muted) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\[data-on\=\"yes\"\]\]\:\[border-color\:var\(--color-primary\)\][data-on="yes"] {
    border-color: var(--color-primary) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\[data-on\=\"yes\"\]\]\:\[color\:var\(--color-primary\)\][data-on="yes"] {
    color: var(--color-primary) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\[data-on\=\"yes\"\]\]\:\[background\:var\(--ui-subtle\)\][data-on="yes"] {
    background: var(--ui-subtle) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] > .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\>_\&\]\:sticky {
    position: sticky !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] > .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\>_\&\]\:\[top\:0\] {
    top: 0 !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] > .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\>_\&\]\:\[z-index\:40\] {
    z-index: 40 !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] > .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\>_\&\]\:\[margin-inline\:auto\] {
    margin-inline: auto !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] > .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\>_\&\]\:\[width\:min\(900px\,100\%\)\] {
    width: min(900px, 100%) !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] > .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\>_\&\]\:\[flex-shrink\:0\] {
    flex-shrink: 0 !important;
  }

  .app-shell[data-ui-framework="tailwind-shadcn"] > .jui\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\>_\&\]\:\[background\:var\(--ui-surface\)\] {
    background: var(--ui-surface) !important;
  }

  .sa-form[data-screen^="association-"] > .sa-form-head .jui\:\[\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head_\&\]\:inline-flex {
    display: inline-flex !important;
  }

  .sa-form[data-screen^="association-"] > .sa-form-head .jui\:\[\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head_\&\]\:\[flex\:0_0_auto\] {
    flex: none !important;
  }

  .sa-form[data-screen^="association-"] > .sa-form-head .jui\:\[\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head_\&\]\:items-center {
    align-items: center !important;
  }

  .sa-form[data-screen^="association-"] > .sa-form-head .jui\:\[\.sa-form\[data-screen\^\=\'association-\'\]_\>_\.sa-form-head_\&\]\:\[gap\:0\.5rem\] {
    gap: .5rem !important;
  }

  @media (max-width: 560px) {
    .jui\:\[\@media\(max-width\:_560px\)\]\:\[grid-template-columns\:1fr\] {
      grid-template-columns: 1fr !important;
    }
  }

  @media (max-width: 640px) {
    .jui\:\[\@media\(max-width\:_640px\)\]\:\[width\:auto\] {
      width: auto !important;
    }

    .jui\:\[\@media\(max-width\:_640px\)\]\:\[\&_\.assoc-member-create\]\:\[gap\:20px\] .assoc-member-create {
      gap: 20px !important;
    }

    .jui\:\[\@media\(max-width\:_640px\)\]\:\[\&_\.assoc-member-create\]\:\[padding\:16px\] .assoc-member-create {
      padding: 16px !important;
    }

    .jui\:\[\@media\(max-width\:_640px\)\]\:\[\&_\.assoc-member-create-form_\>_\.assoc-member-create-actions_\>_\*\]\:\[flex\:1\] .assoc-member-create-form > .assoc-member-create-actions > * {
      flex: 1 !important;
    }

    .jui\:\[\@media\(max-width\:_640px\)\]\:\[\&_\.assoc-member-create-grid\]\:\[grid-template-columns\:1fr\] .assoc-member-create-grid {
      grid-template-columns: 1fr !important;
    }

    .jui\:\[\@media\(max-width\:_640px\)\]\:\[\&_\.assoc-member-create-grid\]\:\[gap\:16px\] .assoc-member-create-grid {
      gap: 16px !important;
    }

    .jui\:\[\@media\(max-width\:_640px\)\]\:\[\&_\.assoc-member-create-kind-row\]\:flex-col .assoc-member-create-kind-row {
      flex-direction: column !important;
    }

    .jui\:\[\@media\(max-width\:_640px\)\]\:\[\&_\.assoc-member-create-kind-row\]\:items-stretch .assoc-member-create-kind-row {
      align-items: stretch !important;
    }

    .jui\:\[\@media\(max-width\:_640px\)\]\:\[\&_\>_\*\]\:\[flex\:1\] > * {
      flex: 1 !important;
    }
  }

  @media (max-width: 767px) {
    .jui\:\[\@media\(max-width\:_767px\)\]\:\[grid-column\:1_\/_-1\] {
      grid-column: 1 / -1 !important;
    }

    .jui\:\[\@media\(max-width\:_767px\)\]\:\[grid-template-columns\:auto_minmax\(0\,_1fr\)\] {
      grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .jui\:\[\@media\(max-width\:_767px\)\]\:flex-row {
      flex-direction: row !important;
    }

    .jui\:\[\@media\(max-width\:_767px\)\]\:flex-wrap {
      flex-wrap: wrap !important;
    }

    .jui\:\[\@media\(max-width\:_767px\)\]\:\[overflow-x\:visible\] {
      overflow-x: visible !important;
    }

    .jui\:\[\@media\(max-width\:_767px\)\]\:\[\&_a\]\:inline-flex a {
      display: inline-flex !important;
    }

    .jui\:\[\@media\(max-width\:_767px\)\]\:\[\&_a\]\:\[min-height\:var\(--touch\)\] a {
      min-height: var(--touch) !important;
    }

    .jui\:\[\@media\(max-width\:_767px\)\]\:\[\&_a\]\:items-center a {
      align-items: center !important;
    }

    .jui\:\[\@media\(max-width\:_767px\)\]\:\[\&_button\]\:inline-flex button {
      display: inline-flex !important;
    }

    .jui\:\[\@media\(max-width\:_767px\)\]\:\[\&_button\]\:\[min-height\:var\(--touch\)\] button {
      min-height: var(--touch) !important;
    }

    .jui\:\[\@media\(max-width\:_767px\)\]\:\[\&_button\]\:items-center button {
      align-items: center !important;
    }

    .jui\:\[\@media\(max-width\:_767px\)\]\:\[\&_h2\]\:\[font-size\:1\.12rem\] h2 {
      font-size: 1.12rem !important;
    }

    .jui\:\[\@media\(max-width\:_767px\)\]\:\[\&_strong\]\:\[font-size\:1\.25rem\] strong {
      font-size: 1.25rem !important;
    }

    .jui\:\[\@media\(max-width\:_767px\)\]\:\[\&\[data-view\=\'cards\'\]_\.assoc-md-cards\]\:flex[data-view="cards"] .assoc-md-cards, .jui\:\[\@media\(max-width\:_767px\)\]\:\[\&\[data-view\=\'table\'\]_\.assoc-md-cards\]\:flex[data-view="table"] .assoc-md-cards {
      display: flex !important;
    }

    .jui\:\[\@media\(max-width\:_767px\)\]\:\[\&\[data-view\=\'table\'\]_\.assoc-md-table-wrap\]\:hidden[data-view="table"] .assoc-md-table-wrap {
      display: none !important;
    }
  }

  @media (max-width: 820px) {
    .jui\:\[\@media\(max-width\:_820px\)\]\:\[grid-template-columns\:1fr\] {
      grid-template-columns: 1fr !important;
    }
  }

  @media (max-width: 900px) {
    .jui\:\[\@media\(max-width\:_900px\)\]\:\[grid-template-columns\:1fr_1fr\] {
      grid-template-columns: 1fr 1fr !important;
    }
  }

  @media (max-width: 519px) {
    .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\@media\(max-width\:519px\)\]\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[grid-template-columns\:minmax\(0\,1fr\)\] {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }

  @media (max-width: 640px) {
    .jui\:\[\@media\(max-width\:640px\)\]\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation-item\]\:\[min-height\:44px\][data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item {
      min-height: 44px !important;
    }

    .jui\:\[\@media\(max-width\:640px\)\]\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation-item\]\:\[gap\:4px\][data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item {
      gap: 4px !important;
    }

    .jui\:\[\@media\(max-width\:640px\)\]\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation-item\]\:\[padding\:7px_4px\][data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item {
      padding: 7px 4px !important;
    }

    .jui\:\[\@media\(max-width\:640px\)\]\:\[\&\[data-ui-framework\=\"tailwind-shadcn\"\]_\[data-module-nav\=\"association\"\]_\.module-navigation-item\]\:\[font-size\:11px\][data-ui-framework="tailwind-shadcn"] [data-module-nav="association"] .module-navigation-item {
      font-size: 11px !important;
    }
  }

  @media (max-width: 767px) {
    .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\@media\(max-width\:767px\)\]\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:hidden {
      display: none !important;
    }

    .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\@media\(max-width\:767px\)\]\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:min-w-0 {
      min-width: 0 !important;
    }

    .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\@media\(max-width\:767px\)\]\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[flex\:1\] {
      flex: 1 !important;
    }

    .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\@media\(max-width\:767px\)\]\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:flex-wrap {
      flex-wrap: wrap !important;
    }

    .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\@media\(max-width\:767px\)\]\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[gap\:8px\] {
      gap: 8px !important;
    }

    .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\@media\(max-width\:767px\)\]\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\[data-view\]_\.assoc-md-cards\]\:grid[data-view] .assoc-md-cards {
      display: grid !important;
    }
  }

  @media (min-width: 700px) {
    .jui\:\[\@media\(min-width\:_700px\)\]\:\[grid-template-columns\:repeat\(2\,_minmax\(0\,_1fr\)\)\] {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  @media (min-width: 720px) {
    .jui\:\[\@media\(min-width\:_720px\)\]\:\[position\:static\] {
      position: static !important;
    }

    .jui\:\[\@media\(min-width\:_720px\)\]\:flex {
      display: flex !important;
    }

    .jui\:\[\@media\(min-width\:_720px\)\]\:\[min-height\:11\.5rem\] {
      min-height: 11.5rem !important;
    }

    .jui\:\[\@media\(min-width\:_720px\)\]\:\[min-height\:100\%\] {
      min-height: 100% !important;
    }

    .jui\:\[\@media\(min-width\:_720px\)\]\:\[grid-template-columns\:1fr_1\.15fr\] {
      grid-template-columns: 1fr 1.15fr !important;
    }

    .jui\:\[\@media\(min-width\:_720px\)\]\:\[grid-template-columns\:1fr_1fr\] {
      grid-template-columns: 1fr 1fr !important;
    }

    .jui\:\[\@media\(min-width\:_720px\)\]\:\[grid-template-columns\:minmax\(0\,_1\.25fr\)_minmax\(220px\,_0\.85fr\)\] {
      grid-template-columns: minmax(0, 1.25fr) minmax(220px, .85fr) !important;
    }

    .jui\:\[\@media\(min-width\:_720px\)\]\:\[grid-template-columns\:repeat\(3\,_1fr\)\] {
      grid-template-columns: repeat(3, 1fr) !important;
    }

    .jui\:\[\@media\(min-width\:_720px\)\]\:\[grid-template-columns\:repeat\(4\,_1fr\)\] {
      grid-template-columns: repeat(4, 1fr) !important;
    }

    .jui\:\[\@media\(min-width\:_720px\)\]\:\[grid-template-columns\:repeat\(4\,_minmax\(0\,_1fr\)\)\] {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .jui\:\[\@media\(min-width\:_720px\)\]\:flex-col {
      flex-direction: column !important;
    }

    .jui\:\[\@media\(min-width\:_720px\)\]\:justify-center {
      justify-content: center !important;
    }

    .jui\:\[\@media\(min-width\:_720px\)\]\:justify-end {
      justify-content: flex-end !important;
    }

    .jui\:\[\@media\(min-width\:_720px\)\]\:\[justify-self\:end\] {
      justify-self: end !important;
    }

    .jui\:\[\@media\(min-width\:_720px\)\]\:bg-transparent {
      background-color: #0000 !important;
    }

    .jui\:\[\@media\(min-width\:_720px\)\]\:\[padding\:0\.25rem_0_0\] {
      padding: .25rem 0 0 !important;
    }

    .jui\:\[\@media\(min-width\:_720px\)\]\:\[padding\:1\.5rem_1\.6rem\] {
      padding: 1.5rem 1.6rem !important;
    }

    .jui\:\[\@media\(min-width\:_720px\)\]\:\[border-top\:0\] {
      border-top: 0 !important;
    }

    .jui\:\[\@media\(min-width\:_720px\)\]\:\[\&_\>_\*\]\:\[flex\:0_0_auto\] > * {
      flex: none !important;
    }

    .jui\:\[\@media\(min-width\:_720px\)\]\:\[\&_a\]\:\[grid-template-columns\:auto_minmax\(0\,_1fr\)_auto_auto\] a {
      grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    }
  }

  @media (min-width: 760px) {
    .jui\:\[\@media\(min-width\:_760px\)\]\:\[grid-column\:auto\] {
      grid-column: auto !important;
    }

    .jui\:\[\@media\(min-width\:_760px\)\]\:\[grid-template-columns\:1\.4rem_2\.2rem_minmax\(0\,_1fr\)_auto\] {
      grid-template-columns: 1.4rem 2.2rem minmax(0, 1fr) auto !important;
    }

    .jui\:\[\@media\(min-width\:_760px\)\]\:flex-nowrap {
      flex-wrap: nowrap !important;
    }

    .jui\:\[\@media\(min-width\:_760px\)\]\:justify-end {
      justify-content: flex-end !important;
    }
  }

  @media (min-width: 800px) {
    .jui\:\[\@media\(min-width\:_800px\)\]\:\[grid-template-columns\:1fr_1fr\] {
      grid-template-columns: 1fr 1fr !important;
    }
  }

  @media (min-width: 900px) {
    .jui\:\[\@media\(min-width\:_900px\)\]\:\[grid-template-columns\:1fr_1fr\] {
      grid-template-columns: 1fr 1fr !important;
    }

    .jui\:\[\@media\(min-width\:_900px\)\]\:\[grid-template-columns\:repeat\(4\,_minmax\(0\,_1fr\)\)\] {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
  }

  @media (min-width: 901px) {
    .jui\:\[\@media\(min-width\:_901px\)\]\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\:has\(\[data-screen\=\'association-home\'\]\)_\#main_\>_\*\]\:box-border.mode-b-shell[data-mode-b="association"]:has([data-screen="association-home"]) #main > * {
      box-sizing: border-box !important;
    }

    .jui\:\[\@media\(min-width\:_901px\)\]\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\:has\(\[data-screen\=\'association-home\'\]\)_\#main_\>_\*\]\:\[width\:min\(900px\,_100\%\)\].mode-b-shell[data-mode-b="association"]:has([data-screen="association-home"]) #main > * {
      width: min(900px, 100%) !important;
    }

    .jui\:\[\@media\(min-width\:_901px\)\]\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\:has\(\[data-screen\=\'association-home\'\]\)_\#main_\>_\*\]\:\[max-width\:900px\].mode-b-shell[data-mode-b="association"]:has([data-screen="association-home"]) #main > * {
      max-width: 900px !important;
    }

    .jui\:\[\@media\(min-width\:_901px\)\]\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\:has\(\[data-screen\=\'association-home\'\]\)_\.page-container\]\:box-border.mode-b-shell[data-mode-b="association"]:has([data-screen="association-home"]) .page-container {
      box-sizing: border-box !important;
    }

    .jui\:\[\@media\(min-width\:_901px\)\]\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\:has\(\[data-screen\=\'association-home\'\]\)_\.page-container\]\:\[width\:min\(900px\,_100\%\)\].mode-b-shell[data-mode-b="association"]:has([data-screen="association-home"]) .page-container {
      width: min(900px, 100%) !important;
    }

    .jui\:\[\@media\(min-width\:_901px\)\]\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\:has\(\[data-screen\=\'association-home\'\]\)_\.page-container\]\:\[max-width\:900px\].mode-b-shell[data-mode-b="association"]:has([data-screen="association-home"]) .page-container {
      max-width: 900px !important;
    }

    .jui\:\[\@media\(min-width\:_901px\)\]\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\:has\(\[data-screen\=\'association-home\'\]\)_\.workspace-header\]\:box-border.mode-b-shell[data-mode-b="association"]:has([data-screen="association-home"]) .workspace-header {
      box-sizing: border-box !important;
    }

    .jui\:\[\@media\(min-width\:_901px\)\]\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\:has\(\[data-screen\=\'association-home\'\]\)_\.workspace-header\]\:\[width\:min\(900px\,_100\%\)\].mode-b-shell[data-mode-b="association"]:has([data-screen="association-home"]) .workspace-header {
      width: min(900px, 100%) !important;
    }

    .jui\:\[\@media\(min-width\:_901px\)\]\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\:has\(\[data-screen\=\'association-home\'\]\)_\.workspace-header\]\:\[max-width\:900px\].mode-b-shell[data-mode-b="association"]:has([data-screen="association-home"]) .workspace-header {
      max-width: 900px !important;
    }

    .jui\:\[\@media\(min-width\:_901px\)\]\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\:has\(\[data-screen\=\'association-home\'\]\)_main_\>_\*\]\:box-border.mode-b-shell[data-mode-b="association"]:has([data-screen="association-home"]) main > * {
      box-sizing: border-box !important;
    }

    .jui\:\[\@media\(min-width\:_901px\)\]\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\:has\(\[data-screen\=\'association-home\'\]\)_main_\>_\*\]\:\[width\:min\(900px\,_100\%\)\].mode-b-shell[data-mode-b="association"]:has([data-screen="association-home"]) main > * {
      width: min(900px, 100%) !important;
    }

    .jui\:\[\@media\(min-width\:_901px\)\]\:\[\&\.mode-b-shell\[data-mode-b\=\'association\'\]\:has\(\[data-screen\=\'association-home\'\]\)_main_\>_\*\]\:\[max-width\:900px\].mode-b-shell[data-mode-b="association"]:has([data-screen="association-home"]) main > * {
      max-width: 900px !important;
    }
  }

  @media (min-width: 960px) {
    .jui\:\[\@media\(min-width\:_960px\)\]\:\[grid-template-columns\:minmax\(0\,_1\.35fr\)_minmax\(280px\,_0\.9fr\)\] {
      grid-template-columns: minmax(0, 1.35fr) minmax(280px, .9fr) !important;
    }

    .jui\:\[\@media\(min-width\:_960px\)\]\:\[grid-template-columns\:repeat\(4\,_minmax\(0\,_1fr\)\)\] {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .jui\:\[\@media\(min-width\:_960px\)\]\:\[grid-template-columns\:repeat\(8\,_minmax\(0\,_1fr\)\)\] {
      grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    }
  }

  @media (min-width: 520px) and (max-width: 767px) {
    .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\@media\(min-width\:520px\)_and_\(max-width\:767px\)\]\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\]\:\[grid-template-columns\:repeat\(2\,minmax\(0\,1fr\)\)\] {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  @media (min-width: 768px) {
    .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\@media\(min-width\:768px\)\]\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\[data-view\=\"cards\"\]_\.assoc-md-table-wrap\]\:hidden[data-view="cards"] .assoc-md-table-wrap, .app-shell[data-ui-framework="tailwind-shadcn"] .jui\:\[\@media\(min-width\:768px\)\]\:\[\.app-shell\[data-ui-framework\=\"tailwind-shadcn\"\]_\&\[data-view\=\"table\"\]_\.assoc-md-cards\]\:hidden[data-view="table"] .assoc-md-cards {
      display: none !important;
    }
  }

  a.jui\:\[a\&\]\:grid {
    display: grid !important;
  }

  a.jui\:\[a\&\]\:\[place-items\:center\] {
    place-items: center !important;
  }

  a.jui\:\[a\&\]\:no-underline {
    text-decoration-line: none !important;
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:border-blue-500\/40 {
    border-color: var(--jui-color-blue-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:border-blue-500\/40 {
      border-color: color-mix(in oklab, var(--jui-color-blue-500) 40%, transparent) !important;
    }
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:border-rose-500\/40 {
    border-color: var(--jui-color-rose-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:border-rose-500\/40 {
      border-color: color-mix(in oklab, var(--jui-color-rose-500) 40%, transparent) !important;
    }
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-black\/20 {
    background-color: var(--jui-color-black) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-black\/20 {
      background-color: color-mix(in oklab, var(--jui-color-black) 20%, transparent) !important;
    }
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-blue-500\/15 {
    background-color: var(--jui-color-blue-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-blue-500\/15 {
      background-color: color-mix(in oklab, var(--jui-color-blue-500) 15%, transparent) !important;
    }
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-blue-500\/20 {
    background-color: var(--jui-color-blue-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-blue-500\/20 {
      background-color: color-mix(in oklab, var(--jui-color-blue-500) 20%, transparent) !important;
    }
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-emerald-500\/15 {
    background-color: var(--jui-color-emerald-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-emerald-500\/15 {
      background-color: color-mix(in oklab, var(--jui-color-emerald-500) 15%, transparent) !important;
    }
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-emerald-500\/20 {
    background-color: var(--jui-color-emerald-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-emerald-500\/20 {
      background-color: color-mix(in oklab, var(--jui-color-emerald-500) 20%, transparent) !important;
    }
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-emerald-950\/40 {
    background-color: var(--jui-color-emerald-950) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-emerald-950\/40 {
      background-color: color-mix(in oklab, var(--jui-color-emerald-950) 40%, transparent) !important;
    }
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-orange-500\/15 {
    background-color: var(--jui-color-orange-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-orange-500\/15 {
      background-color: color-mix(in oklab, var(--jui-color-orange-500) 15%, transparent) !important;
    }
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-orange-500\/20 {
    background-color: var(--jui-color-orange-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-orange-500\/20 {
      background-color: color-mix(in oklab, var(--jui-color-orange-500) 20%, transparent) !important;
    }
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-pink-500\/15 {
    background-color: var(--jui-color-pink-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-pink-500\/15 {
      background-color: color-mix(in oklab, var(--jui-color-pink-500) 15%, transparent) !important;
    }
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-rose-500\/15 {
    background-color: var(--jui-color-rose-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-rose-500\/15 {
      background-color: color-mix(in oklab, var(--jui-color-rose-500) 15%, transparent) !important;
    }
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-slate-700 {
    background-color: var(--jui-color-slate-700) !important;
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-violet-500\/15 {
    background-color: var(--jui-color-violet-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-violet-500\/15 {
      background-color: color-mix(in oklab, var(--jui-color-violet-500) 15%, transparent) !important;
    }
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-violet-500\/20 {
    background-color: var(--jui-color-violet-500) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:bg-violet-500\/20 {
      background-color: color-mix(in oklab, var(--jui-color-violet-500) 20%, transparent) !important;
    }
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:text-blue-200 {
    color: var(--jui-color-blue-200) !important;
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:text-blue-300 {
    color: var(--jui-color-blue-300) !important;
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:text-emerald-300 {
    color: var(--jui-color-emerald-300) !important;
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:text-orange-300 {
    color: var(--jui-color-orange-300) !important;
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:text-pink-300 {
    color: var(--jui-color-pink-300) !important;
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:text-rose-300 {
    color: var(--jui-color-rose-300) !important;
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:text-slate-300 {
    color: var(--jui-color-slate-300) !important;
  }

  html[data-color-mode="dark"] .jui\:\[html\[data-color-mode\=dark\]_\&\]\:text-violet-300 {
    color: var(--jui-color-violet-300) !important;
  }
}

html[data-color-mode]:has(.app-shell[data-ui-framework="tailwind-shadcn"]), html[data-color-mode] body:has(.app-shell[data-ui-framework="tailwind-shadcn"]) {
  background: var(--ui-canvas) !important;
  color: var(--ui-text) !important;
}

html[data-color-mode="dark"] body:has(.app-shell[data-ui-framework="tailwind-shadcn"]) {
  color-scheme: dark;
}

html[data-color-mode="light"] body:has(.app-shell[data-ui-framework="tailwind-shadcn"]) {
  color-scheme: light;
}

.app-shell[data-ui-framework="tailwind-shadcn"] .page-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  padding-inline: calc(var(--jui-spacing) * 3);
  margin-inline: auto;
}

.app-shell[data-ui-framework="tailwind-shadcn"] :is(.action-card, .stat-card, .insight-card, .record-card, .form-card, .panel) {
  border-radius: var(--jui-radius-lg);
  border-style: var(--tw-border-style);
  --tw-border-style: solid;
  border-style: solid;
  border-width: 1px;
  border-color: var(--ui-border);
  background-color: var(--ui-surface);
  color: var(--ui-text);
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.app-shell[data-ui-framework="tailwind-shadcn"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]), select, textarea) {
  box-sizing: border-box;
  min-height: calc(var(--jui-spacing) * 11);
  border-radius: var(--jui-radius-md);
  border-style: var(--tw-border-style);
  --tw-border-style: solid;
  border-style: solid;
  border-width: 1px;
  border-color: var(--ui-border);
  background-color: var(--ui-surface);
  color: var(--ui-text);
}

.app-shell[data-ui-framework="tailwind-shadcn"] :is(button, a):focus-visible {
  outline-style: var(--tw-outline-style);
  outline-offset: 2px;
  outline-width: 2px;
  outline-color: var(--jui-color-blue-500);
}

.app-shell[data-ui-framework="tailwind-shadcn"] {
  color: var(--ui-text);
  background: var(--ui-canvas) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: block !important;
}

.app-shell.app-shell[data-ui-framework="tailwind-shadcn"] > main {
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.app-shell[data-ui-framework="tailwind-shadcn"] .page-container {
  width: 100% !important;
  max-width: 900px !important;
  margin-inline: auto !important;
}

.app-shell[data-ui-framework="tailwind-shadcn"] .platform-canvas {
  display: none;
}

.app-shell[data-ui-framework="tailwind-shadcn"] :is(.module-navigation-stack, .mode-b-chrome-inner) {
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  padding-inline: calc(var(--jui-spacing) * 4);
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .app-shell[data-ui-framework="tailwind-shadcn"] :is(.module-navigation-stack, .mode-b-chrome-inner) {
    padding-inline: calc(var(--jui-spacing) * 6);
  }
}

.app-shell[data-ui-framework="tailwind-shadcn"] :is(.module-navigation-stack, .mode-b-chrome-inner) {
  background: none !important;
}

.app-shell[data-ui-framework="tailwind-shadcn"] .enterprise-header :is(.header-round, .icon-btn, .icon-ghost, .user-menu-trigger) {
  box-shadow: none !important;
  background-image: none !important;
}

.app-shell[data-ui-framework="tailwind-shadcn"] .module-navigation {
  gap: var(--jui-spacing);
  border-radius: var(--jui-radius-md);
  border-style: var(--tw-border-style);
  --tw-border-style: solid;
  border-style: solid;
  border-width: 1px;
  border-color: var(--ui-border);
  background-color: var(--ui-surface);
  padding: var(--jui-spacing);
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  flex-wrap: wrap !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: flex !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

.app-shell[data-ui-framework="tailwind-shadcn"] .module-navigation-item {
  min-height: calc(var(--jui-spacing) * 11);
  justify-content: center;
  align-items: center;
  gap: calc(var(--jui-spacing) * 2);
  border-radius: var(--jui-radius-md);
  padding-inline: calc(var(--jui-spacing) * 3);
  padding-block: calc(var(--jui-spacing) * 2);
  font-size: var(--jui-text-sm);
  line-height: var(--tw-leading, var(--jui-text-sm--line-height));
  color: var(--ui-muted);
  flex: 1;
  text-decoration-line: none;
  display: flex;
}

.app-shell[data-ui-framework="tailwind-shadcn"] .module-navigation-item.active {
  background-color: var(--ui-subtle);
  --tw-font-weight: var(--jui-font-weight-semibold);
  font-weight: var(--jui-font-weight-semibold);
  color: var(--ui-text);
}

.app-shell[data-ui-framework="tailwind-shadcn"] .crm-top-menu {
  gap: calc(var(--jui-spacing) * 2);
  padding-block: calc(var(--jui-spacing) * 3);
  flex-wrap: wrap;
  display: flex;
}

.app-shell[data-ui-framework="tailwind-shadcn"] .sa-form {
  max-width: 100%;
  box-shadow: none;
  background: none;
}

.app-shell[data-ui-framework="tailwind-shadcn"] :is(.sa-form-titles h1, .section-title) {
  color: var(--ui-text);
}

.app-shell[data-ui-framework="tailwind-shadcn"] :is(.muted, .field-hint, .field-meta) {
  color: var(--ui-muted);
}

.app-shell[data-ui-framework="tailwind-shadcn"] :is(.secondary-btn, .text-btn, .outline-btn) {
  min-height: calc(var(--jui-spacing) * 11);
  border-radius: var(--jui-radius-md);
  border-style: var(--tw-border-style);
  --tw-border-style: solid;
  border-style: solid;
  border-width: 1px;
  border-color: var(--ui-border);
  background-color: var(--ui-surface);
  padding-inline: calc(var(--jui-spacing) * 4);
  padding-block: calc(var(--jui-spacing) * 2);
  font-size: var(--jui-text-sm);
  line-height: var(--tw-leading, var(--jui-text-sm--line-height));
  color: var(--ui-text);
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.app-shell[data-ui-framework="tailwind-shadcn"] :is(.table-wrap, .record-table-wrap) {
  border-radius: var(--jui-radius-lg);
  border-style: var(--tw-border-style);
  --tw-border-style: solid;
  border-style: solid;
  border-width: 1px;
  border-color: var(--ui-border);
  background-color: var(--ui-surface);
}

.app-shell[data-ui-framework="tailwind-shadcn"] :is(th, td) {
  border-color: var(--ui-border);
  color: var(--ui-text);
}

@media (max-width: 640px) {
  .app-shell[data-ui-framework="tailwind-shadcn"] .module-navigation-item {
    flex-basis: 28%;
  }
}

.app-shell[data-ui-framework="tailwind-shadcn"] :is(h1, h2, h3, h4, label, legend, input, textarea, select, button) {
  font-family: var(--font-family-body) !important;
}

.app-shell[data-ui-framework="tailwind-shadcn"] .funnel-steps {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.app-shell[data-ui-framework="tailwind-shadcn"] .funnel-steps-sidebar {
  border-right: 0;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface);
}

.app-shell[data-ui-framework="tailwind-shadcn"] .funnel-steps-list {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

.app-shell[data-ui-framework="tailwind-shadcn"] .sites-mega-panel {
  flex-direction: column;
  grid-template-columns: minmax(0, 1fr);
}

.app-shell[data-ui-framework="tailwind-shadcn"] .sites-mega-side {
  border-right: 0;
  flex-wrap: wrap;
  width: auto;
  display: flex;
}

.app-shell[data-ui-framework="tailwind-shadcn"] .crm-dash-hero-card:after {
  display: none;
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}
/* Reference list appearance, shared by workspace records; frozen editors excluded. */
.data-list-more { position:relative; }
.data-list-more summary { list-style:none; display:grid; place-items:center; cursor:pointer; }
.data-list-more summary::-webkit-details-marker { display:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .data-list-more[open] > button { position:absolute; right:0; top:34px; z-index:10; width:auto; height:auto; min-height:44px; padding:10px; border-radius:5px; display:flex; gap:8px; white-space:nowrap; background:var(--ui-surface); }
.assoc-md-heading-icon { color:#3487ff; display:inline-flex; }
.app-shell[data-ui-framework="tailwind-shadcn"] .sa-form:has(.assoc-md-shell) > .sa-form-head { display:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-top { display:flex; align-items:center; gap:10px; padding-bottom:12px; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-titles { flex:1; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-titles h2 { font-size:18px; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-titles p { display:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-chips button span { font-size:10px; padding:2px 5px; border-radius:10px; background:var(--ui-subtle); }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-acts { display:flex; gap:5px; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-act { width:28px; height:28px; border:1px solid var(--ui-border); border-radius:50%; background:var(--ui-surface); color:var(--ui-muted); }
.app-shell[data-ui-framework="tailwind-shadcn"] :is(.sa-form-list,.workspace-page):has(table.responsive-records) {
 font-family: var(--font-family-body);
 color: var(--ui-text);
}
.app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records {
 width:100%; border-collapse:separate; border-spacing:0; background:var(--ui-surface);
 border:1px solid var(--ui-border); border-radius:6px; font-size:13px; overflow:hidden;
}
.app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records th {
 background:var(--ui-canvas); color:var(--ui-muted); font-size:10px;
 font-weight:600; text-transform:uppercase; letter-spacing:.04em; text-align:left;
 padding:10px 12px; border:0; border-bottom:1px solid var(--ui-border);
}
.app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records td {
 padding:12px; border:0; border-bottom:1px solid var(--ui-border); vertical-align:middle;
 background:transparent; color:var(--ui-text); overflow-wrap:anywhere;
}
.app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records tbody tr:last-child td { border-bottom:0; }
.app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records tbody tr:hover { background:var(--ui-subtle); }
.app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records tr:has(input[type="checkbox"]:checked) { background:var(--ui-subtle); }
.app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records a { color:var(--color-primary); text-decoration:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records input[type="checkbox"] { accent-color:var(--color-primary); width:16px; height:16px; }
@media(max-width:767px) {
 .app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records { border:0; background:transparent; overflow:visible; }
 .app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records tr { padding:12px; border:1px solid var(--ui-border); border-radius:6px; margin-bottom:10px; background:var(--ui-surface); }
 .app-shell[data-ui-framework="tailwind-shadcn"] table.responsive-records td { padding:5px 0; border:0; }
}
/* Existing record cards retain their data and actions in the same quiet visual system. */
.app-shell[data-ui-framework="tailwind-shadcn"] .sa-form-list {
 border:0; padding:16px 0; border-radius:0; background:var(--ui-surface); box-shadow:none;
}
.app-shell[data-ui-framework="tailwind-shadcn"] .sa-form-list .sa-form-head {
 border:0; padding:0 0 16px; background:transparent; box-shadow:none;
}
.app-shell[data-ui-framework="tailwind-shadcn"] .sa-form-list :is([class$="-search"],[class$="-toolbar"],[class$="-filters"]) {
 display:flex; align-items:center; flex-wrap:wrap; gap:8px; background:transparent; box-shadow:none;
}
.app-shell[data-ui-framework="tailwind-shadcn"] .sa-form-list :is([class$="-list"],[class$="-grid"]) {
 list-style:none; padding:0; gap:10px;
}
.app-shell[data-ui-framework="tailwind-shadcn"] .sa-form-list :is([class$="-list"],[class$="-grid"]) > li {
 min-width:0; background:var(--ui-surface); border-radius:6px; box-shadow:none;
}
.app-shell[data-ui-framework="tailwind-shadcn"] .sa-form-list :is([class$="-list"],[class$="-grid"]) > li > article {
 border:1px solid var(--ui-border); border-radius:6px; background:var(--ui-surface); color:var(--ui-text); box-shadow:none; padding:14px;
}
.app-shell[data-ui-framework="tailwind-shadcn"] .sa-form-list :is([class$="-page"],[class$="-pagination"]) {
 display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
 border-top:1px solid var(--ui-border); color:var(--ui-muted); font-size:12px; padding-top:12px;
}
.app-shell[data-ui-framework="tailwind-shadcn"] :is(.record-row,.list-row,.assoc-im-card,.assoc-md-card) {
 border:1px solid var(--ui-border); border-radius:6px; background:var(--ui-surface); box-shadow:none;
 color:var(--ui-text); padding:14px; min-width:0;
}
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-shell { background:var(--ui-surface); padding:0; border:0; box-shadow:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-metrics { display:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-top { background:transparent; padding:0 0 16px; border:0; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-titles h2 { font-size:24px; font-weight:700; margin:0; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-titles p { font-size:13px; color:var(--ui-muted); margin:4px 0 0; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-add { display:inline-flex; align-items:center; gap:6px; width:auto; min-height:40px; padding:8px 12px; border-radius:5px; background:var(--color-primary); color:var(--color-on-primary); font-size:12px; text-decoration:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-tool { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; width:auto; }
.app-shell[data-ui-framework="tailwind-shadcn"] :is(.assoc-md-tool,.assoc-md-search) { min-height:40px; border:1px solid var(--ui-border); border-radius:5px; background:var(--ui-surface); color:var(--ui-muted); box-shadow:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-search { flex:1; min-width:180px; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-tool[data-on="yes"] { border-color:var(--color-primary); background:var(--ui-subtle); color:var(--color-primary); }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-chips { border-bottom:1px solid var(--ui-border); display:flex; gap:14px; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-chips button { border:0; border-radius:0; background:transparent; padding:12px 4px; font-size:12px; color:var(--ui-muted); }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-chips button[data-on="yes"] { color:var(--color-primary); border-bottom:2px solid var(--color-primary); }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0; list-style:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-card { display:flex; flex-wrap:wrap; align-items:center; gap:10px; height:100%; box-sizing:border-box; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-card-body { flex:1; min-width:0; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-card-body a { font-size:13px; font-weight:600; color:var(--ui-text); }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-avatar { width:36px; height:36px; font-size:12px; background:var(--ui-subtle); color:var(--color-primary); box-shadow:none; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-status { border-radius:999px; padding:3px 8px; font-size:10px; }
.app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-page { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; border-top:1px solid var(--ui-border); padding-top:12px; }
.record-selection { display:flex; align-items:center; gap:14px; padding:10px 12px; margin:10px 0; border:1px solid var(--ui-border); border-radius:5px; background:var(--ui-subtle); font-size:12px; }
.record-selection button { border:0; background:transparent; color:var(--color-primary); cursor:pointer; }
.record-select { accent-color:var(--color-primary); width:16px; height:16px; }
.assoc-md-card[data-selected="true"] { outline:1px solid var(--color-primary); }
.record-card-detail { flex-basis:100%; margin:0; padding-top:8px; border-top:1px solid var(--ui-border); font-size:11px; color:var(--ui-muted); }
@media(max-width:767px) {
 .app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-table-wrap { display:none; }
 .app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-shell[data-view] .assoc-md-cards { display:grid; }
 .app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-top { gap:8px; flex-wrap:wrap; }
 .app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-titles { flex:1; min-width:0; }
}
@media(min-width:768px) {
 .app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-shell[data-view="table"] .assoc-md-cards { display:none; }
 .app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-shell[data-view="cards"] .assoc-md-table-wrap { display:none; }
}
@media(min-width:520px) and (max-width:767px) { .app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:519px) { .app-shell[data-ui-framework="tailwind-shadcn"] .assoc-md-cards { grid-template-columns:minmax(0,1fr); } }
/* 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; }
  }
}