/* MBS Team App — self-contained, mobile-first visual system.
 * Styles are strictly scoped to the standalone app document/app root. */
html.mbs-app-document,
body.mbs-app-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: #f7f7f5;
}

body.mbs-app-shell {
  overflow-x: hidden;
  color: #171716;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-color-scheme: dark) {
  html.mbs-app-document,
  body.mbs-app-shell { background: #10100f; color: #f7f7f3; }
}

.mbs-app {
  --mbs-bg: #f7f7f5;
  --mbs-surface: #ffffff;
  --mbs-surface-raised: #ffffff;
  --mbs-text: #171716;
  --mbs-muted: #72726d;
  --mbs-faint: #a1a19b;
  --mbs-line: #e4e4df;
  --mbs-line-strong: #d7d7d0;
  --mbs-fill: #efefeb;
  --mbs-fill-hover: #e6e6e0;
  --mbs-inverse: #171716;
  --mbs-inverse-text: #fff;
  --mbs-danger: #b6372f;
  --mbs-danger-soft: #fbefed;
  --mbs-success: #226a4b;
  --mbs-success-soft: #edf7f1;
  --mbs-warning: #926516;
  --mbs-warning-soft: #fbf3df;
  --mbs-overlay: rgb(11 11 10 / 48%);
  --mbs-shadow: 0 12px 32px rgb(22 22 20 / 8%), 0 2px 7px rgb(22 22 20 / 5%);
  --mbs-focus: #2767a9;
  --mbs-radius: 20px;
  --mbs-radius-sm: 14px;
  --mbs-ease: cubic-bezier(.2, .8, .2, 1);
  min-height: 100dvh;
  background: var(--mbs-bg);
  color: var(--mbs-text);
  color-scheme: light;
}

.mbs-app .mbs-launch-screen {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  align-content: center;
  gap: 13px;
  background: var(--mbs-bg);
  color: var(--mbs-text);
  opacity: 1;
  transition: opacity .24s ease;
}
.mbs-app .mbs-launch-screen.is-leaving { opacity: 0; }
.mbs-app .mbs-launch-logo { width: 112px; height: 44px; object-fit: contain; }
.mbs-app .mbs-launch-name { font-size: 17px; font-weight: 720; letter-spacing: -.02em; }
.mbs-app .mbs-launch-spinner { width: 16px; height: 16px; margin-top: 8px; border: 2px solid var(--mbs-line); border-top-color: var(--mbs-text); border-radius: 50%; animation: mbs-launch-spin .7s linear infinite; }
.mbs-app .mbs-auth-form { display: grid; gap: 14px; width: 100%; margin: 22px auto 0; }
.mbs-app .mbs-auth-segment { display: flex; width: 100%; margin: 20px auto 0; }
.mbs-app .mbs-auth-segment button { flex: 1; }

.mbs-app[data-theme="dark"] {
  --mbs-bg: #10100f;
  --mbs-surface: #191918;
  --mbs-surface-raised: #222220;
  --mbs-text: #f7f7f3;
  --mbs-muted: #a5a5a0;
  --mbs-faint: #777772;
  --mbs-line: #31312e;
  --mbs-line-strong: #454540;
  --mbs-fill: #292927;
  --mbs-fill-hover: #343431;
  --mbs-inverse: #f7f7f3;
  --mbs-inverse-text: #171716;
  --mbs-danger: #fa9187;
  --mbs-danger-soft: #3a201e;
  --mbs-success: #75caa0;
  --mbs-success-soft: #183225;
  --mbs-warning: #edc66f;
  --mbs-warning-soft: #392d16;
  --mbs-overlay: rgb(0 0 0 / 66%);
  --mbs-shadow: 0 14px 38px rgb(0 0 0 / 34%), 0 2px 8px rgb(0 0 0 / 18%);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  .mbs-app[data-theme="system"] {
    --mbs-bg: #10100f;
    --mbs-surface: #191918;
    --mbs-surface-raised: #222220;
    --mbs-text: #f7f7f3;
    --mbs-muted: #a5a5a0;
    --mbs-faint: #777772;
    --mbs-line: #31312e;
    --mbs-line-strong: #454540;
    --mbs-fill: #292927;
    --mbs-fill-hover: #343431;
    --mbs-inverse: #f7f7f3;
    --mbs-inverse-text: #171716;
    --mbs-danger: #fa9187;
    --mbs-danger-soft: #3a201e;
    --mbs-success: #75caa0;
    --mbs-success-soft: #183225;
    --mbs-warning: #edc66f;
    --mbs-warning-soft: #392d16;
    --mbs-overlay: rgb(0 0 0 / 66%);
    --mbs-shadow: 0 14px 38px rgb(0 0 0 / 34%), 0 2px 8px rgb(0 0 0 / 18%);
    color-scheme: dark;
  }
}

.mbs-app *,
.mbs-app *::before,
.mbs-app *::after { box-sizing: border-box; }

.mbs-app button,
.mbs-app input,
.mbs-app textarea,
.mbs-app select { font: inherit; }

.mbs-app button { cursor: pointer; }

.mbs-app button:disabled,
.mbs-app input:disabled,
.mbs-app textarea:disabled,
.mbs-app select:disabled { cursor: not-allowed; opacity: .52; }

.mbs-app :focus-visible {
  outline: 3px solid var(--mbs-focus);
  outline-offset: 2px;
}

.mbs-app [hidden] { display: none !important; }

.mbs-app svg { display: block; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.mbs-app .mbs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mbs-no-script {
  box-sizing: border-box;
  width: min(100% - 40px, 480px);
  margin: 16vh auto;
  padding: 28px;
  border: 1px solid #e4e4df;
  border-radius: 22px;
  background: #fff;
  color: #171716;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Base controls */
.mbs-app .mbs-icon-button,
.mbs-app .mbs-button,
.mbs-app .mbs-nav-item,
.mbs-app .mbs-choice,
.mbs-app .mbs-row-button {
  -webkit-tap-highlight-color: transparent;
}

.mbs-app .mbs-icon-button {
  display: inline-grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--mbs-text);
  transition: background-color .16s var(--mbs-ease), border-color .16s var(--mbs-ease), transform .16s var(--mbs-ease);
}

.mbs-app .mbs-icon-button:hover { background: var(--mbs-fill); }
.mbs-app .mbs-icon-button:active { transform: scale(.94); }
.mbs-app .mbs-icon-button.is-selected { background: var(--mbs-fill); border-color: var(--mbs-line); }

.mbs-app .mbs-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: var(--mbs-inverse);
  color: var(--mbs-inverse-text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .16s var(--mbs-ease), border-color .16s var(--mbs-ease), transform .16s var(--mbs-ease), opacity .16s var(--mbs-ease);
}

.mbs-app .mbs-button:hover { opacity: .88; }
.mbs-app .mbs-button:active { transform: scale(.98); }
.mbs-app .mbs-button svg { width: 18px; height: 18px; }
.mbs-app .mbs-button--secondary { border-color: var(--mbs-line); background: var(--mbs-surface); color: var(--mbs-text); }
.mbs-app .mbs-button--secondary:hover { background: var(--mbs-fill); opacity: 1; }
.mbs-app .mbs-button--quiet { padding-inline: 9px; background: transparent; color: var(--mbs-text); }
.mbs-app .mbs-button--quiet:hover { background: var(--mbs-fill); opacity: 1; }
.mbs-app .mbs-button--danger { background: var(--mbs-danger); color: #fff; }
.mbs-app .mbs-button--small { min-height: 36px; padding: 8px 12px; border-radius: 11px; font-size: 13px; }
.mbs-app .mbs-button--wide { width: 100%; }

.mbs-app .mbs-input,
.mbs-app .mbs-textarea,
.mbs-app .mbs-select {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--mbs-line-strong);
  border-radius: 12px;
  appearance: none;
  background: var(--mbs-surface);
  color: var(--mbs-text);
  font-size: 16px;
  line-height: 1.3;
  transition: border-color .16s var(--mbs-ease), box-shadow .16s var(--mbs-ease), background-color .16s var(--mbs-ease);
}

.mbs-app .mbs-input::placeholder,
.mbs-app .mbs-textarea::placeholder { color: var(--mbs-faint); opacity: 1; }
.mbs-app .mbs-input:focus,
.mbs-app .mbs-textarea:focus,
.mbs-app .mbs-select:focus { border-color: var(--mbs-focus); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mbs-focus) 19%, transparent); }
.mbs-app .mbs-textarea { min-height: 96px; resize: vertical; }

.mbs-app .mbs-field { display: grid; gap: 7px; }
.mbs-app .mbs-field > label,
.mbs-app .mbs-field-label { color: var(--mbs-muted); font-size: 13px; font-weight: 650; }
.mbs-app .mbs-field-help { color: var(--mbs-muted); font-size: 12px; line-height: 1.45; }
.mbs-app .mbs-import-schema,
.mbs-app .mbs-import-example,
.mbs-app .mbs-import-preview,
.mbs-app .mbs-import-messages { display: grid; gap: 10px; margin: 0 0 16px; padding: 14px; border: 1px solid var(--mbs-line); border-radius: 16px; background: var(--mbs-surface-raised); }
.mbs-app .mbs-import-schema h3,
.mbs-app .mbs-import-example h3,
.mbs-app .mbs-import-preview h3,
.mbs-app .mbs-import-messages h3 { margin: 0; font-size: 13px; }
.mbs-app .mbs-import-schema p { margin: 0; color: var(--mbs-muted); font-size: 12px; line-height: 1.5; }
.mbs-app .mbs-import-schema strong { color: var(--mbs-text); }
.mbs-app .mbs-import-schema code,
.mbs-app .mbs-import-example code { font: 11px/1.55 var(--mbs-mono, ui-monospace, SFMono-Regular, Menlo, monospace); overflow-wrap: anywhere; }
.mbs-app .mbs-import-file { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 12px 0; border-bottom: 1px solid var(--mbs-line); }
.mbs-app .mbs-import-file span { flex: 0 0 auto; color: var(--mbs-muted); font-size: 12px; }
.mbs-app .mbs-import-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.mbs-app .mbs-import-summary span { padding: 10px; border: 1px solid var(--mbs-line); border-radius: 12px; color: var(--mbs-muted); font-size: 12px; }
.mbs-app .mbs-import-scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
.mbs-app .mbs-import-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 12px; text-align: left; }
.mbs-app .mbs-import-table th,
.mbs-app .mbs-import-table td { padding: 8px; border-bottom: 1px solid var(--mbs-line); vertical-align: top; overflow-wrap: anywhere; }
.mbs-app .mbs-import-table th { color: var(--mbs-muted); font-weight: 650; }
.mbs-app .mbs-import-messages ul { display: grid; gap: 5px; margin: 0; padding-left: 18px; color: var(--mbs-muted); font-size: 12px; line-height: 1.4; }
.mbs-app .mbs-import-messages.is-warning { border-color: color-mix(in srgb, var(--mbs-warning, #d39b32) 50%, var(--mbs-line)); }
.mbs-app .mbs-import-messages.is-error,
.mbs-app .mbs-import-error { color: var(--mbs-danger, #ef6a6a); }
.mbs-app .mbs-import-error { margin: 0 0 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--mbs-danger, #ef6a6a) 50%, var(--mbs-line)); border-radius: 12px; font-size: 13px; }
.mbs-app .mbs-import-actions { display: grid; gap: 10px; }
.mbs-app .mbs-import-validating,
.mbs-app .mbs-import-success { display: grid; justify-items: start; gap: 10px; min-height: 140px; align-content: center; }
.mbs-app .mbs-import-validating span { color: var(--mbs-muted); font-size: 13px; }
.mbs-app .mbs-import-result { margin: 0; font-size: 16px; }
.mbs-app .mbs-fields { display: grid; gap: 15px; }
.mbs-app .mbs-fields--two { grid-template-columns: 1fr 1fr; gap: 12px; }

.mbs-app .mbs-divider { height: 1px; margin: 4px 0; background: var(--mbs-line); }
.mbs-app .mbs-stack { display: grid; gap: 12px; }
.mbs-app .mbs-stack--tight { gap: 7px; }
.mbs-app .mbs-inline { display: flex; align-items: center; gap: 9px; }
.mbs-app .mbs-spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mbs-app .mbs-muted { color: var(--mbs-muted); }
.mbs-app .mbs-tiny { font-size: 12px; }
.mbs-app .mbs-wrap { flex-wrap: wrap; }

/* App skeleton and navigation */
.mbs-app .mbs-layout { display: grid; min-height: 100dvh; grid-template-rows: auto 1fr auto; }
.mbs-app .mbs-topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  min-height: calc(58px + env(safe-area-inset-top));
  align-items: end;
  gap: 5px;
  padding: env(safe-area-inset-top) 12px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--mbs-line) 84%, transparent);
  background: color-mix(in srgb, var(--mbs-bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.mbs-app .mbs-topbar--auth { grid-template-columns: 1fr; justify-items: center; }
.mbs-app .mbs-brand { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; color: inherit; font-size: 17px; font-weight: 780; letter-spacing: -.04em; text-decoration: none; }
.mbs-app .mbs-brand-mark { display: block; width: 32px; height: 32px; object-fit: contain; flex: 0 0 auto; }
.mbs-app .mbs-brand--auth { justify-content: center; }
.mbs-app .mbs-topbar-title { min-width: 0; padding: 0 4px; align-self: center; overflow: hidden; font-size: 17px; font-weight: 750; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.mbs-app .mbs-topbar-actions { display: flex; align-items: center; gap: 1px; }
.mbs-app .mbs-notification-button { position: relative; }
.mbs-app .mbs-badge { position: absolute; top: 5px; right: 5px; display: grid; min-width: 16px; height: 16px; padding: 0 4px; place-items: center; border: 2px solid var(--mbs-bg); border-radius: 99px; background: var(--mbs-danger); color: #fff; font-size: 10px; font-weight: 800; line-height: 1; }
.mbs-app .mbs-user-button { display: grid; width: 42px; height: 42px; place-items: center; padding: 0; overflow: hidden; border: 1px solid var(--mbs-line); border-radius: 50%; background: var(--mbs-surface); color: var(--mbs-text); }

.mbs-app .mbs-main { width: min(100%, 1200px); min-width: 0; margin: 0 auto; padding: 20px 16px calc(98px + env(safe-area-inset-bottom)); }
.mbs-app .mbs-main--project { width: min(100%, 1380px); }
.mbs-app .mbs-bottom-nav {
  position: fixed;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: calc(64px + env(safe-area-inset-bottom));
  padding: 5px 7px env(safe-area-inset-bottom);
  border-top: 1px solid color-mix(in srgb, var(--mbs-line) 85%, transparent);
  background: color-mix(in srgb, var(--mbs-surface) 90%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.mbs-app .mbs-nav-item { position: relative; display: grid; min-height: 54px; place-items: center; gap: 1px; padding: 2px 4px; border: 0; border-radius: 13px; background: transparent; color: var(--mbs-muted); font-size: 10px; font-weight: 650; line-height: 1; }
.mbs-app .mbs-nav-item svg { width: 21px; height: 21px; }
.mbs-app .mbs-nav-item.is-active { color: var(--mbs-text); }
.mbs-app .mbs-nav-item--add { align-self: center; width: 48px; min-height: 48px; justify-self: center; border-radius: 17px; background: var(--mbs-inverse); color: var(--mbs-inverse-text); box-shadow: 0 5px 15px color-mix(in srgb, var(--mbs-inverse) 20%, transparent); }
.mbs-app .mbs-nav-item--add svg { width: 24px; height: 24px; }
.mbs-app .mbs-nav-item .mbs-badge { top: 2px; right: calc(50% - 22px); }

/* Auth */
.mbs-app .mbs-auth { display: grid; min-height: 100vh; min-height: 100dvh; grid-template-rows: auto minmax(0, 1fr); padding-bottom: env(safe-area-inset-bottom); }
.mbs-app .mbs-auth .mbs-topbar--auth { padding-top: max(14px, env(safe-area-inset-top)); }
.mbs-app .mbs-auth-content { display: grid; width: min(100%, 520px); align-content: center; margin: 0 auto; padding: 26px max(20px, env(safe-area-inset-left)) max(30px, env(safe-area-inset-bottom)); }
.mbs-app .mbs-auth-card { width: 100%; }
.mbs-app .mbs-auth-card-brand { display:flex; align-items:center; justify-content:center; min-height:82px; color:var(--mbs-text); }
.mbs-app .mbs-auth-card-brand img { width:clamp(72px, 22vw, 90px); height:82px; object-fit:contain; }
.mbs-app .mbs-auth-intro { max-width: 510px; margin-bottom: 28px; }
.mbs-app .mbs-eyebrow { margin: 0 0 8px; color: var(--mbs-muted); font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.mbs-app .mbs-auth-title,
.mbs-app .mbs-page-title { margin: 0; color: var(--mbs-text); font-size: clamp(31px, 7vw, 48px); font-weight: 770; letter-spacing: -.055em; line-height: 1.05; }
.mbs-app .mbs-auth-copy { max-width: 390px; margin: 12px 0 0; color: var(--mbs-muted); font-size: 16px; line-height: 1.5; }
.mbs-app .mbs-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.mbs-app .mbs-profile-card { display: grid; min-height: 142px; align-content: space-between; justify-items: start; padding: 16px; border: 1px solid var(--mbs-line); border-radius: 20px; background: var(--mbs-surface); color: var(--mbs-text); text-align: left; box-shadow: 0 1px 1px rgb(0 0 0 / 2%); transition: border-color .16s var(--mbs-ease), background-color .16s var(--mbs-ease), transform .16s var(--mbs-ease), box-shadow .16s var(--mbs-ease); }
.mbs-app .mbs-profile-card:hover { border-color: var(--mbs-line-strong); background: var(--mbs-surface-raised); box-shadow: var(--mbs-shadow); transform: translateY(-1px); }
.mbs-app .mbs-profile-card:active { transform: scale(.98); }
.mbs-app .mbs-profile-card-name { max-width: 100%; overflow: hidden; font-size: 15px; font-weight: 720; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.mbs-app .mbs-auth-footer { margin-top: 22px; color: var(--mbs-muted); font-size: 12px; line-height: 1.45; }

.mbs-app .mbs-avatar { display: inline-grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--mbs-line-strong) 80%, transparent); border-radius: 50%; background: var(--mbs-fill); color: var(--mbs-text); font-size: 12px; font-weight: 780; letter-spacing: -.02em; text-transform: uppercase; }
.mbs-app .mbs-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mbs-app .mbs-avatar--large { width: 62px; height: 62px; font-size: 19px; }
.mbs-app .mbs-avatar--small { width: 26px; height: 26px; font-size: 10px; }
.mbs-app .mbs-avatar-stack { display: flex; padding-left: 3px; }
.mbs-app .mbs-avatar-stack .mbs-avatar { width: 27px; height: 27px; margin-left: -4px; border: 2px solid var(--mbs-surface); font-size: 9px; }
.mbs-app .mbs-avatar-stack .mbs-avatar:first-child { margin-left: 0; }
.mbs-app .mbs-avatar-stack-more { display: grid; width: 27px; height: 27px; margin-left: -4px; place-items: center; border: 2px solid var(--mbs-surface); border-radius: 50%; background: var(--mbs-fill); color: var(--mbs-muted); font-size: 9px; font-weight: 800; }

/* Headings, states, cards */
.mbs-app .mbs-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 13px; margin: 4px 0 22px; }
.mbs-app .mbs-page-head-copy { min-width: 0; }
.mbs-app .mbs-system-areas { display:grid; grid-template-columns:1fr; gap:10px; margin:0 0 26px; }
.mbs-app .mbs-system-area { display:grid; grid-template-columns:minmax(0, 1fr) auto; width:100%; min-height:104px; align-items:center; gap:12px; padding:18px; border:1px solid var(--mbs-line); border-radius:var(--mbs-radius); background:var(--mbs-surface); color:var(--mbs-text); box-shadow:0 1px 1px rgb(0 0 0 / 2%); text-align:left; transition:transform .16s var(--mbs-ease), border-color .16s var(--mbs-ease), background-color .16s var(--mbs-ease); }
.mbs-app .mbs-system-area:hover { border-color:var(--mbs-line-strong); background:var(--mbs-surface-raised); transform:translateY(-1px); }
.mbs-app .mbs-system-area-copy { display:grid; gap:5px; min-width:0; }
.mbs-app .mbs-system-area-copy strong { font-size:19px; font-weight:760; letter-spacing:-.035em; }
.mbs-app .mbs-system-area-copy span { color:var(--mbs-muted); font-size:13px; }
.mbs-app .mbs-system-area-arrow { display:grid; width:32px; height:32px; place-items:center; border:1px solid var(--mbs-line); border-radius:50%; color:var(--mbs-muted); }
.mbs-app .mbs-projects-overview--compact .mbs-system-areas { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.mbs-app .mbs-system-area--compact { min-height:96px; padding:16px; }
.mbs-app .mbs-system-area--compact .mbs-system-area-copy strong { font-size:17px; }
.mbs-app .mbs-system-area--compact .mbs-system-area-arrow { width:28px; height:28px; }
.mbs-app .mbs-system-area--details { display:block; min-height:218px; padding:0; overflow:hidden; }
.mbs-app .mbs-system-area-open { display:grid; width:100%; min-height:216px; grid-template-rows:minmax(0, 1fr) auto; gap:16px; padding:18px; border:0; background:transparent; color:var(--mbs-text); text-align:left; }
.mbs-app .mbs-system-area-open:hover { background:var(--mbs-surface-raised); }
.mbs-app .mbs-system-area--details .mbs-system-area-copy { align-content:start; gap:5px; }
.mbs-app .mbs-system-area--details .mbs-system-area-copy strong { font-size:19px; }
.mbs-app .mbs-system-area-metric { color:var(--mbs-text) !important; font-size:14px !important; font-weight:700; }
.mbs-app .mbs-system-area-kicker { margin-top:5px; color:var(--mbs-muted); font-size:11px !important; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.mbs-app .mbs-system-area--details b { overflow:hidden; color:var(--mbs-text); font-size:15px; letter-spacing:-.02em; text-overflow:ellipsis; white-space:nowrap; }
.mbs-app .mbs-system-area--details small { overflow:hidden; color:var(--mbs-muted); font-size:12px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.mbs-app .mbs-system-area-cta { display:inline-flex; align-items:center; gap:5px; color:var(--mbs-muted); font-size:12px; font-weight:700; }
.mbs-app .mbs-system-area-cta svg { width:15px; height:15px; }
.mbs-app .mbs-normal-projects { display:grid; gap:0; }
.mbs-app .mbs-page-subtitle { margin: 7px 0 0; color: var(--mbs-muted); font-size: 14px; line-height: 1.4; }
.mbs-app .mbs-section { margin-top: 26px; }
.mbs-app .mbs-section:first-child { margin-top: 0; }
.mbs-app .mbs-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-size: 14px; font-weight: 760; letter-spacing: -.02em; }
.mbs-app .mbs-section-title small { color: var(--mbs-muted); font-size: 12px; font-weight: 600; }
.mbs-app .mbs-card { border: 1px solid var(--mbs-line); border-radius: var(--mbs-radius); background: var(--mbs-surface); box-shadow: 0 1px 1px rgb(0 0 0 / 2%); }
.mbs-app .mbs-card--padded { padding: 17px; }
.mbs-app .mbs-card--interactive { cursor: pointer; transition: transform .16s var(--mbs-ease), box-shadow .16s var(--mbs-ease), border-color .16s var(--mbs-ease); }
.mbs-app .mbs-card--interactive:hover { border-color: var(--mbs-line-strong); box-shadow: var(--mbs-shadow); transform: translateY(-1px); }
.mbs-app .mbs-empty { display: grid; justify-items: center; padding: 34px 20px; border: 1px dashed var(--mbs-line-strong); border-radius: var(--mbs-radius); color: var(--mbs-muted); text-align: center; }
.mbs-app .mbs-empty svg { width: 28px; height: 28px; margin-bottom: 11px; color: var(--mbs-faint); }
.mbs-app .mbs-empty h2 { margin: 0; color: var(--mbs-text); font-size: 16px; letter-spacing: -.02em; }
.mbs-app .mbs-empty p { max-width: 300px; margin: 7px 0 0; font-size: 14px; line-height: 1.45; }
.mbs-app .mbs-empty .mbs-button { margin-top: 17px; }
.mbs-app .mbs-error-state { border-color: color-mix(in srgb, var(--mbs-danger) 30%, var(--mbs-line)); background: var(--mbs-danger-soft); }

/* Pulse: personal performance and team activity, intentionally compact. */
.mbs-app .mbs-pulse { display:grid; gap:24px; }
.mbs-app .mbs-pulse-section { display:grid; gap:10px; }
.mbs-app .mbs-pulse-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mbs-app .mbs-pulse-section-head h2 { margin:0; font-size:15px; font-weight:760; letter-spacing:-.025em; }
.mbs-app .mbs-pulse-activity-list { overflow:hidden; }
.mbs-app .mbs-pulse-activity { display:grid; width:100%; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:12px 14px; border:0; border-bottom:1px solid var(--mbs-line); background:transparent; color:var(--mbs-text); text-align:left; }
.mbs-app .mbs-pulse-activity:last-child { border-bottom:0; }
.mbs-app .mbs-pulse-activity:hover { background:var(--mbs-surface-raised); }
.mbs-app .mbs-pulse-activity > svg { width:16px; color:var(--mbs-muted); }
.mbs-app .mbs-pulse-activity > span:nth-child(2) { display:grid; min-width:0; gap:2px; }
.mbs-app .mbs-pulse-activity strong { overflow:hidden; font-size:13px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.mbs-app .mbs-pulse-activity small { color:var(--mbs-muted); font-size:11px; }
.mbs-app .mbs-pulse-range,.mbs-app .mbs-pulse-metric-switch,.mbs-app .mbs-pulse-ranking-switch { display:flex; gap:5px; overflow-x:auto; padding:2px; scrollbar-width:none; }
.mbs-app .mbs-pulse-range::-webkit-scrollbar,.mbs-app .mbs-pulse-metric-switch::-webkit-scrollbar,.mbs-app .mbs-pulse-ranking-switch::-webkit-scrollbar { display:none; }
.mbs-app .mbs-pulse-switch,.mbs-app .mbs-pulse-chart-button { flex:0 0 auto; min-height:32px; padding:6px 10px; border:1px solid var(--mbs-line); border-radius:10px; background:var(--mbs-surface); color:var(--mbs-muted); font-size:12px; font-weight:700; }
.mbs-app .mbs-pulse-switch.is-active,.mbs-app .mbs-pulse-chart-button.is-active { border-color:var(--mbs-text); background:var(--mbs-text); color:var(--mbs-bg); }
.mbs-app .mbs-pulse-performance { display:grid; gap:18px; padding:16px; }
.mbs-app .mbs-pulse-primary { display:grid; gap:3px; }
.mbs-app .mbs-pulse-primary > strong { font-size:42px; line-height:1; letter-spacing:-.065em; }
.mbs-app .mbs-pulse-primary > span { color:var(--mbs-muted); font-size:13px; }
.mbs-app .mbs-pulse-primary > small { color:var(--mbs-text); font-size:12px; font-weight:700; }
.mbs-app .mbs-pulse-primary > small.is-negative { color:var(--mbs-muted); }
.mbs-app .mbs-pulse-chart-switch { display:flex; gap:4px; }
.mbs-app .mbs-pulse-chart-button { min-height:28px; padding:4px 8px; border-radius:8px; font-size:11px; }
.mbs-app .mbs-pulse-bars { display:grid; gap:8px; min-height:126px; }
.mbs-app .mbs-pulse-bars-plot { display:flex; align-items:end; gap:5px; height:104px; padding:0 2px; border-bottom:1px solid var(--mbs-line); }
.mbs-app .mbs-pulse-bars-plot > span { position:relative; display:flex; flex:1 1 0; min-width:10px; height:100%; align-items:end; }
.mbs-app .mbs-pulse-bars-plot i { display:block; width:100%; min-height:4px; border-radius:5px 5px 2px 2px; background:var(--mbs-text); opacity:.72; }
.mbs-app .mbs-pulse-bars-plot b { position:absolute; top:-17px; left:50%; transform:translateX(-50%); color:var(--mbs-muted); font-size:10px; font-weight:650; }
.mbs-app .mbs-pulse-bar-labels { display:flex; gap:5px; }
.mbs-app .mbs-pulse-bar-labels small { flex:1 1 0; overflow:hidden; color:var(--mbs-muted); font-size:10px; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.mbs-app .mbs-pulse-ring-wrap { display:flex; align-items:center; gap:16px; min-height:125px; }
.mbs-app .mbs-pulse-ring { width:104px; height:104px; color:var(--mbs-text); }
.mbs-app .mbs-pulse-ring-wrap > div { display:grid; gap:3px; }
.mbs-app .mbs-pulse-ring-wrap strong { font-size:28px; letter-spacing:-.05em; }
.mbs-app .mbs-pulse-ring-wrap span,.mbs-app .mbs-pulse-ring-wrap small { color:var(--mbs-muted); font-size:12px; }
.mbs-app .mbs-pulse-kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.mbs-app .mbs-pulse-kpis article { display:grid; gap:5px; min-height:76px; padding:12px; border:1px solid var(--mbs-line); border-radius:13px; background:var(--mbs-surface); }
.mbs-app .mbs-pulse-kpis span { color:var(--mbs-muted); font-size:11px; font-weight:650; }
.mbs-app .mbs-pulse-kpis strong { font-size:22px; letter-spacing:-.04em; }
.mbs-app .mbs-pulse-ranking { overflow:hidden; }
.mbs-app .mbs-pulse-rank { display:grid; grid-template-columns:28px auto minmax(0,1fr); align-items:center; gap:9px; min-height:59px; padding:9px 14px; border-bottom:1px solid var(--mbs-line); }
.mbs-app .mbs-pulse-rank.is-me { background:var(--mbs-fill); }
.mbs-app .mbs-pulse-rank-position { color:var(--mbs-muted); font-size:12px; font-weight:750; }
.mbs-app .mbs-pulse-rank-copy { display:grid; min-width:0; gap:2px; }
.mbs-app .mbs-pulse-rank-copy strong { display:flex; align-items:center; gap:6px; overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.mbs-app .mbs-pulse-rank-copy strong small { padding:2px 5px; border:1px solid var(--mbs-line-strong); border-radius:6px; color:var(--mbs-muted); font-size:10px; font-weight:700; }
.mbs-app .mbs-pulse-rank-copy > span { color:var(--mbs-muted); font-size:12px; }
.mbs-app .mbs-pulse-rank-separator { height:8px; border-top:1px solid var(--mbs-line); background:var(--mbs-fill); }
.mbs-app .mbs-pulse-empty { margin:0; padding:16px; font-size:13px; }

/* Projects */
.mbs-app .mbs-project-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.mbs-app .mbs-project-card { position: relative; display: grid; min-height: 245px; grid-template-rows: auto auto 1fr auto; padding: 17px 17px 17px 27px; overflow: hidden; text-align: left; }

/* Leads V2 stays inside the existing app shell and inherits its scoped dark UI. */
.mbs-app .mbs-lead-toolbar { display:flex; gap:8px; align-items:center; margin:0 0 20px; }
.mbs-app .mbs-lead-toolbar > .mbs-input { min-width:0; flex:1 1 180px; }
.mbs-app .mbs-lead-filter-button { flex:0 0 auto; min-height:44px; padding-inline:11px; }
.mbs-app .mbs-lead-filter-button svg { width:16px; height:16px; }
.mbs-app .mbs-lead-filter-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.mbs-app .mbs-lead-filter-actions .mbs-button { width:100%; }
.mbs-app .mbs-compact-filter-controls { display:grid; gap:8px; margin:0 0 20px; }
.mbs-app .mbs-compact-filter-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.mbs-app .mbs-compact-filter-actions .mbs-button { min-height:44px; justify-content:center; }
.mbs-app .mbs-compact-filter-actions svg { width:16px; height:16px; }
.mbs-app .mbs-compact-search-input { min-width:0; }
.mbs-app .mbs-lead-view-tabs { display:flex; gap:7px; overflow-x:auto; margin:0 0 14px; padding-bottom:3px; scrollbar-width:none; }
.mbs-app .mbs-lead-view-tabs::-webkit-scrollbar { display:none; }
.mbs-app .mbs-lead-view-tabs .mbs-button { flex:0 0 auto; white-space:nowrap; }
.mbs-app .mbs-lead-view-tabs .is-active { background:var(--mbs-text); color:var(--mbs-bg); }
.mbs-app .mbs-lead-phase-filter { display:flex; gap:7px; flex-wrap:wrap; }
.mbs-app .mbs-lead-phase-filter .is-active { background:var(--mbs-text); color:var(--mbs-bg); }
.mbs-app .mbs-lead-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.mbs-app .mbs-lead-card { display:flex; min-height:154px; padding:0; overflow:hidden; }
.mbs-app .mbs-lead-open { flex:1; min-width:0; border:0; background:transparent; color:inherit; text-align:left; padding:18px; display:flex; flex-direction:column; gap:7px; cursor:pointer; }
.mbs-app .mbs-lead-open strong { font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mbs-app .mbs-lead-open span,.mbs-app .mbs-lead-open small { color:var(--mbs-muted); }
.mbs-app .mbs-lead-phase { color:var(--mbs-text) !important; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.mbs-app .mbs-lead-card-actions { display:flex; flex:0 0 auto; flex-direction:column; justify-content:center; gap:7px; padding:12px 12px 12px 0; }
.mbs-app .mbs-lead-action { display:inline-flex; min-height:36px; align-items:center; justify-content:center; gap:5px; padding:0 9px; border:1px solid var(--mbs-line); border-radius:10px; color:var(--mbs-text); font-size:11px; font-weight:700; line-height:1; text-decoration:none; white-space:nowrap; }
.mbs-app .mbs-lead-action svg { width:14px; height:14px; }
.mbs-app .mbs-lead-action--phone { border-color:color-mix(in srgb,var(--mbs-success) 42%,var(--mbs-line)); background:var(--mbs-success-soft); color:var(--mbs-success); }
.mbs-app .mbs-lead-action--mail { border-color:color-mix(in srgb,var(--mbs-focus) 42%,var(--mbs-line)); background:color-mix(in srgb,var(--mbs-focus) 12%,var(--mbs-surface)); color:var(--mbs-text); }
.mbs-app .mbs-lead-action--maps { border-color:color-mix(in srgb,var(--mbs-warning) 40%,var(--mbs-line)); background:var(--mbs-warning-soft); color:var(--mbs-warning); }
.mbs-app .mbs-lead-action:hover { filter:brightness(1.06); }
.mbs-app .mbs-customer-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.mbs-app .mbs-customer-card { min-height:154px; overflow:hidden; }
.mbs-app .mbs-customer-open { display:grid; width:100%; min-height:152px; grid-template-rows:minmax(0, 1fr) auto; gap:16px; padding:18px; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.mbs-app .mbs-customer-card-copy { display:grid; align-content:start; gap:6px; min-width:0; }
.mbs-app .mbs-customer-card-copy strong { overflow:hidden; font-size:16px; text-overflow:ellipsis; white-space:nowrap; }
.mbs-app .mbs-customer-card-copy > span { color:var(--mbs-muted); font-size:13px; }
.mbs-app .mbs-customer-card-copy small { overflow:hidden; color:var(--mbs-muted); font-size:12px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.mbs-app .mbs-customer-card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--mbs-muted); font-size:12px; }
.mbs-app .mbs-lead-notes { margin-top:22px; padding-top:18px; border-top:1px solid var(--mbs-border); }
.mbs-app .mbs-lead-notes h3 { margin:0 0 12px; font-size:15px; }
.mbs-app .mbs-lead-notes p { margin:0 0 11px; color:var(--mbs-muted); line-height:1.45; }
@media (max-width:640px) { .mbs-app .mbs-lead-toolbar { display:block; } .mbs-app .mbs-lead-phase-filter { margin-top:10px; overflow:auto; flex-wrap:nowrap; padding-bottom:3px; } .mbs-app .mbs-lead-phase-filter .mbs-button { white-space:nowrap; } .mbs-app .mbs-lead-grid { grid-template-columns:1fr; } }
.mbs-app .mbs-project-color { position: absolute; top: clamp(14px, 10%, 16px); bottom: clamp(14px, 10%, 16px); left: 11px; width: 3px; border-radius: 999px; background: var(--project-color, transparent); opacity: .62; pointer-events: none; }
.mbs-app .mbs-project-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mbs-app .mbs-project-logo { display: grid; width: 42px; height: 42px; place-items: center; overflow: hidden; border: 1px solid var(--mbs-line); border-radius: 14px; background: var(--mbs-fill); color: var(--mbs-text); font-size: 14px; font-weight: 800; letter-spacing: -.04em; }
.mbs-app .mbs-project-logo img { width: 100%; height: 100%; object-fit: cover; }
.mbs-app .mbs-project-logo--color { border-color: var(--project-color, var(--mbs-line)); }
.mbs-app .mbs-project-name { max-width: 100%; margin: 17px 0 5px; overflow: hidden; color: var(--mbs-text); font-size: 18px; font-weight: 740; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.mbs-app .mbs-project-description { display: -webkit-box; margin: 0; overflow: hidden; color: var(--mbs-muted); font-size: 13px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mbs-app .mbs-project-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.mbs-app .mbs-project-progress { color: var(--mbs-muted); font-size: 12px; font-weight: 650; }
.mbs-app .mbs-project-detail-context { display:grid; align-content:start; gap:8px; margin-top:14px; }
.mbs-app .mbs-project-progress-bar { display:block; width:100%; height:5px; overflow:hidden; border-radius:999px; background:var(--mbs-fill); }
.mbs-app .mbs-project-progress-bar i { display:block; height:100%; border-radius:inherit; background:var(--mbs-text); opacity:.72; }
.mbs-app .mbs-project-next-task { display:grid; gap:2px; min-width:0; margin-top:2px; }
.mbs-app .mbs-project-next-task small { color:var(--mbs-muted); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.mbs-app .mbs-project-next-task b { overflow:hidden; color:var(--mbs-text); font-size:13px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.mbs-app .mbs-project-list { display: grid; gap: 10px; }
.mbs-app .mbs-project-overview { overflow: hidden; }
.mbs-app .mbs-project-overview-button { display: grid; width: 100%; min-height:68px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; border: 0; background: transparent; color: var(--mbs-text); text-align: left; }
.mbs-app .mbs-project-overview-button:hover { background:var(--mbs-surface-raised); }
.mbs-app .mbs-project-overview-main { display: flex; min-width: 0; align-items: center; gap: 12px; }
.mbs-app .mbs-project-overview .mbs-project-logo { width:38px; height:38px; border-radius:12px; font-size:13px; }
.mbs-app .mbs-project-overview-copy { min-width: 0; }
.mbs-app .mbs-project-overview-copy strong { display: block; overflow: hidden; font-size: 15px; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.mbs-app .mbs-project-overview-copy span { display: block; margin-top: 2px; color: var(--mbs-muted); font-size: 12px; }
.mbs-app .mbs-project-overview-chevron { color: var(--mbs-muted); }

/* Project work area / task lists */
.mbs-app .mbs-project-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--mbs-muted); font-size: 13px; }
.mbs-app .mbs-project-meta .mbs-avatar-stack { margin-left: 2px; }
.mbs-app .mbs-project-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.mbs-app .mbs-list-grid { display: grid; gap: 14px; }
.mbs-app .mbs-list-card { overflow: hidden; }
.mbs-app .mbs-list-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 54px; align-items: center; gap: 8px; padding: 7px 9px 7px 14px; border-bottom: 1px solid var(--mbs-line); }
.mbs-app .mbs-list-toggle { display: grid; width: 28px; height: 34px; place-items: center; padding: 0; border: 0; background: transparent; color: var(--mbs-muted); }
.mbs-app .mbs-list-toggle svg { width: 17px; height: 17px; transition: transform .16s var(--mbs-ease); }
.mbs-app .mbs-list-card.is-collapsed .mbs-list-toggle svg { transform: rotate(-90deg); }
.mbs-app .mbs-list-name { overflow: hidden; font-size: 15px; font-weight: 760; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.mbs-app .mbs-list-count { color: var(--mbs-muted); font-size: 12px; font-weight: 650; }
.mbs-app .mbs-list-content { min-height: 52px; }
.mbs-app .mbs-task-list { padding: 4px 10px 5px; }
.mbs-app .mbs-task-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 52px; padding: 4px 3px; border-bottom: 1px solid var(--mbs-line); }
.mbs-app .mbs-task-row:last-child { border-bottom: 0; }
.mbs-app .mbs-task-row.is-done .mbs-task-title { color: var(--mbs-muted); text-decoration: line-through; text-decoration-color: var(--mbs-faint); }
.mbs-app .mbs-task-row.is-overdue .mbs-task-due { color: var(--mbs-danger); }
.mbs-app .mbs-task-complete { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 1.5px solid var(--mbs-line-strong); border-radius: 50%; background: transparent; color: transparent; transition: color .16s var(--mbs-ease), border-color .16s var(--mbs-ease), background-color .16s var(--mbs-ease), transform .16s var(--mbs-ease); }
.mbs-app .mbs-task-complete:hover { border-color: var(--mbs-success); }
.mbs-app .mbs-task-complete:active { transform: scale(.88); }
.mbs-app .mbs-task-complete.is-done { border-color: var(--mbs-success); background: var(--mbs-success); color: #fff; }
.mbs-app .mbs-task-complete svg { width: 16px; height: 16px; stroke-width: 2.6; }
.mbs-app .mbs-task-open { display: grid; min-width: 0; min-height: 44px; align-content: center; gap: 3px; padding: 3px 0; border: 0; background: transparent; color: var(--mbs-text); text-align: left; }
.mbs-app .mbs-task-title { overflow: hidden; font-size: 14px; font-weight: 620; letter-spacing: -.012em; text-overflow: ellipsis; white-space: nowrap; }
.mbs-app .mbs-task-meta { display: flex; min-width: 0; align-items: center; gap: 7px; color: var(--mbs-muted); font-size: 11px; font-weight: 620; }
.mbs-app .mbs-task-meta > span { display: inline-flex; min-width: 0; align-items: center; gap: 3px; }
.mbs-app .mbs-task-meta svg { width: 13px; height: 13px; }
.mbs-app .mbs-task-side { display: flex; align-items: center; gap: 4px; }
.mbs-app .mbs-task-side .mbs-avatar { width: 27px; height: 27px; font-size: 9px; }
.mbs-app .mbs-task-pin { color: var(--mbs-text); }
.mbs-app .mbs-drag-handle { display: grid; width: 29px; height: 34px; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--mbs-faint); touch-action: none; }
.mbs-app .mbs-drag-handle:hover { background: var(--mbs-fill); color: var(--mbs-muted); }
.mbs-app .mbs-task-row.is-dragging { opacity: .45; }
.mbs-app .mbs-task-row.is-drag-over { border-top: 2px solid var(--mbs-text); }
.mbs-app .mbs-quick-add { display: grid; gap: 9px; padding: 10px 13px 13px; border-top: 1px solid var(--mbs-line); background: color-mix(in srgb, var(--mbs-fill) 44%, var(--mbs-surface)); }
.mbs-app .mbs-quick-add-main { display: flex; gap: 8px; }
.mbs-app .mbs-quick-add-main .mbs-input { min-width: 0; border-color: transparent; background: var(--mbs-surface); }
.mbs-app .mbs-quick-add-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mbs-app .mbs-empty-list { padding: 16px 14px; color: var(--mbs-muted); font-size: 13px; text-align: center; }

/* Focus */
.mbs-app .mbs-focus-queue { padding-top: 1px; }
.mbs-app .mbs-focus-section { display: grid; gap: 8px; margin-bottom: 23px; }
.mbs-app .mbs-focus-task { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 57px; padding: 7px 12px; border: 1px solid var(--mbs-line); border-radius: 15px; background: var(--mbs-surface); color: var(--mbs-text); text-align: left; }
.mbs-app .mbs-focus-task-copy { min-width: 0; }
.mbs-app .mbs-focus-task-copy strong { display: block; overflow: hidden; font-size: 14px; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.mbs-app .mbs-focus-task-copy span { display: block; overflow: hidden; margin-top: 2px; color: var(--mbs-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.mbs-app .mbs-focus-lead { grid-template-columns: 38px minmax(0, 1fr) auto; }
.mbs-app .mbs-focus-lead-badge { display: grid; width: 34px; height: 28px; place-items: center; border: 1px solid var(--mbs-line-strong); border-radius: 8px; color: var(--mbs-muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.mbs-app .mbs-focus-lead-state { color: var(--mbs-faint) !important; }
.mbs-app .mbs-focus-badges { display: flex !important; flex-wrap: wrap; gap: 5px; margin-top: 7px !important; overflow: visible !important; white-space: normal !important; }
.mbs-app .mbs-focus-badges > span { display: inline-flex; min-height: 20px; align-items: center; margin: 0; padding: 2px 7px; border: 1px solid var(--mbs-line); border-radius: 999px; background: var(--mbs-fill); color: var(--mbs-muted); font-size: 10px; font-weight: 720; line-height: 1; white-space: nowrap; }

/* Dialogs / sheets */
.mbs-app .mbs-layer { position: fixed; z-index: 100; inset: 0; display: grid; align-items: end; background: var(--mbs-overlay); animation: mbs-fade-in .18s var(--mbs-ease); }
.mbs-app .mbs-dialog-wrap { display: grid; width: 100%; max-height: min(92dvh, 860px); }
.mbs-app .mbs-sheet { display: grid; max-height: min(92dvh, 860px); grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid var(--mbs-line); border-bottom: 0; border-radius: 24px 24px 0 0; background: var(--mbs-surface); box-shadow: 0 -9px 40px rgb(0 0 0 / 15%); animation: mbs-sheet-in .21s var(--mbs-ease); }
.mbs-app .mbs-sheet--small { grid-template-rows: auto auto; }
.mbs-app .mbs-sheet-head { position:relative; display:grid; grid-template-columns:44px minmax(0, 1fr) 44px; min-height:70px; align-items:end; gap:4px; padding:18px 12px 8px; border-bottom:1px solid var(--mbs-line); touch-action:pan-y; }
.mbs-app .mbs-sheet-title { min-width:0; margin:0; overflow:hidden; font-size:16px; font-weight:760; letter-spacing:-.03em; line-height:44px; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.mbs-app .mbs-sheet-head-actions { display: flex; align-items: center; justify-content: flex-end; }
.mbs-app .mbs-sheet-body { min-height: 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.mbs-app .mbs-dialog { width: min(100%, 480px); max-height: calc(100dvh - 32px); margin: auto; overflow: hidden; border: 1px solid var(--mbs-line); border-radius: 22px; background: var(--mbs-surface); box-shadow: var(--mbs-shadow); animation: mbs-dialog-in .18s var(--mbs-ease); }
.mbs-app .mbs-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 17px 10px; }
.mbs-app .mbs-dialog-head h2 { margin: 0; font-size: 19px; letter-spacing: -.035em; }
.mbs-app .mbs-dialog-body { padding: 8px 17px 18px; }
.mbs-app .mbs-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 17px 17px; }
.mbs-app .mbs-sheet-grabber { position:absolute; top:8px; left:50%; width:38px; height:4px; margin:0; border-radius:9px; background:var(--mbs-line-strong); transform:translateX(-50%); touch-action:none; }

/* Lead detail: the default is a calm reading surface, not an edit form. */
.mbs-app .mbs-sheet--lead-detail .mbs-sheet-body { padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
.mbs-app .mbs-lead-detail { display:grid; gap:20px; }
.mbs-app .mbs-lead-direct-actions { display:flex; flex-wrap:wrap; gap:8px; }
.mbs-app .mbs-lead-detail-section { display:grid; gap:10px; }
.mbs-app .mbs-lead-detail-section h3 { margin:0; color:var(--mbs-muted); font-size:12px; font-weight:750; letter-spacing:.075em; text-transform:uppercase; }
.mbs-app .mbs-lead-detail-section dl { display:grid; gap:10px; margin:0; }
.mbs-app .mbs-lead-detail-section dl > div { display:grid; grid-template-columns:minmax(92px, .42fr) minmax(0, 1fr); gap:12px; }
.mbs-app .mbs-lead-detail-section dt { color:var(--mbs-muted); font-size:13px; }
.mbs-app .mbs-lead-detail-section dd { min-width:0; margin:0; color:var(--mbs-text); font-size:14px; overflow-wrap:anywhere; }
.mbs-app .mbs-lead-detail-section dd a { color:var(--mbs-text); text-underline-offset:3px; }
.mbs-app .mbs-lead-notes { display:grid; gap:12px; margin-top:0; padding-top:18px; border-top:1px solid var(--mbs-border); }
.mbs-app .mbs-lead-notes h3 { margin:0; font-size:15px; }
.mbs-app .mbs-lead-timeline { display:grid; gap:9px; }
.mbs-app .mbs-lead-timeline-item { padding:11px 12px; border:1px solid var(--mbs-border); border-radius:13px; background:var(--mbs-surface-raised); }
.mbs-app .mbs-lead-timeline-item strong { font-size:13px; }
.mbs-app .mbs-lead-timeline-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:7px; }
.mbs-app .mbs-lead-timeline-head .mbs-avatar { width:24px; height:24px; font-size:9px; }
.mbs-app .mbs-lead-timeline-head time { color:var(--mbs-muted); font-size:11px; white-space:nowrap; }
.mbs-app .mbs-lead-timeline-item p { margin:4px 0 0; color:var(--mbs-muted); font-size:13px; line-height:1.45; white-space:pre-wrap; }
.mbs-app .mbs-lead-timeline-item--activity { border-style:dashed; background:transparent; }
.mbs-app .mbs-lead-activity { display:grid; gap:12px; margin:0; padding-top:16px; border-top:1px solid var(--mbs-border); }
.mbs-app .mbs-lead-activity summary { display:flex; align-items:center; justify-content:space-between; cursor:pointer; color:var(--mbs-text); font-size:15px; font-weight:720; list-style:none; }
.mbs-app .mbs-lead-activity summary::-webkit-details-marker { display:none; }
.mbs-app .mbs-lead-activity summary::after { content:'⌄'; margin-left:8px; color:var(--mbs-muted); }
.mbs-app .mbs-lead-activity[open] summary::after { transform:rotate(180deg); }
.mbs-app .mbs-lead-activity summary span { margin-left:auto; padding:2px 7px; border:1px solid var(--mbs-line); border-radius:999px; color:var(--mbs-muted); font-size:11px; }
.mbs-app .mbs-lead-footer { position:sticky; bottom:calc(-18px - env(safe-area-inset-bottom)); z-index:2; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin:0 -16px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--mbs-line); background:color-mix(in srgb, var(--mbs-surface) 94%, transparent); backdrop-filter:blur(12px); }
.mbs-app .mbs-lead-footer .mbs-button { width:100%; }
.mbs-app .mbs-button--success { border-color:#4f8b61; background:#4f8b61; color:#fff; }
.mbs-app .mbs-button--success:hover { border-color:#5d9b70; background:#5d9b70; color:#fff; }
.mbs-app .mbs-lead-conversion-success { display:grid; gap:6px; margin-bottom:18px; }
.mbs-app .mbs-lead-conversion-success p { margin:0; color:var(--mbs-muted); font-size:14px; line-height:1.45; }

/* PIN */
.mbs-app .mbs-pin-dialog { width: min(100%, 408px); }
.mbs-app .mbs-pin-profile { display: grid; justify-items: center; gap: 10px; padding: 12px 16px 3px; }
.mbs-app .mbs-pin-profile strong { font-size: 17px; letter-spacing: -.025em; }
.mbs-app .mbs-pin-copy { margin: 12px 0 14px; color: var(--mbs-muted); font-size: 13px; line-height: 1.45; text-align: center; }
.mbs-app .mbs-pin-dots { display: flex; justify-content: center; gap: 12px; margin: 16px 0 22px; }
.mbs-app .mbs-pin-dot { width: 12px; height: 12px; border: 1.5px solid var(--mbs-line-strong); border-radius: 50%; background: transparent; transition: background-color .12s var(--mbs-ease), border-color .12s var(--mbs-ease), transform .12s var(--mbs-ease); }
.mbs-app .mbs-pin-dot.is-filled { border-color: var(--mbs-text); background: var(--mbs-text); transform: scale(1.05); }
.mbs-app .mbs-pin-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mbs-app .mbs-pin-key { min-height: 53px; border: 1px solid var(--mbs-line); border-radius: 15px; background: var(--mbs-surface); color: var(--mbs-text); font-size: 20px; font-weight: 560; }
.mbs-app .mbs-pin-key:hover { background: var(--mbs-fill); }
.mbs-app .mbs-pin-key:active { background: var(--mbs-fill-hover); transform: scale(.97); }
.mbs-app .mbs-pin-key--action { color: var(--mbs-muted); font-size: 14px; font-weight: 700; }
.mbs-app .mbs-pin-error { min-height: 18px; margin: 10px 0 0; color: var(--mbs-danger); font-size: 12px; font-weight: 600; text-align: center; }

/* Detail editor */
.mbs-app .mbs-task-detail { display: grid; gap: 19px; }
.mbs-app .mbs-task-title-input { min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--mbs-text); font-size: 23px; font-weight: 750; letter-spacing: -.045em; }
.mbs-app .mbs-task-title-input:focus { box-shadow: inset 0 -2px 0 var(--mbs-focus); }
.mbs-app .mbs-completion-line { display: flex; align-items: center; gap: 10px; color: var(--mbs-muted); font-size: 13px; }
.mbs-app .mbs-completion-line .mbs-task-complete { width: 32px; height: 32px; }
.mbs-app .mbs-detail-section { display: grid; gap: 9px; }
.mbs-app .mbs-detail-section > h3 { margin: 0; color: var(--mbs-muted); font-size: 12px; font-weight: 740; letter-spacing: .02em; text-transform: uppercase; }
.mbs-app .mbs-detail-row { display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; min-height: 45px; align-items: center; gap: 10px; padding: 5px 0; color: var(--mbs-text); }
.mbs-app .mbs-detail-row > svg { color: var(--mbs-muted); }
.mbs-app .mbs-detail-row-label { min-width: 0; color: var(--mbs-muted); font-size: 13px; }
.mbs-app .mbs-detail-row-value { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 620; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.mbs-app .mbs-detail-row-button { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.mbs-app .mbs-detail-row-button:hover .mbs-detail-row-value { text-decoration: underline; }
.mbs-app .mbs-description-view { min-height: 46px; padding: 13px; border: 1px solid var(--mbs-line); border-radius: 13px; color: var(--mbs-muted); font-size: 14px; line-height: 1.52; white-space: pre-wrap; }
.mbs-app .mbs-description-view.is-empty { font-style: italic; }
.mbs-app .mbs-image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mbs-app .mbs-image-thumb { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--mbs-line); border-radius: 13px; background: var(--mbs-fill); }
.mbs-app .mbs-image-thumb > img,
.mbs-app .mbs-image-open,
.mbs-app .mbs-image-open img { width: 100%; height: 100%; }
.mbs-app .mbs-image-thumb > img,
.mbs-app .mbs-image-open img { display: block; object-fit: cover; }
.mbs-app .mbs-image-open { display: block; padding: 0; border: 0; background: transparent; color: inherit; text-align: inherit; }
.mbs-app .mbs-image-open:hover img { transform: scale(1.025); }
.mbs-app .mbs-image-open img { transition: transform .16s var(--mbs-ease); }
.mbs-app .mbs-image-fallback { display: grid; width: 100%; height: 100%; place-items: center; gap: 3px; color: var(--mbs-muted); font-size: 11px; font-weight: 650; }
.mbs-app .mbs-image-fallback svg { width: 25px; height: 25px; }
.mbs-app .mbs-image-tools { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; gap: 3px; }
.mbs-app .mbs-image-order { display: inline-flex; overflow: hidden; border-radius: 10px; background: rgb(0 0 0 / 58%); }
.mbs-app .mbs-image-order-button,
.mbs-app .mbs-image-remove { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 0; background: rgb(0 0 0 / 58%); color: #fff; }
.mbs-app .mbs-image-order-button { border-radius: 0; }
.mbs-app .mbs-image-order-button + .mbs-image-order-button { border-left: 1px solid rgb(255 255 255 / 22%); }
.mbs-app .mbs-image-remove { border-radius: 50%; }
.mbs-app .mbs-image-order-button:hover,
.mbs-app .mbs-image-remove:hover { background: rgb(0 0 0 / 76%); }
.mbs-app .mbs-image-order-button svg,
.mbs-app .mbs-image-remove svg { width: 16px; height: 16px; }
.mbs-app .mbs-image-add { display: grid; min-height: 44px; place-items: center; border: 1px dashed var(--mbs-line-strong); border-radius: 13px; background: transparent; color: var(--mbs-muted); font-size: 13px; font-weight: 650; }
.mbs-app .mbs-image-add:hover { background: var(--mbs-fill); }
.mbs-app .mbs-image-preview { display: grid; gap: 10px; min-height: min(62dvh, 540px); margin: 0; align-content: center; }
.mbs-app .mbs-image-preview img { display: block; width: 100%; max-height: min(68dvh, 680px); object-fit: contain; border-radius: 14px; background: var(--mbs-fill); }
.mbs-app .mbs-image-preview figcaption { color: var(--mbs-muted); font-size: 12px; line-height: 1.4; text-align: center; }
.mbs-app .mbs-comment { padding: 12px 0; border-bottom: 1px solid var(--mbs-line); }
.mbs-app .mbs-comment:first-child { padding-top: 0; }
.mbs-app .mbs-comment:last-child { border-bottom: 0; }
.mbs-app .mbs-comment-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.mbs-app .mbs-comment-author { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; font-weight: 700; }
.mbs-app .mbs-comment-time { overflow: hidden; color: var(--mbs-muted); font-size: 11px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.mbs-app .mbs-comment-text { margin: 0; color: var(--mbs-text); font-size: 14px; line-height: 1.48; white-space: pre-wrap; }
.mbs-app .mbs-comment-composer { display: grid; gap: 8px; margin-top: 9px; }
.mbs-app .mbs-comment-action { width: 29px; height: 29px; }
.mbs-app .mbs-activity { display: grid; gap: 9px; }
.mbs-app .mbs-activity-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; color: var(--mbs-muted); font-size: 12px; line-height: 1.4; }
.mbs-app .mbs-activity-item svg { width: 16px; height: 16px; margin-top: 1px; color: var(--mbs-faint); }
.mbs-app .mbs-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.mbs-app .mbs-load-more { display: flex; justify-content: center; padding: 15px 0 2px; }
.mbs-app .mbs-card .mbs-load-more { padding-top: 13px; }

/* Notifications */
.mbs-app .mbs-notification-day { margin: 20px 0 8px; color: var(--mbs-muted); font-size: 12px; font-weight: 720; text-transform: uppercase; letter-spacing: .025em; }
.mbs-app .mbs-notification-day:first-child { margin-top: 0; }
.mbs-app .mbs-notification-item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: 10px; width: 100%; min-height: 65px; padding: 12px 12px; border: 1px solid var(--mbs-line); border-radius: 15px; background: var(--mbs-surface); color: var(--mbs-text); text-align: left; }
.mbs-app .mbs-notification-item + .mbs-notification-item { margin-top: 7px; }
.mbs-app .mbs-notification-item.is-unread { border-color: var(--mbs-line-strong); background: var(--mbs-surface-raised); }
.mbs-app .mbs-notification-dot { width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--mbs-text); }
.mbs-app .mbs-notification-copy { min-width: 0; }
.mbs-app .mbs-notification-copy strong { display: block; color: var(--mbs-text); font-size: 13px; letter-spacing: -.01em; line-height: 1.35; }
.mbs-app .mbs-notification-copy span { display: block; margin-top: 3px; color: var(--mbs-muted); font-size: 12px; line-height: 1.35; }
.mbs-app .mbs-notification-time { color: var(--mbs-muted); font-size: 11px; white-space: nowrap; }

/* Preferences and settings */
.mbs-app .mbs-profile-page { display: grid; gap: 24px; }
.mbs-app .mbs-profile-page > .mbs-section { margin-top: 0; }
.mbs-app .mbs-profile-summary { padding: 0; }
.mbs-app .mbs-profile-summary-open { display: grid; width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 16px; border: 0; background: transparent; color: var(--mbs-text); text-align: left; }
.mbs-app .mbs-profile-summary-copy { min-width: 0; }
.mbs-app .mbs-profile-summary-copy h2 { margin: 0; overflow: hidden; font-size: 17px; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.mbs-app .mbs-profile-summary-copy p { margin: 3px 0 0; color: var(--mbs-muted); font-size: 13px; }
.mbs-app .mbs-profile-summary-edit { color: var(--mbs-muted); font-size: 12px; font-weight: 700; }
.mbs-app .mbs-profile-image-picker { display: grid; justify-items: start; gap: 10px; }
.mbs-app .mbs-avatar--profile-edit { width: 78px; height: 78px; font-size: 24px; }
.mbs-app .mbs-setting-group { overflow: hidden; }
.mbs-app .mbs-setting-head { padding: 14px 16px 8px; color: var(--mbs-muted); font-size: 12px; font-weight: 720; letter-spacing: .02em; text-transform: uppercase; }
.mbs-app .mbs-setting-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 57px; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--mbs-line); }
.mbs-app .mbs-setting-row-copy { min-width: 0; }
.mbs-app .mbs-setting-row-copy strong { display: block; font-size: 14px; letter-spacing: -.015em; }
.mbs-app .mbs-setting-row-copy span { display: block; margin-top: 3px; color: var(--mbs-muted); font-size: 12px; line-height: 1.35; }
.mbs-app .mbs-lead-reminder-time { width: 96px; min-height: 44px; padding-block: 8px; text-align: center; }
.mbs-app .mbs-profile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.mbs-app .mbs-profile-actions .mbs-button { display: inline-flex; min-height: 44px; justify-content: center; gap: 7px; }
.mbs-app .mbs-profile-actions .mbs-button svg { width: 16px; height: 16px; }
.mbs-app .mbs-profile-actions .mbs-button--logout { border-color: color-mix(in srgb, var(--mbs-danger) 32%, var(--mbs-line)); color: color-mix(in srgb, var(--mbs-danger) 74%, var(--mbs-text)); }
.mbs-app .mbs-profile-actions .mbs-button--logout:hover { background: var(--mbs-danger-soft); }
.mbs-app .mbs-segment { display: inline-flex; max-width: 100%; gap: 2px; padding: 3px; border: 1px solid var(--mbs-line); border-radius: 11px; background: var(--mbs-fill); }
.mbs-app .mbs-segment button { min-height: 31px; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--mbs-muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.mbs-app .mbs-segment button.is-active { background: var(--mbs-surface); color: var(--mbs-text); box-shadow: 0 1px 2px rgb(0 0 0 / 7%); }
.mbs-app .mbs-switch { position: relative; display: inline-flex; width: 45px; height: 28px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 99px; background: var(--mbs-line-strong); transition: background-color .16s var(--mbs-ease); }
.mbs-app .mbs-switch::after { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 25%); content: ""; transition: transform .17s var(--mbs-ease); }
.mbs-app .mbs-switch[aria-checked="true"] { background: var(--mbs-text); }
.mbs-app .mbs-switch[aria-checked="true"]::after { transform: translateX(17px); }
.mbs-app .mbs-device-list { display: grid; gap: 7px; }
.mbs-app .mbs-device { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 11px; padding: 8px 10px; border: 1px solid var(--mbs-line); border-radius: 12px; }
.mbs-app .mbs-device-copy { min-width: 0; }
.mbs-app .mbs-device-copy strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.mbs-app .mbs-device-copy span { display: block; margin-top: 2px; color: var(--mbs-muted); font-size: 11px; }
.mbs-app .mbs-trash-list { display: grid; gap: 9px; }
.mbs-app .mbs-trash-item { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; }
.mbs-app .mbs-trash-item-copy { min-width: 0; display: grid; gap: 5px; }
.mbs-app .mbs-trash-item-copy strong { min-width: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.mbs-app .mbs-trash-item-copy > span { overflow: hidden; color: var(--mbs-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.mbs-app .mbs-trash-item-icon { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border: 1px solid var(--mbs-line); border-radius: 8px; color: var(--mbs-muted); }
.mbs-app .mbs-trash-item-icon svg { width: 15px; height: 15px; }
.mbs-app .mbs-trash-item-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.mbs-app .mbs-trash-item-unavailable { max-width: 132px; color: var(--mbs-muted); font-size: 11px; line-height: 1.28; text-align: right; }

/* Creation / pickers */
.mbs-app .mbs-disclosure { display: grid; gap: 13px; padding-top: 3px; }
.mbs-app .mbs-disclosure-toggle { justify-self: start; padding: 0; border: 0; background: transparent; color: var(--mbs-muted); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.mbs-app .mbs-color-options { display: flex; flex-wrap: wrap; gap: 9px; }
.mbs-app .mbs-color-choice { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--color, transparent); color: #fff; }
.mbs-app .mbs-color-choice.is-none { border-color: var(--mbs-line-strong); background: var(--mbs-surface); color: var(--mbs-muted); }
.mbs-app .mbs-color-choice.is-active { box-shadow: 0 0 0 2px var(--mbs-surface), 0 0 0 4px var(--mbs-text); }
.mbs-app .mbs-member-picker { display: flex; flex-wrap: wrap; gap: 7px; }
.mbs-app .mbs-member-chip { display: inline-flex; min-height: 36px; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border: 1px solid var(--mbs-line); border-radius: 99px; background: var(--mbs-surface); color: var(--mbs-text); font-size: 12px; font-weight: 650; }
.mbs-app .mbs-member-chip .mbs-avatar { width: 25px; height: 25px; font-size: 9px; }
.mbs-app .mbs-member-chip.is-selected { border-color: var(--mbs-text); background: var(--mbs-fill); }
.mbs-app .mbs-choice-list { display: grid; gap: 7px; }
.mbs-app .mbs-choice { display: grid; width: 100%; grid-template-columns: 30px minmax(0, 1fr) auto; min-height: 52px; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--mbs-line); border-radius: 13px; background: var(--mbs-surface); color: var(--mbs-text); text-align: left; }
.mbs-app .mbs-choice:hover { background: var(--mbs-fill); }
.mbs-app .mbs-choice.is-selected { border-color: var(--mbs-text); }
.mbs-app .mbs-choice-copy { min-width: 0; }
.mbs-app .mbs-choice-copy strong { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.mbs-app .mbs-choice-copy span { display: block; overflow: hidden; margin-top: 2px; color: var(--mbs-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.mbs-app .mbs-choice-check { color: var(--mbs-success); }

/* Global create sheet and the deliberately compact Power dialer. */
.mbs-app .mbs-create-menu { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.mbs-app .mbs-create-menu--three > :nth-child(3) { grid-column:1 / -1; }
.mbs-app .mbs-create-choice { display:grid; min-height:116px; place-items:center; gap:9px; padding:14px 8px; border:1px solid var(--mbs-line); border-radius:18px; background:var(--mbs-surface); color:var(--mbs-text); font:inherit; font-size:14px; }
.mbs-app .mbs-create-choice:hover { background:var(--mbs-fill); border-color:var(--mbs-line-strong); }
.mbs-app .mbs-create-choice-icon { display:grid; width:42px; height:42px; place-items:center; border-radius:14px; background:var(--mbs-fill); color:var(--mbs-text); }
.mbs-app .mbs-create-choice-icon svg { width:21px; height:21px; }
.mbs-app .mbs-create-choice--power { border-color:color-mix(in srgb, var(--mbs-text) 26%, var(--mbs-line)); background:var(--mbs-fill); }
.mbs-app .mbs-create-choice--power .mbs-create-choice-icon { background:var(--mbs-inverse); color:var(--mbs-inverse-text); }
.mbs-app .mbs-power { display:grid; gap:18px; }
.mbs-app .mbs-power-count { margin:0; color:var(--mbs-muted); font-size:13px; font-weight:650; }
.mbs-app .mbs-power-card { display:grid; gap:13px; padding:20px; border:1px solid var(--mbs-line); border-radius:20px; background:var(--mbs-surface-raised); }
.mbs-app .mbs-power-kicker { color:var(--mbs-muted); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.mbs-app .mbs-power-card h3 { margin:0; color:var(--mbs-text); font-size:22px; line-height:1.16; letter-spacing:-.025em; }
.mbs-app .mbs-power-meta, .mbs-app .mbs-power-phone { margin:0; color:var(--mbs-muted); font-size:14px; line-height:1.45; }
.mbs-app .mbs-power-phone { color:var(--mbs-text); font-weight:700; }
.mbs-app .mbs-power-call { min-height:54px; font-size:16px; }
.mbs-app .mbs-power-secondary { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.mbs-app .mbs-power-link { display:inline-flex; min-height:40px; align-items:center; gap:6px; padding:0 9px; border-radius:10px; color:var(--mbs-muted); font-size:13px; font-weight:650; text-decoration:none; }
.mbs-app .mbs-power-link:hover { background:var(--mbs-fill); color:var(--mbs-text); }
.mbs-app .mbs-power-link svg { width:15px; height:15px; }
.mbs-app .mbs-power-actions { display:grid; gap:9px; }
.mbs-app .mbs-power-actions > p { margin:0; color:var(--mbs-muted); font-size:13px; font-weight:650; }
.mbs-app .mbs-power-action-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.mbs-app .mbs-power-action { min-height:46px; padding:8px; font-size:13px; }
.mbs-app .mbs-power-empty, .mbs-app .mbs-power-loading { display:grid; min-height:220px; place-items:center; align-content:center; gap:12px; text-align:center; color:var(--mbs-muted); }
.mbs-app .mbs-power-empty svg { width:34px; height:34px; color:var(--mbs-success); }
.mbs-app .mbs-power-empty h3 { margin:4px 0 0; color:var(--mbs-text); font-size:19px; }
.mbs-app .mbs-power-empty p { max-width:290px; margin:0 0 8px; line-height:1.5; }
@media (min-width: 700px) { .mbs-app .mbs-sheet--create-menu { max-width:440px; } }

/* Toasts, loaders, feedback */
.mbs-app .mbs-toasts { position: fixed; z-index: 200; top:calc(72px + env(safe-area-inset-top)); right:12px; left:12px; display:grid; gap:8px; pointer-events:none; }
.mbs-app .mbs-toast { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: min(100%, 480px); min-height: 48px; margin: 0 auto; padding: 8px 9px 8px 14px; border: 1px solid var(--mbs-line-strong); border-radius: 14px; background: var(--mbs-surface-raised); color: var(--mbs-text); box-shadow: var(--mbs-shadow); font-size: 13px; font-weight: 600; pointer-events: auto; animation: mbs-toast-in .2s var(--mbs-ease); }
.mbs-app .mbs-toast--error { border-color: color-mix(in srgb, var(--mbs-danger) 42%, var(--mbs-line)); background: var(--mbs-danger-soft); }
.mbs-app .mbs-toast--success { border-color: color-mix(in srgb, var(--mbs-success) 34%, var(--mbs-line)); background: var(--mbs-success-soft); }
.mbs-app .mbs-toast-action { padding: 7px 6px; border: 0; background: transparent; color: inherit; font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.mbs-app .mbs-toast-close { display: grid; width: 31px; height: 31px; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--mbs-muted); }
.mbs-app .mbs-toast-close:hover { background: color-mix(in srgb, var(--mbs-fill) 80%, transparent); }
.mbs-app .mbs-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 15px; padding: 10px 12px; border: 1px solid var(--mbs-line); border-radius: 13px; background: var(--mbs-fill); color: var(--mbs-muted); font-size: 13px; }
.mbs-app .mbs-banner strong { color: var(--mbs-text); }
.mbs-app .mbs-offline-banner { border-color: color-mix(in srgb, var(--mbs-warning) 35%, var(--mbs-line)); background: var(--mbs-warning-soft); color: var(--mbs-warning); }
.mbs-app .mbs-skeleton { overflow: hidden; border-radius: 8px; background: linear-gradient(90deg, var(--mbs-fill) 25%, var(--mbs-fill-hover) 38%, var(--mbs-fill) 63%); background-size: 400% 100%; animation: mbs-shimmer 1.4s ease infinite; }
.mbs-app .mbs-skeleton-card { min-height: 157px; border: 1px solid var(--mbs-line); border-radius: var(--mbs-radius); }

@keyframes mbs-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mbs-sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mbs-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes mbs-toast-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mbs-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes mbs-launch-spin { to { transform: rotate(360deg); } }

@media (min-width: 680px) {
  /* Desktop browsers have a stable viewport; use it directly after the mobile
     dynamic-viewport declaration so resizing never leaves an oversized shell. */
  .mbs-app .mbs-auth { min-height: 100vh; }
  .mbs-app .mbs-auth-content { padding: 36px 28px 52px; }
  .mbs-app .mbs-auth-card { padding: 34px; border: 1px solid var(--mbs-line); border-radius: 24px; background: var(--mbs-surface); box-shadow: var(--mbs-shadow); }
  .mbs-app .mbs-auth-card-brand { justify-content:center; }
  .mbs-app .mbs-profile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mbs-app .mbs-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mbs-app .mbs-system-areas { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .mbs-app .mbs-projects-overview--compact .mbs-project-list { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .mbs-app .mbs-customer-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
	.mbs-app .mbs-pulse-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .mbs-app .mbs-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .mbs-app .mbs-list-card { min-width: 0; }
  .mbs-app .mbs-layer { align-items: center; padding: 24px; }
  .mbs-app .mbs-dialog-wrap { width: min(100%, 620px); max-height: min(86dvh, 820px); margin: auto; }
  .mbs-app .mbs-sheet { max-height: min(86dvh, 820px); border-bottom: 1px solid var(--mbs-line); border-radius: 23px; }
  .mbs-app .mbs-sheet-grabber { display: none; }
  .mbs-app .mbs-sheet-head { min-height:62px; padding:8px 12px; touch-action:auto; }
}

@media (max-width: 339px) {
  .mbs-app .mbs-projects-overview--compact .mbs-system-areas { grid-template-columns:1fr; }
}

@media (min-width: 980px) {
	.mbs-app .mbs-profile-page { gap: 26px; }
  .mbs-app .mbs-layout { grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .mbs-app .mbs-topbar:not(.mbs-topbar--auth) { grid-column: 2; grid-template-columns: 44px minmax(0, 1fr) auto; padding-right: 24px; padding-left: 20px; }
  .mbs-app .mbs-main { grid-column: 2; width: min(100%, 1210px); padding: 28px 30px 48px; }
  .mbs-app .mbs-bottom-nav { top: 0; right: auto; bottom: 0; width: 80px; grid-column: 1; grid-row: 1 / span 2; grid-template-columns: 1fr; grid-template-rows: repeat(5, auto); align-content: center; gap: 6px; padding: 20px 9px; border-top: 0; border-right: 1px solid var(--mbs-line); }
  .mbs-app .mbs-nav-item { min-height: 56px; }
  .mbs-app .mbs-nav-item .mbs-badge { top: 1px; right: 8px; }
  .mbs-app .mbs-project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mbs-app .mbs-customer-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .mbs-app .mbs-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mbs-app .mbs-layer { justify-content: flex-end; align-items: stretch; padding: 0; }
  .mbs-app .mbs-dialog-wrap { width: min(620px, 50vw); height: 100dvh; max-height: none; margin: 0; }
  .mbs-app .mbs-sheet { height: 100%; max-height: none; border-top: 0; border-right: 0; border-bottom: 0; border-radius: 0; }
  .mbs-app .mbs-sheet--small { width: 100%; height: auto; max-height: min(86dvh, 760px); margin: auto 20px 20px auto; border: 1px solid var(--mbs-line); border-radius: 22px; }
  .mbs-app .mbs-dialog-wrap--image-preview { width: min(920px, calc(100vw - 48px)); height: auto; max-height: min(90dvh, 900px); margin: auto; }
  .mbs-app .mbs-sheet--image-preview { height: auto; max-height: min(90dvh, 900px); border: 1px solid var(--mbs-line); border-radius: 23px; }
  .mbs-app .mbs-toasts { top:82px; right:22px; bottom:auto; left:auto; width:420px; }
}

@media (max-width: 380px) {
  .mbs-app .mbs-main { padding-right: 12px; padding-left: 12px; }
  .mbs-app .mbs-profile-grid { gap: 8px; }
  .mbs-app .mbs-profile-card { min-height: 126px; padding: 13px; }
  .mbs-app .mbs-setting-row { grid-template-columns: 1fr; align-items: start; }
  .mbs-app .mbs-setting-row .mbs-segment { justify-self: start; }
  .mbs-app .mbs-setting-row .mbs-button, .mbs-app .mbs-setting-row .mbs-lead-reminder-time { justify-self: start; }
  .mbs-app .mbs-fields--two { grid-template-columns: 1fr; }
  .mbs-app .mbs-project-actions .mbs-button--secondary { padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mbs-app *, .mbs-app *::before, .mbs-app *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* A boot failure must remain visible and branded instead of leaving an empty shell. */
.mbs-app.mbs-boot-fallback {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 24px;
  background: var(--mbs-bg);
}
.mbs-app .mbs-boot-fallback-card {
  width: min(100%, 430px);
  padding: 30px;
  border: 1px solid var(--mbs-line);
  border-radius: var(--mbs-radius);
  background: var(--mbs-surface);
  box-shadow: var(--mbs-shadow);
}
.mbs-app .mbs-boot-fallback-logo { display: block; width: 138px; max-height: 38px; margin-bottom: 28px; object-fit: contain; object-position: left center; }
.mbs-app .mbs-boot-fallback-card h1 { margin: 5px 0 10px; color: var(--mbs-text); font-size: 24px; letter-spacing: -.035em; line-height: 1.12; }
.mbs-app .mbs-boot-fallback-card p:not(.mbs-eyebrow) { margin: 0 0 22px; color: var(--mbs-muted); line-height: 1.5; }

/* V3.6 task extensions: compact, touch-friendly additions to the existing sheet. */
.mbs-app .mbs-v36-picker { margin-top: 10px; }
.mbs-app .mbs-v36-picker summary { cursor: pointer; color: var(--mbs-muted); font-size: 13px; }
.mbs-app .mbs-tag-list { display: flex; flex-wrap: wrap; gap: 7px; }
.mbs-app .mbs-tag-chip { display: inline-flex; align-items: center; border: 1px solid var(--mbs-line); border-left: 3px solid var(--mbs-tag-color); border-radius: 999px; color: var(--mbs-text); font-size: 12px; line-height: 1; padding: 6px 8px; }
.mbs-app .mbs-check-row { align-items: center; display: flex; gap: 8px; min-height: 36px; }
.mbs-app .mbs-check-row > span:not(.mbs-muted) { flex: 1; min-width: 0; }
.mbs-app .mbs-check-row .is-complete { color: var(--mbs-muted); text-decoration: line-through; }
.mbs-app .mbs-v36-mentions { background: var(--mbs-surface); border: 1px solid var(--mbs-line); border-radius: 12px; box-shadow: 0 12px 28px rgb(0 0 0 / .22); display: grid; gap: 2px; margin: 6px 0; max-height: 180px; overflow: auto; padding: 5px; }
.mbs-app .mbs-v36-mentions button { align-items: center; background: transparent; border: 0; color: inherit; cursor: pointer; display: flex; gap: 8px; padding: 7px; text-align: left; width: 100%; }
.mbs-app .mbs-v36-mentions button:hover { background: rgb(255 255 255 / .07); border-radius: 8px; }
.mbs-app .mbs-v36-days { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.mbs-app .mbs-v36-day { border: 1px solid var(--mbs-line); border-radius: 999px; cursor: pointer; font-size: 11px; padding: 4px 6px; }
.mbs-app .mbs-v36-day input { margin: 0 3px 0 0; }
@media (max-width: 560px) { .mbs-app .mbs-check-row .mbs-icon-button { min-height: 34px; min-width: 34px; } }