html,
body {
  height: 100%;
  margin: 0;
  background: #f7f8fa;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

#treeCanvas {
  width: 100%;
  height: calc(100vh - 105px);
  overflow: hidden;
  background: radial-gradient(circle at 1px 1px, #d9dee7 1px, transparent 1px);
  background-size: 24px 24px;
  cursor: grab;
}

#treeCanvas:active {
  cursor: grabbing;
}

#treeSvg {
  width: 100%;
  height: 100%;
}

.tree-link {
  fill: none;
  stroke-width: 2;
}

.tree-link.marriage {
  stroke: #e2a000;
  stroke-dasharray: 5 4;
}

.person-node {
  cursor: pointer;
}

.person-card {
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
}

.card-bg {
  fill: white;
  stroke: #dce1e8;
  stroke-width: 1.5;
}

.person-node:hover .card-bg {
  stroke: #0d6efd;
  stroke-width: 2;
}

.person-gender {
  fill: #eef2f7;
}

.person-child-number {
  fill: #eef2f7;
}

.person-name {
  font-size: 14px;
  font-weight: 700;
  fill: #18202a;
}

.person-date {
  font-size: 11px;
  fill: #6c757d;
}

.tree-toolbar {
  min-height: 48px;
}

@media (max-width: 768px) {
  #searchInput {
    width: 130px !important;
  }
}