.preview-simulation {
  margin: 20px 0;
  padding: 16px;
  border: 1px dashed #bba96a;
  background: #fbf8ed;
  border-radius: 8px;
}
.preview-simulation h3 {
  font-size: 14px;
  margin: 0 0 9px;
}
.preview-simulation p {
  font-size: 12px;
  line-height: 1.7;
  color: #706446;
}
.simulation-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.simulation-buttons button {
  font-size: 11px;
}
.conversation-group {
  border: 1px solid #dce3d4;
  border-radius: 7px;
  padding: 12px 14px;
  margin: 12px 0;
  background: #f5f7f0;
}
.conversation-group > summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #244b3a;
  padding: 5px 0;
}
.conversation-group > summary:focus-visible {
  outline: 3px solid #b39545;
  outline-offset: 3px;
}

.settings-save-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.settings-save-bar > span {
  font-size: 12px;
  color: #62765c;
}
.settings-save-bar > p {
  width: 100%;
  color: #9d472f;
}
.settings-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
}
.settings-heading p {
  margin-bottom: 0;
}
.stage-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.stage-settings {
  border: 1px solid #dde4d7;
  border-radius: 8px;
  padding: 17px;
  background: #fafbf7;
}
.stage-settings h3 {
  font-size: 14px;
  margin: 0;
  color: #244b3a;
}
.stage-settings > p {
  margin: 7px 0 13px;
}
.settings-rule {
  display: flex;
  align-items: start;
  gap: 18px;
  justify-content: space-between;
  border-top: 1px solid #e4e9de;
  padding: 14px 0;
}
.settings-rule > span:first-child {
  flex: 1;
}
.settings-rule strong {
  display: block;
  font-size: 12px;
  line-height: 1.5;
}
.settings-rule small {
  display: block;
  font-size: 11px;
  color: #74816a;
  line-height: 1.6;
  margin-top: 5px;
}
.settings-delay {
  flex: 0 0 104px;
}
.settings-delay input {
  width: 78px;
}
.settings-delay small {
  font-size: 10px;
}
.settings-other-paths {
  border-top: 1px solid #e4e9de;
  padding-top: 12px;
}
.settings-other-paths summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.settings-other-paths > p {
  font-size: 11px;
}
.settings-time-note {
  background: #f0f3e9;
  border-radius: 6px;
  padding: 12px;
}
@media (max-width: 900px) {
  .stage-settings-grid {
    grid-template-columns: 1fr;
  }
}
.followup-required {
  color: #9d472f;
  background: #fbe9e1;
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 11px;
}
.next-step {
  margin-top: 14px;
  background: #eef3e8;
  border: 1px solid #d4dfcb;
  border-radius: 9px;
  padding: 18px;
}
.next-step-task {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.next-step-task > span {
  font-size: 11px;
  color: #687961;
}
.next-step button {
  margin: 5px 6px 5px 0;
}
.next-step details {
  margin-top: 14px;
}
.next-step summary {
  cursor: pointer;
  font-size: 12px;
}

.assignment-disclosure > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  padding: 8px 0;
  color: #244b3a;
}
.assignment-disclosure > summary:focus-visible {
  outline: 3px solid #b39545;
  outline-offset: 3px;
}

.handoff-notes {
  margin: 18px 0;
  padding: 18px;
  background: #eef3e8;
  border: 1px solid #cad9bd;
  border-left: 4px solid #527348;
  border-radius: 8px;
}
.handoff-notes-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.handoff-notes h3 {
  font-size: 16px;
  margin: 0;
  color: #244b3a;
}
.handoff-notes-heading > span {
  font-size: 10px;
  background: #dfe9d4;
  color: #3c5b31;
  padding: 5px 8px;
  border-radius: 5px;
}
.handoff-notes-meta {
  font-size: 11px;
  color: #65755e;
  margin: 10px 0;
}
.handoff-notes-body {
  font-size: 14px;
  line-height: 1.7;
  color: #263e2d;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 12px 0 0;
}
.conversation-disclosure > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  padding: 8px 0;
  color: #244b3a;
}
.conversation-disclosure > summary:focus-visible {
  outline: 3px solid #b39545;
  outline-offset: 3px;
}
.conversation-disclosure[open] > summary {
  margin-bottom: 12px;
}

.coach-deadline-edit {
  width: 100%;
  border-top: 1px solid #dce4d1;
  margin-top: 6px;
  padding-top: 6px;
}
.coach-deadline-edit .field {
  font-size: 10px;
}
.coach-task-flag {
  padding: 7px 9px;
  border-radius: 5px;
  background: #f4ecd8;
  color: #8a6e2c;
  font-size: 11px;
  font-weight: 600;
  margin: 10px 0;
}
.coach-task-flag.overdue {
  background: #fae5df;
  color: #a65239;
}

.card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stage-dot.application_delivery {
  background: #b06f4d;
}
.column:has(.stage-dot.application_delivery) {
  background: #f4ebe2;
}

.action-categories {
  margin: 14px 0 16px;
  background: #fff;
  border: 1px solid #d7dfcf;
  padding: 18px;
  border-radius: 9px;
}
.action-categories h2 {
  font-size: 19px;
  margin: 0 0 7px;
}
.action-categories p {
  font-size: 12px;
  color: #7b886f;
  line-height: 1.6;
  margin: 0 0 13px;
}
.action-categories > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.action-categories button {
  font-size: 12px;
}
.action-categories button strong {
  background: #e9eedf;
  padding: 2px 7px;
  margin-left: 7px;
  border-radius: 9px;
  font-size: 11px;
}
.crm-demo .action-categories button[aria-pressed="true"] {
  border-color: #43643b;
  background: #edf4e5;
}
.action-kind {
  display: inline-block;
  font-size: 9px;
  color: #47683e;
  background: #edf3e6;
  border-radius: 4px;
  padding: 3px 6px;
  width: fit-content;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 4px;
}
.action-kind.review {
  background: #fff0d4;
  color: #8c6322;
}
.action-kind.delivery {
  background: #faeae2;
  color: #a45239;
}
.new-inquiry-split {
  font-size: 9px;
  line-height: 1.6;
  color: #7a8a6a;
  margin: 0 4px 10px;
}

.header-actions .field,
.topbar > .field {
  color: #cad9c2;
  margin: 0;
}
.header-actions .field {
  font-size: 10px;
}
.header-actions {
  flex-wrap: wrap;
}
.coach-review p {
  white-space: pre-wrap;
}
@media (max-width: 760px) {
  .header-actions {
    flex-direction: column;
    align-items: flex-end;
  }
  .header-actions .field {
    max-width: 180px;
  }
  .topbar {
    gap: 10px;
  }
}

.coach-brief {
  background: #eef3e7;
  border: 1px solid #d5e0ca;
  border-radius: 7px;
  padding: 12px;
  margin: 15px 0;
}
.coach-brief summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.coach-brief p {
  font-size: 11px;
  color: #7a8a70;
  line-height: 1.7;
}
.task-assign {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
}
.task-assign select {
  font-size: 10px;
  padding: 5px;
}
.coach-review {
  width: 100%;
  padding: 10px;
  background: #fff9ec;
  border: 1px solid #e7d5a5;
  border-radius: 5px;
}
.decision-panel {
  background: #f0f2e6;
  border: 1px solid #d8e0c8;
  border-radius: 8px;
  margin: 15px 0;
  padding: 18px !important;
}
.stage-dot.decision {
  background: #a18442;
}

.review-inbox {
  margin: 12px 0 16px;
  background: #fffaf0;
  border: 1px solid #deca9a;
  border-radius: 9px;
  overflow: hidden;
}
.review-inbox-head {
  padding: 16px 18px;
}
.review-inbox h2 {
  font-size: 17px;
  margin: 0;
  color: #735624;
}
.review-inbox h2 span {
  font-size: 12px;
  background: #eadcb8;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 8px;
}
.review-inbox-head p {
  font-size: 11px;
  line-height: 1.6;
  color: #8d774d;
  margin: 6px 0 0;
}
.crm-demo .review-row {
  display: grid;
  grid-template-columns: 1.6fr 1.4fr 1.1fr 1fr;
  gap: 12px;
  width: 100%;
  border: 0;
  border-top: 1px solid #eadfc6;
  border-radius: 0;
  background: #fffdf7;
  text-align: left;
  padding: 14px 18px;
  font-size: 11px;
  align-items: center;
}
.review-row strong {
  display: block;
  font-size: 12px;
}
.review-row small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.6;
  margin-top: 5px;
  color: #918367;
}
.review-row > span:last-child {
  text-align: right;
}
.review-empty {
  padding: 0 18px 16px;
  font-size: 12px;
  color: #918367;
}
.entry-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 16px;
}
.entry-paths > div {
  border: 1px solid #dce3d3;
  background: #fafcf6;
  border-radius: 7px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
}
.entry-paths span {
  font-size: 10px;
  color: #7a8870;
  line-height: 1.6;
}
.entry-path {
  font-size: 10px !important;
  line-height: 1.6 !important;
  color: #78866b !important;
}
.column-description {
  font-size: 10px;
  color: #748367;
  margin: 0 4px 12px;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .crm-demo .review-row {
    grid-template-columns: 1fr 1fr;
  }
  .review-row > span:last-child {
    text-align: left;
  }
  .entry-paths {
    grid-template-columns: 1fr;
  }
}

.metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.review-badge {
  margin-top: 10px;
  background: #fff0d3;
  color: #8a5c13;
  border: 1px solid #e5cc98;
  padding: 7px;
  border-radius: 5px;
  font-size: 10px;
}
.review-panel {
  background: #fff7e5;
  border: 1px solid #e0c990;
  border-radius: 8px;
  padding: 15px;
  margin: 15px 0;
}
.review-panel h3 {
  margin: 0 0 8px;
  font-size: 14px;
}
.review-panel p {
  font-size: 11px;
  line-height: 1.6;
  color: #856b39;
}
.tour-summary {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 12px;
  padding: 10px;
  background: #eaf0e6;
  border-radius: 6px;
  border-left: 3px solid #769866;
  font-size: 10px;
  line-height: 1.6;
}
.tour-summary strong {
  font-size: 11px;
}
.tour-summary small {
  font-size: 9px;
  color: #718267;
}
.crm-demo .thread-preview {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 5px;
  padding: 9px;
  text-align: left;
  background: #f9faf5;
  border-color: #e1e7d7;
  margin-bottom: 10px;
  font-size: 10px;
}
.thread-preview span {
  font-size: 9px;
  color: #8a967d;
}
.thread-preview small {
  color: #6e7c60;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.message-addresses {
  display: flex !important;
  flex-direction: column;
  gap: 4px !important;
  margin-top: 9px;
}
.message-addresses span {
  font-size: 10px !important;
  overflow-wrap: anywhere;
}
.email-message {
  border-left: 3px solid #a5b794 !important;
}
.audit-message {
  background: #f1f3e9 !important;
}
.reply-composer {
  border-top: 1px solid #d9e0d0;
  margin-top: 20px;
  padding-top: 18px;
}
.reply-composer textarea {
  min-height: 110px;
}
.history p {
  font-size: 13px !important;
  line-height: 1.8 !important;
}
.drawer {
  width: min(760px, 100%) !important;
}
@media (max-width: 760px) {
  .metrics {
    grid-template-columns: 1fr 1fr !important;
  }
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.crm-demo {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;
  background: #f5f5f0;
  color: #233c32;
  min-height: 100vh;
  font-size: 14px;
}
.crm-demo button,
.crm-demo input,
.crm-demo select,
.crm-demo textarea {
  font: inherit;
}
.crm-demo button {
  cursor: pointer;
  background: white;
  border: 1px solid #d5dcd3;
  color: #244b3a;
  padding: 9px 12px;
  border-radius: 7px;
  font-weight: 600;
}
.crm-demo button:hover {
  background: #edf2ea;
}
.crm-demo button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.crm-demo button:focus-visible,
.crm-demo input:focus-visible,
.crm-demo select:focus-visible,
.crm-demo textarea:focus-visible {
  outline: 3px solid #b39545;
  outline-offset: 2px;
}
.demo-banner {
  padding: 9px 28px;
  background: #e9e2cc;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #66552d;
  font-size: 12px;
}
.demo-banner strong {
  letter-spacing: 0.12em;
  font-size: 10px;
}
.demo-banner button {
  margin-left: auto;
  padding: 5px 10px;
  background: transparent;
  font-size: 11px;
}
.topbar {
  background: #163f31;
  color: #f7f6ee;
  padding: 28px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.17em;
}
.brand span {
  color: #aabdad;
  margin-left: 12px;
}
.topbar h1 {
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  margin: 12px 0 7px;
}
.topbar p {
  color: #bdcdc1;
  margin: 0;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}
.owner-pill {
  border: 1px solid #507360;
  padding: 7px 12px;
  border-radius: 20px;
  font-size: 12px;
}
.header-actions button {
  background: #f5f1e4;
}
.crm-demo main {
  padding: 0 28px 28px;
  max-width: 1920px;
  margin: auto;
}
.syncbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  color: #617567;
  font-size: 11px;
  align-items: center;
  flex-wrap: wrap;
}
.syncbar i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #85926c;
  margin-right: 5px;
}
.syncbar button {
  font-size: 11px;
  padding: 5px 8px;
  margin-left: 8px;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 4px 0 24px;
}
.crm-demo .metric {
  text-align: left;
  padding: 17px 20px;
  border-color: #dee3d9;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 3px #153a2504;
}
.metric span {
  font-size: 12px;
  color: #69796c;
}
.metric strong {
  font-size: 30px;
  font-weight: 500;
  margin: 5px 0;
}
.metric small {
  font-size: 10px;
  color: #859084;
}
.metric.overdue strong {
  color: #ad4a34;
}
.metric.today strong {
  color: #95752e;
}
.crm-demo .metric[aria-pressed="true"] {
  border-color: #244b3a;
  background: #eaf0e5;
  box-shadow: inset 0 0 0 1px #244b3a;
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.toolbar > input {
  flex: 1;
  min-width: 200px;
  max-width: 420px;
}
.crm-demo input,
.crm-demo select,
.crm-demo textarea {
  border: 1px solid #d5dcd3;
  background: white;
  color: #284337;
  border-radius: 6px;
  padding: 9px 10px;
  min-width: 0;
}
.view-toggle {
  display: flex;
  background: #e5e9e1;
  border-radius: 7px;
  padding: 3px;
  gap: 3px;
}
.crm-demo .view-toggle button {
  background: transparent;
  border-color: transparent;
  padding: 7px 12px;
}
.crm-demo .view-toggle button[aria-pressed="true"] {
  background: white;
  border-color: #d5dcd3;
}
.crm-demo [aria-pressed="true"] {
  background: #fff;
  border-color: #d5dcd3;
}
.view-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: #738271;
  margin: 18px 0 10px;
}
.board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 15px;
  align-items: stretch;
  min-height: 470px;
}
.column {
  width: 282px;
  flex: 0 0 282px;
  border-radius: 9px;
  background: #eaece5;
  padding: 0 9px 12px;
}
.column.drop-active {
  outline: 1px dashed #7f9377;
}
.column-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 15px 4px;
}
.column-head h2 {
  font-size: 12px;
  margin: 0;
  flex: 1;
  font-weight: 700;
}
.column-head > span:last-child {
  border: 1px solid #d6ddd0;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10px;
  background: #f5f6ef;
}
.stage-dot {
  height: 7px;
  width: 7px;
  background: #8f9a88;
  border-radius: 50%;
}
.stage-dot.awaiting_questionnaire {
  background: #b99849;
}
.stage-dot.tour {
  background: #6e8297;
}
.stage-dot.discussion {
  background: #47755e;
}
.stage-dot.joined {
  background: #7a9359;
}
.stage-dot.closed {
  background: #a19c91;
}
.cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lead-card {
  background: #fff;
  border: 1px solid #dfe5d9;
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 2px 5px #1e382107;
}
.card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.crm-demo .lead-name {
  border: 0;
  padding: 0;
  font-size: 14px;
  text-align: left;
  background: transparent;
  color: #203f30;
}
.lead-name:hover {
  text-decoration: underline;
}
.drag-handle {
  color: #a0aa9a;
  cursor: grab;
  font-size: 20px;
}
.email {
  font-size: 10px;
  color: #87907f;
  margin: 5px 0 12px;
  overflow-wrap: anywhere;
}
.tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.tags span {
  font-size: 9px;
  background: #f1f2eb;
  border: 1px solid #e6e9df;
  padding: 4px 6px;
  border-radius: 4px;
  color: #687460;
}
.tags .green {
  background: #e7f0e5;
  color: #466242;
  border-color: #d7e4d3;
}
.conversation {
  font-size: 11px;
  margin: 12px 0 5px;
  font-weight: 600;
  color: #67735c;
}
.location {
  font-size: 10px;
  color: #8c9485;
  margin: 0 0 13px;
}
.next-task {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border-left: 3px solid #adbba1;
  background: #f4f6ef;
  border-radius: 3px;
}
.next-task strong {
  font-size: 11px;
  line-height: 1.5;
}
.next-task > span:last-child {
  font-size: 9px;
  color: #75816d;
}
.eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #7c896f;
}
.next-task.overdue {
  border-color: #b5664e;
  background: #fcf0eb;
}
.next-task.overdue > span:last-child {
  color: #a6563f;
}
.next-task.today {
  border-color: #b59a50;
  background: #fbf7e9;
}
.card-owner {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0;
  font-size: 10px;
  color: #70816a;
}
.avatar {
  height: 20px;
  width: 20px;
  background: #e6ebdf;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 9px;
}
.avatar.unassigned {
  background: #f9e4d7;
  color: #986143;
}
.card-owner small {
  margin-left: auto;
}
.move-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #eff1eb;
  padding-top: 9px;
  color: #8b9583;
  font-size: 9px;
  gap: 5px;
}
.move-label select {
  padding: 3px 4px;
  font-size: 9px;
  border-color: #e4e8dd;
  max-width: 170px;
}
.empty-column {
  font-size: 11px;
  color: #8b9580;
  text-align: center;
  padding: 35px 12px;
}
.no-task {
  font-size: 11px;
  padding: 11px;
  background: #f4f6ef;
  color: #819078;
}
.crm-demo footer {
  font-size: 11px;
  color: #7c8974;
  line-height: 1.7;
  max-width: 1000px;
  margin: 14px 0;
}
.notice,
.error {
  padding: 10px 12px;
  border-radius: 6px;
  margin: 12px 0;
  font-size: 12px;
  line-height: 1.5;
}
.notice {
  background: #e9f0df;
  color: #426534;
}
.error {
  background: #fbe9e1;
  color: #9d472f;
}
.task-table {
  background: white;
  border: 1px solid #dce2d5;
  border-radius: 9px;
  overflow: hidden;
}
.crm-demo .task-row {
  display: grid;
  grid-template-columns: 2fr 1.4fr 1fr 1fr;
  gap: 14px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #ecf0e6;
  border-radius: 0;
  text-align: left;
  padding: 16px;
  align-items: center;
  font-weight: 400;
  font-size: 12px;
}
.task-row strong {
  display: block;
  font-size: 12px;
}
.task-row small {
  display: block;
  font-size: 10px;
  color: #879078;
  margin-top: 5px;
}
.task-row.table-head {
  background: #e9ede2;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #758267;
}
.due-text.overdue {
  color: #b0533b;
}
.drawer-shade {
  position: fixed;
  inset: 0;
  background: #122e2390;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
}
.drawer {
  width: min(660px, 100%);
  height: 100%;
  overflow: auto;
  background: #fafbf6;
  padding: 28px;
  box-shadow: -10px 0 60px #183c2530;
}
.drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 10px;
}
.drawer-head h2 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  margin: 9px 0 5px;
}
.drawer-head p {
  font-size: 12px;
  color: #7c8875;
}
.drawer-head button {
  font-size: 24px;
  padding: 0 12px;
}
.detail-summary {
  background: #edf1e5;
  padding: 15px;
  border-radius: 8px;
  margin: 16px 0;
  font-size: 12px;
}
.detail-summary p {
  font-size: 11px;
  color: #728067;
  line-height: 1.7;
  margin: 7px 0 0;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 11px;
  color: #74816a;
  margin: 12px 0;
}
.field textarea {
  min-height: 70px;
  resize: vertical;
}
.detail-tabs {
  display: flex;
  gap: 7px;
  margin: 22px 0 4px;
}
.detail-tabs button {
  font-size: 11px;
}
.detail-tabs [aria-pressed="true"] {
  background: #244e38;
  color: #fff;
}
.detail-section {
  padding: 20px 0;
  border-bottom: 1px solid #e2e7d8;
}
.detail-section h3 {
  margin: 0 0 10px;
  font-size: 14px;
}
.detail-section p {
  font-size: 12px;
  color: #7c8872;
  line-height: 1.7;
}
.task-detail {
  background: #f0f3e9;
  padding: 12px;
  margin: 9px 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  border-left: 3px solid #abb99b;
  border-radius: 4px;
}
.task-detail strong {
  width: 100%;
  font-size: 12px;
}
.task-detail span {
  font-size: 10px;
  flex: 1;
}
.task-detail button {
  font-size: 10px;
  padding: 5px 8px;
}
.task-detail.overdue {
  border-color: #bb7157;
}
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #7b8871;
  margin-top: 14px;
}
.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0;
}
.action-grid button {
  font-size: 11px;
  min-height: 38px;
}
.simulator {
  background: #f0f2e6;
  margin: 14px -10px 0;
  padding: 18px 10px;
  border-radius: 8px;
  border: 1px dashed #c2cbb2;
}
.simulator h3 {
  margin-top: 8px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.small {
  font-size: 10px !important;
}
.history {
  background: white;
  border: 1px solid #e3e8db;
  padding: 14px;
  margin: 12px 0;
  border-radius: 7px;
}
.history > div {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  font-size: 12px;
}
.history > div span {
  font-size: 9px;
  color: #8a947f;
}
.history time {
  display: block;
  font-size: 10px;
  color: #8a947f;
  margin-top: 5px;
}
.history p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.settings {
  background: #fff;
  border: 1px solid #dae1d0;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.settings h2 {
  margin: 0;
  font-size: 16px;
}
.settings p {
  font-size: 11px;
  color: #7b886e;
  line-height: 1.6;
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.settings-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  color: #77836b;
}
.settings-grid input {
  width: 100%;
}
@media (min-width: 1850px) {
  .column {
    flex: 1;
    min-width: 265px;
  }
}
@media (max-width: 760px) {
  .demo-banner {
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .demo-banner span {
    font-size: 10px;
    flex: 1;
  }
  .topbar {
    padding: 22px 16px;
    align-items: start;
    gap: 15px;
  }
  .topbar h1 {
    font-size: 30px;
  }
  .brand span,
  .owner-pill {
    display: none;
  }
  .header-actions button {
    font-size: 10px;
  }
  .crm-demo main {
    padding: 0 12px 20px;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
  }
  .crm-demo .metric {
    padding: 12px;
  }
  .metric strong {
    font-size: 26px;
  }
  .view-caption {
    font-size: 10px;
    flex-wrap: wrap;
  }
  .column {
    flex-basis: 270px;
    width: 270px;
  }
  .toolbar > input {
    max-width: 100%;
    order: 3;
    flex-basis: 100%;
  }
  .toolbar > select {
    flex: 1;
  }
  .task-row.table-head {
    display: none;
  }
  .crm-demo .task-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .settings-grid {
    grid-template-columns: 1fr 1fr;
  }
  .drawer {
    padding: 20px 16px;
  }
  .drawer-head h2 {
    font-size: 27px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .syncbar {
    font-size: 10px;
  }
}

.login {
  max-width: 420px;
  margin: 12vh auto;
  padding: 30px;
  background: white;
  border: 1px solid #d8e1d1;
  border-radius: 12px;
}
.live-status {
  padding: 12px 28px;
  background: #eaf0e5;
}
.crm-demo .drawer {
  width: min(760px, 100%);
}