@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800;900&display=swap");

:root {
  color-scheme: light;
  --bg: #f8f1f1;
  --surface: #ffffff;
  --surface-2: #fef6f3;
  --ink: #2f3239;
  --muted: #756c70;
  --line: #eadde0;
  --blue: #cf6675;
  --green: #b65566;
  --red: #d33f49;
  --gold: #af7713;
  --teal: #a4485a;
  --pink: #cf6675;
  --care-primary: #cf6675;
  --care-primary-hover: #b95567;
  --care-primary-dark: #933f50;
  --care-primary-soft: #fdf0f2;
  --care-canvas: #f8f1f1;
  --care-warm: #fdf8f5;
  --shadow: 0 18px 50px rgba(73, 43, 50, 0.09);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Heebo", "Segoe UI", "Noto Sans Hebrew", Arial, sans-serif;
  line-height: 1.45;
}

button,
textarea,
input {
  font: inherit;
}

.login-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #f8f1f1;
}

.login-gate[hidden] {
  display: none;
}

.auth-hidden {
  display: none;
}

.login-card {
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.login-brand {
  margin-bottom: 4px;
}

.login-card label {
  display: grid;
  gap: 6px;
}

.login-card label span {
  color: #625a5e;
  font-size: 13px;
  font-weight: 900;
}

.login-card input {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #e2d4d7;
  border-radius: 8px;
}

.login-error {
  min-height: 22px;
  margin: 0;
  color: var(--red);
  font-weight: 800;
}

.app-shell {
  --inspector-width: 360px;
  display: grid;
  grid-template-columns: 264px minmax(320px, 1fr) 14px var(--inspector-width);
  min-height: 100vh;
}

.sidebar,
.inspector {
  background: #fffdfc;
  border-inline-end: 1px solid var(--line);
  padding: 22px;
}

.inspector {
  border-inline-start: 1px solid var(--line);
  border-inline-end: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.inspector-resizer {
  cursor: col-resize;
  background: #f1f4f8;
  border-inline-start: 1px solid var(--line);
  border-inline-end: 1px solid var(--line);
  position: relative;
  touch-action: none;
}

.inspector-resizer::before {
  content: "";
  position: absolute;
  inset-block: 18px;
  inset-inline-start: 5px;
  width: 2px;
  border-radius: 999px;
  background: #a79da0;
}

.inspector-resizer:hover,
.inspector-resizer:focus {
  background: #dfe7f2;
  outline: none;
}

body.resizing-inspector {
  cursor: col-resize;
  user-select: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--ink);
  color: white;
  font-weight: 800;
}

.brand strong,
.brand small,
.sidebar-status strong,
.sidebar-status small {
  display: block;
}

.brand small,
.sidebar-status small,
.metric small,
.eyebrow {
  color: var(--muted);
}

.nav-list {
  display: grid;
  gap: 8px;
}

.nav-item,
.icon-button,
.primary-button {
  border: 0;
  cursor: pointer;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 8px;
  color: #4c474b;
  background: transparent;
  text-align: start;
}

.nav-item svg,
.icon-button svg,
.primary-button svg,
.panel-heading svg {
  width: 18px;
  height: 18px;
}

.nav-item.active {
  background: #fdf0f2;
  color: #933f50;
  font-weight: 700;
}

.nav-code-child {
  width: calc(100% - 18px);
  margin-inline-start: 18px;
  min-height: 36px;
  padding-block: 7px;
  border-inline-start: 2px solid #eadde0;
  border-radius: 0 7px 7px 0;
  font-size: 13px;
}

.nav-code-child.active {
  border-inline-start-color: #a4485a;
  background: #fdf3f4;
  color: #933f50;
}

.run-nav {
  background: #fdf0f2;
  color: #933f50;
  font-weight: 800;
}

.sidebar-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(182, 85, 102, 0.14);
}

.main {
  min-width: 0;
  padding: 24px 28px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}

.eyebrow {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 28px;
}

h2 {
  margin-bottom: 0;
  font-size: 18px;
}

h3 {
  font-size: 15px;
  margin-bottom: 8px;
}

.topbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.current-user-pill {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #e2d4d7;
  border-radius: 999px;
  background: #fff;
  color: #4c474b;
  font-size: 13px;
  font-weight: 900;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--blue);
  color: white;
  font-weight: 700;
}

.primary-button.soft {
  background: #fdf0f2;
  color: #933f50;
  border: 1px solid #ecc7ce;
}

.workspace {
  display: grid;
  gap: 18px;
}

.content-view {
  display: none;
}

.content-view.active {
  display: grid;
  gap: 18px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.metric {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.metric span,
.metric strong,
.metric small {
  display: block;
}

.metric span {
  color: var(--muted);
  font-weight: 700;
}

.metric strong {
  margin: 10px 0 4px;
  font-size: 26px;
}

.overview-dashboard {
  display: grid;
  gap: 14px;
}

.overview-progress-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.progress-card,
.approval-panel,
.approval-summary article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.progress-card {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 16px;
}

.progress-card span,
.progress-card small {
  color: var(--muted);
  font-weight: 800;
}

.progress-card strong {
  color: var(--ink);
  font-size: 28px;
}

.progress-card.compact strong {
  font-size: 34px;
}

.progress-meter {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #f3e8ea;
}

.progress-meter-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #cf6675, #23a469);
}

.approval-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.approval-summary article {
  display: grid;
  gap: 5px;
  padding: 14px;
}

.approval-summary strong {
  font-size: 26px;
}

.approval-summary span {
  color: var(--muted);
  font-weight: 800;
}

.approval-panel {
  padding: 14px;
}

.stakeholder-panel {
  display: grid;
  gap: 12px;
}

.stakeholder-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.stakeholder-card {
  --stakeholder-color: #cf6675;
  --stakeholder-soft: #fdf0f2;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--stakeholder-color) 34%, white);
  border-inline-start: 5px solid var(--stakeholder-color);
  border-radius: 8px;
  background: var(--stakeholder-soft);
}

.stakeholder-card strong,
.stakeholder-card span,
.stakeholder-card p {
  display: block;
}

.stakeholder-card strong {
  color: var(--stakeholder-color);
}

.stakeholder-card span,
.stakeholder-card p {
  margin: 0;
  color: #625a5e;
  font-size: 13px;
}

.stakeholder-naor {
  --stakeholder-color: #a4485a;
  --stakeholder-soft: #fdf3f4;
}

.stakeholder-asher {
  --stakeholder-color: #cf6675;
  --stakeholder-soft: #fdf0f2;
}

.stakeholder-gur {
  --stakeholder-color: #af7713;
  --stakeholder-soft: #fffbeb;
}

.stakeholder-tsach {
  --stakeholder-color: #d33f49;
  --stakeholder-soft: #fff1f2;
}

.approval-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.approval-panel-head h3 {
  margin: 0;
}

.approval-panel-head span {
  color: var(--muted);
  font-weight: 800;
}

.approval-table {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.approval-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(110px, 1fr));
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.approval-row:last-child {
  border-bottom: 0;
}

.approval-row.head {
  background: #fffdfc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.approval-row span:not(:first-child) {
  font-weight: 900;
}

.approval-count {
  width: max-content;
  min-width: 42px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fffdfc;
  color: var(--muted);
  font: inherit;
  font-weight: 900;
}

.approval-count.active {
  border-color: #dc9eaa;
  background: #fdf0f2;
  color: var(--blue);
  cursor: pointer;
}

.approval-count.active:hover {
  background: #f6dce1;
}

.pending-approval-list {
  display: grid;
  gap: 10px;
}

.pending-approval-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.pending-approval-item p {
  margin: 5px 0;
  color: #4c474b;
}

.pending-approval-item small {
  color: var(--muted);
  font-weight: 800;
}

.pending-approval-item.empty {
  grid-template-columns: 1fr;
  color: var(--muted);
}

.accent-green {
  border-top-color: var(--green);
}

.accent-blue {
  border-top-color: var(--blue);
}

.accent-red {
  border-top-color: var(--red);
}

.accent-gold {
  border-top-color: var(--gold);
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 18px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.panel.full {
  min-height: 620px;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.module-map,
.knowledge-grid,
.spec-board,
.experiment-grid {
  display: grid;
  gap: 12px;
}

.module-map {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.module-card,
.knowledge-item,
.spec-column,
.experiment,
.decision-item,
.note-item,
.chat-bubble,
.legacy-block {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.module-card,
.knowledge-item,
.experiment,
.decision-item,
.note-item,
.legacy-block {
  padding: 14px;
}

.module-card {
  display: grid;
  gap: 8px;
}

.module-card header,
.decision-item header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: #4c474b;
  font-size: 12px;
  font-weight: 800;
}

.pill.green {
  background: #f9e8eb;
  color: #933f50;
}

.pill.gold {
  background: #fff3d6;
  color: #805400;
}

.pill.red {
  background: #ffe4e8;
  color: #a52835;
}

.decision-list {
  display: grid;
  gap: 10px;
}

.knowledge-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.knowledge-item {
  min-height: 140px;
  display: grid;
  align-content: start;
}

.spec-master-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #e2d4d7;
  border-radius: 8px;
  background: #fffdfc;
}

.spec-master-summary strong {
  display: block;
}

.spec-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 320px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid #e2d4d7;
  border-radius: 8px;
  background: #fff;
}

.spec-search svg {
  width: 18px;
  height: 18px;
  color: #756c70;
}

.spec-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  font: inherit;
}

.spec-section-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.spec-outline-actions {
  display: inline-flex;
  gap: 6px;
}

.spec-outline-actions .icon-button {
  width: 34px;
  height: 34px;
}

.spec-master-workbench {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.spec-outline-panel,
.spec-section-editor {
  min-width: 0;
}

.spec-outline-panel {
  display: grid;
  gap: 10px;
  align-content: start;
}

.spec-outline-list,
.spec-archive-list {
  display: grid;
  gap: 8px;
  max-height: 680px;
  overflow: auto;
  padding-inline-end: 3px;
}

.spec-empty-search {
  padding: 12px;
  border: 1px dashed #e2d4d7;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.archive-toggle {
  flex-shrink: 0;
}

.archive-toggle .pill {
  min-height: 20px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.spec-archive-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 30;
  width: min(380px, 92vw);
  padding: 18px;
  border-inline-start: 1px solid var(--line);
  background: #fff;
  box-shadow: -18px 0 45px rgba(73, 43, 50, 0.16);
  overflow: auto;
}

.spec-archive-drawer[hidden] {
  display: none;
}

.spec-outline-button {
  --stakeholder-color: #cf6675;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 8px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--stakeholder-color);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-align: start;
}

.spec-outline-button.active {
  border-color: var(--blue);
  background: #fdf0f2;
}

.spec-outline-button.depth-1 {
  padding-inline-start: 22px;
}

.spec-outline-button.depth-2 {
  padding-inline-start: 38px;
}

.spec-outline-button strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spec-outline-button small {
  grid-column: 2;
}

.stakeholder-mini-row {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: center;
}

.stakeholder-dot {
  --stakeholder-color: #cf6675;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--stakeholder-color);
}

.spec-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 26px;
  border-radius: 999px;
  background: #f8f1f1;
  color: #4c474b;
  font-size: 12px;
  font-weight: 900;
}

.spec-outline-button.active .spec-number {
  background: #cf6675;
  color: #fff;
}

.spec-outline-button small,
.spec-editor-head small {
  color: var(--muted);
}

.spec-stakeholder-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.spec-stakeholder-strip > span:first-child {
  color: #625a5e;
  font-size: 13px;
  font-weight: 800;
}

.stakeholder-chip {
  --stakeholder-color: #cf6675;
  --stakeholder-soft: #fdf0f2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--stakeholder-color) 28%, white);
  border-radius: 999px;
  background: var(--stakeholder-soft);
  color: var(--stakeholder-color);
  font-size: 12px;
}

.stakeholder-chip small {
  overflow: hidden;
  color: #625a5e;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spec-section-editor {
  display: grid;
  gap: 12px;
}

.spec-action-help {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.spec-title-field {
  display: grid;
  gap: 6px;
}

.spec-title-field span {
  color: #625a5e;
  font-size: 12px;
  font-weight: 900;
}

.spec-title-field input {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #e2d4d7;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
}

.spec-rich-editor {
  min-height: 300px;
  padding: 12px;
  border: 1px solid #e2d4d7;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  line-height: 1.75;
  white-space: pre-wrap;
  outline: 0;
}

.spec-rich-editor:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(207, 102, 117, 0.12);
}

.spec-rich-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
}

.spec-inline-change {
  display: inline;
  padding: 2px 4px;
  border-radius: 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.spec-inline-change span {
  display: inline-flex;
  margin-inline-end: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.spec-inline-change.pending {
  background: #fff1f2;
  color: #9f1239;
}

.spec-inline-change.pending span {
  background: #e11d48;
  color: #fff;
}

.spec-inline-change.approved {
  background: #ecfdf3;
  color: #027a48;
}

.spec-inline-change.approved span {
  background: #12b76a;
  color: #fff;
}

.spec-action-help div {
  padding: 10px 12px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fffdfc;
}

.spec-action-help strong,
.spec-action-help span {
  display: block;
}

.spec-action-help span {
  color: var(--muted);
  font-size: 13px;
}

.spec-editor-head,
.spec-comment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.spec-comments {
  display: grid;
  gap: 10px;
}

.spec-history {
  display: grid;
  gap: 10px;
}

.spec-history-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.spec-history-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.spec-history-list {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow: auto;
  padding-inline-end: 2px;
}

.spec-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-inline-start: 4px solid #a79da0;
  border-radius: 8px;
  background: #fff;
}

.spec-history-item.approved {
  border-inline-start-color: var(--green);
}

.spec-history-item.pending_approval {
  border-inline-start-color: var(--gold);
}

.spec-history-item.rejected_or_deleted {
  border-inline-start-color: var(--red);
}

.spec-history-item p {
  margin: 4px 0 0;
  color: #625a5e;
}

.spec-history-item blockquote {
  margin: 7px 0 0;
  padding: 7px 10px;
  border-inline-start: 3px solid #e2d4d7;
  background: #fffdfc;
  color: #4c474b;
}

.spec-history-item small {
  color: var(--muted);
  white-space: nowrap;
}

.spec-comment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.spec-comment.embedded {
  border-color: #b7e4cc;
  background: #f4fbf7;
}

.spec-comment p {
  margin-bottom: 6px;
}

.spec-comment small {
  color: var(--muted);
}

.spec-comment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.spec-comment-actions .primary-button {
  min-height: 34px;
  padding-inline: 10px;
  white-space: nowrap;
}

.spec-save-status {
  min-height: 22px;
  margin: 0;
  color: #625a5e;
  font-size: 13px;
  font-weight: 800;
}

.spec-archive-item {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.spec-archive-item small {
  color: var(--muted);
}

.spec-column {
  min-height: 380px;
  padding: 12px;
  background: #f9fafb;
}

.spec-column h3 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.task-card {
  padding: 12px;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--line);
  margin-bottom: 10px;
}

.legacy-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.window-workbench {
  display: grid;
  grid-template-columns: 260px minmax(320px, 1fr);
  gap: 14px;
  align-items: start;
}

.window-module-list,
.window-screen-list,
.window-designer {
  display: grid;
  gap: 10px;
}

.window-module-button,
.window-screen-button {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-align: start;
}

.window-module-button.active,
.window-screen-button.active {
  border-color: var(--teal);
  background: #fdf3f4;
}

.window-module-button small,
.window-screen-button small,
.screen-designer-head small {
  color: var(--muted);
}

.window-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
}

.window-designer {
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfc;
}

.screen-designer-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.screen-designer-head h3 {
  margin: 8px 0 2px;
  font-size: 20px;
}

.screen-purpose {
  margin-bottom: 14px;
  color: #4c474b;
}

.screen-definition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.screen-definition-grid section {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.screen-definition-grid h4 {
  margin: 0 0 10px;
  font-size: 13px;
}

.token-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.token-list span {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f8f1f1;
  color: #4c474b;
  font-size: 12px;
  font-weight: 800;
}

.token-list.actions span {
  background: #fdf0f2;
  color: #933f50;
}

.screen-preview-shell {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f1f1;
  overflow: hidden;
}

.experiment-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.experiment {
  min-height: 150px;
}

.chat-panel {
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.context-strip {
  display: grid;
  gap: 3px;
  margin: -4px 0 10px;
  padding: 9px 10px;
  border: 1px solid #e2d4d7;
  border-radius: 8px;
  background: #fffdfc;
}

.context-strip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.context-strip strong {
  color: var(--ink);
  font-size: 13px;
}

.chat-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow: auto;
  padding-inline-end: 4px;
}

.chat-bubble {
  padding: 12px;
  background: #eef7f6;
}

.chat-context {
  display: inline-flex;
  margin-bottom: 6px;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #f0e6e8;
  color: #4c474b;
  font-size: 11px;
  font-weight: 800;
}

.chat-bubble.user {
  background: #fdf0f2;
}

.message-status {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 6px;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #fff3d6;
  color: #805400;
  font-size: 11px;
  font-weight: 800;
}

.message-status.error {
  background: #ffe4e8;
  color: #a52835;
}

.listener-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f9e8eb;
  color: #933f50;
  font-size: 12px;
  font-weight: 800;
}

.listener-badge svg {
  width: 15px;
  height: 15px;
}

.chat-bubble small,
.note-item small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.chat-form {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
}

.chat-hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.upload-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 14px;
}

.upload-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 14px;
  border: 1px dashed #a79da0;
  border-radius: 8px;
  background: #fffdfc;
  cursor: pointer;
}

.upload-drop svg {
  width: 28px;
  height: 28px;
  color: var(--teal);
}

.upload-drop span,
.upload-drop small {
  display: block;
}

.upload-drop span {
  font-weight: 800;
}

.upload-drop small {
  color: var(--muted);
}

.upload-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.upload-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.upload-side textarea {
  min-height: 72px;
}

.paste-zone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdf8f5;
  outline: none;
}

.paste-zone:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(207, 102, 117, 0.12);
}

.paste-zone svg {
  width: 28px;
  height: 28px;
  color: var(--blue);
}

.paste-zone strong,
.paste-zone small {
  display: block;
}

.paste-zone small {
  color: var(--muted);
}

.paste-zone img {
  width: 86px;
  height: 58px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.upload-list {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.upload-status {
  min-height: 22px;
  margin: -4px 0 12px;
  color: var(--muted);
  font-weight: 700;
}

.upload-status.error {
  color: var(--red);
}

.upload-status.ok {
  color: var(--green);
}

.upload-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.upload-item a {
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}

.upload-caption {
  margin: 4px 0 0;
  color: var(--ink);
}

textarea {
  width: 100%;
  resize: vertical;
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 12px;
  color: var(--ink);
}

.notes-panel {
  min-height: 240px;
}

.note-list {
  display: grid;
  gap: 10px;
  max-height: 310px;
  overflow: auto;
  padding-inline-end: 4px;
}

.mock-window {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

.mock-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background: #f2f4f7;
}

.mock-toolbar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
}

.mock-toolbar span:nth-child(2) {
  background: var(--gold);
}

.mock-toolbar span:nth-child(3) {
  background: var(--green);
}

.mock-body {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.mock-body label {
  color: var(--muted);
  font-weight: 700;
}

.mock-input {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fffdfc;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.segmented button {
  min-height: 40px;
  border: 0;
  background: white;
  color: var(--ink);
  border-inline-start: 1px solid var(--line);
}

.segmented button:first-child {
  border-inline-start: 0;
}

.segmented .selected {
  background: #f9e8eb;
  color: #933f50;
  font-weight: 800;
}

.calendar {
  grid-column: span 2;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 14px;
}

.run-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.run-tab {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
}

.run-tab.active {
  border-color: var(--teal);
  background: #f9e8eb;
  color: #933f50;
}

.run-stage {
  min-height: 620px;
}

.runtime-only {
  background: #f8f1f1;
}

.runtime-only .app-shell {
  display: block;
  min-height: 100vh;
}

.runtime-only .sidebar,
.runtime-only .topbar,
.runtime-only .inspector,
.runtime-only .inspector-resizer {
  display: none;
}

.runtime-only .main {
  min-height: 100vh;
  padding: 0;
}

.runtime-only .workspace {
  padding: 0;
}

.runtime-only .content-view {
  display: none;
}

.runtime-only .content-view.active {
  display: block;
}

.runtime-only .run-panel {
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  background: #f8f1f1;
  box-shadow: none;
}

.runtime-only .run-panel > .panel-heading {
  display: none;
}

.runtime-only .run-tabs {
  display: none;
}

.runtime-only .run-stage {
  min-height: 100vh;
}

.run-simulation {
  display: grid;
  gap: 12px;
}

.run-sim-head,
.run-workflow,
.run-event-log {
  border: 1px solid #e2d4d7;
  border-radius: 8px;
  background: #fff;
}

.run-sim-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
}

.run-sim-head h3 {
  margin: 0 0 3px;
  font-size: 18px;
}

.run-live-state {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.run-workflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
}

.run-step {
  display: grid;
  gap: 4px;
  min-height: 70px;
  padding: 12px;
  border: 0;
  border-inline-start: 1px solid #f0e6e8;
  background: #fff;
  color: #4c474b;
  cursor: pointer;
  text-align: start;
}

.run-step:first-child {
  border-inline-start: 0;
}

.run-step.active {
  background: #fdf0f2;
  color: #933f50;
  box-shadow: inset 0 -3px 0 #cf6675;
}

.run-step.done {
  background: #ecfdf7;
}

.run-step strong,
.run-step span {
  display: block;
}

.run-step span {
  color: #756c70;
  font-size: 12px;
  font-weight: 700;
}

.run-sim-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 12px;
  align-items: start;
}

.run-window-area {
  min-width: 0;
}

.run-event-log {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.run-event {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #f0e6e8;
  border-radius: 8px;
  background: #fffdfc;
}

.run-event strong,
.run-event span,
.run-event small {
  display: block;
}

.run-event span,
.run-event small {
  color: #756c70;
  font-size: 12px;
}

.run-product {
  min-height: 100vh;
  padding: 18px 28px 28px;
  background:
    linear-gradient(180deg, #fffdfc 0%, #eef3f8 46%, #f8f1f1 100%);
}

.run-product-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 72px;
  padding: 10px 0 18px;
}

.run-product-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.run-product-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: #2f3239;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}

.run-product-brand strong,
.run-product-brand small,
.run-product-status span,
.run-product-status strong {
  display: block;
}

.run-product-brand strong {
  font-size: 22px;
  font-weight: 900;
}

.run-product-brand small,
.run-product-status span {
  color: #756c70;
  font-size: 12px;
  font-weight: 800;
}

.run-product-status {
  min-width: 230px;
  padding: 10px 14px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fff;
  text-align: start;
}

.run-product-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.run-code-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #e2d4d7;
  border-radius: 8px;
  background: #fff;
  color: #2f3239;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(73, 43, 50, 0.06);
}

.run-code-toggle svg {
  width: 17px;
  height: 17px;
  color: #933f50;
}

.run-code-toggle.active {
  border-color: #2f3239;
  background: #2f3239;
  color: #fff;
}

.run-code-toggle.active svg {
  color: #facc15;
}

.run-design-picker {
  display: grid;
  gap: 4px;
  min-width: 220px;
}

.run-design-picker span {
  color: #756c70;
  font-size: 11px;
  font-weight: 900;
}

.run-design-picker select {
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid #e2d4d7;
  border-radius: 8px;
  background: #fff;
  color: #2f3239;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(73, 43, 50, 0.06);
}

.run-new-shell {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.run-new-shell.is-home {
  min-height: calc(100vh - 118px);
}

.run-new-shell.with-backend {
  grid-template-columns: 286px minmax(0, 1fr) 430px;
}

.run-new-shell.menu-collapsed {
  grid-template-columns: 64px minmax(0, 1fr);
}

.run-new-shell.menu-collapsed.with-backend {
  grid-template-columns: 64px minmax(0, 1fr) 430px;
}

.run-menu,
.run-main-workspace,
.run-backend-panel,
.runtime-day-panel,
.runtime-search-panel {
  min-width: 0;
}

.run-menu {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(73, 43, 50, 0.08);
  z-index: 20;
  transition: width 180ms ease, box-shadow 180ms ease;
}

.run-menu-collapse {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-inline-start: auto;
  border: 1px solid #eadde0;
  border-radius: 7px;
  background: #fff;
  color: #4c474b;
  cursor: pointer;
}

.run-menu-collapse:hover,
.run-menu-collapse:focus-visible {
  border-color: var(--run-primary, #b65566);
  color: var(--run-primary, #b65566);
  outline: 3px solid color-mix(in srgb, var(--run-primary, #b65566) 16%, transparent);
}

.run-menu-collapse svg {
  width: 18px;
  height: 18px;
}

.run-new-shell.menu-collapsed .run-menu {
  width: 64px;
  overflow: hidden;
  padding-inline: 10px;
}

.run-new-shell.menu-collapsed .run-menu:hover,
.run-new-shell.menu-collapsed .run-menu:focus-within,
.run-new-shell.menu-collapsed.menu-peek-open .run-menu {
  width: 286px;
  overflow: visible;
  box-shadow: 0 22px 54px rgba(73, 43, 50, 0.2);
}

.run-new-shell.menu-collapsed .run-menu-section-label,
.run-new-shell.menu-collapsed .run-menu-root span,
.run-new-shell.menu-collapsed .run-menu-root small,
.run-new-shell.menu-collapsed .run-menu-tree {
  visibility: hidden;
  opacity: 0;
}

.run-new-shell.menu-collapsed .run-menu-tree {
  display: none;
}

.run-new-shell.menu-collapsed .run-menu:hover .run-menu-section-label,
.run-new-shell.menu-collapsed .run-menu:hover .run-menu-root span,
.run-new-shell.menu-collapsed .run-menu:hover .run-menu-root small,
.run-new-shell.menu-collapsed .run-menu:hover .run-menu-tree,
.run-new-shell.menu-collapsed .run-menu:focus-within .run-menu-section-label,
.run-new-shell.menu-collapsed .run-menu:focus-within .run-menu-root span,
.run-new-shell.menu-collapsed .run-menu:focus-within .run-menu-root small,
.run-new-shell.menu-collapsed .run-menu:focus-within .run-menu-tree,
.run-new-shell.menu-collapsed.menu-peek-open .run-menu .run-menu-section-label,
.run-new-shell.menu-collapsed.menu-peek-open .run-menu .run-menu-root span,
.run-new-shell.menu-collapsed.menu-peek-open .run-menu .run-menu-root small,
.run-new-shell.menu-collapsed.menu-peek-open .run-menu .run-menu-tree {
  display: block;
  visibility: visible;
  opacity: 1;
  transition: opacity 120ms ease 70ms;
}

.run-new-shell.menu-collapsed .run-menu-root {
  padding-inline: 12px;
}

.run-new-shell.menu-collapsed .run-menu:hover .run-menu-root,
.run-new-shell.menu-collapsed .run-menu:focus-within .run-menu-root,
.run-new-shell.menu-collapsed.menu-peek-open .run-menu .run-menu-root {
  padding-inline: 12px;
}

.run-menu-section-label {
  padding: 2px 4px 4px;
  color: #756c70;
  font-size: 12px;
  font-weight: 900;
}

.run-menu-root,
.run-branch,
.run-calendar-link {
  width: 100%;
  border: 0;
  cursor: pointer;
  text-align: start;
  font-weight: 800;
}

.run-menu-root,
.run-branch {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 7px;
  background: #f7f9fb;
  color: #414047;
}

.run-branch small {
  margin-inline-start: auto;
  color: #756c70;
  font-size: 11px;
  font-weight: 900;
}

.run-menu-root small {
  margin-inline-start: auto;
  color: currentColor;
  opacity: 0.72;
  font-size: 11px;
  font-weight: 900;
}

.run-menu-root.active {
  background: #2f3239;
  color: #fff;
}

.run-product.run-theme-clinic {
  --run-bg-top: #fffdfc;
  --run-bg-bottom: #eef7f4;
  --run-surface: #ffffff;
  --run-soft: #fdf8f5;
  --run-border: #d7e5e1;
  --run-text: #2f3239;
  --run-muted: #756c70;
  --run-primary: #a4485a;
  --run-primary-soft: #f9e8eb;
  --run-accent: #f59e0b;
}

.run-product.run-theme-ops {
  --run-bg-top: #f8f1f1;
  --run-bg-bottom: #e7edf3;
  --run-surface: #ffffff;
  --run-soft: #faf5f4;
  --run-border: #cfd8e3;
  --run-text: #2f3239;
  --run-muted: #756c70;
  --run-primary: #0b7285;
  --run-primary-soft: #fdf0f2;
  --run-accent: #f59e0b;
}

.run-product.run-theme-flow {
  --run-bg-top: #fff8f5;
  --run-bg-bottom: #fdf8f5;
  --run-surface: #ffffff;
  --run-soft: #fff4f1;
  --run-border: #eadbd6;
  --run-text: #2a2f3a;
  --run-muted: #6d6772;
  --run-primary: #b65566;
  --run-primary-soft: #fdf3f4;
  --run-accent: #e85d75;
}

.run-product.run-theme-premium {
  --run-bg-top: #fbfcfb;
  --run-bg-bottom: #eef5f1;
  --run-surface: #ffffff;
  --run-soft: #f4f8f5;
  --run-border: #d9e3df;
  --run-text: #132b24;
  --run-muted: #66756f;
  --run-primary: #763544;
  --run-primary-soft: #e8f0eb;
  --run-accent: #c6a15b;
}

.run-product[class*="run-theme-"] {
  background: linear-gradient(180deg, var(--run-bg-top) 0%, var(--run-bg-bottom) 100%);
  color: var(--run-text);
}

.run-product[class*="run-theme-"] .run-product-mark,
.run-product[class*="run-theme-"] .run-code-toggle.active,
.run-product[class*="run-theme-"] .run-menu-root.active,
.run-product[class*="run-theme-"] .care-button.primary,
.run-product[class*="run-theme-"] .call-task.active .call-priority,
.run-product[class*="run-theme-"] .runtime-day-row.selected-for-schedule .runtime-time-cell {
  background: var(--run-primary);
  color: #fff;
}

.run-product[class*="run-theme-"] .run-product-brand strong,
.run-product[class*="run-theme-"] .run-product-status strong,
.run-product[class*="run-theme-"] .run-sim-head.new h3,
.run-product[class*="run-theme-"] .run-context-title,
.run-product[class*="run-theme-"] .call-section-head strong,
.run-product[class*="run-theme-"] .call-customer-strip h4,
.run-product[class*="run-theme-"] .runtime-profile-name h3,
.run-product[class*="run-theme-"] .runtime-table-title strong {
  color: var(--run-text);
}

.run-product[class*="run-theme-"] .run-product-brand small,
.run-product[class*="run-theme-"] .run-product-status span,
.run-product[class*="run-theme-"] .run-sim-head.new small,
.run-product[class*="run-theme-"] .call-section-head span,
.run-product[class*="run-theme-"] .call-task small,
.run-product[class*="run-theme-"] .call-task em,
.run-product[class*="run-theme-"] .runtime-muted,
.run-product[class*="run-theme-"] .runtime-demo-field span {
  color: var(--run-muted);
}

.run-product[class*="run-theme-"] .run-product-status,
.run-product[class*="run-theme-"] .run-code-toggle,
.run-product[class*="run-theme-"] .run-design-picker select,
.run-product[class*="run-theme-"] .run-menu,
.run-product[class*="run-theme-"] .run-sim-head.new,
.run-product[class*="run-theme-"] .runtime-call-center .call-queue-panel,
.run-product[class*="run-theme-"] .runtime-call-center .call-workspace,
.run-product[class*="run-theme-"] .call-script-panel,
.run-product[class*="run-theme-"] .call-schedule-panel,
.run-product[class*="run-theme-"] .call-history-panel,
.run-product[class*="run-theme-"] .call-customer-strip,
.run-product[class*="run-theme-"] .runtime-search-panel,
.run-product[class*="run-theme-"] .runtime-customer-profile,
.run-product[class*="run-theme-"] .runtime-admin-panel,
.run-product[class*="run-theme-"] .runtime-day-panel {
  border-color: var(--run-border);
  background: var(--run-surface);
}

.run-product[class*="run-theme-"] .run-menu-root,
.run-product[class*="run-theme-"] .run-branch,
.run-product[class*="run-theme-"] .call-task,
.run-product[class*="run-theme-"] .runtime-demo-field,
.run-product[class*="run-theme-"] .runtime-day-row,
.run-product[class*="run-theme-"] .runtime-admin-row,
.run-product[class*="run-theme-"] .runtime-visit-card,
.run-product[class*="run-theme-"] .runtime-summary-card {
  background: var(--run-soft);
  border-color: var(--run-border);
}

.run-product[class*="run-theme-"] .run-branch.active,
.run-product[class*="run-theme-"] .run-calendar-link.active,
.run-product[class*="run-theme-"] .call-task.active,
.run-product[class*="run-theme-"] .runtime-layer-tab.active,
.run-product[class*="run-theme-"] .runtime-day-row.selected-for-schedule {
  border-color: var(--run-primary);
  background: var(--run-primary-soft);
  color: var(--run-primary);
}

.run-product[class*="run-theme-"] .care-chip.hot,
.run-product[class*="run-theme-"] .call-next-at,
.run-product[class*="run-theme-"] .care-link-button {
  color: var(--run-primary);
}

.run-product[class*="run-theme-"] .care-chip.gold {
  background: color-mix(in srgb, var(--run-accent) 15%, #fff);
  border-color: color-mix(in srgb, var(--run-accent) 35%, #fff);
  color: color-mix(in srgb, var(--run-accent) 70%, #3f2a05);
}

.run-product.run-theme-ops .run-menu {
  background: #1f2933;
  color: #e5edf5;
}

.run-product.run-theme-ops .run-menu-section-label,
.run-product.run-theme-ops .run-branch small {
  color: #c4cedb;
}

.run-product.run-theme-ops .run-menu-root,
.run-product.run-theme-ops .run-branch {
  background: #2b3745;
  color: #e5edf5;
}

.run-product.run-theme-flow .run-product-mark,
.run-product.run-theme-flow .run-menu-root.active {
  background: var(--run-accent);
}

.run-product.run-theme-flow {
  --run-bg-top: #fff8f5;
  --run-bg-bottom: #fdf8f5;
  --run-surface: #ffffff;
  --run-soft: #fff4f1;
  --run-border: #ead9d4;
  --run-text: #27313d;
  --run-muted: #726a72;
  --run-primary: #b65566;
  --run-primary-soft: #fdf0f2;
  --run-accent: #e85d75;
  --run-accent-soft: #fff0f2;
}

.run-product.run-theme-flow .run-product-header {
  min-height: 78px;
  padding: 12px 0 20px;
  border-bottom: 1px solid #eadbd6;
}

.run-product.run-theme-flow .run-product-mark {
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(232, 93, 117, 0.18);
}

.run-product.run-theme-flow .run-product-status,
.run-product.run-theme-flow .run-design-picker select,
.run-product.run-theme-flow .run-code-toggle {
  border-color: #eadbd6;
  background: rgba(255, 255, 255, 0.92);
}

.run-product.run-theme-flow .run-menu {
  border-color: #eadbd6;
  background: linear-gradient(180deg, #ffffff 0%, #fff8f5 100%);
}

.run-product.run-theme-flow .run-menu-section-label {
  color: #9f5260;
}

.run-product.run-theme-flow .run-menu-root,
.run-product.run-theme-flow .run-branch {
  min-height: 40px;
  background: #fff6f3;
  color: #3a3134;
}

.run-product.run-theme-flow .run-branch {
  border: 1px solid #e8cbd0;
  background: #effaf7;
  color: #933f50;
}

.run-product.run-theme-flow .run-calendar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  border: 1px solid #edd4d8;
  border-radius: 7px;
  background: #fdf8f5;
  color: #b65566;
}

.run-product.run-theme-flow .run-calendar-link svg {
  width: 15px;
  height: 15px;
  color: #b65566;
}

.run-product.run-theme-flow .run-branch.active {
  border-color: #5fc3b1;
  background: #f9e8eb;
  color: #933f50;
}

.run-product.run-theme-flow .run-calendar-link.active {
  border-color: #b65566;
  background: #b65566;
  color: #fff;
}

.run-product.run-theme-flow .run-calendar-link.active svg {
  color: currentColor;
}

.run-product.run-theme-flow .run-sim-head.new {
  border-inline-start: 5px solid #e85d75;
  background: linear-gradient(90deg, #fff0f2 0%, #ffffff 26%, #ffffff 100%);
}

.run-product.run-theme-flow .care-button.primary {
  background: #b65566;
  color: #fff;
}

.run-product.run-theme-flow .care-button.ghost,
.run-product.run-theme-flow .care-link-button {
  border-color: #eddde0;
  background: #fdf3f4;
  color: #b65566;
}

.run-product.run-theme-flow input:not([type="checkbox"]):not([type="radio"]),
.run-product.run-theme-flow select,
.run-product.run-theme-flow textarea {
  border-color: #eadbd6;
  background: #fffdfc;
  color: #27313d;
  border-radius: 8px;
}

.run-product.run-theme-flow input:not([type="checkbox"]):not([type="radio"]):focus,
.run-product.run-theme-flow select:focus,
.run-product.run-theme-flow textarea:focus {
  outline: 2px solid rgba(39, 125, 161, 0.18);
  border-color: #b65566;
}

.run-product.run-theme-flow .runtime-demo-field,
.run-product.run-theme-flow .runtime-profile-field,
.run-product.run-theme-flow .runtime-summary-card,
.run-product.run-theme-flow .runtime-visit-card,
.run-product.run-theme-flow .runtime-source-card,
.run-product.run-theme-flow .runtime-table-card,
.run-product.run-theme-flow .runtime-admin-board,
.run-product.run-theme-flow .runtime-admin-nav,
.run-product.run-theme-flow .runtime-calendar-availability-modal,
.run-product.run-theme-flow .runtime-modal-backdrop + section {
  border-color: #eadbd6;
  background: #fffdfc;
}

.run-product.run-theme-flow .runtime-layer-tab,
.run-product.run-theme-flow .runtime-admin-nav button,
.run-product.run-theme-flow .call-outcomes .care-button,
.run-product.run-theme-flow .call-branch-options button {
  border-radius: 8px;
}

.run-product.run-theme-flow .runtime-layer-tab.active,
.run-product.run-theme-flow .runtime-admin-nav button.active,
.run-product.run-theme-flow .call-task.active {
  border-color: #e85d75;
  background: #fff0f2;
  color: #9f2539;
}

.run-product.run-theme-flow .call-task {
  border-inline-start-color: #f1a7b4;
  background: #fffaf7;
}

.run-product.run-theme-flow .call-task.active {
  border-inline-start-color: #e85d75;
}

.run-product.run-theme-flow .call-next-at,
.run-product.run-theme-flow .call-facts span svg,
.run-product.run-theme-flow .runtime-day-toolbar svg,
.run-product.run-theme-flow .runtime-profile-meta svg {
  color: #b65566;
}

.run-product.run-theme-flow .runtime-day-row {
  border-color: #eadbd6;
  background: #fffdfc;
}

.run-product.run-theme-flow .runtime-day-row.empty-slot {
  background: #fdf8f5;
}

.run-product.run-theme-flow .runtime-day-row.planned {
  background: #fff7ed;
  border-color: #f7c47c;
}

.run-product.run-theme-flow .runtime-day-row.done {
  background: #f1fbf6;
  border-color: #b6e5c9;
}

.run-product.run-theme-flow .runtime-day-row.selected-for-schedule {
  background: #fdf3f4;
  border-color: #b65566;
}

.run-product.run-theme-flow .runtime-admin-grid,
.run-product.run-theme-flow .runtime-admin-grid-row,
.run-product.run-theme-flow .runtime-admin-row {
  border-color: #eadbd6;
}

.run-product.run-theme-flow .runtime-admin-grid-head,
.run-product.run-theme-flow .runtime-table-head,
.run-product.run-theme-flow .runtime-day-head {
  background: #fff4f1;
  color: #3a3134;
}

.run-product.run-theme-flow .runtime-empty-state {
  border-color: #eadbd6;
  background: #fffdfc;
}

.run-product.run-theme-flow .care-chip.hot {
  border-color: #ffc8d0;
  background: #fff0f2;
  color: #9f2539;
}

.run-product.run-theme-premium .run-product-header {
  border-bottom: 1px solid var(--run-border);
}

.run-menu-root svg,
.run-branch svg {
  width: 17px;
  height: 17px;
}

.run-home-empty {
  min-height: calc(100vh - 118px);
}

.run-menu-tree {
  display: grid;
  gap: 8px;
  margin-top: 2px;
  padding: 2px 10px 2px 0;
  border-inline-start: 0;
}

.run-settings-tree {
  padding-inline: 16px 4px;
}

.run-settings-tree .run-calendar-link {
  border-color: #d8e3e1;
  background: #fdf8f5;
  color: #79545d;
}

.run-settings-tree .run-calendar-link small {
  margin-inline-start: auto;
  font-size: 10px;
}

.run-settings-tree .run-calendar-link.active {
  border-color: #a4485a;
  background: #a4485a;
  color: #fff;
}

.run-branch.active {
  border-color: #ddaab3;
  background: #fdf0f2;
  color: #933f50;
}

.run-calendar-list {
  display: grid;
  gap: 6px;
  padding: 6px 22px 0 0;
}

.run-calendar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid #edd4d8;
  border-radius: 7px;
  background: #fdf8f5;
  color: #933f50;
}

.run-calendar-link svg {
  width: 15px;
  height: 15px;
  color: #b65566;
}

.run-calendar-link.active {
  border-color: #b65566;
  background: #b65566;
  color: #fff;
}

.run-calendar-link.active svg {
  color: currentColor;
}

.runtime-admin-tables {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.runtime-admin-nav,
.runtime-admin-board {
  min-width: 0;
  border: 1px solid #f0e6e8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(73, 43, 50, 0.035);
  overflow: visible;
}

.runtime-admin-nav {
  display: grid;
  gap: 4px;
  padding: 10px;
}

.runtime-admin-nav-head strong,
.runtime-admin-nav-head span {
  display: block;
}

.runtime-admin-nav-group {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  margin-top: 5px;
  padding: 0 8px;
  border-top: 1px solid #f0e6e8;
  color: #933f50;
  font-size: 12px;
  font-weight: 850;
}

.runtime-admin-nav-group svg {
  width: 15px;
  height: 15px;
}

.runtime-admin-nav-head strong {
  color: #2f3239;
  font-size: 13px;
  font-weight: 850;
}

.runtime-admin-nav-head span {
  color: #756c70;
  font-size: 11px;
  font-weight: 650;
}

.runtime-admin-nav button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #414047;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 750;
  text-align: start;
}

.runtime-admin-nav button:hover {
  background: #fdf8f5;
}

.runtime-admin-nav button.active {
  background: #eef6f5;
  color: #933f50;
}

.runtime-admin-nav button.runtime-admin-nav-child {
  margin-inline-start: 12px;
  padding-inline-start: 12px;
  border-inline-start: 2px solid #dbe8e7;
}

.runtime-admin-nav svg {
  width: 16px;
  height: 16px;
}

.runtime-admin-nav small {
  margin-inline-start: auto;
  color: currentColor;
  opacity: 0.72;
  font-size: 11px;
}

.runtime-admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #f0e6e8;
}

.runtime-admin-toolbar h4 {
  margin: 0;
  color: #2f3239;
  font-size: 18px;
  font-weight: 850;
}

.runtime-admin-toolbar .care-button {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 750;
}

.runtime-admin-toolbar .care-button.primary {
  background: #933f50;
  box-shadow: none;
}

.runtime-hair-hourly-rate {
  display: grid;
  gap: 4px;
  min-width: 260px;
  padding: 9px 12px;
  border: 1px solid #c5ddd5;
  border-radius: 10px;
  background: #fdf3f4;
  color: #933f50;
  font-size: 12px;
  font-weight: 800;
}

.runtime-hair-hourly-rate small {
  color: #5d746d;
  font-size: 10px;
  font-weight: 600;
}

.runtime-hair-hourly-input {
  display: flex;
  align-items: center;
  gap: 7px;
}

.runtime-hair-hourly-input input {
  width: 105px;
  min-height: 34px;
  border: 1px solid #76aa9a;
  border-radius: 7px;
  background: #fff;
  padding: 5px 8px;
  color: #763544;
  font-size: 17px;
  font-weight: 900;
}

.runtime-hair-hourly-input input[aria-invalid="true"] {
  border-color: #b42318;
  background: #fff1f0;
}

.runtime-admin-grid {
  display: grid;
  grid-template-columns: repeat(var(--runtime-admin-cols), minmax(122px, 1fr));
  overflow-x: auto;
  min-height: 430px;
  align-content: start;
  background: #fff;
}

.runtime-admin-grid > b,
.runtime-admin-grid > span {
  min-height: 40px;
  padding: 6px 7px;
  border-top: 1px solid #f5edef;
  border-inline-start: 1px solid #f5edef;
  font-size: 12px;
  font-weight: 650;
}

.runtime-admin-grid > span.runtime-new-row {
  border-top: 2px solid #f59e0b;
  border-bottom: 2px solid #f59e0b;
  background: #fff4bd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  animation: runtime-new-row-pulse 900ms ease-out;
}

.runtime-hair-area-thumbnail {
  display: grid;
  width: 100%;
  min-height: 72px;
  place-items: center;
}

.runtime-hair-area-thumbnail img {
  width: 66px;
  height: 66px;
  object-fit: contain;
  border-radius: 7px;
  background: #fff;
}

.runtime-hair-area-thumbnail.empty {
  color: #a79da0;
}

.runtime-admin-grid > span.runtime-new-row input:not([readonly]),
.runtime-admin-grid > span.runtime-new-row select,
.runtime-admin-grid > span.runtime-new-row summary {
  border-color: #d97706;
  background: #fffdf5;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.16);
}

@keyframes runtime-new-row-pulse {
  from { background: #fcd34d; }
  to { background: #fff4bd; }
}

.runtime-admin-grid > b,
.runtime-admin-head {
  position: relative;
}

.runtime-admin-grid > b {
  display: flex;
  align-items: center;
  min-height: 36px;
  background: #fffdfc;
  color: #625a5e;
  font-weight: 800;
}

.runtime-admin-head.static {
  padding-inline: 8px;
}

.runtime-filter-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-height: 26px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: start;
}

.runtime-filter-button svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: #a79da0;
}

.runtime-admin-head.filtered {
  background: #fdf3f4;
  color: #933f50;
}

.runtime-filter-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  inset-inline-start: 6px;
  display: grid;
  gap: 10px;
  width: min(270px, 86vw);
  padding: 12px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fff;
  color: #2f3239;
  box-shadow: 0 18px 42px rgba(73, 43, 50, 0.16);
}

.runtime-filter-menu strong {
  display: block;
  font-size: 13px;
  font-weight: 850;
}

.runtime-filter-sort {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.runtime-filter-sort button {
  min-height: 32px;
  border: 1px solid #dce3ec;
  border-radius: 6px;
  background: #fff;
  color: #414047;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 750;
}

.runtime-filter-sort button.active {
  border-color: #933f50;
  background: #fdf3f4;
  color: #933f50;
}

.runtime-filter-sort button:hover {
  border-color: #e2d4d7;
  background: #faf5f4;
}

.runtime-filter-values {
  display: grid;
  gap: 1px;
  max-height: 192px;
  padding: 4px;
  border: 1px solid #f8f1f1;
  border-radius: 7px;
  overflow: auto;
}

.runtime-filter-values label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #4c474b;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.runtime-filter-values label:hover {
  background: #faf5f4;
}

.runtime-filter-values input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  min-height: 0;
  padding: 0;
  border-radius: 4px;
  accent-color: #933f50;
}

.runtime-filter-warning {
  display: block;
  padding: 7px 9px;
  border: 1px solid #fde2b5;
  border-radius: 6px;
  background: #fff8ed;
  color: #8a4b0f;
  font-size: 12px;
  font-weight: 750;
}

.runtime-empty-table {
  display: flex;
  align-items: center;
  color: #756c70;
  background: #fff;
}

.runtime-admin-blank-cell {
  display: block;
  background: #fff;
  pointer-events: none;
}

.runtime-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.runtime-row-actions .care-link-button {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid #eadde0;
  border-radius: 6px;
  background: #fff;
  color: #933f50;
  font-size: 12px;
  font-weight: 750;
}

.runtime-row-actions .care-link-button:hover {
  background: #fdf8f5;
}

.runtime-admin-grid input:not([type="checkbox"]),
.runtime-admin-grid select {
  width: 100%;
  min-height: 30px;
  padding: 0 7px;
  border: 1px solid #eadde0;
  border-radius: 6px;
  background: #fff;
  color: #2f3239;
  font-family: inherit;
  font-size: 12px;
  font-weight: 650;
}

.runtime-admin-grid select[multiple] {
  min-height: 64px;
  padding: 6px 8px;
}

.runtime-admin-grid .runtime-readonly-input {
  border-color: #eadde0;
  background: #faf5f4;
  color: #756c70;
  cursor: not-allowed;
}

.runtime-calendar-availability {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid #f0e6e8;
  background: #fffdfc;
}

.runtime-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(15, 23, 42, 0.38);
}

.runtime-calendar-availability-modal {
  position: fixed;
  z-index: 71;
  top: 50%;
  left: 50%;
  width: min(860px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 1px solid #eadde0;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

.runtime-calendar-availability-head,
.runtime-availability-form,
.runtime-availability-rules article {
  display: flex;
  align-items: center;
  gap: 10px;
}

.runtime-calendar-availability-head {
  justify-content: space-between;
}

.runtime-calendar-availability-head strong,
.runtime-calendar-availability-head small,
.runtime-calendar-availability-head span {
  display: block;
}

.runtime-calendar-availability-head strong {
  color: #2f3239;
  font-size: 15px;
  font-weight: 900;
}

.runtime-calendar-availability-head small {
  color: #756c70;
  font-size: 11px;
  font-weight: 750;
}

.runtime-calendar-availability label,
.runtime-availability-form label {
  display: grid;
  gap: 4px;
  color: #756c70;
  font-size: 11px;
  font-weight: 850;
}

.runtime-calendar-availability input:not([type="checkbox"]),
.runtime-calendar-availability select {
  min-height: 32px;
  border: 1px solid #eadde0;
  border-radius: 7px;
  padding: 0 8px;
  background: #fff;
  color: #2f3239;
  font-family: inherit;
  font-size: 12px;
  font-weight: 750;
}

.runtime-availability-form {
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid #f0e6e8;
  border-radius: 8px;
  background: #fff;
}

.runtime-availability-form fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 250px;
  margin: 0;
  padding: 0;
  border: 0;
}

.runtime-availability-form legend {
  width: 100%;
  color: #756c70;
  font-size: 11px;
  font-weight: 900;
}

.runtime-availability-form fieldset label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid #eadde0;
  border-radius: 999px;
  background: #fffdfc;
  color: #414047;
}

.runtime-availability-form .runtime-availability-apply-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #eadde0;
  border-radius: 7px;
  background: #fffdfc;
  color: #414047;
}

.runtime-availability-rules {
  display: grid;
  gap: 6px;
}

.runtime-availability-rules article {
  justify-content: space-between;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #f0e6e8;
  border-radius: 8px;
  background: #fff;
}

.runtime-availability-rules strong,
.runtime-availability-rules span {
  display: block;
}

.runtime-availability-rules strong {
  color: #2f3239;
  font-size: 12px;
  font-weight: 900;
}

.runtime-availability-rules span {
  color: #756c70;
  font-size: 11px;
  font-weight: 750;
}

.runtime-delete-visit-button:disabled {
  border-color: #f0e6e8;
  background: #fffdfc;
  color: #a79da0;
  cursor: not-allowed;
}

.runtime-source-selected-cell {
  background: #fdf3f4;
  box-shadow: inset 0 0 0 1px #ddaab3;
}

.runtime-source-tree-manager {
  display: grid;
  gap: 0;
  min-height: 430px;
  background: #fff;
}

.runtime-source-tree-head,
.runtime-source-tree-row {
  display: grid;
  grid-template-columns: minmax(280px, 1.6fr) minmax(105px, 0.45fr) minmax(82px, 0.35fr) minmax(220px, 0.8fr);
  align-items: center;
}

.runtime-source-tree-head {
  min-height: 38px;
  border-top: 1px solid #f5edef;
  background: #fffdfc;
  color: #625a5e;
}

.runtime-source-tree-head b {
  padding: 8px 10px;
  border-inline-start: 1px solid #f5edef;
  font-size: 12px;
  font-weight: 850;
}

.runtime-source-tree-body {
  display: grid;
  align-content: start;
  min-height: 345px;
}

.runtime-source-tree-node {
  display: grid;
  background: #fff;
}

.runtime-source-tree-node.active > .runtime-source-tree-row {
  background: #fdf3f4;
  box-shadow: inset 0 0 0 1px #ddaab3;
}

.runtime-source-tree-row {
  min-height: 46px;
  border-top: 1px solid #f5edef;
}

.runtime-source-tree-row > span,
.runtime-source-tree-name {
  min-height: 46px;
  padding: 7px 9px;
  border-inline-start: 1px solid #f5edef;
}

.runtime-source-tree-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.runtime-source-tree-indent {
  flex: 0 0 calc((var(--source-level) - 1) * 22px);
}

.runtime-source-tree-name svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: #933f50;
}

.runtime-source-tree-name input {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid #eadde0;
  border-radius: 6px;
  background: #fff;
  color: #2f3239;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
}

.runtime-source-tree-level {
  display: flex;
  align-items: center;
  color: #625a5e;
  font-size: 12px;
  font-weight: 800;
}

.runtime-source-tree-actions {
  gap: 6px;
  flex-wrap: wrap;
}

.runtime-source-tree-note {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 12px;
  border-top: 1px solid #f0e6e8;
  background: #fffdfc;
  color: #756c70;
  font-size: 12px;
  font-weight: 750;
}

.runtime-source-tree-note svg {
  width: 16px;
  height: 16px;
  color: #933f50;
}

.runtime-source-cascade .runtime-source-tree-note {
  grid-column: 1 / -1;
}

.runtime-source-empty {
  margin: 16px;
}

.runtime-source-cascade {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 0;
  min-height: 430px;
  background: #fff;
  overflow-x: auto;
}

.runtime-source-cascade-column {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  min-width: 210px;
  border-top: 1px solid #f5edef;
  border-inline-start: 1px solid #f5edef;
  background: var(--source-level-soft, #fff);
}

.runtime-source-cascade-column.level-1 {
  --source-level: #933f50;
  --source-level-soft: #fdf3f4;
  --source-level-line: #99d8d0;
}

.runtime-source-cascade-column.level-2 {
  --source-level: #6d4c1f;
  --source-level-soft: #fff8e8;
  --source-level-line: #f4c86a;
}

.runtime-source-cascade-column.level-3 {
  --source-level: #365c9a;
  --source-level-soft: #fdf3f4;
  --source-level-line: #9cc2f0;
}

.runtime-source-cascade-column.level-4 {
  --source-level: #7f3f6d;
  --source-level-soft: #fdf2f8;
  --source-level-line: #e9a9cf;
}

.runtime-source-cascade-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 58px;
  padding: 9px;
  border-bottom: 1px solid var(--source-level-line, #f5edef);
  background: var(--source-level-soft, #fffdfc);
}

.runtime-source-cascade-head div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.runtime-source-cascade-head strong,
.runtime-source-cascade-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-source-cascade-head strong {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--source-level, #2f3239);
  font-size: 13px;
  font-weight: 900;
}

.runtime-source-cascade-head strong span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--source-level, #2f3239);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.runtime-source-cascade-head span {
  color: #756c70;
  font-size: 11px;
  font-weight: 750;
}

.runtime-source-cascade-head .care-link-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-height: 28px;
  padding-inline: 8px;
}

.runtime-source-cascade-head .care-link-button svg {
  width: 13px;
  height: 13px;
}

.runtime-source-collapse {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--source-level, #933f50);
}

.runtime-source-cascade-list {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 330px;
  padding: 9px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--source-level, #933f50) 8%, transparent), transparent 48%);
}

.runtime-source-cascade-column.collapsed {
  grid-template-rows: auto;
  min-width: 168px;
}

.runtime-source-cascade-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(116px, 0.9fr);
  align-items: center;
  gap: 5px;
  padding: 6px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fff;
  border-inline-start: 4px solid var(--source-level-line, #eadde0);
  box-shadow: 0 8px 18px rgba(73, 43, 50, 0.04);
}

.runtime-source-cascade-row.active {
  border-color: var(--source-level, #933f50);
  background: var(--source-level-soft, #fdf3f4);
  box-shadow: inset 0 0 0 1px var(--source-level-line, #ddaab3);
}

.runtime-source-cascade-row.runtime-new-row {
  border: 2px solid #f59e0b;
  border-inline-start-width: 5px;
  background: #fff4bd;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
  animation: runtime-new-row-pulse 900ms ease-out;
}

.runtime-source-cascade-row.runtime-new-row input,
.runtime-source-cascade-row.runtime-new-row select {
  border-color: #d97706;
  background: #fffdf5;
}

.runtime-source-cascade-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #eadde0;
  border-radius: 7px;
  background: #fff;
  color: var(--source-level, #933f50);
  cursor: pointer;
}

.runtime-source-cascade-select svg {
  width: 15px;
  height: 15px;
}

.runtime-source-cascade-row input,
.runtime-source-cascade-row select {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 0 7px;
  border: 1px solid #eadde0;
  border-radius: 6px;
  background: #fff;
  color: #2f3239;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
}

.runtime-source-domain-select {
  max-width: none;
}

.runtime-source-cascade-row .runtime-active-toggle,
.runtime-source-cascade-row .care-link-button {
  min-height: 28px;
  padding: 0 7px;
  white-space: nowrap;
}

.runtime-source-cascade-row .runtime-active-toggle {
  grid-column: 2;
  justify-self: start;
}

.runtime-source-cascade-row .care-link-button {
  grid-column: 3;
  justify-self: start;
}

.runtime-source-cascade-row small {
  grid-column: 2 / -1;
  color: #756c70;
  font-size: 11px;
  font-weight: 750;
}

.runtime-source-cascade-empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 18px 10px;
  border: 1px dashed #eadde0;
  border-radius: 8px;
  background: #fffdfc;
  color: #756c70;
  text-align: center;
  font-size: 12px;
  font-weight: 750;
}

.runtime-source-cascade-empty svg {
  width: 18px;
  height: 18px;
  color: #a79da0;
}

.runtime-source-designer {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid #f0e6e8;
  background: #fffdfc;
}

.runtime-source-designer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.runtime-source-designer-head strong,
.runtime-source-designer-head small {
  display: block;
}

.runtime-source-designer-head strong {
  color: #2f3239;
  font-size: 15px;
  font-weight: 900;
}

.runtime-source-designer-head small {
  color: #756c70;
  font-size: 12px;
  font-weight: 750;
}

.runtime-source-designer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  overflow-x: auto;
}

.runtime-source-designer-level {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 170px;
  padding: 10px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fff;
}

.runtime-source-designer-level > strong {
  color: #625a5e;
  font-size: 12px;
  font-weight: 900;
}

.runtime-source-designer-level button,
.runtime-source-graph-level button,
.runtime-source-graph-node button {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid #dce5ee;
  border-radius: 7px;
  background: #fff;
  color: #414047;
  cursor: pointer;
  font-family: inherit;
  text-align: start;
}

.runtime-source-designer-level button:hover,
.runtime-source-graph-level button:hover,
.runtime-source-graph-node button:hover {
  border-color: #ddaab3;
  background: #f4fbfa;
}

.runtime-source-designer-level button.active,
.runtime-source-graph-level button.active,
.runtime-source-graph-node button.active {
  border-color: #933f50;
  background: #fdf0f2;
  color: #933f50;
}

.runtime-source-designer-level button span,
.runtime-source-graph-level button span,
.runtime-source-graph-node button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 850;
}

.runtime-source-designer-level button small,
.runtime-source-graph-level button small,
.runtime-source-graph-node button small,
.runtime-source-designer-level em,
.runtime-source-graph-level em {
  color: #756c70;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.runtime-domain-picker {
  position: relative;
  width: 100%;
}

.runtime-domain-picker summary {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid #eadde0;
  border-radius: 6px;
  background: #fff;
  color: #2f3239;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-domain-picker[open] summary {
  border-color: #933f50;
  box-shadow: 0 0 0 2px rgba(147, 63, 80, 0.12);
}

.runtime-domain-list {
  position: absolute;
  z-index: 70;
  inset-inline: 0;
  top: calc(100% + 4px);
  display: grid;
  gap: 2px;
  max-height: 168px;
  padding: 7px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fff;
  overflow: auto;
  box-shadow: 0 14px 30px rgba(73, 43, 50, 0.14);
}

.runtime-choice-select {
  position: relative;
  min-width: 0;
  width: 100%;
}

.runtime-native-select-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.runtime-single-picker {
  position: relative;
  width: 100%;
}

.runtime-single-picker > summary {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid #eadde0;
  border-radius: 6px;
  background: #fff;
  color: #2f3239;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-single-picker[open] > summary {
  border-color: #a4485a;
  box-shadow: 0 0 0 2px rgba(164, 72, 90, 0.12);
}

.runtime-single-list {
  position: absolute;
  z-index: 90;
  inset-inline: 0;
  top: calc(100% + 4px);
  display: grid;
  gap: 6px;
  min-width: 220px;
  max-height: 240px;
  padding: 7px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fff;
  overflow: auto;
  box-shadow: 0 16px 34px rgba(73, 43, 50, 0.18);
}

.runtime-single-options {
  display: grid;
  gap: 2px;
}

.runtime-single-option {
  min-height: 30px;
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #4c474b;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: start;
}

.runtime-single-option:hover,
.runtime-single-option:focus-visible {
  background: #faf5f4;
  outline: none;
}

.runtime-single-option.selected {
  background: #f9e8eb;
  color: #933f50;
  font-weight: 900;
}

.runtime-choice-search {
  width: 100%;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #e2d4d7;
  border-radius: 6px;
  background: #fff;
  color: #2f3239;
  font-family: inherit;
  font-size: 12px;
  font-weight: 650;
}

.runtime-choice-search:focus {
  border-color: #a4485a;
  outline: 3px solid rgba(164, 72, 90, 0.12);
}

.runtime-domain-list > .runtime-choice-search {
  position: sticky;
  z-index: 2;
  top: -7px;
  margin-bottom: 4px;
}

.runtime-choice-empty {
  padding: 8px;
  color: #756c70;
  text-align: center;
  font-weight: 700;
}

.runtime-select-search {
  min-height: 28px;
  background: #fffdfc;
}

.runtime-domain-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  padding: 3px 5px;
  border-radius: 6px;
  color: #4c474b;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.runtime-domain-list label:hover {
  background: #faf5f4;
}

.runtime-domain-list .runtime-choice-all {
  margin-bottom: 3px;
  border-bottom: 1px solid #f0e6e8;
  border-radius: 0;
  color: #933f50;
  font-weight: 850;
}

.runtime-domain-list .runtime-choice-all:hover {
  background: #ecf8f6;
}

.runtime-domain-list input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  min-height: 0;
  padding: 0;
  border-radius: 4px;
  accent-color: #933f50;
}

.runtime-active-toggle {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #cce8d6;
  border-radius: 999px;
  background: #f0f9f3;
  color: #217047;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 750;
}

.runtime-active-toggle.off {
  border-color: #ead6d6;
  background: #fbf2f2;
  color: #9a4b4b;
}

.runtime-row-actions {
  display: flex;
  align-items: center;
}

.run-backend-panel {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 36px);
  padding: 12px;
  border: 1px solid #1e293b;
  border-radius: 8px;
  background: #0b1220;
  color: #fdf0f2;
  overflow: auto;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.24);
}

.run-backend-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.run-backend-head strong,
.run-backend-head small {
  display: block;
}

.run-backend-head strong {
  color: #fff;
  font-size: 18px;
  font-weight: 950;
}

.run-backend-head small {
  color: #93a4bd;
  font-size: 12px;
  font-weight: 800;
}

.run-backend-head .icon-button {
  border-color: #4c474b;
  background: #111827;
  color: #fdf0f2;
}

.run-backend-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.run-backend-meta span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  border: 1px solid #263244;
  border-radius: 7px;
  background: #111827;
  color: #e2d4d7;
  font-size: 11px;
  font-weight: 900;
}

.run-db-code-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.run-db-code-menu button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; border: 1px solid #4c474b; border-radius: 7px; background: #111827; color: #dbeafe; cursor: pointer; font: inherit; font-size: 12px; font-weight: 900; }
.run-db-code-menu button:hover { border-color: #38bdf8; color: #fff; }
.run-db-code-menu svg { width: 15px; height: 15px; }
.full-code-panel { overflow: hidden; grid-template-rows: auto auto minmax(0, 1fr); }
.cockpit-code-view { padding: 0; overflow: hidden; }
.cockpit-code-view .full-code-panel { position: static; width: 100%; min-height: calc(100vh - 145px); max-height: calc(100vh - 110px); border: 0; border-radius: 8px; box-shadow: none; }
.cockpit-code-view .full-code-layout { grid-template-columns: 220px minmax(0, 1fr); }
.full-code-search { display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid #4c474b; border-radius: 7px; background: #111827; }
.full-code-search svg { width: 15px; height: 15px; color: #93c5fd; }
.full-code-search input { width: 100%; min-height: 34px; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 12px; }
.full-code-layout { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; min-height: 0; overflow: hidden; }
.full-code-layout nav { display: grid; align-content: start; gap: 5px; overflow-y: auto; }
.full-code-layout nav button { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; align-items: center; min-height: 38px; padding: 6px 7px; border: 1px solid #27364b; border-radius: 6px; background: #111827; color: #b9c7da; cursor: pointer; text-align: start; }
.full-code-layout nav button.active { border-color: #38bdf8; background: #0c4a6e; color: #fff; }
.full-code-layout nav svg { width: 14px; height: 14px; }
.full-code-layout nav span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 850; direction: ltr; text-align: left; }
.full-code-layout nav small { grid-column: 2; color: #7f91aa; font-size: 9px; }
.full-code-layout pre { min-height: 0; margin: 0; padding: 10px; border: 1px solid #27364b; border-radius: 7px; background: #050a13; overflow: auto; direction: ltr; text-align: left; }
.full-code-layout code { color: #dbeafe; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }

.run-backend-meta svg {
  width: 13px;
  height: 13px;
  color: #38bdf8;
}

.run-backend-stack {
  display: grid;
  gap: 12px;
}

.run-code-card {
  overflow: hidden;
  border: 1px solid #263244;
  border-radius: 8px;
  background: #090f1c;
}

.run-code-card.active {
  border-color: #facc15;
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.2);
}

.run-code-title {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-bottom: 1px solid #263244;
  background: #111827;
}

.run-code-title span,
.run-code-title strong {
  display: block;
}

.run-code-title span {
  color: #7dd3fc;
  direction: ltr;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
}

.run-code-title strong {
  color: #fffdfc;
  font-size: 13px;
  font-weight: 900;
}

.run-code-card pre {
  margin: 0;
  padding: 10px 0;
  overflow-x: auto;
  direction: ltr;
}

.run-code-card code {
  display: grid;
  counter-reset: run-code-line;
  color: #e2d4d7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.65;
  text-align: left;
}

.run-code-card code span {
  display: block;
  min-width: max-content;
  padding: 0 12px;
  white-space: pre;
  counter-increment: run-code-line;
}

.run-code-card code span::before {
  content: counter(run-code-line);
  display: inline-block;
  width: 22px;
  margin-right: 12px;
  color: #756c70;
  text-align: right;
}

.run-code-card code span.running {
  background: rgba(250, 204, 21, 0.14);
  color: #fff7d6;
}

.run-code-card code span.running::before {
  color: #facc15;
}

.run-db-table-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.run-db-table-list button,
.db-tree button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid #263244;
  border-radius: 7px;
  background: #111827;
  color: #e2d4d7;
  cursor: pointer;
  font-family: inherit;
  font-weight: 900;
}

.run-db-table-list button {
  padding: 0 9px;
}

.run-db-table-list button.active,
.db-tree button.active {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  color: #fff;
}

.run-db-table-list svg,
.db-tree svg {
  width: 15px;
  height: 15px;
  color: #38bdf8;
}

.run-db-table-list small,
.db-tree small {
  margin-inline-start: auto;
  color: #a79da0;
}

.run-db-stack {
  display: grid;
  gap: 12px;
}

.run-db-card {
  overflow: hidden;
  border: 1px solid #263244;
  border-radius: 8px;
  background: #090f1c;
}

.run-db-card.active {
  border-color: #38bdf8;
}

.run-db-grid,
.db-grid-large {
  display: grid;
  grid-template-columns: repeat(var(--db-cols), minmax(110px, 1fr));
  overflow-x: auto;
}

.run-db-grid b,
.run-db-grid span,
.db-grid-large b,
.db-grid-large span {
  min-height: 34px;
  padding: 8px;
  border-top: 1px solid #1e293b;
  border-inline-start: 1px solid #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
}

.run-db-grid b,
.db-grid-large b {
  background: #111827;
  color: #93c5fd;
  font-weight: 950;
}

.run-db-grid span,
.db-grid-large span {
  color: #dbe7f5;
}

.run-db-grid span.loaded,
.db-grid-large span.loaded {
  background: rgba(56, 189, 248, 0.16);
  color: #e0f2fe;
}

.run-db-grid span.linked,
.db-grid-large span.linked {
  background: rgba(34, 197, 94, 0.14);
  color: #dcfce7;
}

.run-db-grid span.planned,
.db-grid-large span.planned {
  background: rgba(250, 204, 21, 0.16);
  color: #fef9c3;
}

.run-fe-flow {
  display: grid;
  gap: 8px;
}

.run-fe-flow div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #263244;
  border-radius: 8px;
  background: #111827;
}

.run-fe-flow div.active {
  border-color: #facc15;
  background: rgba(250, 204, 21, 0.1);
}

.run-fe-flow strong,
.run-fe-flow span {
  display: block;
}

.run-fe-flow strong {
  color: #fff;
  font-size: 13px;
}

.run-fe-flow span {
  color: #a79da0;
  font-size: 12px;
  font-weight: 800;
}

.db-explorer {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 330px;
  gap: 16px;
  align-items: start;
}

.db-tree,
.db-table-workspace,
.db-record {
  min-width: 0;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(73, 43, 50, 0.06);
}

.db-tree,
.db-record {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.db-tree button {
  border-color: #f0e6e8;
  background: #fffdfc;
  color: #414047;
  padding: 0 10px;
}

.db-tree button.active {
  border-color: #933f50;
  background: #eef8f7;
  color: #933f50;
}

.db-tree-head strong,
.db-tree-head span {
  display: block;
}

.db-tree-head strong {
  color: #2f3239;
  font-size: 16px;
  font-weight: 950;
}

.db-tree-head span {
  color: #756c70;
  font-size: 12px;
  font-weight: 800;
}

.db-table-workspace {
  overflow: hidden;
}

.db-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid #f0e6e8;
}

.db-toolbar h3 {
  margin: 0;
  color: #2f3239;
  font-size: 24px;
  font-weight: 950;
}

.db-search {
  position: relative;
  min-width: 260px;
}

.db-search svg {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 16px;
  height: 16px;
  color: #756c70;
  transform: translateY(-50%);
}

.db-search input {
  width: 100%;
  min-height: 40px;
  padding: 0 36px 0 10px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fffdfc;
  font-family: inherit;
  font-weight: 850;
}

.db-grid-large {
  min-width: 760px;
}

.db-grid-large b,
.db-grid-large span {
  border-color: #f0e6e8;
  color: #414047;
}

.db-grid-large b {
  background: #e7edf5;
  color: #625a5e;
}

.db-grid-large span.loaded {
  background: #e0f2fe;
  color: #075985;
}

.db-grid-large span.linked {
  background: #dcfce7;
  color: #166534;
}

.db-grid-large span.planned {
  background: #fef9c3;
  color: #854d0e;
}

.db-record pre {
  max-height: 420px;
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  background: #0b1220;
  color: #fdf0f2;
  direction: ltr;
  overflow: auto;
  font-size: 12px;
  line-height: 1.55;
}

.db-legend {
  display: grid;
  gap: 6px;
}

.db-legend span {
  min-height: 30px;
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
}

.db-legend .loaded {
  background: #e0f2fe;
  color: #075985;
}

.db-legend .linked {
  background: #dcfce7;
  color: #166534;
}

.db-legend .planned {
  background: #fef9c3;
  color: #854d0e;
}

.run-sim-head.new {
  margin-bottom: 14px;
  border-color: #eadde0;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(73, 43, 50, 0.06);
}

.run-sim-head.new h3 {
  font-size: 28px;
  font-weight: 900;
}

.run-sim-head.new.calendar-context {
  align-items: center;
}

.run-sim-head.new.customer-context {
  margin-bottom: 8px;
  padding: 9px 12px;
}

.run-sim-head.new.customer-context h3 {
  font-size: 24px;
}

.run-context-title {
  display: block;
  color: #2f3239;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.3;
}

.runtime-day-panel,
.runtime-search-panel {
  display: grid;
  gap: 14px;
}

.runtime-calendar-toolbar {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 280px;
  gap: 12px;
  align-items: stretch;
}

.runtime-date-switcher,
.runtime-calendar-filters,
.runtime-day-note {
  min-width: 0;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(73, 43, 50, 0.05);
}

.runtime-date-switcher {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  gap: 6px;
  align-items: center;
  padding: 8px;
  text-align: center;
}

.runtime-date-field {
  position: relative;
  display: grid;
  gap: 2px;
  min-width: 0;
  align-content: center;
}

.runtime-date-field strong {
  display: block;
  color: #2f3239;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.1;
}

.runtime-date-field input {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
  opacity: 0;
}

.runtime-date-switcher strong,
.runtime-date-switcher span,
.runtime-day-note strong,
.runtime-day-note span {
  display: block;
}

.runtime-date-switcher strong {
  color: #2f3239;
  font-size: 19px;
  font-weight: 900;
}

.runtime-date-switcher span,
.runtime-day-note span {
  color: #756c70;
  font-size: 12px;
  font-weight: 800;
}

.runtime-calendar-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.runtime-calendar-filters span {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #f0e6e8;
  border-radius: 7px;
  background: #fffdfc;
  color: #414047;
  font-size: 13px;
  font-weight: 800;
}

.runtime-day-note {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 14px;
}

.runtime-day-note strong {
  color: #2f3239;
  font-size: 15px;
  font-weight: 900;
}

.runtime-day-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.runtime-day-stats div {
  min-height: 82px;
  padding: 14px;
  border: 1px solid #eadde0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(73, 43, 50, 0.05);
}

.runtime-day-stats strong,
.runtime-day-stats span {
  display: block;
}

.runtime-day-stats strong {
  color: #2f3239;
  font-size: 28px;
}

.runtime-day-stats span {
  margin-bottom: 4px;
  color: #756c70;
  font-size: 12px;
  font-weight: 800;
}

.runtime-day-table,
.runtime-search-card,
.runtime-customer-card,
.runtime-history-panel,
.runtime-visit-card,
.runtime-treatment-table {
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(73, 43, 50, 0.06);
}

.runtime-day-table {
  --runtime-day-grid-columns: 44px 64px 86px 92px 110px 132px 92px 112px 250px 82px 104px minmax(220px, 1fr);
  position: relative;
  overflow-x: auto;
}

.runtime-search-card,
.runtime-customer-card,
.runtime-history-panel,
.runtime-visit-card,
.runtime-treatment-table {
  overflow: hidden;
}

.runtime-day-head,
.runtime-day-row {
  display: grid;
  grid-template-columns: var(--runtime-day-grid-columns);
  gap: 0;
  align-items: center;
}

.runtime-day-head {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 38px;
  background: #e7edf5;
  color: #625a5e;
  font-size: 11px;
  font-weight: 900;
}

.runtime-day-row {
  position: relative;
  min-height: 30px;
  border-top: 1px solid #f0e6e8;
  background: #fff;
}

.runtime-day-head span,
.runtime-day-row > span,
.runtime-day-row > strong,
.runtime-table-customer {
  display: flex;
  align-items: center;
  min-height: inherit;
  padding: 0 8px;
  border-inline-start: 1px solid #f0e6e8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-day-row.planned {
  background: #fff3fb;
}

.runtime-day-row.done {
  background: #f5f9fd;
}

.runtime-day-row.empty-slot {
  color: #a79da0;
  background: #fbfdff;
  cursor: pointer;
}

.runtime-day-row.selected {
  background: #0f7dcc;
  color: #fff;
}

.runtime-day-row.selected-for-schedule {
  background: #fdf0f2;
  color: #933f50;
  box-shadow: inset 0 0 0 1px #933f50;
}

.runtime-day-row.blocked-slot {
  background: repeating-linear-gradient(
    -45deg,
    #edf4f7,
    #edf4f7 8px,
    #f7fafc 8px,
    #f7fafc 16px
  );
  color: #756c70;
  cursor: not-allowed;
}

.runtime-day-row:not(.blocked-slot):hover {
  background: #eaf6ff;
}

.runtime-day-row.selected span,
.runtime-day-row.selected strong,
.runtime-day-row.selected .runtime-table-customer {
  color: #fff;
}

.runtime-slot-status {
  color: #a79da0;
  font-size: 12px;
  font-weight: 700;
}

.runtime-occupied-strip {
  grid-column: 3 / -1;
  display: flex !important;
  align-items: center;
  min-width: 0;
  min-height: 30px;
  padding: 0 10px;
  border-inline-start: 4px solid #756c70;
  background: rgba(100, 116, 139, 0.1);
  color: #a79da0 !important;
}

.runtime-occupied-strip b {
  flex: 0 0 auto;
  color: #a79da0;
  font-size: 12px;
  font-weight: 900;
}

.runtime-day-row strong,
.runtime-day-row span,
.runtime-day-row small {
  display: block;
}

.runtime-day-row span,
.runtime-day-row small,
.runtime-empty {
  color: #756c70;
  font-size: 12px;
  font-weight: 700;
}

.runtime-appointment-note {
  justify-content: space-between;
  gap: 8px;
}

.runtime-appointment-note b {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-delete-visit-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 24px;
  padding: 0 7px;
  border: 1px solid rgba(190, 18, 60, 0.2);
  border-radius: 7px;
  background: #fff;
  color: #be123c;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
}

.runtime-delete-visit-button:hover {
  border-color: rgba(190, 18, 60, 0.45);
  background: #fff1f2;
}

.runtime-delete-visit-button svg {
  width: 13px;
  height: 13px;
}

.runtime-time strong {
  font-size: 20px;
}

.runtime-scheduler-panel {
  position: absolute;
  z-index: 12;
  inset-block-start: calc(100% - 2px);
  inset-inline-start: 72px;
  width: min(780px, calc(100% - 88px));
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #cbd8e6;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(73, 43, 50, 0.18);
}

.runtime-scheduler-panel::before {
  content: "";
  position: absolute;
  inset-block-start: -8px;
  inset-inline-start: 22px;
  width: 14px;
  height: 14px;
  border-top: 1px solid #cbd8e6;
  border-inline-start: 1px solid #cbd8e6;
  background: #fff;
  transform: rotate(45deg);
}

.runtime-scheduler-head,
.runtime-scheduler-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.runtime-scheduler-head div {
  display: grid;
  gap: 3px;
}

.runtime-scheduler-head strong {
  color: #2f3239;
  font-size: 18px;
  font-weight: 900;
}

.runtime-scheduler-head small {
  color: #756c70;
  font-size: 12px;
  font-weight: 750;
}

.runtime-scheduler-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.7fr);
  gap: 10px;
}

.runtime-scheduler-search,
.runtime-scheduler-test {
  display: grid;
  gap: 6px;
}

.runtime-scheduler-search span,
.runtime-scheduler-test span,
.runtime-scheduler-summary span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #756c70;
  font-size: 12px;
  font-weight: 800;
}

.runtime-scheduler-search svg,
.runtime-scheduler-test svg,
.runtime-scheduler-summary svg {
  width: 15px;
  height: 15px;
  color: #933f50;
}

.runtime-scheduler-search input,
.runtime-scheduler-test select {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #eadde0;
  border-radius: 7px;
  background: #fff;
  color: #2f3239;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
}

.runtime-scheduler-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.runtime-scheduler-results article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fffdfc;
  color: #2f3239;
}

.runtime-scheduler-results article > button {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  text-align: start;
}

.runtime-scheduler-results article.active {
  border-color: #933f50;
  background: #fdf0f2;
}

.runtime-scheduler-results article > button strong {
  font-size: 13px;
  font-weight: 900;
}

.runtime-scheduler-results article > button span,
.runtime-scheduler-empty {
  color: #756c70;
  font-size: 12px;
  font-weight: 700;
}

.runtime-scheduler-summary {
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid #f0e6e8;
}

.runtime-scheduler-summary .care-button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.runtime-activity-cell strong {
  color: #2f3239;
  font-size: 15px;
}

.runtime-customer-link {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 58px;
  padding: 9px;
  border: 1px solid #f0e6e8;
  border-radius: 10px;
  background: #fffdfc;
  color: #24324a;
  cursor: pointer;
  text-align: start;
}

.runtime-customer-link:hover {
  border-color: var(--pink);
  background: #fff4fa;
}

.runtime-table-customer {
  border: 0;
  background: transparent;
  color: #933f50;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  text-align: start;
}

.runtime-table-customer:hover {
  color: #bf176d;
  text-decoration: underline;
}

.runtime-day-head > span,
.runtime-day-row > span:not(.runtime-occupied-strip),
.runtime-day-row > strong,
.runtime-day-row > .runtime-table-customer {
  display: flex;
  align-items: center;
  min-height: inherit;
  padding: 0 8px;
  border-inline-start: 1px solid #f0e6e8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-day-row.planned > span,
.runtime-day-row.planned > strong,
.runtime-day-row.planned > .runtime-table-customer,
.runtime-day-row.done > span,
.runtime-day-row.done > strong,
.runtime-day-row.done > .runtime-table-customer {
  display: flex;
  align-items: center;
  min-height: inherit;
  color: #000;
  font-weight: 400;
}

.runtime-day-row.planned > .runtime-appointment-note > b,
.runtime-day-row.done > .runtime-appointment-note > b {
  color: #000;
  font-weight: 400;
}

.runtime-day-row.planned > span:nth-child(4),
.runtime-day-row.planned > span:nth-child(5),
.runtime-day-row.done > span:nth-child(4),
.runtime-day-row.done > span:nth-child(5) {
  font-weight: 700;
}

.runtime-search-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.runtime-search-box {
  position: relative;
  display: block;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.runtime-search-box svg {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 18px;
  height: 18px;
  color: #756c70;
  transform: translateY(-50%);
}

.runtime-search-box input {
  width: 100%;
  min-height: 62px;
  padding: 0 44px 0 14px;
  border: 0;
  background: #fff;
  color: #2f3239;
  font-weight: 800;
  font-size: 17px;
}

.runtime-search-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.runtime-search-fields span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  border: 1px solid #f0e6e8;
  border-radius: 7px;
  background: #fffdfc;
  color: #625a5e;
  font-size: 12px;
  font-weight: 800;
}

.runtime-search-fields svg {
  width: 15px;
  height: 15px;
  color: #933f50;
}

.runtime-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
}

.runtime-recent-head strong,
.runtime-recent-head span {
  display: block;
}

.runtime-recent-head strong {
  color: #2f3239;
  font-size: 18px;
  font-weight: 900;
}

.runtime-recent-head span {
  color: #756c70;
  font-size: 13px;
  font-weight: 700;
}

.runtime-customer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.runtime-customer-grid .runtime-empty-customer {
  grid-column: 1 / -1;
}

.runtime-customer-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 10px;
  width: 100%;
  color: inherit;
  text-align: start;
}

.runtime-customer-card-open {
  display: grid;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.runtime-customer-phone-actions {
  padding-top: 7px;
  border-top: 1px solid #f0e6e8;
}

.runtime-customer-card:hover {
  border-color: #933f50;
  box-shadow: 0 10px 24px rgba(147, 63, 80, 0.1);
  transform: translateY(-1px);
}

.runtime-customer-card-main {
  display: grid;
  grid-template-columns: clamp(92px, 38%, 108px) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  min-width: 0;
}

.runtime-customer-card-photo {
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  place-items: center;
  border: 1px solid #ecc7ce;
  border-radius: 9px;
  background: var(--care-primary-soft);
  color: var(--care-primary-dark);
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 5px 14px rgba(73, 43, 50, 0.09);
}

.runtime-customer-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.runtime-customer-card-photo.is-empty > span {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
}

.runtime-customer-card-details {
  display: grid;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.runtime-customer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
}

.runtime-customer-top > div {
  min-width: 0;
}

.runtime-customer-top h4 {
  overflow: hidden;
  margin: 0;
  color: #2f3239;
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-customer-top span,
.runtime-customer-card p,
.runtime-customer-card li {
  color: #625a5e;
  font-weight: 700;
}

.runtime-customer-top > div > span {
  font-size: 10.5px;
}

.runtime-customer-top > .care-chip {
  min-height: 22px;
  padding-inline: 7px;
  font-size: 10px;
}

.runtime-customer-domains {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  min-height: 30px;
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
}

.runtime-customer-domains span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-customer-domains svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #933f50;
}

.runtime-customer-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: #625a5e;
  font-size: 10.5px;
  font-weight: 800;
}

.runtime-customer-facts span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-customer-facts span svg {
  flex: 0 0 auto;
}

.runtime-customer-facts svg {
  width: 12px;
  height: 12px;
  color: var(--pink);
}

.runtime-customer-card ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0 18px 0 0;
}

.runtime-empty-customer {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 38px 24px;
  text-align: center;
}

.runtime-empty-customer strong {
  color: #2f3239;
  font-size: 20px;
  font-weight: 900;
}

.runtime-empty-customer span {
  color: #756c70;
  font-size: 14px;
  font-weight: 700;
}

.runtime-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: #e7f7f5;
  color: #933f50;
}

.runtime-empty-icon svg {
  width: 24px;
  height: 24px;
}

.runtime-new-customer {
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(16, 36, 63, 0.08);
}

.runtime-new-customer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.runtime-new-customer-head h4,
.runtime-new-customer-head p {
  margin: 0;
}

.runtime-new-customer-head h4 {
  color: #2f3239;
  font-size: 24px;
  font-weight: 900;
}

.runtime-new-customer-head p {
  margin-top: 6px;
  color: #756c70;
  font-size: 14px;
  font-weight: 700;
}

.runtime-new-customer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
}

.runtime-radio-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.runtime-radio-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid #eadde0;
  border-radius: 7px;
  background: #fffdfc;
  color: #2f3239;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
}

.runtime-radio-option:has(input:checked) {
  border-color: #933f50;
  background: #e7f7f5;
  color: #933f50;
}

.runtime-radio-option input {
  width: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: #933f50;
}

.runtime-radio-option span,
.runtime-demo-field .runtime-radio-option span {
  color: inherit;
  font-size: 13px;
  font-weight: 850;
}

.runtime-hair-booking-panel {
  border: 1px solid #cfe0da;
  border-radius: 12px;
  padding: 12px;
  background: #fbfefd;
}

.runtime-hair-quote-tools .runtime-hair-final-price-field input[readonly] {
  border: 2px solid #b65566;
  background: #fdf3f4;
  color: #07563d;
  font-size: 18px;
  font-weight: 950;
}

.runtime-hair-live-price {
  position: sticky;
  top: 8px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #b7d9cc;
  border-radius: 12px;
  background: rgba(248, 255, 252, 0.96);
  box-shadow: 0 10px 28px rgba(147, 63, 80, 0.12);
  backdrop-filter: blur(8px);
}

.runtime-hair-live-price > div {
  display: grid;
  gap: 3px;
  padding: 9px 12px;
  border-radius: 9px;
  background: #fdf8f5;
}

.runtime-hair-live-price span {
  color: #756c70;
  font-size: 11px;
  font-weight: 800;
}

.runtime-hair-live-price strong {
  color: #933f50;
  font-size: 19px;
  font-weight: 950;
}

.runtime-hair-live-price .runtime-hair-live-price-final {
  background: #a4485a;
}

.runtime-hair-live-price-final span,
.runtime-hair-live-price-final strong {
  color: #fff;
}

.runtime-hair-live-price-final strong {
  font-size: 25px;
}

.runtime-hair-deal > header > b {
  min-width: 140px;
  padding: 9px 14px;
  border-radius: 10px;
  background: #a4485a;
  color: #fff;
  font-size: 21px;
  font-weight: 950;
  text-align: center;
  box-shadow: 0 7px 18px rgba(164, 72, 90, 0.18);
}

@media (max-width: 700px) {
  .runtime-hair-live-price { grid-template-columns: 1fr; position: static; }
}

.runtime-hair-booking-panel > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #933f50;
  font-weight: 850;
}

.runtime-hair-booking-panel > summary svg {
  width: 17px;
  height: 17px;
}

.runtime-hair-booking-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.runtime-hair-booking-steps label,
.runtime-hair-booking-bank > label {
  display: grid;
  gap: 5px;
  color: #625a5e;
  font-size: 12px;
  font-weight: 750;
}

.runtime-hair-booking-steps select,
.runtime-hair-booking-bank input {
  min-width: 0;
  min-height: 40px;
  border: 1px solid #e2d4d7;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: #763544;
  font-family: inherit;
  font-weight: 750;
}

.runtime-hair-booking-steps select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.runtime-hair-booking-bank {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e1ebe7;
}

.runtime-hair-booking-areas {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.runtime-hair-booking-areas > strong,
.runtime-hair-booking-areas > small {
  grid-column: 1 / -1;
  color: #294f46;
  font-size: 12px;
}

.runtime-hair-booking-areas > small {
  color: #756c70;
  font-weight: 650;
}

.runtime-hair-booking-areas label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fff;
  color: #625a5e;
  font-size: 12px;
  cursor: pointer;
}

.runtime-hair-booking-areas label > input {
  flex: 0 0 auto;
  min-height: auto;
  padding: 0;
}

.runtime-hair-booking-areas label > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.runtime-hair-booking-areas label small {
  color: #756c70;
  font-size: 10px;
}

.runtime-hair-booking-areas label:has(input:checked) {
  border-color: #b65566;
  background: #fdf0f2;
  color: #933f50;
}

.runtime-hair-booking-areas label.is-purchased-area {
  border: 2px solid #4f8f7d;
  background: #eef8f4;
  box-shadow: 0 3px 10px rgba(79, 143, 125, 0.14);
  color: #245c4d;
}

.runtime-hair-booking-areas label.is-purchased-area:has(input:checked) {
  border-color: #a4485a;
  background: #fdf0f2;
  box-shadow: 0 3px 10px rgba(164, 72, 90, 0.16);
  color: #933f50;
}

.runtime-hair-booking-areas label > span > strong {
  display: flex;
  align-items: center;
  gap: 6px;
}

.runtime-hair-purchased-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #397565;
  color: #fff;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
}

.runtime-hair-booking-summary {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 8px 10px;
  border-radius: 9px;
  background: #f1f7f5;
}

.runtime-hair-booking-summary span,
.runtime-hair-booking-summary small {
  color: #756c70;
  font-size: 11px;
}

.runtime-hair-booking-summary strong {
  color: #933f50;
  font-size: 13px;
}

.runtime-hair-booking-summary .runtime-hair-booking-error {
  color: #a52b2b;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .runtime-hair-booking-steps,
  .runtime-hair-booking-bank {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .runtime-hair-booking-areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .runtime-hair-booking-steps,
  .runtime-hair-booking-bank {
    grid-template-columns: 1fr;
  }

  .runtime-hair-booking-areas {
    grid-template-columns: 1fr;
  }
}

.runtime-new-customer-notes {
  display: grid;
  gap: 8px;
  color: #2f3239;
  font-size: 13px;
  font-weight: 900;
}

.runtime-new-customer-notes span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.runtime-new-customer-notes svg {
  width: 16px;
  height: 16px;
  color: var(--pink);
}

.runtime-new-customer-notes textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  border: 1px solid #d8e1ef;
  border-radius: 8px;
  padding: 11px 12px;
  color: #2f3239;
  font: inherit;
  font-weight: 700;
}

.runtime-profile {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.runtime-profile-sidebar {
  display: grid;
  gap: 8px;
  min-width: 0;
  align-content: start;
}

.runtime-profile-photo-card {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 9px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(73, 43, 50, 0.06);
}

.runtime-profile-photo-card .runtime-back-button {
  width: 100%;
  min-height: 34px;
  justify-content: flex-start;
  padding-inline: 8px;
  border: 1px solid #eadde0;
  border-radius: 7px;
  background: #fffdfc;
}

.runtime-profile-photo-card .run-customer-photo-manager {
  justify-self: center;
}

.runtime-history-panel {
  display: grid;
  gap: 9px;
  padding: 10px;
}

.runtime-history-title strong,
.runtime-history-title span {
  display: block;
}

.runtime-history-title strong {
  color: #2f3239;
  font-size: 16px;
  font-weight: 900;
}

.runtime-history-title span {
  color: #756c70;
  font-size: 12px;
  font-weight: 800;
}

.runtime-history-tree {
  position: relative;
  display: grid;
  gap: 10px;
  max-height: 470px;
  overflow: auto;
  padding: 2px 2px 2px 6px;
}

.runtime-history-tree::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  right: 19px;
  width: 1px;
  background: linear-gradient(180deg, rgba(154, 180, 207, 0), rgba(154, 180, 207, 0.9) 12%, rgba(154, 180, 207, 0.9) 88%, rgba(154, 180, 207, 0));
}

.runtime-history-tree.is-empty {
  max-height: none;
  overflow: visible;
  padding: 0;
}

.runtime-history-tree.is-empty::before {
  display: none;
}

.runtime-history-node {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 86px;
  padding: 10px 9px 10px 11px;
  border: 1px solid rgba(214, 221, 232, 0.74);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  font-family: inherit;
  text-align: start;
  box-shadow: 0 8px 20px rgba(73, 43, 50, 0.035);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.runtime-history-node.active {
  border-color: rgba(191, 23, 109, 0.32);
  background: linear-gradient(90deg, rgba(255, 246, 251, 0.96), #fff);
  box-shadow: inset -3px 0 0 #bf176d, 0 12px 28px rgba(191, 23, 109, 0.08);
}

.runtime-history-node:hover {
  border-color: #9ab4cf;
  background: #fff;
  box-shadow: 0 14px 28px rgba(147, 63, 80, 0.08);
  transform: translateX(-2px);
}

.runtime-history-marker {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
}

.runtime-history-index {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 16px;
  padding: 0 5px;
  border: 1px solid #eadde0;
  border-radius: 999px;
  background: #fff;
  color: #756c70;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.runtime-history-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #516178;
  color: #fff;
  box-shadow: 0 7px 15px rgba(73, 43, 50, 0.14);
}

.runtime-history-node.visit-fit .runtime-history-icon,
.runtime-timeline-item.visit-fit .runtime-timeline-dot {
  background: #a4485a;
}

.runtime-history-node.visit-surgery .runtime-history-icon,
.runtime-timeline-item.visit-surgery .runtime-timeline-dot {
  background: #be123c;
}

.runtime-history-node.visit-post .runtime-history-icon,
.runtime-timeline-item.visit-post .runtime-timeline-dot,
.runtime-history-node.visit-follow .runtime-history-icon,
.runtime-timeline-item.visit-follow .runtime-timeline-dot {
  background: #2563eb;
}

.runtime-history-node.visit-sales .runtime-history-icon,
.runtime-timeline-item.visit-sales .runtime-timeline-dot {
  background: #a16207;
}

.runtime-history-node.visit-future .runtime-history-icon,
.runtime-timeline-item.visit-future .runtime-timeline-dot {
  background: #756c70;
}

.runtime-history-icon svg {
  width: 12px;
  height: 12px;
}

.runtime-history-content {
  min-width: 0;
}

.runtime-history-node strong,
.runtime-history-node span,
.runtime-history-node small {
  display: block;
}

.runtime-history-node strong {
  color: #2f3239;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
}

.runtime-history-node span {
  color: #4c474b;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
}

.runtime-history-node small {
  color: #756c70;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
}

.runtime-history-date {
  margin-bottom: 4px;
}

.runtime-history-subline {
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-history-calendar {
  display: none !important;
}

.runtime-history-meta,
.runtime-visit-assets {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.runtime-history-meta > div,
.runtime-visit-assets > div > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.runtime-history-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid rgba(147, 63, 80, 0.14);
  border-radius: 999px;
  background: rgba(147, 63, 80, 0.08);
  color: #0f4f58 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.15;
}

.runtime-history-pill.muted {
  border-color: #f0e6e8;
  background: #fffdfc;
  color: #a79da0 !important;
}

.runtime-history-pill svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.runtime-client-file {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.runtime-customer-identity-card {
  display: grid;
  grid-template-columns: 146px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 184px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(110deg, #fff 0%, var(--care-warm) 100%);
  box-shadow: 0 12px 30px rgba(73, 43, 50, 0.07);
}

.runtime-customer-photo-frame {
  position: relative;
  width: 146px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid #ecc7ce;
  border-radius: 11px;
  background: var(--care-primary-soft);
  box-shadow: 0 8px 20px rgba(73, 43, 50, 0.1);
}

.runtime-customer-photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 5px solid rgba(255, 255, 255, 0.72);
  border-radius: inherit;
  pointer-events: none;
}

.runtime-customer-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.runtime-customer-photo-placeholder {
  display: grid;
  height: 100%;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: var(--care-primary-dark);
  text-align: center;
}

.runtime-customer-photo-placeholder span {
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  font-size: 25px;
  font-weight: 900;
  box-shadow: 0 6px 18px rgba(147, 63, 80, 0.12);
}

.runtime-customer-photo-placeholder small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.runtime-customer-identity-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 5px;
  min-width: 0;
}

.runtime-customer-identity-copy > strong {
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
}

.runtime-customer-identity-copy > small,
.runtime-customer-identity-copy > p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.runtime-customer-identity-copy > p {
  max-width: 540px;
  margin: 3px 0 5px;
}

.runtime-customer-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.runtime-customer-photo-actions .care-button {
  min-height: 36px;
  padding-inline: 12px;
}

.runtime-customer-photo-actions svg {
  width: 16px;
  height: 16px;
}

.runtime-customer-photo-status {
  min-height: 18px;
  color: var(--care-primary-dark);
  font-size: 11px;
  font-weight: 850;
}

.runtime-customer-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 760px) {
  .runtime-customer-identity-card {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    min-height: 152px;
    padding: 11px;
  }

  .runtime-customer-photo-frame {
    width: 112px;
  }

  .runtime-customer-identity-copy > strong {
    font-size: 18px;
  }
}

@media (max-width: 520px) {
  .runtime-customer-identity-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .runtime-customer-photo-frame {
    width: min(180px, 72vw);
  }

  .runtime-customer-identity-copy,
  .runtime-customer-photo-actions {
    justify-items: center;
    justify-content: center;
  }
}

.runtime-quick-panels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}

.runtime-visit-quick-card {
  border-color: #f0e6e8;
  background: #fff;
}

.runtime-visit-quick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.runtime-visit-quick-head > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.runtime-visit-quick-head > div:first-child strong {
  color: #2f3239;
  font-size: 14px;
  font-weight: 950;
}

.runtime-visit-quick-head > div:first-child span {
  overflow: hidden;
  color: #756c70;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-visit-quick-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.runtime-quick-panels > .open {
  grid-column: 1 / -1;
  border-color: #a4485a;
  box-shadow: inset 0 3px 0 #a4485a, 0 16px 36px rgba(164, 72, 90, 0.12);
}

.runtime-quick-panels > [data-quick-panel] {
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 220ms ease;
}

.runtime-quick-panels > .open > :first-child {
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(164, 72, 90, 0.18);
}

.runtime-quick-panels > .open > :first-child strong {
  color: #933f50;
}

.runtime-quick-panels .runtime-quick-toggle {
  min-width: 72px;
  justify-content: center;
}

.runtime-quick-panels > .open .runtime-quick-toggle {
  border-color: #a4485a;
  background: #f9e8eb;
  color: #933f50;
}

.runtime-quick-panels > .runtime-quick-panel-focus {
  outline: 3px solid rgba(164, 72, 90, 0.2);
  outline-offset: 2px;
}

.runtime-quick-panels > .collapsed,
.runtime-quick-panels > .runtime-whatsapp-panel.closed {
  display: block;
  height: 42px;
  min-height: 40px;
  padding: 5px 7px;
  overflow: hidden;
  box-shadow: none;
}

.runtime-quick-panels > .collapsed .runtime-demographics-toggle-row,
.runtime-quick-panels > .runtime-whatsapp-panel.closed .runtime-whatsapp-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 28px;
}

.runtime-quick-panels > .collapsed .runtime-demographics-toggle-row > div,
.runtime-quick-panels > .runtime-whatsapp-panel.closed .runtime-whatsapp-head > div:first-child {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
}

.runtime-quick-panels > .collapsed .runtime-demographics-toggle-row strong,
.runtime-quick-panels > .runtime-whatsapp-panel.closed .runtime-whatsapp-head strong {
  font-size: 12px;
  line-height: 28px;
  white-space: nowrap;
}

.runtime-quick-panels > .collapsed .runtime-demographics-toggle-row > div > span,
.runtime-quick-panels > .runtime-whatsapp-panel.closed .runtime-whatsapp-head > div:first-child > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: 10.5px;
  line-height: 28px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-quick-panels > .collapsed .runtime-demographics-toggle,
.runtime-quick-panels > .runtime-whatsapp-panel.closed .care-button.ghost {
  min-width: 30px;
  width: 30px;
  min-height: 28px;
  padding: 0;
}

.runtime-quick-panels > .collapsed .runtime-demographics-toggle > span,
.runtime-quick-panels > .runtime-whatsapp-panel.closed .care-button.ghost > span {
  display: none;
}

.runtime-quick-panels > .runtime-whatsapp-panel.closed .runtime-whatsapp-head-actions {
  display: block;
  min-width: 30px;
}

.runtime-quick-panels > .runtime-whatsapp-panel.closed .runtime-whatsapp-phone {
  display: none;
}

.run-window-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.run-customer-photo-manager {
  position: relative;
  display: grid;
  grid-template-columns: 224px 38px;
  grid-template-rows: 38px 38px;
  flex: 0 0 auto;
  gap: 3px 5px;
  align-items: center;
}

.runtime-profile-photo-card .run-customer-photo-status {
  right: 50%;
  transform: translateX(50%);
}

.run-customer-photo-frame {
  grid-row: 1 / 7;
  position: relative;
  display: grid;
  width: 224px;
  height: 224px;
  overflow: hidden;
  place-items: center;
  border: 1px solid #e8cbd0;
  border-radius: 16px;
  background: var(--care-primary-soft);
  color: var(--care-primary-dark);
  box-shadow: 0 5px 14px rgba(73, 43, 50, 0.09);
}

.run-customer-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.run-customer-photo-initials {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  font-size: 30px;
  font-weight: 950;
}

.run-customer-photo-actions {
  display: contents;
}

.run-customer-photo-actions button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid #e2d4d7;
  border-radius: 7px;
  background: #fff;
  color: var(--care-primary-dark);
  cursor: pointer;
}

.run-customer-photo-actions button:hover,
.run-customer-photo-actions button:focus-visible {
  border-color: var(--care-primary);
  background: var(--care-primary-soft);
  outline: none;
}

.run-customer-photo-actions svg {
  width: 18px;
  height: 18px;
}

.run-customer-photo-status {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 4;
  max-width: 190px;
  padding: 4px 7px;
  border-radius: 6px;
  background: #fff;
  color: var(--care-primary-dark);
  box-shadow: 0 5px 16px rgba(73, 43, 50, 0.12);
  font-size: 10px;
  font-weight: 850;
  white-space: normal;
}

.run-customer-photo-status:empty {
  display: none;
}

.run-window-title-row h3 {
  flex: 0 0 auto;
  max-width: none;
  min-width: 0;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .run-customer-photo-manager {
    grid-template-columns: 184px 34px;
    grid-template-rows: 34px 34px;
    gap: 3px 5px;
  }

  .run-customer-photo-frame {
    width: 184px;
    height: 184px;
    border-radius: 14px;
  }

  .run-customer-photo-actions button {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 820px) {
  .runtime-profile-photo-card {
    justify-items: start;
  }

  .runtime-profile-photo-card .run-customer-photo-manager {
    justify-self: start;
  }
}

.runtime-camera-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  padding: 24px;
  place-items: center;
  background: rgba(47, 50, 57, 0.72);
  backdrop-filter: blur(4px);
}

.runtime-camera-dialog {
  width: min(560px, 100%);
  padding: 18px;
  border: 1px solid #ead8dc;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(47, 50, 57, 0.28);
}

.runtime-camera-heading,
.runtime-camera-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.runtime-camera-heading > div {
  display: grid;
  gap: 3px;
}

.runtime-camera-heading strong {
  color: var(--care-ink);
  font-size: 18px;
}

.runtime-camera-heading span {
  color: #756c70;
  font-size: 12px;
  font-weight: 650;
}

.runtime-camera-close {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid #ead8dc;
  border-radius: 9px;
  background: #fff;
  color: var(--care-primary-dark);
  cursor: pointer;
}

.runtime-camera-viewport {
  position: relative;
  display: grid;
  min-height: 380px;
  margin: 16px 0;
  overflow: hidden;
  place-items: center;
  border-radius: 14px;
  background: #2f3239;
}

.runtime-camera-viewport video {
  display: block;
  width: 100%;
  max-height: 64vh;
  object-fit: cover;
  transform: scaleX(-1);
}

.runtime-camera-placeholder {
  position: absolute;
  display: grid;
  width: 84px;
  height: 84px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.runtime-camera-placeholder svg {
  width: 36px;
  height: 36px;
}

.runtime-camera-controls {
  justify-content: flex-end;
}

.runtime-camera-controls .care-button {
  min-height: 40px;
}

.runtime-camera-modal.has-camera-error .runtime-camera-viewport {
  min-height: 220px;
  background: var(--care-primary-soft);
}

.runtime-camera-modal.has-camera-error .runtime-camera-placeholder {
  background: #fff;
  color: var(--care-primary-dark);
}

@media (max-width: 620px) {
  .runtime-camera-modal {
    padding: 10px;
  }

  .runtime-camera-dialog {
    padding: 14px;
    border-radius: 14px;
  }

  .runtime-camera-viewport {
    min-height: 300px;
  }
}

.run-window-title-row > .care-chip {
  flex: 0 0 auto;
}

.run-customer-title-details {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  color: #756c70;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.run-customer-title-details > span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding-inline: 9px;
  border-inline-start: 1px solid #eadde0;
}

.run-customer-title-details svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  color: #a79da0;
}

.runtime-phone-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  white-space: nowrap;
}

.runtime-phone-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #e2d4d7;
  border-radius: 6px;
  background: #fff;
  color: #763544;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.runtime-phone-action:hover,
.runtime-phone-action:focus-visible {
  border-color: #cf6675;
  background: #fdf0f2;
  color: #763544;
  outline: none;
}

.runtime-phone-actions.compact .runtime-phone-action {
  min-height: 26px;
  padding-inline: 6px;
  font-size: 11px;
}

.runtime-phone-actions svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.runtime-phone-sms {
  color: #a4485a;
}

.runtime-phone-empty {
  color: #a79da0;
  font-size: 11px;
  font-weight: 800;
}

.run-customer-title-details > .runtime-phone-actions {
  flex: 0 0 auto;
  padding-inline: 7px;
  border-inline-start: 1px solid #eadde0;
}

.run-customer-title-details .runtime-phone-action {
  min-height: 24px;
  border: 0;
  background: transparent;
  padding-inline: 3px;
  color: #625a5e;
}

.runtime-day-row .runtime-phone-actions {
  overflow: visible;
}

.runtime-day-row .runtime-phone-sms-label {
  display: none;
}

.runtime-day-row .runtime-phone-action {
  min-height: 23px;
  padding-inline: 4px;
}

.runtime-back-button {
  width: max-content;
}

.runtime-visit-card {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}

.runtime-demographics-card {
  display: grid;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(73, 43, 50, 0.045);
}

.runtime-source-card {
  display: grid;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #dbe7ef;
  border-radius: 8px;
  background: #fbfdff;
  box-shadow: 0 10px 26px rgba(73, 43, 50, 0.04);
}

.runtime-demographics-card.collapsed {
  border-color: #f0e6e8;
  background: linear-gradient(90deg, #fff, #fffdfc);
  box-shadow: none;
}

.runtime-source-card.collapsed {
  border-color: #f0e6e8;
  background: #fff;
  box-shadow: none;
}

.runtime-demographics-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.runtime-demographics-toggle-row strong,
.runtime-demographics-toggle-row span {
  display: block;
}

.runtime-demographics-toggle-row strong {
  color: #2f3239;
  font-size: 14px;
  font-weight: 900;
}

.runtime-demographics-toggle-row span {
  color: #756c70;
  font-size: 12px;
  font-weight: 800;
}

.runtime-demographics-toggle {
  min-width: 150px;
  justify-content: center;
}

.runtime-demographics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.runtime-source-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.runtime-source-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 8px;
  border: 1px solid #f0e6e8;
  border-radius: 8px;
  background: #fff;
}

.runtime-source-path span {
  max-width: 220px;
  padding: 5px 9px;
  border: 1px solid #d7e2ec;
  border-radius: 7px;
  background: #fffdfc;
  color: #414047;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 850;
}

.runtime-source-path svg {
  width: 14px;
  height: 14px;
  color: #a79da0;
}

.runtime-source-graph {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid #f0e6e8;
  border-radius: 8px;
  background: #fff;
  overflow: auto;
}

.runtime-source-graph-node {
  display: grid;
  gap: 6px;
}

.runtime-source-graph-node button {
  margin-inline-start: calc((var(--source-level) - 1) * 20px);
}

.runtime-source-graph-children {
  display: grid;
  gap: 6px;
  margin-inline-start: 12px;
  padding-inline-start: 10px;
  border-inline-start: 1px solid #dbe7ef;
}

.runtime-demographics-actions {
  display: flex;
  justify-content: flex-start;
}

.runtime-demo-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  position: relative;
}

.runtime-demo-field span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #756c70;
  font-size: 11px;
  font-weight: 900;
}

.runtime-demo-field svg {
  width: 14px;
  height: 14px;
  color: #933f50;
}

.runtime-demo-field input,
.runtime-demo-field select {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid #eadde0;
  border-radius: 7px;
  background: #fffdfc;
  color: #2f3239;
  font-family: inherit;
  font-size: 13px;
  font-weight: 850;
}

.runtime-demo-field input:focus,
.runtime-demo-field select:focus,
.runtime-date-field input:focus {
  outline: 2px solid rgba(147, 63, 80, 0.18);
  border-color: #933f50;
  background: #fff;
}

.runtime-geo-suggestions {
  display: none;
  position: absolute;
  z-index: 120;
  top: calc(100% + 3px);
  right: 0;
  left: 0;
  max-height: 210px;
  overflow: auto;
  border: 1px solid #eadde0;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(73, 43, 50, 0.13);
  overscroll-behavior: contain;
}

.runtime-geo-suggestions.open {
  display: grid;
}

.runtime-geo-suggestions button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  padding: 6px 9px;
  border: 0;
  border-bottom: 1px solid #f8f1f1;
  background: #fff;
  color: #2f3239;
  font-family: inherit;
  font-size: 12px;
  font-weight: 850;
  text-align: right;
  cursor: pointer;
}

.runtime-geo-suggestions button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #2f3239;
  font-size: 12px;
}

.runtime-geo-suggestions button:last-child {
  border-bottom: 0;
}

.runtime-geo-suggestions button:hover {
  background: #f1f8f8;
}

.runtime-geo-suggestions small {
  flex: 0 0 auto;
  color: #756c70;
  font-size: 11px;
  font-weight: 800;
}

.runtime-visit-head,
.runtime-treatment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.runtime-visit-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
}

.runtime-visit-head strong,
.runtime-visit-head span,
.runtime-treatment-head strong,
.runtime-treatment-head span {
  display: block;
}

.runtime-visit-head strong,
.runtime-treatment-head strong {
  color: #2f3239;
  font-size: 15px;
  font-weight: 900;
}

.runtime-visit-head span,
.runtime-treatment-head span {
  color: #756c70;
  font-size: 11px;
  font-weight: 800;
}

.runtime-visit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.runtime-visit-grid label {
  display: grid;
  gap: 3px;
  min-height: 48px;
  padding: 7px 8px;
  border: 1px solid #f0e6e8;
  border-radius: 8px;
  background: #fffdfc;
}

.runtime-visit-grid label span {
  color: #756c70;
  font-size: 11px;
  font-weight: 800;
}

.runtime-visit-grid label strong {
  color: #414047;
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-visit-assets {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 4px;
}

.runtime-visit-assets > div {
  display: grid;
  gap: 5px;
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid #f0e6e8;
  border-radius: 8px;
  background: #fff;
}

.runtime-visit-assets > div > span {
  color: #756c70;
  font-size: 11px;
  font-weight: 900;
}

.runtime-visit-forms-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  min-height: 54px;
  padding: 8px;
  border: 1px solid #f0e6e8;
  border-radius: 8px;
  background: #fff;
}

.runtime-visit-forms-label {
  color: #756c70;
  font-size: 11px;
  font-weight: 900;
}

.runtime-visit-forms-row > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.runtime-visit-form-button {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 1px 7px;
  padding: 7px 10px;
  border: 1px solid rgba(147, 63, 80, 0.22);
  border-radius: 9px;
  background: rgba(147, 63, 80, 0.06);
  color: #0f4f58;
  cursor: pointer;
}

.runtime-visit-form-button svg { grid-row: 1 / span 2; width: 17px; height: 17px; }
.runtime-visit-form-button span { font-size: 12px; font-weight: 900; }
.runtime-visit-form-button small { font-size: 10px; color: #607078; }
.runtime-visit-form-button.existing { border-color: #ddaab3; background: #fdf0f2; }
.runtime-visit-form-button.existing span { color: #763544; font-weight: 950; }
.runtime-visit-form-button.manage { border-style: dashed; background: #fffdfc; }

@media (max-width: 1180px) and (min-width: 821px) {
  .runtime-quick-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.runtime-visit-form-empty { color: #768295; font-size: 12px; font-weight: 700; }

.runtime-hair-quote-triggerless:not([open]) { display: none; }
.runtime-hair-quote-triggerless > summary { display: none !important; }

.runtime-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
}

.runtime-timeline::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 24px;
  left: 24px;
  height: 2px;
  background: #eadde0;
}

.runtime-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  min-height: 128px;
  padding: 12px;
  border: 1px solid #f0e6e8;
  border-radius: 8px;
  background: #fffdfc;
  cursor: pointer;
  font-family: inherit;
  text-align: start;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.runtime-timeline-item.current {
  border-color: #bf176d;
  background: #fff6fb;
  box-shadow: inset 0 0 0 1px rgba(191, 23, 109, 0.12);
}

.runtime-timeline-item:hover {
  border-color: #933f50;
  box-shadow: 0 12px 26px rgba(147, 63, 80, 0.1);
  transform: translateY(-2px);
}

.runtime-timeline-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #2f3239;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.runtime-timeline-dot svg {
  width: 17px;
  height: 17px;
}

.runtime-timeline-item.current .runtime-timeline-dot {
  background: #bf176d;
}

.runtime-timeline-item strong,
.runtime-timeline-item small {
  display: block;
}

.runtime-timeline-item strong {
  color: #2f3239;
  font-size: 16px;
  font-weight: 900;
}

.runtime-timeline-item small {
  color: #756c70;
  font-size: 12px;
  font-weight: 700;
}

.runtime-treatment-table {
  display: grid;
  padding: 14px;
}

.runtime-treatment-head {
  margin-bottom: 12px;
}

.runtime-treatment-row {
  display: grid;
  grid-template-columns: 120px 120px minmax(190px, 1fr) 70px 100px 110px 110px 64px;
  min-height: 38px;
  border-top: 1px solid #f0e6e8;
}

.runtime-visit-test-cell select,
.runtime-visit-test-add select {
  width: 100%;
  min-width: 0;
  border: 1px solid #cfd8e4;
  border-radius: 7px;
  background: #fff;
  padding: 7px 9px;
  color: #414047;
  font: inherit;
  font-weight: 800;
}

.runtime-visit-test-cell { padding: 4px 7px !important; }
.runtime-visit-test-actions { justify-content: center; }
.runtime-visit-test-actions .icon-button { width: 29px; height: 29px; color: #b42318; }
.runtime-treatment-empty { padding: 14px; border-top: 1px solid #f0e6e8; color: #768295; font-size: 12px; font-weight: 800; }
.runtime-visit-test-add { display: grid; grid-template-columns: minmax(220px, 340px) auto 1fr; align-items: center; gap: 8px; padding-top: 12px; }
.runtime-visit-test-add small { color: #756c70; font-size: 11px; font-weight: 700; }

.runtime-treatment-row.head {
  border-top: 0;
  background: #e7edf5;
  color: #625a5e;
  font-size: 12px;
  font-weight: 900;
}

.runtime-treatment-row span {
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-inline-start: 1px solid #f0e6e8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.runtime-treatment-row .runtime-visit-test-cell {
  overflow: visible;
}

.runtime-treatment-row.picker-open {
  position: relative;
  z-index: 120;
}

.runtime-treatment-row.picker-open .runtime-choice-select,
.runtime-treatment-row.picker-open .runtime-single-picker {
  z-index: 121;
}

.runtime-action-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 0 0;
}

.runtime-forms-workspace {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid #b9d8d3;
  border-radius: 12px;
  background: linear-gradient(135deg, #f7fffd, #fff);
  box-shadow: 0 14px 34px rgba(147, 63, 80, 0.09);
}

.runtime-forms-head,
.runtime-forms-actions,
.runtime-form-editor-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.runtime-forms-head { justify-content: space-between; }
.runtime-forms-head span,
.runtime-forms-head strong,
.runtime-forms-head small { display: block; }
.runtime-forms-head span { color: #a4485a; font-size: 11px; font-weight: 950; }
.runtime-forms-head strong { color: #2f3239; font-size: 18px; font-weight: 950; }
.runtime-forms-head small { color: #756c70; font-size: 11px; font-weight: 800; }

.runtime-form-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.runtime-form-type-grid button,
.runtime-forms-list > button {
  border: 1px solid #eadde0;
  border-radius: 10px;
  background: #fff;
  color: #414047;
  cursor: pointer;
  font: inherit;
  text-align: start;
}

.runtime-form-type-grid button {
  display: grid;
  gap: 6px;
  min-height: 128px;
  padding: 14px;
}

.runtime-form-type-grid button:hover,
.runtime-forms-list > button:hover { border-color: #a4485a; box-shadow: 0 10px 24px rgba(147, 63, 80, 0.1); }
.runtime-form-type-grid button > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: #f9e8eb; color: #a4485a; }
.runtime-form-type-grid svg { width: 18px; height: 18px; }
.runtime-form-type-grid strong { color: #2f3239; font-size: 14px; font-weight: 950; }
.runtime-form-type-grid small { color: #756c70; font-size: 11px; line-height: 1.45; }

.runtime-forms-list { display: grid; gap: 7px; }
.runtime-forms-list > button { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; min-height: 58px; padding: 9px 11px; }
.runtime-forms-list strong,
.runtime-forms-list small { display: block; }
.runtime-forms-list strong { color: #2f3239; font-size: 13px; font-weight: 950; }
.runtime-forms-list small { margin-top: 2px; color: #756c70; font-size: 10.5px; font-weight: 800; }
.runtime-form-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #f9e8eb; color: #a4485a; }
.runtime-form-icon svg { width: 18px; height: 18px; }

.runtime-form-editor { display: grid; gap: 12px; }
.runtime-form-editor-title { padding-bottom: 10px; border-bottom: 1px solid #eadde0; }
.runtime-form-editor-title > div { min-width: 0; flex: 1; }
.runtime-form-editor-title span,
.runtime-form-editor-title h5,
.runtime-form-editor-title small { display: block; }
.runtime-form-editor-title h5 { margin: 1px 0; color: #2f3239; font-size: 18px; }
.runtime-form-editor-title > div > span,
.runtime-form-editor-title small { color: #756c70; font-size: 11px; font-weight: 800; }
.runtime-form-save-state { color: #a4485a; font-size: 11px; font-weight: 950; white-space: nowrap; }
.runtime-form-content { display: grid; gap: 6px; }
.runtime-form-content > span { color: #4c474b; font-size: 12px; font-weight: 950; }
.runtime-form-content textarea { width: 100%; min-height: 260px; resize: vertical; padding: 12px; border: 1px solid #cfdbe5; border-radius: 9px; background: #fff; color: #2f3239; font: inherit; font-size: 14px; line-height: 1.65; direction: rtl; }
.runtime-form-content textarea:focus { border-color: #a4485a; outline: 3px solid rgba(164, 72, 90, 0.12); }
.runtime-form-audit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.runtime-form-audit span { padding: 8px; border-radius: 7px; background: #f1f6f5; color: #625a5e; font-size: 11px; }
.runtime-form-audit b { display: block; margin-bottom: 2px; color: #2f3239; }
.runtime-form-audit .wide { grid-column: 1 / -1; }
.runtime-forms-empty { min-height: 220px; }

.runtime-optometric-workspace {
  position: fixed;
  inset: 10px;
  z-index: 1000;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  padding: 10px;
  border-color: #bfd6d1;
  border-radius: 10px;
  background: #f5f9f8;
  box-shadow: 0 24px 80px rgba(73, 43, 50, 0.28);
  direction: ltr;
}

.opto-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 4px 7px;
  border-bottom: 1px solid #d6e4e1;
}

.opto-titlebar > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.opto-titlebar strong { color: #153d36; font-size: 16px; font-weight: 950; }
.opto-titlebar span { color: #355d55; font-size: 12px; font-weight: 900; }
.opto-titlebar small { padding-left: 9px; border-left: 1px solid #cddbd8; color: #758681; font-size: 10px; font-weight: 800; }

.runtime-optometric-workspace .runtime-forms-head {
  min-height: 40px;
  padding: 0 4px 7px;
  border-bottom: 1px solid #d6e4e1;
}

.runtime-optometric-workspace .runtime-forms-head > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.runtime-optometric-workspace .runtime-forms-head > div:first-child strong { font-size: 16px; }
.runtime-optometric-workspace .runtime-forms-head > div:first-child small { padding-inline-start: 8px; border-inline-start: 1px solid #cddbd8; }

.opto-form-toolbar {
  display: grid;
  grid-template-columns: minmax(190px, 1.4fr) minmax(140px, 0.75fr) minmax(115px, 0.6fr) minmax(125px, 0.65fr) minmax(150px, 0.75fr);
  gap: 7px;
  align-items: stretch;
}

.opto-patient,
.opto-save {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 6px 10px;
  border: 1px solid #d4e1de;
  border-radius: 7px;
  background: #fff;
}

.opto-patient > span { color: #756c70; font-size: 10px; font-weight: 900; }
.opto-patient strong { color: #163b34; font-size: 15px; }
.opto-patient small { margin-inline-start: auto; color: #73827e; font-size: 10px; font-weight: 800; }

.opto-save { justify-content: center; color: #187361; }
.opto-save svg { width: 17px; height: 17px; }
.opto-save span,
.opto-save small { display: block; }
.opto-save small { color: #71817d; font-size: 9px; font-weight: 800; }

.opto-form-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(980px, 3.1fr);
  gap: 8px;
  direction: ltr;
}

.opto-clinical-board {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  overflow: hidden;
  direction: ltr;
}

.opto-binocular-board {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cbdad6;
  border-radius: 7px;
  background: #fff;
}

.opto-eye-line {
  display: grid;
  grid-template-columns: minmax(115px, .72fr) minmax(190px, 1fr) minmax(160px, .82fr) minmax(115px, .72fr) minmax(190px, 1fr);
  align-items: center;
  min-height: 34px;
  border-bottom: 1px solid #d9e4e1;
  background: #f7faf9;
}

.opto-eye-title {
  align-self: stretch;
  display: grid;
  place-items: center;
  border-right: 1px solid #d9e4e1;
  color: #1f4f46;
  font-size: 11px;
  letter-spacing: .015em;
}

.opto-eye-title.od { border-top: 3px solid #277d9b; color: #176782; }
.opto-eye-title.os { border-top: 3px solid #b84777; color: #9a2859; }
.opto-eye-title.be { border: 0; border-right: 1px solid #d9e4e1; border-top: 3px solid #887a3c; background: #fbf8e9; color: #6f6228; }
.opto-eye-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px 7px; }

.opto-ucva-line {
  display: grid;
  grid-template-columns: minmax(118px, 1.35fr) repeat(2, minmax(75px, .78fr)) minmax(160px, 1.35fr) repeat(2, minmax(75px, .78fr));
  gap: 5px;
  align-items: end;
  padding: 4px 6px 5px;
  border-bottom: 1px solid #d9e4e1;
  background: #fcfdfd;
}

.opto-ucva-line > b { align-self: center; color: #365b53; font-size: 9px; text-align: center; }
.opto-be-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 3px 5px; border: 1px solid #e2dcc0; border-radius: 5px; background: #fbf8e9; }

.opto-binocular-table { overflow: hidden; }
.opto-binocular-row {
  display: grid;
  grid-template-columns: minmax(145px, 1.62fr) repeat(4, minmax(52px, .62fr)) repeat(2, minmax(64px, .72fr)) repeat(4, minmax(52px, .62fr));
  min-height: 25px;
  border-top: 1px solid #e2e9e7;
}

.opto-binocular-row:first-child { border-top: 0; }
.opto-binocular-row > * { min-width: 0; border: 0; border-right: 1px solid #e2e9e7; border-radius: 0; }
.opto-binocular-row > *:last-child { border-right: 0; }
.opto-binocular-row b,
.opto-binocular-row span { display: flex; align-items: center; justify-content: center; padding: 2px 5px; color: #405d57; font-size: 8.5px; }
.opto-binocular-row:not(.head) b { justify-content: flex-start; background: #f8faf9; font-weight: 900; }
.opto-binocular-row input { width: 100%; height: 25px; padding: 2px 4px; border: 0; background: #fff; color: #763544; font-size: 10px; font-weight: 750; text-align: center; }
.opto-binocular-row input:focus { position: relative; z-index: 1; outline: 2px solid rgba(22, 128, 108, .22); }
.opto-binocular-row.head { min-height: 22px; background: #e7efed; }
.opto-binocular-row.head b,
.opto-binocular-row.head span { color: #31544c; font-weight: 950; }
.opto-binocular-row .be-value,
.opto-binocular-row.head span:nth-child(6),
.opto-binocular-row.head span:nth-child(7) { background: #fbf8e9; color: #625822; }
.opto-binocular-row.dilated-start { border-top: 2px solid #b7c9c4; }

.opto-tears-line {
  display: grid;
  grid-template-columns: minmax(128px, 1.25fr) minmax(80px, .75fr) minmax(80px, .75fr) minmax(80px, .6fr) minmax(128px, 1.25fr) minmax(80px, .75fr) minmax(80px, .75fr);
  gap: 5px;
  align-items: end;
  padding: 4px 6px 5px;
  border-top: 1px solid #d9e4e1;
  background: #f7faf9;
}
.opto-tears-line > b { align-self: center; color: #365b53; font-size: 8.5px; text-align: center; }

.opto-bilateral-grid {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  overflow: hidden;
}

.opto-sidebar,
.opto-eye {
  min-width: 0;
  overflow: auto;
  border: 1px solid #d2dfdc;
  border-radius: 8px;
  background: #fff;
  direction: rtl;
  scrollbar-width: thin;
}

.opto-sidebar { display: grid; align-content: start; gap: 8px; padding: 9px; }

.opto-sidebar-title,
.opto-sidebar-title > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.opto-sidebar-title { min-height: 40px; padding-bottom: 7px; border-bottom: 1px solid #e1e9e7; color: #166b5b; }
.opto-sidebar-title svg { width: 18px; height: 18px; }
.opto-sidebar-title > div { flex: 1; justify-content: space-between; }
.opto-sidebar-title strong { color: #183b35; font-size: 12px; }
.opto-sidebar-title span { padding: 3px 7px; border-radius: 999px; background: #e9f6f2; color: #18715f; font-size: 9px; font-weight: 900; }

.opto-staff-grid { display: grid; gap: 6px; }
.opto-sidebar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: end; }
.opto-sidebar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.opto-field {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: #625a5e;
  font-size: 9.5px;
  font-weight: 900;
}

.opto-field > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.opto-field input,
.opto-field select,
.opto-field textarea,
.opto-refraction-row input,
.opto-map-table input {
  min-width: 0;
  width: 100%;
  height: 26px;
  border: 1px solid #ccd9d6;
  border-radius: 5px;
  padding: 3px 6px;
  background: #fff;
  color: #763544;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
}

.opto-field input:focus,
.opto-field select:focus,
.opto-field textarea:focus,
.opto-refraction-row input:focus,
.opto-map-table input:focus {
  border-color: #16806c;
  outline: 2px solid rgba(22, 128, 108, 0.13);
}

.opto-field textarea { height: 72px; resize: none; line-height: 1.35; }
.opto-check { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; color: #4c625c; font-size: 10px; font-weight: 900; }
.opto-check input { width: 14px; height: 14px; accent-color: #187966; }

.opto-audit-compact { display: grid; gap: 3px; margin-top: 2px; padding: 7px; border-radius: 6px; background: #f1f6f5; }
.opto-audit-compact span { color: #756c70; font-size: 9px; line-height: 1.25; }
.opto-audit-compact b { margin-inline-end: 5px; color: #234b43; }

.opto-eye { display: grid; align-content: start; gap: 6px; padding: 8px; }
.opto-eye-right { border-top: 3px solid #227a9a; }
.opto-eye-left { border-top: 3px solid #b84576; }

.opto-eye-head,
.opto-eye-head > div:first-child,
.opto-eye-head-fields {
  display: flex;
  align-items: center;
  gap: 7px;
}

.opto-eye-head { justify-content: space-between; min-height: 34px; }
.opto-eye-head > div:first-child > div { display: grid; }
.opto-eye-head strong { color: #193c35; font-size: 13px; }
.opto-eye-head small { color: #7b8985; font-size: 9px; }
.opto-eye-code { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #e7f3f6; color: #176681; font-size: 11px; font-weight: 950; }
.opto-eye-left .opto-eye-code { background: #faedf3; color: #9b2859; }
.opto-eye-head-fields { width: 190px; }
.opto-eye-head-fields .opto-field { flex: 1; }

.opto-va-strip,
.opto-tear-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 6px;
  background: #f2f7f6;
}

.opto-refraction { overflow: hidden; border: 1px solid #d8e3e0; border-radius: 6px; }
.opto-refraction-row { display: grid; grid-template-columns: minmax(118px, 1.5fr) repeat(4, minmax(45px, 0.68fr)); min-height: 25px; border-top: 1px solid #e3eae8; direction: rtl; }
.opto-refraction-row:first-child { border-top: 0; }
.opto-refraction-row > * { border: 0; border-inline-start: 1px solid #e3eae8; border-radius: 0; }
.opto-refraction-row > *:last-child { border-inline-start: 0; }
.opto-refraction-row b,
.opto-refraction-row span { display: flex; align-items: center; padding: 3px 6px; color: #3d5b54; font-size: 9px; }
.opto-refraction-row.head { min-height: 23px; background: #e6efed; }
.opto-refraction-row.head span,
.opto-refraction-row.head b { justify-content: center; color: #31544c; font-weight: 950; }
.opto-refraction-row:not(.head) b { background: #f8faf9; }

.opto-subsection { border: 1px solid #d9e4e1; border-radius: 6px; overflow: hidden; }
.opto-subsection h6 { margin: 0; padding: 4px 7px; background: #e8f0ee; color: #31554d; font-size: 9.5px; }
.opto-metrics { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 5px; }
.opto-metrics .opto-check { align-self: end; }

.opto-map-table { display: grid; }
.opto-map-table > div { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(100px, 0.9fr) 42px; min-height: 25px; border-top: 1px solid #e3eae8; }
.opto-map-table > div > * { border: 0; border-inline-start: 1px solid #e3eae8; border-radius: 0; }
.opto-map-table > div > *:last-child { border-inline-start: 0; }
.opto-map-table .head { min-height: 22px; border-top: 0; background: #f3f7f6; }
.opto-map-table .head span { display: grid; place-items: center; color: #526a64; font-size: 9px; font-weight: 950; }
.opto-map-table .opto-check { justify-content: center; }
.opto-map-table .opto-check span { display: none; }

.opto-diagnosis { display: grid; grid-template-columns: 1.2fr 0.8fr 1.2fr; gap: 5px; padding: 5px; border: 1px solid #d9e4e1; border-radius: 6px; background: #fafcfb; }
.opto-classification { display: grid; gap: 5px; padding: 6px; border: 1px solid #d9e4e1; border-radius: 6px; background: #fff; }
.opto-classification-title { display: flex; justify-content: space-between; color: #31554d; font-size: 9px; }
.opto-classification-title span { color: #7b8985; }
.opto-classification-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.opto-classification-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }

@media (max-width: 1350px) {
  .opto-form-grid { grid-template-columns: 200px minmax(980px, 1fr); overflow-x: auto; }
  .opto-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .runtime-optometric-workspace { inset: 4px; overflow: auto; grid-template-rows: auto; }
  .opto-form-toolbar { grid-template-columns: 1fr 1fr; }
  .opto-form-grid { grid-template-columns: 1fr; overflow: visible; }
  .opto-clinical-board { overflow: visible; }
  .opto-bilateral-grid { grid-template-columns: 1fr; overflow: visible; }
  .opto-sidebar,
  .opto-eye { overflow: visible; }
  .opto-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .runtime-forms-head { align-items: flex-start; }
  .runtime-forms-actions { flex-wrap: wrap; justify-content: flex-end; }
  .runtime-form-type-grid { grid-template-columns: 1fr; }
  .runtime-form-audit { grid-template-columns: 1fr 1fr; }
}

.runtime-empty-state {
  min-height: 160px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 22px;
  border: 1px dashed #e2d4d7;
  border-radius: 10px;
  background: #fffdfc;
  color: #756c70;
  font-weight: 800;
  text-align: center;
}

.runtime-history-empty strong,
.runtime-history-empty span,
.runtime-visit-empty strong,
.runtime-visit-empty span {
  display: block;
}

.runtime-history-empty strong,
.runtime-visit-empty strong {
  color: #414047;
  font-size: 16px;
  font-weight: 900;
}

.runtime-history-empty span,
.runtime-visit-empty span {
  max-width: 280px;
  color: #756c70;
  font-size: 13px;
  font-weight: 750;
}

.runtime-history-empty,
.runtime-visit-empty {
  min-height: 190px;
  border-color: #d8e1ef;
  background: linear-gradient(180deg, #fffdfc, #fdf8f5);
}

.runtime-history-empty {
  min-height: 250px;
}

.runtime-history-empty .runtime-empty-icon,
.runtime-visit-empty .runtime-empty-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #eadde0;
  border-radius: 999px;
  background: #fff;
  color: #933f50;
  box-shadow: 0 10px 22px rgba(73, 43, 50, 0.06);
}

.runtime-history-empty .runtime-empty-icon svg,
.runtime-visit-empty .runtime-empty-icon svg {
  width: 20px;
  height: 20px;
}

.runtime-window {
  display: grid;
  gap: 14px;
}

.care-window {
  gap: 14px;
  padding: 14px;
  border: 1px solid #e2d4d7;
  border-radius: 8px;
  background: #f8f1f1;
  color: #2f3239;
}

.care-window-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid #e2d4d7;
  border-radius: 8px;
  background: #fff;
}

.care-kicker {
  display: block;
  margin-bottom: 3px;
  color: #cf6675;
  font-size: 12px;
  font-weight: 800;
}

.care-window-head h3 {
  margin: 0 0 3px;
  font-size: 22px;
}

.care-window-head small,
.care-card-title span,
.care-profile-strip span {
  color: #756c70;
}

.care-actionbar,
.care-mini-actions,
.care-status-row,
.care-tabs,
.care-calendar-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.care-button,
.care-link-button {
  min-height: 34px;
  border: 1px solid #e2d4d7;
  border-radius: 6px;
  background: #fff;
  color: #2f3239;
  cursor: pointer;
  font-weight: 800;
}

.care-button {
  padding: 0 12px;
}

.care-button.primary {
  border-color: #cf6675;
  background: #cf6675;
  color: #fff;
}

.care-button.ghost:hover,
.care-link-button:hover {
  border-color: #cf6675;
  background: #fdf0f2;
}

.care-button.whatsapp {
  border-color: rgba(22, 163, 74, 0.28);
  background: #fdf3f4;
  color: #a4485a;
}

.care-button.whatsapp:hover {
  border-color: rgba(4, 120, 87, 0.42);
  background: #d1fae5;
}

.runtime-whatsapp-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(22, 163, 74, 0.22);
  border-radius: 8px;
  background: #f0fdf4;
}

.runtime-whatsapp-panel.compact {
  padding: 10px;
}

.runtime-whatsapp-head,
.runtime-whatsapp-head-actions,
.runtime-whatsapp-actions,
.runtime-whatsapp-phone {
  display: flex;
  align-items: center;
  gap: 8px;
}

.runtime-whatsapp-head {
  justify-content: space-between;
}

.runtime-whatsapp-head-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.runtime-whatsapp-head strong,
.runtime-whatsapp-head span {
  display: block;
}

.runtime-whatsapp-head strong {
  color: #763544;
  font-weight: 900;
}

.runtime-whatsapp-head span,
.runtime-whatsapp-status {
  color: #a4485a;
  font-size: 12px;
  font-weight: 850;
}

.runtime-whatsapp-phone {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(22, 163, 74, 0.2);
  border-radius: 999px;
  background: #fff;
  color: #933f50;
  font-size: 12px;
  font-weight: 900;
}

.runtime-whatsapp-phone svg {
  width: 15px;
  height: 15px;
}

.runtime-whatsapp-panel textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
  border: 1px solid rgba(22, 163, 74, 0.24);
  border-radius: 8px;
  background: #fff;
  color: #2f3239;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
  padding: 9px 10px;
}

.runtime-whatsapp-actions {
  flex-wrap: wrap;
}

.runtime-whatsapp-history {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(22, 163, 74, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.runtime-whatsapp-message {
  display: grid;
  gap: 3px;
  max-width: min(78%, 520px);
  padding: 8px 10px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fff;
}

.runtime-whatsapp-message.outbound {
  justify-self: end;
  border-color: rgba(22, 163, 74, 0.24);
  background: #dcfce7;
}

.runtime-whatsapp-message.inbound {
  justify-self: start;
}

.runtime-whatsapp-message.failed {
  border-color: rgba(185, 28, 28, 0.2);
  background: #fef2f2;
}

.runtime-whatsapp-message strong,
.runtime-whatsapp-message p,
.runtime-whatsapp-message small {
  margin: 0;
}

.runtime-whatsapp-message strong {
  color: #2f3239;
  font-size: 12px;
  font-weight: 900;
}

.runtime-whatsapp-message p {
  color: #1f2937;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.runtime-whatsapp-message small {
  color: #756c70;
  font-size: 11px;
  font-weight: 800;
}

.runtime-whatsapp-template-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.runtime-whatsapp-template-bar button {
  min-height: 30px;
  border: 1px solid rgba(22, 163, 74, 0.22);
  border-radius: 8px;
  background: #fff;
  color: #933f50;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 9px;
}

.runtime-whatsapp-template-bar button.ai {
  border-color: rgba(207, 102, 117, 0.25);
  background: #fdf0f2;
  color: #933f50;
}

.runtime-call-center {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.call-queue-panel,
.call-workspace,
.call-script-panel,
.call-schedule-panel,
.call-history-panel,
.call-customer-strip {
  min-width: 0;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(73, 43, 50, 0.05);
}

.call-queue-panel {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.call-queue-head,
.call-section-head,
.call-customer-strip,
.call-customer-actions,
.call-outcomes,
.call-facts,
.call-branch-options {
  display: flex;
  align-items: center;
  gap: 8px;
}

.call-queue-head,
.call-section-head,
.call-customer-strip {
  justify-content: space-between;
}

.call-queue-head strong,
.call-queue-head span,
.call-section-head strong,
.call-section-head span,
.call-customer-strip h4,
.call-customer-strip p,
.call-note-field span,
.call-future-grid span,
.call-test-select span {
  display: block;
}

.call-queue-head strong,
.call-section-head strong {
  color: #2f3239;
  font-weight: 900;
}

.call-queue-head span,
.call-section-head span,
.call-customer-strip p,
.call-task small,
.call-task em,
.call-note-list em {
  color: #756c70;
  font-size: 12px;
  font-weight: 800;
}

.call-task-list {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 270px);
  overflow: auto;
  padding-inline-end: 2px;
}

.call-agent-filter {
  display: grid;
  gap: 4px;
}

.call-agent-filter span {
  color: #756c70;
  font-size: 12px;
  font-weight: 900;
}

.call-agent-filter select {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fff;
  color: #2f3239;
  font: inherit;
  font-weight: 900;
}

.call-task {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px;
  border: 1px solid #eadde0;
  border-inline-start: 4px solid #a79da0;
  border-radius: 8px;
  background: #fffdfc;
  color: #2f3239;
  cursor: pointer;
  text-align: start;
}

.call-task.active {
  border-color: #cf6675;
  border-inline-start-color: #cf6675;
  background: #fdf0f2;
}

.call-task.done {
  border-inline-start-color: #b65566;
  background: #f0fdf4;
}

.call-task strong {
  font-size: 16px;
  font-weight: 900;
}

.call-task em {
  font-style: normal;
}

.call-task-topline,
.call-next-at {
  display: flex;
  align-items: center;
  gap: 6px;
}

.call-task-topline {
  justify-content: space-between;
  color: #756c70;
  font-size: 12px;
  font-weight: 900;
}

.call-next-at {
  color: #933f50;
  font-size: 12px;
  font-weight: 900;
}

.call-next-at svg {
  width: 14px;
  height: 14px;
}

.call-priority {
  justify-self: start;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 11px;
  font-weight: 900;
}

.call-workspace {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.call-customer-strip {
  padding: 14px;
  box-shadow: none;
}

.call-customer-strip h4 {
  margin: 2px 0 4px;
  color: #2f3239;
  font-size: 24px;
  font-weight: 900;
}

.call-customer-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.call-board {
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(300px, 0.95fr);
  gap: 12px;
  align-items: start;
}

.call-script-panel,
.call-schedule-panel,
.call-history-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  box-shadow: none;
}

.call-section-head {
  align-items: start;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0e6e8;
}

.call-section-head span {
  max-width: 520px;
  text-align: end;
}

.call-facts {
  flex-wrap: wrap;
}

.call-facts span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid #eadde0;
  border-radius: 999px;
  background: #fffdfc;
  color: #4c474b;
  font-size: 12px;
  font-weight: 900;
}

.call-facts svg,
.call-customer-actions svg,
.call-outcomes svg,
.call-schedule-save svg {
  width: 16px;
  height: 16px;
}

.call-note-field,
.call-future-grid label,
.call-test-select {
  display: grid;
  gap: 6px;
}

.call-note-field span,
.call-future-grid span,
.call-test-select span {
  color: #625a5e;
  font-size: 12px;
  font-weight: 900;
}

.call-note-field textarea,
.call-future-grid input,
.call-test-select select {
  width: 100%;
  min-width: 0;
  border: 1px solid #e2d4d7;
  border-radius: 8px;
  background: #fff;
  color: #2f3239;
  font: inherit;
}

.call-note-field textarea {
  resize: vertical;
  min-height: 118px;
  padding: 10px;
}

.call-future-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 140px 120px;
  gap: 10px;
}

.call-future-grid input,
.call-test-select select {
  min-height: 38px;
  padding: 6px 9px;
}

.call-outcomes {
  flex-wrap: wrap;
}

.call-branch-options {
  flex-wrap: wrap;
}

.call-branch-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 8px;
  align-items: start;
}

.call-schedule-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.call-schedule-steps span {
  display: grid;
  place-items: center;
  min-height: 28px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fffdfc;
  color: #756c70;
  font-size: 12px;
  font-weight: 900;
}

.call-schedule-steps span.active {
  border-color: rgba(147, 63, 80, 0.28);
  background: #fdf3f4;
  color: #933f50;
}

.call-branch-options button,
.call-slot-grid button {
  min-height: 34px;
  border: 1px solid #e2d4d7;
  border-radius: 8px;
  background: #fff;
  color: #414047;
  cursor: pointer;
  font-weight: 900;
}

.call-branch-options button {
  padding: 0 10px;
}

.call-branch-options button.more {
  border-style: dashed;
  color: #933f50;
}

.call-branch-more {
  min-width: 110px;
  padding: 0 12px;
}

.call-branch-options button.active,
.call-slot-grid button.active {
  border-color: #2f3239;
  background: #2f3239;
  color: #fff;
}

.call-test-select input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  padding: 0 10px;
  color: #2f3239;
  font-family: inherit;
  font-size: 13px;
  font-weight: 850;
}

.call-slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.call-slot-grid button {
  display: grid;
  gap: 2px;
  padding: 8px;
  text-align: center;
}

.call-slot-grid strong,
.call-slot-grid span {
  display: block;
}

.call-slot-grid span {
  color: inherit;
  opacity: 0.76;
  font-size: 11px;
}

.call-slot-summary {
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fffdfc;
  color: #625a5e;
  font-size: 12px;
  font-weight: 900;
}

.call-schedule-save {
  justify-self: start;
}

.call-note-list {
  display: grid;
  gap: 8px;
}

.call-note-list div {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid #f0e6e8;
  border-radius: 8px;
  background: #fffdfc;
}

.call-note-list strong {
  color: #2f3239;
  font-size: 12px;
  font-weight: 900;
}

.call-note-list span {
  color: #4c474b;
  font-size: 13px;
  font-weight: 700;
}

.care-link-button {
  min-height: 28px;
  padding: 0 8px;
  color: #cf6675;
}

.care-status-row {
  padding: 0 2px;
}

.care-layer-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 8px;
}

.care-layer {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #e2d4d7;
  border-radius: 8px;
  background: #fff;
  color: #2f3239;
  cursor: pointer;
  text-align: start;
}

.care-layer.active {
  border-color: #a4485a;
  background: #ecfdf7;
  box-shadow: inset 0 -3px 0 #a4485a;
}

.care-layer:hover,
.care-layer:focus {
  border-color: #cf6675;
  background: #fdf0f2;
  outline: none;
}

.care-layer strong,
.care-layer span {
  display: block;
}

.care-layer strong {
  margin-bottom: 3px;
  font-size: 12px;
}

.care-layer span {
  color: #756c70;
  font-size: 11px;
  font-weight: 700;
}

.care-layer-workspace {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e2d4d7;
  border-radius: 8px;
  background: #fff;
}

.care-layer-content {
  display: grid;
  gap: 10px;
}

.care-layer-content .care-mini-actions {
  justify-content: flex-start;
}

.care-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f0e6e8;
  color: #4c474b;
  font-size: 12px;
  font-weight: 800;
}

.care-chip.hot {
  background: #fff1d6;
  color: #8a5200;
}

.care-chip.green {
  background: #f9e8eb;
  color: #933f50;
}

.care-chip.gold {
  background: #fff1d6;
  color: #8a5200;
}

.care-chip.danger {
  background: #ffe4e8;
  color: #a52835;
}

.care-lead-grid,
.care-customer-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 320px;
  gap: 12px;
  align-items: start;
}

.care-lead-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.care-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e2d4d7;
  border-radius: 8px;
  background: #fff;
}

.care-card.span-2 {
  grid-column: span 2;
}

.care-card-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.care-form-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.care-form-grid.single {
  align-items: stretch;
}

.care-field {
  display: grid;
  gap: 5px;
  flex: 0 1 var(--field-width, 180px);
  max-width: 100%;
}

.care-field.compact {
  --field-width: 150px;
}

.care-field.medium {
  --field-width: 180px;
}

.care-field.wide {
  --field-width: 280px;
}

.care-field.full {
  flex-basis: 100%;
}

.care-field span {
  color: #625a5e;
  font-size: 12px;
  font-weight: 800;
}

.care-field input,
.care-field select,
.care-calendar-toolbar select,
.care-window textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid #e2d4d7;
  border-radius: 6px;
  background: #fff;
  color: #2f3239;
  padding: 7px 9px;
  font: inherit;
}

.care-window textarea {
  resize: vertical;
}

.next-action {
  min-height: 76px;
  padding: 10px;
  border-radius: 8px;
  background: #fffdfc;
  border: 1px solid #f0e6e8;
}

.care-tabs {
  margin-bottom: 10px;
  border-bottom: 1px solid #eadde0;
}

.care-tabs button {
  min-height: 34px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #625a5e;
  cursor: pointer;
  font-weight: 800;
}

.care-tabs button.active {
  border-bottom-color: #cf6675;
  color: #933f50;
}

.care-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.care-table th,
.care-table td {
  padding: 8px;
  border-bottom: 1px solid #f0e6e8;
  text-align: start;
  vertical-align: top;
}

.care-table th {
  background: #faf5f4;
  color: #625a5e;
  font-size: 12px;
}

.care-table tbody tr:hover {
  background: #fdf8f5;
}

.care-table tr.selected {
  background: #fdf0f2;
  box-shadow: inset 3px 0 0 #cf6675;
}

.care-side-list {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e2d4d7;
  border-radius: 8px;
  background: #fff;
}

.care-side-list button {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #eadde0;
  border-radius: 8px;
  background: #fff;
  text-align: start;
  cursor: pointer;
}

.care-side-list button.active {
  border-color: #cf6675;
  background: #fdf0f2;
}

.care-side-list small {
  color: #756c70;
}

.care-profile-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.care-profile-strip div {
  padding: 10px;
  border: 1px solid #f0e6e8;
  border-radius: 8px;
  background: #fffdfc;
}

.care-profile-strip span,
.care-profile-strip strong {
  display: block;
}

.care-calendar-toolbar {
  padding: 12px;
  border: 1px solid #e2d4d7;
  border-radius: 8px;
  background: #fff;
}

.care-calendar-toolbar select {
  width: auto;
  min-width: 150px;
}

.care-date-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

.care-date-picker button,
.care-date-picker strong {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #e2d4d7;
  border-radius: 6px;
  background: #fff;
}

.care-date-picker strong {
  background: #2f3239;
  color: #fff;
}

.care-summary {
  flex-basis: 100%;
  color: #625a5e;
  font-weight: 800;
}

.care-calendar-table {
  border: 1px solid #e2d4d7;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.legacy-pb {
  gap: 0;
  overflow: auto;
  border: 1px solid #8d94a0;
  background: #f6d4f2;
  color: #000;
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.25;
}

.legacy-titlebar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  padding: 5px 8px;
  background: linear-gradient(#c6dcef, #8fb0cf);
  border-bottom: 1px solid #6f879d;
  color: #000;
  font-size: 12px;
}

.legacy-titlebar strong {
  font-weight: 400;
}

.legacy-lead-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.25fr;
  gap: 8px;
  padding: 10px;
}

.legacy-box {
  min-width: 0;
  padding: 8px;
  border: 1px solid #b692b4;
  background: #f6d4f2;
}

.legacy-box h3 {
  margin: -2px 0 7px;
  color: #5e4760;
  font-size: 12px;
  text-align: center;
}

.legacy-box.identity {
  grid-row: span 2;
}

.legacy-box.notes {
  grid-column: 1 / -1;
}

.legacy-form-grid {
  display: grid;
  gap: 5px;
}

.legacy-form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.legacy-field {
  display: grid;
  grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.legacy-field span {
  text-align: end;
  font-weight: 700;
}

.legacy-input,
.legacy-pb select,
.legacy-pb textarea {
  min-height: 21px;
  border: 1px solid #f5d8f3;
  border-radius: 0;
  background: #fff;
  color: #000;
  padding: 2px 5px;
  font: inherit;
}

.legacy-input.small {
  width: 42px;
}

.legacy-pb textarea {
  width: 100%;
  min-height: 116px;
  resize: vertical;
}

.legacy-phone-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 4px;
  margin-bottom: 8px;
}

.legacy-icon-button,
.legacy-button {
  border: 1px solid #777;
  border-top-color: #fff;
  border-inline-start-color: #fff;
  border-radius: 0;
  background: #e6e6e6;
  color: #000;
  box-shadow: inset -1px -1px 0 #aaa;
  cursor: pointer;
  font: inherit;
}

.legacy-icon-button {
  min-width: 24px;
  min-height: 22px;
  padding: 1px 4px;
}

.legacy-button {
  min-height: 25px;
  min-width: 84px;
  padding: 3px 10px;
}

.legacy-command-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 10px;
}

.legacy-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 12px;
}

.legacy-table th {
  background: #5d9bd6;
  color: #fff;
  font-weight: 700;
}

.legacy-table th,
.legacy-table td {
  min-height: 20px;
  padding: 3px 5px;
  border: 1px solid #fff;
  white-space: nowrap;
}

.legacy-table tbody tr:nth-child(odd) {
  background: #e9b3d2;
}

.legacy-table tbody tr:nth-child(even) {
  background: #d8d8d8;
}

.legacy-table tr.selected {
  background: #0078d7;
  color: #fff;
}

.legacy-customer-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr) 350px;
  gap: 10px;
  padding: 10px;
}

.legacy-tree {
  min-height: 500px;
  max-height: 650px;
  overflow: auto;
  padding: 8px;
  border: 1px solid #b692b4;
  background: #fff;
  color: #000;
}

.tree-row {
  margin-top: 7px;
  color: #004a8f;
}

.tree-child {
  padding-inline-start: 24px;
  color: #000;
}

.legacy-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

.customer-main {
  min-height: 510px;
}

.visit-box {
  min-height: 220px;
}

.legacy-calendar {
  min-width: 900px;
}

.legacy-calendar-head {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  gap: 12px;
  align-items: start;
  padding: 10px;
}

.legacy-top-actions,
.legacy-date-strip,
.legacy-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.legacy-date-strip {
  justify-content: center;
  text-align: center;
}

.legacy-date-strip strong {
  padding: 4px 12px;
  border: 1px solid #aaa;
  border-radius: 4px;
  background: #fff;
  font-size: 20px;
}

.legacy-date-strip b {
  flex-basis: 100%;
  font-size: 16px;
}

.legacy-alert-box {
  min-height: 124px;
  padding: 8px;
  border: 1px solid #bbb;
  background: #fff;
}

.legacy-filters {
  justify-content: center;
  padding: 0 10px 10px;
}

.legacy-filters select {
  width: 185px;
  min-height: 29px;
  border: 1px solid #aaa;
  background: #fff;
}

.legacy-summary {
  padding: 8px 12px;
  font-weight: 800;
}

.calendar-table {
  margin: 0 10px;
  width: calc(100% - 20px);
}

.runtime-window.compact .runtime-grid,
.runtime-window.compact .runtime-grid.two {
  grid-template-columns: 1fr;
}

.runtime-window.compact .runtime-section {
  padding: 12px;
}

.runtime-window.compact .field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.runtime-window.compact.legacy-pb {
  max-height: 520px;
}

.runtime-window.compact .legacy-lead-layout,
.runtime-window.compact .legacy-customer-layout,
.runtime-window.compact .legacy-calendar-head {
  grid-template-columns: 1fr;
}

.runtime-window.compact .care-window-head,
.runtime-window.compact .care-lead-grid,
.runtime-window.compact .care-customer-grid,
.runtime-window.compact .care-profile-strip {
  grid-template-columns: 1fr;
}

.runtime-window.compact .care-window-head {
  display: grid;
}

.runtime-window.compact .care-card.span-2 {
  grid-column: auto;
}

.lead-integrations-dashboard {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #fdf8f5;
}

.lead-api-hub { display: grid; gap: 11px; padding: 14px; border: 1px solid #b9d8d3; border-radius: 10px; background: linear-gradient(135deg, #f4fffc, #fff); box-shadow: 0 10px 26px rgba(164, 72, 90, 0.07); }
.lead-api-hub-head,
.lead-api-hub-title,
.lead-api-actions { display: flex; align-items: center; gap: 9px; }
.lead-api-hub-head { justify-content: space-between; }
.lead-api-hub-title > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #a4485a; color: #fff; }
.lead-api-hub-title svg { width: 19px; height: 19px; }
.lead-api-hub-title strong,
.lead-api-hub-title small { display: block; }
.lead-api-hub-title strong { color: #2f3239; font-size: 16px; font-weight: 950; }
.lead-api-hub-title small { color: #756c70; font-size: 11px; font-weight: 750; }
.lead-api-endpoints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lead-api-endpoints article { display: grid; gap: 4px; min-width: 0; padding: 9px; border: 1px solid #eadde0; border-radius: 7px; background: #fff; }
.lead-api-endpoints span { color: #625a5e; font-size: 10.5px; font-weight: 900; }
.lead-api-endpoints code { overflow-x: auto; color: #933f50; direction: ltr; text-align: left; font-size: 10.5px; white-space: nowrap; }
.lead-api-actions { flex-wrap: wrap; }
.lead-api-actions a { text-decoration: none; }
.lead-api-action-status { color: #a4485a; font-size: 11px; font-weight: 900; }
.lead-api-hub > p { margin: 0; color: #756c70; font-size: 10.5px; font-weight: 750; }

.lead-integration-metrics,
.lead-integration-sources {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.lead-integration-metrics article,
.lead-integration-source,
.lead-integration-report {
  border: 1px solid #dce3ec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(73, 43, 50, 0.04);
}

.lead-integration-metrics article {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-top: 3px solid #a4485a;
}

.lead-integration-metrics article.danger { border-top-color: #dc2626; }
.lead-integration-metrics span,
.lead-integration-metrics small { color: #756c70; font-size: 11px; font-weight: 800; }
.lead-integration-metrics strong { color: #2f3239; font-size: 25px; font-weight: 950; }

.lead-integration-source { padding: 12px; }
.lead-integration-source.connected { border-color: rgba(164, 72, 90, 0.38); }
.lead-integration-source.expanded { grid-column: 1 / -1; border-color: #a4485a; box-shadow: 0 14px 30px rgba(164, 72, 90, 0.1); }
.lead-integration-source-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.lead-integration-source-head strong,
.lead-integration-source-head small { display: block; }
.lead-integration-source-head strong { color: #2f3239; font-size: 13px; font-weight: 950; }
.lead-integration-source-head small { color: #756c70; font-size: 10.5px; font-weight: 750; }
.lead-integration-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #f9e8eb; color: #a4485a; }
.lead-integration-icon svg { width: 17px; height: 17px; }
.lead-integration-state { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border: 0; border-radius: 999px; background: #fff7ed; color: #9a3412; cursor: pointer; font: inherit; font-size: 10px; font-weight: 900; white-space: nowrap; }
.lead-integration-state svg { width: 12px; height: 12px; }
.lead-integration-source.connected .lead-integration-state { background: #fdf3f4; color: #a4485a; }
.lead-integration-source-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #edf1f5; }
.lead-integration-source-stats span { display: grid; gap: 1px; color: #756c70; font-size: 9.5px; font-weight: 750; }
.lead-integration-source-stats b { color: #414047; font-size: 11px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-integration-setup { display: grid; gap: 9px; margin-top: 11px; padding: 11px; border: 1px solid #eadde0; border-radius: 8px; background: #f8fffd; }
.lead-integration-setup > strong { color: #2f3239; font-size: 12px; font-weight: 950; }
.lead-integration-webhook { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 8px; }
.lead-integration-webhook span { color: #625a5e; font-size: 11px; font-weight: 900; }
.lead-integration-webhook code { overflow-x: auto; padding: 7px 9px; border: 1px solid #dce5ec; border-radius: 6px; background: #fff; color: #933f50; direction: ltr; text-align: left; font-size: 11px; }
.lead-integration-api-docs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lead-integration-api-docs a { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 9px; border: 1px solid #a4485a; border-radius: 6px; background: #fff; color: #933f50; font-size: 11px; font-weight: 900; text-decoration: none; }
.lead-integration-api-docs a svg { width: 14px; height: 14px; }
.lead-integration-api-docs span { color: #756c70; font-size: 10.5px; font-weight: 800; }
.lead-integration-api-docs code { direction: ltr; color: #4c474b; }
.lead-integration-setup ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.lead-integration-setup li { display: grid; grid-template-columns: 18px minmax(170px, .7fr) minmax(220px, 1.3fr) 50px; align-items: center; gap: 7px; min-height: 40px; padding: 5px 8px; border-radius: 6px; background: #fff; color: #4c474b; font-size: 11px; font-weight: 800; }
.lead-integration-setup li svg { width: 15px; height: 15px; }
.lead-integration-setup li label span,
.lead-integration-setup li label code { display: block; }
.lead-integration-setup li.done svg,
.lead-integration-setup li.done b { color: #a4485a; }
.lead-integration-setup li.missing svg,
.lead-integration-setup li.missing b { color: #dc2626; }
.lead-integration-setup li code { direction: ltr; color: #625a5e; font-size: 10.5px; text-align: left; }
.lead-integration-setup li input { width: 100%; min-width: 0; min-height: 30px; padding: 5px 8px; border: 1px solid #cfdbe5; border-radius: 6px; background: #fff; color: #2f3239; font: inherit; font-size: 11px; direction: ltr; text-align: left; }
.lead-integration-setup li input:focus { border-color: #a4485a; outline: 3px solid rgba(164, 72, 90, 0.12); }
.lead-integration-setup li b { text-align: end; font-size: 10.5px; }
.lead-integration-setup p { margin: 0; color: #756c70; font-size: 10.5px; font-weight: 750; }
.lead-integration-save-row { display: flex; align-items: center; gap: 9px; }
.lead-integration-save-row span { color: #a4485a; font-size: 11px; font-weight: 900; }

.lead-integration-report { overflow: hidden; }
.lead-integration-report-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #f0e6e8; }
.lead-integration-report-head strong,
.lead-integration-report-head span { display: block; }
.lead-integration-report-head strong { color: #2f3239; font-size: 15px; font-weight: 950; }
.lead-integration-report-head div > span { color: #756c70; font-size: 11px; font-weight: 750; }
.lead-integration-table { display: grid; overflow-x: auto; }
.lead-integration-table .head,
.lead-integration-table .row { display: grid; grid-template-columns: 150px 130px minmax(180px, 1fr) 95px 160px; min-width: 760px; align-items: center; }
.lead-integration-table .head { min-height: 34px; background: #f8f1f1; color: #625a5e; font-size: 10.5px; font-weight: 950; }
.lead-integration-table .row { min-height: 42px; border-top: 1px solid #edf1f5; color: #414047; font-size: 11px; font-weight: 750; }
.lead-integration-table .head span,
.lead-integration-table .row > span { min-width: 0; padding: 7px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-integration-table .row small { display: block; color: #756c70; }
.lead-integration-table button { border: 0; background: transparent; color: #933f50; cursor: pointer; font: inherit; font-weight: 900; text-decoration: underline; }
.lead-status-dot { display: inline-block; width: 7px; height: 7px; margin-inline-end: 5px; border-radius: 50%; background: #16a34a; }
.lead-integration-empty { display: grid; justify-items: center; gap: 5px; padding: 34px 18px; color: #756c70; text-align: center; }
.lead-integration-empty svg { width: 30px; height: 30px; color: #a79da0; }
.lead-integration-empty strong { color: #414047; font-size: 14px; }
.lead-integration-empty span { font-size: 11px; font-weight: 750; }

.runtime-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.runtime-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.runtime-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.runtime-section.wide {
  grid-column: 1 / -1;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.field {
  display: grid;
  gap: 5px;
}

.field label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.field input,
.field select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fffdfc;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
}

.timeline,
.runtime-table {
  display: grid;
  gap: 8px;
}

.timeline-item,
.runtime-row {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfc;
}

.runtime-calendar {
  display: grid;
  grid-template-columns: 80px repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.runtime-calendar .runtime-row {
  min-height: 70px;
}

.slot {
  min-height: 74px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfc;
}

.slot strong,
.slot small {
  display: block;
}

.slot small {
  color: var(--muted);
}

@media (max-width: 1260px) {
  .lead-integration-metrics,
  .lead-integration-sources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .inspector-resizer {
    display: none;
  }

  .inspector {
    grid-column: 1 / -1;
    border-inline-start: 0;
    border-top: 1px solid var(--line);
  }

  .metrics-grid,
  .spec-board,
  .overview-progress-grid,
  .stakeholder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .runtime-calendar-toolbar,
  .runtime-demographics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .runtime-demographics-toggle {
    min-width: 170px;
  }

  .run-new-shell.with-backend {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .db-explorer {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .db-record {
    grid-column: 1 / -1;
  }

  .run-backend-panel {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
  }
}

@media (max-width: 820px) {
  .lead-api-endpoints { grid-template-columns: 1fr; }
  .lead-integration-metrics,
  .lead-integration-sources {
    grid-template-columns: 1fr;
  }
  .runtime-quick-panels {
    grid-template-columns: 1fr;
  }

  .run-product {
    padding: 10px;
  }

  .run-product-header {
    display: grid;
  }

  .run-product-actions {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
  }

  .run-design-picker {
    flex: 1 1 100%;
    min-width: 0;
  }

  .run-product-status {
    flex: 1 1 170px;
    min-width: 0;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-inline-end: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar,
  .split-layout,
  .legacy-layout,
  .knowledge-grid,
  .upload-form,
  .upload-side,
  .paste-zone,
  .spec-workbench,
  .spec-editor-head,
  .spec-comment-row,
  .experiment-grid,
  .module-map,
  .window-workbench,
  .screen-definition-grid {
    grid-template-columns: 1fr;
  }

  .topbar {
    display: grid;
  }

  .metrics-grid,
  .spec-board,
  .overview-progress-grid,
  .approval-summary,
  .stakeholder-grid,
  .spec-master-workbench {
    grid-template-columns: 1fr;
  }

  .runtime-grid,
  .runtime-grid.two,
  .runtime-call-center,
  .call-board,
  .call-future-grid,
  .field-grid,
  .runtime-calendar,
  .db-explorer,
  .run-new-shell,
  .run-new-shell.with-backend,
  .runtime-calendar-toolbar,
  .runtime-calendar-filters,
  .runtime-customer-grid,
  .runtime-search-fields,
  .runtime-profile,
  .runtime-demographics-grid,
  .runtime-visit-grid,
  .runtime-visit-assets,
  .runtime-timeline,
  .run-workflow,
  .run-sim-grid,
  .care-lead-grid,
  .care-customer-grid,
  .care-layer-strip,
  .care-profile-strip {
    grid-template-columns: 1fr;
  }

  .runtime-demographics-toggle-row {
    display: grid;
  }

  .runtime-demographics-toggle {
    width: 100%;
    min-width: 0;
  }

  .care-field {
    flex-basis: 100%;
  }

  .care-window-head {
    display: grid;
  }

  .care-card.span-2 {
    grid-column: auto;
  }

  .calendar {
    grid-column: auto;
  }

  .run-menu {
    position: static;
  }

  .call-queue-panel {
    position: static;
  }

  .call-section-head,
  .call-customer-strip {
    display: grid;
  }

  .call-section-head span {
    text-align: start;
  }

  .call-slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .runtime-day-stats,
  .runtime-day-head,
  .runtime-day-row {
    grid-template-columns: 1fr;
  }

  .runtime-day-table,
  .runtime-treatment-table {
    overflow-x: auto;
  }

  .runtime-day-head,
  .runtime-day-row {
    min-width: 1428px;
    grid-template-columns: var(--runtime-day-grid-columns);
  }

  .runtime-day-table {
    --runtime-day-grid-columns: 44px 64px 86px 92px 110px 132px 92px 112px 250px 82px 104px 260px;
  }

  .runtime-treatment-row {
    min-width: 790px;
  }

  .runtime-day-head {
    display: grid;
  }
}
.runtime-hair-commerce{margin-top:14px;border:1px solid #eadde0;border-radius:16px;background:#fff;padding:16px;display:grid;gap:14px}.runtime-hair-balance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.runtime-hair-balance>div{padding:12px;border-radius:12px;background:#fdf8f5;display:flex;justify-content:space-between;align-items:center}.runtime-hair-balance span{color:#756c70;font-size:12px}.runtime-hair-balance strong{font-size:20px;color:#933f50}.runtime-hair-quote{border:1px solid #eadde0;border-radius:12px;padding:12px}.runtime-hair-quote>summary{cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:700}.runtime-hair-quote-tools{display:grid;grid-template-columns:2fr repeat(5,1fr);gap:10px;margin-top:14px}.runtime-hair-quote-tools label,.runtime-hair-booking>label{display:grid;gap:5px;font-size:12px;color:#625a5e}.runtime-hair-quote-tools input,.runtime-hair-booking input{min-width:0;border:1px solid #e2d4d7;border-radius:8px;padding:9px;background:#fff}.runtime-hair-bulk-count{display:flex!important;gap:6px!important}.runtime-hair-bulk-count input{width:78px}.runtime-hair-bulk-count button{white-space:nowrap;padding:7px}.runtime-hair-body-picker{display:grid;grid-template-columns:150px 1fr;gap:14px;margin-top:12px}.runtime-body-figure{min-height:210px;border:1px dashed #9fbdb4;border-radius:14px;background:#fdf8f5;display:grid;place-content:center;text-align:center;color:#8b4b59}.runtime-body-figure svg{width:70px;height:110px;margin:auto}.runtime-hair-area-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.runtime-hair-area-list label{border:1px solid #eadde0;border-radius:10px;padding:9px;display:flex;gap:8px;align-items:center}.runtime-hair-area-list label:has(input:checked){border-color:#b65566;background:#fdf0f2}.runtime-hair-area-list span{display:grid;gap:3px}.runtime-hair-area-list small{font-size:11px;color:#756c70}.runtime-hair-area-copy{flex:1}.runtime-hair-area-count{width:68px}.runtime-hair-area-count input{width:100%;border:1px solid #e2d4d7;border-radius:7px;padding:6px}.runtime-hair-area-count input:disabled{opacity:.45}.runtime-hair-quote-area-image{width:54px;height:54px;flex:0 0 54px;object-fit:contain;border-radius:7px;background:#fff}.runtime-hair-discount-summary{display:flex;gap:12px;flex-wrap:wrap;padding:8px 10px;border-radius:9px;background:#fff8e7;color:#70561a;font-size:12px}.runtime-hair-deals-report{display:grid;gap:12px}.runtime-hair-deal{border:1px solid #eadde0;border-radius:12px;padding:12px;display:grid;gap:10px}.runtime-hair-deal>header{display:flex;justify-content:space-between}.runtime-hair-deal>header div{display:grid;gap:3px}.runtime-hair-deal>header span{font-size:11px;color:#81767a}.runtime-hair-deal-stats,.runtime-hair-items{display:flex;gap:8px;flex-wrap:wrap}.runtime-hair-deal-stats span,.runtime-hair-items span{background:#f1f6f4;border-radius:999px;padding:5px 9px;font-size:12px}.runtime-hair-booking{display:grid;grid-template-columns:1fr 1fr 2fr auto;gap:10px;align-items:end;padding-top:10px}.runtime-hair-booking>div{display:flex;flex-wrap:wrap;gap:8px}@media(max-width:1100px){.runtime-hair-quote-tools{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.runtime-hair-quote-tools,.runtime-hair-area-list,.runtime-hair-booking{grid-template-columns:1fr}.runtime-hair-body-picker{grid-template-columns:1fr}.runtime-hair-balance{grid-template-columns:1fr 1fr 1fr}.runtime-admin-toolbar{align-items:flex-start;flex-wrap:wrap}.runtime-hair-hourly-rate{order:3;width:100%}}
.runtime-admin-toolbar-actions{display:flex;align-items:center;gap:8px}.care-button.has-unsaved-changes{box-shadow:0 0 0 3px rgba(214,155,45,.24);background:#a86606}.care-button.has-unsaved-changes span::after{content:" · לא נשמר"}

/* Compact selected-visit summary */
.runtime-visit-card {
  gap: 5px;
  padding: 7px 9px;
}

.runtime-visit-head strong { font-size: 13px; }
.runtime-visit-head span { font-size: 10px; }
.runtime-visit-head > div:first-child { min-width: 0; }
.runtime-visit-head > div:first-child > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runtime-visit-actions { gap: 5px; }
.runtime-visit-actions .care-chip { min-height: 22px; padding-inline: 7px; font-size: 10px; }
.runtime-delete-visit-button { min-height: 22px; padding-inline: 6px; font-size: 10px; }

.runtime-visit-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}

.runtime-visit-grid label {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 6px;
  border-radius: 6px;
}

.runtime-visit-grid label span { flex: 0 0 auto; font-size: 9px; }
.runtime-visit-grid label strong { min-width: 0; font-size: 11px; }

@media (max-width: 1100px) {
  .runtime-visit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .runtime-visit-grid { grid-template-columns: 1fr; }
}
.runtime-hair-quote-basis-summary{display:grid;gap:3px;padding:11px 13px;border:1px solid #e8cbd0;border-radius:10px;background:#fdf3f4;color:#933f50}.runtime-hair-quote-basis-summary.is-direct-stars{border-color:#d8c58e;background:#fff8e7;color:#70561a}.runtime-hair-quote-basis-summary span{font-size:12px}.runtime-hair-deal-basis{margin:0;padding:11px 13px;border:1px solid #cdded9;border-radius:10px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}.runtime-hair-deal-basis legend{padding:0 5px;font-weight:700;color:#763544}.runtime-hair-deal-basis label{display:flex;align-items:center;gap:6px}.runtime-hair-deal-basis.locked{display:grid;gap:3px;background:#fdf3f4;color:#933f50}.runtime-hair-deal-basis.locked span{font-size:12px}
.runtime-hair-quote-tools{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}.runtime-hair-area-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:4px;padding:12px 14px;border-block:1px solid #eadde0}.runtime-hair-area-heading>div{display:grid;gap:3px}.runtime-hair-area-heading strong{color:#933f50;font-size:16px}.runtime-hair-area-heading span{color:#756c70;font-size:12px}.runtime-hair-area-heading>.care-button{min-width:232px;min-height:44px;justify-content:center;gap:9px;border-color:#a4485a;background:#a4485a;box-shadow:0 4px 10px rgba(164, 72, 90,.2)}.runtime-hair-area-heading>.care-button:hover{background:#125b4d;transform:translateY(-1px)}.runtime-hair-area-heading>.care-button svg{width:19px;height:19px}.runtime-hair-area-heading>.care-button span{color:#fff;font-size:13px;font-weight:850}.runtime-hair-area-list{width:100%;margin-top:0}

@media(max-width:1100px){.runtime-hair-quote-tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.runtime-hair-quote-tools{grid-template-columns:1fr}.runtime-hair-area-heading{align-items:stretch;flex-direction:column}.runtime-hair-area-heading>.care-button{width:100%}}

.runtime-treatment-table{gap:14px;overflow:visible;border:1px solid #eadde0;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(147, 63, 80,.07)}.runtime-treatment-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0}.runtime-treatment-title{display:flex;align-items:center;gap:11px}.runtime-treatment-title>svg{width:38px;height:38px;padding:9px;border-radius:10px;background:#fdf0f2;color:#a4485a}.runtime-treatment-title>div{display:grid;gap:3px}.runtime-treatment-title strong{color:#17352f;font-size:17px}.runtime-treatment-title span{color:#756c70;font-size:12px}.runtime-treatment-count{flex:0 0 auto;padding:6px 10px;border-radius:999px;background:#f0f6f4;color:#8b4b59;font-size:12px;font-weight:850}.runtime-treatment-grid{overflow:visible;border:1px solid #eadde0;border-radius:11px}.runtime-treatment-row{grid-template-columns:130px 140px minmax(240px,1fr) 72px 100px 110px 110px 64px;min-height:48px;border-top:1px solid #f5edef;background:#fff}.runtime-treatment-row.head{min-height:38px;border-radius:10px 10px 0 0;background:#edf4f2;color:#4d6760}.runtime-treatment-row.head span{font-size:11px}.runtime-treatment-row:not(.head):hover{background:#fbfdfc}.runtime-treatment-row span{border-inline-start:0;padding-inline:10px}.runtime-treatment-row span+span{border-inline-start:1px solid #f5edef}.runtime-visit-test-cell{padding:5px 7px!important}.runtime-visit-test-cell select{min-height:36px;scroll-margin-block:180px;border-color:#e2d4d7;background:#fff;font-size:12px}.runtime-visit-test-quantity{display:grid;min-width:28px;height:28px;place-items:center;border-radius:8px;background:#fdf3f4;color:#933f50}.runtime-visit-test-quantity.muted{background:#f2f5f4;color:#96a49f}.runtime-visit-test-empty{justify-content:center;color:#a79da0}.runtime-visit-test-actions .icon-button{border:1px solid #f0d2cf;background:#fff7f6}.runtime-visit-test-actions .icon-button:hover{background:#feeceb}.runtime-treatment-row-new{border-radius:0 0 10px 10px;background:#f8fbfa}.runtime-treatment-row-new:hover{background:#f3f9f7!important}.runtime-treatment-row-new .runtime-visit-test-cell select{border-style:dashed;border-color:#8fb9ad;color:#41685e}.runtime-visit-test-new-label{display:flex;align-items:center;justify-content:center;gap:3px;color:#a4485a}.runtime-visit-test-new-label svg{width:14px;height:14px}.runtime-visit-test-new-label small{font-size:10px;font-weight:850}

@media(max-width:900px){.runtime-treatment-head{align-items:flex-start;flex-direction:column}.runtime-treatment-grid{overflow-x:auto;overflow-y:visible}.runtime-treatment-row{min-width:940px}}

.runtime-hair-customer-booking{border:1px solid #ddaab3;background:#fdf8f5;box-shadow:0 8px 22px rgba(147, 63, 80,.08)}.runtime-hair-customer-booking>summary{justify-content:space-between;gap:16px}.runtime-hair-customer-booking>summary>span{display:flex;align-items:center;gap:8px;min-width:0}.runtime-hair-customer-booking>summary>span>span,.runtime-hair-customer-booking>summary small{color:#756c70;font-size:11px;font-weight:750}.runtime-hair-customer-booking>summary>span>strong{white-space:nowrap}.runtime-hair-customer-booking>summary>b{flex:0 0 auto;padding:5px 9px;border-radius:999px;background:#f9e8eb;color:#933f50;font-size:11px}.runtime-hair-deal-bank-note{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:9px;background:#fdf8f5;color:#536e66;font-size:12px}.runtime-hair-deal-bank-note svg{width:15px;height:15px}.runtime-hair-treatment-history{display:grid;gap:10px;overflow-x:auto;padding-top:4px}.runtime-hair-treatment-history>.runtime-treatment-head{margin:0}.runtime-hair-treatment-history .care-table{min-width:760px}

@media(max-width:700px){.runtime-hair-customer-booking>summary{align-items:flex-start;flex-direction:column}.runtime-hair-customer-booking>summary>span{align-items:flex-start;flex-wrap:wrap}.runtime-hair-customer-booking>summary small{flex-basis:100%}}

@media (max-width: 1260px) {
  .runtime-customer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .runtime-customer-grid {
    grid-template-columns: 1fr;
  }
}

/* CARE unified brand palette — keep navigation and runtime tools on one visual line. */
.brand-mark {
  background: var(--care-primary);
  box-shadow: 0 10px 24px rgba(207, 102, 117, 0.2);
}

.primary-button:hover,
.care-button.primary:hover,
.runtime-admin-toolbar .care-button.primary:hover,
.runtime-hair-area-heading > .care-button:hover {
  border-color: var(--care-primary-hover);
  background: var(--care-primary-hover);
}

.primary-button.soft:hover,
.care-button.ghost:hover,
.care-link-button:hover,
.icon-button:hover {
  border-color: #ddaab3;
  background: var(--care-primary-soft);
  color: var(--care-primary-dark);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus,
[contenteditable="true"]:focus {
  border-color: var(--care-primary);
  outline: 3px solid rgba(207, 102, 117, 0.14);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--care-primary);
}

.progress-meter-fill {
  background: linear-gradient(90deg, var(--care-primary-dark), var(--care-primary));
}

.run-product[class*="run-theme-"] {
  --run-bg-top: #fdf8f5;
  --run-bg-bottom: #f8f1f1;
  --run-surface: #ffffff;
  --run-soft: #fef6f3;
  --run-border: #eadde0;
  --run-text: #2f3239;
  --run-muted: #756c70;
  --run-primary: #cf6675;
  --run-primary-soft: #fdf0f2;
  --run-accent: #b95567;
  --run-accent-soft: #f9e8eb;
}

.run-product[class*="run-theme-"] .run-product-mark,
.run-product[class*="run-theme-"] .run-code-toggle.active,
.run-product[class*="run-theme-"] .run-menu-root.active,
.run-product[class*="run-theme-"] .care-button.primary,
.run-product[class*="run-theme-"] .run-calendar-link.active,
.run-product[class*="run-theme-"] .call-task.active .call-priority,
.run-product[class*="run-theme-"] .runtime-day-row.selected-for-schedule .runtime-time-cell {
  border-color: var(--care-primary);
  background: var(--care-primary);
  color: #fff;
}

.run-product[class*="run-theme-"] .run-branch.active,
.run-product[class*="run-theme-"] .run-calendar-link.active,
.run-product[class*="run-theme-"] .call-task.active,
.run-product[class*="run-theme-"] .runtime-layer-tab.active,
.run-product[class*="run-theme-"] .runtime-day-row.selected-for-schedule,
.run-product[class*="run-theme-"] .runtime-source-cascade-row.active,
.run-product[class*="run-theme-"] .runtime-admin-nav button.active {
  border-color: var(--care-primary);
  background: var(--care-primary-soft);
  color: var(--care-primary-dark);
}

.run-product[class*="run-theme-"] .run-product-header,
.run-product[class*="run-theme-"] .run-menu,
.run-product[class*="run-theme-"] .run-product-status,
.run-product[class*="run-theme-"] .run-design-picker select,
.run-product[class*="run-theme-"] .run-code-toggle {
  border-color: var(--run-border);
  background: #fffdfc;
  color: var(--run-text);
}

.runtime-treatment-title > svg,
.runtime-visit-test-quantity,
.runtime-treatment-count,
.runtime-hair-customer-booking > summary > b,
.runtime-hair-deal-stats span,
.runtime-hair-items span,
.care-chip.green,
.pill.green {
  border-color: #ecc7ce;
  background: var(--care-primary-soft);
  color: var(--care-primary-dark);
}

.runtime-treatment-row.head,
.runtime-treatment-row-new,
.runtime-hair-balance > div,
.runtime-hair-deal-bank-note,
.runtime-hair-quote-basis-summary,
.runtime-hair-deal-basis.locked {
  border-color: var(--line);
  background: var(--care-warm);
  color: var(--ink);
}

/* Optometric form — faithful compact layout based on the legacy clinical screen. */
.runtime-optometric-workspace {
  inset: 2px;
  grid-template-rows: 23px 33px minmax(0, 1fr);
  gap: 2px;
  padding: 2px;
  overflow: hidden;
  border: 1px solid #9897a8;
  border-radius: 0;
  background: #f2c9ef;
  box-shadow: 0 8px 30px rgba(45, 38, 57, .34);
  color: #181523;
  font-family: Arial, Helvetica, sans-serif;
}

.runtime-optometric-workspace .opto-titlebar {
  min-height: 23px;
  padding: 1px 4px;
  border: 1px solid #aaa0bd;
  background: linear-gradient(#e8d9f1, #d7c9e8);
  font-size: 8px;
}
.runtime-optometric-workspace .opto-titlebar > div:first-child { gap: 18px; }
.runtime-optometric-workspace .opto-titlebar strong { color: #17131d; font-size: 9px; }
.runtime-optometric-workspace .opto-titlebar span,
.runtime-optometric-workspace .opto-titlebar small { color: #302a3a; font-size: 8px; }
.runtime-optometric-workspace .opto-titlebar-meta { display: flex; align-items: center; gap: 18px; margin-left: auto; margin-right: 16px; }
.runtime-optometric-workspace .opto-titlebar .runtime-forms-actions { gap: 2px; }
.runtime-optometric-workspace .opto-titlebar .care-button,
.runtime-optometric-workspace .opto-titlebar .icon-button { min-height: 18px; height: 18px; padding: 1px 5px; border-radius: 1px; font-size: 7px; }
.runtime-optometric-workspace .opto-titlebar .care-button svg,
.runtime-optometric-workspace .opto-titlebar .icon-button svg { width: 10px; height: 10px; }

.runtime-optometric-workspace .opto-form-toolbar {
  grid-template-columns: minmax(210px, 1fr) 150px 90px 115px;
  gap: 2px;
  padding: 2px 4px;
  border: 1px solid #d1a8cd;
  background: #f4d2f1;
}
.runtime-optometric-workspace .opto-patient,
.runtime-optometric-workspace .opto-save { min-height: 25px; height: 25px; padding: 2px 6px; border-color: #c7a4c5; border-radius: 1px; }
.runtime-optometric-workspace .opto-patient > span,
.runtime-optometric-workspace .opto-patient small,
.runtime-optometric-workspace .opto-save small { font-size: 7px; }
.runtime-optometric-workspace .opto-patient strong { color: #201927; font-size: 10px; }
.runtime-optometric-workspace .opto-save { color: #1e513f; }

.runtime-optometric-workspace .opto-form-grid {
  grid-template-columns: minmax(245px, 29.5%) minmax(720px, 70.5%);
  gap: 2px;
}
.runtime-optometric-workspace .opto-sidebar,
.runtime-optometric-workspace .opto-eye,
.runtime-optometric-workspace .opto-binocular-board { border-color: #c094bf; border-radius: 0; background: #f4cff1; }
.runtime-optometric-workspace .opto-sidebar {
  grid-template-rows: auto auto minmax(72px, 1fr) minmax(72px, 1fr) auto auto auto;
  gap: 3px;
  padding: 4px;
  overflow: hidden;
  direction: ltr;
}
.runtime-optometric-workspace .opto-sidebar-title { min-height: 24px; padding: 2px 4px; border: 1px solid #c79fc5; color: #241829; }
.runtime-optometric-workspace .opto-sidebar-title svg { display: none; }
.runtime-optometric-workspace .opto-sidebar-title strong { color: #211725; font-size: 9px; }
.runtime-optometric-workspace .opto-sidebar-title span { padding: 1px 4px; border-radius: 0; background: #fff; color: #5f3d60; font-size: 7px; }
.runtime-optometric-workspace .opto-staff-grid { grid-template-columns: 1fr; gap: 2px; padding: 3px; border: 1px solid #caa4c8; }
.runtime-optometric-workspace .opto-sidebar .opto-textarea { min-height: 0; }
.runtime-optometric-workspace .opto-sidebar .opto-textarea textarea { height: 100%; min-height: 48px; }
.runtime-optometric-workspace .opto-sidebar-row { grid-template-columns: 1fr auto; gap: 3px; }
.runtime-optometric-workspace .opto-sidebar-actions { grid-template-columns: repeat(4, 1fr); gap: 2px; }
.runtime-optometric-workspace .opto-audit-compact { gap: 1px; padding: 3px; border-radius: 0; background: #ebc4e8; }
.runtime-optometric-workspace .opto-audit-compact span { font-size: 7px; }
.runtime-optometric-workspace .opto-audit-compact b { color: #332038; }
.opto-legacy-actions { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; }
.opto-legacy-actions button { min-width: 0; height: 20px; padding: 0 2px; border: 1px solid #9f91a7; border-radius: 0; background: #ece9ed; color: #19151d; font: 7px Arial, sans-serif; }

.runtime-optometric-workspace .opto-field { gap: 1px; color: #28202d; font-size: 7px; }
.runtime-optometric-workspace .opto-field input,
.runtime-optometric-workspace .opto-field select,
.runtime-optometric-workspace .opto-field textarea,
.runtime-optometric-workspace .opto-map-table input { height: 19px; padding: 1px 3px; border-color: #cba8c9; border-radius: 1px; color: #18131d; font-size: 8px; font-weight: 500; }
.runtime-optometric-workspace .opto-check { min-height: 19px; color: #28202d; font-size: 7px; }
.runtime-optometric-workspace .opto-check input { width: 10px; height: 10px; accent-color: #579168; }

.runtime-optometric-workspace .opto-clinical-board { grid-template-rows: auto minmax(0, 1fr); gap: 2px; }
.runtime-optometric-workspace .opto-eye-line {
  grid-template-columns: minmax(86px, .8fr) minmax(70px, .65fr) minmax(128px, 1.15fr) minmax(104px, .9fr) minmax(70px, .65fr) minmax(128px, 1.15fr);
  min-height: 29px;
  border-color: #c49bc2;
  background: #f2caef;
}
.opto-dominant-eye { padding: 2px 4px; border-right: 1px solid #c49bc2; }
.runtime-optometric-workspace .opto-eye-title { border-color: #c49bc2; color: #19131d; font-size: 8px; }
.runtime-optometric-workspace .opto-eye-title.od,
.runtime-optometric-workspace .opto-eye-title.os { border-top: 0; color: #17121b; }
.runtime-optometric-workspace .opto-eye-title.be { border-top: 0; border-color: #c49bc2; background: #efc1eb; color: #302030; }
.runtime-optometric-workspace .opto-eye-quick { gap: 3px; padding: 2px 4px; }
.runtime-optometric-workspace .opto-ucva-line { grid-template-columns: minmax(78px, .8fr) repeat(2, minmax(52px, .7fr)) minmax(118px, 1.1fr) repeat(2, minmax(52px, .7fr)); gap: 3px; padding: 2px 4px 3px; border-color: #c49bc2; background: #f4d0f1; }
.runtime-optometric-workspace .opto-ucva-line > b { color: #241929; font-size: 7px; }
.runtime-optometric-workspace .opto-be-pair { gap: 3px; padding: 2px 3px; border-color: #b98bb5; border-radius: 0; background: #edbfe9; }
.runtime-optometric-workspace .opto-binocular-row { grid-template-columns: minmax(120px, 1.58fr) repeat(4, minmax(38px, .58fr)) repeat(2, minmax(42px, .66fr)) repeat(4, minmax(38px, .58fr)); min-height: 20px; border-color: #d1adcf; }
.runtime-optometric-workspace .opto-binocular-row > * { border-color: #d1adcf; }
.runtime-optometric-workspace .opto-binocular-row b,
.runtime-optometric-workspace .opto-binocular-row span { padding: 1px 3px; color: #241c28; font-size: 7px; }
.runtime-optometric-workspace .opto-binocular-row:not(.head) b { background: #f0c5ed; }
.runtime-optometric-workspace .opto-binocular-row input { height: 20px; padding: 1px 2px; background: #fff9ff; color: #17121a; font-size: 8px; font-weight: 500; }
.runtime-optometric-workspace .opto-binocular-row.head { min-height: 17px; background: #e9bae5; }
.runtime-optometric-workspace .opto-binocular-row .be-value,
.runtime-optometric-workspace .opto-binocular-row.head span:nth-child(6),
.runtime-optometric-workspace .opto-binocular-row.head span:nth-child(7) { background: #edbfe9; color: #251826; }
.runtime-optometric-workspace .opto-binocular-row.dilated-start { border-top-color: #9c6b98; }
.runtime-optometric-workspace .opto-tears-line { grid-template-columns: minmax(92px, 1.1fr) minmax(55px, .7fr) minmax(55px, .7fr) minmax(28px, .35fr) minmax(92px, 1.1fr) minmax(55px, .7fr) minmax(55px, .7fr); gap: 3px; padding: 2px 4px 3px; border-color: #c49bc2; background: #efc5ec; }
.runtime-optometric-workspace .opto-tears-line > b { color: #251a29; font-size: 7px; }

.runtime-optometric-workspace .opto-bilateral-grid { gap: 2px; }
.runtime-optometric-workspace .opto-eye { grid-template-rows: auto auto minmax(86px, 1fr) auto auto; gap: 2px; padding: 3px; overflow: hidden; direction: ltr; }
.runtime-optometric-workspace .opto-eye-right,
.runtime-optometric-workspace .opto-eye-left { border-top: 1px solid #c094bf; }
.runtime-optometric-workspace .opto-eye-head { min-height: 18px; padding: 0 3px; }
.runtime-optometric-workspace .opto-eye-head strong { color: #211624; font-size: 9px; }
.runtime-optometric-workspace .opto-eye-head span { font-size: 8px; }
.runtime-optometric-workspace .opto-subsection,
.runtime-optometric-workspace .opto-diagnosis,
.runtime-optometric-workspace .opto-classification { border-color: #bd91ba; border-radius: 0; background: #f3ccef; }
.runtime-optometric-workspace .opto-subsection h6 { padding: 2px 4px; background: #e5b5df; color: #271a2a; font-size: 7px; text-align: left; }
.runtime-optometric-workspace .opto-metrics { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 2px; }
.runtime-optometric-workspace .opto-map-table > div { grid-template-columns: minmax(120px, 1.5fr) minmax(70px, .8fr) 28px; min-height: 18px; border-color: #c9a2c6; }
.runtime-optometric-workspace .opto-map-table > div > * { border-color: #c9a2c6; }
.runtime-optometric-workspace .opto-map-table .head { min-height: 17px; background: #2a91c2; }
.runtime-optometric-workspace .opto-map-table .head span { color: #fff; font-size: 7px; }
.runtime-optometric-workspace .opto-diagnosis { grid-template-columns: 1.15fr .75fr 1.15fr; gap: 2px; padding: 2px; }
.runtime-optometric-workspace .opto-classification { gap: 2px; padding: 2px; }
.runtime-optometric-workspace .opto-classification-title { padding: 1px 3px; background: #e3b3de; color: #241827; font-size: 7px; }
.runtime-optometric-workspace .opto-classification-title span { color: #4d354d; }
.runtime-optometric-workspace .opto-classification-grid { gap: 2px; }
.runtime-optometric-workspace .opto-classification-footer { gap: 2px; }

@media (max-width: 900px) {
  .runtime-optometric-workspace { inset: 1px; min-width: 900px; overflow: auto; }
  .runtime-optometric-workspace .opto-form-grid { grid-template-columns: 245px minmax(720px, 1fr); }
  .runtime-optometric-workspace .opto-bilateral-grid { grid-template-columns: 1fr 1fr; }
  .runtime-optometric-workspace .opto-sidebar,
  .runtime-optometric-workspace .opto-eye { overflow: hidden; }
}

/* Optometric UX pass — explicit OD / BE / OS zones and improved scanning. */
.runtime-optometric-workspace {
  --opto-od: #19769a;
  --opto-od-line: #79bad1;
  --opto-od-soft: #eaf6fa;
  --opto-be: #7b6720;
  --opto-be-line: #d7bd58;
  --opto-be-soft: #fff8d9;
  --opto-os: #a93b69;
  --opto-os-line: #d891ae;
  --opto-os-soft: #fceef4;
  --opto-surface: #fbfafc;
  --opto-line: #c9c4cf;
  --opto-zone-columns: minmax(120px, 1.58fr) minmax(152px, 2.32fr) minmax(84px, 1.32fr) minmax(152px, 2.32fr);
  --opto-data-columns: minmax(120px, 1.58fr) repeat(4, minmax(38px, .58fr)) repeat(2, minmax(42px, .66fr)) repeat(4, minmax(38px, .58fr));
  grid-template-rows: 30px 42px minmax(0, 1fr);
  gap: 5px;
  padding: 6px;
  border-color: #8d8798;
  background: #e9e5ed;
}

.runtime-optometric-workspace .opto-titlebar {
  min-height: 30px;
  padding: 3px 7px;
  border-color: #aaa3b2;
  background: #dad3e2;
}
.runtime-optometric-workspace .opto-titlebar strong { font-size: 11px; }
.runtime-optometric-workspace .opto-titlebar span,
.runtime-optometric-workspace .opto-titlebar small { font-size: 9px; }
.runtime-optometric-workspace .opto-titlebar .care-button,
.runtime-optometric-workspace .opto-titlebar .icon-button { height: 23px; min-height: 23px; padding: 2px 8px; font-size: 8px; }

.runtime-optometric-workspace .opto-form-toolbar {
  grid-template-columns: minmax(210px, 1fr) 165px 105px 130px;
  gap: 6px;
  padding: 4px 6px;
  border-color: #bbb4c3;
  background: #f3f0f5;
}
.runtime-optometric-workspace .opto-patient,
.runtime-optometric-workspace .opto-save { height: 32px; min-height: 32px; padding: 4px 8px; border-color: #c5bfcb; border-radius: 4px; }
.runtime-optometric-workspace .opto-patient > span,
.runtime-optometric-workspace .opto-patient small,
.runtime-optometric-workspace .opto-save small { font-size: 8px; }
.runtime-optometric-workspace .opto-patient strong { font-size: 12px; }

.runtime-optometric-workspace .opto-form-grid {
  grid-template-columns: minmax(240px, 22.5%) minmax(840px, 77.5%);
  gap: 6px;
}
.runtime-optometric-workspace .opto-sidebar {
  grid-template-rows: auto auto minmax(62px, .62fr) minmax(62px, .62fr) auto auto auto;
  gap: 6px;
  padding: 7px;
  border: 1px solid #b8b2c0;
  border-radius: 5px;
  background: #f4f1f5;
}
.runtime-optometric-workspace .opto-sidebar-title { min-height: 30px; padding: 4px 6px; border-color: #cbc4cf; border-radius: 3px; background: #fff; }
.runtime-optometric-workspace .opto-sidebar-title strong { font-size: 10px; }
.runtime-optometric-workspace .opto-sidebar-title span { padding: 2px 6px; border-radius: 10px; background: #ece7ef; font-size: 8px; }
.runtime-optometric-workspace .opto-staff-grid { gap: 5px; padding: 5px; border-color: #cec7d2; border-radius: 3px; background: #fff; }
.runtime-optometric-workspace .opto-sidebar .opto-textarea textarea { min-height: 58px; }
.runtime-optometric-workspace .opto-audit-compact { padding: 5px; border-radius: 3px; background: #ebe7ee; }
.runtime-optometric-workspace .opto-audit-compact span { font-size: 8px; }
.runtime-optometric-workspace .opto-sidebar-actions { gap: 4px; }
.runtime-optometric-workspace .opto-legacy-actions { gap: 3px; }
.runtime-optometric-workspace .opto-legacy-actions button { height: 24px; border-color: #aaa3b1; border-radius: 2px; background: #fff; font-size: 8px; }

.runtime-optometric-workspace .opto-field { gap: 2px; color: #3b3540; font-size: 8.5px; }
.runtime-optometric-workspace .opto-field input,
.runtime-optometric-workspace .opto-field select,
.runtime-optometric-workspace .opto-field textarea,
.runtime-optometric-workspace .opto-map-table input {
  height: 24px;
  padding: 2px 5px;
  border-color: #bdb7c3;
  border-radius: 3px;
  background: #fff;
  font-size: 9px;
}
.runtime-optometric-workspace .opto-check { min-height: 24px; font-size: 8px; }
.runtime-optometric-workspace .opto-check input { width: 12px; height: 12px; }

.runtime-optometric-workspace .opto-clinical-board { gap: 6px; }
.runtime-optometric-workspace .opto-binocular-board { border-color: #aaa4b0; border-radius: 5px; background: var(--opto-surface); }
.opto-zone-legend {
  display: grid;
  grid-template-columns: var(--opto-zone-columns);
  min-height: 34px;
  border-bottom: 1px solid var(--opto-line);
  background: #f7f5f8;
}
.opto-zone-legend > * { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; border-left: 3px solid transparent; }
.opto-zone-legend .opto-zone-spacer { justify-content: flex-start; padding-left: 9px; color: #5c5662; font-size: 9px; font-weight: 700; }
.opto-zone-legend strong b { font-size: 14px; letter-spacing: .04em; }
.opto-zone-legend strong small { font-size: 8px; font-weight: 700; }
.opto-zone-legend .od { border-color: var(--opto-od); background: var(--opto-od-soft); color: var(--opto-od); }
.opto-zone-legend .be { border-color: var(--opto-be-line); background: var(--opto-be-soft); color: var(--opto-be); }
.opto-zone-legend .os { border-color: var(--opto-os); background: var(--opto-os-soft); color: var(--opto-os); }

.runtime-optometric-workspace .opto-eye-line {
  grid-template-columns: var(--opto-zone-columns);
  min-height: 38px;
  background: #f8f6f9;
}
.runtime-optometric-workspace .opto-dominant-eye { padding: 4px 7px; border-color: var(--opto-line); }
.runtime-optometric-workspace .opto-eye-zone {
  min-width: 0;
  align-self: stretch;
  display: grid;
  grid-template-columns: minmax(72px, .68fr) minmax(0, 1.32fr);
}
.runtime-optometric-workspace .opto-eye-zone-od { border-left: 4px solid var(--opto-od-line); background: var(--opto-od-soft); }
.runtime-optometric-workspace .opto-eye-zone-os { border-left: 4px solid var(--opto-os-line); background: var(--opto-os-soft); }
.runtime-optometric-workspace .opto-eye-title { font-size: 10px; }
.runtime-optometric-workspace .opto-eye-title.od { background: var(--opto-od-soft); color: var(--opto-od); }
.runtime-optometric-workspace .opto-eye-title.be { border-left: 4px solid var(--opto-be-line); background: var(--opto-be-soft); color: var(--opto-be); }
.runtime-optometric-workspace .opto-eye-title.os { background: var(--opto-os-soft); color: var(--opto-os); }
.runtime-optometric-workspace .opto-eye-quick { gap: 5px; padding: 4px 6px; }

.runtime-optometric-workspace .opto-ucva-line { grid-template-columns: var(--opto-zone-columns); gap: 0; padding: 0; background: #f9f8fa; }
.runtime-optometric-workspace .opto-ucva-line > b { font-size: 8px; }
.runtime-optometric-workspace .opto-ucva-pair { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px 6px; }
.runtime-optometric-workspace .opto-ucva-od { border-left: 4px solid var(--opto-od-line); background: var(--opto-od-soft); }
.runtime-optometric-workspace .opto-be-pair { gap: 5px; padding: 5px 6px; border: 0; border-left: 4px solid var(--opto-be-line); border-radius: 0; background: var(--opto-be-soft); }
.runtime-optometric-workspace .opto-ucva-os { border-left: 4px solid var(--opto-os-line); background: var(--opto-os-soft); }

.runtime-optometric-workspace .opto-binocular-row { grid-template-columns: var(--opto-data-columns); min-height: 25px; border-color: #d5d0d8; }
.runtime-optometric-workspace .opto-binocular-row b,
.runtime-optometric-workspace .opto-binocular-row span { padding: 2px 5px; font-size: 8px; }
.runtime-optometric-workspace .opto-binocular-row:not(.head) b { background: #f1eef3; }
.runtime-optometric-workspace .opto-binocular-row input { height: 25px; font-size: 9px; background: #fff; }
.runtime-optometric-workspace .opto-binocular-row.head { min-height: 22px; background: #e9e6ec; }
.runtime-optometric-workspace .opto-binocular-row .od-value { background: var(--opto-od-soft); }
.runtime-optometric-workspace .opto-binocular-row .be-value { background: var(--opto-be-soft); }
.runtime-optometric-workspace .opto-binocular-row .os-value { background: var(--opto-os-soft); }
.runtime-optometric-workspace .opto-binocular-row .od-value:first-of-type,
.runtime-optometric-workspace .opto-binocular-row .od-heading { border-left: 4px solid var(--opto-od-line); }
.runtime-optometric-workspace .opto-binocular-row .be-value:nth-of-type(5),
.runtime-optometric-workspace .opto-binocular-row .be-heading { border-left: 4px solid var(--opto-be-line); }
.runtime-optometric-workspace .opto-binocular-row .os-value:nth-of-type(7),
.runtime-optometric-workspace .opto-binocular-row .os-heading { border-left: 4px solid var(--opto-os-line); }
.runtime-optometric-workspace .opto-binocular-row.head span:nth-child(2),
.runtime-optometric-workspace .opto-binocular-row.head span:nth-child(3),
.runtime-optometric-workspace .opto-binocular-row.head span:nth-child(4),
.runtime-optometric-workspace .opto-binocular-row.head span:nth-child(5) { background: var(--opto-od-soft); color: var(--opto-od); }
.runtime-optometric-workspace .opto-binocular-row.head span:nth-child(6),
.runtime-optometric-workspace .opto-binocular-row.head span:nth-child(7) { background: var(--opto-be-soft); color: var(--opto-be); }
.runtime-optometric-workspace .opto-binocular-row.head span:nth-child(n+8) { background: var(--opto-os-soft); color: var(--opto-os); }
.runtime-optometric-workspace .opto-tears-line { gap: 5px; padding: 5px 7px 6px; background: #f5f2f6; }

.runtime-optometric-workspace .opto-bilateral-grid { gap: 7px; }
.runtime-optometric-workspace .opto-eye { gap: 5px; padding: 6px; border-radius: 5px; background: #f8f7f9; }
.runtime-optometric-workspace .opto-eye > .opto-subsection { min-height: max-content; }
.runtime-optometric-workspace .opto-eye > .opto-subsection:first-of-type { min-height: 112px; }
.runtime-optometric-workspace .opto-eye-right { border: 2px solid var(--opto-od-line); border-top: 6px solid var(--opto-od); }
.runtime-optometric-workspace .opto-eye-left { border: 2px solid var(--opto-os-line); border-top: 6px solid var(--opto-os); }
.runtime-optometric-workspace .opto-eye-head { min-height: 29px; padding: 2px 6px; }
.runtime-optometric-workspace .opto-eye-head strong { font-size: 12px; }
.runtime-optometric-workspace .opto-eye-right .opto-eye-head { color: var(--opto-od); background: var(--opto-od-soft); }
.runtime-optometric-workspace .opto-eye-left .opto-eye-head { color: var(--opto-os); background: var(--opto-os-soft); }
.runtime-optometric-workspace .opto-eye-right .opto-eye-head strong,
.runtime-optometric-workspace .opto-eye-right .opto-eye-head span { color: var(--opto-od); }
.runtime-optometric-workspace .opto-eye-left .opto-eye-head strong,
.runtime-optometric-workspace .opto-eye-left .opto-eye-head span { color: var(--opto-os); }
.runtime-optometric-workspace .opto-subsection,
.runtime-optometric-workspace .opto-diagnosis,
.runtime-optometric-workspace .opto-classification { border-color: #c8c2cc; border-radius: 3px; background: #fff; }
.runtime-optometric-workspace .opto-subsection h6 { padding: 4px 6px; background: #e9e6ec; font-size: 8px; }
.runtime-optometric-workspace .opto-metrics { gap: 4px; padding: 5px; }
.runtime-optometric-workspace .opto-map-section { align-self: start; width: 100%; }
.runtime-optometric-workspace .opto-map-table > div { min-height: 23px; }
.runtime-optometric-workspace .opto-map-table .head { min-height: 21px; background: #3c7894; }
.runtime-optometric-workspace .opto-eye-left .opto-map-table .head { background: #a94c73; }
.runtime-optometric-workspace .opto-diagnosis { gap: 4px; padding: 5px; }
.runtime-optometric-workspace .opto-classification { gap: 4px; padding: 5px; }
.runtime-optometric-workspace .opto-classification-title { padding: 3px 5px; background: #e9e6ec; font-size: 8px; }
.runtime-optometric-workspace .opto-classification-grid,
.runtime-optometric-workspace .opto-classification-footer { gap: 4px; }

@media (max-width: 1350px) {
  .runtime-optometric-workspace .opto-form-grid { grid-template-columns: 230px minmax(840px, 1fr); }
}

@media (max-height: 850px) {
  .runtime-optometric-workspace .opto-eye { overflow-y: auto; scrollbar-width: thin; }
}