:root {
  --ink: #1f2e29;
  --ink-soft: #4f5f59;
  --muted: #7f8c87;
  --canvas: #f6f7f3;
  --surface: #ffffff;
  --surface-soft: #f9faf7;
  --sage-50: #eff6f1;
  --sage-100: #e1eee7;
  --sage-200: #c9dfd2;
  --sage-500: #4c836b;
  --sage-700: #2f604d;
  --forest: #244b3d;
  --orange-50: #fff6e8;
  --orange-100: #f9e6c6;
  --orange-600: #ad681f;
  --red-50: #fff1ef;
  --red-100: #f3d5d1;
  --red-600: #ae4d43;
  --blue-50: #eff6f8;
  --blue-100: #d6e7eb;
  --blue-700: #476d79;
  --violet-50: #f4f1f8;
  --violet-100: #e4dcef;
  --violet-700: #6f5a86;
  --line: #e1e6e1;
  --line-strong: #cfd8d1;
  --shadow: 0 14px 36px rgba(35, 54, 46, 0.06);
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --sidebar: 244px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }

button { color: inherit; }

.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  width: var(--sidebar);
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: #fbfcfa;
}

.brand-lockup {
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: 9px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
}

.brand-lockup img { width: 145px; height: auto; }

.brand-lockup > span {
  padding: 4px 6px;
  border-radius: 5px;
  background: var(--sage-100);
  color: var(--forest);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
}

.snapshot-control {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 0 9px;
  margin: 18px 14px 9px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 12px;
}

.snapshot-control time {
  grid-column: 2;
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
}

.status-dot {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--sage-500);
  box-shadow: 0 0 0 4px var(--sage-100);
}

#primary-nav {
  flex: 1;
  overflow-y: auto;
  padding: 4px 11px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.nav-group { margin-top: 16px; }

.nav-label {
  margin: 0 10px 6px;
  color: #929c97;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.nav-item, .source-shortcut {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #53615c;
  font-size: 13px;
  font-weight: 520;
}

.nav-item:hover { background: #f2f5f1; color: var(--ink); }

.nav-item.active {
  background: var(--sage-100);
  color: var(--forest);
  font-weight: 720;
}

.nav-number {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: #7c8a84;
  font-size: 8px;
  font-weight: 800;
}

.nav-item.active .nav-number { border-color: #b8d2c4; background: #f8fcfa; color: var(--sage-700); }

.nav-alert {
  margin-left: auto;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--orange-50);
  color: var(--orange-600);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.source-shortcut {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
}

.source-shortcut:hover, .source-shortcut.active { background: var(--sage-50); }

.source-shortcut-mark {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  background: var(--forest);
  color: white;
  font-size: 10px;
  font-weight: 800;
}

.source-shortcut span:last-child, .sidebar-footer span:nth-child(2) { display: flex; flex-direction: column; }

.source-shortcut strong, .sidebar-footer strong { font-size: 11px; }

.source-shortcut small, .sidebar-footer small { color: var(--muted); font-size: 9px; }

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 63px;
  padding: 11px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.avatar {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--sage-100);
  color: var(--forest);
  font-size: 11px;
  font-weight: 800;
}

.avatar.small { width: 30px; height: 30px; }

.main-area { min-height: 100vh; margin-left: var(--sidebar); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 252, 249, .94);
  backdrop-filter: blur(12px);
}

.breadcrumbs { display: flex; align-items: center; gap: 10px; color: #8a9691; font-size: 12px; }
.breadcrumbs strong { color: var(--ink); font-size: 12px; }
.slash { color: #bdc5c0; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }

.search-trigger {
  display: flex;
  min-width: 230px;
  height: 36px;
  align-items: center;
  gap: 9px;
  padding: 0 8px 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: #7d8984;
  cursor: pointer;
  font-size: 11px;
  text-align: left;
}

.search-trigger > span:nth-child(2) { flex: 1; }

.search-mark {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid #8c9993;
  border-radius: 50%;
}

.search-mark::after {
  display: block;
  width: 5px;
  height: 1.5px;
  margin: 9px 0 0 8px;
  background: #8c9993;
  content: "";
  transform: rotate(45deg);
}

kbd, .key-button {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fafbf9;
  color: #929c97;
  font-family: var(--sans);
  font-size: 9px;
}

.top-snapshot { color: #8d9893; font-size: 10px; }

.content {
  width: min(1220px, calc(100% - 64px));
  margin: 0 auto;
  padding: 39px 0 72px;
  outline: none;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.page-kicker {
  margin: 0 0 8px;
  color: var(--sage-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

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

h1 {
  max-width: 760px;
  margin-bottom: 8px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 51px);
  font-weight: 500;
  letter-spacing: -.034em;
  line-height: 1.02;
}

.page-head p:not(.page-kicker) { max-width: 670px; margin-bottom: 0; color: var(--ink-soft); font-size: 13px; }

.button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 720;
  text-decoration: none;
}

.button:hover { border-color: #acc9ba; background: var(--sage-50); }
.button.primary { border-color: var(--forest); background: var(--forest); color: white; }
.button.primary:hover { background: #193c30; }
.button.ghost { border-color: transparent; background: transparent; color: var(--sage-700); padding-inline: 4px; }
.button.small { min-height: 32px; padding: 6px 10px; }

.focus-band {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 21px;
  padding: 18px 21px;
  border: 1px solid var(--sage-200);
  border-radius: 10px;
  background: var(--sage-100);
}

.focus-band strong { font-family: var(--serif); font-size: 19px; font-weight: 500; }
.focus-band p { margin: 0; color: var(--ink-soft); font-size: 12px; }

.metrics-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 22px;
  border-block: 1px solid var(--line);
  background: rgba(255,255,255,.35);
}

.metric {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 17px 21px;
}

.metric + .metric { border-left: 1px solid var(--line); }
.metric strong { font-family: var(--serif); font-size: 27px; font-weight: 500; line-height: 1; }
.metric span { color: var(--ink-soft); font-size: 10px; line-height: 1.35; }

.layout-two { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 20px; }
.layout-equal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.stack { display: grid; gap: 20px; }

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

.panel.flat { box-shadow: none; }

.panel-head {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
}

.panel-head h2, .panel-head h3 { margin: 0; font-family: var(--serif); font-size: 21px; font-weight: 500; letter-spacing: -.01em; }
.panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.panel-body { padding: 20px; }
.body-copy { margin-bottom: 14px; color: var(--ink-soft); font-size: 11px; }
.top-gap { margin-top: 20px; }
.bottom-gap { margin-bottom: 20px; }
.object-title { margin-top: 12px; }
.property-toolbar { display: grid; gap: 14px; padding-bottom: 14px; }
.property-summary { margin-bottom: 18px; }
.property-groups { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 3px; }
.property-groups .filter-button { flex: 0 0 auto; white-space: nowrap; }
.property-filter-block { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; align-items: start; }
.property-filter-block + .property-filter-block { margin-top: 10px; }
.property-filter-label { padding-top: 8px; color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.toolbar-note { margin-left: auto; color: var(--muted); font-size: 9px; }
.fact-list.compact { padding-top: 0; padding-bottom: 0; }

.task-list, .system-map, .source-list, .coverage-list, .property-list { display: grid; }

.task-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  min-height: 65px;
  align-items: center;
  gap: 13px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: var(--surface-soft); }
.task-check { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: transparent; font-size: 11px; }
.task-row.done .task-check { border-color: var(--sage-500); background: var(--sage-500); color: white; }
.task-copy strong { display: block; margin-bottom: 3px; color: #283831; font-size: 12px; font-weight: 680; }
.task-copy small { color: var(--muted); font-size: 9px; }

.tag {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 4px 7px;
  border-radius: 5px;
  background: #f0f2ef;
  color: #69766f;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .035em;
  white-space: nowrap;
  text-transform: uppercase;
}

.tag.high, .tag.blocked { background: var(--red-50); color: var(--red-600); }
.tag.medium, .tag.review { background: var(--orange-50); color: var(--orange-600); }
.tag.low, .tag.snapshot { background: var(--blue-50); color: var(--blue-700); }
.tag.proposed { background: var(--violet-50); color: var(--violet-700); }
.tag.ready, .tag.captured { background: var(--sage-50); color: var(--sage-700); }

.map-step {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.map-step:last-child { border-bottom: 0; }
.map-step:hover { background: var(--surface-soft); }
.step-number { color: #9aa59f; font-family: var(--serif); font-size: 17px; }
.map-step strong { display: block; font-size: 11px; }
.map-step small { color: var(--muted); font-size: 9px; }
.arrow { color: var(--sage-500); font-size: 18px; }

.object-strip { display: grid; grid-template-columns: repeat(5, 1fr); }
.object-segment { min-height: 105px; padding: 18px; border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; text-align: left; }
.object-segment:last-child { border-right: 0; }
.object-segment:hover { background: var(--sage-50); }
.object-segment span { display: block; margin-bottom: 19px; color: #9aa49f; font-family: var(--serif); font-size: 16px; }
.object-segment strong { display: block; color: var(--ink); font-size: 11px; }
.object-segment small { color: var(--muted); font-size: 9px; }

.callout {
  padding: 18px 20px;
  border: 1px solid var(--blue-100);
  border-radius: 9px;
  background: var(--blue-50);
  color: #456772;
  font-size: 11px;
}

.callout.warning { border-color: var(--orange-100); background: var(--orange-50); color: #80521c; }
.callout.danger { border-color: var(--red-100); background: var(--red-50); color: #8d4138; }
.callout strong { display: block; margin-bottom: 4px; color: inherit; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
}

.filter-button {
  min-height: 33px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 10px;
  font-weight: 680;
}

.filter-button.active, .filter-button:hover { border-color: var(--sage-200); background: var(--sage-50); color: var(--sage-700); }

.select, .text-input {
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-size: 11px;
  outline: none;
}

.text-input:focus, .select:focus { border-color: var(--sage-500); box-shadow: 0 0 0 3px var(--sage-100); }
.toolbar .text-input { min-width: 250px; }

.bar-row { display: grid; grid-template-columns: minmax(190px, 1fr) 2.4fr 42px; align-items: center; gap: 15px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.bar-row:last-child { border-bottom: 0; }
.bar-label strong { display: block; font-size: 11px; }
.bar-label small { color: var(--muted); font-size: 9px; }
.bar-track { height: 7px; overflow: hidden; border-radius: 10px; background: #edf0ec; }
.bar-fill { height: 100%; border-radius: inherit; background: var(--sage-500); }
.bar-fill.orange { background: #cf8740; }
.bar-fill.red { background: #c76a62; }
.bar-fill.blue { background: #6d91a0; }
.bar-count { color: var(--ink-soft); font-family: var(--serif); font-size: 17px; text-align: right; }

.tab-list { display: flex; gap: 3px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: #eef1ed; }
.tab-button { padding: 7px 11px; border: 0; border-radius: 6px; background: transparent; color: #68756f; cursor: pointer; font-size: 10px; font-weight: 680; }
.tab-button.active { background: white; color: var(--forest); box-shadow: 0 2px 6px rgba(38,63,52,.08); }

.comparison { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.comparison-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.comparison-card.proposed { border-color: #decba8; }
.comparison-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 17px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.comparison-card.proposed .comparison-card-head { background: var(--orange-50); }
.comparison-card h3 { margin-bottom: 3px; font-family: var(--serif); font-size: 18px; font-weight: 500; }
.comparison-card p { margin: 0; color: var(--muted); font-size: 10px; }
.fact-list { margin: 0; padding: 16px 18px 18px 32px; color: var(--ink-soft); font-size: 10px; }
.fact-list li + li { margin-top: 8px; }

.flow-line { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.flow-node { position: relative; min-height: 106px; padding: 17px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.flow-node::after { position: absolute; top: 48%; right: -11px; width: 11px; height: 1px; background: var(--line-strong); content: ""; }
.flow-node:last-child::after { display: none; }
.flow-node span { display: block; margin-bottom: 17px; color: #9aa49f; font-family: var(--serif); font-size: 16px; }
.flow-node strong { display: block; margin-bottom: 3px; font-size: 11px; }
.flow-node small { color: var(--muted); font-size: 9px; }

.knowledge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.knowledge-card { padding: 17px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.knowledge-card.gap { border-color: var(--red-100); background: #fffafa; }
.knowledge-card-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.knowledge-card h3 { margin: 0; font-family: var(--serif); font-size: 17px; font-weight: 500; }
.knowledge-card small { color: var(--muted); font-size: 9px; }
.knowledge-items { display: grid; gap: 7px; }
.knowledge-item { display: flex; justify-content: space-between; gap: 15px; padding-top: 7px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 9px; }

.object-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); overflow: hidden; }
.object-rail { border-right: 1px solid var(--line); background: #f3f6f4; }
.object-button { display: block; width: 100%; padding: 15px 17px; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; text-align: left; }
.object-button.active { border-left: 3px solid var(--sage-500); background: var(--sage-100); }
.object-button strong { display: block; font-size: 11px; }
.object-button small { color: var(--muted); font-size: 9px; }
.object-detail { padding: 23px; }
.object-detail h2 { margin-bottom: 6px; font-family: var(--serif); font-size: 29px; font-weight: 500; }
.object-detail > p { color: var(--ink-soft); font-size: 11px; }
.detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px 0; border-block: 1px solid var(--line); }
.detail-stat { padding: 15px 0; }
.detail-stat + .detail-stat { padding-left: 18px; border-left: 1px solid var(--line); }
.detail-stat strong { display: block; font-family: var(--serif); font-size: 21px; font-weight: 500; }
.detail-stat span { color: var(--muted); font-size: 9px; }

.property-group-section + .property-group-section { border-top: 8px solid var(--canvas); }
.property-group-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 17px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.property-group-head h3 { margin: 0; font-family: var(--sans); font-size: 12px; }
.property-group-head p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }
.property-group-head > span { color: var(--sage-700); font-size: 9px; font-weight: 750; }
.property-row { display: grid; grid-template-columns: minmax(230px, 1.25fr) minmax(210px, 1fr) 170px 170px; gap: 14px; align-items: center; padding: 13px 17px; border-bottom: 1px solid var(--line); }
.property-group-section .property-row:last-child { border-bottom: 0; }
.property-name strong { display: block; font-size: 10px; }
.property-name code { color: #85918c; font-size: 9px; }
.property-row > span { color: var(--ink-soft); font-size: 9px; }
.property-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.property-badges small { padding: 4px 6px; border-radius: 5px; background: var(--sage-100); color: var(--forest); font-size: 7px; font-weight: 700; }
.property-badges small + small { background: var(--amber-100); color: #76501f; }
.property-meta strong, .property-meta small { display: block; }
.property-meta strong { font-size: 9px; }
.property-meta small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.property-empty { padding: 40px; color: var(--muted); text-align: center; }

.source-row { display: grid; grid-template-columns: 1.1fr 1.7fr auto; gap: 16px; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.source-row:last-child { border-bottom: 0; }
.source-row strong { font-size: 11px; }
.source-row p { margin: 0; color: var(--muted); font-size: 9px; }
.source-row a { color: var(--sage-700); font-size: 10px; font-weight: 680; text-decoration: none; }

/* HubSpot workspace prototype */
.crm-workspace + * { margin-top: 0; }

.crm-workspace {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #d4dee5;
  border-radius: 12px;
  background: #f4f7f9;
  box-shadow: 0 18px 48px rgba(33, 54, 68, .08);
  color: #33475b;
}

.crm-object-nav {
  display: grid;
  grid-template-columns: repeat(8, minmax(135px, 1fr));
  overflow-x: auto;
  border-bottom: 1px solid #d9e2e8;
  background: #fff;
}

.crm-object-pill {
  display: flex;
  min-height: 64px;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 18px;
  border: 0;
  border-right: 1px solid #e3e9ed;
  background: transparent;
  color: #516779;
  cursor: pointer;
  text-align: left;
}

.crm-object-pill:last-child { border-right: 0; }
.crm-object-pill:hover { background: #f7fafb; }
.crm-object-pill.active { box-shadow: inset 0 -3px #0091ae; background: #eef9fb; color: #006d77; }
.crm-object-pill span { font-size: 13px; font-weight: 750; }
.crm-object-pill small { color: #7c91a2; font-size: 9px; }

.crm-toolbar {
  display: flex;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 18px;
  border-bottom: 1px solid #d9e2e8;
  background: #f7f9fa;
}

.crm-view-toggle { display: flex; padding: 3px; border: 1px solid #cbd7df; border-radius: 7px; background: #eaf0f3; }
.crm-view-toggle button { padding: 7px 12px; border: 0; border-radius: 5px; background: transparent; color: #566d7f; cursor: pointer; font-size: 10px; font-weight: 700; }
.crm-view-toggle button.active { background: #fff; color: #006d77; box-shadow: 0 1px 4px rgba(45, 72, 89, .12); }
.crm-toolbar-actions { display: flex; gap: 8px; }
.crm-button { min-height: 34px; padding: 7px 11px; border: 1px solid #70889a; border-radius: 6px; background: #fff; color: #33475b; cursor: pointer; font-size: 10px; font-weight: 650; }
.crm-button.primary { border-color: #008f95; background: #008f95; color: #fff; }

.crm-list-shell { min-height: 520px; padding: 24px; }
.crm-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.crm-list-head h2 { margin: 5px 0 3px; color: #253f53; font-family: var(--sans); font-size: 25px; font-weight: 500; }
.crm-list-head p { margin: 0; color: #71879a; font-size: 10px; }
.crm-breadcrumb { color: #536c7f !important; font-size: 10px !important; font-weight: 700; }
.crm-tabs { display: flex; gap: 6px; margin-top: 24px; border-bottom: 1px solid #cfdbe2; }
.crm-tabs button { padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #516779; font-size: 10px; }
.crm-tabs button.active { border-color: #0091ae; color: #007f85; font-weight: 750; }
.crm-table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; color: #71879a; font-size: 9px; }
.crm-table-search { display: flex; width: min(320px, 60%); min-height: 36px; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #b8c8d3; border-radius: 6px; background: #fff; }
.crm-table-search input { width: 100%; border: 0; outline: 0; color: #33475b; font-size: 10px; }
.crm-table-scroll { overflow-x: auto; border: 1px solid #cedae2; border-radius: 7px; background: #fff; }
.crm-table { width: 100%; min-width: 1380px; border-collapse: collapse; font-size: 10px; }
.crm-table th { height: 42px; padding: 8px 12px; border-bottom: 1px solid #d8e2e8; background: #f6f9fa; color: #52697b; font-weight: 750; text-align: left; white-space: nowrap; }
.crm-table td { height: 55px; padding: 9px 12px; border-bottom: 1px solid #e2e8ec; color: #4b6071; white-space: nowrap; }
.crm-table tbody tr { cursor: pointer; }
.crm-table tbody tr:last-child td { border-bottom: 0; }
.crm-table tbody tr:hover td { background: #edf8f8; }
.crm-table .crm-check { width: 38px; padding-inline: 12px 5px; }
.crm-primary-cell { display: flex; min-width: 235px; align-items: center; gap: 9px; color: #007f85 !important; }
.crm-object-icon { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border-radius: 6px; background: #e7f5f5; color: #008f95; font-size: 14px; }
.crm-more { letter-spacing: 2px; }
.crm-status { display: inline-flex; width: fit-content; padding: 3px 7px; border-radius: 20px; background: #edf1f3; color: #617687; font-size: 8px; font-weight: 700; }
.crm-status.good { background: #dff3e9; color: #26734f; }
.crm-status.warn { background: #fff0cf; color: #8c6416; }
.crm-table-foot { display: flex; justify-content: space-between; padding: 10px 1px; color: #7d91a0; font-size: 9px; }

.crm-record-shell { display: grid; grid-template-columns: 285px minmax(480px, 1fr) 320px; min-height: 790px; }
.crm-record-left, .crm-record-main, .crm-record-right { min-width: 0; }
.crm-record-left, .crm-record-right { padding: 14px 12px; background: #f5f8fa; }
.crm-record-left { border-right: 1px solid #d7e1e7; }
.crm-record-right { border-left: 1px solid #d7e1e7; }
.crm-record-main { display: grid; align-content: start; gap: 13px; padding: 0 14px 22px; background: #f2f6f8; }
.crm-back { margin: 0 0 11px 4px; border: 0; background: transparent; color: #33475b; cursor: pointer; font-size: 11px; font-weight: 750; }
.crm-card, .crm-identity, .crm-summary, .crm-association-card { border: 1px solid #ccd9e1; border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(33, 54, 68, .03); }
.crm-identity { padding: 17px 16px 0; }
.crm-identity-line { display: flex; align-items: flex-start; gap: 11px; }
.crm-record-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #e8f0f3; color: #587384; font-size: 20px; }
.crm-identity small { color: #7c91a2; font-size: 7px; font-weight: 800; letter-spacing: .13em; }
.crm-identity h2 { margin: 4px 0 5px; color: #33475b; font-family: var(--sans); font-size: 17px; font-weight: 500; line-height: 1.2; }
.crm-quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 16px; border-top: 1px solid #e0e7eb; }
.crm-quick-actions button { display: flex; min-height: 58px; align-items: center; justify-content: center; flex-direction: column; gap: 3px; border: 0; background: transparent; color: #486172; font-size: 12px; }
.crm-quick-actions button span { font-size: 8px; }
.crm-card-head { display: flex; min-height: 47px; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid #dfe7eb; }
.crm-card-head h3 { margin: 0; color: #33475b; font-family: var(--sans); font-size: 12px; font-weight: 600; }
.crm-card-head p { margin: 2px 0 0; color: #7890a0; font-size: 9px; }
.crm-card-head button { border: 0; background: transparent; color: #496173; font-size: 8px; font-weight: 700; }
.left-properties { margin-top: 12px; }
.crm-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 14px; padding: 14px; }
.crm-field { min-width: 0; }
.crm-field span { display: block; margin-bottom: 3px; color: #7b8f9f; font-size: 8px; }
.crm-field strong { display: block; overflow-wrap: anywhere; color: #40566a; font-size: 9px; font-weight: 520; }
.crm-field-grid.highlights { grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 15px 18px; }
.crm-field-grid.highlights .crm-field span { font-size: 7px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.crm-field-grid.highlights .crm-field strong { font-size: 10px; font-weight: 700; }
.crm-field-grid.details { gap: 18px 28px; padding: 18px; }
.crm-field-grid.compact { grid-template-columns: 1fr; padding: 0; }
.crm-field-grid.compact .crm-field { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #e5eaed; }
.crm-field-grid.compact .crm-field span { margin: 0; color: #33475b; font-weight: 650; }
.crm-demo-note { display: flex; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid #bfe0e5; border-radius: 7px; background: #e9f7f8; color: #416879; font-size: 8px; }
.crm-demo-note strong { flex: 0 0 auto; }
.crm-record-tabs { display: grid; grid-template-columns: repeat(3, 1fr); height: 48px; border: 1px solid #ccd9e1; border-top: 0; border-radius: 0 0 6px 6px; background: #fff; }
.crm-record-tabs button { border: 0; border-top: 2px solid transparent; background: transparent; color: #52697b; font-size: 9px; }
.crm-record-tabs button.active { border-color: #0091ae; color: #33475b; }
.crm-highlights .crm-card-head span { color: #7c91a2; font-size: 8px; }
.crm-activity-row { display: grid; grid-template-columns: 24px 1fr auto; align-items: start; gap: 9px; margin: 12px 14px; padding: 12px; border: 1px solid #d8e2e8; border-radius: 6px; }
.crm-activity-row > span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #def3eb; color: #188266; }
.crm-activity-row strong { font-size: 9px; }
.crm-activity-row p { margin: 3px 0 0; color: #7890a0; font-size: 8px; }
.crm-activity-row small { color: #8396a4; font-size: 7px; }
.crm-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 12px; font-size: 10px; }
.crm-summary button, .crm-association-head button, .crm-association-link { border: 0; background: transparent; color: #00828b; cursor: pointer; font-size: 8px; font-weight: 750; }
.crm-association-card { margin-top: 11px; overflow: hidden; }
.crm-association-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border-bottom: 1px solid #e0e7eb; font-size: 10px; }
.crm-association-record { margin: 10px; padding: 10px; border: 1px solid #d4dfe5; border-radius: 6px; }
.crm-association-record > a { color: #00828b; font-size: 9px; font-weight: 750; text-decoration: none; }
.crm-field-grid.association { grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 8px 0 0; }
.crm-field-grid.association .crm-field span { font-size: 6px; text-transform: uppercase; }
.crm-field-grid.association .crm-field strong { font-size: 7px; }
.crm-association-link { padding: 0 11px 11px; text-align: left; }

.crm-meal-thumb { display: inline-block; width: 32px; height: 32px; flex: 0 0 auto; border: 1px solid #d7dee2; border-radius: 6px; background-image: url('assets/shopify-menu-reference.png'); background-repeat: no-repeat; background-size: 440% auto; }
.meal-shot-1 { background-position: 0 25%; }
.meal-shot-2 { background-position: 34% 25%; }
.meal-shot-3 { background-position: 68% 25%; }
.meal-shot-4 { background-position: 100% 25%; }
.commerce-feature { overflow: hidden; }
.commerce-meal-hero { display: grid; grid-template-columns: minmax(210px, .9fr) 1.1fr; min-height: 190px; background: #f5f4f0; }
.commerce-hero-image { min-height: 190px; background-image: url('assets/shopify-meal-reference.png'); background-repeat: no-repeat; background-position: 2% 2%; background-size: 204% auto; }
.commerce-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 25px; }
.commerce-label { color: #758895; font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.commerce-hero-copy h3 { margin: 8px 0 4px; color: #1f2a30; font-family: var(--sans); font-size: 21px; line-height: 1.1; }
.commerce-hero-copy p { margin: 0; color: #536472; font-size: 10px; }
.commerce-price { margin-top: 16px; color: #17272d; font-size: 16px; font-weight: 750; }
.commerce-price small { font-size: 9px; font-weight: 500; }
.commerce-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.commerce-tags span { padding: 5px 8px; border: 1px solid #d0d8dc; border-radius: 20px; background: #fff; color: #415462; font-size: 8px; }
.commerce-detail-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 24px; padding: 18px; border-top: 1px solid #dfe6e9; }
.commerce-detail-grid h4 { margin: 0 0 6px; color: #263d4d; font-size: 11px; }
.commerce-detail-grid p { margin: 0 0 13px; color: #617684; font-size: 9px; }
.commerce-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px; }
.commerce-meal-card { overflow: hidden; border: 1px solid #d8e0e4; border-radius: 7px; background: #f5f4f0; }
.commerce-meal-image { aspect-ratio: 1.35; background-image: url('assets/shopify-menu-reference.png'); background-repeat: no-repeat; background-size: 440% auto; }
.commerce-meal-image.meal-shot-1 { background-position: 0 19%; }
.commerce-meal-image.meal-shot-2 { background-position: 34% 19%; }
.commerce-meal-image.meal-shot-3 { background-position: 68% 19%; }
.commerce-meal-image.meal-shot-4 { background-position: 100% 19%; }
.commerce-meal-card > div:last-child { padding: 9px; }
.commerce-meal-card strong { display: block; color: #273c48; font-size: 9px; line-height: 1.25; }
.commerce-meal-card span { color: #6c7f8b; font-size: 7px; }
.commerce-order-lines { display: grid; }
.commerce-order-line { display: grid; grid-template-columns: 36px 1fr auto 68px; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid #e0e6e9; color: #4a6070; font-size: 8px; }
.commerce-order-line:last-child { border-bottom: 0; }
.commerce-order-line > span:nth-child(2) strong { display: block; color: #2b404e; font-size: 9px; }
.commerce-order-line small { display: block; color: #8395a1; font-size: 7px; }
.commerce-order-line > strong { text-align: right; }
.standard-context { overflow: hidden; }
.crm-network-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; padding: 18px; }
.crm-network-flow > div { padding: 14px; border: 1px solid #d9e2e7; border-radius: 7px; background: #f7fafb; }
.crm-network-flow span, .crm-network-flow small, .crm-role-grid span, .crm-request-copy > span { display: block; color: #7b8f9f; font-size: 7px; text-transform: uppercase; }
.crm-network-flow strong { display: block; margin: 4px 0 2px; color: #33475b; font-size: 12px; }
.crm-network-flow b { color: #0091ae; font-size: 18px; font-weight: 500; }
.crm-evidence-note { margin: 0; padding: 10px 18px; border-top: 1px solid #e0e7eb; background: #f8fafb; color: #71879a; font-size: 8px; }
.crm-role-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 18px; }
.crm-role-grid > div { padding: 13px; border-left: 3px solid #0091ae; background: #f5f9fa; }
.crm-role-grid strong { display: block; margin-top: 5px; color: #33475b; font-size: 10px; }
.crm-request-copy { padding: 18px; }
.crm-request-copy p { max-width: 610px; margin: 7px 0 0; color: #40566a; font-size: 11px; line-height: 1.55; }

@media (max-width: 1120px) {
  .crm-record-shell { grid-template-columns: 250px minmax(0, 1fr); }
  .crm-record-right { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 10px; border-top: 1px solid #d7e1e7; border-left: 0; }
  .crm-record-right .crm-summary { grid-column: 1 / -1; }
  .crm-association-card { margin-top: 0; }
  .commerce-grid { grid-template-columns: repeat(2, 1fr); }
}

.search-dialog { width: min(640px, calc(100% - 28px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); box-shadow: 0 28px 80px rgba(20,38,30,.22); }
.search-dialog::backdrop { background: rgba(31,46,41,.28); backdrop-filter: blur(3px); }
.search-shell { padding: 0; }
.search-input-row { display: flex; align-items: center; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.search-input-row input { flex: 1; border: 0; outline: 0; color: var(--ink); font-size: 13px; }
.key-button { cursor: pointer; }
.search-results { max-height: 460px; overflow-y: auto; padding: 8px; }
.search-result { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20px; padding: 12px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; text-align: left; }
.search-result:hover, .search-result.active { background: var(--sage-50); }
.search-result strong { display: block; font-size: 11px; }
.search-result small { color: var(--muted); font-size: 9px; }
.search-result span:last-child { color: var(--sage-700); font-size: 10px; }

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 80; max-width: 340px; padding: 12px 15px; border-radius: 8px; background: var(--ink); color: white; font-size: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.18); opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }

.mobile-menu, .mobile-scrim { display: none; }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.mobile-menu span { display: block; width: 15px; height: 1px; margin: 3px auto; background: var(--ink); }

@media (max-width: 980px) {
  .layout-two, .layout-equal { grid-template-columns: 1fr; }
  .object-strip { grid-template-columns: repeat(2, 1fr); }
  .object-segment { border-bottom: 1px solid var(--line); }
  .object-segment:nth-child(even) { border-right: 0; }
  .object-segment:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .top-snapshot { display: none; }
}

@media (max-width: 760px) {
  .property-filter-block { grid-template-columns: 1fr; gap: 5px; }
  :root { --sidebar: 244px; }
  .sidebar { transform: translateX(-100%); transition: transform .22s ease; }
  .sidebar.mobile-open { transform: translateX(0); }
  .mobile-scrim { position: fixed; inset: 0; z-index: 25; border: 0; background: rgba(31,46,41,.25); }
  .mobile-scrim.visible { display: block; }
  .main-area { margin-left: 0; }
  .mobile-menu { display: block; }
  .topbar { padding: 0 16px; }
  .breadcrumbs > span { display: none; }
  .search-trigger { min-width: 36px; width: 36px; padding: 0; justify-content: center; }
  .search-trigger > span:nth-child(2), .search-trigger kbd { display: none; }
  .content { width: min(100% - 28px, 720px); padding-top: 26px; }
  .page-head { align-items: flex-start; flex-direction: column; margin-bottom: 22px; }
  h1 { font-size: 36px; }
  .focus-band { grid-template-columns: 1fr; gap: 7px; }
  .metrics-strip { grid-template-columns: 1fr; }
  .metric + .metric { border-top: 1px solid var(--line); border-left: 0; }
  .task-row { grid-template-columns: 30px 1fr auto; }
  .task-row > .tag:last-child { display: none; }
  .comparison, .knowledge-grid, .flow-line { grid-template-columns: 1fr; }
  .flow-node::after { display: none; }
  .object-layout { grid-template-columns: 1fr; }
  .object-rail { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .object-button { min-width: 145px; border-right: 1px solid var(--line); border-bottom: 0; }
  .property-row { grid-template-columns: 1fr; }
  .property-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .bar-row { grid-template-columns: minmax(140px, 1fr) 1.5fr 36px; gap: 9px; }
  .source-row { grid-template-columns: 1fr auto; }
  .source-row p { grid-column: 1 / -1; }
  .crm-object-nav { display: flex; overflow-x: auto; }
  .crm-object-pill { min-width: 135px; }
  .crm-toolbar { align-items: flex-start; flex-direction: column; }
  .crm-toolbar-actions { width: 100%; flex-wrap: wrap; }
  .crm-list-shell { padding: 14px; }
  .crm-record-shell { grid-template-columns: 1fr; }
  .crm-record-left, .crm-record-right { border: 0; }
  .crm-record-main { padding: 0 8px 16px; }
  .crm-record-right { display: grid; grid-column: auto; grid-template-columns: 1fr; }
  .crm-field-grid.highlights { grid-template-columns: repeat(2, 1fr); }
  .commerce-meal-hero { grid-template-columns: 1fr; }
  .commerce-hero-image { min-height: 240px; }
  .commerce-detail-grid, .commerce-grid { grid-template-columns: 1fr; }
  .crm-network-flow { grid-template-columns: 1fr; }
  .crm-network-flow b { transform: rotate(90deg); text-align: center; }
  .crm-role-grid { grid-template-columns: 1fr; }
  .commerce-order-line { grid-template-columns: 36px 1fr auto; }
  .commerce-order-line > strong { grid-column: 2 / -1; }
}

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