.friends-page { min-height: 100vh; padding: 2rem 1rem; background: radial-gradient(circle at 12% 5%, #ffe3f0, transparent 36%), #fff8fb; color: #382638; font-family: "DM Sans", sans-serif; }
.friends-shell { width: min(100%, 760px); margin: 0 auto; }
.friends-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.friends-brand { display: inline-flex; align-items: center; gap: .75rem; color: #57234a; font: 700 1.15rem "Playfair Display", serif; text-decoration: none; }
.friends-brand img { width: 2.8rem; height: 2.8rem; object-fit: contain; }
.friends-card { border: 1px solid #f0d6e4; border-radius: 20px; padding: clamp(1.2rem, 4vw, 2.5rem); background: rgba(255,255,255,.94); box-shadow: 0 20px 65px rgba(101, 43, 79, .12); }
.friends-back { color: #8b3970; font-size: .85rem; text-decoration: none; }
.friends-card .eyebrow { display: block; margin-top: 1.5rem; color: #b72f7c; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.friends-card h1 { margin: .25rem 0; color: #47213f; font: 700 2rem "Playfair Display", serif; }
.friends-intro,.friends-note { color: #786776; line-height: 1.55; }
.friends-note { font-size: .82rem; }
.friends-search { display: grid; gap: .45rem; margin-top: 1.4rem; }
.friends-search > div { display: flex; gap: .6rem; }
.friends-search input { flex: 1; min-width: 0; border: 1px solid #e7d3df; border-radius: 10px; padding: .75rem .85rem; font: inherit; }
.friends-search .primary-button { white-space: nowrap; }
.friend-section { margin-top: 1.6rem; border-top: 1px solid #f0e3eb; padding-top: 1.1rem; }
.friend-section h2 { margin: 0 0 .7rem; color: #57234a; font: 700 1.15rem "Playfair Display", serif; }
.friend-list { display: grid; gap: .55rem; }
.friend-row,.friend-search-result { display: flex; align-items: center; justify-content: space-between; gap: .7rem; border: 1px solid #f0dce8; border-radius: 11px; padding: .7rem .85rem; background: #fffafd; }
.friend-row strong,.friend-search-result strong { overflow-wrap: anywhere; }
.friend-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.friend-row-actions button,.friend-search-result button { border: 1px solid #e5c5d8; border-radius: 8px; padding: .45rem .65rem; background: #fff; color: #8c326d; font: 600 .75rem "DM Sans", sans-serif; cursor: pointer; }
.friend-row-actions .accept-friend,.friend-search-result button { border-color: #b72f7c; background: #b72f7c; color: #fff; }
.friend-empty { margin: .2rem 0; color: #887987; font-size: .82rem; }
.book-club-row { justify-content: flex-start; }
.book-club-avatar { width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; border-radius: 50%; object-fit: cover; }
.book-club-identity { display: grid; gap: .15rem; min-width: 0; flex: 1; }
.book-club-identity span,.book-club-identity small,.book-club-status { color: #786776; font-size: .75rem; overflow-wrap: anywhere; }
.book-club-row .friend-row-actions { margin-left: auto; }
.hidden { display: none !important; }
@media (max-width: 520px) { .friends-page { padding: 1rem .65rem; } .friends-search > div { align-items: stretch; flex-direction: column; } .friend-row,.friend-search-result { align-items: flex-start; flex-direction: column; } .friend-row-actions { justify-content: flex-start; } }