/* ===== Site-friend buttons (profile, user cards, requests) ===== */
	.fbtn, .usr-friend { cursor: pointer; border: 1px solid var(--border); background: var(--card-hover); color: var(--text);
		border-radius: 9px; padding: 8px 14px; font-weight: 800; font-size: 12.5px; transition: background .12s, border-color .12s, transform .12s; white-space: nowrap; }
	.fbtn:hover, .usr-friend:hover { transform: translateY(-1px); }
	.fbtn.add, .usr-friend.none { background: var(--accent); border-color: var(--accent); color: #fff; }
	.fbtn.add:hover, .usr-friend.none:hover { background: var(--accent-hover); }
	.fbtn.accept, .usr-friend.incoming { background: #1f9e54; border-color: #2bbd6b; color: #fff; }
	.fbtn.friends, .usr-friend.friends { background: color-mix(in srgb, #2bbd6b 16%, var(--card)); border-color: #2bbd6b; color: #2bbd6b; }
	.fbtn.pending, .usr-friend.outgoing { background: var(--card); color: var(--muted); }
	/* Blocked → a neutral "Unblock" button, visually distinct from the accent "Add Friend". */
	.fbtn.blocked, .usr-friend.blocked { background: var(--card); color: #f2555a; border-color: color-mix(in srgb, #f2555a 40%, var(--border)); }
	.fbtn.big { padding: 11px 22px; font-size: 14px; border-radius: 999px; }
	.pf2-friendbtn { display: flex; align-items: center; }
	/* requests modal */
	.req-list { display: flex; flex-direction: column; gap: 8px; }
	.req-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; }
	.req-row:hover { background: var(--card-hover); }
	.req-av { width: 40px; height: 40px; border-radius: 50%; background: center/cover no-repeat; flex: none; }
	.req-name { flex: 1; min-width: 0; font-weight: 700; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.req-name:hover { color: var(--accent); }
	.req-acts { display: flex; gap: 7px; }
	/* dock requests pill */
	.dock-requests { cursor: pointer; border: 1px solid #2bbd6b; background: color-mix(in srgb, #2bbd6b 18%, rgba(0,0,0,.3)); color: #2bbd6b;
		border-radius: 999px; padding: 7px 14px; font-weight: 800; font-size: 12.5px; white-space: nowrap; }
	.dock-requests:hover { background: #2bbd6b; color: #07210f; }
	/* New Friends rail cards (home) */
	.nf-card { flex: 0 0 auto; width: 124px; cursor: pointer; background: var(--card); border: 1px solid var(--border); border-radius: 14px;
		padding: 14px 10px; text-align: center; transition: transform .14s, border-color .14s, box-shadow .14s; }
	.nf-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 22px rgba(0,0,0,.4); }
	.nf-av { position: relative; width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 9px; background: center/cover no-repeat; }
	.nf-pip { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--card); background: #6b7280; }
	.nf-card.online .nf-pip { background: #2bbd6b; } .nf-card.ingame .nf-pip { background: #5aa9ff; }
	.nf-name { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.nf-status { font-size: 11.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.friends-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
	.friends-head .t { font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase;
		letter-spacing: 2px; color: var(--text); }
	.friends-head .c { font-family: var(--mono); font-size: 11px; color: var(--muted); }
	/* All / Online / s&box segmented toggle */
	.ftoggle { display: flex; gap: 2px; background: var(--card); border: 1px solid var(--border);
		border-radius: 9px; padding: 2px; margin-bottom: 14px; }
	.ftoggle button { flex: 1; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
		font-weight: 600; color: var(--muted); background: transparent; border: none; padding: 6px 4px;
		border-radius: 7px; cursor: pointer; transition: background .1s, color .1s; }
	.ftoggle button:not(.active):hover { color: var(--text); }
	.ftoggle button.active { background: var(--accent); color: var(--ink); }
	/* group eyebrow ("in-game / online / offline") */
	.fgroup { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
		color: var(--muted2); display: flex; align-items: center; gap: 8px; margin: 16px 6px 6px; }
	.fgroup::after { content: ""; flex: 1; height: 1px; background: var(--border); }
	.fgroup.live { color: var(--accent); }
	.friend { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 10px; transition: background .12s;
		position: relative; }
	.friend:hover { background: var(--card); }
	.friend.offline { opacity: .55; }
	.friend .av { position: relative; width: 38px; height: 38px; flex: 0 0 auto; }
	.friend .av img { width: 38px; height: 38px; border-radius: 11px; background: #0a0b0d; object-fit: cover; }
	.friend .av .pip { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 4px;
		border: 2.5px solid var(--bg2); background: var(--muted2); }
	.friend.online .pip { background: var(--up); }
	.friend.ingame .pip { background: var(--accent); }
	.friend .body { min-width: 0; flex: 1; }
	.friend .nm { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.friend .st { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap;
		overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
	.friend.ingame .st { color: var(--accent); }
	.friend.online .st { color: var(--up); }
	.friend .joinbtn { font-family: var(--mono); background: transparent; color: var(--accent);
		border: 1px solid var(--accent); font-weight: 600; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
		padding: 5px 11px; border-radius: 8px; text-decoration: none; flex: 0 0 auto; transition: background .12s, color .12s; }
	.friend .joinbtn:hover { background: var(--accent); color: var(--ink); }
	.friends-status { color: var(--muted); font-size: 12.5px; padding: 10px 6px; line-height: 1.6; }
	.friends-status a { color: var(--accent); font-weight: 600; }