:root {
  --navy: #13245c;
  --navy-deep: #0b1743;
  --primary: #315bd6;
  --primary-dark: #2547ad;
  --primary-soft: #edf2ff;
  --teal: #259b84;
  --orange: #e69937;
  --rose: #d85f80;
  --violet: #7559d9;
  --ink: #172033;
  --text: #3d475d;
  --muted: #7a859b;
  --border: #e3e8f1;
  --canvas: #f4f6fb;
  --surface: #ffffff;
  --sidebar-w: 258px;
  --topbar-h: 72px;
}

/* Prototype completion: Kanban, verification, public form and employee 2FA */
.verification-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.verification-badges > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 7.5px;
  font-weight: 700;
  white-space: nowrap;
}
.verification-badges > span.verified {
  color: #227d61;
  background: #e9f7f2;
  border: 1px solid #ccecdf;
}
.verification-badges > span.pending {
  color: #a66c1f;
  background: #fff7e8;
  border: 1px solid #f2e1bd;
}
.verification-badges.compact {
  margin: 0;
  gap: 3px;
}
.verification-badges.compact > span {
  width: 22px;
  padding: 0;
  justify-content: center;
}
.verification-badges.compact > span i:last-child {
  position: absolute;
  margin: 14px 0 0 14px;
  font-size: 6px;
  border-radius: 50%;
  background: #fff;
}
.lead-view-switch {
  display: flex;
  padding: 3px;
  border-radius: 9px;
  background: #eef1f6;
}
.lead-view-switch button,
.lead-view-switch a {
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #7b879a;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 8.5px;
  font-weight: 700;
}
.lead-view-switch button.active,
.lead-view-switch a.active {
  color: #315bd6;
  background: #fff;
  box-shadow: 0 2px 7px rgba(40, 57, 92, 0.09);
}
.lead-status-tabs {
  padding: 0 14px 9px;
  border-bottom: 1px solid #edf0f4;
}
.kanban-wrap {
  overflow: hidden;
}
.kanban-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(220px, 1fr));
  gap: 10px;
  padding: 12px;
  overflow-x: auto;
  background: #f5f7fb;
}
.kanban-column {
  min-height: 500px;
  padding: 9px;
  border-radius: 11px;
  background: #eef1f6;
  border-top: 3px solid #8995aa;
}
.kanban-column.stage-hot {
  border-top-color: #e35f78;
}
.kanban-column.stage-warm {
  border-top-color: #eca03f;
}
.kanban-column.stage-cold {
  border-top-color: #6390d7;
}
.kanban-column.stage-pre-validation {
  border-top-color: #8b69dc;
}
.kanban-column.stage-booked {
  border-top-color: #2b9c78;
}
.kanban-column.stage-lost {
  border-top-color: #919aaa;
}
.kanban-head,
.kanban-head > div {
  display: flex;
  align-items: center;
}
.kanban-head {
  justify-content: space-between;
  padding: 1px 2px 9px;
}
.kanban-head > div {
  gap: 6px;
}
.kanban-head > div > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7f8ba0;
}
.stage-hot .kanban-head > div > i {
  background: #e35f78;
}
.stage-warm .kanban-head > div > i {
  background: #eca03f;
}
.stage-cold .kanban-head > div > i {
  background: #6390d7;
}
.stage-pre-validation .kanban-head > div > i {
  background: #8b69dc;
}
.stage-booked .kanban-head > div > i {
  background: #2b9c78;
}
.kanban-head strong {
  color: #465169;
  font-size: 8.5px;
}
.kanban-head span {
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #7c879b;
  background: #dfe4ec;
  font-size: 7px;
}
.kanban-head button {
  border: 0;
  background: transparent;
  color: #8792a5;
}
.kanban-stack {
  display: grid;
  align-content: start;
  gap: 8px;
}
.kanban-card {
  padding: 11px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #e1e6ee;
  box-shadow: 0 2px 6px rgba(30, 44, 76, 0.035);
  cursor: pointer;
}
.kanban-card:hover {
  transform: translateY(-2px);
  border-color: #b7c7ed;
  box-shadow: 0 8px 20px rgba(28, 46, 91, 0.1);
}
.kanban-person {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 7px;
  align-items: center;
}
.kanban-person > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.kanban-person strong {
  color: #3c475d;
  font-size: 8.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kanban-person small {
  color: #949dad;
  font-size: 7px;
  margin-top: 2px;
}
.kanban-person > span:last-child {
  min-width: 25px;
  height: 25px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 800;
}
.kanban-person > span.good {
  color: #278464;
  background: #e7f5f0;
}
.kanban-person > span.mid {
  color: #aa711f;
  background: #fff4df;
}
.kanban-person > span.low {
  color: #bc5067;
  background: #fdeef1;
}
.kanban-card > .verification-badges {
  margin-top: 9px;
}
.kanban-card > p {
  margin: 10px 0 6px;
  color: #46526a;
  font-size: 8px;
  font-weight: 700;
}
.kanban-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #8b95a7;
  font-size: 7px;
}
.kanban-meta i {
  margin-right: 3px;
}
.kanban-source {
  margin: 9px -11px -11px;
  padding: 8px 11px;
  border-top: 1px solid #edf0f4;
  display: flex;
  justify-content: space-between;
  color: #7e8ba1;
  font-size: 7px;
}
.kanban-empty {
  min-height: 78px;
  border: 1px dashed #cfd6e2;
  border-radius: 9px;
  background: transparent;
  color: #8e98aa;
  font-size: 8px;
}
.kanban-footer-note {
  padding: 9px 13px;
  border-top: 1px solid #e5e9f0;
  color: #778399;
  font-size: 7.5px;
}
.kanban-footer-note i {
  color: #506fc9;
  margin-right: 5px;
}

.public-form-page {
  min-height: 100vh;
  color: #edf2ff;
  background: radial-gradient(
      circle at 15% 90%,
      rgba(239, 157, 55, 0.19),
      transparent 31%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(72, 115, 230, 0.22),
      transparent 35%
    ),
    linear-gradient(135deg, #0a163c, #14295f 56%, #0b193f);
}
.public-nav {
  height: 78px;
  max-width: 1240px;
  margin: auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.public-brand {
  border: 0;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.public-brand > span {
  width: 39px;
  height: 39px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f6aa42, #ee7044);
  display: grid;
  place-items: center;
  font-size: 18px;
}
.public-brand div {
  display: flex;
  flex-direction: column;
}
.public-brand strong {
  letter-spacing: 3px;
  font-size: 17px;
}
.public-brand small {
  letter-spacing: 2.7px;
  color: #a9b8dd;
  font-size: 7px;
}
.public-nav > div {
  display: flex;
  align-items: center;
  gap: 20px;
}
.public-nav > div > span {
  color: #bac6e5;
  font-size: 11px;
}
.public-landing {
  min-height: calc(100vh - 128px);
  max-width: 1160px;
  margin: auto;
  padding: 62px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) 450px;
  gap: 86px;
  align-items: center;
}
.public-story {
  max-width: 610px;
}
.public-kicker {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 183, 79, 0.35);
  background: rgba(239, 157, 55, 0.1);
  color: #ffc16b;
  font-size: 9px;
  letter-spacing: 1.4px;
  font-weight: 800;
}
.public-story h1 {
  color: #fff;
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -2.2px;
  margin: 20px 0;
  max-width: 650px;
}
.public-story > p {
  max-width: 540px;
  color: #bdc8e4;
  font-size: 16px;
  line-height: 1.7;
}
.public-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 31px 0;
}
.public-highlights > div {
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.09);
  display: grid;
  grid-template-columns: 28px 1fr;
}
.public-highlights i {
  grid-row: 1/3;
  color: #ffb85d;
  font-size: 18px;
}
.public-highlights strong {
  color: #fff;
  font-size: 12px;
}
.public-highlights small {
  color: #97a7ce;
  font-size: 8px;
  margin-top: 3px;
}
.public-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d9e1f6;
}
.public-proof > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(46, 159, 125, 0.15);
  color: #6dd0ac;
}
.public-proof div {
  display: flex;
  flex-direction: column;
}
.public-proof small {
  color: #8fa0c8;
  font-size: 8px;
  margin-top: 3px;
}
.public-form-card {
  color: var(--text);
  background: #fff;
  border-radius: 19px;
  padding: 28px;
  box-shadow: 0 28px 70px rgba(1, 9, 34, 0.4);
}
.public-stepper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
  margin-bottom: 24px;
}
.public-stepper::before {
  content: "";
  position: absolute;
  height: 1px;
  background: #e2e7ef;
  left: 17%;
  right: 17%;
  top: 13px;
}
.public-stepper > div {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.public-stepper span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf0f5;
  color: #8993a5;
  border: 3px solid #fff;
  font-size: 8px;
}
.public-stepper .active span {
  background: #315bd6;
  color: #fff;
  box-shadow: 0 0 0 2px #dbe4ff;
}
.public-stepper small {
  color: #9aa3b3;
  font-size: 7px;
}
.public-stepper .active small {
  color: #3658b8;
  font-weight: 700;
}
.form-eyebrow {
  color: #516bc4;
  font-size: 8px;
  letter-spacing: 1px;
  font-weight: 800;
}
.public-form-card h2,
.security-login-card h2 {
  color: #263149;
  font-size: 22px;
  margin: 7px 0 6px;
}
.public-form-card > p,
.login-demo-form > p {
  color: #7e899c;
  font-size: 10px;
  line-height: 1.5;
}
.public-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-top: 20px;
}
.public-fields label,
.login-demo-form label,
.qualification-form > label {
  color: #4d5970;
  font-size: 8px;
  font-weight: 750;
}
.public-fields label.full {
  grid-column: 1/-1;
}
.public-fields input,
.public-fields select {
  width: 100%;
  height: 41px;
  margin-top: 5px;
  border: 1px solid #dce2ec;
  border-radius: 8px;
  padding: 0 10px;
  color: #344057;
  background: #fff;
  font-size: 9px;
}
.public-consent {
  display: flex !important;
  align-items: flex-start;
  gap: 7px;
  color: #7a8598 !important;
  font-size: 7.5px !important;
  line-height: 1.45;
  margin: 14px 0;
}
.public-consent input {
  margin-top: 1px;
  accent-color: #315bd6;
}
.public-submit {
  min-height: 45px;
}
.secure-note {
  display: block;
  text-align: center;
  color: #9aa3b2;
  font-size: 7px;
  margin-top: 10px;
}
.otp-panel,
.qualification-form,
.public-success,
.login-success {
  text-align: center;
  padding: 12px 5px 2px;
}
.otp-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #315bd6;
  background: #edf2ff;
  font-size: 25px;
}
.otp-icon.ai {
  color: #7559d9;
  background: #f0ecff;
}
.otp-panel > small,
.qualification-form > small,
.public-success > small {
  color: #2d9576;
  font-size: 8px;
  letter-spacing: 1px;
  font-weight: 800;
}
.otp-panel p,
.qualification-form p,
.public-success p {
  color: #7b8699;
  font-size: 10px;
  line-height: 1.55;
}
.otp-input {
  display: block;
  width: 100%;
  height: 60px;
  margin: 21px 0 15px;
  text-align: center;
  letter-spacing: 12px;
  font-size: 22px;
  font-weight: 750;
  color: #24304c;
  border: 1px solid #ced7e8;
  border-radius: 11px;
  outline: 0;
}
.otp-input:focus {
  border-color: #6480d8;
  box-shadow: 0 0 0 3px rgba(49, 91, 214, 0.1);
}
.otp-links {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
}
.otp-links button {
  border: 0;
  background: transparent;
  color: #526dc7;
  font-size: 8px;
  font-weight: 650;
}
.preference-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 9px 0 17px;
}
.preference-grid button {
  min-height: 58px;
  border: 1px solid #dfe5ef;
  border-radius: 9px;
  background: #fff;
  color: #68758a;
  font-size: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.preference-grid button i {
  font-size: 17px;
  color: #7184bd;
}
.preference-grid button.selected {
  border-color: #7090e6;
  background: #f0f4ff;
  color: #365abe;
  box-shadow: inset 0 0 0 1px #7090e6;
}
.public-success > span {
  width: 65px;
  height: 65px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #e8f7f1;
  color: #279171;
  display: grid;
  place-items: center;
  font-size: 27px;
}
.success-summary {
  display: grid;
  gap: 7px;
  margin: 19px 0;
  text-align: left;
}
.success-summary > div {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  padding: 9px;
  border: 1px solid #e8ebf1;
  border-radius: 9px;
  background: #fafbfc;
}
.success-summary > div > i {
  color: #309278;
  font-size: 16px;
}
.success-summary span {
  display: flex;
  flex-direction: column;
}
.success-summary strong {
  color: #465169;
  font-size: 8.5px;
}
.success-summary small {
  color: #929bac;
  font-size: 7px;
}
.public-footer {
  max-width: 1240px;
  height: 50px;
  margin: auto;
  padding: 0 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #778bb9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 8px;
}

.security-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.security-metrics > div {
  min-height: 88px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fff;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
}
.security-metrics span {
  grid-row: 1/3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #4563c4;
  background: #edf2ff;
}
.security-metrics strong {
  color: #313d55;
  font-size: 18px;
}
.security-metrics small {
  color: #8e98a9;
  font-size: 8px;
}
.security-layout {
  display: grid;
  grid-template-columns: minmax(350px, 0.75fr) minmax(500px, 1.25fr);
  gap: 14px;
  align-items: start;
}
.security-login-card {
  overflow: hidden;
}
.secure-login-brand {
  min-height: 70px;
  padding: 14px 20px;
  color: #fff;
  background: linear-gradient(135deg, #0f2055, #274482);
  display: flex;
  align-items: center;
  gap: 10px;
}
.secure-login-brand > span {
  width: 35px;
  height: 35px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f6aa42, #ee7044);
  display: grid;
  place-items: center;
}
.secure-login-brand div {
  display: flex;
  flex-direction: column;
}
.secure-login-brand strong {
  letter-spacing: 2.5px;
}
.secure-login-brand small {
  color: #aab9dc;
  font-size: 7px;
  letter-spacing: 1px;
}
.login-demo-form,
.login-success {
  padding: 25px;
}
.login-demo-form > label {
  display: block;
  text-align: left;
  margin: 15px 0;
}
.login-demo-form label > input,
.password-field {
  margin-top: 5px;
}
.password-field {
  position: relative;
}
.password-field i {
  position: absolute;
  right: 12px;
  top: 12px;
  color: #8c97a8;
}
.twofa-demo .back-link {
  margin-bottom: 7px;
}
.login-success > span {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #e7f7f1;
  color: #299373;
  display: grid;
  place-items: center;
  font-size: 28px;
}
.login-success > p {
  color: #7e899a;
  font-size: 9px;
  line-height: 1.55;
}
.login-success > div {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid #edf0f4;
}
.login-success > div small {
  color: #99a2b2;
  font-size: 7px;
}
.login-success > div strong {
  color: #47536a;
  font-size: 9px;
}
.security-policy-card {
  padding: 18px;
}
.policy-on {
  color: #268467;
  background: #e8f6f1;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 7px;
  font-weight: 800;
}
.policy-on i {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #2a9d79;
  border-radius: 50%;
  margin-right: 4px;
}
.security-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 16px 0;
}
.security-controls > div {
  min-height: 70px;
  padding: 10px;
  border: 1px solid #e4e8ef;
  border-radius: 9px;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 7px;
}
.security-controls > div > span {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #506dca;
  background: #eef2ff;
}
.security-controls > div > div {
  display: flex;
  flex-direction: column;
}
.security-controls strong {
  color: #455168;
  font-size: 8px;
}
.security-controls small {
  color: #9099aa;
  font-size: 7px;
  margin-top: 3px;
}
.security-controls em {
  color: #2a8d70;
  font-size: 7px;
  font-style: normal;
  font-weight: 750;
}
.security-table-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 7px;
  border-top: 1px solid #e9edf3;
}
.security-table-head strong {
  color: #47536a;
  font-size: 9px;
}
.security-table-head button {
  border: 0;
  background: transparent;
  color: #4664c3;
  font-size: 7px;
}
.security-users > div {
  min-height: 48px;
  display: grid;
  grid-template-columns: 29px 1fr 90px 75px;
  gap: 7px;
  align-items: center;
  border-top: 1px solid #eef1f5;
}
.security-users > div > span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #edf1fb;
  color: #536bb4;
  font-size: 7px;
  font-weight: 800;
}
.security-users > div > div {
  display: flex;
  flex-direction: column;
}
.security-users strong {
  color: #47536a;
  font-size: 8px;
}
.security-users small {
  color: #929cad;
  font-size: 7px;
}
.security-users em {
  color: #657188;
  font-style: normal;
  font-size: 7px;
}
.security-users b {
  color: #298767;
  font-size: 7px;
}
.template-card-head > span.sms {
  background: #fff2df;
  color: #d18427;
}
.template-card-head > span.voice {
  background: #f0eafe;
  color: #7559d9;
}

@media (max-width: 1100px) {
  .public-landing {
    grid-template-columns: 1fr 420px;
    gap: 35px;
  }
  .public-story h1 {
    font-size: 42px;
  }
  .security-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .public-nav {
    height: auto;
    min-height: 70px;
    padding: 12px 18px;
  }
  .public-nav > div > span {
    display: none;
  }
  .public-landing {
    grid-template-columns: 1fr;
    padding: 38px 18px;
    gap: 32px;
  }
  .public-story h1 {
    font-size: 39px;
  }
  .public-highlights {
    grid-template-columns: 1fr;
  }
  .public-form-card {
    padding: 22px 17px;
  }
  .public-fields {
    grid-template-columns: 1fr;
  }
  .public-fields label.full {
    grid-column: auto;
  }
  .public-footer {
    padding: 0 18px;
  }
  .public-footer span:last-child {
    display: none;
  }
  .security-metrics {
    grid-template-columns: 1fr 1fr;
  }
  .security-controls {
    grid-template-columns: 1fr;
  }
  .security-users > div {
    grid-template-columns: 29px 1fr 70px;
  }
  .security-users b {
    display: none;
  }
  .lead-status-tabs {
    overflow-x: auto;
  }
}

* {
  box-sizing: border-box;
}
html {
  background: var(--canvas);
}
body {
  margin: 0;
  color: var(--text);
  background: var(--canvas);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  transition: all 0.18s ease;
}
.btn {
  --bs-btn-font-size: 0.83rem;
  --bs-btn-font-weight: 650;
  --bs-btn-padding-y: 0.63rem;
  --bs-btn-padding-x: 0.92rem;
  --bs-btn-border-radius: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.btn-sm {
  --bs-btn-padding-y: 0.45rem;
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-font-size: 0.78rem;
}
.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-dark);
  --bs-btn-hover-border-color: var(--primary-dark);
}
.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: #b8c7ee;
  --bs-btn-hover-bg: var(--primary);
}
.btn-outline-secondary {
  --bs-btn-color: #536078;
  --bs-btn-border-color: #d7ddea;
  --bs-btn-hover-bg: #f1f4f9;
  --bs-btn-hover-color: #28334a;
  --bs-btn-hover-border-color: #cbd4e3;
}
.form-control,
.form-select {
  border-color: #d9e0ec;
  border-radius: 0.62rem;
  font-size: 0.84rem;
  min-height: 42px;
  color: #29334a;
}
.form-control:focus,
.form-select:focus {
  border-color: #90a7e6;
  box-shadow: 0 0 0 3px rgba(49, 91, 214, 0.1);
}
.form-label {
  font-size: 0.77rem;
  font-weight: 700;
  color: #4a566f;
  margin-bottom: 6px;
}

.app-shell {
  min-height: 100vh;
}
.sidebar {
  position: fixed;
  z-index: 40;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--navy-deep), var(--navy));
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: 12px 0 30px rgba(12, 26, 76, 0.08);
}
.sidebar::-webkit-scrollbar {
  width: 4px;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}
.brand {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.brand-mark {
  width: 37px;
  height: 37px;
  border-radius: 11px;
  background: linear-gradient(135deg, #f6aa42, #f17143);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 6px 14px rgba(244, 140, 54, 0.3);
}
.brand div {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand strong {
  font-size: 18px;
  letter-spacing: 2.5px;
}
.brand small {
  font-size: 9px;
  letter-spacing: 4px;
  margin-top: 6px;
  color: #aebae2;
}
.project-switch {
  margin: 15px 14px 7px;
  padding: 11px 10px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.project-switch > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.09);
  color: #cfd8fa;
}
.project-switch div {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.project-switch small {
  font-size: 8px;
  letter-spacing: 0.8px;
  color: #8fa0d2;
}
.project-switch strong {
  font-size: 11px;
  margin-top: 3px;
  white-space: nowrap;
}
.project-switch > i {
  font-size: 12px;
  color: #8fa0d2;
}
.sidebar nav {
  padding: 4px 10px 116px;
}
.nav-group {
  margin-top: 14px;
}
.nav-group > small {
  display: block;
  margin: 0 10px 5px;
  color: #6f82bb;
  font-size: 9px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
}
.nav-group button,
.nav-group a {
  width: 100%;
  border: 0;
  background: transparent;
  color: #c2cbed;
  min-height: 37px;
  border-radius: 8px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.8px;
  font-weight: 550;
  text-align: left;
  margin: 2px 0;
}
.nav-group button > i,
.nav-group a > i {
  width: 18px;
  font-size: 14px;
  color: #8798c9;
}
.nav-group button span,
.nav-group a span {
  flex: 1;
}
.nav-group button em,
.nav-group a em {
  min-width: 22px;
  height: 19px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 9px;
  font-style: normal;
  color: #cfd7f4;
}
.nav-group button:hover,
.nav-group a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.nav-group button.active,
.nav-group a.active {
  background: linear-gradient(
    90deg,
    rgba(78, 112, 223, 0.55),
    rgba(75, 104, 196, 0.25)
  );
  color: #fff;
  box-shadow: inset 3px 0 #6d91ff;
}
.nav-group button.active > i,
.nav-group a.active > i {
  color: #9eb5ff;
}
.nav-group button.active em,
.nav-group a.active em {
  background: #f29941;
  color: #fff;
}
.sidebar-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  padding: 13px 14px 16px;
  background: linear-gradient(180deg, rgba(19, 36, 92, 0.92), #13245c 35%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.system-health {
  padding: 9px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 8px;
}
.system-health > span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(50, 201, 146, 0.13);
  display: grid;
  place-items: center;
}
.system-health > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #42d697;
  box-shadow: 0 0 0 4px rgba(66, 214, 151, 0.12);
}
.system-health div {
  display: flex;
  flex-direction: column;
}
.system-health strong {
  font-size: 9.5px;
}
.system-health small {
  color: #8ea0d1;
  font-size: 8px;
  margin-top: 2px;
}
.sidebar-footer > button,
.sidebar-footer > a {
  margin: 8px 3px 0;
  padding: 4px 5px;
  border: 0;
  background: transparent;
  color: #96a5d2;
  font-size: 10px;
  display: flex;
  gap: 7px;
}

.app-main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
}
.topbar {
  height: var(--topbar-h);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(12px);
}
.mobile-menu {
  display: none;
  border: 0;
  background: transparent;
  font-size: 22px;
  color: #34415b;
}
.breadcrumb-line {
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}
.breadcrumb-line button,
.breadcrumb-line a {
  border: 0;
  background: none;
  color: #8690a4;
  padding: 0;
}
.breadcrumb-line i {
  font-size: 8px;
}
.breadcrumb-line span {
  color: #46516a;
  font-weight: 650;
}
.global-search {
  width: min(420px, 36vw);
  margin: 0 auto;
  height: 39px;
  border: 1px solid #dce2ed;
  border-radius: 10px;
  background: #f8f9fc;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  position: relative;
}
.global-search > i {
  color: #8791a6;
}
.global-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #2c374f;
  font-size: 12px;
  min-width: 0;
}
.global-search kbd {
  background: #fff;
  border: 1px solid #dfe4ed;
  box-shadow: 0 1px 2px rgba(20, 30, 55, 0.07);
  color: #8b94a7;
  font-size: 9px;
  padding: 3px 6px;
  border-radius: 5px;
}
.global-search.open {
  background: #fff;
  border-color: #9db0e7;
  box-shadow: 0 0 0 3px rgba(49, 91, 214, 0.08);
}
.search-popover {
  position: absolute;
  z-index: 70;
  top: 46px;
  left: -1px;
  right: -1px;
  background: white;
  border: 1px solid #dde3ee;
  border-radius: 11px;
  padding: 8px;
  box-shadow: 0 14px 38px rgba(29, 44, 89, 0.16);
}
.search-popover > small {
  display: block;
  color: #919aae;
  font-size: 8px;
  letter-spacing: 0.8px;
  font-weight: 700;
  padding: 6px 8px 4px;
}
.search-popover button {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  color: #344056;
}
.search-popover button:hover {
  background: #f3f6fb;
}
.search-popover button > span:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.search-popover strong {
  font-size: 11px;
}
.search-popover small {
  font-size: 9px;
  color: #8b94a6;
}
.quick-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #4769d2;
  background: #edf2ff;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon-button,
.help-button {
  width: 33px;
  height: 33px;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: #69758d;
  position: relative;
}
.icon-button:hover,
.help-button:hover {
  background: #f0f3f8;
  color: #304263;
}
.icon-button.bordered {
  border: 1px solid #dce2ec;
}
.has-badge > span {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #e4596e;
  color: #fff;
  font-size: 8px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
}
.help-button {
  border-left: 1px solid #e3e7ef;
  border-radius: 0;
  padding-left: 9px;
  width: 39px;
}
.profile {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 142px;
}
.profile > span {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e8edfb;
  color: #3152b0;
  font-size: 11px;
  font-weight: 750;
}
.profile div {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.profile strong {
  font-size: 10.5px;
  color: #2d3850;
}
.profile small {
  font-size: 8.5px;
  color: #8993a7;
  margin-top: 2px;
}
.profile > i {
  font-size: 9px;
  color: #8993a7;
}

.content-wrap {
  padding: 24px 28px 48px;
  max-width: 1800px;
  margin: 0 auto;
}
.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 19px;
}
.page-heading > div:first-child > span {
  display: block;
  color: #6d7a92;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.page-heading h1 {
  font-size: 23px;
  color: var(--ink);
  margin: 0;
  font-weight: 730;
  letter-spacing: -0.35px;
}
.page-heading p {
  margin: 6px 0 0;
  color: #7e899d;
  font-size: 11.5px;
}
.page-actions {
  display: flex;
  gap: 8px;
}
.surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: 0 3px 12px rgba(20, 35, 75, 0.025);
}
.attention-banner {
  min-height: 67px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(100deg, #293f99, #4c66c2 66%, #596bd1);
  display: flex;
  align-items: center;
  gap: 13px;
  box-shadow: 0 8px 22px rgba(49, 77, 165, 0.16);
}
.attention-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 17px;
}
.attention-banner strong {
  font-size: 12px;
}
.attention-banner p {
  margin: 4px 0 0;
  color: #dbe2ff;
  font-size: 10.5px;
}
.attention-banner .btn {
  color: #29408e;
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.kpi-card {
  min-height: 100px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.kpi-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 15px;
}
.kpi-icon.blue {
  background: #e9efff;
  color: #3b63d3;
}
.kpi-icon.teal {
  background: #e5f6f2;
  color: #208c76;
}
.kpi-icon.orange {
  background: #fff2e1;
  color: #d58725;
}
.kpi-icon.violet {
  background: #f0eefe;
  color: #6b52ca;
}
.kpi-icon.rose {
  background: #fdebf0;
  color: #c95070;
}
.kpi-copy {
  min-width: 0;
}
.kpi-copy strong {
  color: var(--ink);
  font-size: 21px;
  line-height: 1;
}
.kpi-copy p {
  margin: 5px 0 2px;
  font-size: 10.5px;
  font-weight: 700;
  color: #505c73;
}
.kpi-copy small {
  color: #939caf;
  font-size: 8.9px;
  white-space: nowrap;
}
.trend-up {
  color: #218a68;
  font-size: 8.5px;
  font-weight: 700;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.78fr);
  gap: 14px;
}
.dashboard-grid.second {
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.78fr);
}
.journey-funnel-card,
.channel-card,
.priority-card,
.live-team-card {
  padding: 17px;
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.section-head h2 {
  margin: 2px 0 0;
  color: #242f46;
  font-size: 13px;
  font-weight: 720;
}
.section-head h3 {
  margin: 0;
  color: #2c374e;
  font-size: 12px;
  font-weight: 720;
}
.section-kicker {
  font-size: 8px;
  font-weight: 750;
  color: #8994a9;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.compact-select {
  min-height: 31px;
  width: 112px;
  border-radius: 7px;
  font-size: 9px;
}
.funnel-list {
  margin-top: 14px;
  display: grid;
  gap: 9px;
}
.funnel-row {
  display: grid;
  grid-template-columns: 83px minmax(0, 1fr) 40px 30px;
  gap: 9px;
  align-items: center;
}
.funnel-row > span {
  color: #58647a;
  font-size: 9.5px;
}
.funnel-row strong {
  color: #374258;
  font-size: 9.5px;
  text-align: right;
}
.funnel-row small {
  color: #9aa2b2;
  font-size: 8px;
  text-align: right;
}
.funnel-track {
  height: 7px;
  background: #eef1f6;
  border-radius: 5px;
  overflow: hidden;
}
.funnel-track span {
  display: block;
  height: 100%;
  min-width: 6px;
  border-radius: 5px;
}
.micro-insight {
  background: #f2f5fe;
  border: 1px solid #e2e8fb;
  color: #62708d;
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 14px;
  display: flex;
  gap: 8px;
  font-size: 9px;
}
.micro-insight > i {
  color: #d19528;
}
.micro-insight strong {
  color: #3d4c6a;
}
.donut-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 180px;
}
.donut {
  width: 126px;
  height: 126px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: conic-gradient(
    #486bd5 0 42%,
    #775ecf 42% 66%,
    #32a38a 66% 84%,
    #e7a13f 84% 94%,
    #adb7c8 94%
  );
  display: grid;
  place-items: center;
  position: relative;
}
.donut::after {
  content: "";
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
}
.donut > div {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.donut strong {
  color: #27324a;
  font-size: 16px;
}
.donut small {
  color: #929bad;
  font-size: 8px;
}
.legend-list {
  display: grid;
  gap: 8px;
  min-width: 132px;
}
.legend-list > div {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 7px;
  color: #68738a;
  font-size: 9px;
}
.legend-list strong {
  color: #3d485f;
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}
.dot.blue {
  background: #486bd5;
}
.dot.violet {
  background: #775ecf;
}
.dot.teal {
  background: #32a38a;
}
.dot.orange {
  background: #e7a13f;
}
.dot.slate {
  background: #adb7c8;
}
.text-action {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--primary);
  font-size: 9.5px;
  font-weight: 700;
}
.text-action.small {
  font-size: 9px;
}
.channel-card > .text-action,
.live-team-card > .text-action {
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid #edf0f5;
}
.crm-table {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: #f8faff;
  color: #455168;
  font-size: 9.5px;
}
.crm-table thead th {
  padding: 9px 8px;
  color: #8c95a7;
  background: #fafbfc;
  border-color: #edf0f5;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  font-weight: 750;
  white-space: nowrap;
}
.crm-table tbody td {
  padding: 9px 8px;
  border-color: #eef1f5;
  color: #536078;
  white-space: nowrap;
}
.crm-table tbody tr {
  cursor: pointer;
}
.person-cell {
  display: flex;
  align-items: center;
  gap: 9px;
}
.person-cell > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.person-cell strong {
  font-size: 9.5px;
  color: #334056;
}
.person-cell small {
  font-size: 8px;
  color: #949daf;
  margin-top: 2px;
}
.person-cell em {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #3e63d3;
  color: #fff;
  font-size: 7px;
  font-style: normal;
  margin-left: 5px;
}
.lead-avatar {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #e5ecff, #d7e1fa);
  color: #3657b5;
  font-size: 15px;
  font-weight: 750;
}
.lead-avatar.small {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 8px;
}
.health-inline {
  display: inline-block;
  width: 44px;
  height: 5px;
  background: #e9edf3;
  border-radius: 4px;
  overflow: hidden;
  vertical-align: middle;
}
.health-inline span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #4a6bd2, #36a784);
}
.health-num {
  color: #3f4c64;
  font-size: 8.5px;
  margin-left: 5px;
}
.next-action {
  color: #3e4c65;
  font-size: 9px;
}
.crm-table td small {
  color: #929bad;
  font-size: 8px;
  margin-top: 2px;
}
.live-dot {
  padding: 3px 7px;
  border-radius: 10px;
  background: #e8f7f2;
  color: #258768;
  font-size: 8px;
  font-weight: 700;
}
.live-dot::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #36ad83;
  margin-right: 4px;
}
.team-list {
  display: grid;
  gap: 5px;
  margin: 10px 0 12px;
}
.team-list > div,
.owner-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
}
.team-list > div + div {
  border-top: 1px solid #f0f2f6;
}
.team-avatar {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  font-size: 7.5px;
  font-weight: 750;
  flex: 0 0 auto;
}
.team-list strong,
.owner-row strong {
  display: block;
  color: #3d485e;
  font-size: 9.5px;
}
.team-list small,
.owner-row small {
  display: block;
  color: #929bad;
  font-size: 8px;
  margin-top: 1px;
}
.availability {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 7.5px;
  color: #768197;
}
.availability > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9aa3b3;
}
.availability.available {
  color: #268768;
}
.availability.available > span {
  background: #32aa80;
}
.availability.on-call {
  color: #7955c7;
}
.availability.on-call > span {
  background: #8066d2;
}
.availability.in-meeting {
  color: #bd7f29;
}
.availability.in-meeting > span {
  background: #dda34b;
}

.metric-strip {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  overflow: hidden;
}
.metric-strip > div {
  padding: 13px 17px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.metric-strip > div + div {
  border-left: 1px solid #edf0f5;
}
.metric-strip > div > span {
  width: 31px;
  height: 31px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #eff3fc;
  color: #506dcc;
}
.metric-strip > div div {
  display: flex;
  flex-direction: column;
}
.metric-strip strong {
  color: #2e3950;
  font-size: 15px;
}
.metric-strip small {
  color: #8a94a7;
  font-size: 8.5px;
  margin-top: 2px;
}
.table-surface {
  overflow: hidden;
}
.list-toolbar {
  min-height: 58px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #edf0f5;
}
.filter-tabs {
  display: flex;
  gap: 3px;
  overflow-x: auto;
}
.filter-tabs button,
.filter-tabs a {
  border: 0;
  background: transparent;
  padding: 8px 9px;
  color: #778399;
  font-size: 9px;
  font-weight: 650;
  border-radius: 7px;
  white-space: nowrap;
}
.filter-tabs button.active,
.filter-tabs a.active {
  color: #3157c7;
  background: #edf2ff;
}
.filter-tabs button span,
.filter-tabs a span {
  margin-left: 4px;
  padding: 2px 5px;
  border-radius: 8px;
  background: #dce5ff;
  font-size: 7px;
}
.table-search {
  width: 180px;
  height: 32px;
  border: 1px solid #dfe4ed;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  color: #8d97a9;
}
.table-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 9px;
}
.lead-table thead th,
.lead-table tbody td {
  padding: 11px 10px;
}
.lead-table .medium {
  font-size: 9px;
  color: #455168;
  font-weight: 650;
}
.score-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.score-cell strong {
  font-size: 9px;
  color: #354157;
}
.score-cell > div {
  width: 42px;
  height: 5px;
  background: #e9edf3;
  border-radius: 5px;
  overflow: hidden;
}
.score-cell > div span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #5273d5, #37a47f);
  border-radius: 5px;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 10px;
  font-size: 7.5px;
  font-weight: 700;
}
.status-pill > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.status-hot {
  color: #bd455e;
  background: #fdecef;
}
.status-hot > span {
  background: #d5526c;
}
.status-warm {
  color: #b17426;
  background: #fff4e1;
}
.status-warm > span {
  background: #dd9232;
}
.status-cold {
  color: #4e6fae;
  background: #eaf0fb;
}
.status-cold > span {
  background: #5f7ec0;
}
.status-pre-validation,
.status-review,
.status-pending {
  color: #7758bd;
  background: #f1edfb;
}
.status-pre-validation > span,
.status-review > span,
.status-pending > span {
  background: #8368c7;
}
.status-booked,
.status-active,
.status-connected,
.status-verified,
.status-approved {
  color: #278165;
  background: #e8f6f1;
}
.status-booked > span,
.status-active > span,
.status-connected > span,
.status-verified > span,
.status-approved > span {
  background: #35a37e;
}
.status-lost,
.status-attention,
.status-overdue {
  color: #7f8796;
  background: #eef0f3;
}
.status-lost > span,
.status-attention > span,
.status-overdue > span {
  background: #969eac;
}
.status-draft {
  color: #a26c25;
  background: #fff3df;
}
.status-draft > span {
  background: #d2933a;
}
.table-footer {
  padding: 10px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8e97a8;
  font-size: 8.5px;
}
.table-footer div {
  display: flex;
  gap: 3px;
}
.table-footer button,
.table-footer a {
  min-width: 27px;
  height: 26px;
  border: 1px solid #e0e4ec;
  background: #fff;
  border-radius: 6px;
  color: #747f94;
  font-size: 8px;
}
.table-footer button.active,
.table-footer a.active {
  background: #315bd6;
  border-color: #315bd6;
  color: #fff;
}
.empty-state {
  padding: 60px 20px;
  text-align: center;
  color: #8b95a8;
}
.empty-state > i {
  font-size: 24px;
}
.empty-state h3 {
  font-size: 13px;
  color: #465269;
  margin: 8px 0 3px;
}
.empty-state p {
  font-size: 10px;
}

.back-link {
  border: 0;
  background: transparent;
  color: #647089;
  padding: 0;
  margin: -3px 0 10px;
  font-size: 9.5px;
  font-weight: 650;
  display: flex;
  gap: 7px;
  align-items: center;
}
.lead-hero {
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.lead-identity {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 13px;
}
.lead-identity h2 {
  color: #263149;
  font-size: 16px;
  font-weight: 720;
  margin: 0;
}
.lead-identity p {
  color: #8993a6;
  font-size: 9px;
  margin: 4px 0 6px;
}
.contact-row {
  display: flex;
  gap: 13px;
  color: #68748b;
  font-size: 8.5px;
  flex-wrap: wrap;
}
.contact-row i {
  color: #7389c9;
  margin-right: 3px;
}
.lead-scores {
  display: flex;
  gap: 14px;
  padding: 0 20px;
  border-left: 1px solid #e8ebf1;
  border-right: 1px solid #e8ebf1;
}
.ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.score-ring {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#4d6fd6 var(--score), #e8ecf3 0);
  position: relative;
}
.score-ring::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: #fff;
  border-radius: 50%;
}
.score-ring span {
  z-index: 1;
  font-size: 9px;
  font-weight: 750;
  color: #33415a;
}
.score-ring.tone-green {
  background: conic-gradient(#38a17d var(--score), #e8ecf3 0);
}
.ring-wrap small {
  font-size: 7.5px;
  color: #8b94a6;
}
.lead-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.lead-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 276px;
  gap: 14px;
}
.lead-main {
  overflow: hidden;
}
.detail-tabs {
  height: 49px;
  padding: 0 14px;
  display: flex;
  align-items: end;
  gap: 17px;
  border-bottom: 1px solid #e9edf3;
  overflow-x: auto;
}
.detail-tabs button {
  height: 100%;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #7e899c;
  padding: 0 1px;
  font-size: 9px;
  font-weight: 650;
  white-space: nowrap;
}
.detail-tabs button.active {
  color: #3157c8;
  border-color: #315bd6;
}
.detail-tabs button span {
  display: inline-grid;
  place-items: center;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  background: #edf1f8;
  font-size: 7px;
  margin-left: 3px;
}
.journey-toolbar {
  padding: 16px 18px 8px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.journey-toolbar h3 {
  color: #2c374f;
  font-size: 12px;
  margin: 0;
}
.journey-toolbar p {
  color: #929bad;
  font-size: 8.5px;
  margin: 3px 0 0;
}
.journey-filters {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 8px;
  background: #f1f3f7;
}
.journey-filters button {
  border: 0;
  background: transparent;
  border-radius: 6px;
  padding: 5px 8px;
  color: #798399;
  font-size: 8px;
  font-weight: 650;
}
.journey-filters button.active {
  background: #fff;
  color: #3f5eba;
  box-shadow: 0 1px 4px rgba(32, 45, 78, 0.08);
}
.journey-feed {
  padding: 8px 18px 22px;
}
.journey-event {
  display: grid;
  grid-template-columns: 31px 1fr;
  gap: 11px;
  position: relative;
}
.event-node {
  width: 28px;
  height: 28px;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 10px;
}
.event-node.ai {
  background: #efeafe;
  color: #7457c9;
}
.event-node.human {
  background: #e8f4ff;
  color: #3e78bc;
}
.event-node.system {
  background: #e9f6f2;
  color: #288b70;
}
.event-line {
  position: absolute;
  top: 28px;
  bottom: 0;
  left: 13px;
  width: 1px;
  background: #e2e7ef;
}
.event-content {
  padding: 1px 0 15px;
}
.event-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.event-top > div {
  display: flex;
  align-items: center;
  gap: 7px;
}
.event-top strong {
  color: #364158;
  font-size: 9.5px;
}
.event-top time {
  color: #9aa2b1;
  font-size: 7.5px;
  white-space: nowrap;
}
.actor-chip {
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: 0.35px;
}
.actor-chip.ai {
  background: #efeafe;
  color: #7254c4;
}
.actor-chip.human {
  background: #e8f2fc;
  color: #3e72ac;
}
.actor-chip.system {
  background: #e8f5f1;
  color: #28876d;
}
.event-content > p {
  max-width: 780px;
  color: #69758b;
  font-size: 8.8px;
  line-height: 1.55;
  margin: 5px 0;
}
.event-meta {
  display: flex;
  gap: 11px;
  color: #949dad;
  font-size: 7.5px;
  flex-wrap: wrap;
}
.event-meta span {
  display: flex;
  gap: 4px;
  align-items: center;
}
.sentiment.positive {
  color: #29886a;
}
.attachment {
  margin-top: 7px;
  border: 1px solid #e1e6ef;
  border-radius: 7px;
  background: #fafbfc;
  color: #52627c;
  padding: 5px 8px;
  font-size: 7.8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.lead-sidebar {
  display: grid;
  align-content: start;
  gap: 11px;
}
.side-card {
  padding: 14px;
}
.ai-badge {
  padding: 3px 6px;
  border-radius: 7px;
  background: #eeeafe;
  color: #7156c2;
  font-size: 7px;
  font-weight: 750;
  display: flex;
  gap: 3px;
}
.recommendation {
  margin-top: 11px;
  padding: 11px;
  border-radius: 9px;
  background: linear-gradient(145deg, #f1f4ff, #f7f5ff);
  border: 1px solid #e1e6fa;
}
.rec-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  color: #536fd0;
  margin-bottom: 8px;
}
.recommendation strong {
  color: #39445c;
  font-size: 9.5px;
}
.recommendation p {
  color: #707b90;
  font-size: 8px;
  line-height: 1.5;
  margin: 5px 0 9px;
}
.property-list {
  margin: 9px 0 0;
}
.property-list > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #eff2f6;
}
.property-list > div:last-child {
  border: 0;
}
.property-list dt {
  color: #8b95a8;
  font-size: 8px;
  font-weight: 500;
}
.property-list dd {
  color: #465168;
  font-size: 8px;
  font-weight: 650;
  text-align: right;
  margin: 0;
}
.owner-row {
  padding: 10px 0 8px;
}
.owner-row > div {
  flex: 1;
}
.sla-row {
  border-top: 1px solid #edf0f5;
  padding-top: 9px;
  display: flex;
  justify-content: space-between;
  color: #7e899d;
  font-size: 8px;
}
.sla-row strong {
  color: #b77729;
}
.tab-placeholder {
  min-height: 420px;
  padding: 70px 30px;
  text-align: center;
}
.tab-placeholder > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border-radius: 13px;
  background: #edf2ff;
  color: #4666c6;
  font-size: 19px;
}
.tab-placeholder h3 {
  color: #354158;
  font-size: 14px;
}
.tab-placeholder p {
  max-width: 470px;
  margin: 6px auto 16px;
  color: #8792a6;
  font-size: 10px;
  line-height: 1.6;
}
.mini-profile {
  max-width: 360px;
  margin: auto;
  padding: 10px;
  border: 1px solid #e3e8f1;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
}
.mini-profile strong {
  color: #3e4a60;
  font-size: 9px;
}
.mini-profile small {
  color: #8f99aa;
  font-size: 8px;
  margin-top: 2px;
}

.coming-screen {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.coming-screen > span {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #eef2ff;
  color: #4968c6;
  display: grid;
  place-items: center;
  font-size: 19px;
}
.coming-screen h2 {
  color: #344159;
  font-size: 16px;
  margin: 14px 0 5px;
}
.coming-screen p {
  color: #8a94a7;
  font-size: 10px;
}

.modal-layer {
  position: fixed;
  z-index: 100;
  inset: 0;
  background: rgba(10, 19, 51, 0.53);
  display: grid;
  place-items: center;
  padding: 20px;
  backdrop-filter: blur(3px);
}
.crm-modal {
  width: min(560px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 17px;
  padding: 23px;
  box-shadow: 0 25px 80px rgba(10, 20, 54, 0.3);
  position: relative;
  animation: modalIn 0.2s ease-out;
}
.crm-modal.wide {
  width: min(700px, 100%);
}
@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: 8px;
  background: #f2f4f7;
  color: #7e889b;
}
.modal-heading {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-right: 30px;
  margin-bottom: 19px;
}
.modal-heading > span {
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #edf2ff;
  color: #4666c7;
  display: grid;
  place-items: center;
  font-size: 15px;
}
.modal-heading > span.wa {
  background: #e7f7f0;
  color: #26946b;
}
.modal-heading small,
.call-visual small {
  color: #7786b1;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.8px;
}
.modal-heading h2 {
  color: #29354c;
  font-size: 17px;
  margin: 2px 0 4px;
}
.modal-heading p {
  color: #8691a4;
  font-size: 9.5px;
  margin: 0;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eceff4;
}
.context-box,
.ai-preview {
  display: flex;
  gap: 9px;
  padding: 10px;
  border-radius: 9px;
  background: #f2f5fe;
  border: 1px solid #e1e7fa;
  margin-bottom: 13px;
  color: #63739c;
}
.context-box strong,
.ai-preview strong {
  color: #42547c;
  font-size: 9px;
}
.context-box p,
.ai-preview p {
  margin: 2px 0 0;
  font-size: 8px;
  line-height: 1.45;
}
.soft-chip {
  border: 1px solid #e0e5ed;
  background: #fafbfc;
  border-radius: 7px;
  padding: 5px 8px;
  color: #6e7a90;
  font-size: 8px;
}
.transport-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #dfe5ee;
  background: #f9fafc;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
}
.transport-toggle input {
  display: none;
}
.transport-toggle > span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e9efff;
  color: #4867c7;
}
.transport-toggle div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.transport-toggle strong {
  color: #3c485f;
  font-size: 9px;
}
.transport-toggle small {
  color: #8d97a9;
  font-size: 8px;
  margin-top: 2px;
}
.transport-toggle em {
  padding: 3px 6px;
  border-radius: 8px;
  background: #e2f4ed;
  color: #288568;
  font-size: 7px;
  font-style: normal;
  font-weight: 750;
}
.call-visual {
  text-align: center;
  padding: 18px 10px 10px;
}
.pulse-ring {
  width: 66px;
  height: 66px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #315bd6;
  color: #fff;
  font-size: 22px;
  box-shadow:
    0 0 0 10px #eef2ff,
    0 0 0 20px #f6f8ff;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 10px #eef2ff,
      0 0 0 20px #f6f8ff;
  }
  50% {
    box-shadow:
      0 0 0 14px #eef2ff,
      0 0 0 25px #f7f8ff;
  }
}
.call-visual h2 {
  color: #29354d;
  font-size: 18px;
  margin: 7px 0 5px;
}
.call-visual p {
  color: #8690a4;
  font-size: 9.5px;
}
.call-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 19px 0 5px;
}
.call-steps div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #949dac;
  font-size: 8px;
}
.call-steps div span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #edf0f5;
  color: #8791a4;
}
.call-steps div.done span {
  background: #e5f3ee;
  color: #238164;
}
.call-steps div.done {
  color: #3d775f;
}
.call-steps i {
  width: 54px;
  height: 1px;
  background: #e1e5ed;
  margin: 0 5px 16px;
}
.stepper {
  display: flex;
  align-items: center;
  margin: 2px 0 19px;
}
.stepper span {
  padding: 6px 8px;
  border-radius: 7px;
  background: #f0f2f6;
  color: #8a94a6;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}
.stepper span.active {
  background: #eaf0ff;
  color: #3f60c5;
}
.stepper i {
  flex: 1;
  height: 1px;
  background: #e1e5ec;
}
.check-state,
.otp-state {
  text-align: center;
  padding: 8px 5px;
}
.check-state > span,
.otp-state > span {
  width: 51px;
  height: 51px;
  border-radius: 14px;
  background: #e7f6f0;
  color: #279371;
  display: grid;
  place-items: center;
  font-size: 21px;
  margin: 0 auto 10px;
}
.otp-state > span {
  background: #edf2ff;
  color: #4a67c6;
}
.check-state h3,
.otp-state h3 {
  color: #354158;
  font-size: 14px;
  margin: 0 0 4px;
}
.check-state > p,
.otp-state > p {
  color: #8993a6;
  font-size: 9px;
}
.check-state > div {
  max-width: 420px;
  margin: 7px auto;
  padding: 8px 10px;
  border: 1px solid #e5e9f0;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  color: #68758a;
  font-size: 8.5px;
}
.check-state > div i {
  margin-right: 5px;
  color: #7088ca;
}
.check-state > div strong {
  color: #3e896f;
}
.otp-boxes {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 15px 0;
}
.otp-boxes input {
  width: 39px;
  height: 43px;
  border: 1px solid #d8dfeb;
  border-radius: 8px;
  text-align: center;
  color: #31405c;
  font-weight: 750;
}
.otp-state .ai-preview {
  max-width: 430px;
  margin: 15px auto 0;
  text-align: left;
}
.crm-toast {
  position: fixed;
  z-index: 120;
  right: 24px;
  bottom: 24px;
  min-width: 320px;
  max-width: 460px;
  padding: 12px 14px;
  border-radius: 11px;
  background: #173e35;
  color: #fff;
  box-shadow: 0 12px 32px rgba(14, 46, 38, 0.3);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  animation: modalIn 0.2s ease-out;
}
.crm-toast i {
  color: #65d2a8;
  font-size: 15px;
}
.sidebar-backdrop {
  display: none;
}

/* Connected module system */
.module-metrics {
  display: grid;
  gap: 12px;
}
.module-metrics.four {
  grid-template-columns: repeat(4, 1fr);
}
.mini-metric {
  min-height: 84px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  box-shadow: 0 3px 12px rgba(20, 35, 75, 0.025);
}
.module-icon {
  width: 37px;
  height: 37px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 14px;
}
.module-icon.blue {
  background: #eaf0ff;
  color: #4266cb;
}
.module-icon.teal {
  background: #e5f6f0;
  color: #268b6d;
}
.module-icon.orange,
.module-icon.amber {
  background: #fff2df;
  color: #cc8529;
}
.module-icon.violet {
  background: #f0ecfe;
  color: #7357c8;
}
.module-icon.rose {
  background: #fcebef;
  color: #c9536e;
}
.mini-metric > div {
  display: flex;
  flex-direction: column;
}
.mini-metric strong {
  color: #27334a;
  font-size: 20px;
  line-height: 1;
}
.mini-metric small {
  color: #59657b;
  font-size: 9px;
  font-weight: 700;
  margin-top: 5px;
}
.mini-metric em {
  color: #969eae;
  font-size: 7.5px;
  font-style: normal;
  margin-top: 2px;
}
.module-grid {
  display: grid;
  gap: 14px;
}
.module-grid.two {
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.85fr);
}
.module-grid.call-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.8fr);
}
.module-grid.visit-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.75fr);
}
.module-grid.payment-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.65fr);
}
.module-grid.post-grid {
  grid-template-columns: minmax(340px, 0.75fr) minmax(0, 1.25fr);
}
.module-grid.marketing-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.65fr);
}
.module-card {
  padding: 17px;
  overflow: hidden;
}
.module-head {
  margin-bottom: 13px;
}
.module-head h2 {
  font-size: 13px;
}
.module-table tbody td {
  padding: 10px 8px;
}
.journey-saved {
  color: #26836a;
  font-size: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.source-health {
  display: grid;
  gap: 4px;
}
.source-health > div {
  min-height: 54px;
  padding: 8px;
  border: 1px solid #edf0f4;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.source-health > div > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.source-health strong {
  color: #3b475e;
  font-size: 9px;
}
.source-health small {
  color: #919aac;
  font-size: 8px;
  margin-top: 2px;
}
.source-health .sync {
  color: #2b866a;
  font-size: 7.5px;
}
.source-health .sync i {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #38a982;
  margin-right: 4px;
}
.source-health .sync.delayed {
  color: #ad762b;
}
.source-health .sync.delayed i {
  background: #dc9a41;
}
.source-health button {
  border: 0;
  background: transparent;
  color: #9aa3b4;
  font-size: 9px;
}
.upload-zone {
  min-height: 230px;
  border: 1.5px dashed #cbd5e7;
  border-radius: 11px;
  background: #f8faff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}
.upload-zone > span {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #eaf0ff;
  color: #4a68c6;
  font-size: 18px;
}
.upload-zone h3 {
  color: #3d4960;
  font-size: 11px;
  margin: 10px 0 3px;
}
.upload-zone p {
  color: #8b95a8;
  font-size: 8.5px;
  margin: 0 0 11px;
}
.import-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
}
.import-steps > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #919aac;
}
.import-steps > div span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eef1f6;
  color: #8791a4;
  font-size: 8px;
}
.import-steps > div.done span {
  background: #e7f5f0;
  color: #258367;
}
.import-steps strong {
  color: #637087;
  font-size: 8px;
}
.import-steps small {
  font-size: 7px;
}
.import-steps > i {
  width: 34px;
  height: 1px;
  background: #e1e5ed;
  margin: 0 5px 24px;
}

/* Form builder */
.builder-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 260px;
  gap: 14px;
  align-items: start;
}
.builder-palette,
.builder-settings {
  padding: 15px;
  position: sticky;
  top: 92px;
}
.builder-palette .field-search {
  height: 32px;
  border: 1px solid #e0e5ee;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  color: #8c96a8;
  margin-bottom: 9px;
}
.builder-palette .field-search input {
  border: 0;
  outline: 0;
  min-width: 0;
  width: 100%;
  font-size: 8px;
}
.builder-palette > button {
  width: 100%;
  padding: 9px 7px;
  border: 0;
  border-bottom: 1px solid #eff2f5;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  color: #6c7890;
}
.builder-palette > button > i:first-child {
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: #eff3fc;
  color: #5972bd;
  display: grid;
  place-items: center;
}
.builder-palette > button > span {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.builder-palette > button strong {
  color: #48546a;
  font-size: 8.5px;
}
.builder-palette > button small {
  color: #949dae;
  font-size: 7px;
}
.builder-palette > button > i:last-child {
  color: #a4acba;
}
.builder-canvas {
  min-height: 680px;
  overflow: hidden;
}
.builder-top {
  min-height: 64px;
  padding: 12px 16px;
  border-bottom: 1px solid #e8ecf2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.builder-top h2 {
  color: #303c54;
  font-size: 13px;
  margin: 2px 0;
}
.builder-top small {
  color: #969eae;
  font-size: 7px;
}
.builder-top > div:last-child {
  display: flex;
  gap: 6px;
}
.form-preview {
  width: min(560px, 90%);
  margin: 23px auto;
  border: 1px solid #dde3ed;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 9px 30px rgba(29, 44, 84, 0.08);
  overflow: hidden;
}
.form-banner {
  padding: 16px;
  background: linear-gradient(105deg, #243f9c, #506fd2);
  color: #fff;
  display: flex;
  gap: 10px;
  align-items: center;
}
.form-banner > span {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.15);
  display: grid;
  place-items: center;
}
.form-banner div {
  display: flex;
  flex-direction: column;
}
.form-banner strong {
  font-size: 11px;
}
.form-banner small {
  color: #dae2ff;
  font-size: 8px;
  margin-top: 3px;
}
.canvas-fields {
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.canvas-fields > button {
  border: 1px solid #e1e6ee;
  background: #fff;
  border-radius: 8px;
  padding: 8px;
  display: grid;
  grid-template-columns: 14px 1fr 38px;
  gap: 4px;
  text-align: left;
  color: #748097;
}
.canvas-fields > button.selected {
  border-color: #6d87db;
  box-shadow: 0 0 0 2px rgba(65, 95, 196, 0.08);
}
.canvas-fields .drag {
  display: flex;
  align-items: center;
  color: #b1b8c4;
}
.canvas-fields > button > div label {
  display: block;
  color: #566177;
  font-size: 7.5px;
  font-weight: 700;
  margin-bottom: 4px;
}
.canvas-fields label em {
  color: #d45a68;
  font-style: normal;
  margin-left: 2px;
}
.fake-input {
  height: 30px;
  border: 1px solid #e1e5ec;
  background: #fafbfc;
  border-radius: 6px;
  padding: 8px;
  color: #a0a8b6;
  font-size: 7.5px;
}
.fake-checkbox {
  color: #8b95a7;
  font-size: 7.5px;
  display: flex;
  gap: 5px;
  line-height: 1.4;
}
.fake-checkbox i {
  width: 12px;
  height: 12px;
  border: 1px solid #d9dfe8;
  border-radius: 3px;
  flex: 0 0 auto;
}
.field-actions {
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #8f99ab;
}
.canvas-fields > button:hover .field-actions,
.canvas-fields > button.selected .field-actions {
  opacity: 1;
}
.fake-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 14px 16px auto;
  border: 0;
  border-radius: 7px;
  background: #315bd6;
  color: #fff;
  padding: 8px 13px;
  font-size: 8.5px;
  font-weight: 700;
}
.setting-block {
  margin-bottom: 12px;
}
.setting-block > label {
  display: block;
  color: #657187;
  font-size: 8px;
  font-weight: 700;
  margin-bottom: 5px;
}
.builder-settings .form-control,
.builder-settings .form-select {
  min-height: 34px;
  font-size: 8px;
}
.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid #eef1f5;
}
.toggle-row > span {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.toggle-row strong {
  color: #536077;
  font-size: 8.5px;
}
.toggle-row small {
  color: #959eae;
  font-size: 7px;
  margin-top: 2px;
}
.toggle-row input {
  accent-color: #315bd6;
}
.publish-card {
  margin-top: 14px;
  padding: 10px;
  border: 1px solid #dfe5ef;
  border-radius: 9px;
  background: #f9fafd;
}
.publish-card > div {
  display: flex;
  align-items: center;
  gap: 7px;
}
.publish-card > div > span {
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: #e9edf3;
  display: grid;
  place-items: center;
}
.publish-card > div > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aa3b2;
}
.publish-card > div > span.on {
  background: #e5f5ef;
}
.publish-card > div > span.on i {
  background: #32a37d;
}
.publish-card > div > div {
  display: flex;
  flex-direction: column;
}
.publish-card strong {
  color: #445066;
  font-size: 8.5px;
}
.publish-card small {
  color: #8e98aa;
  font-size: 7px;
}
.publish-card button {
  width: 100%;
  margin-top: 8px;
  border: 1px solid #d6ddea;
  background: #fff;
  color: #4f65a8;
  border-radius: 6px;
  font-size: 8px;
  padding: 6px;
}

/* AI qualification */
.qualification-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  gap: 14px;
  align-items: start;
}
.qual-queue,
.qual-analysis,
.qual-action {
  padding: 15px;
}
.qual-queue > div:last-child {
  display: grid;
  gap: 4px;
}
.qual-queue > div:last-child > button {
  display: grid;
  grid-template-columns: 30px 1fr 25px;
  grid-template-rows: auto auto;
  gap: 0 8px;
  border: 1px solid transparent;
  background: #fff;
  border-radius: 9px;
  padding: 8px;
  text-align: left;
  color: #758198;
}
.qual-queue > div:last-child > button.active {
  background: #f1f5ff;
  border-color: #dce5fb;
}
.qual-queue button > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.qual-queue button strong {
  color: #3e4a61;
  font-size: 8.5px;
}
.qual-queue button small {
  color: #939cad;
  font-size: 7px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qual-queue button > div > span {
  height: 3px;
  background: #e8ecf3;
  border-radius: 3px;
  margin-top: 5px;
}
.qual-queue button > div > span i {
  display: block;
  height: 100%;
  background: #4a70d6;
  border-radius: 3px;
}
.qual-queue button > b {
  color: #3c4961;
  font-size: 9px;
  text-align: right;
}
.qual-queue button .status-pill {
  grid-column: 2/4;
  margin-top: 5px;
  width: max-content;
}
.qual-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 13px;
  border-bottom: 1px solid #edf0f4;
}
.qual-hero h2 {
  color: #2f3b53;
  font-size: 16px;
  margin: 3px 0;
}
.qual-hero p {
  color: #9099aa;
  font-size: 8px;
  margin: 0;
}
.large-score {
  width: 59px;
  height: 59px;
  border-radius: 50%;
  background: conic-gradient(#5c70d3 0 88%, #e8ebf1 88%);
  display: grid;
  place-items: center;
  position: relative;
}
.large-score::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: #fff;
  border-radius: 50%;
}
.large-score strong,
.large-score small {
  z-index: 1;
  position: absolute;
}
.large-score strong {
  color: #34425b;
  font-size: 15px;
  top: 15px;
}
.large-score small {
  color: #929bac;
  font-size: 6px;
  top: 34px;
}
.ai-summary-box {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(115deg, #f1f4ff, #f7f5ff);
  border: 1px solid #e0e5f8;
  margin: 14px 0;
}
.ai-summary-box > span {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #fff;
  color: #6d58c2;
  display: grid;
  place-items: center;
}
.ai-summary-box strong {
  color: #3e4b65;
  font-size: 9.5px;
}
.ai-summary-box p {
  color: #6f7b91;
  font-size: 8px;
  line-height: 1.55;
  margin: 3px 0 0;
}
.sub-title {
  color: #536077;
  font-size: 9px;
  margin: 0 0 9px;
}
.factor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 15px;
}
.factor-grid > div > div:first-child {
  display: flex;
  justify-content: space-between;
  color: #6f7a8e;
  font-size: 8px;
}
.factor-grid > div strong {
  color: #344158;
}
.factor-bar {
  height: 5px;
  background: #e9edf3;
  border-radius: 4px;
  margin: 4px 0;
  overflow: hidden;
}
.factor-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #566fd1, #3ca081);
  border-radius: 4px;
}
.factor-grid small {
  color: #9aa2b2;
  font-size: 7px;
}
.risk-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 15px;
}
.risk-row > div {
  display: flex;
  gap: 8px;
  padding: 9px;
  border: 1px solid #e2e7ef;
  border-radius: 8px;
  color: #4b6fc9;
}
.risk-row span {
  display: flex;
  flex-direction: column;
}
.risk-row strong {
  color: #48546a;
  font-size: 8.5px;
}
.risk-row small {
  color: #929bad;
  font-size: 7px;
  margin-top: 2px;
}
.next-best {
  padding: 12px;
  background: #f4f6fe;
  border: 1px solid #e2e7f8;
  border-radius: 10px;
  text-align: center;
}
.next-best > span {
  width: 37px;
  height: 37px;
  margin: 0 auto 8px;
  border-radius: 10px;
  background: #fff;
  display: grid;
  place-items: center;
  color: #4d69c7;
}
.next-best strong {
  color: #3d4961;
  font-size: 10px;
}
.next-best p {
  color: #727e93;
  font-size: 8px;
  line-height: 1.5;
  margin: 5px 0 10px;
}
.next-best .btn + .btn {
  margin-top: 6px;
}
.qual-facts {
  margin: 11px 0;
}
.qual-facts > div {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #edf0f4;
  color: #8b95a7;
  font-size: 8px;
}
.qual-facts strong {
  color: #455168;
}
.amber-text {
  color: #b77b2c !important;
}

/* WhatsApp inbox */
.inbox-shell {
  height: calc(100vh - 155px);
  min-height: 650px;
  display: grid;
  grid-template-columns: 270px minmax(420px, 1fr) 260px;
  gap: 1px;
  background: #e1e6ee;
  border: 1px solid #dfe4ed;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(20, 35, 75, 0.025);
}
.inbox-shell > .surface {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.inbox-title {
  padding: 15px 14px 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.inbox-title > div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.inbox-title h2 {
  margin: 0;
  color: #303c53;
  font-size: 13px;
}
.inbox-title span {
  padding: 2px 5px;
  border-radius: 7px;
  background: #edf2ff;
  color: #4965bf;
  font-size: 7px;
}
.inbox-search {
  margin: 0 12px;
  height: 32px;
  border: 1px solid #e0e5ee;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  color: #9099aa;
}
.inbox-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  font-size: 8px;
}
.inbox-tabs {
  display: flex;
  padding: 9px 12px 6px;
  border-bottom: 1px solid #edf0f4;
}
.inbox-tabs button {
  border: 0;
  background: transparent;
  color: #7e899d;
  font-size: 8px;
  padding: 5px 8px;
  border-radius: 6px;
}
.inbox-tabs button.active {
  background: #edf2ff;
  color: #3158c7;
}
.conversation-list {
  overflow-y: auto;
  height: calc(100% - 108px);
}
.conversation-list > button {
  width: 100%;
  min-height: 72px;
  border: 0;
  border-bottom: 1px solid #eef1f5;
  background: #fff;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 33px 1fr 16px;
  gap: 8px;
  text-align: left;
  color: #7e899d;
}
.conversation-list > button.active {
  background: #eff4ff;
  box-shadow: inset 3px 0 #4264cc;
}
.wa-avatar {
  position: relative;
}
.wa-avatar > i {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 7px;
  height: 7px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #38aa81;
}
.wa-avatar > i.offline {
  background: #aeb5c0;
}
.conversation-list button > div {
  min-width: 0;
}
.conversation-list button > div > strong {
  display: flex;
  justify-content: space-between;
  color: #3c485e;
  font-size: 8.5px;
}
.conversation-list time {
  color: #9ca4b3;
  font-size: 7px;
  font-weight: 400;
}
.conversation-list button > div > span {
  display: block;
  color: #7d889b;
  font-size: 7.5px;
  margin: 5px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conversation-list button > div > small {
  color: #7459c4;
  font-size: 7px;
}
.conversation-list button > em {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #4264cc;
  color: #fff;
  font-size: 7px;
  font-style: normal;
  display: grid;
  place-items: center;
  align-self: center;
}
.chat-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: #f5f6f9 !important;
}
.chat-head {
  min-height: 56px;
  padding: 9px 13px;
  background: #fff;
  border-bottom: 1px solid #e5e9ef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chat-head > div:last-child {
  display: flex;
}
.chat-head strong {
  display: block;
  color: #344158;
  font-size: 9px;
}
.chat-head small {
  color: #8c96a9;
  font-size: 7px;
}
.chat-head small span {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #35a77d;
  margin-right: 4px;
}
.handoff-strip {
  min-height: 38px;
  padding: 7px 10px;
  background: #f0edfc;
  color: #6a57aa;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 7.5px;
}
.handoff-strip > span {
  flex: 1;
}
.handoff-strip strong {
  color: #534379;
}
.handoff-strip button {
  border: 0;
  background: #fff;
  color: #654fb0;
  border-radius: 6px;
  padding: 5px 7px;
  font-size: 7px;
  font-weight: 700;
}
.chat-body {
  padding: 15px 18px;
  overflow-y: auto;
  background-image: radial-gradient(#d9dde5 0.7px, transparent 0.7px);
  background-size: 16px 16px;
}
.day-chip {
  width: max-content;
  margin: 0 auto 13px;
  padding: 3px 7px;
  border-radius: 7px;
  background: #e5e8ed;
  color: #7f899b;
  font-size: 7px;
}
.message {
  max-width: 76%;
  margin: 7px 0;
}
.message.customer {
  margin-left: auto;
}
.message p {
  margin: 0;
  padding: 9px 10px;
  border-radius: 10px 10px 10px 2px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(29, 40, 70, 0.06);
  color: #566278;
  font-size: 8.5px;
  line-height: 1.5;
}
.message.customer p {
  background: #e2edff;
  border-radius: 10px 10px 2px 10px;
  color: #405273;
}
.message.ai p {
  background: #f0eafd;
  border: 1px solid #e1d9f7;
}
.message > div {
  display: flex;
  justify-content: space-between;
  color: #959eae;
  font-size: 6.8px;
  padding: 3px 2px 0;
}
.message > div span i {
  color: #795dc9;
  margin-right: 3px;
}
.message.system {
  max-width: 92%;
  margin: 11px auto;
  padding: 6px 9px;
  border-radius: 8px;
  background: #e8ebf0;
  color: #7c8799;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 7px;
}
.message.system time {
  margin-left: auto;
  font-size: 6.5px;
}
.composer {
  min-height: 96px;
  background: #fff;
  border-top: 1px solid #e2e7ee;
  padding: 8px 48px 9px 11px;
  position: relative;
}
.composer-tools {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 5px;
}
.composer-tools button {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: #7e899b;
  border-radius: 6px;
}
.composer-tools button:hover {
  background: #eff2f6;
}
.mode-chip {
  margin-left: auto;
  padding: 4px 7px;
  border-radius: 7px;
  font-size: 7px;
  font-weight: 700;
}
.mode-chip.human {
  background: #e7f3ff;
  color: #3e74b0;
}
.mode-chip.ai {
  background: #efeafd;
  color: #7057c0;
}
.composer textarea {
  width: 100%;
  height: 42px;
  resize: none;
  border: 0;
  outline: 0;
  color: #48556c;
  font-size: 8.5px;
}
.send-button {
  position: absolute;
  right: 11px;
  bottom: 13px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: #2e63d5;
  color: #fff;
  display: grid;
  place-items: center;
}
.chat-context {
  padding: 15px;
  overflow-y: auto;
}
.context-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 13px;
  border-bottom: 1px solid #edf0f4;
}
.context-profile strong {
  color: #39455c;
  font-size: 10px;
  margin-top: 6px;
}
.context-profile small {
  color: #929bad;
  font-size: 7.5px;
  margin: 2px 0 7px;
}
.context-health {
  padding: 12px 0;
  border-bottom: 1px solid #edf0f4;
}
.context-health > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.context-health > div span {
  color: #8b95a7;
  font-size: 7px;
  display: flex;
  flex-direction: column;
}
.context-health strong {
  color: #364259;
  font-size: 13px;
  margin-top: 2px;
}
.context-health > i {
  display: block;
  height: 5px;
  background: #e8ecf3;
  border-radius: 4px;
  margin-top: 7px;
}
.context-health > i span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #5570d1, #36a37f);
  border-radius: 4px;
}
.context-section {
  padding: 12px 0;
  border-bottom: 1px solid #edf0f4;
}
.context-section h3 {
  color: #59667c;
  font-size: 8.5px;
  margin: 0 0 7px;
}
.context-section dl {
  margin: 0;
}
.context-section dl > div {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 7.5px;
}
.context-section dt {
  color: #909aac;
  font-weight: 400;
}
.context-section dd {
  color: #465269;
  font-weight: 650;
  margin: 0;
  text-align: right;
}
.handoff-button {
  width: 100%;
  padding: 7px 0;
  border: 0;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 7px;
  text-align: left;
  color: #8a94a6;
}
.handoff-button > span {
  width: 27px;
  height: 27px;
  border-radius: 7px;
  background: #e7f3ff;
  color: #3d75b2;
  display: grid;
  place-items: center;
}
.handoff-button > span.violet {
  background: #f0ebfd;
  color: #7156bf;
}
.handoff-button > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.handoff-button strong {
  color: #49556b;
  font-size: 8px;
}
.handoff-button small {
  color: #959eae;
  font-size: 7px;
}

/* Calls, recordings, follow-ups */
.call-explainer {
  display: flex;
  align-items: center;
  background: #f4f6fe;
  border: 1px solid #e3e7f7;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 11px;
}
.flow-step {
  flex: 1;
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  gap: 0 7px;
}
.flow-step > span {
  grid-row: 1/3;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff;
  color: #4a67c7;
  display: grid;
  place-items: center;
}
.flow-step strong {
  color: #49566e;
  font-size: 7.5px;
}
.flow-step small {
  color: #929bad;
  font-size: 6.8px;
  margin-top: 2px;
}
.call-explainer > i {
  color: #9ba5b6;
  font-size: 9px;
  margin: 0 6px;
}
.dial-queue {
  display: grid;
  gap: 5px;
}
.dial-queue > div {
  min-height: 51px;
  padding: 7px 8px;
  border: 1px solid #edf0f5;
  border-radius: 9px;
  display: grid;
  grid-template-columns: minmax(165px, 1fr) minmax(140px, 0.8fr) 100px 55px;
  gap: 8px;
  align-items: center;
}
.call-reason {
  color: #6d7890;
  font-size: 7.5px;
  display: flex;
  gap: 5px;
}
.call-reason i {
  color: #d37757;
}
.assigned {
  color: #69758b;
  font-size: 7.5px;
}
.assigned i {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #35a57e;
  margin-right: 4px;
}
.call-now {
  border: 0;
  border-radius: 7px;
  background: #e8f2ff;
  color: #366eae;
  padding: 6px;
  font-size: 7.5px;
}
.routing-list > div {
  display: grid;
  grid-template-columns: 27px 1fr auto 45px 35px;
  gap: 7px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #edf0f4;
}
.routing-list > div > div {
  display: flex;
  flex-direction: column;
}
.routing-list strong {
  color: #465269;
  font-size: 8.5px;
}
.routing-list small {
  color: #929bad;
  font-size: 7px;
}
.load-meter {
  height: 4px;
  background: #e8ecf2;
  border-radius: 3px;
  overflow: hidden;
}
.load-meter i {
  display: block;
  height: 100%;
  background: #5771ca;
  border-radius: 3px;
}
.routing-rule {
  margin-top: 11px;
  padding: 10px;
  background: #f7f8fb;
  border: 1px solid #e6e9ef;
  border-radius: 9px;
  display: flex;
  gap: 8px;
  color: #5771c5;
}
.routing-rule div {
  flex: 1;
}
.routing-rule strong {
  color: #4a566c;
  font-size: 8px;
}
.routing-rule p {
  color: #8a94a6;
  font-size: 7px;
  margin: 2px 0 0;
}
.routing-rule button {
  border: 0;
  background: transparent;
  color: #8993a6;
}
.employee-first {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #4d69c2;
}
.play-button {
  border: 0;
  background: transparent;
  color: #4564b8;
  font-size: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.recordings-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 260px;
  gap: 14px;
  align-items: start;
}
.record-search {
  height: 33px;
  border: 1px solid #e1e5ed;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  color: #9099ab;
  margin-bottom: 9px;
}
.record-search input {
  border: 0;
  outline: 0;
  min-width: 0;
  width: 100%;
  font-size: 8px;
}
.record-list {
  display: grid;
  gap: 4px;
}
.record-list > button {
  width: 100%;
  border: 1px solid transparent;
  border-bottom-color: #eef1f4;
  background: #fff;
  padding: 9px 4px;
  display: grid;
  grid-template-columns: 30px 1fr 48px;
  gap: 8px;
  text-align: left;
  color: #8993a6;
}
.record-list > button.active {
  border-color: #dce5f8;
  background: #f2f5ff;
  border-radius: 9px;
  padding: 9px;
}
.play-circle {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #eaf0ff;
  color: #4969c8;
  display: grid;
  place-items: center;
}
.record-list > button > div {
  min-width: 0;
}
.record-list strong {
  color: #3f4b62;
  font-size: 8.5px;
}
.record-list small {
  color: #949dae;
  font-size: 7px;
  display: block;
  margin-top: 2px;
}
.record-list p {
  color: #788399;
  font-size: 7.5px;
  line-height: 1.4;
  margin: 5px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.record-list > button > span:last-child {
  text-align: right;
}
.record-list .status-pill {
  margin-top: 5px;
}
.transcript-card {
  overflow: hidden;
}
.transcript-head {
  padding: 16px 17px 10px;
  display: flex;
  justify-content: space-between;
}
.transcript-head h2 {
  color: #344058;
  font-size: 14px;
  margin: 3px 0;
}
.transcript-head p {
  color: #8f99aa;
  font-size: 7.5px;
  margin: 0;
}
.audio-player {
  margin: 0 17px 12px;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 9px;
  background: #273f94;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 9px;
}
.audio-player button {
  border: 0;
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  border-radius: 7px;
  width: 28px;
  height: 28px;
  font-size: 9px;
}
.audio-player > span {
  color: #d3dcff;
  font-size: 7px;
}
.audio-player > div {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.23);
  border-radius: 3px;
}
.audio-player > div i {
  display: block;
  height: 100%;
  background: #fff;
  border-radius: 3px;
}
.transcript-tabs {
  display: flex;
  padding: 0 17px;
  border-bottom: 1px solid #e8ecf2;
}
.transcript-tabs button {
  padding: 9px 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #7d889b;
  font-size: 8px;
}
.transcript-tabs button.active {
  border-color: #385dc6;
  color: #3158c8;
}
.transcript-tabs span {
  padding: 1px 4px;
  border-radius: 5px;
  background: #edf1f7;
  font-size: 6px;
}
.transcript-body {
  padding: 14px 17px;
  display: grid;
  gap: 11px;
}
.transcript-body > div {
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 8px;
}
.speaker {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 7px;
  font-weight: 700;
}
.speaker.employee {
  background: #4364c3;
}
.speaker.customer {
  background: #319077;
}
.transcript-body p {
  color: #69758b;
  font-size: 8px;
  line-height: 1.55;
  margin: 0;
}
.transcript-body p strong {
  display: block;
  color: #465269;
  font-size: 8px;
  margin-bottom: 3px;
}
.transcript-body time {
  color: #9aa3b2;
  font-weight: 400;
  margin-left: 5px;
}
.transcript-body > div.highlight {
  background: #f6f4ff;
  border: 1px solid #e6e1f8;
  border-radius: 9px;
  padding: 8px;
}
.transcript-body em {
  grid-column: 2;
  margin-top: 5px;
  color: #745bc0;
  font-size: 7px;
  font-style: normal;
}
.intelligence-card {
  padding: 15px;
}
.sentiment-score {
  padding: 12px;
  border-radius: 10px;
  background: #e9f6f1;
  display: flex;
  align-items: center;
  gap: 9px;
}
.sentiment-score > span {
  width: 39px;
  height: 39px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #27886a;
  font-size: 13px;
  font-weight: 750;
}
.sentiment-score div {
  display: flex;
  flex-direction: column;
}
.sentiment-score strong {
  color: #3f5b50;
  font-size: 8.5px;
}
.sentiment-score small {
  color: #7c9c90;
  font-size: 7px;
  margin-top: 2px;
}
.insight-block {
  padding: 12px 0;
  border-bottom: 1px solid #edf0f4;
}
.insight-block h3 {
  color: #566278;
  font-size: 8.5px;
}
.insight-block p {
  color: #7b869a;
  font-size: 7.5px;
  line-height: 1.5;
}
.insight-block label {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  color: #68748a;
  font-size: 7.5px;
  padding: 5px 0;
}
.insight-block input {
  accent-color: #315bd6;
}
.follow-list {
  display: grid;
  gap: 4px;
}
.follow-list > div {
  min-height: 55px;
  display: grid;
  grid-template-columns: 27px minmax(160px, 0.9fr) minmax(150px, 1fr) 27px 20px;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid #edf0f4;
}
.due-mark {
  width: 25px;
  height: 25px;
  border-radius: 7px;
  display: grid;
  place-items: center;
}
.due-mark.urgent {
  background: #fdecef;
  color: #cf566f;
}
.due-mark.soon {
  background: #fff2df;
  color: #cc8529;
}
.due-mark.future {
  background: #eaf0ff;
  color: #4c69c5;
}
.follow-reason {
  display: flex;
  flex-direction: column;
}
.follow-reason strong {
  color: #49556c;
  font-size: 8.5px;
}
.follow-reason small {
  color: #929bad;
  font-size: 7px;
  margin-top: 2px;
}
.channel-icon {
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: #e7f6f0;
  color: #26916d;
  display: grid;
  place-items: center;
}
.follow-list > div > button {
  border: 0;
  background: transparent;
  color: #98a1b1;
}
.switch-text {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #738097;
  font-size: 7.5px;
}
.switch-text input {
  display: none;
}
.switch-text > span {
  width: 26px;
  height: 14px;
  border-radius: 8px;
  background: #d9dfe8;
  position: relative;
}
.switch-text > span::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: 0.15s;
}
.switch-text input:checked + span {
  background: #3b64cf;
}
.switch-text input:checked + span::after {
  left: 14px;
}
.sequence-flow {
  padding: 4px 8px;
}
.sequence-step {
  min-height: 56px;
  border: 1px solid #e5e9f0;
  border-radius: 9px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sequence-step > span {
  width: 29px;
  height: 29px;
  border-radius: 8px;
  background: #f0f2f6;
  color: #7c8799;
  display: grid;
  place-items: center;
}
.sequence-step > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.sequence-step small {
  color: #929bad;
  font-size: 6.5px;
}
.sequence-step strong {
  color: #4b576e;
  font-size: 8.5px;
  margin: 2px 0;
}
.sequence-step p {
  color: #8892a5;
  font-size: 7px;
  margin: 0;
}
.sequence-step.done > span {
  background: #e5f5ef;
  color: #258468;
}
.sequence-step.active {
  border-color: #bdc9ed;
  background: #f3f6ff;
}
.sequence-step.active > span {
  background: #e7edff;
  color: #4665c5;
}
.sequence-step.escalation > span {
  background: #fdecef;
  color: #c6536e;
}
.sequence-step > button {
  border: 0;
  background: transparent;
  color: #8c96a8;
}
.sequence-flow > i {
  display: block;
  width: 1px;
  height: 11px;
  background: #dfe4eb;
  margin: auto;
}
.guardrail {
  padding: 9px;
  border-radius: 8px;
  background: #f7f8fb;
  color: #708097;
  display: flex;
  gap: 7px;
  font-size: 7.5px;
}
.guardrail i {
  color: #28886b;
}

/* Calendar and visits */
.calendar-toolbar {
  min-height: 56px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.calendar-toolbar > div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.calendar-toolbar h2 {
  color: #3a465e;
  font-size: 11px;
  margin: 0 0 0 6px;
}
.cal-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #788399;
  font-size: 7.5px;
  margin-right: 6px;
}
.cal-legend i {
  width: 6px;
  height: 6px;
  border-radius: 2px;
}
.cal-legend.meeting i {
  background: #5a6fd0;
}
.cal-legend.visit i {
  background: #30a07d;
}
.cal-legend.call i {
  background: #dd9840;
}
.calendar-grid {
  display: grid;
  grid-template-columns: 55px repeat(7, 1fr);
  overflow-x: auto;
  min-width: 880px;
}
.time-column {
  padding-top: 47px;
  position: relative;
}
.time-column > span {
  position: absolute;
  top: 16px;
  left: 8px;
  color: #9aa2b1;
  font-size: 6px;
}
.time-column > div {
  height: 61px;
  padding: 0 7px;
  text-align: right;
  color: #9ba3b2;
  font-size: 6.5px;
  border-top: 1px solid #edf0f4;
}
.day-column {
  min-width: 105px;
  border-left: 1px solid #edf0f4;
}
.day-column.today {
  background: #fafbff;
}
.day-column header {
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-bottom: 1px solid #e9edf2;
  position: relative;
}
.day-column header span {
  color: #8e98a9;
  font-size: 7px;
  text-transform: uppercase;
}
.day-column header strong {
  color: #3f4b62;
  font-size: 12px;
}
.day-column header i {
  position: absolute;
  bottom: 2px;
  color: #4564c2;
  font-size: 6px;
  font-style: normal;
}
.day-slots {
  height: 610px;
  position: relative;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 60px,
    #edf0f4 60px,
    #edf0f4 61px
  );
}
.cal-event {
  position: absolute;
  left: 5px;
  right: 5px;
  border: 0;
  border-left: 3px solid;
  border-radius: 7px;
  padding: 5px;
  text-align: left;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cal-event small {
  font-size: 6.5px;
}
.cal-event strong {
  font-size: 7.5px;
  margin: 2px 0;
}
.cal-event span {
  font-size: 6.5px;
}
.cal-event.meeting {
  background: #edf0ff;
  border-color: #5b70cf;
  color: #40529c;
}
.cal-event.visit {
  background: #e7f6f0;
  border-color: #31a07d;
  color: #32705d;
}
.cal-event.call {
  background: #fff3e3;
  border-color: #db9a43;
  color: #8f6228;
}
.cal-event em {
  margin-top: 3px;
  font-size: 6px;
  font-style: normal;
}
.visit-list {
  display: grid;
  gap: 7px;
}
.visit-list article {
  min-height: 88px;
  border: 1px solid #e4e8ef;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 68px 1fr auto;
  overflow: hidden;
}
.visit-date {
  background: #f3f6fd;
  padding: 10px;
  display: grid;
  grid-template-columns: auto auto;
  align-content: center;
  justify-content: center;
  text-align: center;
}
.visit-date strong {
  color: #3857ae;
  font-size: 16px;
}
.visit-date small {
  color: #6d7ba4;
  font-size: 7px;
  align-self: center;
  margin-left: 3px;
}
.visit-date span {
  grid-column: 1/3;
  color: #5d6984;
  font-size: 7px;
  margin-top: 3px;
}
.visit-body {
  padding: 9px 11px;
}
.visit-facts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 7px;
  color: #7a869a;
  font-size: 7px;
}
.visit-facts i {
  color: #6079c2;
  margin-right: 4px;
}
.visit-actions {
  padding: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.transport-panel {
  padding: 17px;
}
.route-map {
  margin: 7px 0 12px;
  padding: 10px;
  border-radius: 10px;
  background: #f7f8fb;
}
.route-map > span {
  display: grid;
  grid-template-columns: 12px 1fr;
  grid-template-rows: auto auto;
  column-gap: 7px;
}
.route-map span i {
  grid-row: 1/3;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4770d3;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #4770d3;
  margin-top: 2px;
}
.route-map span.destination i {
  background: #32a17e;
  box-shadow: 0 0 0 2px #32a17e;
}
.route-map strong {
  color: #48546b;
  font-size: 8px;
}
.route-map small {
  color: #9099ab;
  font-size: 7px;
  margin-top: 2px;
}
.route-map > b {
  display: block;
  height: 19px;
  border-left: 1px dashed #aab4c5;
  margin-left: 4px;
}
.ride-card {
  padding: 10px;
  border: 1px solid #e1e6ee;
  border-radius: 9px;
  display: flex;
  gap: 9px;
}
.vehicle {
  width: 35px;
  height: 35px;
  border-radius: 9px;
  background: #111827;
  color: #fff;
  display: grid;
  place-items: center;
}
.ride-card div {
  display: flex;
  flex-direction: column;
}
.ride-card small {
  color: #969fae;
  font-size: 6.5px;
}
.ride-card strong {
  color: #414d64;
  font-size: 8.5px;
  margin: 2px 0;
}
.ride-card span {
  color: #8b95a7;
  font-size: 7px;
}
.transport-actions {
  display: flex;
  gap: 6px;
  margin: 10px 0;
}
.journey-note {
  display: flex;
  gap: 8px;
  padding: 9px;
  background: #edf5ff;
  color: #4c72b4;
  border-radius: 8px;
}
.journey-note span {
  display: flex;
  flex-direction: column;
}
.journey-note strong {
  color: #455d85;
  font-size: 8px;
}
.journey-note small {
  color: #748bad;
  font-size: 7px;
  margin-top: 2px;
}
.briefing-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.briefing-flow > div {
  flex: 1;
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto;
  gap: 0 8px;
  position: relative;
}
.briefing-flow > div > span {
  grid-row: 1/3;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #edf2ff;
  color: #4a67c5;
  display: grid;
  place-items: center;
}
.briefing-flow strong {
  color: #48546b;
  font-size: 8px;
}
.briefing-flow small {
  color: #919aac;
  font-size: 7px;
  margin-top: 2px;
}
.briefing-flow > div > i {
  position: absolute;
  right: 5px;
  top: 8px;
  color: #a0a9b7;
}

/* Templates, partners, documents, commercial */
.template-toolbar {
  min-height: 56px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.template-toolbar > div {
  display: flex;
  gap: 8px;
}
.template-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.template-card {
  padding: 15px;
}
.template-card-head {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 8px;
  align-items: center;
}
.template-card-head > span {
  width: 33px;
  height: 33px;
  border-radius: 9px;
  display: grid;
  place-items: center;
}
.template-card-head > span.whatsapp {
  background: #e4f6ee;
  color: #22906a;
}
.template-card-head > span.email {
  background: #eaf0ff;
  color: #4968c8;
}
.template-card-head > div {
  min-width: 0;
}
.template-card-head small {
  color: #919aac;
  font-size: 6.5px;
}
.template-card-head h2 {
  color: #3b475e;
  font-size: 10px;
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.template-preview {
  margin: 12px 0;
  padding: 10px;
  border-radius: 9px;
  background: #f8f9fb;
  border: 1px solid #e8ebf0;
  min-height: 104px;
}
.template-preview p {
  color: #69758a;
  font-size: 7.8px;
  line-height: 1.55;
  margin: 0 0 9px;
}
.template-preview div {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.template-preview span {
  padding: 2px 4px;
  border-radius: 4px;
  background: #e9eef9;
  color: #5b70b7;
  font-size: 6.5px;
}
.template-meta {
  display: flex;
  justify-content: space-between;
  color: #8c96a7;
  font-size: 7px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf0f4;
}
.template-meta i {
  margin-right: 3px;
}
.template-actions {
  display: flex;
  padding-top: 8px;
}
.template-actions button {
  flex: 1;
  border: 0;
  background: transparent;
  color: #637087;
  font-size: 7px;
}
.template-actions button + button {
  border-left: 1px solid #e5e9ef;
}
.partner-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.partner-name > span {
  width: 29px;
  height: 29px;
  border-radius: 8px;
  background: #eaf0ff;
  color: #4967c4;
  display: grid;
  place-items: center;
  font-size: 7px;
  font-weight: 750;
}
.partner-name div {
  display: flex;
  flex-direction: column;
}
.asset-list > div {
  min-height: 51px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #edf0f4;
}
.asset-list > div > span {
  width: 29px;
  height: 29px;
  border-radius: 8px;
  background: #edf2ff;
  color: #4c69c5;
  display: grid;
  place-items: center;
}
.asset-list > div > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.asset-list strong {
  color: #465269;
  font-size: 8.5px;
}
.asset-list small {
  color: #929bad;
  font-size: 7px;
}
.asset-list em {
  color: #546176;
  font-size: 7.5px;
  font-style: normal;
}
.asset-list button {
  border: 0;
  background: transparent;
  color: #7e899b;
}
.partner-upload {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: #f3f6ff;
  border: 1px solid #e0e6f8;
}
.partner-upload > span {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  color: #4c69c6;
  display: grid;
  place-items: center;
}
.partner-upload div {
  flex: 1;
}
.partner-upload strong {
  color: #445269;
  font-size: 9px;
}
.partner-upload p {
  color: #748097;
  font-size: 7.5px;
  line-height: 1.5;
  margin: 3px 0;
}
.validation-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.validation-rules span {
  color: #69768c;
  font-size: 7.5px;
}
.validation-rules i {
  color: #2e966f;
  margin-right: 5px;
}
.docs-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.doc-customers > button {
  width: 100%;
  min-height: 56px;
  border: 1px solid transparent;
  border-bottom-color: #edf0f4;
  background: #fff;
  padding: 8px;
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  gap: 8px;
  text-align: left;
}
.doc-customers > button.active {
  background: #f1f5ff;
  border-color: #dae4fb;
  border-radius: 9px;
}
.doc-customers button > div {
  display: flex;
  flex-direction: column;
}
.doc-customers strong {
  color: #414d64;
  font-size: 8.5px;
}
.doc-customers small {
  color: #919aac;
  font-size: 7px;
  margin: 2px 0 5px;
}
.doc-customers button > div > span {
  height: 3px;
  background: #e8ecf2;
  border-radius: 2px;
}
.doc-customers button > div > span i {
  display: block;
  height: 100%;
  background: #4d6fd1;
}
.doc-customers em {
  color: #4f608b;
  font-size: 8px;
  font-style: normal;
  text-align: right;
}
.doc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #edf0f4;
}
.doc-head h2 {
  color: #344158;
  font-size: 14px;
  margin: 3px 0;
}
.doc-head p {
  color: #8e98aa;
  font-size: 7.5px;
  margin: 0;
}
.doc-head > div:last-child {
  display: flex;
  gap: 6px;
}
.doc-progress {
  display: grid;
  grid-template-columns: 170px 1fr 35px;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
}
.doc-progress > div {
  display: flex;
  flex-direction: column;
}
.doc-progress strong {
  color: #435067;
  font-size: 8.5px;
}
.doc-progress small {
  color: #909aac;
  font-size: 7px;
  margin-top: 2px;
}
.doc-progress > span {
  height: 6px;
  background: #e8ecf2;
  border-radius: 4px;
}
.doc-progress > span i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4e6fd2, #38a17d);
  border-radius: 4px;
}
.doc-progress em {
  color: #3c4c6d;
  font-size: 9px;
  font-style: normal;
  text-align: right;
}
.doc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.doc-grid article {
  min-height: 54px;
  border: 1px solid #e4e8ef;
  border-radius: 9px;
  padding: 8px;
  display: grid;
  grid-template-columns: 30px 1fr auto 22px;
  gap: 7px;
  align-items: center;
}
.doc-grid article > span {
  width: 29px;
  height: 29px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.doc-grid article > span.verified {
  background: #e7f6f0;
  color: #278b6c;
}
.doc-grid article > span.review {
  background: #fff2df;
  color: #ca842c;
}
.doc-grid article > span.pending {
  background: #f0f2f6;
  color: #7f899c;
}
.doc-grid article > div {
  display: flex;
  flex-direction: column;
}
.doc-grid strong {
  color: #465269;
  font-size: 8px;
}
.doc-grid small {
  color: #929bad;
  font-size: 7px;
  margin-top: 2px;
}
.doc-audit {
  margin-top: 12px;
  padding: 10px;
  border-radius: 9px;
  background: #f3f6ff;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5471c4;
}
.doc-audit span {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.doc-audit strong {
  color: #475a88;
  font-size: 8px;
}
.doc-audit small {
  color: #7e8dac;
  font-size: 7px;
  margin-top: 2px;
}
.booking-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 14px;
}
.booking-list {
  display: grid;
  gap: 4px;
}
.booking-list > button {
  width: 100%;
  min-height: 58px;
  border: 1px solid transparent;
  border-bottom-color: #edf0f4;
  background: #fff;
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr auto 55px 15px;
  gap: 7px;
  align-items: center;
  text-align: left;
  color: #8d97a9;
}
.booking-list > button.active {
  background: #f2f5ff;
  border-color: #dbe4fa;
  border-radius: 9px;
}
.booking-list button > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.booking-list button > span small {
  font-size: 6.5px;
}
.booking-list button > strong {
  color: #435068;
  font-size: 9px;
  text-align: right;
}
.booking-title {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid #edf0f4;
}
.booking-title h2 {
  color: #334058;
  font-size: 15px;
  margin: 3px 0;
}
.booking-title p {
  color: #8c96a9;
  font-size: 8px;
  margin: 0;
}
.booking-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 13px 0;
}
.booking-steps button {
  min-height: 51px;
  border: 1px solid #e4e8ef;
  background: #fff;
  border-radius: 8px;
  padding: 7px;
  display: grid;
  grid-template-columns: 25px 1fr auto;
  gap: 7px;
  align-items: center;
  text-align: left;
}
.booking-steps button > span {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #eef1f5;
  color: #8791a3;
  display: grid;
  place-items: center;
  font-size: 7px;
}
.booking-steps button > div {
  display: flex;
  flex-direction: column;
}
.booking-steps strong {
  color: #4a566d;
  font-size: 8px;
}
.booking-steps small {
  color: #939cad;
  font-size: 7px;
  margin-top: 2px;
}
.booking-steps button.done > span {
  background: #e5f5ef;
  color: #29876b;
}
.booking-steps button.active {
  background: #f3f6ff;
  border-color: #bdc9ed;
}
.booking-steps button.active > span {
  background: #e5ecff;
  color: #4866c3;
}
.unit-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #e3e7ee;
  border-radius: 9px;
  overflow: hidden;
}
.unit-summary > div {
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.unit-summary > div + div {
  border-left: 1px solid #e8ebf0;
}
.unit-summary small {
  color: #929bad;
  font-size: 6.5px;
}
.unit-summary strong {
  color: #3e4a61;
  font-size: 10px;
  margin: 3px 0;
}
.unit-summary span {
  color: #8a94a7;
  font-size: 7px;
}
.booking-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 15px;
}
.payment-customer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 13px;
  border-bottom: 1px solid #edf0f4;
}
.payment-customer > div {
  flex: 1;
}
.payment-customer h2 {
  color: #344159;
  font-size: 14px;
  margin: 3px 0;
}
.payment-customer p {
  color: #8b95a8;
  font-size: 7.5px;
  margin: 0;
}
.payment-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #e4e8ef;
  border-radius: 9px;
  margin: 13px 0;
}
.payment-summary > div {
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.payment-summary > div + div {
  border-left: 1px solid #e7ebf0;
}
.payment-summary span {
  color: #8994a7;
  font-size: 7px;
}
.payment-summary strong {
  color: #3e4b63;
  font-size: 12px;
  margin-top: 3px;
}
.payment-summary small {
  color: #bb7a28;
  font-size: 6.5px;
}
.payment-table td strong {
  color: #445168;
  font-size: 8.5px;
}
.alert-timeline {
  display: grid;
}
.alert-timeline > div {
  min-height: 54px;
  display: grid;
  grid-template-columns: 29px 1fr auto;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid #edf0f4;
}
.alert-timeline > div > span {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff1de;
  color: #c68128;
  display: grid;
  place-items: center;
}
.alert-timeline > div > div {
  display: flex;
  flex-direction: column;
}
.alert-timeline strong {
  color: #465269;
  font-size: 8.5px;
}
.alert-timeline small {
  color: #929bad;
  font-size: 7px;
  margin-top: 2px;
}
.finance-note {
  margin-top: 12px;
  padding: 9px;
  border-radius: 8px;
  background: #f4f6fa;
  color: #6277ad;
  display: flex;
  gap: 7px;
}
.finance-note p {
  color: #7c8799;
  font-size: 7px;
  margin: 0;
  line-height: 1.5;
}
.post-timeline {
  padding: 5px 8px;
}
.post-timeline > div {
  min-height: 55px;
  display: grid;
  grid-template-columns: 29px 1fr auto;
  gap: 8px;
  align-items: center;
  position: relative;
}
.post-timeline > div > span {
  width: 27px;
  height: 27px;
  z-index: 1;
  border-radius: 50%;
  background: #edf0f5;
  color: #818c9f;
  display: grid;
  place-items: center;
  font-size: 7px;
}
.post-timeline > div.complete > span {
  background: #e5f5ef;
  color: #28866a;
}
.post-timeline > div.active > span {
  background: #e9efff;
  color: #4b68c6;
}
.post-timeline > div > div {
  display: flex;
  flex-direction: column;
}
.post-timeline strong {
  color: #465269;
  font-size: 8.5px;
}
.post-timeline small {
  color: #929bad;
  font-size: 7px;
  margin-top: 2px;
}
.post-timeline > div > i {
  position: absolute;
  top: 40px;
  bottom: -15px;
  left: 13px;
  width: 1px;
  background: #dfe4ec;
}
.service-list > div {
  min-height: 52px;
  border-bottom: 1px solid #edf0f4;
  display: grid;
  grid-template-columns: 29px 1fr auto 45px 18px;
  gap: 8px;
  align-items: center;
}
.ticket-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #edf2ff;
  color: #4b69c5;
  display: grid;
  place-items: center;
}
.service-list > div > div {
  display: flex;
  flex-direction: column;
}
.service-list small {
  color: #939cad;
  font-size: 7px;
}
.service-list strong {
  color: #455168;
  font-size: 8.5px;
  margin-top: 2px;
}
.service-list em {
  color: #a27433;
  font-size: 7px;
  font-style: normal;
}
.service-list button {
  border: 0;
  background: transparent;
  color: #9099aa;
}
.post-message {
  margin-top: 13px;
  padding: 11px;
  border-radius: 9px;
  background: #e9f7f1;
  color: #29906d;
  display: flex;
  gap: 9px;
}
.post-message div {
  flex: 1;
}
.post-message strong {
  color: #416557;
  font-size: 8.5px;
}
.post-message p {
  color: #6f8f83;
  font-size: 7.5px;
  line-height: 1.5;
  margin: 3px 0 0;
}

/* Marketing and reports */
.marketing-chart {
  height: 250px;
  display: grid;
  grid-template-columns: 35px 1fr;
  position: relative;
  padding-top: 9px;
}
.chart-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #9aa2b1;
  font-size: 6.5px;
  padding-bottom: 25px;
}
.chart-bars {
  border-left: 1px solid #e2e6ed;
  border-bottom: 1px solid #e2e6ed;
  background: repeating-linear-gradient(
    to bottom,
    #edf0f4 0,
    #edf0f4 1px,
    transparent 1px,
    transparent 49px
  );
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 215px;
}
.chart-bars > div {
  height: 100%;
  width: 15%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.chart-bars > div > div {
  height: 190px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
}
.chart-bars span {
  width: 17px;
  background: linear-gradient(180deg, #4e71d7, #6f86d7);
  border-radius: 4px 4px 0 0;
}
.chart-bars i {
  width: 9px;
  background: #e59c3c;
  border-radius: 3px 3px 0 0;
}
.chart-bars small {
  height: 21px;
  padding-top: 6px;
  color: #8b95a7;
  font-size: 7px;
}
.chart-legend {
  position: absolute;
  right: 4px;
  top: 3px;
  display: flex;
  gap: 10px;
  color: #7f899c;
  font-size: 7px;
}
.chart-legend i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  margin-right: 3px;
}
.chart-legend i.blue {
  background: #5575d1;
}
.chart-legend i.orange {
  background: #e19b3f;
}
.recommend-list {
  display: grid;
  gap: 7px;
}
.recommend-list > div {
  display: flex;
  gap: 8px;
  padding: 9px;
  border: 1px solid #e6e9ef;
  border-radius: 9px;
}
.recommend-list > div > span {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #edf2ff;
  color: #4c69c4;
  display: grid;
  place-items: center;
}
.recommend-list > div > div {
  flex: 1;
}
.recommend-list strong {
  color: #465269;
  font-size: 8.5px;
}
.recommend-list p {
  color: #7d889b;
  font-size: 7.2px;
  line-height: 1.5;
  margin: 3px 0 5px;
}
.recommend-list small {
  padding: 2px 5px;
  border-radius: 5px;
  background: #f0ecfd;
  color: #745bc1;
  font-size: 6.5px;
}
.source-score {
  display: inline-block;
  width: 55px;
  height: 4px;
  background: #e8ecf2;
  border-radius: 3px;
  overflow: hidden;
  margin-right: 5px;
}
.source-score i {
  display: block;
  height: 100%;
  background: #4e70d2;
}
.report-tabs {
  min-height: 53px;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.report-tabs > button:not(.btn) {
  border: 0;
  background: transparent;
  color: #778399;
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 8.5px;
  font-weight: 650;
}
.report-tabs > button.active {
  background: #edf2ff;
  color: #3159c7;
}
.report-tabs .btn {
  margin-left: auto;
}
.report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.65fr);
  gap: 14px;
}
.line-chart {
  height: 260px;
  position: relative;
  padding: 15px 5px 0;
}
.line-chart .grid-lines {
  position: absolute;
  inset: 15px 5px 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.line-chart .grid-lines i {
  border-top: 1px solid #edf0f4;
}
.line-chart svg {
  width: 100%;
  height: 220px;
  position: relative;
  z-index: 1;
}
.line-chart > div:last-child {
  display: flex;
  justify-content: space-between;
  color: #8c96a8;
  font-size: 7px;
  padding: 0 14px;
}
.project-performance {
  display: grid;
  gap: 13px;
  padding-top: 5px;
}
.project-performance > div > div {
  display: flex;
  justify-content: space-between;
}
.project-performance strong {
  color: #455168;
  font-size: 8.5px;
}
.project-performance span {
  color: #526078;
  font-size: 8px;
}
.project-performance i {
  display: block;
  height: 6px;
  background: #e8ecf2;
  border-radius: 4px;
  margin: 5px 0;
}
.project-performance i span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4e70d3, #7c6ac6);
  border-radius: 4px;
}
.project-performance small {
  color: #919aac;
  font-size: 7px;
}
.leaderboard > div {
  min-height: 49px;
  display: grid;
  grid-template-columns: 22px 27px 1fr 55px 65px 42px;
  gap: 7px;
  align-items: center;
  border-bottom: 1px solid #edf0f4;
}
.rank {
  color: #8993a6;
  font-size: 9px;
  text-align: center;
}
.leaderboard > div > div {
  display: flex;
  flex-direction: column;
}
.leaderboard span {
  display: flex;
  flex-direction: column;
}
.leaderboard strong {
  color: #465269;
  font-size: 8px;
}
.leaderboard small {
  color: #929bad;
  font-size: 6.5px;
  margin-top: 2px;
}
.leaderboard em {
  padding: 3px 5px;
  border-radius: 6px;
  background: #e8f5f0;
  color: #2a876b;
  font-size: 7px;
  font-style: normal;
  text-align: center;
}
.quality-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.quality-grid > div {
  padding: 10px;
  border: 1px solid #e5e9ef;
  border-radius: 9px;
  display: grid;
  grid-template-columns: 1fr auto;
}
.quality-grid small {
  grid-column: 1/3;
  color: #8791a4;
  font-size: 7px;
}
.quality-grid strong {
  color: #39465e;
  font-size: 13px;
  margin-top: 4px;
}
.quality-grid span {
  color: #28866a;
  font-size: 7px;
  align-self: end;
}

/* Team, roles, integrations */
.availability-banner {
  min-height: 70px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.availability-banner > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.availability-banner > div > span {
  width: 39px;
  height: 39px;
  border-radius: 10px;
  background: #e7f5ef;
  color: #288d6c;
  display: grid;
  place-items: center;
}
.availability-banner > div > div {
  display: flex;
  flex-direction: column;
}
.availability-banner small {
  color: #6f7f9d;
  font-size: 7px;
  font-weight: 700;
}
.availability-banner strong {
  color: #36435b;
  font-size: 10.5px;
  margin: 2px 0;
}
.availability-banner p {
  color: #8a94a7;
  font-size: 7.5px;
  margin: 0;
}
.staff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.staff-grid article {
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  padding: 11px;
}
.staff-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.team-avatar.large {
  width: 36px;
  height: 36px;
  font-size: 9px;
}
.staff-head > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.staff-head strong {
  color: #3d4960;
  font-size: 9px;
}
.staff-head small {
  color: #929bad;
  font-size: 7px;
  margin-top: 2px;
}
.staff-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}
.staff-status > span:last-child {
  color: #8c96a8;
  font-size: 7px;
}
.staff-status > span i {
  margin-right: 4px;
}
.staff-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #e8ebf0;
  border-radius: 8px;
}
.staff-stats > div {
  padding: 7px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.staff-stats > div + div {
  border-left: 1px solid #e8ebf0;
}
.staff-stats strong {
  color: #425067;
  font-size: 10px;
}
.staff-stats small {
  color: #949dad;
  font-size: 6px;
  margin-top: 2px;
}
.capacity {
  margin: 9px 0;
}
.capacity > span {
  display: flex;
  justify-content: space-between;
  color: #8892a5;
  font-size: 7px;
}
.capacity strong {
  color: #536078;
}
.capacity > i {
  display: block;
  height: 4px;
  background: #e8ecf2;
  border-radius: 3px;
  margin-top: 4px;
}
.capacity > i span {
  display: block;
  height: 100%;
  background: #526fc9;
  border-radius: 3px;
}
.skills {
  display: flex;
  gap: 4px;
  margin-bottom: 9px;
}
.skills span {
  padding: 3px 5px;
  border-radius: 5px;
  background: #f0f2f6;
  color: #748095;
  font-size: 6.5px;
}
.rule-chain {
  display: flex;
  align-items: center;
}
.rule-chain > div {
  flex: 1;
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 7px;
  position: relative;
}
.rule-chain > div > span {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #eaf0ff;
  color: #4867c7;
  display: grid;
  place-items: center;
  font-size: 7px;
  font-weight: 700;
}
.rule-chain > div > div {
  display: flex;
  flex-direction: column;
}
.rule-chain strong {
  color: #465269;
  font-size: 7.5px;
}
.rule-chain small {
  color: #929bad;
  font-size: 6.5px;
  margin-top: 2px;
}
.rule-chain > div > i {
  position: absolute;
  right: 5px;
  top: 7px;
  color: #a4acb9;
}
.role-toolbar {
  min-height: 66px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.role-toolbar > div {
  display: flex;
  align-items: center;
  gap: 9px;
}
.role-toolbar > div:first-child > span {
  width: 37px;
  height: 37px;
  border-radius: 10px;
  background: #e7f5f0;
  color: #29876a;
  display: grid;
  place-items: center;
}
.role-toolbar > div > div {
  display: flex;
  flex-direction: column;
}
.role-toolbar strong {
  color: #3c4960;
  font-size: 9.5px;
}
.role-toolbar small {
  color: #8f99aa;
  font-size: 7px;
  margin-top: 2px;
}
.roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.role-card {
  padding: 15px;
}
.role-card > div:first-child {
  display: flex;
  justify-content: space-between;
}
.role-card > div:first-child > span {
  width: 37px;
  height: 37px;
  border-radius: 10px;
  color: #fff;
  display: grid;
  place-items: center;
}
.role-card h2 {
  color: #3b475f;
  font-size: 10px;
  margin: 10px 0 3px;
}
.role-card p {
  color: #8d97a9;
  font-size: 7.5px;
  margin: 0 0 11px;
}
.role-card > div:nth-child(4) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #e7eaf0;
  border-radius: 8px;
}
.role-card > div:nth-child(4) span {
  padding: 7px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.role-card > div:nth-child(4) span + span {
  border-left: 1px solid #e7eaf0;
}
.role-card > div:nth-child(4) strong {
  color: #435067;
  font-size: 9px;
}
.role-card > div:nth-child(4) small {
  color: #929bad;
  font-size: 6px;
  margin-top: 2px;
}
.role-card > button {
  width: 100%;
  margin-top: 10px;
  padding: 6px;
  border: 0;
  background: #f2f5fc;
  border-radius: 7px;
  color: #526ab3;
  font-size: 7.5px;
}
.permission {
  padding: 3px 5px;
  border-radius: 5px;
  font-size: 6.5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.permission.full {
  background: #e7f5ef;
  color: #28866a;
}
.permission.view {
  background: #eaf0ff;
  color: #4b67c0;
}
.permission.limited {
  background: #fff2df;
  color: #b7792a;
}
.permission.none {
  background: #f0f2f5;
  color: #8a93a3;
}
.integration-summary {
  min-height: 76px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.integration-summary > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.integration-score {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: conic-gradient(#32a17d 0 96%, #e7ebf1 96%);
  display: grid;
  place-items: center;
  color: #277c63;
  font-size: 14px;
  font-weight: 750;
  position: relative;
}
.integration-score::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #fff;
}
.integration-score small,
.integration-score {
}
.integration-score small {
  font-size: 7px;
}
.integration-score::before {
  content: "96%";
  z-index: 1;
  font-size: 11px;
}
.integration-score {
  font-size: 0;
}
.integration-summary > div > div {
  display: flex;
  flex-direction: column;
}
.integration-summary small {
  color: #7382a0;
  font-size: 7px;
}
.integration-summary strong {
  color: #38455d;
  font-size: 10px;
  margin: 2px 0;
}
.integration-summary p {
  color: #8993a6;
  font-size: 7.5px;
  margin: 0;
}
.integration-summary > div:last-child > span {
  color: #8791a3;
  font-size: 7px;
  margin-right: 6px;
}
.integration-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.integration-card {
  padding: 14px;
}
.integration-head {
  display: flex;
  justify-content: space-between;
}
.integration-head > span {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 15px;
}
.integration-card h2 {
  color: #39455c;
  font-size: 10px;
  margin: 10px 0 2px;
}
.integration-card > p {
  color: #8f99aa;
  font-size: 7px;
  margin: 0 0 11px;
}
.integration-card > div:nth-child(4) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #e7eaf0;
  border-radius: 8px;
}
.integration-card > div:nth-child(4) span {
  padding: 7px;
  display: flex;
  flex-direction: column;
  color: #929bad;
  font-size: 6.5px;
}
.integration-card > div:nth-child(4) span + span {
  border-left: 1px solid #e7eaf0;
}
.integration-card > div:nth-child(4) strong {
  color: #455168;
  font-size: 8px;
  margin-top: 2px;
}
.integration-actions {
  display: flex;
  margin-top: 9px;
}
.integration-actions > button:not(.icon-button) {
  flex: 1;
  border: 0;
  background: transparent;
  color: #5268ac;
  font-size: 7px;
}
.integration-actions > button + button {
  border-left: 1px solid #e5e9ef;
}
.api-console {
  display: grid;
  gap: 7px;
}
.api-console > div {
  min-height: 54px;
  border: 1px solid #e4e8ef;
  border-radius: 9px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.api-console > div > span {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #edf2ff;
  color: #4b68c5;
  display: grid;
  place-items: center;
}
.api-console > div > div {
  flex: 1;
  display: grid;
  grid-template-columns: 170px 1fr;
  grid-template-rows: auto auto;
}
.api-console strong {
  color: #465269;
  font-size: 8.5px;
}
.api-console small {
  color: #929bad;
  font-size: 7px;
}
.api-console code {
  grid-column: 2;
  grid-row: 1/3;
  align-self: center;
  padding: 6px;
  border-radius: 6px;
  background: #f4f6f9;
  color: #536077;
  font-size: 7px;
}

/* Automation, settings, architecture */
.automation-banner {
  min-height: 82px;
  padding: 14px 16px;
  border-radius: 13px;
  background: linear-gradient(105deg, #293f99, #6652b8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 22px rgba(49, 65, 145, 0.18);
}
.automation-banner > div {
  display: flex;
  align-items: center;
  gap: 11px;
}
.automation-banner > div > span {
  width: 43px;
  height: 43px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  font-size: 17px;
}
.automation-banner > div > div {
  display: flex;
  flex-direction: column;
}
.automation-banner small {
  color: #cfd9ff;
  font-size: 7px;
  font-weight: 700;
}
.automation-banner strong {
  font-size: 11px;
  margin: 3px 0;
}
.automation-banner p {
  color: #d6dcfa;
  font-size: 7.5px;
  margin: 0;
}
.automation-list {
  display: grid;
  gap: 5px;
}
.automation-list article {
  min-height: 64px;
  border: 1px solid #e5e9ef;
  border-radius: 9px;
  padding: 8px;
  display: grid;
  grid-template-columns: 32px 34px 1fr 70px 60px auto 22px;
  gap: 8px;
  align-items: center;
}
.automation-symbol {
  width: 33px;
  height: 33px;
  border-radius: 9px;
  background: #eaf0ff;
  color: #4a68c5;
  display: grid;
  place-items: center;
}
.automation-symbol.draft {
  background: #f0f2f5;
  color: #8690a2;
}
.automation-list article > div {
  display: flex;
  flex-direction: column;
}
.automation-list strong {
  color: #424f66;
  font-size: 8.5px;
}
.automation-list small,
.automation-list p {
  color: #8993a6;
  font-size: 7px;
  margin: 2px 0 0;
}
.automation-list b {
  color: #647087;
  font-size: 6px;
  margin-right: 3px;
}
.run-stat {
  display: flex;
  flex-direction: column;
}
.run-stat strong {
  font-size: 8.5px;
}
.run-stat small {
  font-size: 6.5px;
}
.visual-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.visual-flow > div {
  flex: 1;
  display: grid;
  grid-template-columns: 31px 1fr;
  grid-template-rows: auto auto;
  gap: 0 7px;
  position: relative;
}
.visual-flow > div > span {
  grid-row: 1/3;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #edf2ff;
  color: #4b68c5;
  display: grid;
  place-items: center;
}
.visual-flow small {
  color: #939cad;
  font-size: 6px;
  text-transform: uppercase;
}
.visual-flow strong {
  color: #455168;
  font-size: 7.5px;
  margin-top: 2px;
}
.visual-flow > div > i {
  position: absolute;
  right: 4px;
  top: 8px;
  color: #a1aab9;
}
.safeguards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.safeguards label {
  color: #647086;
  font-size: 7.5px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.safeguards input {
  accent-color: #315bd6;
}
.settings-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.settings-nav {
  padding: 8px;
  position: sticky;
  top: 92px;
}
.settings-nav button {
  width: 100%;
  height: 38px;
  border: 0;
  background: #fff;
  border-radius: 7px;
  padding: 0 9px;
  display: grid;
  grid-template-columns: 18px 1fr 10px;
  gap: 7px;
  align-items: center;
  text-align: left;
  color: #69758a;
  font-size: 8.5px;
}
.settings-nav button.active {
  background: #edf2ff;
  color: #3159c7;
  font-weight: 700;
}
.settings-nav button i:last-child {
  font-size: 7px;
}
.settings-panel {
  overflow: hidden;
}
.settings-head {
  min-height: 80px;
  padding: 15px 18px;
  border-bottom: 1px solid #e8ecf1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.settings-head h2 {
  color: #354158;
  font-size: 15px;
  margin: 3px 0;
}
.settings-head p {
  color: #8e98aa;
  font-size: 7.5px;
  margin: 0;
}
.settings-form {
  padding: 18px;
}
.settings-section {
  max-width: 850px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #edf0f4;
}
.settings-section h3 {
  color: #47536a;
  font-size: 10px;
  margin: 0 0 11px;
}
.setting-switch {
  display: grid;
  grid-template-columns: 1fr 35px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #eff2f5;
  position: relative;
}
.setting-switch > span {
  display: flex;
  flex-direction: column;
}
.setting-switch strong {
  color: #4a566d;
  font-size: 8.5px;
}
.setting-switch small {
  color: #939cad;
  font-size: 7px;
  margin-top: 2px;
}
.setting-switch input {
  display: none;
}
.setting-switch > i {
  width: 31px;
  height: 17px;
  border-radius: 9px;
  background: #d9dfe8;
  position: relative;
}
.setting-switch > i::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: 0.15s;
}
.setting-switch input:checked + i {
  background: #315bd6;
}
.setting-switch input:checked + i::after {
  left: 16px;
}
.settings-section .input-group-text {
  font-size: 7.5px;
  color: #7a8598;
  background: #f4f6f9;
  border-color: #d9e0ec;
}
.architecture-hero {
  min-height: 180px;
  border-radius: 15px;
  padding: 26px;
  background: linear-gradient(115deg, #13245c, #314da8 65%, #5868cc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(26, 47, 115, 0.22);
}
.architecture-hero > div:first-child {
  max-width: 690px;
}
.prototype-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #dce4ff;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: 0.6px;
}
.architecture-hero h2 {
  font-size: 24px;
  letter-spacing: -0.4px;
  margin: 12px 0 7px;
}
.architecture-hero p {
  color: #d5ddfb;
  font-size: 9px;
  line-height: 1.6;
  margin: 0;
}
.architecture-stat {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 12px;
  padding: 15px 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.architecture-stat strong {
  font-size: 18px;
}
.architecture-stat span {
  color: #d5dcf8;
  font-size: 8px;
  align-self: center;
}
.page-map {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
}
.page-map article {
  padding: 12px;
  border: 1px solid #e2e7ef;
  border-radius: 10px;
  background: #fafbfc;
}
.page-map article > span {
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: #eaf0ff;
  color: #4b67c4;
  display: grid;
  place-items: center;
  font-size: 7px;
  font-weight: 750;
}
.page-map h3 {
  color: #3f4c64;
  font-size: 9px;
  margin: 9px 0 7px;
}
.page-map article > div {
  display: grid;
  gap: 5px;
}
.page-map small {
  color: #768196;
  font-size: 7px;
}
.page-map small i {
  color: #2b8d6d;
  margin-right: 4px;
}
.architecture-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.entity-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px 0 12px;
}
.entity-cloud span {
  padding: 6px 8px;
  border-radius: 7px;
  background: #f0f2f6;
  color: #647086;
  font-size: 7.5px;
  border: 1px solid #e5e8ee;
}
.entity-cloud span.core {
  background: #edf2ff;
  color: #4b66bc;
  border-color: #dfe6fa;
}
.entity-cloud span.primary {
  background: #315bd6;
  color: #fff;
  border-color: #315bd6;
}
.data-rule {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-radius: 9px;
  background: #f2f5ff;
  color: #536fc4;
}
.data-rule p {
  color: #687796;
  font-size: 7.5px;
  line-height: 1.5;
  margin: 0;
}
.data-rule strong {
  color: #465d92;
}
.design-tokens {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}
.design-tokens > div {
  display: flex;
  flex-direction: column;
}
.design-tokens small {
  color: #929bad;
  font-size: 6px;
}
.design-tokens span {
  height: 29px;
  border-radius: 6px;
  margin: 4px 0;
}
.design-tokens code {
  color: #68748a;
  font-size: 6.5px;
}
.component-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
}
.component-tags span {
  padding: 5px 7px;
  border-radius: 6px;
  background: #f0f2f6;
  color: #68748a;
  font-size: 7px;
}
.event-contract {
  display: flex;
  align-items: center;
  gap: 7px;
}
.event-contract > div:not(.journey-target) {
  flex: 1;
  display: grid;
  grid-template-columns: 31px 1fr;
  grid-template-rows: auto auto;
  gap: 0 7px;
}
.event-contract > div > span {
  grid-row: 1/3;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.event-contract span.ai {
  background: #f0ebfd;
  color: #7258c4;
}
.event-contract span.human {
  background: #e8f3ff;
  color: #3e75b0;
}
.event-contract span.system {
  background: #e7f5ef;
  color: #27876a;
}
.event-contract span.commercial {
  background: #fff1de;
  color: #c4812b;
}
.event-contract strong {
  color: #465269;
  font-size: 8px;
}
.event-contract small {
  color: #929bad;
  font-size: 6.5px;
  line-height: 1.4;
}
.event-contract > i {
  color: #9fa8b6;
}
.journey-target {
  min-width: 220px;
  padding: 10px;
  border-radius: 9px;
  background: #243f97;
  display: grid !important;
  grid-template-columns: 33px 1fr !important;
  grid-template-rows: auto auto !important;
  color: #fff;
}
.journey-target > span {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}
.journey-target strong {
  color: #fff;
}
.journey-target small {
  color: #d6def8;
}

/* AI voice, mailbox, expenses and team groups */
.ai-voice-strip {
  min-height: 76px;
  padding: 11px 14px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto minmax(190px, 0.55fr) auto;
  gap: 14px;
  align-items: center;
}
.ai-voice-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ai-voice-brand > span {
  width: 39px;
  height: 39px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ebe8ff, #e1efff);
  color: #6556c5;
  display: grid;
  place-items: center;
  font-size: 16px;
}
.ai-voice-brand > div {
  display: flex;
  flex-direction: column;
}
.ai-voice-brand small {
  color: #7665bb;
  font-size: 6.5px;
  font-weight: 750;
}
.ai-voice-brand strong {
  color: #3e4a62;
  font-size: 9.5px;
  margin: 2px 0;
}
.ai-voice-brand p {
  color: #8a94a7;
  font-size: 7px;
  margin: 0;
}
.ai-voice-stats {
  display: flex;
  border: 1px solid #e5e9ef;
  border-radius: 8px;
}
.ai-voice-stats span {
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.ai-voice-stats span + span {
  border-left: 1px solid #e5e9ef;
}
.ai-voice-stats strong {
  color: #415067;
  font-size: 10px;
}
.ai-voice-stats small {
  color: #939cad;
  font-size: 6px;
}
.ai-voice-safety {
  display: flex;
  gap: 7px;
  color: #28866a;
}
.ai-voice-safety > span {
  display: flex;
  flex-direction: column;
}
.ai-voice-safety strong {
  color: #4d655d;
  font-size: 7.5px;
}
.ai-voice-safety small {
  color: #81978f;
  font-size: 6.5px;
  margin-top: 2px;
}
.mailbox-layout {
  height: calc(100vh - 155px);
  min-height: 650px;
  display: grid;
  grid-template-columns: 170px 300px minmax(0, 1fr);
  gap: 1px;
  background: #e1e6ee;
  border: 1px solid #dfe4ed;
  border-radius: 13px;
  overflow: hidden;
}
.mailbox-layout > .surface {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.mailbox-folders {
  padding: 14px 9px;
}
.mailbox-folders > button:not(.btn) {
  width: 100%;
  height: 35px;
  border: 0;
  background: #fff;
  border-radius: 7px;
  padding: 0 8px;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 7px;
  align-items: center;
  text-align: left;
  color: #6f7b90;
  font-size: 8px;
}
.mailbox-folders > button.active {
  background: #edf2ff;
  color: #3159c7;
  font-weight: 700;
}
.mailbox-folders em {
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #e8edf7;
  color: #536aa8;
  display: grid;
  place-items: center;
  font-size: 6.5px;
  font-style: normal;
}
.mailbox-search {
  height: 44px;
  padding: 0 10px;
  border-bottom: 1px solid #e8ecf2;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #9099ab;
}
.mailbox-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  font-size: 8px;
}
.mailbox-search button {
  border: 0;
  background: transparent;
  color: #8791a3;
}
.mailbox-list {
  overflow-y: auto;
}
.mailbox-list > button {
  width: 100%;
  min-height: 105px;
  border: 0;
  border-bottom: 1px solid #edf0f4;
  background: #fff;
  padding: 10px;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  text-align: left;
}
.mailbox-list > button.active {
  background: #f0f4ff;
  box-shadow: inset 3px 0 #4164cb;
}
.mailbox-list button > div {
  min-width: 0;
}
.mailbox-list button > div > strong {
  color: #445168;
  font-size: 8.5px;
  display: flex;
  justify-content: space-between;
}
.mailbox-list time {
  color: #939cad;
  font-size: 6.5px;
  font-weight: 400;
}
.mailbox-list h3 {
  color: #566278;
  font-size: 8px;
  margin: 5px 0 3px;
}
.mailbox-list p {
  color: #8690a3;
  font-size: 7px;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mailbox-list button > div > span {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 5px;
  border-radius: 5px;
  background: #eceffc;
  color: #596db0;
  font-size: 6.5px;
}
.mail-reader {
  padding: 18px;
  overflow-y: auto;
}
.mail-reader-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 13px;
  border-bottom: 1px solid #e8ecf2;
}
.mail-reader-head h2 {
  color: #334058;
  font-size: 15px;
  margin: 3px 0;
}
.mail-reader-head p {
  color: #8b95a8;
  font-size: 7.5px;
  margin: 0;
}
.mail-reader-head > div:last-child {
  display: flex;
}
.mail-sender {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 0;
}
.mail-sender > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mail-sender strong {
  color: #435067;
  font-size: 8.5px;
}
.mail-sender small {
  color: #929bad;
  font-size: 7px;
  margin-top: 2px;
}
.mail-ai-summary {
  display: flex;
  gap: 8px;
  padding: 11px;
  border-radius: 9px;
  background: #f1f4ff;
  border: 1px solid #e1e6f8;
  color: #685ac0;
}
.mail-ai-summary > div {
  flex: 1;
}
.mail-ai-summary strong {
  color: #475783;
  font-size: 8.5px;
}
.mail-ai-summary p {
  color: #7180a2;
  font-size: 7.5px;
  line-height: 1.5;
  margin: 3px 0 0;
}
.mail-ai-summary button {
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: #556ab1;
  padding: 5px 8px;
  font-size: 7px;
  align-self: center;
}
.mail-body {
  padding: 19px 9px;
  color: #5f6b81;
  font-size: 8.5px;
  line-height: 1.7;
}
.mail-journey {
  margin-top: 10px;
  padding: 10px;
  border-radius: 9px;
  background: #e9f6f1;
  color: #288a6c;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mail-journey > span {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mail-journey strong {
  color: #45665a;
  font-size: 8px;
}
.mail-journey small {
  color: #779387;
  font-size: 7px;
  margin-top: 2px;
}
.expense-bars {
  display: grid;
  gap: 11px;
  padding: 5px 0;
}
.expense-bars > div {
  display: grid;
  grid-template-columns: 120px 1fr 55px 30px;
  gap: 8px;
  align-items: center;
}
.expense-bars > div > span {
  color: #657187;
  font-size: 8px;
}
.expense-bars > div > i {
  height: 7px;
  background: #e9edf3;
  border-radius: 4px;
  overflow: hidden;
}
.expense-bars > div > i b {
  display: block;
  height: 100%;
  border-radius: 4px;
}
.expense-bars strong {
  color: #465269;
  font-size: 8px;
  text-align: right;
}
.expense-bars small {
  color: #929bad;
  font-size: 7px;
  text-align: right;
}
.expense-insight {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-radius: 9px;
  background: #e9f6f1;
  color: #298a6b;
  margin-bottom: 7px;
}
.expense-insight div {
  flex: 1;
}
.expense-insight strong {
  color: #44665a;
  font-size: 8.5px;
}
.expense-insight p {
  color: #759185;
  font-size: 7.2px;
  line-height: 1.5;
  margin: 3px 0 0;
}
.setting-switch.compact {
  padding: 7px 0;
}
.team-group-banner {
  min-height: 66px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.team-group-banner > div {
  display: flex;
  align-items: center;
  gap: 9px;
}
.team-group-banner > div > span {
  width: 37px;
  height: 37px;
  border-radius: 10px;
  background: #edf2ff;
  color: #4968c7;
  display: grid;
  place-items: center;
}
.team-group-banner > div > div {
  display: flex;
  flex-direction: column;
}
.team-group-banner strong {
  color: #3e4b62;
  font-size: 9.5px;
}
.team-group-banner small {
  color: #8e98aa;
  font-size: 7.5px;
  margin-top: 2px;
}
.team-group-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.group-card {
  padding: 14px;
}
.group-head {
  display: flex;
  justify-content: space-between;
}
.group-card h2 {
  color: #3c4860;
  font-size: 10px;
  margin: 9px 0;
}
.group-lead {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px;
  background: #f7f8fb;
  border-radius: 8px;
}
.group-lead > span {
  width: 27px;
  height: 27px;
  border-radius: 7px;
  background: #dfe6f7;
  color: #4a61a2;
  display: grid;
  place-items: center;
  font-size: 7px;
  font-weight: 700;
}
.group-lead > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.group-lead small {
  color: #949dae;
  font-size: 6px;
}
.group-lead strong {
  color: #47536a;
  font-size: 8px;
  margin-top: 2px;
}
.group-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #e6eaf0;
  border-radius: 8px;
  margin: 9px 0;
}
.group-stats > span {
  padding: 7px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.group-stats > span + span {
  border-left: 1px solid #e6eaf0;
}
.group-stats strong {
  color: #435067;
  font-size: 9px;
}
.group-stats small {
  color: #929bad;
  font-size: 6px;
  margin-top: 2px;
}
.team-flow {
  display: flex;
  align-items: center;
}
.team-flow > div {
  flex: 1;
  display: grid;
  grid-template-columns: 31px 1fr;
  grid-template-rows: auto auto;
  gap: 0 7px;
  position: relative;
}
.team-flow > div > span {
  grid-row: 1/3;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #edf2ff;
  color: #4b68c5;
  display: grid;
  place-items: center;
}
.team-flow strong {
  color: #465269;
  font-size: 8px;
}
.team-flow small {
  color: #929bad;
  font-size: 6.5px;
  margin-top: 2px;
}
.team-flow > div > i {
  position: absolute;
  right: 5px;
  top: 8px;
  color: #9da7b7;
}

@media (max-width: 1200px) {
  :root {
    --sidebar-w: 225px;
  }
  .content-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  .kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .kpi-grid .kpi-card:nth-child(n + 4) {
    grid-column: span 1;
  }
  .lead-layout {
    grid-template-columns: minmax(0, 1fr) 250px;
  }
  .profile div,
  .profile > i,
  .breadcrumb-line {
    display: none;
  }
  .profile {
    min-width: auto;
  }
  .qualification-layout {
    grid-template-columns: 230px minmax(0, 1fr);
  }
  .qual-action {
    grid-column: 1 / -1;
  }
  .inbox-shell {
    grid-template-columns: 250px minmax(390px, 1fr);
  }
  .chat-context {
    display: none;
  }
  .recordings-layout {
    grid-template-columns: 270px minmax(0, 1fr);
  }
  .intelligence-card {
    grid-column: 1 / -1;
  }
  .integration-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-map {
    grid-template-columns: repeat(3, 1fr);
  }
  .mailbox-layout {
    grid-template-columns: 150px 270px minmax(0, 1fr);
  }
  .team-group-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ai-voice-strip {
    grid-template-columns: minmax(260px, 1fr) auto auto;
  }
  .ai-voice-safety {
    display: none;
  }
}

@media (max-width: 920px) {
  .sidebar {
    transform: translateX(-102%);
    transition: transform 0.22s ease;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    z-index: 35;
    inset: 0;
    border: 0;
    background: rgba(8, 16, 44, 0.45);
  }
  .app-main {
    margin-left: 0;
  }
  .mobile-menu {
    display: block;
  }
  .topbar {
    padding: 0 17px;
    gap: 12px;
  }
  .global-search {
    width: auto;
    flex: 1;
    max-width: 420px;
    margin: 0 auto;
  }
  .help-button {
    display: none;
  }
  .dashboard-grid,
  .dashboard-grid.second {
    grid-template-columns: 1fr;
  }
  .kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .lead-layout {
    grid-template-columns: 1fr;
  }
  .lead-sidebar {
    grid-template-columns: repeat(3, 1fr);
  }
  .lead-hero {
    flex-wrap: wrap;
  }
  .lead-actions {
    margin-left: auto;
  }
  .metric-strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .metric-strip > div:nth-child(4) {
    border-left: 0;
    border-top: 1px solid #edf0f5;
  }
  .metric-strip > div:nth-child(5) {
    border-top: 1px solid #edf0f5;
  }
  .list-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .list-toolbar > div:last-child {
    width: 100%;
  }
  .table-search {
    flex: 1;
  }
  .module-metrics.four {
    grid-template-columns: repeat(2, 1fr);
  }
  .module-grid.two,
  .module-grid.call-grid,
  .module-grid.visit-grid,
  .module-grid.payment-grid,
  .module-grid.post-grid,
  .module-grid.marketing-grid,
  .report-grid,
  .architecture-grid {
    grid-template-columns: 1fr;
  }
  .builder-shell {
    grid-template-columns: 180px minmax(0, 1fr);
  }
  .builder-settings {
    grid-column: 1 / -1;
    position: static;
  }
  .inbox-shell {
    grid-template-columns: 220px minmax(360px, 1fr);
  }
  .recordings-layout,
  .docs-layout,
  .booking-layout,
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .qualification-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .roles-grid,
  .template-grid,
  .staff-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .integration-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .doc-customers,
  .settings-nav {
    position: static;
  }
  .calendar-grid {
    overflow-x: auto;
  }
  .mailbox-layout {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .mailbox-folders {
    display: none;
  }
  .ai-voice-strip {
    grid-template-columns: 1fr auto;
  }
  .ai-voice-stats {
    display: none;
  }
}

@media (max-width: 650px) {
  .content-wrap {
    padding: 17px 12px 35px;
  }
  .topbar {
    height: 60px;
  }
  .top-actions .profile {
    display: none;
  }
  .global-search kbd {
    display: none;
  }
  .page-heading {
    align-items: flex-start;
  }
  .page-heading h1 {
    font-size: 19px;
  }
  .page-heading p {
    max-width: 280px;
    line-height: 1.4;
  }
  .page-actions .btn-outline-secondary {
    display: none;
  }
  .attention-banner {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .attention-banner .btn {
    width: 100%;
  }
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .kpi-card {
    padding: 12px;
    min-height: 92px;
  }
  .kpi-grid .kpi-card:last-child {
    grid-column: span 2;
  }
  .funnel-row {
    grid-template-columns: 66px minmax(0, 1fr) 30px;
  }
  .funnel-row small {
    display: none;
  }
  .donut-row {
    gap: 15px;
  }
  .donut {
    width: 110px;
    height: 110px;
  }
  .donut::after {
    width: 69px;
    height: 69px;
  }
  .metric-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .metric-strip > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid #edf0f5;
  }
  .metric-strip > div:nth-child(4) {
    border-left: 1px solid #edf0f5;
  }
  .metric-strip > div:nth-child(5) {
    border-left: 0;
  }
  .filter-tabs {
    width: 100%;
  }
  .list-toolbar > div:last-child .btn-outline-secondary {
    display: none;
  }
  .lead-hero {
    padding: 13px;
  }
  .lead-identity {
    width: 100%;
  }
  .lead-scores {
    order: 3;
    border-left: 0;
    padding-left: 0;
  }
  .lead-actions {
    order: 4;
    margin-left: auto;
  }
  .lead-actions .btn {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 0;
  }
  .lead-actions .btn i {
    font-size: 13px;
  }
  .lead-sidebar {
    grid-template-columns: 1fr;
  }
  .journey-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .detail-tabs {
    gap: 13px;
  }
  .event-top {
    flex-direction: column;
    gap: 4px;
  }
  .event-top time {
    margin-left: auto;
  }
  .event-top > div {
    align-items: flex-start;
  }
  .event-meta {
    gap: 7px;
  }
  .crm-modal {
    padding: 19px;
  }
  .modal-actions {
    flex-direction: column;
  }
  .modal-actions .btn {
    width: 100%;
  }
  .stepper span {
    font-size: 7px;
    padding: 5px;
  }
  .crm-toast {
    left: 12px;
    right: 12px;
    bottom: 12px;
    min-width: 0;
  }
  .module-metrics.four,
  .template-grid,
  .roles-grid,
  .staff-grid,
  .integration-grid,
  .qualification-layout,
  .architecture-grid {
    grid-template-columns: 1fr;
  }
  .builder-shell {
    grid-template-columns: 1fr;
  }
  .builder-palette,
  .builder-settings {
    position: static;
  }
  .builder-palette {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }
  .builder-palette .module-head,
  .builder-palette .field-search {
    grid-column: 1 / -1;
  }
  .canvas-fields,
  .doc-grid,
  .booking-steps,
  .factor-grid,
  .risk-row,
  .quality-grid,
  .safeguards {
    grid-template-columns: 1fr;
  }
  .inbox-shell {
    display: block;
    height: auto;
    min-height: 0;
  }
  .inbox-list {
    display: none;
  }
  .chat-panel {
    min-height: 680px;
  }
  .recordings-layout,
  .docs-layout,
  .booking-layout,
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .unit-summary,
  .payment-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .unit-summary > div:nth-child(3),
  .payment-summary > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid #e7ebf0;
  }
  .unit-summary > div:nth-child(4),
  .payment-summary > div:nth-child(4) {
    border-top: 1px solid #e7ebf0;
  }
  .page-map {
    grid-template-columns: 1fr;
  }
  .architecture-hero,
  .automation-banner,
  .integration-summary,
  .role-toolbar,
  .availability-banner,
  .calendar-toolbar,
  .template-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .architecture-stat {
    width: 100%;
  }
  .event-contract,
  .visual-flow,
  .rule-chain,
  .briefing-flow {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .event-contract > i,
  .visual-flow > div > i,
  .rule-chain > div > i,
  .briefing-flow > div > i {
    display: none;
  }
  .journey-target {
    min-width: 0;
  }
  .automation-list article {
    grid-template-columns: 30px 33px 1fr auto;
  }
  .automation-list .run-stat {
    display: none;
  }
  .mailbox-layout {
    display: block;
    height: auto;
    min-height: 0;
  }
  .mailbox-list {
    display: none;
  }
  .mail-reader {
    min-height: 620px;
  }
  .team-group-grid {
    grid-template-columns: 1fr;
  }
  .team-flow {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .team-flow > div > i {
    display: none;
  }
  .ai-voice-strip {
    grid-template-columns: 1fr;
  }
  .expense-bars > div {
    grid-template-columns: 90px 1fr 50px;
  }
  .expense-bars small {
    display: none;
  }
}

a.btn,
a.icon-button,
a.text-action,
a.help-button,
a.profile,
a.brand,
a.project-switch,
a.system-health,
a.soft-chip,
a.attachment,
a.modal-close,
a.back-link,
a.kanban-empty,
a.search-kbd-link,
.nav-group a,
.table-footer a,
.filter-tabs a,
.lead-view-switch a,
.sidebar-footer a {
  text-decoration: none;
  color: inherit;
}
.nav-group a,
.lead-view-switch a,
.filter-tabs a {
  display: inline-flex;
  align-items: center;
}
.nav-group a {
  width: 100%;
}
a.profile {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-layer.as-page {
  position: relative;
  inset: auto;
  min-height: calc(100vh - 160px);
  background: transparent;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 0 40px;
  z-index: 1;
}
.page-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #e9f7f2;
  color: #1f6b54;
  font-weight: 650;
}
.page-notice a {
  margin-left: auto;
  color: #315bd6;
}
.extra-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.extra-link-row strong {
  display: block;
}
.extra-link-row small {
  color: var(--muted);
}
.extra-copy {
  color: var(--text);
  margin-bottom: 16px;
}
.extra-form {
  padding: 20px;
}
a.kanban-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.person-cell a {
  color: inherit;
  text-decoration: none;
}
.person-cell a:hover {
  color: var(--primary);
}