/* ── Family View ──────────────────────────────────────── */
    .family-section {
      margin-bottom: 28px;
    }
    .family-section-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }
    .family-section-header h4 {
      font-size: .92rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
      color: var(--clr-dark);
    }
    .family-section-header .family-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 12px;
      border: 1px solid #dcdde1;
      border-radius: var(--radius);
      background: var(--clr-white);
      color: var(--clr-primary);
      font-size: .8rem;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s, border-color .15s;
    }
    .family-section-header .family-action-btn:hover {
      background: rgba(52,152,219,.08);
      border-color: var(--clr-primary);
    }
    .family-section-header .family-action-btn svg { width: 14px; height: 14px; }

    .family-cards {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .family-card {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      background: var(--clr-light);
      border-radius: var(--radius);
      padding: 16px 20px;
      min-width: 160px;
      text-align: center;
      box-shadow: 0 1px 4px rgba(0,0,0,.08);
      cursor: pointer;
      transition: box-shadow .15s, transform .1s;
    }
    .family-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
    .family-card svg { width: 40px; height: 40px; margin-bottom: 8px; fill: #95a5a6; }
    .family-card .card-name { font-weight: 600; font-size: .92rem; }
    .family-card .card-dates { font-size: .78rem; color: #7f8c8d; margin-top: 2px; }

    .family-empty {
      color: #95a5a6;
      font-size: .85rem;
      font-style: italic;
      padding: 8px 0;
    }

    .family-current-person {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--clr-dark);
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid var(--clr-primary);
    }

    .place-autocomplete-wrapper {
      position: relative;
    }
    .place-suggestions {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--clr-white);
      border: 1px solid #dcdde1;
      border-top: none;
      border-radius: 0 0 var(--radius) var(--radius);
      box-shadow: 0 4px 12px rgba(0,0,0,.12);
      z-index: 1000;
      max-height: 180px;
      overflow-y: auto;
    }
    .place-suggestions .suggestion-item {
      padding: 7px 12px;
      font-size: .88rem;
      cursor: pointer;
      color: var(--clr-dark);
    }
    .place-suggestions .suggestion-item:hover,
    .place-suggestions .suggestion-item.active {
      background: rgba(52,152,219,.10);
    }

    .spouse-with-marriage {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .spouse-disconnect-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 12px;
      border: 1px solid #e0b4b4;
      border-radius: var(--radius);
      background: var(--clr-white);
      color: #c0392b;
      font-size: .8rem;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s, border-color .15s;
      align-self: flex-start;
    }
    .spouse-disconnect-btn:hover {
      background: rgba(192,57,43,.08);
      border-color: #c0392b;
    }

    .marriage-details {
      background: #f0f4ff;
      border: 1px solid #c9d4ff;
      border-radius: var(--radius);
      padding: 10px 14px;
      min-width: 220px;
    }

    .marriage-detail-row {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-bottom: 6px;
    }
    .marriage-detail-row:last-child { margin-bottom: 0; }

    .marriage-detail-row label {
      font-size: .75rem;
      color: #5a6a8a;
      font-weight: 600;
    }

    .marriage-detail-row input {
      border: 1px solid #b0bcd8;
      border-radius: 4px;
      padding: 4px 6px;
      font-size: .82rem;
      background: #fff;
    }

    .marriage-detail-row input:focus {
      outline: none;
      border-color: var(--clr-primary);
    }