.pinfin-friends-page { max-width: 960px; margin: 0 auto; padding: 2rem 1rem 4rem; color: #102a43; }
.pinfin-friends-hero { padding: 2rem; border-radius: 1rem; background: linear-gradient(120deg, #0f766e, #155e75); color: #fff; }
.pinfin-friends-kicker { margin: 0 0 .35rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.pinfin-friends-hero h1 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); }
.pinfin-friends-hero p:last-child { margin: .5rem 0 0; opacity: .9; }
.pinfin-friends-section { margin-top: 1rem; padding: 1.25rem; border: 1px solid #d9e5e3; border-radius: .85rem; background: #fff; box-shadow: 0 8px 22px rgba(16, 42, 67, .06); }
.pinfin-friends-section h2 { margin: 0 0 1rem; font-size: 1.15rem; }
.pinfin-friends-search label { display: block; margin-bottom: .35rem; color: #627d98; font-size: .85rem; font-weight: 700; }
.pinfin-friends-search div { display: flex; gap: .5rem; }
.pinfin-friends-search input { flex: 1; min-width: 0; padding: .65rem .75rem; border: 1px solid #cbd5e1; border-radius: .45rem; }
.pinfin-friend-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-top: 1px solid #e2e8f0; }
.pinfin-friend-row > div:first-child { min-width: 0; }
.pinfin-friend-row strong, .pinfin-friend-row span { display: block; }
.pinfin-friend-row span { margin-top: .2rem; color: #627d98; font-size: .8rem; }
.pinfin-friends-actions { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.pinfin-friends-page button { padding: .5rem .75rem; border: 0; border-radius: .45rem; background: #007c83; color: #fff; font-weight: 700; cursor: pointer; }
.pinfin-friends-page button.is-muted { background: #e2e8f0; color: #334e68; }
.pinfin-friends-page button.is-danger { background: #b42318; }
.pinfin-friends-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pinfin-friends-message { margin-top: 1rem; padding: .8rem 1rem; border-radius: .55rem; font-weight: 700; }
.pinfin-friends-message.success { background: #ecfdf5; color: #166534; }
.pinfin-friends-message.error { background: #fef2f2; color: #991b1b; }
.pinfin-friends-muted { color: #627d98; }
@media (max-width: 680px) { .pinfin-friends-grid { grid-template-columns: 1fr; } .pinfin-friend-row { align-items: flex-start; flex-direction: column; } .pinfin-friends-actions { justify-content: flex-start; } .pinfin-friends-search div { align-items: stretch; flex-direction: column; } }
.pinfin-friends-search .pinfin-discovery-filters { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin:1rem 0; }
.pinfin-discovery-filters select { display:block; width:100%; padding:.65rem; margin-top:.35rem; border:1px solid #cbd5e1; border-radius:.45rem; background:white; color:#102a43; }
.connection-search-mode { border:0; padding:0; margin:0 0 1rem; display:flex; flex-wrap:wrap; gap:1rem; }
.connection-search-mode legend { margin-bottom:.5rem; font-weight:700; }
.pinfin-friends-search .connection-search-mode label { display:flex; align-items:center; gap:.4rem; color:#102a43; font-size:1rem; }
.pinfin-friends-search .connection-search-mode input { flex:none; }
.connection-button { display:inline-block; padding:.55rem .8rem; border-radius:.45rem; background:#007c83; color:white; text-decoration:none; font-weight:700; }
.connection-form { display:grid; gap:.8rem; }
.connection-form fieldset { border:1px solid #d9e5e3; border-radius:.5rem; padding:1rem; }
.connection-form legend { font-weight:700; padding:0 .4rem; }
.connection-form input:not([type=checkbox]):not([type=hidden]), .connection-form textarea { width:100%; padding:.65rem; border:1px solid #cbd5e1; border-radius:.45rem; }
.connection-choice { display:flex; align-items:center; gap:.5rem; padding:.35rem 0; }
.connection-inline-form { display:inline-block; margin-top:.75rem; margin-right:.5rem; }
.connection-profile-details dt { font-weight:700; margin-top:.7rem; }
.connection-profile-details dd { margin:.2rem 0; overflow-wrap:anywhere; }
.connection-avatar { width:100px; height:100px; object-fit:cover; border-radius:50%; }
.connection-info-request { padding:1rem 0; border-top:1px solid #d9e5e3; }
.connection-chat-messages { max-height:420px; overflow-y:auto; padding:1rem; margin:1rem 0; border:1px solid #d9e5e3; border-radius:.5rem; background:#f8fafc; }
.connection-chat-message { padding:.8rem; margin:.7rem 0; max-width:90%; border-radius:.7rem; background:white; border:1px solid #d9e5e3; overflow-wrap:anywhere; }
.connection-chat-message.mine { margin-left:auto; background:#e0f2f1; }
.connection-chat-message time { display:block; color:#627d98; font-size:.75rem; margin-top:.35rem; }
.connection-chat-link { color:#006b73; text-decoration:underline; text-underline-offset:2px; }
.family-checkbox-group { border:1px solid #d9e5e3; border-radius:.5rem; padding:1rem; }
.family-checkbox-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.5rem 1rem; }
.family-checkbox-options label { display:flex; align-items:center; gap:.5rem; cursor:pointer; }
.family-checkbox-options input { width:1rem; height:1rem; flex-shrink:0; }

/* Keep each search label with its control and leave a consistent action gap. */
#connection-search { display:grid; gap:1rem; margin-top:1rem; }
#connection-search + .pinfin-friends-muted { margin-top:1rem; }
#connection-search > p, #connection-search > fieldset { margin:0; }
#connection-search .connection-search-field { display:grid; gap:.4rem; }
#connection-search label { margin:0; color:#334e68; }
#connection-search .pinfin-discovery-filters { margin:0; gap:1rem; }
#connection-search .pinfin-discovery-filters label { display:grid; align-content:start; gap:.4rem; }
#connection-search input:not([type=radio]), #connection-search select { width:100%; box-sizing:border-box; }
#connection-search select { margin-top:0; }
#connection-search .connection-search-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-top:.25rem; }