/* Profiles and friends use the same palette as the cabinet. */
.user-tag { display:inline-flex; align-items:center; vertical-align:middle; padding:3px 8px; border:1px solid var(--brand); color:var(--accent-ink,var(--brand)); background:color-mix(in srgb,var(--brand) 9%,transparent); border-radius:6px; font-size:10px; font-weight:750; line-height:1.4; letter-spacing:.03em; max-width:100%; overflow-wrap:anywhere; }
.profile-search { position:relative; flex:0 1 178px; min-width:120px; }
.profile-search-field { display:flex; align-items:center; gap:8px; padding:0 11px; height:38px; border:1px solid var(--border); border-radius:9px; background:var(--surface); }
.profile-search-field:focus-within { border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 14%,transparent); }
.profile-search-field svg { width:15px; height:15px; flex-shrink:0; opacity:.6; }
.profile-search-field input { width:100%; min-width:0; border:0; outline:0; padding:0; background:transparent; color:var(--text); font:inherit; font-size:11px; }
.profile-search-results { position:absolute; top:calc(100% + 12px); left:0; width:310px; max-width:calc(100vw - 32px); max-height:360px; overflow-y:auto; padding:8px; border:1px solid var(--border); border-radius:12px; background:var(--bg); box-shadow:0 14px 45px #0004; z-index:120; }
.profile-search-results[hidden] { display:none; }
.profile-search-results p { padding:12px; font-size:12px; color:var(--muted); }
.profile-search-results > a:not(.search-person) { display:block; padding:10px 12px; font-size:12px; color:var(--accent-ink,var(--brand)); }
.search-person { display:flex; align-items:center; gap:12px; padding:10px; border-radius:8px; color:var(--text); }
.search-person:hover,.search-person:focus-visible { background:color-mix(in srgb,var(--brand) 9%,transparent); }
.search-person > span:last-child { min-width:0; }
.search-person strong { font-size:12px; overflow-wrap:anywhere; }
.search-person small { display:block; color:var(--muted); font-size:10px; margin-top:3px; }
.friends-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:12px; }
.friends-heading h2 { margin:10px 0; font-size:24px; }
.friends-heading p,.social-profile-info p,.social-note { color:var(--muted); font-size:12px; line-height:1.8; }
.social-note { margin:20px 0 28px; }
.friends-group { margin-bottom:24px; }
.friends-group h2 { display:flex; align-items:center; gap:10px; font-size:15px; margin-bottom:13px; }
.friends-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.friend-card { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:15px; padding:20px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.friend-person { display:flex; align-items:center; gap:12px; min-width:0; color:var(--text); }
.friend-person > span:last-child { min-width:0; }
.friend-person strong { font-size:14px; overflow-wrap:anywhere; }
.friend-status { display:flex; align-items:center; gap:6px; margin-top:8px; font-size:11px; color:var(--muted); }
.friend-status i { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.friend-status.playing { color:#31b972; }
.friend-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.friend-actions .btn { min-height:34px; height:auto; padding:8px 12px; font-size:11px; }
.friend-label { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
.friend-label svg { width:14px; height:14px; }
.social-empty { color:var(--muted); padding:20px; border:1px dashed var(--border); border-radius:10px; font-size:12px; }
.social-profile-card { display:flex; gap:28px; align-items:flex-start; padding:32px; max-width:760px; }
.social-profile-info { min-width:0; }
.social-profile-info h2 { font-size:28px; margin:12px 0; overflow-wrap:anywhere; }
.social-profile-info .friend-actions { margin-top:24px; }
.social-back { display:inline-block; margin:24px 0; color:var(--muted); font-size:12px; }
.social-error { padding:24px; }
.social-error p { margin-bottom:12px; }
.account-tabs { overflow-x:auto; }
.account-tabs button { flex-shrink:0; }
.nav-inner { gap:16px; }
@media (min-width:941px) and (max-width:1320px) { .nav-links { display:none; }.burger { display:inline-flex; }.nav-actions { margin-left:auto; } }
@media (max-width:940px) { .profile-search { flex-basis:190px; }.nav-actions { margin-left:auto; } }
@media (max-width:620px) {
  .nav-inner { flex-wrap:wrap; gap:10px; }
  .profile-search { order:3; flex:1 0 100%; }
  .profile-search-field { height:36px; }
  .profile-search-results { width:100%; max-width:100%; }
  .friends-list { grid-template-columns:1fr; }
  .friends-heading { align-items:flex-start; }
  .friends-heading h2 { font-size:21px; }
  .friends-heading > .btn { padding:0 10px; }
  .friends-heading > .btn span { display:none; }
  .social-profile-card { padding:22px; gap:18px; flex-wrap:wrap; }
  .social-profile-info h2 { font-size:24px; }
}