.family-connection{width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:28px;border:1px solid #d9d8ca;border-radius:24px;background:#fcf9f1;color:#344641;box-shadow:0 20px 80px #34464133;overflow:auto;overscroll-behavior:contain}
.family-connection::backdrop{background:#263c3570}
.family-heading{display:flex;justify-content:space-between;align-items:start;gap:16px}
.family-heading h2{font-size:clamp(1.5rem,4vw,2rem);line-height:1.15;margin:8px 0}
.family-heading>button{flex:none;width:48px;height:48px;font-size:26px}
.family-connection p{line-height:1.55}.family-connection h3{font-size:1.15rem;margin:0 0 8px}
.family-selection,.family-keepsake,.family-import{border-top:1px solid #d9ddd3;padding-top:20px;margin-top:24px}
.family-selection>label{display:block;font-weight:700;margin-bottom:8px}
.family-selection select{width:100%;min-height:48px;padding:10px 12px;border:1px solid #c6d3c4;border-radius:12px;background:white;font:inherit;color:inherit}
.family-preview{margin:12px 0;text-align:center;background:#fff;border-radius:16px;padding:12px;border:1px solid #e6e6db}
.family-preview img,.family-import img{display:block;width:180px;height:180px;object-fit:contain;margin:0 auto;background:#fff;border-radius:14px}
.family-preview img[hidden]{display:none}.family-preview figcaption{font-weight:700;margin-top:5px;overflow-wrap:anywhere}
.family-connection button,.family-file{min-height:48px;white-space:normal}.family-connection button:disabled{opacity:.5;cursor:not-allowed}
.family-parent-check{display:flex;align-items:center;gap:12px;margin:20px 0;padding:14px;background:#edf1e5;border-radius:12px;line-height:1.45}
.family-parent-check input{width:24px;height:24px;flex:none;accent-color:#347b60}
.family-file{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px;border:1px dashed #9cab96;border-radius:12px;cursor:pointer}.family-file input{max-width:100%;font:inherit}
.family-actions{display:flex;gap:10px;flex-wrap:wrap}.family-import>button{margin-top:12px}.family-import [hidden]{display:none}
#familyImportReview{margin-top:16px;padding:16px;background:#edf1e5;border-radius:16px}#familyIncomingName{overflow-wrap:anywhere}
#familyStatus:not(:empty),.family-pending-note{background:#e9edf7;border-radius:12px;padding:14px;line-height:1.5}
.family-parent-entry{margin:24px 0;padding:18px 0;border-top:1px solid #d9ddd3;border-bottom:1px solid #d9ddd3}.family-parent-entry h3{margin:0}
@media(max-width:480px){.family-connection{padding:20px;width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}.family-actions button{width:100%}.family-parent-check{padding:12px}.family-preview img{width:150px;height:150px}}