.friends-page{display:grid;gap:14px}.friends-page .page-heading{display:flex;align-items:end;justify-content:space-between;gap:14px}.friends-page .page-heading h1{margin:3px 0}.friends-page .page-heading p{margin:0;color:var(--ink-soft)}.friends-mode-tabs{display:flex;gap:6px;padding:5px;width:max-content}.friends-mode-tabs button,.mail-tabs button{border:0;border-radius:999px;padding:9px 13px;background:transparent;color:var(--ink-soft);font-weight:900}.friends-mode-tabs button.active,.mail-tabs button.active{background:var(--purple);color:var(--surface)}.friends-mode-tabs span,.mail-tabs span{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:999px;background:var(--pink);color:var(--surface);font-size:9px}.friends-add{padding:15px 17px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(120deg,var(--purple-panel),var(--surface))}.friends-add strong{display:block;margin:3px 0}.friends-add p{margin:0;color:var(--ink-soft);font-size:11px}.friends-add form{display:grid;grid-template-columns:auto minmax(130px,220px) auto;align-items:center;gap:7px}.friends-add form>span{font-weight:950;color:var(--purple-deep)}.friend-request-section{display:grid;gap:7px}.friend-request-section h2,.friends-section-head h2{margin:0}.friend-request-section h2 span{font-size:11px;background:var(--pink);color:var(--surface);border-radius:999px;padding:2px 6px}.friend-request-row{display:flex;align-items:center;justify-content:space-between;padding:10px 13px}.friend-request-row>div{display:grid}.friend-request-row>div:last-child{display:flex;gap:6px}.friend-request-row span{color:var(--ink-soft);font-size:10px}.friends-list-section{display:grid;gap:9px}.friends-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.friend-card{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:11px;align-items:center;padding:13px}.friend-avatar{width:50px;height:50px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,var(--purple-soft),var(--pink-soft));font-size:21px;font-weight:950;color:var(--purple-deep)}.friend-copy{display:grid;gap:2px}.friend-copy>span{font-size:10px;color:var(--ink-soft)}.friend-presence{display:flex;align-items:center;gap:5px;font-size:8px;font-weight:950}.friend-presence i{width:7px;height:7px;border-radius:50%;background:var(--neutral-muted)}.friend-presence.online i{background:var(--green)}.friend-presence.busy i{background:var(--amber)}.friend-actions{display:grid;gap:4px}.friend-text-action{border:0;background:transparent;color:var(--ink-soft);text-decoration:underline;font-size:8px}.friend-text-action.danger{color:var(--red)}.mail-intro{padding:16px 18px;display:flex;justify-content:space-between;gap:15px;align-items:center;background:linear-gradient(120deg,var(--pink-panel),var(--surface))}.mail-intro h2{margin:3px 0}.mail-intro p{margin:0;color:var(--ink-soft)}.mail-intro>span{white-space:nowrap;border-radius:999px;background:var(--pink-soft);padding:8px 11px;color:var(--pink-deep);font-weight:900}.mail-tabs{display:flex;gap:6px}.trade-mail-list{display:grid;gap:10px}.trade-mail-card{padding:13px;display:grid;gap:10px}.trade-mail-card header{display:flex;align-items:start;justify-content:space-between;gap:10px}.trade-mail-card header>div{display:grid}.trade-mail-card header small{color:var(--ink-soft);font-size:8px}.trade-mail-sides{display:grid;grid-template-columns:1fr 1fr;gap:9px}.trade-mail-sides section{border:1px solid var(--line);border-radius:13px;padding:9px}.trade-mail-sides h3{margin:0 0 7px;font-size:10px;color:var(--ink-soft)}.trade-mail-sides section>div{display:flex;gap:6px;flex-wrap:wrap}.mail-bite-chip{display:grid;grid-template-columns:30px auto;align-items:center;gap:5px;border-radius:10px;background:var(--surface-soft);padding:4px 7px 4px 4px;font-size:8px}.mail-bite-chip img{width:30px;height:30px;object-fit:contain}.trade-mail-card footer{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap}
@media(max-width:900px){.friends-grid{grid-template-columns:1fr}.friend-card{grid-template-columns:46px minmax(0,1fr)}.friend-actions{grid-column:1/-1;display:flex;flex-wrap:wrap}.friend-actions>button{flex:1 1 115px}}
@media(max-width:620px){.friends-page .page-heading,.friends-add,.mail-intro{align-items:stretch;flex-direction:column}.friends-add form{grid-template-columns:auto 1fr}.friends-add form button{grid-column:1/-1}.trade-mail-sides{grid-template-columns:1fr}.friend-request-row{align-items:flex-start;flex-direction:column;gap:8px}.friends-mode-tabs{width:100%}.friends-mode-tabs button{flex:1}}
/* Alpha 9.1 visual workup */
.friends-page{gap:11px}.friends-mode-tabs{background:var(--surface-glass-88);box-shadow:var(--shadow-sm)}.friends-add{border-color:var(--purple-border-soft);border-radius:20px;box-shadow:var(--shadow-sm)}.friend-card{border-radius:20px;background:linear-gradient(145deg,var(--surface),var(--purple-soft-2));box-shadow:var(--shadow-sm)}.friend-avatar{width:58px;height:58px;border-radius:19px;font-size:24px;box-shadow:inset 0 0 0 1px var(--purple-border-soft)}.mail-intro{border-color:var(--pink-line);border-radius:20px;box-shadow:var(--shadow-sm)}.trade-mail-card{border-radius:20px;background:linear-gradient(145deg,var(--surface),var(--pink-panel));box-shadow:var(--shadow-sm)}