/* Connect Domain / Live Link card — Mode B navy + soft blue accents */

.sites-live-link-card {
  margin: 0 0 1.25rem;
  padding: 1.1rem 1.15rem 1.2rem;
  border: 1px solid #d7e0ea;
  border-radius: 1rem;
  background: #fff;
  display: grid;
  gap: 0.55rem;
}

.sites-live-link-kicker,
.sites-live-link-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a97ab;
}

.sites-live-link-kicker {
  font-size: 0.72rem;
  color: #6b7a90;
}

.sites-live-link-url {
  color: #1d6fd8;
  font-weight: 600;
  word-break: break-all;
  text-decoration: none;
}

.sites-live-link-url:hover {
  text-decoration: underline;
}

.sites-live-link-hint {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.sites-live-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.25rem;
}

.sites-live-btn {
  appearance: none;
  border-radius: 0.55rem;
  border: 1px solid transparent;
  padding: 0.55rem 0.95rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sites-live-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sites-live-btn--view {
  background: #1f9d55;
  color: #fff;
}

.sites-live-btn--copy {
  background: #fff;
  border-color: #c9d4e3;
  color: #152033;
}

.sites-live-btn--hide {
  background: #e8f0fe;
  color: #1a56b0;
  border-color: #d0e0fb;
}

.sites-live-btn--search {
  width: 100%;
  background: #e7f6ea;
  color: #1b6b3a;
  border-color: #cfe9d5;
  margin-top: 0.35rem;
}

.sites-live-btn--connect {
  background: #1d6fd8;
  color: #fff;
  min-width: 6.5rem;
  flex: 0 0 auto;
}

.sites-live-link-search {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.35rem;
}

.sites-live-search-status {
  border: 1px solid #d7e0ea;
  border-radius: 0.75rem;
  background: #f6f8fb;
  padding: 0.75rem 0.85rem;
  display: grid;
  gap: 0.35rem;
}

.sites-live-search-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.sites-live-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #e4e9f0;
  color: #4b5870;
  font-size: 0.75rem;
  font-weight: 600;
}

.sites-live-link-connect {
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid #e2e8f0;
  display: grid;
  gap: 0.55rem;
}

.sites-live-connect-form {
  display: grid;
  gap: 0.35rem;
}

.sites-live-connect-row {
  display: flex;
  gap: 0.55rem;
  align-items: stretch;
}

.sites-live-domain-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid #c9d4e3;
  border-radius: 0.55rem;
  padding: 0.6rem 0.75rem;
  font: inherit;
  background: #fff;
  color: #152033;
}

.sites-live-domain-input:focus {
  outline: 2px solid #9ec0f5;
  outline-offset: 1px;
  border-color: #1d6fd8;
}

.sites-live-error {
  margin: 0;
  color: #b42318;
  font-size: 0.88rem;
}

.sites-live-dns {
  border: 1px solid #d7e0ea;
  border-radius: 0.75rem;
  background: #f8fafc;
  padding: 0.75rem 0.85rem;
  display: grid;
  gap: 0.3rem;
}

.sites-domains-lede {
  margin: 0 0 0.75rem;
}

@media (max-width: 640px) {
  .sites-live-connect-row {
    flex-direction: column;
  }

  .sites-live-btn--connect {
    width: 100%;
  }
}

.sites-website-settings {
  margin: 0 0 1.25rem;
  padding: 1.15rem 1.15rem 1.3rem;
  border: 1px solid #d7e0ea;
  border-radius: 1rem;
  background: #fff;
  display: grid;
  gap: 0.85rem;
}

.sites-website-settings-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.sites-website-settings-form {
  display: grid;
  gap: 0.85rem;
}

.sites-website-field {
  display: grid;
  gap: 0.4rem;
}

.sites-website-field > span {
  font-size: 0.92rem;
  font-weight: 650;
  color: #152033;
}

.sites-website-field input,
.sites-website-field select,
.sites-website-field textarea {
  width: 100%;
  border: 1px solid #c9d4e3;
  border-radius: 0.7rem;
  padding: 0.7rem 0.85rem;
  font: inherit;
  background: #fff;
  color: #152033;
}

.sites-website-field textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.sites-website-field small {
  color: #6b7a90;
  font-size: 0.82rem;
  line-height: 1.4;
}

.sites-website-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.sites-website-file input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}

.sites-website-file em {
  font-style: normal;
  border: 1px solid #c9d4e3;
  background: #f4f6f9;
  color: #152033;
  border-radius: 0.55rem;
  padding: 0.45rem 0.8rem;
  font-weight: 650;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.sites-website-file span {
  color: #6b7a90;
  font-size: 0.88rem;
}

.sites-website-pixels {
  border: 1px solid #d7e0ea;
  border-radius: 0.85rem;
  background: #f7f9fc;
  padding: 0.9rem 0.95rem 1rem;
  display: grid;
  gap: 0.75rem;
}

.sites-website-pixels-kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a97ab;
}

.sites-website-settings .primary-btn,
.sites-website-settings button[type='submit'] {
  width: 100%;
  border: none;
  border-radius: 0.85rem;
  background: #2563eb;
  color: #fff;
  font-weight: 700;
  padding: 0.85rem 1rem;
}

.sites-website-publish {
  width: 100%;
  border: none;
  border-radius: 0.85rem;
  background: #16a34a;
  color: #fff;
  font: inherit;
  font-weight: 700;
  padding: 0.85rem 1rem;
  cursor: pointer;
}

.sites-website-publish:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sites-website-status-note {
  margin: 0;
  text-align: right;
  color: #9aa5b5;
  font-size: 0.92rem;
}

.sites-live-slug-form {
  display: grid;
  gap: 0.35rem;
}

.sites-live-slug-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 0.65rem;
  border: 1px solid #c9d4e3;
  border-right: 0;
  border-radius: 0.55rem 0 0 0.55rem;
  background: #f4f7fb;
  color: #5c6b82;
  font-size: 0.9rem;
  font-weight: 600;
}

.sites-live-slug-input {
  border-radius: 0 0.55rem 0.55rem 0;
}

/* Shared JEEMA pictorial controls. Component-owned styles load in every workspace. */
.sites-live-link-kicker,.sites-live-link-label,.sites-website-field>span,.sites-website-pixels-kicker{display:flex;align-items:center;gap:.5rem;color:var(--ui-text,#172554);letter-spacing:normal;text-transform:none;font-size:.9rem}
.sites-live-link-kicker{font-size:1.1rem;font-weight:700;padding-bottom:.4rem}
.sites-live-link-kicker svg{color:#2563eb;background:#eff6ff;border-radius:.7rem;padding:.5rem;width:2.6rem;height:2.6rem;box-sizing:border-box}
.sites-live-link-label svg,.sites-website-field>span svg,.sites-website-pixels-kicker svg{width:1.1rem;height:1.1rem;flex-shrink:0;color:#7c3aed}
.sites-live-link-card,.sites-website-settings{background:var(--ui-surface,#fff);border-color:var(--ui-border,#dbe4ef);box-shadow:0 2px 8px #17255404;min-width:0;margin:0}
.sites-live-btn{gap:.5rem;min-height:44px}
.sites-live-btn svg{width:1.1rem;height:1.1rem;flex-shrink:0}
.sites-live-btn--copy svg{color:#7c3aed}
.sites-live-btn--hide svg{color:#2563eb}
.sites-live-link-url{display:block;padding:.85rem 1rem;border:1px solid #dbeafe;background:#eff6ff;border-radius:.75rem;overflow-wrap:anywhere;word-break:normal;font-size:.9rem}
.sites-live-link-actions{gap:.65rem}
.sites-live-link-actions>*{flex:1 1 auto}
.sites-live-link-search{grid-template-columns:minmax(0,1fr);padding:1rem;border:1px solid #dbeafe;background:#f8fafc;border-radius:.85rem}
.sites-live-link-search .sites-live-btn--search{width:auto;margin:0;justify-self:start}
.sites-live-search-status{border:0;background:none;padding:0}
.sites-live-search-status p,.sites-live-link-hint{color:var(--ui-text-muted,#64748b);font-size:.87rem;line-height:1.55}
.sites-live-badge{white-space:nowrap;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
.sites-live-link-connect{padding:1rem;border:1px solid #e2e8f0;border-radius:.85rem;background:#f8fafc;gap:.85rem}
.sites-live-domain-input{min-height:44px}
.sites-website-settings-title{position:static;width:auto;height:auto;clip:auto;overflow:visible;display:flex;align-items:center;gap:.65rem;margin:0;font-size:1.1rem;grid-column:1/-1}
.sites-website-settings-title svg{color:#0d9488;background:#ccfbf1;border-radius:.6rem;padding:.45rem;width:2.3rem;height:2.3rem;box-sizing:border-box}
.sites-website-settings-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.sites-website-settings-form>div,.sites-website-settings-form>button,.sites-website-settings-form>label:has(textarea){grid-column:1/-1}
.sites-website-field{min-width:0}
.sites-website-field>span{font-weight:600}
.sites-website-field input,.sites-website-field select{min-height:44px}
.sites-website-pixels{background:#f8fafc;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.sites-website-pixels>p{grid-column:1/-1;margin:0}
.sites-website-pixels-kicker svg{color:#ea580c}
.sites-website-settings button svg{width:1.1rem;height:1.1rem;flex-shrink:0}
.sites-website-settings button,.sites-website-settings .primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px}
.sites-website-settings :focus-visible,.sites-live-link-card :focus-visible{outline:3px solid #7c3aed;outline-offset:3px}
@media(max-width:640px){.sites-live-link-card,.sites-website-settings{padding:1rem}.sites-website-settings-form,.sites-website-pixels{grid-template-columns:minmax(0,1fr)}.sites-live-search-status-head{align-items:flex-start;flex-wrap:wrap}.sites-live-link-actions>*{flex:1 1 100%}.sites-live-link-search .sites-live-btn--search{width:100%}.sites-live-link-url{padding:.75rem}.sites-live-link-connect{padding:.85rem}}
.re-websites{width:100%;max-width:1440px;margin:auto;padding:20px;box-sizing:border-box}.re-websites h1,.re-websites h3{display:flex;align-items:center;gap:10px}.re-websites h1 svg{color:#2563eb}.re-websites p{line-height:1.6}.re-websites-search{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:24px 0}.re-websites-search svg{color:#8b5cf6}.re-websites input,.re-websites select,.re-websites textarea{max-width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:10px;padding:11px;background:var(--surface,#fff);color:inherit}.re-websites-search input{flex:1;min-width:180px}.re-websites-grid{display:grid;gap:22px}.re-websites-card{border:1px solid #dce5f2;border-radius:20px;padding:22px;background:var(--surface,#fff);min-width:0}.re-websites-card-head{display:flex;gap:16px;align-items:center}.re-websites-card h2{margin:0;overflow-wrap:anywhere}.re-websites-icon{padding:16px;border-radius:18px;color:#2563eb;background:#eff6ff}.re-websites-badges{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.re-websites-badges span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:#eff6ff;border-radius:20px;font-size:.85rem}.re-websites-badges span:nth-child(2){background:#f3e8ff}.re-websites-badges span:nth-child(3){background:#dcfce7}.re-websites-actions{display:flex;gap:12px;flex-wrap:wrap}.re-websites-actions a,.re-websites-actions button{display:flex;align-items:center;gap:7px;border:1px solid #dbe4f0;border-radius:12px;padding:10px 12px;min-height:44px;color:inherit;background:transparent;text-decoration:none;font:inherit}.re-websites-actions svg{width:19px;color:#2563eb}.re-websites-actions button:nth-child(2) svg{color:#ea580c}.re-websites-actions button:nth-child(3) svg{color:#16a34a}.re-websites-settings{margin-top:24px;display:grid;gap:24px}.re-websites-panel{padding:20px;border:1px solid #e2e8f0;border-radius:16px}.re-websites-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;border:0;padding:0;margin:18px 0}.re-websites-fields label{display:grid;gap:8px}.re-websites small{color:#64748b;line-height:1.5}.re-websites-wide{grid-column:1/-1}.re-websites-domain{display:flex;gap:12px;flex-wrap:wrap;align-items:center;overflow-wrap:anywhere}.re-websites button:focus-visible,.re-websites a:focus-visible{outline:3px solid #7c3aed;outline-offset:3px}.re-websites button:disabled{opacity:.55;cursor:not-allowed}@media(max-width:640px){.re-websites{padding:12px}.re-websites-card{padding:16px}.re-websites-fields{grid-template-columns:1fr}.re-websites-actions a,.re-websites-actions button{justify-content:center;flex:1 1 42%}.re-websites-card-head{align-items:flex-start}.re-websites-icon{padding:10px}}

.re-websites-card{background:var(--ui-subtle,#f8fafc)}
.re-websites-panel{background:var(--ui-surface,#fff);min-width:0}
.re-websites-panel h3{margin:0;font-size:1.08rem}
.re-websites-panel h3>svg{color:#7c3aed;background:#f3e8ff;border-radius:.65rem;padding:.45rem;width:2.3rem;height:2.3rem;box-sizing:border-box}
.re-websites-field-label{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9rem}
.re-websites-field-label>svg{width:1.1rem;height:1.1rem;color:#7c3aed;flex-shrink:0}
.re-websites-fields label:nth-child(3n) .re-websites-field-label>svg{color:#0891b2}
.re-websites-fields label:nth-child(3n + 1) .re-websites-field-label>svg{color:#2563eb}
.re-websites-fields input,.re-websites-fields select,.re-websites-fields textarea{width:100%;font:inherit;min-height:44px;background:var(--ui-surface,#fff)}
.re-websites-panel button svg,.re-websites-domain button svg{width:1.1rem;height:1.1rem;flex-shrink:0}
.re-websites-fields>div{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;grid-column:1/-1}
.re-websites-panel[aria-label="Page SEO"] p a{display:flex;align-items:center;gap:.6rem;min-height:44px;text-decoration:none;font-size:.92rem}
.re-websites-panel[aria-label="Page SEO"] p a svg{width:1.1rem;color:#0891b2;flex-shrink:0}
.re-websites-domain{background:var(--ui-surface,#fff);border:1px solid var(--ui-border,#dbe4ef);padding:1rem;border-radius:1rem}
@media(max-width:640px){.re-websites-settings{gap:16px}.re-websites-panel{padding:16px}.re-websites-fields{gap:16px}.re-websites-fields>div>button{width:100%}.re-websites-card-head h2{font-size:1.1rem}.re-websites-card-head p{font-size:.86rem}.re-websites-domain button{width:100%}}
.print-product-mockup{position:relative;width:100%;aspect-ratio:4/3;isolation:isolate;background:#f4eee5;overflow:hidden;border-radius:12px}.print-product-mockup>img{display:block;width:100%;height:100%;object-fit:contain}.print-mockup-ink{position:absolute;overflow:hidden;mix-blend-mode:multiply;pointer-events:none;filter:contrast(.96);opacity:.96}.print-mockup-ink>svg{width:100%;height:100%;display:block}.surface-round .print-mockup-ink{clip-path:ellipse(50% 50% at 50% 50%)}.surface-cylinder .print-mockup-ink{border-radius:4% / 1%;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.surface-fabric .print-mockup-ink{opacity:.91;filter:contrast(.92)}.print-mockup-label{position:absolute;bottom:8px;right:10px;font:8px Arial,sans-serif;letter-spacing:.2px;color:#5f655b;background:#ffffffe0;padding:4px 6px;border-radius:4px}.nana-artboard:has(.print-product-mockup){max-width:900px!important;aspect-ratio:4/3!important;width:100%!important}.nana-artboard>.print-product-mockup{border-radius:8px}.nana-mockup-note{font-size:11px;color:#647269;padding:8px 12px;margin:0;text-align:center}.nana-template-live{aspect-ratio:1.6;background:#f8f6f0;overflow:hidden;width:100%;border-radius:5px}.nana-template-live .nana-artwork{width:100%;height:100%;max-height:130px}.nana-templates .nana-template{padding:8px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;text-align:left!important;gap:5px!important}.nana-templates .nana-template strong{font-size:12px}.nana-templates .nana-template small{font-size:10px}.printly-category .print-product-mockup{border-radius:16px!important}.printly-hero-art .print-product-mockup{box-shadow:4px 12px 25px #183b2720}.ew-gallery-main>.print-product-mockup{height:auto!important;min-height:0!important}.ew-gallery-main:has(>.print-product-mockup){padding:0!important;background:transparent!important}.printly-card-picture .print-mockup-label{display:none}.printly-card-picture .print-product-mockup{border-radius:12px}.printly-category .print-mockup-label{display:none}@media(max-width:600px){.print-mockup-label{font-size:7px;right:5px;bottom:5px}.nana-mockup-note{font-size:10px}}
.nana-artboard-scroll:has(.print-product-mockup){container-type:size;align-items:center;justify-content:center;padding:12px;background:#eeedf4}.nana-artboard-scroll .nana-artboard:has(.print-product-mockup){width:min(100cqw,133cqh)!important;max-width:900px!important;margin:auto}
@layer base{.nana-library-tabs>button{min-width:0!important;flex:1 1 0!important;padding:8px!important;width:auto!important}}
html:has(dialog.nana-designer[open]),body:has(dialog.nana-designer[open]){overflow:hidden}
.nana-designer-launch{padding:22px;margin:24px 0;border:1px solid #ddd5f3;border-radius:18px;background:linear-gradient(120deg,#f4efff,#fbfaf7)}.nana-designer-launch>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.nana-designer-launch p{font-size:14px;line-height:1.6}.nana-icon-chip{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:13px;color:#6741c7;background:#ebe3ff}.nana-attached{display:flex;gap:8px;align-items:center;color:#17694e;font-weight:600}
.nana-designer{width:calc(100vw - 24px);height:calc(100dvh - 24px);max-width:1600px;max-height:none;margin:auto;padding:0;border:1px solid #dfe0e8;border-radius:20px;background:#f8f8fb;color:#243344;box-shadow:0 30px 100px #18243b55;font:14px/1.5 ui-sans-serif,system-ui,sans-serif;overflow:hidden}.nana-designer::backdrop{background:#14203988;backdrop-filter:blur(4px)}.nana-designer[open]{display:flex;flex-direction:column}.nana-designer :is(button,a,input,select,textarea){font:inherit}.nana-designer :is(button,a):focus-visible{outline:3px solid #8870e1;outline-offset:3px}.nana-designer :is(h2,p){margin:0 0 14px}.nana-designer h2{font:700 16px/1.5 ui-sans-serif,system-ui,sans-serif!important;display:flex;gap:8px;align-items:center;letter-spacing:0!important;color:#26354a!important}.nana-designer p,.nana-designer small{color:#637082}.nana-designer small{display:block;line-height:1.6;font-size:11px}.nana-designer button{min-height:40px;white-space:normal}.nana-designer button[aria-pressed=true]{background:#eee8ff!important;border-color:#8f77d1!important;color:#5635a4!important}
.nana-top{padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;border-bottom:1px solid #e2e4ec;flex:none}.nana-brand{display:flex;gap:12px;align-items:center;min-width:0}.nana-brand strong{font-size:18px;letter-spacing:-.03em}.nana-brand small{max-width:420px;overflow-wrap:anywhere}.nana-top-actions{display:flex;gap:8px;flex-wrap:wrap}.nana-top-actions button{display:flex;gap:8px;align-items:center}.nana-workspace{display:grid;grid-template-columns:220px minmax(0,1fr) 290px;min-height:0;flex:1;overflow:hidden}.nana-left,.nana-right{padding:18px;overflow:auto;min-width:0;background:#fff}.nana-left{border-right:1px solid #e2e4ec}.nana-right{border-left:1px solid #e2e4ec}.nana-library-tabs{display:flex;gap:8px;margin-bottom:22px}.nana-left>p{font-size:12px;line-height:1.7}.nana-templates{display:grid;gap:12px}.nana-designer .nana-template{display:flex!important;align-items:stretch!important;flex-direction:column!important;justify-content:flex-start!important;height:auto!important;text-align:left!important;padding:10px!important;gap:4px!important;background:#fff!important;border:1px solid #e5e4ed!important;border-radius:12px!important}.nana-template-art{height:84px;position:relative;display:flex;width:100%;border-radius:6px;align-items:center;justify-content:center;gap:14px;overflow:hidden}.nana-template-art>span{font-family:Georgia,serif;font-size:35px;font-weight:700}.nana-template-art>i{position:absolute;right:-20px;bottom:-25px;width:75px;height:75px;border-radius:50%;background:#ffffff33}.nana-template strong{font-size:13px;margin-top:6px}.nana-image-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.nana-designer .nana-image-grid button{padding:0!important;aspect-ratio:1;overflow:hidden;background:#f2f3f7!important}.nana-image-grid img{width:100%;height:100%;object-fit:cover}.nana-left>a{display:flex;gap:7px;margin:20px 0 9px;align-items:center;color:#6041a8}.nana-layers{display:grid;gap:8px}.nana-layers button{display:flex;align-items:center;gap:8px;text-align:left;min-width:0}.nana-layers span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nana-center{display:flex;flex-direction:column;min-width:0;min-height:0;background:#eeedf4}.nana-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;padding:10px;background:#fafafe;border-bottom:1px solid #e0deeb;flex:none}.nana-tools button{display:flex;gap:6px;align-items:center;padding:8px 10px!important}.nana-tools>span{font-size:11px;min-width:30px;text-align:center}.nana-divider{height:25px;border-left:1px solid #d9d7e4;min-width:0!important;margin:0 4px}.nana-artboard-scroll{flex:1;overflow:auto;padding:42px 32px;min-height:160px;display:flex;align-items:flex-start;justify-content:flex-start;touch-action:none;background-image:radial-gradient(#d9d5e5 .7px,transparent .7px);background-size:12px 12px}.nana-artboard{flex:none;margin:auto;box-shadow:0 8px 30px #241a431f;line-height:0;min-width:100px;user-select:none}.nana-artwork{width:100%;height:100%;display:block;overflow:hidden;touch-action:none}.nana-guide-legend{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;font-size:10px;padding:10px;color:#656d7e;background:#f5f4fa}.nana-guide-legend span{display:flex;gap:5px;align-items:center}.nana-trim:before{content:'';width:16px;border-top:2px solid #bd5163}.nana-safe:before{content:'';width:16px;border-top:2px dashed #369a86}.nana-pages{display:flex;gap:8px;flex-wrap:wrap;padding:14px;justify-content:center;background:#fff;border-top:1px solid #e5e4ed;flex:none}.nana-pages button{font-size:12px;display:flex;gap:5px;align-items:center}
.nana-designer label{display:flex;flex-direction:column;gap:5px;margin:11px 0;font-size:12px;font-weight:600;color:#485269}.nana-designer :is(input:not([type=checkbox]):not([type=range]):not([type=color]),select,textarea){width:100%;box-sizing:border-box;padding:10px;border:1px solid #d8dbe6;border-radius:8px;min-height:40px;background:#fff;color:#243344;outline-offset:2px}.nana-designer textarea{min-height:100px;resize:vertical}.nana-designer input[type=color]{width:100%;height:36px;padding:3px;border:1px solid #d8dbe6;border-radius:8px;background:#fff}.nana-designer input[type=range]{width:100%;accent-color:#7250c7}.nana-number-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}.nana-property-actions{display:flex;gap:6px;flex-wrap:wrap}.nana-property-actions button{font-size:12px;display:flex;gap:5px;align-items:center}.nana-layer-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #e5e4ed;padding-top:18px;margin-top:20px}.nana-layer-heading>div{display:flex;gap:5px}.nana-layer-heading button{padding:6px!important;min-width:35px!important}.nana-select-hint{padding:26px 5px;text-align:center;color:#8b7bb2}.nana-select-hint p{margin:10px 0 0;font-size:12px}.nana-pricing{margin-top:24px;padding-top:22px;border-top:1px solid #e1e3eb}.nana-pricing .nana-live-price{display:block;font-size:21px;margin:18px 0 12px;color:#4b338d}.nana-pricing p{font-size:12px;margin-top:12px}.nana-pricing label{font-size:12px}.nana-bottom{padding:13px 20px;background:#fff;border-top:1px solid #e2e4ec;display:flex;justify-content:space-between;gap:12px;align-items:center;flex:none}.nana-bottom>div:first-child>span{font-size:11px;color:#73728a;display:flex;gap:7px;align-items:center}.nana-confirm{display:flex;gap:16px;align-items:center}.nana-confirm label{display:flex;flex-direction:row;gap:8px;align-items:center;font-size:11px;max-width:240px}.nana-confirm input{accent-color:#6741c7}.nana-confirm button{display:flex;align-items:center;gap:7px;background:#6441bf!important;color:white!important;border-color:#6441bf!important}.nana-confirm button:disabled{opacity:.5}.nana-messages{padding:7px 20px;background:#fff6df;color:#795d21;font-size:11px;flex:none}.nana-mobile-tabs{display:none}
.nana-order-designs{margin:18px 0;padding:20px;border:1px solid #ded6ef;border-radius:14px;background:#faf8fe}.nana-order-designs summary{font-weight:600;cursor:pointer}.nana-order-designs img{display:block;max-width:100%;max-height:400px;margin:16px 0;background:#fff;border:1px solid #ddd}.nana-order-designs button,.nana-order-designs a{margin:8px 8px 0 0}.nana-cart-artwork{max-width:220px;max-height:180px;overflow:hidden;margin:10px 0;border:1px solid #ddd;border-radius:8px}.nana-cart-artwork .nana-artwork{height:auto}
@media(max-width:1100px){.nana-workspace{grid-template-columns:180px minmax(0,1fr) 250px}.nana-top{padding:12px}.nana-brand small{max-width:230px}.nana-left,.nana-right{padding:14px}.nana-artboard-scroll{padding:30px 20px}.nana-bottom>div:first-child{display:none}.nana-bottom{justify-content:flex-end}.nana-confirm label{max-width:none}}
@media(max-width:800px){.nana-designer{width:100%;box-sizing:border-box;height:100dvh;border-radius:0;margin:0;max-width:none;border:0}.nana-top{align-items:flex-start;gap:8px}.nana-brand .nana-icon-chip{display:none}.nana-brand strong{font-size:15px}.nana-brand small{font-size:10px;max-width:170px}.nana-top-actions{gap:4px}.nana-top-actions button{font-size:11px;padding:7px!important;min-height:38px}.nana-mobile-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:8px;background:#fff}.nana-mobile-tabs button{font-size:10px;padding:5px!important;min-height:42px;line-height:1.4}.nana-workspace{display:flex;flex-direction:column}.nana-left,.nana-right,.nana-center{display:none;flex:1;overflow:auto}.nana-workspace[data-panel=assets] .nana-left{display:block}.nana-workspace[data-panel=canvas] .nana-center{display:flex;overflow:hidden}.nana-workspace:is([data-panel=properties],[data-panel=pricing]) .nana-right{display:block}.nana-workspace[data-panel=pricing] .nana-properties{display:none}.nana-workspace[data-panel=properties] .nana-pricing{display:none}.nana-workspace[data-panel=pricing] .nana-pricing{margin:0;padding:8px 0;border:0}.nana-templates{grid-template-columns:repeat(2,minmax(0,1fr))}.nana-image-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.nana-tools{gap:4px;padding:8px}.nana-tools button{font-size:11px;padding:7px!important;min-height:38px}.nana-artboard-scroll{padding:24px 14px}.nana-guide-legend{font-size:9px;gap:8px;padding:7px}.nana-pages{padding:8px;gap:5px}.nana-pages button{font-size:10px;padding:6px!important;min-height:36px}.nana-confirm{width:100%;justify-content:space-between;gap:10px}.nana-confirm label{font-size:10px;max-width:200px;margin:0}.nana-confirm button{font-size:11px;padding:9px!important;flex:none}.nana-bottom{padding:10px}.nana-messages{font-size:10px;max-height:55px;overflow:auto;padding:6px 12px}}

.nana-customer-library{border:1px solid #d8c9f6;border-radius:14px;padding:12px;margin-bottom:22px;background:linear-gradient(145deg,#f2ebff,#f0fbf7);overflow-wrap:anywhere}.nana-private-title{display:flex;align-items:center;gap:8px}.nana-private-title>span{display:flex;padding:8px;border-radius:10px;background:#e4d8ff;color:#683ab7}.nana-private-title h2{margin:0!important}.nana-customer-library>button{width:100%;margin:7px 0;justify-content:flex-start}.nana-customer-library p{font-size:12px;margin:12px 0}.nana-customer-library small{font-size:10px}.nana-private-login{display:grid;gap:9px}.nana-private-login label{display:grid;gap:4px;font-size:12px}.nana-private-login input{min-width:0;width:100%;box-sizing:border-box;padding:9px;border:1px solid #d7d5e4;border-radius:8px;background:#fff}.nana-private-account{display:flex;gap:6px;align-items:center;font-size:10px;margin:12px 0;color:#23604f}.nana-private-account span{flex:1;min-width:0;overflow-wrap:anywhere}.nana-private-account button{flex:none}.nana-private-upload{display:grid;gap:8px;padding:14px;background:#fff;border:1px dashed #9571d0;border-radius:12px;color:#6140a7;font-size:12px;cursor:pointer}.nana-private-upload span{font-size:10px;color:#546775}.nana-private-upload input{display:block;max-width:100%;font-size:10px;min-width:0;color:#26364a}.nana-private-drive{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:12px 0;color:#287657;font-size:12px}.nana-private-drive small{width:100%;color:#4f695d}.nana-private-backup{display:flex;gap:6px;font-size:11px;line-height:1.5;align-items:flex-start;margin:6px 0}.nana-private-backup input{flex:none}.nana-private-actions{display:grid;gap:7px;margin:10px 0}.nana-private-actions button{font-size:11px;justify-content:flex-start}.nana-private-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:12px 0}.nana-private-grid button{display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:7px!important}.nana-private-grid img{width:100%;height:75px;object-fit:contain;border-radius:7px;background:#fff}.nana-private-grid span{display:flex;align-items:center;gap:4px;overflow:hidden;text-overflow:ellipsis;font-size:9px}.nana-private-grid small{color:#287657}

/* Private artwork actions must remain readable in the narrow asset panel. */
.nana-designer .nana-private-grid{grid-template-columns:minmax(0,1fr)}.nana-designer .nana-private-grid button{width:100%;gap:6px;height:auto!important}.nana-designer .nana-private-grid img{height:105px}.nana-designer .nana-private-grid span{font-size:11px;overflow-wrap:anywhere;text-align:left}.nana-designer .nana-upload-entry{background:#6845bd!important;color:#fff!important;border-color:#6845bd!important;gap:8px;min-height:48px}.nana-private-images-heading{font-size:12px;margin:14px 0 7px}.nana-designer .nana-private-upload input[type=file]{padding:7px;font-size:11px}.nana-designer .nana-private-upload input[type=file]::file-selector-button{border:0;border-radius:6px;background:#ede5ff;color:#5936a0;padding:8px;font-weight:600;cursor:pointer}.nana-designer .nana-customer-library>button{gap:7px}.nana-designer .nana-private-backup{flex-direction:row}.nana-designer .nana-private-grid small{font-size:11px}

.sites-private-media-modal{width:min(920px,calc(100vw - 24px));height:min(760px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);box-sizing:border-box;border:1px solid #d9d3eb;border-radius:18px;padding:20px;background:#fff;color:#243344;overflow:auto;font:14px/1.5 system-ui,sans-serif}.sites-private-media-modal::backdrop{background:#17213a88}.sites-private-media-modal>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.sites-private-media-modal h2{display:flex;align-items:center;gap:10px;font-size:20px;color:#6543b2}.sites-private-media-intro{color:#5b687b;font-size:13px}.sites-private-media-content .nana-customer-library{margin:0}.sites-private-media-content .sites-media-board-toolbar{display:flex;gap:10px;margin:16px 0}.sites-private-media-content .sites-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.sites-private-media-content .sites-media-card{min-width:0;border:1px solid #dedbea;border-radius:12px;padding:8px}.sites-private-media-content .sites-media-card-pick{width:100%;border:0;background:#f4f1fb;border-radius:8px;padding:5px;cursor:pointer}.sites-private-media-content .sites-media-thumb{display:block;width:100%;height:130px;object-fit:contain}.sites-private-media-content .sites-media-read{padding:8px;overflow-wrap:anywhere;font-size:12px}.sites-private-media-content .sites-media-kind{display:block;color:#277458;font-size:11px}.nana-library-launch>button{width:100%;gap:7px;min-height:48px}.nana-library-launch p{font-size:12px;color:#637082}.sites-private-media-content .nana-private-login{max-width:420px}.sites-private-media-content .nana-customer-library>button{max-width:420px}.sites-private-media-content .nana-private-actions{display:flex;flex-wrap:wrap}.sites-private-media-content .nana-private-actions button{min-height:44px}.sites-private-media-modal :is(button,input):focus-visible{outline:3px solid #8a6be0;outline-offset:2px}@media(max-width:600px){.sites-private-media-modal{padding:12px}.sites-private-media-content .sites-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sites-private-media-modal h2{font-size:17px}}
.dp-page{max-width:1280px;margin:auto;padding:24px;color:#183047}.dp-page *{box-sizing:border-box}.dp-header,.dp-toolbar,.dp-row,.dp-set{display:flex;align-items:center;gap:12px}.dp-header,.dp-toolbar,.dp-set{justify-content:space-between}.dp-header{margin-bottom:24px;flex-wrap:wrap}.dp-header a,.dp-header h1,.dp-back{display:flex;align-items:center;gap:10px}.dp-header h1{font-size:28px;margin:14px 0 6px}.dp-page p{color:#64748b;font-size:14px;line-height:1.6}.dp-page button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #d9e2ec;background:white;border-radius:9px;padding:10px 12px;color:#183047;cursor:pointer;min-height:42px}.dp-page button:disabled{opacity:.45;cursor:default}.dp-page .dp-primary{background:#0f766e;color:white;border-color:#0f766e}.dp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}.dp-stats>div,.dp-card{background:white;border:1px solid #e2e8f0;border-radius:16px;padding:22px}.dp-stats strong{display:block;font-size:28px;color:#0f766e;margin-bottom:4px}.dp-card{margin-bottom:18px;min-width:0}.dp-card h2{display:flex;gap:8px;align-items:center;margin:0 0 16px;font-size:19px}.dp-page label,.dp-field{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:500;margin-bottom:13px;min-width:0}.dp-page input:not([type=checkbox]):not([type=radio]),.dp-page select,.dp-page textarea{width:100%;min-width:0;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#183047;padding:10px;font:inherit;min-height:42px}.dp-page .dp-check{flex-direction:row;align-items:center;gap:8px;margin:8px 0}.dp-page input[type=checkbox],.dp-page input[type=radio]{width:18px;height:18px;flex-shrink:0}.dp-toolbar{margin-bottom:18px}.dp-toolbar>input{max-width:460px}.dp-set{padding:14px 0;border-top:1px solid #edf2f7;flex-wrap:wrap}.dp-set-name{flex:1;align-items:flex-start!important;flex-direction:column;border:0!important;text-align:left}.dp-set-name span{font-size:12px;color:#64748b}.dp-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;margin-top:18px}.dp-preview{align-self:start;position:sticky;top:20px}.dp-editor fieldset{border:0;margin:0;padding:0;min-width:0}.dp-item{border:1px solid #e2e8f0;background:#f8fafc;border-radius:12px;padding:16px;margin-bottom:16px}.dp-item h3{margin:0 auto 12px 0;font-size:15px}.dp-item>.dp-row{justify-content:space-between}.dp-two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.dp-conditions{margin-top:12px}.dp-conditions>.dp-row{margin-bottom:8px}.dp-conditions>.dp-row>*{flex:1}.dp-row>label{flex:1}.dp-wrap{flex-wrap:wrap}.dp-wrap>input{flex:1 1 90px;max-width:calc(50% - 12px)}.dp-note{background:#f1f5f9;padding:10px 12px;border-radius:8px}.dp-error{padding:14px;background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:10px;margin-bottom:16px}.dp-empty{text-align:center;padding:46px 16px}.dp-empty svg{color:#0f766e}.dp-products{max-height:280px;overflow:auto}.dp-page summary{cursor:pointer;padding:10px 0}.dp-back{margin-bottom:16px}.dp-inputs{margin-top:16px}@media(max-width:800px){.dp-page{padding:16px}.dp-layout{grid-template-columns:1fr}.dp-preview{position:static}.dp-stats{gap:8px}.dp-stats>div{padding:14px;font-size:12px}.dp-stats strong{font-size:23px}.dp-toolbar{flex-wrap:wrap}.dp-card{padding:16px}.dp-two{grid-template-columns:1fr}.dp-set>.dp-row{flex-wrap:wrap}.dp-header h1{font-size:24px}.dp-conditions>.dp-row{flex-wrap:wrap}.dp-conditions>.dp-row>*{flex:1 1 90px}}

.dp-visual{position:relative;width:100%;container-type:inline-size;overflow:hidden;border:1px solid #cbd5e1;border-radius:12px;margin:16px 0;isolation:isolate}.dp-visual-background{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.dp-visual-image{width:100%;height:100%;object-fit:contain;pointer-events:none}.dp-visual span{white-space:pre-wrap;overflow-wrap:anywhere;display:block;line-height:1.2}.dp-swatches{display:flex;gap:8px;flex-wrap:wrap}.dp-swatches button{display:flex;flex-direction:column;max-width:110px}.dp-swatches button[aria-pressed=true]{outline:2px solid #0f766e}.dp-swatch-image{width:60px;height:60px;object-fit:contain}

/* Keep pricing-library controls independent of global commerce button widths. */
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px;border:1px solid #e2e8f0;border-radius:12px;margin-top:12px;background:#fff;min-width:0}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set>button.dp-set-name{width:100%!important;max-width:none!important;min-width:0!important;flex:1 1 auto!important;white-space:normal;overflow-wrap:anywhere;padding:8px;text-align:left;align-items:flex-start!important}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set-name strong{display:flex;align-items:center;gap:10px;font-size:16px;line-height:1.4}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set-name strong svg{flex-shrink:0;color:#0f766e}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set-name span{font-size:13px;line-height:1.5}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set-name span:last-child{color:#0f766e;font-weight:600}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set>.dp-row{width:auto;min-width:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set>.dp-row>button{width:44px!important;min-width:44px!important;max-width:44px!important;min-height:44px;flex:0 0 44px!important;padding:10px}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set>.dp-row>.dp-check{flex:0 0 auto;margin:0;padding:10px 8px;min-height:44px;width:auto}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set button:focus-visible{outline:2px solid #0f766e;outline-offset:3px}
@media(max-width:800px){.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px}.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set>.dp-row{justify-content:flex-start;border-top:1px solid #edf2f7;padding-top:10px}.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set>.dp-row>.dp-check{margin-right:auto}.dp-page .dp-toolbar>button{width:auto!important;max-width:100%!important;white-space:normal}}

@layer components {
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set>button.dp-set-name{width:100%!important;max-width:none!important;min-width:0!important;flex:1 1 auto!important}
.app-shell[data-design-system="common"] .dp-page[data-screen="dynamic-pricing"] .dp-set>.dp-row>button[data-slot="button"]{width:44px!important;min-width:44px!important;max-width:44px!important;flex:0 0 44px!important}
}

/* Product identity uses the existing tenant-owned product media resolver. */
.app-shell .dp-page .dp-set>button.dp-set-name{flex-direction:row;align-items:center!important;justify-content:flex-start;gap:16px}
.app-shell .dp-page .dp-set-products{display:flex;flex-wrap:wrap;gap:8px;flex:0 0 auto;max-width:224px}
.app-shell .dp-page .dp-set-products:empty{display:none}
.app-shell .dp-page .dp-set-product{display:flex;flex-direction:column;gap:4px;width:96px;text-align:center}
.app-shell .dp-page .dp-set-product-image{display:block;width:96px;height:80px;object-fit:contain;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc}
.app-shell .dp-page .dp-set-product>span{font-size:11px;line-height:1.3;color:#475569;overflow-wrap:anywhere}
.app-shell .dp-page .dp-set-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:7px;text-align:left}
@media(max-width:600px){.app-shell .dp-page .dp-set>button.dp-set-name{flex-wrap:wrap}.app-shell .dp-page .dp-set-products{max-width:100%}.app-shell .dp-page .dp-set-product{width:72px}.app-shell .dp-page .dp-set-product-image{width:72px;height:64px}}
.ew-builder{--ew-accent:#176b58;--ew-border:#e1e4e1;--ui-text:#25312c;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#25312c;background:#f1f3f1;max-width:1800px;margin:auto;padding:20px;min-width:0}.ew-builder *{box-sizing:border-box}.ew-builder button,.ew-builder input,.ew-builder select,.ew-builder textarea{font:inherit}.ew-builder button,.ew-actions a{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 13px;border:1px solid #d7ddd8;border-radius:7px;background:#fff;color:#283a30;font-size:12px;font-weight:550;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}.ew-builder button:hover{background:#f0f4ef;border-color:#9daea1}.ew-builder button:disabled{opacity:.45;cursor:default}.ew-builder button:focus-visible,.ew-builder a:focus-visible,.ew-builder input:focus-visible,.ew-builder select:focus-visible,.ew-builder textarea:focus-visible{outline:2px solid #176b58;outline-offset:3px}.ew-builder a{color:#176b58}.ew-builder button[aria-pressed=true]{background:#e7f0e9;border-color:#7da58a;color:#16452c}.ew-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 0 16px;border-bottom:1px solid var(--ew-border)}.ew-header>div:first-child>a{font-size:11px;text-decoration:none;color:#68776d}.ew-header h1{font-size:21px!important;letter-spacing:-.5px;margin:6px 0!important;line-height:1.2}.ew-header p{font-size:12px;color:#727d74;margin:4px 0}.ew-eyebrow{font-size:9px!important;font-weight:650;letter-spacing:.16em;margin-top:10px!important}.ew-eyebrow span{display:inline-block;letter-spacing:0;background:#e5e8e4;border-radius:4px;padding:3px 6px;margin-left:8px;color:#59665b}.ew-actions,.ew-toolbar,.ew-view-tabs{display:flex;align-items:center;gap:8px}.ew-actions{flex-wrap:wrap}.ew-actions>button:not(.ew-focus-toggle){background:#176b58;color:#fff;border-color:#176b58}.ew-actions>span{font-size:11px;color:#79847b}.ew-safety{font-size:11px;color:#6e786f;margin:12px 0}.ew-toolbar{justify-content:space-between;gap:12px;padding:0 0 14px}.ew-view-tabs{background:#e6e9e5;border-radius:8px;padding:3px}.ew-view-tabs button{border:0;background:transparent;padding:7px 12px}.ew-view-tabs button[aria-pressed=true]{background:white;box-shadow:0 1px 3px #18271b15;color:#29392e}.ew-store-stats{font-size:11px;color:#728074}.ew-workspace{display:grid;grid-template-columns:210px minmax(0,1fr) 250px;gap:14px;align-items:start;min-height:0}.ew-palette,.ew-inspector{background:#fff;border:1px solid var(--ew-border);border-radius:10px;padding:16px;min-width:0}.ew-palette h2,.ew-inspector h2{font-size:11px!important;text-transform:uppercase;letter-spacing:.08em;color:#718075!important;margin:5px 0 12px}.ew-palette button{display:flex;justify-content:flex-start;text-align:left;width:100%;border-color:transparent;background:transparent;margin-bottom:5px;font-weight:450;line-height:1.5}.ew-palette button span{display:grid;place-items:center;background:#f0f3ee;border:1px solid #e5e9e2;border-radius:5px;width:26px;height:26px;flex:none;color:#4b6351;font-size:15px}.ew-palette button[aria-pressed=true]{border-color:#cee1d1;background:#edf4ed}.ew-palette h2:not(:first-child){border-top:1px solid #edf0eb;padding-top:20px;margin-top:17px}.ew-palette a{display:block;font-size:11px;margin-top:22px;line-height:1.5}.ew-canvas{min-width:0;background:#e4e8e4;padding:16px;border:1px solid #dce1db;border-radius:10px;overflow:auto}.ew-canvas-label{font-size:9px;font-weight:600;letter-spacing:.14em;color:#7a887d;margin:0 0 14px;display:flex;align-items:center;gap:7px}.ew-canvas-label:before{content:'';width:6px;height:6px;border-radius:50%;background:#729778}.ew-device{min-width:0;width:100%;margin:auto;container-type:inline-size;background:#fff;box-shadow:0 8px 40px #1b301318;overflow:hidden}.ew-phone{max-width:390px}.ew-inspector label{display:grid;gap:6px;font-size:11px;color:#586b5b;margin:12px 0}.ew-inspector input,.ew-inspector textarea,.ew-inspector select{width:100%;min-width:0;border:1px solid #dce2da;background:#fbfcfa;border-radius:6px;padding:9px 10px;color:#2f4033;font-size:12px}.ew-inspector textarea{min-height:90px;resize:vertical}.ew-inspector input[type=color]{height:38px;padding:4px;cursor:pointer}.ew-inspector fieldset{border:0;padding:18px 0 0;margin-top:18px;border-top:1px solid #e7ebe4}.ew-inspector legend{font-size:11px;font-weight:650;color:#445848}.ew-inspector h2:not(:first-child){margin-top:22px}.ew-section-row{display:flex;gap:3px;margin-bottom:5px}.ew-section-row>button:first-child{flex:1;min-width:0;text-align:left;justify-content:flex-start;overflow-wrap:anywhere;font-weight:450}.ew-section-row>button{font-size:11px;padding:7px;min-height:32px}.ew-error,.ew-form-error{border:1px solid #efcdc5;border-radius:8px;background:#fff3ef;padding:13px;color:#8d3b28}.ew-error button{margin-left:12px}.ew-builder>p[role=status]{font-size:12px;color:#365f41}.ew-focus{position:fixed;inset:0;z-index:200;max-width:none;padding:16px 22px;display:flex;flex-direction:column;overflow:auto}.ew-focus .ew-header{flex:none}.ew-focus .ew-header>div:first-child>p:last-child{display:none}.ew-focus .ew-header h1{font-size:18px!important}.ew-focus .ew-eyebrow{display:none}.ew-focus .ew-workspace{flex:1;overflow:hidden;align-items:stretch}.ew-focus .ew-canvas,.ew-focus .ew-palette,.ew-focus .ew-inspector{overflow:auto;scrollbar-width:thin}.ew-focus .ew-toolbar{flex:none}.ew-focus .ew-safety{margin:8px 0}.ew-preview-only{max-width:1440px;margin:auto}.ew-preview-mode .ew-store-stats{margin-left:auto}.ew-preview-mode .ew-canvas{padding:20px}.ew-empty{text-align:center;padding:65px 24px;color:#6d796e}.ew-empty>span{font-size:42px;color:#78977c}.ew-empty h2,.ew-empty h3{color:#354637}.ew-empty p{font-size:13px;line-height:1.7}
/* Storefront: self-contained typography, surfaces and controls. */
.ew-store{--sf-ink:#20382d;--ui-text:#20382d;--sf-muted:#718075;--sf-line:#e4e9e1;--sf-accent:#245c46;color:var(--sf-ink);background:#fff;font-size:14px;line-height:1.6;min-width:0}.ew-builder .ew-store :is(h1,h2,h3,h4){color:var(--sf-ink)!important;font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.035em;line-height:1.13;margin:0}.ew-builder .ew-store button{font-family:inherit;font-size:12px}.ew-store input,.ew-store select,.ew-store textarea{font:inherit;max-width:100%;min-width:0}.ew-announcement{background:#203f31;color:#f7faf5;text-align:center;padding:8px 16px;font-size:10px;letter-spacing:.08em}.ew-store-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 5%;border-bottom:1px solid var(--sf-line)}.ew-builder .ew-store .ew-wordmark{display:block;padding:0;border:0;background:none;text-align:left;font-family:Georgia,serif;font-size:22px;line-height:1.1;letter-spacing:-.6px;color:var(--sf-ink)}.ew-wordmark span{display:block;font:7px/1.5 ui-sans-serif,system-ui,sans-serif;letter-spacing:.18em;margin-top:6px;color:#7b897e}.ew-store-header nav{display:flex;gap:14px}.ew-store-header nav button{border:0;padding:4px;background:none;font-size:11px!important}.ew-store-mark{font-size:27px;color:#6a896e}.ew-kicker{display:block;font-size:9px;font-weight:600;letter-spacing:.16em;color:#76836b;line-height:1.6}.ew-hero{display:grid;grid-template-columns:1.1fr 1fr;background:#f2f1e9;min-height:380px;overflow:hidden}.ew-hero-copy{padding:58px 10% 45px;align-self:center}.ew-builder .ew-store .ew-hero h1{font-size:clamp(30px,5cqw,62px)!important;margin:17px 0;max-width:580px}.ew-hero p{font-size:13px;line-height:1.8;color:#66745e;max-width:360px;margin:0 0 24px;white-space:pre-wrap}.ew-builder .ew-store .ew-primary{background:var(--sf-accent);color:#fff;border:1px solid var(--sf-accent);border-radius:3px;padding:13px 19px;justify-content:space-between;font-weight:500;min-height:44px}.ew-builder .ew-store .ew-primary:hover{background:#163e2d;border-color:#163e2d}.ew-hero-note{display:flex;gap:9px;align-items:center;margin-top:32px;color:#7d876e;font-size:10px}.ew-hero-note>span{font-size:21px}.ew-hero-art{position:relative;display:flex;align-items:center;justify-content:center;padding:35px;background:#dce3d4;background-image:radial-gradient(ellipse at 70% 20%,#f2f0dc,transparent 70%);overflow:hidden}.ew-hero-photo{width:85%;max-height:350px;object-fit:contain;transform:rotate(-7deg);filter:drop-shadow(10px 20px 15px #24331c25);background:white;padding:9px}.ew-hero-stamp{position:absolute;bottom:24px;right:17px;display:grid;place-content:center;border:1px solid #637959;border-radius:50%;width:82px;height:82px;text-align:center;font:9px/1.5 ui-sans-serif,system-ui;letter-spacing:.14em;color:#506244;background:#e9ecdf;transform:rotate(10deg)}.ew-search-section{padding:32px 5% 0}.ew-search-section>label{display:flex;align-items:center;justify-content:space-between;gap:20px}.ew-search-section>label>span{font:20px/1.2 Georgia,serif;max-width:220px;color:var(--sf-ink)}.ew-search-section label>div{display:flex;align-items:center;gap:8px;flex:1;max-width:330px;border-bottom:1px solid #aebcad;padding:7px 0}.ew-search-section input{border:0;background:transparent;padding:5px;width:100%;font-size:11px;color:var(--sf-ink)}.ew-search-section label>div>span{font-size:22px}.ew-collection-chips{display:flex;flex-wrap:wrap;gap:7px;padding-top:20px}.ew-builder .ew-store .ew-collection-chips button{padding:6px 12px;border-radius:20px;font-size:10px;border-color:#e4e8de;background:#fff;font-weight:400}.ew-builder .ew-store .ew-collection-chips button[aria-pressed=true]{background:#eaf0e5;border-color:#acbea8;color:#355539}.ew-catalogue,.ew-configure-section,.ew-featured,.ew-collections{padding:38px 5%}.ew-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:22px}.ew-builder .ew-store .ew-section-heading h2{font-size:29px;margin-top:7px}.ew-section-heading>span{font-size:10px;color:#8a9587}.ew-product-grid{display:grid;grid-template-columns:repeat(var(--ew-columns,3),minmax(0,1fr));gap:24px 16px}.ew-builder .ew-store .ew-product-card{display:block;text-align:left;padding:0;background:none;border:0;border-radius:0;min-width:0;color:var(--sf-ink)}.ew-product-card:hover .ew-card-image{background:#e5eadf}.ew-card-image{position:relative;aspect-ratio:1/1.08;background:#f3f4ee;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden;transition:background .2s}.ew-photo{width:100%;height:100%;object-fit:contain;display:block}.ew-card-image img{transition:transform .25s}.ew-product-card:hover img{transform:scale(1.04)}.ew-card-arrow{position:absolute;right:10px;bottom:10px;width:26px;height:26px;border-radius:50%;background:white;display:grid;place-items:center;font-size:17px;color:#44563f}.ew-card-copy{padding:13px 0 3px}.ew-card-copy>span{text-transform:uppercase;letter-spacing:.1em;font-size:8px;color:#819079}.ew-builder .ew-store .ew-card-copy h3{font-family:inherit;font-size:12px;font-weight:500;line-height:1.5;letter-spacing:0;margin:5px 0}.ew-card-copy p{font-size:10px;color:#7c8a72;margin:0}.ew-breadcrumb{display:flex;gap:10px;align-items:center;padding:22px 5%;font-size:10px;color:#85927f}.ew-breadcrumb>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ew-builder .ew-store .ew-breadcrumb button{background:none;border:0;padding:0;color:#687d61;font-size:10px;white-space:nowrap}.ew-product-page{padding:10px 5% 40px}.ew-product-layout{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}.ew-gallery{position:sticky;top:0;min-width:0}.ew-gallery-main{aspect-ratio:1/1.12;display:flex;align-items:center;justify-content:center;background:#f2f4ee;padding:22px}.ew-thumbnails{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.ew-builder .ew-store .ew-thumbnails button{width:55px;height:62px;padding:5px;border-radius:0;background:#f5f6f0;border-color:transparent}.ew-builder .ew-store .ew-thumbnails button[aria-pressed=true]{border-color:#557452}.ew-thumb{width:100%;height:100%;object-fit:contain}.ew-builder .ew-store .ew-product-info>h2{font-size:32px;margin:10px 0 15px}.ew-product-intro{font-size:12px;color:#74816f;line-height:1.85;margin:0 0 14px}.ew-product-meta{display:flex;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--sf-line);padding-bottom:20px;font-size:9px;color:#84907b}.ew-product-meta span:first-child{color:#496b45}.ew-product-picker{display:flex;align-items:center;gap:15px;border-bottom:1px solid var(--sf-line);padding-bottom:19px;margin-bottom:26px;font-size:11px;color:#687c61}.ew-product-picker select{flex:1;max-width:400px;border:1px solid #dce3d5;padding:10px;border-radius:4px;background:#fff;color:var(--sf-ink);font-size:12px}.ew-configure-section{border-top:1px solid var(--sf-line);background:#fafbf7}.ew-calc-heading{margin:24px 0 22px}.ew-builder .ew-store .ew-calc-heading h3{font-size:24px;margin:6px 0}.ew-calc-heading p{font-size:11px;color:#88937f;margin:0}.ew-calculator{min-width:0}.ew-calculator .dp-inputs{display:grid;gap:19px}.ew-calculator .dp-field{min-width:0}.ew-calculator .dp-field>label{display:block;font-size:11px;font-weight:550;color:#3e5739;margin:0 0 8px;line-height:1.5}.ew-calculator [role=radiogroup]{display:flex;flex-wrap:wrap;gap:6px}.ew-calculator label.dp-check{display:flex;align-items:center;justify-content:flex-start;gap:7px;flex:0 1 auto;margin:0;padding:9px 10px;border:1px solid #dee5d8;border-radius:4px;background:#fff;font-size:10px;font-weight:400;color:#64765b;line-height:1.4;cursor:pointer;min-height:38px}.ew-calculator label.dp-check:has(input:checked){border-color:#64875b;background:#edf3e7;color:#345329}.ew-calculator label.dp-check:focus-within{outline:2px solid #64875b;outline-offset:2px}.ew-calculator .dp-check input[type=radio],.ew-calculator .dp-check input[type=checkbox]{display:inline-block;flex:0 0 13px;width:13px;height:13px;min-height:0;margin:0;padding:0;accent-color:#54764c}.ew-calculator .dp-field>input:not([type=checkbox]):not([type=radio]),.ew-calculator .dp-field>select,.ew-calculator .dp-field>textarea{display:block;width:100%;padding:10px 11px;margin:0;min-height:40px;border:1px solid #dce3d5;border-radius:4px;background:white;color:var(--sf-ink);font-size:12px}.ew-calculator .dp-field>textarea{min-height:72px}.ew-calculator .dp-field>input[type=checkbox]{width:17px;height:17px;margin:0;accent-color:#54764c}.ew-calculator .dp-swatches{display:flex;gap:6px;flex-wrap:wrap}.ew-calculator .dp-swatches img{width:42px;height:42px;object-fit:contain}.ew-quote-panel{display:grid;gap:14px;background:#edf1e7;border:1px solid #e1e7d7;padding:18px;margin-top:24px;border-radius:5px}.ew-quote-panel>div>span{display:block;font-size:10px;color:#7b876d}.ew-quote-panel strong{display:block;font-family:Georgia,serif;font-size:22px;font-weight:400;color:#25462c;margin-top:4px}.ew-quote-panel .ew-primary{width:100%;justify-content:center!important}.ew-quote-panel small{font-size:9px;text-align:center;color:#8a947e}.ew-quote-panel summary{font-size:10px;cursor:pointer}.ew-quote-panel details p{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#728064}.ew-description{border-top:1px solid var(--sf-line);margin-top:24px;padding-top:16px;font-size:11px;color:#7a8871}.ew-description summary{cursor:pointer;font-weight:500;color:#405a37}.ew-description p{white-space:pre-line;line-height:1.9}.ew-unavailable{padding:20px;background:#f2f4ed;margin-top:24px;color:#7b876f;font-size:11px}.ew-unavailable>span{font-family:Georgia,serif;font-size:23px;color:#425b39}.ew-copy{text-align:center;max-width:650px;padding:50px 5%;margin:auto}.ew-builder .ew-store .ew-copy h2{font-size:32px;margin:15px 0}.ew-copy p{font-size:13px;line-height:1.9;color:#7a876f;white-space:pre-wrap}.ew-values{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--sf-line);border-bottom:1px solid var(--sf-line);gap:20px;padding:26px 5%}.ew-values>div{display:flex;gap:10px;align-items:center}.ew-values b{font:italic 20px Georgia,serif;color:#9aa88b}.ew-values span{font-size:10px;font-weight:500}.ew-values small{display:block;font-size:9px;color:#91a084;margin-top:3px;font-weight:400}.ew-store-footer{background:#f2f3ed;padding:35px 5% 22px;display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}.ew-store-footer strong{font:23px Georgia,serif}.ew-store-footer p{font-size:10px;color:#8a987d}.ew-builder .ew-store .ew-store-footer button{border:0;border-bottom:1px solid #b3bfa7;padding:5px 0;background:transparent;border-radius:0;font-size:10px}.ew-store-footer>small{width:100%;border-top:1px solid #dce2d5;padding-top:17px;margin-top:12px;font-size:9px;color:#9aa68e}
@container(max-width:700px){.ew-store-header{padding:19px 5%}.ew-wordmark{font-size:19px!important}.ew-store-header nav{gap:8px}.ew-store-header nav button{font-size:10px!important}.ew-store-mark{display:none}.ew-hero{min-height:300px}.ew-hero-copy{padding:35px 10%}.ew-hero p{font-size:11px}.ew-hero-art{padding:20px}.ew-hero-photo{width:95%;padding:5px}.ew-hero-stamp{width:60px;height:60px;font-size:7px;bottom:15px;right:10px}.ew-product-layout{gap:22px}.ew-builder .ew-store .ew-product-info>h2{font-size:26px}.ew-product-intro{font-size:11px}.ew-product-meta{padding-bottom:15px}.ew-gallery-main{padding:12px}.ew-calculator label.dp-check{font-size:9px;padding:8px}.ew-catalogue,.ew-configure-section,.ew-featured{padding:28px 5%}.ew-product-grid{gap:20px 12px}.ew-card-image{padding:12px}.ew-builder .ew-store .ew-card-copy h3{font-size:11px}.ew-values{gap:12px}.ew-values small{font-size:8px}}
@container(max-width:500px){.ew-store-header nav button:last-child{display:none}.ew-hero{grid-template-columns:1fr}.ew-hero-copy{padding:34px 7%}.ew-builder .ew-store .ew-hero h1{font-size:39px!important;max-width:300px}.ew-hero p{font-size:12px}.ew-hero-art{min-height:220px;max-height:260px;padding:25px}.ew-hero-photo{max-height:220px;width:65%}.ew-hero-note{margin-top:20px}.ew-search-section>label{align-items:stretch;flex-direction:column;gap:12px}.ew-search-section label>div{max-width:none}.ew-search-section>label>span{font-size:23px;max-width:none}.ew-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ew-product-layout{grid-template-columns:1fr;gap:23px}.ew-gallery{position:static}.ew-gallery-main{aspect-ratio:1.1/1;max-height:350px;padding:23px}.ew-builder .ew-store .ew-product-info>h2{font-size:30px}.ew-product-intro{font-size:12px}.ew-calculator label.dp-check{font-size:11px;padding:10px;min-height:42px;flex:1 1 125px}.ew-section-heading>span{display:none}.ew-builder .ew-store .ew-section-heading h2{font-size:27px}.ew-values{grid-template-columns:1fr;gap:18px}.ew-values span{font-size:11px}.ew-values small{font-size:10px}.ew-product-picker{display:grid;gap:8px}.ew-product-picker select{width:100%;max-width:none}.ew-store-footer{align-items:start;flex-direction:column}.ew-collection-chips{gap:5px}.ew-store-footer>small{font-size:8px}}
@media(max-width:1200px){.ew-workspace{grid-template-columns:170px minmax(0,1fr) 220px;gap:10px}.ew-palette,.ew-inspector{padding:12px}.ew-canvas{padding:10px}.ew-focus{padding:12px}.ew-store-stats{display:none}}
@media(max-width:1100px){.ew-workspace{grid-template-columns:155px minmax(0,1fr)}.ew-inspector{grid-column:1/-1}.ew-focus .ew-workspace{overflow:auto;align-items:start}.ew-focus .ew-canvas{max-height:75vh}.ew-header{align-items:start}.ew-header h1{font-size:19px!important}.ew-actions{justify-content:flex-end}.ew-focus-toggle{font-size:10px!important}.ew-preview-mode .ew-canvas{padding:8px}}
@media(max-width:600px){.ew-builder,.ew-focus{padding:10px}.ew-header{flex-direction:column;gap:12px}.ew-header .ew-actions{width:100%;justify-content:flex-start}.ew-focus .ew-header>div:first-child>a{font-size:10px}.ew-toolbar{flex-wrap:wrap;margin:5px 0}.ew-workspace{display:flex;flex-direction:column}.ew-palette,.ew-canvas,.ew-inspector{width:100%}.ew-palette{display:flex;flex-wrap:wrap;gap:4px}.ew-palette h2,.ew-palette a{width:100%;margin:5px 0!important;padding-top:0!important;border:0!important}.ew-palette button{width:auto;flex:1 1 130px;margin:0;padding:5px;font-size:11px}.ew-palette button span{width:20px;height:20px}.ew-focus .ew-workspace{overflow:auto;flex:none}.ew-focus .ew-canvas{overflow:auto;max-height:none}.ew-canvas{padding:7px}.ew-safety{font-size:10px;line-height:1.5}.ew-header h1{font-size:20px!important}.ew-preview-only .ew-canvas{padding:0}.ew-device{box-shadow:none}.ew-actions a,.ew-actions button{font-size:11px}.ew-toolbar .ew-actions{margin-left:auto}.ew-view-tabs button{font-size:10px;padding:7px 8px}}
/* The focused studio is mounted outside the application shell. */
.ew-builder.ew-focus{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;background:#f1f3f1!important;z-index:2147483000!important;isolation:isolate}
.ew-builder .ew-store :is(h1,h2,h3,h4){font-family:Georgia,'Times New Roman',serif!important;font-weight:400!important}
.ew-builder .ew-store .ew-card-copy h3{font-family:inherit!important;font-weight:500!important}
.ew-builder .ew-store .ew-wordmark{font-family:Georgia,'Times New Roman',serif!important}
.ew-focus .ew-preview-only{width:100%;min-width:0;max-width:1440px;margin:0 auto;flex:none}
.ew-builder.ew-focus{box-sizing:border-box!important}
.ew-toolbar .ew-actions>button{background:#fff;color:#657267;border:1px solid #d7ddd8}
.ew-toolbar .ew-actions>button[aria-pressed=true]{background:#e1ece3;color:#245237;border-color:#8bae94}
.ew-public-store{padding:0!important;max-width:none!important;background:#fff!important;min-height:100vh;margin:0!important}
.ew-public-store .ew-store{max-width:1600px;margin:auto}
.ew-public-store .ew-product-card{text-decoration:none;cursor:pointer}
.ew-public-message{padding:80px 24px;text-align:center;color:#20382d;font-family:system-ui,sans-serif}

.ew-public-store .ew-checkout{max-width:1280px;margin:0 auto;padding:40px clamp(20px,5vw,64px);scroll-margin-top:20px}
.ew-public-store .sites-store-cart{position:static;background:#f3f5ef;color:#193e2e;border:1px solid #dce3d7;border-radius:12px;padding:clamp(20px,4vw,40px);box-shadow:none;max-width:none;width:auto}
.ew-public-store .sites-store-cart>p:first-child{font-size:24px;font-weight:600}
.ew-public-store .sites-store-cart ul{list-style:none;padding:0;display:grid;gap:16px}
.ew-public-store .sites-store-cart li{padding:20px 0;border-bottom:1px solid #dce3d7;overflow-wrap:anywhere}
.ew-public-store .sites-store-cart label{display:grid;gap:8px;margin-top:12px;font-size:14px}
.ew-public-store .sites-store-cart input,.ew-order-quantity input{box-sizing:border-box;width:100%;min-height:44px;background:white;border:1px solid #c9d3c6;border-radius:6px;padding:10px 12px;color:#173c2b}
.ew-public-store .sites-store-cart button{min-height:44px;padding:10px 20px;border-radius:6px;border:1px solid #c9d3c6;background:#fff;color:#173c2b;margin:8px 0}
.ew-public-store .sites-store-cart button[type=submit]{background:#173c2b;color:#fff;width:100%}
.ew-public-store .sites-store-cart button:disabled{opacity:.5;cursor:wait}
.ew-public-store .sites-store-cart form{max-width:640px}
.ew-order-quantity{display:grid;gap:8px;margin:16px 0}
.ew-quote-panel>button+button{margin-top:10px}

.ew-product-layout+.ew-description{min-width:0;width:100%;box-sizing:border-box}
/* Editorial storefront, scoped to the dedicated commerce renderer. */
.ew-store{--sf-muted:#53664b;--sf-line:#dfe5d9;background:#fffefa}.ew-announcement{font-size:12px;padding:10px 20px}.ew-store-header{padding:26px 6%;gap:20px}.ew-builder .ew-store .ew-wordmark{font-size:clamp(23px,2.6cqw,34px)}.ew-wordmark span{font-size:9px;color:#536551;letter-spacing:.2em;margin-top:9px}.ew-store-header nav button{font-size:13px!important;min-height:44px}
.ew-hero{grid-template-columns:1.05fr 1fr;min-height:550px;background:#f4f0e7}.ew-hero-copy{padding:64px 11%}.ew-builder .ew-store .ew-hero h1{font-size:clamp(40px,5.3cqw,76px)!important;line-height:1.04;letter-spacing:-.055em;margin:22px 0}.ew-hero p{font-size:16px;color:#52614c;line-height:1.8;max-width:430px}.ew-builder .ew-store .ew-primary{border-radius:7px;min-height:48px;font-size:14px;padding:14px 22px}.ew-hero-note{font-size:11px;color:#52634d;line-height:1.6}.ew-hero-art{background:#e2e8db;background-image:radial-gradient(ellipse at 80% 10%,#fcf4dc,transparent 65%);padding:65px 45px 100px}.ew-hero-photo{width:86%;max-height:380px;transform:rotate(-8deg);padding:12px;border-radius:5px;box-shadow:0 25px 60px #233b2420}.ew-hero-secondary{position:absolute;width:30%;height:35%;bottom:50px;right:7%;padding:12px;background:#fffaf0;box-shadow:0 18px 35px #233b2425;transform:rotate(10deg);border-radius:4px}.ew-hero-caption{position:absolute;left:7%;bottom:24px;font-size:12px;color:#344c32;max-width:55%}.ew-hero-caption span{display:block;font-size:10px;color:#586c50;margin-top:3px}.ew-hero-stamp{bottom:auto;top:24px;right:20px;background:#f4d5ac;border-color:#a97c4e;color:#62492e;width:85px;height:85px}
.ew-kicker{font-size:10px;color:#536a4d;letter-spacing:.17em}.ew-search-section{padding:48px 6% 0;scroll-margin-top:20px;display:flex;flex-wrap:wrap;gap:18px;align-items:end}.ew-search-section>label:first-child{flex:1 1 580px}.ew-search-section>label>span{font-size:26px;max-width:280px}.ew-search-section label>div{max-width:400px;padding:9px 0}.ew-search-section input{font-size:14px;min-height:44px}.ew-search-section .ew-sort{display:grid;gap:6px;font-size:12px;color:#40563c}.ew-sort select{padding:12px;border:1px solid #cbd7c3;border-radius:6px;background:#fffefa;color:#233f2c;min-height:44px}.ew-search-section .ew-collection-chips{width:100%;padding-top:0}.ew-builder .ew-store .ew-collection-chips button{font-size:12px;min-height:44px;padding:10px 16px}
.ew-catalogue,.ew-configure-section,.ew-featured{padding:46px 6%}.ew-builder .ew-store .ew-section-heading h2{font-size:clamp(30px,3.3cqw,44px)}.ew-section-heading>span{font-size:12px;color:#53684e}.ew-product-grid{gap:36px 24px}.ew-card-image{aspect-ratio:1.06;background:#f0f0e8;border-radius:12px;padding:25px}.ew-card-copy{padding:18px 2px 0}.ew-card-copy>span{font-size:10px;color:#5c7054}.ew-builder .ew-store .ew-card-copy h3{font-size:17px;line-height:1.4;margin:8px 0 10px}.ew-card-price{font-size:13px;color:#4e6445}.ew-card-price .ec-minimum-price{display:grid;gap:3px}.ew-card-price .ec-minimum-price strong{font-size:17px;color:#203e2a}.ew-card-price .ec-minimum-price small{font-size:11px;line-height:1.6;color:#52664a}.ew-card-arrow{width:36px;height:36px;right:14px;bottom:14px}.ew-breadcrumb{font-size:12px}.ew-builder .ew-store .ew-breadcrumb button{font-size:12px;min-height:44px}
.ew-product-layout{gap:clamp(24px,5cqw,70px)}.ew-gallery-main{border-radius:14px;background:#f2f2e9}.ew-builder .ew-store .ew-product-info>h2{font-size:clamp(32px,3.4cqw,48px)}.ew-product-intro{font-size:14px;color:#52674a}.ew-product-meta{font-size:11px;color:#53674c}.ew-product-info>.ec-minimum-price{display:grid;gap:4px;margin-top:20px}.ew-product-info>.ec-minimum-price strong{font-size:28px}.ew-product-info>.ec-minimum-price small,.ew-product-info>.ec-minimum-note{font-size:12px;color:#52674a}.ew-calculator .dp-field>label{font-size:13px}.ew-calculator label.dp-check{font-size:12px;min-height:44px}.ew-calculator .dp-field>input:not([type=checkbox]):not([type=radio]),.ew-calculator .dp-field>select{min-height:46px;font-size:14px}.ew-calc-heading p,.ew-product-picker{font-size:13px;color:#53664b}.ew-quote-panel{border-radius:10px;padding:22px}.ew-quote-panel>div>span,.ew-quote-panel summary,.ew-quote-panel details p{font-size:12px}.ew-quote-panel small{font-size:11px;color:#53664b}.ew-quote-panel strong{font-size:30px}.ew-description{font-size:14px;color:#53664b}
.ew-process,.ew-faq{padding:64px 6%;border-top:1px solid var(--sf-line)}.ew-builder .ew-store :is(.ew-process,.ew-faq) h2{font-size:clamp(30px,3.5cqw,44px);margin:14px 0 24px;max-width:450px}.ew-process ol{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.ew-process li{padding-top:22px;border-top:1px solid #ced9c7}.ew-process li>svg{display:block;margin-bottom:18px}.ew-process b{font-size:16px;font-weight:550}.ew-process p{font-size:14px;line-height:1.8;color:#53664b;margin-bottom:0;max-width:300px}.ew-faq{display:grid;grid-template-columns:1fr 1.15fr;gap:50px;background:#f5f3ec}.ew-faq details{padding:21px 0;border-bottom:1px solid #d5ddce}.ew-faq summary{cursor:pointer;font-size:15px;font-weight:550;min-height:24px}.ew-faq p{font-size:14px;line-height:1.85;color:#52674a}.ew-values{padding:30px 6%}.ew-values span{font-size:13px}.ew-values small{font-size:11px;color:#52674a}.ew-store-footer{padding:48px 6% 28px;background:#203f31;color:#faf7ed}.ew-store-footer strong{font-size:30px}.ew-store-footer p,.ew-store-footer>small{font-size:12px;color:#d9e4d2}.ew-builder .ew-store .ew-store-footer button{font-size:13px;color:#faf7ed;min-height:44px}.ew-store-footer>small{border-color:#5c735b}.ew-public-message button{min-height:44px;padding:12px 24px;background:#245c46;color:white;border:0;border-radius:6px;cursor:pointer}
@container(max-width:700px){.ew-store-header{flex-wrap:wrap;padding:22px 6%}.ew-hero-copy{padding:40px 9%}.ew-hero{min-height:380px}.ew-hero p{font-size:14px}.ew-hero-art{padding:45px 25px 90px}.ew-product-grid{gap:26px 14px}.ew-builder .ew-store .ew-card-copy h3{font-size:15px}.ew-process,.ew-faq{padding:42px 6%}.ew-faq{grid-template-columns:1fr;gap:12px}.ew-process ol{gap:20px}.ew-process p{font-size:13px}}
@container(max-width:500px){.ew-hero{grid-template-columns:1fr}.ew-hero-copy{padding:38px 7%}.ew-builder .ew-store .ew-hero h1{font-size:46px!important;max-width:none}.ew-hero-art{min-height:300px;max-height:340px;padding:35px 25px 75px}.ew-hero-photo{width:65%;max-height:230px}.ew-hero-secondary{width:25%;right:8%;bottom:35px}.ew-hero-stamp{width:68px;height:68px;top:18px;font-size:8px}.ew-search-section{padding-top:30px}.ew-search-section>label:first-child{flex-basis:100%}.ew-search-section .ew-sort{width:100%}.ew-search-section>label>span{max-width:none}.ew-product-grid{gap:26px 12px}.ew-card-image{padding:12px;border-radius:8px}.ew-builder .ew-store .ew-card-copy h3{font-size:14px}.ew-card-price .ec-minimum-price strong{font-size:15px}.ew-card-price .ec-minimum-price small{font-size:10px}.ew-process ol{grid-template-columns:1fr;gap:20px}.ew-process li{display:grid;grid-template-columns:32px 1fr;column-gap:10px}.ew-process li>svg{grid-row:1/3}.ew-process p{margin:6px 0;max-width:none}.ew-product-layout{grid-template-columns:1fr}.ew-values span{font-size:13px}.ew-store-header nav{order:3;width:100%;justify-content:space-between}.ew-store-header nav button:last-child{display:inline-flex}.ew-builder .ew-store .ew-wordmark{font-size:24px}.ew-card-arrow{width:28px;height:28px}.ew-store-footer strong{font-size:27px}}
@media(prefers-reduced-motion:reduce){.ew-store *{scroll-behavior:auto!important;transition:none!important;animation:none!important}.ew-product-card:hover img{transform:none}}

.ew-public-store{container-type:inline-size}
.ew-process li>.ec-symbol{display:flex;margin-bottom:18px}
@container(max-width:500px){.ew-process li>.ec-symbol{grid-row:1/3}}

/* Keep the search heading and sort caption aligned with their controls. */
.ew-search-section>label:first-child>.ec-symbol{display:none}
.ew-search-section>.ew-sort>.ec-label-copy{font:inherit;max-width:none}

/* Dedicated commerce templates: shared canonical products, calculators and cart. */
.ew-template-picker{border-bottom:1px solid var(--ew-border);padding-bottom:16px;margin-bottom:22px}.ew-template-picker>p{font-size:12px;line-height:1.6;color:#5d6d64}.ew-template-options{display:grid;gap:8px}.ew-builder .ew-template-option{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px;width:100%;padding:10px;text-align:left;justify-content:start;white-space:normal;min-height:86px}.ew-template-copy{min-width:0}.ew-template-copy strong{display:block;font-size:12px}.ew-template-copy small{display:block;font-size:11px;line-height:1.45;font-weight:400;color:#5e6f64;margin-top:4px}.ew-template-selected{position:absolute;right:5px;top:2px;color:#176b58}.ew-template-sample{display:block;width:62px;height:60px;padding:6px;background:#fff9ed;border:1px solid #d9d8d2;border-radius:5px}.ew-template-sample>i{display:block;height:22px;background:linear-gradient(110deg,#d4dcca 55%,#a0b4a2 55%);border-radius:2px}.ew-template-sample>span{display:flex;gap:3px;margin-top:5px}.ew-template-sample b{display:block;flex:1;height:17px;background:#dfdfce;border-radius:2px}.ew-template-sample[data-template=print-studio]>i{background:linear-gradient(110deg,#fdcd4b 55%,#5146bc 55%)}.ew-template-sample[data-template=print-studio] b{background:#d3cef1}.ew-template-sample[data-template=premium-boutique]{background:#f5eee9}.ew-template-sample[data-template=premium-boutique]>i{background:linear-gradient(70deg,#b59e92 48%,#e2d5cb 48%)}.ew-template-sample[data-template=premium-boutique] b{background:#cbb8a8}.ew-template-sample[data-template=wholesale-catalogue]>i{height:14px;background:#175477}.ew-template-sample[data-template=wholesale-catalogue]>span{display:grid;gap:3px}.ew-template-sample[data-template=wholesale-catalogue] b{height:6px;background:#b9cfdc}.ew-template-sample[data-template=product-configurator]>i{background:linear-gradient(90deg,#b7dcd4 48%,#17675e 48%)}.ew-template-sample[data-template=creative-marketplace]{background:#fce8f2}.ew-template-sample[data-template=creative-marketplace]>i{background:linear-gradient(30deg,#ea9c48 50%,#ab4083 50%);border-radius:8px}.ew-template-sample[data-template=creative-marketplace] b:nth-child(1){background:#edd077}.ew-template-sample[data-template=creative-marketplace] b:nth-child(2){background:#c1b6e3}.ew-template-sample[data-template=minimal-commerce]{background:#fff}.ew-template-sample[data-template=minimal-commerce]>i{background:#ededeb;height:17px}.ew-template-sample[data-template=minimal-commerce] b{background:#e3e5e3;height:22px}
.ew-store[data-template]:not([data-template=editorial]) .ew-primary{background:var(--sf-accent);border-color:var(--sf-accent);color:white}.ew-store[data-template]:not([data-template=editorial]) .ew-primary:hover{filter:brightness(.93)}.ew-store[data-template]:not([data-template=editorial]) .ew-announcement{background:var(--sf-accent);color:white}.ew-store[data-template]:not([data-template=editorial]) .ew-store-footer{background:var(--sf-accent)}
/* Print Studio: warm paper, bold violet and a graphic sunshine composition. */
.ew-store[data-template=print-studio]{--sf-ink:#28234d;--sf-muted:#666178;--sf-line:#e2ddec;background:#fffcf5}.ew-store[data-template=print-studio] .ew-hero{background:#fff4d9;grid-template-columns:1.1fr 1fr;border-bottom:2px solid #322957}.ew-builder .ew-store[data-template=print-studio] :is(h1,h2,h3,h4){font-family:ui-sans-serif,system-ui,sans-serif;font-weight:750;letter-spacing:-.045em}.ew-builder .ew-store[data-template=print-studio] .ew-wordmark{font-family:ui-sans-serif,system-ui,sans-serif;font-weight:800}.ew-store[data-template=print-studio] .ew-hero-art{background:#dcd6fb;border-radius:48% 48% 0 0;margin:28px 7% 0;isolation:isolate}.ew-store[data-template=print-studio] .ew-hero-art:before{content:'';position:absolute;width:210px;height:210px;border-radius:50%;background:#ffc844;right:-25px;top:28px;z-index:-1}.ew-store[data-template=print-studio] .ew-hero-stamp{background:#4134b8;border-color:#4134b8;color:#fff}.ew-store[data-template=print-studio] .ew-card-image{background:#eee9ff;border-radius:18px}.ew-store[data-template=print-studio] .ew-product-card:nth-child(3n+2) .ew-card-image{background:#fff0c5}.ew-store[data-template=print-studio] .ew-product-card:nth-child(3n) .ew-card-image{background:#dceee8}.ew-store[data-template=print-studio] .ew-process{background:#ece7fa}.ew-store[data-template=print-studio] .ew-quote-panel{background:#f0edff;border-color:#d8d0f1}
/* Premium Boutique: reversed composition, serif type and generous photography. */
.ew-store[data-template=premium-boutique]{--sf-ink:#4d382e;--sf-muted:#75665d;--sf-line:#e6dcd4;background:#faf7f3}.ew-store[data-template=premium-boutique] .ew-hero{background:#eee6df;grid-template-columns:1fr 1fr}.ew-store[data-template=premium-boutique] .ew-hero-art{order:-1;background:#ded0c5;min-height:500px}.ew-store[data-template=premium-boutique] .ew-hero-copy{padding:60px 12%}.ew-store[data-template=premium-boutique] :is(.ew-hero-stamp,.ew-hero-secondary){display:none}.ew-store[data-template=premium-boutique] .ew-hero-photo{transform:none;width:78%;max-height:380px;box-shadow:0 16px 40px #4d382e20}.ew-store[data-template=premium-boutique] .ew-product-grid{gap:44px}.ew-store[data-template=premium-boutique] .ew-card-image{background:#ebe1d7;border-radius:0;padding:28px}.ew-store[data-template=premium-boutique] .ew-process{background:#eee6df}.ew-store[data-template=premium-boutique] .ew-store-header{padding-top:30px;padding-bottom:30px}.ew-store[data-template=premium-boutique] .ew-card-copy{text-align:center}.ew-store[data-template=premium-boutique] .ew-card-price .ec-minimum-price{align-items:center}
/* Wholesale Catalogue: compact business banner and scannable product rows. */
.ew-store[data-template=wholesale-catalogue]{--sf-ink:#173e55;--sf-muted:#4e6877;--sf-line:#d9e4eb;background:#f6f9fb}.ew-builder .ew-store[data-template=wholesale-catalogue] :is(h1,h2,h3,h4){font-family:ui-sans-serif,system-ui,sans-serif;font-weight:700;letter-spacing:-.025em}.ew-store[data-template=wholesale-catalogue] .ew-hero{background:#e2edf4;min-height:260px;grid-template-columns:1.6fr 1fr}.ew-store[data-template=wholesale-catalogue] .ew-hero-copy{padding:36px 9%}.ew-builder .ew-store[data-template=wholesale-catalogue] .ew-hero h1{font-size:clamp(30px,4cqw,48px)!important}.ew-store[data-template=wholesale-catalogue] .ew-hero-art{min-height:260px;max-height:300px;background:#d5e4ed;padding:25px}.ew-store[data-template=wholesale-catalogue] .ew-hero-photo{transform:none;max-height:200px;width:65%}.ew-store[data-template=wholesale-catalogue] :is(.ew-hero-stamp,.ew-hero-secondary,.ew-hero-caption){display:none}.ew-store[data-template=wholesale-catalogue] .ew-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.ew-builder .ew-store[data-template=wholesale-catalogue] .ew-product-card{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;background:#fff;border:1px solid #d9e4eb;border-radius:8px;padding:12px;gap:18px}.ew-store[data-template=wholesale-catalogue] .ew-card-image{padding:10px;aspect-ratio:1;background:#edf2f5}.ew-store[data-template=wholesale-catalogue] .ew-card-copy{padding:0}.ew-builder .ew-store[data-template=wholesale-catalogue] .ew-card-copy h3{font-size:18px}.ew-store[data-template=wholesale-catalogue] .ew-card-arrow{display:none}.ew-store[data-template=wholesale-catalogue] .ew-process{background:#e3edf4}
/* Product Configurator: technical clarity and paired product tiles. */
.ew-store[data-template=product-configurator]{--sf-ink:#17453f;--sf-line:#d5e6e2;background:#f6fbf9}.ew-builder .ew-store[data-template=product-configurator] :is(h1,h2,h3,h4){font-family:ui-sans-serif,system-ui,sans-serif;font-weight:650;letter-spacing:-.035em}.ew-store[data-template=product-configurator] .ew-hero{background:#e0f1ec;min-height:340px}.ew-store[data-template=product-configurator] .ew-hero-art{background:linear-gradient(90deg,#acd3c42b 1px,transparent 1px),linear-gradient(#acd3c42b 1px,transparent 1px),#d2e9e2;background-size:24px 24px;min-height:340px}.ew-store[data-template=product-configurator] .ew-hero-photo{transform:none}.ew-store[data-template=product-configurator] .ew-hero-stamp{border-radius:10px;background:#17675e;color:#fff;border:0}.ew-store[data-template=product-configurator] .ew-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ew-store[data-template=product-configurator] .ew-card-image{aspect-ratio:1.5;background:#e4eeeb}.ew-store[data-template=product-configurator] .ew-process{background:#e0f1ec}
/* Creative Marketplace: rounded tiles with an expressive, colorful window. */
.ew-store[data-template=creative-marketplace]{--sf-ink:#562743;--sf-line:#eddae5;background:#fff9fc}.ew-builder .ew-store[data-template=creative-marketplace] :is(h1,h2,h3,h4){font-family:ui-sans-serif,system-ui,sans-serif;font-weight:800;letter-spacing:-.05em}.ew-store[data-template=creative-marketplace] .ew-hero{background:#f9deec;border-radius:0 0 60px 60px}.ew-store[data-template=creative-marketplace] .ew-hero-art{background:#e4d8f7;border-radius:50% 50% 0 0;margin:30px 5% 0;transform:rotate(-2deg)}.ew-store[data-template=creative-marketplace] .ew-hero-stamp{background:#fbc854;color:#562743;border:0;transform:rotate(12deg);border-radius:24px}.ew-store[data-template=creative-marketplace] .ew-card-image{border-radius:28px;background:#efe4f8;aspect-ratio:1}.ew-store[data-template=creative-marketplace] .ew-product-card:nth-child(3n+2) .ew-card-image{background:#fae3ad}.ew-store[data-template=creative-marketplace] .ew-product-card:nth-child(3n) .ew-card-image{background:#d8eee9}.ew-store[data-template=creative-marketplace] .ew-process{background:#fae9b9;border-radius:40px;margin:25px 4%}.ew-store[data-template=creative-marketplace] .ew-quote-panel{background:#f9eaf3}
/* Minimal Commerce: restrained type with no decorative image layers. */
.ew-store[data-template=minimal-commerce]{--sf-ink:#26312f;--sf-muted:#66716e;--sf-line:#e5e8e6;background:white}.ew-builder .ew-store[data-template=minimal-commerce] :is(h1,h2,h3,h4){font-family:ui-sans-serif,system-ui,sans-serif;font-weight:500;letter-spacing:-.04em}.ew-store[data-template=minimal-commerce] .ew-hero{background:#f5f6f4;min-height:320px;grid-template-columns:1.3fr 1fr}.ew-store[data-template=minimal-commerce] .ew-hero-art{background:#ecefeb;padding:30px;min-height:320px}.ew-store[data-template=minimal-commerce] .ew-hero-photo{transform:none;max-height:270px;width:65%;box-shadow:none}.ew-store[data-template=minimal-commerce] :is(.ew-hero-stamp,.ew-hero-secondary,.ew-hero-caption,.ew-hero-note,.ew-store-mark){display:none}.ew-store[data-template=minimal-commerce] .ew-card-image{border-radius:0;background:#f2f4f1;padding:30px}.ew-store[data-template=minimal-commerce] .ew-card-arrow{border-radius:0}.ew-store[data-template=minimal-commerce] .ew-process{background:#f3f5f2}.ew-store[data-template=minimal-commerce] .ew-quote-panel{background:#f5f6f4}
/* Product Configurator uses the same authoritative quote and cart transport. */
.ew-configurator-intro{display:flex;align-items:center;gap:12px;padding:20px;background:#f0eff9;border-radius:12px;font-size:15px;line-height:1.7}.ew-builder .ew-store .ew-configurator{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;margin:32px 0;padding:0;background:transparent;border:0}.ew-configurator-steps{grid-column:1/-1;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:18px 0;margin:0;border-bottom:1px solid var(--sf-line)}.ew-configurator-steps li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--sf-muted)}.ew-configurator-steps li[aria-current=step]{font-weight:700;color:var(--sf-ink)}.ew-configurator-steps li>span{display:grid;place-items:center;width:32px;height:32px;flex:none;background:#eeebf8;color:#4134b8;border-radius:50%;font-size:11px;font-weight:700}.ew-configurator-options{min-width:0}.ew-configurator .ew-configurator-options{padding:28px;border:1px solid var(--sf-line);border-radius:16px;background:#fff}.ew-configurator .ew-quote-panel{margin:0;align-self:start;position:sticky;top:20px;min-width:0;padding:28px;border:1px solid var(--sf-line);border-radius:16px}.ew-builder .ew-store .ew-configurator .ew-quote-panel h3{font-size:24px;margin:8px 0 18px}.ew-selection-summary{margin:0 0 18px}.ew-selection-summary>div{display:flex;justify-content:space-between;gap:15px;padding:10px 0;border-bottom:1px solid var(--sf-line);font-size:14px}.ew-selection-summary dt{color:var(--sf-muted)}.ew-selection-summary dd{margin:0;text-align:right;font-weight:600;overflow-wrap:anywhere;max-width:65%}.ew-review-hint{font-size:13px;line-height:1.6;color:var(--sf-muted);margin:12px 0 24px}.ew-store[data-product-layout=configurator] .ew-product-page>.ew-product-layout{align-items:center}.ew-configurator>.ew-form-error{grid-column:1/-1}
@container(max-width:760px){.ew-store[data-template=wholesale-catalogue] .ew-product-grid{grid-template-columns:1fr}.ew-store[data-template=premium-boutique] .ew-product-grid{gap:22px}.ew-builder .ew-store .ew-configurator{grid-template-columns:1fr;gap:18px}.ew-configurator .ew-quote-panel{position:static}.ew-configurator-steps li{font-size:11px;align-items:flex-start;flex-direction:column}.ew-configurator-steps{gap:8px}.ew-configurator .ew-configurator-options,.ew-configurator .ew-quote-panel{padding:22px}}
@container(max-width:500px){.ew-store[data-template]:not([data-template=editorial]) .ew-hero{grid-template-columns:1fr}.ew-store[data-template=premium-boutique] .ew-hero-art{order:0;min-height:300px;max-height:320px}.ew-store[data-template=premium-boutique] .ew-hero-photo{max-height:245px}.ew-store[data-template=wholesale-catalogue] .ew-hero-art{display:none}.ew-store[data-template=wholesale-catalogue] .ew-hero-copy{padding:32px 7%}.ew-builder .ew-store[data-template=wholesale-catalogue] .ew-product-card{grid-template-columns:85px minmax(0,1fr);gap:12px;padding:10px}.ew-builder .ew-store[data-template=wholesale-catalogue] .ew-card-copy h3{font-size:16px}.ew-store[data-template=creative-marketplace] .ew-hero{border-radius:0 0 28px 28px}.ew-store[data-template=creative-marketplace] .ew-card-image{border-radius:14px;padding:15px}.ew-store[data-template=print-studio] .ew-hero-art{min-height:300px}.ew-configurator-intro{font-size:14px}.ew-selection-summary>div{font-size:13px}.ew-store[data-template=minimal-commerce] .ew-hero-art{min-height:270px}.ew-store[data-template=product-configurator] .ew-card-image{aspect-ratio:1}}

/* Scoped branding overrides use the shared UI utility layer. */
@layer utilities {
/* Respect each template's type and primary actions alongside shared UI controls. */
.ew-store[data-template=print-studio]{--ew-heading-weight:750}
.ew-store[data-template=wholesale-catalogue]{--ew-heading-weight:700}
.ew-store[data-template=creative-marketplace]{--ew-heading-weight:800}
.ew-store[data-template=minimal-commerce]{--ew-heading-weight:500}
.ew-builder .ew-store:is([data-template=print-studio],[data-template=wholesale-catalogue],[data-template=product-configurator],[data-template=creative-marketplace],[data-template=minimal-commerce]) :is(h1,h2,h3,h4){font-family:ui-sans-serif,system-ui,sans-serif!important;font-weight:var(--ew-heading-weight,650)!important}
.ew-builder .ew-store .ew-wordmark{display:block!important;padding:0!important;border:0!important;background:transparent!important;font-size:clamp(22px,2cqw,30px)!important;line-height:1.1!important;text-align:left!important}
.ew-builder .ew-store .ew-wordmark>span{display:block!important}
.ew-builder .ew-store[data-template=print-studio] .ew-wordmark{font-family:ui-sans-serif,system-ui,sans-serif!important;font-weight:800!important}
.ew-builder .ew-store .ew-primary{background:var(--sf-accent)!important;color:#fff!important;border-color:var(--sf-accent)!important;border-radius:8px!important;padding:14px 22px!important;font-size:14px!important;margin-top:12px!important}
.ew-builder .ew-store .ew-primary:hover{background:var(--sf-accent)!important;filter:brightness(.94)}
.ew-builder .ew-store button.ew-product-card{display:block!important;background:transparent!important;border:0!important;padding:0!important;text-align:left!important}
.ew-builder .ew-store[data-template=wholesale-catalogue] button.ew-product-card{display:grid!important;background:#fff!important;border:1px solid #d9e4eb!important;padding:12px!important}
.ew-store:is([data-template=print-studio],[data-template=creative-marketplace]) .ew-hero-stamp{top:20px!important;right:calc(50% - 41px)!important;bottom:auto!important}
@container(max-width:500px){.ew-builder .ew-store[data-template=wholesale-catalogue] button.ew-product-card{padding:10px!important}}

}

/* Public store type guidance: shared templates, type-specific visual information. */
.ew-experience-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:18px 5%;border-bottom:1px solid var(--sf-line);background:#fff}
.ew-experience-facts>div{display:flex;align-items:center;gap:12px;min-width:0;font-size:13px;font-weight:600;line-height:1.5}
.ew-experience-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:16px;flex:none}
.ew-selling-guide{padding:60px 5%;background:linear-gradient(135deg,#faf8ff,#f3f9f7)}
.ew-selling-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:22px 0}
.ew-selling-cards article{padding:26px;border:1px solid var(--sf-line);border-radius:20px;background:white;min-width:0}
.ew-builder .ew-selling-cards h3{font-size:20px;margin:16px 0 10px}.ew-selling-cards p,.ew-type-faq p{font-size:14px;line-height:1.8;color:var(--sf-muted);overflow-wrap:anywhere}
.ew-file-formats{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.ew-file-formats>span{display:flex;align-items:center;gap:5px;background:#f3effa;color:#65449a;border-radius:8px;padding:7px;font-size:12px}
.ew-type-faq{display:grid;gap:10px}.ew-type-faq details{padding:18px 22px;border:1px solid var(--sf-line);border-radius:12px;background:#fff}.ew-type-faq summary{cursor:pointer;font-weight:600;line-height:1.5;min-height:24px}.ew-policy-text{white-space:pre-wrap}
.ew-price-unit{display:block;font-size:12px;line-height:1.6;color:var(--sf-muted);font-weight:400;margin-top:4px}
.ew-store[data-commerce-type=subscription] .ew-hero{background:#fff1d6}.ew-store[data-commerce-type=service] .ew-hero{background:#f9e7ee}.ew-store[data-commerce-type=booking] .ew-hero{background:#e4f5f4}.ew-store[data-commerce-type=food] .ew-hero{background:#fff0dd}
@container(max-width:760px){.ew-selling-cards{grid-template-columns:1fr}.ew-experience-facts{gap:8px;padding:14px 5%}.ew-experience-facts>div{flex-direction:column;align-items:flex-start;font-size:12px}.ew-experience-icon{width:42px;height:42px;border-radius:12px}.ew-selling-guide{padding:36px 5%}.ew-selling-cards article{padding:22px}}

.ew-store .ew-faq[hidden]{display:none!important}

/* Dedicated commerce section controls; public previews never receive this editor shell. */
.ew-edit-section{position:relative;isolation:isolate;outline:1px dashed #b9c5d0;outline-offset:-1px;scroll-margin:8px;margin:8px 0}.ew-edit-section[data-selected=true]{outline:3px solid #8662d5;outline-offset:-3px}.ew-edit-section-tools{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:5px;padding:7px;background:#f3effc;border-bottom:1px solid #d8ccee;flex-wrap:wrap}.ew-edit-section-tools>span{margin-left:auto;font:11px system-ui;color:#655478}.ew-builder .ew-edit-section-tools button{min-height:36px;padding:7px 9px;background:#fff;color:#6543a6;border:1px solid #d8cfee;font-size:12px}.ew-edit-section-hit{position:absolute;inset:45px 0 0;z-index:2;opacity:0;cursor:pointer!important;width:100%;border:0!important}.ew-edit-section-hit:focus-visible{opacity:.18;background:#a78bfa!important;outline:3px solid #7653bd!important}.ew-selected-name{display:block;color:#6945b1;font-size:14px;overflow-wrap:anywhere}.ew-selected-actions{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0}.ew-builder .ew-selected-actions button{min-height:40px;padding:7px 9px}.ew-selected-actions button:last-child{color:#b23857}.ew-editor-hint{font-size:12px;line-height:1.6;color:#667489}.ew-inspector-group{border-top:1px solid #e6e0ed;padding:16px 0 3px;margin-top:16px}.ew-inspector-group>summary{font-size:12px;font-weight:650;color:#66478f;cursor:pointer;min-height:32px}.ew-inspector fieldset{padding-top:8px;margin-top:6px}.ew-edit-section-tools [aria-pressed=true]{background:#e4d7fc!important}@media(max-width:600px){.ew-edit-section-tools{gap:3px;padding:5px}.ew-edit-section-tools>span{display:none}.ew-builder .ew-edit-section-tools button{font-size:11px;padding:6px}.ew-edit-section-hit{inset:42px 0 0}}

/* Intrinsic grid rows prevent the inspector from covering element controls in small windows. */
@media(min-width:601px) and (max-width:1100px){.ew-focus .ew-workspace{grid-template-rows:max-content max-content;grid-auto-rows:max-content;align-items:start}.ew-focus .ew-palette{max-height:75vh;overflow:auto}.ew-focus .ew-inspector{max-height:none}.ew-focus .ew-canvas{max-height:75vh}}
/* 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; }
}
/* 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); } }