/* ProWin 2.0 screens (sir's CRM spec v3.1 and his prototype, D-042).
 *
 * Every size, colour and spacing is the prototype's own inline value, set here as a rule.
 * Class names that 1.0 already uses globally (.badge, .note, .bar, .row, .card, .stepper)
 * are either avoided or fully reset here. All of it is scoped to body.crm-mode, .crm and .crm-scope, which only the 2.0 screens put on
 * the page (a 2.0 screen and its sheets carry .crm-scope), so nothing here can change how a
 * 1.0 screen looks.
 */

body.crm-mode {
  /* the prototype's tokens that 1.0 never needed */
  --blab-chronolift-accent: #A1D7F0;
  --blab-agebiome-accent: #F2C4BD;
  --blab-dermaai-accent: #808285;
  --blab-ease-signal: cubic-bezier(.4, 0, .2, 1);
  --blab-size-body-lg: 1.125rem;
  --blab-lh-body-lg: 1.6;
}
body.crm-mode #screen { flex: 1; display: flex; flex-direction: column; }
body.crm-mode .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }

.crm { flex: 1; display: flex; flex-direction: column; background: var(--blab-bg); min-height: 100%; }
.crm-scope button { font-family: var(--blab-font-body); -webkit-tap-highlight-color: transparent; }
.crm-scope p { margin: 0; }
.crm-scope .grow { flex: 1; min-width: 0; }
.crm-scope .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

@keyframes pw-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { @keyframes pw-in { from { opacity: 0; } to { opacity: 1; } } }
.crm-scope .in { animation: pw-in 400ms var(--blab-ease-signal) both; }
.crm-scope .in-slow { animation: pw-in 640ms var(--blab-ease-signal) both; }
.crm-scope .in-quick { animation: pw-in 240ms var(--blab-ease-signal) both; }

/* colour helpers */
.crm-scope .t-accent { color: var(--blab-accent); }
.crm-scope .t-muted { color: var(--blab-text-muted); }
.crm-scope .t-navy { color: var(--blab-navy); }
.crm-scope .t-error { color: var(--blab-error); }
.crm-scope .t-success { color: var(--blab-success); }
.crm-scope .t-white { color: #fff; }
.crm-scope .t-white72 { color: rgba(255, 255, 255, .72); }
.crm-scope .w600 { font-weight: 600; }
.crm-scope .w500 { font-weight: 500; }

/* ---------------------------------------------------------- headers ---- */

.crm-head {
  position: sticky; top: 0; z-index: 5; flex: none;
  min-height: 56px; padding-top: env(safe-area-inset-top);
  background: var(--blab-white); border-bottom: 1px solid var(--blab-border);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-left: 20px; padding-right: 12px;
}
.crm-head .logo { display: block; width: 120px; height: auto; }
.crm-head .back {
  display: flex; align-items: center; gap: 4px; min-height: 44px; margin-left: -10px; padding: 0 8px;
  border: 0; background: transparent; color: var(--blab-navy); font: 500 15px/1 var(--blab-font-body); cursor: pointer;
}
.crm-head .acts { display: flex; align-items: center; gap: 4px; }
.crm-head .offline {
  display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 4px;
  background: var(--blab-bg); color: var(--blab-navy); font: 500 12px/1 var(--blab-font-body); white-space: nowrap;
}
.crm-head .ibtn {
  width: 44px; height: 44px; display: grid; place-items: center; border: 0;
  background: transparent; color: var(--blab-navy); cursor: pointer;
}
.crm-head .lang {
  display: flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 10px;
  border: 0; background: transparent; color: var(--blab-navy); font: 600 13px/1 var(--blab-font-body); cursor: pointer;
}

.crm-vhead {
  position: sticky; top: 0; z-index: 5; flex: none;
  padding: calc(4px + env(safe-area-inset-top)) 12px 12px 8px;
  background: var(--blab-white); border-bottom: 1px solid var(--blab-border);
  display: flex; flex-direction: column; gap: 10px;
}
.crm-vhead .row { display: flex; align-items: center; gap: 6px; }
.crm-vhead .x {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--blab-navy); cursor: pointer;
}
.crm-vhead .name {
  display: flex; align-items: center; gap: 6px; font: 500 17px/1.25 var(--blab-font-editorial);
  color: var(--blab-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm-vhead .name span { overflow: hidden; text-overflow: ellipsis; }
.crm-vhead .line { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--blab-text-muted); }
.crm-vhead .segs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 0 4px 0 8px; }
.crm-vhead .segs button { height: 16px; padding: 6px 0; border: 0; background: transparent; cursor: default; }
.crm-vhead .segs button[data-can="1"] { cursor: pointer; }
.crm-vhead .segs span { display: block; height: 4px; border-radius: 2px; background: var(--blab-border); }
.crm-vhead .segs .cur span { background: var(--blab-accent); }
.crm-vhead .segs .done span { background: var(--blab-navy); }
.crm-vhead .segs .replaced span { background: transparent; outline: 1px dashed var(--blab-navy); outline-offset: -1px; }

/* ------------------------------------------------------------- body ---- */

.crm-body { flex: 1; padding: 24px 20px 32px; display: flex; flex-direction: column; gap: 24px; }
.crm-body.tight { gap: 14px; }
.crm-body.mid { gap: 20px; }
.crm-body.acct { gap: 16px; }
.crm-vbody { flex: 1; padding: 16px 16px 32px; display: flex; flex-direction: column; gap: 16px; }
.crm-scope .h2 { font-family: var(--blab-font-editorial); font-weight: 400; font-size: 2rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--blab-navy); margin: 0; }
.crm-scope .h2.sm { font-size: 1.875rem; }
.crm-scope .sub-h { color: var(--blab-navy); font-size: 1rem; }

/* ------------------------------------------------------------ bottom ---- */

.crm-nav {
  position: sticky; bottom: 0; z-index: 4; flex: none;
  background: var(--blab-white); border-top: 1px solid var(--blab-border);
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(4, 1fr); height: calc(56px + env(safe-area-inset-bottom));
}
.crm-nav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 0; border-top: 2px solid transparent; background: transparent; color: var(--blab-text-muted);
  font: 500 11px/1 var(--blab-font-body); cursor: pointer;
}
.crm-nav button[aria-current="page"] { color: var(--blab-navy); border-top-color: var(--blab-navy); }

.crm-bar {
  position: sticky; bottom: 0; z-index: 4; flex: none;
  background: var(--blab-white); border-top: 1px solid var(--blab-border);
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px;
}
.crm-bar .crm-tip { text-align: center; color: var(--blab-text-muted); }
.crm-bar .row { display: flex; gap: 8px; justify-content: center; }
.crm-bar .row .btn-ghost { flex: 1; }
.crm-scope .btn { min-height: 48px; }
.crm-scope .btn-sm { min-height: 44px; }
.crm-scope .btn-text {
  min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--blab-navy);
  font: 500 14px/1 var(--blab-font-body); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; white-space: nowrap; flex: none;
}
.crm-scope .btn-text:disabled { color: var(--blab-disabled-text); cursor: default; }

/* ------------------------------------------------------------- cards ---- */

.crm-scope .card {
  background: var(--blab-white); border: 1px solid var(--blab-border); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.crm-scope .card.g10 { gap: 10px; } .crm-scope .card.g14 { gap: 14px; }
.crm-scope .card.flat { padding: 0; gap: 0; overflow: hidden; }
.crm-scope .card.outline-navy { border-color: var(--blab-navy); }
.crm-scope .navy {
  background: var(--blab-navy); color: #fff; border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.crm-scope .soft { background: var(--blab-bg); border-radius: 8px; padding: 10px 12px; }
.crm-scope .soft16 { background: var(--blab-bg); border-radius: 16px; padding: 16px; }
.crm-scope .ok-surface { background: var(--blab-success-surface); border-radius: 16px; padding: 16px; display: flex; gap: 12px; align-items: flex-start; }
.crm-scope .err-surface { background: var(--blab-error-surface); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }

.crm-scope .rows > .r {
  width: 100%; display: flex; gap: 12px; align-items: center; padding: 14px 16px;
  border: 0; border-top: 1px solid var(--blab-border); background: transparent; text-align: left; cursor: pointer;
}
.crm-scope .rows > .r:first-child { border-top-color: transparent; }
.crm-scope .rows > .r.top { align-items: flex-start; }
.crm-scope .r .lead { width: 40px; flex: none; font: 600 13px/1.2 var(--blab-font-body); font-variant-numeric: tabular-nums; color: var(--blab-navy); }
.crm-scope .r .lead.time { font-size: 14px; }
.crm-scope .r .lead.red { color: var(--blab-error); }
.crm-scope .r .t1 { display: flex; align-items: center; gap: 6px; font: 500 15px/1.3 var(--blab-font-body); color: var(--blab-text-primary); }
.crm-scope .r .t1 .ico { color: var(--blab-text-muted); flex: none; }
.crm-scope .r .t2 { display: block; margin-top: 2px; font: 400 13px/1.4 var(--blab-font-body); color: var(--blab-text-muted); }
.crm-scope .r .ib { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--blab-bg); color: var(--blab-navy); }
.crm-scope .empty { padding: 14px 16px; color: var(--blab-text-muted); }

.crm-scope .badge {
  height: 22px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 4px;
  border: 1px solid var(--blab-border); background: var(--blab-bg); color: var(--blab-text-muted);
  font: 600 11px/1 var(--blab-font-body); letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none;
}
.crm-scope .badge.lg { height: 26px; padding: 0 9px; font-size: 12px; }
.crm-scope .badge.hot { background: var(--blab-navy); color: #fff; border-color: var(--blab-navy); }
.crm-scope .badge.warm { background: #fff; color: var(--blab-navy); border-color: var(--blab-navy); }
.crm-scope .chip {
  height: 26px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 4px;
  color: var(--blab-navy); font: 600 12px/1 var(--blab-font-body);
}
.crm-scope .chip.srs { background: var(--blab-chronolift); }
.crm-scope .chip.drs { background: var(--blab-agebiome); }
.crm-scope .count-red {
  min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 4px;
  background: var(--blab-error); color: #fff; font: 600 12px/1 var(--blab-font-body); font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------- choices, inputs ---- */

.crm-scope .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-scope .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-scope .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.crm-scope .opt {
  min-height: 44px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--blab-border);
  background: var(--blab-white); color: var(--blab-navy); font: 500 14px/1.2 var(--blab-font-body); cursor: pointer;
  transition: background-color 240ms var(--blab-ease-signal), color 240ms var(--blab-ease-signal);
}
.crm-scope .opt.sm { min-height: 36px; font-size: 13px; }
.crm-scope .opt.big { min-height: 52px; border-radius: 8px; font-weight: 600; font-size: 15px; padding: 6px 8px; line-height: 1.25; }
.crm-scope .opt.mid { min-height: 48px; border-radius: 8px; font-weight: 600; font-size: 15px; }
.crm-scope .opt.r8 { border-radius: 8px; }
.crm-scope .opt.w600 { font-weight: 600; }
.crm-scope .opt[aria-pressed="true"] { background: var(--blab-navy); color: #fff; border-color: var(--blab-navy); }
.crm-scope .opt.marked { border-color: var(--blab-navy); }
.crm-scope .opt:disabled { background: var(--blab-disabled-surface); color: var(--blab-disabled-text); border-color: var(--blab-disabled-surface); cursor: not-allowed; }
.crm-scope .opt.wide { min-width: 52px; }
.crm-scope .fmt-opt {
  min-height: 56px; display: flex; gap: 12px; align-items: center; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--blab-border); background: var(--blab-white); text-align: left; cursor: pointer;
  transition: background-color 240ms var(--blab-ease-signal);
}
.crm-scope .fmt-opt .l { display: block; font: 600 15px/1.3 var(--blab-font-body); color: var(--blab-navy); }
.crm-scope .fmt-opt .d { display: block; font: 400 13px/1.4 var(--blab-font-body); color: var(--blab-text-muted); }
.crm-scope .fmt-opt .ico { color: var(--blab-navy); }
.crm-scope .fmt-opt[aria-pressed="true"] { background: var(--blab-navy); border-color: var(--blab-navy); }
.crm-scope .fmt-opt[aria-pressed="true"] .l, .crm-scope .fmt-opt[aria-pressed="true"] .ico { color: #fff; }
.crm-scope .fmt-opt[aria-pressed="true"] .d { color: rgba(255, 255, 255, .80); }

.crm-scope .seg { display: grid; padding: 3px; gap: 3px; border-radius: 8px; background: var(--blab-border); }
.crm-scope .seg button {
  min-height: 38px; border: 0; border-radius: 6px; background: var(--blab-white); color: var(--blab-navy);
  font: 600 13px/1 var(--blab-font-body); cursor: pointer;
}
.crm-scope .seg button[aria-pressed="true"] { background: var(--blab-navy); color: #fff; }
.crm-scope .tabs4 { display: grid; grid-template-columns: repeat(4, 1fr); padding: 4px; gap: 4px; border-radius: 8px; background: var(--blab-border); }
.crm-scope .tabs4 button { min-height: 40px; border: 0; border-radius: 6px; background: transparent; color: var(--blab-navy); font: 600 13px/1 var(--blab-font-body); cursor: pointer; }
.crm-scope .tabs4 button[aria-pressed="true"] { background: #fff; }

.crm-scope label.f { display: flex; flex-direction: column; gap: 6px; }
.crm-scope label.f > span:first-child { font-size: 0.875rem; font-weight: 500; }
.crm-scope .in-field, .crm-scope label.f input, .crm-scope label.f textarea {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--blab-border); border-radius: 8px;
  font: 400 1rem/1.4 var(--blab-font-body); color: var(--blab-text-primary); background: var(--blab-white);
}
.crm-scope label.f textarea { padding: 12px 14px; resize: vertical; }
.crm-scope .in-field:focus, .crm-scope label.f input:focus, .crm-scope label.f textarea:focus { border-color: var(--blab-accent); outline: none; }
.crm-scope [aria-invalid="true"] { border-color: var(--blab-error) !important; }

.crm-scope .stepper { display: flex; align-items: center; border: 1px solid var(--blab-border); border-radius: 8px; height: 48px; flex: none; background: var(--blab-white); }
.crm-scope .stepper button { width: 48px; height: 46px; border: 0; background: transparent; color: var(--blab-navy); font: 500 22px/1 var(--blab-font-body); cursor: pointer; }
.crm-scope .stepper input { width: 56px; height: 44px; border: 0; text-align: center; font: 600 18px/1 var(--blab-font-body); font-variant-numeric: tabular-nums; color: var(--blab-text-primary); background: transparent; }
.crm-scope .stepper.sm { height: 44px; }
.crm-scope .stepper.sm button { width: 44px; height: 42px; font-size: 20px; }
.crm-scope .stepper.sm input { width: 40px; height: 40px; font-size: 16px; }
.crm-scope .stepper input:focus { outline: none; }

.crm-scope .switch { width: 48px; height: 28px; flex: none; position: relative; border: 0; border-radius: 8px; background: var(--blab-border); cursor: pointer; transition: background-color 240ms var(--blab-ease-signal); }
.crm-scope .switch span { position: absolute; top: 2px; left: 2px; width: 26px; height: 24px; border-radius: 6px; background: #fff; transition: left 240ms var(--blab-ease-signal); }
.crm-scope .switch[aria-checked="true"] { background: var(--blab-navy); }
.crm-scope .switch[aria-checked="true"] span { left: 20px; }

.crm-scope .tick { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font: 400 14px/1.4 var(--blab-font-body); color: var(--blab-text-primary); }
.crm-scope .tick input { width: 22px; height: 22px; flex: none; accent-color: var(--blab-navy); margin: 0; }
.crm-scope .tick-box { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--blab-border); }

.crm-scope .radio-card {
  display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px;
  border: 1px solid var(--blab-border); background: #fff; text-align: left; cursor: pointer;
}
.crm-scope .radio-card .dot { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1px solid var(--blab-navy); transition: border-width 120ms var(--blab-ease-signal); }
.crm-scope .radio-card[aria-pressed="true"] { border-color: var(--blab-navy); outline: 1px solid var(--blab-navy); }
.crm-scope .radio-card[aria-pressed="true"] .dot { border-width: 6px; }
.crm-scope .radio-card .l { display: block; font: 600 15px/1.3 var(--blab-font-body); color: var(--blab-navy); }
.crm-scope .radio-card .h { display: block; font: 400 13px/1.4 var(--blab-font-body); color: var(--blab-text-muted); }

/* --------------------------------------------------------------- type ---- */

.crm-scope .script { font: italic 400 17px/1.45 var(--blab-font-editorial); color: var(--blab-accent); text-wrap: pretty; }
.crm-scope .script.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crm-scope .q { font: italic 400 19px/1.35 var(--blab-font-editorial); color: var(--blab-accent); text-wrap: pretty; }
.crm-scope .ed16 { font: italic 400 16px/1.4 var(--blab-font-editorial); color: var(--blab-accent); }
.crm-scope .ed18 { font: italic 400 18px/1.45 var(--blab-font-editorial); color: var(--blab-accent); }
.crm-scope .ed21 { font: italic 400 21px/1.25 var(--blab-font-editorial); color: var(--blab-accent); }
.crm-scope .ed28 { font: italic 400 28px/1.2 var(--blab-font-editorial); color: var(--blab-accent); }
.crm-scope .ed32 { font: italic 400 32px/1.2 var(--blab-font-editorial); color: var(--blab-accent); }
.crm-scope .ed42 { font: italic 400 42px/1.2 var(--blab-font-editorial); letter-spacing: -0.015em; color: var(--blab-accent); text-wrap: balance; }
.crm-scope .title20 { font: 500 20px/1.3 var(--blab-font-editorial); color: var(--blab-navy); }
.crm-scope .title24 { font: 500 24px/1.25 var(--blab-font-editorial); color: var(--blab-navy); }
.crm-scope .title18 { font: 500 18px/1.3 var(--blab-font-editorial); color: var(--blab-navy); }
.crm-scope .big44 { font: 500 44px/1 var(--blab-font-body); font-variant-numeric: tabular-nums; color: #fff; }
.crm-scope .big32 { font: 500 32px/1 var(--blab-font-body); font-variant-numeric: tabular-nums; }
.crm-scope .big28 { font: 500 28px/1 var(--blab-font-body); font-variant-numeric: tabular-nums; }
.crm-scope .big26 { font: 500 26px/1.1 var(--blab-font-body); font-variant-numeric: tabular-nums; }
.crm-scope .big21 { font: 500 21px/1 var(--blab-font-body); font-variant-numeric: tabular-nums; }
.crm-scope .body-lg { font-size: var(--blab-size-body-lg); line-height: var(--blab-lh-body-lg); }
.crm-scope .qn { font: 600 12px/1 var(--blab-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--blab-text-muted); }
.crm-scope .between { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.crm-scope .center { display: flex; align-items: center; gap: 8px; }
.crm-scope .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font: 400 14px/1.4 var(--blab-font-body); }
.crm-scope .kv .k { color: var(--blab-text-muted); }

/* ----------------------------------------------------------- pieces ---- */

.crm-scope .segbar { display: grid; gap: 4px; }
.crm-scope .segbar span { height: 6px; border-radius: 2px; background: rgba(255, 255, 255, .24); }
.crm-scope .segbar span.on { background: #fff; }
.crm-scope .rail { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.crm-scope .rail span { height: 6px; border-radius: 2px; background: var(--blab-border); }
.crm-scope .rail span.on { background: var(--blab-navy); }
.crm-scope .rail.nurture span { background: var(--blab-dermaai); }
.crm-scope .rail.lapsed span { background: var(--blab-error); }
.crm-scope .pbar { display: block; height: 6px; border-radius: 2px; background: var(--blab-bg); overflow: hidden; }
.crm-scope .pbar > span { display: block; height: 100%; background: var(--blab-navy); }
.crm-scope .pbar.nurture > span { background: var(--blab-dermaai-accent); }
.crm-scope .pbar.lapsed > span { background: var(--blab-error); }
.crm-scope .kpi-bar { position: relative; height: 8px; border-radius: 2px; background: var(--blab-bg); }
.crm-scope .kpi-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--blab-navy); }
.crm-scope .kpi-bar .pace { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--blab-accent); }
.crm-scope .pips { display: flex; gap: 3px; }
.crm-scope .pips span { flex: 1; height: 4px; border-radius: 2px; background: var(--blab-border); }
.crm-scope .pips span.on { background: var(--blab-navy); }
.crm-scope .dots { display: flex; gap: 4px; align-items: center; }
.crm-scope .dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: var(--blab-border); cursor: pointer; transition: width 240ms var(--blab-ease-signal), background-color 240ms var(--blab-ease-signal); }
.crm-scope .dots button.on { width: 20px; background: var(--blab-navy); }
.crm-scope .strip4 { width: 4px; height: 20px; border-radius: 2px; flex: none; }
.crm-scope .strip4.srs { background: var(--blab-chronolift-accent); }
.crm-scope .strip4.drs { background: var(--blab-agebiome-accent); }
.crm-scope .band-head { margin: 0; padding: 8px 12px; font: 600 12px/1.3 var(--blab-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--blab-navy); }
.crm-scope .band-head.srs { background: var(--blab-chronolift); }
.crm-scope .band-head.drs { background: var(--blab-agebiome); }
.crm-scope .band-head.px16 { padding: 8px 16px; }
.crm-scope .accent-top { height: 4px; }
.crm-scope .accent-top.srs { background: var(--blab-chronolift-accent); }
.crm-scope .accent-top.drs { background: var(--blab-agebiome-accent); }
.crm-scope .img-slot { aspect-ratio: 16 / 9; background: var(--blab-bg); display: grid; place-items: center; border-bottom: 1px solid var(--blab-border); }
.crm-scope .tile4 { margin: 0; padding: 12px; border-radius: 8px; background: var(--blab-bg); font: 600 14px/1.3 var(--blab-font-body); color: var(--blab-navy); }
.crm-scope .stage-grid { display: grid; grid-template-columns: 72px 1fr; gap: 6px 12px; padding: 12px; font: 400 14px/1.4 var(--blab-font-body); }
.crm-scope .stage-grid .k { font-weight: 600; color: var(--blab-navy); }
.crm-scope .boxed { border-radius: 8px; overflow: hidden; border: 1px solid var(--blab-border); }
.crm-scope .tiles3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.crm-scope .tiles3 > div { border: 1px solid var(--blab-border); border-radius: 16px; padding: 14px 12px; }
.crm-scope .tiles3 > div.k { background: var(--blab-navy); border-color: var(--blab-navy); }
.crm-scope .line-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--blab-border); }
.crm-scope .line-row:last-child { border-bottom: 0; padding-bottom: 0; }
.crm-scope .money-in { display: flex; align-items: center; gap: 6px; }
.crm-scope .money-in .in-field { width: 110px; min-height: 44px; text-align: right; }
.crm-scope .kit-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--blab-border); }
.crm-scope .kit-row .n { flex: 1; font: 500 15px/1.3 var(--blab-font-body); }
.crm-scope .sum-row { display: flex; justify-content: space-between; align-items: baseline; color: #fff; font: 400 14px/1.4 var(--blab-font-body); }
.crm-scope .sum-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-scope .navy .rule { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .24); }
.crm-scope .order-line { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 16px; border-top: 1px solid var(--blab-border); }
.crm-scope .order-line .a { font: 600 14px/1.35 var(--blab-font-body); font-variant-numeric: tabular-nums; text-align: right; }
.crm-scope .order-line .n { font: 500 14px/1.35 var(--blab-font-body); }
.crm-scope .pay-row { display: flex; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--blab-border); }
.crm-scope .pay-row.total { padding: 12px 16px; background: var(--blab-bg); }
.crm-scope .badge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-scope .vbadge { background: var(--blab-white); border: 1px solid var(--blab-border); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.crm-scope .vbadge .ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--blab-border); background: #fff; color: var(--blab-text-muted); }
.crm-scope .vbadge .ic.on { background: var(--blab-navy); border-color: var(--blab-navy); color: #fff; }
.crm-scope .vbadge .lbl { font: 500 14px/1.3 var(--blab-font-body); color: var(--blab-text-primary); min-height: 36px; }
.crm-scope .vbadge .meta { display: flex; justify-content: space-between; font: 400 12px/1.3 var(--blab-font-body); color: var(--blab-text-muted); }
.crm-scope .ledger > div { display: flex; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--blab-border); }
.crm-scope .ledger .p { font: 600 14px/1 var(--blab-font-body); font-variant-numeric: tabular-nums; color: var(--blab-success); }
.crm-scope .rules > div { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--blab-border); }
.crm-scope .rules .p { font: 600 13px/1.35 var(--blab-font-body); font-variant-numeric: tabular-nums; color: var(--blab-navy); }
.crm-scope .leader { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--blab-border); }
.crm-scope .leader .n { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 4px; border: 1px solid var(--blab-border); font: 600 13px/1 var(--blab-font-body); color: var(--blab-text-muted); }
.crm-scope .leader .av { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--blab-bg); }
.crm-scope .leader .ln { display: block; border-radius: 2px; background: var(--blab-bg); }
.crm-scope .me-row { background: var(--blab-bg); border-radius: 16px; padding: 16px; display: flex; gap: 12px; align-items: center; }
.crm-scope .me-row .av { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--blab-navy); color: #fff; display: grid; place-items: center; font: 600 13px/1 var(--blab-font-body); }
.crm-scope .report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-scope .report-grid > div { background: var(--blab-white); border: 1px solid var(--blab-border); border-radius: 16px; padding: 14px 16px; }
.crm-scope .tag { height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 4px; background: var(--blab-bg); font: 500 13px/1 var(--blab-font-body); color: var(--blab-navy); }
.crm-scope .match { width: 100%; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--blab-border); background: #fff; text-align: left; cursor: pointer; }
.crm-scope .matches { border: 1px solid var(--blab-border); border-radius: 8px; overflow: hidden; }
.crm-scope .matches .match:last-child { border-bottom: 0; }
.crm-scope .new-acc { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px dashed var(--blab-navy); border-radius: 8px; background: #fff; color: var(--blab-navy); font: 600 15px/1 var(--blab-font-body); cursor: pointer; }
.crm-scope .picked { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; background: var(--blab-bg); }
.crm-scope .val-btn { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 10px 0 2px; border: 0; border-top: 1px solid rgba(255, 255, 255, .24); background: transparent; text-align: left; cursor: pointer; color: #fff; }
.crm-scope .val-btn .k { font: 600 11px/1 var(--blab-font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.crm-scope .val-btn .v { font: italic 400 16px/1.4 var(--blab-font-editorial); color: #fff; text-wrap: pretty; }
.crm-scope .link-btn { padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.crm-scope .counter-foot { display: flex; gap: 16px; align-items: center; padding: 12px 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .24); background: transparent; color: #fff; font: 500 13px/1.3 var(--blab-font-body); text-align: left; cursor: pointer; }
.crm-scope .counter-foot span { display: flex; align-items: center; gap: 6px; }
.crm-scope .btn-on-navy { background: #fff; color: var(--blab-navy); }
.crm-scope .value-card { background: var(--blab-white); border: 1px solid var(--blab-border); border-radius: 16px; padding: 14px 12px 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.crm-scope .value-card .open { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.crm-scope .value-card .min { width: 44px; height: 44px; margin: -8px -4px 0 0; flex: none; display: grid; place-items: center; border: 0; background: transparent; color: var(--blab-text-muted); cursor: pointer; }
.crm-scope .value-slim { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: -12px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--blab-accent); }

/* ------------------------------------------------------------ sheets ---- */

.crm-sheet {
  position: relative; background: var(--blab-white); border-radius: 24px 24px 0 0;
  max-height: 88vh; overflow-y: auto; scrollbar-width: none;
  padding: 10px 20px calc(34px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px;
  max-width: 560px; width: 100%; margin: 0 auto; animation: pw-in 240ms cubic-bezier(.4, 0, .2, 1) both;
}
.crm-sheet .grab { align-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--blab-border); flex: none; }
.crm-sheet .shead { display: flex; justify-content: space-between; align-items: center; }
.crm-sheet .shead h3 { font-family: var(--blab-font-editorial); font-weight: 500; font-size: 1.25rem; line-height: 1.3; color: var(--blab-navy); margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-sheet .shead button { width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; border: 0; background: transparent; color: var(--blab-navy); cursor: pointer; }
.crm-sheet .col { display: flex; flex-direction: column; gap: 14px; }
.crm-sheet .col6 { display: flex; flex-direction: column; gap: 6px; }
.crm-sheet .col8 { display: flex; flex-direction: column; gap: 8px; }
.crm-sheet .col12 { display: flex; flex-direction: column; gap: 12px; }
.crm-sheet .col20 { display: flex; flex-direction: column; gap: 20px; }
.crm-sheet .reason { min-height: 52px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--blab-border); background: #fff; color: var(--blab-navy); font: 600 15px/1 var(--blab-font-body); text-align: left; cursor: pointer; }
.crm-sheet .reason[aria-pressed="true"] { background: var(--blab-navy); color: #fff; border-color: var(--blab-navy); }
.crm-sheet .lang-row { min-height: 48px; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; border-radius: 8px; border: 1px solid var(--blab-border); background: #fff; color: var(--blab-navy); font: 500 15px/1 var(--blab-font-body); }
.crm-sheet .lang-row[aria-current="true"] { background: var(--blab-navy); color: #fff; border-color: var(--blab-navy); }
.crm-sheet .lang-row:disabled { color: var(--blab-disabled-text); cursor: default; }
.crm-sheet .tool-row { width: 100%; display: flex; gap: 12px; align-items: center; min-height: 52px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--blab-border); background: #fff; color: var(--blab-navy); font: 500 15px/1.2 var(--blab-font-body); text-align: left; cursor: pointer; }
.crm-sheet .val-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--blab-border); }
.crm-sheet .val-row:first-of-type { border-top-color: transparent; }
.crm-sheet .val-row .ib { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--blab-bg); color: var(--blab-navy); }
.crm-sheet .lv-row { display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: start; }
.crm-sheet .pts-row { display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--blab-border); }
.crm-sheet .pts-row:first-child { border-top-color: transparent; }

/* ------------------------------------------------------- narrow phones ---- */
/* The main header holds the logo, the offline chip and three buttons. The prototype is
   390 px wide and never showed the chip; with it, these keep the header on one line. */
@media (max-width: 400px) {
  .crm-head { padding-left: 16px; padding-right: 8px; }
  .crm-head .logo { width: 96px; }
  .crm-head .offline .long { display: none; }
}
@media (max-width: 340px) {
  .crm-head .logo { width: 84px; }
  .crm-head .offline { padding: 0 8px; }
  .crm-head .offline .short { display: none; }
  .crm-head .lang { padding: 0 6px; }
  .crm-scope .tiles3 { gap: 6px; }
  .crm-scope .tiles3 > div { padding: 12px 8px; }
  .crm-scope .big21 { font-size: 18px; }
}
/* a section heading keeps its line; the caption beside it wraps instead */
.crm-scope .between > .sub-h { white-space: nowrap; flex: none; }
.crm-scope .between > .blab-caption { text-align: right; }

/* A repaint on the same screen — a choice tapped, a filter or a tab changed — must not
   replay the entry animations, or every tap flickers like a reload. Only a new step, a
   new card or a new screen moves. A panel that has just opened (an objection's answer)
   still eases in, once. */
.crm-scope.still .in, .crm-scope.still .in-slow, .crm-scope.still .in-quick { animation: none; }
.crm-scope .pop { animation: pw-in 240ms var(--blab-ease-signal) both; }