.friends-page {
    max-width: 640px;
    margin: 1.5rem auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.friends-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.25rem;
}

.friends-card h3 {
    font-size: 0.65rem;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-wrap {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.search-wrap input {
    flex: 1;
    padding: 0.6rem 0.75rem;
    background: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: 4px;
    color: var(--text);
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
}

.search-wrap input:focus { outline: none; border-color: var(--accent); }

.player-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 4px;
    background: var(--bg3);
    margin-bottom: 2px;
    border: 1px solid var(--border);
    transition: border-color 0.1s;
}

.player-item:hover { border-color: var(--border2); }

.player-item img {
    width: 36px;
    height: 36px;
    border-radius: 3px;
}

.player-item-info { flex: 1; }

.player-item-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
}

.player-item-name:hover { color: var(--accent); }

.player-item-elo {
    font-size: 0.75rem;
    color: var(--text2);
    font-family: var(--mono);
}

.player-item-actions { display: flex; gap: 0.4rem; }

.btn-sm {
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: all 0.1s;
}

.btn-add { background: var(--accent); color: #000; }
.btn-add:hover { background: var(--accent2); }
.btn-accept { background: rgba(0,200,150,0.1); color: var(--success); border: 1px solid rgba(0,200,150,0.2); }
.btn-accept:hover { background: var(--success); color: #000; }
.btn-decline { background: var(--bg4); color: var(--text2); border: 1px solid var(--border); }
.btn-decline:hover { color: var(--text); }
.btn-remove { background: transparent; color: var(--danger); border: 1px solid rgba(255,68,85,0.2); }
.btn-remove:hover { background: var(--danger); color: white; }
.btn-pending { background: var(--bg4); color: var(--text2); border: 1px solid var(--border); cursor: default; }

.badge {
    background: var(--accent);
    color: #000;
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: 2px;
    font-weight: 700;
    font-family: var(--mono);
}

.empty-state {
    text-align: center;
    color: var(--text2);
    padding: 1.5rem;
    font-size: 0.85rem;
}